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
@@ -13,6 +13,7 @@ import sql from '@shikijs/langs/sql'
 import typescript from '@shikijs/langs/typescript'
 import githubDark from '@shikijs/themes/github-dark'
 import githubLight from '@shikijs/themes/github-light'
+import { renderMermaid } from '@/services/mermaidService'

 marked.setOptions({ gfm: true, breaks: true })

@@ -38,18 +39,51 @@ export async function highlightCode(source: string, requestedLanguage = 'text'):
  })
 }

-export async function renderMarkdown(source: string): Promise<string> {
+export async function renderMarkdown(source: string, options?: { theme?: 'light' | 'dark' }): Promise<string> {
  const html = marked.parse(source, { async: false }) as string
  const documentNode = new DOMParser().parseFromString(`<body>${html}</body>`, 'text/html')
+
+  const mermaidBlocks: { pre: Element; source: string }[] = []
+
  for (const code of documentNode.querySelectorAll('pre > code')) {
    const requestedLanguage = [...code.classList].find((name) => name.startsWith('language-'))?.slice(9) || 'text'
+    if (requestedLanguage === 'mermaid') {
+      mermaidBlocks.push({ pre: code.parentElement!, source: code.textContent ?? '' })
+      continue
+    }
    const highlighted = await highlightCode(code.textContent ?? '', requestedLanguage)
    const fragment = document.createRange().createContextualFragment(highlighted)
    code.parentElement?.replaceWith(fragment)
  }

-  // Markdown 可能来自模型或外部笔记，高亮完成后仍必须在最终出口统一净化。
-  return DOMPurify.sanitize(documentNode.body.innerHTML, { USE_PROFILES: { html: true } })
+  for (const { pre, source } of mermaidBlocks) {
+    try {
+      const result = await renderMermaid(source, { theme: options?.theme, mode: 'static' })
+      const container = document.createElement('div')
+      container.className = 'markdown-mermaid'
+      container.innerHTML = result.svg
+      pre.replaceWith(container)
+    } catch {
+      const fallback = document.createElement('pre')
+      fallback.className = 'mermaid-error'
+      fallback.textContent = source
+      pre.replaceWith(fallback)
+    }
+  }
+
+  return DOMPurify.sanitize(documentNode.body.innerHTML, {
+    USE_PROFILES: { html: true },
+    ADD_TAGS: ['svg', 'path', 'rect', 'circle', 'ellipse', 'line', 'polyline', 'polygon',
+      'text', 'tspan', 'textPath', 'g', 'defs', 'marker', 'style', 'clipPath', 'foreignObject',
+      'title', 'desc', 'use', 'image', 'linearGradient', 'stop', 'radialGradient'],
+    ADD_ATTR: ['viewBox', 'd', 'cx', 'cy', 'r', 'rx', 'ry', 'x', 'y', 'width', 'height',
+      'fill', 'stroke', 'stroke-width', 'stroke-dasharray', 'stroke-linecap', 'stroke-linejoin',
+      'transform', 'points', 'x1', 'y1', 'x2', 'y2', 'class', 'id', 'style', 'text-anchor',
+      'dominant-baseline', 'font-size', 'font-family', 'font-weight', 'opacity', 'orient',
+      'marker-end', 'marker-start', 'marker-mid', 'refX', 'refY', 'viewBox', 'preserveAspectRatio',
+      'xlink:href', 'href', 'clip-path', 'gradientUnits', 'gradientTransform', 'stop-color',
+      'stop-opacity', 'offset', 'patternUnits', 'patternTransform', 'target'],
+  })
 }

 // TODO(performance): 编辑器首屏稳定后评估将 Shiki 延迟加载或迁移到 Web Worker。