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

实现第二阶段分工表中吉海燕负责的 P0/P1 前端能力。

- Agent Trace 可视化：新增 traceService 将扁平事件流折叠为树
  （ModelCallStarted 区间内的工具/文本事件挂为子节点，运行级事件保持顶层），
  TraceTimeline 支持时间线/树两种视图、耗时统计与引用跳转。
- 主题包：新增 themePackageService（Web Mock Adapter），
  校验 manifest 必填字段与 theme_id 格式，拒绝远程 css_entry；
  CSS 侧拒绝 @import / expression() / javascript:，
  未通过校验的 CSS 不会注入页面。内置主题走 data-theme=light|dark|sepia，
  自定义主题走 data-theme={theme_id} + 独立 style 节点。
  ThemesView 增加“已安装/社区主题”两个标签页与导入、预览、卸载流程。
- Mermaid：新增 mermaidService（securityLevel: strict）与 MermaidBlock，
  markdown 渲染管线识别 mermaid 代码块；MarkdownContent 随亮/暗主题重渲染
  （SVG 配色在渲染时烘焙，无法靠 CSS 变量事后调整）。
- 插件贡献 UI：PluginsView 增加“概览/命令/设置”标签页，
  PluginSettingsPanel 按 Schema 动态生成表单；
  secret 字段只写不读，仅展示 configured 状态，不进 store 也不回显。

与 main 上队友成果的整合（rebase 时处理）：
- 命令面板保留队友基于真实后端的实现（when 条件求值、效果白名单、
  参数命令跳详情页），仅叠加我新增的主题/任务两条内置命令。
- 删除我先前的 pluginContributionService（mock 版），
  统一改用队友已落地的 pluginService 真实接口；
  相应修正表单以匹配真实契约（options 为 string[]、min/max 可空、无 placeholder）。
- 移除 contracts 中与队友重复的 PluginHostStatus / PluginCommand /
  PluginSettingField / PluginSettingsSchema 声明，以队友版本为准。
- PluginsView 概览页保留队友的 PluginMcpPanel，并补回被我改写时丢掉的空状态。

顺带修复：
- 开启 skipLibCheck —— mermaid 11.17 把 type-fest 泄漏进了发布产物的
  .d.ts，但只声明为自身 devDependency，vue-tsc -b 会因此报错。

验证：pnpm test 26 文件 / 113 测试通过（新增 traceService、
themePackageService 两个测试文件共 22 项）；pnpm build 通过。

frontend/package.json

@@ -32,6 +32,7 @@
     "codemirror": "^6.0.0",
     "dompurify": "^3.4.14",
     "marked": "^15.0.0",
+    "mermaid": "^11.17.2",
     "pinia": "^4.0.0",
     "shiki": "^4.4.3",
     "vue": "^3.5.0",

frontend/src/components/common/CommandPalette.vue

