@baimingtao/lbs-agent 1.0.0

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

@@ -0,0 +1,170 @@
+import { useEffect, useMemo, useState } from 'react';
+import { api, type ProviderDto, type ProviderMutationDto } from '../api/client';
+import { PagePanel, Card, Badge } from '../components/PagePanel';
+import { NiceSelect } from '../components/NiceSelect';
+import type { AgentOption, ModelHealth } from '../types';
+
+interface Props {
+  models: ModelHealth[];
+  agents: AgentOption[];
+  onSetDefault: (provider: string, model: string) => Promise<void>;
+  onSetAgentModel: (agentName: string, provider: string, model: string) => Promise<void>;
+  onRefresh?: () => void | Promise<void>;
+}
+
+interface ProviderForm {
+  name: string;
+  display_name: string;
+  base_url: string;
+  api_mode: string;
+  api_key: string;
+  api_keys: string[];
+  api_keys_text: string;
+  models: string[];
+  max_retries: string;
+  request_timeout: string;
+  clear_api_key: boolean;
+  api_keys_dirty: boolean;
+}
+
+const EMPTY_FORM: ProviderForm = {
+  name: '', display_name: '', base_url: '', api_mode: 'chat_completions',
+  api_key: '', api_keys: [''], api_keys_text: '', models: [''], max_retries: '', request_timeout: '', clear_api_key: false, api_keys_dirty: false,
+};
+
+const normalizeRows = (rows: string[]) => {
+  const cleaned = rows.map(v => v.trim()).filter(Boolean);
+  return cleaned.length ? cleaned : [''];
+};
+const toUniqueValues = (rows: string[]) => Array.from(new Set(rows.map(v => v.trim()).filter(Boolean)));
+
+export function ModelsPage({ models, agents, onSetDefault, onSetAgentModel, onRefresh }: Props) {
+  const [providers, setProviders] = useState<ProviderDto[]>([]);
+  const [loadingProviders, setLoadingProviders] = useState(true);
+  const [providerError, setProviderError] = useState('');
+  const [busy, setBusy] = useState('');
+  const [notice, setNotice] = useState('');
+  const [editingName, setEditingName] = useState<string | null>(null);
+  const [creating, setCreating] = useState(false);
+  const [form, setForm] = useState<ProviderForm>(EMPTY_FORM);
+  const [agentForms, setAgentForms] = useState<Record<string, { provider: string; model: string }>>({});
+  const [routeProvider, setRouteProvider] = useState('');
+  const [routeModel, setRouteModel] = useState('');
+  const [fetchingProviderModels, setFetchingProviderModels] = useState<string | null>(null);
+
+  const reload = async () => {
+    setLoadingProviders(true);
+    setProviderError('');
+    try {
+      const { providers } = await api.getProviders();
+      setProviders(providers);
+    } catch (e) {
+      setProviderError(e instanceof Error ? e.message : '加载供应商失败');
+    } finally {
+      setLoadingProviders(false);
+    }
+  };
+
+  useEffect(() => { void reload(); }, []);
+  const agentKey = agents.map(a => a.name).join(',');
+  useEffect(() => {
+    setAgentForms(prev => {
+      const next: Record<string, { provider: string; model: string }> = {};
+      for (const a of agents) next[a.name] = prev[a.name] || { provider: a.provider || '', model: a.model || '' };
+      return next;
+    });
+  // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [agentKey]);
+
+  const providerNames = useMemo(() => providers.map(p => p.name), [providers]);
+  const modelsByProvider = useMemo(() => {
+    const map: Record<string, string[]> = {};
+    for (const p of providers) map[p.name] = p.models || [];
+    return map;
+  }, [providers]);
+  const defaultModel = models.find(m => m.isDefault);
+
+  const doDefault = async (provider: string, model: string) => {
+    setBusy(`${provider}::${model}`); setNotice('');
+    try { await onSetDefault(provider, model); setNotice(`默认模型已切换：${provider} / ${model}`); await onRefresh?.(); }
+    catch (e) { setNotice(e instanceof Error ? e.message : '操作失败'); }
+    finally { setBusy(''); }
+  };
+  const startCreate = () => { setEditingName(null); setCreating(true); setForm({ ...EMPTY_FORM }); setNotice(''); };
+  const cancelForm = () => { setEditingName(null); setCreating(false); setForm({ ...EMPTY_FORM }); };
+  const startEdit = (provider: ProviderDto) => {
+    setCreating(false); setEditingName(provider.name);
+    setForm({
+      name: provider.name, display_name: provider.display_name, base_url: provider.base_url,
+      api_mode: provider.api_mode,
+      api_key: provider.api_key_masked || '',  // show masked key as read-only hint
+      clear_api_key: false, api_keys_dirty: false,
+      api_keys: normalizeRows(provider.api_keys_masked?.length ? [...provider.api_keys_masked] : ['']),
+      api_keys_text: '', models: normalizeRows(provider.models || ['']),
+      max_retries: provider.max_retries != null ? String(provider.max_retries) : '',
+      request_timeout: provider.request_timeout != null ? String(provider.request_timeout) : '',
+    });
+    setNotice('');
+  };
+
+  const setRowValue = (field: 'api_keys' | 'models', index: number, value: string) =>
+    setForm(c => ({ ...c, [field]: c[field].map((item, i) => i === index ? value : item), ...(field === 'api_keys' ? { api_keys_dirty: true } : {}) }));
+  const addRow = (field: 'api_keys' | 'models') => setForm(c => ({ ...c, [field]: [...c[field], ''], ...(field === 'api_keys' ? { api_keys_dirty: true } : {}) }));
+  const removeRow = (field: 'api_keys' | 'models', index: number) =>
+    setForm(c => { const n = c[field].filter((_, i) => i !== index); return { ...c, [field]: n.length ? n : [''], ...(field === 'api_keys' ? { api_keys_dirty: true } : {}) }; });
+
+  const submitProvider = async () => {
+    const name = (editingName || form.name || '').trim();
+    if (!name) { setNotice('请填写供应商名称'); return; }
+    if (!form.base_url.trim()) { setNotice('请填写 base_url'); return; }
+    const body: ProviderMutationDto = {
+      display_name: form.display_name.trim() || name,
+      base_url: form.base_url.trim(), api_mode: form.api_mode || 'chat_completions', models: toUniqueValues(form.models),
+      max_retries: form.max_retries ? Number(form.max_retries) : undefined,
+      request_timeout: form.request_timeout ? Number(form.request_timeout) : undefined,
+    };
+    if (form.api_keys_dirty) body.api_keys = toUniqueValues([...form.api_keys, ...form.api_keys_text.split(/\r?\n|,/) ]);
+    if (form.clear_api_key) body.api_key = '';
+    if (form.api_key.trim()) body.api_key = form.api_key.trim();
+    setBusy(`save:${name}`); setNotice('');
+    try { await api.upsertProvider(name, body); setNotice(`供应商 ${name} 已保存`); cancelForm(); await reload(); await onRefresh?.(); }
+    catch (e) { setNotice(e instanceof Error ? e.message : '保存失败'); }
+    finally { setBusy(''); }
+  };
+
+  const fetchProviderModels = async (providerName: string) => {
+    setBusy(`fetch:${providerName}`); setNotice('');
+    try { const res = await api.fetchProviderModels(providerName); setProviders(curr => curr.map(p => p.name === providerName ? { ...p, models: res.models } : p)); if (editingName === providerName) setForm(c => ({ ...c, models: normalizeRows(res.models) })); setNotice(`已从接口同步 ${providerName} 模型：${res.models.length} 个`); await onRefresh?.(); }
+    catch (e) { setNotice(e instanceof Error ? e.message : '获取模型失败'); }
+    finally { setBusy(''); }
+  };
+  const fetchRouteModels = async () => {
+    if (!routeProvider) return; setFetchingProviderModels(routeProvider); setNotice('');
+    try { const res = await api.fetchProviderModels(routeProvider); setProviders(curr => curr.map(p => p.name === routeProvider ? { ...p, models: res.models } : p)); setNotice(`已从接口拉取 ${routeProvider} 的 ${res.models.length} 个模型`); await onRefresh?.(); }
+    catch (e) { setNotice(e instanceof Error ? e.message : '拉取失败'); }
+    finally { setFetchingProviderModels(null); }
+  };
+  const fetchAgentModels = async (providerName: string) => { setBusy(`fetchAgent:${providerName}`); setNotice(''); try { const res = await api.fetchProviderModels(providerName); setProviders(curr => curr.map(p => p.name === providerName ? { ...p, models: res.models } : p)); setNotice(`已同步 ${providerName} 模型`); await onRefresh?.(); } catch (e) { setNotice(e instanceof Error ? e.message : '拉取失败'); } finally { setBusy(''); } };
+  const removeProvider = async (name: string) => { if (!confirm(`删除供应商 ${name}？`)) return; setBusy(`del:${name}`); setNotice(''); try { await api.deleteProvider(name); setNotice(`供应商 ${name} 已删除`); await reload(); await onRefresh?.(); } catch (e) { setNotice(e instanceof Error ? e.message : '删除失败'); } finally { setBusy(''); } };
+  const setAgentBinding = (agentName: string, provider: string, model: string) => setAgentForms(prev => ({ ...prev, [agentName]: { provider, model } }));
+  const saveAgentBinding = async (agentName: string) => { const current = agentForms[agentName]; if (!current?.provider || !current?.model) { setNotice('请先选 provider 与 model'); return; } setBusy(`agent:${agentName}`); setNotice(''); try { await onSetAgentModel(agentName, current.provider, current.model); setNotice(`${agentName} → ${current.provider} / ${current.model}`); await onRefresh?.(); } catch (e) { setNotice(e instanceof Error ? e.message : '保存失败'); } finally { setBusy(''); } };
+
+  return (
+    <PagePanel title="模型配置" subtitle="供应商管理、默认路由与 Agent 级别模型绑定">
+      {notice && <div className="mb-4 rounded-xl bg-violet/5 px-4 py-2 text-xs text-violet">{notice}</div>}
+      <div className="space-y-4">
+        <Card title="主路由" badge={`默认：${defaultModel?.name ?? '未设置'}`}><div className="flex flex-wrap items-end gap-3"><label className="text-[11px] font-semibold text-slate-600">供应商<NiceSelect className="mt-1 w-[200px]" value={routeProvider} placeholder="选择供应商" options={providerNames.map(name => ({ value: name, label: name }))} onChange={val => { setRouteProvider(val); setRouteModel(''); }} /></label><label className="text-[11px] font-semibold text-slate-600">模型<NiceSelect className="mt-1 w-[260px]" value={routeModel} placeholder="选择模型" options={(modelsByProvider[routeProvider] || []).map(m => ({ value: m, label: m }))} onChange={setRouteModel} disabled={!routeProvider} /></label><button onClick={fetchRouteModels} disabled={!routeProvider || !!fetchingProviderModels} className="rounded-lg bg-white px-3 py-2 text-[11px] font-semibold text-slate-700 ring-1 ring-slate-200">{fetchingProviderModels ? '拉取中…' : '从接口拉取模型'}</button><button onClick={() => routeProvider && routeModel && doDefault(routeProvider, routeModel)} disabled={!!busy || !routeProvider || !routeModel} className="rounded-lg bg-slate-900 px-4 py-2 text-[11px] font-semibold text-white disabled:opacity-30">设为默认</button>{defaultModel && <div className="ml-auto flex items-center gap-2 text-[11px] text-slate-500">当前：<Badge color="violet">{defaultModel.name}</Badge><span className="font-mono text-slate-400">{defaultModel.provider}</span></div>}</div></Card>
+        <Card title="供应商" badge={`内置 ${providers.filter(p => p.is_builtin).length} · 自定义 ${providers.filter(p => !p.is_builtin).length}`}><div className="mb-3 flex justify-end"><button onClick={startCreate} className="rounded-lg bg-slate-900 px-3 py-1.5 text-[11px] font-semibold text-white">+ 新建供应商</button></div>{providerError && <p className="mb-3 rounded-lg bg-red-50 p-3 text-xs text-red-600">{providerError}</p>}{loadingProviders && <p className="text-sm text-slate-400">正在加载供应商…</p>}{!loadingProviders && <div className="space-y-3">{creating && <ProviderEditForm form={form} setForm={setForm} editing={false} busy={busy} onSubmit={submitProvider} onCancel={cancelForm} setRowValue={setRowValue} addRow={addRow} removeRow={removeRow} onFetchModels={() => {}} />}{providers.map(provider => <div key={provider.name} className="space-y-2"><div className="rounded-2xl border border-slate-200 bg-white p-4"><div className="flex flex-col gap-3 xl:flex-row xl:items-start xl:justify-between"><div className="min-w-0 flex-1 space-y-2"><div className="flex flex-wrap items-center gap-2"><b className="text-sm text-slate-800">{provider.display_name}</b><span className="rounded-full bg-slate-100 px-2 py-0.5 font-mono text-[10px] text-slate-500">{provider.name}</span>{provider.is_builtin ? <Badge color="violet">内置</Badge> : <Badge color="green">自定义</Badge>}{provider.has_api_key ? <Badge color="green">已配密钥</Badge> : <Badge color="red">未配密钥</Badge>}<Badge>{provider.models.length} 个模型</Badge></div><div className="flex flex-wrap gap-3 text-[11px] text-slate-500"><span className="font-mono">{provider.base_url}</span><span>·</span><span>{provider.api_mode}</span><span>·</span><span>Key 数：{provider.key_count ?? (provider.has_api_key ? 1 : 0)}</span></div></div><div className="flex shrink-0 gap-2"><button onClick={() => startEdit(provider)} className="rounded-lg bg-white px-3 py-2 text-[11px] font-semibold text-slate-700 ring-1 ring-slate-200">编辑</button><button onClick={() => fetchProviderModels(provider.name)} disabled={!!busy} className="rounded-lg bg-white px-3 py-2 text-[11px] font-semibold text-slate-700 ring-1 ring-slate-200">{busy === `fetch:${provider.name}` ? '同步中…' : '拉取模型'}</button>{!provider.is_builtin && <button onClick={() => removeProvider(provider.name)} disabled={!!busy} className="rounded-lg bg-white px-3 py-2 text-[11px] font-semibold text-red-600 ring-1 ring-red-200">删除</button>}</div></div></div>{editingName === provider.name && <ProviderEditForm form={form} setForm={setForm} editing={true} busy={busy} onSubmit={submitProvider} onCancel={cancelForm} setRowValue={setRowValue} addRow={addRow} removeRow={removeRow} onFetchModels={() => fetchProviderModels(provider.name)} />}</div>)}</div>}</Card>
+        <Card title="Agent 模型绑定" badge={`${agents.length} 个 Agent`}><div className="space-y-2">{agents.map(agent => { const current = agentForms[agent.name] || { provider: agent.provider || '', model: agent.model || '' }; const options = modelsByProvider[current.provider] || []; return <div key={agent.name} className="grid grid-cols-1 items-center gap-3 rounded-2xl border border-slate-200 bg-white px-4 py-3 md:grid-cols-[180px_1fr_1fr_auto_auto]"><div className="min-w-0"><b className="block truncate text-xs text-slate-800">{agent.displayName}</b><span className="font-mono text-[10px] text-slate-400">{agent.name}</span></div><NiceSelect value={current.provider} placeholder="选择供应商" options={providerNames.map(name => ({ value: name, label: name }))} onChange={val => setAgentBinding(agent.name, val, (modelsByProvider[val] || [])[0] || '')} disabled={!!busy || providerNames.length === 0} /><NiceSelect value={current.model} placeholder="选择模型" options={options.map(name => ({ value: name, label: name }))} onChange={val => setAgentBinding(agent.name, current.provider, val)} disabled={!!busy || !current.provider} /><button onClick={() => fetchAgentModels(current.provider)} disabled={!!busy || !current.provider} className="rounded-lg bg-white px-2 py-2 text-[10px] font-semibold text-slate-600 ring-1 ring-slate-200">{busy === `fetchAgent:${current.provider}` ? '…' : '拉取'}</button><button onClick={() => saveAgentBinding(agent.name)} disabled={!!busy || !current.provider || !current.model} className="rounded-lg bg-slate-900 px-3 py-2 text-[11px] font-semibold text-white">{busy === `agent:${agent.name}` ? '…' : '保存'}</button></div>; })}</div></Card>
+      </div>
+    </PagePanel>
+  );
+}
+
+function ProviderEditForm({ form, setForm, editing, busy, onSubmit, onCancel, setRowValue, addRow, removeRow, onFetchModels }: { form: ProviderForm; setForm: React.Dispatch<React.SetStateAction<ProviderForm>>; editing: boolean; busy: string; onSubmit: () => void; onCancel: () => void; setRowValue: (field: 'api_keys' | 'models', index: number, value: string) => void; addRow: (field: 'api_keys' | 'models') => void; removeRow: (field: 'api_keys' | 'models', index: number) => void; onFetchModels: () => void; }) {
+  return <form className="rounded-2xl border border-violet/30 bg-violet/5 p-4" onSubmit={e => { e.preventDefault(); onSubmit(); }}><div className="mb-3 flex items-center justify-between"><div className="text-sm font-semibold text-violet">{editing ? `编辑供应商：${form.name}` : '新建供应商'}</div>{editing && <button type="button" onClick={onFetchModels} disabled={!!busy} className="rounded-lg bg-white px-2.5 py-1 text-[10px] font-semibold text-violet">{busy.startsWith('fetch:') ? '同步中…' : '从接口获取模型'}</button>}</div><div className="grid gap-3 md:grid-cols-2"><label className="text-[11px] font-semibold text-slate-600">名称<input className="pretty-input mt-1" disabled={editing} value={form.name} onChange={e => setForm(c => ({ ...c, name: e.target.value }))} /></label><label className="text-[11px] font-semibold text-slate-600">显示名<input className="pretty-input mt-1" value={form.display_name} onChange={e => setForm(c => ({ ...c, display_name: e.target.value }))} /></label><label className="text-[11px] font-semibold text-slate-600 md:col-span-2">Base URL<input className="pretty-input mt-1 font-mono" value={form.base_url} onChange={e => setForm(c => ({ ...c, base_url: e.target.value }))} /></label><label className="text-[11px] font-semibold text-slate-600">API 模式<NiceSelect className="mt-1" value={form.api_mode} options={[{ value: 'chat_completions', label: 'chat_completions' }, { value: 'anthropic_messages', label: 'anthropic_messages' }]} onChange={val => setForm(c => ({ ...c, api_mode: val }))} /></label><label className="text-[11px] font-semibold text-slate-600">单个 API Key（可选）<input className="pretty-input mt-1 font-mono" type="text" value={form.api_key} onChange={e => setForm(c => ({ ...c, api_key: e.target.value, clear_api_key: false }))} placeholder={form.api_key ? '' : 'sk-...'} /></label>{editing && <label className="flex items-center gap-2 text-[11px] font-semibold text-slate-600"><input type="checkbox" checked={form.clear_api_key} onChange={e => setForm(c => ({ ...c, clear_api_key: e.target.checked, api_key: e.target.checked ? '' : c.api_key }))} />清除主 API Key</label>}<label className="text-[11px] font-semibold text-slate-600">API Keys（批量，可换行或逗号分隔）<textarea className="pretty-input mt-1 min-h-16 font-mono" value={form.api_keys_text} onChange={e => setForm(c => ({ ...c, api_keys_text: e.target.value, api_keys_dirty: true }))} placeholder="sk-..." /></label><label className="text-[11px] font-semibold text-slate-600">max_retries<input className="pretty-input mt-1" value={form.max_retries} onChange={e => setForm(c => ({ ...c, max_retries: e.target.value }))} /></label><label className="text-[11px] font-semibold text-slate-600">request_timeout<input className="pretty-input mt-1" value={form.request_timeout} onChange={e => setForm(c => ({ ...c, request_timeout: e.target.value }))} /></label></div><div className="mt-4 grid gap-4 xl:grid-cols-2"><ListEditor title="API Keys" hint="多 key 逐行维护；留空行不会保存。" rows={form.api_keys} addLabel="新增 Key" placeholder="sk-..." password onAdd={() => addRow('api_keys')} onChange={(i, v) => setRowValue('api_keys', i, v)} onRemove={i => removeRow('api_keys', i)} /><ListEditor title="模型列表" hint="每行一个模型；支持手动维护或接口拉取回填。" rows={form.models} addLabel="新增模型" placeholder="gpt-5.4-mini" onAdd={() => addRow('models')} onChange={(i, v) => setRowValue('models', i, v)} onRemove={i => removeRow('models', i)} /></div><div className="mt-4 flex justify-end gap-2"><button type="button" onClick={onCancel} className="rounded-lg bg-white px-4 py-2 text-xs font-semibold text-slate-600 ring-1 ring-slate-200">取消</button><button type="submit" disabled={!!busy} className="rounded-lg bg-slate-900 px-4 py-2 text-xs font-semibold text-white">{busy.startsWith('save:') ? '保存中…' : '保存'}</button></div></form>;
+}
+
+function ListEditor({ title, hint, rows, addLabel, placeholder, password, onAdd, onChange, onRemove }: { title: string; hint: string; rows: string[]; addLabel: string; placeholder: string; password?: boolean; onAdd: () => void; onChange: (index: number, value: string) => void; onRemove: (index: number) => void; }) {
+  return <section className="rounded-2xl border border-white/70 bg-white/60 p-3 shadow-sm"><div className="mb-3 flex items-center justify-between gap-2"><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">+ {addLabel}</button></div><div className="space-y-2">{rows.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={password ? 'password' : 'text'} className="w-full border-0 bg-transparent text-xs text-slate-700 outline-none" 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">删除</button></div>)}</div></section>;
+}

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

