@baimingtao/lbs-agent 1.0.0

package/interfaces/web/frontend/src/main.tsx

@@ -0,0 +1,11 @@
+import { StrictMode } from 'react';
+import { createRoot } from 'react-dom/client';
+import './index.css';
+import App from './App.tsx';
+import { ThemeProvider } from './contexts/ThemeContext';
+
+createRoot(document.getElementById('root')!).render(
+  <StrictMode>
+    <ThemeProvider><App /></ThemeProvider>
+  </StrictMode>,
+);

package/interfaces/web/frontend/src/mock/data.ts

@@ -0,0 +1,3 @@
+// 旧版静态演示数据已移除。
+// 仪表盘现在统一通过 src/api/client.ts 从 FastAPI 获取真实运行数据。
+export {};

package/interfaces/web/frontend/src/pages/AgentsPage.tsx

@@ -0,0 +1,156 @@
+import { useEffect, useMemo, useState } from 'react';
+import { api, type AgentConfigDto, type ProviderDto } from '../api/client';
+import { PagePanel, Card, Badge } from '../components/PagePanel';
+import { NiceSelect } from '../components/NiceSelect';
+import type { AgentOption } from '../types';
+
+interface Props { agents: AgentOption[]; onSaved?: () => void }
+
+export function AgentsPage({ agents, onSaved }: Props) {
+  const [selected, setSelected] = useState('');
+  const [form, setForm] = useState<AgentConfigDto | null>(null);
+  const [providers, setProviders] = useState<ProviderDto[]>([]);
+  const [loading, setLoading] = useState(false);
+  const [saving, setSaving] = useState(false);
+  const [error, setError] = useState('');
+  const [notice, setNotice] = useState('');
+
+  useEffect(() => { if (!selected && agents[0]) setSelected(agents[0].name); }, [agents, selected]);
+  useEffect(() => { void api.getProviders().then(({ providers }) => setProviders(providers)).catch(() => undefined); }, []);
+  useEffect(() => {
+    if (!selected) return;
+    setLoading(true); setError(''); setNotice('');
+    api.getAgent(selected).then(setForm).catch(e => setError(e.message)).finally(() => setLoading(false));
+  }, [selected]);
+
+  const fallback = useMemo(() => agents.find(a => a.name === selected), [agents, selected]);
+  useEffect(() => {
+    if (!loading && !form && fallback) {
+      setForm({
+        name: fallback.name, display_name: fallback.displayName, model: fallback.model, provider: fallback.provider,
+        tools: fallback.tools, fallback_models: fallback.fallbackModels, guardrails: fallback.guardrails,
+        verification: fallback.verification, verification_rules: fallback.verificationRules, verification_level: fallback.verificationLevel,
+        error_strategy: fallback.errorStrategy, timeout: fallback.timeout, max_iterations: fallback.maxIterations, max_retries: fallback.maxRetries, prompt_file: fallback.promptFile,
+      });
+    }
+  }, [fallback, form, loading]);
+
+  const set = <K extends keyof AgentConfigDto>(key: K, value: AgentConfigDto[K]) => setForm(f => f ? { ...f, [key]: value } : f);
+  const modelsForProvider = useMemo(() => providers.find(p => p.name === form?.provider)?.models || [], [providers, form?.provider]);
+
+  // ListEditor helpers for string[] fields
+  const listSet = (field: 'fallback_models' | 'tools' | 'guardrails' | 'verification_rules', index: number, value: string) =>
+    setForm(f => { if (!f) return f; const arr = [...(f[field] || [])]; arr[index] = value; return { ...f, [field]: arr }; });
+  const listAdd = (field: 'fallback_models' | 'tools' | 'guardrails' | 'verification_rules') =>
+    setForm(f => { if (!f) return f; const arr = [...(f[field] || []), '']; return { ...f, [field]: arr }; });
+  const listRemove = (field: 'fallback_models' | 'tools' | 'guardrails' | 'verification_rules', index: number) =>
+    setForm(f => { if (!f) return f; const arr = (f[field] || []).filter((_, i) => i !== index); return { ...f, [field]: arr }; });
+
+  const save = async () => {
+    if (!form) return;
+    setSaving(true); setError(''); setNotice('');
+    try {
+      await api.updateAgent(selected, form);
+      const readback = await api.getAgent(selected);
+      setForm(readback);
+      setNotice('已保存并从服务端重新读取配置。');
+      onSaved?.();
+    } catch (e) { setError(e instanceof Error ? e.message : String(e)); }
+    finally { setSaving(false); }
+  };
+
+  return (
+    <PagePanel title="Agent 控制面" subtitle="编辑供应商、模型回退、工具权限、护栏、验证和运行策略">
+      <div className="grid gap-4 lg:grid-cols-[260px_1fr]">
+        <Card title="Agents" badge={`${agents.length}`}>
+          <div className="space-y-1">
+            {agents.map(a => (
+              <button key={a.name} onClick={() => { setForm(null); setSelected(a.name); }} className={`w-full rounded-xl px-3 py-3 text-left transition ${selected === a.name ? 'bg-violet/10 text-violet' : 'hover:bg-slate-50'}`}>
+                <b className="block text-sm">{a.displayName}</b>
+                <span className="font-mono text-[10px] opacity-60">{a.name}</span>
+              </button>
+            ))}
+          </div>
+        </Card>
+        <Card title={form?.display_name || selected || '配置'}>
+          {loading && <p className="text-sm text-slate-400">正在加载 Agent 配置…</p>}
+          {error && <p className="mb-3 rounded-lg bg-red-50 p-3 text-xs text-red-600">{error}</p>}
+          {notice && <p className="mb-3 rounded-lg bg-emerald-50 p-3 text-xs text-emerald-700">{notice}</p>}
+          {form && (
+            <div className="space-y-4">
+              {/* Provider + Model */}
+              <div className="grid gap-3 md:grid-cols-2">
+                <label className="text-xs font-semibold text-slate-600">选择供应商
+                  <NiceSelect className="control-select mt-1" value={form.provider || ''} placeholder="选择供应商" options={providers.map(p => ({ value: p.name, label: p.display_name }))} onChange={val => set('provider', val)} />
+                </label>
+                <label className="text-xs font-semibold text-slate-600">选择模型
+                  <NiceSelect className="control-select mt-1" value={form.model || ''} placeholder="选择模型" options={modelsForProvider.map(m => ({ value: m, label: m }))} onChange={val => set('model', val)} />
+                </label>
+                <label className="text-xs font-semibold text-slate-600">超时（秒）<input type="number" min="1" className="pretty-input mt-1" value={form.timeout ?? ''} onChange={e => set('timeout', Number(e.target.value))} /></label>
+                <label className="text-xs font-semibold text-slate-600">最大重试<input type="number" min="0" className="pretty-input mt-1" value={form.max_retries ?? ''} onChange={e => set('max_retries', Number(e.target.value))} /></label>
+              </div>
+
+              {/* Strategy dropdowns */}
+              <div className="grid gap-3 md:grid-cols-3">
+                <label className="text-xs font-semibold text-slate-600">错误策略
+                  <NiceSelect className="mt-1" value={form.error_strategy || ''} placeholder="后端默认" options={[{ value: '', label: '后端默认' }, { value: 'retry', label: 'retry' }, { value: 'fail_fast', label: 'fail_fast' }, { value: 'continue', label: 'continue' }]} onChange={val => set('error_strategy', val)} />
+                </label>
+                <label className="text-xs font-semibold text-slate-600">验证等级
+                  <NiceSelect className="mt-1" value={form.verification_level || ''} placeholder="后端默认" options={[{ value: '', label: '后端默认' }, { value: 'light', label: 'light' }, { value: 'medium', label: 'medium' }, { value: 'heavy', label: 'heavy' }]} onChange={val => set('verification_level', val)} />
+                </label>
+                <label className="text-xs font-semibold text-slate-600">最大迭代<input type="number" min="1" className="pretty-input mt-1" value={form.max_iterations ?? ''} onChange={e => set('max_iterations', Number(e.target.value))} /></label>
+              </div>
+
+              {/* List editors for array fields */}
+              <div className="space-y-4">
+                <ListEditor title="回退模型" hint="按顺序回退；列表上方优先。" rows={form.fallback_models || []} addLabel="新增模型" placeholder="gpt-5.4" onAdd={() => listAdd('fallback_models')} onChange={(i, v) => listSet('fallback_models', i, v)} onRemove={i => listRemove('fallback_models', i)} />
+                <ListEditor title="工具" hint="该 Agent 可调用的工具列表。" rows={form.tools || []} addLabel="新增工具" placeholder="read_file" onAdd={() => listAdd('tools')} onChange={(i, v) => listSet('tools', i, v)} onRemove={i => listRemove('tools', i)} />
+                <ListEditor title="Guardrails" hint="护栏规则，每条一行。" rows={form.guardrails || []} addLabel="新增" placeholder="禁止删除文件" onAdd={() => listAdd('guardrails')} onChange={(i, v) => listSet('guardrails', i, v)} onRemove={i => listRemove('guardrails', i)} />
+                <ListEditor title="验证规则" hint="verification_rules，每条一行。" rows={form.verification_rules || []} addLabel="新增" placeholder="必须通过测试" onAdd={() => listAdd('verification_rules')} onChange={(i, v) => listSet('verification_rules', i, v)} onRemove={i => listRemove('verification_rules', i)} />
+              </div>
+
+              {/* Footer */}
+              <div className="flex items-center justify-between border-t border-slate-100 pt-4">
+                <div className="flex gap-2">
+                  <Badge color="violet">{form.provider || 'provider 未设置'}</Badge>
+                  <Badge>{form.tools?.length || 0} tools</Badge>
+                </div>
+                <button onClick={save} disabled={saving || loading} className="rounded-xl bg-slate-900 px-5 py-2 text-xs font-bold text-white disabled:opacity-40">
+                  {saving ? '保存并校验中…' : '保存配置'}
+                </button>
+              </div>
+            </div>
+          )}
+        </Card>
+      </div>
+    </PagePanel>
+  );
+}
+
+function ListEditor({ title, hint, rows, addLabel, placeholder, onAdd, onChange, onRemove }: {
+  title: string; hint: string; rows: string[]; addLabel: string; placeholder: string;
+  onAdd: () => void; onChange: (index: number, value: string) => void; onRemove: (index: number) => void;
+}) {
+  const list = rows.length ? rows : [];
+  return (
+    <section className="rounded-2xl border border-slate-200 bg-white/80 p-3 shadow-sm">
+      <div className="mb-3 flex items-center justify-between">
+        <div>
+          <div className="text-xs font-semibold text-slate-700">{title}</div>
+          <div className="mt-1 text-[10px] text-slate-400">{hint}</div>
+        </div>
+        <button type="button" onClick={onAdd} className="rounded-lg bg-slate-900 px-2.5 py-1.5 text-[10px] font-semibold text-white hover:bg-violet">+ {addLabel}</button>
+      </div>
+      <div className="space-y-2">
+        {list.map((row, index) => (
+          <div key={`${title}-${index}`} className="grid grid-cols-[auto_1fr_auto] items-center gap-2 rounded-xl border border-slate-200 bg-white px-2 py-2">
+            <span className="inline-flex h-7 w-7 items-center justify-center rounded-lg bg-slate-100 text-[10px] font-semibold text-slate-500">{index + 1}</span>
+            <input type="text" className="w-full border-0 bg-transparent text-xs text-slate-700 outline-none placeholder:text-slate-300" placeholder={placeholder} value={row} onChange={e => onChange(index, e.target.value)} />
+            <button type="button" onClick={() => onRemove(index)} className="rounded-lg px-2 py-1 text-[10px] font-semibold text-red-500 hover:bg-red-50">删除</button>
+          </div>
+        ))}
+        {!list.length && <div className="rounded-xl border border-dashed border-slate-200 bg-slate-50 px-3 py-4 text-xs text-slate-400">暂无内容，点击「+ {addLabel}」添加</div>}
+      </div>
+    </section>
+  );
+}

