From 2f3885ab4a3a29cdac09e381128727cc772e50e6 Mon Sep 17 00:00:00 2001
From: phantom5099 <1011668688@qq.com>
Date: Sun, 7 Jun 2026 16:13:35 +0800
Subject: [PATCH 1/7] add switchable theme styles

---
 packages/desktop/electron/main.ts             |  22 ++
 packages/desktop/electron/preload.ts          |   3 +
 packages/desktop/src/App.tsx                  |   9 +-
 packages/desktop/src/TitleBar.tsx             |  12 +-
 packages/desktop/src/agent/AgentSidebar.tsx   |  36 +--
 packages/desktop/src/agent/AgentWorkspace.tsx |  46 ++--
 packages/desktop/src/agent/ApprovalPanel.tsx  |  10 +-
 packages/desktop/src/agent/MessageStream.tsx  |  60 ++---
 packages/desktop/src/agent/ProjectStrip.tsx   |  28 +--
 packages/desktop/src/agent/TodoPanel.tsx      |  20 +-
 packages/desktop/src/layouts/IDELayout.tsx    |   8 +-
 packages/desktop/src/prismjs.d.ts             |   7 +
 packages/desktop/src/settings/HooksPanel.tsx  |  70 +++---
 packages/desktop/src/settings/McpPanel.tsx    |  46 ++--
 packages/desktop/src/settings/MemoryPanel.tsx |  50 ++---
 .../desktop/src/settings/SettingsPage.tsx     |  50 ++++-
 packages/desktop/src/settings/SkillPanel.tsx  |  12 +-
 .../desktop/src/settings/SubagentsPanel.tsx   |  74 +++----
 packages/desktop/src/settings/Toggle.tsx      |   4 +-
 packages/desktop/src/shared/CodeBlock.tsx     |   4 +-
 packages/desktop/src/shared/DiffBlock.tsx     |  14 +-
 packages/desktop/src/shared/ErrorBoundary.tsx |   8 +-
 .../desktop/src/shared/MarkdownRenderer.tsx   |  30 +--
 packages/desktop/src/shared/MessageItem.tsx   |  32 +--
 packages/desktop/src/shared/ToolCallCard.tsx  |  20 +-
 packages/desktop/src/shared/ToolSummary.tsx   |  10 +-
 .../desktop/src/shared/UnifiedDiffView.tsx    |  26 +--
 packages/desktop/src/stores/global.store.ts   |   7 +
 packages/desktop/src/styles/index.css         | 206 ------------------
 29 files changed, 398 insertions(+), 526 deletions(-)
 create mode 100644 packages/desktop/src/prismjs.d.ts
 delete mode 100644 packages/desktop/src/styles/index.css

diff --git a/packages/desktop/electron/main.ts b/packages/desktop/electron/main.ts
index 2598aa9..d980d9e 100644
--- a/packages/desktop/electron/main.ts
+++ b/packages/desktop/electron/main.ts
@@ -86,6 +86,28 @@ app.whenReady().then(async () => {
     currentWorkspaceCwd = cwd;
   });
 
+  // Theme sync: update window background and title bar overlay
+  const themeColors = {
+    dark: { bg: '#1e1e1e', overlay: '#1a1a1a', symbol: '#858585' },
+    light: { bg: '#ffffff', overlay: '#f5f5f5', symbol: '#666666' },
+    paper: { bg: '#f5f0e8', overlay: '#ede8de', symbol: '#7a7872' },
+  };
+
+  ipcMain.on('theme:change', (_e, theme: string) => {
+    if (!mainWindow) return;
+    const c = themeColors[theme as keyof typeof themeColors];
+    if (!c) return;
+
+    mainWindow.setBackgroundColor(c.bg);
+
+    if (process.platform === 'win32') {
+      mainWindow.setTitleBarOverlay({
+        color: c.overlay,
+        symbolColor: c.symbol,
+      });
+    }
+  });
+
   registerFsHandlers();
   registerGitHandlers();
 
diff --git a/packages/desktop/electron/preload.ts b/packages/desktop/electron/preload.ts
index 3d9c39e..df5eb1a 100644
--- a/packages/desktop/electron/preload.ts
+++ b/packages/desktop/electron/preload.ts
@@ -31,6 +31,9 @@ const api = {
   // Workspace cwd sync (renderer -> main)
   setWorkspaceCwd: (cwd: string): void => ipcRenderer.send('workspace:setCwd', cwd),
 
+  // Theme sync (renderer -> main)
+  setTheme: (theme: string): void => ipcRenderer.send('theme:change', theme),
+
   // Git (explicit cwd)
   gitStatus: (cwd: string): Promise<unknown> => ipcRenderer.invoke('git:status', cwd),
   gitBranches: (cwd: string): Promise<string[]> => ipcRenderer.invoke('git:branches', cwd),
diff --git a/packages/desktop/src/App.tsx b/packages/desktop/src/App.tsx
index f26ba79..6b99368 100644
--- a/packages/desktop/src/App.tsx
+++ b/packages/desktop/src/App.tsx
@@ -7,6 +7,7 @@ import ErrorBoundary from './shared/ErrorBoundary';
 
 export default function App() {
   const mode = useGlobalStore((s) => s.ui.mode);
+  const theme = useGlobalStore((s) => s.ui.theme);
   const setMode = useGlobalStore((s) => s.setMode);
   const rootPath = useGlobalStore((s) => s.workspace.rootPath);
 
@@ -17,6 +18,12 @@ export default function App() {
     }
   }, [rootPath]);
 
