diff --git a/frontend/package.json b/frontend/package.json
index e02a8eb..8fa7393 100644
--- a/frontend/package.json
+++ b/frontend/package.json
@@ -23,6 +23,7 @@
     "@milkdown/vue": "^7.22.0",
     "@vueuse/core": "^14.0.0",
     "codemirror": "^6.0.0",
+    "dompurify": "^3.4.14",
     "marked": "^15.0.0",
     "pinia": "^4.0.0",
     "vue": "^3.5.0",
diff --git a/frontend/pnpm-lock.yaml b/frontend/pnpm-lock.yaml
index fa6908b..87bc7a4 100644
--- a/frontend/pnpm-lock.yaml
+++ b/frontend/pnpm-lock.yaml
@@ -47,6 +47,9 @@ importers:
       codemirror:
         specifier: ^6.0.0
         version: 6.0.2
+      dompurify:
+        specifier: ^3.4.14
+        version: 3.4.14
       marked:
         specifier: ^15.0.0
         version: 15.0.12
@@ -829,11 +832,6 @@ packages:
 
   '@volar/typescript@2.4.15':
     resolution: {integrity: sha512-2aZ8i0cqPGjXb4BhkMsPYDkkuc2ZQ6yOpqwAuNwUoncELqoy5fRgOQtLR9gB0g902iS0NAkvpIzs27geVyVdPg==}
-    peerDependencies:
-      typescript: '*'
-    peerDependenciesMeta:
-      typescript:
-        optional: true
 
   '@vue-macros/common@3.1.4':
     resolution: {integrity: sha512-/5Fv+6DgIcM9ajY05ZmKBv+LMX1M9A0X+IUwDRVdt67ciw8OV9bvG2r34p3RiEadlsQybjhKPRKNXDC8Bp23cw==}
@@ -2608,13 +2606,11 @@ snapshots:
 
   '@volar/source-map@2.4.15': {}
 
-  '@volar/typescript@2.4.15(typescript@5.9.3)':
+  '@volar/typescript@2.4.15':
     dependencies:
       '@volar/language-core': 2.4.15
       path-browserify: 1.0.1
       vscode-uri: 3.2.0
-    optionalDependencies:
-      typescript: 5.9.3
 
   '@vue-macros/common@3.1.4(vue@3.5.41(typescript@5.9.3))':
     dependencies:
@@ -3652,7 +3648,7 @@ snapshots:
 
   vue-tsc@2.2.12(typescript@5.9.3):
     dependencies:
-      '@volar/typescript': 2.4.15(typescript@5.9.3)
+      '@volar/typescript': 2.4.15
       '@vue/language-core': 2.2.12(typescript@5.9.3)
       typescript: 5.9.3
 
diff --git a/frontend/src/components/common/AppShell.vue b/frontend/src/components/common/AppShell.vue
index d6ef9a7..fe7c007 100644
--- a/frontend/src/components/common/AppShell.vue
+++ b/frontend/src/components/common/AppShell.vue
@@ -1,15 +1,15 @@
 <script setup lang="ts">
-import { computed } from 'vue'
+import { computed, onMounted, watch } from 'vue'
 import { useRoute, useRouter } from 'vue-router'
 import { useWorkspaceStore } from '@/stores/workspace'
 import { useThemeStore } from '@/stores/theme'
 import { useEditorStore } from '@/stores/editor'
 import { useSettingsStore } from '@/stores/settings'
-import { useAgentStore } from '@/stores/agent'
 import PrimarySidebar from './PrimarySidebar.vue'
 import SecondarySidebar from './SecondarySidebar.vue'
 import StatusBar from './StatusBar.vue'
 import TitleBar from './TitleBar.vue'