@@ -29,7 +29,9 @@ const builtinCommands = computed<Command[]>(() => [
   { id: 'search', label: '全局搜索', hint: '导航', run: () => router.push('/search') },
   { id: 'chat', label: '打开 AI 对话', hint: '导航', run: () => router.push('/chat') },
   { id: 'agent', label: '创建智能体运行', hint: '导航', run: () => router.push('/agent/runs') },
+  { id: 'themes', label: '主题管理', hint: '导航', run: () => router.push('/themes') },
   { id: 'settings', label: '打开设置', hint: '导航', run: () => router.push('/settings') },
+  { id: 'tasks', label: '任务列表', hint: '导航', run: () => router.push('/tasks') },
   { id: 'mode', label: `切换为${editorStore.mode === 'source' ? '写作' : '源码'}模式`, hint: '编辑器', run: () => editorStore.toggleMode() },
   { id: 'save', label: '保存当前笔记', hint: '编辑器', run: () => editorStore.save() },
   { id: 'theme', label: `切换为${themeStore.isDark ? '浅色' : '深色'}主题`, hint: '外观', run: () => themeStore.toggleTheme() },
@@ -61,6 +63,7 @@ const filteredCommands = computed(() => {
   return value ? commands.value.filter((command) => `${command.label} ${command.hint}`.toLocaleLowerCase().includes(value)) : commands.value
 })
 
+
 function show() {
   selectionSnapshot.value = window.getSelection()?.toString() || null
   open.value = true

frontend/src/components/common/MarkdownContent.vue

@@ -1,14 +1,19 @@
 <script setup lang="ts">
-import { ref, watch } from 'vue'
+import { computed, ref, watch } from 'vue'
 import { renderMarkdown } from '@/utils/markdown'
+import { useThemeStore } from '@/stores/theme'
 
 const props = defineProps<{ source: string }>()
+const themeStore = useThemeStore()
 const html = ref('')
 let renderVersion = 0
 
-watch(() => props.source, async (source) => {
+const diagramTheme = computed<'light' | 'dark'>(() => (themeStore.isDark ? 'dark' : 'light'))
+
+// 主题切换需要重渲染：Mermaid SVG 的配色在渲染时烘焙，无法靠 CSS 变量事后调整。
+watch([() => props.source, diagramTheme], async ([source, theme]) => {
   const version = ++renderVersion
-  const result = await renderMarkdown(source)
+  const result = await renderMarkdown(source, { theme })
   if (version === renderVersion) html.value = result
 }, { immediate: true })
 </script>
@@ -48,4 +53,27 @@ watch(() => props.source, async (source) => {
   font-weight: var(--shiki-dark-font-weight) !important;
   text-decoration: var(--shiki-dark-text-decoration) !important;
 }
+.markdown-content .markdown-mermaid {
+  overflow: auto;
+  margin: .85em 0;
+  padding: 16px;
+  border: 1px solid var(--color-border-default);
+  border-radius: 6px;
+  background: var(--color-surface-primary);
+  text-align: center;
+}
+.markdown-content .markdown-mermaid svg {
+  max-width: 100%;
+  height: auto;
+}
+.markdown-content pre.mermaid-error {
+  padding: 12px 16px;
+  border: 1px solid var(--color-error);
+  border-radius: 6px;
+  background: var(--color-error-soft);
+  color: var(--color-error);
+  white-space: pre-wrap;
+  font-family: var(--font-ui-mono);
+  font-size: .875em;
+}
 </style>

frontend/src/components/common/MermaidBlock.vue

@@ -0,0 +1,194 @@
+<script setup lang="ts">
+import { computed, onMounted, ref, watch } from 'vue'
+import { renderMermaid, useMermaidTheme } from '@/services/mermaidService'
+
+const props = defineProps<{
+  source: string
+  interactive?: boolean
+  zoomable?: boolean
+}>()
+
+const emit = defineEmits<{
+  (e: 'error', message: string): void
+  (e: 'rendered', info: { width: number; height: number }): void
+}>()
+
+const { mermaidTheme } = useMermaidTheme()
+const svgHtml = ref('')
+const isLoading = ref(true)
+const hasError = ref(false)
+const errorMessage = ref('')
+const scale = ref(1)
+let renderToken = 0
+
+const canZoom = computed(() => props.zoomable ?? props.interactive ?? false)
+
+async function doRender() {
+  const token = ++renderToken
+  isLoading.value = true
+  hasError.value = false
+  try {
+    const result = await renderMermaid(props.source, {
+      theme: mermaidTheme.value,
+      mode: props.interactive ? 'interactive' : 'static',
+    })
+    if (token !== renderToken) return
+    svgHtml.value = result.svg
+    if (result.warnings.length > 0) {
+      hasError.value = true
+      errorMessage.value = result.warnings.join('\n')
+      emit('error', result.warnings[0])
+    }
+    emit('rendered', { width: result.width, height: result.height })
+  } catch (err) {
+    if (token !== renderToken) return
+    hasError.value = true
+    errorMessage.value = err instanceof Error ? err.message : '渲染失败'
+    emit('error', errorMessage.value)
+  } finally {
+    if (token === renderToken) isLoading.value = false
+  }
+}
+
+onMounted(doRender)
+
+watch(() => [props.source, mermaidTheme.value], () => { scale.value = 1; doRender() })
+
+function zoomIn() { scale.value = Math.min(scale.value * 1.2, 5) }
+function zoomOut() { scale.value = Math.max(scale.value / 1.2, 0.2) }
+function zoomReset() { scale.value = 1 }
+</script>
+
+<template>
+  <div class="mermaid-block" :class="{ interactive, 'has-error': hasError }">
+    <div v-if="isLoading" class="mermaid-loading">
+      <span class="loading-spinner"></span>
+      <span>正在渲染 Mermaid 图表…</span>
+    </div>
+    <div
+      v-else
+      class="mermaid-container"
+      :style="{ transform: `scale(${scale})`, transformOrigin: 'top left' }"
+      v-html="svgHtml"
+    />
+    <div v-if="canZoom && !isLoading" class="mermaid-toolbar">
+      <button class="toolbar-btn" @click="zoomOut" title="缩小">−</button>
+      <span class="zoom-level">{{ Math.round(scale * 100) }}%</span>
+      <button class="toolbar-btn" @click="zoomIn" title="放大">+</button>
+      <button class="toolbar-btn" @click="zoomReset" title="重置">⟲</button>
+    </div>
+    <div v-if="hasError" class="mermaid-error">
+      <strong>渲染失败</strong>
+      <pre>{{ errorMessage }}</pre>
+    </div>
+  </div>
+</template>
+
+<style scoped>
+.mermaid-block {
+  position: relative;
+  margin: .85em 0;
+  padding: var(--space-md);
+  border: 1px solid var(--color-border-default);
+  border-radius: var(--radius-md);
+  background: var(--color-surface-primary);
+  overflow: auto;
+  user-select: text;
+}
+
+.mermaid-block :deep(svg) {
+  max-width: 100%;
+  height: auto;
+  display: block;
+}
+
+.mermaid-container {
+  transition: transform var(--motion-fast);
+}
+
+.mermaid-loading {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  gap: var(--space-sm);
+  padding: var(--space-2xl);
+  color: var(--color-text-tertiary);
+  font-size: var(--font-size-sm);
+}
+
+.loading-spinner {
+  width: 16px;
+  height: 16px;
+  border: 2px solid var(--color-border-default);
+  border-top-color: var(--color-accent-primary);
+  border-radius: 50%;
+  animation: spin 0.8s linear infinite;
+}
+
+@keyframes spin {
+  to { transform: rotate(360deg); }
+}
+
+.mermaid-toolbar {
+  position: sticky;
+  bottom: 4px;
+  left: 0;
+  right: 0;
+  display: inline-flex;
+  align-items: center;
+  gap: var(--space-xs);
+  padding: 4px 8px;
+  margin-top: var(--space-sm);
+  border-radius: var(--radius-md);
+  background: var(--color-background-secondary);
+  border: 1px solid var(--color-border-default);
+}
+
+.toolbar-btn {
+  width: 24px;
+  height: 24px;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  border-radius: var(--radius-sm);
+  font-size: 14px;
+  background: var(--color-surface-primary);
+  border: 1px solid var(--color-border-default);
+  color: var(--color-text-secondary);
+  cursor: pointer;
+  transition: all var(--motion-fast);
+}
+.toolbar-btn:hover {
+  border-color: var(--color-accent-secondary);
+  color: var(--color-accent-primary);
+}
+
+.zoom-level {
+  font-size: var(--font-size-xs);
+  color: var(--color-text-tertiary);
+  min-width: 44px;
+  text-align: center;
+  font-family: var(--font-ui-mono);
+}
+
+.mermaid-error {
+  margin-top: var(--space-sm);
+  padding: var(--space-sm) var(--space-md);
+  border-radius: var(--radius-sm);
+  background: var(--color-error-soft);
+  color: var(--color-error);
+  font-size: var(--font-size-sm);
+}
+.mermaid-error strong { display: block; margin-bottom: 4px; }
+.mermaid-error pre {
+  margin: 0;
+  white-space: pre-wrap;
+  font-family: var(--font-ui-mono);
+  font-size: var(--font-size-xs);
+  color: var(--color-text-secondary);
+}
+
+.has-error .mermaid-container {
+  opacity: 0.6;
+}
+</style>

frontend/src/contracts/index.ts

@@ -792,3 +792,105 @@ export interface ApiIndexJob {
   scope: 'all' | 'notes' | 'vectors'
   created_at: string
 }
+
+// ============ Theme Package (Phase 2) ============
+
+export interface ThemeManifest {
+  theme_id: string
+  name: string
+  version: string
+  author: string
+  description?: string
+  min_app_version: string
+  is_dark: boolean
+  css_entry: string
+  preview?: string
+  tags?: string[]
+  homepage?: string
+  license?: string
+}
+
+export interface InstalledTheme {
+  theme_id: string
+  name: string
+  version: string
+  author: string
+  description?: string
+  is_dark: boolean
+  builtin: boolean
+  enabled: boolean
+  installed_at?: string
+  manifest: ThemeManifest
+  code_theme?: 'github-light' | 'github-dark'
+}
+
+export interface ThemePackageInspection {
+  package_id: string
+  manifest: ThemeManifest
+  preview_url: string
+  warnings: string[]
+  compatible: boolean
+  error_code?: string
+}
+
+export type ThemeErrorCode =
+  | 'THEME_PACKAGE_NOT_FOUND'
+  | 'THEME_MANIFEST_INVALID'
+  | 'THEME_PACKAGE_INCOMPATIBLE'
+  | 'THEME_CSS_INVALID'
+  | 'THEME_SECURITY_VIOLATION'
+  | 'THEME_INSTALL_FAILED'
+  | 'THEME_UNINSTALL_FAILED'
+
+// ============ Mermaid Renderer (Phase 2) ============
+
+export interface MermaidRenderResult {
+  svg: string
+  width: number
+  height: number
+  warnings: string[]
+}
+
+export interface MermaidParseError {
+  message: string
+  line?: number
+  column?: number
+}
+
+// ============ Agent Trace Node (Phase 2 visualization) ============
+
+export type TraceNodeType =
+  | 'run'
+  | 'model_call'
+  | 'tool_call'
+  | 'tool_result'
+  | 'text'
+  | 'thinking'
+  | 'citation'
+  | 'usage'
+  | 'permission'
+  | 'error'
+  | 'complete'
+
+export interface TraceNode {
+  id: string
+  sequence: number
+  type: TraceNodeType
+  title: string
+  subtitle?: string
+  status: 'pending' | 'running' | 'completed' | 'error' | 'cancelled'
+  duration_ms?: number
+  children: TraceNode[]
+  data: Record<string, unknown>
+  timestamp: string
+  parent_id?: string
+}
+
+export interface TraceTimelineGroup {
+  group_id: string
+  label: string
+  start_sequence: number
+  end_sequence: number
+  duration_ms?: number
+  nodes: TraceNode[]
+}

frontend/src/features/agent/AgentView.vue

@@ -4,8 +4,9 @@ import { useRoute, useRouter } from 'vue-router'
 import { useAgentStore } from '@/stores/agent'
 import { useProviderStore } from '@/stores/provider'
 import { useSkillStore } from '@/stores/skill'
+import TraceTimeline from './TraceTimeline.vue'
 import type { AgentEvent } from '@/contracts'
-import { eventLabel, localizeDetails, permissionLabel, runStatusLabel, toolLabel } from './labels'
+import { localizeDetails, permissionLabel, runStatusLabel, toolLabel } from './labels'
 import ToolOption from './ToolOption.vue'
 
 const route = useRoute()
@@ -95,15 +96,29 @@ function eventText(event: AgentEvent) {
     </form>
 
     <div v-else class="trace-layout">
-      <div class="panel run-summary"><div><span class="badge info">{{ runStatusLabel(agentStore.activeRun?.status) }}</span><h2>{{ agentStore.activeRunId }}</h2></div><div class="inline-actions"><span>步骤 {{ agentStore.currentStep }} / {{ agentStore.activeRun?.max_steps }}</span><button v-if="agentStore.isRunning" class="button-danger" @click="agentStore.cancelRun(agentStore.activeRunId!)">取消运行</button></div></div>
+      <div class="panel run-summary">
-      <div class="timeline">
+        <div>
-        <article v-for="event in agentStore.events" :key="event.sequence" class="event-card item-card">
+          <span class="badge" :class="{
-          <div class="event-head"><span class="badge" :class="{ success: event.event === 'RunCompleted', error: event.event === 'RunFailed', warning: event.event === 'PermissionRequired' }">{{ eventLabel(event.event) }}</span><span>第 {{ event.sequence }} 条 · {{ new Date(event.timestamp).toLocaleTimeString() }}</span></div>
+            success: agentStore.activeRun?.status === 'completed',
-          <p v-if="eventText(event)" class="event-text">{{ eventText(event) }}</p>
+            error: agentStore.activeRun?.status === 'failed',
-          <pre v-if="['ToolCall', 'ToolResult', 'Citation', 'Usage'].includes(event.event)">{{ JSON.stringify(localizeDetails(event.data), null, 2) }}</pre>
+            warning: agentStore.activeRun?.status === 'waiting_permission',
-        </article>
+            info: agentStore.activeRun?.status === 'running' || agentStore.activeRun?.status === 'queued',
-        <div v-if="!agentStore.events.length" class="empty-state"><div><strong>等待执行轨迹</strong><p>事件连接建立后将在这里实时显示。</p></div></div>
+          }">{{ runStatusLabel(agentStore.activeRun?.status) }}</span>
+          <h2>{{ agentStore.activeRun?.run_id ?? agentStore.activeRunId }}</h2>
+          <p v-if="agentStore.activeRun" class="run-meta">
+            <span>步骤 {{ agentStore.currentStep }} / {{ agentStore.activeRun.max_steps }}</span>
+            <span>·</span>
+            <span>Token: {{ agentStore.activeRun.token_usage?.total_tokens ?? 0 }}</span>
+            <span v-if="agentStore.activeRun.started_at">·</span>
+            <span v-if="agentStore.activeRun.started_at">开始: {{ new Date(agentStore.activeRun.started_at).toLocaleString() }}</span>
+          </p>
+        </div>
+        <div class="inline-actions">
+          <button v-if="agentStore.isRunning" class="button-danger" @click="agentStore.cancelRun(agentStore.activeRunId!)">取消运行</button>
+          <button class="button-secondary" @click="agentStore.loadRun(agentStore.activeRunId!)">重新加载</button>
+        </div>
       </div>
+      <TraceTimeline :events="agentStore.events" :run-status="agentStore.activeRun?.status" />
     </div>
 
     <div v-if="agentStore.permissionRequest" class="modal-backdrop">
@@ -118,14 +133,24 @@ function eventText(event: AgentEvent) {
 .tool-grid { display: grid; align-items: start; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: var(--space-sm); }
 .network { display: flex; gap: var(--space-sm); }
 .trace-layout { display: grid; gap: var(--space-lg); }
-.run-summary, .event-head { display: flex; align-items: center; justify-content: space-between; gap: var(--space-md); }
+.run-summary {
-.run-summary h2 { margin-top: var(--space-sm); font-family: var(--font-ui-mono); font-size: var(--font-size-lg); }
+  display: flex;
-.timeline { position: relative; display: grid; gap: var(--space-md); padding-left: var(--space-md); }
+  align-items: flex-start;
-.timeline::before { content: ''; position: absolute; top: 10px; bottom: 10px; left: 1px; width: 2px; border-radius: var(--radius-full); background: var(--color-border-default); }
+  justify-content: space-between;
-.event-card { position: relative; }
+  gap: var(--space-md);
-.event-card::before { content: ''; position: absolute; top: 20px; left: calc(-1 * var(--space-md) - 5px); width: 8px; height: 8px; border: 2px solid var(--color-surface-primary); border-radius: var(--radius-full); background: var(--color-accent-primary); box-shadow: 0 0 0 1px var(--color-accent-secondary); }
+}
-.event-head { color: var(--color-text-tertiary); font-size: var(--font-size-xs); }
+.run-summary h2 {
-.event-text { margin-top: var(--space-md); white-space: pre-wrap; line-height: var(--line-height-relaxed); }
+  margin-top: var(--space-sm);
-pre { margin-top: var(--space-md); max-height: 260px; overflow: auto; padding: var(--space-md); border-radius: var(--radius-md); background: var(--color-background-secondary); font-family: var(--font-ui-mono); font-size: var(--font-size-xs); white-space: pre-wrap; user-select: text; }
+  font-family: var(--font-ui-mono);
+  font-size: var(--font-size-lg);
+  word-break: break-all;
+}
+.run-meta {
+  display: flex;
+  gap: var(--space-sm);
+  margin-top: var(--space-xs);
+  font-size: var(--font-size-xs);
+  color: var(--color-text-tertiary);
+}
 .permission-actions { margin-top: var(--space-lg); }
 </style>

frontend/src/features/agent/TraceTimeline.vue

@@ -0,0 +1,661 @@
+<script setup lang="ts">
+import { computed, ref } from 'vue'
+import type { TraceNode, AgentEvent } from '@/contracts'
+import { buildTraceNodes, getToolCallsFromEvents, getTotalDuration } from '@/services/traceService'
+import { eventLabel } from './labels'
+
+const props = defineProps<{
+  events: AgentEvent[]
+  runStatus?: string
+}>()
+
+const emit = defineEmits<{
+  (e: 'open-citation', data: Record<string, unknown>): void
+}>()
+
+const expandedNodes = ref<Set<string>>(new Set())
+const viewMode = ref<'timeline' | 'tree'>('timeline')
+const showDetails = ref(true)
+
+const traceNodes = computed(() => buildTraceNodes(props.events))
+const toolCalls = computed(() => getToolCallsFromEvents(props.events))
+const totalDuration = computed(() => getTotalDuration(props.events))
+
+const summaryStats = computed(() => {
+  const events = props.events
+  return {
+    totalEvents: events.length,
+    modelCalls: events.filter((e) => e.event === 'ModelCallStarted').length,
+    toolCalls: events.filter((e) => e.event === 'ToolCall').length,
+    citations: events.filter((e) => e.event === 'Citation').length,
+    errors: events.filter((e) => e.event.endsWith('Failed') || e.event === 'RunFailed').length,
+  }
+})
+
+function toggleExpand(nodeId: string) {
+  if (expandedNodes.value.has(nodeId)) {
+    expandedNodes.value.delete(nodeId)
+  } else {
+    expandedNodes.value.add(nodeId)
+  }
+}
+
+function isExpanded(nodeId: string): boolean {
+  return expandedNodes.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')
+}
+
+function formatDuration(ms: number): string {
+  if (ms < 1000) return `${ms}ms`
+  if (ms < 60000) return `${(ms / 1000).toFixed(1)}s`
+  return `${(ms / 60000).toFixed(1)}m`
+}
+
+function getNodeIcon(type: TraceNode['type']): string {
+  const icons: Record<TraceNode['type'], string> = {
+    run: '▶',
+    model_call: '🤖',
+    tool_call: '🔧',
+    tool_result: '✅',
+    text: '💬',
+    thinking: '🧠',
+    citation: '📚',
+    usage: '📊',
+    permission: '🔒',
+    error: '❌',
+    complete: '🏁',
+  }
+  return icons[type] ?? '•'
+}
+
+function getNodeStatusClass(node: TraceNode): string {
+  switch (node.status) {
+    case 'running': return 'status-running'
+    case 'completed': return 'status-completed'
+    case 'error': return 'status-error'
+    case 'pending': return 'status-pending'
+    case 'cancelled': return 'status-cancelled'
+    default: return 'status-completed'
+  }
+}
+
+function prettyData(data: Record<string, unknown>): string {
+  const filtered = { ...data }
+  if (typeof filtered.output === 'string' && filtered.output.length > 500) {
+    filtered.output = filtered.output.slice(0, 500) + '...'
+  }
+  return JSON.stringify(filtered, null, 2)
+}
+
+function flatNodes(nodes: TraceNode[], depth = 0): Array<{ node: TraceNode; depth: number }> {
+  const result: Array<{ node: TraceNode; depth: number }> = []
+  for (const node of nodes) {
+    result.push({ node, depth })
+    if (node.children.length > 0 && isExpanded(node.id)) {
+      result.push(...flatNodes(node.children, depth + 1))
+    }
+  }
+  return result
+}
+
+const flatTrace = computed(() => flatNodes(traceNodes.value))
+</script>
+
+<template>
+  <div class="trace-visualization">
+    <div class="trace-header">
+      <div class="trace-stats">
+        <div class="stat-item">
+          <span class="stat-value">{{ summaryStats.totalEvents }}</span>
+          <span class="stat-label">事件</span>
+        </div>
+        <div class="stat-item">
+          <span class="stat-value">{{ summaryStats.modelCalls }}</span>
+          <span class="stat-label">模型调用</span>
+        </div>
+        <div class="stat-item">
+          <span class="stat-value">{{ summaryStats.toolCalls }}</span>
+          <span class="stat-label">工具调用</span>
+        </div>
+        <div class="stat-item">
+          <span class="stat-value">{{ summaryStats.citations }}</span>
+          <span class="stat-label">引用</span>
+        </div>
+        <div class="stat-item">
+          <span class="stat-value duration">{{ totalDuration > 0 ? formatDuration(totalDuration) : '-' }}</span>
+          <span class="stat-label">总耗时</span>
+        </div>
+      </div>
+      <div class="trace-controls">
+        <div class="view-toggle">
+          <button :class="{ active: viewMode === 'timeline' }" @click="viewMode = 'timeline'">时间线</button>
+          <button :class="{ active: viewMode === 'tree' }" @click="viewMode = 'tree'">树形</button>
+        </div>
+        <button class="detail-toggle" @click="showDetails = !showDetails">
+          {{ showDetails ? '隐藏详情' : '显示详情' }}
+        </button>
+      </div>
+    </div>
+
+    <div v-if="viewMode === 'timeline'" class="timeline-view">
+      <div class="timeline">
+        <article
+          v-for="event in events"
+          :key="event.sequence"
+          class="event-card"
+          :class="{ expanded: isExpanded(`event-${event.sequence}`) }"
+        >
+          <div class="event-dot" :class="`dot-${event.event}`"></div>
+          <div class="event-content" @click="toggleExpand(`event-${event.sequence}`)">
+            <div class="event-header">
+              <span class="event-badge" :class="{
+                success: event.event === 'RunCompleted' || event.event === 'ModelCallCompleted',
+                error: event.event.endsWith('Failed') || event.event === 'RunFailed',
+                warning: event.event === 'PermissionRequired',
+                info: event.event === 'ToolCall' || event.event === 'ModelCallStarted',
+              }">{{ eventLabel(event.event as any) }}</span>
+              <span class="event-time">{{ formatTime(event.timestamp) }}</span>
+            </div>
+            <div v-if="event.data.text || event.data.message" class="event-text">
+              {{ (event.data.text || event.data.message) as string }}
+            </div>
+            <div v-else-if="event.data.name" class="event-name">
+              <code>{{ event.data.name as string }}</code>
+              <span v-if="event.data.duration_ms != null" class="event-duration">
+                {{ formatDuration(event.data.duration_ms as number) }}
+              </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>
+            </div>
+            <div v-if="event.event === 'Citation'" class="event-citation" @click.stop="emit('open-citation', event.data)">
+              <span class="cite-icon">📎</span>
+              <span>{{ (event.data.heading_path || event.data.note_title || event.data.file_path) as string }}</span>
+            </div>
+            <div v-if="event.event === 'PermissionRequired'" class="event-permission">
+              <span class="perm-label">权限:</span>
+              <code>{{ event.data.permission as string }}</code>
+            </div>
+          </div>
+          <div v-if="isExpanded(`event-${event.sequence}`) && showDetails" class="event-detail">
+            <details open>
+              <summary>完整数据</summary>
+              <pre>{{ prettyData(event.data) }}</pre>
+            </details>
+          </div>
+        </article>
+
+        <div v-if="!events.length" class="empty-state">
+          <div><strong>等待执行轨迹</strong><p>事件连接建立后将在这里实时显示。</p></div>
+        </div>
+      </div>
+    </div>
+
+    <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">
+            {{ isExpanded(item.node.id) ? '▼' : '▶' }}
+          </span>
+          <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>
+          <span v-if="item.node.subtitle" class="node-subtitle">{{ item.node.subtitle }}</span>
+          <span v-if="item.node.duration_ms != null" class="node-duration">
+            {{ formatDuration(item.node.duration_ms) }}
+          </span>
+        </div>
+        <div v-if="isExpanded(item.node.id) && item.node.children.length === 0 && showDetails" class="node-detail">
+          <pre>{{ prettyData(item.node.data) }}</pre>
+        </div>
+      </div>
+      <div v-if="!traceNodes.length" class="empty-state">
+        <div><strong>暂无树形数据</strong><p>运行开始后将展示调用树。</p></div>
+      </div>
+    </div>
+
+    <div v-if="toolCalls.length > 0 && viewMode === 'timeline'" class="tool-calls-summary panel">
+      <h3 class="panel-title">工具调用统计</h3>
+      <div class="tool-call-list">
+        <div v-for="call in toolCalls" :key="call.tool_call_id" class="tool-call-item" :class="call.status">
+          <span class="tool-status-dot"></span>
+          <code class="tool-name">{{ call.name }}</code>
+          <span v-if="call.duration_ms != null" class="tool-duration">
+            {{ formatDuration(call.duration_ms) }}
+          </span>
+          <span class="tool-status-badge" :class="call.status">
+            {{ call.status === 'completed' ? '成功' : call.status === 'error' ? '失败' : call.status }}
+          </span>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<style scoped>
+.trace-visualization {
+  display: grid;
+  gap: var(--space-lg);
+}
+
+.trace-header {
+  display: flex;
+  justify-content: space-between;
+  align-items: flex-start;
+  gap: var(--space-md);
+  flex-wrap: wrap;
+}
+
+.trace-stats {
+  display: flex;
+  gap: var(--space-lg);
+  flex-wrap: wrap;
+}
+
+.stat-item {
+  display: flex;
+  flex-direction: column;
+  gap: 2px;
+}
+
+.stat-value {
+  font-size: var(--font-size-xl);
+  font-weight: 600;
+  color: var(--color-text-primary);
+  font-variant-numeric: tabular-nums;
+}
+
+.stat-value.duration {
+  color: var(--color-accent-primary);
+}
+
+.stat-label {
+  font-size: var(--font-size-xs);
+  color: var(--color-text-tertiary);
+}
+
+.trace-controls {
+  display: flex;
+  gap: var(--space-sm);
+  align-items: center;
+}
+
+.view-toggle {
+  display: flex;
+  border: 1px solid var(--color-border-default);
+  border-radius: var(--radius-md);
+  overflow: hidden;
+}
+
+.view-toggle button {
+  padding: 4px 12px;
+  background: var(--color-surface-primary);
+  border: none;
+  border-right: 1px solid var(--color-border-default);
+  color: var(--color-text-secondary);
+  font-size: var(--font-size-sm);
+  cursor: pointer;
+  transition: all var(--motion-fast);
+}
+
+.view-toggle button:last-child { border-right: none; }
+.view-toggle button.active {
+  background: var(--color-accent-primary);
+  color: var(--color-text-inverse);
+}
+
+.detail-toggle {
+  padding: 4px 12px;
+  background: var(--color-surface-primary);
+  border: 1px solid var(--color-border-default);
+  border-radius: var(--radius-md);
+  color: var(--color-text-secondary);
+  font-size: var(--font-size-sm);
+  cursor: pointer;
+}
+
+.detail-toggle:hover { border-color: var(--color-accent-secondary); }
+
+.timeline {
+  position: relative;
+  display: grid;
+  gap: var(--space-sm);
+  padding-left: var(--space-md);
+}
+
+.timeline::before {
+  content: '';
+  position: absolute;
+  top: 10px;
+  bottom: 10px;
+  left: 7px;
+  width: 2px;
+  border-radius: var(--radius-full);
+  background: var(--color-border-default);
+}
+
+.event-card {
+  position: relative;
+  padding: var(--space-md);
+  background: var(--color-surface-primary);
+  border: 1px solid var(--color-border-default);
+  border-radius: var(--radius-md);
+  transition: border-color var(--motion-fast), box-shadow var(--motion-fast);
+}
+
+.event-card:hover {
+  border-color: var(--color-accent-secondary);
+  box-shadow: var(--shadow-sm);
+}
+
+.event-dot {
+  position: absolute;
+  top: 18px;
+  left: -22px;
+  width: 10px;
+  height: 10px;
+  border-radius: 50%;
+  background: var(--color-accent-primary);
+  border: 2px solid var(--color-surface-primary);
+  box-shadow: 0 0 0 1px var(--color-border-default);
+}
+
+.dot-RunStarted, .dot-ModelCallStarted { background: var(--color-accent-primary); }
+.dot-RunCompleted, .dot-ModelCallCompleted, .dot-ToolResult { background: var(--color-success); }
+.dot-RunFailed, .dot-ModelCallFailed { background: var(--color-error); }
+.dot-ToolCall { background: var(--color-info); }
+.dot-PermissionRequired { background: var(--color-warning); }
+.dot-ThinkingDelta { background: var(--color-text-tertiary); }
+.dot-TextDelta { background: var(--color-text-secondary); }
+.dot-Citation { background: var(--color-accent-secondary); }
+.dot-Usage { background: var(--color-text-tertiary); }
+
+.event-content {
+  cursor: pointer;
+}
+
+.event-header {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  gap: var(--space-sm);
+  margin-bottom: var(--space-xs);
+}
+
+.event-badge {
+  padding: 2px 8px;
+  border-radius: var(--radius-full);
+  font-size: var(--font-size-xs);
+  font-weight: 500;
+  background: var(--color-background-tertiary);
+  color: var(--color-text-secondary);
+}
+
+.event-badge.success {
+  background: var(--color-success-soft);
+  color: var(--color-success);
+}
+.event-badge.error {
+  background: var(--color-error-soft);
+  color: var(--color-error);
+}
+.event-badge.warning {
+  background: var(--color-warning-soft);
+  color: var(--color-warning);
+}
+.event-badge.info {
+  background: var(--color-info-soft);
+  color: var(--color-info);
+}
+
+.event-time {
+  font-size: var(--font-size-xs);
+  color: var(--color-text-tertiary);
+  font-family: var(--font-ui-mono);
+}
+
+.event-text {
+  white-space: pre-wrap;
+  line-height: var(--line-height-relaxed);
+  color: var(--color-text-primary);
+  max-height: 120px;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+
+.event-name {
+  display: flex;
+  align-items: center;
+  gap: var(--space-sm);
+}
+
+.event-name code {
+  padding: 2px 6px;
+  background: var(--color-background-secondary);
+  border-radius: var(--radius-sm);
+  font-family: var(--font-ui-mono);
+  font-size: var(--font-size-sm);
+}
+
+.event-duration {
+  font-size: var(--font-size-xs);
+  color: var(--color-text-tertiary);
+  font-family: var(--font-ui-mono);
+}
+
+.event-usage {
+  display: flex;
+  gap: var(--space-md);
+  font-size: var(--font-size-sm);
+  color: var(--color-text-secondary);
+  font-family: var(--font-ui-mono);
+}
+
+.event-usage .total {
+  color: var(--color-accent-primary);
+  font-weight: 500;
+}
+
+.event-citation {
+  display: flex;
+  align-items: center;
+  gap: var(--space-xs);
+  padding: var(--space-xs) var(--space-sm);
+  background: var(--color-accent-soft);
+  border-radius: var(--radius-sm);
+  font-size: var(--font-size-sm);
+  color: var(--color-accent-primary);
+  cursor: pointer;
+}
+
+.event-citation:hover { text-decoration: underline; }
+
+.event-permission {
+  display: flex;
+  align-items: center;
+  gap: var(--space-sm);
+  font-size: var(--font-size-sm);
+}
+
+.event-permission code {
+  padding: 2px 6px;
+  background: var(--color-warning-soft);
+  color: var(--color-warning);
+  border-radius: var(--radius-sm);
+  font-family: var(--font-ui-mono);
+}
+
+.event-detail {
+  margin-top: var(--space-sm);
+  padding-top: var(--space-sm);
+  border-top: 1px solid var(--color-border-subtle);
+}
+
+.event-detail details summary {
+  cursor: pointer;
+  font-size: var(--font-size-sm);
+  color: var(--color-text-secondary);
+}
+
+.event-detail pre {
+  margin-top: var(--space-sm);
+  max-height: 300px;
+  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;
+}
+
+.tree-view {
+  padding: var(--space-sm) 0;
+  border: 1px solid var(--color-border-default);
+  border-radius: var(--radius-md);
+  background: var(--color-surface-primary);
+}
+
+.tree-node {
+  border-bottom: 1px solid var(--color-border-subtle);
+}
+.tree-node:last-child { border-bottom: none; }
+
+.node-row {
+  display: flex;
+  align-items: center;
+  gap: var(--space-xs);
+  padding: 8px 12px;
+  cursor: default;
+  font-size: var(--font-size-sm);
+  transition: background-color var(--motion-fast);
+}
+
+.node-row:hover { background: var(--color-background-hover); }
+
+.node-row.status-running {
+  background: var(--color-info-soft);
+}
+
+.node-row.status-error {
+  background: var(--color-error-soft);
+}
+
+.expand-icon {
+  width: 16px;
+  font-size: 10px;
+  color: var(--color-text-tertiary);
+  cursor: pointer;
+  flex-shrink: 0;
+}
+
+.expand-icon.placeholder { visibility: hidden; }
+
+.node-icon {
+  font-size: 14px;
+  width: 20px;
+  text-align: center;
+  flex-shrink: 0;
+}
+
+.node-title {
+  flex: 1;
+  color: var(--color-text-primary);
+  font-weight: 500;
+}
+
+.node-subtitle {
+  color: var(--color-text-tertiary);
+  font-size: var(--font-size-xs);
+}
+
+.node-duration {
+  color: var(--color-text-tertiary);
+  font-family: var(--font-ui-mono);
+  font-size: var(--font-size-xs);
+}
+
+.node-detail {
+  padding: 8px 12px 12px 36px;
+}
+
+.node-detail pre {
+  margin: 0;
+  max-height: 200px;
+  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;
+}
+
+.tool-calls-summary { margin-top: var(--space-md); }
+.tool-call-list {
+  display: grid;
+  gap: var(--space-xs);
+}
+
+.tool-call-item {
+  display: flex;
+  align-items: center;
+  gap: var(--space-sm);
+  padding: 6px 10px;
+  border-radius: var(--radius-sm);
+  background: var(--color-background-secondary);
+  font-size: var(--font-size-sm);
+}
+
+.tool-status-dot {
+  width: 8px;
+  height: 8px;
+  border-radius: 50%;
+  background: var(--color-text-tertiary);
+}
+
+.tool-call-item.completed .tool-status-dot { background: var(--color-success); }
+.tool-call-item.error .tool-status-dot { background: var(--color-error); }
+.tool-call-item.running .tool-status-dot { background: var(--color-info); }
+
+.tool-name {
+  flex: 1;
+  font-family: var(--font-ui-mono);
+  font-size: var(--font-size-xs);
+}
+
+.tool-duration {
+  color: var(--color-text-tertiary);
+  font-family: var(--font-ui-mono);
+  font-size: var(--font-size-xs);
+}
+
+.tool-status-badge {
+  padding: 1px 6px;
+  border-radius: var(--radius-full);
+  font-size: 11px;
+}
+
+.tool-status-badge.completed { background: var(--color-success-soft); color: var(--color-success); }
+.tool-status-badge.error { background: var(--color-error-soft); color: var(--color-error); }
+.tool-status-badge.running { background: var(--color-info-soft); color: var(--color-info); }
+
+.empty-state {
+  padding: var(--space-3xl);
+  text-align: center;
+  color: var(--color-text-tertiary);
+}
+
+.empty-state strong {
+  display: block;
+  color: var(--color-text-secondary);
+  margin-bottom: var(--space-xs);
+}
+</style>

frontend/src/features/plugins/PluginSettingsPanel.vue

@@ -0,0 +1,404 @@
+<script setup lang="ts">
+import { computed, onMounted, reactive, ref, watch } from 'vue'
+import type { PluginSettingsSchema, PluginSettingField } from '@/contracts'
+import {
+  getPluginSettings,
+  updatePluginSettings,
+  putPluginSecret,
+  deletePluginSecret,
+} from '@/services/pluginService'
+
+const props = defineProps<{
+  pluginId: string
+}>()
+
+const emit = defineEmits<{
+  (e: 'saved'): void
+  (e: 'error', message: string): void
+}>()
+
+const schema = ref<PluginSettingsSchema | null>(null)
+const values = reactive<Record<string, unknown>>({})
+const secrets = reactive<Record<string, string>>({})
+const isLoading = ref(false)
+const isSaving = ref(false)
+const saveError = ref('')
+const hasChanges = ref(false)
+
+const nonSecretFields = computed(() =>
+  schema.value?.fields.filter((f) => f.type !== 'secret') ?? []
+)
+
+const secretFields = computed(() =>
+  schema.value?.fields.filter((f) => f.type === 'secret') ?? []
+)
+
+async function load() {
+  isLoading.value = true
+  saveError.value = ''
+  try {
+    schema.value = await getPluginSettings(props.pluginId)
+    Object.keys(values).forEach((k) => delete values[k])
+    Object.assign(values, schema.value.values)
+    hasChanges.value = false
+  } catch (error) {
+    emit('error', error instanceof Error ? error.message : '设置加载失败')
+  } finally {
+    isLoading.value = false
+  }
+}
+
+async function save() {
+  if (!schema.value) return
+  isSaving.value = true
+  saveError.value = ''
+  try {
+    schema.value = await updatePluginSettings(
+      props.pluginId,
+      schema.value.schema_version,
+      { ...values }
+    )
+    hasChanges.value = false
+    emit('saved')
+  } catch (error) {
+    saveError.value = error instanceof Error ? error.message : '保存失败'
+  } finally {
+    isSaving.value = false
+  }
+}
+
+async function saveSecret(key: string) {
+  if (!secrets[key]) return
+  isSaving.value = true
+  saveError.value = ''
+  try {
+    const result = await putPluginSecret(props.pluginId, key, secrets[key])
+    if (schema.value) {
+      schema.value.secrets[key] = { configured: result.configured }
+    }
+    secrets[key] = ''
+    emit('saved')
+  } catch (error) {
+    saveError.value = error instanceof Error ? error.message : '密钥保存失败'
+  } finally {
+    isSaving.value = false
+  }
+}
+
+async function clearSecret(key: string) {
+  if (!confirm(`确认删除 " ${key} " 的配置？`)) return
+  try {
+    await deletePluginSecret(props.pluginId, key)
+    if (schema.value) {
+      schema.value.secrets[key] = { configured: false }
+    }
+    emit('saved')
+  } catch (error) {
+    saveError.value = error instanceof Error ? error.message : '删除失败'
+  }
+}
+
+function setFieldValue(key: string, value: unknown, field: PluginSettingField) {
+  if (field.type === 'number') {
+    const num = Number(value)
+    if (field.minimum != null && num < field.minimum) return
+    if (field.maximum != null && num > field.maximum) return
+    values[key] = num
+  } else {
+    values[key] = value
+  }
+  hasChanges.value = true
+}
+
+onMounted(load)
+watch(() => props.pluginId, load)
+</script>
+
+<template>
+  <div class="plugin-settings-panel">
+    <div v-if="isLoading" class="loading">加载设置中…</div>
+
+    <template v-else-if="schema && schema.fields.length > 0">
+      <div v-if="saveError" class="error-banner small">{{ saveError }}</div>
+
+      <div v-if="nonSecretFields.length" class="settings-section">
+        <h4>通用设置</h4>
+        <div class="form-grid">
+          <div v-for="field in nonSecretFields" :key="field.key" class="field">
+            <label>
+              {{ field.label }}
+              <span v-if="field.required" class="required">*</span>
+            </label>
+            <small v-if="field.description">{{ field.description }}</small>
+
+            <input
+              v-if="field.type === 'string'"
+              :value="values[field.key] ?? ''"
+              class="input"
+              @input="setFieldValue(field.key, ($event.target as HTMLInputElement).value, field)"
+            />
+
+            <input
+              v-else-if="field.type === 'number'"
+              type="number"
+              :value="values[field.key] ?? field.default ?? 0"
+              :min="field.minimum ?? undefined"
+              :max="field.maximum ?? undefined"
+              class="input"
+              @input="setFieldValue(field.key, ($event.target as HTMLInputElement).value, field)"
+            />
+
+            <label v-else-if="field.type === 'boolean'" class="switch-label">
+              <input
+                type="checkbox"
+                :checked="Boolean(values[field.key] ?? field.default)"
+                @change="setFieldValue(field.key, ($event.target as HTMLInputElement).checked, field)"
+              />
+              <span class="switch-track"><span class="switch-thumb"></span></span>
+              <span class="switch-text">{{ values[field.key] ? '已启用' : '已禁用' }}</span>
+            </label>
+
+            <select
+              v-else-if="field.type === 'select'"
+              :value="String(values[field.key] ?? field.default ?? '')"
+              class="select"
+              @change="setFieldValue(field.key, ($event.target as HTMLSelectElement).value, field)"
+            >
+              <option v-for="opt in field.options" :key="opt" :value="opt">
+                {{ opt }}
+              </option>
+            </select>
+          </div>
+        </div>
+
+        <div class="form-actions">
+          <button
+            class="button-primary"
+            :disabled="!hasChanges || isSaving"
+            @click="save"
+          >
+            {{ isSaving ? '保存中…' : '保存设置' }}
+          </button>
+          <span v-if="hasChanges" class="unsaved-hint">有未保存的更改</span>
+        </div>
+      </div>
+
+      <div v-if="secretFields.length" class="settings-section">
+        <h4>密钥与凭据</h4>
+        <p class="section-hint">密钥加密存储，前端不会回显明文。</p>
+        <div class="form-grid">
+          <div v-for="field in secretFields" :key="field.key" class="field secret-field">
+            <label>{{ field.label }}</label>
+            <small v-if="field.description">{{ field.description }}</small>
+            <div class="secret-row">
+              <span
+                class="secret-status"
+                :class="schema.secrets[field.key]?.configured ? 'configured' : 'not-configured'"
+              >
+                {{ schema.secrets[field.key]?.configured ? '● 已配置' : '○ 未配置' }}
+              </span>
+              <template v-if="schema.secrets[field.key]?.configured">
+                <input
+                  v-model="secrets[field.key]"
+                  type="password"
+                  placeholder="重新输入以更新"
+                  class="input"
+                />
+                <button class="button-secondary" :disabled="!secrets[field.key]" @click="saveSecret(field.key)">
+                  更新
+                </button>
+                <button class="link-btn danger" @click="clearSecret(field.key)">清除</button>
+              </template>
+              <template v-else>
+                <input
+                  v-model="secrets[field.key]"
+                  type="password"
+                  placeholder="请输入密钥"
+                  class="input"
+                />
+                <button
+                  class="button-primary"
+                  :disabled="!secrets[field.key]"
+                  @click="saveSecret(field.key)"
+                >保存</button>
+              </template>
+            </div>
+          </div>
+        </div>
+      </div>
+    </template>
+
+    <div v-else class="empty-hint">
+      <p>此插件没有可配置项。</p>
+    </div>
+  </div>
+</template>
+
+<style scoped>
+.plugin-settings-panel {
+  display: grid;
+  gap: var(--space-lg);
+}
+
+.settings-section h4 {
+  margin-bottom: var(--space-sm);
+  font-size: var(--font-size-md);
+}
+
+.section-hint {
+  font-size: var(--font-size-sm);
+  color: var(--color-text-tertiary);
+  margin-bottom: var(--space-md);
+}
+
+.form-grid {
+  display: grid;
+  gap: var(--space-md);
+}
+
+.field {
+  display: grid;
+  gap: 4px;
+}
+
+.field label {
+  font-size: var(--font-size-sm);
+  color: var(--color-text-primary);
+  font-weight: 500;
+}
+
+.field small {
+  color: var(--color-text-tertiary);
+  font-size: var(--font-size-xs);
+}
+
+.required {
+  color: var(--color-error);
+  margin-left: 2px;
+}
+
+.input, .select {
+  padding: 6px 10px;
+  border: 1px solid var(--color-border-default);
+  border-radius: var(--radius-sm);
+  background: var(--color-surface-primary);
+  color: var(--color-text-primary);
+  font-size: var(--font-size-sm);
+  width: 100%;
+  transition: border-color var(--motion-fast);
+}
+
+.input:focus, .select:focus {
+  outline: none;
+  border-color: var(--color-border-focus);
+  box-shadow: 0 0 0 2px color-mix(in srgb, var(--color-accent-primary) 15%, transparent);
+}
+
+.switch-label {
+  display: flex;
+  align-items: center;
+  gap: var(--space-sm);
+  cursor: pointer;
+  font-weight: 400 !important;
+}
+
+.switch-label input { display: none; }
+
+.switch-track {
+  position: relative;
+  width: 40px;
+  height: 22px;
+  border-radius: 11px;
+  background: var(--color-background-tertiary);
+  transition: background-color var(--motion-fast);
+}
+
+.switch-thumb {
+  position: absolute;
+  top: 2px;
+  left: 2px;
+  width: 18px;
+  height: 18px;
+  border-radius: 50%;
+  background: var(--color-text-inverse);
+  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2);
+  transition: transform var(--motion-fast);
+}
+
+.switch-label input:checked + .switch-track {
+  background: var(--color-accent-primary);
+}
+
+.switch-label input:checked + .switch-track .switch-thumb {
+  transform: translateX(18px);
+}
+
+.switch-text {
+  font-size: var(--font-size-sm);
+  color: var(--color-text-secondary);
+}
+
+.form-actions {
+  display: flex;
+  align-items: center;
+  gap: var(--space-md);
+  margin-top: var(--space-md);
+}
+
+.unsaved-hint {
+  font-size: var(--font-size-xs);
+  color: var(--color-warning);
+}
+
+.secret-field .secret-row {
+  display: flex;
+  align-items: center;
+  gap: var(--space-sm);
+  margin-top: 4px;
+}
+
+.secret-status {
+  font-size: var(--font-size-xs);
+  padding: 2px 8px;
+  border-radius: var(--radius-full);
+  white-space: nowrap;
+}
+
+.secret-status.configured {
+  background: var(--color-success-soft);
+  color: var(--color-success);
+}
+
+.secret-status.not-configured {
+  background: var(--color-background-tertiary);
+  color: var(--color-text-tertiary);
+}
+
+.secret-row .input {
+  flex: 1;
+  min-width: 0;
+}
+
+.error-banner.small {
+  padding: var(--space-sm) var(--space-md);
+  font-size: var(--font-size-sm);
+}
+
+.loading, .empty-hint {
+  padding: var(--space-xl);
+  text-align: center;
+  color: var(--color-text-tertiary);
+  font-size: var(--font-size-sm);
+}
+
+.link-btn {
+  background: none;
+  border: none;
+  color: var(--color-text-secondary);
+  cursor: pointer;
+  font-size: var(--font-size-sm);
+  padding: 0;
+}
+.link-btn.danger { color: var(--color-error); }
+.link-btn:hover { text-decoration: underline; }
+</style>

frontend/src/features/plugins/PluginsView.vue

@@ -2,49 +2,400 @@
 import { Connection } from '@element-plus/icons-vue'
 import AppIcon from '@/components/common/AppIcon.vue'
 import PluginMcpPanel from './PluginMcpPanel.vue'
-import { onMounted, ref } from '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'
 
 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() })
 
-async function install() { const path = prompt('请输入 Plugin Package 路径')?.trim(); if (!path) return; try { await pluginStore.installPlugin(path) } catch (error) { actionError.value = error instanceof Error ? error.message : '安装失败' } }
+watch(() => pluginStore.selectedPluginId, async (pluginId) => {
-async function toggle(id: string, enabled: boolean) { try { enabled ? await pluginStore.disablePlugin(id) : await pluginStore.enablePlugin(id) } catch (error) { actionError.value = error instanceof Error ? error.message : '状态更新失败' } }
+  if (pluginId) {
-async function grant(id: string, permissions: string[]) { if (!confirm(`将授权：${permissions.join('、')}。是否继续？`)) return; try { await pluginStore.grantPermissions(id, permissions) } catch (error) { actionError.value = error instanceof Error ? error.message : '授权失败' } }
+    activeTab.value = 'info'
-async function uninstall(id: string, name: string) { if (!confirm(`卸载“${name}”将移除其全部 Contribution，是否继续？`)) return; try { await pluginStore.uninstallPlugin(id) } catch (error) { actionError.value = error instanceof Error ? error.message : '卸载失败' } }
+    pluginCommands.value = []
+    commandOutput.value = {}
+    try {
+      const allCommands = await pluginService.listPluginCommands()
+      pluginCommands.value = allCommands.filter((c) => c.plugin_id === pluginId)
+    } catch { /* 命令加载失败时忽略 */ }
+  }
+})
+
+async function install() {
+  const path = prompt('请输入 Plugin Package 路径')?.trim()
+  if (!path) return
+  try { await pluginStore.installPlugin(path) }
+  catch (error) { actionError.value = error instanceof Error ? error.message : '安装失败' }
+}
+
+async function toggle(id: string, enabled: boolean) {
+  try {
+    enabled ? await pluginStore.disablePlugin(id) : await pluginStore.enablePlugin(id)
+  } catch (error) { actionError.value = error instanceof Error ? error.message : '状态更新失败' }
+}
+
+async function grant(id: string, permissions: string[]) {
+  if (!confirm(`将授权：${permissions.join('、')}。是否继续？`)) return
+  try { await pluginStore.grantPermissions(id, permissions) }
+  catch (error) { actionError.value = error instanceof Error ? error.message : '授权失败' }
+}
+
+async function uninstall(id: string, name: string) {
+  if (!confirm(`卸载"${name}"将移除其全部 Contribution，是否继续？`)) return
+  try { await pluginStore.uninstallPlugin(id) }
+  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
+)
+
+const hasCommandContribution = computed(() =>
+  pluginStore.selectedPlugin?.contributions.some((c) => c.type === 'command') ?? false
+)
 </script>
 
 <template>
   <section class="feature-page">
-    <header class="feature-header"><div><h1>Plugin 与 MCP</h1><p>管理插件生命周期、MCP Host、权限和受控 Contribution。</p></div><button class="button-primary" @click="install">安装 Plugin</button></header>
+    <header class="feature-header">
-    <div v-if="pluginStore.error || actionError" class="error-banner">{{ pluginStore.error || actionError }}</div>
+      <div><h1>Plugin 与 MCP</h1><p>管理插件生命周期、MCP Host、权限和受控 Contribution。</p></div>
-    <div v-if="pluginStore.selectedPlugin" class="panel">
+      <button class="button-primary" @click="install">安装 Plugin</button>
-      <div class="detail-head"><div><span class="badge" :class="{ success: pluginStore.selectedPlugin.status === 'ready', error: pluginStore.selectedPlugin.status === 'error', warning: pluginStore.selectedPlugin.status === 'permission_required' }">{{ pluginStore.selectedPlugin.status }}</span><h2>{{ pluginStore.selectedPlugin.icon }} {{ pluginStore.selectedPlugin.name }}</h2><p class="muted">v{{ pluginStore.selectedPlugin.version }} · {{ pluginStore.selectedPlugin.backend_type || 'none' }}/{{ pluginStore.selectedPlugin.transport || 'none' }}</p></div><div class="inline-actions"><button v-if="pluginStore.selectedPlugin.status === 'permission_required'" class="button-primary" @click="grant(pluginStore.selectedPlugin.plugin_id, pluginStore.selectedPlugin.permissions)">授权权限</button><button class="button-secondary" @click="toggle(pluginStore.selectedPlugin.plugin_id, pluginStore.selectedPlugin.enabled)">{{ pluginStore.selectedPlugin.enabled ? '停用' : '启用' }}</button><button class="button-danger" @click="uninstall(pluginStore.selectedPlugin.plugin_id, pluginStore.selectedPlugin.name)">卸载</button></div></div>
+    </header>
-      <p class="description">{{ pluginStore.selectedPlugin.description }}</p>
+
-      <div class="detail-grid"><div><h3>权限</h3><div class="tag-list"><span v-for="permission in pluginStore.selectedPlugin.permissions" :key="permission" class="badge warning">{{ permission }}</span></div></div><div><h3>Contribution</h3><div class="contribution-list"><div v-for="item in pluginStore.selectedPlugin.contributions" :key="item.id" class="item-card"><span class="badge info">{{ item.type }}</span><strong>{{ item.name }}</strong><p class="subtle">{{ item.description || item.id }}</p></div></div></div></div>
+    <div v-if="pluginStore.error || actionError" class="error-banner">
-      <div v-if="pluginStore.selectedPlugin.last_error" class="error-banner last-error">{{ pluginStore.selectedPlugin.last_error }}</div>
+      {{ pluginStore.error || actionError }}
-      <div v-if="pluginStore.selectedPlugin.dependent_skills?.length" class="notice-banner last-error">依赖此插件的 Skill：{{ pluginStore.selectedPlugin.dependent_skills.join('、') }}</div>
+    </div>
-      <PluginMcpPanel :plugin="pluginStore.selectedPlugin" />
+
+    <div v-if="pluginStore.selectedPlugin" class="plugin-detail">
+      <div class="panel detail-panel">
+        <div class="detail-head">
+          <div>
+            <span class="badge" :class="{
+              success: pluginStore.selectedPlugin.status === 'ready',
+              error: pluginStore.selectedPlugin.status === 'error',
+              warning: pluginStore.selectedPlugin.status === 'permission_required',
+              info: pluginStore.selectedPlugin.status === 'starting',
+            }">{{ pluginStore.selectedPlugin.status }}</span>
+            <h2>{{ pluginStore.selectedPlugin.icon }} {{ pluginStore.selectedPlugin.name }}</h2>
+            <p class="muted">
+              v{{ pluginStore.selectedPlugin.version }}
+              · {{ pluginStore.selectedPlugin.backend_type || 'none' }}/{{ pluginStore.selectedPlugin.transport || 'none' }}
+              · {{ pluginStore.selectedPlugin.author || '未知作者' }}
+            </p>
+          </div>
+          <div class="inline-actions">
+            <button
+              v-if="pluginStore.selectedPlugin.status === 'permission_required'"
+              class="button-primary"
+              @click="grant(pluginStore.selectedPlugin.plugin_id, pluginStore.selectedPlugin.permissions)"
+            >授权权限</button>
+            <button
+              class="button-secondary"
+              @click="toggle(pluginStore.selectedPlugin.plugin_id, pluginStore.selectedPlugin.enabled)"
+            >{{ pluginStore.selectedPlugin.enabled ? '停用' : '启用' }}</button>
+            <button
+              class="button-danger"
+              @click="uninstall(pluginStore.selectedPlugin.plugin_id, pluginStore.selectedPlugin.name)"
+            >卸载</button>
+          </div>
+        </div>
+
+        <p class="description">{{ pluginStore.selectedPlugin.description }}</p>
+
+        <div class="detail-tabs">
+          <button
+            class="tab-btn"
+            :class="{ active: activeTab === 'info' }"
+            @click="activeTab = 'info'"
+          >概览</button>
+          <button
+            v-if="hasCommandContribution"
+            class="tab-btn"
+            :class="{ active: activeTab === 'commands' }"
+            @click="activeTab = 'commands'"
+          >命令 ({{ pluginCommands.length }})</button>
+          <button
+            v-if="hasSettingsContribution || pluginCommands.some(c => c.enabled)"
+            class="tab-btn"
+            :class="{ active: activeTab === 'settings' }"
+            @click="activeTab = 'settings'"
+          >设置</button>
+        </div>
+
+        <div v-if="activeTab === 'info'" class="tab-content">
+          <div class="detail-grid">
+            <div>
+              <h3>权限</h3>
+              <div class="tag-list">
+                <span v-for="permission in pluginStore.selectedPlugin.permissions" :key="permission" class="badge warning">
+                  {{ permission }}
+                </span>
+              </div>
+            </div>
+            <div>
+              <h3>Contribution</h3>
+              <div class="contribution-list">
+                <div
+                  v-for="item in pluginStore.selectedPlugin.contributions"
+                  :key="item.id"
+                  class="item-card"
+                >
+                  <span class="badge info">{{ item.type }}</span>
+                  <strong>{{ item.name }}</strong>
+                  <p class="subtle">{{ item.description || item.id }}</p>
+                </div>
+              </div>
+            </div>
+          </div>
+          <div v-if="pluginStore.selectedPlugin.last_error" class="error-banner last-error">
+            {{ pluginStore.selectedPlugin.last_error }}
+          </div>
+          <div v-if="pluginStore.selectedPlugin.dependent_skills?.length" class="notice-banner">
+            依赖此插件的 Skill：{{ pluginStore.selectedPlugin.dependent_skills.join('、') }}
+          </div>
+          <PluginMcpPanel :plugin="pluginStore.selectedPlugin" />
+        </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>
+        </div>
+
+        <div v-else-if="activeTab === 'settings'" class="tab-content">
+          <PluginSettingsPanel :plugin-id="pluginStore.selectedPlugin.plugin_id" />
+        </div>
+      </div>
+    </div>
+
+    <div v-else-if="!pluginStore.plugins.length" class="empty-state">
+      <div>
+        <strong>{{ pluginStore.isLoading ? '正在加载…' : pluginStore.error ? '加载失败' : '尚未安装' }}</strong>
+        <button class="button-secondary" @click="pluginStore.loadPlugins">重新加载</button>
+      </div>
+    </div>
+
+    <div v-else class="feature-grid">
+      <article
+        v-for="plugin in pluginStore.plugins"
+        :key="plugin.plugin_id"
+        class="item-card extension-card"
+        @click="pluginStore.selectPlugin(plugin.plugin_id)"
+      >
+        <div class="extension-title">
+          <AppIcon :icon="Connection" :size="22" />
+          <div>
+            <strong>{{ plugin.name }}</strong>
+            <p>v{{ plugin.version }}</p>
+          </div>
+          <span
+            class="badge"
+            :class="{
+              success: plugin.status === 'ready',
+              error: plugin.status === 'error',
+              warning: plugin.status === 'permission_required',
+            }"
+          >{{ plugin.status }}</span>
+        </div>
+        <p class="muted">{{ plugin.description }}</p>
+        <p class="subtle">
+          {{ plugin.permissions.length }} 项权限 · {{ plugin.contributions.length }} 项 Contribution
+        </p>
+      </article>
     </div>
-    <div v-else-if="!pluginStore.plugins.length" class="empty-state"><div><strong>{{ pluginStore.isLoading ? '正在加载…' : pluginStore.error ? '加载失败' : '尚未安装' }}</strong><button class="button-secondary" @click="pluginStore.loadPlugins">重新加载</button></div></div>
-    <div v-else class="feature-grid"><article v-for="plugin in pluginStore.plugins" :key="plugin.plugin_id" class="item-card extension-card" @click="pluginStore.selectPlugin(plugin.plugin_id)"><div class="extension-title"><AppIcon :icon="Connection" :size="22" /><div><strong>{{ plugin.name }}</strong><p>v{{ plugin.version }}</p></div><span class="badge" :class="{ success: plugin.status === 'ready', error: plugin.status === 'error', warning: plugin.status === 'permission_required' }">{{ plugin.status }}</span></div><p class="muted">{{ plugin.description }}</p><p class="subtle">{{ plugin.permissions.length }} 项权限 · {{ plugin.contributions.length }} 项 Contribution</p></article></div>
   </section>
 </template>
 
 <style scoped>
-.detail-head, .extension-title { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--space-md); }
+.plugin-detail { display: grid; gap: var(--space-lg); }
+
+.detail-head {
+  display: flex;
+  align-items: flex-start;
+  justify-content: space-between;
+  gap: var(--space-md);
+}
 .detail-head h2 { margin-top: var(--space-sm); }
-.description { margin: var(--space-xl) 0; line-height: var(--line-height-relaxed); }
+.detail-head .muted {
-.detail-grid { display: grid; grid-template-columns: minmax(220px, .7fr) minmax(320px, 1.3fr); gap: var(--space-xl); }
+  color: var(--color-text-tertiary);
+  font-size: var(--font-size-sm);
+  margin-top: 4px;
+}
+
+.description {
+  margin: var(--space-xl) 0;
+  line-height: var(--line-height-relaxed);
+}
+
+.detail-tabs {
+  display: flex;
+  gap: var(--space-sm);
+  border-bottom: 1px solid var(--color-border-default);
+  margin-bottom: var(--space-lg);
+}
+
+.tab-btn {
+  padding: var(--space-sm) var(--space-md);
+  background: none;
+  border: none;
+  border-bottom: 2px solid transparent;
+  color: var(--color-text-secondary);
+  cursor: pointer;
+  font-size: var(--font-size-md);
+  margin-bottom: -1px;
+  transition: all var(--motion-fast);
+}
+.tab-btn:hover { color: var(--color-text-primary); }
+.tab-btn.active {
+  color: var(--color-accent-primary);
+  border-bottom-color: var(--color-accent-primary);
+  font-weight: 500;
+}
+
+.tab-content { min-height: 200px; }
+
+.detail-grid {
+  display: grid;
+  grid-template-columns: minmax(220px, .7fr) minmax(320px, 1.3fr);
+  gap: var(--space-xl);
+}
 .detail-grid h3 { margin-bottom: var(--space-sm); }
+
 .contribution-list { display: grid; gap: var(--space-sm); }
 .contribution-list .item-card { display: grid; gap: var(--space-xs); }
+
+.tag-list { display: flex; flex-wrap: wrap; gap: 6px; }
+
 .last-error { margin: var(--space-xl) 0 0; }
+
+.notice-banner {
+  margin-top: var(--space-xl);
+  padding: var(--space-sm) var(--space-md);
+  border-radius: var(--radius-md);
+  background: var(--color-info-soft);
+  color: var(--color-info);
+  font-size: var(--font-size-sm);
+}
+
 .extension-card { cursor: pointer; }
 .extension-card > p { margin-top: var(--space-md); }
-.extension-title { align-items: center; }
+.extension-title { display: flex; align-items: center; gap: var(--space-sm); }
-.extension-title .icon { font-size: 28px; }
+.extension-title div { flex: 1; }
 .extension-title p { color: var(--color-text-tertiary); font-size: var(--font-size-xs); }
-@media (max-width: 800px) { .detail-grid { grid-template-columns: 1fr; } }
+
+.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;
+  color: var(--color-text-tertiary);
+  font-size: var(--font-size-sm);
+}
+
+@media (max-width: 800px) {
+  .detail-grid { grid-template-columns: 1fr; }
+  .command-item { grid-template-columns: 1fr; }
+}
 </style>

