From 7d80a6e2ec9d3adc7335a459da761ce3d486e982 Mon Sep 17 00:00:00 2001
From: "DESKTOP-72TV0V4\\caoxiaozhu" <leocaoxiaozhu@163.com>
Date: Sun, 22 Mar 2026 13:48:16 +0800
Subject: [PATCH] Add brain and chat workspace views

Expand the frontend with brain, graph, and chat workspace updates so the
new backend orchestration and memory features have matching screens.
These changes also wire the new APIs into routing and add focused view
and routing tests.

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
---
 frontend/.env.example                         |   2 +-
 frontend/src/api/conversation.ts              | 106 +-
 frontend/src/api/document.ts                  |  25 +-
 frontend/src/api/index.ts                     |  12 +-
 frontend/src/api/system.ts                    |  14 +
 frontend/src/app/navigation/nav.ts            |   2 +-
 frontend/src/app/router/routes.ts             |   5 +
 .../src/components/brain/GraphProjection.vue  | 500 +++++++++
 .../components/chat/OrchestrationPanel.vue    | 555 ++++++++++
 .../components/chat/TelemetrySparkline.vue    |  78 ++
 frontend/src/pages/app/layout.vue             |  16 +-
 frontend/src/pages/brain/brainEmbed.test.ts   |  14 +
 frontend/src/pages/brain/brainRouting.test.ts |  18 +
 frontend/src/pages/brain/index.vue            |   7 +
 .../chat/composables/useChatView.test.ts      | 168 ++++
 .../src/pages/chat/composables/useChatView.ts | 394 +++++++-
 frontend/src/pages/chat/index.vue             | 947 +++++++++++++++---
 frontend/src/pages/graph/index.vue            | 465 +--------
 frontend/src/pages/knowledge/index.vue        | 366 ++++++-
 frontend/src/stores/auth.ts                   |  52 +-
 frontend/src/stores/conversation.ts           |   7 +-
 21 files changed, 3095 insertions(+), 658 deletions(-)
 create mode 100644 frontend/src/api/system.ts
 create mode 100644 frontend/src/components/brain/GraphProjection.vue
 create mode 100644 frontend/src/components/chat/OrchestrationPanel.vue
 create mode 100644 frontend/src/components/chat/TelemetrySparkline.vue
 create mode 100644 frontend/src/pages/brain/brainEmbed.test.ts
 create mode 100644 frontend/src/pages/brain/brainRouting.test.ts
 create mode 100644 frontend/src/pages/brain/index.vue
 create mode 100644 frontend/src/pages/chat/composables/useChatView.test.ts

diff --git a/frontend/.env.example b/frontend/.env.example
index 5934e2e..ecc517b 100644
--- a/frontend/.env.example
+++ b/frontend/.env.example
@@ -1 +1 @@
-VITE_API_URL=http://localhost:8000
+VITE_API_URL=http://localhost:9528
diff --git a/frontend/src/api/conversation.ts b/frontend/src/api/conversation.ts
index 6815826..41acf20 100644
--- a/frontend/src/api/conversation.ts
+++ b/frontend/src/api/conversation.ts
@@ -1,5 +1,30 @@
 import api from './index'
 