+import CommandPalette from './CommandPalette.vue'
 
 defineProps<{
   showSecondarySidebar?: boolean
@@ -19,14 +19,19 @@ const workspaceStore = useWorkspaceStore()
 const themeStore = useThemeStore()
 const editorStore = useEditorStore()
 const settingsStore = useSettingsStore()
-const agentStore = useAgentStore()
 const route = useRoute()
 const router = useRouter()
 
+onMounted(() => { void settingsStore.loadDiagnostics() })
+watch(() => settingsStore.defaultEditorMode, (mode) => editorStore.setMode(mode), { immediate: true })
+watch(() => settingsStore.editorLineWidth, (width) => {
+  document.documentElement.style.setProperty('--editor-line-width', `${width}ch`)
+}, { immediate: true })
+
 const routeName = computed(() => route.name as string)
 
 const secondaryComponent = computed(() => {
-  switch (routeName) {
+  switch (routeName.value) {
     case 'workspace': return 'file-tree'
     case 'search': return 'search-filters'
     case 'chat': return 'conversation-list'
@@ -58,6 +63,7 @@ defineExpose({ openCitation })
       </main>
     </div>
     <StatusBar />
+    <CommandPalette />
   </div>
 </template>
 
diff --git a/frontend/src/components/common/CommandPalette.vue b/frontend/src/components/common/CommandPalette.vue
new file mode 100644
index 0000000..a661469
--- /dev/null
+++ b/frontend/src/components/common/CommandPalette.vue
@@ -0,0 +1,101 @@
+<script setup lang="ts">
+import { computed, nextTick, onBeforeUnmount, onMounted, ref } from 'vue'
+import { useRouter } from 'vue-router'
+import { useEditorStore } from '@/stores/editor'
+import { useThemeStore } from '@/stores/theme'
+import { useWorkspaceStore } from '@/stores/workspace'
+import * as workspaceService from '@/services/workspaceService'
+
+const router = useRouter()
+const editorStore = useEditorStore()
+const themeStore = useThemeStore()
+const workspaceStore = useWorkspaceStore()
+const open = ref(false)
+const query = ref('')
+const input = ref<HTMLInputElement | null>(null)
+
+interface Command { id: string; label: string; hint: string; run: () => void | Promise<void> }
+
+const commands = computed<Command[]>(() => [
+  { id: 'workspace', label: '打开工作区', hint: '导航', run: () => router.push('/workspace') },
+  { id: 'search', label: '全局搜索', hint: '导航', run: () => router.push('/search') },
+  { id: 'chat', label: '打开 AI 对话', hint: '导航', run: () => router.push('/chat') },
+  { id: 'agent', label: '创建 Agent Run', hint: '导航', run: () => router.push('/agent/runs') },
+  { id: 'settings', label: '打开设置', hint: '导航', run: () => router.push('/settings') },
+  { 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() },
+  { id: 'new-note', label: '创建笔记', hint: '工作区', run: createNote },
+])
+
+const filteredCommands = computed(() => {
+  const value = query.value.trim().toLocaleLowerCase()
+  return value ? commands.value.filter((command) => `${command.label} ${command.hint}`.toLocaleLowerCase().includes(value)) : commands.value
+})
+
+function show() {
+  open.value = true
+  query.value = ''
+  void nextTick(() => input.value?.focus())
+}
+
+function hide() { open.value = false }
+
+async function execute(command: Command | undefined) {
+  if (!command) return
+  hide()
+  await command.run()
+}
+
+async function createNote() {
+  const rawName = window.prompt('笔记名称')?.trim()
+  if (!rawName) return
+  const name = rawName.endsWith('.md') ? rawName : `${rawName}.md`
+  const file = await workspaceService.createFile('/', name, `# ${rawName}\n\n`)
+  workspaceStore.addFileToTree('/', file)
+  await editorStore.loadFile(file.path)
+  workspaceStore.openFile(file.path)
+  await router.push('/workspace')
+}
+
+function handleKeydown(event: KeyboardEvent) {
+  if ((event.ctrlKey || event.metaKey) && event.key.toLocaleLowerCase() === 'p') {
+    event.preventDefault()
+    open.value ? hide() : show()
+  } else if (event.key === 'Escape' && open.value) {
+    hide()
+  }
+}
+
+onMounted(() => window.addEventListener('keydown', handleKeydown))
+onBeforeUnmount(() => window.removeEventListener('keydown', handleKeydown))
+</script>
+
+<template>
+  <Teleport to="body">
+    <div v-if="open" class="command-backdrop" @click.self="hide">
+      <section class="command-palette" role="dialog" aria-modal="true" aria-label="命令面板">
+        <input ref="input" v-model="query" class="command-input" placeholder="输入命令…" @keydown.enter.prevent="execute(filteredCommands[0])" />
+        <div class="command-list">
+          <button v-for="command in filteredCommands" :key="command.id" type="button" @click="execute(command)">
+            <span>{{ command.label }}</span><small>{{ command.hint }}</small>
+          </button>
+          <p v-if="!filteredCommands.length">没有匹配的命令</p>
+        </div>
+        <footer><span>Enter 执行</span><span>Esc 关闭</span></footer>
+      </section>
+    </div>
+  </Teleport>
+</template>
+
+<style scoped>
+.command-backdrop { position: fixed; inset: 0; z-index: var(--z-modal); display: flex; justify-content: center; align-items: flex-start; padding-top: 12vh; background: var(--color-background-overlay); }
+.command-palette { width: min(600px, calc(100vw - 32px)); overflow: hidden; border: 1px solid var(--color-border-default); border-radius: var(--radius-lg); background: var(--color-surface-elevated); box-shadow: var(--shadow-xl); }
+.command-input { width: 100%; padding: var(--space-lg); border: 0; border-bottom: 1px solid var(--color-border-default); outline: 0; background: transparent; font-size: var(--font-size-xl); }
+.command-list { max-height: 360px; overflow: auto; padding: var(--space-sm); }
+.command-list button { display: flex; justify-content: space-between; width: 100%; padding: var(--space-md); border-radius: var(--radius-md); text-align: left; }
+.command-list button:hover, .command-list button:focus { outline: 0; background: var(--color-accent-soft); color: var(--color-accent-primary); }
+.command-list small, .command-list p, footer { color: var(--color-text-tertiary); }
+.command-list p { padding: var(--space-xl); text-align: center; }
+footer { display: flex; gap: var(--space-lg); padding: var(--space-sm) var(--space-lg); border-top: 1px solid var(--color-border-subtle); font-size: var(--font-size-xs); }
+</style>
diff --git a/frontend/src/components/common/ExtensionListPanel.vue b/frontend/src/components/common/ExtensionListPanel.vue
new file mode 100644
index 0000000..bb18ca0
--- /dev/null
+++ b/frontend/src/components/common/ExtensionListPanel.vue
@@ -0,0 +1,36 @@
+<script setup lang="ts">
+import { computed, onMounted } from 'vue'
+import { useRoute } from 'vue-router'
+import { usePluginStore } from '@/stores/plugin'
+import { useSkillStore } from '@/stores/skill'
+
+const route = useRoute()
+const skillStore = useSkillStore()
+const pluginStore = usePluginStore()
+const isPlugin = computed(() => route.name === 'plugins')
+
+onMounted(() => { if (isPlugin.value) void pluginStore.loadPlugins(); else void skillStore.loadSkills() })
+</script>
+
+<template>
+  <div class="sidebar-panel">
+    <div v-if="isPlugin" class="sidebar-list">
+      <button v-for="plugin in pluginStore.plugins" :key="plugin.plugin_id" class="sidebar-list-item extension-item"
+        :class="{ active: pluginStore.selectedPluginId === plugin.plugin_id }" @click="pluginStore.selectPlugin(plugin.plugin_id)">
+        <span>{{ plugin.icon || '🧩' }}</span><span><strong>{{ plugin.name }}</strong><small>{{ plugin.status }}</small></span>
+      </button>
+    </div>
+    <div v-else class="sidebar-list">
+      <button v-for="skill in skillStore.skills" :key="skill.skill_id" class="sidebar-list-item extension-item"
+        :class="{ active: skillStore.selectedSkillId === skill.skill_id }" @click="skillStore.selectSkill(skill.skill_id)">
+        <span>{{ skill.icon || '⚡' }}</span><span><strong>{{ skill.name }}</strong><small>{{ skill.status }}</small></span>
+      </button>
+    </div>
+  </div>
+</template>
+
+<style scoped>
+.extension-item { display: grid; grid-template-columns: auto 1fr; align-items: center; gap: var(--space-sm); width: 100%; text-align: left; }
+.extension-item strong, .extension-item small { display: block; }
+.extension-item small { color: var(--color-text-tertiary); }
+</style>
diff --git a/frontend/src/components/common/PrimarySidebar.vue b/frontend/src/components/common/PrimarySidebar.vue
index e5d0047..8a24394 100644
--- a/frontend/src/components/common/PrimarySidebar.vue
+++ b/frontend/src/components/common/PrimarySidebar.vue
@@ -1,9 +1,10 @@
 <script setup lang="ts">
 import { useRoute, useRouter } from 'vue-router'
-import { computed } from 'vue'
+import { computed, ref } from 'vue'
 
 const route = useRoute()
 const router = useRouter()
+const expanded = ref(localStorage.getItem('primary-sidebar-expanded') === 'true')
 
 const navItems = [
   { name: 'workspace', icon: '📁', label: '工作区' },
@@ -18,18 +19,21 @@ const navItems = [
 ]
 
 const currentName = computed(() => {
-  const name = route.name as string
-  if (name === 'skills' || name === 'plugins') return 'skills'
-  return name
+  return route.name as string
 })
 
 function navigate(name: string) {
   router.push({ name })
 }
+
+function toggleExpanded() {
+  expanded.value = !expanded.value
+  localStorage.setItem('primary-sidebar-expanded', String(expanded.value))
+}
 </script>
 
 <template>
-  <aside class="primary-sidebar">
+  <aside class="primary-sidebar" :class="{ expanded }">
     <nav class="nav-list">
       <div
         v-for="item in navItems"
@@ -44,9 +48,10 @@ function navigate(name: string) {
       </div>
     </nav>
     <div class="sidebar-footer">
-      <div class="nav-item" @click="navigate('settings')" title="设置">
-        <span class="nav-icon">⚙️</span>
-      </div>
+      <button class="nav-item collapse-button" type="button" :title="expanded ? '收起导航' : '展开导航'" @click="toggleExpanded">
+        <span class="nav-icon">{{ expanded ? '«' : '»' }}</span>
+        <span class="nav-label">{{ expanded ? '收起' : '展开' }}</span>
+      </button>
     </div>
   </aside>
 </template>
@@ -62,6 +67,11 @@ function navigate(name: string) {
   z-index: var(--z-sidebar);
 }
 
+.primary-sidebar.expanded { width: var(--sidebar-primary-width-expanded); }
+.primary-sidebar.expanded .nav-item { flex-direction: row; justify-content: flex-start; gap: var(--space-md); padding: 0 var(--space-lg); }
+.primary-sidebar.expanded .nav-icon { margin-bottom: 0; }
+.primary-sidebar.expanded .nav-label { font-size: var(--font-size-sm); }
+
 .nav-list {
   flex: 1;
   padding: var(--space-sm) 0;
@@ -121,4 +131,6 @@ function navigate(name: string) {
   padding: var(--space-sm) 0;
   border-top: 1px solid var(--color-border-subtle);
 }
+
+.collapse-button { width: calc(100% - 8px); }
 </style>
diff --git a/frontend/src/components/common/SecondarySidebar.vue b/frontend/src/components/common/SecondarySidebar.vue
index 34c8a1b..1c51e1f 100644
--- a/frontend/src/components/common/SecondarySidebar.vue
+++ b/frontend/src/components/common/SecondarySidebar.vue
@@ -27,7 +27,7 @@ const sidebarTitle = computed(() => {
   return titles[props.component || ''] || ''
 })
 
-const showSkillToggle = computed(() => routeName === 'skills' || routeName === 'plugins')
+const showSkillToggle = computed(() => routeName.value === 'skills' || routeName.value === 'plugins')
 </script>
 
 <template>
@@ -109,4 +109,5 @@ const showSkillToggle = computed(() => routeName === 'skills' || routeName === '
   overflow-y: auto;
   overflow-x: hidden;
 }
+
 </style>
diff --git a/frontend/src/components/common/StatusBar.vue b/frontend/src/components/common/StatusBar.vue
index a7e212d..41089d7 100644
--- a/frontend/src/components/common/StatusBar.vue
+++ b/frontend/src/components/common/StatusBar.vue
@@ -75,10 +75,10 @@ const showEditorInfo = computed(() => route.name === 'workspace')
         {{ saveStatusText }}
       </span>
       <span class="status-item" :title="indexStatusText">
-        <span class="status-dot" style="background: var(--color-success)" />
-        索引就绪
+        <span class="status-dot" :style="{ background: settingsStore.indexStatus.status === 'error' ? 'var(--color-error)' : settingsStore.indexStatus.status === 'indexing' ? 'var(--color-warning)' : 'var(--color-success)' }" />
+        {{ indexStatusText }}
       </span>
-      <span class="status-item" :style="{ color: aiCoreColor }" @click>
+      <span class="status-item" :style="{ color: aiCoreColor }">
         <span class="status-dot" :style="{ background: aiCoreColor }" />
         {{ aiCoreStatusText }}
       </span>
diff --git a/frontend/src/contracts/index.ts b/frontend/src/contracts/index.ts
index 01e03c9..aaba2a7 100644
--- a/frontend/src/contracts/index.ts
+++ b/frontend/src/contracts/index.ts
@@ -75,6 +75,8 @@ export interface ChatMessage {
   created_at: string
   citations?: Citation[]
   tool_calls?: ToolCall[]
+  thinking?: string
+  usage?: TokenUsage
 }
 
 export interface Citation {
@@ -99,6 +101,7 @@ export type ModelEventType =
   | 'ToolCallDelta'
   | 'ToolCallEnd'
   | 'Usage'
+  | 'Citation'
   | 'Error'
   | 'Done'
 
@@ -246,16 +249,17 @@ export interface Plugin {
   status: PluginStatus
   enabled: boolean
   permissions: string[]
+  granted_permissions?: string[]
   contributions: PluginContribution[]
-  backend_type?: 'mcp' | 'internal'
-  transport?: 'stdio' | 'websocket'
+  backend_type?: 'mcp' | 'internal_rpc' | 'none'
+  transport?: 'stdio' | 'http' | 'none'
   last_error?: string
   dependent_skills?: string[]
 }
 
 // ============ Provider ============
 
-export type ProviderType = 'openai' | 'anthropic' | 'ollama' | 'openai-compatible' | 'mock'
+export type ProviderType = ApiProviderType
 
 export interface ModelCapability {
   chat: boolean
@@ -346,10 +350,10 @@ export interface ErrorResponse {
 }
 
 export interface SystemStatus {
+  status: 'ok'
   name: string
   version: string
-  environment: 'development' | 'production' | 'test'
-  ai_core_available: boolean
+  environment: string
 }
 
 export type SaveStatus =
@@ -362,3 +366,178 @@ export type SaveStatus =
   | 'conflict'
 
 export type AiCoreStatus = 'starting' | 'running' | 'stopped' | 'error'
+
+// ============ FastAPI wire contracts ============
+// UI view models above may contain presentation-only fields. Services must use
+// these DTOs at the HTTP boundary and explicitly map them to view models.
+
+export interface PageMeta {
+  total: number
+  limit: number
+  offset: number
+}
+
+export interface OperationResponse {
+  status: 'accepted' | 'completed'
+  resource_id?: string | null
+  message?: string | null
+}
+
+export interface ApiNoteBlock {
+  block_id: string
+  note_id: string
+  heading_path: string[]
+  start_offset: number
+  end_offset: number
+  content: string
+  content_hash: string
+  token_count: number
+}
+
+export interface ApiNoteSummary {
+  note_id: string
+  title: string
+  file_path: string
+  tags: string[]
+  created_at: string
+  updated_at: string
+}
+
+export interface ApiNote extends ApiNoteSummary {
+  markdown: string
+  blocks: ApiNoteBlock[]
+}
+
+export interface ApiSearchResult {
+  note_id: string
+  block_id: string
+  title: string
+  file_path: string
+  heading_path: string[]
+  snippet?: string | null
+  score: number
+  citation: ApiCitation
+}
+
+export interface ApiCitation {
+  citation_id: string
+  note_id: string
+  block_id: string
+  file_path: string
+  heading_path: string[]
+  start_offset?: number | null
+  end_offset?: number | null
+  source_audio?: string | null
+  start_time?: number | null
+  end_time?: number | null
+  speaker?: string | null
+}
+
+export interface ApiAgentRun {
+  run_id: string
+  status: AgentRunStatus
+  input: string
+  provider_id: string
+  model: string
+  skill_id?: string | null
+  current_step: number
+  max_steps: number
+  token_budget?: number | null
+  cancelled: boolean
+  output?: string | null
+  error_code?: string | null
+  error_message?: string | null
+  token_usage: number
+  created_at: string
+  updated_at: string
+}
+
+export interface ApiSkill {
+  manifest: {
+    skill_id: string
+    name: string
+    version: string
+    description: string
+    permissions: string[]
+    tools: string[]
+    retrieval: { top_k: number; rerank: boolean; citation: boolean }
+    model: { required_capabilities: string[] }
+  }
+  status: SkillStatus
+  enabled: boolean
+  missing_dependencies: string[]
+}
+
+export interface ApiPlugin {
+  manifest: {
+    plugin_id: string
+    name: string
+    version: string
+    description: string
+    permissions: string[]
+    contributes: {
+      tools: string[]
+      commands: string[]
+      importers: string[]
+      exporters: string[]
+      panels: string[]
+      settings_sections: string[]
+    }
+    backend: { type: 'mcp' | 'internal_rpc' | 'none'; transport: 'stdio' | 'http' | 'none' }
+  }
+  status: PluginStatus
+  enabled: boolean
+  granted_permissions: string[]
+  error_message?: string | null
+}
+
+export type ApiProviderType =
+  | 'mock'
+  | 'openai_responses'
+  | 'openai_chat'
+  | 'openai_compatible'
+  | 'anthropic_messages'
+  | 'ollama'
+
+export interface ApiProviderConfig {
+  provider_id: string
+  provider_type: ApiProviderType
+  name: string
+  base_url?: string | null
+  default_model?: string | null
+  credential_id?: string | null
+  enabled: boolean
+  capabilities: string[]
+}
+
+export interface ApiModelInfo {
+  model: string
+  display_name: string
+  capabilities: string[]
+}
+
+export interface ApiTask {
+  task_id: string
+  title: string
+  description: string
+  status: TaskStatus
+  note_id?: string | null
+  due_at?: string | null
+  created_at: string
+  updated_at: string
+}
+
+export interface ApiIndexStatus {
+  status: 'idle' | 'queued' | 'running' | 'failed'
+  pending_jobs: number
+  active_job_id?: string | null
+  last_completed_at?: string | null
+  error_message?: string | null
+}
+
+export interface ApiIndexJob {
+  job_id: string
+  status: 'queued' | 'running' | 'completed' | 'failed'
+  scope: 'all' | 'notes' | 'vectors'
+  created_at: string
+}
diff --git a/frontend/src/features/agent/AgentView.vue b/frontend/src/features/agent/AgentView.vue
new file mode 100644
index 0000000..135d166
--- /dev/null
+++ b/frontend/src/features/agent/AgentView.vue
@@ -0,0 +1,118 @@
+<script setup lang="ts">
+import { computed, onMounted, reactive, ref, watch } from 'vue'
+import { useRoute, useRouter } from 'vue-router'
+import { useAgentStore } from '@/stores/agent'
+import { useProviderStore } from '@/stores/provider'
+import { useSkillStore } from '@/stores/skill'
+
+const route = useRoute()
+const router = useRouter()
+const agentStore = useAgentStore()
+const providerStore = useProviderStore()
+const skillStore = useSkillStore()
+const pageError = ref('')
+const form = reactive({
+  input: '', provider_id: 'mock', model: 'mock-1', skill_id: '', max_steps: 10,
+  tool_timeout_seconds: 30, run_timeout_seconds: 300, token_budget: 8000,
+  allow_network: false, max_concurrent_tools: 1, allowed_tools: [] as string[],
+})
+
+const models = computed(() => providerStore.modelsByProvider[form.provider_id] ?? [])
+const isNewRun = computed(() => !route.params.runId)
+
+onMounted(async () => {
+  try {
+    await Promise.all([providerStore.loadProviders(), skillStore.loadSkills(), agentStore.loadTools()])
+    await providerStore.loadModels(form.provider_id)
+  } catch (error) { pageError.value = error instanceof Error ? error.message : 'Agent 配置加载失败' }
+})
+
+watch(() => route.params.runId, async (runId) => {
+  if (typeof runId !== 'string') return
+  try { await agentStore.loadRun(runId) } catch (error) { pageError.value = error instanceof Error ? error.message : 'Run 加载失败' }
+}, { immediate: true })
+
+watch(() => form.provider_id, async (providerId) => {
+  try { await providerStore.loadModels(providerId); form.model = models.value[0]?.model_id ?? '' } catch { /* page keeps current selection */ }
+})
+
+function toggleTool(name: string) {
+  const index = form.allowed_tools.indexOf(name)
+  if (index >= 0) form.allowed_tools.splice(index, 1)
+  else form.allowed_tools.push(name)
+}
+
+async function createRun() {
+  pageError.value = ''
+  try {
+    const run = await agentStore.createRun({
+      input: form.input, provider_id: form.provider_id, model: form.model,
+      skill_id: form.skill_id || undefined, allowed_tools: form.allowed_tools,
+      max_steps: form.max_steps, tool_timeout_seconds: form.tool_timeout_seconds,
+      run_timeout_seconds: form.run_timeout_seconds, token_budget: form.token_budget,
+      allow_network: form.allow_network, max_concurrent_tools: form.max_concurrent_tools,
+    })
+    await router.replace({ name: 'agent', params: { runId: run.run_id } })
+  } catch (error) { pageError.value = error instanceof Error ? error.message : 'Run 创建失败' }
+}
+
+function eventText(data: Record<string, unknown>) {
+  return String(data.text ?? data.message ?? data.code ?? '')
+}
+</script>
+
+<template>
+  <section class="feature-page agent-page">
+    <header class="feature-header"><div><h1>{{ isNewRun ? '创建 Agent Run' : 'Agent Trace' }}</h1><p>配置执行边界，并实时查看模型、工具和权限事件。</p></div>
+      <button v-if="!isNewRun" class="button-secondary" @click="router.push({ name: 'agent' })">新建 Run</button></header>
+    <div v-if="pageError || agentStore.error" class="error-banner">{{ pageError || agentStore.error }}</div>
+    <form v-if="isNewRun" class="panel run-form" @submit.prevent="createRun">
+      <div class="field"><label>任务</label><textarea v-model="form.input" class="textarea" required placeholder="描述希望 Agent 完成的任务" /></div>
+      <div class="form-grid">
+        <div class="field"><label>Provider</label><select v-model="form.provider_id" class="select"><option v-for="p in providerStore.enabledProviders" :key="p.provider_id" :value="p.provider_id">{{ p.name }}</option></select></div>
+        <div class="field"><label>Model</label><select v-model="form.model" class="select"><option v-for="m in models" :key="m.model_id" :value="m.model_id">{{ m.name }}</option></select></div>
+        <div class="field"><label>Skill</label><select v-model="form.skill_id" class="select"><option value="">不使用 Skill</option><option v-for="s in skillStore.readySkills" :key="s.skill_id" :value="s.skill_id">{{ s.name }}</option></select></div>
+        <div class="field"><label>最大步骤</label><input v-model.number="form.max_steps" class="input" type="number" min="1" max="100" /></div>
+        <div class="field"><label>Tool Timeout（秒）</label><input v-model.number="form.tool_timeout_seconds" class="input" type="number" min="1" /></div>
+        <div class="field"><label>Run Timeout（秒）</label><input v-model.number="form.run_timeout_seconds" class="input" type="number" min="1" /></div>
+        <div class="field"><label>Token Budget</label><input v-model.number="form.token_budget" class="input" type="number" min="1" /></div>
+        <div class="field"><label>最大并发工具</label><input v-model.number="form.max_concurrent_tools" class="input" type="number" min="1" /></div>
+      </div>
+      <div class="field"><label>允许的 Tool</label><div class="tool-grid"><label v-for="tool in agentStore.tools" :key="tool.name" class="tool-option"><input type="checkbox" :checked="form.allowed_tools.includes(tool.name)" @change="toggleTool(tool.name)" /><span><strong>{{ tool.name }}</strong><small>{{ tool.description }}</small></span></label></div></div>
+      <label class="network"><input v-model="form.allow_network" type="checkbox" /> 允许本次 Run 调用网络工具</label>
+      <div class="inline-actions"><button class="button-primary" :disabled="agentStore.isCreating || !form.input.trim()">{{ agentStore.isCreating ? '创建中…' : '创建并运行' }}</button></div>
+    </form>
+
+    <div v-else class="trace-layout">
+      <div class="panel run-summary"><div><span class="badge info">{{ 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="timeline">
+        <article v-for="event in agentStore.events" :key="event.sequence" class="event-card item-card">
+          <div class="event-head"><span class="badge" :class="{ success: event.event === 'RunCompleted', error: event.event === 'RunFailed', warning: event.event === 'PermissionRequired' }">{{ event.event }}</span><span>#{{ event.sequence }} · {{ new Date(event.timestamp).toLocaleTimeString() }}</span></div>
+          <p v-if="eventText(event.data)" class="event-text">{{ eventText(event.data) }}</p>
+          <pre v-if="['ToolCall', 'ToolResult', 'Citation'].includes(event.event)">{{ JSON.stringify(event.data, null, 2) }}</pre>
+        </article>
+        <div v-if="!agentStore.events.length" class="empty-state"><div><strong>等待 Trace</strong><p>事件连接建立后将在这里实时显示。</p></div></div>
+      </div>
+    </div>
+
+    <div v-if="agentStore.permissionRequest" class="modal-backdrop">
+      <div class="modal"><span class="badge warning">权限确认</span><h2>{{ agentStore.permissionRequest.tool_name }}</h2><p>{{ agentStore.permissionRequest.impact }}</p><p class="subtle">权限：{{ agentStore.permissionRequest.permission }}</p><pre>{{ JSON.stringify(agentStore.permissionRequest.parameters, null, 2) }}</pre><div class="inline-actions permission-actions"><button class="button-primary" @click="agentStore.respondPermission('allow', 'once')">仅本次允许</button><button class="button-secondary" @click="agentStore.respondPermission('allow', 'session')">本次会话允许</button><button class="button-danger" @click="agentStore.respondPermission('deny')">拒绝</button></div></div>
+    </div>
+  </section>
+</template>
+
+<style scoped>
+.run-form { display: grid; gap: var(--space-xl); max-width: 980px; }
+.tool-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: var(--space-sm); }
+.tool-option { display: flex; gap: var(--space-sm); padding: var(--space-sm); border: 1px solid var(--color-border-default); border-radius: var(--radius-md); }
+.tool-option small { display: block; color: var(--color-text-secondary); }
+.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 h2 { margin-top: var(--space-sm); font-family: var(--font-ui-mono); font-size: var(--font-size-lg); }
+.timeline { display: grid; gap: var(--space-md); }
+.event-head { color: var(--color-text-tertiary); font-size: var(--font-size-xs); }
+.event-text { margin-top: var(--space-md); white-space: pre-wrap; line-height: var(--line-height-relaxed); }
+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; }
+.permission-actions { margin-top: var(--space-lg); }
+</style>
diff --git a/frontend/src/features/agent/RunListPanel.vue b/frontend/src/features/agent/RunListPanel.vue
new file mode 100644
index 0000000..fdda293
--- /dev/null
+++ b/frontend/src/features/agent/RunListPanel.vue
@@ -0,0 +1,37 @@
+<script setup lang="ts">
+import { onMounted, ref } from 'vue'
+import { useRouter } from 'vue-router'
+import { useAgentStore } from '@/stores/agent'
+
+const agentStore = useAgentStore()
+const router = useRouter()
+const error = ref('')
+
+onMounted(async () => {
+  try { await agentStore.loadRuns() } catch (reason) { error.value = reason instanceof Error ? reason.message : 'Run 列表加载失败' }
+})
+
+function selectRun(runId: string) { void router.push({ name: 'agent', params: { runId } }) }
+</script>
+
+<template>
+  <div class="sidebar-panel">
+    <button class="button-primary new-button" @click="router.push({ name: 'agent' })">＋ 新建 Run</button>
+    <p v-if="error" class="subtle error-text">{{ error }}</p>
+    <div class="sidebar-list">
+      <button v-for="run in agentStore.sortedRuns" :key="run.run_id" class="sidebar-list-item run-item"
+        :class="{ active: agentStore.activeRunId === run.run_id }" @click="selectRun(run.run_id)">
+        <span class="badge" :class="{ success: run.status === 'completed', error: run.status === 'failed', warning: run.status === 'waiting_permission' }">{{ run.status }}</span>
+        <strong>{{ run.run_id.slice(0, 12) }}</strong><small>{{ run.started_at ? new Date(run.started_at).toLocaleString() : '等待开始' }}</small>
+      </button>
+    </div>
+  </div>
+</template>
+
+<style scoped>
+.new-button { width: 100%; margin-bottom: var(--space-md); }
+.run-item { display: grid; gap: 3px; width: 100%; text-align: left; }
+.run-item .badge { justify-self: start; }
+.run-item small { color: var(--color-text-tertiary); }
+.error-text { margin-bottom: var(--space-sm); color: var(--color-error); }
+</style>
diff --git a/frontend/src/features/chat/ChatView.vue b/frontend/src/features/chat/ChatView.vue
new file mode 100644
index 0000000..b269d5f
--- /dev/null
+++ b/frontend/src/features/chat/ChatView.vue
@@ -0,0 +1,126 @@
+<script setup lang="ts">
+import { computed, onMounted, ref, watch } from 'vue'
+import { useRouter } from 'vue-router'
+import type { Citation } from '@/contracts'
+import { useChatStore } from '@/stores/chat'
+import { useEditorStore } from '@/stores/editor'
+import { useProviderStore } from '@/stores/provider'
+import { useSkillStore } from '@/stores/skill'
+import { useWorkspaceStore } from '@/stores/workspace'
+import { renderMarkdown } from '@/utils/markdown'
+
+const chatStore = useChatStore()
+const providerStore = useProviderStore()
+const skillStore = useSkillStore()
+const workspaceStore = useWorkspaceStore()
+const editorStore = useEditorStore()
+const router = useRouter()
+const loadError = ref('')
+
+const availableModels = computed(() => providerStore.modelsByProvider[chatStore.selectedProviderId] ?? [])
+
+onMounted(async () => {
+  try {
+    await Promise.all([providerStore.loadProviders(), skillStore.loadSkills()])
+    await providerStore.loadModels(chatStore.selectedProviderId)
+  } catch (error) {
+    loadError.value = error instanceof Error ? error.message : '无法加载 AI 配置，当前展示本地数据。'
+  }
+})
+
+watch(() => chatStore.selectedProviderId, async (providerId) => {
+  try {
+    await providerStore.loadModels(providerId)
+    const firstModel = providerStore.modelsByProvider[providerId]?.[0]
+    if (firstModel) chatStore.selectedModel = firstModel.model_id
+  } catch (error) {
+    loadError.value = error instanceof Error ? error.message : '模型列表加载失败'
+  }
+})
+
+function send() { void chatStore.sendMessage(chatStore.inputText) }
+
+async function openCitation(citation: Citation) {
+  await editorStore.loadFile(citation.file_path)
+  workspaceStore.openFile(citation.file_path)
+  editorStore.highlightBlock(citation.block_id)
+  await router.push('/workspace')
+}
+</script>
+
+<template>
+  <section class="chat-page">
+    <header class="chat-toolbar">
+      <div class="field compact"><label>Provider</label><select v-model="chatStore.selectedProviderId" class="select">
+        <option v-for="provider in providerStore.enabledProviders" :key="provider.provider_id" :value="provider.provider_id">{{ provider.name }}</option>
+      </select></div>
+      <div class="field compact"><label>Model</label><select v-model="chatStore.selectedModel" class="select">
+        <option v-for="model in availableModels" :key="model.model_id" :value="model.model_id">{{ model.name }}</option>
+      </select></div>
+      <div class="field compact"><label>Skill</label><select v-model="chatStore.selectedSkillId" class="select">
+        <option :value="null">不使用 Skill</option><option v-for="skill in skillStore.enabledSkills" :key="skill.skill_id" :value="skill.skill_id">{{ skill.name }}</option>
+      </select></div>
+      <label class="rag-toggle"><input v-model="chatStore.useRag" type="checkbox" /> 使用知识库</label>
+    </header>
+    <div v-if="loadError" class="error-banner chat-error">{{ loadError }}</div>
+    <main class="message-timeline">
+      <div v-if="!chatStore.messages.length" class="empty-state"><div><strong>开始一段知识对话</strong><p>可以直接提问，也可以打开 RAG 让模型基于当前 Vault 回答。</p></div></div>
+      <article v-for="message in chatStore.messages" :key="message.message_id" class="message" :class="message.role">
+        <div class="avatar">{{ message.role === 'user' ? '你' : 'AI' }}</div>
+        <div class="message-body">
+          <details v-if="message.thinking" class="thinking"><summary>思考过程</summary><p>{{ message.thinking }}</p></details>
+          <div v-if="message.content" class="message-content markdown-content" v-html="renderMarkdown(message.content)" />
+          <div v-else-if="chatStore.isStreaming" class="message-content">正在思考…</div>
+          <div v-if="message.tool_calls?.length" class="tool-calls"><div v-for="call in message.tool_calls" :key="call.tool_call_id" class="item-card"><span class="badge info">{{ call.status }}</span><strong>{{ call.name }}</strong><pre>{{ JSON.stringify(call.parameters, null, 2) }}</pre></div></div>
+          <div v-if="message.citations?.length" class="citations">
+            <button v-for="(citation, index) in message.citations" :key="citation.block_id" class="citation-card" @click="openCitation(citation)">
+              <span class="badge info">{{ index + 1 }}</span><span><strong>{{ citation.heading_path || citation.file_path }}</strong><small>{{ citation.content }}</small></span>
+            </button>
+          </div>
+          <time>{{ new Date(message.created_at).toLocaleTimeString() }}</time>
+          <small v-if="message.usage" class="usage">Token {{ message.usage.total_tokens }}（输入 {{ message.usage.input_tokens }} / 输出 {{ message.usage.output_tokens }}）</small>
+        </div>
+      </article>
+    </main>
+    <footer class="composer">
+      <textarea v-model="chatStore.inputText" class="textarea" placeholder="输入问题，Ctrl + Enter 发送"
+        @keydown.ctrl.enter.prevent="send" />
+      <div class="composer-actions"><span class="subtle">回答可能包含错误，请核对 Citation。</span>
+        <button v-if="chatStore.isStreaming" class="button-danger" @click="chatStore.stopGeneration">停止</button>
+        <button v-else class="button-primary" :disabled="!chatStore.inputText.trim()" @click="send">发送</button>
+      </div>
+    </footer>
+  </section>
+</template>
+
+<style scoped>
+.chat-page { display: grid; grid-template-rows: auto auto 1fr auto; height: 100%; min-height: 0; background: var(--color-background-primary); }
+.chat-toolbar { display: flex; align-items: end; flex-wrap: wrap; gap: var(--space-md); padding: var(--space-md) var(--space-xl); border-bottom: 1px solid var(--color-border-default); }
+.compact { min-width: 160px; }
+.rag-toggle { display: flex; align-items: center; gap: var(--space-xs); min-height: 36px; color: var(--color-text-secondary); }
+.chat-error { margin: var(--space-md) var(--space-xl) 0; }
+.message-timeline { min-height: 0; overflow: auto; padding: var(--space-xl) max(var(--space-xl), calc((100% - 820px) / 2)); user-select: text; }
+.message { display: grid; grid-template-columns: 36px 1fr; gap: var(--space-md); margin-bottom: var(--space-xl); }
+.avatar { display: grid; place-items: center; width: 34px; height: 34px; border-radius: var(--radius-full); background: var(--color-background-tertiary); font-weight: 700; }
+.assistant .avatar { background: var(--color-accent-soft); color: var(--color-accent-primary); }
+.message-content { white-space: pre-wrap; line-height: var(--line-height-relaxed); }
+.markdown-content { white-space: normal; user-select: text; }
+.markdown-content :deep(p), .markdown-content :deep(ul), .markdown-content :deep(ol), .markdown-content :deep(pre), .markdown-content :deep(blockquote) { margin: .65em 0; }
+.markdown-content :deep(h1), .markdown-content :deep(h2), .markdown-content :deep(h3) { margin: 1em 0 .5em; line-height: var(--line-height-tight); }
+.markdown-content :deep(ul) { padding-left: 1.5em; list-style: disc; }.markdown-content :deep(ol) { padding-left: 1.5em; list-style: decimal; }
+.markdown-content :deep(pre) { overflow: auto; padding: var(--space-md); border-radius: var(--radius-md); background: var(--color-background-secondary); }
+.markdown-content :deep(code) { padding: .1em .3em; border-radius: var(--radius-sm); background: var(--color-background-tertiary); font-family: var(--font-ui-mono); }.markdown-content :deep(pre code) { padding: 0; background: transparent; }
+.markdown-content :deep(blockquote) { padding-left: 1em; border-left: 3px solid var(--color-accent-primary); color: var(--color-text-secondary); }
+.markdown-content :deep(table) { width: 100%; margin: .65em 0; border-collapse: collapse; }.markdown-content :deep(th), .markdown-content :deep(td) { padding: .45em .65em; border: 1px solid var(--color-border-default); text-align: left; }
+.markdown-content :deep(img) { max-width: 100%; }.markdown-content :deep(hr) { margin: 1em 0; border: 0; border-top: 1px solid var(--color-border-default); }
+.thinking { margin-bottom: var(--space-sm); color: var(--color-text-secondary); }.thinking p { margin-top: var(--space-sm); white-space: pre-wrap; }
+.tool-calls { display: grid; gap: var(--space-sm); margin-top: var(--space-md); }.tool-calls .item-card { display: grid; gap: var(--space-xs); }.tool-calls pre { overflow: auto; font-size: var(--font-size-xs); }
+.usage { display: block; margin-top: var(--space-xs); color: var(--color-text-tertiary); }
+.message time { display: block; margin-top: var(--space-sm); color: var(--color-text-tertiary); font-size: var(--font-size-xs); }
+.citations { display: grid; gap: var(--space-sm); margin-top: var(--space-md); }
+.citation-card { display: flex; align-items: flex-start; gap: var(--space-sm); padding: var(--space-sm); border: 1px solid var(--color-border-default); border-radius: var(--radius-md); text-align: left; }
+.citation-card small { display: block; margin-top: 2px; color: var(--color-text-secondary); }
+.composer { padding: var(--space-md) max(var(--space-xl), calc((100% - 820px) / 2)); border-top: 1px solid var(--color-border-default); background: var(--color-surface-primary); }
+.composer .textarea { min-height: 72px; }
+.composer-actions { display: flex; align-items: center; justify-content: space-between; gap: var(--space-md); margin-top: var(--space-sm); }
+</style>
diff --git a/frontend/src/features/chat/ConversationListPanel.vue b/frontend/src/features/chat/ConversationListPanel.vue
new file mode 100644
index 0000000..b813498
--- /dev/null
+++ b/frontend/src/features/chat/ConversationListPanel.vue
@@ -0,0 +1,28 @@
+<script setup lang="ts">
+import { useChatStore } from '@/stores/chat'
+
+const chatStore = useChatStore()
+</script>
+
+<template>
+  <div class="sidebar-panel">
+    <button class="button-primary new-button" @click="chatStore.createNewConversation">＋ 新对话</button>
+    <div class="sidebar-list conversation-list">
+      <div v-for="conversation in chatStore.sortedConversations" :key="conversation.conversation_id"
+        class="sidebar-list-item conversation" :class="{ active: chatStore.activeConversationId === conversation.conversation_id }"
+        @click="chatStore.setActiveConversation(conversation.conversation_id)">
+        <div><strong>{{ conversation.title }}</strong><p>{{ conversation.message_count }} 条消息</p></div>
+        <button class="delete" title="删除会话" @click.stop="chatStore.deleteConversation(conversation.conversation_id)">×</button>
+      </div>
+    </div>
+  </div>
+</template>
+
+<style scoped>
+.new-button { width: 100%; margin-bottom: var(--space-md); }
+.conversation-list { gap: var(--space-xs); }
+.conversation { display: flex; align-items: center; justify-content: space-between; gap: var(--space-sm); }
+.conversation strong { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: var(--font-size-sm); }
+.conversation p { color: var(--color-text-tertiary); font-size: var(--font-size-xs); }
+.delete { padding: var(--space-xs); color: var(--color-text-tertiary); }
+</style>
diff --git a/frontend/src/features/editor/EditorHeader.vue b/frontend/src/features/editor/EditorHeader.vue
new file mode 100644
index 0000000..82d0497
--- /dev/null
+++ b/frontend/src/features/editor/EditorHeader.vue
@@ -0,0 +1,51 @@
+<script setup lang="ts">
+import { useEditorStore } from '@/stores/editor'
+import { useWorkspaceStore } from '@/stores/workspace'
+
+const editorStore = useEditorStore()
+const workspaceStore = useWorkspaceStore()
+
+const statusText: Record<string, string> = {
+  idle: '空闲', dirty: '未保存', saving: '保存中…', saved: '已保存', save_failed: '保存失败',
+  external_changed: '外部文件已变化', conflict: '存在编辑冲突',
+}
+</script>
+
+<template>
+  <header class="editor-header">
+    <div class="file-identity"><strong>{{ workspaceStore.activeFile?.name ?? '未命名笔记' }}</strong><small>{{ workspaceStore.activeFilePath }}</small></div>
+    <div class="editor-actions">
+      <span class="save-status" :class="editorStore.saveStatus">{{ statusText[editorStore.saveStatus] }}</span>
+      <div class="mode-switch" aria-label="编辑模式">
+        <button type="button" :class="{ active: editorStore.mode === 'wysiwyg' }" @click="editorStore.setMode('wysiwyg')">写作</button>
+        <button type="button" :class="{ active: editorStore.mode === 'source' }" @click="editorStore.setMode('source')">源码</button>
+      </div>
+      <button type="button" class="save-button" :disabled="editorStore.saveStatus === 'saving'" @click="editorStore.save">保存</button>
+    </div>
+  </header>
+</template>
+
+<style scoped>
+.editor-header {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  min-height: 40px;
+  padding: 0 var(--space-lg);
+  border-bottom: 1px solid var(--color-border-subtle);
+  color: var(--color-text-secondary);
+}
+.file-identity { display: grid; min-width: 0; }
+.file-identity strong, .file-identity small { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
+.file-identity small { color: var(--color-text-tertiary); font-size: var(--font-size-xs); }
+.editor-actions, .mode-switch { display: flex; align-items: center; gap: var(--space-sm); }
+.save-status { color: var(--color-text-tertiary); font-size: var(--font-size-xs); }
+.save-status.dirty, .save-status.external_changed { color: var(--color-warning); }
+.save-status.save_failed, .save-status.conflict { color: var(--color-error); }
+.save-status.saved { color: var(--color-success); }
+.mode-switch { gap: 2px; padding: 2px; border-radius: var(--radius-md); background: var(--color-background-secondary); }
+.mode-switch button, .save-button { padding: 5px 9px; border-radius: var(--radius-sm); }
+.mode-switch button.active { background: var(--color-surface-primary); color: var(--color-accent-primary); box-shadow: var(--shadow-sm); }
+.save-button { background: var(--color-accent-primary); color: var(--color-text-inverse); }
+.save-button:disabled { opacity: .55; }
+</style>
diff --git a/frontend/src/features/editor/EditorPane.vue b/frontend/src/features/editor/EditorPane.vue
new file mode 100644
index 0000000..6da29c9
--- /dev/null
+++ b/frontend/src/features/editor/EditorPane.vue
@@ -0,0 +1,59 @@
+<script setup lang="ts">
+import { computed } from 'vue'
+import { useEditorStore } from '@/stores/editor'
+import { useSettingsStore } from '@/stores/settings'
+import { renderMarkdown } from '@/utils/markdown'
+
+const editorStore = useEditorStore()
+const settingsStore = useSettingsStore()
+const renderedContent = computed(() => renderMarkdown(editorStore.content))
+
+function updateContent(event: Event) {
+  editorStore.updateContent((event.target as HTMLTextAreaElement).value)
+  editorStore.scheduleAutoSave(settingsStore.autoSaveInterval)
+}
+</script>
+
+<template>
+  <div v-if="editorStore.mode === 'wysiwyg'" class="writing-layout">
+    <textarea class="editor-pane writing-input" :value="editorStore.content" :spellcheck="settingsStore.spellCheck"
+      aria-label="Markdown 写作编辑器" @input="updateContent" />
+    <article class="markdown-preview" aria-label="Markdown 实时预览" v-html="renderedContent" />
+  </div>
+  <textarea v-else class="editor-pane source" :value="editorStore.content" :spellcheck="false"
+    aria-label="Markdown 源码编辑器" @input="updateContent" />
+</template>
+
+<style scoped>
+.editor-pane {
+  box-sizing: border-box;
+  flex: 1;
+  width: 100%;
+  resize: none;
+  border: 0;
+  outline: 0;
+  padding: var(--space-xl);
+  background: var(--color-background-primary);
+  color: var(--color-text-primary);
+  font: inherit;
+  line-height: 1.7;
+  user-select: text;
+}
+.writing-layout { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); flex: 1; min-height: 0; }
+.writing-input { border-right: 1px solid var(--color-border-default); font-family: var(--font-editor-sans); font-size: var(--font-editor-size); line-height: var(--font-editor-line-height); }
+.markdown-preview { width: min(100%, var(--editor-line-width, 80ch)); overflow: auto; margin: 0 auto; padding: var(--space-3xl) var(--space-xl); font-family: var(--font-editor-sans); font-size: var(--font-editor-size); line-height: var(--font-editor-line-height); user-select: text; }
+.markdown-preview :deep(h1), .markdown-preview :deep(h2), .markdown-preview :deep(h3) { margin: 1.4em 0 .6em; line-height: var(--line-height-tight); color: var(--color-text-primary); }
+.markdown-preview :deep(h1:first-child), .markdown-preview :deep(h2:first-child) { margin-top: 0; }
+.markdown-preview :deep(p), .markdown-preview :deep(ul), .markdown-preview :deep(ol), .markdown-preview :deep(blockquote), .markdown-preview :deep(pre), .markdown-preview :deep(table) { margin: .8em 0; }
+.markdown-preview :deep(ul), .markdown-preview :deep(ol) { padding-left: 1.6em; }
+.markdown-preview :deep(ul) { list-style: disc; }.markdown-preview :deep(ol) { list-style: decimal; }
+.markdown-preview :deep(blockquote) { padding-left: 1em; border-left: 3px solid var(--color-accent-primary); color: var(--color-text-secondary); }
+.markdown-preview :deep(code) { padding: .15em .35em; border-radius: var(--radius-sm); background: var(--color-background-tertiary); font-family: var(--font-editor-mono); }
+.markdown-preview :deep(pre) { overflow: auto; padding: var(--space-lg); border-radius: var(--radius-md); background: var(--color-background-secondary); }
+.markdown-preview :deep(pre code) { padding: 0; background: transparent; }
+.markdown-preview :deep(table) { width: 100%; border-collapse: collapse; }.markdown-preview :deep(th), .markdown-preview :deep(td) { padding: .5em .7em; border: 1px solid var(--color-border-default); text-align: left; }
+.markdown-preview :deep(img) { max-width: 100%; }.markdown-preview :deep(a) { color: var(--color-text-link); }
+.markdown-preview :deep(hr) { margin: 1.5em 0; border: 0; border-top: 1px solid var(--color-border-default); }
+.editor-pane.source { font-family: var(--font-editor-mono); font-size: var(--font-editor-size); line-height: var(--font-editor-line-height); }
+@media (max-width: 900px) { .writing-layout { grid-template-columns: 1fr; grid-template-rows: minmax(220px, 1fr) minmax(220px, 1fr); overflow: auto; }.writing-input { min-height: 220px; border-right: 0; border-bottom: 1px solid var(--color-border-default); }.markdown-preview { min-height: 220px; } }
+</style>
diff --git a/frontend/src/features/plugins/PluginsView.vue b/frontend/src/features/plugins/PluginsView.vue
new file mode 100644
index 0000000..67aee07
--- /dev/null
+++ b/frontend/src/features/plugins/PluginsView.vue
@@ -0,0 +1,45 @@
+<script setup lang="ts">
+import { onMounted, ref } from 'vue'
+import { usePluginStore } from '@/stores/plugin'
+
+const pluginStore = usePluginStore()
+const actionError = ref('')
+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 : '安装失败' } }
+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 : '卸载失败' } }
+</script>
+
+<template>
+  <section class="feature-page">
+    <header class="feature-header"><div><h1>Plugin 管理</h1><p>管理插件生命周期、权限和受控 Contribution。</p></div><button class="button-primary" @click="install">安装 Plugin</button></header>
+    <div v-if="pluginStore.error || actionError" class="error-banner">{{ pluginStore.error || actionError }}</div>
+    <div v-if="pluginStore.selectedPlugin" class="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' }">{{ 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>
+      <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.selectedPlugin.last_error" class="error-banner last-error">{{ pluginStore.selectedPlugin.last_error }}</div>
+      <div v-if="pluginStore.selectedPlugin.dependent_skills?.length" class="notice-banner last-error">依赖此插件的 Skill：{{ pluginStore.selectedPlugin.dependent_skills.join('、') }}</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"><span class="icon">{{ plugin.icon || '🧩' }}</span><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); }
+.detail-head h2 { margin-top: var(--space-sm); }
+.description { margin: var(--space-xl) 0; line-height: var(--line-height-relaxed); }
+.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); }
+.last-error { margin: var(--space-xl) 0 0; }
+.extension-card { cursor: pointer; }
+.extension-card > p { margin-top: var(--space-md); }
+.extension-title { align-items: center; }
+.extension-title .icon { font-size: 28px; }
+.extension-title p { color: var(--color-text-tertiary); font-size: var(--font-size-xs); }
+@media (max-width: 800px) { .detail-grid { grid-template-columns: 1fr; } }
+</style>
diff --git a/frontend/src/features/search/SearchFiltersPanel.vue b/frontend/src/features/search/SearchFiltersPanel.vue
new file mode 100644
index 0000000..e9b6513
--- /dev/null
+++ b/frontend/src/features/search/SearchFiltersPanel.vue
@@ -0,0 +1,34 @@
+<script setup lang="ts">
+import { useSearchStore } from '@/stores/search'
+
+const searchStore = useSearchStore()
+const modes = [
+  { value: 'hybrid', label: '混合检索' },
+  { value: 'fts', label: '全文检索' },
+  { value: 'vector', label: '向量检索' },
+] as const
+</script>
+
+<template>
+  <div class="sidebar-panel">
+    <p class="subtle">检索模式</p>
+    <div class="sidebar-list mode-list">
+      <button v-for="item in modes" :key="item.value" class="sidebar-list-item"
+        :class="{ active: searchStore.mode === item.value }" @click="searchStore.setMode(item.value)">
+        {{ item.label }}
+      </button>
+    </div>
+    <p class="subtle section-title">最近搜索</p>
+    <div class="sidebar-list">
+      <button v-for="query in searchStore.recentQueries" :key="query" class="sidebar-list-item recent"
+        @click="searchStore.doSearch({ query, mode: searchStore.mode })">{{ query }}</button>
+    </div>
+  </div>
+</template>
+
+<style scoped>
+.mode-list { margin-top: var(--space-sm); }
+.section-title { margin-top: var(--space-xl); }
+.sidebar-list-item { width: 100%; text-align: left; }
+.recent { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--color-text-secondary); }
+</style>
diff --git a/frontend/src/features/search/SearchView.vue b/frontend/src/features/search/SearchView.vue
new file mode 100644
index 0000000..d078c0e
--- /dev/null
+++ b/frontend/src/features/search/SearchView.vue
@@ -0,0 +1,79 @@
+<script setup lang="ts">
+import { ref } from 'vue'
+import { useRouter } from 'vue-router'
+import type { SearchResult } from '@/contracts'
+import { useEditorStore } from '@/stores/editor'
+import { useSearchStore } from '@/stores/search'
+import { useWorkspaceStore } from '@/stores/workspace'
+
+const searchStore = useSearchStore()
+const workspaceStore = useWorkspaceStore()
+const editorStore = useEditorStore()
+const router = useRouter()
+const folder = ref('')
+const tag = ref('')
+
+function submitSearch() {
+  void searchStore.doSearch({
+    query: searchStore.query,
+    mode: searchStore.mode,
+    folder: folder.value || undefined,
+    tag: tag.value || undefined,
+  })
+}
+
+async function openResult(result: SearchResult) {
+  await editorStore.loadFile(result.file_path)
+  workspaceStore.openFile(result.file_path)
+  editorStore.highlightBlock(result.block_id)
+  await router.push('/workspace')
+}
+</script>
+
+<template>
+  <section class="feature-page search-page">
+    <header class="feature-header">
+      <div><h1>搜索知识库</h1><p>在当前 Vault 中进行全文、向量或混合检索。</p></div>
+    </header>
+    <form class="search-form panel" @submit.prevent="submitSearch">
+      <input v-model="searchStore.query" class="input search-input" placeholder="搜索笔记内容、标题或标签" autofocus />
+      <button class="button-primary" :disabled="!searchStore.query.trim() || searchStore.isSearching">
+        {{ searchStore.isSearching ? '搜索中…' : '搜索' }}
+      </button>
+      <div class="form-grid advanced">
+        <div class="field"><label>文件夹范围</label><input v-model="folder" class="input" placeholder="例如 /数据结构" /></div>
+        <div class="field"><label>标签</label><input v-model="tag" class="input" placeholder="例如 算法" /></div>
+      </div>
+    </form>
+    <div v-if="searchStore.error" class="error-banner">{{ searchStore.error }}</div>
+    <div v-if="searchStore.vectorUnavailable" class="notice-banner">向量索引不可用，已保留全文检索能力。</div>
+    <div v-if="searchStore.results.length" class="results-header">
+      <span>找到 {{ searchStore.total }} 条结果</span><span class="badge info">{{ searchStore.mode }}</span>
+    </div>
+    <div v-if="searchStore.results.length" class="result-list">
+      <article v-for="result in searchStore.results" :key="`${result.note_id}:${result.block_id}`"
+        class="item-card result-card" @click="openResult(result)">
+        <div class="result-title"><strong>{{ result.note_title }}</strong><span class="badge">{{ result.match_type }}</span></div>
+        <p class="subtle">{{ result.file_path }} · {{ result.heading_path }}</p>
+        <p class="snippet">{{ result.snippet }}</p>
+        <div class="result-meta"><span>相关度 {{ Math.round(result.score * 100) }}%</span><span>点击定位原文 →</span></div>
+      </article>
+    </div>
+    <div v-else-if="!searchStore.isSearching" class="empty-state">
+      <div><strong>{{ searchStore.query ? '没有找到匹配内容' : '从你的知识库开始搜索' }}</strong><p>可切换检索模式或缩小文件夹、标签范围。</p></div>
+    </div>
+  </section>
+</template>
+
+<style scoped>
+.search-form { display: grid; grid-template-columns: 1fr auto; gap: var(--space-md); margin-bottom: var(--space-lg); }
+.search-input { height: 44px; font-size: var(--font-size-lg); }
+.advanced { grid-column: 1 / -1; }
+.results-header, .result-title, .result-meta { display: flex; align-items: center; justify-content: space-between; gap: var(--space-md); }
+.results-header { margin: var(--space-xl) 0 var(--space-md); color: var(--color-text-secondary); }
+.result-list { display: grid; gap: var(--space-md); }
+.result-card { cursor: pointer; }
+.snippet { margin: var(--space-md) 0; line-height: var(--line-height-relaxed); }
+.result-meta { color: var(--color-text-tertiary); font-size: var(--font-size-xs); }
+@media (max-width: 700px) { .search-form { grid-template-columns: 1fr; } .advanced { grid-column: auto; } }
+</style>
diff --git a/frontend/src/features/settings/SettingsView.vue b/frontend/src/features/settings/SettingsView.vue
new file mode 100644
index 0000000..6462c36
--- /dev/null
+++ b/frontend/src/features/settings/SettingsView.vue
@@ -0,0 +1,73 @@
+<script setup lang="ts">
+import { onMounted, reactive, ref } from 'vue'
+import type { ProviderConfig, ProviderType } from '@/contracts'
+import { useProviderStore } from '@/stores/provider'
+import { useSettingsStore } from '@/stores/settings'
+import { useThemeStore } from '@/stores/theme'
+
+type Section = 'general' | 'editor' | 'providers' | 'index' | 'permissions' | 'ai-core'
+const sections: Array<{ id: Section; label: string }> = [
+  { id: 'general', label: '通用' }, { id: 'editor', label: '编辑器' }, { id: 'providers', label: '模型提供商' },
+  { id: 'index', label: '索引与模型' }, { id: 'permissions', label: '权限' }, { id: 'ai-core', label: 'AI Core 诊断' },
+]
+const activeSection = ref<Section>('general')
+const settingsStore = useSettingsStore()
+const providerStore = useProviderStore()
+const themeStore = useThemeStore()
+const showProviderForm = ref(false)
+const editingProviderId = ref<string | null>(null)
+const providerAction = ref('')
+const testResults = ref<Record<string, string>>({})
+const providerForm = reactive({ provider_type: 'openai_compatible' as ProviderType, name: '', base_url: '', default_model: '', credential_id: '', enabled: true })
+
+onMounted(() => { void providerStore.loadProviders(); void settingsStore.loadDiagnostics() })
+
+function openProvider(provider?: ProviderConfig) {
+  editingProviderId.value = provider?.provider_id ?? null
+  Object.assign(providerForm, { provider_type: provider?.provider_type ?? 'openai_compatible', name: provider?.name ?? '', base_url: provider?.base_url ?? '', default_model: provider?.default_model ?? '', credential_id: provider?.credential_id ?? '', enabled: provider?.enabled ?? true })
+  showProviderForm.value = true
+}
+
+async function saveProvider() {
+  providerAction.value = ''
+  const data = { ...providerForm, base_url: providerForm.base_url || undefined, credential_id: providerForm.credential_id || undefined, capabilities: {}, has_credential: Boolean(providerForm.credential_id) }
+  try { if (editingProviderId.value) await providerStore.updateProvider(editingProviderId.value, data); else await providerStore.addProvider(data); showProviderForm.value = false } catch (error) { providerAction.value = error instanceof Error ? error.message : 'Provider 保存失败' }
+}
+
+async function removeProvider(provider: ProviderConfig) { if (!confirm(`确定删除 Provider“${provider.name}”吗？`)) return; try { await providerStore.deleteProvider(provider.provider_id) } catch (error) { providerAction.value = error instanceof Error ? error.message : '删除失败' } }
+async function testProvider(provider: ProviderConfig) { testResults.value[provider.provider_id] = '测试中…'; const result = await providerStore.testProvider(provider.provider_id); testResults.value[provider.provider_id] = result.success ? `连接成功${result.latency_ms ? ` · ${result.latency_ms}ms` : ''}` : `连接失败：${result.error}` }
+</script>
+
+<template>
+  <section class="feature-page settings-page">
+    <header class="feature-header"><div><h1>设置</h1><p>管理应用偏好、模型、索引、权限和本地 AI Core。</p></div></header>
+    <nav class="settings-nav"><button v-for="section in sections" :key="section.id" :class="{ active: activeSection === section.id }" @click="activeSection = section.id">{{ section.label }}</button></nav>
+
+    <div v-if="activeSection === 'general'" class="panel settings-section"><h2>通用</h2><label class="setting-row"><span><strong>恢复上次 Vault</strong><small>启动后自动打开最近使用的知识库</small></span><input v-model="settingsStore.restoreLastVault" type="checkbox" /></label><div class="setting-row"><span><strong>自动保存间隔</strong><small>编辑停止后等待多久写入文件</small></span><select v-model.number="settingsStore.autoSaveInterval" class="select short"><option :value="500">0.5 秒</option><option :value="1500">1.5 秒</option><option :value="3000">3 秒</option></select></div><div class="setting-row"><span><strong>界面语言</strong><small>当前阶段支持中文和英文入口</small></span><select v-model="settingsStore.language" class="select short"><option value="zh-CN">简体中文</option><option value="en">English</option></select></div><div class="setting-row"><span><strong>版本</strong><small>Desktop / AI Core</small></span><span>{{ settingsStore.appVersion }} / {{ settingsStore.aiCoreVersion }}</span></div></div>
+
+    <div v-else-if="activeSection === 'editor'" class="panel settings-section"><h2>编辑器</h2><div class="setting-row"><span><strong>默认模式</strong><small>新打开文件使用的编辑器模式</small></span><select v-model="settingsStore.defaultEditorMode" class="select short"><option value="wysiwyg">写作与预览</option><option value="source">Markdown 源码</option></select></div><div class="setting-row"><span><strong>字号</strong></span><input v-model.number="themeStore.fontEditorSize" class="input short" type="number" min="12" max="32" /></div><div class="setting-row"><span><strong>行高</strong></span><input v-model.number="themeStore.lineHeight" class="input short" type="number" min="1.2" max="2.4" step="0.1" /></div><div class="setting-row"><span><strong>行宽</strong><small>Markdown 预览最大字符宽度</small></span><input v-model.number="settingsStore.editorLineWidth" class="input short" type="number" min="40" max="140" /></div><label class="setting-row"><span><strong>拼写检查</strong></span><input v-model="settingsStore.spellCheck" type="checkbox" /></label></div>
+
+    <div v-else-if="activeSection === 'providers'" class="settings-section"><div class="section-head"><h2>模型提供商</h2><button class="button-primary" @click="openProvider()">新增 Provider</button></div><div v-if="providerStore.error || providerAction" class="error-banner">{{ providerStore.error || providerAction }}</div><div class="provider-list"><article v-for="provider in providerStore.providers" :key="provider.provider_id" class="item-card provider-card"><div><div class="inline-actions"><strong>{{ provider.name }}</strong><span class="badge" :class="{ success: provider.enabled }">{{ provider.provider_type }}</span></div><p class="subtle">{{ provider.base_url || '本地内置' }} · 默认模型 {{ provider.default_model || '未设置' }}</p><div class="tag-list"><span v-for="(_, capability) in provider.capabilities" :key="capability" class="badge">{{ capability }}</span></div><p v-if="testResults[provider.provider_id]" class="test-result">{{ testResults[provider.provider_id] }}</p></div><div class="inline-actions"><button class="button-secondary" @click="testProvider(provider)">测试</button><button class="button-secondary" @click="openProvider(provider)">编辑</button><button class="button-danger" :disabled="provider.provider_id === 'mock'" @click="removeProvider(provider)">删除</button></div></article></div></div>
+
+    <div v-else-if="activeSection === 'index'" class="panel settings-section"><h2>索引与模型</h2><div class="index-summary"><div><span class="badge" :class="{ success: settingsStore.indexStatus.status === 'idle', error: settingsStore.indexStatus.status === 'error' }">{{ settingsStore.indexStatus.status }}</span><p>待处理任务 {{ settingsStore.indexStatus.pending_jobs }}</p></div><div><strong>{{ settingsStore.indexStatus.total_notes }}</strong><small>笔记</small></div><div><strong>{{ settingsStore.indexStatus.total_blocks }}</strong><small>Block</small></div></div><div v-if="settingsStore.indexStatus.error" class="error-banner">{{ settingsStore.indexStatus.error }}</div><div class="inline-actions"><button class="button-primary" @click="settingsStore.rebuildIndex('full')">重建全部</button><button class="button-secondary" @click="settingsStore.rebuildIndex('fts')">重建文本索引</button><button class="button-secondary" @click="settingsStore.rebuildIndex('vector')">重建向量索引</button></div></div>
+
+    <div v-else-if="activeSection === 'permissions'" class="panel settings-section"><h2>权限策略</h2><p class="muted section-description">高影响能力默认需要确认。未知权限由后端拒绝。</p><div class="permission-list"><div v-for="(policy, permission) in settingsStore.permissionPolicy" :key="permission" class="setting-row"><span><strong>{{ permission }}</strong></span><select :value="policy" class="select short" @change="settingsStore.setPermission(String(permission), ($event.target as HTMLSelectElement).value as 'allow' | 'confirm' | 'deny')"><option value="allow">允许</option><option value="confirm">每次确认</option><option value="deny">拒绝</option></select></div></div></div>
+
+    <div v-else class="panel settings-section"><h2>AI Core 诊断</h2><div v-if="settingsStore.diagnosticsError" class="error-banner">{{ settingsStore.diagnosticsError }}</div><div class="diagnostic-grid"><div class="item-card"><span class="badge" :class="{ success: settingsStore.aiCoreStatus === 'running', error: settingsStore.aiCoreStatus === 'error' }">{{ settingsStore.aiCoreStatus }}</span><h3>Sidecar 状态</h3><p class="subtle">AI Core 不可用时，Markdown 编辑仍可继续使用。</p></div><div class="item-card"><strong>{{ settingsStore.aiCoreAddress }}</strong><h3>开发 API 地址</h3><p class="subtle">正式桌面环境由 Sidecar Manager 动态提供。</p></div></div><div class="inline-actions diagnostic-actions"><button class="button-primary" @click="settingsStore.loadDiagnostics">重新检测</button><button class="button-secondary" @click="settingsStore.restartAiCore">重启 AI Core</button></div></div>
+
+    <div v-if="showProviderForm" class="modal-backdrop" @click.self="showProviderForm = false"><div class="modal"><h2>{{ editingProviderId ? '编辑 Provider' : '新增 Provider' }}</h2><form @submit.prevent="saveProvider"><div class="field"><label>类型</label><select v-model="providerForm.provider_type" class="select"><option value="openai_compatible">OpenAI Compatible</option><option value="openai_chat">OpenAI Chat</option><option value="openai_responses">OpenAI Responses</option><option value="anthropic_messages">Anthropic Messages</option><option value="ollama">Ollama</option></select></div><div class="field"><label>名称</label><input v-model="providerForm.name" class="input" required /></div><div class="field"><label>Base URL</label><input v-model="providerForm.base_url" class="input" placeholder="https://api.example.com/v1" /></div><div class="field"><label>默认模型</label><input v-model="providerForm.default_model" class="input" /></div><div class="field"><label>Credential ID</label><input v-model="providerForm.credential_id" class="input" placeholder="密钥明文由 Stronghold 保存" /><small class="subtle">此处不输入或回显 API Key。</small></div><label class="inline-actions"><input v-model="providerForm.enabled" type="checkbox" /> 启用</label><div class="inline-actions"><button class="button-primary">保存</button><button type="button" class="button-secondary" @click="showProviderForm = false">取消</button></div></form></div></div>
+  </section>
+</template>
+
+<style scoped>
+.settings-page { max-width: 1120px; margin: 0 auto; }
+.settings-section { display: grid; gap: var(--space-md); }
+.settings-section h2 { margin-bottom: var(--space-sm); }
+.setting-row { display: flex; align-items: center; justify-content: space-between; gap: var(--space-xl); min-height: 54px; padding: var(--space-sm) 0; border-bottom: 1px solid var(--color-border-subtle); }
+.setting-row small { display: block; color: var(--color-text-tertiary); }.short { width: min(220px, 45%); }
+.section-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: var(--space-lg); }
+.provider-list { display: grid; gap: var(--space-md); }.provider-card { display: flex; align-items: center; justify-content: space-between; gap: var(--space-xl); }.provider-card p, .provider-card .tag-list { margin-top: var(--space-sm); }
+.test-result { color: var(--color-info); }.index-summary, .diagnostic-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-md); }.index-summary > div { padding: var(--space-lg); border-radius: var(--radius-md); background: var(--color-background-secondary); }.index-summary strong, .index-summary small { display: block; }.index-summary strong { font-size: var(--font-size-3xl); }
+.section-description { margin-top: calc(-1 * var(--space-md)); }.diagnostic-grid { grid-template-columns: repeat(2, 1fr); }.diagnostic-grid h3 { margin: var(--space-md) 0 var(--space-xs); }.diagnostic-actions { margin-top: var(--space-md); }
+@media (max-width: 700px) { .provider-card, .setting-row { align-items: flex-start; flex-direction: column; }.short { width: 100%; }.index-summary, .diagnostic-grid { grid-template-columns: 1fr; } }
+</style>
diff --git a/frontend/src/features/skills/SkillsView.vue b/frontend/src/features/skills/SkillsView.vue
new file mode 100644
index 0000000..7ae8643
--- /dev/null
+++ b/frontend/src/features/skills/SkillsView.vue
@@ -0,0 +1,50 @@
+<script setup lang="ts">
+import { onMounted, ref } from 'vue'
+import { useSkillStore } from '@/stores/skill'
+
+const skillStore = useSkillStore()
+const actionError = ref('')
+onMounted(() => { void skillStore.loadSkills() })
+
+async function install() {
+  const path = prompt('请输入 Skill Package 路径')?.trim()
+  if (!path) return
+  try { await skillStore.installSkill(path) } catch (error) { actionError.value = error instanceof Error ? error.message : '安装失败' }
+}
+async function toggle(skillId: string, enabled: boolean) {
+  try { enabled ? await skillStore.disableSkill(skillId) : await skillStore.enableSkill(skillId) } catch (error) { actionError.value = error instanceof Error ? error.message : '状态更新失败' }
+}
+async function uninstall(skillId: string, name: string) {
+  if (!confirm(`确定卸载 Skill“${name}”吗？`)) return
+  try { await skillStore.uninstallSkill(skillId) } catch (error) { actionError.value = error instanceof Error ? error.message : '卸载失败' }
+}
+</script>
+
+<template>
+  <section class="feature-page">
+    <header class="feature-header"><div><h1>Skill 管理</h1><p>查看工作流使用的 Tool、权限、检索配置和模型要求。</p></div><button class="button-primary" @click="install">安装 Skill</button></header>
+    <div v-if="skillStore.error || actionError" class="error-banner">{{ skillStore.error || actionError }}</div>
+    <div v-if="skillStore.selectedSkill" class="panel detail-panel">
+      <div class="detail-head"><div><span class="badge" :class="{ success: skillStore.selectedSkill.status === 'ready', error: skillStore.selectedSkill.status === 'error', warning: skillStore.selectedSkill.status.includes('missing') }">{{ skillStore.selectedSkill.status }}</span><h2>{{ skillStore.selectedSkill.icon }} {{ skillStore.selectedSkill.name }}</h2><p class="muted">v{{ skillStore.selectedSkill.version }} · {{ skillStore.selectedSkill.author || '未知作者' }}</p></div><div class="inline-actions"><button class="button-secondary" @click="toggle(skillStore.selectedSkill.skill_id, skillStore.selectedSkill.enabled)">{{ skillStore.selectedSkill.enabled ? '停用' : '启用' }}</button><button class="button-danger" @click="uninstall(skillStore.selectedSkill.skill_id, skillStore.selectedSkill.name)">卸载</button></div></div>
+      <p class="description">{{ skillStore.selectedSkill.description }}</p>
+      <div class="detail-grid"><div><h3>工具</h3><div class="tag-list"><span v-for="tool in skillStore.selectedSkill.tools" :key="tool" class="badge info">{{ tool }}</span></div></div><div><h3>权限</h3><div class="tag-list"><span v-for="permission in skillStore.selectedSkill.permissions" :key="permission" class="badge warning">{{ permission }}</span></div></div><div><h3>检索配置</h3><pre>{{ JSON.stringify(skillStore.selectedSkill.retrieval_config, null, 2) }}</pre></div><div><h3>模型能力</h3><div class="tag-list"><span v-for="cap in skillStore.selectedSkill.model_requirements?.capabilities" :key="cap" class="badge">{{ cap }}</span></div></div></div>
+      <div v-if="skillStore.selectedSkill.missing_dependencies?.length" class="error-banner dependencies">缺失依赖：{{ skillStore.selectedSkill.missing_dependencies.join('、') }}</div>
+    </div>
+    <div v-else class="feature-grid"><article v-for="skill in skillStore.skills" :key="skill.skill_id" class="item-card extension-card" @click="skillStore.selectSkill(skill.skill_id)"><div class="extension-title"><span class="icon">{{ skill.icon || '⚡' }}</span><div><strong>{{ skill.name }}</strong><p>v{{ skill.version }}</p></div><span class="badge" :class="{ success: skill.status === 'ready', warning: skill.status === 'dependency_missing' }">{{ skill.status }}</span></div><p class="muted">{{ skill.description }}</p><div class="tag-list"><span v-for="permission in skill.permissions.slice(0, 3)" :key="permission" class="badge">{{ permission }}</span></div></article></div>
+  </section>
+</template>
+
+<style scoped>
+.detail-head, .extension-title { 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-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: var(--space-xl); }
+.detail-grid h3 { margin-bottom: var(--space-sm); }
+pre { padding: var(--space-md); border-radius: var(--radius-md); background: var(--color-background-secondary); }
+.dependencies { margin: var(--space-xl) 0 0; }
+.extension-card { cursor: pointer; }
+.extension-card > p { margin: var(--space-md) 0; }
+.extension-title { align-items: center; }
+.extension-title .icon { font-size: 28px; }
+.extension-title p { color: var(--color-text-tertiary); font-size: var(--font-size-xs); }
+</style>
diff --git a/frontend/src/features/tasks/TaskFiltersPanel.vue b/frontend/src/features/tasks/TaskFiltersPanel.vue
new file mode 100644
index 0000000..ebe924f
--- /dev/null
+++ b/frontend/src/features/tasks/TaskFiltersPanel.vue
@@ -0,0 +1,17 @@
+<script setup lang="ts">
+import { useTaskStore } from '@/stores/task'
+const taskStore = useTaskStore()
+</script>
+
+<template>
+  <div class="sidebar-panel filters">
+    <div class="field"><label>状态</label><select v-model="taskStore.filterStatus" class="select"><option value="all">全部</option><option value="todo">待办</option><option value="in_progress">进行中</option><option value="done">已完成</option><option value="cancelled">已取消</option></select></div>
+    <div class="task-counts"><p><span>待办</span><strong>{{ taskStore.todoTasks.length }}</strong></p><p><span>进行中</span><strong>{{ taskStore.inProgressTasks.length }}</strong></p><p><span>已完成</span><strong>{{ taskStore.doneTasks.length }}</strong></p></div>
+  </div>
+</template>
+
+<style scoped>
+.filters { display: grid; gap: var(--space-md); }
+.task-counts { display: grid; gap: var(--space-xs); padding-top: var(--space-md); border-top: 1px solid var(--color-border-subtle); }
+.task-counts p { display: flex; justify-content: space-between; color: var(--color-text-secondary); }
+</style>
diff --git a/frontend/src/features/tasks/TasksView.vue b/frontend/src/features/tasks/TasksView.vue
new file mode 100644
index 0000000..bbbf41b
--- /dev/null
+++ b/frontend/src/features/tasks/TasksView.vue
@@ -0,0 +1,62 @@
+<script setup lang="ts">
+import { onMounted, reactive, ref } from 'vue'
+import type { TaskItem, TaskStatus } from '@/contracts'
+import { useTaskStore } from '@/stores/task'
+
+const taskStore = useTaskStore()
+const showForm = ref(false)
+const editingId = ref<string | null>(null)
+const actionError = ref('')
+const form = reactive({ title: '', description: '', due_date: '', note_id: '' })
+
+onMounted(() => { void taskStore.loadTasks() })
+
+function resetForm() { editingId.value = null; form.title = ''; form.description = ''; form.due_date = ''; form.note_id = '' }
+function editTask(task: TaskItem) { editingId.value = task.task_id; Object.assign(form, { title: task.title, description: task.description ?? '', due_date: task.due_date?.slice(0, 16) ?? '', note_id: task.note_id ?? '' }); showForm.value = true }
+
+async function saveTask() {
+  actionError.value = ''
+  try {
+    if (editingId.value) await taskStore.updateTask(editingId.value, { ...form, due_date: form.due_date || undefined, note_id: form.note_id || null })
+    else await taskStore.createTask({ ...form, due_date: form.due_date || undefined, note_id: form.note_id || undefined })
+    showForm.value = false; resetForm()
+  } catch (error) { actionError.value = error instanceof Error ? error.message : '任务保存失败' }
+}
+
+async function setStatus(task: TaskItem, status: TaskStatus) {
+  try { await taskStore.updateTask(task.task_id, { status }) } catch (error) { actionError.value = error instanceof Error ? error.message : '状态更新失败' }
+}
+
+async function remove(task: TaskItem) {
+  if (!confirm(`确定删除任务“${task.title}”吗？`)) return
+  try { await taskStore.deleteTask(task.task_id) } catch (error) { actionError.value = error instanceof Error ? error.message : '任务删除失败' }
+}
+</script>
+
+<template>
+  <section class="feature-page">
+    <header class="feature-header"><div><h1>任务</h1><p>管理用户、笔记和 Agent 产生的行动项。</p></div><button class="button-primary" @click="resetForm(); showForm = true">＋ 新建任务</button></header>
+    <div v-if="taskStore.error || actionError" class="error-banner">{{ taskStore.error || actionError }}</div>
+    <div v-if="taskStore.filteredTasks.length" class="task-list">
+      <article v-for="task in taskStore.filteredTasks" :key="task.task_id" class="item-card task-card">
+        <button class="status-check" :class="{ done: task.status === 'done' }" title="切换完成状态" @click="setStatus(task, task.status === 'done' ? 'todo' : 'done')">{{ task.status === 'done' ? '✓' : '' }}</button>
+        <div class="task-content"><div class="task-title"><strong :class="{ completed: task.status === 'done' }">{{ task.title }}</strong></div><p v-if="task.description" class="muted">{{ task.description }}</p><div class="subtle"><span>{{ task.status }}</span><span v-if="task.due_date">截止 {{ new Date(task.due_date).toLocaleString() }}</span><span v-if="task.note_id">关联 Note：{{ task.note_id }}</span></div></div>
+        <div class="inline-actions"><button class="icon-button" @click="editTask(task)">编辑</button><button class="button-danger" @click="remove(task)">删除</button></div>
+      </article>
+    </div>
+    <div v-else class="empty-state"><div><strong>{{ taskStore.isLoading ? '正在加载任务…' : '没有符合条件的任务' }}</strong><p>创建一项任务，或调整左侧筛选条件。</p></div></div>
+    <div v-if="showForm" class="modal-backdrop" @click.self="showForm = false"><div class="modal"><h2>{{ editingId ? '编辑任务' : '新建任务' }}</h2><form @submit.prevent="saveTask"><div class="field"><label>标题</label><input v-model="form.title" class="input" required /></div><div class="field"><label>描述</label><textarea v-model="form.description" class="textarea" /></div><div class="field"><label>截止时间</label><input v-model="form.due_date" class="input" type="datetime-local" /></div><div class="field"><label>关联 Note ID</label><input v-model="form.note_id" class="input" /></div><div class="inline-actions"><button class="button-primary">保存</button><button type="button" class="button-secondary" @click="showForm = false">取消</button></div></form></div></div>
+  </section>
+</template>
+
+<style scoped>
+.task-list { display: grid; gap: var(--space-md); }
+.task-card { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: var(--space-md); }
+.status-check { width: 26px; height: 26px; border: 2px solid var(--color-border-default); border-radius: var(--radius-full); }
+.status-check.done { border-color: var(--color-success); background: var(--color-success); color: white; }
+.task-title { display: flex; align-items: center; flex-wrap: wrap; gap: var(--space-sm); }
+.task-content p { margin: var(--space-xs) 0; }
+.task-content .subtle { display: flex; flex-wrap: wrap; gap: var(--space-md); }
+.completed { text-decoration: line-through; color: var(--color-text-tertiary); }
+@media (max-width: 700px) { .task-card { grid-template-columns: auto 1fr; } .task-card > .inline-actions { grid-column: 2; } }
+</style>
diff --git a/frontend/src/features/themes/ThemesView.vue b/frontend/src/features/themes/ThemesView.vue
new file mode 100644
index 0000000..35ec448
--- /dev/null
+++ b/frontend/src/features/themes/ThemesView.vue
@@ -0,0 +1,32 @@
+<script setup lang="ts">
+import { useThemeStore } from '@/stores/theme'
+const themeStore = useThemeStore()
+</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>
+    <div class="feature-grid themes">
+      <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)">
+        <div class="theme-preview" :class="`preview-${theme.theme_id}`"><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 }}</p>
+      </button>
+    </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"><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><div class="editor-preview" :style="{ fontSize: `${themeStore.fontEditorSize}px`, lineHeight: themeStore.lineHeight, fontFamily: themeStore.fontEditorFamily }"><h3>主题预览</h3><p>知识的价值不只在于保存，更在于被重新发现和使用。</p><code>const notes = await search('本地优先')</code></div></div>
+  </section>
+</template>
+
+<style scoped>
+.themes { margin-bottom: var(--space-xl); }
+.theme-card { display: grid; gap: var(--space-md); text-align: left; }
+.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-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); }
+.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 p { margin: var(--space-sm) 0; }.editor-preview code { color: var(--color-accent-primary); }
+</style>
diff --git a/frontend/src/features/vault/VaultEntry.vue b/frontend/src/features/vault/VaultEntry.vue
index 0e908dc..8f5995b 100644
--- a/frontend/src/features/vault/VaultEntry.vue
+++ b/frontend/src/features/vault/VaultEntry.vue
@@ -17,7 +17,12 @@ const newVaultPath = ref('')
 const aiCoreStatus = ref<'checking' | 'running' | 'stopped'>('checking')
 
 onMounted(async () => {
-  await workspaceStore.loadRecentVaults()
+  await Promise.all([workspaceStore.loadRecentVaults(), settingsStore.loadDiagnostics()])
+  const lastVaultPath = localStorage.getItem('last-vault-path')
+  if (settingsStore.restoreLastVault && lastVaultPath) {
+    await openVault(lastVaultPath)
+    return
+  }
   setTimeout(() => {
     aiCoreStatus.value = settingsStore.aiCoreStatus === 'running' ? 'running' : 'stopped'
   }, 800)
diff --git a/frontend/src/features/workspace/FileTreeNode.vue b/frontend/src/features/workspace/FileTreeNode.vue
new file mode 100644
index 0000000..4d5c2b9
--- /dev/null
+++ b/frontend/src/features/workspace/FileTreeNode.vue
@@ -0,0 +1,31 @@
+<script setup lang="ts">
+import type { FileNode } from '@/contracts'
+
+defineProps<{ node: FileNode; activePath: string | null }>()
+const emit = defineEmits<{
+  open: [node: FileNode]
+  contextMenu: [event: MouseEvent, node: FileNode]
+}>()
+</script>
+
+<template>
+  <div>
+    <div class="tree-node" :class="{ active: node.path === activePath }"
+      @click="emit('open', node)" @contextmenu="emit('contextMenu', $event, node)">
+      <span>{{ node.type === 'folder' ? (node.is_open ? '📂' : '📁') : '📄' }}</span>
+      <span class="name">{{ node.name }}</span>
+      <span v-if="node.is_dirty">●</span>
+    </div>
+    <div v-if="node.type === 'folder' && node.is_open" class="children">
+      <FileTreeNode v-for="child in node.children ?? []" :key="child.id" :node="child" :active-path="activePath"
+        @open="emit('open', $event)" @context-menu="(event, target) => emit('contextMenu', event, target)" />
+    </div>
+  </div>
+</template>
+
+<style scoped>
+.tree-node { display: flex; align-items: center; gap: var(--space-xs); min-height: 28px; padding: 0 var(--space-sm); border-radius: var(--radius-sm); cursor: pointer; }
+.tree-node:hover, .tree-node.active { background: var(--color-background-secondary); }
+.name { min-width: 0; flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
+.children { padding-left: var(--space-md); }
+</style>
diff --git a/frontend/src/features/workspace/FileTreePanel.vue b/frontend/src/features/workspace/FileTreePanel.vue
index cbe342b..d59804b 100644
--- a/frontend/src/features/workspace/FileTreePanel.vue
+++ b/frontend/src/features/workspace/FileTreePanel.vue
@@ -1,406 +1,126 @@
 <script setup lang="ts">
 import { ref } from 'vue'
-import { useWorkspaceStore } from '@/stores/workspace'
-import { useEditorStore } from '@/stores/editor'
 import { useRouter } from 'vue-router'
 import type { FileNode } from '@/contracts'
 import * as workspaceService from '@/services/workspaceService'
+import { useEditorStore } from '@/stores/editor'
+import { useWorkspaceStore } from '@/stores/workspace'
+import FileTreeNode from './FileTreeNode.vue'
 
 const workspaceStore = useWorkspaceStore()
 const editorStore = useEditorStore()
 const router = useRouter()
+const newItemType = ref<'file' | 'folder' | null>(null)
+const newItemName = ref('')
+const parentPath = ref('/')
+const contextTarget = ref<FileNode | null>(null)
+const contextMenuPosition = ref({ x: 0, y: 0 })
 
-const showNewMenu = ref(false)
-const newFileName = ref('')
-const newFolderName = ref('')
-const newFileParentPath = ref('')
-const showNewFileInput = ref(false)
-const showNewFolderInput = ref(false)
-const contextMenuPath = ref<string | null>(null)
-const showContextMenu = ref(false)
-const contextMenuPos = ref({ x: 0, y: 0 })
-const renamingPath = ref<string | null>(null)
-const renameValue = ref('')
-
-function toggleFolder(node: FileNode) {
-  workspaceStore.toggleFolder(node.path)
+function beginCreate(type: 'file' | 'folder', parent = '/') {
+  newItemType.value = type
+  newItemName.value = ''
+  parentPath.value = parent
 }
 
-async function openFile(node: FileNode) {
-  if (node.type === 'folder') {
-    toggleFolder(node)
-    return
+async function createItem() {
+  const rawName = newItemName.value.trim()
+  if (!rawName || !newItemType.value) return
+  if (newItemType.value === 'file') {
+    const name = rawName.endsWith('.md') ? rawName : `${rawName}.md`
+    const file = await workspaceService.createFile(parentPath.value, name, `# ${rawName}\n\n`)
+    workspaceStore.addFileToTree(parentPath.value, file)
+    await editorStore.loadFile(file.path)
+    workspaceStore.openFile(file.path)
+    await router.push('/workspace')
+  } else {
+    const folder = await workspaceService.createFolder(parentPath.value, rawName)
+    workspaceStore.addFileToTree(parentPath.value, folder)
   }
-  workspaceStore.openFile(node.path)
+  newItemType.value = null
+  newItemName.value = ''
+}
+
+async function openNode(node: FileNode) {
+  if (node.type === 'folder') return workspaceStore.toggleFolder(node.path)
   await editorStore.loadFile(node.path)
-  router.push('/workspace')
+  workspaceStore.openFile(node.path)
+  await router.push('/workspace')
 }
 
-function startNewFile(parentPath = '') {
-  newFileParentPath.value = parentPath
-  showNewFileInput.value = true
-  showNewMenu.value = false
-  newFileName.value = ''
+function openContextMenu(event: MouseEvent, node: FileNode) {
+  event.preventDefault()
+  event.stopPropagation()
+  contextTarget.value = node
+  contextMenuPosition.value = { x: event.clientX, y: event.clientY }
 }
 
-function startNewFolder(parentPath = '') {
-  newFileParentPath.value = parentPath
-  showNewFolderInput.value = true
-  showNewMenu.value = false
-  newFolderName.value = ''
-}
+function closeContextMenu() { contextTarget.value = null }
 
-async function createFile() {
-  if (!newFileName.value.trim()) return
-  const name = newFileName.value.endsWith('.md') ? newFileName.value : `${newFileName.value}.md`
-  const file = await workspaceService.createFile(newFileParentPath.value || '/', name, '# ' + newFileName.value + '\n\n')
-  workspaceStore.addFileToTree(newFileParentPath.value || '/', file)
-  workspaceStore.openFile(file.path)
-  await editorStore.loadFile(file.path)
-  showNewFileInput.value = false
-  newFileName.value = ''
-}
-
-async function createFolder() {
-  if (!newFolderName.value.trim()) return
-  const folder = await workspaceService.createFolder(newFileParentPath.value || '/', newFolderName.value)
-  workspaceStore.addFileToTree(newFileParentPath.value || '/', folder)
-  showNewFolderInput.value = false
-  newFolderName.value = ''
-}
-
-function onContextMenu(e: MouseEvent, node: FileNode) {
-  e.preventDefault()
-  contextMenuPath.value = node.path
-  contextMenuPos.value = { x: e.clientX, y: e.clientY }
-  showContextMenu.value = true
-}
-
-function closeContextMenu() {
-  showContextMenu.value = false
-  contextMenuPath.value = null
-}
-
-function startRename(node: FileNode) {
-  renamingPath.value = node.path
-  renameValue.value = node.name
-  showContextMenu.value = false
-}
-
-async function finishRename(node: FileNode) {
-  if (renameValue.value && renameValue.value !== node.name) {
-    await workspaceService.renameFile(node.path, renameValue.value)
-    node.name = renameValue.value
+async function renameTarget() {
+  const node = contextTarget.value
+  if (!node) return
+  const newName = window.prompt('新名称', node.name)?.trim()
+  if (newName && newName !== node.name) {
+    const normalizedName = node.type === 'file' && !newName.toLowerCase().endsWith('.md') ? `${newName}.md` : newName
+    const oldPath = node.path
+    const separator = oldPath.lastIndexOf('/')
+    const newPath = `${oldPath.slice(0, separator + 1)}${normalizedName}`
+    await workspaceService.renameFile(oldPath, normalizedName)
+    workspaceStore.renamePath(oldPath, newPath, normalizedName)
+    editorStore.renameFilePath(oldPath, newPath)
   }
-  renamingPath.value = null
+  closeContextMenu()
 }
 
-async function deleteNode(node: FileNode) {
-  const confirmMsg = node.type === 'folder' ? `确定要删除文件夹 "${node.name}" 吗？` : `确定要删除笔记 "${node.name}" 吗？`
-  if (confirm(confirmMsg)) {
-    await workspaceService.deleteFile(node.path)
-    workspaceStore.removeFromTree(node.path)
-    if (node.type === 'file') {
-      workspaceStore.closeFile(node.path)
-    }
+async function deleteTarget() {
+  const node = contextTarget.value
+  if (!node) return
+  if (!window.confirm(`确定要删除“${node.name}”吗？`)) return closeContextMenu()
+  await workspaceService.deleteFile(node.path)
+  const activeWasRemoved = workspaceStore.closePath(node.path)
+  workspaceStore.removeFromTree(node.path)
+  if (activeWasRemoved) {
+    editorStore.closeFile()
+    if (workspaceStore.activeFilePath) await editorStore.loadFile(workspaceStore.activeFilePath)
   }
-  showContextMenu.value = false
-}
-
-function getFileIcon(name: string) {
-  if (name.endsWith('.md')) return '📄'
-  return '📄'
+  closeContextMenu()
 }
 </script>
 
 <template>
-  <div class="file-tree-panel" @click="closeContextMenu">
-    <div class="panel-toolbar">
-      <div class="toolbar-left">
-        <button class="tool-btn" @click="startNewFile" title="新建笔记">
-          <span>➕</span>
-        </button>
-        <button class="tool-btn" @click="startNewFolder" title="新建文件夹">
-          <span>📁</span>
-        </button>
-      </div>
-      <button class="tool-btn" title="刷新">
-        <span>🔄</span>
-      </button>
+  <section class="file-tree-panel" @click="closeContextMenu">
+    <div class="toolbar">
+      <button type="button" title="新建笔记" @click.stop="beginCreate('file')">＋📄</button>
+      <button type="button" title="新建文件夹" @click.stop="beginCreate('folder')">＋📁</button>
     </div>
-
-    <div class="new-input" v-if="showNewFileInput">
-      <input
-        v-model="newFileName"
-        type="text"
-        placeholder="笔记名称"
-        @keyup.enter="createFile"
-        @keyup.esc="showNewFileInput = false"
-        autofocus
-      />
+    <form v-if="newItemType" class="new-item" @submit.prevent="createItem">
+      <input v-model="newItemName" :placeholder="newItemType === 'file' ? '笔记名称' : '文件夹名称'" autofocus />
+      <button type="submit">创建</button>
+      <button type="button" @click="newItemType = null">取消</button>
+    </form>
+    <div class="tree">
+      <FileTreeNode v-for="node in workspaceStore.fileTree" :key="node.id" :node="node"
+        :active-path="workspaceStore.activeFilePath" @open="openNode" @context-menu="openContextMenu" />
     </div>
-    <div class="new-input" v-if="showNewFolderInput">
-      <input
-        v-model="newFolderName"
-        type="text"
-        placeholder="文件夹名称"
-        @keyup.enter="createFolder"
-        @keyup.esc="showNewFolderInput = false"
-        autofocus
-      />
-    </div>
-
-    <div class="tree-container">
-      <template v-for="node in workspaceStore.fileTree" :key="node.id">
-        <div class="tree-node-wrapper">
-          <TreeNode :node="node" :depth="0" @open="openFile" @toggle="toggleFolder" @context-menu="onContextMenu"
-            :renaming-path="renamingPath" :rename-value="renameValue"
-            @rename-start="startRename" @rename-finish="finishRename"
-            @delete-node="deleteNode"
-            @new-file="startNewFile" @new-folder="startNewFolder" />
-        </div>
-      </template>
-    </div>
-
     <Teleport to="body">
-      <div v-if="showContextMenu" class="context-menu"
-        :style="{ left: contextMenuPos.x + 'px', top: contextMenuPos.y + 'px' }"
-        @click.stop>
-        <button @click="() => { const n = workspaceStore.activeFile; if (n) startRename(n) }">✏️ 重命名</button>
-        <button @click="() => { const n = workspaceStore.activeFile; if (n) deleteNode(n) }" class="danger">🗑️ 删除</button>
+      <div v-if="contextTarget" class="context-menu"
+        :style="{ left: `${contextMenuPosition.x}px`, top: `${contextMenuPosition.y}px` }" @click.stop>
+        <button @click="renameTarget">重命名</button>
+        <button class="danger" @click="deleteTarget">删除</button>
       </div>
     </Teleport>
-  </div>
+  </section>
 </template>
 
-<script lang="ts">
-import { defineComponent, h } from 'vue'
-import type { FileNode } from '@/contracts'
-
-const TreeNode = defineComponent({
-  name: 'TreeNode',
-  props: {
-    node: { type: Object as () => FileNode, required: true },
-    depth: { type: Number, default: 0 },
-    renamingPath: { type: String, default: null },
-    renameValue: { type: String, default: '' },
-  },
-  emits: ['open', 'toggle', 'context-menu', 'rename-start', 'rename-finish', 'delete-node', 'new-file', 'new-folder'],
-  setup(props, { emit }) {
-    const isActive = (path: string) => {
-      const { useWorkspaceStore } = require('@/stores/workspace')
-      return useWorkspaceStore().activeFilePath === path
-    }
-
-    const handleClick = () => {
-      emit('open', props.node)
-    }
-
-    const handleContextMenu = (e: MouseEvent) => {
-      emit('context-menu', e, props.node)
-    }
-
-    const finishRename = () => {
-      emit('rename-finish', props.node)
-    }
-
-    return () => {
-      const isFolder = props.node.type === 'folder'
-      const isOpen = props.node.is_open
-      const isRenaming = props.renamingPath === props.node.path
-      const active = isActive(props.node.path)
-
-      return h('div', { class: 'tree-node' }, [
-        h('div', {
-          class: ['node-row', { active, folder: isFolder, open: isOpen }],
-          style: { paddingLeft: `${props.depth * 16 + 8}px` },
-          onClick: handleClick,
-          onContextmenu: handleContextMenu,
-        }, [
-          h('span', { class: 'chevron' }, isFolder ? (isOpen ? '▼' : '▶') : ''),
-          h('span', { class: 'node-icon' }, isFolder ? (isOpen ? '📂' : '📁') : '📄'),
-          isRenaming
-            ? h('input', {
-                class: 'rename-input',
-                value: props.renameValue,
-                autofocus: true,
-                onBlur: finishRename,
-                onKeyup: (e: KeyboardEvent) => {
-                  if (e.key === 'Enter') finishRename()
-                  if (e.key === 'Escape') emit('rename-finish', props.node)
-                },
-              })
-            : h('span', { class: 'node-name' }, props.node.name),
-        ]),
-        isFolder && isOpen && props.node.children && props.node.children.length
-          ? h('div', { class: 'node-children' },
-              props.node.children.map((child) =>
-                h(TreeNode, {
-                  key: child.id,
-                  node: child,
-                  depth: props.depth + 1,
-                  renamingPath: props.renamingPath,
-                  renameValue: props.renameValue,
-                  onOpen: (n: FileNode) => emit('open', n),
-                  onToggle: (n: FileNode) => emit('toggle', n.path),
-                  onContextmenu: (e: MouseEvent, n: FileNode) => emit('context-menu', e, n),
-                  onRenameStart: (n: FileNode) => emit('rename-start', n),
-                  onRenameFinish: (n: FileNode) => emit('rename-finish', n),
-                  onDeleteNode: (n: FileNode) => emit('delete-node', n),
-                  onNewFile: (p: string) => emit('new-file', p),
-                  onNewFolder: (p: string) => emit('new-folder', p),
-                })
-              )
-            )
-          : null,
-      ])
-    }
-  },
-})
-
-export default {}
-</script>
-
 <style scoped>
-.file-tree-panel {
-  height: 100%;
-  display: flex;
-  flex-direction: column;
-  font-size: var(--font-size-sm);
-}
-
-.panel-toolbar {
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-  padding: var(--space-sm) var(--space-md);
-  border-bottom: 1px solid var(--color-border-subtle);
-}
-
-.toolbar-left {
-  display: flex;
-  gap: 2px;
-}
-
-.tool-btn {
-  width: 28px;
-  height: 28px;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  border-radius: var(--radius-sm);
-  color: var(--color-text-secondary);
-  font-size: 14px;
-  transition: all var(--motion-fast);
-
-  &:hover {
-    background: var(--color-background-hover);
-    color: var(--color-text-primary);
-  }
-}
-
-.new-input {
-  padding: var(--space-sm) var(--space-md);
-
-  input {
-    width: 100%;
-    padding: 4px 8px;
-    background: var(--color-background-secondary);
-    border: 1px solid var(--color-border-focus);
-    border-radius: var(--radius-sm);
-    font-size: 13px;
-    outline: none;
-  }
-}
-
-.tree-container {
-  flex: 1;
-  overflow-y: auto;
-  overflow-x: hidden;
-  padding: var(--space-xs) 0;
-}
-
-.tree-node {
-  user-select: none;
-}
-
-.node-row {
-  display: flex;
-  align-items: center;
-  gap: 4px;
-  height: 28px;
-  padding-right: var(--space-md);
-  cursor: pointer;
-  border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
-  margin-right: 4px;
-  transition: background var(--motion-fast);
-
-  &:hover {
-    background: var(--color-background-hover);
-  }
-
-  &.active {
-    background: var(--color-accent-soft);
-    color: var(--color-accent-primary);
-  }
-}
-
-.chevron {
-  width: 14px;
-  font-size: 9px;
-  color: var(--color-text-tertiary);
-  flex-shrink: 0;
-}
-
-.node-icon {
-  font-size: 14px;
-  flex-shrink: 0;
-}
-
-.node-name {
-  flex: 1;
-  overflow: hidden;
-  text-overflow: ellipsis;
-  white-space: nowrap;
-  color: var(--color-text-primary);
-}
-
-.rename-input {
-  flex: 1;
-  padding: 2px 4px;
-  font-size: 13px;
-  background: var(--color-surface-primary);
-  border: 1px solid var(--color-border-focus);
-  border-radius: var(--radius-sm);
-  outline: none;
-}
-
-.context-menu {
-  position: fixed;
-  z-index: var(--z-dropdown);
-  background: var(--color-surface-elevated);
-  border: 1px solid var(--color-border-default);
-  border-radius: var(--radius-md);
-  padding: 4px;
-  box-shadow: var(--shadow-lg);
-  min-width: 140px;
-  display: flex;
-  flex-direction: column;
-
-  button {
-    text-align: left;
-    padding: 6px 10px;
-    font-size: 13px;
-    color: var(--color-text-primary);
-    border-radius: var(--radius-sm);
-
-    &:hover {
-      background: var(--color-background-hover);
-    }
-
-    &.danger {
-      color: var(--color-error);
-    }
-  }
-}
+.file-tree-panel { height: 100%; }
+.toolbar { display: flex; gap: var(--space-xs); padding: var(--space-sm); border-bottom: 1px solid var(--color-border-subtle); }
+button { border: 0; border-radius: var(--radius-sm); padding: var(--space-xs) var(--space-sm); background: transparent; color: inherit; cursor: pointer; }
+button:hover { background: var(--color-background-secondary); }
+.new-item { display: flex; gap: var(--space-xs); padding: var(--space-sm); }
+.new-item input { min-width: 0; flex: 1; }
+.tree { padding: var(--space-xs); }
+.context-menu { position: fixed; z-index: 1000; display: grid; min-width: 130px; padding: var(--space-xs); border: 1px solid var(--color-border-default); border-radius: var(--radius-md); background: var(--color-background-primary); box-shadow: var(--shadow-md); }
+.context-menu button { text-align: left; }
+.context-menu .danger { color: var(--color-danger, #d33); }
 </style>
diff --git a/frontend/src/features/workspace/WorkspaceView.vue b/frontend/src/features/workspace/WorkspaceView.vue
index 2fc276a..b702bd0 100644
--- a/frontend/src/features/workspace/WorkspaceView.vue
+++ b/frontend/src/features/workspace/WorkspaceView.vue
@@ -13,8 +13,9 @@ onMounted(() => {
     // Already loaded
   }
   if (!workspaceStore.activeFilePath && workspaceStore.fileTree.length === 0) {
-    workspaceStore.openFile('/欢迎使用知笔知己.md')
-    editorStore.loadFile('/欢迎使用知笔知己.md')
+    void editorStore.loadFile('/欢迎使用知笔知己.md').then(() => {
+      workspaceStore.openFile('/欢迎使用知笔知己.md')
+    })
   }
 })
 </script>
diff --git a/frontend/src/main.ts b/frontend/src/main.ts
index 151c644..1319b00 100644
--- a/frontend/src/main.ts
+++ b/frontend/src/main.ts
@@ -3,6 +3,7 @@ import { createPinia } from 'pinia'
 import App from './App.vue'
 import router from './router'
 import './styles/tokens.css'
+import './styles/features.css'
 import { useThemeStore } from './stores/theme'
 
 const app = createApp(App)
diff --git a/frontend/src/router/index.ts b/frontend/src/router/index.ts
index 997bf2c..426b5f9 100644
--- a/frontend/src/router/index.ts
+++ b/frontend/src/router/index.ts
@@ -61,15 +61,6 @@ const routes = [
     name: 'settings',
     component: () => import('@/features/settings/SettingsView.vue'),
     meta: { title: '设置', requiresVault: true },
-    children: [
-      { path: '', redirect: '/settings/general' },
-      { path: 'general', component: () => import('@/features/settings/sections/GeneralSection.vue') },
-      { path: 'editor', component: () => import('@/features/settings/sections/EditorSection.vue') },
-      { path: 'providers', component: () => import('@/features/settings/sections/ProvidersSection.vue') },
-      { path: 'index', component: () => import('@/features/settings/sections/IndexSection.vue') },
-      { path: 'permissions', component: () => import('@/features/settings/sections/PermissionsSection.vue') },
-      { path: 'ai-core', component: () => import('@/features/settings/sections/AiCoreSection.vue') },
-    ],
   },
 ]
 
diff --git a/frontend/src/services/agentService.ts b/frontend/src/services/agentService.ts
index 102e661..b610ced 100644
--- a/frontend/src/services/agentService.ts
+++ b/frontend/src/services/agentService.ts
@@ -1,46 +1,61 @@
 import apiClient from './apiClient'
 import { SseClient } from './sseClient'
-import type { AgentRun, AgentEvent, ToolDefinition, PermissionRequest } from '@/contracts'
+import type { AgentRun, AgentEvent, ApiAgentRun, OperationResponse, PageMeta, ToolDefinition, PermissionRequest } from '@/contracts'
+
+function toAgentRun(run: ApiAgentRun): AgentRun {
+  return {
+    run_id: run.run_id,
+    status: run.status,
+    current_step: run.current_step,
+    max_steps: run.max_steps,
+    token_usage: {
+      input_tokens: 0,
+      output_tokens: 0,
+      total_tokens: run.token_usage,
+    },
+    started_at: run.created_at,
+    completed_at: ['completed', 'failed', 'cancelled'].includes(run.status) ? run.updated_at : undefined,
+    error: run.error_message ?? undefined,
+  }
+}
 
 export async function listAgentRuns(params?: {
   limit?: number
   offset?: number
 }): Promise<{ items: AgentRun[]; total: number }> {
-  return apiClient.get('/api/agent/runs', { params })
+  const response = await apiClient.get<{ items: ApiAgentRun[]; page: PageMeta }>('/api/agent/runs', { params })
+  return { items: response.items.map(toAgentRun), total: response.page.total }
 }
 
 export async function getAgentRun(runId: string): Promise<AgentRun> {
-  return apiClient.get(`/api/agent/runs/${runId}`)
+  return toAgentRun(await apiClient.get<ApiAgentRun>(`/api/agent/runs/${runId}`))
 }
 
 export interface CreateAgentRunRequest {
-  task: string
-  provider_id?: string
-  model?: string
+  input: string
+  provider_id: string
+  model: string
   skill_id?: string
   allowed_tools?: string[]
   max_steps?: number
-  tool_timeout?: number
-  run_timeout?: number
+  tool_timeout_seconds?: number
+  run_timeout_seconds?: number
   token_budget?: number
   allow_network?: boolean
   max_concurrent_tools?: number
 }
 
 export async function createAgentRun(request: CreateAgentRunRequest): Promise<AgentRun> {
-  return apiClient.post('/api/agent/runs', request)
+  return toAgentRun(await apiClient.post<ApiAgentRun>('/api/agent/runs', request))
 }
 
-export async function cancelAgentRun(runId: string): Promise<void> {
+export async function cancelAgentRun(runId: string): Promise<OperationResponse> {
   return apiClient.post(`/api/agent/runs/${runId}/cancel`)
 }
 
 export async function listTools(): Promise<ToolDefinition[]> {
-  try {
-    return await apiClient.get('/api/tools')
-  } catch {
-    return mockTools
-  }
+  const response = await apiClient.get<{ items: ToolDefinition[] }>('/api/tools')
+  return response.items
 }
 
 export function streamAgentEvents(
@@ -75,12 +90,10 @@ export function streamAgentEvents(
 export async function respondToPermission(
   runId: string,
   requestId: string,
-  decision: 'allow' | 'deny',
-  scope?: 'once' | 'session' | 'always'
-): Promise<void> {
+  decision: 'allow_once' | 'allow_session' | 'deny'
+): Promise<OperationResponse> {
   return apiClient.post(`/api/agent/runs/${runId}/permissions/${requestId}`, {
     decision,
-    scope,
   })
 }
 
diff --git a/frontend/src/services/apiClient.ts b/frontend/src/services/apiClient.ts
index a2e5654..df13010 100644
--- a/frontend/src/services/apiClient.ts
+++ b/frontend/src/services/apiClient.ts
@@ -1,6 +1,11 @@
 import type { ApiError, ErrorResponse } from '@/contracts'
 
-const BASE_URL = import.meta.env.VITE_API_BASE || ''
+const BASE_URL = import.meta.env.VITE_API_BASE_URL ?? import.meta.env.VITE_API_BASE ?? ''
+
+export function resolveApiUrl(path: string): string {
+  if (/^https?:\/\//i.test(path)) return path
+  return `${BASE_URL.replace(/\/$/, '')}/${path.replace(/^\//, '')}`
+}
 
 interface RequestOptions extends RequestInit {
   params?: Record<string, string | number | boolean | undefined>
@@ -22,7 +27,7 @@ export class ApiErrorClass extends Error {
 async function request<T>(path: string, options: RequestOptions = {}): Promise<T> {
   const { params, token, headers, ...rest } = options
 
-  let url = path.startsWith('http') ? path : `${BASE_URL}${path}`
+  let url = resolveApiUrl(path)
 
   if (params) {
     const usp = new URLSearchParams()
@@ -94,6 +99,13 @@ export const apiClient = {
       body: body !== undefined ? JSON.stringify(body) : undefined,
     })
   },
+  put<T>(path: string, body?: unknown, options?: Omit<RequestOptions, 'method' | 'body'>) {
+    return request<T>(path, {
+      ...options,
+      method: 'PUT',
+      body: body !== undefined ? JSON.stringify(body) : undefined,
+    })
+  },
   delete<T>(path: string, options?: Omit<RequestOptions, 'method'>) {
     return request<T>(path, { ...options, method: 'DELETE' })
   },
diff --git a/frontend/src/services/chatService.ts b/frontend/src/services/chatService.ts
index 6aa0bb3..35f12b2 100644
--- a/frontend/src/services/chatService.ts
+++ b/frontend/src/services/chatService.ts
@@ -1,27 +1,21 @@
-import apiClient from './apiClient'
 import { SseClient } from './sseClient'
 import type { Conversation, ChatMessage, ModelEvent } from '@/contracts'
 
-export async function listConversations(): Promise<Conversation[]> {
-  return apiClient.get('/api/conversations')
-}
-
-export async function getConversation(conversationId: string): Promise<Conversation> {
-  return apiClient.get(`/api/conversations/${conversationId}`)
-}
-
-export async function getMessages(conversationId: string): Promise<ChatMessage[]> {
-  return apiClient.get(`/api/conversations/${conversationId}/messages`)
-}
-
 export interface ChatRequest {
+  provider_id: string
+  model: string
   conversation_id?: string
-  message: string
-  provider_id?: string
-  model?: string
+  system?: string
+  messages: Array<{
+    role: 'system' | 'user' | 'assistant' | 'tool'
+    content: string
+    name?: string
+    tool_call_id?: string
+  }>
   use_rag?: boolean
-  skill_id?: string
   attachments?: string[]
+  temperature?: number
+  max_tokens?: number
 }
 
 export function streamChat(
diff --git a/frontend/src/services/index.ts b/frontend/src/services/index.ts
index 5208e4d..968f5b3 100644
--- a/frontend/src/services/index.ts
+++ b/frontend/src/services/index.ts
@@ -1,5 +1,5 @@
 export { apiClient, ApiErrorClass } from './apiClient'
-export type { ApiError } from './apiClient'
+export type { ApiError } from '@/contracts'
 export { SseClient } from './sseClient'
 export type { SseClientOptions, SseEventHandler } from './sseClient'
 export * as noteService from './noteService'
diff --git a/frontend/src/services/indexService.ts b/frontend/src/services/indexService.ts
index f365f94..72bcd34 100644
--- a/frontend/src/services/indexService.ts
+++ b/frontend/src/services/indexService.ts
@@ -1,25 +1,29 @@
 import apiClient from './apiClient'
-import type { IndexStatus } from '@/contracts'
+import type { ApiIndexJob, ApiIndexStatus, IndexStatus } from '@/contracts'
 
-export async function getIndexStatus(): Promise<IndexStatus> {
-  try {
-    return await apiClient.get('/api/index/status')
-  } catch {
-    return mockIndexStatus
+function toIndexStatus(status: ApiIndexStatus): IndexStatus {
+  return {
+    status: status.status === 'idle' ? 'idle' : status.status === 'failed' ? 'error' : 'indexing',
+    pending_jobs: status.pending_jobs,
+    total_notes: 0,
+    total_blocks: 0,
+    fts_enabled: true,
+    vector_enabled: true,
+    last_indexed_at: status.last_completed_at ?? undefined,
+    error: status.error_message ?? undefined,
   }
 }
 
-export async function rebuildIndex(scope: 'full' | 'fts' | 'vector' = 'full'): Promise<{ job_id: string }> {
-  return apiClient.post('/api/index/rebuild', { scope })
+export async function getIndexStatus(): Promise<IndexStatus> {
+  return toIndexStatus(await apiClient.get<ApiIndexStatus>('/api/index/status'))
 }
 
-export async function getIndexJob(jobId: string): Promise<{
-  job_id: string
-  status: 'queued' | 'running' | 'completed' | 'failed'
-  progress: number
-  total: number
-  error?: string
-}> {
+export async function rebuildIndex(scope: 'full' | 'fts' | 'vector' = 'full'): Promise<ApiIndexJob> {
+  const apiScope = scope === 'full' ? 'all' : scope === 'fts' ? 'notes' : 'vectors'
+  return apiClient.post<ApiIndexJob>('/api/index/rebuild', { scope: apiScope })
+}
+
+export async function getIndexJob(jobId: string): Promise<ApiIndexJob> {
   return apiClient.get(`/api/index/jobs/${jobId}`)
 }
 
diff --git a/frontend/src/services/noteService.ts b/frontend/src/services/noteService.ts
index 7771be8..d568c6c 100644
--- a/frontend/src/services/noteService.ts
+++ b/frontend/src/services/noteService.ts
@@ -1,38 +1,39 @@
 import apiClient from './apiClient'
-import type { Note, NoteBlock } from '@/contracts'
+import type { ApiNote, ApiNoteSummary, OperationResponse, PageMeta } from '@/contracts'
 
 export async function listNotes(params?: {
   folder?: string
   tag?: string
   limit?: number
   offset?: number
-}): Promise<{ items: Note[]; total: number }> {
+}): Promise<{ items: ApiNoteSummary[]; page: PageMeta }> {
   return apiClient.get('/api/notes', { params })
 }
 
-export async function getNote(noteId: string): Promise<{ note: Note; blocks: NoteBlock[] }> {
+export async function getNote(noteId: string): Promise<ApiNote> {
   return apiClient.get(`/api/notes/${noteId}`)
 }
 
 export async function createNote(data: {
   title: string
-  folder_path?: string
-  content?: string
-}): Promise<Note> {
+  folder?: string
+  markdown?: string
+  tags?: string[]
+}): Promise<ApiNote> {
   return apiClient.post('/api/notes', data)
 }
 
 export async function updateNote(
   noteId: string,
-  data: { title?: string; content?: string; tags?: string[] }
-): Promise<Note> {
+  data: { title?: string; markdown?: string; tags?: string[] }
+): Promise<ApiNote> {
   return apiClient.patch(`/api/notes/${noteId}`, data)
 }
 
-export async function deleteNote(noteId: string): Promise<void> {
+export async function deleteNote(noteId: string): Promise<OperationResponse> {
   return apiClient.delete(`/api/notes/${noteId}`)
 }
 
-export async function moveNote(noteId: string, target_folder: string): Promise<Note> {
-  return apiClient.post(`/api/notes/${noteId}/move`, { target_folder })
+export async function moveNote(noteId: string, folder: string): Promise<ApiNote> {
+  return apiClient.post(`/api/notes/${noteId}/move`, { folder })
 }
diff --git a/frontend/src/services/pluginService.ts b/frontend/src/services/pluginService.ts
index d2baf2b..b42fdc7 100644
--- a/frontend/src/services/pluginService.ts
+++ b/frontend/src/services/pluginService.ts
@@ -1,31 +1,60 @@
 import apiClient from './apiClient'
-import type { Plugin } from '@/contracts'
+import type { ApiPlugin, OperationResponse, Plugin, PluginContribution } from '@/contracts'
 
-export async function listPlugins(): Promise<Plugin[]> {
-  try {
-    return await apiClient.get('/api/plugins')
-  } catch {
-    return mockPlugins
+function toPlugin(plugin: ApiPlugin): Plugin {
+  const { manifest } = plugin
+  const contributions: PluginContribution[] = []
+  const append = (type: PluginContribution['type'], values: string[]) => {
+    values.forEach((id) => contributions.push({ type, id, name: id }))
+  }
+  append('tool', manifest.contributes.tools)
+  append('command', manifest.contributes.commands)
+  append('importer', manifest.contributes.importers)
+  append('exporter', manifest.contributes.exporters)
+  append('sidebar_panel', manifest.contributes.panels)
+  append('settings_section', manifest.contributes.settings_sections)
+  return {
+    plugin_id: manifest.plugin_id,
+    name: manifest.name,
+    version: manifest.version,
+    description: manifest.description,
+    status: plugin.status,
+    enabled: plugin.enabled,
+    permissions: manifest.permissions,
+    granted_permissions: plugin.granted_permissions,
+    contributions,
+    backend_type: manifest.backend.type,
+    transport: manifest.backend.transport,
+    last_error: plugin.error_message ?? undefined,
   }
 }
 
-export async function getPlugin(pluginId: string): Promise<Plugin> {
-  return apiClient.get(`/api/plugins/${pluginId}`)
+export async function listPlugins(): Promise<Plugin[]> {
+  const response = await apiClient.get<{ items: ApiPlugin[] }>('/api/plugins')
+  return response.items.map(toPlugin)
 }
 
-export async function installPlugin(pluginId: string): Promise<Plugin> {
-  return apiClient.post('/api/plugins/install', { plugin_id: pluginId })
+export async function getPlugin(pluginId: string): Promise<Plugin> {
+  return toPlugin(await apiClient.get<ApiPlugin>(`/api/plugins/${pluginId}`))
+}
+
+export async function installPlugin(packagePath: string): Promise<Plugin> {
+  return toPlugin(await apiClient.post<ApiPlugin>('/api/plugins/install', { package_path: packagePath }))
 }
 
 export async function enablePlugin(pluginId: string): Promise<Plugin> {
-  return apiClient.post(`/api/plugins/${pluginId}/enable`)
+  return toPlugin(await apiClient.post<ApiPlugin>(`/api/plugins/${pluginId}/enable`))
 }
 
 export async function disablePlugin(pluginId: string): Promise<Plugin> {
-  return apiClient.post(`/api/plugins/${pluginId}/disable`)
+  return toPlugin(await apiClient.post<ApiPlugin>(`/api/plugins/${pluginId}/disable`))
 }
 
-export async function uninstallPlugin(pluginId: string): Promise<void> {
+export async function grantPluginPermissions(pluginId: string, permissions: string[]): Promise<Plugin> {
+  return toPlugin(await apiClient.put<ApiPlugin>(`/api/plugins/${pluginId}/permissions`, { permissions }))
+}
+
+export async function uninstallPlugin(pluginId: string): Promise<OperationResponse> {
   return apiClient.delete(`/api/plugins/${pluginId}`)
 }
 
@@ -80,7 +109,7 @@ export const mockPlugins: Plugin[] = [
     contributions: [
       { type: 'sidebar_panel', id: 'kanban.panel', name: '任务看板', description: '以看板方式查看和管理任务' },
     ],
-    backend_type: 'internal',
+    backend_type: 'internal_rpc',
   },
   {
     plugin_id: 'pdf-importer',
@@ -114,6 +143,6 @@ export const mockPlugins: Plugin[] = [
       { type: 'sidebar_panel', id: 'calendar.widget', name: '日历小部件', description: '侧边栏日历视图' },
     ],
     backend_type: 'mcp',
-    transport: 'websocket',
+    transport: 'http',
   },
 ]
diff --git a/frontend/src/services/providerService.ts b/frontend/src/services/providerService.ts
index 75397fa..ddaeee1 100644
--- a/frontend/src/services/providerService.ts
+++ b/frontend/src/services/providerService.ts
@@ -1,36 +1,67 @@
 import apiClient from './apiClient'
-import type { ProviderConfig, ModelInfo } from '@/contracts'
+import type { ApiModelInfo, ApiProviderConfig, ModelCapability, ModelInfo, OperationResponse, ProviderConfig } from '@/contracts'
 
-export async function listProviders(): Promise<ProviderConfig[]> {
-  try {
-    return await apiClient.get('/api/providers')
-  } catch {
-    return mockProviders
+function capabilityMap(capabilities: string[]): Partial<ModelCapability> {
+  return Object.fromEntries(capabilities.map((capability) => [capability, true])) as Partial<ModelCapability>
+}
+
+function toProvider(provider: ApiProviderConfig): ProviderConfig {
+  return {
+    provider_id: provider.provider_id,
+    provider_type: provider.provider_type,
+    name: provider.name,
+    base_url: provider.base_url ?? undefined,
+    default_model: provider.default_model ?? '',
+    enabled: provider.enabled,
+    capabilities: capabilityMap(provider.capabilities),
+    credential_id: provider.credential_id ?? undefined,
+    has_credential: Boolean(provider.credential_id) || provider.provider_type === 'mock',
   }
 }
 
+function toModel(model: ApiModelInfo): ModelInfo {
+  return { model_id: model.model, name: model.display_name, capabilities: capabilityMap(model.capabilities) }
+}
+
+export async function listProviders(): Promise<ProviderConfig[]> {
+  const response = await apiClient.get<{ items: ApiProviderConfig[] }>('/api/providers')
+  return response.items.map(toProvider)
+}
+
 export async function getProvider(providerId: string): Promise<ProviderConfig> {
-  return apiClient.get(`/api/providers/${providerId}`)
+  return toProvider(await apiClient.get<ApiProviderConfig>(`/api/providers/${providerId}`))
 }
 
-export async function createProvider(data: Omit<ProviderConfig, 'provider_id'> & { api_key?: string }): Promise<ProviderConfig> {
-  return apiClient.post('/api/providers', data)
+export async function createProvider(data: Omit<ProviderConfig, 'provider_id'>): Promise<ProviderConfig> {
+  const response = await apiClient.post<ApiProviderConfig>('/api/providers', {
+    provider_type: data.provider_type,
+    name: data.name,
+    base_url: data.base_url,
+    default_model: data.default_model || null,
+    credential_id: data.credential_id,
+    enabled: data.enabled,
+  })
+  return toProvider(response)
 }
 
-export async function updateProvider(providerId: string, data: Partial<ProviderConfig> & { api_key?: string }): Promise<ProviderConfig> {
-  return apiClient.patch(`/api/providers/${providerId}`, data)
+export async function updateProvider(providerId: string, data: Partial<ProviderConfig>): Promise<ProviderConfig> {
+  const response = await apiClient.patch<ApiProviderConfig>(`/api/providers/${providerId}`, {
+    name: data.name,
+    base_url: data.base_url,
+    default_model: data.default_model,
+    credential_id: data.credential_id,
+    enabled: data.enabled,
+  })
+  return toProvider(response)
 }
 
-export async function deleteProvider(providerId: string): Promise<void> {
+export async function deleteProvider(providerId: string): Promise<OperationResponse> {
   return apiClient.delete(`/api/providers/${providerId}`)
 }
 
 export async function listModels(providerId: string): Promise<ModelInfo[]> {
-  try {
-    return await apiClient.get(`/api/providers/${providerId}/models`)
-  } catch {
-    return mockModels[providerId] || []
-  }
+  const response = await apiClient.get<{ provider_id: string; items: ApiModelInfo[] }>(`/api/providers/${providerId}/models`)
+  return response.items.map(toModel)
 }
 
 export interface TestResult {
@@ -42,8 +73,8 @@ export interface TestResult {
 
 export async function testProvider(providerId: string): Promise<TestResult> {
   try {
-    const result = await apiClient.post<{ success: boolean; latency_ms: number }>('/api/providers/test', { provider_id: providerId })
-    return { success: result.success, latency_ms: result.latency_ms }
+    const result = await apiClient.post<{ success: boolean; latency_ms?: number | null; message: string }>('/api/providers/test', { provider_id: providerId })
+    return { success: result.success, latency_ms: result.latency_ms ?? undefined, error_message: result.success ? undefined : result.message }
   } catch (e: any) {
     return { success: false, error_code: e.code || 'TEST_FAILED', error_message: e.message }
   }
@@ -51,7 +82,7 @@ export async function testProvider(providerId: string): Promise<TestResult> {
 
 export const mockProviders: ProviderConfig[] = [
   {
-    provider_id: 'mock-provider',
+    provider_id: 'mock',
     provider_type: 'mock',
     name: 'Mock Provider (测试)',
     default_model: 'mock-1',
@@ -69,7 +100,7 @@ export const mockProviders: ProviderConfig[] = [
   },
   {
     provider_id: 'openai-compat-1',
-    provider_type: 'openai-compatible',
+    provider_type: 'openai_compatible',
     name: 'OpenAI 兼容服务',
     base_url: 'https://api.openai.com/v1',
     default_model: 'gpt-4o-mini',
@@ -106,7 +137,7 @@ export const mockProviders: ProviderConfig[] = [
 ]
 
 export const mockModels: Record<string, ModelInfo[]> = {
-  'mock-provider': [
+  mock: [
     {
       model_id: 'mock-1',
       name: 'Mock Model v1',
diff --git a/frontend/src/services/searchService.ts b/frontend/src/services/searchService.ts
index fd7a3e4..81758b5 100644
--- a/frontend/src/services/searchService.ts
+++ b/frontend/src/services/searchService.ts
@@ -1,15 +1,45 @@
 import apiClient from './apiClient'
-import type { SearchRequest, SearchResult } from '@/contracts'
+import type { ApiSearchResult, PageMeta, SearchRequest, SearchResult } from '@/contracts'
 
 export async function search(request: SearchRequest): Promise<{
   results: SearchResult[]
   total: number
   mode: SearchRequest['mode']
 }> {
-  return apiClient.post('/api/search', request)
+  const response = await apiClient.post<{
+    query: string
+    mode: 'fts' | 'vector' | 'hybrid'
+    items: ApiSearchResult[]
+    page: PageMeta
+  }>('/api/search', {
+    query: request.query,
+    mode: request.mode ?? 'hybrid',
+    folders: request.folder ? [request.folder] : [],
+    note_ids: request.note_id ? [request.note_id] : [],
+    tags: request.tag ? [request.tag] : [],
+    limit: request.limit ?? 20,
+    offset: request.offset ?? 0,
+  })
+  return {
+    results: response.items.map((item) => ({
+      block_id: item.block_id,
+      note_id: item.note_id,
+      note_title: item.title,
+      file_path: item.file_path,
+      heading_path: item.heading_path.join(' / '),
+      snippet: item.snippet ?? '',
+      score: item.score,
+      match_type: response.mode,
+    })),
+    total: response.page.total,
+    mode: response.mode,
+  }
 }
 
-export async function searchMock(query: string, mode = 'hybrid' as const): Promise<{
+export async function searchMock(
+  query: string,
+  mode: 'fts' | 'vector' | 'hybrid' = 'hybrid'
+): Promise<{
   results: SearchResult[]
   total: number
   mode: 'fts' | 'vector' | 'hybrid'
diff --git a/frontend/src/services/skillService.ts b/frontend/src/services/skillService.ts
index a2f61a7..c2babca 100644
--- a/frontend/src/services/skillService.ts
+++ b/frontend/src/services/skillService.ts
@@ -1,31 +1,45 @@
 import apiClient from './apiClient'
-import type { Skill } from '@/contracts'
+import type { ApiSkill, OperationResponse, Skill } from '@/contracts'
 
-export async function listSkills(): Promise<Skill[]> {
-  try {
-    return await apiClient.get('/api/skills')
-  } catch {
-    return mockSkills
+function toSkill(skill: ApiSkill): Skill {
+  const { manifest } = skill
+  return {
+    skill_id: manifest.skill_id,
+    name: manifest.name,
+    version: manifest.version,
+    description: manifest.description,
+    permissions: manifest.permissions,
+    tools: manifest.tools,
+    retrieval_config: manifest.retrieval,
+    model_requirements: { capabilities: manifest.model.required_capabilities },
+    status: skill.status,
+    missing_dependencies: skill.missing_dependencies,
+    enabled: skill.enabled,
   }
 }
 
-export async function getSkill(skillId: string): Promise<Skill> {
-  return apiClient.get(`/api/skills/${skillId}`)
+export async function listSkills(): Promise<Skill[]> {
+  const response = await apiClient.get<{ items: ApiSkill[] }>('/api/skills')
+  return response.items.map(toSkill)
 }
 
-export async function installSkill(skillId: string): Promise<Skill> {
-  return apiClient.post('/api/skills/install', { skill_id: skillId })
+export async function getSkill(skillId: string): Promise<Skill> {
+  return toSkill(await apiClient.get<ApiSkill>(`/api/skills/${skillId}`))
+}
+
+export async function installSkill(packagePath: string): Promise<Skill> {
+  return toSkill(await apiClient.post<ApiSkill>('/api/skills/install', { package_path: packagePath }))
 }
 
 export async function enableSkill(skillId: string): Promise<Skill> {
-  return apiClient.post(`/api/skills/${skillId}/enable`)
+  return toSkill(await apiClient.post<ApiSkill>(`/api/skills/${skillId}/enable`))
 }
 
 export async function disableSkill(skillId: string): Promise<Skill> {
-  return apiClient.post(`/api/skills/${skillId}/disable`)
+  return toSkill(await apiClient.post<ApiSkill>(`/api/skills/${skillId}/disable`))
 }
 
-export async function uninstallSkill(skillId: string): Promise<void> {
+export async function uninstallSkill(skillId: string): Promise<OperationResponse> {
   return apiClient.delete(`/api/skills/${skillId}`)
 }
 
diff --git a/frontend/src/services/sseClient.ts b/frontend/src/services/sseClient.ts
index d5341ee..e94b9ce 100644
--- a/frontend/src/services/sseClient.ts
+++ b/frontend/src/services/sseClient.ts
@@ -1,3 +1,5 @@
+import { resolveApiUrl } from './apiClient'
+
 export type SseEventHandler = (event: string, data: Record<string, unknown>) => void
 
 export interface SseClientOptions {
@@ -37,7 +39,7 @@ export class SseClient {
         headers['Authorization'] = `Bearer ${token}`
       }
 
-      const resp = await fetch(url, {
+      const resp = await fetch(resolveApiUrl(url), {
         method,
         headers,
         body: body !== undefined ? JSON.stringify(body) : undefined,
@@ -53,6 +55,39 @@ export class SseClient {
       onOpen?.()
 
       const decoder = new TextDecoder('utf-8')
+      let eventName = 'message'
+      let dataLines: string[] = []
+      let doneNotified = false
+
+      const dispatchEvent = () => {
+        if (!dataLines.length) {
+          eventName = 'message'
+          return
+        }
+        try {
+          const data = JSON.parse(dataLines.join('\n')) as Record<string, unknown>
+          onEvent?.(eventName, data)
+          if (!doneNotified && ['Done', 'RunCompleted', 'RunFailed', 'RunCancelled'].includes(eventName)) {
+            doneNotified = true
+            onDone?.()
+          }
+        } catch (error) {
+          onError?.(error instanceof Error ? error : new Error('Malformed SSE data'))
+        }
+        eventName = 'message'
+        dataLines = []
+      }
+
+      const consumeLine = (line: string) => {
+        if (line === '') return dispatchEvent()
+        if (line.startsWith(':')) return
+        const separator = line.indexOf(':')
+        const field = separator === -1 ? line : line.slice(0, separator)
+        let fieldValue = separator === -1 ? '' : line.slice(separator + 1)
+        if (fieldValue.startsWith(' ')) fieldValue = fieldValue.slice(1)
+        if (field === 'event') eventName = fieldValue
+        if (field === 'data') dataLines.push(fieldValue)
+      }
 
       while (true) {
         const { value, done } = await this.reader.read()
@@ -60,39 +95,15 @@ export class SseClient {
 
         this.buffer += decoder.decode(value, { stream: true })
 
-        const lines = this.buffer.split('\n')
+        const lines = this.buffer.split(/\r?\n/)
         this.buffer = lines.pop() || ''
-
-        let eventName = 'message'
-        let dataStr = ''
-
-        for (const line of lines) {
-          const trimmed = line.trim()
-          if (!trimmed) {
-            if (dataStr) {
-              try {
-                const data = JSON.parse(dataStr)
-                onEvent?.(eventName, data)
-                if (eventName === 'Done' || eventName === 'RunCompleted' || eventName === 'RunFailed' || eventName === 'RunCancelled') {
-                  onDone?.()
-                }
-              } catch {
-                /* ignore malformed json */
-              }
-              eventName = 'message'
-              dataStr = ''
-            }
-            continue
-          }
-
-          if (trimmed.startsWith('event:')) {
-            eventName = trimmed.slice(6).trim()
-          } else if (trimmed.startsWith('data:')) {
-            const d = trimmed.slice(5).trim()
-            dataStr += dataStr ? '\n' + d : d
-          }
-        }
+        lines.forEach(consumeLine)
       }
+
+      this.buffer += decoder.decode()
+      if (this.buffer) consumeLine(this.buffer.replace(/\r$/, ''))
+      dispatchEvent()
+      if (!doneNotified) onDone?.()
     } catch (e) {
       if ((e as Error).name === 'AbortError') return
       onError?.(e as Error)
diff --git a/frontend/src/services/systemService.ts b/frontend/src/services/systemService.ts
index d7c896d..5672e68 100644
--- a/frontend/src/services/systemService.ts
+++ b/frontend/src/services/systemService.ts
@@ -14,10 +14,10 @@ export async function getStatus(): Promise<SystemStatus> {
     return await apiClient.get<SystemStatus>('/api/status')
   } catch {
     return {
+      status: 'ok',
       name: 'notes-agent',
       version: '0.1.0',
       environment: import.meta.env.DEV ? 'development' : 'production',
-      ai_core_available: false,
     }
   }
 }
diff --git a/frontend/src/services/taskService.ts b/frontend/src/services/taskService.ts
index 478e8d6..53cc31a 100644
--- a/frontend/src/services/taskService.ts
+++ b/frontend/src/services/taskService.ts
@@ -1,42 +1,63 @@
 import apiClient from './apiClient'
-import type { TaskItem, TaskStatus, TaskPriority } from '@/contracts'
+import type { ApiTask, OperationResponse, PageMeta, TaskItem, TaskStatus, TaskPriority } from '@/contracts'
 
-export async function listTasks(params?: {
-  status?: TaskStatus
-  priority?: TaskPriority
-  source?: 'user' | 'note' | 'agent'
-  limit?: number
-  offset?: number
-}): Promise<{ items: TaskItem[]; total: number }> {
-  try {
-    return await apiClient.get('/api/tasks', { params })
-  } catch {
-    return { items: mockTasks, total: mockTasks.length }
+function toTask(task: ApiTask): TaskItem {
+  return {
+    task_id: task.task_id,
+    title: task.title,
+    description: task.description,
+    status: task.status,
+    priority: 'medium',
+    due_date: task.due_at ?? undefined,
+    note_id: task.note_id ?? undefined,
+    source: 'user',
+    created_at: task.created_at,
+    updated_at: task.updated_at,
   }
 }
 
+export async function listTasks(params?: {
+  limit?: number
+  offset?: number
+}): Promise<{ items: TaskItem[]; total: number }> {
+  const response = await apiClient.get<{ items: ApiTask[]; page: PageMeta }>('/api/tasks', {
+    params: { limit: params?.limit, offset: params?.offset },
+  })
+  return { items: response.items.map(toTask), total: response.page.total }
+}
+
 export async function getTask(taskId: string): Promise<TaskItem> {
-  return apiClient.get(`/api/tasks/${taskId}`)
+  return toTask(await apiClient.get<ApiTask>(`/api/tasks/${taskId}`))
 }
 
 export async function createTask(data: {
   title: string
   description?: string
-  priority?: TaskPriority
   due_date?: string
   note_id?: string
 }): Promise<TaskItem> {
-  return apiClient.post('/api/tasks', data)
+  return toTask(await apiClient.post<ApiTask>('/api/tasks', {
+    title: data.title,
+    description: data.description ?? '',
+    due_at: data.due_date,
+    note_id: data.note_id,
+  }))
 }
 
 export async function updateTask(
   taskId: string,
-  data: Partial<Pick<TaskItem, 'title' | 'description' | 'status' | 'priority' | 'due_date'>>
+  data: Partial<Pick<TaskItem, 'title' | 'description' | 'status' | 'due_date'>> & { note_id?: string | null }
 ): Promise<TaskItem> {
-  return apiClient.patch(`/api/tasks/${taskId}`, data)
+  return toTask(await apiClient.patch<ApiTask>(`/api/tasks/${taskId}`, {
+    title: data.title,
+    description: data.description,
+    status: data.status,
+    due_at: data.due_date,
+    note_id: data.note_id,
+  }))
 }
 
-export async function deleteTask(taskId: string): Promise<void> {
+export async function deleteTask(taskId: string): Promise<OperationResponse> {
   return apiClient.delete(`/api/tasks/${taskId}`)
 }
 
diff --git a/frontend/src/services/workspaceService.ts b/frontend/src/services/workspaceService.ts
index 1a8a032..b734e31 100644
--- a/frontend/src/services/workspaceService.ts
+++ b/frontend/src/services/workspaceService.ts
@@ -61,6 +61,13 @@ const MOCK_FILE_TREE: FileNode[] = [
   { id: 'n-welcome', name: '欢迎使用知笔知己.md', path: '/欢迎使用知笔知己.md', type: 'file' },
 ]
 
+const mockFileContents = new Map<string, string>()
+
+function rememberContent(path: string, content: string): Promise<string> {
+  mockFileContents.set(path, content)
+  return Promise.resolve(content)
+}
+
 export function getRecentVaults(): Promise<VaultInfo[]> {
   return Promise.resolve(MOCK_VAULTS)
 }
@@ -79,9 +86,11 @@ export function getFileTree(): Promise<FileNode[]> {
 }
 
 export function readFileContent(filePath: string): Promise<string> {
+  const saved = mockFileContents.get(filePath)
+  if (saved !== undefined) return Promise.resolve(saved)
   const name = filePath.split('/').pop() || 'Untitled'
   if (name === '欢迎使用知笔知己.md') {
-    return Promise.resolve(`# 欢迎使用知笔知己
+    return rememberContent(filePath, `# 欢迎使用知笔知己
 
 这是一款本地优先的 AI 笔记软件，支持 Markdown 编辑、智能检索、RAG 问答和 Agent 助手。
 
@@ -137,7 +146,7 @@ def quick_sort(arr):
 `)
   }
   if (name === '红黑树.md') {
-    return Promise.resolve(`# 红黑树
+    return rememberContent(filePath, `# 红黑树
 
 红黑树（Red-Black Tree）是一种自平衡二叉搜索树，每个节点带有颜色属性（红色或黑色）。
 
@@ -183,7 +192,7 @@ def quick_sort(arr):
 - Linux 内核的完全公平调度器
 `)
   }
-  return Promise.resolve(`# ${name.replace('.md', '')}
+  return rememberContent(filePath, `# ${name.replace('.md', '')}
 
 这是一篇示例笔记。
 
@@ -205,26 +214,39 @@ console.log('Hello, Notes Agent!');
 
 export function saveFileContent(filePath: string, content: string): Promise<void> {
   console.debug(`[workspaceService] Save ${filePath}, ${content.length} chars`)
+  mockFileContents.set(filePath, content)
   return Promise.resolve()
 }
 
 export function createFile(folderPath: string, name: string, content = ''): Promise<FileNode> {
-  const path = `${folderPath}/${name}`
+  const path = `${folderPath === '/' ? '' : folderPath}/${name}`
   const id = `n-${Date.now()}`
+  mockFileContents.set(path, content)
   return Promise.resolve({ id, name, path, type: 'file' })
 }
 
 export function createFolder(parentPath: string, name: string): Promise<FileNode> {
-  const path = `${parentPath}/${name}`
+  const path = `${parentPath === '/' ? '' : parentPath}/${name}`
   const id = `f-${Date.now()}`
   return Promise.resolve({ id, name, path, type: 'folder', is_open: true, children: [] })
 }
 
 export function renameFile(oldPath: string, newName: string): Promise<void> {
+  const separator = oldPath.lastIndexOf('/')
+  const newPath = `${oldPath.slice(0, separator + 1)}${newName}`
+  for (const [path, content] of [...mockFileContents]) {
+    if (path === oldPath || path.startsWith(`${oldPath}/`)) {
+      mockFileContents.delete(path)
+      mockFileContents.set(`${newPath}${path.slice(oldPath.length)}`, content)
+    }
+  }
   return Promise.resolve()
 }
 
 export function deleteFile(path: string): Promise<void> {
+  for (const filePath of [...mockFileContents.keys()]) {
+    if (filePath === path || filePath.startsWith(`${path}/`)) mockFileContents.delete(filePath)
+  }
   return Promise.resolve()
 }
 
diff --git a/frontend/src/stores/agent.ts b/frontend/src/stores/agent.ts
index 659a01f..be8be15 100644
--- a/frontend/src/stores/agent.ts
+++ b/frontend/src/stores/agent.ts
@@ -3,6 +3,7 @@ import { ref, computed } from 'vue'
 import type { AgentRun, AgentEvent, ToolDefinition, PermissionRequest, ToolCall } from '@/contracts'
 import { mockAgentRuns, mockAgentEvents, mockTools, mockPermissionRequest } from '@/services/agentService'
 import * as agentService from '@/services/agentService'
+import type { SseClient } from '@/services/sseClient'
 
 export const useAgentStore = defineStore('agent', () => {
   const runs = ref<AgentRun[]>(mockAgentRuns)
@@ -13,6 +14,8 @@ export const useAgentStore = defineStore('agent', () => {
   const isRunning = ref(false)
   const permissionRequest = ref<PermissionRequest | null>(null)
   const toolCalls = ref<ToolCall[]>([])
+  const error = ref<string | null>(null)
+  let eventStream: SseClient | null = null
 
   const activeRun = computed(() =>
     runs.value.find((r) => r.run_id === activeRunId.value) || null
@@ -37,84 +40,104 @@ export const useAgentStore = defineStore('agent', () => {
   }
 
   async function loadRun(runId: string) {
+    eventStream?.cancel()
     activeRunId.value = runId
-    events.value = mockAgentEvents.filter((e) => e.run_id === runId)
+    const run = await agentService.getAgentRun(runId)
+    const existingIndex = runs.value.findIndex((item) => item.run_id === runId)
+    if (existingIndex >= 0) runs.value[existingIndex] = run
+    else runs.value.unshift(run)
+    events.value = []
     toolCalls.value = []
-    for (const evt of events.value) {
-      if (evt.event === 'ToolCall') {
-        const data = evt.data as any
-        toolCalls.value.push({
-          tool_call_id: data.tool_call_id,
-          name: data.name,
-          parameters: data.parameters,
-          status: data.status || 'completed',
-          started_at: evt.timestamp,
-        })
-      } else if (evt.event === 'ToolResult') {
-        const data = evt.data as any
-        const tc = toolCalls.value.find((t) => t.tool_call_id === data.tool_call_id)
-        if (tc) {
-          tc.status = data.status
-          tc.result = data.result
-          tc.completed_at = evt.timestamp
-        }
+    permissionRequest.value = null
+    subscribe(runId)
+  }
+
+  function processEvent(event: AgentEvent) {
+    if (events.value.some((item) => item.run_id === event.run_id && item.sequence === event.sequence)) return
+    events.value.push(event)
+    events.value.sort((a, b) => a.sequence - b.sequence)
+    const data = event.data
+    const run = runs.value.find((item) => item.run_id === event.run_id)
+    if (event.event === 'RunStarted' && run) run.status = 'running'
+    if (event.event === 'ToolCall') {
+      toolCalls.value.push({
+        tool_call_id: String(data.tool_call_id ?? ''),
+        name: String(data.name ?? 'unknown'),
+        parameters: (data.arguments ?? {}) as Record<string, unknown>,
+        status: 'running',
+        started_at: event.timestamp,
+      })
+    } else if (event.event === 'ToolResult') {
+      const toolCall = toolCalls.value.find((item) => item.tool_call_id === data.tool_call_id)
+      if (toolCall) {
+        toolCall.status = data.success ? 'completed' : 'error'
+        toolCall.result = data.output == null ? undefined : JSON.stringify(data.output)
+        toolCall.error_code = data.error_code == null ? undefined : String(data.error_code)
+        toolCall.error_message = data.error_message == null ? undefined : String(data.error_message)
+        toolCall.completed_at = event.timestamp
+      }
+      permissionRequest.value = null
+      if (run?.status === 'waiting_permission') run.status = 'running'
+    } else if (event.event === 'PermissionRequired') {
+      const call = (data.tool_call ?? {}) as Record<string, unknown>
+      permissionRequest.value = {
+        request_id: String(data.request_id ?? ''),
+        run_id: event.run_id,
+        tool_name: String(call.name ?? 'unknown'),
+        permission: String(data.permission ?? ''),
+        parameters: (call.arguments ?? {}) as Record<string, unknown>,
+        impact: '该工具需要获得权限后才能继续执行。',
+      }
+      if (run) run.status = 'waiting_permission'
+    } else if (['RunCompleted', 'RunFailed', 'RunCancelled'].includes(event.event)) {
+      isRunning.value = false
+      permissionRequest.value = null
+      if (run) {
+        run.status = event.event === 'RunCompleted' ? 'completed' : event.event === 'RunFailed' ? 'failed' : 'cancelled'
+        run.completed_at = event.timestamp
       }
     }
   }
 
+  function subscribe(runId: string) {
+    eventStream?.cancel()
+    isRunning.value = true
+    error.value = null
+    eventStream = agentService.streamAgentEvents(runId, {
+      onEvent: processEvent,
+      onError(streamError) { error.value = streamError.message; isRunning.value = false },
+      onDone() { isRunning.value = false; eventStream = null },
+    })
+  }
+
   async function createRun(request: agentService.CreateAgentRunRequest) {
     isCreating.value = true
     try {
       const run = await agentService.createAgentRun(request)
       runs.value.unshift(run)
       activeRunId.value = run.run_id
-      events.value = [{
-        event: 'RunStarted',
-        sequence: 1,
-        run_id: run.run_id,
-        data: { task: request.task },
-        timestamp: new Date().toISOString(),
-      }]
-      isRunning.value = true
-      // Mock events streaming
-      simulateRun(run.run_id)
+      events.value = []
+      toolCalls.value = []
+      subscribe(run.run_id)
       return run
     } finally {
       isCreating.value = false
     }
   }
 
-  function simulateRun(runId: string) {
-    const runEvents: AgentEvent[] = [
-      { event: 'ThinkingDelta', sequence: 2, run_id: runId, data: { text: '我需要先搜索相关笔记...' }, timestamp: new Date().toISOString() },
-      { event: 'ToolCall', sequence: 3, run_id: runId, data: { tool_call_id: 'tc-mock-1', name: 'notes.search', parameters: { query: '红黑树', limit: 5 }, status: 'running' }, timestamp: new Date().toISOString() },
-      { event: 'ToolResult', sequence: 4, run_id: runId, data: { tool_call_id: 'tc-mock-1', name: 'notes.search', status: 'completed', result: '找到 5 条相关结果' }, timestamp: new Date().toISOString() },
-      { event: 'TextDelta', sequence: 5, run_id: runId, data: { text: '根据你的笔记，以下是...' }, timestamp: new Date().toISOString() },
-      { event: 'RunCompleted', sequence: 6, run_id: runId, data: { message: 'Task completed successfully' }, timestamp: new Date().toISOString() },
-    ]
-    let idx = 0
-    const push = () => {
-      if (idx >= runEvents.length) {
-        isRunning.value = false
-        return
-      }
-      events.value.push(runEvents[idx])
-      idx++
-      setTimeout(push, 800)
-    }
-    setTimeout(push, 500)
-  }
-
   async function cancelRun(runId: string) {
     await agentService.cancelAgentRun(runId)
     const run = runs.value.find((r) => r.run_id === runId)
     if (run) run.status = 'cancelled'
     isRunning.value = false
+    eventStream?.cancel()
+    eventStream = null
   }
 
-  async function respondPermission(decision: 'allow' | 'deny', scope: 'once' | 'session' | 'always' = 'once') {
+  async function respondPermission(decision: 'allow' | 'deny', scope: 'once' | 'session' = 'once') {
     if (!activeRunId.value || !permissionRequest.value) return
-    await agentService.respondToPermission(activeRunId.value, permissionRequest.value.request_id, decision, scope)
+    const apiDecision = decision === 'deny' ? 'deny' : scope === 'session' ? 'allow_session' : 'allow_once'
+    await agentService.respondToPermission(activeRunId.value, permissionRequest.value.request_id, apiDecision)
     permissionRequest.value = null
   }
 
@@ -133,6 +156,7 @@ export const useAgentStore = defineStore('agent', () => {
     isRunning,
     permissionRequest,
     toolCalls,
+    error,
     currentStep,
     loadTools,
     loadRuns,
diff --git a/frontend/src/stores/chat.ts b/frontend/src/stores/chat.ts
index 8af2e7c..c740ec3 100644
--- a/frontend/src/stores/chat.ts
+++ b/frontend/src/stores/chat.ts
@@ -1,7 +1,7 @@
 import { defineStore } from 'pinia'
 import { ref, computed } from 'vue'
-import type { ChatMessage, Conversation, Citation } from '@/contracts'
-import { mockConversations, mockMessages } from '@/services/chatService'
+import type { ChatMessage, Conversation } from '@/contracts'
+import { mockConversations, mockMessages, streamChat } from '@/services/chatService'
 import type { SseClient } from '@/services/sseClient'
 
 export const useChatStore = defineStore('chat', () => {
@@ -12,7 +12,7 @@ export const useChatStore = defineStore('chat', () => {
   const inputText = ref('')
   const useRag = ref(true)
   const selectedSkillId = ref<string | null>(null)
-  const selectedProviderId = ref('mock-provider')
+  const selectedProviderId = ref('mock')
   const selectedModel = ref('mock-1')
   let sseClient: SseClient | null = null
 
@@ -35,7 +35,7 @@ export const useChatStore = defineStore('chat', () => {
 
     if (!activeConversationId.value) {
       const newConv: Conversation = {
-        conversation_id,
+        conversation_id: conversationId,
         title: text.slice(0, 30),
         created_at: new Date().toISOString(),
         updated_at: new Date().toISOString(),
@@ -67,31 +67,66 @@ export const useChatStore = defineStore('chat', () => {
     }
     messages.value.push(aiMsg)
 
-    // Mock streaming
-    const fullText =
-      '这是一个模拟的 AI 回复。在实际环境中，这里会通过 SSE 接收后端 AI Core 的流式输出，基于 RAG 引擎和你的知识库生成回答，并附带来源引用。\n\n**要点总结：**\n1. 这是演示用的流式输出\n2. 实际会调用 ModelEvent SSE\n3. 支持 Citation、Tool Call 等事件\n\n你可以在设置中配置真实的模型 Provider 来启用完整功能。'
-    const citations: Citation[] = [
-      {
-        note_id: 'n-rbt',
-        block_id: 'b1',
-        file_path: '/数据结构/红黑树.md',
-        heading_path: '数据结构 / 红黑树 / 概述',
-        content: '红黑树是一种自平衡二叉搜索树...',
+    sseClient = streamChat({
+      provider_id: selectedProviderId.value,
+      model: selectedModel.value,
+      conversation_id: conversationId,
+      use_rag: useRag.value,
+      messages: messages.value
+        .filter((message) => message !== aiMsg)
+        .map((message) => ({ role: message.role, content: message.content })),
+    }, {
+      onEvent(event) {
+        if (event.event === 'TextDelta') aiMsg.content += String(event.data.text ?? '')
+        if (event.event === 'ThinkingDelta') aiMsg.thinking = `${aiMsg.thinking ?? ''}${String(event.data.text ?? '')}`
+        if (event.event === 'ToolCallStart') {
+          aiMsg.tool_calls?.push({
+            tool_call_id: String(event.data.tool_call_id ?? ''),
+            name: String(event.data.name ?? 'unknown'),
+            parameters: (event.data.arguments ?? {}) as Record<string, unknown>,
+            status: 'running',
+          })
+        }
+        if (event.event === 'ToolCallDelta') {
+          const call = aiMsg.tool_calls?.find((item) => item.tool_call_id === event.data.tool_call_id)
+          if (call && event.data.arguments && typeof event.data.arguments === 'object') {
+            Object.assign(call.parameters, event.data.arguments)
+          }
+        }
+        if (event.event === 'ToolCallEnd') {
+          const call = aiMsg.tool_calls?.find((item) => item.tool_call_id === event.data.tool_call_id)
+          if (call) call.status = 'completed'
+        }
+        if (event.event === 'Usage') {
+          const input = Number(event.data.input_tokens ?? 0)
+          const output = Number(event.data.output_tokens ?? 0)
+          aiMsg.usage = { input_tokens: input, output_tokens: output, total_tokens: input + output }
+        }
+        if (event.event === 'Citation') {
+          aiMsg.citations?.push({
+            note_id: String(event.data.note_id ?? ''), block_id: String(event.data.block_id ?? ''),
+            file_path: String(event.data.file_path ?? ''),
+            heading_path: Array.isArray(event.data.heading_path) ? event.data.heading_path.join(' / ') : String(event.data.heading_path ?? ''),
+            content: String(event.data.content ?? event.data.snippet ?? ''),
+          })
+        }
+        if (event.event === 'Error') aiMsg.content += `\n\n生成失败：${String(event.data.message ?? '未知错误')}`
       },
-    ]
-
-    let i = 0
-    const interval = setInterval(() => {
-      if (i >= fullText.length) {
-        clearInterval(interval)
+      onError(error) {
+        aiMsg.content += `\n\n连接失败：${error.message}`
         isStreaming.value = false
-        aiMsg.citations = citations
-        return
-      }
-      const chunk = fullText.slice(i, i + 3)
-      aiMsg.content += chunk
-      i += 3
-    }, 20)
+        sseClient = null
+      },
+      onDone() {
+        const conversation = conversations.value.find((item) => item.conversation_id === conversationId)
+        if (conversation) {
+          conversation.message_count = messages.value.length
+          conversation.updated_at = new Date().toISOString()
+        }
+        isStreaming.value = false
+        sseClient = null
+      },
+    })
   }
 
   function stopGeneration() {
diff --git a/frontend/src/stores/editor.ts b/frontend/src/stores/editor.ts
index f8c6b86..e5f67f3 100644
--- a/frontend/src/stores/editor.ts
+++ b/frontend/src/stores/editor.ts
@@ -30,41 +30,69 @@ export const useEditorStore = defineStore('editor', () => {
 
   function updateContent(newContent: string) {
     content.value = newContent
-    if (saveStatus.value === 'saved' || saveStatus.value === 'idle') {
-      saveStatus.value = 'dirty'
-    }
+    saveStatus.value = 'dirty'
   }
 
   let saveTimer: ReturnType<typeof setTimeout> | null = null
+  let pendingSave: Promise<void> | null = null
 
   function scheduleAutoSave(delay = 1500) {
     if (saveTimer) clearTimeout(saveTimer)
     saveTimer = setTimeout(() => {
+      saveTimer = null
       void save()
     }, delay)
   }
 
   async function save() {
     if (!currentFilePath.value) return
-    if (saveStatus.value === 'saving') return
+    if (pendingSave) return pendingSave
+    const targetPath = currentFilePath.value
+    const snapshot = content.value
     saveStatus.value = 'saving'
-    try {
-      await workspaceService.saveFileContent(currentFilePath.value, content.value)
-      saveStatus.value = 'saved'
-      lastSavedAt.value = new Date().toISOString()
-    } catch {
-      saveStatus.value = 'save_failed'
-    }
+    pendingSave = (async () => {
+      try {
+        await workspaceService.saveFileContent(targetPath, snapshot)
+        if (currentFilePath.value === targetPath) {
+          saveStatus.value = content.value === snapshot ? 'saved' : 'dirty'
+          lastSavedAt.value = new Date().toISOString()
+        }
+      } catch {
+        if (currentFilePath.value === targetPath) saveStatus.value = 'save_failed'
+      } finally {
+        pendingSave = null
+      }
+    })()
+    return pendingSave
   }
 
+  let loadVersion = 0
+
   async function loadFile(filePath: string) {
+    if (currentFilePath.value === filePath) return
+    if (saveTimer) {
+      clearTimeout(saveTimer)
+      saveTimer = null
+    }
+    if (saveStatus.value === 'conflict') {
+      throw new Error('当前文件存在编辑冲突，请处理后再切换文件。')
+    }
+    if (pendingSave) await pendingSave
+    if (saveStatus.value === 'dirty' || saveStatus.value === 'save_failed') await save()
+    if (saveStatus.value === 'dirty' || saveStatus.value === 'save_failed') {
+      throw new Error('当前文件保存失败，已阻止切换以避免内容丢失。')
+    }
+    const version = ++loadVersion
     currentFilePath.value = filePath
     saveStatus.value = 'saving'
     try {
-      content.value = await workspaceService.readFileContent(filePath)
+      const loadedContent = await workspaceService.readFileContent(filePath)
+      if (version !== loadVersion || currentFilePath.value !== filePath) return
+      content.value = loadedContent
       saveStatus.value = 'saved'
       lastSavedAt.value = new Date().toISOString()
     } catch {
+      if (version !== loadVersion || currentFilePath.value !== filePath) return
       content.value = ''
       saveStatus.value = 'idle'
     }
@@ -89,6 +117,7 @@ export const useEditorStore = defineStore('editor', () => {
   }
 
   function closeFile() {
+    loadVersion++
     if (saveTimer) clearTimeout(saveTimer)
     currentFilePath.value = null
     currentNoteId.value = null
@@ -98,6 +127,12 @@ export const useEditorStore = defineStore('editor', () => {
     highlightBlockId.value = null
   }
 
+  function renameFilePath(oldPath: string, newPath: string) {
+    if (currentFilePath.value === oldPath || currentFilePath.value?.startsWith(`${oldPath}/`)) {
+      currentFilePath.value = `${newPath}${currentFilePath.value.slice(oldPath.length)}`
+    }
+  }
+
   return {
     mode,
     content,
@@ -118,5 +153,6 @@ export const useEditorStore = defineStore('editor', () => {
     highlightBlock,
     setExternalChanged,
     closeFile,
+    renameFilePath,
   }
 })
diff --git a/frontend/src/stores/plugin.ts b/frontend/src/stores/plugin.ts
index d1fd8e1..7e742e7 100644
--- a/frontend/src/stores/plugin.ts
+++ b/frontend/src/stores/plugin.ts
@@ -1,12 +1,13 @@
 import { defineStore } from 'pinia'
 import { ref, computed } from 'vue'
 import type { Plugin } from '@/contracts'
-import { mockPlugins } from '@/services/pluginService'
+import * as pluginService from '@/services/pluginService'
 
 export const usePluginStore = defineStore('plugin', () => {
-  const plugins = ref<Plugin[]>(mockPlugins)
+  const plugins = ref<Plugin[]>(pluginService.mockPlugins)
   const selectedPluginId = ref<string | null>(null)
   const isLoading = ref(false)
+  const error = ref<string | null>(null)
 
   const selectedPlugin = computed(() =>
     plugins.value.find((p) => p.plugin_id === selectedPluginId.value) || null
@@ -19,8 +20,10 @@ export const usePluginStore = defineStore('plugin', () => {
   async function loadPlugins() {
     isLoading.value = true
     try {
-      const { listPlugins } = await import('@/services/pluginService')
-      plugins.value = await listPlugins()
+      plugins.value = await pluginService.listPlugins()
+      error.value = null
+    } catch (reason) {
+      error.value = reason instanceof Error ? reason.message : 'Plugin 加载失败'
     } finally {
       isLoading.value = false
     }
@@ -30,23 +33,34 @@ export const usePluginStore = defineStore('plugin', () => {
     selectedPluginId.value = pluginId
   }
 
+  async function installPlugin(packagePath: string) {
+    const installed = await pluginService.installPlugin(packagePath)
+    const index = plugins.value.findIndex((plugin) => plugin.plugin_id === installed.plugin_id)
+    if (index >= 0) plugins.value[index] = installed
+    else plugins.value.unshift(installed)
+    selectedPluginId.value = installed.plugin_id
+  }
+
+  async function grantPermissions(pluginId: string, permissions: string[]) {
+    const updated = await pluginService.grantPluginPermissions(pluginId, permissions)
+    const index = plugins.value.findIndex((plugin) => plugin.plugin_id === pluginId)
+    if (index >= 0) plugins.value[index] = updated
+  }
+
   async function enablePlugin(pluginId: string) {
-    const plugin = plugins.value.find((p) => p.plugin_id === pluginId)
-    if (plugin) {
-      plugin.enabled = true
-      plugin.status = 'ready'
-    }
+    const updated = await pluginService.enablePlugin(pluginId)
+    const index = plugins.value.findIndex((plugin) => plugin.plugin_id === pluginId)
+    if (index >= 0) plugins.value[index] = updated
   }
 
   async function disablePlugin(pluginId: string) {
-    const plugin = plugins.value.find((p) => p.plugin_id === pluginId)
-    if (plugin) {
-      plugin.enabled = false
-      plugin.status = 'disabled'
-    }
+    const updated = await pluginService.disablePlugin(pluginId)
+    const index = plugins.value.findIndex((plugin) => plugin.plugin_id === pluginId)
+    if (index >= 0) plugins.value[index] = updated
   }
 
   async function uninstallPlugin(pluginId: string) {
+    await pluginService.uninstallPlugin(pluginId)
     const idx = plugins.value.findIndex((p) => p.plugin_id === pluginId)
     if (idx > -1) plugins.value.splice(idx, 1)
     if (selectedPluginId.value === pluginId) selectedPluginId.value = null
@@ -60,8 +74,11 @@ export const usePluginStore = defineStore('plugin', () => {
     readyPlugins,
     errorPlugins,
     isLoading,
+    error,
     loadPlugins,
     selectPlugin,
+    installPlugin,
+    grantPermissions,
     enablePlugin,
     disablePlugin,
     uninstallPlugin,
diff --git a/frontend/src/stores/provider.ts b/frontend/src/stores/provider.ts
index 1c8f614..f644a45 100644
--- a/frontend/src/stores/provider.ts
+++ b/frontend/src/stores/provider.ts
@@ -1,13 +1,14 @@
 import { defineStore } from 'pinia'
 import { ref, computed } from 'vue'
 import type { ProviderConfig, ModelInfo } from '@/contracts'
-import { mockProviders, mockModels } from '@/services/providerService'
+import { createProvider, deleteProvider as deleteProviderRequest, listModels, listProviders, mockProviders, mockModels, testProvider as testProviderRequest, updateProvider as updateProviderRequest } from '@/services/providerService'
 
 export const useProviderStore = defineStore('provider', () => {
   const providers = ref<ProviderConfig[]>(mockProviders)
   const modelsByProvider = ref<Record<string, ModelInfo[]>>(mockModels)
-  const defaultProviderId = ref('mock-provider')
+  const defaultProviderId = ref('mock')
   const isLoading = ref(false)
+  const error = ref<string | null>(null)
 
   const enabledProviders = computed(() => providers.value.filter((p) => p.enabled))
   const defaultProvider = computed(() =>
@@ -17,45 +18,41 @@ export const useProviderStore = defineStore('provider', () => {
   async function loadProviders() {
     isLoading.value = true
     try {
-      const { listProviders } = await import('@/services/providerService')
       providers.value = await listProviders()
+      error.value = null
+    } catch (reason) {
+      error.value = reason instanceof Error ? reason.message : 'Provider 加载失败'
     } finally {
       isLoading.value = false
     }
   }
 
   async function loadModels(providerId: string) {
-    const { listModels } = await import('@/services/providerService')
     modelsByProvider.value[providerId] = await listModels(providerId)
   }
 
-  async function addProvider(data: Omit<ProviderConfig, 'provider_id'> & { api_key?: string }) {
-    const newProvider: ProviderConfig = {
-      ...data,
-      provider_id: `prov-${Date.now()}`,
-    }
+  async function addProvider(data: Omit<ProviderConfig, 'provider_id'>) {
+    const newProvider = await createProvider(data)
     providers.value.push(newProvider)
     return newProvider
   }
 
   async function updateProvider(providerId: string, data: Partial<ProviderConfig>) {
-    const p = providers.value.find((p) => p.provider_id === providerId)
-    if (p) Object.assign(p, data)
+    const updated = await updateProviderRequest(providerId, data)
+    const index = providers.value.findIndex((provider) => provider.provider_id === providerId)
+    if (index >= 0) providers.value[index] = updated
   }
 
   async function deleteProvider(providerId: string) {
+    await deleteProviderRequest(providerId)
     const idx = providers.value.findIndex((p) => p.provider_id === providerId)
     if (idx > -1) providers.value.splice(idx, 1)
     delete modelsByProvider.value[providerId]
   }
 
   async function testProvider(providerId: string): Promise<{ success: boolean; latency_ms?: number; error?: string }> {
-    await new Promise((r) => setTimeout(r, 1000))
-    const p = providers.value.find((p) => p.provider_id === providerId)
-    if (p?.enabled && p.has_credential) {
-      return { success: true, latency_ms: 230 + Math.floor(Math.random() * 200) }
-    }
-    return { success: false, error: '认证失败，请检查 API Key' }
+    const result = await testProviderRequest(providerId)
+    return { success: result.success, latency_ms: result.latency_ms, error: result.error_message }
   }
 
   function setDefaultProvider(providerId: string) {
@@ -69,6 +66,7 @@ export const useProviderStore = defineStore('provider', () => {
     enabledProviders,
     defaultProvider,
     isLoading,
+    error,
     loadProviders,
     loadModels,
     addProvider,
diff --git a/frontend/src/stores/search.ts b/frontend/src/stores/search.ts
index 9cb4d62..754563a 100644
--- a/frontend/src/stores/search.ts
+++ b/frontend/src/stores/search.ts
@@ -2,6 +2,12 @@ import { defineStore } from 'pinia'
 import { ref } from 'vue'
 import type { SearchResult, SearchRequest } from '@/contracts'
 import * as searchService from '@/services/searchService'
+import { ApiErrorClass } from '@/services/apiClient'
+
+const VECTOR_ERROR_CODES = new Set([
+  'VECTOR_UNAVAILABLE', 'EMBEDDING_UNAVAILABLE', 'INDEX_UNAVAILABLE',
+  'MODEL_NOT_FOUND', 'MODEL_CAPABILITY_MISMATCH', 'PROVIDER_UNAVAILABLE',
+])
 
 export const useSearchStore = defineStore('search', () => {
   const query = ref('')
@@ -19,16 +25,33 @@ export const useSearchStore = defineStore('search', () => {
     mode.value = request.mode || 'hybrid'
     isSearching.value = true
     error.value = null
+    vectorUnavailable.value = false
 
     try {
-      const resp = await searchService.searchMock(request.query, request.mode || 'hybrid')
+      const resp = await searchService.search(request)
       results.value = resp.results
       total.value = resp.total
       selectedIndex.value = 0
-    } catch (e: any) {
-      error.value = e.message || '搜索失败'
-      results.value = []
-      total.value = 0
+    } catch (reason) {
+      const canFallback = mode.value !== 'fts' && reason instanceof ApiErrorClass && VECTOR_ERROR_CODES.has(reason.code)
+      if (canFallback) {
+        try {
+          const fallback = await searchService.search({ ...request, mode: 'fts' })
+          results.value = fallback.results
+          total.value = fallback.total
+          mode.value = 'fts'
+          vectorUnavailable.value = true
+          selectedIndex.value = 0
+        } catch (fallbackError) {
+          error.value = fallbackError instanceof Error ? fallbackError.message : '全文检索降级失败'
+          results.value = []
+          total.value = 0
+        }
+      } else {
+        error.value = reason instanceof Error ? reason.message : '搜索失败'
+        results.value = []
+        total.value = 0
+      }
     } finally {
       isSearching.value = false
     }
diff --git a/frontend/src/stores/settings.ts b/frontend/src/stores/settings.ts
index 81743fb..b2fce1c 100644
--- a/frontend/src/stores/settings.ts
+++ b/frontend/src/stores/settings.ts
@@ -1,22 +1,26 @@
 import { defineStore } from 'pinia'
-import { ref } from 'vue'
+import { ref, watch } from 'vue'
 import type { AiCoreStatus, IndexStatus } from '@/contracts'
 import { mockIndexStatus } from '@/services/indexService'
+import * as indexService from '@/services/indexService'
+import * as systemService from '@/services/systemService'
 
 export const useSettingsStore = defineStore('settings', () => {
+  const saved = (() => {
+    try { return JSON.parse(localStorage.getItem('app-settings') ?? '{}') as Record<string, unknown> }
+    catch { localStorage.removeItem('app-settings'); return {} }
+  })()
   // General
-  const restoreLastVault = ref(true)
-  const autoSaveInterval = ref(1500)
-  const language = ref<'zh-CN' | 'en'>('zh-CN')
+  const restoreLastVault = ref(saved.restoreLastVault !== false)
+  const autoSaveInterval = ref(typeof saved.autoSaveInterval === 'number' ? saved.autoSaveInterval : 1500)
+  const language = ref<'zh-CN' | 'en'>(saved.language === 'en' ? 'en' : 'zh-CN')
   const appVersion = ref('0.1.0')
   const aiCoreVersion = ref('0.1.0')
 
   // Editor
-  const defaultEditorMode = ref<'wysiwyg' | 'source'>('wysiwyg')
-  const editorFontSize = ref(15)
-  const editorLineHeight = ref(1.7)
-  const editorLineWidth = ref(80)
-  const spellCheck = ref(false)
+  const defaultEditorMode = ref<'wysiwyg' | 'source'>(saved.defaultEditorMode === 'source' ? 'source' : 'wysiwyg')
+  const editorLineWidth = ref(typeof saved.editorLineWidth === 'number' ? saved.editorLineWidth : 80)
+  const spellCheck = ref(saved.spellCheck === true)
 
   // AI Core
   const aiCoreStatus = ref<AiCoreStatus>('running')
@@ -37,6 +41,28 @@ export const useSettingsStore = defineStore('settings', () => {
     'network.request': 'confirm',
     'secrets.use': 'confirm',
   })
+  const diagnosticsError = ref<string | null>(null)
+
+  watch(() => ({
+    restoreLastVault: restoreLastVault.value, autoSaveInterval: autoSaveInterval.value,
+    language: language.value, defaultEditorMode: defaultEditorMode.value,
+    editorLineWidth: editorLineWidth.value, spellCheck: spellCheck.value,
+  }), (value) => localStorage.setItem('app-settings', JSON.stringify(value)), { deep: true })
+
+  async function loadDiagnostics() {
+    try {
+      const [health, status, index] = await Promise.all([
+        systemService.healthCheck(), systemService.getStatus(), indexService.getIndexStatus(),
+      ])
+      aiCoreStatus.value = health.status === 'ok' ? 'running' : 'error'
+      aiCoreVersion.value = status.version
+      indexStatus.value = index
+      diagnosticsError.value = null
+    } catch (reason) {
+      aiCoreStatus.value = 'error'
+      diagnosticsError.value = reason instanceof Error ? reason.message : '诊断信息加载失败'
+    }
+  }
 
   function setAutoSaveInterval(ms: number) {
     autoSaveInterval.value = ms
@@ -63,9 +89,13 @@ export const useSettingsStore = defineStore('settings', () => {
 
   async function rebuildIndex(scope: 'full' | 'fts' | 'vector' = 'full') {
     indexStatus.value.status = 'indexing'
-    setTimeout(() => {
-      indexStatus.value.status = 'idle'
-    }, 3000)
+    try {
+      await indexService.rebuildIndex(scope)
+      indexStatus.value = await indexService.getIndexStatus()
+    } catch (reason) {
+      indexStatus.value.status = 'error'
+      indexStatus.value.error = reason instanceof Error ? reason.message : '索引重建失败'
+    }
   }
 
   return {
@@ -75,14 +105,14 @@ export const useSettingsStore = defineStore('settings', () => {
     appVersion,
     aiCoreVersion,
     defaultEditorMode,
-    editorFontSize,
-    editorLineHeight,
     editorLineWidth,
     spellCheck,
     aiCoreStatus,
     aiCoreAddress,
     indexStatus,
     permissionPolicy,
+    diagnosticsError,
+    loadDiagnostics,
     setAutoSaveInterval,
     setDefaultEditorMode,
     setPermission,
diff --git a/frontend/src/stores/skill.ts b/frontend/src/stores/skill.ts
index 7269ead..8aed4b3 100644
--- a/frontend/src/stores/skill.ts
+++ b/frontend/src/stores/skill.ts
@@ -1,12 +1,13 @@
 import { defineStore } from 'pinia'
 import { ref, computed } from 'vue'
 import type { Skill } from '@/contracts'
-import { mockSkills } from '@/services/skillService'
+import * as skillService from '@/services/skillService'
 
 export const useSkillStore = defineStore('skill', () => {
-  const skills = ref<Skill[]>(mockSkills)
+  const skills = ref<Skill[]>(skillService.mockSkills)
   const selectedSkillId = ref<string | null>(null)
   const isLoading = ref(false)
+  const error = ref<string | null>(null)
 
   const selectedSkill = computed(() =>
     skills.value.find((s) => s.skill_id === selectedSkillId.value) || null
@@ -19,8 +20,10 @@ export const useSkillStore = defineStore('skill', () => {
   async function loadSkills() {
     isLoading.value = true
     try {
-      const { listSkills } = await import('@/services/skillService')
-      skills.value = await listSkills()
+      skills.value = await skillService.listSkills()
+      error.value = null
+    } catch (reason) {
+      error.value = reason instanceof Error ? reason.message : 'Skill 加载失败'
     } finally {
       isLoading.value = false
     }
@@ -30,23 +33,28 @@ export const useSkillStore = defineStore('skill', () => {
     selectedSkillId.value = skillId
   }
 
+  async function installSkill(packagePath: string) {
+    const installed = await skillService.installSkill(packagePath)
+    const index = skills.value.findIndex((skill) => skill.skill_id === installed.skill_id)
+    if (index >= 0) skills.value[index] = installed
+    else skills.value.unshift(installed)
+    selectedSkillId.value = installed.skill_id
+  }
+
   async function enableSkill(skillId: string) {
-    const skill = skills.value.find((s) => s.skill_id === skillId)
-    if (skill) {
-      skill.enabled = true
-      skill.status = 'ready'
-    }
+    const updated = await skillService.enableSkill(skillId)
+    const index = skills.value.findIndex((skill) => skill.skill_id === skillId)
+    if (index >= 0) skills.value[index] = updated
   }
 
   async function disableSkill(skillId: string) {
-    const skill = skills.value.find((s) => s.skill_id === skillId)
-    if (skill) {
-      skill.enabled = false
-      skill.status = 'disabled'
-    }
+    const updated = await skillService.disableSkill(skillId)
+    const index = skills.value.findIndex((skill) => skill.skill_id === skillId)
+    if (index >= 0) skills.value[index] = updated
   }
 
   async function uninstallSkill(skillId: string) {
+    await skillService.uninstallSkill(skillId)
     const idx = skills.value.findIndex((s) => s.skill_id === skillId)
     if (idx > -1) skills.value.splice(idx, 1)
     if (selectedSkillId.value === skillId) selectedSkillId.value = null
@@ -60,8 +68,10 @@ export const useSkillStore = defineStore('skill', () => {
     installedSkills,
     readySkills,
     isLoading,
+    error,
     loadSkills,
     selectSkill,
+    installSkill,
     enableSkill,
     disableSkill,
     uninstallSkill,
diff --git a/frontend/src/stores/task.ts b/frontend/src/stores/task.ts
index 8ed4140..8a36250 100644
--- a/frontend/src/stores/task.ts
+++ b/frontend/src/stores/task.ts
@@ -1,7 +1,7 @@
 import { defineStore } from 'pinia'
 import { ref, computed } from 'vue'
 import type { TaskItem, TaskStatus, TaskPriority, TaskSource } from '@/contracts'
-import { mockTasks } from '@/services/taskService'
+import { createTask as createTaskRequest, deleteTask as deleteTaskRequest, listTasks, mockTasks, updateTask as updateTaskRequest } from '@/services/taskService'
 
 export const useTaskStore = defineStore('task', () => {
   const tasks = ref<TaskItem[]>(mockTasks)
@@ -9,6 +9,7 @@ export const useTaskStore = defineStore('task', () => {
   const filterPriority = ref<TaskPriority | 'all'>('all')
   const filterSource = ref<TaskSource | 'all'>('all')
   const isLoading = ref(false)
+  const error = ref<string | null>(null)
 
   const filteredTasks = computed(() => {
     return tasks.value.filter((t) => {
@@ -26,40 +27,32 @@ export const useTaskStore = defineStore('task', () => {
   async function loadTasks() {
     isLoading.value = true
     try {
-      const { listTasks } = await import('@/services/taskService')
       const resp = await listTasks()
       tasks.value = resp.items
+      error.value = null
+    } catch (reason) {
+      error.value = reason instanceof Error ? reason.message : '任务加载失败'
     } finally {
       isLoading.value = false
     }
   }
 
   async function createTask(data: { title: string; description?: string; priority?: TaskPriority; due_date?: string; note_id?: string }) {
-    const newTask: TaskItem = {
-      task_id: `t-${Date.now()}`,
-      title: data.title,
-      description: data.description,
-      status: 'todo',
-      priority: data.priority || 'medium',
-      due_date: data.due_date,
-      note_id: data.note_id,
-      source: 'user',
-      created_at: new Date().toISOString(),
-      updated_at: new Date().toISOString(),
-    }
+    const newTask = await createTaskRequest(data)
     tasks.value.unshift(newTask)
     return newTask
   }
 
-  async function updateTask(taskId: string, data: Partial<Pick<TaskItem, 'title' | 'description' | 'status' | 'priority' | 'due_date'>>) {
+  async function updateTask(taskId: string, data: Partial<Pick<TaskItem, 'title' | 'description' | 'status' | 'due_date'>> & { note_id?: string | null }) {
     const task = tasks.value.find((t) => t.task_id === taskId)
     if (task) {
-      Object.assign(task, data)
-      task.updated_at = new Date().toISOString()
+      const updated = await updateTaskRequest(taskId, data)
+      Object.assign(task, updated, data)
     }
   }
 
   async function deleteTask(taskId: string) {
+    await deleteTaskRequest(taskId)
     const idx = tasks.value.findIndex((t) => t.task_id === taskId)
     if (idx > -1) tasks.value.splice(idx, 1)
   }
@@ -78,6 +71,7 @@ export const useTaskStore = defineStore('task', () => {
     inProgressTasks,
     doneTasks,
     isLoading,
+    error,
     loadTasks,
     createTask,
     updateTask,
diff --git a/frontend/src/stores/theme.ts b/frontend/src/stores/theme.ts
index 940b5fd..5b591f6 100644
--- a/frontend/src/stores/theme.ts
+++ b/frontend/src/stores/theme.ts
@@ -14,6 +14,7 @@ export const useThemeStore = defineStore('theme', () => {
   const fontEditorSize = ref(15)
   const fontEditorFamily = ref('system-ui')
   const lineHeight = ref(1.7)
+  let appearanceHydrated = false
 
   const currentTheme = computed(() =>
     themes.value.find((t) => t.theme_id === currentThemeId.value) || themes.value[0]
@@ -37,7 +38,18 @@ export const useThemeStore = defineStore('theme', () => {
   }
 
   function initTheme() {
+    const savedAppearance = localStorage.getItem('editor-appearance')
+    if (savedAppearance) {
+      try {
+        const value = JSON.parse(savedAppearance) as { size?: number; family?: string; lineHeight?: number }
+        if (value.size) fontEditorSize.value = value.size
+        if (value.family) fontEditorFamily.value = value.family
+        if (value.lineHeight) lineHeight.value = value.lineHeight
+      } catch { localStorage.removeItem('editor-appearance') }
+    }
     const saved = localStorage.getItem('theme')
+    appearanceHydrated = true
+    persistAppearance()
     if (saved && themes.value.find((t) => t.theme_id === saved)) {
       applyTheme(saved)
       return
@@ -57,13 +69,24 @@ export const useThemeStore = defineStore('theme', () => {
     lineHeight.value = 1.7
   }
 
+  const persistAppearance = () => localStorage.setItem('editor-appearance', JSON.stringify({
+    size: fontEditorSize.value, family: fontEditorFamily.value, lineHeight: lineHeight.value,
+  }))
+
   watch(fontEditorSize, (v) => {
     document.documentElement.style.setProperty('--font-editor-size', `${v}px`)
-  })
+    if (appearanceHydrated) persistAppearance()
+  }, { immediate: true })
 
   watch(lineHeight, (v) => {
     document.documentElement.style.setProperty('--font-editor-line-height', String(v))
-  })
+    if (appearanceHydrated) persistAppearance()
+  }, { immediate: true })
+
+  watch(fontEditorFamily, (v) => {
+    document.documentElement.style.setProperty('--font-editor-sans', v)
+    if (appearanceHydrated) persistAppearance()
+  }, { immediate: true })
 
   return {
     themes,
diff --git a/frontend/src/stores/workspace.ts b/frontend/src/stores/workspace.ts
index 56ae0db..de6f5d2 100644
--- a/frontend/src/stores/workspace.ts
+++ b/frontend/src/stores/workspace.ts
@@ -69,6 +69,7 @@ export const useWorkspaceStore = defineStore('workspace', () => {
       vaultName.value = info.name
       fileTree.value = await workspaceService.getFileTree()
       hasVault.value = true
+      localStorage.setItem('last-vault-path', info.path)
     } finally {
       isLoading.value = false
     }
@@ -82,12 +83,17 @@ export const useWorkspaceStore = defineStore('workspace', () => {
       vaultName.value = info.name
       fileTree.value = await workspaceService.getFileTree()
       hasVault.value = true
+      localStorage.setItem('last-vault-path', info.path)
     } finally {
       isLoading.value = false
     }
   }
 
   function addFileToTree(parentPath: string, file: FileNode) {
+    if (parentPath === '/' || parentPath === '') {
+      fileTree.value.push(file)
+      return
+    }
     const parent = findNodeByPath(fileTree.value, parentPath)
     if (parent?.children) {
       parent.children.push(file)
@@ -109,6 +115,32 @@ export const useWorkspaceStore = defineStore('workspace', () => {
     remove(fileTree.value)
   }
 
+  function renamePath(oldPath: string, newPath: string, newName: string) {
+    const node = findNodeByPath(fileTree.value, oldPath)
+    if (!node) return
+    const updateNodePath = (current: FileNode) => {
+      if (current.path === oldPath) current.name = newName
+      if (current.path === oldPath || current.path.startsWith(`${oldPath}/`)) {
+        current.path = `${newPath}${current.path.slice(oldPath.length)}`
+      }
+      current.children?.forEach(updateNodePath)
+    }
+    updateNodePath(node)
+    openFiles.value = openFiles.value.map((path) =>
+      path === oldPath || path.startsWith(`${oldPath}/`) ? `${newPath}${path.slice(oldPath.length)}` : path
+    )
+    if (activeFilePath.value && (activeFilePath.value === oldPath || activeFilePath.value.startsWith(`${oldPath}/`))) {
+      activeFilePath.value = `${newPath}${activeFilePath.value.slice(oldPath.length)}`
+    }
+  }
+
+  function closePath(path: string) {
+    const activeWasRemoved = Boolean(activeFilePath.value && (activeFilePath.value === path || activeFilePath.value.startsWith(`${path}/`)))
+    openFiles.value = openFiles.value.filter((openPath) => openPath !== path && !openPath.startsWith(`${path}/`))
+    if (activeWasRemoved) activeFilePath.value = openFiles.value.at(-1) ?? null
+    return activeWasRemoved
+  }
+
   return {
     vaultPath,
     vaultName,
@@ -128,5 +160,7 @@ export const useWorkspaceStore = defineStore('workspace', () => {
     createVault,
     addFileToTree,
     removeFromTree,
+    renamePath,
+    closePath,
   }
 })
diff --git a/frontend/src/styles/features.css b/frontend/src/styles/features.css
new file mode 100644
index 0000000..10ea4b9
--- /dev/null
+++ b/frontend/src/styles/features.css
@@ -0,0 +1,108 @@
+.feature-page {
+  height: 100%;
+  overflow: auto;
+  padding: var(--space-2xl);
+  background: var(--color-background-primary);
+  user-select: text;
+}
+
+.feature-header {
+  display: flex;
+  align-items: flex-start;
+  justify-content: space-between;
+  gap: var(--space-lg);
+  margin-bottom: var(--space-xl);
+}
+
+.feature-header h1 { font-size: var(--font-size-3xl); line-height: 1.2; }
+.feature-header p { margin-top: var(--space-xs); color: var(--color-text-secondary); }
+.feature-actions, .inline-actions { display: flex; align-items: center; flex-wrap: wrap; gap: var(--space-sm); }
+.feature-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: var(--space-lg); }
+.split-view { display: grid; grid-template-columns: minmax(260px, .8fr) minmax(360px, 1.7fr); gap: var(--space-lg); min-height: 0; }
+
+.panel, .item-card {
+  border: 1px solid var(--color-border-default);
+  border-radius: var(--radius-lg);
+  background: var(--color-surface-primary);
+  box-shadow: var(--shadow-sm);
+}
+
+.panel { padding: var(--space-xl); }
+.item-card { padding: var(--space-lg); transition: border-color var(--motion-fast), transform var(--motion-fast); }
+.item-card:hover { border-color: var(--color-accent-secondary); }
+.item-card.selected { border-color: var(--color-accent-primary); box-shadow: 0 0 0 2px var(--color-accent-soft); }
+.panel-title { margin-bottom: var(--space-md); font-size: var(--font-size-xl); }
+.muted { color: var(--color-text-secondary); }
+.subtle { color: var(--color-text-tertiary); font-size: var(--font-size-sm); }
+
+.button-primary, .button-secondary, .button-danger, .icon-button {
+  min-height: 34px;
+  padding: 0 var(--space-md);
+  border: 1px solid transparent;
+  border-radius: var(--radius-md);
+  font-weight: 600;
+}
+
+.button-primary { background: var(--color-accent-primary); color: var(--color-text-inverse); }
+.button-primary:hover { background: var(--color-accent-primary-hover); }
+.button-secondary { border-color: var(--color-border-default); background: var(--color-surface-primary); }
+.button-secondary:hover, .icon-button:hover { background: var(--color-background-hover); }
+.button-danger { background: var(--color-error-soft); color: var(--color-error); }
+button:disabled { cursor: not-allowed; opacity: .55; }
+
+.field { display: grid; gap: var(--space-xs); }
+.field label { color: var(--color-text-secondary); font-size: var(--font-size-sm); font-weight: 600; }
+.input, .select, .textarea {
+  width: 100%;
+  border: 1px solid var(--color-border-default);
+  border-radius: var(--radius-md);
+  outline: none;
+  background: var(--color-background-primary);
+  color: var(--color-text-primary);
+}
+.input, .select { height: 36px; padding: 0 var(--space-md); }
+.textarea { min-height: 100px; padding: var(--space-md); resize: vertical; }
+.input:focus, .select:focus, .textarea:focus { border-color: var(--color-border-focus); box-shadow: 0 0 0 2px var(--color-accent-soft); }
+.form-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: var(--space-md); }
+
+.badge {
+  display: inline-flex;
+  align-items: center;
+  min-height: 22px;
+  padding: 0 var(--space-sm);
+  border-radius: var(--radius-full);
+  background: var(--color-background-tertiary);
+  color: var(--color-text-secondary);
+  font-size: var(--font-size-xs);
+  font-weight: 600;
+}
+.badge.success { background: var(--color-success-soft); color: var(--color-success); }
+.badge.warning { background: var(--color-warning-soft); color: var(--color-warning); }
+.badge.error { background: var(--color-error-soft); color: var(--color-error); }
+.badge.info { background: var(--color-info-soft); color: var(--color-info); }
+.tag-list { display: flex; flex-wrap: wrap; gap: var(--space-xs); }
+
+.empty-state { display: grid; place-items: center; min-height: 220px; padding: var(--space-2xl); text-align: center; color: var(--color-text-secondary); }
+.empty-state strong { display: block; margin-bottom: var(--space-xs); color: var(--color-text-primary); font-size: var(--font-size-xl); }
+.error-banner { margin-bottom: var(--space-lg); padding: var(--space-md); border-radius: var(--radius-md); background: var(--color-error-soft); color: var(--color-error); }
+.notice-banner { margin-bottom: var(--space-lg); padding: var(--space-md); border-radius: var(--radius-md); background: var(--color-info-soft); color: var(--color-info); }
+
+.sidebar-panel { padding: var(--space-md); }
+.sidebar-panel .input, .sidebar-panel .select { margin-bottom: var(--space-sm); }
+.sidebar-list { display: grid; gap: var(--space-xs); }
+.sidebar-list-item { padding: var(--space-sm); border-radius: var(--radius-md); cursor: pointer; }
+.sidebar-list-item:hover, .sidebar-list-item.active { background: var(--color-background-hover); }
+
+.modal-backdrop { position: fixed; inset: 0; z-index: var(--z-modal); display: grid; place-items: center; padding: var(--space-xl); background: var(--color-background-overlay); }
+.modal { width: min(560px, 100%); max-height: 85vh; overflow: auto; padding: var(--space-xl); border-radius: var(--radius-lg); background: var(--color-surface-elevated); box-shadow: var(--shadow-xl); }
+.modal h2 { margin-bottom: var(--space-lg); }
+.modal form { display: grid; gap: var(--space-md); }
+
+.settings-nav { display: flex; flex-wrap: wrap; gap: var(--space-xs); margin-bottom: var(--space-xl); border-bottom: 1px solid var(--color-border-default); }
+.settings-nav button { padding: var(--space-sm) var(--space-md); border-bottom: 2px solid transparent; color: var(--color-text-secondary); }
+.settings-nav button.active { border-color: var(--color-accent-primary); color: var(--color-accent-primary); }
+
+@media (max-width: 900px) {
+  .feature-page { padding: var(--space-lg); }
+  .split-view { grid-template-columns: 1fr; }
+}
diff --git a/frontend/src/styles/tokens.css b/frontend/src/styles/tokens.css
index 368ac80..8e3156b 100644
--- a/frontend/src/styles/tokens.css
+++ b/frontend/src/styles/tokens.css
@@ -158,6 +158,26 @@
   --shadow-xl: 0 16px 48px rgba(0, 0, 0, 0.6);
 }
 
+[data-theme='sepia'] {
+  --color-background-primary: #fbf3df;
+  --color-background-secondary: #f4e8ca;
+  --color-background-tertiary: #eadbb8;
+  --color-background-hover: #eee0bf;
+  --color-background-active: #e3d1aa;
+  --color-surface-primary: #fff8e8;
+  --color-surface-secondary: #f8edd3;
+  --color-surface-elevated: #fffaf0;
+  --color-text-primary: #40372b;
+  --color-text-secondary: #746653;
+  --color-text-tertiary: #9a8a72;
+  --color-border-default: #ddcfad;
+  --color-border-subtle: #eadfc4;
+  --color-accent-primary: #8a5b32;
+  --color-accent-primary-hover: #704724;
+  --color-accent-soft: #edddbd;
+  --color-text-link: #7b512e;
+}
+
 * {
   box-sizing: border-box;
   margin: 0;
diff --git a/frontend/src/utils/markdown.ts b/frontend/src/utils/markdown.ts
new file mode 100644
index 0000000..1e391c2
--- /dev/null
+++ b/frontend/src/utils/markdown.ts
@@ -0,0 +1,9 @@
+import DOMPurify from 'dompurify'
+import { marked } from 'marked'
+
+marked.setOptions({ gfm: true, breaks: true })
+
+export function renderMarkdown(source: string): string {
+  const html = marked.parse(source, { async: false }) as string
+  return DOMPurify.sanitize(html, { USE_PROFILES: { html: true } })
+}
diff --git a/frontend/tsconfig.app.json b/frontend/tsconfig.app.json
index 4d16005..4c5cfb1 100644
--- a/frontend/tsconfig.app.json
+++ b/frontend/tsconfig.app.json
@@ -11,6 +11,10 @@
     "esModuleInterop": true,
     "lib": ["ES2022", "DOM", "DOM.Iterable"],
     "types": ["vite/client"],
+    "baseUrl": ".",
+    "paths": {
+      "@/*": ["src/*"]
+    },
     "noEmit": true
   },
   "include": ["src/**/*.ts", "src/**/*.vue"]