frontend/src/features/themes/ThemesView.vue

@@ -1,57 +1,461 @@
 <script setup lang="ts">
-import { computed } from 'vue'
+import { computed, onMounted, ref } from 'vue'
 import MarkdownContent from '@/components/common/MarkdownContent.vue'
 import { useThemeStore } from '@/stores/theme'
+import { mockCommunityThemes } from '@/services/themePackageService'
+import type { ThemePackageInspection } from '@/contracts'
 
 const themeStore = useThemeStore()
+
+const activeTab = ref<'installed' | 'community'>('installed')
+const showImportDialog = ref(false)
+const previewThemeId = ref<string | null>(null)
+const actionError = ref('')
+
 const shikiPreview = `\`\`\`typescript
 const notes = await search('本地优先')
 \`\`\``
+
 const codeThemeLabel = computed(() => themeStore.resolvedCodeBlockTheme === 'github-dark'
   ? 'Shiki · GitHub Dark'
   : 'Shiki · GitHub Light')
+
+const communityThemes = computed(() => mockCommunityThemes)
+
+function handleFileImport(event: Event) {
+  const input = event.target as HTMLInputElement
+  const file = input.files?.[0]
+  if (!file) return
+  const reader = new FileReader()
+  reader.onload = async () => {
+    const content = reader.result as string
+    try {
+      const result = await themeStore.inspectThemePackage(content)
+      if (result.compatible) {
+        previewThemeId.value = result.manifest.theme_id
+      }
+    } catch (error) {
+      actionError.value = error instanceof Error ? error.message : '导入失败'
+    }
+  }
+  reader.readAsText(file)
+  input.value = ''
+}
+
+async function confirmInstall(inspection: ThemePackageInspection) {
+  try {
+    // Web Mock 模式：使用社区主题的 CSS 作为演示
+    const cssText = generateThemeCss(inspection.manifest.theme_id, inspection.manifest.is_dark)
+    await themeStore.installThemeFromInspection(inspection.manifest, cssText)
+    showImportDialog.value = false
+    previewThemeId.value = null
+  } catch (error) {
+    actionError.value = error instanceof Error ? error.message : '安装失败'
+  }
+}
+
+async function installFromCommunity(themeId: string) {
+  actionError.value = ''
+  try {
+    await themeStore.installCommunityTheme(themeId)
+  } catch (error) {
+    actionError.value = error instanceof Error ? error.message : '安装失败'
+  }
+}
+
+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
+  themeStore.applyTheme(themeId)
+  setTimeout(() => themeStore.applyTheme(current), 1500)
+}
+
+onMounted(() => {
+  themeStore.loadCustomThemes()
+})
 </script>
 
 <template>
   <section class="feature-page">