package/interfaces/web/frontend/src/pages/CronPage.tsx

@@ -0,0 +1,80 @@
+import { useState } from 'react';
+import { PagePanel, Card, Badge } from '../components/PagePanel';
+import { NiceSelect } from '../components/NiceSelect';
+import type { CronItem, AgentOption } from '../types';
+
+interface Props {
+  cron: CronItem[];
+  agents: AgentOption[];
+  onCreate: (form: { name: string; schedule: string; agent: string; task: string }) => Promise<void>;
+  onAction: (id: string, action: string) => Promise<void>;
+}
+
+export function CronPage({ cron, agents, onCreate, onAction }: Props) {
+  const [form, setForm] = useState({ name: '', schedule: '0 9 * * *', agent: agents[0]?.name || 'audit', task: '' });
+  const [busy, setBusy] = useState(false);
+  const [notice, setNotice] = useState('');
+
+  const submit = async () => {
+    if (!form.name.trim() || !form.task.trim()) return;
+    setBusy(true); setNotice('');
+    try { await onCreate(form); setNotice('定时任务已创建'); setForm(f => ({ ...f, name: '', task: '' })); }
+    catch (e) { setNotice(e instanceof Error ? e.message : '创建失败'); }
+    finally { setBusy(false); }
+  };
+
+  const act = async (id: string, action: string) => {
+    setBusy(true);
+    try { await onAction(id, action); }
+    catch (e) { setNotice(e instanceof Error ? e.message : '操作失败'); }
+    finally { setBusy(false); }
+  };
+
+  return (
+    <PagePanel title="定时任务" subtitle="Cron 定时 Agent 执行、暂停/恢复/立即运行">
+      {notice && <div className="mb-4 rounded-xl bg-violet/5 px-4 py-2 text-xs text-violet">{notice}</div>}
+      <div className="grid grid-cols-1 gap-4 lg:grid-cols-2">
+        <Card title="新建定时任务" badge="Cron / 间隔">
+          <div className="space-y-3">
+            <input className="pretty-input" placeholder="任务名称" value={form.name} onChange={e => setForm({ ...form, name: e.target.value })} />
+            <NiceSelect
+              value={form.agent}
+              options={agents.map(a => ({ value: a.name, label: a.displayName }))}
+              onChange={val => setForm({ ...form, agent: val })}
+            />
+            <input className="pretty-input font-mono" placeholder="0 9 * * * / 30m / every 2h" value={form.schedule} onChange={e => setForm({ ...form, schedule: e.target.value })} />
+            <textarea className="pretty-input min-h-24 resize-y" placeholder="输入定时执行的自然语言任务" value={form.task} onChange={e => setForm({ ...form, task: e.target.value })} />
+            <button className="w-full rounded-xl bg-slate-900 py-2.5 text-xs font-semibold text-white disabled:opacity-40" disabled={busy || !form.name.trim() || !form.task.trim()} onClick={submit}>
+              {busy ? '正在保存…' : '创建任务'}
+            </button>
+          </div>
+        </Card>
+        <Card title="任务列表" badge={`${cron.length} 个`}>
+          {!cron.length ? <p className="py-8 text-center text-xs text-slate-400">暂无定时任务</p> : (
+            <div className="space-y-2">
+              {cron.map(job => (
+                <div key={job.jobId} className="rounded-xl border border-slate-200 bg-white p-3">
+                  <div className="flex items-center justify-between">
+                    <b className="text-xs text-slate-800">{job.name}</b>
+                    <Badge color={job.enabled ? 'green' : 'slate'}>{job.enabled ? '运行中' : '已暂停'}</Badge>
+                  </div>
+                  <p className="mt-1 font-mono text-[10px] text-violet">{job.schedule}</p>
+                  <p className="mt-1 line-clamp-2 text-[11px] text-slate-500">{job.task || job.agentName}</p>
+                  {job.nextRun && job.enabled && <p className="mt-1 text-[10px] text-slate-400">下次运行：{job.nextRun}</p>}
+                  <div className="mt-2 flex gap-1">
+                    <button onClick={() => act(job.jobId, job.enabled ? 'pause' : 'resume')} disabled={busy}
+                      className="rounded-lg bg-slate-100 px-2 py-1 text-[10px] text-slate-600 hover:bg-slate-200">{job.enabled ? '暂停' : '恢复'}</button>
+                    <button onClick={() => act(job.jobId, 'trigger')} disabled={busy}
+                      className="rounded-lg bg-slate-100 px-2 py-1 text-[10px] text-slate-600 hover:bg-slate-200">立即运行</button>
+                    <button onClick={() => act(job.jobId, 'remove')} disabled={busy}
+                      className="rounded-lg bg-red-50 px-2 py-1 text-[10px] text-red-600">删除</button>
+                  </div>
+                </div>
+              ))}
+            </div>
+          )}
+        </Card>
+      </div>
+    </PagePanel>
+  );
+}

