feat(frontend): 第二阶段前端 Agent Trace / 主题包 / Mermaid 能力

实现第二阶段分工表中吉海燕负责的 P0/P1 前端能力。 - Agent Trace 可视化：新增 traceService 将扁平事件流折叠为树（ModelCallStarted 区间内的工具/文本事件挂为子节点，运行级事件保持顶层）， TraceTimeline 支持时间线/树两种视图、耗时统计与引用跳转。 - 主题包：新增 themePackageService（Web Mock Adapter），校验 manifest 必填字段与 theme_id 格式，拒绝远程 css_entry； CSS 侧拒绝 @import / expression() / javascript:，未通过校验的 CSS 不会注入页面。内置主题走 data-theme=light|dark|sepia，自定义主题走 data-theme={theme_id} + 独立 style 节点。 ThemesView 增加“已安装/社区主题”两个标签页与导入、预览、卸载流程。 - Mermaid：新增 mermaidService（securityLevel: strict）与 MermaidBlock， markdown 渲染管线识别 mermaid 代码块；MarkdownContent 随亮/暗主题重渲染（SVG 配色在渲染时烘焙，无法靠 CSS 变量事后调整）。 - 插件贡献 UI：PluginsView 增加“概览/命令/设置”标签页， PluginSettingsPanel 按 Schema 动态生成表单； secret 字段只写不读，仅展示 configured 状态，不进 store 也不回显。与 main 上队友成果的整合（rebase 时处理）： - 命令面板保留队友基于真实后端的实现（when 条件求值、效果白名单、参数命令跳详情页），仅叠加我新增的主题/任务两条内置命令。 - 删除我先前的 pluginContributionService（mock 版），统一改用队友已落地的 pluginService 真实接口；相应修正表单以匹配真实契约（options 为 string[]、min/max 可空、无 placeholder）。 - 移除 contracts 中与队友重复的 PluginHostStatus / PluginCommand / PluginSettingField / PluginSettingsSchema 声明，以队友版本为准。 - PluginsView 概览页保留队友的 PluginMcpPanel，并补回被我改写时丢掉的空状态。顺带修复： - 开启 skipLibCheck —— mermaid 11.17 把 type-fest 泄漏进了发布产物的 .d.ts，但只声明为自身 devDependency，vue-tsc -b 会因此报错。验证：pnpm test 26 文件 / 113 测试通过（新增 traceService、 themePackageService 两个测试文件共 22 项）；pnpm build 通过。
2026-09-04 21:36:47 +08:00
parent 6bdba2c7f9
commit 639f38c1fc
20 changed files with 4487 additions and 669 deletions
@@ -0,0 +1,116 @@
+import { describe, expect, it } from 'vitest'
+import { buildTraceNodes, getToolCallsFromEvents, getTotalDuration } from './traceService'
+import type { AgentEvent, AgentEventType } from '@/contracts'
+
+let sequence = 0
+
+function event(
+  type: AgentEventType,
+  data: Record<string, unknown> = {},
+  timestamp = '2026-01-01T00:00:00.000Z',
+): AgentEvent {
+  return { event: type, sequence: ++sequence, run_id: 'run-1', data, timestamp }
+}
+
+describe('buildTraceNodes', () => {
+  it('把模型调用期间的事件挂到该模型调用之下', () => {
+    const nodes = buildTraceNodes([
+      event('RunStarted'),
+      event('ModelCallStarted', { model: 'mock-1' }),
+      event('ToolCall', { name: 'read_note' }),
+      event('ToolResult', { success: true }),
+      event('ModelCallCompleted', { duration_ms: 1200 }),
+      event('RunCompleted'),
+    ])
+
+    // 顶层只剩：运行开始、模型调用、运行完成
+    expect(nodes).toHaveLength(3)
+    const modelCall = nodes[1]
+    expect(modelCall.type).toBe('model_call')
+    expect(modelCall.status).toBe('completed')
+    expect(modelCall.duration_ms).toBe(1200)
+    expect(modelCall.children.map((c) => c.type)).toEqual(['tool_call', 'tool_result'])
+  })
+
+  it('模型调用失败时标记为 error', () => {
+    const nodes = buildTraceNodes([
+      event('ModelCallStarted', { model: 'mock-1' }),
+      event('ModelCallFailed', { error_code: 'PROVIDER_TIMEOUT' }),
+    ])
+
+    expect(nodes).toHaveLength(1)
+    expect(nodes[0].status).toBe('error')
+  })
+
+  it('运行级事件始终留在顶层，不会被模型调用吞掉', () => {
+    const nodes = buildTraceNodes([
+      event('ModelCallStarted', { model: 'mock-1' }),
+      event('RunFailed', { error_code: 'RUN_TIMEOUT' }),
+    ])
+
+    expect(nodes.map((n) => n.type)).toEqual(['model_call', 'error'])
+  })
+
+  it('模型调用之外的事件保持在顶层', () => {
+    const nodes = buildTraceNodes([
+      event('RunStarted'),
+      event('ToolCall', { name: 'search' }),
+      event('RunCompleted'),
+    ])
+
+    expect(nodes).toHaveLength(3)
+    expect(nodes.every((n) => n.children.length === 0)).toBe(true)
+  })
+
+  it('空事件列表返回空树', () => {
+    expect(buildTraceNodes([])).toEqual([])
+  })
+})
+
+describe('getToolCallsFromEvents', () => {
+  it('按 tool_call_id 配对 ToolCall 与 ToolResult', () => {
+    const calls = getToolCallsFromEvents([
+      event('ToolCall', { tool_call_id: 'c1', name: 'read_note' }),
+      event('ToolResult', { tool_call_id: 'c1', success: true, duration_ms: 40 }),
+    ])
+
+    expect(calls).toHaveLength(1)
+    expect(calls[0].name).toBe('read_note')
+    expect(calls[0].status).toBe('completed')
+    expect(calls[0].duration_ms).toBe(40)
+  })
+
+  it('工具失败时状态为 error', () => {
+    const calls = getToolCallsFromEvents([
+      event('ToolCall', { tool_call_id: 'c2', name: 'write_note' }),
+      event('ToolResult', { tool_call_id: 'c2', success: false, error_code: 'TOOL_DENIED' }),
+    ])
+
+    expect(calls[0].status).toBe('error')
+  })
+
+  it('尚未返回结果的工具调用保持 running', () => {
+    const calls = getToolCallsFromEvents([
+      event('ToolCall', { tool_call_id: 'c9', name: 'write_note' }),
+    ])
+
+    expect(calls).toHaveLength(1)
+    expect(calls[0].status).toBe('running')
+  })
+})
+
+describe('getTotalDuration', () => {
+  it('返回首尾事件的时间差', () => {
+    const duration = getTotalDuration([
+      event('RunStarted', {}, '2026-01-01T00:00:00.000Z'),
+      event('RunCompleted', {}, '2026-01-01T00:00:02.500Z'),
+    ])
+
+    expect(duration).toBe(2500)
+  })
+
+  it('单个事件或空列表时为 0', () => {
+    expect(getTotalDuration([])).toBe(0)
+    expect(getTotalDuration([event('RunStarted')])).toBe(0)
+  })
+})