-    <header class="feature-header"><div><h1>主题</h1><p>预览并切换 Design Token，编辑器偏好会即时生效。</p></div><button class="button-secondary" @click="themeStore.resetToDefault">恢复默认</button></header>
+    <header class="feature-header">
-    <div class="feature-grid themes">
+      <div>
-      <button v-for="theme in themeStore.themes" :key="theme.theme_id" class="item-card theme-card" :class="{ selected: themeStore.currentThemeId === theme.theme_id }" @click="themeStore.applyTheme(theme.theme_id)">
+        <h1>主题</h1>
-        <div class="theme-preview" :class="`preview-${theme.theme_id}`"><span></span><span></span><span></span><div></div></div>
+        <p>浏览、导入和管理主题，打造你的知识工作流。</p>
-        <div class="theme-info"><div><strong>{{ theme.name }}</strong><p class="subtle">{{ theme.description }}</p></div><span v-if="themeStore.currentThemeId === theme.theme_id" class="badge success">使用中</span></div>
+      </div>
-        <p class="subtle">v{{ theme.version }} · {{ theme.builtin ? '内置主题' : theme.author }}</p>
+      <div class="inline-actions">
+        <button class="button-secondary" @click="showImportDialog = true">导入主题</button>
+        <button class="button-secondary" @click="themeStore.resetToDefault()">恢复默认</button>
+      </div>
+    </header>
+
+    <div v-if="actionError || themeStore.importError" class="error-banner">
+      {{ actionError || themeStore.importError }}
+    </div>
+
+    <div class="tabs">
+      <button
+        class="tab-btn"
+        :class="{ active: activeTab === 'installed' }"
+        @click="activeTab = 'installed'"
+      >已安装</button>
+      <button
+        class="tab-btn"
+        :class="{ active: activeTab === 'community' }"
+        @click="activeTab = 'community'"
+      >社区主题</button>
+    </div>
+
+    <div v-if="activeTab === 'installed'" class="feature-grid themes">
+      <button
+        v-for="theme in themeStore.allThemes"
+        :key="theme.theme_id"
+        class="item-card theme-card"
+        :class="{ selected: themeStore.currentThemeId === theme.theme_id }"
+        @click="themeStore.applyTheme(theme.theme_id)"
+      >
+        <div class="theme-preview" :class="theme.is_dark ? 'preview-dark' : (theme.theme_id === 'sepia' ? 'preview-sepia' : 'preview-light')">
+          <span></span><span></span><span></span><div></div>
+        </div>
+        <div class="theme-info">
+          <div>
+            <strong>{{ theme.name }}</strong>
+            <p class="subtle">{{ theme.description }}</p>
+          </div>
+          <span v-if="themeStore.currentThemeId === theme.theme_id" class="badge success">使用中</span>
+        </div>
+        <p class="subtle">
+          v{{ theme.version }} · {{ theme.builtin ? '内置主题' : theme.author }}
+          <span v-if="!theme.builtin"> · 自定义</span>
+        </p>
+        <div v-if="!theme.builtin" class="theme-actions" @click.stop>
+          <button class="link-btn danger" @click="themeStore.uninstallTheme(theme.theme_id)">卸载</button>
+        </div>
       </button>
     </div>