package/interfaces/web/frontend/src/pages/FilesPage.tsx

@@ -0,0 +1,57 @@
+import { useEffect, useState } from 'react';
+import { PagePanel, Card } from '../components/PagePanel';
+
+interface FileItem { name: string; path: string; size: number; session_id: string }
+interface FilesResponse { files: FileItem[] }
+
+export function FilesPage() {
+  const [files, setFiles] = useState<FileItem[]>([]);
+  const [loading, setLoading] = useState(true);
+  const [uploading, setUploading] = useState(false);
+
+  const load = () => {
+    fetch('/api/files').then(r => r.json()).then((d: FilesResponse) => { setFiles(d.files || []); setLoading(false); })
+      .catch(() => setLoading(false));
+  };
+
+  useEffect(() => { load(); }, []);
+
+  const upload = async (file?: File) => {
+    if (!file) return;
+    setUploading(true);
+    const form = new FormData();
+    form.append('file', file);
+    form.append('session_id', 'shared');
+    try { await fetch('/api/files/upload', { method: 'POST', body: form }); load(); }
+    finally { setUploading(false); }
+  };
+
+  return (
+    <PagePanel title="文件管理" subtitle="会话附件与共享文件"
+      actions={<label className="cursor-pointer rounded-xl bg-slate-900 px-3 py-2 text-xs font-semibold text-white hover:bg-violet">
+        {uploading ? '上传中…' : '📎 上传文件'}
+        <input type="file" hidden onChange={e => { void upload(e.target.files?.[0]); e.currentTarget.value = ''; }} />
+      </label>}>
+      {loading ? <p className="text-sm text-slate-400">加载中…</p> : !files.length ? (
+        <Card><div className="py-12 text-center"><span className="text-3xl">📁</span><p className="mt-3 text-sm text-slate-400">暂无文件</p></div></Card>
+      ) : (
+        <Card>
+          <div className="space-y-2">
+            {files.map(f => (
+              <div key={f.path} className="flex items-center justify-between rounded-xl border border-slate-200 bg-slate-50 px-4 py-2.5">
+                <div>
+                  <b className="text-sm text-slate-800">{f.name}</b>
+                  <span className="ml-2 font-mono text-[10px] text-slate-400">{(f.size / 1024).toFixed(1)} KB · {f.session_id}</span>
+                </div>
+                <div className="flex gap-1">
+                  <a href={`/api/files/download/${encodeURIComponent(f.session_id)}/${encodeURIComponent(f.name)}`} className="rounded-lg bg-violet/10 px-2 py-1 text-[10px] font-semibold text-violet hover:bg-violet/20">下载</a>
+                  <button onClick={() => { if (confirm(`删除 ${f.name}？`)) { fetch(`/api/files/${encodeURIComponent(f.session_id)}/${encodeURIComponent(f.name)}`, { method: 'DELETE' }).then(() => load()); } }} className="rounded-lg bg-red-50 px-2 py-1 text-[10px] font-semibold text-red-500 hover:bg-red-100">删除</button>
+                </div>
+              </div>
+            ))}
+          </div>
+        </Card>
+      )}
+    </PagePanel>
+  );
+}

