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

审阅意见逐项修复：

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

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

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

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

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

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

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

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

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;