+
+    <div v-else class="feature-grid themes">
+      <article
+        v-for="theme in communityThemes"
+        :key="theme.theme_id"
+        class="item-card theme-card"
+      >
+        <div class="theme-preview" :class="theme.is_dark ? 'preview-dark' : 'preview-light'">
+          <span></span><span></span><span></span><div></div>
+        </div>
+        <div class="theme-info">
+          <div>
+            <strong>{{ theme.name }}</strong>
+            <p class="subtle">{{ theme.description }}</p>
+          </div>
+          <span class="badge" :class="theme.is_dark ? 'info' : 'success'">{{ theme.is_dark ? '深色' : '浅色' }}</span>
+        </div>
+        <p class="subtle">v{{ theme.version }} · {{ theme.author }}</p>
+        <div class="theme-tags">
+          <span v-for="tag in theme.tags" :key="tag" class="tag">{{ tag }}</span>
+        </div>
+        <div class="theme-actions">
+          <button
+            v-if="themeStore.isThemeInstalled(theme.theme_id)"
+            class="button-secondary small"
+            @click="themeStore.applyTheme(theme.theme_id)"
+          >启用</button>
+          <template v-else>
+            <button class="button-secondary small" @click="previewCommunity(theme.theme_id)">预览</button>
+            <button class="button-primary small" @click="installFromCommunity(theme.theme_id)">安装</button>
+          </template>
+        </div>
+      </article>
+    </div>
+
     <div class="panel preference-panel">
       <h2 class="panel-title">编辑器外观</h2>
       <div class="form-grid">
-        <div class="field"><label>字号：{{ themeStore.fontEditorSize }}px</label><input v-model.number="themeStore.fontEditorSize" type="range" min="12" max="24" /></div>
+        <div class="field">
-        <div class="field"><label>行高：{{ themeStore.lineHeight }}</label><input v-model.number="themeStore.lineHeight" type="range" min="1.2" max="2.2" step="0.1" /></div>
+          <label>字号：{{ themeStore.fontEditorSize }}px</label>
-        <div class="field"><label>字体</label><select v-model="themeStore.fontEditorFamily" class="select"><option value="system-ui">系统字体</option><option value="serif">衬线字体</option><option value="var(--font-ui-mono)">等宽字体</option></select></div>
+          <input v-model.number="themeStore.fontEditorSize" type="range" min="12" max="24" />
-        <div class="field"><label>代码块样式</label><select v-model="themeStore.codeBlockTheme" class="select"><option value="auto">跟随主题</option><option value="github-light">GitHub Light</option><option value="github-dark">GitHub Dark</option></select><small>Markdown 渲染使用对应的 Shiki GitHub 主题</small></div>
+        </div>
+        <div class="field">
+          <label>行高：{{ themeStore.lineHeight }}</label>
+          <input v-model.number="themeStore.lineHeight" type="range" min="1.2" max="2.2" step="0.1" />
+        </div>
+        <div class="field">
+          <label>字体</label>
+          <select v-model="themeStore.fontEditorFamily" class="select">
+            <option value="system-ui">系统字体</option>
+            <option value="serif">衬线字体</option>
+            <option value="var(--font-ui-mono)">等宽字体</option>
+          </select>
+        </div>
+        <div class="field">
+          <label>代码块样式</label>
+          <select v-model="themeStore.codeBlockTheme" class="select">
+            <option value="auto">跟随主题</option>
+            <option value="github-light">GitHub Light</option>
+            <option value="github-dark">GitHub Dark</option>
+          </select>
+          <small>Markdown 渲染使用对应的 Shiki GitHub 主题</small>
+        </div>
       </div>
-      <div class="editor-preview" :style="{ fontSize: `${themeStore.fontEditorSize}px`, lineHeight: themeStore.lineHeight, fontFamily: themeStore.fontEditorFamily }">
+      <div
-        <div class="preview-heading"><h3>主题预览</h3><span class="badge info">{{ codeThemeLabel }}</span></div>
+        class="editor-preview"
+        :style="{
+          fontSize: `${themeStore.fontEditorSize}px`,
+          lineHeight: themeStore.lineHeight,
+          fontFamily: themeStore.fontEditorFamily,
+        }"
+      >
+        <div class="preview-heading">
+          <h3>主题预览</h3>
+          <span class="badge info">{{ codeThemeLabel }}</span>
+        </div>
         <p>知识的价值不只在于保存，更在于被重新发现和使用。</p>
         <MarkdownContent class="code-theme-preview" :source="shikiPreview" />
       </div>
     </div>
+
+    <div v-if="showImportDialog" class="modal-backdrop" @click.self="showImportDialog = false">
+      <div class="modal import-modal">
+        <span class="badge info">主题导入</span>
+        <h2>导入主题包</h2>
+        <p class="subtle">支持 YAML Manifest + CSS 主题包。主题将在安全沙箱中验证后安装。</p>
+
+        <div v-if="themeStore.pendingInspection?.compatible" class="inspection-result">
+          <div class="inspect-head">
+            <strong>{{ themeStore.pendingInspection.manifest.name }}</strong>
+            <span class="badge success">验证通过</span>
+          </div>
+          <div class="inspect-meta">
+            <span>作者：{{ themeStore.pendingInspection.manifest.author }}</span>
+            <span>版本：{{ themeStore.pendingInspection.manifest.version }}</span>
+            <span>{{ themeStore.pendingInspection.manifest.is_dark ? '深色主题' : '浅色主题' }}</span>
+          </div>
+          <p v-if="themeStore.pendingInspection.manifest.description" class="inspect-desc">
+            {{ themeStore.pendingInspection.manifest.description }}
+          </p>
+          <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>
+        </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>
+        </div>
+
+        <div class="inline-actions">
+          <button class="button-secondary" @click="showImportDialog = false">取消</button>
+          <button
+            v-if="themeStore.pendingInspection?.compatible"
+            class="button-primary"
+            @click="confirmInstall(themeStore.pendingInspection!)"
+          >安装主题</button>
+        </div>
+      </div>
+    </div>
   </section>
 </template>
 
 <style scoped>
 .themes { margin-bottom: var(--space-xl); }
