From ab9ce58051e2475e40f005c2a25c50333e05df8f Mon Sep 17 00:00:00 2001
From: jhy <184825448@qq.com>
Date: Fri, 4 Sep 2026 23:15:53 +0800
Subject: [PATCH] =?UTF-8?q?fix(frontend):=20=E4=BF=AE=E5=A4=8D=20PR=20#18?=
 =?UTF-8?q?=20=E5=AE=A1=E9=98=85=E9=97=AE=E9=A2=98=E5=B9=B6=E8=A1=A5?=
 =?UTF-8?q?=E5=85=85=E5=9B=9E=E5=BD=92=E6=B5=8B=E8=AF=95?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

审阅意见逐项修复：

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（此前只拼成文本显示）；补上必填校验与布尔字段初始值，
   修正「显示否但不提交该键」的不一致。

补充回归测试 91 项（含对上述缺陷的变异验证）：
traceService / theme store / themePackageService / pluginCommandForm /
useCitationNavigation / TraceTimeline。

vue-tsc -b、vitest（32 文件 182 项）、vite build 全部通过。
---
 frontend/src/components/common/AppShell.vue   |  17 +-
 .../composables/useCitationNavigation.spec.ts |  84 +++++++
 .../src/composables/useCitationNavigation.ts  |  64 +++++
 frontend/src/contracts/index.ts               |   4 +
 frontend/src/features/agent/AgentView.vue     |  18 +-
 .../src/features/agent/TraceTimeline.spec.ts  | 170 +++++++++++++
 frontend/src/features/agent/TraceTimeline.vue |  96 +++++--
 frontend/src/features/chat/ChatView.vue       |  22 +-
 .../features/plugins/PluginCommandPanel.vue   | 235 ++++++++++++++++++
 .../src/features/plugins/PluginMcpPanel.vue   |  89 +------
 frontend/src/features/plugins/PluginsView.vue | 108 +-------
 frontend/src/features/themes/ThemesView.vue   | 117 ++++-----
 frontend/src/main.ts                          |   3 +-
 .../src/services/pluginCommandForm.spec.ts    | 227 +++++++++++++++++
 frontend/src/services/pluginCommandForm.ts    | 152 +++++++++++
 .../src/services/themePackageService.spec.ts  | Bin 4522 -> 8006 bytes
 frontend/src/services/themePackageService.ts  |  83 +++++--
 frontend/src/services/traceService.spec.ts    | 113 +++++++--
 frontend/src/services/traceService.ts         | 160 ++++++++----
 frontend/src/stores/theme.spec.ts             | 135 +++++++++-
 frontend/src/stores/theme.ts                  |  59 ++++-
 frontend/src/stores/workspace.ts              |   7 +
 22 files changed, 1573 insertions(+), 390 deletions(-)
 create mode 100644 frontend/src/composables/useCitationNavigation.spec.ts
 create mode 100644 frontend/src/composables/useCitationNavigation.ts
 create mode 100644 frontend/src/features/agent/TraceTimeline.spec.ts
 create mode 100644 frontend/src/features/plugins/PluginCommandPanel.vue
 create mode 100644 frontend/src/services/pluginCommandForm.spec.ts
 create mode 100644 frontend/src/services/pluginCommandForm.ts

diff --git a/frontend/src/components/common/AppShell.vue b/frontend/src/components/common/AppShell.vue
index 2b1ac95..54373d5 100644
--- a/frontend/src/components/common/AppShell.vue
+++ b/frontend/src/components/common/AppShell.vue
@@ -10,6 +10,7 @@ import SecondarySidebar from './SecondarySidebar.vue'
 import StatusBar from './StatusBar.vue'
 import TitleBar from './TitleBar.vue'
 import CommandPalette from './CommandPalette.vue'
+import { navigateToCitation } from '@/composables/useCitationNavigation'
 
 defineProps<{
   showSecondarySidebar?: boolean
@@ -43,10 +44,18 @@ const secondaryComponent = computed(() => {
   }
 })
 