@@ -0,0 +1,135 @@
+import { useEffect, useMemo, useState } from 'react';
+import { api, type SessionDetailDto } from '../api/client';
+import { PagePanel, Card, Badge } from '../components/PagePanel';
+import { MarkdownView } from '../components/MarkdownView';
+import type { Session } from '../types';
+
+interface Props {
+  sessions: Session[];
+  onSelect: (id: string) => void;
+  onNew: () => void;
+}
+
+export function SessionsPage({ sessions, onSelect, onNew }: Props) {
+  const [query, setQuery] = useState('');
+  const [selected, setSelected] = useState('');
+  const [detail, setDetail] = useState<SessionDetailDto | null>(null);
+  const [loading, setLoading] = useState(false);
+  const [error, setError] = useState('');
+
+  const filtered = useMemo(
+    () => sessions.filter(session => `${session.name} ${session.id} ${session.statusLabel}`.toLowerCase().includes(query.toLowerCase())),
+    [sessions, query],
+  );
+
+  useEffect(() => {
+    if (!filtered.length) {
+      setSelected('');
+      setDetail(null);
+      return;
+    }
+    const stillExists = filtered.some(session => session.id === selected);
+    if (!stillExists) setSelected(filtered[0].id);
+  }, [filtered, selected]);
+
+  useEffect(() => {
+    if (!selected || selected === '-') return;
+    let cancelled = false;
+    setLoading(true);
+    setError('');
+    api.getSession(selected)
+      .then(payload => { if (!cancelled) setDetail(payload); })
+      .catch(error => {
+        if (!cancelled) {
+          setDetail(null);
+          setError(error instanceof Error ? error.message : String(error));
+        }
+      })
+      .finally(() => { if (!cancelled) setLoading(false); });
+    return () => { cancelled = true; };
+  }, [selected]);
+
+  return (
+    <PagePanel
+      title="会话历史"
+      subtitle="搜索历史记录、检查消息并在工作台继续同一会话"
+      actions={<button onClick={onNew} className="rounded-xl bg-slate-900 px-3 py-2 text-xs font-semibold text-white">＋ 新会话</button>}
+    >
+      <div className="mb-4 flex flex-wrap items-center gap-3">
+        <input className="pretty-input max-w-xl" placeholder="按标题、session ID 或状态搜索…" value={query} onChange={e => setQuery(e.target.value)} />
+        <div className="rounded-full bg-white/80 px-3 py-1 text-[10px] text-slate-500 ring-1 ring-slate-200">
+          {loading ? '正在拉取历史…' : `已载入 ${filtered.length} / ${sessions.length} 条会话`}
+        </div>
+      </div>
+
+      <div className="grid gap-4 xl:grid-cols-[420px_1fr]">
+        <Card title="历史" badge={`${filtered.length} 条`}>
+          <div className="max-h-[65vh] space-y-2 overflow-y-auto pr-1">
+            {filtered.map(session => (
+              <button
+                key={session.id}
+                onClick={() => setSelected(session.id)}
+                className={`w-full rounded-2xl border p-3 text-left transition ${selected === session.id ? 'border-violet bg-violet/10 shadow-sm' : 'border-slate-200 bg-white hover:border-mint/60 hover:bg-slate-50'}`}
+              >
+                <div className="flex items-start justify-between gap-2">
+                  <div className="min-w-0 flex-1">
+                    <b className="block truncate text-xs text-slate-800">{session.name}</b>
+                    <code className="mt-1 block truncate text-[9px] text-slate-400">{session.id}</code>
+                  </div>
+                  <Badge color={session.status === 'failed' || session.status === 'error' ? 'red' : 'green'}>{session.statusLabel}</Badge>
+                </div>
+                <p className="mt-2 text-[10px] leading-5 text-slate-500">{session.metrics}</p>
+              </button>
+            ))}
+            {!filtered.length && <p className="py-8 text-center text-xs text-slate-400">没有匹配的会话</p>}
+          </div>
+        </Card>
+
+        <Card title={detail?.title || detail?.task || '会话详情'}>
+          {loading && <p className="text-sm text-slate-400">加载消息…</p>}
+          {error && <p className="rounded-lg bg-red-50 p-3 text-xs text-red-600">{error}</p>}
+          {detail && !loading && (
+            <>
+              <div className="mb-3 flex flex-wrap items-center justify-between gap-2">
+                <div className="flex flex-wrap gap-2">
+                  <Badge color="violet">{detail.agent_name || '未指定 Agent'}</Badge>
+                  <Badge>{detail.status || 'unknown'}</Badge>
+                  <Badge>{((detail.conversation_messages || detail.messages) || []).length} 条消息</Badge>
+                </div>
+                <button onClick={() => onSelect(detail.session_id)} className="rounded-lg bg-violet px-3 py-2 text-xs font-bold text-white">在工作台继续</button>
+              </div>
+
+              <div className="mb-3 rounded-2xl border border-slate-200 bg-slate-50 px-3 py-2 text-[11px] text-slate-500">
+                当前会话 ID：<span className="font-mono text-slate-700">{detail.session_id}</span>
+              </div>
+
+              <div className="mb-3 grid grid-cols-2 gap-2 text-[10px] text-slate-500 md:grid-cols-4">
+                <div className="rounded-xl bg-white p-2 ring-1 ring-slate-200">迭代：<b>{detail.run_report?.iterations ?? 0}</b></div>
+                <div className="rounded-xl bg-white p-2 ring-1 ring-slate-200">工具：<b>{detail.run_report?.total_tool_calls ?? 0}</b></div>
+                <div className="rounded-xl bg-white p-2 ring-1 ring-slate-200">上下文消息：<b>{detail.provider_message_count ?? 0}</b></div>
+                <div className="rounded-xl bg-white p-2 ring-1 ring-slate-200">压缩：<b>{detail.observability?.compression_count ?? 0}</b></div>
+              </div>
+
+              {detail.run_report?.error && (
+                <div className="mb-3 rounded-xl bg-red-50 p-3 text-xs text-red-600">执行错误：{detail.run_report.error}</div>
+              )}
+
+              <div className="max-h-[57vh] space-y-2 overflow-y-auto pr-1">
+                {(detail.conversation_messages || detail.messages || []).map((message, index) => (
+                  <div key={message.id || index} className={`rounded-2xl border p-3 ${message.role === 'user' ? 'border-violet/20 bg-violet/5' : 'border-slate-200 bg-white'}`}>
+                    <div className="mb-2 flex flex-wrap items-center justify-between gap-2 text-[10px] font-bold text-slate-400">
+                      <span>{message.role}</span>
+                      <span>{message.timestamp ? new Date(message.timestamp).toLocaleString() : '无时间戳'}</span>
+                    </div>
+                    <MarkdownView content={message.content || '(空消息)'} />
+                  </div>
+                ))}
+                {!(detail.messages || []).length && <p className="py-8 text-center text-xs text-slate-400">这个会话还没有消息记录</p>}
+              </div>
+            </>
+          )}
+        </Card>
+      </div>
+    </PagePanel>
+  );
+}

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