-.theme-card { display: grid; gap: var(--space-md); text-align: left; }
+.theme-card { display: grid; gap: var(--space-md); text-align: left; position: relative; }
-.theme-preview { display: grid; grid-template-columns: 30px 1fr; grid-template-rows: repeat(3, 18px); gap: 6px; height: 120px; padding: var(--space-md); border-radius: var(--radius-md); background: #fff; border: 1px solid #ddd; }
+.theme-preview {
+  display: grid;
+  grid-template-columns: 30px 1fr;
+  grid-template-rows: repeat(3, 18px);
+  gap: 6px;
+  height: 120px;
+  padding: var(--space-md);
+  border-radius: var(--radius-md);
+  background: #fff;
+  border: 1px solid #ddd;
+}
 .theme-preview span { grid-column: 1; border-radius: 4px; background: #dfe3eb; }
 .theme-preview div { grid-column: 2; grid-row: 1 / 4; border-radius: 6px; background: #f4f5f7; }
-.preview-dark { background: #0d1117; border-color: #30363d; }.preview-dark span { background: #30363d; }.preview-dark div { background: #161b22; }
+.preview-dark { background: #0d1117; border-color: #30363d; }
-.preview-sepia { background: #fbf3df; border-color: #ddcfad; }.preview-sepia span { background: #d8c69c; }.preview-sepia div { background: #f4e8ca; }
+.preview-dark span { background: #30363d; }
-.theme-info { display: flex; justify-content: space-between; gap: var(--space-md); }
+.preview-dark div { background: #161b22; }
+.preview-sepia { background: #fbf3df; border-color: #ddcfad; }
+.preview-sepia span { background: #d8c69c; }
+.preview-sepia div { background: #f4e8ca; }
+
+.theme-info { display: flex; justify-content: space-between; gap: var(--space-md); align-items: flex-start; }
+.theme-info strong { display: block; margin-bottom: 2px; }
+
+.theme-tags { display: flex; flex-wrap: wrap; gap: 4px; }
+.tag {
+  padding: 2px 8px;
+  border-radius: var(--radius-full);
+  background: var(--color-background-tertiary);
+  color: var(--color-text-secondary);
+  font-size: var(--font-size-xs);
+}
+
+.theme-actions { display: flex; gap: var(--space-sm); margin-top: 4px; }
+.button-primary.small, .button-secondary.small {
+  padding: 4px 12px;
+  font-size: var(--font-size-sm);
+}
+.link-btn {
+  background: none;
+  border: none;
+  color: var(--color-text-secondary);
+  cursor: pointer;
+  font-size: var(--font-size-sm);
+  padding: 0;
+}
+.link-btn.danger { color: var(--color-error); }
+.link-btn:hover { text-decoration: underline; }
+
+.tabs {
+  display: flex;
+  gap: var(--space-sm);
+  margin-bottom: var(--space-lg);
+  border-bottom: 1px solid var(--color-border-default);
+}
+.tab-btn {
+  padding: var(--space-sm) var(--space-md);
+  background: none;
+  border: none;
+  border-bottom: 2px solid transparent;
+  color: var(--color-text-secondary);
+  cursor: pointer;
+  font-size: var(--font-size-md);
+  margin-bottom: -1px;
+  transition: all var(--motion-fast);
+}
+.tab-btn:hover { color: var(--color-text-primary); }
+.tab-btn.active {
+  color: var(--color-accent-primary);
+  border-bottom-color: var(--color-accent-primary);
+  font-weight: 500;
+}
+
 .preference-panel { display: grid; gap: var(--space-xl); }
-.editor-preview { padding: var(--space-xl); border: 1px solid var(--color-border-default); border-radius: var(--radius-md); background: var(--color-background-secondary); }
+.editor-preview {
+  padding: var(--space-xl);
+  border: 1px solid var(--color-border-default);
+  border-radius: var(--radius-md);
+  background: var(--color-background-secondary);
+}
 .editor-preview p { margin: var(--space-sm) 0; }
-.preview-heading { display: flex; align-items: center; justify-content: space-between; gap: var(--space-md); }
+.preview-heading {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: var(--space-md);
+}
 .field small { color: var(--color-text-tertiary); }
 .code-theme-preview { margin-top: var(--space-md); }
+
+.import-modal {
+  width: min(520px, 90vw);
+  max-height: 80vh;
+  overflow: auto;
+}
+
+.upload-area {
+  padding: var(--space-2xl);
+  border: 2px dashed var(--color-border-default);
+  border-radius: var(--radius-md);
+  text-align: center;
+  margin: var(--space-lg) 0;
+  transition: border-color var(--motion-fast);
+}
+.upload-area:hover { border-color: var(--color-accent-secondary); }
+.upload-area input {
+  display: block;
+  margin: 0 auto var(--space-md);
+}
+.upload-area p { color: var(--color-text-secondary); }
+
+.inspection-result {
+  padding: var(--space-lg);
+  border: 1px solid var(--color-border-default);
+  border-radius: var(--radius-md);
+  margin: var(--space-lg) 0;
+  background: var(--color-background-secondary);
+}
+.inspect-head {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  margin-bottom: var(--space-sm);
+}
+.inspect-meta {
+  display: flex;
+  flex-wrap: wrap;
+  gap: var(--space-md);
+  font-size: var(--font-size-sm);
+  color: var(--color-text-secondary);
+  margin-bottom: var(--space-sm);
+}
+.inspect-desc {
+  color: var(--color-text-primary);
+  line-height: var(--line-height-relaxed);
+}
+.warnings {
+  margin-top: var(--space-md);
+  padding-top: var(--space-sm);
+  border-top: 1px solid var(--color-border-default);
+}
+.warning-text {
+  color: var(--color-warning);
+  font-size: var(--font-size-sm);
+}
+
+.inline-actions { margin-top: var(--space-lg); justify-content: flex-end; gap: var(--space-sm); }
 </style>

frontend/src/services/index.ts

@@ -15,3 +15,6 @@ export * as taskService from './taskService'
 export * as indexService from './indexService'
 export * as systemService from './systemService'
 export * as workspaceService from './workspaceService'
+export * as themePackageService from './themePackageService'
+export * as mermaidService from './mermaidService'
+export * as traceService from './traceService'

frontend/src/services/mermaidService.ts

@@ -0,0 +1,126 @@
+import mermaid from 'mermaid'
+import { ref, watch } from 'vue'
+import { useThemeStore } from '@/stores/theme'
+
+let initialized = false
+let initTheme: 'light' | 'dark' = 'light'
+
+function ensureInitialized(theme: 'light' | 'dark') {
+  if (!initialized) {
+    mermaid.initialize({
+      startOnLoad: false,
+      theme: theme === 'dark' ? 'dark' : 'default',
+      securityLevel: 'strict',
+      fontFamily: 'var(--font-ui-sans)',
+      flowchart: { useMaxWidth: true, htmlLabels: true },
+      sequence: { useMaxWidth: true },
+      gantt: { useMaxWidth: true },
+    })
+    initialized = true
+    initTheme = theme
+    return
+  }
+  if (initTheme !== theme) {
+    mermaid.initialize({
+      theme: theme === 'dark' ? 'dark' : 'default',
+    })
+    initTheme = theme
+  }
+}
+
+export interface MermaidRenderResult {
+  svg: string
+  width: number
+  height: number
+  warnings: string[]
+}
+
+export interface MermaidParseError {
+  message: string
+  line?: number
+  column?: number
+}
+
+let renderCounter = 0
+
+export async function renderMermaid(
+  source: string,
+  options: { theme?: 'light' | 'dark'; mode?: 'interactive' | 'static' } = {}
+): Promise<MermaidRenderResult> {
+  const theme = options.theme ?? 'light'
+  ensureInitialized(theme)
+  const id = `mermaid-${Date.now()}-${++renderCounter}`
+  try {
+    const result = await mermaid.render(id, source)
+    const parser = new DOMParser()
+    const doc = parser.parseFromString(result.svg, 'image/svg+xml')
+    const svg = doc.querySelector('svg')
+    let width = 800
+    let height = 600
+    if (svg) {
+      const viewBox = svg.getAttribute('viewBox')
+      if (viewBox) {
+        const parts = viewBox.split(/\s+/).map(Number)
+        if (parts.length === 4) {
+          width = parts[2]
+          height = parts[3]
+        }
+      }
+      const w = svg.getAttribute('width')
+      const h = svg.getAttribute('height')
+      if (w && !isNaN(parseFloat(w))) width = parseFloat(w)
+      if (h && !isNaN(parseFloat(h))) height = parseFloat(h)
+    }
+    return {
+      svg: result.svg,
+      width,
+      height,
+      warnings: [],
+    }
+  } catch (error) {
+    const message = error instanceof Error ? error.message : 'Mermaid 渲染失败'
+    return {
+      svg: renderErrorSvg(message),
+      width: 400,
+      height: 120,
+      warnings: [message],
+    }
+  }
+}
+
+function renderErrorSvg(message: string): string {
+  return `<svg xmlns="http://www.w3.org/2000/svg" width="400" height="120" viewBox="0 0 400 120">
+  <rect width="400" height="120" fill="var(--color-error-soft, #ffebe9)" rx="6" />
+  <text x="20" y="30" font-family="var(--font-ui-mono, monospace)" font-size="13" fill="var(--color-error, #cf222e)" font-weight="600">Mermaid 渲染错误</text>
+  <text x="20" y="55" font-family="var(--font-ui-mono, monospace)" font-size="12" fill="var(--color-text-secondary, #656d76)">${escapeXml(message).slice(0, 100)}</text>
+  <text x="20" y="90" font-family="var(--font-ui-sans, sans-serif)" font-size="11" fill="var(--color-text-tertiary, #9198a0)">请检查语法是否正确，支持 flowchart、sequenceDiagram、classDiagram 等。</text>
+</svg>`
+}
+
+function escapeXml(str: string): string {
+  return str.replace(/[<>&'"]/g, (c) => {
+    const map: Record<string, string> = { '<': '&lt;', '>': '&gt;', '&': '&amp;', "'": '&apos;', '"': '&quot;' }
+    return map[c] ?? c
+  })
+}
+
+export function useMermaidTheme() {
+  const themeStore = useThemeStore()
+  const mermaidTheme = ref<'light' | 'dark'>(themeStore.isDark ? 'dark' : 'light')
+  watch(() => themeStore.isDark, (isDark) => {
+    mermaidTheme.value = isDark ? 'dark' : 'light'
+    ensureInitialized(mermaidTheme.value)
+  })
+  return { mermaidTheme }
+}
+
+export async function validateMermaid(source: string): Promise<{ valid: boolean; error?: MermaidParseError }> {
+  try {
+    ensureInitialized('light')
+    await mermaid.parse(source)
+    return { valid: true }
+  } catch (error) {
+    const message = error instanceof Error ? error.message : '未知错误'
+    return { valid: false, error: { message } }
+  }
+}

frontend/src/services/themePackageService.spec.ts

@@ -0,0 +1,137 @@
+// @vitest-environment happy-dom
+import { beforeEach, describe, expect, it } from 'vitest'
+import {
+  inspectThemePackage,
+  installTheme,
+  listInstalledThemes,
+  uninstallTheme,
+} from './themePackageService'
+import type { ThemeManifest } from '@/contracts'
+
+const validYaml = `
+theme_id: ocean-blue
+name: 海洋蓝
+version: 1.2.0
+author: 测试作者
+min_app_version: 0.1.0
+css_entry: theme.css
+is_dark: false
+`
+
+function manifest(overrides: Partial<ThemeManifest> = {}): ThemeManifest {
+  return {
+    theme_id: 'test-theme',
+    name: '测试主题',
+    version: '1.0.0',
+    author: '作者',
+    min_app_version: '0.1.0',
+    is_dark: false,
+    css_entry: 'theme.css',
+    ...overrides,
+  }
+}
+
+beforeEach(() => {
+  localStorage.clear()
+  document.head.querySelectorAll('style[id^="theme-style-"]').forEach((el) => el.remove())
+})
+
+describe('inspectThemePackage', () => {
+  it('解析合法的 manifest 并标记为兼容', async () => {
+    const result = await inspectThemePackage(validYaml)
+
+    expect(result.compatible).toBe(true)
+    expect(result.manifest.theme_id).toBe('ocean-blue')
+    expect(result.manifest.name).toBe('海洋蓝')
+    expect(result.manifest.version).toBe('1.2.0')
+    expect(result.error_code).toBeUndefined()
+  })
+
+  it('缺少必填字段时返回 THEME_MANIFEST_INVALID 而不是抛错', async () => {
+    const result = await inspectThemePackage('theme_id: no-name\nversion: 1.0.0\n')
+
+    expect(result.compatible).toBe(false)
+    expect(result.error_code).toBe('THEME_MANIFEST_INVALID')
+  })
+
+  it('theme_id 含非法字符时判定不兼容', async () => {
+    const result = await inspectThemePackage(validYaml.replace('ocean-blue', 'Ocean Blue!'))
+
+    expect(result.compatible).toBe(false)
+    expect(result.error_code).toBe('THEME_MANIFEST_INVALID')
+  })
+
+  it('css_entry 指向远程地址时判定为安全违规', async () => {
+    const result = await inspectThemePackage(
+      validYaml.replace('css_entry: theme.css', 'css_entry: https://evil.example.com/theme.css'),
+    )
+
+    expect(result.compatible).toBe(false)
+    expect(result.error_code).toBe('THEME_SECURITY_VIOLATION')
+  })
+})
+
+describe('installTheme 的 CSS 安全校验', () => {
+  it('拒绝含 @import 的 CSS', async () => {
+    await expect(
+      installTheme(manifest(), '@import url("https://evil.example.com/x.css");'),
+    ).rejects.toThrow(/THEME_SECURITY_VIOLATION/)
+  })
+
+  it('拒绝含 javascript: 的 CSS', async () => {
+    await expect(
+      installTheme(manifest(), '[data-theme="test-theme"] { background: url(javascript:alert(1)); }'),
+    ).rejects.toThrow(/THEME_SECURITY_VIOLATION/)
+  })
+
+  it('拒绝含 expression() 的 CSS', async () => {
+    await expect(
+      installTheme(manifest(), '[data-theme="test-theme"] { width: expression(alert(1)); }'),
+    ).rejects.toThrow(/THEME_SECURITY_VIOLATION/)
+  })
+
+  it('不安全的 CSS 不会被注入页面', async () => {
+    await installTheme(manifest(), '@import "x.css";').catch(() => {})
+
+    expect(document.getElementById('theme-style-test-theme')).toBeNull()
+  })
+})
+
+describe('主题安装生命周期', () => {
+  const safeCss = '[data-theme="test-theme"] { --color-accent-primary: #2f6feb; }'
+
+  it('安装后可列出，且默认不启用', async () => {
+    const installed = await installTheme(manifest(), safeCss)
+
+    expect(installed.builtin).toBe(false)
+    expect(installed.enabled).toBe(false)
+
+    const themes = await listInstalledThemes()
+    expect(themes.map((t) => t.theme_id)).toContain('test-theme')
+  })
+
+  it('安装会把 CSS 注入独立的 style 节点', async () => {
+    await installTheme(manifest(), safeCss)
+
+    const styleEl = document.getElementById('theme-style-test-theme')
+    expect(styleEl?.textContent).toContain('--color-accent-primary')
+  })
+
+  it('重复安装同一 theme_id 只保留一份', async () => {
+    await installTheme(manifest(), safeCss)
+    await installTheme(manifest({ version: '2.0.0' }), safeCss)
+
+    const themes = await listInstalledThemes()
+    expect(themes.filter((t) => t.theme_id === 'test-theme')).toHaveLength(1)
+    expect(themes.find((t) => t.theme_id === 'test-theme')?.version).toBe('2.0.0')
+  })
+
+  it('卸载会同时移除记录与注入的样式', async () => {
+    await installTheme(manifest(), safeCss)
+    await uninstallTheme('test-theme')
+
+    const themes = await listInstalledThemes()
+    expect(themes.map((t) => t.theme_id)).not.toContain('test-theme')
+    expect(document.getElementById('theme-style-test-theme')).toBeNull()
+  })
+})

frontend/src/services/themePackageService.ts

@@ -0,0 +1,400 @@
+import type { InstalledTheme, ThemeManifest, ThemePackageInspection } from '@/contracts'
+
+const STORAGE_KEY = 'installed-themes'
+const ACTIVE_CUSTOM_KEY = 'active-custom-theme'
+
+function loadStoredThemes(): InstalledTheme[] {
+  try {
+    const raw = localStorage.getItem(STORAGE_KEY)
+    return raw ? (JSON.parse(raw) as InstalledTheme[]) : []
+  } catch {
+    return []
+  }
+}
+
+function saveThemes(themes: InstalledTheme[]) {
+  localStorage.setItem(STORAGE_KEY, JSON.stringify(themes))
+}
+
+function validateManifest(raw: Record<string, unknown>): { manifest: ThemeManifest; warnings: string[] } {
+  const warnings: string[] = []
+  const required = ['theme_id', 'name', 'version', 'author', 'min_app_version', 'css_entry']
+  for (const field of required) {
+    if (!raw[field]) {
+      throw new Error(`THEME_MANIFEST_INVALID: missing required field '${field}'`)
+    }
+  }
+  if (!/^[a-z0-9_-]+$/.test(String(raw.theme_id))) {
+    throw new Error('THEME_MANIFEST_INVALID: theme_id must match [a-z0-9_-]+')
+  }
+  if (!/^\d+\.\d+\.\d+/.test(String(raw.version))) {
+    warnings.push('版本号格式建议使用 semver（如 1.0.0）')
+  }
+  const cssEntry = String(raw.css_entry)
+  if (cssEntry.includes('://') || cssEntry.startsWith('data:')) {
+    throw new Error('THEME_SECURITY_VIOLATION: css_entry must be a relative path within the package')
+  }
+  const manifest: ThemeManifest = {
+    theme_id: String(raw.theme_id),
+    name: String(raw.name),
+    version: String(raw.version),
+    author: String(raw.author),
+    description: raw.description ? String(raw.description) : undefined,
+    min_app_version: String(raw.min_app_version),
+    is_dark: Boolean(raw.is_dark ?? false),
+    css_entry: cssEntry,
+    preview: raw.preview ? String(raw.preview) : undefined,
+    tags: Array.isArray(raw.tags) ? raw.tags.map(String) : undefined,
+    homepage: raw.homepage ? String(raw.homepage) : undefined,
+    license: raw.license ? String(raw.license) : undefined,
+  }
+  return { manifest, warnings }
+}
+
+function validateCssSafety(css: string): string[] {
+  const warnings: string[] = []
+  const lower = css.toLowerCase()
+  if (lower.includes('@import')) {
+    throw new Error('THEME_SECURITY_VIOLATION: @import is not allowed in theme CSS')
+  }
+  if (lower.includes('url(') && !lower.includes('url(data:')) {
+    warnings.push('CSS 包含远程资源引用，预览时可能无法加载')
+  }
+  if (lower.includes('expression(') || lower.includes('javascript:')) {
+    throw new Error('THEME_SECURITY_VIOLATION: CSS expressions are not allowed')
+  }
+  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) {
+    styleEl = document.createElement('style')
+    styleEl.id = `theme-style-${themeId}`
+    document.head.appendChild(styleEl)
+  }
+  styleEl.textContent = css
+}
+
+function removeThemeCss(themeId: string) {
+  const styleEl = document.getElementById(`theme-style-${themeId}`)
+  if (styleEl) styleEl.remove()
+}
+
+function inspectYamlContent(yamlText: string): ThemeManifest {
+  const lines = yamlText.split('\n')
+  const result: Record<string, unknown> = {}
+  let currentKey: string | null = null
+  for (const line of lines) {
+    const trimmed = line.trim()
+    if (!trimmed || trimmed.startsWith('#')) continue
+    const match = trimmed.match(/^([a-z_]+):\s*(.*)$/i)
+    if (match) {
+      currentKey = match[1]
+      let value = match[2].trim()
+      if (value.startsWith('"') && value.endsWith('"')) value = value.slice(1, -1)
+      else if (value.startsWith("'") && value.endsWith("'")) value = value.slice(1, -1)
+      else if (value === 'true') result[currentKey] = true
+      else if (value === 'false') result[currentKey] = false
+      else if (/^\d+$/.test(value)) result[currentKey] = Number(value)
+      if (currentKey && !(currentKey in result)) result[currentKey] = value
+    }
+  }
+  const { manifest } = validateManifest(result)
+  return manifest
+}
+
+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'
+    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.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)
+      }
+    }
+    input.oncancel = () => resolve(null)
+    input.click()
+  })
+}
+
+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 会检查包内文件
+    }
+    return {
+      package_id,
+      manifest,
+      preview_url: '',
+      warnings,
+      compatible: true,
+    }
+  } catch (error) {
+    const message = error instanceof Error ? error.message : '未知错误'
+    const error_code = message.startsWith('THEME_') ? message.split(':')[0] : 'THEME_MANIFEST_INVALID'
+    return {
+      package_id,
+      manifest: {} as ThemeManifest,
+      preview_url: '',
+      warnings: [message],
+      compatible: false,
+      error_code,
+    }
+  }
+}
+
+export async function installTheme(
+  manifest: ThemeManifest,
+  cssContent: string,
+): Promise<InstalledTheme> {
+  const warnings = validateCssSafety(cssContent)
+  if (warnings.length > 0) {
+    console.warn('[theme] CSS validation warnings:', warnings)
+  }
+  applyThemeCss(manifest.theme_id, cssContent)
+  const installed: InstalledTheme = {
+    theme_id: manifest.theme_id,
+    name: manifest.name,
+    version: manifest.version,
+    author: manifest.author,
+    description: manifest.description,
+    is_dark: manifest.is_dark,
+    builtin: false,
+    enabled: false,
+    installed_at: new Date().toISOString(),
+    manifest,
+    code_theme: manifest.is_dark ? 'github-dark' : 'github-light',
+  }
+  const existing = loadStoredThemes()
+  const idx = existing.findIndex((t) => t.theme_id === manifest.theme_id)
+  if (idx >= 0) existing[idx] = installed
+  else existing.push(installed)
+  localStorage.setItem(`${STORAGE_KEY}-css-${manifest.theme_id}`, cssContent)
+  saveThemes(existing)
+  return installed
+}
+
+export async function listInstalledThemes(): Promise<InstalledTheme[]> {
+  const themes = loadStoredThemes()
+  for (const theme of themes) {
+    if (!theme.builtin) {
+      const css = localStorage.getItem(`${STORAGE_KEY}-css-${theme.theme_id}`)
+      if (css) applyThemeCss(theme.theme_id, css)
+    }
+  }
+  return themes
+}
+
+export async function enableTheme(themeId: string): Promise<InstalledTheme> {
+  const themes = loadStoredThemes()
+  const theme = themes.find((t) => t.theme_id === themeId)
+  if (!theme) throw new Error('THEME_PACKAGE_NOT_FOUND')
+  theme.enabled = true
+  saveThemes(themes)
+  return theme
+}
+
+export async function disableTheme(themeId: string): Promise<void> {
+  const themes = loadStoredThemes()
+  const theme = themes.find((t) => t.theme_id === themeId)
+  if (theme) {
+    theme.enabled = false
+    saveThemes(themes)
+  }
+}
+
+export async function uninstallTheme(themeId: string): Promise<void> {
+  const themes = loadStoredThemes()
+  const idx = themes.findIndex((t) => t.theme_id === themeId)
+  if (idx >= 0) {
+    themes.splice(idx, 1)
+    saveThemes(themes)
+  }
+  removeThemeCss(themeId)
+  localStorage.removeItem(`${STORAGE_KEY}-css-${themeId}`)
+  const active = localStorage.getItem(ACTIVE_CUSTOM_KEY)
+  if (active === themeId) localStorage.removeItem(ACTIVE_CUSTOM_KEY)
+}
+
+export function getActiveCustomTheme(): string | null {
+  return localStorage.getItem(ACTIVE_CUSTOM_KEY)
+}
+
+export function setActiveCustomTheme(themeId: string | null) {
+  if (themeId) localStorage.setItem(ACTIVE_CUSTOM_KEY, themeId)
+  else localStorage.removeItem(ACTIVE_CUSTOM_KEY)
+}
+
+export const mockCommunityThemes: ThemeManifest[] = [
+  {
+    theme_id: 'ocean-blue',
+    name: 'Ocean Blue',
+    version: '1.2.0',
+    author: 'community',
+    description: '宁静的海洋蓝色主题，适合长时间阅读',
+    min_app_version: '0.2.0',
+    is_dark: false,
+    css_entry: 'theme.css',
+    tags: ['浅色', '蓝色', '阅读'],
+    license: 'MIT',
+  },
+  {
+    theme_id: 'forest-green',
+    name: 'Forest Green',
+    version: '1.0.1',
+    author: 'nature-collection',
+    description: '森林绿色护眼主题',
+    min_app_version: '0.2.0',
+    is_dark: false,
+    css_entry: 'theme.css',
+    tags: ['浅色', '绿色', '护眼'],
+    license: 'MIT',
+  },
+  {
+    theme_id: 'midnight-purple',
+    name: 'Midnight Purple',
+    version: '2.0.0',
+    author: 'night-owl',
+    description: '深紫色暗夜主题，适合编码',
+    min_app_version: '0.2.0',
+    is_dark: true,
+    css_entry: 'theme.css',
+    tags: ['深色', '紫色', '极客'],
+    license: 'Apache-2.0',
+  },
+  {
+    theme_id: 'solarized-light',
+    name: 'Solarized Light',
+    version: '1.1.0',
+    author: 'solarized',
+    description: '经典 Solarized 浅色主题',
+    min_app_version: '0.1.0',
+    is_dark: false,
+    css_entry: 'theme.css',
+    tags: ['浅色', '经典', '阅读'],
+    license: 'MIT',
+  },
+  {
+    theme_id: 'dracula',
+    name: 'Dracula',
+    version: '3.0.0',
+    author: 'dracula-theme',
+    description: '流行的 Dracula 暗色主题',
+    min_app_version: '0.2.0',
+    is_dark: true,
+    css_entry: 'theme.css',
+    tags: ['深色', '紫色', '高对比'],
+    license: 'MIT',
+  },
+]
+
+function buildCommunityThemeCss(themeId: string, isDark: boolean, accent: string): string {
+  const palettes: Record<string, { primary: string; soft: string; hover: string }> = {
+    'ocean-blue': { primary: '#0077b6', soft: '#e0f0fa', hover: '#005f92' },
+    'forest-green': { primary: '#2d6a4f', soft: '#e8f5ec', hover: '#1b4332' },
+    'midnight-purple': { primary: '#9d4edd', soft: '#2b1a3e', hover: '#7b2cbf' },
+    'solarized-light': { primary: '#b58900', soft: '#fdf6e3', hover: '#8a6d0b' },
+    'dracula': { primary: '#bd93f9', soft: '#2d2a3e', hover: '#a77bf5' },
+  }
+  const p = palettes[themeId] ?? palettes['ocean-blue']
+  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: ${p.primary};
+  --color-accent-primary: ${p.primary};
+  --color-accent-primary-hover: ${p.hover};
+  --color-accent-soft: ${p.soft};
+  --color-border-default: #3b3f5c;
+  --color-border-subtle: #2f334d;
+  --color-border-focus: ${p.primary};
+  --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: ${p.primary};
+  --color-accent-primary: ${p.primary};
+  --color-accent-primary-hover: ${p.hover};
+  --color-accent-soft: ${p.soft};
+  --color-border-default: #e2e8f0;
+  --color-border-subtle: #f1f5f9;
+  --color-border-focus: ${p.primary};
+  --color-success: #10b981;
+  --color-success-soft: #d1fae5;
+  --color-warning: #f59e0b;
+  --color-warning-soft: #fef3c7;
+  --color-error: #ef4444;
+  --color-error-soft: #fee2e2;
+  --color-info: #3b82f6;
+  --color-info-soft: #dbeafe;
+}`
+}
+
+export async function installCommunityTheme(themeId: string): Promise<InstalledTheme> {
+  const themeManifest = mockCommunityThemes.find((t) => t.theme_id === themeId)
+  if (!themeManifest) throw new Error('THEME_PACKAGE_NOT_FOUND')
+  const css = buildCommunityThemeCss(themeId, themeManifest.is_dark, themeManifest.theme_id)
+  return installTheme(themeManifest, css)
+}
+
+export function getCommunityThemePreviewCss(themeId: string): string {
+  const t = mockCommunityThemes.find((m) => m.theme_id === themeId)
+  if (!t) return ''
+  return buildCommunityThemeCss(themeId, t.is_dark, themeId)
+}

frontend/src/services/traceService.spec.ts

@@ -0,0 +1,116 @@
+import { describe, expect, it } from 'vitest'
+import { buildTraceNodes, getToolCallsFromEvents, getTotalDuration } from './traceService'
+import type { AgentEvent, AgentEventType } from '@/contracts'
+
+let sequence = 0
+
+function event(
+  type: AgentEventType,
+  data: Record<string, unknown> = {},
+  timestamp = '2026-01-01T00:00:00.000Z',
+): AgentEvent {
+  return { event: type, sequence: ++sequence, run_id: 'run-1', data, timestamp }
+}
+
+describe('buildTraceNodes', () => {
+  it('把模型调用期间的事件挂到该模型调用之下', () => {
+    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('RunCompleted'),
+    ])
+
+    // 顶层只剩：运行开始、模型调用、运行完成
+    expect(nodes).toHaveLength(3)
+    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'])
+  })
+
+  it('模型调用失败时标记为 error', () => {
+    const nodes = buildTraceNodes([
+      event('ModelCallStarted', { model: 'mock-1' }),
+      event('ModelCallFailed', { error_code: 'PROVIDER_TIMEOUT' }),
+    ])
+
+    expect(nodes).toHaveLength(1)
+    expect(nodes[0].status).toBe('error')
+  })
+
+  it('运行级事件始终留在顶层，不会被模型调用吞掉', () => {
+    const nodes = buildTraceNodes([
+      event('ModelCallStarted', { model: 'mock-1' }),
+      event('RunFailed', { error_code: 'RUN_TIMEOUT' }),
+    ])
+
+    expect(nodes.map((n) => n.type)).toEqual(['model_call', 'error'])
+  })
+
+  it('模型调用之外的事件保持在顶层', () => {
+    const nodes = buildTraceNodes([
+      event('RunStarted'),
+      event('ToolCall', { name: 'search' }),
+      event('RunCompleted'),
+    ])
+
+    expect(nodes).toHaveLength(3)
+    expect(nodes.every((n) => n.children.length === 0)).toBe(true)
+  })
+
+  it('空事件列表返回空树', () => {
+    expect(buildTraceNodes([])).toEqual([])
+  })
+})
+
+describe('getToolCallsFromEvents', () => {
+  it('按 tool_call_id 配对 ToolCall 与 ToolResult', () => {
+    const calls = getToolCallsFromEvents([
+      event('ToolCall', { tool_call_id: 'c1', name: 'read_note' }),
+      event('ToolResult', { tool_call_id: 'c1', success: true, duration_ms: 40 }),
+    ])
+
+    expect(calls).toHaveLength(1)
+    expect(calls[0].name).toBe('read_note')
+    expect(calls[0].status).toBe('completed')
+    expect(calls[0].duration_ms).toBe(40)
+  })
+
+  it('工具失败时状态为 error', () => {
+    const calls = getToolCallsFromEvents([
+      event('ToolCall', { tool_call_id: 'c2', name: 'write_note' }),
+      event('ToolResult', { tool_call_id: 'c2', success: false, error_code: 'TOOL_DENIED' }),
+    ])
+
+    expect(calls[0].status).toBe('error')
+  })
+
+  it('尚未返回结果的工具调用保持 running', () => {
+    const calls = getToolCallsFromEvents([
+      event('ToolCall', { tool_call_id: 'c9', name: 'write_note' }),
+    ])
+
+    expect(calls).toHaveLength(1)
+    expect(calls[0].status).toBe('running')
+  })
+})
+
+describe('getTotalDuration', () => {
+  it('返回首尾事件的时间差', () => {
+    const duration = getTotalDuration([
+      event('RunStarted', {}, '2026-01-01T00:00:00.000Z'),
+      event('RunCompleted', {}, '2026-01-01T00:00:02.500Z'),
+    ])
+
+    expect(duration).toBe(2500)
+  })
+
+  it('单个事件或空列表时为 0', () => {
+    expect(getTotalDuration([])).toBe(0)
+    expect(getTotalDuration([event('RunStarted')])).toBe(0)
+  })
+})

frontend/src/services/traceService.ts

@@ -0,0 +1,252 @@
+import type { AgentEvent, TraceNode, TraceNodeType } from '@/contracts'
+
+export function buildTraceNodes(events: AgentEvent[]): TraceNode[] {
+  const nodes: TraceNode[] = []
+  let currentModelCallId: string | null = null
+
+  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,
+      sequence: event.sequence,
+      type,
+      title,
+      subtitle,
+      status,
+      data: event.data,
+      timestamp: event.timestamp,
+      children: [],
+    }
+
+    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
+      }
+      continue
+    }
+
+    if (currentModelCallId && type !== 'run' && type !== 'complete' && type !== 'error') {
+      const parent = findNodeById(nodes, currentModelCallId)
+      if (parent) {
+        node.parent_id = currentModelCallId
+        parent.children.push(node)
+        continue
+      }
+    }
+
+    nodes.push(node)
+  }
+
+  return nodes
+}
+
+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
+  }
+  return null
+}
+
+function mapEventType(eventType: AgentEvent['event']): TraceNodeType {
+  switch (eventType) {
+    case 'RunStarted': return 'run'
+    case 'RunCompleted': return 'complete'
+    case 'RunFailed': return 'error'
+    case 'RunCancelled': return 'complete'
+    case 'ModelCallStarted':
+    case 'ModelCallCompleted':
+    case 'ModelCallFailed':
+      return 'model_call'
+    case 'ToolCall': return 'tool_call'
+    case 'ToolResult': return 'tool_result'
+    case 'TextDelta': return 'text'
+    case 'ThinkingDelta': return 'thinking'
+    case 'Citation': return 'citation'
+    case 'Usage': return 'usage'
+    case 'PermissionRequired':
+    case 'PermissionResolved':
+      return 'permission'
+    default: return 'text'
+  }
+}
+
+function getNodeTitle(event: AgentEvent): string {
+  switch (event.event) {
+    case 'RunStarted': return '运行开始'
+    case 'RunCompleted': return '运行完成'
+    case 'RunFailed': return '运行失败'
+    case 'RunCancelled': return '运行已取消'
+    case 'ModelCallStarted': return '模型调用'
+    case 'ModelCallCompleted': return '模型调用完成'
+    case 'ModelCallFailed': return '模型调用失败'
+    case 'ToolCall': return `工具调用：${event.data.name ?? '未知工具'}`
+    case 'ToolResult': return `工具结果：${event.data.name ?? '未知工具'}`
+    case 'TextDelta': return '回复文本'
+    case 'ThinkingDelta': return '思考中'
+    case 'Citation': return '引用来源'
+    case 'Usage': return 'Token 用量'
+    case 'PermissionRequired': return '需要权限确认'
+    case 'PermissionResolved': return '权限已处理'
+    default: return event.event
+  }
+}
+
+function getNodeSubtitle(event: AgentEvent): string | undefined {
+  const data = event.data
+  switch (event.event) {
+    case 'ModelCallStarted':
+      return [data.provider_id, data.model].filter(Boolean).join(' / ') || undefined
+    case 'ModelCallCompleted':
+      if (data.duration_ms != null) return `耗时 ${formatDuration(data.duration_ms as number)}`
+      return undefined
+    case 'ToolCall':
+      return `调用 ${data.name ?? 'unknown'}`
+    case 'ToolResult':
+      if (data.duration_ms != null) return `耗时 ${formatDuration(data.duration_ms as number)}`
+      if (data.success) return '成功'
+      return data.error_code ? `错误：${data.error_code}` : 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`
+      const input = asNumber(data.input_tokens)
+      const output = asNumber(data.output_tokens)
+      if (input == null && output == null) return '- tokens'
+      return `${(input ?? 0) + (output ?? 0)} tokens`
+    }
+    case 'PermissionRequired':
+      return String(data.permission ?? '')
+    case 'PermissionResolved':
+      return String(data.decision ?? '')
+    default:
+      return undefined
+  }
+}
+
+function getNodeStatus(event: AgentEvent): TraceNode['status'] {
+  switch (event.event) {
+    case 'RunFailed':
+    case 'ModelCallFailed':
+      return 'error'
+    case 'RunCompleted':
+    case 'RunCancelled':
+    case 'ModelCallCompleted':
+    case 'ToolResult':
+    case 'Usage':
+    case 'PermissionResolved':
+      return 'completed'
+    case 'ToolCall':
+      if (event.data.status === 'completed') return 'completed'
+      if (event.data.status === 'error') return 'error'
+      return 'running'
+    case 'PermissionRequired':
+      return 'pending'
+    case 'ModelCallStarted':
+    case 'RunStarted':
+    case 'ThinkingDelta':
+      return 'running'
+    default:
+      return 'completed'
+  }
+}
+
+function formatDuration(ms: number): string {
+  if (ms < 1000) return `${ms}ms`
+  if (ms < 60000) return `${(ms / 1000).toFixed(1)}s`
+  return `${(ms / 60000).toFixed(1)}min`
+}
+
+/** 事件 data 是 Record<string, unknown>，取数值字段前先收窄类型。 */
+function asNumber(value: unknown): number | null {
+  if (typeof value === 'number' && Number.isFinite(value)) return value
+  if (typeof value === 'string' && value.trim() !== '') {
+    const parsed = Number(value)
+    if (Number.isFinite(parsed)) return parsed
+  }
+  return null
+}
+
+export function calculateDuration(event1: AgentEvent, event2: AgentEvent): number {
+  const t1 = new Date(event1.timestamp).getTime()
+  const t2 = new Date(event2.timestamp).getTime()
+  return Math.max(0, t2 - t1)
+}
+
+export function getTotalDuration(events: AgentEvent[]): number {
+  if (events.length < 2) return 0
+  const first = events[0]
+  const last = events[events.length - 1]
+  return calculateDuration(first, last)
+}
+
+export function getToolCallsFromEvents(events: AgentEvent[]): Array<{
+  tool_call_id: string
+  name: string
+  status: 'pending' | 'running' | 'completed' | 'error'
+  arguments?: Record<string, unknown>
+  result?: string
+  duration_ms?: number
+  started_at?: string
+  completed_at?: string
+}> {
+  const calls = new Map<string, {
+    tool_call_id: string
+    name: string
+    status: 'pending' | 'running' | 'completed' | 'error'
+    arguments?: Record<string, unknown>
+    result?: string
+    duration_ms?: number
+    started_at?: string
+    completed_at?: string
+  }>()
+
+  for (const event of events) {
+    if (event.event === 'ToolCall') {
+      const id = String(event.data.tool_call_id ?? '')
+      calls.set(id, {
+        tool_call_id: id,
+        name: String(event.data.name ?? 'unknown'),
+        status: 'running',
+        arguments: (event.data.arguments ?? event.data.parameters) as Record<string, unknown> | undefined,
+        started_at: event.timestamp,
+      })
+    } else if (event.event === 'ToolResult') {
+      const id = String(event.data.tool_call_id ?? '')
+      const existing = calls.get(id)
+      if (existing) {
+        existing.status = event.data.success === false ? 'error' : 'completed'
+        existing.result = event.data.output != null ? JSON.stringify(event.data.output) : event.data.result as string | undefined
+        existing.duration_ms = event.data.duration_ms as number | undefined
+        existing.completed_at = event.timestamp
+      }
+    }
+  }
+
+  return [...calls.values()]
+}

