Feat/frontend phase2 themes trace mermaid #26

2026-09-05T17:46:52+08:00

Kronecker commented

2026-09-05 17:46:52 +08:00

变更说明

整合最新 main，并修复 frontend phase2 前两轮审阅发现的问题。

主题管理

安装和加载主题列表时不再注入 CSS，仅挂载当前启用主题的样式。
切换主题时移除旧样式，返回内置主题后不残留自定义 CSS。
未安装的社区主题可在隔离预览窗口中展示实际 CSS，不安装主题、不修改当前主题。
移除预览结束后的延迟回滚逻辑，避免覆盖用户后续选择。

插件设置

普通设置保存使用编辑版本判断，保留请求期间产生的新修改。
密钥保存使用提交快照，仅清空未变化的输入。
保存失败保留输入并允许重试，阻止重复提交。
切换插件或卸载组件后忽略旧请求响应。

与 main 整合

解决 9 个冲突文件。
保留 main 的聊天持久化、会话并发修复、中英文支持及完整 Shiki 语言与图标能力。
保留 phase2 的 Trace 可视化、引用导航、主题包、Mermaid 和共享插件命令表单。

验证

40 个前端测试文件、233 项测试通过。
类型检查和生产构建通过。
回归测试覆盖主题样式隔离、全部社区主题预览、保存期间继续编辑、失败重试和旧响应隔离。
浏览器验证主题切换、预览窗口隔离、延迟保存，以及 Mermaid 与 Shiki 渲染。

限制

构建仍有大体积 chunk 提示。
插件请求的浏览器验证使用测试接口，未执行生产插件后端端到端验收。

## 变更说明整合最新 main，并修复 frontend phase2 前两轮审阅发现的问题。 ### 主题管理 - 安装和加载主题列表时不再注入 CSS，仅挂载当前启用主题的样式。 - 切换主题时移除旧样式，返回内置主题后不残留自定义 CSS。 - 未安装的社区主题可在隔离预览窗口中展示实际 CSS，不安装主题、不修改当前主题。 - 移除预览结束后的延迟回滚逻辑，避免覆盖用户后续选择。 ### 插件设置 - 普通设置保存使用编辑版本判断，保留请求期间产生的新修改。 - 密钥保存使用提交快照，仅清空未变化的输入。 - 保存失败保留输入并允许重试，阻止重复提交。 - 切换插件或卸载组件后忽略旧请求响应。 ### 与 main 整合 - 解决 9 个冲突文件。 - 保留 main 的聊天持久化、会话并发修复、中英文支持及完整 Shiki 语言与图标能力。 - 保留 phase2 的 Trace 可视化、引用导航、主题包、Mermaid 和共享插件命令表单。 ## 验证 - 40 个前端测试文件、233 项测试通过。 - 类型检查和生产构建通过。 - 回归测试覆盖主题样式隔离、全部社区主题预览、保存期间继续编辑、失败重试和旧响应隔离。 - 浏览器验证主题切换、预览窗口隔离、延迟保存，以及 Mermaid 与 Shiki 渲染。 ## 限制 - 构建仍有大体积 chunk 提示。 - 插件请求的浏览器验证使用测试接口，未执行生产插件后端端到端验收。

Kronecker added 4 commits 2026-09-05 17:46:53 +08:00

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

实现第二阶段分工表中吉海燕负责的 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 通过。

fix(frontend): 修复 PR #18 审阅问题并补充回归测试 f273fef235

审阅意见逐项修复：

1. 主题包安装丢弃用户 CSS
   inspectThemePackage 之前只解析 YAML 清单，ThemesView 安装时另外
   生成一套硬编码调色板，用户提供的 CSS 被整份丢掉。现在定义单文件
   格式（YAML 清单 + `---` + CSS），parseThemePackage 取出真实 CSS
   并原样安装；CSS 安全校验提前到预览阶段；按内容识别并拒绝 ZIP。