+export interface ChatProgressEvent {
+  stage: 'thinking' | 'planning' | 'tool' | 'responding'
+  label: string
+  agent?: string | null
+  tool_name?: string | null
+  step?: string | null
+  steps?: string[]
+}
+
+export interface ChatStreamChunkEvent {
+  content: string
+}
+
+export interface ChatStreamMetadataEvent {
+  conversation_id: string
+  message_id: string
+}
+
+export interface ChatStreamHandlers {
+  onMetadata?: (payload: ChatStreamMetadataEvent) => void
+  onProgress?: (payload: ChatProgressEvent) => void
+  onChunk?: (payload: ChatStreamChunkEvent) => void
+  onError?: (message: string) => void
+}
+
 export interface MessageAttachment {
   id: string
   name: string
@@ -25,6 +50,23 @@ export interface Conversation {
   updated_at: string
 }
 
+function parseSseBlocks(buffer: string) {
+  const chunks = buffer.split('\n\n')
+  const rest = chunks.pop() ?? ''
+  const events = chunks
+    .map((block) => {
+      const lines = block.split('\n')
+      const event = lines.find((line) => line.startsWith('event:'))?.slice(6).trim() || 'message'
+      const data = lines
+        .filter((line) => line.startsWith('data:'))
+        .map((line) => line.slice(5).trim())
+        .join('\n')
+      return { event, data }
+    })
+    .filter((item) => item.data)
+  return { events, rest }
+}
+
 export const conversationApi = {
   list() {
     return api.get<Conversation[]>('/api/conversations')
@@ -35,18 +77,78 @@ export const conversationApi = {
   },
 
   getMessages(conversationId: string) {
-    return api.get<Message[]>(`/api/conversations/${conversationId}`)
+    return api.get<Message[]>(`/api/conversations/${conversationId}/messages`)
   },
 
   delete(conversationId: string) {
     return api.delete(`/api/conversations/${conversationId}`)
   },
 
-  chat(message: string, conversationId?: string, fileIds: string[] = []) {
+  chat(message: string, conversationId?: string, fileIds: string[] = [], modelName?: string) {
     return api.post('/api/conversations/chat', {
       message,
       conversation_id: conversationId,
       file_ids: fileIds,
+      model_name: modelName,
     })
   },
+
+  async chatStream(
+    message: string,
+    conversationId?: string,
+    fileIds: string[] = [],
+    modelName?: string,
+    handlers: ChatStreamHandlers = {},
+  ) {
+    const token = localStorage.getItem('access_token')
+    const response = await fetch(`${import.meta.env.VITE_API_URL}/api/conversations/chat/stream`, {
+      method: 'POST',
+      headers: {
+        'Content-Type': 'application/json',
+        ...(token ? { Authorization: `Bearer ${token}` } : {}),
+      },
+      body: JSON.stringify({
+        message,
+        conversation_id: conversationId,
+        file_ids: fileIds,
+        model_name: modelName,
+      }),
+    })
+
+    if (!response.ok || !response.body) {
+      let messageText = '连接失败。请检查服务状态。'
+      try {
+        const payload = await response.json()
+        messageText = payload?.detail || payload?.error || messageText
+      } catch {
+        // ignore parse error
+      }
+      throw new Error(messageText)
+    }
+
+    const reader = response.body.getReader()
+    const decoder = new TextDecoder('utf-8')
+    let buffer = ''
+
+    while (true) {
+      const { done, value } = await reader.read()
+      if (done) break
+      buffer += decoder.decode(value, { stream: true })
+      const { events, rest } = parseSseBlocks(buffer)
+      buffer = rest
+
+      for (const item of events) {
+        const payload = JSON.parse(item.data)
+        if (item.event === 'metadata') {
+          handlers.onMetadata?.(payload)
+        } else if (item.event === 'progress') {
+          handlers.onProgress?.(payload)
+        } else if (item.event === 'chunk') {
+          handlers.onChunk?.(payload)
+        } else if (item.event === 'error') {
+          handlers.onError?.(payload.error || '连接失败。请检查服务状态。')
+        }
+      }
+    }
+  },
 }
diff --git a/frontend/src/api/document.ts b/frontend/src/api/document.ts
index 50bf5a3..4b6ca82 100644
--- a/frontend/src/api/document.ts
+++ b/frontend/src/api/document.ts
@@ -9,10 +9,26 @@ export interface Document {
   summary?: string
   chunk_count: number
   is_indexed: boolean
+  ingestion_status?: 'uploaded' | 'parsing' | 'indexing' | 'ready' | 'warning' | 'failed'
+  ingestion_error?: string | null
+  indexed_at?: string | null
+  parser_version?: string | null
+  index_version?: string | null
   folder_id?: string | null
   created_at: string
 }
 
+export interface DocumentChunk {
+  id: string
+  chunk_index: number
+  content: string
+  metadata_?: string | null
+}
+
+export interface DocumentChunkUpdate {
+  content: string
+}
+
 export interface SearchResult {
   chunk_id: string
   document_id: string
@@ -29,6 +45,9 @@ export interface UploadResponse {
   title: string
   chunk_count: number
   status: string
+  ingestion_status?: 'uploaded' | 'parsing' | 'indexing' | 'ready' | 'warning' | 'failed'
+  ingestion_error?: string | null
+  indexed_at?: string | null
 }
 
 export const documentApi = {
@@ -54,7 +73,11 @@ export const documentApi = {
   },
 
   getChunks(id: string) {
-    return api.get<any[]>(`/api/documents/${id}/chunks`)
+    return api.get<DocumentChunk[]>(`/api/documents/${id}/chunks`)
+  },
+
+  updateChunk(documentId: string, chunkId: string, payload: DocumentChunkUpdate) {
+    return api.put<DocumentChunk>(`/api/documents/${documentId}/chunks/${chunkId}`, payload)
   },
 
   delete(id: string) {
diff --git a/frontend/src/api/index.ts b/frontend/src/api/index.ts
index 1dbe877..0068f1c 100644
--- a/frontend/src/api/index.ts
+++ b/frontend/src/api/index.ts
@@ -1,7 +1,9 @@
 import axios from 'axios'
 
+let redirectingToLogin = false
+
 const api = axios.create({
-  baseURL: import.meta.env.VITE_API_URL || 'http://localhost:9527',
+  baseURL: import.meta.env.VITE_API_URL,
   timeout: 30000,
 })
 
@@ -63,7 +65,13 @@ api.interceptors.response.use(
     const requestId = error.response?.headers?.['x-request-id'] || metadata?.requestId
     if (error.response?.status === 401) {
       localStorage.removeItem('access_token')
-      window.location.href = '/login'
+      if (typeof window !== 'undefined') {
+        window.dispatchEvent(new CustomEvent('jarvis:auth-unauthorized'))
+        if (!redirectingToLogin && window.location.pathname !== '/login') {
+          redirectingToLogin = true
+          window.location.href = '/login'
+        }
+      }
     }
     debugLog('error', {
       requestId,
diff --git a/frontend/src/api/system.ts b/frontend/src/api/system.ts
new file mode 100644
index 0000000..b2ff5e5
--- /dev/null
+++ b/frontend/src/api/system.ts
@@ -0,0 +1,14 @@
+import api from './index'
+
+export interface SystemStatus {
+  cpu_percent: number
+  memory_percent: number
+  disk_percent: number
+  timestamp: string
+}
+
+export const systemApi = {
+  getStatus() {
+    return api.get<SystemStatus>('/api/system/status')
+  },
+}
diff --git a/frontend/src/app/navigation/nav.ts b/frontend/src/app/navigation/nav.ts
index fe08c01..bfa3a0c 100644
--- a/frontend/src/app/navigation/nav.ts
+++ b/frontend/src/app/navigation/nav.ts
@@ -24,7 +24,7 @@ export const navItems: NavItem[] = [
   { name: '智能链路', path: '/agents', icon: Bot },
   { name: '技能中心', path: '/skills', icon: Star },
   { name: '资料中枢', path: '/knowledge', icon: BookOpen },
-  { name: '知识大脑', path: '/graph', icon: Network },
+  { name: '知识大脑', path: '/brain', icon: Network },
   { name: '任务矩阵', path: '/kanban', icon: LayoutGrid },
   { name: '任务调度', path: '/todo', icon: CheckSquare },
   { name: '信息交易所', path: '/forum', icon: MessageSquare },
diff --git a/frontend/src/app/router/routes.ts b/frontend/src/app/router/routes.ts
index 8fb4bbd..e2eadfd 100644
--- a/frontend/src/app/router/routes.ts
+++ b/frontend/src/app/router/routes.ts
@@ -15,6 +15,11 @@ const appChildren: RouteRecordRaw[] = [
     name: 'knowledge',
     component: () => import('@/pages/knowledge/index.vue'),
   },
+  {
+    path: 'brain',
+    name: 'brain',
+    component: () => import('@/pages/brain/index.vue'),
+  },
   {
     path: 'graph',
     name: 'graph',
diff --git a/frontend/src/components/brain/GraphProjection.vue b/frontend/src/components/brain/GraphProjection.vue
new file mode 100644
index 0000000..7b4dd70
--- /dev/null
+++ b/frontend/src/components/brain/GraphProjection.vue
@@ -0,0 +1,500 @@
+<script setup lang="ts">
+import { ref, onMounted, onBeforeUnmount, nextTick } from 'vue'
+import { RouterLink } from 'vue-router'
+import { graphApi } from '@/api/graph'
+import { Network, RefreshCw, Info, Hexagon, ExternalLink } from 'lucide-vue-next'
+import type { KGNode, KGEdge } from '@/api/graph'
+
+const props = withDefaults(defineProps<{
+  fullscreen?: boolean
+  showOpenFullView?: boolean
+}>(), {
+  fullscreen: false,
+  showOpenFullView: false,
+})
+
+const nodes = ref<KGNode[]>([])
+const edges = ref<KGEdge[]>([])
+const stats = ref({ node_count: 0, edge_count: 0 })
+const isLoading = ref(false)
+const selectedEntity = ref<KGNode | null>(null)
+const entityContext = ref('')
+const isBuilding = ref(false)
+const buildStatus = ref<'idle' | 'running' | 'success' | 'error'>('idle')
+const buildTitle = ref('')
+const buildMessage = ref('')
+const projectionSubtitle = ref('Knowledge brain memory/tag projection')
+const chartRef = ref<HTMLDivElement>()
+let buildPollTimer: ReturnType<typeof setTimeout> | null = null
+
+const typeColors: Record<string, string> = {
+  person: '#f87171', concept: '#60a5fa', topic: '#a78bfa',
+  task: '#fbbf24', event: '#fb923c', document: '#9ca3af', memory: '#00f5d4', tag: '#38bdf8', default: '#4b5563',
+}
+
+function getColor(type: string) { return typeColors[type] || typeColors.default }
+
+function clearBuildPoll() {
+  if (buildPollTimer) {
+    clearTimeout(buildPollTimer)
+    buildPollTimer = null
+  }
+}
+
+function getErrorMessage(error: unknown) {
+  const detail = (error as { response?: { data?: { detail?: string } } })?.response?.data?.detail
+  if (typeof detail === 'string' && detail) return detail
+  return 'Unable to rebuild the brain graph projection right now.'
+}
+
+async function loadGraph() {
+  isLoading.value = true
+  try {
+    const response = await graphApi.get()
+    nodes.value = response.data.nodes
+    edges.value = response.data.edges
+    stats.value = response.data.stats
+    await nextTick()
+    renderChart()
+  } catch (e) { console.error('加载图谱失败:', e) }
+  isLoading.value = false
+}
+
+async function pollGraphBuild(previousNodeCount: number, previousEdgeCount: number, attempts = 0) {
+  clearBuildPoll()
+  buildPollTimer = setTimeout(async () => {
+    try {
+      const response = await graphApi.get()
+      nodes.value = response.data.nodes
+      edges.value = response.data.edges
+      stats.value = response.data.stats
+      await nextTick()
+      renderChart()
+
+      const hasChanged = response.data.stats.node_count !== previousNodeCount || response.data.stats.edge_count !== previousEdgeCount
+      if (hasChanged) {
+        isBuilding.value = false
+        buildStatus.value = 'success'
+        buildTitle.value = 'PROJECTION REBUILT'
+        buildMessage.value = `Projection updated to ${response.data.stats.node_count} nodes and ${response.data.stats.edge_count} relations.`
+        clearBuildPoll()
+        return
+      }
+
+      if (attempts >= 14) {
+        isBuilding.value = false
+        buildStatus.value = 'running'
+        buildTitle.value = 'BUILDING IN BACKGROUND'
+        buildMessage.value = 'The rebuild task is still running. The brain graph projection will appear here as soon as the backend finishes processing memories and tags.'
+        clearBuildPoll()
+        return
+      }
+
+      buildTitle.value = 'REBUILDING PROJECTION'
+      buildMessage.value = `Processing knowledge links... ${attempts + 1}/15`
+      await pollGraphBuild(previousNodeCount, previousEdgeCount, attempts + 1)
+    } catch (error) {
+      isBuilding.value = false
+      buildStatus.value = 'error'
+      buildMessage.value = getErrorMessage(error)
+      clearBuildPoll()
+    }
+  }, 2000)
+}
+
+async function buildGraph() {
+  if (isBuilding.value) return
+
+  isBuilding.value = true
+  buildStatus.value = 'running'
+  buildTitle.value = 'PROJECTION REQUEST ACCEPTED'
+  buildMessage.value = 'The backend has started rebuilding your brain graph projection. Waiting for fresh memory and tag nodes...'
+  const previousNodeCount = stats.value.node_count
+  const previousEdgeCount = stats.value.edge_count
+
+  try {
+    const response = await graphApi.build()
+    buildTitle.value = 'PROJECTION REQUEST ACCEPTED'
+    buildMessage.value = response.data?.message || 'The backend has started rebuilding your brain graph projection. Waiting for fresh memory and tag nodes...'
+    await pollGraphBuild(previousNodeCount, previousEdgeCount)
+  } catch (error) {
+    console.error('构建失败:', error)
+    isBuilding.value = false
+    buildStatus.value = 'error'
+    buildTitle.value = 'BUILD FAILED'
+    buildMessage.value = getErrorMessage(error)
+    clearBuildPoll()
+  }
+}
+
+async function selectEntity(node: KGNode) {
+  selectedEntity.value = node
+  entityContext.value = 'LOADING...'
+  try {
+    const response = await graphApi.getEntityContext(node.name)
+    entityContext.value = response.data.context
+  } catch (e) { entityContext.value = 'Failed to load context' }
+}
+
+function renderChart() {
+  if (!chartRef.value) return
+  // @ts-ignore
+  if (!window.echarts) return
+  // @ts-ignore
+  const echarts = window.echarts
+  const chart = echarts.init(chartRef.value, 'dark')
+
+  chart.setOption({
+    backgroundColor: 'transparent',
+    tooltip: {
+      trigger: 'item',
+      backgroundColor: 'rgba(10, 15, 26, 0.95)',
+      borderColor: 'rgba(0, 245, 212, 0.2)',
+      textStyle: { color: '#e8f4f8', fontFamily: 'JetBrains Mono, monospace', fontSize: 12 },
+      formatter: (params: any) => {
+        if (params.dataType === 'node') {
+          return `<b style="color:#00f5d4">${params.data.name}</b><br/><span style="color:#7eb8c9">Type: ${params.data.type || 'unknown'}</span>`
+        }
+        return `<span style="color:#7eb8c9">${params.data.sourceName}</span> → <span style="color:#a78bfa">${params.data.relation}</span> → <span style="color:#7eb8c9">${params.data.targetName}</span>`
+      },
+    },
+    series: [{
+      type: 'graph',
+      layout: 'force',
+      symbolSize: (_val: unknown, params: any) => 18 + (params.data.importance || 0.5) * 40,
+      roam: true,
+      label: {
+        show: true,
+        fontSize: 10,
+        color: '#7eb8c9',
+        fontFamily: 'JetBrains Mono, monospace',
+        formatter: (params: any) => params.data.name?.substring(0, 14) || '',
+      },
+      lineStyle: { color: 'rgba(0, 245, 212, 0.18)', width: 1.5 },
+      emphasis: {
+        focus: 'adjacency',
+        lineStyle: { width: 3, color: 'rgba(0, 245, 212, 0.5)' },
+      },
+      edgeSymbol: ['circle', 'arrow'],
+      edgeSymbolSize: [4, 8],
+      data: nodes.value.map(n => ({
+        id: n.id, name: n.name, type: n.type,
+        importance: n.importance || 0.5,
+        itemStyle: {
+          color: getColor(n.type),
+          borderColor: getColor(n.type),
+          borderWidth: 2,
+          shadowColor: getColor(n.type),
+          shadowBlur: 10,
+        },
+      })),
+      links: edges.value.map(e => {
+        const src = nodes.value.find(n => n.id === e.source)
+        const tgt = nodes.value.find(n => n.id === e.target)
+        return {
+          source: e.source, target: e.target,
+          sourceName: src?.name || '', targetName: tgt?.name || '',
+          relation: e.relation,
+          lineStyle: { color: 'rgba(0, 245, 212, 0.18)' },
+        }
+      }),
+      force: { repulsion: 170, gravity: 0.04, edgeLength: [70, 220], layoutAnimation: true },
+    }],
+  })
+  chart.on('click', (params: any) => {
+    if (params.dataType === 'node') {
+      const node = nodes.value.find(n => n.id === params.data.id)
+      if (node) selectEntity(node)
+    }
+  })
+}
+
+onMounted(() => {
+  loadGraph()
+  const script = document.createElement('script')
+  script.src = 'https://cdn.jsdelivr.net/npm/echarts@5.5.0/dist/echarts.min.js'
+  script.onload = () => renderChart()
+  document.head.appendChild(script)
+})
+
+onBeforeUnmount(() => {
+  clearBuildPoll()
+})
+</script>
+
+<template>
+  <div class="graph-projection" :class="{ fullscreen }">
+    <div class="page-header">
+      <div class="header-left">
+        <div class="header-icon"><Hexagon :size="20" /></div>
+        <div class="header-text">
+          <h1>BRAIN GRAPH PROJECTION</h1>
+          <span class="header-sub">{{ projectionSubtitle }} · {{ stats.node_count }} nodes · {{ stats.edge_count }} relations</span>
+        </div>
+      </div>
+      <div class="header-actions">
+        <RouterLink v-if="showOpenFullView" class="open-full-btn" to="/graph">
+          <ExternalLink :size="14" />
+          Open full view
+        </RouterLink>
+        <button class="build-btn" @click="buildGraph" :disabled="isBuilding">
+          <RefreshCw :size="14" :class="{ spin: isBuilding }" />
+          {{ isBuilding ? 'BUILDING PROJECTION...' : 'REBUILD PROJECTION' }}
+        </button>
+      </div>
+    </div>
+
+    <div v-if="buildStatus !== 'idle'" class="build-alert" :class="`is-${buildStatus}`">
+      <div class="build-alert-grid">
+        <div class="build-alert-signal">
+          <div class="signal-core"></div>
+          <div class="signal-ring ring-1"></div>
+          <div class="signal-ring ring-2"></div>
+        </div>
+        <div class="build-alert-copy">
+          <div class="build-alert-title">{{ buildTitle }}</div>
+          <div class="build-alert-message">{{ buildMessage }}</div>
+        </div>
+      </div>
+    </div>
+
+    <div class="type-legend">
+      <div v-for="(color, type) in typeColors" :key="type" class="legend-item">
+        <div class="legend-dot" :style="{ background: color, boxShadow: `0 0 6px ${color}` }"></div>
+        <span>{{ type.toUpperCase() }}</span>
+      </div>
+    </div>
+
+    <div class="main-area">
+      <div class="graph-container">
+        <div class="circuit-overlay">
+          <span class="circuit-line line-a"></span>
+          <span class="circuit-line line-b"></span>
+          <span class="circuit-line line-c"></span>
+        </div>
+        <div v-if="nodes.length === 0 && !isLoading" class="empty-state">
+          <div class="empty-icon">
+            <div class="e-ring r1"></div>
+            <div class="e-ring r2"></div>
+            <Network :size="32" />
+          </div>
+          <div class="empty-title">NO PROJECTION DATA</div>
+          <div class="empty-sub">Run brain learning or rebuild the projection graph</div>
+        </div>
+        <div ref="chartRef" v-show="nodes.length > 0" class="chart-canvas"></div>
+      </div>
+
+      <div class="entity-panel" v-if="selectedEntity">
+        <div class="panel-title">
+          <Info :size="14" />
+          <span>ENTITY DETAIL</span>
+          <button class="close-panel" @click="selectedEntity = null">×</button>
+        </div>
+        <div class="entity-name" :style="{ color: getColor(selectedEntity.type) }">
+          {{ selectedEntity.name }}
+        </div>
+        <div class="entity-type-tag" :style="{ color: getColor(selectedEntity.type), borderColor: getColor(selectedEntity.type) + '40' }">
+          {{ (selectedEntity.type || 'unknown').toUpperCase() }}
+        </div>
+        <div class="entity-context">{{ entityContext }}</div>
+      </div>
+    </div>
+
+    <div class="relations-section" v-if="edges.length > 0">
+      <div class="section-label">// RELATIONS ({{ edges.length }})</div>
+      <div class="relations-scroll">
+        <div v-for="edge in edges" :key="edge.id" class="rel-item">
+          <span class="rel-node">{{ nodes.find(n => n.id === edge.source)?.name?.slice(0, 16) || edge.source.slice(0, 8) }}</span>
+          <div class="rel-arrow">
+            <div class="arrow-line"></div>
+            <span class="rel-type-badge">{{ edge.relation }}</span>
+          </div>
+          <span class="rel-node">{{ nodes.find(n => n.id === edge.target)?.name?.slice(0, 16) || edge.target.slice(0, 8) }}</span>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<style scoped>
+.graph-projection {
+  height: 100%;
+  overflow-y: auto;
+  padding: 24px;
+  display: flex;
+  flex-direction: column;
+  gap: 16px;
+}
+
+.graph-projection.fullscreen {
+  min-height: calc(100vh - 48px);
+}
+
+.page-header {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 16px;
+}
+
+.header-left,
+.header-actions {
+  display: flex;
+  align-items: center;
+  gap: 12px;
+}
+
+.header-icon { color: var(--accent-cyan); filter: drop-shadow(0 0 8px var(--accent-cyan)); }
+
+h1 {
+  font-family: var(--font-display);
+  font-size: 20px;
+  font-weight: 700;
+  letter-spacing: 0.15em;
+  color: var(--text-primary);
+  margin: 0;
+}
+
+.header-sub { font-family: var(--font-mono); font-size: 10px; color: var(--text-dim); letter-spacing: 0.1em; }
+
+.build-btn,
+.open-full-btn {
+  display: inline-flex;
+  align-items: center;
+  gap: 6px;
+  padding: 8px 16px;
+  background: var(--accent-cyan-dim);
+  border: 1px solid var(--border-mid);
+  border-radius: var(--radius-md);
+  color: var(--accent-cyan);
+  font-family: var(--font-display);
+  font-size: 10px;
+  letter-spacing: 0.12em;
+  text-decoration: none;
+}
+
+.spin { animation: spin 1s linear infinite; }
+
+.build-alert {
+  position: relative;
+  overflow: hidden;
+  border-radius: var(--radius-lg);
+  border: 1px solid var(--border-mid);
+  background: linear-gradient(135deg, rgba(8, 18, 32, 0.96), rgba(11, 27, 46, 0.92));
+}
+
+.build-alert-grid {
+  position: relative;
+  z-index: 1;
+  display: grid;
+  grid-template-columns: 56px minmax(0, 1fr);
+  gap: 14px;
+  align-items: center;
+  min-height: 88px;
+  padding: 16px 18px;
+}
+
+.build-alert-signal { position: relative; width: 42px; height: 42px; margin-inline: auto; }
+.signal-core { position: absolute; inset: 12px; border-radius: 50%; background: currentColor; box-shadow: 0 0 18px currentColor; }
+.signal-ring { position: absolute; inset: 0; border-radius: 50%; border: 1px solid currentColor; opacity: 0.28; }
+.ring-1 { animation: pulse-ring 1.8s ease-out infinite; }
+.ring-2 { animation: pulse-ring 1.8s ease-out infinite 0.45s; }
+.build-alert-copy { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
+.build-alert-title { font-family: var(--font-display); font-size: 15px; letter-spacing: 0.18em; }
+.build-alert-message { font-family: var(--font-mono); font-size: 13px; line-height: 1.6; color: var(--text-secondary); }
+.build-alert.is-running { color: var(--accent-cyan); }
+.build-alert.is-success { color: #7fffd4; }
+.build-alert.is-error { color: #f87171; }
+
+.type-legend { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; }
+.legend-item { display: flex; align-items: center; gap: 6px; font-family: var(--font-mono); font-size: 9px; letter-spacing: 0.12em; color: var(--text-dim); }
+.legend-dot { width: 7px; height: 7px; border-radius: 50%; }
+
+.main-area {
+  display: grid;
+  grid-template-columns: minmax(0, 1fr) 340px;
+  gap: 16px;
+  min-height: 720px;
+}
+
+.graph-container,
+.entity-panel,
+.relations-section {
+  border-radius: var(--radius-xl);
+  border: 1px solid var(--border-mid);
+  background: linear-gradient(180deg, rgba(8, 14, 28, 0.98), rgba(6, 12, 22, 0.98));
+  box-shadow: var(--shadow-panel);
+}
+
+.graph-container {
+  position: relative;
+  overflow: hidden;
+  min-height: 720px;
+}
+
+.circuit-overlay {
+  position: absolute;
+  inset: 0;
+  pointer-events: none;
+  opacity: 0.28;
+}
+
+.circuit-line {
+  position: absolute;
+  background: linear-gradient(90deg, transparent, rgba(0, 245, 212, 0.8), transparent);
+}
+
+.line-a { top: 12%; left: 8%; width: 42%; height: 1px; }
+.line-b { top: 62%; left: 18%; width: 54%; height: 1px; }
+.line-c { top: 22%; right: 12%; width: 1px; height: 48%; background: linear-gradient(180deg, transparent, rgba(0, 245, 212, 0.8), transparent); }
+
+.chart-canvas { height: 720px; width: 100%; }
+
+.empty-state {
+  height: 100%;
+  min-height: 720px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  flex-direction: column;
+  gap: 12px;
+  color: var(--text-dim);
+}
+
+.empty-icon { position: relative; display: grid; place-items: center; width: 88px; height: 88px; color: var(--accent-cyan); }
+.e-ring { position: absolute; inset: 0; border: 1px solid rgba(0, 245, 212, 0.25); border-radius: 50%; }
+.r1 { animation: pulse-ring 2s ease-out infinite; }
+.r2 { animation: pulse-ring 2s ease-out infinite 0.6s; }
+.empty-title { font-family: var(--font-display); letter-spacing: 0.16em; color: var(--text-primary); }
+.empty-sub { font-family: var(--font-mono); font-size: 12px; }
+
+.entity-panel { padding: 18px; display: flex; flex-direction: column; gap: 12px; }
+.panel-title { display: flex; align-items: center; gap: 8px; font-family: var(--font-display); letter-spacing: 0.12em; color: var(--accent-cyan); }
+.close-panel { margin-left: auto; background: transparent; border: 0; color: var(--text-dim); font-size: 22px; cursor: pointer; }
+.entity-name { font-size: 22px; font-family: var(--font-display); }
+.entity-type-tag { width: fit-content; padding: 4px 10px; border: 1px solid; border-radius: 999px; font-family: var(--font-mono); font-size: 10px; }
+.entity-context { color: var(--text-secondary); line-height: 1.7; white-space: pre-wrap; }
+
+.relations-section { padding: 16px; }
+.section-label { font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.16em; color: var(--accent-cyan); margin-bottom: 12px; }
+.relations-scroll { display: flex; flex-direction: column; gap: 10px; }
+.rel-item { display: grid; grid-template-columns: 1fr auto 1fr; gap: 12px; align-items: center; }
+.rel-node { color: var(--text-secondary); font-family: var(--font-mono); font-size: 12px; }
+.rel-arrow { display: flex; align-items: center; gap: 8px; }
+.arrow-line { width: 48px; height: 1px; background: rgba(0, 245, 212, 0.35); }
+.rel-type-badge { color: var(--accent-cyan); font-family: var(--font-mono); font-size: 10px; }
+
+@keyframes pulse-ring {
+  0% { transform: scale(0.85); opacity: 0.5; }
+  100% { transform: scale(1.2); opacity: 0; }
+}
+
+@keyframes spin {
+  from { transform: rotate(0deg); }
+  to { transform: rotate(360deg); }
+}
+
+@media (max-width: 1200px) {
+  .main-area { grid-template-columns: 1fr; }
+}
+</style>
diff --git a/frontend/src/components/chat/OrchestrationPanel.vue b/frontend/src/components/chat/OrchestrationPanel.vue
new file mode 100644
index 0000000..04e1db6
--- /dev/null
+++ b/frontend/src/components/chat/OrchestrationPanel.vue
@@ -0,0 +1,555 @@
+<script setup lang="ts">
+const props = defineProps<{
+  visible: boolean
+  status: 'idle' | 'active' | 'complete' | 'error'
+  insight: {
+    statusTitle: string
+    systemSummary: string
+    jarvisNote: string
+  }
+  activeAgent: string | null
+  visitedAgents: string[]
+  events: Array<{
+    id: string
+    label: string
+    kind: 'info' | 'tool' | 'success' | 'error'
+  }>
+  systemTelemetry: {
+    cpu: { current: number | null; series: number[]; online: boolean }
+    memory: { current: number | null; series: number[]; online: boolean }
+    disk: { current: number | null; series: number[]; online: boolean }
+  }
+  sessionTelemetry: {
+    activitySeries: number[]
+    eventsCount: number
+    toolCount: number
+    agentCount: number
+  }
+}>()
+
+const agentLabels: Record<string, string> = {
+  master: 'JARVIS',
+  planner: 'planner',
+  executor: 'executor',
+  analyst: 'analyst',
+  librarian: 'librarian',
+}
+
+const busAgents = ['planner', 'executor', 'analyst', 'librarian'] as const
+
+function agentState(agent: string) {
+  if (props.activeAgent === agent) return 'active'
+  if (props.visitedAgents.includes(agent)) return 'visited'
+  return 'idle'
+}
+
+function statusLabel(status: 'idle' | 'active' | 'complete' | 'error') {
+  if (status === 'complete') return 'COMPLETE'
+  if (status === 'error') return 'ERROR'
+  return 'ACTIVE'
+}
+</script>
+
+<template>
+  <aside class="orchestration-panel" :class="[`is-${status}`, { visible }]">
+    <div class="panel-frame">
+      <div class="panel-header">
+        <div>
+          <div class="panel-title">JARVIS CONTROL</div>
+          <div class="panel-subtitle">{{ activeAgent ? `${agentLabels[activeAgent] || activeAgent} engaged` : 'Awaiting request' }}</div>
+        </div>
+        <div class="panel-status" :class="status">
+          <span class="status-dot"></span>
+          <span>{{ statusLabel(status) }}</span>
+        </div>
+      </div>
+
+      <div class="panel-analysis hud-block">
+        <div class="block-badge">THINKING LAYER</div>
+        <div class="analysis-title">{{ insight.statusTitle }}</div>
+        <div class="analysis-system">{{ insight.systemSummary }}</div>
+        <div class="analysis-note">{{ insight.jarvisNote }}</div>
+      </div>
+
+      <div class="agent-bus">
+        <div class="bus-node core" :class="{ active: visible }">
+          <div class="node-line"></div>
+          <div class="node-body">
+            <div class="node-name">{{ agentLabels.master }}</div>
+            <div class="node-caption">Central Router</div>
+          </div>
+        </div>
+
+        <div
+          v-for="agent in busAgents"
+          :key="agent"
+          class="bus-node"
+          :class="agentState(agent)"
+        >
+          <div class="node-line"></div>
+          <div class="node-body">
+            <div class="node-name">{{ agentLabels[agent] }}</div>
+            <div class="node-caption">{{ activeAgent === agent ? 'Active Task' : 'Standby' }}</div>
+          </div>
+        </div>
+      </div>
+
+      <div class="event-feed">
+        <div class="feed-title">Recent Events</div>
+        <div v-if="events.length === 0" class="feed-empty">Awaiting orchestration signal</div>
+        <div v-else class="feed-list">
+          <div v-for="event in events" :key="event.id" class="feed-item" :class="event.kind">
+            <span class="feed-marker"></span>
+            <span class="feed-label">{{ event.label }}</span>
+          </div>
+        </div>
+      </div>
+    </div>
+  </aside>
+</template>
+
+<style scoped>
+.orchestration-panel {
+  width: 340px;
+  min-width: 340px;
+  padding: 18px 18px 18px 0;
+  opacity: 1;
+}
+
+.panel-frame {
+  height: 100%;
+  border-radius: 18px;
+  border: 1px solid rgba(34, 211, 238, 0.18);
+  background: linear-gradient(180deg, rgba(8, 14, 28, 0.94), rgba(6, 10, 20, 0.9));
+  box-shadow: inset 0 1px 0 rgba(255,255,255,0.04), 0 0 20px rgba(34, 211, 238, 0.08);
+  backdrop-filter: blur(14px);
+  display: flex;
+  flex-direction: column;
+  padding: 18px;
+  gap: 18px;
+}
+
+.panel-header {
+  display: flex;
+  align-items: flex-start;
+  justify-content: space-between;
+  gap: 12px;
+}
+
+.panel-title {
+  font-family: var(--font-display);
+  font-size: 12px;
+  letter-spacing: 0.16em;
+  color: var(--accent-cyan);
+}
+
+.panel-subtitle {
+  margin-top: 4px;
+  font-family: var(--font-mono);
+  font-size: 9px;
+  letter-spacing: 0.12em;
+  color: var(--text-dim);
+  text-transform: uppercase;
+}
+
+.panel-status {
+  display: inline-flex;
+  align-items: center;
+  gap: 6px;
+  padding: 6px 10px;
+  border-radius: 999px;
+  border: 1px solid rgba(34, 211, 238, 0.16);
+  background: rgba(34, 211, 238, 0.08);
+  color: var(--accent-cyan);
+  font-family: var(--font-mono);
+  font-size: 9px;
+  letter-spacing: 0.14em;
+}
+
+.panel-status.complete {
+  border-color: rgba(74, 222, 128, 0.2);
+  background: rgba(74, 222, 128, 0.08);
+  color: var(--accent-green);
+}
+
+.panel-status.error {
+  border-color: rgba(255, 71, 87, 0.24);
+  background: rgba(255, 71, 87, 0.08);
+  color: var(--accent-red);
+}
+
+.status-dot {
+  width: 6px;
+  height: 6px;
+  border-radius: 50%;
+  background: currentColor;
+  box-shadow: 0 0 10px currentColor;
+}
+
+.metrics-section,
+.activity-section {
+  display: flex;
+  flex-direction: column;
+  gap: 10px;
+}
+
+.section-heading,
+.feed-title {
+  font-family: var(--font-mono);
+  font-size: 9px;
+  letter-spacing: 0.14em;
+  color: var(--text-dim);
+  text-transform: uppercase;
+}
+
+.metrics-grid {
+  display: grid;
+  grid-template-columns: 1fr;
+  gap: 10px;
+}
+
+.hud-card,
+.hud-block,
+.node-body {
+  position: relative;
+  overflow: hidden;
+}
+
+.hud-card::before,
+.hud-block::before {
+  content: '';
+  position: absolute;
+  inset: 0;
+  background: linear-gradient(135deg, rgba(255,255,255,0.03), transparent 42%);
+  pointer-events: none;
+}
+
+.metric-card,
+.activity-card,
+.panel-analysis {
+  border-radius: 14px;
+  border: 1px solid rgba(34, 211, 238, 0.12);
+  background: rgba(10, 16, 30, 0.72);
+  box-shadow: inset 0 1px 0 rgba(255,255,255,0.04), 0 0 16px rgba(34, 211, 238, 0.08);
+}
+
+.metric-card {
+  min-height: 96px;
+  padding: 14px;
+}
+
+.activity-card,
+.panel-analysis {
+  min-height: 114px;
+  padding: 24px 14px 14px;
+}
+
+.cpu-card {
+  color: #22d3ee;
+  border-color: rgba(34, 211, 238, 0.2);
+}
+
+.mem-card {
+  color: #a78bfa;
+  border-color: rgba(167, 139, 250, 0.22);
+}
+
+.disk-card {
+  color: #4ade80;
+  border-color: rgba(74, 222, 128, 0.22);
+}
+
+.activity-hud-card {
+  color: #f59e0b;
+  border-color: rgba(245, 158, 11, 0.22);
+}
+
+.metric-card::after,
+.activity-card::after,
+.panel-analysis::after {
+  content: '';
+  position: absolute;
+  left: 14px;
+  right: 14px;
+  top: 12px;
+  height: 1px;
+  background: linear-gradient(90deg, currentColor, transparent);
+  opacity: 0.18;
+}
+
+.block-badge {
+  position: absolute;
+  top: 10px;
+  right: 14px;
+  font-family: var(--font-mono);
+  font-size: 8px;
+  letter-spacing: 0.14em;
+  color: rgba(34, 211, 238, 0.42);
+}
+
+.activity-badge {
+  color: rgba(245, 158, 11, 0.65);
+}
+
+.metric-topline {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 10px;
+  margin-bottom: 10px;
+}
+
+.metric-label,
+.activity-key {
+  font-family: var(--font-mono);
+  font-size: 9px;
+  letter-spacing: 0.14em;
+  color: var(--text-dim);
+}
+
+.metric-value,
+.activity-number {
+  font-family: var(--font-display);
+  font-size: 11px;
+  letter-spacing: 0.1em;
+  color: var(--text-primary);
+}
+
+.metric-value {
+  text-shadow: 0 0 12px rgba(255, 255, 255, 0.08);
+}
+
+.activity-key {
+  color: rgba(245, 158, 11, 0.72);
+}
+
+.activity-number {
+  color: var(--accent-amber);
+  text-shadow: 0 0 12px rgba(245, 158, 11, 0.18);
+}
+
+.activity-stats {
+  margin-top: 10px;
+  display: grid;
+  grid-template-columns: repeat(3, minmax(0, 1fr));
+  gap: 10px;
+}
+
+.activity-stat {
+  display: flex;
+  flex-direction: column;
+  gap: 4px;
+}
+
+.analysis-title {
+  font-family: var(--font-display);
+  font-size: 11px;
+  letter-spacing: 0.14em;
+  color: var(--accent-cyan);
+}
+
+.analysis-system {
+  margin-top: 8px;
+  font-size: 13px;
+  line-height: 1.6;
+  color: var(--text-primary);
+}
+
+.analysis-note {
+  margin-top: 10px;
+  padding-top: 10px;
+  border-top: 1px solid rgba(34, 211, 238, 0.08);
+  font-size: 12px;
+  line-height: 1.6;
+  color: var(--text-dim);
+}
+
+.agent-bus {
+  display: flex;
+  flex-direction: column;
+  gap: 10px;
+}
+
+.bus-node {
+  position: relative;
+  display: flex;
+  gap: 12px;
+  align-items: stretch;
+}
+
+.node-line {
+  position: relative;
+  width: 14px;
+  flex-shrink: 0;
+}
+
+.node-line::before {
+  content: '';
+  position: absolute;
+  left: 6px;
+  top: 0;
+  bottom: -10px;
+  width: 1px;
+  background: linear-gradient(180deg, rgba(34, 211, 238, 0.4), rgba(34, 211, 238, 0.04));
+}
+
+.bus-node:last-child .node-line::before {
+  bottom: 50%;
+}
+
+.node-line::after {
+  content: '';
+  position: absolute;
+  left: 2px;
+  top: 18px;
+  width: 9px;
+  height: 9px;
+  border-radius: 50%;
+  border: 1px solid rgba(34, 211, 238, 0.24);
+  background: rgba(34, 211, 238, 0.08);
+}
+
+.node-body {
+  flex: 1;
+  min-width: 0;
+  padding: 12px 14px;
+  border-radius: 14px;
+  border: 1px solid rgba(34, 211, 238, 0.12);
+  background: rgba(12, 18, 34, 0.78);
+  transition: border-color 0.24s ease, box-shadow 0.24s ease, transform 0.24s ease;
+}
+
+.node-name {
+  font-family: var(--font-display);
+  font-size: 11px;
+  letter-spacing: 0.14em;
+  color: var(--text-secondary);
+}
+
+.node-caption {
+  margin-top: 4px;
+  font-family: var(--font-mono);
+  font-size: 9px;
+  color: var(--text-dim);
+  letter-spacing: 0.08em;
+}
+
+.bus-node.core .node-body {
+  background: linear-gradient(135deg, rgba(10, 18, 34, 0.95), rgba(22, 18, 42, 0.85));
+  border-color: rgba(34, 211, 238, 0.18);
+}
+
+.bus-node.core .node-name {
+  color: var(--accent-cyan);
+}
+
+.bus-node.active .node-body {
+  border-color: rgba(34, 211, 238, 0.42);
+  box-shadow: 0 0 18px rgba(34, 211, 238, 0.14);
+  transform: translateX(-2px);
+}
+
+.bus-node.active .node-name,
+.bus-node.active .node-caption {
+  color: var(--accent-cyan);
+}
+
+.bus-node.active .node-line::after {
+  background: var(--accent-cyan);
+  box-shadow: 0 0 10px var(--accent-cyan);
+}
+
+.bus-node.visited .node-body {
+  border-color: rgba(34, 211, 238, 0.18);
+  box-shadow: 0 0 10px rgba(34, 211, 238, 0.06);
+}
+
+.bus-node.visited .node-name {
+  color: var(--text-primary);
+}
+
+.event-feed {
+  margin-top: auto;
+  border-top: 1px solid rgba(34, 211, 238, 0.1);
+  padding-top: 14px;
+}
+
+.feed-title {
+  margin-bottom: 12px;
+}
+
+.feed-empty {
+  font-size: 12px;
+  color: var(--text-muted);
+}
+
+.feed-list {
+  display: flex;
+  flex-direction: column;
+  gap: 10px;
+}
+
+.feed-item {
+  display: flex;
+  align-items: flex-start;
+  gap: 10px;
+  font-size: 12px;
+  color: var(--text-secondary);
+}
+
+.feed-marker {
+  width: 7px;
+  height: 7px;
+  margin-top: 5px;
+  border-radius: 50%;
+  background: rgba(34, 211, 238, 0.5);
+  box-shadow: 0 0 8px rgba(34, 211, 238, 0.2);
+  flex-shrink: 0;
+}
+
+.feed-item.tool .feed-marker {
+  background: var(--accent-amber);
+  box-shadow: 0 0 8px rgba(249, 168, 37, 0.24);
+}
+
+.feed-item.success .feed-marker {
+  background: var(--accent-green);
+  box-shadow: 0 0 8px rgba(74, 222, 128, 0.24);
+}
+
+.feed-item.error .feed-marker {
+  background: var(--accent-red);
+  box-shadow: 0 0 8px rgba(255, 71, 87, 0.24);
+}
+
+.feed-label {
+  line-height: 1.5;
+}
+
+@media (max-width: 1280px) {
+  .orchestration-panel {
+    width: 320px;
+    min-width: 320px;
+  }
+}
+
+@media (max-width: 1120px) {
+  .orchestration-panel {
+    width: 300px;
+    min-width: 300px;
+  }
+}
+
+@media (max-width: 980px) {
+  .orchestration-panel {
+    display: none;
+  }
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .hud-card,
+  .node-body {
+    transition: none;
+  }
+}
+</style>
diff --git a/frontend/src/components/chat/TelemetrySparkline.vue b/frontend/src/components/chat/TelemetrySparkline.vue
new file mode 100644
index 0000000..9bba954
--- /dev/null
+++ b/frontend/src/components/chat/TelemetrySparkline.vue
@@ -0,0 +1,78 @@
+<script setup lang="ts">
+import { computed } from 'vue'
+
+const props = withDefaults(defineProps<{
+  points: number[]
+  stroke?: string
+  fill?: string
+  grid?: boolean
+}>(), {
+  grid: true,
+  stroke: '#22d3ee',
+  fill: 'rgba(34, 211, 238, 0.16)',
+})
+
+const width = 220
+const height = 52
+const padding = 4
+
+const normalizedPoints = computed(() => {
+  const source = props.points.length ? props.points : [0, 0]
+  const max = Math.max(...source, 100)
+  const min = 0
+  return source.map((value, index) => {
+    const x = source.length === 1
+      ? width / 2
+      : padding + (index * (width - padding * 2)) / (source.length - 1)
+    const y = height - padding - ((value - min) / (max - min || 1)) * (height - padding * 2)
+    return { x, y }
+  })
+})
+
+const linePath = computed(() => normalizedPoints.value
+  .map((point, index) => `${index === 0 ? 'M' : 'L'} ${point.x} ${point.y}`)
+  .join(' '))
+
+const areaPath = computed(() => {
+  const points = normalizedPoints.value
+  if (!points.length) return ''
+  const start = points[0]
+  const end = points[points.length - 1]
+  return `${linePath.value} L ${end.x} ${height - padding} L ${start.x} ${height - padding} Z`
+})
+</script>
+
+<template>
+  <svg class="sparkline" :viewBox="`0 0 ${width} ${height}`" preserveAspectRatio="none">
+    <path v-if="grid" class="sparkline-grid" d="M 0 13 H 220 M 0 26 H 220 M 0 39 H 220" />
+    <path :d="areaPath" class="sparkline-area" :fill="fill" />
+    <path :d="linePath" class="sparkline-line" :stroke="stroke" />
+  </svg>
+</template>
+
+<style scoped>
+.sparkline {
+  width: 100%;
+  height: 52px;
+  display: block;
+}
+
+.sparkline-grid {
+  fill: none;
+  stroke: rgba(148, 163, 184, 0.12);
+  stroke-width: 1;
+  stroke-dasharray: 3 5;
+}
+
+.sparkline-area {
+  opacity: 0.9;
+}
+
+.sparkline-line {
+  fill: none;
+  stroke-width: 2;
+  stroke-linecap: round;
+  stroke-linejoin: round;
+  filter: drop-shadow(0 0 6px currentColor);
+}
+</style>
diff --git a/frontend/src/pages/app/layout.vue b/frontend/src/pages/app/layout.vue
index bcc4d6f..c6bccf8 100644
--- a/frontend/src/pages/app/layout.vue
+++ b/frontend/src/pages/app/layout.vue
@@ -1,6 +1,20 @@
 <script setup lang="ts">
-import { RouterView } from 'vue-router'
+import { watch } from 'vue'
+import { RouterView, useRouter } from 'vue-router'
 import SidebarNav from '@/components/SidebarNav.vue'
+import { useAuthStore } from '@/stores/auth'
+
+const router = useRouter()
+const auth = useAuthStore()
+
+watch(
+  () => auth.isAuthenticated,
+  (isAuthenticated) => {
+    if (!isAuthenticated && router.currentRoute.value.path !== '/login') {
+      void router.replace('/login')
+    }
+  },
+)
 </script>
 
 <template>
diff --git a/frontend/src/pages/brain/brainEmbed.test.ts b/frontend/src/pages/brain/brainEmbed.test.ts
new file mode 100644
index 0000000..a4c6234
--- /dev/null
+++ b/frontend/src/pages/brain/brainEmbed.test.ts
@@ -0,0 +1,14 @@
+import { readFileSync } from 'node:fs'
+import path from 'node:path'
+
+import { describe, expect, it } from 'vitest'
+
+describe('brain graph embedding', () => {
+  it('renders the reusable graph projection component directly instead of an iframe shell', () => {
+    const brainPage = readFileSync(path.resolve(__dirname, './index.vue'), 'utf-8')
+
+    expect(brainPage).toContain('GraphProjection')
+    expect(brainPage).not.toContain('<iframe')
+    expect(brainPage).not.toContain('src="/graph"')
+  })
+})
diff --git a/frontend/src/pages/brain/brainRouting.test.ts b/frontend/src/pages/brain/brainRouting.test.ts
new file mode 100644
index 0000000..54fcb0f
--- /dev/null
+++ b/frontend/src/pages/brain/brainRouting.test.ts
@@ -0,0 +1,18 @@
+import { describe, expect, it } from 'vitest'
+
+import { navItems } from '@/app/navigation/nav'
+import { appChildren } from '@/app/router/routes'
+
+describe('brain routing', () => {
+  it('points the knowledge brain nav item to /brain', () => {
+    const item = navItems.find((entry) => entry.name === '知识大脑')
+
+    expect(item?.path).toBe('/brain')
+  })
+
+  it('registers a brain page route', () => {
+    const route = appChildren.find((entry) => entry.name === 'brain')
+
+    expect(route?.path).toBe('brain')
+  })
+})
diff --git a/frontend/src/pages/brain/index.vue b/frontend/src/pages/brain/index.vue
new file mode 100644
index 0000000..8d16fce
--- /dev/null
+++ b/frontend/src/pages/brain/index.vue
@@ -0,0 +1,7 @@
+<script setup lang="ts">
+import GraphProjection from '@/components/brain/GraphProjection.vue'
+</script>
+
+<template>
+  <GraphProjection fullscreen :show-open-full-view="false" />
+</template>
diff --git a/frontend/src/pages/chat/composables/useChatView.test.ts b/frontend/src/pages/chat/composables/useChatView.test.ts
new file mode 100644
index 0000000..aba843b
--- /dev/null
+++ b/frontend/src/pages/chat/composables/useChatView.test.ts
@@ -0,0 +1,168 @@
+import { beforeEach, describe, expect, it, vi } from 'vitest'
+import { createPinia, setActivePinia } from 'pinia'
+import { nextTick } from 'vue'
+
+const mocks = vi.hoisted(() => ({
+  chatStream: vi.fn(),
+  list: vi.fn(),
+  getMessages: vi.fn(),
+  deleteConversation: vi.fn(),
+  settingsGet: vi.fn(),
+  upload: vi.fn(),
+  systemStatusGet: vi.fn(),
+}))
+
+vi.mock('@/api/conversation', () => ({
+  conversationApi: {
+    chatStream: mocks.chatStream,
+    list: mocks.list,
+    getMessages: mocks.getMessages,
+    delete: mocks.deleteConversation,
+  },
+}))
+
+vi.mock('@/api/settings', () => ({
+  settingsApi: {
+    get: mocks.settingsGet,
+  },
+}))
+
+vi.mock('@/api/system', () => ({
+  systemApi: {
+    getStatus: mocks.systemStatusGet,
+  },
+}))
+
+vi.mock('@/api/document', () => ({
+  documentApi: {
+    upload: mocks.upload,
+  },
+}))
+
+vi.mock('@/stores/auth', () => ({
+  useAuthStore: () => ({
+    ensureAuthReady: vi.fn().mockResolvedValue(undefined),
+    isAuthenticated: true,
+    user: { id: 'user-1', email: 'test@example.com' },
+  }),
+}))
+
+import { useChatView } from './useChatView'
+
+describe('useChatView orchestration state', () => {
+  beforeEach(() => {
+    setActivePinia(createPinia())
+    vi.useFakeTimers()
+    vi.clearAllMocks()
+    mocks.list.mockResolvedValue({ data: [] })
+    mocks.getMessages.mockResolvedValue({ data: [] })
+    mocks.deleteConversation.mockResolvedValue(undefined)
+    mocks.settingsGet.mockResolvedValue({
+      data: {
+        llm_config: {
+          chat: [
+            {
+              name: 'Jarvis Chat',
+              provider: 'openai',
+              model: 'gpt-test',
+              base_url: '',
+              api_key: '',
+              enabled: true,
+            },
+          ],
+          vlm: [],
+        },
+      },
+    })
+    mocks.upload.mockResolvedValue({ data: { id: 'file-1' } })
+    mocks.systemStatusGet.mockResolvedValue({
+      data: {
+        cpu_percent: 21,
+        memory_percent: 48,
+        disk_percent: 63,
+        timestamp: '2026-03-22T02:40:00Z',
+      },
+    })
+  })
+
+  it('derives telemetry state from real system status and session events without persisting it to message history', async () => {
+    mocks.chatStream.mockImplementation(async (_message, _conversationId, _fileIds, _modelName, handlers) => {
+      handlers.onMetadata?.({ conversation_id: 'conv-1', message_id: 'msg-1' })
+      handlers.onProgress?.({
+        stage: 'tool',
+        label: 'Jarvis 正在调用工具',
+        agent: 'executor',
+        tool_name: 'search_knowledge',
+        step: '调用工具 search_knowledge',
+        steps: ['理解问题', '检索知识'],
+      })
+      handlers.onChunk?.({ content: '最终回复' })
+    })
+
+    const view = useChatView()
+    await nextTick()
+    await Promise.resolve()
+
+    expect(mocks.systemStatusGet).toHaveBeenCalledTimes(1)
+    expect(view.systemTelemetry.value.cpu.current).toBe(21)
+    expect(view.systemTelemetry.value.memory.current).toBe(48)
+    expect(view.systemTelemetry.value.disk.current).toBe(63)
+    expect(view.systemTelemetry.value.cpu.series.at(-1)).toBe(21)
+
+    view.inputMessage.value = '测试问题'
+    const promise = view.sendMessage()
+    await Promise.resolve()
+
+    expect(view.sessionTelemetry.value.eventsCount).toBe(2)
+    expect(view.sessionTelemetry.value.toolCount).toBe(1)
+    expect(view.sessionTelemetry.value.agentCount).toBe(1)
+    expect(view.sessionTelemetry.value.activitySeries.some((point) => point > 0)).toBe(true)
+    expect(view.store.messages).toHaveLength(1)
+
+    await promise
+
+    expect(view.store.messages).toHaveLength(2)
+    expect(view.store.messages.every((message) => !('activitySeries' in message))).toBe(true)
+  })
+
+  it('keeps the orchestration panel persistent and confines thinking state to the side panel', async () => {
+    mocks.chatStream.mockImplementation(async (_message, _conversationId, _fileIds, _modelName, handlers) => {
+      handlers.onMetadata?.({ conversation_id: 'conv-1', message_id: 'msg-1' })
+      handlers.onProgress?.({
+        stage: 'planning',
+        label: 'Jarvis 正在拆解步骤',
+        agent: 'planner',
+        tool_name: null,
+        step: '正在分配任务',
+        steps: ['理解问题', '分配 planner'],
+      })
+      handlers.onChunk?.({ content: '最终回复' })
+    })
+
+    const view = useChatView()
+    view.inputMessage.value = '测试问题'
+
+    const promise = view.sendMessage()
+    await Promise.resolve()
+
+    expect(view.store.messages).toHaveLength(1)
+    expect(view.store.messages[0].role).toBe('user')
+    expect(view.isTyping.value).toBe(true)
+    expect(view.orchestrationPanelVisible.value).toBe(true)
+    expect(view.orchestrationStatus.value).toBe('active')
+    expect(view.activeAgent.value).toBe('planner')
+    expect(view.visitedAgents.value).toContain('planner')
+    expect(view.orchestrationEventFeed.value.map((item) => item.label)).toContain('正在分配任务')
+
+    await promise
+
+    expect(view.store.messages).toHaveLength(2)
+    expect(view.store.messages[1].role).toBe('assistant')
+    expect(view.store.messages[1].content).toBe('最终回复')
+    expect(view.orchestrationPanelVisible.value).toBe(true)
+    expect(view.orchestrationStatus.value).toBe('complete')
+    expect(view.orchestrationEventFeed.value.at(-1)?.label).toBe('响应已生成')
+    expect(view.activeAgent.value).toBe('planner')
+    expect(view.store.messages).toHaveLength(2)
+  })
+})
diff --git a/frontend/src/pages/chat/composables/useChatView.ts b/frontend/src/pages/chat/composables/useChatView.ts
index e4a12e9..b29f879 100644
--- a/frontend/src/pages/chat/composables/useChatView.ts
+++ b/frontend/src/pages/chat/composables/useChatView.ts
@@ -1,7 +1,14 @@
-import { nextTick, onMounted, ref } from 'vue'
+import { computed, nextTick, onMounted, onUnmounted, ref } from 'vue'
 import { useConversationStore } from '@/stores/conversation'
-import { conversationApi, type Message } from '@/api/conversation'
+import { useAuthStore } from '@/stores/auth'
+import {
+  conversationApi,
+  type ChatProgressEvent,
+  type Message,
+} from '@/api/conversation'
 import { documentApi } from '@/api/document'
+import { settingsApi, type LLMModelConfig } from '@/api/settings'
+import { systemApi } from '@/api/system'
 
 export interface SelectedFile {
   id: string
@@ -14,8 +21,51 @@ interface MessageWithAttachments extends Message {
   attachments?: SelectedFile[]
 }
 
+interface ThinkingState {
+  stage: ChatProgressEvent['stage']
+  label: string
+  agent?: string | null
+  toolName?: string | null
+  step?: string | null
+  steps: string[]
+}
+
+interface OrchestrationEventItem {
+  id: string
+  label: string
+  kind: 'info' | 'tool' | 'success' | 'error'
+}
+
+interface OrchestrationInsight {
+  statusTitle: string
+  systemSummary: string
+  jarvisNote: string
+}
+
+interface TelemetryMetricState {
+  current: number | null
+  series: number[]
+  online: boolean
+}
+
+interface SystemTelemetryState {
+  cpu: TelemetryMetricState
+  memory: TelemetryMetricState
+  disk: TelemetryMetricState
+}
+
+interface SessionTelemetryState {
+  activitySeries: number[]
+  eventsCount: number
+  toolCount: number
+  agentCount: number
+}
+
+type OrchestrationStatus = 'idle' | 'active' | 'complete' | 'error'
+
 export function useChatView() {
   const store = useConversationStore()
+  const auth = useAuthStore()
   const inputMessage = ref('')
   const isSending = ref(false)
   const chatContainer = ref<HTMLElement>()
@@ -24,18 +74,222 @@ export function useChatView() {
   const fileInputRef = ref<HTMLInputElement>()
   const showEmojiPicker = ref(false)
   const selectedFiles = ref<SelectedFile[]>([])
+  const chatModels = ref<LLMModelConfig[]>([])
+  const selectedModelName = ref('')
+  const isLoadingModels = ref(false)
+  const conversationsError = ref('')
+  const currentSelectionRequestId = ref(0)
+  const thinkingState = ref<ThinkingState | null>(null)
+  const orchestrationPanelVisible = ref(true)
+  const orchestrationStatus = ref<OrchestrationStatus>('idle')
+  const orchestrationInsight = ref<OrchestrationInsight>({
+    statusTitle: 'STANDBY',
+    systemSummary: '等待请求接入',
+    jarvisNote: '系统在线。希望下一项任务别太无聊。',
+  })
+  const activeAgent = ref<string | null>(null)
+  const visitedAgents = ref<string[]>([])
+  const orchestrationEventFeed = ref<OrchestrationEventItem[]>([])
+  const systemTelemetry = ref<SystemTelemetryState>({
+    cpu: { current: null, series: [], online: false },
+    memory: { current: null, series: [], online: false },
+    disk: { current: null, series: [], online: false },
+  })
+  const sessionTelemetry = ref<SessionTelemetryState>({
+    activitySeries: [],
+    eventsCount: 0,
+    toolCount: 0,
+    agentCount: 0,
+  })
+  const selectedModel = computed(() => chatModels.value.find((model) => model.name === selectedModelName.value) ?? null)
+  let systemTelemetryTimer: ReturnType<typeof setInterval> | null = null
+  let sessionTelemetryTimer: ReturnType<typeof setInterval> | null = null
+
+  function resetOrchestrationState() {
+    orchestrationPanelVisible.value = true
+    orchestrationStatus.value = 'idle'
+    orchestrationInsight.value = {
+      statusTitle: 'STANDBY',
+      systemSummary: '等待请求接入',
+      jarvisNote: '系统在线。希望下一项任务别太无聊。',
+    }
+    activeAgent.value = null
+    visitedAgents.value = []
+    orchestrationEventFeed.value = []
+    sessionTelemetry.value = {
+      activitySeries: [],
+      eventsCount: 0,
+      toolCount: 0,
+      agentCount: 0,
+    }
+  }
+
+  function appendTelemetryPoint(series: number[], value: number, limit = 24) {
+    return [...series, value].slice(-limit)
+  }
+
+  function markSessionActivity(value: number, options?: { tool?: boolean; agent?: string | null }) {
+    sessionTelemetry.value = {
+      activitySeries: appendTelemetryPoint(sessionTelemetry.value.activitySeries, value),
+      eventsCount: sessionTelemetry.value.eventsCount + 1,
+      toolCount: sessionTelemetry.value.toolCount + (options?.tool ? 1 : 0),
+      agentCount: options?.agent && !visitedAgents.value.includes(options.agent)
+        ? sessionTelemetry.value.agentCount + 1
+        : sessionTelemetry.value.agentCount,
+    }
+  }
+
+  function updateSystemTelemetry(metric: keyof SystemTelemetryState, value: number | null, online: boolean) {
+    const current = systemTelemetry.value[metric]
+    systemTelemetry.value = {
+      ...systemTelemetry.value,
+      [metric]: {
+        current: value,
+        online,
+        series: value === null ? current.series : appendTelemetryPoint(current.series, value),
+      },
+    }
+  }
+
+  async function loadSystemStatus() {
+    try {
+      const response = await systemApi.getStatus()
+      updateSystemTelemetry('cpu', response.data.cpu_percent, true)
+      updateSystemTelemetry('memory', response.data.memory_percent, true)
+      updateSystemTelemetry('disk', response.data.disk_percent, true)
+    } catch (error) {
+      console.error('加载系统状态失败:', error)
+      updateSystemTelemetry('cpu', systemTelemetry.value.cpu.current, false)
+      updateSystemTelemetry('memory', systemTelemetry.value.memory.current, false)
+      updateSystemTelemetry('disk', systemTelemetry.value.disk.current, false)
+    }
+  }
+
+  function startSystemTelemetryPolling() {
+    if (systemTelemetryTimer) clearInterval(systemTelemetryTimer)
+    systemTelemetryTimer = setInterval(() => {
+      void loadSystemStatus()
+    }, 2000)
+  }
+
+  function startSessionTelemetryDecay() {
+    if (sessionTelemetryTimer) clearInterval(sessionTelemetryTimer)
+    sessionTelemetryTimer = setInterval(() => {
+      const lastValue = sessionTelemetry.value.activitySeries.at(-1) ?? 0
+      const nextValue = Math.max(0, Math.round(lastValue * 0.72) - 2)
+      sessionTelemetry.value = {
+        ...sessionTelemetry.value,
+        activitySeries: appendTelemetryPoint(sessionTelemetry.value.activitySeries, nextValue),
+      }
+    }, 1200)
+  }
+
+  function pushOrchestrationEvent(label: string, kind: OrchestrationEventItem['kind']) {
+    const normalized = label.trim()
+    if (!normalized) return
+    if (orchestrationEventFeed.value.at(-1)?.label === normalized) return
+    orchestrationEventFeed.value = [
+      ...orchestrationEventFeed.value,
+      {
+        id: `${Date.now()}-${orchestrationEventFeed.value.length}`,
+        label: normalized,
+        kind,
+      },
+    ].slice(-5)
+  }
+
+  function buildOrchestrationInsight(payload: ChatProgressEvent): OrchestrationInsight {
+    if (payload.stage === 'thinking') {
+      return {
+        statusTitle: 'ANALYSIS',
+        systemSummary: payload.agent ? '正在解析请求并评估处理路径' : '正在解析请求意图',
+        jarvisNote: payload.steps?.length
+          ? '这件事比表面复杂一点，我宁可先把结构看清。'
+          : '这个请求不算棘手，先让我确认范围。',
+      }
+    }
+
+    if (payload.stage === 'planning') {
+      return {
+        statusTitle: 'ROUTING',
+        systemSummary: payload.agent === 'planner' ? '已路由至 planner，正在拆解任务' : '正在规划执行链路',
+        jarvisNote: payload.steps?.length
+          ? '问题有几层关系，按顺序拆开会体面很多。'
+          : '这一步需要一点秩序感。',
+      }
+    }
+
+    if (payload.stage === 'tool') {
+      return {
+        statusTitle: 'EXECUTION',
+        systemSummary: payload.tool_name ? `正在调用工具 · ${payload.tool_name}` : '正在执行操作',
+        jarvisNote: payload.tool_name
+          ? '工具链已接通。希望它今天愿意配合。'
+          : '执行阶段开始了，接下来看看链路表现。',
+      }
+    }
+
+    return {
+      statusTitle: 'SYNTHESIS',
+      systemSummary: payload.agent === 'analyst' ? 'analyst 正在整理结果' : '结果已收集，正在整理回答',
+      jarvisNote: '信息已经够用了，我来把它变得清晰一点。',
+    }
+  }
+
+  function applyProgressToOrchestration(payload: ChatProgressEvent) {
+    orchestrationPanelVisible.value = true
+    orchestrationStatus.value = 'active'
+    orchestrationInsight.value = buildOrchestrationInsight(payload)
+    const isNewAgent = Boolean(payload.agent && !visitedAgents.value.includes(payload.agent))
+    activeAgent.value = payload.agent || null
+    markSessionActivity(payload.tool_name ? 92 : 68, {
+      tool: Boolean(payload.tool_name),
+      agent: isNewAgent ? payload.agent || null : null,
+    })
+    if (payload.agent && isNewAgent) {
+      visitedAgents.value = [...visitedAgents.value, payload.agent]
+    }
+
+    if (payload.step) {
+      pushOrchestrationEvent(payload.step, payload.tool_name ? 'tool' : 'info')
+    } else if (payload.tool_name) {
+      pushOrchestrationEvent(`调用工具 · ${payload.tool_name}`, 'tool')
+    } else {
+      pushOrchestrationEvent(payload.label, 'info')
+    }
+  }
+
+  function finalizeOrchestration(status: Exclude<OrchestrationStatus, 'idle' | 'active'>, finalLabel: string) {
+    orchestrationPanelVisible.value = true
+    orchestrationStatus.value = status
+    orchestrationInsight.value = status === 'error'
+      ? {
+          statusTitle: 'ERROR',
+          systemSummary: '执行中断，等待进一步处理',
+          jarvisNote: '结果不理想，不过问题已经开始显形。',
+        }
+      : {
+          statusTitle: 'COMPLETE',
+          systemSummary: '执行完成，结果已生成',
+          jarvisNote: '很好，问题已经收束。',
+        }
+    pushOrchestrationEvent(finalLabel, status === 'error' ? 'error' : 'success')
+  }
 
   async function sendMessage() {
     if (!inputMessage.value.trim() || isSending.value) return
 
+    resetOrchestrationState()
     isSending.value = true
     isTyping.value = true
     const text = inputMessage.value.trim()
     const attachments = [...selectedFiles.value]
+    const tempMessageId = `temp-${Date.now()}`
+    const previousConversationId = store.currentConversationId
     inputMessage.value = ''
 
     store.addMessage({
-      id: `temp-${Date.now()}`,
+      id: tempMessageId,
       role: 'user',
       content: text,
       created_at: new Date().toISOString(),
@@ -45,28 +299,74 @@ export function useChatView() {
     await nextTick()
     scrollToBottom()
 
+    let finalConversationId = previousConversationId
+    let finalMessageId = ''
+    let finalContent = ''
+    let streamError = ''
+
     try {
-      const response = await conversationApi.chat(text, store.currentConversationId || undefined, attachments.map((file) => file.id))
+      await conversationApi.chatStream(
+        text,
+        previousConversationId ?? undefined,
+        attachments.map((file) => file.id),
+        selectedModelName.value || undefined,
+        {
+          onMetadata(payload) {
+            finalConversationId = payload.conversation_id
+            finalMessageId = payload.message_id
+            if (previousConversationId === null) {
+              store.setCurrentConversation(payload.conversation_id)
+            }
+          },
+          onProgress(payload) {
+            thinkingState.value = {
+              stage: payload.stage,
+              label: payload.label,
+              agent: payload.agent,
+              toolName: payload.tool_name,
+              step: payload.step,
+              steps: payload.steps || [],
+            }
+            applyProgressToOrchestration(payload)
+          },
+          onChunk(payload) {
+            finalContent += payload.content
+            markSessionActivity(54)
+          },
+          onError(message) {
+            streamError = message
+          },
+        },
+      )
+
+      if (streamError) {
+        throw new Error(streamError)
+      }
+
       selectedFiles.value = []
       isTyping.value = false
       store.addMessage({
-        id: response.data.message_id,
+        id: finalMessageId || `assistant-${Date.now()}`,
         role: 'assistant',
-        content: response.data.content,
-        model: response.data.agent_name,
+        content: finalContent || '抱歉，我暂时没有生成可用回复。',
+        model: selectedModelName.value || selectedModel.value?.name || 'jarvis',
         created_at: new Date().toISOString(),
       })
-      if (!store.currentConversationId) {
-        store.setCurrentConversation(response.data.conversation_id)
-        await loadConversations()
+      if (finalConversationId && previousConversationId === null) {
+        store.setCurrentConversation(finalConversationId)
       }
-    } catch (error) {
+      finalizeOrchestration('complete', '响应已生成')
+      await loadConversations()
+    } catch (error: any) {
       isTyping.value = false
       console.error('发送失败:', error)
+      const content = error?.message || '抱歉，连接失败。请检查服务状态。'
+      finalizeOrchestration('error', content)
+      store.removeMessage(tempMessageId)
       store.addMessage({
         id: `err-${Date.now()}`,
         role: 'assistant',
-        content: '抱歉，连接失败。请检查服务状态。',
+        content,
         created_at: new Date().toISOString(),
       })
     }
@@ -77,29 +377,65 @@ export function useChatView() {
   }
 
   async function loadConversations() {
+    conversationsError.value = ''
     try {
       const response = await conversationApi.list()
       store.setConversations(response.data)
     } catch (error) {
+      conversationsError.value = '加载会话失败，请稍后重试'
       console.error('加载对话列表失败:', error)
     }
   }
 
+  async function loadChatModels() {
+    isLoadingModels.value = true
+    try {
+      const response = await settingsApi.get()
+      const chatModelsList = (response.data.llm_config?.chat || []).filter((model) => model.enabled)
+      const vlmModels = (response.data.llm_config?.vlm || []).filter((model) => model.enabled)
+      // 合并 chat 和 vlm 模型
+      chatModels.value = [...chatModelsList, ...vlmModels]
+      if (!selectedModelName.value || !chatModels.value.some((model) => model.name === selectedModelName.value)) {
+        selectedModelName.value = chatModels.value[0]?.name || ''
+      }
+    } catch (error) {
+      console.error('加载聊天模型失败:', error)
+      chatModels.value = []
+      selectedModelName.value = ''
+    } finally {
+      isLoadingModels.value = false
+    }
+  }
+
   async function selectConversation(id: string) {
+    resetOrchestrationState()
+    thinkingState.value = null
+    isTyping.value = false
+    const requestId = currentSelectionRequestId.value + 1
+    currentSelectionRequestId.value = requestId
     store.setCurrentConversation(id)
     store.setMessages([])
     try {
       const response = await conversationApi.getMessages(id)
+      if (currentSelectionRequestId.value !== requestId || store.currentConversationId !== id) {
+        return
+      }
       store.setMessages(response.data)
       await nextTick()
       scrollToBottom()
     } catch (error) {
+      if (currentSelectionRequestId.value === requestId) {
+        store.setMessages([])
+      }
       console.error('加载消息失败:', error)
     }
   }
 
   function newConversation() {
-    store.setCurrentConversation('')
+    resetOrchestrationState()
+    thinkingState.value = null
+    isTyping.value = false
+    store.setCurrentConversation(null)
     store.setMessages([])
     inputRef.value?.focus()
   }
@@ -110,7 +446,7 @@ export function useChatView() {
       await conversationApi.delete(id)
       store.removeConversation(id)
       if (store.currentConversationId === id) {
-        store.setCurrentConversation('')
+        store.setCurrentConversation(null)
         store.setMessages([])
       }
     } catch (error) {
@@ -181,11 +517,23 @@ export function useChatView() {
     fileInputRef.value?.click()
   }
 
-  onMounted(() => {
-    loadConversations()
+  void loadSystemStatus()
+  startSystemTelemetryPolling()
+  startSessionTelemetryDecay()
+
+  onMounted(async () => {
+    await auth.ensureAuthReady()
+    if (auth.isAuthenticated && auth.user) {
+      await Promise.all([loadConversations(), loadChatModels(), loadSystemStatus()])
+    }
     inputRef.value?.focus()
   })
 
+  onUnmounted(() => {
+    if (systemTelemetryTimer) clearInterval(systemTelemetryTimer)
+    if (sessionTelemetryTimer) clearInterval(sessionTelemetryTimer)
+  })
+
   return {
     store,
     inputMessage,
@@ -196,6 +544,20 @@ export function useChatView() {
     fileInputRef,
     showEmojiPicker,
     selectedFiles,
+    chatModels,
+    selectedModelName,
+    selectedModel,
+    isLoadingModels,
+    conversationsError,
+    thinkingState,
+    orchestrationPanelVisible,
+    orchestrationStatus,
+    orchestrationInsight,
+    activeAgent,
+    visitedAgents,
+    orchestrationEventFeed,
+    systemTelemetry,
+    sessionTelemetry,
     sendMessage,
     selectConversation,
     newConversation,
diff --git a/frontend/src/pages/chat/index.vue b/frontend/src/pages/chat/index.vue
index dc8d002..22268cd 100644
--- a/frontend/src/pages/chat/index.vue
+++ b/frontend/src/pages/chat/index.vue
@@ -2,6 +2,8 @@
 import { MessageCircle, Trash2, Send, Sparkles, CornerDownLeft, Paperclip, Smile } from 'lucide-vue-next'
 import EmojiPicker from '@/components/chat/EmojiPicker.vue'
 import FileMessage from '@/components/chat/FileMessage.vue'
+import TelemetrySparkline from '@/components/chat/TelemetrySparkline.vue'
+import OrchestrationPanel from '@/components/chat/OrchestrationPanel.vue'
 import { useChatView } from '@/pages/chat/composables/useChatView'
 
 const {
@@ -13,6 +15,19 @@ const {
   isTyping,
   fileInputRef,
   showEmojiPicker,
+  chatModels,
+  selectedModelName,
+  selectedModel,
+  isLoadingModels,
+  conversationsError,
+  orchestrationPanelVisible,
+  orchestrationStatus,
+  orchestrationInsight,
+  activeAgent,
+  visitedAgents,
+  orchestrationEventFeed,
+  systemTelemetry,
+  sessionTelemetry,
   sendMessage,
   selectConversation,
   newConversation,
@@ -24,19 +39,165 @@ const {
   insertEmoji,
   openFilePicker,
 } = useChatView()
+
+function extractThinkParts(content: string) {
+  const thinkPattern = /<think>([\s\S]*?)<\/think>/gi
+  const thinkBlocks = Array.from(content.matchAll(thinkPattern))
+    .map((match) => match[1]?.trim())
+    .filter((block): block is string => Boolean(block))
+
+  const visibleContent = content.replace(thinkPattern, '').trim()
+
+  return {
+    hasThink: thinkBlocks.length > 0,
+    thinkBlocks,
+    visibleContent,
+  }
+}
+
+function escapeHtml(content: string) {
+  return content
+    .replaceAll('&', '&amp;')
+    .replaceAll('<', '&lt;')
+    .replaceAll('>', '&gt;')
+    .replaceAll('"', '&quot;')
+    .replaceAll("'", '&#39;')
+}
+
+function renderInlineMarkdown(content: string) {
+  return content
+    .replace(/`([^`]+)`/g, '<code>$1</code>')
+    .replace(/\*\*([^*]+)\*\*/g, '<strong>$1</strong>')
+    .replace(/\*([^*]+)\*/g, '<em>$1</em>')
+}
+
+function isMarkdownTable(lines: string[]) {
+  return lines.length >= 2
+    && lines[0].includes('|')
+    && lines[1].includes('|')
+    && lines[1].split('|').filter(Boolean).every((cell) => /^\s*:?-{3,}:?\s*$/.test(cell))
+}
+
+function splitTableRow(line: string) {
+  return line
+    .trim()
+    .replace(/^\|/, '')
+    .replace(/\|$/, '')
+    .split('|')
+    .map((cell) => cell.trim())
+}
+
+function renderMarkdown(content: string) {
+  const normalizedContent = content
+    .replace(/\\r\\n/g, '\n')
+    .replace(/\\n/g, '\n')
+    .replace(/\r\n/g, '\n')
+
+  const normalized = escapeHtml(normalizedContent)
+  const blocks = normalized.split(/\n\n+/)
+
+  return blocks.map((block) => {
+    const trimmed = block.trim()
+    if (!trimmed) return ''
+
+    if (/^```[\s\S]*```$/.test(trimmed)) {
+      const code = trimmed.replace(/^```\w*\n?/, '').replace(/```$/, '').trimEnd()
+      return `<pre class="md-pre"><code>${code}</code></pre>`
+    }
+
+    const lines = trimmed.split('\n')
+
+    if (isMarkdownTable(lines)) {
+      const [headerLine, , ...bodyLines] = lines
+      const headers = splitTableRow(headerLine)
+      const thead = `<thead><tr>${headers.map((cell) => `<th>${renderInlineMarkdown(cell)}</th>`).join('')}</tr></thead>`
+      const tbody = bodyLines.length
+        ? `<tbody>${bodyLines.map((line) => `<tr>${splitTableRow(line).map((cell) => `<td>${renderInlineMarkdown(cell)}</td>`).join('')}</tr>`).join('')}</tbody>`
+        : ''
+      return `<div class="md-table-wrap"><table class="md-table">${thead}${tbody}</table></div>`
+    }
+
+    if (lines.every((line) => /^\s*[-*]\s+/.test(line))) {
+      const items = lines
+        .map((line) => line.replace(/^\s*[-*]\s+/, '').trim())
+        .map((line) => `<li>${renderInlineMarkdown(line)}</li>`)
+        .join('')
+      return `<ul class="md-list">${items}</ul>`
+    }
+
+    if (lines.every((line) => /^\s*\d+\.\s+/.test(line))) {
+      const items = lines
+        .map((line) => line.replace(/^\s*\d+\.\s+/, '').trim())
+        .map((line) => `<li>${renderInlineMarkdown(line)}</li>`)
+        .join('')
+      return `<ol class="md-list">${items}</ol>`
+    }
+
+    if (/^#{1,3}\s+/.test(trimmed)) {
+      const level = Math.min((trimmed.match(/^#+/)?.[0].length || 1) + 1, 6)
+      const text = trimmed.replace(/^#{1,3}\s+/, '')
+      return `<h${level} class="md-heading">${renderInlineMarkdown(text)}</h${level}>`
+    }
+
+    return `<p>${renderInlineMarkdown(trimmed).replace(/\n/g, '<br>')}</p>`
+  }).join('')
+}
 </script>
 
 <template>
   <div class="chat-view">
     <!-- Conversation list sidebar -->
     <aside class="conv-sidebar">
+      <div class="sidebar-runtime-panel" :class="`is-${orchestrationStatus}`">
+        <div class="section-label">// RUNTIME STATUS</div>
+        <div class="runtime-grid">
+          <div class="runtime-card cpu-card">
+            <div class="runtime-topline">
+              <span class="runtime-label">CPU</span>
+              <span class="runtime-value">{{ systemTelemetry.cpu.online && systemTelemetry.cpu.current !== null ? `${systemTelemetry.cpu.current}%` : 'OFFLINE' }}</span>
+            </div>
+            <TelemetrySparkline :points="systemTelemetry.cpu.series" stroke="#22d3ee" fill="rgba(34, 211, 238, 0.16)" />
+          </div>
+          <div class="runtime-card mem-card">
+            <div class="runtime-topline">
+              <span class="runtime-label">MEM</span>
+              <span class="runtime-value">{{ systemTelemetry.memory.online && systemTelemetry.memory.current !== null ? `${systemTelemetry.memory.current}%` : 'OFFLINE' }}</span>
+            </div>
+            <TelemetrySparkline :points="systemTelemetry.memory.series" stroke="#a78bfa" fill="rgba(167, 139, 250, 0.14)" />
+          </div>
+          <div class="runtime-card disk-card">
+            <div class="runtime-topline">
+              <span class="runtime-label">DISK</span>
+              <span class="runtime-value">{{ systemTelemetry.disk.online && systemTelemetry.disk.current !== null ? `${systemTelemetry.disk.current}%` : 'OFFLINE' }}</span>
+            </div>
+            <TelemetrySparkline :points="systemTelemetry.disk.series" stroke="#4ade80" fill="rgba(74, 222, 128, 0.14)" />
+          </div>
+        </div>
+        <div class="runtime-activity-card">
+          <div class="runtime-activity-head">
+            <span class="runtime-activity-title">SESSION ACTIVITY</span>
+            <span class="runtime-badge">{{ orchestrationStatus === 'active' ? 'LIVE' : 'IDLE' }}</span>
+          </div>
+          <TelemetrySparkline :points="sessionTelemetry.activitySeries" stroke="#f59e0b" fill="rgba(245, 158, 11, 0.16)" />
+          <div class="runtime-stats">
+            <div class="runtime-stat">
+              <span class="runtime-stat-key">EVENTS</span>
+              <span class="runtime-stat-value">{{ sessionTelemetry.eventsCount }}</span>
+            </div>
+            <div class="runtime-stat">
+              <span class="runtime-stat-key">AGENTS</span>
+              <span class="runtime-stat-value">{{ sessionTelemetry.agentCount }}</span>
+            </div>
+            <div class="runtime-stat">
+              <span class="runtime-stat-key">TOOLS</span>
+              <span class="runtime-stat-value">{{ sessionTelemetry.toolCount }}</span>
+            </div>
+          </div>
+        </div>
+      </div>
+
       <div class="conv-sidebar-header">
         <div class="section-label">// SESSIONS</div>
-        <button class="new-chat-btn" @click="newConversation">
-          <span class="btn-line"></span>
-          <MessageCircle :size="14" />
-          <span>NEW SESSION</span>
-        </button>
       </div>
 
       <div class="conv-list">
@@ -52,7 +213,7 @@ const {
           </div>
           <div class="conv-item-body">
             <div class="conv-title">{{ conv.title || 'New Conversation' }}</div>
-            <div class="conv-date">{{ formatConvDate(conv.created_at) }}</div>
+            <div class="conv-date">{{ formatConvDate(conv.updated_at || conv.created_at) }}</div>
           </div>
           <button class="conv-delete" @click="deleteConversation(conv.id, $event)">
             <Trash2 :size="12" />
@@ -60,148 +221,237 @@ const {
           <div class="conv-active-line"></div>
         </div>
 
-        <div v-if="store.conversations.length === 0" class="conv-empty">
+        <div v-if="conversationsError" class="conv-empty">
+          <div class="empty-icon"><MessageCircle :size="24" /></div>
+          <div class="empty-text">{{ conversationsError }}</div>
+          <div class="empty-hint">请刷新页面或重新登录后重试</div>
+        </div>
+
+        <div v-else-if="store.conversations.length === 0" class="conv-empty">
           <div class="empty-icon"><MessageCircle :size="24" /></div>
           <div class="empty-text">No sessions yet</div>
-          <div class="empty-hint">Start a new conversation</div>
+          <div class="empty-hint">Send a message to create one</div>
         </div>
       </div>
+
+      <div class="conv-sidebar-footer">
+        <button class="new-chat-btn muted" @click="newConversation">
+          <span class="btn-line"></span>
+          <MessageCircle :size="14" />
+          <span>NEW SESSION</span>
+        </button>
+      </div>
     </aside>
 
     <!-- Chat area -->
     <section class="chat-area">
-      <!-- Top bar -->
-      <div class="chat-topbar">
-        <div class="chat-status">
-          <div class="status-indicator" :class="{ active: !isSending }"></div>
-          <span class="status-text">{{ isTyping ? 'PROCESSING...' : 'READY' }}</span>
-        </div>
-        <div class="chat-model" v-if="store.messages.length > 0">
-          <Sparkles :size="12" />
-          <span>JARVIS v2.0</span>
-        </div>
-      </div>
-
-      <!-- Messages -->
-      <div ref="chatContainer" class="messages-area">
-        <!-- Welcome screen -->
-        <div v-if="store.messages.length === 0" class="welcome-screen">
-          <div class="welcome-icon">
-            <div class="welcome-ring r1"></div>
-            <div class="welcome-ring r2"></div>
-            <div class="welcome-ring r3"></div>
-            <div class="welcome-core">
-              <Sparkles :size="28" />
+      <div class="chat-shell">
+        <div class="chat-main">
+          <!-- Top bar -->
+          <div class="chat-topbar">
+            <div class="chat-status">
+              <div class="status-indicator" :class="{ active: !isSending }"></div>
+              <span class="status-text">{{ isTyping ? 'PROCESSING...' : 'READY' }}</span>
+            </div>
+            <div class="chat-model-panel">
+              <label class="chat-model-label" for="chat-model-select">
+                <Sparkles :size="12" />
+                <span>CHAT MODEL</span>
+              </label>
+              <select
+                id="chat-model-select"
+                v-model="selectedModelName"
+                class="chat-model-select"
+                :disabled="isSending || isLoadingModels || chatModels.length === 0"
+              >
+                <option v-if="chatModels.length === 0" value="">
+                  {{ isLoadingModels ? 'Loading models...' : 'No chat models' }}
+                </option>
+                <option v-for="model in chatModels" :key="model.name" :value="model.name">
+                  {{ model.name }} · {{ model.provider }}
+                </option>
+              </select>
+              <div v-if="selectedModel" class="chat-model">
+                <Sparkles :size="12" />
+                <span>{{ selectedModel.model }}</span>
+              </div>
             </div>
           </div>
-          <div class="welcome-title">JARVIS</div>
-          <div class="welcome-sub">Personal AI Assistant</div>
-          <div class="welcome-hint">有什么我可以帮你的？</div>
-        </div>
 
-        <!-- Message bubbles -->
-        <div
-          v-for="(msg, i) in store.messages"
-          :key="msg.id"
-          class="message-row"
-          :class="msg.role"
-          :style="{ animationDelay: `${i * 30}ms` }"
-        >
-          <div class="msg-avatar">
-            <span v-if="msg.role === 'user'">{{ '>' }}</span>
-            <span v-else class="ai-icon">J</span>
-          </div>
-          <div class="msg-content">
-            <div class="msg-meta">
-              <span class="msg-role">{{ msg.role === 'user' ? 'YOU' : 'JARVIS' }}</span>
-              <span class="msg-time">{{ formatTime(msg.created_at) }}</span>
+          <!-- Messages -->
+          <div ref="chatContainer" class="messages-area">
+            <!-- Welcome screen -->
+            <div v-if="store.messages.length === 0" class="welcome-screen">
+              <div class="welcome-icon">
+                <div class="welcome-ring r1"></div>
+                <div class="welcome-ring r2"></div>
+                <div class="welcome-ring r3"></div>
+                <div class="welcome-core">
+                  <Sparkles :size="28" />
+                </div>
+              </div>
+              <div class="welcome-title">JARVIS</div>
+              <div class="welcome-sub">Personal AI Assistant</div>
+              <div class="welcome-hint">有什么我可以帮你的？</div>
             </div>
-            <div class="msg-bubble">{{ msg.content }}</div>
-            <div v-if="msg.role === 'user' && msg.attachments?.length" class="msg-attachments">
-              <FileMessage
-                v-for="att in msg.attachments"
-                :key="att.id"
-                :filename="att.name"
-                :file-type="att.type"
-                :file-size="att.size"
-              />
-            </div>
-          </div>
-        </div>
 
-        <!-- Typing indicator -->
-        <div v-if="isTyping" class="message-row assistant typing-row">
-          <div class="msg-avatar"><span class="ai-icon">J</span></div>
-          <div class="msg-content">
-            <div class="msg-meta">
-              <span class="msg-role">JARVIS</span>
-            </div>
-            <div class="msg-bubble typing">
-              <span class="dot"></span>
-              <span class="dot"></span>
-              <span class="dot"></span>
-            </div>
-          </div>
-        </div>
-      </div>
-
-      <!-- Input area -->
-      <div class="input-area">
-        <div class="input-frame">
-          <div class="input-corners tl"></div>
-          <div class="input-corners tr"></div>
-          <div class="input-corners bl"></div>
-          <div class="input-corners br"></div>
-          <textarea
-            ref="inputRef"
-            v-model="inputMessage"
-            placeholder="输入指令，按 Enter 发送..."
-            :disabled="isSending"
-            rows="1"
-            @keydown.enter.exact.prevent="sendMessage"
-            @input="autoResize"
-          ></textarea>
-          <input
-            ref="fileInputRef"
-            type="file"
-            multiple
-            accept=".jpg,.jpeg,.png,.gif,.webp,.pdf,.doc,.docx,.xls,.xlsx,.ppt,.pptx,.txt"
-            style="display: none"
-            @change="handleFileSelect"
-          />
-          <button class="attach-btn" @click="openFilePicker" title="上传文件">
-            <Paperclip :size="15" />
-          </button>
-          <div class="emoji-wrapper">
-            <button
-              class="emoji-btn"
-              :class="{ active: showEmojiPicker }"
-              @click="showEmojiPicker = !showEmojiPicker"
-              title="表情包"
+            <!-- Message bubbles -->
+            <div
+              v-for="(msg, i) in store.messages"
+              :key="msg.id"
+              class="message-row"
+              :class="msg.role"
+              :style="{ animationDelay: `${i * 30}ms` }"
             >
-              <Smile :size="15" />
-            </button>
-            <EmojiPicker
-              :visible="showEmojiPicker"
-              @select="insertEmoji"
-              @close="showEmojiPicker = false"
-            />
+              <div class="msg-avatar">
+                <span v-if="msg.role === 'user'">{{ '>' }}</span>
+                <span v-else class="ai-icon">J</span>
+              </div>
+              <div class="msg-content">
+                <div class="msg-meta">
+                  <span class="msg-role">{{ msg.role === 'user' ? 'YOU' : 'JARVIS' }}</span>
+                  <span v-if="msg.role === 'assistant' && msg.model" class="msg-model">{{ msg.model }}</span>
+                  <span class="msg-time">{{ formatTime(msg.created_at) }}</span>
+                </div>
+                <template v-if="msg.role === 'assistant' && extractThinkParts(msg.content).hasThink">
+                  <details class="think-panel">
+                    <summary class="think-summary">
+                      <span class="think-chip">
+                        <span class="think-chip-dot"></span>
+                        <span>THINK</span>
+                      </span>
+                    </summary>
+                    <div class="think-content">
+                      <div
+                        v-for="(block, index) in extractThinkParts(msg.content).thinkBlocks"
+                        :key="index"
+                        class="think-block"
+                        v-html="renderMarkdown(block)"
+                      ></div>
+                    </div>
+                  </details>
+                  <div
+                    v-if="extractThinkParts(msg.content).visibleContent"
+                    class="msg-bubble markdown-body"
+                    v-html="renderMarkdown(extractThinkParts(msg.content).visibleContent)"
+                  ></div>
+                </template>
+                <div v-else class="msg-bubble markdown-body" v-html="renderMarkdown(msg.content)"></div>
+                <div v-if="msg.role === 'user' && msg.attachments?.length" class="msg-attachments">
+                  <FileMessage
+                    v-for="att in msg.attachments"
+                    :key="att.id"
+                    :filename="att.name"
+                    :file-type="att.type"
+                    :file-size="att.size"
+                  />
+                </div>
+              </div>
+            </div>
+
+            <div v-if="isTyping" class="message-row assistant thinking-row">
+              <div class="msg-avatar">
+                <span class="ai-icon">J</span>
+              </div>
+              <div class="msg-content">
+                <div class="msg-meta">
+                  <span class="msg-role">JARVIS</span>
+                  <span class="msg-model">thinking</span>
+                </div>
+                <div class="msg-bubble thinking-bubble">
+                  <div class="thinking-hud">
+                    <div class="thinking-core">
+                      <span class="thinking-ring ring-1"></span>
+                      <span class="thinking-ring ring-2"></span>
+                      <span class="thinking-ring ring-3"></span>
+                      <span class="thinking-dot"></span>
+                    </div>
+                    <div class="thinking-copy">
+                      <div class="thinking-title">JARVIS THINKING</div>
+                      <div class="thinking-subtitle">正在分析请求并准备响应</div>
+                    </div>
+                    <div class="typing-inline" aria-hidden="true">
+                      <span class="dot"></span>
+                      <span class="dot"></span>
+                      <span class="dot"></span>
+                    </div>
+                  </div>
+                </div>
+              </div>
+            </div>
+
+          </div>
+
+          <!-- Input area -->
+          <div class="input-area">
+            <div class="input-frame">
+              <div class="input-corners tl"></div>
+              <div class="input-corners tr"></div>
+              <div class="input-corners bl"></div>
+              <div class="input-corners br"></div>
+              <textarea
+                ref="inputRef"
+                v-model="inputMessage"
+                placeholder="输入指令，按 Enter 发送..."
+                :disabled="isSending"
+                rows="1"
+                @keydown.enter.exact.prevent="sendMessage"
+                @input="autoResize"
+              ></textarea>
+              <input
+                ref="fileInputRef"
+                type="file"
+                multiple
+                accept=".jpg,.jpeg,.png,.gif,.webp,.pdf,.doc,.docx,.xls,.xlsx,.ppt,.pptx,.txt"
+                style="display: none"
+                @change="handleFileSelect"
+              />
+              <button class="attach-btn" @click="openFilePicker" title="上传文件">
+                <Paperclip :size="15" />
+              </button>
+              <div class="emoji-wrapper">
+                <button
+                  class="emoji-btn"
+                  :class="{ active: showEmojiPicker }"
+                  @click="showEmojiPicker = !showEmojiPicker"
+                  title="表情包"
+                >
+                  <Smile :size="15" />
+                </button>
+                <EmojiPicker
+                  :visible="showEmojiPicker"
+                  @select="insertEmoji"
+                  @close="showEmojiPicker = false"
+                />
+              </div>
+              <button
+                class="send-btn"
+                :class="{ active: inputMessage.trim() }"
+                :disabled="!inputMessage.trim() || isSending"
+                @click="sendMessage"
+              >
+                <Send :size="15" />
+                <CornerDownLeft :size="12" class="enter-hint" />
+              </button>
+            </div>
+            <div class="input-hints">
+              <span class="hint-item">ENTER 发送</span>
+              <span class="hint-sep">|</span>
+              <span class="hint-item">SHIFT+ENTER 换行</span>
+            </div>
           </div>
-          <button
-            class="send-btn"
-            :class="{ active: inputMessage.trim() }"
-            :disabled="!inputMessage.trim() || isSending"
-            @click="sendMessage"
-          >
-            <Send :size="15" />
-            <CornerDownLeft :size="12" class="enter-hint" />
-          </button>
-        </div>
-        <div class="input-hints">
-          <span class="hint-item">ENTER 发送</span>
-          <span class="hint-sep">|</span>
-          <span class="hint-item">SHIFT+ENTER 换行</span>
         </div>
+
+        <OrchestrationPanel
+          :visible="orchestrationPanelVisible"
+          :status="orchestrationStatus"
+          :insight="orchestrationInsight"
+          :active-agent="activeAgent"
+          :visited-agents="visitedAgents"
+          :events="orchestrationEventFeed"
+          :system-telemetry="systemTelemetry"
+          :session-telemetry="sessionTelemetry"
+        />
       </div>
     </section>
   </div>
@@ -214,10 +464,88 @@ const {
   overflow: hidden;
 }
 
+.sidebar-runtime-panel {
+  padding: 12px 14px;
+  border-bottom: 1px solid var(--border-dim);
+  display: flex;
+  flex-direction: column;
+  gap: 10px;
+  background: linear-gradient(180deg, rgba(7, 12, 24, 0.92), rgba(7, 11, 20, 0.82));
+}
+
+.runtime-grid {
+  display: grid;
+  grid-template-columns: 1fr;
+  gap: 8px;
+}
+
+.runtime-card,
+.runtime-activity-card {
+  border: 1px solid rgba(34, 211, 238, 0.12);
+  border-radius: 12px;
+  background: rgba(10, 16, 30, 0.74);
+  box-shadow: inset 0 1px 0 rgba(255,255,255,0.03);
+  padding: 10px;
+}
+
+.runtime-topline,
+.runtime-activity-head {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 8px;
+  margin-bottom: 8px;
+}
+
+.runtime-label,
+.runtime-activity-title,
+.runtime-stat-key {
+  font-family: var(--font-mono);
+  font-size: 9px;
+  letter-spacing: 0.12em;
+  color: var(--text-dim);
+}
+
+.runtime-value,
+.runtime-stat-value {
+  font-family: var(--font-display);
+  font-size: 10px;
+  letter-spacing: 0.08em;
+  color: var(--text-primary);
+}
+
+.runtime-badge {
+  padding: 3px 7px;
+  border-radius: 999px;
+  border: 1px solid rgba(245, 158, 11, 0.2);
+  background: rgba(245, 158, 11, 0.1);
+  color: var(--accent-amber);
+  font-family: var(--font-mono);
+  font-size: 8px;
+  letter-spacing: 0.14em;
+}
+
+.runtime-stats {
+  margin-top: 8px;
+  display: grid;
+  grid-template-columns: repeat(3, minmax(0, 1fr));
+  gap: 6px;
+}
+
+.runtime-stat {
+  display: flex;
+  flex-direction: column;
+  gap: 2px;
+}
+
+.cpu-card { border-color: rgba(34, 211, 238, 0.22); }
+.mem-card { border-color: rgba(167, 139, 250, 0.22); }
+.disk-card { border-color: rgba(74, 222, 128, 0.22); }
+
 /* ── Conversation Sidebar ── */
 .conv-sidebar {
-  width: 200px;
-  min-width: 200px;
+  width: 260px;
+  min-width: 260px;
   background: var(--bg-panel);
   border-right: 1px solid var(--border-dim);
   display: flex;
@@ -226,7 +554,7 @@ const {
 }
 
 .conv-sidebar-header {
-  padding: 16px 14px 12px;
+  padding: 12px 14px 10px;
   border-bottom: 1px solid var(--border-dim);
 }
 
@@ -235,9 +563,29 @@ const {
   font-size: 9px;
   letter-spacing: 0.15em;
   color: var(--text-dim);
+}
+
+.sidebar-runtime-panel .section-label {
   margin-bottom: 10px;
 }
 
+.conv-sidebar-header .section-label {
+  margin-bottom: 0;
+}
+
+.conv-sidebar-footer {
+  padding: 12px 14px 14px;
+  border-top: 1px solid var(--border-dim);
+}
+
+.new-chat-btn.muted {
+  background: rgba(0, 245, 212, 0.08);
+}
+
+.new-chat-btn.muted:hover {
+  background: rgba(0, 245, 212, 0.14);
+}
+
 .new-chat-btn {
   display: flex;
   align-items: center;
@@ -378,10 +726,22 @@ const {
 /* ── Chat Area ── */
 .chat-area {
   flex: 1;
+  overflow: hidden;
+  position: relative;
+}
+
+.chat-shell {
+  display: flex;
+  height: 100%;
+  overflow: hidden;
+}
+
+.chat-main {
+  flex: 1;
+  min-width: 0;
   display: flex;
   flex-direction: column;
   overflow: hidden;
-  position: relative;
 }
 
 .chat-topbar {
@@ -420,6 +780,39 @@ const {
   color: var(--text-dim);
 }
 
+.chat-model-panel {
+  display: flex;
+  align-items: center;
+  gap: 10px;
+}
+
+.chat-model-label {
+  display: flex;
+  align-items: center;
+  gap: 6px;
+  font-family: var(--font-mono);
+  font-size: 10px;
+  letter-spacing: 0.12em;
+  color: var(--text-dim);
+}
+
+.chat-model-select {
+  min-width: 220px;
+  padding: 7px 12px;
+  border: 1px solid rgba(34, 211, 238, 0.2);
+  border-radius: 10px;
+  background: rgba(10, 16, 28, 0.92);
+  color: var(--text-main);
+  font-family: var(--font-mono);
+  font-size: 12px;
+  outline: none;
+}
+
+.chat-model-select:disabled {
+  opacity: 0.6;
+  cursor: not-allowed;
+}
+
 .chat-model {
   display: flex;
   align-items: center;
@@ -516,6 +909,14 @@ const {
   animation: fade-in-up 0.3s ease both;
 }
 
+.message-row.user {
+  flex-direction: row-reverse;
+}
+
+.message-row.assistant {
+  justify-content: flex-start;
+}
+
 .msg-avatar {
   width: 32px;
   height: 32px;
@@ -544,9 +945,18 @@ const {
 }
 
 .msg-content {
-  flex: 1;
+  display: flex;
+  flex-direction: column;
   min-width: 0;
-  max-width: 75%;
+  max-width: min(75%, 820px);
+}
+
+.user .msg-content {
+  align-items: flex-end;
+}
+
+.assistant .msg-content {
+  align-items: flex-start;
 }
 
 .msg-meta {
@@ -554,6 +964,11 @@ const {
   align-items: center;
   gap: 10px;
   margin-bottom: 4px;
+  flex-wrap: wrap;
+}
+
+.user .msg-meta {
+  justify-content: flex-end;
 }
 
 .msg-role {
@@ -563,6 +978,13 @@ const {
   color: var(--text-dim);
 }
 
+.msg-model {
+  font-family: var(--font-mono);
+  font-size: 10px;
+  color: var(--accent-cyan);
+  letter-spacing: 0.08em;
+}
+
 .msg-time {
   font-family: var(--font-mono);
   font-size: 9px;
@@ -571,6 +993,7 @@ const {
 
 .msg-bubble {
   display: inline-block;
+  max-width: 100%;
   padding: 10px 16px;
   border-radius: var(--radius-md);
   font-size: 13px;
@@ -594,8 +1017,243 @@ const {
   backdrop-filter: blur(4px);
 }
 
+.think-panel {
+  margin-bottom: 8px;
+}
+
+.think-summary {
+  cursor: pointer;
+  list-style: none;
+  user-select: none;
+}
+
+.think-summary::-webkit-details-marker {
+  display: none;
+}
+
+.think-chip {
+  display: inline-flex;
+  align-items: center;
+  gap: 6px;
+  padding: 5px 10px;
+  border-radius: 999px;
+  border: 1px solid rgba(167, 139, 250, 0.22);
+  background: linear-gradient(135deg, rgba(40, 24, 68, 0.72), rgba(18, 24, 48, 0.72));
+  color: #c4b5fd;
+  font-family: var(--font-mono);
+  font-size: 9px;
+  letter-spacing: 0.16em;
+  box-shadow: inset 0 1px 0 rgba(255,255,255,0.03), 0 0 12px rgba(167, 139, 250, 0.08);
+}
+
+.think-chip-dot {
+  width: 6px;
+  height: 6px;
+  border-radius: 50%;
+  background: currentColor;
+  box-shadow: 0 0 8px currentColor;
+}
+
+.think-content {
+  margin-top: 8px;
+  padding: 10px 12px;
+  border: 1px solid rgba(167, 139, 250, 0.14);
+  border-radius: 12px;
+  background: rgba(18, 20, 34, 0.55);
+  display: flex;
+  flex-direction: column;
+  gap: 10px;
+}
+
+.think-block {
+  font-size: 12px;
+  line-height: 1.6;
+  color: var(--text-dim);
+}
+
+.markdown-body :deep(p),
+.think-block :deep(p) {
+  margin: 0;
+}
+
+.markdown-body :deep(p + p),
+.think-block :deep(p + p) {
+  margin-top: 10px;
+}
+
+.markdown-body :deep(.md-heading),
+.think-block :deep(.md-heading) {
+  margin: 0 0 8px;
+  font-size: 13px;
+  line-height: 1.5;
+  color: var(--text-primary);
+}
+
+.markdown-body :deep(.md-list),
+.think-block :deep(.md-list) {
+  margin: 0;
+  padding-left: 18px;
+}
+
+.markdown-body :deep(.md-list li),
+.think-block :deep(.md-list li) {
+  margin: 4px 0;
+}
+
+.markdown-body :deep(code),
+.think-block :deep(code) {
+  padding: 1px 5px;
+  border-radius: 6px;
+  background: rgba(148, 163, 184, 0.14);
+  font-family: var(--font-mono);
+  font-size: 12px;
+}
+
+.markdown-body :deep(.md-pre),
+.think-block :deep(.md-pre) {
+  margin: 0;
+  padding: 10px 12px;
+  border-radius: 10px;
+  background: rgba(5, 10, 20, 0.78);
+  border: 1px solid rgba(148, 163, 184, 0.12);
+  overflow-x: auto;
+}
+
+.markdown-body :deep(.md-pre code),
+.think-block :deep(.md-pre code) {
+  padding: 0;
+  background: transparent;
+}
+
+.markdown-body :deep(.md-table-wrap),
+.think-block :deep(.md-table-wrap) {
+  width: 100%;
+  overflow-x: auto;
+  margin: 2px 0;
+  border-radius: 10px;
+  border: 1px solid rgba(34, 211, 238, 0.16);
+  background: rgba(5, 10, 20, 0.46);
+}
+
+.markdown-body :deep(.md-table),
+.think-block :deep(.md-table) {
+  width: 100%;
+  min-width: 320px;
+  border-collapse: collapse;
+  font-size: 12px;
+}
+
+.markdown-body :deep(.md-table th),
+.markdown-body :deep(.md-table td),
+.think-block :deep(.md-table th),
+.think-block :deep(.md-table td) {
+  padding: 8px 10px;
+  border: 1px solid rgba(148, 163, 184, 0.16);
+  text-align: left;
+  vertical-align: top;
+}
+
+.markdown-body :deep(.md-table th),
+.think-block :deep(.md-table th) {
+  background: rgba(34, 211, 238, 0.1);
+  color: var(--text-primary);
+  font-family: var(--font-mono);
+  font-size: 10px;
+  letter-spacing: 0.12em;
+}
+
+.markdown-body :deep(.md-table tbody tr:nth-child(even)),
+.think-block :deep(.md-table tbody tr:nth-child(even)) {
+  background: rgba(148, 163, 184, 0.04);
+}
+
+.think-panel[open] .think-chip {
+  border-color: rgba(167, 139, 250, 0.3);
+  color: #ddd6fe;
+}
+
+.think-panel[open] .think-chip-dot {
+  animation: pulse-glow 1.4s ease-in-out infinite;
+}
+
 /* Typing indicator */
-.typing .dot {
+.thinking-row {
+  padding-top: 2px;
+}
+
+.thinking-bubble {
+  min-width: 280px;
+  padding: 12px 14px;
+  background: linear-gradient(135deg, rgba(12, 20, 36, 0.92), rgba(16, 18, 34, 0.84));
+  border-color: rgba(34, 211, 238, 0.18);
+}
+
+.thinking-hud {
+  display: flex;
+  align-items: center;
+  gap: 14px;
+}
+
+.thinking-core {
+  position: relative;
+  width: 28px;
+  height: 28px;
+  flex-shrink: 0;
+}
+
+.thinking-ring,
+.thinking-dot {
+  position: absolute;
+  inset: 0;
+  border-radius: 50%;
+}
+
+.thinking-ring {
+  border: 1px solid rgba(34, 211, 238, 0.45);
+}
+
+.ring-1 {
+  animation: spin 2.6s linear infinite;
+}
+
+.ring-2 {
+  inset: 4px;
+  border-color: rgba(167, 139, 250, 0.38);
+  animation: spin 1.8s linear infinite reverse;
+}
+
+.ring-3 {
+  inset: 8px;
+  border-color: rgba(245, 158, 11, 0.36);
+  animation: pulse-glow 1.4s ease-in-out infinite;
+}
+
+.thinking-dot {
+  inset: 11px;
+  background: var(--accent-cyan);
+  box-shadow: 0 0 10px rgba(34, 211, 238, 0.7);
+}
+
+.thinking-copy {
+  min-width: 0;
+  flex: 1;
+}
+
+.thinking-title {
+  font-family: var(--font-display);
+  font-size: 10px;
+  letter-spacing: 0.14em;
+  color: var(--accent-cyan);
+}
+
+.thinking-subtitle {
+  margin-top: 3px;
+  font-size: 12px;
+  color: var(--text-dim);
+}
+
+.typing .dot,
+.typing-inline .dot {
   display: inline-block;
   width: 5px;
   height: 5px;
@@ -605,8 +1263,15 @@ const {
   animation: typing-bounce 1.2s ease-in-out infinite;
 }
 
-.typing .dot:nth-child(2) { animation-delay: 0.2s; }
-.typing .dot:nth-child(3) { animation-delay: 0.4s; }
+.typing-inline {
+  flex-shrink: 0;
+  white-space: nowrap;
+}
+
+.typing .dot:nth-child(2),
+.typing-inline .dot:nth-child(2) { animation-delay: 0.2s; }
+.typing .dot:nth-child(3),
+.typing-inline .dot:nth-child(3) { animation-delay: 0.4s; }
 
 @keyframes typing-bounce {
   0%, 60%, 100% { transform: translateY(0); opacity: 0.4; }
diff --git a/frontend/src/pages/graph/index.vue b/frontend/src/pages/graph/index.vue
index c44403c..613b989 100644
--- a/frontend/src/pages/graph/index.vue
+++ b/frontend/src/pages/graph/index.vue
@@ -1,468 +1,7 @@
 <script setup lang="ts">
-import { ref, onMounted, nextTick } from 'vue'
-import { graphApi } from '@/api/graph'
-import { Network, RefreshCw, Info, Hexagon } from 'lucide-vue-next'
-import type { KGNode, KGEdge } from '@/api/graph'
-
-const nodes = ref<KGNode[]>([])
-const edges = ref<KGEdge[]>([])
-const stats = ref({ node_count: 0, edge_count: 0 })
-const isLoading = ref(false)
-const selectedEntity = ref<KGNode | null>(null)
-const entityContext = ref('')
-const isBuilding = ref(false)
-const chartRef = ref<HTMLDivElement>()
-
-const typeColors: Record<string, string> = {
-  person: '#f87171', concept: '#60a5fa', topic: '#a78bfa',
-  task: '#fbbf24', event: '#fb923c', document: '#9ca3af', default: '#4b5563',
-}
-
-function getColor(type: string) { return typeColors[type] || typeColors.default }
-
-async function loadGraph() {
-  isLoading.value = true
-  try {
-    const response = await graphApi.get()
-    nodes.value = response.data.nodes
-    edges.value = response.data.edges
-    stats.value = response.data.stats
-    await nextTick()
-    renderChart()
-  } catch (e) { console.error('加载图谱失败:', e) }
-  isLoading.value = false
-}
-
-async function buildGraph() {
-  isBuilding.value = true
-  try {
-    await graphApi.build()
-    setTimeout(() => loadGraph(), 2000)
-  } catch (e) { console.error('构建失败:', e) }
-  isBuilding.value = false
-}
-
-async function selectEntity(node: KGNode) {
-  selectedEntity.value = node
-  entityContext.value = 'LOADING...'
-  try {
-    const response = await graphApi.getEntityContext(node.name)
-    entityContext.value = response.data.context
-  } catch (e) { entityContext.value = 'Failed to load context' }
-}
-
-function renderChart() {
-  if (!chartRef.value) return
-  // @ts-ignore
-  if (!window.echarts) return
-  // @ts-ignore
-  const echarts = window.echarts
-  const chart = echarts.init(chartRef.value, 'dark')
-
-  const option = {
-    backgroundColor: 'transparent',
-    tooltip: {
-      trigger: 'item',
-      backgroundColor: 'rgba(10, 15, 26, 0.95)',
-      borderColor: 'rgba(0, 245, 212, 0.2)',
-      textStyle: { color: '#e8f4f8', fontFamily: 'JetBrains Mono, monospace', fontSize: 12 },
-      formatter: (params: any) => {
-        if (params.dataType === 'node') {
-          return `<b style="color:#00f5d4">${params.data.name}</b><br/><span style="color:#7eb8c9">Type: ${params.data.type || 'unknown'}</span>`
-        }
-        return `<span style="color:#7eb8c9">${params.data.sourceName}</span> → <span style="color:#a78bfa">${params.data.relation}</span> → <span style="color:#7eb8c9">${params.data.targetName}</span>`
-      },
-    },
-    series: [{
-      type: 'graph',
-      layout: 'force',
-      symbolSize: (_val: unknown, params: any) => 18 + (params.data.importance || 0.5) * 40,
-      roam: true,
-      label: {
-        show: true,
-        fontSize: 10,
-        color: '#7eb8c9',
-        fontFamily: 'JetBrains Mono, monospace',
-        formatter: (params: any) => params.data.name?.substring(0, 14) || '',
-      },
-      lineStyle: { color: 'rgba(0, 245, 212, 0.15)', width: 1.5 },
-      emphasis: {
-        focus: 'adjacency',
-        lineStyle: { width: 3, color: 'rgba(0, 245, 212, 0.5)' },
-      },
-      edgeSymbol: ['circle', 'arrow'],
-      edgeSymbolSize: [4, 8],
-      data: nodes.value.map(n => ({
-        id: n.id, name: n.name, type: n.type,
-        importance: n.importance || 0.5,
-        itemStyle: {
-          color: getColor(n.type),
-          borderColor: getColor(n.type),
-          borderWidth: 2,
-          shadowColor: getColor(n.type),
-          shadowBlur: 8,
-        },
-      })),
-      links: edges.value.map(e => {
-        const src = nodes.value.find(n => n.id === e.source)
-        const tgt = nodes.value.find(n => n.id === e.target)
-        return {
-          source: e.source, target: e.target,
-          sourceName: src?.name || '', targetName: tgt?.name || '',
-          relation: e.relation,
-          lineStyle: { color: 'rgba(0, 245, 212, 0.15)' },
-        }
-      }),
-      force: { repulsion: 150, gravity: 0.05, edgeLength: [60, 200], layoutAnimation: true },
-    }],
-  }
-  chart.setOption(option)
-  chart.on('click', (params: any) => {
-    if (params.dataType === 'node') {
-      const node = nodes.value.find(n => n.id === params.data.id)
-      if (node) selectEntity(node)
-    }
-  })
-}
-
-onMounted(() => {
-  loadGraph()
-  const script = document.createElement('script')
-  script.src = 'https://cdn.jsdelivr.net/npm/echarts@5.5.0/dist/echarts.min.js'
-  script.onload = () => renderChart()
-  document.head.appendChild(script)
-})
+import GraphProjection from '@/components/brain/GraphProjection.vue'
 </script>
 
 <template>
-  <div class="graph-view">
-    <!-- Header -->
-    <div class="page-header">
-      <div class="header-left">
-        <div class="header-icon"><Hexagon :size="20" /></div>
-        <div class="header-text">
-          <h1>KNOWLEDGE GRAPH</h1>
-          <span class="header-sub">{{ stats.node_count }} nodes · {{ stats.edge_count }} relations</span>
-        </div>
-      </div>
-      <button class="build-btn" @click="buildGraph" :disabled="isBuilding">
-        <RefreshCw :size="14" :class="{ spin: isBuilding }" />
-        {{ isBuilding ? 'BUILDING...' : 'REBUILD' }}
-      </button>
-    </div>
-
-    <!-- Type legend -->
-    <div class="type-legend">
-      <div v-for="(color, type) in typeColors" :key="type" class="legend-item">
-        <div class="legend-dot" :style="{ background: color, boxShadow: `0 0 6px ${color}` }"></div>
-        <span>{{ type.toUpperCase() }}</span>
-      </div>
-    </div>
-
-    <!-- Main area: chart + panel -->
-    <div class="main-area">
-      <div class="graph-container">
-        <div v-if="nodes.length === 0 && !isLoading" class="empty-state">
-          <div class="empty-icon">
-            <div class="e-ring r1"></div>
-            <div class="e-ring r2"></div>
-            <Network :size="32" />
-          </div>
-          <div class="empty-title">NO GRAPH DATA</div>
-          <div class="empty-sub">Upload documents and rebuild the graph</div>
-        </div>
-        <div ref="chartRef" v-show="nodes.length > 0" class="chart-canvas"></div>
-      </div>
-
-      <!-- Entity panel -->
-      <div class="entity-panel" v-if="selectedEntity">
-        <div class="panel-title">
-          <Info :size="14" />
-          <span>ENTITY DETAIL</span>
-          <button class="close-panel" @click="selectedEntity = null">×</button>
-        </div>
-        <div class="entity-name" :style="{ color: getColor(selectedEntity.type) }">
-          {{ selectedEntity.name }}
-        </div>
-        <div class="entity-type-tag" :style="{ color: getColor(selectedEntity.type), borderColor: getColor(selectedEntity.type) + '40' }">
-          {{ (selectedEntity.type || 'unknown').toUpperCase() }}
-        </div>
-        <div class="entity-context">{{ entityContext }}</div>
-      </div>
-    </div>
-
-    <!-- Relation list -->
-    <div class="relations-section" v-if="edges.length > 0">
-      <div class="section-label">// RELATIONS ({{ edges.length }})</div>
-      <div class="relations-scroll">
-        <div v-for="edge in edges" :key="edge.id" class="rel-item">
-          <span class="rel-node">{{ nodes.find(n => n.id === edge.source)?.name?.slice(0, 16) || edge.source.slice(0, 8) }}</span>
-          <div class="rel-arrow">
-            <div class="arrow-line"></div>
-            <span class="rel-type-badge">{{ edge.relation }}</span>
-          </div>
-          <span class="rel-node">{{ nodes.find(n => n.id === edge.target)?.name?.slice(0, 16) || edge.target.slice(0, 8) }}</span>
-        </div>
-      </div>
-    </div>
-  </div>
+  <GraphProjection fullscreen />
 </template>
-
-<style scoped>
-.graph-view {
-  height: 100%;
-  overflow-y: auto;
-  padding: 24px;
-  display: flex;
-  flex-direction: column;
-  gap: 16px;
-}
-
-.page-header {
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-}
-
-.header-left { display: flex; align-items: center; gap: 14px; }
-
-.header-icon { color: var(--accent-cyan); filter: drop-shadow(0 0 8px var(--accent-cyan)); }
-
-h1 {
-  font-family: var(--font-display);
-  font-size: 20px;
-  font-weight: 700;
-  letter-spacing: 0.15em;
-  color: var(--text-primary);
-  margin: 0;
-}
-
-.header-sub { font-family: var(--font-mono); font-size: 10px; color: var(--text-dim); letter-spacing: 0.1em; }
-
-.build-btn {
-  display: flex;
-  align-items: center;
-  gap: 6px;
-  padding: 8px 16px;
-  background: var(--accent-cyan-dim);
-  border: 1px solid var(--border-mid);
-  border-radius: var(--radius-md);
-  color: var(--accent-cyan);
-  font-family: var(--font-display);
-  font-size: 10px;
-  letter-spacing: 0.12em;
-  transition: all var(--transition-fast);
-}
-
-.build-btn:hover:not(:disabled) {
-  background: rgba(0, 245, 212, 0.2);
-  box-shadow: var(--glow-cyan);
-}
-
-.spin { animation: spin 1s linear infinite; }
-
-.type-legend {
-  display: flex;
-  align-items: center;
-  gap: 16px;
-  flex-wrap: wrap;
-}
-
-.legend-item {
-  display: flex;
-  align-items: center;
-  gap: 6px;
-  font-family: var(--font-mono);
-  font-size: 9px;
-  letter-spacing: 0.12em;
-  color: var(--text-dim);
-}
-
-.legend-dot {
-  width: 7px;
-  height: 7px;
-  border-radius: 50%;
-}
-
-.main-area {
-  display: flex;
-  gap: 16px;
-  flex: 1;
-  min-height: 450px;
-}
-
-.graph-container {
-  flex: 1;
-  background: var(--bg-card);
-  border: 1px solid var(--border-dim);
-  border-radius: var(--radius-lg);
-  overflow: hidden;
-  position: relative;
-  min-height: 400px;
-}
-
-.empty-state {
-  position: absolute;
-  inset: 0;
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-  justify-content: center;
-  gap: 12px;
-}
-
-.empty-icon {
-  position: relative;
-  color: var(--text-dim);
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  margin-bottom: 8px;
-}
-
-.e-ring {
-  position: absolute;
-  border-radius: 50%;
-  border: 1px solid var(--accent-cyan);
-  opacity: 0.2;
-}
-.r1 { width: 60px; height: 60px; animation: spin 6s linear infinite; border-style: dashed; }
-.r2 { width: 40px; height: 40px; animation: spin 4s linear infinite reverse; }
-
-.empty-title {
-  font-family: var(--font-display);
-  font-size: 14px;
-  letter-spacing: 0.15em;
-  color: var(--text-dim);
-}
-
-.empty-sub {
-  font-family: var(--font-mono);
-  font-size: 10px;
-  color: var(--text-muted);
-}
-
-.chart-canvas {
-  width: 100%;
-  height: 100%;
-  min-height: 400px;
-}
-
-/* Entity panel */
-.entity-panel {
-  width: 260px;
-  background: var(--bg-card);
-  border: 1px solid var(--border-mid);
-  border-radius: var(--radius-lg);
-  padding: 16px;
-  display: flex;
-  flex-direction: column;
-  gap: 10px;
-  animation: fade-in-up 0.2s ease;
-  overflow-y: auto;
-}
-
-.panel-title {
-  display: flex;
-  align-items: center;
-  gap: 8px;
-  font-family: var(--font-display);
-  font-size: 9px;
-  letter-spacing: 0.15em;
-  color: var(--accent-cyan);
-  margin-bottom: 4px;
-}
-
-.close-panel {
-  margin-left: auto;
-  background: none;
-  border: none;
-  color: var(--text-dim);
-  cursor: pointer;
-  font-size: 16px;
-  line-height: 1;
-  padding: 0 2px;
-}
-
-.close-panel:hover { color: var(--accent-red); }
-
-.entity-name {
-  font-family: var(--font-display);
-  font-size: 14px;
-  font-weight: 700;
-  letter-spacing: 0.05em;
-}
-
-.entity-type-tag {
-  font-family: var(--font-display);
-  font-size: 9px;
-  letter-spacing: 0.12em;
-  padding: 2px 8px;
-  border: 1px solid;
-  border-radius: 4px;
-  width: fit-content;
-}
-
-.entity-context {
-  font-size: 12px;
-  color: var(--text-secondary);
-  line-height: 1.7;
-  white-space: pre-wrap;
-}
-
-/* Relations */
-.relations-section { }
-
-.section-label {
-  font-family: var(--font-display);
-  font-size: 9px;
-  letter-spacing: 0.15em;
-  color: var(--text-dim);
-  margin-bottom: 10px;
-}
-
-.relations-scroll {
-  display: flex;
-  flex-direction: column;
-  gap: 4px;
-  max-height: 180px;
-  overflow-y: auto;
-}
-
-.rel-item {
-  display: flex;
-  align-items: center;
-  gap: 8px;
-  padding: 6px 10px;
-  background: var(--bg-card);
-  border: 1px solid var(--border-dim);
-  border-radius: var(--radius-md);
-  font-family: var(--font-mono);
-  font-size: 10px;
-}
-
-.rel-node { color: var(--accent-cyan); min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; flex: 1; }
-
-.rel-arrow {
-  display: flex;
-  align-items: center;
-  gap: 6px;
-  flex-shrink: 0;
-}
-
-.arrow-line {
-  width: 20px;
-  height: 1px;
-  background: linear-gradient(90deg, var(--border-mid), var(--accent-cyan), var(--border-mid));
-}
-
-.rel-type-badge {
-  font-size: 8px;
-  letter-spacing: 0.08em;
-  color: var(--accent-purple);
-  padding: 1px 5px;
-  background: var(--accent-purple-dim);
-  border-radius: 3px;
-  white-space: nowrap;
-}
-</style>
diff --git a/frontend/src/pages/knowledge/index.vue b/frontend/src/pages/knowledge/index.vue
index ef7fe67..23af662 100644
--- a/frontend/src/pages/knowledge/index.vue
+++ b/frontend/src/pages/knowledge/index.vue
@@ -15,8 +15,9 @@ import { useKnowledgeView } from '@/pages/knowledge/composables/useKnowledgeView
 const {
   documents,
   currentFolderId,
-  isLoadingDocuments,
   uploadError,
+  uploadSuccess,
+  highlightedDocumentId,
   uploadInput,
   showNewFolderDialog,
   newFolderName,
@@ -29,6 +30,12 @@ const {
   activeDocument,
   activeDocumentContent,
   isLoadingDocumentContent,
+  activeDocumentChunks,
+  isLoadingDocumentChunks,
+  chunkDrafts,
+  chunkEditing,
+  chunkSaving,
+  chunkEditError,
   isRoot,
   visibleFolders,
   breadcrumbs,
@@ -47,9 +54,13 @@ const {
   deleteFolder,
   openDocument,
   closeDocumentDialog,
+  startChunkEdit,
+  cancelChunkEdit,
+  saveChunkEdit,
   getFileTypeColor,
   formatFileSize,
   formatDate,
+  getStatusLabel,
 } = useKnowledgeView()
 </script>
 
@@ -78,7 +89,7 @@ const {
       ref="uploadInput"
       type="file"
       class="hidden-upload"
-      accept=".pdf,.md,.txt,.docx"
+      accept=".pdf,.md,.txt,.doc,.docx,.csv,.xlsx"
       @change="handleUpload"
     />
 
@@ -108,10 +119,8 @@ const {
       <div v-if="uploadError" class="upload-error">
         {{ uploadError }}
       </div>
-
-      <div v-if="isLoadingDocuments" class="loading-strip">
-        <Loader :size="14" class="spin" />
-        <span>正在同步当前目录...</span>
+      <div v-if="uploadSuccess" class="upload-success">
+        {{ uploadSuccess }}
       </div>
 
       <div class="explorer-grid">
@@ -158,6 +167,7 @@ const {
             v-for="doc in documents"
             :key="doc.id"
             class="explorer-tile file-tile"
+            :class="{ 'upload-highlight': highlightedDocumentId === doc.id }"
             @click="openDocument(doc)"
           >
             <div class="tile-frame"></div>
@@ -174,9 +184,17 @@ const {
             </div>
             <div class="tile-name">{{ doc.title }}</div>
             <div class="tile-meta">{{ formatFileSize(doc.file_size) }} · {{ formatDate(doc.created_at) }}</div>
-            <div class="tile-status" :class="doc.is_indexed ? 'indexed' : 'pending'">
-              {{ doc.is_indexed ? 'INDEXED' : 'INDEXING...' }}
+            <div class="tile-status-row">
+              <div class="tile-status" :class="(doc.ingestion_status ?? (doc.is_indexed ? 'ready' : 'uploaded')).toLowerCase()">
+                {{ getStatusLabel(doc.ingestion_status, doc.is_indexed) }}
+              </div>
+              <Loader
+                v-if="['uploaded', 'parsing', 'indexing'].includes(doc.ingestion_status ?? (doc.is_indexed ? 'ready' : 'uploaded'))"
+                :size="12"
+                class="spin tile-inline-loader"
+              />
             </div>
+            <div v-if="doc.ingestion_error" class="tile-warning">{{ doc.ingestion_error }}</div>
           </button>
         </template>
 
@@ -294,15 +312,84 @@ const {
             {{ activeDocument.file_type.toUpperCase() }}
           </span>
           <span>{{ formatFileSize(activeDocument.file_size) }}</span>
-          <span>{{ activeDocument.chunk_count }} chunks</span>
+          <span class="doc-chunk-count">{{ activeDocument.chunk_count }} 个知识切片</span>
+          <span class="doc-status-pill">{{ getStatusLabel(activeDocument.ingestion_status, activeDocument.is_indexed) }}</span>
+        </div>
+        <div v-if="activeDocument.ingestion_error" class="upload-error">
+          {{ activeDocument.ingestion_error }}
         </div>
 
-        <div class="document-preview">
-          <div v-if="isLoadingDocumentContent" class="preview-loading">
-            <Loader :size="16" class="spin" />
-            <span>加载文档内容中...</span>
+        <div class="document-content-grid">
+          <div class="document-preview">
+            <div v-if="isLoadingDocumentContent" class="preview-loading">
+              <Loader :size="16" class="spin" />
+              <span>加载文档内容中...</span>
+            </div>
+            <pre v-else>{{ activeDocumentContent || '暂无可预览内容。' }}</pre>
+          </div>
+
+          <div class="chunk-panel">
+            <div class="chunk-panel-header">
+              <div>
+                <div class="chunk-panel-title">知识切片</div>
+                <div class="chunk-panel-subtitle">当前已加载 {{ activeDocumentChunks.length }} / {{ activeDocument.chunk_count }} 个切片</div>
+              </div>
+              <span class="chunk-count-badge">{{ activeDocumentChunks.length }}</span>
+            </div>
+
+            <div v-if="isLoadingDocumentChunks" class="chunk-loading-state">
+              <div class="chunk-loading-bar"></div>
+              <span>正在读取切片内容...</span>
+            </div>
+
+            <div v-else-if="activeDocumentChunks.length" class="chunk-list">
+              <div
+                v-for="chunk in activeDocumentChunks"
+                :key="chunk.id"
+                class="chunk-card"
+                :class="{ editing: chunkEditing[chunk.id] }"
+              >
+                <div class="chunk-card-header">
+                  <div class="chunk-card-meta">
+                    <span class="chunk-index">切片 #{{ chunk.chunk_index + 1 }}</span>
+                    <span class="chunk-size">{{ chunk.content.length }} 字符</span>
+                    <span v-if="chunk.metadata_" class="chunk-meta-raw">{{ chunk.metadata_ }}</span>
+                  </div>
+                  <button
+                    v-if="!chunkEditing[chunk.id]"
+                    class="btn"
+                    @click="startChunkEdit(chunk)"
+                  >
+                    编辑
+                  </button>
+                </div>
+
+                <pre v-if="!chunkEditing[chunk.id]" class="chunk-content">{{ chunk.content }}</pre>
+
+                <div v-else class="chunk-edit-form">
+                  <textarea
+                    v-model="chunkDrafts[chunk.id]"
+                    class="chunk-textarea"
+                    rows="7"
+                  ></textarea>
+                  <div v-if="chunkEditError[chunk.id]" class="upload-error chunk-error">
+                    {{ chunkEditError[chunk.id] }}
+                  </div>
+                  <div class="chunk-actions">
+                    <button class="btn" :disabled="chunkSaving[chunk.id]" @click="cancelChunkEdit(chunk.id)">
+                      取消
+                    </button>
+                    <button class="btn primary" :disabled="chunkSaving[chunk.id]" @click="saveChunkEdit(chunk.id)">
+                      <Loader v-if="chunkSaving[chunk.id]" :size="12" class="spin" />
+                      {{ chunkSaving[chunk.id] ? '保存中' : '保存' }}
+                    </button>
+                  </div>
+                </div>
+              </div>
+            </div>
+
+            <div v-else class="chunk-empty">暂无切片数据。</div>
           </div>
-          <pre v-else>{{ activeDocumentContent || '暂无可预览内容。' }}</pre>
         </div>
       </div>
     </div>
@@ -439,7 +526,7 @@ h1 {
 }
 
 .upload-error,
-.loading-strip {
+.upload-success {
   display: inline-flex;
   align-items: center;
   gap: 8px;
@@ -455,10 +542,10 @@ h1 {
   border: 1px solid rgba(255, 71, 87, 0.2);
 }
 
-.loading-strip {
-  color: var(--accent-cyan);
-  background: rgba(0, 245, 212, 0.06);
-  border: 1px solid var(--border-dim);
+.upload-success {
+  color: var(--accent-green);
+  background: rgba(52, 211, 153, 0.08);
+  border: 1px solid rgba(52, 211, 153, 0.24);
 }
 
 .explorer-grid {
@@ -491,6 +578,11 @@ h1 {
   transform: translateY(-2px);
 }
 
+.upload-highlight {
+  border-color: rgba(52, 211, 153, 0.8);
+  box-shadow: 0 0 0 1px rgba(52, 211, 153, 0.35), 0 0 28px rgba(52, 211, 153, 0.25);
+}
+
 .tile-frame {
   position: absolute;
   inset: 10px;
@@ -792,21 +884,68 @@ h1 {
   line-height: 1.5;
 }
 
-.tile-status {
+.tile-status-row {
   margin-top: auto;
+  display: inline-flex;
+  align-items: center;
+  gap: 8px;
+}
+
+.tile-status {
   font-family: var(--font-display);
   font-size: 9px;
   letter-spacing: 0.12em;
 }
 
-.indexed {
+.tile-inline-loader {
+  color: var(--accent-cyan);
+}
+
+.ready {
   color: var(--accent-green);
 }
 
-.pending {
+.uploaded,
+.parsing,
+.indexing {
   color: var(--accent-amber);
 }
 
+.warning {
+  color: var(--accent-purple);
+}
+
+.failed {
+  color: var(--accent-red);
+}
+
+.tile-warning {
+  width: 100%;
+  color: var(--accent-red);
+  font-family: var(--font-mono);
+  font-size: 10px;
+  line-height: 1.4;
+  word-break: break-word;
+}
+
+.doc-chunk-count {
+  color: var(--accent-cyan);
+  font-family: var(--font-display);
+  font-size: 10px;
+  letter-spacing: 0.08em;
+}
+
+.doc-status-pill {
+  padding: 4px 10px;
+  border-radius: 999px;
+  border: 1px solid var(--border-mid);
+  color: var(--accent-cyan);
+  background: rgba(0, 245, 212, 0.08);
+  font-family: var(--font-display);
+  font-size: 10px;
+  letter-spacing: 0.12em;
+}
+
 .empty-state {
   grid-column: 1 / -1;
   min-height: 440px;
@@ -1064,6 +1203,15 @@ h1 {
   }
 }
 
+@keyframes shimmer {
+  0% {
+    background-position: 200% 0;
+  }
+  100% {
+    background-position: -200% 0;
+  }
+}
+
 .folder-tile:hover .folder-glyph,
 .folder-tile:hover .empty-folder-chamber {
   animation-duration: 2.3s;
@@ -1246,7 +1394,14 @@ h1 {
   margin-bottom: 14px;
 }
 
-.document-preview {
+.document-content-grid {
+  display: grid;
+  grid-template-columns: minmax(0, 1.1fr) minmax(320px, 0.9fr);
+  gap: 16px;
+}
+
+.document-preview,
+.chunk-panel {
   min-height: 360px;
   max-height: 62vh;
   overflow: auto;
@@ -1265,6 +1420,167 @@ h1 {
   line-height: 1.7;
 }
 
+.chunk-panel-header {
+  display: flex;
+  align-items: flex-start;
+  justify-content: space-between;
+  gap: 12px;
+  margin-bottom: 12px;
+}
+
+.chunk-panel-title {
+  color: var(--accent-cyan);
+  font-family: var(--font-display);
+  font-size: 11px;
+  letter-spacing: 0.14em;
+}
+
+.chunk-panel-subtitle {
+  margin-top: 4px;
+  color: var(--text-dim);
+  font-family: var(--font-mono);
+  font-size: 10px;
+}
+
+.chunk-count-badge {
+  min-width: 32px;
+  height: 32px;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  border-radius: 999px;
+  border: 1px solid rgba(0, 245, 212, 0.2);
+  background: rgba(0, 245, 212, 0.08);
+  color: var(--accent-cyan);
+  font-family: var(--font-display);
+  font-size: 12px;
+}
+
+.chunk-loading-state {
+  display: flex;
+  flex-direction: column;
+  gap: 8px;
+  padding: 12px 0;
+  color: var(--text-dim);
+  font-family: var(--font-mono);
+  font-size: 11px;
+}
+
+.chunk-loading-bar {
+  width: 100%;
+  height: 6px;
+  border-radius: 999px;
+  background: linear-gradient(90deg, rgba(0, 245, 212, 0.15), rgba(124, 230, 255, 0.45), rgba(0, 245, 212, 0.15));
+  background-size: 200% 100%;
+  animation: shimmer 1.4s linear infinite;
+}
+
+.chunk-list {
+  display: flex;
+  flex-direction: column;
+  gap: 12px;
+}
+
+.chunk-card {
+  border: 1px solid var(--border-dim);
+  border-radius: 12px;
+  background: rgba(8, 15, 24, 0.82);
+  padding: 12px;
+}
+
+.chunk-card.editing {
+  border-color: rgba(0, 245, 212, 0.4);
+  box-shadow: inset 0 0 0 1px rgba(0, 245, 212, 0.08);
+}
+
+.chunk-card-header {
+  display: flex;
+  align-items: flex-start;
+  justify-content: space-between;
+  gap: 12px;
+  margin-bottom: 10px;
+}
+
+.chunk-card-meta {
+  display: flex;
+  flex-direction: column;
+  gap: 6px;
+  min-width: 0;
+}
+
+.chunk-index {
+  color: var(--accent-cyan);
+  font-family: var(--font-display);
+  font-size: 10px;
+  letter-spacing: 0.12em;
+}
+
+.chunk-size {
+  color: var(--text-dim);
+  font-family: var(--font-mono);
+  font-size: 10px;
+}
+
+.chunk-meta-raw {
+  color: var(--text-dim);
+  font-family: var(--font-mono);
+  font-size: 10px;
+  line-height: 1.5;
+  word-break: break-word;
+}
+
+.chunk-content {
+  margin: 0;
+  white-space: pre-wrap;
+  word-break: break-word;
+  color: var(--text-secondary);
+  font-family: var(--font-mono);
+  font-size: 12px;
+  line-height: 1.6;
+}
+
+.chunk-edit-form {
+  display: flex;
+  flex-direction: column;
+  gap: 10px;
+}
+
+.chunk-textarea {
+  width: 100%;
+  min-height: 150px;
+  resize: vertical;
+  background: rgba(0, 9, 19, 0.9);
+  border: 1px solid var(--border-dim);
+  border-radius: 10px;
+  color: var(--text-primary);
+  padding: 12px;
+  font-family: var(--font-mono);
+  font-size: 12px;
+  line-height: 1.6;
+  box-sizing: border-box;
+}
+
+.chunk-textarea:focus {
+  border-color: var(--accent-cyan);
+  outline: none;
+}
+
+.chunk-actions {
+  display: flex;
+  justify-content: flex-end;
+  gap: 10px;
+}
+
+.chunk-error {
+  width: 100%;
+}
+
+.chunk-empty {
+  color: var(--text-dim);
+  font-family: var(--font-mono);
+  font-size: 11px;
+}
+
 .preview-loading {
   display: flex;
   align-items: center;
@@ -1332,5 +1648,9 @@ h1 {
     display: flex;
     justify-content: flex-start;
   }
+
+  .document-content-grid {
+    grid-template-columns: 1fr;
+  }
 }
 </style>
diff --git a/frontend/src/stores/auth.ts b/frontend/src/stores/auth.ts
index ac603ff..a57c3b9 100644
--- a/frontend/src/stores/auth.ts
+++ b/frontend/src/stores/auth.ts
@@ -2,9 +2,14 @@ import { defineStore } from 'pinia'
 import { ref, computed } from 'vue'
 import api from '@/api'
 
+let unauthorizedListenerRegistered = false
+
 export const useAuthStore = defineStore('auth', () => {
   const token = ref<string | null>(localStorage.getItem('access_token'))
   const user = ref<{ id: string; email: string; full_name?: string } | null>(null)
+  const isAuthReady = ref(false)
+  const isFetchingUser = ref(false)
+  let authReadyPromise: Promise<void> | null = null
 
   const isAuthenticated = computed(() => !!token.value)
 
@@ -17,28 +22,63 @@ export const useAuthStore = defineStore('auth', () => {
     })
     token.value = response.data.access_token
     localStorage.setItem('access_token', response.data.access_token)
+    user.value = null
+    isAuthReady.value = false
     await fetchUser()
   }
 
   async function fetchUser() {
-    if (!token.value) return
+    if (!token.value) {
+      user.value = null
+      isAuthReady.value = true
+      return
+    }
+
+    isFetchingUser.value = true
     try {
       const response = await api.get('/api/auth/me')
       user.value = response.data
-    } catch {
-      logout()
+    } catch (error: any) {
+      const status = error?.response?.status
+      if (status === 401 || status === 403) {
+        logout()
+      } else {
+        console.error('获取当前用户失败:', error)
+      }
+    } finally {
+      isFetchingUser.value = false
+      isAuthReady.value = true
     }
   }
 
   function logout() {
     token.value = null
     user.value = null
+    isFetchingUser.value = false
+    isAuthReady.value = true
     localStorage.removeItem('access_token')
   }
 
-  if (token.value) {
-    fetchUser()
+  async function ensureAuthReady() {
+    if (isAuthReady.value) return
+    if (!authReadyPromise) {
+      authReadyPromise = fetchUser().finally(() => {
+        authReadyPromise = null
+      })
+    }
+    await authReadyPromise
   }
 
-  return { token, user, isAuthenticated, login, logout, fetchUser }
+  if (typeof window !== 'undefined' && !unauthorizedListenerRegistered) {
+    window.addEventListener('jarvis:auth-unauthorized', logout)
+    unauthorizedListenerRegistered = true
+  }
+
+  if (token.value) {
+    void ensureAuthReady()
+  } else {
+    isAuthReady.value = true
+  }
+
+  return { token, user, isAuthenticated, isAuthReady, isFetchingUser, login, logout, fetchUser, ensureAuthReady }
 })
diff --git a/frontend/src/stores/conversation.ts b/frontend/src/stores/conversation.ts
index 708c818..2b5c460 100644
--- a/frontend/src/stores/conversation.ts
+++ b/frontend/src/stores/conversation.ts
@@ -12,7 +12,7 @@ export const useConversationStore = defineStore('conversation', () => {
     conversations.value = data
   }
 
-  function setCurrentConversation(id: string) {
+  function setCurrentConversation(id: string | null) {
     currentConversationId.value = id
   }
 
@@ -20,6 +20,10 @@ export const useConversationStore = defineStore('conversation', () => {
     messages.value.push(msg)
   }
 
+  function removeMessage(id: string) {
+    messages.value = messages.value.filter((msg) => msg.id !== id)
+  }
+
   function setMessages(data: Message[]) {
     messages.value = data
   }
@@ -40,6 +44,7 @@ export const useConversationStore = defineStore('conversation', () => {
     setConversations,
     setCurrentConversation,
     addMessage,
+    removeMessage,
     setMessages,
     addConversation,
     removeConversation,