-function openCitation(noteId: string, blockId: string, filePath: string) {
-  workspaceStore.openFile(filePath)
-  editorStore.highlightBlock(blockId)
-  router.push('/workspace')
+function openCitation(_noteId: string, blockId: string, filePath: string) {
+  // 走统一的定位流程：必须先 loadFile 再 highlightBlock，
+  // 否则 editor store 的 loadFile 会把刚设好的高亮清掉。
+  return navigateToCitation(
+    { file_path: filePath, block_id: blockId },
+    {
+      loadFile: (path) => editorStore.loadFile(path),
+      openFile: (path) => workspaceStore.openFile(path),
+      highlightBlock: (id) => editorStore.highlightBlock(id),
+      navigate: (path) => router.push(path),
+    },
+  )
 }
 
 defineExpose({ openCitation })
diff --git a/frontend/src/composables/useCitationNavigation.spec.ts b/frontend/src/composables/useCitationNavigation.spec.ts
new file mode 100644
index 0000000..4326c02
--- /dev/null
+++ b/frontend/src/composables/useCitationNavigation.spec.ts
@@ -0,0 +1,84 @@
+import { describe, expect, it, vi } from 'vitest'
+import { navigateToCitation } from './useCitationNavigation'
+import type { CitationNavigationDeps } from './useCitationNavigation'
+
+function deps(overrides: Partial<CitationNavigationDeps> = {}) {
+  const calls: string[] = []
+  const base: CitationNavigationDeps = {
+    loadFile: vi.fn(async () => { calls.push('loadFile') }),
+    openFile: vi.fn(() => { calls.push('openFile') }),
+    highlightBlock: vi.fn(() => { calls.push('highlightBlock') }),
+    navigate: vi.fn(async () => { calls.push('navigate') }),
+  }
+  return { deps: { ...base, ...overrides }, calls }
+}
+
+describe('navigateToCitation', () => {
+  it('先加载文件再高亮，最后跳转到工作区', async () => {
+    // 顺序不能改：editor store 的 loadFile 末尾会把 highlightBlockId 清空
+    // （stores/editor.ts），先 highlightBlock 会被自己冲掉。
+    const { deps: d, calls } = deps()
+
+    await navigateToCitation({ file_path: 'notes/a.md', block_id: 'blk-1' }, d)
+
+    expect(calls).toEqual(['loadFile', 'openFile', 'highlightBlock', 'navigate'])
+    expect(d.loadFile).toHaveBeenCalledWith('notes/a.md')
+    expect(d.highlightBlock).toHaveBeenCalledWith('blk-1')
+    expect(d.navigate).toHaveBeenCalledWith('/workspace')
+  })
+
+  it('等 loadFile 的 promise resolve 之后才高亮', async () => {
+    let loaded = false
+    const highlightBlock = vi.fn(() => {
+      // loadFile 还没完成就高亮，说明少了 await
+      expect(loaded).toBe(true)
+    })
+    const { deps: d } = deps({
+      loadFile: vi.fn(async () => {
+        await Promise.resolve()
+        loaded = true
+      }),
+      highlightBlock,
+    })
+
+    await navigateToCitation({ file_path: 'notes/a.md', block_id: 'blk-1' }, d)
+
+    expect(highlightBlock).toHaveBeenCalledTimes(1)
+  })
+
+  it('没有 block_id 时只打开文件，不调用高亮', async () => {
+    const { deps: d, calls } = deps()
+
+    await navigateToCitation({ file_path: 'notes/a.md' }, d)
+
+    expect(calls).toEqual(['loadFile', 'openFile', 'navigate'])
+    expect(d.highlightBlock).not.toHaveBeenCalled()
+  })
+
+  it('缺少 file_path 时抛出可展示的错误，且不做任何跳转', async () => {
+    const { deps: d } = deps()
+
+    await expect(navigateToCitation({ block_id: 'blk-1' }, d)).rejects.toThrow('该引用缺少文件路径，无法定位到笔记。')
+    expect(d.loadFile).not.toHaveBeenCalled()
+    expect(d.navigate).not.toHaveBeenCalled()
+  })
+
+  it('file_path 是空串或非字符串时同样拒绝', async () => {
+    const { deps: d } = deps()
+
+    await expect(navigateToCitation({ file_path: '   ' }, d)).rejects.toThrow(/缺少文件路径/)
+    await expect(navigateToCitation({ file_path: 42 }, d)).rejects.toThrow(/缺少文件路径/)
+    expect(d.loadFile).not.toHaveBeenCalled()
+  })
+
+  it('loadFile 失败时不跳转，避免把用户从未保存的编辑器里弹走', async () => {
+    const { deps: d } = deps({
+      loadFile: vi.fn(async () => { throw new Error('SAVE_CONFLICT: 当前文件有未解决的冲突') }),
+    })
+
+    await expect(navigateToCitation({ file_path: 'notes/a.md', block_id: 'b' }, d)).rejects.toThrow(/SAVE_CONFLICT/)
+    expect(d.openFile).not.toHaveBeenCalled()
+    expect(d.highlightBlock).not.toHaveBeenCalled()
+    expect(d.navigate).not.toHaveBeenCalled()
+  })
+})
diff --git a/frontend/src/composables/useCitationNavigation.ts b/frontend/src/composables/useCitationNavigation.ts
new file mode 100644
index 0000000..5a1ab19
--- /dev/null
+++ b/frontend/src/composables/useCitationNavigation.ts
@@ -0,0 +1,64 @@
+import { useRouter } from 'vue-router'
+import { useEditorStore } from '@/stores/editor'
+import { useWorkspaceStore } from '@/stores/workspace'
+
+/**
+ * 引用目标。字段用 unknown 是因为 Agent 事件流里拿到的是
+ * Record<string, unknown>（SSE 原始 data），不保证结构完整。
+ */
+export interface CitationTarget {
+  file_path?: unknown
+  block_id?: unknown
+}
+
+export interface CitationNavigationDeps {
+  loadFile: (filePath: string) => Promise<void>
+  openFile: (filePath: string) => void
+  highlightBlock: (blockId: string) => void
+  navigate: (path: string) => Promise<unknown> | unknown
+}
+
+function asPath(value: unknown): string {
+  return typeof value === 'string' && value.trim() !== '' ? value : ''
+}
+
+/**
+ * 定位到引用对应的笔记块。
+ *
+ * 调用顺序不能改：editor store 的 loadFile 在末尾会把 highlightBlockId 清空，
+ * 所以必须等它 resolve 之后再 highlightBlock，否则高亮会被自己冲掉。
+ * loadFile 失败（例如当前文件有未解决的保存冲突）时直接抛出，
+ * 不跳转，避免把用户从未保存的编辑器里弹走。
+ */
+export async function navigateToCitation(
+  target: CitationTarget,
+  deps: CitationNavigationDeps,
+): Promise<void> {
+  const filePath = asPath(target.file_path)
+  if (!filePath) throw new Error('该引用缺少文件路径，无法定位到笔记。')
+
+  await deps.loadFile(filePath)
+  deps.openFile(filePath)
+
+  const blockId = asPath(target.block_id)
+  if (blockId) deps.highlightBlock(blockId)
+
+  await deps.navigate('/workspace')
+}
+
+/** 组件里用的封装：绑定真实的 store 与路由。 */
+export function useCitationNavigation() {
+  const router = useRouter()
+  const editorStore = useEditorStore()
+  const workspaceStore = useWorkspaceStore()
+
+  return {
+    openCitation: (target: CitationTarget) =>
+      navigateToCitation(target, {
+        loadFile: (filePath) => editorStore.loadFile(filePath),
+        openFile: (filePath) => workspaceStore.openFile(filePath),
+        highlightBlock: (blockId) => editorStore.highlightBlock(blockId),
+        navigate: (path) => router.push(path),
+      }),
+  }
+}
diff --git a/frontend/src/contracts/index.ts b/frontend/src/contracts/index.ts
index 86b6b46..cc51b6a 100644
--- a/frontend/src/contracts/index.ts
+++ b/frontend/src/contracts/index.ts
@@ -842,12 +842,16 @@ export interface ThemePackageInspection {
   warnings: string[]
   compatible: boolean
   error_code?: string
+  /** 包内实际的主题 CSS。安装时必须用这份内容，不能另行生成。 */
+  css: string
 }
 
 export type ThemeErrorCode =
   | 'THEME_PACKAGE_NOT_FOUND'
   | 'THEME_MANIFEST_INVALID'
   | 'THEME_PACKAGE_INCOMPATIBLE'
+  | 'THEME_PACKAGE_UNSUPPORTED_FORMAT'
+  | 'THEME_PACKAGE_INVALID'
   | 'THEME_CSS_INVALID'
   | 'THEME_SECURITY_VIOLATION'
   | 'THEME_INSTALL_FAILED'
diff --git a/frontend/src/features/agent/AgentView.vue b/frontend/src/features/agent/AgentView.vue
index 279a21a..2b468a6 100644
--- a/frontend/src/features/agent/AgentView.vue
+++ b/frontend/src/features/agent/AgentView.vue
@@ -8,12 +8,14 @@ import TraceTimeline from './TraceTimeline.vue'
 import type { AgentEvent } from '@/contracts'
 import { localizeDetails, permissionLabel, runStatusLabel, toolLabel } from './labels'
 import ToolOption from './ToolOption.vue'
+import { useCitationNavigation } from '@/composables/useCitationNavigation'
 
 const route = useRoute()
 const router = useRouter()
 const agentStore = useAgentStore()
 const providerStore = useProviderStore()
 const skillStore = useSkillStore()
+const { openCitation } = useCitationNavigation()
 const pageError = ref('')
 const form = reactive({
   input: '', provider_id: '', model: '', skill_id: '', max_steps: 10,
@@ -71,6 +73,16 @@ function eventText(event: AgentEvent) {
   if (text) return String(text)
   return ''
 }
+
+/** Trace 里点引用 → 打开对应笔记块。失败原因要让用户看到，不能静默。 */
+async function handleOpenCitation(data: Record<string, unknown>) {
+  pageError.value = ''
+  try {
+    await openCitation(data)
+  } catch (error) {
+    pageError.value = error instanceof Error ? error.message : '引用定位失败'
+  }
+}
 </script>
 
 <template>
@@ -118,7 +130,11 @@ function eventText(event: AgentEvent) {
           <button class="button-secondary" @click="agentStore.loadRun(agentStore.activeRunId!)">重新加载</button>
         </div>
       </div>
-      <TraceTimeline :events="agentStore.events" :run-status="agentStore.activeRun?.status" />
+      <TraceTimeline
+        :events="agentStore.events"
+        :run-status="agentStore.activeRun?.status"
+        @open-citation="handleOpenCitation"
+      />
     </div>
 
     <div v-if="agentStore.permissionRequest" class="modal-backdrop">
diff --git a/frontend/src/features/agent/TraceTimeline.spec.ts b/frontend/src/features/agent/TraceTimeline.spec.ts
new file mode 100644
index 0000000..e9aaedb
--- /dev/null
+++ b/frontend/src/features/agent/TraceTimeline.spec.ts
@@ -0,0 +1,170 @@
+// @vitest-environment happy-dom
+import { mount } from '@vue/test-utils'
+import { describe, expect, it } from 'vitest'
+import type { AgentEvent, AgentEventType } from '@/contracts'
+import TraceTimeline from './TraceTimeline.vue'
+
+let sequence = 0
+
+function event(type: AgentEventType, data: Record<string, unknown> = {}): AgentEvent {
+  return {
+    event: type,
+    sequence: ++sequence,
+    run_id: 'run-1',
+    data,
+    timestamp: '2026-01-01T00:00:00.000Z',
+  }
+}
+
+/** 一次带工具调用的运行：模型调用有子节点，Usage / 引用是叶子。 */
+function sampleEvents(): AgentEvent[] {
+  return [
+    event('RunStarted'),
+    event('ModelCallStarted', { model_call_id: 'mc-1', model: 'mock-1' }),
+    event('ModelCallCompleted', { model_call_id: 'mc-1', duration_ms: 800 }),
+    event('ToolCall', { tool_call_id: 'tc-1', name: 'read_note', parent_model_call_id: 'mc-1' }),
+    event('ToolResult', { tool_call_id: 'tc-1', name: 'read_note', success: true, parent_model_call_id: 'mc-1' }),
+    event('Citation', { file_path: 'notes/a.md', block_id: 'blk-1', heading_path: 'A > B' }),
+    event('RunCompleted'),
+  ]
+}
+
+function mountTree(events: AgentEvent[]) {
+  const wrapper = mount(TraceTimeline, { props: { events } })
+  return wrapper
+}
+
+async function switchToTree(wrapper: ReturnType<typeof mountTree>) {
+  const treeButton = wrapper.findAll('button').find((b) => b.text() === '树形')
+  await treeButton!.trigger('click')
+  return wrapper
+}
+
+describe('TraceTimeline 树形视图', () => {
+  it('叶子节点点击后能看到自己的数据', async () => {
+    // 回归：之前行的 click 是 `children.length && toggleExpand(id)`，
+    // 而详情 v-if 又要求 children.length === 0 —— 两个条件互斥，
+    // 叶子节点永远打不开详情。
+    const wrapper = await switchToTree(mountTree(sampleEvents()))
+
+    const rows = wrapper.findAll('.node-row')
+    const citationRow = rows.find((row) => row.text().includes('引用来源'))
+    expect(citationRow).toBeTruthy()
+    expect(wrapper.find('.node-detail').exists()).toBe(false)
+
+    await citationRow!.trigger('click')
+
+    const detail = wrapper.find('.node-detail')
+    expect(detail.exists()).toBe(true)
+    expect(detail.text()).toContain('notes/a.md')
+  })
+
+  it('有子节点的节点也能查看自己的数据，不只是展开子树', async () => {
+    const wrapper = await switchToTree(mountTree(sampleEvents()))
+
+    const modelRow = wrapper.findAll('.node-row').find((row) => row.text().includes('模型调用'))
+    await modelRow!.trigger('click')
+
+    const detail = wrapper.find('.node-detail')
+    expect(detail.exists()).toBe(true)
+    expect(detail.text()).toContain('mc-1')
+  })
+
+  it('展开箭头只切子树，不会连带打开详情', async () => {
+    const wrapper = await switchToTree(mountTree(sampleEvents()))
+
+    // 初始只有顶层节点：运行开始、模型调用、引用、运行完成
+    expect(wrapper.findAll('.node-row')).toHaveLength(4)
+
+    const arrow = wrapper.find('.expand-icon:not(.placeholder)')
+    expect(arrow.exists()).toBe(true)
+    await arrow.trigger('click')
+
+    // 子节点出现，但没有任何详情面板被打开
+    expect(wrapper.findAll('.node-row')).toHaveLength(5)
+    expect(wrapper.text()).toContain('工具调用：read_note')
+    expect(wrapper.find('.node-detail').exists()).toBe(false)
+  })
+
+  it('键盘 Enter 与空格可以打开详情', async () => {
+    const wrapper = await switchToTree(mountTree(sampleEvents()))
+    const row = wrapper.findAll('.node-row').find((r) => r.text().includes('运行开始'))!
+
+    await row.trigger('keydown.enter')
+    expect(wrapper.find('.node-detail').exists()).toBe(true)
+
+    await row.trigger('keydown.space')
+    expect(wrapper.find('.node-detail').exists()).toBe(false)
+  })
+
+  it('行的 aria-expanded 跟随详情开合', async () => {
+    const wrapper = await switchToTree(mountTree(sampleEvents()))
+    const row = wrapper.findAll('.node-row').find((r) => r.text().includes('运行开始'))!
+
+    expect(row.attributes('aria-expanded')).toBe('false')
+    await row.trigger('click')
+    expect(row.attributes('aria-expanded')).toBe('true')
+  })
+
+  it('引用节点带「定位」按钮，点击后抛出 open-citation 且不打开详情', async () => {
+    const wrapper = await switchToTree(mountTree(sampleEvents()))
+
+    const locate = wrapper.find('.node-locate')
+    expect(locate.exists()).toBe(true)
+    await locate.trigger('click')
+
+    const emitted = wrapper.emitted('open-citation')
+    expect(emitted).toHaveLength(1)
+    expect((emitted![0][0] as Record<string, unknown>).file_path).toBe('notes/a.md')
+    // @click.stop 生效，行的详情不该被顺带打开
+    expect(wrapper.find('.node-detail').exists()).toBe(false)
+  })
+
+  it('引用缺少 file_path 时不显示定位按钮', async () => {
+    const wrapper = await switchToTree(mountTree([event('Citation', { heading_path: 'A' })]))
+
+    expect(wrapper.find('.node-locate').exists()).toBe(false)
+  })
+})
+
+describe('TraceTimeline 时间线视图', () => {
+  it('Usage 卡片读后端真实字段 token_usage', () => {
+    // 后端只发累计的 token_usage（runtime.py），没有 input/output/total_tokens。
+    const wrapper = mountTree([event('Usage', { token_usage: 1024 })])
+
+    expect(wrapper.find('.event-usage').text()).toContain('1024')
+  })
+
+  it('Usage 缺字段时显示占位符而不是 undefined', () => {
+    const wrapper = mountTree([event('Usage', {})])
+
+    const text = wrapper.find('.event-usage').text()
+    expect(text).toContain('-')
+    expect(text).not.toContain('undefined')
+  })
+
+  it('点击引用卡片抛出 open-citation', async () => {
+    const wrapper = mountTree([event('Citation', { file_path: 'notes/a.md', heading_path: 'A' })])
+
+    await wrapper.find('.event-citation').trigger('click')
+
+    expect(wrapper.emitted('open-citation')).toHaveLength(1)
+  })
+
+  it('工具调用统计按 ToolResult 显示最终状态，不停在 running', () => {
+    const wrapper = mountTree([
+      event('ToolCall', { tool_call_id: 'tc-9', name: 'write_note' }),
+      event('ToolResult', { tool_call_id: 'tc-9', name: 'write_note', success: false, error_code: 'TOOL_DENIED' }),
+    ])
+
+    const item = wrapper.find('.tool-call-item')
+    expect(item.classes()).toContain('error')
+    expect(item.text()).toContain('失败')
+  })
+
+  it('没有事件时显示等待态', () => {
+    const wrapper = mountTree([])
+
+    expect(wrapper.find('.empty-state').text()).toContain('等待执行轨迹')
+  })
+})
diff --git a/frontend/src/features/agent/TraceTimeline.vue b/frontend/src/features/agent/TraceTimeline.vue
index 3c93609..f0924bf 100644
--- a/frontend/src/features/agent/TraceTimeline.vue
+++ b/frontend/src/features/agent/TraceTimeline.vue
@@ -13,7 +13,11 @@ const emit = defineEmits<{
   (e: 'open-citation', data: Record<string, unknown>): void
 }>()
 
+// 子树展开与「查看本节点数据」是两件事：
+// 叶子节点没有子树，但依然需要能看自己的 data，
+// 所以两个状态集合分开维护，不能共用一个 expanded。
 const expandedNodes = ref<Set<string>>(new Set())
+const detailNodes = ref<Set<string>>(new Set())
 const viewMode = ref<'timeline' | 'tree'>('timeline')
 const showDetails = ref(true)
 
@@ -32,18 +36,32 @@ const summaryStats = computed(() => {
   }
 })
 
-function toggleExpand(nodeId: string) {
-  if (expandedNodes.value.has(nodeId)) {
-    expandedNodes.value.delete(nodeId)
+function toggle(set: Set<string>, nodeId: string) {
+  if (set.has(nodeId)) {
+    set.delete(nodeId)
   } else {
-    expandedNodes.value.add(nodeId)
+    set.add(nodeId)
   }
 }
 
+/** 展开/收起子树，只对有 children 的节点有意义。 */
+function toggleExpand(nodeId: string) {
+  toggle(expandedNodes.value, nodeId)
+}
+
 function isExpanded(nodeId: string): boolean {
   return expandedNodes.value.has(nodeId)
 }
 
+/** 查看/隐藏本节点自身的数据，任何节点（含叶子）都可用。 */
+function toggleDetail(nodeId: string) {
+  toggle(detailNodes.value, nodeId)
+}
+
+function isDetailOpen(nodeId: string): boolean {
+  return detailNodes.value.has(nodeId)
+}
+
 function formatTime(iso: string): string {
   const d = new Date(iso)
   return d.toLocaleTimeString('zh-CN', { hour12: false }) + '.' + String(d.getMilliseconds()).padStart(3, '0')
@@ -83,6 +101,11 @@ function getNodeStatusClass(node: TraceNode): string {
   }
 }
 
+/** 引用节点带 file_path 才能定位到笔记块。 */
+function isCitationNode(node: TraceNode): boolean {
+  return node.type === 'citation' && typeof node.data.file_path === 'string'
+}
+
 function prettyData(data: Record<string, unknown>): string {
   const filtered = { ...data }
   if (typeof filtered.output === 'string' && filtered.output.length > 500) {
@@ -147,10 +170,10 @@ const flatTrace = computed(() => flatNodes(traceNodes.value))
           v-for="event in events"
           :key="event.sequence"
           class="event-card"
-          :class="{ expanded: isExpanded(`event-${event.sequence}`) }"
+          :class="{ expanded: isDetailOpen(`event-${event.sequence}`) }"
         >
           <div class="event-dot" :class="`dot-${event.event}`"></div>
-          <div class="event-content" @click="toggleExpand(`event-${event.sequence}`)">
+          <div class="event-content" @click="toggleDetail(`event-${event.sequence}`)">
             <div class="event-header">
               <span class="event-badge" :class="{
                 success: event.event === 'RunCompleted' || event.event === 'ModelCallCompleted',
@@ -170,9 +193,7 @@ const flatTrace = computed(() => flatNodes(traceNodes.value))
               </span>
             </div>
             <div v-if="event.event === 'Usage'" class="event-usage">
-              <span>输入: {{ event.data.input_tokens ?? '-' }} tokens</span>
-              <span>输出: {{ event.data.output_tokens ?? '-' }} tokens</span>
-              <span class="total">总计: {{ event.data.total_tokens ?? '-' }} tokens</span>
+              <span class="total">累计: {{ event.data.token_usage ?? '-' }} tokens</span>
             </div>
             <div v-if="event.event === 'Citation'" class="event-citation" @click.stop="emit('open-citation', event.data)">
               <span class="cite-icon">📎</span>
@@ -183,7 +204,7 @@ const flatTrace = computed(() => flatNodes(traceNodes.value))
               <code>{{ event.data.permission as string }}</code>
             </div>
           </div>
-          <div v-if="isExpanded(`event-${event.sequence}`) && showDetails" class="event-detail">
+          <div v-if="isDetailOpen(`event-${event.sequence}`) && showDetails" class="event-detail">
             <details open>
               <summary>完整数据</summary>
               <pre>{{ prettyData(event.data) }}</pre>
@@ -199,10 +220,25 @@ const flatTrace = computed(() => flatNodes(traceNodes.value))
 
     <div v-else class="tree-view">
       <div v-for="item in flatTrace" :key="item.node.id" class="tree-node" :style="{ paddingLeft: `${item.depth * 24 + 8}px` }">
-        <div class="node-row" :class="getNodeStatusClass(item.node)" @click="item.node.children.length && toggleExpand(item.node.id)">
-          <span v-if="item.node.children.length" class="expand-icon">
+        <div
+          class="node-row"
+          :class="[getNodeStatusClass(item.node), { 'detail-open': isDetailOpen(item.node.id) }]"
+          role="button"
+          tabindex="0"
+          :aria-expanded="isDetailOpen(item.node.id)"
+          @click="toggleDetail(item.node.id)"
+          @keydown.enter.prevent="toggleDetail(item.node.id)"
+          @keydown.space.prevent="toggleDetail(item.node.id)"
+        >
+          <button
+            v-if="item.node.children.length"
+            type="button"
+            class="expand-icon"
+            :aria-label="isExpanded(item.node.id) ? '收起子调用' : `展开 ${item.node.children.length} 个子调用`"
+            @click.stop="toggleExpand(item.node.id)"
+          >
             {{ isExpanded(item.node.id) ? '▼' : '▶' }}
-          </span>
+          </button>
           <span v-else class="expand-icon placeholder"></span>
           <span class="node-icon">{{ getNodeIcon(item.node.type) }}</span>
           <span class="node-title">{{ item.node.title }}</span>
@@ -210,8 +246,16 @@ const flatTrace = computed(() => flatNodes(traceNodes.value))
           <span v-if="item.node.duration_ms != null" class="node-duration">
             {{ formatDuration(item.node.duration_ms) }}
           </span>
+          <button
+            v-if="isCitationNode(item.node)"
+            type="button"
+            class="node-locate"
+            @click.stop="emit('open-citation', item.node.data)"
+          >
+            定位
+          </button>
         </div>
-        <div v-if="isExpanded(item.node.id) && item.node.children.length === 0 && showDetails" class="node-detail">
+        <div v-if="isDetailOpen(item.node.id) && showDetails" class="node-detail">
           <pre>{{ prettyData(item.node.data) }}</pre>
         </div>
       </div>
@@ -533,12 +577,18 @@ const flatTrace = computed(() => flatNodes(traceNodes.value))
   align-items: center;
   gap: var(--space-xs);
   padding: 8px 12px;
-  cursor: default;
+  cursor: pointer;
   font-size: var(--font-size-sm);
   transition: background-color var(--motion-fast);
 }
 
 .node-row:hover { background: var(--color-background-hover); }
+.node-row:focus-visible {
+  outline: 2px solid var(--color-accent-primary);
+  outline-offset: -2px;
+}
+
+.node-row.detail-open { background: var(--color-background-secondary); }
 
 .node-row.status-running {
   background: var(--color-info-soft);
@@ -550,6 +600,9 @@ const flatTrace = computed(() => flatNodes(traceNodes.value))
 
 .expand-icon {
   width: 16px;
+  padding: 0;
+  background: none;
+  border: none;
   font-size: 10px;
   color: var(--color-text-tertiary);
   cursor: pointer;
@@ -558,6 +611,19 @@ const flatTrace = computed(() => flatNodes(traceNodes.value))
 
 .expand-icon.placeholder { visibility: hidden; }
 
+.node-locate {
+  padding: 1px 8px;
+  border: 1px solid var(--color-border-default);
+  border-radius: var(--radius-full);
+  background: var(--color-surface-primary);
+  color: var(--color-accent-primary);
+  font-size: 11px;
+  cursor: pointer;
+  flex-shrink: 0;
+}
+
+.node-locate:hover { border-color: var(--color-accent-primary); }
+
 .node-icon {
   font-size: 14px;
   width: 20px;
diff --git a/frontend/src/features/chat/ChatView.vue b/frontend/src/features/chat/ChatView.vue
index 17912a8..696fb37 100644
--- a/frontend/src/features/chat/ChatView.vue
+++ b/frontend/src/features/chat/ChatView.vue
@@ -1,20 +1,16 @@
 <script setup lang="ts">
 import { computed, onBeforeUnmount, onMounted, ref, watch } from 'vue'
-import { useRouter } from 'vue-router'
 import type { Citation } from '@/contracts'
 import { useChatStore } from '@/stores/chat'
-import { useEditorStore } from '@/stores/editor'
 import { useProviderStore } from '@/stores/provider'
 import { useSkillStore } from '@/stores/skill'
-import { useWorkspaceStore } from '@/stores/workspace'
 import MarkdownContent from '@/components/common/MarkdownContent.vue'
+import { useCitationNavigation } from '@/composables/useCitationNavigation'
 
 const chatStore = useChatStore()
 const providerStore = useProviderStore()
 const skillStore = useSkillStore()
-const workspaceStore = useWorkspaceStore()
-const editorStore = useEditorStore()
-const router = useRouter()
+const { openCitation } = useCitationNavigation()
 const loadError = ref('')
 let disposed = false
 onBeforeUnmount(() => { disposed = true })
@@ -51,11 +47,13 @@ watch(() => chatStore.selectedProviderId, async (providerId) => {
 
 function send() { void chatStore.sendMessage(chatStore.inputText) }
 
-async function openCitation(citation: Citation) {
-  await editorStore.loadFile(citation.file_path)
-  workspaceStore.openFile(citation.file_path)
-  editorStore.highlightBlock(citation.block_id)
-  await router.push('/workspace')
+async function openCitationCard(citation: Citation) {
+  loadError.value = ''
+  try {
+    await openCitation(citation)
+  } catch (error) {
+    loadError.value = error instanceof Error ? error.message : '引用定位失败'
+  }
 }
 </script>
 
@@ -80,7 +78,7 @@ async function openCitation(citation: Citation) {
           <div v-else-if="chatStore.isStreaming" class="message-content">正在思考…</div>
           <div v-if="message.tool_calls?.length" class="tool-calls"><div v-for="call in message.tool_calls" :key="call.tool_call_id" class="item-card"><span class="badge info">{{ call.status }}</span><strong>{{ call.name }}</strong><pre>{{ JSON.stringify(call.parameters, null, 2) }}</pre></div></div>
           <div v-if="message.citations?.length" class="citations">
-            <button v-for="(citation, index) in message.citations" :key="citation.block_id" class="citation-card" @click="openCitation(citation)">
+            <button v-for="(citation, index) in message.citations" :key="citation.block_id" class="citation-card" @click="openCitationCard(citation)">
               <span class="badge info">{{ index + 1 }}</span><span><strong>{{ citation.heading_path || citation.file_path }}</strong><small>{{ citation.content }}</small></span>
             </button>
           </div>
diff --git a/frontend/src/features/plugins/PluginCommandPanel.vue b/frontend/src/features/plugins/PluginCommandPanel.vue
new file mode 100644
index 0000000..4fbb81a
--- /dev/null
+++ b/frontend/src/features/plugins/PluginCommandPanel.vue
@@ -0,0 +1,235 @@
+<script setup lang="ts">
+import { Refresh, VideoPlay } from '@element-plus/icons-vue'
+import { ref, watch } from 'vue'
+import { useRouter } from 'vue-router'
+import AppIcon from '@/components/common/AppIcon.vue'
+import type { Plugin, PluginCommand } from '@/contracts'
+import * as pluginService from '@/services/pluginService'
+import {
+  applyCommandEffect,
+  cleanArguments,
+  coerceArgument,
+  commandFields,
+  initialArguments,
+  missingRequiredFields,
+  type CommandField,
+} from '@/services/pluginCommandForm'
+import { useEditorStore } from '@/stores/editor'
+import { usePluginStore } from '@/stores/plugin'
+import { useWorkspaceStore } from '@/stores/workspace'
+
+const props = defineProps<{ plugin: Plugin }>()
+const emit = defineEmits<{ (e: 'refresh-settings'): void }>()
+
+const router = useRouter()
+const pluginStore = usePluginStore()
+const editorStore = useEditorStore()
+const workspaceStore = useWorkspaceStore()
+
+const commands = ref<PluginCommand[]>([])
+const argumentsByCommand = ref<Record<string, Record<string, unknown>>>({})
+const loading = ref(false)
+const busy = ref('')
+const error = ref('')
+const notice = ref('')
+let loadVersion = 0
+
+watch(() => props.plugin.plugin_id, () => { void load() }, { immediate: true })
+
+async function load() {
+  const version = ++loadVersion
+  const pluginId = props.plugin.plugin_id
+  error.value = ''
+  loading.value = true
+  try {
+    const all = await pluginService.listPluginCommands()
+    if (version !== loadVersion) return
+    const mine = all.filter((command) => command.plugin_id === pluginId)
+    commands.value = mine
+    // 重新加载会重置表单：schema 可能已经变了，留着旧值会送出非法参数。
+    const next: Record<string, Record<string, unknown>> = {}
+    for (const command of mine) next[command.command_id] = initialArguments(command)
+    argumentsByCommand.value = next
+  } catch (reason) {
+    if (version === loadVersion) error.value = reason instanceof Error ? reason.message : '命令加载失败'
+  } finally {
+    if (version === loadVersion) loading.value = false
+  }
+}
+
+function argsOf(commandId: string): Record<string, unknown> {
+  return argumentsByCommand.value[commandId] ?? {}
+}
+
+function fieldValue(commandId: string, field: CommandField): string {
+  const value = argsOf(commandId)[field.key]
+  if (value === undefined || value === null) return ''
+  return String(value)
+}
+
+function updateArgument(commandId: string, field: CommandField, raw: string) {
+  const target = argumentsByCommand.value[commandId] ??= {}
+  target[field.key] = coerceArgument(field, raw)
+}
+
+/**
+ * when 条件求值。缺少上下文时禁用而不是硬跑 ——
+ * 插件详情页没有编辑器选区，不冒充。
+ */
+function commandAvailable(command: PluginCommand): boolean {
+  if (!command.enabled) return false
+  return command.when.every((condition) => {
+    if (condition === 'workspace.has_vault') return Boolean(workspaceStore.vaultId)
+    if (condition === 'editor.has_note') return Boolean(editorStore.currentNoteId)
+    if (condition === 'editor.has_selection') return false
+    return false
+  })
+}
+
+function missing(command: PluginCommand): CommandField[] {
+  return missingRequiredFields(command, argsOf(command.command_id))
+}
+
+function canRun(command: PluginCommand): boolean {
+  return commandAvailable(command) && missing(command).length === 0 && busy.value !== command.command_id
+}
+
+async function execute(command: PluginCommand) {
+  const unfilled = missing(command)
+  if (unfilled.length) {
+    error.value = `请先填写必填参数：${unfilled.map((f) => f.title).join('、')}`
+    return
+  }
+  busy.value = command.command_id
+  error.value = ''
+  notice.value = ''
+  try {
+    const result = await pluginService.executePluginCommand(
+      command.command_id,
+      cleanArguments(argsOf(command.command_id)),
+      {
+        vault_id: workspaceStore.hasVault ? workspaceStore.vaultId : null,
+        note_id: editorStore.currentNoteId,
+        file_path: editorStore.currentFilePath,
+        selection: null,
+      },
+    )
+    await applyCommandEffect(result.effect, {
+      navigate: (path) => router.push(path),
+      refresh: async (scope) => {
+        if (scope === 'commands') await load()
+        else if (scope === 'plugins') await pluginStore.loadPlugins()
+        else if (scope === 'workspace') await workspaceStore.refreshFileTree()
+        else emit('refresh-settings')
+      },
+      notify: (text) => { notice.value = text },
+    })
+  } catch (reason) {
+    error.value = reason instanceof Error ? reason.message : '命令执行失败'
+  } finally {
+    busy.value = ''
+  }
+}
+</script>
+
+<template>
+  <div class="command-panel">
+    <div class="section-head">
+      <div>
+        <h3>Plugin 命令</h3>
+        <p>执行该 Plugin 注册的受控 Command Contribution；参数表单由后端声明的 JSON Schema 生成。</p>
+      </div>
+      <button class="button-secondary" :disabled="loading" @click="load">
+        <AppIcon :icon="Refresh" :size="15" />刷新
+      </button>
+    </div>
+
+    <div v-if="error" class="error-banner">{{ error }}</div>
+    <div v-if="notice" class="notice-banner">{{ notice }}</div>
+
+    <div v-if="commands.length" class="command-list">
+      <article v-for="command in commands" :key="command.command_id" class="item-card command-card">
+        <div class="command-head">
+          <div>
+            <strong>{{ command.title }}</strong>
+            <p>{{ command.description || command.command_id }}</p>
+          </div>
+          <span
+            class="badge"
+            :class="{
+              success: commandAvailable(command),
+              warning: command.enabled && !commandAvailable(command),
+            }"
+          >{{ commandAvailable(command) ? '可执行' : command.enabled ? '缺少上下文' : '不可用' }}</span>
+        </div>
+
+        <div v-if="commandFields(command).length" class="command-fields">
+          <label v-for="field in commandFields(command)" :key="field.key" class="field">
+            <span>
+              {{ field.title }}
+              <em v-if="field.required">必填</em>
+            </span>
+            <select
+              v-if="field.enum"
+              class="select"
+              :value="fieldValue(command.command_id, field)"
+              @change="updateArgument(command.command_id, field, ($event.target as HTMLSelectElement).value)"
+            >
+              <option value="">请选择</option>
+              <option v-for="option in field.enum" :key="option" :value="option">{{ option }}</option>
+            </select>
+            <select
+              v-else-if="field.type === 'boolean'"
+              class="select"
+              :value="fieldValue(command.command_id, field)"
+              @change="updateArgument(command.command_id, field, ($event.target as HTMLSelectElement).value)"
+            >
+              <option value="false">否</option>
+              <option value="true">是</option>
+            </select>
+            <input
+              v-else
+              class="input"
+              :type="field.type === 'number' || field.type === 'integer' ? 'number' : 'text'"
+              :required="field.required"
+              :value="fieldValue(command.command_id, field)"
+              @input="updateArgument(command.command_id, field, ($event.target as HTMLInputElement).value)"
+            />
+            <small v-if="field.description">{{ field.description }}</small>
+          </label>
+        </div>
+
+        <p v-if="commandAvailable(command) && missing(command).length" class="missing-hint">
+          待填写：{{ missing(command).map((f) => f.title).join('、') }}
+        </p>
+
+        <button
+          class="button-primary command-run"
+          :disabled="!canRun(command)"
+          @click="execute(command)"
+        >
+          <AppIcon :icon="VideoPlay" :size="15" />
+          {{ busy === command.command_id ? '执行中…' : '执行命令' }}
+        </button>
+      </article>
+    </div>
+    <div v-else-if="!loading" class="empty-state">
+      <div><strong>没有可用命令</strong><p>启用 Plugin 后，已注册的命令会出现在这里。</p></div>
+    </div>
+  </div>
+</template>
+
+<style scoped>
+.command-panel { min-height: 220px; }
+.section-head, .command-head { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--space-md); margin-bottom: var(--space-lg); }
+.section-head p, .command-head p { margin-top: var(--space-xs); color: var(--color-text-tertiary); font-size: var(--font-size-sm); }
+.section-head button, .command-run { display: inline-flex; align-items: center; gap: var(--space-xs); }
+.command-list, .command-card { display: grid; gap: var(--space-sm); }
+.command-card:hover { transform: none; }
+.command-fields { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: var(--space-md); }
+.command-fields small { color: var(--color-text-tertiary); font-size: var(--font-size-xs); }
+.command-run { justify-self: end; }
+.missing-hint { color: var(--color-warning); font-size: var(--font-size-sm); }
+em { margin-left: var(--space-xs); color: var(--color-error); font-size: var(--font-size-xs); font-style: normal; }
+@media (max-width: 800px) { .command-fields { grid-template-columns: 1fr; } }
+</style>
diff --git a/frontend/src/features/plugins/PluginMcpPanel.vue b/frontend/src/features/plugins/PluginMcpPanel.vue
index 7cc48aa..34ac951 100644
--- a/frontend/src/features/plugins/PluginMcpPanel.vue
+++ b/frontend/src/features/plugins/PluginMcpPanel.vue
@@ -1,27 +1,20 @@
 <script setup lang="ts">
-import { Key, Refresh, VideoPlay } from '@element-plus/icons-vue'
+import { Key, Refresh } from '@element-plus/icons-vue'
 import { computed, ref, watch } from 'vue'
-import { useRouter } from 'vue-router'
 import AppIcon from '@/components/common/AppIcon.vue'
-import type { Plugin, PluginCommand, PluginHostStatus, PluginSettingField, PluginSettingsSchema } from '@/contracts'
+import PluginCommandPanel from './PluginCommandPanel.vue'
+import type { Plugin, PluginHostStatus, PluginSettingField, PluginSettingsSchema } from '@/contracts'
 import * as pluginService from '@/services/pluginService'
-import { useEditorStore } from '@/stores/editor'
 import { usePluginStore } from '@/stores/plugin'
-import { useWorkspaceStore } from '@/stores/workspace'
 
 const props = defineProps<{ plugin: Plugin }>()
 const pluginStore = usePluginStore()
-const editorStore = useEditorStore()
-const workspaceStore = useWorkspaceStore()
-const router = useRouter()
 const activeTab = ref<'host' | 'settings' | 'commands'>('host')
 const host = ref<PluginHostStatus | null>(null)
 const schema = ref<PluginSettingsSchema | null>(null)
 const values = ref<Record<string, unknown>>({})
 // 明文只停留在组件内存，提交后立即清空。
 const secrets = ref<Record<string, string>>({})
-const commands = ref<PluginCommand[]>([])
-const argumentsByCommand = ref<Record<string, Record<string, unknown>>>({})
 const loading = ref(false)
 const busy = ref('')
 const error = ref('')
@@ -42,7 +35,6 @@ watch(() => props.plugin.plugin_id, () => {
   schema.value = null
   values.value = {}
   secrets.value = {}
-  commands.value = []
   void loadActive()
 }, { immediate: true })
 
@@ -72,19 +64,20 @@ async function loadActive() {
         values.value = { ...loadedSchema.values }
       }
     }
-    if (tab === 'commands') {
-      const loadedCommands = (await pluginService.listPluginCommands()).filter((command) => command.plugin_id === pluginId)
-      if (version === loadVersion) {
-        commands.value = loadedCommands
-        for (const command of loadedCommands) argumentsByCommand.value[command.command_id] = {}
-      }
-    }
+    // commands 由 PluginCommandPanel 自己加载。
   } catch (reason) {
     if (version === loadVersion) feedback(message(reason, 'MCP 数据加载失败'))
   } finally {
     if (version === loadVersion) loading.value = false
   }
 }
+
+/** 命令返回 refresh:settings 时重新拉设置。 */
+async function reloadSettings() {
+  const loadedSchema = await pluginService.getPluginSettings(props.plugin.plugin_id)
+  schema.value = loadedSchema
+  values.value = { ...loadedSchema.values }
+}
 async function restartHost() {
   busy.value = 'host'
   feedback()
@@ -131,54 +124,6 @@ async function deleteSecret(field: PluginSettingField) {
     notice.value = field.label + '已删除。'
   } catch (reason) { feedback(message(reason, '密钥删除失败')) } finally { busy.value = '' }
 }
-function properties(command: PluginCommand): Record<string, Record<string, unknown>> {
-  const result = command.parameters.properties
-  return result && typeof result === 'object' && !Array.isArray(result) ? result as Record<string, Record<string, unknown>> : {}
-}
-function required(command: PluginCommand, key: string) {
-  return Array.isArray(command.parameters.required) && command.parameters.required.includes(key)
-}
-function commandAvailable(command: PluginCommand) {
-  if (!command.enabled) return false
-  return command.when.every((condition) => {
-    if (condition === 'workspace.has_vault') return Boolean(workspaceStore.vaultId)
-    if (condition === 'editor.has_note') return Boolean(editorStore.currentNoteId)
-    // Plugin 详情页不冒充编辑器选区；选区命令应从命令面板或编辑器挂载点执行。
-    if (condition === 'editor.has_selection') return false
-    return false
-  })
-}
-function updateArgument(commandId: string, key: string, raw: string, definition: Record<string, unknown>) {
-  const target = argumentsByCommand.value[commandId] ??= {}
-  if (definition.type === 'number' || definition.type === 'integer') target[key] = raw === '' ? undefined : Number(raw)
-  else if (definition.type === 'boolean') target[key] = raw === 'true'
-  else target[key] = raw
-}
-async function execute(command: PluginCommand) {
-  busy.value = command.command_id
-  feedback()
-  try {
-    const result = await pluginService.executePluginCommand(command.command_id, argumentsByCommand.value[command.command_id] ?? {}, {
-      vault_id: workspaceStore.hasVault ? workspaceStore.vaultId : null,
-      note_id: editorStore.currentNoteId,
-      file_path: editorStore.currentFilePath,
-      selection: null,
-    })
-    if (result.effect.type === 'notification') notice.value = result.effect.payload.message
-    else if (result.effect.type === 'job') notice.value = '后台任务已创建：' + result.effect.payload.job_id
-    else if (result.effect.type === 'navigate') {
-      const routes: Record<string, string> = {
-        'vault-entry': '/', workspace: '/workspace', search: '/search', chat: '/chat',
-        agent: '/agent/runs', tasks: '/tasks', skills: '/extensions/skills',
-        plugins: '/extensions/plugins', themes: '/themes', settings: '/settings',
-      }
-      await router.push(routes[result.effect.payload.route])
-    } else if (result.effect.type === 'refresh') {
-      await loadActive()
-      notice.value = '相关数据已刷新。'
-    } else notice.value = '命令执行完成。'
-  } catch (reason) { feedback(message(reason, '命令执行失败')) } finally { busy.value = '' }
-}
 </script>
 
 <template>
@@ -222,17 +167,7 @@ async function execute(command: PluginCommand) {
     </div>
 
     <div v-else class="mcp-section">
-      <div class="section-head"><div><h3>Plugin 命令</h3><p>执行该 Plugin 注册的受控 Command Contribution。</p></div><button class="button-secondary" :disabled="loading" @click="loadActive"><AppIcon :icon="Refresh" :size="15" />刷新</button></div>
-      <div v-if="commands.length" class="command-list">
-        <article v-for="command in commands" :key="command.command_id" class="item-card command-card">
-          <div class="command-head"><div><strong>{{ command.title }}</strong><p>{{ command.description || command.command_id }}</p></div><span class="badge" :class="{ success: commandAvailable(command), warning: command.enabled && !commandAvailable(command) }">{{ commandAvailable(command) ? '可执行' : command.enabled ? '缺少上下文' : '不可用' }}</span></div>
-          <div v-if="Object.keys(properties(command)).length" class="command-fields">
-            <label v-for="(definition, key) in properties(command)" :key="key" class="field"><span>{{ String(definition.title || key) }}<em v-if="required(command, key)">必填</em></span><select v-if="Array.isArray(definition.enum)" class="select" @change="updateArgument(command.command_id, key, ($event.target as HTMLSelectElement).value, definition)"><option value="">请选择</option><option v-for="option in definition.enum" :key="String(option)" :value="String(option)">{{ option }}</option></select><select v-else-if="definition.type === 'boolean'" class="select" @change="updateArgument(command.command_id, key, ($event.target as HTMLSelectElement).value, definition)"><option value="false">否</option><option value="true">是</option></select><input v-else class="input" :type="definition.type === 'number' || definition.type === 'integer' ? 'number' : 'text'" @input="updateArgument(command.command_id, key, ($event.target as HTMLInputElement).value, definition)"></label>
-          </div>
-          <button class="button-primary command-run" :disabled="!commandAvailable(command) || busy === command.command_id" @click="execute(command)"><AppIcon :icon="VideoPlay" :size="15" />{{ busy === command.command_id ? '执行中…' : '执行命令' }}</button>
-        </article>
-      </div>
-      <div v-else-if="!loading" class="empty-state"><div><strong>没有可用命令</strong><p>启用 Plugin 后，已注册的命令会出现在这里。</p></div></div>
+      <PluginCommandPanel :plugin="plugin" @refresh-settings="reloadSettings" />
     </div>
   </section>
 </template>
diff --git a/frontend/src/features/plugins/PluginsView.vue b/frontend/src/features/plugins/PluginsView.vue
index 4fc6c4c..2e289a6 100644
--- a/frontend/src/features/plugins/PluginsView.vue
+++ b/frontend/src/features/plugins/PluginsView.vue
@@ -2,18 +2,17 @@
 import { Connection } from '@element-plus/icons-vue'
 import AppIcon from '@/components/common/AppIcon.vue'
 import PluginMcpPanel from './PluginMcpPanel.vue'
+import PluginCommandPanel from './PluginCommandPanel.vue'
 import PluginSettingsPanel from './PluginSettingsPanel.vue'
 import { computed, onMounted, ref, watch } from 'vue'
 import { usePluginStore } from '@/stores/plugin'
 import * as pluginService from '@/services/pluginService'
-import type { PluginCommand, PluginCommandEffect } from '@/contracts'
+import type { PluginCommand } from '@/contracts'
 
 const pluginStore = usePluginStore()
 const actionError = ref('')
 const activeTab = ref<'info' | 'settings' | 'commands'>('info')
 const pluginCommands = ref<PluginCommand[]>([])
-const commandOutput = ref<Record<string, string>>({})
-const isExecutingCommand = ref<string | null>(null)
 
 onMounted(() => { void pluginStore.loadPlugins() })
 
@@ -21,8 +20,8 @@ watch(() => pluginStore.selectedPluginId, async (pluginId) => {
   if (pluginId) {
     activeTab.value = 'info'
     pluginCommands.value = []
-    commandOutput.value = {}
     try {
+      // 只为了标签上的命令数；执行逻辑在 PluginCommandPanel 里。
       const allCommands = await pluginService.listPluginCommands()
       pluginCommands.value = allCommands.filter((c) => c.plugin_id === pluginId)
     } catch { /* 命令加载失败时忽略 */ }
@@ -54,36 +53,6 @@ async function uninstall(id: string, name: string) {
   catch (error) { actionError.value = error instanceof Error ? error.message : '卸载失败' }
 }
 
-async function runCommand(command: PluginCommand) {
-  isExecutingCommand.value = command.command_id
-  commandOutput.value[command.command_id] = ''
-  try {
-    // Plugin 详情页没有笔记/选区上下文，按契约传空上下文。
-    const result = await pluginService.executePluginCommand(command.command_id, {}, {})
-    commandOutput.value[command.command_id] = describeEffect(result.effect)
-  } catch (error) {
-    commandOutput.value[command.command_id] = error instanceof Error ? error.message : '执行失败'
-  } finally {
-    isExecutingCommand.value = null
-  }
-}
-
-/** 效果白名单：只渲染契约允许的类型，未知类型统一按“已完成”处理。 */
-function describeEffect(effect: PluginCommandEffect): string {
-  switch (effect.type) {
-    case 'notification':
-      return effect.payload.message
-    case 'navigate':
-      return `命令请求跳转到「${effect.payload.route}」`
-    case 'refresh':
-      return `命令请求刷新「${effect.payload.scope}」`
-    case 'job':
-      return `已创建后台任务：${effect.payload.job_id}`
-    default:
-      return '命令执行成功'
-  }
-}
-
 const hasSettingsContribution = computed(() =>
   pluginStore.selectedPlugin?.contributions.some((c) => c.type === 'settings_section') ?? false
 )
@@ -195,35 +164,7 @@ const hasCommandContribution = computed(() =>
         </div>
 
         <div v-else-if="activeTab === 'commands'" class="tab-content">
-          <div v-if="pluginCommands.length === 0" class="empty-hint">
-            <p>此插件暂无可执行命令。</p>
-          </div>
-          <div v-else class="command-list">
-            <div v-for="cmd in pluginCommands" :key="cmd.command_id" class="command-item">
-              <div class="command-info">
-                <strong>{{ cmd.title }}</strong>
-                <p class="subtle">{{ cmd.description }}</p>
-                <div class="command-meta">
-                  <code>{{ cmd.command_id }}</code>
-                  <span class="locations">
-                    挂载于: {{ cmd.locations.join(', ') }}
-                  </span>
-                </div>
-              </div>
-              <div class="command-action">
-                <button
-                  class="button-secondary"
-                  :disabled="!cmd.enabled || isExecutingCommand === cmd.command_id"
-                  @click="runCommand(cmd)"
-                >
-                  {{ isExecutingCommand === cmd.command_id ? '执行中…' : '运行' }}
-                </button>
-              </div>
-              <div v-if="commandOutput[cmd.command_id]" class="command-output">
-                {{ commandOutput[cmd.command_id] }}
-              </div>
-            </div>
-          </div>
+          <PluginCommandPanel :plugin="pluginStore.selectedPlugin" />
         </div>
 
         <div v-else-if="activeTab === 'settings'" class="tab-content">
@@ -347,46 +288,6 @@ const hasCommandContribution = computed(() =>
 .extension-title div { flex: 1; }
 .extension-title p { color: var(--color-text-tertiary); font-size: var(--font-size-xs); }
 
-.command-list { display: grid; gap: var(--space-sm); }
-.command-item {
-  padding: var(--space-md);
-  border: 1px solid var(--color-border-default);
-  border-radius: var(--radius-md);
-  background: var(--color-surface-primary);
-  display: grid;
-  grid-template-columns: 1fr auto;
-  gap: var(--space-sm) var(--space-md);
-  align-items: start;
-}
-.command-info strong { display: block; margin-bottom: 2px; }
-.command-info .subtle {
-  font-size: var(--font-size-sm);
-  color: var(--color-text-secondary);
-  margin-bottom: var(--space-xs);
-}
-.command-meta {
-  display: flex;
-  align-items: center;
-  gap: var(--space-md);
-  font-size: var(--font-size-xs);
-  color: var(--color-text-tertiary);
-}
-.command-meta code {
-  padding: 1px 6px;
-  background: var(--color-background-secondary);
-  border-radius: var(--radius-sm);
-  font-family: var(--font-ui-mono);
-}
-.command-output {
-  grid-column: 1 / -1;
-  padding: var(--space-sm) var(--space-md);
-  background: var(--color-background-secondary);
-  border-radius: var(--radius-sm);
-  font-size: var(--font-size-sm);
-  color: var(--color-text-secondary);
-  white-space: pre-wrap;
-}
-
 .empty-hint {
   padding: var(--space-2xl);
   text-align: center;
@@ -396,6 +297,5 @@ const hasCommandContribution = computed(() =>
 
 @media (max-width: 800px) {
   .detail-grid { grid-template-columns: 1fr; }
-  .command-item { grid-template-columns: 1fr; }
 }
 </style>
diff --git a/frontend/src/features/themes/ThemesView.vue b/frontend/src/features/themes/ThemesView.vue
index 791999c..1364825 100644
--- a/frontend/src/features/themes/ThemesView.vue
+++ b/frontend/src/features/themes/ThemesView.vue
@@ -25,28 +25,34 @@ const communityThemes = computed(() => mockCommunityThemes)
 function handleFileImport(event: Event) {
   const input = event.target as HTMLInputElement
   const file = input.files?.[0]
+  input.value = ''
   if (!file) return
+  actionError.value = ''
   const reader = new FileReader()
   reader.onload = async () => {
-    const content = reader.result as string
     try {
-      const result = await themeStore.inspectThemePackage(content)
+      const result = await themeStore.inspectThemePackage(String(reader.result ?? ''))
       if (result.compatible) {
         previewThemeId.value = result.manifest.theme_id
+      } else {
+        actionError.value = result.warnings[0] ?? '主题包无法解析'
       }
     } catch (error) {
       actionError.value = error instanceof Error ? error.message : '导入失败'
     }
   }
+  reader.onerror = () => { actionError.value = '文件读取失败' }
+  // 主题包是文本格式（YAML 清单 + --- + CSS），二进制包在解析阶段会被拒绝。
   reader.readAsText(file)
-  input.value = ''
 }
 
 async function confirmInstall(inspection: ThemePackageInspection) {
+  actionError.value = ''
   try {
-    // Web Mock 模式：使用社区主题的 CSS 作为演示
-    const cssText = generateThemeCss(inspection.manifest.theme_id, inspection.manifest.is_dark)
-    await themeStore.installThemeFromInspection(inspection.manifest, cssText)
+    // 装的必须是包里那份 CSS —— 之前这里是现场生成的假样式，
+    // 用户提供的内容被整份丢掉了。
+    if (!inspection.css.trim()) throw new Error('主题包内没有 CSS 内容，无法安装。')
+    await themeStore.installThemeFromInspection(inspection.manifest, inspection.css)
     showImportDialog.value = false
     previewThemeId.value = null
   } catch (error) {
@@ -63,59 +69,6 @@ async function installFromCommunity(themeId: string) {
   }
 }
 
-function generateThemeCss(themeId: string, isDark: boolean): string {
-  if (isDark) {
-    return `[data-theme="${themeId}"] {
-  --color-background-primary: #1a1b26;
-  --color-background-secondary: #24283b;
-  --color-background-tertiary: #2f334d;
-  --color-background-hover: #2d2f45;
-  --color-background-active: #3d4261;
-  --color-surface-primary: #24283b;
-  --color-surface-secondary: #1a1b26;
-  --color-surface-elevated: #2f334d;
-  --color-text-primary: #c0caf5;
-  --color-text-secondary: #9aa5ce;
-  --color-text-tertiary: #565f89;
-  --color-text-link: #7aa2f7;
-  --color-accent-primary: #7aa2f7;
-  --color-accent-primary-hover: #89b4fa;
-  --color-accent-soft: #1e2352;
-  --color-border-default: #3b3f5c;
-  --color-border-subtle: #2f334d;
-  --color-border-focus: #7aa2f7;
-  --color-success: #9ece6a;
-  --color-success-soft: #1f2a1a;
-  --color-warning: #e0af68;
-  --color-warning-soft: #2d2418;
-  --color-error: #f7768e;
-  --color-error-soft: #2d1a1f;
-  --color-info: #7aa2f7;
-  --color-info-soft: #1a2030;
-}`
-  }
-  return `[data-theme="${themeId}"] {
-  --color-background-primary: #ffffff;
-  --color-background-secondary: #f8fafc;
-  --color-background-tertiary: #eef2f7;
-  --color-background-hover: #f1f5f9;
-  --color-background-active: #e2e8f0;
-  --color-surface-primary: #ffffff;
-  --color-surface-secondary: #fafbfc;
-  --color-surface-elevated: #ffffff;
-  --color-text-primary: #1e293b;
-  --color-text-secondary: #64748b;
-  --color-text-tertiary: #94a3b8;
-  --color-text-link: #3b82f6;
-  --color-accent-primary: #3b82f6;
-  --color-accent-primary-hover: #2563eb;
-  --color-accent-soft: #dbeafe;
-  --color-border-default: #e2e8f0;
-  --color-border-subtle: #f1f5f9;
-  --color-border-focus: #3b82f6;
-}`
-}
-
 function previewCommunity(themeId: string) {
   // 临时切换预览
   const current = themeStore.currentThemeId
@@ -145,6 +98,10 @@ onMounted(() => {
       {{ actionError || themeStore.importError }}
     </div>
 
+    <div v-if="themeStore.themeLoadWarning" class="warning-banner">
+      {{ themeStore.themeLoadWarning }}
+    </div>
+
     <div class="tabs">
       <button
         class="tab-btn"
@@ -270,7 +227,7 @@ onMounted(() => {
       <div class="modal import-modal">
         <span class="badge info">主题导入</span>
         <h2>导入主题包</h2>
-        <p class="subtle">支持 YAML Manifest + CSS 主题包。主题将在安全沙箱中验证后安装。</p>
+        <p class="subtle">单文件主题包：YAML 清单 + 一行 <code>---</code> + 主题 CSS。安装前会校验清单与 CSS 安全性。</p>
 
         <div v-if="themeStore.pendingInspection?.compatible" class="inspection-result">
           <div class="inspect-head">
@@ -288,12 +245,16 @@ onMounted(() => {
           <div v-if="themeStore.pendingInspection.warnings.length" class="warnings">
             <p v-for="w in themeStore.pendingInspection.warnings" :key="w" class="warning-text">⚠ {{ w }}</p>
           </div>
+          <details class="css-preview">
+            <summary>将要安装的 CSS（{{ themeStore.pendingInspection.css.length }} 字符）</summary>
+            <pre>{{ themeStore.pendingInspection.css }}</pre>
+          </details>
         </div>
 
         <div v-else class="upload-area">
-          <input type="file" accept=".yaml,.yml,.css,.zip" @change="handleFileImport" />
-          <p>拖放主题包或点击选择文件</p>
-          <p class="subtle">支持 .yaml / .yml / .css / .zip</p>
+          <input type="file" accept=".yaml,.yml,.theme" @change="handleFileImport" />
+          <p>点击选择主题包文件</p>
+          <p class="subtle">支持 .yaml / .yml / .theme；ZIP 需要 Host 端解压，暂不支持。</p>
         </div>
 
         <div class="inline-actions">
@@ -457,5 +418,35 @@ onMounted(() => {
   font-size: var(--font-size-sm);
 }
 
+.warning-banner {
+  padding: var(--space-sm) var(--space-md);
+  border: 1px solid var(--color-warning);
+  border-radius: var(--radius-md);
+  background: var(--color-warning-soft);
+  color: var(--color-warning);
+  font-size: var(--font-size-sm);
+}
+
+.css-preview {
+  margin-top: var(--space-md);
+}
+.css-preview summary {
+  cursor: pointer;
+  font-size: var(--font-size-sm);
+  color: var(--color-text-secondary);
+}
+.css-preview pre {
+  margin-top: var(--space-sm);
+  max-height: 220px;
+  overflow: auto;
+  padding: var(--space-sm);
+  border-radius: var(--radius-sm);
+  background: var(--color-background-secondary);
+  font-family: var(--font-ui-mono);
+  font-size: var(--font-size-xs);
+  white-space: pre-wrap;
+  word-break: break-all;
+}
+
 .inline-actions { margin-top: var(--space-lg); justify-content: flex-end; gap: var(--space-sm); }
 </style>
diff --git a/frontend/src/main.ts b/frontend/src/main.ts
index 1319b00..445f210 100644
--- a/frontend/src/main.ts
+++ b/frontend/src/main.ts
@@ -13,6 +13,7 @@ app.use(pinia)
 app.use(router)
 
 const themeStore = useThemeStore()
-themeStore.initTheme()
+// initTheme 先同步落内置主题兜底，自定义主题恢复是异步的，不阻塞挂载。
+void themeStore.initTheme()
 
 app.mount('#app')
diff --git a/frontend/src/services/pluginCommandForm.spec.ts b/frontend/src/services/pluginCommandForm.spec.ts
new file mode 100644
index 0000000..590ac18
--- /dev/null
+++ b/frontend/src/services/pluginCommandForm.spec.ts
@@ -0,0 +1,227 @@
+import { describe, expect, it, vi } from 'vitest'
+import {
+  applyCommandEffect,
+  cleanArguments,
+  coerceArgument,
+  commandFields,
+  EFFECT_ROUTES,
+  initialArguments,
+  missingRequiredFields,
+} from './pluginCommandForm'
+import type { PluginCommand, PluginCommandEffect } from '@/contracts'
+
+function command(parameters: Record<string, unknown>): PluginCommand {
+  return {
+    command_id: 'demo.run',
+    plugin_id: 'demo',
+    title: '示例命令',
+    description: '',
+    locations: [],
+    when: [],
+    parameters,
+    enabled: true,
+  }
+}
+
+/** 后端只接受 type=object 的 JSON Schema（contributions.py 显式拒绝其他形态）。 */
+const schema = command({
+  type: 'object',
+  properties: {
+    path: { type: 'string', title: '笔记路径', description: '相对于库根目录' },
+    count: { type: 'integer', default: 3 },
+    recursive: { type: 'boolean' },
+    mode: { type: 'string', enum: ['fast', 'full'] },
+  },
+  required: ['path', 'mode'],
+})
+
+describe('commandFields', () => {
+  it('摊平 properties 并标记 required', () => {
+    const fields = commandFields(schema)
+
+    expect(fields.map((f) => f.key)).toEqual(['path', 'count', 'recursive', 'mode'])
+    expect(fields[0]).toMatchObject({ title: '笔记路径', type: 'string', required: true })
+    expect(fields[1]).toMatchObject({ type: 'integer', required: false, default: 3 })
+    expect(fields[3].enum).toEqual(['fast', 'full'])
+  })
+
+  it('没有 title 时用字段名兜底，没有 type 时按 string 处理', () => {
+    const fields = commandFields(command({ type: 'object', properties: { raw: {} } }))
+
+    expect(fields[0]).toMatchObject({ key: 'raw', title: 'raw', type: 'string', required: false })
+  })
+
+  it('parameters 为空或形态异常时返回空数组而不是抛错', () => {
+    expect(commandFields(command({}))).toEqual([])
+    expect(commandFields(command({ type: 'object' }))).toEqual([])
+    // properties 被写成数组等非法形态时按空处理
+    expect(commandFields(command({ type: 'object', properties: ['nope'] as unknown as Record<string, unknown> }))).toEqual([])
+  })
+})
+
+describe('initialArguments', () => {
+  it('布尔字段显式初始化为 false，保证 UI 显示与提交值一致', () => {
+    // 回归：之前布尔下拉框显示「否」，但参数对象里没有这个键，
+    // 用户没手动切换过就会漏发这个参数。
+    const args = initialArguments(schema)
+
+    expect(args.recursive).toBe(false)
+    expect('recursive' in args).toBe(true)
+  })
+
+  it('有 default 的字段用 default，没有的不塞键', () => {
+    const args = initialArguments(schema)
+
+    expect(args.count).toBe(3)
+    expect('path' in args).toBe(false)
+    expect('mode' in args).toBe(false)
+  })
+
+  it('布尔字段的 default 优先于 false', () => {
+    const args = initialArguments(
+      command({ type: 'object', properties: { flag: { type: 'boolean', default: true } } }),
+    )
+
+    expect(args.flag).toBe(true)
+  })
+})
+
+describe('coerceArgument', () => {
+  const field = (type: string) => ({ key: 'k', title: 'k', type, required: false })
+
+  it('布尔只认字符串 "true"', () => {
+    expect(coerceArgument(field('boolean'), 'true')).toBe(true)
+    expect(coerceArgument(field('boolean'), 'false')).toBe(false)
+  })
+
+  it('数字字段转成 number，空串与非法输入转成 undefined', () => {
+    expect(coerceArgument(field('integer'), '42')).toBe(42)
+    expect(coerceArgument(field('number'), '1.5')).toBe(1.5)
+    expect(coerceArgument(field('number'), '')).toBeUndefined()
+    expect(coerceArgument(field('number'), 'abc')).toBeUndefined()
+  })
+
+  it('字符串原样保留（含空格）', () => {
+    expect(coerceArgument(field('string'), ' notes/a.md ')).toBe(' notes/a.md ')
+  })
+})
+
+describe('missingRequiredFields', () => {
+  it('列出未填的必填字段', () => {
+    const missing = missingRequiredFields(schema, initialArguments(schema))
+
+    expect(missing.map((f) => f.key)).toEqual(['path', 'mode'])
+  })
+
+  it('空白字符串算没填', () => {
+    const missing = missingRequiredFields(schema, { path: '   ', mode: 'fast' })
+
+    expect(missing.map((f) => f.key)).toEqual(['path'])
+  })
+
+  it('布尔 false 是合法值，不算缺失', () => {
+    const boolSchema = command({
+      type: 'object',
+      properties: { flag: { type: 'boolean' } },
+      required: ['flag'],
+    })
+
+    expect(missingRequiredFields(boolSchema, { flag: false })).toEqual([])
+  })
+
+  it('全部填好时返回空数组', () => {
+    expect(missingRequiredFields(schema, { path: 'a.md', mode: 'fast' })).toEqual([])
+  })
+})
+
+describe('cleanArguments', () => {
+  it('丢掉 undefined 的键，保留 false / 0 / 空串', () => {
+    const cleaned = cleanArguments({ a: undefined, b: false, c: 0, d: '', e: null })
+
+    expect(cleaned).toEqual({ b: false, c: 0, d: '', e: null })
+    expect('a' in cleaned).toBe(false)
+  })
+})
+
+describe('applyCommandEffect', () => {
+  function handlers() {
+    return { navigate: vi.fn(), refresh: vi.fn(), notify: vi.fn() }
+  }
+
+  it('navigate 真的触发跳转，而不是只提示一句话', async () => {
+    // 回归：之前只把 effect 拼成描述文本显示，命令等于没生效。
+    const h = handlers()
+    await applyCommandEffect({ type: 'navigate', payload: { route: 'workspace' } }, h)
+
+    expect(h.navigate).toHaveBeenCalledWith('/workspace')
+    expect(h.notify).not.toHaveBeenCalled()
+  })
+
+  it('每个白名单路由都能解析出路径', async () => {
+    for (const route of Object.keys(EFFECT_ROUTES)) {
+      const h = handlers()
+      await applyCommandEffect(
+        { type: 'navigate', payload: { route } } as PluginCommandEffect,
+        h,
+      )
+      expect(h.navigate).toHaveBeenCalledWith(EFFECT_ROUTES[route])
+    }
+  })
+
+  it('未知路由只提示不跳转，避免 router.push(undefined)', async () => {
+    const h = handlers()
+    await applyCommandEffect(
+      { type: 'navigate', payload: { route: 'nope' } } as unknown as PluginCommandEffect,
+      h,
+    )
+
+    expect(h.navigate).not.toHaveBeenCalled()
+    expect(h.notify.mock.calls[0][0]).toContain('nope')
+  })
+
+  it('refresh 真的触发对应 scope 的刷新', async () => {
+    const h = handlers()
+    await applyCommandEffect({ type: 'refresh', payload: { scope: 'workspace' } }, h)
+
+    expect(h.refresh).toHaveBeenCalledWith('workspace')
+  })
+
+  it('等待异步 refresh 完成后才返回', async () => {
+    const h = handlers()
+    let done = false
+    h.refresh.mockImplementation(async () => {
+      await Promise.resolve()
+      done = true
+    })
+
+    await applyCommandEffect({ type: 'refresh', payload: { scope: 'commands' } }, h)
+
+    expect(done).toBe(true)
+  })
+
+  it('notification 原样透出插件消息', async () => {
+    const h = handlers()
+    await applyCommandEffect(
+      { type: 'notification', payload: { level: 'info', message: '索引已重建' } },
+      h,
+    )
+
+    expect(h.notify).toHaveBeenCalledWith('索引已重建')
+  })
+
+  it('job 提示任务 id', async () => {
+    const h = handlers()
+    await applyCommandEffect({ type: 'job', payload: { job_id: 'job_7' } }, h)
+
+    expect(h.notify.mock.calls[0][0]).toContain('job_7')
+  })
+
+  it('none 或未知 type 按「已完成」处理，不猜测语义', async () => {
+    const h = handlers()
+    await applyCommandEffect({ type: 'none', payload: {} }, h)
+
+    expect(h.notify).toHaveBeenCalledWith('命令执行完成。')
+    expect(h.navigate).not.toHaveBeenCalled()
+    expect(h.refresh).not.toHaveBeenCalled()
+  })
+})
diff --git a/frontend/src/services/pluginCommandForm.ts b/frontend/src/services/pluginCommandForm.ts
new file mode 100644
index 0000000..8782cf5
--- /dev/null
+++ b/frontend/src/services/pluginCommandForm.ts
@@ -0,0 +1,152 @@
+import type { PluginCommand, PluginCommandEffect } from '@/contracts'
+
+/** 命令参数的 JSON Schema 字段定义（后端用 Draft 2020-12 校验）。 */
+export interface CommandField {
+  key: string
+  title: string
+  type: string
+  required: boolean
+  enum?: string[]
+  default?: unknown
+  description?: string
+}
+
+function asRecord(value: unknown): Record<string, unknown> {
+  return value && typeof value === 'object' && !Array.isArray(value)
+    ? (value as Record<string, unknown>)
+    : {}
+}
+
+/**
+ * 把命令的 parameters（object schema）摊平成表单字段。
+ *
+ * 后端只接受 type=object 的 schema（contributions.py 里显式拒绝其他形态），
+ * 所以这里只处理 properties + required 两个键，嵌套对象按文本输入兜底。
+ */
+export function commandFields(command: PluginCommand): CommandField[] {
+  const schema = asRecord(command.parameters)
+  const properties = asRecord(schema.properties)
+  const requiredKeys = Array.isArray(schema.required) ? schema.required.map(String) : []
+
+  return Object.entries(properties).map(([key, rawDefinition]) => {
+    const definition = asRecord(rawDefinition)
+    return {
+      key,
+      title: typeof definition.title === 'string' && definition.title ? definition.title : key,
+      type: typeof definition.type === 'string' ? definition.type : 'string',
+      required: requiredKeys.includes(key),
+      enum: Array.isArray(definition.enum) ? definition.enum.map(String) : undefined,
+      default: definition.default,
+      description: typeof definition.description === 'string' ? definition.description : undefined,
+    }
+  })
+}
+
+/**
+ * 表单初始值。
+ *
+ * 布尔字段必须显式给 false —— 下拉框默认显示「否」，如果参数对象里
+ * 没有这个键，用户看到的和实际提交的就不一致。
+ */
+export function initialArguments(command: PluginCommand): Record<string, unknown> {
+  const result: Record<string, unknown> = {}
+  for (const field of commandFields(command)) {
+    if (field.default !== undefined) result[field.key] = field.default
+    else if (field.type === 'boolean') result[field.key] = false
+  }
+  return result
+}
+
+/** 按字段类型把输入框的字符串转成 schema 期望的类型。 */
+export function coerceArgument(field: CommandField, raw: string): unknown {
+  if (field.type === 'boolean') return raw === 'true'
+  if (field.type === 'number' || field.type === 'integer') {
+    if (raw.trim() === '') return undefined
+    const parsed = Number(raw)
+    return Number.isNaN(parsed) ? undefined : parsed
+  }
+  return raw
+}
+
+function isBlank(value: unknown): boolean {
+  if (value === undefined || value === null) return true
+  return typeof value === 'string' && value.trim() === ''
+}
+
+/**
+ * 找出还没填的必填字段。
+ *
+ * 后端会用 JSON Schema 再校验一次，这里做前置检查只为了别让用户
+ * 提交一次才知道少填了什么。布尔的 false 是合法值，不算缺失。
+ */
+export function missingRequiredFields(
+  command: PluginCommand,
+  args: Record<string, unknown>,
+): CommandField[] {
+  return commandFields(command).filter((field) => field.required && isBlank(args[field.key]))
+}
+
+/** undefined 的键不该出现在请求体里。 */
+export function cleanArguments(args: Record<string, unknown>): Record<string, unknown> {
+  const result: Record<string, unknown> = {}
+  for (const [key, value] of Object.entries(args)) {
+    if (value !== undefined) result[key] = value
+  }
+  return result
+}
+
+/** navigate effect 的路由白名单，与 router/index.ts 的路径一一对应。 */
+export const EFFECT_ROUTES: Record<string, string> = {
+  'vault-entry': '/',
+  workspace: '/workspace',
+  search: '/search',
+  chat: '/chat',
+  agent: '/agent/runs',
+  tasks: '/tasks',
+  skills: '/extensions/skills',
+  plugins: '/extensions/plugins',
+  themes: '/themes',
+  settings: '/settings',
+}
+
+export interface EffectHandlers {
+  navigate: (path: string) => Promise<unknown> | unknown
+  refresh: (scope: 'workspace' | 'commands' | 'settings' | 'plugins') => Promise<unknown> | unknown
+  notify: (message: string) => void
+}
+
+/**
+ * 执行命令返回的 effect。
+ *
+ * navigate / refresh 必须真的发生 —— 之前这里只是把 effect 拼成一句话
+ * 显示给用户，命令等于没生效。未知 type 一律按「已完成」处理，
+ * 不猜测语义。
+ */
+export async function applyCommandEffect(
+  effect: PluginCommandEffect,
+  handlers: EffectHandlers,
+): Promise<void> {
+  switch (effect.type) {
+    case 'notification':
+      handlers.notify(effect.payload.message)
+      return
+    case 'navigate': {
+      const path = EFFECT_ROUTES[effect.payload.route]
+      if (!path) {
+        handlers.notify(`命令请求跳转到未知路由「${effect.payload.route}」，已忽略。`)
+        return
+      }
+      await handlers.navigate(path)
+      return
+    }
+    case 'refresh':
+      await handlers.refresh(effect.payload.scope)
+      handlers.notify('相关数据已刷新。')
+      return
+    case 'job':
+      handlers.notify(`已创建后台任务：${effect.payload.job_id}`)
+      return
+    default:
+      handlers.notify('命令执行完成。')
+  }
+}
diff --git a/frontend/src/services/themePackageService.spec.ts b/frontend/src/services/themePackageService.spec.ts
index b0de697a56b350017ba2a9a646d95967180f7d82..4584a9804a6139144d19141421fb9b26713e78a8 100644
GIT binary patch
delta 2821
zcmb7G+fx%)7_UXpqT`6wjvdFDQ?N}!Nn%H;Ghx(0K+A}V2(`30WC;sI!zPm~70WOI
zF_K^c(FH_6ZUR!|Dii{Q^49;tzBFfdGku^heeZX6b4P8<3=i2od%oZI{VwNBXZ&`~
zJDz5ttTwu|j;^PRDZ?GAmVP{P=U_d>7;9)7TTa!R&{?GCKHb%3*Qcf$%#4jiELojr
zvynGHR8uUamY$qVHydb*QCFE7==58tDHS2L+F&-Bt!m0(pcz(eu^Q_s>pdOHIC=8S
znX1z{F-xkTdac#mz*NU9tNFU7s-`9<wHa#LwV9bH;M)j}^<lRIYM19;DMGx@fjvFw
zOL)^Fj=GUvtyb&dXWoq)f3)03ncCEv2FAb|%?z^Ksa1v>E2SG**dqLs^qGYWQcL0P
zR61m1twyF+>cmQa&Nf&Xq(9LV{)p_+T){xW3g$!;d<-a?mxgvN?@E@2%9SS_*9qNI
zAxzlWj-3x>ya8V)LAdRA2YlnfwkdcKY}>?hZoX$3clF}-bww7pxc_5)Qv@QZCPQon
z;5%4TlI~QhRG272bfbkfuyM_*G^{z#%&?S^Q7WVsD~;7U#GT)L^t0H8R2s(2#;zs&
za>Z$fP0%3O<N~dXObCiKOC^o0QUU#-V7psvpT?_;*f$w!JFqq!@Oc9MesSy-@0{j)
zXSe-M+%?U+UBb+a%o=IGzgw7@gc)u7U2^YsD0tJz*5y;SI+|!r@gA)qP$ml!)1h?W
zBRvNJG1^SfpBf~fkcJ{_w@G68-6IUoqMWJ<Ng|3NVZ70S#35D1O$9srcy0~ll@wh>
zyk`s~D)c|#d)osWD{`BK|At7VvC<Y3WuTQ>=&3dfDJrZLjAADkZs0(MJ?bq*JP^UZ
zju#%wlLi$0(-ppB0+oJKaHXKKI5+Qd?xljt!mHor78T|zvXD}R&YqKmA5oM1Xs7U^
z6RS6=>_j4^byo9TrS`3RYvWNx@C4Q#VQ(k@dXyh@5o@40fbihIfwL!snKH(&#N=VW
zf=MbEy=n*Am_i9i#rcQW`3iksSd0SeZgFb>J6G`93g6c$jLz|0USWJ4bZ+On=XrN4
z7+Y)sZ+rN@dA!L1-~8Z=`0@om<OOdB))s}4)`Tf*wbI_f*>1jP0To}aXgqle{<C8Z
z{Voa=k>&R6!yi-`83<VrNQ4S$4}=mJDZ6^3tho4ENohfT<;80yS8_|WS<=dQib9Q7
zQ8xN?Ho}`@*xv;jCTPLQR+_5LwdF%dl$8`A!QTHs*x>k~LCMDdM@9+~G&;&+F&PaM
z$!qOTMoW%dHLI+^mVe>G^<4OSe_zLmjNjQ9_t(B7TuG8ASqe+eoBRcLVE3DBajP2-
z48fs-A3B7=VLUfP`U5GDeExL+&$+}G4$vd+9Og$>1DjhA>fC735j${3KHPk=?e8Z7
zc6pGIv61XWkZ>~J;lTGmu7~!FZrC-6$9skDVczM5B*YU>acjG{&?dTG^Ut@Sx<m(5
zfr7kq6;uXrNPdj00tsRoBx=ucU}H1j8{<1&aNco?Nt#G=pV;4;*bzfpX<LJd)r4X!
zayW#}=7jhlmXsp|#l-L}6l`(vkAB9_reHq8#xqd2I6H|ScYwMnZX!u1olCJ10r{n~
zn$0X~f^=@wp|32Bkk$%Sh>fH6yOfoIQ`e@sZHBW-QgH-ZOzHUBMgm$qI29awAii`4
z`&Rh5U+}^r|LBRZ@f;ip!^e)P7=nEsVb+D63-XMGz4zB-et_X~2V?IHBtN*n_nrcz
zH@Qn69ipV7U@K6;_@cNx0V99{V%sL)(II76u%!zIf;%^W%3$jjc6fkXQm1!KoSz3#
z#hN>w4mf5N3hvGB&Ln`q-A>N<P#V$i`(qJtwv<dj^CNd?&%O8;-aTb|RI;1HaL**n
zh$I<kUKT%zDk-`65x?y3VD~e?2suUOkQPmtY&l-IuH^5Ih0l$hhEou$E#2O0NKx@i
zQ`j*P8aQ0jI%T7Q*Wh3bws`UEQ*sMvUxq@*QbYa$|8v(<j;BaQRdM=#M>C>tG+{ku
mh3y8*iH^C+eW#SsOQ=G1Uc<t*iO2`;1_`&9rL6;he)tbXCViLy

delta 139
zcmX?Rw@P`!l8HOh`N|S=GE*WGb8{4I6%x268!$FAaV2cN#<YcT@<y&+PPp{setxyd
z`Fs+S-*9tI?&97vc^*6a<UE1O$*%>Jm}BzPC-V#5V+E_8{8LbCaxkyx<O#x#ldFVg
dKt<(*L)mn=6o3F|RNm$XA|-5_GiB~F0RRNBF^~WN

diff --git a/frontend/src/services/themePackageService.ts b/frontend/src/services/themePackageService.ts
index c68b41d..3ac2dec 100644
--- a/frontend/src/services/themePackageService.ts
+++ b/frontend/src/services/themePackageService.ts
@@ -66,18 +66,6 @@ function validateCssSafety(css: string): string[] {
   return warnings
 }
 
-function buildCssVarsFromManifest(manifest: ThemeManifest, rawValues: Record<string, string>): string {
-  const lines: string[] = []
-  lines.push(`[data-theme="${manifest.theme_id}"] {`)
-  for (const [key, value] of Object.entries(rawValues)) {
-    if (key.startsWith('--')) {
-      lines.push(`  ${key}: ${value};`)
-    }
-  }
-  lines.push('}')
-  return lines.join('\n')
-}
-
 function applyThemeCss(themeId: string, css: string) {
   let styleEl = document.getElementById(`theme-style-${themeId}`) as HTMLStyleElement | null
   if (!styleEl) {
@@ -116,27 +104,61 @@ function inspectYamlContent(yamlText: string): ThemeManifest {
   return manifest
 }
 
+/**
+ * 主题包是单文件文本格式：YAML 清单 + 一行 `---` + 主题 CSS。
+ *
+ *   theme_id: my-theme
+ *   name: My Theme
+ *   ...
+ *   ---
+ *   [data-theme="my-theme"] { --color-... }
+ *
+ * 浏览器端没有解压能力，所以不支持 ZIP —— 与其把二进制当文本解析出
+ * 一堆乱码再报「清单无效」，不如直接告诉用户格式不支持。
+ */
+export function parseThemePackage(packageData: string): { manifestText: string; css: string } {
+  if (looksLikeZip(packageData)) {
+    throw new Error(
+      'THEME_PACKAGE_UNSUPPORTED_FORMAT: 暂不支持 ZIP 主题包，请提供「YAML 清单 + --- + CSS」的单文件主题。',
+    )
+  }
+
+  const lines = packageData.split(/\r?\n/)
+  const separatorIndex = lines.findIndex((line) => line.trim() === '---')
+  if (separatorIndex < 0) {
+    throw new Error(
+      'THEME_PACKAGE_INVALID: 主题包缺少 `---` 分隔行，无法区分清单与 CSS。',
+    )
+  }
+
+  const manifestText = lines.slice(0, separatorIndex).join('\n')
+  const css = lines.slice(separatorIndex + 1).join('\n').trim()
+  if (!css) {
+    throw new Error('THEME_CSS_INVALID: 主题包内没有 CSS 内容。')
+  }
+  return { manifestText, css }
+}
+
+/** ZIP 的魔数是 PK\x03\x04；base64 形式（readAsDataURL）开头是 UEsDB。 */
+function looksLikeZip(data: string): boolean {
+  if (data.startsWith('PK')) return true
+  return /^data:.*;base64,UEsDB/.test(data) || data.startsWith('UEsDB')
+}
+
 export async function selectThemePackage(): Promise<string | null> {
   return new Promise((resolve) => {
     const input = document.createElement('input')
     input.type = 'file'
-    input.accept = '.zip,.yaml,.yml,.css'
+    // 只接受能在浏览器里解析的单文件主题；ZIP 需要 Host 端解压，暂不支持。
+    input.accept = '.yaml,.yml,.theme'
     input.multiple = false
     input.onchange = () => {
       const file = input.files?.[0]
       if (!file) { resolve(null); return }
       const reader = new FileReader()
-      reader.onload = () => {
-        resolve(reader.result as string)
-      }
+      reader.onload = () => resolve(reader.result as string)
       reader.onerror = () => resolve(null)
-      if (file.name.endsWith('.yaml') || file.name.endsWith('.yml')) {
-        reader.readAsText(file)
-      } else if (file.name.endsWith('.css')) {
-        reader.readAsText(file)
-      } else {
-        reader.readAsDataURL(file)
-      }
+      reader.readAsText(file)
     }
     input.oncancel = () => resolve(null)
     input.click()
@@ -146,10 +168,13 @@ export async function selectThemePackage(): Promise<string | null> {
 export async function inspectThemePackage(packageData: string): Promise<ThemePackageInspection> {
   const package_id = `theme_pkg_${Date.now()}`
   try {
-    const manifest = inspectYamlContent(packageData)
-    const warnings: string[] = []
-    if (manifest.css_entry && manifest.css_entry.includes('theme.css')) {
-      // 示意：Web Mock 假设 CSS 入口存在，真实 Host 会检查包内文件
+    const { manifestText, css } = parseThemePackage(packageData)
+    const manifest = inspectYamlContent(manifestText)
+    // CSS 的安全校验放在这里，不合规的包在「预览」阶段就该被拒，
+    // 而不是等到用户点安装。
+    const warnings = validateCssSafety(css)
+    if (!css.includes(`[data-theme="${manifest.theme_id}"]`)) {
+      warnings.push(`CSS 未包含 [data-theme="${manifest.theme_id}"] 选择器，主题可能不会生效。`)
     }
     return {
       package_id,
@@ -157,6 +182,7 @@ export async function inspectThemePackage(packageData: string): Promise<ThemePac
       preview_url: '',
       warnings,
       compatible: true,
+      css,
     }
   } catch (error) {
     const message = error instanceof Error ? error.message : '未知错误'
@@ -168,6 +194,7 @@ export async function inspectThemePackage(packageData: string): Promise<ThemePac
       warnings: [message],
       compatible: false,
       error_code,
+      css: '',
     }
   }
 }
@@ -176,6 +203,8 @@ export async function installTheme(
   manifest: ThemeManifest,
   cssContent: string,
 ): Promise<InstalledTheme> {
+  // validateCssSafety 会对 @import / expression() / javascript: 抛错，
+  // 必须在 applyThemeCss 之前调用 —— 未校验的 CSS 一律不许进入页面。
   const warnings = validateCssSafety(cssContent)
   if (warnings.length > 0) {
     console.warn('[theme] CSS validation warnings:', warnings)
diff --git a/frontend/src/services/traceService.spec.ts b/frontend/src/services/traceService.spec.ts
index 894a548..57691c0 100644
--- a/frontend/src/services/traceService.spec.ts
+++ b/frontend/src/services/traceService.spec.ts
@@ -12,54 +12,129 @@ function event(
   return { event: type, sequence: ++sequence, run_id: 'run-1', data, timestamp }
 }
 
+/**
+ * 后端真实的事件顺序（backend/app/agent/runtime.py）：
+ *   ModelCallStarted → ModelCallCompleted → Usage → ToolCall → ToolResult
+ * 工具在模型调用「完成之后」才执行，而且多个工具并发跑（asyncio.gather +
+ * Semaphore），事件会交错到达。所以建树只能靠 id 关联，不能靠相邻顺序。
+ */
 describe('buildTraceNodes', () => {
-  it('把模型调用期间的事件挂到该模型调用之下', () => {
+  it('工具事件按 parent_model_call_id 归属，即使出现在 ModelCallCompleted 之后', () => {
     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('ModelCallStarted', { model_call_id: 'mc-1', model: 'mock-1', provider_id: 'mock' }),
+      event('ModelCallCompleted', { model_call_id: 'mc-1', duration_ms: 1200, finish_reason: 'tool_calls' }),
+      event('Usage', { token_usage: 320 }),
+      event('ToolCall', { tool_call_id: 'tc-1', name: 'read_note', parent_model_call_id: 'mc-1' }),
+      event('ToolResult', { tool_call_id: 'tc-1', name: 'read_note', success: true, duration_ms: 40, parent_model_call_id: 'mc-1' }),
       event('RunCompleted'),
     ])
 
-    // 顶层只剩：运行开始、模型调用、运行完成
-    expect(nodes).toHaveLength(3)
+    // 顶层：运行开始、模型调用、Usage、运行完成。工具挂在模型调用下面。
+    expect(nodes.map((n) => n.type)).toEqual(['run', 'model_call', 'usage', 'complete'])
+
     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'])
+    expect(modelCall.children.map((c) => c.type)).toEqual(['tool_call'])
   })
 
-  it('模型调用失败时标记为 error', () => {
+  it('ToolResult 回填对应 ToolCall 的状态，结束后不再显示 running', () => {
     const nodes = buildTraceNodes([
-      event('ModelCallStarted', { model: 'mock-1' }),
-      event('ModelCallFailed', { error_code: 'PROVIDER_TIMEOUT' }),
+      event('ModelCallStarted', { model_call_id: 'mc-2' }),
+      event('ModelCallCompleted', { model_call_id: 'mc-2' }),
+      event('ToolCall', { tool_call_id: 'tc-2', name: 'read_note', parent_model_call_id: 'mc-2' }),
+      event('ToolResult', { tool_call_id: 'tc-2', name: 'read_note', success: true, duration_ms: 55, parent_model_call_id: 'mc-2' }),
+    ])
+
+    const toolCall = nodes[0].children[0]
+    expect(toolCall.type).toBe('tool_call')
+    expect(toolCall.status).toBe('completed')
+    expect(toolCall.duration_ms).toBe(55)
+    // 结果数据合并进调用节点，展开详情时能看到 output。
+    expect((toolCall.data.result as Record<string, unknown>).success).toBe(true)
+  })
+
+  it('工具失败时把 ToolCall 标记为 error 并带上 error_code', () => {
+    const nodes = buildTraceNodes([
+      event('ModelCallStarted', { model_call_id: 'mc-3' }),
+      event('ToolCall', { tool_call_id: 'tc-3', name: 'write_note', parent_model_call_id: 'mc-3' }),
+      event('ToolResult', { tool_call_id: 'tc-3', name: 'write_note', success: false, error_code: 'TOOL_DENIED', parent_model_call_id: 'mc-3' }),
+    ])
+
+    const toolCall = nodes[0].children[0]
+    expect(toolCall.status).toBe('error')
+    expect(toolCall.subtitle).toContain('TOOL_DENIED')
+  })
+
+  it('并发工具交错到达时各自归属到正确的模型调用', () => {
+    const nodes = buildTraceNodes([
+      event('ModelCallStarted', { model_call_id: 'mc-a' }),
+      event('ModelCallCompleted', { model_call_id: 'mc-a' }),
+      event('ToolCall', { tool_call_id: 'a1', name: 'toolA1', parent_model_call_id: 'mc-a' }),
+      event('ToolCall', { tool_call_id: 'a2', name: 'toolA2', parent_model_call_id: 'mc-a' }),
+      event('ModelCallStarted', { model_call_id: 'mc-b' }),
+      event('ModelCallCompleted', { model_call_id: 'mc-b' }),
+      event('ToolCall', { tool_call_id: 'b1', name: 'toolB1', parent_model_call_id: 'mc-b' }),
+      // 第一个模型调用的工具结果比第二轮的工具调用还晚到
+      event('ToolResult', { tool_call_id: 'a2', name: 'toolA2', success: true, parent_model_call_id: 'mc-a' }),
+      event('ToolResult', { tool_call_id: 'a1', name: 'toolA1', success: true, parent_model_call_id: 'mc-a' }),
+      event('ToolResult', { tool_call_id: 'b1', name: 'toolB1', success: true, parent_model_call_id: 'mc-b' }),
+    ])
+
+    const [callA, callB] = nodes.filter((n) => n.type === 'model_call')
+    expect(callA.children.map((c) => c.title)).toEqual(['工具调用：toolA1', '工具调用：toolA2'])
+    expect(callB.children.map((c) => c.title)).toEqual(['工具调用：toolB1'])
+    expect(callA.children.every((c) => c.status === 'completed')).toBe(true)
+  })
+
+  it('模型调用失败时标记为 error 并附带 error_code', () => {
+    const nodes = buildTraceNodes([
+      event('ModelCallStarted', { model_call_id: 'mc-4', model: 'mock-1' }),
+      event('ModelCallFailed', { model_call_id: 'mc-4', error_code: 'PROVIDER_TIMEOUT', duration_ms: 900 }),
     ])
 
     expect(nodes).toHaveLength(1)
     expect(nodes[0].status).toBe('error')
+    expect(nodes[0].duration_ms).toBe(900)
+    expect(nodes[0].subtitle).toContain('PROVIDER_TIMEOUT')
+  })
+
+  it('PermissionRequired 不带父 id，留在顶层', () => {
+    const nodes = buildTraceNodes([
+      event('ModelCallStarted', { model_call_id: 'mc-5' }),
+      event('PermissionRequired', { request_id: 'r1', permission: 'notes.write' }),
+    ])
+
+    expect(nodes.map((n) => n.type)).toEqual(['model_call', 'permission'])
+    expect(nodes[1].status).toBe('pending')
   })
 
   it('运行级事件始终留在顶层，不会被模型调用吞掉', () => {
     const nodes = buildTraceNodes([
-      event('ModelCallStarted', { model: 'mock-1' }),
+      event('ModelCallStarted', { model_call_id: 'mc-6' }),
       event('RunFailed', { error_code: 'RUN_TIMEOUT' }),
     ])
 
     expect(nodes.map((n) => n.type)).toEqual(['model_call', 'error'])
   })
 
-  it('模型调用之外的事件保持在顶层', () => {
+  it('SSE 断点恢复只拿到后半段时，孤立事件退回顶层而不是被丢弃', () => {
+    // 没有 ModelCallStarted，也没有对应的 ToolCall
     const nodes = buildTraceNodes([
-      event('RunStarted'),
-      event('ToolCall', { name: 'search' }),
-      event('RunCompleted'),
+      event('ModelCallCompleted', { model_call_id: 'mc-lost', duration_ms: 10 }),
+      event('ToolResult', { tool_call_id: 'tc-lost', name: 'read_note', success: false, error_code: 'TOOL_FAILED' }),
     ])
 
-    expect(nodes).toHaveLength(3)
-    expect(nodes.every((n) => n.children.length === 0)).toBe(true)
+    expect(nodes).toHaveLength(2)
+    expect(nodes[0].type).toBe('model_call')
+    // 落单的失败结果不能显示成 completed
+    expect(nodes[1].status).toBe('error')
+  })
+
+  it('Usage 副标题读后端真实字段 token_usage', () => {
+    const nodes = buildTraceNodes([event('Usage', { token_usage: 1234 })])
+    expect(nodes[0].subtitle).toBe('1234 tokens')
   })
 
   it('空事件列表返回空树', () => {
diff --git a/frontend/src/services/traceService.ts b/frontend/src/services/traceService.ts
index 3c6eb06..a5bd934 100644
--- a/frontend/src/services/traceService.ts
+++ b/frontend/src/services/traceService.ts
@@ -1,74 +1,121 @@
 import type { AgentEvent, TraceNode, TraceNodeType } from '@/contracts'
 
+/**
+ * 把扁平事件流折叠成调用树。
+ *
+ * 归属关系一律走 id，不依赖事件相邻顺序 —— 后端的真实顺序是
+ * ModelCallStarted → ModelCallCompleted → Usage → ToolCall/ToolResult，
+ * 工具在模型调用「完成」之后才执行，并且多个工具是并发跑的
+ * （runtime.py 里 asyncio.gather + Semaphore），事件会交错到达。
+ * 因此工具事件用 data.parent_model_call_id 找父节点，
+ * ToolResult 用 data.tool_call_id 回填对应 ToolCall 的状态。
+ */
 export function buildTraceNodes(events: AgentEvent[]): TraceNode[] {
-  const nodes: TraceNode[] = []
-  let currentModelCallId: string | null = null
+  const roots: TraceNode[] = []
+  /** model_call_id -> 模型调用节点 */
+  const modelCalls = new Map<string, TraceNode>()
+  /** tool_call_id -> 工具调用节点，供 ToolResult 回填状态 */
+  const toolCalls = new Map<string, TraceNode>()
 
   for (const event of events) {
-    const type = mapEventType(event.event)
-    const id = `seq-${event.sequence}`
-    const title = getNodeTitle(event)
-    const subtitle = getNodeSubtitle(event)
-    const status = getNodeStatus(event)
-
     const node: TraceNode = {
-      id,
+      id: `seq-${event.sequence}`,
       sequence: event.sequence,
-      type,
-      title,
-      subtitle,
-      status,
+      type: mapEventType(event.event),
+      title: getNodeTitle(event),
+      subtitle: getNodeSubtitle(event),
+      status: getNodeStatus(event),
       data: event.data,
       timestamp: event.timestamp,
       children: [],
     }
+    const modelCallId = asId(event.data.model_call_id)
+    const parentModelCallId = asId(event.data.parent_model_call_id)
+    const toolCallId = asId(event.data.tool_call_id)
 
-    if (event.event === 'ModelCallStarted') {
-      currentModelCallId = id
-      node.children = []
-      nodes.push(node)
-      continue
-    }
-
-    if (event.event === 'ModelCallCompleted' || event.event === 'ModelCallFailed') {
-      if (currentModelCallId) {
-        const modelCall = findNodeById(nodes, currentModelCallId)
-        if (modelCall) {
-          modelCall.status = event.event === 'ModelCallCompleted' ? 'completed' : 'error'
-          if (event.data.duration_ms != null) {
-            modelCall.duration_ms = event.data.duration_ms as number
-          }
-          if (event.data.finish_reason) {
-            modelCall.subtitle = `${modelCall.subtitle ?? ''} · ${String(event.data.finish_reason)}`
-          }
-        }
-        currentModelCallId = null
+    switch (event.event) {
+      case 'ModelCallStarted': {
+        if (modelCallId) modelCalls.set(modelCallId, node)
+        roots.push(node)
+        continue
       }
-      continue
-    }
 
-    if (currentModelCallId && type !== 'run' && type !== 'complete' && type !== 'error') {
-      const parent = findNodeById(nodes, currentModelCallId)
-      if (parent) {
-        node.parent_id = currentModelCallId
-        parent.children.push(node)
+      // 完成/失败事件不单独成节点，只更新对应模型调用的状态。
+      case 'ModelCallCompleted':
+      case 'ModelCallFailed': {
+        const target = modelCallId ? modelCalls.get(modelCallId) : undefined
+        if (!target) {
+          // 找不到配对的 Started（例如 SSE 断点恢复后只拿到后半段），保留为顶层节点。
+          roots.push(node)
+          continue
+        }
+        target.status = event.event === 'ModelCallCompleted' ? 'completed' : 'error'
+        const duration = asNumber(event.data.duration_ms)
+        if (duration != null) target.duration_ms = duration
+        const extra = event.event === 'ModelCallCompleted'
+          ? asText(event.data.finish_reason)
+          : asText(event.data.error_code)
+        if (extra) target.subtitle = target.subtitle ? `${target.subtitle} · ${extra}` : extra
+        continue
+      }
+
+      // ToolResult 只回填对应 ToolCall，避免工具结束后仍显示 running。
+      case 'ToolResult': {
+        const target = toolCallId ? toolCalls.get(toolCallId) : undefined
+        if (!target) {
+          attach(node, parentModelCallId, modelCalls, roots)
+          continue
+        }
+        target.status = event.data.success === false ? 'error' : 'completed'
+        const duration = asNumber(event.data.duration_ms)
+        if (duration != null) target.duration_ms = duration
+        const detail = event.data.success === false
+          ? asText(event.data.error_code) ?? '失败'
+          : undefined
+        if (detail) target.subtitle = target.subtitle ? `${target.subtitle} · ${detail}` : detail
+        // 结果数据合并到调用节点，展开详情时才能看到 output。
+        target.data = { ...target.data, result: event.data }
+        continue
+      }
+
+      case 'ToolCall': {
+        if (toolCallId) toolCalls.set(toolCallId, node)
+        attach(node, parentModelCallId, modelCalls, roots)
+        continue
+      }
+
+      default: {
+        attach(node, parentModelCallId, modelCalls, roots)
         continue
       }
     }
-
-    nodes.push(node)
   }
 
-  return nodes
+  return roots
 }
 
-function findNodeById(nodes: TraceNode[], id: string): TraceNode | null {
-  for (const node of nodes) {
-    if (node.id === id) return node
-    const found = findNodeById(node.children, id)
-    if (found) return found
+/** 有已知父模型调用就挂进去，否则留在顶层。 */
+function attach(
+  node: TraceNode,
+  parentModelCallId: string | null,
+  modelCalls: Map<string, TraceNode>,
+  roots: TraceNode[],
+) {
+  const parent = parentModelCallId ? modelCalls.get(parentModelCallId) : undefined
+  if (parent) {
+    node.parent_id = parent.id
+    parent.children.push(node)
+    return
   }
-  return null
+  roots.push(node)
+}
+
+function asId(value: unknown): string | null {
+  return typeof value === 'string' && value !== '' ? value : null
+}
+
+function asText(value: unknown): string | undefined {
+  return typeof value === 'string' && value !== '' ? value : undefined
 }
 
 function mapEventType(eventType: AgentEvent['event']): TraceNodeType {
@@ -132,12 +179,12 @@ function getNodeSubtitle(event: AgentEvent): string | undefined {
     case 'Citation':
       return data.heading_path ? String(data.heading_path) : undefined
     case 'Usage': {
-      // total_tokens 优先；缺失时回退到 input+output 之和。
-      const total = asNumber(data.total_tokens)
-      if (total != null) return `${total} tokens`
+      // 后端发的是累计 token_usage（runtime.py），其余字段仅作兼容回退。
+      const usage = asNumber(data.token_usage) ?? asNumber(data.total_tokens)
+      if (usage != null) return `${usage} tokens`
       const input = asNumber(data.input_tokens)
       const output = asNumber(data.output_tokens)
-      if (input == null && output == null) return '- tokens'
+      if (input == null && output == null) return undefined
       return `${(input ?? 0) + (output ?? 0)} tokens`
     }
     case 'PermissionRequired':
@@ -154,14 +201,19 @@ function getNodeStatus(event: AgentEvent): TraceNode['status'] {
     case 'RunFailed':
     case 'ModelCallFailed':
       return 'error'
+    case 'ToolResult':
+      // 只在 ToolResult 没配上 ToolCall 时（SSE 断点恢复）才成为独立节点，
+      // 那时也要按 success 显示，不能一律算成功。
+      return event.data.success === false ? 'error' : 'completed'
     case 'RunCompleted':
     case 'RunCancelled':
     case 'ModelCallCompleted':
-    case 'ToolResult':
     case 'Usage':
     case 'PermissionResolved':
       return 'completed'
     case 'ToolCall':
+      // 后端的 ToolCall 事件不带 status，起始一律 running，
+      // 由后到的 ToolResult 回填最终状态。
       if (event.data.status === 'completed') return 'completed'
       if (event.data.status === 'error') return 'error'
       return 'running'
diff --git a/frontend/src/stores/theme.spec.ts b/frontend/src/stores/theme.spec.ts
index 9d1d0cc..3394844 100644
--- a/frontend/src/stores/theme.spec.ts
+++ b/frontend/src/stores/theme.spec.ts
@@ -1,8 +1,41 @@
 // @vitest-environment happy-dom
-import { beforeEach, describe, expect, it } from 'vitest'
+import { beforeEach, describe, expect, it, vi } from 'vitest'
 import { createPinia, setActivePinia } from 'pinia'
 import { nextTick } from 'vue'
+import type { InstalledTheme } from '@/contracts'
 import { useThemeStore } from './theme'
+import * as themePkg from '@/services/themePackageService'
+
+vi.mock('@/services/themePackageService', () => ({
+  listInstalledThemes: vi.fn(async () => []),
+  inspectThemePackage: vi.fn(),
+  installTheme: vi.fn(),
+  uninstallTheme: vi.fn(),
+  installCommunityTheme: vi.fn(),
+}))
+
+const listInstalledThemes = vi.mocked(themePkg.listInstalledThemes)
+
+function customTheme(themeId: string, isDark = false): InstalledTheme {
+  return {
+    theme_id: themeId,
+    name: themeId,
+    version: '1.0.0',
+    author: '社区',
+    is_dark: isDark,
+    builtin: false,
+    enabled: true,
+    manifest: {
+      theme_id: themeId,
+      name: themeId,
+      version: '1.0.0',
+      author: '社区',
+      min_app_version: '0.1.0',
+      is_dark: isDark,
+      css_entry: 'theme.css',
+    },
+  }
+}
 
 beforeEach(() => {
   localStorage.clear()
@@ -13,6 +46,8 @@ beforeEach(() => {
     configurable: true,
     value: () => ({ matches: false }),
   })
+  listInstalledThemes.mockReset()
+  listInstalledThemes.mockResolvedValue([])
 })
 
 describe('代码块主题偏好', () => {
@@ -38,10 +73,106 @@ describe('代码块主题偏好', () => {
   it('恢复持久化的代码块主题偏好', async () => {
     localStorage.setItem('editor-appearance', JSON.stringify({ codeBlockTheme: 'github-dark' }))
     const store = useThemeStore()
-    store.initTheme()
+    await store.initTheme()
     await nextTick()
 
     expect(store.codeBlockTheme).toBe('github-dark')
     expect(document.documentElement.dataset.codeTheme).toBe('github-dark')
   })
 })
+
+describe('initTheme 恢复已保存主题', () => {
+  it('等自定义主题加载完成后再恢复，不会停在没有 data-theme 的裸状态', async () => {
+    // 回归：之前这里是 `void loadCustomThemes()` 没有 await，
+    // applyTheme('ocean') 在主题列表到达前找不到主题直接 return，
+    // 页面上一个 data-theme 都没有。
+    localStorage.setItem('theme', 'ocean')
+    listInstalledThemes.mockResolvedValue([customTheme('ocean', true)])
+
+    const store = useThemeStore()
+    await store.initTheme()
+
+    expect(document.documentElement.getAttribute('data-theme')).toBe('ocean')
+    expect(store.currentThemeId).toBe('ocean')
+    expect(store.themeLoadWarning).toBeNull()
+  })
+
+  it('首屏先同步落内置主题兜底，且不覆盖保存的自定义主题 id', async () => {
+    localStorage.setItem('theme', 'ocean')
+    let resolveList: (themes: InstalledTheme[]) => void = () => {}
+    listInstalledThemes.mockReturnValue(
+      new Promise<InstalledTheme[]>((resolve) => { resolveList = resolve }),
+    )
+
+    const store = useThemeStore()
+    const pending = store.initTheme()
+
+    // 接口还没回来：页面已经有兜底主题，不是裸的
+    expect(document.documentElement.getAttribute('data-theme')).toBe('light')
+    // 兜底不能把用户存的主题 id 冲掉，否则刷新后自定义主题就丢了
+    expect(localStorage.getItem('theme')).toBe('ocean')
+
+    resolveList([customTheme('ocean', true)])
+    await pending
+
+    expect(document.documentElement.getAttribute('data-theme')).toBe('ocean')
+  })
+
+  it('保存的主题已被卸载时回退到默认主题并给出提示', async () => {
+    localStorage.setItem('theme', 'removed-theme')
+    listInstalledThemes.mockResolvedValue([])
+
+    const store = useThemeStore()
+    await store.initTheme()
+
+    expect(document.documentElement.getAttribute('data-theme')).toBe('light')
+    expect(store.currentThemeId).toBe('light')
+    expect(store.themeLoadWarning).toContain('removed-theme')
+    // 失效记录要清掉，避免每次启动都报一遍
+    expect(localStorage.getItem('theme')).toBe('light')
+  })
+
+  it('主题列表加载失败时提示用户，而不是静默只剩内置主题', async () => {
+    localStorage.setItem('theme', 'dark')
+    listInstalledThemes.mockRejectedValue(new Error('网络不可用'))
+
+    const store = useThemeStore()
+    await store.initTheme()
+
+    expect(store.themeLoadWarning).toBe('自定义主题加载失败：网络不可用')
+    // 内置主题仍然要正常恢复
+    expect(document.documentElement.getAttribute('data-theme')).toBe('dark')
+  })
+
+  it('没有保存过主题时按系统偏好选择', async () => {
+    Object.defineProperty(window, 'matchMedia', {
+      configurable: true,
+      value: () => ({ matches: true }),
+    })
+
+    const store = useThemeStore()
+    await store.initTheme()
+
+    expect(document.documentElement.getAttribute('data-theme')).toBe('dark')
+    expect(localStorage.getItem('theme')).toBe('dark')
+  })
+})
+
+describe('applyTheme 返回值', () => {
+  it('主题不存在时返回 false 且不改动 data-theme', () => {
+    const store = useThemeStore()
+    store.applyTheme('light')
+
+    expect(store.applyTheme('not-installed')).toBe(false)
+    expect(document.documentElement.getAttribute('data-theme')).toBe('light')
+    expect(store.currentThemeId).toBe('light')
+  })
+
+  it('persist: false 时不写 localStorage', () => {
+    const store = useThemeStore()
+    expect(store.applyTheme('sepia', { persist: false })).toBe(true)
+
+    expect(document.documentElement.getAttribute('data-theme')).toBe('sepia')
+    expect(localStorage.getItem('theme')).toBeNull()
+  })
+})
diff --git a/frontend/src/stores/theme.ts b/frontend/src/stores/theme.ts
index bd3171c..0ed0f9c 100644
--- a/frontend/src/stores/theme.ts
+++ b/frontend/src/stores/theme.ts
@@ -47,6 +47,8 @@ export const useThemeStore = defineStore('theme', () => {
   const codeBlockTheme = ref<CodeBlockThemePreference>('auto')
   const isImporting = ref(false)
   const importError = ref<string | null>(null)
+  // 主题恢复阶段的提示（保存的主题已卸载、主题列表加载失败等），与导入错误分开。
+  const themeLoadWarning = ref<string | null>(null)
   const pendingInspection = ref<ThemePackageInspection | null>(null)
   let appearanceHydrated = false
 
@@ -66,9 +68,10 @@ export const useThemeStore = defineStore('theme', () => {
     return currentTheme.value?.code_theme ?? (isDark.value ? 'github-dark' : 'github-light')
   })
 
-  function applyTheme(themeId: string) {
+  /** 应用主题；返回 false 表示该主题当前不存在（未安装或还没加载完）。 */
+  function applyTheme(themeId: string, options: { persist?: boolean } = {}): boolean {
     const theme = allThemes.value.find((t) => t.theme_id === themeId)
-    if (!theme) return
+    if (!theme) return false
     currentThemeId.value = themeId
     const root = document.documentElement
     if (theme.builtin) {
@@ -82,10 +85,28 @@ export const useThemeStore = defineStore('theme', () => {
     } else {
       root.setAttribute('data-theme', themeId)
     }
-    localStorage.setItem('theme', themeId)
+    if (options.persist !== false) localStorage.setItem('theme', themeId)
+    return true
   }
 
-  function initTheme() {
+  function isBuiltinThemeId(themeId: string): boolean {
+    return builtinThemes.some((t) => t.theme_id === themeId)
+  }
+
+  function systemThemeId(): string {
+    return window.matchMedia?.('(prefers-color-scheme: dark)').matches ? 'dark' : 'light'
+  }
+
+  /**
+   * 恢复外观与主题。
+   *
+   * 自定义主题要等 listInstalledThemes 回来才存在于 allThemes 里，
+   * 所以恢复已保存主题必须在 loadCustomThemes 之后 —— 否则 applyTheme
+   * 找不到主题直接 return，页面会停在没有 data-theme 的裸状态。
+   * 首屏也不能干等接口：先同步落一个内置主题兜底（不写 localStorage，
+   * 以免把用户存的自定义主题 id 冲掉），加载完成后再切到真正保存的那个。
+   */
+  async function initTheme(): Promise<void> {
     const savedAppearance = localStorage.getItem('editor-appearance')
     if (savedAppearance) {
       try {
@@ -96,16 +117,25 @@ export const useThemeStore = defineStore('theme', () => {
         if (isCodeBlockThemePreference(value.codeBlockTheme)) codeBlockTheme.value = value.codeBlockTheme
       } catch { localStorage.removeItem('editor-appearance') }
     }
-    void loadCustomThemes()
-    const saved = localStorage.getItem('theme')
     appearanceHydrated = true
     persistAppearance()
-    if (saved) {
-      applyTheme(saved)
+
+    const saved = localStorage.getItem('theme')
+    const fallback = systemThemeId()
+    applyTheme(saved && isBuiltinThemeId(saved) ? saved : fallback, { persist: false })
+
+    await loadCustomThemes()
+
+    if (!saved) {
+      applyTheme(fallback)
       return
     }
-    const prefersDark = window.matchMedia('(prefers-color-scheme: dark)').matches
-    applyTheme(prefersDark ? 'dark' : 'light')
+    if (applyTheme(saved)) return
+
+    // 保存的主题已被卸载，或主题列表加载失败：回退并清掉失效记录。
+    themeLoadWarning.value = `主题「${saved}」已不可用，已回退到默认主题。`
+    localStorage.removeItem('theme')
+    applyTheme(fallback)
   }
 
   async function loadCustomThemes() {
@@ -122,7 +152,13 @@ export const useThemeStore = defineStore('theme', () => {
         author: t.author,
         code_theme: t.code_theme,
       }))]
-    } catch { /* keep builtin only */ }
+      themeLoadWarning.value = null
+    } catch (error) {
+      // 只保留内置主题，但要让用户知道自定义主题这次没加载上。
+      themeLoadWarning.value = error instanceof Error
+        ? `自定义主题加载失败：${error.message}`
+        : '自定义主题加载失败。'
+    }
   }
 
   function toggleTheme() {
@@ -272,6 +308,7 @@ export const useThemeStore = defineStore('theme', () => {
     resolvedCodeBlockTheme,
     isImporting,
     importError,
+    themeLoadWarning,
     pendingInspection,
     allThemes,
     applyTheme,
diff --git a/frontend/src/stores/workspace.ts b/frontend/src/stores/workspace.ts
index abdca01..bd64a1d 100644
--- a/frontend/src/stores/workspace.ts
+++ b/frontend/src/stores/workspace.ts
@@ -62,6 +62,12 @@ export const useWorkspaceStore = defineStore('workspace', () => {
     recentVaults.value = await workspaceService.getRecentVaults()
   }
 
+  /** 重新拉取文件树。插件命令返回 refresh:workspace 时需要。 */
+  async function refreshFileTree() {
+    if (!hasVault.value) return
+    fileTree.value = await workspaceService.getFileTree()
+  }
+
   async function openVault(path: string) {
     isLoading.value = true
     try {
@@ -161,6 +167,7 @@ export const useWorkspaceStore = defineStore('workspace', () => {
     closeFile,
     setActiveFile,
     loadRecentVaults,
+    refreshFileTree,
     openVault,
     createVault,
     addFileToTree,