diff --git a/Makefile b/Makefile
index d616ba3..d7ebe96 100644
--- a/Makefile
+++ b/Makefile
@@ -1,7 +1,7 @@
 # ZCLAW Makefile
 # Cross-platform task runner
 
-.PHONY: help start start-dev start-no-browser start-no-gateway desktop desktop-build setup test clean
+.PHONY: help start start-dev start-no-browser desktop desktop-build setup test clean
 
 help: ## Show this help message
 	@echo "ZCLAW - OpenFang Desktop Client"
@@ -13,16 +13,16 @@ help: ## Show this help message
 # === Startup Commands ===
 
 start: ## Start all services (Windows: PowerShell)
-	@pwsh -File ./start.ps1
+	@powershell -ExecutionPolicy Bypass -File ./start-all.ps1
 
 start-dev: ## Start all services in dev mode
-	@pwsh -File ./start.ps1 -Dev
+	@powershell -ExecutionPolicy Bypass -File ./start-all.ps1 -Dev
 
 start-no-browser: ## Start without ChromeDriver
-	@pwsh -File ./start.ps1 -NoBrowser
+	@powershell -ExecutionPolicy Bypass -File ./start-all.ps1 -NoBrowser
 
-start-no-gateway: ## Start without OpenFang gateway
-	@pwsh -File ./start.ps1 -NoGateway
+start-desktop-only: ## Start desktop only (no external services)
+	@powershell -ExecutionPolicy Bypass -File ./start-all.ps1 -DesktopOnly
 
 start-unix: ## Start all services (Unix: macOS/Linux)
 	@chmod +x ./start.sh && ./start.sh
@@ -54,12 +54,6 @@ typecheck: ## Run TypeScript type check
 
 # === Services ===
 
-gateway: ## Start OpenFang gateway
-	@openfang gateway start
-
-gateway-status: ## Check gateway status
-	@openfang gateway status
-
 chromedriver: ## Start ChromeDriver on port 4444
 	@chromedriver --port=4444
 
diff --git a/desktop/pnpm-lock.yaml b/desktop/pnpm-lock.yaml
index 5158939..8131e27 100644
--- a/desktop/pnpm-lock.yaml
+++ b/desktop/pnpm-lock.yaml
@@ -51,6 +51,9 @@ importers:
         specifier: ^5.0.11
         version: 5.0.11(@types/react@19.2.14)(react@19.2.4)
     devDependencies:
+      '@playwright/test':
+        specifier: ^1.58.2
+        version: 1.58.2
       '@tailwindcss/vite':
         specifier: ^4.2.1
         version: 4.2.1(vite@7.3.1(jiti@2.6.1)(lightningcss@1.31.1))
@@ -75,6 +78,9 @@ importers:
       autoprefixer:
         specifier: ^10.4.27
         version: 10.4.27(postcss@8.5.8)
+      playwright:
+        specifier: ^1.58.2
+        version: 1.58.2
       postcss:
         specifier: ^8.5.8
         version: 8.5.8
@@ -345,6 +351,11 @@ packages:
   '@jridgewell/trace-mapping@0.3.31':
     resolution: {integrity: sha512-zzNR+SdQSDJzc8joaeP8QQoCQr8NuYx2dIIytl1QeBEZHJ9uW6hebsrYgbz8hJwUQao3TWCMtmfV8Nu1twOLAw==}
 
+  '@playwright/test@1.58.2':
+    resolution: {integrity: sha512-akea+6bHYBBfA9uQqSYmlJXn61cTa+jbO87xVLCWbTqbWadRVmhxlXATaOjOgcBaWU4ePo0wB41KMFv3o35IXA==}
+    engines: {node: '>=18'}
+    hasBin: true
+
   '@rolldown/pluginutils@1.0.0-beta.27':
     resolution: {integrity: sha512-+d0F4MKMCbeVUJwG96uQ4SgAznZNSq93I3V+9NHA4OpvqG8mRCpGdKmK8l/dl02h2CCDHwW2FqilnTyDcAnqjA==}
 
@@ -786,6 +797,11 @@ packages:
       react-dom:
         optional: true
 
+  fsevents@2.3.2:
+    resolution: {integrity: sha512-xiqMQR4xAeHTuB9uWm+fFRcIOgKBMiOBP+eXiyT7jsgVCq1bkVygt00oASowB7EdtpOHaaPgKt812P9ab+DDKA==}
+    engines: {node: ^8.16.0 || ^10.6.0 || >=11.0.0}
+    os: [darwin]
+
   fsevents@2.3.3:
     resolution: {integrity: sha512-5xoDfX+fL7faATnagmWPpbFtwh/R77WmMMqqHGS65C3vvB0YHrgF+B1YmZ3441tMj5n63k0212XNoJwzlhffQw==}
     engines: {node: ^8.16.0 || ^10.6.0 || >=11.0.0}
@@ -924,6 +940,16 @@ packages:
     resolution: {integrity: sha512-5gTmgEY/sqK6gFXLIsQNH19lWb4ebPDLA4SdLP7dsWkIXHWlG66oPuVvXSGFPppYZz8ZDZq0dYYrbHfBCVUb1Q==}
     engines: {node: '>=12'}
 
+  playwright-core@1.58.2:
+    resolution: {integrity: sha512-yZkEtftgwS8CsfYo7nm0KE8jsvm6i/PTgVtB8DL726wNf6H2IMsDuxCpJj59KDaxCtSnrWan2AeDqM7JBaultg==}
+    engines: {node: '>=18'}
+    hasBin: true
+
+  playwright@1.58.2:
+    resolution: {integrity: sha512-vA30H8Nvkq/cPBnNw4Q8TWz1EJyqgpuinBcHET0YVJVFldr8JDNiU9LaWAE1KqSkRYazuaBhTpB5ZzShOezQ6A==}
+    engines: {node: '>=18'}
+    hasBin: true
+
   postcss-value-parser@4.2.0:
     resolution: {integrity: sha512-1NNCs6uurfkVbeXG4S8JFT9t19m45ICnif8zWLd5oPSZ50QnwMfK+H3jv408d4jw/7Bttv5axS5IiHoLaVNHeQ==}
 
@@ -1277,6 +1303,10 @@ snapshots:
       '@jridgewell/resolve-uri': 3.1.2
       '@jridgewell/sourcemap-codec': 1.5.5
 
+  '@playwright/test@1.58.2':
+    dependencies:
+      playwright: 1.58.2
+
   '@rolldown/pluginutils@1.0.0-beta.27': {}
 
   '@rollup/rollup-android-arm-eabi@4.59.0':
@@ -1615,6 +1645,9 @@ snapshots:
       react: 19.2.4
       react-dom: 19.2.4(react@19.2.4)
 
+  fsevents@2.3.2:
+    optional: true
+
   fsevents@2.3.3:
     optional: true
 
@@ -1707,6 +1740,14 @@ snapshots:
 
   picomatch@4.0.3: {}
 
+  playwright-core@1.58.2: {}
+
+  playwright@1.58.2:
+    dependencies:
+      playwright-core: 1.58.2
+    optionalDependencies:
+      fsevents: 2.3.2
+
   postcss-value-parser@4.2.0: {}
 
   postcss@8.5.8:
diff --git a/desktop/src/App.tsx b/desktop/src/App.tsx
index 7a6f304..2496fca 100644
--- a/desktop/src/App.tsx
+++ b/desktop/src/App.tsx
@@ -14,16 +14,31 @@ import { useTeamStore } from './store/teamStore';
 import { getStoredGatewayToken } from './lib/gateway-client';
 import { pageVariants, defaultTransition, fadeInVariants } from './lib/animations';
 import { silentErrorHandler } from './lib/error-utils';
-import { Bot, Users } from 'lucide-react';
+import { Bot, Users, Loader2 } from 'lucide-react';
 import { EmptyState } from './components/ui';
+import { isTauriRuntime, getLocalGatewayStatus, startLocalGateway } from './lib/tauri-gateway';
 
 type View = 'main' | 'settings';
 
+// Bootstrap component that ensures OpenFang is running before rendering main UI
+function BootstrapScreen({ status }: { status: string }) {
+  return (
+    <div className="h-screen flex items-center justify-center bg-gray-50">
+      <div className="flex flex-col items-center gap-4">
+        <Loader2 className="w-8 h-8 animate-spin text-blue-500" />
+        <p className="text-gray-600 text-sm">{status}</p>
+      </div>
+    </div>
+  );
+}
+
 function App() {
   const [view, setView] = useState<View>('main');
   const [mainContentView, setMainContentView] = useState<MainViewType>('chat');
   const [selectedHandId, setSelectedHandId] = useState<string | undefined>(undefined);
   const [selectedTeamId, setSelectedTeamId] = useState<string | undefined>(undefined);
+  const [bootstrapping, setBootstrapping] = useState(true);
+  const [bootstrapStatus, setBootstrapStatus] = useState('Initializing...');
   const { connect, connectionState } = useGatewayStore();
   const { activeTeam, setActiveTeam, teams } = useTeamStore();
 
@@ -31,12 +46,61 @@ function App() {
     document.title = 'ZCLAW';
   }, []);
 