frontend/src/stores/theme.ts

@@ -1,6 +1,7 @@
 import { defineStore } from 'pinia'
 import { ref, computed, watch } from 'vue'
-import type { ThemeConfig } from '@/contracts'
+import type { ThemeConfig, ThemeManifest, InstalledTheme, ThemePackageInspection } from '@/contracts'
+import * as themePkg from '@/services/themePackageService'
 
 const builtinThemes: ThemeConfig[] = [
   { theme_id: 'light', name: '浅色', version: '1.0.0', description: '默认浅色主题', is_dark: false, builtin: true, code_theme: 'github-light' },
@@ -14,42 +15,77 @@ function isCodeBlockThemePreference(value: unknown): value is CodeBlockThemePref
   return value === 'auto' || value === 'github-light' || value === 'github-dark'
 }
 
+const builtinToInstalled = (t: ThemeConfig): InstalledTheme => ({
+  theme_id: t.theme_id,
+  name: t.name,
+  version: t.version,
+  author: 'NotesAgent 团队',
+  description: t.description,
+  is_dark: t.is_dark,
+  builtin: true,
+  enabled: true,
+  manifest: {
+    theme_id: t.theme_id,
+    name: t.name,
+    version: t.version,
+    author: 'NotesAgent 团队',
+    description: t.description,
+    min_app_version: '0.1.0',
+    is_dark: t.is_dark,
+    css_entry: 'builtin',
+  },
+  code_theme: t.code_theme,
+})
+
 export const useThemeStore = defineStore('theme', () => {
-  const themes = ref<ThemeConfig[]>(builtinThemes)
+  const themes = ref<ThemeConfig[]>([...builtinThemes])
+  const installedCustomThemes = ref<InstalledTheme[]>([])
   const currentThemeId = ref<string>('light')
   const fontEditorSize = ref(15)
   const fontEditorFamily = ref('system-ui')
   const lineHeight = ref(1.7)
   const codeBlockTheme = ref<CodeBlockThemePreference>('auto')
+  const isImporting = ref(false)
+  const importError = ref<string | null>(null)
+  const pendingInspection = ref<ThemePackageInspection | null>(null)
   let appearanceHydrated = false
 
+  const allThemes = computed<InstalledTheme[]>(() => [
+    ...builtinThemes.map(builtinToInstalled),
+    ...installedCustomThemes.value,
+  ])
+
   const currentTheme = computed(() =>
-    themes.value.find((t) => t.theme_id === currentThemeId.value) || themes.value[0]
+    allThemes.value.find((t) => t.theme_id === currentThemeId.value) || allThemes.value[0]
   )
 
   const isDark = computed(() => currentTheme.value?.is_dark || false)
+
   const resolvedCodeBlockTheme = computed<'github-light' | 'github-dark'>(() => {
     if (codeBlockTheme.value !== 'auto') return codeBlockTheme.value
     return currentTheme.value?.code_theme ?? (isDark.value ? 'github-dark' : 'github-light')
   })
 
   function applyTheme(themeId: string) {
-    const theme = themes.value.find((t) => t.theme_id === themeId)
+    const theme = allThemes.value.find((t) => t.theme_id === themeId)
     if (!theme) return
     currentThemeId.value = themeId
     const root = document.documentElement
-    if (theme.is_dark) {
+    if (theme.builtin) {
-      root.setAttribute('data-theme', 'dark')
+      if (theme.is_dark) {
-    } else if (themeId === 'sepia') {
+        root.setAttribute('data-theme', 'dark')
-      root.setAttribute('data-theme', 'sepia')
+      } else if (themeId === 'sepia') {
+        root.setAttribute('data-theme', 'sepia')
+      } else {
+        root.setAttribute('data-theme', 'light')
+      }
     } else {
-      root.setAttribute('data-theme', 'light')
+      root.setAttribute('data-theme', themeId)
     }
     localStorage.setItem('theme', themeId)
   }
 
   function initTheme() {
-    // 先恢复外观再开放 watch 持久化，避免 immediate watcher 覆盖本地设置。
     const savedAppearance = localStorage.getItem('editor-appearance')
     if (savedAppearance) {
       try {
@@ -60,10 +96,11 @@ 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 && themes.value.find((t) => t.theme_id === saved)) {
+    if (saved) {
       applyTheme(saved)
       return
     }
@@ -71,6 +108,23 @@ export const useThemeStore = defineStore('theme', () => {
     applyTheme(prefersDark ? 'dark' : 'light')
   }
 
+  async function loadCustomThemes() {
+    try {
+      const list = await themePkg.listInstalledThemes()
+      installedCustomThemes.value = list
+      themes.value = [...builtinThemes, ...list.map((t) => ({
+        theme_id: t.theme_id,
+        name: t.name,
+        version: t.version,
+        description: t.description ?? '',
+        is_dark: t.is_dark,
+        builtin: false,
+        author: t.author,
+        code_theme: t.code_theme,
+      }))]
+    } catch { /* keep builtin only */ }
+  }
+
   function toggleTheme() {
     applyTheme(isDark.value ? 'light' : 'dark')
   }
@@ -90,8 +144,99 @@ export const useThemeStore = defineStore('theme', () => {
     codeBlockTheme: codeBlockTheme.value,
   }))
 
+  async function inspectThemePackage(packageData: string): Promise<ThemePackageInspection> {
+    isImporting.value = true
+    importError.value = null
+    try {
+      const result = await themePkg.inspectThemePackage(packageData)
+      pendingInspection.value = result
+      if (!result.compatible) {
+        importError.value = result.warnings[0] ?? '主题包不兼容'
+      }
+      return result
+    } catch (error) {
+      importError.value = error instanceof Error ? error.message : '导入失败'
+      throw error
+    } finally {
+      isImporting.value = false
+    }
+  }
+
+  async function installThemeFromInspection(manifest: ThemeManifest, cssContent: string) {
+    isImporting.value = true
+    importError.value = null
+    try {
+      const installed = await themePkg.installTheme(manifest, cssContent)
+      const idx = installedCustomThemes.value.findIndex((t) => t.theme_id === installed.theme_id)
+      if (idx >= 0) installedCustomThemes.value[idx] = installed
+      else installedCustomThemes.value.push(installed)
+      const themeConfig: ThemeConfig = {
+        theme_id: installed.theme_id,
+        name: installed.name,
+        version: installed.version,
+        description: installed.description ?? '',
+        is_dark: installed.is_dark,
+        builtin: false,
+        author: installed.author,
+        code_theme: installed.code_theme,
+      }
+      const existingIdx = themes.value.findIndex((t) => t.theme_id === installed.theme_id)
+      if (existingIdx >= 0) themes.value[existingIdx] = themeConfig
+      else themes.value.push(themeConfig)
+      pendingInspection.value = null
+      return installed
+    } catch (error) {
+      importError.value = error instanceof Error ? error.message : '安装失败'
+      throw error
+    } finally {
+      isImporting.value = false
+    }
+  }
+
+  async function uninstallTheme(themeId: string) {
+    await themePkg.uninstallTheme(themeId)
+    installedCustomThemes.value = installedCustomThemes.value.filter((t) => t.theme_id !== themeId)
+    themes.value = themes.value.filter((t) => t.theme_id !== themeId || t.builtin)
+    if (currentThemeId.value === themeId) {
+      applyTheme('light')
+    }
+  }
+
+  async function installCommunityTheme(themeId: string) {
+    isImporting.value = true
+    importError.value = null
+    try {
+      const installed = await themePkg.installCommunityTheme(themeId)
+      const idx = installedCustomThemes.value.findIndex((t) => t.theme_id === installed.theme_id)
+      if (idx >= 0) installedCustomThemes.value[idx] = installed
+      else installedCustomThemes.value.push(installed)
+      const themeConfig: ThemeConfig = {
+        theme_id: installed.theme_id,
+        name: installed.name,
+        version: installed.version,
+        description: installed.description ?? '',
+        is_dark: installed.is_dark,
+        builtin: false,
+        author: installed.author,
+        code_theme: installed.code_theme,
+      }
+      const existingIdx = themes.value.findIndex((t) => t.theme_id === installed.theme_id)
+      if (existingIdx >= 0) themes.value[existingIdx] = themeConfig
+      else themes.value.push(themeConfig)
+      return installed
+    } catch (error) {
+      importError.value = error instanceof Error ? error.message : '安装失败'
+      throw error
+    } finally {
+      isImporting.value = false
+    }
+  }
+
+  function isThemeInstalled(themeId: string): boolean {
+    return themes.value.some((t) => t.theme_id === themeId)
+  }
+
   watch(resolvedCodeBlockTheme, (theme) => {
-    // CSS 与 Shiki 共用该属性，确保代码块背景和 token 配色始终成套切换。
     document.documentElement.setAttribute('data-code-theme', theme)
   }, { immediate: true })
 
@@ -116,6 +261,7 @@ export const useThemeStore = defineStore('theme', () => {
 
   return {
     themes,
+    installedCustomThemes,
     currentThemeId,
     currentTheme,
     isDark,
@@ -124,9 +270,19 @@ export const useThemeStore = defineStore('theme', () => {
     lineHeight,
     codeBlockTheme,
     resolvedCodeBlockTheme,
+    isImporting,
+    importError,
+    pendingInspection,
+    allThemes,
     applyTheme,
     initTheme,
     toggleTheme,
     resetToDefault,
+    loadCustomThemes,
+    inspectThemePackage,
+    installThemeFromInspection,
+    uninstallTheme,
+    installCommunityTheme,
+    isThemeInstalled,
   }
 })

frontend/src/utils/markdown.ts

@@ -13,6 +13,7 @@ import sql from '@shikijs/langs/sql'
 import typescript from '@shikijs/langs/typescript'
 import githubDark from '@shikijs/themes/github-dark'
 import githubLight from '@shikijs/themes/github-light'
+import { renderMermaid } from '@/services/mermaidService'
 
 marked.setOptions({ gfm: true, breaks: true })
 
@@ -38,18 +39,51 @@ export async function highlightCode(source: string, requestedLanguage = 'text'):
   })
 }
 
-export async function renderMarkdown(source: string): Promise<string> {
+export async function renderMarkdown(source: string, options?: { theme?: 'light' | 'dark' }): Promise<string> {
   const html = marked.parse(source, { async: false }) as string
   const documentNode = new DOMParser().parseFromString(`<body>${html}</body>`, 'text/html')
+
+  const mermaidBlocks: { pre: Element; source: string }[] = []
+
   for (const code of documentNode.querySelectorAll('pre > code')) {
     const requestedLanguage = [...code.classList].find((name) => name.startsWith('language-'))?.slice(9) || 'text'
+    if (requestedLanguage === 'mermaid') {
+      mermaidBlocks.push({ pre: code.parentElement!, source: code.textContent ?? '' })
+      continue
+    }
     const highlighted = await highlightCode(code.textContent ?? '', requestedLanguage)
     const fragment = document.createRange().createContextualFragment(highlighted)
     code.parentElement?.replaceWith(fragment)
   }
 
-  // Markdown 可能来自模型或外部笔记，高亮完成后仍必须在最终出口统一净化。
+  for (const { pre, source } of mermaidBlocks) {
-  return DOMPurify.sanitize(documentNode.body.innerHTML, { USE_PROFILES: { html: true } })
+    try {
+      const result = await renderMermaid(source, { theme: options?.theme, mode: 'static' })
+      const container = document.createElement('div')
+      container.className = 'markdown-mermaid'
+      container.innerHTML = result.svg
+      pre.replaceWith(container)
+    } catch {
+      const fallback = document.createElement('pre')
+      fallback.className = 'mermaid-error'
+      fallback.textContent = source
+      pre.replaceWith(fallback)
+    }
+  }
+
+  return DOMPurify.sanitize(documentNode.body.innerHTML, {
+    USE_PROFILES: { html: true },
+    ADD_TAGS: ['svg', 'path', 'rect', 'circle', 'ellipse', 'line', 'polyline', 'polygon',
+      'text', 'tspan', 'textPath', 'g', 'defs', 'marker', 'style', 'clipPath', 'foreignObject',
+      'title', 'desc', 'use', 'image', 'linearGradient', 'stop', 'radialGradient'],
+    ADD_ATTR: ['viewBox', 'd', 'cx', 'cy', 'r', 'rx', 'ry', 'x', 'y', 'width', 'height',
+      'fill', 'stroke', 'stroke-width', 'stroke-dasharray', 'stroke-linecap', 'stroke-linejoin',
+      'transform', 'points', 'x1', 'y1', 'x2', 'y2', 'class', 'id', 'style', 'text-anchor',
+      'dominant-baseline', 'font-size', 'font-family', 'font-weight', 'opacity', 'orient',
+      'marker-end', 'marker-start', 'marker-mid', 'refX', 'refY', 'viewBox', 'preserveAspectRatio',
+      'xlink:href', 'href', 'clip-path', 'gradientUnits', 'gradientTransform', 'stop-color',
+      'stop-opacity', 'offset', 'patternUnits', 'patternTransform', 'target'],
+  })
 }
 
 // TODO(performance): 编辑器首屏稳定后评估将 Shiki 延迟加载或迁移到 Web Worker。

frontend/tsconfig.app.json

@@ -9,6 +9,7 @@
     "resolveJsonModule": true,
     "isolatedModules": true,
     "esModuleInterop": true,
+    "skipLibCheck": true,
     "lib": ["ES2022", "ESNext.Disposable", "DOM", "DOM.Iterable"],
     "types": ["vite/client"],
     "baseUrl": ".",