@baimingtao/lbs-agent 1.0.0

package/interfaces/web/frontend/src/api/client.ts

@@ -0,0 +1,115 @@
+export interface SessionMessageDto { id?: string; role: string; content: string; timestamp?: string | number; success?: boolean; attachments_used?: Array<{ name: string; path?: string; size?: number; preview?: string; is_image?: boolean }> }
+export interface TokenUsage { input: number; output: number; total?: number; cost?: string }
+export interface SessionObservability { context_window?: number; current_tokens?: number; percent?: number; threshold?: number; compression_count?: number; compression_enabled?: boolean; last_request?: TokenUsage }
+export interface SessionDetailDto {
+  session_id: string;
+  title?: string;
+  task?: string;
+  agent_name?: string;
+  status?: string;
+  messages?: SessionMessageDto[];
+  conversation_messages?: SessionMessageDto[];
+  provider_message_count?: number;
+  run_report?: { iterations?: number; total_tool_calls?: number; step_count?: number; run_trace_count?: number; status?: string; error?: string };
+  observability?: SessionObservability;
+  context?: SessionObservability;
+  model?: string;
+  usage?: TokenUsage;
+  attachments_used?: Array<{ name: string; path?: string; size?: number; preview?: string; is_image?: boolean }>;
+}
+export interface AgentConfigDto { name: string; display_name?: string; description?: string; system_prompt?: string; prompt_file?: string; model: string; provider?: string; fallback_models?: string[]; tools?: string[]; guardrails?: string[]; verification_rules?: string[]; verification_level?: string; verification?: string; error_strategy?: string; timeout?: number; max_iterations?: number; max_retries?: number; temperature?: number; allowed_models?: string[]; enabled?: boolean }
+export interface McpServerDto { name: string; transport: string; enabled: boolean; command?: string; args?: string[]; url?: string; env?: Record<string, string>; config_path?: string }
+export interface McpToolDto { name: string; description: string; parameters?: Record<string, unknown>; metadata?: Record<string, unknown> }
+export interface ProviderDto { name: string; display_name: string; base_url: string; api_mode: string; models: string[]; description?: string; is_builtin: boolean; has_api_key: boolean; api_key_masked: string; api_keys_masked?: string[]; key_count?: number; max_retries?: number; request_timeout?: number }
+export interface ProviderMutationDto { display_name: string; api_key?: string; api_keys?: string[]; base_url: string; api_mode: string; models: string[]; description?: string; max_retries?: number; request_timeout?: number }
+export interface SkillDto { name: string; title?: string; path: string; source: string; description?: string; assigned_agents?: string[]; visibility?: string }
+export interface ToolDto { name: string; description: string; category?: string; parameters?: Record<string, unknown>[]; assigned_agents?: string[]; editable?: boolean; enabled?: boolean }
+export interface CronJobDto { job_id: string; name: string; schedule: string; enabled: boolean; next_run_at?: string; task?: string; agent_name?: string }
+
+const origin = window.location.origin;
+const API_BASE = import.meta.env.VITE_API_BASE || `${origin}/api`;
+const WS_BASE = import.meta.env.VITE_WS_BASE || `${origin.replace(/^http/, 'ws')}/ws/agent`;
+export { API_BASE, WS_BASE };
+
+async function fetchApi<T>(path: string, options?: RequestInit): Promise<T> {
+  const res = await fetch(`${API_BASE}${path}`, { headers: { 'Content-Type': 'application/json' }, ...options });
+  if (!res.ok) {
+    let message = `请求失败（HTTP ${res.status}）`;
+    try {
+      const payload = await res.json();
+      message = payload.detail || payload.error || message;
+    } catch {
+      // ignore non-json response
+    }
+    throw new Error(message);
+  }
+  if (res.status === 204) return undefined as T;
+  return res.json() as Promise<T>;
+}
+
+export const api = {
+  getStatus: () => fetchApi('/status'),
+  getCommands: () => fetchApi<{ groups: { key: string; title: string; commands: { icon: string; name: string; label: string; description: string; requires_task?: boolean }[] }[] }>('/commands'),
+  getModels: () => fetchApi<{ models: { name: string; provider: string; healthy: boolean; configured: boolean; default: boolean }[] }>('/models'),
+  getSessions: () => fetchApi<{ sessions: { session_id: string; title?: string; agent_name: string; task: string; status: string; success: boolean; iterations: number; total_tool_calls: number; duration_seconds: number; created_at?: string; updated_at?: string }[] }>('/sessions'),
+  getSession: (id: string) => fetchApi<SessionDetailDto>(`/sessions/${encodeURIComponent(id)}`),
+  deleteSession: (id: string) => fetchApi(`/sessions/${encodeURIComponent(id)}`, { method: 'DELETE' }),
+  renameSession: (id: string, title: string) => fetchApi(`/sessions/${encodeURIComponent(id)}`, { method: 'PATCH', body: JSON.stringify({ title }) }),
+  switchSoul: (name: string) => fetchApi<{ ok: boolean; current: string }>(`/soul/switch`, { method: 'POST', body: JSON.stringify({ name }) }),
+  setDefaultModel: (model: string) => fetchApi<{ ok: boolean }>(`/models/default`, { method: 'POST', body: JSON.stringify({ model }) }),
+  setAgentModel: (agent: string, model: string) => fetchApi<{ ok: boolean }>(`/agents/${encodeURIComponent(agent)}/model`, { method: 'POST', body: JSON.stringify({ model }) }),
+  getCronJobs: () => fetchApi<{ jobs: CronJobDto[] }>('/cron'),
+  createCronJob: (job: { name: string; schedule: string; task: string; agent: string; enabled: boolean }) => fetchApi<{ ok: boolean; job_id: string }>('/cron', { method: 'POST', body: JSON.stringify(job) }),
+  controlCronJob: (jobId: string, action: 'pause' | 'resume' | 'delete' | 'run') => fetchApi<{ ok: boolean }>(`/cron/${encodeURIComponent(jobId)}/${action}`, { method: 'POST' }),
+  getSkill: (name: string) => fetchApi<SkillDto>(`/skills/${encodeURIComponent(name)}`),
+  getWorkers: () => fetchApi<{ workers: { agent_name: string; task: string; status: string; status_label: string; success: boolean; tool_calls: number; duration_seconds: number }[] }>('/workers'),
+  getCron: () => fetchApi<{ jobs: { job_id: string; name: string; schedule: string; enabled: boolean; next_run_at: string; task?: string; agent_name?: string }[] }>('/cron'),
+  getUsage: () => fetchApi<{ total_input_tokens: number; total_output_tokens: number; total_cost_usd: string }>('/usage'),
+  getSoul: () => fetchApi<{ name: string; content: string }>('/soul'),
+  getSouls: () => fetchApi<{ souls: { name: string; desc: string }[]; current: string }>('/souls'),
+  getAgents: () => fetchApi<{ agents: AgentConfigDto[] }>('/agents'),
+  getAgent: (name: string) => fetchApi<AgentConfigDto>(`/agents/${encodeURIComponent(name)}`),
+  updateAgent: (name: string, config: AgentConfigDto) => fetchApi<AgentConfigDto>(`/agents/${encodeURIComponent(name)}`, { method: 'PUT', body: JSON.stringify(config) }),
+  getMcp: () => fetchApi<{ servers: McpServerDto[] }>('/mcp'),
+  getMcpCatalog: () => fetchApi<{ tools: McpToolDto[] }>('/mcp/catalog'),
+  connectMcp: (name: string, refresh = false) => fetchApi<{ ok: boolean; name: string; tools: McpToolDto[] }>(`/mcp/${encodeURIComponent(name)}/connect`, { method: 'POST', body: JSON.stringify({ refresh }) }),
+  createMcp: (server: McpServerDto) => fetchApi<McpServerDto>('/mcp', { method: 'POST', body: JSON.stringify(server) }),
+  updateMcp: (name: string, server: McpServerDto) => fetchApi<McpServerDto>(`/mcp/${encodeURIComponent(name)}`, { method: 'PUT', body: JSON.stringify(server) }),
+  deleteMcp: (name: string) => fetchApi<void>(`/mcp/${encodeURIComponent(name)}`, { method: 'DELETE' }),
+  toggleMcp: (name: string, enabled: boolean) => fetchApi<McpServerDto>(`/mcp/${encodeURIComponent(name)}/toggle`, { method: 'POST', body: JSON.stringify({ enabled }) }),
+  getSkills: () => fetchApi<{ skills: SkillDto[] }>('/skills'),
+  updateSkill: (name: string, data: Partial<SkillDto>) => fetchApi<SkillDto>(`/skills/${encodeURIComponent(name)}`, { method: 'PATCH', body: JSON.stringify(data) }),
+  getTools: () => fetchApi<{ tools: ToolDto[] }>('/tools'),
+  updateTool: (name: string, data: Partial<ToolDto>) => fetchApi<ToolDto>(`/tools/${encodeURIComponent(name)}`, { method: 'PATCH', body: JSON.stringify(data) }),
+  createSession: (title: string) => fetchApi<{ session_id: string; title: string }>('/sessions', { method: 'POST', body: JSON.stringify({ title }) }),
+  getProviders: () => fetchApi<{ providers: ProviderDto[] }>('/providers'),
+  fetchProviderModels: (name: string) => fetchApi<{ ok: boolean; provider: string; models: string[] }>(`/providers/${encodeURIComponent(name)}/models/fetch`, { method: 'POST' }),
+  upsertProvider: (name: string, body: ProviderMutationDto) => fetchApi<{ ok: boolean; provider: ProviderDto }>(`/providers/${encodeURIComponent(name)}`, { method: 'PUT', body: JSON.stringify(body) }),
+  deleteProvider: (name: string) => fetchApi<{ ok: boolean }>(`/providers/${encodeURIComponent(name)}`, { method: 'DELETE' }),
+  addProviderModel: (name: string, model: string) => fetchApi<{ ok: boolean }>(`/providers/${encodeURIComponent(name)}/models`, { method: 'POST', body: JSON.stringify({ name: model }) }),
+  removeProviderModel: (name: string, model: string) => fetchApi<{ ok: boolean }>(`/providers/${encodeURIComponent(name)}/models/${encodeURIComponent(model)}`, { method: 'DELETE' }),
+  uploadFile: async (file: File, sessionId: string) => {
+    const form = new FormData();
+    form.append('file', file);
+    form.append('session_id', sessionId);
+    const res = await fetch(`${API_BASE}/files/upload`, { method: 'POST', body: form });
+    if (!res.ok) throw new Error(`上传失败（HTTP ${res.status}）`);
+    return res.json();
+  },
+};
+
+export interface WsMessage { type: 'connected' | 'status' | 'step' | 'tool' | 'output' | 'done' | 'stream_delta' | 'runtime_event'; run_id?: string; session_id?: string; cat_state?: string; capsules?: Record<string, string>; iteration?: number; phase?: string; desc?: string; tag?: string; text?: string; success?: boolean; result?: string; error?: string; message?: string; duration_seconds?: number; usage?: TokenUsage & { cost: string }; iterations?: number; tool_calls?: number; chunk_type?: string; event_type?: string; payload?: Record<string, unknown> }
+export function createWsConnection(onMessage: (msg: WsMessage) => void, onOpen?: () => void, onClose?: () => void) {
+  const ws = new WebSocket(WS_BASE);
+  ws.onopen = () => onOpen?.();
+  ws.onmessage = e => {
+    try { onMessage(JSON.parse(e.data) as WsMessage); }
+    catch { console.error('无法解析 WebSocket 消息：', e.data); }
+  };
+  ws.onclose = () => onClose?.();
+  ws.onerror = () => onClose?.();
+  return ws;
+}
+export interface RunOptions { thinkMode?: boolean; deepSearch?: boolean; sessionId?: string; runId?: string; }
+export function createRunId(): string { return globalThis.crypto?.randomUUID?.() || `run-${Date.now()}-${Math.random().toString(36).slice(2)}`; }
+export function sendRunCommand(ws: WebSocket, cmd: string, task?: string, agent?: string, sessionId?: string, opts?: RunOptions) { const sid = opts?.sessionId || sessionId || ''; const runId = opts?.runId || createRunId(); ws.send(JSON.stringify({ type: 'run', run_id: runId, cmd, task: task || '', agent: agent || '', session_id: sid, think_mode: opts?.thinkMode ?? false, deep_search: opts?.deepSearch ?? false })); return runId; }

