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/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)