@@ -0,0 +1,4 @@
+import { useEffect, useState } from 'react';
+import { api, type SkillDto } from '../api/client';
+import { PagePanel, Badge, Card } from '../components/PagePanel';
+export function SkillsPage(){const [skills,setSkills]=useState<SkillDto[]>([]);const [filter,setFilter]=useState('');const [loading,setLoading]=useState(true);const [error,setError]=useState('');const [selected,setSelected]=useState<SkillDto|null>(null);useEffect(()=>{api.getSkills().then(d=>setSkills(d.skills||[])).catch(e=>setError(e.message)).finally(()=>setLoading(false))},[]);const shown=skills.filter(s=>`${s.name} ${s.title} ${s.source} ${s.path}`.toLowerCase().includes(filter.toLowerCase()));return <PagePanel title="Skills" subtitle="查看能力包来源、文件路径、详细说明以及后端提供的分配/可见性元数据"><input className="pretty-input mb-4 max-w-xl" placeholder="搜索名称、来源或路径…" value={filter} onChange={e=>setFilter(e.target.value)}/>{loading&&<p className="text-sm text-slate-400">加载中…</p>}{error&&<p className="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="grid gap-2 xl:grid-cols-2">{shown.map(s=><button key={s.path} onClick={()=>setSelected(s)} className="rounded-xl border border-slate-200 bg-white p-4 text-left hover:border-violet/40"><div className="flex justify-between"><b className="text-sm">{s.title||s.name}</b><Badge color={s.source==='skills'?'green':'amber'}>{s.source}</Badge></div><code className="mt-2 block break-all text-[10px] text-slate-400">{s.path}</code><div className="mt-2 flex gap-1">{s.visibility&&<Badge color="violet">{s.visibility}</Badge>}{s.assigned_agents?.map(a=><Badge key={a}>{a}</Badge>)}</div></button>)}</div><Card title={selected?.title||selected?.name||'Skill 详情'}>{selected?<div className="space-y-3 text-xs"><p className="leading-5 text-slate-600">{selected.description||'后端未提供详细说明。'}</p><div><b>来源</b><p>{selected.source}</p></div><div><b>路径</b><code className="block break-all text-[10px]">{selected.path}</code></div><div><b>可见性</b><p>{selected.visibility||'后端未提供'}</p></div><div><b>分配到 Agents</b><p>{selected.assigned_agents?.join(', ')||'后端未提供'}</p></div></div>:<p className="py-8 text-center text-xs text-slate-400">选择 Skill 查看详情</p>}</Card></div></PagePanel>}

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

@@ -0,0 +1,109 @@
+import { useState } from 'react';
+import { PagePanel, Card, Badge } from '../components/PagePanel';
+import { RichEditor } from '../components/RichEditor';
+import type { SoulProfile } from '../types';
+
+interface Props {
+  souls: SoulProfile[];
+  currentSoul: string;
+  onSwitch: (name: string) => Promise<void>;
+}
+
+export function SoulsPage({ souls, currentSoul, onSwitch }: Props) {
+  const [busy, setBusy] = useState('');
+  const [notice, setNotice] = useState('');
+  const [showCreate, setShowCreate] = useState(false);
+  const [roleName, setRoleName] = useState('');
+  const [roleContent, setRoleContent] = useState('');
+
+  const sw = async (name: string) => {
+    setBusy(name); setNotice('');
+    try { await onSwitch(name); setNotice(`已切换角色：${name}`); }
+    catch (e) { setNotice(e instanceof Error ? e.message : '切换失败'); }
+    finally { setBusy(''); }
+  };
+
+  const createRole = async () => {
+    if (!roleName.trim() || !roleContent.trim()) { setNotice('请填写文件名和角色内容'); return; }
+    setBusy('create'); setNotice('');
+    try {
+      const res = await fetch('/api/souls', {
+        method: 'POST',
+        headers: { 'Content-Type': 'application/json' },
+        body: JSON.stringify({ name: roleName.trim(), content: roleContent }),
+      });
+      if (!res.ok) throw new Error(await res.text());
+      setNotice(`角色 ${roleName} 已创建`);
+      setShowCreate(false);
+      setRoleName('');
+      setRoleContent('');
+    } catch (e) {
+      setNotice(e instanceof Error ? e.message : '创建失败');
+    } finally { setBusy(''); }
+  };
+
+  return (
+    <PagePanel title="角色配置" subtitle="角色灵魂（Soul）切换，不同角色有不同的语气和行为约束">
+      {notice && <div className="mb-4 rounded-xl bg-violet/5 px-4 py-2 text-xs text-violet">{notice}</div>}
+
+      {/* Role cards */}
+      <div className="grid grid-cols-1 gap-3 md:grid-cols-2 lg:grid-cols-3">
+        {souls.map(s => (
+          <Card key={s.name}>
+            <div className="flex items-start justify-between">
+              <div className="flex-1">
+                <b className="text-sm text-slate-800">{s.name}</b>
+                {s.name === currentSoul && <Badge color="violet">当前</Badge>}
+              </div>
+            </div>
+            <p className="mt-2 text-xs leading-5 text-slate-500">{s.desc || '角色配置'}</p>
+            {s.name !== currentSoul && (
+              <button onClick={() => sw(s.name)} disabled={!!busy}
+                className="mt-3 rounded-lg bg-slate-100 px-3 py-1.5 text-[11px] font-semibold text-slate-600 hover:bg-slate-200">
+                {busy === s.name ? '切换中…' : '切换到此角色'}
+              </button>
+            )}
+          </Card>
+        ))}
+      </div>
+
+      {/* Create new role */}
+      <div className="mt-6 rounded-[24px] border border-violet/20 bg-violet/5 p-6">
+        <div className="mb-4 flex items-center justify-between">
+          <div>
+            <h3 className="text-sm font-bold text-violet">新增角色</h3>
+            <p className="mt-0.5 text-[11px] text-slate-500">自定义角色灵魂，保存后写入 souls/ 目录</p>
+          </div>
+          <button onClick={() => setShowCreate(v => !v)}
+            className="rounded-lg bg-white px-3 py-1.5 text-[11px] font-semibold text-violet ring-1 ring-violet/20 hover:bg-violet/5">
+            {showCreate ? '收起' : '＋ 新增角色'}
+          </button>
+        </div>
+
+        {showCreate && (
+          <div className="space-y-4">
+            <label className="block">
+              <span className="text-[11px] font-semibold text-slate-600">文件名</span>
+              <input className="pretty-input mt-1" placeholder="例如：技术专家" value={roleName}
+                onChange={e => setRoleName(e.target.value)} />
+            </label>
+            <div>
+              <div className="mb-1 text-[11px] font-semibold text-slate-600">角色内容</div>
+              <RichEditor value={roleContent} onChange={setRoleContent} placeholder="# 角色名称&#10;&#10;你是…&#10;&#10;## 身份&#10;- …" />
+            </div>
+            <div className="flex justify-end gap-2">
+              <button onClick={() => { setShowCreate(false); setRoleName(''); setRoleContent(''); }}
+                className="rounded-lg bg-white px-4 py-2 text-xs font-semibold text-slate-600 ring-1 ring-slate-200 hover:bg-slate-100">
+                取消
+              </button>
+              <button onClick={createRole} disabled={!!busy || !roleName.trim() || !roleContent.trim()}
+                className="rounded-lg bg-slate-900 px-4 py-2 text-xs font-semibold text-white hover:bg-violet disabled:opacity-40">
+                {busy === 'create' ? '保存中…' : '保存角色'}
+              </button>
+            </div>
+          </div>
+        )}
+      </div>
+    </PagePanel>
+  );
+}

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

@@ -0,0 +1,3 @@
+import { useEffect, useState } from 'react';import { api,type ToolDto } from '../api/client';import { PagePanel,Card,Badge } from '../components/PagePanel';
+export function ToolsPage(){const [tools,setTools]=useState<ToolDto[]>([]);const [loading,setLoading]=useState(true);const [error,setError]=useState('');const [saving,setSaving]=useState('');useEffect(()=>{api.getTools().then(d=>setTools(d.tools||[])).catch(e=>setError(e.message)).finally(()=>setLoading(false))},[]);const update=async(t:ToolDto,agents:string)=>{setSaving(t.name);setError('');try{const saved=await api.updateTool(t.name,{assigned_agents:agents.split(',').map(x=>x.trim()).filter(Boolean),enabled:t.enabled});setTools(v=>v.map(x=>x.name===t.name?saved:x))}catch(e){setError(e instanceof Error?e.message:String(e))}finally{setSaving('')}};return <PagePanel title="工具控制面" subtitle="检查工具 schema，并在后端支持时编辑启用状态和 Agent 分配">{loading&&<p className="text-sm text-slate-400">加载中…</p>}{error&&<p className="mb-3 rounded-xl bg-red-50 p-3 text-xs text-red-600">{error}</p>}<div className="grid gap-3 lg:grid-cols-2">{tools.map(t=><ToolCard key={t.name} tool={t} saving={saving===t.name} onSave={update}/>)}</div>{!loading&&!tools.length&&<p className="py-10 text-center text-sm text-slate-400">没有已注册工具</p>}</PagePanel>}
+function ToolCard({tool,saving,onSave}:{tool:ToolDto;saving:boolean;onSave:(t:ToolDto,a:string)=>void}){const [agents,setAgents]=useState((tool.assigned_agents||[]).join(', '));return <Card><div className="flex justify-between"><div><b className="font-mono text-sm text-violet">{tool.name}</b>{tool.category&&<span className="ml-2"><Badge>{tool.category}</Badge></span>}</div>{tool.enabled!==undefined&&<Badge color={tool.enabled?'green':'slate'}>{tool.enabled?'启用':'禁用'}</Badge>}</div><p className="mt-2 text-xs leading-5 text-slate-500">{tool.description}</p>{tool.parameters&&<details className="mt-3 text-xs"><summary className="cursor-pointer font-semibold text-slate-500">参数 schema（{tool.parameters.length}）</summary><pre className="mt-2 max-h-40 overflow-auto rounded-lg bg-slate-50 p-2 text-[10px]">{JSON.stringify(tool.parameters,null,2)}</pre></details>}<div className="mt-3 border-t border-slate-100 pt-3"><label className="text-[10px] font-bold text-slate-500">分配到 Agents（逗号分隔）<input className="pretty-input mt-1" disabled={!tool.editable} value={agents} onChange={e=>setAgents(e.target.value)} placeholder={tool.editable?'audit, code':'后端未开放编辑'}/></label>{tool.editable?<button disabled={saving} onClick={()=>onSave(tool,agents)} className="mt-2 rounded-lg bg-slate-900 px-3 py-1.5 text-[10px] font-bold text-white">{saving?'保存中…':'保存分配'}</button>:<p className="mt-2 text-[10px] text-slate-400">只读：后端未声明 editable 能力。</p>}</div></Card>}

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

@@ -0,0 +1,132 @@
+import { useMemo, useState } from 'react';
+import { Doughnut, Bar } from 'react-chartjs-2';
+import {
+  Chart as ChartJS,
+  ArcElement,
+  CategoryScale,
+  LinearScale,
+  BarElement,
+  Tooltip,
+  Legend,
+  type ChartOptions,
+} from 'chart.js';
+import { PagePanel, Card, Badge, TableWrap, Th, Td } from '../components/PagePanel';
+import type { Usage, Worker } from '../types';
+
+ChartJS.register(ArcElement, CategoryScale, LinearScale, BarElement, Tooltip, Legend);
+
+interface Props {
+  usage: Usage;
+  workers?: Worker[];
+}
+
+const fmt = (n: number) => n >= 1000 ? `${(n / 1000).toFixed(1)}k` : String(Math.round(n));
+const palette = { sakura: '#FFB7C5', mint: '#98D8C8', violet: '#6E5AA8', honey: '#FFB86B', berry: '#2B1828' };
+const PAGE_SIZE = 10;
+
+export function UsagePage({ usage, workers = [] }: Props) {
+  const [page, setPage] = useState(0);
+
+  const inputTokens = Number(usage.input || 0) * 1000;
+  const outputTokens = Number(usage.output || 0) * 1000;
+  const cacheTokens = Number(usage.cache || 0) * 1000;
+
+  const totalPages = Math.max(1, Math.ceil(workers.length / PAGE_SIZE));
+  const pagedWorkers = workers.slice(page * PAGE_SIZE, (page + 1) * PAGE_SIZE);
+
+  const doughnutData = useMemo(() => ({
+    labels: ['输入', '输出', '缓存'],
+    datasets: [{
+      data: [inputTokens, outputTokens, cacheTokens],
+      backgroundColor: [palette.sakura, palette.mint, palette.violet],
+      borderColor: '#fff', borderWidth: 3, hoverOffset: 8,
+    }],
+  }), [inputTokens, outputTokens, cacheTokens]);
+
+  const doughnutOpts: ChartOptions<'doughnut'> = {
+    responsive: true, maintainAspectRatio: false,
+    plugins: {
+      legend: { position: 'bottom', labels: { font: { size: 11, weight: 600 }, color: palette.berry, padding: 12, usePointStyle: true, pointStyle: 'circle' } },
+      tooltip: { callbacks: { label: ctx => ` ${fmt(Number(ctx.raw))}` } },
+    },
+    cutout: '62%',
+  };
+
+  const agentStats = useMemo(() => {
+    const m: Record<string, number> = {};
+    for (const w of workers) m[w.name] = (m[w.name] || 0) + 1;
+    return Object.entries(m).sort((a, b) => b[1] - a[1]).slice(0, 10);
+  }, [workers]);
+
+  const agentBar = useMemo(() => ({
+    labels: agentStats.map(([n]) => n),
+    datasets: [{
+      label: '执行次数',
+      data: agentStats.map(([, c]) => c),
+      backgroundColor: agentStats.map((_, i) => [palette.sakura, palette.mint, palette.violet, palette.honey][i % 4] + 'cc'),
+      borderColor: agentStats.map((_, i) => [palette.sakura, palette.mint, palette.violet, palette.honey][i % 4]),
+      borderWidth: 2, borderRadius: 8,
+    }],
+  }), [agentStats]);
+
+  const agentBarOpts: ChartOptions<'bar'> = {
+    responsive: true, maintainAspectRatio: false,
+    plugins: { legend: { display: false } },
+    scales: {
+      x: { ticks: { font: { size: 10, weight: 600 }, color: palette.berry }, grid: { display: false } },
+      y: { beginAtZero: true, ticks: { font: { size: 10 }, color: palette.berry + '88', stepSize: 1 }, grid: { color: 'rgba(43,24,40,0.04)' } },
+    },
+  };
+
+  return (
+    <PagePanel title="Token 与执行记录" subtitle="累计用量、费用估算、Agent 活跃度与执行历史">
+      <div className="space-y-4">
+        {/* Summary */}
+        <div className="grid grid-cols-2 gap-3 md:grid-cols-4">
+          <Card><div className="text-center"><span className="text-[11px] font-semibold text-slate-400">输入</span><b className="mt-2 block text-2xl" style={{ color: palette.sakura }}>{fmt(inputTokens)}</b></div></Card>
+          <Card><div className="text-center"><span className="text-[11px] font-semibold text-slate-400">输出</span><b className="mt-2 block text-2xl" style={{ color: palette.mint }}>{fmt(outputTokens)}</b></div></Card>
+          <Card><div className="text-center"><span className="text-[11px] font-semibold text-slate-400">缓存</span><b className="mt-2 block text-2xl" style={{ color: palette.violet }}>{fmt(cacheTokens)}</b></div></Card>
+          <Card><div className="text-center"><span className="text-[11px] font-semibold text-slate-400">费用</span><b className="mt-2 block text-2xl text-violet">${Number(usage.cost || 0).toFixed(5)}</b></div></Card>
+        </div>
+
+        {/* Charts */}
+        <div className="grid grid-cols-1 gap-4 lg:grid-cols-2">
+          <Card title="Token 分布"><div style={{ height: '260px' }}><Doughnut data={doughnutData} options={doughnutOpts} /></div></Card>
+          <Card title="Agent 活跃度 TOP 10"><div style={{ height: '260px' }}>{agentStats.length ? <Bar data={agentBar} options={agentBarOpts} /> : <div className="flex h-full items-center justify-center text-sm text-slate-400">暂无数据</div>}</div></Card>
+        </div>
+
+        {/* Execution records with pagination */}
+        <Card title="执行记录" badge={`${workers.length} 条`}>
+          {!workers.length ? <p className="py-8 text-center text-sm text-slate-400">暂无执行记录</p> : (
+            <>
+              <TableWrap>
+                <thead><tr><Th>Agent</Th><Th>任务</Th><Th>状态</Th><Th>迭代</Th><Th>工具调用</Th><Th>耗时</Th></tr></thead>
+                <tbody>
+                  {pagedWorkers.map((w, i) => (
+                    <tr key={`${w.name}-${page * PAGE_SIZE + i}`}>
+                      <Td mono>{w.name}</Td>
+                      <Td>{w.detail?.slice(0, 50) || '—'}</Td>
+                      <Td><Badge color={w.status === 'active' ? 'green' : w.status === 'error' ? 'red' : 'slate'}>{w.statusLabel}</Badge></Td>
+                      <Td mono>{w.detail || '—'}</Td>
+                      <Td mono>—</Td>
+                      <Td mono>—</Td>
+                    </tr>
+                  ))}
+                </tbody>
+              </TableWrap>
+              {totalPages > 1 && (
+                <div className="mt-3 flex items-center justify-between">
+                  <span className="text-[10px] text-slate-400">第 {page + 1} / {totalPages} 页</span>
+                  <div className="flex gap-2">
+                    <button disabled={page === 0} onClick={() => setPage(p => p - 1)} className="rounded-lg bg-white px-3 py-1.5 text-[11px] font-semibold text-slate-600 ring-1 ring-slate-200 hover:bg-slate-100 disabled:opacity-30">上一页</button>
+                    <button disabled={page >= totalPages - 1} onClick={() => setPage(p => p + 1)} className="rounded-lg bg-white px-3 py-1.5 text-[11px] font-semibold text-slate-600 ring-1 ring-slate-200 hover:bg-slate-100 disabled:opacity-30">下一页</button>
+                  </div>
+                </div>
+              )}
+            </>
+          )}
+        </Card>
+      </div>
+    </PagePanel>
+  );
+}