2. 主题恢复竞态导致页面无 data-theme
   initTheme 之前没有 await loadCustomThemes，自定义主题还没进
   allThemes，applyTheme 找不到主题直接 return。现在先同步落一个
   内置主题兜底（不写 localStorage，避免冲掉用户存的自定义主题 id），
   加载完成后再切到真正保存的那个；主题失效或列表加载失败时回退并
   通过 themeLoadWarning 告知用户，不再静默。

3. Trace 建树依赖事件相邻顺序
   后端真实顺序是 ModelCallStarted → ModelCallCompleted → Usage →
   ToolCall/ToolResult，工具在模型调用完成后才执行且并发跑，相邻性
   不可用。改为按 model_call_id / parent_model_call_id / tool_call_id
   关联；ToolResult 回填 ToolCall 的状态与耗时，结束后不再显示
   running；SSE 断点恢复的孤立事件退回顶层而不是丢弃。

4. Trace 叶子节点无法查看数据
   行的 click 是 `children.length && toggleExpand`，而详情 v-if 又
   要求 `children.length === 0`，两个条件互斥。拆成 expandedNodes
   与 detailNodes 两个状态集合；展开箭头改为独立按钮，行支持键盘
   与 aria-expanded；引用节点补「定位」按钮。同时修正 Usage 卡片
   字段（后端只发累计 token_usage）。

5. 引用定位逻辑三处重复且各自有缺陷
   抽出 navigateToCitation（依赖注入，可独立测试）+ useCitationNavigation。
   调用顺序固化：必须先 await loadFile 再 highlightBlock，否则
   editor store 的 loadFile 末尾会把高亮清掉；loadFile 失败时不跳转。
   AgentView / ChatView / AppShell 统一走这一处。

6. 插件命令 UI 重复实现
   抽出 PluginCommandPanel 复用 PluginMcpPanel 的 schema 驱动表单，
   删除 PluginsView 里的劣化副本。effect 现在真的执行 navigate /
   refresh（此前只拼成文本显示）；补上必填校验与布尔字段初始值，
   修正「显示否但不提交该键」的不一致。

补充回归测试 64 项（相关 spec 由 25 项增至 89 项），并对 2、3、4 三项
缺陷做了变异验证：把修复回退成原写法后对应测试确实失败。
涉及 traceService / theme store / themePackageService / pluginCommandForm /
useCitationNavigation / TraceTimeline，其中后三个为新增文件。

vue-tsc -b、vitest（32 文件 182 项）、vite build 全部通过。

fix(frontend): 同步 main 并修复 phase2 关闭审阅意见 0f08cd051b

fix(frontend): 保留密钥编辑并隔离社区主题预览 6d0c1400ce

Kronecker commented

2026-09-05 17:47:06 +08:00

审阅结论：同意合并。

此前提出的主题 CSS 泄漏、保存状态竞态、密钥新输入丢失和社区主题预览无效问题均已修复，并补充回归测试。

本轮复审未发现新的阻塞问题。最新 main 的聊天持久化、会话并发修复、中英文支持和 Shiki 能力得到保留。

验证结果：233 项前端测试、类型检查及生产构建通过；浏览器已验证主题隔离、实际预览与保存行为。

生产插件后端端到端验收尚未覆盖，构建体积提示可作为后续优化项。

审阅结论：同意合并。此前提出的主题 CSS 泄漏、保存状态竞态、密钥新输入丢失和社区主题预览无效问题均已修复，并补充回归测试。本轮复审未发现新的阻塞问题。最新 main 的聊天持久化、会话并发修复、中英文支持和 Shiki 能力得到保留。验证结果：233 项前端测试、类型检查及生产构建通过；浏览器已验证主题隔离、实际预览与保存行为。生产插件后端端到端验收尚未覆盖，构建体积提示可作为后续优化项。

Kronecker merged commit 311ea4a8ac into main

2026-09-05 17:47:09 +08:00

Sign in to join this conversation.

1 Participants

Notifications

Due Date

No due date set.

Dependencies

No dependencies set.

Reference: Kronecker/NotesAgentic#26