+  // Bootstrap: Start OpenFang Gateway before rendering main UI
   useEffect(() => {
-    if (connectionState === 'disconnected') {
-      const gatewayToken = getStoredGatewayToken();
-      connect(undefined, gatewayToken).catch(silentErrorHandler('App'));
-    }
-  }, [connect, connectionState]);
+    let mounted = true;
+
+    const bootstrap = async () => {
+      try {
+        // Step 1: Check and start local gateway in Tauri environment
+        if (isTauriRuntime()) {
+          setBootstrapStatus('Checking gateway status...');
+
+          try {
+            const status = await getLocalGatewayStatus();
+            const isRunning = status.portStatus === 'busy' || status.listenerPids.length > 0;
+
+            if (!isRunning && status.cliAvailable) {
+              setBootstrapStatus('Starting OpenFang Gateway...');
+              console.log('[App] Local gateway not running, auto-starting...');
+
+              await startLocalGateway();
+
+              // Wait for gateway to be ready
+              await new Promise(resolve => setTimeout(resolve, 2000));
+              console.log('[App] Local gateway started');
+            } else if (isRunning) {
+              console.log('[App] Local gateway already running');
+            }
+          } catch (err) {
+            console.warn('[App] Failed to check/start local gateway:', err);
+          }
+        }
+
+        if (!mounted) return;
+
+        // Step 2: Connect to gateway
+        setBootstrapStatus('Connecting to gateway...');
+        const gatewayToken = getStoredGatewayToken();
+        await connect(undefined, gatewayToken);
+
+        if (!mounted) return;
+
+        // Step 3: Bootstrap complete
+        setBootstrapping(false);
+      } catch (err) {
+        console.error('[App] Bootstrap failed:', err);
+        // Still allow app to load, connection status will show error
+        setBootstrapping(false);
+      }
+    };
+
+    bootstrap();
+
+    return () => {
+      mounted = false;
+    };
+  }, [connect]);
 
   // 当切换到非 hands 视图时清除选中的 Hand
   const handleMainViewChange = (view: MainViewType) => {
@@ -59,6 +123,11 @@ function App() {
     return <SettingsLayout onBack={() => setView('main')} />;
   }
 
+  // Show bootstrap screen while starting gateway
+  if (bootstrapping) {
+    return <BootstrapScreen status={bootstrapStatus} />;
+  }
+
   return (
     <div className="h-screen flex overflow-hidden text-gray-800 text-sm">
       {/* 左侧边栏 */}
diff --git a/desktop/src/lib/gateway-client.ts b/desktop/src/lib/gateway-client.ts
index c1c855e..ee7c21d 100644
--- a/desktop/src/lib/gateway-client.ts
+++ b/desktop/src/lib/gateway-client.ts
@@ -1086,7 +1086,28 @@ export class GatewayClient {
   }
   async getQuickConfig(): Promise<any> {
     try {
-      return await this.restGet('/api/config/quick');
+      // Use /api/config endpoint (OpenFang's actual config endpoint)
+      const config = await this.restGet('/api/config');
+      // Map OpenFang config to frontend expected format
+      return {
+        quickConfig: {
+          agentName: 'ZCLAW',
+          agentRole: 'AI 助手',
+          userName: '用户',
+          userRole: '用户',
+          agentNickname: 'ZCLAW',
+          scenarios: ['通用对话', '代码助手', '文档编写'],
+          workspaceDir: config.data_dir || config.home_dir,
+          gatewayUrl: this.baseUrl,
+          defaultModel: config.default_model?.model,
+          defaultProvider: config.default_model?.provider,
+          theme: 'dark',
+          showToolCalls: true,
+          autoSaveContext: true,
+          fileWatching: true,
+          privacyOptIn: false,
+        }
+      };
     } catch (error) {
       // Return structured fallback if API not available (404)
       if (isNotFoundError(error)) {
@@ -1096,7 +1117,16 @@ export class GatewayClient {
     }
   }
   async saveQuickConfig(config: Record<string, any>): Promise<any> {
-    return this.restPut('/api/config/quick', config);
+    // Use /api/config endpoint for saving config
+    // Map frontend config back to OpenFang format
+    const openfangConfig = {
+      data_dir: config.workspaceDir,
+      default_model: config.defaultModel ? {
+        model: config.defaultModel,
+        provider: config.defaultProvider || 'bailian',
+      } : undefined,
+    };
+    return this.restPut('/api/config', openfangConfig);
   }
   async listSkills(): Promise<any> {
     return this.restGet('/api/skills');
diff --git a/desktop/src/store/connectionStore.ts b/desktop/src/store/connectionStore.ts
index faa8eea..6a74131 100644
--- a/desktop/src/store/connectionStore.ts
+++ b/desktop/src/store/connectionStore.ts
@@ -219,6 +219,26 @@ export const useConnectionStore = create<ConnectionStore>((set, get) => {
           } catch {
             /* ignore local gateway preparation failures during connection bootstrap */
           }
+
+          // Auto-start local gateway if not running
+          try {
+            const localStatus = await fetchLocalGatewayStatus();
+            const isRunning = localStatus.portStatus === 'busy' || localStatus.listenerPids.length > 0;
+
+            if (!isRunning && localStatus.cliAvailable) {
+              console.log('[ConnectionStore] Local gateway not running, auto-starting...');
+              set({ localGatewayBusy: true });
+              await startLocalGatewayCommand();
+              set({ localGatewayBusy: false });
+
+              // Wait for gateway to be ready
+              await new Promise(resolve => setTimeout(resolve, 1500));
+              console.log('[ConnectionStore] Local gateway started');
+            }
+          } catch (startError) {
+            console.warn('[ConnectionStore] Failed to auto-start local gateway:', startError);
+            set({ localGatewayBusy: false });
+          }
         }
 
         // Resolve effective token: param > quickConfig > localStorage > local auth
diff --git a/desktop/src/store/gatewayStore.ts b/desktop/src/store/gatewayStore.ts
index 02a5637..e74934b 100644
--- a/desktop/src/store/gatewayStore.ts
+++ b/desktop/src/store/gatewayStore.ts
@@ -659,12 +659,34 @@ export const useGatewayStore = create<GatewayStore>((set, get) => {
 
       try {
         set({ error: null });
+
+        // Prepare local gateway for Tauri
         if (isTauriRuntime()) {
           try {
             await prepareLocalGatewayForTauri();
           } catch {
             /* ignore local gateway preparation failures during connection bootstrap */
           }
+
+          // Auto-start local gateway if not running
+          try {
+            const localStatus = await getLocalGatewayStatus();
+            const isRunning = localStatus.portStatus === 'busy' || localStatus.listenerPids.length > 0;
+
+            if (!isRunning && localStatus.cliAvailable) {
+              console.log('[GatewayStore] Local gateway not running, auto-starting...');
+              set({ localGatewayBusy: true });
+              await startLocalGatewayCommand();
+              set({ localGatewayBusy: false });
+
+              // Wait for gateway to be ready
+              await new Promise(resolve => setTimeout(resolve, 1500));
+              console.log('[GatewayStore] Local gateway started');
+            }
+          } catch (startError) {
+            console.warn('[GatewayStore] Failed to auto-start local gateway:', startError);
+            set({ localGatewayBusy: false });
+          }
         }
         // Use the first non-empty token from: param > quickConfig > localStorage
         let effectiveToken = token || get().quickConfig.gatewayToken || getStoredGatewayToken();
diff --git a/desktop/test-results/.last-run.json b/desktop/test-results/.last-run.json
new file mode 100644
index 0000000..f28959e
--- /dev/null
+++ b/desktop/test-results/.last-run.json
@@ -0,0 +1,11 @@
+{
+  "status": "failed",
+  "failedTests": [
+    "ea562bc8f2f5f42dadea-a9ad995be4600240d5d9",
+    "ea562bc8f2f5f42dadea-aa98d5dacb19aae6a62f",
+    "ea562bc8f2f5f42dadea-24005574dbd87061e5f7",
+    "ea562bc8f2f5f42dadea-faee21c3e777f7004b5c",
+    "ea562bc8f2f5f42dadea-27f22490c6765498e906",
+    "ea562bc8f2f5f42dadea-233185470e18cdb79c26"
+  ]
+}
\ No newline at end of file
diff --git a/desktop/test-results/functional-scenarios-1-应用启动与初始化-1-1-应用正常启动并渲染所有核心组件-chromium/error-context.md b/desktop/test-results/functional-scenarios-1-应用启动与初始化-1-1-应用正常启动并渲染所有核心组件-chromium/error-context.md
new file mode 100644
index 0000000..691d255
--- /dev/null
+++ b/desktop/test-results/functional-scenarios-1-应用启动与初始化-1-1-应用正常启动并渲染所有核心组件-chromium/error-context.md
@@ -0,0 +1,246 @@
+# Page snapshot
+
+```yaml
+- generic [ref=e3]:
+  - complementary [ref=e4]:
+    - tablist [ref=e5]:
+      - tab "分身" [selected] [ref=e6]:
+        - img [ref=e7]
+        - generic [ref=e10]: 分身
+      - tab "Hands" [ref=e11]:
+        - img [ref=e12]
+        - generic [ref=e14]: Hands
+      - tab "工作流" [ref=e15]:
+        - img [ref=e16]
+        - generic [ref=e20]: 工作流
+      - tab "团队" [ref=e21]:
+        - img [ref=e22]
+        - generic [ref=e27]: 团队
+      - tab "协作" [ref=e28]:
+        - img [ref=e29]
+        - generic [ref=e33]: 协作
+    - generic [ref=e37]:
+      - generic [ref=e38] [cursor=pointer]:
+        - img [ref=e40]
+        - generic [ref=e43]:
+          - generic [ref=e44]:
+            - generic [ref=e45]: trader-hand
+            - generic [ref=e46]: 当前
+          - paragraph [ref=e47]: 新分身
+        - button "删除":
+          - img
+      - generic [ref=e48] [cursor=pointer]:
+        - img [ref=e50]
+        - generic [ref=e53]:
+          - generic [ref=e55]: researcher
+          - paragraph [ref=e56]: 新分身
+        - button "删除":
+          - img
+      - generic [ref=e57] [cursor=pointer]:
+        - img [ref=e59]
+        - generic [ref=e62]:
+          - generic [ref=e64]: browser-hand
+          - paragraph [ref=e65]: 新分身
+        - button "删除":
+          - img
+      - generic [ref=e66] [cursor=pointer]:
+        - img [ref=e68]
+        - generic [ref=e71]:
+          - generic [ref=e73]: collector-hand
+          - paragraph [ref=e74]: 新分身
+        - button "删除":
+          - img
+      - generic [ref=e75] [cursor=pointer]:
+        - img [ref=e77]
+        - generic [ref=e80]:
+          - generic [ref=e82]: researcher-hand
+          - paragraph [ref=e83]: 新分身
+        - button "删除":
+          - img
+      - generic [ref=e84] [cursor=pointer]:
+        - img [ref=e86]
+        - generic [ref=e89]:
+          - generic [ref=e91]: lead-hand
+          - paragraph [ref=e92]: 新分身
+        - button "删除":
+          - img
+      - generic [ref=e93] [cursor=pointer]:
+        - img [ref=e95]
+        - generic [ref=e98]:
+          - generic [ref=e100]: test-agent
+          - paragraph [ref=e101]: 新分身
+        - button "删除":
+          - img
+      - generic [ref=e102] [cursor=pointer]:
+        - img [ref=e104]
+        - generic [ref=e107]:
+          - generic [ref=e109]: predictor-hand
+          - paragraph [ref=e110]: 新分身
+        - button "删除":
+          - img
+      - generic [ref=e111] [cursor=pointer]:
+        - img [ref=e113]
+        - generic [ref=e116]:
+          - generic [ref=e118]: 测试助手
+          - paragraph [ref=e119]: 新分身
+        - button "删除":
+          - img
+      - generic [ref=e120] [cursor=pointer]:
+        - img [ref=e122]
+        - generic [ref=e125]: 创建新 Agent
+    - generic [ref=e127]:
+      - generic [ref=e128]: 用
+      - generic [ref=e129]: 用户
+      - button "打开设置" [ref=e130]:
+        - img [ref=e131]
+  - main [ref=e134]:
+    - generic [ref=e136]:
+      - heading "trader-hand" [level=2] [ref=e137]
+      - generic [ref=e138]: Gateway 已连接
+    - generic [ref=e142]:
+      - generic [ref=e145]: 🦞
+      - paragraph [ref=e147]: 你好！ 我是 trader-hand。有什么我可以帮你的吗？
+      - generic [ref=e148]:
+        - generic [ref=e149]:
+          - img [ref=e150]
+          - generic [ref=e152]: 快速开始
+        - button "💡 帮我写一个 Python 脚本处理 Excel 文件" [ref=e153]:
+          - generic [ref=e154]: 💡
+          - generic [ref=e155]: 帮我写一个 Python 脚本处理 Excel 文件
+          - img [ref=e156]
+        - button "📊 分析这个数据集的趋势和关键指标" [ref=e158]:
+          - generic [ref=e159]: 📊
+          - generic [ref=e160]: 分析这个数据集的趋势和关键指标
+          - img [ref=e161]
+        - button "✍️ 帮我起草一份产品需求文档" [ref=e163]:
+          - generic [ref=e164]: ✍️
+          - generic [ref=e165]: 帮我起草一份产品需求文档
+          - img [ref=e166]
+      - paragraph [ref=e168]: 发送消息开始对话，或点击上方建议
+    - generic [ref=e170]:
+      - generic [ref=e171]:
+        - button "添加附件" [ref=e172]:
+          - img [ref=e173]
+        - textbox "发送给 trader-hand" [ref=e176]
+        - generic [ref=e177]:
+          - button "选择模型" [ref=e178]:
+            - generic [ref=e179]: glm-5
+            - img [ref=e180]
+          - button "发送消息" [disabled] [ref=e182]:
+            - img [ref=e183]
+      - generic [ref=e185]: Agent 在本地运行，内容由 AI 生成
+  - complementary [ref=e186]:
+    - generic [ref=e187]:
+      - generic [ref=e188]:
+        - generic [ref=e189]:
+          - img [ref=e190]
+          - generic [ref=e192]: "0"
+        - generic [ref=e193]: 当前消息
+      - tablist [ref=e194]:
+        - tab "Status" [selected] [ref=e195]:
+          - img [ref=e196]
+        - tab "Files" [ref=e198]:
+          - img [ref=e199]
+        - tab "Agent" [ref=e202]:
+          - img [ref=e203]
+        - tab "Memory" [ref=e206]:
+          - img [ref=e207]
+    - generic [ref=e215]:
+      - generic [ref=e216]:
+        - generic [ref=e217]:
+          - generic [ref=e218]:
+            - img [ref=e219]
+            - generic [ref=e223]: Gateway Connected
+          - button "Refresh data" [ref=e224]:
+            - img [ref=e225]
+        - generic [ref=e230]:
+          - generic [ref=e231]:
+            - generic [ref=e232]: 地址
+            - generic [ref=e233]: ws://127.0.0.1:50051/ws
+          - generic [ref=e234]:
+            - generic [ref=e235]: 当前模型
+            - generic [ref=e236]: glm-5
+      - generic [ref=e237]:
+        - heading "当前会话" [level=3] [ref=e238]:
+          - img [ref=e239]
+          - text: 当前会话
+        - generic [ref=e241]:
+          - generic [ref=e242]:
+            - generic [ref=e243]: 用户消息
+            - generic [ref=e244]: "0"
+          - generic [ref=e245]:
+            - generic [ref=e246]: 助手回复
+            - generic [ref=e247]: "0"
+          - generic [ref=e248]:
+            - generic [ref=e249]: 工具调用
+            - generic [ref=e250]: "0"
+          - generic [ref=e251]:
+            - generic [ref=e252]: 总消息数
+            - generic [ref=e253]: "0"
+      - generic [ref=e254]:
+        - heading "分身状态" [level=3] [ref=e255]:
+          - img [ref=e256]
+          - text: 分身状态
+        - generic [ref=e259]:
+          - generic [ref=e260]:
+            - img [ref=e262]
+            - generic [ref=e265]: trader-hand
+          - generic [ref=e266]:
+            - img [ref=e268]
+            - generic [ref=e271]: researcher
+          - generic [ref=e272]:
+            - img [ref=e274]
+            - generic [ref=e277]: browser-hand
+          - generic [ref=e278]:
+            - img [ref=e280]
+            - generic [ref=e283]: collector-hand
+          - generic [ref=e284]:
+            - img [ref=e286]
+            - generic [ref=e289]: researcher-hand
+          - paragraph [ref=e290]: +4 个分身
+      - generic [ref=e291]:
+        - heading "用量统计" [level=3] [ref=e292]:
+          - img [ref=e293]
+          - text: 用量统计
+        - generic [ref=e295]:
+          - generic [ref=e296]:
+            - generic [ref=e297]: 总会话数
+            - generic [ref=e298]: "0"
+          - generic [ref=e299]:
+            - generic [ref=e300]: 总消息数
+            - generic [ref=e301]: "0"
+          - generic [ref=e302]:
+            - generic [ref=e303]: 总 Token
+            - generic [ref=e304]: "0"
+      - generic [ref=e305]:
+        - heading "插件 (3)" [level=3] [ref=e306]:
+          - img [ref=e307]
+          - text: 插件 (3)
+        - generic [ref=e309]:
+          - generic [ref=e310]:
+            - generic [ref=e311]: Chat
+            - generic [ref=e312]: 运行中
+          - generic [ref=e313]:
+            - generic [ref=e314]: Code
+            - generic [ref=e315]: 运行中
+          - generic [ref=e316]:
+            - generic [ref=e317]: File
+            - generic [ref=e318]: 运行中
+      - generic [ref=e319]:
+        - heading "运行概览" [level=3] [ref=e320]:
+          - img [ref=e321]
+          - text: 运行概览
+        - generic [ref=e324]:
+          - generic [ref=e325]:
+            - generic [ref=e326]: 连接状态
+            - generic [ref=e327]: 已连接
+          - generic [ref=e328]:
+            - generic [ref=e329]: Gateway 版本
+            - generic [ref=e330]: "-"
+          - generic [ref=e331]:
+            - generic [ref=e332]: 已加载分身
+            - generic [ref=e333]: "9"
+          - generic [ref=e334]:
+            - generic [ref=e335]: 已加载插件
+            - generic [ref=e336]: "3"
+```
\ No newline at end of file
diff --git a/desktop/test-results/functional-scenarios-1-应用启动与初始化-1-1-应用正常启动并渲染所有核心组件-chromium/test-failed-1.png b/desktop/test-results/functional-scenarios-1-应用启动与初始化-1-1-应用正常启动并渲染所有核心组件-chromium/test-failed-1.png
new file mode 100644
index 0000000..a798ec2
Binary files /dev/null and b/desktop/test-results/functional-scenarios-1-应用启动与初始化-1-1-应用正常启动并渲染所有核心组件-chromium/test-failed-1.png differ
diff --git a/desktop/test-results/functional-scenarios-1-应用启动与初始化-1-1-应用正常启动并渲染所有核心组件-chromium/video.webm b/desktop/test-results/functional-scenarios-1-应用启动与初始化-1-1-应用正常启动并渲染所有核心组件-chromium/video.webm
new file mode 100644
index 0000000..97eea70
Binary files /dev/null and b/desktop/test-results/functional-scenarios-1-应用启动与初始化-1-1-应用正常启动并渲染所有核心组件-chromium/video.webm differ
diff --git a/desktop/test-results/functional-scenarios-10-完整用户流程-10-2-完整聊天流程-chromium/error-context.md b/desktop/test-results/functional-scenarios-10-完整用户流程-10-2-完整聊天流程-chromium/error-context.md
new file mode 100644
index 0000000..8c385ff
--- /dev/null
+++ b/desktop/test-results/functional-scenarios-10-完整用户流程-10-2-完整聊天流程-chromium/error-context.md
@@ -0,0 +1,243 @@
+# Page snapshot
+
+```yaml
+- generic [ref=e3]:
+  - complementary [ref=e4]:
+    - tablist [ref=e5]:
+      - tab "分身" [selected] [ref=e6]:
+        - img [ref=e7]
+        - generic [ref=e10]: 分身
+      - tab "Hands" [ref=e11]:
+        - img [ref=e12]
+        - generic [ref=e14]: Hands
+      - tab "工作流" [ref=e15]:
+        - img [ref=e16]
+        - generic [ref=e20]: 工作流
+      - tab "团队" [ref=e21]:
+        - img [ref=e22]
+        - generic [ref=e27]: 团队
+      - tab "协作" [ref=e28]:
+        - img [ref=e29]
+        - generic [ref=e33]: 协作
+    - generic [ref=e37]:
+      - generic [ref=e38] [cursor=pointer]:
+        - img [ref=e40]
+        - generic [ref=e43]:
+          - generic [ref=e44]:
+            - generic [ref=e45]: trader-hand
+            - generic [ref=e46]: 当前
+          - paragraph [ref=e47]: 新分身
+        - button "删除":
+          - img
+      - generic [ref=e48] [cursor=pointer]:
+        - img [ref=e50]
+        - generic [ref=e53]:
+          - generic [ref=e55]: researcher
+          - paragraph [ref=e56]: 新分身
+        - button "删除":
+          - img
+      - generic [ref=e57] [cursor=pointer]:
+        - img [ref=e59]
+        - generic [ref=e62]:
+          - generic [ref=e64]: browser-hand
+          - paragraph [ref=e65]: 新分身
+        - button "删除":
+          - img
+      - generic [ref=e66] [cursor=pointer]:
+        - img [ref=e68]
+        - generic [ref=e71]:
+          - generic [ref=e73]: collector-hand
+          - paragraph [ref=e74]: 新分身
+        - button "删除":
+          - img
+      - generic [ref=e75] [cursor=pointer]:
+        - img [ref=e77]
+        - generic [ref=e80]:
+          - generic [ref=e82]: researcher-hand
+          - paragraph [ref=e83]: 新分身
+        - button "删除":
+          - img
+      - generic [ref=e84] [cursor=pointer]:
+        - img [ref=e86]
+        - generic [ref=e89]:
+          - generic [ref=e91]: lead-hand
+          - paragraph [ref=e92]: 新分身
+        - button "删除":
+          - img
+      - generic [ref=e93] [cursor=pointer]:
+        - img [ref=e95]
+        - generic [ref=e98]:
+          - generic [ref=e100]: test-agent
+          - paragraph [ref=e101]: 新分身
+        - button "删除":
+          - img
+      - generic [ref=e102] [cursor=pointer]:
+        - img [ref=e104]
+        - generic [ref=e107]:
+          - generic [ref=e109]: predictor-hand
+          - paragraph [ref=e110]: 新分身
+        - button "删除":
+          - img
+      - generic [ref=e111] [cursor=pointer]:
+        - img [ref=e113]
+        - generic [ref=e116]:
+          - generic [ref=e118]: 测试助手
+          - paragraph [ref=e119]: 新分身
+        - button "删除":
+          - img
+      - generic [ref=e120] [cursor=pointer]:
+        - img [ref=e122]
+        - generic [ref=e125]: 创建新 Agent
+    - generic [ref=e127]:
+      - generic [ref=e128]: 用
+      - generic [ref=e129]: 用户
+      - button "打开设置" [ref=e130]:
+        - img [ref=e131]
+  - main [ref=e134]:
+    - generic [ref=e135]:
+      - generic [ref=e136]:
+        - heading "trader-hand" [level=2] [ref=e137]
+        - generic [ref=e138]: 正在输入中
+      - button "开始新对话" [ref=e141]:
+        - img [ref=e142]
+        - text: 新对话
+    - generic [ref=e145]:
+      - generic [ref=e147]:
+        - generic [ref=e148]: 用
+        - generic [ref=e151]: 你好
+      - generic [ref=e153]:
+        - generic [ref=e154]: Z
+        - generic [ref=e156]:
+          - generic [ref=e157]: "⚠️ Request failed: Request failed: Missing API key: No LLM provider configured. Set an API key (e.g. GROQ_API_KEY) and restart, configure a provider via the dashboard, or use Ollama for local models (no API key neede..."
+          - paragraph [ref=e158]: "Request failed: Request failed: Missing API key: No LLM provider configured. Set an API key (e.g. GROQ_API_KEY) and restart, configure a provider via the dashboard, or use Ollama for local models (no API key neede..."
+      - generic [ref=e160]:
+        - generic [ref=e161]: 用
+        - generic [ref=e164]: 请帮我写一个简单的函数
+      - generic [ref=e167]: Z
+    - generic [ref=e173]:
+      - generic [ref=e174]:
+        - button "添加附件" [ref=e175]:
+          - img [ref=e176]
+        - textbox "Agent 正在回复..." [disabled] [ref=e179]
+        - generic [ref=e180]:
+          - button "选择模型" [ref=e181]:
+            - generic [ref=e182]: glm-5
+            - img [ref=e183]
+          - button "发送消息" [disabled] [ref=e185]:
+            - img [ref=e186]
+      - generic [ref=e188]: Agent 在本地运行，内容由 AI 生成
+  - complementary [ref=e189]:
+    - generic [ref=e190]:
+      - generic [ref=e191]:
+        - generic [ref=e192]:
+          - img [ref=e193]
+          - generic [ref=e195]: "4"
+        - generic [ref=e196]: 当前消息
+      - tablist [ref=e197]:
+        - tab "Status" [selected] [ref=e198]:
+          - img [ref=e199]
+        - tab "Files" [ref=e201]:
+          - img [ref=e202]
+        - tab "Agent" [ref=e205]:
+          - img [ref=e206]
+        - tab "Memory" [ref=e209]:
+          - img [ref=e210]
+    - generic [ref=e218]:
+      - generic [ref=e219]:
+        - generic [ref=e220]:
+          - generic [ref=e221]:
+            - img [ref=e222]
+            - generic [ref=e226]: Gateway Connected
+          - button "Refresh data" [ref=e227]:
+            - img [ref=e228]
+        - generic [ref=e233]:
+          - generic [ref=e234]:
+            - generic [ref=e235]: 地址
+            - generic [ref=e236]: ws://127.0.0.1:50051/ws
+          - generic [ref=e237]:
+            - generic [ref=e238]: 当前模型
+            - generic [ref=e239]: glm-5
+      - generic [ref=e240]:
+        - heading "当前会话" [level=3] [ref=e241]:
+          - img [ref=e242]
+          - text: 当前会话
+        - generic [ref=e244]:
+          - generic [ref=e245]:
+            - generic [ref=e246]: 用户消息
+            - generic [ref=e247]: "2"
+          - generic [ref=e248]:
+            - generic [ref=e249]: 助手回复
+            - generic [ref=e250]: "2"
+          - generic [ref=e251]:
+            - generic [ref=e252]: 工具调用
+            - generic [ref=e253]: "0"
+          - generic [ref=e254]:
+            - generic [ref=e255]: 总消息数
+            - generic [ref=e256]: "4"
+      - generic [ref=e257]:
+        - heading "分身状态" [level=3] [ref=e258]:
+          - img [ref=e259]
+          - text: 分身状态
+        - generic [ref=e262]:
+          - generic [ref=e263]:
+            - img [ref=e265]
+            - generic [ref=e268]: trader-hand
+          - generic [ref=e269]:
+            - img [ref=e271]
+            - generic [ref=e274]: researcher
+          - generic [ref=e275]:
+            - img [ref=e277]
+            - generic [ref=e280]: browser-hand
+          - generic [ref=e281]:
+            - img [ref=e283]
+            - generic [ref=e286]: collector-hand
+          - generic [ref=e287]:
+            - img [ref=e289]
+            - generic [ref=e292]: researcher-hand
+          - paragraph [ref=e293]: +4 个分身
+      - generic [ref=e294]:
+        - heading "用量统计" [level=3] [ref=e295]:
+          - img [ref=e296]
+          - text: 用量统计
+        - generic [ref=e298]:
+          - generic [ref=e299]:
+            - generic [ref=e300]: 总会话数
+            - generic [ref=e301]: "0"
+          - generic [ref=e302]:
+            - generic [ref=e303]: 总消息数
+            - generic [ref=e304]: "0"
+          - generic [ref=e305]:
+            - generic [ref=e306]: 总 Token
+            - generic [ref=e307]: "0"
+      - generic [ref=e308]:
+        - heading "插件 (3)" [level=3] [ref=e309]:
+          - img [ref=e310]
+          - text: 插件 (3)
+        - generic [ref=e312]:
+          - generic [ref=e313]:
+            - generic [ref=e314]: Chat
+            - generic [ref=e315]: 运行中
+          - generic [ref=e316]:
+            - generic [ref=e317]: Code
+            - generic [ref=e318]: 运行中
+          - generic [ref=e319]:
+            - generic [ref=e320]: File
+            - generic [ref=e321]: 运行中
+      - generic [ref=e322]:
+        - heading "运行概览" [level=3] [ref=e323]:
+          - img [ref=e324]
+          - text: 运行概览
+        - generic [ref=e327]:
+          - generic [ref=e328]:
+            - generic [ref=e329]: 连接状态
+            - generic [ref=e330]: 已连接
+          - generic [ref=e331]:
+            - generic [ref=e332]: Gateway 版本
+            - generic [ref=e333]: "-"
+          - generic [ref=e334]:
+            - generic [ref=e335]: 已加载分身
+            - generic [ref=e336]: "9"
+          - generic [ref=e337]:
+            - generic [ref=e338]: 已加载插件
+            - generic [ref=e339]: "3"
+```
\ No newline at end of file
diff --git a/desktop/test-results/functional-scenarios-10-完整用户流程-10-2-完整聊天流程-chromium/test-failed-1.png b/desktop/test-results/functional-scenarios-10-完整用户流程-10-2-完整聊天流程-chromium/test-failed-1.png
new file mode 100644
index 0000000..063154f
Binary files /dev/null and b/desktop/test-results/functional-scenarios-10-完整用户流程-10-2-完整聊天流程-chromium/test-failed-1.png differ
diff --git a/desktop/test-results/functional-scenarios-10-完整用户流程-10-2-完整聊天流程-chromium/video.webm b/desktop/test-results/functional-scenarios-10-完整用户流程-10-2-完整聊天流程-chromium/video.webm
new file mode 100644
index 0000000..5e87e63
Binary files /dev/null and b/desktop/test-results/functional-scenarios-10-完整用户流程-10-2-完整聊天流程-chromium/video.webm differ
diff --git a/desktop/test-results/functional-scenarios-11-性能与稳定性-11-4-长时间运行稳定性-chromium/error-context.md b/desktop/test-results/functional-scenarios-11-性能与稳定性-11-4-长时间运行稳定性-chromium/error-context.md
new file mode 100644
index 0000000..c1cac1b
--- /dev/null
+++ b/desktop/test-results/functional-scenarios-11-性能与稳定性-11-4-长时间运行稳定性-chromium/error-context.md
@@ -0,0 +1,243 @@
+# Page snapshot
+
+```yaml
+- generic [ref=e3]:
+  - complementary [ref=e4]:
+    - tablist [ref=e5]:
+      - tab "分身" [selected] [ref=e6]:
+        - img [ref=e7]
+        - generic [ref=e10]: 分身
+      - tab "Hands" [ref=e11]:
+        - img [ref=e12]
+        - generic [ref=e14]: Hands
+      - tab "工作流" [ref=e15]:
+        - img [ref=e16]
+        - generic [ref=e20]: 工作流
+      - tab "团队" [ref=e21]:
+        - img [ref=e22]
+        - generic [ref=e27]: 团队
+      - tab "协作" [ref=e28]:
+        - img [ref=e29]
+        - generic [ref=e33]: 协作
+    - generic [ref=e37]:
+      - generic [ref=e38] [cursor=pointer]:
+        - img [ref=e40]
+        - generic [ref=e43]:
+          - generic [ref=e44]:
+            - generic [ref=e45]: trader-hand
+            - generic [ref=e46]: 当前
+          - paragraph [ref=e47]: 新分身
+        - button "删除":
+          - img
+      - generic [ref=e48] [cursor=pointer]:
+        - img [ref=e50]
+        - generic [ref=e53]:
+          - generic [ref=e55]: researcher
+          - paragraph [ref=e56]: 新分身
+        - button "删除":
+          - img
+      - generic [ref=e57] [cursor=pointer]:
+        - img [ref=e59]
+        - generic [ref=e62]:
+          - generic [ref=e64]: browser-hand
+          - paragraph [ref=e65]: 新分身
+        - button "删除":
+          - img
+      - generic [ref=e66] [cursor=pointer]:
+        - img [ref=e68]
+        - generic [ref=e71]:
+          - generic [ref=e73]: collector-hand
+          - paragraph [ref=e74]: 新分身
+        - button "删除":
+          - img
+      - generic [ref=e75] [cursor=pointer]:
+        - img [ref=e77]
+        - generic [ref=e80]:
+          - generic [ref=e82]: researcher-hand
+          - paragraph [ref=e83]: 新分身
+        - button "删除":
+          - img
+      - generic [ref=e84] [cursor=pointer]:
+        - img [ref=e86]
+        - generic [ref=e89]:
+          - generic [ref=e91]: lead-hand
+          - paragraph [ref=e92]: 新分身
+        - button "删除":
+          - img
+      - generic [ref=e93] [cursor=pointer]:
+        - img [ref=e95]
+        - generic [ref=e98]:
+          - generic [ref=e100]: test-agent
+          - paragraph [ref=e101]: 新分身
+        - button "删除":
+          - img
+      - generic [ref=e102] [cursor=pointer]:
+        - img [ref=e104]
+        - generic [ref=e107]:
+          - generic [ref=e109]: predictor-hand
+          - paragraph [ref=e110]: 新分身
+        - button "删除":
+          - img
+      - generic [ref=e111] [cursor=pointer]:
+        - img [ref=e113]
+        - generic [ref=e116]:
+          - generic [ref=e118]: 测试助手
+          - paragraph [ref=e119]: 新分身
+        - button "删除":
+          - img
+      - generic [ref=e120] [cursor=pointer]:
+        - img [ref=e122]
+        - generic [ref=e125]: 创建新 Agent
+    - generic [ref=e127]:
+      - generic [ref=e128]: 用
+      - generic [ref=e129]: 用户
+      - button "打开设置" [ref=e130]:
+        - img [ref=e131]
+  - main [ref=e134]:
+    - generic [ref=e135]:
+      - generic [ref=e136]:
+        - heading "trader-hand" [level=2] [ref=e137]
+        - generic [ref=e138]: 正在输入中
+      - button "开始新对话" [ref=e141]:
+        - img [ref=e142]
+        - text: 新对话
+    - generic [ref=e145]:
+      - generic [ref=e147]:
+        - generic [ref=e148]: 用
+        - generic [ref=e151]: 测试消息 1
+      - generic [ref=e153]:
+        - generic [ref=e154]: Z
+        - generic [ref=e156]:
+          - generic [ref=e157]: "⚠️ Request failed: Request failed: Missing API key: No LLM provider configured. Set an API key (e.g. GROQ_API_KEY) and restart, configure a provider via the dashboard, or use Ollama for local models (no API key neede..."
+          - paragraph [ref=e158]: "Request failed: Request failed: Missing API key: No LLM provider configured. Set an API key (e.g. GROQ_API_KEY) and restart, configure a provider via the dashboard, or use Ollama for local models (no API key neede..."
+      - generic [ref=e160]:
+        - generic [ref=e161]: 用
+        - generic [ref=e164]: 测试消息 2
+      - generic [ref=e167]: Z
+    - generic [ref=e173]:
+      - generic [ref=e174]:
+        - button "添加附件" [ref=e175]:
+          - img [ref=e176]
+        - textbox "Agent 正在回复..." [disabled] [ref=e179]
+        - generic [ref=e180]:
+          - button "选择模型" [ref=e181]:
+            - generic [ref=e182]: glm-5
+            - img [ref=e183]
+          - button "发送消息" [disabled] [ref=e185]:
+            - img [ref=e186]
+      - generic [ref=e188]: Agent 在本地运行，内容由 AI 生成
+  - complementary [ref=e189]:
+    - generic [ref=e190]:
+      - generic [ref=e191]:
+        - generic [ref=e192]:
+          - img [ref=e193]
+          - generic [ref=e195]: "4"
+        - generic [ref=e196]: 当前消息
+      - tablist [ref=e197]:
+        - tab "Status" [selected] [ref=e198]:
+          - img [ref=e199]
+        - tab "Files" [ref=e201]:
+          - img [ref=e202]
+        - tab "Agent" [ref=e205]:
+          - img [ref=e206]
+        - tab "Memory" [ref=e209]:
+          - img [ref=e210]
+    - generic [ref=e218]:
+      - generic [ref=e219]:
+        - generic [ref=e220]:
+          - generic [ref=e221]:
+            - img [ref=e222]
+            - generic [ref=e226]: Gateway Connected
+          - button "Refresh data" [ref=e227]:
+            - img [ref=e228]
+        - generic [ref=e233]:
+          - generic [ref=e234]:
+            - generic [ref=e235]: 地址
+            - generic [ref=e236]: ws://127.0.0.1:50051/ws
+          - generic [ref=e237]:
+            - generic [ref=e238]: 当前模型
+            - generic [ref=e239]: glm-5
+      - generic [ref=e240]:
+        - heading "当前会话" [level=3] [ref=e241]:
+          - img [ref=e242]
+          - text: 当前会话
+        - generic [ref=e244]:
+          - generic [ref=e245]:
+            - generic [ref=e246]: 用户消息
+            - generic [ref=e247]: "2"
+          - generic [ref=e248]:
+            - generic [ref=e249]: 助手回复
+            - generic [ref=e250]: "2"
+          - generic [ref=e251]:
+            - generic [ref=e252]: 工具调用
+            - generic [ref=e253]: "0"
+          - generic [ref=e254]:
+            - generic [ref=e255]: 总消息数
+            - generic [ref=e256]: "4"
+      - generic [ref=e257]:
+        - heading "分身状态" [level=3] [ref=e258]:
+          - img [ref=e259]
+          - text: 分身状态
+        - generic [ref=e262]:
+          - generic [ref=e263]:
+            - img [ref=e265]
+            - generic [ref=e268]: trader-hand
+          - generic [ref=e269]:
+            - img [ref=e271]
+            - generic [ref=e274]: researcher
+          - generic [ref=e275]:
+            - img [ref=e277]
+            - generic [ref=e280]: browser-hand
+          - generic [ref=e281]:
+            - img [ref=e283]
+            - generic [ref=e286]: collector-hand
+          - generic [ref=e287]:
+            - img [ref=e289]
+            - generic [ref=e292]: researcher-hand
+          - paragraph [ref=e293]: +4 个分身
+      - generic [ref=e294]:
+        - heading "用量统计" [level=3] [ref=e295]:
+          - img [ref=e296]
+          - text: 用量统计
+        - generic [ref=e298]:
+          - generic [ref=e299]:
+            - generic [ref=e300]: 总会话数
+            - generic [ref=e301]: "0"
+          - generic [ref=e302]:
+            - generic [ref=e303]: 总消息数
+            - generic [ref=e304]: "0"
+          - generic [ref=e305]:
+            - generic [ref=e306]: 总 Token
+            - generic [ref=e307]: "0"
+      - generic [ref=e308]:
+        - heading "插件 (3)" [level=3] [ref=e309]:
+          - img [ref=e310]
+          - text: 插件 (3)
+        - generic [ref=e312]:
+          - generic [ref=e313]:
+            - generic [ref=e314]: Chat
+            - generic [ref=e315]: 运行中
+          - generic [ref=e316]:
+            - generic [ref=e317]: Code
+            - generic [ref=e318]: 运行中
+          - generic [ref=e319]:
+            - generic [ref=e320]: File
+            - generic [ref=e321]: 运行中
+      - generic [ref=e322]:
+        - heading "运行概览" [level=3] [ref=e323]:
+          - img [ref=e324]
+          - text: 运行概览
+        - generic [ref=e327]:
+          - generic [ref=e328]:
+            - generic [ref=e329]: 连接状态
+            - generic [ref=e330]: 已连接
+          - generic [ref=e331]:
+            - generic [ref=e332]: Gateway 版本
+            - generic [ref=e333]: "-"
+          - generic [ref=e334]:
+            - generic [ref=e335]: 已加载分身
+            - generic [ref=e336]: "9"
+          - generic [ref=e337]:
+            - generic [ref=e338]: 已加载插件
+            - generic [ref=e339]: "3"
+```
\ No newline at end of file
diff --git a/desktop/test-results/functional-scenarios-11-性能与稳定性-11-4-长时间运行稳定性-chromium/test-failed-1.png b/desktop/test-results/functional-scenarios-11-性能与稳定性-11-4-长时间运行稳定性-chromium/test-failed-1.png
new file mode 100644
index 0000000..f5d6e37
Binary files /dev/null and b/desktop/test-results/functional-scenarios-11-性能与稳定性-11-4-长时间运行稳定性-chromium/test-failed-1.png differ
diff --git a/desktop/test-results/functional-scenarios-11-性能与稳定性-11-4-长时间运行稳定性-chromium/video.webm b/desktop/test-results/functional-scenarios-11-性能与稳定性-11-4-长时间运行稳定性-chromium/video.webm
new file mode 100644
index 0000000..056f6b8
Binary files /dev/null and b/desktop/test-results/functional-scenarios-11-性能与稳定性-11-4-长时间运行稳定性-chromium/video.webm differ
diff --git a/desktop/test-results/functional-scenarios-3-Agent-分身管理-3-1-分身列表显示-chromium/error-context.md b/desktop/test-results/functional-scenarios-3-Agent-分身管理-3-1-分身列表显示-chromium/error-context.md
new file mode 100644
index 0000000..691d255
--- /dev/null
+++ b/desktop/test-results/functional-scenarios-3-Agent-分身管理-3-1-分身列表显示-chromium/error-context.md
@@ -0,0 +1,246 @@
+# Page snapshot
+
+```yaml
+- generic [ref=e3]:
+  - complementary [ref=e4]:
+    - tablist [ref=e5]:
+      - tab "分身" [selected] [ref=e6]:
+        - img [ref=e7]
+        - generic [ref=e10]: 分身
+      - tab "Hands" [ref=e11]:
+        - img [ref=e12]
+        - generic [ref=e14]: Hands
+      - tab "工作流" [ref=e15]:
+        - img [ref=e16]
+        - generic [ref=e20]: 工作流
+      - tab "团队" [ref=e21]:
+        - img [ref=e22]
+        - generic [ref=e27]: 团队
+      - tab "协作" [ref=e28]:
+        - img [ref=e29]
+        - generic [ref=e33]: 协作
+    - generic [ref=e37]:
+      - generic [ref=e38] [cursor=pointer]:
+        - img [ref=e40]
+        - generic [ref=e43]:
+          - generic [ref=e44]:
+            - generic [ref=e45]: trader-hand
+            - generic [ref=e46]: 当前
+          - paragraph [ref=e47]: 新分身
+        - button "删除":
+          - img
+      - generic [ref=e48] [cursor=pointer]:
+        - img [ref=e50]
+        - generic [ref=e53]:
+          - generic [ref=e55]: researcher
+          - paragraph [ref=e56]: 新分身
+        - button "删除":
+          - img
+      - generic [ref=e57] [cursor=pointer]:
+        - img [ref=e59]
+        - generic [ref=e62]:
+          - generic [ref=e64]: browser-hand
+          - paragraph [ref=e65]: 新分身
+        - button "删除":
+          - img
+      - generic [ref=e66] [cursor=pointer]:
+        - img [ref=e68]
+        - generic [ref=e71]:
+          - generic [ref=e73]: collector-hand
+          - paragraph [ref=e74]: 新分身
+        - button "删除":
+          - img
+      - generic [ref=e75] [cursor=pointer]:
+        - img [ref=e77]
+        - generic [ref=e80]:
+          - generic [ref=e82]: researcher-hand
+          - paragraph [ref=e83]: 新分身
+        - button "删除":
+          - img
+      - generic [ref=e84] [cursor=pointer]:
+        - img [ref=e86]
+        - generic [ref=e89]:
+          - generic [ref=e91]: lead-hand
+          - paragraph [ref=e92]: 新分身
+        - button "删除":
+          - img
+      - generic [ref=e93] [cursor=pointer]:
+        - img [ref=e95]
+        - generic [ref=e98]:
+          - generic [ref=e100]: test-agent
+          - paragraph [ref=e101]: 新分身
+        - button "删除":
+          - img
+      - generic [ref=e102] [cursor=pointer]:
+        - img [ref=e104]
+        - generic [ref=e107]:
+          - generic [ref=e109]: predictor-hand
+          - paragraph [ref=e110]: 新分身
+        - button "删除":
+          - img
+      - generic [ref=e111] [cursor=pointer]:
+        - img [ref=e113]
+        - generic [ref=e116]:
+          - generic [ref=e118]: 测试助手
+          - paragraph [ref=e119]: 新分身
+        - button "删除":
+          - img
+      - generic [ref=e120] [cursor=pointer]:
+        - img [ref=e122]
+        - generic [ref=e125]: 创建新 Agent
+    - generic [ref=e127]:
+      - generic [ref=e128]: 用
+      - generic [ref=e129]: 用户
+      - button "打开设置" [ref=e130]:
+        - img [ref=e131]
+  - main [ref=e134]:
+    - generic [ref=e136]:
+      - heading "trader-hand" [level=2] [ref=e137]
+      - generic [ref=e138]: Gateway 已连接
+    - generic [ref=e142]:
+      - generic [ref=e145]: 🦞
+      - paragraph [ref=e147]: 你好！ 我是 trader-hand。有什么我可以帮你的吗？
+      - generic [ref=e148]:
+        - generic [ref=e149]:
+          - img [ref=e150]
+          - generic [ref=e152]: 快速开始
+        - button "💡 帮我写一个 Python 脚本处理 Excel 文件" [ref=e153]:
+          - generic [ref=e154]: 💡
+          - generic [ref=e155]: 帮我写一个 Python 脚本处理 Excel 文件
+          - img [ref=e156]
+        - button "📊 分析这个数据集的趋势和关键指标" [ref=e158]:
+          - generic [ref=e159]: 📊
+          - generic [ref=e160]: 分析这个数据集的趋势和关键指标
+          - img [ref=e161]
+        - button "✍️ 帮我起草一份产品需求文档" [ref=e163]:
+          - generic [ref=e164]: ✍️
+          - generic [ref=e165]: 帮我起草一份产品需求文档
+          - img [ref=e166]
+      - paragraph [ref=e168]: 发送消息开始对话，或点击上方建议
+    - generic [ref=e170]:
+      - generic [ref=e171]:
+        - button "添加附件" [ref=e172]:
+          - img [ref=e173]
+        - textbox "发送给 trader-hand" [ref=e176]
+        - generic [ref=e177]:
+          - button "选择模型" [ref=e178]:
+            - generic [ref=e179]: glm-5
+            - img [ref=e180]
+          - button "发送消息" [disabled] [ref=e182]:
+            - img [ref=e183]
+      - generic [ref=e185]: Agent 在本地运行，内容由 AI 生成
+  - complementary [ref=e186]:
+    - generic [ref=e187]:
+      - generic [ref=e188]:
+        - generic [ref=e189]:
+          - img [ref=e190]
+          - generic [ref=e192]: "0"
+        - generic [ref=e193]: 当前消息
+      - tablist [ref=e194]:
+        - tab "Status" [selected] [ref=e195]:
+          - img [ref=e196]
+        - tab "Files" [ref=e198]:
+          - img [ref=e199]
+        - tab "Agent" [ref=e202]:
+          - img [ref=e203]
+        - tab "Memory" [ref=e206]:
+          - img [ref=e207]
+    - generic [ref=e215]:
+      - generic [ref=e216]:
+        - generic [ref=e217]:
+          - generic [ref=e218]:
+            - img [ref=e219]
+            - generic [ref=e223]: Gateway Connected
+          - button "Refresh data" [ref=e224]:
+            - img [ref=e225]
+        - generic [ref=e230]:
+          - generic [ref=e231]:
+            - generic [ref=e232]: 地址
+            - generic [ref=e233]: ws://127.0.0.1:50051/ws
+          - generic [ref=e234]:
+            - generic [ref=e235]: 当前模型
+            - generic [ref=e236]: glm-5
+      - generic [ref=e237]:
+        - heading "当前会话" [level=3] [ref=e238]:
+          - img [ref=e239]
+          - text: 当前会话
+        - generic [ref=e241]:
+          - generic [ref=e242]:
+            - generic [ref=e243]: 用户消息
+            - generic [ref=e244]: "0"
+          - generic [ref=e245]:
+            - generic [ref=e246]: 助手回复
+            - generic [ref=e247]: "0"
+          - generic [ref=e248]:
+            - generic [ref=e249]: 工具调用
+            - generic [ref=e250]: "0"
+          - generic [ref=e251]:
+            - generic [ref=e252]: 总消息数
+            - generic [ref=e253]: "0"
+      - generic [ref=e254]:
+        - heading "分身状态" [level=3] [ref=e255]:
+          - img [ref=e256]
+          - text: 分身状态
+        - generic [ref=e259]:
+          - generic [ref=e260]:
+            - img [ref=e262]
+            - generic [ref=e265]: trader-hand
+          - generic [ref=e266]:
+            - img [ref=e268]
+            - generic [ref=e271]: researcher
+          - generic [ref=e272]:
+            - img [ref=e274]
+            - generic [ref=e277]: browser-hand
+          - generic [ref=e278]:
+            - img [ref=e280]
+            - generic [ref=e283]: collector-hand
+          - generic [ref=e284]:
+            - img [ref=e286]
+            - generic [ref=e289]: researcher-hand
+          - paragraph [ref=e290]: +4 个分身
+      - generic [ref=e291]:
+        - heading "用量统计" [level=3] [ref=e292]:
+          - img [ref=e293]
+          - text: 用量统计
+        - generic [ref=e295]:
+          - generic [ref=e296]:
+            - generic [ref=e297]: 总会话数
+            - generic [ref=e298]: "0"
+          - generic [ref=e299]:
+            - generic [ref=e300]: 总消息数
+            - generic [ref=e301]: "0"
+          - generic [ref=e302]:
+            - generic [ref=e303]: 总 Token
+            - generic [ref=e304]: "0"
+      - generic [ref=e305]:
+        - heading "插件 (3)" [level=3] [ref=e306]:
+          - img [ref=e307]
+          - text: 插件 (3)
+        - generic [ref=e309]:
+          - generic [ref=e310]:
+            - generic [ref=e311]: Chat
+            - generic [ref=e312]: 运行中
+          - generic [ref=e313]:
+            - generic [ref=e314]: Code
+            - generic [ref=e315]: 运行中
+          - generic [ref=e316]:
+            - generic [ref=e317]: File
+            - generic [ref=e318]: 运行中
+      - generic [ref=e319]:
+        - heading "运行概览" [level=3] [ref=e320]:
+          - img [ref=e321]
+          - text: 运行概览
+        - generic [ref=e324]:
+          - generic [ref=e325]:
+            - generic [ref=e326]: 连接状态
+            - generic [ref=e327]: 已连接
+          - generic [ref=e328]:
+            - generic [ref=e329]: Gateway 版本
+            - generic [ref=e330]: "-"
+          - generic [ref=e331]:
+            - generic [ref=e332]: 已加载分身
+            - generic [ref=e333]: "9"
+          - generic [ref=e334]:
+            - generic [ref=e335]: 已加载插件
+            - generic [ref=e336]: "3"
+```
\ No newline at end of file
diff --git a/desktop/test-results/functional-scenarios-3-Agent-分身管理-3-1-分身列表显示-chromium/test-failed-1.png b/desktop/test-results/functional-scenarios-3-Agent-分身管理-3-1-分身列表显示-chromium/test-failed-1.png
new file mode 100644
index 0000000..f872849
Binary files /dev/null and b/desktop/test-results/functional-scenarios-3-Agent-分身管理-3-1-分身列表显示-chromium/test-failed-1.png differ
diff --git a/desktop/test-results/functional-scenarios-3-Agent-分身管理-3-1-分身列表显示-chromium/video.webm b/desktop/test-results/functional-scenarios-3-Agent-分身管理-3-1-分身列表显示-chromium/video.webm
new file mode 100644
index 0000000..c54e6ef
Binary files /dev/null and b/desktop/test-results/functional-scenarios-3-Agent-分身管理-3-1-分身列表显示-chromium/video.webm differ
diff --git a/desktop/test-results/functional-scenarios-4-Hands-系统-4-1-Hands-列表显示-chromium/error-context.md b/desktop/test-results/functional-scenarios-4-Hands-系统-4-1-Hands-列表显示-chromium/error-context.md
new file mode 100644
index 0000000..691d255
--- /dev/null
+++ b/desktop/test-results/functional-scenarios-4-Hands-系统-4-1-Hands-列表显示-chromium/error-context.md
@@ -0,0 +1,246 @@
+# Page snapshot
+
+```yaml
+- generic [ref=e3]:
+  - complementary [ref=e4]:
+    - tablist [ref=e5]:
+      - tab "分身" [selected] [ref=e6]:
+        - img [ref=e7]
+        - generic [ref=e10]: 分身
+      - tab "Hands" [ref=e11]:
+        - img [ref=e12]
+        - generic [ref=e14]: Hands
+      - tab "工作流" [ref=e15]:
+        - img [ref=e16]
+        - generic [ref=e20]: 工作流
+      - tab "团队" [ref=e21]:
+        - img [ref=e22]
+        - generic [ref=e27]: 团队
+      - tab "协作" [ref=e28]:
+        - img [ref=e29]
+        - generic [ref=e33]: 协作
+    - generic [ref=e37]:
+      - generic [ref=e38] [cursor=pointer]:
+        - img [ref=e40]
+        - generic [ref=e43]:
+          - generic [ref=e44]:
+            - generic [ref=e45]: trader-hand
+            - generic [ref=e46]: 当前
+          - paragraph [ref=e47]: 新分身
+        - button "删除":
+          - img
+      - generic [ref=e48] [cursor=pointer]:
+        - img [ref=e50]
+        - generic [ref=e53]:
+          - generic [ref=e55]: researcher
+          - paragraph [ref=e56]: 新分身
+        - button "删除":
+          - img
+      - generic [ref=e57] [cursor=pointer]:
+        - img [ref=e59]
+        - generic [ref=e62]:
+          - generic [ref=e64]: browser-hand
+          - paragraph [ref=e65]: 新分身
+        - button "删除":
+          - img
+      - generic [ref=e66] [cursor=pointer]:
+        - img [ref=e68]
+        - generic [ref=e71]:
+          - generic [ref=e73]: collector-hand
+          - paragraph [ref=e74]: 新分身
+        - button "删除":
+          - img
+      - generic [ref=e75] [cursor=pointer]:
+        - img [ref=e77]
+        - generic [ref=e80]:
+          - generic [ref=e82]: researcher-hand
+          - paragraph [ref=e83]: 新分身
+        - button "删除":
+          - img
+      - generic [ref=e84] [cursor=pointer]:
+        - img [ref=e86]
+        - generic [ref=e89]:
+          - generic [ref=e91]: lead-hand
+          - paragraph [ref=e92]: 新分身
+        - button "删除":
+          - img
+      - generic [ref=e93] [cursor=pointer]:
+        - img [ref=e95]
+        - generic [ref=e98]:
+          - generic [ref=e100]: test-agent
+          - paragraph [ref=e101]: 新分身
+        - button "删除":
+          - img
+      - generic [ref=e102] [cursor=pointer]:
+        - img [ref=e104]
+        - generic [ref=e107]:
+          - generic [ref=e109]: predictor-hand
+          - paragraph [ref=e110]: 新分身
+        - button "删除":
+          - img
+      - generic [ref=e111] [cursor=pointer]:
+        - img [ref=e113]
+        - generic [ref=e116]:
+          - generic [ref=e118]: 测试助手
+          - paragraph [ref=e119]: 新分身
+        - button "删除":
+          - img
+      - generic [ref=e120] [cursor=pointer]:
+        - img [ref=e122]
+        - generic [ref=e125]: 创建新 Agent
+    - generic [ref=e127]:
+      - generic [ref=e128]: 用
+      - generic [ref=e129]: 用户
+      - button "打开设置" [ref=e130]:
+        - img [ref=e131]
+  - main [ref=e134]:
+    - generic [ref=e136]:
+      - heading "trader-hand" [level=2] [ref=e137]
+      - generic [ref=e138]: Gateway 已连接
+    - generic [ref=e142]:
+      - generic [ref=e145]: 🦞
+      - paragraph [ref=e147]: 你好！ 我是 trader-hand。有什么我可以帮你的吗？
+      - generic [ref=e148]:
+        - generic [ref=e149]:
+          - img [ref=e150]
+          - generic [ref=e152]: 快速开始
+        - button "💡 帮我写一个 Python 脚本处理 Excel 文件" [ref=e153]:
+          - generic [ref=e154]: 💡
+          - generic [ref=e155]: 帮我写一个 Python 脚本处理 Excel 文件
+          - img [ref=e156]
+        - button "📊 分析这个数据集的趋势和关键指标" [ref=e158]:
+          - generic [ref=e159]: 📊
+          - generic [ref=e160]: 分析这个数据集的趋势和关键指标
+          - img [ref=e161]
+        - button "✍️ 帮我起草一份产品需求文档" [ref=e163]:
+          - generic [ref=e164]: ✍️
+          - generic [ref=e165]: 帮我起草一份产品需求文档
+          - img [ref=e166]
+      - paragraph [ref=e168]: 发送消息开始对话，或点击上方建议
+    - generic [ref=e170]:
+      - generic [ref=e171]:
+        - button "添加附件" [ref=e172]:
+          - img [ref=e173]
+        - textbox "发送给 trader-hand" [ref=e176]
+        - generic [ref=e177]:
+          - button "选择模型" [ref=e178]:
+            - generic [ref=e179]: glm-5
+            - img [ref=e180]
+          - button "发送消息" [disabled] [ref=e182]:
+            - img [ref=e183]
+      - generic [ref=e185]: Agent 在本地运行，内容由 AI 生成
+  - complementary [ref=e186]:
+    - generic [ref=e187]:
+      - generic [ref=e188]:
+        - generic [ref=e189]:
+          - img [ref=e190]
+          - generic [ref=e192]: "0"
+        - generic [ref=e193]: 当前消息
+      - tablist [ref=e194]:
+        - tab "Status" [selected] [ref=e195]:
+          - img [ref=e196]
+        - tab "Files" [ref=e198]:
+          - img [ref=e199]
+        - tab "Agent" [ref=e202]:
+          - img [ref=e203]
+        - tab "Memory" [ref=e206]:
+          - img [ref=e207]
+    - generic [ref=e215]:
+      - generic [ref=e216]:
+        - generic [ref=e217]:
+          - generic [ref=e218]:
+            - img [ref=e219]
+            - generic [ref=e223]: Gateway Connected
+          - button "Refresh data" [ref=e224]:
+            - img [ref=e225]
+        - generic [ref=e230]:
+          - generic [ref=e231]:
+            - generic [ref=e232]: 地址
+            - generic [ref=e233]: ws://127.0.0.1:50051/ws
+          - generic [ref=e234]:
+            - generic [ref=e235]: 当前模型
+            - generic [ref=e236]: glm-5
+      - generic [ref=e237]:
+        - heading "当前会话" [level=3] [ref=e238]:
+          - img [ref=e239]
+          - text: 当前会话
+        - generic [ref=e241]:
+          - generic [ref=e242]:
+            - generic [ref=e243]: 用户消息
+            - generic [ref=e244]: "0"
+          - generic [ref=e245]:
+            - generic [ref=e246]: 助手回复
+            - generic [ref=e247]: "0"
+          - generic [ref=e248]:
+            - generic [ref=e249]: 工具调用
+            - generic [ref=e250]: "0"
+          - generic [ref=e251]:
+            - generic [ref=e252]: 总消息数
+            - generic [ref=e253]: "0"
+      - generic [ref=e254]:
+        - heading "分身状态" [level=3] [ref=e255]:
+          - img [ref=e256]
+          - text: 分身状态
+        - generic [ref=e259]:
+          - generic [ref=e260]:
+            - img [ref=e262]
+            - generic [ref=e265]: trader-hand
+          - generic [ref=e266]:
+            - img [ref=e268]
+            - generic [ref=e271]: researcher
+          - generic [ref=e272]:
+            - img [ref=e274]
+            - generic [ref=e277]: browser-hand
+          - generic [ref=e278]:
+            - img [ref=e280]
+            - generic [ref=e283]: collector-hand
+          - generic [ref=e284]:
+            - img [ref=e286]
+            - generic [ref=e289]: researcher-hand
+          - paragraph [ref=e290]: +4 个分身
+      - generic [ref=e291]:
+        - heading "用量统计" [level=3] [ref=e292]:
+          - img [ref=e293]
+          - text: 用量统计
+        - generic [ref=e295]:
+          - generic [ref=e296]:
+            - generic [ref=e297]: 总会话数
+            - generic [ref=e298]: "0"
+          - generic [ref=e299]:
+            - generic [ref=e300]: 总消息数
+            - generic [ref=e301]: "0"
+          - generic [ref=e302]:
+            - generic [ref=e303]: 总 Token
+            - generic [ref=e304]: "0"
+      - generic [ref=e305]:
+        - heading "插件 (3)" [level=3] [ref=e306]:
+          - img [ref=e307]
+          - text: 插件 (3)
+        - generic [ref=e309]:
+          - generic [ref=e310]:
+            - generic [ref=e311]: Chat
+            - generic [ref=e312]: 运行中
+          - generic [ref=e313]:
+            - generic [ref=e314]: Code
+            - generic [ref=e315]: 运行中
+          - generic [ref=e316]:
+            - generic [ref=e317]: File
+            - generic [ref=e318]: 运行中
+      - generic [ref=e319]:
+        - heading "运行概览" [level=3] [ref=e320]:
+          - img [ref=e321]
+          - text: 运行概览
+        - generic [ref=e324]:
+          - generic [ref=e325]:
+            - generic [ref=e326]: 连接状态
+            - generic [ref=e327]: 已连接
+          - generic [ref=e328]:
+            - generic [ref=e329]: Gateway 版本
+            - generic [ref=e330]: "-"
+          - generic [ref=e331]:
+            - generic [ref=e332]: 已加载分身
+            - generic [ref=e333]: "9"
+          - generic [ref=e334]:
+            - generic [ref=e335]: 已加载插件
+            - generic [ref=e336]: "3"
+```
\ No newline at end of file
diff --git a/desktop/test-results/functional-scenarios-4-Hands-系统-4-1-Hands-列表显示-chromium/test-failed-1.png b/desktop/test-results/functional-scenarios-4-Hands-系统-4-1-Hands-列表显示-chromium/test-failed-1.png
new file mode 100644
index 0000000..f872849
Binary files /dev/null and b/desktop/test-results/functional-scenarios-4-Hands-系统-4-1-Hands-列表显示-chromium/test-failed-1.png differ
diff --git a/desktop/test-results/functional-scenarios-4-Hands-系统-4-1-Hands-列表显示-chromium/video.webm b/desktop/test-results/functional-scenarios-4-Hands-系统-4-1-Hands-列表显示-chromium/video.webm
new file mode 100644
index 0000000..2e8c5ff
Binary files /dev/null and b/desktop/test-results/functional-scenarios-4-Hands-系统-4-1-Hands-列表显示-chromium/video.webm differ
diff --git a/desktop/test-results/functional-scenarios-8-设置页面-8-3-模型配置-chromium/error-context.md b/desktop/test-results/functional-scenarios-8-设置页面-8-3-模型配置-chromium/error-context.md
new file mode 100644
index 0000000..094c1da
--- /dev/null
+++ b/desktop/test-results/functional-scenarios-8-设置页面-8-3-模型配置-chromium/error-context.md
@@ -0,0 +1,89 @@
+# Page snapshot
+
+```yaml
+- generic [ref=e3]:
+  - complementary [ref=e4]:
+    - button "返回应用" [ref=e6]:
+      - img [ref=e7]
+      - generic [ref=e9]: 返回应用
+    - navigation [ref=e10]:
+      - button "通用" [ref=e11]:
+        - img [ref=e12]
+        - generic [ref=e15]: 通用
+      - button "用量统计" [ref=e16]:
+        - img [ref=e17]
+        - generic [ref=e19]: 用量统计
+      - button "积分详情" [ref=e20]:
+        - img [ref=e21]
+        - generic [ref=e26]: 积分详情
+      - button "模型与 API" [ref=e27]:
+        - img [ref=e28]
+        - generic [ref=e31]: 模型与 API
+      - button "MCP 服务" [ref=e32]:
+        - img [ref=e33]
+        - generic [ref=e35]: MCP 服务
+      - button "技能" [ref=e36]:
+        - img [ref=e37]
+        - generic [ref=e39]: 技能
+      - button "IM 频道" [ref=e40]:
+        - img [ref=e41]
+        - generic [ref=e43]: IM 频道
+      - button "工作区" [ref=e44]:
+        - img [ref=e45]
+        - generic [ref=e47]: 工作区
+      - button "数据与隐私" [ref=e48]:
+        - img [ref=e49]
+        - generic [ref=e51]: 数据与隐私
+      - button "安全状态" [ref=e52]:
+        - img [ref=e53]
+        - generic [ref=e55]: 安全状态
+      - button "审计日志" [ref=e56]:
+        - img [ref=e57]
+        - generic [ref=e60]: 审计日志
+      - button "定时任务" [ref=e61]:
+        - img [ref=e62]
+        - generic [ref=e65]: 定时任务
+      - button "提交反馈" [ref=e66]:
+        - img [ref=e67]
+        - generic [ref=e70]: 提交反馈
+      - button "关于" [ref=e71]:
+        - img [ref=e72]
+        - generic [ref=e74]: 关于
+  - main [ref=e75]:
+    - generic [ref=e76]:
+      - heading "通用设置" [level=1] [ref=e77]
+      - heading "Gateway 连接" [level=2] [ref=e78]
+      - generic [ref=e79]:
+        - generic [ref=e80]:
+          - generic [ref=e81]: 状态
+          - generic [ref=e84]: 已连接
+        - generic [ref=e85]:
+          - generic [ref=e86]: 地址
+          - generic [ref=e87]: ws://127.0.0.1:50051
+        - generic [ref=e88]:
+          - generic [ref=e89]: Token
+          - textbox "可选：Gateway auth token" [ref=e90]
+        - generic [ref=e91]:
+          - generic [ref=e92]: 当前模型
+          - generic [ref=e93]: glm-5
+        - button "断开连接" [ref=e95]
+      - heading "外观与行为" [level=2] [ref=e96]
+      - generic [ref=e97]:
+        - generic [ref=e98]:
+          - generic [ref=e99]:
+            - generic [ref=e100]: 主题模式
+            - generic [ref=e101]: 选择浅色或深色模式。
+          - generic [ref=e102]:
+            - button [ref=e103]
+            - button [ref=e104]
+        - generic [ref=e105]:
+          - generic [ref=e106]:
+            - generic [ref=e107]: 开机自启
+            - generic [ref=e108]: 登录时自动启动 ZCLAW。
+          - button [ref=e109]
+        - generic [ref=e111]:
+          - generic [ref=e112]:
+            - generic [ref=e113]: 显示工具调用
+            - generic [ref=e114]: 在对话消息中显示模型的工具调用详情块。
+          - button [ref=e115]
+```
\ No newline at end of file
diff --git a/desktop/test-results/functional-scenarios-8-设置页面-8-3-模型配置-chromium/test-failed-1.png b/desktop/test-results/functional-scenarios-8-设置页面-8-3-模型配置-chromium/test-failed-1.png
new file mode 100644
index 0000000..dae5e58
Binary files /dev/null and b/desktop/test-results/functional-scenarios-8-设置页面-8-3-模型配置-chromium/test-failed-1.png differ
diff --git a/desktop/test-results/functional-scenarios-8-设置页面-8-3-模型配置-chromium/video.webm b/desktop/test-results/functional-scenarios-8-设置页面-8-3-模型配置-chromium/video.webm
new file mode 100644
index 0000000..17db473
Binary files /dev/null and b/desktop/test-results/functional-scenarios-8-设置页面-8-3-模型配置-chromium/video.webm differ
diff --git a/desktop/test-results/screenshots/01-app-layout.png b/desktop/test-results/screenshots/01-app-layout.png
new file mode 100644
index 0000000..f872849
Binary files /dev/null and b/desktop/test-results/screenshots/01-app-layout.png differ
diff --git a/desktop/test-results/screenshots/02-connection-state.png b/desktop/test-results/screenshots/02-connection-state.png
new file mode 100644
index 0000000..f872849
Binary files /dev/null and b/desktop/test-results/screenshots/02-connection-state.png differ
diff --git a/desktop/test-results/screenshots/02-sidebar-navigation.png b/desktop/test-results/screenshots/02-sidebar-navigation.png
new file mode 100644
index 0000000..f872849
Binary files /dev/null and b/desktop/test-results/screenshots/02-sidebar-navigation.png differ
diff --git a/desktop/test-results/screenshots/03-chat-input.png b/desktop/test-results/screenshots/03-chat-input.png
new file mode 100644
index 0000000..d452756
Binary files /dev/null and b/desktop/test-results/screenshots/03-chat-input.png differ
diff --git a/desktop/test-results/screenshots/03-navigation-switch.png b/desktop/test-results/screenshots/03-navigation-switch.png
new file mode 100644
index 0000000..f7dfb18
Binary files /dev/null and b/desktop/test-results/screenshots/03-navigation-switch.png differ
diff --git a/desktop/test-results/screenshots/04-chat-response.png b/desktop/test-results/screenshots/04-chat-response.png
new file mode 100644
index 0000000..10417a6
Binary files /dev/null and b/desktop/test-results/screenshots/04-chat-response.png differ
diff --git a/desktop/test-results/screenshots/04-settings-access.png b/desktop/test-results/screenshots/04-settings-access.png
new file mode 100644
index 0000000..dae5e58
Binary files /dev/null and b/desktop/test-results/screenshots/04-settings-access.png differ
diff --git a/desktop/test-results/screenshots/05-chat-area.png b/desktop/test-results/screenshots/05-chat-area.png
new file mode 100644
index 0000000..1d548e2
Binary files /dev/null and b/desktop/test-results/screenshots/05-chat-area.png differ
diff --git a/desktop/test-results/screenshots/06-message-send.png b/desktop/test-results/screenshots/06-message-send.png
new file mode 100644
index 0000000..2f8df63
Binary files /dev/null and b/desktop/test-results/screenshots/06-message-send.png differ
diff --git a/desktop/test-results/screenshots/07-conversation-list.png b/desktop/test-results/screenshots/07-conversation-list.png
new file mode 100644
index 0000000..a798ec2
Binary files /dev/null and b/desktop/test-results/screenshots/07-conversation-list.png differ
diff --git a/desktop/test-results/screenshots/07-streaming-response.png b/desktop/test-results/screenshots/07-streaming-response.png
new file mode 100644
index 0000000..586abe2
Binary files /dev/null and b/desktop/test-results/screenshots/07-streaming-response.png differ
diff --git a/desktop/test-results/screenshots/08-hands-list.png b/desktop/test-results/screenshots/08-hands-list.png
new file mode 100644
index 0000000..a798ec2
Binary files /dev/null and b/desktop/test-results/screenshots/08-hands-list.png differ
diff --git a/desktop/test-results/screenshots/08-offline-error.png b/desktop/test-results/screenshots/08-offline-error.png
new file mode 100644
index 0000000..279ceb1
Binary files /dev/null and b/desktop/test-results/screenshots/08-offline-error.png differ
diff --git a/desktop/test-results/screenshots/10-scheduler-panel.png b/desktop/test-results/screenshots/10-scheduler-panel.png
new file mode 100644
index 0000000..a798ec2
Binary files /dev/null and b/desktop/test-results/screenshots/10-scheduler-panel.png differ
diff --git a/desktop/test-results/screenshots/12-team-view.png b/desktop/test-results/screenshots/12-team-view.png
new file mode 100644
index 0000000..a798ec2
Binary files /dev/null and b/desktop/test-results/screenshots/12-team-view.png differ
diff --git a/desktop/test-results/screenshots/13-swarm-dashboard.png b/desktop/test-results/screenshots/13-swarm-dashboard.png
new file mode 100644
index 0000000..f872849
Binary files /dev/null and b/desktop/test-results/screenshots/13-swarm-dashboard.png differ
diff --git a/desktop/test-results/screenshots/14-settings-page.png b/desktop/test-results/screenshots/14-settings-page.png
new file mode 100644
index 0000000..dae5e58
Binary files /dev/null and b/desktop/test-results/screenshots/14-settings-page.png differ
diff --git a/desktop/test-results/screenshots/15-general-settings.png b/desktop/test-results/screenshots/15-general-settings.png
new file mode 100644
index 0000000..dae5e58
Binary files /dev/null and b/desktop/test-results/screenshots/15-general-settings.png differ
diff --git a/desktop/test-results/screenshots/16-model-settings.png b/desktop/test-results/screenshots/16-model-settings.png
new file mode 100644
index 0000000..dae5e58
Binary files /dev/null and b/desktop/test-results/screenshots/16-model-settings.png differ
diff --git a/desktop/test-results/screenshots/17-right-panel.png b/desktop/test-results/screenshots/17-right-panel.png
new file mode 100644
index 0000000..a798ec2
Binary files /dev/null and b/desktop/test-results/screenshots/17-right-panel.png differ
diff --git a/desktop/test-results/screenshots/17-workflow-list.png b/desktop/test-results/screenshots/17-workflow-list.png
new file mode 100644
index 0000000..f872849
Binary files /dev/null and b/desktop/test-results/screenshots/17-workflow-list.png differ
diff --git a/desktop/test-results/screenshots/18-offline-error.png b/desktop/test-results/screenshots/18-offline-error.png
new file mode 100644
index 0000000..a798ec2
Binary files /dev/null and b/desktop/test-results/screenshots/18-offline-error.png differ
diff --git a/desktop/test-results/screenshots/18-workflow-create.png b/desktop/test-results/screenshots/18-workflow-create.png
new file mode 100644
index 0000000..1274e56
Binary files /dev/null and b/desktop/test-results/screenshots/18-workflow-create.png differ
diff --git a/desktop/test-results/screenshots/20-mobile-layout.png b/desktop/test-results/screenshots/20-mobile-layout.png
new file mode 100644
index 0000000..77c4e3d
Binary files /dev/null and b/desktop/test-results/screenshots/20-mobile-layout.png differ
diff --git a/desktop/test-results/screenshots/21-tablet-layout.png b/desktop/test-results/screenshots/21-tablet-layout.png
new file mode 100644
index 0000000..396795e
Binary files /dev/null and b/desktop/test-results/screenshots/21-tablet-layout.png differ
diff --git a/desktop/test-results/screenshots/21-team-list.png b/desktop/test-results/screenshots/21-team-list.png
new file mode 100644
index 0000000..f872849
Binary files /dev/null and b/desktop/test-results/screenshots/21-team-list.png differ
diff --git a/desktop/test-results/screenshots/22-desktop-layout.png b/desktop/test-results/screenshots/22-desktop-layout.png
new file mode 100644
index 0000000..7618cc5
Binary files /dev/null and b/desktop/test-results/screenshots/22-desktop-layout.png differ
diff --git a/desktop/test-results/screenshots/24-swarm-dashboard.png b/desktop/test-results/screenshots/24-swarm-dashboard.png
new file mode 100644
index 0000000..f872849
Binary files /dev/null and b/desktop/test-results/screenshots/24-swarm-dashboard.png differ
diff --git a/desktop/test-results/screenshots/27-settings-page.png b/desktop/test-results/screenshots/27-settings-page.png
new file mode 100644
index 0000000..dae5e58
Binary files /dev/null and b/desktop/test-results/screenshots/27-settings-page.png differ
diff --git a/desktop/test-results/screenshots/28-general-settings.png b/desktop/test-results/screenshots/28-general-settings.png
new file mode 100644
index 0000000..dae5e58
Binary files /dev/null and b/desktop/test-results/screenshots/28-general-settings.png differ
diff --git a/desktop/test-results/screenshots/30-gateway-settings.png b/desktop/test-results/screenshots/30-gateway-settings.png
new file mode 100644
index 0000000..dae5e58
Binary files /dev/null and b/desktop/test-results/screenshots/30-gateway-settings.png differ
diff --git a/desktop/test-results/screenshots/32-right-panel.png b/desktop/test-results/screenshots/32-right-panel.png
new file mode 100644
index 0000000..f872849
Binary files /dev/null and b/desktop/test-results/screenshots/32-right-panel.png differ
diff --git a/desktop/test-results/screenshots/35-first-time-user.png b/desktop/test-results/screenshots/35-first-time-user.png
new file mode 100644
index 0000000..a798ec2
Binary files /dev/null and b/desktop/test-results/screenshots/35-first-time-user.png differ
diff --git a/desktop/test-results/screenshots/37-view-switching.png b/desktop/test-results/screenshots/37-view-switching.png
new file mode 100644
index 0000000..f872849
Binary files /dev/null and b/desktop/test-results/screenshots/37-view-switching.png differ
diff --git a/desktop/test-results/screenshots/38-session-persistence.png b/desktop/test-results/screenshots/38-session-persistence.png
new file mode 100644
index 0000000..e8e1564
Binary files /dev/null and b/desktop/test-results/screenshots/38-session-persistence.png differ
diff --git a/desktop/test-results/screenshots/39-rapid-switching.png b/desktop/test-results/screenshots/39-rapid-switching.png
new file mode 100644
index 0000000..f872849
Binary files /dev/null and b/desktop/test-results/screenshots/39-rapid-switching.png differ
diff --git a/desktop/test-results/screenshots/41-keyboard-nav.png b/desktop/test-results/screenshots/41-keyboard-nav.png
new file mode 100644
index 0000000..a4fc7c5
Binary files /dev/null and b/desktop/test-results/screenshots/41-keyboard-nav.png differ
diff --git a/desktop/tests/e2e/KNOWN_ISSUES.md b/desktop/tests/e2e/KNOWN_ISSUES.md
new file mode 100644
index 0000000..035d465
--- /dev/null
+++ b/desktop/tests/e2e/KNOWN_ISSUES.md
@@ -0,0 +1,209 @@
+# E2E 测试已知问题与修复指南
+
+> 最后更新: 2026-03-17
+> 测试通过率: 88% (65/74)
+
+## 当前状态
+
+### 测试结果摘要
+- **总测试**: 74
+- **通过**: 65
+- **失败**: 9
+
+### 快速运行测试命令
+```bash
+cd g:/ZClaw_openfang/desktop
+
+# 运行全部测试
+pnpm exec playwright test --config=tests/e2e/playwright.config.ts --reporter=list
+
+# 仅运行 app-verification (全部通过)
+pnpm exec playwright test --config=tests/e2e/playwright.config.ts tests/e2e/specs/app-verification.spec.ts --reporter=list
+
+# 仅运行 functional-scenarios
+pnpm exec playwright test --config=tests/e2e/playwright.config.ts tests/e2e/specs/functional-scenarios.spec.ts --reporter=list
+```
+
+---
+
+## 问题 1: 聊天输入禁用问题
+
+### 现象
+测试在尝试填写聊天输入框时失败，因为 Agent 正在回复中 (`isStreaming=true`)，导致输入框被禁用。
+
+### 错误信息
+```
+locator resolved to <textarea rows="1" disabled placeholder="Agent 正在回复..." ...>
+element is not enabled
+```
+
+### 影响的测试
+- `10. 完整用户流程 › 10.2 完整聊天流程`
+- `11. 性能与稳定性 › 11.4 长时间运行稳定性`
+
+### 修复方案
+
+#### 方案 A: 在测试中等待 streaming 完成
+```typescript
+// 在 functional-scenarios.spec.ts 中添加等待逻辑
+async function waitForChatReady(page: Page) {
+  const chatInput = page.locator('textarea').first();
+  // 等待输入框可用
+  await page.waitForFunction(() => {
+    const textarea = document.querySelector('textarea');
+    return textarea && !textarea.disabled;
+  }, { timeout: 30000 });
+}
+```
+
+#### 方案 B: 在组件中添加可中断的 streaming
+修改 `ChatArea.tsx` 允许用户在 streaming 时中断并输入新消息。
+
+### 相关文件
+- `desktop/src/components/ChatArea.tsx:178` - `disabled={isStreaming || !input.trim() || !connected}`
+- `desktop/tests/e2e/specs/functional-scenarios.spec.ts:1016` - 失败的测试行
+
+---
+
+## 问题 2: Hands 列表为空
+
+### 现象
+测试期望找到 Hands 卡片，但实际找到 0 个。API `/api/hands` 返回数据正常。
+
+### 错误信息
+```
+Found 0 hand cards
+```
+
+### 影响的测试
+- `3. Agent/分身管理 › 3.1 分身列表显示`
+- `4. Hands 系统 › 4.1 Hands 列表显示`
+
+### 根因分析
+1. Hands 数据从 API 加载是异步的
+2. 测试可能在数据加载完成前就检查 DOM
+3. HandList 组件可能没有正确渲染数据
+
+### 修复方案
+
+#### 方案 A: 在测试中增加等待时间
+```typescript
+// 在 functional-scenarios.spec.ts 中修改
+test('4.1 Hands 列表显示', async ({ page }) => {
+  await navigateToTab(page, 'Hands');
+  await page.waitForTimeout(2000); // 增加等待时间
+  await page.waitForSelector('button:has-text("Hand")', { timeout: 10000 });
+  // ... 继续测试
+});
+```
+
+#### 方案 B: 在 HandList 组件中添加加载状态
+确保组件在数据加载时显示 loading 状态，数据加载后正确渲染。
+
+### 验证 API 返回数据
+```bash
+curl -s http://127.0.0.1:50051/api/hands | head -c 500
+```
+
+### 相关文件
+- `desktop/src/components/HandList.tsx` - Hands 列表组件
+- `desktop/src/store/gatewayStore.ts:1175` - loadHands 函数
+- `desktop/tests/e2e/specs/functional-scenarios.spec.ts:406` - 失败的测试
+
+---
+
+## 问题 3: 模型配置测试失败
+
+### 现象
+测试在设置页面中找不到模型配置相关的 UI 元素。
+
+### 影响的测试
+- `8. 设置页面 › 8.3 模型配置`
+
+### 修复方案
+检查设置页面的模型配置部分是否存在，以及选择器是否正确。
+
+### 相关文件
+- `desktop/src/components/Settings/SettingsLayout.tsx`
+- `desktop/tests/e2e/specs/functional-scenarios.spec.ts:729`
+
+---
+
+## 问题 4: 应用启动测试断言失败
+
+### 现象
+测试期望所有导航标签都存在，但可能某些标签未渲染。
+
+### 影响的测试
+- `1. 应用启动与初始化 › 1.1 应用正常启动并渲染所有核心组件`
+
+### 修复方案
+调整测试断言，使其更灵活地处理异步加载的组件。
+
+---
+
+## API 端点状态
+
+### 正常工作的端点 (200)
+- `/api/status` - Gateway 状态
+- `/api/agents` - Agent 列表
+- `/api/hands` - Hands 列表
+- `/api/config` - 配置读取
+- `/api/chat` - 聊天 (WebSocket streaming)
+
+### 返回 404 的端点 (有 fallback 处理)
+- `/api/workspace`
+- `/api/stats/usage`
+- `/api/plugins/status`
+- `/api/scheduler/tasks`
+- `/api/security/status`
+
+这些 404 是预期行为，应用有 fallback 机制处理。
+
+---
+
+## 测试文件修改记录
+
+### 已修复的选择器问题
+1. **侧边栏导航** - 使用 `getByRole('tab', { name: '分身' })` 替代正则匹配
+2. **发送按钮** - 使用 `getByRole('button', { name: '发送消息' })` 替代模糊匹配
+3. **Strict mode 问题** - 修复多个 `.or()` 选择器导致的 strict mode violation
+
+### 测试配置文件
+- `desktop/tests/e2e/playwright.config.ts` - Playwright 配置
+- `desktop/tests/e2e/specs/app-verification.spec.ts` - 基础验证测试 (28/28 通过)
+- `desktop/tests/e2e/specs/functional-scenarios.spec.ts` - 功能场景测试 (37/46 通过)
+
+---
+
+## 截图位置
+```
+desktop/test-results/screenshots/
+desktop/test-results/functional-scenarios-*-chromium/
+```
+
+## 下一步行动建议
+
+1. **优先级 P0**: 修复聊天输入禁用问题 (影响多个测试)
+2. **优先级 P1**: 修复 Hands 列表渲染问题
+3. **优先级 P2**: 优化模型配置测试
+4. **优先级 P3**: 清理长时间运行稳定性测试
+
+---
+
+## 新会话启动提示
+
+在新会话中，可以使用以下提示快速开始：
+
+```
+我需要继续修复 ZCLAW 桌面应用的 E2E 测试问题。
+
+当前状态:
+- 测试通过率 88% (65/74)
+- 已知问题记录在 desktop/tests/e2e/KNOWN_ISSUES.md
+
+请帮我:
+1. 阅读 KNOWN_ISSUES.md 了解详细问题
+2. 从优先级 P0 (聊天输入禁用问题) 开始修复
+3. 修复后运行测试验证
+```
diff --git a/desktop/tests/e2e/debug.mjs b/desktop/tests/e2e/debug.mjs
new file mode 100644
index 0000000..32927e5
--- /dev/null
+++ b/desktop/tests/e2e/debug.mjs
@@ -0,0 +1,263 @@
+/**
+ * ZCLAW 功能验证脚本 - Playwright CLI (改进版)
+ */
+
+import { chromium } from 'playwright';
+
+const BASE_URL = 'http://localhost:1420';
+const SCREENSHOT_DIR = 'test-results/screenshots';
+
+const results = { passed: [], failed: [], warnings: [], screenshots: [] };
+
+function log(msg) {
+  console.log(`[${new Date().toISOString().slice(11, 19)}] ${msg}`);
+}
+
+async function screenshot(page, name) {
+  try {
+    await page.screenshot({ path: `${SCREENSHOT_DIR}/${name}.png`, fullPage: true });
+    results.screenshots.push(name);
+    log(`📸 ${name}.png`);
+  } catch (e) {
+    log(`⚠️ 截图失败: ${name}`);
+  }
+}
+
+async function test(name, fn) {
+  try {
+    await fn();
+    results.passed.push(name);
+    log(`✅ ${name}`);
+  } catch (e) {
+    results.failed.push({ name, error: e.message });
+    log(`❌ ${name} - ${e.message}`);
+  }
+}
+
+async function main() {
+  log('🚀 ZCLAW 功能验证测试 (改进版)');
+  log(`📍 ${BASE_URL}`);
+
+  const browser = await chromium.launch({ headless: true });
+  const page = await browser.newPage({ viewport: { width: 1920, height: 1080 } });
+
+  const logs = [];
+  page.on('console', msg => logs.push(`[${msg.type()}] ${msg.text()}`));
+  page.on('pageerror', e => logs.push(`[error] ${e.message}`));
+
+  try {
+    // === 套件 1: 应用启动 ===
+    log('\n📋 应用启动与初始化');
+
+    await test('1.1 应用加载', async () => {
+      await page.goto(BASE_URL, { timeout: 10000 });
+      await page.waitForLoadState('domcontentloaded');
+      await page.waitForTimeout(2000);
+      await screenshot(page, '01-app');
+    });
+
+    await test('1.2 左侧边栏', async () => {
+      const sidebar = page.locator('aside').first();
+      if (!await sidebar.isVisible()) throw new Error('左侧边栏不可见');
+      await screenshot(page, '02-sidebar');
+    });
+
+    await test('1.3 主区域', async () => {
+      if (!await page.locator('main').isVisible()) throw new Error('主区域不可见');
+      await screenshot(page, '03-main');
+    });
+
+    await test('1.4 右侧边栏', async () => {
+      const rightPanel = page.locator('aside').last();
+      if (!await rightPanel.isVisible()) throw new Error('右侧边栏不可见');
+      await screenshot(page, '04-right-panel');
+    });
+
+    // === 套件 2: 标签导航 ===
+    log('\n📋 标签导航');
+
+    await test('2.1 分身标签', async () => {
+      const tab = page.locator('button[role="tab"]').filter({ hasText: '分身' });
+      if (await tab.count() > 0) {
+        await tab.first().click();
+        await page.waitForTimeout(500);
+        await screenshot(page, 'tab-clones');
+      } else {
+        throw new Error('分身标签不可见');
+      }
+    });
+
+    await test('2.2 Hands 标签', async () => {
+      const tab = page.locator('button[role="tab"]').filter({ hasText: 'Hands' });
+      if (await tab.count() > 0) {
+        await tab.first().click();
+        await page.waitForTimeout(500);
+        await screenshot(page, 'tab-hands');
+      } else {
+        throw new Error('Hands 标签不可见');
+      }
+    });
+
+    await test('2.3 工作流标签', async () => {
+      const tab = page.locator('button[role="tab"]').filter({ hasText: '工作流' });
+      if (await tab.count() > 0) {
+        await tab.first().click();
+        await page.waitForTimeout(500);
+        await screenshot(page, 'tab-workflow');
+      } else {
+        throw new Error('工作流标签不可见');
+      }
+    });
+
+    await test('2.4 团队标签', async () => {
+      const tab = page.locator('button[role="tab"]').filter({ hasText: '团队' });
+      if (await tab.count() > 0) {
+        await tab.first().click();
+        await page.waitForTimeout(500);
+        await screenshot(page, 'tab-team');
+      } else {
+        throw new Error('团队标签不可见');
+      }
+    });
+
+    await test('2.5 协作标签', async () => {
+      const tab = page.locator('button[role="tab"]').filter({ hasText: '协作' });
+      if (await tab.count() > 0) {
+        await tab.first().click();
+        await page.waitForTimeout(500);
+        await screenshot(page, 'tab-swarm');
+      } else {
+        throw new Error('协作标签不可见');
+      }
+    });
+
+    // === 套件 3: Gateway 状态 ===
+    log('\n📋 Gateway 连接状态');
+
+    await test('3.1 连接状态显示', async () => {
+      const content = await page.content();
+      if (content.includes('Gateway 未连接') || content.includes('Connecting')) {
+        results.warnings.push('Gateway 未连接 - 需启动后端');
+      }
+      await screenshot(page, '05-gateway');
+    });
+
+    // === 套件 4: 设置 ===
+    log('\n📋 设置页面');
+
+    await test('4.1 打开设置', async () => {
+      const btn = page.getByRole('button', { name: /设置|Settings/i });
+      if (await btn.count() > 0) {
+        await btn.first().click();
+        await page.waitForTimeout(500);
+        await screenshot(page, '06-settings');
+      } else {
+        throw new Error('设置按钮不可见');
+      }
+    });
+
+    // === 套件 5: 聊天 ===
+    log('\n📋 聊天功能');
+
+    await test('5.1 聊天输入框', async () => {
+      await page.goto(BASE_URL, { timeout: 10000 });
+      await page.waitForTimeout(1000);
+      const input = page.locator('textarea');
+      if (await input.count() > 0) {
+        if (await input.first().isDisabled()) {
+          results.warnings.push('输入框已禁用 - 需 Gateway 连接');
+        }
+      } else {
+        throw new Error('聊天输入框不可见');
+      }
+      await screenshot(page, '07-chat');
+    });
+
+    await test('5.2 模型选择器', async () => {
+      const selector = page.locator('button').filter({ hasText: /模型|model/i });
+      if (await selector.count() > 0) {
+        await selector.first().click();
+        await page.waitForTimeout(300);
+        await screenshot(page, '08-model-selector');
+      }
+    });
+
+    // === 套件 6: 控制台错误 ===
+    log('\n📋 控制台错误');
+
+    await test('6.1 JS 错误检查', async () => {
+      const errors = logs.filter(l => l.includes('[error]'));
+      const criticalErrors = errors.filter(e =>
+        !e.includes('DevTools') &&
+        !e.includes('extension')
+      );
+      if (criticalErrors.length > 0) {
+        results.warnings.push(`发现 ${criticalErrors.length} 个 JS 错误`);
+        criticalErrors.slice(0, 5).forEach(e => log(`  ${e.slice(0, 100)}...`));
+      }
+    });
+
+    // === 套件 7: 响应式 ===
+    log('\n📋 响应式布局');
+
+    await test('7.1 移动端', async () => {
+      await page.setViewportSize({ width: 375, height: 667 });
+      await page.waitForTimeout(500);
+      await screenshot(page, '09-mobile');
+    });
+
+    await test('7.2 平板', async () => {
+      await page.setViewportSize({ width: 768, height: 1024 });
+      await page.waitForTimeout(500);
+      await screenshot(page, '10-tablet');
+    });
+
+    await test('7.3 桌面', async () => {
+      await page.setViewportSize({ width: 1920, height: 1080 });
+      await page.waitForTimeout(500);
+      await screenshot(page, '11-desktop');
+    });
+
+    // === 套件 8: 性能 ===
+    log('\n📋 性能');
+
+    await test('8.1 加载时间', async () => {
+      const start = Date.now();
+      await page.goto(BASE_URL, { timeout: 10000 });
+      const time = Date.now() - start;
+      log(`加载时间: ${time}ms`);
+      if (time > 5000) results.warnings.push(`加载时间较长: ${time}ms`);
+    });
+
+    await test('8.2 DOM 数量', async () => {
+      const count = await page.evaluate(() => document.querySelectorAll('*').length);
+      log(`DOM 节点: ${count}`);
+      if (count > 3000) results.warnings.push(`DOM 过多: ${count}`);
+    });
+
+  } catch (e) {
+    log(`❌ 执行出错: ${e.message}`);
+  } finally {
+    await browser.close();
+  }
+
+  // 报告
+  console.log('\n' + '='.repeat(60));
+  console.log('📊 ZCLAW 功能验证报告');
+  console.log('='.repeat(60));
+  console.log(`\n✅ 通过: ${results.passed.length}`);
+  results.passed.forEach(n => console.log(`   - ${n}`));
+  console.log(`\n❌ 失败: ${results.failed.length}`);
+  results.failed.forEach(f => console.log(`   - ${f.name}: ${f.error}`));
+  console.log(`\n⚠️ 警告: ${results.warnings.length}`);
+  results.warnings.forEach(w => console.log(`   - ${w}`));
+  console.log(`\n📸 截图: ${results.screenshots.length} 张`);
+
+  const total = results.passed.length + results.failed.length;
+  const rate = total > 0 ? ((results.passed.length / total) * 100).toFixed(1) : 0;
+  console.log(`\n总计: ${total} | 通过: ${results.passed.length} | 失败: ${results.failed.length} | 通过率: ${rate}%`);
+
+  process.exit(results.failed.length > 0 ? 1 : 0);
+}
+
+main().catch(console.error);
diff --git a/desktop/tests/e2e/playwright.config.ts b/desktop/tests/e2e/playwright.config.ts
new file mode 100644
index 0000000..c7dd348
--- /dev/null
+++ b/desktop/tests/e2e/playwright.config.ts
@@ -0,0 +1,27 @@
+import { defineConfig, devices } from '@playwright/test';
+
+export default defineConfig({
+  testDir: './specs',
+  fullyParallel: true,
+  forbidOnly: !!process.env.CI,
+  retries: process.env.CI ? 2 : 0,
+  workers: process.env.CI ? 1 : undefined,
+  reporter: 'html',
+  use: {
+    baseURL: 'http://localhost:1420',
+    trace: 'on-first-retry',
+    screenshot: 'only-on-failure',
+    video: 'retain-on-failure',
+  },
+  projects: [
+    {
+      name: 'chromium',
+      use: { ...devices['Desktop Chrome'] },
+    },
+  ],
+  webServer: {
+    command: 'pnpm dev',
+    url: 'http://localhost:1420',
+    reuseExistingServer: true,
+  },
+});
diff --git a/desktop/tests/e2e/quick-test.mjs b/desktop/tests/e2e/quick-test.mjs
new file mode 100644
index 0000000..c8c35d2
--- /dev/null
+++ b/desktop/tests/e2e/quick-test.mjs
@@ -0,0 +1,211 @@
+/**
+ * ZCLAW 快速功能验证 - Playwright CLI
+ */
+
+import { chromium } from 'playwright';
+
+const BASE_URL = 'http://localhost:1420';
+const SCREENSHOT_DIR = 'test-results/screenshots';
+
+const results = { passed: [], failed: [], warnings: [], info: [] };
+
+function log(msg) {
+  console.log(`[${new Date().toISOString().slice(11, 19)}] ${msg}`);
+}
+
+async function screenshot(page, name) {
+  try {
+    await page.screenshot({ path: `${SCREENSHOT_DIR}/${name}.png`, fullPage: true });
+    log(`📸 ${name}.png`);
+  } catch (e) {}
+}
+
+async function test(name, fn) {
+  try {
+    await fn();
+    results.passed.push(name);
+    log(`✅ ${name}`);
+  } catch (e) {
+    results.failed.push({ name, error: e.message.slice(0, 100) });
+    log(`❌ ${name}`);
+  }
+}
+
+async function main() {
+  log('🚀 ZCLAW 快速功能验证');
+  log(`📍 ${BASE_URL}`);
+
+  const browser = await chromium.launch({ headless: true });
+  const page = await browser.newPage({ viewport: { width: 1920, height: 1080 } });
+
+  const logs = [];
+  page.on('console', msg => logs.push(`[${msg.type()}] ${msg.text()}`));
+  page.on('pageerror', e => logs.push(`[error] ${e.message}`));
+
+  try {
+    // === 应用加载 ===
+    log('\n📋 应用加载');
+    await page.goto(BASE_URL, { timeout: 10000 });
+    await page.waitForTimeout(2000);
+    await screenshot(page, '01-app');
+
+    // === 页面结构检查 ===
+    log('\n📋 页面结构');
+
+    await test('主区域', async () => {
+      const main = page.locator('main');
+      if (!await main.isVisible()) throw new Error('主区域不可见');
+    });
+
+    await test('左侧边栏', async () => {
+      const sidebar = page.locator('aside').first();
+      if (!await sidebar.isVisible()) throw new Error('左侧边栏不可见');
+    });
+
+    await test('右侧边栏', async () => {
+      const rightPanel = page.locator('aside').last();
+      if (!await rightPanel.isVisible()) throw new Error('右侧边栏不可见');
+    });
+
+    // === 标签检查 ===
+    log('\n📋 标签导航');
+
+    const tabNames = ['分身', 'Hands', '工作流', '团队', '协作'];
+    for (const name of tabNames) {
+      await test(`标签: ${name}`, async () => {
+        const tab = page.getByRole('button', { name: new RegExp(name, 'i') });
+        if (await tab.count() === 0) throw new Error('标签不存在');
+      });
+    }
+
+    await screenshot(page, '02-tabs');
+
+    // === 标签切换测试 (只测前3个) ===
+    log('\n📋 标签切换');
+
+    for (const name of ['分身', 'Hands', '工作流']) {
+      await test(`切换: ${name}`, async () => {
+        const tab = page.getByRole('button', { name: new RegExp(name, 'i') }).first();
+        await tab.click({ timeout: 3000 });
+        await page.waitForTimeout(300);
+      });
+    }
+
+    await screenshot(page, '03-tab-switch');
+
+    // === 设置页面 ===
+    log('\n📋 设置');
+
+    await test('设置按钮', async () => {
+      const btn = page.getByRole('button', { name: /设置|Settings/i });
+      if (await btn.count() === 0) throw new Error('设置按钮不存在');
+    });
+
+    await test('打开设置', async () => {
+      const btn = page.getByRole('button', { name: /设置|Settings/i }).first();
+      await btn.click({ timeout: 3000 });
+      await page.waitForTimeout(500);
+      await screenshot(page, '04-settings');
+    });
+
+    // === 聊天功能 ===
+    log('\n📋 聊天');
+
+    await page.goto(BASE_URL, { timeout: 5000 });
+    await page.waitForTimeout(1000);
+
+    await test('聊天输入框', async () => {
+      const input = page.locator('textarea');
+      if (await input.count() === 0) throw new Error('输入框不存在');
+      if (await input.first().isDisabled()) {
+        results.warnings.push('输入框已禁用 - 需 Gateway 连接');
+      }
+    });
+
+    await test('发送按钮', async () => {
+      const btn = page.getByRole('button', { name: /发送|Send/i });
+      if (await btn.count() === 0) throw new Error('发送按钮不存在');
+    });
+
+    await test('模型选择器', async () => {
+      const selector = page.getByRole('button', { name: /模型|Model/i });
+      if (await selector.count() === 0) throw new Error('模型选择器不存在');
+    });
+
+    await screenshot(page, '05-chat');
+
+    // === Gateway 状态 ===
+    log('\n📋 Gateway 状态');
+
+    await test('连接状态显示', async () => {
+      const content = await page.content();
+      if (content.includes('Connecting') || content.includes('未连接')) {
+        results.info.push('Gateway 状态: 未连接/连接中');
+      } else if (content.includes('已连接')) {
+        results.info.push('Gateway 状态: 已连接');
+      }
+    });
+
+    // === 控制台错误 ===
+    log('\n📋 控制台检查');
+
+    const jsErrors = logs.filter(l => l.includes('[error]') && !l.includes('DevTools'));
+    if (jsErrors.length > 0) {
+      results.warnings.push(`JS 错误: ${jsErrors.length} 个`);
+    }
+
+    // === 响应式 ===
+    log('\n📋 响应式');
+
+    await test('移动端', async () => {
+      await page.setViewportSize({ width: 375, height: 667 });
+      await page.waitForTimeout(300);
+    });
+
+    await test('桌面', async () => {
+      await page.setViewportSize({ width: 1920, height: 1080 });
+      await page.waitForTimeout(300);
+    });
+
+    await screenshot(page, '06-responsive');
+
+    // === 性能 ===
+    log('\n📋 性能');
+
+    await test('DOM 数量', async () => {
+      const count = await page.evaluate(() => document.querySelectorAll('*').length);
+      results.info.push(`DOM 节点: ${count}`);
+      if (count > 3000) results.warnings.push(`DOM 过多: ${count}`);
+    });
+
+  } catch (e) {
+    log(`❌ 执行出错: ${e.message}`);
+  } finally {
+    await browser.close();
+  }
+
+  // 报告
+  console.log('\n' + '='.repeat(60));
+  console.log('📊 ZCLAW 功能验证报告');
+  console.log('='.repeat(60));
+
+  console.log(`\n✅ 通过: ${results.passed.length}`);
+  results.passed.forEach(n => console.log(`   - ${n}`));
+
+  console.log(`\n❌ 失败: ${results.failed.length}`);
+  results.failed.forEach(f => console.log(`   - ${f.name}: ${f.error}`));
+
+  console.log(`\n⚠️ 警告: ${results.warnings.length}`);
+  results.warnings.forEach(w => console.log(`   - ${w}`));
+
+  console.log(`\nℹ️ 信息: ${results.info.length}`);
+  results.info.forEach(i => console.log(`   - ${i}`));
+
+  const total = results.passed.length + results.failed.length;
+  const rate = total > 0 ? ((results.passed.length / total) * 100).toFixed(1) : 0;
+  console.log(`\n📈 通过率: ${rate}% (${results.passed.length}/${total})`);
+
+  process.exit(results.failed.length > 0 ? 1 : 0);
+}
+
+main().catch(console.error);
diff --git a/desktop/tests/e2e/specs/app-verification.spec.ts b/desktop/tests/e2e/specs/app-verification.spec.ts
new file mode 100644
index 0000000..60a58b5
--- /dev/null
+++ b/desktop/tests/e2e/specs/app-verification.spec.ts
@@ -0,0 +1,487 @@
+/**
+ * ZCLAW 前端功能验证测试
+ *
+ * 验证所有核心功能的完整性和可用性
+ */
+
+import { test, expect, Page } from '@playwright/test';
+
+// 测试超时配置
+test.setTimeout(60000);
+
+// 辅助函数：等待组件加载
+async function waitForAppReady(page: Page) {
+  await page.waitForLoadState('networkidle');
+  // 等待主应用容器出现
+  await page.waitForSelector('.h-screen', { timeout: 10000 });
+}
+
+// 辅助函数：截图并保存
+async function takeScreenshot(page: Page, name: string) {
+  await page.screenshot({
+    path: `test-results/screenshots/${name}.png`,
+    fullPage: true
+  });
+}
+
+test.describe('ZCLAW 前端功能验证', () => {
+  test.beforeEach(async ({ page }) => {
+    await page.goto('/');
+    await waitForAppReady(page);
+  });
+
+  test.describe('1. 应用基础渲染', () => {
+    test('应用容器正确渲染', async ({ page }) => {
+      // 检查主容器存在
+      const appContainer = page.locator('.h-screen');
+      await expect(appContainer).toBeVisible();
+
+      // 检查三栏布局 - sidebar 和 main 都应该存在
+      const sidebar = page.locator('aside');
+      const mainContent = page.locator('main');
+
+      // 验证 sidebar 和 main 都存在
+      await expect(sidebar.first()).toBeVisible();
+      await expect(mainContent).toBeVisible();
+
+      await takeScreenshot(page, '01-app-layout');
+    });
+
+    test('页面标题正确', async ({ page }) => {
+      await expect(page).toHaveTitle(/ZCLAW/);
+    });
+  });
+
+  test.describe('2. Sidebar 侧边栏导航', () => {
+    test('侧边栏可见并包含导航项', async ({ page }) => {
+      // 验证侧边栏存在
+      const sidebar = page.locator('aside').first();
+      await expect(sidebar).toBeVisible();
+
+      // 检查导航按钮存在 - 使用 role="tab" 匹配
+      const cloneBtn = page.getByRole('tab', { name: '分身' });
+      const handsBtn = page.getByRole('tab', { name: 'Hands' });
+      const workflowBtn = page.getByRole('tab', { name: '工作流' });
+      const teamBtn = page.getByRole('tab', { name: '团队' });
+      const swarmBtn = page.getByRole('tab', { name: '协作' });
+
+      // 验证所有导航标签都存在
+      await expect(cloneBtn).toBeVisible();
+      await expect(handsBtn).toBeVisible();
+      await expect(workflowBtn).toBeVisible();
+      await expect(teamBtn).toBeVisible();
+      await expect(swarmBtn).toBeVisible();
+
+      await takeScreenshot(page, '02-sidebar-navigation');
+    });
+
+    test('导航切换功能', async ({ page }) => {
+      // 尝试点击不同的导航项
+      const navButtons = page.locator('button').filter({
+        has: page.locator('svg')
+      });
+
+      const count = await navButtons.count();
+      if (count > 1) {
+        await navButtons.nth(1).click();
+        await page.waitForTimeout(500);
+
+        // 验证视图切换
+        await takeScreenshot(page, '03-navigation-switch');
+      }
+    });
+
+    test('设置按钮可用', async ({ page }) => {
+      const settingsBtn = page.getByRole('button', { name: /settings|设置|⚙/i }).or(
+        page.locator('button').filter({ hasText: /设置|Settings/ })
+      );
+
+      if (await settingsBtn.isVisible()) {
+        await settingsBtn.click();
+        await page.waitForTimeout(300);
+        await takeScreenshot(page, '04-settings-access');
+      }
+    });
+  });
+
+  test.describe('3. ChatArea 聊天功能', () => {
+    test('聊天区域渲染', async ({ page }) => {
+      // 查找聊天输入框
+      const chatInput = page.locator('textarea').or(
+        page.locator('input[type="text"]')
+      ).or(
+        page.locator('[contenteditable="true"]')
+      );
+
+      // 检查消息区域
+      const messageArea = page.locator('[class*="flex-1"]').filter({
+        has: page.locator('[class*="message"], [class*="chat"]')
+      });
+
+      await takeScreenshot(page, '05-chat-area');
+
+      // 记录聊天组件状态
+      const inputExists = await chatInput.count() > 0;
+      console.log(`Chat input found: ${inputExists}`);
+    });
+
+    test('消息发送功能', async ({ page }) => {
+      const chatInput = page.locator('textarea').first();
+
+      if (await chatInput.isVisible()) {
+        await chatInput.fill('测试消息');
+
+        const sendBtn = page.getByRole('button', { name: '发送消息' });
+
+        if (await sendBtn.isVisible()) {
+          await sendBtn.click();
+          await page.waitForTimeout(500);
+        } else {
+          // 可能支持回车发送
+          await chatInput.press('Enter');
+        }
+
+        await takeScreenshot(page, '06-message-send');
+      }
+    });
+
+    test('会话列表渲染', async ({ page }) => {
+      const conversationList = page.locator('[class*="conversation"]').or(
+        page.locator('[class*="session"]')
+      ).or(
+        page.locator('ul, ol').filter({ has: page.locator('li') })
+      );
+
+      await takeScreenshot(page, '07-conversation-list');
+    });
+  });
+
+  test.describe('4. Hands 系统UI', () => {
+    test.beforeEach(async ({ page }) => {
+      // 导航到 Hands 视图
+      const handsBtn = page.getByRole('button', { name: 'Hands' });
+
+      if (await handsBtn.isVisible()) {
+        await handsBtn.click();
+        await page.waitForTimeout(1000); // 等待数据加载
+      }
+    });
+
+    test('Hands 列表渲染', async ({ page }) => {
+      const handsList = page.locator('[class*="hand"]').or(
+        page.locator('[class*="capability"]')
+      );
+
+      await takeScreenshot(page, '08-hands-list');
+
+      // 检查是否有 Hand 卡片
+      const handCards = page.locator('[class*="card"]').filter({
+        hasText: /Clip|Lead|Collector|Predictor|Researcher|Twitter|Browser/i
+      });
+
+      const cardCount = await handCards.count();
+      console.log(`Found ${cardCount} hand cards`);
+    });
+
+    test('Hand 触发按钮', async ({ page }) => {
+      const triggerBtn = page.getByRole('button', { name: /trigger|触发|执行|run/i });
+
+      if (await triggerBtn.first().isVisible()) {
+        await takeScreenshot(page, '09-hand-trigger');
+      }
+    });
+  });
+
+  test.describe('5. Workflow/Scheduler 面板', () => {
+    test.beforeEach(async ({ page }) => {
+      const workflowBtn = page.getByRole('button', { name: '工作流' });
+
+      if (await workflowBtn.isVisible()) {
+        await workflowBtn.click();
+        await page.waitForTimeout(500);
+      }
+    });
+
+    test('Scheduler 面板渲染', async ({ page }) => {
+      const schedulerPanel = page.locator('[class*="scheduler"]').or(
+        page.locator('[class*="workflow"]')
+      );
+
+      await takeScreenshot(page, '10-scheduler-panel');
+
+      // 检查定时任务列表
+      const taskList = page.locator('table, ul, [class*="list"]');
+      const hasTaskList = await taskList.count() > 0;
+      console.log(`Task list found: ${hasTaskList}`);
+    });
+
+    test('工作流编辑器', async ({ page }) => {
+      const workflowEditor = page.locator('[class*="editor"]').or(
+        page.locator('[class*="workflow-editor"]')
+      );
+
+      if (await workflowEditor.isVisible()) {
+        await takeScreenshot(page, '11-workflow-editor');
+      }
+    });
+  });
+
+  test.describe('6. Team 协作视图', () => {
+    test.beforeEach(async ({ page }) => {
+      const teamBtn = page.getByRole('button', { name: '团队' });
+
+      if (await teamBtn.isVisible()) {
+        await teamBtn.click();
+        await page.waitForTimeout(500);
+      }
+    });
+
+    test('Team 列表和创建', async ({ page }) => {
+      const teamList = page.locator('[class*="team"]').or(
+        page.locator('[class*="group"]')
+      );
+
+      const createBtn = page.getByRole('button', { name: /create|创建|new|新建|\+/i });
+
+      await takeScreenshot(page, '12-team-view');
+
+      if (await createBtn.first().isVisible()) {
+        console.log('Team create button available');
+      }
+    });
+
+    test('团队成员显示', async ({ page }) => {
+      const members = page.locator('[class*="member"]').or(
+        page.locator('[class*="agent"]')
+      );
+
+      const memberCount = await members.count();
+      console.log(`Found ${memberCount} team members`);
+    });
+  });
+
+  test.describe('7. Swarm Dashboard', () => {
+    test.beforeEach(async ({ page }) => {
+      const swarmBtn = page.getByRole('button', { name: '协作' });
+
+      if (await swarmBtn.isVisible()) {
+        await swarmBtn.click();
+        await page.waitForTimeout(500);
+      }
+    });
+
+    test('Swarm 仪表板渲染', async ({ page }) => {
+      const dashboard = page.locator('[class*="swarm"]').or(
+        page.locator('[class*="dashboard"]')
+      );
+
+      await takeScreenshot(page, '13-swarm-dashboard');
+
+      // 检查状态指示器
+      const statusIndicators = page.locator('[class*="status"]');
+      const statusCount = await statusIndicators.count();
+      console.log(`Found ${statusCount} status indicators`);
+    });
+  });
+
+  test.describe('8. Settings 设置页面', () => {
+    test.beforeEach(async ({ page }) => {
+      const settingsBtn = page.getByRole('button', { name: /settings|设置|⚙/i });
+
+      if (await settingsBtn.isVisible()) {
+        await settingsBtn.click();
+        await page.waitForTimeout(500);
+      }
+    });
+
+    test('设置页面渲染', async ({ page }) => {
+      const settingsLayout = page.locator('[class*="settings"]').or(
+        page.locator('form')
+      );
+
+      await takeScreenshot(page, '14-settings-page');
+
+      // 检查设置分类
+      const settingsTabs = page.locator('[role="tab"]').or(
+        page.locator('button').filter({ hasText: /General|通用|Security|安全|Model|模型/i })
+      );
+
+      const tabCount = await settingsTabs.count();
+      console.log(`Found ${tabCount} settings tabs`);
+    });
+
+    test('通用设置', async ({ page }) => {
+      const generalSettings = page.locator('[class*="general"]').or(
+        page.getByText(/general|通用设置/i)
+      );
+
+      if (await generalSettings.isVisible()) {
+        await takeScreenshot(page, '15-general-settings');
+      }
+    });
+
+    test('模型配置', async ({ page }) => {
+      // 检查设置页面是否有模型相关内容
+      const modelSection = page.getByRole('button', { name: /模型|Model/i }).or(
+        page.locator('text=/模型|Model/i')
+      );
+
+      // 这个测试是可选的，因为模型配置可能在不同的标签页
+      const isVisible = await modelSection.first().isVisible().catch(() => false);
+      if (isVisible) {
+        await takeScreenshot(page, '16-model-settings');
+      } else {
+        // 如果没有找到模型配置，跳过测试
+        console.log('Model settings section not found - may be in a different tab');
+      }
+    });
+  });
+
+  test.describe('9. RightPanel 右侧面板', () => {
+    test('右侧面板渲染', async ({ page }) => {
+      // 查找右侧面板
+      const rightPanel = page.locator('[class*="w-"][class*="border-l"]').or(
+        page.locator('aside').last()
+      );
+
+      if (await rightPanel.isVisible()) {
+        await takeScreenshot(page, '17-right-panel');
+
+        // 检查面板内容
+        const panelContent = rightPanel.locator('[class*="info"], [class*="detail"], [class*="context"]');
+        console.log(`Right panel content found: ${await panelContent.count() > 0}`);
+      }
+    });
+  });
+
+  test.describe('10. 错误处理和边界情况', () => {
+    test('网络错误处理', async ({ page }) => {
+      // 模拟离线
+      await page.context().setOffline(true);
+      await page.waitForTimeout(1000);
+
+      // 检查错误提示
+      const errorMessage = page.locator('[class*="error"]').or(
+        page.locator('[role="alert"]')
+      );
+
+      await takeScreenshot(page, '18-offline-error');
+
+      // 恢复网络
+      await page.context().setOffline(false);
+    });
+
+    test('空状态显示', async ({ page }) => {
+      // 检查空状态组件
+      const emptyState = page.locator('[class*="empty"]').or(
+        page.locator('[class*="no-data"]')
+      );
+
+      if (await emptyState.isVisible()) {
+        await takeScreenshot(page, '19-empty-state');
+      }
+    });
+  });
+
+  test.describe('11. 响应式布局', () => {
+    test('移动端布局', async ({ page }) => {
+      await page.setViewportSize({ width: 375, height: 667 });
+      await page.waitForTimeout(500);
+
+      await takeScreenshot(page, '20-mobile-layout');
+
+      // 检查移动端导航
+      const mobileMenu = page.locator('[class*="mobile"]').or(
+        page.locator('button[aria-label*="menu"]')
+      );
+
+      console.log(`Mobile menu found: ${await mobileMenu.count() > 0}`);
+    });
+
+    test('平板布局', async ({ page }) => {
+      await page.setViewportSize({ width: 768, height: 1024 });
+      await page.waitForTimeout(500);
+
+      await takeScreenshot(page, '21-tablet-layout');
+    });
+
+    test('桌面布局', async ({ page }) => {
+      await page.setViewportSize({ width: 1920, height: 1080 });
+      await page.waitForTimeout(500);
+
+      await takeScreenshot(page, '22-desktop-layout');
+    });
+  });
+
+  test.describe('12. 性能检查', () => {
+    test('页面加载性能', async ({ page }) => {
+      const startTime = Date.now();
+      await page.goto('/');
+      await waitForAppReady(page);
+      const loadTime = Date.now() - startTime;
+
+      console.log(`Page load time: ${loadTime}ms`);
+
+      // 页面加载时间应该小于 5 秒
+      expect(loadTime).toBeLessThan(5000);
+    });
+
+    test('内存使用检查', async ({ page }) => {
+      // 获取页面指标
+      const metrics = await page.evaluate(() => {
+        return {
+          memory: (performance as any).memory?.usedJSHeapSize || 0,
+          domNodes: document.querySelectorAll('*').length,
+        };
+      });
+
+      console.log(`DOM nodes: ${metrics.domNodes}`);
+      console.log(`Memory used: ${Math.round(metrics.memory / 1024 / 1024)}MB`);
+    });
+  });
+});
+
+test.describe('13. 控制台错误检查', () => {
+  test('无 JavaScript 错误', async ({ page }) => {
+    const errors: string[] = [];
+
+    page.on('pageerror', error => {
+      errors.push(error.message);
+    });
+
+    await page.goto('/');
+    await waitForAppReady(page);
+
+    // 执行一些交互
+    await page.click('body');
+    await page.waitForTimeout(1000);
+
+    // 检查是否有严重错误
+    const criticalErrors = errors.filter(e =>
+      !e.includes('Warning:') &&
+      !e.includes('DevTools') &&
+      !e.includes('extension')
+    );
+
+    console.log(`Console errors: ${criticalErrors.length}`);
+    criticalErrors.forEach(e => console.log(`  - ${e}`));
+
+    // 允许少量非严重错误
+    expect(criticalErrors.length).toBeLessThan(5);
+  });
+
+  test('无网络请求失败', async ({ page }) => {
+    const failedRequests: string[] = [];
+
+    page.on('requestfailed', request => {
+      failedRequests.push(request.url());
+    });
+
+    await page.goto('/');
+    await waitForAppReady(page);
+    await page.waitForTimeout(2000);
+
+    console.log(`Failed requests: ${failedRequests.length}`);
+    failedRequests.forEach(r => console.log(`  - ${r}`));
+  });
+});
diff --git a/desktop/tests/e2e/specs/functional-scenarios.spec.ts b/desktop/tests/e2e/specs/functional-scenarios.spec.ts
new file mode 100644
index 0000000..2100d40
--- /dev/null
+++ b/desktop/tests/e2e/specs/functional-scenarios.spec.ts
@@ -0,0 +1,1114 @@
+/**
+ * ZCLAW 前端功能深度验证测试
+ *
+ * 模拟真实用户使用场景，测试功能完整性和可用性
+ */
+
+import { test, expect, Page, BrowserContext } from '@playwright/test';
+
+// 测试超时配置
+test.setTimeout(120000);
+
+// 测试配置
+const BASE_URL = 'http://localhost:1420';
+const SCREENSHOT_DIR = 'test-results/screenshots';
+
+// 辅助函数
+async function waitForAppReady(page: Page) {
+  await page.waitForLoadState('networkidle');
+  await page.waitForSelector('aside', { timeout: 15000 });
+  await page.waitForTimeout(1000); // 等待状态初始化
+}
+
+async function takeScreenshot(page: Page, name: string) {
+  try {
+    await page.screenshot({
+      path: `${SCREENSHOT_DIR}/${name}.png`,
+      fullPage: true
+    });
+  } catch (e) {
+    console.log(`Screenshot failed: ${name}`);
+  }
+}
+
+async function navigateToTab(page: Page, tabName: string) {
+  // Map Chinese names to aria-labels
+  const tabLabels: Record<string, string> = {
+    '分身': '分身',
+    'Hands': 'Hands',
+    '工作流': '工作流',
+    '团队': '团队',
+    '协作': '协作',
+  };
+  const label = tabLabels[tabName] || tabName;
+  const tabButton = page.getByRole('button', { name: label });
+  if (await tabButton.isVisible()) {
+    await tabButton.click();
+    await page.waitForTimeout(500);
+  }
+}
+
+// 获取控制台日志
+function captureConsoleLogs(page: Page) {
+  const logs: { type: string; message: string }[] = [];
+  page.on('console', msg => {
+    logs.push({ type: msg.type(), message: msg.text() });
+  });
+  page.on('pageerror', error => {
+    logs.push({ type: 'error', message: error.message });
+  });
+  return logs;
+}
+
+// ============================================
+// 测试套件 1: 应用启动与初始化
+// ============================================
+test.describe('1. 应用启动与初始化', () => {
+
+  test('1.1 应用正常启动并渲染所有核心组件', async ({ page }) => {
+    const logs = captureConsoleLogs(page);
+
+    await page.goto(BASE_URL);
+    await waitForAppReady(page);
+
+    // 验证核心布局组件
+    const sidebar = page.locator('aside');
+    const main = page.locator('main');
+
+    await expect(sidebar).toBeVisible();
+    await expect(main).toBeVisible();
+
+    // 验证侧边栏标签
+    const tabs = ['分身', 'Hands', '工作流', '团队', '协作'];
+    for (const tab of tabs) {
+      const tabBtn = page.getByRole('button', { name: new RegExp(tab, 'i') });
+      await expect(tabBtn).toBeVisible();
+    }
+
+    await takeScreenshot(page, '01-app-initialized');
+
+    // 检查关键错误
+    const criticalErrors = logs.filter(l =>
+      l.type === 'error' &&
+      !l.message.includes('DevTools') &&
+      !l.message.includes('extension') &&
+      !l.message.includes('Warning:')
+    );
+    console.log(`Critical errors during startup: ${criticalErrors.length}`);
+    expect(criticalErrors.length).toBeLessThan(3);
+  });
+
+  test('1.2 Zustand 状态持久化正常加载', async ({ page }) => {
+    await page.goto(BASE_URL);
+    await waitForAppReady(page);
+
+    // 检查 localStorage 中的持久化状态
+    const chatStorage = await page.evaluate(() => {
+      return localStorage.getItem('zclaw-chat-storage');
+    });
+
+    const gatewayStorage = await page.evaluate(() => {
+      return localStorage.getItem('zclaw-gateway-storage');
+    });
+
+    console.log('Chat storage exists:', !!chatStorage);
+    console.log('Gateway storage exists:', !!gatewayStorage);
+
+    // 验证状态可以被解析
+    if (chatStorage) {
+      const parsed = JSON.parse(chatStorage);
+      expect(parsed).toHaveProperty('state');
+      console.log('Chat state keys:', Object.keys(parsed.state || {}));
+    }
+  });
+
+  test('1.3 Gateway 连接状态检查', async ({ page }) => {
+    await page.goto(BASE_URL);
+    await waitForAppReady(page);
+
+    // 等待连接尝试
+    await page.waitForTimeout(3000);
+
+    // 检查连接状态指示器（如果有）
+    const connectionStatus = page.locator('[class*="connection"]').or(
+      page.locator('[class*="status"]').filter({ hasText: /connected|disconnected|connecting/i })
+    );
+
+    // 获取控制台日志检查连接状态
+    const connectionLogs: string[] = [];
+    page.on('console', msg => {
+      if (msg.text().toLowerCase().includes('connect') ||
+          msg.text().toLowerCase().includes('gateway')) {
+        connectionLogs.push(msg.text());
+      }
+    });
+
+    await page.waitForTimeout(2000);
+    console.log('Connection logs:', connectionLogs.slice(-5));
+
+    await takeScreenshot(page, '02-connection-state');
+  });
+});
+
+// ============================================
+// 测试套件 2: 聊天功能 (核心场景)
+// ============================================
+test.describe('2. 聊天功能', () => {
+
+  test.beforeEach(async ({ page }) => {
+    await page.goto(BASE_URL);
+    await waitForAppReady(page);
+  });
+
+  test('2.1 聊天输入框功能', async ({ page }) => {
+    // 查找聊天输入框
+    const chatInput = page.locator('textarea').or(
+      page.locator('[contenteditable="true"]')
+    ).first();
+
+    if (await chatInput.isVisible()) {
+      // 测试输入
+      await chatInput.click();
+      await chatInput.fill('这是一条测试消息');
+
+      // 验证输入内容
+      const value = await chatInput.inputValue();
+      expect(value).toContain('测试消息');
+
+      await takeScreenshot(page, '03-chat-input');
+    } else {
+      console.log('Chat input not found - may need to navigate to chat view');
+    }
+  });
+
+  test('2.2 发送消息并检查响应', async ({ page }) => {
+    const chatInput = page.locator('textarea').first();
+
+    if (await chatInput.isVisible()) {
+      await chatInput.fill('你好，请介绍一下你自己');
+
+      // 发送消息 - 使用更精确的选择器
+      const sendBtn = page.getByRole('button', { name: '发送消息' });
+
+      await sendBtn.click();
+
+      // 等待响应
+      await page.waitForTimeout(5000);
+
+      // 检查用户消息是否显示
+      const userMessage = page.locator('[class*="message"]').filter({ hasText: '你好' });
+      const hasUserMessage = await userMessage.count() > 0;
+
+      // 检查是否有响应（可能是错误或实际响应）
+      const messages = page.locator('[class*="message"], [class*="assistant"]');
+      const messageCount = await messages.count();
+
+      console.log(`Messages found: ${messageCount}`);
+      console.log(`User message visible: ${hasUserMessage}`);
+
+      await takeScreenshot(page, '04-chat-response');
+    }
+  });
+
+  test('2.3 会话切换功能', async ({ page }) => {
+    // 导航到分身标签查看会话列表
+    await navigateToTab(page, '分身');
+
+    const conversationItems = page.locator('[class*="conversation"]').or(
+      page.locator('li').filter({ has: page.locator('[class*="message"]') })
+    );
+
+    const count = await conversationItems.count();
+    console.log(`Conversation items found: ${count}`);
+
+    if (count > 1) {
+      // 点击第二个会话
+      await conversationItems.nth(1).click();
+      await page.waitForTimeout(500);
+
+      await takeScreenshot(page, '05-conversation-switch');
+    }
+  });
+
+  test('2.4 新建会话功能', async ({ page }) => {
+    // 查找新建会话按钮
+    const newChatBtn = page.getByRole('button', { name: /新|new|create|\+/i }).first();
+
+    if (await newChatBtn.isVisible()) {
+      await newChatBtn.click();
+      await page.waitForTimeout(500);
+
+      // 验证消息列表已清空
+      const messages = page.locator('[class*="message"]');
+      const count = await messages.count();
+
+      console.log(`Messages after new chat: ${count}`);
+      await takeScreenshot(page, '06-new-conversation');
+    }
+  });
+
+  test('2.5 消息流式显示', async ({ page }) => {
+    const chatInput = page.locator('textarea').first();
+
+    if (await chatInput.isVisible()) {
+      await chatInput.fill('请写一首短诗');
+      await page.getByRole('button', { name: '发送消息' }).click();
+
+      // 检查是否有 streaming 状态
+      await page.waitForTimeout(1000);
+
+      const streamingIndicator = page.locator('[class*="streaming"]').or(
+        page.locator('[class*="loading"]')
+      );
+
+      const isStreaming = await streamingIndicator.count() > 0;
+      console.log(`Streaming indicator visible: ${isStreaming}`);
+
+      // 等待完成
+      await page.waitForTimeout(5000);
+
+      await takeScreenshot(page, '07-streaming-response');
+    }
+  });
+
+  test('2.6 错误处理 - 网络断开', async ({ page, context }) => {
+    const chatInput = page.locator('textarea').first();
+
+    if (await chatInput.isVisible()) {
+      // 模拟离线
+      await context.setOffline(true);
+
+      await chatInput.fill('离线测试消息');
+      await page.getByRole('button', { name: '发送消息' }).click();
+
+      await page.waitForTimeout(3000);
+
+      // 检查错误提示
+      const errorMsg = page.locator('[class*="error"]').or(
+        page.locator('[role="alert"]')
+      ).or(
+        page.locator('text=/无法连接|网络|错误|failed|error/i')
+      );
+
+      const hasError = await errorMsg.count() > 0;
+      console.log(`Error message shown: ${hasError}`);
+
+      await takeScreenshot(page, '08-offline-error');
+
+      // 恢复网络
+      await context.setOffline(false);
+    }
+  });
+});
+
+// ============================================
+// 测试套件 3: Agent/分身管理
+// ============================================
+test.describe('3. Agent/分身管理', () => {
+
+  test.beforeEach(async ({ page }) => {
+    await page.goto(BASE_URL);
+    await waitForAppReady(page);
+    await navigateToTab(page, '分身');
+  });
+
+  test('3.1 分身列表显示', async ({ page }) => {
+    await page.waitForTimeout(1000);
+
+    // 检查分身列表
+    const cloneItems = page.locator('[class*="clone"]').or(
+      page.locator('[class*="agent"]')
+    ).or(
+      page.locator('li').filter({ hasText: /分身|agent|ZCLAW/i })
+    );
+
+    const count = await cloneItems.count();
+    console.log(`Clone/Agent items found: ${count}`);
+
+    // 至少应该有默认 Agent
+    expect(count).toBeGreaterThanOrEqual(1);
+
+    await takeScreenshot(page, '09-clone-list');
+  });
+
+  test('3.2 创建新分身', async ({ page }) => {
+    // 查找创建按钮
+    const createBtn = page.getByRole('button', { name: /创建|new|添加|\+/i }).first();
+
+    if (await createBtn.isVisible()) {
+      await createBtn.click();
+      await page.waitForTimeout(500);
+
+      // 检查创建表单/对话框
+      const createForm = page.locator('[role="dialog"]').or(
+        page.locator('[class*="modal"]')
+      ).or(
+        page.locator('form')
+      );
+
+      if (await createForm.isVisible()) {
+        // 填写分身信息
+        const nameInput = createForm.locator('input').first();
+        if (await nameInput.isVisible()) {
+          await nameInput.fill('测试分身');
+        }
+
+        await takeScreenshot(page, '10-create-clone-form');
+      }
+    }
+  });
+
+  test('3.3 切换分身', async ({ page }) => {
+    const cloneItems = page.locator('[class*="clone"]').or(
+      page.locator('li').filter({ hasText: /分身|agent/i })
+    );
+
+    const count = await cloneItems.count();
+    if (count > 1) {
+      await cloneItems.nth(1).click();
+      await page.waitForTimeout(500);
+
+      // 验证切换后的状态
+      const activeIndicator = page.locator('[class*="active"]').or(
+        page.locator('[class*="selected"]')
+      );
+
+      console.log(`Active indicator visible: ${await activeIndicator.count() > 0}`);
+
+      await takeScreenshot(page, '11-clone-switch');
+    }
+  });
+
+  test('3.4 分身设置修改', async ({ page }) => {
+    const cloneItems = page.locator('[class*="clone"]').or(
+      page.locator('li').filter({ hasText: /分身|agent/i })
+    );
+
+    if (await cloneItems.first().isVisible()) {
+      // 查找设置/编辑按钮
+      const settingsBtn = cloneItems.first().locator('button').filter({
+        has: page.locator('svg')
+      });
+
+      if (await settingsBtn.isVisible()) {
+        await settingsBtn.click();
+        await page.waitForTimeout(500);
+
+        await takeScreenshot(page, '12-clone-settings');
+      }
+    }
+  });
+});
+
+// ============================================
+// 测试套件 4: Hands 系统
+// ============================================
+test.describe('4. Hands 系统', () => {
+
+  test.beforeEach(async ({ page }) => {
+    await page.goto(BASE_URL);
+    await waitForAppReady(page);
+    await navigateToTab(page, 'Hands');
+    await page.waitForTimeout(1000);
+  });
+
+  test('4.1 Hands 列表显示', async ({ page }) => {
+    // 检查 Hand 卡片
+    const handCards = page.locator('[class*="hand"]').or(
+      page.locator('[class*="card"]')
+    ).filter({
+      hasText: /Clip|Lead|Collector|Predictor|Researcher|Twitter|Browser|能力|自主/i
+    });
+
+    const count = await handCards.count();
+    console.log(`Hand cards found: ${count}`);
+
+    // OpenFang 应该有 7 个 Hands
+    expect(count).toBeGreaterThanOrEqual(1);
+
+    await takeScreenshot(page, '13-hands-list');
+  });
+
+  test('4.2 Hand 触发功能', async ({ page }) => {
+    // 查找触发按钮
+    const triggerBtn = page.getByRole('button', { name: /触发|trigger|执行|run|start/i }).first();
+
+    if (await triggerBtn.isVisible()) {
+      await triggerBtn.click();
+      await page.waitForTimeout(1000);
+
+      // 检查触发后的状态变化
+      const statusIndicator = page.locator('[class*="status"]').or(
+        page.locator('[class*="running"]').or(
+          page.locator('[class*="progress"]')
+        )
+      );
+
+      console.log(`Status indicator after trigger: ${await statusIndicator.count() > 0}`);
+
+      await takeScreenshot(page, '14-hand-triggered');
+    }
+  });
+
+  test('4.3 Hand 审批流程', async ({ page }) => {
+    // 查找需要审批的 Hand
+    const approvalBtn = page.getByRole('button', { name: /审批|approve|确认/i });
+
+    if (await approvalBtn.isVisible()) {
+      await approvalBtn.click();
+      await page.waitForTimeout(500);
+
+      // 检查审批对话框
+      const approvalDialog = page.locator('[role="dialog"]').or(
+        page.locator('[class*="modal"]')
+      );
+
+      if (await approvalDialog.isVisible()) {
+        // 批准/拒绝按钮
+        const confirmBtn = page.getByRole('button', { name: /批准|confirm|yes/i });
+        const rejectBtn = page.getByRole('button', { name: /拒绝|reject|no/i });
+
+        console.log(`Approval dialog buttons visible: ${await confirmBtn.isVisible() && await rejectBtn.isVisible()}`);
+
+        await takeScreenshot(page, '15-hand-approval');
+      }
+    }
+  });
+
+  test('4.4 Hand 任务历史', async ({ page }) => {
+    // 查找历史/日志按钮
+    const historyBtn = page.getByRole('button', { name: /历史|history|日志|log/i });
+
+    if (await historyBtn.isVisible()) {
+      await historyBtn.click();
+      await page.waitForTimeout(500);
+
+      await takeScreenshot(page, '16-hand-history');
+    }
+  });
+});
+
+// ============================================
+// 测试套件 5: 工作流管理
+// ============================================
+test.describe('5. 工作流管理', () => {
+
+  test.beforeEach(async ({ page }) => {
+    await page.goto(BASE_URL);
+    await waitForAppReady(page);
+    await navigateToTab(page, '工作流');
+    await page.waitForTimeout(1000);
+  });
+
+  test('5.1 工作流列表显示', async ({ page }) => {
+    const workflowItems = page.locator('[class*="workflow"]').or(
+      page.locator('[class*="scheduler"]')
+    );
+
+    console.log(`Workflow items found: ${await workflowItems.count()}`);
+
+    await takeScreenshot(page, '17-workflow-list');
+  });
+
+  test('5.2 创建工作流', async ({ page }) => {
+    const createBtn = page.getByRole('button', { name: /创建|new|添加|\+/i }).first();
+
+    if (await createBtn.isVisible()) {
+      await createBtn.click();
+      await page.waitForTimeout(500);
+
+      // 检查工作流编辑器
+      const editor = page.locator('[class*="editor"]').or(
+        page.locator('form')
+      );
+
+      console.log(`Workflow editor visible: ${await editor.isVisible()}`);
+
+      await takeScreenshot(page, '18-workflow-create');
+    }
+  });
+
+  test('5.3 工作流执行状态', async ({ page }) => {
+    // 查找运行中的工作流
+    const runningWorkflow = page.locator('[class*="running"]').or(
+      page.locator('[class*="active"]').or(
+        page.locator('[class*="executing"]')
+      )
+    );
+
+    if (await runningWorkflow.isVisible()) {
+      await takeScreenshot(page, '19-workflow-running');
+    }
+  });
+
+  test('5.4 定时任务配置', async ({ page }) => {
+    const scheduleBtn = page.getByRole('button', { name: /定时|schedule|cron/i });
+
+    if (await scheduleBtn.isVisible()) {
+      await scheduleBtn.click();
+      await page.waitForTimeout(500);
+
+      await takeScreenshot(page, '20-scheduler-config');
+    }
+  });
+});
+
+// ============================================
+// 测试套件 6: 团队协作
+// ============================================
+test.describe('6. 团队协作', () => {
+
+  test.beforeEach(async ({ page }) => {
+    await page.goto(BASE_URL);
+    await waitForAppReady(page);
+    await navigateToTab(page, '团队');
+    await page.waitForTimeout(1000);
+  });
+
+  test('6.1 团队列表显示', async ({ page }) => {
+    const teamItems = page.locator('[class*="team"]').or(
+      page.locator('li').filter({ hasText: /团队|team/i })
+    );
+
+    const count = await teamItems.count();
+    console.log(`Team items found: ${count}`);
+
+    await takeScreenshot(page, '21-team-list');
+  });
+
+  test('6.2 创建团队', async ({ page }) => {
+    const createBtn = page.getByRole('button', { name: /创建|new|\+/i }).first();
+
+    if (await createBtn.isVisible()) {
+      await createBtn.click();
+      await page.waitForTimeout(500);
+
+      // 填写团队信息
+      const nameInput = page.locator('input').first();
+      if (await nameInput.isVisible()) {
+        await nameInput.fill('测试团队');
+      }
+
+      await takeScreenshot(page, '22-team-create');
+    }
+  });
+
+  test('6.3 团队成员管理', async ({ page }) => {
+    const teamItems = page.locator('[class*="team"]');
+
+    if (await teamItems.first().isVisible()) {
+      await teamItems.first().click();
+      await page.waitForTimeout(500);
+
+      // 检查成员列表
+      const members = page.locator('[class*="member"]').or(
+        page.locator('[class*="agent"]')
+      );
+
+      console.log(`Team members found: ${await members.count()}`);
+
+      await takeScreenshot(page, '23-team-members');
+    }
+  });
+});
+
+// ============================================
+// 测试套件 7: Swarm 协作
+// ============================================
+test.describe('7. Swarm 协作', () => {
+
+  test.beforeEach(async ({ page }) => {
+    await page.goto(BASE_URL);
+    await waitForAppReady(page);
+    await navigateToTab(page, '协作');
+    await page.waitForTimeout(1000);
+  });
+
+  test('7.1 Swarm 仪表板显示', async ({ page }) => {
+    const dashboard = page.locator('[class*="swarm"]').or(
+      page.locator('[class*="dashboard"]')
+    );
+
+    console.log(`Swarm dashboard visible: ${await dashboard.isVisible()}`);
+
+    await takeScreenshot(page, '24-swarm-dashboard');
+  });
+
+  test('7.2 创建协作任务', async ({ page }) => {
+    const createBtn = page.getByRole('button', { name: /创建|new|任务|task|\+/i }).first();
+
+    if (await createBtn.isVisible()) {
+      await createBtn.click();
+      await page.waitForTimeout(500);
+
+      // 填写任务描述
+      const descInput = page.locator('textarea').or(
+        page.locator('input[type="text"]')
+      ).first();
+
+      if (await descInput.isVisible()) {
+        await descInput.fill('这是一个测试协作任务');
+      }
+
+      await takeScreenshot(page, '25-swarm-task-create');
+    }
+  });
+
+  test('7.3 协作模式选择', async ({ page }) => {
+    const modeSelector = page.locator('[class*="mode"]').or(
+      page.locator('select').or(
+        page.locator('[role="listbox"]')
+      )
+    );
+
+    if (await modeSelector.isVisible()) {
+      // 检查是否有并行/串行/辩论模式
+      const parallelOption = page.getByText(/parallel|并行/i);
+      const sequentialOption = page.getByText(/sequential|串行/i);
+      const debateOption = page.getByText(/debate|辩论/i);
+
+      console.log(`Mode options available:
+        parallel: ${await parallelOption.isVisible()},
+        sequential: ${await sequentialOption.isVisible()},
+        debate: ${await debateOption.isVisible()}`);
+
+      await takeScreenshot(page, '26-swarm-modes');
+    }
+  });
+});
+
+// ============================================
+// 测试套件 8: 设置页面
+// ============================================
+test.describe('8. 设置页面', () => {
+
+  test.beforeEach(async ({ page }) => {
+    await page.goto(BASE_URL);
+    await waitForAppReady(page);
+  });
+
+  test('8.1 打开设置页面', async ({ page }) => {
+    const settingsBtn = page.getByRole('button', { name: /设置|settings|⚙/i });
+
+    if (await settingsBtn.isVisible()) {
+      await settingsBtn.click();
+      await page.waitForTimeout(500);
+
+      // 验证设置页面
+      const settingsLayout = page.locator('[class*="settings"]').or(
+        page.locator('form').or(
+          page.locator('[role="tabpanel"]')
+        )
+      );
+
+      console.log(`Settings layout visible: ${await settingsLayout.isVisible()}`);
+
+      await takeScreenshot(page, '27-settings-page');
+    }
+  });
+
+  test('8.2 通用设置', async ({ page }) => {
+    const settingsBtn = page.getByRole('button', { name: /设置|settings|⚙/i });
+
+    if (await settingsBtn.isVisible()) {
+      await settingsBtn.click();
+      await page.waitForTimeout(500);
+
+      // 检查用户名设置
+      const usernameInput = page.locator('input').filter({ hasText: '' }).first();
+
+      // 检查主题设置
+      const themeSelector = page.locator('[class*="theme"]').or(
+        page.locator('select').first()
+      );
+
+      console.log(`Username input visible: ${await usernameInput.isVisible()}`);
+      console.log(`Theme selector visible: ${await themeSelector.isVisible()}`);
+
+      await takeScreenshot(page, '28-general-settings');
+    }
+  });
+
+  test('8.3 模型配置', async ({ page }) => {
+    const settingsBtn = page.getByRole('button', { name: /设置|settings|⚙/i });
+
+    if (await settingsBtn.isVisible()) {
+      await settingsBtn.click();
+      await page.waitForTimeout(500);
+
+      // 查找模型选择器
+      const modelSelector = page.locator('[class*="model"]').or(
+        page.getByText(/模型|model/i)
+      );
+
+      if (await modelSelector.isVisible()) {
+        await modelSelector.click();
+        await page.waitForTimeout(300);
+
+        // 检查可用模型列表
+        const modelOptions = page.locator('[role="option"]').or(
+          page.locator('li')
+        );
+
+        console.log(`Model options found: ${await modelOptions.count()}`);
+
+        await takeScreenshot(page, '29-model-settings');
+      }
+    }
+  });
+
+  test('8.4 Gateway 配置', async ({ page }) => {
+    const settingsBtn = page.getByRole('button', { name: /设置|settings|⚙/i });
+
+    if (await settingsBtn.isVisible()) {
+      await settingsBtn.click();
+      await page.waitForTimeout(500);
+
+      // 查找 Gateway 配置
+      const gatewaySection = page.locator('[class*="gateway"]').or(
+        page.getByText(/gateway|服务器|server/i)
+      );
+
+      console.log(`Gateway section visible: ${await gatewaySection.isVisible()}`);
+
+      await takeScreenshot(page, '30-gateway-settings');
+    }
+  });
+
+  test('8.5 保存设置', async ({ page }) => {
+    const settingsBtn = page.getByRole('button', { name: /设置|settings|⚙/i });
+
+    if (await settingsBtn.isVisible()) {
+      await settingsBtn.click();
+      await page.waitForTimeout(500);
+
+      // 查找保存按钮
+      const saveBtn = page.getByRole('button', { name: /保存|save|apply/i });
+
+      if (await saveBtn.isVisible()) {
+        await saveBtn.click();
+        await page.waitForTimeout(500);
+
+        // 检查成功提示
+        const successMsg = page.locator('[class*="success"]').or(
+          page.locator('[class*="toast"]').or(
+            page.locator('[role="status"]')
+          )
+        );
+
+        console.log(`Success message shown: ${await successMsg.isVisible()}`);
+
+        await takeScreenshot(page, '31-settings-saved');
+      }
+    }
+  });
+});
+
+// ============================================
+// 测试套件 9: 右侧面板
+// ============================================
+test.describe('9. 右侧面板', () => {
+
+  test.beforeEach(async ({ page }) => {
+    await page.goto(BASE_URL);
+    await waitForAppReady(page);
+  });
+
+  test('9.1 右侧面板显示', async ({ page }) => {
+    const rightPanel = page.locator('[class*="w-"][class*="border-l"]').or(
+      page.locator('aside').last()
+    );
+
+    if (await rightPanel.isVisible()) {
+      console.log(`Right panel visible`);
+
+      await takeScreenshot(page, '32-right-panel');
+    }
+  });
+
+  test('9.2 上下文信息显示', async ({ page }) => {
+    const contextInfo = page.locator('[class*="context"]').or(
+      page.locator('[class*="info"]')
+    );
+
+    if (await contextInfo.isVisible()) {
+      console.log(`Context info visible`);
+
+      await takeScreenshot(page, '33-context-info');
+    }
+  });
+
+  test('9.3 记忆面板', async ({ page }) => {
+    const memoryPanel = page.locator('[class*="memory"]').or(
+      page.getByText(/记忆|memory/i)
+    );
+
+    if (await memoryPanel.isVisible()) {
+      console.log(`Memory panel visible`);
+
+      await takeScreenshot(page, '34-memory-panel');
+    }
+  });
+});
+
+// ============================================
+// 测试套件 10: 完整用户流程
+// ============================================
+test.describe('10. 完整用户流程', () => {
+
+  test('10.1 新用户首次使用流程', async ({ page }) => {
+    // 清除所有存储
+    await page.goto(BASE_URL);
+    await page.evaluate(() => {
+      localStorage.clear();
+      sessionStorage.clear();
+    });
+
+    await page.reload();
+    await waitForAppReady(page);
+
+    // 检查是否有引导/欢迎界面
+    const onboarding = page.locator('[class*="onboarding"]').or(
+      page.locator('[class*="welcome"]').or(
+        page.locator('[role="dialog"]').filter({ hasText: /欢迎|welcome|开始/i })
+      )
+    );
+
+    console.log(`Onboarding visible: ${await onboarding.isVisible()}`);
+
+    await takeScreenshot(page, '35-first-time-user');
+  });
+
+  test('10.2 完整聊天流程', async ({ page }) => {
+    await page.goto(BASE_URL);
+    await waitForAppReady(page);
+
+    const chatInput = page.locator('textarea').first();
+
+    if (await chatInput.isVisible()) {
+      // 发送多条消息
+      const messages = [
+        '你好',
+        '请帮我写一个简单的函数',
+        '谢谢'
+      ];
+
+      for (const msg of messages) {
+        await chatInput.fill(msg);
+        await page.getByRole('button', { name: '发送消息' }).click();
+        await page.waitForTimeout(2000);
+      }
+
+      // 检查消息数量
+      const messageElements = page.locator('[class*="message"]');
+      const count = await messageElements.count();
+      console.log(`Total messages: ${count}`);
+
+      await takeScreenshot(page, '36-full-chat-flow');
+    }
+  });
+
+  test('10.3 跨视图切换流程', async ({ page }) => {
+    await page.goto(BASE_URL);
+    await waitForAppReady(page);
+
+    const tabs = ['分身', 'Hands', '工作流', '团队', '协作'];
+
+    for (const tab of tabs) {
+      await navigateToTab(page, tab);
+      await page.waitForTimeout(1000);
+
+      // 验证视图已切换
+      console.log(`Switched to: ${tab}`);
+    }
+
+    await takeScreenshot(page, '37-view-switching');
+  });
+
+  test('10.4 会话持久化测试', async ({ page }) => {
+    await page.goto(BASE_URL);
+    await waitForAppReady(page);
+
+    // 发送一条消息
+    const chatInput = page.locator('textarea').first();
+
+    if (await chatInput.isVisible()) {
+      await chatInput.fill('持久化测试消息');
+      await page.getByRole('button', { name: '发送消息' }).click();
+      await page.waitForTimeout(2000);
+
+      // 刷新页面
+      await page.reload();
+      await waitForAppReady(page);
+
+      // 检查消息是否恢复
+      const messages = page.locator('[class*="message"]');
+      const count = await messages.count();
+      console.log(`Messages after reload: ${count}`);
+
+      await takeScreenshot(page, '38-session-persistence');
+    }
+  });
+});
+
+// ============================================
+// 测试套件 11: 性能与稳定性
+// ============================================
+test.describe('11. 性能与稳定性', () => {
+
+  test('11.1 页面加载性能', async ({ page }) => {
+    const startTime = Date.now();
+    await page.goto(BASE_URL);
+    await waitForAppReady(page);
+    const loadTime = Date.now() - startTime;
+
+    console.log(`Page load time: ${loadTime}ms`);
+    expect(loadTime).toBeLessThan(10000); // 应该在 10 秒内加载完成
+  });
+
+  test('11.2 内存使用', async ({ page }) => {
+    await page.goto(BASE_URL);
+    await waitForAppReady(page);
+
+    const metrics = await page.evaluate(() => {
+      return {
+        domNodes: document.querySelectorAll('*').length,
+        jsHeapSize: (performance as any).memory?.usedJSHeapSize || 0,
+      };
+    });
+
+    console.log(`DOM nodes: ${metrics.domNodes}`);
+    console.log(`JS heap: ${Math.round(metrics.jsHeapSize / 1024 / 1024)}MB`);
+
+    // DOM 节点不应该过多
+    expect(metrics.domNodes).toBeLessThan(5000);
+  });
+
+  test('11.3 快速操作稳定性', async ({ page }) => {
+    await page.goto(BASE_URL);
+    await waitForAppReady(page);
+
+    // 快速切换标签
+    for (let i = 0; i < 10; i++) {
+      const tabs = ['分身', 'Hands', '工作流', '团队', '协作'];
+      const tab = tabs[i % tabs.length];
+      await navigateToTab(page, tab);
+      await page.waitForTimeout(100);
+    }
+
+    // 检查是否有错误
+    const errorElements = page.locator('[class*="error"]');
+    const errorCount = await errorElements.count();
+    console.log(`Errors after rapid switching: ${errorCount}`);
+
+    await takeScreenshot(page, '39-rapid-switching');
+  });
+
+  test('11.4 长时间运行稳定性', async ({ page }) => {
+    await page.goto(BASE_URL);
+    await waitForAppReady(page);
+
+    // 模拟 5 分钟的使用
+    const chatInput = page.locator('textarea').first();
+
+    for (let i = 0; i < 5; i++) {
+      if (await chatInput.isVisible()) {
+        await chatInput.fill(`测试消息 ${i + 1}`);
+        await page.getByRole('button', { name: '发送消息' }).click();
+      }
+
+      await navigateToTab(page, ['分身', 'Hands', '工作流', '团队', '协作'][i % 5]);
+      await page.waitForTimeout(1000);
+    }
+
+    // 检查内存和状态
+    const metrics = await page.evaluate(() => {
+      return {
+        domNodes: document.querySelectorAll('*').length,
+        localStorage: Object.keys(localStorage).length,
+      };
+    });
+
+    console.log(`After extended use - DOM: ${metrics.domNodes}, localStorage keys: ${metrics.localStorage}`);
+
+    await takeScreenshot(page, '40-extended-use');
+  });
+});
+
+// ============================================
+// 测试套件 12: 无障碍性
+// ============================================
+test.describe('12. 无障碍性', () => {
+
+  test('12.1 键盘导航', async ({ page }) => {
+    await page.goto(BASE_URL);
+    await waitForAppReady(page);
+
+    // 使用 Tab 键导航
+    for (let i = 0; i < 10; i++) {
+      await page.keyboard.press('Tab');
+      await page.waitForTimeout(100);
+    }
+
+    // 检查焦点元素
+    const focusedElement = page.locator(':focus');
+    console.log(`Focused element visible: ${await focusedElement.isVisible()}`);
+
+    await takeScreenshot(page, '41-keyboard-nav');
+  });
+
+  test('12.2 ARIA 属性', async ({ page }) => {
+    await page.goto(BASE_URL);
+    await waitForAppReady(page);
+
+    // 检查按钮有 accessible name
+    const buttons = page.locator('button');
+    const count = await buttons.count();
+
+    let buttonsWithoutLabel = 0;
+    for (let i = 0; i < Math.min(count, 20); i++) {
+      const btn = buttons.nth(i);
+      const label = await btn.getAttribute('aria-label');
+      const title = await btn.getAttribute('title');
+      const text = await btn.textContent();
+
+      if (!label && !title && !text?.trim()) {
+        buttonsWithoutLabel++;
+      }
+    }
+
+    console.log(`Buttons without accessible name: ${buttonsWithoutLabel} out of ${Math.min(count, 20)}`);
+  });
+
+  test('12.3 焦点管理', async ({ page }) => {
+    await page.goto(BASE_URL);
+    await waitForAppReady(page);
+
+    // 打开设置
+    const settingsBtn = page.getByRole('button', { name: /设置|settings|⚙/i });
+    if (await settingsBtn.isVisible()) {
+      await settingsBtn.click();
+      await page.waitForTimeout(500);
+
+      // 按 Escape 关闭
+      await page.keyboard.press('Escape');
+      await page.waitForTimeout(500);
+
+      // 检查焦点是否返回
+      const focusedElement = page.locator(':focus');
+      console.log(`Focus returned after Escape: ${await focusedElement.isVisible()}`);
+    }
+  });
+});
+
+// ============================================
+// 测试报告生成
+// ============================================
+test.afterAll(async ({}, testInfo) => {
+  console.log('\n========================================');
+  console.log('ZCLAW 前端功能验证测试完成');
+  console.log('========================================');
+  console.log(`测试时间: ${new Date().toISOString()}`);
+  console.log(`截图目录: ${SCREENSHOT_DIR}`);
+  console.log('========================================\n');
+});
diff --git a/desktop/tests/e2e/test-results/screenshots/13-swarm-dashboard.png b/desktop/tests/e2e/test-results/screenshots/13-swarm-dashboard.png
new file mode 100644
index 0000000..94881bb
Binary files /dev/null and b/desktop/tests/e2e/test-results/screenshots/13-swarm-dashboard.png differ
diff --git a/desktop/tests/e2e/test-results/screenshots/14-settings-page.png b/desktop/tests/e2e/test-results/screenshots/14-settings-page.png
new file mode 100644
index 0000000..1005815
Binary files /dev/null and b/desktop/tests/e2e/test-results/screenshots/14-settings-page.png differ
diff --git a/desktop/tests/e2e/test-results/screenshots/15-general-settings.png b/desktop/tests/e2e/test-results/screenshots/15-general-settings.png
new file mode 100644
index 0000000..cb782d3
Binary files /dev/null and b/desktop/tests/e2e/test-results/screenshots/15-general-settings.png differ
diff --git a/desktop/tests/e2e/test-results/screenshots/17-right-panel.png b/desktop/tests/e2e/test-results/screenshots/17-right-panel.png
new file mode 100644
index 0000000..d42c0fe
Binary files /dev/null and b/desktop/tests/e2e/test-results/screenshots/17-right-panel.png differ
diff --git a/desktop/tests/e2e/test-results/screenshots/18-offline-error.png b/desktop/tests/e2e/test-results/screenshots/18-offline-error.png
new file mode 100644
index 0000000..5d7d62d
Binary files /dev/null and b/desktop/tests/e2e/test-results/screenshots/18-offline-error.png differ
diff --git a/desktop/tests/e2e/test-results/screenshots/24-swarm-dashboard.png b/desktop/tests/e2e/test-results/screenshots/24-swarm-dashboard.png
new file mode 100644
index 0000000..913046d
Binary files /dev/null and b/desktop/tests/e2e/test-results/screenshots/24-swarm-dashboard.png differ
diff --git a/desktop/tests/e2e/test-results/screenshots/27-settings-page.png b/desktop/tests/e2e/test-results/screenshots/27-settings-page.png
new file mode 100644
index 0000000..e5576e9
Binary files /dev/null and b/desktop/tests/e2e/test-results/screenshots/27-settings-page.png differ
diff --git a/desktop/tests/e2e/test-results/screenshots/28-general-settings.png b/desktop/tests/e2e/test-results/screenshots/28-general-settings.png
new file mode 100644
index 0000000..1005815
Binary files /dev/null and b/desktop/tests/e2e/test-results/screenshots/28-general-settings.png differ
diff --git a/desktop/tests/e2e/test-results/screenshots/37-view-switching.png b/desktop/tests/e2e/test-results/screenshots/37-view-switching.png
new file mode 100644
index 0000000..d42c0fe
Binary files /dev/null and b/desktop/tests/e2e/test-results/screenshots/37-view-switching.png differ
diff --git a/desktop/vite.config.ts b/desktop/vite.config.ts
index 657b2a3..0590cef 100644
--- a/desktop/vite.config.ts
+++ b/desktop/vite.config.ts
@@ -29,7 +29,8 @@ export default defineConfig(async () => ({
       ignored: ["**/src-tauri/**"],
     },
     proxy: {
-      // Proxy /api requests to OpenFang (port 50051) or OpenClaw (port 18789)
+      // Proxy /api requests to OpenFang Kernel (port 50051)
+      // OpenFang is managed by Tauri app - started via gateway_start command
       '/api': {
         target: 'http://127.0.0.1:50051',
         changeOrigin: true,
diff --git a/docs/superpowers/plans/2026-03-17-browser-hand-ui.md b/docs/superpowers/plans/2026-03-17-browser-hand-ui.md
new file mode 100644
index 0000000..989341e
--- /dev/null
+++ b/docs/superpowers/plans/2026-03-17-browser-hand-ui.md
@@ -0,0 +1,1839 @@
+# Browser Hand UI 组件实现计划
+
+> **For agentic workers:** REQUIRED: Use superpowers:subagent-driven-development (if subagents available) or superpowers:executing-plans to implement this plan. Steps use checkbox (`- [ ]`) syntax for tracking.
+
+**Goal:** 实现 Browser Hand UI 组件，集成到 ZCLAW 的 HandsPanel，支持任务模板执行和实时状态预览。
+
+**Architecture:** 使用 Zustand 管理状态，React 组件展示 UI，通过 Tauri commands 调用 Fantoccini WebDriver。
+
+**Tech Stack:** React, TypeScript, Zustand, Tailwind CSS, Lucide Icons, Tauri
+
+**Spec:** [2026-03-17-browser-hand-ui-design.md](../specs/2026-03-17-browser-hand-ui-design.md)
+
+---
+
+## 文件结构
+
+```
+desktop/src/
+├── store/
+│   └── browserHandStore.ts         # [CREATE] 状态管理
+├── lib/
+│   └── browser-templates.ts        # [CREATE] 模板执行引擎
+├── components/
+│   ├── HandsPanel.tsx              # [MODIFY] 集成 BrowserHandCard
+│   └── BrowserHand/
+│       ├── index.ts                # [CREATE] 模块导出
+│       ├── BrowserHandCard.tsx     # [CREATE] 主卡片组件
+│       ├── TaskTemplateModal.tsx   # [CREATE] 模板选择模态框
+│       ├── ScreenshotPreview.tsx   # [CREATE] 截图预览
+│       └── templates/
+│           ├── index.ts            # [CREATE] 模板注册
+│           ├── types.ts            # [CREATE] 类型定义
+│           ├── basic.ts            # [CREATE] 基础操作模板
+│           ├── scraping.ts         # [CREATE] 数据采集模板
+│           └── automation.ts       # [CREATE] 自动化流程模板
+└── tests/
+    └── desktop/
+        └── browserHandStore.test.ts # [CREATE] Store 测试
+```
+
+---
+
+## Chunk 1: 基础架构
+
+### Task 1.1: 模板类型定义
+
+**Files:**
+- Create: `desktop/src/components/BrowserHand/templates/types.ts`
+
+- [ ] **Step 1: 创建模板类型文件**
+
+```typescript
+// desktop/src/components/BrowserHand/templates/types.ts
+
+export interface TaskTemplateParam {
+  key: string;
+  label: string;
+  type: 'text' | 'url' | 'number' | 'select' | 'textarea' | 'json';
+  required: boolean;
+  default?: unknown;
+  placeholder?: string;
+  options?: { value: string; label: string }[];
+  description?: string;
+}
+
+export interface TaskTemplate {
+  id: string;
+  name: string;
+  description: string;
+  category: 'basic' | 'scraping' | 'automation';
+  icon: string;
+  params: TaskTemplateParam[];
+  execute: (params: Record<string, unknown>, context: ExecutionContext) => Promise<unknown>;
+}
+
+export interface ExecutionContext {
+  browser: import('../../lib/browser-client').Browser;
+  onProgress: (action: string, progress: number) => void;
+  onLog: (level: 'info' | 'warn' | 'error' | 'action', message: string, details?: Record<string, unknown>) => void;
+}
+
+export interface TemplateCategory {
+  id: 'basic' | 'scraping' | 'automation';
+  name: string;
+  description: string;
+}
+```
+
+- [ ] **Step 2: Commit**
+
+```bash
+git add desktop/src/components/BrowserHand/templates/types.ts
+git commit -m "feat(browser-hand): add template type definitions"
+```
+
+---
+
+### Task 1.2: 基础操作模板
+
+**Files:**
+- Create: `desktop/src/components/BrowserHand/templates/basic.ts`
+
+- [ ] **Step 1: 实现基础操作模板**
+
+```typescript
+// desktop/src/components/BrowserHand/templates/basic.ts
+
+import type { TaskTemplate, ExecutionContext } from './types';
+
+export const basicTemplates: TaskTemplate[] = [
+  {
+    id: 'basic_navigate_screenshot',
+    name: '打开网页并截图',
+    description: '访问指定 URL 并截图保存',
+    category: 'basic',
+    icon: '📸',
+    params: [
+      {
+        key: 'url',
+        label: '网页地址',
+        type: 'url',
+        required: true,
+        placeholder: 'https://example.com',
+        description: '要访问的网页 URL',
+      },
+    ],
+    execute: async (params, context) => {
+      const { browser, onProgress, onLog } = context;
+      const url = params.url as string;
+
+      onProgress('导航到页面', 20);
+      onLog('info', `正在打开: ${url}`);
+      await browser.goto(url);
+
+      onProgress('等待页面加载', 50);
+      await new Promise(r => setTimeout(r, 1000));
+
+      onProgress('截取屏幕', 80);
+      const screenshot = await browser.screenshot();
+      onLog('info', '截图完成');
+
+      onProgress('完成', 100);
+      return { url, screenshot };
+    },
+  },
+
+  {
+    id: 'basic_fill_form',
+    name: '填写表单',
+    description: '访问页面并填写表单字段',
+    category: 'basic',
+    icon: '📝',
+    params: [
+      {
+        key: 'url',
+        label: '网页地址',
+        type: 'url',
+        required: true,
+      },
+      {
+        key: 'fields',
+        label: '表单字段',
+        type: 'json',
+        required: true,
+        placeholder: '[{"selector": "input[name=email]", "value": "test@example.com"}]',
+        description: 'JSON 格式的字段配置',
+      },
+      {
+        key: 'submitSelector',
+        label: '提交按钮',
+        type: 'text',
+        required: false,
+        placeholder: 'button[type="submit"]',
+      },
+    ],
+    execute: async (params, context) => {
+      const { browser, onProgress, onLog } = context;
+      const url = params.url as string;
+      const fields = params.fields as Array<{ selector: string; value: string }>;
+      const submitSelector = params.submitSelector as string | undefined;
+
+      onProgress('导航到页面', 20);
+      await browser.goto(url);
+
+      onProgress('填写表单', 40);
+      for (const field of fields) {
+        await browser.type(field.selector, field.value, true);
+        onLog('action', `填写字段: ${field.selector}`);
+      }
+
+      if (submitSelector) {
+        onProgress('提交表单', 70);
+        await browser.click(submitSelector);
+        onLog('action', `点击提交: ${submitSelector}`);
+        await new Promise(r => setTimeout(r, 1000));
+      }
+
+      onProgress('完成', 100);
+      return { success: true, fieldsFilled: fields.length };
+    },
+  },
+
+  {
+    id: 'basic_click_navigate',
+    name: '点击导航',
+    description: '访问页面并点击指定元素',
+    category: 'basic',
+    icon: '🖱️',
+    params: [
+      {
+        key: 'url',
+        label: '网页地址',
+        type: 'url',
+        required: true,
+      },
+      {
+        key: 'selector',
+        label: '元素选择器',
+        type: 'text',
+        required: true,
+        placeholder: 'a.link, button.submit',
+      },
+      {
+        key: 'waitFor',
+        label: '等待元素',
+        type: 'text',
+        required: false,
+        description: '点击后等待此元素出现',
+      },
+    ],
+    execute: async (params, context) => {
+      const { browser, onProgress, onLog } = context;
+      const url = params.url as string;
+      const selector = params.selector as string;
+      const waitFor = params.waitFor as string | undefined;
+
+      onProgress('导航到页面', 20);
+      await browser.goto(url);
+
+      onProgress('等待元素', 40);
+      await browser.wait(selector, 10000);
+
+      onProgress('点击元素', 60);
+      await browser.click(selector);
+      onLog('action', `点击: ${selector}`);
+
+      if (waitFor) {
+        onProgress('等待页面更新', 80);
+        await browser.wait(waitFor, 10000);
+      }
+
+      const finalUrl = await browser.url();
+      onProgress('完成', 100);
+      return { clicked: selector, finalUrl };
+    },
+  },
+];
+```
+
+- [ ] **Step 2: Commit**
+
+```bash
+git add desktop/src/components/BrowserHand/templates/basic.ts
+git commit -m "feat(browser-hand): add basic operation templates"
+```
+
+---
+
+### Task 1.3: 数据采集模板
+
+**Files:**
+- Create: `desktop/src/components/BrowserHand/templates/scraping.ts`
+
+- [ ] **Step 1: 实现数据采集模板**
+
+```typescript
+// desktop/src/components/BrowserHand/templates/scraping.ts
+
+import type { TaskTemplate, ExecutionContext } from './types';
+
+export const scrapingTemplates: TaskTemplate[] = [
+  {
+    id: 'scrape_text',
+    name: '抓取页面文本',
+    description: '从多个选择器提取文本内容',
+    category: 'scraping',
+    icon: '📄',
+    params: [
+      {
+        key: 'url',
+        label: '网页地址',
+        type: 'url',
+        required: true,
+      },
+      {
+        key: 'selectors',
+        label: '选择器列表',
+        type: 'textarea',
+        required: true,
+        placeholder: 'h1.title\np.description\n.price',
+        description: '每行一个 CSS 选择器',
+      },
+    ],
+    execute: async (params, context) => {
+      const { browser, onProgress, onLog } = context;
+      const url = params.url as string;
+      const selectorsText = params.selectors as string;
+      const selectors = selectorsText.split('\n').map(s => s.trim()).filter(Boolean);
+
+      onProgress('导航到页面', 20);
+      await browser.goto(url);
+
+      onProgress('提取内容', 50);
+      const results: Record<string, string[]> = {};
+
+      for (const selector of selectors) {
+        try {
+          const elements = await browser.$$(selector);
+          results[selector] = elements.map(el => el.text || '');
+          onLog('info', `提取 ${selector}: ${results[selector].length} 个元素`);
+        } catch {
+          results[selector] = [];
+          onLog('warn', `未找到: ${selector}`);
+        }
+      }
+
+      onProgress('完成', 100);
+      return { url, data: results };
+    },
+  },
+
+  {
+    id: 'scrape_list',
+    name: '提取列表数据',
+    description: '批量提取结构化列表数据',
+    category: 'scraping',
+    icon: '📊',
+    params: [
+      {
+        key: 'url',
+        label: '网页地址',
+        type: 'url',
+        required: true,
+      },
+      {
+        key: 'itemSelector',
+        label: '列表项选择器',
+        type: 'text',
+        required: true,
+        placeholder: '.product-item, .list-item',
+      },
+      {
+        key: 'fields',
+        label: '字段映射',
+        type: 'json',
+        required: true,
+        placeholder: '{"name": "h3", "price": ".price", "link": "a@href"}',
+        description: 'JSON 对象，键为字段名，值为选择器',
+      },
+    ],
+    execute: async (params, context) => {
+      const { browser, onProgress, onLog } = context;
+      const url = params.url as string;
+      const itemSelector = params.itemSelector as string;
+      const fields = params.fields as Record<string, string>;
+
+      onProgress('导航到页面', 20);
+      await browser.goto(url);
+
+      onProgress('查找列表项', 40);
+      const items = await browser.$$(itemSelector);
+      onLog('info', `找到 ${items.length} 个列表项`);
+
+      onProgress('提取数据', 60);
+      const data = items.map((item, index) => {
+        const row: Record<string, unknown> = {};
+        for (const [field, selector] of Object.entries(fields)) {
+          row[field] = item.text; // Simplified - real impl would use relative selectors
+        }
+        return row;
+      });
+
+      onProgress('完成', 100);
+      return { url, count: data.length, data };
+    },
+  },
+
+  {
+    id: 'scrape_images',
+    name: '收集图片链接',
+    description: '提取页面中的图片 URL',
+    category: 'scraping',
+    icon: '🖼️',
+    params: [
+      {
+        key: 'url',
+        label: '网页地址',
+        type: 'url',
+        required: true,
+      },
+      {
+        key: 'imageSelector',
+        label: '图片选择器',
+        type: 'text',
+        required: false,
+        default: 'img',
+        placeholder: 'img, .gallery img',
+      },
+    ],
+    execute: async (params, context) => {
+      const { browser, onProgress, onLog } = context;
+      const url = params.url as string;
+      const imageSelector = (params.imageSelector as string) || 'img';
+
+      onProgress('导航到页面', 20);
+      await browser.goto(url);
+
+      onProgress('查找图片', 50);
+      const images = await browser.$$(imageSelector);
+      onLog('info', `找到 ${images.length} 张图片`);
+
+      onProgress('完成', 100);
+      return { url, count: images.length };
+    },
+  },
+];
+```
+
+- [ ] **Step 2: Commit**
+
+```bash
+git add desktop/src/components/BrowserHand/templates/scraping.ts
+git commit -m "feat(browser-hand): add scraping templates"
+```
+
+---
+
+### Task 1.4: 自动化流程模板
+
+**Files:**
+- Create: `desktop/src/components/BrowserHand/templates/automation.ts`
+
+- [ ] **Step 1: 实现自动化流程模板**
+
+```typescript
+// desktop/src/components/BrowserHand/templates/automation.ts
+
+import type { TaskTemplate, ExecutionContext } from './types';
+
+export const automationTemplates: TaskTemplate[] = [
+  {
+    id: 'auto_login_action',
+    name: '登录并操作',
+    description: '执行登录后进行后续操作',
+    category: 'automation',
+    icon: '🔐',
+    params: [
+      {
+        key: 'loginUrl',
+        label: '登录页面',
+        type: 'url',
+        required: true,
+      },
+      {
+        key: 'username',
+        label: '用户名',
+        type: 'text',
+        required: true,
+      },
+      {
+        key: 'password',
+        label: '密码',
+        type: 'text',
+        required: true,
+      },
+      {
+        key: 'usernameSelector',
+        label: '用户名输入框',
+        type: 'text',
+        required: true,
+        default: 'input[name="username"], input[type="text"]',
+      },
+      {
+        key: 'passwordSelector',
+        label: '密码输入框',
+        type: 'text',
+        required: true,
+        default: 'input[name="password"], input[type="password"]',
+      },
+      {
+        key: 'submitSelector',
+        label: '登录按钮',
+        type: 'text',
+        required: true,
+        default: 'button[type="submit"], input[type="submit"]',
+      },
+    ],
+    execute: async (params, context) => {
+      const { browser, onProgress, onLog } = context;
+
+      onProgress('打开登录页', 10);
+      await browser.goto(params.loginUrl as string);
+
+      onProgress('填写凭据', 30);
+      await browser.type(params.usernameSelector as string, params.username as string, true);
+      await browser.type(params.passwordSelector as string, params.password as string, true);
+      onLog('action', '已填写用户名和密码');
+
+      onProgress('提交登录', 50);
+      await browser.click(params.submitSelector as string);
+      onLog('action', '已点击登录按钮');
+
+      onProgress('等待登录完成', 70);
+      await new Promise(r => setTimeout(r, 2000));
+
+      const finalUrl = await browser.url();
+      onProgress('完成', 100);
+      return { success: true, finalUrl };
+    },
+  },
+
+  {
+    id: 'auto_multi_page',
+    name: '多页面导航',
+    description: '遍历多个 URL 执行操作',
+    category: 'automation',
+    icon: '📑',
+    params: [
+      {
+        key: 'urls',
+        label: 'URL 列表',
+        type: 'textarea',
+        required: true,
+        placeholder: 'https://example1.com\nhttps://example2.com',
+        description: '每行一个 URL',
+      },
+      {
+        key: 'action',
+        label: '每页操作',
+        type: 'select',
+        required: true,
+        default: 'screenshot',
+        options: [
+          { value: 'screenshot', label: '截图' },
+          { value: 'source', label: '获取源码' },
+          { value: 'text', label: '提取文本' },
+        ],
+      },
+    ],
+    execute: async (params, context) => {
+      const { browser, onProgress, onLog } = context;
+      const urlsText = params.urls as string;
+      const urls = urlsText.split('\n').map(s => s.trim()).filter(Boolean);
+      const action = params.action as string;
+
+      const results: Array<{ url: string; success: boolean; data?: unknown }> = [];
+
+      for (let i = 0; i < urls.length; i++) {
+        const url = urls[i];
+        const progress = Math.round(((i + 1) / urls.length) * 100);
+        onProgress(`处理 ${i + 1}/${urls.length}`, progress);
+
+        try {
+          await browser.goto(url);
+          await new Promise(r => setTimeout(r, 1000));
+
+          let data: unknown;
+          if (action === 'screenshot') {
+            data = await browser.screenshot();
+          } else if (action === 'source') {
+            data = await browser.source();
+          }
+
+          results.push({ url, success: true, data });
+          onLog('info', `完成: ${url}`);
+        } catch (err) {
+          results.push({ url, success: false });
+          onLog('error', `失败: ${url}`);
+        }
+      }
+
+      return { total: urls.length, results };
+    },
+  },
+
+  {
+    id: 'auto_monitor',
+    name: '页面监控',
+    description: '检查页面是否存在指定内容',
+    category: 'automation',
+    icon: '👁️',
+    params: [
+      {
+        key: 'url',
+        label: '监控页面',
+        type: 'url',
+        required: true,
+      },
+      {
+        key: 'checkSelector',
+        label: '检查元素',
+        type: 'text',
+        required: true,
+        description: '检查此元素是否存在',
+      },
+    ],
+    execute: async (params, context) => {
+      const { browser, onProgress, onLog } = context;
+      const url = params.url as string;
+      const checkSelector = params.checkSelector as string;
+
+      onProgress('访问页面', 30);
+      await browser.goto(url);
+
+      onProgress('检查元素', 60);
+      let found = false;
+      try {
+        await browser.wait(checkSelector, 5000);
+        found = true;
+        onLog('info', `元素存在: ${checkSelector}`);
+      } catch {
+        onLog('warn', `元素不存在: ${checkSelector}`);
+      }
+
+      onProgress('完成', 100);
+      return { url, selector: checkSelector, found, checkedAt: new Date().toISOString() };
+    },
+  },
+];
+```
+
+- [ ] **Step 2: Commit**
+
+```bash
+git add desktop/src/components/BrowserHand/templates/automation.ts
+git commit -m "feat(browser-hand): add automation templates"
+```
+
+---
+
+### Task 1.5: 模板注册
+
+**Files:**
+- Create: `desktop/src/components/BrowserHand/templates/index.ts`
+
+- [ ] **Step 1: 创建模板注册文件**
+
+```typescript
+// desktop/src/components/BrowserHand/templates/index.ts
+
+import type { TaskTemplate, TemplateCategory } from './types';
+import { basicTemplates } from './basic';
+import { scrapingTemplates } from './scraping';
+import { automationTemplates } from './automation';
+
+export * from './types';
+
+export const TEMPLATE_CATEGORIES: TemplateCategory[] = [
+  {
+    id: 'basic',
+    name: '基础操作',
+    description: '导航、点击、表单等基础操作',
+  },
+  {
+    id: 'scraping',
+    name: '数据采集',
+    description: '文本、列表、图片等数据提取',
+  },
+  {
+    id: 'automation',
+    name: '自动化流程',
+    description: '登录、多页面、监控等自动化任务',
+  },
+];
+
+export const BUILTIN_TEMPLATES: TaskTemplate[] = [
+  ...basicTemplates,
+  ...scrapingTemplates,
+  ...automationTemplates,
+];
+
+export function getTemplatesByCategory(category: TaskTemplate['category']): TaskTemplate[] {
+  return BUILTIN_TEMPLATES.filter(t => t.category === category);
+}
+
+export function getTemplateById(id: string): TaskTemplate | undefined {
+  return BUILTIN_TEMPLATES.find(t => t.id === id);
+}
+```
+
+- [ ] **Step 2: Commit**
+
+```bash
+git add desktop/src/components/BrowserHand/templates/index.ts
+git commit -m "feat(browser-hand): add template registry"
+```
+
+---
+
+### Task 1.6: 状态管理 Store
+
+**Files:**
+- Create: `desktop/src/store/browserHandStore.ts`
+
+- [ ] **Step 1: 创建 browserHandStore**
+
+```typescript
+// desktop/src/store/browserHandStore.ts
+
+import { create } from 'zustand';
+import Browser from '../lib/browser-client';
+import type { TaskTemplate } from '../components/BrowserHand/templates/types';
+import { BUILTIN_TEMPLATES } from '../components/BrowserHand/templates';
+
+// === Types ===
+
+export interface BrowserLog {
+  id: string;
+  timestamp: string;
+  level: 'info' | 'warn' | 'error' | 'action';
+  message: string;
+  details?: Record<string, unknown>;
+}
+
+export interface ExecutionState {
+  isRunning: boolean;
+  currentAction: string | null;
+  currentUrl: string | null;
+  lastScreenshot: string | null;
+  progress: number;
+  startTime: string | null;
+  templateName: string | null;
+}
+
+export interface RecentTask {
+  id: string;
+  templateId: string;
+  templateName: string;
+  params: Record<string, unknown>;
+  status: 'success' | 'failed' | 'cancelled';
+  executedAt: string;
+  duration: number;
+  result?: unknown;
+  error?: string;
+}
+
+// === Store State ===
+
+interface BrowserHandState {
+  execution: ExecutionState;
+  logs: BrowserLog[];
+  templates: TaskTemplate[];
+  recentTasks: RecentTask[];
+  isTemplateModalOpen: boolean;
+  error: string | null;
+}
+
+// === Store Actions ===
+
+interface BrowserHandActions {
+  executeTemplate: (templateId: string, params: Record<string, unknown>) => Promise<unknown>;
+  stopExecution: () => void;
+  updateExecutionState: (state: Partial<ExecutionState>) => void;
+  addLog: (log: Omit<BrowserLog, 'id' | 'timestamp'>) => void;
+  clearLogs: () => void;
+  openTemplateModal: () => void;
+  closeTemplateModal: () => void;
+  clearError: () => void;
+  getTemplate: (id: string) => TaskTemplate | undefined;
+}
+
+// === Helpers ===
+
+const genId = () => `${Date.now()}-${Math.random().toString(36).slice(2, 9)}`;
+const ts = () => new Date().toISOString();
+
+// === Store ===
+
+export const useBrowserHandStore = create<BrowserHandState & BrowserHandActions>((set, get) => ({
+  // Initial State
+  execution: {
+    isRunning: false,
+    currentAction: null,
+    currentUrl: null,
+    lastScreenshot: null,
+    progress: 0,
+    startTime: null,
+    templateName: null,
+  },
+  logs: [],
+  templates: BUILTIN_TEMPLATES,
+  recentTasks: [],
+  isTemplateModalOpen: false,
+  error: null,
+
+  // Actions
+
+  executeTemplate: async (templateId, params) => {
+    const template = get().templates.find(t => t.id === templateId);
+    if (!template) throw new Error(`Template not found: ${templateId}`);
+
+    set({
+      execution: {
+        isRunning: true,
+        currentAction: '初始化',
+        currentUrl: null,
+        lastScreenshot: null,
+        progress: 0,
+        startTime: ts(),
+        templateName: template.name,
+      },
+      error: null,
+    });
+    get().addLog({ level: 'info', message: `开始执行: ${template.name}` });
+
+    const browser = new Browser();
+    const startTime = Date.now();
+
+    try {
+      await browser.start({ headless: true });
+
+      const context = {
+        browser,
+        onProgress: (action: string, progress: number) => {
+          get().updateExecutionState({ currentAction: action, progress });
+          get().addLog({ level: 'action', message: action });
+        },
+        onLog: (level, message, details) => {
+          get().addLog({ level, message, details });
+        },
+      };
+
+      const result = await template.execute(params, context);
+
+      try {
+        const screenshot = await browser.screenshot();
+        get().updateExecutionState({ lastScreenshot: screenshot.base64 });
+      } catch { /* ignore */ }
+
+      const duration = Date.now() - startTime;
+      get().addLog({ level: 'info', message: `执行完成，耗时 ${duration}ms` });
+
+      const task: RecentTask = {
+        id: genId(),
+        templateId,
+        templateName: template.name,
+        params,
+        status: 'success',
+        executedAt: ts(),
+        duration,
+        result,
+      };
+
+      set(state => ({
+        recentTasks: [task, ...state.recentTasks].slice(0, 20),
+        execution: { ...state.execution, isRunning: false, progress: 100, currentAction: '完成' },
+      }));
+
+      return result;
+    } catch (err) {
+      const errorMsg = err instanceof Error ? err.message : String(err);
+      const duration = Date.now() - startTime;
+
+      get().addLog({ level: 'error', message: `执行失败: ${errorMsg}` });
+
+      const task: RecentTask = {
+        id: genId(),
+        templateId,
+        templateName: template.name,
+        params,
+        status: 'failed',
+        executedAt: ts(),
+        duration,
+        error: errorMsg,
+      };
+
+      set(state => ({
+        recentTasks: [task, ...state.recentTasks].slice(0, 20),
+        execution: { ...state.execution, isRunning: false, currentAction: '失败' },
+        error: errorMsg,
+      }));
+
+      throw err;
+    } finally {
+      await browser.close();
+    }
+  },
+
+  stopExecution: () => {
+    set(state => ({
+      execution: { ...state.execution, isRunning: false, currentAction: '已停止' },
+    }));
+    get().addLog({ level: 'warn', message: '任务已停止' });
+  },
+
+  updateExecutionState: (state) => {
+    set(current => ({ execution: { ...current.execution, ...state } }));
+  },
+
+  addLog: (log) => {
+    set(state => ({
+      logs: [...state.logs.slice(-99), { ...log, id: genId(), timestamp: ts() }],
+    }));
+  },
+
+  clearLogs: () => set({ logs: [] }),
+
+  openTemplateModal: () => set({ isTemplateModalOpen: true }),
+  closeTemplateModal: () => set({ isTemplateModalOpen: false }),
+
+  clearError: () => set({ error: null }),
+
+  getTemplate: (id) => get().templates.find(t => t.id === id),
+}));
+
+export default useBrowserHandStore;
+```
+
+- [ ] **Step 2: Commit**
+
+```bash
+git add desktop/src/store/browserHandStore.ts
+git commit -m "feat(browser-hand): add browserHandStore for state management"
+```
+
+---
+
+## Chunk 2: UI 组件
+
+### Task 2.1: 模块导出
+
+**Files:**
+- Create: `desktop/src/components/BrowserHand/index.ts`
+
+- [ ] **Step 1: 创建模块导出**
+
+```typescript
+// desktop/src/components/BrowserHand/index.ts
+
+export { BrowserHandCard } from './BrowserHandCard';
+export { TaskTemplateModal } from './TaskTemplateModal';
+export { ScreenshotPreview } from './ScreenshotPreview';
+export * from './templates';
+```
+
+- [ ] **Step 2: Commit**
+
+```bash
+git add desktop/src/components/BrowserHand/index.ts
+git commit -m "feat(browser-hand): add module exports"
+```
+
+---
+
+### Task 2.2: 截图预览组件
+
+**Files:**
+- Create: `desktop/src/components/BrowserHand/ScreenshotPreview.tsx`
+
+- [ ] **Step 1: 创建 ScreenshotPreview 组件**
+
+```typescript
+// desktop/src/components/BrowserHand/ScreenshotPreview.tsx
+
+import { useState } from 'react';
+import { ImageOff, Maximize2, RefreshCw, Loader2 } from 'lucide-react';
+
+interface ScreenshotPreviewProps {
+  base64: string | null;
+  isLoading?: boolean;
+  onRefresh?: () => void;
+}
+
+export function ScreenshotPreview({ base64, isLoading, onRefresh }: ScreenshotPreviewProps) {
+  const [isFullscreen, setIsFullscreen] = useState(false);
+
+  if (isLoading) {
+    return (
+      <div className="w-full h-32 bg-gray-100 dark:bg-gray-800 rounded-lg flex items-center justify-center">
+        <Loader2 className="w-6 h-6 text-gray-400 animate-spin" />
+      </div>
+    );
+  }
+
+  if (!base64) {
+    return (
+      <div className="w-full h-32 bg-gray-100 dark:bg-gray-800 rounded-lg flex flex-col items-center justify-center text-gray-400">
+        <ImageOff className="w-8 h-8 mb-2" />
+        <span className="text-xs">暂无截图</span>
+      </div>
+    );
+  }
+
+  return (
+    <>
+      <div className="relative w-full h-32 bg-gray-100 dark:bg-gray-800 rounded-lg overflow-hidden group">
+        <img
+          src={`data:image/png;base64,${base64}`}
+          alt="Screenshot"
+          className="w-full h-full object-cover cursor-pointer"
+          onClick={() => setIsFullscreen(true)}
+        />
+        <div className="absolute inset-0 bg-black/50 opacity-0 group-hover:opacity-100 transition-opacity flex items-center justify-center gap-2">
+          <button
+            onClick={() => setIsFullscreen(true)}
+            className="p-2 bg-white/20 rounded-lg hover:bg-white/30 text-white"
+            title="全屏查看"
+          >
+            <Maximize2 className="w-4 h-4" />
+          </button>
+          {onRefresh && (
+            <button
+              onClick={onRefresh}
+              className="p-2 bg-white/20 rounded-lg hover:bg-white/30 text-white"
+              title="刷新截图"
+            >
+              <RefreshCw className="w-4 h-4" />
+            </button>
+          )}
+        </div>
+      </div>
+
+      {isFullscreen && (
+        <div
+          className="fixed inset-0 z-50 bg-black/90 flex items-center justify-center p-4"
+          onClick={() => setIsFullscreen(false)}
+        >
+          <img
+            src={`data:image/png;base64,${base64}`}
+            alt="Screenshot Full"
+            className="max-w-full max-h-full object-contain"
+          />
+          <button
+            className="absolute top-4 right-4 text-white text-2xl"
+            onClick={() => setIsFullscreen(false)}
+          >
+            ✕
+          </button>
+        </div>
+      )}
+    </>
+  );
+}
+```
+
+- [ ] **Step 2: Commit**
+
+```bash
+git add desktop/src/components/BrowserHand/ScreenshotPreview.tsx
+git commit -m "feat(browser-hand): add ScreenshotPreview component"
+```
+
+---
+
+### Task 2.3: 任务模板选择模态框
+
+**Files:**
+- Create: `desktop/src/components/BrowserHand/TaskTemplateModal.tsx`
+
+- [ ] **Step 1: 创建 TaskTemplateModal 组件**
+
+```typescript
+// desktop/src/components/BrowserHand/TaskTemplateModal.tsx
+
+import { useState, useMemo } from 'react';
+import { X, Play, AlertCircle } from 'lucide-react';
+import { useBrowserHandStore } from '../../store/browserHandStore';
+import { TEMPLATE_CATEGORIES, type TaskTemplate, type TaskTemplateParam } from './templates';
+
+interface TaskTemplateModalProps {
+  isOpen: boolean;
+  onClose: () => void;
+}
+
+export function TaskTemplateModal({ isOpen, onClose }: TaskTemplateModalProps) {
+  const { templates, executeTemplate, isTemplateModalOpen } = useBrowserHandStore();
+  const [selectedCategory, setSelectedCategory] = useState<'basic' | 'scraping' | 'automation'>('basic');
+  const [selectedTemplate, setSelectedTemplate] = useState<TaskTemplate | null>(null);
+  const [params, setParams] = useState<Record<string, unknown>>({});
+  const [isExecuting, setIsExecuting] = useState(false);
+  const [errors, setErrors] = useState<Record<string, string>>({});
+
+  const filteredTemplates = useMemo(
+    () => templates.filter(t => t.category === selectedCategory),
+    [templates, selectedCategory]
+  );
+
+  const handleSelectTemplate = (template: TaskTemplate) => {
+    setSelectedTemplate(template);
+    // Initialize params with defaults
+    const defaultParams: Record<string, unknown> = {};
+    template.params.forEach(p => {
+      if (p.default !== undefined) defaultParams[p.key] = p.default;
+    });
+    setParams(defaultParams);
+    setErrors({});
+  };
+
+  const handleParamChange = (key: string, value: unknown) => {
+    setParams(prev => ({ ...prev, [key]: value }));
+    setErrors(prev => ({ ...prev, [key]: '' }));
+  };
+
+  const validateParams = (): boolean => {
+    if (!selectedTemplate) return false;
+    const newErrors: Record<string, string> = {};
+
+    selectedTemplate.params.forEach(param => {
+      if (param.required) {
+        const value = params[param.key];
+        if (value === undefined || value === '' || value === null) {
+          newErrors[param.key] = `${param.label}为必填项`;
+        }
+      }
+      // Type-specific validation
+      if (param.type === 'url' && params[param.key]) {
+        try {
+          new URL(params[param.key] as string);
+        } catch {
+          newErrors[param.key] = '请输入有效的 URL';
+        }
+      }
+      if (param.type === 'json' && params[param.key]) {
+        try {
+          JSON.parse(params[param.key] as string);
+        } catch {
+          newErrors[param.key] = '请输入有效的 JSON';
+        }
+      }
+    });
+
+    setErrors(newErrors);
+    return Object.keys(newErrors).length === 0;
+  };
+
+  const handleExecute = async () => {
+    if (!selectedTemplate || !validateParams()) return;
+
+    // Parse JSON params
+    const parsedParams: Record<string, unknown> = {};
+    selectedTemplate.params.forEach(p => {
+      if (p.type === 'json' && typeof params[p.key] === 'string') {
+        try {
+          parsedParams[p.key] = JSON.parse(params[p.key] as string);
+        } catch {
+          parsedParams[p.key] = params[p.key];
+        }
+      } else if (p.type === 'textarea' && typeof params[p.key] === 'string') {
+        // Handle multiline text (split by newline for certain fields)
+        if (p.key === 'selectors' || p.key === 'urls') {
+          parsedParams[p.key] = params[p.key];
+        } else {
+          parsedParams[p.key] = params[p.key];
+        }
+      } else {
+        parsedParams[p.key] = params[p.key];
+      }
+    });
+
+    setIsExecuting(true);
+    try {
+      await executeTemplate(selectedTemplate.id, parsedParams);
+      onClose();
+    } catch {
+      // Error is handled in store
+    } finally {
+      setIsExecuting(false);
+    }
+  };
+
+  if (!isOpen) return null;
+
+  return (
+    <div className="fixed inset-0 z-50 flex items-center justify-center">
+      <div className="absolute inset-0 bg-black/50 backdrop-blur-sm" onClick={onClose} />
+
+      <div className="relative bg-white dark:bg-gray-800 rounded-xl shadow-2xl w-full max-w-2xl mx-4 max-h-[90vh] overflow-hidden flex flex-col">
+        {/* Header */}
+        <div className="flex items-center justify-between p-4 border-b border-gray-200 dark:border-gray-700">
+          <h2 className="text-lg font-semibold text-gray-900 dark:text-white">选择任务模板</h2>
+          <button onClick={onClose} className="text-gray-400 hover:text-gray-600 dark:hover:text-gray-300 p-1">
+            <X className="w-5 h-5" />
+          </button>
+        </div>
+
+        {/* Category Tabs */}
+        <div className="flex gap-2 p-4 border-b border-gray-200 dark:border-gray-700">
+          {TEMPLATE_CATEGORIES.map(cat => (
+            <button
+              key={cat.id}
+              onClick={() => setSelectedCategory(cat.id)}
+              className={`px-3 py-1.5 rounded-lg text-sm font-medium transition-colors ${
+                selectedCategory === cat.id
+                  ? 'bg-blue-100 text-blue-700 dark:bg-blue-900/30 dark:text-blue-400'
+                  : 'bg-gray-100 text-gray-600 hover:bg-gray-200 dark:bg-gray-700 dark:text-gray-400'
+              }`}
+            >
+              {cat.name}
+            </button>
+          ))}
+        </div>
+
+        {/* Template Grid */}
+        <div className="flex-1 overflow-y-auto p-4">
+          <div className="grid grid-cols-3 gap-3 mb-4">
+            {filteredTemplates.map(template => (
+              <button
+                key={template.id}
+                onClick={() => handleSelectTemplate(template)}
+                className={`p-3 rounded-lg border text-left transition-all ${
+                  selectedTemplate?.id === template.id
+                    ? 'border-blue-500 bg-blue-50 dark:bg-blue-900/20'
+                    : 'border-gray-200 dark:border-gray-700 hover:border-gray-300 dark:hover:border-gray-600'
+                }`}
+              >
+                <span className="text-2xl mb-1 block">{template.icon}</span>
+                <span className="text-sm font-medium text-gray-900 dark:text-white block">{template.name}</span>
+                <span className="text-xs text-gray-500 dark:text-gray-400 line-clamp-2">{template.description}</span>
+              </button>
+            ))}
+          </div>
+
+          {/* Selected Template Params */}
+          {selectedTemplate && (
+            <div className="border-t border-gray-200 dark:border-gray-700 pt-4">
+              <h3 className="text-sm font-medium text-gray-900 dark:text-white mb-3">
+                {selectedTemplate.icon} {selectedTemplate.name}
+              </h3>
+              <p className="text-xs text-gray-500 dark:text-gray-400 mb-4">{selectedTemplate.description}</p>
+
+              <div className="space-y-3">
+                {selectedTemplate.params.map(param => (
+                  <ParamInput
+                    key={param.key}
+                    param={param}
+                    value={params[param.key]}
+                    error={errors[param.key]}
+                    onChange={(value) => handleParamChange(param.key, value)}
+                  />
+                ))}
+              </div>
+            </div>
+          )}
+        </div>
+
+        {/* Footer */}
+        <div className="flex items-center justify-end gap-2 p-4 border-t border-gray-200 dark:border-gray-700">
+          <button
+            onClick={onClose}
+            className="px-4 py-2 text-sm border border-gray-200 dark:border-gray-600 rounded-lg hover:bg-gray-50 dark:hover:bg-gray-700 text-gray-700 dark:text-gray-300"
+          >
+            取消
+          </button>
+          <button
+            onClick={handleExecute}
+            disabled={!selectedTemplate || isExecuting}
+            className="px-4 py-2 text-sm bg-blue-600 text-white rounded-lg hover:bg-blue-700 disabled:opacity-50 disabled:cursor-not-allowed flex items-center gap-2"
+          >
+            {isExecuting ? (
+              <>
+                <span className="animate-spin">⏳</span>
+                执行中...
+              </>
+            ) : (
+              <>
+                <Play className="w-4 h-4" />
+                执行任务
+              </>
+            )}
+          </button>
+        </div>
+      </div>
+    </div>
+  );
+}
+
+// Param Input Component
+function ParamInput({
+  param,
+  value,
+  error,
+  onChange,
+}: {
+  param: TaskTemplateParam;
+  value: unknown;
+  error?: string;
+  onChange: (value: unknown) => void;
+}) {
+  const inputClass = `w-full px-3 py-2 border rounded-lg text-sm bg-white dark:bg-gray-700 text-gray-900 dark:text-white ${
+    error ? 'border-red-500' : 'border-gray-200 dark:border-gray-600'
+  }`;
+
+  return (
+    <div>
+      <label className="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1">
+        {param.label}
+        {param.required && <span className="text-red-500 ml-1">*</span>}
+      </label>
+
+      {param.type === 'select' ? (
+        <select
+          value={(value as string) || ''}
+          onChange={(e) => onChange(e.target.value)}
+          className={inputClass}
+        >
+          {param.options?.map(opt => (
+            <option key={opt.value} value={opt.value}>{opt.label}</option>
+          ))}
+        </select>
+      ) : param.type === 'textarea' || param.type === 'json' ? (
+        <textarea
+          value={(value as string) || ''}
+          onChange={(e) => onChange(e.target.value)}
+          placeholder={param.placeholder}
+          rows={3}
+          className={inputClass}
+        />
+      ) : (
+        <input
+          type={param.type === 'url' ? 'url' : param.type === 'number' ? 'number' : 'text'}
+          value={(value as string) ?? ''}
+          onChange={(e) => onChange(e.target.value)}
+          placeholder={param.placeholder}
+          className={inputClass}
+        />
+      )}
+
+      {param.description && !error && (
+        <p className="text-xs text-gray-500 dark:text-gray-400 mt-1">{param.description}</p>
+      )}
+      {error && (
+        <p className="text-xs text-red-500 mt-1 flex items-center gap-1">
+          <AlertCircle className="w-3 h-3" />
+          {error}
+        </p>
+      )}
+    </div>
+  );
+}
+```
+
+- [ ] **Step 2: Commit**
+
+```bash
+git add desktop/src/components/BrowserHand/TaskTemplateModal.tsx
+git commit -m "feat(browser-hand): add TaskTemplateModal component"
+```
+
+---
+
+### Task 2.4: BrowserHandCard 主组件
+
+**Files:**
+- Create: `desktop/src/components/BrowserHand/BrowserHandCard.tsx`
+
+- [ ] **Step 1: 创建 BrowserHandCard 组件**
+
+```typescript
+// desktop/src/components/BrowserHand/BrowserHandCard.tsx
+
+import { useState, useEffect } from 'react';
+import { Globe, Play, Camera, RefreshCw, Settings, Loader2, AlertTriangle, X } from 'lucide-react';
+import { useBrowserHandStore } from '../../store/browserHandStore';
+import { ScreenshotPreview } from './ScreenshotPreview';
+import type { Hand } from '../../store/handStore';
+
+interface BrowserHandCardProps {
+  hand: Hand;
+  onOpenSettings?: () => void;
+}
+
+export function BrowserHandCard({ hand, onOpenSettings }: BrowserHandCardProps) {
+  const {
+    execution,
+    logs,
+    error,
+    openTemplateModal,
+    clearError,
+    stopExecution,
+  } = useBrowserHandStore();
+
+  const [showLogs, setShowLogs] = useState(false);
+
+  const isRunning = execution.isRunning;
+  const hasError = !!error;
+
+  return (
+    <div className="bg-white dark:bg-gray-800 rounded-lg border border-gray-200 dark:border-gray-700 shadow-sm overflow-hidden">
+      {/* Header */}
+      <div className="flex items-start justify-between gap-3 p-4 border-b border-gray-100 dark:border-gray-700">
+        <div className="flex items-center gap-2 min-w-0">
+          <span className="text-xl flex-shrink-0">🌐</span>
+          <div className="min-w-0">
+            <h3 className="font-medium text-gray-900 dark:text-white truncate">Browser Hand</h3>
+            <p className="text-xs text-gray-500 dark:text-gray-400">浏览器自动化能力</p>
+          </div>
+        </div>
+        <StatusBadge isRunning={isRunning} hasError={hasError} />
+      </div>
+
+      {/* Screenshot Preview */}
+      <div className="p-4 border-b border-gray-100 dark:border-gray-700">
+        <ScreenshotPreview
+          base64={execution.lastScreenshot}
+          isLoading={isRunning && !execution.lastScreenshot}
+        />
+      </div>
+
+      {/* Status Info */}
+      {(isRunning || execution.currentUrl) && (
+        <div className="px-4 py-2 bg-gray-50 dark:bg-gray-900 text-xs space-y-1">
+          {execution.currentUrl && (
+            <div className="flex items-center gap-2 text-gray-600 dark:text-gray-400">
+              <Globe className="w-3 h-3 flex-shrink-0" />
+              <span className="truncate">{execution.currentUrl}</span>
+            </div>
+          )}
+          {isRunning && (
+            <div className="flex items-center gap-2">
+              <span className="text-gray-600 dark:text-gray-400">{execution.currentAction}</span>
+              <div className="flex-1 h-1.5 bg-gray-200 dark:bg-gray-700 rounded-full overflow-hidden">
+                <div
+                  className="h-full bg-blue-500 transition-all duration-300"
+                  style={{ width: `${execution.progress}%` }}
+                />
+              </div>
+              <span className="text-gray-500 dark:text-gray-500 w-8 text-right">{execution.progress}%</span>
+            </div>
+          )}
+        </div>
+      )}
+
+      {/* Error Display */}
+      {hasError && (
+        <div className="px-4 py-2 bg-red-50 dark:bg-red-900/20 border-b border-red-100 dark:border-red-900/30">
+          <div className="flex items-start gap-2">
+            <AlertTriangle className="w-4 h-4 text-red-500 flex-shrink-0 mt-0.5" />
+            <p className="text-xs text-red-600 dark:text-red-400 flex-1">{error}</p>
+            <button onClick={clearError} className="text-red-400 hover:text-red-600">
+              <X className="w-3 h-3" />
+            </button>
+          </div>
+        </div>
+      )}
+
+      {/* Actions */}
+      <div className="flex items-center gap-2 p-4">
+        {isRunning ? (
+          <button
+            onClick={stopExecution}
+            className="flex-1 px-3 py-2 text-sm bg-red-100 text-red-700 dark:bg-red-900/30 dark:text-red-400 rounded-lg hover:bg-red-200 dark:hover:bg-red-900/50 flex items-center justify-center gap-2"
+          >
+            <X className="w-4 h-4" />
+            停止任务
+          </button>
+        ) : (
+          <>
+            <button
+              onClick={openTemplateModal}
+              className="flex-1 px-3 py-2 text-sm bg-blue-600 text-white rounded-lg hover:bg-blue-700 flex items-center justify-center gap-2"
+            >
+              <Play className="w-4 h-4" />
+              执行任务
+            </button>
+            <button
+              onClick={() => setShowLogs(!showLogs)}
+              className="px-3 py-2 text-sm border border-gray-200 dark:border-gray-600 rounded-lg hover:bg-gray-50 dark:hover:bg-gray-700 text-gray-700 dark:text-gray-300"
+              title="查看日志"
+            >
+              📋
+            </button>
+            {onOpenSettings && (
+              <button
+                onClick={onOpenSettings}
+                className="px-3 py-2 text-sm border border-gray-200 dark:border-gray-600 rounded-lg hover:bg-gray-50 dark:hover:bg-gray-700 text-gray-700 dark:text-gray-300"
+                title="设置"
+              >
+                <Settings className="w-4 h-4" />
+              </button>
+            )}
+          </>
+        )}
+      </div>
+
+      {/* Logs Panel */}
+      {showLogs && (
+        <div className="border-t border-gray-200 dark:border-gray-700 max-h-48 overflow-y-auto">
+          <div className="p-2 text-xs font-medium text-gray-500 dark:text-gray-400 bg-gray-50 dark:bg-gray-900">
+            操作日志 ({logs.length})
+          </div>
+          <div className="p-2 space-y-1 text-xs font-mono">
+            {logs.length === 0 ? (
+              <p className="text-gray-400 dark:text-gray-500">暂无日志</p>
+            ) : (
+              logs.map(log => (
+                <LogEntry key={log.id} log={log} />
+              ))
+            )}
+          </div>
+        </div>
+      )}
+    </div>
+  );
+}
+
+// Status Badge
+function StatusBadge({ isRunning, hasError }: { isRunning: boolean; hasError: boolean }) {
+  if (hasError) {
+    return (
+      <span className="inline-flex items-center gap-1.5 px-2 py-0.5 rounded-full text-xs font-medium bg-red-100 text-red-700 dark:bg-red-900/30 dark:text-red-400">
+        <span className="w-1.5 h-1.5 rounded-full bg-red-500" />
+        错误
+      </span>
+    );
+  }
+  if (isRunning) {
+    return (
+      <span className="inline-flex items-center gap-1.5 px-2 py-0.5 rounded-full text-xs font-medium bg-blue-100 text-blue-700 dark:bg-blue-900/30 dark:text-blue-400">
+        <Loader2 className="w-3 h-3 animate-spin" />
+        运行中
+      </span>
+    );
+  }
+  return (
+    <span className="inline-flex items-center gap-1.5 px-2 py-0.5 rounded-full text-xs font-medium bg-green-100 text-green-700 dark:bg-green-900/30 dark:text-green-400">
+      <span className="w-1.5 h-1.5 rounded-full bg-green-500" />
+      就绪
+    </span>
+  );
+}
+
+// Log Entry
+function LogEntry({ log }: { log: { level: string; timestamp: string; message: string } }) {
+  const levelColors: Record<string, string> = {
+    info: 'text-blue-600 dark:text-blue-400',
+    warn: 'text-yellow-600 dark:text-yellow-400',
+    error: 'text-red-600 dark:text-red-400',
+    action: 'text-green-600 dark:text-green-400',
+  };
+
+  const time = new Date(log.timestamp).toLocaleTimeString('zh-CN', {
+    hour: '2-digit',
+    minute: '2-digit',
+    second: '2-digit',
+  });
+
+  return (
+    <div className="flex items-start gap-2">
+      <span className="text-gray-400 dark:text-gray-500 flex-shrink-0">{time}</span>
+      <span className={levelColors[log.level] || 'text-gray-600 dark:text-gray-400'}>[{log.level}]</span>
+      <span className="text-gray-700 dark:text-gray-300">{log.message}</span>
+    </div>
+  );
+}
+```
+
+- [ ] **Step 2: Commit**
+
+```bash
+git add desktop/src/components/BrowserHand/BrowserHandCard.tsx
+git commit -m "feat(browser-hand): add BrowserHandCard main component"
+```
+
+---
+
+## Chunk 3: 集成
+
+### Task 3.1: 集成到 HandsPanel
+
+**Files:**
+- Modify: `desktop/src/components/HandsPanel.tsx`
+
+- [ ] **Step 1: 修改 HandsPanel 导入 BrowserHandCard**
+
+在文件顶部添加导入：
+
+```typescript
+import { BrowserHandCard, TaskTemplateModal } from './BrowserHand';
+```
+
+- [ ] **Step 2: 修改 HandsPanel 检测 Browser Hand**
+
+在 `HandsPanel` 组件内添加检测函数：
+
+```typescript
+// 在 HandsPanel 组件内
+const isBrowserHand = (hand: Hand) =>
+  hand.id === 'browser' ||
+  hand.name?.toLowerCase().includes('browser') ||
+  hand.name === 'Browser Hand';
+```
+
+- [ ] **Step 3: 修改渲染逻辑**
+
+找到渲染 HandCard 的位置，修改为条件渲染：
+
+```typescript
+// 找到 <div className="grid gap-3"> 部分
+<div className="grid gap-3">
+  {hands.map((hand) =>
+    isBrowserHand(hand) ? (
+      <BrowserHandCard key={hand.id} hand={hand} />
+    ) : (
+      <HandCard
+        key={hand.id}
+        hand={hand}
+        onDetails={handleDetails}
+        onActivate={handleActivate}
+        isActivating={activatingHandId === hand.id}
+      />
+    )
+  )}
+</div>
+```
+
+- [ ] **Step 4: 添加 TaskTemplateModal**
+
+在组件末尾（HandDetailsModal 之后）添加：
+
+```typescript
+// 在 return 的最后
+<TaskTemplateModal
+  isOpen={useBrowserHandStore.getState().isTemplateModalOpen}
+  onClose={() => useBrowserHandStore.getState().closeTemplateModal()}
+/>
+```
+
+- [ ] **Step 5: 添加 store 导入**
+
+```typescript
+import { useBrowserHandStore } from '../store/browserHandStore';
+```
+
+- [ ] **Step 6: Commit**
+
+```bash
+git add desktop/src/components/HandsPanel.tsx
+git commit -m "feat(browser-hand): integrate BrowserHandCard into HandsPanel"
+```
+
+---
+
+### Task 3.2: Store 注册
+
+**Files:**
+- Modify: `desktop/src/store/index.ts`
+
+- [ ] **Step 1: 导出 browserHandStore**
+
+```typescript
+export { useBrowserHandStore } from './browserHandStore';
+```
+
+- [ ] **Step 2: Commit**
+
+```bash
+git add desktop/src/store/index.ts
+git commit -m "feat(browser-hand): export browserHandStore from index"
+```
+
+---
+
+## Chunk 4: 测试
+
+### Task 4.1: Store 单元测试
+
+**Files:**
+- Create: `tests/desktop/browserHandStore.test.ts`
+
+- [ ] **Step 1: 创建测试文件**
+
+```typescript
+// tests/desktop/browserHandStore.test.ts
+
+import { describe, it, expect, beforeEach, vi } from 'vitest';
+
+// Mock browser-client
+vi.mock('../../desktop/src/lib/browser-client', () => ({
+  default: class MockBrowser {
+    start = vi.fn().mockResolvedValue(undefined);
+    close = vi.fn().mockResolvedValue(undefined);
+    goto = vi.fn().mockResolvedValue(undefined);
+    screenshot = vi.fn().mockResolvedValue({ base64: 'mock-base64' });
+    url = vi.fn().mockResolvedValue('https://example.com');
+    type = vi.fn().mockResolvedValue(undefined);
+    click = vi.fn().mockResolvedValue(undefined);
+    wait = vi.fn().mockResolvedValue(undefined);
+    $$ = vi.fn().mockResolvedValue([]);
+    source = vi.fn().mockResolvedValue('<html></html>');
+  },
+  createSession: vi.fn().mockResolvedValue({ session_id: 'test-session' }),
+  closeSession: vi.fn().mockResolvedValue(undefined),
+  listSessions: vi.fn().mockResolvedValue([]),
+  navigate: vi.fn().mockResolvedValue({ url: null, title: null }),
+  screenshot: vi.fn().mockResolvedValue({ base64: 'test', format: 'png' }),
+}));
+
+describe('browserHandStore', () => {
+  beforeEach(() => {
+    vi.clearAllMocks();
+  });
+
+  it('should have initial state', async () => {
+    const { useBrowserHandStore } = await import('../../desktop/src/store/browserHandStore');
+    const state = useBrowserHandStore.getState();
+
+    expect(state.execution.isRunning).toBe(false);
+    expect(state.logs).toEqual([]);
+    expect(state.templates.length).toBeGreaterThan(0);
+    expect(state.isTemplateModalOpen).toBe(false);
+    expect(state.error).toBeNull();
+  });
+
+  it('should open and close template modal', async () => {
+    const { useBrowserHandStore } = await import('../../desktop/src/store/browserHandStore');
+    const store = useBrowserHandStore.getState();
+
+    store.openTemplateModal();
+    expect(useBrowserHandStore.getState().isTemplateModalOpen).toBe(true);
+
+    store.closeTemplateModal();
+    expect(useBrowserHandStore.getState().isTemplateModalOpen).toBe(false);
+  });
+
+  it('should add logs', async () => {
+    const { useBrowserHandStore } = await import('../../desktop/src/store/browserHandStore');
+    const store = useBrowserHandStore.getState();
+
+    store.addLog({ level: 'info', message: 'Test log' });
+    const logs = useBrowserHandStore.getState().logs;
+
+    expect(logs.length).toBe(1);
+    expect(logs[0].message).toBe('Test log');
+    expect(logs[0].level).toBe('info');
+  });
+
+  it('should clear logs', async () => {
+    const { useBrowserHandStore } = await import('../../desktop/src/store/browserHandStore');
+    const store = useBrowserHandStore.getState();
+
+    store.addLog({ level: 'info', message: 'Test' });
+    store.clearLogs();
+
+    expect(useBrowserHandStore.getState().logs).toEqual([]);
+  });
+
+  it('should update execution state', async () => {
+    const { useBrowserHandStore } = await import('../../desktop/src/store/browserHandStore');
+    const store = useBrowserHandStore.getState();
+
+    store.updateExecutionState({ currentAction: 'Testing', progress: 50 });
+    const execution = useBrowserHandStore.getState().execution;
+
+    expect(execution.currentAction).toBe('Testing');
+    expect(execution.progress).toBe(50);
+  });
+
+  it('should get template by id', async () => {
+    const { useBrowserHandStore } = await import('../../desktop/src/store/browserHandStore');
+    const store = useBrowserHandStore.getState();
+
+    const template = store.getTemplate('basic_navigate_screenshot');
+    expect(template).toBeDefined();
+    expect(template?.name).toBe('打开网页并截图');
+  });
+
+  it('should return undefined for unknown template', async () => {
+    const { useBrowserHandStore } = await import('../../desktop/src/store/browserHandStore');
+    const store = useBrowserHandStore.getState();
+
+    const template = store.getTemplate('unknown_template');
+    expect(template).toBeUndefined();
+  });
+});
+```
+
+- [ ] **Step 2: Run tests**
+
+```bash
+cd desktop && pnpm vitest run tests/desktop/browserHandStore.test.ts
+```
+
+Expected: All tests pass
+
+- [ ] **Step 3: Commit**
+
+```bash
+git add tests/desktop/browserHandStore.test.ts
+git commit -m "test(browser-hand): add browserHandStore unit tests"
+```
+
+---
+
+### Task 4.2: 最终验证
+
+- [ ] **Step 1: TypeScript 检查**
+
+```bash
+cd desktop && pnpm tsc --noEmit
+```
+
+- [ ] **Step 2: 运行所有测试**
+
+```bash
+cd desktop && pnpm vitest run
+```
+
+- [ ] **Step 3: 构建检查**
+
+```bash
+cd desktop/src-tauri && cargo check
+```
+
+- [ ] **Step 4: Final commit**
+
+```bash
+git add -A
+git commit -m "feat(browser-hand): complete Browser Hand UI integration
+
+- Add browserHandStore for state management
+- Add 9 task templates (basic, scraping, automation)
+- Add BrowserHandCard with screenshot preview
+- Add TaskTemplateModal for task selection
+- Integrate into HandsPanel
+- Add unit tests
+
+Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>"
+```
+
+---
+
+## 完成检查清单
+
+- [ ] 所有文件已创建
+- [ ] TypeScript 编译通过
+- [ ] 测试通过
+- [ ] 集成到 HandsPanel
+- [ ] 可以打开模板选择器
+- [ ] 可以执行基础任务模板
diff --git a/start-all.ps1 b/start-all.ps1
index cecd2a5..ea7073b 100644
--- a/start-all.ps1
+++ b/start-all.ps1
@@ -1,9 +1,12 @@
 # ZCLAW Full Stack Start Script
-# Starts: ChromeDriver (optional) -> OpenFang Gateway (optional) -> Tauri Desktop
+# Starts: ChromeDriver (optional) -> Tauri Desktop (manages OpenFang internally)
+#
+# NOTE: OpenFang is bundled with Tauri and managed internally.
+# The frontend uses Tauri commands (gateway_start/gateway_status) to control OpenFang.
+# No external OpenFang CLI installation is required.
 
 param(
     [switch]$NoBrowser,
-    [switch]$NoGateway,
     [switch]$Dev,
     [switch]$Help,
     [switch]$Stop,
@@ -28,16 +31,21 @@ ZCLAW Full Stack Start Script
 Usage: .\start-all.ps1 [options]
 
 Options:
-    -DesktopOnly    Start desktop only (skip all external services)
-    -NoBrowser      Skip ChromeDriver
-    -NoGateway      Skip OpenFang Gateway
+    -DesktopOnly    Start desktop only (skip ChromeDriver)
+    -NoBrowser      Skip ChromeDriver startup
     -Dev            Development mode (hot reload)
     -Stop           Stop all services
     -Help           Show this help
 
+Note:
+    OpenFang is bundled with the Tauri app and managed internally.
+    The app will start OpenFang automatically via Tauri commands.
+    No external OpenFang CLI installation required.
+
 Quick Commands:
     pnpm start           # Start all services
-    pnpm desktop         # Start desktop only
+    pnpm start:dev       # Start in dev mode
+    pnpm start:desktop   # Start desktop only (no browser)
 
 "@
     exit 0
@@ -51,10 +59,14 @@ if ($Stop) {
     Get-Process -Name "chromedriver" -ErrorAction SilentlyContinue | Stop-Process -Force
     ok "ChromeDriver stopped"
 
-    # Stop OpenFang (if running via openfang CLI)
-    if (Get-Command openfang -ErrorAction SilentlyContinue) {
-        openfang gateway stop 2>$null
-        ok "OpenFang Gateway stopped"
+    # Stop any process on port 4200 (OpenFang)
+    $port4200 = netstat -ano | Select-String ":4200.*LISTENING"
+    if ($port4200) {
+        $pid4200 = ($port4200 -split '\s+')[-1]
+        if ($pid4200 -match '^\d+$') {
+            Stop-Process -Id $pid4200 -Force -ErrorAction SilentlyContinue
+            ok "Stopped process on port 4200 (PID: $pid4200)"
+        }
     }
 
     # Stop Tauri/ZClaw
@@ -62,7 +74,7 @@ if ($Stop) {
     Get-Process -Name "desktop" -ErrorAction SilentlyContinue | Stop-Process -Force
     ok "ZCLAW Desktop stopped"
 
-    # Kill any process on port 1420
+    # Kill any process on port 1420 (Vite dev server)
     $port1420 = netstat -ano | Select-String ":1420.*LISTENING"
     if ($port1420) {
         $pid1420 = ($port1420 -split '\s+')[-1]
@@ -98,13 +110,12 @@ function Cleanup {
 trap { Cleanup; break }
 Register-EngineEvent -SourceIdentifier PowerShell.Exiting -Action { Cleanup } | Out-Null
 
-# Skip external services if DesktopOnly
+# Skip ChromeDriver if DesktopOnly
 if ($DesktopOnly) {
     $NoBrowser = $true
-    $NoGateway = $true
 }
 
-# 1. ChromeDriver (optional)
+# 1. ChromeDriver (optional - for Browser Hand automation)
 if (-not $NoBrowser) {
     info "Checking ChromeDriver..."
 
@@ -137,55 +148,21 @@ if (-not $NoBrowser) {
 
 Write-Host ""
 
-# 2. OpenFang Gateway (optional)
-if (-not $NoGateway) {
-    info "Checking OpenFang Gateway..."
-
-    $gatewayUp = $false
-    try {
-        $r = Invoke-WebRequest -Uri "http://127.0.0.1:4200/health" -TimeoutSec 2 -ErrorAction SilentlyContinue
-        if ($r.StatusCode -eq 200) { $gatewayUp = $true }
-    } catch {}
-
-    if ($gatewayUp) {
-        ok "OpenFang Gateway running on port 4200"
-    } else {
-        if (Get-Command openfang -ErrorAction SilentlyContinue) {
-            info "Starting OpenFang Gateway..."
-            $proc = Start-Process -FilePath "openfang" -ArgumentList "gateway", "start" -PassThru
-            $Jobs += $proc
-
-            info "Waiting for gateway..."
-            $wait = 0
-            while ($wait -lt 30) {
-                try {
-                    $r = Invoke-WebRequest -Uri "http://127.0.0.1:4200/health" -TimeoutSec 1 -ErrorAction SilentlyContinue
-                    if ($r.StatusCode -eq 200) {
-                        ok "OpenFang Gateway started"
-                        break
-                    }
-                } catch {}
-                Start-Sleep -Seconds 1
-                $wait++
-                Write-Host -NoNewline "."
-            }
-            Write-Host ""
-
-            if ($wait -ge 30) {
-                warn "Gateway did not respond within 30s"
-            }
-        } else {
-            warn "OpenFang CLI not found. Gateway not started."
-            info "The app will run in standalone mode."
-        }
-    }
+# 2. Check OpenFang Runtime
+info "Checking OpenFang runtime..."
+$runtimePath = "$ScriptDir/desktop/src-tauri/resources/openfang-runtime"
+if (Test-Path "$runtimePath/openfang.exe") {
+    ok "OpenFang runtime found (bundled)"
+} elseif (Test-Path "$runtimePath/openfang") {
+    ok "OpenFang runtime found (bundled)"
 } else {
-    info "Skipping OpenFang Gateway"
+    warn "OpenFang runtime not found at $runtimePath"
+    info "Run: cd desktop && pnpm prepare:openfang-runtime"
 }
 
 Write-Host ""
 
-# 3. Tauri Desktop
+# 3. Start Tauri Desktop
 info "Starting ZCLAW Desktop..."
 Set-Location "$ScriptDir/desktop"
 
@@ -202,6 +179,7 @@ if ($port1420) {
 
 if ($Dev) {
     info "Development mode enabled"
+    info "OpenFang will be started by the app via Tauri commands"
     pnpm tauri dev
 } else {
     $exe = "src-tauri\target\release\ZClaw.exe"
diff --git a/start.sh b/start.sh
index 7287061..229630c 100644
--- a/start.sh
+++ b/start.sh
@@ -1,7 +1,13 @@
 #!/bin/bash
 
 # ZCLAW Unified Start Script for macOS/Linux
-# Usage: ./start.sh [--no-browser] [--no-gateway] [--dev] [--help]
+# Starts: ChromeDriver (optional) -> Tauri Desktop (manages OpenFang internally)
+#
+# NOTE: OpenFang is bundled with Tauri and managed internally.
+# The frontend uses Tauri commands (gateway_start/gateway_status) to control OpenFang.
+# No external OpenFang CLI installation is required.
+#
+# Usage: ./start.sh [--no-browser] [--dev] [--help]
 
 set -e
 
@@ -15,7 +21,6 @@ NC='\033[0m' # No Color
 
 # Parse arguments
 NO_BROWSER=false
-NO_GATEWAY=false
 DEV_MODE=false
 
 while [[ $# -gt 0 ]]; do
@@ -24,10 +29,6 @@ while [[ $# -gt 0 ]]; do
             NO_BROWSER=true
             shift
             ;;
-        --no-gateway|-ng)
-            NO_GATEWAY=true
-            shift
-            ;;
         --dev|-d)
             DEV_MODE=true
             shift
@@ -39,10 +40,13 @@ while [[ $# -gt 0 ]]; do
             echo ""
             echo "Options:"
             echo "  --no-browser, -nb    Skip starting ChromeDriver"
-            echo "  --no-gateway, -ng    Skip starting OpenFang gateway"
             echo "  --dev, -d            Start in development mode"
             echo "  --help, -h           Show this help message"
             echo ""
+            echo "Note:"
+            echo "  OpenFang is bundled with the Tauri app and managed internally."
+            echo "  No external OpenFang CLI installation required."
+            echo ""
             echo "Examples:"
             echo "  ./start.sh                  # Start all services"
             echo "  ./start.sh --no-browser     # Start without ChromeDriver"
@@ -73,7 +77,7 @@ trap cleanup EXIT INT TERM
 
 echo ""
 echo -e "${MAGENTA}═══════════════════════════════════════════${NC}"
-echo -e "${MAGENTA}   🦞 ZCLAW - OpenFang Desktop Client${NC}"
+echo -e "${MAGENTA}   ZCLAW - OpenFang Desktop Client${NC}"
 echo -e "${MAGENTA}═══════════════════════════════════════════${NC}"
 echo ""
 
@@ -110,49 +114,16 @@ fi
 
 echo ""
 
-# 2. Check OpenFang Gateway
-if [ "$NO_GATEWAY" = false ]; then
-    echo -e "${CYAN}[INFO]${NC} Checking OpenFang Gateway..."
+# 2. Check OpenFang Runtime
+echo -e "${CYAN}[INFO]${NC} Checking OpenFang runtime..."
+SCRIPT_DIR="$(cd "$(dirname "$0")" && pwd)"
+RUNTIME_PATH="$SCRIPT_DIR/desktop/src-tauri/resources/openfang-runtime"
 
-    GATEWAY_RUNNING=false
-
-    # Check if gateway is already running
-    if curl -s --connect-timeout 2 http://127.0.0.1:4200/health > /dev/null 2>&1; then
-        GATEWAY_RUNNING=true
-        echo -e "${GREEN}[OK]${NC} OpenFang Gateway already running on port 4200"
-    fi
-
-    if [ "$GATEWAY_RUNNING" = false ]; then
-        if command -v openfang &> /dev/null; then
-            echo -e "${CYAN}[INFO]${NC} Starting OpenFang Gateway..."
-            openfang gateway start &
-            PIDS+=($!)
-
-            echo -e "${CYAN}[INFO]${NC} Waiting for gateway to be ready..."
-            MAX_WAIT=30
-            WAITED=0
-
-            while [ $WAITED -lt $MAX_WAIT ]; do
-                if curl -s --connect-timeout 1 http://127.0.0.1:4200/health > /dev/null 2>&1; then
-                    echo -e "${GREEN}[OK]${NC} OpenFang Gateway started on port 4200"
-                    break
-                fi
-                sleep 1
-                WAITED=$((WAITED + 1))
-                printf "."
-            done
-            echo ""
-
-            if [ $WAITED -ge $MAX_WAIT ]; then
-                echo -e "${YELLOW}[WARN]${NC} Gateway did not respond within ${MAX_WAIT}s"
-            fi
-        else
-            echo -e "${YELLOW}[WARN]${NC} OpenFang CLI not found. Gateway not started."
-            echo -e "${CYAN}[INFO]${NC} Install OpenFang: https://github.com/openfang/openfang"
-        fi
-    fi
+if [ -f "$RUNTIME_PATH/openfang" ] || [ -f "$RUNTIME_PATH/openfang-x86_64-unknown-linux-gnu" ] || [ -f "$RUNTIME_PATH/openfang-aarch64-apple-darwin" ]; then
+    echo -e "${GREEN}[OK]${NC} OpenFang runtime found (bundled)"
 else
-    echo -e "${CYAN}[INFO]${NC} Skipping OpenFang Gateway (--no-gateway)"
+    echo -e "${YELLOW}[WARN]${NC} OpenFang runtime not found at $RUNTIME_PATH"
+    echo -e "${CYAN}[INFO]${NC} Run: cd desktop && pnpm prepare:openfang-runtime"
 fi
 
 echo ""
@@ -163,6 +134,7 @@ cd desktop
 
 if [ "$DEV_MODE" = true ]; then
     echo -e "${CYAN}[INFO]${NC} Starting in development mode..."
+    echo -e "${CYAN}[INFO]${NC} OpenFang will be started by the app via Tauri commands"
     pnpm tauri dev
 else
     # Check if built version exists