package/interfaces/web/frontend/src/assets/react.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="iconify iconify--logos" width="35.93" height="32" preserveAspectRatio="xMidYMid meet" viewBox="0 0 256 228"><path fill="#00D8FF" d="M210.483 73.824a171.49 171.49 0 0 0-8.24-2.597c.465-1.9.893-3.777 1.273-5.621c6.238-30.281 2.16-54.676-11.769-62.708c-13.355-7.7-35.196.329-57.254 19.526a171.23 171.23 0 0 0-6.375 5.848a155.866 155.866 0 0 0-4.241-3.917C100.759 3.829 77.587-4.822 63.673 3.233C50.33 10.957 46.379 33.89 51.995 62.588a170.974 170.974 0 0 0 1.892 8.48c-3.28.932-6.445 1.924-9.474 2.98C17.309 83.498 0 98.307 0 113.668c0 15.865 18.582 31.778 46.812 41.427a145.52 145.52 0 0 0 6.921 2.165a167.467 167.467 0 0 0-2.01 9.138c-5.354 28.2-1.173 50.591 12.134 58.266c13.744 7.926 36.812-.22 59.273-19.855a145.567 145.567 0 0 0 5.342-4.923a168.064 168.064 0 0 0 6.92 6.314c21.758 18.722 43.246 26.282 56.54 18.586c13.731-7.949 18.194-32.003 12.4-61.268a145.016 145.016 0 0 0-1.535-6.842c1.62-.48 3.21-.974 4.76-1.488c29.348-9.723 48.443-25.443 48.443-41.52c0-15.417-17.868-30.326-45.517-39.844Zm-6.365 70.984c-1.4.463-2.836.91-4.3 1.345c-3.24-10.257-7.612-21.163-12.963-32.432c5.106-11 9.31-21.767 12.459-31.957c2.619.758 5.16 1.557 7.61 2.4c23.69 8.156 38.14 20.213 38.14 29.504c0 9.896-15.606 22.743-40.946 31.14Zm-10.514 20.834c2.562 12.94 2.927 24.64 1.23 33.787c-1.524 8.219-4.59 13.698-8.382 15.893c-8.067 4.67-25.32-1.4-43.927-17.412a156.726 156.726 0 0 1-6.437-5.87c7.214-7.889 14.423-17.06 21.459-27.246c12.376-1.098 24.068-2.894 34.671-5.345a134.17 134.17 0 0 1 1.386 6.193ZM87.276 214.515c-7.882 2.783-14.16 2.863-17.955.675c-8.075-4.657-11.432-22.636-6.853-46.752a156.923 156.923 0 0 1 1.869-8.499c10.486 2.32 22.093 3.988 34.498 4.994c7.084 9.967 14.501 19.128 21.976 27.15a134.668 134.668 0 0 1-4.877 4.492c-9.933 8.682-19.886 14.842-28.658 17.94ZM50.35 144.747c-12.483-4.267-22.792-9.812-29.858-15.863c-6.35-5.437-9.555-10.836-9.555-15.216c0-9.322 13.897-21.212 37.076-29.293c2.813-.98 5.757-1.905 8.812-2.773c3.204 10.42 7.406 21.315 12.477 32.332c-5.137 11.18-9.399 22.249-12.634 32.792a134.718 134.718 0 0 1-6.318-1.979Zm12.378-84.26c-4.811-24.587-1.616-43.134 6.425-47.789c8.564-4.958 27.502 2.111 47.463 19.835a144.318 144.318 0 0 1 3.841 3.545c-7.438 7.987-14.787 17.08-21.808 26.988c-12.04 1.116-23.565 2.908-34.161 5.309a160.342 160.342 0 0 1-1.76-7.887Zm110.427 27.268a347.8 347.8 0 0 0-7.785-12.803c8.168 1.033 15.994 2.404 23.343 4.08c-2.206 7.072-4.956 14.465-8.193 22.045a381.151 381.151 0 0 0-7.365-13.322Zm-45.032-43.861c5.044 5.465 10.096 11.566 15.065 18.186a322.04 322.04 0 0 0-30.257-.006c4.974-6.559 10.069-12.652 15.192-18.18ZM82.802 87.83a323.167 323.167 0 0 0-7.227 13.238c-3.184-7.553-5.909-14.98-8.134-22.152c7.304-1.634 15.093-2.97 23.209-3.984a321.524 321.524 0 0 0-7.848 12.897Zm8.081 65.352c-8.385-.936-16.291-2.203-23.593-3.793c2.26-7.3 5.045-14.885 8.298-22.6a321.187 321.187 0 0 0 7.257 13.246c2.594 4.48 5.28 8.868 8.038 13.147Zm37.542 31.03c-5.184-5.592-10.354-11.779-15.403-18.433c4.902.192 9.899.29 14.978.29c5.218 0 10.376-.117 15.453-.343c-4.985 6.774-10.018 12.97-15.028 18.486Zm52.198-57.817c3.422 7.8 6.306 15.345 8.596 22.52c-7.422 1.694-15.436 3.058-23.88 4.071a382.417 382.417 0 0 0 7.859-13.026a347.403 347.403 0 0 0 7.425-13.565Zm-16.898 8.101a358.557 358.557 0 0 1-12.281 19.815a329.4 329.4 0 0 1-23.444.823c-7.967 0-15.716-.248-23.178-.732a310.202 310.202 0 0 1-12.513-19.846h.001a307.41 307.41 0 0 1-10.923-20.627a310.278 310.278 0 0 1 10.89-20.637l-.001.001a307.318 307.318 0 0 1 12.413-19.761c7.613-.576 15.42-.876 23.31-.876H128c7.926 0 15.743.303 23.354.883a329.357 329.357 0 0 1 12.335 19.695a358.489 358.489 0 0 1 11.036 20.54a329.472 329.472 0 0 1-11 20.722Zm22.56-122.124c8.572 4.944 11.906 24.881 6.52 51.026c-.344 1.668-.73 3.367-1.15 5.09c-10.622-2.452-22.155-4.275-34.23-5.408c-7.034-10.017-14.323-19.124-21.64-27.008a160.789 160.789 0 0 1 5.888-5.4c18.9-16.447 36.564-22.941 44.612-18.3ZM128 90.808c12.625 0 22.86 10.235 22.86 22.86s-10.235 22.86-22.86 22.86s-22.86-10.235-22.86-22.86s10.235-22.86 22.86-22.86Z"></path></svg>

package/interfaces/web/frontend/src/assets/vite.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="77" height="47" fill="none" aria-labelledby="vite-logo-title" viewBox="0 0 77 47"><title id="vite-logo-title">Vite</title><style>.parenthesis{fill:#000}@media (prefers-color-scheme:dark){.parenthesis{fill:#fff}}</style><path fill="#9135ff" d="M40.151 45.71c-.663.844-2.02.374-2.02-.699V34.708a2.26 2.26 0 0 0-2.262-2.262H24.493c-.92 0-1.457-1.04-.92-1.788l7.479-10.471c1.07-1.498 0-3.578-1.842-3.578H15.443c-.92 0-1.456-1.04-.92-1.788l9.696-13.576c.213-.297.556-.474.92-.474h28.894c.92 0 1.456 1.04.92 1.788l-7.48 10.472c-1.07 1.497 0 3.578 1.842 3.578h11.376c.944 0 1.474 1.087.89 1.83L40.153 45.712z"/><mask id="a" width="48" height="47" x="14" y="0" maskUnits="userSpaceOnUse" style="mask-type:alpha"><path fill="#000" d="M40.047 45.71c-.663.843-2.02.374-2.02-.699V34.708a2.26 2.26 0 0 0-2.262-2.262H24.389c-.92 0-1.457-1.04-.92-1.788l7.479-10.472c1.07-1.497 0-3.578-1.842-3.578H15.34c-.92 0-1.456-1.04-.92-1.788l9.696-13.575c.213-.297.556-.474.92-.474H53.93c.92 0 1.456 1.04.92 1.788L47.37 13.03c-1.07 1.498 0 3.578 1.842 3.578h11.376c.944 0 1.474 1.088.89 1.831L40.049 45.712z"/></mask><g mask="url(#a)"><g filter="url(#b)"><ellipse cx="5.508" cy="14.704" fill="#eee6ff" rx="5.508" ry="14.704" transform="rotate(269.814 20.96 11.29)scale(-1 1)"/></g><g filter="url(#c)"><ellipse cx="10.399" cy="29.851" fill="#eee6ff" rx="10.399" ry="29.851" transform="rotate(89.814 -16.902 -8.275)scale(1 -1)"/></g><g filter="url(#d)"><ellipse cx="5.508" cy="30.487" fill="#8900ff" rx="5.508" ry="30.487" transform="rotate(89.814 -19.197 -7.127)scale(1 -1)"/></g><g filter="url(#e)"><ellipse cx="5.508" cy="30.599" fill="#8900ff" rx="5.508" ry="30.599" transform="rotate(89.814 -25.928 4.177)scale(1 -1)"/></g><g filter="url(#f)"><ellipse cx="5.508" cy="30.599" fill="#8900ff" rx="5.508" ry="30.599" transform="rotate(89.814 -25.738 5.52)scale(1 -1)"/></g><g filter="url(#g)"><ellipse cx="14.072" cy="22.078" fill="#eee6ff" rx="14.072" ry="22.078" transform="rotate(93.35 31.245 55.578)scale(-1 1)"/></g><g filter="url(#h)"><ellipse cx="3.47" cy="21.501" fill="#8900ff" rx="3.47" ry="21.501" transform="rotate(89.009 35.419 55.202)scale(-1 1)"/></g><g filter="url(#i)"><ellipse cx="3.47" cy="21.501" fill="#8900ff" rx="3.47" ry="21.501" transform="rotate(89.009 35.419 55.202)scale(-1 1)"/></g><g filter="url(#j)"><ellipse cx="14.592" cy="9.743" fill="#8900ff" rx="4.407" ry="29.108" transform="rotate(39.51 14.592 9.743)"/></g><g filter="url(#k)"><ellipse cx="61.728" cy="-5.321" fill="#8900ff" rx="4.407" ry="29.108" transform="rotate(37.892 61.728 -5.32)"/></g><g filter="url(#l)"><ellipse cx="55.618" cy="7.104" fill="#00c2ff" rx="5.971" ry="9.665" transform="rotate(37.892 55.618 7.104)"/></g><g filter="url(#m)"><ellipse cx="12.326" cy="39.103" fill="#8900ff" rx="4.407" ry="29.108" transform="rotate(37.892 12.326 39.103)"/></g><g filter="url(#n)"><ellipse cx="12.326" cy="39.103" fill="#8900ff" rx="4.407" ry="29.108" transform="rotate(37.892 12.326 39.103)"/></g><g filter="url(#o)"><ellipse cx="49.857" cy="30.678" fill="#8900ff" rx="4.407" ry="29.108" transform="rotate(37.892 49.857 30.678)"/></g><g filter="url(#p)"><ellipse cx="52.623" cy="33.171" fill="#00c2ff" rx="5.971" ry="15.297" transform="rotate(37.892 52.623 33.17)"/></g></g><path d="M6.919 0c-9.198 13.166-9.252 33.575 0 46.789h6.215c-9.25-13.214-9.196-33.623 0-46.789zm62.424 0h-6.215c9.198 13.166 9.252 33.575 0 46.789h6.215c9.25-13.214 9.196-33.623 0-46.789" class="parenthesis"/><defs><filter id="b" width="60.045" height="41.654" x="-5.564" y="16.92" color-interpolation-filters="sRGB" filterUnits="userSpaceOnUse"><feFlood flood-opacity="0" result="BackgroundImageFix"/><feBlend in="SourceGraphic" in2="BackgroundImageFix" result="shape"/><feGaussianBlur result="effect1_foregroundBlur_2002_17286" stdDeviation="7.659"/></filter><filter id="c" width="90.34" height="51.437" x="-40.407" y="-6.762" color-interpolation-filters="sRGB" filterUnits="userSpaceOnUse"><feFlood flood-opacity="0" result="BackgroundImageFix"/><feBlend in="SourceGraphic" in2="BackgroundImageFix" result="shape"/><feGaussianBlur result="effect1_foregroundBlur_2002_17286" stdDeviation="7.659"/></filter><filter id="d" width="79.355" height="29.4" x="-35.435" y="2.801" color-interpolation-filters="sRGB" filterUnits="userSpaceOnUse"><feFlood flood-opacity="0" result="BackgroundImageFix"/><feBlend in="SourceGraphic" in2="BackgroundImageFix" result="shape"/><feGaussianBlur result="effect1_foregroundBlur_2002_17286" stdDeviation="4.596"/></filter><filter id="e" width="79.579" height="29.4" x="-30.84" y="20.8" color-interpolation-filters="sRGB" filterUnits="userSpaceOnUse"><feFlood flood-opacity="0" result="BackgroundImageFix"/><feBlend in="SourceGraphic" in2="BackgroundImageFix" result="shape"/><feGaussianBlur result="effect1_foregroundBlur_2002_17286" stdDeviation="4.596"/></filter><filter id="f" width="79.579" height="29.4" x="-29.307" y="21.949" color-interpolation-filters="sRGB" filterUnits="userSpaceOnUse"><feFlood flood-opacity="0" result="BackgroundImageFix"/><feBlend in="SourceGraphic" in2="BackgroundImageFix" result="shape"/><feGaussianBlur result="effect1_foregroundBlur_2002_17286" stdDeviation="4.596"/></filter><filter id="g" width="74.749" height="58.852" x="29.961" y="-17.13" color-interpolation-filters="sRGB" filterUnits="userSpaceOnUse"><feFlood flood-opacity="0" result="BackgroundImageFix"/><feBlend in="SourceGraphic" in2="BackgroundImageFix" result="shape"/><feGaussianBlur result="effect1_foregroundBlur_2002_17286" stdDeviation="7.659"/></filter><filter id="h" width="61.377" height="25.362" x="37.754" y="3.055" color-interpolation-filters="sRGB" filterUnits="userSpaceOnUse"><feFlood flood-opacity="0" result="BackgroundImageFix"/><feBlend in="SourceGraphic" in2="BackgroundImageFix" result="shape"/><feGaussianBlur result="effect1_foregroundBlur_2002_17286" stdDeviation="4.596"/></filter><filter id="i" width="61.377" height="25.362" x="37.754" y="3.055" color-interpolation-filters="sRGB" filterUnits="userSpaceOnUse"><feFlood flood-opacity="0" result="BackgroundImageFix"/><feBlend in="SourceGraphic" in2="BackgroundImageFix" result="shape"/><feGaussianBlur result="effect1_foregroundBlur_2002_17286" stdDeviation="4.596"/></filter><filter id="j" width="56.045" height="63.649" x="-13.43" y="-22.082" color-interpolation-filters="sRGB" filterUnits="userSpaceOnUse"><feFlood flood-opacity="0" result="BackgroundImageFix"/><feBlend in="SourceGraphic" in2="BackgroundImageFix" result="shape"/><feGaussianBlur result="effect1_foregroundBlur_2002_17286" stdDeviation="4.596"/></filter><filter id="k" width="54.814" height="64.646" x="34.321" y="-37.644" color-interpolation-filters="sRGB" filterUnits="userSpaceOnUse"><feFlood flood-opacity="0" result="BackgroundImageFix"/><feBlend in="SourceGraphic" in2="BackgroundImageFix" result="shape"/><feGaussianBlur result="effect1_foregroundBlur_2002_17286" stdDeviation="4.596"/></filter><filter id="l" width="33.541" height="35.313" x="38.847" y="-10.552" color-interpolation-filters="sRGB" filterUnits="userSpaceOnUse"><feFlood flood-opacity="0" result="BackgroundImageFix"/><feBlend in="SourceGraphic" in2="BackgroundImageFix" result="shape"/><feGaussianBlur result="effect1_foregroundBlur_2002_17286" stdDeviation="4.596"/></filter><filter id="m" width="54.814" height="64.646" x="-15.081" y="6.78" color-interpolation-filters="sRGB" filterUnits="userSpaceOnUse"><feFlood flood-opacity="0" result="BackgroundImageFix"/><feBlend in="SourceGraphic" in2="BackgroundImageFix" result="shape"/><feGaussianBlur result="effect1_foregroundBlur_2002_17286" stdDeviation="4.596"/></filter><filter id="n" width="54.814" height="64.646" x="-15.081" y="6.78" color-interpolation-filters="sRGB" filterUnits="userSpaceOnUse"><feFlood flood-opacity="0" result="BackgroundImageFix"/><feBlend in="SourceGraphic" in2="BackgroundImageFix" result="shape"/><feGaussianBlur result="effect1_foregroundBlur_2002_17286" stdDeviation="4.596"/></filter><filter id="o" width="54.814" height="64.646" x="22.45" y="-1.645" color-interpolation-filters="sRGB" filterUnits="userSpaceOnUse"><feFlood flood-opacity="0" result="BackgroundImageFix"/><feBlend in="SourceGraphic" in2="BackgroundImageFix" result="shape"/><feGaussianBlur result="effect1_foregroundBlur_2002_17286" stdDeviation="4.596"/></filter><filter id="p" width="39.409" height="43.623" x="32.919" y="11.36" color-interpolation-filters="sRGB" filterUnits="userSpaceOnUse"><feFlood flood-opacity="0" result="BackgroundImageFix"/><feBlend in="SourceGraphic" in2="BackgroundImageFix" result="shape"/><feGaussianBlur result="effect1_foregroundBlur_2002_17286" stdDeviation="4.596"/></filter></defs></svg>

package/interfaces/web/frontend/src/components/AgentAvatar.tsx

@@ -0,0 +1,59 @@
+import { memo } from 'react';
+
+interface Props {
+  name: string;
+  size?: number;
+  /** 字符风格：letter 首字母 / shape 几何形状 */
+  variant?: 'letter' | 'shape';
+  className?: string;
+}
+
+// 柔和配色盘：与 Neko 樱花薄荷风协调的成对底色
+const PALETTE: Array<[string, string]> = [
+  ['#FFE4EC', '#FFB7C5'],
+  ['#E4F6EF', '#98D8C8'],
+  ['#EEE6F8', '#B9A6E0'],
+  ['#FFF1DC', '#FFD08A'],
+  ['#E0EFFB', '#9CC4F0'],
+  ['#FCE4EC', '#F48FB1'],
+  ['#E8F5E9', '#A5D6A7'],
+  ['#FFF3E0', '#FFB74D'],
+];
+
+function hash(str: string): number {
+  let h = 0;
+  for (let i = 0; i < str.length; i++) h = (h * 31 + str.charCodeAt(i)) >>> 0;
+  return h;
+}
+
+/** 迷你 Avvvatars 风格头像：名字 hash 选色，首字母或几何形状。同名永远同图。 */
+function AgentAvatarBase({ name, size = 32, variant = 'letter', className = '' }: Props) {
+  const [bg, fg] = PALETTE[hash(name) % PALETTE.length];
+  const letter = (name.trim()[0] || '?').toUpperCase();
+  const id = `av-${hash(name)}`;
+
+  return (
+    <span
+      className={`inline-flex shrink-0 items-center justify-center overflow-hidden ${className}`}
+      style={{ width: size, height: size, borderRadius: size * 0.32, background: bg }}
+      aria-hidden
+    >
+      {variant === 'shape' ? (
+        <svg width={size} height={size} viewBox="0 0 40 40">
+          <defs>
+            <linearGradient id={id} x1="0" y1="0" x2="1" y2="1">
+              <stop offset="0%" stopColor={bg} />
+              <stop offset="100%" stopColor={fg} />
+            </linearGradient>
+          </defs>
+          <rect width="40" height="40" fill={`url(#${id})`} />
+          <circle cx="20" cy="20" r="9" fill="#fff" opacity="0.55" />
+        </svg>
+      ) : (
+        <span style={{ color: fg, fontWeight: 700, fontSize: size * 0.45, lineHeight: 1 }}>{letter}</span>
+      )}
+    </span>
+  );
+}
+
+export const AgentAvatar = memo(AgentAvatarBase);

package/interfaces/web/frontend/src/components/CatSpirit.tsx

@@ -0,0 +1,248 @@
+import { memo, useEffect, useMemo, useRef, useState } from 'react';
+
+type CatState = 'idle' | 'running' | 'success' | 'error';
+type PetAction = 'idle' | 'typing' | 'mouse' | 'gamepad' | 'success' | 'error';
+
+interface Props {
+  state?: CatState;
+  compact?: boolean;
+}
+
+const LABEL: Record<CatState, string> = {
+  idle: '等待指令',
+  running: '敲键盘中…',
+  success: '完成啦',
+  error: '出错了',
+};
+
+const BUBBLES = ['喵～', '敲敲', '收到！', '小爪开工', 'Bongo!', '♡', '再戳一下'];
+
+function pick<T>(items: readonly T[]): T {
+  return items[Math.floor(Math.random() * items.length)];
+}
+
+/**
+ * BongoCat 风格 Web 宠物。
+ * 设计依据 ayangweb/BongoCat：白色团子猫、粗黑描边、小黑点眼、ω 嘴、粉色肉垫、趴桌敲键盘。
+ * Web 化差异：用樱花粉/薄荷绿做键盘与状态色，响应键盘/鼠标/执行状态。
+ */
+function CatSpiritBase({ state = 'idle', compact = false }: Props) {
+  const [pressed, setPressed] = useState<Set<string>>(() => new Set());
+  const [mouseDown, setMouseDown] = useState(false);
+  const [pointer, setPointer] = useState({ x: 0, y: 0 });
+  const [bubble, setBubble] = useState<{ text: string; id: number } | null>(null);
+  const [poke, setPoke] = useState(0);
+  const wrapRef = useRef<HTMLDivElement>(null);
+
+  useEffect(() => {
+    const down = (event: KeyboardEvent) => {
+      setPressed(prev => {
+        const next = new Set(prev);
+        next.add(event.code || event.key);
+        return next;
+      });
+    };
+    const up = (event: KeyboardEvent) => {
+      setPressed(prev => {
+        const next = new Set(prev);
+        next.delete(event.code || event.key);
+        return next;
+      });
+    };
+    const mousedown = () => setMouseDown(true);
+    const mouseup = () => setMouseDown(false);
+    const mousemove = (event: MouseEvent) => {
+      const rect = wrapRef.current?.getBoundingClientRect();
+      if (!rect) return;
+      const x = Math.max(-1, Math.min(1, (event.clientX - rect.left - rect.width / 2) / (rect.width / 2)));
+      const y = Math.max(-1, Math.min(1, (event.clientY - rect.top - rect.height / 2) / (rect.height / 2)));
+      setPointer({ x: Number((x * 2.6).toFixed(2)), y: Number((y * 1.8).toFixed(2)) });
+    };
+
+    window.addEventListener('keydown', down);
+    window.addEventListener('keyup', up);
+    window.addEventListener('mousedown', mousedown);
+    window.addEventListener('mouseup', mouseup);
+    window.addEventListener('mousemove', mousemove);
+    window.addEventListener('blur', () => setPressed(new Set()));
+    return () => {
+      window.removeEventListener('keydown', down);
+      window.removeEventListener('keyup', up);
+      window.removeEventListener('mousedown', mousedown);
+      window.removeEventListener('mouseup', mouseup);
+      window.removeEventListener('mousemove', mousemove);
+    };
+  }, []);
+
+  const action: PetAction = useMemo(() => {
+    if (state === 'success') return 'success';
+    if (state === 'error') return 'error';
+    if (state === 'running') return 'typing';
+    if (pressed.size > 0) return 'typing';
+    if (mouseDown) return 'mouse';
+    return 'idle';
+  }, [mouseDown, pressed.size, state]);
+
+  const keyHints = useMemo(() => {
+    const keys = Array.from(pressed).slice(-4);
+    if (!keys.length) return ['⌘', 'K', 'AI'];
+    return keys.map(key => key.replace(/^Key/, '').replace(/^Digit/, '').replace('Space', '␣').replace('Enter', '↵'));
+  }, [pressed]);
+
+  const say = () => {
+    setPoke(value => value + 1);
+    setBubble({ text: pick(BUBBLES), id: Date.now() });
+    window.setTimeout(() => setBubble(null), 1400);
+  };
+
+  return (
+    <div className="flex items-center gap-3 select-none">
+      <div
+        ref={wrapRef}
+        className="bongo-pet"
+        data-action={action}
+        data-poke={poke}
+        onClick={say}
+        role="img"
+        aria-label={`BongoCat 小爪状态：${LABEL[state]}`}
+        title="Web BongoCat：敲键盘/点鼠标会动"
+      >
+        <svg viewBox="0 0 220 168" aria-hidden>
+          <defs>
+            <linearGradient id="bongoDesk" x1="0" y1="0" x2="1" y2="1">
+              <stop offset="0%" stopColor="#FFF7FA" />
+              <stop offset="52%" stopColor="#FFE1E9" />
+              <stop offset="100%" stopColor="#DDF8F1" />
+            </linearGradient>
+            <linearGradient id="bongoKey" x1="0" y1="0" x2="1" y2="1">
+              <stop offset="0%" stopColor="#FFFFFF" />
+              <stop offset="100%" stopColor="#F4FFFC" />
+            </linearGradient>
+            <filter id="bongoShadow" x="-20%" y="-20%" width="140%" height="150%">
+              <feDropShadow dx="0" dy="8" stdDeviation="7" floodColor="#2B1828" floodOpacity="0.14" />
+            </filter>
+          </defs>
+
+          <g className="bongo-shadow" opacity="0.22">
+            <ellipse cx="112" cy="151" rx="82" ry="10" fill="#2B1828" />
+          </g>
+
+          <g className="bongo-cat" filter="url(#bongoShadow)">
+            <g className="bongo-body">
+              <path
+                className="bongo-ear bongo-ear-left"
+                d="M58 56 C54 36 56 22 66 12 C78 25 84 39 82 58 Z"
+                fill="#FFFFFF"
+                stroke="#2B1828"
+                strokeWidth="5"
+              />
+              <path
+                className="bongo-ear bongo-ear-right"
+                d="M137 58 C137 39 145 24 158 13 C166 25 162 42 151 61 Z"
+                fill="#FFFFFF"
+                stroke="#2B1828"
+                strokeWidth="5"
+              />
+              <path d="M65 49 C64 37 66 29 69 24 C75 34 78 43 77 52 Z" fill="#FFB7C5" opacity="0.58" />
+              <path d="M144 53 C145 42 150 32 156 25 C159 34 156 44 150 54 Z" fill="#FFB7C5" opacity="0.58" />
+
+              <path
+                className="bongo-head"
+                d="M42 76 C42 48 66 34 106 34 C146 34 168 51 167 80 C166 113 142 132 104 132 C66 132 43 111 42 76 Z"
+                fill="#FFFFFF"
+                stroke="#2B1828"
+                strokeWidth="5"
+              />
+
+              <g className="bongo-face" style={{ transform: `translate(${pointer.x}px, ${pointer.y}px)` }}>
+                {state === 'error' ? (
+                  <>
+                    <path d="M78 74 L88 84 M88 74 L78 84" stroke="#2B1828" strokeWidth="4" strokeLinecap="round" />
+                    <path d="M122 74 L132 84 M132 74 L122 84" stroke="#2B1828" strokeWidth="4" strokeLinecap="round" />
+                  </>
+                ) : state === 'success' ? (
+                  <>
+                    <path d="M76 80 Q83 73 90 80" fill="none" stroke="#2B1828" strokeWidth="4" strokeLinecap="round" />
+                    <path d="M120 80 Q127 73 134 80" fill="none" stroke="#2B1828" strokeWidth="4" strokeLinecap="round" />
+                  </>
+                ) : (
+                  <>
+                    <circle className="bongo-eye bongo-eye-left" cx="83" cy="79" r="5.2" fill="#2B1828" />
+                    <circle className="bongo-eye bongo-eye-right" cx="127" cy="79" r="5.2" fill="#2B1828" />
+                  </>
+                )}
+                <path className="bongo-mouth" d="M101 91 C104 96 111 96 114 91 M101 91 C99 88 101 86 105 87 M114 91 C116 88 114 86 110 87" fill="none" stroke="#2B1828" strokeWidth="3.2" strokeLinecap="round" />
+                <g className="bongo-whiskers" stroke="#2B1828" strokeWidth="2.2" strokeLinecap="round" opacity="0.72">
+                  <path d="M72 90 C57 87 47 88 35 92" />
+                  <path d="M72 97 C58 98 48 102 38 108" />
+                  <path d="M138 90 C153 87 163 88 175 92" />
+                  <path d="M138 97 C152 98 162 102 172 108" />
+                </g>
+              </g>
+            </g>
+
+            <g className="bongo-paws">
+              <g className="bongo-paw bongo-paw-left">
+                <path d="M58 106 C45 102 35 110 34 125 C33 139 43 147 56 144 C68 141 75 131 72 118 C70 111 65 108 58 106 Z" fill="#FFFFFF" stroke="#2B1828" strokeWidth="5" />
+                <ellipse cx="54" cy="130" rx="7" ry="8" fill="#FF9CAF" />
+                <circle cx="45" cy="121" r="3.7" fill="#FF9CAF" />
+                <circle cx="55" cy="117" r="3.7" fill="#FF9CAF" />
+                <circle cx="65" cy="122" r="3.7" fill="#FF9CAF" />
+              </g>
+              <g className="bongo-paw bongo-paw-right">
+                <path d="M151 106 C164 102 174 110 175 125 C176 139 166 147 153 144 C141 141 134 131 137 118 C139 111 144 108 151 106 Z" fill="#FFFFFF" stroke="#2B1828" strokeWidth="5" />
+                <ellipse cx="155" cy="130" rx="7" ry="8" fill="#FF9CAF" />
+                <circle cx="145" cy="122" r="3.7" fill="#FF9CAF" />
+                <circle cx="155" cy="117" r="3.7" fill="#FF9CAF" />
+                <circle cx="165" cy="121" r="3.7" fill="#FF9CAF" />
+              </g>
+            </g>
+          </g>
+
+          <g className="bongo-desk">
+            <path d="M18 124 C55 118 160 116 202 124 L209 160 C160 166 57 165 10 158 Z" fill="url(#bongoDesk)" stroke="#2B1828" strokeWidth="5" strokeLinejoin="round" />
+            <path d="M33 131 C77 127 145 127 187 132" fill="none" stroke="#FFFFFF" strokeWidth="5" strokeLinecap="round" opacity="0.62" />
+          </g>
+
+          <g className="bongo-keyboard">
+            <path d="M62 113 L158 108 L181 139 L45 146 Z" fill="url(#bongoKey)" stroke="#2B1828" strokeWidth="4" strokeLinejoin="round" />
+            <g className="bongo-key-lines" stroke="#2B1828" strokeWidth="2.1" strokeLinecap="round" opacity="0.86">
+              <path d="M75 119 L163 116" />
+              <path d="M63 131 L172 126" />
+              <path d="M86 115 L70 143" />
+              <path d="M109 114 L98 142" />
+              <path d="M132 112 L130 141" />
+              <path d="M154 111 L162 140" />
+            </g>
+            <g className="bongo-hotkeys" fontFamily="ui-monospace, SFMono-Regular, Menlo, monospace" fontSize="8" fontWeight="800" fill="#6E5AA8">
+              <text x="80" y="128">{keyHints[0]}</text>
+              <text x="104" y="126">{keyHints[1] || 'LBS'}</text>
+              <text x="130" y="125">{keyHints[2] || 'AI'}</text>
+              <text x="151" y="135">{keyHints[3] || '↵'}</text>
+            </g>
+          </g>
+
+          <g className="bongo-click-pad">
+            <path d="M20 110 L49 106 L57 128 L23 132 Z" fill="#FFFFFF" stroke="#2B1828" strokeWidth="4" strokeLinejoin="round" />
+            <path d="M32 117 L44 116 M38 111 L38 124" stroke="#98D8C8" strokeWidth="3" strokeLinecap="round" />
+          </g>
+
+          <g className="bongo-status" opacity={state === 'idle' ? 0.75 : 1}>
+            <circle cx="194" cy="31" r="10" fill={state === 'error' ? '#FFB86B' : state === 'success' ? '#98D8C8' : '#FFB7C5'} stroke="#2B1828" strokeWidth="3" />
+            <path d={state === 'error' ? 'M190 31 L198 31 M194 26 L194 34' : state === 'success' ? 'M189 31 L193 35 L200 26' : 'M190 31 L198 31'} fill="none" stroke="#FFFFFF" strokeWidth="3" strokeLinecap="round" strokeLinejoin="round" />
+          </g>
+        </svg>
+        {bubble && <span key={bubble.id} className="bongo-bubble">{bubble.text}</span>}
+      </div>
+
+      {!compact && (
+        <div className="leading-tight">
+          <div className="text-[10px] font-semibold uppercase tracking-widest text-berry/40">Web Pet</div>
+          <div className="text-xs font-bold text-berry">{LABEL[state]}</div>
+        </div>
+      )}
+    </div>
+  );
+}
+
+export const CatSpirit = memo(CatSpiritBase);