mirror of
https://github.com/catlog22/Claude-Code-Workflow.git
synced 2026-03-06 16:31:12 +08:00
Add comprehensive documentation for Numerical Analysis Workflow
- Introduced agent instruction template for task assignments in numerical analysis. - Defined CSV schema for tasks, including input, computed, and output columns. - Specified analysis dimensions across six phases of the workflow. - Established phase topology for the diamond deep tree structure of the workflow. - Outlined quality standards for assessing analysis reports, including criteria and quality gates.
This commit is contained in:
catlog22
@@ -2,10 +2,12 @@
|
||||
// MCP Server Dialog Component
|
||||
// ========================================
|
||||
// Add/Edit dialog for MCP server configuration with dynamic template loading
|
||||
// Supports both STDIO and HTTP transport types
|
||||
|
||||
import { useState, useEffect } from 'react';
|
||||
import { useState, useEffect, useCallback } from 'react';
|
||||
import { useIntl } from 'react-intl';
|
||||
import { useMutation, useQueryClient } from '@tanstack/react-query';
|
||||
import { Eye, EyeOff, Plus, Trash2, Globe, Terminal } from 'lucide-react';
|
||||
import {
|
||||
Dialog,
|
||||
DialogContent,
|
||||
@@ -38,6 +40,15 @@ import { useWorkflowStore, selectProjectPath } from '@/stores/workflowStore';
|
||||
|
||||
// ========== Types ==========
|
||||
|
||||
export type McpTransportType = 'stdio' | 'http';
|
||||
|
||||
export interface HttpHeader {
|
||||
id: string;
|
||||
name: string;
|
||||
value: string;
|
||||
isEnvVar: boolean;
|
||||
}
|
||||
|
||||
export interface McpServerDialogProps {
|
||||
mode: 'add' | 'edit';
|
||||
server?: McpServer;
|
||||
@@ -51,9 +62,15 @@ export type { McpTemplate } from '@/types/store';
|
||||
|
||||
interface McpServerFormData {
|
||||
name: string;
|
||||
// STDIO fields
|
||||
command: string;
|
||||
args: string[];
|
||||
env: Record<string, string>;
|
||||
// HTTP fields
|
||||
url: string;
|
||||
headers: HttpHeader[];
|
||||
bearerTokenEnvVar: string;
|
||||
// Common fields
|
||||
scope: 'project' | 'global';
|
||||
enabled: boolean;
|
||||
}
|
||||
@@ -63,9 +80,130 @@ interface FormErrors {
|
||||
command?: string;
|
||||
args?: string;
|
||||
env?: string;
|
||||
url?: string;
|
||||
headers?: string;
|
||||
}
|
||||
|
||||
// ========== Component ==========
|
||||
// ========== Helper Component: HttpHeadersInput ==========
|
||||
|
||||
interface HttpHeadersInputProps {
|
||||
headers: HttpHeader[];
|
||||
onChange: (headers: HttpHeader[]) => void;
|
||||
disabled?: boolean;
|
||||
}
|
||||
|
||||
function HttpHeadersInput({ headers, onChange, disabled }: HttpHeadersInputProps) {
|
||||
const { formatMessage } = useIntl();
|
||||
const [revealedIds, setRevealedIds] = useState<Set<string>>(new Set());
|
||||
|
||||
const generateId = () => `header-${Date.now()}-${Math.random().toString(36).slice(2, 9)}`;
|
||||
|
||||
const handleAdd = () => {
|
||||
onChange([...headers, { id: generateId(), name: '', value: '', isEnvVar: false }]);
|
||||
};
|
||||
|
||||
const handleRemove = (id: string) => {
|
||||
onChange(headers.filter((h) => h.id !== id));
|
||||
};
|
||||
|
||||
const handleUpdate = (id: string, field: keyof HttpHeader, value: string | boolean) => {
|
||||
onChange(headers.map((h) => (h.id === id ? { ...h, [field]: value } : h)));
|
||||
};
|
||||
|
||||
const toggleReveal = (id: string) => {
|
||||
setRevealedIds((prev) => {
|
||||
const next = new Set(prev);
|
||||
if (next.has(id)) {
|
||||
next.delete(id);
|
||||
} else {
|
||||
next.add(id);
|
||||
}
|
||||
return next;
|
||||
});
|
||||
};
|
||||
|
||||
const maskValue = (value: string) => {
|
||||
if (!value) return '';
|
||||
return '*'.repeat(Math.min(value.length, 8));
|
||||
};
|
||||
|
||||
return (
|
||||
<div className="space-y-2">
|
||||
{headers.map((header) => (
|
||||
<div key={header.id} className="flex items-center gap-2">
|
||||
{/* Header Name */}
|
||||
<Input
|
||||
value={header.name}
|
||||
onChange={(e) => handleUpdate(header.id, 'name', e.target.value)}
|
||||
placeholder={formatMessage({ id: 'mcp.dialog.form.http.headerName' })}
|
||||
className="flex-1"
|
||||
disabled={disabled}
|
||||
/>
|
||||
{/* Header Value */}
|
||||
<div className="relative flex-1">
|
||||
<Input
|
||||
type={revealedIds.has(header.id) ? 'text' : 'password'}
|
||||
value={header.value}
|
||||
onChange={(e) => handleUpdate(header.id, 'value', e.target.value)}
|
||||
placeholder={formatMessage({ id: 'mcp.dialog.form.http.headerValue' })}
|
||||
className="pr-8"
|
||||
disabled={disabled}
|
||||
/>
|
||||
<Button
|
||||
type="button"
|
||||
variant="ghost"
|
||||
size="icon"
|
||||
className="absolute right-0 top-0 h-full px-2"
|
||||
onClick={() => toggleReveal(header.id)}
|
||||
disabled={disabled}
|
||||
>
|
||||
{revealedIds.has(header.id) ? (
|
||||
<EyeOff className="w-4 h-4" />
|
||||
) : (
|
||||
<Eye className="w-4 h-4" />
|
||||
)}
|
||||
</Button>
|
||||
</div>
|
||||
{/* Env Var Toggle */}
|
||||
<label className="flex items-center gap-1 text-xs text-muted-foreground whitespace-nowrap">
|
||||
<input
|
||||
type="checkbox"
|
||||
checked={header.isEnvVar}
|
||||
onChange={(e) => handleUpdate(header.id, 'isEnvVar', e.target.checked)}
|
||||
className="w-3 h-3"
|
||||
disabled={disabled}
|
||||
/>
|
||||
{formatMessage({ id: 'mcp.dialog.form.http.isEnvVar' })}
|
||||
</label>
|
||||
{/* Delete Button */}
|
||||
<Button
|
||||
type="button"
|
||||
variant="ghost"
|
||||
size="icon"
|
||||
onClick={() => handleRemove(header.id)}
|
||||
disabled={disabled}
|
||||
className="text-destructive"
|
||||
>
|
||||
<Trash2 className="w-4 h-4" />
|
||||
</Button>
|
||||
</div>
|
||||
))}
|
||||
<Button
|
||||
type="button"
|
||||
variant="outline"
|
||||
size="sm"
|
||||
onClick={handleAdd}
|
||||
disabled={disabled}
|
||||
className="w-full"
|
||||
>
|
||||
<Plus className="w-4 h-4 mr-1" />
|
||||
{formatMessage({ id: 'mcp.dialog.form.http.addHeader' })}
|
||||
</Button>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
// ========== Main Component ==========
|
||||
|
||||
export function McpServerDialog({
|
||||
mode,
|
||||
@@ -81,12 +219,18 @@ export function McpServerDialog({
|
||||
// Fetch templates from backend
|
||||
const { templates, isLoading: templatesLoading } = useMcpTemplates();
|
||||
|
||||
// Transport type state
|
||||
const [transportType, setTransportType] = useState<McpTransportType>('stdio');
|
||||
|
||||
// Form state
|
||||
const [formData, setFormData] = useState<McpServerFormData>({
|
||||
name: '',
|
||||
command: '',
|
||||
args: [],
|
||||
env: {},
|
||||
url: '',
|
||||
headers: [],
|
||||
bearerTokenEnvVar: '',
|
||||
scope: 'project',
|
||||
enabled: true,
|
||||
});
|
||||
@@ -99,14 +243,59 @@ export function McpServerDialog({
|
||||
const [saveAsTemplate, setSaveAsTemplate] = useState(false);
|
||||
const projectConfigType: McpProjectConfigType = configType === 'claude-json' ? 'claude' : 'mcp';
|
||||
|
||||
// Helper to detect transport type from server data
|
||||
const detectTransportType = useCallback((serverData: McpServer | undefined): McpTransportType => {
|
||||
if (!serverData) return 'stdio';
|
||||
// If server has url field (from extended McpServer type), it's HTTP
|
||||
const extendedServer = serverData as McpServer & { url?: string };
|
||||
if (extendedServer.url) return 'http';
|
||||
return 'stdio';
|
||||
}, []);
|
||||
|
||||
// Initialize form from server prop (edit mode)
|
||||
useEffect(() => {
|
||||
if (server && mode === 'edit') {
|
||||
const detectedType = detectTransportType(server);
|
||||
setTransportType(detectedType);
|
||||
|
||||
const extendedServer = server as McpServer & {
|
||||
url?: string;
|
||||
http_headers?: Record<string, string>;
|
||||
env_http_headers?: Record<string, string>;
|
||||
bearer_token_env_var?: string;
|
||||
};
|
||||
|
||||
// Parse HTTP headers if present
|
||||
const httpHeaders: HttpHeader[] = [];
|
||||
if (extendedServer.http_headers) {
|
||||
Object.entries(extendedServer.http_headers).forEach(([name, value], idx) => {
|
||||
httpHeaders.push({
|
||||
id: `header-http-${idx}`,
|
||||
name,
|
||||
value,
|
||||
isEnvVar: false,
|
||||
});
|
||||
});
|
||||
}
|
||||
if (extendedServer.env_http_headers) {
|
||||
Object.entries(extendedServer.env_http_headers).forEach(([name, envVar], idx) => {
|
||||
httpHeaders.push({
|
||||
id: `header-env-${idx}`,
|
||||
name,
|
||||
value: envVar,
|
||||
isEnvVar: true,
|
||||
});
|
||||
});
|
||||
}
|
||||
|
||||
setFormData({
|
||||
name: server.name,
|
||||
command: server.command,
|
||||
command: server.command || '',
|
||||
args: server.args || [],
|
||||
env: server.env || {},
|
||||
url: extendedServer.url || '',
|
||||
headers: httpHeaders,
|
||||
bearerTokenEnvVar: extendedServer.bearer_token_env_var || '',
|
||||
scope: server.scope,
|
||||
enabled: server.enabled,
|
||||
});
|
||||
@@ -118,11 +307,15 @@ export function McpServerDialog({
|
||||
);
|
||||
} else {
|
||||
// Reset form for add mode
|
||||
setTransportType('stdio');
|
||||
setFormData({
|
||||
name: '',
|
||||
command: '',
|
||||
args: [],
|
||||
env: {},
|
||||
url: '',
|
||||
headers: [],
|
||||
bearerTokenEnvVar: '',
|
||||
scope: 'project',
|
||||
enabled: true,
|
||||
});
|
||||
@@ -132,7 +325,7 @@ export function McpServerDialog({
|
||||
setSelectedTemplate('');
|
||||
setSaveAsTemplate(false);
|
||||
setErrors({});
|
||||
}, [server, mode, open]);
|
||||
}, [server, mode, open, detectTransportType]);
|
||||
|
||||
// Mutations
|
||||
const createMutation = useMutation({
|
||||
@@ -182,7 +375,7 @@ export function McpServerDialog({
|
||||
|
||||
const handleFieldChange = (
|
||||
field: keyof McpServerFormData,
|
||||
value: string | boolean | string[] | Record<string, string>
|
||||
value: string | boolean | string[] | Record<string, string> | HttpHeader[]
|
||||
) => {
|
||||
setFormData((prev) => ({ ...prev, [field]: value }));
|
||||
// Clear error for this field
|
||||
@@ -223,6 +416,23 @@ export function McpServerDialog({
|
||||
}
|
||||
};
|
||||
|
||||
const handleHeadersChange = (headers: HttpHeader[]) => {
|
||||
setFormData((prev) => ({ ...prev, headers }));
|
||||
if (errors.headers) {
|
||||
setErrors((prev) => ({ ...prev, headers: undefined }));
|
||||
}
|
||||
};
|
||||
|
||||
const handleTransportTypeChange = (type: McpTransportType) => {
|
||||
setTransportType(type);
|
||||
// Clear relevant errors when switching
|
||||
setErrors((prev) => ({
|
||||
...prev,
|
||||
command: undefined,
|
||||
url: undefined,
|
||||
}));
|
||||
};
|
||||
|
||||
const validateForm = (): boolean => {
|
||||
const newErrors: FormErrors = {};
|
||||
|
||||
@@ -231,9 +441,23 @@ export function McpServerDialog({
|
||||
newErrors.name = formatMessage({ id: 'mcp.dialog.validation.nameRequired' });
|
||||
}
|
||||
|
||||
// Command required
|
||||
if (!formData.command.trim()) {
|
||||
newErrors.command = formatMessage({ id: 'mcp.dialog.validation.commandRequired' });
|
||||
// Transport-specific validation
|
||||
if (transportType === 'stdio') {
|
||||
// Command required for STDIO
|
||||
if (!formData.command.trim()) {
|
||||
newErrors.command = formatMessage({ id: 'mcp.dialog.validation.commandRequired' });
|
||||
}
|
||||
} else {
|
||||
// URL required for HTTP
|
||||
if (!formData.url.trim()) {
|
||||
newErrors.url = formatMessage({ id: 'mcp.dialog.validation.urlRequired' });
|
||||
}
|
||||
// Validate URL format
|
||||
try {
|
||||
new URL(formData.url);
|
||||
} catch {
|
||||
newErrors.url = formatMessage({ id: 'mcp.dialog.validation.urlInvalid' });
|
||||
}
|
||||
}
|
||||
|
||||
setErrors(newErrors);
|
||||
@@ -264,8 +488,54 @@ export function McpServerDialog({
|
||||
return;
|
||||
}
|
||||
|
||||
// Save as template if checked
|
||||
if (saveAsTemplate) {
|
||||
// Build server config based on transport type
|
||||
const serverConfig: McpServer & {
|
||||
url?: string;
|
||||
http_headers?: Record<string, string>;
|
||||
env_http_headers?: Record<string, string>;
|
||||
bearer_token_env_var?: string;
|
||||
} = {
|
||||
name: formData.name,
|
||||
scope: formData.scope,
|
||||
enabled: formData.enabled,
|
||||
};
|
||||
|
||||
if (transportType === 'stdio') {
|
||||
serverConfig.command = formData.command;
|
||||
serverConfig.args = formData.args;
|
||||
serverConfig.env = formData.env;
|
||||
} else {
|
||||
// HTTP transport
|
||||
serverConfig.url = formData.url;
|
||||
serverConfig.command = ''; // Empty command for HTTP servers
|
||||
|
||||
// Separate headers into static and env-based
|
||||
const httpHeaders: Record<string, string> = {};
|
||||
const envHttpHeaders: Record<string, string> = {};
|
||||
|
||||
formData.headers.forEach((h) => {
|
||||
if (h.name.trim()) {
|
||||
if (h.isEnvVar) {
|
||||
envHttpHeaders[h.name.trim()] = h.value.trim();
|
||||
} else {
|
||||
httpHeaders[h.name.trim()] = h.value.trim();
|
||||
}
|
||||
}
|
||||
});
|
||||
|
||||
if (Object.keys(httpHeaders).length > 0) {
|
||||
serverConfig.http_headers = httpHeaders;
|
||||
}
|
||||
if (Object.keys(envHttpHeaders).length > 0) {
|
||||
serverConfig.env_http_headers = envHttpHeaders;
|
||||
}
|
||||
if (formData.bearerTokenEnvVar.trim()) {
|
||||
serverConfig.bearer_token_env_var = formData.bearerTokenEnvVar.trim();
|
||||
}
|
||||
}
|
||||
|
||||
// Save as template if checked (only for STDIO)
|
||||
if (saveAsTemplate && transportType === 'stdio') {
|
||||
try {
|
||||
await saveMcpTemplate({
|
||||
name: formData.name,
|
||||
@@ -283,26 +553,13 @@ export function McpServerDialog({
|
||||
|
||||
if (mode === 'add') {
|
||||
createMutation.mutate({
|
||||
server: {
|
||||
name: formData.name,
|
||||
command: formData.command,
|
||||
args: formData.args,
|
||||
env: formData.env,
|
||||
scope: formData.scope,
|
||||
enabled: formData.enabled,
|
||||
},
|
||||
server: serverConfig,
|
||||
configType: formData.scope === 'project' ? projectConfigType : undefined,
|
||||
});
|
||||
} else {
|
||||
updateMutation.mutate({
|
||||
serverName: server!.name,
|
||||
config: {
|
||||
command: formData.command,
|
||||
args: formData.args,
|
||||
env: formData.env,
|
||||
scope: formData.scope,
|
||||
enabled: formData.enabled,
|
||||
},
|
||||
config: serverConfig,
|
||||
configType: formData.scope === 'project' ? projectConfigType : undefined,
|
||||
});
|
||||
}
|
||||
@@ -322,40 +579,42 @@ export function McpServerDialog({
|
||||
</DialogHeader>
|
||||
|
||||
<div className="space-y-4">
|
||||
{/* Template Selector */}
|
||||
<div className="space-y-2">
|
||||
<label className="text-sm font-medium text-foreground">
|
||||
{formatMessage({ id: 'mcp.dialog.form.template' })}
|
||||
</label>
|
||||
<Select value={selectedTemplate} onValueChange={handleTemplateSelect} disabled={templatesLoading}>
|
||||
<SelectTrigger className="w-full">
|
||||
<SelectValue
|
||||
placeholder={templatesLoading
|
||||
? formatMessage({ id: 'mcp.templates.loading' })
|
||||
: formatMessage({ id: 'mcp.dialog.form.templatePlaceholder' })
|
||||
}
|
||||
/>
|
||||
</SelectTrigger>
|
||||
<SelectContent>
|
||||
{templates.length === 0 ? (
|
||||
<SelectItem value="__empty__" disabled>
|
||||
{formatMessage({ id: 'mcp.templates.empty.title' })}
|
||||
</SelectItem>
|
||||
) : (
|
||||
templates.map((template) => (
|
||||
<SelectItem key={template.name} value={template.name}>
|
||||
<div className="flex flex-col">
|
||||
<span className="font-medium">{template.name}</span>
|
||||
<span className="text-xs text-muted-foreground">
|
||||
{template.description || formatMessage({ id: 'mcp.dialog.form.templatePlaceholder' })}
|
||||
</span>
|
||||
</div>
|
||||
{/* Template Selector - Only for STDIO */}
|
||||
{transportType === 'stdio' && (
|
||||
<div className="space-y-2">
|
||||
<label className="text-sm font-medium text-foreground">
|
||||
{formatMessage({ id: 'mcp.dialog.form.template' })}
|
||||
</label>
|
||||
<Select value={selectedTemplate} onValueChange={handleTemplateSelect} disabled={templatesLoading}>
|
||||
<SelectTrigger className="w-full">
|
||||
<SelectValue
|
||||
placeholder={templatesLoading
|
||||
? formatMessage({ id: 'mcp.templates.loading' })
|
||||
: formatMessage({ id: 'mcp.dialog.form.templatePlaceholder' })
|
||||
}
|
||||
/>
|
||||
</SelectTrigger>
|
||||
<SelectContent>
|
||||
{templates.length === 0 ? (
|
||||
<SelectItem value="__empty__" disabled>
|
||||
{formatMessage({ id: 'mcp.templates.empty.title' })}
|
||||
</SelectItem>
|
||||
))
|
||||
)}
|
||||
</SelectContent>
|
||||
</Select>
|
||||
</div>
|
||||
) : (
|
||||
templates.map((template) => (
|
||||
<SelectItem key={template.name} value={template.name}>
|
||||
<div className="flex flex-col">
|
||||
<span className="font-medium">{template.name}</span>
|
||||
<span className="text-xs text-muted-foreground">
|
||||
{template.description || formatMessage({ id: 'mcp.dialog.form.templatePlaceholder' })}
|
||||
</span>
|
||||
</div>
|
||||
</SelectItem>
|
||||
))
|
||||
)}
|
||||
</SelectContent>
|
||||
</Select>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* Name */}
|
||||
<div className="space-y-2">
|
||||
@@ -375,87 +634,192 @@ export function McpServerDialog({
|
||||
)}
|
||||
</div>
|
||||
|
||||
{/* Command */}
|
||||
{/* Transport Type Selector */}
|
||||
<div className="space-y-2">
|
||||
<label className="text-sm font-medium text-foreground">
|
||||
{formatMessage({ id: 'mcp.dialog.form.command' })}
|
||||
<span className="text-destructive ml-1">*</span>
|
||||
{formatMessage({ id: 'mcp.dialog.form.transportType' })}
|
||||
</label>
|
||||
<Input
|
||||
value={formData.command}
|
||||
onChange={(e) => handleFieldChange('command', e.target.value)}
|
||||
placeholder={formatMessage({ id: 'mcp.dialog.form.commandPlaceholder' })}
|
||||
error={!!errors.command}
|
||||
/>
|
||||
{errors.command && (
|
||||
<p className="text-sm text-destructive">{errors.command}</p>
|
||||
)}
|
||||
<div className="flex gap-4">
|
||||
<label className="flex items-center gap-2 cursor-pointer">
|
||||
<input
|
||||
type="radio"
|
||||
name="transportType"
|
||||
value="stdio"
|
||||
checked={transportType === 'stdio'}
|
||||
onChange={() => handleTransportTypeChange('stdio')}
|
||||
className="w-4 h-4"
|
||||
disabled={mode === 'edit'}
|
||||
/>
|
||||
<Terminal className="w-4 h-4 text-muted-foreground" />
|
||||
<span className="text-sm">
|
||||
{formatMessage({ id: 'mcp.dialog.form.transportStdio' })}
|
||||
</span>
|
||||
</label>
|
||||
<label className="flex items-center gap-2 cursor-pointer">
|
||||
<input
|
||||
type="radio"
|
||||
name="transportType"
|
||||
value="http"
|
||||
checked={transportType === 'http'}
|
||||
onChange={() => handleTransportTypeChange('http')}
|
||||
className="w-4 h-4"
|
||||
disabled={mode === 'edit'}
|
||||
/>
|
||||
<Globe className="w-4 h-4 text-muted-foreground" />
|
||||
<span className="text-sm">
|
||||
{formatMessage({ id: 'mcp.dialog.form.transportHttp' })}
|
||||
</span>
|
||||
</label>
|
||||
</div>
|
||||
<p className="text-xs text-muted-foreground">
|
||||
{formatMessage({ id: 'mcp.dialog.form.transportHint' })}
|
||||
</p>
|
||||
</div>
|
||||
|
||||
{/* Args */}
|
||||
<div className="space-y-2">
|
||||
<label className="text-sm font-medium text-foreground">
|
||||
{formatMessage({ id: 'mcp.dialog.form.args' })}
|
||||
</label>
|
||||
<Input
|
||||
value={argsInput}
|
||||
onChange={(e) => handleArgsChange(e.target.value)}
|
||||
placeholder={formatMessage({ id: 'mcp.dialog.form.argsPlaceholder' })}
|
||||
error={!!errors.args}
|
||||
/>
|
||||
<p className="text-xs text-muted-foreground">
|
||||
{formatMessage({ id: 'mcp.dialog.form.argsHint' })}
|
||||
</p>
|
||||
{formData.args.length > 0 && (
|
||||
<div className="flex flex-wrap gap-1 mt-2">
|
||||
{formData.args.map((arg, idx) => (
|
||||
<Badge key={idx} variant="secondary" className="font-mono text-xs">
|
||||
{arg}
|
||||
</Badge>
|
||||
))}
|
||||
{/* STDIO Fields */}
|
||||
{transportType === 'stdio' && (
|
||||
<>
|
||||
{/* Command */}
|
||||
<div className="space-y-2">
|
||||
<label className="text-sm font-medium text-foreground">
|
||||
{formatMessage({ id: 'mcp.dialog.form.command' })}
|
||||
<span className="text-destructive ml-1">*</span>
|
||||
</label>
|
||||
<Input
|
||||
value={formData.command}
|
||||
onChange={(e) => handleFieldChange('command', e.target.value)}
|
||||
placeholder={formatMessage({ id: 'mcp.dialog.form.commandPlaceholder' })}
|
||||
error={!!errors.command}
|
||||
/>
|
||||
{errors.command && (
|
||||
<p className="text-sm text-destructive">{errors.command}</p>
|
||||
)}
|
||||
</div>
|
||||
)}
|
||||
{errors.args && (
|
||||
<p className="text-sm text-destructive">{errors.args}</p>
|
||||
)}
|
||||
</div>
|
||||
|
||||
{/* Environment Variables */}
|
||||
<div className="space-y-2">
|
||||
<label className="text-sm font-medium text-foreground">
|
||||
{formatMessage({ id: 'mcp.dialog.form.env' })}
|
||||
</label>
|
||||
<textarea
|
||||
value={envInput}
|
||||
onChange={(e) => handleEnvChange(e.target.value)}
|
||||
placeholder={formatMessage({ id: 'mcp.dialog.form.envPlaceholder' })}
|
||||
className={cn(
|
||||
'flex min-h-[100px] w-full rounded-md border border-input bg-background px-3 py-2 text-sm ring-offset-background placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50',
|
||||
errors.env && 'border-destructive focus-visible:ring-destructive'
|
||||
)}
|
||||
/>
|
||||
<p className="text-xs text-muted-foreground">
|
||||
{formatMessage({ id: 'mcp.dialog.form.envHint' })}
|
||||
</p>
|
||||
{Object.keys(formData.env).length > 0 && (
|
||||
<div className="space-y-1 mt-2">
|
||||
{Object.entries(formData.env).map(([key, value]) => (
|
||||
<div key={key} className="flex items-center gap-2 text-sm">
|
||||
<Badge variant="outline" className="font-mono">
|
||||
{key}
|
||||
</Badge>
|
||||
<span className="text-muted-foreground">=</span>
|
||||
<code className="text-xs bg-muted px-2 py-1 rounded flex-1 overflow-x-auto">
|
||||
{value}
|
||||
</code>
|
||||
{/* Args */}
|
||||
<div className="space-y-2">
|
||||
<label className="text-sm font-medium text-foreground">
|
||||
{formatMessage({ id: 'mcp.dialog.form.args' })}
|
||||
</label>
|
||||
<Input
|
||||
value={argsInput}
|
||||
onChange={(e) => handleArgsChange(e.target.value)}
|
||||
placeholder={formatMessage({ id: 'mcp.dialog.form.argsPlaceholder' })}
|
||||
error={!!errors.args}
|
||||
/>
|
||||
<p className="text-xs text-muted-foreground">
|
||||
{formatMessage({ id: 'mcp.dialog.form.argsHint' })}
|
||||
</p>
|
||||
{formData.args.length > 0 && (
|
||||
<div className="flex flex-wrap gap-1 mt-2">
|
||||
{formData.args.map((arg, idx) => (
|
||||
<Badge key={idx} variant="secondary" className="font-mono text-xs">
|
||||
{arg}
|
||||
</Badge>
|
||||
))}
|
||||
</div>
|
||||
))}
|
||||
)}
|
||||
{errors.args && (
|
||||
<p className="text-sm text-destructive">{errors.args}</p>
|
||||
)}
|
||||
</div>
|
||||
)}
|
||||
{errors.env && (
|
||||
<p className="text-sm text-destructive">{errors.env}</p>
|
||||
)}
|
||||
</div>
|
||||
|
||||
{/* Environment Variables */}
|
||||
<div className="space-y-2">
|
||||
<label className="text-sm font-medium text-foreground">
|
||||
{formatMessage({ id: 'mcp.dialog.form.env' })}
|
||||
</label>
|
||||
<textarea
|
||||
value={envInput}
|
||||
onChange={(e) => handleEnvChange(e.target.value)}
|
||||
placeholder={formatMessage({ id: 'mcp.dialog.form.envPlaceholder' })}
|
||||
className={cn(
|
||||
'flex min-h-[100px] w-full rounded-md border border-input bg-background px-3 py-2 text-sm ring-offset-background placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50',
|
||||
errors.env && 'border-destructive focus-visible:ring-destructive'
|
||||
)}
|
||||
/>
|
||||
<p className="text-xs text-muted-foreground">
|
||||
{formatMessage({ id: 'mcp.dialog.form.envHint' })}
|
||||
</p>
|
||||
{Object.keys(formData.env).length > 0 && (
|
||||
<div className="space-y-1 mt-2">
|
||||
{Object.entries(formData.env).map(([key, value]) => (
|
||||
<div key={key} className="flex items-center gap-2 text-sm">
|
||||
<Badge variant="outline" className="font-mono">
|
||||
{key}
|
||||
</Badge>
|
||||
<span className="text-muted-foreground">=</span>
|
||||
<code className="text-xs bg-muted px-2 py-1 rounded flex-1 overflow-x-auto">
|
||||
{value}
|
||||
</code>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
)}
|
||||
{errors.env && (
|
||||
<p className="text-sm text-destructive">{errors.env}</p>
|
||||
)}
|
||||
</div>
|
||||
</>
|
||||
)}
|
||||
|
||||
{/* HTTP Fields */}
|
||||
{transportType === 'http' && (
|
||||
<>
|
||||
{/* URL */}
|
||||
<div className="space-y-2">
|
||||
<label className="text-sm font-medium text-foreground">
|
||||
{formatMessage({ id: 'mcp.dialog.form.http.url' })}
|
||||
<span className="text-destructive ml-1">*</span>
|
||||
</label>
|
||||
<Input
|
||||
value={formData.url}
|
||||
onChange={(e) => handleFieldChange('url', e.target.value)}
|
||||
placeholder={formatMessage({ id: 'mcp.dialog.form.http.urlPlaceholder' })}
|
||||
error={!!errors.url}
|
||||
/>
|
||||
{errors.url && (
|
||||
<p className="text-sm text-destructive">{errors.url}</p>
|
||||
)}
|
||||
<p className="text-xs text-muted-foreground">
|
||||
{formatMessage({ id: 'mcp.dialog.form.http.urlHint' })}
|
||||
</p>
|
||||
</div>
|
||||
|
||||
{/* Bearer Token Env Var */}
|
||||
<div className="space-y-2">
|
||||
<label className="text-sm font-medium text-foreground">
|
||||
{formatMessage({ id: 'mcp.dialog.form.http.bearerToken' })}
|
||||
</label>
|
||||
<Input
|
||||
value={formData.bearerTokenEnvVar}
|
||||
onChange={(e) => handleFieldChange('bearerTokenEnvVar', e.target.value)}
|
||||
placeholder={formatMessage({ id: 'mcp.dialog.form.http.bearerTokenPlaceholder' })}
|
||||
/>
|
||||
<p className="text-xs text-muted-foreground">
|
||||
{formatMessage({ id: 'mcp.dialog.form.http.bearerTokenHint' })}
|
||||
</p>
|
||||
</div>
|
||||
|
||||
{/* HTTP Headers */}
|
||||
<div className="space-y-2">
|
||||
<label className="text-sm font-medium text-foreground">
|
||||
{formatMessage({ id: 'mcp.dialog.form.http.headers' })}
|
||||
</label>
|
||||
<HttpHeadersInput
|
||||
headers={formData.headers}
|
||||
onChange={handleHeadersChange}
|
||||
disabled={isPending}
|
||||
/>
|
||||
<p className="text-xs text-muted-foreground">
|
||||
{formatMessage({ id: 'mcp.dialog.form.http.headersHint' })}
|
||||
</p>
|
||||
{errors.headers && (
|
||||
<p className="text-sm text-destructive">{errors.headers}</p>
|
||||
)}
|
||||
</div>
|
||||
</>
|
||||
)}
|
||||
|
||||
{/* Scope */}
|
||||
<div className="space-y-2">
|
||||
@@ -522,19 +886,21 @@ export function McpServerDialog({
|
||||
</label>
|
||||
</div>
|
||||
|
||||
{/* Save as Template */}
|
||||
<div className="flex items-center gap-2">
|
||||
<input
|
||||
type="checkbox"
|
||||
id="save-as-template"
|
||||
checked={saveAsTemplate}
|
||||
onChange={(e) => setSaveAsTemplate(e.target.checked)}
|
||||
className="w-4 h-4"
|
||||
/>
|
||||
<label htmlFor="save-as-template" className="text-sm font-medium text-foreground cursor-pointer">
|
||||
{formatMessage({ id: 'mcp.templates.actions.saveAsTemplate' })}
|
||||
</label>
|
||||
</div>
|
||||
{/* Save as Template - Only for STDIO */}
|
||||
{transportType === 'stdio' && (
|
||||
<div className="flex items-center gap-2">
|
||||
<input
|
||||
type="checkbox"
|
||||
id="save-as-template"
|
||||
checked={saveAsTemplate}
|
||||
onChange={(e) => setSaveAsTemplate(e.target.checked)}
|
||||
className="w-4 h-4"
|
||||
/>
|
||||
<label htmlFor="save-as-template" className="text-sm font-medium text-foreground cursor-pointer">
|
||||
{formatMessage({ id: 'mcp.templates.actions.saveAsTemplate' })}
|
||||
</label>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
|
||||
<DialogFooter>
|
||||
|
||||
Reference in New Issue
Block a user