package/interfaces/web/frontend/src/pages/McpPage.tsx

@@ -0,0 +1,143 @@
+import { useCallback, useEffect, useState } from 'react';
+import { api, type McpServerDto, type McpToolDto } from '../api/client';
+import { PagePanel, Card, Badge } from '../components/PagePanel';
+import { NiceSelect } from '../components/NiceSelect';
+import { Toggle } from '../components/Toggle';
+
+const empty: McpServerDto = { name: '', transport: 'stdio', enabled: true, args: [] };
+
+export function McpPage() {
+  const [servers, setServers] = useState<McpServerDto[]>([]);
+  const [catalog, setCatalog] = useState<McpToolDto[]>([]);
+  const [form, setForm] = useState<McpServerDto>(empty);
+  const [editing, setEditing] = useState('');
+  const [loading, setLoading] = useState(true);
+  const [busy, setBusy] = useState('');
+  const [error, setError] = useState('');
+
+  const load = useCallback(async () => {
+    setLoading(true);
+    setError('');
+    try {
+      const [serverData, catalogData] = await Promise.all([api.getMcp(), api.getMcpCatalog()]);
+      setServers(serverData.servers || []);
+      setCatalog(catalogData.tools || []);
+    } catch (e) {
+      setError(e instanceof Error ? e.message : String(e));
+    } finally {
+      setLoading(false);
+    }
+  }, []);
+
+  useEffect(() => {
+    void load();
+  }, [load]);
+
+  const save = async () => {
+    setBusy('save');
+    setError('');
+    try {
+      const payload = { ...form, args: form.args || [] };
+      if (editing) await api.updateMcp(editing, payload);
+      else await api.createMcp(payload);
+      setForm(empty);
+      setEditing('');
+      await load();
+    } catch (e) {
+      setError(e instanceof Error ? e.message : String(e));
+    } finally {
+      setBusy('');
+    }
+  };
+
+  const act = async (name: string, fn: () => Promise<unknown>) => {
+    setBusy(name);
+    setError('');
+    try {
+      await fn();
+      await load();
+    } catch (e) {
+      setError(e instanceof Error ? e.message : String(e));
+    } finally {
+      setBusy('');
+    }
+  };
+
+  return (
+    <PagePanel
+      title="MCP 控制面"
+      subtitle="创建、编辑、启停和删除 Model Context Protocol servers"
+      actions={
+        <button
+          onClick={() => {
+            setEditing('');
+            setForm(empty);
+          }}
+          className="rounded-xl bg-slate-900 px-3 py-2 text-xs font-semibold text-white"
+        >
+          ＋ 新建
+        </button>
+      }
+    >
+      {error && <p className="mb-4 rounded-xl bg-red-50 p-3 text-xs text-red-600">{error}</p>}
+      <div className="grid gap-4 lg:grid-cols-[1fr_380px]">
+        <div className="space-y-3">
+          {loading ? (
+            <p className="text-sm text-slate-400">加载中…</p>
+          ) : servers.length === 0 ? (
+            <Card>
+              <p className="py-8 text-center text-sm text-slate-400">尚无 MCP Server</p>
+            </Card>
+          ) : (
+            servers.map((server) => (
+              <Card key={server.name}>
+                <div className="flex justify-between gap-4">
+                  <div>
+                    <b className="font-mono text-sm text-violet">{server.name}</b>
+                    <span className="ml-2">
+                      <Badge color={server.enabled ? 'green' : 'slate'}>{server.enabled ? '启用' : '禁用'}</Badge>
+                    </span>
+                    <span className="ml-1"><Badge>{server.transport}</Badge></span>
+                    <p className="mt-2 break-all font-mono text-[10px] text-slate-400">
+                      {server.url || [server.command, ...(server.args || [])].filter(Boolean).join(' ') || server.config_path || '无连接信息'}
+                    </p>
+                  </div>
+                  <div className="flex shrink-0 gap-2">
+                    <button onClick={() => { setEditing(server.name); setForm({ ...server, args: server.args || [] }); }} className="text-xs text-violet">编辑</button>
+                    <button disabled={busy === server.name} onClick={() => void act(server.name, () => api.connectMcp(server.name, true))} className="text-xs text-emerald-600">发现工具</button>
+                    <button disabled={busy === server.name} onClick={() => void act(server.name, () => api.toggleMcp(server.name, !server.enabled))} className="text-xs text-slate-600">{server.enabled ? '停用' : '启用'}</button>
+                    <button disabled={busy === server.name} onClick={() => { if (confirm(`删除 ${server.name}？`)) void act(server.name, () => api.deleteMcp(server.name)); }} className="text-xs text-red-500">删除</button>
+                  </div>
+                </div>
+              </Card>
+            ))
+          )}
+        </div>
+
+        <div className="space-y-4">
+          <Card title={editing ? `编辑 ${editing}` : '新建 Server'}>
+            <div className="space-y-3">
+              <label className="block text-xs font-semibold">名称<input disabled={Boolean(editing)} className="pretty-input mt-1" value={form.name} onChange={(e) => setForm({ ...form, name: e.target.value })} /></label>
+              <label className="block text-xs font-semibold">Transport<NiceSelect className="mt-1" value={form.transport} options={[{ value: 'stdio', label: 'stdio' }, { value: 'sse', label: 'sse' }, { value: 'streamable-http', label: 'streamable-http' }]} onChange={(value) => setForm({ ...form, transport: value })} /></label>
+              <label className="block text-xs font-semibold">Command<input className="pretty-input mt-1" value={form.command || ''} onChange={(e) => setForm({ ...form, command: e.target.value })} /></label>
+              <label className="block text-xs font-semibold">Args（每行一个）<textarea rows={3} className="pretty-input mt-1" value={(form.args || []).join('\n')} onChange={(e) => setForm({ ...form, args: e.target.value.split('\n').filter(Boolean) })} /></label>
+              <label className="block text-xs font-semibold">URL<input className="pretty-input mt-1" value={form.url || ''} onChange={(e) => setForm({ ...form, url: e.target.value })} /></label>
+              <Toggle checked={form.enabled} onChange={(value) => setForm({ ...form, enabled: value })} label="启用" />
+              <button disabled={!form.name || busy === 'save'} onClick={() => void save()} className="w-full rounded-xl bg-slate-900 py-2 text-xs font-bold text-white disabled:opacity-40">{busy === 'save' ? '保存中…' : '保存'}</button>
+            </div>
+          </Card>
+          <Card title={`已发现工具（${catalog.length}）`}>
+            <div className="max-h-72 space-y-2 overflow-auto">
+              {catalog.map((tool) => (
+                <div key={tool.name} className="rounded-lg bg-slate-50 p-2">
+                  <b className="font-mono text-xs">{tool.name}</b>
+                  <p className="text-[10px] text-slate-500">{tool.description}</p>
+                </div>
+              ))}
+            </div>
+          </Card>
+        </div>
+      </div>
+    </PagePanel>
+  );
+}