+  // Sync theme to document and main process
+  useEffect(() => {
+    document.documentElement.dataset.theme = theme;
+    window.electronAPI?.setTheme?.(theme);
+  }, [theme]);
+
   useEffect(() => {
     const off = window.electronAPI?.onFsChange?.(() => {});
     const handler = ((e: CustomEvent<'agent' | 'ide'>) => {
@@ -31,7 +38,7 @@ export default function App() {
 
   return (
     <ErrorBoundary>
-      <div className="h-screen flex flex-col bg-[#1e1e1e] text-[#cccccc] overflow-hidden">
+      <div className="h-screen flex flex-col bg-[var(--bg-base)] text-[var(--text-primary)] overflow-hidden">
         <TitleBar />
         {/* Both layouts stay mounted; visibility toggled via display to preserve Monaco + PTY state */}
         <div className={`${mode === 'agent' ? 'flex' : 'hidden'} flex-1 flex-col overflow-hidden`}>
diff --git a/packages/desktop/src/TitleBar.tsx b/packages/desktop/src/TitleBar.tsx
index 4be9197..fa2e11d 100644
--- a/packages/desktop/src/TitleBar.tsx
+++ b/packages/desktop/src/TitleBar.tsx
@@ -10,7 +10,7 @@ export default function TitleBar() {
 
   return (
     <div
-      className="shrink-0 flex items-center px-3 bg-[#1a1a1a] select-none"
+      className="shrink-0 flex items-center px-3 bg-[var(--bg-card)] select-none"
       style={
         {
           height: 'env(titlebar-area-height, 36px)',
@@ -18,7 +18,7 @@ export default function TitleBar() {
         } as React.CSSProperties
       }
     >
-      <span className="text-[#858585] text-xs font-medium">Coding Code</span>
+      <span className="text-[var(--text-tertiary)] text-xs font-medium">Coding Code</span>
       <div
         className="flex items-center gap-0.5 ml-4"
         style={{ WebkitAppRegion: 'no-drag' } as React.CSSProperties}
@@ -27,8 +27,8 @@ export default function TitleBar() {
           onClick={() => setMode('agent')}
           className={`px-3 h-6 text-xs rounded transition-colors ${
             mode === 'agent'
-              ? 'bg-[#0e639c] text-white'
-              : 'text-[#858585] hover:text-[#cccccc] hover:bg-[#2d2d2d]'
+              ? 'bg-[var(--accent-primary)] text-[var(--text-inverse)]'
+              : 'text-[var(--text-tertiary)] hover:text-[var(--text-primary)] hover:bg-[var(--bg-hover)]'
           }`}
         >
           Agent
@@ -37,8 +37,8 @@ export default function TitleBar() {
           onClick={() => setMode('ide')}
           className={`px-3 h-6 text-xs rounded transition-colors ${
             mode === 'ide'
-              ? 'bg-[#0e639c] text-white'
-              : 'text-[#858585] hover:text-[#cccccc] hover:bg-[#2d2d2d]'
+              ? 'bg-[var(--accent-primary)] text-[var(--text-inverse)]'
+              : 'text-[var(--text-tertiary)] hover:text-[var(--text-primary)] hover:bg-[var(--bg-hover)]'
           }`}
         >
           IDE
diff --git a/packages/desktop/src/agent/AgentSidebar.tsx b/packages/desktop/src/agent/AgentSidebar.tsx
index 103c6cf..8923e02 100644
--- a/packages/desktop/src/agent/AgentSidebar.tsx
+++ b/packages/desktop/src/agent/AgentSidebar.tsx
@@ -69,12 +69,12 @@ export default function AgentSidebar() {
 
   if (sidebarCollapsed) {
     return (
-      <div className="flex flex-col items-center w-10 shrink-0 bg-[#161616] border-r border-[#222] pt-2 gap-1">
+      <div className="flex flex-col items-center w-10 shrink-0 bg-[var(--bg-sidebar)] border-r border-[var(--border-default)] pt-2 gap-1">
         <button
           type="button"
           onClick={toggleSidebar}
           title="展开侧边栏"
-          className="w-7 h-7 flex items-center justify-center text-[#555] hover:text-[#ccc] hover:bg-[#252525] rounded transition-colors"
+          className="w-7 h-7 flex items-center justify-center text-[var(--text-placeholder)] hover:text-[var(--text-primary)] hover:bg-[var(--bg-hover)] rounded transition-colors"
         >
           <ChevronRight size={16} strokeWidth={1.5} />
         </button>
@@ -83,17 +83,17 @@ export default function AgentSidebar() {
   }
 
   return (
-    <div className="flex flex-col shrink-0 bg-[#161616] border-r border-[#222] w-64 select-none">
+    <div className="flex flex-col shrink-0 bg-[var(--bg-sidebar)] border-r border-[var(--border-default)] w-64 select-none">
       {/* 顶部栏：项目名 + 收起按钮 */}
       <div className="flex items-center justify-between px-2 pt-2">
-        <span className="text-[13px] font-semibold text-[#888] truncate ml-2">
+        <span className="text-[13px] font-semibold text-[var(--text-tertiary)] truncate ml-2">
           {projectName || '项目'}
         </span>
         <button
           type="button"
           onClick={toggleSidebar}
           title="收起侧边栏"
-          className="w-7 h-7 flex items-center justify-center text-[#555] hover:text-[#ccc] hover:bg-[#252525] rounded transition-colors"
+          className="w-7 h-7 flex items-center justify-center text-[var(--text-placeholder)] hover:text-[var(--text-primary)] hover:bg-[var(--bg-hover)] rounded transition-colors"
         >
           <ChevronLeft size={16} strokeWidth={1.5} />
         </button>
@@ -104,7 +104,7 @@ export default function AgentSidebar() {
         <button
           type="button"
           onClick={() => setCurrentThread(null)}
-          className="w-full flex items-center gap-2.5 px-4 py-2.5 rounded-lg text-[14px] text-[#bbb] hover:text-white hover:bg-[#252525] transition-colors border border-[#2a2a2a] hover:border-[#3a3a3a]"
+          className="w-full flex items-center gap-2.5 px-4 py-2.5 rounded-lg text-[14px] text-[var(--text-secondary)] hover:text-[var(--text-primary)] hover:bg-[var(--bg-hover)] transition-colors border border-[var(--border-card)] hover:border-[var(--border-hover)]"
         >
           <Plus size={16} strokeWidth={1.5} />
           <span>新对话</span>
@@ -117,12 +117,12 @@ export default function AgentSidebar() {
         <NavItem icon={<Zap size={16} strokeWidth={1.5} />} label="自动化" />
       </nav>
 
-      <div className="mx-3 border-t border-[#222]" />
+      <div className="mx-3 border-t border-[var(--border-default)]" />
 
       {/* 会话列表 */}
       <div className="flex-1 overflow-y-auto py-3 min-h-0">
         <div className="px-3 pb-1.5">
-          <span className="text-[11px] font-semibold text-[#444] uppercase tracking-wider">
+          <span className="text-[11px] font-semibold text-[var(--text-disabled)] uppercase tracking-wider">
             会话
           </span>
         </div>
@@ -135,8 +135,8 @@ export default function AgentSidebar() {
             onMouseLeave={() => setHoveredThreadId(null)}
             className={`w-full text-left px-4 py-2.5 rounded-lg flex items-center gap-2 transition-colors ${
               currentThreadId === t.id
-                ? 'bg-[#0d2d4a] text-[#cde]'
-                : 'text-[#888] hover:bg-[#1c1c1c] hover:text-[#bbb]'
+                ? 'bg-[var(--bg-selected)] text-[var(--text-primary)]'
+                : 'text-[var(--text-tertiary)] hover:bg-[var(--bg-card-hover)] hover:text-[var(--text-secondary)]'
             }`}
           >
             <span className="flex-1 text-[14px] truncate">{t.title || '未命名对话'}</span>
@@ -147,7 +147,7 @@ export default function AgentSidebar() {
                   e.stopPropagation();
                   handleDelete(t.id);
                 }}
-                className="shrink-0 p-0.5 text-[#555] hover:text-red-400 transition-colors"
+                className="shrink-0 p-0.5 text-[var(--text-placeholder)] hover:text-red-400 transition-colors"
                 title="删除对话"
               >
                 <svg
@@ -168,7 +168,7 @@ export default function AgentSidebar() {
                 </svg>
               </button>
             ) : (
-              <span className="text-[12px] text-[#3a3a3a] shrink-0">
+              <span className="text-[12px] text-[var(--text-disabled)] shrink-0">
                 {relativeTime(t.updatedAt)}
               </span>
             )}
@@ -177,24 +177,24 @@ export default function AgentSidebar() {
         {threadList.length > 15 && (
           <button
             type="button"
-            className="w-full text-left px-4 py-1.5 text-[12px] text-[#3a3a3a] hover:text-[#555] transition-colors"
+            className="w-full text-left px-4 py-1.5 text-[12px] text-[var(--text-disabled)] hover:text-[var(--text-placeholder)] transition-colors"
           >
             +{threadList.length - 15} 条更多
           </button>
         )}
         {threadList.length === 0 && (
-          <div className="px-3 py-4 text-[13px] text-[#3a3a3a]">暂无对话</div>
+          <div className="px-3 py-4 text-[13px] text-[var(--text-disabled)]">暂无对话</div>
         )}
       </div>
 
-      <div className="mx-3 border-t border-[#222]" />
+      <div className="mx-3 border-t border-[var(--border-default)]" />
 
       {/* 底部 */}
       <div className="px-2 py-2.5">
         <button
           type="button"
           onClick={() => useGlobalStore.getState().setView('settings')}
-          className="w-full flex items-center gap-2 px-3 py-2 text-[13px] text-[#555] hover:text-[#ccc] hover:bg-[#252525] rounded-lg transition-colors"
+          className="w-full flex items-center gap-2 px-3 py-2 text-[13px] text-[var(--text-placeholder)] hover:text-[var(--text-primary)] hover:bg-[var(--bg-hover)] rounded-lg transition-colors"
         >
           <Settings size={16} strokeWidth={1.5} />
           <span>设置</span>
@@ -208,11 +208,11 @@ function NavItem({ icon, label, shortcut }: { icon: React.ReactNode; label: stri
   return (
     <button
       type="button"
-      className="w-full flex items-center gap-2.5 px-4 py-2 rounded-lg text-[14px] text-[#666] hover:text-[#ccc] hover:bg-[#1e1e1e] transition-colors"
+      className="w-full flex items-center gap-2.5 px-4 py-2 rounded-lg text-[14px] text-[var(--text-muted)] hover:text-[var(--text-primary)] hover:bg-[var(--bg-base)] transition-colors"
     >
       <span className="w-4 flex items-center justify-center shrink-0">{icon}</span>
       <span className="flex-1 text-left">{label}</span>
-      {shortcut && <span className="text-[11px] text-[#333]">{shortcut}</span>}
+      {shortcut && <span className="text-[11px] text-[var(--text-disabled)]">{shortcut}</span>}
     </button>
   );
 }
diff --git a/packages/desktop/src/agent/AgentWorkspace.tsx b/packages/desktop/src/agent/AgentWorkspace.tsx
index d45796c..0355c5a 100644
--- a/packages/desktop/src/agent/AgentWorkspace.tsx
+++ b/packages/desktop/src/agent/AgentWorkspace.tsx
@@ -29,13 +29,13 @@ function ContextIndicator({ threadId }: { threadId: string }) {
         className="w-5 h-5 flex items-center justify-center animate-pulse cursor-default"
       >
         <svg width="18" height="18" viewBox="0 0 18 18">
-          <circle cx="9" cy="9" r={r} fill="none" stroke="#2a2a2a" strokeWidth="2.5" />
+          <circle cx="9" cy="9" r={r} fill="none" stroke="var(--border-card)" strokeWidth="2.5" />
           <circle
             cx="9"
             cy="9"
             r={r}
             fill="none"
-            stroke="#555"
+            stroke="var(--text-placeholder)"
             strokeWidth="2.5"
             strokeDasharray={circ}
             strokeDashoffset={circ * 0.6}
@@ -88,7 +88,7 @@ function ContextIndicator({ threadId }: { threadId: string }) {
       className="w-5 h-5 flex items-center justify-center hover:opacity-70 transition-opacity"
     >
       <svg width="18" height="18" viewBox="0 0 18 18">
-        <circle cx="9" cy="9" r={r} fill="none" stroke="#2a2a2a" strokeWidth="2.5" />
+        <circle cx="9" cy="9" r={r} fill="none" stroke="var(--border-card)" strokeWidth="2.5" />
         <circle
           cx="9"
           cy="9"
@@ -139,10 +139,10 @@ function ModelSelector() {
         ref={buttonRef}
         type="button"
         onClick={() => setOpen((v) => !v)}
-        className="flex items-center gap-1.5 px-2.5 py-1.5 text-[13px] text-[#555] hover:text-[#aaa] hover:bg-[#252525] rounded-lg transition-colors"
+        className="flex items-center gap-1.5 px-2.5 py-1.5 text-[13px] text-[var(--text-placeholder)] hover:text-[var(--text-secondary)] hover:bg-[var(--bg-hover)] rounded-lg transition-colors"
       >
         <span className="max-w-[160px] truncate">{displayName || '选择模型'}</span>
-        <span className="text-[#3c3c3c] text-[10px]">▾</span>
+        <span className="text-[var(--text-disabled)] text-[10px]">▾</span>
       </button>
       {open &&
         createPortal(
@@ -150,11 +150,11 @@ function ModelSelector() {
             <div className="fixed inset-0 z-40" onClick={() => setOpen(false)} />
             <div
               ref={dropdownRef}
-              className="fixed bg-[#1e1e1e] border border-[#333] rounded-xl shadow-2xl min-w-[260px] z-50 py-1.5 max-h-[400px] overflow-y-auto"
+              className="fixed bg-[var(--bg-tooltip)] border border-[var(--border-strong)] rounded-xl shadow-2xl min-w-[260px] z-50 py-1.5 max-h-[400px] overflow-y-auto"
             >
               {Object.entries(groups).map(([provider, providerModels]) => (
                 <div key={provider}>
-                  <div className="px-3 py-1.5 text-[11px] font-semibold text-[#444] uppercase tracking-wider">
+                  <div className="px-3 py-1.5 text-[11px] font-semibold text-[var(--text-disabled)] uppercase tracking-wider">
                     {provider}
                   </div>
                   {providerModels.map((m) => (
@@ -172,13 +172,13 @@ function ModelSelector() {
                           console.error('Failed to switch model:', e);
                         });
                       }}
-                      className={`w-full text-left px-3 py-2 text-[14px] hover:bg-[#094771] transition-colors flex items-center gap-2 ${m.id === model ? 'text-[#4ec9b0]' : 'text-[#ccc]'}`}
+                      className={`w-full text-left px-3 py-2 text-[14px] hover:bg-[var(--bg-selected-hover)] transition-colors flex items-center gap-2 ${m.id === model ? 'text-[var(--accent-success)]' : 'text-[var(--text-primary)]'}`}
                     >
                       <span className="w-4 shrink-0 text-center text-[12px]">
                         {m.id === model ? '✓' : ''}
                       </span>
                       <span className="flex-1">{m.name}</span>
-                      <span className="text-[#3c3c3c] text-[12px] shrink-0">
+                      <span className="text-[var(--text-disabled)] text-[12px] shrink-0">
                         {(m.context_window / 1000).toFixed(0)}k
                       </span>
                     </button>
@@ -186,7 +186,7 @@ function ModelSelector() {
                 </div>
               ))}
               {models.length === 0 && (
-                <div className="px-3 py-3 text-[14px] text-[#444]">无可用模型</div>
+                <div className="px-3 py-3 text-[14px] text-[var(--text-disabled)]">无可用模型</div>
               )}
             </div>
           </>,
@@ -260,7 +260,7 @@ function InputBox({
 
   return (
     <div className={centered ? 'w-full max-w-[740px]' : 'px-5 pb-5 pt-2'}>
-      <div className="rounded-2xl border border-[#2d2d2d] bg-[#1c1c1c] hover:border-[#3a3a3a] focus-within:border-[#3a5a7a] transition-colors shadow-xl overflow-hidden">
+      <div className="rounded-2xl border border-[var(--border-card)] bg-[var(--bg-card)] hover:border-[var(--border-hover)] focus-within:border-[var(--accent-primary)] transition-colors shadow-xl overflow-hidden">
         {/* Row 1: textarea + send button side by side */}
         <div className="flex items-center gap-2 pr-3">
           <textarea
@@ -276,14 +276,14 @@ function InputBox({
             placeholder="可向 AI 询问任何事"
             disabled={isStreaming}
             rows={3}
-            className="flex-1 bg-transparent px-5 pt-4 pb-3 text-[15px] text-[#d4d4d4] placeholder-[#333] resize-none outline-none leading-relaxed disabled:opacity-50"
+            className="flex-1 bg-transparent px-5 pt-4 pb-3 text-[15px] text-[var(--text-primary)] placeholder-[var(--text-disabled)] resize-none outline-none leading-relaxed disabled:opacity-50"
           />
           {/* Send / Stop — vertically centered to the right of textarea */}
           {isStreaming ? (
             <button
               type="button"
               onClick={() => abort()}
-              className="w-9 h-9 shrink-0 flex items-center justify-center bg-[#3a3a3a] hover:bg-[#4a4a4a] text-[#ccc] rounded-full transition-colors"
+              className="w-9 h-9 shrink-0 flex items-center justify-center bg-[var(--border-hover)] hover:bg-[var(--border-strong)] text-[var(--text-primary)] rounded-full transition-colors"
             >
               <Square size={14} strokeWidth={2} fill="currentColor" />
             </button>
@@ -292,7 +292,7 @@ function InputBox({
               type="button"
               onClick={handleSend}
               disabled={!text.trim()}
-              className="w-9 h-9 shrink-0 flex items-center justify-center bg-white disabled:bg-[#2a2a2a] disabled:text-[#444] text-[#111] rounded-full transition-colors"
+              className="w-9 h-9 shrink-0 flex items-center justify-center bg-[var(--btn-send-bg)] disabled:bg-[var(--bg-card)] disabled:text-[var(--text-disabled)] text-[var(--text-inverse)] rounded-full transition-colors"
             >
               <Send size={18} strokeWidth={2} />
             </button>
@@ -320,11 +320,11 @@ function InputBox({
                 });
               }
             }}
-            className="flex items-center gap-1.5 px-2.5 py-1.5 text-[13px] text-[#555] hover:text-[#aaa] hover:bg-[#252525] rounded-lg transition-colors"
+            className="flex items-center gap-1.5 px-2.5 py-1.5 text-[13px] text-[var(--text-placeholder)] hover:text-[var(--text-secondary)] hover:bg-[var(--bg-hover)] rounded-lg transition-colors"
           >
-            <span className="text-[#569cd6]">{POLICY_ICONS[approvalPolicy]}</span>
+            <span className="text-[var(--accent-primary)]">{POLICY_ICONS[approvalPolicy]}</span>
             <span>{POLICY_LABELS[approvalPolicy] ?? '全部询问'}</span>
-            <span className="text-[#3c3c3c] text-[10px]">▾</span>
+            <span className="text-[var(--text-disabled)] text-[10px]">▾</span>
           </button>
           <div className="ml-auto flex items-center gap-2">
             {currentThreadId && <ContextIndicator threadId={currentThreadId} />}
@@ -350,10 +350,10 @@ export default function AgentWorkspace({ sendMessage, abort }: AgentWorkspacePro
 
   if (!currentThreadId) {
     return (
-      <div className="flex-1 flex flex-col items-center justify-center gap-6 bg-[#111] overflow-hidden px-6">
-        <h2 className="text-[22px] font-medium text-[#ccc] tracking-tight">
+      <div className="flex-1 flex flex-col items-center justify-center gap-6 bg-[var(--bg-panel)] overflow-hidden px-6">
+        <h2 className="text-[22px] font-medium text-[var(--text-primary)] tracking-tight">
           在{' '}
-          <span className="text-white font-semibold">
+          <span className="text-[var(--accent-primary)] font-semibold">
             {workspace.name || workspace.rootPath.split(/[\\/]/).pop() || '当前目录'}
           </span>{' '}
           中构建什么？
@@ -364,13 +364,13 @@ export default function AgentWorkspace({ sendMessage, abort }: AgentWorkspacePro
   }
 
   return (
-    <div className="flex-1 flex flex-col overflow-hidden bg-[#111]">
+    <div className="flex-1 flex flex-col overflow-hidden bg-[var(--bg-panel)]">
       <MessageStream key={currentThreadId} threadId={currentThreadId} />
       <ApprovalPanel threadId={currentThreadId} />
       <TodoPanel threadId={currentThreadId} />
       {isCompressing && (
-        <div className="shrink-0 px-5 py-1.5 bg-[#1a1a1a] border-t border-[#2d2d2d] flex items-center gap-2 text-[13px] text-[#888]">
-          <span className="w-3 h-3 border-2 border-[#555] border-t-transparent rounded-full animate-spin" />
+        <div className="shrink-0 px-5 py-1.5 bg-[var(--bg-card)] border-t border-[var(--border-card)] flex items-center gap-2 text-[13px] text-[var(--text-tertiary)]">
+          <span className="w-3 h-3 border-2 border-[var(--text-placeholder)] border-t-transparent rounded-full animate-spin" />
           <span>正在压缩上下文...</span>
         </div>
       )}
diff --git a/packages/desktop/src/agent/ApprovalPanel.tsx b/packages/desktop/src/agent/ApprovalPanel.tsx
index 6e7d8e0..f888b36 100644
--- a/packages/desktop/src/agent/ApprovalPanel.tsx
+++ b/packages/desktop/src/agent/ApprovalPanel.tsx
@@ -43,7 +43,7 @@ export default function ApprovalPanel({ threadId }: ApprovalPanelProps) {
         <button
           type="button"
           onClick={() => setCollapsed(false)}
-          className="flex items-center gap-1.5 px-3 py-2 rounded-full bg-[#1e1e1e] border border-[#3c3c3c] text-[#ccc] text-[13px] shadow-lg hover:bg-[#252525] transition-colors"
+          className="flex items-center gap-1.5 px-3 py-2 rounded-full bg-[var(--bg-panel)] border border-[var(--border-card)] text-[var(--text-primary)] text-[13px] shadow-lg hover:bg-[var(--bg-hover)] transition-colors"
         >
           <span>🔧</span>
           <span>{pendingItems.length} 个工具等待审批</span>
@@ -54,18 +54,18 @@ export default function ApprovalPanel({ threadId }: ApprovalPanelProps) {
 
   return (
     <div className="fixed top-20 right-5 w-[320px] max-h-[70vh] z-40 flex flex-col">
-      <div className="rounded-lg bg-[#1e1e1e] border border-[#3c3c3c] shadow-xl overflow-hidden flex flex-col">
-        <div className="flex items-center justify-between px-4 py-3 bg-[#252526] border-b border-[#3c3c3c]">
+      <div className="rounded-lg bg-[var(--bg-panel)] border border-[var(--border-card)] shadow-xl overflow-hidden flex flex-col">
+        <div className="flex items-center justify-between px-4 py-3 bg-[var(--bg-code-header)] border-b border-[var(--border-card)]">
           <div className="flex items-center gap-2">
             <span>🔧</span>
-            <span className="text-[13px] text-[#ccc] font-medium">
+            <span className="text-[13px] text-[var(--text-primary)] font-medium">
               工具审批 ({pendingItems.length})
             </span>
           </div>
           <button
             type="button"
             onClick={() => setCollapsed(true)}
-            className="text-[#666] hover:text-[#ccc] text-[16px] leading-none transition-colors"
+            className="text-[var(--text-muted)] hover:text-[var(--text-primary)] text-[16px] leading-none transition-colors"
           >
             −
           </button>
diff --git a/packages/desktop/src/agent/MessageStream.tsx b/packages/desktop/src/agent/MessageStream.tsx
index c2ede0b..88f2517 100644
--- a/packages/desktop/src/agent/MessageStream.tsx
+++ b/packages/desktop/src/agent/MessageStream.tsx
@@ -76,11 +76,11 @@ function TurnDiffPanel({
   const totalDeletions = diff.files.reduce((sum: number, f: any) => sum + (f.deletions ?? 0), 0);
 
   return (
-    <div className="mt-2 rounded-lg bg-[#1a1a1a] border border-[#2a2a2a] overflow-hidden">
+    <div className="mt-2 rounded-lg bg-[var(--bg-card)] border border-[var(--border-card)] overflow-hidden">
       {/* Header */}
       <div className="flex items-center justify-between px-4 py-3">
         <div className="flex items-center gap-3">
-          <div className="w-7 h-7 rounded bg-[#2a2a2a] flex items-center justify-center">
+          <div className="w-7 h-7 rounded bg-[var(--bg-hover)] flex items-center justify-center">
             <svg
               width="14"
               height="14"
@@ -88,18 +88,18 @@ function TurnDiffPanel({
               fill="none"
               xmlns="http://www.w3.org/2000/svg"
             >
-              <path d="M8 1v14M1 8h14" stroke="#888" strokeWidth="1.5" strokeLinecap="round" />
+              <path d="M8 1v14M1 8h14" stroke="var(--text-muted)" strokeWidth="1.5" strokeLinecap="round" />
             </svg>
           </div>
           <div>
-            <span className="text-[13px] text-[#ccc]">已编辑 {diff.files.length} 个文件</span>
-            {isInterrupted && <span className="ml-2 text-[11px] text-[#c88]">（对话中断）</span>}
+            <span className="text-[13px] text-[var(--text-primary)]">已编辑 {diff.files.length} 个文件</span>
+            {isInterrupted && <span className="ml-2 text-[11px] text-[var(--accent-danger)]">（对话中断）</span>}
             <div className="flex items-center gap-2 mt-0.5">
               {totalInsertions > 0 && (
-                <span className="text-[12px] text-[#4a4]">+{totalInsertions}</span>
+                <span className="text-[12px] text-[var(--accent-success)]">+{totalInsertions}</span>
               )}
               {totalDeletions > 0 && (
-                <span className="text-[12px] text-[#c44]">-{totalDeletions}</span>
+                <span className="text-[12px] text-[var(--accent-danger)]">-{totalDeletions}</span>
               )}
             </div>
           </div>
@@ -109,8 +109,8 @@ function TurnDiffPanel({
             onClick={() => onRevertScope(uiTurnId, 'all', isAllReverted)}
             className={`text-[12px] px-3 py-1 rounded ${
               isAllReverted
-                ? 'bg-[#4a3] text-white hover:bg-[#5b4]'
-                : 'bg-[#333] text-[#aaa] hover:bg-[#444] border border-[#444]'
+                ? 'bg-[var(--accent-success)] text-[var(--text-inverse)] hover:bg-[var(--accent-success)]/80'
+                : 'bg-[var(--bg-hover)] text-[var(--text-secondary)] hover:bg-[var(--bg-active)] border border-[var(--border-strong)]'
             }`}
           >
             {isAllReverted ? '撤销回退本轮全部修改' : '回退本轮全部修改'}
@@ -119,8 +119,8 @@ function TurnDiffPanel({
             onClick={() => onRevertScope(uiTurnId, 'agent', isAgentReverted)}
             className={`text-[12px] px-3 py-1 rounded ${
               isAgentReverted
-                ? 'bg-[#4a3] text-white hover:bg-[#5b4]'
-                : 'bg-[#333] text-[#aaa] hover:bg-[#444] border border-[#444]'
+                ? 'bg-[var(--accent-success)] text-[var(--text-inverse)] hover:bg-[var(--accent-success)]/80'
+                : 'bg-[var(--bg-hover)] text-[var(--text-secondary)] hover:bg-[var(--bg-active)] border border-[var(--border-strong)]'
             }`}
           >
             {isAgentReverted ? '撤销回退 Agent 修改' : '只回退 Agent 修改'}
@@ -129,7 +129,7 @@ function TurnDiffPanel({
       </div>
 
       {/* File list */}
-      <div className="border-t border-[#2a2a2a]">
+      <div className="border-t border-[var(--border-card)]">
         {diff.files.map((f: any) => {
           const isExpanded = expandedFile === f.path;
           const isFileIndividuallyReverted = revertedFiles.includes(f.path);
@@ -138,22 +138,22 @@ function TurnDiffPanel({
           return (
             <div key={f.path}>
               <div
-                className="flex items-center justify-between px-4 py-2 hover:bg-[#222] cursor-pointer"
+                className="flex items-center justify-between px-4 py-2 hover:bg-[var(--bg-hover)] cursor-pointer"
                 onClick={() => setExpandedFile(isExpanded ? null : f.path)}
               >
                 <div className="flex items-center gap-2 flex-1 min-w-0">
-                  <span className="text-[12px] text-[#ccc] truncate">
+                  <span className="text-[12px] text-[var(--text-primary)] truncate">
                     {f.path.replace(/\\/g, '/')}
                   </span>
-                  <span className="text-[10px] text-[#666] shrink-0">
+                  <span className="text-[10px] text-[var(--text-muted)] shrink-0">
                     {f.source === 'agent' ? 'Agent' : '未知'}
                   </span>
-                  {isReverted && <span className="text-[10px] text-[#c88] shrink-0">已回退</span>}
+                  {isReverted && <span className="text-[10px] text-[var(--accent-danger)] shrink-0">已回退</span>}
                 </div>
                 <div className="flex items-center gap-3 shrink-0 ml-3">
                   <div className="flex items-center gap-1.5 text-[12px]">
-                    {f.insertions > 0 && <span className="text-[#4a4]">+{f.insertions}</span>}
-                    {f.deletions > 0 && <span className="text-[#c44]">-{f.deletions}</span>}
+                    {f.insertions > 0 && <span className="text-[var(--accent-success)]">+{f.insertions}</span>}
+                    {f.deletions > 0 && <span className="text-[var(--accent-danger)]">-{f.deletions}</span>}
                   </div>
                   <button
                     onClick={(e) => {
@@ -162,8 +162,8 @@ function TurnDiffPanel({
                     }}
                     className={`text-[11px] px-2 py-0.5 rounded ${
                       isReverted
-                        ? 'bg-[#4a3] text-white hover:bg-[#5b4]'
-                        : 'bg-[#333] text-[#888] hover:bg-[#444]'
+                        ? 'bg-[var(--accent-success)] text-[var(--text-inverse)] hover:bg-[var(--accent-success)]/80'
+                        : 'bg-[var(--bg-hover)] text-[var(--text-muted)] hover:bg-[var(--bg-active)]'
                     }`}
                   >
                     {isReverted ? '撤销' : '回退'}
@@ -177,7 +177,7 @@ function TurnDiffPanel({
                   >
                     <path
                       d="M3 4.5L6 7.5L9 4.5"
-                      stroke="#666"
+                      stroke="var(--text-muted)"
                       strokeWidth="1.2"
                       strokeLinecap="round"
                       strokeLinejoin="round"
@@ -480,20 +480,20 @@ export default function MessageStream({ threadId }: MessageStreamProps) {
 
   if (turns.length === 0 || renderEntries.length === 0) {
     return (
-      <div className="flex-1 flex items-center justify-center text-[#444] text-[15px]">
+      <div className="flex-1 flex items-center justify-center text-[var(--text-placeholder)] text-[15px]">
         发送消息开始对话
       </div>
     );
   }
 
   const rollbackModal = showRollbackPanel && (
-    <div className="fixed inset-0 bg-black/50 flex items-center justify-center z-50">
-      <div className="bg-[#1e1e1e] border border-[#444] rounded-lg p-6 max-w-2xl w-full mx-4 max-h-[80vh] overflow-y-auto">
-        <h3 className="text-[15px] text-[#ccc] mb-4">将回退到 Turn {showRollbackPanel.turnId}</h3>
+    <div className="fixed inset-0 bg-[var(--overlay-bg)] flex items-center justify-center z-50">
+      <div className="bg-[var(--bg-panel)] border border-[var(--border-strong)] rounded-lg p-6 max-w-2xl w-full mx-4 max-h-[80vh] overflow-y-auto">
+        <h3 className="text-[15px] text-[var(--text-primary)] mb-4">将回退到 Turn {showRollbackPanel.turnId}</h3>
         {showRollbackPanel.preview && (
           <div className="mb-4">
-            <div className="text-[12px] text-[#888] mb-2">回退前 / 回退后差异：</div>
-            <pre className="text-[11px] bg-[#111] p-3 rounded text-[#aaa] max-h-[300px] overflow-auto whitespace-pre-wrap">
+            <div className="text-[12px] text-[var(--text-secondary)] mb-2">回退前 / 回退后差异：</div>
+            <pre className="text-[11px] bg-[var(--bg-code)] p-3 rounded text-[var(--text-secondary)] max-h-[300px] overflow-auto whitespace-pre-wrap">
               {showRollbackPanel.preview.diff || '无差异'}
             </pre>
           </div>
@@ -505,7 +505,7 @@ export default function MessageStream({ threadId }: MessageStreamProps) {
               await rollbackCtx(threadId, parseInt(showRollbackPanel.turnId, 10));
               setShowRollbackPanel(null);
             }}
-            className="text-[12px] px-3 py-1.5 rounded bg-[#555] text-[#ccc] hover:bg-[#666]"
+            className="text-[12px] px-3 py-1.5 rounded bg-[var(--bg-hover)] text-[var(--text-primary)] hover:bg-[var(--bg-active)]"
           >
             只回退上下文
           </button>
@@ -515,13 +515,13 @@ export default function MessageStream({ threadId }: MessageStreamProps) {
               await rollbackBoth(threadId, parseInt(showRollbackPanel.turnId, 10));
               setShowRollbackPanel(null);
             }}
-            className="text-[12px] px-3 py-1.5 rounded bg-[#c44] text-white hover:bg-[#d55]"
+            className="text-[12px] px-3 py-1.5 rounded bg-[var(--accent-danger)] text-[var(--text-inverse)] hover:bg-[var(--accent-danger)]/80"
           >
             上下文和代码都回退
           </button>
           <button
             onClick={() => setShowRollbackPanel(null)}
-            className="text-[12px] px-3 py-1.5 rounded bg-[#333] text-[#888] hover:bg-[#444]"
+            className="text-[12px] px-3 py-1.5 rounded bg-[var(--bg-hover)] text-[var(--text-muted)] hover:bg-[var(--bg-active)]"
           >
             取消
           </button>
diff --git a/packages/desktop/src/agent/ProjectStrip.tsx b/packages/desktop/src/agent/ProjectStrip.tsx
index cb66614..fd96eee 100644
--- a/packages/desktop/src/agent/ProjectStrip.tsx
+++ b/packages/desktop/src/agent/ProjectStrip.tsx
@@ -52,9 +52,9 @@ function SessionListPopup({
   const sorted = [...threads].sort((a, b) => b.updatedAt - a.updatedAt);
   const [hoveredId, setHoveredId] = useState<string | null>(null);
   return (
-    <div className="absolute left-full top-0 ml-1 w-60 bg-[#1a1a1a] border border-[#2a2a2a] rounded-lg shadow-2xl z-50">
-      <div className="px-3 py-2 border-b border-[#2a2a2a]">
-        <span className="text-[12px] font-semibold text-[#777] uppercase tracking-wider">
+    <div className="absolute left-full top-0 ml-1 w-60 bg-[var(--bg-card)] border border-[var(--border-card)] rounded-lg shadow-2xl z-50">
+      <div className="px-3 py-2 border-b border-[var(--border-card)]">
+        <span className="text-[12px] font-semibold text-[var(--text-tertiary)] uppercase tracking-wider">
           {project.name}
         </span>
       </div>
@@ -68,8 +68,8 @@ function SessionListPopup({
             onMouseLeave={() => setHoveredId(null)}
             className={`w-full text-left px-3 py-2 flex items-center gap-2 transition-colors ${
               currentThreadId === t.id
-                ? 'bg-[#0d2d4a] text-[#cde]'
-                : 'text-[#888] hover:bg-[#252525] hover:text-[#ccc]'
+                ? 'bg-[var(--bg-selected)] text-[var(--accent-primary)]'
+                : 'text-[var(--text-tertiary)] hover:bg-[var(--bg-hover)] hover:text-[var(--text-primary)]'
             }`}
           >
             <span className="flex-1 text-[13px] truncate">{t.title || '未命名对话'}</span>
@@ -80,7 +80,7 @@ function SessionListPopup({
                   e.stopPropagation();
                   onDeleteThread(t.id);
                 }}
-                className="shrink-0 p-0.5 text-[#555] hover:text-red-400 transition-colors"
+                className="shrink-0 p-0.5 text-[var(--text-placeholder)] hover:text-red-400 transition-colors"
                 title="删除对话"
               >
                 <svg
@@ -101,15 +101,15 @@ function SessionListPopup({
                 </svg>
               </button>
             ) : (
-              <span className="text-[11px] text-[#444] shrink-0">{relativeTime(t.updatedAt)}</span>
+              <span className="text-[11px] text-[var(--text-disabled)] shrink-0">{relativeTime(t.updatedAt)}</span>
             )}
           </button>
         ))}
         {sorted.length === 0 && (
-          <div className="px-3 py-3 text-[13px] text-[#3a3a3a]">暂无对话</div>
+          <div className="px-3 py-3 text-[13px] text-[var(--text-disabled)]">暂无对话</div>
         )}
         {sorted.length > 12 && (
-          <div className="px-3 py-1 text-[12px] text-[#3a3a3a]">+{sorted.length - 12} 条更多</div>
+          <div className="px-3 py-1 text-[12px] text-[var(--text-disabled)]">+{sorted.length - 12} 条更多</div>
         )}
       </div>
     </div>
@@ -184,7 +184,7 @@ export default function ProjectStrip() {
   };
 
   return (
-    <div className="flex flex-col items-center w-12 shrink-0 bg-[#111] border-r border-[#222] pt-3 pb-2 gap-4 select-none">
+    <div className="flex flex-col items-center w-12 shrink-0 bg-[var(--bg-panel)] border-r border-[var(--border-default)] pt-3 pb-2 gap-4 select-none">
       {projects.map((p) => {
         const isActive = p.id === currentProjectId;
         const colorClass = colorForId(p.id);
@@ -199,8 +199,8 @@ export default function ProjectStrip() {
               type="button"
               onClick={() => handleSelectProject(p.id)}
               title={p.name}
-              className={`w-9 h-9 rounded-lg flex items-center justify-center text-[15px] font-semibold text-white transition-all shrink-0
-                ${colorClass} ${isActive ? 'ring-2 ring-white/60 ring-offset-1 ring-offset-[#111]' : 'opacity-70 hover:opacity-100'}`}
+              className={`w-9 h-9 rounded-lg flex items-center justify-center text-[15px] font-semibold text-[var(--text-white)] transition-all shrink-0
+                ${colorClass} ${isActive ? 'ring-2 ring-white/60 ring-offset-1 ring-offset-[var(--bg-panel)]' : 'opacity-70 hover:opacity-100'}`}
             >
               {p.name.charAt(0).toUpperCase()}
             </button>
@@ -221,13 +221,13 @@ export default function ProjectStrip() {
       })}
 
       {/* Divider before add button */}
-      {projects.length > 0 && <div className="w-6 border-t border-[#2a2a2a] my-1" />}
+      {projects.length > 0 && <div className="w-6 border-t border-[var(--border-card)] my-1" />}
 
       <button
         type="button"
         onClick={handleAddProject}
         title="添加项目"
-        className="w-9 h-9 rounded-lg flex items-center justify-center text-[#555] hover:text-[#ccc] hover:bg-[#252525] transition-colors text-lg shrink-0"
+        className="w-9 h-9 rounded-lg flex items-center justify-center text-[var(--text-placeholder)] hover:text-[var(--text-primary)] hover:bg-[var(--bg-hover)] transition-colors text-lg shrink-0"
       >
         +
       </button>
diff --git a/packages/desktop/src/agent/TodoPanel.tsx b/packages/desktop/src/agent/TodoPanel.tsx
index 0c9977c..a7a71cf 100644
--- a/packages/desktop/src/agent/TodoPanel.tsx
+++ b/packages/desktop/src/agent/TodoPanel.tsx
@@ -3,9 +3,9 @@ import type { TodoItem } from '@shared/types';
 
 function TodoItemRow({ item }: { item: TodoItem }) {
   const statusColor = {
-    pending: 'text-[#777]',
-    in_progress: 'text-[#569cd6]',
-    completed: 'text-[#6a9955]',
+    pending: 'text-[var(--text-tertiary)]',
+    in_progress: 'text-[var(--accent-primary)]',
+    completed: 'text-[var(--accent-success)]',
   }[item.status];
 
   const statusIcon = {
@@ -17,7 +17,7 @@ function TodoItemRow({ item }: { item: TodoItem }) {
   return (
     <div className="flex items-start gap-2 text-[13px] leading-relaxed">
       <span className={`shrink-0 ${statusColor}`}>{statusIcon}</span>
-      <span className={item.status === 'completed' ? 'text-[#888] line-through' : 'text-[#ccc]'}>
+      <span className={item.status === 'completed' ? 'text-[var(--text-tertiary)] line-through' : 'text-[var(--text-primary)]'}>
         {item.step}
       </span>
     </div>
@@ -49,24 +49,24 @@ export default function TodoPanel({ threadId }: { threadId: string }) {
         .join(' · ') || 'Todo';
 
   return (
-    <div className="shrink-0 border-t border-[#2a2a2a] bg-[#1a1a1a]">
+    <div className="shrink-0 border-t border-[var(--border-card)] bg-[var(--bg-card)]">
       {/* Collapsed header — always visible when panel is shown */}
       <button
         type="button"
         onClick={() => toggleCollapsed(threadId)}
-        className="w-full flex items-center justify-between px-5 py-2 text-[13px] hover:bg-[#222] transition-colors"
+        className="w-full flex items-center justify-between px-5 py-2 text-[13px] hover:bg-[var(--border-default)] transition-colors"
       >
         <div className="flex items-center gap-2">
-          <span className="font-medium text-[#ddd]">Todo</span>
-          <span className="text-[#777]">{summary}</span>
+          <span className="font-medium text-[var(--text-title)]">Todo</span>
+          <span className="text-[var(--text-tertiary)]">{summary}</span>
         </div>
-        <span className="text-[#555]">{collapsed ? '⌃' : '⌄'}</span>
+        <span className="text-[var(--text-placeholder)]">{collapsed ? '⌃' : '⌄'}</span>
       </button>
 
       {/* Expanded list */}
       {!collapsed && (
         <div className="px-5 pb-3 max-h-[220px] overflow-y-auto">
-          {allCompleted && <div className="text-[12px] text-[#6a9955] mb-2">全部完成</div>}
+          {allCompleted && <div className="text-[12px] text-[var(--accent-success)] mb-2">全部完成</div>}
           <div className="space-y-1.5">
             {items.map((item, index) => (
               <TodoItemRow key={index} item={item} />
diff --git a/packages/desktop/src/layouts/IDELayout.tsx b/packages/desktop/src/layouts/IDELayout.tsx
index 221c6e4..18a0780 100644
--- a/packages/desktop/src/layouts/IDELayout.tsx
+++ b/packages/desktop/src/layouts/IDELayout.tsx
@@ -4,12 +4,12 @@ export default function IDELayout() {
   const setMode = useGlobalStore((s) => s.setMode);
 
   return (
-    <div className="flex-1 flex items-center justify-center flex-col gap-6 bg-[#252526]">
-      <h1 className="text-2xl font-semibold text-[#cccccc]">IDE 模式</h1>
-      <p className="text-[#888] text-sm">Phase 3 中实现完整 IDE 布局</p>
+    <div className="flex-1 flex items-center justify-center flex-col gap-6 bg-[var(--bg-hover)]">
+      <h1 className="text-2xl font-semibold text-[var(--text-primary)]">IDE 模式</h1>
+      <p className="text-[var(--text-tertiary)] text-sm">Phase 3 中实现完整 IDE 布局</p>
       <button
         onClick={() => setMode('agent')}
-        className="px-4 py-2 bg-[#0e639c] hover:bg-[#1177bb] text-white rounded text-sm transition-colors"
+        className="px-4 py-2 bg-[var(--accent-primary)] hover:bg-[var(--btn-primary-hover)] text-[var(--text-white)] rounded text-sm transition-colors"
       >
         返回 Agent 模式 (Ctrl+Shift+A)
       </button>
diff --git a/packages/desktop/src/prismjs.d.ts b/packages/desktop/src/prismjs.d.ts
new file mode 100644
index 0000000..8ac6740
--- /dev/null
+++ b/packages/desktop/src/prismjs.d.ts
@@ -0,0 +1,7 @@
+declare module 'prismjs' {
+  const Prism: {
+    highlightElement: (element: Element) => void;
+    languages: Record<string, unknown>;
+  };
+  export default Prism;
+}
diff --git a/packages/desktop/src/settings/HooksPanel.tsx b/packages/desktop/src/settings/HooksPanel.tsx
index 894026b..831ce93 100644
--- a/packages/desktop/src/settings/HooksPanel.tsx
+++ b/packages/desktop/src/settings/HooksPanel.tsx
@@ -199,20 +199,20 @@ export default function HooksPanel() {
   };
 
   const inputCls =
-    'w-full bg-[#252525] border border-[#3a3a3a] text-[#ddd] px-3 py-2 rounded text-[13px] focus:outline-none focus:ring-1 focus:ring-[#569cd6]';
-  const labelCls = 'text-[12px] text-[#555] mb-1';
-  const btnPrimary = 'px-4 py-2 rounded text-[13px] bg-[#1a3a5c] text-[#569cd6] hover:bg-[#1a4a6c]';
-  const btnDanger = 'px-4 py-2 rounded text-[13px] bg-[#3a1a1a] text-[#d16969] hover:bg-[#4a1a1a]';
-  const btnCancel = 'px-4 py-2 rounded text-[13px] bg-[#2a2a2a] text-[#888] hover:bg-[#3a3a3a]';
+    'w-full bg-[var(--bg-hover)] border border-[var(--border-hover)] text-[var(--text-title)] px-3 py-2 rounded text-[13px] focus:outline-none focus:ring-1 focus:ring-[var(--accent-primary)]';
+  const labelCls = 'text-[12px] text-[var(--text-placeholder)] mb-1';
+  const btnPrimary = 'px-4 py-2 rounded text-[13px] bg-[var(--btn-primary-bg)] text-[var(--accent-primary)] hover:bg-[var(--btn-primary-hover)]';
+  const btnDanger = 'px-4 py-2 rounded text-[13px] bg-[var(--btn-danger-bg)] text-[var(--accent-danger)] hover:bg-[var(--btn-danger-hover)]';
+  const btnCancel = 'px-4 py-2 rounded text-[13px] bg-[var(--border-card)] text-[var(--text-tertiary)] hover:bg-[var(--border-hover)]';
 
   if (loading) {
-    return <div className="px-6 py-8 text-[14px] text-[#444]">加载中…</div>;
+    return <div className="px-6 py-8 text-[14px] text-[var(--text-disabled)]">加载中…</div>;
   }
 
   return (
     <div className="px-6 py-5">
       <div className="flex items-center gap-2 mb-3">
-        <div className="text-[11px] font-medium text-[#444] uppercase tracking-wider">
+        <div className="text-[11px] font-medium text-[var(--text-disabled)] uppercase tracking-wider">
           用户自定义钩子
         </div>
         <button onClick={startCreate} className={btnPrimary}>
@@ -235,10 +235,10 @@ export default function HooksPanel() {
       )}
 
       {hooks.length === 0 && !isCreating ? (
-        <div className="text-[14px] text-[#444] py-6 text-center leading-loose">
+        <div className="text-[14px] text-[var(--text-disabled)] py-6 text-center leading-loose">
           未找到用户自定义钩子
           <br />
-          <span className="text-[13px] text-[#333]">点击上方按钮添加</span>
+          <span className="text-[13px] text-[var(--text-disabled)]">点击上方按钮添加</span>
         </div>
       ) : (
         <div className="space-y-2 mb-8">
@@ -263,9 +263,9 @@ export default function HooksPanel() {
               return (
                 <div
                   key={h.name}
-                  className="flex items-center justify-between px-4 py-3.5 rounded-xl bg-[#1a1a1a] border border-[#3a1a1a]"
+                  className="flex items-center justify-between px-4 py-3.5 rounded-xl bg-[var(--bg-card)] border border-[var(--btn-danger-bg)]"
                 >
-                  <span className="text-[14px] text-[#d16969]">删除钩子 {h.name}？</span>
+                  <span className="text-[14px] text-[var(--accent-danger)]">删除钩子 {h.name}？</span>
                   <div className="flex gap-2">
                     <button onClick={confirmDelete} className={btnDanger}>
                       确认
@@ -280,39 +280,39 @@ export default function HooksPanel() {
             return (
               <div
                 key={h.name}
-                className="flex items-start gap-3 px-4 py-3 rounded-xl bg-[#1a1a1a] border border-[#2a2a2a] group"
+                className="flex items-start gap-3 px-4 py-3 rounded-xl bg-[var(--bg-card)] border border-[var(--border-card)] group"
               >
                 <div className="flex-1 min-w-0">
                   <div className="flex items-center gap-2 flex-wrap">
-                    <span className="text-[14px] text-[#ddd]">{h.name}</span>
+                    <span className="text-[14px] text-[var(--text-title)]">{h.name}</span>
                     <span
                       className={`text-[11px] px-2 py-0.5 rounded font-mono ${
                         h.type === 'decision'
-                          ? 'bg-[#2a1a10] text-[#ce9178]'
-                          : 'bg-[#1a2a1a] text-[#6a9955]'
+                          ? 'bg-[var(--tag-decision-bg)] text-[var(--tag-decision-text)]'
+                          : 'bg-[var(--tag-action-bg)] text-[var(--tag-action-text)]'
                       }`}
                     >
                       {h.type}
                     </span>
-                    <span className="text-[11px] px-2 py-0.5 rounded font-mono bg-[#1a1a3a] text-[#569cd6]">
+                    <span className="text-[11px] px-2 py-0.5 rounded font-mono bg-[var(--tag-info-bg)] text-[var(--tag-info-text)]">
                       {h.point}
                     </span>
                     {!h.enabled && (
-                      <span className="text-[11px] px-2 py-0.5 rounded font-mono bg-[#2a2a2a] text-[#555]">
+                      <span className="text-[11px] px-2 py-0.5 rounded font-mono bg-[var(--border-card)] text-[var(--text-placeholder)]">
                         已禁用
                       </span>
                     )}
                   </div>
                   {h.description && (
-                    <div className="text-[12px] text-[#555] mt-1">{h.description}</div>
+                    <div className="text-[12px] text-[var(--text-placeholder)] mt-1">{h.description}</div>
                   )}
-                  <div className="text-[12px] text-[#444] mt-1 font-mono">{h.command}</div>
+                  <div className="text-[12px] text-[var(--text-disabled)] mt-1 font-mono">{h.command}</div>
                 </div>
                 <div className="flex items-center gap-2 shrink-0">
                   <button
                     title="编辑"
                     onClick={() => startEdit(h)}
-                    className="text-[#444] hover:text-[#888] transition-colors"
+                    className="text-[var(--text-disabled)] hover:text-[var(--text-tertiary)] transition-colors"
                   >
                     <svg
                       width="14"
@@ -328,7 +328,7 @@ export default function HooksPanel() {
                   <button
                     title="删除"
                     onClick={() => setDeletingName(h.name)}
-                    className="text-[#444] hover:text-[#d16969] transition-colors"
+                    className="text-[var(--text-disabled)] hover:text-[var(--accent-danger)] transition-colors"
                   >
                     <svg
                       width="14"
@@ -359,31 +359,31 @@ export default function HooksPanel() {
         </div>
       )}
 
-      <div className="text-[11px] font-medium text-[#444] uppercase tracking-wider mb-3 px-1">
+      <div className="text-[11px] font-medium text-[var(--text-disabled)] uppercase tracking-wider mb-3 px-1">
         可用挂载点 (18 个内置)
       </div>
 
       <div className="space-y-6">
         {HOOK_GROUPS.map((group) => (
           <div key={group.label}>
-            <div className="text-[11px] font-medium text-[#444] uppercase tracking-wider mb-2 px-1">
+            <div className="text-[11px] font-medium text-[var(--text-disabled)] uppercase tracking-wider mb-2 px-1">
               {group.label}
             </div>
             <div className="space-y-1">
               {group.points.map((point) => (
                 <div
                   key={point.name}
-                  className="flex items-center gap-3 px-4 py-3 rounded-xl bg-[#1a1a1a] border border-[#222]"
+                  className="flex items-center gap-3 px-4 py-3 rounded-xl bg-[var(--bg-card)] border border-[var(--border-default)]"
                 >
                   <div className="flex-1 min-w-0">
-                    <span className="text-[13px] font-mono text-[#ddd]">{point.name}</span>
-                    <div className="text-[12px] text-[#555] mt-0.5">{point.description}</div>
+                    <span className="text-[13px] font-mono text-[var(--text-title)]">{point.name}</span>
+                    <div className="text-[12px] text-[var(--text-placeholder)] mt-0.5">{point.description}</div>
                   </div>
                   <span
                     className={`text-[11px] px-2 py-0.5 rounded font-mono shrink-0 ${
                       point.type === 'decision'
-                        ? 'bg-[#2a1a10] text-[#ce9178]'
-                        : 'bg-[#1a2a1a] text-[#6a9955]'
+                        ? 'bg-[var(--tag-decision-bg)] text-[var(--tag-decision-text)]'
+                        : 'bg-[var(--tag-action-bg)] text-[var(--tag-action-text)]'
                     }`}
                   >
                     {point.type}
@@ -420,7 +420,7 @@ function FormCard({
   btnCancel: string;
 }) {
   return (
-    <div className="px-4 py-3.5 rounded-xl bg-[#1a1a1a] border border-[#569cd6]/30 space-y-3 mb-2">
+    <div className="px-4 py-3.5 rounded-xl bg-[var(--bg-card)] border border-[var(--accent-primary)]/30 space-y-3 mb-2">
       <div>
         <div className={labelCls}>名称</div>
         <input
@@ -462,8 +462,8 @@ function FormCard({
               onClick={() => setForm({ ...form, type: 'observer' })}
               className={`px-3 py-1.5 rounded text-[13px] font-mono transition-colors ${
                 form.type === 'observer'
-                  ? 'bg-[#1a3a5c] text-[#569cd6]'
-                  : 'bg-[#2a2a2a] text-[#888]'
+                  ? 'bg-[var(--btn-primary-bg)] text-[var(--accent-primary)]'
+                  : 'bg-[var(--border-card)] text-[var(--text-tertiary)]'
               }`}
             >
               observer
@@ -472,8 +472,8 @@ function FormCard({
               onClick={() => setForm({ ...form, type: 'decision' })}
               className={`px-3 py-1.5 rounded text-[13px] font-mono transition-colors ${
                 form.type === 'decision'
-                  ? 'bg-[#1a3a5c] text-[#569cd6]'
-                  : 'bg-[#2a2a2a] text-[#888]'
+                  ? 'bg-[var(--btn-primary-bg)] text-[var(--accent-primary)]'
+                  : 'bg-[var(--border-card)] text-[var(--text-tertiary)]'
               }`}
             >
               decision
@@ -520,12 +520,12 @@ function FormCard({
           />
         </div>
         <div className="pb-1">
-          <label className="flex items-center gap-2 text-[13px] text-[#888] cursor-pointer">
+          <label className="flex items-center gap-2 text-[13px] text-[var(--text-tertiary)] cursor-pointer">
             <input
               type="checkbox"
               checked={form.enabled}
               onChange={(e) => setForm({ ...form, enabled: e.target.checked })}
-              className="accent-[#569cd6]"
+              className="accent-[var(--accent-primary)]"
             />
             启用
           </label>
diff --git a/packages/desktop/src/settings/McpPanel.tsx b/packages/desktop/src/settings/McpPanel.tsx
index 78c50df..b02f36f 100644
--- a/packages/desktop/src/settings/McpPanel.tsx
+++ b/packages/desktop/src/settings/McpPanel.tsx
@@ -186,14 +186,14 @@ export default function McpPanel() {
   };
 
   const inputCls =
-    'w-full bg-[#252525] border border-[#3a3a3a] text-[#ddd] px-3 py-2 rounded text-[13px] focus:outline-none focus:ring-1 focus:ring-[#569cd6]';
-  const labelCls = 'text-[12px] text-[#555] mb-1';
-  const btnPrimary = 'px-4 py-2 rounded text-[13px] bg-[#1a3a5c] text-[#569cd6] hover:bg-[#1a4a6c]';
-  const btnDanger = 'px-4 py-2 rounded text-[13px] bg-[#3a1a1a] text-[#d16969] hover:bg-[#4a1a1a]';
-  const btnCancel = 'px-4 py-2 rounded text-[13px] bg-[#2a2a2a] text-[#888] hover:bg-[#3a3a3a]';
+    'w-full bg-[var(--bg-hover)] border border-[var(--border-hover)] text-[var(--text-title)] px-3 py-2 rounded text-[13px] focus:outline-none focus:ring-1 focus:ring-[var(--accent-primary)]';
+  const labelCls = 'text-[12px] text-[var(--text-placeholder)] mb-1';
+  const btnPrimary = 'px-4 py-2 rounded text-[13px] bg-[var(--btn-primary-bg)] text-[var(--accent-primary)] hover:bg-[var(--btn-primary-hover)]';
+  const btnDanger = 'px-4 py-2 rounded text-[13px] bg-[var(--btn-danger-bg)] text-[var(--accent-danger)] hover:bg-[var(--btn-danger-hover)]';
+  const btnCancel = 'px-4 py-2 rounded text-[13px] bg-[var(--border-card)] text-[var(--text-tertiary)] hover:bg-[var(--border-hover)]';
 
   if (loading) {
-    return <div className="px-6 py-8 text-[14px] text-[#444]">加载中…</div>;
+    return <div className="px-6 py-8 text-[14px] text-[var(--text-disabled)]">加载中…</div>;
   }
 
   return (
@@ -218,10 +218,10 @@ export default function McpPanel() {
       )}
 
       {servers.length === 0 && !isCreating ? (
-        <div className="text-[14px] text-[#444] py-8 text-center leading-loose">
+        <div className="text-[14px] text-[var(--text-disabled)] py-8 text-center leading-loose">
           未找到 MCP 服务器配置
           <br />
-          <span className="text-[13px] text-[#333]">点击上方按钮添加服务器</span>
+          <span className="text-[13px] text-[var(--text-disabled)]">点击上方按钮添加服务器</span>
         </div>
       ) : (
         <div className="space-y-3">
@@ -245,9 +245,9 @@ export default function McpPanel() {
               return (
                 <div
                   key={s.name}
-                  className="flex items-center justify-between px-4 py-3.5 rounded-xl bg-[#1a1a1a] border border-[#3a1a1a]"
+                  className="flex items-center justify-between px-4 py-3.5 rounded-xl bg-[var(--bg-card)] border border-[var(--btn-danger-bg)]"
                 >
-                  <span className="text-[14px] text-[#d16969]">删除服务器 {s.name}？</span>
+                  <span className="text-[14px] text-[var(--accent-danger)]">删除服务器 {s.name}？</span>
                   <div className="flex gap-2">
                     <button onClick={confirmDelete} className={btnDanger}>
                       确认
@@ -262,27 +262,27 @@ export default function McpPanel() {
             return (
               <div
                 key={s.name}
-                className="flex items-center gap-4 px-4 py-3.5 rounded-xl bg-[#1a1a1a] border border-[#2a2a2a] group"
+                className="flex items-center gap-4 px-4 py-3.5 rounded-xl bg-[var(--bg-card)] border border-[var(--border-card)] group"
               >
                 <div className="flex-1 min-w-0">
                   <div className="flex items-center gap-2.5">
-                    <span className="text-[15px] text-[#ddd] truncate">{s.name}</span>
+                    <span className="text-[15px] text-[var(--text-title)] truncate">{s.name}</span>
                     <span
                       className={`text-[11px] px-2 py-0.5 rounded font-mono ${
                         s.transport === 'http'
-                          ? 'bg-[#1a3a5c] text-[#569cd6]'
-                          : 'bg-[#2a1a2a] text-[#c586c0]'
+                          ? 'bg-[var(--btn-primary-bg)] text-[var(--accent-primary)]'
+                          : 'bg-[var(--tag-mcp-bg)] text-[var(--tag-mcp-text)]'
                       }`}
                     >
                       {s.transport}
                     </span>
                   </div>
-                  <div className="text-[13px] text-[#444] mt-1 font-mono">{s.toolCount} 个工具</div>
+                  <div className="text-[13px] text-[var(--text-disabled)] mt-1 font-mono">{s.toolCount} 个工具</div>
                 </div>
                 <button
                   title="编辑"
                   onClick={() => startEdit(s)}
-                  className="text-[#444] hover:text-[#888] transition-colors shrink-0"
+                  className="text-[var(--text-disabled)] hover:text-[var(--text-tertiary)] transition-colors shrink-0"
                 >
                   <svg
                     width="14"
@@ -298,7 +298,7 @@ export default function McpPanel() {
                 <button
                   title="删除"
                   onClick={() => setDeletingName(s.name)}
-                  className="text-[#444] hover:text-[#d16969] transition-colors shrink-0"
+                  className="text-[var(--text-disabled)] hover:text-[var(--accent-danger)] transition-colors shrink-0"
                 >
                   <svg
                     width="14"
@@ -341,7 +341,7 @@ function FormCard({
   btnCancel: string;
 }) {
   return (
-    <div className="px-4 py-3.5 rounded-xl bg-[#1a1a1a] border border-[#569cd6]/30 space-y-3">
+    <div className="px-4 py-3.5 rounded-xl bg-[var(--bg-card)] border border-[var(--accent-primary)]/30 space-y-3">
       <div>
         <div className={labelCls}>名称</div>
         <input
@@ -358,8 +358,8 @@ function FormCard({
             onClick={() => setForm({ ...form, transport: 'stdio' })}
             className={`px-3 py-1.5 rounded text-[13px] font-mono transition-colors ${
               form.transport === 'stdio'
-                ? 'bg-[#1a3a5c] text-[#569cd6]'
-                : 'bg-[#2a2a2a] text-[#888]'
+                ? 'bg-[var(--btn-primary-bg)] text-[var(--accent-primary)]'
+                : 'bg-[var(--border-card)] text-[var(--text-tertiary)]'
             }`}
           >
             stdio
@@ -367,7 +367,7 @@ function FormCard({
           <button
             onClick={() => setForm({ ...form, transport: 'http' })}
             className={`px-3 py-1.5 rounded text-[13px] font-mono transition-colors ${
-              form.transport === 'http' ? 'bg-[#1a3a5c] text-[#569cd6]' : 'bg-[#2a2a2a] text-[#888]'
+              form.transport === 'http' ? 'bg-[var(--btn-primary-bg)] text-[var(--accent-primary)]' : 'bg-[var(--border-card)] text-[var(--text-tertiary)]'
             }`}
           >
             http
@@ -439,12 +439,12 @@ function FormCard({
           />
         </div>
         <div className="flex items-end pb-1">
-          <label className="flex items-center gap-2 text-[13px] text-[#888] cursor-pointer">
+          <label className="flex items-center gap-2 text-[13px] text-[var(--text-tertiary)] cursor-pointer">
             <input
               type="checkbox"
               checked={form.autoReconnect}
               onChange={(e) => setForm({ ...form, autoReconnect: e.target.checked })}
-              className="accent-[#569cd6]"
+              className="accent-[var(--accent-primary)]"
             />
             自动重连
           </label>
diff --git a/packages/desktop/src/settings/MemoryPanel.tsx b/packages/desktop/src/settings/MemoryPanel.tsx
index ab97b50..4d97fca 100644
--- a/packages/desktop/src/settings/MemoryPanel.tsx
+++ b/packages/desktop/src/settings/MemoryPanel.tsx
@@ -110,28 +110,28 @@ export default function MemoryPanel() {
   };
 
   const inputCls =
-    'w-full bg-[#252525] border border-[#3a3a3a] text-[#ddd] px-3 py-2 rounded text-[13px] focus:outline-none focus:ring-1 focus:ring-[#569cd6]';
-  const labelCls = 'text-[12px] text-[#555] mb-1';
-  const btnPrimary = 'px-4 py-2 rounded text-[13px] bg-[#1a3a5c] text-[#569cd6] hover:bg-[#1a4a6c]';
-  const btnDanger = 'px-4 py-2 rounded text-[13px] bg-[#3a1a1a] text-[#d16969] hover:bg-[#4a1a1a]';
-  const btnCancel = 'px-4 py-2 rounded text-[13px] bg-[#2a2a2a] text-[#888] hover:bg-[#3a3a3a]';
+    'w-full bg-[var(--bg-hover)] border border-[var(--border-hover)] text-[var(--text-title)] px-3 py-2 rounded text-[13px] focus:outline-none focus:ring-1 focus:ring-[var(--accent-primary)]';
+  const labelCls = 'text-[12px] text-[var(--text-placeholder)] mb-1';
+  const btnPrimary = 'px-4 py-2 rounded text-[13px] bg-[var(--btn-primary-bg)] text-[var(--accent-primary)] hover:bg-[var(--btn-primary-hover)]';
+  const btnDanger = 'px-4 py-2 rounded text-[13px] bg-[var(--btn-danger-bg)] text-[var(--accent-danger)] hover:bg-[var(--btn-danger-hover)]';
+  const btnCancel = 'px-4 py-2 rounded text-[13px] bg-[var(--border-card)] text-[var(--text-tertiary)] hover:bg-[var(--border-hover)]';
 
   if (loading) {
-    return <div className="px-6 py-8 text-[14px] text-[#444]">加载中…</div>;
+    return <div className="px-6 py-8 text-[14px] text-[var(--text-disabled)]">加载中…</div>;
   }
 
   return (
     <div className="px-6 py-5">
-      <div className="flex items-center justify-between px-4 py-3.5 rounded-xl bg-[#1a1a1a] border border-[#2a2a2a] mb-5">
+      <div className="flex items-center justify-between px-4 py-3.5 rounded-xl bg-[var(--bg-card)] border border-[var(--border-card)] mb-5">
         <div>
-          <div className="text-[14px] text-[#ddd]">记忆模式</div>
-          <div className="text-[12px] text-[#555] mt-0.5">启用后自动从会话中提取长期记忆</div>
+          <div className="text-[14px] text-[var(--text-title)]">记忆模式</div>
+          <div className="text-[12px] text-[var(--text-placeholder)] mt-0.5">启用后自动从会话中提取长期记忆</div>
         </div>
         <Toggle checked={config.enabled} onChange={toggleEnabled} />
       </div>
 
       <div className="flex items-center gap-2 mb-3">
-        <div className="text-[11px] font-medium text-[#444] uppercase tracking-wider">记忆类型</div>
+        <div className="text-[11px] font-medium text-[var(--text-disabled)] uppercase tracking-wider">记忆类型</div>
         {config.enabled && (
           <button onClick={startCreate} className={btnPrimary}>
             + 添加类型
@@ -140,7 +140,7 @@ export default function MemoryPanel() {
       </div>
 
       {isCreating && (
-        <div className="px-4 py-3.5 rounded-xl bg-[#1a1a1a] border border-[#569cd6]/30 space-y-3 mb-2">
+        <div className="px-4 py-3.5 rounded-xl bg-[var(--bg-card)] border border-[var(--accent-primary)]/30 space-y-3 mb-2">
           <div>
             <div className={labelCls}>名称</div>
             <input
@@ -171,16 +171,16 @@ export default function MemoryPanel() {
       )}
 
       {!config.enabled ? (
-        <div className="text-[14px] text-[#444] py-8 text-center leading-loose">
+        <div className="text-[14px] text-[var(--text-disabled)] py-8 text-center leading-loose">
           记忆模式已关闭
           <br />
-          <span className="text-[13px] text-[#333]">启用后可配置记忆类型</span>
+          <span className="text-[13px] text-[var(--text-disabled)]">启用后可配置记忆类型</span>
         </div>
       ) : config.types.length === 0 && !isCreating ? (
-        <div className="text-[14px] text-[#444] py-8 text-center leading-loose">
+        <div className="text-[14px] text-[var(--text-disabled)] py-8 text-center leading-loose">
           未配置记忆类型
           <br />
-          <span className="text-[13px] text-[#333]">点击上方按钮添加自定义类型</span>
+          <span className="text-[13px] text-[var(--text-disabled)]">点击上方按钮添加自定义类型</span>
         </div>
       ) : (
         <div className="space-y-2">
@@ -189,7 +189,7 @@ export default function MemoryPanel() {
               return (
                 <div
                   key={t.name}
-                  className="px-4 py-3.5 rounded-xl bg-[#1a1a1a] border border-[#569cd6]/30 space-y-3 mb-2"
+                  className="px-4 py-3.5 rounded-xl bg-[var(--bg-card)] border border-[var(--accent-primary)]/30 space-y-3 mb-2"
                 >
                   <div>
                     <div className={labelCls}>名称</div>
@@ -224,9 +224,9 @@ export default function MemoryPanel() {
               return (
                 <div
                   key={t.name}
-                  className="flex items-center justify-between px-4 py-3.5 rounded-xl bg-[#1a1a1a] border border-[#3a1a1a]"
+                  className="flex items-center justify-between px-4 py-3.5 rounded-xl bg-[var(--bg-card)] border border-[var(--btn-danger-bg)]"
                 >
-                  <span className="text-[14px] text-[#d16969]">删除类型 {t.name}？</span>
+                  <span className="text-[14px] text-[var(--accent-danger)]">删除类型 {t.name}？</span>
                   <div className="flex gap-2">
                     <button onClick={confirmDelete} className={btnDanger}>
                       确认
@@ -241,24 +241,24 @@ export default function MemoryPanel() {
             return (
               <div
                 key={t.name}
-                className="px-4 py-3.5 rounded-xl bg-[#1a1a1a] border border-[#2a2a2a] group"
+                className="px-4 py-3.5 rounded-xl bg-[var(--bg-card)] border border-[var(--border-card)] group"
               >
                 <div className="flex items-center gap-3">
                   <div className="flex-1 min-w-0">
                     <div className="flex items-center gap-2 flex-wrap">
-                      <span className="text-[14px] text-[#ddd]">{t.name}</span>
+                      <span className="text-[14px] text-[var(--text-title)]">{t.name}</span>
                       {t.isBuiltIn && (
-                        <span className="text-[11px] px-2 py-0.5 rounded font-mono bg-[#2a2a2a] text-[#555]">
+                        <span className="text-[11px] px-2 py-0.5 rounded font-mono bg-[var(--border-card)] text-[var(--text-placeholder)]">
                           内置
                         </span>
                       )}
                       {!t.isBuiltIn && (
-                        <span className="text-[11px] px-2 py-0.5 rounded font-mono bg-[#1a2a1a] text-[#6a9955]">
+                        <span className="text-[11px] px-2 py-0.5 rounded font-mono bg-[var(--tag-action-bg)] text-[var(--tag-action-text)]">
                           自定义
                         </span>
                       )}
                     </div>
-                    <div className="text-[12px] text-[#555] mt-1">{t.description}</div>
+                    <div className="text-[12px] text-[var(--text-placeholder)] mt-1">{t.description}</div>
                   </div>
                   <div className="flex items-center gap-2 shrink-0">
                     {!t.isBuiltIn && (
@@ -266,7 +266,7 @@ export default function MemoryPanel() {
                         <button
                           title="编辑"
                           onClick={() => startEdit(t)}
-                          className="text-[#444] hover:text-[#888] transition-colors"
+                          className="text-[var(--text-disabled)] hover:text-[var(--text-tertiary)] transition-colors"
                         >
                           <svg
                             width="14"
@@ -282,7 +282,7 @@ export default function MemoryPanel() {
                         <button
                           title="删除"
                           onClick={() => setDeletingName(t.name)}
-                          className="text-[#444] hover:text-[#d16969] transition-colors"
+                          className="text-[var(--text-disabled)] hover:text-[var(--accent-danger)] transition-colors"
                         >
                           <svg
                             width="14"
diff --git a/packages/desktop/src/settings/SettingsPage.tsx b/packages/desktop/src/settings/SettingsPage.tsx
index 0dc7abd..5f08f30 100644
--- a/packages/desktop/src/settings/SettingsPage.tsx
+++ b/packages/desktop/src/settings/SettingsPage.tsx
@@ -1,5 +1,5 @@
 import { useState } from 'react';
-import { ArrowLeft, Server, Star, Link2, Users, Brain } from 'lucide-react';
+import { ArrowLeft, Server, Star, Link2, Users, Brain, Moon, Sun, BookOpen } from 'lucide-react';
 import { useGlobalStore } from '../stores/global.store';
 import McpPanel from './McpPanel';
 import SkillPanel from './SkillPanel';
@@ -37,28 +37,36 @@ const NAV_ITEMS: { id: Section; label: string; icon: React.ReactNode }[] = [
   },
 ];
 
+const THEMES = [
+  { id: 'dark' as const, label: '深色', icon: <Moon size={16} strokeWidth={1.5} /> },
+  { id: 'light' as const, label: '浅色', icon: <Sun size={16} strokeWidth={1.5} /> },
+  { id: 'paper' as const, label: '纸黄', icon: <BookOpen size={16} strokeWidth={1.5} /> },
+];
+
 export default function SettingsPage() {
   const setView = useGlobalStore((s) => s.setView);
   const [section, setSection] = useState<Section>('mcp');
+  const theme = useGlobalStore((s) => s.ui.theme);
+  const setTheme = useGlobalStore((s) => s.setTheme);
 
   return (
-    <div className="flex flex-col flex-1 min-h-0 bg-[#111] text-[#ccc] pl-3">
+    <div className="flex flex-col flex-1 min-h-0 bg-[var(--bg-panel)] text-[var(--text-primary)] pl-3">
       {/* Header */}
-      <div className="flex items-center gap-4 px-6 py-4 border-b border-[#222] shrink-0">
+      <div className="flex items-center gap-4 px-6 py-4 border-b border-[var(--border-default)] shrink-0">
         <button
           type="button"
           onClick={() => setView('agent')}
-          className="text-[#555] hover:text-[#ccc] transition-colors"
+          className="text-[var(--text-placeholder)] hover:text-[var(--text-primary)] transition-colors"
         >
           <ArrowLeft size={20} strokeWidth={1.5} />
         </button>
-        <span className="text-[16px] font-medium text-[#ddd]">设置</span>
+        <span className="text-[16px] font-medium text-[var(--text-title)]">设置</span>
       </div>
 
       {/* Body: sidebar + content */}
       <div className="flex flex-1 min-h-0">
         {/* Left sidebar */}
-        <nav className="w-[160px] shrink-0 border-r border-[#222] py-3 flex flex-col gap-0.5 overflow-y-auto select-none">
+        <nav className="w-[160px] shrink-0 border-r border-[var(--border-default)] py-3 flex flex-col gap-0.5 overflow-y-auto select-none">
           {NAV_ITEMS.map((item) => (
             <button
               key={item.id}
@@ -66,16 +74,40 @@ export default function SettingsPage() {
               onClick={() => setSection(item.id)}
               className={`flex items-center gap-3 px-4 py-2.5 text-[13px] transition-colors w-full text-left rounded-none ${
                 section === item.id
-                  ? 'bg-[#1e1e1e] text-[#ddd]'
-                  : 'text-[#666] hover:text-[#aaa] hover:bg-[#161616]'
+                  ? 'bg-[var(--bg-base)] text-[var(--text-title)]'
+                  : 'text-[var(--text-muted)] hover:text-[var(--text-secondary)] hover:bg-[var(--bg-sidebar)]'
               }`}
             >
-              <span className={section === item.id ? 'text-[#569cd6]' : 'text-[#555]'}>
+              <span className={section === item.id ? 'text-[var(--accent-primary)]' : 'text-[var(--text-placeholder)]'}>
                 {item.icon}
               </span>
               {item.label}
             </button>
           ))}
+
+          {/* Theme Switcher */}
+          <div className="mt-auto pt-4 pb-2 px-4 border-t border-[var(--border-default)]">
+            <div className="text-[11px] font-medium text-[var(--text-disabled)] uppercase tracking-wider mb-2">
+              主题
+            </div>
+            <div className="flex flex-col gap-0.5">
+              {THEMES.map((t) => (
+                <button
+                  key={t.id}
+                  type="button"
+                  onClick={() => setTheme(t.id)}
+                  className={`flex items-center gap-2 px-3 py-2 text-[12px] rounded transition-colors ${
+                    theme === t.id
+                      ? 'bg-[var(--bg-selected)] text-[var(--accent-primary)]'
+                      : 'text-[var(--text-muted)] hover:text-[var(--text-secondary)] hover:bg-[var(--bg-hover)]'
+                  }`}
+                >
+                  {t.icon}
+                  {t.label}
+                </button>
+              ))}
+            </div>
+          </div>
         </nav>
 
         {/* Content area */}
diff --git a/packages/desktop/src/settings/SkillPanel.tsx b/packages/desktop/src/settings/SkillPanel.tsx
index 35a5a2a..58a8422 100644
--- a/packages/desktop/src/settings/SkillPanel.tsx
+++ b/packages/desktop/src/settings/SkillPanel.tsx
@@ -34,16 +34,16 @@ export default function SkillPanel() {
   };
 
   if (loading) {
-    return <div className="px-6 py-8 text-[14px] text-[#444]">加载中…</div>;
+    return <div className="px-6 py-8 text-[14px] text-[var(--text-disabled)]">加载中…</div>;
   }
 
   return (
     <div className="px-6 py-5">
       {skills.length === 0 ? (
-        <div className="text-[14px] text-[#444] py-8 text-center leading-loose">
+        <div className="text-[14px] text-[var(--text-disabled)] py-8 text-center leading-loose">
           未找到 Skill
           <br />
-          <span className="text-[13px] text-[#333]">
+          <span className="text-[13px] text-[var(--text-disabled)]">
             在 .codingcode/skills/ 目录下创建 skill 文件夹以添加
           </span>
         </div>
@@ -52,12 +52,12 @@ export default function SkillPanel() {
           {skills.map((s) => (
             <div
               key={s.name}
-              className="flex items-center gap-4 px-4 py-3.5 rounded-xl bg-[#1a1a1a] border border-[#2a2a2a]"
+              className="flex items-center gap-4 px-4 py-3.5 rounded-xl bg-[var(--bg-card)] border border-[var(--border-card)]"
             >
               <div className="flex-1 min-w-0">
-                <span className="text-[15px] text-[#ddd] truncate block">{s.name}</span>
+                <span className="text-[15px] text-[var(--text-title)] truncate block">{s.name}</span>
                 {s.description && (
-                  <div className="text-[13px] text-[#555] mt-1 truncate">{s.description}</div>
+                  <div className="text-[13px] text-[var(--text-placeholder)] mt-1 truncate">{s.description}</div>
                 )}
               </div>
               <Toggle checked={!s.disabled} onChange={(v) => toggle(s.name, !v)} />
diff --git a/packages/desktop/src/settings/SubagentsPanel.tsx b/packages/desktop/src/settings/SubagentsPanel.tsx
index 4108487..1445d1b 100644
--- a/packages/desktop/src/settings/SubagentsPanel.tsx
+++ b/packages/desktop/src/settings/SubagentsPanel.tsx
@@ -174,28 +174,28 @@ export default function SubagentsPanel() {
   };
 
   const inputCls =
-    'w-full bg-[#252525] border border-[#3a3a3a] text-[#ddd] px-3 py-2 rounded text-[13px] focus:outline-none focus:ring-1 focus:ring-[#569cd6]';
-  const labelCls = 'text-[12px] text-[#555] mb-1';
-  const btnPrimary = 'px-4 py-2 rounded text-[13px] bg-[#1a3a5c] text-[#569cd6] hover:bg-[#1a4a6c]';
-  const btnDanger = 'px-4 py-2 rounded text-[13px] bg-[#3a1a1a] text-[#d16969] hover:bg-[#4a1a1a]';
-  const btnCancel = 'px-4 py-2 rounded text-[13px] bg-[#2a2a2a] text-[#888] hover:bg-[#3a3a3a]';
+    'w-full bg-[var(--bg-hover)] border border-[var(--border-hover)] text-[var(--text-title)] px-3 py-2 rounded text-[13px] focus:outline-none focus:ring-1 focus:ring-[var(--accent-primary)]';
+  const labelCls = 'text-[12px] text-[var(--text-placeholder)] mb-1';
+  const btnPrimary = 'px-4 py-2 rounded text-[13px] bg-[var(--btn-primary-bg)] text-[var(--accent-primary)] hover:bg-[var(--btn-primary-hover)]';
+  const btnDanger = 'px-4 py-2 rounded text-[13px] bg-[var(--btn-danger-bg)] text-[var(--accent-danger)] hover:bg-[var(--btn-danger-hover)]';
+  const btnCancel = 'px-4 py-2 rounded text-[13px] bg-[var(--border-card)] text-[var(--text-tertiary)] hover:bg-[var(--border-hover)]';
 
   if (loading) {
-    return <div className="px-6 py-8 text-[14px] text-[#444]">加载中…</div>;
+    return <div className="px-6 py-8 text-[14px] text-[var(--text-disabled)]">加载中…</div>;
   }
 
   return (
     <div className="px-6 py-5">
-      <div className="flex items-center justify-between px-4 py-3.5 rounded-xl bg-[#1a1a1a] border border-[#2a2a2a] mb-5">
+      <div className="flex items-center justify-between px-4 py-3.5 rounded-xl bg-[var(--bg-card)] border border-[var(--border-card)] mb-5">
         <div>
-          <div className="text-[14px] text-[#ddd]">启用子智能体</div>
-          <div className="text-[12px] text-[#555] mt-0.5">允许 agent 派发子任务给子智能体</div>
+          <div className="text-[14px] text-[var(--text-title)]">启用子智能体</div>
+          <div className="text-[12px] text-[var(--text-placeholder)] mt-0.5">允许 agent 派发子任务给子智能体</div>
         </div>
         <Toggle checked={enabled} onChange={toggleEnabled} />
       </div>
 
       <div className="flex items-center gap-2 mb-3">
-        <div className="text-[11px] font-medium text-[#444] uppercase tracking-wider">
+        <div className="text-[11px] font-medium text-[var(--text-disabled)] uppercase tracking-wider">
           已注册的子智能体
         </div>
         <button onClick={startCreate} className={btnPrimary}>
@@ -219,10 +219,10 @@ export default function SubagentsPanel() {
       )}
 
       {agents.length === 0 && !isCreating ? (
-        <div className="text-[14px] text-[#444] py-8 text-center leading-loose">
+        <div className="text-[14px] text-[var(--text-disabled)] py-8 text-center leading-loose">
           未找到子智能体配置
           <br />
-          <span className="text-[13px] text-[#333]">点击上方按钮添加</span>
+          <span className="text-[13px] text-[var(--text-disabled)]">点击上方按钮添加</span>
         </div>
       ) : (
         <div className="space-y-2">
@@ -248,9 +248,9 @@ export default function SubagentsPanel() {
               return (
                 <div
                   key={a.name}
-                  className="flex items-center justify-between px-4 py-3.5 rounded-xl bg-[#1a1a1a] border border-[#3a1a1a]"
+                  className="flex items-center justify-between px-4 py-3.5 rounded-xl bg-[var(--bg-card)] border border-[var(--btn-danger-bg)]"
                 >
-                  <span className="text-[14px] text-[#d16969]">删除智能体 {a.name}？</span>
+                  <span className="text-[14px] text-[var(--accent-danger)]">删除智能体 {a.name}？</span>
                   <div className="flex gap-2">
                     <button onClick={confirmDelete} className={btnDanger}>
                       确认
@@ -266,35 +266,35 @@ export default function SubagentsPanel() {
             return (
               <div
                 key={a.name}
-                className="px-4 py-3.5 rounded-xl bg-[#1a1a1a] border border-[#2a2a2a] group"
+                className="px-4 py-3.5 rounded-xl bg-[var(--bg-card)] border border-[var(--border-card)] group"
               >
                 <div className="flex items-start gap-3">
                   <div className="flex-1 min-w-0">
                     <div className="flex items-center gap-2 flex-wrap">
-                      <span className="text-[14px] text-[#ddd]">{a.name}</span>
+                      <span className="text-[14px] text-[var(--text-title)]">{a.name}</span>
                       {a.readonly && (
-                        <span className="text-[11px] px-2 py-0.5 rounded font-mono bg-[#1a2a1a] text-[#6a9955]">
+                        <span className="text-[11px] px-2 py-0.5 rounded font-mono bg-[var(--tag-action-bg)] text-[var(--tag-action-text)]">
                           只读
                         </span>
                       )}
                       {a.model && (
-                        <span className="text-[11px] px-2 py-0.5 rounded font-mono bg-[#1a1a3a] text-[#569cd6]">
+                        <span className="text-[11px] px-2 py-0.5 rounded font-mono bg-[var(--tag-info-bg)] text-[var(--tag-info-text)]">
                           {a.model}
                         </span>
                       )}
                       {isBuiltIn && (
-                        <span className="text-[11px] px-2 py-0.5 rounded font-mono bg-[#2a2a2a] text-[#555]">
+                        <span className="text-[11px] px-2 py-0.5 rounded font-mono bg-[var(--border-card)] text-[var(--text-placeholder)]">
                           内置
                         </span>
                       )}
                     </div>
-                    <div className="text-[12px] text-[#555] mt-1">{a.description}</div>
+                    <div className="text-[12px] text-[var(--text-placeholder)] mt-1">{a.description}</div>
                     {a.tools && a.tools.length > 0 && (
                       <div className="flex flex-wrap gap-1 mt-2">
                         {a.tools.map((t) => (
                           <span
                             key={t}
-                            className="text-[11px] px-1.5 py-0.5 rounded bg-[#222] text-[#666] font-mono"
+                            className="text-[11px] px-1.5 py-0.5 rounded bg-[var(--border-default)] text-[var(--text-muted)] font-mono"
                           >
                             {t}
                           </span>
@@ -306,7 +306,7 @@ export default function SubagentsPanel() {
                         {a.mcpServers.map((s) => (
                           <span
                             key={s}
-                            className="text-[11px] px-1.5 py-0.5 rounded bg-[#1a2a1a] text-[#4ec9b0] font-mono"
+                            className="text-[11px] px-1.5 py-0.5 rounded bg-[var(--tag-action-bg)] text-[var(--accent-success)] font-mono"
                           >
                             {s}
                           </span>
@@ -320,7 +320,7 @@ export default function SubagentsPanel() {
                         <button
                           title="编辑"
                           onClick={() => startEdit(a)}
-                          className="text-[#444] hover:text-[#888] transition-colors"
+                          className="text-[var(--text-disabled)] hover:text-[var(--text-tertiary)] transition-colors"
                         >
                           <svg
                             width="14"
@@ -336,7 +336,7 @@ export default function SubagentsPanel() {
                         <button
                           title="删除"
                           onClick={() => setDeletingName(a.name)}
-                          className="text-[#444] hover:text-[#d16969] transition-colors"
+                          className="text-[var(--text-disabled)] hover:text-[var(--accent-danger)] transition-colors"
                         >
                           <svg
                             width="14"
@@ -353,7 +353,7 @@ export default function SubagentsPanel() {
                     )}
                     <Toggle checked={!a.disabled} onChange={(v) => toggleAgent(a.name, !v)} />
                     {a.maxSteps !== undefined && (
-                      <span className="text-[11px] text-[#444]">{a.maxSteps} 步</span>
+                      <span className="text-[11px] text-[var(--text-disabled)]">{a.maxSteps} 步</span>
                     )}
                   </div>
                 </div>
@@ -398,7 +398,7 @@ function ToolMultiSelect({
         onClick={() => setOpen((v) => !v)}
         className={`${inputCls} flex items-center justify-between text-left`}
       >
-        <span className={selected.length === 0 ? 'text-[#555]' : ''}>
+        <span className={selected.length === 0 ? 'text-[var(--text-placeholder)]' : ''}>
           {selected.length === 0 ? '未指定（全部工具）' : selected.join(', ')}
         </span>
         <svg
@@ -414,17 +414,17 @@ function ToolMultiSelect({
         </svg>
       </button>
       {open && (
-        <div className="absolute z-50 top-full left-0 right-0 mt-1 rounded border border-[#3a3a3a] bg-[#1e1e1e] py-1 shadow-lg">
+        <div className="absolute z-50 top-full left-0 right-0 mt-1 rounded border border-[var(--border-hover)] bg-[var(--bg-base)] py-1 shadow-lg">
           {AVAILABLE_TOOLS.map((tool) => (
             <label
               key={tool}
-              className="flex items-center gap-2 px-3 py-1.5 cursor-pointer hover:bg-[#2a2a2a] text-[13px] text-[#ccc]"
+              className="flex items-center gap-2 px-3 py-1.5 cursor-pointer hover:bg-[var(--border-card)] text-[13px] text-[var(--text-primary)]"
             >
               <input
                 type="checkbox"
                 checked={selected.includes(tool)}
                 onChange={() => toggle(tool)}
-                className="accent-[#569cd6]"
+                className="accent-[var(--accent-primary)]"
               />
               <span className="font-mono">{tool}</span>
             </label>
@@ -469,7 +469,7 @@ function McpMultiSelect({
         onClick={() => setOpen((v) => !v)}
         className={`${inputCls} flex items-center justify-between text-left`}
       >
-        <span className={selected.length === 0 ? 'text-[#555]' : ''}>
+        <span className={selected.length === 0 ? 'text-[var(--text-placeholder)]' : ''}>
           {selected.length === 0 ? '未指定（不限制 MCP）' : selected.join(', ')}
         </span>
         <svg
@@ -485,20 +485,20 @@ function McpMultiSelect({
         </svg>
       </button>
       {open && (
-        <div className="absolute z-50 top-full left-0 right-0 mt-1 rounded border border-[#3a3a3a] bg-[#1e1e1e] py-1 shadow-lg">
+        <div className="absolute z-50 top-full left-0 right-0 mt-1 rounded border border-[var(--border-hover)] bg-[var(--bg-base)] py-1 shadow-lg">
           {availableMcpServers.length === 0 ? (
-            <div className="px-3 py-2 text-[12px] text-[#555]">无已配置的 MCP 服务器</div>
+            <div className="px-3 py-2 text-[12px] text-[var(--text-placeholder)]">无已配置的 MCP 服务器</div>
           ) : (
             availableMcpServers.map((server) => (
               <label
                 key={server}
-                className="flex items-center gap-2 px-3 py-1.5 cursor-pointer hover:bg-[#2a2a2a] text-[13px] text-[#ccc]"
+                className="flex items-center gap-2 px-3 py-1.5 cursor-pointer hover:bg-[var(--border-card)] text-[13px] text-[var(--text-primary)]"
               >
                 <input
                   type="checkbox"
                   checked={selected.includes(server)}
                   onChange={() => toggle(server)}
-                  className="accent-[#4ec9b0]"
+                  className="accent-[var(--accent-success)]"
                 />
                 <span className="font-mono">{server}</span>
               </label>
@@ -539,7 +539,7 @@ function FormCard({
     return acc;
   }, {});
   return (
-    <div className="px-4 py-3.5 rounded-xl bg-[#1a1a1a] border border-[#569cd6]/30 space-y-3 mb-2">
+    <div className="px-4 py-3.5 rounded-xl bg-[var(--bg-card)] border border-[var(--accent-primary)]/30 space-y-3 mb-2">
       <div>
         <div className={labelCls}>名称</div>
         <input
@@ -618,12 +618,12 @@ function FormCard({
         </div>
       </div>
       <div className="flex items-center gap-4">
-        <label className="flex items-center gap-2 text-[13px] text-[#888] cursor-pointer">
+        <label className="flex items-center gap-2 text-[13px] text-[var(--text-secondary)] cursor-pointer">
           <input
             type="checkbox"
             checked={form.readonly}
             onChange={(e) => setForm({ ...form, readonly: e.target.checked })}
-            className="accent-[#569cd6]"
+            className="accent-[var(--accent-primary)]"
           />
           只读模式
         </label>
diff --git a/packages/desktop/src/settings/Toggle.tsx b/packages/desktop/src/settings/Toggle.tsx
index 97d3aaf..c77d138 100644
--- a/packages/desktop/src/settings/Toggle.tsx
+++ b/packages/desktop/src/settings/Toggle.tsx
@@ -1,5 +1,5 @@
 export function getToggleThumbClassName(checked: boolean): string {
-  return `absolute left-0.5 top-0.5 w-3 h-3 rounded-full bg-white transition-transform ${
+  return `absolute left-0.5 top-0.5 w-3 h-3 rounded-full bg-[var(--text-white)] transition-transform ${
     checked ? 'translate-x-4' : 'translate-x-0'
   }`;
 }
@@ -21,7 +21,7 @@ export default function Toggle({
       title={checked ? (enabledLabel ?? '已启用') : (disabledLabel ?? '已禁用')}
       onClick={() => onChange(!checked)}
       className={`relative w-8 h-4 rounded-full transition-colors shrink-0 ${
-        checked ? 'bg-[#569cd6]' : 'bg-[#3a3a3a]'
+        checked ? 'bg-[var(--accent-primary)]' : 'bg-[var(--text-disabled)]'
       }`}
     >
       <span className={getToggleThumbClassName(checked)} />
diff --git a/packages/desktop/src/shared/CodeBlock.tsx b/packages/desktop/src/shared/CodeBlock.tsx
index 15e42d8..b0cce10 100644
--- a/packages/desktop/src/shared/CodeBlock.tsx
+++ b/packages/desktop/src/shared/CodeBlock.tsx
@@ -32,9 +32,9 @@ export default function CodeBlock({ code, language }: CodeBlockProps) {
   const lang = language && Prism.languages[language] ? language : 'text';
 
   return (
-    <div className="relative group my-1 rounded overflow-hidden bg-[#1a1a1a] border border-[#333]">
+    <div className="relative group my-1 rounded overflow-hidden bg-[var(--bg-card)] border border-[var(--border-strong)]">
       {language && (
-        <div className="px-3 py-1 text-xs text-[#666] bg-[#222] border-b border-[#333] font-mono">
+        <div className="px-3 py-1 text-xs text-[var(--text-muted)] bg-[var(--border-default)] border-b border-[var(--border-strong)] font-mono">
           {language}
         </div>
       )}
diff --git a/packages/desktop/src/shared/DiffBlock.tsx b/packages/desktop/src/shared/DiffBlock.tsx
index c460213..5b6dfdc 100644
--- a/packages/desktop/src/shared/DiffBlock.tsx
+++ b/packages/desktop/src/shared/DiffBlock.tsx
@@ -10,19 +10,19 @@ export default function DiffBlock({ diff }: DiffBlockProps) {
   const lines = parsed.flatMap((f) => f.hunks.flatMap((h) => h.lines));
 
   return (
-    <div className="rounded-md overflow-hidden border border-[#333]">
+    <div className="rounded-md overflow-hidden border border-[var(--border-strong)]">
       <pre className="text-[12px] leading-[1.5] font-mono overflow-x-auto">
         {lines.map((line, idx) => {
           const { type, text } = line;
-          let bgColor = 'bg-[#1e1e1e]';
-          let textColor = 'text-[#d4d4d4]';
+          let bgColor = 'bg-[var(--bg-code)]';
+          let textColor = 'text-[var(--text-primary)]';
 
           if (type === 'add') {
-            bgColor = 'bg-[#1a3a1a]';
-            textColor = 'text-[#4ec9b0]';
+            bgColor = 'bg-[var(--diff-add-bg)]';
+            textColor = 'text-[var(--diff-add-text)]';
           } else if (type === 'remove') {
-            bgColor = 'bg-[#3a1a1a]';
-            textColor = 'text-[#f44747]';
+            bgColor = 'bg-[var(--diff-remove-bg)]';
+            textColor = 'text-[var(--diff-remove-text)]';
           }
 
           return (
diff --git a/packages/desktop/src/shared/ErrorBoundary.tsx b/packages/desktop/src/shared/ErrorBoundary.tsx
index 2a6d268..d6f530e 100644
--- a/packages/desktop/src/shared/ErrorBoundary.tsx
+++ b/packages/desktop/src/shared/ErrorBoundary.tsx
@@ -26,17 +26,17 @@ export default class ErrorBoundary extends Component<Props, State> {
   render() {
     if (this.state.hasError) {
       return (
-        <div className="flex flex-col items-center justify-center h-screen bg-[#1e1e1e] text-[#cccccc] p-6">
+        <div className="flex flex-col items-center justify-center h-screen bg-[var(--bg-base)] text-[var(--text-primary)] p-6">
           <h1 className="text-xl font-semibold mb-2">出错了</h1>
-          <p className="text-sm text-[#888] mb-4">页面渲染时发生异常，请刷新重试。</p>
+          <p className="text-sm text-[var(--text-secondary)] mb-4">页面渲染时发生异常，请刷新重试。</p>
           <button
             onClick={() => window.location.reload()}
-            className="px-4 py-2 bg-[#0e639c] hover:bg-[#1177bb] rounded text-white text-sm"
+            className="px-4 py-2 bg-[var(--accent-primary)] hover:bg-[var(--accent-primary)]/80 rounded text-[var(--text-inverse)] text-sm"
           >
             刷新页面
           </button>
           {this.state.error && (
-            <pre className="mt-4 p-3 bg-[#2a2a2a] rounded text-xs text-[#aaa] max-w-full overflow-auto whitespace-pre-wrap">
+            <pre className="mt-4 p-3 bg-[var(--bg-hover)] rounded text-xs text-[var(--text-secondary)] max-w-full overflow-auto whitespace-pre-wrap">
               {this.state.error.message}
             </pre>
           )}
diff --git a/packages/desktop/src/shared/MarkdownRenderer.tsx b/packages/desktop/src/shared/MarkdownRenderer.tsx
index 653b7bd..0cb9af4 100644
--- a/packages/desktop/src/shared/MarkdownRenderer.tsx
+++ b/packages/desktop/src/shared/MarkdownRenderer.tsx
@@ -40,26 +40,26 @@ export default function MarkdownRenderer({ content, className }: MarkdownRendere
           </a>
         );
       },
-      h1: (props) => <h1 className="md-h1" {...props} />,
-      h2: (props) => <h2 className="md-h2" {...props} />,
-      h3: (props) => <h3 className="md-h3" {...props} />,
-      h4: (props) => <h4 className="md-h4" {...props} />,
-      h5: (props) => <h5 className="md-h5" {...props} />,
-      h6: (props) => <h6 className="md-h6" {...props} />,
-      p: (props) => <p className="md-p" {...props} />,
-      ul: (props) => <ul className="md-ul" {...props} />,
-      ol: (props) => <ol className="md-ol" {...props} />,
-      li: (props) => <li className="md-li" {...props} />,
-      blockquote: (props) => <blockquote className="md-blockquote" {...props} />,
-      table: (props) => (
+      h1: (props: React.HTMLAttributes<HTMLHeadingElement>) => <h1 className="md-h1" {...props} />,
+      h2: (props: React.HTMLAttributes<HTMLHeadingElement>) => <h2 className="md-h2" {...props} />,
+      h3: (props: React.HTMLAttributes<HTMLHeadingElement>) => <h3 className="md-h3" {...props} />,
+      h4: (props: React.HTMLAttributes<HTMLHeadingElement>) => <h4 className="md-h4" {...props} />,
+      h5: (props: React.HTMLAttributes<HTMLHeadingElement>) => <h5 className="md-h5" {...props} />,
+      h6: (props: React.HTMLAttributes<HTMLHeadingElement>) => <h6 className="md-h6" {...props} />,
+      p: (props: React.HTMLAttributes<HTMLParagraphElement>) => <p className="md-p" {...props} />,
+      ul: (props: React.HTMLAttributes<HTMLUListElement>) => <ul className="md-ul" {...props} />,
+      ol: (props: React.HTMLAttributes<HTMLOListElement>) => <ol className="md-ol" {...props} />,
+      li: (props: React.HTMLAttributes<HTMLLIElement>) => <li className="md-li" {...props} />,
+      blockquote: (props: React.HTMLAttributes<HTMLQuoteElement>) => <blockquote className="md-blockquote" {...props} />,
+      table: (props: React.TableHTMLAttributes<HTMLTableElement>) => (
         <div className="md-table-wrapper">
           <table className="md-table" {...props} />
         </div>
       ),
       hr: () => <hr className="md-hr" />,
-      img: (props) => <img className="md-img" {...props} />,
-      strong: (props) => <strong className="md-strong" {...props} />,
-      em: (props) => <em className="md-em" {...props} />,
+      img: (props: React.ImgHTMLAttributes<HTMLImageElement>) => <img className="md-img" {...props} />,
+      strong: (props: React.HTMLAttributes<HTMLElement>) => <strong className="md-strong" {...props} />,
+      em: (props: React.HTMLAttributes<HTMLElement>) => <em className="md-em" {...props} />,
     }),
     []
   );
diff --git a/packages/desktop/src/shared/MessageItem.tsx b/packages/desktop/src/shared/MessageItem.tsx
index d44f856..bf81210 100644
--- a/packages/desktop/src/shared/MessageItem.tsx
+++ b/packages/desktop/src/shared/MessageItem.tsx
@@ -63,7 +63,7 @@ export default function MessageItem({
     if (isUser) {
       return (
         <div className="flex justify-end mb-4">
-          <div className="relative max-w-[78%] px-4 py-3 rounded-2xl rounded-br-sm bg-[#2a2a2a] text-[#e8e8e8] text-[15px] leading-relaxed whitespace-pre-wrap break-words group">
+          <div className="relative max-w-[78%] px-4 py-3 rounded-2xl rounded-br-sm bg-[var(--border-card)] text-[var(--text-title)] text-[15px] leading-relaxed whitespace-pre-wrap break-words group">
             {content}
             {hasRollback && (
               <div className="absolute -right-1 -bottom-1">
@@ -73,7 +73,7 @@ export default function MessageItem({
                     e.stopPropagation();
                     setRollbackMenuOpen(!rollbackMenuOpen);
                   }}
-                  className="w-5 h-5 rounded-full bg-[#444] text-[#aaa] hover:bg-[#555] hover:text-[#ccc] flex items-center justify-center text-[11px] leading-none transition-opacity"
+                  className="w-5 h-5 rounded-full bg-[var(--text-disabled)] text-[var(--text-secondary)] hover:bg-[var(--text-placeholder)] hover:text-[var(--text-primary)] flex items-center justify-center text-[11px] leading-none transition-opacity"
                   title="回退到此"
                 >
                   ↩
@@ -81,7 +81,7 @@ export default function MessageItem({
                 {rollbackMenuOpen && (
                   <div
                     ref={rollbackMenuRef}
-                    className={`absolute bg-[#1e1e1e] border border-[#444] rounded-md shadow-lg py-1 z-50 min-w-[130px] ${
+                    className={`absolute bg-[var(--bg-base)] border border-[var(--text-disabled)] rounded-md shadow-lg py-1 z-50 min-w-[130px] ${
                       menuFlip.vertical ? 'top-6' : 'bottom-6'
                     } ${menuFlip.horizontal ? 'right-0' : 'right-0'}`}
                   >
@@ -92,7 +92,7 @@ export default function MessageItem({
                           setRollbackMenuOpen(false);
                           onRollbackHere();
                         }}
-                        className="block w-full text-left px-3 py-1.5 text-[12px] text-[#ccc] hover:bg-[#333]"
+                        className="block w-full text-left px-3 py-1.5 text-[12px] text-[var(--text-primary)] hover:bg-[var(--border-strong)]"
                       >
                         回退到这里
                       </button>
@@ -104,7 +104,7 @@ export default function MessageItem({
                           setRollbackMenuOpen(false);
                           onForkFromHere();
                         }}
-                        className="block w-full text-left px-3 py-1.5 text-[12px] text-[#ccc] hover:bg-[#333]"
+                        className="block w-full text-left px-3 py-1.5 text-[12px] text-[var(--text-primary)] hover:bg-[var(--border-strong)]"
                       >
                         Fork from here
                       </button>
@@ -120,12 +120,12 @@ export default function MessageItem({
 
     return (
       <div className="flex justify-start mb-4">
-        <div className="max-w-[88%] text-[15px] text-[#d4d4d4] leading-relaxed">
+        <div className="max-w-[88%] text-[15px] text-[var(--text-primary)] leading-relaxed">
           {isAssistant && messageContent != null && (
             <MarkdownRenderer content={messageContent} />
           )}
           {item.partial && (
-            <span className="inline-block w-1.5 h-[1.1em] bg-[#569cd6] animate-pulse ml-0.5 align-middle" />
+            <span className="inline-block w-1.5 h-[1.1em] bg-[var(--accent-primary)] animate-pulse ml-0.5 align-middle" />
           )}
         </div>
       </div>
@@ -138,7 +138,7 @@ export default function MessageItem({
         <button
           type="button"
           onClick={() => setReasoningOpen((v) => !v)}
-          className="flex items-center gap-1.5 text-[13px] text-[#555] hover:text-[#888] transition-colors"
+          className="flex items-center gap-1.5 text-[13px] text-[var(--text-placeholder)] hover:text-[var(--text-tertiary)] transition-colors"
         >
           <span className={`transition-transform text-[10px] ${reasoningOpen ? 'rotate-90' : ''}`}>
             ▶
@@ -146,7 +146,7 @@ export default function MessageItem({
           思考过程
         </button>
         {reasoningOpen && (
-          <div className="mt-2 pl-3 border-l-2 border-[#2a2a2a] text-[13px] text-[#777] whitespace-pre-wrap leading-relaxed">
+          <div className="mt-2 pl-3 border-l-2 border-[var(--border-card)] text-[13px] text-[var(--text-tertiary)] whitespace-pre-wrap leading-relaxed">
             {item.content}
           </div>
         )}
@@ -162,9 +162,9 @@ export default function MessageItem({
       const cmd = typeof a.command === 'string' ? a.command : '';
       const label = path || cmd || item.name;
       return (
-        <div className="mb-2 flex items-center gap-1.5 text-[13px] text-[#777]">
-          <span className="font-mono text-[#dcdcaa]">{label}</span>
-          <span className="text-[#666]">等待审批</span>
+        <div className="mb-2 flex items-center gap-1.5 text-[13px] text-[var(--text-tertiary)]">
+          <span className="font-mono text-[var(--text-primary)]">{label}</span>
+          <span className="text-[var(--text-muted)]">等待审批</span>
         </div>
       );
     }
@@ -176,15 +176,15 @@ export default function MessageItem({
     const isRejected = item.status === 'rejected';
     return (
       <div className="mb-2 flex items-center gap-1.5 text-[13px]">
-        <span className={`font-mono ${isRejected ? 'text-[#666] line-through' : 'text-[#dcdcaa]'}`}>
+        <span className={`font-mono ${isRejected ? 'text-[var(--text-muted)] line-through' : 'text-[var(--text-primary)]'}`}>
           {item.name}
         </span>
         {item.status === 'running' && (
-          <span className="text-[#569cd6] flex items-center gap-1">
+          <span className="text-[var(--accent-primary)] flex items-center gap-1">
             <span className="inline-block animate-spin">⟳</span> 执行中
           </span>
         )}
-        {isRejected && <span className="text-[#666]">✗ 已拒绝</span>}
+        {isRejected && <span className="text-[var(--text-muted)]">✗ 已拒绝</span>}
       </div>
     );
   }
@@ -195,7 +195,7 @@ export default function MessageItem({
 
   if (item.type === 'error') {
     return (
-      <div className="mb-3 px-4 py-3 rounded-lg bg-[#2a1515] border border-[#5a2020] text-[#f47777] text-[14px] leading-relaxed">
+      <div className="mb-3 px-4 py-3 rounded-lg bg-[var(--accent-danger-bg)] border border-[var(--accent-danger-border)] text-[var(--accent-danger)] text-[14px] leading-relaxed">
         {item.message}
       </div>
     );
diff --git a/packages/desktop/src/shared/ToolCallCard.tsx b/packages/desktop/src/shared/ToolCallCard.tsx
index f106e40..97d6da1 100644
--- a/packages/desktop/src/shared/ToolCallCard.tsx
+++ b/packages/desktop/src/shared/ToolCallCard.tsx
@@ -24,9 +24,9 @@ export default function ToolCallCard({ item, threadId, onApprove, onReject }: To
 
   return (
     <div
-      className={`my-2 rounded border ${isRejected ? 'border-[#444] opacity-50' : 'border-[#3c3c3c]'} bg-[#252526] overflow-hidden`}
+      className={`my-2 rounded border ${isRejected ? 'border-[var(--border-strong)] opacity-50' : 'border-[var(--border-card)]'} bg-[var(--bg-card)] overflow-hidden`}
     >
-      <div className="flex items-center gap-2 px-3 py-2 bg-[#2d2d2d]">
+      <div className="flex items-center gap-2 px-3 py-2 bg-[var(--bg-code-header)]">
         {hasArgs ? (
           <button
             type="button"
@@ -34,19 +34,19 @@ export default function ToolCallCard({ item, threadId, onApprove, onReject }: To
             className="flex items-center gap-2 min-w-0 hover:opacity-80 transition-opacity"
           >
             <span
-              className={`transition-transform text-[10px] text-[#555] ${argsOpen ? 'rotate-90' : ''}`}
+              className={`transition-transform text-[10px] text-[var(--text-muted)] ${argsOpen ? 'rotate-90' : ''}`}
             >
               ▶
             </span>
             <span
-              className={`font-mono text-sm font-medium ${isRejected ? 'line-through text-[#666]' : 'text-[#dcdcaa]'}`}
+              className={`font-mono text-sm font-medium ${isRejected ? 'line-through text-[var(--text-muted)]' : 'text-[var(--syntax-function)]'}`}
             >
               {item.name}
             </span>
           </button>
         ) : (
           <span
-            className={`font-mono text-sm font-medium ${isRejected ? 'line-through text-[#666]' : 'text-[#dcdcaa]'}`}
+            className={`font-mono text-sm font-medium ${isRejected ? 'line-through text-[var(--text-muted)]' : 'text-[var(--syntax-function)]'}`}
           >
             {item.name}
           </span>
@@ -57,26 +57,26 @@ export default function ToolCallCard({ item, threadId, onApprove, onReject }: To
               <button
                 type="button"
                 onClick={() => onApprove(threadId, item.id)}
-                className="px-2 py-0.5 text-xs bg-[#0e639c] hover:bg-[#1177bb] text-white rounded transition-colors"
+                className="px-2 py-0.5 text-xs bg-[var(--accent-primary)] hover:bg-[var(--accent-primary)]/80 text-[var(--text-inverse)] rounded transition-colors"
               >
                 批准
               </button>
               <button
                 type="button"
                 onClick={() => onReject(threadId, item.id)}
-                className="px-2 py-0.5 text-xs bg-[#3c3c3c] hover:bg-[#4c4c4c] text-[#ccc] rounded transition-colors"
+                className="px-2 py-0.5 text-xs bg-[var(--bg-hover)] hover:bg-[var(--bg-active)] text-[var(--text-primary)] rounded transition-colors"
               >
                 拒绝
               </button>
             </>
           )}
           {item.status === 'running' && (
-            <span className="text-xs text-[#569cd6] flex items-center gap-1">
+            <span className="text-xs text-[var(--accent-primary)] flex items-center gap-1">
               <span className="inline-block animate-spin">⟳</span> 执行中
             </span>
           )}
-          {item.status === 'approved' && <span className="text-xs text-[#4ec9b0]">✓ 已完成</span>}
-          {item.status === 'rejected' && <span className="text-xs text-[#666]">✗ 已拒绝</span>}
+          {item.status === 'approved' && <span className="text-xs text-[var(--accent-success)]">✓ 已完成</span>}
+          {item.status === 'rejected' && <span className="text-xs text-[var(--text-muted)]">✗ 已拒绝</span>}
         </div>
       </div>
       {hasArgs && argsOpen && (
diff --git a/packages/desktop/src/shared/ToolSummary.tsx b/packages/desktop/src/shared/ToolSummary.tsx
index 70ab770..d07703d 100644
--- a/packages/desktop/src/shared/ToolSummary.tsx
+++ b/packages/desktop/src/shared/ToolSummary.tsx
@@ -98,10 +98,10 @@ export default function ToolSummary({ toolCall, toolResult }: ToolSummaryProps)
   const { title, isError, isRejected } = buildToolSummaryTitle(toolCall, toolResult);
 
   const titleColor = isRejected
-    ? 'text-[#666] line-through'
+    ? 'text-[var(--text-muted)] line-through'
     : isError
-      ? 'text-[#f44747]'
-      : 'text-[#dcdcaa]';
+      ? 'text-[var(--accent-danger)]'
+      : 'text-[var(--syntax-function)]';
 
   const hasContent = !!(toolResult?.diff || toolResult?.output);
 
@@ -112,12 +112,12 @@ export default function ToolSummary({ toolCall, toolResult }: ToolSummaryProps)
         onClick={() => setOpen((v) => !v)}
         className="flex items-center gap-1.5 text-[13px] hover:opacity-80 transition-opacity"
       >
-        <span className={`transition-transform text-[10px] text-[#555] ${open ? 'rotate-90' : ''}`}>
+        <span className={`transition-transform text-[10px] text-[var(--text-muted)] ${open ? 'rotate-90' : ''}`}>
           ▶
         </span>
         <span className={`font-mono ${titleColor}`}>{title}</span>
         {isFileTool && toolResult && (toolResult.insertions || toolResult.deletions) && (
-          <span className="text-[#555] text-xs">
+          <span className="text-[var(--text-muted)] text-xs">
             {toolResult.insertions ? `+${toolResult.insertions}` : ''}
             {toolResult.deletions ? ` -${toolResult.deletions}` : ''}
           </span>
diff --git a/packages/desktop/src/shared/UnifiedDiffView.tsx b/packages/desktop/src/shared/UnifiedDiffView.tsx
index cc8b278..b3f5697 100644
--- a/packages/desktop/src/shared/UnifiedDiffView.tsx
+++ b/packages/desktop/src/shared/UnifiedDiffView.tsx
@@ -18,23 +18,23 @@ function DiffLineView({
 }) {
   const borderColor =
     type === 'add'
-      ? 'border-l-[#2a6a2a]'
+      ? 'border-l-[var(--diff-add-border)]'
       : type === 'remove'
-        ? 'border-l-[#6a2a2a]'
+        ? 'border-l-[var(--diff-remove-border)]'
         : 'border-l-transparent';
   const bgColor =
-    type === 'add' ? 'bg-[#1a2f1a]' : type === 'remove' ? 'bg-[#2f1a1a]' : 'bg-transparent';
+    type === 'add' ? 'bg-[var(--diff-add-bg)]' : type === 'remove' ? 'bg-[var(--diff-remove-bg)]' : 'bg-transparent';
   const textColor =
-    type === 'add' ? 'text-[#7ee787]' : type === 'remove' ? 'text-[#ffa198]' : 'text-[#aaa]';
+    type === 'add' ? 'text-[var(--diff-add-text)]' : type === 'remove' ? 'text-[var(--diff-remove-text)]' : 'text-[var(--text-secondary)]';
 
   return (
     <div
       className={`flex font-mono text-[12px] leading-[1.6] ${bgColor} border-l-[3px] ${borderColor}`}
     >
-      <div className="w-10 shrink-0 text-right pr-2 text-[#555] select-none tabular-nums">
+      <div className="w-10 shrink-0 text-right pr-2 text-[var(--diff-line-num)] select-none tabular-nums">
         {oldLineNum ?? ''}
       </div>
-      <div className="w-10 shrink-0 text-right pr-2 text-[#555] select-none tabular-nums border-r border-[#222]">
+      <div className="w-10 shrink-0 text-right pr-2 text-[var(--diff-line-num)] select-none tabular-nums border-r border-[var(--diff-line-num-border)]">
         {newLineNum ?? ''}
       </div>
       <div className={`flex-1 pl-3 whitespace-pre ${textColor} overflow-x-auto`}>
@@ -53,10 +53,10 @@ function DiffFileView({ file }: { file: import('../lib/diff-parser').ParsedDiffF
       <button
         type="button"
         onClick={() => setCollapsed((c) => !c)}
-        className="w-full flex items-center gap-2 px-3 py-2 bg-[#1e1e1e] hover:bg-[#252525] text-[12px] text-[#ccc] rounded-t border-b border-[#2a2a2a] text-left"
+        className="w-full flex items-center gap-2 px-3 py-2 bg-[var(--bg-code)] hover:bg-[var(--bg-hover)] text-[12px] text-[var(--text-primary)] rounded-t border-b border-[var(--border-card)] text-left"
       >
         <span
-          className={`transition-transform text-[10px] text-[#666] ${collapsed ? '' : 'rotate-90'}`}
+          className={`transition-transform text-[10px] text-[var(--text-muted)] ${collapsed ? '' : 'rotate-90'}`}
         >
           ▶
         </span>
@@ -64,16 +64,16 @@ function DiffFileView({ file }: { file: import('../lib/diff-parser').ParsedDiffF
       </button>
 
       {!collapsed && (
-        <div className="border border-[#2a2a2a] rounded-b overflow-hidden">
+        <div className="border border-[var(--border-card)] rounded-b overflow-hidden">
           {file.hunks.length === 0 && (
-            <div className="px-3 py-2 text-[12px] text-[#555]">无差异</div>
+            <div className="px-3 py-2 text-[12px] text-[var(--text-muted)]">无差异</div>
           )}
           {file.hunks.map((hunk, hi) => (
             <div key={hi}>
               {/* Hunk context line (@@ ...) */}
-              <div className="flex items-center gap-2 px-3 py-1 bg-[#1e1e1e] text-[#555] text-[11px] font-mono border-y border-[#222]">
+              <div className="flex items-center gap-2 px-3 py-1 bg-[var(--bg-code)] text-[var(--diff-line-num)] text-[11px] font-mono border-y border-[var(--diff-line-num-border)]">
                 <span>@@</span>
-                <span className="text-[#888]">
+                <span className="text-[var(--diff-hunk-header)]">
                   -{hunk.oldStart},{hunk.oldLen} +{hunk.newStart},{hunk.newLen}
                 </span>
                 <span>@@</span>
@@ -99,7 +99,7 @@ export default function UnifiedDiffView({ diff }: UnifiedDiffViewProps) {
   const parsed = useMemo(() => parseUnifiedDiff(diff), [diff]);
 
   if (parsed.length === 0) {
-    return <div className="text-[12px] text-[#555] px-3 py-2">无差异</div>;
+    return <div className="text-[12px] text-[var(--text-muted)] px-3 py-2">无差异</div>;
   }
 
   return (
diff --git a/packages/desktop/src/stores/global.store.ts b/packages/desktop/src/stores/global.store.ts
index cb39a72..bb0b188 100644
--- a/packages/desktop/src/stores/global.store.ts
+++ b/packages/desktop/src/stores/global.store.ts
@@ -47,6 +47,7 @@ interface UIState {
   rightPanelWidth: number;
   bottomPanelHeight: number;
   ideSidebarView: 'explorer' | 'search' | 'git' | 'extensions';
+  theme: 'dark' | 'light' | 'paper';
 }
 
 interface WorkspaceState {
@@ -114,6 +115,7 @@ interface GlobalActions {
   setRightPanelWidth: (w: number) => void;
   setBottomPanelHeight: (h: number) => void;
   setIdeSidebarView: (view: UIState['ideSidebarView']) => void;
+  setTheme: (theme: UIState['theme']) => void;
   setWorkspace: (rootPath: string, name: string) => void;
   setProjects: (projects: Project[]) => void;
   setCurrentProject: (id: string) => void;
@@ -208,6 +210,7 @@ export const useGlobalStore = create<GlobalState & GlobalActions>()(
         rightPanelWidth: 320,
         bottomPanelHeight: 200,
         ideSidebarView: 'explorer',
+        theme: 'dark',
       },
       workspace: {
         rootPath: '',
@@ -275,6 +278,10 @@ export const useGlobalStore = create<GlobalState & GlobalActions>()(
         set((s) => {
           s.ui.ideSidebarView = view;
         }),
+      setTheme: (theme) =>
+        set((s) => {
+          s.ui.theme = theme;
+        }),
       setWorkspace: (rootPath, name) =>
         set((s) => {
           s.workspace.rootPath = normalizeCwd(rootPath);
diff --git a/packages/desktop/src/styles/index.css b/packages/desktop/src/styles/index.css
deleted file mode 100644
index a972900..0000000
--- a/packages/desktop/src/styles/index.css
+++ /dev/null
@@ -1,206 +0,0 @@
-@import "tailwindcss";
-
-:root {
-  color-scheme: dark;
-}
-
-@layer base {
-  * {
-    box-sizing: border-box;
-    margin: 0;
-    padding: 0;
-  }
-}
-
-html,
-body,
-#root {
-  height: 100%;
-  overflow: hidden;
-  background-color: #1e1e1e;
-  color: #cccccc;
-  font-family:
-    -apple-system,
-    BlinkMacSystemFont,
-    'Segoe UI',
-    Roboto,
-    'Helvetica Neue',
-    Arial,
-    sans-serif;
-  font-size: 13px;
-}
-
-/* Custom scrollbar */
-::-webkit-scrollbar {
-  width: 14px;
-  height: 14px;
-}
-
-::-webkit-scrollbar-track {
-  background: #1e1e1e;
-}
-
-::-webkit-scrollbar-thumb {
-  background: #555;
-  border-radius: 7px;
-  border: 3px solid #1e1e1e;
-  background-clip: padding-box;
-}
-
-::-webkit-scrollbar-thumb:hover {
-  background: #666;
-}
-
-/* ===== Markdown 渲染样式 ===== */
-.markdown-body .md-inline-code {
-  background-color: #2a2a2a;
-  color: #ce9178;
-  padding: 0.15em 0.4em;
-  border-radius: 3px;
-  font-family: 'Cascadia Code', 'Fira Code', 'Consolas', monospace;
-  font-size: 0.9em;
-}
-
-.markdown-body .md-link {
-  color: #569cd6;
-  text-decoration: none;
-}
-.markdown-body .md-link:hover {
-  text-decoration: underline;
-}
-
-.markdown-body .md-h1 { font-size: 1.6em; font-weight: 700; color: #e8e8e8; margin: 0.8em 0 0.4em; border-bottom: 1px solid #333; padding-bottom: 0.3em; }
-.markdown-body .md-h2 { font-size: 1.35em; font-weight: 700; color: #e8e8e8; margin: 0.7em 0 0.35em; border-bottom: 1px solid #2a2a2a; padding-bottom: 0.2em; }
-.markdown-body .md-h3 { font-size: 1.15em; font-weight: 600; color: #d4d4d4; margin: 0.6em 0 0.3em; }
-.markdown-body .md-h4 { font-size: 1.05em; font-weight: 600; color: #d4d4d4; margin: 0.5em 0 0.25em; }
-.markdown-body .md-h5 { font-size: 1em; font-weight: 600; color: #bbb; margin: 0.4em 0 0.2em; }
-.markdown-body .md-h6 { font-size: 0.95em; font-weight: 600; color: #999; margin: 0.4em 0 0.2em; }
-
-.markdown-body .md-p { margin: 0 0 0.6em; line-height: 1.6; }
-
-.markdown-body .md-ul { list-style: disc; padding-left: 1.5em; margin: 0.3em 0; }
-.markdown-body .md-ol { list-style: decimal; padding-left: 1.5em; margin: 0.3em 0; }
-.markdown-body .md-li { margin: 0.15em 0; line-height: 1.5; }
-.markdown-body .md-li > .md-ul,
-.markdown-body .md-li > .md-ol { margin: 0.1em 0; }
-
-.markdown-body .md-blockquote {
-  border-left: 3px solid #444;
-  padding: 0.3em 0 0.3em 1em;
-  margin: 0.5em 0;
-  color: #999;
-  font-style: italic;
-}
-.markdown-body .md-blockquote p { margin-bottom: 0.3em; }
-
-.markdown-body .md-table-wrapper { overflow-x: auto; margin: 0.5em 0; }
-.markdown-body .md-table {
-  border-collapse: collapse;
-  width: 100%;
-  font-size: 0.9em;
-}
-.markdown-body .md-table th,
-.markdown-body .md-table td {
-  border: 1px solid #333;
-  padding: 0.4em 0.8em;
-  text-align: left;
-}
-.markdown-body .md-table th {
-  background-color: #252526;
-  font-weight: 600;
-  color: #ccc;
-}
-.markdown-body .md-table tr:nth-child(even) {
-  background-color: #222;
-}
-
-.markdown-body .md-hr {
-  border: none;
-  border-top: 1px solid #333;
-  margin: 1em 0;
-}
-
-.markdown-body .md-img {
-  max-width: 100%;
-  border-radius: 6px;
-  margin: 0.5em 0;
-}
-
-.markdown-body .md-strong { color: #e8e8e8; }
-.markdown-body .md-em { color: #ccc; }
-
-.markdown-body input[type="checkbox"] {
-  margin-right: 0.5em;
-  accent-color: #569cd6;
-}
-
-/* PrismJS 深色主题覆盖 */
-.markdown-body pre[class*="language-"],
-.markdown-body code[class*="language-"] {
-  color: #d4d4d4;
-  background: none;
-  font-family: 'Cascadia Code', 'Fira Code', 'Consolas', monospace;
-  font-size: 13px;
-}
-
-.markdown-body .token.comment,
-.markdown-body .token.prolog,
-.markdown-body .token.doctype,
-.markdown-body .token.cdata {
-  color: #6a9955;
-}
-
-.markdown-body .token.punctuation {
-  color: #d4d4d4;
-}
-
-.markdown-body .token.property,
-.markdown-body .token.tag,
-.markdown-body .token.boolean,
-.markdown-body .token.number,
-.markdown-body .token.constant,
-.markdown-body .token.symbol,
-.markdown-body .token.deleted {
-  color: #b5cea8;
-}
-
-.markdown-body .token.selector,
-.markdown-body .token.attr-name,
-.markdown-body .token.string,
-.markdown-body .token.char,
-.markdown-body .token.builtin,
-.markdown-body .token.inserted {
-  color: #ce9178;
-}
-
-.markdown-body .token.operator,
-.markdown-body .token.entity,
-.markdown-body .token.url,
-.markdown-body .token.variable {
-  color: #d4d4d4;
-}
-
-.markdown-body .token.atrule,
-.markdown-body .token.attr-value,
-.markdown-body .token.function,
-.markdown-body .token.class-name {
-  color: #dcdcaa;
-}
-
-.markdown-body .token.keyword {
-  color: #569cd6;
-}
-
-.markdown-body .token.regex,
-.markdown-body .token.important {
-  color: #d16969;
-}
-
-.markdown-body .token.important,
-.markdown-body .token.bold {
-  font-weight: bold;
-}
-
-.markdown-body .token.italic {
-  font-style: italic;
-}

From 3823782d1f5f98687f986b9af63809e82ea90f46 Mon Sep 17 00:00:00 2001
From: phantom5099 <1011668688@qq.com>
Date: Sun, 7 Jun 2026 19:48:14 +0800
Subject: [PATCH 2/7] restore index.css

---
 packages/desktop/src/styles/index.css | 570 ++++++++++++++++++++++++++
 1 file changed, 570 insertions(+)
 create mode 100644 packages/desktop/src/styles/index.css

diff --git a/packages/desktop/src/styles/index.css b/packages/desktop/src/styles/index.css
new file mode 100644
index 0000000..9efdf9c
--- /dev/null
+++ b/packages/desktop/src/styles/index.css
@@ -0,0 +1,570 @@
+@import "tailwindcss";
+
+/* ========== 主题变量 ========== */
+:root {
+  /* 背景层级 */
+  --bg-base: #1e1e1e;
+  --bg-panel: #111;
+  --bg-sidebar: #161616;
+  --bg-card: #1a1a1a;
+  --bg-card-hover: #1c1c1c;
+  --bg-hover: #252525;
+  --bg-active: #1e1e1e;
+  --bg-selected: #0d2d4a;
+  --bg-selected-hover: #094771;
+  --bg-input: #252525;
+  --bg-tooltip: #1e1e1e;
+  --bg-scrollbar: #1e1e1e;
+  --bg-code: #1a1a1a;
+  --bg-code-header: #222;
+
+  /* 文字层级 */
+  --text-primary: #ccc;
+  --text-title: #ddd;
+  --text-secondary: #aaa;
+  --text-tertiary: #888;
+  --text-muted: #666;
+  --text-placeholder: #555;
+  --text-disabled: #444;
+  --text-inverse: #111;
+  --text-white: #fff;
+
+  /* 边框层级 */
+  --border-default: #222;
+  --border-card: #2a2a2a;
+  --border-hover: #3a3a3a;
+  --border-strong: #333;
+  --border-divider: #222;
+
+  /* 功能色 */
+  --accent-primary: #569cd6;
+  --accent-success: #4ec9b0;
+  --accent-warning: #e5c07b;
+  --accent-danger: #f44747;
+  --accent-danger-bg: #2a1515;
+  --accent-danger-border: #5a2020;
+  --btn-primary-bg: #1a3a5c;
+  --btn-primary-hover: #1a4a6c;
+  --btn-danger-bg: #3a1a1a;
+  --btn-danger-hover: #4a1a1a;
+  --btn-cancel-bg: #2a2a2a;
+  --btn-cancel-hover: #3a3a3a;
+  --btn-send-bg: #fff;
+
+  /* 滚动条 */
+  --scrollbar-thumb: #555;
+  --scrollbar-thumb-hover: #666;
+
+  /* Diff 展示 */
+  --diff-add-bg: #1a2f1a;
+  --diff-add-text: #7ee787;
+  --diff-add-border: #2a6a2a;
+  --diff-remove-bg: #2f1a1a;
+  --diff-remove-text: #ffa198;
+  --diff-remove-border: #6a2a2a;
+  --diff-line-num: #555;
+  --diff-line-num-border: #222;
+  --diff-hunk-header: #888;
+
+  /* 语义标签 */
+  --tag-decision-bg: #2a1a10;
+  --tag-decision-text: #ce9178;
+  --tag-action-bg: #1a2a1a;
+  --tag-action-text: #6a9955;
+  --tag-info-bg: #1a1a3a;
+  --tag-info-text: var(--accent-primary);
+  --tag-mcp-bg: #2a1a2a;
+  --tag-mcp-text: #c586c0;
+
+  /* 遮罩层 */
+  --overlay-bg: rgba(0, 0, 0, 0.5);
+
+  /* 语法常量 */
+  --syntax-function: #dcdcaa;
+  --syntax-string: #ce9178;
+
+  color-scheme: dark;
+}
+
+/* 白色主题 */
+[data-theme="light"] {
+  --bg-base: #fff;
+  --bg-panel: #f5f5f5;
+  --bg-sidebar: #fafafa;
+  --bg-card: #fff;
+  --bg-card-hover: #f8f8f8;
+  --bg-hover: #eee;
+  --bg-active: #e8e8e8;
+  --bg-selected: #e3f2fd;
+  --bg-selected-hover: #bbdefb;
+  --bg-input: #f5f5f5;
+  --bg-tooltip: #fff;
+  --bg-scrollbar: #f5f5f5;
+  --bg-code: #f8f8f8;
+  --bg-code-header: #eee;
+
+  --text-primary: #333;
+  --text-title: #111;
+  --text-secondary: #444;
+  --text-tertiary: #666;
+  --text-muted: #888;
+  --text-placeholder: #aaa;
+  --text-disabled: #bbb;
+  --text-inverse: #fff;
+  --text-white: #fff;
+
+  --border-default: #e0e0e0;
+  --border-card: #e8e8e8;
+  --border-hover: #d0d0d0;
+  --border-strong: #ccc;
+  --border-divider: #e0e0e0;
+
+  --accent-primary: #0066cc;
+  --accent-success: #2e7d32;
+  --accent-warning: #ed6c02;
+  --accent-danger: #d32f2f;
+  --accent-danger-bg: #ffebee;
+  --accent-danger-border: #ef9a9a;
+  --btn-primary-bg: #e3f2fd;
+  --btn-primary-hover: #bbdefb;
+  --btn-danger-bg: #ffebee;
+  --btn-danger-hover: #ffcdd2;
+  --btn-cancel-bg: #f5f5f5;
+  --btn-cancel-hover: #eee;
+  --btn-send-bg: #0066cc;
+
+  --scrollbar-thumb: #bbb;
+  --scrollbar-thumb-hover: #999;
+
+  /* Diff 展示 */
+  --diff-add-bg: #e8f5e9;
+  --diff-add-text: #2e7d32;
+  --diff-add-border: #a5d6a7;
+  --diff-remove-bg: #ffebee;
+  --diff-remove-text: #c62828;
+  --diff-remove-border: #ef9a9a;
+  --diff-line-num: #999;
+  --diff-line-num-border: #e0e0e0;
+  --diff-hunk-header: #666;
+
+  /* 语义标签 */
+  --tag-decision-bg: #fff3e0;
+  --tag-decision-text: #e65100;
+  --tag-action-bg: #e8f5e9;
+  --tag-action-text: #2e7d32;
+  --tag-info-bg: #e3f2fd;
+  --tag-info-text: var(--accent-primary);
+  --tag-mcp-bg: #f3e5f5;
+  --tag-mcp-text: #7b1fa2;
+
+  /* 遮罩层 */
+  --overlay-bg: rgba(0, 0, 0, 0.35);
+
+  /* 语法常量 */
+  --syntax-function: #8b6914;
+  --syntax-string: #a0522d;
+
+  color-scheme: light;
+}
+
+/* 纸黄色主题 */
+[data-theme="paper"] {
+  --bg-base: #f5f0e8;
+  --bg-panel: #ede8de;
+  --bg-sidebar: #f0ebe3;
+  --bg-card: #faf6f0;
+  --bg-card-hover: #f5f0e8;
+  --bg-hover: #e8e3d8;
+  --bg-active: #e0dbd0;
+  --bg-selected: #d4e6f1;
+  --bg-selected-hover: #aed6f1;
+  --bg-input: #f0ebe3;
+  --bg-tooltip: #faf6f0;
+  --bg-scrollbar: #f0ebe3;
+  --bg-code: #f5f0e8;
+  --bg-code-header: #e8e3d8;
+
+  --text-primary: #3d3b36;
+  --text-title: #1a1917;
+  --text-secondary: #4a4840;
+  --text-tertiary: #5c5a55;
+  --text-muted: #7a7872;
+  --text-placeholder: #999790;
+  --text-disabled: #b5b3ad;
+  --text-inverse: #fff;
+  --text-white: #fff;
+
+  --border-default: #d8d4cc;
+  --border-card: #e0dcd4;
+  --border-hover: #c8c4bc;
+  --border-strong: #b8b4ac;
+  --border-divider: #d8d4cc;
+
+  --accent-primary: #2d6a9f;
+  --accent-success: #3d8b5f;
+  --accent-warning: #c9892e;
+  --accent-danger: #c44d4d;
+  --accent-danger-bg: #f5e6e6;
+  --accent-danger-border: #e0b4b4;
+  --btn-primary-bg: #d4e6f1;
+  --btn-primary-hover: #aed6f1;
+  --btn-danger-bg: #f5e6e6;
+  --btn-danger-hover: #e8cccc;
+  --btn-cancel-bg: #e8e3d8;
+  --btn-cancel-hover: #ddd8ce;
+  --btn-send-bg: #2d6a9f;
+
+  --scrollbar-thumb: #c5c3bd;
+  --scrollbar-thumb-hover: #b5b3ad;
+
+  /* Diff 展示 */
+  --diff-add-bg: #e0ece3;
+  --diff-add-text: #2d6a3d;
+  --diff-add-border: #a5c9aa;
+  --diff-remove-bg: #f5e0e0;
+  --diff-remove-text: #8b2d2d;
+  --diff-remove-border: #e0b4b4;
+  --diff-line-num: #a5a39a;
+  --diff-line-num-border: #d8d4cc;
+  --diff-hunk-header: #7a7872;
+
+  /* 语义标签 */
+  --tag-decision-bg: #f0e6d8;
+  --tag-decision-text: #8b4513;
+  --tag-action-bg: #e0ece3;
+  --tag-action-text: #2d6a3d;
+  --tag-info-bg: #d4e6f1;
+  --tag-info-text: var(--accent-primary);
+  --tag-mcp-bg: #e8dde8;
+  --tag-mcp-text: #6a1b6a;
+
+  /* 遮罩层 */
+  --overlay-bg: rgba(0, 0, 0, 0.35);
+
+  /* 语法常量 */
+  --syntax-function: #7a6a2a;
+  --syntax-string: #8b5a2b;
+
+  color-scheme: light;
+}
+
+/* ========== 基础样式 ========== */
+@layer base {
+  * {
+    box-sizing: border-box;
+    margin: 0;
+    padding: 0;
+  }
+}
+
+html,
+body,
+#root {
+  height: 100%;
+  overflow: hidden;
+  background-color: var(--bg-base);
+  color: var(--text-primary);
+  font-family:
+    -apple-system,
+    BlinkMacSystemFont,
+    'Segoe UI',
+    Roboto,
+    'Helvetica Neue',
+    Arial,
+    sans-serif;
+  font-size: 13px;
+  transition: background-color 150ms ease, color 150ms ease;
+}
+
+/* Custom scrollbar */
+::-webkit-scrollbar {
+  width: 14px;
+  height: 14px;
+}
+
+::-webkit-scrollbar-track {
+  background: var(--bg-scrollbar);
+}
+
+::-webkit-scrollbar-thumb {
+  background: var(--scrollbar-thumb);
+  border-radius: 7px;
+  border: 3px solid var(--bg-scrollbar);
+  background-clip: padding-box;
+}
+
+::-webkit-scrollbar-thumb:hover {
+  background: var(--scrollbar-thumb-hover);
+}
+
+/* ===== Markdown 渲染样式 ===== */
+.markdown-body .md-inline-code {
+  background-color: var(--bg-hover);
+  color: var(--syntax-string);
+  padding: 0.15em 0.4em;
+  border-radius: 3px;
+  font-family: 'Cascadia Code', 'Fira Code', 'Consolas', monospace;
+  font-size: 0.9em;
+}
+
+.markdown-body .md-link {
+  color: var(--accent-primary);
+  text-decoration: none;
+}
+.markdown-body .md-link:hover {
+  text-decoration: underline;
+}
+
+.markdown-body .md-h1 { font-size: 1.6em; font-weight: 700; color: var(--text-title); margin: 0.8em 0 0.4em; border-bottom: 1px solid var(--border-strong); padding-bottom: 0.3em; }
+.markdown-body .md-h2 { font-size: 1.35em; font-weight: 700; color: var(--text-title); margin: 0.7em 0 0.35em; border-bottom: 1px solid var(--border-card); padding-bottom: 0.2em; }
+.markdown-body .md-h3 { font-size: 1.15em; font-weight: 600; color: var(--text-primary); margin: 0.6em 0 0.3em; }
+.markdown-body .md-h4 { font-size: 1.05em; font-weight: 600; color: var(--text-primary); margin: 0.5em 0 0.25em; }
+.markdown-body .md-h5 { font-size: 1em; font-weight: 600; color: var(--text-secondary); margin: 0.4em 0 0.2em; }
+.markdown-body .md-h6 { font-size: 0.95em; font-weight: 600; color: var(--text-muted); margin: 0.4em 0 0.2em; }
+
+.markdown-body .md-p { margin: 0 0 0.6em; line-height: 1.6; }
+
+.markdown-body .md-ul { list-style: disc; padding-left: 1.5em; margin: 0.3em 0; }
+.markdown-body .md-ol { list-style: decimal; padding-left: 1.5em; margin: 0.3em 0; }
+.markdown-body .md-li { margin: 0.15em 0; line-height: 1.5; }
+.markdown-body .md-li > .md-ul,
+.markdown-body .md-li > .md-ol { margin: 0.1em 0; }
+
+.markdown-body .md-blockquote {
+  border-left: 3px solid var(--border-hover);
+  padding: 0.3em 0 0.3em 1em;
+  margin: 0.5em 0;
+  color: var(--text-muted);
+  font-style: italic;
+}
+.markdown-body .md-blockquote p { margin-bottom: 0.3em; }
+
+.markdown-body .md-table-wrapper { overflow-x: auto; margin: 0.5em 0; }
+.markdown-body .md-table {
+  border-collapse: collapse;
+  width: 100%;
+  font-size: 0.9em;
+}
+.markdown-body .md-table th,
+.markdown-body .md-table td {
+  border: 1px solid var(--border-strong);
+  padding: 0.4em 0.8em;
+  text-align: left;
+}
+.markdown-body .md-table th {
+  background-color: var(--bg-hover);
+  font-weight: 600;
+  color: var(--text-primary);
+}
+.markdown-body .md-table tr:nth-child(even) {
+  background-color: var(--bg-card);
+}
+
+.markdown-body .md-hr {
+  border: none;
+  border-top: 1px solid var(--border-strong);
+  margin: 1em 0;
+}
+
+.markdown-body .md-img {
+  max-width: 100%;
+  border-radius: 6px;
+  margin: 0.5em 0;
+}
+
+.markdown-body .md-strong { color: var(--text-title); }
+.markdown-body .md-em { color: var(--text-primary); }
+
+.markdown-body input[type="checkbox"] {
+  margin-right: 0.5em;
+  accent-color: var(--accent-primary);
+}
+
+/* PrismJS 深色主题覆盖 */
+.markdown-body pre[class*="language-"],
+.markdown-body code[class*="language-"] {
+  color: #d4d4d4;
+  background: none;
+  font-family: 'Cascadia Code', 'Fira Code', 'Consolas', monospace;
+  font-size: 13px;
+}
+
+.markdown-body .token.comment,
+.markdown-body .token.prolog,
+.markdown-body .token.doctype,
+.markdown-body .token.cdata {
+  color: #6a9955;
+}
+
+.markdown-body .token.punctuation {
+  color: #d4d4d4;
+}
+
+.markdown-body .token.property,
+.markdown-body .token.tag,
+.markdown-body .token.boolean,
+.markdown-body .token.number,
+.markdown-body .token.constant,
+.markdown-body .token.symbol,
+.markdown-body .token.deleted {
+  color: #b5cea8;
+}
+
+.markdown-body .token.selector,
+.markdown-body .token.attr-name,
+.markdown-body .token.string,
+.markdown-body .token.char,
+.markdown-body .token.builtin,
+.markdown-body .token.inserted {
+  color: #ce9178;
+}
+
+.markdown-body .token.operator,
+.markdown-body .token.entity,
+.markdown-body .token.url,
+.markdown-body .token.variable {
+  color: #d4d4d4;
+}
+
+.markdown-body .token.atrule,
+.markdown-body .token.attr-value,
+.markdown-body .token.function,
+.markdown-body .token.class-name {
+  color: #dcdcaa;
+}
+
+.markdown-body .token.keyword {
+  color: #569cd6;
+}
+
+.markdown-body .token.regex,
+.markdown-body .token.important {
+  color: #d16969;
+}
+
+.markdown-body .token.important,
+.markdown-body .token.bold {
+  font-weight: bold;
+}
+
+.markdown-body .token.italic {
+  font-style: italic;
+}
+
+/* 白色主题 PrismJS 代码高亮覆盖 */
+[data-theme="light"] .markdown-body pre[class*="language-"],
+[data-theme="light"] .markdown-body code[class*="language-"] {
+  color: #333;
+}
+
+[data-theme="light"] .markdown-body .token.comment,
+[data-theme="light"] .markdown-body .token.prolog,
+[data-theme="light"] .markdown-body .token.doctype,
+[data-theme="light"] .markdown-body .token.cdata {
+  color: #4a7c3f;
+}
+
+[data-theme="light"] .markdown-body .token.punctuation {
+  color: #555;
+}
+
+[data-theme="light"] .markdown-body .token.property,
+[data-theme="light"] .markdown-body .token.tag,
+[data-theme="light"] .markdown-body .token.boolean,
+[data-theme="light"] .markdown-body .token.number,
+[data-theme="light"] .markdown-body .token.constant,
+[data-theme="light"] .markdown-body .token.symbol,
+[data-theme="light"] .markdown-body .token.deleted {
+  color: #2e7d32;
+}
+
+[data-theme="light"] .markdown-body .token.selector,
+[data-theme="light"] .markdown-body .token.attr-name,
+[data-theme="light"] .markdown-body .token.string,
+[data-theme="light"] .markdown-body .token.char,
+[data-theme="light"] .markdown-body .token.builtin,
+[data-theme="light"] .markdown-body .token.inserted {
+  color: #a0522d;
+}
+
+[data-theme="light"] .markdown-body .token.operator,
+[data-theme="light"] .markdown-body .token.entity,
+[data-theme="light"] .markdown-body .token.url,
+[data-theme="light"] .markdown-body .token.variable {
+  color: #444;
+}
+
+[data-theme="light"] .markdown-body .token.atrule,
+[data-theme="light"] .markdown-body .token.attr-value,
+[data-theme="light"] .markdown-body .token.function,
+[data-theme="light"] .markdown-body .token.class-name {
+  color: #8b6914;
+}
+
+[data-theme="light"] .markdown-body .token.keyword {
+  color: #0066cc;
+}
+
+[data-theme="light"] .markdown-body .token.regex,
+[data-theme="light"] .markdown-body .token.important {
+  color: #c62828;
+}
+
+/* 纸黄主题 PrismJS 代码高亮覆盖 */
+[data-theme="paper"] .markdown-body pre[class*="language-"],
+[data-theme="paper"] .markdown-body code[class*="language-"] {
+  color: #3d3b36;
+}
+
+[data-theme="paper"] .markdown-body .token.comment,
+[data-theme="paper"] .markdown-body .token.prolog,
+[data-theme="paper"] .markdown-body .token.doctype,
+[data-theme="paper"] .markdown-body .token.cdata {
+  color: #4a7c3f;
+}
+
+[data-theme="paper"] .markdown-body .token.punctuation {
+  color: #5c5a55;
+}
+
+[data-theme="paper"] .markdown-body .token.property,
+[data-theme="paper"] .markdown-body .token.tag,
+[data-theme="paper"] .markdown-body .token.boolean,
+[data-theme="paper"] .markdown-body .token.number,
+[data-theme="paper"] .markdown-body .token.constant,
+[data-theme="paper"] .markdown-body .token.symbol,
+[data-theme="paper"] .markdown-body .token.deleted {
+  color: #2d6a3d;
+}
+
+[data-theme="paper"] .markdown-body .token.selector,
+[data-theme="paper"] .markdown-body .token.attr-name,
+[data-theme="paper"] .markdown-body .token.string,
+[data-theme="paper"] .markdown-body .token.char,
+[data-theme="paper"] .markdown-body .token.builtin,
+[data-theme="paper"] .markdown-body .token.inserted {
+  color: #8b4513;
+}
+
+[data-theme="paper"] .markdown-body .token.operator,
+[data-theme="paper"] .markdown-body .token.entity,
+[data-theme="paper"] .markdown-body .token.url,
+[data-theme="paper"] .markdown-body .token.variable {
+  color: #4a4840;
+}
+
+[data-theme="paper"] .markdown-body .token.atrule,
+[data-theme="paper"] .markdown-body .token.attr-value,
+[data-theme="paper"] .markdown-body .token.function,
+[data-theme="paper"] .markdown-body .token.class-name {
+  color: #7a6a2a;
+}
+
+[data-theme="paper"] .markdown-body .token.keyword {
+  color: #2d6a9f;
+}
+
+[data-theme="paper"] .markdown-body .token.regex,
+[data-theme="paper"] .markdown-body .token.important {
+  color: #8b2d2d;
+}

From 2b140013ab13bed0fba3b16882645895ed830c6c Mon Sep 17 00:00:00 2001
From: phantom5099 <1011668688@qq.com>
Date: Sun, 7 Jun 2026 20:17:42 +0800
Subject: [PATCH 3/7] Adjust font color

---
 packages/desktop/src/settings/HooksPanel.tsx  |  8 +--
 packages/desktop/src/settings/McpPanel.tsx    |  6 +--
 packages/desktop/src/settings/MemoryPanel.tsx |  4 +-
 .../desktop/src/settings/SubagentsPanel.tsx   |  8 +--
 packages/desktop/src/styles/index.css         | 50 +++++++++----------
 5 files changed, 38 insertions(+), 38 deletions(-)

diff --git a/packages/desktop/src/settings/HooksPanel.tsx b/packages/desktop/src/settings/HooksPanel.tsx
index 831ce93..4648899 100644
--- a/packages/desktop/src/settings/HooksPanel.tsx
+++ b/packages/desktop/src/settings/HooksPanel.tsx
@@ -203,7 +203,7 @@ export default function HooksPanel() {
   const labelCls = 'text-[12px] text-[var(--text-placeholder)] mb-1';
   const btnPrimary = 'px-4 py-2 rounded text-[13px] bg-[var(--btn-primary-bg)] text-[var(--accent-primary)] hover:bg-[var(--btn-primary-hover)]';
   const btnDanger = 'px-4 py-2 rounded text-[13px] bg-[var(--btn-danger-bg)] text-[var(--accent-danger)] hover:bg-[var(--btn-danger-hover)]';
-  const btnCancel = 'px-4 py-2 rounded text-[13px] bg-[var(--border-card)] text-[var(--text-tertiary)] hover:bg-[var(--border-hover)]';
+  const btnCancel = 'px-4 py-2 rounded text-[13px] bg-[var(--border-card)] text-[var(--text-tertiary)] border border-[var(--border-hover)] hover:bg-[var(--border-hover)] hover:border-[var(--border-strong)]';
 
   if (loading) {
     return <div className="px-6 py-8 text-[14px] text-[var(--text-disabled)]">加载中…</div>;
@@ -298,7 +298,7 @@ export default function HooksPanel() {
                       {h.point}
                     </span>
                     {!h.enabled && (
-                      <span className="text-[11px] px-2 py-0.5 rounded font-mono bg-[var(--border-card)] text-[var(--text-placeholder)]">
+                      <span className="text-[11px] px-2 py-0.5 rounded font-mono bg-[var(--tag-decision-bg)] text-[var(--tag-decision-text)]">
                         已禁用
                       </span>
                     )}
@@ -463,7 +463,7 @@ function FormCard({
               className={`px-3 py-1.5 rounded text-[13px] font-mono transition-colors ${
                 form.type === 'observer'
                   ? 'bg-[var(--btn-primary-bg)] text-[var(--accent-primary)]'
-                  : 'bg-[var(--border-card)] text-[var(--text-tertiary)]'
+                  : 'bg-[var(--border-card)] text-[var(--text-secondary)] border border-[var(--border-hover)]'
               }`}
             >
               observer
@@ -473,7 +473,7 @@ function FormCard({
               className={`px-3 py-1.5 rounded text-[13px] font-mono transition-colors ${
                 form.type === 'decision'
                   ? 'bg-[var(--btn-primary-bg)] text-[var(--accent-primary)]'
-                  : 'bg-[var(--border-card)] text-[var(--text-tertiary)]'
+                  : 'bg-[var(--border-card)] text-[var(--text-secondary)] border border-[var(--border-hover)]'
               }`}
             >
               decision
diff --git a/packages/desktop/src/settings/McpPanel.tsx b/packages/desktop/src/settings/McpPanel.tsx
index b02f36f..8c849c4 100644
--- a/packages/desktop/src/settings/McpPanel.tsx
+++ b/packages/desktop/src/settings/McpPanel.tsx
@@ -190,7 +190,7 @@ export default function McpPanel() {
   const labelCls = 'text-[12px] text-[var(--text-placeholder)] mb-1';
   const btnPrimary = 'px-4 py-2 rounded text-[13px] bg-[var(--btn-primary-bg)] text-[var(--accent-primary)] hover:bg-[var(--btn-primary-hover)]';
   const btnDanger = 'px-4 py-2 rounded text-[13px] bg-[var(--btn-danger-bg)] text-[var(--accent-danger)] hover:bg-[var(--btn-danger-hover)]';
-  const btnCancel = 'px-4 py-2 rounded text-[13px] bg-[var(--border-card)] text-[var(--text-tertiary)] hover:bg-[var(--border-hover)]';
+  const btnCancel = 'px-4 py-2 rounded text-[13px] bg-[var(--border-card)] text-[var(--text-tertiary)] border border-[var(--border-hover)] hover:bg-[var(--border-hover)] hover:border-[var(--border-strong)]';
 
   if (loading) {
     return <div className="px-6 py-8 text-[14px] text-[var(--text-disabled)]">加载中…</div>;
@@ -359,7 +359,7 @@ function FormCard({
             className={`px-3 py-1.5 rounded text-[13px] font-mono transition-colors ${
               form.transport === 'stdio'
                 ? 'bg-[var(--btn-primary-bg)] text-[var(--accent-primary)]'
-                : 'bg-[var(--border-card)] text-[var(--text-tertiary)]'
+                : 'bg-[var(--border-card)] text-[var(--text-secondary)] border border-[var(--border-hover)]'
             }`}
           >
             stdio
@@ -367,7 +367,7 @@ function FormCard({
           <button
             onClick={() => setForm({ ...form, transport: 'http' })}
             className={`px-3 py-1.5 rounded text-[13px] font-mono transition-colors ${
-              form.transport === 'http' ? 'bg-[var(--btn-primary-bg)] text-[var(--accent-primary)]' : 'bg-[var(--border-card)] text-[var(--text-tertiary)]'
+              form.transport === 'http' ? 'bg-[var(--btn-primary-bg)] text-[var(--accent-primary)]' : 'bg-[var(--border-card)] text-[var(--text-secondary)] border border-[var(--border-hover)]'
             }`}
           >
             http
diff --git a/packages/desktop/src/settings/MemoryPanel.tsx b/packages/desktop/src/settings/MemoryPanel.tsx
index 4d97fca..5442f68 100644
--- a/packages/desktop/src/settings/MemoryPanel.tsx
+++ b/packages/desktop/src/settings/MemoryPanel.tsx
@@ -114,7 +114,7 @@ export default function MemoryPanel() {
   const labelCls = 'text-[12px] text-[var(--text-placeholder)] mb-1';
   const btnPrimary = 'px-4 py-2 rounded text-[13px] bg-[var(--btn-primary-bg)] text-[var(--accent-primary)] hover:bg-[var(--btn-primary-hover)]';
   const btnDanger = 'px-4 py-2 rounded text-[13px] bg-[var(--btn-danger-bg)] text-[var(--accent-danger)] hover:bg-[var(--btn-danger-hover)]';
-  const btnCancel = 'px-4 py-2 rounded text-[13px] bg-[var(--border-card)] text-[var(--text-tertiary)] hover:bg-[var(--border-hover)]';
+  const btnCancel = 'px-4 py-2 rounded text-[13px] bg-[var(--border-card)] text-[var(--text-tertiary)] border border-[var(--border-hover)] hover:bg-[var(--border-hover)] hover:border-[var(--border-strong)]';
 
   if (loading) {
     return <div className="px-6 py-8 text-[14px] text-[var(--text-disabled)]">加载中…</div>;
@@ -248,7 +248,7 @@ export default function MemoryPanel() {
                     <div className="flex items-center gap-2 flex-wrap">
                       <span className="text-[14px] text-[var(--text-title)]">{t.name}</span>
                       {t.isBuiltIn && (
-                        <span className="text-[11px] px-2 py-0.5 rounded font-mono bg-[var(--border-card)] text-[var(--text-placeholder)]">
+                        <span className="text-[11px] px-2 py-0.5 rounded font-mono bg-[var(--tag-info-bg)] text-[var(--tag-info-text)]">
                           内置
                         </span>
                       )}
diff --git a/packages/desktop/src/settings/SubagentsPanel.tsx b/packages/desktop/src/settings/SubagentsPanel.tsx
index 1445d1b..53d1cc2 100644
--- a/packages/desktop/src/settings/SubagentsPanel.tsx
+++ b/packages/desktop/src/settings/SubagentsPanel.tsx
@@ -178,7 +178,7 @@ export default function SubagentsPanel() {
   const labelCls = 'text-[12px] text-[var(--text-placeholder)] mb-1';
   const btnPrimary = 'px-4 py-2 rounded text-[13px] bg-[var(--btn-primary-bg)] text-[var(--accent-primary)] hover:bg-[var(--btn-primary-hover)]';
   const btnDanger = 'px-4 py-2 rounded text-[13px] bg-[var(--btn-danger-bg)] text-[var(--accent-danger)] hover:bg-[var(--btn-danger-hover)]';
-  const btnCancel = 'px-4 py-2 rounded text-[13px] bg-[var(--border-card)] text-[var(--text-tertiary)] hover:bg-[var(--border-hover)]';
+  const btnCancel = 'px-4 py-2 rounded text-[13px] bg-[var(--border-card)] text-[var(--text-tertiary)] border border-[var(--border-hover)] hover:bg-[var(--border-hover)] hover:border-[var(--border-strong)]';
 
   if (loading) {
     return <div className="px-6 py-8 text-[14px] text-[var(--text-disabled)]">加载中…</div>;
@@ -283,7 +283,7 @@ export default function SubagentsPanel() {
                         </span>
                       )}
                       {isBuiltIn && (
-                        <span className="text-[11px] px-2 py-0.5 rounded font-mono bg-[var(--border-card)] text-[var(--text-placeholder)]">
+                        <span className="text-[11px] px-2 py-0.5 rounded font-mono bg-[var(--tag-info-bg)] text-[var(--tag-info-text)]">
                           内置
                         </span>
                       )}
@@ -294,7 +294,7 @@ export default function SubagentsPanel() {
                         {a.tools.map((t) => (
                           <span
                             key={t}
-                            className="text-[11px] px-1.5 py-0.5 rounded bg-[var(--border-default)] text-[var(--text-muted)] font-mono"
+                            className="text-[11px] px-1.5 py-0.5 rounded bg-[var(--tag-decision-bg)] text-[var(--tag-decision-text)] font-mono"
                           >
                             {t}
                           </span>
@@ -306,7 +306,7 @@ export default function SubagentsPanel() {
                         {a.mcpServers.map((s) => (
                           <span
                             key={s}
-                            className="text-[11px] px-1.5 py-0.5 rounded bg-[var(--tag-action-bg)] text-[var(--accent-success)] font-mono"
+                            className="text-[11px] px-1.5 py-0.5 rounded bg-[var(--tag-mcp-bg)] text-[var(--tag-mcp-text)] font-mono"
                           >
                             {s}
                           </span>
diff --git a/packages/desktop/src/styles/index.css b/packages/desktop/src/styles/index.css
index 9efdf9c..830e733 100644
--- a/packages/desktop/src/styles/index.css
+++ b/packages/desktop/src/styles/index.css
@@ -21,11 +21,11 @@
   /* 文字层级 */
   --text-primary: #ccc;
   --text-title: #ddd;
-  --text-secondary: #aaa;
-  --text-tertiary: #888;
-  --text-muted: #666;
-  --text-placeholder: #555;
-  --text-disabled: #444;
+  --text-secondary: #bbb;
+  --text-tertiary: #999;
+  --text-muted: #777;
+  --text-placeholder: #777;
+  --text-disabled: #666;
   --text-inverse: #111;
   --text-white: #fff;
 
@@ -67,14 +67,14 @@
   --diff-hunk-header: #888;
 
   /* 语义标签 */
-  --tag-decision-bg: #2a1a10;
-  --tag-decision-text: #ce9178;
-  --tag-action-bg: #1a2a1a;
-  --tag-action-text: #6a9955;
-  --tag-info-bg: #1a1a3a;
-  --tag-info-text: var(--accent-primary);
-  --tag-mcp-bg: #2a1a2a;
-  --tag-mcp-text: #c586c0;
+  --tag-decision-bg: #3a2010;
+  --tag-decision-text: #ff9f6b;
+  --tag-action-bg: #1a3a1a;
+  --tag-action-text: #7ee787;
+  --tag-info-bg: #1a2a4a;
+  --tag-info-text: #4fc3f7;
+  --tag-mcp-bg: #3a1a3a;
+  --tag-mcp-text: #f48fb1;
 
   /* 遮罩层 */
   --overlay-bg: rgba(0, 0, 0, 0.5);
@@ -108,8 +108,8 @@
   --text-secondary: #444;
   --text-tertiary: #666;
   --text-muted: #888;
-  --text-placeholder: #aaa;
-  --text-disabled: #bbb;
+  --text-placeholder: #888;
+  --text-disabled: #777;
   --text-inverse: #fff;
   --text-white: #fff;
 
@@ -149,13 +149,13 @@
 
   /* 语义标签 */
   --tag-decision-bg: #fff3e0;
-  --tag-decision-text: #e65100;
+  --tag-decision-text: #ea580c;
   --tag-action-bg: #e8f5e9;
-  --tag-action-text: #2e7d32;
+  --tag-action-text: #16a34a;
   --tag-info-bg: #e3f2fd;
-  --tag-info-text: var(--accent-primary);
+  --tag-info-text: #0284c7;
   --tag-mcp-bg: #f3e5f5;
-  --tag-mcp-text: #7b1fa2;
+  --tag-mcp-text: #9333ea;
 
   /* 遮罩层 */
   --overlay-bg: rgba(0, 0, 0, 0.35);
@@ -189,8 +189,8 @@
   --text-secondary: #4a4840;
   --text-tertiary: #5c5a55;
   --text-muted: #7a7872;
-  --text-placeholder: #999790;
-  --text-disabled: #b5b3ad;
+  --text-placeholder: #8a8880;
+  --text-disabled: #6a6860;
   --text-inverse: #fff;
   --text-white: #fff;
 
@@ -230,13 +230,13 @@
 
   /* 语义标签 */
   --tag-decision-bg: #f0e6d8;
-  --tag-decision-text: #8b4513;
+  --tag-decision-text: #c2410c;
   --tag-action-bg: #e0ece3;
-  --tag-action-text: #2d6a3d;
+  --tag-action-text: #15803d;
   --tag-info-bg: #d4e6f1;
-  --tag-info-text: var(--accent-primary);
+  --tag-info-text: #0369a1;
   --tag-mcp-bg: #e8dde8;
-  --tag-mcp-text: #6a1b6a;
+  --tag-mcp-text: #7c3aed;
 
   /* 遮罩层 */
   --overlay-bg: rgba(0, 0, 0, 0.35);

From bdad9fae6ce171d9f0e4fdd8cb1a9db23c2bbcf6 Mon Sep 17 00:00:00 2001
From: phantom5099 <1011668688@qq.com>
Date: Sun, 7 Jun 2026 20:34:12 +0800
Subject: [PATCH 4/7] =?UTF-8?q?=E8=B0=83=E6=95=B4=E6=B6=88=E6=81=AF?=
 =?UTF-8?q?=E9=97=B4=E8=B7=9D?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 packages/desktop/src/agent/MessageStream.tsx | 2 +-
 packages/desktop/src/shared/MessageItem.tsx  | 6 +++---
 2 files changed, 4 insertions(+), 4 deletions(-)

diff --git a/packages/desktop/src/agent/MessageStream.tsx b/packages/desktop/src/agent/MessageStream.tsx
index 88f2517..9d4097a 100644
--- a/packages/desktop/src/agent/MessageStream.tsx
+++ b/packages/desktop/src/agent/MessageStream.tsx
@@ -430,7 +430,7 @@ export default function MessageStream({ threadId }: MessageStreamProps) {
 
       return (
         <div>
-          <div className="px-6 py-0.5">
+          <div className="px-10 py-4">
             <MessageItem
               item={entry.item}
               threadId={threadId}
diff --git a/packages/desktop/src/shared/MessageItem.tsx b/packages/desktop/src/shared/MessageItem.tsx
index bf81210..bf9aba1 100644
--- a/packages/desktop/src/shared/MessageItem.tsx
+++ b/packages/desktop/src/shared/MessageItem.tsx
@@ -62,7 +62,7 @@ export default function MessageItem({
 
     if (isUser) {
       return (
-        <div className="flex justify-end mb-4">
+        <div className="flex justify-end mb-4 mt-4">
           <div className="relative max-w-[78%] px-4 py-3 rounded-2xl rounded-br-sm bg-[var(--border-card)] text-[var(--text-title)] text-[15px] leading-relaxed whitespace-pre-wrap break-words group">
             {content}
             {hasRollback && (
@@ -119,8 +119,8 @@ export default function MessageItem({
     }
 
     return (
-      <div className="flex justify-start mb-4">
-        <div className="max-w-[88%] text-[15px] text-[var(--text-primary)] leading-relaxed">
+      <div className="flex justify-start mb-4 pl-8">
+        <div className="max-w-[80%] text-[15px] text-[var(--text-primary)] leading-relaxed">
           {isAssistant && messageContent != null && (
             <MarkdownRenderer content={messageContent} />
           )}

From 1a93e1be3c212bbc71b151ec471b574c228b581a Mon Sep 17 00:00:00 2001
From: phantom5099 <1011668688@qq.com>
Date: Sun, 7 Jun 2026 20:46:30 +0800
Subject: [PATCH 5/7] Adjust message spacing

---
 packages/desktop/src/agent/MessageStream.tsx |  2 +-
 packages/desktop/src/shared/MessageItem.tsx  | 10 +++++-----
 packages/desktop/src/shared/ToolSummary.tsx  |  2 +-
 3 files changed, 7 insertions(+), 7 deletions(-)

diff --git a/packages/desktop/src/agent/MessageStream.tsx b/packages/desktop/src/agent/MessageStream.tsx
index 9d4097a..3d10c34 100644
--- a/packages/desktop/src/agent/MessageStream.tsx
+++ b/packages/desktop/src/agent/MessageStream.tsx
@@ -430,7 +430,7 @@ export default function MessageStream({ threadId }: MessageStreamProps) {
 
       return (
         <div>
-          <div className="px-10 py-4">
+          <div className="px-10 py-1">
             <MessageItem
               item={entry.item}
               threadId={threadId}
diff --git a/packages/desktop/src/shared/MessageItem.tsx b/packages/desktop/src/shared/MessageItem.tsx
index bf9aba1..fb5b3be 100644
--- a/packages/desktop/src/shared/MessageItem.tsx
+++ b/packages/desktop/src/shared/MessageItem.tsx
@@ -119,7 +119,7 @@ export default function MessageItem({
     }
 
     return (
-      <div className="flex justify-start mb-4 pl-8">
+      <div className="flex justify-start mb-1 pl-8">
         <div className="max-w-[80%] text-[15px] text-[var(--text-primary)] leading-relaxed">
           {isAssistant && messageContent != null && (
             <MarkdownRenderer content={messageContent} />
@@ -134,7 +134,7 @@ export default function MessageItem({
 
   if (item.type === 'reasoning') {
     return (
-      <div className="mb-3">
+      <div className="mb-1.5 pl-8">
         <button
           type="button"
           onClick={() => setReasoningOpen((v) => !v)}
@@ -162,7 +162,7 @@ export default function MessageItem({
       const cmd = typeof a.command === 'string' ? a.command : '';
       const label = path || cmd || item.name;
       return (
-        <div className="mb-2 flex items-center gap-1.5 text-[13px] text-[var(--text-tertiary)]">
+        <div className="mb-1 flex items-center gap-1.5 text-[13px] text-[var(--text-tertiary)] pl-8">
           <span className="font-mono text-[var(--text-primary)]">{label}</span>
           <span className="text-[var(--text-muted)]">等待审批</span>
         </div>
@@ -175,7 +175,7 @@ export default function MessageItem({
 
     const isRejected = item.status === 'rejected';
     return (
-      <div className="mb-2 flex items-center gap-1.5 text-[13px]">
+      <div className="mb-1 flex items-center gap-1.5 text-[13px] pl-8">
         <span className={`font-mono ${isRejected ? 'text-[var(--text-muted)] line-through' : 'text-[var(--text-primary)]'}`}>
           {item.name}
         </span>
@@ -195,7 +195,7 @@ export default function MessageItem({
 
   if (item.type === 'error') {
     return (
-      <div className="mb-3 px-4 py-3 rounded-lg bg-[var(--accent-danger-bg)] border border-[var(--accent-danger-border)] text-[var(--accent-danger)] text-[14px] leading-relaxed">
+      <div className="mb-1.5 px-4 py-3 pl-8 rounded-lg bg-[var(--accent-danger-bg)] border border-[var(--accent-danger-border)] text-[var(--accent-danger)] text-[14px] leading-relaxed">
         {item.message}
       </div>
     );
diff --git a/packages/desktop/src/shared/ToolSummary.tsx b/packages/desktop/src/shared/ToolSummary.tsx
index d07703d..5e484b3 100644
--- a/packages/desktop/src/shared/ToolSummary.tsx
+++ b/packages/desktop/src/shared/ToolSummary.tsx
@@ -106,7 +106,7 @@ export default function ToolSummary({ toolCall, toolResult }: ToolSummaryProps)
   const hasContent = !!(toolResult?.diff || toolResult?.output);
 
   return (
-    <div className="mb-3">
+    <div className="mb-1.5 pl-8">
       <button
         type="button"
         onClick={() => setOpen((v) => !v)}

From f8a89de183437c265848cb58471597826184cdb8 Mon Sep 17 00:00:00 2001
From: phantom5099 <1011668688@qq.com>
Date: Sun, 7 Jun 2026 23:10:51 +0800
Subject: [PATCH 6/7] =?UTF-8?q?=E6=9B=B4=E6=94=B9=E5=B7=A5=E5=85=B7?=
 =?UTF-8?q?=E5=B1=95=E5=BC=80=E6=A0=B7=E5=BC=8F?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 packages/desktop/src/shared/ToolSummary.tsx | 15 +++++++++------
 1 file changed, 9 insertions(+), 6 deletions(-)

diff --git a/packages/desktop/src/shared/ToolSummary.tsx b/packages/desktop/src/shared/ToolSummary.tsx
index 5e484b3..87666ae 100644
--- a/packages/desktop/src/shared/ToolSummary.tsx
+++ b/packages/desktop/src/shared/ToolSummary.tsx
@@ -1,4 +1,5 @@
 import { useState } from 'react';
+import { ChevronRight, ChevronDown } from 'lucide-react';
 import type { Item } from '@shared/types';
 import CodeBlock from './CodeBlock';
 import DiffBlock from './DiffBlock';
@@ -106,15 +107,17 @@ export default function ToolSummary({ toolCall, toolResult }: ToolSummaryProps)
   const hasContent = !!(toolResult?.diff || toolResult?.output);
 
   return (
-    <div className="mb-1.5 pl-8">
+    <div className="pb-1.5 pl-8">
       <button
         type="button"
         onClick={() => setOpen((v) => !v)}
-        className="flex items-center gap-1.5 text-[13px] hover:opacity-80 transition-opacity"
+        className="flex items-center gap-2 px-2.5 py-1 rounded-md bg-[var(--border-card)] hover:bg-[var(--border-hover)] transition-colors text-[13px]"
       >
-        <span className={`transition-transform text-[10px] text-[var(--text-muted)] ${open ? 'rotate-90' : ''}`}>
-          ▶
-        </span>
+        {open ? (
+          <ChevronDown className={`w-3.5 h-3.5 ${titleColor}`} />
+        ) : (
+          <ChevronRight className={`w-3.5 h-3.5 ${titleColor}`} />
+        )}
         <span className={`font-mono ${titleColor}`}>{title}</span>
         {isFileTool && toolResult && (toolResult.insertions || toolResult.deletions) && (
           <span className="text-[var(--text-muted)] text-xs">
@@ -124,7 +127,7 @@ export default function ToolSummary({ toolCall, toolResult }: ToolSummaryProps)
         )}
       </button>
       {open && hasContent && (
-        <div className="mt-1.5">
+        <div className="pt-1.5">
           {isFileTool && toolResult?.diff ? (
             <DiffBlock diff={toolResult.diff} />
           ) : toolResult?.output ? (

From fc0e72cee19e341b904365289708a9ea60ac62ba Mon Sep 17 00:00:00 2001
From: phantom5099 <1011668688@qq.com>
Date: Mon, 8 Jun 2026 00:18:43 +0800
Subject: [PATCH 7/7] Fix the bug where switching sessions defaults to
 displaying the topmost item

---
 packages/desktop/package.json                 |   2 +-
 packages/desktop/src/agent/AgentWorkspace.tsx |   7 +-
 packages/desktop/src/agent/MessageStream.tsx  | 233 ++++++++----------
 packages/desktop/src/shared/MessageItem.tsx   |   8 +-
 packages/desktop/src/shared/ToolSummary.tsx   |  29 ++-
 packages/desktop/src/stores/global.store.ts   |  16 +-
 pnpm-lock.yaml                                |  34 +--
 7 files changed, 157 insertions(+), 172 deletions(-)

diff --git a/packages/desktop/package.json b/packages/desktop/package.json
index 2fa9f39..7d0e9ba 100644
--- a/packages/desktop/package.json
+++ b/packages/desktop/package.json
@@ -20,7 +20,7 @@
     "react-dom": "^19.1.0",
     "react-markdown": "^10.1.0",
     "react-resizable-panels": "^2.1.7",
-    "react-virtuoso": "^4.12.6",
+    "@tanstack/react-virtual": "^3.12.6",
     "rehype-raw": "^7.0.0",
     "remark-gfm": "^4.0.1",
     "simple-git": "^3.27.0",
diff --git a/packages/desktop/src/agent/AgentWorkspace.tsx b/packages/desktop/src/agent/AgentWorkspace.tsx
index 0355c5a..986a453 100644
--- a/packages/desktop/src/agent/AgentWorkspace.tsx
+++ b/packages/desktop/src/agent/AgentWorkspace.tsx
@@ -26,6 +26,7 @@ function ContextIndicator({ threadId }: { threadId: string }) {
       <button
         type="button"
         disabled
+        aria-label="正在压缩上下文"
         className="w-5 h-5 flex items-center justify-center animate-pulse cursor-default"
       >
         <svg width="18" height="18" viewBox="0 0 18 18">
@@ -283,6 +284,8 @@ function InputBox({
             <button
               type="button"
               onClick={() => abort()}
+              aria-label="停止生成"
+              title="停止生成"
               className="w-9 h-9 shrink-0 flex items-center justify-center bg-[var(--border-hover)] hover:bg-[var(--border-strong)] text-[var(--text-primary)] rounded-full transition-colors"
             >
               <Square size={14} strokeWidth={2} fill="currentColor" />
@@ -292,6 +295,8 @@ function InputBox({
               type="button"
               onClick={handleSend}
               disabled={!text.trim()}
+              aria-label="发送消息"
+              title="发送消息"
               className="w-9 h-9 shrink-0 flex items-center justify-center bg-[var(--btn-send-bg)] disabled:bg-[var(--bg-card)] disabled:text-[var(--text-disabled)] text-[var(--text-inverse)] rounded-full transition-colors"
             >
               <Send size={18} strokeWidth={2} />
@@ -365,7 +370,7 @@ export default function AgentWorkspace({ sendMessage, abort }: AgentWorkspacePro
 
   return (
     <div className="flex-1 flex flex-col overflow-hidden bg-[var(--bg-panel)]">
-      <MessageStream key={currentThreadId} threadId={currentThreadId} />
+      <MessageStream threadId={currentThreadId} />
       <ApprovalPanel threadId={currentThreadId} />
       <TodoPanel threadId={currentThreadId} />
       {isCompressing && (
diff --git a/packages/desktop/src/agent/MessageStream.tsx b/packages/desktop/src/agent/MessageStream.tsx
index 3d10c34..a8fe4e2 100644
--- a/packages/desktop/src/agent/MessageStream.tsx
+++ b/packages/desktop/src/agent/MessageStream.tsx
@@ -1,5 +1,5 @@
 import { useEffect, useRef, useState, useCallback, useMemo } from 'react';
-import { Virtuoso, type VirtuosoHandle } from 'react-virtuoso';
+import { useVirtualizer } from '@tanstack/react-virtual';
 import { useGlobalStore } from '../stores/global.store';
 import MessageItem from '../shared/MessageItem';
 import UnifiedDiffView from '../shared/UnifiedDiffView';
@@ -11,17 +11,12 @@ interface MessageStreamProps {
   threadId: string;
 }
 
-// ---- Top-level TurnDiffPanel (avoids unmount/remount on parent re-render) ----
-
 const EMPTY_MAPPING: Record<number, string> = {};
 
 interface TurnDiffPanelProps {
   uiTurnId: string;
   isInterrupted?: boolean;
   threadId: string;
-  checkpointDiffs: Record<string, CheckpointDiff>;
-  turnCheckpointMapping: Record<number, string>;
-  revertedFilesByTurnId: Record<string, string[]>;
   onRevertFile: (uiTurnId: string, file: string, isReverted: boolean) => void;
   onRevertScope: (uiTurnId: string, scope: 'agent' | 'all', isReverted: boolean) => void;
 }
@@ -55,12 +50,23 @@ function TurnDiffPanel({
   uiTurnId,
   isInterrupted,
   threadId,
-  checkpointDiffs,
-  turnCheckpointMapping,
-  revertedFilesByTurnId,
   onRevertFile,
   onRevertScope,
 }: TurnDiffPanelProps) {
+  const rawCheckpointDiffByTurnId = useGlobalStore((s) => s.rollback.checkpointDiffByTurnId);
+  const rawTurnCheckpointMapping = useGlobalStore((s) => s.rollback.turnCheckpointMapping);
+  const revertedFilesByTurnId = useGlobalStore((s) => s.rollback.revertedFilesByTurnId);
+
+  const checkpointDiffs = useMemo(() => {
+    const prefix = `${threadId}:`;
+    const result: Record<string, CheckpointDiff> = {};
+    for (const [k, v] of Object.entries(rawCheckpointDiffByTurnId)) {
+      if (k.startsWith(prefix)) result[k] = v;
+    }
+    return result;
+  }, [threadId, rawCheckpointDiffByTurnId]);
+
+  const turnCheckpointMapping = rawTurnCheckpointMapping[threadId] ?? EMPTY_MAPPING;
   const ckKey = getCheckpointKey(threadId, uiTurnId, checkpointDiffs, turnCheckpointMapping);
   const diff = ckKey ? checkpointDiffs[ckKey] : null;
   const revertedFiles = revertedFilesByTurnId[`${threadId}:${uiTurnId}`] ?? [];
@@ -77,7 +83,6 @@ function TurnDiffPanel({
 
   return (
     <div className="mt-2 rounded-lg bg-[var(--bg-card)] border border-[var(--border-card)] overflow-hidden">
-      {/* Header */}
       <div className="flex items-center justify-between px-4 py-3">
         <div className="flex items-center gap-3">
           <div className="w-7 h-7 rounded bg-[var(--bg-hover)] flex items-center justify-center">
@@ -127,8 +132,6 @@ function TurnDiffPanel({
           </button>
         </div>
       </div>
-
-      {/* File list */}
       <div className="border-t border-[var(--border-card)]">
         {diff.files.map((f: any) => {
           const isExpanded = expandedFile === f.path;
@@ -198,10 +201,7 @@ function TurnDiffPanel({
   );
 }
 
-// ---- Main component ----
-
 export default function MessageStream({ threadId }: MessageStreamProps) {
-  // Fine-grained subscriptions: only subscribe to what we actually use
   const turns = useGlobalStore((s) => s.agent.threads[threadId]?.turns ?? []);
   const setCurrentThread = useGlobalStore((s) => s.setCurrentThread);
   const { approveTool, rejectTool } = useAgentApproval();
@@ -211,41 +211,22 @@ export default function MessageStream({ threadId }: MessageStreamProps) {
     revertAgentFiles,
     revertAllFiles,
     previewRollback,
-    rollbackCode,
     rollbackCtx,
     rollbackBoth,
     undoCodeRollback,
     forkThread,
     revertedFilesByTurnId,
   } = useAgentRollback();
-  const virtuosoRef = useRef<VirtuosoHandle>(null);
-
-  // Subscribe to raw store data (stable references), derive with useMemo below
-  const rawCheckpointDiffByTurnId = useGlobalStore((s) => s.rollback.checkpointDiffByTurnId);
-  const rawTurnCheckpointMapping = useGlobalStore((s) => s.rollback.turnCheckpointMapping);
+  const parentRef = useRef<HTMLDivElement>(null);
   const markScopeRestored = useGlobalStore((s) => s.markScopeRestored);
   const markFileRestored = useGlobalStore((s) => s.markFileRestored);
   const setPendingInput = useGlobalStore((s) => s.setPendingInput);
 
-  // Derive thread-scoped data with useMemo for stable references
-  const checkpointDiffs = useMemo(() => {
-    const prefix = `${threadId}:`;
-    const result: Record<string, CheckpointDiff> = {};
-    for (const [k, v] of Object.entries(rawCheckpointDiffByTurnId)) {
-      if (k.startsWith(prefix)) result[k] = v;
-    }
-    return result;
-  }, [threadId, rawCheckpointDiffByTurnId]);
-
-  const turnCheckpointMapping = rawTurnCheckpointMapping[threadId] ?? EMPTY_MAPPING;
-
-  // Rollback modal state
   const [showRollbackPanel, setShowRollbackPanel] = useState<{
     turnId: string;
     preview: any;
   } | null>(null);
 
-  // ---- Structure signature: only changes when turns structure changes (not content) ----
   const turnsStructureKey = useMemo(
     () =>
       turns
@@ -257,14 +238,12 @@ export default function MessageStream({ threadId }: MessageStreamProps) {
     [turns]
   );
 
-  // ---- Memoized rendering data ----
-  // Depends on turnsStructureKey instead of thread, so content updates don't trigger rebuild
-
   const { renderEntries, callIdToToolName, entryCountByTurnId, turnById } = useMemo(() => {
     const entries: Array<{
       item: Item;
       turnId: string;
       toolResult?: Item & { type: 'tool_result' };
+      key: string;
     }> = [];
     const toolResultByCallId: Record<string, Item & { type: 'tool_result' }> = {};
     const nameMap: Record<string, string> = {};
@@ -285,9 +264,9 @@ export default function MessageStream({ threadId }: MessageStreamProps) {
       for (const item of turn.items) {
         if (item.type === 'tool_result') continue;
         if (item.type === 'tool_call') {
-          entries.push({ item, turnId: turn.id, toolResult: toolResultByCallId[item.id] });
+          entries.push({ item, turnId: turn.id, toolResult: toolResultByCallId[item.id], key: item.id });
         } else {
-          entries.push({ item, turnId: turn.id });
+          entries.push({ item, turnId: turn.id, key: item.id });
         }
         countMap.set(turn.id, (countMap.get(turn.id) ?? 0) + 1);
       }
@@ -345,7 +324,7 @@ export default function MessageStream({ threadId }: MessageStreamProps) {
     }
     return { turnEndIndices: endIndices, turnRollbackCallbacks: rollbackCbs };
   }, [
-    turns,
+    turnsStructureKey,
     entryCountByTurnId,
     threadId,
     previewRollback,
@@ -354,12 +333,19 @@ export default function MessageStream({ threadId }: MessageStreamProps) {
     setPendingInput,
   ]);
 
-  const totalCount = renderEntries.length;
+  const virtualizer = useVirtualizer({
+    count: renderEntries.length,
+    getScrollElement: () => parentRef.current,
+    estimateSize: () => 60,
+    getItemKey: (index: number) => renderEntries[index]?.key ?? `empty-${index}`,
+    overscan: 5,
+    anchorTo: 'end',
+    followOnAppend: 'smooth',
+    scrollEndThreshold: 80,
+  });
 
-  // Memoized turnStatusKey for auto-load diff effect
   const turnStatusKey = useMemo(() => turns.map((t) => `${t.id}:${t.status}`).join(','), [turns]);
 
-  // Auto-load diff when a turn completes or errors
   const handleLoadDiff = useCallback(
     async (uiTurnId: string) => {
       const diff = await loadCheckpointDiff(threadId);
@@ -377,14 +363,17 @@ export default function MessageStream({ threadId }: MessageStreamProps) {
   useEffect(() => {
     for (const turn of turns) {
       if (turn.status !== 'completed' && turn.status !== 'error') continue;
-      const ckKey = getCheckpointKey(threadId, turn.id, checkpointDiffs, turnCheckpointMapping);
-      if (!ckKey || !checkpointDiffs[ckKey]) {
+      const ckKey = getCheckpointKey(
+        threadId,
+        turn.id,
+        useGlobalStore.getState().rollback.checkpointDiffByTurnId,
+        useGlobalStore.getState().rollback.turnCheckpointMapping[threadId] ?? EMPTY_MAPPING
+      );
+      if (!ckKey) {
         handleLoadDiff(turn.id);
       }
     }
-  }, [turnStatusKey]);
-
-  // ---- Handlers ----
+  }, [turnStatusKey, threadId, handleLoadDiff]);
 
   const handleRevertFile = useCallback(
     async (uiTurnId: string, file: string, isReverted: boolean) => {
@@ -416,76 +405,6 @@ export default function MessageStream({ threadId }: MessageStreamProps) {
     [threadId, revertAgentFiles, revertAllFiles, undoCodeRollback, markScopeRestored]
   );
 
-  // ---- Render single item (with optional turn-end diff panel) ----
-
-  const renderItem = useCallback(
-    (index: number) => {
-      const entry = renderEntries[index];
-      if (!entry) return null;
-      const isLastInTurn = turnEndIndices.has(index);
-      const cbs = turnRollbackCallbacks.get(entry.turnId);
-      const isUserMsg = entry.item.type === 'message' && entry.item.role === 'user';
-      const turn = turnById.get(entry.turnId);
-      const isInterrupted = turn?.status === 'error';
-
-      return (
-        <div>
-          <div className="px-10 py-1">
-            <MessageItem
-              item={entry.item}
-              threadId={threadId}
-              onApprove={approveTool}
-              onReject={rejectTool}
-              callIdToToolName={callIdToToolName}
-              onRollbackHere={isUserMsg && cbs ? cbs.onRollbackHere : undefined}
-              onForkFromHere={isUserMsg && cbs ? cbs.onForkFromHere : undefined}
-              toolResult={entry.toolResult}
-            />
-          </div>
-          {isLastInTurn && (
-            <div className="px-6 pb-2">
-              <TurnDiffPanel
-                uiTurnId={entry.turnId}
-                isInterrupted={isInterrupted}
-                threadId={threadId}
-                checkpointDiffs={checkpointDiffs}
-                turnCheckpointMapping={turnCheckpointMapping}
-                revertedFilesByTurnId={revertedFilesByTurnId}
-                onRevertFile={handleRevertFile}
-                onRevertScope={handleRevertScope}
-              />
-            </div>
-          )}
-        </div>
-      );
-    },
-    [
-      renderEntries,
-      turnEndIndices,
-      turnRollbackCallbacks,
-      turnById,
-      threadId,
-      approveTool,
-      rejectTool,
-      callIdToToolName,
-      checkpointDiffs,
-      turnCheckpointMapping,
-      revertedFilesByTurnId,
-      handleRevertFile,
-      handleRevertScope,
-    ]
-  );
-
-  // ---- Empty state ----
-
-  if (turns.length === 0 || renderEntries.length === 0) {
-    return (
-      <div className="flex-1 flex items-center justify-center text-[var(--text-placeholder)] text-[15px]">
-        发送消息开始对话
-      </div>
-    );
-  }
-
   const rollbackModal = showRollbackPanel && (
     <div className="fixed inset-0 bg-[var(--overlay-bg)] flex items-center justify-center z-50">
       <div className="bg-[var(--bg-panel)] border border-[var(--border-strong)] rounded-lg p-6 max-w-2xl w-full mx-4 max-h-[80vh] overflow-y-auto">
@@ -530,18 +449,76 @@ export default function MessageStream({ threadId }: MessageStreamProps) {
     </div>
   );
 
-  // ---- Unified Virtuoso path ----
-
   return (
     <div className="flex-1 flex flex-col min-h-0">
-      <Virtuoso
-        ref={virtuosoRef}
+      <div
+        ref={parentRef}
         className="flex-1 select-text"
-        totalCount={totalCount}
-        itemContent={renderItem}
-        followOutput={(isAtBottom: boolean) => (isAtBottom ? 'smooth' : false)}
-        style={{ flex: 1 }}
-      />
+        style={{ overflowY: 'auto', contain: 'strict', overflowAnchor: 'none' }}
+      >
+        {renderEntries.length === 0 ? (
+          <div className="flex items-center justify-center h-full text-[var(--text-placeholder)] text-[15px]">
+            发送消息开始对话
+          </div>
+        ) : (
+          <div
+            style={{
+              height: virtualizer.getTotalSize(),
+              width: '100%',
+              position: 'relative',
+            }}
+          >
+            {virtualizer.getVirtualItems().map((virtualRow) => {
+              const entry = renderEntries[virtualRow.index];
+              if (!entry) return null;
+              const isLastInTurn = turnEndIndices.has(virtualRow.index);
+              const cbs = turnRollbackCallbacks.get(entry.turnId);
+              const isUserMsg = entry.item.type === 'message' && entry.item.role === 'user';
+              const turn = turnById.get(entry.turnId);
+              const isInterrupted = turn?.status === 'error';
+
+              return (
+                <div
+                  key={virtualRow.key}
+                  data-index={virtualRow.index}
+                  ref={virtualizer.measureElement}
+                  style={{
+                    position: 'absolute',
+                    top: 0,
+                    left: 0,
+                    width: '100%',
+                    transform: `translateY(${virtualRow.start}px)`,
+                  }}
+                >
+                  <div className="px-10 py-1">
+                    <MessageItem
+                      item={entry.item}
+                      threadId={threadId}
+                      onApprove={approveTool}
+                      onReject={rejectTool}
+                      callIdToToolName={callIdToToolName}
+                      onRollbackHere={isUserMsg && cbs ? cbs.onRollbackHere : undefined}
+                      onForkFromHere={isUserMsg && cbs ? cbs.onForkFromHere : undefined}
+                      toolResult={entry.toolResult}
+                    />
+                  </div>
+                  {isLastInTurn && (
+                    <div className="px-6 pb-2">
+                      <TurnDiffPanel
+                        uiTurnId={entry.turnId}
+                        isInterrupted={isInterrupted}
+                        threadId={threadId}
+                        onRevertFile={handleRevertFile}
+                        onRevertScope={handleRevertScope}
+                      />
+                    </div>
+                  )}
+                </div>
+              );
+            })}
+          </div>
+        )}
+      </div>
       {rollbackModal}
     </div>
   );
diff --git a/packages/desktop/src/shared/MessageItem.tsx b/packages/desktop/src/shared/MessageItem.tsx
index fb5b3be..3821cb7 100644
--- a/packages/desktop/src/shared/MessageItem.tsx
+++ b/packages/desktop/src/shared/MessageItem.tsx
@@ -1,4 +1,4 @@
-import { useState, useRef, useLayoutEffect } from 'react';
+import { useState, useRef, useLayoutEffect, memo } from 'react';
 import type { Item } from '@shared/types';
 import ToolCallCard from './ToolCallCard';
 import DiffBlock from './DiffBlock';
@@ -18,7 +18,7 @@ interface MessageItemProps {
 
 
 
-export default function MessageItem({
+const MessageItem = memo(function MessageItem({
   item,
   threadId,
   onApprove,
@@ -202,4 +202,6 @@ export default function MessageItem({
   }
 
   return null;
-}
+});
+
+export default MessageItem;
diff --git a/packages/desktop/src/shared/ToolSummary.tsx b/packages/desktop/src/shared/ToolSummary.tsx
index 87666ae..94f1dcf 100644
--- a/packages/desktop/src/shared/ToolSummary.tsx
+++ b/packages/desktop/src/shared/ToolSummary.tsx
@@ -1,6 +1,7 @@
-import { useState } from 'react';
+import { useState, useMemo } from 'react';
 import { ChevronRight, ChevronDown } from 'lucide-react';
 import type { Item } from '@shared/types';
+import { buildToolDiff } from '../lib/diff-compute';
 import CodeBlock from './CodeBlock';
 import DiffBlock from './DiffBlock';
 
@@ -96,7 +97,15 @@ export function buildToolSummaryTitle(
 export default function ToolSummary({ toolCall, toolResult }: ToolSummaryProps) {
   const [open, setOpen] = useState(false);
   const isFileTool = toolCall.name === 'write_file' || toolCall.name === 'edit_file';
-  const { title, isError, isRejected } = buildToolSummaryTitle(toolCall, toolResult);
+
+  const computedResult = useMemo(() => {
+    if (!toolResult || !isFileTool) return toolResult;
+    if ((toolResult as any).diff) return toolResult;
+    return buildToolDiff(toolResult as any, toolCall as any) as any;
+  }, [toolResult, toolCall, isFileTool]);
+
+  const effectiveResult = computedResult ?? toolResult;
+  const { title, isError, isRejected } = buildToolSummaryTitle(toolCall, effectiveResult);
 
   const titleColor = isRejected
     ? 'text-[var(--text-muted)] line-through'
@@ -104,7 +113,7 @@ export default function ToolSummary({ toolCall, toolResult }: ToolSummaryProps)
       ? 'text-[var(--accent-danger)]'
       : 'text-[var(--syntax-function)]';
 
-  const hasContent = !!(toolResult?.diff || toolResult?.output);
+  const hasContent = !!(effectiveResult?.diff || effectiveResult?.output);
 
   return (
     <div className="pb-1.5 pl-8">
@@ -119,19 +128,19 @@ export default function ToolSummary({ toolCall, toolResult }: ToolSummaryProps)
           <ChevronRight className={`w-3.5 h-3.5 ${titleColor}`} />
         )}
         <span className={`font-mono ${titleColor}`}>{title}</span>
-        {isFileTool && toolResult && (toolResult.insertions || toolResult.deletions) && (
+        {isFileTool && effectiveResult && (effectiveResult.insertions || effectiveResult.deletions) && (
           <span className="text-[var(--text-muted)] text-xs">
-            {toolResult.insertions ? `+${toolResult.insertions}` : ''}
-            {toolResult.deletions ? ` -${toolResult.deletions}` : ''}
+            {effectiveResult.insertions ? `+${effectiveResult.insertions}` : ''}
+            {effectiveResult.deletions ? ` -${effectiveResult.deletions}` : ''}
           </span>
         )}
       </button>
       {open && hasContent && (
         <div className="pt-1.5">
-          {isFileTool && toolResult?.diff ? (
-            <DiffBlock diff={toolResult.diff} />
-          ) : toolResult?.output ? (
-            <CodeBlock code={toolResult.output.slice(0, 4000)} />
+          {isFileTool && effectiveResult?.diff ? (
+            <DiffBlock diff={effectiveResult.diff} />
+          ) : effectiveResult?.output ? (
+            <CodeBlock code={effectiveResult.output.slice(0, 4000)} />
           ) : null}
         </div>
       )}
diff --git a/packages/desktop/src/stores/global.store.ts b/packages/desktop/src/stores/global.store.ts
index bb0b188..b3f9597 100644
--- a/packages/desktop/src/stores/global.store.ts
+++ b/packages/desktop/src/stores/global.store.ts
@@ -19,18 +19,7 @@ function normalizeCwd(p: string): string {
   return p.replace(/\\/g, '/').replace(/^([A-Z]):/, (_, l: string) => `${l.toLowerCase()}:`);
 }
 
-export function enrichTurnDiffs(turn: Turn): void {
-  for (let i = 0; i < turn.items.length; i++) {
-    const item = turn.items[i]!;
-    if (item.type !== 'tool_result') continue;
-    if ((item as any).diff) continue; // already computed by applyChunk
-    const callItem = turn.items.find(
-      (j) => j.type === 'tool_call' && j.id === (item as any).callId
-    ) as any;
-    if (!callItem) continue;
-    turn.items[i] = buildToolDiff(item as any, callItem) as any;
-  }
-}
+
 
 export interface ModelEntry {
   id: string;
@@ -377,7 +366,6 @@ export const useGlobalStore = create<GlobalState & GlobalActions>()(
         set((s) => {
           const thread = s.agent.threads[threadId];
           if (thread) {
-            for (const turn of turns) enrichTurnDiffs(turn);
             s.agent.threads[threadId] = { ...thread, turns };
           }
         }),
@@ -418,8 +406,6 @@ export const useGlobalStore = create<GlobalState & GlobalActions>()(
           const next: Record<string, Thread> = {};
           for (const t of threads) {
             const existing = s.agent.threads[t.id];
-            const targetTurns = existing ? existing.turns : t.turns;
-            for (const turn of targetTurns) enrichTurnDiffs(turn);
             next[t.id] = existing ? { ...t, turns: existing.turns } : t;
           }
           for (const [id, thread] of Object.entries(s.agent.threads)) {
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index 822d79d..92f37b2 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -128,6 +128,9 @@ importers:
       '@codingcode/core':
         specifier: workspace:*
         version: link:../codingcode
+      '@tanstack/react-virtual':
+        specifier: ^3.12.6
+        version: 3.14.2(react-dom@19.2.7(react@19.2.7))(react@19.2.7)
       immer:
         specifier: ^10.1.1
         version: 10.1.1
@@ -149,9 +152,6 @@ importers:
       react-resizable-panels:
         specifier: ^2.1.7
         version: 2.1.7(react-dom@19.2.7(react@19.2.7))(react@19.2.7)
-      react-virtuoso:
-        specifier: ^4.12.6
-        version: 4.18.7(react-dom@19.2.7(react@19.2.7))(react@19.2.7)
       rehype-raw:
         specifier: ^7.0.0
         version: 7.0.0
@@ -1275,6 +1275,15 @@ packages:
     peerDependencies:
       vite: ^5.2.0 || ^6 || ^7 || ^8
 
+  '@tanstack/react-virtual@3.14.2':
+    resolution: {integrity: sha512-IpWnmCLvuymRfeeLNVXIzNEYBFLpd3drVIS91sqV78VTZFyldlChkOocZRCPp1B+Wnk09bcLNme8WaMU/9/9bQ==}
+    peerDependencies:
+      react: ^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0
+      react-dom: ^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0
+
+  '@tanstack/virtual-core@3.17.0':
+    resolution: {integrity: sha512-gOxY/hFkPh/XQYhnThBHzkbkX3Ed+z/iushyz+R+JAr213aXxUDgQoTgTdrDpBSRsjFM73P/KfUyWmaF9WHMkQ==}
+
   '@tootallnate/once@2.0.1':
     resolution: {integrity: sha512-HqmEUIGRJ5fSXchkVgR5F7qn48bDBzv0kWj/Kfu5e6uci4UlEeng4331LnBkWffb++Ei3FOVLxo8JJWMFBDMeQ==}
     engines: {node: '>= 10'}
@@ -3528,12 +3537,6 @@ packages:
       react: ^16.14.0 || ^17.0.0 || ^18.0.0 || ^19.0.0 || ^19.0.0-rc
       react-dom: ^16.14.0 || ^17.0.0 || ^18.0.0 || ^19.0.0 || ^19.0.0-rc
 
-  react-virtuoso@4.18.7:
-    resolution: {integrity: sha512-xNF5zDGEEIMB7cKwcen/pLig0YDf6OnfFrVgKFa7sHPf9fRem0CaLshyObbBcP88jzn0enavL39EgplgdyT21g==}
-    peerDependencies:
-      react: '>=16 || >=17 || >= 18 || >= 19'
-      react-dom: '>=16 || >=17 || >= 18 || >=19'
-
   react@19.2.7:
     resolution: {integrity: sha512-HNe9WslTbXmFK8o8cmwgAeJFSBvt1bPdHCVKtaaV+WlAN36mpT4hcRpwbf3fY56ar2oIXzsBpOAiIRHAdY0OlQ==}
     engines: {node: '>=0.10.0'}
@@ -5072,6 +5075,14 @@ snapshots:
       tailwindcss: 4.3.0
       vite: 6.4.3(@types/node@22.19.19)(jiti@2.7.0)(lightningcss@1.32.0)(tsx@4.22.4)(yaml@2.9.0)
 
+  '@tanstack/react-virtual@3.14.2(react-dom@19.2.7(react@19.2.7))(react@19.2.7)':
+    dependencies:
+      '@tanstack/virtual-core': 3.17.0
+      react: 19.2.7
+      react-dom: 19.2.7(react@19.2.7)
+
+  '@tanstack/virtual-core@3.17.0': {}
+
   '@tootallnate/once@2.0.1': {}
 
   '@types/babel__core@7.20.5':
@@ -7853,11 +7864,6 @@ snapshots:
       react: 19.2.7
       react-dom: 19.2.7(react@19.2.7)
 
-  react-virtuoso@4.18.7(react-dom@19.2.7(react@19.2.7))(react@19.2.7):
-    dependencies:
-      react: 19.2.7
-      react-dom: 19.2.7(react@19.2.7)
-
   react@19.2.7: {}
 
   read-binary-file-arch@1.0.6: