diff --git a/.github/workflows/release.yml b/.github/workflows/release.yml
index f6f78829e..de4ac15c2 100644
--- a/.github/workflows/release.yml
+++ b/.github/workflows/release.yml
@@ -86,7 +86,7 @@ jobs:
           cache-all-crates: true
           save-if: ${{ github.ref == 'refs/heads/main' || startsWith(github.ref, 'refs/tags/') }}
 
-      - name: Sync version from tag to tauri.conf.json
+      - name: Sync version from tag to tauri configs
         shell: bash
         run: |
           VERSION="${{ github.event.inputs.version || github.ref_name }}"
@@ -95,11 +95,14 @@ jobs:
           cd src-tauri
           node -e "
             const fs = require('fs');
-            const conf = JSON.parse(fs.readFileSync('tauri.conf.json', 'utf8'));
-            conf.version = '$VERSION';
-            fs.writeFileSync('tauri.conf.json', JSON.stringify(conf, null, 2) + '\n');
+            for (const file of ['tauri.conf.json', 'tauri.conf.headless.json']) {
+              const conf = JSON.parse(fs.readFileSync(file, 'utf8'));
+              conf.version = '$VERSION';
+              fs.writeFileSync(file, JSON.stringify(conf, null, 2) + '\n');
+            }
           "
           echo "tauri.conf.json version is now: $(node -e "console.log(JSON.parse(require('fs').readFileSync('tauri.conf.json','utf8')).version)")"
+          echo "tauri.conf.headless.json version is now: $(node -e "console.log(JSON.parse(require('fs').readFileSync('tauri.conf.headless.json','utf8')).version)")"
 
       - name: Load release notes
         shell: bash
diff --git a/RELEASE_NOTES.md b/RELEASE_NOTES.md
index 1d33e77a9..704269f10 100644
--- a/RELEASE_NOTES.md
+++ b/RELEASE_NOTES.md
@@ -1,59 +1,46 @@
-## ProxyCast v0.86.0
+## ProxyCast v0.87.0
 
 ### ✨ 新功能
 
-- **Aster 集成升级**: 升级到 aster-rust v0.17.1，带来更稳定的 Agent 运行时支持
-- **排队机制**: 新增 Agent 运行时排队系统，支持多轮对话请求的有序处理
-- **Artifact 自动预览**: 实现 Artifact 自动预览同步机制，提升内容创作体验
-- **搜索结果预览**: 新增搜索结果预览列表组件，优化 Web 搜索交互
-- **Skill 脚手架**: 新增 Skill 创建脚手架对话框，简化自定义 Skill 开发流程
-- **会话作用域存储**: 实现 Agent 会话级别的状态管理机制
+- **浏览器协助运行时**：新增 `browser-runtime` crate、Tauri 命令与调试页，支持在 Agent 会话内拉起浏览器协助能力
+- **Browser Assist 产物渲染**：新增 Browser Assist Artifact 渲染器，可在 General 会话中直接承接浏览器协助状态与操作
+- **画布工作台布局**：新增 `CanvasWorkbenchLayout`，支持预览 / 文件 / 差异 / 工作台联动，以及分栏与堆叠两种布局模式
+- **技能显式选择器**：新增 `SkillSelector` 与相关 harness skill 聚合逻辑，提升技能发现、点选与触发体验
+- **新任务入口模式**：新增 `new-task` 入口、空状态页与会话恢复控制，梳理 Claw / 新任务两类进入路径
 
 ### 🔧 优化与重构
 
-- **Request Tool Policy 重构**: 大幅重构请求工具策略模块（+1176 行），提升 Web 搜索预调用的可靠性
-- **Skill 服务增强**: 重构 Skill 加载器和匹配器，优化 Skill 发现和执行流程（+1064 行）
-- **API Key Provider 优化**: 增强 API Key 提供商服务，改进凭证池管理（+433 行）
-- **Skill Model 完善**: 新增 Skill 模型定义，规范化 Skill 元数据管理（+345 行）
-- **Aster State 扩展**: 扩展 Agent 状态管理，支持更复杂的运行时场景（+367 行）
-- **数据库 Schema 更新**: 新增 agent_runtime_queue 表，支持排队机制持久化
+- **General Chat 主流程重构**：重写 Agent Chat 页的大量 General 场景逻辑，统一画布、Artifact、Workbench 与浏览器协助状态
+- **Webview / Browser Runtime 协调增强**：扩展 `webview_cmd`、窗口服务与前端 API，补齐浏览器运行时会话、窗口与控制链路
+- **Settings v2 大规模重排**：重构外观、快捷键、频道、Chrome Relay、环境、安全性能、账户统计等设置页
+- **项目与记忆工作区升级**：重构内容列表、内容编辑器、项目选择器及多类 Memory 面板，统一信息架构与交互密度
+- **导航与侧栏收敛**：调整应用侧栏、任务侧栏、资源与工作区导航，移除部分旧页面与冗余入口
 
 ### 🐛 修复
 
-- **Clippy 警告修复**: 修复多个 Rust clippy 警告，提升代码质量
-  - 简化 `let...else` 为 `?` 操作符
-  - 合并连续的字符串替换操作
-  - 优化字符匹配模式
-- **类型安全改进**: 修复前端类型定义，增强 TypeScript 类型检查
-
-### 📦 依赖更新
-
-- 升级 aster-rust 到 v0.17.1
-- 更新相关 Rust 依赖包版本
+- **前端 Hooks 依赖修复**：补齐 `useCallback` 依赖，消除 `npm run lint` 中的 `react-hooks/exhaustive-deps` 警告
+- **Rust Clippy 清理**：移除浏览器运行时客户端中的冗余类型转换，保持 `cargo clippy` 输出干净
+- **日志测试并发污染修复**：将日志诊断测试切到独立临时目录，避免并行测试互相删除 `raw_response` 工件
+- **Workspace 错误态兜底**：补强任务侧栏与相关页面的 workspace 异常显示与恢复路径
 
 ### 🧪 测试
 
-- 新增多个组件单元测试
-  - Modal 组件测试
-  - SearchResultPreviewList 测试
-  - ArtifactRenderer UI 测试
-  - SkillScaffoldDialog 测试
-  - useArtifactAutoPreviewSync 测试
-  - useArtifactDisplayState 测试
-  - searchQueryGrouping 测试
+- 新增 Browser Assist、Canvas Workbench、Skill Selector、General Resource Sync、Harness Skills 等前端测试
+- 补充项目页、设置页、统计页、内存面板等多处 UI / 交互测试
+- 发布前已执行：`cargo fmt --all`、`cargo test`、`cargo clippy`、`npm run lint`
 
 ### 📝 文档
 
-- 新增设计语言文档 (design-language.md)
-- 更新 AGENTS.md，补充跨平台兼容约束和 UI 指导
-- 完善 aiprompts 文档索引
+- 补充 Agent Chat / Components 文档说明
+- 新增 `docs/research/` 研究资料目录
+- 更新发布流程相关说明，覆盖 headless Tauri 配置版本同步
 
 ### 🛠️ 开发体验
 
-- 新增本地 aster-rust 覆盖脚本 (setup-local-aster-override.mjs)
-- 改进 legacy surfaces 报告脚本
-- 优化开发工具链配置
+- **版本一致性检查增强**：`check-app-version-consistency.mjs` 现覆盖 `tauri.conf.headless.json`
+- **Release Workflow 补强**：GitHub Release 工作流现同步标准与 headless 两份 Tauri 配置版本
+- **跨端发布一致性提升**：统一 `package.json`、Cargo workspace、Tauri 配置与 release notes 的版本入口
 
 ---
 
-**完整变更**: v0.85.0...v0.86.0
+**完整变更**: v0.86.0...v0.87.0
diff --git a/docs/research/next-browser-reference.md b/docs/research/next-browser-reference.md
new file mode 100644
index 000000000..b4552b8e2
--- /dev/null
+++ b/docs/research/next-browser-reference.md
@@ -0,0 +1,508 @@
+# next-browser 项目参考分析
+
+> 来源: `/Users/coso/Documents/dev/ai/skills/next-browser`
+> 项目: @vercel/next-browser - Vercel 官方的浏览器自动化工具
+
+## 项目概述
+
+`next-browser` 是 Vercel 开发的一个 **CLI 工具**,为 AI Agent 提供对 React DevTools 和 Next.js dev server 的编程访问。它将 GUI 操作(组件树、props、hooks、PPR shells、错误)转换为 **结构化文本输出的 shell 命令**。
+
+### 核心理念
+- **为 AI Agent 设计** - LLM 无法读取 DevTools 面板,但可以运行 `next-browser tree` 并解析输出
+- **无状态命令** - 每个命令都是对长期运行的浏览器守护进程的一次性调用
+- **结构化输出** - 所有输出都是可解析的文本/JSON,便于 Agent 处理
+
+---
+
+## 值得 Proxycast 参考的设计
+
+### 1. 守护进程 + 客户端架构 ⭐⭐⭐
+
+**设计模式:**
+```
+CLI 命令 → Unix Socket → 守护进程 → Playwright Browser
+```
+
+**实现细节:**
+```typescript
+// daemon.ts - 守护进程
+const server = createServer((socket) => {
+  let buffer = "";
+  socket.on("data", (chunk) => {
+    buffer += chunk;
+    let newline: number;
+    while ((newline = buffer.indexOf("\n")) >= 0) {
+      const line = buffer.slice(0, newline);
+      buffer = buffer.slice(newline + 1);
+      if (line) dispatch(line, socket);
+    }
+  });
+});
+
+server.listen(socketPath);  // Unix socket
+
+async function dispatch(line: string, socket: Socket) {
+  const cmd = JSON.parse(line);
+  const result = await run(cmd).catch((err) => ({ ok: false, error: cleanError(err) }));
+  socket.write(JSON.stringify({ id: cmd.id, ...result }) + "\n");
+}
+```
+
+**Proxycast 应用:**
+- ✅ **替代 Tauri event 的高吞吐方案** - 当事件推送超过 100/s 时,切换到本地 Unix Socket
+- ✅ **守护进程管理浏览器实例** - 避免每次命令都启动新浏览器
+- ✅ **命令-响应模式** - 清晰的请求/响应边界,便于错误处理
+
+---
+
+### 2. Playwright + React DevTools 集成 ⭐⭐⭐
+
+**核心技术:**
+```typescript
+// browser.ts
+const extensionPath = resolve(import.meta.dirname, "../extensions/react-devtools-chrome");
+
+// Pre-read the hook script
+const installHook = readFileSync(
+  join(extensionPath, "build", "installHook.js"),
+  "utf-8",
+);
+
+async function launch() {
+  const context = await chromium.launchPersistentContext(profileDirPath, {
+    headless: false,
+    args: [
+      `--disable-extensions-except=${extensionPath}`,
+      `--load-extension=${extensionPath}`,
+      "--auto-open-devtools-for-tabs",
+    ],
+  });
+
+  // Pre-inject hook to win the race against extension
+  await context.addInitScript(installHook);
+
+  return context;
+}
+```
+
+**关键亮点:**
+1. **预加载 React DevTools 扩展** - 通过 `--load-extension` 加载 Chrome 扩展
+2. **预注入 Hook** - 使用 `addInitScript` 在页面加载前注入 React DevTools hook
+3. **自动打开 DevTools** - `--auto-open-devtools-for-tabs` 确保扩展激活
+
+**Proxycast 应用:**
+- ✅ **扩展 CDP 能力** - 不仅仅是原始 CDP,还可以加载自定义扩展
+- ✅ **预注入脚本** - 在页面加载前注入监控/调试脚本
+- ✅ **持久化上下文** - 使用 `launchPersistentContext` 保持会话状态
+
+---
+
+### 3. 组件树提取 ⭐⭐
+
+**实现原理:**
+```typescript
+// tree.ts
+export async function tree(page: Page) {
+  // 通过 React DevTools hook 获取组件树
+  const operations = await page.evaluate(() => {
+    return window.__REACT_DEVTOOLS_GLOBAL_HOOK__.flushInitialOperations();
+  });
+
+  // 解析 operations 构建组件树
+  const tree = parseOperations(operations);
+  return tree;
+}
+
+export async function inspect(page: Page, nodeId: number) {
+  // 获取组件的 props/hooks/state
+  const data = await page.evaluate((id) => {
+    return window.__REACT_DEVTOOLS_GLOBAL_HOOK__.inspectElement(id);
+  }, nodeId);
+
+  return {
+    props: data.props,
+    hooks: data.hooks,
+    state: data.state,
+    source: data.source,
+  };
+}
+```
+
+**Proxycast 应用:**
+- ✅ **深度调试能力** - 不仅看到 DOM,还能看到 React 组件结构
+- ✅ **状态检查** - 检查组件的 props/hooks/state
+- ✅ **源码定位** - 通过 source map 定位到原始源码位置
+
+---
+
+### 4. PPR (Partial Prerendering) 锁定机制 ⭐⭐⭐
+
+**核心概念:**
+```typescript
+// browser.ts
+let release: (() => void) | null = null;
+let settled: Promise<void> | null = null;
+
+export async function lock() {
+  if (release) return;  // Already locked
+
+  // Use @next/playwright's instant() to set cookie
+  const { promise, resolve } = Promise.withResolvers<void>();
+  release = resolve;
+  settled = promise;
+
+  await instant(page!, async () => {
+    await settled;  // Block until unlock()
+  });
+}
+
+export async function unlock() {
+  if (!release) return;
+
+  // Capture locked state
+  const lockedSnapshot = await captureSuspenseBoundaries();
+
+  // Release the lock
+  release();
+  release = null;
+  settled = null;
+
+  // Wait for boundaries to settle
+  await page!.waitForTimeout(500);
+
+  // Capture unlocked state
+  const unlockedSnapshot = await captureSuspenseBoundaries();
+
+  // Analyze the diff
+  return analyzePPRShell(lockedSnapshot, unlockedSnapshot);
+}
+```
+
+**工作原理:**
+1. **Lock** - 设置 `next-instant-navigation-testing=1` cookie,阻止动态数据加载
+2. **Capture** - 截取 PPR shell(静态 HTML + `<template>` 占位符)
+3. **Unlock** - 释放锁,让动态数据加载
+4. **Analyze** - 对比 locked/unlocked 状态,识别哪些组件是动态的
+
+**Proxycast 应用:**
+- ✅ **性能分析** - 识别哪些组件导致页面加载慢
+- ✅ **SSR/CSR 边界** - 清晰看到服务端渲染和客户端渲染的边界
+- ✅ **优化指导** - 帮助用户优化 PPR shell,提升首屏加载速度
+
+---
+
+### 5. Network 请求追踪 ⭐⭐
+
+**实现:**
+```typescript
+// network.ts
+const requests: Request[] = [];
+
+export function attach(page: Page) {
+  page.on("request", (req) => {
+    requests.push({
+      url: req.url(),
+      method: req.method(),
+      headers: req.headers(),
+      timestamp: Date.now(),
+    });
+  });
+
+  page.on("response", (res) => {
+    const req = requests.find(r => r.url === res.url());
+    if (req) {
+      req.status = res.status();
+      req.responseHeaders = res.headers();
+      req.timing = res.timing();
+    }
+  });
+}
+
+export function list() {
+  return requests.map((req, idx) => ({
+    idx,
+    status: req.status,
+    method: req.method,
+    type: req.resourceType,
+    ms: req.timing?.responseEnd,
+    url: req.url,
+  }));
+}
+
+export function inspect(idx: number) {
+  const req = requests[idx];
+  return {
+    request: {
+      url: req.url,
+      method: req.method,
+      headers: req.headers,
+    },
+    response: {
+      status: req.status,
+      headers: req.responseHeaders,
+      body: req.body,
+    },
+  };
+}
+```
+
+**Proxycast 应用:**
+- ✅ **完整的 Network 追踪** - 记录所有请求/响应
+- ✅ **性能分析** - 识别慢请求
+- ✅ **调试 API 调用** - 检查请求/响应内容
+
+---
+
+### 6. Source Map 支持 ⭐⭐
+
+**实现:**
+```typescript
+// sourcemap.ts
+import { SourceMapConsumer } from "source-map-js";
+
+const cache = new Map<string, SourceMapConsumer>();
+
+export async function resolve(url: string, line: number, column: number) {
+  const consumer = await getConsumer(url);
+  if (!consumer) return null;
+
+  const original = consumer.originalPositionFor({ line, column });
+  return {
+    source: original.source,
+    line: original.line,
+    column: original.column,
+    name: original.name,
+  };
+}
+
+async function getConsumer(url: string) {
+  if (cache.has(url)) return cache.get(url);
+
+  // Fetch source map
+  const mapUrl = url + ".map";
+  const response = await fetch(mapUrl);
+  const rawMap = await response.json();
+
+  const consumer = await new SourceMapConsumer(rawMap);
+  cache.set(url, consumer);
+
+  return consumer;
+}
+```
+
+**Proxycast 应用:**
+- ✅ **错误定位** - 将压缩代码的错误映射到原始源码
+- ✅ **组件定位** - 显示组件在源码中的位置
+- ✅ **调试体验** - 让用户看到可读的源码,而不是压缩后的代码
+
+---
+
+### 7. 错误收集与展示 ⭐⭐⭐
+
+**实现:**
+```typescript
+// mcp.ts - 通过 Next.js MCP 获取错误
+export async function errors() {
+  const response = await fetch("http://localhost:3000/__nextjs_mcp/errors");
+  const data = await response.json();
+
+  return {
+    configErrors: data.configErrors,
+    sessionErrors: data.sessionErrors.map(session => ({
+      url: session.url,
+      buildError: session.buildError,
+      runtimeErrors: session.runtimeErrors.map(err => ({
+        type: err.type,  // "runtime" or "console"
+        errorName: err.errorName,
+        message: err.message,
+        stack: err.stack.map(frame => ({
+          file: frame.file,
+          methodName: frame.methodName,
+          line: frame.line,
+          column: frame.column,
+        })),
+      })),
+    })),
+  };
+}
+```
+
+**Proxycast 应用:**
+- ✅ **统一错误收集** - 收集构建错误、运行时错误、Console 错误
+- ✅ **结构化错误** - 提供完整的堆栈信息和源码位置
+- ✅ **错误分类** - 区分不同类型的错误,便于排查
+
+---
+
+## 架构对比与建议
+
+### next-browser 架构
+```
+┌─────────────┐
+│  CLI 命令   │
+└──────┬──────┘
+       │ Unix Socket
+┌──────▼──────┐
+│  守护进程    │
+└──────┬──────┘
+       │
+┌──────▼──────────────┐
+│  Playwright Browser │
+│  + React DevTools   │
+└─────────────────────┘
+```
+
+### Proxycast 当前架构
+```
+┌─────────────┐
+│  前端 UI    │
+└──────┬──────┘
+       │ Tauri IPC
+┌──────▼──────┐
+│  Rust 后端  │
+└──────┬──────┘
+       │ CDP WebSocket
+┌──────▼──────┐
+│   Chrome    │
+└─────────────┘
+```
+
+### 融合建议
+
+#### 1. 采用守护进程模式 (Phase 2)
+```rust
+// src-tauri/src/cdp/daemon.rs
+pub struct CdpDaemon {
+    socket_path: PathBuf,
+    sessions: HashMap<String, CdpSession>,
+}
+
+impl CdpDaemon {
+    pub async fn start(&mut self) -> Result<()> {
+        let listener = UnixListener::bind(&self.socket_path)?;
+
+        loop {
+            let (stream, _) = listener.accept().await?;
+            self.handle_connection(stream).await?;
+        }
+    }
+
+    async fn handle_connection(&mut self, mut stream: UnixStream) -> Result<()> {
+        let mut buffer = String::new();
+        stream.read_to_string(&mut buffer).await?;
+
+        let cmd: Command = serde_json::from_str(&buffer)?;
+        let result = self.dispatch(cmd).await?;
+
+        stream.write_all(serde_json::to_string(&result)?.as_bytes()).await?;
+        Ok(())
+    }
+}
+```
+
+**优势:**
+- ✅ 高吞吐量(绕过 Tauri event 限制)
+- ✅ 进程隔离(浏览器崩溃不影响主进程)
+- ✅ 资源管理(统一管理多个浏览器实例)
+
+#### 2. 预注入脚本能力
+```rust
+// src-tauri/src/cdp/session_manager.rs
+impl CdpSession {
+    pub async fn add_init_script(&self, script: &str) -> Result<()> {
+        self.ws.send_command("Page.addScriptToEvaluateOnNewDocument", json!({
+            "source": script
+        })).await
+    }
+
+    pub async fn inject_monitoring_script(&self) -> Result<()> {
+        let script = r#"
+            window.__PROXYCAST_MONITOR__ = {
+                errors: [],
+                performance: [],
+                network: [],
+            };
+
+            // 监听错误
+            window.addEventListener('error', (e) => {
+                window.__PROXYCAST_MONITOR__.errors.push({
+                    message: e.message,
+                    filename: e.filename,
+                    lineno: e.lineno,
+                    colno: e.colno,
+                });
+            });
+
+            // 监听性能
+            new PerformanceObserver((list) => {
+                for (const entry of list.getEntries()) {
+                    window.__PROXYCAST_MONITOR__.performance.push(entry.toJSON());
+                }
+            }).observe({ entryTypes: ['navigation', 'resource', 'paint'] });
+        "#;
+
+        self.add_init_script(script).await
+    }
+}
+```
+
+#### 3. 组件树提取(可选,针对 React 应用)
+```rust
+// src-tauri/src/cdp/react_devtools.rs
+pub struct ReactDevTools {
+    session: Arc<CdpSession>,
+}
+
+impl ReactDevTools {
+    pub async fn get_component_tree(&self) -> Result<ComponentTree> {
+        let result = self.session.evaluate(r#"
+            window.__REACT_DEVTOOLS_GLOBAL_HOOK__?.flushInitialOperations()
+        "#).await?;
+
+        let operations: Vec<u8> = serde_json::from_value(result)?;
+        let tree = parse_operations(&operations)?;
+
+        Ok(tree)
+    }
+
+    pub async fn inspect_component(&self, node_id: u32) -> Result<ComponentInfo> {
+        let result = self.session.evaluate(&format!(r#"
+            window.__REACT_DEVTOOLS_GLOBAL_HOOK__?.inspectElement({})
+        "#, node_id)).await?;
+
+        Ok(serde_json::from_value(result)?)
+    }
+}
+```
+
+---
+
+## 实施优先级
+
+### 高优先级 🔥
+1. **守护进程架构** - 解决高吞吐量事件推送问题
+2. **预注入脚本** - 增强监控和调试能力
+3. **Network 追踪** - 完整记录请求/响应
+
+### 中优先级 🟡
+4. **Source Map 支持** - 错误定位到原始源码
+5. **错误收集** - 统一收集和展示错误
+
+### 低优先级 🟢
+6. **React DevTools 集成** - 仅针对 React 应用
+7. **PPR 锁定机制** - 仅针对 Next.js 应用
+
+---
+
+## 总结
+
+`next-browser` 项目提供了以下关键启示:
+
+1. **守护进程 + Unix Socket** - 比 Tauri event 更高效的通信方式
+2. **Playwright 扩展能力** - 不仅仅是 CDP,还可以加载 Chrome 扩展
+3. **预注入脚本** - 在页面加载前注入监控代码
+4. **结构化输出** - 所有命令返回可解析的文本/JSON
+5. **Source Map 支持** - 将压缩代码映射到原始源码
+6. **完整的 Network 追踪** - 记录所有请求/响应
+
+这些设计可以直接应用到 Proxycast 的 Phase 2-3 实现中,特别是守护进程架构和预注入脚本能力。
diff --git a/docs/research/nextbrowser-debugger.md b/docs/research/nextbrowser-debugger.md
new file mode 100644
index 000000000..0fd3c703f
--- /dev/null
+++ b/docs/research/nextbrowser-debugger.md
@@ -0,0 +1,427 @@
+- generic [active] [ref=e1]:
+  - generic [ref=e2]:
+    - link "Skip to main content" [ref=e3] [cursor=pointer]:
+      - /url: "#content-area"
+    - generic [ref=e6]:
+      - generic [ref=e7]:
+        - generic [ref=e8]:
+          - generic [ref=e9]:
+            - link "Nextbrowser home page light logo" [ref=e10] [cursor=pointer]:
+              - /url: /
+              - generic [ref=e11]: Nextbrowser home page
+              - img "light logo" [ref=e12]
+            - button "Toggle dark mode" [ref=e13] [cursor=pointer]:
+              - generic [ref=e14]:
+                - img [ref=e15]
+                - img [ref=e22]
+          - button "Open search" [ref=e28] [cursor=pointer]:
+            - generic [ref=e29]:
+              - img [ref=e30]
+              - generic [ref=e33]: Search...
+            - generic [ref=e34]: ⌘K
+          - generic [ref=e35]:
+            - list [ref=e36]:
+              - listitem [ref=e37]:
+                - link "Documentation" [ref=e38] [cursor=pointer]:
+                  - /url: /NB-Intro
+                  - img [ref=e39]
+                  - generic [ref=e40]: Documentation
+              - listitem [ref=e41]:
+                - link "API Documentation" [ref=e42] [cursor=pointer]:
+                  - /url: /getting-started
+                  - img [ref=e43]
+                  - generic [ref=e44]: API Documentation
+            - generic [ref=e45]:
+              - heading "Developer Hub" [level=5] [ref=e47]
+              - list [ref=e48]:
+                - listitem [ref=e49]:
+                  - link "Quick start" [ref=e50] [cursor=pointer]:
+                    - /url: /getting-started
+                    - generic [ref=e52]: Quick start
+                - listitem [ref=e53]:
+                  - link "Debugger" [ref=e54] [cursor=pointer]:
+                    - /url: /debugger
+                    - generic [ref=e56]: Debugger
+                - listitem [ref=e57]:
+                  - link "Browser & Proxy settings" [ref=e58] [cursor=pointer]:
+                    - /url: /browser-proxy-settings
+                    - generic [ref=e60]: Browser & Proxy settings
+            - generic [ref=e61]:
+              - heading "API Guide" [level=5] [ref=e63]
+              - list [ref=e64]:
+                - listitem [ref=e65]:
+                  - button "Toggle API Reference section" [ref=e66] [cursor=pointer]:
+                    - generic [ref=e67]: API Reference
+                    - img [ref=e68]
+        - list [ref=e70]:
+          - listitem
+      - generic [ref=e72]:
+        - banner [ref=e73]:
+          - generic [ref=e74]:
+            - generic [ref=e75]: Developer Hub
+            - heading "Quick start" [level=1] [ref=e77]
+          - paragraph [ref=e79]: Learn how to get started with NextBrowser
+        - generic [ref=e80]:
+          - generic [ref=e81]: NextBrowser lets you build and manage browser automation workflows with unparalleled precision, leveraging advanced anti-detection techniques to stay completely stealthy
+          - heading "Navigate to header Before the start" [level=2] [ref=e82]:
+            - link "Navigate to header" [ref=e83] [cursor=pointer]:
+              - /url: "#before-the-start"
+              - img [ref=e85]
+            - generic [ref=e87] [cursor=pointer]: Before the start
+          - heading "Navigate to header API key" [level=3] [ref=e88]:
+            - link "Navigate to header" [ref=e89] [cursor=pointer]:
+              - /url: "#api-key"
+              - img [ref=e91]
+            - generic [ref=e93] [cursor=pointer]: API key
+          - generic [ref=e94]: The first step is a generation of an API key. That can be made in the Settings
+          - blockquote [ref=e95]:
+            - generic [ref=e96]:
+              - text: Go to
+              - code [ref=e97]: Profile
+              - text: →
+              - code [ref=e98]: Settings
+              - text: →
+              - code [ref=e99]: API Key
+              - text: → Copy your API key
+          - generic [ref=e100]:
+            - img "API.gif" [ref=e103]
+            - generic:
+              - 'button "Expand image: API.gif"'
+          - heading "Navigate to header Security best practices" [level=3] [ref=e104]:
+            - link "Navigate to header" [ref=e105] [cursor=pointer]:
+              - /url: "#security-best-practices"
+              - img [ref=e107]
+            - generic [ref=e109] [cursor=pointer]: Security best practices
+          - list [ref=e110]:
+            - listitem [ref=e111]: Keep your API key secure and never share it publicly
+            - listitem [ref=e112]: Do not commit API keys to version control
+            - listitem [ref=e113]: Rotate your API keys periodically
+            - listitem [ref=e114]: Use environment variables to store API keys in your applications
+          - heading "Navigate to header Error responses" [level=3] [ref=e115]:
+            - link "Navigate to header" [ref=e116] [cursor=pointer]:
+              - /url: "#error-responses"
+              - img [ref=e118]
+            - generic [ref=e120] [cursor=pointer]: Error responses
+          - generic [ref=e121]: "Common authentication-related error responses:"
+          - table [ref=e124]:
+            - rowgroup [ref=e125]:
+              - row "Status Code Description" [ref=e126]:
+                - columnheader "Status Code" [ref=e127]
+                - columnheader "Description" [ref=e128]
+            - rowgroup [ref=e129]:
+              - row "401 Unauthorized - Invalid or missing API key" [ref=e130]:
+                - cell "401" [ref=e131]
+                - cell "Unauthorized - Invalid or missing API key" [ref=e132]
+              - row "403 Forbidden - Valid API key but insufficient permissions" [ref=e133]:
+                - cell "403" [ref=e134]
+                - cell "Forbidden - Valid API key but insufficient permissions" [ref=e135]
+              - row "429 Too Many Requests - Rate limit exceeded" [ref=e136]:
+                - cell "429" [ref=e137]
+                - cell "Too Many Requests - Rate limit exceeded" [ref=e138]
+          - generic [ref=e139]: "Example error response:"
+          - generic [ref=e140]:
+            - generic [ref=e142]:
+              - button "Copy the contents from the code block" [ref=e143] [cursor=pointer]:
+                - img [ref=e144]
+              - generic [ref=e147]: Copy
+            - code [ref=e151]:
+              - generic [ref=e152]: "{"
+              - generic [ref=e153]: "\"description\": \"Invalid API key\","
+              - generic [ref=e154]: "\"status_code\": 401"
+              - generic [ref=e155]: "}"
+          - heading "Navigate to header Base URL" [level=2] [ref=e156]:
+            - link "Navigate to header" [ref=e157] [cursor=pointer]:
+              - /url: "#base-url"
+              - img [ref=e159]
+            - generic [ref=e161] [cursor=pointer]: Base URL
+          - generic [ref=e162]: "All API endpoints are relative to the base URL:"
+          - generic [ref=e163]:
+            - generic [ref=e165]:
+              - button "Copy the contents from the code block" [ref=e166] [cursor=pointer]:
+                - img [ref=e167]
+              - generic [ref=e170]: Copy
+            - code [ref=e174]:
+              - generic [ref=e175]: https://api.example.com/v1
+          - generic [ref=e176]: "If you want ot create a task, it can be specified the following way:"
+          - generic [ref=e177]:
+            - generic [ref=e179]:
+              - button "Copy the contents from the code block" [ref=e180] [cursor=pointer]:
+                - img [ref=e181]
+              - generic [ref=e184]: Copy
+            - code [ref=e188]:
+              - generic [ref=e189]: url https://app.nextbrowser.com/api/v1/chat/tasks
+          - blockquote [ref=e190]: Learn more about all API endpoints
+          - heading "Navigate to header Create a task" [level=2] [ref=e191]:
+            - link "Navigate to header" [ref=e192] [cursor=pointer]:
+              - /url: "#create-a-task"
+              - img [ref=e194]
+            - generic [ref=e196] [cursor=pointer]: Create a task
+          - generic [ref=e197]: "Here is an example of the task that will provide a research on the latest news about artificial intelligence and present the summery of the top 3 articles in a bullet format:"
+          - generic [ref=e198]:
+            - generic [ref=e200]:
+              - button "Copy the contents from the code block" [ref=e201] [cursor=pointer]:
+                - img [ref=e202]
+              - generic [ref=e205]: Copy
+            - code [ref=e209]:
+              - generic [ref=e210]: curl --request POST
+              - generic [ref=e211]: "--url https://app.nextbrowser.com/api/v1/chat/tasks"
+              - generic [ref=e212]: "--header 'Authorization: <api-key>'"
+              - generic [ref=e213]: "--header 'Content-Type: application/json'"
+              - generic [ref=e214]: "--data '{"
+              - generic [ref=e215]: "\"llm_model\": \"gemini-2.0-flash\","
+              - generic [ref=e216]: "\"browser_settings\": {"
+              - generic [ref=e217]: "\"browser_type\": \"persistent\","
+              - generic [ref=e218]: "\"os_type\": \"windows\""
+              - generic [ref=e219]: "},"
+              - generic [ref=e220]: "\"task_description\": \"Extract the current price of Bitcoin (BTC)\","
+              - generic [ref=e221]: "\"proxy_settings\": {"
+              - generic [ref=e222]: "\"country\": \"US\","
+              - generic [ref=e223]: "\"region\": \"California\","
+              - generic [ref=e224]: "\"city\": \"Canyon country\","
+              - generic [ref=e225]: "\"isp\": \"Spectrum\","
+              - generic [ref=e226]: "\"proxy_type\": \"Residential\""
+              - generic [ref=e227]: "}"
+              - generic [ref=e228]: "}'"
+          - generic [ref=e229]: "Do not forget to add you API key:"
+          - generic [ref=e230]:
+            - generic [ref=e232]:
+              - button "Copy the contents from the code block" [ref=e233] [cursor=pointer]:
+                - img [ref=e234]
+              - generic [ref=e237]: Copy
+            - code [ref=e241]:
+              - generic [ref=e242]: "--header \"Authorization: x-api-key YOUR_API_KEY\""
+          - generic [ref=e243]: "You will get result in the following format:"
+          - generic [ref=e244]:
+            - generic [ref=e246]:
+              - button "Copy the contents from the code block" [ref=e247] [cursor=pointer]:
+                - img [ref=e248]
+              - generic [ref=e251]: Copy
+            - code [ref=e255]:
+              - generic [ref=e256]: "{"
+              - generic [ref=e257]: "\"success\": true,"
+              - generic [ref=e258]: "\"payload\": {"
+              - generic [ref=e259]: "\"id\": \"94b8dd65-0988-4b2b-984c-b4ce26c87c2b\","
+              - generic [ref=e260]: "\"chat_session_id\": \"a9cba3e5-61c8-475e-8df0-41cd1ab23f99\","
+              - generic [ref=e261]: "\"browser_instance_id\": \"cc619900-a5aa-421d-a18c-2c6193a44077\","
+              - generic [ref=e262]: "\"browser_id\": \"958faf53\","
+              - generic [ref=e263]: "\"user_id\": \"<string>\","
+              - generic [ref=e264]: "\"created_at\": \"2025-06-06T14:21:55.524791Z\","
+              - generic [ref=e265]: "\"state\": \"processing\","
+              - generic [ref=e266]: "\"task_description\": \"Extract the current price of Bitcoin (BTC)\","
+              - generic [ref=e267]: "\"llm_model\": \"gemini-2.0-flash\","
+              - generic [ref=e268]: "\"chat_title\": \"Extracte the current price of Bitcoin (BTC)\""
+              - generic [ref=e269]: "},"
+              - generic [ref=e270]: "\"errors\": {},"
+              - generic [ref=e271]: "\"description\": \"Task creation started\""
+              - generic [ref=e272]: "}"
+          - heading "Navigate to header Get the task status" [level=2] [ref=e273]:
+            - link "Navigate to header" [ref=e274] [cursor=pointer]:
+              - /url: "#get-the-task-status"
+              - img [ref=e276]
+            - generic [ref=e278] [cursor=pointer]: Get the task status
+          - heading "Navigate to header Types of statuses" [level=3] [ref=e279]:
+            - link "Navigate to header" [ref=e280] [cursor=pointer]:
+              - /url: "#types-of-statuses"
+              - img [ref=e282]
+            - generic [ref=e284] [cursor=pointer]: Types of statuses
+          - list [ref=e285]:
+            - listitem [ref=e286]:
+              - code [ref=e287]: active
+              - text: – the task is ongoing
+            - listitem [ref=e288]:
+              - code [ref=e289]: completed
+              - text: – the task is completed
+            - listitem [ref=e290]:
+              - code [ref=e291]: failed
+              - text: – an error aquired during the task run
+          - heading "Navigate to header GET the task status" [level=3] [ref=e292]:
+            - link "Navigate to header" [ref=e293] [cursor=pointer]:
+              - /url: "#get-the-task-status-2"
+              - img [ref=e295]
+            - generic [ref=e297] [cursor=pointer]: GET the task status
+          - generic [ref=e298]: "After launching the task, it will take some time for the AI agent to process it and prepare the automation result. While waiting, you can check the task’s status as follows:"
+          - generic [ref=e299]:
+            - generic [ref=e301]:
+              - button "Copy the contents from the code block" [ref=e302] [cursor=pointer]:
+                - img [ref=e303]
+              - generic [ref=e306]: Copy
+            - code [ref=e310]:
+              - generic [ref=e311]: curl --request GET
+              - generic [ref=e312]: "--url https://app.nextbrowser.com/api/v1/chat/sessions/a9cba3e5-61c8-475e-8df0-41cd1ab23f99/state"
+              - generic [ref=e313]: "--header 'Authorization: x-api-key'"
+          - generic [ref=e314]:
+            - text: Add the
+            - code [ref=e315]: chat_session_id
+            - text: "that you will receive with the responce of task creation request:"
+          - generic [ref=e316]:
+            - generic [ref=e318]:
+              - button "Copy the contents from the code block" [ref=e319] [cursor=pointer]:
+                - img [ref=e320]
+              - generic [ref=e323]: Copy
+            - code [ref=e327]:
+              - generic [ref=e328]: "--url https://app.nextbrowser.com/api/v1/chat/sessions/a9cba3e5-61c8-475e-8df0-41cd1ab23f99/state"
+          - generic [ref=e329]: "Do not forget to add you API key:"
+          - generic [ref=e330]:
+            - generic [ref=e332]:
+              - button "Copy the contents from the code block" [ref=e333] [cursor=pointer]:
+                - img [ref=e334]
+              - generic [ref=e337]: Copy
+            - code [ref=e341]:
+              - generic [ref=e342]: "--header \"Authorization: x-api-key YOUR_API_KEY\""
+          - generic [ref=e343]: "You will get the result in the following format:"
+          - generic [ref=e344]:
+            - generic [ref=e346]:
+              - button "Copy the contents from the code block" [ref=e347] [cursor=pointer]:
+                - img [ref=e348]
+              - generic [ref=e351]: Copy
+            - code [ref=e355]:
+              - generic [ref=e356]: "{"
+              - generic [ref=e357]: "\"id\": \"3c90c3cc-0d44-4b50-8888-8dd25736052a\","
+              - generic [ref=e358]: "\"user_id\": \"<string>\","
+              - generic [ref=e359]: "\"created_at\": \"2023-11-07T05:31:56Z\","
+              - generic [ref=e360]: "\"finished_at\": \"2023-11-07T05:31:56Z\","
+              - generic [ref=e361]: "\"num_tasks\": 123,"
+              - generic [ref=e362]: "\"status\": \"active\","
+              - generic [ref=e363]: "\"browser_instance_id\": \"3c90c3cc-0d44-4b50-8888-8dd25736052a\","
+              - generic [ref=e364]: "\"browser_id\": \"<string>\","
+              - generic [ref=e365]: "\"proxy_settings\": {},"
+              - generic [ref=e366]: "\"browser_settings\": {},"
+              - generic [ref=e367]: "\"tasks\": ["
+              - generic [ref=e368]: "{"
+              - generic [ref=e369]: "\"id\": \"3c90c3cc-0d44-4b50-8888-8dd25736052a\","
+              - generic [ref=e370]: "\"created_at\": \"2023-11-07T05:31:56Z\","
+              - generic [ref=e371]: "\"finished_at\": \"2023-11-07T05:31:56Z\","
+              - generic [ref=e372]: "\"done_output\": \"<string>\","
+              - generic [ref=e373]: "\"structured_output\": {},"
+              - generic [ref=e374]: "\"llm_model\": \"<string>\","
+              - generic [ref=e375]: "\"state\": \"processing\","
+              - generic [ref=e376]: "\"task_description\": \"<string>\","
+              - generic [ref=e377]: "\"output_description\": \"<string>\","
+              - generic [ref=e378]: "\"output_files_path\": \"<string>\","
+              - generic [ref=e379]: "\"error_message\": \"<string>\","
+              - generic [ref=e380]: "\"steps\": ["
+              - generic [ref=e381]: "{"
+              - generic [ref=e382]: "\"id\": \"3c90c3cc-0d44-4b50-8888-8dd25736052a\","
+              - generic [ref=e383]: "\"created_at\": \"2023-11-07T05:31:56Z\","
+              - generic [ref=e384]: "\"finished_at\": \"2023-11-07T05:31:56Z\","
+              - generic [ref=e385]: "\"description\": \"<string>\","
+              - generic [ref=e386]: "\"status\": \"pending\""
+              - generic [ref=e387]: "}"
+              - generic [ref=e388]: "]"
+              - generic [ref=e389]: "}"
+              - generic [ref=e390]: "],"
+              - generic [ref=e391]: "\"title\": \"<string>\""
+              - generic [ref=e392]: "}"
+          - heading "Navigate to header Task result" [level=2] [ref=e393]:
+            - link "Navigate to header" [ref=e394] [cursor=pointer]:
+              - /url: "#task-result"
+              - img [ref=e396]
+            - generic [ref=e398] [cursor=pointer]: Task result
+          - heading "Navigate to header Types of the output" [level=3] [ref=e399]:
+            - link "Navigate to header" [ref=e400] [cursor=pointer]:
+              - /url: "#types-of-the-output"
+              - img [ref=e402]
+            - generic [ref=e404] [cursor=pointer]: Types of the output
+          - generic [ref=e405]: "When using NextBrowser, you can specify the format of the result you want to receive once the automation is complete. This can be:"
+          - list [ref=e406]:
+            - listitem [ref=e407]: Text
+            - listitem [ref=e408]: Bullet points
+            - listitem [ref=e409]: A table
+            - listitem [ref=e410]: CSV, JSON, PDF, and other document formats
+            - listitem [ref=e411]: PNG, SVG, and other image formats
+            - listitem [ref=e412]: Links
+          - heading "Navigate to header Text output" [level=3] [ref=e413]:
+            - link "Navigate to header" [ref=e414] [cursor=pointer]:
+              - /url: "#text-output"
+              - img [ref=e416]
+            - generic [ref=e418] [cursor=pointer]: Text output
+          - generic [ref=e419]: "If the task’s status is “completed,” then the response will also include the automation result as the structured output:"
+          - generic [ref=e420]:
+            - generic [ref=e422]:
+              - button "Copy the contents from the code block" [ref=e423] [cursor=pointer]:
+                - img [ref=e424]
+              - generic [ref=e427]: Copy
+            - code [ref=e431]:
+              - generic [ref=e432]: "structured_output\": {"
+              - generic [ref=e433]: "\"data\": {"
+              - generic [ref=e434]: "\"description\": \"Extracted the current price of Bitcoin (BTC)\","
+              - generic [ref=e435]: "\"content_type\": \"json\","
+              - generic [ref=e436]: "\"content\": {"
+              - generic [ref=e437]: "\"json\": {"
+              - generic [ref=e438]: "\"price\": \"$104,770.88 USD\""
+              - generic [ref=e439]: "}"
+          - heading "Navigate to header File output" [level=3] [ref=e440]:
+            - link "Navigate to header" [ref=e441] [cursor=pointer]:
+              - /url: "#file-output"
+              - img [ref=e443]
+            - generic [ref=e445] [cursor=pointer]: File output
+          - generic [ref=e446]:
+            - text: An example of the file output that can be found in
+            - code [ref=e447]: download_links
+            - text: "section:"
+          - generic [ref=e448]:
+            - generic [ref=e450]:
+              - button "Copy the contents from the code block" [ref=e451] [cursor=pointer]:
+                - img [ref=e452]
+              - generic [ref=e455]: Copy
+            - code [ref=e459]:
+              - generic [ref=e460]: "\"llm_model\": \"gemini-2.0-flash\","
+              - generic [ref=e461]: "\"state\": \"completed\","
+              - generic [ref=e462]: "\"task_description\": \"Extract the current price of Bitcoin (BTC)\","
+              - generic [ref=e463]: "\"output_description\": \"Complete the task.\","
+              - generic [ref=e464]: "\"output_files_path\": null,"
+              - generic [ref=e465]: "\"error_message\": null,"
+              - generic [ref=e466]: "\"download_links\": ["
+              - generic [ref=e467]: "\"https://nextbrowser-stage-task-output-files.s3.amazonaws.com/users/aa4a16e3-4a76-4541-8536-6a3f8db48267/chats/af28e825-1e33-4f30-97ae-f4e3389ee85e/weather_lisbon_20250606_1406400002.csv?AWSAccessKeyId=AKIA3JQ5JIQQSOKPEVVE&Signature=6z627IX93TebG%2BdYiBLq30m27wM%3D&Expires=1749222412\""
+              - generic [ref=e468]: "],"
+          - heading "Navigate to header How to describe the result format" [level=3] [ref=e469]:
+            - link "Navigate to header" [ref=e470] [cursor=pointer]:
+              - /url: "#how-to-describe-the-result-format"
+              - img [ref=e472]
+            - generic [ref=e474] [cursor=pointer]: How to describe the result format
+          - generic [ref=e475]: The more precisely you describe the format and structure of the result you want to receive, the more accurate the automation output will be
+          - strong [ref=e477]: Bad example of output prompting
+          - generic [ref=e478]:
+            - generic [ref=e480]:
+              - button "Copy the contents from the code block" [ref=e481] [cursor=pointer]:
+                - img [ref=e482]
+              - generic [ref=e485]: Copy
+            - code [ref=e489]:
+              - generic [ref=e490]: Collect data on the top 10 sneakers from Amazon and create a CSV
+          - strong [ref=e492]: Good example of output prompting
+          - generic [ref=e493]:
+            - generic [ref=e495]:
+              - button "Copy the contents from the code block" [ref=e496] [cursor=pointer]:
+                - img [ref=e497]
+              - generic [ref=e500]: Copy
+            - code [ref=e504]:
+              - generic [ref=e505]: "Collect data on the top 10 sneakers from Amazon and create a CSV that contains: the export date, ranking position, product name, price, and product link"
+        - link "Debugger Inspect your browser automation using Chrome Devtools Next" [ref=e507] [cursor=pointer]:
+          - /url: /debugger
+          - generic [ref=e508]:
+            - generic [ref=e509]:
+              - generic [ref=e510]: Debugger
+              - generic [ref=e511]: Inspect your browser automation using Chrome Devtools
+            - generic [ref=e513]:
+              - generic [ref=e514]: Next
+              - img [ref=e515]
+        - contentinfo [ref=e517]:
+          - generic [ref=e518]:
+            - link "x" [ref=e519] [cursor=pointer]:
+              - /url: https://twitter.com/example
+              - generic [ref=e520]: x
+              - img [ref=e521]
+            - link "github" [ref=e522] [cursor=pointer]:
+              - /url: https://github.com/example
+              - generic [ref=e523]: github
+              - img [ref=e524]
+            - link "linkedin" [ref=e525] [cursor=pointer]:
+              - /url: https://www.linkedin.com/company/example
+              - generic [ref=e526]: linkedin
+              - img [ref=e527]
+          - link "Powered by This documentation is built and hosted on Mintlify, a developer documentation platform" [ref=e530] [cursor=pointer]:
+            - /url: https://www.mintlify.com?utm_campaign=poweredBy&utm_medium=referral&utm_source=nextbrowserstage
+            - generic [ref=e531]: Powered by
+            - img [ref=e532]
+            - generic [ref=e541]: This documentation is built and hosted on Mintlify, a developer documentation platform
+  - alert [ref=e542]
\ No newline at end of file
diff --git a/docs/research/nextbrowser-features-analysis.md b/docs/research/nextbrowser-features-analysis.md
new file mode 100644
index 000000000..788419984
--- /dev/null
+++ b/docs/research/nextbrowser-features-analysis.md
@@ -0,0 +1,1610 @@
+# 基于 CDP 的远程浏览器实时流控与调试方案(Proxycast 落地版)
+
+> 融合 NextBrowser 特征调查 + Codex 架构设计的务实实施方案
+
+## 目标与原则
+
+### 核心目标
+在现有 `chrome relay + cdp_direct` 基础上,补齐**双通道能力**:
+1. **事件/控制通道**: 基于 DevTools WebSocket 建立稳定 CDP 会话,实时收发命令、console、network、runtime、page lifecycle 事件
+2. **画面流通道**: 基于 `Page.startScreencast` 或受控截图轮询输出低延迟页面画面,用于任务执行中的实时观察与回放
+
+### 设计原则
+- ✅ **保持现有架构**: 不改动后端优先级模型(aster_compat、proxycast_extension_bridge、cdp_direct 并存)
+- ✅ **渐进式增强**: 只升级 cdp_direct 从"HTTP 探测初版"到"有状态 CDP 会话后端"
+- ✅ **KISS/YAGNI**: 不引入第四套浏览器控制通道,避免过度设计
+- ✅ **跨平台兼容**: macOS 与 Windows 都可运行,平台差异仅体现在 Chrome 启动和端口探测
+- ✅ **统一抽象**: 后端产出 session + event stream + frame stream + command result 抽象,前端只消费统一事件
+
+---
+
+## 一、NextBrowser 核心特征总结
+
+### 1. Live View (实时视图) ⭐⭐⭐
+**功能描述:**
+- 在任务执行期间实时流式传输远程浏览器画面
+- 支持远程控制和调试
+- 可以手动干预解决验证码、多因素认证等问题
+
+**技术要点:**
+- 实时视频流传输
+- 双向交互(观看 + 控制)
+- WebSocket 持久连接
+
+**Proxycast 实现优先级:** 🔥 高优先级
+
+---
+
+### 2. Debugger (调试器) ⭐⭐⭐
+**功能描述:**
+- 通过 Chrome DevTools 检查浏览器自动化
+- 获取 browser_id 后可以获取所有标签页的 debug_url
+- 支持 WebSocket 连接到远程 DevTools
+
+**API 流程:**
+```
+1. 创建任务 → 获取 browser_id
+2. GET /api/v1/browser/browser_id/{browser_id}/tabs → 获取 debug_url
+3. 在 Chrome 中打开 debug_url?is-playground=true
+```
+
+**技术要点:**
+- CDP (Chrome DevTools Protocol) 直连
+- WebSocket debugger URL: `wss://...`
+- 支持多标签页调试
+
+**Proxycast 实现优先级:** 🔥 高优先级
+
+---
+
+### 3. Browser & Proxy Settings (浏览器与代理设置) ⭐⭐
+**功能描述:**
+
+**浏览器会话类型:**
+- `persistent`: 持久会话,保存 cookies 和登录状态
+- `one-time`: 一次性会话,每次从头开始
+
+**代理设置:**
+- 代理类型: Residential(住宅) / Mobile(移动)
+- 地理定位: 国家/地区/城市/ISP
+- 用于绕过地理限制和反爬虫检测
+
+**Proxycast 实现优先级:** 🔥 高优先级
+
+---
+
+### 4. Location Customization (位置定制) ⭐⭐
+**功能描述:**
+- 配置代理、地理位置、设备配置文件
+- 模拟真实用户行为避免检测
+- 支持 190+ 国家和主要城市
+- 设备配置: Windows / macOS / Android / iOS
+
+**技术要点:**
+- 代理 IP 轮换
+- 浏览器指纹伪装
+- Geolocation API 覆盖
+- User-Agent 和设备特征模拟
+
+**Proxycast 实现优先级:** 🟡 中优先级
+
+---
+
+### 5. Profiles (保存的登录) ⭐⭐⭐
+**功能描述:**
+- 保存并重用已认证的浏览器会话
+- 自动化任务启动时已登录
+- 支持从 Multilogin 导入配置文件
+
+**工作流程:**
+```
+1. 创建 Profile → 在 Profile Mode 中登录 → 保存
+2. 使用 Profile → 选择已保存的 Profile → 浏览器自动加载 cookies
+3. 管理 Profile → 重命名/删除/刷新
+```
+
+**安全性:**
+- Cookies 加密存储
+- 用户级别隔离
+- 支持会话刷新
+
+**Proxycast 实现优先级:** 🔥 高优先级
+
+---
+
+### 6. Credentials (凭证管理) ⭐
+**功能描述:**
+- 安全存储凭证
+- 会话过期时自动重新认证
+- 支持双因素认证
+
+**Proxycast 实现优先级:** 🟡 中优先级
+
+---
+
+### 7. AutoCAPTCHA Solver (自动验证码解决) ⭐⭐
+**功能描述:**
+- 默认启用,无需配置
+- 支持多种验证码类型:
+  - reCAPTCHA v2/v3
+  - TextCAPTCHA
+  - AWS WAF CAPTCHA
+  - Cloudflare CAPTCHA
+  - FunCAPTCHA
+  - 等等
+
+**Proxycast 实现优先级:** 🟢 低优先级 (可集成第三方服务)
+
+---
+
+### 8. Scheduled Task (定时任务) ⭐
+**功能描述:**
+- 一次性任务: 指定日期和时间运行
+- 循环任务: 每小时/每天/每周/自定义 cron 表达式
+
+**Proxycast 实现优先级:** 🟡 中优先级
+
+---
+
+### 9. Connections (连接器) ⭐
+**功能描述:**
+- 集成外部服务: Google Sheets / Google Drive / Gmail
+- OAuth 认证
+- 自动续期连接
+
+**Proxycast 实现优先级:** 🟢 低优先级
+
+---
+
+### 10. Input & Output (输入输出) ⭐⭐
+**功能描述:**
+- 支持多种输出格式:
+  - 纯文本
+  - 列表
+  - 表格
+  - CSV
+  - JSON
+  - 超链接
+
+**Proxycast 实现优先级:** 🟡 中优先级
+
+---
+
+## 二、关键实现变更
+
+### 2.1 后端会话层 - CdpSessionManager
+
+在 `src-tauri/src/commands/webview_cmd.rs` 对应能力后新增 `CdpSessionManager`,按 `profile_key + target_id` 管理长连接会话。
+
+#### 会话建立流程
+```
+1. 发现可用 target
+2. 选择 page target
+3. 连接 webSocketDebuggerUrl
+4. Target.setAutoAttach(flatten=true)
+5. 启用 Page/Runtime/Network/Log/Console 域
+```
+
+#### 会话状态维护
+```rust
+// src-tauri/src/cdp/session_manager.rs
+pub struct CdpSession {
+    pub session_id: String,
+    pub target_id: String,
+    pub profile_key: String,
+    pub remote_debugging_port: u16,
+
+    // 最近页面快照摘要
+    pub page_snapshot: PageSnapshot,
+
+    // 最近事件 ring buffer(用于调试与回放)
+    pub event_buffer: RingBuffer<BrowserEvent>,
+
+    // 命令请求-响应映射
+    pub pending_commands: HashMap<u64, CommandRequest>,
+
+    // WebSocket 连接
+    ws: Arc<Mutex<WebSocket>>,
+}
+
+pub struct PageSnapshot {
+    pub title: String,
+    pub url: String,
+    pub html_summary: String,  // 或 Markdown 摘要
+    pub last_updated: SystemTime,
+}
+```
+
+---
+
+### 2.2 统一事件模型
+
+新增统一浏览器事件类型,前端与调试页只订阅统一事件流,不直接理解原始 CDP 包。
+
+#### 核心事件类型
+```rust
+// src-tauri/src/cdp/events.rs
+#[derive(Debug, Clone, Serialize, Deserialize)]
+#[serde(tag = "type")]
+pub enum BrowserEvent {
+    // 会话生命周期
+    SessionOpened { session_id: String, target_id: String },
+    SessionClosed { session_id: String, reason: String },
+    SessionError { session_id: String, error: String },
+
+    // 页面状态
+    PageInfoChanged {
+        session_id: String,
+        title: String,
+        url: String,
+    },
+
+    // Console 输出
+    ConsoleMessage {
+        session_id: String,
+        level: String,  // log/warn/error
+        text: String,
+        timestamp: u64,
+    },
+
+    // Network 事件
+    NetworkRequest {
+        session_id: String,
+        request_id: String,
+        url: String,
+        method: String,
+    },
+    NetworkResponse {
+        session_id: String,
+        request_id: String,
+        status: u16,
+        mime_type: String,
+    },
+    NetworkFailed {
+        session_id: String,
+        request_id: String,
+        error_text: String,
+    },
+
+    // DOM 事件(仅摘要)
+    DomEvent {
+        session_id: String,
+        event_type: String,
+        summary: String,
+    },
+
+    // 画面流
+    FrameChunk {
+        session_id: String,
+        data: String,  // base64 JPEG
+        metadata: FrameMetadata,
+    },
+    FrameDropped {
+        session_id: String,
+        reason: String,
+    },
+
+    // 命令执行
+    CommandStarted {
+        session_id: String,
+        command_id: u64,
+        action: String,
+    },
+    CommandCompleted {
+        session_id: String,
+        command_id: u64,
+        result: serde_json::Value,
+    },
+    CommandFailed {
+        session_id: String,
+        command_id: u64,
+        error: String,
+    },
+}
+
+#[derive(Debug, Clone, Serialize, Deserialize)]
+pub struct FrameMetadata {
+    pub width: u32,
+    pub height: u32,
+    pub timestamp: u64,
+    pub sequence: u64,
+}
+```
+
+---
+
+### 2.3 命令执行模型 - 高层 Action API
+
+将当前 `browser_execute_action` 的 `cdp_direct` 分支升级为真正的 WebSocket CDP 调用。
+
+#### 支持的高层 Action
+```rust
+// src-tauri/src/cdp/actions.rs
+pub enum BrowserAction {
+    Click { selector: String },
+    Type { selector: String, text: String },
+    Scroll { direction: ScrollDirection, amount: i32 },
+    ScrollPage { direction: PageScrollDirection },
+    RefreshPage,
+    GoBack,
+    GoForward,
+    Navigate { url: String },
+    GetPageInfo,
+    ReadConsoleMessages { since: Option<u64> },
+    ReadNetworkRequests { since: Option<u64> },
+}
+```
+
+#### Action → CDP 命令编排
+```rust
+impl CdpSession {
+    pub async fn execute_action(&mut self, action: BrowserAction) -> Result<ActionResult> {
+        match action {
+            BrowserAction::Navigate { url } => {
+                // Page.navigate + lifecycle 等待
+                self.ws.send_command("Page.navigate", json!({ "url": url })).await?;
+                self.wait_for_lifecycle("load").await?;
+                Ok(ActionResult::Success)
+            }
+
+            BrowserAction::Click { selector } => {
+                // Runtime.evaluate 或 DOM + Input.dispatchMouseEvent
+                let element = self.query_selector(&selector).await?;
+                self.dispatch_mouse_click(element.x, element.y).await?;
+                Ok(ActionResult::Success)
+            }
+
+            BrowserAction::GetPageInfo => {
+                // Runtime.evaluate 抽取标题、URL、可见文本摘要、关键元素
+                let info = self.evaluate_page_info().await?;
+                Ok(ActionResult::PageInfo(info))
+            }
+
+            BrowserAction::ReadConsoleMessages { since } => {
+                // 从长期订阅事件缓冲区读取
+                let messages = self.event_buffer
+                    .iter()
+                    .filter_map(|e| match e {
+                        BrowserEvent::ConsoleMessage { timestamp, .. }
+                            if since.map_or(true, |s| *timestamp > s) => Some(e.clone()),
+                        _ => None,
+                    })
+                    .collect();
+                Ok(ActionResult::ConsoleMessages(messages))
+            }
+
+            // ... 其他 action
+        }
+    }
+}
+```
+
+---
+
+### 2.4 画面流通道 - Screencast + Screenshot Fallback
+
+#### 默认策略: Page.startScreencast
+```rust
+// src-tauri/src/cdp/screencast.rs
+impl CdpSession {
+    pub async fn start_screencast(&mut self) -> Result<()> {
+        self.ws.send_command("Page.startScreencast", json!({
+            "format": "jpeg",
+            "quality": 60,  // 降低质量减少带宽
+            "maxWidth": 1280,
+            "maxHeight": 720,
+            "everyNthFrame": 1
+        })).await?;
+
+        // 监听 Page.screencastFrame 事件
+        // 转发为 BrowserEvent::FrameChunk
+        Ok(())
+    }
+
+    async fn handle_screencast_frame(&mut self, params: serde_json::Value) -> Result<()> {
+        let data = params["data"].as_str().unwrap();
+        let session_id = params["sessionId"].as_u64().unwrap();
+
+        // 发送到前端
+        self.emit_event(BrowserEvent::FrameChunk {
+            session_id: self.session_id.clone(),
+            data: data.to_string(),
+            metadata: FrameMetadata {
+                width: params["metadata"]["deviceWidth"].as_u64().unwrap() as u32,
+                height: params["metadata"]["deviceHeight"].as_u64().unwrap() as u32,
+                timestamp: chrono::Utc::now().timestamp_millis() as u64,
+                sequence: self.frame_sequence,
+            },
+        }).await?;
+
+        self.frame_sequence += 1;
+
+        // 确认接收
+        self.ws.send_command("Page.screencastFrameAck", json!({
+            "sessionId": session_id
+        })).await?;
+
+        Ok(())
+    }
+}
+```
+
+#### Fallback 策略: Page.captureScreenshot 轮询
+```rust
+impl CdpSession {
+    pub async fn start_screenshot_polling(&mut self, interval_ms: u64) -> Result<()> {
+        let mut interval = tokio::time::interval(Duration::from_millis(interval_ms));
+
+        loop {
+            interval.tick().await;
+
+            match self.capture_screenshot().await {
+                Ok(data) => {
+                    self.emit_event(BrowserEvent::FrameChunk {
+                        session_id: self.session_id.clone(),
+                        data,
+                        metadata: FrameMetadata {
+                            width: 1280,
+                            height: 720,
+                            timestamp: chrono::Utc::now().timestamp_millis() as u64,
+                            sequence: self.frame_sequence,
+                        },
+                    }).await?;
+
+                    self.frame_sequence += 1;
+                }
+                Err(e) => {
+                    self.emit_event(BrowserEvent::FrameDropped {
+                        session_id: self.session_id.clone(),
+                        reason: e.to_string(),
+                    }).await?;
+                }
+            }
+        }
+    }
+
+    async fn capture_screenshot(&self) -> Result<String> {
+        let result = self.ws.send_command("Page.captureScreenshot", json!({
+            "format": "jpeg",
+            "quality": 60
+        })).await?;
+
+        Ok(result["data"].as_str().unwrap().to_string())
+    }
+}
+```
+
+#### 帧流缓存策略
+```rust
+// 只保留最近 N 帧缓存,避免内存膨胀
+const MAX_FRAME_BUFFER_SIZE: usize = 30;  // 约 1 秒的缓存(30fps)
+
+impl CdpSession {
+    fn add_frame_to_buffer(&mut self, frame: FrameChunk) {
+        if self.frame_buffer.len() >= MAX_FRAME_BUFFER_SIZE {
+            self.frame_buffer.pop_front();
+        }
+        self.frame_buffer.push_back(frame);
+    }
+}
+```
+
+---
+
+### 2.5 Tauri/前端接口
+
+在 `src/lib/webview-api.ts` 扩展公共接口。
+
+#### 新增 API
+```typescript
+// src/lib/webview-api.ts
+
+/** 打开 CDP 会话 */
+export async function openCdpSession(params: {
+  profile_key: string;
+  target_id?: string;
+}): Promise<{ session_id: string; target_id: string }> {
+  return invoke('open_cdp_session', params);
+}
+
+/** 关闭 CDP 会话 */
+export async function closeCdpSession(params: {
+  session_id: string;
+}): Promise<void> {
+  return invoke('close_cdp_session', params);
+}
+
+/** 启动浏览器流 */
+export async function startBrowserStream(params: {
+  session_id: string;
+  mode: 'events' | 'frames' | 'both';
+}): Promise<void> {
+  return invoke('start_browser_stream', params);
+}
+
+/** 停止浏览器流 */
+export async function stopBrowserStream(params: {
+  session_id: string;
+  mode?: 'events' | 'frames' | 'both';
+}): Promise<void> {
+  return invoke('stop_browser_stream', params);
+}
+
+/** 执行浏览器 Action(复用现有 API,补充 session_id/target_id) */
+export async function browserExecuteAction(params: {
+  session_id?: string;
+  action: BrowserAction;
+  // ... 现有参数
+}): Promise<ActionResult & { session_id: string; target_id: string }> {
+  return invoke('browser_execute_action', params);
+}
+
+/** 获取浏览器会话状态 */
+export async function getBrowserSessionState(params: {
+  session_id: string;
+}): Promise<SessionState> {
+  return invoke('get_browser_session_state', params);
+}
+
+/** 获取浏览器事件缓冲区 */
+export async function getBrowserEventBuffer(params: {
+  session_id: string;
+  cursor?: number;
+}): Promise<{ events: BrowserEvent[]; next_cursor: number }> {
+  return invoke('get_browser_event_buffer', params);
+}
+```
+
+#### 事件订阅
+```typescript
+// 订阅统一浏览器事件
+import { listen } from '@tauri-apps/api/event';
+
+const unlisten = await listen<BrowserEvent>('browser-event', (event) => {
+  switch (event.payload.type) {
+    case 'SessionOpened':
+      console.log('会话已打开:', event.payload.session_id);
+      break;
+    case 'FrameChunk':
+      updateCanvas(event.payload.data);
+      break;
+    case 'ConsoleMessage':
+      addConsoleLog(event.payload);
+      break;
+    // ... 处理其他事件
+  }
+});
+```
+
+---
+
+### 2.6 Profiles - 会话持久化
+
+#### 数据库设计
+```sql
+-- src-tauri/migrations/add_profiles.sql
+CREATE TABLE profiles (
+    id TEXT PRIMARY KEY,
+    name TEXT NOT NULL,
+    domain TEXT NOT NULL,
+    cookies_encrypted BLOB NOT NULL,
+    local_storage TEXT,
+    session_storage TEXT,
+    created_at INTEGER NOT NULL,
+    updated_at INTEGER NOT NULL,
+    last_used_at INTEGER
+);
+
+CREATE INDEX idx_profiles_domain ON profiles(domain);
+```
+
+#### Profile Service
+```rust
+// src-tauri/src/services/profile_service.rs
+pub struct ProfileService {
+    db: Arc<Database>,
+    encryption_key: Vec<u8>,
+}
+
+impl ProfileService {
+    pub async fn save_profile(
+        &self,
+        name: String,
+        domain: String,
+        cookies: Vec<Cookie>,
+    ) -> Result<String> {
+        let profile_id = Uuid::new_v4().to_string();
+
+        // 加密 cookies (AES-256-GCM)
+        let cookies_json = serde_json::to_vec(&cookies)?;
+        let encrypted = self.encrypt(&cookies_json)?;
+
+        sqlx::query!(
+            "INSERT INTO profiles (id, name, domain, cookies_encrypted, created_at, updated_at)
+             VALUES (?, ?, ?, ?, ?, ?)",
+            profile_id,
+            name,
+            domain,
+            encrypted,
+            chrono::Utc::now().timestamp(),
+            chrono::Utc::now().timestamp()
+        )
+        .execute(&self.db.pool)
+        .await?;
+
+        Ok(profile_id)
+    }
+
+    pub async fn load_profile(&self, profile_id: &str) -> Result<Vec<Cookie>> {
+        let row = sqlx::query!(
+            "SELECT cookies_encrypted FROM profiles WHERE id = ?",
+            profile_id
+        )
+        .fetch_one(&self.db.pool)
+        .await?;
+
+        let decrypted = self.decrypt(&row.cookies_encrypted)?;
+        let cookies: Vec<Cookie> = serde_json::from_slice(&decrypted)?;
+
+        Ok(cookies)
+    }
+
+    fn encrypt(&self, data: &[u8]) -> Result<Vec<u8>> {
+        // AES-256-GCM 加密实现
+        use aes_gcm::{Aes256Gcm, KeyInit, Nonce};
+        use aes_gcm::aead::Aead;
+
+        let cipher = Aes256Gcm::new_from_slice(&self.encryption_key)?;
+        let nonce = Nonce::from_slice(b"unique nonce"); // 实际应使用随机 nonce
+
+        let ciphertext = cipher.encrypt(nonce, data)?;
+        Ok(ciphertext)
+    }
+
+    fn decrypt(&self, data: &[u8]) -> Result<Vec<u8>> {
+        // AES-256-GCM 解密实现
+        use aes_gcm::{Aes256Gcm, KeyInit, Nonce};
+        use aes_gcm::aead::Aead;
+
+        let cipher = Aes256Gcm::new_from_slice(&self.encryption_key)?;
+        let nonce = Nonce::from_slice(b"unique nonce");
+
+        let plaintext = cipher.decrypt(nonce, data)?;
+        Ok(plaintext)
+    }
+}
+```
+
+---
+
+### 2.7 调试与可观测性
+
+在现有 ChromeRelaySettings 旁补一个最小调试面板。
+
+#### 调试面板组件
+```typescript
+// src/components/BrowserDebugPanel.tsx
+export function BrowserDebugPanel({ sessionId }: { sessionId: string }) {
+  const [sessionState, setSessionState] = useState<SessionState | null>(null);
+  const [consoleMessages, setConsoleMessages] = useState<ConsoleMessage[]>([]);
+  const [networkRequests, setNetworkRequests] = useState<NetworkRequest[]>([]);
+
+  useEffect(() => {
+    // 订阅浏览器事件
+    const unlisten = listen<BrowserEvent>('browser-event', (event) => {
+      if (event.payload.session_id !== sessionId) return;
+
+      switch (event.payload.type) {
+        case 'ConsoleMessage':
+          setConsoleMessages(prev => [...prev, event.payload]);
+          break;
+        case 'NetworkRequest':
+        case 'NetworkResponse':
+          updateNetworkRequests(event.payload);
+          break;
+      }
+    });
+
+    return () => { unlisten.then(fn => fn()); };
+  }, [sessionId]);
+
+  return (
+    <div className="debug-panel">
+      <div className="session-info">
+        <h3>会话状态</h3>
+        <div>Profile: {sessionState?.profile_key}</div>
+        <div>Target: {sessionState?.target_id}</div>
+        <div>最后心跳: {sessionState?.last_heartbeat}</div>
+        <div>最近命令: {sessionState?.last_command}</div>
+      </div>
+
+      <div className="console-view">
+        <h3>Console</h3>
+        {consoleMessages.map((msg, i) => (
+          <div key={i} className={`console-${msg.level}`}>
+            [{msg.level}] {msg.text}
+          </div>
+        ))}
+      </div>
+
+      <div className="network-view">
+        <h3>Network</h3>
+        <table>
+          <thead>
+            <tr>
+              <th>Method</th>
+              <th>URL</th>
+              <th>Status</th>
+              <th>Type</th>
+            </tr>
+          </thead>
+          <tbody>
+            {networkRequests.map((req, i) => (
+              <tr key={i}>
+                <td>{req.method}</td>
+                <td>{req.url}</td>
+                <td>{req.status}</td>
+                <td>{req.mime_type}</td>
+              </tr>
+            ))}
+          </tbody>
+        </table>
+      </div>
+
+      <div className="live-preview">
+        <h3>实时画面</h3>
+        <LiveViewCanvas sessionId={sessionId} />
+      </div>
+    </div>
+  );
+}
+```
+
+#### 错误与日志集成
+所有原始 CDP 错误、命令超时、target detach 都进入现有 audit/log 体系:
+
+```rust
+// src-tauri/src/cdp/session_manager.rs
+impl CdpSession {
+    async fn handle_error(&self, error: CdpError) {
+        // 记录到现有日志系统
+        tracing::error!(
+            session_id = %self.session_id,
+            target_id = %self.target_id,
+            error = ?error,
+            "CDP session error"
+        );
+
+        // 发送错误事件
+        self.emit_event(BrowserEvent::SessionError {
+            session_id: self.session_id.clone(),
+            error: error.to_string(),
+        }).await.ok();
+    }
+}
+```
+
+---
+
+## 三、实现优先级路线图
+
+### Phase 1: 核心 CDP 会话 (2-3 周) 🔥
+
+**目标**: 建立稳定的 CDP WebSocket 会话,实现基础事件流和命令执行
+
+#### 任务清单
+- [ ] **CdpSessionManager** - 会话生命周期管理
+  - 发现 target 并建立 WebSocket 连接
+  - Target.setAutoAttach + 启用 Page/Runtime/Network/Log/Console 域
+  - 会话状态维护(page_snapshot, event_buffer, pending_commands)
+
+- [ ] **统一事件模型** - BrowserEvent 枚举定义
+  - 会话生命周期事件(SessionOpened/Closed/Error)
+  - 页面状态事件(PageInfoChanged)
+  - Console/Network 事件
+  - 命令执行事件(CommandStarted/Completed/Failed)
+
+- [ ] **高层 Action API** - browser_execute_action 升级
+  - Navigate + lifecycle 等待
+  - Click/Type (Runtime.evaluate 或 DOM + Input)
+  - GetPageInfo (Runtime.evaluate 抽取摘要)
+  - ReadConsoleMessages/ReadNetworkRequests (从 event_buffer 读取)
+
+- [ ] **Tauri 命令接口**
+  - `open_cdp_session`
+  - `close_cdp_session`
+  - `browser_execute_action` (补充 session_id/target_id)
+  - `get_browser_session_state`
+  - `get_browser_event_buffer`
+
+- [ ] **事件推送** - Tauri event 通道
+  - 后端通过 `app.emit("browser-event", event)` 推送
+  - 前端通过 `listen<BrowserEvent>('browser-event')` 订阅
+
+#### 验收标准
+- ✅ 启动一个 profile,会话建立后能实时看到 PageInfoChanged 事件
+- ✅ 执行 navigate/click/type 时,前端能收到 CommandStarted/Completed 事件
+- ✅ Console 输出和 Network 请求能实时推送到前端
+- ✅ 断开浏览器时,会话能正确关闭并发送 SessionClosed 事件
+
+---
+
+### Phase 2: 画面流通道 (1-2 周) 🔥
+
+**目标**: 实现实时画面流式传输,支持 screencast + screenshot fallback
+
+#### 任务清单
+- [ ] **Screencast 实现**
+  - `Page.startScreencast` + `Page.screencastFrameAck`
+  - 监听 `Page.screencastFrame` 事件
+  - 转发为 `BrowserEvent::FrameChunk`
+  - 帧流缓存(最近 30 帧)
+
+- [ ] **Screenshot Fallback**
+  - `Page.captureScreenshot` 轮询(默认 200ms 间隔)
+  - 自动降级策略(screencast 失败时切换)
+  - `BrowserEvent::FrameDropped` 错误上报
+
+- [ ] **前端 LiveView 组件**
+  - Canvas 渲染 base64 JPEG 帧
+  - 远程控制(鼠标/键盘事件转发)
+  - 工具栏(启用/禁用控制、截图、停止会话)
+
+- [ ] **Tauri 命令接口**
+  - `start_browser_stream` (mode: events/frames/both)
+  - `stop_browser_stream`
+
+#### 验收标准
+- ✅ 启动 screencast 后,前端能实时看到浏览器画面(30fps)
+- ✅ 点击 Canvas 能触发远程浏览器的点击事件
+- ✅ Screencast 失败时自动降级到 screenshot 轮询
+- ✅ 帧流缓存不超过 30 帧,避免内存膨胀
+
+---
+
+### Phase 3: Profiles 持久化 (1-2 周) 🔥
+
+**目标**: 实现浏览器会话持久化,支持 Cookies 加密存储
+
+#### 任务清单
+- [ ] **数据库设计**
+  - `profiles` 表(id, name, domain, cookies_encrypted, created_at, updated_at)
+  - 索引(idx_profiles_domain)
+
+- [ ] **ProfileService**
+  - `save_profile` - AES-256-GCM 加密 cookies
+  - `load_profile` - 解密并返回 cookies
+  - `list_profiles` - 列出所有 profiles
+  - `delete_profile` - 删除 profile
+
+- [ ] **Tauri 命令接口**
+  - `create_profile` - 创建新 profile
+  - `load_profile_cookies` - 加载 profile 的 cookies
+  - `list_profiles` - 列出所有 profiles
+  - `delete_profile` - 删除 profile
+
+- [ ] **前端 Profiles 管理页面**
+  - ProfileCard 组件
+  - CreateProfileModal 组件
+  - 编辑/删除 profile
+
+#### 验收标准
+- ✅ 创建 profile 后,cookies 被加密存储到数据库
+- ✅ 加载 profile 时,cookies 被正确解密并应用到浏览器
+- ✅ 前端能列出、创建、编辑、删除 profiles
+- ✅ 加密密钥安全存储,用户级别隔离
+
+---
+
+### Phase 4: 调试面板 (1 周) 🟡
+
+**目标**: 提供最小调试面板,方便开发和排障
+
+#### 任务清单
+- [ ] **BrowserDebugPanel 组件**
+  - 会话状态显示(profile_key, target_id, last_heartbeat)
+  - Console 视图(实时显示 console 输出)
+  - Network 视图(请求列表、状态、类型)
+  - 实时画面预览(复用 LiveViewCanvas)
+
+- [ ] **错误与日志集成**
+  - CDP 错误记录到 tracing
+  - 命令超时上报
+  - Target detach 处理
+
+#### 验收标准
+- ✅ 调试面板能显示当前会话状态
+- ✅ Console 输出实时更新
+- ✅ Network 请求列表实时更新
+- ✅ CDP 错误能在日志中查看
+
+---
+
+### Phase 5: API 服务器扩展 (可选) 🟢
+
+**目标**: 提供 NextBrowser 兼容的 HTTP API
+
+#### 任务清单
+- [ ] **任务管理 API**
+  - `POST /api/v1/chat/tasks` - 创建任务
+  - `GET /api/v1/chat/sessions/{session_id}/state` - 查询任务状态
+  - `GET /api/v1/browser/browser_id/{browser_id}/tabs` - 获取浏览器标签页
+
+- [ ] **Profile 管理 API**
+  - `POST /api/v1/profiles` - 创建 profile
+  - `GET /api/v1/profiles` - 列出 profiles
+  - `DELETE /api/v1/profiles/{profile_id}` - 删除 profile
+
+#### 验收标准
+- ✅ API 端点符合 NextBrowser 规范
+- ✅ 支持 JSON 请求/响应
+- ✅ 错误处理和状态码正确
+
+---
+
+## 四、测试与验收
+
+### 4.1 Rust 单元测试
+
+```rust
+// src-tauri/src/cdp/session_manager_test.rs
+
+#[tokio::test]
+async fn test_session_lifecycle() {
+    let manager = CdpSessionManager::new();
+
+    // 创建会话
+    let session_id = manager.open_session("test_profile", None).await.unwrap();
+    assert!(!session_id.is_empty());
+
+    // 获取会话状态
+    let state = manager.get_session_state(&session_id).await.unwrap();
+    assert_eq!(state.profile_key, "test_profile");
+
+    // 关闭会话
+    manager.close_session(&session_id).await.unwrap();
+
+    // 验证会话已关闭
+    assert!(manager.get_session_state(&session_id).await.is_err());
+}
+
+#[tokio::test]
+async fn test_event_mapping() {
+    // 测试 CDP 事件到统一事件的映射
+    let cdp_event = json!({
+        "method": "Console.messageAdded",
+        "params": {
+            "message": {
+                "level": "error",
+                "text": "Test error",
+                "timestamp": 1234567890
+            }
+        }
+    });
+
+    let browser_event = map_cdp_event(cdp_event).unwrap();
+
+    match browser_event {
+        BrowserEvent::ConsoleMessage { level, text, .. } => {
+            assert_eq!(level, "error");
+            assert_eq!(text, "Test error");
+        }
+        _ => panic!("Expected ConsoleMessage event"),
+    }
+}
+
+#[tokio::test]
+async fn test_command_timeout() {
+    let session = CdpSession::new("test_session", "test_target", "ws://localhost:9222");
+
+    // 发送命令并设置超时
+    let result = session.execute_action(BrowserAction::Navigate {
+        url: "https://example.com".to_string()
+    }).await;
+
+    // 验证超时处理
+    // ...
+}
+
+#[tokio::test]
+async fn test_screencast_fallback() {
+    let mut session = CdpSession::new("test_session", "test_target", "ws://localhost:9222");
+
+    // 模拟 screencast 失败
+    session.screencast_enabled = false;
+
+    // 启动画面流
+    session.start_screencast().await.unwrap();
+
+    // 验证自动降级到 screenshot
+    assert!(session.screenshot_fallback_active);
+}
+```
+
+---
+
+### 4.2 前端测试
+
+```typescript
+// src/lib/webview-api.test.ts
+import { describe, it, expect, vi } from 'vitest';
+import { openCdpSession, closeCdpSession } from './webview-api';
+
+describe('webview-api', () => {
+  it('should open CDP session', async () => {
+    const mockInvoke = vi.fn().mockResolvedValue({
+      session_id: 'test-session',
+      target_id: 'test-target'
+    });
+
+    global.invoke = mockInvoke;
+
+    const result = await openCdpSession({ profile_key: 'test' });
+
+    expect(result.session_id).toBe('test-session');
+    expect(mockInvoke).toHaveBeenCalledWith('open_cdp_session', {
+      profile_key: 'test'
+    });
+  });
+
+  it('should close CDP session', async () => {
+    const mockInvoke = vi.fn().mockResolvedValue(undefined);
+    global.invoke = mockInvoke;
+
+    await closeCdpSession({ session_id: 'test-session' });
+
+    expect(mockInvoke).toHaveBeenCalledWith('close_cdp_session', {
+      session_id: 'test-session'
+    });
+  });
+});
+```
+
+```typescript
+// src/components/BrowserDebugPanel.test.tsx
+import { describe, it, expect } from 'vitest';
+import { render, screen } from '@testing-library/react';
+import { BrowserDebugPanel } from './BrowserDebugPanel';
+
+describe('BrowserDebugPanel', () => {
+  it('should render session info', () => {
+    render(<BrowserDebugPanel sessionId="test-session" />);
+
+    expect(screen.getByText(/会话状态/i)).toBeInTheDocument();
+  });
+
+  it('should handle no stream state', () => {
+    render(<BrowserDebugPanel sessionId="test-session" />);
+
+    // 验证无流状态下的 UI
+    expect(screen.queryByText(/实时画面/i)).toBeInTheDocument();
+  });
+
+  it('should handle disconnection', async () => {
+    const { rerender } = render(<BrowserDebugPanel sessionId="test-session" />);
+
+    // 模拟断线
+    // ...
+
+    rerender(<BrowserDebugPanel sessionId="test-session" />);
+
+    // 验证断线状态
+    // ...
+  });
+});
+```
+
+---
+
+### 4.3 集成验证
+
+#### 场景 1: 基础会话建立
+```bash
+# 1. 启动 Proxycast
+npm run tauri:dev
+
+# 2. 打开调试面板
+# 3. 创建新会话
+# 4. 验证:
+#    - 能看到 SessionOpened 事件
+#    - 能看到 PageInfoChanged 事件(标题/URL)
+#    - Console 视图显示初始日志
+#    - Network 视图显示初始请求
+```
+
+#### 场景 2: 实时画面流
+```bash
+# 1. 在已建立的会话中启动画面流
+# 2. 验证:
+#    - 画面连续刷新(30fps)
+#    - 点击 Canvas 能触发远程点击
+#    - 输入键盘能触发远程输入
+#    - 帧流缓存不超过 30 帧
+```
+
+#### 场景 3: 命令执行
+```bash
+# 1. 执行 navigate 命令
+# 2. 验证:
+#    - 收到 CommandStarted 事件
+#    - 页面导航成功
+#    - 收到 CommandCompleted 事件
+#    - 出错时收到 CommandFailed 事件(包含 CDP 错误)
+```
+
+#### 场景 4: 断线重连
+```bash
+# 1. 关闭浏览器进程
+# 2. 验证:
+#    - 收到 SessionClosed 事件
+#    - 前端状态正确更新
+#    - 不残留脏 session
+```
+
+#### 场景 5: Profile 持久化
+```bash
+# 1. 创建 Profile 并登录网站
+# 2. 保存 Profile
+# 3. 关闭会话
+# 4. 重新加载 Profile
+# 5. 验证:
+#    - Cookies 被正确加载
+#    - 网站保持登录状态
+#    - 加密存储安全
+```
+
+---
+
+### 4.4 验收标准总结
+
+#### 核心功能
+- ✅ cdp_direct 不再报"需要建立 WebSocket DevTools 会话后补齐"
+- ✅ 用户在任务执行期间可同时看到:
+  - 实时画面(30fps)
+  - Console/Network 事件
+  - 命令结果
+- ✅ 默认链路在 macOS 与 Windows 都可运行
+
+#### 性能指标
+- ✅ 画面流延迟 < 200ms
+- ✅ 事件推送延迟 < 100ms
+- ✅ 命令执行响应 < 500ms
+- ✅ 内存占用 < 500MB (单会话)
+
+#### 稳定性
+- ✅ 会话断线自动重连(最多 3 次)
+- ✅ Screencast 失败自动降级到 screenshot
+- ✅ 命令超时自动取消(默认 30s)
+- ✅ 帧流缓存不超过 30 帧
+
+---
+
+## 五、默认决策与假设
+
+### 架构决策
+- ✅ **默认以当前仓库落地为目标**,不设计独立外部服务
+- ✅ **默认先实现单 page target 单活会话**,多 tab 并发观察放到第二阶段,但数据模型提前兼容
+- ✅ **默认优先走 Tauri event 推送事件与帧**,只有验证吞吐不足时再切专用本地 WebSocket
+- ✅ **默认画面流使用 JPEG screencast**,并提供 screenshot fallback,暂不引入视频编码、录屏文件落盘、音频流
+- ✅ **默认只暴露高层 action API 给业务层**,原始 CDP 命令透传仅保留给调试入口,避免公共接口过早失控
+- ✅ **默认不改动现有后端优先级策略**,只增强 cdp_direct 能力,保持 KISS / YAGNI,避免再造第四套浏览器控制通道
+
+### 技术选型
+- ✅ **WebSocket**: 使用 `tokio-tungstenite` 实现 CDP WebSocket 连接
+- ✅ **事件推送**: 优先使用 Tauri event,吞吐不足时切换到本地 WebSocket
+- ✅ **加密**: 使用 `aes-gcm` crate 实现 AES-256-GCM 加密
+- ✅ **数据库**: 使用 SQLite + sqlx
+- ✅ **日志**: 使用 `tracing` crate
+
+### 平台兼容性
+- ✅ **macOS**: 默认支持,Chrome 路径 `/Applications/Google Chrome.app/Contents/MacOS/Google Chrome`
+- ✅ **Windows**: 默认支持,Chrome 路径 `C:\Program Files\Google\Chrome\Application\chrome.exe`
+- ✅ **Linux**: 暂不支持,但数据模型兼容
+
+---
+
+## 六、技术难点与解决方案
+
+### 6.1 实时视频流性能优化
+
+**问题**: `Page.startScreencast` 产生大量 JPEG 帧,可能导致带宽和 CPU 压力
+
+**解决方案**:
+1. **动态调整帧率和质量**
+   ```rust
+   // 根据网络状况动态调整
+   if network_latency > 200ms {
+       quality = 40;  // 降低质量
+       everyNthFrame = 2;  // 降低帧率
+   }
+   ```
+
+2. **客户端缓存和差分编码**
+   ```typescript
+   // 只渲染变化的区域
+   const diff = computeFrameDiff(prevFrame, currentFrame);
+   if (diff.percentage < 5%) {
+       skipFrame();
+   }
+   ```
+
+3. **WebRTC 替代方案(第二阶段)**
+   - 使用 WebRTC Data Channel 传输帧
+   - 更低延迟(< 100ms)
+   - 自动拥塞控制
+
+---
+
+### 6.2 多浏览器实例管理
+
+**问题**: 同时运行多个浏览器实例,需要隔离和资源管理
+
+**解决方案**:
+1. **独立用户数据目录**
+   ```rust
+   let user_data_dir = format!("/tmp/proxycast/profile_{}", profile_key);
+   let chrome_args = vec![
+       format!("--user-data-dir={}", user_data_dir),
+       "--no-first-run",
+       "--no-default-browser-check",
+   ];
+   ```
+
+2. **端口池管理**
+   ```rust
+   pub struct PortPool {
+       available_ports: Vec<u16>,
+       used_ports: HashMap<String, u16>,
+   }
+
+   impl PortPool {
+       pub fn allocate(&mut self, session_id: &str) -> Option<u16> {
+           let port = self.available_ports.pop()?;
+           self.used_ports.insert(session_id.to_string(), port);
+           Some(port)
+       }
+
+       pub fn release(&mut self, session_id: &str) {
+           if let Some(port) = self.used_ports.remove(session_id) {
+               self.available_ports.push(port);
+           }
+       }
+   }
+   ```
+
+3. **资源限制**
+   ```rust
+   // 使用 tokio 限制并发会话数
+   const MAX_CONCURRENT_SESSIONS: usize = 10;
+
+   let semaphore = Arc::new(Semaphore::new(MAX_CONCURRENT_SESSIONS));
+
+   async fn create_session() -> Result<Session> {
+       let _permit = semaphore.acquire().await?;
+       // 创建会话...
+   }
+   ```
+
+---
+
+### 6.3 Cookies 加密安全
+
+**问题**: Cookies 包含敏感信息,需要安全存储
+
+**解决方案**:
+1. **AES-256-GCM 加密**
+   ```rust
+   use aes_gcm::{Aes256Gcm, KeyInit, Nonce};
+   use aes_gcm::aead::{Aead, OsRng};
+
+   pub fn encrypt_cookies(cookies: &[Cookie], key: &[u8]) -> Result<Vec<u8>> {
+       let cipher = Aes256Gcm::new_from_slice(key)?;
+
+       // 生成随机 nonce
+       let mut nonce_bytes = [0u8; 12];
+       OsRng.fill_bytes(&mut nonce_bytes);
+       let nonce = Nonce::from_slice(&nonce_bytes);
+
+       let plaintext = serde_json::to_vec(cookies)?;
+       let ciphertext = cipher.encrypt(nonce, plaintext.as_ref())?;
+
+       // 拼接 nonce + ciphertext
+       let mut result = nonce_bytes.to_vec();
+       result.extend_from_slice(&ciphertext);
+
+       Ok(result)
+   }
+
+   pub fn decrypt_cookies(data: &[u8], key: &[u8]) -> Result<Vec<Cookie>> {
+       let cipher = Aes256Gcm::new_from_slice(key)?;
+
+       // 分离 nonce 和 ciphertext
+       let (nonce_bytes, ciphertext) = data.split_at(12);
+       let nonce = Nonce::from_slice(nonce_bytes);
+
+       let plaintext = cipher.decrypt(nonce, ciphertext)?;
+       let cookies: Vec<Cookie> = serde_json::from_slice(&plaintext)?;
+
+       Ok(cookies)
+   }
+   ```
+
+2. **密钥派生(PBKDF2)**
+   ```rust
+   use pbkdf2::{pbkdf2_hmac};
+   use sha2::Sha256;
+
+   pub fn derive_encryption_key(password: &str, salt: &[u8]) -> [u8; 32] {
+       let mut key = [0u8; 32];
+       pbkdf2_hmac::<Sha256>(
+           password.as_bytes(),
+           salt,
+           100_000,  // 迭代次数
+           &mut key
+       );
+       key
+   }
+   ```
+
+3. **用户级别隔离**
+   ```rust
+   // 每个用户使用独立的加密密钥
+   let user_salt = format!("proxycast_user_{}", user_id);
+   let encryption_key = derive_encryption_key(&user_password, user_salt.as_bytes());
+   ```
+
+---
+
+### 6.4 WebSocket 连接稳定性
+
+**问题**: CDP WebSocket 连接可能断开,需要自动重连
+
+**解决方案**:
+1. **心跳检测**
+   ```rust
+   impl CdpSession {
+       async fn start_heartbeat(&self) {
+           let mut interval = tokio::time::interval(Duration::from_secs(30));
+
+           loop {
+               interval.tick().await;
+
+               if let Err(e) = self.ws.send_ping().await {
+                   tracing::warn!("Heartbeat failed: {}", e);
+                   self.reconnect().await.ok();
+               }
+           }
+       }
+   }
+   ```
+
+2. **自动重连**
+   ```rust
+   impl CdpSession {
+       async fn reconnect(&mut self) -> Result<()> {
+           const MAX_RETRIES: usize = 3;
+           const RETRY_DELAY: Duration = Duration::from_secs(2);
+
+           for attempt in 1..=MAX_RETRIES {
+               tracing::info!("Reconnecting attempt {}/{}", attempt, MAX_RETRIES);
+
+               match self.connect_websocket().await {
+                   Ok(ws) => {
+                       self.ws = ws;
+                       self.resubscribe_events().await?;
+                       return Ok(());
+                   }
+                   Err(e) => {
+                       tracing::warn!("Reconnect failed: {}", e);
+                       tokio::time::sleep(RETRY_DELAY).await;
+                   }
+               }
+           }
+
+           Err(anyhow!("Failed to reconnect after {} attempts", MAX_RETRIES))
+       }
+   }
+   ```
+
+3. **事件重放**
+   ```rust
+   // 重连后重新订阅事件
+   async fn resubscribe_events(&self) -> Result<()> {
+       self.ws.send_command("Page.enable", json!({})).await?;
+       self.ws.send_command("Runtime.enable", json!({})).await?;
+       self.ws.send_command("Network.enable", json!({})).await?;
+       self.ws.send_command("Log.enable", json!({})).await?;
+       self.ws.send_command("Console.enable", json!({})).await?;
+
+       Ok(())
+   }
+   ```
+
+---
+
+### 6.5 事件推送吞吐量
+
+**问题**: Tauri event 可能无法满足高频事件推送(如 30fps 画面流)
+
+**解决方案**:
+1. **批量推送**
+   ```rust
+   // 批量推送事件,减少 IPC 开销
+   const BATCH_SIZE: usize = 10;
+   const BATCH_INTERVAL: Duration = Duration::from_millis(100);
+
+   let mut event_batch = Vec::new();
+   let mut interval = tokio::time::interval(BATCH_INTERVAL);
+
+   loop {
+       tokio::select! {
+           event = event_rx.recv() => {
+               event_batch.push(event);
+
+               if event_batch.len() >= BATCH_SIZE {
+                   app.emit("browser-events", &event_batch)?;
+                   event_batch.clear();
+               }
+           }
+           _ = interval.tick() => {
+               if !event_batch.is_empty() {
+                   app.emit("browser-events", &event_batch)?;
+                   event_batch.clear();
+               }
+           }
+       }
+   }
+   ```
+
+2. **本地 WebSocket Fallback**
+   ```rust
+   // 当 Tauri event 吞吐不足时,切换到本地 WebSocket
+   if event_rate > 100 {  // 每秒超过 100 个事件
+       switch_to_local_websocket().await?;
+   }
+
+   async fn switch_to_local_websocket() -> Result<()> {
+       let listener = TcpListener::bind("127.0.0.1:0").await?;
+       let port = listener.local_addr()?.port();
+
+       // 通知前端切换到 WebSocket
+       app.emit("switch-to-websocket", json!({ "port": port }))?;
+
+       // 接受 WebSocket 连接
+       let (stream, _) = listener.accept().await?;
+       let ws = tokio_tungstenite::accept_async(stream).await?;
+
+       // 通过 WebSocket 推送事件
+       // ...
+
+       Ok(())
+   }
+   ```
+
+---
+
+## 七、与现有 Proxycast 架构的集成
+
+### 7.1 复用现有模块
+
+**现有基础设施**:
+- ✅ `webview_cmd.rs` - 已有 CDP HTTP 探测,升级为 WebSocket 会话
+- ✅ `server.rs` - 扩展 API 端点(任务管理、Profile 管理)
+- ✅ `database.rs` - 添加 Profiles 表
+- ✅ DevBridge - 前端与 Tauri 通信,复用事件推送机制
+
+**集成策略**:
+1. **不改动现有优先级**: aster_compat、proxycast_extension_bridge、cdp_direct 继续并存
+2. **只增强 cdp_direct**: 从 HTTP 探测升级为有状态 WebSocket 会话
+3. **保持接口兼容**: `browser_execute_action` 保持现有签名,补充 `session_id`/`target_id` 返回值
+
+---
+
+### 7.2 新增模块
+
+```
+src-tauri/src/
+├── cdp/
+│   ├── mod.rs                  # CDP 模块入口
+│   ├── session_manager.rs      # CdpSessionManager - 会话生命周期管理
+│   ├── events.rs               # BrowserEvent - 统一事件模型
+│   ├── actions.rs              # BrowserAction - 高层 Action API
+│   ├── screencast.rs           # Screencast + Screenshot Fallback
+│   ├── input.rs                # 远程控制(鼠标/键盘)
+│   └── websocket.rs            # CDP WebSocket 封装
+├── services/
+│   ├── profile_service.rs      # Profile 加密存储与加载
+│   ├── port_pool.rs            # CDP 端口池管理
+│   └── browser_pool.rs         # 浏览器实例池(可选,第二阶段)
+├── models/
+│   ├── profile.rs              # Profile 数据模型
+│   ├── session.rs              # Session 数据模型
+│   └── browser_settings.rs     # BrowserSettings 数据模型
+└── commands/
+    └── cdp_commands.rs         # 新增 Tauri 命令(open_cdp_session 等)
+```
+
+---
+
+### 7.3 数据库迁移
+
+```sql
+-- src-tauri/migrations/YYYYMMDD_add_profiles.sql
+CREATE TABLE IF NOT EXISTS profiles (
+    id TEXT PRIMARY KEY,
+    name TEXT NOT NULL,
+    domain TEXT NOT NULL,
+    cookies_encrypted BLOB NOT NULL,
+    local_storage TEXT,
+    session_storage TEXT,
+    created_at INTEGER NOT NULL,
+    updated_at INTEGER NOT NULL,
+    last_used_at INTEGER
+);
+
+CREATE INDEX IF NOT EXISTS idx_profiles_domain ON profiles(domain);
+CREATE INDEX IF NOT EXISTS idx_profiles_updated_at ON profiles(updated_at);
+```
+
+---
+
+### 7.4 前端集成
+
+**新增页面**:
+```
+src/pages/
+├── LiveView.tsx              # 实时画面 + 远程控制
+├── Profiles.tsx              # Profile 管理
+└── BrowserDebug.tsx          # 调试面板
+```
+
+**新增组件**:
+```
+src/components/
+├── LiveViewCanvas.tsx        # Canvas 渲染画面流
+├── ConsoleOutput.tsx         # Console 输出视图
+├── NetworkTable.tsx          # Network 请求表格
+├── ProfileCard.tsx           # Profile 卡片
+└── CreateProfileModal.tsx    # 创建 Profile 弹窗
+```
+
+**新增 Hooks**:
+```
+src/hooks/
+├── useCdpSession.ts          # CDP 会话管理
+├── useBrowserEvents.ts       # 浏览器事件订阅
+└── useProfiles.ts            # Profile CRUD
+```
+
+---
+
+## 八、总结
+
+### 核心价值
+NextBrowser 的核心价值在于:
+1. **实时可视化** - Live View 让用户看到自动化过程
+2. **会话持久化** - Profiles 避免重复登录
+3. **远程调试** - CDP Debugger 提供专业调试能力
+
+### 实施策略
+Proxycast 已经具备了 CDP 基础设施,采用**渐进式增强**策略:
+1. **Phase 1 (2-3 周)**: 核心 CDP 会话 - 建立稳定的 WebSocket 连接和统一事件模型
+2. **Phase 2 (1-2 周)**: 画面流通道 - 实现 screencast + screenshot fallback
+3. **Phase 3 (1-2 周)**: Profiles 持久化 - 实现 Cookies 加密存储
+4. **Phase 4 (1 周)**: 调试面板 - 提供最小调试界面
+5. **Phase 5 (可选)**: API 服务器扩展 - NextBrowser 兼容 API
+
+### 预期成果
+- ✅ **6-8 周**完成核心功能实现
+- ✅ **跨平台兼容**(macOS + Windows)
+- ✅ **保持现有架构**,不引入第四套浏览器控制通道
+- ✅ **统一抽象层**,前端只消费统一事件,不直接理解 CDP
+- ✅ **生产可用**,满足实时流控、远程调试、会话持久化需求
+
+### 关键决策
+- ✅ 采用 Codex 的架构思路(CdpSessionManager + 统一事件模型)
+- ✅ 采用 NextBrowser 的功能清单(Live View + Profiles + Debugger)
+- ✅ 优先 Tauri event,吞吐不足时切 WebSocket
+- ✅ Screencast 优先,Screenshot fallback
+- ✅ 单 page target 先行,多 tab 后续
+- ✅ 高层 action API,原始 CDP 仅调试用
diff --git a/docs/research/nextbrowser-features.md b/docs/research/nextbrowser-features.md
new file mode 100644
index 000000000..461d1a497
--- /dev/null
+++ b/docs/research/nextbrowser-features.md
@@ -0,0 +1,215 @@
+- generic [active] [ref=e1]:
+  - generic [ref=e2]:
+    - link "Skip to main content" [ref=e3] [cursor=pointer]:
+      - /url: "#content-area"
+    - generic [ref=e6]:
+      - generic [ref=e7]:
+        - generic [ref=e8]:
+          - generic [ref=e9]:
+            - link "Nextbrowser home page light logo" [ref=e10] [cursor=pointer]:
+              - /url: /
+              - generic [ref=e11]: Nextbrowser home page
+              - img "light logo" [ref=e12]
+            - button "Toggle dark mode" [ref=e13] [cursor=pointer]:
+              - generic [ref=e14]:
+                - img [ref=e15]
+                - img [ref=e22]
+          - button "Open search" [ref=e28] [cursor=pointer]:
+            - generic [ref=e29]:
+              - img [ref=e30]
+              - generic [ref=e33]: Search...
+            - generic [ref=e34]: ⌘K
+          - generic [ref=e35]:
+            - list [ref=e36]:
+              - listitem [ref=e37]:
+                - link "Documentation" [ref=e38] [cursor=pointer]:
+                  - /url: /NB-Intro
+                  - img [ref=e39]
+                  - generic [ref=e40]: Documentation
+              - listitem [ref=e41]:
+                - link "API Documentation" [ref=e42] [cursor=pointer]:
+                  - /url: /getting-started
+                  - img [ref=e43]
+                  - generic [ref=e44]: API Documentation
+            - generic [ref=e45]:
+              - generic [ref=e46]:
+                - img [ref=e47]
+                - heading "Introduction" [level=5] [ref=e48]
+              - list [ref=e49]:
+                - listitem [ref=e50]:
+                  - link "Welcome to Nextbrowser" [ref=e51] [cursor=pointer]:
+                    - /url: /NB-Intro
+                    - generic [ref=e53]: Welcome to Nextbrowser
+                - listitem [ref=e54]:
+                  - link "Getting Started" [ref=e55] [cursor=pointer]:
+                    - /url: /Quick-Start
+                    - generic [ref=e57]: Getting Started
+                - listitem [ref=e58]:
+                  - link "FAQ" [ref=e59] [cursor=pointer]:
+                    - /url: /FAQ
+                    - generic [ref=e61]: FAQ
+            - generic [ref=e62]:
+              - generic [ref=e63]:
+                - img [ref=e64]
+                - heading "Features" [level=5] [ref=e65]
+              - list [ref=e66]:
+                - listitem [ref=e67]:
+                  - link "Overview" [ref=e68] [cursor=pointer]:
+                    - /url: /NB-Features1
+                    - generic [ref=e70]: Overview
+                - listitem [ref=e71]:
+                  - link "Location Customization" [ref=e72] [cursor=pointer]:
+                    - /url: /HumanFingerprint
+                    - generic [ref=e74]: Location Customization
+                - listitem [ref=e75]:
+                  - link "Scheduled Task" [ref=e76] [cursor=pointer]:
+                    - /url: /Scheduler
+                    - generic [ref=e78]: Scheduled Task
+                - listitem [ref=e79]:
+                  - link "Profiles (Saved Logins)" [ref=e80] [cursor=pointer]:
+                    - /url: /Profiles
+                    - generic [ref=e82]: Profiles (Saved Logins)
+                - listitem [ref=e83]:
+                  - link "Credentials" [ref=e84] [cursor=pointer]:
+                    - /url: /Credentials
+                    - generic [ref=e86]: Credentials
+                - listitem [ref=e87]:
+                  - link "AutoCAPTCHA solver" [ref=e88] [cursor=pointer]:
+                    - /url: /Autocaptcha
+                    - generic [ref=e90]: AutoCAPTCHA solver
+                - listitem [ref=e91]:
+                  - link "Live View" [ref=e92] [cursor=pointer]:
+                    - /url: /LiveView
+                    - generic [ref=e94]: Live View
+                - listitem [ref=e95]:
+                  - link "Connections" [ref=e96] [cursor=pointer]:
+                    - /url: /Connectors
+                    - generic [ref=e98]: Connections
+                - listitem [ref=e99]:
+                  - link "Input & Output" [ref=e100] [cursor=pointer]:
+                    - /url: /InputOutput
+                    - generic [ref=e102]: Input & Output
+            - generic [ref=e103]:
+              - generic [ref=e104]:
+                - img [ref=e105]
+                - heading "Use Cases" [level=5] [ref=e106]
+              - list [ref=e107]:
+                - listitem [ref=e108]:
+                  - link "SEO Linkbuilding" [ref=e109] [cursor=pointer]:
+                    - /url: /SEOAutomation
+                    - generic [ref=e111]: SEO Linkbuilding
+                - listitem [ref=e112]:
+                  - link "Accounts Warm-Up" [ref=e113] [cursor=pointer]:
+                    - /url: /Account-warm-up
+                    - generic [ref=e115]: Accounts Warm-Up
+                - listitem [ref=e116]:
+                  - link "Social Media & Forums Monitoring" [ref=e117] [cursor=pointer]:
+                    - /url: /Brand-monitoring
+                    - generic [ref=e119]: Social Media & Forums Monitoring
+                - listitem [ref=e120]:
+                  - link "Influencer Search & Outreach" [ref=e121] [cursor=pointer]:
+                    - /url: /Influencer-search-outreach
+                    - generic [ref=e123]: Influencer Search & Outreach
+                - listitem [ref=e124]:
+                  - link "LLM Search Optimization" [ref=e125] [cursor=pointer]:
+                    - /url: /LLM-SEO
+                    - generic [ref=e127]: LLM Search Optimization
+        - list [ref=e128]:
+          - listitem
+      - generic [ref=e130]:
+        - banner [ref=e131]:
+          - generic [ref=e132]:
+            - generic [ref=e133]: Features
+            - heading "Overview" [level=1] [ref=e135]
+          - paragraph [ref=e137]: Nextbrowser hides a full stack of browser‑automation, cloud browsers, location customization, storage, scheduling, monitoring—behind a handful of easy‑to‑learn controls.
+        - generic [ref=e138]:
+          - heading "Navigate to header Nextbrowser Features" [level=3] [ref=e139]:
+            - link "Navigate to header" [ref=e140] [cursor=pointer]:
+              - /url: "#nextbrowser-features"
+              - img [ref=e142]
+            - generic [ref=e144] [cursor=pointer]: Nextbrowser Features
+          - generic [ref=e145]:
+            - link "Location Customization Change your location and mimic human behavior to pass geo-restrictions and bots" [ref=e146] [cursor=pointer]:
+              - /url: /HumanFingerprint
+              - generic [ref=e147]:
+                - img [ref=e149]
+                - generic [ref=e150]:
+                  - heading "Location Customization" [level=2] [ref=e151]
+                  - generic [ref=e153]: Change your location and mimic human behavior to pass geo-restrictions and bots
+            - link "Scheduled Task Schedule tasks to run automatically at set times." [ref=e154] [cursor=pointer]:
+              - /url: /Scheduler
+              - generic [ref=e155]:
+                - img [ref=e157]
+                - generic [ref=e158]:
+                  - heading "Scheduled Task" [level=2] [ref=e159]
+                  - generic [ref=e161]: Schedule tasks to run automatically at set times.
+          - generic [ref=e162]:
+            - link "Live View Watch your automations execute in real time." [ref=e163] [cursor=pointer]:
+              - /url: /LiveView
+              - generic [ref=e164]:
+                - img [ref=e166]
+                - generic [ref=e167]:
+                  - heading "Live View" [level=2] [ref=e168]
+                  - generic [ref=e170]: Watch your automations execute in real time.
+            - link "Input & Output Pass data into tasks and retrieve results." [ref=e171] [cursor=pointer]:
+              - /url: /InputOutput
+              - generic [ref=e172]:
+                - img [ref=e174]
+                - generic [ref=e175]:
+                  - heading "Input & Output" [level=2] [ref=e176]
+                  - generic [ref=e178]: Pass data into tasks and retrieve results.
+            - link "Connections Link services to automate tasks in your existing applications." [ref=e179] [cursor=pointer]:
+              - /url: /Connectors
+              - generic [ref=e180]:
+                - img [ref=e182]
+                - generic [ref=e183]:
+                  - heading "Connections" [level=2] [ref=e184]
+                  - generic [ref=e186]: Link services to automate tasks in your existing applications.
+            - link "Fast/Smart Modes Select appropriate mode based on task complexity" [ref=e187] [cursor=pointer]:
+              - /url: /Modes
+              - generic [ref=e188]:
+                - img [ref=e190]
+                - generic [ref=e191]:
+                  - heading "Fast/Smart Modes" [level=2] [ref=e192]
+                  - generic [ref=e194]: Select appropriate mode based on task complexity
+          - link "Profiles Stay signed in as the same person to browse, collect, and engage on social platforms smoothly." [ref=e195] [cursor=pointer]:
+            - /url: /Profiles
+            - generic [ref=e196]:
+              - img [ref=e198]
+              - generic [ref=e199]:
+                - heading "Profiles" [level=2] [ref=e200]
+                - generic [ref=e202]: Stay signed in as the same person to browse, collect, and engage on social platforms smoothly.
+        - generic [ref=e203]:
+          - link "Previous" [ref=e204] [cursor=pointer]:
+            - /url: /FAQ
+            - img [ref=e205]
+            - generic [ref=e207]: Previous
+          - link "Location Customization Configure proxies, geolocation, and device profiles to appear human and avoid detection. Next" [ref=e208] [cursor=pointer]:
+            - /url: /HumanFingerprint
+            - generic [ref=e209]:
+              - generic [ref=e210]:
+                - generic [ref=e211]: Location Customization
+                - generic [ref=e212]: Configure proxies, geolocation, and device profiles to appear human and avoid detection.
+              - generic [ref=e214]:
+                - generic [ref=e215]: Next
+                - img [ref=e216]
+        - contentinfo [ref=e218]:
+          - generic [ref=e219]:
+            - link "x" [ref=e220] [cursor=pointer]:
+              - /url: https://twitter.com/example
+              - generic [ref=e221]: x
+              - img [ref=e222]
+            - link "github" [ref=e223] [cursor=pointer]:
+              - /url: https://github.com/example
+              - generic [ref=e224]: github
+              - img [ref=e225]
+            - link "linkedin" [ref=e226] [cursor=pointer]:
+              - /url: https://www.linkedin.com/company/example
+              - generic [ref=e227]: linkedin
+              - img [ref=e228]
+          - link "Powered by This documentation is built and hosted on Mintlify, a developer documentation platform" [ref=e231] [cursor=pointer]:
+            - /url: https://www.mintlify.com?utm_campaign=poweredBy&utm_medium=referral&utm_source=nextbrowserstage
+            - generic [ref=e232]: Powered by
+            - img [ref=e233]
+            - generic [ref=e242]: This documentation is built and hosted on Mintlify, a developer documentation platform
+  - alert [ref=e243]
\ No newline at end of file
diff --git a/docs/research/nextbrowser-liveview.md b/docs/research/nextbrowser-liveview.md
new file mode 100644
index 000000000..a7b95c001
--- /dev/null
+++ b/docs/research/nextbrowser-liveview.md
@@ -0,0 +1,176 @@
+- generic [active] [ref=e1]:
+  - generic [ref=e2]:
+    - link "Skip to main content" [ref=e3] [cursor=pointer]:
+      - /url: "#content-area"
+    - generic [ref=e6]:
+      - generic [ref=e7]:
+        - generic [ref=e8]:
+          - generic [ref=e9]:
+            - link "Nextbrowser home page light logo" [ref=e10] [cursor=pointer]:
+              - /url: /
+              - generic [ref=e11]: Nextbrowser home page
+              - img "light logo" [ref=e12]
+            - button "Toggle dark mode" [ref=e13] [cursor=pointer]:
+              - generic [ref=e14]:
+                - img [ref=e15]
+                - img [ref=e22]
+          - button "Open search" [ref=e28] [cursor=pointer]:
+            - generic [ref=e29]:
+              - img [ref=e30]
+              - generic [ref=e33]: Search...
+            - generic [ref=e34]: ⌘K
+          - generic [ref=e35]:
+            - list [ref=e36]:
+              - listitem [ref=e37]:
+                - link "Documentation" [ref=e38] [cursor=pointer]:
+                  - /url: /NB-Intro
+                  - img [ref=e39]
+                  - generic [ref=e40]: Documentation
+              - listitem [ref=e41]:
+                - link "API Documentation" [ref=e42] [cursor=pointer]:
+                  - /url: /getting-started
+                  - img [ref=e43]
+                  - generic [ref=e44]: API Documentation
+            - generic [ref=e45]:
+              - generic [ref=e46]:
+                - img [ref=e47]
+                - heading "Introduction" [level=5] [ref=e48]
+              - list [ref=e49]:
+                - listitem [ref=e50]:
+                  - link "Welcome to Nextbrowser" [ref=e51] [cursor=pointer]:
+                    - /url: /NB-Intro
+                    - generic [ref=e53]: Welcome to Nextbrowser
+                - listitem [ref=e54]:
+                  - link "Getting Started" [ref=e55] [cursor=pointer]:
+                    - /url: /Quick-Start
+                    - generic [ref=e57]: Getting Started
+                - listitem [ref=e58]:
+                  - link "FAQ" [ref=e59] [cursor=pointer]:
+                    - /url: /FAQ
+                    - generic [ref=e61]: FAQ
+            - generic [ref=e62]:
+              - generic [ref=e63]:
+                - img [ref=e64]
+                - heading "Features" [level=5] [ref=e65]
+              - list [ref=e66]:
+                - listitem [ref=e67]:
+                  - link "Overview" [ref=e68] [cursor=pointer]:
+                    - /url: /NB-Features1
+                    - generic [ref=e70]: Overview
+                - listitem [ref=e71]:
+                  - link "Location Customization" [ref=e72] [cursor=pointer]:
+                    - /url: /HumanFingerprint
+                    - generic [ref=e74]: Location Customization
+                - listitem [ref=e75]:
+                  - link "Scheduled Task" [ref=e76] [cursor=pointer]:
+                    - /url: /Scheduler
+                    - generic [ref=e78]: Scheduled Task
+                - listitem [ref=e79]:
+                  - link "Profiles (Saved Logins)" [ref=e80] [cursor=pointer]:
+                    - /url: /Profiles
+                    - generic [ref=e82]: Profiles (Saved Logins)
+                - listitem [ref=e83]:
+                  - link "Credentials" [ref=e84] [cursor=pointer]:
+                    - /url: /Credentials
+                    - generic [ref=e86]: Credentials
+                - listitem [ref=e87]:
+                  - link "AutoCAPTCHA solver" [ref=e88] [cursor=pointer]:
+                    - /url: /Autocaptcha
+                    - generic [ref=e90]: AutoCAPTCHA solver
+                - listitem [ref=e91]:
+                  - link "Live View" [ref=e92] [cursor=pointer]:
+                    - /url: /LiveView
+                    - generic [ref=e94]: Live View
+                - listitem [ref=e95]:
+                  - link "Connections" [ref=e96] [cursor=pointer]:
+                    - /url: /Connectors
+                    - generic [ref=e98]: Connections
+                - listitem [ref=e99]:
+                  - link "Input & Output" [ref=e100] [cursor=pointer]:
+                    - /url: /InputOutput
+                    - generic [ref=e102]: Input & Output
+            - generic [ref=e103]:
+              - generic [ref=e104]:
+                - img [ref=e105]
+                - heading "Use Cases" [level=5] [ref=e106]
+              - list [ref=e107]:
+                - listitem [ref=e108]:
+                  - link "SEO Linkbuilding" [ref=e109] [cursor=pointer]:
+                    - /url: /SEOAutomation
+                    - generic [ref=e111]: SEO Linkbuilding
+                - listitem [ref=e112]:
+                  - link "Accounts Warm-Up" [ref=e113] [cursor=pointer]:
+                    - /url: /Account-warm-up
+                    - generic [ref=e115]: Accounts Warm-Up
+                - listitem [ref=e116]:
+                  - link "Social Media & Forums Monitoring" [ref=e117] [cursor=pointer]:
+                    - /url: /Brand-monitoring
+                    - generic [ref=e119]: Social Media & Forums Monitoring
+                - listitem [ref=e120]:
+                  - link "Influencer Search & Outreach" [ref=e121] [cursor=pointer]:
+                    - /url: /Influencer-search-outreach
+                    - generic [ref=e123]: Influencer Search & Outreach
+                - listitem [ref=e124]:
+                  - link "LLM Search Optimization" [ref=e125] [cursor=pointer]:
+                    - /url: /LLM-SEO
+                    - generic [ref=e127]: LLM Search Optimization
+        - list [ref=e128]:
+          - listitem
+      - generic [ref=e245]:
+        - banner [ref=e246]:
+          - generic [ref=e247]:
+            - generic [ref=e248]: Features
+            - heading "Live View" [level=1] [ref=e250]
+          - paragraph [ref=e252]: Stream, control, and debug the remote browser in real time during task execution.
+        - generic [ref=e253]:
+          - generic [ref=e254]: Nextbrowser’s Live Session View streams the remote browser in real time, allowing you to watch and control the task as it executes. It is especially useful when interacting with sites that require captchas, multi‑factor authentication or unpredictable UI flows.
+          - heading "Navigate to header Why Use Live Session View" [level=2] [ref=e256]:
+            - link "Navigate to header" [ref=e257] [cursor=pointer]:
+              - /url: "#why-use-live-session-view"
+              - img [ref=e259]
+            - generic [ref=e261] [cursor=pointer]: Why Use Live Session View
+          - list [ref=e262]:
+            - listitem [ref=e263]: "Transparency: Observe every click, scroll and data entry to ensure the agent follows your instructions."
+            - listitem [ref=e264]: "Manual intervention: Solve captchas or handle unexpected issues by interacting directly with the browser in Live View."
+          - heading "Navigate to header Using Live View" [level=2] [ref=e265]:
+            - link "Navigate to header" [ref=e266] [cursor=pointer]:
+              - /url: "#using-live-view"
+              - img [ref=e268]
+            - generic [ref=e270] [cursor=pointer]: Using Live View
+          - list [ref=e271]:
+            - listitem [ref=e272]: Launch Live View. After starting a task, “Live Session View” automatically appears. A streaming window opens showing the remote browser.
+            - listitem [ref=e273]: Solve challenges. For captchas or login forms, use your stored credentials. If the site blocks your IP, modify the proxy or geolocation settings, then rerun the task.
+        - generic [ref=e274]:
+          - link "Previous" [ref=e275] [cursor=pointer]:
+            - /url: /Autocaptcha
+            - img [ref=e276]
+            - generic [ref=e278]: Previous
+          - link "Connections Integrate services like Google Sheets and Google Drive to allow browser agents to connect with and automate tasks in your existing applications. Next" [ref=e279] [cursor=pointer]:
+            - /url: /Connectors
+            - generic [ref=e280]:
+              - generic [ref=e281]:
+                - generic [ref=e282]: Connections
+                - generic [ref=e283]: Integrate services like Google Sheets and Google Drive to allow browser agents to connect with and automate tasks in your existing applications.
+              - generic [ref=e285]:
+                - generic [ref=e286]: Next
+                - img [ref=e287]
+        - contentinfo [ref=e289]:
+          - generic [ref=e290]:
+            - link "x" [ref=e291] [cursor=pointer]:
+              - /url: https://twitter.com/example
+              - generic [ref=e292]: x
+              - img [ref=e293]
+            - link "github" [ref=e294] [cursor=pointer]:
+              - /url: https://github.com/example
+              - generic [ref=e295]: github
+              - img [ref=e296]
+            - link "linkedin" [ref=e297] [cursor=pointer]:
+              - /url: https://www.linkedin.com/company/example
+              - generic [ref=e298]: linkedin
+              - img [ref=e299]
+          - link "Powered by This documentation is built and hosted on Mintlify, a developer documentation platform" [ref=e302] [cursor=pointer]:
+            - /url: https://www.mintlify.com?utm_campaign=poweredBy&utm_medium=referral&utm_source=nextbrowserstage
+            - generic [ref=e303]: Powered by
+            - img [ref=e304]
+            - generic [ref=e313]: This documentation is built and hosted on Mintlify, a developer documentation platform
+  - alert [ref=e243]: Live View - Nextbrowser
\ No newline at end of file
diff --git a/package.json b/package.json
index 4d1ea1dba..064ce98fa 100644
--- a/package.json
+++ b/package.json
@@ -1,7 +1,7 @@
 {
   "name": "proxycast",
   "private": true,
-  "version": "0.86.0",
+  "version": "0.87.0",
   "type": "module",
   "engines": {
     "node": ">=22.0.0"
diff --git a/scripts/check-app-version-consistency.mjs b/scripts/check-app-version-consistency.mjs
index e867b655a..66911abc3 100644
--- a/scripts/check-app-version-consistency.mjs
+++ b/scripts/check-app-version-consistency.mjs
@@ -13,10 +13,16 @@ function readJson(filePath) {
 const repoRoot = path.resolve(process.cwd());
 const cargoTomlPath = path.join(repoRoot, "src-tauri", "Cargo.toml");
 const tauriConfigPath = path.join(repoRoot, "src-tauri", "tauri.conf.json");
+const tauriHeadlessConfigPath = path.join(
+  repoRoot,
+  "src-tauri",
+  "tauri.conf.headless.json",
+);
 const packageJsonPath = path.join(repoRoot, "package.json");
 
 const cargo = readCargoVersions(cargoTomlPath);
 const tauriConfig = readJson(tauriConfigPath);
+const tauriHeadlessConfig = readJson(tauriHeadlessConfigPath);
 const packageJson = readJson(packageJsonPath);
 
 const sourceVersion = cargo.workspaceVersion;
@@ -44,6 +50,12 @@ if ((tauriConfig.version ?? null) !== sourceVersion) {
   );
 }
 
+if ((tauriHeadlessConfig.version ?? null) !== sourceVersion) {
+  issues.push(
+    `src-tauri/tauri.conf.headless.json version (${tauriHeadlessConfig.version ?? "missing"}) 与 workspace.version (${sourceVersion ?? "missing"}) 不一致`,
+  );
+}
+
 if (issues.length > 0) {
   console.error("[proxycast] 应用版本一致性检查失败:");
   for (const issue of issues) {
@@ -53,4 +65,3 @@ if (issues.length > 0) {
 }
 
 console.log(`[proxycast] 版本一致性检查通过: ${sourceVersion}`);
-
diff --git a/src-tauri/Cargo.lock b/src-tauri/Cargo.lock
index fba4010f5..fba0905cf 100644
--- a/src-tauri/Cargo.lock
+++ b/src-tauri/Cargo.lock
@@ -6982,7 +6982,7 @@ dependencies = [
 
 [[package]]
 name = "proxycast"
-version = "0.86.0"
+version = "0.87.0"
 dependencies = [
  "anyhow",
  "arboard",
@@ -7019,6 +7019,7 @@ dependencies = [
  "portable-pty",
  "proptest",
  "proxycast-agent",
+ "proxycast-browser-runtime",
  "proxycast-config",
  "proxycast-core",
  "proxycast-credential",
@@ -7084,7 +7085,7 @@ dependencies = [
 
 [[package]]
 name = "proxycast-agent"
-version = "0.86.0"
+version = "0.87.0"
 dependencies = [
  "aster-core",
  "async-trait",
@@ -7107,9 +7108,26 @@ dependencies = [
  "uuid",
 ]
 
+[[package]]
+name = "proxycast-browser-runtime"
+version = "0.87.0"
+dependencies = [
+ "chrono",
+ "futures",
+ "reqwest 0.12.28",
+ "serde",
+ "serde_json",
+ "tempfile",
+ "tokio",
+ "tokio-tungstenite 0.24.0",
+ "tracing",
+ "urlencoding",
+ "uuid",
+]
+
 [[package]]
 name = "proxycast-config"
-version = "0.86.0"
+version = "0.87.0"
 dependencies = [
  "async-trait",
  "parking_lot",
@@ -7125,7 +7143,7 @@ dependencies = [
 
 [[package]]
 name = "proxycast-core"
-version = "0.86.0"
+version = "0.87.0"
 dependencies = [
  "aster-models",
  "async-trait",
@@ -7165,7 +7183,7 @@ dependencies = [
 
 [[package]]
 name = "proxycast-credential"
-version = "0.86.0"
+version = "0.87.0"
 dependencies = [
  "axum 0.7.9",
  "base64 0.22.1",
@@ -7200,7 +7218,7 @@ dependencies = [
 
 [[package]]
 name = "proxycast-gateway"
-version = "0.86.0"
+version = "0.87.0"
 dependencies = [
  "axum 0.7.9",
  "chrono",
@@ -7221,7 +7239,7 @@ dependencies = [
 
 [[package]]
 name = "proxycast-infra"
-version = "0.86.0"
+version = "0.87.0"
 dependencies = [
  "chrono",
  "dashmap 5.5.3",
@@ -7241,7 +7259,7 @@ dependencies = [
 
 [[package]]
 name = "proxycast-mcp"
-version = "0.86.0"
+version = "0.87.0"
 dependencies = [
  "async-trait",
  "dirs 5.0.1",
@@ -7273,7 +7291,7 @@ dependencies = [
 
 [[package]]
 name = "proxycast-processor"
-version = "0.86.0"
+version = "0.87.0"
 dependencies = [
  "async-trait",
  "parking_lot",
@@ -7292,7 +7310,7 @@ dependencies = [
 
 [[package]]
 name = "proxycast-providers"
-version = "0.86.0"
+version = "0.87.0"
 dependencies = [
  "anyhow",
  "async-stream",
@@ -7346,7 +7364,7 @@ dependencies = [
 
 [[package]]
 name = "proxycast-server"
-version = "0.86.0"
+version = "0.87.0"
 dependencies = [
  "aster-core",
  "async-stream",
@@ -7391,7 +7409,7 @@ dependencies = [
 
 [[package]]
 name = "proxycast-server-utils"
-version = "0.86.0"
+version = "0.87.0"
 dependencies = [
  "axum 0.7.9",
  "futures",
@@ -7406,7 +7424,7 @@ dependencies = [
 
 [[package]]
 name = "proxycast-services"
-version = "0.86.0"
+version = "0.87.0"
 dependencies = [
  "anyhow",
  "aster-core",
@@ -7448,7 +7466,7 @@ dependencies = [
 
 [[package]]
 name = "proxycast-skills"
-version = "0.86.0"
+version = "0.87.0"
 dependencies = [
  "async-trait",
  "dirs 5.0.1",
@@ -7466,7 +7484,7 @@ dependencies = [
 
 [[package]]
 name = "proxycast-terminal"
-version = "0.86.0"
+version = "0.87.0"
 dependencies = [
  "async-trait",
  "base64 0.22.1",
@@ -7493,7 +7511,7 @@ dependencies = [
 
 [[package]]
 name = "proxycast-websocket"
-version = "0.86.0"
+version = "0.87.0"
 dependencies = [
  "axum 0.7.9",
  "chrono",
diff --git a/src-tauri/Cargo.toml b/src-tauri/Cargo.toml
index 2fae631ac..8f22e6c33 100644
--- a/src-tauri/Cargo.toml
+++ b/src-tauri/Cargo.toml
@@ -3,7 +3,7 @@ members = ["crates/*"]
 resolver = "2"
 
 [workspace.package]
-version = "0.86.0"
+version = "0.87.0"
 edition = "2021"
 authors = ["coso"]
 repository = "https://github.com/aiclientproxy/proxycast"
@@ -29,6 +29,7 @@ proxycast-scheduler = { path = "crates/scheduler" }
 proxycast-memory = { path = "crates/memory" }
 proxycast-embedding = { path = "crates/embedding" }
 proxycast-gateway = { path = "crates/gateway" }
+proxycast-browser-runtime = { path = "crates/browser-runtime" }
 voice-core = { path = "crates/voice-core" }
 
 # 序列化
@@ -190,7 +191,7 @@ version = "2.4"
 
 [package]
 name = "proxycast"
-version = "0.86.0"
+version = "0.87.0"
 description = "AI API Proxy Desktop App"
 authors = ["you"]
 edition = "2021"
@@ -224,6 +225,7 @@ proxycast-agent.workspace = true
 proxycast-scheduler.workspace = true
 proxycast-memory.workspace = true
 proxycast-embedding.workspace = true
+proxycast-browser-runtime.workspace = true
 voice-core.workspace = true
 
 # Tauri
diff --git a/src-tauri/crates/agent/src/aster_state.rs b/src-tauri/crates/agent/src/aster_state.rs
index 6f7df496c..4e7ab6633 100644
--- a/src-tauri/crates/agent/src/aster_state.rs
+++ b/src-tauri/crates/agent/src/aster_state.rs
@@ -51,6 +51,8 @@ async fn configure_proxycast_native_file_tools(agent: &Agent) {
     registry.register(Box::new(
         EditTool::new(shared_history).with_require_read_before_edit(false),
     ));
+    // 覆盖默认 SkillTool，避免通用对话默认暴露全部本地 Skills。
+    registry.register(Box::new(crate::tools::ProxycastSkillTool::new()));
 }
 
 /// 会话级 turn 排队任务
diff --git a/src-tauri/crates/agent/src/tools/mod.rs b/src-tauri/crates/agent/src/tools/mod.rs
index 4a811132c..9b3e81394 100644
--- a/src-tauri/crates/agent/src/tools/mod.rs
+++ b/src-tauri/crates/agent/src/tools/mod.rs
@@ -4,9 +4,13 @@
 
 pub mod browser_tool;
 pub mod heartbeat_tool;
+pub mod skill_tool_gate;
 
 pub use browser_tool::{BrowserAction, BrowserTool, BrowserToolError, BrowserToolResult};
 pub use heartbeat_tool::{
     HeartbeatCycleResult, HeartbeatExecutionRecord, HeartbeatService, HeartbeatStatus,
     HeartbeatTaskPreview, HeartbeatTool, HeartbeatToolError,
 };
+pub use skill_tool_gate::{
+    clear_skill_tool_session_access, set_skill_tool_session_access, ProxycastSkillTool,
+};
diff --git a/src-tauri/crates/agent/src/tools/skill_tool_gate.rs b/src-tauri/crates/agent/src/tools/skill_tool_gate.rs
new file mode 100644
index 000000000..191dcf1e5
--- /dev/null
+++ b/src-tauri/crates/agent/src/tools/skill_tool_gate.rs
@@ -0,0 +1,180 @@
+//! Skill 工具门禁包装器
+//!
+//! 目标：
+//! - 避免通用对话默认向模型暴露全部本地 Skills
+//! - 保留显式工作流对 Skill 工具的按会话放行能力
+
+use aster::tools::{PermissionCheckResult, SkillTool, Tool, ToolContext, ToolError, ToolResult};
+use async_trait::async_trait;
+use serde_json::Value;
+use std::collections::HashMap;
+use std::sync::{Mutex, OnceLock};
+
+fn session_access_store() -> &'static Mutex<HashMap<String, bool>> {
+    static STORE: OnceLock<Mutex<HashMap<String, bool>>> = OnceLock::new();
+    STORE.get_or_init(|| Mutex::new(HashMap::new()))
+}
+
+pub fn set_skill_tool_session_access(session_id: &str, enabled: bool) {
+    let session_id = session_id.trim();
+    if session_id.is_empty() {
+        return;
+    }
+
+    let store = session_access_store();
+    let mut guard = match store.lock() {
+        Ok(guard) => guard,
+        Err(error) => error.into_inner(),
+    };
+    guard.insert(session_id.to_string(), enabled);
+}
+
+pub fn clear_skill_tool_session_access(session_id: &str) {
+    let session_id = session_id.trim();
+    if session_id.is_empty() {
+        return;
+    }
+
+    let store = session_access_store();
+    let mut guard = match store.lock() {
+        Ok(guard) => guard,
+        Err(error) => error.into_inner(),
+    };
+    guard.remove(session_id);
+}
+
+fn is_skill_tool_enabled_for_session(session_id: &str) -> bool {
+    let session_id = session_id.trim();
+    if session_id.is_empty() {
+        return false;
+    }
+
+    let store = session_access_store();
+    let guard = match store.lock() {
+        Ok(guard) => guard,
+        Err(error) => error.into_inner(),
+    };
+    guard.get(session_id).copied().unwrap_or(false)
+}
+
+fn skill_tool_disabled_message() -> &'static str {
+    "当前会话未启用技能自动调用。请改用显式 /skill-name 指令，或切换到需要技能编排的工作流。"
+}
+
+pub struct ProxycastSkillTool {
+    inner: SkillTool,
+}
+
+impl ProxycastSkillTool {
+    pub fn new() -> Self {
+        Self {
+            inner: SkillTool::new(),
+        }
+    }
+}
+
+impl Default for ProxycastSkillTool {
+    fn default() -> Self {
+        Self::new()
+    }
+}
+
+#[async_trait]
+impl Tool for ProxycastSkillTool {
+    fn name(&self) -> &str {
+        self.inner.name()
+    }
+
+    fn description(&self) -> &str {
+        "在显式启用的工作流中执行技能。通用对话默认不会暴露技能自动调用能力。"
+    }
+
+    fn input_schema(&self) -> Value {
+        self.inner.input_schema()
+    }
+
+    async fn execute(&self, params: Value, context: &ToolContext) -> Result<ToolResult, ToolError> {
+        if !is_skill_tool_enabled_for_session(&context.session_id) {
+            return Err(ToolError::execution_failed(skill_tool_disabled_message()));
+        }
+
+        self.inner.execute(params, context).await
+    }
+
+    async fn check_permissions(
+        &self,
+        params: &Value,
+        context: &ToolContext,
+    ) -> PermissionCheckResult {
+        if !is_skill_tool_enabled_for_session(&context.session_id) {
+            return PermissionCheckResult::deny(skill_tool_disabled_message());
+        }
+
+        self.inner.check_permissions(params, context).await
+    }
+}
+
+#[cfg(test)]
+mod tests {
+    use super::*;
+    use aster::tools::PermissionBehavior;
+
+    fn create_context(session_id: &str) -> ToolContext {
+        ToolContext::default().with_session_id(session_id)
+    }
+
+    #[tokio::test]
+    async fn disabled_session_should_deny_skill_tool() {
+        let session_id = "skill-disabled-session";
+        clear_skill_tool_session_access(session_id);
+
+        let tool = ProxycastSkillTool::new();
+        let result = tool
+            .check_permissions(
+                &serde_json::json!({ "skill": "research" }),
+                &create_context(session_id),
+            )
+            .await;
+
+        assert_eq!(result.behavior, PermissionBehavior::Deny);
+        assert_eq!(
+            result.message.as_deref(),
+            Some(skill_tool_disabled_message())
+        );
+    }
+
+    #[tokio::test]
+    async fn enabled_session_should_allow_skill_tool() {
+        let session_id = "skill-enabled-session";
+        set_skill_tool_session_access(session_id, true);
+
+        let tool = ProxycastSkillTool::new();
+        let result = tool
+            .check_permissions(
+                &serde_json::json!({ "skill": "research" }),
+                &create_context(session_id),
+            )
+            .await;
+
+        clear_skill_tool_session_access(session_id);
+
+        assert_eq!(result.behavior, PermissionBehavior::Allow);
+    }
+
+    #[tokio::test]
+    async fn disabled_session_should_fail_execute() {
+        let session_id = "skill-execute-disabled-session";
+        clear_skill_tool_session_access(session_id);
+
+        let tool = ProxycastSkillTool::new();
+        let error = tool
+            .execute(
+                serde_json::json!({ "skill": "research" }),
+                &create_context(session_id),
+            )
+            .await
+            .expect_err("disabled session should reject execute");
+
+        assert!(error.to_string().contains("未启用技能自动调用"));
+    }
+}
diff --git a/src-tauri/crates/browser-runtime/Cargo.toml b/src-tauri/crates/browser-runtime/Cargo.toml
new file mode 100644
index 000000000..0f9b8a41d
--- /dev/null
+++ b/src-tauri/crates/browser-runtime/Cargo.toml
@@ -0,0 +1,21 @@
+[package]
+name = "proxycast-browser-runtime"
+version.workspace = true
+edition.workspace = true
+authors.workspace = true
+repository.workspace = true
+
+[dependencies]
+serde.workspace = true
+serde_json.workspace = true
+tokio.workspace = true
+futures.workspace = true
+reqwest.workspace = true
+chrono.workspace = true
+uuid.workspace = true
+tracing.workspace = true
+urlencoding.workspace = true
+tokio-tungstenite = { version = "0.24", features = ["native-tls"] }
+
+[dev-dependencies]
+tempfile.workspace = true
diff --git a/src-tauri/crates/browser-runtime/src/action.rs b/src-tauri/crates/browser-runtime/src/action.rs
new file mode 100644
index 000000000..462b0c26e
--- /dev/null
+++ b/src-tauri/crates/browser-runtime/src/action.rs
@@ -0,0 +1,249 @@
+use crate::manager::CdpSessionHandle;
+use crate::types::BrowserPageInfo;
+use chrono::Utc;
+use serde_json::{json, Value};
+use std::time::Duration;
+
+const DEFAULT_ACTION_TIMEOUT_MS: u64 = 15_000;
+
+pub async fn execute_action(
+    session: &CdpSessionHandle,
+    action: &str,
+    args: Value,
+) -> Result<Value, String> {
+    match action {
+        "navigate" => navigate(session, &args).await,
+        "click" => click(session, &args).await,
+        "type" | "form_input" => type_text(session, &args).await,
+        "scroll" | "scroll_page" => scroll(session, &args).await,
+        "refresh_page" => evaluate_navigation(session, "window.location.reload()").await,
+        "go_back" => evaluate_navigation(session, "window.history.back()").await,
+        "go_forward" => evaluate_navigation(session, "window.history.forward()").await,
+        "get_page_info" | "read_page" | "get_page_text" => {
+            let page = session.capture_page_info().await?;
+            Ok(json!({
+                "tab": {
+                    "id": session.state().await.target_id,
+                    "title": page.title,
+                    "url": page.url,
+                },
+                "markdown": page.markdown,
+                "page_info": page,
+            }))
+        }
+        "read_console_messages" => {
+            let events =
+                session.collect_console_messages(args.get("since").and_then(Value::as_u64));
+            Ok(json!({ "messages": events }))
+        }
+        "read_network_requests" => {
+            let events = session.collect_network_events(args.get("since").and_then(Value::as_u64));
+            Ok(json!({ "events": events }))
+        }
+        _ => Err(format!("CDP 直连不支持动作: {action}")),
+    }
+}
+
+async fn navigate(session: &CdpSessionHandle, args: &Value) -> Result<Value, String> {
+    let nav_action = get_string_arg(args, &["action"]).unwrap_or_else(|| "goto".to_string());
+    if nav_action != "goto" {
+        return Err(format!(
+            "CDP 直连当前仅支持 navigate.action=goto，收到: {nav_action}"
+        ));
+    }
+    let url = get_string_arg(args, &["url"]).ok_or_else(|| "navigate 需要提供 url".to_string())?;
+    session
+        .send_command(
+            "Page.navigate",
+            json!({ "url": url }),
+            DEFAULT_ACTION_TIMEOUT_MS,
+        )
+        .await?;
+    tokio::time::sleep(Duration::from_millis(1200)).await;
+    let page = session
+        .capture_page_info()
+        .await
+        .unwrap_or(BrowserPageInfo {
+            title: url.clone(),
+            url: url.clone(),
+            markdown: format!("# {}\nURL: {}", url, url),
+            updated_at: Utc::now().to_rfc3339(),
+        });
+    Ok(json!({
+        "url": url,
+        "page_info": page,
+    }))
+}
+
+async fn click(session: &CdpSessionHandle, args: &Value) -> Result<Value, String> {
+    if let (Some(x), Some(y)) = (
+        args.get("x").and_then(Value::as_f64),
+        args.get("y").and_then(Value::as_f64),
+    ) {
+        session
+            .send_command(
+                "Input.dispatchMouseEvent",
+                json!({
+                    "type": "mousePressed",
+                    "x": x,
+                    "y": y,
+                    "button": "left",
+                    "clickCount": 1,
+                }),
+                DEFAULT_ACTION_TIMEOUT_MS,
+            )
+            .await?;
+        session
+            .send_command(
+                "Input.dispatchMouseEvent",
+                json!({
+                    "type": "mouseReleased",
+                    "x": x,
+                    "y": y,
+                    "button": "left",
+                    "clickCount": 1,
+                }),
+                DEFAULT_ACTION_TIMEOUT_MS,
+            )
+            .await?;
+        return Ok(json!({ "clicked": true, "x": x, "y": y }));
+    }
+
+    let selector = get_string_arg(args, &["selector", "target", "ref_id"])
+        .ok_or_else(|| "click 需要 selector 或坐标".to_string())?;
+    session
+        .runtime_evaluate(
+            format!(
+                r#"
+(() => {{
+  const element = document.querySelector({selector});
+  if (!element) {{
+    return {{ ok: false, error: "未找到元素" }};
+  }}
+  element.click();
+  return {{ ok: true }};
+}})()
+"#,
+                selector = serde_json::to_string(&selector)
+                    .map_err(|e| format!("编码 selector 失败: {e}"))?
+            ),
+            true,
+            DEFAULT_ACTION_TIMEOUT_MS,
+        )
+        .await?;
+    Ok(json!({ "clicked": true, "selector": selector }))
+}
+
+async fn type_text(session: &CdpSessionHandle, args: &Value) -> Result<Value, String> {
+    let text = get_string_arg(args, &["text", "value"])
+        .ok_or_else(|| "type 需要 text/value 参数".to_string())?;
+    if let Some(selector) = get_string_arg(args, &["selector", "target", "ref_id"]) {
+        session
+            .runtime_evaluate(
+                format!(
+                    r#"
+(() => {{
+  const element = document.querySelector({selector});
+  if (!element) {{
+    return {{ ok: false, error: "未找到输入元素" }};
+  }}
+  element.focus();
+  if ("value" in element) {{
+    element.value = {text};
+    element.dispatchEvent(new Event("input", {{ bubbles: true }}));
+    element.dispatchEvent(new Event("change", {{ bubbles: true }}));
+  }} else {{
+    element.textContent = {text};
+  }}
+  return {{ ok: true }};
+}})()
+"#,
+                    selector = serde_json::to_string(&selector)
+                        .map_err(|e| format!("编码 selector 失败: {e}"))?,
+                    text =
+                        serde_json::to_string(&text).map_err(|e| format!("编码文本失败: {e}"))?,
+                ),
+                true,
+                DEFAULT_ACTION_TIMEOUT_MS,
+            )
+            .await?;
+        return Ok(json!({ "typed": true, "selector": selector }));
+    }
+
+    session
+        .send_command(
+            "Input.insertText",
+            json!({
+                "text": text,
+            }),
+            DEFAULT_ACTION_TIMEOUT_MS,
+        )
+        .await?;
+    Ok(json!({ "typed": true }))
+}
+
+async fn scroll(session: &CdpSessionHandle, args: &Value) -> Result<Value, String> {
+    let direction = get_string_arg(args, &["direction"]).unwrap_or_else(|| "down".to_string());
+    let amount = args
+        .get("amount")
+        .and_then(Value::as_i64)
+        .unwrap_or(500)
+        .max(1);
+    let signed_amount = if direction.eq_ignore_ascii_case("up") {
+        -amount
+    } else {
+        amount
+    };
+    if let Some(selector) = get_string_arg(args, &["selector", "target", "ref_id"]) {
+        session
+            .runtime_evaluate(
+                format!(
+                    r#"
+(() => {{
+  const element = document.querySelector({selector});
+  if (!element) {{
+    return {{ ok: false, error: "未找到滚动元素" }};
+  }}
+  element.scrollBy({{ top: {amount}, behavior: "instant" }});
+  return {{ ok: true }};
+}})()
+"#,
+                    selector = serde_json::to_string(&selector)
+                        .map_err(|e| format!("编码 selector 失败: {e}"))?,
+                    amount = signed_amount,
+                ),
+                true,
+                DEFAULT_ACTION_TIMEOUT_MS,
+            )
+            .await?;
+        return Ok(json!({ "scrolled": true, "selector": selector, "amount": signed_amount }));
+    }
+
+    session
+        .runtime_evaluate(
+            format!("window.scrollBy({{ top: {signed_amount}, behavior: \"instant\" }});"),
+            false,
+            DEFAULT_ACTION_TIMEOUT_MS,
+        )
+        .await?;
+    Ok(json!({ "scrolled": true, "amount": signed_amount }))
+}
+
+async fn evaluate_navigation(session: &CdpSessionHandle, script: &str) -> Result<Value, String> {
+    session
+        .runtime_evaluate(script.to_string(), false, DEFAULT_ACTION_TIMEOUT_MS)
+        .await?;
+    tokio::time::sleep(Duration::from_millis(800)).await;
+    let page = session.capture_page_info().await?;
+    Ok(json!({ "page_info": page }))
+}
+
+fn get_string_arg(args: &Value, keys: &[&str]) -> Option<String> {
+    keys.iter().find_map(|key| {
+        args.get(*key)
+            .and_then(Value::as_str)
+            .map(str::trim)
+            .filter(|value| !value.is_empty())
+            .map(ToString::to_string)
+    })
+}
diff --git a/src-tauri/crates/browser-runtime/src/client.rs b/src-tauri/crates/browser-runtime/src/client.rs
new file mode 100644
index 000000000..076c5c53a
--- /dev/null
+++ b/src-tauri/crates/browser-runtime/src/client.rs
@@ -0,0 +1,72 @@
+use futures::{stream::SplitSink, SinkExt};
+use serde_json::{json, Value};
+use std::collections::HashMap;
+use std::sync::atomic::{AtomicU64, Ordering};
+use tokio::net::TcpStream;
+use tokio::sync::{oneshot, Mutex};
+use tokio::time::{timeout, Duration};
+use tokio_tungstenite::tungstenite::Message;
+use tokio_tungstenite::{MaybeTlsStream, WebSocketStream};
+
+type CdpWrite = SplitSink<WebSocketStream<MaybeTlsStream<TcpStream>>, Message>;
+
+pub struct CdpCommandClient {
+    next_command_id: AtomicU64,
+    writer: Mutex<CdpWrite>,
+    pending: Mutex<HashMap<u64, oneshot::Sender<Result<Value, String>>>>,
+}
+
+impl CdpCommandClient {
+    pub fn new(writer: CdpWrite) -> Self {
+        Self {
+            next_command_id: AtomicU64::new(1),
+            writer: Mutex::new(writer),
+            pending: Mutex::new(HashMap::new()),
+        }
+    }
+
+    pub async fn send_command(
+        &self,
+        method: &str,
+        params: Value,
+        timeout_ms: u64,
+    ) -> Result<Value, String> {
+        let id = self.next_command_id.fetch_add(1, Ordering::SeqCst);
+        let (tx, rx) = oneshot::channel();
+        self.pending.lock().await.insert(id, tx);
+
+        let payload = json!({
+            "id": id,
+            "method": method,
+            "params": params,
+        });
+
+        let message_text =
+            serde_json::to_string(&payload).map_err(|e| format!("序列化 CDP 命令失败: {e}"))?;
+        if let Err(error) = self
+            .writer
+            .lock()
+            .await
+            .send(Message::Text(message_text))
+            .await
+        {
+            self.pending.lock().await.remove(&id);
+            return Err(format!("发送 CDP 命令失败: {error}"));
+        }
+
+        match timeout(Duration::from_millis(timeout_ms), rx).await {
+            Ok(Ok(result)) => result,
+            Ok(Err(_)) => Err("CDP 响应通道已关闭".to_string()),
+            Err(_) => {
+                self.pending.lock().await.remove(&id);
+                Err(format!("CDP 命令超时: {method}"))
+            }
+        }
+    }
+
+    pub async fn respond(&self, id: u64, payload: Result<Value, String>) {
+        if let Some(sender) = self.pending.lock().await.remove(&id) {
+            let _ = sender.send(payload);
+        }
+    }
+}
diff --git a/src-tauri/crates/browser-runtime/src/lib.rs b/src-tauri/crates/browser-runtime/src/lib.rs
new file mode 100644
index 000000000..1a15d1a9b
--- /dev/null
+++ b/src-tauri/crates/browser-runtime/src/lib.rs
@@ -0,0 +1,11 @@
+pub mod action;
+pub mod client;
+pub mod manager;
+pub mod types;
+
+pub use manager::{BrowserRuntimeManager, EventBufferSnapshot, OpenSessionRequest};
+pub use types::{
+    BrowserControlMode, BrowserEvent, BrowserEventPayload, BrowserPageInfo,
+    BrowserSessionLifecycleState, BrowserStreamMode, BrowserTransportKind, CdpSessionState,
+    CdpTargetInfo, FrameMetadata,
+};
diff --git a/src-tauri/crates/browser-runtime/src/manager.rs b/src-tauri/crates/browser-runtime/src/manager.rs
new file mode 100644
index 000000000..534e29006
--- /dev/null
+++ b/src-tauri/crates/browser-runtime/src/manager.rs
@@ -0,0 +1,1132 @@
+use crate::action;
+use crate::client::CdpCommandClient;
+use crate::types::{
+    BrowserControlMode, BrowserEvent, BrowserEventPayload, BrowserPageInfo,
+    BrowserSessionLifecycleState, BrowserStreamMode, BrowserTransportKind, CdpSessionState,
+    CdpTargetInfo, FrameMetadata,
+};
+use chrono::Utc;
+use futures::{stream::SplitStream, StreamExt};
+use serde_json::{json, Value};
+use std::collections::{HashMap, VecDeque};
+use std::sync::atomic::{AtomicBool, AtomicU64, Ordering};
+use std::sync::Arc;
+use tokio::net::TcpStream;
+use tokio::sync::{broadcast, Mutex, RwLock};
+use tokio::task::JoinHandle;
+use tokio::time::Duration;
+use tokio_tungstenite::{connect_async, MaybeTlsStream, WebSocketStream};
+use tracing::{debug, warn};
+
+const DEFAULT_BUFFER_SIZE: usize = 500;
+const DEFAULT_CDP_TIMEOUT_MS: u64 = 10_000;
+const SCREENSHOT_FALLBACK_INTERVAL_MS: u64 = 500;
+const RESUME_TO_LIVE_DELAY_MS: u64 = 1_200;
+
+type CdpRead = SplitStream<WebSocketStream<MaybeTlsStream<TcpStream>>>;
+
+#[derive(Debug, Clone)]
+pub struct EventBufferSnapshot {
+    pub events: Vec<BrowserEvent>,
+    pub next_cursor: u64,
+}
+
+#[derive(Debug, Clone)]
+pub struct OpenSessionRequest {
+    pub profile_key: String,
+    pub remote_debugging_port: u16,
+    pub target_id: Option<String>,
+}
+
+pub struct BrowserRuntimeManager {
+    sessions: RwLock<HashMap<String, CdpSessionHandle>>,
+}
+
+impl Default for BrowserRuntimeManager {
+    fn default() -> Self {
+        Self::new()
+    }
+}
+
+impl BrowserRuntimeManager {
+    pub fn new() -> Self {
+        Self {
+            sessions: RwLock::new(HashMap::new()),
+        }
+    }
+
+    pub async fn list_targets(
+        &self,
+        remote_debugging_port: u16,
+    ) -> Result<Vec<CdpTargetInfo>, String> {
+        fetch_cdp_targets(remote_debugging_port).await
+    }
+
+    pub async fn is_cdp_endpoint_alive(&self, remote_debugging_port: u16) -> bool {
+        is_cdp_endpoint_alive(remote_debugging_port).await
+    }
+
+    pub async fn find_session_by_profile_key(&self, profile_key: &str) -> Option<CdpSessionState> {
+        let sessions = self.sessions.read().await;
+        for session in sessions.values() {
+            let state = session.state().await;
+            if state.profile_key == profile_key && state.connected {
+                return Some(state);
+            }
+        }
+        None
+    }
+
+    pub async fn open_session(
+        &self,
+        request: OpenSessionRequest,
+    ) -> Result<CdpSessionState, String> {
+        if let Some(existing) = self.find_session_by_profile_key(&request.profile_key).await {
+            return Ok(existing);
+        }
+
+        let target =
+            ensure_cdp_target(request.remote_debugging_port, request.target_id.as_deref()).await?;
+        let ws_url = target
+            .web_socket_debugger_url
+            .clone()
+            .ok_or_else(|| "目标标签页缺少 webSocketDebuggerUrl".to_string())?;
+        let (ws_stream, _) = connect_async(&ws_url)
+            .await
+            .map_err(|e| format!("连接 CDP WebSocket 失败: {e}"))?;
+        let (writer, reader) = ws_stream.split();
+        let created_at = Utc::now().to_rfc3339();
+        let session_id = uuid::Uuid::new_v4().to_string();
+        let state = CdpSessionState {
+            session_id: session_id.clone(),
+            profile_key: request.profile_key.clone(),
+            target_id: target.id.clone(),
+            target_title: target.title.clone(),
+            target_url: target.url.clone(),
+            remote_debugging_port: request.remote_debugging_port,
+            ws_debugger_url: ws_url,
+            devtools_frontend_url: target.devtools_frontend_url.clone(),
+            stream_mode: None,
+            transport_kind: BrowserTransportKind::CdpFrames,
+            lifecycle_state: BrowserSessionLifecycleState::Launching,
+            control_mode: BrowserControlMode::Agent,
+            human_reason: None,
+            last_page_info: None,
+            last_event_at: None,
+            last_frame_at: None,
+            last_error: None,
+            created_at,
+            connected: true,
+        };
+        let session = CdpSessionHandle::new(state, writer);
+        let session_clone = session.clone();
+        let reader_task = tokio::spawn(async move {
+            session_clone.reader_loop(reader).await;
+        });
+        session.set_reader_task(reader_task).await;
+        session.bootstrap().await?;
+        session
+            .emit(BrowserEventPayload::SessionOpened {
+                profile_key: request.profile_key,
+                target_id: target.id,
+            })
+            .await;
+        session
+            .set_session_state(
+                BrowserSessionLifecycleState::Live,
+                BrowserControlMode::Agent,
+                None,
+            )
+            .await;
+        if let Ok(page_info) = session.capture_page_info().await {
+            session.update_page_info(page_info).await;
+        }
+        self.sessions
+            .write()
+            .await
+            .insert(session_id, session.clone());
+        Ok(session.state().await)
+    }
+
+    pub async fn close_session(&self, session_id: &str) -> Result<(), String> {
+        let session = {
+            let mut sessions = self.sessions.write().await;
+            sessions
+                .remove(session_id)
+                .ok_or_else(|| format!("未找到 session_id={session_id}"))?
+        };
+        session.shutdown("manual_close").await;
+        Ok(())
+    }
+
+    pub async fn start_stream(
+        &self,
+        session_id: &str,
+        mode: BrowserStreamMode,
+    ) -> Result<CdpSessionState, String> {
+        let session = self.get_session(session_id).await?;
+        session.start_stream(mode).await?;
+        Ok(session.state().await)
+    }
+
+    pub async fn stop_stream(&self, session_id: &str) -> Result<CdpSessionState, String> {
+        let session = self.get_session(session_id).await?;
+        session.stop_stream().await?;
+        Ok(session.state().await)
+    }
+
+    pub async fn get_session_state(&self, session_id: &str) -> Result<CdpSessionState, String> {
+        Ok(self.get_session(session_id).await?.state().await)
+    }
+
+    pub async fn take_over_session(
+        &self,
+        session_id: &str,
+        human_reason: Option<String>,
+    ) -> Result<CdpSessionState, String> {
+        let session = self.get_session(session_id).await?;
+        session.take_over(human_reason).await;
+        Ok(session.state().await)
+    }
+
+    pub async fn release_session(
+        &self,
+        session_id: &str,
+        human_reason: Option<String>,
+    ) -> Result<CdpSessionState, String> {
+        let session = self.get_session(session_id).await?;
+        session.release(human_reason).await;
+        Ok(session.state().await)
+    }
+
+    pub async fn resume_session(
+        &self,
+        session_id: &str,
+        human_reason: Option<String>,
+    ) -> Result<CdpSessionState, String> {
+        let session = self.get_session(session_id).await?;
+        session.resume(human_reason).await;
+        Ok(session.state().await)
+    }
+
+    pub async fn get_event_buffer(
+        &self,
+        session_id: &str,
+        cursor: Option<u64>,
+    ) -> Result<EventBufferSnapshot, String> {
+        Ok(self
+            .get_session(session_id)
+            .await?
+            .event_buffer(cursor)
+            .await)
+    }
+
+    pub async fn subscribe(
+        &self,
+        session_id: &str,
+    ) -> Result<broadcast::Receiver<BrowserEvent>, String> {
+        Ok(self.get_session(session_id).await?.subscribe())
+    }
+
+    pub async fn execute_action(
+        &self,
+        session_id: &str,
+        action: &str,
+        args: Value,
+    ) -> Result<Value, String> {
+        let session = self.get_session(session_id).await?;
+        let command_id = session.next_user_command_id();
+        session
+            .emit(BrowserEventPayload::CommandStarted {
+                command_id,
+                action: action.to_string(),
+            })
+            .await;
+        match action::execute_action(&session, action, args).await {
+            Ok(result) => {
+                session
+                    .emit(BrowserEventPayload::CommandCompleted {
+                        command_id,
+                        action: action.to_string(),
+                    })
+                    .await;
+                Ok(result)
+            }
+            Err(error) => {
+                session
+                    .emit(BrowserEventPayload::CommandFailed {
+                        command_id,
+                        action: action.to_string(),
+                        error: error.clone(),
+                    })
+                    .await;
+                Err(error)
+            }
+        }
+    }
+
+    async fn get_session(&self, session_id: &str) -> Result<CdpSessionHandle, String> {
+        self.sessions
+            .read()
+            .await
+            .get(session_id)
+            .cloned()
+            .ok_or_else(|| format!("未找到 session_id={session_id}"))
+    }
+}
+
+fn cdp_http_client(timeout_secs: u64) -> Result<reqwest::Client, String> {
+    reqwest::Client::builder()
+        .no_proxy()
+        .timeout(Duration::from_secs(timeout_secs))
+        .build()
+        .map_err(|e| format!("创建 HTTP 客户端失败: {e}"))
+}
+
+#[derive(Clone)]
+pub struct CdpSessionHandle {
+    inner: Arc<CdpSession>,
+}
+
+impl CdpSessionHandle {
+    fn new(
+        state: CdpSessionState,
+        writer: futures::stream::SplitSink<
+            WebSocketStream<MaybeTlsStream<TcpStream>>,
+            tokio_tungstenite::tungstenite::Message,
+        >,
+    ) -> Self {
+        let (event_tx, _) = broadcast::channel(256);
+        Self {
+            inner: Arc::new(CdpSession {
+                client: Arc::new(CdpCommandClient::new(writer)),
+                state: RwLock::new(state),
+                event_buffer: RwLock::new(VecDeque::with_capacity(DEFAULT_BUFFER_SIZE)),
+                event_tx,
+                next_event_sequence: AtomicU64::new(1),
+                next_user_command_id: AtomicU64::new(1),
+                frame_sequence: AtomicU64::new(1),
+                reader_task: Mutex::new(None),
+                screenshot_task: Mutex::new(None),
+                fallback_frames_running: AtomicBool::new(false),
+            }),
+        }
+    }
+
+    pub async fn bootstrap(&self) -> Result<(), String> {
+        for method in [
+            "Page.enable",
+            "Runtime.enable",
+            "Network.enable",
+            "Log.enable",
+        ] {
+            let _ = self
+                .send_command(method, json!({}), DEFAULT_CDP_TIMEOUT_MS)
+                .await;
+        }
+        let _ = self
+            .send_command(
+                "Target.setAutoAttach",
+                json!({
+                    "autoAttach": true,
+                    "waitForDebuggerOnStart": false,
+                    "flatten": true,
+                }),
+                DEFAULT_CDP_TIMEOUT_MS,
+            )
+            .await;
+        Ok(())
+    }
+
+    pub async fn state(&self) -> CdpSessionState {
+        self.inner.state.read().await.clone()
+    }
+
+    pub fn subscribe(&self) -> broadcast::Receiver<BrowserEvent> {
+        self.inner.event_tx.subscribe()
+    }
+
+    pub async fn event_buffer(&self, cursor: Option<u64>) -> EventBufferSnapshot {
+        let buffer = self.inner.event_buffer.read().await;
+        let events = buffer
+            .iter()
+            .filter(|event| cursor.map(|value| event.sequence > value).unwrap_or(true))
+            .cloned()
+            .collect::<Vec<_>>();
+        let next_cursor = buffer.back().map(|event| event.sequence).unwrap_or(0);
+        EventBufferSnapshot {
+            events,
+            next_cursor,
+        }
+    }
+
+    pub fn next_user_command_id(&self) -> u64 {
+        self.inner
+            .next_user_command_id
+            .fetch_add(1, Ordering::SeqCst)
+    }
+
+    pub async fn set_reader_task(&self, task: JoinHandle<()>) {
+        *self.inner.reader_task.lock().await = Some(task);
+    }
+
+    pub async fn send_command(
+        &self,
+        method: &str,
+        params: Value,
+        timeout_ms: u64,
+    ) -> Result<Value, String> {
+        self.inner
+            .client
+            .send_command(method, params, timeout_ms)
+            .await
+    }
+
+    pub async fn runtime_evaluate(
+        &self,
+        expression: String,
+        return_by_value: bool,
+        timeout_ms: u64,
+    ) -> Result<Value, String> {
+        let response = self
+            .send_command(
+                "Runtime.evaluate",
+                json!({
+                    "expression": expression,
+                    "returnByValue": return_by_value,
+                    "awaitPromise": true,
+                }),
+                timeout_ms,
+            )
+            .await?;
+        if let Some(exception) = response.get("exceptionDetails") {
+            return Err(format!("页面脚本执行失败: {exception}"));
+        }
+        let result = response.get("result").cloned().unwrap_or(Value::Null);
+        Ok(result.get("value").cloned().unwrap_or(result))
+    }
+
+    pub async fn capture_page_info(&self) -> Result<BrowserPageInfo, String> {
+        let result = self
+            .runtime_evaluate(
+                r#"
+(() => {
+  const bodyText = (document.body?.innerText || "")
+    .split("\n")
+    .map((line) => line.trim())
+    .filter(Boolean)
+    .slice(0, 80)
+    .join("\n");
+  const title = document.title || location.href;
+  const url = location.href;
+  return {
+    title,
+    url,
+    markdown: `# ${title}\nURL: ${url}\n\n${bodyText}`.trim(),
+  };
+})()
+"#
+                .to_string(),
+                true,
+                DEFAULT_CDP_TIMEOUT_MS,
+            )
+            .await?;
+        let title = result
+            .get("title")
+            .and_then(Value::as_str)
+            .unwrap_or_default()
+            .to_string();
+        let url = result
+            .get("url")
+            .and_then(Value::as_str)
+            .unwrap_or_default()
+            .to_string();
+        let markdown = result
+            .get("markdown")
+            .and_then(Value::as_str)
+            .unwrap_or_default()
+            .to_string();
+        Ok(BrowserPageInfo {
+            title,
+            url,
+            markdown,
+            updated_at: Utc::now().to_rfc3339(),
+        })
+    }
+
+    pub async fn update_page_info(&self, page_info: BrowserPageInfo) {
+        {
+            let mut state = self.inner.state.write().await;
+            state.target_title = page_info.title.clone();
+            state.target_url = page_info.url.clone();
+            state.last_page_info = Some(page_info.clone());
+            state.last_event_at = Some(Utc::now().to_rfc3339());
+        }
+        self.emit(BrowserEventPayload::PageInfoChanged {
+            title: page_info.title,
+            url: page_info.url,
+            markdown: page_info.markdown,
+        })
+        .await;
+        self.promote_to_live_if_needed().await;
+    }
+
+    pub async fn emit(&self, payload: BrowserEventPayload) {
+        let session_id = self.inner.state.read().await.session_id.clone();
+        let sequence = self
+            .inner
+            .next_event_sequence
+            .fetch_add(1, Ordering::SeqCst);
+        let occurred_at = Utc::now().to_rfc3339();
+        let event = BrowserEvent {
+            session_id,
+            sequence,
+            occurred_at: occurred_at.clone(),
+            payload,
+        };
+        {
+            let mut buffer = self.inner.event_buffer.write().await;
+            buffer.push_back(event.clone());
+            while buffer.len() > DEFAULT_BUFFER_SIZE {
+                buffer.pop_front();
+            }
+        }
+        {
+            let mut state = self.inner.state.write().await;
+            state.last_event_at = Some(occurred_at);
+            match &event.payload {
+                BrowserEventPayload::FrameChunk { .. } => {
+                    state.last_frame_at = Some(event.occurred_at.clone());
+                }
+                BrowserEventPayload::SessionError { error } => {
+                    state.last_error = Some(error.clone());
+                }
+                BrowserEventPayload::SessionClosed { .. } => {
+                    state.connected = false;
+                    if !matches!(
+                        state.lifecycle_state,
+                        BrowserSessionLifecycleState::Failed | BrowserSessionLifecycleState::Closed
+                    ) {
+                        state.lifecycle_state = BrowserSessionLifecycleState::Closed;
+                    }
+                }
+                _ => {}
+            }
+        }
+        let _ = self.inner.event_tx.send(event);
+    }
+
+    pub async fn start_stream(&self, mode: BrowserStreamMode) -> Result<(), String> {
+        {
+            let mut state = self.inner.state.write().await;
+            state.stream_mode = Some(mode);
+        }
+        self.promote_to_live_if_needed().await;
+        if !mode.includes_frames() {
+            return Ok(());
+        }
+        if self
+            .send_command(
+                "Page.startScreencast",
+                json!({
+                    "format": "jpeg",
+                    "quality": 60,
+                    "maxWidth": 1280,
+                    "maxHeight": 720,
+                    "everyNthFrame": 1,
+                }),
+                DEFAULT_CDP_TIMEOUT_MS,
+            )
+            .await
+            .is_ok()
+        {
+            self.inner
+                .fallback_frames_running
+                .store(false, Ordering::SeqCst);
+            return Ok(());
+        }
+        self.start_screenshot_fallback().await;
+        Ok(())
+    }
+
+    pub async fn stop_stream(&self) -> Result<(), String> {
+        {
+            let mut state = self.inner.state.write().await;
+            state.stream_mode = None;
+        }
+        self.inner
+            .fallback_frames_running
+            .store(false, Ordering::SeqCst);
+        if let Some(task) = self.inner.screenshot_task.lock().await.take() {
+            task.abort();
+        }
+        let _ = self
+            .send_command("Page.stopScreencast", json!({}), DEFAULT_CDP_TIMEOUT_MS)
+            .await;
+        Ok(())
+    }
+
+    pub async fn shutdown(&self, reason: &str) {
+        let _ = self.stop_stream().await;
+        self.set_session_state(
+            BrowserSessionLifecycleState::Closed,
+            BrowserControlMode::Agent,
+            None,
+        )
+        .await;
+        {
+            let mut state = self.inner.state.write().await;
+            state.connected = false;
+        }
+        if let Some(task) = self.inner.reader_task.lock().await.take() {
+            task.abort();
+        }
+        self.emit(BrowserEventPayload::SessionClosed {
+            reason: reason.to_string(),
+        })
+        .await;
+    }
+
+    pub async fn take_over(&self, human_reason: Option<String>) {
+        self.set_session_state(
+            BrowserSessionLifecycleState::HumanControlling,
+            BrowserControlMode::Human,
+            human_reason,
+        )
+        .await;
+    }
+
+    pub async fn release(&self, human_reason: Option<String>) {
+        self.set_session_state(
+            BrowserSessionLifecycleState::WaitingForHuman,
+            BrowserControlMode::Shared,
+            human_reason,
+        )
+        .await;
+    }
+
+    pub async fn resume(&self, human_reason: Option<String>) {
+        self.set_session_state(
+            BrowserSessionLifecycleState::AgentResuming,
+            BrowserControlMode::Agent,
+            human_reason,
+        )
+        .await;
+        let session = self.clone();
+        tokio::spawn(async move {
+            tokio::time::sleep(Duration::from_millis(RESUME_TO_LIVE_DELAY_MS)).await;
+            session.promote_to_live_if_needed().await;
+        });
+    }
+
+    pub fn collect_console_messages(&self, since: Option<u64>) -> Vec<BrowserEvent> {
+        if let Ok(buffer) = self.inner.event_buffer.try_read() {
+            buffer
+                .iter()
+                .filter(|event| {
+                    since.map(|value| event.sequence > value).unwrap_or(true)
+                        && matches!(event.payload, BrowserEventPayload::ConsoleMessage { .. })
+                })
+                .cloned()
+                .collect()
+        } else {
+            Vec::new()
+        }
+    }
+
+    pub fn collect_network_events(&self, since: Option<u64>) -> Vec<BrowserEvent> {
+        if let Ok(buffer) = self.inner.event_buffer.try_read() {
+            buffer
+                .iter()
+                .filter(|event| {
+                    since.map(|value| event.sequence > value).unwrap_or(true)
+                        && matches!(
+                            event.payload,
+                            BrowserEventPayload::NetworkRequest { .. }
+                                | BrowserEventPayload::NetworkResponse { .. }
+                                | BrowserEventPayload::NetworkFailed { .. }
+                        )
+                })
+                .cloned()
+                .collect()
+        } else {
+            Vec::new()
+        }
+    }
+
+    async fn reader_loop(&self, mut reader: CdpRead) {
+        let mut close_reason = "socket_closed".to_string();
+        let mut close_as_failed = false;
+        while let Some(message) = reader.next().await {
+            match message {
+                Ok(tokio_tungstenite::tungstenite::Message::Text(text)) => {
+                    if let Err(error) = self.handle_message(text.to_string()).await {
+                        warn!("处理 CDP 消息失败: {error}");
+                        self.emit(BrowserEventPayload::SessionError { error }).await;
+                    }
+                }
+                Ok(tokio_tungstenite::tungstenite::Message::Close(_)) => break,
+                Ok(_) => {}
+                Err(error) => {
+                    close_reason = "socket_error".to_string();
+                    close_as_failed = true;
+                    self.emit(BrowserEventPayload::SessionError {
+                        error: format!("读取 CDP 消息失败: {error}"),
+                    })
+                    .await;
+                    break;
+                }
+            }
+        }
+        if close_as_failed {
+            self.set_session_state(
+                BrowserSessionLifecycleState::Failed,
+                BrowserControlMode::Agent,
+                None,
+            )
+            .await;
+        } else {
+            self.set_session_state(
+                BrowserSessionLifecycleState::Closed,
+                BrowserControlMode::Agent,
+                None,
+            )
+            .await;
+        }
+        {
+            let mut state = self.inner.state.write().await;
+            state.connected = false;
+        }
+        self.emit(BrowserEventPayload::SessionClosed {
+            reason: close_reason,
+        })
+        .await;
+    }
+
+    async fn handle_message(&self, text: String) -> Result<(), String> {
+        let payload: Value =
+            serde_json::from_str(&text).map_err(|e| format!("解析 CDP 消息失败: {e}"))?;
+        if let Some(id) = payload.get("id").and_then(Value::as_u64) {
+            if let Some(error) = payload.get("error") {
+                self.inner
+                    .client
+                    .respond(id, Err(format!("CDP 错误: {error}")))
+                    .await;
+            } else {
+                self.inner
+                    .client
+                    .respond(
+                        id,
+                        Ok(payload.get("result").cloned().unwrap_or(Value::Null)),
+                    )
+                    .await;
+            }
+            return Ok(());
+        }
+
+        let Some(method) = payload.get("method").and_then(Value::as_str) else {
+            return Ok(());
+        };
+        let params = payload.get("params").cloned().unwrap_or(Value::Null);
+        match method {
+            "Runtime.consoleAPICalled" => {
+                let level = params
+                    .get("type")
+                    .and_then(Value::as_str)
+                    .unwrap_or("log")
+                    .to_string();
+                let text = params
+                    .get("args")
+                    .and_then(Value::as_array)
+                    .map(|items| {
+                        items
+                            .iter()
+                            .map(extract_remote_value)
+                            .collect::<Vec<_>>()
+                            .join(" ")
+                    })
+                    .unwrap_or_default();
+                let timestamp = params
+                    .get("timestamp")
+                    .and_then(Value::as_f64)
+                    .map(|value| value as i64)
+                    .unwrap_or_else(|| Utc::now().timestamp_millis());
+                self.emit(BrowserEventPayload::ConsoleMessage {
+                    level,
+                    text,
+                    timestamp,
+                })
+                .await;
+            }
+            "Log.entryAdded" => {
+                let entry = params.get("entry").cloned().unwrap_or(Value::Null);
+                let level = entry
+                    .get("level")
+                    .and_then(Value::as_str)
+                    .unwrap_or("info")
+                    .to_string();
+                let text = entry
+                    .get("text")
+                    .and_then(Value::as_str)
+                    .unwrap_or_default()
+                    .to_string();
+                let timestamp = entry
+                    .get("timestamp")
+                    .and_then(Value::as_f64)
+                    .map(|value| value as i64)
+                    .unwrap_or_else(|| Utc::now().timestamp_millis());
+                self.emit(BrowserEventPayload::ConsoleMessage {
+                    level,
+                    text,
+                    timestamp,
+                })
+                .await;
+            }
+            "Network.requestWillBeSent" => {
+                let request = params.get("request").cloned().unwrap_or(Value::Null);
+                self.emit(BrowserEventPayload::NetworkRequest {
+                    request_id: params
+                        .get("requestId")
+                        .and_then(Value::as_str)
+                        .unwrap_or_default()
+                        .to_string(),
+                    url: request
+                        .get("url")
+                        .and_then(Value::as_str)
+                        .unwrap_or_default()
+                        .to_string(),
+                    method: request
+                        .get("method")
+                        .and_then(Value::as_str)
+                        .unwrap_or_default()
+                        .to_string(),
+                })
+                .await;
+            }
+            "Network.responseReceived" => {
+                let response = params.get("response").cloned().unwrap_or(Value::Null);
+                self.emit(BrowserEventPayload::NetworkResponse {
+                    request_id: params
+                        .get("requestId")
+                        .and_then(Value::as_str)
+                        .unwrap_or_default()
+                        .to_string(),
+                    url: response
+                        .get("url")
+                        .and_then(Value::as_str)
+                        .unwrap_or_default()
+                        .to_string(),
+                    status: response
+                        .get("status")
+                        .and_then(Value::as_f64)
+                        .map(|value| value.round() as u16)
+                        .unwrap_or(0),
+                    mime_type: response
+                        .get("mimeType")
+                        .and_then(Value::as_str)
+                        .unwrap_or_default()
+                        .to_string(),
+                })
+                .await;
+            }
+            "Network.loadingFailed" => {
+                self.emit(BrowserEventPayload::NetworkFailed {
+                    request_id: params
+                        .get("requestId")
+                        .and_then(Value::as_str)
+                        .unwrap_or_default()
+                        .to_string(),
+                    error_text: params
+                        .get("errorText")
+                        .and_then(Value::as_str)
+                        .unwrap_or_default()
+                        .to_string(),
+                })
+                .await;
+            }
+            "Page.loadEventFired" => {
+                if let Ok(page_info) = self.capture_page_info().await {
+                    self.update_page_info(page_info).await;
+                }
+            }
+            "Page.screencastFrame" => {
+                let data = params
+                    .get("data")
+                    .and_then(Value::as_str)
+                    .unwrap_or_default()
+                    .to_string();
+                let metadata = params.get("metadata").cloned().unwrap_or(Value::Null);
+                let sequence = self.inner.frame_sequence.fetch_add(1, Ordering::SeqCst);
+                let frame = FrameMetadata {
+                    width: metadata
+                        .get("deviceWidth")
+                        .and_then(Value::as_u64)
+                        .unwrap_or(1280) as u32,
+                    height: metadata
+                        .get("deviceHeight")
+                        .and_then(Value::as_u64)
+                        .unwrap_or(720) as u32,
+                    timestamp: Utc::now().timestamp_millis(),
+                    sequence,
+                };
+                self.emit(BrowserEventPayload::FrameChunk {
+                    data,
+                    metadata: frame,
+                })
+                .await;
+                self.promote_to_live_if_needed().await;
+                if let Some(session_id) = params.get("sessionId").and_then(Value::as_u64) {
+                    let _ = self
+                        .send_command(
+                            "Page.screencastFrameAck",
+                            json!({ "sessionId": session_id }),
+                            DEFAULT_CDP_TIMEOUT_MS,
+                        )
+                        .await;
+                }
+            }
+            _ => {
+                debug!("忽略未处理 CDP 事件: {method}");
+            }
+        }
+        Ok(())
+    }
+
+    async fn set_session_state(
+        &self,
+        lifecycle_state: BrowserSessionLifecycleState,
+        control_mode: BrowserControlMode,
+        human_reason: Option<String>,
+    ) {
+        let normalized_reason = human_reason
+            .map(|value| value.trim().to_string())
+            .filter(|value| !value.is_empty());
+        let should_emit = {
+            let mut state = self.inner.state.write().await;
+            let changed = state.lifecycle_state != lifecycle_state
+                || state.control_mode != control_mode
+                || state.human_reason != normalized_reason;
+            state.lifecycle_state = lifecycle_state;
+            state.control_mode = control_mode;
+            state.human_reason = normalized_reason.clone();
+            changed
+        };
+
+        if should_emit {
+            self.emit(BrowserEventPayload::SessionStateChanged {
+                lifecycle_state,
+                control_mode,
+                human_reason: normalized_reason,
+            })
+            .await;
+        }
+    }
+
+    async fn promote_to_live_if_needed(&self) {
+        let should_promote = {
+            let state = self.inner.state.read().await;
+            state.connected
+                && matches!(
+                    state.lifecycle_state,
+                    BrowserSessionLifecycleState::Launching
+                        | BrowserSessionLifecycleState::AgentResuming
+                )
+        };
+
+        if should_promote {
+            self.set_session_state(
+                BrowserSessionLifecycleState::Live,
+                BrowserControlMode::Agent,
+                None,
+            )
+            .await;
+        }
+    }
+
+    async fn start_screenshot_fallback(&self) {
+        if self
+            .inner
+            .fallback_frames_running
+            .swap(true, Ordering::SeqCst)
+        {
+            return;
+        }
+        let session = self.clone();
+        let task = tokio::spawn(async move {
+            let mut interval =
+                tokio::time::interval(Duration::from_millis(SCREENSHOT_FALLBACK_INTERVAL_MS));
+            loop {
+                interval.tick().await;
+                if !session.inner.fallback_frames_running.load(Ordering::SeqCst) {
+                    break;
+                }
+                match session
+                    .send_command(
+                        "Page.captureScreenshot",
+                        json!({
+                            "format": "jpeg",
+                            "quality": 60,
+                        }),
+                        DEFAULT_CDP_TIMEOUT_MS,
+                    )
+                    .await
+                {
+                    Ok(result) => {
+                        if let Some(data) = result.get("data").and_then(Value::as_str) {
+                            let frame = FrameMetadata {
+                                width: 1280,
+                                height: 720,
+                                timestamp: Utc::now().timestamp_millis(),
+                                sequence: session
+                                    .inner
+                                    .frame_sequence
+                                    .fetch_add(1, Ordering::SeqCst),
+                            };
+                            session
+                                .emit(BrowserEventPayload::FrameChunk {
+                                    data: data.to_string(),
+                                    metadata: frame,
+                                })
+                                .await;
+                            session.promote_to_live_if_needed().await;
+                        } else {
+                            session
+                                .emit(BrowserEventPayload::FrameDropped {
+                                    reason: "截图结果缺少 data 字段".to_string(),
+                                })
+                                .await;
+                        }
+                    }
+                    Err(error) => {
+                        session
+                            .emit(BrowserEventPayload::FrameDropped { reason: error })
+                            .await;
+                    }
+                }
+            }
+        });
+        *self.inner.screenshot_task.lock().await = Some(task);
+    }
+}
+
+struct CdpSession {
+    client: Arc<CdpCommandClient>,
+    state: RwLock<CdpSessionState>,
+    event_buffer: RwLock<VecDeque<BrowserEvent>>,
+    event_tx: broadcast::Sender<BrowserEvent>,
+    next_event_sequence: AtomicU64,
+    next_user_command_id: AtomicU64,
+    frame_sequence: AtomicU64,
+    reader_task: Mutex<Option<JoinHandle<()>>>,
+    screenshot_task: Mutex<Option<JoinHandle<()>>>,
+    fallback_frames_running: AtomicBool,
+}
+
+async fn ensure_cdp_target(
+    port: u16,
+    requested_target_id: Option<&str>,
+) -> Result<CdpTargetInfo, String> {
+    let mut targets = fetch_cdp_targets(port).await?;
+    if targets.is_empty() {
+        open_new_target(port, "about:blank").await?;
+        targets = fetch_cdp_targets(port).await?;
+    }
+    if let Some(target_id) = requested_target_id {
+        if let Some(target) = targets.into_iter().find(|item| item.id == target_id) {
+            return Ok(target);
+        }
+        return Err(format!("未找到 target_id={target_id}"));
+    }
+    if let Some(target) = targets
+        .iter()
+        .find(|item| item.target_type == "page")
+        .cloned()
+    {
+        return Ok(target);
+    }
+    targets
+        .into_iter()
+        .next()
+        .ok_or_else(|| "CDP 未返回可用标签页".to_string())
+}
+
+async fn open_new_target(port: u16, url: &str) -> Result<(), String> {
+    let endpoint = format!(
+        "http://127.0.0.1:{port}/json/new?{}",
+        urlencoding::encode(url)
+    );
+    let client = cdp_http_client(5)?;
+    let response = match client.put(&endpoint).send().await {
+        Ok(resp) => resp,
+        Err(_) => client
+            .get(&endpoint)
+            .send()
+            .await
+            .map_err(|e| format!("创建 CDP 标签页失败: {e}"))?,
+    };
+    if !response.status().is_success() {
+        return Err(format!("创建 CDP 标签页失败: {}", response.status()));
+    }
+    Ok(())
+}
+
+pub async fn fetch_cdp_targets(port: u16) -> Result<Vec<CdpTargetInfo>, String> {
+    let endpoint = format!("http://127.0.0.1:{port}/json/list");
+    let client = cdp_http_client(5)?;
+    let response = client
+        .get(&endpoint)
+        .send()
+        .await
+        .map_err(|e| format!("读取 CDP 标签页失败: {e}"))?;
+    if !response.status().is_success() {
+        return Err(format!("读取 CDP 标签页失败: {}", response.status()));
+    }
+    response
+        .json::<Vec<CdpTargetInfo>>()
+        .await
+        .map_err(|e| format!("解析 CDP 标签页失败: {e}"))
+}
+
+pub async fn is_cdp_endpoint_alive(port: u16) -> bool {
+    let endpoint = format!("http://127.0.0.1:{port}/json/version");
+    let client = match cdp_http_client(2) {
+        Ok(client) => client,
+        Err(_) => return false,
+    };
+    match client.get(endpoint).send().await {
+        Ok(resp) => resp.status().is_success(),
+        Err(_) => false,
+    }
+}
+
+fn extract_remote_value(value: &Value) -> String {
+    value
+        .get("value")
+        .or_else(|| value.get("description"))
+        .or_else(|| value.get("unserializableValue"))
+        .and_then(Value::as_str)
+        .unwrap_or_default()
+        .to_string()
+}
+
+#[cfg(test)]
+mod tests {
+    use super::*;
+
+    #[test]
+    fn parse_target_info_with_debugger_urls() {
+        let value = json!({
+            "id": "page-1",
+            "title": "Example",
+            "url": "https://example.com",
+            "type": "page",
+            "webSocketDebuggerUrl": "ws://127.0.0.1/devtools/page/1",
+            "devtoolsFrontendUrl": "/devtools/inspector.html?ws=127.0.0.1/devtools/page/1"
+        });
+        let parsed: CdpTargetInfo = serde_json::from_value(value).unwrap();
+        assert_eq!(parsed.id, "page-1");
+        assert_eq!(parsed.target_type, "page");
+        assert!(parsed.web_socket_debugger_url.is_some());
+        assert!(parsed.devtools_frontend_url.is_some());
+    }
+}
diff --git a/src-tauri/crates/browser-runtime/src/types.rs b/src-tauri/crates/browser-runtime/src/types.rs
new file mode 100644
index 000000000..d8b35591c
--- /dev/null
+++ b/src-tauri/crates/browser-runtime/src/types.rs
@@ -0,0 +1,183 @@
+use serde::{Deserialize, Serialize};
+
+#[derive(Debug, Clone, Serialize, Deserialize)]
+pub struct BrowserPageInfo {
+    pub title: String,
+    pub url: String,
+    pub markdown: String,
+    pub updated_at: String,
+}
+
+#[derive(Debug, Clone, Copy, Serialize, Deserialize, PartialEq, Eq)]
+#[serde(rename_all = "snake_case")]
+pub enum BrowserStreamMode {
+    Events,
+    Frames,
+    Both,
+}
+
+#[derive(Debug, Clone, Copy, Serialize, Deserialize, PartialEq, Eq)]
+#[serde(rename_all = "snake_case")]
+pub enum BrowserSessionLifecycleState {
+    Launching,
+    Live,
+    WaitingForHuman,
+    HumanControlling,
+    AgentResuming,
+    Closed,
+    Failed,
+}
+
+#[derive(Debug, Clone, Copy, Serialize, Deserialize, PartialEq, Eq)]
+#[serde(rename_all = "snake_case")]
+pub enum BrowserControlMode {
+    Agent,
+    Human,
+    Shared,
+}
+
+#[derive(Debug, Clone, Copy, Serialize, Deserialize, PartialEq, Eq)]
+#[serde(rename_all = "snake_case")]
+pub enum BrowserTransportKind {
+    CdpFrames,
+}
+
+impl BrowserStreamMode {
+    pub fn includes_frames(self) -> bool {
+        matches!(self, Self::Frames | Self::Both)
+    }
+
+    pub fn includes_events(self) -> bool {
+        matches!(self, Self::Events | Self::Both)
+    }
+}
+
+#[derive(Debug, Clone, Serialize, Deserialize)]
+pub struct FrameMetadata {
+    pub width: u32,
+    pub height: u32,
+    pub timestamp: i64,
+    pub sequence: u64,
+}
+
+#[derive(Debug, Clone, Serialize, Deserialize)]
+pub struct BrowserEvent {
+    pub session_id: String,
+    pub sequence: u64,
+    pub occurred_at: String,
+    #[serde(flatten)]
+    pub payload: BrowserEventPayload,
+}
+
+impl BrowserEvent {
+    pub fn is_frame_related(&self) -> bool {
+        matches!(
+            self.payload,
+            BrowserEventPayload::FrameChunk { .. } | BrowserEventPayload::FrameDropped { .. }
+        )
+    }
+}
+
+#[derive(Debug, Clone, Serialize, Deserialize)]
+#[serde(tag = "type", rename_all = "snake_case")]
+pub enum BrowserEventPayload {
+    SessionOpened {
+        profile_key: String,
+        target_id: String,
+    },
+    SessionClosed {
+        reason: String,
+    },
+    SessionError {
+        error: String,
+    },
+    SessionStateChanged {
+        lifecycle_state: BrowserSessionLifecycleState,
+        control_mode: BrowserControlMode,
+        #[serde(skip_serializing_if = "Option::is_none")]
+        human_reason: Option<String>,
+    },
+    PageInfoChanged {
+        title: String,
+        url: String,
+        markdown: String,
+    },
+    ConsoleMessage {
+        level: String,
+        text: String,
+        timestamp: i64,
+    },
+    NetworkRequest {
+        request_id: String,
+        url: String,
+        method: String,
+    },
+    NetworkResponse {
+        request_id: String,
+        url: String,
+        status: u16,
+        mime_type: String,
+    },
+    NetworkFailed {
+        request_id: String,
+        error_text: String,
+    },
+    FrameChunk {
+        data: String,
+        metadata: FrameMetadata,
+    },
+    FrameDropped {
+        reason: String,
+    },
+    CommandStarted {
+        command_id: u64,
+        action: String,
+    },
+    CommandCompleted {
+        command_id: u64,
+        action: String,
+    },
+    CommandFailed {
+        command_id: u64,
+        action: String,
+        error: String,
+    },
+}
+
+#[derive(Debug, Clone, Serialize, Deserialize)]
+pub struct CdpTargetInfo {
+    pub id: String,
+    #[serde(default)]
+    pub title: String,
+    #[serde(default)]
+    pub url: String,
+    #[serde(rename = "type", default)]
+    pub target_type: String,
+    #[serde(rename = "webSocketDebuggerUrl", default)]
+    pub web_socket_debugger_url: Option<String>,
+    #[serde(rename = "devtoolsFrontendUrl", default)]
+    pub devtools_frontend_url: Option<String>,
+}
+
+#[derive(Debug, Clone, Serialize, Deserialize)]
+pub struct CdpSessionState {
+    pub session_id: String,
+    pub profile_key: String,
+    pub target_id: String,
+    pub target_title: String,
+    pub target_url: String,
+    pub remote_debugging_port: u16,
+    pub ws_debugger_url: String,
+    pub devtools_frontend_url: Option<String>,
+    pub stream_mode: Option<BrowserStreamMode>,
+    pub transport_kind: BrowserTransportKind,
+    pub lifecycle_state: BrowserSessionLifecycleState,
+    pub control_mode: BrowserControlMode,
+    pub human_reason: Option<String>,
+    pub last_page_info: Option<BrowserPageInfo>,
+    pub last_event_at: Option<String>,
+    pub last_frame_at: Option<String>,
+    pub last_error: Option<String>,
+    pub created_at: String,
+    pub connected: bool,
+}
diff --git a/src-tauri/src/app/commands/logs.rs b/src-tauri/src/app/commands/logs.rs
index a148e5b0c..172f2379f 100644
--- a/src-tauri/src/app/commands/logs.rs
+++ b/src-tauri/src/app/commands/logs.rs
@@ -949,7 +949,15 @@ mod tests {
             .duration_since(UNIX_EPOCH)
             .expect("系统时间异常")
             .as_nanos();
-        std::env::temp_dir().join(format!("proxycast-log-tail-test-{nanos}.log"))
+        let log_dir = std::env::temp_dir().join(format!("proxycast-log-tail-test-{nanos}"));
+        fs::create_dir_all(&log_dir).expect("创建测试日志目录失败");
+        log_dir.join("proxycast.log")
+    }
+
+    fn cleanup_log_fixture(path: &Path) {
+        if let Some(log_dir) = path.parent() {
+            let _ = fs::remove_dir_all(log_dir);
+        }
     }
 
     #[test]
@@ -975,7 +983,7 @@ mod tests {
         assert_eq!(entries[1].level, "error");
         assert_eq!(entries[1].message, "third line");
 
-        let _ = fs::remove_file(path);
+        cleanup_log_fixture(&path);
     }
 
     #[test]
@@ -1017,9 +1025,7 @@ mod tests {
         assert_eq!(entries[1].message, "rotated line");
         assert_eq!(entries[2].message, "current line");
 
-        let _ = fs::remove_file(current);
-        let _ = fs::remove_file(rotated);
-        let _ = fs::remove_file(gz_path);
+        cleanup_log_fixture(&current);
     }
 
     #[test]
@@ -1050,9 +1056,7 @@ mod tests {
             "raw_response_demo.txt"
         );
 
-        let _ = fs::remove_file(current);
-        let _ = fs::remove_file(rotated);
-        let _ = fs::remove_file(raw);
+        cleanup_log_fixture(&current);
     }
 
     #[test]
@@ -1093,7 +1097,7 @@ mod tests {
         assert!(!gz_path.exists());
         assert!(!raw.exists());
 
-        let _ = fs::remove_file(current);
+        cleanup_log_fixture(&current);
     }
 
     #[test]
diff --git a/src-tauri/src/app/runner.rs b/src-tauri/src/app/runner.rs
index bf6ffa25c..04381a6a6 100644
--- a/src-tauri/src/app/runner.rs
+++ b/src-tauri/src/app/runner.rs
@@ -1149,6 +1149,7 @@ pub fn run() {
             commands::skill_cmd::get_installed_proxycast_skills,
             commands::skill_cmd::inspect_local_skill_for_app,
             commands::skill_cmd::create_skill_scaffold_for_app,
+            commands::skill_cmd::import_local_skill_for_app,
             commands::skill_cmd::inspect_remote_skill,
             // Skill Execution commands
             commands::skill_exec_cmd::execute_skill,
@@ -1215,6 +1216,9 @@ pub fn run() {
             commands::provider_pool_cmd::install_playwright,
             commands::provider_pool_cmd::start_kiro_playwright_login,
             commands::provider_pool_cmd::cancel_kiro_playwright_login,
+            commands::browser_runtime_cmd::open_browser_runtime_debugger_window,
+            commands::browser_runtime_cmd::close_browser_runtime_debugger_window,
+            commands::browser_runtime_cmd::launch_browser_runtime_assist,
             // API Key Provider commands
             commands::api_key_provider_cmd::get_system_provider_catalog,
             commands::api_key_provider_cmd::get_api_key_providers,
@@ -1499,6 +1503,16 @@ pub fn run() {
             commands::webview_cmd::get_browser_backends_status,
             commands::webview_cmd::get_browser_backend_policy,
             commands::webview_cmd::set_browser_backend_policy,
+            commands::webview_cmd::list_cdp_targets,
+            commands::webview_cmd::open_cdp_session,
+            commands::webview_cmd::close_cdp_session,
+            commands::webview_cmd::start_browser_stream,
+            commands::webview_cmd::stop_browser_stream,
+            commands::webview_cmd::get_browser_session_state,
+            commands::webview_cmd::take_over_browser_session,
+            commands::webview_cmd::release_browser_session,
+            commands::webview_cmd::resume_browser_session,
+            commands::webview_cmd::get_browser_event_buffer,
             commands::webview_cmd::browser_execute_action,
             commands::webview_cmd::get_browser_action_audit_logs,
             // Screenshot Chat commands
diff --git a/src-tauri/src/commands/aster_agent_cmd.rs b/src-tauri/src/commands/aster_agent_cmd.rs
index fe29b81b0..9793a12a8 100644
--- a/src-tauri/src/commands/aster_agent_cmd.rs
+++ b/src-tauri/src/commands/aster_agent_cmd.rs
@@ -12,7 +12,8 @@ use crate::agent::{
 };
 use crate::commands::api_key_provider_cmd::ApiKeyProviderServiceState;
 use crate::commands::webview_cmd::{
-    browser_execute_action_global, BrowserActionRequest, BrowserBackendType,
+    browser_execute_action_global, ensure_managed_chrome_profile_global, BrowserActionRequest,
+    BrowserBackendType,
 };
 use crate::config::{GlobalConfigManager, GlobalConfigManagerState};
 use crate::database::dao::agent::AgentDao;
@@ -40,7 +41,8 @@ use aster::agents::{Agent, AgentEvent};
 use aster::chrome_mcp::get_chrome_mcp_tools;
 use aster::conversation::message::{Message, MessageContent};
 use aster::permission::{
-    ParameterRestriction, PermissionScope, RestrictionType, ToolPermission, ToolPermissionManager,
+    ConditionOperator, ConditionType, ParameterRestriction, PermissionCondition, PermissionScope,
+    RestrictionType, ToolPermission, ToolPermissionManager,
 };
 use aster::permission::{Permission, PermissionConfirmation, PrincipalType};
 use aster::sandbox::{
@@ -103,8 +105,13 @@ const PROXYCAST_CREATE_TYPESETTING_TASK_TOOL_NAME: &str = "proxycast_create_type
 const AUTO_CONTINUE_PROMPT_MARKER: &str = "【自动续写策略】";
 const PROXYCAST_TOOL_METADATA_BEGIN: &str = "[ProxyCast 工具元数据开始]";
 const PROXYCAST_TOOL_METADATA_END: &str = "[ProxyCast 工具元数据结束]";
+const BROWSER_ASSIST_ALLOW_PATTERN: &str = "mcp__proxycast-browser__*";
+const BROWSER_ASSIST_DENY_PATTERNS: &[&str] = &["mcp__playwright__*", "browser_*", "playwright*"];
 
 static SHARED_TASK_MANAGER: OnceLock<Arc<TaskManager>> = OnceLock::new();
+static BROWSER_ASSIST_RUNTIME_HINTS: OnceLock<
+    tokio::sync::RwLock<HashMap<String, BrowserAssistRuntimeHint>>,
+> = OnceLock::new();
 
 fn shared_task_manager() -> Arc<TaskManager> {
     SHARED_TASK_MANAGER
@@ -112,6 +119,19 @@ fn shared_task_manager() -> Arc<TaskManager> {
         .clone()
 }
 
+fn shared_browser_assist_runtime_hints(
+) -> &'static tokio::sync::RwLock<HashMap<String, BrowserAssistRuntimeHint>> {
+    BROWSER_ASSIST_RUNTIME_HINTS.get_or_init(|| tokio::sync::RwLock::new(HashMap::new()))
+}
+
+#[derive(Debug, Clone, PartialEq, Eq)]
+struct BrowserAssistRuntimeHint {
+    profile_key: String,
+    preferred_backend: Option<BrowserBackendType>,
+    auto_launch: bool,
+    launch_url: Option<String>,
+}
+
 #[derive(Debug, Clone, Copy)]
 struct WorkspaceSandboxPolicy {
     enabled: bool,
@@ -881,6 +901,159 @@ fn extract_harness_bool(
         .find_map(serde_json::Value::as_bool)
 }
 
+fn extract_harness_nested_object<'a>(
+    request_metadata: Option<&'a serde_json::Value>,
+    keys: &[&str],
+) -> Option<&'a serde_json::Map<String, serde_json::Value>> {
+    let harness = extract_harness_object(request_metadata)?;
+    keys.iter()
+        .filter_map(|key| harness.get(*key))
+        .find_map(serde_json::Value::as_object)
+}
+
+fn parse_browser_backend_hint(value: &str) -> Option<BrowserBackendType> {
+    match value.trim().to_ascii_lowercase().as_str() {
+        "aster_compat" => Some(BrowserBackendType::AsterCompat),
+        "proxycast_extension_bridge" => Some(BrowserBackendType::ProxycastExtensionBridge),
+        "cdp_direct" => Some(BrowserBackendType::CdpDirect),
+        _ => None,
+    }
+}
+
+fn extract_browser_assist_runtime_hint(
+    request_metadata: Option<&serde_json::Value>,
+) -> Option<BrowserAssistRuntimeHint> {
+    let browser_assist =
+        extract_harness_nested_object(request_metadata, &["browser_assist", "browserAssist"])?;
+    let profile_key = ["profile_key", "profileKey"]
+        .iter()
+        .filter_map(|key| browser_assist.get(*key))
+        .find_map(serde_json::Value::as_str)
+        .map(str::trim)
+        .filter(|value| !value.is_empty())?
+        .to_string();
+    let preferred_backend = ["preferred_backend", "preferredBackend"]
+        .iter()
+        .filter_map(|key| browser_assist.get(*key))
+        .find_map(serde_json::Value::as_str)
+        .and_then(parse_browser_backend_hint);
+    let auto_launch = ["auto_launch", "autoLaunch"]
+        .iter()
+        .filter_map(|key| browser_assist.get(*key))
+        .find_map(serde_json::Value::as_bool)
+        .unwrap_or(false);
+    let launch_url = ["launch_url", "launchUrl", "url"]
+        .iter()
+        .filter_map(|key| browser_assist.get(*key))
+        .find_map(serde_json::Value::as_str)
+        .map(str::trim)
+        .filter(|value| !value.is_empty())
+        .map(str::to_string);
+
+    Some(BrowserAssistRuntimeHint {
+        profile_key,
+        preferred_backend,
+        auto_launch,
+        launch_url,
+    })
+}
+
+fn is_browser_assist_enabled(request_metadata: Option<&serde_json::Value>) -> bool {
+    let Some(browser_assist) =
+        extract_harness_nested_object(request_metadata, &["browser_assist", "browserAssist"])
+    else {
+        return false;
+    };
+
+    if let Some(enabled) = ["enabled", "is_enabled", "isEnabled"]
+        .iter()
+        .filter_map(|key| browser_assist.get(*key))
+        .find_map(serde_json::Value::as_bool)
+    {
+        return enabled;
+    }
+
+    extract_browser_assist_runtime_hint(request_metadata).is_some() || !browser_assist.is_empty()
+}
+
+fn build_session_scoped_permission_conditions(session_id: &str) -> Vec<PermissionCondition> {
+    let session_id = session_id.trim();
+    if session_id.is_empty() {
+        return Vec::new();
+    }
+
+    vec![PermissionCondition {
+        condition_type: ConditionType::Session,
+        field: Some("session_id".to_string()),
+        operator: ConditionOperator::Equals,
+        value: serde_json::json!(session_id),
+        validator: None,
+        description: Some("仅对当前聊天会话生效".to_string()),
+    }]
+}
+
+fn append_browser_assist_session_permissions(
+    permissions: &mut Vec<ToolPermission>,
+    session_id: &str,
+    request_metadata: Option<&serde_json::Value>,
+) {
+    if !is_browser_assist_enabled(request_metadata) {
+        return;
+    }
+
+    let conditions = build_session_scoped_permission_conditions(session_id);
+    permissions.push(ToolPermission {
+        tool: BROWSER_ASSIST_ALLOW_PATTERN.to_string(),
+        allowed: true,
+        priority: 1100,
+        conditions: conditions.clone(),
+        parameter_restrictions: Vec::new(),
+        scope: PermissionScope::Session,
+        reason: Some(
+            "Browser Assist 会话已启用：网页任务应统一走 ProxyCast 浏览器运行时工具".to_string(),
+        ),
+        expires_at: None,
+        metadata: HashMap::new(),
+    });
+
+    for pattern in BROWSER_ASSIST_DENY_PATTERNS {
+        permissions.push(ToolPermission {
+            tool: (*pattern).to_string(),
+            allowed: false,
+            priority: 1200,
+            conditions: conditions.clone(),
+            parameter_restrictions: Vec::new(),
+            scope: PermissionScope::Session,
+            reason: Some(
+                "Browser Assist 会话禁止回退到 Playwright 浏览器工具；请改用 mcp__proxycast-browser__*，以便右侧画布附着实时浏览器会话"
+                    .to_string(),
+            ),
+            expires_at: None,
+            metadata: HashMap::new(),
+        });
+    }
+}
+
+async fn sync_browser_assist_runtime_hint(
+    session_id: &str,
+    request_metadata: Option<&serde_json::Value>,
+) {
+    let mut hints = shared_browser_assist_runtime_hints().write().await;
+    if let Some(hint) = extract_browser_assist_runtime_hint(request_metadata) {
+        hints.insert(session_id.to_string(), hint);
+    } else {
+        hints.remove(session_id);
+    }
+}
+
+async fn get_browser_assist_runtime_hint(session_id: &str) -> Option<BrowserAssistRuntimeHint> {
+    shared_browser_assist_runtime_hints()
+        .read()
+        .await
+        .get(session_id)
+        .cloned()
+}
+
 #[derive(Debug, Clone, Copy, PartialEq, Eq)]
 enum RuntimeChatMode {
     Agent,
@@ -907,6 +1080,20 @@ fn default_web_search_enabled_for_chat_mode(_chat_mode: RuntimeChatMode) -> bool
     false
 }
 
+fn should_enable_model_skill_tool(request_metadata: Option<&serde_json::Value>) -> bool {
+    if let Some(explicit) = extract_harness_bool(
+        request_metadata,
+        &["allow_model_skills", "allowModelSkills"],
+    ) {
+        return explicit;
+    }
+
+    matches!(
+        extract_harness_string(request_metadata, &["session_mode", "sessionMode"]).as_deref(),
+        Some("theme_workbench")
+    )
+}
+
 fn execution_strategy_label(strategy: AsterExecutionStrategy) -> &'static str {
     match strategy {
         AsterExecutionStrategy::React => "对话执行优先",
@@ -2804,12 +2991,7 @@ impl ProxycastBrowserMcpTool {
 
     fn parse_backend(params: &serde_json::Value) -> Option<BrowserBackendType> {
         let raw = params.get("backend")?.as_str()?.trim().to_ascii_lowercase();
-        match raw.as_str() {
-            "aster_compat" => Some(BrowserBackendType::AsterCompat),
-            "proxycast_extension_bridge" => Some(BrowserBackendType::ProxycastExtensionBridge),
-            "cdp_direct" => Some(BrowserBackendType::CdpDirect),
-            _ => None,
-        }
+        parse_browser_backend_hint(&raw)
     }
 
     fn extract_profile_key(params: &serde_json::Value, context: &ToolContext) -> Option<String> {
@@ -2824,6 +3006,25 @@ impl ProxycastBrowserMcpTool {
             .get("PROXYCAST_BROWSER_PROFILE_KEY")
             .cloned()
     }
+
+    fn extract_launch_url(action_name: &str, params: &serde_json::Value) -> Option<String> {
+        let normalized = action_name.trim().to_ascii_lowercase();
+        if normalized == "navigate"
+            || normalized.ends_with("navigate")
+            || normalized == "tabs_create_mcp"
+            || normalized.ends_with("tabs_create_mcp")
+            || normalized == "open_url"
+            || normalized.ends_with("open_url")
+        {
+            return params
+                .get("url")
+                .and_then(|value| value.as_str())
+                .map(str::trim)
+                .filter(|value| !value.is_empty())
+                .map(str::to_string);
+        }
+        None
+    }
 }
 
 #[async_trait]
@@ -2852,8 +3053,25 @@ impl Tool for ProxycastBrowserMcpTool {
         params: serde_json::Value,
         _context: &ToolContext,
     ) -> Result<ToolResult, ToolError> {
-        let backend = Self::parse_backend(&params);
-        let profile_key = Self::extract_profile_key(&params, _context);
+        let session_hint = get_browser_assist_runtime_hint(&_context.session_id).await;
+        let backend = Self::parse_backend(&params).or_else(|| {
+            session_hint
+                .as_ref()
+                .and_then(|hint| hint.preferred_backend.clone())
+        });
+        let profile_key = Self::extract_profile_key(&params, _context)
+            .or_else(|| session_hint.as_ref().map(|hint| hint.profile_key.clone()));
+        if let (Some(hint), Some(profile_key)) = (session_hint.as_ref(), profile_key.as_ref()) {
+            if hint.auto_launch {
+                let launch_url = Self::extract_launch_url(&self.action_name, &params)
+                    .or_else(|| hint.launch_url.clone());
+                ensure_managed_chrome_profile_global(profile_key.clone(), launch_url)
+                    .await
+                    .map_err(|error| {
+                        ToolError::execution_failed(format!("自动启动浏览器协助会话失败: {error}"))
+                    })?;
+            }
+        }
         let timeout_ms = params.get("timeout_ms").and_then(|v| v.as_u64());
         let request = BrowserActionRequest {
             profile_key,
@@ -2869,23 +3087,56 @@ impl Tool for ProxycastBrowserMcpTool {
 
         let payload = serde_json::to_string_pretty(&result)
             .unwrap_or_else(|_| format!("{{\"success\": {}}}", result.success));
+        let browser_session_metadata = if result.session_id.is_some() {
+            result
+                .data
+                .as_ref()
+                .and_then(|value| value.get("browser_session"))
+                .cloned()
+                .or_else(|| {
+                    Some(serde_json::json!({
+                        "session_id": result.session_id.clone(),
+                        "target_id": result.target_id.clone(),
+                    }))
+                })
+        } else {
+            None
+        };
 
         if result.success {
-            Ok(ToolResult::success(payload)
+            let mut tool_result = ToolResult::success(payload)
+                .with_metadata("tool_family", serde_json::json!("browser"))
                 .with_metadata("action", serde_json::json!(self.action_name))
-                .with_metadata("selected_backend", serde_json::json!(result.backend))
-                .with_metadata("attempt_count", serde_json::json!(result.attempts.len())))
+                .with_metadata(
+                    "selected_backend",
+                    serde_json::json!(result.backend.clone()),
+                )
+                .with_metadata("attempt_count", serde_json::json!(result.attempts.len()))
+                .with_metadata("attempts", serde_json::json!(result.attempts.clone()))
+                .with_metadata("result", serde_json::json!(result.clone()));
+            if let Some(browser_session) = browser_session_metadata {
+                tool_result = tool_result.with_metadata("browser_session", browser_session);
+            }
+            Ok(tool_result)
         } else {
-            Ok(ToolResult::error(
+            let mut tool_result = ToolResult::error(
                 result
                     .error
                     .clone()
                     .unwrap_or_else(|| "浏览器动作执行失败".to_string()),
             )
+            .with_metadata("tool_family", serde_json::json!("browser"))
             .with_metadata("action", serde_json::json!(self.action_name))
-            .with_metadata("selected_backend", serde_json::json!(result.backend))
-            .with_metadata("attempts", serde_json::json!(result.attempts))
-            .with_metadata("result", serde_json::json!(result)))
+            .with_metadata(
+                "selected_backend",
+                serde_json::json!(result.backend.clone()),
+            )
+            .with_metadata("attempts", serde_json::json!(result.attempts.clone()))
+            .with_metadata("result", serde_json::json!(result.clone()));
+            if let Some(browser_session) = browser_session_metadata {
+                tool_result = tool_result.with_metadata("browser_session", browser_session);
+            }
+            Ok(tool_result)
         }
     }
 }
@@ -4311,6 +4562,8 @@ async fn apply_workspace_sandbox_permissions(
     api_key_provider_service: &ApiKeyProviderServiceState,
     heartbeat_state: &HeartbeatServiceState,
     app_handle: &AppHandle,
+    session_id: &str,
+    request_metadata: Option<&serde_json::Value>,
     workspace_root: &str,
     execution_strategy: AsterExecutionStrategy,
 ) -> Result<WorkspaceSandboxApplyOutcome, String> {
@@ -4801,6 +5054,8 @@ async fn apply_workspace_sandbox_permissions(
         });
     }
 
+    append_browser_assist_session_permissions(&mut permissions, session_id, request_metadata);
+
     permissions.push(ToolPermission {
         tool: "*".to_string(),
         allowed: false,
@@ -5229,6 +5484,8 @@ async fn execute_aster_chat_request(
         api_key_provider_service,
         heartbeat_state,
         app,
+        session_id,
+        request.metadata.as_ref(),
         &workspace_root,
         requested_strategy,
     )
@@ -5274,6 +5531,8 @@ async fn execute_aster_chat_request(
     let cancel_token = state.create_cancel_token(session_id).await;
     let auto_continue_metadata = auto_continue_config.clone();
     let request_metadata = request.metadata.clone();
+    sync_browser_assist_runtime_hint(session_id, request_metadata.as_ref()).await;
+    let model_skill_tool_enabled = should_enable_model_skill_tool(request_metadata.as_ref());
     let run_start_metadata = build_chat_run_metadata_base(
         &request,
         workspace_id.as_str(),
@@ -5341,6 +5600,7 @@ async fn execute_aster_chat_request(
         session_config_builder.build()
     };
 
+    proxycast_agent::tools::set_skill_tool_session_access(session_id, model_skill_tool_enabled);
     let final_result = tracker
         .with_run_custom(
             RunSource::Chat,
@@ -5521,6 +5781,7 @@ async fn execute_aster_chat_request(
             },
         )
         .await;
+    proxycast_agent::tools::clear_skill_tool_session_access(session_id);
 
     match final_result {
         Ok(()) => {
@@ -6760,6 +7021,135 @@ mod tests {
         ));
     }
 
+    #[test]
+    fn test_should_enable_model_skill_tool_defaults_to_false() {
+        let metadata = serde_json::json!({
+            "harness": {
+                "theme": "general",
+                "session_mode": "default"
+            }
+        });
+
+        assert!(!should_enable_model_skill_tool(Some(&metadata)));
+        assert!(!should_enable_model_skill_tool(None));
+    }
+
+    #[test]
+    fn test_should_enable_model_skill_tool_allows_theme_workbench() {
+        let metadata = serde_json::json!({
+            "harness": {
+                "theme": "social-media",
+                "session_mode": "theme_workbench"
+            }
+        });
+
+        assert!(should_enable_model_skill_tool(Some(&metadata)));
+    }
+
+    #[test]
+    fn test_should_enable_model_skill_tool_respects_explicit_override() {
+        let metadata = serde_json::json!({
+            "harness": {
+                "theme": "social-media",
+                "session_mode": "theme_workbench",
+                "allow_model_skills": false
+            }
+        });
+
+        assert!(!should_enable_model_skill_tool(Some(&metadata)));
+    }
+
+    #[test]
+    fn test_extract_browser_assist_runtime_hint_from_harness_metadata() {
+        let metadata = serde_json::json!({
+            "harness": {
+                "theme": "general",
+                "browser_assist": {
+                    "profile_key": "general_browser_assist",
+                    "preferred_backend": "cdp_direct",
+                    "auto_launch": true,
+                    "launch_url": "https://www.google.com"
+                }
+            }
+        });
+
+        assert_eq!(
+            extract_browser_assist_runtime_hint(Some(&metadata)),
+            Some(BrowserAssistRuntimeHint {
+                profile_key: "general_browser_assist".to_string(),
+                preferred_backend: Some(BrowserBackendType::CdpDirect),
+                auto_launch: true,
+                launch_url: Some("https://www.google.com".to_string()),
+            })
+        );
+    }
+
+    #[test]
+    fn test_is_browser_assist_enabled_respects_explicit_flag() {
+        let disabled_metadata = serde_json::json!({
+            "harness": {
+                "browser_assist": {
+                    "enabled": false,
+                    "profile_key": "general_browser_assist"
+                }
+            }
+        });
+        let enabled_metadata = serde_json::json!({
+            "harness": {
+                "browser_assist": {
+                    "profile_key": "general_browser_assist"
+                }
+            }
+        });
+
+        assert!(!is_browser_assist_enabled(Some(&disabled_metadata)));
+        assert!(is_browser_assist_enabled(Some(&enabled_metadata)));
+        assert!(!is_browser_assist_enabled(None));
+    }
+
+    #[test]
+    fn test_append_browser_assist_session_permissions_adds_session_scoped_rules() {
+        let metadata = serde_json::json!({
+            "harness": {
+                "browser_assist": {
+                    "enabled": true,
+                    "profile_key": "general_browser_assist"
+                }
+            }
+        });
+        let mut permissions = Vec::new();
+
+        append_browser_assist_session_permissions(
+            &mut permissions,
+            "session-browser-1",
+            Some(&metadata),
+        );
+
+        let allow_rule = permissions
+            .iter()
+            .find(|permission| permission.tool == BROWSER_ASSIST_ALLOW_PATTERN)
+            .expect("should add browser assist allow rule");
+        assert!(allow_rule.allowed);
+        assert_eq!(allow_rule.priority, 1100);
+        assert_eq!(allow_rule.conditions.len(), 1);
+        assert_eq!(
+            allow_rule.conditions[0].field.as_deref(),
+            Some("session_id")
+        );
+        assert_eq!(
+            allow_rule.conditions[0].value,
+            serde_json::json!("session-browser-1")
+        );
+
+        let deny_rule = permissions
+            .iter()
+            .find(|permission| permission.tool == "mcp__playwright__*")
+            .expect("should add playwright deny rule");
+        assert!(!deny_rule.allowed);
+        assert_eq!(deny_rule.priority, 1200);
+        assert_eq!(deny_rule.conditions, allow_rule.conditions);
+    }
+
     #[test]
     fn test_agent_runtime_submit_turn_request_maps_to_aster_chat_request() {
         let json = r#"{
diff --git a/src-tauri/src/commands/browser_runtime_cmd.rs b/src-tauri/src/commands/browser_runtime_cmd.rs
new file mode 100644
index 000000000..7f58f80d3
--- /dev/null
+++ b/src-tauri/src/commands/browser_runtime_cmd.rs
@@ -0,0 +1,238 @@
+//! 浏览器运行时窗口命令
+
+use crate::app::AppState;
+use crate::commands::webview_cmd::{
+    open_cdp_session_global, open_chrome_profile_window_global, shared_browser_runtime,
+    start_browser_stream_global, OpenCdpSessionRequest, OpenChromeProfileRequest,
+    OpenChromeProfileResponse, StartBrowserStreamRequest,
+};
+use crate::services::browser_runtime_window;
+use proxycast_browser_runtime::BrowserStreamMode;
+use proxycast_browser_runtime::CdpSessionState;
+use serde::{Deserialize, Serialize};
+use std::time::Instant;
+use tauri::AppHandle;
+use tokio::time::{sleep, Duration};
+use tracing::info;
+
+const CDP_READY_MAX_ATTEMPTS: usize = 60;
+const CDP_READY_RETRY_INTERVAL_MS: u64 = 250;
+
+#[derive(Debug, Deserialize)]
+pub struct OpenBrowserRuntimeDebuggerWindowRequest {
+    #[serde(default)]
+    pub session_id: Option<String>,
+    #[serde(default)]
+    pub profile_key: Option<String>,
+}
+
+#[derive(Debug, Deserialize)]
+pub struct LaunchBrowserRuntimeAssistRequest {
+    pub profile_key: String,
+    pub url: String,
+    #[serde(default)]
+    pub target_id: Option<String>,
+    #[serde(default = "default_open_window")]
+    pub open_window: bool,
+    #[serde(default = "default_stream_mode")]
+    pub stream_mode: BrowserStreamMode,
+}
+
+#[derive(Debug, Serialize)]
+pub struct BrowserRuntimeAssistLaunchResponse {
+    pub profile: OpenChromeProfileResponse,
+    pub session: CdpSessionState,
+}
+
+fn default_stream_mode() -> BrowserStreamMode {
+    BrowserStreamMode::Both
+}
+
+fn default_open_window() -> bool {
+    true
+}
+
+async fn wait_for_cdp_ready(
+    remote_debugging_port: u16,
+    requested_target_id: Option<&str>,
+) -> Result<(), String> {
+    let runtime = shared_browser_runtime();
+    let mut last_error =
+        format!("等待 CDP 端点就绪: http://127.0.0.1:{remote_debugging_port}/json/version");
+
+    for attempt in 0..CDP_READY_MAX_ATTEMPTS {
+        match runtime.list_targets(remote_debugging_port).await {
+            Ok(targets) => {
+                if let Some(target_id) = requested_target_id {
+                    if targets.iter().any(|target| target.id == target_id) {
+                        return Ok(());
+                    }
+                    last_error = if targets.is_empty() {
+                        format!("CDP 已连通，但尚未发现 target_id={target_id}")
+                    } else {
+                        format!("CDP 已连通，但未找到 target_id={target_id}")
+                    };
+                } else {
+                    return Ok(());
+                }
+            }
+            Err(error) => {
+                last_error = error;
+                if runtime.is_cdp_endpoint_alive(remote_debugging_port).await {
+                    last_error = format!("CDP 调试端点已响应，但标签页列表暂不可用: {last_error}");
+                }
+            }
+        }
+
+        if attempt + 1 < CDP_READY_MAX_ATTEMPTS {
+            sleep(Duration::from_millis(CDP_READY_RETRY_INTERVAL_MS)).await;
+        }
+    }
+
+    Err(format!("等待 CDP 就绪超时: {last_error}"))
+}
+
+#[tauri::command]
+pub fn open_browser_runtime_debugger_window(
+    app_handle: AppHandle,
+    request: Option<OpenBrowserRuntimeDebuggerWindowRequest>,
+) -> Result<(), String> {
+    let request = request.unwrap_or(OpenBrowserRuntimeDebuggerWindowRequest {
+        session_id: None,
+        profile_key: None,
+    });
+    browser_runtime_window::open_browser_runtime_window(
+        &app_handle,
+        request.session_id.as_deref(),
+        request.profile_key.as_deref(),
+    )
+    .map_err(|e| format!("打开浏览器运行时调试窗口失败: {e}"))
+}
+
+#[tauri::command]
+pub fn close_browser_runtime_debugger_window(app_handle: AppHandle) -> Result<(), String> {
+    browser_runtime_window::close_browser_runtime_window(&app_handle)
+        .map_err(|e| format!("关闭浏览器运行时调试窗口失败: {e}"))
+}
+
+#[tauri::command]
+pub async fn launch_browser_runtime_assist(
+    app_handle: AppHandle,
+    app_state: tauri::State<'_, AppState>,
+    request: LaunchBrowserRuntimeAssistRequest,
+) -> Result<BrowserRuntimeAssistLaunchResponse, String> {
+    launch_browser_runtime_assist_global(app_handle, app_state.inner().clone(), request).await
+}
+
+pub async fn launch_browser_runtime_assist_global(
+    app_handle: AppHandle,
+    app_state: AppState,
+    request: LaunchBrowserRuntimeAssistRequest,
+) -> Result<BrowserRuntimeAssistLaunchResponse, String> {
+    let launch_started_at = Instant::now();
+    let profile_started_at = Instant::now();
+    let profile = open_chrome_profile_window_global(
+        app_handle.clone(),
+        app_state,
+        OpenChromeProfileRequest {
+            profile_key: request.profile_key.clone(),
+            url: request.url.clone(),
+        },
+    )
+    .await?;
+    let profile_elapsed_ms = profile_started_at.elapsed().as_millis();
+
+    if !profile.success {
+        return Err(profile
+            .error
+            .clone()
+            .unwrap_or_else(|| "打开浏览器 profile 失败".to_string()));
+    }
+
+    info!(
+        profile_key = %request.profile_key,
+        url = %request.url,
+        reused = profile.reused,
+        remote_debugging_port = ?profile.remote_debugging_port,
+        elapsed_ms = profile_elapsed_ms,
+        "browser runtime assist: profile ready"
+    );
+
+    let remote_debugging_port = profile
+        .remote_debugging_port
+        .ok_or_else(|| "浏览器 profile 缺少 remote_debugging_port，无法连接 CDP".to_string())?;
+
+    let cdp_ready_started_at = Instant::now();
+    wait_for_cdp_ready(remote_debugging_port, request.target_id.as_deref()).await?;
+    let cdp_ready_elapsed_ms = cdp_ready_started_at.elapsed().as_millis();
+    info!(
+        profile_key = %request.profile_key,
+        remote_debugging_port,
+        elapsed_ms = cdp_ready_elapsed_ms,
+        "browser runtime assist: cdp ready"
+    );
+
+    let open_session_started_at = Instant::now();
+    let session = open_cdp_session_global(OpenCdpSessionRequest {
+        profile_key: request.profile_key.clone(),
+        target_id: request.target_id.clone(),
+    })
+    .await?;
+    let open_session_elapsed_ms = open_session_started_at.elapsed().as_millis();
+    info!(
+        profile_key = %request.profile_key,
+        session_id = %session.session_id,
+        target_id = ?session.target_id,
+        elapsed_ms = open_session_elapsed_ms,
+        "browser runtime assist: cdp session opened"
+    );
+
+    let stream_started_at = Instant::now();
+    let stream_mode = request.stream_mode.clone();
+    let session = start_browser_stream_global(
+        app_handle.clone(),
+        StartBrowserStreamRequest {
+            session_id: session.session_id.clone(),
+            mode: stream_mode.clone(),
+        },
+    )
+    .await?;
+    let stream_elapsed_ms = stream_started_at.elapsed().as_millis();
+    info!(
+        profile_key = %request.profile_key,
+        session_id = %session.session_id,
+        stream_mode = ?stream_mode,
+        elapsed_ms = stream_elapsed_ms,
+        "browser runtime assist: stream started"
+    );
+
+    if request.open_window {
+        let window_started_at = Instant::now();
+        browser_runtime_window::open_browser_runtime_window(
+            &app_handle,
+            Some(&session.session_id),
+            Some(&request.profile_key),
+        )
+        .map_err(|e| format!("打开浏览器运行时调试窗口失败: {e}"))?;
+        info!(
+            profile_key = %request.profile_key,
+            session_id = %session.session_id,
+            elapsed_ms = window_started_at.elapsed().as_millis(),
+            "browser runtime assist: debugger window opened"
+        );
+    }
+
+    info!(
+        profile_key = %request.profile_key,
+        session_id = %session.session_id,
+        total_elapsed_ms = launch_started_at.elapsed().as_millis(),
+        profile_elapsed_ms,
+        cdp_ready_elapsed_ms,
+        open_session_elapsed_ms,
+        stream_elapsed_ms,
+        open_window = request.open_window,
+        "browser runtime assist: launch completed"
+    );
+
+    Ok(BrowserRuntimeAssistLaunchResponse { profile, session })
+}
diff --git a/src-tauri/src/commands/mod.rs b/src-tauri/src/commands/mod.rs
index 147e0c423..78471cfe1 100644
--- a/src-tauri/src/commands/mod.rs
+++ b/src-tauri/src/commands/mod.rs
@@ -4,6 +4,7 @@ pub mod api_key_provider_cmd;
 pub mod asr_cmd;
 pub mod aster_agent_cmd;
 pub mod auto_fix_cmd;
+pub mod browser_runtime_cmd;
 pub mod channels_cmd;
 pub mod config_cmd;
 pub mod connect_cmd;
diff --git a/src-tauri/src/commands/skill_cmd.rs b/src-tauri/src/commands/skill_cmd.rs
index c966fee25..f87b10cff 100644
--- a/src-tauri/src/commands/skill_cmd.rs
+++ b/src-tauri/src/commands/skill_cmd.rs
@@ -250,6 +250,144 @@ fn create_skill_scaffold_in_root(
     }
 }
 
+fn copy_directory_recursive(source: &Path, destination: &Path) -> Result<(), String> {
+    let metadata = fs::symlink_metadata(source)
+        .map_err(|e| format!("Failed to read skill source {}: {e}", source.display()))?;
+
+    if metadata.file_type().is_symlink() {
+        return Err(format!(
+            "Skill package contains unsupported symlink: {}",
+            source.display()
+        ));
+    }
+
+    if metadata.is_dir() {
+        fs::create_dir_all(destination).map_err(|e| {
+            format!(
+                "Failed to create target directory {}: {e}",
+                destination.display()
+            )
+        })?;
+
+        let entries = fs::read_dir(source)
+            .map_err(|e| format!("Failed to read skill directory {}: {e}", source.display()))?;
+
+        for entry in entries {
+            let entry = entry.map_err(|e| format!("Failed to read skill entry: {e}"))?;
+            let child_source = entry.path();
+            let child_destination = destination.join(entry.file_name());
+            copy_directory_recursive(&child_source, &child_destination)?;
+        }
+
+        return Ok(());
+    }
+
+    if metadata.is_file() {
+        if let Some(parent) = destination.parent() {
+            fs::create_dir_all(parent).map_err(|e| {
+                format!(
+                    "Failed to create target parent directory {}: {e}",
+                    parent.display()
+                )
+            })?;
+        }
+
+        fs::copy(source, destination).map_err(|e| {
+            format!(
+                "Failed to copy skill file {} -> {}: {e}",
+                source.display(),
+                destination.display()
+            )
+        })?;
+        return Ok(());
+    }
+
+    Err(format!(
+        "Unsupported skill package entry: {}",
+        source.display()
+    ))
+}
+
+fn import_local_skill_into_root(skills_root: &Path, source_path: &Path) -> Result<String, String> {
+    let canonical_source = source_path.canonicalize().map_err(|e| {
+        format!(
+            "Failed to resolve skill source {}: {e}",
+            source_path.display()
+        )
+    })?;
+
+    if !canonical_source.is_dir() {
+        return Err("Skill source path must be a directory".to_string());
+    }
+
+    let inspection = SkillService::inspect_skill_dir(&canonical_source).map_err(|e| {
+        format!(
+            "Skill source is invalid {}: {e}",
+            canonical_source.display()
+        )
+    })?;
+
+    if !inspection.standard_compliance.validation_errors.is_empty() {
+        return Err(format!(
+            "Skill package is not Agent Skills compliant: {}",
+            inspection.standard_compliance.validation_errors.join("; ")
+        ));
+    }
+
+    let directory = canonical_source
+        .file_name()
+        .and_then(|value| value.to_str())
+        .ok_or_else(|| "Failed to resolve skill directory name".to_string())?;
+    validate_skill_directory(directory)?;
+
+    fs::create_dir_all(skills_root).map_err(|e| {
+        format!(
+            "Failed to create skills root {}: {e}",
+            skills_root.display()
+        )
+    })?;
+
+    let target_dir = skills_root.join(directory);
+    if target_dir.exists() {
+        return Err(format!("Skill directory already exists: {directory}"));
+    }
+
+    if let Err(error) = copy_directory_recursive(&canonical_source, &target_dir) {
+        let _ = fs::remove_dir_all(&target_dir);
+        return Err(error);
+    }
+
+    match SkillService::inspect_skill_dir(&target_dir) {
+        Ok(imported_inspection)
+            if imported_inspection
+                .standard_compliance
+                .validation_errors
+                .is_empty() =>
+        {
+            Ok(directory.to_string())
+        }
+        Ok(imported_inspection) => {
+            let _ = fs::remove_dir_all(&target_dir);
+            Err(format!(
+                "Imported skill is not Agent Skills compliant: {}",
+                imported_inspection
+                    .standard_compliance
+                    .validation_errors
+                    .join("; ")
+            ))
+        }
+        Err(error) => {
+            let _ = fs::remove_dir_all(&target_dir);
+            Err(format!("Imported skill failed inspection: {error}"))
+        }
+    }
+}
+
+#[derive(Debug, Clone, Serialize)]
+pub struct ImportedSkillResult {
+    pub directory: String,
+}
+
 /// 获取已安装的 ProxyCast Skills 目录列表
 ///
 /// 扫描 ProxyCast Skills 目录，返回包含 SKILL.md 的子目录名列表。
@@ -310,6 +448,25 @@ pub fn create_skill_scaffold_for_app(
     Ok(inspection)
 }
 
+/// 从本地目录导入 Skill
+///
+/// `source_path` 必须指向一个包含 `SKILL.md` 的单个 Skill 目录。
+#[tauri::command]
+pub fn import_local_skill_for_app(
+    app: String,
+    source_path: String,
+) -> Result<ImportedSkillResult, String> {
+    let app_type: AppType = app.parse().map_err(|e: String| e)?;
+    let skills_root = get_skills_dir(&app_type)?;
+    let directory = import_local_skill_into_root(&skills_root, Path::new(&source_path))?;
+
+    if matches!(app_type, AppType::ProxyCast) {
+        AsterAgentState::reload_proxycast_skills();
+    }
+
+    Ok(ImportedSkillResult { directory })
+}
+
 /// 获取远程 Skill 包的标准检查结果
 ///
 /// 直接从远程仓库读取目标 Skill 目录，返回标准检查结果与原始 SKILL.md，
@@ -839,4 +996,57 @@ content"#,
 
         assert!(err.contains("already exists"));
     }
+
+    #[test]
+    fn test_import_local_skill_into_root_copies_directory_tree() {
+        let temp_dir = TempDir::new().unwrap();
+        let source_dir = temp_dir.path().join("source-skill");
+        let references_dir = source_dir.join("references");
+        let scripts_dir = source_dir.join("scripts");
+        let target_root = temp_dir.path().join("skills");
+
+        std::fs::create_dir_all(&references_dir).unwrap();
+        std::fs::create_dir_all(&scripts_dir).unwrap();
+        std::fs::write(
+            source_dir.join("SKILL.md"),
+            "---\nname: Source Skill\ndescription: import me\n---\n",
+        )
+        .unwrap();
+        std::fs::write(references_dir.join("guide.md"), "# guide").unwrap();
+        std::fs::write(scripts_dir.join("run.js"), "console.log('ok')").unwrap();
+
+        let imported_directory = import_local_skill_into_root(&target_root, &source_dir).unwrap();
+
+        assert_eq!(imported_directory, "source-skill");
+        assert!(target_root.join("source-skill").join("SKILL.md").is_file());
+        assert!(target_root
+            .join("source-skill")
+            .join("references")
+            .join("guide.md")
+            .is_file());
+        assert!(target_root
+            .join("source-skill")
+            .join("scripts")
+            .join("run.js")
+            .is_file());
+    }
+
+    #[test]
+    fn test_import_local_skill_into_root_rejects_existing_directory() {
+        let temp_dir = TempDir::new().unwrap();
+        let source_dir = temp_dir.path().join("source-skill");
+        let target_root = temp_dir.path().join("skills");
+        let existing_dir = target_root.join("source-skill");
+
+        std::fs::create_dir_all(&source_dir).unwrap();
+        std::fs::write(
+            source_dir.join("SKILL.md"),
+            "---\nname: Source Skill\ndescription: import me\n---\n",
+        )
+        .unwrap();
+        std::fs::create_dir_all(&existing_dir).unwrap();
+
+        let err = import_local_skill_into_root(&target_root, &source_dir).unwrap_err();
+        assert!(err.contains("already exists"));
+    }
 }
diff --git a/src-tauri/src/commands/webview_cmd.rs b/src-tauri/src/commands/webview_cmd.rs
index c449f6ff0..bb7005d9c 100644
--- a/src-tauri/src/commands/webview_cmd.rs
+++ b/src-tauri/src/commands/webview_cmd.rs
@@ -13,18 +13,24 @@ use aster::chrome_mcp::{
     get_chrome_mcp_tools, is_chrome_integration_configured, is_chrome_integration_supported,
 };
 use once_cell::sync::Lazy;
+use proxycast_browser_runtime::{
+    BrowserEvent, BrowserRuntimeManager, BrowserStreamMode, CdpSessionState, CdpTargetInfo,
+    EventBufferSnapshot, OpenSessionRequest,
+};
 use proxycast_server::chrome_bridge::{
     self, ChromeBridgeCommandRequest, ChromeBridgeCommandResult, ChromeBridgeStatusSnapshot,
 };
 use serde::{Deserialize, Serialize};
 use serde_json::{json, Value};
-use std::collections::{HashMap, VecDeque};
+use std::collections::{HashMap, HashSet, VecDeque};
+use std::ffi::OsString;
 use std::path::{Path, PathBuf};
 use std::process::{Child, Command};
 use std::sync::Arc;
-use std::time::Duration;
-use tauri::{AppHandle, Manager, WebviewUrl, WebviewWindowBuilder};
+use sysinfo::{Pid, Signal, System};
+use tauri::{AppHandle, Emitter, Manager, WebviewUrl, WebviewWindowBuilder};
 use tokio::sync::{Mutex, RwLock};
+use tokio::task::JoinHandle;
 
 /// Webview 面板信息
 #[derive(Debug, Clone, Serialize, Deserialize)]
@@ -119,11 +125,21 @@ pub struct ChromeProfileManagerWrapper(pub Arc<Mutex<ChromeProfileManagerState>>
 
 static SHARED_CHROME_PROFILE_MANAGER: Lazy<Arc<Mutex<ChromeProfileManagerState>>> =
     Lazy::new(|| Arc::new(Mutex::new(ChromeProfileManagerState::new())));
+static SHARED_BROWSER_RUNTIME: Lazy<Arc<BrowserRuntimeManager>> =
+    Lazy::new(|| Arc::new(BrowserRuntimeManager::new()));
+static BROWSER_STREAM_RELAY_TASKS: Lazy<Mutex<HashMap<String, JoinHandle<()>>>> =
+    Lazy::new(|| Mutex::new(HashMap::new()));
+
+const MANAGED_CHROME_RECOVERY_WAIT_MS: u64 = 800;
 
 pub fn shared_chrome_profile_manager() -> Arc<Mutex<ChromeProfileManagerState>> {
     SHARED_CHROME_PROFILE_MANAGER.clone()
 }
 
+pub fn shared_browser_runtime() -> Arc<BrowserRuntimeManager> {
+    SHARED_BROWSER_RUNTIME.clone()
+}
+
 /// 创建嵌入式 webview 的请求参数
 #[derive(Debug, Deserialize)]
 pub struct CreateWebviewRequest {
@@ -236,6 +252,8 @@ const ASTER_CHROME_TOOL_PREFIX: &str = "mcp__proxycast-browser__";
 const DEFAULT_BROWSER_ACTION_TIMEOUT_MS: u64 = 30_000;
 const MIN_BROWSER_ACTION_TIMEOUT_MS: u64 = 1_000;
 const MAX_BROWSER_ACTION_TIMEOUT_MS: u64 = 120_000;
+const MANAGED_CDP_READY_MAX_ATTEMPTS: usize = 60;
+const MANAGED_CDP_READY_RETRY_INTERVAL_MS: u64 = 250;
 
 #[derive(Debug, Clone, Serialize, Deserialize, PartialEq, Eq, Hash)]
 #[serde(rename_all = "snake_case")]
@@ -314,6 +332,10 @@ pub struct BrowserActionResult {
     pub success: bool,
     #[serde(skip_serializing_if = "Option::is_none")]
     pub backend: Option<BrowserBackendType>,
+    #[serde(skip_serializing_if = "Option::is_none")]
+    pub session_id: Option<String>,
+    #[serde(skip_serializing_if = "Option::is_none")]
+    pub target_id: Option<String>,
     pub action: String,
     pub request_id: String,
     #[serde(skip_serializing_if = "Option::is_none")]
@@ -323,15 +345,62 @@ pub struct BrowserActionResult {
     pub attempts: Vec<BrowserActionAttempt>,
 }
 
-#[derive(Debug, Clone, Deserialize, Serialize)]
-struct CdpTargetInfo {
-    id: String,
-    title: String,
-    url: String,
-    #[serde(rename = "type")]
-    target_type: String,
-    #[serde(rename = "webSocketDebuggerUrl")]
-    web_socket_debugger_url: Option<String>,
+#[derive(Debug, Clone, Deserialize)]
+pub struct OpenCdpSessionRequest {
+    pub profile_key: String,
+    #[serde(default)]
+    pub target_id: Option<String>,
+}
+
+#[derive(Debug, Clone, Deserialize)]
+pub struct ListCdpTargetsRequest {
+    #[serde(default)]
+    pub profile_key: Option<String>,
+}
+
+#[derive(Debug, Clone, Deserialize)]
+pub struct StartBrowserStreamRequest {
+    pub session_id: String,
+    pub mode: BrowserStreamMode,
+}
+
+#[derive(Debug, Clone, Deserialize)]
+pub struct StopBrowserStreamRequest {
+    pub session_id: String,
+}
+
+#[derive(Debug, Clone, Deserialize)]
+pub struct BrowserSessionStateRequest {
+    pub session_id: String,
+}
+
+#[derive(Debug, Clone, Deserialize)]
+pub struct UpdateBrowserSessionControlRequest {
+    pub session_id: String,
+    #[serde(default)]
+    pub human_reason: Option<String>,
+}
+
+#[derive(Debug, Clone, Deserialize)]
+pub struct BrowserEventBufferRequest {
+    pub session_id: String,
+    #[serde(default)]
+    pub cursor: Option<u64>,
+}
+
+#[derive(Debug, Clone, Serialize)]
+pub struct EventBufferSnapshotResponse {
+    pub events: Vec<BrowserEvent>,
+    pub next_cursor: u64,
+}
+
+impl From<EventBufferSnapshot> for EventBufferSnapshotResponse {
+    fn from(value: EventBufferSnapshot) -> Self {
+        Self {
+            events: value.events,
+            next_cursor: value.next_cursor,
+        }
+    }
 }
 
 static BROWSER_BACKEND_POLICY: Lazy<RwLock<BrowserBackendPolicy>> =
@@ -481,11 +550,10 @@ pub async fn create_webview_panel(
 }
 
 /// 使用独立 profile 启动外部 Chrome 窗口
-#[tauri::command]
-pub async fn open_chrome_profile_window(
+async fn open_chrome_profile_window_with_manager(
     app: AppHandle,
-    app_state: tauri::State<'_, AppState>,
-    state: tauri::State<'_, ChromeProfileManagerWrapper>,
+    app_state: AppState,
+    manager: Arc<Mutex<ChromeProfileManagerState>>,
     request: OpenChromeProfileRequest,
 ) -> Result<OpenChromeProfileResponse, String> {
     let profile_key = normalize_profile_key(&request.profile_key);
@@ -533,6 +601,27 @@ pub async fn open_chrome_profile_window(
     let remote_port = profile_remote_debugging_port(&profile_key);
     let devtools_http_url = format!("http://127.0.0.1:{remote_port}/json/version");
 
+    if wait_for_managed_cdp_ready(remote_port, None).await.is_ok() {
+        tracing::info!(
+            "[ChromeProfile] 复用未登记的 CDP 会话: profile_key={}, port={}",
+            profile_key,
+            remote_port
+        );
+        return Ok(OpenChromeProfileResponse {
+            success: true,
+            reused: true,
+            browser_source: Some(browser_source.clone()),
+            browser_path: Some(browser_path.clone()),
+            profile_dir: Some(profile_dir.to_string_lossy().to_string()),
+            remote_debugging_port: Some(remote_port),
+            pid: find_chrome_profile_process_pid(&profile_dir),
+            devtools_http_url: Some(devtools_http_url),
+            error: None,
+        });
+    }
+
+    let _ = cleanup_orphan_chrome_profile_processes(&profile_dir).await?;
+
     // 准备 Chrome 扩展（获取 server 配置并生成 auto_config.json）
     let extension_dir = {
         let state_guard = app_state.read().await;
@@ -546,8 +635,8 @@ pub async fn open_chrome_profile_window(
     };
 
     {
-        let mut manager = state.0.lock().await;
-        if let Some(existing) = manager.sessions.get_mut(&profile_key) {
+        let mut guard = manager.lock().await;
+        if let Some(existing) = guard.sessions.get_mut(&profile_key) {
             match existing.child.try_wait() {
                 Ok(None) => {
                     // reuse 场景：不重复加载扩展
@@ -576,7 +665,7 @@ pub async fn open_chrome_profile_window(
                     });
                 }
                 Ok(Some(_)) | Err(_) => {
-                    manager.sessions.remove(&profile_key);
+                    guard.sessions.remove(&profile_key);
                 }
             }
         }
@@ -602,8 +691,8 @@ pub async fn open_chrome_profile_window(
     );
 
     {
-        let mut manager = state.0.lock().await;
-        manager.sessions.insert(
+        let mut guard = manager.lock().await;
+        guard.sessions.insert(
             profile_key.clone(),
             ChromeProfileProcess {
                 profile_key,
@@ -631,30 +720,193 @@ pub async fn open_chrome_profile_window(
     })
 }
 
+async fn wait_for_managed_cdp_ready(
+    remote_debugging_port: u16,
+    requested_target_id: Option<&str>,
+) -> Result<(), String> {
+    let runtime = shared_browser_runtime();
+    let mut last_error =
+        format!("等待 CDP 端点就绪: http://127.0.0.1:{remote_debugging_port}/json/version");
+
+    for attempt in 0..MANAGED_CDP_READY_MAX_ATTEMPTS {
+        match runtime.list_targets(remote_debugging_port).await {
+            Ok(targets) => {
+                if let Some(target_id) = requested_target_id {
+                    if targets.iter().any(|target| target.id == target_id) {
+                        return Ok(());
+                    }
+                    last_error = if targets.is_empty() {
+                        format!("CDP 已连通，但尚未发现 target_id={target_id}")
+                    } else {
+                        format!("CDP 已连通，但未找到 target_id={target_id}")
+                    };
+                } else {
+                    return Ok(());
+                }
+            }
+            Err(error) => {
+                last_error = error;
+                if runtime.is_cdp_endpoint_alive(remote_debugging_port).await {
+                    last_error = format!("CDP 调试端点已响应，但标签页列表暂不可用: {last_error}");
+                }
+            }
+        }
+
+        if attempt + 1 < MANAGED_CDP_READY_MAX_ATTEMPTS {
+            tokio::time::sleep(tokio::time::Duration::from_millis(
+                MANAGED_CDP_READY_RETRY_INTERVAL_MS,
+            ))
+            .await;
+        }
+    }
+
+    Err(format!("等待 CDP 就绪超时: {last_error}"))
+}
+
+#[tauri::command]
+pub async fn open_chrome_profile_window(
+    app: AppHandle,
+    app_state: tauri::State<'_, AppState>,
+    state: tauri::State<'_, ChromeProfileManagerWrapper>,
+    request: OpenChromeProfileRequest,
+) -> Result<OpenChromeProfileResponse, String> {
+    open_chrome_profile_window_with_manager(
+        app,
+        app_state.inner().clone(),
+        state.0.clone(),
+        request,
+    )
+    .await
+}
+
+pub async fn open_chrome_profile_window_global(
+    app: AppHandle,
+    app_state: AppState,
+    request: OpenChromeProfileRequest,
+) -> Result<OpenChromeProfileResponse, String> {
+    open_chrome_profile_window_with_manager(
+        app,
+        app_state,
+        shared_chrome_profile_manager(),
+        request,
+    )
+    .await
+}
+
+async fn ensure_managed_chrome_profile_with_manager(
+    manager: Arc<Mutex<ChromeProfileManagerState>>,
+    profile_key: String,
+    url: Option<String>,
+) -> Result<ChromeProfileSessionInfo, String> {
+    let normalized_profile_key = normalize_profile_key(&profile_key);
+    if let Some(existing) = list_alive_profile_sessions(manager.clone())
+        .await
+        .into_iter()
+        .find(|session| session.profile_key == normalized_profile_key)
+    {
+        wait_for_managed_cdp_ready(existing.remote_debugging_port, None).await?;
+        return Ok(existing);
+    }
+
+    let launch_url = url.unwrap_or_else(|| "https://www.google.com".to_string());
+    let parsed_url = launch_url
+        .parse::<url::Url>()
+        .map_err(|error| format!("无效的 URL: {error}"))?;
+    let url_text = parsed_url.to_string();
+
+    let (browser_path, browser_source) = get_available_chrome_path().ok_or_else(|| {
+        "未找到可用的 Chrome/Chromium。请安装 Google Chrome 或运行: npx playwright install chromium"
+            .to_string()
+    })?;
+
+    let profile_dir = resolve_chrome_profile_data_dir_from_base(
+        &proxycast_core::app_paths::preferred_data_dir()
+            .map_err(|error| format!("获取应用数据目录失败: {error}"))?,
+        &normalized_profile_key,
+    );
+    std::fs::create_dir_all(&profile_dir)
+        .map_err(|error| format!("创建 Chrome profile 目录失败: {error}"))?;
+
+    let remote_port = profile_remote_debugging_port(&normalized_profile_key);
+    if wait_for_managed_cdp_ready(remote_port, None).await.is_ok() {
+        tracing::info!(
+            "[ChromeProfile] 复用未登记的受管会话: profile_key={}, port={}",
+            normalized_profile_key,
+            remote_port
+        );
+        return Ok(ChromeProfileSessionInfo {
+            profile_key: normalized_profile_key,
+            browser_source,
+            browser_path,
+            profile_dir: profile_dir.to_string_lossy().to_string(),
+            remote_debugging_port: remote_port,
+            pid: find_chrome_profile_process_pid(&profile_dir).unwrap_or_default(),
+            started_at: chrono::Utc::now().to_rfc3339(),
+            last_url: url_text,
+        });
+    }
+
+    let _ = cleanup_orphan_chrome_profile_processes(&profile_dir).await?;
+
+    let child = spawn_chrome_with_profile(
+        &browser_path,
+        &profile_dir,
+        remote_port,
+        &url_text,
+        true,
+        None,
+    )?;
+    let pid = child.id();
+
+    let session = ChromeProfileSessionInfo {
+        profile_key: normalized_profile_key.clone(),
+        browser_source: browser_source.clone(),
+        browser_path: browser_path.clone(),
+        profile_dir: profile_dir.to_string_lossy().to_string(),
+        remote_debugging_port: remote_port,
+        pid,
+        started_at: chrono::Utc::now().to_rfc3339(),
+        last_url: url_text,
+    };
+
+    {
+        let mut guard = manager.lock().await;
+        guard.sessions.insert(
+            normalized_profile_key.clone(),
+            ChromeProfileProcess {
+                profile_key: normalized_profile_key,
+                browser_source,
+                browser_path,
+                profile_dir: session.profile_dir.clone(),
+                remote_debugging_port: remote_port,
+                started_at: session.started_at.clone(),
+                last_url: session.last_url.clone(),
+                child,
+            },
+        );
+    }
+
+    wait_for_managed_cdp_ready(remote_port, None).await?;
+    Ok(session)
+}
+
+pub async fn ensure_managed_chrome_profile_global(
+    profile_key: String,
+    url: Option<String>,
+) -> Result<ChromeProfileSessionInfo, String> {
+    ensure_managed_chrome_profile_with_manager(shared_chrome_profile_manager(), profile_key, url)
+        .await
+}
+
 #[tauri::command]
 pub async fn get_chrome_profile_sessions(
     state: tauri::State<'_, ChromeProfileManagerWrapper>,
 ) -> Result<Vec<ChromeProfileSessionInfo>, String> {
-    let mut manager = state.0.lock().await;
-    let mut stale_keys = Vec::new();
-    let mut sessions = Vec::new();
+    Ok(list_alive_profile_sessions(state.0.clone()).await)
+}
 
-    for (key, process) in &mut manager.sessions {
-        match process.child.try_wait() {
-            Ok(None) => sessions.push(process.as_info()),
-            Ok(Some(_status)) => stale_keys.push(key.clone()),
-            Err(e) => {
-                tracing::warn!("[ChromeProfile] 读取进程状态失败: key={}, err={}", key, e);
-                stale_keys.push(key.clone());
-            }
-        }
-    }
-
-    for key in stale_keys {
-        manager.sessions.remove(&key);
-    }
-
-    Ok(sessions)
+pub async fn get_chrome_profile_sessions_global() -> Result<Vec<ChromeProfileSessionInfo>, String> {
+    Ok(list_alive_profile_sessions(shared_chrome_profile_manager()).await)
 }
 
 #[tauri::command]
@@ -662,33 +914,69 @@ pub async fn close_chrome_profile_session(
     state: tauri::State<'_, ChromeProfileManagerWrapper>,
     profile_key: String,
 ) -> Result<bool, String> {
-    let key = normalize_profile_key(&profile_key);
-    let mut manager = state.0.lock().await;
+    close_chrome_profile_session_with_manager(state.0.clone(), profile_key).await
+}
 
-    if let Some(mut process) = manager.sessions.remove(&key) {
+pub async fn close_chrome_profile_session_global(profile_key: String) -> Result<bool, String> {
+    close_chrome_profile_session_with_manager(shared_chrome_profile_manager(), profile_key).await
+}
+
+async fn close_chrome_profile_session_with_manager(
+    manager: Arc<Mutex<ChromeProfileManagerState>>,
+    profile_key: String,
+) -> Result<bool, String> {
+    let key = normalize_profile_key(&profile_key);
+    let mut manager = manager.lock().await;
+
+    let closed = if let Some(mut process) = manager.sessions.remove(&key) {
         match process.child.try_wait() {
-            Ok(Some(_)) => Ok(true),
+            Ok(Some(_)) => true,
             Ok(None) => {
                 if let Err(e) = process.child.kill() {
                     tracing::warn!("[ChromeProfile] 结束进程失败: key={}, err={}", key, e);
                 }
                 let _ = process.child.wait();
-                Ok(true)
+                true
             }
             Err(e) => {
                 tracing::warn!("[ChromeProfile] 读取进程状态失败: key={}, err={}", key, e);
-                Ok(true)
+                true
             }
         }
     } else {
-        Ok(false)
+        false
+    };
+    drop(manager);
+
+    if let Some(cdp_session) = shared_browser_runtime()
+        .find_session_by_profile_key(&key)
+        .await
+    {
+        let _ = shared_browser_runtime()
+            .close_session(&cdp_session.session_id)
+            .await;
+        cleanup_browser_stream_relay(&cdp_session.session_id).await;
     }
+
+    Ok(closed)
 }
 
 /// 获取 ChromeBridge 连接端点信息
 #[tauri::command]
 pub async fn get_chrome_bridge_endpoint_info(
     app_state: tauri::State<'_, AppState>,
+) -> Result<ChromeBridgeEndpointInfo, String> {
+    get_chrome_bridge_endpoint_info_with_state(app_state.inner().clone()).await
+}
+
+pub async fn get_chrome_bridge_endpoint_info_global(
+    app_state: AppState,
+) -> Result<ChromeBridgeEndpointInfo, String> {
+    get_chrome_bridge_endpoint_info_with_state(app_state).await
+}
+
+async fn get_chrome_bridge_endpoint_info_with_state(
+    app_state: AppState,
 ) -> Result<ChromeBridgeEndpointInfo, String> {
     let state = app_state.read().await;
     let status = state.status();
@@ -714,6 +1002,10 @@ pub async fn get_chrome_bridge_status() -> Result<ChromeBridgeStatusSnapshot, St
         .await)
 }
 
+pub async fn get_chrome_bridge_status_global() -> Result<ChromeBridgeStatusSnapshot, String> {
+    get_chrome_bridge_status().await
+}
+
 /// 通过 ChromeBridge 执行命令（用于设置页测试）
 #[tauri::command]
 pub async fn chrome_bridge_execute_command(
@@ -730,6 +1022,10 @@ pub async fn get_browser_backend_policy() -> Result<BrowserBackendPolicy, String
     Ok(BROWSER_BACKEND_POLICY.read().await.clone())
 }
 
+pub async fn get_browser_backend_policy_global() -> Result<BrowserBackendPolicy, String> {
+    get_browser_backend_policy().await
+}
+
 /// 设置浏览器后端策略
 #[tauri::command]
 pub async fn set_browser_backend_policy(
@@ -743,6 +1039,12 @@ pub async fn set_browser_backend_policy(
     Ok(normalized)
 }
 
+pub async fn set_browser_backend_policy_global(
+    policy: BrowserBackendPolicy,
+) -> Result<BrowserBackendPolicy, String> {
+    set_browser_backend_policy(policy).await
+}
+
 /// 获取浏览器后端状态快照
 #[tauri::command]
 pub async fn get_browser_backends_status(
@@ -754,8 +1056,12 @@ pub async fn get_browser_backends_status(
         .await;
     let sessions = list_alive_profile_sessions(state.0.clone()).await;
     let mut cdp_alive = 0usize;
+    let runtime = shared_browser_runtime();
     for session in &sessions {
-        if is_cdp_endpoint_alive(session.remote_debugging_port).await {
+        if runtime
+            .is_cdp_endpoint_alive(session.remote_debugging_port)
+            .await
+        {
             cdp_alive += 1;
         }
     }
@@ -809,9 +1115,257 @@ pub async fn get_browser_backends_status(
     })
 }
 
+pub async fn get_browser_backends_status_global() -> Result<BrowserBackendsStatusSnapshot, String> {
+    let policy = BROWSER_BACKEND_POLICY.read().await.clone();
+    let bridge_status = chrome_bridge::chrome_bridge_hub()
+        .get_status_snapshot()
+        .await;
+    let sessions = list_alive_profile_sessions(shared_chrome_profile_manager()).await;
+    let mut cdp_alive = 0usize;
+    let runtime = shared_browser_runtime();
+    for session in &sessions {
+        if runtime
+            .is_cdp_endpoint_alive(session.remote_debugging_port)
+            .await
+        {
+            cdp_alive += 1;
+        }
+    }
+
+    let extension_available = bridge_status.observer_count > 0;
+    let cdp_available = cdp_alive > 0;
+    let aster_supported = is_chrome_integration_supported();
+    let aster_configured = is_chrome_integration_configured().await;
+    let aster_available = extension_available || cdp_available || aster_configured;
+
+    Ok(BrowserBackendsStatusSnapshot {
+        policy,
+        bridge_observer_count: bridge_status.observer_count,
+        bridge_control_count: bridge_status.control_count,
+        running_profile_count: sessions.len(),
+        cdp_alive_profile_count: cdp_alive,
+        aster_native_host_supported: aster_supported,
+        aster_native_host_configured: aster_configured,
+        backends: vec![
+            BrowserBackendStatusItem {
+                backend: BrowserBackendType::AsterCompat,
+                available: aster_available,
+                reason: if aster_available {
+                    None
+                } else {
+                    Some("aster 兼容层当前无可用下游连接（扩展/CDP/native-host）".to_string())
+                },
+                capabilities: aster_backend_capabilities(),
+            },
+            BrowserBackendStatusItem {
+                backend: BrowserBackendType::ProxycastExtensionBridge,
+                available: extension_available,
+                reason: if extension_available {
+                    None
+                } else {
+                    Some("未检测到扩展 observer 连接".to_string())
+                },
+                capabilities: extension_backend_capabilities(),
+            },
+            BrowserBackendStatusItem {
+                backend: BrowserBackendType::CdpDirect,
+                available: cdp_available,
+                reason: if cdp_available {
+                    None
+                } else {
+                    Some("未检测到可连接的 CDP 调试端口".to_string())
+                },
+                capabilities: cdp_backend_capabilities(),
+            },
+        ],
+    })
+}
+
+#[tauri::command]
+pub async fn list_cdp_targets(
+    state: tauri::State<'_, ChromeProfileManagerWrapper>,
+    request: ListCdpTargetsRequest,
+) -> Result<Vec<CdpTargetInfo>, String> {
+    let session = select_profile_session(state.0.clone(), request.profile_key).await?;
+    shared_browser_runtime()
+        .list_targets(session.remote_debugging_port)
+        .await
+}
+
+pub async fn list_cdp_targets_global(
+    request: ListCdpTargetsRequest,
+) -> Result<Vec<CdpTargetInfo>, String> {
+    let session =
+        select_profile_session(shared_chrome_profile_manager(), request.profile_key).await?;
+    shared_browser_runtime()
+        .list_targets(session.remote_debugging_port)
+        .await
+}
+
+#[tauri::command]
+pub async fn open_cdp_session(
+    state: tauri::State<'_, ChromeProfileManagerWrapper>,
+    request: OpenCdpSessionRequest,
+) -> Result<CdpSessionState, String> {
+    let session =
+        select_profile_session(state.0.clone(), Some(request.profile_key.clone())).await?;
+    shared_browser_runtime()
+        .open_session(OpenSessionRequest {
+            profile_key: session.profile_key,
+            remote_debugging_port: session.remote_debugging_port,
+            target_id: request.target_id,
+        })
+        .await
+}
+
+pub async fn open_cdp_session_global(
+    request: OpenCdpSessionRequest,
+) -> Result<CdpSessionState, String> {
+    let session = select_profile_session(
+        shared_chrome_profile_manager(),
+        Some(request.profile_key.clone()),
+    )
+    .await?;
+    shared_browser_runtime()
+        .open_session(OpenSessionRequest {
+            profile_key: session.profile_key,
+            remote_debugging_port: session.remote_debugging_port,
+            target_id: request.target_id,
+        })
+        .await
+}
+
+#[tauri::command]
+pub async fn close_cdp_session(request: BrowserSessionStateRequest) -> Result<bool, String> {
+    shared_browser_runtime()
+        .close_session(&request.session_id)
+        .await?;
+    cleanup_browser_stream_relay(&request.session_id).await;
+    Ok(true)
+}
+
+pub async fn close_cdp_session_global(request: BrowserSessionStateRequest) -> Result<bool, String> {
+    close_cdp_session(request).await
+}
+
+#[tauri::command]
+pub async fn start_browser_stream(
+    app: AppHandle,
+    request: StartBrowserStreamRequest,
+) -> Result<CdpSessionState, String> {
+    let runtime = shared_browser_runtime();
+    let state = runtime
+        .start_stream(&request.session_id, request.mode)
+        .await?;
+    let receiver = runtime.subscribe(&request.session_id).await?;
+    register_browser_stream_relay(app, request.session_id, request.mode, receiver).await;
+    Ok(state)
+}
+
+pub async fn start_browser_stream_global(
+    app: AppHandle,
+    request: StartBrowserStreamRequest,
+) -> Result<CdpSessionState, String> {
+    start_browser_stream(app, request).await
+}
+
+#[tauri::command]
+pub async fn stop_browser_stream(
+    request: StopBrowserStreamRequest,
+) -> Result<CdpSessionState, String> {
+    let state = shared_browser_runtime()
+        .stop_stream(&request.session_id)
+        .await?;
+    cleanup_browser_stream_relay(&request.session_id).await;
+    Ok(state)
+}
+
+pub async fn stop_browser_stream_global(
+    request: StopBrowserStreamRequest,
+) -> Result<CdpSessionState, String> {
+    stop_browser_stream(request).await
+}
+
+#[tauri::command]
+pub async fn get_browser_session_state(
+    request: BrowserSessionStateRequest,
+) -> Result<CdpSessionState, String> {
+    shared_browser_runtime()
+        .get_session_state(&request.session_id)
+        .await
+}
+
+pub async fn get_browser_session_state_global(
+    request: BrowserSessionStateRequest,
+) -> Result<CdpSessionState, String> {
+    get_browser_session_state(request).await
+}
+
+#[tauri::command]
+pub async fn take_over_browser_session(
+    request: UpdateBrowserSessionControlRequest,
+) -> Result<CdpSessionState, String> {
+    shared_browser_runtime()
+        .take_over_session(&request.session_id, request.human_reason)
+        .await
+}
+
+pub async fn take_over_browser_session_global(
+    request: UpdateBrowserSessionControlRequest,
+) -> Result<CdpSessionState, String> {
+    take_over_browser_session(request).await
+}
+
+#[tauri::command]
+pub async fn release_browser_session(
+    request: UpdateBrowserSessionControlRequest,
+) -> Result<CdpSessionState, String> {
+    shared_browser_runtime()
+        .release_session(&request.session_id, request.human_reason)
+        .await
+}
+
+pub async fn release_browser_session_global(
+    request: UpdateBrowserSessionControlRequest,
+) -> Result<CdpSessionState, String> {
+    release_browser_session(request).await
+}
+
+#[tauri::command]
+pub async fn resume_browser_session(
+    request: UpdateBrowserSessionControlRequest,
+) -> Result<CdpSessionState, String> {
+    shared_browser_runtime()
+        .resume_session(&request.session_id, request.human_reason)
+        .await
+}
+
+pub async fn resume_browser_session_global(
+    request: UpdateBrowserSessionControlRequest,
+) -> Result<CdpSessionState, String> {
+    resume_browser_session(request).await
+}
+
+#[tauri::command]
+pub async fn get_browser_event_buffer(
+    request: BrowserEventBufferRequest,
+) -> Result<EventBufferSnapshotResponse, String> {
+    let snapshot = shared_browser_runtime()
+        .get_event_buffer(&request.session_id, request.cursor)
+        .await?;
+    Ok(EventBufferSnapshotResponse::from(snapshot))
+}
+
+pub async fn get_browser_event_buffer_global(
+    request: BrowserEventBufferRequest,
+) -> Result<EventBufferSnapshotResponse, String> {
+    get_browser_event_buffer(request).await
+}
+
 /// 通过统一编排层执行浏览器动作
 #[tauri::command]
 pub async fn browser_execute_action(
+    _app: AppHandle,
     state: tauri::State<'_, ChromeProfileManagerWrapper>,
     request: BrowserActionRequest,
 ) -> Result<BrowserActionResult, String> {
@@ -833,6 +1387,12 @@ pub async fn get_browser_action_audit_logs(
     Ok(result)
 }
 
+pub async fn get_browser_action_audit_logs_global(
+    limit: Option<usize>,
+) -> Result<Vec<BrowserActionAuditRecord>, String> {
+    get_browser_action_audit_logs(limit).await
+}
+
 /// 使用指定 profile manager 执行动作（供非 Tauri 命令入口复用）
 pub async fn browser_execute_action_with_manager(
     manager: Arc<Mutex<ChromeProfileManagerState>>,
@@ -862,6 +1422,10 @@ pub async fn browser_execute_action_with_manager(
         .await
         {
             Ok(data) => {
+                let enriched_data =
+                    enrich_browser_action_value(data, manager.clone(), profile_key.as_deref())
+                        .await;
+                let (session_id, target_id) = extract_browser_session_and_target(&enriched_data);
                 attempts.push(BrowserActionAttempt {
                     backend: backend.clone(),
                     success: true,
@@ -870,9 +1434,11 @@ pub async fn browser_execute_action_with_manager(
                 let result = BrowserActionResult {
                     success: true,
                     backend: Some(backend.clone()),
+                    session_id,
+                    target_id,
                     action,
                     request_id: request_id.clone(),
-                    data: Some(data),
+                    data: Some(enriched_data),
                     error: None,
                     attempts: attempts.clone(),
                 };
@@ -900,6 +1466,8 @@ pub async fn browser_execute_action_with_manager(
                     let result = BrowserActionResult {
                         success: false,
                         backend: None,
+                        session_id: None,
+                        target_id: None,
                         action: action.clone(),
                         request_id: request_id.clone(),
                         data: None,
@@ -927,6 +1495,8 @@ pub async fn browser_execute_action_with_manager(
     let result = BrowserActionResult {
         success: false,
         backend: None,
+        session_id: None,
+        target_id: None,
         action: action.clone(),
         request_id: request_id.clone(),
         data: None,
@@ -1022,6 +1592,173 @@ fn normalize_action_timeout(timeout_ms: Option<u64>) -> u64 {
         .clamp(MIN_BROWSER_ACTION_TIMEOUT_MS, MAX_BROWSER_ACTION_TIMEOUT_MS)
 }
 
+fn extract_browser_session_and_target(data: &Value) -> (Option<String>, Option<String>) {
+    let session_id = read_browser_session_string(data, &["session_id", "sessionId"])
+        .or_else(|| {
+            read_nested_browser_session_string(
+                data,
+                "browser_session",
+                &["session_id", "sessionId"],
+            )
+        })
+        .or_else(|| {
+            read_nested_browser_session_string(data, "session", &["session_id", "sessionId"])
+        });
+    let target_id = read_browser_session_string(data, &["target_id", "targetId"])
+        .or_else(|| {
+            read_nested_browser_session_string(data, "browser_session", &["target_id", "targetId"])
+        })
+        .or_else(|| read_nested_browser_session_string(data, "session", &["target_id", "targetId"]))
+        .or_else(|| {
+            data.get("tab")
+                .and_then(|tab| tab.get("id"))
+                .and_then(Value::as_str)
+                .map(ToString::to_string)
+        });
+    (session_id, target_id)
+}
+
+fn read_browser_session_string(data: &Value, keys: &[&str]) -> Option<String> {
+    keys.iter().find_map(|key| {
+        data.get(*key)
+            .and_then(Value::as_str)
+            .map(str::trim)
+            .filter(|value| !value.is_empty())
+            .map(ToString::to_string)
+    })
+}
+
+fn read_nested_browser_session_string(data: &Value, parent: &str, keys: &[&str]) -> Option<String> {
+    let nested = data.get(parent)?;
+    read_browser_session_string(nested, keys)
+}
+
+fn browser_session_value_from_state(state: &CdpSessionState) -> Value {
+    json!({
+        "session_id": state.session_id.clone(),
+        "profile_key": state.profile_key.clone(),
+        "target_id": state.target_id.clone(),
+        "target_title": state.target_title.clone(),
+        "target_url": state.target_url.clone(),
+        "remote_debugging_port": state.remote_debugging_port,
+        "ws_debugger_url": state.ws_debugger_url.clone(),
+        "devtools_frontend_url": state.devtools_frontend_url.clone(),
+        "stream_mode": state.stream_mode,
+        "transport_kind": state.transport_kind,
+        "lifecycle_state": state.lifecycle_state,
+        "control_mode": state.control_mode,
+        "human_reason": state.human_reason.clone(),
+    })
+}
+
+async fn enrich_browser_action_value(
+    data: Value,
+    manager: Arc<Mutex<ChromeProfileManagerState>>,
+    fallback_profile_key: Option<&str>,
+) -> Value {
+    let mut object = match data {
+        Value::Object(object) => object,
+        other => {
+            let mut object = serde_json::Map::new();
+            object.insert("result".to_string(), other);
+            object
+        }
+    };
+
+    let snapshot = Value::Object(object.clone());
+    let profile_key = read_browser_session_string(&snapshot, &["profile_key", "profileKey"])
+        .or_else(|| {
+            read_nested_browser_session_string(
+                &snapshot,
+                "browser_session",
+                &["profile_key", "profileKey"],
+            )
+        })
+        .or_else(|| fallback_profile_key.map(ToString::to_string));
+    let session_id =
+        read_browser_session_string(&snapshot, &["session_id", "sessionId"]).or_else(|| {
+            read_nested_browser_session_string(
+                &snapshot,
+                "browser_session",
+                &["session_id", "sessionId"],
+            )
+        });
+    let target_id = read_browser_session_string(&snapshot, &["target_id", "targetId"])
+        .or_else(|| {
+            read_nested_browser_session_string(
+                &snapshot,
+                "browser_session",
+                &["target_id", "targetId"],
+            )
+        })
+        .or_else(|| {
+            snapshot
+                .get("tab")
+                .and_then(|tab| tab.get("id"))
+                .and_then(Value::as_str)
+                .map(ToString::to_string)
+        });
+
+    let runtime = shared_browser_runtime();
+    let mut cdp_session = if let Some(existing_session_id) = session_id.as_deref() {
+        runtime.get_session_state(existing_session_id).await.ok()
+    } else {
+        None
+    };
+
+    if cdp_session.is_none() {
+        if let Some(ref resolved_profile_key) = profile_key {
+            if let Ok(profile_session) =
+                select_profile_session(manager, Some(resolved_profile_key.clone())).await
+            {
+                if runtime
+                    .is_cdp_endpoint_alive(profile_session.remote_debugging_port)
+                    .await
+                {
+                    cdp_session = ensure_cdp_runtime_session(
+                        &runtime,
+                        &profile_session,
+                        target_id.as_deref(),
+                    )
+                    .await
+                    .ok();
+                }
+            }
+        }
+    }
+
+    if let Some(state) = cdp_session {
+        object.insert(
+            "session_id".to_string(),
+            Value::String(state.session_id.clone()),
+        );
+        object.insert(
+            "target_id".to_string(),
+            Value::String(state.target_id.clone()),
+        );
+        object.insert(
+            "profile_key".to_string(),
+            Value::String(state.profile_key.clone()),
+        );
+        object.insert(
+            "browser_session".to_string(),
+            browser_session_value_from_state(&state),
+        );
+    } else {
+        if let Some(value) = session_id {
+            object.insert("session_id".to_string(), Value::String(value));
+        }
+        if let Some(value) = target_id {
+            object.insert("target_id".to_string(), Value::String(value));
+        }
+        if let Some(value) = profile_key {
+            object.insert("profile_key".to_string(), Value::String(value));
+        }
+    }
+
+    Value::Object(object)
+}
+
 fn aster_backend_capabilities() -> Vec<String> {
     get_chrome_mcp_tools()
         .into_iter()
@@ -1057,6 +1794,16 @@ fn cdp_backend_capabilities() -> Vec<String> {
         "navigate".to_string(),
         "read_page".to_string(),
         "get_page_text".to_string(),
+        "click".to_string(),
+        "type".to_string(),
+        "scroll".to_string(),
+        "scroll_page".to_string(),
+        "refresh_page".to_string(),
+        "go_back".to_string(),
+        "go_forward".to_string(),
+        "get_page_info".to_string(),
+        "read_console_messages".to_string(),
+        "read_network_requests".to_string(),
     ]
 }
 
@@ -1351,83 +2098,88 @@ async fn execute_cdp_backend_action(
     profile_key: Option<String>,
     manager: Arc<Mutex<ChromeProfileManagerState>>,
 ) -> Result<Value, String> {
-    let session = select_profile_session(manager, profile_key).await?;
-    if !is_cdp_endpoint_alive(session.remote_debugging_port).await {
+    let profile_session = select_profile_session(manager, profile_key).await?;
+    let runtime = shared_browser_runtime();
+    if !runtime
+        .is_cdp_endpoint_alive(profile_session.remote_debugging_port)
+        .await
+    {
         return Err(format!(
             "CDP 调试端口不可用: 127.0.0.1:{}",
-            session.remote_debugging_port
+            profile_session.remote_debugging_port
         ));
     }
+    let requested_target_id = action_arg_string(&args, &["target_id", "tab_id"]);
 
     match action {
         "tabs_context_mcp" => {
-            let tabs = fetch_cdp_targets(session.remote_debugging_port).await?;
+            let tabs = runtime
+                .list_targets(profile_session.remote_debugging_port)
+                .await?;
             Ok(json!({
-                "profile_key": session.profile_key,
-                "remote_debugging_port": session.remote_debugging_port,
+                "profile_key": profile_session.profile_key,
+                "remote_debugging_port": profile_session.remote_debugging_port,
                 "tabs": tabs,
             }))
         }
-        "navigate" => {
-            let nav_action =
-                action_arg_string(&args, &["action"]).unwrap_or_else(|| "goto".to_string());
-            if nav_action != "goto" {
-                return Err(format!(
-                    "CDP 直连初版仅支持 navigate.action=goto，收到: {nav_action}"
-                ));
-            }
-            let url = action_arg_string(&args, &["url"])
-                .ok_or_else(|| "navigate 需要提供 url".to_string())?;
-            let endpoint = format!(
-                "http://127.0.0.1:{}/json/new?{}",
-                session.remote_debugging_port,
-                urlencoding::encode(&url)
-            );
-            let client = reqwest::Client::builder()
-                .timeout(Duration::from_secs(5))
-                .build()
-                .map_err(|e| format!("创建 HTTP 客户端失败: {e}"))?;
-            let response = match client.put(&endpoint).send().await {
-                Ok(resp) => resp,
-                Err(_) => client
-                    .get(&endpoint)
-                    .send()
-                    .await
-                    .map_err(|e| format!("CDP navigate 调用失败: {e}"))?,
+        "tabs_create_mcp"
+        | "navigate"
+        | "click"
+        | "type"
+        | "form_input"
+        | "scroll"
+        | "scroll_page"
+        | "refresh_page"
+        | "go_back"
+        | "go_forward"
+        | "get_page_info"
+        | "read_page"
+        | "get_page_text"
+        | "read_console_messages"
+        | "read_network_requests" => {
+            let cdp_session = ensure_cdp_runtime_session(
+                &runtime,
+                &profile_session,
+                requested_target_id.as_deref(),
+            )
+            .await?;
+            let (effective_action, effective_args) = if action == "tabs_create_mcp" {
+                let mut next_args = args;
+                if action_arg_string(&next_args, &["url"]).is_none() {
+                    next_args["url"] = Value::String("about:blank".to_string());
+                }
+                next_args["action"] = Value::String("goto".to_string());
+                ("navigate", next_args)
+            } else {
+                (action, args)
             };
-            if !response.status().is_success() {
-                return Err(format!("CDP navigate 返回失败状态: {}", response.status()));
+            let result = runtime
+                .execute_action(&cdp_session.session_id, effective_action, effective_args)
+                .await?;
+            match result {
+                Value::Object(mut object) => {
+                    object.insert(
+                        "session_id".to_string(),
+                        Value::String(cdp_session.session_id),
+                    );
+                    object.insert(
+                        "target_id".to_string(),
+                        Value::String(cdp_session.target_id),
+                    );
+                    object.insert(
+                        "profile_key".to_string(),
+                        Value::String(cdp_session.profile_key),
+                    );
+                    Ok(Value::Object(object))
+                }
+                other => Ok(json!({
+                    "session_id": cdp_session.session_id,
+                    "target_id": cdp_session.target_id,
+                    "profile_key": cdp_session.profile_key,
+                    "result": other,
+                })),
             }
-            let text = response.text().await.unwrap_or_default();
-            Ok(json!({
-                "profile_key": session.profile_key,
-                "remote_debugging_port": session.remote_debugging_port,
-                "url": url,
-                "response": text,
-            }))
         }
-        "read_page" | "get_page_text" => {
-            let tabs = fetch_cdp_targets(session.remote_debugging_port).await?;
-            let current = tabs
-                .iter()
-                .find(|tab| tab.target_type == "page")
-                .or_else(|| tabs.first())
-                .cloned()
-                .ok_or_else(|| "CDP 未返回可用标签页".to_string())?;
-            let markdown = format!(
-                "# {}\nURL: {}\n\nCDP 直连初版仅返回标签页元信息，完整 DOM/控制能力将后续补齐。",
-                current.title, current.url
-            );
-            Ok(json!({
-                "profile_key": session.profile_key,
-                "tab": current,
-                "markdown": markdown,
-            }))
-        }
-        "read_console_messages" | "read_network_requests" => Err(format!(
-            "CDP 直连初版暂不支持 {}，需要建立 WebSocket DevTools 会话后补齐",
-            action
-        )),
         _ => Err(format!("CDP 直连不支持动作: {action}")),
     }
 }
@@ -1451,6 +2203,115 @@ fn bridge_result_to_value(result: ChromeBridgeCommandResult) -> Value {
     })
 }
 
+async fn register_browser_stream_relay(
+    app: AppHandle,
+    session_id: String,
+    mode: BrowserStreamMode,
+    mut receiver: tokio::sync::broadcast::Receiver<BrowserEvent>,
+) {
+    cleanup_browser_stream_relay(&session_id).await;
+    let relay_key = session_id.clone();
+    let task = tokio::spawn(async move {
+        loop {
+            match receiver.recv().await {
+                Ok(event) => {
+                    if mode == BrowserStreamMode::Frames && !event.is_frame_related() {
+                        continue;
+                    }
+                    if mode == BrowserStreamMode::Events && event.is_frame_related() {
+                        continue;
+                    }
+                    if let Err(error) = app.emit("browser-event", &event) {
+                        tracing::warn!("[BrowserRuntime] 推送浏览器事件失败: {}", error);
+                        break;
+                    }
+                }
+                Err(tokio::sync::broadcast::error::RecvError::Closed) => break,
+                Err(tokio::sync::broadcast::error::RecvError::Lagged(_)) => continue,
+            }
+        }
+    });
+    BROWSER_STREAM_RELAY_TASKS
+        .lock()
+        .await
+        .insert(relay_key, task);
+}
+
+async fn cleanup_browser_stream_relay(session_id: &str) {
+    if let Some(task) = BROWSER_STREAM_RELAY_TASKS.lock().await.remove(session_id) {
+        task.abort();
+    }
+}
+
+async fn discover_unmanaged_profile_session(
+    profile_key: &str,
+) -> Result<Option<ChromeProfileSessionInfo>, String> {
+    let normalized_profile_key = normalize_profile_key(profile_key);
+    let base_dir = proxycast_core::app_paths::preferred_data_dir()
+        .map_err(|error| format!("获取应用数据目录失败: {error}"))?;
+    let profile_dir = resolve_chrome_profile_data_dir_from_base(&base_dir, &normalized_profile_key);
+    if !profile_dir.exists() {
+        return Ok(None);
+    }
+
+    let remote_debugging_port = profile_remote_debugging_port(&normalized_profile_key);
+    let runtime = shared_browser_runtime();
+    let targets = match runtime.list_targets(remote_debugging_port).await {
+        Ok(value) => value,
+        Err(_) => return Ok(None),
+    };
+    let pid = find_chrome_profile_process_pid(&profile_dir).unwrap_or_default();
+
+    let (browser_path, browser_source) =
+        get_available_chrome_path().unwrap_or_else(|| (String::new(), "system".to_string()));
+    let last_url = targets
+        .iter()
+        .find(|target| target.target_type == "page" && !target.url.trim().is_empty())
+        .map(|target| target.url.trim().to_string())
+        .unwrap_or_else(|| "about:blank".to_string());
+
+    Ok(Some(ChromeProfileSessionInfo {
+        profile_key: normalized_profile_key,
+        browser_source,
+        browser_path,
+        profile_dir: profile_dir.to_string_lossy().to_string(),
+        remote_debugging_port,
+        pid,
+        started_at: chrono::Utc::now().to_rfc3339(),
+        last_url,
+    }))
+}
+
+async fn discover_unmanaged_profile_sessions() -> Result<Vec<ChromeProfileSessionInfo>, String> {
+    let base_dir = proxycast_core::app_paths::preferred_data_dir()
+        .map_err(|error| format!("获取应用数据目录失败: {error}"))?;
+    let chrome_profiles_dir = base_dir.join("chrome_profiles");
+    if !chrome_profiles_dir.exists() {
+        return Ok(Vec::new());
+    }
+
+    let mut discovered = Vec::new();
+    let entries = std::fs::read_dir(&chrome_profiles_dir)
+        .map_err(|error| format!("读取 Chrome profile 目录失败: {error}"))?;
+    for entry in entries {
+        let entry = entry.map_err(|error| format!("读取 Chrome profile 条目失败: {error}"))?;
+        let file_type = entry
+            .file_type()
+            .map_err(|error| format!("读取 Chrome profile 类型失败: {error}"))?;
+        if !file_type.is_dir() {
+            continue;
+        }
+
+        let profile_key = entry.file_name().to_string_lossy().to_string();
+        if let Some(session) = discover_unmanaged_profile_session(&profile_key).await? {
+            discovered.push(session);
+        }
+    }
+
+    discovered.sort_by(|left, right| left.profile_key.cmp(&right.profile_key));
+    Ok(discovered)
+}
+
 async fn list_alive_profile_sessions(
     manager: Arc<Mutex<ChromeProfileManagerState>>,
 ) -> Vec<ChromeProfileSessionInfo> {
@@ -1470,6 +2331,25 @@ async fn list_alive_profile_sessions(
         guard.sessions.remove(&key);
     }
 
+    let managed_profile_keys = sessions
+        .iter()
+        .map(|session| session.profile_key.clone())
+        .collect::<HashSet<_>>();
+    drop(guard);
+
+    let unmanaged_sessions = match discover_unmanaged_profile_sessions().await {
+        Ok(items) => items,
+        Err(error) => {
+            tracing::warn!("[ChromeProfile] 发现未受管会话失败: {}", error);
+            Vec::new()
+        }
+    };
+
+    sessions.extend(
+        unmanaged_sessions
+            .into_iter()
+            .filter(|session| !managed_profile_keys.contains(&session.profile_key)),
+    );
     sessions
 }
 
@@ -1496,39 +2376,29 @@ async fn select_profile_session(
         .ok_or_else(|| "没有可用的 Chrome profile 会话".to_string())
 }
 
-async fn fetch_cdp_targets(port: u16) -> Result<Vec<CdpTargetInfo>, String> {
-    let endpoint = format!("http://127.0.0.1:{port}/json/list");
-    let client = reqwest::Client::builder()
-        .timeout(Duration::from_secs(5))
-        .build()
-        .map_err(|e| format!("创建 HTTP 客户端失败: {e}"))?;
-    let response = client
-        .get(&endpoint)
-        .send()
+async fn ensure_cdp_runtime_session(
+    runtime: &BrowserRuntimeManager,
+    profile_session: &ChromeProfileSessionInfo,
+    target_id: Option<&str>,
+) -> Result<CdpSessionState, String> {
+    if let Some(existing) = runtime
+        .find_session_by_profile_key(&profile_session.profile_key)
         .await
-        .map_err(|e| format!("读取 CDP 标签页失败: {e}"))?;
-    if !response.status().is_success() {
-        return Err(format!("读取 CDP 标签页失败: {}", response.status()));
-    }
-    response
-        .json::<Vec<CdpTargetInfo>>()
-        .await
-        .map_err(|e| format!("解析 CDP 标签页失败: {e}"))
-}
-
-async fn is_cdp_endpoint_alive(port: u16) -> bool {
-    let endpoint = format!("http://127.0.0.1:{port}/json/version");
-    let client = match reqwest::Client::builder()
-        .timeout(Duration::from_secs(2))
-        .build()
     {
-        Ok(client) => client,
-        Err(_) => return false,
-    };
-    match client.get(endpoint).send().await {
-        Ok(resp) => resp.status().is_success(),
-        Err(_) => false,
+        if target_id.is_none() || Some(existing.target_id.as_str()) == target_id {
+            return Ok(existing);
+        }
+        runtime.close_session(&existing.session_id).await?;
+        cleanup_browser_stream_relay(&existing.session_id).await;
     }
+
+    runtime
+        .open_session(OpenSessionRequest {
+            profile_key: profile_session.profile_key.clone(),
+            remote_debugging_port: profile_session.remote_debugging_port,
+            target_id: target_id.map(ToString::to_string),
+        })
+        .await
 }
 
 fn sanitize_profile_key(input: &str) -> String {
@@ -1692,11 +2562,134 @@ fn spawn_chrome_with_profile(
     cmd.spawn().map_err(|e| format!("启动 Chrome 失败: {e}"))
 }
 
+fn chrome_process_uses_profile_dir(args: &[OsString], profile_dir: &Path) -> bool {
+    let expected = profile_dir.to_string_lossy();
+    let expected_owned = expected.as_ref();
+
+    for (index, arg) in args.iter().enumerate() {
+        let value = arg.to_string_lossy();
+        if value == format!("--user-data-dir={expected_owned}") {
+            return true;
+        }
+        if value == "--user-data-dir" {
+            if let Some(next) = args.get(index + 1) {
+                if next.to_string_lossy() == expected_owned {
+                    return true;
+                }
+            }
+        }
+    }
+
+    false
+}
+
+fn collect_chrome_profile_processes(profile_dir: &Path) -> Vec<Pid> {
+    let mut system = System::new_all();
+    system.refresh_all();
+
+    system
+        .processes()
+        .iter()
+        .filter_map(|(pid, process)| {
+            let process_name = process.name().to_string_lossy().to_lowercase();
+            if !process_name.contains("chrome") && !process_name.contains("chromium") {
+                return None;
+            }
+            if chrome_process_uses_profile_dir(process.cmd(), profile_dir) {
+                return Some(*pid);
+            }
+            None
+        })
+        .collect()
+}
+
+fn find_chrome_profile_process_pid(profile_dir: &Path) -> Option<u32> {
+    collect_chrome_profile_processes(profile_dir)
+        .into_iter()
+        .next()
+        .map(|pid| pid.as_u32())
+}
+
+fn cleanup_chrome_profile_singleton_artifacts(profile_dir: &Path) {
+    for name in ["SingletonLock", "SingletonCookie", "SingletonSocket"] {
+        let path = profile_dir.join(name);
+        let result = if path.is_dir() {
+            std::fs::remove_dir_all(&path)
+        } else {
+            std::fs::remove_file(&path)
+        };
+        if let Err(error) = result {
+            if error.kind() != std::io::ErrorKind::NotFound {
+                tracing::warn!(
+                    "[ChromeProfile] 清理 profile 锁文件失败: path={:?}, err={}",
+                    path,
+                    error
+                );
+            }
+        }
+    }
+}
+
+async fn cleanup_orphan_chrome_profile_processes(profile_dir: &Path) -> Result<bool, String> {
+    let mut system = System::new_all();
+    system.refresh_all();
+
+    let target_pids = system
+        .processes()
+        .iter()
+        .filter_map(|(pid, process)| {
+            let process_name = process.name().to_string_lossy().to_lowercase();
+            if !process_name.contains("chrome") && !process_name.contains("chromium") {
+                return None;
+            }
+            if chrome_process_uses_profile_dir(process.cmd(), profile_dir) {
+                return Some(*pid);
+            }
+            None
+        })
+        .collect::<Vec<_>>();
+
+    if target_pids.is_empty() {
+        return Ok(false);
+    }
+
+    tracing::warn!(
+        "[ChromeProfile] 检测到未受管 profile 进程，准备清理: profile_dir={:?}, pids={:?}",
+        profile_dir,
+        target_pids
+            .iter()
+            .map(|pid| pid.as_u32())
+            .collect::<Vec<_>>()
+    );
+
+    for pid in &target_pids {
+        if let Some(process) = system.process(*pid) {
+            let terminated = process.kill_with(Signal::Term).unwrap_or(false);
+            if !terminated {
+                let _ = process.kill();
+            }
+        }
+    }
+
+    tokio::time::sleep(tokio::time::Duration::from_millis(
+        MANAGED_CHROME_RECOVERY_WAIT_MS,
+    ))
+    .await;
+    cleanup_chrome_profile_singleton_artifacts(profile_dir);
+    Ok(true)
+}
+
 fn resolve_profile_data_dir_from_base(base_dir: &Path, profile_key: &str) -> PathBuf {
     let effective_key = normalize_profile_key(profile_key);
     base_dir.join("webview_profiles").join(effective_key)
 }
 
+fn resolve_chrome_profile_data_dir_from_base(base_dir: &Path, profile_key: &str) -> PathBuf {
+    base_dir
+        .join("chrome_profiles")
+        .join(normalize_profile_key(profile_key))
+}
+
 fn resolve_profile_data_dir(app: &AppHandle, profile_key: &str) -> Result<PathBuf, String> {
     let _ = app;
     let base_dir = proxycast_core::app_paths::preferred_data_dir()
@@ -1708,9 +2701,10 @@ fn resolve_chrome_profile_data_dir(app: &AppHandle, profile_key: &str) -> Result
     let _ = app;
     let base_dir = proxycast_core::app_paths::preferred_data_dir()
         .map_err(|e| format!("获取应用数据目录失败: {e}"))?;
-    Ok(base_dir
-        .join("chrome_profiles")
-        .join(normalize_profile_key(profile_key)))
+    Ok(resolve_chrome_profile_data_dir_from_base(
+        &base_dir,
+        profile_key,
+    ))
 }
 
 fn get_system_chrome_path() -> Option<String> {
diff --git a/src-tauri/src/dev_bridge/dispatcher.rs b/src-tauri/src/dev_bridge/dispatcher.rs
index 880224a63..305f45ea7 100644
--- a/src-tauri/src/dev_bridge/dispatcher.rs
+++ b/src-tauri/src/dev_bridge/dispatcher.rs
@@ -357,6 +357,213 @@ pub async fn handle_command(
             Ok(serde_json::to_value(diagnostics)?)
         }
 
+        // ========== P0 - 浏览器/CDP ==========
+        "open_chrome_profile_window" => {
+            let app_handle = state
+                .app_handle
+                .as_ref()
+                .ok_or_else(|| "Dev Bridge 未持有 AppHandle".to_string())?
+                .clone();
+            let request: crate::commands::webview_cmd::OpenChromeProfileRequest =
+                parse_nested_arg(&args.unwrap_or_default(), "request")?;
+            Ok(serde_json::to_value(
+                crate::commands::webview_cmd::open_chrome_profile_window_global(
+                    app_handle,
+                    state.server.clone(),
+                    request,
+                )
+                .await?,
+            )?)
+        }
+
+        "open_browser_runtime_debugger_window" => {
+            let app_handle = state
+                .app_handle
+                .as_ref()
+                .ok_or_else(|| "Dev Bridge 未持有 AppHandle".to_string())?
+                .clone();
+            let request: Option<crate::commands::browser_runtime_cmd::OpenBrowserRuntimeDebuggerWindowRequest> =
+                parse_optional_nested_arg(&args.unwrap_or_default(), "request")?;
+            crate::commands::browser_runtime_cmd::open_browser_runtime_debugger_window(
+                app_handle, request,
+            )?;
+            Ok(serde_json::json!({ "success": true }))
+        }
+
+        "close_browser_runtime_debugger_window" => {
+            let app_handle = state
+                .app_handle
+                .as_ref()
+                .ok_or_else(|| "Dev Bridge 未持有 AppHandle".to_string())?
+                .clone();
+            crate::commands::browser_runtime_cmd::close_browser_runtime_debugger_window(app_handle)?;
+            Ok(serde_json::json!({ "success": true }))
+        }
+
+        "launch_browser_runtime_assist" => {
+            let app_handle = state
+                .app_handle
+                .as_ref()
+                .ok_or_else(|| "Dev Bridge 未持有 AppHandle".to_string())?
+                .clone();
+            let request: crate::commands::browser_runtime_cmd::LaunchBrowserRuntimeAssistRequest =
+                parse_nested_arg(&args.unwrap_or_default(), "request")?;
+            Ok(serde_json::to_value(
+                crate::commands::browser_runtime_cmd::launch_browser_runtime_assist_global(
+                    app_handle,
+                    state.server.clone(),
+                    request,
+                )
+                .await?,
+            )?)
+        }
+
+        "get_chrome_profile_sessions" => Ok(serde_json::to_value(
+            crate::commands::webview_cmd::get_chrome_profile_sessions_global().await?,
+        )?),
+
+        "close_chrome_profile_session" => {
+            let args = args.unwrap_or_default();
+            let profile_key = get_string_arg(&args, "profileKey", "profile_key")?;
+            Ok(serde_json::to_value(
+                crate::commands::webview_cmd::close_chrome_profile_session_global(profile_key)
+                    .await?,
+            )?)
+        }
+
+        "get_chrome_bridge_endpoint_info" => Ok(serde_json::to_value(
+            crate::commands::webview_cmd::get_chrome_bridge_endpoint_info_global(
+                state.server.clone(),
+            )
+            .await?,
+        )?),
+
+        "get_chrome_bridge_status" => Ok(serde_json::to_value(
+            crate::commands::webview_cmd::get_chrome_bridge_status_global().await?,
+        )?),
+
+        "get_browser_backend_policy" => Ok(serde_json::to_value(
+            crate::commands::webview_cmd::get_browser_backend_policy_global().await?,
+        )?),
+
+        "set_browser_backend_policy" => {
+            let args = args.unwrap_or_default();
+            let policy: crate::commands::webview_cmd::BrowserBackendPolicy =
+                parse_nested_arg(&args, "policy")?;
+            Ok(serde_json::to_value(
+                crate::commands::webview_cmd::set_browser_backend_policy_global(policy).await?,
+            )?)
+        }
+
+        "get_browser_backends_status" => Ok(serde_json::to_value(
+            crate::commands::webview_cmd::get_browser_backends_status_global().await?,
+        )?),
+
+        "list_cdp_targets" => {
+            let request: crate::commands::webview_cmd::ListCdpTargetsRequest =
+                parse_nested_arg(&args.unwrap_or_default(), "request")?;
+            Ok(serde_json::to_value(
+                crate::commands::webview_cmd::list_cdp_targets_global(request).await?,
+            )?)
+        }
+
+        "open_cdp_session" => {
+            let request: crate::commands::webview_cmd::OpenCdpSessionRequest =
+                parse_nested_arg(&args.unwrap_or_default(), "request")?;
+            Ok(serde_json::to_value(
+                crate::commands::webview_cmd::open_cdp_session_global(request).await?,
+            )?)
+        }
+
+        "close_cdp_session" => {
+            let request: crate::commands::webview_cmd::BrowserSessionStateRequest =
+                parse_nested_arg(&args.unwrap_or_default(), "request")?;
+            Ok(serde_json::to_value(
+                crate::commands::webview_cmd::close_cdp_session_global(request).await?,
+            )?)
+        }
+
+        "start_browser_stream" => {
+            let app_handle = state
+                .app_handle
+                .as_ref()
+                .ok_or_else(|| "Dev Bridge 未持有 AppHandle".to_string())?
+                .clone();
+            let request: crate::commands::webview_cmd::StartBrowserStreamRequest =
+                parse_nested_arg(&args.unwrap_or_default(), "request")?;
+            Ok(serde_json::to_value(
+                crate::commands::webview_cmd::start_browser_stream_global(app_handle, request)
+                    .await?,
+            )?)
+        }
+
+        "stop_browser_stream" => {
+            let request: crate::commands::webview_cmd::StopBrowserStreamRequest =
+                parse_nested_arg(&args.unwrap_or_default(), "request")?;
+            Ok(serde_json::to_value(
+                crate::commands::webview_cmd::stop_browser_stream_global(request).await?,
+            )?)
+        }
+
+        "get_browser_session_state" => {
+            let request: crate::commands::webview_cmd::BrowserSessionStateRequest =
+                parse_nested_arg(&args.unwrap_or_default(), "request")?;
+            Ok(serde_json::to_value(
+                crate::commands::webview_cmd::get_browser_session_state_global(request).await?,
+            )?)
+        }
+
+        "take_over_browser_session" => {
+            let request: crate::commands::webview_cmd::UpdateBrowserSessionControlRequest =
+                parse_nested_arg(&args.unwrap_or_default(), "request")?;
+            Ok(serde_json::to_value(
+                crate::commands::webview_cmd::take_over_browser_session_global(request).await?,
+            )?)
+        }
+
+        "release_browser_session" => {
+            let request: crate::commands::webview_cmd::UpdateBrowserSessionControlRequest =
+                parse_nested_arg(&args.unwrap_or_default(), "request")?;
+            Ok(serde_json::to_value(
+                crate::commands::webview_cmd::release_browser_session_global(request).await?,
+            )?)
+        }
+
+        "resume_browser_session" => {
+            let request: crate::commands::webview_cmd::UpdateBrowserSessionControlRequest =
+                parse_nested_arg(&args.unwrap_or_default(), "request")?;
+            Ok(serde_json::to_value(
+                crate::commands::webview_cmd::resume_browser_session_global(request).await?,
+            )?)
+        }
+
+        "get_browser_event_buffer" => {
+            let request: crate::commands::webview_cmd::BrowserEventBufferRequest =
+                parse_nested_arg(&args.unwrap_or_default(), "request")?;
+            Ok(serde_json::to_value(
+                crate::commands::webview_cmd::get_browser_event_buffer_global(request).await?,
+            )?)
+        }
+
+        "browser_execute_action" => {
+            let request: crate::commands::webview_cmd::BrowserActionRequest =
+                parse_nested_arg(&args.unwrap_or_default(), "request")?;
+            Ok(serde_json::to_value(
+                crate::commands::webview_cmd::browser_execute_action_global(request).await?,
+            )?)
+        }
+
+        "get_browser_action_audit_logs" => {
+            let limit = args
+                .as_ref()
+                .and_then(|value| value.get("limit"))
+                .and_then(|value| value.as_u64())
+                .map(|value| value as usize);
+            Ok(serde_json::to_value(
+                crate::commands::webview_cmd::get_browser_action_audit_logs_global(limit).await?,
+            )?)
+        }
+
         // ========== P1 - 日志相关 ==========
         "get_logs" => {
             let logs = state.logs.read().await;
@@ -605,6 +812,20 @@ pub async fn handle_command(
             Ok(serde_json::to_value(inspection)?)
         }
 
+        "import_local_skill_for_app" => {
+            let args = args.unwrap_or_default();
+            let app = args
+                .get("app")
+                .and_then(|value| value.as_str())
+                .unwrap_or("proxycast")
+                .to_string();
+            let source_path = get_string_arg(&args, "source_path", "source_path")
+                .or_else(|_| get_string_arg(&args, "sourcePath", "sourcePath"))?;
+            let result = crate::commands::skill_cmd::import_local_skill_for_app(app, source_path)
+                .map_err(|e| format!("导入本地 Skill 失败: {e}"))?;
+            Ok(serde_json::to_value(result)?)
+        }
+
         "inspect_remote_skill" => {
             let args = args.unwrap_or_default();
             let owner = get_string_arg(&args, "owner", "owner")?;
diff --git a/src-tauri/src/services/README.md b/src-tauri/src/services/README.md
index 34b2817a7..467756fa1 100644
--- a/src-tauri/src/services/README.md
+++ b/src-tauri/src/services/README.md
@@ -26,6 +26,7 @@
 - `file_browser_service.rs` - Tauri 命令桥接（纯逻辑已迁移到 `crates/services/src/file_browser_service.rs`）
 - `update_check_service.rs` - 兼容导出层（纯逻辑已迁移到 `crates/services/src/update_check_service.rs`）
 - `update_window.rs` - 更新提醒独立窗口管理（底部居中 Toast 窗口定位）
+- `browser_runtime_window.rs` - 浏览器运行时调试独立窗口管理
 - `general_chat/` - 通用对话服务模块（会话管理、消息存储）
 - `api_key_provider_service.rs` - API Key Provider 服务
 - `kiro_event_service.rs` - Kiro 事件服务
diff --git a/src-tauri/src/services/browser_runtime_window.rs b/src-tauri/src/services/browser_runtime_window.rs
new file mode 100644
index 000000000..32735396c
--- /dev/null
+++ b/src-tauri/src/services/browser_runtime_window.rs
@@ -0,0 +1,109 @@
+//! 浏览器运行时调试窗口管理
+//!
+//! 提供独立的浏览器运行时调试窗口，与主应用窗口分离显示。
+
+use tauri::{AppHandle, Manager, WebviewUrl, WebviewWindowBuilder};
+
+#[derive(Debug, thiserror::Error)]
+pub enum BrowserRuntimeWindowError {
+    #[error("窗口创建失败: {0}")]
+    CreateFailed(String),
+    #[error("窗口操作失败: {0}")]
+    OperationFailed(String),
+}
+
+const BROWSER_RUNTIME_WINDOW_LABEL: &str = "browser-runtime-debugger";
+const WINDOW_WIDTH: f64 = 1440.0;
+const WINDOW_HEIGHT: f64 = 920.0;
+const WINDOW_TITLE: &str = "浏览器运行时调试";
+const WINDOW_ROUTE: &str = "/browser-runtime-debugger";
+
+fn build_browser_runtime_route(session_id: Option<&str>, profile_key: Option<&str>) -> String {
+    let mut query_parts = Vec::new();
+    if let Some(session_id) = session_id.filter(|value| !value.trim().is_empty()) {
+        query_parts.push(format!("session_id={}", urlencoding::encode(session_id)));
+    }
+    if let Some(profile_key) = profile_key.filter(|value| !value.trim().is_empty()) {
+        query_parts.push(format!("profile_key={}", urlencoding::encode(profile_key)));
+    }
+    if query_parts.is_empty() {
+        WINDOW_ROUTE.to_string()
+    } else {
+        format!("{WINDOW_ROUTE}?{}", query_parts.join("&"))
+    }
+}
+
+pub fn open_browser_runtime_window(
+    app: &AppHandle,
+    session_id: Option<&str>,
+    profile_key: Option<&str>,
+) -> Result<(), BrowserRuntimeWindowError> {
+    let route = build_browser_runtime_route(session_id, profile_key);
+    if let Some(window) = app.get_webview_window(BROWSER_RUNTIME_WINDOW_LABEL) {
+        let route_literal = serde_json::to_string(&route).map_err(|e| {
+            BrowserRuntimeWindowError::OperationFailed(format!("窗口路由编码失败: {e}"))
+        })?;
+        let js = format!("window.location.replace({route_literal});");
+        window
+            .eval(&js)
+            .map_err(|e| BrowserRuntimeWindowError::OperationFailed(format!("导航失败: {e}")))?;
+        let _ = window.unminimize();
+        window.show().map_err(|e| {
+            BrowserRuntimeWindowError::OperationFailed(format!("显示窗口失败: {e}"))
+        })?;
+        window.set_focus().map_err(|e| {
+            BrowserRuntimeWindowError::OperationFailed(format!("聚焦窗口失败: {e}"))
+        })?;
+        return Ok(());
+    }
+
+    WebviewWindowBuilder::new(
+        app,
+        BROWSER_RUNTIME_WINDOW_LABEL,
+        WebviewUrl::App(route.into()),
+    )
+    .title(WINDOW_TITLE)
+    .inner_size(WINDOW_WIDTH, WINDOW_HEIGHT)
+    .min_inner_size(960.0, 640.0)
+    .resizable(true)
+    .visible(true)
+    .focused(true)
+    .center()
+    .build()
+    .map_err(|e| BrowserRuntimeWindowError::CreateFailed(format!("{e}")))?;
+
+    Ok(())
+}
+
+pub fn close_browser_runtime_window(app: &AppHandle) -> Result<(), BrowserRuntimeWindowError> {
+    if let Some(window) = app.get_webview_window(BROWSER_RUNTIME_WINDOW_LABEL) {
+        window.close().map_err(|e| {
+            BrowserRuntimeWindowError::OperationFailed(format!("关闭窗口失败: {e}"))
+        })?;
+    }
+    Ok(())
+}
+
+pub fn is_browser_runtime_window_open(app: &AppHandle) -> bool {
+    app.get_webview_window(BROWSER_RUNTIME_WINDOW_LABEL)
+        .map(|window| window.is_visible().unwrap_or(false))
+        .unwrap_or(false)
+}
+
+#[cfg(test)]
+mod tests {
+    use super::*;
+
+    #[test]
+    fn browser_runtime_window_label_is_stable() {
+        assert_eq!(BROWSER_RUNTIME_WINDOW_LABEL, "browser-runtime-debugger");
+        assert_eq!(WINDOW_ROUTE, "/browser-runtime-debugger");
+    }
+
+    #[test]
+    fn browser_runtime_route_includes_context_when_present() {
+        let route = build_browser_runtime_route(Some("session-1"), Some("search_google"));
+        assert!(route.contains("session_id=session-1"));
+        assert!(route.contains("profile_key=search_google"));
+    }
+}
diff --git a/src-tauri/src/services/mod.rs b/src-tauri/src/services/mod.rs
index d9f3d0dbb..cf7d243f4 100644
--- a/src-tauri/src/services/mod.rs
+++ b/src-tauri/src/services/mod.rs
@@ -6,6 +6,7 @@
 // 保留在主 crate 的 Tauri 相关服务
 pub mod agent_timeline_service;
 pub mod auto_memory_service;
+pub mod browser_runtime_window;
 pub mod chat_history_service;
 pub mod conversation_statistics_service;
 pub mod environment_service;
diff --git a/src-tauri/tauri.conf.headless.json b/src-tauri/tauri.conf.headless.json
index c7ec56433..9bf6fa43e 100644
--- a/src-tauri/tauri.conf.headless.json
+++ b/src-tauri/tauri.conf.headless.json
@@ -1,7 +1,7 @@
 {
   "$schema": "https://schema.tauri.app/config/2",
   "productName": "ProxyCast",
-  "version": "0.70.0",
+  "version": "0.87.0",
   "identifier": "com.proxycast.app",
   "build": {
     "beforeDevCommand": "npm run dev:web-bridge",
diff --git a/src-tauri/tauri.conf.json b/src-tauri/tauri.conf.json
index e979cfd3d..c23878b7c 100644
--- a/src-tauri/tauri.conf.json
+++ b/src-tauri/tauri.conf.json
@@ -1,7 +1,7 @@
 {
   "$schema": "https://schema.tauri.app/config/2",
   "productName": "ProxyCast",
-  "version": "0.86.0",
+  "version": "0.87.0",
   "identifier": "com.proxycast.app",
   "build": {
     "beforeDevCommand": "npm run dev",
diff --git a/src/App.tsx b/src/App.tsx
index 4929bb5c7..9d45833f4 100644
--- a/src/App.tsx
+++ b/src/App.tsx
@@ -27,6 +27,7 @@ import { OpenClawPage } from "./components/openclaw";
 import { RecentImageInsertFloating } from "./components/image-gen/RecentImageInsertFloating";
 import { CreateProjectDialog } from "./components/projects/CreateProjectDialog";
 import { WorkbenchPage } from "./components/workspace";
+import { BrowserRuntimeWorkspace } from "@/features/browser-runtime";
 import {
   ProjectType,
   createProject,
@@ -64,9 +65,9 @@ import {
   ThemeWorkspacePage,
   WorkspaceTheme,
 } from "./types/page";
-import { SettingsTabs } from "./types/settings";
 import { toast } from "sonner";
 import { recordWorkspaceRepair } from "@/lib/workspaceHealthTelemetry";
+import { buildHomeAgentParams } from "@/lib/workspace/navigation";
 
 const AppContainer = styled.div`
   display: flex;
@@ -136,7 +137,9 @@ function isWindowsNavigatorPlatform(): boolean {
 function AppContent() {
   const [showSplash, setShowSplash] = useState(true);
   const [currentPage, setCurrentPage] = useState<Page>("agent");
-  const [pageParams, setPageParams] = useState<PageParams>({});
+  const [pageParams, setPageParams] = useState<PageParams>(() =>
+    buildHomeAgentParams(),
+  );
   const [agentHasMessages, setAgentHasMessages] = useState(false);
   const { needsOnboarding, completeOnboarding } = useOnboardingState();
 
@@ -184,35 +187,6 @@ function AppContent() {
         return;
       }
 
-      if (page === "workspace") {
-        setCurrentPage("agent");
-        setPageParams(
-          (params as AgentPageParams | undefined) || {
-            theme: "general",
-            lockTheme: false,
-          },
-        );
-        return;
-      }
-
-      if (page === "api-server") {
-        setCurrentPage("settings");
-        setPageParams({ tab: SettingsTabs.ApiServer } as SettingsPageParams);
-        return;
-      }
-
-      if (page === "provider-pool") {
-        setCurrentPage("settings");
-        setPageParams({ tab: SettingsTabs.Providers } as SettingsPageParams);
-        return;
-      }
-
-      if (page === "mcp") {
-        setCurrentPage("settings");
-        setPageParams({ tab: SettingsTabs.McpServer } as SettingsPageParams);
-        return;
-      }
-
       if (page === "projects") {
         const projectParams = params as
           | {
@@ -509,7 +483,7 @@ function AppContent() {
         >
           {currentPage === "agent" ? (
             <AgentChatPage
-              key={`${(pageParams as AgentPageParams).projectId || ""}:${(pageParams as AgentPageParams).contentId || ""}:${(pageParams as AgentPageParams).theme || ""}:${(pageParams as AgentPageParams).lockTheme ? "1" : "0"}:${(pageParams as AgentPageParams).newChatAt ?? 0}`}
+              key={`${(pageParams as AgentPageParams).projectId || ""}:${(pageParams as AgentPageParams).contentId || ""}:${(pageParams as AgentPageParams).theme || ""}:${(pageParams as AgentPageParams).lockTheme ? "1" : "0"}:${(pageParams as AgentPageParams).agentEntry || "claw"}:${(pageParams as AgentPageParams).immersiveHome ? "immersive" : "standard"}:${(pageParams as AgentPageParams).newChatAt ?? 0}`}
               onNavigate={handleNavigate}
               projectId={(pageParams as AgentPageParams).projectId}
               contentId={(pageParams as AgentPageParams).contentId}
@@ -525,6 +499,11 @@ function AppContent() {
               theme={(pageParams as AgentPageParams).theme}
               lockTheme={(pageParams as AgentPageParams).lockTheme}
               fromResources={(pageParams as AgentPageParams).fromResources}
+              agentEntry={(pageParams as AgentPageParams).agentEntry}
+              showChatPanel={
+                (pageParams as AgentPageParams).agentEntry !== "new-task" &&
+                !(pageParams as AgentPageParams).immersiveHome
+              }
               newChatAt={(pageParams as AgentPageParams).newChatAt}
               onHasMessagesChange={setAgentHasMessages}
             />
@@ -574,6 +553,10 @@ function AppContent() {
           <ToolsPage onNavigate={handleNavigate} />
         </PageWrapper>
 
+        <PageWrapper $isActive={currentPage === "browser-runtime"}>
+          <BrowserRuntimeWorkspace active={currentPage === "browser-runtime"} />
+        </PageWrapper>
+
         <PageWrapper $isActive={currentPage === "plugins"}>
           <PluginsPage onNavigate={handleNavigate} />
         </PageWrapper>
@@ -659,6 +642,7 @@ function AppContent() {
   const shouldHideSidebarForAgent =
     currentPage === "agent" &&
     (Boolean(currentAgentParams.fromResources) ||
+      Boolean(currentAgentParams.immersiveHome) ||
       (agentHasMessages && Boolean(currentAgentParams.lockTheme)));
 
   const shouldShowAppSidebar =
diff --git a/src/RootRouter.tsx b/src/RootRouter.tsx
index 36a8c5334..38fd6a0dc 100644
--- a/src/RootRouter.tsx
+++ b/src/RootRouter.tsx
@@ -6,6 +6,7 @@
 import App from "./App";
 import { SmartInputPage } from "./pages/smart-input";
 import { UpdateNotificationPage } from "./pages/update-notification";
+import { BrowserRuntimeDebuggerPage } from "./pages";
 import { Toaster } from "./components/ui/sonner";
 import { AppCrashBoundary } from "./components/layout/AppCrashBoundary";
 
@@ -14,6 +15,7 @@ import { AppCrashBoundary } from "./components/layout/AppCrashBoundary";
  *
  * - /smart-input: 截图对话悬浮窗口（独立 Tauri 窗口，支持语音模式）
  * - /update-notification: 更新提醒悬浮窗口（独立 Tauri 窗口）
+ * - /browser-runtime-debugger: 浏览器运行时独立调试窗口
  * - 其他: 主应用
  */
 export function RootRouter() {
@@ -37,6 +39,15 @@ export function RootRouter() {
     );
   }
 
+  if (pathname === "/browser-runtime-debugger") {
+    return (
+      <AppCrashBoundary>
+        <BrowserRuntimeDebuggerPage />
+        <Toaster />
+      </AppCrashBoundary>
+    );
+  }
+
   // 默认渲染主应用
   return (
     <AppCrashBoundary>
diff --git a/src/components/AppSidebar.tsx b/src/components/AppSidebar.tsx
index 533164911..e0e6fb849 100644
--- a/src/components/AppSidebar.tsx
+++ b/src/components/AppSidebar.tsx
@@ -7,7 +7,7 @@
 import { useState, useEffect, useMemo } from "react";
 import styled from "styled-components";
 import {
-  Home,
+  Plus,
   Image,
   Compass,
   Settings,
@@ -30,6 +30,7 @@ import {
   Layers,
   Terminal,
   Bot,
+  MessageSquare,
   LucideIcon,
 } from "lucide-react";
 import * as LucideIcons from "lucide-react";
@@ -45,6 +46,7 @@ import {
 } from "@/types/page";
 import { getConfig } from "@/lib/api/appConfig";
 import {
+  buildClawAgentParams,
   buildHomeAgentParams,
   buildWorkspaceResetParams,
 } from "@/lib/workspace/navigation";
@@ -265,11 +267,25 @@ const IconActionButton = styled.button<{ $active?: boolean }>`
 const MAIN_MENU_ITEMS: SidebarNavItem[] = [
   {
     id: "home-general",
-    label: "首页",
-    icon: Home,
+    label: "新建任务",
+    icon: Plus,
     page: "agent",
-    params: { theme: "general", lockTheme: false },
-    isActive: (currentPage) => currentPage === "agent",
+    params: buildHomeAgentParams(),
+    isActive: (currentPage, currentParams) =>
+      currentPage === "agent" &&
+      (currentParams as AgentPageParams | undefined)?.agentEntry ===
+        "new-task",
+  },
+  {
+    id: "claw",
+    label: "Claw",
+    icon: MessageSquare,
+    page: "agent",
+    params: buildClawAgentParams(),
+    isActive: (currentPage, currentParams) =>
+      currentPage === "agent" &&
+      (currentParams as AgentPageParams | undefined)?.agentEntry !==
+        "new-task",
   },
   {
     id: "video",
@@ -372,6 +388,13 @@ const FOOTER_MENU_ITEMS: SidebarNavItem[] = [
     page: "resources",
     isActive: (currentPage) => currentPage === "resources",
   },
+  {
+    id: "browser-runtime",
+    label: "浏览器调试",
+    icon: Activity,
+    page: "browser-runtime",
+    isActive: (currentPage) => currentPage === "browser-runtime",
+  },
   {
     id: "tools",
     label: "工具箱",
@@ -396,7 +419,12 @@ const FOOTER_MENU_ITEMS: SidebarNavItem[] = [
   },
 ];
 
-const DEFAULT_ENABLED_NAV_ITEMS = ["home-general", "video", "image-gen"];
+const DEFAULT_ENABLED_NAV_ITEMS = [
+  "home-general",
+  "claw",
+  "video",
+  "image-gen",
+];
 
 const ALL_NAV_ITEM_IDS = [
   ...MAIN_MENU_ITEMS.map((item) => item.id),
@@ -626,6 +654,8 @@ export function AppSidebar({
     const params: PageParams | undefined =
       item.id === "home-general"
         ? buildHomeAgentParams(item.params as AgentPageParams | undefined)
+        : item.id === "claw"
+          ? buildClawAgentParams(item.params as AgentPageParams | undefined)
         : isThemeWorkspacePage(item.page)
           ? buildWorkspaceResetParams(
               item.params as AgentPageParams | undefined,
@@ -652,7 +682,7 @@ export function AppSidebar({
           onClick={() => onNavigate("agent", buildHomeAgentParams())}
         >
           <Search size={14} />
-          <span>搜索</span>
+          <span>搜索任务</span>
         </SearchButton>
       </HeaderArea>
 
diff --git a/src/components/README.md b/src/components/README.md
index 1a8eff59e..3aa9a7d88 100644
--- a/src/components/README.md
+++ b/src/components/README.md
@@ -14,12 +14,10 @@ React 组件层，包含 UI 组件和业务组件。
 - `clients/` - 客户端管理组件
 - `config/` - 配置管理组件
 - `connect/` - ProxyCast Connect 组件（中转商 API Key 添加）
-- `extensions/` - 扩展功能组件
 - `flow-monitor/` - LLM 流量监控组件
 - `general-chat/` - 通用对话功能组件（三栏布局：会话列表 + 聊天区域 + 画布）
 - `mcp/` - MCP 服务器管理组件（配置管理、运行时控制、工具/提示词/资源浏览与调用）
 - `plugins/` - 插件管理组件
-- `prompts/` - Prompt 管理组件
 - `provider-pool/` - Provider 凭证池管理组件
 - `resilience/` - 弹性策略配置组件
 - `routing/` - 路由规则配置组件
@@ -38,7 +36,6 @@ React 组件层，包含 UI 组件和业务组件。
 - `HelpTip.tsx` - 帮助提示组件
 - `Modal.tsx` - 模态框组件
 - `Providers.tsx` - Provider 管理页面
-- `Sidebar.tsx` - 旧版侧边栏导航（已弃用）
 - `SplashScreen.tsx` - 启动画面组件
 
 ## 更新提醒
diff --git a/src/components/Sidebar.tsx b/src/components/Sidebar.tsx
deleted file mode 100644
index fd60817a8..000000000
--- a/src/components/Sidebar.tsx
+++ /dev/null
@@ -1,62 +0,0 @@
-import { Settings, Globe, Database, Wrench, Bot, Puzzle } from "lucide-react";
-import { cn } from "@/lib/utils";
-
-/**
- * 页面类型定义
- *
- * 支持静态页面和动态插件页面
- * - 静态页面: 预定义的页面标识符
- * - 动态插件页面: `plugin:${string}` 格式
- *
- * _需求: 2.2, 3.2_
- */
-type Page =
-  | "provider-pool"
-  | "api-server"
-  | "agent"
-  | "tools"
-  | "plugins"
-  | "settings"
-  | `plugin:${string}`;
-
-interface SidebarProps {
-  currentPage: Page;
-  onNavigate: (page: Page) => void;
-}
-
-const navItems = [
-  { id: "agent" as Page, label: "AI Agent", icon: Bot },
-  { id: "api-server" as Page, label: "团队共享网关", icon: Globe },
-  { id: "provider-pool" as Page, label: "凭证池", icon: Database },
-  { id: "tools" as Page, label: "工具", icon: Wrench },
-  { id: "plugins" as Page, label: "插件中心", icon: Puzzle },
-  { id: "settings" as Page, label: "设置", icon: Settings },
-];
-
-export function Sidebar({ currentPage, onNavigate }: SidebarProps) {
-  return (
-    <div className="w-56 border-r bg-card p-4">
-      <div className="mb-8">
-        <h1 className="text-xl font-bold">ProxyCast</h1>
-        <p className="text-xs text-muted-foreground">AI Agent + 团队网关</p>
-      </div>
-      <nav className="space-y-1">
-        {navItems.map((item) => (
-          <button
-            key={item.id}
-            onClick={() => onNavigate(item.id)}
-            className={cn(
-              "flex w-full items-center gap-3 rounded-lg px-3 py-2 text-sm transition-colors",
-              currentPage === item.id
-                ? "bg-primary text-primary-foreground"
-                : "hover:bg-muted",
-            )}
-          >
-            <item.icon className="h-4 w-4" />
-            {item.label}
-          </button>
-        ))}
-      </nav>
-    </div>
-  );
-}
diff --git a/src/components/agent/chat/README.md b/src/components/agent/chat/README.md
index fb7004935..1ee5c3a20 100644
--- a/src/components/agent/chat/README.md
+++ b/src/components/agent/chat/README.md
@@ -13,17 +13,19 @@ AI Agent 聊天页面，支持通用对话和内容创作两种模式。集成
 |------|------|
 | `index.tsx` | AgentChatPage 主组件，集成布局过渡和工作流 |
 | `types.ts` | 类型定义（Message、Provider 配置等） |
+| `utils/canvasWorkbenchDiff.ts` | 画布工作台的文本 diff 计算工具 |
 
 ### components/
 
 | 文件 | 说明 |
 |------|------|
 | `ChatNavbar.tsx` | 顶部导航栏（模型选择、设置等） |
-| `ChatSidebar.tsx` | 侧边栏（话题列表） |
+| `ChatSidebar.tsx` | 侧边栏（任务列表） |
 | `ChatSettings.tsx` | 设置面板 |
 | `MessageList.tsx` | 消息列表组件 |
 | `Inputbar.tsx` | 输入栏组件 |
 | `EmptyState.tsx` | 空状态引导（主题选择、模式选择） |
+| `CanvasWorkbenchLayout.tsx` | 画布响应式工作台，宽屏侧栏与窄屏底部面板均支持产物、文件树、变更、预览与下载 |
 
 ### hooks/
 
@@ -45,6 +47,11 @@ AI Agent 聊天页面，支持通用对话和内容创作两种模式。集成
 - 步骤进度条（仅内容创作主题）
 - 布局过渡（对话 ↔ 对话+画布）
 
+### 3. 画布内工作台
+- 宽屏使用右侧内嵌工作台，窄屏自动切换为底部工作台，均支持 `产物 / 全部文件 / 变更 / 预览`
+- 支持画布面板折叠/展开
+- 支持复制路径、系统打开、定位与文本下载
+
 ## 依赖模块
 
 - `@/components/content-creator/core/LayoutTransition` - 布局过渡
diff --git a/src/components/agent/chat/components/CanvasWorkbenchLayout.test.tsx b/src/components/agent/chat/components/CanvasWorkbenchLayout.test.tsx
new file mode 100644
index 000000000..bf0d8c46e
--- /dev/null
+++ b/src/components/agent/chat/components/CanvasWorkbenchLayout.test.tsx
@@ -0,0 +1,529 @@
+import React from "react";
+import { act } from "react";
+import { createRoot, type Root } from "react-dom/client";
+import { afterEach, beforeEach, describe, expect, it, vi } from "vitest";
+import type { Artifact } from "@/lib/artifact/types";
+import type { TaskFile } from "./TaskFiles";
+import {
+  CanvasWorkbenchLayout,
+  type CanvasWorkbenchDefaultPreview,
+  type CanvasWorkbenchPreviewTarget,
+} from "./CanvasWorkbenchLayout";
+
+type MockResizeObserverCallback = (
+  entries: Array<{
+    target: Element;
+    contentRect: {
+      width: number;
+      height: number;
+    };
+  }>,
+  observer: unknown,
+) => void;
+
+const { mockListDirectory, mockToast, resizeObserverState } = vi.hoisted(() => ({
+  mockListDirectory: vi.fn(),
+  mockToast: {
+    success: vi.fn(),
+    error: vi.fn(),
+    info: vi.fn(),
+  },
+  resizeObserverState: {
+    width: 1280,
+    observers: [] as Array<{
+      callback: MockResizeObserverCallback;
+      target: Element | null;
+    }>,
+  },
+}));
+
+vi.mock("sonner", () => ({
+  toast: mockToast,
+}));
+
+vi.mock("@/lib/api/fileBrowser", () => ({
+  listDirectory: mockListDirectory,
+}));
+
+interface MountedHarness {
+  container: HTMLDivElement;
+  root: Root;
+}
+
+const mountedRoots: MountedHarness[] = [];
+
+function createArtifact(
+  id: string,
+  filePath: string,
+  content: string,
+  updatedAt: number,
+): Artifact {
+  return {
+    id,
+    type: "document",
+    title: filePath.split("/").pop() || filePath,
+    content,
+    status: "complete",
+    meta: {
+      filePath,
+      filename: filePath.split("/").pop() || filePath,
+      previewText: content,
+    },
+    position: { start: 0, end: content.length },
+    createdAt: updatedAt - 100,
+    updatedAt,
+  };
+}
+
+function createTaskFile(
+  id: string,
+  name: string,
+  content: string,
+  updatedAt: number,
+): TaskFile {
+  return {
+    id,
+    name,
+    type: "document",
+    content,
+    version: 1,
+    createdAt: updatedAt - 100,
+    updatedAt,
+  };
+}
+
+function mount(
+  props: React.ComponentProps<typeof CanvasWorkbenchLayout>,
+): HTMLDivElement {
+  const container = document.createElement("div");
+  document.body.appendChild(container);
+  const root = createRoot(container);
+
+  act(() => {
+    root.render(<CanvasWorkbenchLayout {...props} />);
+  });
+
+  mountedRoots.push({ container, root });
+  return container;
+}
+
+async function flushEffects(times = 6) {
+  for (let i = 0; i < times; i += 1) {
+    await act(async () => {
+      await Promise.resolve();
+    });
+  }
+}
+
+async function resizeWorkbench(width: number) {
+  resizeObserverState.width = width;
+  await act(async () => {
+    resizeObserverState.observers.forEach((observer) => {
+      if (!observer.target) {
+        return;
+      }
+      observer.callback(
+        [
+          {
+            target: observer.target,
+            contentRect: {
+              width,
+              height: 720,
+            },
+          },
+        ],
+        {},
+      );
+    });
+    await Promise.resolve();
+  });
+}
+
+function clickButtonByLabel(container: HTMLElement, ariaLabel: string) {
+  const button = container.querySelector(
+    `button[aria-label="${ariaLabel}"]`,
+  ) as HTMLButtonElement | null;
+  if (!button) {
+    throw new Error(`未找到按钮: ${ariaLabel}`);
+  }
+
+  act(() => {
+    button.click();
+  });
+}
+
+beforeEach(() => {
+  (
+    globalThis as typeof globalThis & {
+      IS_REACT_ACT_ENVIRONMENT?: boolean;
+    }
+  ).IS_REACT_ACT_ENVIRONMENT = true;
+
+  vi.clearAllMocks();
+  resizeObserverState.width = 1280;
+  resizeObserverState.observers = [];
+
+  vi.stubGlobal(
+    "ResizeObserver",
+    class ResizeObserver {
+      private callback: MockResizeObserverCallback;
+      private target: Element | null = null;
+
+      constructor(callback: MockResizeObserverCallback) {
+        this.callback = callback;
+      }
+
+      observe = (target: Element) => {
+        this.target = target;
+        resizeObserverState.observers.push({
+          callback: this.callback,
+          target,
+        });
+        this.callback(
+          [
+            {
+              target,
+              contentRect: {
+                width: resizeObserverState.width,
+                height: 720,
+              },
+            },
+          ],
+          this,
+        );
+      };
+
+      unobserve = () => {};
+
+      disconnect = () => {
+        resizeObserverState.observers = resizeObserverState.observers.filter(
+          (observer) =>
+            observer.callback !== this.callback || observer.target !== this.target,
+        );
+      };
+    },
+  );
+
+  mockListDirectory.mockImplementation(async (path: string) => {
+    if (path === "/workspace") {
+      return {
+        path,
+        parentPath: null,
+        error: null,
+        entries: [
+          {
+            name: "README.md",
+            path: "/workspace/README.md",
+            isDir: false,
+            size: 128,
+            modifiedAt: 100,
+          },
+          {
+            name: "src",
+            path: "/workspace/src",
+            isDir: true,
+            size: 0,
+            modifiedAt: 100,
+          },
+        ],
+      };
+    }
+
+    if (path === "/workspace/src") {
+      return {
+        path,
+        parentPath: "/workspace",
+        error: null,
+        entries: [
+          {
+            name: "binary.dat",
+            path: "/workspace/src/binary.dat",
+            isDir: false,
+            size: 2048,
+            modifiedAt: 100,
+          },
+        ],
+      };
+    }
+
+    return {
+      path,
+      parentPath: "/workspace",
+      error: null,
+      entries: [],
+    };
+  });
+
+  Object.defineProperty(navigator, "clipboard", {
+    configurable: true,
+    value: {
+      writeText: vi.fn(async () => undefined),
+    },
+  });
+
+  Object.defineProperty(globalThis.URL, "createObjectURL", {
+    configurable: true,
+    value: vi.fn(() => "blob:canvas-workbench"),
+  });
+  Object.defineProperty(globalThis.URL, "revokeObjectURL", {
+    configurable: true,
+    value: vi.fn(),
+  });
+
+  HTMLAnchorElement.prototype.click = vi.fn();
+});
+
+afterEach(() => {
+  while (mountedRoots.length > 0) {
+    const mounted = mountedRoots.pop();
+    if (!mounted) {
+      break;
+    }
+    act(() => {
+      mounted.root.unmount();
+    });
+    mounted.container.remove();
+  }
+});
+
+describe("CanvasWorkbenchLayout", () => {
+  it("应支持默认画布、标签切换、文件树、diff 与下载动作", async () => {
+    const previewTargets: CanvasWorkbenchPreviewTarget[] = [];
+    const onOpenPath = vi.fn(async () => undefined);
+    const onRevealPath = vi.fn(async () => undefined);
+    const loadFilePreview = vi.fn(async (path: string) => {
+      if (path === "/workspace/README.md") {
+        return {
+          path,
+          content: "README 内容",
+          isBinary: false,
+          size: 12,
+          error: null,
+        };
+      }
+
+      return {
+        path,
+        content: null,
+        isBinary: true,
+        size: 0,
+        error: null,
+      };
+    });
+
+    const container = mount({
+      artifacts: [
+        createArtifact("artifact-old", "draft.md", "标题\n上一版本", 10),
+        createArtifact("artifact-new", "draft.md", "标题\n产物版本", 20),
+      ],
+      canvasState: null,
+      taskFiles: [
+        createTaskFile("task-current", "draft.md", "标题\n当前画布正文", 30),
+      ],
+      selectedFileId: "task-current",
+      workspaceRoot: "/workspace",
+      workspaceUnavailable: false,
+      defaultPreview: {
+        selectionKey: "task:task-current",
+        title: "draft.md",
+        content: "标题\n当前画布正文",
+        filePath: "draft.md",
+        absolutePath: "/workspace/draft.md",
+        previousContent: "标题\n上一版本",
+      } satisfies CanvasWorkbenchDefaultPreview,
+      loadFilePreview,
+      onOpenPath,
+      onRevealPath,
+      renderPreview: (target, options) => {
+        previewTargets.push(target);
+        return (
+          <div data-testid="preview-panel">
+            {options?.stackedWorkbenchTrigger}
+            {target.kind}:{target.title}
+          </div>
+        );
+      },
+    });
+
+    await flushEffects();
+
+    expect(mockListDirectory).toHaveBeenCalledWith("/workspace");
+    expect(container.querySelector('[data-testid="preview-panel"]')?.textContent).toContain(
+      "default-canvas:draft.md",
+    );
+
+    clickButtonByLabel(container, "切换画布标签-变更");
+    await flushEffects();
+    expect(container.textContent).toContain("上一版本");
+    expect(container.textContent).toContain("当前画布正文");
+
+    clickButtonByLabel(container, "切换画布标签-预览");
+    expect(container.textContent).toContain("当前画布正文");
+
+    clickButtonByLabel(container, "折叠画布工作台");
+    expect(
+      container.querySelector('button[aria-label="展开画布工作台"]'),
+    ).not.toBeNull();
+    clickButtonByLabel(container, "展开画布工作台");
+
+    clickButtonByLabel(container, "切换画布标签-产物");
+    clickButtonByLabel(container, "选择画布产物-draft.md");
+    await flushEffects();
+    expect(container.querySelector('[data-testid="preview-panel"]')?.textContent).toContain(
+      "artifact:draft.md",
+    );
+
+    clickButtonByLabel(container, "切换画布标签-全部文件");
+    await flushEffects();
+    clickButtonByLabel(container, "选择工作区文件-README.md");
+    await flushEffects();
+
+    expect(loadFilePreview).toHaveBeenCalledWith("/workspace/README.md");
+    expect(previewTargets.at(-1)?.kind).toBe("synthetic-artifact");
+
+    clickButtonByLabel(container, "复制当前路径");
+    await flushEffects();
+    expect(navigator.clipboard.writeText).toHaveBeenCalledWith(
+      "/workspace/README.md",
+    );
+
+    clickButtonByLabel(container, "定位当前文件");
+    await flushEffects();
+    expect(onRevealPath).toHaveBeenCalledWith("/workspace/README.md");
+
+    clickButtonByLabel(container, "系统打开当前文件");
+    await flushEffects();
+    expect(onOpenPath).toHaveBeenCalledWith("/workspace/README.md");
+
+    clickButtonByLabel(container, "下载当前画布项");
+    expect(globalThis.URL.createObjectURL).toHaveBeenCalledTimes(1);
+    expect(HTMLAnchorElement.prototype.click).toHaveBeenCalledTimes(1);
+  });
+
+  it("工作区文件为二进制时应展示不支持预览提示", async () => {
+    const previewTargets: CanvasWorkbenchPreviewTarget[] = [];
+
+    const container = mount({
+      artifacts: [],
+      canvasState: null,
+      taskFiles: [],
+      workspaceRoot: "/workspace",
+      workspaceUnavailable: false,
+      defaultPreview: null,
+      loadFilePreview: vi.fn(async (path: string) => ({
+        path,
+        content: null,
+        isBinary: true,
+        size: 2048,
+        error: null,
+      })),
+      onOpenPath: vi.fn(async () => undefined),
+      onRevealPath: vi.fn(async () => undefined),
+      renderPreview: (target, options) => {
+        previewTargets.push(target);
+        return (
+          <div data-testid="preview-panel">
+            {options?.stackedWorkbenchTrigger}
+            {target.kind}:{target.title}
+          </div>
+        );
+      },
+    });
+
+    await flushEffects();
+
+    clickButtonByLabel(container, "切换画布标签-全部文件");
+    await flushEffects();
+    clickButtonByLabel(container, "展开目录-src");
+    await flushEffects();
+    clickButtonByLabel(container, "选择工作区文件-binary.dat");
+    await flushEffects();
+
+    expect(previewTargets.at(-1)?.kind).toBe("unsupported");
+
+    clickButtonByLabel(container, "切换画布标签-预览");
+    expect(container.textContent).toContain("该文件为二进制内容");
+  });
+
+  it("容器变窄时应切换为右侧抽屉布局并保持工作台可展开收起", async () => {
+    const container = mount({
+      artifacts: [
+        createArtifact("artifact-new", "draft.md", "标题\n产物版本", 20),
+      ],
+      canvasState: null,
+      taskFiles: [
+        createTaskFile("task-current", "draft.md", "标题\n当前画布正文", 30),
+      ],
+      selectedFileId: "task-current",
+      workspaceRoot: "/workspace",
+      workspaceUnavailable: false,
+      defaultPreview: {
+        selectionKey: "task:task-current",
+        title: "draft.md",
+        content: "标题\n当前画布正文",
+        filePath: "draft.md",
+        absolutePath: "/workspace/draft.md",
+        previousContent: "标题\n上一版本",
+      } satisfies CanvasWorkbenchDefaultPreview,
+      loadFilePreview: vi.fn(async (path: string) => ({
+        path,
+        content: "README 内容",
+        isBinary: false,
+        size: 12,
+        error: null,
+      })),
+      onOpenPath: vi.fn(async () => undefined),
+      onRevealPath: vi.fn(async () => undefined),
+      renderPreview: (target, options) => (
+        <div data-testid="preview-panel">
+          {options?.stackedWorkbenchTrigger}
+          {target.kind}:{target.title}
+        </div>
+      ),
+    });
+
+    await flushEffects();
+
+    expect(
+      container
+        .querySelector('[data-testid="canvas-workbench-shell"]')
+        ?.getAttribute("data-layout-mode"),
+    ).toBe("split");
+    expect(
+      container
+        .querySelector('[data-testid="canvas-workbench-layout"]')
+        ?.getAttribute("data-panel-placement"),
+    ).toBe("side");
+
+    await resizeWorkbench(820);
+    await flushEffects();
+
+    expect(
+      container
+        .querySelector('[data-testid="canvas-workbench-shell"]')
+        ?.getAttribute("data-layout-mode"),
+    ).toBe("stacked");
+    expect(
+      container.querySelector('button[aria-label="展开画布工作台"]'),
+    ).not.toBeNull();
+
+    clickButtonByLabel(container, "展开画布工作台");
+    expect(
+      container
+        .querySelector('[data-testid="canvas-workbench-layout"]')
+        ?.getAttribute("data-panel-placement"),
+    ).toBe("overlay-right");
+    expect(
+      container.querySelector('button[aria-label="折叠画布工作台"]'),
+    ).not.toBeNull();
+
+    clickButtonByLabel(container, "折叠画布工作台");
+    expect(
+      container.querySelector('button[aria-label="展开画布工作台"]'),
+    ).not.toBeNull();
+
+    clickButtonByLabel(container, "展开画布工作台");
+    clickButtonByLabel(container, "切换画布标签-预览");
+    expect(container.textContent).toContain("当前画布正文");
+  });
+});
diff --git a/src/components/agent/chat/components/CanvasWorkbenchLayout.tsx b/src/components/agent/chat/components/CanvasWorkbenchLayout.tsx
new file mode 100644
index 000000000..7d8126a15
--- /dev/null
+++ b/src/components/agent/chat/components/CanvasWorkbenchLayout.tsx
@@ -0,0 +1,1367 @@
+import {
+  memo,
+  useCallback,
+  useEffect,
+  useMemo,
+  useRef,
+  useState,
+  type ReactNode,
+} from "react";
+import {
+  ChevronDown,
+  ChevronRight,
+  Copy,
+  Download,
+  ExternalLink,
+  FileCode2,
+  FileText,
+  Folder,
+  FolderOpen,
+  GitCompare,
+  Loader2,
+  PanelRightClose,
+  PanelRightOpen,
+  RefreshCw,
+} from "lucide-react";
+import { toast } from "sonner";
+import { cn } from "@/lib/utils";
+import { Badge } from "@/components/ui/badge";
+import { listDirectory, type DirectoryListing } from "@/lib/api/fileBrowser";
+import type { Artifact } from "@/lib/artifact/types";
+import type { CanvasStateUnion } from "@/components/content-creator/canvas/canvasUtils";
+import type { DocumentVersion } from "@/components/content-creator/canvas/document/types";
+import type { TaskFile } from "./TaskFiles";
+import type { HarnessFilePreviewResult } from "./HarnessStatusPanel";
+import {
+  buildArtifactFromWrite,
+  formatArtifactWritePhaseLabel,
+  resolveArtifactPreviewText,
+  resolveArtifactWritePhase,
+} from "../utils/messageArtifacts";
+import {
+  buildCanvasWorkbenchDiff,
+  type CanvasWorkbenchDiffLine,
+} from "../utils/canvasWorkbenchDiff";
+
+type CanvasWorkbenchTab = "artifacts" | "files" | "changes" | "preview";
+export type CanvasWorkbenchLayoutMode = "split" | "stacked";
+
+interface CanvasWorkbenchEntryBase {
+  key: string;
+  title: string;
+  subtitle?: string;
+  filePath?: string;
+  absolutePath?: string;
+  previewText?: string;
+  createdAt?: number;
+  isCurrent?: boolean;
+  badgeLabel?: string;
+  kindLabel: string;
+}
+
+interface CanvasWorkbenchArtifactEntry extends CanvasWorkbenchEntryBase {
+  source: "artifact";
+  artifact: Artifact;
+}
+
+interface CanvasWorkbenchDocumentVersionEntry extends CanvasWorkbenchEntryBase {
+  source: "document-version";
+  version: DocumentVersion;
+}
+
+interface CanvasWorkbenchTaskFileEntry extends CanvasWorkbenchEntryBase {
+  source: "task-file";
+  taskFile: TaskFile;
+}
+
+type CanvasWorkbenchEntry =
+  | CanvasWorkbenchArtifactEntry
+  | CanvasWorkbenchDocumentVersionEntry
+  | CanvasWorkbenchTaskFileEntry;
+
+export interface CanvasWorkbenchDefaultPreview {
+  selectionKey?: string | null;
+  title: string;
+  content: string;
+  filePath?: string;
+  absolutePath?: string;
+  previousContent?: string | null;
+}
+
+export type CanvasWorkbenchPreviewTarget =
+  | {
+      kind: "default-canvas";
+      title: string;
+      content: string;
+      filePath?: string;
+      absolutePath?: string;
+    }
+  | {
+      kind: "artifact";
+      title: string;
+      artifact: Artifact;
+      filePath?: string;
+      absolutePath?: string;
+    }
+  | {
+      kind: "synthetic-artifact";
+      title: string;
+      artifact: Artifact;
+      filePath?: string;
+      absolutePath?: string;
+    }
+  | {
+      kind: "loading";
+      title: string;
+      filePath?: string;
+      absolutePath?: string;
+    }
+  | {
+      kind: "unsupported";
+      title: string;
+      reason: string;
+      filePath?: string;
+      absolutePath?: string;
+    }
+  | {
+      kind: "empty";
+      title: string;
+    };
+
+interface WorkspaceFileSelection {
+  path: string;
+  title: string;
+  status: "loading" | "ready" | "error" | "binary";
+  content?: string;
+  error?: string | null;
+  size?: number;
+}
+
+export interface CanvasWorkbenchLayoutProps {
+  artifacts: Artifact[];
+  canvasState: CanvasStateUnion | null;
+  taskFiles: TaskFile[];
+  selectedFileId?: string;
+  workspaceRoot?: string | null;
+  workspaceUnavailable?: boolean;
+  defaultPreview: CanvasWorkbenchDefaultPreview | null;
+  loadFilePreview: (path: string) => Promise<HarnessFilePreviewResult>;
+  onOpenPath: (path: string) => Promise<void>;
+  onRevealPath: (path: string) => Promise<void>;
+  renderPreview: (
+    target: CanvasWorkbenchPreviewTarget,
+    options?: {
+      stackedWorkbenchTrigger?: ReactNode;
+    },
+  ) => ReactNode;
+  onLayoutModeChange?: (mode: CanvasWorkbenchLayoutMode) => void;
+}
+
+const TAB_META: Array<{ key: CanvasWorkbenchTab; label: string }> = [
+  { key: "artifacts", label: "产物" },
+  { key: "files", label: "全部文件" },
+  { key: "changes", label: "变更" },
+  { key: "preview", label: "预览" },
+];
+
+const STACKED_LAYOUT_BREAKPOINT = 1040;
+
+function normalizePath(value: string): string {
+  return value.replace(/\\/g, "/");
+}
+
+function isAbsoluteLikePath(value: string): boolean {
+  return (
+    value.startsWith("/") ||
+    value.startsWith("~/") ||
+    /^[A-Za-z]:[\\/]/.test(value) ||
+    value.startsWith("\\\\")
+  );
+}
+
+function joinWorkspacePath(rootPath: string, filePath: string): string {
+  return `${rootPath.replace(/[\\/]+$/, "")}/${filePath.replace(/^[\\/]+/, "")}`;
+}
+
+function resolveWorkspacePath(
+  workspaceRoot: string | null | undefined,
+  filePath: string | null | undefined,
+): string | undefined {
+  const normalized = filePath?.trim();
+  if (!normalized) {
+    return undefined;
+  }
+  if (isAbsoluteLikePath(normalized)) {
+    return normalized;
+  }
+  if (!workspaceRoot?.trim()) {
+    return normalized;
+  }
+  return joinWorkspacePath(workspaceRoot.trim(), normalized);
+}
+
+function resolveFileName(path: string | null | undefined): string {
+  const normalized = normalizePath(path?.trim() || "");
+  if (!normalized) {
+    return "未命名文件";
+  }
+  const parts = normalized.split("/");
+  return parts[parts.length - 1] || normalized;
+}
+
+function buildSyntheticArtifact(
+  id: string,
+  filePath: string,
+  content: string,
+): Artifact {
+  return buildArtifactFromWrite({
+    filePath,
+    content,
+    context: {
+      artifactId: id,
+      status: "complete",
+      metadata: {
+        previewText: content,
+      },
+    },
+  });
+}
+
+function downloadText(filename: string, content: string): void {
+  const blob = new Blob([content], { type: "text/plain;charset=utf-8" });
+  const url = URL.createObjectURL(blob);
+  const anchor = document.createElement("a");
+  anchor.href = url;
+  anchor.download = filename;
+  document.body.appendChild(anchor);
+  anchor.click();
+  document.body.removeChild(anchor);
+  URL.revokeObjectURL(url);
+}
+
+function resolvePreviousVersionContent(
+  version: DocumentVersion,
+  versions: DocumentVersion[],
+): string | null {
+  const parentVersionId = version.metadata?.parentVersionId?.trim();
+  if (parentVersionId) {
+    const parentVersion = versions.find((item) => item.id === parentVersionId);
+    if (parentVersion) {
+      return parentVersion.content;
+    }
+  }
+
+  const currentIndex = versions.findIndex((item) => item.id === version.id);
+  if (currentIndex > 0) {
+    return versions[currentIndex - 1]?.content || null;
+  }
+
+  return null;
+}
+
+function resolvePreviousArtifactContent(
+  artifact: Artifact,
+  artifacts: Artifact[],
+): string | null {
+  const currentPath = normalizePath(
+    typeof artifact.meta.filePath === "string"
+      ? artifact.meta.filePath
+      : artifact.meta.filename || artifact.title,
+  );
+
+  for (let index = artifacts.length - 1; index >= 0; index -= 1) {
+    const candidate = artifacts[index];
+    if (candidate.id === artifact.id) {
+      continue;
+    }
+    const candidatePath = normalizePath(
+      typeof candidate.meta.filePath === "string"
+        ? candidate.meta.filePath
+        : candidate.meta.filename || candidate.title,
+    );
+    if (candidatePath === currentPath && candidate.content.trim()) {
+      return candidate.content;
+    }
+  }
+
+  return null;
+}
+
+function isDocumentCanvasState(
+  state: CanvasStateUnion | null,
+): state is Extract<CanvasStateUnion, { type: "document" }> {
+  return Boolean(state && state.type === "document");
+}
+
+function resolveMappedPreviousContentForPath(
+  absolutePath: string,
+  canvasState: CanvasStateUnion | null,
+  artifacts: Artifact[],
+  workspaceRoot?: string | null,
+): string | null {
+  const normalizedTarget = normalizePath(absolutePath);
+  if (isDocumentCanvasState(canvasState)) {
+    const matchedVersion = canvasState.versions.find((version) => {
+      const versionPath = resolveWorkspacePath(
+        workspaceRoot,
+        version.metadata?.sourceFileName,
+      );
+      return versionPath ? normalizePath(versionPath) === normalizedTarget : false;
+    });
+    if (matchedVersion) {
+      return resolvePreviousVersionContent(matchedVersion, canvasState.versions);
+    }
+  }
+
+  const matchedArtifact = artifacts.find((artifact) => {
+    const artifactPath = resolveWorkspacePath(
+      workspaceRoot,
+      typeof artifact.meta.filePath === "string"
+        ? artifact.meta.filePath
+        : artifact.meta.filename || artifact.title,
+    );
+    return artifactPath ? normalizePath(artifactPath) === normalizedTarget : false;
+  });
+
+  return matchedArtifact
+    ? resolvePreviousArtifactContent(matchedArtifact, artifacts)
+    : null;
+}
+
+function buildEntries(
+  artifacts: Artifact[],
+  canvasState: CanvasStateUnion | null,
+  taskFiles: TaskFile[],
+  workspaceRoot?: string | null,
+): CanvasWorkbenchEntry[] {
+  const entries: CanvasWorkbenchEntry[] = artifacts
+    .slice()
+    .reverse()
+    .map((artifact) => {
+      const filePath =
+        typeof artifact.meta.filePath === "string"
+          ? artifact.meta.filePath
+          : artifact.meta.filename || artifact.title;
+      const writePhase = resolveArtifactWritePhase(artifact);
+      return {
+        key: `artifact:${artifact.id}`,
+        source: "artifact",
+        artifact,
+        title: artifact.title,
+        subtitle: filePath,
+        filePath,
+        absolutePath: resolveWorkspacePath(workspaceRoot, filePath),
+        previewText: resolveArtifactPreviewText(artifact),
+        createdAt: artifact.updatedAt || artifact.createdAt,
+        badgeLabel: writePhase ? formatArtifactWritePhaseLabel(writePhase) : undefined,
+        kindLabel: "产物",
+      };
+    });
+
+  if (isDocumentCanvasState(canvasState)) {
+    entries.push(
+      ...canvasState.versions
+        .slice()
+        .reverse()
+        .map((version, index) => ({
+          key: `version:${version.id}`,
+          source: "document-version" as const,
+          version,
+          title:
+            version.description?.trim() ||
+            `文稿版本 ${canvasState.versions.length - index}`,
+          subtitle: version.metadata?.sourceFileName || "当前文稿",
+          filePath: version.metadata?.sourceFileName,
+          absolutePath: resolveWorkspacePath(
+            workspaceRoot,
+            version.metadata?.sourceFileName,
+          ),
+          previewText: version.content.trim().slice(0, 180),
+          createdAt: version.createdAt,
+          isCurrent: version.id === canvasState.currentVersionId,
+          badgeLabel: version.id === canvasState.currentVersionId ? "当前" : undefined,
+          kindLabel: "版本",
+        })),
+    );
+  }
+
+  entries.push(
+    ...taskFiles
+      .slice()
+      .sort((left, right) => right.updatedAt - left.updatedAt)
+      .map((taskFile) => ({
+        key: `task:${taskFile.id}`,
+        source: "task-file" as const,
+        taskFile,
+        title: resolveFileName(taskFile.name),
+        subtitle: taskFile.name,
+        filePath: taskFile.name,
+        absolutePath: resolveWorkspacePath(workspaceRoot, taskFile.name),
+        previewText: taskFile.content?.trim().slice(0, 180),
+        createdAt: taskFile.updatedAt,
+        badgeLabel: taskFile.type === "document" ? "文档" : undefined,
+        kindLabel: "任务文件",
+      })),
+  );
+
+  const seen = new Set<string>();
+  return entries.filter((entry) => {
+    if (seen.has(entry.key)) {
+      return false;
+    }
+    seen.add(entry.key);
+    return true;
+  });
+}
+
+function renderDiffState(
+  diffLines: CanvasWorkbenchDiffLine[],
+): ReactNode {
+  return (
+    <div className="overflow-hidden rounded-xl border border-border bg-background">
+      <div className="max-h-[28rem] overflow-auto">
+        {diffLines.map((line, index) => (
+          <div
+            key={`${line.type}-${index}`}
+            className={cn(
+              "grid grid-cols-[20px_1fr] gap-3 px-3 py-2 font-mono text-[12px] leading-6",
+              line.type === "add" && "bg-emerald-50 text-emerald-900",
+              line.type === "remove" && "bg-rose-50 text-rose-900",
+              line.type === "context" && "text-muted-foreground",
+            )}
+          >
+            <span className="select-none text-center">
+              {line.type === "add" ? "+" : line.type === "remove" ? "-" : " "}
+            </span>
+            <span className="whitespace-pre-wrap break-all">{line.value || " "}</span>
+          </div>
+        ))}
+      </div>
+    </div>
+  );
+}
+
+export const CanvasWorkbenchLayout = memo(function CanvasWorkbenchLayout({
+  artifacts,
+  canvasState,
+  taskFiles,
+  selectedFileId,
+  workspaceRoot,
+  workspaceUnavailable = false,
+  defaultPreview,
+  loadFilePreview,
+  onOpenPath,
+  onRevealPath,
+  renderPreview,
+  onLayoutModeChange,
+}: CanvasWorkbenchLayoutProps) {
+  const shellRef = useRef<HTMLDivElement | null>(null);
+  const [activeTab, setActiveTab] = useState<CanvasWorkbenchTab>("artifacts");
+  const [collapsed, setCollapsed] = useState(false);
+  const [isStackedLayout, setIsStackedLayout] = useState(false);
+  const [stackedWorkbenchOpen, setStackedWorkbenchOpen] = useState(false);
+  const [selectedKey, setSelectedKey] = useState<string | null>(null);
+  const [directoryCache, setDirectoryCache] = useState<Record<string, DirectoryListing>>(
+    {},
+  );
+  const [loadingDirectories, setLoadingDirectories] = useState<Record<string, boolean>>(
+    {},
+  );
+  const [expandedDirectories, setExpandedDirectories] = useState<Record<string, boolean>>(
+    {},
+  );
+  const [workspaceFileSelections, setWorkspaceFileSelections] = useState<
+    Record<string, WorkspaceFileSelection>
+  >({});
+
+  const entries = useMemo(
+    () => buildEntries(artifacts, canvasState, taskFiles, workspaceRoot),
+    [artifacts, canvasState, taskFiles, workspaceRoot],
+  );
+
+  const entryMap = useMemo(
+    () => new Map(entries.map((entry) => [entry.key, entry])),
+    [entries],
+  );
+
+  const fallbackEntryKey = useMemo(() => {
+    if (defaultPreview) {
+      if (
+        defaultPreview.selectionKey &&
+        entryMap.has(defaultPreview.selectionKey)
+      ) {
+        return defaultPreview.selectionKey;
+      }
+      return null;
+    }
+
+    if (selectedFileId) {
+      const selectedTaskKey = `task:${selectedFileId}`;
+      if (entryMap.has(selectedTaskKey)) {
+        return selectedTaskKey;
+      }
+    }
+
+    return entries[0]?.key || null;
+  }, [defaultPreview, entries, entryMap, selectedFileId]);
+
+  useEffect(() => {
+    if (selectedKey && (entryMap.has(selectedKey) || selectedKey.startsWith("workspace-file:"))) {
+      return;
+    }
+    setSelectedKey(fallbackEntryKey);
+  }, [entryMap, fallbackEntryKey, selectedKey]);
+
+  const loadDirectory = useCallback(async (path: string) => {
+    if (!path.trim()) {
+      return;
+    }
+    setLoadingDirectories((previous) => ({ ...previous, [path]: true }));
+    try {
+      const listing = await listDirectory(path);
+      setDirectoryCache((previous) => ({
+        ...previous,
+        [path]: listing,
+      }));
+    } catch (error) {
+      toast.error(
+        `读取目录失败：${error instanceof Error ? error.message : String(error)}`,
+      );
+    } finally {
+      setLoadingDirectories((previous) => ({ ...previous, [path]: false }));
+    }
+  }, []);
+
+  useEffect(() => {
+    if (!workspaceRoot?.trim() || workspaceUnavailable) {
+      return;
+    }
+    if (directoryCache[workspaceRoot]) {
+      return;
+    }
+    void loadDirectory(workspaceRoot);
+  }, [
+    directoryCache,
+    loadDirectory,
+    workspaceRoot,
+    workspaceUnavailable,
+  ]);
+
+  useEffect(() => {
+    const node = shellRef.current;
+    if (!node) {
+      return;
+    }
+
+    const updateLayout = (width: number) => {
+      if (width <= 0) {
+        return;
+      }
+      setIsStackedLayout(width < STACKED_LAYOUT_BREAKPOINT);
+    };
+
+    const fallbackWidth =
+      node.getBoundingClientRect().width || node.clientWidth || window.innerWidth;
+    updateLayout(fallbackWidth);
+
+    if (typeof ResizeObserver === "undefined") {
+      return;
+    }
+
+    const observer = new ResizeObserver((entries) => {
+      const nextWidth =
+        entries[0]?.contentRect.width ||
+        node.getBoundingClientRect().width ||
+        node.clientWidth;
+      updateLayout(nextWidth);
+    });
+
+    observer.observe(node);
+    return () => {
+      observer.disconnect();
+    };
+  }, []);
+
+  useEffect(() => {
+    onLayoutModeChange?.(isStackedLayout ? "stacked" : "split");
+  }, [isStackedLayout, onLayoutModeChange]);
+
+  useEffect(() => {
+    if (isStackedLayout) {
+      setStackedWorkbenchOpen(false);
+    }
+  }, [isStackedLayout]);
+
+  const handleToggleDirectory = useCallback(
+    (path: string) => {
+      setExpandedDirectories((previous) => {
+        const nextExpanded = !previous[path];
+        return {
+          ...previous,
+          [path]: nextExpanded,
+        };
+      });
+      if (!directoryCache[path]) {
+        void loadDirectory(path);
+      }
+    },
+    [directoryCache, loadDirectory],
+  );
+
+  const handleSelectWorkspaceFile = useCallback(
+    async (path: string) => {
+      const title = resolveFileName(path);
+      const selectionKey = `workspace-file:${path}`;
+      setSelectedKey(selectionKey);
+      setWorkspaceFileSelections((previous) => ({
+        ...previous,
+        [selectionKey]: {
+          path,
+          title,
+          status: "loading",
+        },
+      }));
+
+      const preview = await loadFilePreview(path);
+      setWorkspaceFileSelections((previous) => {
+        if (preview.isBinary) {
+          return {
+            ...previous,
+            [selectionKey]: {
+              path,
+              title,
+              status: "binary",
+              error: preview.error ?? null,
+              size: preview.size,
+            },
+          };
+        }
+
+        if (preview.error) {
+          return {
+            ...previous,
+            [selectionKey]: {
+              path,
+              title,
+              status: "error",
+              error: preview.error,
+              size: preview.size,
+            },
+          };
+        }
+
+        return {
+          ...previous,
+          [selectionKey]: {
+            path,
+            title,
+            status: "ready",
+            content: preview.content || "",
+            size: preview.size,
+          },
+        };
+      });
+    },
+    [loadFilePreview],
+  );
+
+  const effectiveKey = selectedKey || fallbackEntryKey;
+  const selectedEntry = effectiveKey ? entryMap.get(effectiveKey) || null : null;
+  const selectedWorkspaceFile = effectiveKey?.startsWith("workspace-file:")
+    ? workspaceFileSelections[effectiveKey] || null
+    : null;
+
+  const currentTarget = useMemo<CanvasWorkbenchPreviewTarget>(() => {
+    if (selectedWorkspaceFile) {
+      if (selectedWorkspaceFile.status === "loading") {
+        return {
+          kind: "loading",
+          title: selectedWorkspaceFile.title,
+          filePath: selectedWorkspaceFile.path,
+          absolutePath: selectedWorkspaceFile.path,
+        };
+      }
+
+      if (selectedWorkspaceFile.status === "binary") {
+        return {
+          kind: "unsupported",
+          title: selectedWorkspaceFile.title,
+          reason: "该文件为二进制内容，暂不支持画布文本预览。",
+          filePath: selectedWorkspaceFile.path,
+          absolutePath: selectedWorkspaceFile.path,
+        };
+      }
+
+      if (selectedWorkspaceFile.status === "error") {
+        return {
+          kind: "unsupported",
+          title: selectedWorkspaceFile.title,
+          reason: selectedWorkspaceFile.error || "读取文件失败",
+          filePath: selectedWorkspaceFile.path,
+          absolutePath: selectedWorkspaceFile.path,
+        };
+      }
+
+      return {
+        kind: "synthetic-artifact",
+        title: selectedWorkspaceFile.title,
+        artifact: buildSyntheticArtifact(
+          `canvas-workbench:file:${selectedWorkspaceFile.path}`,
+          selectedWorkspaceFile.path,
+          selectedWorkspaceFile.content || "",
+        ),
+        filePath: selectedWorkspaceFile.path,
+        absolutePath: selectedWorkspaceFile.path,
+      };
+    }
+
+    if (selectedEntry) {
+      if (
+        defaultPreview &&
+        selectedEntry.key === defaultPreview.selectionKey &&
+        defaultPreview.content.trim()
+      ) {
+        return {
+          kind: "default-canvas",
+          title: defaultPreview.title,
+          content: defaultPreview.content,
+          filePath: defaultPreview.filePath,
+          absolutePath: defaultPreview.absolutePath,
+        };
+      }
+
+      if (selectedEntry.source === "artifact") {
+        return {
+          kind: "artifact",
+          title: selectedEntry.title,
+          artifact: selectedEntry.artifact,
+          filePath: selectedEntry.filePath,
+          absolutePath: selectedEntry.absolutePath,
+        };
+      }
+
+      if (selectedEntry.source === "document-version") {
+        return {
+          kind: "synthetic-artifact",
+          title: selectedEntry.title,
+          artifact: buildSyntheticArtifact(
+            `canvas-workbench:version:${selectedEntry.version.id}`,
+            selectedEntry.filePath || `${selectedEntry.title}.md`,
+            selectedEntry.version.content,
+          ),
+          filePath: selectedEntry.filePath,
+          absolutePath: selectedEntry.absolutePath,
+        };
+      }
+
+      return {
+        kind: "synthetic-artifact",
+        title: selectedEntry.title,
+        artifact: buildSyntheticArtifact(
+          `canvas-workbench:task:${selectedEntry.taskFile.id}`,
+          selectedEntry.filePath || selectedEntry.title,
+          selectedEntry.taskFile.content || "",
+        ),
+        filePath: selectedEntry.filePath,
+        absolutePath: selectedEntry.absolutePath,
+      };
+    }
+
+    if (defaultPreview) {
+      return {
+        kind: "default-canvas",
+        title: defaultPreview.title,
+        content: defaultPreview.content,
+        filePath: defaultPreview.filePath,
+        absolutePath: defaultPreview.absolutePath,
+      };
+    }
+
+    return {
+      kind: "empty",
+      title: "暂无可预览内容",
+    };
+  }, [defaultPreview, selectedEntry, selectedWorkspaceFile]);
+
+  const currentContent = useMemo(() => {
+    if (currentTarget.kind === "default-canvas") {
+      return currentTarget.content;
+    }
+    if (
+      currentTarget.kind === "artifact" ||
+      currentTarget.kind === "synthetic-artifact"
+    ) {
+      return currentTarget.artifact.content;
+    }
+    return "";
+  }, [currentTarget]);
+
+  const previousContent = useMemo(() => {
+    if (selectedWorkspaceFile?.status === "ready") {
+      return resolveMappedPreviousContentForPath(
+        selectedWorkspaceFile.path,
+        canvasState,
+        artifacts,
+        workspaceRoot,
+      );
+    }
+
+    if (!selectedEntry) {
+      return defaultPreview?.previousContent || null;
+    }
+
+    if (
+      defaultPreview &&
+      selectedEntry.key === defaultPreview.selectionKey &&
+      defaultPreview.content.trim()
+    ) {
+      return defaultPreview.previousContent || null;
+    }
+
+    if (selectedEntry.source === "artifact") {
+      return resolvePreviousArtifactContent(selectedEntry.artifact, artifacts);
+    }
+
+    if (selectedEntry.source === "document-version" && isDocumentCanvasState(canvasState)) {
+      return resolvePreviousVersionContent(selectedEntry.version, canvasState.versions);
+    }
+
+    if (selectedEntry.absolutePath) {
+      return resolveMappedPreviousContentForPath(
+        selectedEntry.absolutePath,
+        canvasState,
+        artifacts,
+        workspaceRoot,
+      );
+    }
+
+    return null;
+  }, [
+    artifacts,
+    canvasState,
+    defaultPreview,
+    selectedEntry,
+    selectedWorkspaceFile,
+    workspaceRoot,
+  ]);
+
+  const diffLines = useMemo(
+    () =>
+      previousContent !== null
+        ? buildCanvasWorkbenchDiff(previousContent, currentContent)
+        : [],
+    [currentContent, previousContent],
+  );
+
+  const selectionPath =
+    currentTarget.kind === "default-canvas" ||
+    currentTarget.kind === "artifact" ||
+    currentTarget.kind === "synthetic-artifact" ||
+    currentTarget.kind === "loading" ||
+    currentTarget.kind === "unsupported"
+      ? currentTarget.absolutePath || currentTarget.filePath
+      : undefined;
+
+  const handleCopyPath = useCallback(async () => {
+    if (!selectionPath) {
+      return;
+    }
+    try {
+      if (!navigator.clipboard?.writeText) {
+        throw new Error("当前环境不支持剪贴板写入");
+      }
+      await navigator.clipboard.writeText(selectionPath);
+      toast.success("已复制路径");
+    } catch (error) {
+      toast.error(
+        error instanceof Error ? error.message : "复制路径失败",
+      );
+    }
+  }, [selectionPath]);
+
+  const handleDownload = useCallback(() => {
+    if (!currentContent.trim()) {
+      return;
+    }
+    const filename = resolveFileName(selectionPath || currentTarget.title);
+    downloadText(filename, currentContent);
+  }, [currentContent, currentTarget.title, selectionPath]);
+
+  const renderEntriesTab = () => {
+    if (entries.length === 0) {
+      return (
+        <div className="rounded-xl border border-dashed border-border px-4 py-6 text-sm text-muted-foreground">
+          暂无产物记录，可先生成一份文稿或从文件树中选择已有文件。
+        </div>
+      );
+    }
+
+    return (
+      <div className="space-y-2">
+        {entries.map((entry) => (
+          <button
+            key={entry.key}
+            type="button"
+            aria-label={`选择画布产物-${entry.title}`}
+            onClick={() => setSelectedKey(entry.key)}
+            className={cn(
+              "w-full rounded-xl border px-3 py-3 text-left transition-colors",
+              effectiveKey === entry.key
+                ? "border-primary/30 bg-primary/5"
+                : "border-border bg-background hover:bg-muted/60",
+            )}
+          >
+            <div className="flex items-start justify-between gap-3">
+              <div className="min-w-0 flex-1">
+                <div className="flex items-center gap-2">
+                  <span className="rounded-full bg-muted px-2 py-0.5 text-[10px] font-medium text-muted-foreground">
+                    {entry.kindLabel}
+                  </span>
+                  {entry.isCurrent ? (
+                    <span className="rounded-full bg-emerald-50 px-2 py-0.5 text-[10px] font-medium text-emerald-700">
+                      当前
+                    </span>
+                  ) : null}
+                </div>
+                <div className="mt-2 truncate text-sm font-medium text-foreground">
+                  {entry.title}
+                </div>
+                {entry.subtitle ? (
+                  <div className="mt-1 truncate text-xs text-muted-foreground">
+                    {entry.subtitle}
+                  </div>
+                ) : null}
+                {entry.previewText ? (
+                  <div className="mt-2 line-clamp-3 text-xs leading-5 text-muted-foreground">
+                    {entry.previewText}
+                  </div>
+                ) : null}
+              </div>
+              {entry.badgeLabel ? (
+                <Badge variant="outline" className="shrink-0">
+                  {entry.badgeLabel}
+                </Badge>
+              ) : null}
+            </div>
+          </button>
+        ))}
+      </div>
+    );
+  };
+
+  const renderDirectoryNode = (path: string, depth = 0): ReactNode => {
+    const listing = directoryCache[path];
+    if (!listing) {
+      return null;
+    }
+
+    return listing.entries.map((entry) => {
+      const rowKey = entry.path;
+      const isDirectory = entry.isDir;
+      const isExpanded = Boolean(expandedDirectories[entry.path]);
+      const fileSelectionKey = `workspace-file:${entry.path}`;
+      const isSelected = effectiveKey === fileSelectionKey;
+
+      return (
+        <div key={rowKey}>
+          <button
+            type="button"
+            aria-label={
+              isDirectory
+                ? `${isExpanded ? "折叠" : "展开"}目录-${entry.name}`
+                : `选择工作区文件-${entry.name}`
+            }
+            onClick={() => {
+              if (isDirectory) {
+                handleToggleDirectory(entry.path);
+                return;
+              }
+              void handleSelectWorkspaceFile(entry.path);
+            }}
+            className={cn(
+              "flex w-full items-center gap-2 rounded-lg px-2 py-2 text-left text-sm transition-colors",
+              isSelected
+                ? "bg-primary/10 text-foreground"
+                : "hover:bg-muted/60 text-muted-foreground",
+            )}
+            style={{ paddingLeft: `${depth * 14 + 8}px` }}
+          >
+            {isDirectory ? (
+              isExpanded ? (
+                <ChevronDown className="h-4 w-4 shrink-0" />
+              ) : (
+                <ChevronRight className="h-4 w-4 shrink-0" />
+              )
+            ) : (
+              <span className="w-4 shrink-0" />
+            )}
+            {isDirectory ? (
+              isExpanded ? (
+                <FolderOpen className="h-4 w-4 shrink-0 text-amber-600" />
+              ) : (
+                <Folder className="h-4 w-4 shrink-0 text-amber-600" />
+              )
+            ) : entry.name.match(/\.(ts|tsx|js|jsx|rs|json|yml|yaml|toml)$/i) ? (
+              <FileCode2 className="h-4 w-4 shrink-0 text-sky-600" />
+            ) : (
+              <FileText className="h-4 w-4 shrink-0 text-slate-500" />
+            )}
+            <span className="min-w-0 flex-1 truncate">{entry.name}</span>
+            {loadingDirectories[entry.path] ? (
+              <Loader2 className="h-4 w-4 shrink-0 animate-spin" />
+            ) : null}
+          </button>
+          {isDirectory && isExpanded ? renderDirectoryNode(entry.path, depth + 1) : null}
+        </div>
+      );
+    });
+  };
+
+  const renderFilesTab = () => {
+    if (workspaceUnavailable) {
+      return (
+        <div className="rounded-xl border border-dashed border-border px-4 py-6 text-sm text-muted-foreground">
+          当前工作区路径不可用，暂时无法浏览全部文件。
+        </div>
+      );
+    }
+
+    if (!workspaceRoot?.trim()) {
+      return (
+        <div className="rounded-xl border border-dashed border-border px-4 py-6 text-sm text-muted-foreground">
+          当前会话没有绑定可浏览的工作区目录。
+        </div>
+      );
+    }
+
+    const rootListing = directoryCache[workspaceRoot];
+    return (
+      <div className="rounded-xl border border-border bg-background">
+        <div className="flex items-center justify-between border-b border-border px-3 py-3">
+          <div className="min-w-0">
+            <div className="text-xs font-medium uppercase tracking-[0.08em] text-muted-foreground">
+              Workspace Root
+            </div>
+            <div className="mt-1 truncate text-sm text-foreground">{workspaceRoot}</div>
+          </div>
+          <button
+            type="button"
+            aria-label="刷新工作区文件树"
+            onClick={() => void loadDirectory(workspaceRoot)}
+            className="rounded-md border border-border px-2 py-1 text-xs text-muted-foreground transition-colors hover:bg-muted/60 hover:text-foreground"
+          >
+            <RefreshCw className="h-3.5 w-3.5" />
+          </button>
+        </div>
+        <div className="max-h-[30rem] overflow-auto px-2 py-2">
+          {loadingDirectories[workspaceRoot] && !rootListing ? (
+            <div className="flex items-center gap-2 px-2 py-4 text-sm text-muted-foreground">
+              <Loader2 className="h-4 w-4 animate-spin" />
+              正在加载目录...
+            </div>
+          ) : rootListing ? (
+            renderDirectoryNode(workspaceRoot)
+          ) : (
+            <div className="px-2 py-4 text-sm text-muted-foreground">
+              暂无目录内容。
+            </div>
+          )}
+        </div>
+      </div>
+    );
+  };
+
+  const renderChangesTab = () => {
+    if (!currentContent.trim()) {
+      return (
+        <div className="rounded-xl border border-dashed border-border px-4 py-6 text-sm text-muted-foreground">
+          当前选中项没有可比较的正文内容。
+        </div>
+      );
+    }
+
+    if (previousContent === null) {
+      return (
+        <div className="rounded-xl border border-dashed border-border px-4 py-6 text-sm text-muted-foreground">
+          当前选中项没有可用的上一版本，暂时无法展示变更。
+        </div>
+      );
+    }
+
+    return renderDiffState(diffLines);
+  };
+
+  const renderPreviewTab = () => {
+    if (currentTarget.kind === "loading") {
+      return (
+        <div className="flex items-center gap-2 rounded-xl border border-border bg-background px-4 py-6 text-sm text-muted-foreground">
+          <Loader2 className="h-4 w-4 animate-spin" />
+          正在读取文件内容...
+        </div>
+      );
+    }
+
+    if (currentTarget.kind === "unsupported") {
+      return (
+        <div className="rounded-xl border border-dashed border-border px-4 py-6 text-sm text-muted-foreground">
+          {currentTarget.reason}
+        </div>
+      );
+    }
+
+    if (!currentContent.trim()) {
+      return (
+        <div className="rounded-xl border border-dashed border-border px-4 py-6 text-sm text-muted-foreground">
+          当前选中项暂无可展示内容。
+        </div>
+      );
+    }
+
+    return (
+      <div className="overflow-hidden rounded-xl border border-border bg-background">
+        <div className="max-h-[30rem] overflow-auto px-4 py-4">
+          <pre className="whitespace-pre-wrap break-all text-xs leading-6 text-foreground">
+            {currentContent}
+          </pre>
+        </div>
+      </div>
+    );
+  };
+
+  const renderTabButtons = (stacked: boolean) => (
+    <div
+      className={cn(
+        "mt-4 grid gap-2",
+        stacked ? "grid-cols-2" : "grid-cols-4",
+      )}
+    >
+      {TAB_META.map((tab) => (
+        <button
+          key={tab.key}
+          type="button"
+          aria-label={`切换画布标签-${tab.label}`}
+          onClick={() => setActiveTab(tab.key)}
+          className={cn(
+            "rounded-lg border px-2 py-2 text-xs font-medium transition-colors",
+            activeTab === tab.key
+              ? "border-primary/30 bg-primary/10 text-foreground"
+              : "border-border bg-background text-muted-foreground hover:bg-muted/60 hover:text-foreground",
+          )}
+        >
+          {tab.label}
+        </button>
+      ))}
+    </div>
+  );
+
+  const renderWorkbenchHeader = (
+    stacked: boolean,
+    options?: {
+      showCollapseButton?: boolean;
+    },
+  ) => (
+    <div className={cn("border-b border-border/80", stacked ? "px-3 py-3" : "px-4 py-4")}>
+      <div className="flex items-start justify-between gap-3">
+        <div className="min-w-0">
+          <div className="text-[11px] font-semibold uppercase tracking-[0.08em] text-muted-foreground">
+            Canvas Workbench
+          </div>
+          <div className="mt-1 truncate text-sm font-semibold text-foreground">
+            {currentTarget.title}
+          </div>
+          {selectionPath ? (
+            <div className="mt-1 truncate text-xs text-muted-foreground">
+              {selectionPath}
+            </div>
+          ) : null}
+        </div>
+        <div className="flex items-center gap-2">
+          <button
+            type="button"
+            aria-label="下载当前画布项"
+            disabled={!currentContent.trim()}
+            onClick={handleDownload}
+            className="inline-flex h-8 w-8 items-center justify-center rounded-lg border border-border text-muted-foreground transition-colors hover:bg-muted/60 hover:text-foreground disabled:cursor-not-allowed disabled:opacity-50"
+          >
+            <Download className="h-4 w-4" />
+          </button>
+          {stacked || options?.showCollapseButton ? (
+            <button
+              type="button"
+              aria-label="折叠画布工作台"
+              onClick={() => {
+                if (stacked) {
+                  setStackedWorkbenchOpen(false);
+                  return;
+                }
+                setCollapsed(true);
+              }}
+              className="inline-flex h-8 w-8 items-center justify-center rounded-lg border border-border text-muted-foreground transition-colors hover:bg-muted/60 hover:text-foreground"
+            >
+              <PanelRightClose className="h-4 w-4" />
+            </button>
+          ) : null}
+        </div>
+      </div>
+      {renderTabButtons(stacked)}
+    </div>
+  );
+
+  const renderWorkbenchFooter = (stacked: boolean) => (
+    <div className={cn("border-t border-border/80", stacked ? "px-3 py-3" : "px-4 py-3")}>
+      <div className="flex flex-wrap gap-2">
+        <button
+          type="button"
+          aria-label="复制当前路径"
+          disabled={!selectionPath}
+          onClick={() => {
+            void handleCopyPath();
+          }}
+          className="inline-flex items-center gap-1 rounded-lg border border-border px-3 py-2 text-xs text-muted-foreground transition-colors hover:bg-muted/60 hover:text-foreground disabled:cursor-not-allowed disabled:opacity-50"
+        >
+          <Copy className="h-3.5 w-3.5" />
+          复制路径
+        </button>
+        <button
+          type="button"
+          aria-label="定位当前文件"
+          disabled={!selectionPath}
+          onClick={() => {
+            if (selectionPath) {
+              void onRevealPath(selectionPath);
+            }
+          }}
+          className="inline-flex items-center gap-1 rounded-lg border border-border px-3 py-2 text-xs text-muted-foreground transition-colors hover:bg-muted/60 hover:text-foreground disabled:cursor-not-allowed disabled:opacity-50"
+        >
+          <FolderOpen className="h-3.5 w-3.5" />
+          定位
+        </button>
+        <button
+          type="button"
+          aria-label="系统打开当前文件"
+          disabled={!selectionPath}
+          onClick={() => {
+            if (selectionPath) {
+              void onOpenPath(selectionPath);
+            }
+          }}
+          className="inline-flex items-center gap-1 rounded-lg border border-border px-3 py-2 text-xs text-muted-foreground transition-colors hover:bg-muted/60 hover:text-foreground disabled:cursor-not-allowed disabled:opacity-50"
+        >
+          <ExternalLink className="h-3.5 w-3.5" />
+          打开
+        </button>
+      </div>
+      {previousContent !== null ? (
+        <div className="mt-3 flex items-center gap-2 text-[11px] text-muted-foreground">
+          <GitCompare className="h-3.5 w-3.5" />
+          已关联到上一版本，可在“变更”中查看差异。
+        </div>
+      ) : null}
+    </div>
+  );
+
+  const renderActiveTab = () =>
+    activeTab === "artifacts"
+      ? renderEntriesTab()
+      : activeTab === "files"
+        ? renderFilesTab()
+        : activeTab === "changes"
+          ? renderChangesTab()
+          : renderPreviewTab();
+
+  const stackedWorkbenchTrigger =
+    isStackedLayout && !stackedWorkbenchOpen ? (
+      <button
+        type="button"
+        aria-label="展开画布工作台"
+        title="工作台"
+        onClick={() => setStackedWorkbenchOpen(true)}
+        className="inline-flex h-7 w-7 items-center justify-center rounded text-muted-foreground transition-all hover:bg-black/5 hover:text-foreground"
+      >
+        <PanelRightOpen className="h-4 w-4" />
+      </button>
+    ) : undefined;
+
+  return (
+    <div
+      ref={shellRef}
+      data-testid="canvas-workbench-shell"
+      data-layout-mode={isStackedLayout ? "stacked" : "split"}
+      className={cn(
+        "relative h-full min-h-0 overflow-hidden rounded-[14px] border border-border bg-[linear-gradient(180deg,hsl(var(--background)),hsl(var(--muted)/0.12))]",
+        isStackedLayout ? "block" : "flex flex-row",
+      )}
+    >
+      <div
+        className={cn(
+          "min-w-0 overflow-hidden",
+          isStackedLayout ? "h-full" : "flex-1",
+        )}
+      >
+        {renderPreview(currentTarget, {
+          stackedWorkbenchTrigger,
+        })}
+      </div>
+
+      {isStackedLayout ? (
+        stackedWorkbenchOpen ? (
+          <section
+            data-testid="canvas-workbench-layout"
+            data-panel-placement="overlay-right"
+            className="absolute inset-y-3 right-3 z-10 flex w-[min(25rem,calc(100%-1.5rem))] max-w-full flex-col overflow-hidden rounded-[18px] border border-border/80 bg-background/95 shadow-[0_24px_80px_rgba(15,23,42,0.18)] backdrop-blur-md"
+          >
+            {renderWorkbenchHeader(true)}
+            <div className="flex-1 overflow-auto px-3 py-3">{renderActiveTab()}</div>
+            {renderWorkbenchFooter(true)}
+          </section>
+        ) : null
+      ) : (
+        <aside
+          data-testid="canvas-workbench-layout"
+          data-panel-placement="side"
+          className={cn(
+            "relative flex h-full flex-col border-l border-border/80 bg-background/88 backdrop-blur-sm transition-[width] duration-200",
+            collapsed ? "w-12" : "w-[360px]",
+          )}
+        >
+          {collapsed ? (
+            <div className="flex h-full flex-col items-center gap-3 px-2 py-4">
+              <button
+                type="button"
+                aria-label="展开画布工作台"
+                onClick={() => setCollapsed(false)}
+                className="inline-flex h-8 w-8 items-center justify-center rounded-lg border border-border text-muted-foreground transition-colors hover:bg-muted/60 hover:text-foreground"
+              >
+                <PanelRightOpen className="h-4 w-4" />
+              </button>
+              {TAB_META.map((tab) => (
+                <button
+                  key={tab.key}
+                  type="button"
+                  aria-label={`切换画布标签-${tab.label}`}
+                  onClick={() => setActiveTab(tab.key)}
+                  className={cn(
+                    "rounded-lg px-2 py-1.5 text-[11px] text-muted-foreground transition-colors",
+                    activeTab === tab.key && "bg-primary/10 text-primary",
+                  )}
+                >
+                  {tab.label}
+                </button>
+              ))}
+            </div>
+          ) : (
+            <>
+              {renderWorkbenchHeader(false, {
+                showCollapseButton: true,
+              })}
+              <div className="flex-1 overflow-auto px-4 py-4">{renderActiveTab()}</div>
+              {renderWorkbenchFooter(false)}
+            </>
+          )}
+        </aside>
+      )}
+    </div>
+  );
+});
+
+export default CanvasWorkbenchLayout;
diff --git a/src/components/agent/chat/components/ChatNavbar.test.tsx b/src/components/agent/chat/components/ChatNavbar.test.tsx
index 3ea4924b6..010d3b652 100644
--- a/src/components/agent/chat/components/ChatNavbar.test.tsx
+++ b/src/components/agent/chat/components/ChatNavbar.test.tsx
@@ -4,8 +4,15 @@ import { createRoot, type Root } from "react-dom/client";
 import { afterEach, beforeEach, describe, expect, it, vi } from "vitest";
 import { ChatNavbar } from "./ChatNavbar";
 
+const { mockProjectSelector } = vi.hoisted(() => ({
+  mockProjectSelector: vi.fn(),
+}));
+
 vi.mock("@/components/projects/ProjectSelector", () => ({
-  ProjectSelector: () => <div data-testid="project-selector" />,
+  ProjectSelector: (props: Record<string, unknown>) => {
+    mockProjectSelector(props);
+    return <div data-testid="project-selector" />;
+  },
 }));
 
 vi.mock("@/components/ui/button", () => ({
@@ -79,6 +86,25 @@ function renderChatNavbar(
 }
 
 describe("ChatNavbar", () => {
+  it("返回按钮应指向新建任务输入页", () => {
+    const onBackHome = vi.fn();
+    const container = renderChatNavbar({
+      onBackHome,
+    });
+
+    const button = container.querySelector(
+      'button[aria-label="返回新建任务"]',
+    ) as HTMLButtonElement | null;
+
+    expect(button).not.toBeNull();
+
+    act(() => {
+      button?.click();
+    });
+
+    expect(onBackHome).toHaveBeenCalledTimes(1);
+  });
+
   it("有 Harness 信号时应渲染顶栏切换按钮", () => {
     const onToggleHarnessPanel = vi.fn();
     const container = renderChatNavbar({
@@ -89,7 +115,7 @@ describe("ChatNavbar", () => {
     });
 
     const button = container.querySelector(
-      'button[aria-label="展开 Harness 面板"]',
+      'button[aria-label="展开Harness"]',
     ) as HTMLButtonElement | null;
 
     expect(button).not.toBeNull();
@@ -126,7 +152,7 @@ describe("ChatNavbar", () => {
 
     const container = mount(<HarnessToggleHarness />);
     const expandButton = container.querySelector(
-      'button[aria-label="展开 Harness 面板"]',
+      'button[aria-label="展开Harness"]',
     ) as HTMLButtonElement | null;
 
     expect(container.querySelector('[data-testid="harness-panel"]')).toBeNull();
@@ -140,7 +166,7 @@ describe("ChatNavbar", () => {
     ).not.toBeNull();
 
     const collapseButton = container.querySelector(
-      'button[aria-label="收起 Harness 面板"]',
+      'button[aria-label="收起Harness"]',
     ) as HTMLButtonElement | null;
 
     act(() => {
@@ -149,4 +175,59 @@ describe("ChatNavbar", () => {
 
     expect(container.querySelector('[data-testid="harness-panel"]')).toBeNull();
   });
+
+  it("通用对话应支持从顶栏打开浏览器协助", () => {
+    const onOpenBrowserAssist = vi.fn();
+    const container = renderChatNavbar({
+      showBrowserAssistEntry: true,
+      onOpenBrowserAssist,
+    });
+
+    const button = container.querySelector(
+      'button[aria-label="打开浏览器协助"]',
+    ) as HTMLButtonElement | null;
+
+    expect(button).not.toBeNull();
+    expect(button?.textContent).toContain("浏览器协助");
+
+    act(() => {
+      button?.click();
+    });
+
+    expect(onOpenBrowserAssist).toHaveBeenCalledTimes(1);
+  });
+
+  it("通用对话项目选择器应启用管理能力", () => {
+    renderChatNavbar({
+      workspaceType: "general",
+      projectId: "project-1",
+    });
+
+    expect(mockProjectSelector).toHaveBeenCalled();
+    const lastCall = mockProjectSelector.mock.calls.at(-1)?.[0] as
+      | Record<string, unknown>
+      | undefined;
+    expect(lastCall?.enableManagement).toBe(true);
+  });
+
+  it("应支持在顶栏展开和折叠画布", () => {
+    const onToggleCanvas = vi.fn();
+    const container = renderChatNavbar({
+      showCanvasToggle: true,
+      isCanvasOpen: false,
+      onToggleCanvas,
+    });
+
+    const expandButton = container.querySelector(
+      'button[aria-label="展开画布"]',
+    ) as HTMLButtonElement | null;
+
+    expect(expandButton).not.toBeNull();
+
+    act(() => {
+      expandButton?.click();
+    });
+
+    expect(onToggleCanvas).toHaveBeenCalledTimes(1);
+  });
 });
diff --git a/src/components/agent/chat/components/ChatNavbar.tsx b/src/components/agent/chat/components/ChatNavbar.tsx
index 12ebef057..79c156d7b 100644
--- a/src/components/agent/chat/components/ChatNavbar.tsx
+++ b/src/components/agent/chat/components/ChatNavbar.tsx
@@ -3,7 +3,10 @@ import {
   Box,
   ChevronDown,
   FolderOpen,
+  Globe,
   Home,
+  PanelRightClose,
+  PanelRightOpen,
   PanelLeftClose,
   PanelLeftOpen,
   Plus,
@@ -25,6 +28,9 @@ interface ChatNavbarProps {
   onBackToResources?: () => void;
   onToggleSettings?: () => void;
   onBackHome?: () => void;
+  showCanvasToggle?: boolean;
+  isCanvasOpen?: boolean;
+  onToggleCanvas?: () => void;
   projectId?: string | null;
   onProjectChange?: (projectId: string) => void;
   workspaceType?: string;
@@ -40,6 +46,10 @@ interface ChatNavbarProps {
     onAddChapter: () => void;
     onCloseCanvas: () => void;
   } | null;
+  showBrowserAssistEntry?: boolean;
+  browserAssistActive?: boolean;
+  browserAssistLoading?: boolean;
+  onOpenBrowserAssist?: () => void;
 }
 
 export const ChatNavbar: React.FC<ChatNavbarProps> = ({
@@ -51,6 +61,9 @@ export const ChatNavbar: React.FC<ChatNavbarProps> = ({
   onBackToResources,
   onToggleSettings,
   onBackHome,
+  showCanvasToggle = false,
+  isCanvasOpen = false,
+  onToggleCanvas,
   projectId = null,
   onProjectChange,
   workspaceType,
@@ -61,6 +74,10 @@ export const ChatNavbar: React.FC<ChatNavbarProps> = ({
   harnessAttentionLevel = "idle",
   harnessToggleLabel = "Harness",
   novelCanvasControls = null,
+  showBrowserAssistEntry = false,
+  browserAssistActive = false,
+  browserAssistLoading = false,
+  onOpenBrowserAssist,
 }) => {
   return (
     <Navbar>
@@ -71,7 +88,8 @@ export const ChatNavbar: React.FC<ChatNavbarProps> = ({
             size="icon"
             className="h-8 w-8 text-muted-foreground"
             onClick={onBackHome}
-            title="返回首页"
+            title="返回新建任务"
+            aria-label="返回新建任务"
           >
             <Home size={18} />
           </Button>
@@ -97,6 +115,22 @@ export const ChatNavbar: React.FC<ChatNavbarProps> = ({
             <Box size={18} />
           </Button>
         )}
+        {showCanvasToggle ? (
+          <Button
+            variant="ghost"
+            size="icon"
+            className="h-8 w-8 text-muted-foreground"
+            onClick={onToggleCanvas}
+            aria-label={isCanvasOpen ? "折叠画布" : "展开画布"}
+            title={isCanvasOpen ? "折叠画布" : "展开画布"}
+          >
+            {isCanvasOpen ? (
+              <PanelRightClose size={18} />
+            ) : (
+              <PanelRightOpen size={18} />
+            )}
+          </Button>
+        ) : null}
         {onBackToProjectManagement && (
           <Button
             variant="outline"
@@ -159,9 +193,26 @@ export const ChatNavbar: React.FC<ChatNavbarProps> = ({
           placeholder="选择项目"
           dropdownSide="bottom"
           dropdownAlign="end"
+          enableManagement={workspaceType === "general"}
           className="h-8 text-xs min-w-[160px] max-w-[220px]"
         />
 
+        {showBrowserAssistEntry ? (
+          <Button
+            type="button"
+            variant={browserAssistActive ? "secondary" : "outline"}
+            size="sm"
+            className="h-8 gap-1.5 px-3 text-xs"
+            onClick={onOpenBrowserAssist}
+            disabled={browserAssistLoading}
+            aria-label="打开浏览器协助"
+            title="在右侧画布打开浏览器协助"
+          >
+            <Globe size={14} />
+            <span>{browserAssistLoading ? "启动中..." : "浏览器协助"}</span>
+          </Button>
+        ) : null}
+
         {showHarnessToggle ? (
           <Button
             type="button"
diff --git a/src/components/agent/chat/components/ChatSidebar.test.tsx b/src/components/agent/chat/components/ChatSidebar.test.tsx
index 096b8bbdf..bcac0fbed 100644
--- a/src/components/agent/chat/components/ChatSidebar.test.tsx
+++ b/src/components/agent/chat/components/ChatSidebar.test.tsx
@@ -3,7 +3,37 @@ import { act } from "react";
 import { createRoot, type Root } from "react-dom/client";
 import { afterEach, beforeEach, describe, expect, it, vi } from "vitest";
 import { ChatSidebar } from "./ChatSidebar";
-import type { Topic } from "../hooks/useAgentChat";
+import type { Topic } from "../hooks/agentChatShared";
+
+vi.mock("@/components/ui/badge", () => ({
+  Badge: ({
+    children,
+    className,
+  }: {
+    children: React.ReactNode;
+    className?: string;
+  }) => <span className={className}>{children}</span>,
+}));
+
+vi.mock("@/components/ui/dropdown-menu", () => ({
+  DropdownMenu: ({ children }: { children: React.ReactNode }) => <div>{children}</div>,
+  DropdownMenuTrigger: ({ children }: { children: React.ReactNode }) => <>{children}</>,
+  DropdownMenuContent: ({ children }: { children: React.ReactNode }) => <div>{children}</div>,
+  DropdownMenuItem: ({
+    children,
+    onClick,
+    className,
+  }: {
+    children: React.ReactNode;
+    onClick?: () => void;
+    className?: string;
+  }) => (
+    <button type="button" className={className} onClick={onClick}>
+      {children}
+    </button>
+  ),
+  DropdownMenuSeparator: () => <div />,
+}));
 
 const mountedRoots: Array<{ root: Root; container: HTMLDivElement }> = [];
 
@@ -30,9 +60,17 @@ afterEach(() => {
 const defaultTopics: Topic[] = [
   {
     id: "topic-1",
-    title: "话题一",
+    title: "任务一",
     createdAt: new Date(),
+    updatedAt: new Date(),
     messagesCount: 2,
+    executionStrategy: "auto",
+    status: "done",
+    lastPreview: "已记录 2 条消息，可继续补充或复盘。",
+    isPinned: false,
+    hasUnread: false,
+    tag: null,
+    sourceSessionId: "topic-1",
   },
 ];
 
@@ -60,33 +98,45 @@ function renderSidebar(
 }
 
 describe("ChatSidebar", () => {
-  it("应显示新建话题入口和话题列表", () => {
+  it("应显示新建任务入口和任务列表", () => {
     const container = renderSidebar();
-    expect(container.textContent).toContain("新建话题");
-    expect(container.textContent).toContain("话题一");
+    expect(container.textContent).toContain("新建任务");
+    expect(container.textContent).toContain("任务一");
   });
 
-  it("点击话题时应触发切换", () => {
+  it("点击任务时应触发切换", () => {
     const onSwitchTopic = vi.fn();
     const container = renderSidebar({ onSwitchTopic });
-    const topicItem = Array.from(container.querySelectorAll("span")).find(
-      (element) => element.textContent === "话题一",
+    const taskItem = Array.from(
+      container.querySelectorAll('[role="button"]'),
+    ).find(
+      (element) => element.textContent?.includes("任务一"),
     );
-    expect(topicItem).toBeTruthy();
-    if (topicItem) {
+    expect(taskItem).toBeTruthy();
+    if (taskItem) {
       act(() => {
-        topicItem.dispatchEvent(new MouseEvent("click", { bubbles: true }));
+        taskItem.dispatchEvent(new MouseEvent("click", { bubbles: true }));
       });
     }
     expect(onSwitchTopic).toHaveBeenCalledWith("topic-1");
   });
 
-  it("点击删除按钮时应触发删除", () => {
+  it("点击菜单删除任务时应触发删除", () => {
     const onDeleteTopic = vi.fn();
     const container = renderSidebar({ onDeleteTopic });
-    const deleteButton = container.querySelector(
-      "button.delete-btn",
+    const actionButton = container.querySelector(
+      'button[aria-label="任务操作"]',
     ) as HTMLButtonElement | null;
+    expect(actionButton).toBeTruthy();
+    if (actionButton) {
+      act(() => {
+        actionButton.dispatchEvent(new MouseEvent("click", { bubbles: true }));
+      });
+    }
+
+    const deleteButton = Array.from(container.querySelectorAll("button")).find(
+      (element) => element.textContent?.includes("删除任务"),
+    );
     expect(deleteButton).toBeTruthy();
     if (deleteButton) {
       act(() => {
@@ -95,4 +145,23 @@ describe("ChatSidebar", () => {
     }
     expect(onDeleteTopic).toHaveBeenCalledWith("topic-1");
   });
+
+  it("切换为仅看进行中时应过滤已完成任务", () => {
+    const container = renderSidebar({
+      isSending: true,
+      currentTopicId: "topic-1",
+    });
+
+    const filterButton = Array.from(container.querySelectorAll("button")).find(
+      (element) => element.textContent?.includes("仅看进行中"),
+    );
+    expect(filterButton).toBeTruthy();
+
+    act(() => {
+      filterButton?.dispatchEvent(new MouseEvent("click", { bubbles: true }));
+    });
+
+    expect(container.textContent).toContain("任务一");
+    expect(container.textContent).toContain("进行中");
+  });
 });
diff --git a/src/components/agent/chat/components/ChatSidebar.tsx b/src/components/agent/chat/components/ChatSidebar.tsx
index 51ea0c503..783c49002 100644
--- a/src/components/agent/chat/components/ChatSidebar.tsx
+++ b/src/components/agent/chat/components/ChatSidebar.tsx
@@ -1,98 +1,92 @@
-import React, { useState } from "react";
-import { MessageSquare, Plus, Trash2 } from "lucide-react";
-import styled from "styled-components";
-import type { Topic } from "../hooks/useAgentChat";
+import React, { useEffect, useMemo, useRef, useState } from "react";
+import {
+  ChevronDown,
+  Clock3,
+  Loader2,
+  MoreHorizontal,
+  PencilLine,
+  Pin,
+  PinOff,
+  Plus,
+  Search,
+  Trash2,
+} from "lucide-react";
+import { Badge } from "@/components/ui/badge";
+import {
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuItem,
+  DropdownMenuSeparator,
+  DropdownMenuTrigger,
+} from "@/components/ui/dropdown-menu";
+import { cn } from "@/lib/utils";
+import type { Topic, TaskStatus } from "../hooks/agentChatShared";
+import type { Message } from "../types";
 
-const SidebarContainer = styled.div`
-  display: flex;
-  flex-direction: column;
-  height: 100%;
-  margin-right: 10px;
-  background-color: hsl(var(--muted) / 0.3);
-  border-right: 1px solid hsl(var(--border));
-`;
+const RECENT_TASK_WINDOW_MS = 1000 * 60 * 60 * 24 * 3;
+const OLDER_TASKS_INITIAL_COUNT = 8;
+const PINNED_TASK_IDS_STORAGE_KEY = "proxycast_task_sidebar_pinned_ids";
 
-const Toolbar = styled.div`
-  padding: 12px;
-  border-bottom: 1px solid hsl(var(--border));
-`;
-
-const NewTopicButton = styled.button`
-  display: flex;
-  align-items: center;
-  gap: 8px;
-  width: 100%;
-  padding: 8px 12px;
-  border-radius: 8px;
-  font-size: 13px;
-  font-weight: 500;
-  color: hsl(var(--foreground));
-  background-color: transparent;
-  border: 1px dashed hsl(var(--border));
-  transition: all 0.2s;
-
-  &:hover {
-    background-color: hsl(var(--muted));
-    border-color: hsl(var(--muted-foreground));
+const STATUS_META: Record<
+  TaskStatus,
+  {
+    label: string;
+    badgeClassName: string;
+    dotClassName: string;
   }
-`;
+> = {
+  draft: {
+    label: "待补充",
+    badgeClassName:
+      "border border-slate-200 bg-white text-slate-600 dark:border-white/10 dark:bg-white/5 dark:text-slate-300",
+    dotClassName: "bg-slate-400",
+  },
+  running: {
+    label: "进行中",
+    badgeClassName:
+      "border border-sky-200 bg-sky-50 text-sky-700 dark:border-sky-500/20 dark:bg-sky-500/10 dark:text-sky-300",
+    dotClassName: "bg-sky-500",
+  },
+  waiting: {
+    label: "待处理",
+    badgeClassName:
+      "border border-amber-200 bg-amber-50 text-amber-700 dark:border-amber-500/20 dark:bg-amber-500/10 dark:text-amber-300",
+    dotClassName: "bg-amber-500",
+  },
+  done: {
+    label: "已完成",
+    badgeClassName:
+      "border border-emerald-200 bg-emerald-50 text-emerald-700 dark:border-emerald-500/20 dark:bg-emerald-500/10 dark:text-emerald-300",
+    dotClassName: "bg-emerald-500",
+  },
+  failed: {
+    label: "异常中断",
+    badgeClassName:
+      "border border-rose-200 bg-rose-50 text-rose-700 dark:border-rose-500/20 dark:bg-rose-500/10 dark:text-rose-300",
+    dotClassName: "bg-rose-500",
+  },
+};
 
-const ListContainer = styled.div`
-  flex: 1;
-  overflow-y: auto;
-  padding: 8px;
-`;
+type TaskSectionKey = "running" | "waiting" | "recent" | "older";
 
-const ListItem = styled.div<{ $active: boolean }>`
-  display: flex;
-  align-items: center;
-  gap: 10px;
-  padding: 10px 12px;
-  margin-bottom: 4px;
-  border-radius: 8px;
-  cursor: pointer;
-  background-color: ${(props) =>
-    props.$active ? "hsl(var(--muted))" : "transparent"};
-  color: ${(props) =>
-    props.$active ? "hsl(var(--foreground))" : "hsl(var(--muted-foreground))"};
-  transition: all 0.15s;
+interface TaskCardViewModel {
+  id: string;
+  title: string;
+  updatedAt: Date;
+  messagesCount: number;
+  status: TaskStatus;
+  statusLabel: string;
+  lastPreview: string;
+  isCurrent: boolean;
+  isPinned: boolean;
+  hasUnread: boolean;
+}
 
-  &:hover {
-    background-color: hsl(var(--muted));
-    color: hsl(var(--foreground));
-  }
-
-  .title {
-    font-size: 13px;
-    white-space: nowrap;
-    overflow: hidden;
-    text-overflow: ellipsis;
-    flex: 1;
-  }
-
-  .delete-btn {
-    opacity: 0;
-    transition: opacity 0.15s;
-    padding: 4px;
-    border-radius: 4px;
-  }
-
-  .delete-btn:hover {
-    background-color: hsl(var(--destructive) / 0.15);
-    color: hsl(var(--destructive));
-  }
-
-  &:hover .delete-btn {
-    opacity: 1;
-  }
-`;
-
-const EmptyState = styled.div`
-  text-align: center;
-  padding: 24px 16px;
-  color: hsl(var(--muted-foreground));
-  font-size: 13px;
-`;
+interface TaskSection {
+  key: TaskSectionKey;
+  title: string;
+  items: TaskCardViewModel[];
+}
 
 interface ChatSidebarProps {
   onNewChat: () => void;
@@ -101,6 +95,172 @@ interface ChatSidebarProps {
   onSwitchTopic: (topicId: string) => void;
   onDeleteTopic: (topicId: string) => void;
   onRenameTopic?: (topicId: string, newTitle: string) => void;
+  currentMessages?: Message[];
+  isSending?: boolean;
+  pendingActionCount?: number;
+  workspaceError?: boolean;
+}
+
+function formatRelativeTime(date: Date) {
+  const diffMs = Date.now() - date.getTime();
+  const diffMinutes = Math.max(1, Math.floor(diffMs / (1000 * 60)));
+
+  if (diffMinutes < 60) {
+    return `${diffMinutes}分钟前`;
+  }
+
+  const diffHours = Math.floor(diffMinutes / 60);
+  if (diffHours < 24) {
+    return `${diffHours}小时前`;
+  }
+
+  const diffDays = Math.floor(diffHours / 24);
+  if (diffDays < 30) {
+    return `${diffDays}天前`;
+  }
+
+  return date.toLocaleDateString("zh-CN", {
+    month: "numeric",
+    day: "numeric",
+  });
+}
+
+function normalizePreviewText(value: string) {
+  return value.trim().replace(/\s+/g, " ").slice(0, 72);
+}
+
+function resolveCurrentTaskPreview(messages: Message[]) {
+  for (let index = messages.length - 1; index >= 0; index -= 1) {
+    const message = messages[index];
+    const content = normalizePreviewText(
+      message.content ||
+        message.contentParts
+          ?.filter(
+            (part): part is Extract<(typeof message.contentParts)[number], { type: "text" | "thinking" }> =>
+              part.type === "text" || part.type === "thinking",
+          )
+          .map((part) => part.text)
+          .join(" ") ||
+        "",
+    );
+    if (content) {
+      return content;
+    }
+  }
+
+  return "";
+}
+
+function sortTaskItems(items: TaskCardViewModel[]) {
+  return [...items].sort((left, right) => {
+    if (left.isCurrent !== right.isCurrent) {
+      return left.isCurrent ? -1 : 1;
+    }
+    if (left.isPinned !== right.isPinned) {
+      return left.isPinned ? -1 : 1;
+    }
+    return right.updatedAt.getTime() - left.updatedAt.getTime();
+  });
+}
+
+function loadPinnedTaskIds() {
+  if (typeof window === "undefined") {
+    return [] as string[];
+  }
+
+  try {
+    const raw = window.localStorage.getItem(PINNED_TASK_IDS_STORAGE_KEY);
+    const parsed = raw ? JSON.parse(raw) : [];
+    return Array.isArray(parsed)
+      ? parsed.filter((item): item is string => typeof item === "string")
+      : [];
+  } catch {
+    return [];
+  }
+}
+
+function resolveCurrentStatusPreview(
+  status: TaskStatus,
+  fallbackPreview: string,
+  pendingActionCount: number,
+  workspaceError: boolean,
+) {
+  if (workspaceError && status === "failed") {
+    return "工作区异常，等待你重新选择本地目录后继续。";
+  }
+  if (status === "running") {
+    return "正在生成回复或执行工具，请稍候。";
+  }
+  if (status === "waiting" && pendingActionCount > 0) {
+    return "等待你确认或补充信息后继续执行。";
+  }
+  if (status === "draft") {
+    return "等待你补充任务需求后开始执行。";
+  }
+  return fallbackPreview;
+}
+
+function resolveTaskStatus(params: {
+  topic: Topic;
+  currentTopicId: string | null;
+  isSending: boolean;
+  pendingActionCount: number;
+  workspaceError: boolean;
+}) {
+  const { topic, currentTopicId, isSending, pendingActionCount, workspaceError } =
+    params;
+
+  if (topic.id === currentTopicId) {
+    if (workspaceError) {
+      return "failed" as const;
+    }
+    if (isSending) {
+      return "running" as const;
+    }
+    if (pendingActionCount > 0) {
+      return "waiting" as const;
+    }
+  }
+
+  return topic.status;
+}
+
+function buildTaskSections(items: TaskCardViewModel[]) {
+  const now = Date.now();
+  const running: TaskCardViewModel[] = [];
+  const waiting: TaskCardViewModel[] = [];
+  const recent: TaskCardViewModel[] = [];
+  const older: TaskCardViewModel[] = [];
+
+  for (const item of items) {
+    if (item.status === "running") {
+      running.push(item);
+      continue;
+    }
+
+    if (
+      item.status === "waiting" ||
+      item.status === "draft" ||
+      item.status === "failed"
+    ) {
+      waiting.push(item);
+      continue;
+    }
+
+    if (now - item.updatedAt.getTime() <= RECENT_TASK_WINDOW_MS) {
+      recent.push(item);
+      continue;
+    }
+
+    older.push(item);
+  }
+
+  return [
+    { key: "running", title: "进行中", items: sortTaskItems(running) },
+    { key: "waiting", title: "待处理", items: sortTaskItems(waiting) },
+    { key: "recent", title: "最近完成", items: sortTaskItems(recent) },
+    { key: "older", title: "更早任务", items: sortTaskItems(older) },
+  ] satisfies TaskSection[];
 }
 
 export const ChatSidebar: React.FC<ChatSidebarProps> = ({
@@ -110,26 +270,151 @@ export const ChatSidebar: React.FC<ChatSidebarProps> = ({
   onSwitchTopic,
   onDeleteTopic,
   onRenameTopic,
+  currentMessages = [],
+  isSending = false,
+  pendingActionCount = 0,
+  workspaceError = false,
 }) => {
   const [editingTopicId, setEditingTopicId] = useState<string | null>(null);
   const [editTitle, setEditTitle] = useState("");
-  const editInputRef = React.useRef<HTMLInputElement>(null);
+  const [searchKeyword, setSearchKeyword] = useState("");
+  const [statusFilter, setStatusFilter] = useState<"all" | "active">("all");
+  const [showAllOlder, setShowAllOlder] = useState(false);
+  const [pinnedTaskIds, setPinnedTaskIds] = useState<string[]>(() =>
+    loadPinnedTaskIds(),
+  );
+  const [collapsedSections, setCollapsedSections] = useState<
+    Record<TaskSectionKey, boolean>
+  >({
+    running: false,
+    waiting: false,
+    recent: false,
+    older: false,
+  });
+  const editInputRef = useRef<HTMLInputElement>(null);
 
-  const handleDeleteClick = (event: React.MouseEvent, topicId: string) => {
-    event.stopPropagation();
+  const currentTaskPreview = useMemo(
+    () => resolveCurrentTaskPreview(currentMessages),
+    [currentMessages],
+  );
+  const pinnedTaskIdSet = useMemo(
+    () => new Set(pinnedTaskIds),
+    [pinnedTaskIds],
+  );
+
+  const taskItems = useMemo(() => {
+    return topics.map((topic) => {
+      const status = resolveTaskStatus({
+        topic,
+        currentTopicId,
+        isSending,
+        pendingActionCount,
+        workspaceError,
+      });
+
+      const statusLabel = STATUS_META[status].label;
+      const isCurrent = topic.id === currentTopicId;
+      const fallbackPreview = normalizePreviewText(topic.lastPreview);
+      const preview = isCurrent
+        ? resolveCurrentStatusPreview(
+            status,
+            currentTaskPreview || fallbackPreview,
+            pendingActionCount,
+            workspaceError,
+          )
+        : fallbackPreview;
+
+      return {
+        id: topic.id,
+        title: topic.title || "未命名任务",
+        updatedAt: topic.updatedAt || topic.createdAt,
+        messagesCount: topic.messagesCount,
+        status,
+        statusLabel,
+        lastPreview: preview || "等待你补充任务需求后开始执行。",
+        isCurrent,
+        isPinned: topic.isPinned || pinnedTaskIdSet.has(topic.id),
+        hasUnread: topic.hasUnread,
+      } satisfies TaskCardViewModel;
+    });
+  }, [
+    currentTaskPreview,
+    currentTopicId,
+    isSending,
+    pendingActionCount,
+    pinnedTaskIdSet,
+    topics,
+    workspaceError,
+  ]);
+
+  const filteredTaskItems = useMemo(() => {
+    const keyword = searchKeyword.trim().toLowerCase();
+    return taskItems.filter((item) => {
+      if (
+        statusFilter === "active" &&
+        item.status !== "running" &&
+        item.status !== "waiting"
+      ) {
+        return false;
+      }
+
+      if (!keyword) {
+        return true;
+      }
+
+      return `${item.title} ${item.lastPreview} ${item.statusLabel}`
+        .toLowerCase()
+        .includes(keyword);
+    });
+  }, [searchKeyword, statusFilter, taskItems]);
+
+  const sections = useMemo(
+    () => buildTaskSections(filteredTaskItems),
+    [filteredTaskItems],
+  );
+
+  const hasAnyTasks = topics.length > 0;
+  const hasFilteredResults = filteredTaskItems.length > 0;
+
+  useEffect(() => {
+    if (editingTopicId && editInputRef.current) {
+      editInputRef.current.focus();
+      editInputRef.current.select();
+    }
+  }, [editingTopicId]);
+
+  useEffect(() => {
+    setShowAllOlder(false);
+  }, [searchKeyword, statusFilter]);
+
+  useEffect(() => {
+    if (typeof window === "undefined") {
+      return;
+    }
+
+    window.localStorage.setItem(
+      PINNED_TASK_IDS_STORAGE_KEY,
+      JSON.stringify(pinnedTaskIds),
+    );
+  }, [pinnedTaskIds]);
+
+  const handleDeleteClick = (topicId: string) => {
     onDeleteTopic(topicId);
   };
 
-  const handleStartEdit = (
-    event: React.MouseEvent,
-    topicId: string,
-    currentTitle: string,
-  ) => {
-    event.stopPropagation();
+  const handleStartEdit = (topicId: string, currentTitle: string) => {
     setEditingTopicId(topicId);
     setEditTitle(currentTitle);
   };
 
+  const handleTogglePinned = (topicId: string) => {
+    setPinnedTaskIds((current) =>
+      current.includes(topicId)
+        ? current.filter((item) => item !== topicId)
+        : [...current, topicId],
+    );
+  };
+
   const handleSaveEdit = () => {
     if (editingTopicId && editTitle.trim() && onRenameTopic) {
       onRenameTopic(editingTopicId, editTitle.trim());
@@ -151,79 +436,316 @@ export const ChatSidebar: React.FC<ChatSidebarProps> = ({
     }
   };
 
-  React.useEffect(() => {
-    if (editingTopicId && editInputRef.current) {
-      editInputRef.current.focus();
-      editInputRef.current.select();
-    }
-  }, [editingTopicId]);
-
   return (
-    <SidebarContainer className="w-64 shrink-0">
-      <Toolbar>
-        <NewTopicButton onClick={onNewChat}>
-          <Plus size={16} />
-          <span>新建话题</span>
-        </NewTopicButton>
-      </Toolbar>
+    <aside
+      className="w-[296px] shrink-0 border-r border-slate-200/80 bg-slate-50/88 backdrop-blur dark:border-white/10 dark:bg-[#111318]"
+      data-testid="chat-sidebar"
+    >
+      <div className="flex h-full min-h-0 flex-col gap-4 p-3">
+        <div className="space-y-3">
+          <div className="relative">
+            <Search className="pointer-events-none absolute left-3 top-1/2 h-4 w-4 -translate-y-1/2 text-slate-400" />
+            <input
+              type="search"
+              value={searchKeyword}
+              onChange={(event) => setSearchKeyword(event.target.value)}
+              placeholder="搜索任务标题或摘要"
+              className="h-10 w-full rounded-2xl border border-slate-200 bg-white pl-9 pr-3 text-sm text-slate-700 outline-none transition focus:border-slate-300 focus:ring-2 focus:ring-slate-200 dark:border-white/10 dark:bg-white/5 dark:text-slate-100 dark:focus:border-white/20 dark:focus:ring-white/10"
+            />
+          </div>
 
-      <ListContainer className="custom-scrollbar">
-        {topics.length === 0 ? (
-          <EmptyState>暂无话题，点击上方新建</EmptyState>
-        ) : (
-          topics.map((topic) => (
-            <ListItem
-              key={topic.id}
-              $active={topic.id === currentTopicId}
-              onClick={() => {
-                if (editingTopicId !== topic.id) {
-                  onSwitchTopic(topic.id);
-                }
-              }}
-              onDoubleClick={(event) =>
-                handleStartEdit(event, topic.id, topic.title)
-              }
-            >
-              <MessageSquare
-                size={15}
-                className={
-                  topic.id === currentTopicId ? "text-primary" : "opacity-50"
-                }
-              />
-              {editingTopicId === topic.id ? (
-                <input
-                  ref={editInputRef}
-                  type="text"
-                  value={editTitle}
-                  onChange={(event) => setEditTitle(event.target.value)}
-                  onKeyDown={handleEditKeyDown}
-                  onBlur={handleSaveEdit}
-                  onClick={(event) => event.stopPropagation()}
-                  style={{
-                    flex: 1,
-                    fontSize: "13px",
-                    padding: "2px 6px",
-                    border: "1px solid hsl(var(--primary))",
-                    borderRadius: "4px",
-                    outline: "none",
-                  }}
-                />
-              ) : (
-                <span className="title">{topic.title}</span>
+          <button
+            type="button"
+            onClick={onNewChat}
+            className="inline-flex h-11 w-full items-center justify-center gap-2 rounded-2xl bg-slate-900 px-4 text-sm font-semibold text-white transition hover:bg-slate-800 dark:bg-white dark:text-slate-900 dark:hover:bg-slate-100"
+          >
+            <Plus className="h-4 w-4" />
+            新建任务
+          </button>
+
+          <div className="flex items-center gap-2">
+            <button
+              type="button"
+              onClick={() => setStatusFilter("all")}
+              className={cn(
+                "inline-flex h-9 flex-1 items-center justify-center rounded-xl border text-xs font-medium transition",
+                statusFilter === "all"
+                  ? "border-slate-900 bg-slate-900 text-white dark:border-white dark:bg-white dark:text-slate-900"
+                  : "border-slate-200 bg-white text-slate-500 hover:border-slate-300 hover:text-slate-900 dark:border-white/10 dark:bg-white/5 dark:text-slate-300",
               )}
-              {editingTopicId !== topic.id ? (
-                <button
-                  className="delete-btn"
-                  onClick={(event) => handleDeleteClick(event, topic.id)}
-                >
-                  <Trash2 size={14} />
-                </button>
-              ) : null}
-            </ListItem>
-          ))
-        )}
-      </ListContainer>
-    </SidebarContainer>
+            >
+              全部任务
+            </button>
+            <button
+              type="button"
+              onClick={() => setStatusFilter("active")}
+              className={cn(
+                "inline-flex h-9 flex-1 items-center justify-center rounded-xl border text-xs font-medium transition",
+                statusFilter === "active"
+                  ? "border-slate-900 bg-slate-900 text-white dark:border-white dark:bg-white dark:text-slate-900"
+                  : "border-slate-200 bg-white text-slate-500 hover:border-slate-300 hover:text-slate-900 dark:border-white/10 dark:bg-white/5 dark:text-slate-300",
+              )}
+            >
+              仅看进行中
+            </button>
+          </div>
+        </div>
+
+        <div className="flex items-center justify-between px-1">
+          <div className="text-[11px] font-semibold tracking-[0.14em] text-slate-500">
+            任务
+          </div>
+          <div className="text-xs text-slate-400">
+            {searchKeyword.trim()
+              ? `${filteredTaskItems.length} 条结果`
+              : `${topics.length} 条`}
+          </div>
+        </div>
+
+        <div className="min-h-0 flex-1 overflow-y-auto pr-1 [scrollbar-width:thin]">
+          {!hasAnyTasks ? (
+            <div className="rounded-[24px] border border-dashed border-slate-200 bg-white/80 px-4 py-8 text-center shadow-sm dark:border-white/10 dark:bg-white/5">
+              <div className="mx-auto flex h-11 w-11 items-center justify-center rounded-2xl bg-slate-100 text-slate-500 dark:bg-white/10 dark:text-slate-300">
+                <Clock3 className="h-5 w-5" />
+              </div>
+              <div className="mt-4 text-sm font-semibold text-slate-800 dark:text-slate-100">
+                还没有任务
+              </div>
+              <p className="mt-2 text-xs leading-6 text-slate-500 dark:text-slate-400">
+                从“新建任务”开始输入需求，创建后会出现在这里。
+              </p>
+            </div>
+          ) : !hasFilteredResults ? (
+            <div className="rounded-[24px] border border-dashed border-slate-200 bg-white/80 px-4 py-8 text-center shadow-sm dark:border-white/10 dark:bg-white/5">
+              <div className="text-sm font-semibold text-slate-800 dark:text-slate-100">
+                没有匹配的任务
+              </div>
+              <p className="mt-2 text-xs leading-6 text-slate-500 dark:text-slate-400">
+                试试搜索标题、执行摘要或状态关键词。
+              </p>
+            </div>
+          ) : (
+            <div className="space-y-3">
+              {sections.map((section) => {
+                const isOlderSection = section.key === "older";
+                const visibleItems =
+                  isOlderSection && !showAllOlder
+                    ? section.items.slice(0, OLDER_TASKS_INITIAL_COUNT)
+                    : section.items;
+
+                if (section.items.length === 0) {
+                  return null;
+                }
+
+                return (
+                  <section key={section.key} className="space-y-2">
+                    <button
+                      type="button"
+                      onClick={() =>
+                        setCollapsedSections((prev) => ({
+                          ...prev,
+                          [section.key]: !prev[section.key],
+                        }))
+                      }
+                      className="flex w-full items-center justify-between rounded-xl px-2 py-1 text-left transition hover:bg-white/70 dark:hover:bg-white/5"
+                    >
+                      <div className="flex items-center gap-2">
+                        <ChevronDown
+                          className={cn(
+                            "h-4 w-4 text-slate-400 transition-transform",
+                            collapsedSections[section.key] ? "-rotate-90" : "",
+                          )}
+                        />
+                        <span className="text-xs font-semibold text-slate-700 dark:text-slate-200">
+                          {section.title}
+                        </span>
+                      </div>
+                      <span className="text-[11px] text-slate-400">
+                        {section.items.length}
+                      </span>
+                    </button>
+
+                    {collapsedSections[section.key] ? null : (
+                      <div className="space-y-2">
+                        {visibleItems.map((item) => {
+                          const statusMeta = STATUS_META[item.status];
+
+                          return (
+                            <div
+                              key={item.id}
+                              role="button"
+                              tabIndex={0}
+                              onClick={() => {
+                                if (editingTopicId !== item.id) {
+                                  onSwitchTopic(item.id);
+                                }
+                              }}
+                              onDoubleClick={() =>
+                                handleStartEdit(item.id, item.title)
+                              }
+                              onKeyDown={(event) => {
+                                if (
+                                  event.key === "Enter" ||
+                                  event.key === " "
+                                ) {
+                                  event.preventDefault();
+                                  if (editingTopicId !== item.id) {
+                                    onSwitchTopic(item.id);
+                                  }
+                                }
+                              }}
+                              className={cn(
+                                "group rounded-[20px] border p-3 text-left transition",
+                                item.isCurrent
+                                  ? "border-slate-300 bg-white shadow-sm shadow-slate-950/5 dark:border-white/15 dark:bg-white/10"
+                                  : "border-transparent bg-transparent hover:border-slate-200 hover:bg-white/82 dark:hover:border-white/10 dark:hover:bg-white/5",
+                              )}
+                            >
+                              <div className="flex items-start gap-3">
+                                <span
+                                  className={cn(
+                                    "mt-1.5 h-2.5 w-2.5 shrink-0 rounded-full",
+                                    statusMeta.dotClassName,
+                                  )}
+                                />
+
+                                <div className="min-w-0 flex-1">
+                                  <div className="flex items-start gap-2">
+                                    {editingTopicId === item.id ? (
+                                      <input
+                                        ref={editInputRef}
+                                        type="text"
+                                        value={editTitle}
+                                        onChange={(event) =>
+                                          setEditTitle(event.target.value)
+                                        }
+                                        onKeyDown={handleEditKeyDown}
+                                        onBlur={handleSaveEdit}
+                                        onClick={(event) =>
+                                          event.stopPropagation()
+                                        }
+                                        className="h-8 flex-1 rounded-lg border border-slate-300 bg-white px-2.5 text-sm font-medium text-slate-900 outline-none focus:border-slate-400 dark:border-white/10 dark:bg-[#17191f] dark:text-slate-100"
+                                      />
+                                    ) : (
+                                      <>
+                                        <div className="min-w-0 flex-1">
+                                          <div className="flex items-center gap-1.5">
+                                            <div className="truncate text-sm font-semibold text-slate-900 dark:text-slate-100">
+                                              {item.title || "未命名任务"}
+                                            </div>
+                                            {item.isPinned ? (
+                                              <Pin className="h-3.5 w-3.5 text-slate-400" />
+                                            ) : null}
+                                            {item.hasUnread ? (
+                                              <span className="h-2 w-2 rounded-full bg-sky-500" />
+                                            ) : null}
+                                          </div>
+                                        </div>
+                                        <div className="shrink-0 pt-0.5 text-[11px] text-slate-400">
+                                          {formatRelativeTime(item.updatedAt)}
+                                        </div>
+                                      </>
+                                    )}
+
+                                    {editingTopicId === item.id ? null : (
+                                      <DropdownMenu>
+                                        <DropdownMenuTrigger asChild>
+                                          <button
+                                            type="button"
+                                            aria-label="任务操作"
+                                            className="inline-flex h-7 w-7 shrink-0 items-center justify-center rounded-lg text-slate-400 opacity-0 transition hover:bg-slate-100 hover:text-slate-700 group-hover:opacity-100 dark:hover:bg-white/10 dark:hover:text-slate-100"
+                                            onClick={(event) =>
+                                              event.stopPropagation()
+                                            }
+                                          >
+                                            <MoreHorizontal className="h-4 w-4" />
+                                          </button>
+                                        </DropdownMenuTrigger>
+                                        <DropdownMenuContent align="end">
+                                          <DropdownMenuItem
+                                            onClick={() =>
+                                              handleStartEdit(item.id, item.title)
+                                            }
+                                          >
+                                            <PencilLine className="h-4 w-4" />
+                                            重命名任务
+                                          </DropdownMenuItem>
+                                          <DropdownMenuItem
+                                            onClick={() =>
+                                              handleTogglePinned(item.id)
+                                            }
+                                          >
+                                            {item.isPinned ? (
+                                              <PinOff className="h-4 w-4" />
+                                            ) : (
+                                              <Pin className="h-4 w-4" />
+                                            )}
+                                            {item.isPinned ? "取消固定" : "固定任务"}
+                                          </DropdownMenuItem>
+                                          <DropdownMenuSeparator />
+                                          <DropdownMenuItem
+                                            className="text-rose-600"
+                                            onClick={() =>
+                                              handleDeleteClick(item.id)
+                                            }
+                                          >
+                                            <Trash2 className="h-4 w-4" />
+                                            删除任务
+                                          </DropdownMenuItem>
+                                        </DropdownMenuContent>
+                                      </DropdownMenu>
+                                    )}
+                                  </div>
+
+                                  <div className="mt-2 line-clamp-2 text-xs leading-5 text-slate-500 dark:text-slate-400">
+                                    {item.lastPreview}
+                                  </div>
+
+                                  <div className="mt-3 flex items-center gap-2">
+                                    <Badge
+                                      variant="outline"
+                                      className={cn(
+                                        "px-2.5 py-1 text-[11px] font-medium",
+                                        statusMeta.badgeClassName,
+                                      )}
+                                    >
+                                      {item.status === "running" ? (
+                                        <Loader2 className="mr-1 h-3 w-3 animate-spin" />
+                                      ) : null}
+                                      {statusMeta.label}
+                                    </Badge>
+                                    <span className="text-[11px] text-slate-400">
+                                      {item.messagesCount > 0
+                                        ? `${item.messagesCount} 条消息`
+                                        : "尚未开始执行"}
+                                    </span>
+                                  </div>
+                                </div>
+                              </div>
+                            </div>
+                          );
+                        })}
+
+                        {isOlderSection &&
+                        section.items.length > OLDER_TASKS_INITIAL_COUNT &&
+                        !showAllOlder ? (
+                          <button
+                            type="button"
+                            onClick={() => setShowAllOlder(true)}
+                            className="w-full rounded-2xl border border-dashed border-slate-200 bg-white/75 px-3 py-2 text-sm font-medium text-slate-500 transition hover:border-slate-300 hover:text-slate-800 dark:border-white/10 dark:bg-white/5 dark:text-slate-300 dark:hover:border-white/20 dark:hover:text-white"
+                          >
+                            查看更多历史任务
+                          </button>
+                        ) : null}
+                      </div>
+                    )}
+                  </section>
+                );
+              })}
+            </div>
+          )}
+        </div>
+      </div>
+    </aside>
   );
 };
-
diff --git a/src/components/agent/chat/components/EmptyState.test.tsx b/src/components/agent/chat/components/EmptyState.test.tsx
index d96b15267..e1c749033 100644
--- a/src/components/agent/chat/components/EmptyState.test.tsx
+++ b/src/components/agent/chat/components/EmptyState.test.tsx
@@ -61,6 +61,10 @@ vi.mock("./Inputbar/components/CharacterMention", () => ({
   },
 }));
 
+vi.mock("./Inputbar/components/SkillSelector", () => ({
+  SkillSelector: () => <div data-testid="skill-selector-stub" />,
+}));
+
 vi.mock("@/components/ui/button", () => ({
   Button: ({
     children,
@@ -503,4 +507,26 @@ describe("EmptyState", () => {
     expect(onTaskEnabledChange).toHaveBeenCalledWith(true);
     expect(onSubagentEnabledChange).toHaveBeenCalledWith(true);
   });
+
+  it("通用主题应提供浏览器协助入口并触发启动回调", async () => {
+    const onLaunchBrowserAssist = vi.fn();
+    const container = renderEmptyState({
+      activeTheme: "general",
+      onLaunchBrowserAssist,
+    });
+    await act(async () => {
+      await Promise.resolve();
+    });
+
+    const launchButton = Array.from(container.querySelectorAll("button")).find(
+      (button) => button.textContent?.includes("打开浏览器协助"),
+    );
+    expect(launchButton).toBeTruthy();
+
+    act(() => {
+      launchButton?.click();
+    });
+
+    expect(onLaunchBrowserAssist).toHaveBeenCalledTimes(1);
+  });
 });
diff --git a/src/components/agent/chat/components/EmptyState.tsx b/src/components/agent/chat/components/EmptyState.tsx
index 864fb9d19..74c506d8d 100644
--- a/src/components/agent/chat/components/EmptyState.tsx
+++ b/src/components/agent/chat/components/EmptyState.tsx
@@ -53,6 +53,7 @@ import {
 import { ChatModelSelector } from "./ChatModelSelector";
 import { CharacterMention } from "./Inputbar/components/CharacterMention";
 import { SkillBadge } from "./Inputbar/components/SkillBadge";
+import { SkillSelector } from "./Inputbar/components/SkillSelector";
 import { useActiveSkill } from "./Inputbar/hooks/useActiveSkill";
 import type { Character } from "@/lib/api/memory";
 import type { Skill } from "@/lib/api/skills";
@@ -410,8 +411,18 @@ interface EmptyStateProps {
   characters?: Character[];
   /** 技能列表（用于 @ 引用） */
   skills?: Skill[];
+  /** 技能列表加载状态 */
+  isSkillsLoading?: boolean;
   /** 跳转到设置页安装技能 */
   onNavigateToSettings?: () => void;
+  /** 导入本地技能 */
+  onImportSkill?: () => void | Promise<void>;
+  /** 刷新技能 */
+  onRefreshSkills?: () => void | Promise<void>;
+  /** 启动浏览器协助 */
+  onLaunchBrowserAssist?: () => void | Promise<void>;
+  /** 浏览器协助启动中 */
+  browserAssistLoading?: boolean;
 }
 
 const ENTRY_THEME_ID = "social-media";
@@ -544,7 +555,12 @@ export const EmptyState: React.FC<EmptyStateProps> = ({
   selectedText = "",
   characters = [],
   skills = [],
+  isSkillsLoading = false,
   onNavigateToSettings,
+  onImportSkill,
+  onRefreshSkills,
+  onLaunchBrowserAssist,
+  browserAssistLoading = false,
 }) => {
   const textareaRef = useRef<HTMLTextAreaElement>(null);
   const { activeSkill, setActiveSkill, clearActiveSkill, wrapTextWithSkill } =
@@ -980,6 +996,18 @@ export const EmptyState: React.FC<EmptyStateProps> = ({
 
           <Toolbar>
             <ToolLoginLeft>
+              {isGeneralTheme && (
+                <SkillSelector
+                  skills={skills}
+                  activeSkill={activeSkill}
+                  isLoading={isSkillsLoading}
+                  onSelectSkill={setActiveSkill}
+                  onClearSkill={clearActiveSkill}
+                  onNavigateToSettings={onNavigateToSettings}
+                  onImportSkill={onImportSkill}
+                  onRefreshSkills={onRefreshSkills}
+                />
+              )}
               <ChatModelSelector
                 providerType={providerType}
                 setProviderType={setProviderType}
@@ -1288,7 +1316,9 @@ export const EmptyState: React.FC<EmptyStateProps> = ({
                     }`}
                     onClick={() => onTaskEnabledChange?.(!taskEnabled)}
                     aria-pressed={taskEnabled}
-                    title={taskEnabled ? "关闭后台任务偏好" : "开启后台任务偏好"}
+                    title={
+                      taskEnabled ? "关闭后台任务偏好" : "开启后台任务偏好"
+                    }
                   >
                     <ListChecks className="w-4 h-4 opacity-70" />
                   </Button>
@@ -1302,7 +1332,9 @@ export const EmptyState: React.FC<EmptyStateProps> = ({
                     }`}
                     onClick={() => onSubagentEnabledChange?.(!subagentEnabled)}
                     aria-pressed={subagentEnabled}
-                    title={subagentEnabled ? "关闭多代理偏好" : "开启多代理偏好"}
+                    title={
+                      subagentEnabled ? "关闭多代理偏好" : "开启多代理偏好"
+                    }
                   >
                     <Workflow className="w-4 h-4 opacity-70" />
                   </Button>
@@ -1379,6 +1411,31 @@ export const EmptyState: React.FC<EmptyStateProps> = ({
           </Toolbar>
         </InputCard>
 
+        {isGeneralTheme && onLaunchBrowserAssist ? (
+          <div className="w-full max-w-[800px] rounded-2xl border border-border/70 bg-card/70 px-4 py-4 shadow-sm">
+            <div className="flex flex-col gap-3 md:flex-row md:items-center md:justify-between">
+              <div className="min-w-0">
+                <div className="text-sm font-semibold text-foreground">
+                  浏览器协助
+                </div>
+                <p className="mt-1 text-xs leading-5 text-muted-foreground">
+                  在右侧画布实时查看远程浏览器，必要时可人工接管处理登录、验证码和临时操作。
+                </p>
+              </div>
+              <Button
+                type="button"
+                variant="outline"
+                onClick={() => void onLaunchBrowserAssist()}
+                disabled={browserAssistLoading}
+                className="h-10 shrink-0 rounded-xl px-4"
+              >
+                <Globe className="mr-2 h-4 w-4" />
+                {browserAssistLoading ? "启动中..." : "打开浏览器协助"}
+              </Button>
+            </div>
+          </div>
+        ) : null}
+
         {/* Dynamic Inspiration/Tips based on Tab - Styled nicely */}
         {selectedTextPreview && (
           <div className="w-full max-w-[800px] text-xs text-muted-foreground bg-muted/30 border border-border/70 rounded-lg px-3 py-2">
diff --git a/src/components/agent/chat/components/HarnessStatusPanel.test.tsx b/src/components/agent/chat/components/HarnessStatusPanel.test.tsx
index 646b690a8..1a24a15a0 100644
--- a/src/components/agent/chat/components/HarnessStatusPanel.test.tsx
+++ b/src/components/agent/chat/components/HarnessStatusPanel.test.tsx
@@ -172,6 +172,25 @@ describe("HarnessStatusPanel", () => {
     expect(document.body.textContent).toContain("收起工作台详情");
   });
 
+  it("未激活 skill 时不应渲染技能区块与导航入口", () => {
+    renderPanel({
+      environment: {
+        skillsCount: 0,
+        skillNames: [],
+        memorySignals: ["风格"],
+        contextItemsCount: 2,
+        activeContextCount: 1,
+        contextItemNames: ["需求.md"],
+        contextEnabled: true,
+      },
+    });
+
+    expect(document.body.textContent).not.toContain("已激活技能");
+    expect(
+      document.body.querySelector('button[aria-label="跳转到已激活技能"]'),
+    ).toBeNull();
+  });
+
   it("存在 runtimeStatus 时应在工作台中展示当前执行阶段", () => {
     renderPanel({
       harnessState: createHarnessState({
diff --git a/src/components/agent/chat/components/HarnessStatusPanel.tsx b/src/components/agent/chat/components/HarnessStatusPanel.tsx
index 5526d4767..72e075c0f 100644
--- a/src/components/agent/chat/components/HarnessStatusPanel.tsx
+++ b/src/components/agent/chat/components/HarnessStatusPanel.tsx
@@ -296,7 +296,9 @@ function splitTextIntoSegments(text: string): TextSegment[] {
   return segments.length > 0 ? segments : [{ type: "text", value: text }];
 }
 
-function findFirstUrl(...values: Array<string | undefined>): string | undefined {
+function findFirstUrl(
+  ...values: Array<string | undefined>
+): string | undefined {
   for (const value of values) {
     if (!value) {
       continue;
@@ -334,7 +336,9 @@ function isLikelyFilePath(value: string): boolean {
   );
 }
 
-function summarizeFileActions(events: HarnessSessionState["recentFileEvents"]): string {
+function summarizeFileActions(
+  events: HarnessSessionState["recentFileEvents"],
+): string {
   const counts = new Map<HarnessFileAction, number>();
 
   for (const event of events) {
@@ -662,7 +666,9 @@ function SearchOutputCard({
   const results = useMemo(
     () =>
       resolveSearchResultPreviewItemsFromText(
-        signal.content?.trim() || signal.preview?.trim() || signal.summary.trim(),
+        signal.content?.trim() ||
+          signal.preview?.trim() ||
+          signal.summary.trim(),
       ),
     [signal.content, signal.preview, signal.summary],
   );
@@ -758,7 +764,8 @@ function SearchOutputBatchCard({
 }) {
   const [expanded, setExpanded] = useState(true);
   const semanticSummaries = useMemo(
-    () => summarizeSearchQuerySemantics(signals.map((signal) => signal.summary)),
+    () =>
+      summarizeSearchQuerySemantics(signals.map((signal) => signal.summary)),
     [signals],
   );
   const preview = signals
@@ -785,9 +792,7 @@ function SearchOutputBatchCard({
             {preview}
             {hiddenCount > 0 ? ` 等 ${hiddenCount} 组` : ""}
           </div>
-          <div className="mt-1 text-xs text-muted-foreground">
-            联网检索批次
-          </div>
+          <div className="mt-1 text-xs text-muted-foreground">联网检索批次</div>
         </div>
         <span
           className="inline-flex h-8 w-8 shrink-0 items-center justify-center rounded-full text-muted-foreground"
@@ -949,9 +954,9 @@ export function HarnessStatusPanel({
     loading: false,
   });
   const previewRequestIdRef = useRef(0);
-  const sectionRefs = useRef<Partial<Record<HarnessSectionKey, HTMLElement | null>>>(
-    {},
-  );
+  const sectionRefs = useRef<
+    Partial<Record<HarnessSectionKey, HTMLElement | null>>
+  >({});
 
   const registerSectionRef = useCallback(
     (key: HarnessSectionKey, node: HTMLElement | null) => {
@@ -960,16 +965,13 @@ export function HarnessStatusPanel({
     [],
   );
 
-  const scrollToSection = useCallback(
-    (key: HarnessSectionKey) => {
-      const target = sectionRefs.current[key];
-      if (!target) {
-        return;
-      }
-      target.scrollIntoView({ behavior: "smooth", block: "start" });
-    },
-    [],
-  );
+  const scrollToSection = useCallback((key: HarnessSectionKey) => {
+    const target = sectionRefs.current[key];
+    if (!target) {
+      return;
+    }
+    target.scrollIntoView({ behavior: "smooth", block: "start" });
+  }, []);
 
   const recentSchedulerEvents = useMemo(
     () => subAgentRuntime.events.slice(-4).reverse(),
@@ -989,7 +991,9 @@ export function HarnessStatusPanel({
       ].filter(
         (option) =>
           option.value === "all" ||
-          harnessState.recentFileEvents.some((event) => event.kind === option.value),
+          harnessState.recentFileEvents.some(
+            (event) => event.kind === option.value,
+          ),
       ),
     [harnessState.recentFileEvents],
   );
@@ -1038,11 +1042,7 @@ export function HarnessStatusPanel({
       const isSearch = isSearchOutputSignal(signal);
       const lastEntry = entries[entries.length - 1];
 
-      if (
-        isSearch &&
-        lastEntry &&
-        lastEntry.type === "search_batch"
-      ) {
+      if (isSearch && lastEntry && lastEntry.type === "search_batch") {
         lastEntry.signals.push(signal);
         continue;
       }
@@ -1112,150 +1112,144 @@ export function HarnessStatusPanel({
       });
   }, [filteredFileEvents]);
 
-  const availableSections = useMemo(
-    () => {
-      const sections: HarnessSectionNavItem[] = [];
+  const availableSections = useMemo(() => {
+    const sections: HarnessSectionNavItem[] = [];
 
-      if (harnessState.runtimeStatus) {
-        sections.push({ key: "runtime", label: "当前阶段" });
-      }
-      if (harnessState.activeFileWrites.length > 0) {
-        sections.push({ key: "writes", label: "文件写入" });
-      }
-      if (harnessState.outputSignals.length > 0) {
-        sections.push({ key: "outputs", label: "工具输出" });
-      }
-      if (harnessState.pendingApprovals.length > 0) {
-        sections.push({ key: "approvals", label: "待审批" });
-      }
-      if (harnessState.recentFileEvents.length > 0) {
-        sections.push({ key: "files", label: "文件活动" });
-      }
-      if (
-        harnessState.plan.phase !== "idle" ||
-        harnessState.plan.items.length > 0
-      ) {
-        sections.push({ key: "plan", label: "规划状态" });
-      }
-      if (
-        subAgentRuntime.isRunning ||
-        harnessState.delegatedTasks.length > 0 ||
-        recentSchedulerEvents.length > 0 ||
-        subAgentRuntime.error ||
-        subAgentRuntime.result
-      ) {
-        sections.push({ key: "delegation", label: "子任务委派" });
-      }
-      if (harnessState.latestContextTrace.length > 0) {
-        sections.push({ key: "context", label: "上下文轨迹" });
-      }
+    if (harnessState.runtimeStatus) {
+      sections.push({ key: "runtime", label: "当前阶段" });
+    }
+    if (harnessState.activeFileWrites.length > 0) {
+      sections.push({ key: "writes", label: "文件写入" });
+    }
+    if (harnessState.outputSignals.length > 0) {
+      sections.push({ key: "outputs", label: "工具输出" });
+    }
+    if (harnessState.pendingApprovals.length > 0) {
+      sections.push({ key: "approvals", label: "待审批" });
+    }
+    if (harnessState.recentFileEvents.length > 0) {
+      sections.push({ key: "files", label: "文件活动" });
+    }
+    if (
+      harnessState.plan.phase !== "idle" ||
+      harnessState.plan.items.length > 0
+    ) {
+      sections.push({ key: "plan", label: "规划状态" });
+    }
+    if (
+      subAgentRuntime.isRunning ||
+      harnessState.delegatedTasks.length > 0 ||
+      recentSchedulerEvents.length > 0 ||
+      subAgentRuntime.error ||
+      subAgentRuntime.result
+    ) {
+      sections.push({ key: "delegation", label: "子任务委派" });
+    }
+    if (harnessState.latestContextTrace.length > 0) {
+      sections.push({ key: "context", label: "上下文轨迹" });
+    }
 
-      sections.push({ key: "capabilities", label: "已装载能力" });
+    if (environment.skillsCount > 0) {
+      sections.push({ key: "capabilities", label: "已激活技能" });
+    }
 
-      return sections;
-    },
-    [
-      harnessState.delegatedTasks.length,
-      harnessState.activeFileWrites.length,
-      harnessState.latestContextTrace.length,
-      harnessState.outputSignals.length,
-      harnessState.pendingApprovals.length,
-      harnessState.plan.items.length,
-      harnessState.plan.phase,
-      harnessState.recentFileEvents.length,
-      harnessState.runtimeStatus,
-      recentSchedulerEvents.length,
-      subAgentRuntime.error,
-      subAgentRuntime.isRunning,
-      subAgentRuntime.result,
-    ],
-  );
+    return sections;
+  }, [
+    environment.skillsCount,
+    harnessState.delegatedTasks.length,
+    harnessState.activeFileWrites.length,
+    harnessState.latestContextTrace.length,
+    harnessState.outputSignals.length,
+    harnessState.pendingApprovals.length,
+    harnessState.plan.items.length,
+    harnessState.plan.phase,
+    harnessState.recentFileEvents.length,
+    harnessState.runtimeStatus,
+    recentSchedulerEvents.length,
+    subAgentRuntime.error,
+    subAgentRuntime.isRunning,
+    subAgentRuntime.result,
+  ]);
 
-  const summaryCards = useMemo(
-    () => {
-      const cards: HarnessSummaryCard[] = [];
+  const summaryCards = useMemo(() => {
+    const cards: HarnessSummaryCard[] = [];
 
-      if (harnessState.runtimeStatus) {
-        cards.push({
-          sectionKey: "runtime",
-          title: "执行阶段",
-          value: formatRuntimePhaseLabel(harnessState.runtimeStatus),
-          hint:
-            harnessState.runtimeStatus.detail ||
-            harnessState.runtimeStatus.title,
-          icon: Loader2,
-        });
-      }
+    if (harnessState.runtimeStatus) {
+      cards.push({
+        sectionKey: "runtime",
+        title: "执行阶段",
+        value: formatRuntimePhaseLabel(harnessState.runtimeStatus),
+        hint:
+          harnessState.runtimeStatus.detail || harnessState.runtimeStatus.title,
+        icon: Loader2,
+      });
+    }
 
-      if (harnessState.activeFileWrites.length > 0) {
-        cards.push({
-          sectionKey: "writes",
-          title: "文件写入",
-          value: `${harnessState.activeFileWrites.length}`,
-          hint:
-            harnessState.activeFileWrites[0]?.displayName ||
-            "暂无正在处理的文件",
-          icon: FileText,
-        });
-      }
+    if (harnessState.activeFileWrites.length > 0) {
+      cards.push({
+        sectionKey: "writes",
+        title: "文件写入",
+        value: `${harnessState.activeFileWrites.length}`,
+        hint:
+          harnessState.activeFileWrites[0]?.displayName || "暂无正在处理的文件",
+        icon: FileText,
+      });
+    }
 
-      cards.push(
-        {
-          sectionKey: "approvals",
-          title: "待审批",
-          value: `${harnessState.pendingApprovals.length}`,
-          hint:
-            harnessState.pendingApprovals.length > 0
-              ? "需要你确认的操作"
-              : "当前无阻塞审批",
-          icon: ShieldAlert,
-        },
-        {
-          sectionKey: "files",
-          title: "文件活动",
-          value: `${harnessState.recentFileEvents.length}`,
-          hint:
-            harnessState.recentFileEvents[0]?.displayName ||
-            "暂无可展示文件活动",
-          icon: FolderOpen,
-        },
-        {
-          sectionKey: "plan",
-          title: "计划状态",
-          value:
-            harnessState.plan.phase === "planning"
-              ? "进行中"
-              : harnessState.plan.phase === "ready"
-                ? "已就绪"
-                : "空闲",
-          hint:
-            harnessState.plan.items[0]?.content || "未检测到显式计划快照",
-          icon: ListChecks,
-        },
-        {
-          sectionKey: "context",
-          title: "上下文",
-          value: `${environment.activeContextCount}/${environment.contextItemsCount}`,
-          hint:
-            environment.contextEnabled ? "上下文工作台已启用" : "普通聊天模式",
-          icon: Sparkles,
-        },
-      );
+    cards.push(
+      {
+        sectionKey: "approvals",
+        title: "待审批",
+        value: `${harnessState.pendingApprovals.length}`,
+        hint:
+          harnessState.pendingApprovals.length > 0
+            ? "需要你确认的操作"
+            : "当前无阻塞审批",
+        icon: ShieldAlert,
+      },
+      {
+        sectionKey: "files",
+        title: "文件活动",
+        value: `${harnessState.recentFileEvents.length}`,
+        hint:
+          harnessState.recentFileEvents[0]?.displayName || "暂无可展示文件活动",
+        icon: FolderOpen,
+      },
+      {
+        sectionKey: "plan",
+        title: "计划状态",
+        value:
+          harnessState.plan.phase === "planning"
+            ? "进行中"
+            : harnessState.plan.phase === "ready"
+              ? "已就绪"
+              : "空闲",
+        hint: harnessState.plan.items[0]?.content || "未检测到显式计划快照",
+        icon: ListChecks,
+      },
+      {
+        sectionKey: "context",
+        title: "上下文",
+        value: `${environment.activeContextCount}/${environment.contextItemsCount}`,
+        hint: environment.contextEnabled
+          ? "上下文工作台已启用"
+          : "普通聊天模式",
+        icon: Sparkles,
+      },
+    );
 
-      return cards;
-    },
-    [
-      environment.activeContextCount,
-      environment.contextEnabled,
-      environment.contextItemsCount,
-      harnessState.activeFileWrites,
-      harnessState.pendingApprovals.length,
-      harnessState.plan.items,
-      harnessState.plan.phase,
-      harnessState.recentFileEvents,
-      harnessState.runtimeStatus,
-    ],
-  );
+    return cards;
+  }, [
+    environment.activeContextCount,
+    environment.contextEnabled,
+    environment.contextItemsCount,
+    harnessState.activeFileWrites,
+    harnessState.pendingApprovals.length,
+    harnessState.plan.items,
+    harnessState.plan.phase,
+    harnessState.recentFileEvents,
+    harnessState.runtimeStatus,
+  ]);
 
   const openPreview = useCallback(
     async ({
@@ -1312,7 +1306,9 @@ export function HarnessStatusPanel({
           ...current,
           path: nextPath,
           displayName: getFileName(nextPath),
-          content: normalizedContent?.trim() ? normalizedContent : current.content,
+          content: normalizedContent?.trim()
+            ? normalizedContent
+            : current.content,
           isBinary: result.isBinary === true,
           size: result.size,
           error:
@@ -1345,7 +1341,12 @@ export function HarnessStatusPanel({
       previewDialog.path || previewDialog.displayName,
       previewDialog.content,
     );
-  }, [onOpenFile, previewDialog.content, previewDialog.displayName, previewDialog.path]);
+  }, [
+    onOpenFile,
+    previewDialog.content,
+    previewDialog.displayName,
+    previewDialog.path,
+  ]);
 
   const handleCopyPath = useCallback(async () => {
     const path = previewDialog.path?.trim();
@@ -1467,9 +1468,7 @@ export function HarnessStatusPanel({
           <div className="min-w-0">
             <div className="flex items-center gap-2">
               <Wrench className="h-4 w-4 text-muted-foreground" />
-              <h2 className="text-sm font-semibold text-foreground">
-                {title}
-              </h2>
+              <h2 className="text-sm font-semibold text-foreground">{title}</h2>
               {subAgentRuntime.isRunning ? (
                 <Badge variant="secondary" className="gap-1">
                   <Loader2 className="h-3 w-3 animate-spin" />
@@ -1477,9 +1476,7 @@ export function HarnessStatusPanel({
                 </Badge>
               ) : null}
             </div>
-            <p className="mt-1 text-xs text-muted-foreground">
-              {description}
-            </p>
+            <p className="mt-1 text-xs text-muted-foreground">{description}</p>
           </div>
           {!isDialogLayout ? (
             <Button
@@ -1490,9 +1487,7 @@ export function HarnessStatusPanel({
               onClick={() => setExpanded((value) => !value)}
               aria-expanded={isDetailsExpanded}
               aria-label={
-                isDetailsExpanded
-                  ? `折叠${toggleLabel}`
-                  : `展开${toggleLabel}`
+                isDetailsExpanded ? `折叠${toggleLabel}` : `展开${toggleLabel}`
               }
             >
               {isDetailsExpanded ? (
@@ -1684,7 +1679,8 @@ export function HarnessStatusPanel({
                   sectionKey="outputs"
                   title="工具输出"
                   badge={
-                    filteredOutputSignals.length === harnessState.outputSignals.length
+                    filteredOutputSignals.length ===
+                    harnessState.outputSignals.length
                       ? `${harnessState.outputSignals.length} 条`
                       : `${filteredOutputSignals.length} / ${harnessState.outputSignals.length} 条`
                   }
@@ -1745,7 +1741,9 @@ export function HarnessStatusPanel({
 
                           return (
                             <SearchOutputBatchCard
-                              key={entry.signals.map((signal) => signal.id).join("|")}
+                              key={entry.signals
+                                .map((signal) => signal.id)
+                                .join("|")}
                               signals={entry.signals}
                               onOpenUrl={handleOpenExternalLink}
                               onOpenDetail={(signal) =>
@@ -1772,7 +1770,8 @@ export function HarnessStatusPanel({
                         const canOpenPreview = Boolean(
                           signalPath || signal.content || signal.preview,
                         );
-                        const canOpenUrl = !canOpenPreview && Boolean(signalUrl);
+                        const canOpenUrl =
+                          !canOpenPreview && Boolean(signalUrl);
 
                         return (
                           <button
@@ -1780,7 +1779,9 @@ export function HarnessStatusPanel({
                             type="button"
                             className={cn(
                               "w-full rounded-xl border border-border bg-background p-3 text-left transition-colors hover:bg-muted/60",
-                              !canOpenPreview && !canOpenUrl && "cursor-default",
+                              !canOpenPreview &&
+                                !canOpenUrl &&
+                                "cursor-default",
                             )}
                             onClick={() =>
                               canOpenPreview
@@ -1793,7 +1794,7 @@ export function HarnessStatusPanel({
                                   })
                                 : signalUrl
                                   ? void handleOpenExternalLink(signalUrl)
-                                : undefined
+                                  : undefined
                             }
                             aria-label={`查看工具输出：${signal.title}`}
                           >
@@ -1886,7 +1887,8 @@ export function HarnessStatusPanel({
                   badge={
                     fileDisplayMode === "grouped"
                       ? `${groupedFileEvents.length} 个文件 / ${filteredFileEvents.length} 条`
-                      : filteredFileEvents.length === harnessState.recentFileEvents.length
+                      : filteredFileEvents.length ===
+                          harnessState.recentFileEvents.length
                         ? `${harnessState.recentFileEvents.length} 条`
                         : `${filteredFileEvents.length} / ${harnessState.recentFileEvents.length} 条`
                   }
@@ -1986,7 +1988,9 @@ export function HarnessStatusPanel({
                                   />
                                 </div>
                                 <div className="flex shrink-0 items-center gap-2">
-                                  <Badge variant="outline">{group.count} 次活动</Badge>
+                                  <Badge variant="outline">
+                                    {group.count} 次活动
+                                  </Badge>
                                   <Badge variant="secondary">
                                     {describeKind(group.kind)}
                                   </Badge>
@@ -1996,7 +2000,9 @@ export function HarnessStatusPanel({
                                 <Clock3 className="h-3.5 w-3.5" />
                                 <span>{formatTime(latestEvent.timestamp)}</span>
                                 <span>·</span>
-                                <span>最近 {describeAction(latestEvent.action)}</span>
+                                <span>
+                                  最近 {describeAction(latestEvent.action)}
+                                </span>
                                 <span>·</span>
                                 <span>{group.actionSummary}</span>
                               </div>
@@ -2170,7 +2176,10 @@ export function HarnessStatusPanel({
                             style={{
                               width: `${Math.max(
                                 0,
-                                Math.min(100, subAgentRuntime.progress.percentage),
+                                Math.min(
+                                  100,
+                                  subAgentRuntime.progress.percentage,
+                                ),
                               )}%`,
                             }}
                           />
@@ -2179,7 +2188,9 @@ export function HarnessStatusPanel({
                           <div className="mt-2 text-xs text-muted-foreground">
                             当前任务：
                             <InteractiveText
-                              text={subAgentRuntime.progress.currentTasks.join("、")}
+                              text={subAgentRuntime.progress.currentTasks.join(
+                                "、",
+                              )}
                               onOpenUrl={handleOpenExternalLink}
                             />
                           </div>
@@ -2201,11 +2212,15 @@ export function HarnessStatusPanel({
                               </span>
                             </div>
                             <div className="mt-1 flex flex-wrap gap-2 text-xs text-muted-foreground">
-                              {task.role ? <span>角色：{task.role}</span> : null}
+                              {task.role ? (
+                                <span>角色：{task.role}</span>
+                              ) : null}
                               {task.taskType ? (
                                 <span>类型：{task.taskType}</span>
                               ) : null}
-                              {task.model ? <span>模型：{task.model}</span> : null}
+                              {task.model ? (
+                                <span>模型：{task.model}</span>
+                              ) : null}
                             </div>
                             {task.summary ? (
                               <InteractiveText
@@ -2304,16 +2319,16 @@ export function HarnessStatusPanel({
                 </Section>
               ) : null}
 
-              <Section
-                sectionKey="capabilities"
-                title="已装载能力"
-                badge={`${environment.skillsCount} 个技能`}
-                registerRef={registerSectionRef}
-              >
-                <div className="space-y-3">
-                  <div className="flex flex-wrap gap-2">
-                    {environment.skillNames.length > 0 ? (
-                      environment.skillNames.map((name) => (
+              {environment.skillsCount > 0 ? (
+                <Section
+                  sectionKey="capabilities"
+                  title="已激活技能"
+                  badge={`${environment.skillsCount} 个技能`}
+                  registerRef={registerSectionRef}
+                >
+                  <div className="space-y-3">
+                    <div className="flex flex-wrap gap-2">
+                      {environment.skillNames.map((name) => (
                         <ActionableBadge
                           key={name}
                           variant="secondary"
@@ -2321,75 +2336,73 @@ export function HarnessStatusPanel({
                           onOpenUrl={handleOpenExternalLink}
                           onOpenPath={handleOpenPathValue}
                         />
-                      ))
-                    ) : (
-                      <span className="text-xs text-muted-foreground">
-                        当前未检测到已装载技能名称
-                      </span>
-                    )}
-                  </div>
-
-                  <div className="flex flex-wrap gap-2">
-                    {environment.memorySignals.length > 0 ? (
-                      environment.memorySignals.map((signal) => (
-                        <ActionableBadge
-                          key={signal}
-                          variant="outline"
-                          value={signal}
-                          onOpenUrl={handleOpenExternalLink}
-                          onOpenPath={handleOpenPathValue}
-                        />
-                      ))
-                    ) : (
-                      <span className="text-xs text-muted-foreground">
-                        当前未识别到持久记忆信号
-                      </span>
-                    )}
-                  </div>
-
-                  <div className="space-y-1 text-xs text-muted-foreground">
-                    <div>
-                      上下文条目：{environment.activeContextCount}/
-                      {environment.contextItemsCount}
+                      ))}
                     </div>
-                    {environment.contextItemNames.length > 0 ? (
-                      <div className="space-y-1">
-                        <div>活跃上下文：</div>
-                        <div className="flex flex-wrap gap-2">
-                          {environment.contextItemNames.map((item) => (
-                            <ActionableBadge
-                              key={item}
-                              variant="outline"
-                              value={item}
-                              onOpenUrl={handleOpenExternalLink}
-                              onOpenPath={handleOpenPathValue}
-                            />
-                          ))}
-                        </div>
-                      </div>
-                    ) : null}
-                  </div>
 
-                  <div className="flex flex-wrap gap-2">
-                    <Badge variant="outline">
-                      规划 {harnessState.activity.planning}
-                    </Badge>
-                    <Badge variant="outline">
-                      文件 {harnessState.activity.filesystem}
-                    </Badge>
-                    <Badge variant="outline">
-                      执行 {harnessState.activity.execution}
-                    </Badge>
-                    <Badge variant="outline">网页 {harnessState.activity.web}</Badge>
-                    <Badge variant="outline">
-                      技能 {harnessState.activity.skills}
-                    </Badge>
-                    <Badge variant="outline">
-                      委派 {harnessState.activity.delegation}
-                    </Badge>
+                    <div className="flex flex-wrap gap-2">
+                      {environment.memorySignals.length > 0 ? (
+                        environment.memorySignals.map((signal) => (
+                          <ActionableBadge
+                            key={signal}
+                            variant="outline"
+                            value={signal}
+                            onOpenUrl={handleOpenExternalLink}
+                            onOpenPath={handleOpenPathValue}
+                          />
+                        ))
+                      ) : (
+                        <span className="text-xs text-muted-foreground">
+                          当前未识别到持久记忆信号
+                        </span>
+                      )}
+                    </div>
+
+                    <div className="space-y-1 text-xs text-muted-foreground">
+                      <div>
+                        上下文条目：{environment.activeContextCount}/
+                        {environment.contextItemsCount}
+                      </div>
+                      {environment.contextItemNames.length > 0 ? (
+                        <div className="space-y-1">
+                          <div>活跃上下文：</div>
+                          <div className="flex flex-wrap gap-2">
+                            {environment.contextItemNames.map((item) => (
+                              <ActionableBadge
+                                key={item}
+                                variant="outline"
+                                value={item}
+                                onOpenUrl={handleOpenExternalLink}
+                                onOpenPath={handleOpenPathValue}
+                              />
+                            ))}
+                          </div>
+                        </div>
+                      ) : null}
+                    </div>
+
+                    <div className="flex flex-wrap gap-2">
+                      <Badge variant="outline">
+                        规划 {harnessState.activity.planning}
+                      </Badge>
+                      <Badge variant="outline">
+                        文件 {harnessState.activity.filesystem}
+                      </Badge>
+                      <Badge variant="outline">
+                        执行 {harnessState.activity.execution}
+                      </Badge>
+                      <Badge variant="outline">
+                        网页 {harnessState.activity.web}
+                      </Badge>
+                      <Badge variant="outline">
+                        技能 {harnessState.activity.skills}
+                      </Badge>
+                      <Badge variant="outline">
+                        委派 {harnessState.activity.delegation}
+                      </Badge>
+                    </div>
                   </div>
-                </div>
-              </Section>
+                </Section>
+              ) : null}
             </div>
           </ScrollArea>
         ) : null}
@@ -2430,7 +2443,9 @@ export function HarnessStatusPanel({
             <div className="flex flex-wrap items-center gap-2">
               <Badge variant="secondary">{previewDialog.displayName}</Badge>
               {formatSize(previewDialog.size) ? (
-                <Badge variant="outline">{formatSize(previewDialog.size)}</Badge>
+                <Badge variant="outline">
+                  {formatSize(previewDialog.size)}
+                </Badge>
               ) : null}
               {previewDialog.loading ? (
                 <Badge variant="outline" className="gap-1">
@@ -2475,7 +2490,11 @@ export function HarnessStatusPanel({
 
           <DialogFooter className="border-t px-6 py-4">
             {previewDialog.path ? (
-              <Button type="button" variant="outline" onClick={() => void handleCopyPath()}>
+              <Button
+                type="button"
+                variant="outline"
+                onClick={() => void handleCopyPath()}
+              >
                 复制路径
               </Button>
             ) : null}
diff --git a/src/components/agent/chat/components/Inputbar/components/InputbarComposerSection.tsx b/src/components/agent/chat/components/Inputbar/components/InputbarComposerSection.tsx
index b89302bb8..f45efdac0 100644
--- a/src/components/agent/chat/components/Inputbar/components/InputbarComposerSection.tsx
+++ b/src/components/agent/chat/components/Inputbar/components/InputbarComposerSection.tsx
@@ -6,9 +6,11 @@ import type { QueuedTurnSnapshot } from "@/lib/api/agentRuntime";
 import type { MessageImage } from "../../../types";
 import { CharacterMention } from "./CharacterMention";
 import { InputbarCore } from "./InputbarCore";
+import { SkillSelector } from "./SkillSelector";
 import { ThemeWorkbenchStatusPanel } from "./ThemeWorkbenchStatusPanel";
 import { InputbarModelExtra } from "./InputbarModelExtra";
 import { InputbarExecutionStrategySelect } from "./InputbarExecutionStrategySelect";
+import { isGeneralResearchTheme } from "../../../utils/generalAgentPrompt";
 import type {
   ThemeWorkbenchGateState,
   ThemeWorkbenchQuickAction,
@@ -23,11 +25,16 @@ interface InputbarComposerSectionProps {
   inputAdapter: ChatInputAdapter;
   characters: Character[];
   skills: Skill[];
+  isSkillsLoading?: boolean;
   textareaRef: React.RefObject<HTMLTextAreaElement>;
   input: string;
+  activeSkill?: Skill | null;
   onSelectCharacter?: (character: Character) => void;
   onSelectSkill: (skill: Skill) => void;
+  onClearSkill?: () => void;
   onNavigateToSettings?: () => void;
+  onImportSkill?: () => void | Promise<void>;
+  onRefreshSkills?: () => void | Promise<void>;
   onSend: () => void;
   onToolClick: (tool: string) => void;
   activeTools: Record<string, boolean>;
@@ -58,11 +65,16 @@ export const InputbarComposerSection: React.FC<
   inputAdapter,
   characters,
   skills,
+  isSkillsLoading,
   textareaRef,
   input,
+  activeSkill,
   onSelectCharacter,
   onSelectSkill,
+  onClearSkill,
   onNavigateToSettings,
+  onImportSkill,
+  onRefreshSkills,
   onSend,
   onToolClick,
   activeTools,
@@ -80,6 +92,9 @@ export const InputbarComposerSection: React.FC<
   queuedTurns,
   onRemoveQueuedTurn,
 }) => {
+  const showSkillSelector =
+    !isThemeWorkbenchVariant && isGeneralResearchTheme(activeTheme);
+
   if (renderThemeWorkbenchGeneratingPanel) {
     return (
       <ThemeWorkbenchStatusPanel
@@ -149,16 +164,30 @@ export const InputbarComposerSection: React.FC<
         queuedTurns={queuedTurns}
         onRemoveQueuedTurn={onRemoveQueuedTurn}
         leftExtra={
-          <InputbarModelExtra
-            isFullscreen={isFullscreen}
-            isThemeWorkbenchVariant={isThemeWorkbenchVariant}
-            providerType={inputAdapter.model?.providerType}
-            setProviderType={inputAdapter.actions.setProviderType}
-            model={inputAdapter.model?.model}
-            setModel={inputAdapter.actions.setModel}
-            activeTheme={activeTheme}
-            onManageProviders={onManageProviders}
-          />
+          <>
+            {showSkillSelector ? (
+              <SkillSelector
+                skills={skills}
+                activeSkill={activeSkill}
+                isLoading={isSkillsLoading}
+                onSelectSkill={onSelectSkill}
+                onClearSkill={onClearSkill}
+                onNavigateToSettings={onNavigateToSettings}
+                onImportSkill={onImportSkill}
+                onRefreshSkills={onRefreshSkills}
+              />
+            ) : null}
+            <InputbarModelExtra
+              isFullscreen={isFullscreen}
+              isThemeWorkbenchVariant={isThemeWorkbenchVariant}
+              providerType={inputAdapter.model?.providerType}
+              setProviderType={inputAdapter.actions.setProviderType}
+              model={inputAdapter.model?.model}
+              setModel={inputAdapter.actions.setModel}
+              activeTheme={activeTheme}
+              onManageProviders={onManageProviders}
+            />
+          </>
         }
         rightExtra={
           <InputbarExecutionStrategySelect
diff --git a/src/components/agent/chat/components/Inputbar/components/SkillSelector.test.tsx b/src/components/agent/chat/components/Inputbar/components/SkillSelector.test.tsx
new file mode 100644
index 000000000..e15f83d93
--- /dev/null
+++ b/src/components/agent/chat/components/Inputbar/components/SkillSelector.test.tsx
@@ -0,0 +1,266 @@
+import React from "react";
+import { act } from "react";
+import { createRoot, type Root } from "react-dom/client";
+import { afterEach, beforeEach, describe, expect, it, vi } from "vitest";
+import { SkillSelector } from "./SkillSelector";
+import type { Skill } from "@/lib/api/skills";
+
+const mockToastInfo = vi.fn();
+
+vi.mock("sonner", () => ({
+  toast: {
+    info: (...args: unknown[]) => mockToastInfo(...args),
+  },
+}));
+
+vi.mock("@/components/ui/popover", () => ({
+  Popover: ({ children }: { children: React.ReactNode }) => (
+    <div>{children}</div>
+  ),
+  PopoverTrigger: ({ children }: { children: React.ReactNode }) => (
+    <>{children}</>
+  ),
+  PopoverContent: ({ children }: { children: React.ReactNode }) => (
+    <div data-testid="skill-selector-popover">{children}</div>
+  ),
+}));
+
+vi.mock("@/components/ui/command", () => {
+  const Command = ({
+    children,
+    shouldFilter: _shouldFilter,
+    ...props
+  }: React.HTMLAttributes<HTMLDivElement> & { shouldFilter?: boolean }) => (
+    <div {...props}>{children}</div>
+  );
+
+  const CommandInput = ({
+    value,
+    onValueChange,
+    placeholder,
+  }: {
+    value?: string;
+    onValueChange?: (value: string) => void;
+    placeholder?: string;
+  }) => (
+    <input
+      data-testid="skill-selector-input"
+      value={value}
+      placeholder={placeholder}
+      onChange={(event) => onValueChange?.(event.target.value)}
+    />
+  );
+
+  const CommandList = ({ children }: { children: React.ReactNode }) => (
+    <div>{children}</div>
+  );
+
+  const CommandGroup = ({
+    heading,
+    children,
+  }: {
+    heading?: string;
+    children: React.ReactNode;
+  }) => (
+    <section>
+      {heading ? <div>{heading}</div> : null}
+      {children}
+    </section>
+  );
+
+  const CommandItem = ({
+    children,
+    onSelect,
+  }: {
+    children: React.ReactNode;
+    onSelect?: () => void;
+  }) => (
+    <button type="button" onClick={() => onSelect?.()}>
+      {children}
+    </button>
+  );
+
+  return {
+    Command,
+    CommandInput,
+    CommandList,
+    CommandGroup,
+    CommandItem,
+  };
+});
+
+const mountedRoots: Array<{ root: Root; container: HTMLDivElement }> = [];
+
+beforeEach(() => {
+  (
+    globalThis as typeof globalThis & {
+      IS_REACT_ACT_ENVIRONMENT?: boolean;
+    }
+  ).IS_REACT_ACT_ENVIRONMENT = true;
+});
+
+afterEach(() => {
+  while (mountedRoots.length > 0) {
+    const mounted = mountedRoots.pop();
+    if (!mounted) break;
+    act(() => {
+      mounted.root.unmount();
+    });
+    mounted.container.remove();
+  }
+  vi.clearAllMocks();
+});
+
+function createSkill(name: string, key: string, installed: boolean): Skill {
+  return {
+    key,
+    name,
+    description: `${name} 的描述`,
+    directory: `${key}-dir`,
+    installed,
+    sourceKind: "builtin",
+  };
+}
+
+function renderSkillSelector(
+  props?: Partial<React.ComponentProps<typeof SkillSelector>>,
+) {
+  const container = document.createElement("div");
+  document.body.appendChild(container);
+  const root = createRoot(container);
+
+  const defaultProps: React.ComponentProps<typeof SkillSelector> = {
+    skills: [],
+    activeSkill: null,
+    isLoading: false,
+    onSelectSkill: vi.fn(),
+    onClearSkill: vi.fn(),
+    onImportSkill: vi.fn(),
+    onRefreshSkills: vi.fn(),
+  };
+
+  act(() => {
+    root.render(<SkillSelector {...defaultProps} {...props} />);
+  });
+
+  mountedRoots.push({ root, container });
+  return container;
+}
+
+describe("SkillSelector", () => {
+  it("选择已安装技能时应回调 onSelectSkill", () => {
+    const onSelectSkill = vi.fn<(skill: Skill) => void>();
+    const installedSkill = createSkill("写作助手", "writer", true);
+    const container = renderSkillSelector({
+      skills: [installedSkill],
+      onSelectSkill,
+    });
+
+    const skillButton = Array.from(container.querySelectorAll("button")).find(
+      (button) => button.textContent?.includes("写作助手"),
+    );
+    expect(skillButton).toBeTruthy();
+
+    act(() => {
+      skillButton?.click();
+    });
+
+    expect(onSelectSkill).toHaveBeenCalledWith(installedSkill);
+  });
+
+  it("存在已选技能时应支持清空", () => {
+    const onClearSkill = vi.fn<() => void>();
+    const activeSkill = createSkill("研究助手", "research", true);
+    const container = renderSkillSelector({
+      skills: [activeSkill],
+      activeSkill,
+      onClearSkill,
+    });
+
+    expect(container.textContent).toContain("不使用技能");
+
+    const clearButton = Array.from(container.querySelectorAll("button")).find(
+      (button) => button.textContent?.includes("不使用技能"),
+    );
+    expect(clearButton).toBeTruthy();
+
+    act(() => {
+      clearButton?.click();
+    });
+
+    expect(onClearSkill).toHaveBeenCalledTimes(1);
+  });
+
+  it("点击未安装技能时应给出安装提示", () => {
+    const onNavigateToSettings = vi.fn<() => void>();
+    const container = renderSkillSelector({
+      skills: [createSkill("表格导入", "xlsx", false)],
+      onNavigateToSettings,
+    });
+
+    const unavailableSkillButton = Array.from(
+      container.querySelectorAll("button"),
+    ).find((button) => button.textContent?.includes("表格导入"));
+    expect(unavailableSkillButton).toBeTruthy();
+
+    act(() => {
+      unavailableSkillButton?.click();
+    });
+
+    expect(mockToastInfo).toHaveBeenCalledTimes(1);
+    expect(mockToastInfo.mock.calls[0]?.[0]).toContain("尚未安装");
+    expect(mockToastInfo.mock.calls[0]?.[1]).toMatchObject({
+      action: {
+        label: "去安装",
+        onClick: onNavigateToSettings,
+      },
+    });
+  });
+
+  it("点击底部导入技能入口时应回调 onImportSkill", async () => {
+    const onImportSkill = vi.fn<() => void>();
+    const container = renderSkillSelector({
+      onImportSkill,
+    });
+
+    const importButton = container.querySelector(
+      '[data-testid="skill-selector-import"]',
+    ) as HTMLButtonElement | null;
+    expect(importButton).toBeTruthy();
+
+    await act(async () => {
+      importButton?.click();
+      await Promise.resolve();
+    });
+
+    expect(onImportSkill).toHaveBeenCalledTimes(1);
+  });
+
+  it("点击底部刷新技能入口时应回调 onRefreshSkills", async () => {
+    const onRefreshSkills = vi.fn<() => void>();
+    const container = renderSkillSelector({
+      onRefreshSkills,
+    });
+
+    const refreshButton = container.querySelector(
+      '[data-testid="skill-selector-refresh"]',
+    ) as HTMLButtonElement | null;
+    expect(refreshButton).toBeTruthy();
+
+    await act(async () => {
+      refreshButton?.click();
+      await Promise.resolve();
+    });
+
+    expect(onRefreshSkills).toHaveBeenCalledTimes(1);
+  });
+
+  it("加载中且无技能时应显示加载状态", () => {
+    const container = renderSkillSelector({
+      isLoading: true,
+      skills: [],
+    });
+
+    expect(container.textContent).toContain("技能加载中");
+  });
+});
diff --git a/src/components/agent/chat/components/Inputbar/components/SkillSelector.tsx b/src/components/agent/chat/components/Inputbar/components/SkillSelector.tsx
new file mode 100644
index 000000000..b7e8414e6
--- /dev/null
+++ b/src/components/agent/chat/components/Inputbar/components/SkillSelector.tsx
@@ -0,0 +1,368 @@
+import React, { useCallback, useEffect, useMemo, useState } from "react";
+import {
+  Check,
+  FolderOpen,
+  Loader2,
+  RefreshCw,
+  Settings2,
+  X,
+  Zap,
+} from "lucide-react";
+import {
+  Command,
+  CommandGroup,
+  CommandInput,
+  CommandItem,
+  CommandList,
+} from "@/components/ui/command";
+import {
+  Popover,
+  PopoverContent,
+  PopoverTrigger,
+} from "@/components/ui/popover";
+import type { Skill } from "@/lib/api/skills";
+import { cn } from "@/lib/utils";
+import { toast } from "sonner";
+
+interface SkillSelectorProps {
+  skills?: Skill[];
+  activeSkill?: Skill | null;
+  isLoading?: boolean;
+  onSelectSkill: (skill: Skill) => void;
+  onClearSkill?: () => void;
+  onNavigateToSettings?: () => void;
+  onImportSkill?: () => void | Promise<void>;
+  onRefreshSkills?: () => void | Promise<void>;
+  triggerLabel?: string;
+  className?: string;
+}
+
+function matchesSkillQuery(skill: Skill, query: string): boolean {
+  if (!query) {
+    return true;
+  }
+
+  const normalizedQuery = query.toLowerCase();
+  return (
+    skill.name.toLowerCase().includes(normalizedQuery) ||
+    skill.key.toLowerCase().includes(normalizedQuery) ||
+    skill.description?.toLowerCase().includes(normalizedQuery) === true
+  );
+}
+
+export const SkillSelector: React.FC<SkillSelectorProps> = ({
+  skills = [],
+  activeSkill = null,
+  isLoading = false,
+  onSelectSkill,
+  onClearSkill,
+  onNavigateToSettings,
+  onImportSkill,
+  onRefreshSkills,
+  triggerLabel = "Skills",
+  className,
+}) => {
+  const [open, setOpen] = useState(false);
+  const [query, setQuery] = useState("");
+  const [importing, setImporting] = useState(false);
+  const [refreshing, setRefreshing] = useState(false);
+  const [autoRefreshTriggered, setAutoRefreshTriggered] = useState(false);
+
+  useEffect(() => {
+    if (!open) {
+      setQuery("");
+      setAutoRefreshTriggered(false);
+    }
+  }, [open]);
+
+  const installedSkills = useMemo(
+    () =>
+      skills.filter(
+        (skill) => skill.installed && matchesSkillQuery(skill, query),
+      ),
+    [query, skills],
+  );
+
+  const availableSkills = useMemo(
+    () =>
+      skills.filter(
+        (skill) => !skill.installed && matchesSkillQuery(skill, query),
+      ),
+    [query, skills],
+  );
+
+  const hasResults =
+    installedSkills.length > 0 ||
+    availableSkills.length > 0 ||
+    Boolean(activeSkill && onClearSkill);
+  const canImport = Boolean(onImportSkill || onNavigateToSettings);
+  const canRefresh = Boolean(onRefreshSkills);
+  const refreshBusy = isLoading || refreshing;
+
+  const handleRefresh = useCallback(async () => {
+    if (!onRefreshSkills || refreshBusy) {
+      return;
+    }
+
+    try {
+      setRefreshing(true);
+      await onRefreshSkills();
+    } finally {
+      setRefreshing(false);
+    }
+  }, [onRefreshSkills, refreshBusy]);
+
+  useEffect(() => {
+    if (
+      !open ||
+      autoRefreshTriggered ||
+      !onRefreshSkills ||
+      refreshBusy ||
+      skills.length > 0
+    ) {
+      return;
+    }
+
+    setAutoRefreshTriggered(true);
+    void handleRefresh();
+  }, [
+    autoRefreshTriggered,
+    handleRefresh,
+    onRefreshSkills,
+    open,
+    refreshBusy,
+    skills.length,
+  ]);
+
+  const handleSelectInstalledSkill = (skill: Skill) => {
+    onSelectSkill(skill);
+    setOpen(false);
+  };
+
+  const handleClearSkill = () => {
+    onClearSkill?.();
+    setOpen(false);
+  };
+
+  const handleSelectAvailableSkill = (skill: Skill) => {
+    setOpen(false);
+    toast.info(`技能「${skill.name}」尚未安装`, {
+      action: onNavigateToSettings
+        ? {
+            label: "去安装",
+            onClick: onNavigateToSettings,
+          }
+        : undefined,
+    });
+  };
+
+  const handleImport = async () => {
+    if (!canImport || importing) {
+      return;
+    }
+
+    setOpen(false);
+
+    if (!onImportSkill) {
+      onNavigateToSettings?.();
+      return;
+    }
+
+    try {
+      setImporting(true);
+      await onImportSkill();
+    } finally {
+      setImporting(false);
+    }
+  };
+
+  return (
+    <Popover open={open} onOpenChange={setOpen}>
+      <PopoverTrigger asChild>
+        <button
+          type="button"
+          data-testid="skill-selector-trigger"
+          className={cn(
+            "inline-flex h-8 items-center gap-1.5 rounded-full border px-3 text-xs font-medium transition-colors",
+            activeSkill
+              ? "border-primary/40 bg-primary/10 text-primary"
+              : "border-border/70 bg-background/95 text-muted-foreground hover:bg-muted/70 hover:text-foreground",
+            className,
+          )}
+        >
+          <Zap className="h-3.5 w-3.5" />
+          <span>{triggerLabel}</span>
+        </button>
+      </PopoverTrigger>
+      <PopoverContent
+        className="w-80 p-0"
+        side="top"
+        align="start"
+        sideOffset={8}
+      >
+        <Command shouldFilter={false} className="bg-background">
+          <div className="relative">
+            <CommandInput
+              className={canRefresh ? "pr-12" : undefined}
+              placeholder="搜索技能"
+              value={query}
+              onValueChange={setQuery}
+            />
+            {canRefresh ? (
+              <button
+                type="button"
+                data-testid="skill-selector-refresh"
+                onClick={() => void handleRefresh()}
+                disabled={refreshBusy}
+                className="absolute right-3 top-1/2 inline-flex h-8 w-8 -translate-y-1/2 items-center justify-center rounded-md text-muted-foreground transition hover:bg-muted/60 hover:text-foreground disabled:cursor-not-allowed disabled:opacity-60"
+                aria-label={refreshBusy ? "技能加载中" : "刷新技能"}
+                title={refreshBusy ? "技能加载中" : "刷新技能"}
+              >
+                {refreshBusy ? (
+                  <Loader2 className="h-4 w-4 animate-spin" />
+                ) : (
+                  <RefreshCw className="h-4 w-4" />
+                )}
+              </button>
+            ) : null}
+          </div>
+          <CommandList>
+            {activeSkill && onClearSkill ? (
+              <CommandGroup heading="当前技能">
+                <CommandItem
+                  value="__clear_skill__"
+                  onSelect={handleClearSkill}
+                  className="cursor-pointer"
+                >
+                  <X className="mr-2 h-4 w-4 text-muted-foreground" />
+                  <div className="flex-1">
+                    <div className="font-medium">不使用技能</div>
+                    <div className="text-xs text-muted-foreground">
+                      当前已选：{activeSkill.name}
+                    </div>
+                  </div>
+                </CommandItem>
+              </CommandGroup>
+            ) : null}
+
+            {installedSkills.length > 0 ? (
+              <CommandGroup heading="可用技能">
+                {installedSkills.map((skill) => {
+                  const selected = activeSkill?.key === skill.key;
+                  return (
+                    <CommandItem
+                      key={skill.directory}
+                      value={`${skill.name} ${skill.key} ${skill.description || ""}`}
+                      onSelect={() => handleSelectInstalledSkill(skill)}
+                      className="cursor-pointer"
+                    >
+                      <Zap
+                        className={cn(
+                          "mr-2 h-4 w-4",
+                          selected ? "text-primary" : "text-muted-foreground",
+                        )}
+                      />
+                      <div className="min-w-0 flex-1">
+                        <div className="flex items-center gap-2">
+                          <span className="truncate font-medium">
+                            {skill.name}
+                          </span>
+                          <span className="text-[11px] text-muted-foreground">
+                            /{skill.key}
+                          </span>
+                        </div>
+                        {skill.description ? (
+                          <div className="line-clamp-1 text-xs text-muted-foreground">
+                            {skill.description}
+                          </div>
+                        ) : null}
+                      </div>
+                      {selected ? (
+                        <Check className="ml-2 h-4 w-4 text-primary" />
+                      ) : null}
+                    </CommandItem>
+                  );
+                })}
+              </CommandGroup>
+            ) : null}
+
+            {availableSkills.length > 0 ? (
+              <CommandGroup heading="未安装技能">
+                {availableSkills.map((skill) => (
+                  <CommandItem
+                    key={skill.directory}
+                    value={`${skill.name} ${skill.key} ${skill.description || ""}`}
+                    onSelect={() => handleSelectAvailableSkill(skill)}
+                    className="cursor-pointer opacity-70"
+                  >
+                    <Settings2 className="mr-2 h-4 w-4 text-muted-foreground" />
+                    <div className="min-w-0 flex-1">
+                      <div className="flex items-center gap-2">
+                        <span className="truncate font-medium">
+                          {skill.name}
+                        </span>
+                        <span className="text-[11px] text-muted-foreground">
+                          /{skill.key}
+                        </span>
+                      </div>
+                      {skill.description ? (
+                        <div className="line-clamp-1 text-xs text-muted-foreground">
+                          {skill.description}
+                        </div>
+                      ) : null}
+                    </div>
+                  </CommandItem>
+                ))}
+              </CommandGroup>
+            ) : null}
+
+            {!hasResults ? (
+              <div className="px-3 py-6 text-center text-sm text-muted-foreground">
+                {refreshBusy ? (
+                  <div className="flex flex-col items-center gap-2">
+                    <Loader2 className="h-5 w-5 animate-spin text-muted-foreground" />
+                    <div>技能加载中...</div>
+                  </div>
+                ) : (
+                  <>
+                    <div>暂无可用技能</div>
+                    {onNavigateToSettings ? (
+                      <button
+                        type="button"
+                        className="mt-2 text-primary hover:underline"
+                        onClick={() => {
+                          setOpen(false);
+                          onNavigateToSettings();
+                        }}
+                      >
+                        去技能设置
+                      </button>
+                    ) : null}
+                  </>
+                )}
+              </div>
+            ) : null}
+          </CommandList>
+          {canImport ? (
+            <div className="border-t border-border/70 p-1.5">
+              <button
+                type="button"
+                data-testid="skill-selector-import"
+                onClick={() => void handleImport()}
+                disabled={importing}
+                className="flex w-full items-center gap-2 rounded-md px-2.5 py-2 text-left text-sm text-muted-foreground transition hover:bg-muted/60 hover:text-foreground disabled:cursor-not-allowed disabled:opacity-60"
+              >
+                {importing ? (
+                  <Loader2 className="h-4 w-4 animate-spin" />
+                ) : (
+                  <FolderOpen className="h-4 w-4" />
+                )}
+                <span>{importing ? "导入中..." : "导入技能"}</span>
+              </button>
+            </div>
+          ) : null}
+        </Command>
+      </PopoverContent>
+    </Popover>
+  );
+};
diff --git a/src/components/agent/chat/components/Inputbar/hooks/useInputbarController.ts b/src/components/agent/chat/components/Inputbar/hooks/useInputbarController.ts
index b762bb116..2afba39b6 100644
--- a/src/components/agent/chat/components/Inputbar/hooks/useInputbarController.ts
+++ b/src/components/agent/chat/components/Inputbar/hooks/useInputbarController.ts
@@ -206,6 +206,8 @@ export function useInputbarController({
     renderThemeWorkbenchGeneratingPanel,
     visibleA2UISubmissionNotice,
     isA2UISubmissionNoticeVisible,
+    activeSkill,
     setActiveSkill,
+    clearActiveSkill,
   };
 }
diff --git a/src/components/agent/chat/components/Inputbar/index.tsx b/src/components/agent/chat/components/Inputbar/index.tsx
index 97a9f5ee0..90619cecd 100644
--- a/src/components/agent/chat/components/Inputbar/index.tsx
+++ b/src/components/agent/chat/components/Inputbar/index.tsx
@@ -8,8 +8,14 @@ import { InputbarComposerSection } from "./components/InputbarComposerSection";
 import { InputbarOverlayShell } from "./components/InputbarOverlayShell";
 import { InputbarSurface } from "./components/InputbarSurface";
 import type { A2UISubmissionNoticeData } from "./components/A2UISubmissionNotice";
-import type { A2UIResponse, A2UIFormData } from "@/components/content-creator/a2ui/types";
-import type { ThemeWorkbenchGateState, ThemeWorkbenchWorkflowStep } from "./hooks/useThemeWorkbenchInputState";
+import type {
+  A2UIResponse,
+  A2UIFormData,
+} from "@/components/content-creator/a2ui/types";
+import type {
+  ThemeWorkbenchGateState,
+  ThemeWorkbenchWorkflowStep,
+} from "./hooks/useThemeWorkbenchInputState";
 import { type InputbarToolStates } from "./hooks/useInputbarToolState";
 import { useInputbarController } from "./hooks/useInputbarController";
 
@@ -46,10 +52,16 @@ interface InputbarProps {
   characters?: Character[];
   /** 技能列表（用于 @ 引用） */
   skills?: Skill[];
+  /** 技能列表加载状态 */
+  isSkillsLoading?: boolean;
   /** 选择角色回调 */
   onSelectCharacter?: (character: Character) => void;
   /** 跳转到设置页安装技能 */
   onNavigateToSettings?: () => void;
+  /** 导入本地技能 */
+  onImportSkill?: () => void | Promise<void>;
+  /** 刷新技能 */
+  onRefreshSkills?: () => void | Promise<void>;
   providerType?: string;
   setProviderType?: (type: string) => void;
   model?: string;
@@ -93,8 +105,11 @@ export const Inputbar: React.FC<InputbarProps> = ({
   onTaskFileClick,
   characters = [],
   skills = [],
+  isSkillsLoading = false,
   onSelectCharacter,
   onNavigateToSettings,
+  onImportSkill,
+  onRefreshSkills,
   providerType,
   setProviderType,
   model,
@@ -141,7 +156,9 @@ export const Inputbar: React.FC<InputbarProps> = ({
     renderThemeWorkbenchGeneratingPanel,
     visibleA2UISubmissionNotice,
     isA2UISubmissionNoticeVisible,
+    activeSkill,
     setActiveSkill,
+    clearActiveSkill,
   } = useInputbarController({
     input,
     setInput,
@@ -202,11 +219,16 @@ export const Inputbar: React.FC<InputbarProps> = ({
         inputAdapter={inputAdapter}
         characters={characters}
         skills={skills}
+        isSkillsLoading={isSkillsLoading}
         textareaRef={textareaRef}
         input={input}
+        activeSkill={activeSkill}
         onSelectCharacter={onSelectCharacter}
         onSelectSkill={setActiveSkill}
+        onClearSkill={clearActiveSkill}
         onNavigateToSettings={onNavigateToSettings}
+        onImportSkill={onImportSkill}
+        onRefreshSkills={onRefreshSkills}
         onSend={handleSend}
         onToolClick={handleToolClick}
         activeTools={activeTools}
diff --git a/src/components/agent/chat/components/README.md b/src/components/agent/chat/components/README.md
index ca891c3d4..03912a21f 100644
--- a/src/components/agent/chat/components/README.md
+++ b/src/components/agent/chat/components/README.md
@@ -9,6 +9,7 @@ Agent 聊天界面的 UI 组件集合。
 | `ChatNavbar.tsx` | 聊天顶部导航栏 |
 | `ChatSettings.tsx` | 聊天设置面板 |
 | `ChatSidebar.tsx` | 聊天侧边栏（会话列表） |
+| `CanvasWorkbenchLayout.tsx` | 画布内工作台布局，宽屏侧栏/窄屏底部工作台均支持产物、全部文件、变更、预览与下载动作 |
 | `EmptyState.tsx` | 空状态占位组件 |
 | `InputArea.tsx` | 消息输入区域 |
 | `MarkdownRenderer.tsx` | Markdown 渲染组件 |
diff --git a/src/components/agent/chat/components/RuntimeStyleControlBar.tsx b/src/components/agent/chat/components/RuntimeStyleControlBar.tsx
index 8f8e1418e..7faa5d98f 100644
--- a/src/components/agent/chat/components/RuntimeStyleControlBar.tsx
+++ b/src/components/agent/chat/components/RuntimeStyleControlBar.tsx
@@ -104,16 +104,16 @@ export function RuntimeStyleControlBar({
   };
 
   return (
-    <Card className="mx-4 mt-3 border-dashed bg-muted/20">
+    <Card className="mx-4 mt-3 overflow-hidden rounded-[24px] border border-slate-200/80 bg-[linear-gradient(180deg,rgba(248,250,252,0.92)_0%,rgba(255,255,255,1)_42%)] shadow-sm shadow-slate-950/5">
       <CardContent className="space-y-3 p-3">
         <div className="flex flex-wrap items-center gap-2">
-          <div className="mr-1 inline-flex items-center gap-2 text-sm font-medium text-muted-foreground">
-            <Palette className="h-4 w-4" />
+          <div className="mr-1 inline-flex items-center gap-2 rounded-full border border-slate-200 bg-white px-3 py-1 text-sm font-medium text-slate-600 shadow-sm">
+            <Palette className="h-4 w-4 text-slate-700" />
             任务风格
           </div>
 
           <Select value={selection.presetId} onValueChange={handlePresetChange}>
-            <SelectTrigger className="h-9 w-[210px] bg-background">
+            <SelectTrigger className="h-9 w-[210px] border-slate-200 bg-white">
               <SelectValue placeholder="选择本次任务风格" />
             </SelectTrigger>
             <SelectContent>
@@ -133,7 +133,7 @@ export function RuntimeStyleControlBar({
                 本次模拟说明
               </Button>
             </PopoverTrigger>
-            <PopoverContent className="w-96 space-y-3" align="start">
+            <PopoverContent className="w-96 space-y-3 rounded-[20px] border border-slate-200/80 bg-white shadow-lg shadow-slate-950/10" align="start">
               <div>
                 <div className="text-sm font-medium">临时风格备注</div>
                 <p className="mt-1 text-xs text-muted-foreground">
@@ -184,33 +184,33 @@ export function RuntimeStyleControlBar({
           </Button>
         </div>
 
-        <div className="grid gap-3 lg:grid-cols-[minmax(0,1fr)_220px] lg:items-center">
+        <div className="grid gap-3 rounded-[20px] border border-slate-200/80 bg-white/92 px-4 py-4 lg:grid-cols-[minmax(0,1fr)_220px] lg:items-center">
           <div className="min-w-0">
-            <div className="flex flex-wrap items-center gap-2 text-sm">
+            <div className="flex flex-wrap items-center gap-2 text-sm text-slate-700">
               <span>{summary}</span>
               {selection.source === "library" && selection.sourceLabel ? (
                 <button
                   type="button"
                   onClick={clearLibrarySelection}
-                  className="inline-flex items-center gap-1 rounded-full border px-2 py-0.5 text-xs text-muted-foreground hover:bg-muted"
+                  className="inline-flex items-center gap-1 rounded-full border border-slate-200 px-2 py-0.5 text-xs text-slate-500 hover:bg-slate-50"
                 >
                   来自我的风格：{selection.sourceLabel}
                   <X className="h-3 w-3" />
                 </button>
               ) : null}
             </div>
-            <p className="mt-1 line-clamp-2 text-xs text-muted-foreground">
+            <p className="mt-1 line-clamp-2 text-xs text-slate-500">
               {previewPrompt || "未设置临时风格覆盖，将沿用项目默认风格与当前创作上下文。"}
             </p>
             {!hasProjectDefaultStyle && (
-              <p className="mt-2 text-xs text-amber-600 dark:text-amber-400">
+              <p className="mt-2 text-xs text-amber-700 dark:text-amber-400">
                 当前项目还没有默认风格，建议先点“编辑项目风格”配置基线风格。
               </p>
             )}
           </div>
 
           <div className="space-y-2">
-            <div className="flex items-center justify-between text-xs text-muted-foreground">
+            <div className="flex items-center justify-between text-xs text-slate-500">
               <span>风格强度</span>
               <span>{selection.strength}</span>
             </div>
@@ -232,7 +232,7 @@ export function RuntimeStyleControlBar({
 
       <Dialog open={styleGuideDialogOpen} onOpenChange={setStyleGuideDialogOpen}>
         <DialogContent className="max-w-6xl max-h-[90vh] overflow-y-auto p-0">
-          <DialogHeader className="border-b px-6 py-4">
+          <DialogHeader className="sr-only">
             <DialogTitle>项目默认风格</DialogTitle>
           </DialogHeader>
           <div className="p-6">
diff --git a/src/components/agent/chat/components/ThemeWorkbenchSidebar.tsx b/src/components/agent/chat/components/ThemeWorkbenchSidebar.tsx
index 950e72824..9081af47f 100644
--- a/src/components/agent/chat/components/ThemeWorkbenchSidebar.tsx
+++ b/src/components/agent/chat/components/ThemeWorkbenchSidebar.tsx
@@ -3044,14 +3044,14 @@ function ThemeWorkbenchSidebarComponent({
                 <DropdownMenuTrigger asChild>
                   <NewTopicButton>
                     <Plus size={14} />
-                    {isVersionMode ? '创建版本快照' : '新建分支话题'}
+                    {isVersionMode ? '创建版本快照' : '新建分支任务'}
                     <ChevronDown size={12} style={{ marginLeft: 'auto' }} />
                   </NewTopicButton>
                 </DropdownMenuTrigger>
                 <DropdownMenuContent align="start" style={{ width: '260px' }}>
                   <DropdownMenuItem onClick={onNewTopic}>
                     <GitBranch size={14} />
-                    <span>{isVersionMode ? '创建版本快照' : '新建分支话题'}</span>
+                    <span>{isVersionMode ? '创建版本快照' : '新建分支任务'}</span>
                   </DropdownMenuItem>
                   {onAddImage && (
                     <DropdownMenuItem onClick={onAddImage}>
@@ -3098,7 +3098,7 @@ function ThemeWorkbenchSidebarComponent({
               <BranchList className="custom-scrollbar">
                 {branchItems.length === 0 ? (
                   <ActivityMeta>
-                    {isVersionMode ? '暂无文稿版本，先生成或创建快照' : '暂无分支话题'}
+                    {isVersionMode ? '暂无文稿版本，先生成或创建快照' : '暂无分支任务'}
                   </ActivityMeta>
                 ) : (
                   branchItems.map((item) => (
diff --git a/src/components/agent/chat/hooks/agentChatShared.ts b/src/components/agent/chat/hooks/agentChatShared.ts
index b7b8069da..39795875c 100644
--- a/src/components/agent/chat/hooks/agentChatShared.ts
+++ b/src/components/agent/chat/hooks/agentChatShared.ts
@@ -6,6 +6,8 @@ import type {
 import type { Message, MessageImage, WriteArtifactContext } from "../types";
 import { normalizeExecutionStrategy } from "./agentChatCoreUtils";
 
+export type TaskStatus = "draft" | "running" | "waiting" | "done" | "failed";
+
 export interface Topic {
   id: string;
   title: string;
@@ -13,6 +15,12 @@ export interface Topic {
   updatedAt: Date;
   messagesCount: number;
   executionStrategy: AsterExecutionStrategy;
+  status: TaskStatus;
+  lastPreview: string;
+  isPinned: boolean;
+  hasUnread: boolean;
+  tag?: string | null;
+  sourceSessionId: string;
 }
 
 export interface UseAsterAgentChatOptions {
@@ -23,6 +31,7 @@ export interface UseAsterAgentChatOptions {
     context?: WriteArtifactContext,
   ) => void;
   workspaceId: string;
+  disableSessionRestore?: boolean;
 }
 
 export interface SendMessageObserver {
@@ -63,6 +72,14 @@ export interface ClearMessagesOptions {
   toastMessage?: string;
 }
 
+export interface LiveTaskSnapshot {
+  updatedAt?: Date;
+  messagesCount: number;
+  status: TaskStatus;
+  lastPreview: string;
+  hasUnread: boolean;
+}
+
 export type SendMessageFn = (
   content: string,
   images: MessageImage[],
@@ -83,19 +100,184 @@ export const getScopedStorageKey = (
   return `${prefix}_${resolvedWorkspaceId || "global"}`;
 };
 
+function normalizeTaskPreviewText(value: string) {
+  return value.trim().replace(/\s+/g, " ").slice(0, 96);
+}
+
+function extractMessageTextContent(message: Message): string {
+  if (message.content?.trim()) {
+    return normalizeTaskPreviewText(message.content);
+  }
+
+  const partText = message.contentParts
+    ?.filter(
+      (part): part is Extract<(typeof message.contentParts)[number], { type: "text" | "thinking" }> =>
+        part.type === "text" || part.type === "thinking",
+    )
+    .map((part) => part.text)
+    .join(" ");
+
+  return normalizeTaskPreviewText(partText || "");
+}
+
+function extractToolCallPreview(message: Message): string {
+  const latestToolCall = [...(message.toolCalls || [])].reverse().find(Boolean);
+  if (!latestToolCall) {
+    return "";
+  }
+
+  const toolName = latestToolCall.name?.trim() || "工具";
+  if (latestToolCall.status === "failed") {
+    return `执行失败：${toolName}`;
+  }
+  if (latestToolCall.status === "streaming") {
+    return `正在执行：${toolName}`;
+  }
+  return `最近执行：${toolName}`;
+}
+
+export function extractTaskPreviewFromMessages(messages: Message[]): string {
+  for (let index = messages.length - 1; index >= 0; index -= 1) {
+    const message = messages[index];
+    const textContent = extractMessageTextContent(message);
+    if (textContent) {
+      return textContent;
+    }
+  }
+
+  for (let index = messages.length - 1; index >= 0; index -= 1) {
+    const message = messages[index];
+    const hasPendingAction = message.actionRequests?.some(
+      (item) => item.status === "pending" || item.status === "queued",
+    );
+    if (hasPendingAction) {
+      return "等待你确认或补充信息后继续执行。";
+    }
+  }
+
+  for (let index = messages.length - 1; index >= 0; index -= 1) {
+    const message = messages[index];
+    const toolPreview = extractToolCallPreview(message);
+    if (toolPreview) {
+      return toolPreview;
+    }
+  }
+
+  for (let index = messages.length - 1; index >= 0; index -= 1) {
+    const message = messages[index];
+    const runtimeDetail = normalizeTaskPreviewText(
+      `${message.runtimeStatus?.title || ""} ${message.runtimeStatus?.detail || ""}`,
+    );
+    if (runtimeDetail) {
+      return runtimeDetail;
+    }
+  }
+
+  return "";
+}
+
+export function deriveTaskStatusFromLiveState(params: {
+  messages: Message[];
+  isSending: boolean;
+  pendingActionCount: number;
+  queuedTurnCount?: number;
+  workspaceError: boolean;
+}): TaskStatus {
+  const {
+    messages,
+    isSending,
+    pendingActionCount,
+    queuedTurnCount = 0,
+    workspaceError,
+  } = params;
+
+  if (workspaceError) {
+    return "failed";
+  }
+
+  if (isSending || queuedTurnCount > 0) {
+    return "running";
+  }
+
+  const hasPendingActionInMessages = messages.some((message) =>
+    message.actionRequests?.some(
+      (item) => item.status === "pending" || item.status === "queued",
+    ),
+  );
+  if (pendingActionCount > 0 || hasPendingActionInMessages) {
+    return "waiting";
+  }
+
+  if (messages.length === 0) {
+    return "draft";
+  }
+
+  const latestMessage = messages[messages.length - 1];
+  const latestToolFailed = latestMessage?.toolCalls?.some(
+    (item) => item.status === "failed",
+  );
+  if (latestToolFailed) {
+    return "failed";
+  }
+
+  if (latestMessage?.role === "user") {
+    return "running";
+  }
+
+  return "done";
+}
+
+export function buildLiveTaskSnapshot(params: {
+  messages: Message[];
+  isSending: boolean;
+  pendingActionCount: number;
+  queuedTurnCount?: number;
+  workspaceError: boolean;
+}): LiveTaskSnapshot {
+  const { messages, isSending, pendingActionCount, queuedTurnCount, workspaceError } =
+    params;
+  const lastMessage = messages[messages.length - 1];
+  const preview = extractTaskPreviewFromMessages(messages);
+
+  return {
+    updatedAt: lastMessage?.timestamp,
+    messagesCount: messages.length,
+    status: deriveTaskStatusFromLiveState({
+      messages,
+      isSending,
+      pendingActionCount,
+      queuedTurnCount,
+      workspaceError,
+    }),
+    lastPreview:
+      preview || "等待你补充任务需求后开始执行。",
+    hasUnread: false,
+  };
+}
+
 export const mapSessionToTopic = (session: AsterSessionInfo): Topic => {
   const updatedAtEpoch = Number.isFinite(session.updated_at)
     ? session.updated_at
     : session.created_at;
+  const messagesCount = session.messages_count ?? 0;
 
   return {
     id: session.id,
     title:
       session.name ||
-      `话题 ${new Date(session.created_at * 1000).toLocaleDateString("zh-CN")}`,
+      `任务 ${new Date(session.created_at * 1000).toLocaleDateString("zh-CN")}`,
     createdAt: new Date(session.created_at * 1000),
     updatedAt: new Date(updatedAtEpoch * 1000),
-    messagesCount: session.messages_count ?? 0,
+    messagesCount,
     executionStrategy: normalizeExecutionStrategy(session.execution_strategy),
+    status: messagesCount > 0 ? "done" : "draft",
+    lastPreview:
+      messagesCount > 0
+        ? `已记录 ${messagesCount} 条消息，可继续补充或复盘。`
+        : "等待你补充任务需求后开始执行。",
+    isPinned: false,
+    hasUnread: false,
+    tag: null,
+    sourceSessionId: session.id,
   };
 };
diff --git a/src/components/agent/chat/hooks/index.ts b/src/components/agent/chat/hooks/index.ts
index 33fd734ad..5842486d0 100644
--- a/src/components/agent/chat/hooks/index.ts
+++ b/src/components/agent/chat/hooks/index.ts
@@ -7,7 +7,7 @@
 import { useAsterAgentChat } from "./useAsterAgentChat";
 export { useArtifactAutoPreviewSync } from "./useArtifactAutoPreviewSync";
 
-export type { Topic } from "./useAgentChat";
+export type { Topic } from "./agentChatShared";
 
 /** Hook 配置选项 */
 interface UseAgentChatUnifiedOptions {
@@ -18,6 +18,7 @@ interface UseAgentChatUnifiedOptions {
     context?: import("../types").WriteArtifactContext,
   ) => void;
   workspaceId: string;
+  disableSessionRestore?: boolean;
 }
 
 /**
diff --git a/src/components/agent/chat/hooks/useAgentChat.test.tsx b/src/components/agent/chat/hooks/useAgentChat.test.tsx
index 82fccba24..b15f1723d 100644
--- a/src/components/agent/chat/hooks/useAgentChat.test.tsx
+++ b/src/components/agent/chat/hooks/useAgentChat.test.tsx
@@ -270,3 +270,28 @@ describe("useAgentChat 偏好持久化", () => {
     }
   });
 });
+
+describe("useAgentChat 会话创建", () => {
+  it("创建新会话时不应默认注入已安装 skills", async () => {
+    const harness = mountHook("ws-session-create");
+
+    try {
+      await flushEffects();
+
+      await act(async () => {
+        await harness.getValue().sendMessage("普通对话消息", [], false, false);
+      });
+
+      expect(mockCreateAgentSession).toHaveBeenCalledTimes(1);
+      expect(mockCreateAgentSession).toHaveBeenCalledWith(
+        "claude",
+        "ws-session-create",
+        "claude-sonnet-4-5",
+        undefined,
+      );
+      expect(mockCreateAgentSession.mock.calls[0]).toHaveLength(4);
+    } finally {
+      harness.unmount();
+    }
+  });
+});
diff --git a/src/components/agent/chat/hooks/useAgentChat.ts b/src/components/agent/chat/hooks/useAgentChat.ts
index 4522f2168..3b05c1d71 100644
--- a/src/components/agent/chat/hooks/useAgentChat.ts
+++ b/src/components/agent/chat/hooks/useAgentChat.ts
@@ -18,10 +18,8 @@ import {
   stopAsterSession,
   type AgentProcessStatus,
   type SessionInfo,
-  type SkillInfo,
 } from "@/lib/api/agentRuntime";
 import { parseStreamEvent, type StreamEvent } from "@/lib/api/agentStream";
-import { skillsApi } from "@/lib/api/skills";
 import { A2UIFormAPI } from "@/lib/api/a2uiForm";
 import type { A2UIFormData } from "@/components/content-creator/a2ui/types";
 import {
@@ -685,40 +683,6 @@ export function useAgentChat(options: UseAgentChatOptions) {
 
   const createFreshSession = async (): Promise<string | null> => {
     try {
-      const [allProxycastSkills, localInstalledSkills] = await Promise.all([
-        skillsApi.getAll("proxycast").catch(() => []),
-        skillsApi.getInstalledProxyCastSkills().catch(() => []),
-      ]);
-      const detailsByName = new Map<string, SkillInfo>();
-
-      allProxycastSkills
-        .filter((skill) => skill.installed)
-        .forEach((skill) => {
-          const skillName = (
-            skill.directory ||
-            skill.key ||
-            skill.name ||
-            ""
-          ).trim();
-          if (!skillName) return;
-          detailsByName.set(skillName, {
-            name: skillName,
-            description: skill.description || undefined,
-            path: `~/.proxycast/skills/${skillName}/SKILL.md`,
-          });
-        });
-
-      localInstalledSkills.forEach((name) => {
-        const skillName = (name || "").trim();
-        if (!skillName || detailsByName.has(skillName)) return;
-        detailsByName.set(skillName, {
-          name: skillName,
-          path: `~/.proxycast/skills/${skillName}/SKILL.md`,
-        });
-      });
-
-      const details = Array.from(detailsByName.values());
-
       // Create new session with CURRENT provider/model as baseline
       // 传递 systemPrompt 用于内容创作等场景
       const resolvedWorkspaceId = getRequiredWorkspaceId();
@@ -727,7 +691,6 @@ export function useAgentChat(options: UseAgentChatOptions) {
         resolvedWorkspaceId,
         model || undefined,
         systemPrompt, // 传递系统提示词
-        details.length > 0 ? details : undefined,
       );
 
       setSessionId(response.session_id);
diff --git a/src/components/agent/chat/hooks/useAgentSession.ts b/src/components/agent/chat/hooks/useAgentSession.ts
index 9fbc95d62..76a9ba240 100644
--- a/src/components/agent/chat/hooks/useAgentSession.ts
+++ b/src/components/agent/chat/hooks/useAgentSession.ts
@@ -41,6 +41,7 @@ import type { AgentRuntimeAdapter } from "./agentRuntimeAdapter";
 interface UseAgentSessionOptions {
   runtime: AgentRuntimeAdapter;
   workspaceId: string;
+  disableSessionRestore: boolean;
   isInitialized: boolean;
   executionStrategy: AsterExecutionStrategy;
   providerTypeRef: MutableRefObject<string>;
@@ -71,6 +72,7 @@ export function useAgentSession(options: UseAgentSessionOptions) {
   const {
     runtime,
     workspaceId,
+    disableSessionRestore,
     isInitialized,
     executionStrategy,
     providerTypeRef,
@@ -91,7 +93,7 @@ export function useAgentSession(options: UseAgentSessionOptions) {
   );
 
   const [sessionId, setSessionId] = useState<string | null>(() => {
-    if (!workspaceId?.trim()) {
+    if (disableSessionRestore || !workspaceId?.trim()) {
       return null;
     }
 
@@ -109,33 +111,33 @@ export function useAgentSession(options: UseAgentSessionOptions) {
     );
   });
   const [messages, setMessages] = useState<Message[]>(() =>
-    workspaceId?.trim()
-      ? loadTransient<Message[]>(`aster_messages_${workspaceId.trim()}`, [])
-      : [],
+    disableSessionRestore || !workspaceId?.trim()
+      ? []
+      : loadTransient<Message[]>(`aster_messages_${workspaceId.trim()}`, []),
   );
   const [threadTurns, setThreadTurns] = useState<AgentThreadTurn[]>(() =>
-    workspaceId?.trim()
-      ? loadTransient<AgentThreadTurn[]>(
+    disableSessionRestore || !workspaceId?.trim()
+      ? []
+      : loadTransient<AgentThreadTurn[]>(
           `aster_thread_turns_${workspaceId.trim()}`,
           [],
-        )
-      : [],
+        ),
   );
   const [threadItems, setThreadItems] = useState<AgentThreadItem[]>(() =>
-    workspaceId?.trim()
-      ? loadTransient<AgentThreadItem[]>(
+    disableSessionRestore || !workspaceId?.trim()
+      ? []
+      : loadTransient<AgentThreadItem[]>(
           `aster_thread_items_${workspaceId.trim()}`,
           [],
-        )
-      : [],
+        ),
   );
   const [currentTurnId, setCurrentTurnId] = useState<string | null>(() =>
-    workspaceId?.trim()
-      ? loadTransient<string | null>(
+    disableSessionRestore || !workspaceId?.trim()
+      ? null
+      : loadTransient<string | null>(
           `aster_curr_turnId_${workspaceId.trim()}`,
           null,
-        )
-      : null,
+        ),
   );
   const [queuedTurns, setQueuedTurns] = useState<QueuedTurnSnapshot[]>([]);
   const [topics, setTopics] = useState<Topic[]>([]);
@@ -220,7 +222,7 @@ export function useAgentSession(options: UseAgentSessionOptions) {
   }, [currentTurnId, scopedKeys, workspaceId]);
 
   useEffect(() => {
-    if (!workspaceId?.trim()) {
+    if (disableSessionRestore || !workspaceId?.trim()) {
       setSessionId(null);
       setMessages([]);
       setThreadTurns([]);
@@ -231,7 +233,7 @@ export function useAgentSession(options: UseAgentSessionOptions) {
       resetStreamingRefs();
       restoredWorkspaceRef.current = null;
       hydratedSessionRef.current = null;
-      skipAutoRestoreRef.current = false;
+      skipAutoRestoreRef.current = disableSessionRestore;
       return;
     }
 
@@ -265,6 +267,7 @@ export function useAgentSession(options: UseAgentSessionOptions) {
     hydratedSessionRef.current = null;
     skipAutoRestoreRef.current = false;
   }, [
+    disableSessionRestore,
     resetPendingActions,
     resetStreamingRefs,
     scopedKeys,
@@ -356,11 +359,17 @@ export function useAgentSession(options: UseAgentSessionOptions) {
         setTopics((prev) => [
           {
             id: newSessionId,
-            title: sessionName?.trim() || "新话题",
+            title: sessionName?.trim() || "新任务",
             createdAt: now,
             updatedAt: now,
             messagesCount: 0,
             executionStrategy,
+            status: "draft",
+            lastPreview: "等待你补充任务需求后开始执行。",
+            isPinned: false,
+            hasUnread: false,
+            tag: null,
+            sourceSessionId: newSessionId,
           },
           ...prev.filter((topic) => topic.id !== newSessionId),
         ]);
@@ -385,8 +394,8 @@ export function useAgentSession(options: UseAgentSessionOptions) {
         void loadTopics();
         return newSessionId;
       } catch (error) {
-        console.error("[AsterChat] 创建新话题失败:", error);
-        toast.error(`创建新话题失败: ${error}`);
+        console.error("[AsterChat] 创建新任务失败:", error);
+        toast.error(`创建新任务失败: ${error}`);
         return null;
       }
     },
@@ -411,7 +420,7 @@ export function useAgentSession(options: UseAgentSessionOptions) {
 
   const clearMessages = useCallback(
     (options: ClearMessagesOptions = {}) => {
-      const { showToast = true, toastMessage = "新话题已创建" } = options;
+      const { showToast = true, toastMessage = "新任务已创建" } = options;
 
       const scopedSessionKey = scopedKeys.currentSessionKey;
       const scopedPersistedSessionKey = scopedKeys.persistedSessionKey;
@@ -581,6 +590,7 @@ export function useAgentSession(options: UseAgentSessionOptions) {
     const resolvedWorkspaceId = workspaceId?.trim();
     if (!resolvedWorkspaceId) return;
     if (!isInitialized) return;
+    if (disableSessionRestore) return;
     if (!topicsReady) return;
     if (skipAutoRestoreRef.current) return;
     if (sessionId) return;
@@ -611,6 +621,7 @@ export function useAgentSession(options: UseAgentSessionOptions) {
     });
   }, [
     isInitialized,
+    disableSessionRestore,
     sessionId,
     scopedKeys,
     switchTopic,
@@ -695,10 +706,10 @@ export function useAgentSession(options: UseAgentSessionOptions) {
           saveTransient(scopedKeys.currentTurnKey, null);
         }
 
-        toast.success("话题已删除");
+        toast.success("任务已删除");
       } catch (error) {
-        console.error("[AsterChat] 删除话题失败:", error);
-        toast.error("删除话题失败");
+        console.error("[AsterChat] 删除任务失败:", error);
+        toast.error("删除任务失败");
       }
     },
     [
@@ -721,9 +732,9 @@ export function useAgentSession(options: UseAgentSessionOptions) {
       try {
         await runtime.renameSession(topicId, normalizedTitle);
         await loadTopics();
-        toast.success("话题已重命名");
+        toast.success("任务已重命名");
       } catch (error) {
-        console.error("[AsterChat] 重命名话题失败:", error);
+        console.error("[AsterChat] 重命名任务失败:", error);
         toast.error("重命名失败");
       }
     },
@@ -746,6 +757,49 @@ export function useAgentSession(options: UseAgentSessionOptions) {
     [],
   );
 
+  const updateTopicSnapshot = useCallback(
+    (
+      targetSessionId: string,
+      snapshot: Partial<
+        Pick<
+          Topic,
+          "updatedAt" | "messagesCount" | "status" | "lastPreview" | "hasUnread"
+        >
+      >,
+    ) => {
+      setTopics((prev) => {
+        let changed = false;
+        const nextTopics = prev.map((topic) => {
+          if (topic.id !== targetSessionId) {
+            return topic;
+          }
+
+          const nextTopic = {
+            ...topic,
+            ...snapshot,
+          };
+
+          const unchanged =
+            nextTopic.messagesCount === topic.messagesCount &&
+            nextTopic.status === topic.status &&
+            nextTopic.lastPreview === topic.lastPreview &&
+            nextTopic.hasUnread === topic.hasUnread &&
+            nextTopic.updatedAt?.getTime() === topic.updatedAt?.getTime();
+
+          if (unchanged) {
+            return topic;
+          }
+
+          changed = true;
+          return nextTopic;
+        });
+
+        return changed ? nextTopics : prev;
+      });
+    },
+    [],
+  );
+
   return {
     sessionId,
     setSessionId,
@@ -773,5 +827,6 @@ export function useAgentSession(options: UseAgentSessionOptions) {
     deleteMessage,
     editMessage,
     updateTopicExecutionStrategy,
+    updateTopicSnapshot,
   };
 }
diff --git a/src/components/agent/chat/hooks/useArtifactDisplayState.test.ts b/src/components/agent/chat/hooks/useArtifactDisplayState.test.ts
index 5953225db..94221c63d 100644
--- a/src/components/agent/chat/hooks/useArtifactDisplayState.test.ts
+++ b/src/components/agent/chat/hooks/useArtifactDisplayState.test.ts
@@ -1,6 +1,9 @@
 import { describe, expect, it } from "vitest";
 import type { Artifact } from "@/lib/artifact/types";
-import { resolveArtifactDisplayState } from "./useArtifactDisplayState";
+import {
+  resolveArtifactDisplayState,
+  settleLiveArtifactAfterStreamStops,
+} from "./useArtifactDisplayState";
 
 function createArtifact(overrides: Partial<Artifact> = {}): Artifact {
   const content = overrides.content ?? "# 内容";
@@ -160,3 +163,46 @@ describe("resolveArtifactDisplayState", () => {
     expect(state.overlay).toBeNull();
   });
 });
+
+describe("settleLiveArtifactAfterStreamStops", () => {
+  it("流结束后应把仍停留在 streaming 的 artifact 收尾为 complete", () => {
+    const artifact = createArtifact({
+      id: "artifact-live",
+      content: "# 已完成正文",
+      status: "streaming",
+      meta: {
+        filePath: "workspace/live.md",
+        writePhase: "streaming",
+        isPartial: true,
+      },
+    });
+
+    const settled = settleLiveArtifactAfterStreamStops(artifact, {
+      streamActive: false,
+    });
+
+    expect(settled).not.toBeNull();
+    expect(settled).not.toBe(artifact);
+    expect(settled?.status).toBe("complete");
+    expect(settled?.meta.writePhase).toBe("completed");
+    expect(settled?.meta.isPartial).toBe(false);
+  });
+
+  it("流仍在进行时不应提前收尾 artifact 状态", () => {
+    const artifact = createArtifact({
+      id: "artifact-live",
+      content: "# 增量正文",
+      status: "streaming",
+      meta: {
+        filePath: "workspace/live.md",
+        writePhase: "streaming",
+      },
+    });
+
+    const settled = settleLiveArtifactAfterStreamStops(artifact, {
+      streamActive: true,
+    });
+
+    expect(settled).toBe(artifact);
+  });
+});
diff --git a/src/components/agent/chat/hooks/useArtifactDisplayState.ts b/src/components/agent/chat/hooks/useArtifactDisplayState.ts
index 3692ec890..be6e63c04 100644
--- a/src/components/agent/chat/hooks/useArtifactDisplayState.ts
+++ b/src/components/agent/chat/hooks/useArtifactDisplayState.ts
@@ -43,6 +43,39 @@ export interface ResolveArtifactDisplayStateOptions {
 
 const SLOW_TRANSITION_THRESHOLD_MS = 900;
 
+export function settleLiveArtifactAfterStreamStops(
+  artifact: Artifact | null,
+  options: {
+    streamActive: boolean;
+  },
+): Artifact | null {
+  if (!artifact || options.streamActive) {
+    return artifact;
+  }
+
+  const writePhase = resolveArtifactWritePhase(artifact);
+  const isPendingLike =
+    artifact.status === "pending" ||
+    artifact.status === "streaming" ||
+    writePhase === "preparing" ||
+    writePhase === "streaming" ||
+    writePhase === "persisted";
+
+  if (!isPendingLike || !artifact.content.trim()) {
+    return artifact;
+  }
+
+  return {
+    ...artifact,
+    status: "complete",
+    meta: {
+      ...artifact.meta,
+      writePhase: "completed",
+      isPartial: false,
+    },
+  };
+}
+
 function hasRenderableArtifactContent(artifact: Artifact | null | undefined): boolean {
   return Boolean(artifact?.content.trim());
 }
diff --git a/src/components/agent/chat/hooks/useAsterAgentChat.test.tsx b/src/components/agent/chat/hooks/useAsterAgentChat.test.tsx
index 08381f057..c027f34c6 100644
--- a/src/components/agent/chat/hooks/useAsterAgentChat.test.tsx
+++ b/src/components/agent/chat/hooks/useAsterAgentChat.test.tsx
@@ -231,6 +231,101 @@ describe("useAsterAgentChat 首页新会话", () => {
   });
 });
 
+describe("useAsterAgentChat 任务快照", () => {
+  it("应将当前任务的真实摘要与状态回写到任务列表", async () => {
+    const workspaceId = "ws-task-snapshot";
+    const sessionId = "session-task-snapshot";
+    sessionStorage.setItem(
+      `aster_curr_sessionId_${workspaceId}`,
+      JSON.stringify(sessionId),
+    );
+    sessionStorage.setItem(
+      `aster_messages_${workspaceId}`,
+      JSON.stringify([
+        {
+          id: "msg-task-1",
+          role: "assistant",
+          content: "请先整理需求清单，再拆出里程碑。",
+          timestamp: new Date().toISOString(),
+        },
+      ]),
+    );
+    mockListAsterSessions.mockResolvedValue([
+      {
+        id: sessionId,
+        name: "任务 A",
+        created_at: 1700000000,
+        updated_at: 1700000001,
+        messages_count: 1,
+      },
+    ]);
+
+    const harness = mountHook(workspaceId);
+
+    try {
+      await flushEffects();
+      await flushEffects();
+
+      const topic = harness
+        .getValue()
+        .topics.find((item) => item.id === sessionId);
+      expect(topic).toBeTruthy();
+      expect(topic?.status).toBe("done");
+      expect(topic?.messagesCount).toBe(1);
+      expect(topic?.lastPreview).toContain("请先整理需求清单");
+    } finally {
+      harness.unmount();
+    }
+  });
+
+  it("发送中应将当前任务标记为进行中并同步最新摘要", async () => {
+    const workspaceId = "ws-task-running";
+    const sessionId = "session-task-running";
+    sessionStorage.setItem(
+      `aster_curr_sessionId_${workspaceId}`,
+      JSON.stringify(sessionId),
+    );
+    mockListAsterSessions.mockResolvedValue([
+      {
+        id: sessionId,
+        name: "任务 B",
+        created_at: 1700000010,
+        updated_at: 1700000011,
+        messages_count: 0,
+      },
+    ]);
+    mockGetAsterSession.mockResolvedValue({
+      id: sessionId,
+      messages: [],
+      turns: [],
+      items: [],
+      queued_turns: [],
+    });
+
+    const harness = mountHook(workspaceId);
+
+    try {
+      await flushEffects();
+      await act(async () => {
+        await harness
+          .getValue()
+          .sendMessage("帮我输出一版任务拆解", [], false, false, false, "react");
+      });
+      await flushEffects();
+
+      const topic = harness
+        .getValue()
+        .topics.find((item) => item.id === sessionId);
+      expect(topic).toBeTruthy();
+      expect(topic?.status).toBe("running");
+      expect(topic?.messagesCount).toBeGreaterThanOrEqual(1);
+      expect(topic?.lastPreview).toContain("帮我输出一版任务拆解");
+    } finally {
+      harness.unmount();
+    }
+  });
+});
+
 describe("useAsterAgentChat.confirmAction", () => {
   it("tool_confirmation 应调用统一 runtime action 响应", async () => {
     const workspaceId = "ws-tool";
diff --git a/src/components/agent/chat/hooks/useAsterAgentChat.ts b/src/components/agent/chat/hooks/useAsterAgentChat.ts
index 9601d5d28..4cce3f2b8 100644
--- a/src/components/agent/chat/hooks/useAsterAgentChat.ts
+++ b/src/components/agent/chat/hooks/useAsterAgentChat.ts
@@ -12,15 +12,17 @@ import { useAgentContext } from "./useAgentContext";
 import { useAgentSession } from "./useAgentSession";
 import { useAgentTools } from "./useAgentTools";
 import { useAgentStream } from "./useAgentStream";
-import type {
-  SendMessageFn,
-  UseAsterAgentChatOptions,
+import {
+  buildLiveTaskSnapshot,
+  type SendMessageFn,
+  type UseAsterAgentChatOptions,
 } from "./agentChatShared";
 
 export type { Topic } from "./agentChatShared";
 
 export function useAsterAgentChat(options: UseAsterAgentChatOptions) {
-  const { systemPrompt, onWriteFile, workspaceId } = options;
+  const { systemPrompt, onWriteFile, workspaceId, disableSessionRestore = false } =
+    options;
   const runtime = defaultAgentRuntimeAdapter;
 
   const [isInitialized, setIsInitialized] = useState(false);
@@ -49,6 +51,7 @@ export function useAsterAgentChat(options: UseAsterAgentChatOptions) {
   const session = useAgentSession({
     runtime,
     workspaceId,
+    disableSessionRestore,
     isInitialized,
     executionStrategy: context.executionStrategy,
     providerTypeRef: context.providerTypeRef,
@@ -148,6 +151,37 @@ export function useAsterAgentChat(options: UseAsterAgentChatOptions) {
     stream.isSending,
   ]);
 
+  useEffect(() => {
+    const activeSessionId = session.sessionId;
+    const messages = session.messages;
+    const queuedTurnCount = session.queuedTurns.length;
+    const updateTopicSnapshot = session.updateTopicSnapshot;
+    const pendingActionCount = tools.pendingActions.length;
+    const workspacePathMissing = context.workspacePathMissing;
+
+    if (!activeSessionId) {
+      return;
+    }
+
+    const snapshot = buildLiveTaskSnapshot({
+      messages,
+      isSending: stream.isSending,
+      pendingActionCount,
+      queuedTurnCount,
+      workspaceError: Boolean(workspacePathMissing),
+    });
+
+    updateTopicSnapshot(activeSessionId, snapshot);
+  }, [
+    session.sessionId,
+    session.messages,
+    session.queuedTurns.length,
+    session.updateTopicSnapshot,
+    stream.isSending,
+    tools.pendingActions.length,
+    context.workspacePathMissing,
+  ]);
+
   const handleStartProcess = async () => {
     // Aster 不需要显式启动独立进程，初始化在 effect 中完成。
   };
diff --git a/src/components/agent/chat/index.test.tsx b/src/components/agent/chat/index.test.tsx
index 406e2d429..c1cafd6fc 100644
--- a/src/components/agent/chat/index.test.tsx
+++ b/src/components/agent/chat/index.test.tsx
@@ -1,6 +1,10 @@
 import { act, type ComponentProps, type ReactNode } from "react";
 import { createRoot, type Root } from "react-dom/client";
 import { afterEach, beforeEach, describe, expect, it, vi } from "vitest";
+import {
+  resolveBrowserAssistSessionScopeKey,
+  resolveBrowserAssistSessionStorageKey,
+} from "./utils/browserAssistSession";
 
 const {
   mockUseAgentChatUnified,
@@ -19,6 +23,9 @@ const {
   mockArtifactsAtom,
   mockSelectedArtifactAtom,
   mockSelectedArtifactIdAtom,
+  mockSetArtifactsAtom,
+  mockSetSelectedArtifactIdAtom,
+  mockJotaiState,
   mockGenerateContentCreationPrompt,
   mockIsContentCreationTheme,
   mockEmptyState,
@@ -28,6 +35,11 @@ const {
   mockExecutionRunListThemeWorkbenchHistory,
   mockExecutionRunGet,
   mockSkillExecutionGetDetail,
+  mockSkillsGetAll,
+  mockCanvasWorkbenchLayoutState,
+  mockCanvasWorkbenchLayout,
+  mockLaunchBrowserRuntimeAssist,
+  mockBrowserExecuteAction,
 } = vi.hoisted(() => ({
   mockUseAgentChatUnified: vi.fn(),
   mockUseArtifactAutoPreviewSync: vi.fn(),
@@ -50,6 +62,13 @@ const {
   mockArtifactsAtom: { key: "artifacts" },
   mockSelectedArtifactAtom: { key: "selectedArtifact" },
   mockSelectedArtifactIdAtom: { key: "selectedArtifactId" },
+  mockJotaiState: {
+    artifacts: [] as Array<Record<string, unknown>>,
+    selectedArtifact: null as Record<string, unknown> | null,
+    selectedArtifactId: null as string | null,
+  },
+  mockSetArtifactsAtom: vi.fn(),
+  mockSetSelectedArtifactIdAtom: vi.fn(),
   mockGenerateContentCreationPrompt: vi.fn(() => "mock-system-prompt"),
   mockIsContentCreationTheme: vi.fn(() => false),
   mockEmptyState: vi.fn((props?: { input?: string }) => (
@@ -65,6 +84,54 @@ const {
   mockExecutionRunListThemeWorkbenchHistory: vi.fn(),
   mockExecutionRunGet: vi.fn(),
   mockSkillExecutionGetDetail: vi.fn(),
+  mockSkillsGetAll: vi.fn(),
+  mockCanvasWorkbenchLayoutState: {
+    renderPreview: false,
+  },
+  mockCanvasWorkbenchLayout: vi.fn((props?: Record<string, unknown>) => {
+    const preview =
+      mockCanvasWorkbenchLayoutState.renderPreview &&
+      typeof props?.renderPreview === "function"
+        ? props.renderPreview(
+            {
+              kind: "default-canvas",
+              title: "当前画布草稿",
+              content: "# 新文档\n\n在这里开始编写内容...",
+            },
+            {
+              stackedWorkbenchTrigger: (
+                <button type="button" data-testid="stacked-workbench-trigger">
+                  切换工作台
+                </button>
+              ),
+            },
+          )
+        : null;
+
+    return (
+      <div
+        data-testid="canvas-workbench-layout-mock"
+        data-workspace-root={
+          typeof props?.workspaceRoot === "string" ? props.workspaceRoot : ""
+        }
+        data-artifact-count={
+          Array.isArray(props?.artifacts) ? String(props.artifacts.length) : "0"
+        }
+        data-default-preview-title={
+          props?.defaultPreview &&
+          typeof props.defaultPreview === "object" &&
+          "title" in props.defaultPreview &&
+          typeof props.defaultPreview.title === "string"
+            ? props.defaultPreview.title
+            : ""
+        }
+      >
+        {preview}
+      </div>
+    );
+  }),
+  mockLaunchBrowserRuntimeAssist: vi.fn(),
+  mockBrowserExecuteAction: vi.fn(),
 }));
 
 vi.mock("sonner", () => ({
@@ -130,6 +197,9 @@ vi.mock(
 vi.mock("./components/ChatNavbar", () => ({
   ChatNavbar: ({
     onToggleHistory,
+    onToggleCanvas,
+    showCanvasToggle,
+    isCanvasOpen,
     onProjectChange,
     showHarnessToggle,
     harnessPanelVisible,
@@ -137,6 +207,9 @@ vi.mock("./components/ChatNavbar", () => ({
     harnessToggleLabel,
   }: {
     onToggleHistory?: () => void;
+    onToggleCanvas?: () => void;
+    showCanvasToggle?: boolean;
+    isCanvasOpen?: boolean;
     onProjectChange?: (projectId: string) => void;
     showHarnessToggle?: boolean;
     harnessPanelVisible?: boolean;
@@ -148,6 +221,8 @@ vi.mock("./components/ChatNavbar", () => ({
       data-show-harness-toggle={showHarnessToggle ? "true" : "false"}
       data-harness-panel-visible={harnessPanelVisible ? "true" : "false"}
       data-harness-toggle-label={harnessToggleLabel || "Harness"}
+      data-show-canvas-toggle={showCanvasToggle ? "true" : "false"}
+      data-canvas-open={isCanvasOpen ? "true" : "false"}
     >
       <button
         type="button"
@@ -158,6 +233,17 @@ vi.mock("./components/ChatNavbar", () => ({
       >
         切换侧边栏
       </button>
+      {showCanvasToggle ? (
+        <button
+          type="button"
+          data-testid="toggle-canvas"
+          onClick={() => {
+            onToggleCanvas?.();
+          }}
+        >
+          {isCanvasOpen ? "折叠画布" : "展开画布"}
+        </button>
+      ) : null}
       <button
         type="button"
         data-testid="set-project"
@@ -293,6 +379,11 @@ vi.mock("./components/EmptyState", () => ({
   EmptyState: (props?: { input?: string }) => mockEmptyState(props),
 }));
 
+vi.mock("./components/CanvasWorkbenchLayout", () => ({
+  CanvasWorkbenchLayout: (props: Record<string, unknown>) =>
+    mockCanvasWorkbenchLayout(props),
+}));
+
 vi.mock("@/components/content-creator/core/StepGuide/StepProgress", () => ({
   StepProgress: () => <div data-testid="step-progress" />,
 }));
@@ -302,7 +393,15 @@ vi.mock("@/components/content-creator/canvas/CanvasFactory", () => ({
 }));
 
 vi.mock("@/components/general-chat/bridge", () => ({
-  CanvasPanel: () => <div data-testid="general-canvas" />,
+  CanvasPanel: ({
+    toolbarActions,
+  }: {
+    toolbarActions?: ReactNode;
+  }) => (
+    <div data-testid="general-canvas">
+      <div data-testid="general-canvas-toolbar">{toolbarActions}</div>
+    </div>
+  ),
   DEFAULT_CANVAS_STATE: {
     isOpen: false,
     contentType: null,
@@ -324,9 +423,24 @@ vi.mock("@/lib/artifact/store", () => ({
 }));
 
 vi.mock("jotai", () => ({
-  useAtomValue: (atom: unknown) =>
-    atom === mockSelectedArtifactAtom ? null : [],
-  useSetAtom: () => vi.fn(),
+  useAtomValue: (atom: unknown) => {
+    if (atom === mockSelectedArtifactAtom) {
+      return mockJotaiState.selectedArtifact;
+    }
+    if (atom === mockArtifactsAtom) {
+      return mockJotaiState.artifacts;
+    }
+    return [];
+  },
+  useSetAtom: (atom: unknown) => {
+    if (atom === mockArtifactsAtom) {
+      return mockSetArtifactsAtom;
+    }
+    if (atom === mockSelectedArtifactIdAtom) {
+      return mockSetSelectedArtifactIdAtom;
+    }
+    return vi.fn();
+  },
 }));
 
 vi.mock("@/components/content-creator/utils/systemPrompt", () => ({
@@ -365,6 +479,17 @@ vi.mock("./utils/workflowMapping", async (importOriginal) => {
 
 vi.mock("@/lib/workspace/navigation", () => ({
   buildHomeAgentParams: vi.fn(() => ({})),
+  buildClawAgentParams: vi.fn((overrides?: Record<string, unknown>) => ({
+    ...(overrides || {}),
+    agentEntry: "claw",
+    theme:
+      typeof overrides?.theme === "string" ? overrides.theme : "general",
+    lockTheme: false,
+    immersiveHome:
+      typeof overrides?.immersiveHome === "boolean"
+        ? overrides.immersiveHome
+        : false,
+  })),
 }));
 
 vi.mock("@/lib/api/project", () => ({
@@ -384,7 +509,8 @@ vi.mock("@/lib/api/memory", () => ({
 vi.mock("@/lib/api/executionRun", () => ({
   executionRunGet: mockExecutionRunGet,
   executionRunGetThemeWorkbenchState: mockExecutionRunGetThemeWorkbenchState,
-  executionRunListThemeWorkbenchHistory: mockExecutionRunListThemeWorkbenchHistory,
+  executionRunListThemeWorkbenchHistory:
+    mockExecutionRunListThemeWorkbenchHistory,
 }));
 
 vi.mock("@/lib/api/skill-execution", () => ({
@@ -393,6 +519,17 @@ vi.mock("@/lib/api/skill-execution", () => ({
   },
 }));
 
+vi.mock("@/lib/api/skills", () => ({
+  skillsApi: {
+    getAll: mockSkillsGetAll,
+  },
+}));
+
+vi.mock("@/lib/webview-api", () => ({
+  launchBrowserRuntimeAssist: mockLaunchBrowserRuntimeAssist,
+  browserExecuteAction: mockBrowserExecuteAction,
+}));
+
 import { AgentChatPage } from "./index";
 
 interface MountedHarness {
@@ -528,6 +665,85 @@ function getHookCallOrderForWorkspace(workspaceId: string): number {
   return mockUseAgentChatUnified.mock.invocationCallOrder[index];
 }
 
+function mockBrowserAssistCompletedSession() {
+  mockUseAgentChatUnified.mockImplementation(
+    ({ workspaceId }: { workspaceId: string }) => {
+      observedWorkspaceIds.push(workspaceId);
+      return {
+        providerType: "kiro",
+        setProviderType: vi.fn(),
+        model: "mock-model",
+        setModel: vi.fn(),
+        executionStrategy: "auto",
+        setExecutionStrategy: vi.fn(),
+        messages: [
+          {
+            id: "msg-browser-user",
+            role: "user",
+            content: "打开浏览器并访问官网",
+            timestamp: new Date("2026-03-14T03:00:00.000Z"),
+          },
+          {
+            id: "msg-browser-assistant",
+            role: "assistant",
+            content: "",
+            timestamp: new Date("2026-03-14T03:00:01.000Z"),
+            toolCalls: [
+              {
+                id: "tool-browser-open",
+                name: "mcp__proxycast-browser__browser_navigate",
+                arguments: JSON.stringify({
+                  url: "https://www.rokid.com",
+                  profile_key: "general_browser_assist",
+                }),
+                status: "completed",
+                startTime: new Date("2026-03-14T03:00:01.100Z"),
+                endTime: new Date("2026-03-14T03:00:02.000Z"),
+                result: {
+                  success: true,
+                  output: "已连接浏览器会话并完成首屏加载",
+                  metadata: {
+                    result: {
+                      session_id: "browser-session-1",
+                      profile_key: "general_browser_assist",
+                      page_info: {
+                        title: "Rokid",
+                        url: "https://www.rokid.com",
+                      },
+                    },
+                  },
+                },
+              },
+            ],
+          },
+        ],
+        isSending: false,
+        sendMessage: sharedSendMessageMock,
+        stopSending: vi.fn(async () => undefined),
+        clearMessages: vi.fn(),
+        deleteMessage: vi.fn(),
+        editMessage: vi.fn(),
+        handlePermissionResponse: vi.fn(),
+        triggerAIGuide: sharedTriggerAIGuideMock,
+        topics: [
+          {
+            id: "topic-a",
+            title: "话题 A",
+            updatedAt: Date.now(),
+          },
+        ],
+        sessionId: "session-1",
+        switchTopic: sharedSwitchTopicMock,
+        deleteTopic: vi.fn(),
+        renameTopic: vi.fn(),
+        workspacePathMissing: false,
+        fixWorkspacePathAndRetry: vi.fn(),
+        dismissWorkspacePathError: vi.fn(),
+      };
+    },
+  );
+}
+
 beforeEach(() => {
   (
     globalThis as typeof globalThis & {
@@ -546,6 +762,7 @@ beforeEach(() => {
 
   vi.clearAllMocks();
   localStorage.clear();
+  sessionStorage.clear();
   observedWorkspaceIds.length = 0;
 
   mockGetProject.mockImplementation(async (projectId: string) => {
@@ -591,6 +808,56 @@ beforeEach(() => {
     has_workflow: false,
     workflow_steps: [],
   });
+  mockSkillsGetAll.mockResolvedValue([]);
+  mockLaunchBrowserRuntimeAssist.mockResolvedValue({
+    profile: {
+      success: true,
+      reused: true,
+      browser_source: "system",
+    },
+    session: {
+      session_id: "auto-browser-session-1",
+      profile_key: "general_browser_assist",
+      target_id: "target-auto-1",
+      target_title: "账户中心",
+      target_url: "https://accounts.example.com",
+      remote_debugging_port: 16312,
+      ws_debugger_url: "ws://127.0.0.1:16312/devtools/page/target-auto-1",
+      devtools_frontend_url: undefined,
+      stream_mode: "both",
+      transport_kind: "cdp_frames",
+      lifecycle_state: "live",
+      control_mode: "agent",
+      human_reason: undefined,
+      last_page_info: {
+        title: "账户中心",
+        url: "https://accounts.example.com",
+        markdown: "",
+        updated_at: "2026-03-14T03:10:02.000Z",
+      },
+      last_event_at: "2026-03-14T03:10:02.000Z",
+      last_frame_at: "2026-03-14T03:10:02.200Z",
+      last_error: undefined,
+      created_at: "2026-03-14T03:10:01.500Z",
+      connected: true,
+    },
+  });
+  mockBrowserExecuteAction.mockResolvedValue({
+    success: true,
+    backend: "cdp_direct",
+    session_id: "browser-session-1",
+    target_id: "target-auto-1",
+    action: "navigate",
+    request_id: "browser-action-1",
+    data: {
+      page_info: {
+        title: "新页面",
+        url: "https://example.com",
+      },
+    },
+    error: undefined,
+    attempts: [],
+  });
   mockGenerateContentCreationPrompt.mockReturnValue("mock-system-prompt");
   mockIsContentCreationTheme.mockReturnValue(false);
   mockEmptyState.mockImplementation((props?: { input?: string }) => (
@@ -611,6 +878,37 @@ beforeEach(() => {
     ],
     setTopicStatus: vi.fn(),
   });
+  mockCanvasWorkbenchLayoutState.renderPreview = false;
+
+  mockJotaiState.artifacts = [];
+  mockJotaiState.selectedArtifact = null;
+  mockJotaiState.selectedArtifactId = null;
+  mockSetArtifactsAtom.mockImplementation((next) => {
+    mockJotaiState.artifacts =
+      typeof next === "function" ? next(mockJotaiState.artifacts) : next;
+    const nextId = mockJotaiState.selectedArtifactId;
+    mockJotaiState.selectedArtifact =
+      nextId == null
+        ? null
+        : (mockJotaiState.artifacts.find(
+            (artifact) =>
+              (artifact as { id?: string } | null | undefined)?.id === nextId,
+          ) as Record<string, unknown> | null) || null;
+  });
+  mockSetSelectedArtifactIdAtom.mockImplementation((next) => {
+    mockJotaiState.selectedArtifactId =
+      typeof next === "function"
+        ? next(mockJotaiState.selectedArtifactId)
+        : next;
+    const nextId = mockJotaiState.selectedArtifactId;
+    mockJotaiState.selectedArtifact =
+      nextId == null
+        ? null
+        : (mockJotaiState.artifacts.find(
+            (artifact) =>
+              (artifact as { id?: string } | null | undefined)?.id === nextId,
+          ) as Record<string, unknown> | null) || null;
+  });
 
   sharedSwitchTopicMock = vi.fn(async () => undefined);
   sharedSendMessageMock = vi.fn(async () => undefined);
@@ -662,6 +960,7 @@ afterEach(() => {
     mounted.container.remove();
   }
   localStorage.clear();
+  sessionStorage.clear();
   vi.unstubAllGlobals();
 });
 
@@ -705,7 +1004,7 @@ describe("AgentChatPage 话题切换项目恢复", () => {
       ?.switchTopic as ReturnType<typeof vi.fn>;
     expect(switchTopicMock).not.toHaveBeenCalled();
     expect(mockToast.error).toHaveBeenCalledWith(
-      "该话题绑定了其他项目，请先切换到对应项目",
+      "该任务绑定了其他项目，请先切换到对应项目",
     );
     expect(mockGetOrCreateDefaultProject).not.toHaveBeenCalled();
   });
@@ -828,9 +1127,171 @@ describe("AgentChatPage 侧栏显示控制", () => {
     await flushEffects();
     expect(container.querySelector('[data-testid="chat-sidebar"]')).toBeNull();
   });
+
+  it("Claw 模式无激活任务时应展示任务选择空态", async () => {
+    mockUseAgentChatUnified.mockImplementation(
+      ({ workspaceId }: { workspaceId: string }) => {
+        observedWorkspaceIds.push(workspaceId);
+        return {
+          providerType: "kiro",
+          setProviderType: vi.fn(),
+          model: "mock-model",
+          setModel: vi.fn(),
+          executionStrategy: "auto",
+          setExecutionStrategy: vi.fn(),
+          messages: [],
+          isSending: false,
+          sendMessage: sharedSendMessageMock,
+          stopSending: vi.fn(async () => undefined),
+          clearMessages: vi.fn(),
+          deleteMessage: vi.fn(),
+          editMessage: vi.fn(),
+          handlePermissionResponse: vi.fn(),
+          triggerAIGuide: sharedTriggerAIGuideMock,
+          topics: [
+            {
+              id: "topic-a",
+              title: "任务 A",
+              updatedAt: Date.now(),
+            },
+          ],
+          sessionId: null,
+          switchTopic: sharedSwitchTopicMock,
+          deleteTopic: vi.fn(),
+          renameTopic: vi.fn(),
+          pendingActions: [],
+          workspacePathMissing: false,
+          fixWorkspacePathAndRetry: vi.fn(),
+          dismissWorkspacePathError: vi.fn(),
+        };
+      },
+    );
+
+    const container = renderPage({ agentEntry: "claw" });
+    await flushEffects();
+
+    expect(
+      container.querySelector('[data-testid="claw-empty-state"]'),
+    ).not.toBeNull();
+    expect(container.querySelector('[data-testid="empty-state"]')).toBeNull();
+  });
+
+  it("新建任务模式发送首条消息后应切换到 Claw", async () => {
+    const onNavigate = vi.fn();
+
+    renderPage({
+      agentEntry: "new-task",
+      initialUserPrompt: "帮我规划一个发布任务",
+      onNavigate,
+      projectId: "project-entry",
+    });
+    await flushEffects();
+
+    expect(sharedSendMessageMock).toHaveBeenCalled();
+    expect(onNavigate).toHaveBeenCalledWith(
+      "agent",
+      expect.objectContaining({
+        agentEntry: "claw",
+        projectId: "project-entry",
+      }),
+    );
+  });
 });
 
 describe("AgentChatPage 通用工作台", () => {
+  it("聊天态应通过顶栏按钮展开画布，并支持在展开后再次折叠", async () => {
+    const container = renderPage({
+      theme: "general",
+      lockTheme: true,
+    });
+    await flushEffects();
+
+    const navbar = container.querySelector(
+      '[data-testid="chat-navbar"]',
+    ) as HTMLDivElement | null;
+    const toggleCanvasButton = container.querySelector(
+      '[data-testid="toggle-canvas"]',
+    ) as HTMLButtonElement | null;
+
+    expect(navbar?.dataset.showCanvasToggle).toBe("true");
+    expect(navbar?.dataset.canvasOpen).toBe("false");
+    expect(toggleCanvasButton?.textContent).toContain("展开画布");
+    expect(
+      container
+        .querySelector('[data-testid="layout-transition"]')
+        ?.getAttribute("data-mode"),
+    ).toBe("chat");
+
+    act(() => {
+      toggleCanvasButton?.click();
+    });
+    await flushEffects();
+
+    expect(
+      (
+        container.querySelector('[data-testid="chat-navbar"]') as
+          | HTMLDivElement
+          | null
+      )?.dataset.canvasOpen,
+    ).toBe("true");
+    expect(
+      container
+        .querySelector('[data-testid="layout-transition"]')
+        ?.getAttribute("data-mode"),
+    ).toBe("chat-canvas");
+
+    act(() => {
+      (
+        container.querySelector('[data-testid="toggle-canvas"]') as
+          | HTMLButtonElement
+          | null
+      )?.click();
+    });
+    await flushEffects();
+
+    expect(
+      (
+        container.querySelector('[data-testid="chat-navbar"]') as
+          | HTMLDivElement
+          | null
+      )?.dataset.canvasOpen,
+    ).toBe("false");
+    expect(
+      container
+        .querySelector('[data-testid="layout-transition"]')
+        ?.getAttribute("data-mode"),
+    ).toBe("chat");
+  });
+
+  it("普通画布应将工作台触发按钮并入头部工具栏，避免覆盖关闭区", async () => {
+    mockCanvasWorkbenchLayoutState.renderPreview = true;
+
+    const container = renderPage({
+      theme: "general",
+      lockTheme: true,
+    });
+    await flushEffects();
+
+    clickButton(container, "toggle-canvas");
+    await flushEffects(4);
+
+    const toolbar = container.querySelector(
+      '[data-testid="general-canvas-toolbar"]',
+    ) as HTMLDivElement | null;
+    const triggers = container.querySelectorAll(
+      '[data-testid="stacked-workbench-trigger"]',
+    );
+
+    expect(
+      container.querySelector('[data-testid="general-canvas"]'),
+    ).not.toBeNull();
+    expect(toolbar).not.toBeNull();
+    expect(triggers).toHaveLength(1);
+    expect(
+      toolbar?.querySelector('[data-testid="stacked-workbench-trigger"]'),
+    ).not.toBeNull();
+  });
+
   it("通用模式应通过顶部按钮打开工作台弹窗，而不是常驻右侧占位", async () => {
     const container = renderPage({
       theme: "general",
@@ -852,6 +1313,451 @@ describe("AgentChatPage 通用工作台", () => {
     expect(document.body.textContent).toContain("Agent 工作台");
     expect(document.body.textContent).toContain("通用 Agent");
   });
+
+  it("窄屏工作台切到 stacked 时应自动收起话题列表，恢复 split 后重新展示", async () => {
+    mockCanvasWorkbenchLayoutState.renderPreview = true;
+
+    const container = renderPage({
+      theme: "general",
+      lockTheme: true,
+    });
+    await flushEffects();
+
+    clickButton(container, "toggle-canvas");
+    await flushEffects(4);
+
+    const getWorkbenchProps = () =>
+      (mockCanvasWorkbenchLayout.mock.calls.at(-1)?.[0] || null) as
+        | {
+            onLayoutModeChange?: (mode: "split" | "stacked") => void;
+          }
+        | null;
+
+    expect(
+      container.querySelector('[data-testid="chat-sidebar"]'),
+    ).not.toBeNull();
+    expect(
+      container.querySelector('[data-testid="canvas-workbench-layout-mock"]'),
+    ).not.toBeNull();
+
+    act(() => {
+      getWorkbenchProps()?.onLayoutModeChange?.("stacked");
+    });
+    await flushEffects(4);
+
+    expect(container.querySelector('[data-testid="chat-sidebar"]')).toBeNull();
+
+    act(() => {
+      getWorkbenchProps()?.onLayoutModeChange?.("split");
+    });
+    await flushEffects(4);
+
+    expect(
+      container.querySelector('[data-testid="chat-sidebar"]'),
+    ).not.toBeNull();
+  });
+
+  it("已安装 skills 但未显式激活时，通用工作台不应展示技能区块", async () => {
+    mockSkillsGetAll.mockResolvedValue([
+      {
+        key: "research",
+        name: "Research",
+        description: "检索与整理",
+        directory: "research",
+        installed: true,
+        sourceKind: "builtin",
+      },
+    ]);
+
+    const container = renderPage({
+      theme: "general",
+      lockTheme: true,
+    });
+    await flushEffects(10);
+
+    expect(mockSkillsGetAll).toHaveBeenCalledWith("proxycast");
+
+    clickButton(container, "toggle-harness");
+    await flushEffects();
+
+    expect(document.body.textContent).toContain("Agent 工作台");
+    expect(document.body.textContent).not.toContain("已激活技能");
+    expect(
+      document.body.querySelector('button[aria-label="跳转到已激活技能"]'),
+    ).toBeNull();
+  });
+
+  it("用户消息显式触发 slash skill 后，通用工作台应展示已激活技能", async () => {
+    mockSkillsGetAll.mockResolvedValue([
+      {
+        key: "research",
+        name: "Research",
+        description: "检索与整理",
+        directory: "research",
+        installed: true,
+        sourceKind: "builtin",
+      },
+    ]);
+    mockUseAgentChatUnified.mockImplementation(
+      ({ workspaceId }: { workspaceId: string }) => {
+        observedWorkspaceIds.push(workspaceId);
+        return {
+          providerType: "kiro",
+          setProviderType: vi.fn(),
+          model: "mock-model",
+          setModel: vi.fn(),
+          executionStrategy: "auto",
+          setExecutionStrategy: vi.fn(),
+          messages: [
+            {
+              id: "msg-skill-1",
+              role: "user",
+              content: "/research 帮我整理当前主题",
+            },
+          ],
+          isSending: false,
+          sendMessage: sharedSendMessageMock,
+          stopSending: vi.fn(async () => undefined),
+          clearMessages: vi.fn(),
+          deleteMessage: vi.fn(),
+          editMessage: vi.fn(),
+          handlePermissionResponse: vi.fn(),
+          triggerAIGuide: sharedTriggerAIGuideMock,
+          topics: [
+            {
+              id: "topic-a",
+              title: "话题 A",
+              updatedAt: Date.now(),
+            },
+          ],
+          sessionId: "session-1",
+          switchTopic: sharedSwitchTopicMock,
+          deleteTopic: vi.fn(),
+          renameTopic: vi.fn(),
+        };
+      },
+    );
+
+    const container = renderPage({
+      theme: "general",
+      lockTheme: true,
+    });
+    await flushEffects(10);
+
+    clickButton(container, "toggle-harness");
+    await flushEffects();
+
+    expect(document.body.textContent).toContain("已激活技能");
+    expect(document.body.textContent).toContain("research");
+  });
+
+  it("浏览器工具返回真实会话后应自动打开浏览器协助画布", async () => {
+    mockBrowserAssistCompletedSession();
+
+    const container = renderPage({
+      theme: "general",
+      lockTheme: true,
+    });
+    await flushEffects(10);
+
+    expect(
+      container
+        .querySelector('[data-testid="layout-transition"]')
+        ?.getAttribute("data-mode"),
+    ).toBe("chat-canvas");
+    expect(mockSetSelectedArtifactIdAtom).toHaveBeenCalledWith(
+      "browser-assist:general",
+    );
+    expect(mockJotaiState.artifacts).toEqual(
+      expect.arrayContaining([
+        expect.objectContaining({
+          id: "browser-assist:general",
+          type: "browser_assist",
+          title: "Rokid",
+          meta: expect.objectContaining({
+            sessionId: "browser-session-1",
+            profileKey: "general_browser_assist",
+            url: "https://www.rokid.com",
+          }),
+        }),
+      ]),
+    );
+    expect(
+      container.querySelector('[data-testid="canvas-workbench-layout-mock"]'),
+    ).toBeNull();
+    expect(container.querySelector('[data-testid="artifact-renderer"]')).not.toBeNull();
+    expect(container.querySelector('[data-testid="artifact-toolbar"]')).toBeNull();
+    expect(mockCanvasWorkbenchLayout).not.toHaveBeenCalled();
+  });
+
+  it("浏览器工具刚启动且只有 profile_key 时应自动拉起实时会话并打开浏览器协助画布", async () => {
+    mockUseAgentChatUnified.mockImplementation(
+      ({ workspaceId }: { workspaceId: string }) => {
+        observedWorkspaceIds.push(workspaceId);
+        return {
+          providerType: "kiro",
+          setProviderType: vi.fn(),
+          model: "mock-model",
+          setModel: vi.fn(),
+          executionStrategy: "auto",
+          setExecutionStrategy: vi.fn(),
+          messages: [
+            {
+              id: "msg-browser-user-pending",
+              role: "user",
+              content: "打开浏览器并开始处理登录",
+              timestamp: new Date("2026-03-14T03:10:00.000Z"),
+            },
+            {
+              id: "msg-browser-assistant-pending",
+              role: "assistant",
+              content: "",
+              timestamp: new Date("2026-03-14T03:10:01.000Z"),
+              toolCalls: [
+                {
+                  id: "tool-browser-pending",
+                  name: "mcp__proxycast-browser__browser_navigate",
+                  arguments: JSON.stringify({
+                    url: "https://accounts.example.com",
+                    profile_key: "general_browser_assist",
+                  }),
+                  status: "running",
+                  startTime: new Date("2026-03-14T03:10:01.100Z"),
+                },
+              ],
+            },
+          ],
+          isSending: true,
+          sendMessage: sharedSendMessageMock,
+          stopSending: vi.fn(async () => undefined),
+          clearMessages: vi.fn(),
+          deleteMessage: vi.fn(),
+          editMessage: vi.fn(),
+          handlePermissionResponse: vi.fn(),
+          triggerAIGuide: sharedTriggerAIGuideMock,
+          topics: [
+            {
+              id: "topic-browser-pending",
+              title: "话题 B",
+              updatedAt: Date.now(),
+            },
+          ],
+          sessionId: "session-browser-pending",
+          switchTopic: sharedSwitchTopicMock,
+          deleteTopic: vi.fn(),
+          renameTopic: vi.fn(),
+          workspacePathMissing: false,
+          fixWorkspacePathAndRetry: vi.fn(),
+          dismissWorkspacePathError: vi.fn(),
+        };
+      },
+    );
+
+    const container = renderPage({
+      theme: "general",
+      lockTheme: true,
+    });
+    await flushEffects(10);
+
+    expect(
+      container
+        .querySelector('[data-testid="layout-transition"]')
+        ?.getAttribute("data-mode"),
+    ).toBe("chat-canvas");
+    expect(mockLaunchBrowserRuntimeAssist).toHaveBeenCalledWith({
+      profile_key: "general_browser_assist",
+      url: "https://accounts.example.com",
+      open_window: false,
+      stream_mode: "both",
+    });
+    expect(mockJotaiState.artifacts).toEqual(
+      expect.arrayContaining([
+        expect.objectContaining({
+          id: "browser-assist:general",
+          type: "browser_assist",
+          meta: expect.objectContaining({
+            sessionId: "auto-browser-session-1",
+            profileKey: "general_browser_assist",
+            url: "https://accounts.example.com",
+          }),
+        }),
+      ]),
+    );
+  });
+
+  it("即使没有最新 tool result，也应从 session scoped Browser Assist 状态恢复实时画布", async () => {
+    sessionStorage.setItem(
+      resolveBrowserAssistSessionStorageKey(undefined, "session-1"),
+      JSON.stringify({
+        sessionId: "restored-browser-session-1",
+        profileKey: "general_browser_assist",
+        url: "https://restored.example.com",
+        title: "恢复的浏览器会话",
+        source: "runtime_launch",
+        updatedAt: 1710387000000,
+      }),
+    );
+
+    const container = renderPage({
+      theme: "general",
+      lockTheme: true,
+    });
+    await flushEffects(10);
+
+    expect(
+      container
+        .querySelector('[data-testid="layout-transition"]')
+        ?.getAttribute("data-mode"),
+    ).toBe("chat-canvas");
+    expect(mockSetSelectedArtifactIdAtom).toHaveBeenCalledWith(
+      "browser-assist:general",
+    );
+    expect(mockLaunchBrowserRuntimeAssist).not.toHaveBeenCalled();
+    expect(mockJotaiState.artifacts).toEqual(
+      expect.arrayContaining([
+        expect.objectContaining({
+          id: "browser-assist:general",
+          type: "browser_assist",
+          title: "恢复的浏览器会话",
+          meta: expect.objectContaining({
+            sessionId: "restored-browser-session-1",
+            profileKey: "general_browser_assist",
+            url: "https://restored.example.com",
+          }),
+        }),
+      ]),
+    );
+  });
+
+  it("显式新 URL 的浏览器请求应复用现有会话并导航到新页面", async () => {
+    mockBrowserAssistCompletedSession();
+    mockBrowserExecuteAction.mockResolvedValueOnce({
+      success: true,
+      backend: "cdp_direct",
+      session_id: "browser-session-1",
+      target_id: "target-news-1",
+      action: "navigate",
+      request_id: "browser-action-news",
+      data: {
+        page_info: {
+          title: "百度新闻",
+          url: "https://news.baidu.com",
+        },
+      },
+      error: undefined,
+      attempts: [],
+    });
+
+    renderPage({
+      projectId: "project-browser-intent",
+      theme: "general",
+      lockTheme: true,
+    });
+    await flushEffects(10);
+
+    const prompt =
+      "打开 https://news.baidu.com，使用浏览器协助模式执行，并把实时浏览器画面显示在右侧画布中，然后告诉我页面主要内容。";
+    const inputbarProps = mockInputbar.mock.calls.at(-1)?.[0] as
+      | {
+          onSend?: (
+            images?: unknown[],
+            webSearch?: boolean,
+            thinking?: boolean,
+            textOverride?: string,
+          ) => Promise<void>;
+        }
+      | undefined;
+
+    await act(async () => {
+      await inputbarProps?.onSend?.([], false, false, prompt);
+    });
+    await flushEffects(12);
+
+    expect(mockBrowserExecuteAction).toHaveBeenCalledWith({
+      profile_key: "general_browser_assist",
+      backend: "cdp_direct",
+      action: "navigate",
+      args: {
+        action: "goto",
+        url: "https://news.baidu.com",
+        wait_for_page_info: true,
+      },
+      timeout_ms: 20000,
+    });
+    expect(sharedSendMessageMock).toHaveBeenCalledWith(
+      prompt,
+      [],
+      false,
+      false,
+      false,
+      undefined,
+      "mock-model",
+      undefined,
+      expect.objectContaining({
+        requestMetadata: expect.objectContaining({
+          harness: expect.objectContaining({
+            theme: "general",
+            browser_assist: expect.objectContaining({
+              enabled: true,
+              profile_key: "general_browser_assist",
+            }),
+          }),
+        }),
+      }),
+    );
+    expect(mockJotaiState.artifacts).toEqual(
+      expect.arrayContaining([
+        expect.objectContaining({
+          id: "browser-assist:general",
+          type: "browser_assist",
+          title: "百度新闻",
+          meta: expect.objectContaining({
+            sessionId: "browser-session-1",
+            profileKey: "general_browser_assist",
+            url: "https://news.baidu.com",
+          }),
+        }),
+      ]),
+    );
+  });
+
+  it("切换到新会话时不应复用旧 scope 的浏览器协助 artifact", async () => {
+    mockJotaiState.artifacts = [
+      {
+        id: "browser-assist:general",
+        type: "browser_assist",
+        title: "旧浏览器会话",
+        content: "",
+        status: "complete",
+        meta: {
+          persistOutsideMessages: true,
+          browserAssistScopeKey: resolveBrowserAssistSessionScopeKey(
+            undefined,
+            "session-old",
+          ),
+          sessionId: "browser-session-old",
+          profileKey: "general_browser_assist",
+          url: "https://stale.example.com",
+        },
+        position: { start: 0, end: 0 },
+        createdAt: 1,
+        updatedAt: 2,
+      },
+    ];
+
+    const container = renderPage({
+      theme: "general",
+      lockTheme: true,
+    });
+    await flushEffects(10);
+
+    expect(
+      container
+        .querySelector('[data-testid="layout-transition"]')
+        ?.getAttribute("data-mode"),
+    ).toBe("chat");
+    expect(mockJotaiState.artifacts).toEqual([]);
+  });
 });
 
 describe("AgentChatPage 自动引导", () => {
@@ -1127,7 +2033,7 @@ describe("AgentChatPage 自动引导", () => {
     await flushEffects(10);
 
     expect(
-      container.querySelector('[data-testid="canvas-factory"]'),
+      container.querySelector('[data-testid="canvas-workbench-layout-mock"]'),
     ).not.toBeNull();
   });
 
@@ -1923,7 +2829,9 @@ describe("AgentChatPage 自动引导", () => {
                 {
                   id: "tool-search-1",
                   name: "WebSearch",
-                  arguments: JSON.stringify({ query: "Rokid Glasses 最新功能" }),
+                  arguments: JSON.stringify({
+                    query: "Rokid Glasses 最新功能",
+                  }),
                   status: "completed",
                   startTime: new Date("2026-03-06T11:00:01.500Z"),
                   endTime: new Date("2026-03-06T11:00:02.000Z"),
diff --git a/src/components/agent/chat/index.tsx b/src/components/agent/chat/index.tsx
index 5da63a3e4..186a7a357 100644
--- a/src/components/agent/chat/index.tsx
+++ b/src/components/agent/chat/index.tsx
@@ -1,7 +1,7 @@
 /**
  * AI Agent 聊天页面
  *
- * 包含聊天区域和侧边栏（话题列表）
+ * 包含聊天区域和侧边栏（任务列表）
  * 支持内容创作模式下的布局过渡和步骤引导
  * 当主题为 general 时，使用 GeneralChat 组件实现
  */
@@ -18,18 +18,29 @@ import {
 } from "react";
 import { toast } from "sonner";
 import styled from "styled-components";
-import { Info, PanelLeftOpen } from "lucide-react";
+import { Clock3, Info, PanelLeftOpen } from "lucide-react";
 import { open as openDialog } from "@tauri-apps/plugin-dialog";
 import { safeListen } from "@/lib/dev-bridge";
 import { readFilePreview } from "@/lib/api/fileBrowser";
-import { uploadImageToSession, importDocument } from "@/lib/api/session-files";
+import {
+  openPathWithDefaultApp,
+  revealPathInFinder,
+} from "@/lib/api/fileSystem";
+import {
+  uploadImageToSession,
+  importDocument,
+  resolveFilePath as resolveSessionFilePath,
+} from "@/lib/api/session-files";
 import {
   useAgentChatUnified,
   useArtifactAutoPreviewSync,
   useThemeContextWorkspace,
   useTopicBranchBoard,
 } from "./hooks";
-import { useArtifactDisplayState } from "./hooks/useArtifactDisplayState";
+import {
+  settleLiveArtifactAfterStreamStops,
+  useArtifactDisplayState,
+} from "./hooks/useArtifactDisplayState";
 import type { SidebarActivityLog } from "./hooks/useThemeContextWorkspace";
 import type { TopicBranchStatus } from "./hooks/useTopicBranchBoard";
 import { useSessionFiles } from "./hooks/useSessionFiles";
@@ -48,6 +59,12 @@ import { MessageList } from "./components/MessageList";
 import { Inputbar } from "./components/Inputbar";
 import { RuntimeStyleControlBar } from "./components/RuntimeStyleControlBar";
 import { EmptyState } from "./components/EmptyState";
+import {
+  CanvasWorkbenchLayout,
+  type CanvasWorkbenchDefaultPreview,
+  type CanvasWorkbenchLayoutMode,
+  type CanvasWorkbenchPreviewTarget,
+} from "./components/CanvasWorkbenchLayout";
 import { Dialog, DialogContent } from "@/components/ui/dialog";
 import type { CreationMode } from "./components/types";
 import { type TaskFile } from "./components/TaskFiles";
@@ -119,10 +136,17 @@ import {
   type ProjectMemory,
   type Character,
 } from "@/lib/api/memory";
+import {
+  browserExecuteAction,
+  launchBrowserRuntimeAssist,
+} from "@/lib/webview-api";
 import type { Page, PageParams } from "@/types/page";
 import { SettingsTabs } from "@/types/settings";
 import { skillsApi, type Skill } from "@/lib/api/skills";
-import { buildHomeAgentParams } from "@/lib/workspace/navigation";
+import {
+  buildClawAgentParams,
+  buildHomeAgentParams,
+} from "@/lib/workspace/navigation";
 import { useConfiguredProviders } from "@/hooks/useConfiguredProviders";
 import { useSubAgentScheduler } from "@/hooks/useSubAgentScheduler";
 import {
@@ -136,6 +160,8 @@ import {
 } from "@/lib/api/executionRun";
 import { setActiveContentTarget } from "@/lib/activeContentTarget";
 import { recordWorkspaceRepair } from "@/lib/workspaceHealthTelemetry";
+import { listMaterials, uploadMaterial } from "@/lib/api/materials";
+import { setStoredResourceProjectId } from "@/lib/resourceProjectSelection";
 import { resolveProviderModelCompatibility } from "./utils/providerModelCompatibility";
 import { useProviderModels } from "@/hooks/useProviderModels";
 import {
@@ -154,7 +180,12 @@ import {
   type SkillDetailInfo,
 } from "@/lib/api/skill-execution";
 
-import type { Message, MessageImage, WriteArtifactContext } from "./types";
+import type {
+  BrowserAssistSessionState,
+  Message,
+  MessageImage,
+  WriteArtifactContext,
+} from "./types";
 import type {
   ThemeType,
   LayoutMode,
@@ -163,6 +194,13 @@ import type {
 import type { A2UIFormData } from "@/components/content-creator/a2ui/types";
 import { getFileToStepMap } from "./utils/workflowMapping";
 import { normalizeProjectId } from "./utils/topicProjectResolution";
+import {
+  buildGeneralChatResourceDescription,
+  buildGeneralChatResourceHash,
+  buildGeneralChatResourceTags,
+  extractGeneralChatResourceHash,
+  inferGeneralChatResourceMaterialType,
+} from "./utils/generalResourceSync";
 import {
   extractStyleActionContent,
   resolveStyleActionFileName,
@@ -189,6 +227,22 @@ import {
   buildGeneralAgentSystemPrompt,
   resolveAgentChatMode,
 } from "./utils/generalAgentPrompt";
+import {
+  areBrowserAssistSessionStatesEqual,
+  clearBrowserAssistSessionState,
+  createBrowserAssistSessionState,
+  extractBrowserAssistSessionFromArtifact,
+  findLatestBrowserAssistSessionInMessages,
+  loadBrowserAssistSessionState,
+  mergeBrowserAssistSessionStates,
+  resolveBrowserAssistSessionScopeKey,
+  saveBrowserAssistSessionState,
+} from "./utils/browserAssistSession";
+import {
+  extractExplicitUrlFromText,
+  resolveBrowserAssistLaunchUrl,
+  shouldAutoOpenBrowserAssistForPrompt,
+} from "./utils/browserAssistIntent";
 import { mergeThreadItems } from "./utils/threadTimelineView";
 import { subscribeDocumentEditorFocus } from "@/lib/documentEditorFocusEvents";
 import {
@@ -200,6 +254,7 @@ import {
   type RuntimeStyleSelection,
 } from "@/lib/style-guide";
 import { useWorkbenchStore } from "@/stores/useWorkbenchStore";
+import { collectConversationSkillNames } from "./utils/harnessSkills";
 
 const SUPPORTED_ENTRY_THEMES: ThemeType[] = [
   "general",
@@ -213,6 +268,9 @@ const SUPPORTED_ENTRY_THEMES: ThemeType[] = [
   "novel",
 ];
 
+const GENERAL_BROWSER_ASSIST_PROFILE_KEY = "general_browser_assist";
+const GENERAL_BROWSER_ASSIST_ARTIFACT_ID = "browser-assist:general";
+
 interface HarnessFilePreviewResult {
   path: string;
   content: string | null;
@@ -235,30 +293,266 @@ function normalizeInitialTheme(value?: string): ThemeType {
   return "general";
 }
 
-function resolveArtifactFilePath(artifact: Pick<Artifact, "title" | "meta">): string {
-  if (typeof artifact.meta.filePath === "string" && artifact.meta.filePath.trim()) {
+function shouldPreserveGeneralArtifact(artifact: Artifact): boolean {
+  return artifact.meta.persistOutsideMessages === true;
+}
+
+function buildBrowserAssistArtifact(params: {
+  scopeKey: string;
+  profileKey: string;
+  browserSessionId: string;
+  url: string;
+  title?: string;
+  targetId?: string;
+  transportKind?: string;
+  lifecycleState?: string;
+  controlMode?: string;
+}): Artifact {
+  const now = Date.now();
+
+  return {
+    id: GENERAL_BROWSER_ASSIST_ARTIFACT_ID,
+    type: "browser_assist",
+    title: params.title?.trim() || "浏览器协助",
+    content: "",
+    status: "complete",
+    error: undefined,
+    meta: {
+      persistOutsideMessages: true,
+      browserAssistScopeKey: params.scopeKey,
+      profileKey: params.profileKey,
+      sessionId: params.browserSessionId,
+      url: params.url,
+      launchState: "ready",
+      launchHint: undefined,
+      launchError: undefined,
+      ...(params.targetId ? { targetId: params.targetId } : {}),
+      ...(params.transportKind
+        ? { transportKind: params.transportKind }
+        : {}),
+      ...(params.lifecycleState
+        ? { lifecycleState: params.lifecycleState }
+        : {}),
+      ...(params.controlMode ? { controlMode: params.controlMode } : {}),
+    },
+    position: { start: 0, end: 0 },
+    createdAt: now,
+    updatedAt: now,
+  };
+}
+
+function buildPendingBrowserAssistArtifact(params: {
+  scopeKey: string;
+  profileKey: string;
+  url: string;
+  title?: string;
+}): Artifact {
+  const now = Date.now();
+
+  return {
+    id: GENERAL_BROWSER_ASSIST_ARTIFACT_ID,
+    type: "browser_assist",
+    title: params.title?.trim() || "浏览器协助",
+    content: "",
+    status: "pending",
+    error: undefined,
+    meta: {
+      persistOutsideMessages: true,
+      browserAssistScopeKey: params.scopeKey,
+      profileKey: params.profileKey,
+      url: params.url,
+      launchState: "launching",
+      launchHint: "正在启动 Chrome、连接调试通道并等待首帧画面，通常需要 3–8 秒。",
+      launchError: undefined,
+    },
+    position: { start: 0, end: 0 },
+    createdAt: now,
+    updatedAt: now,
+  };
+}
+
+function buildFailedBrowserAssistArtifact(params: {
+  scopeKey: string;
+  profileKey: string;
+  url: string;
+  title?: string;
+  error: string;
+}): Artifact {
+  const now = Date.now();
+
+  return {
+    id: GENERAL_BROWSER_ASSIST_ARTIFACT_ID,
+    type: "browser_assist",
+    title: params.title?.trim() || "浏览器协助",
+    content: "",
+    status: "error",
+    error: params.error,
+    meta: {
+      persistOutsideMessages: true,
+      browserAssistScopeKey: params.scopeKey,
+      profileKey: params.profileKey,
+      url: params.url,
+      launchState: "failed",
+      launchHint: undefined,
+      launchError: params.error,
+    },
+    position: { start: 0, end: 0 },
+    createdAt: now,
+    updatedAt: now,
+  };
+}
+
+function asRecord(value: unknown): Record<string, unknown> | null {
+  if (!value || typeof value !== "object" || Array.isArray(value)) {
+    return null;
+  }
+
+  return value as Record<string, unknown>;
+}
+
+function readFirstString(
+  candidates: Array<Record<string, unknown> | null | undefined>,
+  keys: string[],
+): string | undefined {
+  for (const candidate of candidates) {
+    if (!candidate) {
+      continue;
+    }
+    for (const key of keys) {
+      const value = candidate[key];
+      if (typeof value === "string" && value.trim()) {
+        return value.trim();
+      }
+    }
+  }
+
+  return undefined;
+}
+
+function resolveBrowserAssistArtifactScopeKey(
+  artifact: Pick<Artifact, "type" | "meta"> | null | undefined,
+): string | null {
+  if (!artifact || artifact.type !== "browser_assist") {
+    return null;
+  }
+
+  const meta = asRecord(artifact.meta);
+  return (
+    readFirstString(meta ? [meta] : [], [
+      "browserAssistScopeKey",
+      "browser_assist_scope_key",
+    ]) || null
+  );
+}
+function resolveArtifactFilePath(
+  artifact: Pick<Artifact, "title" | "meta">,
+): string {
+  if (
+    typeof artifact.meta.filePath === "string" &&
+    artifact.meta.filePath.trim()
+  ) {
     return artifact.meta.filePath.trim();
   }
-  if (typeof artifact.meta.filename === "string" && artifact.meta.filename.trim()) {
+  if (
+    typeof artifact.meta.filename === "string" &&
+    artifact.meta.filename.trim()
+  ) {
     return artifact.meta.filename.trim();
   }
   return artifact.title;
 }
 
+function resolveAbsoluteWorkspacePath(
+  workspaceRoot: string | null | undefined,
+  filePath: string | null | undefined,
+): string | undefined {
+  const normalizedFilePath = filePath?.trim();
+  if (!normalizedFilePath) {
+    return undefined;
+  }
+
+  if (
+    normalizedFilePath.startsWith("/") ||
+    normalizedFilePath.startsWith("~/") ||
+    normalizedFilePath.startsWith("\\\\") ||
+    /^[A-Za-z]:[\\/]/.test(normalizedFilePath)
+  ) {
+    return normalizedFilePath;
+  }
+
+  const normalizedWorkspaceRoot = workspaceRoot?.trim();
+  if (!normalizedWorkspaceRoot) {
+    return normalizedFilePath;
+  }
+
+  return `${normalizedWorkspaceRoot.replace(/[\\/]+$/, "")}/${normalizedFilePath.replace(/^[\\/]+/, "")}`;
+}
+
+function resolvePreviousDocumentVersionContent(
+  version: DocumentVersion | null | undefined,
+  versions: DocumentVersion[],
+): string | null {
+  if (!version) {
+    return null;
+  }
+
+  const parentVersionId = version.metadata?.parentVersionId?.trim();
+  if (parentVersionId) {
+    const parentVersion = versions.find((item) => item.id === parentVersionId);
+    if (parentVersion) {
+      return parentVersion.content;
+    }
+  }
+
+  const currentIndex = versions.findIndex((item) => item.id === version.id);
+  if (currentIndex > 0) {
+    return versions[currentIndex - 1]?.content || null;
+  }
+
+  return null;
+}
+
+function wrapPreviewWithWorkbenchTrigger(
+  preview: ReactNode,
+  stackedWorkbenchTrigger?: ReactNode,
+) {
+  if (!stackedWorkbenchTrigger) {
+    return preview;
+  }
+
+  return (
+    <div className="relative h-full">
+      {preview}
+      <div className="pointer-events-none absolute right-3 top-3 z-10">
+        <div className="pointer-events-auto">{stackedWorkbenchTrigger}</div>
+      </div>
+    </div>
+  );
+}
+
 function mergeMessageArtifactsIntoStore(
   messageArtifacts: Artifact[],
   currentArtifacts: Artifact[],
+  browserAssistScopeKey: string | null,
 ): Artifact[] {
+  const preservedArtifacts = currentArtifacts.filter(
+    (artifact) =>
+      shouldPreserveGeneralArtifact(artifact) &&
+      (artifact.type !== "browser_assist" ||
+        resolveBrowserAssistArtifactScopeKey(artifact) ===
+          browserAssistScopeKey),
+  );
+
   if (messageArtifacts.length === 0) {
-    return [];
+    return mergeArtifacts(preservedArtifacts);
   }
 
   const currentArtifactsById = new Map(
     currentArtifacts.map((artifact) => [artifact.id, artifact]),
   );
 
-  return mergeArtifacts(
-    messageArtifacts.map((artifact) => {
+  return mergeArtifacts([
+    ...messageArtifacts.map((artifact) => {
       const existing = currentArtifactsById.get(artifact.id);
       if (!existing) {
         return artifact;
@@ -274,7 +568,9 @@ function mergeMessageArtifactsIntoStore(
       return {
         ...existing,
         ...artifact,
-        content: shouldReuseExistingContent ? existing.content : artifact.content,
+        content: shouldReuseExistingContent
+          ? existing.content
+          : artifact.content,
         meta: {
           ...existing.meta,
           ...artifact.meta,
@@ -283,7 +579,8 @@ function mergeMessageArtifactsIntoStore(
         updatedAt: Math.max(existing.updatedAt, artifact.updatedAt),
       };
     }),
-  );
+    ...preservedArtifacts,
+  ]);
 }
 
 const PageContainer = styled.div`
@@ -1736,6 +2033,7 @@ export function AgentChatPage({
   onNavigate: _onNavigate,
   projectId: externalProjectId,
   contentId,
+  agentEntry = "claw",
   theme: initialTheme,
   initialCreationMode,
   lockTheme = false,
@@ -1759,6 +2057,7 @@ export function AgentChatPage({
   onNavigate?: (page: Page, params?: PageParams) => void;
   projectId?: string;
   contentId?: string;
+  agentEntry?: "new-task" | "claw";
   theme?: string;
   initialCreationMode?: CreationMode;
   lockTheme?: boolean;
@@ -1782,6 +2081,7 @@ export function AgentChatPage({
   preferContentReviewInRightRail?: boolean;
 }) {
   const normalizedEntryTheme = normalizeInitialTheme(initialTheme);
+  const isNewTaskEntry = agentEntry === "new-task";
   const [showSidebar, setShowSidebar] = useState(true);
   const [themeWorkbenchSidebarCollapsed, setThemeWorkbenchSidebarCollapsed] =
     useState(false);
@@ -1850,6 +2150,7 @@ export function AgentChatPage({
     null,
   );
   const handledNewChatRequestRef = useRef<string | null>(null);
+  const promotedNewTaskEntryRef = useRef(false);
 
   const incomingNewChatRequestKey =
     typeof newChatAt === "number" ? String(newChatAt) : null;
@@ -1937,6 +2238,8 @@ export function AgentChatPage({
   const [selectedFileId, setSelectedFileId] = useState<string | undefined>();
   const taskFilesRef = useRef<TaskFile[]>([]);
   const socialStageLogRef = useRef<Record<string, string>>({});
+  const generalResourceHashesRef = useRef<Map<string, Set<string>>>(new Map());
+  const generalResourceSyncInFlightRef = useRef<Set<string>>(new Set());
 
   // 项目上下文状态
   const [project, setProject] = useState<Project | null>(null);
@@ -1989,6 +2292,7 @@ export function AgentChatPage({
 
   // 技能列表（用于 @ 引用）
   const [skills, setSkills] = useState<Skill[]>([]);
+  const [skillsLoading, setSkillsLoading] = useState(false);
 
   // Workbench Store（用于主题工作台右侧面板状态同步）
   const pendingSkillKey = useWorkbenchStore((state) => state.pendingSkillKey);
@@ -2053,9 +2357,6 @@ export function AgentChatPage({
       (artifacts.length > 0 ? artifacts[artifacts.length - 1] : null),
     [artifacts, selectedArtifact],
   );
-  const artifactDisplayState = useArtifactDisplayState(liveArtifact, artifacts);
-  const currentCanvasArtifact = artifactDisplayState.liveArtifact;
-  const displayedCanvasArtifact = artifactDisplayState.displayArtifact;
 
   // Artifact 预览状态
   const [artifactViewMode, setArtifactViewMode] = useState<
@@ -2064,21 +2365,63 @@ export function AgentChatPage({
   const [artifactPreviewSize, setArtifactPreviewSize] = useState<
     "mobile" | "tablet" | "desktop"
   >("desktop");
+  const [canvasWorkbenchLayoutMode, setCanvasWorkbenchLayoutMode] =
+    useState<CanvasWorkbenchLayoutMode>("split");
+  const [browserAssistLaunching, setBrowserAssistLaunching] = useState(false);
+  const [browserAssistSessionState, setBrowserAssistSessionState] =
+    useState<BrowserAssistSessionState | null>(null);
+  const autoOpenedBrowserAssistSessionIdRef = useRef<string>("");
+  const autoLaunchingBrowserAssistKeyRef = useRef<string>("");
+  const browserAssistLaunchRequestIdRef = useRef(0);
+  const autoCollapsedTopicSidebarRef = useRef(false);
 
   // 当有新的 artifact 时，自动打开画布
   useEffect(() => {
     if (activeTheme !== "general") return;
     if (artifacts.length === 0) return;
+    const hasNonBrowserAssistArtifact = artifacts.some(
+      (artifact) => artifact.type !== "browser_assist",
+    );
+    const hasBoundBrowserAssistSession = Boolean(
+      browserAssistSessionState?.sessionId || browserAssistSessionState?.profileKey,
+    );
+    if (!hasNonBrowserAssistArtifact && !hasBoundBrowserAssistSession) {
+      return;
+    }
 
     // 自动打开画布显示 artifact
     setLayoutMode("chat-canvas");
-  }, [artifacts.length, activeTheme]);
+  }, [
+    activeTheme,
+    artifacts,
+    browserAssistSessionState?.profileKey,
+    browserAssistSessionState?.sessionId,
+  ]);
 
   // 跳转到设置页安装技能
   const handleNavigateToSkillSettings = useCallback(() => {
     _onNavigate?.("settings", { tab: SettingsTabs.Skills });
   }, [_onNavigate]);
 
+  const loadSkills = useCallback(async (): Promise<Skill[]> => {
+    setSkillsLoading(true);
+    try {
+      const loadedSkills = await skillsApi.getAll("proxycast");
+      setSkills(loadedSkills);
+      return loadedSkills;
+    } catch (error) {
+      console.warn("[AgentChatPage] 加载 skills 失败:", error);
+      setSkills([]);
+      return [];
+    } finally {
+      setSkillsLoading(false);
+    }
+  }, []);
+
+  const handleRefreshSkills = useCallback(async () => {
+    await loadSkills();
+  }, [loadSkills]);
+
   // 加载项目、Memory 和内容
   useEffect(() => {
     let cancelled = false;
@@ -2349,6 +2692,8 @@ export function AgentChatPage({
       prompt = buildGeneralAgentSystemPrompt(mappedTheme, {
         toolPreferences: chatToolPreferences,
         harness: {
+          browserAssistEnabled: true,
+          browserAssistProfileKey: GENERAL_BROWSER_ASSIST_PROFILE_KEY,
           contentId: contentId || null,
         },
       });
@@ -2396,7 +2741,7 @@ export function AgentChatPage({
     deleteMessage,
     editMessage,
     handlePermissionResponse,
-    pendingActions,
+    pendingActions = [],
     triggerAIGuide,
     topics,
     sessionId,
@@ -2404,7 +2749,7 @@ export function AgentChatPage({
     switchTopic: originalSwitchTopic,
     deleteTopic,
     renameTopic,
-    workspacePathMissing,
+    workspacePathMissing = false,
     fixWorkspacePathAndRetry,
     dismissWorkspacePathError,
   } = useAgentChatUnified({
@@ -2414,7 +2759,75 @@ export function AgentChatPage({
       handleWriteFileRef.current?.(content, fileName, context);
     },
     workspaceId: projectId ?? "",
+    disableSessionRestore: isNewTaskEntry,
   });
+  const settledLiveArtifact = useMemo(
+    () =>
+      settleLiveArtifactAfterStreamStops(liveArtifact, {
+        streamActive: isSending,
+      }),
+    [isSending, liveArtifact],
+  );
+  const settledWorkbenchArtifacts = useMemo(() => {
+    if (!settledLiveArtifact) {
+      return artifacts;
+    }
+
+    let updated = false;
+    const nextArtifacts = artifacts.map((artifact) => {
+      if (artifact.id !== settledLiveArtifact.id) {
+        return artifact;
+      }
+
+      updated = updated || artifact !== settledLiveArtifact;
+      return settledLiveArtifact;
+    });
+
+    return updated ? nextArtifacts : artifacts;
+  }, [artifacts, settledLiveArtifact]);
+  const artifactDisplayState = useArtifactDisplayState(
+    settledLiveArtifact,
+    artifacts,
+  );
+  const currentCanvasArtifact = artifactDisplayState.liveArtifact;
+  const displayedCanvasArtifact = artifactDisplayState.displayArtifact;
+  const currentBrowserAssistScopeKey = useMemo(
+    () =>
+      activeTheme === "general"
+        ? resolveBrowserAssistSessionScopeKey(projectId, sessionId)
+        : null,
+    [activeTheme, projectId, sessionId],
+  );
+  const browserAssistArtifact = useMemo(
+    () =>
+      artifacts.find(
+        (artifact) =>
+          artifact.id === GENERAL_BROWSER_ASSIST_ARTIFACT_ID &&
+          artifact.type === "browser_assist" &&
+          resolveBrowserAssistArtifactScopeKey(artifact) ===
+            currentBrowserAssistScopeKey,
+      ) || null,
+    [artifacts, currentBrowserAssistScopeKey],
+  );
+  const latestBrowserAssistSessionFromMessages = useMemo(
+    () => findLatestBrowserAssistSessionInMessages(messages),
+    [messages],
+  );
+  const browserAssistSessionFromArtifact = useMemo(
+    () => extractBrowserAssistSessionFromArtifact(browserAssistArtifact),
+    [browserAssistArtifact],
+  );
+  const browserAssistStorageKey = useMemo(
+    () =>
+      activeTheme === "general"
+        ? `${projectId || "global"}:${sessionId || "active"}`
+        : null,
+    [activeTheme, projectId, sessionId],
+  );
+  const isBrowserAssistCanvasVisible =
+    activeTheme === "general" &&
+    layoutMode !== "chat" &&
+    currentCanvasArtifact?.type === "browser_assist";
   const { providers: configuredProviders } = useConfiguredProviders();
   const subAgentRuntime = useSubAgentScheduler(sessionId);
   const syntheticSubagentItems = useMemo(
@@ -2431,7 +2844,8 @@ export function AgentChatPage({
     [syntheticSubagentItems, threadItems],
   );
   const harnessState = useMemo(
-    () => deriveHarnessSessionState(messages, pendingActions, effectiveThreadItems),
+    () =>
+      deriveHarnessSessionState(messages, pendingActions, effectiveThreadItems),
     [effectiveThreadItems, messages, pendingActions],
   );
   const activeRuntimeStatusTitle = useMemo(() => {
@@ -2474,9 +2888,13 @@ export function AgentChatPage({
       messages.flatMap((message) => message.artifacts || []),
     );
     setArtifacts((currentArtifacts) =>
-      mergeMessageArtifactsIntoStore(messageArtifacts, currentArtifacts),
+      mergeMessageArtifactsIntoStore(
+        messageArtifacts,
+        currentArtifacts,
+        currentBrowserAssistScopeKey,
+      ),
     );
-  }, [activeTheme, messages, setArtifacts]);
+  }, [activeTheme, currentBrowserAssistScopeKey, messages, setArtifacts]);
 
   useEffect(() => {
     if (activeTheme !== "general") {
@@ -2508,7 +2926,9 @@ export function AgentChatPage({
     if (activeTheme !== "general" || !displayedCanvasArtifact) {
       return;
     }
-    setArtifactViewMode(resolveDefaultArtifactViewMode(displayedCanvasArtifact));
+    setArtifactViewMode(
+      resolveDefaultArtifactViewMode(displayedCanvasArtifact),
+    );
   }, [activeTheme, displayedCanvasArtifact]);
 
   useEffect(() => {
@@ -2522,9 +2942,9 @@ export function AgentChatPage({
     providerType,
     model,
   });
-  const installedSkills = useMemo(
-    () => skills.filter((skill) => skill.installed),
-    [skills],
+  const harnessSkillNames = useMemo(
+    () => collectConversationSkillNames(messages),
+    [messages],
   );
   const harnessPendingCount = harnessState.pendingApprovals.length;
   const shouldAlwaysShowHarnessToggle =
@@ -2538,7 +2958,11 @@ export function AgentChatPage({
     shouldAlwaysShowGeneralWorkbenchToggle ||
     hasHarnessActivity;
   const harnessAttentionLevel =
-    harnessPendingCount > 0 ? "warning" : hasHarnessActivity ? "active" : "idle";
+    harnessPendingCount > 0
+      ? "warning"
+      : hasHarnessActivity
+        ? "active"
+        : "idle";
   const navbarHarnessPanelVisible = harnessPanelVisible;
   const visibleContextItems = useMemo(() => {
     const activeItems = contextWorkspace.sidebarContextItems.filter(
@@ -2550,11 +2974,8 @@ export function AgentChatPage({
   }, [contextWorkspace.sidebarContextItems]);
   const harnessEnvironment = useMemo(
     () => ({
-      skillsCount: installedSkills.length,
-      skillNames: installedSkills
-        .map((skill) => skill.name || skill.key)
-        .filter((name) => !!name.trim())
-        .slice(0, 4),
+      skillsCount: harnessSkillNames.length,
+      skillNames: harnessSkillNames.slice(0, 4),
       memorySignals: [
         projectMemory?.characters.length ? "角色" : null,
         projectMemory?.world_building ? "世界观" : null,
@@ -2574,7 +2995,7 @@ export function AgentChatPage({
     [
       contextWorkspace.enabled,
       contextWorkspace.sidebarContextItems,
-      installedSkills,
+      harnessSkillNames,
       projectMemory?.characters.length,
       projectMemory?.outline.length,
       projectMemory?.style_guide,
@@ -2594,27 +3015,9 @@ export function AgentChatPage({
     setHarnessPanelVisible((current) => !current);
   }, []);
 
-  // 加载 skills 列表
   useEffect(() => {
-    let cancelled = false;
-    skillsApi
-      .getAll("proxycast")
-      .then((loadedSkills) => {
-        if (!cancelled) {
-          setSkills(loadedSkills);
-        }
-      })
-      .catch((error) => {
-        console.warn("[AgentChatPage] 加载 skills 失败:", error);
-        if (!cancelled) {
-          setSkills([]);
-        }
-      });
-
-    return () => {
-      cancelled = true;
-    };
-  }, []);
+    void loadSkills();
+  }, [loadSkills]);
 
   // 主题工作台模式：同步 skills 状态到 store
   // 注意：不再设置 themeSkillsRailState，避免"操作面板"覆盖默认 Skills Rail
@@ -3161,7 +3564,11 @@ export function AgentChatPage({
     });
 
     return map;
-  }, [isThemeWorkbench, themeWorkbenchBackendRunState, themeWorkbenchMergedTerminals]);
+  }, [
+    isThemeWorkbench,
+    themeWorkbenchBackendRunState,
+    themeWorkbenchMergedTerminals,
+  ]);
 
   const themeWorkbenchBackendActivityLogs = useMemo<
     SidebarActivityLog[]
@@ -3194,34 +3601,33 @@ export function AgentChatPage({
       },
     );
 
-    const terminalLogs: SidebarActivityLog[] = themeWorkbenchMergedTerminals.map(
-      (terminal) => ({
-      id: `run-terminal-${terminal.run_id}`,
-      name: terminal.title || "执行主题工作台编排",
-      status: terminal.status === "success" ? "completed" : "failed",
-      timeLabel: formatThemeWorkbenchRunTimeLabel(
-        terminal.finished_at || terminal.started_at,
-      ),
-      durationLabel: formatThemeWorkbenchRunDurationLabel(
-        terminal.started_at,
-        terminal.finished_at,
-      ),
-      applyTarget: resolveThemeWorkbenchApplyTargetByGateKey(
-        terminal.gate_key || "idle",
-      ),
-      runId: terminal.run_id,
-      executionId: terminal.execution_id || undefined,
-      sessionId: terminal.session_id || undefined,
-      artifactPaths:
-        Array.isArray(terminal.artifact_paths) &&
-        terminal.artifact_paths.length > 0
-          ? terminal.artifact_paths
-          : undefined,
-      gateKey: terminal.gate_key || "idle",
-      source: terminal.source,
-      sourceRef: terminal.source_ref || undefined,
-    }),
-    );
+    const terminalLogs: SidebarActivityLog[] =
+      themeWorkbenchMergedTerminals.map((terminal) => ({
+        id: `run-terminal-${terminal.run_id}`,
+        name: terminal.title || "执行主题工作台编排",
+        status: terminal.status === "success" ? "completed" : "failed",
+        timeLabel: formatThemeWorkbenchRunTimeLabel(
+          terminal.finished_at || terminal.started_at,
+        ),
+        durationLabel: formatThemeWorkbenchRunDurationLabel(
+          terminal.started_at,
+          terminal.finished_at,
+        ),
+        applyTarget: resolveThemeWorkbenchApplyTargetByGateKey(
+          terminal.gate_key || "idle",
+        ),
+        runId: terminal.run_id,
+        executionId: terminal.execution_id || undefined,
+        sessionId: terminal.session_id || undefined,
+        artifactPaths:
+          Array.isArray(terminal.artifact_paths) &&
+          terminal.artifact_paths.length > 0
+            ? terminal.artifact_paths
+            : undefined,
+        gateKey: terminal.gate_key || "idle",
+        source: terminal.source,
+        sourceRef: terminal.source_ref || undefined,
+      }));
 
     return [...runningLogs, ...terminalLogs];
   }, [
@@ -3495,7 +3901,8 @@ export function AgentChatPage({
       return null;
     }
 
-    const latestTerminal = themeWorkbenchBackendRunState?.latest_terminal ?? null;
+    const latestTerminal =
+      themeWorkbenchBackendRunState?.latest_terminal ?? null;
     const activeRun = themeWorkbenchActiveQueueItem ?? latestTerminal;
     const artifactPaths =
       Array.isArray(themeWorkbenchActiveQueueItem?.artifact_paths) &&
@@ -3588,6 +3995,154 @@ export function AgentChatPage({
     autoInit: true,
   });
 
+  const syncResourceProjectSelection = useCallback(
+    (targetProjectId: string | null | undefined) => {
+      const normalizedProjectId = normalizeProjectId(targetProjectId);
+      if (!normalizedProjectId) {
+        return;
+      }
+
+      setStoredResourceProjectId(normalizedProjectId, {
+        source: "general-chat",
+        emitEvent: true,
+      });
+    },
+    [],
+  );
+
+  const ensureGeneralResourceHashes = useCallback(async (targetProjectId: string) => {
+    const existingHashes = generalResourceHashesRef.current.get(targetProjectId);
+    if (existingHashes) {
+      return existingHashes;
+    }
+
+    const nextHashes = new Set<string>();
+
+    try {
+      const materials = await listMaterials(targetProjectId);
+      materials.forEach((material) => {
+        const hash = extractGeneralChatResourceHash(material);
+        if (hash) {
+          nextHashes.add(hash);
+        }
+      });
+    } catch (error) {
+      console.warn("[AgentChatPage] 读取资源去重缓存失败:", error);
+    }
+
+    generalResourceHashesRef.current.set(targetProjectId, nextHashes);
+    return nextHashes;
+  }, []);
+
+  const resolveGeneralArtifactSyncPath = useCallback(
+    async (rawFilePath: string): Promise<string | null> => {
+      const normalizedFilePath = rawFilePath.trim();
+      if (!normalizedFilePath) {
+        return null;
+      }
+
+      if (
+        normalizedFilePath.startsWith("/") ||
+        normalizedFilePath.startsWith("~/") ||
+        normalizedFilePath.startsWith("\\\\") ||
+        /^[A-Za-z]:[\\/]/.test(normalizedFilePath)
+      ) {
+        return normalizedFilePath;
+      }
+
+      if (sessionId) {
+        try {
+          return await resolveSessionFilePath(sessionId, normalizedFilePath);
+        } catch (error) {
+          console.warn("[AgentChatPage] 解析会话文件路径失败:", error);
+        }
+      }
+
+      return (
+        resolveAbsoluteWorkspacePath(project?.rootPath, normalizedFilePath) || null
+      );
+    },
+    [project?.rootPath, sessionId],
+  );
+
+  const syncGeneralArtifactToResource = useCallback(
+    async (input: { rawFilePath: string; preferredName?: string }) => {
+      if (activeTheme !== "general") {
+        return;
+      }
+
+      const normalizedProjectId = normalizeProjectId(projectId);
+      const normalizedRawFilePath = input.rawFilePath.trim();
+      if (!normalizedProjectId || !normalizedRawFilePath) {
+        return;
+      }
+
+      const materialType =
+        inferGeneralChatResourceMaterialType(normalizedRawFilePath);
+      if (!materialType) {
+        return;
+      }
+
+      const resolvedFilePath =
+        await resolveGeneralArtifactSyncPath(normalizedRawFilePath);
+      const normalizedResolvedFilePath = resolvedFilePath?.trim();
+      if (!normalizedResolvedFilePath) {
+        return;
+      }
+
+      const pathHash = buildGeneralChatResourceHash(normalizedResolvedFilePath);
+      const dedupeKey = `${normalizedProjectId}:${pathHash}`;
+      if (generalResourceSyncInFlightRef.current.has(dedupeKey)) {
+        return;
+      }
+
+      const knownHashes = await ensureGeneralResourceHashes(normalizedProjectId);
+      if (knownHashes.has(pathHash)) {
+        return;
+      }
+
+      generalResourceSyncInFlightRef.current.add(dedupeKey);
+      try {
+        await uploadMaterial({
+          projectId: normalizedProjectId,
+          name:
+            input.preferredName?.trim() ||
+            extractFileNameFromPath(normalizedResolvedFilePath),
+          type: materialType,
+          filePath: normalizedResolvedFilePath,
+          tags: buildGeneralChatResourceTags(
+            normalizedResolvedFilePath,
+            sessionId,
+          ),
+          description: buildGeneralChatResourceDescription(sessionId),
+        });
+
+        knownHashes.add(pathHash);
+        syncResourceProjectSelection(normalizedProjectId);
+      } catch (error) {
+        console.warn("[AgentChatPage] 自动补录资源失败:", error);
+      } finally {
+        generalResourceSyncInFlightRef.current.delete(dedupeKey);
+      }
+    },
+    [
+      activeTheme,
+      ensureGeneralResourceHashes,
+      projectId,
+      resolveGeneralArtifactSyncPath,
+      sessionId,
+      syncResourceProjectSelection,
+    ],
+  );
+
+  useEffect(() => {
+    if (activeTheme !== "general") {
+      return;
+    }
+
+    syncResourceProjectSelection(projectId);
+  }, [activeTheme, projectId, syncResourceProjectSelection]);
+
   // 监听画布状态变化，自动同步到 Content
   useEffect(() => {
     if (!canvasState || !contentId) {
@@ -3643,7 +4198,7 @@ export function AgentChatPage({
     // 从会话元数据恢复主题（类型已统一，直接使用）
     if (sessionMeta.theme && (!lockTheme || !initialTheme)) {
       // 通用对话入口（initialTheme 为空或 "general"）不应恢复为内容创作主题，
-      // 避免切换历史话题时错误激活社媒等创作模式
+      // 避免切换历史任务时错误激活社媒等创作模式
       const entryIsGeneral = !initialTheme || initialTheme === "general";
       const restoredIsCreation = isContentCreationTheme(sessionMeta.theme);
       if (entryIsGeneral && restoredIsCreation) {
@@ -3790,7 +4345,7 @@ export function AgentChatPage({
         });
 
         if (decision.status === "blocked") {
-          toast.error("该话题绑定了其他项目，请先切换到对应项目");
+          toast.error("该任务绑定了其他项目，请先切换到对应项目");
           return;
         }
 
@@ -3815,8 +4370,8 @@ export function AgentChatPage({
 
         await runTopicSwitch(topicId);
       } catch (error) {
-        console.error("[AgentChatPage] 解析话题项目失败:", error);
-        toast.error("切换话题失败，请稍后重试");
+        console.error("[AgentChatPage] 解析任务项目失败:", error);
+        toast.error("切换任务失败，请稍后重试");
       } finally {
         isResolvingTopicProjectRef.current = false;
       }
@@ -3837,8 +4392,8 @@ export function AgentChatPage({
 
     pendingTopicSwitchRef.current = null;
     runTopicSwitch(pending.topicId).catch((error) => {
-      console.error("[AgentChatPage] 执行待切换话题失败:", error);
-      toast.error("加载话题失败，请重试");
+      console.error("[AgentChatPage] 执行待切换任务失败:", error);
+      toast.error("加载任务失败，请重试");
     });
   }, [projectId, runTopicSwitch]);
 
@@ -4014,6 +4569,16 @@ export function AgentChatPage({
     canvasState,
   ]);
 
+  const ensureBrowserAssistCanvasRef = useRef<
+    (
+      sourceText: string,
+      options?: {
+        silent?: boolean;
+        navigationMode?: "none" | "explicit-url" | "best-effort";
+      },
+    ) => Promise<boolean>
+  >(async () => false);
+
   const handleSend = useCallback(
     async (
       images?: MessageImage[],
@@ -4085,6 +4650,23 @@ export function AgentChatPage({
         text = `[本次任务风格要求]\n${runtimeStyleMessagePrompt}\n\n[用户输入]\n${text}`;
       }
 
+      if (
+        activeTheme === "general" &&
+        shouldAutoOpenBrowserAssistForPrompt(sourceText)
+      ) {
+        try {
+          await ensureBrowserAssistCanvasRef.current(sourceText, {
+            silent: true,
+            navigationMode: "explicit-url",
+          });
+        } catch (error) {
+          console.warn(
+            "[AgentChatPage] 发送前预热浏览器协助失败，继续发送消息:",
+            error,
+          );
+        }
+      }
+
       setInput("");
       setMentionedCharacters([]); // 清空引用的角色
 
@@ -4176,8 +4758,19 @@ export function AgentChatPage({
               subagent_mode_enabled: chatToolPreferences.subagent,
               session_mode: isThemeWorkbench ? "theme_workbench" : "default",
               gate_key: isThemeWorkbench ? currentGate.key : undefined,
-              run_title: themeWorkbenchActiveQueueItem?.title?.trim() || undefined,
+              run_title:
+                themeWorkbenchActiveQueueItem?.title?.trim() || undefined,
               content_id: contentId || undefined,
+              browser_assist:
+                mappedTheme === "general"
+                  ? {
+                      enabled: true,
+                      profile_key: GENERAL_BROWSER_ASSIST_PROFILE_KEY,
+                      preferred_backend: "cdp_direct",
+                      auto_launch: true,
+                      stream_mode: "both",
+                    }
+                  : undefined,
             },
           },
         };
@@ -4207,6 +4800,18 @@ export function AgentChatPage({
             nextSendOptions,
           );
         }
+
+        if (isNewTaskEntry && !promotedNewTaskEntryRef.current) {
+          promotedNewTaskEntryRef.current = true;
+          _onNavigate?.(
+            "agent",
+            buildClawAgentParams({
+              projectId,
+              contentId,
+              theme: activeTheme,
+            }),
+          );
+        }
       } catch (error) {
         const errorMessage =
           error instanceof Error ? error.message : String(error);
@@ -4228,7 +4833,10 @@ export function AgentChatPage({
       isThemeWorkbench,
       mentionedCharacters,
       mappedTheme,
+      activeTheme,
+      isNewTaskEntry,
       model,
+      _onNavigate,
       projectId,
       providerModels,
       providerType,
@@ -4241,6 +4849,10 @@ export function AgentChatPage({
     ],
   );
 
+  useEffect(() => {
+    promotedNewTaskEntryRef.current = false;
+  }, [agentEntry, newChatAt]);
+
   const handleSendRef = useRef(handleSend);
   const webSearchPreferenceRef = useRef(chatToolPreferences.webSearch);
 
@@ -4600,12 +5212,12 @@ export function AgentChatPage({
       if (newSessionId) {
         toast.success(
           initialSessionName
-            ? `已创建新话题：${initialSessionName}`
-            : "已创建新话题",
+            ? `已创建新任务：${initialSessionName}`
+            : "已创建新任务",
           { id: toastId },
         );
       } else {
-        toast.error("创建新话题失败，请重试。", { id: toastId });
+        toast.error("创建新任务失败，请重试。", { id: toastId });
       }
     })();
   }, [
@@ -4705,6 +5317,45 @@ export function AgentChatPage({
     setLayoutMode("canvas");
   }, [showChatPanel, layoutMode, activeTheme, canvasState, mappedTheme]);
 
+  useEffect(() => {
+    if (
+      isThemeWorkbench ||
+      activeTheme !== "general" ||
+      layoutMode !== "chat-canvas"
+    ) {
+      setCanvasWorkbenchLayoutMode("split");
+    }
+  }, [activeTheme, isThemeWorkbench, layoutMode]);
+
+  useEffect(() => {
+    const shouldAutoHideTopicSidebar =
+      showChatPanel &&
+      !isThemeWorkbench &&
+      activeTheme === "general" &&
+      layoutMode === "chat-canvas" &&
+      canvasWorkbenchLayoutMode === "stacked";
+
+    if (shouldAutoHideTopicSidebar) {
+      if (showSidebar) {
+        autoCollapsedTopicSidebarRef.current = true;
+        setShowSidebar(false);
+      }
+      return;
+    }
+
+    if (autoCollapsedTopicSidebarRef.current) {
+      autoCollapsedTopicSidebarRef.current = false;
+      setShowSidebar(true);
+    }
+  }, [
+    activeTheme,
+    canvasWorkbenchLayoutMode,
+    isThemeWorkbench,
+    layoutMode,
+    showChatPanel,
+    showSidebar,
+  ]);
+
   useEffect(() => {
     onHasMessagesChange?.(hasMessages);
   }, [hasMessages, onHasMessagesChange]);
@@ -4903,13 +5554,593 @@ export function AgentChatPage({
     [setArtifacts],
   );
 
+  useEffect(() => {
+    if (
+      activeTheme !== "general" ||
+      !liveArtifact ||
+      !settledLiveArtifact ||
+      liveArtifact === settledLiveArtifact
+    ) {
+      return;
+    }
+
+    upsertGeneralArtifact(settledLiveArtifact);
+  }, [activeTheme, liveArtifact, settledLiveArtifact, upsertGeneralArtifact]);
+
+  const commitBrowserAssistSessionState = useCallback(
+    (candidate: BrowserAssistSessionState | null) => {
+      if (activeTheme !== "general" || !candidate) {
+        return;
+      }
+
+      setBrowserAssistSessionState((current) => {
+        const next = mergeBrowserAssistSessionStates(current, candidate);
+        return areBrowserAssistSessionStatesEqual(current, next) ? current : next;
+      });
+    },
+    [activeTheme],
+  );
+
+  useEffect(() => {
+    if (activeTheme !== "general") {
+      setBrowserAssistSessionState(null);
+      return;
+    }
+
+    setBrowserAssistSessionState(loadBrowserAssistSessionState(projectId, sessionId));
+  }, [activeTheme, browserAssistStorageKey, projectId, sessionId]);
+
+  useEffect(() => {
+    if (activeTheme !== "general") {
+      return;
+    }
+
+    commitBrowserAssistSessionState(browserAssistSessionFromArtifact);
+  }, [
+    activeTheme,
+    browserAssistSessionFromArtifact,
+    commitBrowserAssistSessionState,
+  ]);
+
+  useEffect(() => {
+    if (activeTheme !== "general") {
+      return;
+    }
+
+    commitBrowserAssistSessionState(latestBrowserAssistSessionFromMessages);
+  }, [
+    activeTheme,
+    commitBrowserAssistSessionState,
+    latestBrowserAssistSessionFromMessages,
+  ]);
+
+  useEffect(() => {
+    if (activeTheme !== "general") {
+      return;
+    }
+
+    if (browserAssistSessionState) {
+      saveBrowserAssistSessionState(projectId, sessionId, browserAssistSessionState);
+      return;
+    }
+
+    clearBrowserAssistSessionState(projectId, sessionId);
+  }, [
+    activeTheme,
+    browserAssistSessionState,
+    browserAssistStorageKey,
+    projectId,
+    sessionId,
+  ]);
+
+  const navigateBrowserAssistCanvasToUrl = useCallback(
+    async (url: string, options?: { silent?: boolean }): Promise<boolean> => {
+      if (activeTheme !== "general" || !url.trim()) {
+        return false;
+      }
+
+      const artifactMeta = asRecord(browserAssistArtifact?.meta);
+      const profileKey =
+        browserAssistSessionState?.profileKey ||
+        readFirstString(artifactMeta ? [artifactMeta] : [], [
+          "profileKey",
+          "profile_key",
+        ]) ||
+        GENERAL_BROWSER_ASSIST_PROFILE_KEY;
+      const currentUrl =
+        browserAssistSessionState?.url ||
+        readFirstString(artifactMeta ? [artifactMeta] : [], [
+          "url",
+          "launchUrl",
+        ]) ||
+        "";
+      const fallbackTitle =
+        browserAssistSessionState?.title ||
+        browserAssistArtifact?.title?.trim() ||
+        "浏览器协助";
+
+      if (currentUrl === url) {
+        setSelectedArtifactId(GENERAL_BROWSER_ASSIST_ARTIFACT_ID);
+        setLayoutMode("chat-canvas");
+        return true;
+      }
+
+      setBrowserAssistLaunching(true);
+
+      try {
+        const result = await browserExecuteAction({
+          profile_key: profileKey,
+          backend: "cdp_direct",
+          action: "navigate",
+          args: {
+            action: "goto",
+            url,
+            wait_for_page_info: true,
+          },
+          timeout_ms: 20000,
+        });
+
+        if (!result.success) {
+          throw new Error(result.error || "浏览器导航失败");
+        }
+
+        const resultData = asRecord(result.data);
+        const pageInfo =
+          asRecord(resultData?.page_info) || asRecord(resultData?.pageInfo);
+        const nextUrl =
+          readFirstString(
+            [pageInfo, resultData],
+            ["url", "target_url", "targetUrl"],
+          ) || url;
+        const nextTitle =
+          readFirstString(
+            [pageInfo, resultData],
+            ["title", "target_title", "targetTitle"],
+          ) || fallbackTitle;
+
+        commitBrowserAssistSessionState(
+          createBrowserAssistSessionState({
+            sessionId:
+              result.session_id ||
+              browserAssistSessionState?.sessionId ||
+              undefined,
+            profileKey: profileKey,
+            url: nextUrl,
+            title: nextTitle,
+            targetId:
+              result.target_id || browserAssistSessionState?.targetId || undefined,
+            transportKind: browserAssistSessionState?.transportKind,
+            lifecycleState: browserAssistSessionState?.lifecycleState || "live",
+            controlMode: browserAssistSessionState?.controlMode,
+            source: "runtime_launch",
+            updatedAt: Date.now(),
+          }),
+        );
+        setSelectedArtifactId(GENERAL_BROWSER_ASSIST_ARTIFACT_ID);
+        setLayoutMode("chat-canvas");
+
+        if (!options?.silent) {
+          toast.success(`已切换浏览器页面：${nextTitle}`);
+        }
+        return true;
+      } catch (error) {
+        if (!options?.silent) {
+          toast.error(
+            `切换浏览器页面失败: ${
+              error instanceof Error ? error.message : String(error)
+            }`,
+          );
+        }
+        return false;
+      } finally {
+        setBrowserAssistLaunching(false);
+      }
+    },
+    [
+      activeTheme,
+      browserAssistArtifact,
+      browserAssistSessionState,
+      commitBrowserAssistSessionState,
+      setSelectedArtifactId,
+    ],
+  );
+
+  const ensureBrowserAssistCanvas = useCallback(
+    async (
+      sourceText: string,
+      options?: {
+        silent?: boolean;
+        navigationMode?: "none" | "explicit-url" | "best-effort";
+      },
+    ): Promise<boolean> => {
+      if (activeTheme !== "general") {
+        return false;
+      }
+
+      const navigationMode = options?.navigationMode || "best-effort";
+      const targetUrl =
+        navigationMode === "explicit-url"
+          ? extractExplicitUrlFromText(sourceText)
+          : navigationMode === "best-effort"
+            ? resolveBrowserAssistLaunchUrl(sourceText)
+            : null;
+      const artifactMeta = asRecord(browserAssistArtifact?.meta);
+      const hasSessionContext = Boolean(
+        browserAssistSessionState?.sessionId ||
+          browserAssistSessionState?.profileKey ||
+          readFirstString(artifactMeta ? [artifactMeta] : [], [
+            "sessionId",
+            "session_id",
+            "profileKey",
+            "profile_key",
+          ]) ||
+          browserAssistArtifact,
+      );
+
+      if (hasSessionContext) {
+        setSelectedArtifactId(GENERAL_BROWSER_ASSIST_ARTIFACT_ID);
+        setLayoutMode("chat-canvas");
+        if (!targetUrl) {
+          return true;
+        }
+        return navigateBrowserAssistCanvasToUrl(targetUrl, options);
+      }
+
+      if (!targetUrl) {
+        return false;
+      }
+
+      const browserAssistScopeKey =
+        currentBrowserAssistScopeKey ||
+        resolveBrowserAssistSessionScopeKey(projectId, sessionId);
+      upsertGeneralArtifact(
+        buildPendingBrowserAssistArtifact({
+          scopeKey: browserAssistScopeKey,
+          profileKey: GENERAL_BROWSER_ASSIST_PROFILE_KEY,
+          url: targetUrl,
+          title: "浏览器协助",
+        }),
+      );
+      setSelectedArtifactId(GENERAL_BROWSER_ASSIST_ARTIFACT_ID);
+      setLayoutMode("chat-canvas");
+      setBrowserAssistLaunching(true);
+
+      try {
+        const result = await launchBrowserRuntimeAssist({
+          profile_key: GENERAL_BROWSER_ASSIST_PROFILE_KEY,
+          url: targetUrl,
+          open_window: false,
+          stream_mode: "both",
+        });
+
+        commitBrowserAssistSessionState(
+          createBrowserAssistSessionState({
+            sessionId: result.session.session_id,
+            profileKey: result.session.profile_key,
+            url:
+              result.session.last_page_info?.url?.trim() ||
+              result.session.target_url?.trim() ||
+              targetUrl,
+            title:
+              result.session.last_page_info?.title?.trim() ||
+              result.session.target_title?.trim() ||
+              "浏览器协助",
+            targetId: result.session.target_id,
+            transportKind: result.session.transport_kind,
+            lifecycleState: result.session.lifecycle_state,
+            controlMode: result.session.control_mode,
+            source: "runtime_launch",
+            updatedAt: Date.now(),
+          }),
+        );
+        setSelectedArtifactId(GENERAL_BROWSER_ASSIST_ARTIFACT_ID);
+        setLayoutMode("chat-canvas");
+
+        if (!options?.silent) {
+          toast.success(
+            `浏览器协助已启动：${
+              result.session.target_title || result.session.target_url || targetUrl
+            }`,
+          );
+        }
+        return true;
+      } catch (error) {
+        upsertGeneralArtifact(
+          buildFailedBrowserAssistArtifact({
+            scopeKey: browserAssistScopeKey,
+            profileKey: GENERAL_BROWSER_ASSIST_PROFILE_KEY,
+            url: targetUrl,
+            title: "浏览器协助",
+            error: error instanceof Error ? error.message : String(error),
+          }),
+        );
+        if (!options?.silent) {
+          toast.error(
+            `启动浏览器协助失败: ${
+              error instanceof Error ? error.message : String(error)
+            }`,
+          );
+        }
+        return false;
+      } finally {
+        setBrowserAssistLaunching(false);
+      }
+    },
+    [
+      activeTheme,
+      browserAssistArtifact,
+      browserAssistSessionState?.profileKey,
+      browserAssistSessionState?.sessionId,
+      commitBrowserAssistSessionState,
+      navigateBrowserAssistCanvasToUrl,
+      currentBrowserAssistScopeKey,
+      projectId,
+      sessionId,
+      setSelectedArtifactId,
+      upsertGeneralArtifact,
+    ],
+  );
+
+  const handleOpenBrowserAssistInCanvas = useCallback(async () => {
+    await ensureBrowserAssistCanvas(input, {
+      navigationMode: "best-effort",
+    });
+  }, [ensureBrowserAssistCanvas, input]);
+
+  useEffect(() => {
+    ensureBrowserAssistCanvasRef.current = ensureBrowserAssistCanvas;
+  }, [ensureBrowserAssistCanvas]);
+
+  useEffect(() => {
+    if (activeTheme !== "general") {
+      autoOpenedBrowserAssistSessionIdRef.current = "";
+      autoLaunchingBrowserAssistKeyRef.current = "";
+      browserAssistLaunchRequestIdRef.current += 1;
+      return;
+    }
+
+    if (
+      !browserAssistSessionState?.sessionId &&
+      !browserAssistSessionState?.profileKey
+    ) {
+      return;
+    }
+
+    const artifactMeta = asRecord(browserAssistArtifact?.meta);
+    const currentSessionId = readFirstString(
+      artifactMeta ? [artifactMeta] : [],
+      ["sessionId", "session_id"],
+    );
+    const currentProfileKey = readFirstString(
+      artifactMeta ? [artifactMeta] : [],
+      ["profileKey", "profile_key"],
+    );
+    const currentUrl = readFirstString(artifactMeta ? [artifactMeta] : [], [
+      "url",
+      "launchUrl",
+    ]);
+    const currentTargetId = readFirstString(artifactMeta ? [artifactMeta] : [], [
+      "targetId",
+      "target_id",
+    ]);
+    const currentTransportKind = readFirstString(
+      artifactMeta ? [artifactMeta] : [],
+      ["transportKind", "transport_kind"],
+    );
+    const currentLifecycleState = readFirstString(
+      artifactMeta ? [artifactMeta] : [],
+      ["lifecycleState", "lifecycle_state"],
+    );
+    const currentControlMode = readFirstString(
+      artifactMeta ? [artifactMeta] : [],
+      ["controlMode", "control_mode"],
+    );
+    const currentTitle = browserAssistArtifact?.title?.trim();
+
+    const nextArtifact = buildBrowserAssistArtifact({
+      scopeKey:
+        currentBrowserAssistScopeKey ||
+        resolveBrowserAssistSessionScopeKey(projectId, sessionId),
+      profileKey:
+        browserAssistSessionState.profileKey ||
+        currentProfileKey ||
+        GENERAL_BROWSER_ASSIST_PROFILE_KEY,
+      browserSessionId:
+        browserAssistSessionState.sessionId || currentSessionId || "",
+      url:
+        browserAssistSessionState.url || currentUrl || "https://www.google.com",
+      title:
+        browserAssistSessionState.title || currentTitle || "浏览器协助",
+      targetId: browserAssistSessionState.targetId || currentTargetId,
+      transportKind:
+        browserAssistSessionState.transportKind || currentTransportKind,
+      lifecycleState:
+        browserAssistSessionState.lifecycleState || currentLifecycleState,
+      controlMode: browserAssistSessionState.controlMode || currentControlMode,
+    });
+
+    const nextMeta = asRecord(nextArtifact.meta);
+    const nextSessionId = readFirstString(nextMeta ? [nextMeta] : [], [
+      "sessionId",
+      "session_id",
+    ]);
+    const nextProfileKey = readFirstString(nextMeta ? [nextMeta] : [], [
+      "profileKey",
+      "profile_key",
+    ]);
+    const nextUrl = readFirstString(nextMeta ? [nextMeta] : [], [
+      "url",
+      "launchUrl",
+    ]);
+    const nextTargetId = readFirstString(nextMeta ? [nextMeta] : [], [
+      "targetId",
+      "target_id",
+    ]);
+    const nextTransportKind = readFirstString(nextMeta ? [nextMeta] : [], [
+      "transportKind",
+      "transport_kind",
+    ]);
+    const nextLifecycleState = readFirstString(nextMeta ? [nextMeta] : [], [
+      "lifecycleState",
+      "lifecycle_state",
+    ]);
+    const nextControlMode = readFirstString(nextMeta ? [nextMeta] : [], [
+      "controlMode",
+      "control_mode",
+    ]);
+    const currentScopeKey = resolveBrowserAssistArtifactScopeKey(
+      browserAssistArtifact,
+    );
+    const nextScopeKey = resolveBrowserAssistArtifactScopeKey(nextArtifact);
+
+    const shouldUpsertArtifact =
+      !browserAssistArtifact ||
+      currentScopeKey !== nextScopeKey ||
+      currentSessionId !== nextSessionId ||
+      currentProfileKey !== nextProfileKey ||
+      currentUrl !== nextUrl ||
+      currentTargetId !== nextTargetId ||
+      currentTransportKind !== nextTransportKind ||
+      currentLifecycleState !== nextLifecycleState ||
+      currentControlMode !== nextControlMode ||
+      currentTitle !== nextArtifact.title;
+
+    if (shouldUpsertArtifact) {
+      upsertGeneralArtifact(nextArtifact);
+    }
+
+    const autoOpenKey =
+      browserAssistSessionState.sessionId ||
+      `${
+        browserAssistSessionState.profileKey || GENERAL_BROWSER_ASSIST_PROFILE_KEY
+      }:${browserAssistSessionState.url || currentUrl || "pending"}`;
+    if (autoOpenedBrowserAssistSessionIdRef.current !== autoOpenKey) {
+      autoOpenedBrowserAssistSessionIdRef.current = autoOpenKey;
+      setSelectedArtifactId(nextArtifact.id);
+      setLayoutMode("chat-canvas");
+    }
+  }, [
+    activeTheme,
+    browserAssistArtifact,
+    currentBrowserAssistScopeKey,
+    browserAssistSessionState,
+    projectId,
+    sessionId,
+    setSelectedArtifactId,
+    upsertGeneralArtifact,
+  ]);
+
+  useEffect(() => {
+    if (activeTheme !== "general") {
+      autoLaunchingBrowserAssistKeyRef.current = "";
+      browserAssistLaunchRequestIdRef.current += 1;
+      return;
+    }
+
+    if (
+      !browserAssistSessionState?.sessionId &&
+      !browserAssistSessionState?.profileKey
+    ) {
+      return;
+    }
+
+    const nextSessionId = browserAssistSessionState.sessionId || "";
+    const nextProfileKey =
+      browserAssistSessionState.profileKey || GENERAL_BROWSER_ASSIST_PROFILE_KEY;
+    const nextUrl = browserAssistSessionState.url || "https://www.google.com";
+    const nextTitle = browserAssistSessionState.title || "浏览器协助";
+
+    if (nextSessionId || !nextProfileKey || !nextUrl) {
+      return;
+    }
+
+    const launchKey = `${nextProfileKey}:${nextUrl}`;
+    if (autoLaunchingBrowserAssistKeyRef.current === launchKey) {
+      return;
+    }
+    autoLaunchingBrowserAssistKeyRef.current = launchKey;
+    const browserAssistScopeKey =
+      currentBrowserAssistScopeKey ||
+      resolveBrowserAssistSessionScopeKey(projectId, sessionId);
+    upsertGeneralArtifact(
+      buildPendingBrowserAssistArtifact({
+        scopeKey: browserAssistScopeKey,
+        profileKey: nextProfileKey,
+        url: nextUrl,
+        title: nextTitle,
+      }),
+    );
+    setSelectedArtifactId(GENERAL_BROWSER_ASSIST_ARTIFACT_ID);
+    setLayoutMode("chat-canvas");
+    const launchRequestId = browserAssistLaunchRequestIdRef.current + 1;
+    browserAssistLaunchRequestIdRef.current = launchRequestId;
+    void (async () => {
+      try {
+        setBrowserAssistLaunching(true);
+        const result = await launchBrowserRuntimeAssist({
+          profile_key: nextProfileKey,
+          url: nextUrl,
+          open_window: false,
+          stream_mode: "both",
+        });
+        if (browserAssistLaunchRequestIdRef.current !== launchRequestId) {
+          return;
+        }
+
+        commitBrowserAssistSessionState(
+          createBrowserAssistSessionState({
+            sessionId: result.session.session_id,
+            profileKey: result.session.profile_key,
+            url:
+              result.session.last_page_info?.url?.trim() ||
+              result.session.target_url?.trim() ||
+              nextUrl,
+            title:
+              result.session.last_page_info?.title?.trim() ||
+              result.session.target_title?.trim() ||
+              nextTitle,
+            targetId: result.session.target_id,
+            transportKind: result.session.transport_kind,
+            lifecycleState: result.session.lifecycle_state,
+            controlMode: result.session.control_mode,
+            source: "runtime_launch",
+            updatedAt: Date.now(),
+          }),
+        );
+        setSelectedArtifactId(GENERAL_BROWSER_ASSIST_ARTIFACT_ID);
+        setLayoutMode("chat-canvas");
+      } catch (error) {
+        upsertGeneralArtifact(
+          buildFailedBrowserAssistArtifact({
+            scopeKey: browserAssistScopeKey,
+            profileKey: nextProfileKey,
+            url: nextUrl,
+            title: nextTitle,
+            error: error instanceof Error ? error.message : String(error),
+          }),
+        );
+        autoLaunchingBrowserAssistKeyRef.current = "";
+        console.warn("[AgentChatPage] 自动拉起浏览器协助实时会话失败:", error);
+      } finally {
+        if (browserAssistLaunchRequestIdRef.current === launchRequestId) {
+          setBrowserAssistLaunching(false);
+        }
+      }
+    })();
+  }, [
+    activeTheme,
+    browserAssistSessionState,
+    commitBrowserAssistSessionState,
+    currentBrowserAssistScopeKey,
+    projectId,
+    sessionId,
+    setSelectedArtifactId,
+    upsertGeneralArtifact,
+  ]);
+
   // 处理文件写入 - 同名文件更新内容，不同名文件独立保存
   const handleWriteFile = useCallback(
-    (
-      content: string,
-      fileName: string,
-      context?: WriteArtifactContext,
-    ) => {
+    (content: string, fileName: string, context?: WriteArtifactContext) => {
       console.log(
         "[AgentChatPage] 收到文件写入:",
         fileName,
@@ -4966,10 +6197,28 @@ export function AgentChatPage({
               },
             });
 
-        if (nextContent.length > 0) {
-          saveSessionFile(fileName, nextContent).catch((error) => {
-            console.error("[AgentChatPage] 持久化 artifact 失败:", error);
+        const syncResource = () => {
+          if (nextArtifact.status !== "complete") {
+            return;
+          }
+
+          void syncGeneralArtifactToResource({
+            rawFilePath: resolveArtifactFilePath(nextArtifact),
+            preferredName: nextArtifact.title,
           });
+        };
+
+        if (nextContent.length > 0) {
+          void saveSessionFile(fileName, nextContent)
+            .then(() => {
+              syncResource();
+            })
+            .catch((error) => {
+              console.error("[AgentChatPage] 持久化 artifact 失败:", error);
+              syncResource();
+            });
+        } else {
+          syncResource();
         }
 
         upsertGeneralArtifact(nextArtifact);
@@ -5253,7 +6502,8 @@ export function AgentChatPage({
             }
             return {
               ...initialDocumentState,
-              platform: socialArtifact.platform || initialDocumentState.platform,
+              platform:
+                socialArtifact.platform || initialDocumentState.platform,
               versions: initialDocumentState.versions.map((version) => ({
                 ...version,
                 description: effectiveVersionDescription,
@@ -5292,7 +6542,8 @@ export function AgentChatPage({
             nextVersions[existingIndex] = {
               ...currentVersion,
               content,
-              description: currentVersion.description || effectiveVersionDescription,
+              description:
+                currentVersion.description || effectiveVersionDescription,
               metadata: {
                 ...(currentVersion.metadata || {}),
                 ...(baseVersionMetadata || {}),
@@ -5321,7 +6572,8 @@ export function AgentChatPage({
               metadata: {
                 ...(baseVersionMetadata || {}),
                 parentVersionId:
-                  parentVersion && parentVersion.id !== effectiveDocumentVersionId
+                  parentVersion &&
+                  parentVersion.id !== effectiveDocumentVersionId
                     ? parentVersion.id
                     : undefined,
                 parentArtifactId: parentVersion?.metadata?.artifactId,
@@ -5363,6 +6615,7 @@ export function AgentChatPage({
       projectId,
       saveSessionFile,
       sessionId,
+      syncGeneralArtifactToResource,
       themeWorkbenchActiveQueueItem,
       upsertGeneralArtifact,
       upsertNovelCanvasState,
@@ -5798,9 +7051,8 @@ export function AgentChatPage({
         // 同步创建后端工作流（不阻塞触发）
         void (async () => {
           try {
-            const { contentWorkflowApi } = await import(
-              "@/lib/api/content-workflow"
-            );
+            const { contentWorkflowApi } =
+              await import("@/lib/api/content-workflow");
             const themeForApi =
               mappedTheme as import("@/lib/api/content-workflow").ThemeType;
             const modeForApi =
@@ -5899,9 +7151,8 @@ export function AgentChatPage({
 
     void (async () => {
       try {
-        const { contentWorkflowApi } = await import(
-          "@/lib/api/content-workflow"
-        );
+        const { contentWorkflowApi } =
+          await import("@/lib/api/content-workflow");
         const workflow = await contentWorkflowApi.getByContent(contentId);
         if (workflow) {
           const completedCount = workflow.steps.filter(
@@ -5938,7 +7189,7 @@ export function AgentChatPage({
   }, []);
 
   // 主题工作台始终使用聊天布局与浮层输入，不走旧 EmptyState 输入流程
-  const showChatLayout = hasMessages || isThemeWorkbench;
+  const showChatLayout = !isNewTaskEntry && (hasMessages || isThemeWorkbench);
   const shouldHideThemeWorkbenchInputForTheme = shouldUseCompactThemeWorkbench;
   const shouldShowThemeWorkbenchSidebarForTheme =
     !shouldUseCompactThemeWorkbench;
@@ -6065,7 +7316,9 @@ export function AgentChatPage({
         historyHasMore={themeWorkbenchHistoryHasMore}
         historyLoading={themeWorkbenchHistoryLoading}
         onLoadMoreHistory={
-          themeWorkbenchHistoryHasMore ? handleLoadMoreThemeWorkbenchHistory : undefined
+          themeWorkbenchHistoryHasMore
+            ? handleLoadMoreThemeWorkbenchHistory
+            : undefined
         }
         skillDetailMap={themeWorkbenchSkillDetailMap}
         headerActionSlot={themeWorkbenchHarnessHeaderAction}
@@ -6235,6 +7488,11 @@ export function AgentChatPage({
       : undefined;
   }, [selectedFileId, visibleTaskFiles]);
 
+  const activeCanvasTaskFile = useMemo(() => {
+    return resolveCanvasTaskFileTarget(visibleTaskFiles, visibleSelectedFileId)
+      .targetFile;
+  }, [visibleSelectedFileId, visibleTaskFiles]);
+
   const styleActionContent = useMemo(
     () =>
       extractStyleActionContent({
@@ -6378,10 +7636,12 @@ export function AgentChatPage({
         onTaskFileClick={handleTaskFileClick}
         characters={projectMemory?.characters || []}
         skills={skills}
+        isSkillsLoading={skillsLoading}
         toolStates={chatToolPreferences}
         onToolStatesChange={setChatToolPreferences}
         onSelectCharacter={handleSelectCharacter}
         onNavigateToSettings={handleNavigateToSkillSettings}
+        onRefreshSkills={handleRefreshSkills}
         queuedTurns={queuedTurns}
         onRemoveQueuedTurn={removeQueuedTurn}
       />
@@ -6394,6 +7654,7 @@ export function AgentChatPage({
       handleClearMessages,
       handleManageProviders,
       handleNavigateToSkillSettings,
+      handleRefreshSkills,
       handleSelectCharacter,
       handleSend,
       handleTaskFileClick,
@@ -6414,6 +7675,7 @@ export function AgentChatPage({
       setModel,
       setProviderType,
       skills,
+      skillsLoading,
       steps,
       stopSending,
       visibleSelectedFileId,
@@ -6428,7 +7690,7 @@ export function AgentChatPage({
   );
 
   const generalWorkbenchDialog = useMemo(() => {
-    if (chatMode !== "general" || isThemeWorkbench) {
+    if (isNewTaskEntry || chatMode !== "general" || isThemeWorkbench) {
       return null;
     }
 
@@ -6475,12 +7737,421 @@ export function AgentChatPage({
     harnessEnvironment,
     harnessState,
     isSending,
+    isNewTaskEntry,
     isThemeWorkbench,
     mappedTheme,
     subAgentRuntime,
   ]);
 
+  const canvasRenderTheme = useMemo(
+    () =>
+      (shouldBootstrapCanvasOnEntry
+        ? normalizedEntryTheme
+        : mappedTheme) as ThemeType,
+    [mappedTheme, normalizedEntryTheme, shouldBootstrapCanvasOnEntry],
+  );
+
+  const shouldShowCanvasLoadingState = useMemo(
+    () =>
+      (!canvasState &&
+        (shouldBootstrapCanvasOnEntry ||
+          isInitialContentLoading ||
+          Boolean(initialContentLoadError))) ||
+      (resolvedCanvasState?.type === "document" &&
+        !resolvedCanvasState.content.trim() &&
+        (isInitialContentLoading || Boolean(initialContentLoadError))),
+    [
+      canvasState,
+      initialContentLoadError,
+      isInitialContentLoading,
+      resolvedCanvasState,
+      shouldBootstrapCanvasOnEntry,
+    ],
+  );
+
+  const canvasWorkbenchDefaultPreview =
+    useMemo<CanvasWorkbenchDefaultPreview | null>(() => {
+      const workspaceRoot = project?.rootPath || null;
+
+      if (canvasRenderTheme === "general") {
+        if (!generalCanvasState.isOpen || !generalCanvasState.content.trim()) {
+          return null;
+        }
+
+        const filePath = generalCanvasState.filename?.trim() || undefined;
+        return {
+          title: filePath ? extractFileNameFromPath(filePath) : "当前画布草稿",
+          content: generalCanvasState.content,
+          filePath,
+          absolutePath: resolveAbsoluteWorkspacePath(workspaceRoot, filePath),
+          previousContent: null,
+        };
+      }
+
+      if (!resolvedCanvasState || isCanvasStateEmpty(resolvedCanvasState)) {
+        return null;
+      }
+
+      const taskFile = activeCanvasTaskFile;
+      const taskSelectionKey = taskFile ? `task:${taskFile.id}` : undefined;
+
+      if (resolvedCanvasState.type === "document") {
+        const currentVersion =
+          resolvedCanvasState.versions.find(
+            (item) => item.id === resolvedCanvasState.currentVersionId,
+          ) ||
+          resolvedCanvasState.versions[
+            resolvedCanvasState.versions.length - 1
+          ] ||
+          null;
+        const filePath =
+          taskFile?.name || currentVersion?.metadata?.sourceFileName;
+
+        return {
+          selectionKey:
+            taskSelectionKey ||
+            (currentVersion ? `version:${currentVersion.id}` : undefined),
+          title: filePath ? extractFileNameFromPath(filePath) : "当前文稿",
+          content: resolvedCanvasState.content,
+          filePath,
+          absolutePath: resolveAbsoluteWorkspacePath(workspaceRoot, filePath),
+          previousContent: resolvePreviousDocumentVersionContent(
+            currentVersion,
+            resolvedCanvasState.versions,
+          ),
+        };
+      }
+
+      const filePath = taskFile?.name;
+      return {
+        selectionKey: taskSelectionKey,
+        title: filePath ? extractFileNameFromPath(filePath) : "当前画布",
+        content: serializeCanvasStateForSync(resolvedCanvasState),
+        filePath,
+        absolutePath: resolveAbsoluteWorkspacePath(workspaceRoot, filePath),
+        previousContent: null,
+      };
+    }, [
+      activeCanvasTaskFile,
+      canvasRenderTheme,
+      generalCanvasState.content,
+      generalCanvasState.filename,
+      generalCanvasState.isOpen,
+      project?.rootPath,
+      resolvedCanvasState,
+    ]);
+
+  const handleOpenCanvasWorkbenchPath = useCallback(async (path: string) => {
+    try {
+      await openPathWithDefaultApp(path);
+    } catch (error) {
+      toast.error(
+        `打开文件失败: ${error instanceof Error ? error.message : String(error)}`,
+      );
+    }
+  }, []);
+
+  const handleRevealCanvasWorkbenchPath = useCallback(async (path: string) => {
+    try {
+      await revealPathInFinder(path);
+    } catch (error) {
+      toast.error(
+        `定位文件失败: ${error instanceof Error ? error.message : String(error)}`,
+      );
+    }
+  }, []);
+
+  const renderArtifactWorkbenchPreview = useCallback(
+    (artifact: Artifact, stackedWorkbenchTrigger?: ReactNode) => {
+      const isLiveSelectedArtifact =
+        currentCanvasArtifact?.id === artifact.id &&
+        displayedCanvasArtifact !== null;
+      const toolbarArtifact =
+        isLiveSelectedArtifact && currentCanvasArtifact
+          ? currentCanvasArtifact
+          : artifact;
+      const previewArtifact =
+        isLiveSelectedArtifact && displayedCanvasArtifact
+          ? displayedCanvasArtifact
+          : artifact;
+      const isBrowserAssistArtifact = previewArtifact.type === "browser_assist";
+
+      if (isBrowserAssistArtifact) {
+        return wrapPreviewWithWorkbenchTrigger(
+          <div className="relative h-full min-h-0 overflow-hidden bg-background">
+            <ArtifactRenderer
+              artifact={previewArtifact}
+              isStreaming={Boolean(
+                isLiveSelectedArtifact &&
+                currentCanvasArtifact &&
+                displayedCanvasArtifact &&
+                currentCanvasArtifact.id === displayedCanvasArtifact.id &&
+                currentCanvasArtifact.id === previewArtifact.id &&
+                currentCanvasArtifact.status === "streaming",
+              )}
+              hideToolbar={true}
+              viewMode={artifactViewMode}
+              previewSize={artifactPreviewSize}
+              tone="light"
+            />
+            {isLiveSelectedArtifact && artifactDisplayState.overlay ? (
+              <ArtifactCanvasOverlay overlay={artifactDisplayState.overlay} />
+            ) : null}
+          </div>,
+          stackedWorkbenchTrigger,
+        );
+      }
+
+      return (
+        <div className="flex h-full flex-col rounded-[14px] border border-border bg-background">
+          <div className="flex min-h-0 min-w-0 flex-1 flex-col">
+            <ArtifactToolbar
+              artifact={toolbarArtifact}
+              onClose={handleCloseCanvas}
+              isStreaming={Boolean(
+                isLiveSelectedArtifact &&
+                currentCanvasArtifact?.status === "streaming",
+              )}
+              viewMode={artifactViewMode}
+              onViewModeChange={setArtifactViewMode}
+              previewSize={artifactPreviewSize}
+              onPreviewSizeChange={setArtifactPreviewSize}
+              tone="light"
+              displayBadgeLabel={
+                isLiveSelectedArtifact &&
+                artifactDisplayState.showPreviousVersionBadge
+                  ? "预览上一版本"
+                  : undefined
+              }
+              actionsSlot={stackedWorkbenchTrigger}
+            />
+            <div className="relative flex-1 overflow-auto bg-background">
+              <ArtifactRenderer
+                artifact={previewArtifact}
+                isStreaming={Boolean(
+                  isLiveSelectedArtifact &&
+                  currentCanvasArtifact &&
+                  displayedCanvasArtifact &&
+                  currentCanvasArtifact.id === displayedCanvasArtifact.id &&
+                  currentCanvasArtifact.id === previewArtifact.id &&
+                  currentCanvasArtifact.status === "streaming",
+                )}
+                hideToolbar={true}
+                viewMode={artifactViewMode}
+                previewSize={artifactPreviewSize}
+                tone="light"
+              />
+              {isLiveSelectedArtifact && artifactDisplayState.overlay ? (
+                <ArtifactCanvasOverlay overlay={artifactDisplayState.overlay} />
+              ) : null}
+            </div>
+          </div>
+        </div>
+      );
+    },
+    [
+      artifactDisplayState.overlay,
+      artifactDisplayState.showPreviousVersionBadge,
+      artifactPreviewSize,
+      artifactViewMode,
+      currentCanvasArtifact,
+      displayedCanvasArtifact,
+      handleCloseCanvas,
+      setArtifactPreviewSize,
+      setArtifactViewMode,
+    ],
+  );
+
+  const renderLiveCanvasPreview = useCallback((stackedWorkbenchTrigger?: ReactNode) => {
+    if (
+      canvasRenderTheme === "general" &&
+      currentCanvasArtifact &&
+      displayedCanvasArtifact
+    ) {
+      return renderArtifactWorkbenchPreview(
+        currentCanvasArtifact,
+        stackedWorkbenchTrigger,
+      );
+    }
+
+    if (canvasRenderTheme === "general") {
+      if (generalCanvasState.isOpen) {
+        return (
+          <GeneralCanvasPanel
+            state={generalCanvasState}
+            onClose={handleCloseCanvas}
+            onContentChange={(content) =>
+              setGeneralCanvasState((prev) => ({ ...prev, content }))
+            }
+            toolbarActions={stackedWorkbenchTrigger}
+          />
+        );
+      }
+      return null;
+    }
+
+    if (shouldShowCanvasLoadingState) {
+      return wrapPreviewWithWorkbenchTrigger(
+        (
+        <div
+          data-testid="canvas-loading-state"
+          className="flex h-full items-center justify-center rounded-[14px] border border-dashed border-border bg-background text-sm text-muted-foreground"
+        >
+          {isInitialContentLoading
+            ? "正在加载文稿内容..."
+            : initialContentLoadError || "正在准备文稿画布..."}
+        </div>
+        ),
+        stackedWorkbenchTrigger,
+      );
+    }
+
+    if (!resolvedCanvasState) {
+      return null;
+    }
+
+    return wrapPreviewWithWorkbenchTrigger(
+      (
+      <CanvasFactory
+        theme={canvasRenderTheme}
+        state={resolvedCanvasState}
+        onStateChange={setCanvasState}
+        onBackHome={handleBackHome}
+        onClose={handleCloseCanvas}
+        isStreaming={isSending}
+        onSelectionTextChange={handleCanvasSelectionTextChange}
+        projectId={projectId ?? null}
+        contentId={contentId ?? null}
+        autoImageTopic={project?.name || undefined}
+        autoContinueProviderType={providerType}
+        onAutoContinueProviderTypeChange={setProviderType}
+        autoContinueModel={model}
+        onAutoContinueModelChange={setModel}
+        autoContinueThinkingEnabled={chatToolPreferences.thinking}
+        onAutoContinueThinkingEnabledChange={
+          handleDocumentThinkingEnabledChange
+        }
+        onAutoContinueRun={handleDocumentAutoContinueRun}
+        onAddImage={handleAddImage}
+        onImportDocument={handleImportDocument}
+        onContentReviewRun={handleDocumentContentReviewRun}
+        onTextStylizeRun={handleDocumentTextStylizeRun}
+        documentContentReviewPlacement={
+          preferContentReviewInRightRail ? "external-rail" : "inline"
+        }
+        novelControls={
+          resolvedCanvasState.type === "novel"
+            ? {
+                useExternalToolbar: true,
+                chapterListCollapsed: novelChapterListCollapsed,
+                onChapterListCollapsedChange: setNovelChapterListCollapsed,
+              }
+            : null
+        }
+      />
+      ),
+      stackedWorkbenchTrigger,
+    );
+  }, [
+    canvasRenderTheme,
+    chatToolPreferences.thinking,
+    contentId,
+    currentCanvasArtifact,
+    displayedCanvasArtifact,
+    generalCanvasState,
+    handleAddImage,
+    handleBackHome,
+    handleCloseCanvas,
+    handleCanvasSelectionTextChange,
+    handleDocumentAutoContinueRun,
+    handleDocumentContentReviewRun,
+    handleDocumentThinkingEnabledChange,
+    handleDocumentTextStylizeRun,
+    handleImportDocument,
+    initialContentLoadError,
+    isInitialContentLoading,
+    isSending,
+    model,
+    novelChapterListCollapsed,
+    preferContentReviewInRightRail,
+    project?.name,
+    projectId,
+    providerType,
+    renderArtifactWorkbenchPreview,
+    resolvedCanvasState,
+    setModel,
+    setProviderType,
+    shouldShowCanvasLoadingState,
+  ]);
+
+  const renderCanvasWorkbenchPreview = useCallback(
+    (
+      target: CanvasWorkbenchPreviewTarget,
+      options?: {
+        stackedWorkbenchTrigger?: ReactNode;
+      },
+    ) => {
+      switch (target.kind) {
+        case "default-canvas":
+          return renderLiveCanvasPreview(options?.stackedWorkbenchTrigger);
+        case "artifact":
+        case "synthetic-artifact":
+          return renderArtifactWorkbenchPreview(
+            target.artifact,
+            options?.stackedWorkbenchTrigger,
+          );
+        case "loading":
+          return wrapPreviewWithWorkbenchTrigger(
+            (
+            <div
+              data-testid="canvas-workbench-preview-loading"
+              className="flex h-full items-center justify-center rounded-[14px] border border-dashed border-border bg-background text-sm text-muted-foreground"
+            >
+              正在准备预览...
+            </div>
+            ),
+            options?.stackedWorkbenchTrigger,
+          );
+        case "unsupported":
+          return wrapPreviewWithWorkbenchTrigger(
+            (
+            <div
+              data-testid="canvas-workbench-preview-unsupported"
+              className="flex h-full items-center justify-center rounded-[14px] border border-dashed border-border bg-background px-6 text-sm text-muted-foreground"
+            >
+              {target.reason}
+            </div>
+            ),
+            options?.stackedWorkbenchTrigger,
+          );
+        case "empty":
+          return wrapPreviewWithWorkbenchTrigger(
+            (
+            <div
+              data-testid="canvas-workbench-preview-empty"
+              className="flex h-full items-center justify-center rounded-[14px] border border-dashed border-border bg-background text-sm text-muted-foreground"
+            >
+              暂无可预览内容
+            </div>
+            ),
+            options?.stackedWorkbenchTrigger,
+          );
+        default:
+          return null;
+      }
+    },
+    [
+      renderArtifactWorkbenchPreview,
+      renderLiveCanvasPreview,
+    ],
+  );
+
   const shouldRenderInlineA2UI = isContentCreationMode;
+  const shouldShowClawEmptyState =
+    !isNewTaskEntry &&
+    !showChatLayout &&
+    !isThemeWorkbench &&
+    !sessionId;
 
   // 聊天区域内容
   const chatContent = useMemo(
@@ -6570,78 +8241,110 @@ export function AgentChatPage({
                 ) : null}
               </>
             </ChatContent>
+          ) : shouldShowClawEmptyState ? (
+            <div
+              data-testid="claw-empty-state"
+              className="flex flex-1 items-center justify-center px-6"
+            >
+              <div className="w-full max-w-[520px] rounded-[28px] border border-slate-200 bg-white/92 p-8 text-center shadow-sm shadow-slate-950/5 dark:border-white/10 dark:bg-[#14171d]">
+                <div className="mx-auto flex h-14 w-14 items-center justify-center rounded-2xl bg-slate-100 text-slate-500 dark:bg-white/10 dark:text-slate-300">
+                  <Clock3 className="h-6 w-6" />
+                </div>
+                <div className="mt-5 text-lg font-semibold text-slate-900 dark:text-slate-100">
+                  {topics.length > 0 ? "请选择任务继续工作" : "还没有可继续的任务"}
+                </div>
+                <p className="mt-2 text-sm leading-7 text-slate-500 dark:text-slate-400">
+                  {topics.length > 0
+                    ? "从左侧任务列表恢复上下文，或新建一个任务入口。"
+                    : "先从“新建任务”输入需求，创建后这里会显示最近任务。"}
+                </p>
+                <button
+                  type="button"
+                  data-testid="claw-empty-new-task"
+                  onClick={handleBackHome}
+                  className="mt-6 inline-flex h-11 items-center justify-center rounded-full bg-slate-900 px-5 text-sm font-medium text-white transition hover:bg-slate-800 dark:bg-white dark:text-slate-900 dark:hover:bg-slate-100"
+                >
+                  新建任务
+                </button>
+              </div>
+            </div>
           ) : (
-              <EmptyState
-                input={input}
-                setInput={setInput}
-                onSend={(text, sendExecutionStrategy, images) => {
-                  handleSend(
-                    images || [],
-                    chatToolPreferences.webSearch,
-                    chatToolPreferences.thinking,
-                    text,
-                    sendExecutionStrategy,
-                  );
-                }}
-                providerType={providerType}
-                setProviderType={setProviderType}
-                model={model}
-                setModel={setModel}
-                executionStrategy={executionStrategy}
-                setExecutionStrategy={setExecutionStrategy}
-                onManageProviders={handleManageProviders}
-                webSearchEnabled={chatToolPreferences.webSearch}
-                onWebSearchEnabledChange={(enabled) =>
-                  setChatToolPreferences((prev) => ({
-                    ...prev,
-                    webSearch: enabled,
-                  }))
+            <EmptyState
+              input={input}
+              setInput={setInput}
+              onSend={(text, sendExecutionStrategy, images) => {
+                handleSend(
+                  images || [],
+                  chatToolPreferences.webSearch,
+                  chatToolPreferences.thinking,
+                  text,
+                  sendExecutionStrategy,
+                );
+              }}
+              providerType={providerType}
+              setProviderType={setProviderType}
+              model={model}
+              setModel={setModel}
+              executionStrategy={executionStrategy}
+              setExecutionStrategy={setExecutionStrategy}
+              onManageProviders={handleManageProviders}
+              webSearchEnabled={chatToolPreferences.webSearch}
+              onWebSearchEnabledChange={(enabled) =>
+                setChatToolPreferences((prev) => ({
+                  ...prev,
+                  webSearch: enabled,
+                }))
+              }
+              thinkingEnabled={chatToolPreferences.thinking}
+              onThinkingEnabledChange={(enabled) =>
+                setChatToolPreferences((prev) => ({
+                  ...prev,
+                  thinking: enabled,
+                }))
+              }
+              taskEnabled={chatToolPreferences.task}
+              onTaskEnabledChange={(enabled) =>
+                setChatToolPreferences((prev) => ({
+                  ...prev,
+                  task: enabled,
+                }))
+              }
+              subagentEnabled={chatToolPreferences.subagent}
+              onSubagentEnabledChange={(enabled) =>
+                setChatToolPreferences((prev) => ({
+                  ...prev,
+                  subagent: enabled,
+                }))
+              }
+              creationMode={creationMode}
+              onCreationModeChange={setCreationMode}
+              activeTheme={activeTheme}
+              onThemeChange={(theme) => {
+                if (!lockTheme) {
+                  setActiveTheme(theme);
                 }
-                thinkingEnabled={chatToolPreferences.thinking}
-                onThinkingEnabledChange={(enabled) =>
-                  setChatToolPreferences((prev) => ({
-                    ...prev,
-                    thinking: enabled,
-                  }))
-                }
-                taskEnabled={chatToolPreferences.task}
-                onTaskEnabledChange={(enabled) =>
-                  setChatToolPreferences((prev) => ({
-                    ...prev,
-                    task: enabled,
-                  }))
-                }
-                subagentEnabled={chatToolPreferences.subagent}
-                onSubagentEnabledChange={(enabled) =>
-                  setChatToolPreferences((prev) => ({
-                    ...prev,
-                    subagent: enabled,
-                  }))
-                }
-                creationMode={creationMode}
-                onCreationModeChange={setCreationMode}
-                activeTheme={activeTheme}
-                onThemeChange={(theme) => {
-                  if (!lockTheme) {
-                    setActiveTheme(theme);
-                  }
-                }}
-                showThemeTabs={false}
-                hasCanvasContent={
-                  activeTheme === "general"
-                    ? artifacts.length > 0 || Boolean(generalCanvasState.content?.trim())
-                    : !isCanvasStateEmpty(resolvedCanvasState)
-                }
-                hasContentId={Boolean(contentId)}
-                selectedText={selectedText}
-                onRecommendationClick={(shortLabel, fullPrompt) => {
-                  setInput(fullPrompt);
-                }}
-                characters={projectMemory?.characters || []}
-                skills={skills}
-                onNavigateToSettings={handleNavigateToSkillSettings}
-              />
-            )}
+              }}
+              showThemeTabs={false}
+              hasCanvasContent={
+                activeTheme === "general"
+                  ? artifacts.length > 0 ||
+                    Boolean(generalCanvasState.content?.trim())
+                  : !isCanvasStateEmpty(resolvedCanvasState)
+              }
+              hasContentId={Boolean(contentId)}
+              selectedText={selectedText}
+              onRecommendationClick={(shortLabel, fullPrompt) => {
+                setInput(fullPrompt);
+              }}
+              characters={projectMemory?.characters || []}
+              skills={skills}
+              isSkillsLoading={skillsLoading}
+              onNavigateToSettings={handleNavigateToSkillSettings}
+              onRefreshSkills={handleRefreshSkills}
+              onLaunchBrowserAssist={handleOpenBrowserAssistInCanvas}
+              browserAssistLoading={browserAssistLaunching}
+            />
+          )}
 
           {showChatLayout && (
             <>
@@ -6682,6 +8385,7 @@ export function AgentChatPage({
     [
       activeTheme,
       artifacts.length,
+      browserAssistLaunching,
       chatToolPreferences,
       contentId,
       contextWorkspace.enabled,
@@ -6698,10 +8402,13 @@ export function AgentChatPage({
       goToStep,
       handleA2UISubmit,
       handleArtifactClick,
+      handleBackHome,
       handleCodeBlockClick,
       handleFileClick,
       handleManageProviders,
       handleNavigateToSkillSettings,
+      handleOpenBrowserAssistInCanvas,
+      handleRefreshSkills,
       handlePermissionResponse,
       handleSelectWorkspaceDirectory,
       handleSend,
@@ -6727,6 +8434,7 @@ export function AgentChatPage({
       setProviderType,
       setWorkspaceHealthError,
       shouldCollapseCodeBlocks,
+      shouldShowClawEmptyState,
       selectedText,
       setEntryBannerVisible,
       showChatLayout,
@@ -6737,7 +8445,9 @@ export function AgentChatPage({
       runtimeStyleSelection,
       styleActionsDisabled,
       skills,
+      skillsLoading,
       steps,
+      topics.length,
       workspaceHealthError,
       workspacePathMissing,
       resolvedCanvasState,
@@ -6748,171 +8458,50 @@ export function AgentChatPage({
 
   // 画布区域内容
   const canvasContent = useMemo(() => {
-    const renderCanvasTheme = (
-      shouldBootstrapCanvasOnEntry ? normalizedEntryTheme : mappedTheme
-    ) as ThemeType;
-
-    // 如果有 artifact，优先使用 ArtifactRenderer 渲染
-    if (
-      renderCanvasTheme === "general" &&
-      currentCanvasArtifact &&
-      displayedCanvasArtifact
-    ) {
-      return (
-        <div className="flex h-full flex-col rounded-[14px] border border-border bg-background">
-          <div className="flex min-h-0 min-w-0 flex-1 flex-col">
-            <ArtifactToolbar
-              artifact={currentCanvasArtifact}
-              onClose={handleCloseCanvas}
-              isStreaming={currentCanvasArtifact.status === "streaming"}
-              viewMode={artifactViewMode}
-              onViewModeChange={setArtifactViewMode}
-              previewSize={artifactPreviewSize}
-              onPreviewSizeChange={setArtifactPreviewSize}
-              tone="light"
-              displayBadgeLabel={
-                artifactDisplayState.showPreviousVersionBadge
-                  ? "预览上一版本"
-                  : undefined
-              }
-            />
-            <div className="relative flex-1 overflow-auto bg-background">
-              <ArtifactRenderer
-                artifact={displayedCanvasArtifact}
-                isStreaming={
-                  currentCanvasArtifact.id === displayedCanvasArtifact.id &&
-                  currentCanvasArtifact.status === "streaming"
-                }
-                hideToolbar={true}
-                viewMode={artifactViewMode}
-                previewSize={artifactPreviewSize}
-                tone="light"
-              />
-              {artifactDisplayState.overlay ? (
-                <ArtifactCanvasOverlay overlay={artifactDisplayState.overlay} />
-              ) : null}
-            </div>
-          </div>
-        </div>
-      );
-    }
-
-    // General 主题使用专门的预览画布（无 artifact 时）
-    if (renderCanvasTheme === "general") {
-      if (generalCanvasState.isOpen) {
-        return (
-          <GeneralCanvasPanel
-            state={generalCanvasState}
-            onClose={handleCloseCanvas}
-            onContentChange={(content) =>
-              setGeneralCanvasState((prev) => ({ ...prev, content }))
-            }
-          />
-        );
-      }
+    const liveCanvasPreview = renderLiveCanvasPreview();
+    if (!liveCanvasPreview) {
       return null;
     }
 
-    const shouldShowCanvasLoadingState =
-      (!canvasState &&
-        (shouldBootstrapCanvasOnEntry ||
-          isInitialContentLoading ||
-          Boolean(initialContentLoadError))) ||
-      (resolvedCanvasState?.type === "document" &&
-        !resolvedCanvasState.content.trim() &&
-        (isInitialContentLoading || Boolean(initialContentLoadError)));
-
-    if (shouldShowCanvasLoadingState) {
-      return (
-        <div
-          data-testid="canvas-loading-state"
-          className="flex h-full items-center justify-center rounded-[14px] border border-dashed border-border bg-background text-sm text-muted-foreground"
-        >
-          {isInitialContentLoading
-            ? "正在加载文稿内容..."
-            : initialContentLoadError || "正在准备文稿画布..."}
-        </div>
-      );
+    if (shouldShowCanvasLoadingState || isBrowserAssistCanvasVisible) {
+      return liveCanvasPreview;
     }
 
-    // 其他主题使用 CanvasFactory
-    if (resolvedCanvasState) {
-      return (
-        <CanvasFactory
-          theme={renderCanvasTheme}
-          state={resolvedCanvasState}
-          onStateChange={setCanvasState}
-          onBackHome={handleBackHome}
-          onClose={handleCloseCanvas}
-          isStreaming={isSending}
-          onSelectionTextChange={handleCanvasSelectionTextChange}
-          projectId={projectId ?? null}
-          contentId={contentId ?? null}
-          autoImageTopic={project?.name || undefined}
-          autoContinueProviderType={providerType}
-          onAutoContinueProviderTypeChange={setProviderType}
-          autoContinueModel={model}
-          onAutoContinueModelChange={setModel}
-          autoContinueThinkingEnabled={chatToolPreferences.thinking}
-          onAutoContinueThinkingEnabledChange={
-            handleDocumentThinkingEnabledChange
-          }
-          onAutoContinueRun={handleDocumentAutoContinueRun}
-          onAddImage={handleAddImage}
-          onImportDocument={handleImportDocument}
-          onContentReviewRun={handleDocumentContentReviewRun}
-          onTextStylizeRun={handleDocumentTextStylizeRun}
-          documentContentReviewPlacement={
-            preferContentReviewInRightRail ? "external-rail" : "inline"
-          }
-          novelControls={
-            resolvedCanvasState.type === "novel"
-              ? {
-                  useExternalToolbar: true,
-                  chapterListCollapsed: novelChapterListCollapsed,
-                  onChapterListCollapsedChange: setNovelChapterListCollapsed,
-                }
-              : null
-          }
-        />
-      );
-    }
-    return null;
+    return (
+      <CanvasWorkbenchLayout
+        artifacts={settledWorkbenchArtifacts}
+        canvasState={resolvedCanvasState}
+        taskFiles={taskFiles}
+        selectedFileId={selectedFileId}
+        workspaceRoot={project?.rootPath || null}
+        workspaceUnavailable={Boolean(
+          workspacePathMissing || workspaceHealthError,
+        )}
+        defaultPreview={canvasWorkbenchDefaultPreview}
+        loadFilePreview={handleHarnessLoadFilePreview}
+        onOpenPath={handleOpenCanvasWorkbenchPath}
+        onRevealPath={handleRevealCanvasWorkbenchPath}
+        renderPreview={renderCanvasWorkbenchPreview}
+        onLayoutModeChange={setCanvasWorkbenchLayoutMode}
+      />
+    );
   }, [
-    currentCanvasArtifact,
-    displayedCanvasArtifact,
-    artifactDisplayState.overlay,
-    artifactDisplayState.showPreviousVersionBadge,
-    generalCanvasState,
-    canvasState,
-    resolvedCanvasState,
-    mappedTheme,
-    normalizedEntryTheme,
+    canvasWorkbenchDefaultPreview,
+    handleHarnessLoadFilePreview,
+    handleOpenCanvasWorkbenchPath,
+    handleRevealCanvasWorkbenchPath,
     project,
-    projectId,
-    contentId,
-    handleCloseCanvas,
-    handleBackHome,
-    isSending,
-    providerType,
-    setProviderType,
-    model,
-    setModel,
-    chatToolPreferences.thinking,
-    handleCanvasSelectionTextChange,
-    handleAddImage,
-    handleDocumentAutoContinueRun,
-    handleDocumentContentReviewRun,
-    handleDocumentThinkingEnabledChange,
-    handleDocumentTextStylizeRun,
-    handleImportDocument,
-    artifactViewMode,
-    artifactPreviewSize,
-    novelChapterListCollapsed,
-    isInitialContentLoading,
-    initialContentLoadError,
-    shouldBootstrapCanvasOnEntry,
-    preferContentReviewInRightRail,
+    renderCanvasWorkbenchPreview,
+    renderLiveCanvasPreview,
+    resolvedCanvasState,
+    selectedFileId,
+    settledWorkbenchArtifacts,
+    shouldShowCanvasLoadingState,
+    isBrowserAssistCanvasVisible,
+    setCanvasWorkbenchLayoutMode,
+    taskFiles,
+    workspaceHealthError,
+    workspacePathMissing,
   ]);
 
   const mainAreaNode = useMemo(
@@ -6929,11 +8518,22 @@ export function AgentChatPage({
               onBackToResources={
                 fromResources ? handleBackToResources : undefined
               }
+              showCanvasToggle={!isThemeWorkbench && !isNewTaskEntry}
+              isCanvasOpen={layoutMode !== "chat"}
+              onToggleCanvas={handleToggleCanvas}
               projectId={projectId ?? null}
               onProjectChange={handleProjectChange}
               workspaceType={activeTheme}
-              onBackHome={handleBackHome}
-              showHarnessToggle={showHarnessToggle}
+              onBackHome={isNewTaskEntry ? undefined : handleBackHome}
+              showBrowserAssistEntry={
+                chatMode === "general" && !isThemeWorkbench && !isNewTaskEntry
+              }
+              browserAssistActive={isBrowserAssistCanvasVisible}
+              browserAssistLoading={browserAssistLaunching}
+              onOpenBrowserAssist={() => {
+                void handleOpenBrowserAssistInCanvas();
+              }}
+              showHarnessToggle={isNewTaskEntry ? false : showHarnessToggle}
               harnessPanelVisible={navbarHarnessPanelVisible}
               onToggleHarnessPanel={handleToggleHarnessPanel}
               harnessPendingCount={harnessPendingCount}
@@ -6945,7 +8545,7 @@ export function AgentChatPage({
               }
               onToggleSettings={() => {
                 _onNavigate?.("settings", {
-                  tab: SettingsTabs.ChatAppearance,
+                  tab: SettingsTabs.Appearance,
                 });
               }}
               novelCanvasControls={
@@ -7010,13 +8610,17 @@ export function AgentChatPage({
               : "0"
           }
         >
-          <LayoutTransitionRenderGate
-            mode={isThemeWorkbench && canvasContent ? "canvas" : layoutMode}
-            chatContent={chatContent}
-            canvasContent={canvasContent}
-          />
+          {isNewTaskEntry ? (
+            chatContent
+          ) : (
+            <LayoutTransitionRenderGate
+              mode={isThemeWorkbench && canvasContent ? "canvas" : layoutMode}
+              chatContent={chatContent}
+              canvasContent={canvasContent}
+            />
+          )}
         </ThemeWorkbenchLayoutShell>
-        {generalWorkbenchDialog}
+        {isNewTaskEntry ? null : generalWorkbenchDialog}
         {themeWorkbenchHarnessDialog}
         {isThemeWorkbench &&
         showChatLayout &&
@@ -7034,6 +8638,7 @@ export function AgentChatPage({
       activeTheme,
       canvasContent,
       chatContent,
+      browserAssistLaunching,
       contentId,
       currentGate.status,
       fromResources,
@@ -7041,18 +8646,22 @@ export function AgentChatPage({
       handleBackHome,
       handleBackToResources,
       handleCloseCanvas,
+      handleOpenBrowserAssistInCanvas,
       handleProjectChange,
       handleToggleHarnessPanel,
       handleToggleNovelChapterList,
+      handleToggleCanvas,
       handleToggleSidebar,
       hideHistoryToggle,
       hideTopBar,
       inputbarNode,
       isSending,
+      isNewTaskEntry,
       isThemeWorkbench,
       chatMode,
       generalWorkbenchDialog,
       harnessAttentionLevel,
+      isBrowserAssistCanvasVisible,
       navbarHarnessPanelVisible,
       harnessPendingCount,
       layoutMode,
@@ -7081,12 +8690,16 @@ export function AgentChatPage({
         themeWorkbenchSidebarNode
       ) : showChatPanel && showSidebar ? (
         <ChatSidebar
-          onNewChat={handleClearMessages}
+          onNewChat={handleBackHome}
           topics={topics}
           currentTopicId={sessionId}
           onSwitchTopic={switchTopic}
           onDeleteTopic={deleteTopic}
           onRenameTopic={renameTopic}
+          currentMessages={messages}
+          isSending={isSending}
+          pendingActionCount={pendingActions.length}
+          workspaceError={Boolean(workspacePathMissing || workspaceHealthError)}
         />
       ) : null}
       {showThemeWorkbenchLeftExpandButton ? (
diff --git a/src/components/agent/chat/types.ts b/src/components/agent/chat/types.ts
index fc32b8f41..9ddf2d698 100644
--- a/src/components/agent/chat/types.ts
+++ b/src/components/agent/chat/types.ts
@@ -121,6 +121,19 @@ export interface AgentRuntimeStatus {
   checkpoints?: string[];
 }
 
+export interface BrowserAssistSessionState {
+  sessionId?: string;
+  profileKey?: string;
+  url?: string;
+  title?: string;
+  targetId?: string;
+  transportKind?: string;
+  lifecycleState?: string;
+  controlMode?: string;
+  source: "tool_call" | "runtime_launch" | "artifact_restore";
+  updatedAt: number;
+}
+
 export interface Message {
   id: string;
   role: "user" | "assistant";
diff --git a/src/components/agent/chat/utils/browserAssistIntent.test.ts b/src/components/agent/chat/utils/browserAssistIntent.test.ts
new file mode 100644
index 000000000..a36e44554
--- /dev/null
+++ b/src/components/agent/chat/utils/browserAssistIntent.test.ts
@@ -0,0 +1,51 @@
+import { describe, expect, it } from "vitest";
+
+import {
+  extractExplicitUrlFromText,
+  hasBrowserAssistIntent,
+  resolveBrowserAssistLaunchUrl,
+  shouldAutoOpenBrowserAssistForPrompt,
+} from "./browserAssistIntent";
+
+describe("browserAssistIntent", () => {
+  it("应从自然语言提示中提取显式 URL", () => {
+    expect(
+      extractExplicitUrlFromText(
+        "打开 https://news.baidu.com，使用浏览器协助模式执行。",
+      ),
+    ).toBe("https://news.baidu.com");
+  });
+
+  it("应识别不带协议头的域名并补全 https", () => {
+    expect(
+      extractExplicitUrlFromText("请访问 news.baidu.com/top"),
+    ).toBe("https://news.baidu.com/top");
+  });
+
+  it("没有显式 URL 时应回退为 Google 搜索地址", () => {
+    expect(resolveBrowserAssistLaunchUrl("今天的 AI 行业新闻")).toBe(
+      "https://www.google.com/search?q=%E4%BB%8A%E5%A4%A9%E7%9A%84%20AI%20%E8%A1%8C%E4%B8%9A%E6%96%B0%E9%97%BB",
+    );
+  });
+
+  it("显式 URL + 浏览器指令时应自动走浏览器协助", () => {
+    expect(
+      shouldAutoOpenBrowserAssistForPrompt(
+        "打开 https://news.baidu.com，使用浏览器协助模式执行，并显示实时画面。",
+      ),
+    ).toBe(true);
+  });
+
+  it("显式 URL + 打开动作时也应视为浏览器导航意图", () => {
+    expect(
+      shouldAutoOpenBrowserAssistForPrompt("打开 https://example.com"),
+    ).toBe(true);
+    expect(hasBrowserAssistIntent("打开 https://example.com")).toBe(true);
+  });
+
+  it("只有链接总结诉求但没有浏览器意图时不应自动占用浏览器画布", () => {
+    expect(
+      shouldAutoOpenBrowserAssistForPrompt("帮我总结 https://example.com 的内容"),
+    ).toBe(false);
+  });
+});
diff --git a/src/components/agent/chat/utils/browserAssistIntent.ts b/src/components/agent/chat/utils/browserAssistIntent.ts
new file mode 100644
index 000000000..751de78a1
--- /dev/null
+++ b/src/components/agent/chat/utils/browserAssistIntent.ts
@@ -0,0 +1,63 @@
+const ABSOLUTE_URL_PATTERN = /https?:\/\/[^\s<>"'，。！？、；：）】》]+/i;
+const DOMAIN_URL_PATTERN =
+  /\b(?:[a-z0-9](?:[a-z0-9-]{0,61}[a-z0-9])?\.)+[a-z]{2,}(?:\/[^\s<>"'，。！？、；：）】》]*)?/i;
+const TRAILING_URL_PUNCTUATION_PATTERN = /[，。！？、；：'"’”)\]}>]+$/g;
+const BROWSER_ASSIST_INTENT_PATTERN =
+  /浏览器协助|browser assist|右侧画布|实时画面|实时浏览器|浏览器模式|在画布中|画布里|浏览器里|browser mode/i;
+const BROWSER_NAVIGATION_PATTERN =
+  /打开|访问|进入|前往|跳转|导航|\bopen\b|\bvisit\b|\bnavigate\b/i;
+
+function sanitizeDetectedUrl(value: string): string {
+  return value.trim().replace(TRAILING_URL_PUNCTUATION_PATTERN, "");
+}
+
+export function extractExplicitUrlFromText(input: string): string | null {
+  const normalized = input.trim();
+  if (!normalized) {
+    return null;
+  }
+
+  const absoluteMatch = normalized.match(ABSOLUTE_URL_PATTERN);
+  if (absoluteMatch?.[0]) {
+    return sanitizeDetectedUrl(absoluteMatch[0]);
+  }
+
+  const domainMatch = normalized.match(DOMAIN_URL_PATTERN);
+  if (domainMatch?.[0]) {
+    return `https://${sanitizeDetectedUrl(domainMatch[0])}`;
+  }
+
+  return null;
+}
+
+export function hasBrowserAssistIntent(input: string): boolean {
+  const normalized = input.trim();
+  if (!normalized) {
+    return false;
+  }
+
+  return (
+    BROWSER_ASSIST_INTENT_PATTERN.test(normalized) ||
+    BROWSER_NAVIGATION_PATTERN.test(normalized)
+  );
+}
+
+export function shouldAutoOpenBrowserAssistForPrompt(input: string): boolean {
+  return Boolean(
+    extractExplicitUrlFromText(input) && hasBrowserAssistIntent(input),
+  );
+}
+
+export function resolveBrowserAssistLaunchUrl(input: string): string {
+  const explicitUrl = extractExplicitUrlFromText(input);
+  if (explicitUrl) {
+    return explicitUrl;
+  }
+
+  const value = input.trim();
+  if (!value) {
+    return "https://www.google.com";
+  }
+
+  return `https://www.google.com/search?q=${encodeURIComponent(value)}`;
+}
diff --git a/src/components/agent/chat/utils/browserAssistSession.test.ts b/src/components/agent/chat/utils/browserAssistSession.test.ts
new file mode 100644
index 000000000..22aa947d8
--- /dev/null
+++ b/src/components/agent/chat/utils/browserAssistSession.test.ts
@@ -0,0 +1,161 @@
+import { describe, expect, it } from "vitest";
+
+import type { Message } from "../types";
+import {
+  createBrowserAssistSessionState,
+  extractBrowserAssistSessionFromArtifact,
+  findLatestBrowserAssistSessionInMessages,
+  mergeBrowserAssistSessionStates,
+  resolveBrowserAssistSessionScopeKey,
+  resolveBrowserAssistSessionStorageKey,
+} from "./browserAssistSession";
+
+describe("browserAssistSession", () => {
+  it("应从消息中的浏览器工具调用提取最新会话", () => {
+    const messages: Message[] = [
+      {
+        id: "msg-1",
+        role: "assistant",
+        content: "",
+        timestamp: new Date("2026-03-14T10:00:00.000Z"),
+        toolCalls: [
+          {
+            id: "tool-1",
+            name: "mcp__proxycast-browser__browser_navigate",
+            arguments: JSON.stringify({
+              profile_key: "general_browser_assist",
+              url: "https://example.com",
+            }),
+            status: "completed",
+            startTime: new Date("2026-03-14T10:00:01.000Z"),
+            endTime: new Date("2026-03-14T10:00:02.000Z"),
+            result: {
+              success: true,
+              output: "ok",
+              metadata: {
+                tool_family: "browser",
+                browser_session: {
+                  session_id: "browser-session-1",
+                  target_id: "target-1",
+                  transport_kind: "cdp_frames",
+                  lifecycle_state: "live",
+                },
+              },
+            },
+          },
+        ],
+      },
+    ];
+
+    expect(findLatestBrowserAssistSessionInMessages(messages)).toEqual(
+      expect.objectContaining({
+        sessionId: "browser-session-1",
+        profileKey: "general_browser_assist",
+        url: "https://example.com",
+        targetId: "target-1",
+        transportKind: "cdp_frames",
+        lifecycleState: "live",
+        source: "tool_call",
+      }),
+    );
+  });
+
+  it("合并状态时应保留已知会话信息并吸收新字段", () => {
+    const current = createBrowserAssistSessionState({
+      sessionId: "browser-session-1",
+      profileKey: "general_browser_assist",
+      url: "https://example.com",
+      title: "示例站点",
+      source: "tool_call",
+      updatedAt: 10,
+    });
+    const incoming = createBrowserAssistSessionState({
+      profileKey: "general_browser_assist",
+      transportKind: "cdp_frames",
+      controlMode: "agent",
+      source: "runtime_launch",
+      updatedAt: 20,
+    });
+
+    expect(mergeBrowserAssistSessionStates(current, incoming)).toEqual(
+      expect.objectContaining({
+        sessionId: "browser-session-1",
+        transportKind: "cdp_frames",
+        controlMode: "agent",
+        source: "runtime_launch",
+        updatedAt: 20,
+      }),
+    );
+  });
+
+  it("旧状态回放时不应覆盖更新后的页面 URL", () => {
+    const current = createBrowserAssistSessionState({
+      sessionId: "browser-session-1",
+      profileKey: "general_browser_assist",
+      url: "https://news.baidu.com",
+      title: "百度新闻",
+      source: "runtime_launch",
+      updatedAt: 30,
+    });
+    const incoming = createBrowserAssistSessionState({
+      sessionId: "browser-session-1",
+      profileKey: "general_browser_assist",
+      url: "https://www.rokid.com",
+      title: "Rokid",
+      source: "tool_call",
+      updatedAt: 10,
+    });
+
+    expect(mergeBrowserAssistSessionStates(current, incoming)).toEqual(
+      expect.objectContaining({
+        url: "https://news.baidu.com",
+        title: "百度新闻",
+        source: "runtime_launch",
+        updatedAt: 30,
+      }),
+    );
+  });
+
+  it("应从 artifact 恢复浏览器会话状态", () => {
+    const artifact = {
+      id: "browser-assist:general",
+      type: "browser_assist",
+      title: "账户中心",
+      content: "",
+      status: "complete",
+      meta: {
+        sessionId: "browser-session-2",
+        profileKey: "general_browser_assist",
+        url: "https://accounts.example.com",
+      },
+      position: { start: 0, end: 0 },
+      createdAt: 1,
+      updatedAt: 2,
+    } as const;
+
+    expect(extractBrowserAssistSessionFromArtifact(artifact as any)).toEqual(
+      expect.objectContaining({
+        sessionId: "browser-session-2",
+        profileKey: "general_browser_assist",
+        url: "https://accounts.example.com",
+        title: "账户中心",
+        source: "artifact_restore",
+      }),
+    );
+  });
+
+  it("应生成稳定的 session scoped storage key", () => {
+    expect(resolveBrowserAssistSessionScopeKey("project-a", "session-a")).toBe(
+      "session-a::project-a",
+    );
+    expect(resolveBrowserAssistSessionScopeKey("project-a", null)).toBe(
+      "active::project-a",
+    );
+    expect(
+      resolveBrowserAssistSessionStorageKey("project-a", "session-a"),
+    ).toBe("aster_browser_assist_session_session-a_project-a");
+    expect(resolveBrowserAssistSessionStorageKey("project-a", null)).toBe(
+      "aster_browser_assist_session_active_project-a",
+    );
+  });
+});
diff --git a/src/components/agent/chat/utils/browserAssistSession.ts b/src/components/agent/chat/utils/browserAssistSession.ts
new file mode 100644
index 000000000..6b9767082
--- /dev/null
+++ b/src/components/agent/chat/utils/browserAssistSession.ts
@@ -0,0 +1,319 @@
+import type { ToolCallState } from "@/lib/api/agentStream";
+import type { Artifact } from "@/lib/artifact/types";
+import type {
+  BrowserAssistSessionState,
+  Message,
+} from "../types";
+import { loadTransient, saveTransient } from "../hooks/agentChatStorage";
+import { getScopedStorageKey } from "../hooks/agentChatShared";
+
+const BROWSER_ASSIST_SESSION_STORAGE_PREFIX = "aster_browser_assist_session";
+
+export function resolveBrowserAssistSessionScopeKey(
+  workspaceId: string | null | undefined,
+  sessionId: string | null | undefined,
+): string {
+  const normalizedSessionId = sessionId?.trim() || "active";
+  const normalizedWorkspaceId = workspaceId?.trim() || "global";
+  return `${normalizedSessionId}::${normalizedWorkspaceId}`;
+}
+
+function asRecord(value: unknown): Record<string, unknown> | null {
+  if (!value || typeof value !== "object" || Array.isArray(value)) {
+    return null;
+  }
+
+  return value as Record<string, unknown>;
+}
+
+function readFirstString(
+  candidates: Array<Record<string, unknown> | null | undefined>,
+  keys: string[],
+): string | undefined {
+  for (const candidate of candidates) {
+    if (!candidate) {
+      continue;
+    }
+    for (const key of keys) {
+      const value = candidate[key];
+      if (typeof value === "string" && value.trim()) {
+        return value.trim();
+      }
+    }
+  }
+
+  return undefined;
+}
+
+function normalizeTimestamp(...values: unknown[]): number {
+  for (const value of values) {
+    if (value instanceof Date && !Number.isNaN(value.getTime())) {
+      return value.getTime();
+    }
+    if (typeof value === "number" && Number.isFinite(value)) {
+      return value;
+    }
+    if (typeof value === "string" && value.trim()) {
+      const parsed = new Date(value);
+      if (!Number.isNaN(parsed.getTime())) {
+        return parsed.getTime();
+      }
+    }
+  }
+
+  return Date.now();
+}
+
+function parseToolCallArguments(
+  argumentsValue?: string,
+): Record<string, unknown> | null {
+  if (!argumentsValue?.trim()) {
+    return null;
+  }
+
+  try {
+    return asRecord(JSON.parse(argumentsValue));
+  } catch {
+    return null;
+  }
+}
+
+export function createBrowserAssistSessionState(
+  params: Partial<BrowserAssistSessionState> | null | undefined,
+): BrowserAssistSessionState | null {
+  if (!params) {
+    return null;
+  }
+
+  const sessionId = params.sessionId?.trim();
+  const profileKey = params.profileKey?.trim();
+  if (!sessionId && !profileKey) {
+    return null;
+  }
+
+  return {
+    sessionId,
+    profileKey,
+    url: params.url?.trim(),
+    title: params.title?.trim() || "浏览器协助",
+    targetId: params.targetId?.trim(),
+    transportKind: params.transportKind?.trim(),
+    lifecycleState: params.lifecycleState?.trim(),
+    controlMode: params.controlMode?.trim(),
+    source: params.source || "tool_call",
+    updatedAt: normalizeTimestamp(params.updatedAt),
+  };
+}
+
+export function mergeBrowserAssistSessionStates(
+  current: BrowserAssistSessionState | null,
+  incoming: BrowserAssistSessionState | null,
+): BrowserAssistSessionState | null {
+  if (!current) {
+    return incoming;
+  }
+  if (!incoming) {
+    return current;
+  }
+
+  const primary = incoming.updatedAt >= current.updatedAt ? incoming : current;
+  const fallback = primary === incoming ? current : incoming;
+
+  return {
+    sessionId: primary.sessionId || fallback.sessionId,
+    profileKey: primary.profileKey || fallback.profileKey,
+    url: primary.url || fallback.url,
+    title: primary.title || fallback.title,
+    targetId: primary.targetId || fallback.targetId,
+    transportKind: primary.transportKind || fallback.transportKind,
+    lifecycleState: primary.lifecycleState || fallback.lifecycleState,
+    controlMode: primary.controlMode || fallback.controlMode,
+    source: primary.source || fallback.source,
+    updatedAt: Math.max(current.updatedAt, incoming.updatedAt),
+  };
+}
+
+export function areBrowserAssistSessionStatesEqual(
+  left: BrowserAssistSessionState | null,
+  right: BrowserAssistSessionState | null,
+): boolean {
+  if (left === right) {
+    return true;
+  }
+  if (!left || !right) {
+    return false;
+  }
+
+  return (
+    left.sessionId === right.sessionId &&
+    left.profileKey === right.profileKey &&
+    left.url === right.url &&
+    left.title === right.title &&
+    left.targetId === right.targetId &&
+    left.transportKind === right.transportKind &&
+    left.lifecycleState === right.lifecycleState &&
+    left.controlMode === right.controlMode &&
+    left.source === right.source &&
+    left.updatedAt === right.updatedAt
+  );
+}
+
+export function extractBrowserAssistSessionFromToolCall(
+  toolCall: ToolCallState,
+): BrowserAssistSessionState | null {
+  const metadata = asRecord(toolCall.result?.metadata);
+  const normalizedName = toolCall.name.trim().toLowerCase();
+  const toolFamily = readFirstString([metadata], ["tool_family", "toolFamily"]);
+  if (!normalizedName.includes("browser") && toolFamily !== "browser") {
+    return null;
+  }
+
+  const argumentsRecord = parseToolCallArguments(toolCall.arguments);
+  const metadataResult = asRecord(metadata?.result);
+  const metadataSession = asRecord(metadata?.session);
+  const metadataBrowserSession =
+    asRecord(metadata?.browser_session) || asRecord(metadata?.browserSession);
+  const metadataResultSession = asRecord(metadataResult?.session);
+  const metadataResultBrowserSession =
+    asRecord(metadataResult?.browser_session) ||
+    asRecord(metadataResult?.browserSession);
+  const metadataResultData = asRecord(metadataResult?.data);
+  const metadataResultDataBrowserSession =
+    asRecord(metadataResultData?.browser_session) ||
+    asRecord(metadataResultData?.browserSession);
+  const metadataResultPageInfo =
+    asRecord(metadataResult?.page_info) ||
+    asRecord(metadataResult?.pageInfo) ||
+    asRecord(metadataResult?.last_page_info) ||
+    asRecord(metadataResult?.lastPageInfo);
+  const metadataDataPageInfo =
+    asRecord(metadataResultData?.page_info) ||
+    asRecord(metadataResultData?.pageInfo) ||
+    asRecord(metadataResultData?.last_page_info) ||
+    asRecord(metadataResultData?.lastPageInfo);
+
+  const candidates = [
+    metadata,
+    metadataResult,
+    metadataSession,
+    metadataBrowserSession,
+    metadataResultSession,
+    metadataResultBrowserSession,
+    metadataResultData,
+    metadataResultDataBrowserSession,
+    metadataResultPageInfo,
+    metadataDataPageInfo,
+    argumentsRecord,
+  ];
+
+  return createBrowserAssistSessionState({
+    sessionId: readFirstString(candidates, ["session_id", "sessionId"]),
+    profileKey: readFirstString(candidates, ["profile_key", "profileKey"]),
+    url: readFirstString(candidates, ["url", "href", "target_url", "targetUrl"]),
+    title: readFirstString(candidates, ["title", "target_title", "targetTitle"]),
+    targetId: readFirstString(candidates, ["target_id", "targetId"]),
+    transportKind: readFirstString(candidates, [
+      "transport_kind",
+      "transportKind",
+    ]),
+    lifecycleState: readFirstString(candidates, [
+      "lifecycle_state",
+      "lifecycleState",
+    ]),
+    controlMode: readFirstString(candidates, ["control_mode", "controlMode"]),
+    source: "tool_call",
+    updatedAt: normalizeTimestamp(toolCall.endTime, toolCall.startTime),
+  });
+}
+
+export function findLatestBrowserAssistSessionInMessages(
+  messages: Message[],
+): BrowserAssistSessionState | null {
+  for (
+    let messageIndex = messages.length - 1;
+    messageIndex >= 0;
+    messageIndex -= 1
+  ) {
+    const message = messages[messageIndex];
+    const toolCalls = message.toolCalls || [];
+    for (let toolIndex = toolCalls.length - 1; toolIndex >= 0; toolIndex -= 1) {
+      const context = extractBrowserAssistSessionFromToolCall(
+        toolCalls[toolIndex],
+      );
+      if (context) {
+        return context;
+      }
+    }
+  }
+
+  return null;
+}
+
+export function extractBrowserAssistSessionFromArtifact(
+  artifact: Artifact | null | undefined,
+): BrowserAssistSessionState | null {
+  if (!artifact || artifact.type !== "browser_assist") {
+    return null;
+  }
+
+  const meta = asRecord(artifact.meta);
+  return createBrowserAssistSessionState({
+    sessionId: readFirstString(meta ? [meta] : [], ["sessionId", "session_id"]),
+    profileKey: readFirstString(meta ? [meta] : [], ["profileKey", "profile_key"]),
+    url: readFirstString(meta ? [meta] : [], ["url", "launchUrl"]),
+    title: artifact.title?.trim(),
+    targetId: readFirstString(meta ? [meta] : [], ["targetId", "target_id"]),
+    transportKind: readFirstString(meta ? [meta] : [], [
+      "transportKind",
+      "transport_kind",
+    ]),
+    lifecycleState: readFirstString(meta ? [meta] : [], [
+      "lifecycleState",
+      "lifecycle_state",
+    ]),
+    controlMode: readFirstString(meta ? [meta] : [], [
+      "controlMode",
+      "control_mode",
+    ]),
+    source: "artifact_restore",
+    updatedAt: artifact.updatedAt,
+  });
+}
+
+export function resolveBrowserAssistSessionStorageKey(
+  workspaceId: string | null | undefined,
+  sessionId: string | null | undefined,
+): string {
+  const normalizedSessionId = sessionId?.trim() || "active";
+  return getScopedStorageKey(
+    workspaceId,
+    `${BROWSER_ASSIST_SESSION_STORAGE_PREFIX}_${normalizedSessionId}`,
+  );
+}
+
+export function loadBrowserAssistSessionState(
+  workspaceId: string | null | undefined,
+  sessionId: string | null | undefined,
+): BrowserAssistSessionState | null {
+  const key = resolveBrowserAssistSessionStorageKey(workspaceId, sessionId);
+  return createBrowserAssistSessionState(
+    loadTransient<Record<string, unknown> | null>(key, null) || undefined,
+  );
+}
+
+export function saveBrowserAssistSessionState(
+  workspaceId: string | null | undefined,
+  sessionId: string | null | undefined,
+  state: BrowserAssistSessionState,
+) {
+  const key = resolveBrowserAssistSessionStorageKey(workspaceId, sessionId);
+  saveTransient(key, state);
+}
+
+export function clearBrowserAssistSessionState(
+  workspaceId: string | null | undefined,
+  sessionId: string | null | undefined,
+) {
+  const key = resolveBrowserAssistSessionStorageKey(workspaceId, sessionId);
+  saveTransient(key, null);
+}
diff --git a/src/components/agent/chat/utils/canvasWorkbenchDiff.test.ts b/src/components/agent/chat/utils/canvasWorkbenchDiff.test.ts
new file mode 100644
index 000000000..89d3e7df3
--- /dev/null
+++ b/src/components/agent/chat/utils/canvasWorkbenchDiff.test.ts
@@ -0,0 +1,30 @@
+import { describe, expect, it } from "vitest";
+import { buildCanvasWorkbenchDiff } from "./canvasWorkbenchDiff";
+
+describe("buildCanvasWorkbenchDiff", () => {
+  it("应标记新增、删除与上下文行", () => {
+    expect(
+      buildCanvasWorkbenchDiff(
+        ["标题", "旧段落", "结尾"].join("\n"),
+        ["标题", "新段落", "结尾", "附录"].join("\n"),
+      ),
+    ).toEqual([
+      { type: "context", value: "标题" },
+      { type: "remove", value: "旧段落" },
+      { type: "add", value: "新段落" },
+      { type: "context", value: "结尾" },
+      { type: "add", value: "附录" },
+    ]);
+  });
+
+  it("空内容比较应返回纯新增或纯删除", () => {
+    expect(buildCanvasWorkbenchDiff("", "第一行\n第二行")).toEqual([
+      { type: "add", value: "第一行" },
+      { type: "add", value: "第二行" },
+    ]);
+
+    expect(buildCanvasWorkbenchDiff("仅一行", "")).toEqual([
+      { type: "remove", value: "仅一行" },
+    ]);
+  });
+});
diff --git a/src/components/agent/chat/utils/canvasWorkbenchDiff.ts b/src/components/agent/chat/utils/canvasWorkbenchDiff.ts
new file mode 100644
index 000000000..31a0ab536
--- /dev/null
+++ b/src/components/agent/chat/utils/canvasWorkbenchDiff.ts
@@ -0,0 +1,85 @@
+export type CanvasWorkbenchDiffLineType = "context" | "add" | "remove";
+
+export interface CanvasWorkbenchDiffLine {
+  type: CanvasWorkbenchDiffLineType;
+  value: string;
+}
+
+function splitLines(content: string): string[] {
+  if (!content) {
+    return [];
+  }
+  return content.replace(/\r\n/g, "\n").split("\n");
+}
+
+export function buildCanvasWorkbenchDiff(
+  previousContent: string,
+  currentContent: string,
+): CanvasWorkbenchDiffLine[] {
+  const previousLines = splitLines(previousContent);
+  const currentLines = splitLines(currentContent);
+  const rowCount = previousLines.length;
+  const colCount = currentLines.length;
+  const lcs = Array.from({ length: rowCount + 1 }, () =>
+    Array<number>(colCount + 1).fill(0),
+  );
+
+  for (let row = rowCount - 1; row >= 0; row -= 1) {
+    for (let col = colCount - 1; col >= 0; col -= 1) {
+      if (previousLines[row] === currentLines[col]) {
+        lcs[row][col] = lcs[row + 1][col + 1] + 1;
+      } else {
+        lcs[row][col] = Math.max(lcs[row + 1][col], lcs[row][col + 1]);
+      }
+    }
+  }
+
+  const diffLines: CanvasWorkbenchDiffLine[] = [];
+  let row = 0;
+  let col = 0;
+
+  while (row < rowCount && col < colCount) {
+    if (previousLines[row] === currentLines[col]) {
+      diffLines.push({
+        type: "context",
+        value: previousLines[row],
+      });
+      row += 1;
+      col += 1;
+      continue;
+    }
+
+    if (lcs[row + 1][col] >= lcs[row][col + 1]) {
+      diffLines.push({
+        type: "remove",
+        value: previousLines[row],
+      });
+      row += 1;
+      continue;
+    }
+
+    diffLines.push({
+      type: "add",
+      value: currentLines[col],
+    });
+    col += 1;
+  }
+
+  while (row < rowCount) {
+    diffLines.push({
+      type: "remove",
+      value: previousLines[row],
+    });
+    row += 1;
+  }
+
+  while (col < colCount) {
+    diffLines.push({
+      type: "add",
+      value: currentLines[col],
+    });
+    col += 1;
+  }
+
+  return diffLines;
+}
diff --git a/src/components/agent/chat/utils/generalAgentPrompt.test.ts b/src/components/agent/chat/utils/generalAgentPrompt.test.ts
index 2d541940d..142266ac0 100644
--- a/src/components/agent/chat/utils/generalAgentPrompt.test.ts
+++ b/src/components/agent/chat/utils/generalAgentPrompt.test.ts
@@ -79,4 +79,22 @@ describe("generalAgentPrompt", () => {
     expect(prompt).toContain("当前内容 ID：content-1");
     expect(prompt).toContain("<proposed_plan>");
   });
+
+  it("启用 Browser Assist 时应强制网页任务走 ProxyCast 浏览器会话", () => {
+    const prompt = buildGeneralAgentSystemPrompt("general", {
+      harness: {
+        browserAssistEnabled: true,
+        browserAssistProfileKey: "general_browser_assist",
+      },
+    });
+
+    expect(prompt).toContain("当前通用对话已启用 Browser Assist");
+    expect(prompt).toContain("general_browser_assist");
+    expect(prompt).toContain("Playwright code");
+    expect(prompt).toContain("右侧画布");
+    expect(prompt).toContain("browser session");
+    expect(prompt).toContain("显式给出 URL");
+    expect(prompt).toContain("不得先退化成 WebSearch");
+    expect(prompt).toContain("一旦给了 URL，先打开页面");
+  });
 });
diff --git a/src/components/agent/chat/utils/generalAgentPrompt.ts b/src/components/agent/chat/utils/generalAgentPrompt.ts
index 0ca9d6bda..0a7d7e141 100644
--- a/src/components/agent/chat/utils/generalAgentPrompt.ts
+++ b/src/components/agent/chat/utils/generalAgentPrompt.ts
@@ -64,6 +64,8 @@ export interface GeneralAgentPromptOptions {
     gateKey?: string | null;
     runTitle?: string | null;
     contentId?: string | null;
+    browserAssistEnabled?: boolean;
+    browserAssistProfileKey?: string | null;
   };
 }
 
@@ -103,6 +105,21 @@ export function buildGeneralAgentSystemPrompt(
           .filter(Boolean)
           .join("\n")
       : "- 当前会话处于默认对话模式，可直接回答，也可在必要时升级到工具、任务或子代理。";
+  const browserAssistLines = harness?.browserAssistEnabled
+    ? [
+        "- 当前通用对话已启用 Browser Assist。只要任务涉及打开网站、点击、表单、登录、搜索、验证码、多因素认证或其他网页交互，必须优先使用 ProxyCast Browser Assist 浏览器工具。",
+        harness.browserAssistProfileKey
+          ? `- 当前 Browser Assist Profile：${harness.browserAssistProfileKey}`
+          : null,
+        "- 如果用户显式给出 URL、域名，或明确要求打开/访问/进入某个页面，并要求在右侧画布展示实时浏览器画面，必须先复用或启动 Browser Assist 并导航到该地址，不得先退化成 WebSearch。",
+        "- 网页任务的第一步应先建立或复用 Browser Assist 浏览器会话，并尽量显式带上当前 profile_key。",
+        "- 新闻、最新动态、热点盘点等规则，只有在用户没有提供明确 URL 时才优先走 WebSearch；一旦给了 URL，先打开页面，再决定是否补充检索。",
+        "- 不要改用 Playwright code、browser_run_code、browser_navigate 或其他通用 Playwright 浏览器工具，否则右侧画布无法持续附着实时会话。",
+        "- 浏览器工具输出必须保留 browser session 信息，确保右侧画布可以实时展示、接管和调试浏览器。",
+      ]
+        .filter(Boolean)
+        .join("\n")
+    : "- 当前回合未显式绑定 Browser Assist；只有在确实需要网页交互时，才升级到浏览器会话。";
 
   return `你是 ProxyCast 的通用 AI Agent。你参考的是具备纪律性、可升级工具链、会规划与会自检的 agent 工作方式，但你的默认服务对象是通用对话、知识处理、现实任务推进和多模态协作，不是只面向编程。
 
@@ -158,6 +175,9 @@ ${toolPreferenceLines}
 Harness 上下文：
 ${harnessLines}
 
+Browser Assist 协议：
+${browserAssistLines}
+
 当前主题侧重点：
 ${themeGuidanceBlock}`;
 }
diff --git a/src/components/agent/chat/utils/generalResourceSync.test.ts b/src/components/agent/chat/utils/generalResourceSync.test.ts
new file mode 100644
index 000000000..3ab93b5af
--- /dev/null
+++ b/src/components/agent/chat/utils/generalResourceSync.test.ts
@@ -0,0 +1,61 @@
+import { describe, expect, it } from "vitest";
+import type { Material } from "@/types/material";
+import {
+  GENERAL_CHAT_RESOURCE_HASH_TAG_PREFIX,
+  GENERAL_CHAT_RESOURCE_SESSION_TAG_PREFIX,
+  GENERAL_CHAT_RESOURCE_TAG,
+  buildGeneralChatResourceDescription,
+  buildGeneralChatResourceHash,
+  buildGeneralChatResourceTags,
+  extractGeneralChatResourceHash,
+  hasGeneralChatResourceSync,
+  inferGeneralChatResourceMaterialType,
+} from "./generalResourceSync";
+
+function createMaterial(tags: string[]): Pick<Material, "tags"> {
+  return { tags };
+}
+
+describe("generalResourceSync", () => {
+  it("应基于路径生成稳定 hash 和去重标签", () => {
+    const filePath = "/tmp/project/article.md";
+    const tags = buildGeneralChatResourceTags(filePath, "session-1");
+
+    expect(tags).toContain(GENERAL_CHAT_RESOURCE_TAG);
+    expect(tags).toContain(
+      `${GENERAL_CHAT_RESOURCE_HASH_TAG_PREFIX}${buildGeneralChatResourceHash(filePath)}`,
+    );
+    expect(tags).toContain(
+      `${GENERAL_CHAT_RESOURCE_SESSION_TAG_PREFIX}session-1`,
+    );
+  });
+
+  it("应能从标签中提取同步 hash 并识别已同步素材", () => {
+    const filePath = "/tmp/project/outline.md";
+    const syncedMaterial = createMaterial(buildGeneralChatResourceTags(filePath));
+
+    expect(extractGeneralChatResourceHash(syncedMaterial)).toBe(
+      buildGeneralChatResourceHash(filePath),
+    );
+    expect(hasGeneralChatResourceSync([syncedMaterial], filePath)).toBe(true);
+    expect(hasGeneralChatResourceSync([syncedMaterial], "/tmp/project/other.md")).toBe(
+      false,
+    );
+  });
+
+  it("应根据文件扩展名推断可入库类型", () => {
+    expect(inferGeneralChatResourceMaterialType("cover.png")).toBe("image");
+    expect(inferGeneralChatResourceMaterialType("voice.mp3")).toBe("audio");
+    expect(inferGeneralChatResourceMaterialType("clip.mp4")).toBe("video");
+    expect(inferGeneralChatResourceMaterialType("draft.md")).toBe("document");
+    expect(inferGeneralChatResourceMaterialType("script.ts")).toBe("document");
+    expect(inferGeneralChatResourceMaterialType("   ")).toBeNull();
+  });
+
+  it("应生成可读的自动入库说明", () => {
+    expect(buildGeneralChatResourceDescription("session-42")).toBe(
+      "通用对话自动入库 · 会话 session-42",
+    );
+    expect(buildGeneralChatResourceDescription()).toBe("通用对话自动入库");
+  });
+});
diff --git a/src/components/agent/chat/utils/generalResourceSync.ts b/src/components/agent/chat/utils/generalResourceSync.ts
new file mode 100644
index 000000000..4861bc41e
--- /dev/null
+++ b/src/components/agent/chat/utils/generalResourceSync.ts
@@ -0,0 +1,119 @@
+import type { Material } from "@/types/material";
+import type { MaterialType } from "@/types/material";
+
+const IMAGE_EXTENSIONS = new Set([
+  "png",
+  "jpg",
+  "jpeg",
+  "webp",
+  "gif",
+  "bmp",
+  "svg",
+  "ico",
+  "heic",
+]);
+
+const AUDIO_EXTENSIONS = new Set(["mp3", "wav", "aac", "m4a", "ogg", "flac"]);
+
+const VIDEO_EXTENSIONS = new Set(["mp4", "mov", "avi", "mkv", "webm", "flv"]);
+
+export const GENERAL_CHAT_RESOURCE_TAG = "通用对话生成";
+export const GENERAL_CHAT_RESOURCE_HASH_TAG_PREFIX = "sys:gchat:path:";
+export const GENERAL_CHAT_RESOURCE_SESSION_TAG_PREFIX = "sys:gchat:session:";
+
+function normalizePathForHash(filePath: string): string {
+  return filePath.trim().replace(/\\/g, "/");
+}
+
+function hashString(value: string): string {
+  let hash = 5381;
+  for (let index = 0; index < value.length; index += 1) {
+    hash = (hash * 33) ^ value.charCodeAt(index);
+  }
+  return (hash >>> 0).toString(36);
+}
+
+export function buildGeneralChatResourceHash(filePath: string): string {
+  return hashString(normalizePathForHash(filePath));
+}
+
+export function buildGeneralChatResourceTags(
+  filePath: string,
+  sessionId?: string | null,
+): string[] {
+  const tags = [
+    GENERAL_CHAT_RESOURCE_TAG,
+    `${GENERAL_CHAT_RESOURCE_HASH_TAG_PREFIX}${buildGeneralChatResourceHash(filePath)}`,
+  ];
+
+  const normalizedSessionId = sessionId?.trim();
+  if (normalizedSessionId) {
+    tags.push(
+      `${GENERAL_CHAT_RESOURCE_SESSION_TAG_PREFIX}${normalizedSessionId}`,
+    );
+  }
+
+  return tags;
+}
+
+export function extractGeneralChatResourceHash(
+  material: Pick<Material, "tags">,
+): string | null {
+  const matchedTag = material.tags.find((tag) =>
+    tag.startsWith(GENERAL_CHAT_RESOURCE_HASH_TAG_PREFIX),
+  );
+
+  return matchedTag
+    ? matchedTag.slice(GENERAL_CHAT_RESOURCE_HASH_TAG_PREFIX.length)
+    : null;
+}
+
+export function hasGeneralChatResourceSync(
+  materials: Array<Pick<Material, "tags">>,
+  filePath: string,
+): boolean {
+  const targetHash = buildGeneralChatResourceHash(filePath);
+  return materials.some(
+    (material) => extractGeneralChatResourceHash(material) === targetHash,
+  );
+}
+
+export function inferGeneralChatResourceMaterialType(
+  filePath: string,
+): MaterialType | null {
+  const normalizedPath = filePath.trim();
+  if (!normalizedPath) {
+    return null;
+  }
+
+  const normalizedName = normalizedPath.replace(/\\/g, "/");
+  const fileName = normalizedName.split("/").pop() || normalizedName;
+  const dotIndex = fileName.lastIndexOf(".");
+  const extension =
+    dotIndex >= 0 && dotIndex < fileName.length - 1
+      ? fileName.slice(dotIndex + 1).toLowerCase()
+      : "";
+
+  if (IMAGE_EXTENSIONS.has(extension)) {
+    return "image";
+  }
+  if (AUDIO_EXTENSIONS.has(extension)) {
+    return "audio";
+  }
+  if (VIDEO_EXTENSIONS.has(extension)) {
+    return "video";
+  }
+
+  return "document";
+}
+
+export function buildGeneralChatResourceDescription(
+  sessionId?: string | null,
+): string {
+  const normalizedSessionId = sessionId?.trim();
+  if (!normalizedSessionId) {
+    return "通用对话自动入库";
+  }
+
+  return `通用对话自动入库 · 会话 ${normalizedSessionId}`;
+}
diff --git a/src/components/agent/chat/utils/harnessSkills.test.ts b/src/components/agent/chat/utils/harnessSkills.test.ts
new file mode 100644
index 000000000..313071b83
--- /dev/null
+++ b/src/components/agent/chat/utils/harnessSkills.test.ts
@@ -0,0 +1,60 @@
+import { describe, expect, it } from "vitest";
+import { collectConversationSkillNames } from "./harnessSkills";
+import type { Message } from "../types";
+
+function createMessage(
+  overrides: Partial<Message> & Pick<Message, "role" | "content">,
+): Message {
+  return {
+    id: `${overrides.role}-${overrides.content}`,
+    timestamp: new Date("2026-03-14T09:00:00.000Z"),
+    ...overrides,
+  };
+}
+
+describe("collectConversationSkillNames", () => {
+  it("应提取用户消息中显式引用的 slash skill", () => {
+    const messages: Message[] = [
+      createMessage({
+        role: "user",
+        content: "/research 帮我整理这个主题",
+      }),
+      createMessage({
+        role: "assistant",
+        content: "好的，我先开始处理。",
+      }),
+      createMessage({
+        role: "user",
+        content: "/typesetting 输出可发布版本",
+      }),
+    ];
+
+    expect(collectConversationSkillNames(messages)).toEqual([
+      "research",
+      "typesetting",
+    ]);
+  });
+
+  it("应忽略普通消息、助手消息与重复 skill", () => {
+    const messages: Message[] = [
+      createMessage({
+        role: "user",
+        content: "先帮我看一下当前稿子",
+      }),
+      createMessage({
+        role: "assistant",
+        content: "/research 这不是用户消息，不应计入",
+      }),
+      createMessage({
+        role: "user",
+        content: "/research 第一轮",
+      }),
+      createMessage({
+        role: "user",
+        content: "/research 第二轮",
+      }),
+    ];
+
+    expect(collectConversationSkillNames(messages)).toEqual(["research"]);
+  });
+});
diff --git a/src/components/agent/chat/utils/harnessSkills.ts b/src/components/agent/chat/utils/harnessSkills.ts
new file mode 100644
index 000000000..5b1de1a82
--- /dev/null
+++ b/src/components/agent/chat/utils/harnessSkills.ts
@@ -0,0 +1,19 @@
+import type { Message } from "../types";
+import { parseSkillSlashCommand } from "../hooks/skillCommand";
+
+export function collectConversationSkillNames(messages: Message[]): string[] {
+  const skillNames = new Set<string>();
+
+  messages.forEach((message) => {
+    if (message.role !== "user") {
+      return;
+    }
+
+    const skillName = parseSkillSlashCommand(message.content)?.skillName;
+    if (skillName) {
+      skillNames.add(skillName);
+    }
+  });
+
+  return [...skillNames].sort();
+}
diff --git a/src/components/agent/chat/utils/skillFailure.ts b/src/components/agent/chat/utils/skillFailure.ts
index f4a863f37..2da76e1c3 100644
--- a/src/components/agent/chat/utils/skillFailure.ts
+++ b/src/components/agent/chat/utils/skillFailure.ts
@@ -17,7 +17,7 @@ export interface SkillFailureInfo {
 const DEFAULT_FAILURE: SkillFailureInfo = {
   code: "skill_execute_failed",
   message: "执行过程中发生未知错误",
-  recoveryHint: "请重试；若持续失败，请切换模型或新建话题后再试。",
+  recoveryHint: "请重试；若持续失败，请切换模型或新建任务后再试。",
 };
 
 function normalizeErrorMessage(error: unknown): string {
@@ -78,7 +78,7 @@ function byCode(code: SkillFailureCode, message: string): SkillFailureInfo {
       return {
         code,
         message,
-        recoveryHint: "请先新建话题或重新选择项目后再执行技能。",
+        recoveryHint: "请先新建任务或重新选择项目后再执行技能。",
       };
     case "skill_provider_unavailable":
       return {
@@ -90,7 +90,7 @@ function byCode(code: SkillFailureCode, message: string): SkillFailureInfo {
       return {
         code,
         message,
-        recoveryHint: "项目目录已变化，请回到首页重新进入该项目后再试。",
+        recoveryHint: "项目目录已变化，请返回新建任务重新进入该项目后再试。",
       };
     case "skill_stream_failed":
       return {
diff --git a/src/components/api-server/ApiServerPage.tsx b/src/components/api-server/ApiServerPage.tsx
index f9d21008f..7aa81dd15 100644
--- a/src/components/api-server/ApiServerPage.tsx
+++ b/src/components/api-server/ApiServerPage.tsx
@@ -1,16 +1,24 @@
-import { useState, useEffect, useMemo } from "react";
+import { useState, useEffect, useMemo, type ReactNode } from "react";
 import {
+  Activity,
+  AlertCircle,
   Play,
   Copy,
   Check,
   ChevronDown,
   ChevronUp,
+  Globe2,
   RefreshCw,
+  Server,
+  ShieldCheck,
+  Zap,
+  type LucideIcon,
 } from "lucide-react";
 import * as Select from "@radix-ui/react-select";
 import { invoke } from "@tauri-apps/api/core";
 import { LogsTab } from "./LogsTab";
 import { ProviderIcon } from "@/icons/providers";
+import { cn } from "@/lib/utils";
 import { reloadCredentials } from "@/lib/api/providerRuntime";
 import { revealPathInFinder } from "@/lib/api/fileSystem";
 import {
@@ -84,6 +92,74 @@ interface ApiServerPageProps {
 
 type GatewayMode = "local" | "lan";
 
+interface GatewayPanelProps {
+  icon: LucideIcon;
+  title: string;
+  description?: string;
+  aside?: ReactNode;
+  children: ReactNode;
+  className?: string;
+}
+
+interface GatewayStatCardProps {
+  label: string;
+  value: string;
+  description: string;
+}
+
+const PANEL_CLASS_NAME =
+  "rounded-[26px] border border-slate-200/80 bg-white p-5 shadow-sm shadow-slate-950/5";
+const INPUT_CLASS_NAME =
+  "h-11 rounded-[16px] border border-slate-200 bg-white px-3.5 text-sm text-slate-700 outline-none transition placeholder:text-slate-400 focus:border-slate-300 focus:ring-2 focus:ring-slate-200 disabled:cursor-not-allowed disabled:bg-slate-100/80 disabled:text-slate-400";
+const BUTTON_SECONDARY_CLASS_NAME =
+  "inline-flex items-center justify-center gap-2 rounded-full border border-slate-200 bg-white px-4 py-2 text-sm font-medium text-slate-700 transition hover:border-slate-300 hover:text-slate-900 disabled:cursor-not-allowed disabled:opacity-50";
+const BUTTON_PRIMARY_CLASS_NAME =
+  "inline-flex items-center justify-center gap-2 rounded-full bg-slate-900 px-4 py-2 text-sm font-medium text-white transition hover:bg-slate-800 disabled:cursor-not-allowed disabled:opacity-50";
+
+function GatewayPanel({
+  icon: Icon,
+  title,
+  description,
+  aside,
+  children,
+  className,
+}: GatewayPanelProps) {
+  return (
+    <article className={cn(PANEL_CLASS_NAME, className)}>
+      <div className="flex flex-col gap-4 sm:flex-row sm:items-start sm:justify-between">
+        <div className="space-y-1">
+          <div className="flex items-center gap-2 text-sm font-semibold text-slate-900">
+            <Icon className="h-4 w-4 text-sky-600" />
+            {title}
+          </div>
+          {description ? (
+            <p className="text-sm leading-6 text-slate-500">{description}</p>
+          ) : null}
+        </div>
+        {aside ? (
+          <div className="flex flex-wrap items-center gap-2">{aside}</div>
+        ) : null}
+      </div>
+
+      <div className="mt-5">{children}</div>
+    </article>
+  );
+}
+
+function GatewayStatCard({ label, value, description }: GatewayStatCardProps) {
+  return (
+    <div className="rounded-[22px] border border-white/90 bg-white/88 p-4 shadow-sm">
+      <p className="text-xs font-medium tracking-[0.12em] text-slate-500">
+        {label}
+      </p>
+      <p className="mt-3 text-3xl font-semibold tracking-tight text-slate-900">
+        {value}
+      </p>
+      <p className="mt-2 text-xs leading-5 text-slate-500">{description}</p>
+    </div>
+  );
+}
+
 const getGatewayModeByHost = (host?: string | null): GatewayMode => {
   const normalized = (host || "").trim().toLowerCase();
   if (!normalized) return "local";
@@ -221,7 +297,7 @@ export function ApiServerPage({ hideHeader = false }: ApiServerPageProps) {
     typeof window !== "undefined" &&
     Boolean(
       (window as any).__TAURI__?.core?.invoke ||
-        (window as any).__TAURI__?.invoke,
+      (window as any).__TAURI__?.invoke,
     );
 
   const fetchStatus = async () => {
@@ -1213,149 +1289,628 @@ export function ApiServerPage({ hideHeader = false }: ApiServerPageProps) {
 
   const getStatusBadge = (result?: TestState) => {
     if (!result || result.status === "idle") {
-      return <span className="text-xs text-gray-400">未测试</span>;
+      return (
+        <span className="rounded-full border border-slate-200 bg-slate-100 px-2.5 py-1 text-xs font-medium text-slate-500">
+          未测试
+        </span>
+      );
     }
     if (result.status === "loading") {
-      return <span className="text-xs text-blue-500">测试中...</span>;
+      return (
+        <span className="rounded-full border border-sky-200 bg-sky-50 px-2.5 py-1 text-xs font-medium text-sky-700">
+          测试中...
+        </span>
+      );
     }
     if (result.status === "success") {
-      return <span className="text-xs text-green-600">{result.time}ms</span>;
+      return (
+        <span className="rounded-full border border-emerald-200 bg-emerald-50 px-2.5 py-1 text-xs font-medium text-emerald-700">
+          {result.time}ms
+        </span>
+      );
     }
     return (
-      <span className="text-xs text-red-500">
+      <span className="rounded-full border border-rose-200 bg-rose-50 px-2.5 py-1 text-xs font-medium text-rose-700">
         失败 {result.httpStatus ? `(${result.httpStatus})` : ""}
       </span>
     );
   };
 
+  const activeProviderLabel =
+    availableProviders.find((provider) => provider.id === defaultProvider)
+      ?.label ||
+    providerLabels[defaultProvider] ||
+    defaultProvider;
+  const gatewayModeLabel = gatewayMode === "local" ? "仅本机" : "内网共享";
+  const gatewayStatusLabel = status?.running ? "运行中" : "已停止";
+
   return (
-    <div className="space-y-4">
-      {!hideHeader && (
-        <div className="flex items-start justify-between">
-          <div className="flex-1">
-            <div className="flex items-end gap-3">
-              <h2 className="text-2xl font-bold">团队共享网关（内网）</h2>
-              <div className="flex items-center gap-2 text-sm text-muted-foreground pb-0.5">
-                <span className="flex items-center gap-1.5">
-                  <span
-                    className={`inline-block h-2 w-2 rounded-full ${status?.running ? "bg-green-500" : "bg-red-500"}`}
-                  />
-                  {status?.running ? "运行中" : "已停止"}
+    <div className="space-y-6 pb-8">
+      {message ? (
+        <div
+          className={cn(
+            "flex items-center justify-between gap-4 rounded-[20px] border px-4 py-3 text-sm shadow-sm shadow-slate-950/5",
+            message.type === "success"
+              ? "border-emerald-200 bg-emerald-50/90 text-emerald-700"
+              : "border-rose-200 bg-rose-50/90 text-rose-700",
+          )}
+        >
+          <div className="flex items-center gap-2">
+            {message.type === "success" ? (
+              <Check className="h-4 w-4" />
+            ) : (
+              <AlertCircle className="h-4 w-4" />
+            )}
+            <span>{message.text}</span>
+          </div>
+          <button
+            type="button"
+            onClick={fetchDiagnostics}
+            disabled={diagnosticsLoading}
+            className="rounded-full border border-current/15 bg-white/80 px-3 py-1.5 text-xs font-medium transition hover:bg-white disabled:opacity-50"
+          >
+            {diagnosticsLoading ? "刷新中..." : "刷新诊断"}
+          </button>
+        </div>
+      ) : null}
+
+      <section className="relative overflow-hidden rounded-[30px] border border-emerald-200/70 bg-[linear-gradient(135deg,rgba(244,251,248,0.98)_0%,rgba(248,250,252,0.98)_45%,rgba(241,246,255,0.96)_100%)] shadow-sm shadow-slate-950/5">
+        <div className="pointer-events-none absolute -left-20 top-[-72px] h-56 w-56 rounded-full bg-emerald-200/30 blur-3xl" />
+        <div className="pointer-events-none absolute right-[-76px] top-[-24px] h-56 w-56 rounded-full bg-sky-200/28 blur-3xl" />
+
+        <div className="relative flex flex-col gap-6 p-6 lg:p-8">
+          <div className="grid gap-6 xl:grid-cols-[minmax(0,1.08fr)_minmax(380px,0.92fr)] xl:items-stretch">
+            <div className="max-w-3xl space-y-5">
+              <span className="inline-flex items-center rounded-full border border-emerald-200 bg-white/85 px-3 py-1 text-xs font-semibold tracking-[0.16em] text-emerald-700 shadow-sm">
+                GATEWAY CONTROL
+              </span>
+              <div className="space-y-2">
+                <p className="text-[28px] font-semibold tracking-tight text-slate-900">
+                  {hideHeader
+                    ? "统一控制内网共享、默认 Provider 与兼容性测试"
+                    : "团队共享网关（内网）"}
+                </p>
+                <p className="max-w-2xl text-sm leading-7 text-slate-600">
+                  Agent 默认直连 Provider。只有在需要让同网段设备复用这套服务、
+                  默认模型和兼容接口时，再开启共享网关即可。
+                </p>
+              </div>
+
+              <div className="flex flex-wrap items-center gap-2">
+                <span
+                  className={cn(
+                    "rounded-full border px-3 py-1.5 text-xs font-medium shadow-sm",
+                    status?.running
+                      ? "border-emerald-200 bg-white/90 text-emerald-700"
+                      : "border-slate-200 bg-white/88 text-slate-600",
+                  )}
+                >
+                  共享状态：{gatewayStatusLabel}
+                </span>
+                <span className="rounded-full border border-white/90 bg-white/88 px-3 py-1.5 text-xs font-medium text-slate-600 shadow-sm">
+                  共享模式：{gatewayModeLabel}
+                </span>
+                <span className="rounded-full border border-white/90 bg-white/88 px-3 py-1.5 text-xs font-medium text-slate-600 shadow-sm">
+                  默认 Provider：{activeProviderLabel}
+                </span>
+                <span className="rounded-full border border-white/90 bg-white/88 px-3 py-1.5 text-xs font-medium text-slate-600 shadow-sm">
+                  测试地址：{serverUrl}
                 </span>
-                <span>·</span>
-                <span>{status?.requests || 0} 请求</span>
-                <span>·</span>
-                <span className="capitalize">{defaultProvider}</span>
               </div>
             </div>
-            <p className="text-muted-foreground text-sm mt-1">
-              Agent 默认直连 Provider；需要给内网同事接入时再开启共享网关
-            </p>
+
+            <div className="grid gap-3 sm:grid-cols-3 xl:grid-cols-1 xl:content-start">
+              <GatewayStatCard
+                label="共享状态"
+                value={gatewayStatusLabel}
+                description={
+                  status?.running
+                    ? "网关正在对外提供兼容接口。"
+                    : "当前未对外开放，可先完成配置再启动。"
+                }
+              />
+              <GatewayStatCard
+                label="累计请求"
+                value={(status?.requests ?? 0).toString()}
+                description="用于快速观察当前网关是否处于活跃使用状态。"
+              />
+              <GatewayStatCard
+                label="可测端点"
+                value={testEndpoints.length.toString()}
+                description="会随默认 Provider 和模型协议类型自动切换。"
+              />
+            </div>
           </div>
         </div>
-      )}
+      </section>
 
-      {message && (
-        <div
-          className={`flex items-center gap-2 rounded-lg border p-3 text-sm ${
-            message.type === "success"
-              ? "border-green-500 bg-green-50 text-green-700 dark:bg-green-950/30"
-              : "border-red-500 bg-red-50 text-red-700 dark:bg-red-950/30"
-          }`}
-        >
-          {message.type === "success" ? (
-            <Check className="h-4 w-4" />
-          ) : (
-            <RefreshCw className="h-4 w-4" />
-          )}
-          {message.text}
-        </div>
-      )}
-
-      {/* Tabs */}
-      <div className="flex gap-2 border-b overflow-x-auto">
+      <div className="inline-flex flex-wrap gap-1 rounded-[20px] border border-slate-200/80 bg-white p-1 shadow-sm shadow-slate-950/5">
         {[
           { id: "server" as TabId, name: "网关控制" },
           { id: "logs" as TabId, name: "网关日志" },
         ].map((tab) => (
           <button
             key={tab.id}
+            type="button"
             onClick={() => setActiveTab(tab.id)}
-            className={`px-4 py-2 text-sm font-medium border-b-2 -mb-px whitespace-nowrap ${
+            className={cn(
+              "rounded-full px-4 py-2 text-sm font-medium transition",
               activeTab === tab.id
-                ? "border-primary text-primary"
-                : "border-transparent text-muted-foreground hover:text-foreground"
-            }`}
+                ? "bg-slate-900 text-white"
+                : "text-slate-500 hover:text-slate-900",
+            )}
           >
             {tab.name}
           </button>
         ))}
       </div>
 
-      {/* Server Control Tab */}
-      {activeTab === "server" && (
-        <div className="flex flex-col gap-4">
-          {/* Server Control - 紧凑版 */}
-          <div className="rounded-lg border bg-card p-4">
-            <div className="flex flex-wrap items-center gap-4">
-              <button
-                className={`shrink-0 whitespace-nowrap rounded-lg px-4 py-1.5 text-sm font-medium leading-none text-white disabled:opacity-50 ${
-                  status?.running
-                    ? "bg-red-600 hover:bg-red-700"
-                    : "bg-green-600 hover:bg-green-700"
-                }`}
-                onClick={status?.running ? handleStop : handleStart}
-                disabled={loading}
-              >
-                {loading
-                  ? "处理中..."
-                  : status?.running
-                    ? "关闭共享"
-                    : "开启共享"}
-              </button>
-              <div className="flex items-center gap-3 text-sm flex-wrap">
-                <div className="flex items-center gap-2">
-                  <span className="text-muted-foreground">共享模式:</span>
-                  <div className="inline-flex rounded-md border border-input p-0.5">
-                    <button
-                      onClick={() => {
-                        void handleGatewayModeChange("local");
-                      }}
-                      disabled={status?.running}
-                      className={`whitespace-nowrap rounded px-2 py-1 text-xs transition-colors ${
-                        gatewayMode === "local"
-                          ? "bg-primary/10 text-primary"
-                          : "text-muted-foreground hover:text-foreground"
-                      } disabled:cursor-not-allowed disabled:opacity-50`}
-                    >
-                      仅本机
-                    </button>
-                    <button
-                      onClick={() => {
-                        void handleGatewayModeChange("lan");
-                      }}
-                      disabled={status?.running}
-                      className={`whitespace-nowrap rounded px-2 py-1 text-xs transition-colors ${
-                        gatewayMode === "lan"
-                          ? "bg-primary/10 text-primary"
-                          : "text-muted-foreground hover:text-foreground"
-                      } disabled:cursor-not-allowed disabled:opacity-50`}
-                    >
-                      内网共享
-                    </button>
-                  </div>
-                </div>
-                <div className="flex items-center gap-2">
-                  <span className="text-muted-foreground">共享地址:</span>
-                  <Select.Root
-                    value={
-                      status?.running ? status.host : editHost || "127.0.0.1"
-                    }
-                    onValueChange={handleHostChange}
-                    disabled={status?.running}
+      {activeTab === "server" ? (
+        <div className="grid gap-6 xl:grid-cols-[minmax(0,1.18fr)_minmax(340px,0.82fr)]">
+          <div className="space-y-6">
+            <GatewayPanel
+              icon={Server}
+              title="网关控制"
+              description="把启动、共享模式、监听地址和鉴权配置集中在同一个控制区。"
+              aside={
+                <span
+                  className={cn(
+                    "rounded-full border px-3 py-1 text-xs font-medium",
+                    status?.running
+                      ? "border-emerald-200 bg-emerald-50 text-emerald-700"
+                      : "border-slate-200 bg-slate-100 text-slate-600",
+                  )}
+                >
+                  {status?.running ? "已对外共享" : "待启动"}
+                </span>
+              }
+            >
+              <div className="space-y-5">
+                <div className="flex flex-wrap items-center gap-3">
+                  <button
+                    type="button"
+                    className={cn(
+                      "inline-flex items-center justify-center gap-2 rounded-full px-4 py-2 text-sm font-medium text-white transition disabled:cursor-not-allowed disabled:opacity-50",
+                      status?.running
+                        ? "bg-rose-600 hover:bg-rose-700"
+                        : "bg-emerald-600 hover:bg-emerald-700",
+                    )}
+                    onClick={status?.running ? handleStop : handleStart}
+                    disabled={loading}
                   >
-                    <Select.Trigger className="inline-flex min-w-[200px] items-center justify-between gap-2 rounded-md border border-input bg-background px-3 py-1.5 text-sm shadow-sm transition-colors hover:bg-accent hover:text-accent-foreground focus:outline-none focus:ring-2 focus:ring-ring disabled:cursor-not-allowed disabled:opacity-50">
-                      <Select.Value />
+                    {loading ? (
+                      <RefreshCw className="h-4 w-4 animate-spin" />
+                    ) : null}
+                    {loading
+                      ? "处理中..."
+                      : status?.running
+                        ? "关闭共享"
+                        : "开启共享"}
+                  </button>
+                  <button
+                    type="button"
+                    onClick={handleSaveServerConfig}
+                    disabled={loading || status?.running}
+                    className={BUTTON_SECONDARY_CLASS_NAME}
+                    title={status?.running ? "请先关闭共享再修改配置" : ""}
+                  >
+                    保存配置
+                  </button>
+                  <span className="rounded-full border border-slate-200 bg-slate-100 px-3 py-1 text-xs font-medium text-slate-500">
+                    当前测试地址：{serverUrl}
+                  </span>
+                </div>
+
+                <div className="grid gap-4 md:grid-cols-2">
+                  <article className="rounded-[22px] border border-slate-200/80 bg-slate-50/60 p-4">
+                    <div className="flex items-start justify-between gap-3">
+                      <div>
+                        <h3 className="text-sm font-semibold text-slate-900">
+                          共享模式
+                        </h3>
+                        <p className="mt-1 text-xs leading-5 text-slate-500">
+                          仅本机适合本地调试，内网共享适合同网段协作接入。
+                        </p>
+                      </div>
+                      <span className="rounded-full border border-slate-200 bg-white px-3 py-1 text-xs font-medium text-slate-500">
+                        当前：{gatewayModeLabel}
+                      </span>
+                    </div>
+
+                    <div className="mt-4 grid gap-3 sm:grid-cols-2">
+                      <button
+                        type="button"
+                        onClick={() => {
+                          void handleGatewayModeChange("local");
+                        }}
+                        disabled={status?.running}
+                        className={cn(
+                          "rounded-[18px] border px-4 py-3 text-left transition",
+                          gatewayMode === "local"
+                            ? "border-slate-900 bg-slate-900 text-white"
+                            : "border-slate-200 bg-white text-slate-700 hover:border-slate-300",
+                          status?.running && "cursor-not-allowed opacity-50",
+                        )}
+                      >
+                        <p className="text-sm font-semibold">仅本机</p>
+                        <p
+                          className={cn(
+                            "mt-1 text-xs leading-5",
+                            gatewayMode === "local"
+                              ? "text-white/70"
+                              : "text-slate-500",
+                          )}
+                        >
+                          只允许当前设备访问网关。
+                        </p>
+                      </button>
+                      <button
+                        type="button"
+                        onClick={() => {
+                          void handleGatewayModeChange("lan");
+                        }}
+                        disabled={status?.running}
+                        className={cn(
+                          "rounded-[18px] border px-4 py-3 text-left transition",
+                          gatewayMode === "lan"
+                            ? "border-slate-900 bg-slate-900 text-white"
+                            : "border-slate-200 bg-white text-slate-700 hover:border-slate-300",
+                          status?.running && "cursor-not-allowed opacity-50",
+                        )}
+                      >
+                        <p className="text-sm font-semibold">内网共享</p>
+                        <p
+                          className={cn(
+                            "mt-1 text-xs leading-5",
+                            gatewayMode === "lan"
+                              ? "text-white/70"
+                              : "text-slate-500",
+                          )}
+                        >
+                          对同网段设备暴露兼容接口。
+                        </p>
+                      </button>
+                    </div>
+                  </article>
+
+                  <article className="rounded-[22px] border border-slate-200/80 bg-slate-50/60 p-4">
+                    <div>
+                      <h3 className="text-sm font-semibold text-slate-900">
+                        网关地址与鉴权
+                      </h3>
+                      <p className="mt-1 text-xs leading-5 text-slate-500">
+                        运行中会锁定配置，避免协作接入过程中误改监听地址。
+                      </p>
+                    </div>
+
+                    <div className="mt-4 grid gap-3">
+                      <div className="space-y-1.5">
+                        <label className="text-xs font-medium text-slate-500">
+                          共享地址
+                        </label>
+                        <Select.Root
+                          value={
+                            status?.running
+                              ? status.host
+                              : editHost || "127.0.0.1"
+                          }
+                          onValueChange={handleHostChange}
+                          disabled={status?.running}
+                        >
+                          <Select.Trigger
+                            className={cn(
+                              INPUT_CLASS_NAME,
+                              "inline-flex w-full items-center justify-between gap-2",
+                            )}
+                          >
+                            <Select.Value />
+                            <Select.Icon>
+                              <ChevronDown className="h-4 w-4 opacity-50" />
+                            </Select.Icon>
+                          </Select.Trigger>
+                          <Select.Portal>
+                            <Select.Content
+                              position="popper"
+                              side="bottom"
+                              align="start"
+                              sideOffset={4}
+                              className="z-50 min-w-[var(--radix-select-trigger-width)] overflow-hidden rounded-[18px] border border-slate-200 bg-white text-slate-700 shadow-lg"
+                            >
+                              <Select.Viewport className="p-1">
+                                {hostOptions.map((ip) => {
+                                  let label = "(局域网)";
+                                  if (ip === "127.0.0.1") {
+                                    label = "(仅本机)";
+                                  } else if (ip === "0.0.0.0") {
+                                    label = "(所有接口)";
+                                  } else if (
+                                    !networkInfo?.all_ips.includes(ip)
+                                  ) {
+                                    label = "(已配置)";
+                                  }
+
+                                  return (
+                                    <Select.Item
+                                      key={ip}
+                                      value={ip}
+                                      className="relative flex cursor-pointer select-none items-center rounded-[14px] px-8 py-2.5 text-sm outline-none transition hover:bg-slate-100 focus:bg-slate-100 data-[disabled]:pointer-events-none data-[disabled]:opacity-50"
+                                    >
+                                      <Select.ItemIndicator className="absolute left-2 flex h-3.5 w-3.5 items-center justify-center">
+                                        <Check className="h-4 w-4" />
+                                      </Select.ItemIndicator>
+                                      <Select.ItemText>
+                                        <span className="flex items-center gap-2">
+                                          <span className="font-mono">
+                                            {ip}
+                                          </span>
+                                          <span className="text-xs text-slate-500">
+                                            {label}
+                                          </span>
+                                        </span>
+                                      </Select.ItemText>
+                                    </Select.Item>
+                                  );
+                                })}
+                              </Select.Viewport>
+                            </Select.Content>
+                          </Select.Portal>
+                        </Select.Root>
+                      </div>
+
+                      <div className="grid gap-3 sm:grid-cols-[120px_minmax(0,1fr)]">
+                        <div className="space-y-1.5">
+                          <label className="text-xs font-medium text-slate-500">
+                            端口
+                          </label>
+                          <input
+                            type="number"
+                            value={editPort}
+                            onChange={(e) => setEditPort(e.target.value)}
+                            className={INPUT_CLASS_NAME}
+                            disabled={status?.running}
+                          />
+                        </div>
+                        <div className="space-y-1.5">
+                          <label className="text-xs font-medium text-slate-500">
+                            API Key
+                          </label>
+                          <input
+                            type="text"
+                            value={editApiKey}
+                            onChange={(e) => setEditApiKey(e.target.value)}
+                            className={INPUT_CLASS_NAME}
+                            disabled={status?.running}
+                          />
+                        </div>
+                      </div>
+                    </div>
+                  </article>
+                </div>
+
+                <div className="space-y-3">
+                  <div className="rounded-[18px] border border-slate-200 bg-slate-50/70 px-4 py-3 text-xs leading-5 text-slate-500">
+                    {!status?.running
+                      ? "仅本机模式只允许当前设备访问；内网共享模式会对同网段设备开放。建议完成地址与 API Key 配置后再开启共享。"
+                      : `当前处于${gatewayModeLabel}模式。为了避免影响协作者访问，修改配置前请先关闭共享。`}
+                  </div>
+                  {hostMismatch ? (
+                    <div className="rounded-[18px] border border-sky-200 bg-sky-50/80 px-4 py-3 text-xs leading-5 text-sky-700">
+                      配置的共享地址 {config?.server.host}{" "}
+                      当前不可用，运行时已自动切换到
+                      {status?.host}。关闭共享后可更新为新的可用地址。
+                    </div>
+                  ) : null}
+                </div>
+              </div>
+            </GatewayPanel>
+
+            <GatewayPanel
+              icon={ShieldCheck}
+              title="默认 Provider"
+              description="选择网关默认转发的服务来源，并直接查看当前可用凭证。"
+              aside={
+                providerSwitchMsg ? (
+                  <span className="inline-flex items-center gap-1 rounded-full border border-emerald-200 bg-emerald-50 px-3 py-1 text-xs font-medium text-emerald-700">
+                    <Check className="h-3 w-3" />
+                    {providerSwitchMsg}
+                  </span>
+                ) : null
+              }
+            >
+              {availableProviders.length === 0 ? (
+                <div className="rounded-[22px] border border-dashed border-slate-300 bg-slate-50/70 px-4 py-8 text-center text-sm text-slate-500">
+                  暂无可用凭证，请先在凭证池或 API Key 设置中添加凭证。
+                </div>
+              ) : (
+                <div className="space-y-5">
+                  <div className="flex flex-wrap gap-2.5">
+                    {availableProviders.map((p) => (
+                      <button
+                        key={p.id}
+                        type="button"
+                        onClick={() => handleSetDefaultProvider(p.id)}
+                        disabled={loading}
+                        className={cn(
+                          "flex items-center gap-1.5 rounded-full border px-3.5 py-2 text-sm transition shadow-sm",
+                          defaultProvider === p.id
+                            ? "border-slate-900 bg-slate-900 text-white"
+                            : "border-slate-200 bg-white text-slate-600 hover:border-slate-300 hover:text-slate-900",
+                          loading && "cursor-not-allowed opacity-50",
+                        )}
+                      >
+                        <ProviderIcon
+                          providerType={
+                            p.iconType as Parameters<
+                              typeof ProviderIcon
+                            >[0]["providerType"]
+                          }
+                          size={14}
+                        />
+                        {p.label}
+                        <span
+                          className={cn(
+                            "text-xs",
+                            defaultProvider === p.id
+                              ? "text-white/70"
+                              : "text-slate-400",
+                          )}
+                        >
+                          {p.totalCount}
+                          {p.source === "both"
+                            ? " 混合"
+                            : p.source === "api_key"
+                              ? " Key"
+                              : ""}
+                        </span>
+                      </button>
+                    ))}
+                  </div>
+
+                  {(() => {
+                    const poolProviderType =
+                      defaultProvider === "codex_oauth"
+                        ? "codex"
+                        : defaultProvider;
+                    const currentOverview = poolOverview.find(
+                      (o) => o.provider_type === poolProviderType,
+                    );
+                    const oauthCredentials = (
+                      currentOverview?.credentials || []
+                    ).filter((cred) => !cred.is_disabled);
+                    const matchingApiKeyProviders =
+                      defaultProvider === "codex_oauth"
+                        ? []
+                        : apiKeyProviders.filter((p) => {
+                            if (p.id === defaultProvider && p.enabled) {
+                              return true;
+                            }
+                            const mappedId = mapApiKeyProviderToId(p.type);
+                            return mappedId === defaultProvider && p.enabled;
+                          });
+                    const apiKeys = matchingApiKeyProviders.flatMap((p) =>
+                      p.api_keys.filter((k) => k.enabled),
+                    );
+
+                    if (oauthCredentials.length === 0 && apiKeys.length === 0) {
+                      return (
+                        <div className="rounded-[22px] border border-dashed border-slate-300 bg-slate-50/70 px-4 py-8 text-center text-sm text-slate-500">
+                          当前 Provider 暂无可用凭证，请先补充账号或 API Key。
+                        </div>
+                      );
+                    }
+
+                    return (
+                      <div className="grid gap-4 xl:grid-cols-2">
+                        {oauthCredentials.length > 0 ? (
+                          <article className="rounded-[22px] border border-slate-200/80 bg-slate-50/60 p-4">
+                            <div className="flex items-center justify-between gap-3">
+                              <p className="text-sm font-semibold text-slate-900">
+                                OAuth 凭证
+                              </p>
+                              <span className="rounded-full border border-slate-200 bg-white px-3 py-1 text-xs font-medium text-slate-500">
+                                {oauthCredentials.length} 个
+                              </span>
+                            </div>
+                            <div className="mt-4 space-y-2">
+                              {oauthCredentials.map((cred) => (
+                                <div
+                                  key={cred.uuid}
+                                  className="flex items-center justify-between rounded-[18px] border border-slate-200 bg-white px-3 py-3 text-sm"
+                                >
+                                  <div className="flex items-center gap-2">
+                                    <span
+                                      className={cn(
+                                        "h-2.5 w-2.5 rounded-full",
+                                        cred.is_healthy
+                                          ? "bg-emerald-500"
+                                          : "bg-amber-400",
+                                      )}
+                                    />
+                                    <span className="text-slate-700">
+                                      {cred.name || cred.uuid.slice(0, 8)}
+                                    </span>
+                                    <span className="rounded-full bg-sky-100 px-2 py-0.5 text-[11px] font-medium text-sky-700">
+                                      OAuth
+                                    </span>
+                                  </div>
+                                  <span className="text-xs text-slate-500">
+                                    使用 {cred.usage_count} 次
+                                  </span>
+                                </div>
+                              ))}
+                            </div>
+                          </article>
+                        ) : null}
+
+                        {apiKeys.length > 0 ? (
+                          <article className="rounded-[22px] border border-slate-200/80 bg-slate-50/60 p-4">
+                            <div className="flex items-center justify-between gap-3">
+                              <p className="text-sm font-semibold text-slate-900">
+                                API Key
+                              </p>
+                              <span className="rounded-full border border-slate-200 bg-white px-3 py-1 text-xs font-medium text-slate-500">
+                                {apiKeys.length} 个
+                              </span>
+                            </div>
+                            <div className="mt-4 space-y-2">
+                              {apiKeys.map((key) => (
+                                <div
+                                  key={key.id}
+                                  className="flex items-center justify-between rounded-[18px] border border-slate-200 bg-white px-3 py-3 text-sm"
+                                >
+                                  <div className="flex items-center gap-2">
+                                    <span className="h-2.5 w-2.5 rounded-full bg-emerald-500" />
+                                    <span className="text-slate-700">
+                                      {key.alias || key.api_key_masked}
+                                    </span>
+                                    <span className="rounded-full bg-violet-100 px-2 py-0.5 text-[11px] font-medium text-violet-700">
+                                      API Key
+                                    </span>
+                                  </div>
+                                  <span className="text-xs text-slate-500">
+                                    使用 {key.usage_count} 次
+                                  </span>
+                                </div>
+                              ))}
+                            </div>
+                          </article>
+                        ) : null}
+                      </div>
+                    );
+                  })()}
+                </div>
+              )}
+            </GatewayPanel>
+
+            <GatewayPanel
+              icon={Zap}
+              title="网关 API 测试"
+              description="根据默认 Provider 自动切换协议与端点，直接验证当前网关是否可用。"
+              aside={
+                <button
+                  type="button"
+                  onClick={runAllTests}
+                  disabled={!status?.running || testEndpoints.length === 0}
+                  className={BUTTON_PRIMARY_CLASS_NAME}
+                >
+                  <Play className="h-4 w-4" />
+                  测试全部
+                </button>
+              }
+            >
+              <div className="space-y-5">
+                <div className="flex flex-col gap-3 lg:flex-row lg:items-center">
+                  <span className="text-sm font-medium text-slate-500">
+                    测试模型
+                  </span>
+                  <Select.Root value={testModel} onValueChange={setTestModel}>
+                    <Select.Trigger
+                      className={cn(
+                        INPUT_CLASS_NAME,
+                        "inline-flex min-w-[320px] items-center justify-between gap-2",
+                      )}
+                    >
+                      <Select.Value placeholder="选择模型..." />
                       <Select.Icon>
                         <ChevronDown className="h-4 w-4 opacity-50" />
                       </Select.Icon>
@@ -1366,706 +1921,457 @@ export function ApiServerPage({ hideHeader = false }: ApiServerPageProps) {
                         side="bottom"
                         align="start"
                         sideOffset={4}
-                        className="z-50 min-w-[var(--radix-select-trigger-width)] overflow-hidden rounded-md border border-border bg-white dark:bg-gray-900 text-foreground shadow-lg"
+                        className="z-50 max-h-[300px] min-w-[var(--radix-select-trigger-width)] overflow-hidden rounded-[18px] border border-slate-200 bg-white text-slate-700 shadow-lg"
                       >
-                        <Select.Viewport className="p-1 bg-white dark:bg-gray-900">
-                          {hostOptions.map((ip) => {
-                            // 确定 IP 类型标签
-                            let label = "(局域网)";
-                            if (ip === "127.0.0.1") {
-                              label = "(仅本机)";
-                            } else if (ip === "0.0.0.0") {
-                              label = "(所有接口)";
-                            } else if (!networkInfo?.all_ips.includes(ip)) {
-                              label = "(已配置)";
-                            }
-                            return (
-                              <Select.Item
-                                key={ip}
-                                value={ip}
-                                className="relative flex cursor-pointer select-none items-center rounded-sm px-8 py-2.5 text-sm outline-none transition-colors hover:bg-accent hover:text-accent-foreground focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50"
-                              >
-                                <Select.ItemIndicator className="absolute left-2 flex h-3.5 w-3.5 items-center justify-center">
-                                  <Check className="h-4 w-4" />
-                                </Select.ItemIndicator>
-                                <Select.ItemText>
-                                  <span className="flex items-center gap-2">
-                                    <span className="font-mono">{ip}</span>
-                                    <span className="text-xs text-muted-foreground">
-                                      {label}
-                                    </span>
+                        <Select.Viewport className="p-1">
+                          {allModels.map((model) => (
+                            <Select.Item
+                              key={model.id}
+                              value={model.id}
+                              className="relative flex cursor-pointer select-none items-center rounded-[14px] px-8 py-2.5 text-sm outline-none transition hover:bg-slate-100 focus:bg-slate-100 data-[disabled]:pointer-events-none data-[disabled]:opacity-50"
+                            >
+                              <Select.ItemIndicator className="absolute left-2 flex h-3.5 w-3.5 items-center justify-center">
+                                <Check className="h-4 w-4" />
+                              </Select.ItemIndicator>
+                              <Select.ItemText>
+                                <span className="flex items-center gap-2">
+                                  <span>{model.display_name}</span>
+                                  <span className="text-xs text-slate-400">
+                                    {model.provider_name}
                                   </span>
-                                </Select.ItemText>
-                              </Select.Item>
-                            );
-                          })}
+                                  <span
+                                    className={cn(
+                                      "rounded-full px-2 py-0.5 text-[11px] font-medium",
+                                      model.tier === "max"
+                                        ? "bg-violet-100 text-violet-700"
+                                        : model.tier === "pro"
+                                          ? "bg-sky-100 text-sky-700"
+                                          : "bg-slate-100 text-slate-600",
+                                    )}
+                                  >
+                                    {model.tier}
+                                  </span>
+                                </span>
+                              </Select.ItemText>
+                            </Select.Item>
+                          ))}
                         </Select.Viewport>
                       </Select.Content>
                     </Select.Portal>
                   </Select.Root>
                 </div>
-                <div className="flex items-center gap-2">
-                  <span className="text-muted-foreground">端口:</span>
-                  <input
-                    type="number"
-                    value={editPort}
-                    onChange={(e) => setEditPort(e.target.value)}
-                    className="w-20 rounded-md border border-input bg-background px-3 py-1.5 text-sm shadow-sm transition-colors focus:outline-none focus:ring-2 focus:ring-ring disabled:cursor-not-allowed disabled:opacity-50"
-                    disabled={status?.running}
-                  />
+
+                <div className="space-y-3">
+                  {testEndpoints.map((endpoint) => {
+                    const result = testResults[endpoint.id];
+                    const isExpanded = expandedTest === endpoint.id;
+                    const curlCmd = getCurlCommand(endpoint);
+                    const proxycastDebugHeaders = Object.entries(
+                      result?.responseHeaders || {},
+                    ).filter(([key]) =>
+                      key.toLowerCase().startsWith("x-proxycast-"),
+                    );
+
+                    return (
+                      <article
+                        key={endpoint.id}
+                        className="rounded-[22px] border border-slate-200/80 bg-slate-50/60"
+                      >
+                        <div className="flex flex-col gap-3 p-4 lg:flex-row lg:items-center lg:justify-between">
+                          <div className="flex flex-wrap items-center gap-3">
+                            <span
+                              className={cn(
+                                "rounded-full px-2.5 py-1 text-xs font-medium",
+                                endpoint.method === "GET"
+                                  ? "bg-emerald-100 text-emerald-700"
+                                  : "bg-sky-100 text-sky-700",
+                              )}
+                            >
+                              {endpoint.method}
+                            </span>
+                            <span className="text-sm font-semibold text-slate-900">
+                              {endpoint.name}
+                            </span>
+                            <code className="text-xs text-slate-500">
+                              {endpoint.path}
+                            </code>
+                            {getStatusBadge(result)}
+                          </div>
+                          <div className="flex items-center gap-2">
+                            <button
+                              type="button"
+                              onClick={() => copyCommand(endpoint.id, curlCmd)}
+                              className={cn(
+                                BUTTON_SECONDARY_CLASS_NAME,
+                                "h-10 rounded-full px-3",
+                              )}
+                              title="复制 curl 命令"
+                            >
+                              {copiedCmd === endpoint.id ? (
+                                <Check className="h-4 w-4 text-emerald-600" />
+                              ) : (
+                                <Copy className="h-4 w-4" />
+                              )}
+                            </button>
+                            <button
+                              type="button"
+                              onClick={() => runTest(endpoint)}
+                              disabled={
+                                !status?.running || result?.status === "loading"
+                              }
+                              className={BUTTON_PRIMARY_CLASS_NAME}
+                            >
+                              测试
+                            </button>
+                            <button
+                              type="button"
+                              onClick={() =>
+                                setExpandedTest(isExpanded ? null : endpoint.id)
+                              }
+                              className={cn(
+                                BUTTON_SECONDARY_CLASS_NAME,
+                                "h-10 rounded-full px-3",
+                              )}
+                            >
+                              {isExpanded ? (
+                                <ChevronUp className="h-4 w-4" />
+                              ) : (
+                                <ChevronDown className="h-4 w-4" />
+                              )}
+                            </button>
+                          </div>
+                        </div>
+
+                        {isExpanded ? (
+                          <div className="border-t border-slate-200/80 p-4">
+                            <div className="space-y-3">
+                              <div>
+                                <p className="mb-1 text-xs font-medium text-slate-500">
+                                  curl 命令
+                                </p>
+                                <pre className="overflow-x-auto rounded-[18px] bg-white p-3 text-xs text-slate-700">
+                                  {curlCmd}
+                                </pre>
+                              </div>
+                              {result?.response ? (
+                                <div>
+                                  <p className="mb-1 text-xs font-medium text-slate-500">
+                                    响应{" "}
+                                    {result.httpStatus &&
+                                      `(HTTP ${result.httpStatus})`}
+                                  </p>
+                                  <pre
+                                    className={cn(
+                                      "max-h-40 overflow-x-auto rounded-[18px] p-3 text-xs",
+                                      result.status === "success"
+                                        ? "bg-emerald-50 text-emerald-900"
+                                        : "bg-rose-50 text-rose-900",
+                                    )}
+                                  >
+                                    {(() => {
+                                      try {
+                                        return JSON.stringify(
+                                          JSON.parse(result.response),
+                                          null,
+                                          2,
+                                        );
+                                      } catch {
+                                        return result.response || "(空响应)";
+                                      }
+                                    })()}
+                                  </pre>
+                                </div>
+                              ) : null}
+                              {proxycastDebugHeaders.length > 0 ? (
+                                <div>
+                                  <p className="mb-1 text-xs font-medium text-slate-500">
+                                    调试头（x-proxycast-*）
+                                  </p>
+                                  <div className="space-y-1 rounded-[18px] bg-white p-3 text-xs">
+                                    {proxycastDebugHeaders.map(
+                                      ([key, value]) => (
+                                        <div
+                                          key={key}
+                                          className="flex items-start justify-between gap-3"
+                                        >
+                                          <code className="text-slate-500">
+                                            {key}
+                                          </code>
+                                          <code className="break-all text-right text-slate-700">
+                                            {value}
+                                          </code>
+                                        </div>
+                                      ),
+                                    )}
+                                  </div>
+                                </div>
+                              ) : null}
+                            </div>
+                          </div>
+                        ) : null}
+                      </article>
+                    );
+                  })}
                 </div>
-                <div className="flex items-center gap-2">
-                  <span className="text-muted-foreground">API Key:</span>
-                  <input
-                    type="text"
-                    value={editApiKey}
-                    onChange={(e) => setEditApiKey(e.target.value)}
-                    className="w-40 rounded-md border border-input bg-background px-3 py-1.5 text-sm shadow-sm transition-colors focus:outline-none focus:ring-2 focus:ring-ring disabled:cursor-not-allowed disabled:opacity-50"
-                    disabled={status?.running}
-                  />
-                </div>
-                <button
-                  onClick={handleSaveServerConfig}
-                  disabled={loading || status?.running}
-                  className="rounded-md border border-input bg-background px-4 py-1.5 text-sm font-medium shadow-sm transition-colors hover:bg-accent hover:text-accent-foreground disabled:cursor-not-allowed disabled:opacity-50"
-                  title={status?.running ? "请先关闭共享再修改配置" : ""}
-                >
-                  保存
-                </button>
               </div>
-            </div>
-            {!status?.running && (
-              <div className="mt-3 flex items-center gap-2 rounded-md bg-muted px-3 py-2 text-xs text-muted-foreground">
-                <span>ℹ️</span>
-                <span>
-                  仅本机模式仅允许当前设备访问；内网共享模式会对同网段设备开放
-                </span>
-              </div>
-            )}
-            {status?.running && (
-              <div className="mt-3 flex items-center gap-2 rounded-md bg-muted px-3 py-2 text-xs text-muted-foreground">
-                <span>ℹ️</span>
-                <span>
-                  当前处于{gatewayMode === "local" ? "仅本机" : "内网共享"}
-                  模式。修改配置需要先关闭共享
-                </span>
-              </div>
-            )}
-            {hostMismatch && (
-              <div className="mt-3 flex items-center gap-2 rounded-md bg-blue-50 dark:bg-blue-950/20 px-3 py-2 text-xs text-blue-700 dark:text-blue-400">
-                <span>ℹ️</span>
-                <span>
-                  配置的共享地址 {config?.server.host} 不可用，已自动切换到{" "}
-                  {status?.host}。关闭共享后可更新配置。
-                </span>
-              </div>
-            )}
+            </GatewayPanel>
           </div>
 
-          {/* 观测面板（对标 ClawRouter） */}
-          <div className="order-last rounded-lg border bg-card p-4 space-y-4">
-            <div className="flex items-center justify-between">
-              <h3 className="text-sm font-medium">观测面板</h3>
-              <span className="text-xs text-muted-foreground">
-                实时统计（每 3 秒刷新）
-              </span>
-            </div>
-
-            <div className="grid grid-cols-2 md:grid-cols-4 gap-3">
-              <div className="rounded-md border bg-muted/30 px-3 py-2">
-                <p className="text-xs text-muted-foreground">最近1分钟错误率</p>
-                <p className="text-sm font-medium">
-                  {((status?.error_rate_1m ?? 0) * 100).toFixed(1)}%
-                </p>
-              </div>
-              <div className="rounded-md border bg-muted/30 px-3 py-2">
-                <p className="text-xs text-muted-foreground">
-                  最近1分钟 P95 延迟
-                </p>
-                <p className="text-sm font-medium">
-                  {status?.p95_latency_ms_1m != null
-                    ? `${status.p95_latency_ms_1m}ms`
-                    : "-"}
-                </p>
-              </div>
-              <div className="rounded-md border bg-muted/30 px-3 py-2">
-                <p className="text-xs text-muted-foreground">
-                  活跃请求（近似）
-                </p>
-                <p className="text-sm font-medium">
-                  {status?.active_requests ?? 0}
-                </p>
-              </div>
-              <div className="rounded-md border bg-muted/30 px-3 py-2">
-                <p className="text-xs text-muted-foreground">
-                  熔断上游数（近似）
-                </p>
-                <p className="text-sm font-medium">
-                  {status?.open_circuit_count ?? 0}
-                </p>
-              </div>
-            </div>
-
-            <div className="grid grid-cols-1 xl:grid-cols-2 gap-3">
-              <div className="rounded-md border p-3 space-y-2">
-                <p className="text-xs text-muted-foreground">
-                  响应缓存（非流式）
-                </p>
-                <div className="grid grid-cols-2 gap-2 text-sm">
-                  <div>命中：{status?.response_cache?.hits ?? 0}</div>
-                  <div>未命中：{status?.response_cache?.misses ?? 0}</div>
-                  <div>缓存条目：{status?.response_cache?.size ?? 0}</div>
-                  <div>淘汰次数：{status?.response_cache?.evictions ?? 0}</div>
-                </div>
-                <p className="text-xs text-muted-foreground">
-                  缓存命中率：{cacheHitRate.toFixed(1)}%
-                </p>
-              </div>
-
-              <div className="rounded-md border p-3 space-y-2">
-                <p className="text-xs text-muted-foreground">请求去重</p>
-                <div className="grid grid-cols-2 gap-2 text-sm">
-                  <div>
-                    新请求：
-                    {status?.request_dedup?.check_new_total ?? 0}
+          <div className="space-y-6">
+            <GatewayPanel
+              icon={Activity}
+              title="观测面板"
+              description="按分钟观察错误率、延迟、缓存与能力路由状态，便于判断网关是否健康。"
+              aside={
+                <span className="rounded-full border border-slate-200 bg-slate-100 px-3 py-1 text-xs font-medium text-slate-500">
+                  每 3 秒刷新
+                </span>
+              }
+            >
+              <div className="space-y-5">
+                <div className="grid gap-3 sm:grid-cols-2">
+                  <div className="rounded-[20px] border border-slate-200/80 bg-slate-50/70 px-4 py-4">
+                    <p className="text-xs font-medium text-slate-500">
+                      最近 1 分钟错误率
+                    </p>
+                    <p className="mt-2 text-2xl font-semibold tracking-tight text-slate-900">
+                      {((status?.error_rate_1m ?? 0) * 100).toFixed(1)}%
+                    </p>
                   </div>
-                  <div>
-                    In-Flight 等待：
-                    {status?.request_dedup?.check_in_progress_total ?? 0}
+                  <div className="rounded-[20px] border border-slate-200/80 bg-slate-50/70 px-4 py-4">
+                    <p className="text-xs font-medium text-slate-500">
+                      最近 1 分钟 P95 延迟
+                    </p>
+                    <p className="mt-2 text-2xl font-semibold tracking-tight text-slate-900">
+                      {status?.p95_latency_ms_1m != null
+                        ? `${status.p95_latency_ms_1m}ms`
+                        : "-"}
+                    </p>
                   </div>
-                  <div>
-                    直接回放：
-                    {status?.request_dedup?.check_completed_total ?? 0}
+                  <div className="rounded-[20px] border border-slate-200/80 bg-slate-50/70 px-4 py-4">
+                    <p className="text-xs font-medium text-slate-500">
+                      活跃请求
+                    </p>
+                    <p className="mt-2 text-2xl font-semibold tracking-tight text-slate-900">
+                      {status?.active_requests ?? 0}
+                    </p>
                   </div>
-                  <div>
-                    等待回放成功：
-                    {status?.request_dedup?.wait_success_total ?? 0}
-                  </div>
-                  <div>
-                    等待超时：
-                    {status?.request_dedup?.wait_timeout_total ?? 0}
-                  </div>
-                  <div>
-                    当前 In-Flight：
-                    {status?.request_dedup?.inflight_size ?? 0}
+                  <div className="rounded-[20px] border border-slate-200/80 bg-slate-50/70 px-4 py-4">
+                    <p className="text-xs font-medium text-slate-500">
+                      熔断上游
+                    </p>
+                    <p className="mt-2 text-2xl font-semibold tracking-tight text-slate-900">
+                      {status?.open_circuit_count ?? 0}
+                    </p>
                   </div>
                 </div>
-                <p className="text-xs text-muted-foreground">
-                  去重回放率：{requestDedupReplayRate.toFixed(1)}%
-                </p>
-              </div>
 
-              <div className="rounded-md border p-3 space-y-2">
-                <p className="text-xs text-muted-foreground">幂等闭环</p>
-                <div className="grid grid-cols-2 gap-2 text-sm">
-                  <div>
-                    新键：
-                    {status?.idempotency?.check_new_total ?? 0}
-                  </div>
-                  <div>
-                    处理中冲突：
-                    {status?.idempotency?.check_in_progress_total ?? 0}
-                  </div>
-                  <div>
-                    已完成回放：
-                    {status?.idempotency?.check_completed_total ?? 0}
-                  </div>
-                  <div>
-                    完成写入：
-                    {status?.idempotency?.complete_total ?? 0}
-                  </div>
-                  <div>
-                    当前 In-Progress：
-                    {status?.idempotency?.in_progress_size ?? 0}
-                  </div>
-                  <div>
-                    当前 Completed：
-                    {status?.idempotency?.completed_size ?? 0}
-                  </div>
-                </div>
-                <p className="text-xs text-muted-foreground">
-                  幂等回放率：{idempotencyReplayRate.toFixed(1)}%
-                </p>
-              </div>
+                <div className="grid gap-4">
+                  <article className="rounded-[22px] border border-slate-200/80 bg-slate-50/60 p-4">
+                    <p className="text-sm font-semibold text-slate-900">
+                      响应缓存
+                    </p>
+                    <div className="mt-3 grid grid-cols-2 gap-2 text-sm text-slate-600">
+                      <div>命中：{status?.response_cache?.hits ?? 0}</div>
+                      <div>未命中：{status?.response_cache?.misses ?? 0}</div>
+                      <div>缓存条目：{status?.response_cache?.size ?? 0}</div>
+                      <div>
+                        淘汰次数：{status?.response_cache?.evictions ?? 0}
+                      </div>
+                    </div>
+                    <p className="mt-3 text-xs text-slate-500">
+                      缓存命中率：{cacheHitRate.toFixed(1)}%
+                    </p>
+                  </article>
 
-              <div className="rounded-md border p-3 space-y-2">
-                <p className="text-xs text-muted-foreground">能力路由与回退</p>
-                <div className="grid grid-cols-2 gap-2 text-sm">
-                  <div>
-                    过滤评估：
-                    {status?.capability_routing?.filter_eval_total ?? 0}
-                  </div>
-                  <div>
-                    过滤排除：
-                    {status?.capability_routing?.filter_excluded_total ?? 0}
-                  </div>
-                  <div>
-                    Provider 回退：
-                    {status?.capability_routing?.provider_fallback_total ?? 0}
-                  </div>
-                  <div>
-                    模型回退：
-                    {status?.capability_routing?.model_fallback_total ?? 0}
-                  </div>
-                  <div>
-                    候选全排空：
-                    {status?.capability_routing
-                      ?.all_candidates_excluded_total ?? 0}
-                  </div>
-                  <div>
-                    原因样本：
-                    {capabilityExcludedReasonTotal}
-                  </div>
-                </div>
-                <div className="flex flex-wrap gap-2 text-xs text-muted-foreground">
-                  <span>
-                    tools:{" "}
-                    {status?.capability_routing?.filter_excluded_tools_total ??
-                      0}
-                  </span>
-                  <span>
-                    vision:{" "}
-                    {status?.capability_routing?.filter_excluded_vision_total ??
-                      0}
-                  </span>
-                  <span>
-                    context:{" "}
-                    {status?.capability_routing
-                      ?.filter_excluded_context_total ?? 0}
-                  </span>
+                  <article className="rounded-[22px] border border-slate-200/80 bg-slate-50/60 p-4">
+                    <p className="text-sm font-semibold text-slate-900">
+                      请求去重
+                    </p>
+                    <div className="mt-3 grid grid-cols-2 gap-2 text-sm text-slate-600">
+                      <div>
+                        新请求：{status?.request_dedup?.check_new_total ?? 0}
+                      </div>
+                      <div>
+                        In-Flight 等待：
+                        {status?.request_dedup?.check_in_progress_total ?? 0}
+                      </div>
+                      <div>
+                        直接回放：
+                        {status?.request_dedup?.check_completed_total ?? 0}
+                      </div>
+                      <div>
+                        等待回放成功：
+                        {status?.request_dedup?.wait_success_total ?? 0}
+                      </div>
+                      <div>
+                        等待超时：
+                        {status?.request_dedup?.wait_timeout_total ?? 0}
+                      </div>
+                      <div>
+                        当前 In-Flight：
+                        {status?.request_dedup?.inflight_size ?? 0}
+                      </div>
+                    </div>
+                    <p className="mt-3 text-xs text-slate-500">
+                      去重回放率：{requestDedupReplayRate.toFixed(1)}%
+                    </p>
+                  </article>
+
+                  <article className="rounded-[22px] border border-slate-200/80 bg-slate-50/60 p-4">
+                    <p className="text-sm font-semibold text-slate-900">
+                      幂等闭环
+                    </p>
+                    <div className="mt-3 grid grid-cols-2 gap-2 text-sm text-slate-600">
+                      <div>
+                        新键：{status?.idempotency?.check_new_total ?? 0}
+                      </div>
+                      <div>
+                        处理中冲突：
+                        {status?.idempotency?.check_in_progress_total ?? 0}
+                      </div>
+                      <div>
+                        已完成回放：
+                        {status?.idempotency?.check_completed_total ?? 0}
+                      </div>
+                      <div>
+                        完成写入：
+                        {status?.idempotency?.complete_total ?? 0}
+                      </div>
+                      <div>
+                        当前 In-Progress：
+                        {status?.idempotency?.in_progress_size ?? 0}
+                      </div>
+                      <div>
+                        当前 Completed：
+                        {status?.idempotency?.completed_size ?? 0}
+                      </div>
+                    </div>
+                    <p className="mt-3 text-xs text-slate-500">
+                      幂等回放率：{idempotencyReplayRate.toFixed(1)}%
+                    </p>
+                  </article>
+
+                  <article className="rounded-[22px] border border-slate-200/80 bg-slate-50/60 p-4">
+                    <p className="text-sm font-semibold text-slate-900">
+                      能力路由与回退
+                    </p>
+                    <div className="mt-3 grid grid-cols-2 gap-2 text-sm text-slate-600">
+                      <div>
+                        过滤评估：
+                        {status?.capability_routing?.filter_eval_total ?? 0}
+                      </div>
+                      <div>
+                        过滤排除：
+                        {status?.capability_routing?.filter_excluded_total ?? 0}
+                      </div>
+                      <div>
+                        Provider 回退：
+                        {status?.capability_routing?.provider_fallback_total ??
+                          0}
+                      </div>
+                      <div>
+                        模型回退：
+                        {status?.capability_routing?.model_fallback_total ?? 0}
+                      </div>
+                      <div>
+                        候选全排空：
+                        {status?.capability_routing
+                          ?.all_candidates_excluded_total ?? 0}
+                      </div>
+                      <div>原因样本：{capabilityExcludedReasonTotal}</div>
+                    </div>
+                    <div className="mt-3 flex flex-wrap gap-2 text-xs text-slate-500">
+                      <span>
+                        tools：
+                        {status?.capability_routing
+                          ?.filter_excluded_tools_total ?? 0}
+                      </span>
+                      <span>
+                        vision：
+                        {status?.capability_routing
+                          ?.filter_excluded_vision_total ?? 0}
+                      </span>
+                      <span>
+                        context：
+                        {status?.capability_routing
+                          ?.filter_excluded_context_total ?? 0}
+                      </span>
+                    </div>
+                  </article>
                 </div>
               </div>
-            </div>
+            </GatewayPanel>
 
-            <div className="rounded-md border p-3 space-y-2">
-              <div className="flex items-center justify-between">
-                <p className="text-xs text-muted-foreground">
-                  诊断接口（`/health?full=true` / `/cache` / `/stats`）
-                </p>
-                <div className="flex items-center gap-2 flex-wrap justify-end">
+            <GatewayPanel
+              icon={Globe2}
+              title="诊断与支持包"
+              description="统一查看诊断 JSON，并在需要时导出支持包协助排障。"
+            >
+              <div className="space-y-4">
+                <div className="flex flex-wrap items-center gap-2">
                   <button
+                    type="button"
                     onClick={fetchDiagnostics}
                     disabled={diagnosticsLoading}
-                    className="rounded border px-2 py-1 text-xs hover:bg-muted disabled:opacity-50"
+                    className={BUTTON_SECONDARY_CLASS_NAME}
                   >
                     {diagnosticsLoading ? "拉取中..." : "拉取诊断"}
                   </button>
                   <button
+                    type="button"
                     onClick={copyDiagnostics}
                     disabled={!diagnostics}
-                    className="rounded border px-2 py-1 text-xs hover:bg-muted disabled:opacity-50"
+                    className={BUTTON_SECONDARY_CLASS_NAME}
                   >
                     {diagnosticsCopied ? "已复制" : "复制 JSON"}
                   </button>
                   {canExportSupportBundle ? (
                     <>
                       <button
+                        type="button"
                         onClick={handleExportSupportBundle}
                         disabled={supportBundleLoading}
-                        className="rounded border px-2 py-1 text-xs hover:bg-muted disabled:opacity-50"
+                        className={BUTTON_SECONDARY_CLASS_NAME}
                       >
                         {supportBundleLoading ? "导出中..." : "导出支持包"}
                       </button>
                       <button
+                        type="button"
                         onClick={handleRevealSupportBundle}
                         disabled={!supportBundleResult?.bundle_path}
-                        className="rounded border px-2 py-1 text-xs hover:bg-muted disabled:opacity-50"
+                        className={BUTTON_SECONDARY_CLASS_NAME}
                       >
                         打开目录
                       </button>
                     </>
                   ) : null}
                 </div>
-              </div>
-              <pre className="rounded bg-muted/40 p-2 text-xs overflow-auto max-h-48">
-                {diagnosticsJson || "点击“拉取诊断”获取当前服务诊断 JSON。"}
-              </pre>
-              <div className="text-xs text-muted-foreground break-all">
-                {canExportSupportBundle
-                  ? supportBundleResult?.bundle_path
-                    ? `最近一次支持包：${supportBundleResult.bundle_path}`
-                    : "支持包会默认导出到桌面；若桌面不可用，则回退到下载目录或系统临时目录。"
-                  : "支持包导出仅在桌面端可用。"}
-              </div>
-            </div>
-          </div>
 
-          {/* Default Provider - 动态显示有凭证的 Provider */}
-          <div className="rounded-lg border bg-card p-4">
-            <div className="flex items-center justify-between mb-3">
-              <span className="font-medium text-sm">默认 Provider</span>
-              {providerSwitchMsg && (
-                <span className="text-xs text-green-600 flex items-center gap-1">
-                  <Check className="h-3 w-3" />
-                  {providerSwitchMsg}
-                </span>
-              )}
-            </div>
+                <pre className="max-h-[360px] overflow-auto rounded-[22px] bg-slate-50/80 p-4 text-xs text-slate-700">
+                  {diagnosticsJson || "点击“拉取诊断”获取当前服务诊断 JSON。"}
+                </pre>
 
-            {availableProviders.length === 0 ? (
-              <div className="rounded-lg border border-dashed p-4 text-center text-sm text-muted-foreground">
-                暂无可用凭证，请先在凭证池或 API Key 设置中添加凭证
-              </div>
-            ) : (
-              <div className="flex flex-wrap gap-2">
-                {availableProviders.map((p) => (
-                  <button
-                    key={p.id}
-                    onClick={() => handleSetDefaultProvider(p.id)}
-                    disabled={loading}
-                    className={`flex items-center gap-1.5 rounded-lg border px-3 py-1.5 text-sm transition-colors ${
-                      defaultProvider === p.id
-                        ? "border-primary bg-primary/10 text-primary"
-                        : "border-border bg-card hover:bg-muted text-muted-foreground hover:text-foreground"
-                    } disabled:opacity-50`}
-                  >
-                    <ProviderIcon
-                      providerType={
-                        p.iconType as Parameters<
-                          typeof ProviderIcon
-                        >[0]["providerType"]
-                      }
-                      size={14}
-                    />
-                    {p.label}
-                    <span className="text-xs opacity-70">
-                      ({p.totalCount}
-                      {p.source === "both" && (
-                        <span className="ml-0.5">混合</span>
-                      )}
-                      {p.source === "api_key" && (
-                        <span className="ml-0.5">Key</span>
-                      )}
-                      )
-                    </span>
-                  </button>
-                ))}
-              </div>
-            )}
-
-            {/* 当前选中类型的凭证列表 */}
-            {(() => {
-              const _currentProvider = availableProviders.find(
-                (p) => p.id === defaultProvider,
-              );
-              // codex_oauth 在后端对应 codex 凭证池
-              const poolProviderType =
-                defaultProvider === "codex_oauth" ? "codex" : defaultProvider;
-              const currentOverview = poolOverview.find(
-                (o) => o.provider_type === poolProviderType,
-              );
-              const oauthCredentials = (
-                currentOverview?.credentials || []
-              ).filter((cred) => !cred.is_disabled);
-
-              // 获取 API Key 凭证 - 查找所有映射到当前 defaultProvider 的 API Key Provider
-              // 支持两种匹配方式：
-              // 1. 通过 provider.id 直接匹配（用于自定义 Provider）
-              // 2. 通过 type 映射匹配（用于内置 Provider）
-              // 注意：codex_oauth 只显示 OAuth 凭证，不显示 API Key
-              const matchingApiKeyProviders =
-                defaultProvider === "codex_oauth"
-                  ? []
-                  : apiKeyProviders.filter((p) => {
-                      // 首先尝试直接通过 id 匹配
-                      if (p.id === defaultProvider && p.enabled) {
-                        return true;
-                      }
-                      // 然后尝试通过 type 映射匹配
-                      const mappedId = mapApiKeyProviderToId(p.type);
-                      return mappedId === defaultProvider && p.enabled;
-                    });
-              const apiKeys = matchingApiKeyProviders.flatMap((p) =>
-                p.api_keys.filter((k) => k.enabled),
-              );
-
-              if (oauthCredentials.length === 0 && apiKeys.length === 0) {
-                // 只有当没有任何凭证时才显示提示
-                return (
-                  <div className="mt-4 rounded-lg border border-dashed p-4 text-center text-sm text-muted-foreground">
-                    当前类型无可用凭证，请先在凭证池中添加
-                  </div>
-                );
-              }
-
-              return (
-                <div className="mt-4 space-y-3">
-                  {/* OAuth 凭证 */}
-                  {oauthCredentials.length > 0 && (
-                    <div className="space-y-2">
-                      <p className="text-xs text-muted-foreground">
-                        OAuth 凭证 ({oauthCredentials.length}):
-                      </p>
-                      <div className="space-y-1">
-                        {oauthCredentials.map((cred) => (
-                          <div
-                            key={cred.uuid}
-                            className="flex items-center justify-between rounded-lg border border-border bg-muted/30 px-3 py-2 text-sm"
-                          >
-                            <div className="flex items-center gap-2">
-                              <span
-                                className={`h-2 w-2 rounded-full ${
-                                  cred.is_healthy
-                                    ? "bg-green-500"
-                                    : "bg-yellow-500"
-                                }`}
-                              />
-                              <span>{cred.name || cred.uuid.slice(0, 8)}</span>
-                              <span className="text-xs px-1.5 py-0.5 rounded bg-blue-100 text-blue-700 dark:bg-blue-900/30 dark:text-blue-400">
-                                OAuth
-                              </span>
-                            </div>
-                            <span className="text-xs text-muted-foreground">
-                              使用 {cred.usage_count} 次
-                            </span>
-                          </div>
-                        ))}
-                      </div>
-                    </div>
-                  )}
-
-                  {/* API Key 凭证 */}
-                  {apiKeys.length > 0 && (
-                    <div className="space-y-2">
-                      <p className="text-xs text-muted-foreground">
-                        API Key ({apiKeys.length}):
-                      </p>
-                      <div className="space-y-1">
-                        {apiKeys.map((key) => (
-                          <div
-                            key={key.id}
-                            className="flex items-center justify-between rounded-lg border border-border bg-muted/30 px-3 py-2 text-sm"
-                          >
-                            <div className="flex items-center gap-2">
-                              <span className="h-2 w-2 rounded-full bg-green-500" />
-                              <span>{key.alias || key.api_key_masked}</span>
-                              <span className="text-xs px-1.5 py-0.5 rounded bg-purple-100 text-purple-700 dark:bg-purple-900/30 dark:text-purple-400">
-                                API Key
-                              </span>
-                            </div>
-                            <span className="text-xs text-muted-foreground">
-                              使用 {key.usage_count} 次
-                            </span>
-                          </div>
-                        ))}
-                      </div>
-                    </div>
-                  )}
+                <div className="rounded-[18px] border border-slate-200 bg-slate-50/70 px-4 py-3 text-xs leading-5 text-slate-500">
+                  {canExportSupportBundle
+                    ? supportBundleResult?.bundle_path
+                      ? `最近一次支持包：${supportBundleResult.bundle_path}`
+                      : "支持包默认导出到桌面；若桌面不可用，则回退到下载目录或系统临时目录。"
+                    : "支持包导出仅在桌面端可用。"}
                 </div>
-              );
-            })()}
-          </div>
-
-          {/* API Testing */}
-          <div className="rounded-lg border bg-card p-6">
-            <div className="mb-4 flex items-center justify-between">
-              <h3 className="font-semibold">网关 API 测试</h3>
-              <button
-                onClick={runAllTests}
-                disabled={!status?.running || testEndpoints.length === 0}
-                className="flex items-center gap-2 rounded-lg bg-primary px-3 py-1.5 text-sm font-medium text-primary-foreground hover:bg-primary/90 disabled:opacity-50"
-              >
-                <Play className="h-4 w-4" />
-                测试全部
-              </button>
-            </div>
-
-            {/* 模型选择器 */}
-            <div className="mb-4 flex items-center gap-3">
-              <span className="text-sm text-muted-foreground">测试模型:</span>
-              <Select.Root value={testModel} onValueChange={setTestModel}>
-                <Select.Trigger className="inline-flex min-w-[300px] items-center justify-between gap-2 rounded-md border border-input bg-background px-3 py-1.5 text-sm shadow-sm transition-colors hover:bg-accent hover:text-accent-foreground focus:outline-none focus:ring-2 focus:ring-ring disabled:cursor-not-allowed disabled:opacity-50">
-                  <Select.Value placeholder="选择模型..." />
-                  <Select.Icon>
-                    <ChevronDown className="h-4 w-4 opacity-50" />
-                  </Select.Icon>
-                </Select.Trigger>
-                <Select.Portal>
-                  <Select.Content
-                    position="popper"
-                    side="bottom"
-                    align="start"
-                    sideOffset={4}
-                    className="z-50 max-h-[300px] min-w-[var(--radix-select-trigger-width)] overflow-hidden rounded-md border border-border bg-white dark:bg-gray-900 text-foreground shadow-lg"
-                  >
-                    <Select.Viewport className="p-1">
-                      {allModels.map((model) => (
-                        <Select.Item
-                          key={model.id}
-                          value={model.id}
-                          className="relative flex cursor-pointer select-none items-center rounded-sm px-8 py-2 text-sm outline-none transition-colors hover:bg-accent hover:text-accent-foreground focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50"
-                        >
-                          <Select.ItemIndicator className="absolute left-2 flex h-3.5 w-3.5 items-center justify-center">
-                            <Check className="h-4 w-4" />
-                          </Select.ItemIndicator>
-                          <Select.ItemText>
-                            <span className="flex items-center gap-2">
-                              <span>{model.display_name}</span>
-                              <span className="text-xs opacity-60">
-                                {model.provider_name}
-                              </span>
-                              <span
-                                className={`text-xs px-1.5 py-0.5 rounded ${
-                                  model.tier === "max"
-                                    ? "bg-purple-100 text-purple-700 dark:bg-purple-900/30 dark:text-purple-400"
-                                    : model.tier === "pro"
-                                      ? "bg-blue-100 text-blue-700 dark:bg-blue-900/30 dark:text-blue-400"
-                                      : "bg-gray-100 text-gray-700 dark:bg-gray-900/30 dark:text-gray-400"
-                                }`}
-                              >
-                                {model.tier}
-                              </span>
-                            </span>
-                          </Select.ItemText>
-                        </Select.Item>
-                      ))}
-                    </Select.Viewport>
-                  </Select.Content>
-                </Select.Portal>
-              </Select.Root>
-            </div>
-
-            <div className="space-y-3">
-              {testEndpoints.map((endpoint) => {
-                const result = testResults[endpoint.id];
-                const isExpanded = expandedTest === endpoint.id;
-                const curlCmd = getCurlCommand(endpoint);
-                const proxycastDebugHeaders = Object.entries(
-                  result?.responseHeaders || {},
-                ).filter(([key]) =>
-                  key.toLowerCase().startsWith("x-proxycast-"),
-                );
-
-                return (
-                  <div
-                    key={endpoint.id}
-                    className="rounded-lg border bg-background"
-                  >
-                    <div className="flex items-center justify-between p-3">
-                      <div className="flex items-center gap-3">
-                        <span
-                          className={`rounded px-2 py-0.5 text-xs font-medium ${
-                            endpoint.method === "GET"
-                              ? "bg-green-100 text-green-700 dark:bg-green-900/30 dark:text-green-400"
-                              : "bg-blue-100 text-blue-700 dark:bg-blue-900/30 dark:text-blue-400"
-                          }`}
-                        >
-                          {endpoint.method}
-                        </span>
-                        <span className="font-medium">{endpoint.name}</span>
-                        <code className="text-xs text-muted-foreground">
-                          {endpoint.path}
-                        </code>
-                        {getStatusBadge(result)}
-                      </div>
-                      <div className="flex items-center gap-2">
-                        <button
-                          onClick={() => copyCommand(endpoint.id, curlCmd)}
-                          className="rounded p-1.5 hover:bg-muted"
-                          title="复制 curl 命令"
-                        >
-                          {copiedCmd === endpoint.id ? (
-                            <Check className="h-4 w-4 text-green-500" />
-                          ) : (
-                            <Copy className="h-4 w-4" />
-                          )}
-                        </button>
-                        <button
-                          onClick={() => runTest(endpoint)}
-                          disabled={
-                            !status?.running || result?.status === "loading"
-                          }
-                          className="rounded bg-primary/10 px-2 py-1 text-xs font-medium text-primary hover:bg-primary/20 disabled:opacity-50"
-                        >
-                          测试
-                        </button>
-                        <button
-                          onClick={() =>
-                            setExpandedTest(isExpanded ? null : endpoint.id)
-                          }
-                          className="rounded p-1.5 hover:bg-muted"
-                        >
-                          {isExpanded ? (
-                            <ChevronUp className="h-4 w-4" />
-                          ) : (
-                            <ChevronDown className="h-4 w-4" />
-                          )}
-                        </button>
-                      </div>
-                    </div>
-
-                    {isExpanded && (
-                      <div className="border-t p-3 space-y-3">
-                        <div>
-                          <p className="mb-1 text-xs font-medium text-muted-foreground">
-                            curl 命令
-                          </p>
-                          <pre className="rounded bg-muted p-2 text-xs overflow-x-auto">
-                            {curlCmd}
-                          </pre>
-                        </div>
-                        {result?.response && (
-                          <div>
-                            <p className="mb-1 text-xs font-medium text-muted-foreground">
-                              响应{" "}
-                              {result.httpStatus &&
-                                `(HTTP ${result.httpStatus})`}
-                            </p>
-                            <pre
-                              className={`rounded p-2 text-xs overflow-x-auto max-h-40 ${
-                                result.status === "success"
-                                  ? "bg-green-50 dark:bg-green-950/30"
-                                  : "bg-red-50 dark:bg-red-950/30"
-                              }`}
-                            >
-                              {(() => {
-                                try {
-                                  return JSON.stringify(
-                                    JSON.parse(result.response),
-                                    null,
-                                    2,
-                                  );
-                                } catch {
-                                  return result.response || "(空响应)";
-                                }
-                              })()}
-                            </pre>
-                          </div>
-                        )}
-                        {proxycastDebugHeaders.length > 0 && (
-                          <div>
-                            <p className="mb-1 text-xs font-medium text-muted-foreground">
-                              调试头（x-proxycast-*）
-                            </p>
-                            <div className="rounded bg-muted p-2 text-xs space-y-1">
-                              {proxycastDebugHeaders.map(([key, value]) => (
-                                <div
-                                  key={key}
-                                  className="flex items-start justify-between gap-3"
-                                >
-                                  <code className="text-muted-foreground">
-                                    {key}
-                                  </code>
-                                  <code className="text-right break-all">
-                                    {value}
-                                  </code>
-                                </div>
-                              ))}
-                            </div>
-                          </div>
-                        )}
-                      </div>
-                    )}
-                  </div>
-                );
-              })}
-            </div>
+              </div>
+            </GatewayPanel>
           </div>
         </div>
+      ) : (
+        <GatewayPanel
+          icon={Activity}
+          title="网关日志"
+          description="查看网关与系统日志流，导出或清空当前记录。"
+        >
+          <LogsTab />
+        </GatewayPanel>
       )}
-
-      {/* Logs Tab */}
-      {activeTab === "logs" && <LogsTab />}
     </div>
   );
 }
diff --git a/src/components/api-server/LogsTab.tsx b/src/components/api-server/LogsTab.tsx
index 036349014..5f64b6aad 100644
--- a/src/components/api-server/LogsTab.tsx
+++ b/src/components/api-server/LogsTab.tsx
@@ -91,36 +91,36 @@ export function LogsTab() {
       <div className="flex items-center justify-end gap-2">
         <button
           onClick={handleExport}
-          className="flex items-center gap-2 rounded-lg border px-3 py-1.5 text-sm hover:bg-muted"
+          className="inline-flex items-center gap-2 rounded-full border border-slate-200 bg-white px-4 py-2 text-sm font-medium text-slate-700 transition hover:border-slate-300 hover:text-slate-900"
         >
           <Download className="h-4 w-4" />
           导出
         </button>
         <button
           onClick={handleClear}
-          className="flex items-center gap-2 rounded-lg border px-3 py-1.5 text-sm hover:bg-muted"
+          className="inline-flex items-center gap-2 rounded-full border border-slate-200 bg-white px-4 py-2 text-sm font-medium text-slate-700 transition hover:border-slate-300 hover:text-slate-900"
         >
           <Trash2 className="h-4 w-4" />
           清空
         </button>
       </div>
 
-      <div className="rounded-lg border bg-card">
+      <div className="rounded-[22px] border border-slate-200/80 bg-slate-50/60">
         <div
           ref={logsContainerRef}
           className="max-h-[500px] overflow-auto p-4 font-mono text-xs"
         >
           {logs.length === 0 ? (
-            <p className="text-center text-muted-foreground">
+            <p className="py-10 text-center text-slate-500">
               暂无日志，软件运行时将显示网关与系统日志
             </p>
           ) : (
             logs.map((log, i) => (
               <div
                 key={i}
-                className={`flex gap-2 py-0.5 px-2 rounded ${getLevelBg(log.level)}`}
+                className={`flex gap-2 rounded-[14px] px-3 py-1.5 ${getLevelBg(log.level)}`}
               >
-                <span className="text-muted-foreground shrink-0">
+                <span className="shrink-0 text-slate-400">
                   {new Date(log.timestamp).toLocaleTimeString()}
                 </span>
                 <span
diff --git a/src/components/artifact/ArtifactList.tsx b/src/components/artifact/ArtifactList.tsx
index 58add892c..257cc0681 100644
--- a/src/components/artifact/ArtifactList.tsx
+++ b/src/components/artifact/ArtifactList.tsx
@@ -56,6 +56,8 @@ function getTypeIcon(type: ArtifactType): React.ReactNode {
       return <GitBranch className={iconClass} />;
     case "react":
       return <Component className={iconClass} />;
+    case "browser_assist":
+      return <Globe className={iconClass} />;
     case "canvas:document":
       return <FileText className={iconClass} />;
     case "canvas:poster":
@@ -84,6 +86,7 @@ function getTypeDisplayName(type: ArtifactType): string {
     svg: "SVG",
     mermaid: "图表",
     react: "React",
+    browser_assist: "浏览器协助",
     "canvas:document": "文档",
     "canvas:poster": "海报",
     "canvas:music": "音乐",
diff --git a/src/components/artifact/ArtifactRenderer.tsx b/src/components/artifact/ArtifactRenderer.tsx
index fc7e59065..6ea214814 100644
--- a/src/components/artifact/ArtifactRenderer.tsx
+++ b/src/components/artifact/ArtifactRenderer.tsx
@@ -125,11 +125,19 @@ interface EmptyArtifactSurfaceState {
   skeletonKind: EmptyArtifactSkeletonKind;
 }
 
-function resolveArtifactPath(artifact: Pick<Artifact, "title" | "meta">): string {
-  if (typeof artifact.meta.filePath === "string" && artifact.meta.filePath.trim()) {
+function resolveArtifactPath(
+  artifact: Pick<Artifact, "title" | "meta">,
+): string {
+  if (
+    typeof artifact.meta.filePath === "string" &&
+    artifact.meta.filePath.trim()
+  ) {
     return artifact.meta.filePath.trim();
   }
-  if (typeof artifact.meta.filename === "string" && artifact.meta.filename.trim()) {
+  if (
+    typeof artifact.meta.filename === "string" &&
+    artifact.meta.filename.trim()
+  ) {
     return artifact.meta.filename.trim();
   }
   return artifact.title;
@@ -158,6 +166,10 @@ function resolveEmptyArtifactSkeletonKind(
 function resolveEmptyArtifactSurfaceState(
   artifact: Pick<Artifact, "content" | "error" | "meta" | "status" | "type">,
 ): EmptyArtifactSurfaceState | null {
+  if (artifact.type === "browser_assist") {
+    return null;
+  }
+
   if (artifact.content.trim()) {
     return null;
   }
@@ -165,10 +177,7 @@ function resolveEmptyArtifactSurfaceState(
   const writePhase = resolveArtifactWritePhase(artifact);
   const skeletonKind = resolveEmptyArtifactSkeletonKind(artifact);
 
-  if (
-    artifact.status === "error" ||
-    writePhase === "failed"
-  ) {
+  if (artifact.status === "error" || writePhase === "failed") {
     return {
       mode: "failed",
       title: "写入未完成",
@@ -262,11 +271,7 @@ const CodeSkeleton: React.FC<{ tone?: "dark" | "light" }> = memo(
             tone={tone}
             className={cn(
               "h-3",
-              index % 3 === 0
-                ? "w-3/5"
-                : index % 3 === 1
-                  ? "w-4/5"
-                  : "w-2/3",
+              index % 3 === 0 ? "w-3/5" : index % 3 === 1 ? "w-4/5" : "w-2/3",
             )}
           />
         </div>
@@ -487,44 +492,43 @@ const FallbackRenderer: React.FC<{
   artifact: Artifact;
   tone?: "dark" | "light";
 }> = memo(({ artifact, tone = "dark" }) => (
-    <div
-      className={cn(
-        "flex flex-col h-full",
-        tone === "light" ? "bg-background" : "bg-[#1e2227]",
-      )}
-    >
-      {/* 提示区域 */}
-      <div className="p-4 border-b border-yellow-500/20 bg-yellow-500/10">
-        <div className="flex items-center gap-2 text-yellow-400 font-medium mb-2">
-          <AlertTriangle className="w-5 h-5" />
-          <span>未知类型</span>
-        </div>
-        <div
-          className={cn(
-            "text-sm",
-            tone === "light" ? "text-muted-foreground" : "text-gray-400",
-          )}
-        >
-          类型 "{artifact.type}" 没有对应的渲染器，显示原始内容。
-        </div>
+  <div
+    className={cn(
+      "flex flex-col h-full",
+      tone === "light" ? "bg-background" : "bg-[#1e2227]",
+    )}
+  >
+    {/* 提示区域 */}
+    <div className="p-4 border-b border-yellow-500/20 bg-yellow-500/10">
+      <div className="flex items-center gap-2 text-yellow-400 font-medium mb-2">
+        <AlertTriangle className="w-5 h-5" />
+        <span>未知类型</span>
       </div>
-
-      {/* 内容区域 */}
-      <div className="flex-1 overflow-auto p-4">
-        <pre
-          className={cn(
-            "overflow-auto whitespace-pre-wrap rounded p-3 text-sm",
-            tone === "light"
-              ? "border border-border bg-muted/30 text-foreground"
-              : "bg-black/30 text-gray-300",
-          )}
-        >
-          {artifact.content}
-        </pre>
+      <div
+        className={cn(
+          "text-sm",
+          tone === "light" ? "text-muted-foreground" : "text-gray-400",
+        )}
+      >
+        类型 "{artifact.type}" 没有对应的渲染器，显示原始内容。
       </div>
     </div>
-  ),
-);
+
+    {/* 内容区域 */}
+    <div className="flex-1 overflow-auto p-4">
+      <pre
+        className={cn(
+          "overflow-auto whitespace-pre-wrap rounded p-3 text-sm",
+          tone === "light"
+            ? "border border-border bg-muted/30 text-foreground"
+            : "bg-black/30 text-gray-300",
+        )}
+      >
+        {artifact.content}
+      </pre>
+    </div>
+  </div>
+));
 FallbackRenderer.displayName = "FallbackRenderer";
 
 // ============================================================================
diff --git a/src/components/artifact/ArtifactToolbar.test.ts b/src/components/artifact/ArtifactToolbar.test.ts
index 34cc595e4..eacc13d91 100644
--- a/src/components/artifact/ArtifactToolbar.test.ts
+++ b/src/components/artifact/ArtifactToolbar.test.ts
@@ -299,6 +299,7 @@ const VALID_EXTENSIONS: Record<ArtifactType, string[]> = {
   svg: ["svg"],
   mermaid: ["mmd"],
   react: ["jsx"],
+  browser_assist: ["txt"],
   "canvas:document": ["md"],
   "canvas:poster": ["json"],
   "canvas:music": ["json"],
diff --git a/src/components/artifact/ArtifactToolbar.tsx b/src/components/artifact/ArtifactToolbar.tsx
index 16a7cc0e4..f61bd3df2 100644
--- a/src/components/artifact/ArtifactToolbar.tsx
+++ b/src/components/artifact/ArtifactToolbar.tsx
@@ -68,9 +68,7 @@ const ToolbarButton: React.FC<ToolbarButtonProps> = memo(
       className={cn(
         "flex items-center justify-center w-7 h-7 rounded transition-all",
         "disabled:opacity-50 disabled:cursor-not-allowed",
-        tone === "light"
-          ? "hover:bg-black/5"
-          : "hover:bg-white/10",
+        tone === "light" ? "hover:bg-black/5" : "hover:bg-white/10",
         active
           ? tone === "light"
             ? "bg-black/5 text-foreground"
@@ -185,6 +183,8 @@ export interface ArtifactToolbarProps {
   tone?: "dark" | "light";
   /** 额外的展示状态标签 */
   displayBadgeLabel?: string;
+  /** 操作区额外插槽 */
+  actionsSlot?: React.ReactNode;
 }
 
 /**
@@ -336,18 +336,21 @@ export const ArtifactToolbar: React.FC<ArtifactToolbarProps> = memo(
     onPreviewSizeChange,
     tone = "dark",
     displayBadgeLabel,
+    actionsSlot,
   }) => {
     const [copied, setCopied] = useState(false);
 
     // 获取渲染器信息
     const entry = artifactRegistry.get(artifact.type);
 
+    const isBrowserAssist = artifact.type === "browser_assist";
     // 判断是否是代码类型且支持预览
     const isCode = artifact.type === "code";
     const isDocument = artifact.type === "document";
     const language = artifact.meta.language?.toLowerCase() || "";
     const canPreview = isCode && PREVIEWABLE_LANGUAGES.includes(language);
-    const supportsSharedViewMode = isDocument || canPreview;
+    const supportsSharedViewMode =
+      !isBrowserAssist && (isDocument || canPreview);
     const writePhase = resolveArtifactWritePhase(artifact);
 
     /**
@@ -452,7 +455,10 @@ export const ArtifactToolbar: React.FC<ArtifactToolbarProps> = memo(
 
     // 判断是否支持源码切换（非代码类型才需要切换）
     const supportsSourceToggle =
-      artifact.type !== "code" && artifact.type !== "document" && onToggleSource;
+      !isBrowserAssist &&
+      artifact.type !== "code" &&
+      artifact.type !== "document" &&
+      onToggleSource;
 
     return (
       <div
@@ -580,48 +586,58 @@ export const ArtifactToolbar: React.FC<ArtifactToolbarProps> = memo(
             />
           )}
 
-          {/* 复制按钮 */}
-          <ToolbarButton
-            onClick={handleCopy}
-            title={copied ? "已复制" : "复制内容"}
-            tone={tone}
-          >
-            {copied ? (
-              <Check className="w-4 h-4 text-green-400" />
-            ) : (
-              <Copy className="w-4 h-4" />
-            )}
-          </ToolbarButton>
+          {!isBrowserAssist ? (
+            <>
+              {/* 复制按钮 */}
+              <ToolbarButton
+                onClick={handleCopy}
+                title={copied ? "已复制" : "复制内容"}
+                tone={tone}
+              >
+                {copied ? (
+                  <Check className="w-4 h-4 text-green-400" />
+                ) : (
+                  <Copy className="w-4 h-4" />
+                )}
+              </ToolbarButton>
 
-          {/* 下载按钮 */}
-          <ToolbarButton onClick={handleDownload} title="下载文件" tone={tone}>
-            <Download className="w-4 h-4" />
-          </ToolbarButton>
+              {/* 下载按钮 */}
+              <ToolbarButton
+                onClick={handleDownload}
+                title="下载文件"
+                tone={tone}
+              >
+                <Download className="w-4 h-4" />
+              </ToolbarButton>
 
-          {/* 源码切换按钮（非代码类型） */}
-          {supportsSourceToggle && (
-            <ToolbarButton
-              onClick={handleToggleSource}
-              title={showSource ? "显示预览" : "显示源码"}
-              active={showSource}
-              tone={tone}
-            >
-              {showSource ? (
-                <Eye className="w-4 h-4" />
-              ) : (
-                <Code className="w-4 h-4" />
+              {/* 源码切换按钮（非代码类型） */}
+              {supportsSourceToggle && (
+                <ToolbarButton
+                  onClick={handleToggleSource}
+                  title={showSource ? "显示预览" : "显示源码"}
+                  active={showSource}
+                  tone={tone}
+                >
+                  {showSource ? (
+                    <Eye className="w-4 h-4" />
+                  ) : (
+                    <Code className="w-4 h-4" />
+                  )}
+                </ToolbarButton>
               )}
-            </ToolbarButton>
-          )}
 
-          {/* 新窗口打开按钮 */}
-          <ToolbarButton
-            onClick={handleOpenInWindow}
-            title="在新窗口中打开"
-            tone={tone}
-          >
-            <ExternalLink className="w-4 h-4" />
-          </ToolbarButton>
+              {/* 新窗口打开按钮 */}
+              <ToolbarButton
+                onClick={handleOpenInWindow}
+                title="在新窗口中打开"
+                tone={tone}
+              >
+                <ExternalLink className="w-4 h-4" />
+              </ToolbarButton>
+            </>
+          ) : null}
+
+          {actionsSlot}
 
           {/* 关闭按钮 */}
           {onClose && (
diff --git a/src/components/artifact/index.ts b/src/components/artifact/index.ts
index 2c6fbb692..b87e61f51 100644
--- a/src/components/artifact/index.ts
+++ b/src/components/artifact/index.ts
@@ -88,6 +88,7 @@ export {
   SvgRenderer,
   MermaidRenderer,
   ReactRenderer,
+  BrowserAssistRenderer,
   registerLightweightRenderers,
   getLightweightRendererEntries,
   areLightweightRenderersRegistered,
diff --git a/src/components/artifact/renderers/BrowserAssistRenderer.test.tsx b/src/components/artifact/renderers/BrowserAssistRenderer.test.tsx
new file mode 100644
index 000000000..234dcc880
--- /dev/null
+++ b/src/components/artifact/renderers/BrowserAssistRenderer.test.tsx
@@ -0,0 +1,130 @@
+import { act } from "react";
+import { createRoot, type Root } from "react-dom/client";
+import { afterEach, beforeEach, describe, expect, it, vi } from "vitest";
+import type { Artifact } from "@/lib/artifact/types";
+import { BrowserAssistRenderer } from "./BrowserAssistRenderer";
+
+const { mockBrowserRuntimeWorkspace } = vi.hoisted(() => ({
+  mockBrowserRuntimeWorkspace: vi.fn(
+    ({
+      initialProfileKey,
+      initialSessionId,
+      initialTargetId,
+    }: {
+      initialProfileKey?: string;
+      initialSessionId?: string;
+      initialTargetId?: string;
+    }) => (
+      <div
+        data-testid="browser-runtime-workspace"
+        data-profile-key={initialProfileKey || ""}
+        data-session-id={initialSessionId || ""}
+        data-target-id={initialTargetId || ""}
+      />
+    ),
+  ),
+}));
+
+vi.mock("@/features/browser-runtime", () => ({
+  BrowserRuntimeWorkspace: mockBrowserRuntimeWorkspace,
+}));
+
+const mountedRoots: Array<{ root: Root; container: HTMLDivElement }> = [];
+
+function createArtifact(overrides: Partial<Artifact> = {}): Artifact {
+  return {
+    id: overrides.id ?? "browser-assist:general",
+    type: "browser_assist",
+    title: overrides.title ?? "浏览器协助",
+    content: overrides.content ?? "",
+    status: overrides.status ?? "complete",
+    meta: {
+      browserAssistScopeKey: "project:session",
+      ...(overrides.meta || {}),
+    },
+    position: overrides.position ?? { start: 0, end: 0 },
+    createdAt: overrides.createdAt ?? 1,
+    updatedAt: overrides.updatedAt ?? 1,
+    error: overrides.error,
+  };
+}
+
+async function renderArtifact(artifact: Artifact) {
+  const container = document.createElement("div");
+  document.body.appendChild(container);
+  const root = createRoot(container);
+  mountedRoots.push({ root, container });
+
+  await act(async () => {
+    root.render(<BrowserAssistRenderer artifact={artifact} />);
+  });
+
+  await act(async () => {
+    await Promise.resolve();
+  });
+
+  return container;
+}
+
+beforeEach(() => {
+  (
+    globalThis as typeof globalThis & {
+      IS_REACT_ACT_ENVIRONMENT?: boolean;
+    }
+  ).IS_REACT_ACT_ENVIRONMENT = true;
+});
+
+afterEach(() => {
+  while (mountedRoots.length > 0) {
+    const mounted = mountedRoots.pop();
+    if (!mounted) break;
+    act(() => {
+      mounted.root.unmount();
+    });
+    mounted.container.remove();
+  }
+  vi.clearAllMocks();
+});
+
+describe("BrowserAssistRenderer", () => {
+  it("pending Artifact 应展示启动提示", async () => {
+    const container = await renderArtifact(
+      createArtifact({
+        status: "pending",
+        meta: {
+          profileKey: "general_browser_assist",
+          url: "https://example.com",
+          launchState: "launching",
+        },
+      }),
+    );
+
+    expect(container.textContent).toContain("正在启动浏览器协助");
+    expect(container.textContent).toContain("通常需要 3–8 秒");
+    expect(container.textContent).toContain("https://example.com");
+  });
+
+  it("完整会话 Artifact 应渲染浏览器工作区", async () => {
+    const container = await renderArtifact(
+      createArtifact({
+        status: "complete",
+        meta: {
+          profileKey: "general_browser_assist",
+          sessionId: "session-1",
+          targetId: "target-1",
+        },
+      }),
+    );
+
+    const workspace = container.querySelector(
+      "[data-testid=\"browser-runtime-workspace\"]",
+    );
+
+    expect(workspace).not.toBeNull();
+    expect(workspace?.getAttribute("data-profile-key")).toBe(
+      "general_browser_assist",
+    );
+    expect(workspace?.getAttribute("data-session-id")).toBe("session-1");
+    expect(workspace?.getAttribute("data-target-id")).toBe("target-1");
+  });
+});
diff --git a/src/components/artifact/renderers/BrowserAssistRenderer.tsx b/src/components/artifact/renderers/BrowserAssistRenderer.tsx
new file mode 100644
index 000000000..adea5130c
--- /dev/null
+++ b/src/components/artifact/renderers/BrowserAssistRenderer.tsx
@@ -0,0 +1,138 @@
+/**
+ * @file Browser Assist Artifact 渲染器
+ * @description 在通用对话画布中承载浏览器协助工作台
+ * @module components/artifact/renderers/BrowserAssistRenderer
+ */
+
+import React, { memo } from "react";
+import { AlertCircle, Loader2 } from "lucide-react";
+import type { ArtifactRendererProps } from "@/lib/artifact/types";
+import { BrowserRuntimeWorkspace } from "@/features/browser-runtime";
+
+function readMetaString(
+  meta: Record<string, unknown>,
+  ...keys: string[]
+): string | undefined {
+  for (const key of keys) {
+    const value = meta[key];
+    if (typeof value === "string" && value.trim()) {
+      return value.trim();
+    }
+  }
+  return undefined;
+}
+
+export const BrowserAssistRenderer: React.FC<ArtifactRendererProps> = memo(
+  ({ artifact }) => {
+    const initialSessionId = readMetaString(
+      artifact.meta,
+      "sessionId",
+      "session_id",
+    );
+    const initialProfileKey = readMetaString(
+      artifact.meta,
+      "profileKey",
+      "profile_key",
+    );
+    const initialTargetId = readMetaString(
+      artifact.meta,
+      "targetId",
+      "target_id",
+    );
+    const launchState = readMetaString(
+      artifact.meta,
+      "launchState",
+      "launch_state",
+    );
+    const launchHint = readMetaString(
+      artifact.meta,
+      "launchHint",
+      "launch_hint",
+    );
+    const launchUrl = readMetaString(artifact.meta, "url", "launchUrl");
+    const launchError =
+      artifact.error ||
+      readMetaString(artifact.meta, "launchError", "launch_error");
+
+    if (artifact.status === "pending" || launchState === "launching") {
+      return (
+        <div className="flex h-full items-center justify-center bg-background p-6">
+          <div className="max-w-lg rounded-2xl border border-border/70 bg-card/70 p-6 text-center shadow-sm">
+            <div className="mx-auto mb-3 flex h-11 w-11 items-center justify-center rounded-full bg-sky-500/10 text-sky-600 dark:text-sky-300">
+              <Loader2 className="h-5 w-5 animate-spin" />
+            </div>
+            <div className="text-base font-semibold text-foreground">
+              正在启动浏览器协助
+            </div>
+            <p className="mt-2 text-sm leading-6 text-muted-foreground">
+              {launchHint ||
+                "正在启动 Chrome、连接调试通道并等待首帧画面，通常需要 3–8 秒。"}
+            </p>
+            {launchUrl ? (
+              <div className="mt-3 rounded-xl border border-border/70 bg-background/80 px-3 py-2 text-xs text-muted-foreground">
+                {launchUrl}
+              </div>
+            ) : null}
+          </div>
+        </div>
+      );
+    }
+
+    if (artifact.status === "error" || launchState === "failed") {
+      return (
+        <div className="flex h-full items-center justify-center bg-background p-6">
+          <div className="max-w-lg rounded-2xl border border-destructive/25 bg-destructive/5 p-6 text-center shadow-sm">
+            <div className="mx-auto mb-3 flex h-11 w-11 items-center justify-center rounded-full bg-destructive/10 text-destructive">
+              <AlertCircle className="h-5 w-5" />
+            </div>
+            <div className="text-base font-semibold text-foreground">
+              浏览器协助启动失败
+            </div>
+            <p className="mt-2 text-sm leading-6 text-muted-foreground">
+              {launchError || "未能建立浏览器实时会话，请稍后重试。"}
+            </p>
+            {launchUrl ? (
+              <div className="mt-3 rounded-xl border border-border/70 bg-background/80 px-3 py-2 text-xs text-muted-foreground">
+                {launchUrl}
+              </div>
+            ) : null}
+          </div>
+        </div>
+      );
+    }
+
+    if (!initialSessionId && !initialProfileKey) {
+      return (
+        <div className="flex h-full items-center justify-center bg-background p-6">
+          <div className="max-w-md rounded-2xl border border-dashed border-border bg-card/60 p-6 text-center">
+            <div className="mx-auto mb-3 flex h-11 w-11 items-center justify-center rounded-full bg-muted text-muted-foreground">
+              <AlertCircle className="h-5 w-5" />
+            </div>
+            <div className="text-base font-semibold text-foreground">
+              浏览器协助尚未就绪
+            </div>
+            <p className="mt-2 text-sm leading-6 text-muted-foreground">
+              当前 Artifact
+              缺少可附着的浏览器会话信息，请重新从通用对话启动浏览器协助。
+            </p>
+          </div>
+        </div>
+      );
+    }
+
+    return (
+      <div className="flex h-full min-h-0 flex-col bg-background">
+        <BrowserRuntimeWorkspace
+          embedded={true}
+          initialProfileKey={initialProfileKey}
+          initialSessionId={initialSessionId}
+          initialTargetId={initialTargetId}
+        />
+      </div>
+    );
+  },
+);
+
+BrowserAssistRenderer.displayName = "BrowserAssistRenderer";
+
+export default BrowserAssistRenderer;
diff --git a/src/components/artifact/renderers/index.ts b/src/components/artifact/renderers/index.ts
index 093d2031c..51536bb5b 100644
--- a/src/components/artifact/renderers/index.ts
+++ b/src/components/artifact/renderers/index.ts
@@ -19,6 +19,7 @@ export { HtmlRenderer } from "./HtmlRenderer";
 export { SvgRenderer } from "./SvgRenderer";
 export { MermaidRenderer } from "./MermaidRenderer";
 export { ReactRenderer } from "./ReactRenderer";
+export { BrowserAssistRenderer } from "./BrowserAssistRenderer";
 
 // ============================================================================
 // 懒加载渲染器组件
@@ -51,6 +52,11 @@ const LazyMermaidRenderer = lazy(() => import("./MermaidRenderer"));
  */
 const LazyReactRenderer = lazy(() => import("./ReactRenderer"));
 
+/**
+ * 懒加载的浏览器协助渲染器
+ */
+const LazyBrowserAssistRenderer = lazy(() => import("./BrowserAssistRenderer"));
+
 // ============================================================================
 // 渲染器注册项定义
 // ============================================================================
@@ -108,6 +114,14 @@ const LIGHTWEIGHT_RENDERER_ENTRIES: RendererEntry[] = [
     canEdit: false,
     fileExtension: "jsx",
   },
+  {
+    type: "browser_assist" as ArtifactType,
+    displayName: "浏览器协助",
+    icon: "globe",
+    component: LazyBrowserAssistRenderer,
+    canEdit: false,
+    fileExtension: "txt",
+  },
 ];
 
 // ============================================================================
diff --git a/src/components/content-creator/canvas/document/DocumentCanvas.tsx b/src/components/content-creator/canvas/document/DocumentCanvas.tsx
index b3443d4e9..49b3bcb55 100644
--- a/src/components/content-creator/canvas/document/DocumentCanvas.tsx
+++ b/src/components/content-creator/canvas/document/DocumentCanvas.tsx
@@ -100,7 +100,7 @@ const Container = styled.div`
   height: 100%;
   min-height: 0;
   width: 100%;
-  padding: 12px 16px;
+  padding: 0 4px 6px 4px;
   gap: 10px;
   box-sizing: border-box;
 `;
@@ -109,11 +109,11 @@ const InnerContainer = styled.div`
   display: flex;
   flex-direction: column;
   height: 100%;
-  background: hsl(var(--background));
-  border-radius: 14px;
-  border: 1px solid hsl(var(--border));
+  background: transparent;
+  border-radius: 0;
+  border: none;
   overflow: hidden;
-  box-shadow: 0 8px 28px rgba(15, 23, 42, 0.06);
+  box-shadow: none;
 `;
 
 const ContentArea = styled.div`
diff --git a/src/components/content-creator/canvas/document/DocumentToolbar.tsx b/src/components/content-creator/canvas/document/DocumentToolbar.tsx
index f396e1e57..2b07c3eba 100644
--- a/src/components/content-creator/canvas/document/DocumentToolbar.tsx
+++ b/src/components/content-creator/canvas/document/DocumentToolbar.tsx
@@ -41,9 +41,9 @@ const Container = styled.div`
   display: flex;
   flex-direction: column;
   gap: 10px;
-  padding: 10px 20px 8px;
+  padding: 8px 16px 8px 20px;
   background: hsl(var(--background));
-  border-bottom: 1px solid hsl(var(--border));
+  border-bottom: 1px solid hsl(var(--border) / 0.5);
 `;
 
 const ToolbarRow = styled.div`
@@ -63,10 +63,10 @@ const IconButton = styled.button`
   display: flex;
   align-items: center;
   justify-content: center;
-  width: 32px;
-  height: 32px;
+  width: 30px;
+  height: 30px;
   border: 0;
-  border-radius: 9px;
+  border-radius: 8px;
   background: transparent;
   color: hsl(var(--muted-foreground));
   cursor: default;
@@ -78,7 +78,7 @@ const IconButton = styled.button`
   }
 
   &:not(:disabled):hover {
-    background: hsl(var(--muted) / 0.5);
+    background: hsl(var(--muted) / 0.8);
     color: hsl(var(--foreground));
   }
 
@@ -90,8 +90,8 @@ const IconButton = styled.button`
 
 const Divider = styled.div`
   width: 1px;
-  height: 18px;
-  background: hsl(var(--border) / 0.85);
+  height: 16px;
+  background: hsl(var(--border));
   margin: 0 4px;
   flex-shrink: 0;
 `;
@@ -112,7 +112,7 @@ const QuickInsertItem = styled.button`
   border: 0;
   border-radius: 8px;
   background: transparent;
-  color: hsl(var(--foreground));
+  color: hsl(var(--muted-foreground));
   font-size: 13px;
   font-weight: 500;
   cursor: pointer;
@@ -122,6 +122,7 @@ const QuickInsertItem = styled.button`
 
   &:hover {
     background: hsl(var(--muted) / 0.75);
+    color: hsl(var(--foreground));
   }
 `;
 
@@ -129,24 +130,24 @@ const ActionPill = styled.button<{ $active?: boolean }>`
   display: inline-flex;
   align-items: center;
   gap: 6px;
-  height: 32px;
-  padding: 0 12px;
-  border: 0;
-  border-radius: 999px;
+  height: 30px;
+  padding: 0 10px;
+  border: 1px solid transparent;
+  border-radius: 8px;
   font-size: 13px;
   font-weight: 500;
   background: ${({ $active }) =>
-    $active ? "hsl(var(--primary) / 0.14)" : "hsl(var(--muted) / 0.6)"};
+    $active ? "hsl(var(--primary) / 0.08)" : "transparent"};
   color: ${({ $active }) =>
     $active ? "hsl(var(--primary))" : "hsl(var(--muted-foreground))"};
   cursor: pointer;
-  transition: all 0.2s;
+  transition: all 0.2s ease-out;
   white-space: nowrap;
   flex-shrink: 0;
 
   &:hover {
     background: ${({ $active }) =>
-      $active ? "hsl(var(--primary) / 0.2)" : "hsl(var(--muted) / 0.8)"};
+      $active ? "hsl(var(--primary) / 0.12)" : "hsl(var(--muted) / 0.8)"};
     color: ${({ $active }) =>
       $active ? "hsl(var(--primary))" : "hsl(var(--foreground))"};
   }
diff --git a/src/components/content-creator/canvas/shared/CanvasBreadcrumbHeader.tsx b/src/components/content-creator/canvas/shared/CanvasBreadcrumbHeader.tsx
index 5b0ab258f..71edb4127 100644
--- a/src/components/content-creator/canvas/shared/CanvasBreadcrumbHeader.tsx
+++ b/src/components/content-creator/canvas/shared/CanvasBreadcrumbHeader.tsx
@@ -42,10 +42,15 @@ const CurrentLabel = styled.span`
 `;
 
 export const CanvasBreadcrumbHeader: React.FC<CanvasBreadcrumbHeaderProps> = memo(
-  ({ label, onBackHome, backTitle = "返回首页" }) => {
+  ({ label, onBackHome, backTitle = "返回新建任务" }) => {
     return (
       <Header>
-        <HomeButton type="button" onClick={onBackHome} title={backTitle}>
+        <HomeButton
+          type="button"
+          onClick={onBackHome}
+          title={backTitle}
+          aria-label={backTitle}
+        >
           <Home size={12} />
         </HomeButton>
         <ChevronRight size={12} />
diff --git a/src/components/extensions/ExtensionsPage.tsx b/src/components/extensions/ExtensionsPage.tsx
deleted file mode 100644
index a24fcd99a..000000000
--- a/src/components/extensions/ExtensionsPage.tsx
+++ /dev/null
@@ -1,58 +0,0 @@
-import { useState } from "react";
-import { Plug, MessageSquare, Boxes, Puzzle } from "lucide-react";
-import { cn } from "@/lib/utils";
-import { McpPage } from "../mcp/McpPage";
-import { PromptsPage } from "../prompts/PromptsPage";
-import { SkillsPage } from "../skills/SkillsPage";
-import { PluginManager } from "../plugins/PluginManager";
-
-type Tab = "mcp" | "prompts" | "skills" | "plugins";
-
-const tabs = [
-  { id: "mcp" as Tab, label: "MCP", icon: Plug },
-  { id: "prompts" as Tab, label: "Prompts", icon: MessageSquare },
-  { id: "skills" as Tab, label: "Skills", icon: Boxes },
-  { id: "plugins" as Tab, label: "Plugins", icon: Puzzle },
-];
-
-export function ExtensionsPage() {
-  const [activeTab, setActiveTab] = useState<Tab>("mcp");
-
-  return (
-    <div className="space-y-6">
-      <div>
-        <h2 className="text-2xl font-bold">扩展</h2>
-        <p className="text-muted-foreground">
-          管理 MCP 服务器、Prompts 和 Skills
-        </p>
-      </div>
-
-      {/* Tab 切换 */}
-      <div className="flex gap-1 border-b">
-        {tabs.map((tab) => (
-          <button
-            key={tab.id}
-            onClick={() => setActiveTab(tab.id)}
-            className={cn(
-              "flex items-center gap-2 px-4 py-2 text-sm font-medium border-b-2 -mb-px transition-colors",
-              activeTab === tab.id
-                ? "border-primary text-primary"
-                : "border-transparent text-muted-foreground hover:text-foreground",
-            )}
-          >
-            <tab.icon className="h-4 w-4" />
-            {tab.label}
-          </button>
-        ))}
-      </div>
-
-      {/* Tab 内容 */}
-      <div className="pt-2">
-        {activeTab === "mcp" && <McpPage hideHeader />}
-        {activeTab === "prompts" && <PromptsPage hideHeader />}
-        {activeTab === "skills" && <SkillsPage hideHeader />}
-        {activeTab === "plugins" && <PluginManager />}
-      </div>
-    </div>
-  );
-}
diff --git a/src/components/extensions/index.ts b/src/components/extensions/index.ts
deleted file mode 100644
index a1e02bb41..000000000
--- a/src/components/extensions/index.ts
+++ /dev/null
@@ -1 +0,0 @@
-export { ExtensionsPage } from "./ExtensionsPage";
diff --git a/src/components/general-chat/canvas/CanvasPanel.tsx b/src/components/general-chat/canvas/CanvasPanel.tsx
index 9f5caff2d..d860296b0 100644
--- a/src/components/general-chat/canvas/CanvasPanel.tsx
+++ b/src/components/general-chat/canvas/CanvasPanel.tsx
@@ -18,6 +18,8 @@ interface CanvasPanelProps {
   onClose: () => void;
   /** 内容变更回调 */
   onContentChange?: (content: string) => void;
+  /** 头部附加操作 */
+  toolbarActions?: React.ReactNode;
 }
 
 /**
@@ -27,6 +29,7 @@ export const CanvasPanel: React.FC<CanvasPanelProps> = ({
   state,
   onClose,
   onContentChange,
+  toolbarActions,
 }) => {
   const [copied, setCopied] = useState(false);
 
@@ -61,8 +64,8 @@ export const CanvasPanel: React.FC<CanvasPanelProps> = ({
     <div className="flex flex-col h-full bg-background border-r border-border">
       {/* 工具栏 */}
       <div className="flex items-center justify-between px-4 py-2 border-b border-border bg-muted/50">
-        <div className="flex items-center gap-2">
-          <span className="text-sm font-medium text-foreground">
+        <div className="flex min-w-0 items-center gap-2">
+          <span className="truncate text-sm font-medium text-foreground">
             {state.filename ||
               (state.contentType === "code" ? "代码预览" : "内容预览")}
           </span>
@@ -72,7 +75,7 @@ export const CanvasPanel: React.FC<CanvasPanelProps> = ({
             </span>
           )}
         </div>
-        <div className="flex items-center gap-1">
+        <div className="flex shrink-0 items-center gap-1">
           {/* 复制按钮 */}
           <button
             onClick={handleCopy}
@@ -129,6 +132,7 @@ export const CanvasPanel: React.FC<CanvasPanelProps> = ({
               />
             </svg>
           </button>
+          {toolbarActions}
           {/* 关闭按钮 */}
           <button
             onClick={onClose}
diff --git a/src/components/general-chat/types.ts b/src/components/general-chat/types.ts
index 4db267831..bbeab9418 100644
--- a/src/components/general-chat/types.ts
+++ b/src/components/general-chat/types.ts
@@ -9,6 +9,7 @@
  * @requirements 1.1, 2.1, 4.1
  */
 
+import type { ReactNode } from "react";
 import type { Page, PageParams } from "@/types/page";
 
 // ============================================================================
@@ -584,6 +585,8 @@ export interface CanvasPanelProps {
   onClose: () => void;
   /** 内容变更回调 */
   onContentChange: (content: string) => void;
+  /** 头部附加操作 */
+  toolbarActions?: ReactNode;
   /** 画布宽度 */
   width: number;
   /** 宽度变更回调 */
diff --git a/src/components/image-gen/ImageGenPage.test.tsx b/src/components/image-gen/ImageGenPage.test.tsx
index 30fb6d888..276a532ba 100644
--- a/src/components/image-gen/ImageGenPage.test.tsx
+++ b/src/components/image-gen/ImageGenPage.test.tsx
@@ -245,12 +245,12 @@ afterEach(() => {
 });
 
 describe("ImageGenPage", () => {
-  it("点击左上角返回按钮应回到首页新会话", () => {
+  it("点击左上角返回按钮应回到新建任务页", () => {
     const onNavigate = vi.fn();
     const container = renderPage(onNavigate);
 
     const backButton = container.querySelector<HTMLButtonElement>(
-      'button[title="返回首页"]',
+      'button[title="返回新建任务"]',
     );
     expect(backButton).not.toBeNull();
 
diff --git a/src/components/image-gen/index.ts b/src/components/image-gen/index.ts
index d3e167287..c9f06d9d0 100644
--- a/src/components/image-gen/index.ts
+++ b/src/components/image-gen/index.ts
@@ -1,6 +1,6 @@
 /**
  * @file 图片生成模块导出
- * @description AI 图片生成功能组件，复用凭证池的 API Key Provider
+ * @description AI 图片生成功能组件，复用凭证管理中的 API Key Provider
  * @module components/image-gen
  */
 
diff --git a/src/components/image-gen/tabs/AiImageGenTab.tsx b/src/components/image-gen/tabs/AiImageGenTab.tsx
index 064de325e..6e9955a4e 100644
--- a/src/components/image-gen/tabs/AiImageGenTab.tsx
+++ b/src/components/image-gen/tabs/AiImageGenTab.tsx
@@ -35,6 +35,7 @@ import { skillsApi, type Skill } from "@/lib/api/skills";
 import { useGlobalMediaGenerationDefaults } from "@/hooks/useGlobalMediaGenerationDefaults";
 import { resolveMediaGenerationPreference } from "@/lib/mediaGeneration";
 import type { Page } from "@/types/page";
+import { SettingsTabs } from "@/types/settings";
 
 export interface AiImageGenTabProps {
   /** 目标项目 ID（可选） */
@@ -1060,7 +1061,7 @@ export function AiImageGenTab({ projectId, onNavigate }: AiImageGenTabProps) {
   };
 
   const goCredentialManagement = () => {
-    onNavigate?.("provider-pool");
+    onNavigate?.("settings", { tab: SettingsTabs.Providers });
   };
 
   return (
diff --git a/src/components/image-gen/useImageGen.ts b/src/components/image-gen/useImageGen.ts
index c92edab72..ea3c82023 100644
--- a/src/components/image-gen/useImageGen.ts
+++ b/src/components/image-gen/useImageGen.ts
@@ -1,6 +1,6 @@
 /**
  * @file 图片生成 Hook
- * @description 管理图片生成状态，复用凭证池的 API Key Provider
+ * @description 管理图片生成状态，复用凭证管理中的 API Key Provider
  * @module components/image-gen/useImageGen
  */
 
@@ -1771,7 +1771,7 @@ export function useImageGen(options: UseImageGenOptions = {}) {
   const generateImage = useCallback(
     async (prompt: string, options?: GenerateImageOptions) => {
       if (!selectedProvider) {
-        throw new Error("请先在凭证池中配置 API Key Provider");
+        throw new Error("请先在凭证管理中配置 API Key Provider");
       }
 
       const generationCount = Math.max(
@@ -1823,7 +1823,7 @@ export function useImageGen(options: UseImageGenOptions = {}) {
               );
               if (!apiKey) {
                 throw new Error(
-                  "该 Provider 没有可用的 API Key，请在凭证池中添加",
+                  "该 Provider 没有可用的 API Key，请在凭证管理中添加",
                 );
               }
 
@@ -1884,7 +1884,7 @@ export function useImageGen(options: UseImageGenOptions = {}) {
               );
               if (!apiKey) {
                 throw new Error(
-                  "该 Provider 没有可用的 API Key，请在凭证池中添加",
+                  "该 Provider 没有可用的 API Key，请在凭证管理中添加",
                 );
               }
 
@@ -1942,7 +1942,9 @@ export function useImageGen(options: UseImageGenOptions = {}) {
             selectedProvider.id,
           );
           if (!apiKey) {
-            throw new Error("该 Provider 没有可用的 API Key，请在凭证池中添加");
+            throw new Error(
+              "该 Provider 没有可用的 API Key，请在凭证管理中添加",
+            );
           }
 
           const request: ImageGenRequest = {
diff --git a/src/components/memory/MemoryPage.tsx b/src/components/memory/MemoryPage.tsx
index 04aa02c9f..f053481a0 100644
--- a/src/components/memory/MemoryPage.tsx
+++ b/src/components/memory/MemoryPage.tsx
@@ -8,7 +8,14 @@
  * 所有数据均来自真实后端接口，不使用 Mock 数据。
  */
 
-import { useCallback, useEffect, useMemo, useRef, useState } from "react";
+import {
+  useCallback,
+  useEffect,
+  useMemo,
+  useRef,
+  useState,
+  type ReactNode,
+} from "react";
 import {
   AlertCircle,
   BrainCircuit,
@@ -31,6 +38,7 @@ import {
   type LucideIcon,
 } from "lucide-react";
 import { cn } from "@/lib/utils";
+import { Switch } from "@/components/ui/switch";
 import type { MemoryPageParams, Page, PageParams } from "@/types/page";
 import { SettingsTabs } from "@/types/settings";
 import { getConfig, saveConfig, type Config } from "@/lib/api/appConfig";
@@ -221,6 +229,15 @@ const DEFAULT_MEMORY_CONFIG: TauriMemoryConfig = {
   auto_cleanup: true,
 };
 
+const PRIMARY_BUTTON_CLASS_NAME =
+  "inline-flex items-center gap-2 rounded-full bg-slate-900 px-4 py-2 text-sm font-medium text-white transition hover:bg-slate-800 disabled:cursor-not-allowed disabled:opacity-60";
+const SECONDARY_BUTTON_CLASS_NAME =
+  "inline-flex items-center gap-2 rounded-full border border-slate-200 bg-white px-4 py-2 text-sm font-medium text-slate-600 transition hover:border-slate-300 hover:text-slate-900 disabled:cursor-not-allowed disabled:opacity-60";
+const INPUT_CLASS_NAME =
+  "w-full rounded-[16px] border border-slate-200 bg-white px-3.5 py-2.5 text-sm text-slate-700 outline-none transition placeholder:text-slate-400 focus:border-slate-300 focus:ring-2 focus:ring-slate-200 disabled:cursor-not-allowed disabled:opacity-60";
+const PANEL_CLASS_NAME =
+  "rounded-[26px] border border-slate-200/80 bg-white p-5 shadow-sm shadow-slate-950/5";
+
 function formatStorageSize(bytes: number): string {
   if (bytes < 1024) return `${bytes} B`;
   if (bytes < 1024 * 1024) return `${(bytes / 1024).toFixed(2)} KB`;
@@ -342,6 +359,104 @@ function normalizeCategoryStats(
   }));
 }
 
+function SurfacePanel({
+  icon: Icon,
+  title,
+  description,
+  aside,
+  children,
+  className,
+}: {
+  icon: LucideIcon;
+  title: string;
+  description: string;
+  aside?: ReactNode;
+  children: ReactNode;
+  className?: string;
+}) {
+  return (
+    <section className={cn(PANEL_CLASS_NAME, className)}>
+      <div className="flex flex-col gap-4 sm:flex-row sm:items-start sm:justify-between">
+        <div className="space-y-1">
+          <div className="flex items-center gap-2 text-sm font-semibold text-slate-900">
+            <Icon className="h-4 w-4 text-sky-600" />
+            {title}
+          </div>
+          <p className="text-sm leading-6 text-slate-500">{description}</p>
+        </div>
+        {aside ? (
+          <div className="flex flex-wrap items-center gap-2">{aside}</div>
+        ) : null}
+      </div>
+
+      <div className="mt-5">{children}</div>
+    </section>
+  );
+}
+
+function SummaryStat({
+  label,
+  value,
+  description,
+}: {
+  label: string;
+  value: string;
+  description: string;
+}) {
+  return (
+    <div className="rounded-[22px] border border-white/90 bg-white/88 p-4 shadow-sm">
+      <p className="text-xs font-medium tracking-[0.12em] text-slate-500">
+        {label}
+      </p>
+      <p className="mt-3 text-3xl font-semibold tracking-tight text-slate-900">
+        {value}
+      </p>
+      <p className="mt-2 text-xs leading-5 text-slate-500">{description}</p>
+    </div>
+  );
+}
+
+function StatusPill({
+  tone,
+  children,
+}: {
+  tone: "neutral" | "success" | "warning";
+  children: ReactNode;
+}) {
+  return (
+    <span
+      className={cn(
+        "rounded-full border px-3 py-1 text-xs font-medium",
+        tone === "success" &&
+          "border-emerald-200 bg-emerald-50 text-emerald-700",
+        tone === "warning" &&
+          "border-amber-200 bg-amber-50 text-amber-700",
+        tone === "neutral" &&
+          "border-slate-200 bg-white text-slate-500",
+      )}
+    >
+      {children}
+    </span>
+  );
+}
+
+function LoadingSkeleton() {
+  return (
+    <div className="space-y-6 pb-8">
+      <div className="h-[244px] animate-pulse rounded-[30px] border border-slate-200/80 bg-[linear-gradient(135deg,rgba(244,251,248,0.98)_0%,rgba(248,250,252,0.98)_45%,rgba(241,246,255,0.96)_100%)]" />
+      <div className="grid gap-6 xl:grid-cols-[minmax(0,1.16fr)_minmax(340px,0.84fr)]">
+        <div className="h-[340px] animate-pulse rounded-[26px] border border-slate-200/80 bg-white" />
+        <div className="h-[340px] animate-pulse rounded-[26px] border border-slate-200/80 bg-white" />
+      </div>
+      <div className="h-[540px] animate-pulse rounded-[26px] border border-slate-200/80 bg-white" />
+      <div className="grid gap-6 xl:grid-cols-2">
+        <div className="h-[280px] animate-pulse rounded-[26px] border border-slate-200/80 bg-white" />
+        <div className="h-[280px] animate-pulse rounded-[26px] border border-slate-200/80 bg-white" />
+      </div>
+    </div>
+  );
+}
+
 function EmptyMemoryState({
   onAnalyze,
   loading,
@@ -352,18 +467,19 @@ function EmptyMemoryState({
   disabled: boolean;
 }) {
   return (
-    <div className="rounded-xl border border-dashed p-8 text-center bg-muted/20">
-      <div className="mx-auto mb-4 flex h-12 w-12 items-center justify-center rounded-full bg-primary/10">
-        <BrainCircuit className="h-6 w-6 text-primary" />
+    <div className="rounded-[30px] border border-dashed border-slate-200 bg-[linear-gradient(135deg,rgba(244,251,248,0.96)_0%,rgba(255,255,255,0.94)_100%)] p-8 text-center shadow-sm shadow-slate-950/5">
+      <div className="mx-auto mb-4 flex h-12 w-12 items-center justify-center rounded-full bg-emerald-50">
+        <BrainCircuit className="h-6 w-6 text-emerald-600" />
       </div>
-      <h3 className="text-lg font-semibold mb-2">暂无记忆</h3>
-      <p className="text-sm text-muted-foreground mx-auto max-w-xl mb-6 leading-relaxed">
+      <h3 className="mb-2 text-lg font-semibold text-slate-900">暂无记忆</h3>
+      <p className="mx-auto mb-6 max-w-xl text-sm leading-7 text-slate-500">
         记忆提取是渐进式能力。积累更多真实对话后，系统会抽取并沉淀更稳定的可用信息。
       </p>
       <button
+        type="button"
         onClick={onAnalyze}
         disabled={loading || disabled}
-        className="inline-flex items-center gap-2 px-4 py-2 rounded-lg bg-primary text-primary-foreground hover:opacity-90 disabled:opacity-60"
+        className={PRIMARY_BUTTON_CLASS_NAME}
       >
         {loading ? (
           <>
@@ -394,7 +510,7 @@ function MemoryEntryCollection({
 }) {
   if (entries.length === 0) {
     return (
-      <div className="rounded-lg border p-4 text-sm text-muted-foreground">
+      <div className="rounded-[24px] border border-dashed border-slate-200 bg-slate-50/70 p-6 text-sm leading-6 text-slate-500">
         当前筛选条件下暂无记忆条目
       </div>
     );
@@ -402,7 +518,7 @@ function MemoryEntryCollection({
 
   if (viewMode === "grid") {
     return (
-      <div className="grid grid-cols-1 md:grid-cols-2 gap-3">
+      <div className="grid grid-cols-1 gap-4 md:grid-cols-2 2xl:grid-cols-3">
         {entries.map((entry) => {
           const meta = CATEGORY_META[entry.category];
           const selected = selectedEntryId === entry.id;
@@ -410,31 +526,46 @@ function MemoryEntryCollection({
           return (
             <button
               key={entry.id}
+              type="button"
               onClick={() => onSelect(entry.id)}
               className={cn(
-                "rounded-lg border p-3 text-left transition-colors",
+                "rounded-[24px] border p-4 text-left transition shadow-sm",
                 selected
-                  ? "border-primary bg-primary/5"
-                  : "hover:bg-muted/50 hover:border-muted-foreground/30",
+                  ? "border-sky-200 bg-sky-50/70 shadow-slate-950/5"
+                  : "border-slate-200/80 bg-white hover:border-slate-300 hover:bg-slate-50/80 hover:shadow-slate-950/5",
               )}
             >
-              <div className="flex items-start justify-between gap-2 mb-2">
-                <div className="min-w-0">
-                  <div className="text-sm font-medium truncate">
+              <div className="flex items-start justify-between gap-3">
+                <div className="min-w-0 space-y-2">
+                  <div className="flex flex-wrap items-center gap-2">
+                    <span className="rounded-full border border-slate-200 bg-white px-2.5 py-1 text-[11px] font-medium text-slate-500">
+                      {meta.label}
+                    </span>
+                    <span className="rounded-full border border-slate-200 bg-white px-2.5 py-1 text-[11px] font-medium text-slate-500">
+                      {memorySourceLabel(entry.source)}
+                    </span>
+                  </div>
+                  <div className="truncate text-base font-semibold text-slate-900">
                     {entry.title}
                   </div>
-                  <div className="text-xs text-muted-foreground mt-1">
-                    {meta.label} · {entry.session_id}
-                  </div>
                 </div>
-                <span className="text-[11px] text-muted-foreground whitespace-nowrap">
+                <span className="whitespace-nowrap text-[11px] text-slate-400">
                   {formatRelativeTimestamp(entry.updated_at)}
                 </span>
               </div>
 
-              <p className="text-xs text-muted-foreground line-clamp-3">
+              <p className="mt-3 text-sm leading-6 text-slate-500 line-clamp-3">
                 {entry.summary || "暂无摘要"}
               </p>
+
+              <div className="mt-4 flex items-center justify-between gap-2">
+                <span className="truncate text-xs text-slate-400">
+                  {entry.session_id}
+                </span>
+                <span className="text-xs font-medium text-slate-500">
+                  {memoryTypeLabel(entry.memory_type)}
+                </span>
+              </div>
             </button>
           );
         })}
@@ -443,7 +574,7 @@ function MemoryEntryCollection({
   }
 
   return (
-    <div className="rounded-lg border divide-y">
+    <div className="space-y-3">
       {entries.map((entry) => {
         const meta = CATEGORY_META[entry.category];
         const selected = selectedEntryId === entry.id;
@@ -451,27 +582,41 @@ function MemoryEntryCollection({
         return (
           <button
             key={entry.id}
+            type="button"
             onClick={() => onSelect(entry.id)}
             className={cn(
-              "w-full p-4 space-y-2 text-left transition-colors",
-              selected ? "bg-primary/5" : "hover:bg-muted/50",
+              "w-full rounded-[24px] border p-4 text-left transition shadow-sm",
+              selected
+                ? "border-sky-200 bg-sky-50/70 shadow-slate-950/5"
+                : "border-slate-200/80 bg-white hover:border-slate-300 hover:bg-slate-50/80 hover:shadow-slate-950/5",
             )}
           >
-            <div className="flex items-start justify-between gap-3">
-              <div className="min-w-0">
-                <div className="text-sm font-medium text-foreground truncate">
+            <div className="flex items-start justify-between gap-4">
+              <div className="min-w-0 space-y-2">
+                <div className="flex flex-wrap items-center gap-2">
+                  <span className="rounded-full border border-slate-200 bg-white px-2.5 py-1 text-[11px] font-medium text-slate-500">
+                    {meta.label}
+                  </span>
+                  <span className="rounded-full border border-slate-200 bg-white px-2.5 py-1 text-[11px] font-medium text-slate-500">
+                    {memorySourceLabel(entry.source)}
+                  </span>
+                  <span className="rounded-full border border-slate-200 bg-white px-2.5 py-1 text-[11px] font-medium text-slate-500">
+                    {memoryTypeLabel(entry.memory_type)}
+                  </span>
+                </div>
+                <div className="truncate text-base font-semibold text-slate-900">
                   {entry.title}
                 </div>
-                <div className="text-xs text-muted-foreground mt-1">
-                  {meta.label} · {entry.session_id}
+                <div className="truncate text-xs text-slate-400">
+                  {entry.session_id}
                 </div>
               </div>
-              <span className="text-xs text-muted-foreground whitespace-nowrap">
+              <span className="whitespace-nowrap text-xs text-slate-400">
                 {formatRelativeTimestamp(entry.updated_at)}
               </span>
             </div>
 
-            <p className="text-sm text-muted-foreground leading-relaxed line-clamp-2">
+            <p className="text-sm leading-6 text-slate-500 line-clamp-2">
               {entry.summary || "暂无摘要"}
             </p>
 
@@ -480,7 +625,7 @@ function MemoryEntryCollection({
                 {entry.tags.slice(0, 4).map((tag) => (
                   <span
                     key={`${entry.id}-${tag}`}
-                    className="inline-flex items-center rounded bg-muted px-2 py-0.5 text-[11px] text-muted-foreground"
+                    className="inline-flex items-center rounded-full border border-slate-200 bg-white px-2.5 py-1 text-[11px] text-slate-500"
                   >
                     {tag}
                   </span>
@@ -505,7 +650,7 @@ function MemoryDetailPanel({
 }) {
   if (!entry) {
     return (
-      <div className="rounded-lg border p-4 text-sm text-muted-foreground xl:sticky xl:top-4">
+      <div className="rounded-[26px] border border-dashed border-slate-200 bg-white/80 p-6 text-sm leading-6 text-slate-500 shadow-sm shadow-slate-950/5 xl:sticky xl:top-4">
         请选择一条记忆查看详情
       </div>
     );
@@ -514,94 +659,102 @@ function MemoryDetailPanel({
   const meta = CATEGORY_META[entry.category];
 
   return (
-    <div className="rounded-lg border p-4 space-y-4 xl:sticky xl:top-4">
-      <div>
-        <div className="text-xs text-muted-foreground mb-1">记忆标题</div>
-        <div className="text-sm font-medium leading-relaxed">{entry.title}</div>
-      </div>
-
-      <div className="grid grid-cols-2 gap-3 text-xs">
-        <div>
-          <div className="text-muted-foreground mb-1">记忆类型</div>
-          <div className="font-medium">
-            {memoryTypeLabel(entry.memory_type)}
+    <div className="rounded-[26px] border border-slate-200/80 bg-white p-5 shadow-sm shadow-slate-950/5 xl:sticky xl:top-4">
+      <div className="space-y-5">
+        <div className="space-y-3">
+          <div className="flex flex-wrap items-center gap-2">
+            <span className="rounded-full border border-slate-200 bg-slate-50 px-3 py-1 text-xs font-medium text-slate-500">
+              {meta.label}
+            </span>
+            <span className="rounded-full border border-slate-200 bg-slate-50 px-3 py-1 text-xs font-medium text-slate-500">
+              {memoryTypeLabel(entry.memory_type)}
+            </span>
+            <span className="rounded-full border border-slate-200 bg-slate-50 px-3 py-1 text-xs font-medium text-slate-500">
+              {memorySourceLabel(entry.source)}
+            </span>
+          </div>
+          <div>
+            <div className="mb-1 text-xs text-slate-400">记忆标题</div>
+            <div className="text-lg font-semibold leading-8 text-slate-900">
+              {entry.title}
+            </div>
           </div>
         </div>
-        <div>
-          <div className="text-muted-foreground mb-1">记忆来源</div>
-          <div className="font-medium">{memorySourceLabel(entry.source)}</div>
-        </div>
-        <div>
-          <div className="text-muted-foreground mb-1">会话 ID</div>
-          <div className="font-medium break-all">{entry.session_id}</div>
-        </div>
-        <div>
-          <div className="text-muted-foreground mb-1">更新时间</div>
-          <div className="font-medium">
-            {formatAbsoluteTimestamp(entry.updated_at)}
+
+        <div className="grid grid-cols-2 gap-3 text-xs text-slate-600">
+          <div className="rounded-[20px] border border-slate-200/80 bg-slate-50/70 p-3">
+            <div className="mb-1 text-slate-400">会话 ID</div>
+            <div className="break-all font-medium">{entry.session_id}</div>
+          </div>
+          <div className="rounded-[20px] border border-slate-200/80 bg-slate-50/70 p-3">
+            <div className="mb-1 text-slate-400">更新时间</div>
+            <div className="font-medium">
+              {formatAbsoluteTimestamp(entry.updated_at)}
+            </div>
+          </div>
+          <div className="rounded-[20px] border border-slate-200/80 bg-slate-50/70 p-3">
+            <div className="mb-1 text-slate-400">创建时间</div>
+            <div className="font-medium">
+              {formatAbsoluteTimestamp(entry.created_at)}
+            </div>
+          </div>
+          <div className="rounded-[20px] border border-slate-200/80 bg-slate-50/70 p-3">
+            <div className="mb-1 text-slate-400">分类</div>
+            <div className="font-medium">{meta.label}</div>
           </div>
         </div>
+
         <div>
-          <div className="text-muted-foreground mb-1">创建时间</div>
-          <div className="font-medium">
-            {formatAbsoluteTimestamp(entry.created_at)}
+          <div className="mb-2 text-xs text-slate-400">摘要内容</div>
+          <div className="rounded-[20px] border border-slate-200/80 bg-slate-50/70 p-4 text-sm leading-7 text-slate-700 whitespace-pre-wrap break-words">
+            {entry.summary || "暂无摘要"}
           </div>
         </div>
+
         <div>
-          <div className="text-muted-foreground mb-1">分类</div>
-          <div className="font-medium">{meta.label}</div>
-        </div>
-      </div>
-
-      <div>
-        <div className="text-xs text-muted-foreground mb-1">摘要内容</div>
-        <div className="text-sm leading-relaxed text-foreground whitespace-pre-wrap break-words rounded bg-muted/30 p-3">
-          {entry.summary || "暂无摘要"}
-        </div>
-      </div>
-
-      <div>
-        <div className="text-xs text-muted-foreground mb-1">详细内容</div>
-        <div className="text-sm leading-relaxed text-foreground whitespace-pre-wrap break-words rounded bg-muted/30 p-3">
-          {entry.content || "暂无内容"}
-        </div>
-      </div>
-
-      <div>
-        <div className="text-xs text-muted-foreground mb-2">标签</div>
-        {entry.tags.length === 0 ? (
-          <div className="text-xs text-muted-foreground">暂无标签</div>
-        ) : (
-          <div className="flex flex-wrap gap-1.5">
-            {entry.tags.map((tag) => (
-              <span
-                key={`${entry.id}-detail-${tag}`}
-                className="inline-flex items-center rounded bg-muted px-2 py-0.5 text-[11px] text-muted-foreground"
-              >
-                {tag}
-              </span>
-            ))}
+          <div className="mb-2 text-xs text-slate-400">详细内容</div>
+          <div className="rounded-[20px] border border-slate-200/80 bg-slate-50/70 p-4 text-sm leading-7 text-slate-700 whitespace-pre-wrap break-words">
+            {entry.content || "暂无内容"}
           </div>
-        )}
-      </div>
+        </div>
 
-      <button
-        onClick={() => onDelete(entry)}
-        disabled={deleting}
-        className="inline-flex w-full items-center justify-center gap-2 rounded border border-red-300 bg-red-50 px-3 py-2 text-sm text-red-600 hover:bg-red-100 disabled:opacity-60"
-      >
-        {deleting ? (
-          <>
-            <Loader2 className="h-4 w-4 animate-spin" />
-            删除中...
-          </>
-        ) : (
-          <>
-            <Trash2 className="h-4 w-4" />
-            删除记忆（不可恢复）
-          </>
-        )}
-      </button>
+        <div>
+          <div className="mb-2 text-xs text-slate-400">标签</div>
+          {entry.tags.length === 0 ? (
+            <div className="text-xs text-slate-500">暂无标签</div>
+          ) : (
+            <div className="flex flex-wrap gap-2">
+              {entry.tags.map((tag) => (
+                <span
+                  key={`${entry.id}-detail-${tag}`}
+                  className="inline-flex items-center rounded-full border border-slate-200 bg-slate-50 px-2.5 py-1 text-[11px] text-slate-500"
+                >
+                  {tag}
+                </span>
+              ))}
+            </div>
+          )}
+        </div>
+
+        <button
+          type="button"
+          onClick={() => onDelete(entry)}
+          disabled={deleting}
+          className="inline-flex w-full items-center justify-center gap-2 rounded-full border border-rose-200 bg-rose-50 px-3 py-2.5 text-sm font-medium text-rose-700 transition hover:border-rose-300 hover:bg-rose-100 disabled:cursor-not-allowed disabled:opacity-60"
+        >
+          {deleting ? (
+            <>
+              <Loader2 className="h-4 w-4 animate-spin" />
+              删除中...
+            </>
+          ) : (
+            <>
+              <Trash2 className="h-4 w-4" />
+              删除记忆（不可恢复）
+            </>
+          )}
+        </button>
+      </div>
     </div>
   );
 }
@@ -1086,36 +1239,47 @@ export function MemoryPage({ onNavigate, pageParams }: MemoryPageProps) {
       ? "查看全部记忆并触发分析任务"
       : CATEGORY_META[activeSection].description;
 
+  const activeSectionCount =
+    activeCategoryFilter === "all"
+      ? stats.total_entries
+      : (categoryCountMap.get(activeCategoryFilter) ?? 0);
+  const analysisScopeLabel =
+    analysisFromDate || analysisToDate
+      ? `${analysisFromDate || "最早"} - ${analysisToDate || "今天"}`
+      : "全部历史";
+  const projectLayerCard =
+    layerMetrics?.cards.find((card) => card.key === "project") ?? null;
+
   return (
-    <div className="flex h-full min-h-0 flex-col overflow-hidden bg-background">
-      <div className="flex items-center border-b bg-background px-6 py-3">
+    <div className="flex h-full min-h-0 flex-col overflow-hidden bg-slate-50/70">
+      <div className="flex items-center border-b border-slate-200/80 bg-white/90 px-6 py-3">
         <CanvasBreadcrumbHeader label="记忆" onBackHome={handleBackHome} />
       </div>
 
       <div className="flex flex-1 min-h-0 overflow-hidden">
-        <aside className="w-[248px] min-w-[248px] border-r bg-card/40 p-3 flex flex-col gap-3">
-          <div className="px-2 py-1">
-            <div className="flex items-center gap-2 text-sm font-semibold text-foreground">
-              <BrainCircuit className="h-4 w-4 text-primary" />
+        <aside className="flex w-[272px] min-w-[272px] flex-col gap-4 border-r border-slate-200/80 bg-[linear-gradient(180deg,rgba(255,255,255,0.92)_0%,rgba(248,250,252,0.96)_100%)] p-4">
+          <div className="rounded-[24px] border border-slate-200/80 bg-white/90 p-4 shadow-sm shadow-slate-950/5">
+            <div className="flex items-center gap-2 text-sm font-semibold text-slate-900">
+              <BrainCircuit className="h-4 w-4 text-sky-600" />
               记忆
             </div>
-            <div className="text-xs text-muted-foreground mt-1">
+            <div className="mt-1 text-xs text-slate-500">
               按 / 搜索，按 1-6 切换视图
             </div>
           </div>
 
           <label className="relative block">
-            <Search className="pointer-events-none absolute left-3 top-2.5 h-4 w-4 text-muted-foreground" />
+            <Search className="pointer-events-none absolute left-3 top-3 h-4 w-4 text-slate-400" />
             <input
               ref={searchInputRef}
               value={searchKeyword}
               onChange={(event) => setSearchKeyword(event.target.value)}
               placeholder="搜索标题、摘要或标签"
-              className="w-full rounded-lg border bg-background py-2 pl-9 pr-3 text-sm text-foreground"
+              className="w-full rounded-[16px] border border-slate-200 bg-white py-2.5 pl-9 pr-3 text-sm text-slate-700 outline-none transition placeholder:text-slate-400 focus:border-slate-300 focus:ring-2 focus:ring-slate-200"
             />
           </label>
 
-          <div className="space-y-1">
+          <div className="space-y-2">
             {MEMORY_NAV_ITEMS.map((item) => {
               const active = activeSection === item.key;
               const count =
@@ -1126,24 +1290,23 @@ export function MemoryPage({ onNavigate, pageParams }: MemoryPageProps) {
               return (
                 <button
                   key={item.key}
+                  type="button"
                   onClick={() => setActiveSection(item.key)}
                   className={cn(
-                    "w-full rounded-lg border px-3 py-2 text-left transition-colors",
+                    "w-full rounded-[18px] border px-3 py-3 text-left transition shadow-sm",
                     active
-                      ? "border-primary bg-primary/10"
-                      : "border-transparent hover:bg-muted/60",
+                      ? "border-slate-300 bg-white shadow-slate-950/5"
+                      : "border-transparent bg-transparent hover:border-slate-200 hover:bg-white/80 hover:shadow-slate-950/5",
                   )}
                 >
                   <div className="flex items-center justify-between gap-2">
-                    <span className="inline-flex items-center gap-2 text-sm font-medium">
-                      <item.icon className="h-4 w-4 text-muted-foreground" />
+                    <span className="inline-flex items-center gap-2 text-sm font-medium text-slate-900">
+                      <item.icon className="h-4 w-4 text-slate-400" />
                       {item.label}
                     </span>
-                    <span className="text-xs text-muted-foreground">
-                      {count}
-                    </span>
+                    <span className="text-xs text-slate-400">{count}</span>
                   </div>
-                  <div className="mt-1 text-xs text-muted-foreground line-clamp-1">
+                  <div className="mt-1 text-xs text-slate-500 line-clamp-1">
                     {item.description}
                   </div>
                 </button>
@@ -1151,477 +1314,684 @@ export function MemoryPage({ onNavigate, pageParams }: MemoryPageProps) {
             })}
           </div>
 
-          <div className="mt-auto rounded-lg border bg-muted/20 p-3 text-xs text-muted-foreground leading-relaxed">
+          <div className="mt-auto rounded-[22px] border border-slate-200/80 bg-white/90 p-4 text-xs leading-6 text-slate-500 shadow-sm shadow-slate-950/5">
             记忆页面已接入统一记忆数据库：浏览、分析、删除都直接操作真实数据，不使用
             Mock 数据。
           </div>
         </aside>
 
         <main className="flex-1 min-h-0 overflow-y-auto">
-          <div className="mx-auto max-w-6xl p-6 space-y-6">
-            <div className="flex flex-wrap items-start justify-between gap-3">
-              <div>
-                <h1 className="text-xl font-semibold">{sectionTitle}</h1>
-                <p className="text-sm text-muted-foreground mt-1">
-                  {sectionDescription}
-                </p>
-              </div>
-
-              <div className="flex items-center gap-2">
-                <button
-                  onClick={() =>
-                    onNavigate?.("settings", { tab: SettingsTabs.Memory })
-                  }
-                  className="inline-flex items-center gap-1.5 rounded border px-3 py-1.5 text-sm hover:bg-muted"
-                >
-                  <Settings2 className="h-3.5 w-3.5" />
-                  记忆设置
-                </button>
-
-                <button
-                  onClick={handleRefresh}
-                  disabled={refreshing || analyzing || loading}
-                  className="inline-flex items-center gap-1.5 rounded border px-3 py-1.5 text-sm hover:bg-muted disabled:opacity-60"
-                >
-                  <RefreshCw
-                    className={cn("h-3.5 w-3.5", refreshing && "animate-spin")}
-                  />
-                  刷新
-                </button>
-
-                <button
-                  onClick={handleAnalyze}
-                  disabled={analyzing || loading || !memoryConfig.enabled}
-                  className="inline-flex items-center gap-1.5 rounded bg-primary px-3 py-1.5 text-sm text-primary-foreground hover:opacity-90 disabled:opacity-60"
-                >
-                  {analyzing ? (
-                    <>
-                      <Loader2 className="h-3.5 w-3.5 animate-spin" />
-                      分析中...
-                    </>
-                  ) : (
-                    <>
-                      <CalendarClock className="h-3.5 w-3.5" />
-                      请求记忆分析
-                    </>
+          <div className="mx-auto max-w-[1440px] p-6 lg:p-8">
+            <div className="space-y-6">
+              {message ? (
+                <div
+                  className={cn(
+                    "flex items-center gap-3 rounded-[20px] border px-4 py-3 text-sm shadow-sm shadow-slate-950/5",
+                    message.type === "success"
+                      ? "border-emerald-200 bg-emerald-50/90 text-emerald-700"
+                      : "border-rose-200 bg-rose-50/90 text-rose-700",
                   )}
-                </button>
-              </div>
-            </div>
-
-            {loading ? (
-              <div className="flex items-center justify-center py-12 text-muted-foreground">
-                <Loader2 className="h-5 w-5 animate-spin mr-2" />
-                正在加载记忆数据...
-              </div>
-            ) : (
-              <>
-                <div className="rounded-xl border p-4 bg-gradient-to-br from-primary/5 to-primary/10">
-                  <div className="grid grid-cols-1 md:grid-cols-3 gap-3">
-                    <div className="rounded-lg bg-background/60 p-3">
-                      <div className="text-xs text-muted-foreground mb-1">
-                        记忆条数
-                      </div>
-                      <div className="text-2xl font-semibold text-primary">
-                        {stats.total_entries}
-                      </div>
-                    </div>
-                    <div className="rounded-lg bg-background/60 p-3">
-                      <div className="text-xs text-muted-foreground mb-1">
-                        存储空间
-                      </div>
-                      <div className="text-2xl font-semibold text-primary">
-                        {formatStorageSize(stats.storage_used)}
-                      </div>
-                    </div>
-                    <div className="rounded-lg bg-background/60 p-3">
-                      <div className="text-xs text-muted-foreground mb-1">
-                        记忆库数
-                      </div>
-                      <div className="text-2xl font-semibold text-primary">
-                        {stats.memory_count}
-                      </div>
-                    </div>
-                  </div>
+                >
+                  {message.type === "success" ? (
+                    <CheckCircle2 className="h-4 w-4 flex-shrink-0" />
+                  ) : (
+                    <AlertCircle className="h-4 w-4 flex-shrink-0" />
+                  )}
+                  <span>{message.text}</span>
                 </div>
+              ) : null}
 
-                <div className="rounded-xl border p-4 bg-card">
-                  <div className="flex flex-wrap items-center justify-between gap-2 mb-3">
-                    <div className="text-sm font-medium">三层记忆可用性</div>
-                    <div className="text-xs text-muted-foreground">
-                      已可用 {layerMetrics.readyLayers}/
-                      {layerMetrics.totalLayers} 层
-                    </div>
-                  </div>
+              {loading ? (
+                <LoadingSkeleton />
+              ) : (
+                <>
+                  <section className="relative overflow-hidden rounded-[30px] border border-emerald-200/70 bg-[linear-gradient(135deg,rgba(244,251,248,0.98)_0%,rgba(248,250,252,0.98)_45%,rgba(241,246,255,0.96)_100%)] shadow-sm shadow-slate-950/5">
+                    <div className="pointer-events-none absolute -left-20 top-[-72px] h-56 w-56 rounded-full bg-emerald-200/30 blur-3xl" />
+                    <div className="pointer-events-none absolute right-[-76px] top-[-24px] h-56 w-56 rounded-full bg-sky-200/28 blur-3xl" />
 
-                  <div className="grid grid-cols-1 md:grid-cols-3 gap-3">
-                    {layerMetrics.cards.map((card) => (
-                      <div
-                        key={card.key}
-                        className="rounded-lg border bg-background/60 p-3"
-                      >
-                        <div className="flex items-center justify-between gap-2">
-                          <div className="text-xs text-muted-foreground">
-                            {card.title}
+                    <div className="relative flex flex-col gap-6 p-6 lg:p-8">
+                      <div className="grid gap-6 xl:grid-cols-[minmax(0,1.12fr)_minmax(380px,0.88fr)] xl:items-stretch">
+                        <div className="max-w-3xl space-y-5">
+                          <span className="inline-flex items-center rounded-full border border-emerald-200 bg-white/85 px-3 py-1 text-xs font-semibold tracking-[0.16em] text-emerald-700 shadow-sm">
+                            MEMORY HUB
+                          </span>
+
+                          <div className="space-y-2">
+                            <p className="text-[28px] font-semibold tracking-tight text-slate-900">
+                              {sectionTitle}
+                            </p>
+                            <p className="max-w-2xl text-sm leading-7 text-slate-600">
+                              {sectionDescription}
+                              {activeSection === "home"
+                                ? " 统一记忆、上下文记忆和项目记忆会在这里汇总展示。"
+                                : " 这里会聚焦当前分类下的真实记忆条目与分析结果。"}
+                            </p>
                           </div>
-                          <span
-                            className={cn(
-                              "text-[10px] px-2 py-0.5 rounded-full border",
-                              card.available
-                                ? "text-green-700 border-green-200 bg-green-50 dark:text-green-400 dark:border-green-800 dark:bg-green-900/20"
-                                : "text-muted-foreground border-muted",
-                            )}
+
+                          <div className="flex flex-wrap items-center gap-2">
+                            <StatusPill
+                              tone={memoryConfig.enabled ? "success" : "warning"}
+                            >
+                              {memoryConfig.enabled ? "记忆已启用" : "记忆已关闭"}
+                            </StatusPill>
+                            <StatusPill tone="neutral">
+                              当前范围 {analysisScopeLabel}
+                            </StatusPill>
+                            <StatusPill tone={projectId ? "success" : "warning"}>
+                              {projectId ? "已选项目" : "未选项目"}
+                            </StatusPill>
+                            <StatusPill tone="neutral">
+                              搜索结果 {filteredEntries.length}
+                            </StatusPill>
+                          </div>
+                        </div>
+
+                        <div className="grid gap-3 sm:grid-cols-2 xl:grid-cols-2 xl:content-start">
+                          <SummaryStat
+                            label="记忆条数"
+                            value={stats.total_entries.toString()}
+                            description="当前统一记忆数据库中的全部可用条目。"
+                          />
+                          <SummaryStat
+                            label="存储空间"
+                            value={formatStorageSize(stats.storage_used)}
+                            description="记忆数据库当前已占用的存储体积。"
+                          />
+                          <SummaryStat
+                            label="记忆库数"
+                            value={stats.memory_count.toString()}
+                            description="后端返回的记忆库数量，用于观察整体规模。"
+                          />
+                          <SummaryStat
+                            label="当前结果"
+                            value={activeSectionCount.toString()}
+                            description="当前分类和搜索条件下可浏览的记忆条目数。"
+                          />
+                        </div>
+                      </div>
+
+                      <div className="flex flex-col gap-4 rounded-[24px] border border-white/90 bg-white/80 p-4 shadow-sm lg:flex-row lg:items-center lg:justify-between">
+                        <div className="space-y-2">
+                          <div className="flex flex-wrap items-center gap-2">
+                            <StatusPill tone="neutral">
+                              当前视图{" "}
+                              {activeSection === "home"
+                                ? "全部分类"
+                                : CATEGORY_META[activeSection].label}
+                            </StatusPill>
+                            <StatusPill tone="neutral">
+                              搜索词 {searchKeyword.trim() || "未设置"}
+                            </StatusPill>
+                          </div>
+                          <p className="text-sm leading-6 text-slate-600">
+                            刷新会重取总览、分类和项目记忆状态。请求记忆分析会按当前日期范围扫描真实历史对话。
+                          </p>
+                        </div>
+
+                        <div className="flex flex-wrap items-center gap-2">
+                          <button
+                            type="button"
+                            onClick={() =>
+                              onNavigate?.("settings", {
+                                tab: SettingsTabs.Memory,
+                              })
+                            }
+                            className={SECONDARY_BUTTON_CLASS_NAME}
                           >
-                            {card.available ? "已生效" : "待完善"}
-                          </span>
-                        </div>
-                        <div className="text-xl font-semibold text-primary mt-1">
-                          {card.value}
-                          <span className="text-sm text-muted-foreground ml-1">
-                            {card.unit}
-                          </span>
-                        </div>
-                        <div className="text-xs text-muted-foreground mt-1 leading-relaxed">
-                          {card.description}
-                        </div>
-                        {card.key === "project" && (
-                          <div className="mt-2 flex flex-wrap gap-2">
-                            {!projectId ? (
-                              <button
-                                onClick={() => onNavigate?.("projects")}
-                                className="rounded border px-2 py-1 text-[11px] hover:bg-muted"
-                              >
-                                去选择项目
-                              </button>
+                            <Settings2 className="h-4 w-4" />
+                            记忆设置
+                          </button>
+                          <button
+                            type="button"
+                            onClick={handleRefresh}
+                            disabled={refreshing || analyzing}
+                            className={SECONDARY_BUTTON_CLASS_NAME}
+                          >
+                            <RefreshCw
+                              className={cn(
+                                "h-4 w-4",
+                                refreshing && "animate-spin",
+                              )}
+                            />
+                            刷新
+                          </button>
+                          <button
+                            type="button"
+                            onClick={handleAnalyze}
+                            disabled={analyzing || !memoryConfig.enabled}
+                            className={PRIMARY_BUTTON_CLASS_NAME}
+                          >
+                            {analyzing ? (
+                              <>
+                                <Loader2 className="h-4 w-4 animate-spin" />
+                                分析中...
+                              </>
                             ) : (
                               <>
-                                {!card.available && (
-                                  <button
-                                    onClick={handleBootstrapProjectMemory}
-                                    disabled={initializingProjectMemory}
-                                    className="rounded border px-2 py-1 text-[11px] hover:bg-muted disabled:opacity-60"
-                                  >
-                                    {initializingProjectMemory
-                                      ? "初始化中..."
-                                      : "一键初始化"}
-                                  </button>
-                                )}
-                                <button
-                                  onClick={() => onNavigate?.("style")}
-                                  className="rounded border px-2 py-1 text-[11px] hover:bg-muted"
-                                >
-                                  前往风格资产
-                                </button>
-                                <button
-                                  onClick={() =>
-                                    onNavigate?.("project-detail", {
-                                      projectId,
-                                    })
-                                  }
-                                  className="rounded border px-2 py-1 text-[11px] hover:bg-muted"
-                                >
-                                  前往项目工作台
-                                </button>
+                                <CalendarClock className="h-4 w-4" />
+                                请求记忆分析
                               </>
                             )}
+                          </button>
+                        </div>
+                      </div>
+                    </div>
+                  </section>
+
+                  <div className="grid gap-6 xl:grid-cols-[minmax(0,1.16fr)_minmax(340px,0.84fr)]">
+                    <SurfacePanel
+                      icon={BrainCircuit}
+                      title="三层记忆可用性"
+                      description="持续检查统一记忆、上下文记忆和项目记忆是否已经参与当前工作流。"
+                      aside={
+                        <div className="flex items-center gap-2">
+                          <StatusPill
+                            tone={
+                              (layerMetrics?.readyLayers ?? 0) > 0
+                                ? "success"
+                                : "warning"
+                            }
+                          >
+                            已可用 {layerMetrics?.readyLayers ?? 0}/
+                            {layerMetrics?.totalLayers ?? 3} 层
+                          </StatusPill>
+                          <button
+                            type="button"
+                            onClick={handleRefresh}
+                            disabled={refreshing}
+                            className={SECONDARY_BUTTON_CLASS_NAME}
+                          >
+                            <RefreshCw
+                              className={cn(
+                                "h-4 w-4",
+                                refreshing && "animate-spin",
+                              )}
+                            />
+                            刷新
+                          </button>
+                        </div>
+                      }
+                    >
+                      <div className="grid gap-4 lg:grid-cols-3">
+                        {(layerMetrics?.cards ?? []).map((card) => (
+                          <div
+                            key={card.key}
+                            className="rounded-[24px] border border-slate-200/80 bg-[linear-gradient(135deg,rgba(255,255,255,0.96)_0%,rgba(248,250,252,0.92)_100%)] p-4"
+                          >
+                            <div className="flex items-start justify-between gap-3">
+                              <div className="space-y-1">
+                                <p className="text-sm font-semibold text-slate-900">
+                                  {card.title}
+                                </p>
+                                <p className="text-sm leading-6 text-slate-500">
+                                  {card.description}
+                                </p>
+                              </div>
+                              <StatusPill
+                                tone={card.available ? "success" : "warning"}
+                              >
+                                {card.available ? "已生效" : "待完善"}
+                              </StatusPill>
+                            </div>
+
+                            <div className="mt-4 text-3xl font-semibold tracking-tight text-slate-900">
+                              {card.value}
+                              <span className="ml-1 text-sm font-medium text-slate-500">
+                                {card.unit}
+                              </span>
+                            </div>
+
+                            {card.key === "project" ? (
+                              <div className="mt-4 flex flex-wrap items-center gap-2">
+                                {!projectId ? (
+                                  <button
+                                    type="button"
+                                    onClick={() => onNavigate?.("projects")}
+                                    className={SECONDARY_BUTTON_CLASS_NAME}
+                                  >
+                                    去选择项目
+                                  </button>
+                                ) : (
+                                  <>
+                                    {!card.available ? (
+                                      <button
+                                        type="button"
+                                        onClick={handleBootstrapProjectMemory}
+                                        disabled={initializingProjectMemory}
+                                        className={SECONDARY_BUTTON_CLASS_NAME}
+                                      >
+                                        {initializingProjectMemory
+                                          ? "初始化中..."
+                                          : "一键初始化"}
+                                      </button>
+                                    ) : null}
+                                    <button
+                                      type="button"
+                                      onClick={() => onNavigate?.("style")}
+                                      className={SECONDARY_BUTTON_CLASS_NAME}
+                                    >
+                                      前往风格资产
+                                    </button>
+                                    <button
+                                      type="button"
+                                      onClick={() =>
+                                        onNavigate?.("project-detail", {
+                                          projectId,
+                                        })
+                                      }
+                                      className={SECONDARY_BUTTON_CLASS_NAME}
+                                    >
+                                      前往项目工作台
+                                    </button>
+                                  </>
+                                )}
+                              </div>
+                            ) : null}
+                          </div>
+                        ))}
+                      </div>
+                    </SurfacePanel>
+
+                    <SurfacePanel
+                      icon={Database}
+                      title="分析工作台"
+                      description="先确定时间范围，再触发记忆分析。最近一次分析结果也会在这里汇总。"
+                    >
+                      <div className="space-y-4">
+                        <div className="grid gap-4 sm:grid-cols-2">
+                          <label className="space-y-2">
+                            <span className="text-xs font-medium text-slate-500">
+                              开始日期
+                            </span>
+                            <input
+                              type="date"
+                              value={analysisFromDate}
+                              onChange={(event) =>
+                                setAnalysisFromDate(event.target.value)
+                              }
+                              className={INPUT_CLASS_NAME}
+                              disabled={analyzing}
+                            />
+                          </label>
+
+                          <label className="space-y-2">
+                            <span className="text-xs font-medium text-slate-500">
+                              结束日期
+                            </span>
+                            <input
+                              type="date"
+                              value={analysisToDate}
+                              onChange={(event) =>
+                                setAnalysisToDate(event.target.value)
+                              }
+                              className={INPUT_CLASS_NAME}
+                              disabled={analyzing}
+                            />
+                          </label>
+                        </div>
+
+                        <div className="flex flex-wrap items-center gap-2">
+                          <StatusPill
+                            tone={memoryConfig.enabled ? "success" : "warning"}
+                          >
+                            {memoryConfig.enabled
+                              ? "当前允许分析"
+                              : "请先开启记忆"}
+                          </StatusPill>
+                          <StatusPill tone="neutral">
+                            分析范围 {analysisScopeLabel}
+                          </StatusPill>
+                        </div>
+
+                        <div className="flex flex-wrap items-center gap-2">
+                          <button
+                            type="button"
+                            onClick={handleAnalyze}
+                            disabled={analyzing || !memoryConfig.enabled}
+                            className={PRIMARY_BUTTON_CLASS_NAME}
+                          >
+                            {analyzing ? (
+                              <>
+                                <Loader2 className="h-4 w-4 animate-spin" />
+                                分析中...
+                              </>
+                            ) : (
+                              <>
+                                <CalendarClock className="h-4 w-4" />
+                                立即分析
+                              </>
+                            )}
+                          </button>
+                          <button
+                            type="button"
+                            onClick={() => {
+                              setAnalysisFromDate("");
+                              setAnalysisToDate("");
+                            }}
+                            disabled={
+                              analyzing || (!analysisFromDate && !analysisToDate)
+                            }
+                            className={SECONDARY_BUTTON_CLASS_NAME}
+                          >
+                            清空范围
+                          </button>
+                        </div>
+
+                        {analysisResult ? (
+                          <div className="rounded-[22px] border border-slate-200/80 bg-slate-50/70 p-4">
+                            <div className="text-xs font-medium tracking-[0.12em] text-slate-500">
+                              最近一次分析结果
+                            </div>
+                            <div className="mt-3 grid gap-3 sm:grid-cols-2">
+                              <div className="rounded-[18px] border border-slate-200/80 bg-white/90 p-3">
+                                <p className="text-xs text-slate-500">分析会话</p>
+                                <p className="mt-2 text-2xl font-semibold text-slate-900">
+                                  {analysisResult.analyzed_sessions}
+                                </p>
+                              </div>
+                              <div className="rounded-[18px] border border-slate-200/80 bg-white/90 p-3">
+                                <p className="text-xs text-slate-500">扫描消息</p>
+                                <p className="mt-2 text-2xl font-semibold text-slate-900">
+                                  {analysisResult.analyzed_messages}
+                                </p>
+                              </div>
+                              <div className="rounded-[18px] border border-slate-200/80 bg-white/90 p-3">
+                                <p className="text-xs text-slate-500">新增记忆</p>
+                                <p className="mt-2 text-2xl font-semibold text-slate-900">
+                                  {analysisResult.generated_entries}
+                                </p>
+                              </div>
+                              <div className="rounded-[18px] border border-slate-200/80 bg-white/90 p-3">
+                                <p className="text-xs text-slate-500">去重数量</p>
+                                <p className="mt-2 text-2xl font-semibold text-slate-900">
+                                  {analysisResult.deduplicated_entries}
+                                </p>
+                              </div>
+                            </div>
+                          </div>
+                        ) : (
+                          <div className="rounded-[22px] border border-dashed border-slate-200 bg-slate-50/70 p-4 text-sm leading-6 text-slate-500">
+                            还没有最近一次分析结果。未选择日期时，会分析全部可用历史对话。
                           </div>
                         )}
                       </div>
-                    ))}
-                  </div>
-                </div>
-
-                <div className="rounded-lg border p-4 space-y-3">
-                  <div className="flex items-center gap-2 text-sm font-medium">
-                    <Database className="h-4 w-4 text-muted-foreground" />
-                    分析范围（可选）
+                    </SurfacePanel>
                   </div>
 
-                  <div className="grid grid-cols-1 md:grid-cols-3 gap-3">
-                    <label className="text-xs text-muted-foreground space-y-1">
-                      <span className="block">开始日期</span>
-                      <input
-                        type="date"
-                        value={analysisFromDate}
-                        onChange={(event) =>
-                          setAnalysisFromDate(event.target.value)
-                        }
-                        className="w-full rounded border bg-background px-2.5 py-2 text-sm text-foreground"
-                        disabled={analyzing}
-                      />
-                    </label>
+                  {!hasMemoryData ? (
+                    <EmptyMemoryState
+                      onAnalyze={handleAnalyze}
+                      loading={analyzing}
+                      disabled={!memoryConfig.enabled}
+                    />
+                  ) : (
+                    <>
+                      {activeSection === "home" ? (
+                        <SurfacePanel
+                          icon={Home}
+                          title="分类概览"
+                          description="从首页快速切换到具体分类，避免在同一堆条目里横向查找。"
+                        >
+                          <div className="grid gap-4 sm:grid-cols-2 xl:grid-cols-5">
+                            {categories.map((item) => {
+                              const meta = CATEGORY_META[item.category];
+                              const Icon = meta.icon;
 
-                    <label className="text-xs text-muted-foreground space-y-1">
-                      <span className="block">结束日期</span>
-                      <input
-                        type="date"
-                        value={analysisToDate}
-                        onChange={(event) =>
-                          setAnalysisToDate(event.target.value)
-                        }
-                        className="w-full rounded border bg-background px-2.5 py-2 text-sm text-foreground"
-                        disabled={analyzing}
-                      />
-                    </label>
+                              return (
+                                <button
+                                  key={item.category}
+                                  type="button"
+                                  onClick={() => setActiveSection(item.category)}
+                                  className="rounded-[24px] border border-slate-200/80 bg-[linear-gradient(135deg,rgba(255,255,255,0.96)_0%,rgba(248,250,252,0.92)_100%)] p-4 text-left transition hover:border-slate-300 hover:shadow-sm"
+                                >
+                                  <div className="inline-flex items-center gap-1.5 text-xs text-slate-500">
+                                    <Icon className="h-3.5 w-3.5" />
+                                    {meta.label}
+                                  </div>
+                                  <div className="mt-3 text-3xl font-semibold tracking-tight text-slate-900">
+                                    {item.count}
+                                  </div>
+                                  <div className="mt-2 text-sm leading-6 text-slate-500 line-clamp-2">
+                                    {meta.description}
+                                  </div>
+                                </button>
+                              );
+                            })}
+                          </div>
+                        </SurfacePanel>
+                      ) : null}
 
-                    <button
-                      onClick={() => {
-                        setAnalysisFromDate("");
-                        setAnalysisToDate("");
-                      }}
-                      disabled={
-                        analyzing || (!analysisFromDate && !analysisToDate)
-                      }
-                      className="self-end inline-flex items-center justify-center rounded border px-3 py-2 text-sm hover:bg-muted disabled:opacity-60"
-                    >
-                      清空范围
-                    </button>
-                  </div>
-
-                  <p className="text-xs text-muted-foreground">
-                    未选择日期时，会分析全部可用历史对话。
-                  </p>
-                </div>
-
-                {analysisResult && (
-                  <div className="rounded-lg border p-3 bg-muted/20">
-                    <div className="text-xs text-muted-foreground mb-1">
-                      最近一次分析结果
-                    </div>
-                    <div className="text-sm">
-                      分析会话 {analysisResult.analyzed_sessions} 个，扫描消息{" "}
-                      {analysisResult.analyzed_messages} 条，新增记忆{" "}
-                      {analysisResult.generated_entries} 条，去重{" "}
-                      {analysisResult.deduplicated_entries} 条。
-                    </div>
-                  </div>
-                )}
-
-                {!hasMemoryData ? (
-                  <EmptyMemoryState
-                    onAnalyze={handleAnalyze}
-                    loading={analyzing}
-                    disabled={!memoryConfig.enabled}
-                  />
-                ) : (
-                  <>
-                    {activeSection === "home" && (
-                      <div className="grid grid-cols-1 md:grid-cols-2 xl:grid-cols-5 gap-3">
-                        {categories.map((item) => {
-                          const meta = CATEGORY_META[item.category];
-                          const Icon = meta.icon;
-
-                          return (
+                      <SurfacePanel
+                        icon={viewMode === "list" ? List : LayoutGrid}
+                        title="记忆条目"
+                        description="列表和详情保持同屏，方便批量浏览与单条校验。"
+                        aside={
+                          <div className="inline-flex overflow-hidden rounded-full border border-slate-200 bg-white shadow-sm">
                             <button
-                              key={item.category}
-                              onClick={() => setActiveSection(item.category)}
-                              className="rounded-lg border p-3 bg-card text-left transition-colors hover:bg-muted/30"
+                              type="button"
+                              onClick={() => setViewMode("list")}
+                              className={cn(
+                                "inline-flex items-center gap-1.5 px-4 py-2 text-xs font-medium transition",
+                                viewMode === "list"
+                                  ? "bg-slate-900 text-white"
+                                  : "text-slate-500 hover:bg-slate-50 hover:text-slate-900",
+                              )}
                             >
-                              <div className="inline-flex items-center gap-1.5 text-xs text-muted-foreground mb-1">
-                                <Icon className="h-3.5 w-3.5" />
-                                {meta.label}
-                              </div>
-                              <div className="text-2xl font-semibold text-primary leading-none mb-1">
-                                {item.count}
-                              </div>
-                              <div className="text-xs text-muted-foreground line-clamp-2">
-                                {meta.description}
-                              </div>
+                              <List className="h-3.5 w-3.5" />
+                              列表
                             </button>
-                          );
-                        })}
-                      </div>
-                    )}
+                            <button
+                              type="button"
+                              onClick={() => setViewMode("grid")}
+                              className={cn(
+                                "inline-flex items-center gap-1.5 px-4 py-2 text-xs font-medium transition",
+                                viewMode === "grid"
+                                  ? "bg-slate-900 text-white"
+                                  : "text-slate-500 hover:bg-slate-50 hover:text-slate-900",
+                              )}
+                            >
+                              <LayoutGrid className="h-3.5 w-3.5" />
+                              网格
+                            </button>
+                          </div>
+                        }
+                      >
+                        <div className="mb-5 flex flex-wrap items-center gap-2">
+                          <StatusPill tone="neutral">
+                            当前筛选{" "}
+                            {activeCategoryFilter === "all"
+                              ? "全部分类"
+                              : CATEGORY_META[activeCategoryFilter].label}
+                          </StatusPill>
+                          <StatusPill tone="neutral">
+                            共 {filteredEntries.length} 条结果
+                          </StatusPill>
+                          <StatusPill tone="neutral">
+                            搜索词 {searchKeyword.trim() || "未设置"}
+                          </StatusPill>
+                        </div>
 
-                    <div className="rounded-lg border p-3 space-y-3">
-                      <div className="flex flex-wrap items-center justify-between gap-2">
-                        <div className="text-sm font-medium">记忆条目</div>
+                        <div className="grid grid-cols-1 gap-5 xl:grid-cols-[minmax(0,1fr)_360px]">
+                          <MemoryEntryCollection
+                            entries={filteredEntries}
+                            viewMode={viewMode}
+                            selectedEntryId={selectedEntryId}
+                            onSelect={setSelectedEntryId}
+                          />
+                          <MemoryDetailPanel
+                            entry={selectedEntry}
+                            deleting={
+                              !!selectedEntry &&
+                              deletingEntryId === selectedEntry.id
+                            }
+                            onDelete={handleDeleteEntry}
+                          />
+                        </div>
+                      </SurfacePanel>
+                    </>
+                  )}
 
-                        <div className="inline-flex rounded border overflow-hidden">
-                          <button
-                            onClick={() => setViewMode("list")}
-                            className={cn(
-                              "inline-flex items-center gap-1.5 px-3 py-1.5 text-xs",
-                              viewMode === "list"
-                                ? "bg-primary text-primary-foreground"
-                                : "hover:bg-muted",
-                            )}
-                          >
-                            <List className="h-3.5 w-3.5" />
-                            列表
-                          </button>
-                          <button
-                            onClick={() => setViewMode("grid")}
-                            className={cn(
-                              "inline-flex items-center gap-1.5 px-3 py-1.5 text-xs",
-                              viewMode === "grid"
-                                ? "bg-primary text-primary-foreground"
-                                : "hover:bg-muted",
-                            )}
-                          >
-                            <LayoutGrid className="h-3.5 w-3.5" />
-                            网格
-                          </button>
+                  <div className="grid gap-6 xl:grid-cols-2">
+                    <SurfacePanel
+                      icon={Settings2}
+                      title="运行策略"
+                      description="这里的开关会立即保存并作用到当前记忆运行时。"
+                      aside={
+                        <StatusPill tone={saving ? "warning" : "neutral"}>
+                          {saving ? "保存中..." : "即时生效"}
+                        </StatusPill>
+                      }
+                    >
+                      <div className="space-y-4">
+                        <div className="flex items-start justify-between gap-4 rounded-[22px] border border-slate-200/80 bg-slate-50/70 p-4">
+                          <div className="space-y-1">
+                            <p className="text-sm font-semibold text-slate-900">
+                              启用记忆功能
+                            </p>
+                            <p className="text-sm leading-6 text-slate-500">
+                              控制是否允许系统继续提取并使用新的记忆。
+                            </p>
+                          </div>
+                          <Switch
+                            aria-label="启用记忆功能"
+                            checked={memoryConfig.enabled}
+                            onCheckedChange={(checked) =>
+                              void saveMemoryConfig("enabled", checked)
+                            }
+                            disabled={saving}
+                          />
+                        </div>
+
+                        <div className="flex items-start justify-between gap-4 rounded-[22px] border border-slate-200/80 bg-slate-50/70 p-4">
+                          <div className="space-y-1">
+                            <p className="text-sm font-semibold text-slate-900">
+                              自动清理过期记忆
+                            </p>
+                            <p className="text-sm leading-6 text-slate-500">
+                              定期移除超出保留时长的历史记忆，保持长期库干净。
+                            </p>
+                          </div>
+                          <Switch
+                            aria-label="自动清理过期记忆"
+                            checked={memoryConfig.auto_cleanup ?? true}
+                            onCheckedChange={(checked) =>
+                              void saveMemoryConfig("auto_cleanup", checked)
+                            }
+                            disabled={saving}
+                          />
+                        </div>
+
+                        <div className="rounded-[22px] border border-slate-200/80 bg-white/90 p-4 text-sm leading-6 text-slate-500">
+                          记忆关闭后会停止新增条目，但历史条目仍可浏览。删除操作是物理删除，不可恢复。
                         </div>
                       </div>
+                    </SurfacePanel>
 
-                      <div className="text-xs text-muted-foreground">
-                        当前筛选：
-                        {activeCategoryFilter === "all"
-                          ? "全部分类"
-                          : CATEGORY_META[activeCategoryFilter].label}
-                        ，共 {filteredEntries.length} 条结果
-                      </div>
-                    </div>
+                    <SurfacePanel
+                      icon={Database}
+                      title="容量与保留策略"
+                      description="控制长期记忆的规模和历史保留窗口，避免无限增长。"
+                      aside={
+                        <button
+                          type="button"
+                          onClick={() =>
+                            onNavigate?.("settings", { tab: SettingsTabs.Memory })
+                          }
+                          className={SECONDARY_BUTTON_CLASS_NAME}
+                        >
+                          <Settings2 className="h-4 w-4" />
+                          更多设置
+                        </button>
+                      }
+                    >
+                      <div className="space-y-5">
+                        <div className="rounded-[22px] border border-slate-200/80 bg-slate-50/70 p-4">
+                          <div className="mb-3 flex items-center justify-between gap-3">
+                            <div>
+                              <p className="text-sm font-semibold text-slate-900">
+                                最大记忆条数
+                              </p>
+                              <p className="text-sm leading-6 text-slate-500">
+                                超出上限后，系统会按策略处理旧条目。
+                              </p>
+                            </div>
+                            <span className="text-sm font-semibold text-slate-900">
+                              {memoryConfig.max_entries || 1000}
+                            </span>
+                          </div>
+                          <div className="grid grid-cols-5 gap-2">
+                            {maxEntriesOptions.map((option) => (
+                              <button
+                                key={option}
+                                type="button"
+                                onClick={() =>
+                                  void saveMemoryConfig("max_entries", option)
+                                }
+                                className={cn(
+                                  "rounded-full border px-3 py-2 text-xs font-medium transition",
+                                  memoryConfig.max_entries === option
+                                    ? "border-slate-900 bg-slate-900 text-white"
+                                    : "border-slate-200 bg-white text-slate-500 hover:border-slate-300 hover:text-slate-900",
+                                )}
+                                disabled={saving}
+                              >
+                                {option >= 1000 ? `${option / 1000}k` : option}
+                              </button>
+                            ))}
+                          </div>
+                        </div>
 
-                    <div className="grid grid-cols-1 xl:grid-cols-[minmax(0,1fr)_320px] gap-4">
-                      <MemoryEntryCollection
-                        entries={filteredEntries}
-                        viewMode={viewMode}
-                        selectedEntryId={selectedEntryId}
-                        onSelect={setSelectedEntryId}
-                      />
-                      <MemoryDetailPanel
-                        entry={selectedEntry}
-                        deleting={
-                          !!selectedEntry &&
-                          deletingEntryId === selectedEntry.id
-                        }
-                        onDelete={handleDeleteEntry}
-                      />
-                    </div>
-                  </>
-                )}
-
-                <div className="grid grid-cols-1 lg:grid-cols-2 gap-4">
-                  <div className="rounded-lg border p-4 space-y-4">
-                    <div className="flex items-center justify-between">
-                      <div className="flex items-center gap-2">
-                        <BrainCircuit className="h-4 w-4 text-muted-foreground" />
-                        <div>
-                          <h3 className="text-sm font-medium">启用记忆功能</h3>
-                          <p className="text-xs text-muted-foreground">
-                            控制是否允许系统提取并使用记忆
-                          </p>
+                        <div className="rounded-[22px] border border-slate-200/80 bg-slate-50/70 p-4">
+                          <div className="mb-3 flex items-center justify-between gap-3">
+                            <div>
+                              <p className="text-sm font-semibold text-slate-900">
+                                记忆保留天数
+                              </p>
+                              <p className="text-sm leading-6 text-slate-500">
+                                只保留最近一段时间内仍有价值的历史记忆。
+                              </p>
+                            </div>
+                            <span className="text-sm font-semibold text-slate-900">
+                              {memoryConfig.retention_days || 30} 天
+                            </span>
+                          </div>
+                          <div className="grid grid-cols-5 gap-2">
+                            {retentionDaysOptions.map((option) => (
+                              <button
+                                key={option}
+                                type="button"
+                                onClick={() =>
+                                  void saveMemoryConfig("retention_days", option)
+                                }
+                                className={cn(
+                                  "rounded-full border px-3 py-2 text-xs font-medium transition",
+                                  memoryConfig.retention_days === option
+                                    ? "border-slate-900 bg-slate-900 text-white"
+                                    : "border-slate-200 bg-white text-slate-500 hover:border-slate-300 hover:text-slate-900",
+                                )}
+                                disabled={saving}
+                              >
+                                {option} 天
+                              </button>
+                            ))}
+                          </div>
                         </div>
                       </div>
-                      <input
-                        type="checkbox"
-                        checked={memoryConfig.enabled}
-                        onChange={(event) =>
-                          saveMemoryConfig("enabled", event.target.checked)
-                        }
-                        disabled={saving}
-                        className="w-4 h-4 rounded border-gray-300"
-                      />
-                    </div>
-
-                    <div>
-                      <div className="flex items-center justify-between mb-2">
-                        <h4 className="text-sm font-medium">最大记忆条数</h4>
-                        <span className="text-sm text-primary font-medium">
-                          {memoryConfig.max_entries || 1000}
-                        </span>
-                      </div>
-                      <div className="grid grid-cols-5 gap-2">
-                        {maxEntriesOptions.map((option) => (
-                          <button
-                            key={option}
-                            onClick={() =>
-                              saveMemoryConfig("max_entries", option)
-                            }
-                            className={cn(
-                              "rounded border px-2 py-1.5 text-xs",
-                              memoryConfig.max_entries === option
-                                ? "bg-primary text-primary-foreground border-primary"
-                                : "hover:bg-muted",
-                            )}
-                            disabled={saving}
-                          >
-                            {option >= 1000 ? `${option / 1000}k` : option}
-                          </button>
-                        ))}
-                      </div>
-                    </div>
+                    </SurfacePanel>
                   </div>
 
-                  <div className="rounded-lg border p-4 space-y-4">
-                    <div>
-                      <div className="flex items-center justify-between mb-2">
-                        <h4 className="text-sm font-medium">记忆保留天数</h4>
-                        <span className="text-sm text-primary font-medium">
-                          {memoryConfig.retention_days || 30} 天
-                        </span>
-                      </div>
-                      <div className="grid grid-cols-5 gap-2">
-                        {retentionDaysOptions.map((option) => (
-                          <button
-                            key={option}
-                            onClick={() =>
-                              saveMemoryConfig("retention_days", option)
-                            }
-                            className={cn(
-                              "rounded border px-2 py-1.5 text-xs",
-                              memoryConfig.retention_days === option
-                                ? "bg-primary text-primary-foreground border-primary"
-                                : "hover:bg-muted",
-                            )}
-                            disabled={saving}
-                          >
-                            {option} 天
-                          </button>
-                        ))}
-                      </div>
-                    </div>
-
-                    <div className="flex items-center justify-between">
-                      <div>
-                        <h4 className="text-sm font-medium">
-                          自动清理过期记忆
-                        </h4>
-                        <p className="text-xs text-muted-foreground">
-                          定期移除超出保留时长的历史记忆
-                        </p>
-                      </div>
-                      <input
-                        type="checkbox"
-                        checked={memoryConfig.auto_cleanup ?? true}
-                        onChange={(event) =>
-                          saveMemoryConfig("auto_cleanup", event.target.checked)
-                        }
-                        disabled={saving}
-                        className="w-4 h-4 rounded border-gray-300"
-                      />
-                    </div>
+                  <div className="flex items-start gap-3 rounded-[22px] border border-slate-200/80 bg-white/90 p-4 text-sm leading-6 text-slate-500 shadow-sm shadow-slate-950/5">
+                    <Info className="mt-0.5 h-4 w-4 flex-shrink-0 text-sky-600" />
+                    <p>
+                      当前页面是记忆工作台，适合浏览、分析和做快速策略调整；更细的来源、画像和自动记忆配置仍然在“记忆设置”页维护。第三层项目记忆当前状态：
+                      {projectLayerCard
+                        ? ` ${projectLayerCard.value}${projectLayerCard.unit}，${projectLayerCard.description}`
+                        : " 暂未加载。"}
+                    </p>
                   </div>
-                </div>
-
-                <div className="flex items-start gap-2 rounded-lg bg-muted/30 p-3 text-xs text-muted-foreground">
-                  <Info className="h-3.5 w-3.5 mt-0.5 flex-shrink-0" />
-                  <p>
-                    记忆关闭后将停止新增条目；历史条目仍可浏览。删除操作为物理删除，不可恢复。
-                  </p>
-                </div>
-              </>
-            )}
-
-            {message && (
-              <div
-                className={cn(
-                  "flex items-center gap-2 rounded-lg p-3",
-                  message.type === "success"
-                    ? "bg-green-100 text-green-700 dark:bg-green-900/30 dark:text-green-400"
-                    : "bg-red-100 text-red-700 dark:bg-red-900/30 dark:text-red-400",
-                )}
-              >
-                {message.type === "success" ? (
-                  <CheckCircle2 className="h-4 w-4" />
-                ) : (
-                  <AlertCircle className="h-4 w-4" />
-                )}
-                <span className="text-sm">{message.text}</span>
-              </div>
-            )}
+                </>
+              )}
+            </div>
           </div>
         </main>
       </div>
diff --git a/src/components/memory/StyleLibraryPanel.tsx b/src/components/memory/StyleLibraryPanel.tsx
index 4ac722649..05f88afb4 100644
--- a/src/components/memory/StyleLibraryPanel.tsx
+++ b/src/components/memory/StyleLibraryPanel.tsx
@@ -64,6 +64,7 @@ import { cn } from "@/lib/utils";
 interface StyleLibraryPanelProps {
   projectId?: string | null;
   onOpenProjectStyleGuide?: () => void;
+  compactHeader?: boolean;
 }
 
 interface EntryEditorState {
@@ -158,20 +159,22 @@ function StyleAssetListItem({
       type="button"
       onClick={() => onSelect(entry.id)}
       className={cn(
-        "w-full rounded-xl border px-4 py-3 text-left transition-colors",
+        "w-full rounded-[20px] border px-4 py-3 text-left shadow-sm shadow-slate-950/5 transition",
         active
-          ? "border-primary bg-primary/5"
-          : "border-border hover:bg-muted/30",
+          ? "border-sky-300 bg-sky-50/90"
+          : "border-slate-200/80 bg-white hover:-translate-y-0.5 hover:border-slate-300 hover:bg-slate-50",
       )}
     >
       <div className="flex flex-wrap items-center gap-2">
-        <span className="text-sm font-medium">{entry.profile.name}</span>
+        <span className="text-sm font-medium text-slate-900">
+          {entry.profile.name}
+        </span>
         <Badge variant="outline">{entry.sourceLabel}</Badge>
       </div>
-      <p className="mt-2 line-clamp-2 text-xs leading-5 text-muted-foreground">
+      <p className="mt-2 line-clamp-2 text-xs leading-5 text-slate-500">
         {entry.profile.description || "暂无风格说明"}
       </p>
-      <div className="mt-3 flex flex-wrap gap-2 text-[11px] text-muted-foreground">
+      <div className="mt-3 flex flex-wrap gap-2 text-[11px] text-slate-500">
         <span>
           关键词：
           {entry.profile.toneKeywords.slice(0, 4).join(" / ") || "待补充"}
@@ -190,13 +193,13 @@ function EmptyWorkspaceState({
   onCreateManual: () => void;
 }) {
   return (
-    <div className="flex flex-col items-center justify-center gap-4 rounded-2xl border border-dashed px-6 py-12 text-center">
-      <div className="rounded-full bg-muted p-4 text-muted-foreground">
+    <div className="flex flex-col items-center justify-center gap-4 rounded-[24px] border border-dashed border-slate-300 bg-slate-50/60 px-6 py-12 text-center">
+      <div className="rounded-full bg-white p-4 text-slate-500 shadow-sm">
         <FileUp className="h-6 w-6" />
       </div>
       <div className="space-y-1">
-        <div className="text-sm font-medium">还没有风格资产</div>
-        <p className="text-sm text-muted-foreground">
+        <div className="text-sm font-medium text-slate-900">还没有风格资产</div>
+        <p className="text-sm text-slate-500">
           先上传样本或新建一套手动风格，再进入结构化编辑和项目应用流程。
         </p>
       </div>
@@ -217,6 +220,7 @@ function EmptyWorkspaceState({
 export function StyleLibraryPanel({
   projectId,
   onOpenProjectStyleGuide,
+  compactHeader = false,
 }: StyleLibraryPanelProps) {
   const fileInputRef = useRef<HTMLInputElement>(null);
   const { entries, enabled, activeEntryId } = useStyleLibrary();
@@ -314,6 +318,17 @@ export function StyleLibraryPanel({
       JSON.stringify(editor) !== JSON.stringify(buildEditorState(selectedEntry))
     );
   }, [editor, selectedEntry]);
+  const headerBadges = useMemo(
+    () =>
+      [
+        `${entries.length} 条资产`,
+        `当前条目：${selectedEntry?.profile.name || "未选择"}`,
+        projectId
+          ? `当前项目：${project?.name || "正在加载项目..."}`
+          : "当前项目：未选择",
+      ].filter(Boolean),
+    [entries.length, project?.name, projectId, selectedEntry?.profile.name],
+  );
 
   const toggleTheme = useCallback((theme: ThemeType) => {
     setEditor((previous) => ({
@@ -508,6 +523,51 @@ export function StyleLibraryPanel({
       setDeleting(false);
     }
   }, [selectedEntry]);
+  const headerActions = (
+    <div className="flex flex-wrap items-center gap-2">
+      <div
+        className={cn(
+          "flex items-center gap-3 rounded-2xl border px-4 py-2.5 shadow-sm shadow-slate-950/5",
+          compactHeader
+            ? "border-slate-200/80 bg-white/92"
+            : "border-slate-200/80 bg-white",
+        )}
+      >
+        <div className="min-w-0">
+          <div className="text-sm font-medium text-slate-900">启用我的风格</div>
+          <div className="text-xs text-slate-500">
+            决定风格资产是否出现在创作任务选择器中。
+          </div>
+        </div>
+        <Switch
+          checked={enabled}
+          onCheckedChange={setStyleLibraryEnabled}
+        />
+      </div>
+
+      <Button
+        onClick={() => fileInputRef.current?.click()}
+        disabled={uploading}
+      >
+        {uploading ? (
+          <>
+            <Loader2 className="mr-2 h-4 w-4 animate-spin" />
+            上传中...
+          </>
+        ) : (
+          <>
+            <Upload className="mr-2 h-4 w-4" />
+            上传样本
+          </>
+        )}
+      </Button>
+
+      <Button variant="outline" onClick={handleCreateManualStyle}>
+        <Plus className="mr-2 h-4 w-4" />
+        新建风格
+      </Button>
+    </div>
+  );
 
   return (
     <div className="space-y-6">
@@ -522,56 +582,46 @@ export function StyleLibraryPanel({
         }}
       />
 
-      <div className="flex flex-wrap items-start justify-between gap-4">
-        <div>
-          <div className="text-sm text-muted-foreground">风格库工作台</div>
-          <h2 className="mt-1 text-xl font-semibold">管理风格资产</h2>
-          <p className="mt-2 text-sm leading-6 text-muted-foreground">
-            左侧选择资产，中间做结构化编辑，右侧查看预览并应用到项目。
-          </p>
-        </div>
-
-        <div className="flex flex-wrap items-center gap-2">
-          <div className="flex items-center gap-3 rounded-xl border bg-card px-4 py-2.5">
-            <div className="min-w-0">
-              <div className="text-sm font-medium">启用我的风格</div>
-              <div className="text-xs text-muted-foreground">
-                决定风格资产是否出现在创作任务选择器中。
+      {compactHeader ? (
+        <div className="relative overflow-hidden rounded-[26px] border border-slate-200/80 bg-[linear-gradient(135deg,rgba(248,250,252,0.98)_0%,rgba(255,255,255,1)_55%,rgba(239,246,255,0.92)_100%)] p-5 shadow-sm shadow-slate-950/5">
+          <div className="pointer-events-none absolute right-[-56px] top-[-28px] h-36 w-36 rounded-full bg-sky-200/30 blur-3xl" />
+          <div className="relative flex flex-col gap-4 xl:flex-row xl:items-center xl:justify-between">
+            <div className="space-y-3">
+              <div className="flex flex-wrap gap-2">
+                {headerBadges.map((item) => (
+                  <span
+                    key={item}
+                    className="rounded-full border border-white/90 bg-white/85 px-3 py-1 text-xs font-medium text-slate-600 shadow-sm"
+                  >
+                    {item}
+                  </span>
+                ))}
               </div>
+              <p className="max-w-3xl text-sm leading-6 text-slate-600">
+                在这里完成资产整理、结构化编辑、Prompt 预览与项目默认风格应用。
+              </p>
             </div>
-            <Switch
-              checked={enabled}
-              onCheckedChange={setStyleLibraryEnabled}
-            />
+
+            {headerActions}
+          </div>
+        </div>
+      ) : (
+        <div className="flex flex-wrap items-start justify-between gap-4">
+          <div>
+            <div className="text-sm text-muted-foreground">风格库工作台</div>
+            <h2 className="mt-1 text-xl font-semibold">管理风格资产</h2>
+            <p className="mt-2 text-sm leading-6 text-muted-foreground">
+              左侧选择资产，中间做结构化编辑，右侧查看预览并应用到项目。
+            </p>
           </div>
 
-          <Button
-            onClick={() => fileInputRef.current?.click()}
-            disabled={uploading}
-          >
-            {uploading ? (
-              <>
-                <Loader2 className="mr-2 h-4 w-4 animate-spin" />
-                上传中...
-              </>
-            ) : (
-              <>
-                <Upload className="mr-2 h-4 w-4" />
-                上传样本
-              </>
-            )}
-          </Button>
-
-          <Button variant="outline" onClick={handleCreateManualStyle}>
-            <Plus className="mr-2 h-4 w-4" />
-            新建风格
-          </Button>
+          {headerActions}
         </div>
-      </div>
+      )}
 
       <div className="grid gap-6 xl:grid-cols-[320px_minmax(0,1fr)_360px]">
         <div className="space-y-4">
-          <Card className="border bg-card">
+          <Card className="rounded-[26px] border border-slate-200/80 bg-white shadow-sm shadow-slate-950/5">
             <CardHeader className="pb-3">
               <CardTitle className="text-base">资产列表</CardTitle>
               <CardDescription>
@@ -597,7 +647,7 @@ export function StyleLibraryPanel({
                   onCreateManual={handleCreateManualStyle}
                 />
               ) : filteredEntries.length === 0 ? (
-                <div className="rounded-xl border border-dashed px-4 py-8 text-center text-sm text-muted-foreground">
+                <div className="rounded-[20px] border border-dashed border-slate-300 px-4 py-8 text-center text-sm text-slate-500">
                   没有匹配的风格资产，试试换个关键词。
                 </div>
               ) : (
@@ -617,7 +667,7 @@ export function StyleLibraryPanel({
             </CardContent>
           </Card>
 
-          <Card className="border bg-card">
+          <Card className="rounded-[26px] border border-slate-200/80 bg-white shadow-sm shadow-slate-950/5">
             <CardHeader className="pb-3">
               <div className="flex items-center justify-between gap-3">
                 <div>
@@ -655,7 +705,7 @@ export function StyleLibraryPanel({
                     key={preset.id}
                     type="button"
                     onClick={() => handleAddPreset(preset.id)}
-                    className="rounded-xl border px-4 py-3 text-left transition-colors hover:bg-muted/40"
+                    className="rounded-[20px] border border-slate-200/80 px-4 py-3 text-left transition-colors hover:bg-slate-50"
                   >
                     <div className="flex items-center justify-between gap-2">
                       <div className="text-sm font-medium">{preset.name}</div>
@@ -671,7 +721,7 @@ export function StyleLibraryPanel({
           </Card>
         </div>
 
-        <Card className="border bg-card">
+        <Card className="rounded-[26px] border border-slate-200/80 bg-white shadow-sm shadow-slate-950/5">
           <CardHeader className="pb-3">
             <CardTitle className="text-base">结构化编辑</CardTitle>
             <CardDescription>
@@ -868,7 +918,7 @@ export function StyleLibraryPanel({
         </Card>
 
         <div className="space-y-4">
-          <Card className="border bg-card">
+          <Card className="rounded-[26px] border border-slate-200/80 bg-white shadow-sm shadow-slate-950/5">
             <CardHeader className="pb-3">
               <CardTitle className="flex items-center gap-2 text-base">
                 <Palette className="h-4 w-4" />
@@ -926,7 +976,7 @@ export function StyleLibraryPanel({
             </CardContent>
           </Card>
 
-          <Card className="border bg-card">
+          <Card className="rounded-[26px] border border-slate-200/80 bg-white shadow-sm shadow-slate-950/5">
             <CardHeader className="pb-3">
               <CardTitle className="text-base">风格摘要</CardTitle>
               <CardDescription>
@@ -981,7 +1031,7 @@ export function StyleLibraryPanel({
             </CardContent>
           </Card>
 
-          <Card className="border bg-card">
+          <Card className="rounded-[26px] border border-slate-200/80 bg-white shadow-sm shadow-slate-950/5">
             <CardHeader className="pb-3">
               <CardTitle className="text-base">Prompt 预览</CardTitle>
               <CardDescription>
@@ -1006,7 +1056,7 @@ export function StyleLibraryPanel({
           </Card>
 
           {selectedEntry ? (
-            <Card className="border border-red-200 bg-card dark:border-red-900/50">
+            <Card className="rounded-[26px] border border-red-200 bg-white shadow-sm shadow-slate-950/5 dark:border-red-900/50">
               <CardHeader className="pb-3">
                 <CardTitle className="text-base">条目管理</CardTitle>
                 <CardDescription>
diff --git a/src/components/openclaw/OpenClawConfigurePage.tsx b/src/components/openclaw/OpenClawConfigurePage.tsx
index 2a60a6370..d1a9eb29b 100644
--- a/src/components/openclaw/OpenClawConfigurePage.tsx
+++ b/src/components/openclaw/OpenClawConfigurePage.tsx
@@ -46,7 +46,7 @@ interface OpenClawConfigurePageProps {
   onSync: () => void;
   onStart: () => void;
   onOpenRuntime: () => void;
-  onGoProviderPool: () => void;
+  onGoProviderSettings: () => void;
 }
 
 export function OpenClawConfigurePage({
@@ -78,7 +78,7 @@ export function OpenClawConfigurePage({
   onSync,
   onStart,
   onOpenRuntime,
-  onGoProviderPool,
+  onGoProviderSettings,
 }: OpenClawConfigurePageProps) {
   const hasProviders = compatibleProviders.length > 0;
   const gatewayStatusLabel = gatewayRunning ? "运行中" : gatewayStatus;
@@ -184,10 +184,10 @@ export function OpenClawConfigurePage({
               <div className="mt-3">
                 <button
                   type="button"
-                  onClick={onGoProviderPool}
+                  onClick={onGoProviderSettings}
                   className="text-primary hover:underline"
                 >
-                  前往凭证池
+                  前往凭证管理
                 </button>
               </div>
             </div>
diff --git a/src/components/openclaw/OpenClawPage.tsx b/src/components/openclaw/OpenClawPage.tsx
index 991bce413..f55ffc49e 100644
--- a/src/components/openclaw/OpenClawPage.tsx
+++ b/src/components/openclaw/OpenClawPage.tsx
@@ -16,6 +16,7 @@ import type {
   Page,
   PageParams,
 } from "@/types/page";
+import { SettingsTabs } from "@/types/settings";
 import {
   openclawApi,
   type OpenClawBinaryAvailabilityStatus,
@@ -1419,7 +1420,9 @@ export function OpenClawPage({
         onSync={() => void handleSync()}
         onStart={() => void handleStart()}
         onOpenRuntime={() => navigateSubpage("runtime")}
-        onGoProviderPool={() => onNavigate?.("provider-pool")}
+        onGoProviderSettings={() =>
+          onNavigate?.("settings", { tab: SettingsTabs.Providers })
+        }
       />
     );
   }
diff --git a/src/components/projects/ContentEditorPage.test.tsx b/src/components/projects/ContentEditorPage.test.tsx
new file mode 100644
index 000000000..dbdef77e7
--- /dev/null
+++ b/src/components/projects/ContentEditorPage.test.tsx
@@ -0,0 +1,197 @@
+import { afterEach, beforeEach, describe, expect, it, vi } from "vitest";
+import {
+  cleanupMountedRoots,
+  clickButtonByText,
+  clickButtonByTitle,
+  flushEffects,
+  mountHarness,
+  setupReactActEnvironment,
+  type MountedRoot,
+} from "@/components/workspace/hooks/testUtils";
+import type { ContentListItem, Project } from "@/lib/api/project";
+import { ContentEditorPage } from "./ContentEditorPage";
+
+const { mockGetContent, mockUpdateContent } = vi.hoisted(() => ({
+  mockGetContent: vi.fn(),
+  mockUpdateContent: vi.fn(),
+}));
+
+const { mockSetContent, mockGetHtml } = vi.hoisted(() => ({
+  mockSetContent: vi.fn(),
+  mockGetHtml: vi.fn(() => "<p>hello</p>"),
+}));
+
+vi.mock("sonner", () => ({
+  toast: {
+    success: vi.fn(),
+    error: vi.fn(),
+  },
+}));
+
+vi.mock("@/lib/api/project", () => ({
+  getContent: mockGetContent,
+  updateContent: mockUpdateContent,
+  formatRelativeTime: vi.fn(() => "刚刚"),
+}));
+
+vi.mock("@tiptap/react", () => {
+  const chainResult = {
+    focus: () => chainResult,
+    undo: () => chainResult,
+    redo: () => chainResult,
+    toggleBold: () => chainResult,
+    toggleItalic: () => chainResult,
+    toggleStrike: () => chainResult,
+    toggleCode: () => chainResult,
+    toggleHeading: () => chainResult,
+    toggleBulletList: () => chainResult,
+    toggleOrderedList: () => chainResult,
+    toggleBlockquote: () => chainResult,
+    setHorizontalRule: () => chainResult,
+    run: () => true,
+  };
+
+  const editor = {
+    commands: {
+      setContent: mockSetContent,
+    },
+    storage: {
+      characterCount: {
+        characters: () => 1234,
+      },
+    },
+    getHTML: mockGetHtml,
+    chain: () => chainResult,
+    can: () => ({
+      undo: () => true,
+      redo: () => true,
+    }),
+    isActive: () => false,
+  };
+
+  return {
+    useEditor: vi.fn(() => editor),
+    EditorContent: () => <div>EDITOR_CONTENT_STUB</div>,
+  };
+});
+
+vi.mock("@tiptap/starter-kit", () => ({
+  default: {
+    configure: vi.fn(() => ({})),
+  },
+}));
+
+vi.mock("@tiptap/extension-placeholder", () => ({
+  default: {
+    configure: vi.fn(() => ({})),
+  },
+}));
+
+vi.mock("./MemorySidebar", () => ({
+  MemorySidebar: () => <aside>MEMORY_SIDEBAR_STUB</aside>,
+}));
+
+vi.mock("./memory/StyleGuidePanel", () => ({
+  StyleGuidePanel: () => <div>STYLE_GUIDE_PANEL_STUB</div>,
+}));
+
+setupReactActEnvironment();
+
+const mountedRoots: MountedRoot[] = [];
+
+const project: Project = {
+  id: "project-1",
+  name: "写作项目",
+  workspaceType: "document",
+  rootPath: "/tmp/project-1",
+  isDefault: false,
+  createdAt: 1,
+  updatedAt: 2,
+  icon: "📝",
+  isFavorite: false,
+  isArchived: false,
+  tags: [],
+};
+
+const content: ContentListItem = {
+  id: "content-1",
+  project_id: "project-1",
+  title: "测试稿件",
+  content_type: "document",
+  status: "draft",
+  order: 0,
+  word_count: 0,
+  created_at: 1,
+  updated_at: 2,
+};
+
+describe("ContentEditorPage", () => {
+  beforeEach(() => {
+    mockGetContent.mockResolvedValue({
+      id: "content-1",
+      project_id: "project-1",
+      title: "测试稿件",
+      body: "<p>hello</p>",
+      content_type: "document",
+      status: "draft",
+      order: 0,
+      word_count: 0,
+      metadata: {},
+      created_at: 1,
+      updated_at: 2,
+    });
+    mockUpdateContent.mockResolvedValue(undefined);
+  });
+
+  afterEach(() => {
+    cleanupMountedRoots(mountedRoots);
+    vi.clearAllMocks();
+  });
+
+  it("应渲染新的编辑工作台摘要头", async () => {
+    const { container } = mountHarness(
+      ContentEditorPage,
+      {
+        project,
+        content,
+        onBack: vi.fn(),
+      },
+      mountedRoots,
+    );
+
+    await flushEffects(2);
+
+    const text = container.textContent ?? "";
+    expect(text).toContain("返回内容列表");
+    expect(text).toContain("当前稿件");
+    expect(text).toContain("Draft");
+    expect(text).toContain("当前字数");
+    expect(text).toContain("EDITOR_CONTENT_STUB");
+  });
+
+  it("应支持切换右侧记忆侧栏并打开项目风格弹窗", async () => {
+    const { container } = mountHarness(
+      ContentEditorPage,
+      {
+        project,
+        content,
+        onBack: vi.fn(),
+      },
+      mountedRoots,
+    );
+
+    await flushEffects(2);
+
+    expect(container.textContent).toContain("MEMORY_SIDEBAR_STUB");
+
+    const toggleButton = clickButtonByTitle(container, "隐藏侧边栏");
+    expect(toggleButton).toBeDefined();
+    await flushEffects();
+    expect(container.textContent).not.toContain("MEMORY_SIDEBAR_STUB");
+
+    const styleButton = clickButtonByText(container, "项目风格");
+    expect(styleButton).toBeDefined();
+    await flushEffects();
+    expect(document.body.textContent ?? "").toContain("STYLE_GUIDE_PANEL_STUB");
+  });
+});
diff --git a/src/components/projects/ContentEditorPage.tsx b/src/components/projects/ContentEditorPage.tsx
index 9210bf0a7..244e4b8ce 100644
--- a/src/components/projects/ContentEditorPage.tsx
+++ b/src/components/projects/ContentEditorPage.tsx
@@ -16,10 +16,17 @@ import {
   PanelRight,
   Check,
   Palette,
+  FileText,
 } from "lucide-react";
+import { Badge } from "@/components/ui/badge";
 import { Button } from "@/components/ui/button";
 import { Input } from "@/components/ui/input";
-import { Dialog, DialogContent, DialogHeader, DialogTitle } from "@/components/ui/dialog";
+import {
+  Dialog,
+  DialogContent,
+  DialogHeader,
+  DialogTitle,
+} from "@/components/ui/dialog";
 import { cn } from "@/lib/utils";
 import {
   ContentListItem,
@@ -184,6 +191,35 @@ export function ContentEditorPage({
       onBack();
     }
   };
+  const wordCount = editor?.storage.characterCount?.characters?.() || 0;
+  const saveStateLabel =
+    saveStatus === "saving"
+      ? "保存中"
+      : saveStatus === "saved"
+        ? "已同步"
+        : "待保存";
+  const topBadges = [
+    project.name,
+    saveStateLabel,
+    showSidebar ? "记忆侧栏已打开" : "记忆侧栏已隐藏",
+  ];
+  const summaryCards = [
+    {
+      label: "当前字数",
+      value: String(wordCount),
+      description: "正文实时统计，便于控制章节体量",
+    },
+    {
+      label: "最后更新",
+      value: formatRelativeTime(contentDetail?.updated_at || 0),
+      description: "最近一次同步到项目内容的时间",
+    },
+    {
+      label: "侧栏状态",
+      value: showSidebar ? "已展开" : "已收起",
+      description: "角色、世界观与项目风格可在右侧快速查看",
+    },
+  ];
 
   if (loading) {
     return (
@@ -194,120 +230,184 @@ export function ContentEditorPage({
   }
 
   return (
-    <div className="flex flex-col h-full">
-      {/* 头部 */}
-      <div className="flex items-center gap-4 p-4 border-b">
-        <Button variant="ghost" size="icon" onClick={handleBack}>
-          <ArrowLeft className="h-5 w-5" />
-        </Button>
+    <div className="flex h-full flex-col overflow-hidden bg-[linear-gradient(180deg,rgba(248,250,252,0.96)_0%,rgba(255,255,255,0.98)_18%,rgba(241,245,249,0.95)_100%)]">
+      <div className="mx-auto flex w-full max-w-[1680px] flex-1 flex-col gap-5 px-4 pb-4 pt-4 lg:px-6">
+        <section className="relative overflow-hidden rounded-[30px] border border-slate-200/80 bg-[linear-gradient(135deg,rgba(247,250,252,0.98)_0%,rgba(255,255,255,0.98)_46%,rgba(240,249,255,0.95)_100%)] shadow-sm shadow-slate-950/5">
+          <div className="pointer-events-none absolute -left-16 top-[-54px] h-48 w-48 rounded-full bg-sky-200/25 blur-3xl" />
+          <div className="pointer-events-none absolute right-[-54px] top-[-22px] h-48 w-48 rounded-full bg-emerald-200/20 blur-3xl" />
+          <div className="relative flex flex-col gap-6 p-5 lg:p-6">
+            <div className="flex flex-col gap-6 xl:flex-row xl:items-start xl:justify-between">
+              <div className="max-w-4xl space-y-4">
+                <div className="flex flex-wrap items-center gap-2">
+                  <Button
+                    variant="outline"
+                    size="sm"
+                    onClick={handleBack}
+                    className="rounded-full border-white/90 bg-white/85 px-3 shadow-sm shadow-slate-950/5"
+                  >
+                    <ArrowLeft className="mr-2 h-4 w-4" />
+                    返回内容列表
+                  </Button>
+                  <Badge className="border-0 bg-slate-900/90 text-white hover:bg-slate-900/90">
+                    当前稿件
+                  </Badge>
+                  <Badge
+                    variant="outline"
+                    className="border-slate-200/80 bg-white/80 text-slate-600"
+                  >
+                    {content.content_type}
+                  </Badge>
+                </div>
 
-        {/* 标题输入 */}
-        <Input
-          value={title}
-          onChange={(e) => handleTitleChange(e.target.value)}
-          className="flex-1 text-lg font-medium border-none shadow-none focus-visible:ring-0"
-          placeholder="输入标题..."
-        />
+                <div className="space-y-3">
+                  <div className="flex items-center gap-3">
+                    <div className="flex h-12 w-12 items-center justify-center rounded-[18px] border border-white/90 bg-white/88 text-slate-700 shadow-sm shadow-slate-950/5">
+                      <FileText className="h-6 w-6" />
+                    </div>
+                    <div className="min-w-0 flex-1 rounded-[24px] border border-white/90 bg-white/88 px-4 py-3 shadow-sm shadow-slate-950/5">
+                      <div className="mb-1 text-xs font-medium uppercase tracking-[0.18em] text-slate-400">
+                        Draft
+                      </div>
+                      <Input
+                        value={title}
+                        onChange={(e) => handleTitleChange(e.target.value)}
+                        className="h-auto border-none bg-transparent px-0 text-2xl font-semibold tracking-tight text-slate-900 shadow-none focus-visible:ring-0"
+                        placeholder="输入标题..."
+                      />
+                    </div>
+                  </div>
+                  <p className="max-w-3xl text-sm leading-6 text-slate-600">
+                    在统一的编辑工作台里继续写作，并随时引用右侧记忆侧栏中的角色、世界观和项目默认风格。
+                  </p>
+                </div>
 
-        {/* 保存状态 */}
-        <div className="flex items-center gap-2 text-sm text-muted-foreground">
-          {saveStatus === "saving" && (
-            <>
-              <RefreshCw className="h-4 w-4 animate-spin" />
-              <span>保存中...</span>
-            </>
-          )}
-          {saveStatus === "saved" && (
-            <>
-              <Check className="h-4 w-4 text-green-500" />
-              <span>已保存</span>
-            </>
-          )}
-          {saveStatus === "unsaved" && <span>未保存</span>}
-        </div>
+                <div className="flex flex-wrap gap-2">
+                  {topBadges.map((item) => (
+                    <span
+                      key={item}
+                      className="rounded-full border border-white/90 bg-white/85 px-3 py-1 text-xs font-medium text-slate-600 shadow-sm"
+                    >
+                      {item}
+                    </span>
+                  ))}
+                </div>
+              </div>
 
-        {/* 操作按钮 */}
-        <Button
-          variant="outline"
-          size="sm"
-          onClick={() => setStyleGuideDialogOpen(true)}
-        >
-          <Palette className="h-4 w-4 mr-2" />
-          风格
-        </Button>
+              <div className="flex flex-col gap-4 xl:min-w-[440px] xl:items-end">
+                <div className="flex flex-wrap items-center gap-2 lg:justify-end">
+                  <div className="flex items-center gap-2 rounded-full border border-white/90 bg-white/85 px-3 py-2 text-sm text-slate-600 shadow-sm shadow-slate-950/5">
+                    {saveStatus === "saving" ? (
+                      <RefreshCw className="h-4 w-4 animate-spin" />
+                    ) : saveStatus === "saved" ? (
+                      <Check className="h-4 w-4 text-emerald-600" />
+                    ) : (
+                      <Save className="h-4 w-4 text-amber-600" />
+                    )}
+                    <span>{saveStateLabel}</span>
+                  </div>
+                  <Button
+                    variant="outline"
+                    size="sm"
+                    onClick={() => setStyleGuideDialogOpen(true)}
+                    className="border-white/90 bg-white/85 shadow-sm shadow-slate-950/5"
+                  >
+                    <Palette className="mr-2 h-4 w-4" />
+                    项目风格
+                  </Button>
+                  <Button
+                    variant="outline"
+                    size="sm"
+                    onClick={handleManualSave}
+                    disabled={saveStatus === "saving" || saveStatus === "saved"}
+                    className="border-white/90 bg-white/85 shadow-sm shadow-slate-950/5"
+                  >
+                    <Save className="mr-2 h-4 w-4" />
+                    保存稿件
+                  </Button>
+                  <Button
+                    variant="ghost"
+                    size="icon"
+                    onClick={() => setShowSidebar(!showSidebar)}
+                    title={showSidebar ? "隐藏侧边栏" : "显示侧边栏"}
+                    className="rounded-full border border-white/90 bg-white/80 text-slate-600 shadow-sm shadow-slate-950/5 hover:bg-white"
+                  >
+                    {showSidebar ? (
+                      <PanelRightClose className="h-5 w-5" />
+                    ) : (
+                      <PanelRight className="h-5 w-5" />
+                    )}
+                  </Button>
+                </div>
 
-        <Button
-          variant="outline"
-          size="sm"
-          onClick={handleManualSave}
-          disabled={saveStatus === "saving" || saveStatus === "saved"}
-        >
-          <Save className="h-4 w-4 mr-2" />
-          保存
-        </Button>
-
-        <Button
-          variant="ghost"
-          size="icon"
-          onClick={() => setShowSidebar(!showSidebar)}
-          title={showSidebar ? "隐藏侧边栏" : "显示侧边栏"}
-        >
-          {showSidebar ? (
-            <PanelRightClose className="h-5 w-5" />
-          ) : (
-            <PanelRight className="h-5 w-5" />
-          )}
-        </Button>
-      </div>
-
-      {/* 主体 */}
-      <div className="flex-1 flex overflow-hidden">
-        {/* 编辑器区域 */}
-        <div className="flex-1 flex flex-col overflow-hidden">
-          {/* 工具栏 */}
-          <EditorToolbar editor={editor} />
-
-          {/* 编辑器 */}
-          <div className="flex-1 overflow-auto">
-            <div
-              className={cn(
-                "max-w-4xl mx-auto p-6",
-                "[&_.is-editor-empty:first-child::before]:text-muted-foreground",
-                "[&_.is-editor-empty:first-child::before]:content-[attr(data-placeholder)]",
-                "[&_.is-editor-empty:first-child::before]:float-left",
-                "[&_.is-editor-empty:first-child::before]:h-0",
-                "[&_.is-editor-empty:first-child::before]:pointer-events-none",
-              )}
-            >
-              <EditorContent editor={editor} />
+                <div className="grid gap-3 sm:grid-cols-3 xl:w-full">
+                  {summaryCards.map((item) => (
+                    <div
+                      key={item.label}
+                      className="rounded-[22px] border border-white/90 bg-white/88 p-4 shadow-sm shadow-slate-950/5"
+                    >
+                      <div className="text-sm font-semibold text-slate-800">
+                        {item.label}
+                      </div>
+                      <div className="mt-1 text-xs leading-5 text-slate-500">
+                        {item.description}
+                      </div>
+                      <div className="mt-4 text-2xl font-semibold tracking-tight text-slate-900">
+                        {item.value}
+                      </div>
+                    </div>
+                  ))}
+                </div>
+              </div>
             </div>
           </div>
+        </section>
 
-          {/* 底部状态栏 */}
-          <div className="flex items-center justify-between px-4 py-2 border-t text-xs text-muted-foreground">
-            <span>
-              字数: {editor?.storage.characterCount?.characters?.() || 0}
-            </span>
-            <span>
-              最后更新: {formatRelativeTime(contentDetail?.updated_at || 0)}
-            </span>
+        <div className="flex min-h-0 flex-1 gap-4 overflow-hidden">
+          <div className="flex min-h-0 flex-1 flex-col overflow-hidden">
+            <section className="flex min-h-0 flex-1 flex-col overflow-hidden rounded-[32px] border border-slate-200/80 bg-[linear-gradient(180deg,rgba(248,250,252,0.94)_0%,rgba(255,255,255,0.98)_20%,rgba(248,250,252,0.96)_100%)] shadow-sm shadow-slate-950/5">
+              <EditorToolbar editor={editor} />
+
+              <div className="flex-1 overflow-auto px-4 pb-4 lg:px-5">
+                <div
+                  className={cn(
+                    "mx-auto max-w-5xl pt-4 xl:max-w-6xl",
+                    "[&_.is-editor-empty:first-child::before]:text-muted-foreground",
+                    "[&_.is-editor-empty:first-child::before]:content-[attr(data-placeholder)]",
+                    "[&_.is-editor-empty:first-child::before]:float-left",
+                    "[&_.is-editor-empty:first-child::before]:h-0",
+                    "[&_.is-editor-empty:first-child::before]:pointer-events-none",
+                  )}
+                >
+                  <div className="min-h-[calc(100vh-360px)] rounded-[30px] border border-white/90 bg-white px-6 py-7 shadow-sm shadow-slate-950/5 lg:px-10 lg:py-10">
+                    <EditorContent editor={editor} />
+                  </div>
+                </div>
+              </div>
+
+              <div className="flex items-center justify-between border-t border-slate-200/80 px-5 py-3 text-xs text-slate-500">
+                <span>字数: {wordCount}</span>
+                <span>最后更新: {formatRelativeTime(contentDetail?.updated_at || 0)}</span>
+              </div>
+            </section>
           </div>
-        </div>
 
-        {/* 记忆侧边栏 */}
-        {showSidebar && (
-          <MemorySidebar projectId={project.id} className="w-72" />
-        )}
+          {showSidebar && (
+            <MemorySidebar
+              projectId={project.id}
+              className="w-[320px] xl:w-[360px]"
+            />
+          )}
+        </div>
       </div>
       <Dialog open={styleGuideDialogOpen} onOpenChange={setStyleGuideDialogOpen}>
-        <DialogContent className="max-w-6xl max-h-[90vh] overflow-y-auto p-0">
-          <DialogHeader className="border-b px-6 py-4">
+        <DialogContent className="max-h-[92vh] max-w-7xl overflow-y-auto border-slate-200/80 bg-[linear-gradient(180deg,rgba(248,250,252,0.96)_0%,rgba(255,255,255,1)_36%,rgba(241,245,249,0.95)_100%)] p-4 lg:p-5">
+          <DialogHeader className="sr-only">
             <DialogTitle className="flex items-center gap-2">
               <Palette className="h-4 w-4" />
               项目默认风格
             </DialogTitle>
           </DialogHeader>
-          <div className="p-6">
+          <div className="relative">
             <StyleGuidePanel projectId={project.id} />
           </div>
         </DialogContent>
diff --git a/src/components/projects/ContentListPage.test.tsx b/src/components/projects/ContentListPage.test.tsx
new file mode 100644
index 000000000..d471c4fdf
--- /dev/null
+++ b/src/components/projects/ContentListPage.test.tsx
@@ -0,0 +1,154 @@
+import { afterEach, beforeEach, describe, expect, it, vi } from "vitest";
+import {
+  clickButtonByText,
+  cleanupMountedRoots,
+  flushEffects,
+  mountHarness,
+  setupReactActEnvironment,
+  type MountedRoot,
+} from "@/components/workspace/hooks/testUtils";
+import type { Project } from "@/lib/api/project";
+import { ContentListPage } from "./ContentListPage";
+
+const {
+  mockListContents,
+  mockCreateContent,
+  mockUpdateContent,
+  mockDeleteContent,
+  mockGetContentStats,
+} = vi.hoisted(() => ({
+  mockListContents: vi.fn(),
+  mockCreateContent: vi.fn(),
+  mockUpdateContent: vi.fn(),
+  mockDeleteContent: vi.fn(),
+  mockGetContentStats: vi.fn(),
+}));
+
+vi.mock("sonner", () => ({
+  toast: {
+    success: vi.fn(),
+    error: vi.fn(),
+  },
+}));
+
+vi.mock("./memory", () => ({
+  CharacterPanel: () => <div>CHARACTER_PANEL_STUB</div>,
+  WorldBuildingPanel: () => <div>WORLD_PANEL_STUB</div>,
+  StyleGuidePanel: () => <div>STYLE_GUIDE_STUB</div>,
+  OutlinePanel: () => <div>OUTLINE_PANEL_STUB</div>,
+}));
+
+vi.mock("@/lib/api/project", () => ({
+  listContents: mockListContents,
+  createContent: mockCreateContent,
+  updateContent: mockUpdateContent,
+  deleteContent: mockDeleteContent,
+  getContentStats: mockGetContentStats,
+  getProjectTypeLabel: vi.fn(() => "通用项目"),
+  getContentTypeLabel: vi.fn(() => "文稿"),
+  getContentStatusLabel: vi.fn((status: string) =>
+    status === "completed" ? "已完成" : "草稿",
+  ),
+  getDefaultContentTypeForProject: vi.fn(() => "post"),
+  formatWordCount: vi.fn((count: number) => `${count} 字`),
+  formatRelativeTime: vi.fn(() => "刚刚"),
+}));
+
+setupReactActEnvironment();
+
+const mountedRoots: MountedRoot[] = [];
+
+const project: Project = {
+  id: "project-1",
+  name: "我的项目",
+  workspaceType: "general",
+  rootPath: "/tmp/project-1",
+  isDefault: false,
+  createdAt: 1,
+  updatedAt: 2,
+  icon: "🪄",
+  isFavorite: false,
+  isArchived: false,
+  tags: [],
+};
+
+describe("ContentListPage", () => {
+  beforeEach(() => {
+    mockListContents.mockResolvedValue([
+      {
+        id: "content-1",
+        project_id: "project-1",
+        title: "第一篇内容",
+        content_type: "post",
+        status: "draft",
+        order: 0,
+        word_count: 1200,
+        created_at: 1,
+        updated_at: 2,
+      },
+    ]);
+    mockGetContentStats.mockResolvedValue([1, 1200, 0]);
+    mockCreateContent.mockResolvedValue({
+      id: "content-2",
+      project_id: "project-1",
+      title: "新文稿",
+      content_type: "post",
+      status: "draft",
+      order: 1,
+      word_count: 0,
+      created_at: 3,
+      updated_at: 3,
+    });
+    mockUpdateContent.mockResolvedValue(undefined);
+    mockDeleteContent.mockResolvedValue(undefined);
+  });
+
+  afterEach(() => {
+    cleanupMountedRoots(mountedRoots);
+    vi.clearAllMocks();
+  });
+
+  it("默认展示新的宽版项目工作台摘要", async () => {
+    const { container } = mountHarness(
+      ContentListPage,
+      {
+        project,
+        onBack: vi.fn(),
+        onSelectContent: vi.fn(),
+      },
+      mountedRoots,
+    );
+
+    await flushEffects();
+
+    const text = container.textContent ?? "";
+    expect(text).toContain("返回项目列表");
+    expect(text).toContain("当前工作区：内容");
+    expect(text).toContain("内容总数");
+    expect(text).toContain("创作进度");
+    expect(text).toContain("新建文稿");
+  });
+
+  it("切换到风格标签时展示风格工作台宿主", async () => {
+    const { container } = mountHarness(
+      ContentListPage,
+      {
+        project,
+        onBack: vi.fn(),
+        onSelectContent: vi.fn(),
+      },
+      mountedRoots,
+    );
+
+    await flushEffects();
+
+    const styleTab = clickButtonByText(container, "风格");
+    expect(styleTab).toBeDefined();
+
+    await flushEffects();
+
+    const text = container.textContent ?? "";
+    expect(text).toContain("当前工作区：风格");
+    expect(text).toContain("STYLE_GUIDE_STUB");
+  });
+});
diff --git a/src/components/projects/ContentListPage.tsx b/src/components/projects/ContentListPage.tsx
index 694df0c34..6763d8650 100644
--- a/src/components/projects/ContentListPage.tsx
+++ b/src/components/projects/ContentListPage.tsx
@@ -19,7 +19,6 @@ import {
   Users,
   Globe,
   FileEdit,
-  Settings,
   Palette,
   Film,
   MapPin,
@@ -29,6 +28,7 @@ import {
   Copy,
   LucideIcon,
 } from "lucide-react";
+import { Badge } from "@/components/ui/badge";
 import { Input } from "@/components/ui/input";
 import { Button } from "@/components/ui/button";
 import { Progress } from "@/components/ui/progress";
@@ -272,6 +272,28 @@ export function ContentListPage({
       ? (stats.completed / stats.count) * 100
       : 0
     : 0;
+  const projectTabs =
+    PROJECT_TAB_CONFIG[project.workspaceType] || PROJECT_TAB_CONFIG.general;
+  const currentTabMeta = projectTabs.find((tab) => tab.value === currentTab);
+  const defaultContentType = getDefaultContentTypeForProject(project.workspaceType);
+  const summaryCards = [
+    {
+      label: "内容总数",
+      value: String(stats?.count || 0),
+      description: `当前项目包含的${getContentTypeLabel(defaultContentType)}数量`,
+    },
+    {
+      label: "已完成",
+      value: String(stats?.completed || 0),
+      description:
+        (stats?.completed || 0) > 0 ? "已有内容进入完成状态" : "还没有完成的内容条目",
+    },
+    {
+      label: "总字数",
+      value: formatWordCount(stats?.words || 0),
+      description: "聚合所有内容条目的正文统计",
+    },
+  ];
 
   // 获取状态图标
   const getStatusIcon = (status: string) => {
@@ -286,271 +308,344 @@ export function ContentListPage({
   };
 
   return (
-    <div className="flex flex-col h-full">
-      {/* 头部 */}
-      <div className="flex items-center gap-4 mb-4">
-        <Button variant="ghost" size="icon" onClick={onBack}>
-          <ArrowLeft className="h-5 w-5" />
-        </Button>
-        <div className="flex-1">
-          <h1 className="text-xl font-bold flex items-center gap-2">
-            <span>{project.icon || "📁"}</span>
-            <span>{project.name}</span>
-          </h1>
-          <p className="text-sm text-muted-foreground">
-            {getProjectTypeLabel(project.workspaceType)}
-          </p>
-        </div>
-        <Button variant="outline" size="sm">
-          <Settings className="h-4 w-4 mr-2" />
-          设置
-        </Button>
-      </div>
-
-      {/* 项目信息卡片 */}
-      <div className="bg-card rounded-lg border p-4 mb-4">
-        <div className="flex items-center justify-between mb-2">
-          <span className="text-sm text-muted-foreground">
-            进度: {stats?.completed || 0}/{stats?.count || 0} (
-            {progress.toFixed(0)}%)
-          </span>
-          <span className="text-sm text-muted-foreground">
-            总字数: {formatWordCount(stats?.words || 0)}
-          </span>
-        </div>
-        <Progress value={progress} className="h-2" />
-      </div>
-
-      {/* 标签页 */}
-      <Tabs
-        value={currentTab}
-        onValueChange={(v) => setCurrentTab(v as ContentTab)}
-        className="mb-4"
-      >
-        <TabsList>
-          {(
-            PROJECT_TAB_CONFIG[project.workspaceType] ||
-            PROJECT_TAB_CONFIG.general
-          ).map((tab) => (
-            <TabsTrigger key={tab.value} value={tab.value} className="gap-2">
-              <tab.icon className="h-4 w-4" />
-              {tab.label}
-            </TabsTrigger>
-          ))}
-        </TabsList>
-      </Tabs>
-
-      {/* 内容列表区域 */}
-      {currentTab === "contents" && (
-        <>
-          {/* 工具栏 */}
-          <div className="flex items-center gap-4 mb-4">
-            <div className="flex items-center gap-2">
-              {(["all", "completed", "draft"] as ContentFilter[]).map(
-                (filter) => (
+    <div className="h-full overflow-auto bg-[linear-gradient(180deg,rgba(248,250,252,0.96)_0%,rgba(255,255,255,1)_22%,rgba(241,245,249,0.94)_100%)]">
+      <div className="mx-auto flex w-full max-w-7xl flex-col gap-5 px-4 pb-6 pt-4 lg:px-6">
+        <section className="relative overflow-hidden rounded-[30px] border border-slate-200/80 bg-[linear-gradient(135deg,rgba(247,250,252,0.98)_0%,rgba(255,255,255,0.98)_48%,rgba(240,249,255,0.96)_100%)] shadow-sm shadow-slate-950/5">
+          <div className="pointer-events-none absolute -left-14 top-[-42px] h-44 w-44 rounded-full bg-sky-200/30 blur-3xl" />
+          <div className="pointer-events-none absolute right-[-58px] top-[-26px] h-48 w-48 rounded-full bg-emerald-200/25 blur-3xl" />
+          <div className="relative flex flex-col gap-6 p-5 lg:p-6">
+            <div className="flex flex-col gap-6 xl:flex-row xl:items-start xl:justify-between">
+              <div className="max-w-3xl space-y-4">
+                <div className="flex flex-wrap items-center gap-2">
                   <Button
-                    key={filter}
-                    variant={currentFilter === filter ? "secondary" : "ghost"}
+                    variant="outline"
                     size="sm"
-                    onClick={() => setCurrentFilter(filter)}
+                    onClick={onBack}
+                    className="rounded-full border-white/90 bg-white/85 px-3 shadow-sm shadow-slate-950/5"
                   >
-                    {filter === "all"
-                      ? "全部"
-                      : filter === "completed"
-                        ? "已完成"
-                        : "草稿"}
+                    <ArrowLeft className="mr-2 h-4 w-4" />
+                    返回项目列表
                   </Button>
-                ),
-              )}
-            </div>
-            <div className="flex-1" />
-            <div className="relative w-64">
-              <Search className="absolute left-3 top-1/2 -translate-y-1/2 h-4 w-4 text-muted-foreground" />
-              <Input
-                placeholder="搜索..."
-                value={searchQuery}
-                onChange={(e) => setSearchQuery(e.target.value)}
-                className="pl-9 h-9"
-              />
-            </div>
-            <Button onClick={handleCreateContent}>
-              <Plus className="h-4 w-4 mr-2" />
-              新建
-            </Button>
-          </div>
+                  <Badge className="border-0 bg-slate-900/90 text-white hover:bg-slate-900/90">
+                    {getProjectTypeLabel(project.workspaceType)}
+                  </Badge>
+                  <Badge
+                    variant="outline"
+                    className="border-slate-200/80 bg-white/80 text-slate-600"
+                  >
+                    当前工作区：{currentTabMeta?.label || "内容"}
+                  </Badge>
+                </div>
 
-          {/* 内容表格 */}
-          <div className="flex-1 overflow-auto border rounded-lg">
-            {loading ? (
-              <div className="flex items-center justify-center h-40">
-                <RefreshCw className="h-6 w-6 animate-spin text-muted-foreground" />
+                <div className="space-y-3">
+                  <div className="flex items-center gap-3">
+                    <div className="flex h-12 w-12 items-center justify-center rounded-[18px] border border-white/90 bg-white/88 text-2xl shadow-sm shadow-slate-950/5">
+                      {project.icon || "📁"}
+                    </div>
+                    <h1 className="text-3xl font-semibold tracking-tight text-slate-900">
+                      {project.name}
+                    </h1>
+                  </div>
+                  <p className="max-w-2xl text-sm leading-6 text-slate-600">
+                    在一个更宽的工作台里统一管理内容、项目记忆与默认风格；风格设置会直接作为当前项目的表达基线。
+                  </p>
+                </div>
               </div>
-            ) : filteredContents.length === 0 ? (
-              <div className="flex flex-col items-center justify-center h-40 text-muted-foreground">
-                <p className="mb-4">还没有内容</p>
-                <Button onClick={handleCreateContent}>创建第一个内容</Button>
-              </div>
-            ) : (
-              <Table>
-                <TableHeader>
-                  <TableRow>
-                    <TableHead className="w-12">#</TableHead>
-                    <TableHead>标题</TableHead>
-                    <TableHead className="w-24">状态</TableHead>
-                    <TableHead className="w-24">字数</TableHead>
-                    <TableHead className="w-32">更新时间</TableHead>
-                    <TableHead className="w-20">操作</TableHead>
-                  </TableRow>
-                </TableHeader>
-                <TableBody>
-                  {filteredContents.map((content) => (
-                    <TableRow
-                      key={content.id}
-                      className="cursor-pointer hover:bg-accent/50"
-                      onClick={() => onSelectContent?.(content)}
+
+              <div className="flex flex-col gap-4 xl:min-w-[420px] xl:items-end">
+                <Button
+                  onClick={handleCreateContent}
+                  className="self-start xl:self-auto"
+                >
+                  <Plus className="mr-2 h-4 w-4" />
+                  新建{getContentTypeLabel(defaultContentType)}
+                </Button>
+                <div className="grid gap-3 sm:grid-cols-3 xl:w-full">
+                  {summaryCards.map((item) => (
+                    <div
+                      key={item.label}
+                      className="rounded-[22px] border border-white/90 bg-white/88 p-4 shadow-sm shadow-slate-950/5"
                     >
-                      <TableCell className="font-mono text-muted-foreground">
-                        {content.order + 1}
-                      </TableCell>
-                      <TableCell className="font-medium">
-                        {content.title}
-                      </TableCell>
-                      <TableCell>
-                        <div className="flex items-center gap-2">
-                          {getStatusIcon(content.status)}
-                          <span className="text-sm">
-                            {getContentStatusLabel(
-                              content.status as ContentStatus,
-                            )}
-                          </span>
-                        </div>
-                      </TableCell>
-                      <TableCell className="text-muted-foreground">
-                        {formatWordCount(content.word_count)}
-                      </TableCell>
-                      <TableCell className="text-muted-foreground text-sm">
-                        {formatRelativeTime(content.updated_at)}
-                      </TableCell>
-                      <TableCell>
-                        <DropdownMenu>
-                          <DropdownMenuTrigger asChild>
-                            <Button
-                              variant="ghost"
-                              size="icon"
-                              className="h-8 w-8"
-                              onClick={(e) => e.stopPropagation()}
-                            >
-                              <MoreHorizontal className="h-4 w-4" />
-                            </Button>
-                          </DropdownMenuTrigger>
-                          <DropdownMenuContent align="end">
-                            <DropdownMenuItem
-                              onClick={() => {
-                                onSelectContent?.(content);
-                              }}
-                            >
-                              <Edit2 className="h-4 w-4 mr-2" />
-                              编辑
-                            </DropdownMenuItem>
-                            {content.status !== "completed" && (
-                              <DropdownMenuItem
-                                onClick={() => {
-                                  handleUpdateStatus(content, "completed");
-                                }}
-                              >
-                                <CheckCircle2 className="h-4 w-4 mr-2" />
-                                标记完成
-                              </DropdownMenuItem>
-                            )}
-                            <DropdownMenuSeparator />
-                            <DropdownMenuItem
-                              onClick={() => {
-                                handleDeleteContent(content);
-                              }}
-                              className="text-destructive focus:text-destructive"
-                            >
-                              <Trash2 className="h-4 w-4 mr-2" />
-                              删除
-                            </DropdownMenuItem>
-                          </DropdownMenuContent>
-                        </DropdownMenu>
-                      </TableCell>
-                    </TableRow>
+                      <div className="text-sm font-semibold text-slate-800">
+                        {item.label}
+                      </div>
+                      <div className="mt-1 text-xs leading-5 text-slate-500">
+                        {item.description}
+                      </div>
+                      <div className="mt-4 text-3xl font-semibold tracking-tight text-slate-900">
+                        {item.value}
+                      </div>
+                    </div>
                   ))}
-                </TableBody>
-              </Table>
-            )}
+                </div>
+              </div>
+            </div>
+
+            <div className="rounded-[24px] border border-white/90 bg-white/84 p-4 shadow-sm shadow-slate-950/5">
+              <div className="flex flex-col gap-3 lg:flex-row lg:items-center lg:justify-between">
+                <div>
+                  <div className="text-sm font-semibold text-slate-900">
+                    创作进度
+                  </div>
+                  <div className="text-xs leading-5 text-slate-500">
+                    已完成 {stats?.completed || 0} / {stats?.count || 0}，当前完成度{" "}
+                    {progress.toFixed(0)}%。
+                  </div>
+                </div>
+                <div className="text-sm text-slate-600">
+                  总字数 {formatWordCount(stats?.words || 0)}
+                </div>
+              </div>
+              <Progress value={progress} className="mt-3 h-2.5" />
+            </div>
           </div>
-        </>
-      )}
+        </section>
 
-      {/* 角色标签页 */}
-      {currentTab === "characters" && (
-        <div className="flex-1 overflow-hidden">
-          <CharacterPanel projectId={project.id} />
-        </div>
-      )}
-
-      {/* 世界观标签页 */}
-      {currentTab === "world" && (
-        <div className="flex-1 overflow-hidden">
-          <WorldBuildingPanel projectId={project.id} />
-        </div>
-      )}
-
-      {/* 风格指南标签页 */}
-      {currentTab === "style" && (
-        <div className="flex-1 overflow-hidden">
-          <StyleGuidePanel projectId={project.id} />
-        </div>
-      )}
-
-      {/* 大纲标签页 */}
-      {currentTab === "outline" && (
-        <div className="flex-1 overflow-hidden">
-          <OutlinePanel projectId={project.id} />
-        </div>
-      )}
-
-      {/* 场景标签页（短剧） */}
-      {currentTab === "scenes" && (
-        <div className="flex-1 overflow-hidden flex items-center justify-center text-muted-foreground">
-          <div className="text-center">
-            <MapPin className="h-12 w-12 mx-auto mb-4 opacity-50" />
-            <p>场景管理功能开发中...</p>
+        <Tabs
+          value={currentTab}
+          onValueChange={(v) => setCurrentTab(v as ContentTab)}
+          className="space-y-5"
+        >
+          <div className="rounded-[26px] border border-slate-200/80 bg-white/90 p-2 shadow-sm shadow-slate-950/5">
+            <TabsList className="flex h-auto w-full flex-wrap justify-start gap-2 bg-transparent p-0">
+              {projectTabs.map((tab) => (
+                <TabsTrigger
+                  key={tab.value}
+                  value={tab.value}
+                  className="gap-2 rounded-[18px] px-4 py-2.5 text-slate-600 data-[state=active]:bg-slate-900 data-[state=active]:text-white data-[state=active]:shadow-sm"
+                >
+                  <tab.icon className="h-4 w-4" />
+                  {tab.label}
+                </TabsTrigger>
+              ))}
+            </TabsList>
           </div>
-        </div>
-      )}
 
-      {/* 分镜标签页（短剧） */}
-      {currentTab === "storyboard" && (
-        <div className="flex-1 overflow-hidden flex items-center justify-center text-muted-foreground">
-          <div className="text-center">
-            <LayoutGrid className="h-12 w-12 mx-auto mb-4 opacity-50" />
-            <p>分镜管理功能开发中...</p>
-          </div>
-        </div>
-      )}
+          {currentTab === "contents" && (
+            <>
+              <div className="rounded-[26px] border border-slate-200/80 bg-white/90 p-4 shadow-sm shadow-slate-950/5">
+                <div className="flex flex-col gap-4 lg:flex-row lg:items-center">
+                  <div className="flex flex-wrap items-center gap-2">
+                    {(["all", "completed", "draft"] as ContentFilter[]).map(
+                      (filter) => (
+                        <Button
+                          key={filter}
+                          variant={
+                            currentFilter === filter ? "default" : "outline"
+                          }
+                          size="sm"
+                          onClick={() => setCurrentFilter(filter)}
+                          className={
+                            currentFilter === filter
+                              ? "bg-slate-900 text-white hover:bg-slate-800"
+                              : "border-slate-200/80 bg-white text-slate-600 hover:bg-slate-50"
+                          }
+                        >
+                          {filter === "all"
+                            ? "全部"
+                            : filter === "completed"
+                              ? "已完成"
+                              : "草稿"}
+                        </Button>
+                      ),
+                    )}
+                  </div>
+                  <div className="flex-1" />
+                  <div className="relative w-full lg:w-72">
+                    <Search className="absolute left-3 top-1/2 h-4 w-4 -translate-y-1/2 text-slate-400" />
+                    <Input
+                      placeholder="搜索标题或条目"
+                      value={searchQuery}
+                      onChange={(e) => setSearchQuery(e.target.value)}
+                      className="h-10 border-slate-200/80 bg-slate-50/70 pl-9"
+                    />
+                  </div>
+                </div>
+              </div>
 
-      {/* 素材标签页（社媒） */}
-      {currentTab === "assets" && (
-        <div className="flex-1 overflow-hidden flex items-center justify-center text-muted-foreground">
-          <div className="text-center">
-            <Image className="h-12 w-12 mx-auto mb-4 opacity-50" />
-            <p>素材管理功能开发中...</p>
-          </div>
-        </div>
-      )}
+              <div className="overflow-hidden rounded-[28px] border border-slate-200/80 bg-white/92 shadow-sm shadow-slate-950/5">
+                {loading ? (
+                  <div className="flex h-48 items-center justify-center">
+                    <RefreshCw className="h-6 w-6 animate-spin text-slate-400" />
+                  </div>
+                ) : filteredContents.length === 0 ? (
+                  <div className="flex h-56 flex-col items-center justify-center gap-4 text-center text-slate-500">
+                    <div className="flex h-14 w-14 items-center justify-center rounded-full bg-slate-100 text-slate-400">
+                      <FileText className="h-6 w-6" />
+                    </div>
+                    <div className="space-y-1">
+                      <p className="text-sm font-medium text-slate-700">
+                        还没有内容
+                      </p>
+                      <p className="text-sm">
+                        先创建第一条内容，再继续补充项目记忆与默认风格。
+                      </p>
+                    </div>
+                    <Button onClick={handleCreateContent}>
+                      创建第一个内容
+                    </Button>
+                  </div>
+                ) : (
+                  <div className="overflow-auto">
+                    <Table>
+                      <TableHeader>
+                        <TableRow className="border-slate-200/80">
+                          <TableHead className="w-12">#</TableHead>
+                          <TableHead>标题</TableHead>
+                          <TableHead className="w-24">状态</TableHead>
+                          <TableHead className="w-24">字数</TableHead>
+                          <TableHead className="w-32">更新时间</TableHead>
+                          <TableHead className="w-20">操作</TableHead>
+                        </TableRow>
+                      </TableHeader>
+                      <TableBody>
+                        {filteredContents.map((content) => (
+                          <TableRow
+                            key={content.id}
+                            className="cursor-pointer border-slate-200/70 hover:bg-slate-50/80"
+                            onClick={() => onSelectContent?.(content)}
+                          >
+                            <TableCell className="font-mono text-muted-foreground">
+                              {content.order + 1}
+                            </TableCell>
+                            <TableCell className="font-medium text-slate-900">
+                              {content.title}
+                            </TableCell>
+                            <TableCell>
+                              <div className="flex items-center gap-2">
+                                {getStatusIcon(content.status)}
+                                <span className="text-sm">
+                                  {getContentStatusLabel(
+                                    content.status as ContentStatus,
+                                  )}
+                                </span>
+                              </div>
+                            </TableCell>
+                            <TableCell className="text-muted-foreground">
+                              {formatWordCount(content.word_count)}
+                            </TableCell>
+                            <TableCell className="text-muted-foreground text-sm">
+                              {formatRelativeTime(content.updated_at)}
+                            </TableCell>
+                            <TableCell>
+                              <DropdownMenu>
+                                <DropdownMenuTrigger asChild>
+                                  <Button
+                                    variant="ghost"
+                                    size="icon"
+                                    className="h-8 w-8"
+                                    onClick={(e) => e.stopPropagation()}
+                                  >
+                                    <MoreHorizontal className="h-4 w-4" />
+                                  </Button>
+                                </DropdownMenuTrigger>
+                                <DropdownMenuContent align="end">
+                                  <DropdownMenuItem
+                                    onClick={() => {
+                                      onSelectContent?.(content);
+                                    }}
+                                  >
+                                    <Edit2 className="mr-2 h-4 w-4" />
+                                    编辑
+                                  </DropdownMenuItem>
+                                  {content.status !== "completed" && (
+                                    <DropdownMenuItem
+                                      onClick={() => {
+                                        handleUpdateStatus(content, "completed");
+                                      }}
+                                    >
+                                      <CheckCircle2 className="mr-2 h-4 w-4" />
+                                      标记完成
+                                    </DropdownMenuItem>
+                                  )}
+                                  <DropdownMenuSeparator />
+                                  <DropdownMenuItem
+                                    onClick={() => {
+                                      handleDeleteContent(content);
+                                    }}
+                                    className="text-destructive focus:text-destructive"
+                                  >
+                                    <Trash2 className="mr-2 h-4 w-4" />
+                                    删除
+                                  </DropdownMenuItem>
+                                </DropdownMenuContent>
+                              </DropdownMenu>
+                            </TableCell>
+                          </TableRow>
+                        ))}
+                      </TableBody>
+                    </Table>
+                  </div>
+                )}
+              </div>
+            </>
+          )}
 
-      {/* 模板标签页（文档） */}
-      {currentTab === "templates" && (
-        <div className="flex-1 overflow-hidden flex items-center justify-center text-muted-foreground">
-          <div className="text-center">
-            <Copy className="h-12 w-12 mx-auto mb-4 opacity-50" />
-            <p>模板管理功能开发中...</p>
-          </div>
-        </div>
-      )}
+          {currentTab === "characters" && (
+            <div className="overflow-hidden rounded-[28px] border border-slate-200/80 bg-white/92 shadow-sm shadow-slate-950/5">
+              <CharacterPanel projectId={project.id} />
+            </div>
+          )}
+
+          {currentTab === "world" && (
+            <div className="overflow-hidden rounded-[28px] border border-slate-200/80 bg-white/92 shadow-sm shadow-slate-950/5">
+              <WorldBuildingPanel projectId={project.id} />
+            </div>
+          )}
+
+          {currentTab === "style" && (
+            <div className="relative overflow-hidden rounded-[32px] border border-slate-200/80 bg-[linear-gradient(180deg,rgba(248,250,252,0.92)_0%,rgba(255,255,255,0.98)_42%,rgba(240,249,255,0.92)_100%)] p-4 shadow-sm shadow-slate-950/5 lg:p-5">
+              <div className="pointer-events-none absolute -left-12 top-8 h-36 w-36 rounded-full bg-sky-200/25 blur-3xl" />
+              <div className="pointer-events-none absolute right-[-32px] top-0 h-40 w-40 rounded-full bg-amber-200/20 blur-3xl" />
+              <div className="relative">
+                <StyleGuidePanel projectId={project.id} />
+              </div>
+            </div>
+          )}
+
+          {currentTab === "outline" && (
+            <div className="overflow-hidden rounded-[28px] border border-slate-200/80 bg-white/92 shadow-sm shadow-slate-950/5">
+              <OutlinePanel projectId={project.id} />
+            </div>
+          )}
+
+          {currentTab === "scenes" && (
+            <div className="flex min-h-[320px] items-center justify-center rounded-[28px] border border-dashed border-slate-300/80 bg-white/80 text-muted-foreground">
+              <div className="text-center">
+                <MapPin className="mx-auto mb-4 h-12 w-12 opacity-50" />
+                <p>场景管理功能开发中...</p>
+              </div>
+            </div>
+          )}
+
+          {currentTab === "storyboard" && (
+            <div className="flex min-h-[320px] items-center justify-center rounded-[28px] border border-dashed border-slate-300/80 bg-white/80 text-muted-foreground">
+              <div className="text-center">
+                <LayoutGrid className="mx-auto mb-4 h-12 w-12 opacity-50" />
+                <p>分镜管理功能开发中...</p>
+              </div>
+            </div>
+          )}
+
+          {currentTab === "assets" && (
+            <div className="flex min-h-[320px] items-center justify-center rounded-[28px] border border-dashed border-slate-300/80 bg-white/80 text-muted-foreground">
+              <div className="text-center">
+                <Image className="mx-auto mb-4 h-12 w-12 opacity-50" />
+                <p>素材管理功能开发中...</p>
+              </div>
+            </div>
+          )}
+
+          {currentTab === "templates" && (
+            <div className="flex min-h-[320px] items-center justify-center rounded-[28px] border border-dashed border-slate-300/80 bg-white/80 text-muted-foreground">
+              <div className="text-center">
+                <Copy className="mx-auto mb-4 h-12 w-12 opacity-50" />
+                <p>模板管理功能开发中...</p>
+              </div>
+            </div>
+          )}
+        </Tabs>
+      </div>
     </div>
   );
 }
diff --git a/src/components/projects/CreateProjectDialog.test.tsx b/src/components/projects/CreateProjectDialog.test.tsx
new file mode 100644
index 000000000..a46714c05
--- /dev/null
+++ b/src/components/projects/CreateProjectDialog.test.tsx
@@ -0,0 +1,128 @@
+import { afterEach, beforeEach, describe, expect, it, vi } from "vitest";
+import {
+  cleanupMountedRoots,
+  fillTextInput,
+  findButtonByText,
+  findInputById,
+  flushEffects,
+  mountHarness,
+  setupReactActEnvironment,
+  type MountedRoot,
+} from "@/components/workspace/hooks/testUtils";
+import { CreateProjectDialog } from "./CreateProjectDialog";
+
+const {
+  mockExtractErrorMessage,
+  mockGetCreateProjectErrorMessage,
+  mockGetProjectByRootPath,
+  mockGetWorkspaceProjectsRoot,
+  mockResolveProjectRootPath,
+} = vi.hoisted(() => ({
+  mockExtractErrorMessage: vi.fn((error: unknown) =>
+    error instanceof Error ? error.message : String(error),
+  ),
+  mockGetCreateProjectErrorMessage: vi.fn((message: string) => message),
+  mockGetProjectByRootPath: vi.fn(),
+  mockGetWorkspaceProjectsRoot: vi.fn(),
+  mockResolveProjectRootPath: vi.fn(),
+}));
+
+vi.mock("sonner", () => ({
+  toast: {
+    success: vi.fn(),
+    error: vi.fn(),
+  },
+}));
+
+vi.mock("@/lib/api/project", () => ({
+  USER_PROJECT_TYPES: ["general", "document", "novel"],
+  extractErrorMessage: mockExtractErrorMessage,
+  getCreateProjectErrorMessage: mockGetCreateProjectErrorMessage,
+  getProjectTypeLabel: vi.fn((type: string) => {
+    if (type === "document") return "文档";
+    if (type === "novel") return "小说";
+    return "通用";
+  }),
+  getProjectTypeIcon: vi.fn((type: string) => {
+    if (type === "document") return "📄";
+    if (type === "novel") return "📚";
+    return "📁";
+  }),
+  getProjectByRootPath: mockGetProjectByRootPath,
+  getWorkspaceProjectsRoot: mockGetWorkspaceProjectsRoot,
+  resolveProjectRootPath: mockResolveProjectRootPath,
+}));
+
+setupReactActEnvironment();
+
+const mountedRoots: MountedRoot[] = [];
+
+describe("CreateProjectDialog", () => {
+  beforeEach(() => {
+    mockGetWorkspaceProjectsRoot.mockResolvedValue("/tmp/workspace");
+    mockResolveProjectRootPath.mockImplementation(async (name: string) =>
+      `/tmp/workspace/${name}`,
+    );
+    mockGetProjectByRootPath.mockResolvedValue(null);
+  });
+
+  afterEach(() => {
+    cleanupMountedRoots(mountedRoots);
+    vi.clearAllMocks();
+  });
+
+  it("应渲染新的项目创建工作台摘要", async () => {
+    mountHarness(
+      CreateProjectDialog,
+      {
+        open: true,
+        onOpenChange: vi.fn(),
+        onSubmit: vi.fn(async () => undefined),
+        defaultType: "document",
+        defaultName: "研究手记",
+      },
+      mountedRoots,
+    );
+
+    await flushEffects(3);
+
+    const text = document.body.textContent ?? "";
+    expect(text).toContain("创建新的项目工作台");
+    expect(text).toContain("选择项目类型");
+    expect(text).toContain("目录与路径");
+    expect(text).toContain("/tmp/workspace/研究手记");
+  });
+
+  it("路径冲突时应展示提示并禁用创建", async () => {
+    mockGetProjectByRootPath.mockResolvedValue({
+      id: "project-exists",
+      name: "已存在项目",
+    });
+
+    mountHarness(
+      CreateProjectDialog,
+      {
+        open: true,
+        onOpenChange: vi.fn(),
+        onSubmit: vi.fn(async () => undefined),
+        defaultType: "general",
+      },
+      mountedRoots,
+    );
+
+    await flushEffects(2);
+
+    const nameInput = findInputById(document.body, "name");
+    expect(nameInput).not.toBeNull();
+    fillTextInput(nameInput, "冲突项目");
+
+    await flushEffects(3);
+
+    expect(document.body.textContent ?? "").toContain("路径已存在项目：已存在项目");
+    const createButton = findButtonByText(document.body, "创建", {
+      exact: true,
+    });
+    expect(createButton).toBeDefined();
+    expect(createButton?.disabled).toBe(true);
+  });
+});
diff --git a/src/components/projects/CreateProjectDialog.tsx b/src/components/projects/CreateProjectDialog.tsx
index 24f2ac290..d4be0c290 100644
--- a/src/components/projects/CreateProjectDialog.tsx
+++ b/src/components/projects/CreateProjectDialog.tsx
@@ -4,7 +4,8 @@
  * 用于创建新项目
  */
 
-import { useState, useEffect } from "react";
+import { useState, useEffect, useMemo } from "react";
+import { Badge } from "@/components/ui/badge";
 import {
   Dialog,
   DialogContent,
@@ -36,6 +37,7 @@ interface CreateProjectDialogProps {
   onSubmit: (name: string, type: ProjectType) => Promise<void>;
   defaultType?: ProjectType;
   defaultName?: string;
+  allowedTypes?: ProjectType[];
 }
 
 export function CreateProjectDialog({
@@ -44,6 +46,7 @@ export function CreateProjectDialog({
   onSubmit,
   defaultType,
   defaultName,
+  allowedTypes,
 }: CreateProjectDialogProps) {
   const [name, setName] = useState("");
   const [type, setType] = useState<ProjectType>(defaultType || "general");
@@ -53,12 +56,32 @@ export function CreateProjectDialog({
   const [pathChecking, setPathChecking] = useState(false);
   const [pathConflictMessage, setPathConflictMessage] = useState("");
 
+  const visibleTypes = useMemo(() => {
+    const candidates =
+      allowedTypes && allowedTypes.length > 0 ? allowedTypes : USER_PROJECT_TYPES;
+
+    return candidates.filter((candidate): candidate is ProjectType =>
+      USER_PROJECT_TYPES.includes(candidate as (typeof USER_PROJECT_TYPES)[number]),
+    );
+  }, [allowedTypes]);
+
+  const fallbackType = visibleTypes[0] || "general";
+
   // 当对话框打开且 defaultType 变化时，更新类型选择
   useEffect(() => {
-    if (open && defaultType) {
-      setType(defaultType);
+    if (!open) {
+      return;
     }
-  }, [open, defaultType]);
+
+    if (defaultType && visibleTypes.includes(defaultType)) {
+      setType(defaultType);
+      return;
+    }
+
+    if (!visibleTypes.includes(type)) {
+      setType(fallbackType);
+    }
+  }, [defaultType, fallbackType, open, type, visibleTypes]);
 
   // 当对话框打开且 defaultName 变化时，更新项目名称
   useEffect(() => {
@@ -181,7 +204,11 @@ export function CreateProjectDialog({
     try {
       await onSubmit(name.trim(), type);
       setName("");
-      setType(defaultType || "general");
+      setType(
+        defaultType && visibleTypes.includes(defaultType)
+          ? defaultType
+          : fallbackType,
+      );
       onOpenChange(false);
     } catch (error) {
       console.error("创建项目失败:", error);
@@ -192,89 +219,162 @@ export function CreateProjectDialog({
       setIsSubmitting(false);
     }
   };
+  const topBadges = [
+    getProjectTypeLabel(type),
+    workspaceRootPath ? "工作区目录已解析" : "等待目录加载",
+    pathConflictMessage ? "路径冲突" : "路径可用",
+  ];
 
   return (
     <Dialog open={open} onOpenChange={onOpenChange}>
-      <DialogContent className="sm:max-w-[480px]">
-        <DialogHeader>
+      <DialogContent className="sm:max-w-[760px] overflow-hidden border-slate-200/80 bg-[linear-gradient(180deg,rgba(248,250,252,0.98)_0%,rgba(255,255,255,0.98)_38%,rgba(240,249,255,0.94)_100%)] p-0">
+        <DialogHeader className="border-b border-white/80 px-6 py-5">
           <DialogTitle>新建项目</DialogTitle>
           <DialogDescription>
             创建一个新的内容创作项目，目录将固定在 workspace 目录下。
           </DialogDescription>
         </DialogHeader>
 
-        <div className="grid gap-5 py-4">
-          {/* 项目名称 */}
-          <div className="grid gap-2">
-            <Label htmlFor="name">项目名称</Label>
-            <Input
-              id="name"
-              value={name}
-              onChange={(e) => setName(e.target.value)}
-              placeholder="输入项目名称..."
-              autoFocus
-            />
+        <div className="grid max-h-[78vh] gap-5 overflow-auto p-5 lg:grid-cols-[1.1fr_0.9fr]">
+          <div className="space-y-5">
+            <section className="relative overflow-hidden rounded-[28px] border border-slate-200/80 bg-[linear-gradient(135deg,rgba(247,250,252,0.98)_0%,rgba(255,255,255,0.98)_48%,rgba(240,249,255,0.94)_100%)] p-5 shadow-sm shadow-slate-950/5">
+              <div className="pointer-events-none absolute -left-10 top-[-28px] h-24 w-24 rounded-full bg-sky-200/20 blur-3xl" />
+              <div className="pointer-events-none absolute right-[-14px] top-0 h-20 w-20 rounded-full bg-emerald-200/20 blur-3xl" />
+              <div className="relative space-y-4">
+                <div>
+                  <div className="text-sm font-semibold text-slate-900">
+                    创建新的项目工作台
+                  </div>
+                  <div className="mt-1 text-xs leading-5 text-slate-500">
+                    先确定项目名称和类型，再确认目录路径，后续内容、风格和记忆都会挂到这个项目下。
+                  </div>
+                </div>
+                <div className="flex flex-wrap gap-2">
+                  {topBadges.map((item) => (
+                    <span
+                      key={item}
+                      className="rounded-full border border-white/90 bg-white/85 px-3 py-1 text-[11px] font-medium text-slate-600 shadow-sm"
+                    >
+                      {item}
+                    </span>
+                  ))}
+                </div>
+                <div className="grid gap-2">
+                  <Label htmlFor="name">项目名称</Label>
+                  <Input
+                    id="name"
+                    value={name}
+                    onChange={(e) => setName(e.target.value)}
+                    placeholder="输入项目名称..."
+                    autoFocus
+                    className="h-11 border-slate-200/80 bg-white/90"
+                  />
+                </div>
+              </div>
+            </section>
+
+            <section className="rounded-[28px] border border-slate-200/80 bg-white/92 p-5 shadow-sm shadow-slate-950/5">
+              <div className="mb-4">
+                <div className="text-sm font-semibold text-slate-900">
+                  选择项目类型
+                </div>
+                <div className="mt-1 text-xs leading-5 text-slate-500">
+                  类型会影响后续默认内容、工作台结构和推荐视图。
+                </div>
+              </div>
+              <div className="grid grid-cols-2 gap-3 sm:grid-cols-3">
+                {visibleTypes.map((t) => (
+                  <button
+                    key={t}
+                    type="button"
+                    className={cn(
+                      "flex min-h-[112px] flex-col items-center justify-center gap-2 rounded-[22px] border px-4 py-4 text-center transition",
+                      type === t
+                        ? "border-slate-900/20 bg-slate-900/5 shadow-sm shadow-slate-950/5"
+                        : "border-slate-200/80 bg-slate-50/70 hover:border-slate-300 hover:bg-white",
+                    )}
+                    onClick={() => setType(t)}
+                  >
+                    <span className="text-2xl">{getProjectTypeIcon(t)}</span>
+                    <span className="text-xs font-medium text-slate-900">
+                      {getProjectTypeLabel(t)}
+                    </span>
+                    {type === t ? (
+                      <Badge className="border-0 bg-slate-900 text-white">
+                        当前选择
+                      </Badge>
+                    ) : null}
+                  </button>
+                ))}
+              </div>
+            </section>
           </div>
 
-          {/* 项目类型 */}
-          <div className="grid gap-3">
-            <Label>项目类型</Label>
-            <div className="grid grid-cols-3 gap-3">
-              {USER_PROJECT_TYPES.map((t) => (
-                <button
-                  key={t}
-                  type="button"
-                  className={cn(
-                    "flex flex-col items-center justify-center gap-2 p-4 rounded-xl border-2 transition-all",
-                    "hover:border-primary/50 hover:bg-accent/50",
-                    type === t
-                      ? "border-primary bg-primary/5 shadow-sm"
-                      : "border-border",
+          <div className="space-y-5">
+            <section className="rounded-[28px] border border-slate-200/80 bg-white/92 p-5 shadow-sm shadow-slate-950/5">
+              <div className="mb-4">
+                <div className="text-sm font-semibold text-slate-900">
+                  目录与路径
+                </div>
+                <div className="mt-1 text-xs leading-5 text-slate-500">
+                  项目会固定创建在 workspace 根目录下，避免目录来源不一致。
+                </div>
+              </div>
+
+              <div className="grid gap-4">
+                <div className="grid gap-2">
+                  <Label htmlFor="workspace-root">workspace 目录</Label>
+                  <Input
+                    id="workspace-root"
+                    value={workspaceRootPath}
+                    placeholder="加载中..."
+                    readOnly
+                    className="bg-slate-50/80"
+                  />
+                </div>
+
+                <div className="grid gap-2">
+                  <Label htmlFor="project-path-preview">项目路径预览</Label>
+                  <Input
+                    id="project-path-preview"
+                    value={resolvedProjectPath}
+                    placeholder="请输入项目名称"
+                    readOnly
+                    className="bg-slate-50/80"
+                  />
+                  <p className="break-all text-xs leading-5 text-slate-500">
+                    将创建到：{resolvedProjectPath || "请输入项目名称"}
+                  </p>
+                  {pathChecking && (
+                    <p className="text-xs text-slate-500">正在检查路径...</p>
                   )}
-                  onClick={() => setType(t)}
-                >
-                  <span className="text-2xl">{getProjectTypeIcon(t)}</span>
-                  <span className="text-xs font-medium">
-                    {getProjectTypeLabel(t)}
-                  </span>
-                </button>
-              ))}
-            </div>
-          </div>
+                  {!pathChecking && pathConflictMessage && (
+                    <p className="text-xs text-destructive">
+                      {pathConflictMessage}
+                    </p>
+                  )}
+                </div>
+              </div>
+            </section>
 
-          <div className="grid gap-2">
-            <Label htmlFor="workspace-root">workspace 目录</Label>
-            <Input
-              id="workspace-root"
-              value={workspaceRootPath}
-              placeholder="加载中..."
-              readOnly
-            />
-          </div>
-
-          <div className="grid gap-2">
-            <Label htmlFor="project-path-preview">项目路径预览</Label>
-            <Input
-              id="project-path-preview"
-              value={resolvedProjectPath}
-              placeholder="请输入项目名称"
-              readOnly
-            />
-            <p className="text-xs text-muted-foreground break-all">
-              将创建到：
-              {resolvedProjectPath || "请输入项目名称"}
-            </p>
-            {pathChecking && (
-              <p className="text-xs text-muted-foreground">正在检查路径...</p>
-            )}
-            {!pathChecking && pathConflictMessage && (
-              <p className="text-xs text-destructive">{pathConflictMessage}</p>
-            )}
+            <section className="rounded-[28px] border border-slate-200/80 bg-[linear-gradient(180deg,rgba(248,250,252,0.9)_0%,rgba(255,255,255,0.98)_100%)] p-5 shadow-sm shadow-slate-950/5">
+              <div className="text-sm font-semibold text-slate-900">
+                创建建议
+              </div>
+              <div className="mt-2 space-y-2 text-xs leading-5 text-slate-500">
+                <p>项目名称尽量稳定，后续会同步影响目录名和项目识别。</p>
+                <p>如果路径已冲突，优先改项目名，不要手工改系统目录。</p>
+                <p>项目类型决定默认工作台结构，先选最贴近当前任务的类型。</p>
+              </div>
+            </section>
           </div>
         </div>
-
-        <DialogFooter>
-          <Button variant="outline" onClick={() => onOpenChange(false)}>
+        <DialogFooter className="border-t border-white/80 px-6 py-4">
+          <Button
+            variant="outline"
+            className="border-slate-200/80 bg-white"
+            onClick={() => onOpenChange(false)}
+          >
             取消
           </Button>
           <Button
diff --git a/src/components/projects/MemorySidebar.tsx b/src/components/projects/MemorySidebar.tsx
index 670944bf4..bd0523072 100644
--- a/src/components/projects/MemorySidebar.tsx
+++ b/src/components/projects/MemorySidebar.tsx
@@ -23,7 +23,12 @@ import {
   CollapsibleTrigger,
 } from "@/components/ui/collapsible";
 import { ScrollArea } from "@/components/ui/scroll-area";
-import { Dialog, DialogContent, DialogHeader, DialogTitle } from "@/components/ui/dialog";
+import {
+  Dialog,
+  DialogContent,
+  DialogHeader,
+  DialogTitle,
+} from "@/components/ui/dialog";
 import { cn } from "@/lib/utils";
 import {
   ProjectMemory,
@@ -32,7 +37,11 @@ import {
   StyleGuide,
   getProjectMemory,
 } from "@/lib/api/memory";
-import { buildStyleSummary, getStyleCategoryLabel, getStyleProfileFromGuide } from "@/lib/style-guide";
+import {
+  buildStyleSummary,
+  getStyleCategoryLabel,
+  getStyleProfileFromGuide,
+} from "@/lib/style-guide";
 import { StyleGuidePanel } from "./memory/StyleGuidePanel";
 
 interface MemorySidebarProps {
@@ -75,12 +84,17 @@ export function MemorySidebar({ projectId, className }: MemorySidebarProps) {
       return next;
     });
   };
+  const headerBadges = [
+    `${memory?.characters.length || 0} 个角色`,
+    memory?.world_building ? "已整理世界观" : "待补世界观",
+    memory?.style_guide ? "已配置项目风格" : "待设置项目风格",
+  ];
 
   if (loading) {
     return (
       <div
         className={cn(
-          "flex items-center justify-center h-40 border-l bg-muted/30",
+          "flex h-40 items-center justify-center border-l border-slate-200/70 bg-[linear-gradient(180deg,rgba(248,250,252,0.92)_0%,rgba(241,245,249,0.88)_100%)]",
           className,
         )}
       >
@@ -90,34 +104,62 @@ export function MemorySidebar({ projectId, className }: MemorySidebarProps) {
   }
 
   return (
-    <div className={cn("border-l bg-muted/30 flex flex-col", className)}>
-      {/* 头部 */}
-      <div className="flex items-center justify-between gap-2 p-3 border-b">
-        <span className="text-sm font-medium">项目记忆</span>
-        <div className="flex items-center gap-1">
-          <Button
-            variant="outline"
-            size="sm"
-            className="h-7 px-2 text-xs"
-            onClick={() => setStyleGuideDialogOpen(true)}
-          >
-            风格
-          </Button>
-          <Button
-            variant="ghost"
-            size="icon"
-            className="h-7 w-7"
-            onClick={loadMemory}
-          >
-            <RefreshCw className="h-4 w-4" />
-          </Button>
+    <div
+      className={cn(
+        "flex h-full flex-col overflow-hidden border-l border-slate-200/70 bg-[linear-gradient(180deg,rgba(248,250,252,0.96)_0%,rgba(255,255,255,0.98)_34%,rgba(241,245,249,0.94)_100%)]",
+        className,
+      )}
+    >
+      <div className="relative border-b border-white/80 px-4 py-4">
+        <div className="pointer-events-none absolute -right-10 top-0 h-24 w-24 rounded-full bg-sky-200/20 blur-3xl" />
+        <div className="pointer-events-none absolute left-[-28px] top-[-18px] h-20 w-20 rounded-full bg-emerald-200/20 blur-3xl" />
+        <div className="relative space-y-4">
+          <div className="flex items-start justify-between gap-3">
+            <div className="space-y-1">
+              <div className="text-xs font-medium text-slate-500">
+                项目记忆
+              </div>
+              <div className="text-sm font-semibold text-slate-900">
+                角色、世界观与风格基线
+              </div>
+              <p className="text-xs leading-5 text-slate-500">
+                编辑时快速查看项目事实，并随时进入默认风格工作台。
+              </p>
+            </div>
+            <div className="flex items-center gap-1">
+              <Button
+                variant="outline"
+                size="sm"
+                className="h-8 rounded-full border-white/90 bg-white/85 px-3 text-xs text-slate-700 shadow-sm shadow-slate-950/5"
+                onClick={() => setStyleGuideDialogOpen(true)}
+              >
+                风格工作台
+              </Button>
+              <Button
+                variant="ghost"
+                size="icon"
+                className="h-8 w-8 rounded-full text-slate-500 hover:bg-white/70 hover:text-slate-700"
+                onClick={loadMemory}
+              >
+                <RefreshCw className="h-4 w-4" />
+              </Button>
+            </div>
+          </div>
+          <div className="flex flex-wrap gap-2">
+            {headerBadges.map((item) => (
+              <span
+                key={item}
+                className="rounded-full border border-white/90 bg-white/80 px-3 py-1 text-[11px] font-medium text-slate-600 shadow-sm shadow-slate-950/5"
+              >
+                {item}
+              </span>
+            ))}
+          </div>
         </div>
       </div>
 
-      {/* 内容 */}
       <ScrollArea className="flex-1">
-        <div className="p-2 space-y-2">
-          {/* 角色 */}
+        <div className="space-y-3 p-3">
           <SidebarSection
             title="角色"
             icon={<Users className="h-4 w-4" />}
@@ -132,11 +174,10 @@ export function MemorySidebar({ projectId, className }: MemorySidebarProps) {
                 ))}
               </div>
             ) : (
-              <p className="text-xs text-muted-foreground py-2">暂无角色</p>
+              <p className="py-2 text-xs text-slate-500">暂无角色</p>
             )}
           </SidebarSection>
 
-          {/* 世界观 */}
           <SidebarSection
             title="世界观"
             icon={<Globe className="h-4 w-4" />}
@@ -146,13 +187,10 @@ export function MemorySidebar({ projectId, className }: MemorySidebarProps) {
             {memory?.world_building ? (
               <WorldBuildingItem worldBuilding={memory.world_building} />
             ) : (
-              <p className="text-xs text-muted-foreground py-2">
-                暂无世界观设定
-              </p>
+              <p className="py-2 text-xs text-slate-500">暂无世界观设定</p>
             )}
           </SidebarSection>
 
-          {/* 风格指南 */}
           <SidebarSection
             title="风格指南"
             icon={<Palette className="h-4 w-4" />}
@@ -165,12 +203,14 @@ export function MemorySidebar({ projectId, className }: MemorySidebarProps) {
                 onEdit={() => setStyleGuideDialogOpen(true)}
               />
             ) : (
-              <div className="py-2 space-y-2">
-                <p className="text-xs text-muted-foreground">暂无风格指南</p>
+              <div className="space-y-3 py-2">
+                <p className="text-xs leading-5 text-slate-500">
+                  暂无项目默认风格，建议先从风格库导入一套表达基线。
+                </p>
                 <Button
                   variant="outline"
                   size="sm"
-                  className="h-7 text-xs"
+                  className="h-8 rounded-full border-slate-200/80 bg-white text-xs text-slate-700"
                   onClick={() => setStyleGuideDialogOpen(true)}
                 >
                   立即设置风格
@@ -182,11 +222,11 @@ export function MemorySidebar({ projectId, className }: MemorySidebarProps) {
       </ScrollArea>
 
       <Dialog open={styleGuideDialogOpen} onOpenChange={setStyleGuideDialogOpen}>
-        <DialogContent className="max-w-6xl max-h-[90vh] overflow-y-auto p-0">
-          <DialogHeader className="border-b px-6 py-4">
+        <DialogContent className="max-h-[92vh] max-w-7xl overflow-y-auto border-slate-200/80 bg-[linear-gradient(180deg,rgba(248,250,252,0.96)_0%,rgba(255,255,255,1)_36%,rgba(241,245,249,0.95)_100%)] p-4 lg:p-5">
+          <DialogHeader className="sr-only">
             <DialogTitle>项目默认风格</DialogTitle>
           </DialogHeader>
-          <div className="p-6">
+          <div className="relative">
             <StyleGuidePanel projectId={projectId} />
           </div>
         </DialogContent>
@@ -214,20 +254,33 @@ function SidebarSection({
   children,
 }: SidebarSectionProps) {
   return (
-    <Collapsible open={expanded} onOpenChange={onToggle}>
-      <CollapsibleTrigger className="flex items-center gap-2 w-full p-2 rounded hover:bg-accent/50 text-sm">
+    <Collapsible
+      open={expanded}
+      onOpenChange={onToggle}
+      className="rounded-[22px] border border-white/90 bg-white/84 p-1.5 shadow-sm shadow-slate-950/5"
+    >
+      <CollapsibleTrigger
+        className={cn(
+          "flex w-full items-center gap-2 rounded-[18px] px-3 py-3 text-sm text-slate-700 transition",
+          expanded ? "bg-slate-50/80" : "hover:bg-slate-50/70",
+        )}
+      >
         {expanded ? (
-          <ChevronDown className="h-4 w-4" />
+          <ChevronDown className="h-4 w-4 text-slate-400" />
         ) : (
-          <ChevronRight className="h-4 w-4" />
+          <ChevronRight className="h-4 w-4 text-slate-400" />
         )}
         {icon}
-        <span className="flex-1 text-left">{title}</span>
+        <span className="flex-1 text-left font-medium">{title}</span>
         {count !== undefined && (
-          <span className="text-xs text-muted-foreground">{count}</span>
+          <span className="rounded-full bg-slate-100 px-2 py-0.5 text-[11px] text-slate-500">
+            {count}
+          </span>
         )}
       </CollapsibleTrigger>
-      <CollapsibleContent className="pl-8 pr-2">{children}</CollapsibleContent>
+      <CollapsibleContent className="px-2 pb-2 pt-1">
+        {children}
+      </CollapsibleContent>
     </Collapsible>
   );
 }
@@ -239,16 +292,16 @@ interface CharacterItemProps {
 
 function CharacterItem({ character }: CharacterItemProps) {
   return (
-    <div className="p-2 rounded bg-background border text-xs">
-      <div className="flex items-center gap-2 mb-1">
-        <User className="h-3 w-3 text-muted-foreground" />
-        <span className="font-medium">{character.name}</span>
+    <div className="rounded-[18px] border border-slate-200/80 bg-slate-50/70 px-3 py-3 text-xs shadow-sm shadow-slate-950/5">
+      <div className="mb-1 flex items-center gap-2">
+        <User className="h-3 w-3 text-slate-400" />
+        <span className="font-medium text-slate-900">{character.name}</span>
         {character.is_main && (
           <Star className="h-3 w-3 text-yellow-500 fill-yellow-500" />
         )}
       </div>
       {character.description && (
-        <p className="text-muted-foreground line-clamp-2">
+        <p className="line-clamp-2 leading-5 text-slate-500">
           {character.description}
         </p>
       )}
@@ -263,23 +316,27 @@ interface WorldBuildingItemProps {
 
 function WorldBuildingItem({ worldBuilding }: WorldBuildingItemProps) {
   return (
-    <div className="p-2 rounded bg-background border text-xs space-y-2">
+    <div className="space-y-2 rounded-[18px] border border-slate-200/80 bg-slate-50/70 px-3 py-3 text-xs shadow-sm shadow-slate-950/5">
       {worldBuilding.description && (
         <div>
-          <span className="text-muted-foreground">描述：</span>
-          <p className="line-clamp-3">{worldBuilding.description}</p>
+          <span className="text-slate-400">描述：</span>
+          <p className="line-clamp-3 leading-5 text-slate-700">
+            {worldBuilding.description}
+          </p>
         </div>
       )}
       {worldBuilding.era && (
         <div>
-          <span className="text-muted-foreground">时代：</span>
-          <span>{worldBuilding.era}</span>
+          <span className="text-slate-400">时代：</span>
+          <span className="text-slate-700">{worldBuilding.era}</span>
         </div>
       )}
       {worldBuilding.locations && (
         <div>
-          <span className="text-muted-foreground">地点：</span>
-          <p className="line-clamp-2">{worldBuilding.locations}</p>
+          <span className="text-slate-400">地点：</span>
+          <p className="line-clamp-2 leading-5 text-slate-700">
+            {worldBuilding.locations}
+          </p>
         </div>
       )}
     </div>
@@ -297,15 +354,23 @@ function StyleGuideItem({ styleGuide, onEdit }: StyleGuideItemProps) {
   const summary = buildStyleSummary(styleGuide);
 
   return (
-    <div className="p-2 rounded bg-background border text-xs space-y-2">
+    <div className="space-y-3 rounded-[18px] border border-slate-200/80 bg-[linear-gradient(180deg,rgba(248,250,252,0.86)_0%,rgba(255,255,255,0.96)_100%)] px-3 py-3 text-xs shadow-sm shadow-slate-950/5">
       {profile ? (
         <>
           <div className="flex flex-wrap items-center gap-2">
-            <span className="font-medium text-sm">{profile.name}</span>
-            <Badge variant="secondary" className="text-[10px] font-normal">
+            <span className="text-sm font-medium text-slate-900">
+              {profile.name}
+            </span>
+            <Badge
+              variant="secondary"
+              className="border-0 bg-slate-100 text-[10px] font-normal text-slate-600"
+            >
               {getStyleCategoryLabel(profile.category)}
             </Badge>
-            <Badge variant="outline" className="text-[10px] font-normal">
+            <Badge
+              variant="outline"
+              className="border-slate-200/80 bg-white/80 text-[10px] font-normal text-slate-600"
+            >
               强度 {profile.simulationStrength}
             </Badge>
           </div>
@@ -313,7 +378,7 @@ function StyleGuideItem({ styleGuide, onEdit }: StyleGuideItemProps) {
           {summary.length > 0 && (
             <div className="space-y-1">
               {summary.map((item) => (
-                <p key={item} className="text-muted-foreground line-clamp-2">
+                <p key={item} className="line-clamp-2 leading-5 text-slate-500">
                   {item}
                 </p>
               ))}
@@ -323,7 +388,11 @@ function StyleGuideItem({ styleGuide, onEdit }: StyleGuideItemProps) {
           {profile.targetPlatforms.length > 0 && (
             <div className="flex flex-wrap gap-1">
               {profile.targetPlatforms.map((platform) => (
-                <Badge key={platform} variant="outline" className="text-[10px]">
+                <Badge
+                  key={platform}
+                  variant="outline"
+                  className="border-slate-200/80 bg-white/75 text-[10px] text-slate-600"
+                >
                   {platform}
                 </Badge>
               ))}
@@ -332,8 +401,10 @@ function StyleGuideItem({ styleGuide, onEdit }: StyleGuideItemProps) {
 
           {profile.donts.length > 0 && (
             <div>
-              <span className="text-muted-foreground">避免：</span>
-              <span>{profile.donts.slice(0, 3).join("、")}</span>
+              <span className="text-slate-400">避免：</span>
+              <span className="text-slate-700">
+                {profile.donts.slice(0, 3).join("、")}
+              </span>
             </div>
           )}
           {onEdit && (
@@ -341,7 +412,7 @@ function StyleGuideItem({ styleGuide, onEdit }: StyleGuideItemProps) {
               <Button
                 variant="outline"
                 size="sm"
-                className="h-7 text-xs"
+                className="h-8 rounded-full border-slate-200/80 bg-white text-xs text-slate-700"
                 onClick={onEdit}
               >
                 编辑风格
@@ -351,12 +422,12 @@ function StyleGuideItem({ styleGuide, onEdit }: StyleGuideItemProps) {
         </>
       ) : (
         <div className="space-y-2">
-          <p className="text-muted-foreground">暂无风格摘要</p>
+          <p className="text-slate-500">暂无风格摘要</p>
           {onEdit && (
             <Button
               variant="outline"
               size="sm"
-              className="h-7 text-xs"
+              className="h-8 rounded-full border-slate-200/80 bg-white text-xs text-slate-700"
               onClick={onEdit}
             >
               去设置风格
diff --git a/src/components/projects/ProjectSelector.test.ts b/src/components/projects/ProjectSelector.test.ts
index e7b179eae..6734898a8 100644
--- a/src/components/projects/ProjectSelector.test.ts
+++ b/src/components/projects/ProjectSelector.test.ts
@@ -1,6 +1,12 @@
 import { describe, expect, it } from "vitest";
 import type { Project } from "@/types/project";
-import { getAvailableProjects } from "./projectSelectorUtils";
+import {
+  canDeleteProject,
+  canRenameProject,
+  getAvailableProjects,
+  resolveProjectDeletionFallback,
+  resolveSelectedProject,
+} from "./projectSelectorUtils";
 
 function createProject(overrides: Partial<Project>): Project {
   return {
@@ -112,3 +118,66 @@ describe("getAvailableProjects", () => {
     ]);
   });
 });
+
+describe("项目管理辅助逻辑", () => {
+  it("默认项目不可重命名或删除", () => {
+    const defaultProject = createProject({
+      id: "default",
+      isDefault: true,
+      workspaceType: "general",
+    });
+    const normalProject = createProject({
+      id: "normal",
+      workspaceType: "general",
+    });
+
+    expect(canRenameProject(defaultProject)).toBe(false);
+    expect(canDeleteProject(defaultProject)).toBe(false);
+    expect(canRenameProject(normalProject)).toBe(true);
+    expect(canDeleteProject(normalProject)).toBe(true);
+  });
+
+  it("删除当前项目时应优先回退到默认项目", () => {
+    const defaultProject = createProject({
+      id: "default",
+      isDefault: true,
+      workspaceType: "general",
+    });
+    const deletedProject = createProject({
+      id: "general-2",
+      workspaceType: "general",
+    });
+
+    expect(
+      resolveProjectDeletionFallback(
+        [defaultProject, deletedProject],
+        defaultProject,
+        deletedProject.id,
+      ),
+    ).toBe("default");
+  });
+
+  it("当前选择失效时应回退默认项目或首个项目", () => {
+    const defaultProject = createProject({
+      id: "default",
+      isDefault: true,
+      workspaceType: "general",
+    });
+    const secondaryProject = createProject({
+      id: "general-2",
+      workspaceType: "general",
+    });
+
+    expect(
+      resolveSelectedProject(
+        [defaultProject, secondaryProject],
+        "missing",
+        defaultProject,
+      )?.id,
+    ).toBe("default");
+
+    expect(resolveSelectedProject([secondaryProject], "missing", null)?.id).toBe(
+      "general-2",
+    );
+  });
+});
diff --git a/src/components/projects/ProjectSelector.tsx b/src/components/projects/ProjectSelector.tsx
index 4c1721499..4d505547c 100644
--- a/src/components/projects/ProjectSelector.tsx
+++ b/src/components/projects/ProjectSelector.tsx
@@ -5,17 +5,47 @@
  * @requirements 4.1, 4.2, 4.3, 4.5
  */
 
-import { useState, useEffect, useMemo } from "react";
+import { useEffect, useMemo, useState } from "react";
 import {
-  Select,
-  SelectContent,
-  SelectItem,
-  SelectTrigger,
-  SelectValue,
-} from "@/components/ui/select";
+  Check,
+  ChevronDown,
+  FolderIcon,
+  Pencil,
+  Plus,
+  Search,
+  StarIcon,
+  Trash2,
+} from "lucide-react";
+import { toast } from "sonner";
+import { Badge } from "@/components/ui/badge";
+import { Button } from "@/components/ui/button";
+import {
+  Dialog,
+  DialogContent,
+  DialogDescription,
+  DialogFooter,
+  DialogHeader,
+  DialogTitle,
+} from "@/components/ui/dialog";
+import { Input } from "@/components/ui/input";
+import {
+  Popover,
+  PopoverContent,
+  PopoverTrigger,
+} from "@/components/ui/popover";
+import { ScrollArea } from "@/components/ui/scroll-area";
 import { useProjects } from "@/hooks/useProjects";
-import { getAvailableProjects } from "./projectSelectorUtils";
-import { FolderIcon, StarIcon } from "lucide-react";
+import type { ProjectType } from "@/lib/api/project";
+import { USER_PROJECT_TYPES, getProjectTypeLabel } from "@/lib/api/project";
+import { cn } from "@/lib/utils";
+import { CreateProjectDialog } from "./CreateProjectDialog";
+import {
+  canDeleteProject,
+  canRenameProject,
+  getAvailableProjects,
+  resolveProjectDeletionFallback,
+  resolveSelectedProject,
+} from "./projectSelectorUtils";
 
 export interface ProjectSelectorProps {
   /** 当前选中的项目 ID */
@@ -34,12 +64,27 @@ export interface ProjectSelectorProps {
   dropdownSide?: "top" | "bottom";
   /** 下拉对齐 */
   dropdownAlign?: "start" | "end";
+  /** 是否启用项目管理 */
+  enableManagement?: boolean;
+}
+
+function resolveDefaultProjectType(workspaceType?: string): ProjectType {
+  if (
+    workspaceType &&
+    USER_PROJECT_TYPES.includes(
+      workspaceType as (typeof USER_PROJECT_TYPES)[number],
+    )
+  ) {
+    return workspaceType as ProjectType;
+  }
+
+  return "general";
 }
 
 /**
  * 项目选择器组件
  *
- * 显示项目下拉选择器，默认选中"默认项目"。
+ * 通用对话默认会启用搜索和轻量项目管理。
  */
 export function ProjectSelector({
   value,
@@ -50,90 +95,575 @@ export function ProjectSelector({
   className,
   dropdownSide = "top",
   dropdownAlign = "start",
+  enableManagement = false,
 }: ProjectSelectorProps) {
-  const { projects, defaultProject, loading, getOrCreateDefault } =
-    useProjects();
-  const [initialized, setInitialized] = useState(false);
+  const {
+    projects,
+    generalProjects,
+    defaultProject,
+    loading,
+    create,
+    rename,
+    remove,
+    getOrCreateDefault,
+  } = useProjects();
+  const [open, setOpen] = useState(false);
+  const [searchQuery, setSearchQuery] = useState("");
+  const [createDialogOpen, setCreateDialogOpen] = useState(false);
+  const [renameDialogOpen, setRenameDialogOpen] = useState(false);
+  const [renameTargetId, setRenameTargetId] = useState<string | null>(null);
+  const [renameName, setRenameName] = useState("");
+  const [isRenaming, setIsRenaming] = useState(false);
+  const [deleteDialogOpen, setDeleteDialogOpen] = useState(false);
+  const [deleteTargetId, setDeleteTargetId] = useState<string | null>(null);
+  const [isDeleting, setIsDeleting] = useState(false);
 
-  // 过滤项目：排除归档 + 按主题类型筛选
-  const availableProjects = useMemo(() => {
-    return getAvailableProjects(projects, workspaceType);
-  }, [projects, workspaceType]);
+  const projectSource =
+    workspaceType === "general" ? generalProjects : projects;
 
-  // 查找当前选中的项目
-  const selectedProject = useMemo(
-    () => availableProjects.find((p) => p.id === value),
-    [availableProjects, value],
+  const availableProjects = useMemo(
+    () => getAvailableProjects(projectSource, workspaceType),
+    [projectSource, workspaceType],
   );
 
-  // 初始化时确保有默认项目
-  useEffect(() => {
-    if (!initialized && !loading) {
-      if (!value && defaultProject) {
-        onChange(defaultProject.id);
-      } else if (!value && !defaultProject) {
-        // 创建默认项目
-        getOrCreateDefault().then((project) => {
-          onChange(project.id);
-        });
-      }
-      setInitialized(true);
+  const selectedProject = useMemo(
+    () => resolveSelectedProject(availableProjects, value, defaultProject),
+    [availableProjects, defaultProject, value],
+  );
+
+  const renameTarget = useMemo(
+    () =>
+      renameTargetId
+        ? availableProjects.find((project) => project.id === renameTargetId) || null
+        : null,
+    [availableProjects, renameTargetId],
+  );
+
+  const deleteTarget = useMemo(
+    () =>
+      deleteTargetId
+        ? availableProjects.find((project) => project.id === deleteTargetId) || null
+        : null,
+    [availableProjects, deleteTargetId],
+  );
+
+  const filteredProjects = useMemo(() => {
+    const normalizedQuery = searchQuery.trim().toLowerCase();
+    if (!normalizedQuery) {
+      return availableProjects;
     }
-  }, [
-    initialized,
-    loading,
-    value,
-    defaultProject,
-    onChange,
-    getOrCreateDefault,
-  ]);
+
+    return availableProjects.filter(
+      (project) =>
+        project.name.toLowerCase().includes(normalizedQuery) ||
+        project.tags.some((tag) => tag.toLowerCase().includes(normalizedQuery)),
+    );
+  }, [availableProjects, searchQuery]);
+
+  const defaultProjectType = useMemo(
+    () => resolveDefaultProjectType(workspaceType),
+    [workspaceType],
+  );
+
+  useEffect(() => {
+    if (open) {
+      return;
+    }
+
+    setSearchQuery("");
+  }, [open]);
+
+  useEffect(() => {
+    if (loading) {
+      return;
+    }
+
+    if (value && availableProjects.some((project) => project.id === value)) {
+      return;
+    }
+
+    let cancelled = false;
+
+    const ensureSelection = async () => {
+      const fallbackProjectId = resolveProjectDeletionFallback(
+        availableProjects,
+        defaultProject,
+        null,
+      );
+
+      if (fallbackProjectId) {
+        if (!cancelled && fallbackProjectId !== value) {
+          onChange(fallbackProjectId);
+        }
+        return;
+      }
+
+      try {
+        const createdDefault = await getOrCreateDefault();
+        if (!cancelled && createdDefault.id && createdDefault.id !== value) {
+          onChange(createdDefault.id);
+        }
+      } catch (error) {
+        console.error("创建默认项目失败:", error);
+      }
+    };
+
+    void ensureSelection();
+
+    return () => {
+      cancelled = true;
+    };
+  }, [availableProjects, defaultProject, getOrCreateDefault, loading, onChange, value]);
+
+  const handleSelect = (projectId: string) => {
+    if (projectId !== value) {
+      onChange(projectId);
+    }
+    setOpen(false);
+  };
+
+  const handleCreateProject = async (name: string, type: ProjectType) => {
+    const project = await create({
+      name,
+      workspaceType: type,
+    });
+    onChange(project.id);
+    setOpen(false);
+    toast.success("项目已创建");
+  };
+
+  const handleOpenRename = () => {
+    const currentSelectedProject = selectedProject;
+    if (
+      !currentSelectedProject ||
+      !canRenameProject(currentSelectedProject)
+    ) {
+      return;
+    }
+
+    setRenameTargetId(currentSelectedProject.id);
+    setRenameName(currentSelectedProject.name);
+    setOpen(false);
+    setRenameDialogOpen(true);
+  };
+
+  const handleConfirmRename = async () => {
+    if (!renameTarget || !canRenameProject(renameTarget)) {
+      return;
+    }
+
+    const nextName = renameName.trim();
+    if (!nextName) {
+      toast.error("项目名称不能为空");
+      return;
+    }
+
+    setIsRenaming(true);
+    try {
+      await rename(renameTarget.id, nextName);
+      setRenameDialogOpen(false);
+      setRenameTargetId(null);
+      toast.success("项目名称已更新");
+    } catch (error) {
+      toast.error(
+        `重命名失败: ${error instanceof Error ? error.message : String(error)}`,
+      );
+    } finally {
+      setIsRenaming(false);
+    }
+  };
+
+  const handleOpenDelete = () => {
+    const currentSelectedProject = selectedProject;
+    if (
+      !currentSelectedProject ||
+      !canDeleteProject(currentSelectedProject)
+    ) {
+      return;
+    }
+
+    setDeleteTargetId(currentSelectedProject.id);
+    setOpen(false);
+    setDeleteDialogOpen(true);
+  };
+
+  const handleConfirmDelete = async () => {
+    if (!deleteTarget || !canDeleteProject(deleteTarget)) {
+      return;
+    }
+
+    setIsDeleting(true);
+    try {
+      const deletedProjectId = deleteTarget.id;
+      await remove(deletedProjectId);
+
+      if (value === deletedProjectId) {
+        const fallbackProjectId =
+          resolveProjectDeletionFallback(
+            availableProjects,
+            defaultProject,
+            deletedProjectId,
+          ) || (await getOrCreateDefault()).id;
+
+        if (fallbackProjectId) {
+          onChange(fallbackProjectId);
+        }
+      }
+
+      setDeleteDialogOpen(false);
+      setDeleteTargetId(null);
+      toast.success("项目已删除，本地目录未删除");
+    } catch (error) {
+      toast.error(
+        `删除失败: ${error instanceof Error ? error.message : String(error)}`,
+      );
+    } finally {
+      setIsDeleting(false);
+    }
+  };
+
+  const managementHint =
+    selectedProject && !canRenameProject(selectedProject)
+      ? "默认项目不可重命名或删除"
+      : null;
+  const projectSummaryBadges = [
+    selectedProject?.isDefault ? "默认项目" : "普通项目",
+    selectedProject ? getProjectTypeLabel(selectedProject.workspaceType) : "待选择",
+  ];
 
   return (
-    <Select
-      value={value || undefined}
-      onValueChange={onChange}
-      disabled={disabled || loading}
-    >
-      <SelectTrigger className={className}>
-        {/* 自定义显示选中项 */}
-        {selectedProject ? (
-          <div className="flex items-center gap-2">
-            {selectedProject.icon ? (
-              <span className="text-base">{selectedProject.icon}</span>
-            ) : (
-              <FolderIcon className="h-4 w-4 text-muted-foreground" />
+    <>
+      <Popover open={open} onOpenChange={setOpen}>
+        <PopoverTrigger asChild>
+          <Button
+            variant="outline"
+            size="sm"
+            className={cn(
+              "h-auto min-w-[220px] max-w-[300px] justify-between gap-3 rounded-full border-slate-200/80 bg-white/88 px-3 py-2 text-left shadow-sm shadow-slate-950/5 hover:bg-white",
+              className,
             )}
-            <span className="truncate">{selectedProject.name}</span>
-            {selectedProject.isDefault && (
-              <StarIcon className="h-3 w-3 text-yellow-500 fill-yellow-500 flex-shrink-0" />
-            )}
-          </div>
-        ) : (
-          <SelectValue placeholder={placeholder} />
-        )}
-      </SelectTrigger>
-      <SelectContent
-        side={dropdownSide}
-        align={dropdownAlign}
-        className="min-w-[320px] max-w-[520px]"
-      >
-        {availableProjects.map((project) => (
-          <SelectItem key={project.id} value={project.id}>
-            <div className="flex items-center gap-2 w-full">
-              {project.icon ? (
-                <span className="text-base flex-shrink-0">{project.icon}</span>
+            disabled={disabled || loading}
+          >
+            <span className="flex min-w-0 items-center gap-3">
+              <span className="flex h-8 w-8 shrink-0 items-center justify-center rounded-full border border-slate-200/80 bg-slate-50 text-slate-600">
+                {selectedProject?.icon ? (
+                  <span className="text-base">{selectedProject.icon}</span>
+                ) : (
+                  <FolderIcon className="h-4 w-4 shrink-0 text-muted-foreground" />
+                )}
+              </span>
+              <span className="min-w-0">
+                <span className="block truncate text-sm font-medium text-slate-900">
+                  {selectedProject?.name || placeholder}
+                </span>
+                <span className="block truncate text-[11px] text-slate-500">
+                  {selectedProject?.rootPath || "选择项目后在这里查看目录"}
+                </span>
+              </span>
+              {selectedProject?.isDefault ? (
+                <StarIcon className="h-3.5 w-3.5 shrink-0 fill-yellow-500 text-yellow-500" />
               ) : (
-                <FolderIcon className="h-4 w-4 text-muted-foreground flex-shrink-0" />
-              )}
-              <span className="break-all">{project.name}</span>
-              {project.isDefault && (
-                <StarIcon className="h-3 w-3 text-yellow-500 fill-yellow-500 flex-shrink-0" />
+                <span className="sr-only">普通项目</span>
               )}
+            </span>
+            <ChevronDown className="h-4 w-4 shrink-0 opacity-60" />
+          </Button>
+        </PopoverTrigger>
+        <PopoverContent
+          side={dropdownSide}
+          align={dropdownAlign}
+          className="w-[420px] overflow-hidden rounded-[28px] border border-slate-200/80 bg-[linear-gradient(180deg,rgba(248,250,252,0.98)_0%,rgba(255,255,255,0.98)_36%,rgba(240,249,255,0.94)_100%)] p-0 shadow-lg shadow-slate-950/10"
+        >
+          <div className="flex flex-col">
+            <div className="relative border-b border-white/80 px-4 py-4">
+              <div className="pointer-events-none absolute -left-10 top-[-24px] h-24 w-24 rounded-full bg-sky-200/20 blur-3xl" />
+              <div className="pointer-events-none absolute right-[-20px] top-0 h-20 w-20 rounded-full bg-emerald-200/20 blur-3xl" />
+              <div className="relative space-y-3">
+                <div className="flex items-start justify-between gap-3">
+                  <div>
+                    <div className="text-sm font-semibold text-slate-900">
+                      选择项目
+                    </div>
+                    <div className="mt-1 text-xs leading-5 text-slate-500">
+                      在同一处切换项目、搜索项目，并管理当前可见项目列表。
+                    </div>
+                  </div>
+                  <Badge
+                    variant="outline"
+                    className="border-slate-200/80 bg-white/85 text-slate-600"
+                  >
+                    {filteredProjects.length} 个项目
+                  </Badge>
+                </div>
+
+                <div className="flex flex-wrap gap-2">
+                  {projectSummaryBadges.map((item) => (
+                    <span
+                      key={item}
+                      className="rounded-full border border-white/90 bg-white/85 px-3 py-1 text-[11px] font-medium text-slate-600 shadow-sm"
+                    >
+                      {item}
+                    </span>
+                  ))}
+                </div>
+
+                <div className="relative">
+                  <Search className="absolute left-3 top-1/2 h-4 w-4 -translate-y-1/2 text-muted-foreground" />
+                  <Input
+                    value={searchQuery}
+                    onChange={(event) => setSearchQuery(event.target.value)}
+                    placeholder="搜索项目"
+                    className="h-10 border-slate-200/80 bg-white/85 pl-9"
+                  />
+                </div>
+              </div>
             </div>
-          </SelectItem>
-        ))}
-      </SelectContent>
-    </Select>
+
+            <div className="px-4 py-4">
+              <ScrollArea className="max-h-[320px]">
+                <div className="space-y-3 pr-2">
+                {filteredProjects.length === 0 ? (
+                  <div className="rounded-[22px] border border-dashed border-slate-300/80 bg-white/80 px-4 py-8 text-center text-sm text-slate-500">
+                    未找到匹配项目
+                  </div>
+                ) : (
+                  filteredProjects.map((project) => {
+                    const isSelected = project.id === selectedProject?.id;
+                    return (
+                      <button
+                        key={project.id}
+                        type="button"
+                        onClick={() => handleSelect(project.id)}
+                        className={cn(
+                          "flex w-full items-center gap-3 rounded-[22px] border px-4 py-3 text-left transition",
+                          isSelected
+                            ? "border-slate-900/20 bg-slate-900/5 shadow-sm shadow-slate-950/5"
+                            : "border-slate-200/80 bg-white/85 hover:border-slate-300 hover:bg-white",
+                        )}
+                      >
+                        <div className="flex h-11 w-11 shrink-0 items-center justify-center rounded-[16px] border border-slate-200/80 bg-slate-50 text-slate-600">
+                          {project.icon ? (
+                            <span className="text-base">{project.icon}</span>
+                          ) : (
+                            <FolderIcon className="h-4 w-4 shrink-0 text-muted-foreground" />
+                          )}
+                        </div>
+                        <div className="min-w-0 flex-1">
+                          <div className="flex items-center gap-2">
+                            <span className="truncate font-medium text-slate-900">
+                              {project.name}
+                            </span>
+                            {project.isDefault ? (
+                              <StarIcon className="h-3.5 w-3.5 shrink-0 fill-yellow-500 text-yellow-500" />
+                            ) : null}
+                          </div>
+                          <div className="mt-1 flex flex-wrap gap-1.5">
+                            <Badge
+                              variant="outline"
+                              className="border-slate-200/80 bg-white/80 text-[10px] text-slate-600"
+                            >
+                              {getProjectTypeLabel(project.workspaceType)}
+                            </Badge>
+                            {project.tags.slice(0, 2).map((tag) => (
+                              <Badge
+                                key={tag}
+                                variant="outline"
+                                className="border-slate-200/80 bg-white/70 text-[10px] text-slate-500"
+                              >
+                                {tag}
+                              </Badge>
+                            ))}
+                          </div>
+                          <div className="mt-2 truncate text-xs text-muted-foreground">
+                            {project.rootPath}
+                          </div>
+                        </div>
+                        {isSelected ? (
+                          <div className="flex h-8 w-8 shrink-0 items-center justify-center rounded-full bg-slate-900 text-white">
+                            <Check className="h-4 w-4" />
+                          </div>
+                        ) : null}
+                      </button>
+                    );
+                  })
+                )}
+                </div>
+              </ScrollArea>
+            </div>
+
+            {enableManagement ? (
+              <div className="border-t border-white/80 px-4 py-4">
+                <div className="mb-3">
+                  <div className="text-sm font-semibold text-slate-900">
+                    项目管理
+                  </div>
+                  <div className="mt-1 text-xs leading-5 text-slate-500">
+                    当前只管理可见项目，不影响本地目录与已有文件。
+                  </div>
+                </div>
+                <div className="flex flex-wrap items-center gap-2">
+                  <Button
+                    type="button"
+                    variant="secondary"
+                    size="sm"
+                    className="h-9 gap-1.5 rounded-full bg-slate-900 text-white hover:bg-slate-800"
+                    onClick={() => {
+                      setOpen(false);
+                      setCreateDialogOpen(true);
+                    }}
+                  >
+                    <Plus className="h-3.5 w-3.5" />
+                    新建项目
+                  </Button>
+                  <Button
+                    type="button"
+                    variant="outline"
+                    size="sm"
+                    className="h-9 gap-1.5 rounded-full border-slate-200/80 bg-white"
+                    onClick={handleOpenRename}
+                    disabled={!canRenameProject(selectedProject)}
+                  >
+                    <Pencil className="h-3.5 w-3.5" />
+                    重命名
+                  </Button>
+                  <Button
+                    type="button"
+                    variant="outline"
+                    size="sm"
+                    className="h-9 gap-1.5 rounded-full border-rose-200/80 bg-rose-50/80 text-destructive hover:text-destructive"
+                    onClick={handleOpenDelete}
+                    disabled={!canDeleteProject(selectedProject)}
+                  >
+                    <Trash2 className="h-3.5 w-3.5" />
+                    删除
+                  </Button>
+                </div>
+                {managementHint ? (
+                  <p className="mt-3 text-xs text-slate-500">
+                    {managementHint}
+                  </p>
+                ) : null}
+              </div>
+            ) : null}
+          </div>
+        </PopoverContent>
+      </Popover>
+
+      <CreateProjectDialog
+        open={createDialogOpen}
+        onOpenChange={setCreateDialogOpen}
+        onSubmit={handleCreateProject}
+        defaultType={defaultProjectType}
+        allowedTypes={enableManagement ? [defaultProjectType] : undefined}
+      />
+
+      <Dialog
+        open={renameDialogOpen}
+        onOpenChange={(nextOpen) => {
+          if (!isRenaming) {
+            setRenameDialogOpen(nextOpen);
+            if (!nextOpen) {
+              setRenameTargetId(null);
+            }
+          }
+        }}
+      >
+        <DialogContent className="sm:max-w-[460px] overflow-hidden border-slate-200/80 bg-[linear-gradient(180deg,rgba(248,250,252,0.96)_0%,rgba(255,255,255,0.98)_100%)] p-0">
+          <DialogHeader className="border-b border-white/80 px-6 py-5">
+            <DialogTitle>重命名项目</DialogTitle>
+            <DialogDescription>
+              更新项目名称，不会修改本地目录路径。
+            </DialogDescription>
+          </DialogHeader>
+          <div className="px-6 py-5">
+            <Input
+              value={renameName}
+              onChange={(event) => setRenameName(event.target.value)}
+              placeholder="输入新的项目名称"
+              autoFocus
+            />
+          </div>
+          <DialogFooter className="border-t border-white/80 px-6 py-4">
+            <Button
+              type="button"
+              variant="outline"
+              className="border-slate-200/80 bg-white"
+              onClick={() => {
+                if (!isRenaming) {
+                  setRenameDialogOpen(false);
+                  setRenameTargetId(null);
+                }
+              }}
+              disabled={isRenaming}
+            >
+              取消
+            </Button>
+            <Button
+              type="button"
+              onClick={() => void handleConfirmRename()}
+              disabled={isRenaming}
+            >
+              {isRenaming ? "保存中..." : "保存"}
+            </Button>
+          </DialogFooter>
+        </DialogContent>
+      </Dialog>
+
+      <Dialog
+        open={deleteDialogOpen}
+        onOpenChange={(nextOpen) => {
+          if (!isDeleting) {
+            setDeleteDialogOpen(nextOpen);
+            if (!nextOpen) {
+              setDeleteTargetId(null);
+            }
+          }
+        }}
+      >
+        <DialogContent className="sm:max-w-[480px] overflow-hidden border-rose-200/80 bg-[linear-gradient(180deg,rgba(255,241,242,0.96)_0%,rgba(255,255,255,0.98)_100%)] p-0">
+          <DialogHeader className="border-b border-white/80 px-6 py-5">
+            <DialogTitle className="text-destructive">删除项目</DialogTitle>
+            <DialogDescription>
+              确定要删除项目
+              {deleteTarget ? `「${deleteTarget.name}」` : ""}
+              吗？
+            </DialogDescription>
+          </DialogHeader>
+          <div className="px-6 py-5">
+            <div className="rounded-[22px] border border-destructive/20 bg-destructive/5 px-4 py-4 text-sm">
+            <p className="font-medium text-destructive">此操作不可恢复</p>
+            <p className="mt-1 text-muted-foreground">
+              仅删除项目记录，不删除本地目录和已有文件。
+            </p>
+            </div>
+          </div>
+          <DialogFooter className="border-t border-white/80 px-6 py-4">
+            <Button
+              type="button"
+              variant="outline"
+              className="border-slate-200/80 bg-white"
+              onClick={() => {
+                if (!isDeleting) {
+                  setDeleteDialogOpen(false);
+                  setDeleteTargetId(null);
+                }
+              }}
+              disabled={isDeleting}
+            >
+              取消
+            </Button>
+            <Button
+              type="button"
+              variant="destructive"
+              onClick={() => void handleConfirmDelete()}
+              disabled={isDeleting}
+            >
+              {isDeleting ? "删除中..." : "删除项目"}
+            </Button>
+          </DialogFooter>
+        </DialogContent>
+      </Dialog>
+    </>
   );
 }
 
diff --git a/src/components/projects/ProjectSelector.ui.test.tsx b/src/components/projects/ProjectSelector.ui.test.tsx
new file mode 100644
index 000000000..a63adb032
--- /dev/null
+++ b/src/components/projects/ProjectSelector.ui.test.tsx
@@ -0,0 +1,342 @@
+import React from "react";
+import { act } from "react";
+import { createRoot, type Root } from "react-dom/client";
+import { afterEach, beforeEach, describe, expect, it, vi } from "vitest";
+import type { Project } from "@/types/project";
+import { ProjectSelector } from "./ProjectSelector";
+
+const {
+  mockUseProjects,
+  mockToastError,
+  mockToastSuccess,
+} = vi.hoisted(() => ({
+  mockUseProjects: vi.fn(),
+  mockToastError: vi.fn(),
+  mockToastSuccess: vi.fn(),
+}));
+
+vi.mock("sonner", () => ({
+  toast: {
+    success: mockToastSuccess,
+    error: mockToastError,
+  },
+}));
+
+vi.mock("@/hooks/useProjects", () => ({
+  useProjects: mockUseProjects,
+}));
+
+vi.mock("@/components/projects/CreateProjectDialog", () => ({
+  CreateProjectDialog: ({
+    open,
+    defaultType,
+    allowedTypes,
+  }: {
+    open: boolean;
+    defaultType?: string;
+    allowedTypes?: string[];
+  }) =>
+    open ? (
+      <div
+        data-testid="create-project-dialog"
+        data-default-type={defaultType}
+        data-allowed-types={(allowedTypes || []).join(",")}
+      />
+    ) : null,
+}));
+
+vi.mock("@/components/ui/button", () => ({
+  Button: ({
+    children,
+    onClick,
+    disabled,
+    type = "button",
+    ...rest
+  }: {
+    children: React.ReactNode;
+    onClick?: () => void;
+    disabled?: boolean;
+    type?: "button" | "submit" | "reset";
+    [key: string]: unknown;
+  }) => (
+    <button type={type} onClick={onClick} disabled={disabled} {...rest}>
+      {children}
+    </button>
+  ),
+}));
+
+vi.mock("@/components/ui/input", () => ({
+  Input: ({
+    value,
+    onChange,
+    placeholder,
+    ...rest
+  }: React.InputHTMLAttributes<HTMLInputElement>) => (
+    <input
+      value={value}
+      onChange={onChange}
+      placeholder={placeholder}
+      {...rest}
+    />
+  ),
+}));
+
+vi.mock("@/components/ui/popover", () => ({
+  Popover: ({ children }: { children: React.ReactNode }) => <div>{children}</div>,
+  PopoverContent: ({ children }: { children: React.ReactNode }) => (
+    <div>{children}</div>
+  ),
+  PopoverTrigger: ({ children }: { children: React.ReactNode }) => (
+    <div>{children}</div>
+  ),
+}));
+
+vi.mock("@/components/ui/scroll-area", () => ({
+  ScrollArea: ({ children }: { children: React.ReactNode }) => (
+    <div>{children}</div>
+  ),
+}));
+
+vi.mock("@/components/ui/dialog", () => ({
+  Dialog: ({
+    open,
+    children,
+  }: {
+    open: boolean;
+    children: React.ReactNode;
+  }) => (open ? <div>{children}</div> : null),
+  DialogContent: ({ children }: { children: React.ReactNode }) => (
+    <div>{children}</div>
+  ),
+  DialogDescription: ({ children }: { children: React.ReactNode }) => (
+    <div>{children}</div>
+  ),
+  DialogFooter: ({ children }: { children: React.ReactNode }) => (
+    <div>{children}</div>
+  ),
+  DialogHeader: ({ children }: { children: React.ReactNode }) => (
+    <div>{children}</div>
+  ),
+  DialogTitle: ({ children }: { children: React.ReactNode }) => (
+    <div>{children}</div>
+  ),
+}));
+
+function createProject(overrides: Partial<Project>): Project {
+  return {
+    id: "project-id",
+    name: "项目",
+    workspaceType: "general",
+    rootPath: "/tmp/project",
+    isDefault: false,
+    icon: undefined,
+    color: undefined,
+    isFavorite: false,
+    isArchived: false,
+    tags: [],
+    createdAt: 1,
+    updatedAt: 1,
+    ...overrides,
+  };
+}
+
+interface MountedHarness {
+  container: HTMLDivElement;
+  root: Root;
+}
+
+const mountedRoots: MountedHarness[] = [];
+
+function createUseProjectsResult(overrides?: Record<string, unknown>) {
+  return {
+    projects: [],
+    generalProjects: [],
+    filteredProjects: [],
+    defaultProject: null,
+    loading: false,
+    error: null,
+    filter: {},
+    setFilter: vi.fn(),
+    refresh: vi.fn(),
+    create: vi.fn(),
+    update: vi.fn(),
+    rename: vi.fn(),
+    remove: vi.fn(async () => true),
+    getOrCreateDefault: vi.fn(async () =>
+      createProject({
+        id: "default",
+        name: "默认项目",
+        isDefault: true,
+        workspaceType: "general",
+      }),
+    ),
+    ...overrides,
+  };
+}
+
+function renderProjectSelector(
+  props?: Partial<React.ComponentProps<typeof ProjectSelector>>,
+) {
+  const container = document.createElement("div");
+  document.body.appendChild(container);
+  const root = createRoot(container);
+
+  const defaultProps: React.ComponentProps<typeof ProjectSelector> = {
+    value: "default",
+    onChange: vi.fn(),
+    workspaceType: "general",
+    enableManagement: true,
+  };
+
+  act(() => {
+    root.render(<ProjectSelector {...defaultProps} {...props} />);
+  });
+
+  mountedRoots.push({ container, root });
+  return container;
+}
+
+function findButton(
+  container: HTMLElement,
+  text: string,
+): HTMLButtonElement | null {
+  return (
+    Array.from(container.querySelectorAll("button")).find((button) =>
+      button.textContent?.includes(text),
+    ) || null
+  ) as HTMLButtonElement | null;
+}
+
+async function flushAsync() {
+  await act(async () => {
+    await Promise.resolve();
+  });
+}
+
+beforeEach(() => {
+  (
+    globalThis as typeof globalThis & {
+      IS_REACT_ACT_ENVIRONMENT?: boolean;
+    }
+  ).IS_REACT_ACT_ENVIRONMENT = true;
+  vi.clearAllMocks();
+});
+
+afterEach(() => {
+  while (mountedRoots.length > 0) {
+    const mounted = mountedRoots.pop();
+    if (!mounted) break;
+    act(() => {
+      mounted.root.unmount();
+    });
+    mounted.container.remove();
+  }
+  vi.clearAllMocks();
+});
+
+describe("ProjectSelector 组件", () => {
+  it("默认项目在管理模式下不可重命名或删除", () => {
+    const defaultProject = createProject({
+      id: "default",
+      name: "默认项目",
+      isDefault: true,
+      workspaceType: "general",
+    });
+    const generalProject = createProject({
+      id: "general-1",
+      name: "通用项目",
+      workspaceType: "general",
+    });
+
+    mockUseProjects.mockReturnValue(
+      createUseProjectsResult({
+        projects: [defaultProject, generalProject],
+        generalProjects: [defaultProject, generalProject],
+        defaultProject,
+      }),
+    );
+
+    const container = renderProjectSelector({
+      value: defaultProject.id,
+      workspaceType: "general",
+      enableManagement: true,
+    });
+
+    expect(findButton(container, "重命名")?.disabled).toBe(true);
+    expect(findButton(container, "删除")?.disabled).toBe(true);
+    expect(container.textContent).toContain("默认项目不可重命名或删除");
+  });
+
+  it("删除当前项目后应回退到默认项目", async () => {
+    const onChange = vi.fn();
+    const remove = vi.fn(async () => true);
+    const defaultProject = createProject({
+      id: "default",
+      name: "默认项目",
+      isDefault: true,
+      workspaceType: "general",
+    });
+    const generalProject = createProject({
+      id: "general-1",
+      name: "通用项目",
+      workspaceType: "general",
+    });
+
+    mockUseProjects.mockReturnValue(
+      createUseProjectsResult({
+        projects: [defaultProject, generalProject],
+        generalProjects: [defaultProject, generalProject],
+        defaultProject,
+        remove,
+      }),
+    );
+
+    const container = renderProjectSelector({
+      value: generalProject.id,
+      workspaceType: "general",
+      enableManagement: true,
+      onChange,
+    });
+
+    act(() => {
+      findButton(container, "删除")?.click();
+    });
+    await flushAsync();
+
+    await act(async () => {
+      findButton(container, "删除项目")?.click();
+      await Promise.resolve();
+    });
+    await flushAsync();
+
+    expect(remove).toHaveBeenCalledWith(generalProject.id);
+    expect(onChange).toHaveBeenCalledWith(defaultProject.id);
+  });
+
+  it("未启用管理模式时不显示管理操作区", () => {
+    const defaultProject = createProject({
+      id: "default",
+      name: "默认项目",
+      isDefault: true,
+      workspaceType: "general",
+    });
+
+    mockUseProjects.mockReturnValue(
+      createUseProjectsResult({
+        projects: [defaultProject],
+        generalProjects: [defaultProject],
+        defaultProject,
+      }),
+    );
+
+    const container = renderProjectSelector({
+      value: defaultProject.id,
+      workspaceType: "general",
+      enableManagement: false,
+    });
+
+    expect(findButton(container, "新建项目")).toBeNull();
+    expect(findButton(container, "重命名")).toBeNull();
+    expect(findButton(container, "删除")).toBeNull();
+  });
+});
diff --git a/src/components/projects/editor/EditorToolbar.tsx b/src/components/projects/editor/EditorToolbar.tsx
index a2fff36c5..6f2488251 100644
--- a/src/components/projects/editor/EditorToolbar.tsx
+++ b/src/components/projects/editor/EditorToolbar.tsx
@@ -22,7 +22,6 @@ import {
   Redo,
 } from "lucide-react";
 import { Button } from "@/components/ui/button";
-import { Separator } from "@/components/ui/separator";
 import { cn } from "@/lib/utils";
 
 interface EditorToolbarProps {
@@ -38,117 +37,141 @@ export function EditorToolbar({ editor, className }: EditorToolbarProps) {
   return (
     <div
       className={cn(
-        "flex items-center gap-1 p-2 border-b bg-muted/30 flex-wrap",
+        "border-b border-slate-200/80 bg-white/70 px-4 py-4 backdrop-blur-sm lg:px-5",
         className,
       )}
     >
-      {/* 撤销/重做 */}
-      <ToolbarButton
-        onClick={() => editor.chain().focus().undo().run()}
-        disabled={!editor.can().undo()}
-        title="撤销"
-      >
-        <Undo className="h-4 w-4" />
-      </ToolbarButton>
-      <ToolbarButton
-        onClick={() => editor.chain().focus().redo().run()}
-        disabled={!editor.can().redo()}
-        title="重做"
-      >
-        <Redo className="h-4 w-4" />
-      </ToolbarButton>
+      <div className="mb-3 flex items-center justify-between gap-3">
+        <div>
+          <div className="text-sm font-semibold text-slate-900">编辑工具</div>
+          <div className="text-xs leading-5 text-slate-500">
+            快速切换常用格式，保持章节排版和结构一致。
+          </div>
+        </div>
+      </div>
 
-      <Separator orientation="vertical" className="h-6 mx-1" />
+      <div className="flex flex-wrap items-center gap-2">
+        <ToolbarGroup label="历史">
+          <ToolbarButton
+            onClick={() => editor.chain().focus().undo().run()}
+            disabled={!editor.can().undo()}
+            title="撤销"
+          >
+            <Undo className="h-4 w-4" />
+          </ToolbarButton>
+          <ToolbarButton
+            onClick={() => editor.chain().focus().redo().run()}
+            disabled={!editor.can().redo()}
+            title="重做"
+          >
+            <Redo className="h-4 w-4" />
+          </ToolbarButton>
+        </ToolbarGroup>
 
-      {/* 文本格式 */}
-      <ToolbarButton
-        onClick={() => editor.chain().focus().toggleBold().run()}
-        active={editor.isActive("bold")}
-        title="加粗"
-      >
-        <Bold className="h-4 w-4" />
-      </ToolbarButton>
-      <ToolbarButton
-        onClick={() => editor.chain().focus().toggleItalic().run()}
-        active={editor.isActive("italic")}
-        title="斜体"
-      >
-        <Italic className="h-4 w-4" />
-      </ToolbarButton>
-      <ToolbarButton
-        onClick={() => editor.chain().focus().toggleStrike().run()}
-        active={editor.isActive("strike")}
-        title="删除线"
-      >
-        <Strikethrough className="h-4 w-4" />
-      </ToolbarButton>
-      <ToolbarButton
-        onClick={() => editor.chain().focus().toggleCode().run()}
-        active={editor.isActive("code")}
-        title="行内代码"
-      >
-        <Code className="h-4 w-4" />
-      </ToolbarButton>
+        <ToolbarGroup label="文本">
+          <ToolbarButton
+            onClick={() => editor.chain().focus().toggleBold().run()}
+            active={editor.isActive("bold")}
+            title="加粗"
+          >
+            <Bold className="h-4 w-4" />
+          </ToolbarButton>
+          <ToolbarButton
+            onClick={() => editor.chain().focus().toggleItalic().run()}
+            active={editor.isActive("italic")}
+            title="斜体"
+          >
+            <Italic className="h-4 w-4" />
+          </ToolbarButton>
+          <ToolbarButton
+            onClick={() => editor.chain().focus().toggleStrike().run()}
+            active={editor.isActive("strike")}
+            title="删除线"
+          >
+            <Strikethrough className="h-4 w-4" />
+          </ToolbarButton>
+          <ToolbarButton
+            onClick={() => editor.chain().focus().toggleCode().run()}
+            active={editor.isActive("code")}
+            title="行内代码"
+          >
+            <Code className="h-4 w-4" />
+          </ToolbarButton>
+        </ToolbarGroup>
 
-      <Separator orientation="vertical" className="h-6 mx-1" />
+        <ToolbarGroup label="标题">
+          <ToolbarButton
+            onClick={() => editor.chain().focus().toggleHeading({ level: 1 }).run()}
+            active={editor.isActive("heading", { level: 1 })}
+            title="标题 1"
+          >
+            <Heading1 className="h-4 w-4" />
+          </ToolbarButton>
+          <ToolbarButton
+            onClick={() => editor.chain().focus().toggleHeading({ level: 2 }).run()}
+            active={editor.isActive("heading", { level: 2 })}
+            title="标题 2"
+          >
+            <Heading2 className="h-4 w-4" />
+          </ToolbarButton>
+          <ToolbarButton
+            onClick={() => editor.chain().focus().toggleHeading({ level: 3 }).run()}
+            active={editor.isActive("heading", { level: 3 })}
+            title="标题 3"
+          >
+            <Heading3 className="h-4 w-4" />
+          </ToolbarButton>
+        </ToolbarGroup>
 
-      {/* 标题 */}
-      <ToolbarButton
-        onClick={() => editor.chain().focus().toggleHeading({ level: 1 }).run()}
-        active={editor.isActive("heading", { level: 1 })}
-        title="标题 1"
-      >
-        <Heading1 className="h-4 w-4" />
-      </ToolbarButton>
-      <ToolbarButton
-        onClick={() => editor.chain().focus().toggleHeading({ level: 2 }).run()}
-        active={editor.isActive("heading", { level: 2 })}
-        title="标题 2"
-      >
-        <Heading2 className="h-4 w-4" />
-      </ToolbarButton>
-      <ToolbarButton
-        onClick={() => editor.chain().focus().toggleHeading({ level: 3 }).run()}
-        active={editor.isActive("heading", { level: 3 })}
-        title="标题 3"
-      >
-        <Heading3 className="h-4 w-4" />
-      </ToolbarButton>
+        <ToolbarGroup label="列表">
+          <ToolbarButton
+            onClick={() => editor.chain().focus().toggleBulletList().run()}
+            active={editor.isActive("bulletList")}
+            title="无序列表"
+          >
+            <List className="h-4 w-4" />
+          </ToolbarButton>
+          <ToolbarButton
+            onClick={() => editor.chain().focus().toggleOrderedList().run()}
+            active={editor.isActive("orderedList")}
+            title="有序列表"
+          >
+            <ListOrdered className="h-4 w-4" />
+          </ToolbarButton>
+        </ToolbarGroup>
 
-      <Separator orientation="vertical" className="h-6 mx-1" />
+        <ToolbarGroup label="结构">
+          <ToolbarButton
+            onClick={() => editor.chain().focus().toggleBlockquote().run()}
+            active={editor.isActive("blockquote")}
+            title="引用"
+          >
+            <Quote className="h-4 w-4" />
+          </ToolbarButton>
+          <ToolbarButton
+            onClick={() => editor.chain().focus().setHorizontalRule().run()}
+            title="分隔线"
+          >
+            <Minus className="h-4 w-4" />
+          </ToolbarButton>
+        </ToolbarGroup>
+      </div>
+    </div>
+  );
+}
 
-      {/* 列表 */}
-      <ToolbarButton
-        onClick={() => editor.chain().focus().toggleBulletList().run()}
-        active={editor.isActive("bulletList")}
-        title="无序列表"
-      >
-        <List className="h-4 w-4" />
-      </ToolbarButton>
-      <ToolbarButton
-        onClick={() => editor.chain().focus().toggleOrderedList().run()}
-        active={editor.isActive("orderedList")}
-        title="有序列表"
-      >
-        <ListOrdered className="h-4 w-4" />
-      </ToolbarButton>
+interface ToolbarGroupProps {
+  label: string;
+  children: React.ReactNode;
+}
 
-      <Separator orientation="vertical" className="h-6 mx-1" />
-
-      {/* 其他 */}
-      <ToolbarButton
-        onClick={() => editor.chain().focus().toggleBlockquote().run()}
-        active={editor.isActive("blockquote")}
-        title="引用"
-      >
-        <Quote className="h-4 w-4" />
-      </ToolbarButton>
-      <ToolbarButton
-        onClick={() => editor.chain().focus().setHorizontalRule().run()}
-        title="分隔线"
-      >
-        <Minus className="h-4 w-4" />
-      </ToolbarButton>
+function ToolbarGroup({ label, children }: ToolbarGroupProps) {
+  return (
+    <div className="flex items-center gap-2 rounded-full border border-slate-200/80 bg-white/90 p-1 pr-2 shadow-sm shadow-slate-950/5">
+      <span className="pl-2 text-[11px] font-medium text-slate-400">
+        {label}
+      </span>
+      <div className="flex items-center gap-1">{children}</div>
     </div>
   );
 }
@@ -173,7 +196,10 @@ function ToolbarButton({
     <Button
       variant="ghost"
       size="icon"
-      className={cn("h-8 w-8", active && "bg-accent text-accent-foreground")}
+      className={cn(
+        "h-8 w-8 rounded-full text-slate-600 hover:bg-slate-100 hover:text-slate-900",
+        active && "bg-slate-900 text-white hover:bg-slate-800 hover:text-white",
+      )}
       onClick={onClick}
       disabled={disabled}
       title={title}
diff --git a/src/components/projects/memory/CharacterPanel.tsx b/src/components/projects/memory/CharacterPanel.tsx
index 595d5330b..d946053a0 100644
--- a/src/components/projects/memory/CharacterPanel.tsx
+++ b/src/components/projects/memory/CharacterPanel.tsx
@@ -14,6 +14,7 @@ import {
   Star,
   User,
 } from "lucide-react";
+import { Badge } from "@/components/ui/badge";
 import { Button } from "@/components/ui/button";
 import { Input } from "@/components/ui/input";
 import { Label } from "@/components/ui/label";
@@ -183,188 +184,335 @@ export function CharacterPanel({ projectId }: CharacterPanelProps) {
   // 分离主角和配角
   const mainCharacters = characters.filter((c) => c.is_main);
   const sideCharacters = characters.filter((c) => !c.is_main);
+  const describedCharacters = characters.filter((c) =>
+    Boolean(c.description?.trim()),
+  ).length;
+  const summaryCards = [
+    {
+      label: "角色总数",
+      value: String(characters.length),
+      description: "项目内已经建立的角色资料卡",
+    },
+    {
+      label: "主要角色",
+      value: String(mainCharacters.length),
+      description:
+        mainCharacters.length > 0 ? "剧情主线已有核心角色" : "还没有标记主要角色",
+    },
+    {
+      label: "已写简介",
+      value: String(describedCharacters),
+      description:
+        describedCharacters > 0 ? "已有角色具备基础人物描述" : "建议先补角色简介与定位",
+    },
+  ];
+  const topBadges = [
+    characters.length > 0 ? "角色库已建立" : "待建立角色库",
+    mainCharacters.length > 0 ? `${mainCharacters.length} 位主角` : "暂无主角",
+    sideCharacters.length > 0 ? `${sideCharacters.length} 位配角` : "暂无配角",
+  ];
 
   return (
-    <div className="flex flex-col h-full">
-      {/* 工具栏 */}
-      <div className="flex items-center justify-between mb-4">
-        <div className="text-sm text-muted-foreground">
-          共 {characters.length} 个角色
-        </div>
-        <div className="flex items-center gap-2">
-          <Button
-            variant="ghost"
-            size="icon"
-            onClick={loadCharacters}
-            disabled={loading}
-          >
-            <RefreshCw className={cn("h-4 w-4", loading && "animate-spin")} />
-          </Button>
-          <Button onClick={handleOpenCreate}>
-            <Plus className="h-4 w-4 mr-2" />
-            新建角色
-          </Button>
-        </div>
-      </div>
-
-      {/* 角色列表 */}
-      <div className="flex-1 overflow-auto">
-        {loading ? (
-          <div className="flex items-center justify-center h-40">
-            <RefreshCw className="h-6 w-6 animate-spin text-muted-foreground" />
-          </div>
-        ) : characters.length === 0 ? (
-          <div className="flex flex-col items-center justify-center h-40 text-muted-foreground">
-            <User className="h-12 w-12 mb-4 opacity-50" />
-            <p className="mb-4">还没有角色</p>
-            <Button onClick={handleOpenCreate}>创建第一个角色</Button>
-          </div>
-        ) : (
-          <div className="space-y-6">
-            {/* 主角 */}
-            {mainCharacters.length > 0 && (
-              <div>
-                <h3 className="text-sm font-medium text-muted-foreground mb-3 flex items-center gap-2">
-                  <Star className="h-4 w-4" />
-                  主要角色
-                </h3>
-                <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4">
-                  {mainCharacters.map((character) => (
-                    <CharacterCard
-                      key={character.id}
-                      character={character}
-                      onEdit={() => handleOpenEdit(character)}
-                      onDelete={() => handleDelete(character)}
-                    />
-                  ))}
+    <div className="mx-auto w-full max-w-6xl space-y-5 pb-6">
+      <section className="relative overflow-hidden rounded-[30px] border border-amber-200/70 bg-[linear-gradient(135deg,rgba(255,251,235,0.95)_0%,rgba(255,255,255,0.98)_42%,rgba(239,246,255,0.96)_100%)] shadow-sm shadow-slate-950/5">
+        <div className="pointer-events-none absolute -left-14 top-[-44px] h-44 w-44 rounded-full bg-amber-200/25 blur-3xl" />
+        <div className="pointer-events-none absolute right-[-52px] top-[-16px] h-44 w-44 rounded-full bg-sky-200/25 blur-3xl" />
+        <div className="relative flex flex-col gap-6 p-6 lg:p-7">
+          <div className="flex flex-col gap-6 xl:flex-row xl:items-start xl:justify-between">
+            <div className="max-w-3xl space-y-4">
+              <div className="flex items-center gap-2 text-slate-500">
+                <User className="h-4 w-4" />
+                <span className="text-sm">项目角色系统</span>
+              </div>
+              <div className="space-y-2">
+                <div className="text-2xl font-semibold tracking-tight text-slate-900">
+                  角色、关系与叙事职能
+                </div>
+                <div className="text-sm leading-6 text-slate-600">
+                  先建立角色档案，再逐步补全性格、背景与外貌，避免人物信息散落在章节正文里。
                 </div>
               </div>
-            )}
-
-            {/* 配角 */}
-            {sideCharacters.length > 0 && (
-              <div>
-                <h3 className="text-sm font-medium text-muted-foreground mb-3 flex items-center gap-2">
-                  <User className="h-4 w-4" />
-                  次要角色
-                </h3>
-                <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4">
-                  {sideCharacters.map((character) => (
-                    <CharacterCard
-                      key={character.id}
-                      character={character}
-                      onEdit={() => handleOpenEdit(character)}
-                      onDelete={() => handleDelete(character)}
-                    />
-                  ))}
-                </div>
+              <div className="flex flex-wrap gap-2">
+                {topBadges.map((item) => (
+                  <span
+                    key={item}
+                    className="rounded-full border border-white/90 bg-white/85 px-3 py-1 text-xs font-medium text-slate-600 shadow-sm"
+                  >
+                    {item}
+                  </span>
+                ))}
               </div>
-            )}
+            </div>
+
+            <div className="flex flex-col gap-4 xl:min-w-[420px] xl:items-end">
+              <div className="flex flex-wrap items-center gap-2 lg:justify-end">
+                <Button
+                  variant="ghost"
+                  size="icon"
+                  onClick={loadCharacters}
+                  disabled={loading}
+                >
+                  <RefreshCw
+                    className={cn("h-4 w-4", loading && "animate-spin")}
+                  />
+                </Button>
+                <Button onClick={handleOpenCreate}>
+                  <Plus className="mr-2 h-4 w-4" />
+                  新建角色
+                </Button>
+              </div>
+
+              <div className="grid gap-3 sm:grid-cols-3 xl:w-full">
+                {summaryCards.map((item) => (
+                  <div
+                    key={item.label}
+                    className="rounded-[22px] border border-white/90 bg-white/88 p-4 shadow-sm shadow-slate-950/5"
+                  >
+                    <div className="text-sm font-semibold text-slate-800">
+                      {item.label}
+                    </div>
+                    <div className="mt-1 text-xs leading-5 text-slate-500">
+                      {item.description}
+                    </div>
+                    <div className="mt-4 text-3xl font-semibold tracking-tight text-slate-900">
+                      {item.value}
+                    </div>
+                  </div>
+                ))}
+              </div>
+            </div>
           </div>
-        )}
-      </div>
+        </div>
+      </section>
+
+      {loading ? (
+        <div className="flex h-48 items-center justify-center rounded-[28px] border border-slate-200/80 bg-white/92 shadow-sm shadow-slate-950/5">
+          <RefreshCw className="h-6 w-6 animate-spin text-slate-400" />
+        </div>
+      ) : characters.length === 0 ? (
+        <div className="flex min-h-[300px] flex-col items-center justify-center rounded-[28px] border border-dashed border-slate-300/80 bg-white/92 px-6 text-center text-slate-500 shadow-sm shadow-slate-950/5">
+          <div className="flex h-16 w-16 items-center justify-center rounded-full bg-slate-100 text-slate-400">
+            <User className="h-7 w-7" />
+          </div>
+          <div className="mt-5 space-y-2">
+            <div className="text-base font-medium text-slate-800">
+              还没有角色档案
+            </div>
+            <p className="max-w-md text-sm leading-6">
+              先创建主要角色，再把配角、别名和人物设定逐步补齐，后续章节创作会更稳定。
+            </p>
+          </div>
+          <Button onClick={handleOpenCreate} className="mt-5">
+            创建第一个角色
+          </Button>
+        </div>
+      ) : (
+        <div className="space-y-5">
+          {mainCharacters.length > 0 && (
+            <section className="rounded-[28px] border border-slate-200/80 bg-white/92 p-5 shadow-sm shadow-slate-950/5">
+              <div className="mb-4 flex items-center justify-between gap-3">
+                <div>
+                  <div className="flex items-center gap-2 text-sm font-semibold text-slate-900">
+                    <Star className="h-4 w-4 text-amber-500" />
+                    主要角色
+                  </div>
+                  <div className="mt-1 text-xs leading-5 text-slate-500">
+                    承担主线叙事、关键冲突或视角输出的核心人物。
+                  </div>
+                </div>
+                <Badge
+                  variant="outline"
+                  className="border-amber-200/80 bg-amber-50 text-amber-700"
+                >
+                  {mainCharacters.length} 位
+                </Badge>
+              </div>
+              <div className="grid gap-4 md:grid-cols-2 xl:grid-cols-3">
+                {mainCharacters.map((character) => (
+                  <CharacterCard
+                    key={character.id}
+                    character={character}
+                    onEdit={() => handleOpenEdit(character)}
+                    onDelete={() => handleDelete(character)}
+                  />
+                ))}
+              </div>
+            </section>
+          )}
+
+          {sideCharacters.length > 0 && (
+            <section className="rounded-[28px] border border-slate-200/80 bg-white/92 p-5 shadow-sm shadow-slate-950/5">
+              <div className="mb-4 flex items-center justify-between gap-3">
+                <div>
+                  <div className="flex items-center gap-2 text-sm font-semibold text-slate-900">
+                    <User className="h-4 w-4 text-sky-500" />
+                    次要角色
+                  </div>
+                  <div className="mt-1 text-xs leading-5 text-slate-500">
+                    补充世界关系、推进局部情节和丰富人物网络的辅助角色。
+                  </div>
+                </div>
+                <Badge
+                  variant="outline"
+                  className="border-sky-200/80 bg-sky-50 text-sky-700"
+                >
+                  {sideCharacters.length} 位
+                </Badge>
+              </div>
+              <div className="grid gap-4 md:grid-cols-2 xl:grid-cols-3">
+                {sideCharacters.map((character) => (
+                  <CharacterCard
+                    key={character.id}
+                    character={character}
+                    onEdit={() => handleOpenEdit(character)}
+                    onDelete={() => handleDelete(character)}
+                  />
+                ))}
+              </div>
+            </section>
+          )}
+        </div>
+      )}
 
       {/* 新建/编辑对话框 */}
       <Dialog open={dialogOpen} onOpenChange={setDialogOpen}>
-        <DialogContent className="max-w-2xl">
-          <DialogHeader>
-            <DialogTitle>
+        <DialogContent className="max-h-[92vh] max-w-4xl overflow-hidden border-slate-200/80 bg-[linear-gradient(180deg,rgba(255,251,235,0.92)_0%,rgba(255,255,255,0.98)_34%,rgba(248,250,252,0.96)_100%)] p-0">
+          <DialogHeader className="border-b border-white/80 px-6 py-5">
+            <DialogTitle className="text-left text-lg text-slate-900">
               {editingCharacter ? "编辑角色" : "新建角色"}
             </DialogTitle>
+            <p className="text-sm leading-6 text-slate-600">
+              用统一的人物卡结构补齐名称、人物定位与背景信息，后续章节与风格生成会直接消费这些事实。
+            </p>
           </DialogHeader>
 
-          <div className="grid gap-4 py-4 max-h-[60vh] overflow-auto">
-            <div className="grid grid-cols-2 gap-4">
-              <div className="space-y-2">
-                <Label htmlFor="name">角色名称 *</Label>
-                <Input
-                  id="name"
-                  value={formData.name}
-                  onChange={(e) =>
-                    setFormData({ ...formData, name: e.target.value })
-                  }
-                  placeholder="输入角色名称"
-                />
-              </div>
-              <div className="space-y-2">
-                <Label htmlFor="aliases">别名（逗号分隔）</Label>
-                <Input
-                  id="aliases"
-                  value={formData.aliases}
-                  onChange={(e) =>
-                    setFormData({ ...formData, aliases: e.target.value })
-                  }
-                  placeholder="小明, 阿明"
-                />
+          <div className="grid max-h-[72vh] gap-5 overflow-auto p-5 lg:grid-cols-[1.1fr_0.9fr]">
+            <div className="space-y-5">
+              <div className="rounded-[24px] border border-white/90 bg-white/88 p-5 shadow-sm shadow-slate-950/5">
+                <div className="grid gap-4 md:grid-cols-2">
+                  <div className="space-y-2">
+                    <Label htmlFor="name">角色名称 *</Label>
+                    <Input
+                      id="name"
+                      value={formData.name}
+                      onChange={(e) =>
+                        setFormData({ ...formData, name: e.target.value })
+                      }
+                      placeholder="输入角色名称"
+                    />
+                  </div>
+                  <div className="space-y-2">
+                    <Label htmlFor="aliases">别名（逗号分隔）</Label>
+                    <Input
+                      id="aliases"
+                      value={formData.aliases}
+                      onChange={(e) =>
+                        setFormData({ ...formData, aliases: e.target.value })
+                      }
+                      placeholder="小明, 阿明"
+                    />
+                  </div>
+                </div>
+
+                <div className="mt-4 rounded-[20px] border border-slate-200/80 bg-slate-50/70 px-4 py-3">
+                  <div className="flex items-center justify-between gap-3">
+                    <div>
+                      <div className="text-sm font-medium text-slate-900">
+                        角色定位
+                      </div>
+                      <div className="text-xs leading-5 text-slate-500">
+                        主要角色通常会出现在主线冲突、关键视角或章节推进中。
+                      </div>
+                    </div>
+                    <div className="flex items-center gap-2">
+                      <Switch
+                        id="is_main"
+                        checked={formData.is_main}
+                        onCheckedChange={(checked) =>
+                          setFormData({ ...formData, is_main: checked })
+                        }
+                      />
+                      <Label htmlFor="is_main">主要角色</Label>
+                    </div>
+                  </div>
+                </div>
+
+                <div className="mt-4 space-y-2">
+                  <Label htmlFor="description">角色简介</Label>
+                  <Textarea
+                    id="description"
+                    value={formData.description}
+                    onChange={(e) =>
+                      setFormData({ ...formData, description: e.target.value })
+                    }
+                    placeholder="简要描述这个角色"
+                    rows={3}
+                  />
+                </div>
+
+                <div className="mt-4 space-y-2">
+                  <Label htmlFor="background">背景故事</Label>
+                  <Textarea
+                    id="background"
+                    value={formData.background}
+                    onChange={(e) =>
+                      setFormData({ ...formData, background: e.target.value })
+                    }
+                    placeholder="角色的背景故事"
+                    rows={5}
+                  />
+                </div>
               </div>
             </div>
 
-            <div className="flex items-center gap-2">
-              <Switch
-                id="is_main"
-                checked={formData.is_main}
-                onCheckedChange={(checked) =>
-                  setFormData({ ...formData, is_main: checked })
-                }
-              />
-              <Label htmlFor="is_main">主要角色</Label>
-            </div>
+            <div className="space-y-5">
+              <div className="rounded-[24px] border border-white/90 bg-white/88 p-5 shadow-sm shadow-slate-950/5">
+                <div className="space-y-2">
+                  <Label htmlFor="personality">性格特点</Label>
+                  <Textarea
+                    id="personality"
+                    value={formData.personality}
+                    onChange={(e) =>
+                      setFormData({ ...formData, personality: e.target.value })
+                    }
+                    placeholder="描述角色的性格特点"
+                    rows={4}
+                  />
+                </div>
 
-            <div className="space-y-2">
-              <Label htmlFor="description">角色简介</Label>
-              <Textarea
-                id="description"
-                value={formData.description}
-                onChange={(e) =>
-                  setFormData({ ...formData, description: e.target.value })
-                }
-                placeholder="简要描述这个角色"
-                rows={2}
-              />
-            </div>
+                <div className="mt-4 space-y-2">
+                  <Label htmlFor="appearance">外貌描述</Label>
+                  <Textarea
+                    id="appearance"
+                    value={formData.appearance}
+                    onChange={(e) =>
+                      setFormData({ ...formData, appearance: e.target.value })
+                    }
+                    placeholder="角色的外貌特征"
+                    rows={4}
+                  />
+                </div>
+              </div>
 
-            <div className="space-y-2">
-              <Label htmlFor="personality">性格特点</Label>
-              <Textarea
-                id="personality"
-                value={formData.personality}
-                onChange={(e) =>
-                  setFormData({ ...formData, personality: e.target.value })
-                }
-                placeholder="描述角色的性格特点"
-                rows={2}
-              />
-            </div>
-
-            <div className="space-y-2">
-              <Label htmlFor="background">背景故事</Label>
-              <Textarea
-                id="background"
-                value={formData.background}
-                onChange={(e) =>
-                  setFormData({ ...formData, background: e.target.value })
-                }
-                placeholder="角色的背景故事"
-                rows={3}
-              />
-            </div>
-
-            <div className="space-y-2">
-              <Label htmlFor="appearance">外貌描述</Label>
-              <Textarea
-                id="appearance"
-                value={formData.appearance}
-                onChange={(e) =>
-                  setFormData({ ...formData, appearance: e.target.value })
-                }
-                placeholder="角色的外貌特征"
-                rows={2}
-              />
+              <div className="rounded-[24px] border border-slate-200/80 bg-[linear-gradient(180deg,rgba(248,250,252,0.9)_0%,rgba(255,255,255,0.98)_100%)] p-5 shadow-sm shadow-slate-950/5">
+                <div className="text-sm font-semibold text-slate-900">
+                  录入建议
+                </div>
+                <div className="mt-2 space-y-2 text-xs leading-5 text-slate-500">
+                  <p>角色简介写清人物在故事中的作用，而不是只写情绪词。</p>
+                  <p>背景故事尽量保留事实信息，避免把剧情评价混进角色档案。</p>
+                  <p>别名用于统一称呼和检索，建议控制在常用称呼范围内。</p>
+                </div>
+              </div>
             </div>
           </div>
 
-          <DialogFooter>
-            <Button variant="outline" onClick={() => setDialogOpen(false)}>
+          <DialogFooter className="border-t border-white/80 px-6 py-4">
+            <Button
+              variant="outline"
+              className="border-slate-200/80 bg-white"
+              onClick={() => setDialogOpen(false)}
+            >
               取消
             </Button>
             <Button onClick={handleSave} disabled={saving}>
@@ -386,29 +534,41 @@ interface CharacterCardProps {
 
 function CharacterCard({ character, onEdit, onDelete }: CharacterCardProps) {
   return (
-    <div className="bg-card border rounded-lg p-4 hover:shadow-md transition-shadow">
-      <div className="flex items-start justify-between mb-2">
+    <div className="group h-full rounded-[24px] border border-slate-200/80 bg-[linear-gradient(180deg,rgba(255,255,255,0.98)_0%,rgba(248,250,252,0.96)_100%)] p-4 shadow-sm shadow-slate-950/5 transition hover:-translate-y-0.5 hover:shadow-md">
+      <div className="flex items-start justify-between gap-3">
         <div className="flex items-center gap-2">
-          <div className="w-10 h-10 rounded-full bg-primary/10 flex items-center justify-center">
-            <User className="h-5 w-5 text-primary" />
+          <div className="flex h-11 w-11 items-center justify-center rounded-[16px] border border-slate-200/80 bg-slate-50 text-slate-600">
+            <User className="h-5 w-5" />
           </div>
-          <div>
-            <h4 className="font-medium flex items-center gap-1">
+          <div className="min-w-0">
+            <h4 className="flex items-center gap-1 text-sm font-semibold text-slate-900">
               {character.name}
               {character.is_main && (
                 <Star className="h-3 w-3 text-yellow-500 fill-yellow-500" />
               )}
             </h4>
             {character.aliases.length > 0 && (
-              <p className="text-xs text-muted-foreground">
-                {character.aliases.join(", ")}
-              </p>
+              <div className="mt-1 flex flex-wrap gap-1">
+                {character.aliases.slice(0, 3).map((alias) => (
+                  <Badge
+                    key={alias}
+                    variant="outline"
+                    className="border-slate-200/80 bg-white text-[10px] text-slate-600"
+                  >
+                    {alias}
+                  </Badge>
+                ))}
+              </div>
             )}
           </div>
         </div>
         <DropdownMenu>
           <DropdownMenuTrigger asChild>
-            <Button variant="ghost" size="icon" className="h-8 w-8">
+            <Button
+              variant="ghost"
+              size="icon"
+              className="h-8 w-8 rounded-full text-slate-500"
+            >
               <MoreHorizontal className="h-4 w-4" />
             </Button>
           </DropdownMenuTrigger>
@@ -430,17 +590,37 @@ function CharacterCard({ character, onEdit, onDelete }: CharacterCardProps) {
       </div>
 
       {character.description && (
-        <p className="text-sm text-muted-foreground line-clamp-2">
+        <p className="mt-4 line-clamp-3 text-sm leading-6 text-slate-600">
           {character.description}
         </p>
       )}
 
-      {character.personality && (
-        <div className="mt-2">
-          <span className="text-xs text-muted-foreground">性格：</span>
-          <span className="text-xs">{character.personality}</span>
-        </div>
-      )}
+      <div className="mt-4 space-y-3">
+        {character.personality && (
+          <div className="rounded-[18px] border border-slate-200/80 bg-white/90 px-3 py-2">
+            <span className="text-[11px] font-medium text-slate-400">性格</span>
+            <p className="mt-1 line-clamp-2 text-xs leading-5 text-slate-600">
+              {character.personality}
+            </p>
+          </div>
+        )}
+        {character.background && (
+          <div className="rounded-[18px] border border-slate-200/80 bg-white/90 px-3 py-2">
+            <span className="text-[11px] font-medium text-slate-400">背景</span>
+            <p className="mt-1 line-clamp-2 text-xs leading-5 text-slate-600">
+              {character.background}
+            </p>
+          </div>
+        )}
+        {character.appearance && (
+          <div className="rounded-[18px] border border-slate-200/80 bg-white/90 px-3 py-2">
+            <span className="text-[11px] font-medium text-slate-400">外貌</span>
+            <p className="mt-1 line-clamp-2 text-xs leading-5 text-slate-600">
+              {character.appearance}
+            </p>
+          </div>
+        )}
+      </div>
     </div>
   );
 }
diff --git a/src/components/projects/memory/OutlinePanel.tsx b/src/components/projects/memory/OutlinePanel.tsx
index 5913971c5..f442624c4 100644
--- a/src/components/projects/memory/OutlinePanel.tsx
+++ b/src/components/projects/memory/OutlinePanel.tsx
@@ -18,6 +18,7 @@ import {
   ArrowDown,
   FileText,
 } from "lucide-react";
+import { Badge } from "@/components/ui/badge";
 import { Button } from "@/components/ui/button";
 import { Input } from "@/components/ui/input";
 import { Label } from "@/components/ui/label";
@@ -224,46 +225,148 @@ export function OutlinePanel({ projectId }: OutlinePanelProps) {
       toast.error("移动失败");
     }
   };
+  const rootNodeCount = nodes.filter((node) => !node.parent_id).length;
+  const leafNodeCount = nodes.filter(
+    (node) => !nodes.some((candidate) => candidate.parent_id === node.id),
+  ).length;
+  const topBadges = [
+    nodes.length > 0 ? `${nodes.length} 个大纲节点` : "待建立结构骨架",
+    rootNodeCount > 0 ? `${rootNodeCount} 个一级节点` : "暂无一级节点",
+    expandedNodes.size > 0 ? `已展开 ${expandedNodes.size} 个节点` : "未展开节点",
+  ];
+  const summaryCards = [
+    {
+      label: "节点总数",
+      value: String(nodes.length),
+      description: "当前项目已经建立的结构节点总量",
+    },
+    {
+      label: "一级节点",
+      value: String(rootNodeCount),
+      description:
+        rootNodeCount > 0 ? "顶层章节或结构块已建立" : "还没有主结构节点",
+    },
+    {
+      label: "叶子节点",
+      value: String(leafNodeCount),
+      description:
+        leafNodeCount > 0 ? "已有可继续扩写的末端节点" : "当前还没有叶子节点",
+    },
+  ];
 
   return (
-    <div className="flex flex-col h-full">
-      {/* 工具栏 */}
-      <div className="flex items-center justify-between mb-4">
-        <div className="text-sm text-muted-foreground">
-          共 {nodes.length} 个节点
-        </div>
-        <div className="flex items-center gap-2">
-          <Button
-            variant="ghost"
-            size="icon"
-            onClick={loadNodes}
-            disabled={loading}
-          >
-            <RefreshCw className={cn("h-4 w-4", loading && "animate-spin")} />
-          </Button>
-          <Button onClick={() => handleOpenCreate(null)}>
-            <Plus className="h-4 w-4 mr-2" />
-            新建节点
-          </Button>
-        </div>
-      </div>
+    <div className="mx-auto w-full max-w-6xl space-y-5 pb-6">
+      <section className="relative overflow-hidden rounded-[30px] border border-slate-200/80 bg-[linear-gradient(135deg,rgba(248,250,252,0.98)_0%,rgba(255,255,255,0.98)_44%,rgba(254,249,195,0.85)_100%)] shadow-sm shadow-slate-950/5">
+        <div className="pointer-events-none absolute -left-14 top-[-42px] h-44 w-44 rounded-full bg-slate-200/25 blur-3xl" />
+        <div className="pointer-events-none absolute right-[-46px] top-[-16px] h-44 w-44 rounded-full bg-amber-200/20 blur-3xl" />
+        <div className="relative flex flex-col gap-6 p-6 lg:p-7">
+          <div className="flex flex-col gap-6 xl:flex-row xl:items-start xl:justify-between">
+            <div className="max-w-3xl space-y-4">
+              <div className="flex items-center gap-2 text-slate-500">
+                <FileText className="h-4 w-4" />
+                <span className="text-sm">项目结构骨架</span>
+              </div>
+              <div className="space-y-2">
+                <div className="text-2xl font-semibold tracking-tight text-slate-900">
+                  大纲层级与章节骨架
+                </div>
+                <div className="text-sm leading-6 text-slate-600">
+                  先把顶层结构和子节点关系搭出来，再让具体内容沿着同一棵树扩写，避免章节散掉。
+                </div>
+              </div>
+              <div className="flex flex-wrap gap-2">
+                {topBadges.map((item) => (
+                  <span
+                    key={item}
+                    className="rounded-full border border-white/90 bg-white/85 px-3 py-1 text-xs font-medium text-slate-600 shadow-sm"
+                  >
+                    {item}
+                  </span>
+                ))}
+              </div>
+            </div>
 
-      {/* 大纲树 */}
-      <div className="flex-1 overflow-auto">
-        {loading ? (
-          <div className="flex items-center justify-center h-40">
-            <RefreshCw className="h-6 w-6 animate-spin text-muted-foreground" />
+            <div className="flex flex-col gap-4 xl:min-w-[420px] xl:items-end">
+              <div className="flex flex-wrap items-center gap-2 lg:justify-end">
+                <Button
+                  variant="ghost"
+                  size="icon"
+                  onClick={loadNodes}
+                  disabled={loading}
+                >
+                  <RefreshCw
+                    className={cn("h-4 w-4", loading && "animate-spin")}
+                  />
+                </Button>
+                <Button onClick={() => handleOpenCreate(null)}>
+                  <Plus className="mr-2 h-4 w-4" />
+                  新建节点
+                </Button>
+              </div>
+
+              <div className="grid gap-3 sm:grid-cols-3 xl:w-full">
+                {summaryCards.map((item) => (
+                  <div
+                    key={item.label}
+                    className="rounded-[22px] border border-white/90 bg-white/88 p-4 shadow-sm shadow-slate-950/5"
+                  >
+                    <div className="text-sm font-semibold text-slate-800">
+                      {item.label}
+                    </div>
+                    <div className="mt-1 text-xs leading-5 text-slate-500">
+                      {item.description}
+                    </div>
+                    <div className="mt-4 text-3xl font-semibold tracking-tight text-slate-900">
+                      {item.value}
+                    </div>
+                  </div>
+                ))}
+              </div>
+            </div>
           </div>
-        ) : tree.length === 0 ? (
-          <div className="flex flex-col items-center justify-center h-40 text-muted-foreground">
-            <FileText className="h-12 w-12 mb-4 opacity-50" />
-            <p className="mb-4">还没有大纲</p>
-            <Button onClick={() => handleOpenCreate(null)}>
-              创建第一个节点
-            </Button>
+        </div>
+      </section>
+
+      {loading ? (
+        <div className="flex h-48 items-center justify-center rounded-[28px] border border-slate-200/80 bg-white/92 shadow-sm shadow-slate-950/5">
+          <RefreshCw className="h-6 w-6 animate-spin text-slate-400" />
+        </div>
+      ) : tree.length === 0 ? (
+        <div className="flex min-h-[300px] flex-col items-center justify-center rounded-[28px] border border-dashed border-slate-300/80 bg-white/92 px-6 text-center text-slate-500 shadow-sm shadow-slate-950/5">
+          <div className="flex h-16 w-16 items-center justify-center rounded-full bg-slate-100 text-slate-400">
+            <FileText className="h-7 w-7" />
           </div>
-        ) : (
-          <div className="space-y-1">
+          <div className="mt-5 space-y-2">
+            <div className="text-base font-medium text-slate-800">
+              还没有大纲节点
+            </div>
+            <p className="max-w-md text-sm leading-6">
+              先建立一级节点，再逐步补出子节点和节点内容，项目结构会更容易持续扩写。
+            </p>
+          </div>
+          <Button onClick={() => handleOpenCreate(null)} className="mt-5">
+            创建第一个节点
+          </Button>
+        </div>
+      ) : (
+        <section className="rounded-[28px] border border-slate-200/80 bg-white/92 p-5 shadow-sm shadow-slate-950/5">
+          <div className="mb-4 flex flex-col gap-2 lg:flex-row lg:items-center lg:justify-between">
+            <div>
+              <div className="text-sm font-semibold text-slate-900">
+                结构树
+              </div>
+              <div className="mt-1 text-xs leading-5 text-slate-500">
+                支持继续加子节点、调整顺序和修改节点内容；缩进层级会直接反映父子关系。
+              </div>
+            </div>
+            <Badge
+              variant="outline"
+              className="w-fit border-slate-200/80 bg-slate-50 text-slate-600"
+            >
+              结构视图
+            </Badge>
+          </div>
+          <div className="space-y-3">
             {tree.map((node) => (
               <OutlineTreeItem
                 key={node.id}
@@ -279,45 +382,67 @@ export function OutlinePanel({ projectId }: OutlinePanelProps) {
               />
             ))}
           </div>
-        )}
-      </div>
+        </section>
+      )}
 
       {/* 新建/编辑对话框 */}
       <Dialog open={dialogOpen} onOpenChange={setDialogOpen}>
-        <DialogContent>
-          <DialogHeader>
-            <DialogTitle>{editingNode ? "编辑节点" : "新建节点"}</DialogTitle>
+        <DialogContent className="max-h-[92vh] max-w-3xl overflow-hidden border-slate-200/80 bg-[linear-gradient(180deg,rgba(248,250,252,0.96)_0%,rgba(255,255,255,0.98)_38%,rgba(255,251,235,0.92)_100%)] p-0">
+          <DialogHeader className="border-b border-white/80 px-6 py-5">
+            <DialogTitle className="text-left text-lg text-slate-900">
+              {editingNode ? "编辑节点" : "新建节点"}
+            </DialogTitle>
+            <p className="text-sm leading-6 text-slate-600">
+              节点标题负责表达结构，节点内容负责补充章节目标、冲突或场景说明。
+            </p>
           </DialogHeader>
 
-          <div className="grid gap-4 py-4">
-            <div className="space-y-2">
-              <Label htmlFor="title">节点标题 *</Label>
-              <Input
-                id="title"
-                value={formData.title}
-                onChange={(e) =>
-                  setFormData({ ...formData, title: e.target.value })
-                }
-                placeholder="输入节点标题"
-              />
+          <div className="grid max-h-[70vh] gap-5 overflow-auto p-5">
+            <div className="rounded-[24px] border border-white/90 bg-white/88 p-5 shadow-sm shadow-slate-950/5">
+              <div className="space-y-2">
+                <Label htmlFor="title">节点标题 *</Label>
+                <Input
+                  id="title"
+                  value={formData.title}
+                  onChange={(e) =>
+                    setFormData({ ...formData, title: e.target.value })
+                  }
+                  placeholder="输入节点标题"
+                />
+              </div>
+
+              <div className="mt-4 space-y-2">
+                <Label htmlFor="content">节点内容</Label>
+                <Textarea
+                  id="content"
+                  value={formData.content}
+                  onChange={(e) =>
+                    setFormData({ ...formData, content: e.target.value })
+                  }
+                  placeholder="输入节点内容或描述"
+                  rows={8}
+                />
+              </div>
             </div>
 
-            <div className="space-y-2">
-              <Label htmlFor="content">节点内容</Label>
-              <Textarea
-                id="content"
-                value={formData.content}
-                onChange={(e) =>
-                  setFormData({ ...formData, content: e.target.value })
-                }
-                placeholder="输入节点内容或描述"
-                rows={4}
-              />
+            <div className="rounded-[24px] border border-slate-200/80 bg-[linear-gradient(180deg,rgba(248,250,252,0.88)_0%,rgba(255,255,255,0.98)_100%)] p-5 shadow-sm shadow-slate-950/5">
+              <div className="text-sm font-semibold text-slate-900">
+                录入建议
+              </div>
+              <div className="mt-2 space-y-2 text-xs leading-5 text-slate-500">
+                <p>标题尽量写成章节动作或结构目的，而不是笼统名词。</p>
+                <p>节点内容适合记录冲突、目标、节奏点或关键转折。</p>
+                <p>子节点应该比父节点更具体，避免层级看起来一样平。</p>
+              </div>
             </div>
           </div>
 
-          <DialogFooter>
-            <Button variant="outline" onClick={() => setDialogOpen(false)}>
+          <DialogFooter className="border-t border-white/80 px-6 py-4">
+            <Button
+              variant="outline"
+              className="border-slate-200/80 bg-white"
+              onClick={() => setDialogOpen(false)}
+            >
               取消
             </Button>
             <Button onClick={handleSave} disabled={saving}>
@@ -358,86 +483,124 @@ function OutlineTreeItem({
   const isExpanded = expandedNodes.has(node.id);
 
   return (
-    <div>
+    <div className="space-y-3">
       <div
         className={cn(
-          "flex items-center gap-1 py-1.5 px-2 rounded hover:bg-accent/50 group",
-          level > 0 && "ml-4",
+          "group rounded-[22px] border border-slate-200/80 bg-[linear-gradient(180deg,rgba(255,255,255,0.98)_0%,rgba(248,250,252,0.95)_100%)] p-3 shadow-sm shadow-slate-950/5 transition hover:shadow-md",
+          level > 0 && "bg-slate-50/80",
         )}
-        style={{ paddingLeft: `${level * 16 + 8}px` }}
+        style={{ marginLeft: `${level * 18}px` }}
       >
-        {/* 展开/折叠按钮 */}
-        <button
-          onClick={() => onToggleExpand(node.id)}
-          className={cn(
-            "p-0.5 rounded hover:bg-accent",
-            !hasChildren && "invisible",
-          )}
-        >
-          {isExpanded ? (
-            <ChevronDown className="h-4 w-4" />
-          ) : (
-            <ChevronRight className="h-4 w-4" />
-          )}
-        </button>
-
-        {/* 拖拽手柄 */}
-        <GripVertical className="h-4 w-4 text-muted-foreground opacity-0 group-hover:opacity-100 cursor-grab" />
-
-        {/* 标题 */}
-        <span className="flex-1 text-sm truncate">{node.title}</span>
-
-        {/* 操作按钮 */}
-        <div className="flex items-center gap-1 opacity-0 group-hover:opacity-100">
-          <Button
-            variant="ghost"
-            size="icon"
-            className="h-6 w-6"
-            onClick={() => onMoveUp(node)}
-            title="上移"
+        <div className="flex items-start gap-3">
+          <button
+            onClick={() => {
+              if (hasChildren) {
+                onToggleExpand(node.id);
+              }
+            }}
+            className={cn(
+              "mt-1 flex h-8 w-8 items-center justify-center rounded-full border border-slate-200/80 bg-white text-slate-500 transition hover:bg-slate-50",
+              !hasChildren && "cursor-default opacity-60",
+            )}
           >
-            <ArrowUp className="h-3 w-3" />
-          </Button>
-          <Button
-            variant="ghost"
-            size="icon"
-            className="h-6 w-6"
-            onClick={() => onMoveDown(node)}
-            title="下移"
-          >
-            <ArrowDown className="h-3 w-3" />
-          </Button>
-          <DropdownMenu>
-            <DropdownMenuTrigger asChild>
-              <Button variant="ghost" size="icon" className="h-6 w-6">
-                <MoreHorizontal className="h-4 w-4" />
-              </Button>
-            </DropdownMenuTrigger>
-            <DropdownMenuContent align="end">
-              <DropdownMenuItem onClick={() => onEdit(node)}>
-                <Edit2 className="h-4 w-4 mr-2" />
-                编辑
-              </DropdownMenuItem>
-              <DropdownMenuItem onClick={() => onAddChild(node.id)}>
-                <Plus className="h-4 w-4 mr-2" />
-                添加子节点
-              </DropdownMenuItem>
-              <DropdownMenuSeparator />
-              <DropdownMenuItem
-                onClick={() => onDelete(node)}
-                className="text-destructive focus:text-destructive"
+            {hasChildren ? (
+              isExpanded ? (
+                <ChevronDown className="h-4 w-4" />
+              ) : (
+                <ChevronRight className="h-4 w-4" />
+              )
+            ) : (
+              <GripVertical className="h-4 w-4" />
+            )}
+          </button>
+
+          <div className="flex h-10 w-10 items-center justify-center rounded-[16px] border border-slate-200/80 bg-slate-50 text-slate-600">
+            <FileText className="h-4 w-4" />
+          </div>
+
+          <div className="min-w-0 flex-1">
+            <div className="flex flex-wrap items-center gap-2">
+              <span className="truncate text-sm font-semibold text-slate-900">
+                {node.title}
+              </span>
+              <Badge
+                variant="outline"
+                className="border-slate-200/80 bg-white text-[10px] text-slate-600"
               >
-                <Trash2 className="h-4 w-4 mr-2" />
-                删除
-              </DropdownMenuItem>
-            </DropdownMenuContent>
-          </DropdownMenu>
+                层级 {level + 1}
+              </Badge>
+              <Badge
+                variant="outline"
+                className="border-slate-200/80 bg-white text-[10px] text-slate-600"
+              >
+                {hasChildren ? `${node.children.length} 个子节点` : "叶子节点"}
+              </Badge>
+            </div>
+            {node.content ? (
+              <p className="mt-2 line-clamp-2 text-xs leading-5 text-slate-500">
+                {node.content}
+              </p>
+            ) : (
+              <p className="mt-2 text-xs leading-5 text-slate-400">
+                暂无节点内容，可补充章节目标、冲突或关键说明。
+              </p>
+            )}
+          </div>
+
+          <div className="flex items-center gap-1 opacity-0 transition group-hover:opacity-100">
+            <Button
+              variant="ghost"
+              size="icon"
+              className="h-8 w-8 rounded-full text-slate-500"
+              onClick={() => onMoveUp(node)}
+              title="上移"
+            >
+              <ArrowUp className="h-3.5 w-3.5" />
+            </Button>
+            <Button
+              variant="ghost"
+              size="icon"
+              className="h-8 w-8 rounded-full text-slate-500"
+              onClick={() => onMoveDown(node)}
+              title="下移"
+            >
+              <ArrowDown className="h-3.5 w-3.5" />
+            </Button>
+            <DropdownMenu>
+              <DropdownMenuTrigger asChild>
+                <Button
+                  variant="ghost"
+                  size="icon"
+                  className="h-8 w-8 rounded-full text-slate-500"
+                >
+                  <MoreHorizontal className="h-4 w-4" />
+                </Button>
+              </DropdownMenuTrigger>
+              <DropdownMenuContent align="end">
+                <DropdownMenuItem onClick={() => onEdit(node)}>
+                  <Edit2 className="mr-2 h-4 w-4" />
+                  编辑
+                </DropdownMenuItem>
+                <DropdownMenuItem onClick={() => onAddChild(node.id)}>
+                  <Plus className="mr-2 h-4 w-4" />
+                  添加子节点
+                </DropdownMenuItem>
+                <DropdownMenuSeparator />
+                <DropdownMenuItem
+                  onClick={() => onDelete(node)}
+                  className="text-destructive focus:text-destructive"
+                >
+                  <Trash2 className="mr-2 h-4 w-4" />
+                  删除
+                </DropdownMenuItem>
+              </DropdownMenuContent>
+            </DropdownMenu>
+          </div>
         </div>
       </div>
 
-      {/* 子节点 */}
       {hasChildren && isExpanded && (
-        <div>
+        <div className="space-y-3">
           {node.children.map((child) => (
             <OutlineTreeItem
               key={child.id}
diff --git a/src/components/projects/memory/ProjectMemoryPanels.test.tsx b/src/components/projects/memory/ProjectMemoryPanels.test.tsx
new file mode 100644
index 000000000..230077445
--- /dev/null
+++ b/src/components/projects/memory/ProjectMemoryPanels.test.tsx
@@ -0,0 +1,192 @@
+import { afterEach, beforeEach, describe, expect, it, vi } from "vitest";
+import {
+  cleanupMountedRoots,
+  flushEffects,
+  mountHarness,
+  setupReactActEnvironment,
+  type MountedRoot,
+} from "@/components/workspace/hooks/testUtils";
+import { CharacterPanel } from "./CharacterPanel";
+import { WorldBuildingPanel } from "./WorldBuildingPanel";
+import { OutlinePanel } from "./OutlinePanel";
+
+const {
+  mockListCharacters,
+  mockCreateCharacter,
+  mockUpdateCharacter,
+  mockDeleteCharacter,
+  mockGetWorldBuilding,
+  mockUpdateWorldBuilding,
+  mockListOutlineNodes,
+  mockCreateOutlineNode,
+  mockUpdateOutlineNode,
+  mockDeleteOutlineNode,
+} = vi.hoisted(() => ({
+  mockListCharacters: vi.fn(),
+  mockCreateCharacter: vi.fn(),
+  mockUpdateCharacter: vi.fn(),
+  mockDeleteCharacter: vi.fn(),
+  mockGetWorldBuilding: vi.fn(),
+  mockUpdateWorldBuilding: vi.fn(),
+  mockListOutlineNodes: vi.fn(),
+  mockCreateOutlineNode: vi.fn(),
+  mockUpdateOutlineNode: vi.fn(),
+  mockDeleteOutlineNode: vi.fn(),
+}));
+
+vi.mock("sonner", () => ({
+  toast: {
+    success: vi.fn(),
+    error: vi.fn(),
+  },
+}));
+
+vi.mock("@/lib/api/memory", () => ({
+  listCharacters: mockListCharacters,
+  createCharacter: mockCreateCharacter,
+  updateCharacter: mockUpdateCharacter,
+  deleteCharacter: mockDeleteCharacter,
+  getWorldBuilding: mockGetWorldBuilding,
+  updateWorldBuilding: mockUpdateWorldBuilding,
+  listOutlineNodes: mockListOutlineNodes,
+  createOutlineNode: mockCreateOutlineNode,
+  updateOutlineNode: mockUpdateOutlineNode,
+  deleteOutlineNode: mockDeleteOutlineNode,
+  buildOutlineTree: vi.fn((nodes: Array<Record<string, unknown>>) => {
+    const byId = new Map(
+      nodes.map((node) => [String(node.id), { ...node, children: [] as Array<Record<string, unknown>> }]),
+    );
+
+    const roots: Array<Record<string, unknown>> = [];
+    byId.forEach((node) => {
+      const parentId =
+        typeof node.parent_id === "string" ? node.parent_id : undefined;
+      if (parentId && byId.has(parentId)) {
+        const parent = byId.get(parentId);
+        parent?.children.push(node);
+        return;
+      }
+      roots.push(node);
+    });
+
+    return roots;
+  }),
+}));
+
+setupReactActEnvironment();
+
+const mountedRoots: MountedRoot[] = [];
+
+describe("ProjectMemoryPanels", () => {
+  beforeEach(() => {
+    mockListCharacters.mockResolvedValue([
+      {
+        id: "character-1",
+        project_id: "project-1",
+        name: "林岚",
+        aliases: ["岚姐"],
+        description: "冷静的调查记者，负责追查主线事件。",
+        personality: "克制、敏锐、有压迫感",
+        background: "曾在地方报社工作，后独立调查。",
+        appearance: "短发，常穿深色风衣。",
+        relationships: [],
+        is_main: true,
+        order: 0,
+        created_at: "2026-03-01T00:00:00.000Z",
+        updated_at: "2026-03-01T00:00:00.000Z",
+      },
+    ]);
+
+    mockGetWorldBuilding.mockResolvedValue({
+      project_id: "project-1",
+      description: "一座依靠旧工业遗迹维持运转的沿海城市。",
+      era: "近未来工业衰退期",
+      locations: "旧港区、地下档案库",
+      rules: "能源与媒体都被少数财团垄断。",
+      updated_at: "2026-03-01T00:00:00.000Z",
+    });
+
+    mockListOutlineNodes.mockResolvedValue([
+      {
+        id: "node-1",
+        project_id: "project-1",
+        title: "第一幕",
+        content: "建立主角与核心冲突。",
+        order: 0,
+        expanded: true,
+        created_at: "2026-03-01T00:00:00.000Z",
+        updated_at: "2026-03-01T00:00:00.000Z",
+      },
+      {
+        id: "node-2",
+        project_id: "project-1",
+        parent_id: "node-1",
+        title: "冲突升级",
+        content: "主角发现媒体造假与能源事故有关。",
+        order: 1,
+        expanded: true,
+        created_at: "2026-03-01T00:00:00.000Z",
+        updated_at: "2026-03-01T00:00:00.000Z",
+      },
+    ]);
+
+    mockCreateCharacter.mockResolvedValue(undefined);
+    mockUpdateCharacter.mockResolvedValue(undefined);
+    mockDeleteCharacter.mockResolvedValue(undefined);
+    mockUpdateWorldBuilding.mockResolvedValue(undefined);
+    mockCreateOutlineNode.mockResolvedValue(undefined);
+    mockUpdateOutlineNode.mockResolvedValue(undefined);
+    mockDeleteOutlineNode.mockResolvedValue(undefined);
+  });
+
+  afterEach(() => {
+    cleanupMountedRoots(mountedRoots);
+    vi.clearAllMocks();
+  });
+
+  it("CharacterPanel 应渲染新的角色工作台摘要", async () => {
+    const { container } = mountHarness(
+      CharacterPanel,
+      { projectId: "project-1" },
+      mountedRoots,
+    );
+
+    await flushEffects();
+
+    const text = container.textContent ?? "";
+    expect(text).toContain("角色、关系与叙事职能");
+    expect(text).toContain("主要角色");
+    expect(text).toContain("林岚");
+  });
+
+  it("WorldBuildingPanel 应渲染新的世界观工作台摘要", async () => {
+    const { container } = mountHarness(
+      WorldBuildingPanel,
+      { projectId: "project-1" },
+      mountedRoots,
+    );
+
+    await flushEffects();
+
+    const text = container.textContent ?? "";
+    expect(text).toContain("世界观、时代与运行规则");
+    expect(text).toContain("已填写模块");
+    expect(text).toContain("沿海城市");
+  });
+
+  it("OutlinePanel 应渲染新的大纲结构工作台", async () => {
+    const { container } = mountHarness(
+      OutlinePanel,
+      { projectId: "project-1" },
+      mountedRoots,
+    );
+
+    await flushEffects();
+
+    const text = container.textContent ?? "";
+    expect(text).toContain("大纲层级与章节骨架");
+    expect(text).toContain("结构树");
+    expect(text).toContain("第一幕");
+    expect(text).toContain("冲突升级");
+  });
+});
diff --git a/src/components/projects/memory/StyleGuidePanel.tsx b/src/components/projects/memory/StyleGuidePanel.tsx
index d804c35de..ba0d47959 100644
--- a/src/components/projects/memory/StyleGuidePanel.tsx
+++ b/src/components/projects/memory/StyleGuidePanel.tsx
@@ -14,6 +14,7 @@ import {
 import {
   FileEdit,
   Gauge,
+  CheckCircle2,
   LibraryBig,
   Layers3,
   Palette,
@@ -350,9 +351,46 @@ export function StyleGuidePanel({
       buildStylePromptFromProfile(previewProfile, {
         title: "### 写作风格",
         includeExamples: true,
-      }),
+    }),
     [previewProfile],
   );
+  const summaryStats = useMemo(
+    () => [
+      {
+        label: "风格类别",
+        value: getStyleCategoryLabel(previewProfile.category),
+        description: "项目默认风格当前归属的表达类型",
+      },
+      {
+        label: "适用主题",
+        value: String(previewProfile.applicableThemes.length || 1),
+        description:
+          previewProfile.applicableThemes.length > 0
+            ? previewProfile.applicableThemes.join(" / ")
+            : "通用创作",
+      },
+      {
+        label: "模拟强度",
+        value: String(previewProfile.simulationStrength),
+        description: hasChanges ? "当前有未保存的风格变更" : "当前内容已与保存状态同步",
+      },
+    ],
+    [hasChanges, previewProfile],
+  );
+  const topBadges = useMemo(
+    () =>
+      [
+        previewProfile.name || formData.profileName,
+        hasChanges ? "未保存变更" : "已同步",
+        highlightSourceEntryId ? "来自风格资产回流" : "项目内独立维护",
+      ].filter(Boolean),
+    [
+      formData.profileName,
+      hasChanges,
+      highlightSourceEntryId,
+      previewProfile.name,
+    ],
+  );
 
   const loadStyleGuide = useCallback(async () => {
     setLoading(true);
@@ -477,52 +515,92 @@ export function StyleGuidePanel({
   return (
     <>
       <div className="mx-auto w-full max-w-6xl space-y-5 pb-6">
-        <Card className="border bg-card">
-          <CardContent className="flex flex-col gap-4 p-5 lg:flex-row lg:items-start lg:justify-between">
-            <div className="space-y-2">
-              <div className="flex items-center gap-2 text-muted-foreground">
-                <FileEdit className="h-4 w-4" />
-                <span className="text-sm">项目风格系统</span>
+        <section className="relative overflow-hidden rounded-[30px] border border-amber-200/70 bg-[linear-gradient(135deg,rgba(255,250,240,0.96)_0%,rgba(248,250,252,0.98)_46%,rgba(241,246,255,0.96)_100%)] shadow-sm shadow-slate-950/5">
+          <div className="pointer-events-none absolute -left-16 top-[-56px] h-48 w-48 rounded-full bg-amber-200/30 blur-3xl" />
+          <div className="pointer-events-none absolute right-[-60px] top-[-22px] h-48 w-48 rounded-full bg-sky-200/25 blur-3xl" />
+          <div className="relative flex flex-col gap-6 p-6 lg:p-7">
+            <div className="flex flex-col gap-6 xl:flex-row xl:items-start xl:justify-between">
+              <div className="max-w-3xl space-y-4">
+                <div className="flex items-center gap-2 text-slate-500">
+                  <FileEdit className="h-4 w-4" />
+                  <span className="text-sm">项目风格系统</span>
+                </div>
+                <div className="space-y-2">
+                  <div className="text-2xl font-semibold tracking-tight text-slate-900">
+                    统一项目表达方式
+                  </div>
+                  <div className="text-sm leading-6 text-slate-600">
+                    先选预设或导入风格资产，再按项目需要微调，避免整页信息同时抢注意力。
+                  </div>
+                </div>
+
+                <div className="flex flex-wrap gap-2">
+                  {topBadges.map((item) => (
+                    <span
+                      key={item}
+                      className="rounded-full border border-white/90 bg-white/85 px-3 py-1 text-xs font-medium text-slate-600 shadow-sm"
+                    >
+                      {item}
+                    </span>
+                  ))}
+                </div>
               </div>
-              <div>
-                <div className="text-lg font-semibold">统一项目表达方式</div>
-                <div className="mt-1 text-sm text-muted-foreground">
-                  先选预设或导入风格资产，再按项目需要微调，避免整页信息同时抢注意力。
+
+              <div className="flex flex-col gap-4 xl:min-w-[420px] xl:items-end">
+                <div className="flex flex-wrap items-center gap-2 lg:justify-end">
+                  <Button
+                    variant="outline"
+                    onClick={() => setStyleLibraryDialogOpen(true)}
+                  >
+                    <LibraryBig className="mr-2 h-4 w-4" />
+                    从我的风格库导入
+                  </Button>
+                  <Button
+                    variant="ghost"
+                    size="icon"
+                    onClick={loadStyleGuide}
+                    disabled={loading}
+                  >
+                    <RefreshCw
+                      className={cn("h-4 w-4", loading && "animate-spin")}
+                    />
+                  </Button>
+                  <Button onClick={handleSave} disabled={saving || !hasChanges}>
+                    <Save className="mr-2 h-4 w-4" />
+                    {saving ? "保存中..." : "保存"}
+                  </Button>
+                </div>
+
+                <div className="grid gap-3 sm:grid-cols-3 xl:w-full">
+                  {summaryStats.map((item) => (
+                    <div
+                      key={item.label}
+                      className="rounded-[22px] border border-white/90 bg-white/88 p-4 shadow-sm shadow-slate-950/5"
+                    >
+                      <div className="text-sm font-semibold text-slate-800">
+                        {item.label}
+                      </div>
+                      <div className="mt-1 text-xs leading-5 text-slate-500">
+                        {item.description}
+                      </div>
+                      <div className="mt-4 text-3xl font-semibold tracking-tight text-slate-900">
+                        {item.value}
+                      </div>
+                    </div>
+                  ))}
                 </div>
               </div>
             </div>
-
-            <div className="flex flex-wrap items-center gap-2 lg:justify-end">
-              <Button
-                variant="outline"
-                onClick={() => setStyleLibraryDialogOpen(true)}
-              >
-                <LibraryBig className="mr-2 h-4 w-4" />
-                从我的风格库导入
-              </Button>
-              <Button
-                variant="ghost"
-                size="icon"
-                onClick={loadStyleGuide}
-                disabled={loading}
-              >
-                <RefreshCw
-                  className={cn("h-4 w-4", loading && "animate-spin")}
-                />
-              </Button>
-              <Button onClick={handleSave} disabled={saving || !hasChanges}>
-                <Save className="mr-2 h-4 w-4" />
-                {saving ? "保存中..." : "保存"}
-              </Button>
-            </div>
-          </CardContent>
-        </Card>
+          </div>
+        </section>
 
         {highlightSourceEntryId ? (
-          <Card className="border border-violet-200 bg-violet-50/60 dark:border-violet-900/60 dark:bg-violet-950/20">
+          <Card className="rounded-[26px] border border-sky-200/70 bg-[linear-gradient(180deg,rgba(239,246,255,0.82)_0%,rgba(255,255,255,0.96)_40%,rgba(255,255,255,1)_100%)] shadow-sm shadow-slate-950/5">
             <CardHeader className="pb-3">
-              <CardTitle className="text-base">来源风格资产</CardTitle>
-              <CardDescription>
+              <CardTitle className="text-base text-slate-900">
+                来源风格资产
+              </CardTitle>
+              <CardDescription className="text-slate-600">
                 你是从“最近应用项目”回到这里的，可直接对来源资产重新导入或对照当前项目策略。
               </CardDescription>
             </CardHeader>
@@ -544,7 +622,7 @@ export function StyleGuidePanel({
                         </Badge>
                       ))}
                   </div>
-                  <div className="text-sm text-muted-foreground">
+                  <div className="rounded-[20px] border border-white/90 bg-white/90 px-4 py-4 text-sm leading-6 text-slate-600">
                     {highlightedSourceEntry.profile.description ||
                       "该来源资产尚未填写整体风格定位。"}
                   </div>
@@ -566,7 +644,7 @@ export function StyleGuidePanel({
                   </div>
                 </>
               ) : (
-                <div className="text-sm text-muted-foreground">
+                <div className="rounded-[20px] border border-dashed border-slate-300 px-4 py-6 text-sm text-slate-500">
                   该来源风格资产当前不可用，可能已被删除；你仍可以继续编辑当前项目风格策略。
                 </div>
               )}
@@ -574,13 +652,13 @@ export function StyleGuidePanel({
           </Card>
         ) : null}
 
-        <Card className="border bg-card">
+        <Card className="rounded-[26px] border border-slate-200/80 bg-white shadow-sm shadow-slate-950/5">
           <CardHeader className="pb-3">
-            <CardTitle className="flex items-center gap-2 text-base">
+            <CardTitle className="flex items-center gap-2 text-base text-slate-900">
               <Sparkles className="h-4 w-4" />
               风格预设与模拟
             </CardTitle>
-            <CardDescription>
+            <CardDescription className="text-slate-600">
               先用预设打底，再按项目需要微调。预设不会覆盖你的事实内容，只会帮助统一表达方式。
             </CardDescription>
           </CardHeader>
@@ -591,10 +669,15 @@ export function StyleGuidePanel({
                   key={preset.id}
                   type="button"
                   onClick={() => handleApplyPreset(preset.id)}
-                  className="flex min-h-[92px] flex-col rounded-xl border px-4 py-3 text-left transition-colors hover:bg-muted/50"
+                  className="flex min-h-[104px] flex-col rounded-[22px] border border-slate-200/80 bg-[linear-gradient(180deg,rgba(255,255,255,0.98)_0%,rgba(248,250,252,0.98)_100%)] px-4 py-3 text-left shadow-sm shadow-slate-950/5 transition hover:-translate-y-0.5 hover:border-slate-300 hover:shadow-md"
                 >
-                  <div className="text-sm font-medium">{preset.name}</div>
-                  <div className="mt-2 line-clamp-2 text-xs text-muted-foreground">
+                  <div className="flex items-center justify-between gap-2">
+                    <div className="text-sm font-semibold text-slate-900">
+                      {preset.name}
+                    </div>
+                    <Wand2 className="h-4 w-4 text-slate-400" />
+                  </div>
+                  <div className="mt-2 line-clamp-2 text-xs leading-5 text-slate-500">
                     {preset.description}
                   </div>
                 </button>
@@ -604,30 +687,45 @@ export function StyleGuidePanel({
         </Card>
 
         <Tabs defaultValue="overview" className="w-full space-y-4">
-          <TabsList className="grid h-auto w-full grid-cols-2 gap-2 rounded-xl bg-muted/50 p-1 md:grid-cols-5">
-            <TabsTrigger value="overview" className="gap-1 rounded-lg py-2">
+          <TabsList className="grid h-auto w-full grid-cols-2 gap-2 rounded-[22px] border border-slate-200/80 bg-white p-1 shadow-sm shadow-slate-950/5 md:grid-cols-5">
+            <TabsTrigger
+              value="overview"
+              className="gap-1 rounded-[18px] py-2 data-[state=active]:bg-slate-900 data-[state=active]:text-white data-[state=active]:shadow-sm"
+            >
               <Palette className="h-3.5 w-3.5" />
               概览
             </TabsTrigger>
-            <TabsTrigger value="tone" className="gap-1 rounded-lg py-2">
+            <TabsTrigger
+              value="tone"
+              className="gap-1 rounded-[18px] py-2 data-[state=active]:bg-slate-900 data-[state=active]:text-white data-[state=active]:shadow-sm"
+            >
               <Gauge className="h-3.5 w-3.5" />
               语气
             </TabsTrigger>
-            <TabsTrigger value="structure" className="gap-1 rounded-lg py-2">
+            <TabsTrigger
+              value="structure"
+              className="gap-1 rounded-[18px] py-2 data-[state=active]:bg-slate-900 data-[state=active]:text-white data-[state=active]:shadow-sm"
+            >
               <Layers3 className="h-3.5 w-3.5" />
               结构
             </TabsTrigger>
-            <TabsTrigger value="lexicon" className="gap-1 rounded-lg py-2">
+            <TabsTrigger
+              value="lexicon"
+              className="gap-1 rounded-[18px] py-2 data-[state=active]:bg-slate-900 data-[state=active]:text-white data-[state=active]:shadow-sm"
+            >
               <Type className="h-3.5 w-3.5" />
               词汇
             </TabsTrigger>
-            <TabsTrigger value="preview" className="gap-1 rounded-lg py-2">
+            <TabsTrigger
+              value="preview"
+              className="gap-1 rounded-[18px] py-2 data-[state=active]:bg-slate-900 data-[state=active]:text-white data-[state=active]:shadow-sm"
+            >
               <Wand2 className="h-3.5 w-3.5" />
               预览
             </TabsTrigger>
           </TabsList>
 
-          <Card className="border bg-card">
+          <Card className="rounded-[26px] border border-slate-200/80 bg-white shadow-sm shadow-slate-950/5">
             <CardContent className="p-5">
               <TabsContent value="overview" className="mt-0 space-y-5">
                 <div className="grid gap-5 lg:grid-cols-2">
@@ -741,7 +839,7 @@ export function StyleGuidePanel({
               </TabsContent>
 
               <TabsContent value="tone" className="mt-0 space-y-5">
-                <Card className="border bg-muted/20">
+                <Card className="rounded-[22px] border border-slate-200/80 bg-slate-50/70">
                   <CardHeader className="pb-3">
                     <CardTitle className="text-base">风格模拟强度</CardTitle>
                   </CardHeader>
@@ -901,7 +999,7 @@ export function StyleGuidePanel({
               </TabsContent>
 
               <TabsContent value="preview" className="mt-0 space-y-5">
-                <Card className="border bg-muted/20">
+                <Card className="rounded-[22px] border border-slate-200/80 bg-slate-50/70">
                   <CardHeader className="pb-3">
                     <CardTitle className="text-base">风格摘要</CardTitle>
                   </CardHeader>
@@ -938,12 +1036,12 @@ export function StyleGuidePanel({
                   </CardContent>
                 </Card>
 
-                <Card className="border bg-muted/20">
+                <Card className="rounded-[22px] border border-slate-200/80 bg-slate-50/70">
                   <CardHeader className="pb-3">
                     <CardTitle className="text-base">Prompt 预览</CardTitle>
                   </CardHeader>
                   <CardContent>
-                    <pre className="max-h-[420px] overflow-auto whitespace-pre-wrap rounded-lg bg-background p-4 text-xs leading-6 text-muted-foreground">
+                    <pre className="max-h-[420px] overflow-auto whitespace-pre-wrap rounded-[18px] bg-slate-950 p-4 text-xs leading-6 text-emerald-50">
                       {previewPrompt}
                     </pre>
                   </CardContent>
@@ -955,7 +1053,8 @@ export function StyleGuidePanel({
 
         {hasChanges && (
           <div className="flex items-center justify-end">
-            <div className="rounded-full border bg-muted/40 px-3 py-1 text-sm text-muted-foreground">
+            <div className="inline-flex items-center gap-2 rounded-full border border-amber-200 bg-amber-50 px-3 py-1 text-sm text-amber-700">
+              <CheckCircle2 className="h-4 w-4" />
               有未保存的风格变更
             </div>
           </div>
diff --git a/src/components/projects/memory/WorldBuildingPanel.tsx b/src/components/projects/memory/WorldBuildingPanel.tsx
index 543c81bf9..be005e59f 100644
--- a/src/components/projects/memory/WorldBuildingPanel.tsx
+++ b/src/components/projects/memory/WorldBuildingPanel.tsx
@@ -98,104 +98,226 @@ export function WorldBuildingPanel({ projectId }: WorldBuildingPanelProps) {
       setSaving(false);
     }
   };
+  const filledSections = [
+    formData.description,
+    formData.era,
+    formData.locations,
+    formData.rules,
+  ].filter((value) => value.trim().length > 0).length;
+  const locationCount = formData.locations
+    .split(/\n|、|,|，/)
+    .map((item) => item.trim())
+    .filter(Boolean).length;
+  const topBadges = [
+    hasChanges ? "未保存变更" : "已同步",
+    formData.era.trim() || "未设时代背景",
+    filledSections > 0 ? `已填写 ${filledSections}/4` : "待填写世界设定",
+  ];
+  const summaryCards = [
+    {
+      label: "已填写模块",
+      value: `${filledSections}/4`,
+      description: "世界观、时代、地点与规则四个核心维度",
+    },
+    {
+      label: "地点线索",
+      value: String(locationCount),
+      description:
+        locationCount > 0 ? "已录入主要地点或场景线索" : "还没有整理地点设定",
+    },
+    {
+      label: "当前状态",
+      value: hasChanges ? "待保存" : "已同步",
+      description: hasChanges ? "页面中仍有未落库的世界观调整" : "当前内容已与存储同步",
+    },
+  ];
 
   if (loading) {
     return (
-      <div className="flex items-center justify-center h-40">
-        <RefreshCw className="h-6 w-6 animate-spin text-muted-foreground" />
+      <div className="flex h-48 items-center justify-center rounded-[28px] border border-slate-200/80 bg-white/92 shadow-sm shadow-slate-950/5">
+        <RefreshCw className="h-6 w-6 animate-spin text-slate-400" />
       </div>
     );
   }
 
   return (
-    <div className="flex flex-col h-full">
-      {/* 工具栏 */}
-      <div className="flex items-center justify-between mb-4">
-        <div className="flex items-center gap-2 text-muted-foreground">
-          <Globe className="h-4 w-4" />
-          <span className="text-sm">世界观设定</span>
+    <div className="mx-auto w-full max-w-6xl space-y-5 pb-6">
+      <section className="relative overflow-hidden rounded-[30px] border border-sky-200/70 bg-[linear-gradient(135deg,rgba(240,249,255,0.95)_0%,rgba(255,255,255,0.98)_48%,rgba(236,253,245,0.95)_100%)] shadow-sm shadow-slate-950/5">
+        <div className="pointer-events-none absolute -left-14 top-[-44px] h-44 w-44 rounded-full bg-sky-200/25 blur-3xl" />
+        <div className="pointer-events-none absolute right-[-52px] top-[-18px] h-44 w-44 rounded-full bg-emerald-200/20 blur-3xl" />
+        <div className="relative flex flex-col gap-6 p-6 lg:p-7">
+          <div className="flex flex-col gap-6 xl:flex-row xl:items-start xl:justify-between">
+            <div className="max-w-3xl space-y-4">
+              <div className="flex items-center gap-2 text-slate-500">
+                <Globe className="h-4 w-4" />
+                <span className="text-sm">项目世界规则板</span>
+              </div>
+              <div className="space-y-2">
+                <div className="text-2xl font-semibold tracking-tight text-slate-900">
+                  世界观、时代与运行规则
+                </div>
+                <div className="text-sm leading-6 text-slate-600">
+                  先把世界背景和运行逻辑写清，再让角色和大纲在同一套世界事实里推进，减少设定冲突。
+                </div>
+              </div>
+              <div className="flex flex-wrap gap-2">
+                {topBadges.map((item) => (
+                  <span
+                    key={item}
+                    className="rounded-full border border-white/90 bg-white/85 px-3 py-1 text-xs font-medium text-slate-600 shadow-sm"
+                  >
+                    {item}
+                  </span>
+                ))}
+              </div>
+            </div>
+
+            <div className="flex flex-col gap-4 xl:min-w-[420px] xl:items-end">
+              <div className="flex flex-wrap items-center gap-2 lg:justify-end">
+                <Button
+                  variant="ghost"
+                  size="icon"
+                  onClick={loadWorldBuilding}
+                  disabled={loading}
+                >
+                  <RefreshCw
+                    className={cn("h-4 w-4", loading && "animate-spin")}
+                  />
+                </Button>
+                <Button onClick={handleSave} disabled={saving || !hasChanges}>
+                  <Save className="mr-2 h-4 w-4" />
+                  {saving ? "保存中..." : "保存"}
+                </Button>
+              </div>
+
+              <div className="grid gap-3 sm:grid-cols-3 xl:w-full">
+                {summaryCards.map((item) => (
+                  <div
+                    key={item.label}
+                    className="rounded-[22px] border border-white/90 bg-white/88 p-4 shadow-sm shadow-slate-950/5"
+                  >
+                    <div className="text-sm font-semibold text-slate-800">
+                      {item.label}
+                    </div>
+                    <div className="mt-1 text-xs leading-5 text-slate-500">
+                      {item.description}
+                    </div>
+                    <div className="mt-4 text-3xl font-semibold tracking-tight text-slate-900">
+                      {item.value}
+                    </div>
+                  </div>
+                ))}
+              </div>
+            </div>
+          </div>
         </div>
-        <div className="flex items-center gap-2">
-          <Button
-            variant="ghost"
-            size="icon"
-            onClick={loadWorldBuilding}
-            disabled={loading}
-          >
-            <RefreshCw className={cn("h-4 w-4", loading && "animate-spin")} />
-          </Button>
-          <Button onClick={handleSave} disabled={saving || !hasChanges}>
-            <Save className="h-4 w-4 mr-2" />
-            {saving ? "保存中..." : "保存"}
-          </Button>
+      </section>
+
+      <div className="grid gap-5 xl:grid-cols-[1.15fr_0.85fr]">
+        <section className="rounded-[28px] border border-slate-200/80 bg-white/92 p-5 shadow-sm shadow-slate-950/5">
+          <div className="mb-4">
+            <div className="text-sm font-semibold text-slate-900">
+              核心世界设定
+            </div>
+            <div className="mt-1 text-xs leading-5 text-slate-500">
+              先写高层世界背景与时代定位，确保后续内容创作有统一边界。
+            </div>
+          </div>
+
+          <div className="space-y-5">
+            <div className="space-y-2">
+              <Label htmlFor="description">世界观描述</Label>
+              <Textarea
+                id="description"
+                value={formData.description}
+                onChange={(e) => handleChange("description", e.target.value)}
+                placeholder="描述故事发生的世界背景..."
+                rows={6}
+              />
+              <p className="text-xs leading-5 text-slate-500">
+                整体描述故事发生的世界，包括基本设定和核心概念。
+              </p>
+            </div>
+
+            <div className="space-y-2">
+              <Label htmlFor="era">时代背景</Label>
+              <Textarea
+                id="era"
+                value={formData.era}
+                onChange={(e) => handleChange("era", e.target.value)}
+                placeholder="故事发生的时代..."
+                rows={4}
+              />
+              <p className="text-xs leading-5 text-slate-500">
+                描述故事发生的时代，如现代、古代、未来等。
+              </p>
+            </div>
+          </div>
+        </section>
+
+        <div className="space-y-5">
+          <section className="rounded-[28px] border border-slate-200/80 bg-white/92 p-5 shadow-sm shadow-slate-950/5">
+            <div className="mb-4">
+              <div className="text-sm font-semibold text-slate-900">
+                地点与场景
+              </div>
+              <div className="mt-1 text-xs leading-5 text-slate-500">
+                用地点、城市和关键场景整理故事发生的空间骨架。
+              </div>
+            </div>
+
+            <div className="space-y-2">
+              <Label htmlFor="locations">地点设定</Label>
+              <Textarea
+                id="locations"
+                value={formData.locations}
+                onChange={(e) => handleChange("locations", e.target.value)}
+                placeholder="主要地点和场景..."
+                rows={6}
+              />
+              <p className="text-xs leading-5 text-slate-500">
+                描述故事中的主要地点、城市、场景等。
+              </p>
+            </div>
+          </section>
+
+          <section className="rounded-[28px] border border-slate-200/80 bg-white/92 p-5 shadow-sm shadow-slate-950/5">
+            <div className="mb-4">
+              <div className="text-sm font-semibold text-slate-900">
+                规则与限制
+              </div>
+              <div className="mt-1 text-xs leading-5 text-slate-500">
+                把魔法体系、科技能力或社会制度写成可复用的世界规则。
+              </div>
+            </div>
+
+            <div className="space-y-2">
+              <Label htmlFor="rules">规则/设定</Label>
+              <Textarea
+                id="rules"
+                value={formData.rules}
+                onChange={(e) => handleChange("rules", e.target.value)}
+                placeholder="世界运行的规则..."
+                rows={6}
+              />
+              <p className="text-xs leading-5 text-slate-500">
+                描述世界运行的规则，如魔法体系、科技水平、社会制度等。
+              </p>
+            </div>
+          </section>
+
+          <section className="rounded-[28px] border border-slate-200/80 bg-[linear-gradient(180deg,rgba(248,250,252,0.9)_0%,rgba(255,255,255,0.98)_100%)] p-5 shadow-sm shadow-slate-950/5">
+            <div className="text-sm font-semibold text-slate-900">
+              写作建议
+            </div>
+            <div className="mt-2 space-y-2 text-xs leading-5 text-slate-500">
+              <p>世界观描述负责总览，不要把具体剧情事件塞进这里。</p>
+              <p>地点设定尽量写场景功能，例如权力中心、冲突边界或资源来源。</p>
+              <p>规则区优先写明确限制，这能显著降低后续剧情跑偏。</p>
+            </div>
+          </section>
         </div>
       </div>
-
-      {/* 表单 */}
-      <div className="flex-1 overflow-auto space-y-6">
-        <div className="space-y-2">
-          <Label htmlFor="description">世界观描述</Label>
-          <Textarea
-            id="description"
-            value={formData.description}
-            onChange={(e) => handleChange("description", e.target.value)}
-            placeholder="描述故事发生的世界背景..."
-            rows={4}
-          />
-          <p className="text-xs text-muted-foreground">
-            整体描述故事发生的世界，包括基本设定和核心概念
-          </p>
-        </div>
-
-        <div className="space-y-2">
-          <Label htmlFor="era">时代背景</Label>
-          <Textarea
-            id="era"
-            value={formData.era}
-            onChange={(e) => handleChange("era", e.target.value)}
-            placeholder="故事发生的时代..."
-            rows={3}
-          />
-          <p className="text-xs text-muted-foreground">
-            描述故事发生的时代，如现代、古代、未来等
-          </p>
-        </div>
-
-        <div className="space-y-2">
-          <Label htmlFor="locations">地点设定</Label>
-          <Textarea
-            id="locations"
-            value={formData.locations}
-            onChange={(e) => handleChange("locations", e.target.value)}
-            placeholder="主要地点和场景..."
-            rows={4}
-          />
-          <p className="text-xs text-muted-foreground">
-            描述故事中的主要地点、城市、场景等
-          </p>
-        </div>
-
-        <div className="space-y-2">
-          <Label htmlFor="rules">规则/设定</Label>
-          <Textarea
-            id="rules"
-            value={formData.rules}
-            onChange={(e) => handleChange("rules", e.target.value)}
-            placeholder="世界运行的规则..."
-            rows={4}
-          />
-          <p className="text-xs text-muted-foreground">
-            描述世界运行的规则，如魔法体系、科技水平、社会制度等
-          </p>
-        </div>
-      </div>
-
-      {/* 状态提示 */}
-      {hasChanges && (
-        <div className="mt-4 text-sm text-muted-foreground text-center">
-          有未保存的更改
-        </div>
-      )}
     </div>
   );
 }
diff --git a/src/components/projects/projectSelectorUtils.ts b/src/components/projects/projectSelectorUtils.ts
index a71982464..036daf337 100644
--- a/src/components/projects/projectSelectorUtils.ts
+++ b/src/components/projects/projectSelectorUtils.ts
@@ -25,6 +25,51 @@ export function getAvailableProjects(
   return [...filtered].sort((a, b) => {
     if (a.isDefault && !b.isDefault) return -1;
     if (!a.isDefault && b.isDefault) return 1;
-    return 0;
+    return b.updatedAt - a.updatedAt;
   });
 }
+
+export function canRenameProject(project: Project | null | undefined): boolean {
+  return Boolean(project && !project.isDefault);
+}
+
+export function canDeleteProject(project: Project | null | undefined): boolean {
+  return Boolean(project && !project.isDefault);
+}
+
+export function resolveProjectDeletionFallback(
+  projects: Project[],
+  defaultProject: Project | null,
+  deletedProjectId?: string | null,
+): string | null {
+  if (defaultProject && defaultProject.id !== deletedProjectId) {
+    return defaultProject.id;
+  }
+
+  const nextProject = projects.find((project) => project.id !== deletedProjectId);
+  return nextProject?.id || null;
+}
+
+export function resolveSelectedProject(
+  projects: Project[],
+  selectedProjectId: string | null | undefined,
+  defaultProject: Project | null,
+): Project | null {
+  if (selectedProjectId) {
+    const matchedProject = projects.find((project) => project.id === selectedProjectId);
+    if (matchedProject) {
+      return matchedProject;
+    }
+  }
+
+  if (defaultProject) {
+    const matchedDefault = projects.find(
+      (project) => project.id === defaultProject.id,
+    );
+    if (matchedDefault) {
+      return matchedDefault;
+    }
+  }
+
+  return projects[0] || null;
+}
diff --git a/src/components/prompts/PromptCard.tsx b/src/components/prompts/PromptCard.tsx
deleted file mode 100644
index 9c2b77f5f..000000000
--- a/src/components/prompts/PromptCard.tsx
+++ /dev/null
@@ -1,127 +0,0 @@
-import { Check, Edit2, Trash2, FileText } from "lucide-react";
-import { Prompt } from "@/lib/api/prompts";
-import { cn } from "@/lib/utils";
-
-interface PromptCardProps {
-  prompt: Prompt;
-  onToggle: (enabled: boolean) => void;
-  onEdit: () => void;
-  onDelete: () => void;
-}
-
-/** Toggle Switch Component */
-function ToggleSwitch({
-  enabled,
-  onChange,
-  disabled = false,
-}: {
-  enabled: boolean;
-  onChange: (enabled: boolean) => void;
-  disabled?: boolean;
-}) {
-  return (
-    <button
-      type="button"
-      role="switch"
-      aria-checked={enabled}
-      disabled={disabled}
-      onClick={(e) => {
-        e.stopPropagation();
-        onChange(!enabled);
-      }}
-      className={cn(
-        "relative inline-flex h-5 w-9 items-center rounded-full transition-colors focus:outline-none focus:ring-2 focus:ring-primary/20",
-        enabled ? "bg-primary" : "bg-muted-foreground/30",
-        disabled ? "opacity-50 cursor-not-allowed" : "cursor-pointer",
-      )}
-    >
-      <span
-        className={cn(
-          "inline-block h-3.5 w-3.5 transform rounded-full bg-white transition-transform",
-          enabled ? "translate-x-5" : "translate-x-1",
-        )}
-      />
-    </button>
-  );
-}
-
-export function PromptCard({
-  prompt,
-  onToggle,
-  onEdit,
-  onDelete,
-}: PromptCardProps) {
-  return (
-    <div
-      className={cn(
-        "relative rounded-lg border p-4 transition-all",
-        prompt.enabled
-          ? "border-primary bg-primary/5 ring-1 ring-primary"
-          : "hover:border-muted-foreground/50",
-      )}
-    >
-      {prompt.enabled && (
-        <div className="absolute -top-2 -right-2 rounded-full bg-primary p-1">
-          <Check className="h-3 w-3 text-primary-foreground" />
-        </div>
-      )}
-
-      <div className="flex items-start justify-between">
-        <div className="flex items-center gap-3">
-          <ToggleSwitch enabled={prompt.enabled} onChange={onToggle} />
-          <div className="h-8 w-8 rounded-lg bg-muted flex items-center justify-center">
-            <FileText className="h-4 w-4" />
-          </div>
-          <div>
-            <h3 className="font-medium">{prompt.name}</h3>
-            {prompt.description && (
-              <span className="text-xs text-muted-foreground">
-                {prompt.description}
-              </span>
-            )}
-          </div>
-        </div>
-
-        <div className="flex gap-1">
-          <button
-            onClick={onEdit}
-            className="p-1.5 rounded hover:bg-muted"
-            title="编辑"
-          >
-            <Edit2 className="h-3.5 w-3.5" />
-          </button>
-          <button
-            onClick={onDelete}
-            disabled={prompt.enabled}
-            className={cn(
-              "p-1.5 rounded",
-              prompt.enabled
-                ? "opacity-30 cursor-not-allowed"
-                : "hover:bg-destructive/10 text-destructive",
-            )}
-            title={prompt.enabled ? "无法删除已启用的提示词" : "删除"}
-          >
-            <Trash2 className="h-3.5 w-3.5" />
-          </button>
-        </div>
-      </div>
-
-      <div className="mt-3 p-2 rounded bg-muted/50 max-h-24 overflow-auto">
-        <pre className="text-xs text-muted-foreground whitespace-pre-wrap font-mono">
-          {prompt.content.slice(0, 200)}
-          {prompt.content.length > 200 && "..."}
-        </pre>
-      </div>
-
-      <div className="mt-3">
-        {prompt.enabled ? (
-          <span className="text-sm text-primary font-medium">
-            已启用 (同步到配置文件)
-          </span>
-        ) : (
-          <span className="text-sm text-muted-foreground">未启用</span>
-        )}
-      </div>
-    </div>
-  );
-}
diff --git a/src/components/prompts/PromptForm.tsx b/src/components/prompts/PromptForm.tsx
deleted file mode 100644
index 81f8fe3c2..000000000
--- a/src/components/prompts/PromptForm.tsx
+++ /dev/null
@@ -1,114 +0,0 @@
-import React, { useState } from "react";
-import { X } from "lucide-react";
-import { Prompt, AppType } from "@/lib/api/prompts";
-
-interface PromptFormProps {
-  appType: AppType;
-  prompt: Prompt | null;
-  onSave: (data: Omit<Prompt, "id" | "createdAt">) => Promise<void>;
-  onCancel: () => void;
-}
-
-export function PromptForm({
-  appType,
-  prompt,
-  onSave,
-  onCancel,
-}: PromptFormProps) {
-  const [name, setName] = useState(prompt?.name || "");
-  const [content, setContent] = useState(prompt?.content || "");
-  const [description, setDescription] = useState(prompt?.description || "");
-  const [saving, setSaving] = useState(false);
-  const [error, setError] = useState<string | null>(null);
-
-  const handleSubmit = async (e: React.FormEvent) => {
-    e.preventDefault();
-    setError(null);
-
-    try {
-      setSaving(true);
-      await onSave({
-        app_type: appType,
-        name,
-        content,
-        description: description || undefined,
-        enabled: prompt?.enabled || false,
-        updatedAt: Math.floor(Date.now() / 1000),
-      });
-    } catch (err) {
-      setError(err instanceof Error ? err.message : String(err));
-      setSaving(false);
-    }
-  };
-
-  return (
-    <div className="fixed inset-0 bg-black/50 flex items-center justify-center z-50">
-      <div className="bg-background rounded-lg shadow-lg w-full max-w-2xl max-h-[90vh] overflow-auto">
-        <div className="flex items-center justify-between p-4 border-b">
-          <h3 className="font-semibold">
-            {prompt ? "编辑 Prompt" : "添加 Prompt"}
-          </h3>
-          <button onClick={onCancel} className="p-1 hover:bg-muted rounded">
-            <X className="h-5 w-5" />
-          </button>
-        </div>
-
-        <form onSubmit={handleSubmit} className="p-4 space-y-4">
-          <div>
-            <label className="block text-sm font-medium mb-1">名称</label>
-            <input
-              type="text"
-              value={name}
-              onChange={(e) => setName(e.target.value)}
-              className="w-full px-3 py-2 rounded-lg border bg-background"
-              placeholder="Prompt 名称"
-              required
-            />
-          </div>
-
-          <div>
-            <label className="block text-sm font-medium mb-1">描述</label>
-            <input
-              type="text"
-              value={description}
-              onChange={(e) => setDescription(e.target.value)}
-              className="w-full px-3 py-2 rounded-lg border bg-background"
-              placeholder="可选描述"
-            />
-          </div>
-
-          <div>
-            <label className="block text-sm font-medium mb-1">内容</label>
-            <textarea
-              value={content}
-              onChange={(e) => setContent(e.target.value)}
-              className="w-full px-3 py-2 rounded-lg border bg-background font-mono text-sm"
-              rows={15}
-              placeholder="输入系统提示词内容..."
-              required
-            />
-          </div>
-
-          {error && <p className="text-sm text-destructive">{error}</p>}
-
-          <div className="flex justify-end gap-2 pt-2">
-            <button
-              type="button"
-              onClick={onCancel}
-              className="px-4 py-2 rounded-lg border hover:bg-muted"
-            >
-              取消
-            </button>
-            <button
-              type="submit"
-              disabled={saving || !name || !content}
-              className="px-4 py-2 rounded-lg bg-primary text-primary-foreground disabled:opacity-50"
-            >
-              {saving ? "保存中..." : "保存"}
-            </button>
-          </div>
-        </form>
-      </div>
-    </div>
-  );
-}
diff --git a/src/components/prompts/PromptsPage.tsx b/src/components/prompts/PromptsPage.tsx
deleted file mode 100644
index 66548e42e..000000000
--- a/src/components/prompts/PromptsPage.tsx
+++ /dev/null
@@ -1,465 +0,0 @@
-import { useState, useEffect, useMemo } from "react";
-import {
-  Plus,
-  RefreshCw,
-  Check,
-  Trash2,
-  Download,
-  FileText,
-} from "lucide-react";
-import { AppType, Prompt } from "@/lib/api/prompts";
-import { usePrompts } from "@/hooks/usePrompts";
-import { cn } from "@/lib/utils";
-import { ConfirmDialog } from "@/components/ConfirmDialog";
-import { HelpTip } from "@/components/HelpTip";
-import { ProviderIcon } from "@/icons/providers";
-
-const apps: {
-  id: AppType;
-  label: string;
-  filename: string;
-  iconType: string;
-}[] = [
-  {
-    id: "claude",
-    label: "Claude Code",
-    filename: "CLAUDE.md",
-    iconType: "claude",
-  },
-  { id: "codex", label: "Codex", filename: "AGENTS.md", iconType: "openai" },
-  { id: "gemini", label: "Gemini", filename: "GEMINI.md", iconType: "gemini" },
-];
-
-/** Toggle Switch Component */
-function ToggleSwitch({
-  enabled,
-  onChange,
-  disabled = false,
-}: {
-  enabled: boolean;
-  onChange: (enabled: boolean) => void;
-  disabled?: boolean;
-}) {
-  return (
-    <button
-      type="button"
-      role="switch"
-      aria-checked={enabled}
-      disabled={disabled}
-      onClick={(e) => {
-        e.stopPropagation();
-        onChange(!enabled);
-      }}
-      className={cn(
-        "relative inline-flex h-5 w-9 items-center rounded-full transition-colors focus:outline-none focus:ring-2 focus:ring-primary/20",
-        enabled ? "bg-primary" : "bg-muted-foreground/30",
-        disabled ? "opacity-50 cursor-not-allowed" : "cursor-pointer",
-      )}
-    >
-      <span
-        className={cn(
-          "inline-block h-3.5 w-3.5 transform rounded-full bg-white transition-transform",
-          enabled ? "translate-x-5" : "translate-x-1",
-        )}
-      />
-    </button>
-  );
-}
-
-interface PromptsPageProps {
-  hideHeader?: boolean;
-}
-
-export function PromptsPage({ hideHeader = false }: PromptsPageProps) {
-  const [activeApp, setActiveApp] = useState<AppType>("claude");
-  const {
-    prompts,
-    loading,
-    reload,
-    savePrompt,
-    deletePrompt,
-    toggleEnabled,
-    importFromFile,
-  } = usePrompts(activeApp);
-
-  const [selectedPromptId, setSelectedPromptId] = useState<string | null>(null);
-  const [isCreating, setIsCreating] = useState(false);
-
-  // Edit form state
-  const [editName, setEditName] = useState("");
-  const [editDescription, setEditDescription] = useState("");
-  const [editContent, setEditContent] = useState("");
-  const [saving, setSaving] = useState(false);
-  const [importing, setImporting] = useState(false);
-  const [deleteConfirm, setDeleteConfirm] = useState<string | null>(null);
-
-  // Convert prompts map to array
-  const promptList = useMemo(() => Object.entries(prompts), [prompts]);
-  const enabledPrompt = promptList.find(([_, p]) => p.enabled);
-  const selectedPrompt = selectedPromptId ? prompts[selectedPromptId] : null;
-  const currentApp = apps.find((a) => a.id === activeApp)!;
-
-  // Load prompts on mount and app change
-  useEffect(() => {
-    reload();
-  }, [reload]);
-
-  const handleSelectPrompt = (id: string, prompt: Prompt) => {
-    setSelectedPromptId(id);
-    setIsCreating(false);
-    setEditName(prompt.name);
-    setEditDescription(prompt.description || "");
-    setEditContent(prompt.content);
-  };
-
-  const handleCreateNew = () => {
-    setSelectedPromptId(null);
-    setIsCreating(true);
-    setEditName("");
-    setEditDescription("");
-    setEditContent("");
-  };
-
-  const handleSave = async () => {
-    if (!editName.trim() || !editContent.trim()) return;
-
-    setSaving(true);
-    try {
-      const timestamp = Math.floor(Date.now() / 1000);
-      const id = isCreating ? `prompt-${Date.now()}` : selectedPromptId!;
-      const prompt: Prompt = {
-        id,
-        app_type: activeApp,
-        name: editName.trim(),
-        content: editContent,
-        description: editDescription.trim() || undefined,
-        enabled: selectedPrompt?.enabled || false,
-        createdAt: selectedPrompt?.createdAt || timestamp,
-        updatedAt: timestamp,
-      };
-      await savePrompt(id, prompt);
-      setIsCreating(false);
-      setSelectedPromptId(id);
-    } finally {
-      setSaving(false);
-    }
-  };
-
-  const handleDeleteClick = (id: string) => {
-    const prompt = prompts[id];
-    if (prompt?.enabled) {
-      alert("无法删除已启用的提示词。请先禁用它。");
-      return;
-    }
-    setDeleteConfirm(id);
-  };
-
-  const handleDeleteConfirm = async () => {
-    if (!deleteConfirm) return;
-    await deletePrompt(deleteConfirm);
-    if (selectedPromptId === deleteConfirm) {
-      setSelectedPromptId(null);
-    }
-    setDeleteConfirm(null);
-  };
-
-  const handleToggle = async (id: string, enabled: boolean) => {
-    try {
-      await toggleEnabled(id, enabled);
-    } catch (error) {
-      console.error("Failed to toggle prompt:", error);
-    }
-  };
-
-  const handleImport = async () => {
-    setImporting(true);
-    try {
-      await importFromFile();
-    } catch (error) {
-      console.error("Failed to import:", error);
-      alert(
-        "导入失败：" + (error instanceof Error ? error.message : String(error)),
-      );
-    } finally {
-      setImporting(false);
-    }
-  };
-
-  // Reset selection when switching apps
-  const handleAppChange = (app: AppType) => {
-    setActiveApp(app);
-    setSelectedPromptId(null);
-    setIsCreating(false);
-  };
-
-  return (
-    <div className="h-full flex flex-col">
-      {!hideHeader && (
-        <div className="mb-4">
-          <h2 className="text-2xl font-bold">Prompts</h2>
-          <p className="text-muted-foreground">
-            管理不同应用的系统提示词（{currentApp.filename}）
-          </p>
-        </div>
-      )}
-
-      <HelpTip title="什么是 Prompts？" variant="amber">
-        <ul className="list-disc list-inside space-y-1 text-sm text-amber-700 dark:text-amber-400">
-          <li>Prompts 是 AI 工具的系统提示词，定义 AI 的行为和风格</li>
-          <li>
-            Claude Code 使用 CLAUDE.md，Codex 使用 AGENTS.md，Gemini 使用
-            GEMINI.md
-          </li>
-          <li>
-            可创建多个提示词模板，一键切换不同场景（如代码审查、文档编写等）
-          </li>
-        </ul>
-      </HelpTip>
-
-      {/* App tabs */}
-      <div className="flex gap-2 border-b pb-2 mb-4">
-        {apps.map((app) => (
-          <button
-            key={app.id}
-            onClick={() => handleAppChange(app.id)}
-            className={cn(
-              "flex items-center gap-2 px-4 py-2 rounded-t-lg text-sm font-medium transition-colors",
-              activeApp === app.id
-                ? "bg-primary text-primary-foreground"
-                : "hover:bg-muted text-muted-foreground",
-            )}
-          >
-            <ProviderIcon providerType={app.iconType} size={16} />
-            {app.label}
-          </button>
-        ))}
-      </div>
-
-      {/* Status bar */}
-      <div className="mb-4 p-3 rounded-lg bg-muted/50 border text-sm text-muted-foreground">
-        共 {promptList.length} 个提示词 ·{" "}
-        {enabledPrompt
-          ? `当前启用: ${enabledPrompt[1].name}`
-          : "暂无启用的提示词"}
-      </div>
-
-      {/* Main content - left/right split */}
-      <div className="flex-1 flex gap-4 min-h-0">
-        {/* Left list */}
-        <div className="w-80 flex flex-col border rounded-lg">
-          <div className="p-3 border-b flex items-center justify-between">
-            <span className="text-sm font-medium">提示词列表</span>
-            <div className="flex gap-1">
-              <button
-                onClick={handleImport}
-                disabled={importing}
-                className="p-1.5 rounded hover:bg-muted"
-                title={`从 ${currentApp.filename} 导入`}
-              >
-                <Download
-                  className={cn("h-4 w-4", importing && "animate-pulse")}
-                />
-              </button>
-              <button
-                onClick={reload}
-                className="p-1.5 rounded hover:bg-muted"
-                title="刷新"
-              >
-                <RefreshCw
-                  className={cn("h-4 w-4", loading && "animate-spin")}
-                />
-              </button>
-              <button
-                onClick={handleCreateNew}
-                className="p-1.5 rounded hover:bg-muted text-primary"
-                title="新建"
-              >
-                <Plus className="h-4 w-4" />
-              </button>
-            </div>
-          </div>
-
-          <div className="flex-1 overflow-auto p-2 space-y-1">
-            {loading ? (
-              <div className="flex items-center justify-center py-8">
-                <RefreshCw className="h-5 w-5 animate-spin text-muted-foreground" />
-              </div>
-            ) : promptList.length === 0 ? (
-              <div className="text-center py-8 text-muted-foreground text-sm">
-                <FileText className="h-8 w-8 mx-auto mb-2 opacity-50" />
-                <p>暂无提示词</p>
-                <button
-                  onClick={handleCreateNew}
-                  className="text-primary hover:underline mt-1"
-                >
-                  创建第一个
-                </button>
-              </div>
-            ) : (
-              promptList.map(([id, prompt]) => (
-                <div
-                  key={id}
-                  onClick={() => handleSelectPrompt(id, prompt)}
-                  className={cn(
-                    "p-3 rounded-lg cursor-pointer transition-colors relative",
-                    selectedPromptId === id
-                      ? "bg-primary/10 border border-primary"
-                      : "hover:bg-muted border border-transparent",
-                  )}
-                >
-                  <div className="flex items-center gap-3">
-                    {/* Toggle switch */}
-                    <ToggleSwitch
-                      enabled={prompt.enabled}
-                      onChange={(enabled) => handleToggle(id, enabled)}
-                    />
-
-                    <div className="flex-1 min-w-0">
-                      <div className="flex items-center gap-2">
-                        <span className="font-medium text-sm truncate">
-                          {prompt.name}
-                        </span>
-                        {prompt.enabled && (
-                          <span className="flex-shrink-0 w-4 h-4 rounded-full bg-primary flex items-center justify-center">
-                            <Check className="h-2.5 w-2.5 text-primary-foreground" />
-                          </span>
-                        )}
-                      </div>
-                      {prompt.description && (
-                        <p className="text-xs text-muted-foreground truncate mt-0.5">
-                          {prompt.description}
-                        </p>
-                      )}
-                    </div>
-                  </div>
-                </div>
-              ))
-            )}
-          </div>
-        </div>
-
-        {/* Right edit panel */}
-        <div className="flex-1 border rounded-lg flex flex-col min-w-0">
-          {!selectedPrompt && !isCreating ? (
-            <div className="flex-1 flex items-center justify-center text-muted-foreground">
-              <div className="text-center">
-                <FileText className="h-12 w-12 mx-auto mb-3 opacity-30" />
-                <p>选择一个提示词进行编辑</p>
-                <p className="text-sm mt-1">或点击 + 创建新的提示词</p>
-              </div>
-            </div>
-          ) : (
-            <>
-              <div className="p-4 border-b space-y-4">
-                <div className="flex items-center justify-between">
-                  <h3 className="font-semibold">
-                    {isCreating ? "新建提示词" : "编辑提示词"}
-                  </h3>
-                  {selectedPrompt && (
-                    <div className="flex items-center gap-3">
-                      <div className="flex items-center gap-2 text-sm">
-                        <span className="text-muted-foreground">启用</span>
-                        <ToggleSwitch
-                          enabled={selectedPrompt.enabled}
-                          onChange={(enabled) =>
-                            handleToggle(selectedPromptId!, enabled)
-                          }
-                        />
-                      </div>
-                      <button
-                        onClick={() => handleDeleteClick(selectedPromptId!)}
-                        disabled={selectedPrompt.enabled}
-                        className={cn(
-                          "p-1.5 rounded",
-                          selectedPrompt.enabled
-                            ? "opacity-30 cursor-not-allowed"
-                            : "hover:bg-destructive/10 text-destructive",
-                        )}
-                        title={
-                          selectedPrompt.enabled
-                            ? "无法删除已启用的提示词"
-                            : "删除"
-                        }
-                      >
-                        <Trash2 className="h-4 w-4" />
-                      </button>
-                    </div>
-                  )}
-                </div>
-
-                <div className="grid grid-cols-2 gap-4">
-                  <div>
-                    <label className="block text-sm font-medium mb-1">
-                      名称
-                    </label>
-                    <input
-                      type="text"
-                      value={editName}
-                      onChange={(e) => setEditName(e.target.value)}
-                      className="w-full px-3 py-2 rounded-lg border bg-background focus:ring-2 focus:ring-primary/20 focus:border-primary outline-none"
-                      placeholder="提示词名称"
-                    />
-                  </div>
-                  <div>
-                    <label className="block text-sm font-medium mb-1">
-                      描述
-                    </label>
-                    <input
-                      type="text"
-                      value={editDescription}
-                      onChange={(e) => setEditDescription(e.target.value)}
-                      className="w-full px-3 py-2 rounded-lg border bg-background focus:ring-2 focus:ring-primary/20 focus:border-primary outline-none"
-                      placeholder="可选描述"
-                    />
-                  </div>
-                </div>
-              </div>
-
-              <div className="flex-1 p-4 flex flex-col min-h-0">
-                <label className="block text-sm font-medium mb-2">
-                  内容{" "}
-                  <span className="text-xs text-muted-foreground font-normal">
-                    (启用后将同步到 {currentApp.filename})
-                  </span>
-                </label>
-                <textarea
-                  value={editContent}
-                  onChange={(e) => setEditContent(e.target.value)}
-                  className="flex-1 w-full px-3 py-2 rounded-lg border bg-muted/50 focus:ring-2 focus:ring-primary/20 focus:border-primary outline-none font-mono text-sm resize-none"
-                  placeholder="输入系统提示词内容..."
-                />
-              </div>
-
-              <div className="p-4 border-t flex justify-end gap-3">
-                <button
-                  onClick={() => {
-                    setSelectedPromptId(null);
-                    setIsCreating(false);
-                  }}
-                  className="px-4 py-2 rounded-lg border hover:bg-muted"
-                >
-                  取消
-                </button>
-                <button
-                  onClick={handleSave}
-                  disabled={saving || !editName.trim() || !editContent.trim()}
-                  className="px-4 py-2 rounded-lg bg-primary text-primary-foreground hover:bg-primary/90 disabled:opacity-50"
-                >
-                  {saving ? "保存中..." : "保存"}
-                </button>
-              </div>
-            </>
-          )}
-        </div>
-      </div>
-
-      <ConfirmDialog
-        isOpen={!!deleteConfirm}
-        title="删除确认"
-        message="确定要删除这个 Prompt 吗？"
-        onConfirm={handleDeleteConfirm}
-        onCancel={() => setDeleteConfirm(null)}
-      />
-    </div>
-  );
-}
diff --git a/src/components/prompts/index.ts b/src/components/prompts/index.ts
deleted file mode 100644
index 20288b6df..000000000
--- a/src/components/prompts/index.ts
+++ /dev/null
@@ -1,3 +0,0 @@
-export { PromptsPage } from "./PromptsPage";
-export { PromptCard } from "./PromptCard";
-export { PromptForm } from "./PromptForm";
diff --git a/src/components/resources/ResourcesPage.tsx b/src/components/resources/ResourcesPage.tsx
index 4edf05bc7..3963e6794 100644
--- a/src/components/resources/ResourcesPage.tsx
+++ b/src/components/resources/ResourcesPage.tsx
@@ -389,7 +389,8 @@ export function ResourcesPage({ onNavigate }: ResourcesPageProps) {
     return onResourceProjectChange((detail) => {
       if (
         detail.source !== "image-gen-target" &&
-        detail.source !== "image-gen-save"
+        detail.source !== "image-gen-save" &&
+        detail.source !== "general-chat"
       ) {
         return;
       }
diff --git a/src/components/settings-v2/_layout/index.tsx b/src/components/settings-v2/_layout/index.tsx
index 899d8860d..cf10d0056 100644
--- a/src/components/settings-v2/_layout/index.tsx
+++ b/src/components/settings-v2/_layout/index.tsx
@@ -15,7 +15,6 @@ import { CanvasBreadcrumbHeader } from "@/components/content-creator/canvas/shar
 
 // 外观设置
 import { AppearanceSettings } from "../general/appearance";
-import { ChatAppearanceSettings } from "../general/chat-appearance";
 import { MemorySettings } from "../general/memory";
 // 安全与性能
 import { SecurityPerformanceSettings } from "../system/security-performance";
@@ -112,11 +111,15 @@ const PlaceholderPage = styled.div`
 /**
  * 渲染设置内容
  */
+function normalizeSettingsTab(tab: SettingsTabs): SettingsTabs {
+  return tab === SettingsTabs.ChatAppearance ? SettingsTabs.Appearance : tab;
+}
+
 function renderSettingsContent(
   tab: SettingsTabs,
   onTabChange: (tab: SettingsTabs) => void,
 ): ReactNode {
-  switch (tab) {
+  switch (normalizeSettingsTab(tab)) {
     case SettingsTabs.Home:
       return <SettingsHomePage onTabChange={onTabChange} />;
 
@@ -146,14 +149,6 @@ function renderSettingsContent(
         </>
       );
 
-    case SettingsTabs.ChatAppearance:
-      return (
-        <>
-          <SettingHeader title="聊天外观" />
-          <ChatAppearanceSettings />
-        </>
-      );
-
     case SettingsTabs.Hotkeys:
       return (
         <>
@@ -334,12 +329,22 @@ interface SettingsLayoutV2Props {
 
 const WIDE_CONTENT_TABS = new Set<SettingsTabs>([
   SettingsTabs.Home,
+  SettingsTabs.Profile,
+  SettingsTabs.Stats,
+  SettingsTabs.Appearance,
+  SettingsTabs.ChatAppearance,
+  SettingsTabs.Hotkeys,
+  SettingsTabs.Memory,
   SettingsTabs.Providers,
   SettingsTabs.Skills,
   SettingsTabs.ApiServer,
   SettingsTabs.McpServer,
   SettingsTabs.Channels,
+  SettingsTabs.SecurityPerformance,
+  SettingsTabs.Developer,
+  SettingsTabs.WebSearch,
   SettingsTabs.Environment,
+  SettingsTabs.ChromeRelay,
   SettingsTabs.ExecutionTracker,
 ]);
 
@@ -348,17 +353,21 @@ export function SettingsLayoutV2({
   initialTab,
 }: SettingsLayoutV2Props) {
   const [activeTab, setActiveTab] = useState<SettingsTabs>(
-    initialTab || SettingsTabs.Home,
+    normalizeSettingsTab(initialTab || SettingsTabs.Home),
   );
   const contentContainerRef = useRef<HTMLElement | null>(null);
 
+  const handleTabChange = useCallback((tab: SettingsTabs) => {
+    setActiveTab(normalizeSettingsTab(tab));
+  }, []);
+
   const handleBackHome = useCallback(() => {
     onNavigate?.("agent", buildHomeAgentParams());
   }, [onNavigate]);
 
   useEffect(() => {
     if (initialTab) {
-      setActiveTab(initialTab);
+      setActiveTab(normalizeSettingsTab(initialTab));
     }
   }, [initialTab]);
 
@@ -373,10 +382,10 @@ export function SettingsLayoutV2({
         <CanvasBreadcrumbHeader label="设置" onBackHome={handleBackHome} />
       </HeaderBar>
       <LayoutContainer>
-        <SettingsSidebar activeTab={activeTab} onTabChange={setActiveTab} />
+        <SettingsSidebar activeTab={activeTab} onTabChange={handleTabChange} />
         <ContentContainer ref={contentContainerRef}>
           <ContentWrapper $wide={WIDE_CONTENT_TABS.has(activeTab)}>
-            {renderSettingsContent(activeTab, setActiveTab)}
+            {renderSettingsContent(activeTab, handleTabChange)}
           </ContentWrapper>
         </ContentContainer>
       </LayoutContainer>
diff --git a/src/components/settings-v2/account/stats/index.test.tsx b/src/components/settings-v2/account/stats/index.test.tsx
new file mode 100644
index 000000000..d6731e556
--- /dev/null
+++ b/src/components/settings-v2/account/stats/index.test.tsx
@@ -0,0 +1,167 @@
+import { act } from "react";
+import { createRoot, type Root } from "react-dom/client";
+import { afterEach, beforeEach, describe, expect, it, vi } from "vitest";
+
+const {
+  mockGetUsageStats,
+  mockGetModelUsageRanking,
+  mockGetDailyUsageTrends,
+} = vi.hoisted(() => ({
+  mockGetUsageStats: vi.fn(),
+  mockGetModelUsageRanking: vi.fn(),
+  mockGetDailyUsageTrends: vi.fn(),
+}));
+
+vi.mock("@/lib/api/usageStats", () => ({
+  getUsageStats: mockGetUsageStats,
+  getModelUsageRanking: mockGetModelUsageRanking,
+  getDailyUsageTrends: mockGetDailyUsageTrends,
+}));
+
+import { StatsSettings } from ".";
+
+interface Mounted {
+  container: HTMLDivElement;
+  root: Root;
+}
+
+const mounted: Mounted[] = [];
+
+function renderComponent(): HTMLDivElement {
+  const container = document.createElement("div");
+  document.body.appendChild(container);
+  const root = createRoot(container);
+
+  act(() => {
+    root.render(<StatsSettings />);
+  });
+
+  mounted.push({ container, root });
+  return container;
+}
+
+async function flushEffects() {
+  await act(async () => {
+    await Promise.resolve();
+  });
+}
+
+async function waitForLoad() {
+  await flushEffects();
+  await flushEffects();
+}
+
+async function clickButton(button: HTMLButtonElement) {
+  await act(async () => {
+    button.dispatchEvent(new MouseEvent("click", { bubbles: true }));
+    await flushEffects();
+  });
+}
+
+beforeEach(() => {
+  (
+    globalThis as typeof globalThis & {
+      IS_REACT_ACT_ENVIRONMENT?: boolean;
+    }
+  ).IS_REACT_ACT_ENVIRONMENT = true;
+
+  vi.clearAllMocks();
+
+  mockGetUsageStats.mockResolvedValue({
+    total_conversations: 240,
+    total_messages: 1240,
+    total_tokens: 120000,
+    total_time_minutes: 900,
+    monthly_conversations: 84,
+    monthly_messages: 420,
+    monthly_tokens: 28000,
+    today_conversations: 8,
+    today_messages: 42,
+    today_tokens: 2600,
+  });
+
+  mockGetModelUsageRanking.mockResolvedValue([
+    {
+      model: "gpt-4.1",
+      conversations: 40,
+      tokens: 18000,
+      percentage: 52,
+    },
+    {
+      model: "claude-sonnet-4",
+      conversations: 24,
+      tokens: 9000,
+      percentage: 26,
+    },
+  ]);
+
+  mockGetDailyUsageTrends.mockResolvedValue([
+    {
+      date: "2026-03-01",
+      conversations: 4,
+      tokens: 1200,
+    },
+    {
+      date: "2026-03-02",
+      conversations: 0,
+      tokens: 0,
+    },
+    {
+      date: "2026-03-03",
+      conversations: 7,
+      tokens: 2600,
+    },
+  ]);
+});
+
+afterEach(() => {
+  while (mounted.length > 0) {
+    const target = mounted.pop();
+    if (!target) {
+      break;
+    }
+
+    act(() => {
+      target.root.unmount();
+    });
+    target.container.remove();
+  }
+
+  vi.clearAllMocks();
+});
+
+describe("StatsSettings", () => {
+  it("应渲染新的统计总览与分析面板", async () => {
+    const container = renderComponent();
+    await waitForLoad();
+
+    const text = container.textContent ?? "";
+    expect(text).toContain("USAGE SNAPSHOT");
+    expect(text).toContain("阶段概览");
+    expect(text).toContain("模型使用排行");
+    expect(text).toContain("当前观察");
+    expect(text).toContain("每日使用趋势");
+    expect(text).toContain("活跃度日历");
+    expect(text).toContain("gpt-4.1");
+  });
+
+  it("切换时间范围后应重新拉取对应统计", async () => {
+    const container = renderComponent();
+    await waitForLoad();
+
+    const weekButton = Array.from(container.querySelectorAll("button")).find(
+      (button) => button.textContent?.includes("本周"),
+    );
+
+    if (!weekButton) {
+      throw new Error("未找到本周按钮");
+    }
+
+    await clickButton(weekButton);
+    await waitForLoad();
+
+    expect(mockGetUsageStats).toHaveBeenLastCalledWith("week");
+    expect(mockGetModelUsageRanking).toHaveBeenLastCalledWith("week");
+    expect(mockGetDailyUsageTrends).toHaveBeenLastCalledWith("week");
+  });
+});
diff --git a/src/components/settings-v2/account/stats/index.tsx b/src/components/settings-v2/account/stats/index.tsx
index 0f57d99ec..7a70d376b 100644
--- a/src/components/settings-v2/account/stats/index.tsx
+++ b/src/components/settings-v2/account/stats/index.tsx
@@ -1,19 +1,18 @@
 /**
  * 数据统计页面组件
  *
- * 参考成熟产品的数据统计实现
- * 功能包括：使用统计数据展示、Token 消耗统计等
+ * 采用设置首页一致的浅渐变摘要头图与信息面板布局，
+ * 聚合使用强度、模型分布与趋势信息。
  */
 
 import { useState, useEffect, useCallback } from "react";
 import {
   BarChart3,
-  MessageSquare,
-  Timer,
+  Brain,
+  CalendarDays,
   Coins,
-  TrendingUp,
-  Download,
   RefreshCw,
+  TrendingUp,
 } from "lucide-react";
 import { cn } from "@/lib/utils";
 import {
@@ -25,13 +24,155 @@ import {
   type UsageStatsResponse,
 } from "@/lib/api/usageStats";
 
+type TimeRange = "week" | "month" | "all";
+
+interface TimeRangeOption {
+  key: TimeRange;
+  label: string;
+  description: string;
+}
+
+interface SegmentCardProps {
+  title: string;
+  description: string;
+  conversations: number;
+  messages: number;
+  tokens: number;
+  minutes: number;
+  accentClassName: string;
+}
+
+interface MetricTileProps {
+  label: string;
+  value: string;
+}
+
+const TIME_RANGE_OPTIONS: TimeRangeOption[] = [
+  {
+    key: "week",
+    label: "本周",
+    description: "聚焦最近 7 天的使用波动。",
+  },
+  {
+    key: "month",
+    label: "本月",
+    description: "观察近 30 天的日常使用节奏。",
+  },
+  {
+    key: "all",
+    label: "全部",
+    description: "回看累计使用规模与长期趋势。",
+  },
+];
+
+const WEEKDAY_LABELS = ["日", "一", "二", "三", "四", "五", "六"];
+
+function formatNumber(num: number): string {
+  if (num >= 1000000) return `${(num / 1000000).toFixed(1)}M`;
+  if (num >= 1000) return `${(num / 1000).toFixed(1)}K`;
+  return num.toString();
+}
+
+function formatTime(minutes: number): string {
+  if (minutes >= 60) {
+    const hours = Math.floor(minutes / 60);
+    const mins = minutes % 60;
+    return `${hours}h ${mins}m`;
+  }
+  return `${minutes}m`;
+}
+
+function parseUsageDate(date: string) {
+  return new Date(date.includes("T") ? date : `${date}T00:00:00`);
+}
+
+function formatShortDate(date: string) {
+  return parseUsageDate(date).toLocaleDateString("zh-CN", {
+    month: "numeric",
+    day: "numeric",
+  });
+}
+
+function estimateMinutesFromTokens(
+  tokens: number,
+  totalTokens: number,
+  totalMinutes: number,
+) {
+  if (tokens <= 0 || totalTokens <= 0 || totalMinutes <= 0) {
+    return 0;
+  }
+
+  return Math.round((tokens / totalTokens) * totalMinutes);
+}
+
+function resolveHeatmapTone(tokens: number, maxTokens: number) {
+  if (tokens <= 0 || maxTokens <= 0) {
+    return "bg-slate-100";
+  }
+
+  const ratio = tokens / maxTokens;
+  if (ratio < 0.2) return "bg-emerald-100";
+  if (ratio < 0.4) return "bg-emerald-200";
+  if (ratio < 0.6) return "bg-emerald-300";
+  if (ratio < 0.8) return "bg-emerald-400";
+  return "bg-emerald-500";
+}
+
+function SegmentCard({
+  title,
+  description,
+  conversations,
+  messages,
+  tokens,
+  minutes,
+  accentClassName,
+}: SegmentCardProps) {
+  return (
+    <article className="rounded-[24px] border border-slate-200/80 bg-slate-50/60 p-4">
+      <div className="flex flex-col gap-4 xl:flex-row xl:items-center xl:justify-between">
+        <div className="flex-1 space-y-2">
+          <span
+            className={cn(
+              "inline-flex items-center rounded-full border px-3 py-1 text-xs font-medium",
+              accentClassName,
+            )}
+          >
+            {title}
+          </span>
+          <p className="text-sm leading-6 text-slate-500">{description}</p>
+        </div>
+        <span className="rounded-full border border-slate-200 bg-white px-3 py-1 text-xs font-medium text-slate-500">
+          {messages} 条消息
+        </span>
+      </div>
+
+      <div className="mt-5 grid gap-3 sm:grid-cols-3 xl:min-w-[420px]">
+        <MetricTile label="对话" value={conversations.toString()} />
+        <MetricTile label="Token" value={formatNumber(tokens)} />
+        <MetricTile label="时长" value={formatTime(minutes)} />
+      </div>
+    </article>
+  );
+}
+
+function MetricTile({ label, value }: MetricTileProps) {
+  return (
+    <div className="rounded-[18px] border border-white/90 bg-white/92 px-4 py-4 shadow-sm">
+      <p className="text-xs font-medium text-slate-500">{label}</p>
+      <p className="mt-2 text-[30px] font-semibold tracking-tight text-slate-900">
+        {value}
+      </p>
+    </div>
+  );
+}
+
 export function StatsSettings() {
   const [loading, setLoading] = useState(true);
   const [stats, setStats] = useState<UsageStatsResponse | null>(null);
   const [modelUsage, setModelUsage] = useState<ModelUsage[]>([]);
   const [dailyUsage, setDailyUsage] = useState<DailyUsage[]>([]);
   const [error, setError] = useState<string | null>(null);
-  const [timeRange, setTimeRange] = useState<"week" | "month" | "all">("month");
+  const [timeRange, setTimeRange] = useState<TimeRange>("month");
 
   const loadStats = useCallback(async () => {
     setLoading(true);
@@ -62,331 +203,600 @@ export function StatsSettings() {
     loadStats();
   }, [loadStats]);
 
-  const formatNumber = (num: number): string => {
-    if (num >= 1000000) return `${(num / 1000000).toFixed(1)}M`;
-    if (num >= 1000) return `${(num / 1000).toFixed(1)}K`;
-    return num.toString();
-  };
-
-  const formatTime = (minutes: number): string => {
-    if (minutes >= 60) {
-      const hours = Math.floor(minutes / 60);
-      const mins = minutes % 60;
-      return `${hours}h ${mins}m`;
-    }
-    return `${minutes}m`;
-  };
-
-  const StatCard = ({
-    icon: Icon,
-    label,
-    value,
-    subvalue,
-    trend,
-  }: {
-    icon: any;
-    label: string;
-    value: string;
-    subvalue?: string;
-    trend?: number;
-  }) => (
-    <div className="flex-1 min-w-[140px] p-4 rounded-lg border bg-gradient-to-br from-primary/5 to-primary/10">
-      <div className="flex items-center gap-2 mb-2">
-        <Icon className="h-4 w-4 text-primary" />
-        <span className="text-xs text-muted-foreground">{label}</span>
-      </div>
-      <div className="text-2xl font-bold text-primary mb-1">{value}</div>
-      {subvalue && (
-        <div className="text-xs text-muted-foreground">{subvalue}</div>
-      )}
-      {trend !== undefined && (
-        <div className="flex items-center gap-1 mt-1">
-          <TrendingUp className="h-3 w-3 text-green-500" />
-          <span className="text-xs text-green-500">{trend}%</span>
-        </div>
-      )}
-    </div>
-  );
-
   const maxDailyTokens =
     dailyUsage.length > 0
       ? Math.max(...dailyUsage.map((day) => day.tokens))
       : 0;
+  const totalRangeTokens = dailyUsage.reduce((sum, day) => sum + day.tokens, 0);
+  const totalRangeConversations = dailyUsage.reduce(
+    (sum, day) => sum + day.conversations,
+    0,
+  );
+  const activeDays = dailyUsage.filter(
+    (day) => day.tokens > 0 || day.conversations > 0,
+  ).length;
+  const averageDailyTokens =
+    activeDays > 0 ? Math.round(totalRangeTokens / activeDays) : 0;
+  const peakDay = dailyUsage.reduce<DailyUsage | null>((currentPeak, day) => {
+    if (!currentPeak || day.tokens > currentPeak.tokens) {
+      return day;
+    }
+    return currentPeak;
+  }, null);
+  const topModel = modelUsage[0] || null;
+  const secondaryModels = modelUsage.slice(1, 4);
+  const selectedRange =
+    TIME_RANGE_OPTIONS.find((option) => option.key === timeRange) ||
+    TIME_RANGE_OPTIONS[1];
+  const peakDayLabel = peakDay
+    ? `${formatShortDate(peakDay.date)} · ${formatNumber(peakDay.tokens)} Token`
+    : "暂无数据";
+  const chartGuideValues =
+    maxDailyTokens > 0
+      ? [1, 0.75, 0.5, 0.25, 0].map((ratio) =>
+          Math.round(maxDailyTokens * ratio),
+        )
+      : [0, 0, 0, 0, 0];
+  const trendLabelStep =
+    dailyUsage.length > 10 ? Math.ceil(dailyUsage.length / 7) : 1;
+  const heatmapDays = dailyUsage.slice(-35);
+  const heatmapRangeLabel =
+    heatmapDays.length > 0
+      ? `${formatShortDate(heatmapDays[0].date)} - ${formatShortDate(
+          heatmapDays[heatmapDays.length - 1].date,
+        )}`
+      : "暂无活跃记录";
+  const heatmapCells: Array<DailyUsage | null> = [
+    ...Array.from(
+      { length: Math.max(35 - heatmapDays.length, 0) },
+      () => null,
+    ),
+    ...heatmapDays,
+  ];
+  const isInitialLoading = loading && !stats && !error;
 
-  return (
-    <div className="space-y-4 max-w-4xl">
-      {/* 时间范围选择 */}
-      <div className="flex items-center justify-between">
-        <div className="flex items-center gap-2">
-          <BarChart3 className="h-5 w-5 text-primary" />
-          <h2 className="text-lg font-semibold">使用统计</h2>
+  if (isInitialLoading) {
+    return (
+      <div className="space-y-6 pb-8">
+        <div className="h-[228px] animate-pulse rounded-[30px] border border-slate-200/80 bg-[linear-gradient(135deg,rgba(244,251,248,0.98)_0%,rgba(248,250,252,0.98)_45%,rgba(241,246,255,0.96)_100%)]" />
+        <div className="grid gap-6 xl:grid-cols-[minmax(0,1.35fr)_minmax(320px,0.95fr)]">
+          <div className="h-[398px] animate-pulse rounded-[26px] border border-slate-200/80 bg-white" />
+          <div className="space-y-6">
+            <div className="h-[260px] animate-pulse rounded-[26px] border border-slate-200/80 bg-white" />
+            <div className="h-[220px] animate-pulse rounded-[26px] border border-slate-200/80 bg-white" />
+          </div>
         </div>
-        <div className="flex items-center gap-2">
-          <button
-            onClick={() => setTimeRange("week")}
-            className={cn(
-              "px-3 py-1.5 rounded text-sm transition-colors",
-              timeRange === "week"
-                ? "bg-primary text-primary-foreground"
-                : "hover:bg-muted",
-            )}
-          >
-            本周
-          </button>
-          <button
-            onClick={() => setTimeRange("month")}
-            className={cn(
-              "px-3 py-1.5 rounded text-sm transition-colors",
-              timeRange === "month"
-                ? "bg-primary text-primary-foreground"
-                : "hover:bg-muted",
-            )}
-          >
-            本月
-          </button>
-          <button
-            onClick={() => setTimeRange("all")}
-            className={cn(
-              "px-3 py-1.5 rounded text-sm transition-colors",
-              timeRange === "all"
-                ? "bg-primary text-primary-foreground"
-                : "hover:bg-muted",
-            )}
-          >
-            全部
-          </button>
-          <button
-            onClick={loadStats}
-            disabled={loading}
-            className="p-2 rounded hover:bg-muted transition-colors"
-          >
-            <RefreshCw className={cn("h-4 w-4", loading && "animate-spin")} />
-          </button>
+        <div className="grid gap-6 xl:grid-cols-[minmax(0,1.35fr)_minmax(320px,0.95fr)]">
+          <div className="h-[320px] animate-pulse rounded-[26px] border border-slate-200/80 bg-white" />
+          <div className="h-[320px] animate-pulse rounded-[26px] border border-slate-200/80 bg-white" />
         </div>
       </div>
+    );
+  }
 
+  return (
+    <div className="space-y-6 pb-8">
       {error && (
-        <div className="rounded-md border border-destructive/40 bg-destructive/5 px-3 py-2 text-sm text-destructive">
-          {error}
+        <div className="flex items-center justify-between gap-4 rounded-[20px] border border-rose-200 bg-rose-50/90 px-4 py-3 text-sm text-rose-700 shadow-sm shadow-slate-950/5">
+          <span>{error}</span>
+          <button
+            type="button"
+            onClick={loadStats}
+            className="rounded-full border border-rose-200 bg-white px-3 py-1.5 text-xs font-medium text-rose-700 transition hover:border-rose-300 hover:bg-rose-50"
+          >
+            重新加载
+          </button>
         </div>
       )}
 
-      {loading ? (
-        <div className="flex items-center justify-center py-16">
-          <RefreshCw className="h-8 w-8 animate-spin text-muted-foreground" />
-        </div>
-      ) : stats ? (
-        <>
-          {/* 今日统计 */}
-          <div>
-            <h3 className="text-sm font-medium mb-3">今日</h3>
-            <div className="flex gap-3 overflow-x-auto pb-2">
-              <StatCard
-                icon={MessageSquare}
-                label="对话"
-                value={stats.today_conversations.toString()}
-                subvalue={`${stats.today_messages} 条消息`}
-              />
-              <StatCard
-                icon={Coins}
-                label="Token"
-                value={formatNumber(stats.today_tokens)}
-              />
-              <StatCard
-                icon={Timer}
-                label="时长"
-                value={formatTime(
-                  Math.round(
-                    (stats.today_tokens / (stats.total_tokens || 1)) *
-                      stats.total_time_minutes,
-                  ),
-                )}
-              />
-            </div>
-          </div>
+      <section className="relative overflow-hidden rounded-[30px] border border-emerald-200/70 bg-[linear-gradient(135deg,rgba(244,251,248,0.98)_0%,rgba(248,250,252,0.98)_45%,rgba(241,246,255,0.96)_100%)] shadow-sm shadow-slate-950/5">
+        <div className="pointer-events-none absolute -left-20 top-[-72px] h-56 w-56 rounded-full bg-emerald-200/30 blur-3xl" />
+        <div className="pointer-events-none absolute right-[-76px] top-[-24px] h-56 w-56 rounded-full bg-sky-200/28 blur-3xl" />
 
-          {/* 本月统计 */}
-          <div>
-            <h3 className="text-sm font-medium mb-3">本月</h3>
-            <div className="flex gap-3 overflow-x-auto pb-2">
-              <StatCard
-                icon={MessageSquare}
-                label="对话"
-                value={stats.monthly_conversations.toString()}
-                subvalue={`${stats.monthly_messages} 条消息`}
-              />
-              <StatCard
-                icon={Coins}
-                label="Token"
-                value={formatNumber(stats.monthly_tokens)}
-              />
-              <StatCard
-                icon={Timer}
-                label="时长"
-                value={formatTime(
-                  Math.round(
-                    (stats.monthly_tokens / (stats.total_tokens || 1)) *
-                      stats.total_time_minutes,
-                  ),
-                )}
-              />
-            </div>
-          </div>
-
-          {/* 总计 */}
-          <div>
-            <h3 className="text-sm font-medium mb-3">总计</h3>
-            <div className="flex gap-3 overflow-x-auto pb-2">
-              <StatCard
-                icon={MessageSquare}
-                label="对话"
-                value={stats.total_conversations.toString()}
-                subvalue={`${stats.total_messages} 条消息`}
-              />
-              <StatCard
-                icon={Coins}
-                label="Token"
-                value={formatNumber(stats.total_tokens)}
-              />
-              <StatCard
-                icon={Timer}
-                label="时长"
-                value={formatTime(stats.total_time_minutes)}
-              />
-            </div>
-          </div>
-
-          {/* 模型使用排行 */}
-          <div className="rounded-lg border p-4">
-            <h3 className="text-sm font-medium mb-4">模型使用排行</h3>
-            {modelUsage.length > 0 ? (
-              <div className="space-y-3">
-                {modelUsage.map((model, index) => (
-                  <div key={model.model} className="space-y-1">
-                    <div className="flex items-center justify-between text-sm">
-                      <div className="flex items-center gap-2">
-                        <span className="text-muted-foreground">
-                          #{index + 1}
-                        </span>
-                        <span className="font-medium">{model.model}</span>
-                      </div>
-                      <div className="flex items-center gap-4 text-xs text-muted-foreground">
-                        <span>{model.conversations} 次对话</span>
-                        <span>{formatNumber(model.tokens)} Token</span>
-                        <span className="text-primary font-medium">
-                          {model.percentage}%
-                        </span>
-                      </div>
-                    </div>
-                    <div className="h-1.5 bg-muted rounded-full overflow-hidden">
-                      <div
-                        className="h-full bg-primary rounded-full transition-all"
-                        style={{ width: `${Math.min(model.percentage, 100)}%` }}
-                      />
-                    </div>
-                  </div>
-                ))}
+        <div className="relative flex flex-col gap-6 p-6 lg:p-8">
+          <div className="grid gap-6 xl:grid-cols-[minmax(0,1.08fr)_minmax(380px,0.92fr)] xl:items-stretch">
+            <div className="max-w-3xl space-y-5">
+              <span className="inline-flex items-center rounded-full border border-emerald-200 bg-white/85 px-3 py-1 text-xs font-semibold tracking-[0.16em] text-emerald-700 shadow-sm">
+                USAGE SNAPSHOT
+              </span>
+              <div className="space-y-2">
+                <p className="text-[28px] font-semibold tracking-tight text-slate-900">
+                  观察最近的使用强度
+                </p>
+                <p className="max-w-2xl text-sm leading-7 text-slate-600">
+                  将当前区间的 Token 消耗、活跃天数与主力模型放在同一个视图里，
+                  方便快速判断近期是否进入高频使用状态。
+                </p>
               </div>
-            ) : (
-              <div className="text-sm text-muted-foreground">
-                暂无模型使用数据
-              </div>
-            )}
-          </div>
 
-          {/* 每日使用趋势 */}
-          <div className="rounded-lg border p-4">
-            <div className="flex items-center justify-between mb-4">
-              <h3 className="text-sm font-medium">每日使用趋势</h3>
-              <button className="flex items-center gap-1 text-xs text-muted-foreground hover:text-foreground">
-                <Download className="h-3 w-3" />
-                导出
-              </button>
-            </div>
-            <div className="h-40 flex items-end gap-1">
-              {dailyUsage.map((day, _index) => {
-                const height =
-                  maxDailyTokens > 0 ? (day.tokens / maxDailyTokens) * 100 : 0;
-                return (
-                  <div
-                    key={day.date}
-                    className="flex-1 flex flex-col items-center gap-1 group"
-                  >
-                    <div
-                      className="w-full bg-primary/60 hover:bg-primary rounded-t transition-colors relative"
-                      style={{ height: `${Math.max(height, 4)}%` }}
-                    >
-                      <div className="absolute -top-8 left-1/2 -translate-x-1/2 bg-popover border px-2 py-1 rounded text-xs opacity-0 group-hover:opacity-100 transition-opacity whitespace-nowrap">
-                        {formatNumber(day.tokens)} Token
-                      </div>
-                    </div>
-                    <div className="text-[10px] text-muted-foreground truncate w-full text-center">
-                      {new Date(day.date).toLocaleDateString("zh-CN", {
-                        month: "numeric",
-                        day: "numeric",
-                      })}
-                    </div>
-                  </div>
-                );
-              })}
-            </div>
-          </div>
-
-          {/* 使用日历热力图（简化版） */}
-          <div className="rounded-lg border p-4">
-            <div className="flex items-center justify-between mb-4">
-              <h3 className="text-sm font-medium">活跃度日历</h3>
-              <div className="flex items-center gap-2 text-xs text-muted-foreground">
-                <span>少</span>
-                <div className="flex gap-0.5">
-                  <div className="w-3 h-3 rounded-sm bg-primary/10" />
-                  <div className="w-3 h-3 rounded-sm bg-primary/30" />
-                  <div className="w-3 h-3 rounded-sm bg-primary/50" />
-                  <div className="w-3 h-3 rounded-sm bg-primary/70" />
-                  <div className="w-3 h-3 rounded-sm bg-primary" />
-                </div>
-                <span>多</span>
-              </div>
-            </div>
-            <div className="grid grid-cols-7 gap-1">
-              {["日", "一", "二", "三", "四", "五", "六"].map((day) => (
-                <div
-                  key={day}
-                  className="text-xs text-muted-foreground text-center py-1"
-                >
-                  {day}
-                </div>
-              ))}
-              {Array.from({ length: 35 }).map((_, index) => {
-                const dayData = dailyUsage[index];
-                const getIntensity = (tokens: number) => {
-                  if (!dayData) return "bg-muted";
-                  if (maxDailyTokens <= 0) return "bg-primary/10";
-                  const max = maxDailyTokens;
-                  const ratio = tokens / max;
-                  if (ratio < 0.2) return "bg-primary/10";
-                  if (ratio < 0.4) return "bg-primary/30";
-                  if (ratio < 0.6) return "bg-primary/50";
-                  if (ratio < 0.8) return "bg-primary/70";
-                  return "bg-primary";
-                };
-                return (
-                  <div
-                    key={index}
+              <div className="flex flex-wrap items-center gap-2">
+                {TIME_RANGE_OPTIONS.map((option) => (
+                  <button
+                    key={option.key}
+                    type="button"
+                    onClick={() => setTimeRange(option.key)}
                     className={cn(
-                      "aspect-square rounded-sm",
-                      dayData ? getIntensity(dayData.tokens) : "bg-muted",
+                      "rounded-full px-3 py-1.5 text-sm font-medium transition",
+                      timeRange === option.key
+                        ? "bg-slate-900 text-white shadow-sm"
+                        : "border border-white/90 bg-white/85 text-slate-600 shadow-sm hover:border-slate-300 hover:text-slate-900",
                     )}
-                    title={
-                      dayData ? `${dayData.date}: ${dayData.tokens} Token` : ""
-                    }
+                  >
+                    {option.label}
+                  </button>
+                ))}
+
+                <button
+                  type="button"
+                  onClick={loadStats}
+                  disabled={loading}
+                  className="inline-flex items-center gap-2 rounded-full border border-white/90 bg-white/85 px-3 py-1.5 text-sm font-medium text-slate-600 shadow-sm transition hover:border-slate-300 hover:text-slate-900 disabled:cursor-not-allowed disabled:opacity-70"
+                >
+                  <RefreshCw
+                    className={cn("h-4 w-4", loading && "animate-spin")}
                   />
-                );
-              })}
+                  刷新数据
+                </button>
+              </div>
+
+              <div className="flex flex-wrap gap-2">
+                <span className="rounded-full border border-white/90 bg-white/80 px-3 py-1.5 text-xs font-medium text-slate-600 shadow-sm">
+                  当前统计口径：{selectedRange.label}
+                </span>
+                <span className="rounded-full border border-white/90 bg-white/80 px-3 py-1.5 text-xs font-medium text-slate-600 shadow-sm">
+                  活跃 {activeDays} 天
+                </span>
+                <span className="rounded-full border border-white/90 bg-white/80 px-3 py-1.5 text-xs font-medium text-slate-600 shadow-sm">
+                  日均 {formatNumber(averageDailyTokens)} Token
+                </span>
+              </div>
+
+              <p className="text-xs leading-5 text-slate-500">
+                {selectedRange.description}
+              </p>
             </div>
+
+            <article className="flex h-full flex-col rounded-[26px] border border-white/90 bg-white/84 p-5 shadow-sm shadow-slate-950/5 backdrop-blur-[2px]">
+              <div className="flex items-start justify-between gap-4">
+                <div>
+                  <div className="flex items-center gap-2 text-sm font-semibold text-slate-900">
+                    <TrendingUp className="h-4 w-4 text-sky-600" />
+                    当前观察
+                  </div>
+                  <p className="mt-1 text-sm leading-6 text-slate-500">
+                    用一个摘要面板快速查看这段时间的主要节奏。
+                  </p>
+                </div>
+                <span className="rounded-full border border-emerald-200 bg-emerald-50 px-3 py-1 text-xs font-medium text-emerald-700">
+                  {selectedRange.label}
+                </span>
+              </div>
+
+              <div className="mt-5 rounded-[24px] border border-slate-200/80 bg-[linear-gradient(145deg,rgba(255,255,255,0.95)_0%,rgba(239,246,255,0.82)_100%)] p-5 shadow-sm">
+                <div className="flex items-center gap-2 text-xs font-medium tracking-[0.12em] text-slate-500">
+                  <Coins className="h-3.5 w-3.5 text-slate-400" />
+                  当前区间 TOKEN
+                </div>
+                <p className="mt-3 text-4xl font-semibold tracking-tight text-slate-900">
+                  {formatNumber(totalRangeTokens)}
+                </p>
+                <p className="mt-2 text-sm leading-6 text-slate-500">
+                  {topModel
+                    ? `主力模型 ${topModel.model}，占比 ${topModel.percentage}%`
+                    : "当前区间还没有模型排行数据"}
+                </p>
+              </div>
+
+              <div className="mt-4 grid gap-3 sm:grid-cols-2">
+                <div className="rounded-[20px] border border-slate-200/80 bg-slate-50/70 px-4 py-4">
+                  <div className="flex items-center gap-2 text-xs font-medium text-slate-500">
+                    <CalendarDays className="h-3.5 w-3.5 text-slate-400" />
+                    活跃天数
+                  </div>
+                  <p className="mt-2 text-2xl font-semibold tracking-tight text-slate-900">
+                    {activeDays}
+                  </p>
+                </div>
+                <div className="rounded-[20px] border border-slate-200/80 bg-slate-50/70 px-4 py-4">
+                  <div className="flex items-center gap-2 text-xs font-medium text-slate-500">
+                    <BarChart3 className="h-3.5 w-3.5 text-slate-400" />
+                    日均 Token
+                  </div>
+                  <p className="mt-2 text-2xl font-semibold tracking-tight text-slate-900">
+                    {formatNumber(averageDailyTokens)}
+                  </p>
+                </div>
+                <div className="rounded-[20px] border border-slate-200/80 bg-slate-50/70 px-4 py-4">
+                  <div className="flex items-center gap-2 text-xs font-medium text-slate-500">
+                    <Brain className="h-3.5 w-3.5 text-slate-400" />
+                    主力模型
+                  </div>
+                  <p className="mt-2 truncate text-lg font-semibold tracking-tight text-slate-900">
+                    {topModel?.model || "暂无数据"}
+                  </p>
+                </div>
+                <div className="rounded-[20px] border border-slate-200/80 bg-slate-50/70 px-4 py-4">
+                  <div className="flex items-center gap-2 text-xs font-medium text-slate-500">
+                    <TrendingUp className="h-3.5 w-3.5 text-slate-400" />
+                    峰值日期
+                  </div>
+                  <p className="mt-2 text-sm font-semibold leading-6 text-slate-900">
+                    {peakDayLabel}
+                  </p>
+                </div>
+              </div>
+            </article>
           </div>
+        </div>
+      </section>
+
+      {stats ? (
+        <>
+          <section className="grid gap-6 xl:grid-cols-[minmax(0,1.72fr)_minmax(360px,0.82fr)]">
+            <article className="rounded-[26px] border border-slate-200/80 bg-white p-5 shadow-sm shadow-slate-950/5">
+              <div className="flex items-start justify-between gap-4">
+                <div>
+                  <div className="flex items-center gap-2 text-sm font-semibold text-slate-900">
+                    <BarChart3 className="h-4 w-4 text-sky-600" />
+                    阶段概览
+                  </div>
+                  <p className="mt-1 text-sm leading-6 text-slate-500">
+                    按今日、本月与累计三个区段拆解对话量、Token 消耗和估算时长。
+                  </p>
+                </div>
+                <span className="rounded-full border border-slate-200 bg-slate-50 px-3 py-1 text-xs font-medium text-slate-500">
+                  3 个区段
+                </span>
+              </div>
+
+              <div className="mt-5 space-y-4">
+                <SegmentCard
+                  title="今日"
+                  description="快速判断当前是否处于高频使用状态。"
+                  conversations={stats.today_conversations}
+                  messages={stats.today_messages}
+                  tokens={stats.today_tokens}
+                  minutes={estimateMinutesFromTokens(
+                    stats.today_tokens,
+                    stats.total_tokens,
+                    stats.total_time_minutes,
+                  )}
+                  accentClassName="border-sky-200 bg-sky-50 text-sky-700"
+                />
+                <SegmentCard
+                  title="本月"
+                  description="观察最近一个月的常态使用节奏。"
+                  conversations={stats.monthly_conversations}
+                  messages={stats.monthly_messages}
+                  tokens={stats.monthly_tokens}
+                  minutes={estimateMinutesFromTokens(
+                    stats.monthly_tokens,
+                    stats.total_tokens,
+                    stats.total_time_minutes,
+                  )}
+                  accentClassName="border-emerald-200 bg-emerald-50 text-emerald-700"
+                />
+                <SegmentCard
+                  title="累计"
+                  description="回看整体使用规模与长期投入。"
+                  conversations={stats.total_conversations}
+                  messages={stats.total_messages}
+                  tokens={stats.total_tokens}
+                  minutes={stats.total_time_minutes}
+                  accentClassName="border-slate-200 bg-slate-100 text-slate-700"
+                />
+              </div>
+            </article>
+
+            <div className="space-y-6">
+              <article className="rounded-[26px] border border-slate-200/80 bg-white p-5 shadow-sm shadow-slate-950/5">
+                <div className="flex items-start justify-between gap-4">
+                  <div>
+                    <div className="flex items-center gap-2 text-sm font-semibold text-slate-900">
+                      <Brain className="h-4 w-4 text-emerald-600" />
+                      模型使用排行
+                    </div>
+                    <p className="mt-1 text-sm leading-6 text-slate-500">
+                      查看当前区间内最常使用的模型与使用占比。
+                    </p>
+                  </div>
+                  <span className="rounded-full border border-emerald-200 bg-emerald-50 px-3 py-1 text-xs font-medium text-emerald-700">
+                    {modelUsage.length} 个模型
+                  </span>
+                </div>
+
+                <div className="mt-5 space-y-4">
+                  {modelUsage.length > 0 ? (
+                    <>
+                      <article className="rounded-[24px] border border-emerald-200/80 bg-[linear-gradient(145deg,rgba(248,252,250,0.98)_0%,rgba(240,249,255,0.92)_100%)] p-5 shadow-sm">
+                        <div className="flex items-start justify-between gap-4">
+                          <div className="min-w-0">
+                            <span className="inline-flex items-center rounded-full border border-emerald-200 bg-white/90 px-3 py-1 text-[11px] font-medium text-emerald-700">
+                              #1 主力模型
+                            </span>
+                            <p className="mt-3 truncate text-2xl font-semibold tracking-tight text-slate-900">
+                              {topModel?.model}
+                            </p>
+                            <p className="mt-2 text-sm leading-6 text-slate-500">
+                              {topModel?.conversations || 0} 次对话 ·{" "}
+                              {formatNumber(topModel?.tokens || 0)} Token
+                            </p>
+                          </div>
+                          <div className="rounded-[20px] border border-white/90 bg-white/88 px-4 py-3 text-right shadow-sm">
+                            <p className="text-xs font-medium text-slate-500">
+                              使用占比
+                            </p>
+                            <p className="mt-2 text-3xl font-semibold tracking-tight text-slate-900">
+                              {topModel?.percentage || 0}%
+                            </p>
+                          </div>
+                        </div>
+
+                        <div className="mt-4 h-2.5 overflow-hidden rounded-full bg-white/90">
+                          <div
+                            className="h-full rounded-full bg-[linear-gradient(90deg,rgba(16,185,129,0.9)_0%,rgba(15,23,42,0.92)_100%)] transition-all"
+                            style={{
+                              width: `${Math.min(topModel?.percentage || 0, 100)}%`,
+                            }}
+                          />
+                        </div>
+                      </article>
+
+                      {secondaryModels.length > 0 ? (
+                        <div className="space-y-3">
+                          {secondaryModels.map((model, index) => (
+                            <div
+                              key={model.model}
+                              className="rounded-[20px] border border-slate-200/80 bg-slate-50/60 p-4"
+                            >
+                              <div className="flex items-start justify-between gap-3">
+                                <div className="min-w-0">
+                                  <div className="flex items-center gap-2">
+                                    <span className="rounded-full border border-slate-200 bg-white px-2 py-0.5 text-[11px] font-medium text-slate-500">
+                                      #{index + 2}
+                                    </span>
+                                    <p className="truncate text-sm font-semibold text-slate-900">
+                                      {model.model}
+                                    </p>
+                                  </div>
+                                  <p className="mt-2 text-xs leading-5 text-slate-500">
+                                    {model.conversations} 次对话 ·{" "}
+                                    {formatNumber(model.tokens)} Token
+                                  </p>
+                                </div>
+                                <span className="text-sm font-semibold text-slate-900">
+                                  {model.percentage}%
+                                </span>
+                              </div>
+                              <div className="mt-3 h-2 overflow-hidden rounded-full bg-slate-100">
+                                <div
+                                  className="h-full rounded-full bg-slate-900 transition-all"
+                                  style={{
+                                    width: `${Math.min(model.percentage, 100)}%`,
+                                  }}
+                                />
+                              </div>
+                            </div>
+                          ))}
+                        </div>
+                      ) : null}
+                    </>
+                  ) : (
+                    <div className="rounded-[20px] border border-dashed border-slate-300 bg-slate-50/60 px-4 py-6 text-sm leading-6 text-slate-500">
+                      当前区间还没有模型使用数据。
+                    </div>
+                  )}
+                </div>
+              </article>
+            </div>
+          </section>
+
+          <section className="grid gap-6 xl:grid-cols-[minmax(0,1.72fr)_minmax(360px,0.82fr)]">
+            <article className="rounded-[26px] border border-slate-200/80 bg-white p-5 shadow-sm shadow-slate-950/5">
+              <div className="flex items-start justify-between gap-4">
+                <div>
+                  <div className="flex items-center gap-2 text-sm font-semibold text-slate-900">
+                    <Coins className="h-4 w-4 text-emerald-600" />
+                    每日使用趋势
+                  </div>
+                  <p className="mt-1 text-sm leading-6 text-slate-500">
+                    观察 {selectedRange.label} 内每日 Token 波动，识别高峰与低谷。
+                  </p>
+                </div>
+                <div className="flex flex-wrap gap-2 text-xs text-slate-500">
+                  <span className="rounded-full border border-slate-200 bg-slate-50 px-3 py-1">
+                    {formatNumber(totalRangeTokens)} Token
+                  </span>
+                  <span className="rounded-full border border-slate-200 bg-slate-50 px-3 py-1">
+                    {totalRangeConversations} 次对话
+                  </span>
+                </div>
+              </div>
+
+              {dailyUsage.length > 0 ? (
+                <div className="mt-6 rounded-[24px] border border-slate-200/80 bg-slate-50/60 p-4">
+                  <div className="grid gap-3 sm:grid-cols-3">
+                    <div className="rounded-[18px] border border-white/90 bg-white/88 px-4 py-3 shadow-sm">
+                      <p className="text-xs font-medium text-slate-500">
+                        峰值日
+                      </p>
+                      <p className="mt-2 text-sm font-semibold leading-6 text-slate-900">
+                        {peakDayLabel}
+                      </p>
+                    </div>
+                    <div className="rounded-[18px] border border-white/90 bg-white/88 px-4 py-3 shadow-sm">
+                      <p className="text-xs font-medium text-slate-500">
+                        活跃天数
+                      </p>
+                      <p className="mt-2 text-2xl font-semibold tracking-tight text-slate-900">
+                        {activeDays}
+                      </p>
+                    </div>
+                    <div className="rounded-[18px] border border-white/90 bg-white/88 px-4 py-3 shadow-sm">
+                      <p className="text-xs font-medium text-slate-500">
+                        区间均值
+                      </p>
+                      <p className="mt-2 text-2xl font-semibold tracking-tight text-slate-900">
+                        {formatNumber(averageDailyTokens)}
+                      </p>
+                    </div>
+                  </div>
+
+                  <div className="mt-6 grid grid-cols-[44px_minmax(0,1fr)] gap-3">
+                    <div className="relative h-64">
+                      {chartGuideValues.map((value, index) => (
+                        <div
+                          key={`${value}-${index}`}
+                          className="absolute right-0 translate-y-1/2 text-[10px] font-medium text-slate-400"
+                          style={{
+                            bottom: `${(index / (chartGuideValues.length - 1)) * 100}%`,
+                          }}
+                        >
+                          {formatNumber(value)}
+                        </div>
+                      ))}
+                    </div>
+
+                    <div className="relative h-64">
+                      <div className="pointer-events-none absolute inset-0">
+                        {chartGuideValues.map((_, index) => (
+                          <div
+                            key={index}
+                            className="absolute inset-x-0 border-t border-dashed border-slate-200"
+                            style={{
+                              bottom: `${(index / (chartGuideValues.length - 1)) * 100}%`,
+                            }}
+                          />
+                        ))}
+                      </div>
+
+                      <div className="relative flex h-full items-end gap-2">
+                        {dailyUsage.map((day, index) => {
+                          const height =
+                            maxDailyTokens > 0
+                              ? (day.tokens / maxDailyTokens) * 100
+                              : 0;
+                          const showLabel =
+                            index % trendLabelStep === 0 ||
+                            index === dailyUsage.length - 1;
+
+                          return (
+                            <div
+                              key={day.date}
+                              className="group flex h-full min-w-0 flex-1 flex-col items-center justify-end gap-2"
+                            >
+                              <div className="relative flex w-full flex-1 items-end rounded-[16px] border border-white/90 bg-white/80 px-1.5 pb-1.5 shadow-sm">
+                                <div
+                                  className="w-full rounded-[12px] bg-[linear-gradient(180deg,rgba(15,23,42,0.72)_0%,rgba(15,23,42,0.96)_100%)] transition-all group-hover:brightness-105"
+                                  style={{ height: `${Math.max(height, 6)}%` }}
+                                >
+                                  <div className="absolute -top-8 left-1/2 -translate-x-1/2 rounded-full border border-slate-200 bg-white px-2 py-1 text-[10px] font-medium text-slate-600 opacity-0 shadow-sm transition-opacity group-hover:opacity-100 whitespace-nowrap">
+                                    {formatNumber(day.tokens)} Token
+                                  </div>
+                                </div>
+                              </div>
+                              <div className="h-4 text-[10px] text-slate-400">
+                                {showLabel ? formatShortDate(day.date) : ""}
+                              </div>
+                            </div>
+                          );
+                        })}
+                      </div>
+                    </div>
+                  </div>
+                </div>
+              ) : (
+                <div className="mt-6 rounded-[22px] border border-dashed border-slate-300 bg-slate-50/60 px-4 py-10 text-center text-sm leading-6 text-slate-500">
+                  当前区间还没有每日趋势数据。
+                </div>
+              )}
+            </article>
+
+            <article className="rounded-[26px] border border-slate-200/80 bg-white p-5 shadow-sm shadow-slate-950/5">
+              <div className="flex items-start justify-between gap-4">
+                <div>
+                  <div className="flex items-center gap-2 text-sm font-semibold text-slate-900">
+                    <CalendarDays className="h-4 w-4 text-sky-600" />
+                    活跃度日历
+                  </div>
+                  <p className="mt-1 text-sm leading-6 text-slate-500">
+                    以最近 35 天的活跃热度查看调用分布，颜色越深表示 Token 越多。
+                  </p>
+                </div>
+                <div className="flex items-center gap-2 text-xs text-slate-500">
+                  <span>少</span>
+                  <div className="flex gap-1">
+                    <div className="h-3 w-3 rounded-sm bg-emerald-100" />
+                    <div className="h-3 w-3 rounded-sm bg-emerald-200" />
+                    <div className="h-3 w-3 rounded-sm bg-emerald-300" />
+                    <div className="h-3 w-3 rounded-sm bg-emerald-400" />
+                    <div className="h-3 w-3 rounded-sm bg-emerald-500" />
+                  </div>
+                  <span>多</span>
+                </div>
+              </div>
+
+              <div className="mt-6 rounded-[24px] border border-slate-200/80 bg-slate-50/60 p-4">
+                <div className="grid gap-3 sm:grid-cols-2">
+                  <div className="rounded-[18px] border border-white/90 bg-white/88 px-4 py-3 shadow-sm">
+                    <p className="text-xs font-medium text-slate-500">
+                      覆盖范围
+                    </p>
+                    <p className="mt-2 text-sm font-semibold leading-6 text-slate-900">
+                      {heatmapRangeLabel}
+                    </p>
+                  </div>
+                  <div className="rounded-[18px] border border-white/90 bg-white/88 px-4 py-3 shadow-sm">
+                    <p className="text-xs font-medium text-slate-500">
+                      有效活跃格
+                    </p>
+                    <p className="mt-2 text-2xl font-semibold tracking-tight text-slate-900">
+                      {activeDays}
+                    </p>
+                  </div>
+                </div>
+
+                <div className="mt-5 grid grid-cols-7 gap-2">
+                  {WEEKDAY_LABELS.map((day) => (
+                    <div
+                      key={day}
+                      className="pb-1 text-center text-[11px] font-medium text-slate-400"
+                    >
+                      {day}
+                    </div>
+                  ))}
+                  {heatmapCells.map((day, index) => (
+                    <div
+                      key={`${day?.date || "empty"}-${index}`}
+                      className={cn(
+                        "group relative aspect-square rounded-[10px] border border-white/80 shadow-sm transition-transform hover:-translate-y-0.5",
+                        day
+                          ? resolveHeatmapTone(day.tokens, maxDailyTokens)
+                          : "bg-slate-100",
+                      )}
+                      title={
+                        day
+                          ? `${day.date}: ${formatNumber(day.tokens)} Token`
+                          : ""
+                      }
+                    >
+                      {day ? (
+                        <div className="pointer-events-none absolute left-1/2 top-0 z-10 -translate-x-1/2 -translate-y-[calc(100%+6px)] rounded-full border border-slate-200 bg-white px-2 py-1 text-[10px] font-medium text-slate-600 opacity-0 shadow-sm transition-opacity group-hover:opacity-100 whitespace-nowrap">
+                          {formatShortDate(day.date)} · {formatNumber(day.tokens)}
+                        </div>
+                      ) : null}
+                    </div>
+                  ))}
+                </div>
+              </div>
+            </article>
+          </section>
         </>
-      ) : null}
+      ) : (
+        <article className="rounded-[26px] border border-dashed border-slate-300 bg-white/80 px-6 py-12 text-center text-sm leading-6 text-slate-500 shadow-sm shadow-slate-950/5">
+          还没有可展示的统计数据。
+        </article>
+      )}
     </div>
   );
 }
diff --git a/src/components/settings-v2/general/appearance/index.test.tsx b/src/components/settings-v2/general/appearance/index.test.tsx
new file mode 100644
index 000000000..0ec5577ae
--- /dev/null
+++ b/src/components/settings-v2/general/appearance/index.test.tsx
@@ -0,0 +1,168 @@
+import { act } from "react";
+import { createRoot, type Root } from "react-dom/client";
+import { afterEach, beforeEach, describe, expect, it, vi } from "vitest";
+
+const mockGetConfig = vi.fn();
+const mockSaveConfig = vi.fn();
+const mockSetLanguage = vi.fn();
+const mockSetSoundEnabled = vi.fn();
+const mockPlayToolcallSound = vi.fn();
+const mockResetOnboarding = vi.fn();
+
+vi.mock("@/lib/api/appConfig", () => ({
+  getConfig: () => mockGetConfig(),
+  saveConfig: (config: unknown) => mockSaveConfig(config),
+}));
+
+vi.mock("@/i18n/I18nPatchProvider", () => ({
+  useI18nPatch: () => ({
+    setLanguage: mockSetLanguage,
+  }),
+}));
+
+vi.mock("@/contexts/useSoundContext", () => ({
+  useSoundContext: () => ({
+    soundEnabled: true,
+    setSoundEnabled: mockSetSoundEnabled,
+    playToolcallSound: mockPlayToolcallSound,
+  }),
+}));
+
+vi.mock("@/components/onboarding", () => ({
+  useOnboardingState: () => ({
+    resetOnboarding: mockResetOnboarding,
+  }),
+}));
+
+import { AppearanceSettings } from "./index";
+
+interface RenderResult {
+  container: HTMLDivElement;
+  root: Root;
+}
+
+const mounted: RenderResult[] = [];
+
+function createMockConfig() {
+  return {
+    language: "zh",
+    content_creator: {
+      enabled_themes: ["general"],
+      media_defaults: {
+        voice: {
+          preferredProviderId: "openai",
+        },
+      },
+    },
+    navigation: {
+      enabled_items: ["home-general"],
+    },
+    chat_appearance: {
+      append_selected_text_to_recommendation: true,
+      showAvatar: false,
+    },
+  } as any;
+}
+
+async function renderPage() {
+  const container = document.createElement("div");
+  document.body.appendChild(container);
+  const root = createRoot(container);
+
+  await act(async () => {
+    root.render(<AppearanceSettings />);
+  });
+
+  await act(async () => {
+    await Promise.resolve();
+  });
+
+  const rendered = { container, root };
+  mounted.push(rendered);
+  return rendered;
+}
+
+beforeEach(() => {
+  (
+    globalThis as typeof globalThis & {
+      IS_REACT_ACT_ENVIRONMENT?: boolean;
+      matchMedia?: typeof window.matchMedia;
+    }
+  ).IS_REACT_ACT_ENVIRONMENT = true;
+
+  globalThis.matchMedia =
+    globalThis.matchMedia ||
+    (((query: string) => ({
+      matches: false,
+      media: query,
+      onchange: null,
+      addEventListener: vi.fn(),
+      removeEventListener: vi.fn(),
+      addListener: vi.fn(),
+      removeListener: vi.fn(),
+      dispatchEvent: vi.fn(),
+    })) as typeof window.matchMedia);
+
+  localStorage.clear();
+  mockGetConfig.mockResolvedValue(createMockConfig());
+  mockSaveConfig.mockResolvedValue(undefined);
+});
+
+afterEach(() => {
+  mockGetConfig.mockReset();
+  mockSaveConfig.mockReset();
+  mockSetLanguage.mockReset();
+  mockSetSoundEnabled.mockReset();
+  mockPlayToolcallSound.mockReset();
+  mockResetOnboarding.mockReset();
+
+  while (mounted.length > 0) {
+    const target = mounted.pop();
+    if (!target) {
+      break;
+    }
+
+    act(() => {
+      target.root.unmount();
+    });
+    target.container.remove();
+  }
+});
+
+describe("AppearanceSettings", () => {
+  it("应在同一页面中渲染基础外观和聊天外观设置", async () => {
+    const { container } = await renderPage();
+    const text = container.textContent ?? "";
+
+    expect(text).toContain("基础外观");
+    expect(text).toContain("主题模式");
+    expect(text).toContain("界面语言");
+    expect(text).toContain("工作区与聊天外观");
+    expect(text).toContain("创作模式卡片");
+    expect(text).toContain("左侧边栏导航");
+    expect(text).toContain("推荐自动附带选中内容");
+    expect(text).toContain("重新运行引导");
+  });
+
+  it("切换创作模式时应保留 content_creator 的其他配置", async () => {
+    const { container } = await renderPage();
+    const button = Array.from(container.querySelectorAll("button")).find(
+      (item) => item.textContent?.includes("社媒内容"),
+    );
+
+    await act(async () => {
+      button?.dispatchEvent(new MouseEvent("click", { bubbles: true }));
+      await Promise.resolve();
+    });
+
+    const savedConfig = mockSaveConfig.mock.calls.at(-1)?.[0] as any;
+
+    expect(savedConfig.content_creator.enabled_themes).toEqual([
+      "general",
+      "social-media",
+    ]);
+    expect(
+      savedConfig.content_creator.media_defaults.voice.preferredProviderId,
+    ).toBe("openai");
+  });
+});
diff --git a/src/components/settings-v2/general/appearance/index.tsx b/src/components/settings-v2/general/appearance/index.tsx
index 7a3265845..694fb3a83 100644
--- a/src/components/settings-v2/general/appearance/index.tsx
+++ b/src/components/settings-v2/general/appearance/index.tsx
@@ -1,253 +1,883 @@
 /**
  * @file index.tsx
- * @description 通用设置 - 外观与语言
+ * @description 通用设置 - 外观、工作区与聊天外观
  */
 
-import { useState, useEffect, useCallback } from "react";
-import styled from "styled-components";
-import { Moon, Sun, Monitor, Volume2, RotateCcw } from "lucide-react";
+import {
+  useCallback,
+  useEffect,
+  useMemo,
+  useState,
+  type ReactNode,
+} from "react";
+import {
+  Check,
+  Languages,
+  LayoutPanelLeft,
+  Monitor,
+  Moon,
+  Palette,
+  RotateCcw,
+  Sparkles,
+  Sun,
+  Volume2,
+  type LucideIcon,
+} from "lucide-react";
+import { cn } from "@/lib/utils";
 import { getConfig, saveConfig, type Config } from "@/lib/api/appConfig";
 import { useOnboardingState } from "@/components/onboarding";
-import {
-  LanguageSelector,
-  Language,
-} from "../../shared/language/LanguageSelector";
 import { useI18nPatch } from "@/i18n/I18nPatchProvider";
 import { useSoundContext } from "@/contexts/useSoundContext";
+import type { Language } from "../../shared/language/LanguageSelector";
+import { Switch } from "@/components/ui/switch";
 
 type Theme = "light" | "dark" | "system";
 
-const Container = styled.div`
-  display: flex;
-  flex-direction: column;
-  gap: 24px;
-`;
+interface ThemeOption {
+  id: Theme;
+  label: string;
+  description: string;
+  icon: LucideIcon;
+}
 
-const Section = styled.div`
-  display: flex;
-  flex-direction: column;
-  gap: 12px;
-`;
+interface LanguageOption {
+  id: Language;
+  label: string;
+  hint: string;
+}
 
-const SectionTitle = styled.h3`
-  font-size: 14px;
-  font-weight: 600;
-  color: hsl(var(--foreground));
-  margin: 0;
-  padding-bottom: 8px;
-  border-bottom: 1px solid hsl(var(--border));
-`;
+interface SurfacePanelProps {
+  icon: LucideIcon;
+  title: string;
+  description: string;
+  aside?: ReactNode;
+  children: ReactNode;
+}
 
-const SettingItem = styled.div`
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-  padding: 12px 16px;
-  background: hsl(var(--card));
-  border: 1px solid hsl(var(--border));
-  border-radius: 8px;
-`;
+interface StatCardProps {
+  label: string;
+  value: string;
+  description: string;
+}
 
-const SettingInfo = styled.div`
-  display: flex;
-  flex-direction: column;
-  gap: 4px;
-`;
+const THEME_OPTIONS: ThemeOption[] = [
+  {
+    id: "light",
+    label: "浅色",
+    description: "适合白天和高亮环境。",
+    icon: Sun,
+  },
+  {
+    id: "dark",
+    label: "深色",
+    description: "降低夜间使用时的眩光。",
+    icon: Moon,
+  },
+  {
+    id: "system",
+    label: "跟随系统",
+    description: "自动同步系统外观。",
+    icon: Monitor,
+  },
+];
 
-const SettingLabel = styled.div`
-  display: flex;
-  align-items: center;
-  gap: 8px;
-  font-size: 14px;
-  font-weight: 500;
-  color: hsl(var(--foreground));
-`;
+const LANGUAGE_OPTIONS: LanguageOption[] = [
+  {
+    id: "zh",
+    label: "中文",
+    hint: "适合主要中文工作流。",
+  },
+  {
+    id: "en",
+    label: "English",
+    hint: "适合英文界面与术语环境。",
+  },
+];
 
-const SettingDescription = styled.div`
-  font-size: 12px;
-  color: hsl(var(--muted-foreground));
-`;
+const ALL_CONTENT_THEMES = [
+  { id: "general", label: "通用" },
+  { id: "social-media", label: "社媒内容" },
+  { id: "poster", label: "图文海报" },
+  { id: "music", label: "歌词曲谱" },
+  { id: "video", label: "短视频" },
+  { id: "novel", label: "小说" },
+  { id: "knowledge", label: "知识探索" },
+  { id: "planning", label: "计划规划" },
+  { id: "document", label: "办公文档" },
+] as const;
 
-const ThemeButtonGroup = styled.div`
-  display: flex;
-  gap: 4px;
-  background: hsl(var(--muted));
-  padding: 4px;
-  border-radius: 8px;
-`;
+const DEFAULT_ENABLED_THEMES = [
+  "general",
+  "social-media",
+  "poster",
+  "music",
+  "video",
+  "novel",
+];
 
-const ThemeButton = styled.button<{ $active: boolean }>`
-  display: flex;
-  align-items: center;
-  gap: 6px;
-  padding: 6px 12px;
-  border: none;
-  border-radius: 6px;
-  font-size: 13px;
-  font-weight: 500;
-  background: ${({ $active }) =>
-    $active ? "hsl(var(--background))" : "transparent"};
-  color: ${({ $active }) =>
-    $active ? "hsl(var(--foreground))" : "hsl(var(--muted-foreground))"};
-  box-shadow: ${({ $active }) =>
-    $active ? "0 1px 3px rgba(0,0,0,0.1)" : "none"};
-  cursor: pointer;
-  transition: all 0.2s;
+const ALL_NAV_ITEMS = [
+  { id: "home-general", label: "新建任务" },
+  { id: "claw", label: "Claw" },
+  { id: "video", label: "视频" },
+  { id: "image-gen", label: "插图" },
+  { id: "batch", label: "批量任务" },
+  { id: "terminal", label: "终端" },
+  { id: "plugins", label: "插件中心" },
+  { id: "tools", label: "工具箱" },
+] as const;
 
-  &:hover {
-    color: hsl(var(--foreground));
+const DEFAULT_ENABLED_NAV_ITEMS = [
+  "home-general",
+  "claw",
+  "video",
+  "image-gen",
+];
+
+const ALL_NAV_ITEM_ID_SET = new Set<string>(
+  ALL_NAV_ITEMS.map((item) => item.id),
+);
+
+const LEGACY_DEFAULT_NAV_ITEM_SETS: string[][] = [
+  ["home-general", "video", "image-gen", "plugins"],
+  ["home-general", "video", "image-gen", "terminal", "plugins"],
+];
+
+function normalizeEnabledNavItems(items: string[]): string[] {
+  const unique = Array.from(new Set(items));
+  return unique.filter((item) => ALL_NAV_ITEM_ID_SET.has(item));
+}
+
+function hasSameMembers(left: string[], right: string[]): boolean {
+  if (left.length !== right.length) {
+    return false;
   }
 
-  svg {
-    width: 14px;
-    height: 14px;
+  const rightSet = new Set(right);
+  return left.every((item) => rightSet.has(item));
+}
+
+function isLegacyDefaultEnabledItems(items: string[]): boolean {
+  return LEGACY_DEFAULT_NAV_ITEM_SETS.some((legacyItems) =>
+    hasSameMembers(items, legacyItems),
+  );
+}
+
+function resolveEnabledNavItems(savedItems?: string[]): string[] {
+  if (!savedItems || savedItems.length === 0) {
+    return [...DEFAULT_ENABLED_NAV_ITEMS];
   }
-`;
+
+  const normalized = normalizeEnabledNavItems(savedItems);
+  if (isLegacyDefaultEnabledItems(normalized)) {
+    return [...DEFAULT_ENABLED_NAV_ITEMS];
+  }
+
+  const merged = [...normalized];
+  for (const item of DEFAULT_ENABLED_NAV_ITEMS) {
+    if (!merged.includes(item)) {
+      merged.push(item);
+    }
+  }
+
+  return merged;
+}
+
+function applyTheme(theme: Theme) {
+  const root = document.documentElement;
+
+  if (theme === "system") {
+    const systemDark = window.matchMedia(
+      "(prefers-color-scheme: dark)",
+    ).matches;
+    root.classList.toggle("dark", systemDark);
+    return;
+  }
+
+  root.classList.toggle("dark", theme === "dark");
+}
+
+function SurfacePanel({
+  icon: Icon,
+  title,
+  description,
+  aside,
+  children,
+}: SurfacePanelProps) {
+  return (
+    <article className="rounded-[26px] border border-slate-200/80 bg-white p-5 shadow-sm shadow-slate-950/5">
+      <div className="flex flex-col gap-4 sm:flex-row sm:items-start sm:justify-between">
+        <div className="space-y-1">
+          <div className="flex items-center gap-2 text-sm font-semibold text-slate-900">
+            <Icon className="h-4 w-4 text-sky-600" />
+            {title}
+          </div>
+          <p className="text-sm leading-6 text-slate-500">{description}</p>
+        </div>
+        {aside ? <div className="flex items-center gap-2">{aside}</div> : null}
+      </div>
+
+      <div className="mt-5">{children}</div>
+    </article>
+  );
+}
+
+function StatCard({ label, value, description }: StatCardProps) {
+  return (
+    <div className="rounded-[22px] border border-white/90 bg-white/88 p-4 shadow-sm">
+      <p className="text-xs font-medium tracking-[0.12em] text-slate-500">
+        {label}
+      </p>
+      <p className="mt-3 text-3xl font-semibold tracking-tight text-slate-900">
+        {value}
+      </p>
+      <p className="mt-2 text-xs leading-5 text-slate-500">{description}</p>
+    </div>
+  );
+}
+
+function LoadingSkeleton() {
+  return (
+    <div className="space-y-6 pb-8">
+      <div className="h-[228px] animate-pulse rounded-[30px] border border-slate-200/80 bg-[linear-gradient(135deg,rgba(244,251,248,0.98)_0%,rgba(248,250,252,0.98)_45%,rgba(241,246,255,0.96)_100%)]" />
+      <div className="grid gap-6 xl:grid-cols-[minmax(0,1.2fr)_minmax(320px,0.8fr)]">
+        <div className="h-[320px] animate-pulse rounded-[26px] border border-slate-200/80 bg-white" />
+        <div className="h-[320px] animate-pulse rounded-[26px] border border-slate-200/80 bg-white" />
+      </div>
+      <div className="h-[420px] animate-pulse rounded-[26px] border border-slate-200/80 bg-white" />
+    </div>
+  );
+}
+
+function resolveThemeLabel(theme: Theme) {
+  return THEME_OPTIONS.find((option) => option.id === theme)?.label || "系统";
+}
+
+function resolveLanguageLabel(language: Language) {
+  return (
+    LANGUAGE_OPTIONS.find((option) => option.id === language)?.label || "中文"
+  );
+}
 
 export function AppearanceSettings() {
+  const [loading, setLoading] = useState(true);
   const [theme, setTheme] = useState<Theme>("system");
   const [language, setLanguageState] = useState<Language>("zh");
+  const [enabledThemes, setEnabledThemes] = useState<string[]>(
+    DEFAULT_ENABLED_THEMES,
+  );
+  const [enabledNavItems, setEnabledNavItems] = useState<string[]>(
+    DEFAULT_ENABLED_NAV_ITEMS,
+  );
+  const [
+    appendSelectedTextToRecommendation,
+    setAppendSelectedTextToRecommendation,
+  ] = useState(true);
   const [config, setConfig] = useState<Config | null>(null);
+  const [error, setError] = useState<string | null>(null);
 
   const { setLanguage: setI18nLanguage } = useI18nPatch();
   const { soundEnabled, setSoundEnabled, playToolcallSound } =
     useSoundContext();
   const { resetOnboarding } = useOnboardingState();
 
-  useEffect(() => {
-    const savedTheme = localStorage.getItem("theme") as Theme | null;
-    if (savedTheme) {
-      setTheme(savedTheme);
+  const loadConfig = useCallback(async () => {
+    setLoading(true);
+    setError(null);
+
+    try {
+      const loadedConfig = await getConfig();
+      setConfig(loadedConfig);
+      setLanguageState((loadedConfig.language || "zh") as Language);
+      setEnabledThemes(
+        loadedConfig.content_creator?.enabled_themes || DEFAULT_ENABLED_THEMES,
+      );
+      setEnabledNavItems(
+        resolveEnabledNavItems(loadedConfig.navigation?.enabled_items),
+      );
+      setAppendSelectedTextToRecommendation(
+        loadedConfig.chat_appearance?.append_selected_text_to_recommendation ??
+          true,
+      );
+    } catch (err) {
+      console.error("加载外观设置失败:", err);
+      setError("加载外观设置失败，请稍后重试。");
+      setConfig(null);
+    } finally {
+      setLoading(false);
     }
-    loadConfig();
   }, []);
 
-  const loadConfig = async () => {
-    try {
-      const c = await getConfig();
-      setConfig(c);
-      setLanguageState((c.language || "zh") as Language);
-    } catch (e) {
-      console.error("加载配置失败:", e);
-    }
-  };
+  useEffect(() => {
+    const savedTheme = localStorage.getItem("theme") as Theme | null;
+    const nextTheme = savedTheme || "system";
+    setTheme(nextTheme);
+    applyTheme(nextTheme);
+    void loadConfig();
+  }, [loadConfig]);
 
-  const handleThemeChange = (newTheme: Theme) => {
-    setTheme(newTheme);
-    localStorage.setItem("theme", newTheme);
-    const root = document.documentElement;
-    if (newTheme === "system") {
-      const systemDark = window.matchMedia(
-        "(prefers-color-scheme: dark)",
-      ).matches;
-      root.classList.toggle("dark", systemDark);
-    } else {
-      root.classList.toggle("dark", newTheme === "dark");
-    }
-  };
+  const workspaceSummary = useMemo(
+    () => ({
+      themeLabel: resolveThemeLabel(theme),
+      languageLabel: resolveLanguageLabel(language),
+      soundsLabel: soundEnabled ? "已开启" : "已关闭",
+    }),
+    [language, soundEnabled, theme],
+  );
 
-  const handleLanguageChange = async (newLanguage: Language) => {
-    if (!config) return;
-    try {
-      const newConfig = { ...config, language: newLanguage };
-      await saveConfig(newConfig);
-      setConfig(newConfig);
-      setLanguageState(newLanguage);
-      setI18nLanguage(newLanguage);
-    } catch (err) {
-      console.error("保存语言设置失败:", err);
-    }
-  };
+  const handleThemeChange = useCallback((nextTheme: Theme) => {
+    setTheme(nextTheme);
+    localStorage.setItem("theme", nextTheme);
+    applyTheme(nextTheme);
+  }, []);
+
+  const handleLanguageChange = useCallback(
+    async (nextLanguage: Language) => {
+      if (!config) {
+        return;
+      }
+
+      const previousConfig = config;
+      const previousLanguage = language;
+      const nextConfig = {
+        ...config,
+        language: nextLanguage,
+      };
+
+      setError(null);
+      setConfig(nextConfig);
+      setLanguageState(nextLanguage);
+      setI18nLanguage(nextLanguage);
+
+      try {
+        await saveConfig(nextConfig);
+      } catch (err) {
+        console.error("保存语言设置失败:", err);
+        setConfig(previousConfig);
+        setLanguageState(previousLanguage);
+        setI18nLanguage(previousLanguage);
+        setError("保存语言设置失败，请重试。");
+      }
+    },
+    [config, language, setI18nLanguage],
+  );
+
+  const handleSoundToggle = useCallback(
+    (checked: boolean) => {
+      setSoundEnabled(checked);
+      if (checked) {
+        playToolcallSound();
+      }
+    },
+    [playToolcallSound, setSoundEnabled],
+  );
+
+  const handleThemeToggle = useCallback(
+    async (themeId: string) => {
+      if (!config) {
+        return;
+      }
+
+      const previousThemes = enabledThemes;
+      const nextThemes = enabledThemes.includes(themeId)
+        ? enabledThemes.filter((item) => item !== themeId)
+        : [...enabledThemes, themeId];
+
+      if (nextThemes.length === 0) {
+        return;
+      }
+
+      const previousConfig = config;
+      const nextConfig = {
+        ...config,
+        content_creator: {
+          ...(config.content_creator || {}),
+          enabled_themes: nextThemes,
+        },
+      };
+
+      setError(null);
+      setEnabledThemes(nextThemes);
+      setConfig(nextConfig);
+
+      try {
+        await saveConfig(nextConfig);
+        window.dispatchEvent(new CustomEvent("theme-config-changed"));
+      } catch (err) {
+        console.error("保存创作模式设置失败:", err);
+        setEnabledThemes(previousThemes);
+        setConfig(previousConfig);
+        setError("保存创作模式设置失败，请重试。");
+      }
+    },
+    [config, enabledThemes],
+  );
+
+  const handleNavItemToggle = useCallback(
+    async (itemId: string) => {
+      if (!config) {
+        return;
+      }
+
+      const previousNavItems = enabledNavItems;
+      const nextItems = enabledNavItems.includes(itemId)
+        ? enabledNavItems.filter((item) => item !== itemId)
+        : [...enabledNavItems, itemId];
+
+      if (nextItems.length === 0) {
+        return;
+      }
+
+      const previousConfig = config;
+      const nextConfig = {
+        ...config,
+        navigation: {
+          ...(config.navigation || {}),
+          enabled_items: nextItems,
+        },
+      };
+
+      setError(null);
+      setEnabledNavItems(nextItems);
+      setConfig(nextConfig);
+
+      try {
+        await saveConfig(nextConfig);
+        window.dispatchEvent(new CustomEvent("nav-config-changed"));
+      } catch (err) {
+        console.error("保存导航设置失败:", err);
+        setEnabledNavItems(previousNavItems);
+        setConfig(previousConfig);
+        setError("保存左侧导航设置失败，请重试。");
+      }
+    },
+    [config, enabledNavItems],
+  );
+
+  const handleRecommendationSelectionToggle = useCallback(
+    async (checked: boolean) => {
+      if (!config) {
+        return;
+      }
+
+      const previousValue = appendSelectedTextToRecommendation;
+      const previousConfig = config;
+      const nextConfig = {
+        ...config,
+        chat_appearance: {
+          ...(config.chat_appearance || {}),
+          append_selected_text_to_recommendation: checked,
+        },
+      };
+
+      setError(null);
+      setAppendSelectedTextToRecommendation(checked);
+      setConfig(nextConfig);
+
+      try {
+        await saveConfig(nextConfig);
+        window.dispatchEvent(new CustomEvent("chat-appearance-config-changed"));
+      } catch (err) {
+        console.error("保存推荐上下文设置失败:", err);
+        setAppendSelectedTextToRecommendation(previousValue);
+        setConfig(previousConfig);
+        setError("保存聊天外观设置失败，请重试。");
+      }
+    },
+    [appendSelectedTextToRecommendation, config],
+  );
 
   const handleResetOnboarding = useCallback(() => {
     resetOnboarding();
     window.location.reload();
   }, [resetOnboarding]);
 
-  const themeOptions = [
-    { id: "light" as Theme, label: "浅色", icon: Sun },
-    { id: "dark" as Theme, label: "深色", icon: Moon },
-    { id: "system" as Theme, label: "系统", icon: Monitor },
-  ];
+  if (loading) {
+    return <LoadingSkeleton />;
+  }
 
   return (
-    <Container>
-      <Section>
-        <SectionTitle>基础外观</SectionTitle>
-
-        <SettingItem>
-          <SettingInfo>
-            <SettingLabel>主题模式</SettingLabel>
-            <SettingDescription>选择应用的主题颜色体系</SettingDescription>
-          </SettingInfo>
-          <ThemeButtonGroup>
-            {themeOptions.map((option) => (
-              <ThemeButton
-                key={option.id}
-                $active={theme === option.id}
-                onClick={() => handleThemeChange(option.id)}
-              >
-                <option.icon />
-                {option.label}
-              </ThemeButton>
-            ))}
-          </ThemeButtonGroup>
-        </SettingItem>
-
-        <SettingItem>
-          <SettingInfo>
-            <SettingLabel>语言</SettingLabel>
-            <SettingDescription>选择应用的显示语言</SettingDescription>
-          </SettingInfo>
-          <LanguageSelector
-            currentLanguage={language}
-            onLanguageChange={handleLanguageChange}
-          />
-        </SettingItem>
-
-        <SettingItem>
-          <SettingInfo>
-            <SettingLabel>
-              <Volume2 className="h-4 w-4" />
-              提示音效
-            </SettingLabel>
-            <SettingDescription>
-              在工具调用和消息生成时播放提示音
-            </SettingDescription>
-          </SettingInfo>
-          <input
-            type="checkbox"
-            checked={soundEnabled}
-            onChange={(e) => {
-              setSoundEnabled(e.target.checked);
-              if (e.target.checked) {
-                playToolcallSound();
-              }
-            }}
-            className="w-4 h-4 rounded border-gray-300"
-          />
-        </SettingItem>
-      </Section>
-
-      <Section>
-        <SectionTitle>初始化</SectionTitle>
-        <SettingItem>
-          <SettingInfo>
-            <SettingLabel>重置向导设置</SettingLabel>
-            <SettingDescription>
-              遇到问题或想重新选择启动选项时，可重新运行初始化向导
-            </SettingDescription>
-          </SettingInfo>
+    <div className="space-y-6 pb-8">
+      {error ? (
+        <div className="flex items-center justify-between gap-4 rounded-[20px] border border-rose-200 bg-rose-50/90 px-4 py-3 text-sm text-rose-700 shadow-sm shadow-slate-950/5">
+          <span>{error}</span>
           <button
-            onClick={handleResetOnboarding}
-            className="flex items-center gap-1.5 px-3 py-1.5 rounded border border-input bg-background hover:bg-accent hover:text-accent-foreground text-sm font-medium transition-colors"
+            type="button"
+            onClick={() => void loadConfig()}
+            className="rounded-full border border-rose-200 bg-white px-3 py-1.5 text-xs font-medium text-rose-700 transition hover:border-rose-300 hover:bg-rose-50"
           >
-            <RotateCcw className="h-3.5 w-3.5" />
-            重新运行引导
+            重新加载
           </button>
-        </SettingItem>
-      </Section>
-    </Container>
+        </div>
+      ) : null}
+
+      <section className="relative overflow-hidden rounded-[30px] border border-emerald-200/70 bg-[linear-gradient(135deg,rgba(244,251,248,0.98)_0%,rgba(248,250,252,0.98)_45%,rgba(241,246,255,0.96)_100%)] shadow-sm shadow-slate-950/5">
+        <div className="pointer-events-none absolute -left-20 top-[-72px] h-56 w-56 rounded-full bg-emerald-200/30 blur-3xl" />
+        <div className="pointer-events-none absolute right-[-76px] top-[-24px] h-56 w-56 rounded-full bg-sky-200/28 blur-3xl" />
+
+        <div className="relative flex flex-col gap-6 p-6 lg:p-8">
+          <div className="grid gap-6 xl:grid-cols-[minmax(0,1.12fr)_minmax(360px,0.88fr)] xl:items-stretch">
+            <div className="max-w-3xl space-y-5">
+              <span className="inline-flex items-center rounded-full border border-emerald-200 bg-white/85 px-3 py-1 text-xs font-semibold tracking-[0.16em] text-emerald-700 shadow-sm">
+                APPEARANCE STUDIO
+              </span>
+
+              <div className="space-y-2">
+                <p className="text-[28px] font-semibold tracking-tight text-slate-900">
+                  把界面观感和工作区入口放在同一个视图里调整
+                </p>
+                <p className="max-w-2xl text-sm leading-7 text-slate-600">
+                  主题、语言、提示音效，以及聊天工作区里可见的卡片和导航入口，
+                  都在这里统一维护，不再拆成两张窄页来回切换。
+                </p>
+              </div>
+
+              <div className="flex flex-wrap items-center gap-2">
+                <span className="rounded-full border border-white/90 bg-white/88 px-3 py-1.5 text-xs font-medium text-slate-600 shadow-sm">
+                  主题：{workspaceSummary.themeLabel}
+                </span>
+                <span className="rounded-full border border-white/90 bg-white/88 px-3 py-1.5 text-xs font-medium text-slate-600 shadow-sm">
+                  语言：{workspaceSummary.languageLabel}
+                </span>
+                <span className="rounded-full border border-white/90 bg-white/88 px-3 py-1.5 text-xs font-medium text-slate-600 shadow-sm">
+                  提示音效：{workspaceSummary.soundsLabel}
+                </span>
+              </div>
+            </div>
+
+            <div className="grid gap-3 sm:grid-cols-3 xl:grid-cols-1 xl:content-start">
+              <StatCard
+                label="创作模式"
+                value={enabledThemes.length.toString()}
+                description="当前会在新对话入口展示的快捷创作模式数量。"
+              />
+              <StatCard
+                label="侧边入口"
+                value={enabledNavItems.length.toString()}
+                description="工作区左侧边栏默认展示的导航项目数量。"
+              />
+              <StatCard
+                label="推荐上下文"
+                value={appendSelectedTextToRecommendation ? "开启" : "关闭"}
+                description="控制推荐问题时是否自动带上当前选中内容。"
+              />
+            </div>
+          </div>
+        </div>
+      </section>
+
+      <section className="grid gap-6 xl:grid-cols-[minmax(0,1.16fr)_minmax(320px,0.84fr)]">
+        <SurfacePanel
+          icon={Palette}
+          title="基础外观"
+          description="先确定全局主题、语言和声音反馈，再统一工作区里的视觉节奏。"
+        >
+          <div className="space-y-5">
+            <div className="rounded-[24px] border border-slate-200/80 bg-slate-50/60 p-4">
+              <div className="flex flex-col gap-3 sm:flex-row sm:items-start sm:justify-between">
+                <div>
+                  <h3 className="text-sm font-semibold text-slate-900">
+                    主题模式
+                  </h3>
+                  <p className="mt-1 text-xs leading-5 text-slate-500">
+                    优先控制整个应用的明暗观感，适配不同设备环境。
+                  </p>
+                </div>
+                <span className="rounded-full border border-slate-200 bg-white px-3 py-1 text-xs font-medium text-slate-500">
+                  当前：{resolveThemeLabel(theme)}
+                </span>
+              </div>
+
+              <div className="mt-4 grid gap-3 lg:grid-cols-3">
+                {THEME_OPTIONS.map((option) => {
+                  const active = theme === option.id;
+                  return (
+                    <button
+                      key={option.id}
+                      type="button"
+                      onClick={() => handleThemeChange(option.id)}
+                      className={cn(
+                        "rounded-[20px] border px-4 py-4 text-left transition shadow-sm",
+                        active
+                          ? "border-slate-900 bg-slate-900 text-white"
+                          : "border-slate-200 bg-white text-slate-700 hover:border-slate-300 hover:text-slate-900",
+                      )}
+                    >
+                      <div className="flex items-start justify-between gap-3">
+                        <div className="flex h-10 w-10 items-center justify-center rounded-2xl border border-current/10 bg-current/10">
+                          <option.icon className="h-5 w-5" />
+                        </div>
+                        {active ? <Check className="h-4 w-4" /> : null}
+                      </div>
+                      <p className="mt-4 text-sm font-semibold">
+                        {option.label}
+                      </p>
+                      <p
+                        className={cn(
+                          "mt-1 text-xs leading-5",
+                          active ? "text-white/70" : "text-slate-500",
+                        )}
+                      >
+                        {option.description}
+                      </p>
+                    </button>
+                  );
+                })}
+              </div>
+            </div>
+
+            <div className="rounded-[24px] border border-slate-200/80 bg-slate-50/60 p-4">
+              <div className="flex flex-col gap-3 sm:flex-row sm:items-start sm:justify-between">
+                <div className="flex items-start gap-3">
+                  <div className="flex h-10 w-10 items-center justify-center rounded-2xl border border-slate-200 bg-white text-slate-700">
+                    <Languages className="h-5 w-5" />
+                  </div>
+                  <div>
+                    <h3 className="text-sm font-semibold text-slate-900">
+                      界面语言
+                    </h3>
+                    <p className="mt-1 text-xs leading-5 text-slate-500">
+                      切换设置、工作区与提示文案的主要显示语言。
+                    </p>
+                  </div>
+                </div>
+                <span className="rounded-full border border-slate-200 bg-white px-3 py-1 text-xs font-medium text-slate-500">
+                  当前：{resolveLanguageLabel(language)}
+                </span>
+              </div>
+
+              <div className="mt-4 grid gap-3 lg:grid-cols-2">
+                {LANGUAGE_OPTIONS.map((option) => {
+                  const active = language === option.id;
+                  return (
+                    <button
+                      key={option.id}
+                      type="button"
+                      disabled={!config}
+                      onClick={() => void handleLanguageChange(option.id)}
+                      className={cn(
+                        "rounded-[20px] border px-4 py-4 text-left transition shadow-sm",
+                        active
+                          ? "border-slate-900 bg-slate-900 text-white"
+                          : "border-slate-200 bg-white text-slate-700 hover:border-slate-300 hover:text-slate-900",
+                        !config && "cursor-not-allowed opacity-60",
+                      )}
+                    >
+                      <div className="flex items-start justify-between gap-3">
+                        <p className="text-sm font-semibold">{option.label}</p>
+                        {active ? <Check className="h-4 w-4" /> : null}
+                      </div>
+                      <p
+                        className={cn(
+                          "mt-2 text-xs leading-5",
+                          active ? "text-white/70" : "text-slate-500",
+                        )}
+                      >
+                        {option.hint}
+                      </p>
+                    </button>
+                  );
+                })}
+              </div>
+            </div>
+
+            <div className="flex items-center justify-between gap-4 rounded-[24px] border border-slate-200/80 bg-slate-50/60 px-4 py-4">
+              <div className="flex items-start gap-3">
+                <div className="flex h-10 w-10 items-center justify-center rounded-2xl border border-slate-200 bg-white text-slate-700">
+                  <Volume2 className="h-5 w-5" />
+                </div>
+                <div>
+                  <p className="text-sm font-semibold text-slate-900">
+                    提示音效
+                  </p>
+                  <p className="mt-1 text-xs leading-5 text-slate-500">
+                    在工具调用和消息生成时播放提示音，提升状态感知。
+                  </p>
+                </div>
+              </div>
+              <Switch
+                checked={soundEnabled}
+                onCheckedChange={handleSoundToggle}
+                aria-label="切换提示音效"
+              />
+            </div>
+          </div>
+        </SurfacePanel>
+
+        <SurfacePanel
+          icon={RotateCcw}
+          title="初始化与恢复"
+          description="当你想重新走一遍首次启动流程，或者排查引导配置异常时，从这里恢复。"
+          aside={
+            <span className="rounded-full border border-amber-200 bg-amber-50 px-3 py-1 text-xs font-medium text-amber-700">
+              适合排障
+            </span>
+          }
+        >
+          <div className="flex h-full flex-col justify-between gap-5 rounded-[24px] border border-slate-200/80 bg-[linear-gradient(135deg,rgba(255,255,255,0.94)_0%,rgba(248,250,252,0.92)_100%)] p-5">
+            <div className="space-y-4">
+              <div className="inline-flex h-12 w-12 items-center justify-center rounded-[18px] border border-amber-200 bg-amber-50 text-amber-700">
+                <RotateCcw className="h-5 w-5" />
+              </div>
+              <div className="space-y-2">
+                <h3 className="text-base font-semibold text-slate-900">
+                  重新运行初始化向导
+                </h3>
+                <p className="text-sm leading-6 text-slate-500">
+                  会重新展示首次启动时的关键配置步骤，适合在更换工作方式或排查环境问题时使用。
+                </p>
+              </div>
+            </div>
+
+            <div className="space-y-3">
+              <div className="rounded-[18px] border border-slate-200 bg-slate-50/70 px-4 py-3 text-xs leading-5 text-slate-500">
+                重新运行后会刷新当前界面，但不会删除已有的账号、聊天和工作区数据。
+              </div>
+              <button
+                type="button"
+                onClick={handleResetOnboarding}
+                className="inline-flex w-full items-center justify-center gap-2 rounded-full bg-slate-900 px-4 py-2.5 text-sm font-medium text-white transition hover:bg-slate-800"
+              >
+                <RotateCcw className="h-4 w-4" />
+                重新运行引导
+              </button>
+            </div>
+          </div>
+        </SurfacePanel>
+      </section>
+
+      <SurfacePanel
+        icon={Sparkles}
+        title="工作区与聊天外观"
+        description="合并原来的聊天外观设置，在一个宽版面板里统一控制内容模式、侧边入口和推荐行为。"
+        aside={
+          <span className="rounded-full border border-sky-200 bg-sky-50 px-3 py-1 text-xs font-medium text-sky-700">
+            已合并旧入口
+          </span>
+        }
+      >
+        <div className="grid gap-5 xl:grid-cols-[minmax(0,1fr)_minmax(0,1fr)]">
+          <article className="rounded-[24px] border border-slate-200/80 bg-slate-50/60 p-4">
+            <div className="flex flex-col gap-3 sm:flex-row sm:items-start sm:justify-between">
+              <div className="flex items-start gap-3">
+                <div className="flex h-10 w-10 items-center justify-center rounded-2xl border border-slate-200 bg-white text-slate-700">
+                  <Palette className="h-5 w-5" />
+                </div>
+                <div>
+                  <h3 className="text-sm font-semibold text-slate-900">
+                    创作模式卡片
+                  </h3>
+                  <p className="mt-1 text-xs leading-5 text-slate-500">
+                    这些模式会出现在新对话的快捷创建区域。至少保留一个，避免工作区变成空状态。
+                  </p>
+                </div>
+              </div>
+              <span className="rounded-full border border-slate-200 bg-white px-3 py-1 text-xs font-medium text-slate-500">
+                {enabledThemes.length} 个已启用
+              </span>
+            </div>
+
+            <div className="mt-4 flex flex-wrap gap-2.5">
+              {ALL_CONTENT_THEMES.map((item) => {
+                const active = enabledThemes.includes(item.id);
+                return (
+                  <button
+                    key={item.id}
+                    type="button"
+                    disabled={!config}
+                    onClick={() => void handleThemeToggle(item.id)}
+                    className={cn(
+                      "rounded-full border px-3.5 py-2 text-sm transition shadow-sm",
+                      active
+                        ? "border-slate-900 bg-slate-900 text-white"
+                        : "border-slate-200 bg-white text-slate-600 hover:border-slate-300 hover:text-slate-900",
+                      !config && "cursor-not-allowed opacity-60",
+                    )}
+                  >
+                    {item.label}
+                  </button>
+                );
+              })}
+            </div>
+          </article>
+
+          <article className="rounded-[24px] border border-slate-200/80 bg-slate-50/60 p-4">
+            <div className="flex flex-col gap-3 sm:flex-row sm:items-start sm:justify-between">
+              <div className="flex items-start gap-3">
+                <div className="flex h-10 w-10 items-center justify-center rounded-2xl border border-slate-200 bg-white text-slate-700">
+                  <LayoutPanelLeft className="h-5 w-5" />
+                </div>
+                <div>
+                  <h3 className="text-sm font-semibold text-slate-900">
+                    左侧边栏导航
+                  </h3>
+                  <p className="mt-1 text-xs leading-5 text-slate-500">
+                    控制工作区左侧常驻入口，保留高频内容即可，减少视觉干扰。
+                  </p>
+                </div>
+              </div>
+              <span className="rounded-full border border-slate-200 bg-white px-3 py-1 text-xs font-medium text-slate-500">
+                {enabledNavItems.length} 个已显示
+              </span>
+            </div>
+
+            <div className="mt-4 flex flex-wrap gap-2.5">
+              {ALL_NAV_ITEMS.map((item) => {
+                const active = enabledNavItems.includes(item.id);
+                return (
+                  <button
+                    key={item.id}
+                    type="button"
+                    disabled={!config}
+                    onClick={() => void handleNavItemToggle(item.id)}
+                    className={cn(
+                      "rounded-full border px-3.5 py-2 text-sm transition shadow-sm",
+                      active
+                        ? "border-slate-900 bg-slate-900 text-white"
+                        : "border-slate-200 bg-white text-slate-600 hover:border-slate-300 hover:text-slate-900",
+                      !config && "cursor-not-allowed opacity-60",
+                    )}
+                  >
+                    {item.label}
+                  </button>
+                );
+              })}
+            </div>
+          </article>
+        </div>
+
+        <article className="mt-5 rounded-[24px] border border-slate-200/80 bg-slate-50/60 p-4">
+          <div className="flex flex-col gap-4 lg:flex-row lg:items-center lg:justify-between">
+            <div className="flex items-start gap-3">
+              <div className="flex h-10 w-10 items-center justify-center rounded-2xl border border-slate-200 bg-white text-slate-700">
+                <Sparkles className="h-5 w-5" />
+              </div>
+              <div>
+                <h3 className="text-sm font-semibold text-slate-900">
+                  推荐自动附带选中内容
+                </h3>
+                <p className="mt-1 text-xs leading-5 text-slate-500">
+                  在文档或画布中有选区时，推荐问题会自动把该段内容作为上下文带入，减少手工复制粘贴。
+                </p>
+              </div>
+            </div>
+
+            <div className="flex items-center gap-3 self-end lg:self-auto">
+              <span className="rounded-full border border-slate-200 bg-white px-3 py-1 text-xs font-medium text-slate-500">
+                {appendSelectedTextToRecommendation ? "已开启" : "已关闭"}
+              </span>
+              <Switch
+                checked={appendSelectedTextToRecommendation}
+                onCheckedChange={(checked) => {
+                  void handleRecommendationSelectionToggle(checked);
+                }}
+                aria-label="切换推荐自动附带选中内容"
+                disabled={!config}
+              />
+            </div>
+          </div>
+        </article>
+      </SurfacePanel>
+    </div>
   );
 }
 
diff --git a/src/components/settings-v2/general/chat-appearance/index.tsx b/src/components/settings-v2/general/chat-appearance/index.tsx
index 5e135fde2..056b16be5 100644
--- a/src/components/settings-v2/general/chat-appearance/index.tsx
+++ b/src/components/settings-v2/general/chat-appearance/index.tsx
@@ -1,386 +1,12 @@
 /**
  * @file index.tsx
- * @description 通用设置 - 聊天外观与模块定制
+ * @description 通用设置 - 聊天外观兼容导出
  */
 
-import { useState, useEffect } from "react";
-import styled from "styled-components";
-import { Palette } from "lucide-react";
-import { cn } from "@/lib/utils";
-import { getConfig, saveConfig, type Config } from "@/lib/api/appConfig";
-import { Switch } from "@/components/ui/switch";
-
-const ALL_CONTENT_THEMES = [
-  { id: "general", label: "通用" },
-  { id: "social-media", label: "社媒内容" },
-  { id: "poster", label: "图文海报" },
-  { id: "music", label: "歌词曲谱" },
-  { id: "video", label: "短视频" },
-  { id: "novel", label: "小说" },
-  { id: "knowledge", label: "知识探索" },
-  { id: "planning", label: "计划规划" },
-  { id: "document", label: "办公文档" },
-] as const;
-
-const DEFAULT_ENABLED_THEMES = [
-  "general",
-  "social-media",
-  "poster",
-  "music",
-  "video",
-  "novel",
-];
-
-const ALL_NAV_ITEMS = [
-  { id: "home-general", label: "首页" },
-  { id: "video", label: "视频" },
-  { id: "image-gen", label: "插图" },
-  { id: "batch", label: "批量任务" },
-  { id: "terminal", label: "终端" },
-  { id: "plugins", label: "插件中心" },
-  { id: "tools", label: "工具箱" },
-] as const;
-
-const DEFAULT_ENABLED_NAV_ITEMS = ["home-general", "video", "image-gen"];
-
-const ALL_NAV_ITEM_ID_SET = new Set<string>(
-  ALL_NAV_ITEMS.map((item) => item.id),
-);
-
-const LEGACY_DEFAULT_NAV_ITEM_SETS: string[][] = [
-  ["home-general", "video", "image-gen", "plugins"],
-  ["home-general", "video", "image-gen", "terminal", "plugins"],
-];
-
-const normalizeEnabledNavItems = (items: string[]): string[] => {
-  const unique = Array.from(new Set(items));
-  return unique.filter((item) => ALL_NAV_ITEM_ID_SET.has(item));
-};
-
-const hasSameMembers = (left: string[], right: string[]): boolean => {
-  if (left.length !== right.length) return false;
-  const rightSet = new Set(right);
-  return left.every((item) => rightSet.has(item));
-};
-
-const isLegacyDefaultEnabledItems = (items: string[]): boolean => {
-  return LEGACY_DEFAULT_NAV_ITEM_SETS.some((legacyItems) =>
-    hasSameMembers(items, legacyItems),
-  );
-};
-
-const resolveEnabledNavItems = (savedItems?: string[]): string[] => {
-  if (!savedItems || savedItems.length === 0) {
-    return [...DEFAULT_ENABLED_NAV_ITEMS];
-  }
-  const normalized = normalizeEnabledNavItems(savedItems);
-  if (isLegacyDefaultEnabledItems(normalized)) {
-    return [...DEFAULT_ENABLED_NAV_ITEMS];
-  }
-  return normalized;
-};
-
-const Container = styled.div`
-  display: flex;
-  flex-direction: column;
-  gap: 24px;
-`;
-
-const Section = styled.div`
-  display: flex;
-  flex-direction: column;
-  gap: 12px;
-`;
-
-const SectionTitle = styled.h3`
-  font-size: 14px;
-  font-weight: 600;
-  color: hsl(var(--foreground));
-  margin: 0;
-  padding-bottom: 8px;
-  border-bottom: 1px solid hsl(var(--border));
-`;
-
-const SettingItem = styled.div`
-  display: flex;
-  flex-direction: column;
-  padding: 16px;
-  background: hsl(var(--card));
-  border: 1px solid hsl(var(--border));
-  border-radius: 8px;
-  gap: 16px;
-`;
-
-const SettingHeader = styled.div`
-  display: flex;
-  align-items: flex-start;
-  gap: 12px;
-`;
-
-const SettingIcon = styled.div`
-  color: hsl(var(--muted-foreground));
-  padding-top: 2px;
-`;
-
-const SettingInfo = styled.div`
-  display: flex;
-  flex-direction: column;
-  gap: 4px;
-`;
-
-const SettingLabel = styled.div`
-  font-size: 14px;
-  font-weight: 500;
-  color: hsl(var(--foreground));
-`;
-
-const SettingDescription = styled.div`
-  font-size: 13px;
-  color: hsl(var(--muted-foreground));
-  line-height: 1.5;
-`;
-
-const TagsContainer = styled.div`
-  display: flex;
-  flex-wrap: wrap;
-  gap: 8px;
-  margin-left: 36px;
-`;
-
-const ToggleRow = styled.div`
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-  margin-left: 36px;
-  gap: 12px;
-`;
-
-const ToggleInfo = styled.div`
-  font-size: 12px;
-  color: hsl(var(--muted-foreground));
-  line-height: 1.5;
-`;
-
-const TagButton = styled.button<{ $active: boolean }>`
-  px: 12px;
-  py: 6px;
-  border-radius: 9999px;
-  font-size: 12px;
-  font-weight: 500;
-  transition: all 0.2s;
-  ${({ $active }) =>
-    $active
-      ? `
-    background: hsl(var(--primary));
-    color: hsl(var(--primary-foreground));
-    border: none;
-  `
-      : `
-    background: hsl(var(--muted));
-    color: hsl(var(--muted-foreground));
-    border: 1px solid transparent;
-    &:hover {
-      background: hsl(var(--muted)/0.8);
-    }
-  `}
-`;
+import AppearanceSettings from "../appearance";
 
 export function ChatAppearanceSettings() {
-  const [enabledThemes, setEnabledThemes] = useState<string[]>(
-    DEFAULT_ENABLED_THEMES,
-  );
-  const [enabledNavItems, setEnabledNavItems] = useState<string[]>(
-    DEFAULT_ENABLED_NAV_ITEMS,
-  );
-  const [
-    appendSelectedTextToRecommendation,
-    setAppendSelectedTextToRecommendation,
-  ] = useState(true);
-  const [config, setConfig] = useState<Config | null>(null);
-
-  useEffect(() => {
-    loadConfig();
-  }, []);
-
-  const loadConfig = async () => {
-    try {
-      const c = await getConfig();
-      setConfig(c);
-      setEnabledThemes(
-        c.content_creator?.enabled_themes || DEFAULT_ENABLED_THEMES,
-      );
-      setEnabledNavItems(resolveEnabledNavItems(c.navigation?.enabled_items));
-      setAppendSelectedTextToRecommendation(
-        c.chat_appearance?.append_selected_text_to_recommendation ?? true,
-      );
-    } catch (e) {
-      console.error("加载配置失败:", e);
-    }
-  };
-
-  const handleThemeToggle = async (themeId: string) => {
-    if (!config) return;
-    const newThemes = enabledThemes.includes(themeId)
-      ? enabledThemes.filter((t) => t !== themeId)
-      : [...enabledThemes, themeId];
-
-    if (newThemes.length === 0) return;
-
-    setEnabledThemes(newThemes);
-    try {
-      const newConfig = {
-        ...config,
-        content_creator: { enabled_themes: newThemes },
-      };
-      await saveConfig(newConfig);
-      setConfig(newConfig);
-      window.dispatchEvent(new CustomEvent("theme-config-changed"));
-    } catch (err) {
-      console.error("保存主题设置失败:", err);
-      setEnabledThemes(enabledThemes);
-    }
-  };
-
-  const handleNavItemToggle = async (itemId: string) => {
-    if (!config) return;
-    const newItems = enabledNavItems.includes(itemId)
-      ? enabledNavItems.filter((i) => i !== itemId)
-      : [...enabledNavItems, itemId];
-
-    if (newItems.length === 0) return;
-
-    setEnabledNavItems(newItems);
-    try {
-      const newConfig = {
-        ...config,
-        navigation: { enabled_items: newItems },
-      };
-      await saveConfig(newConfig);
-      setConfig(newConfig);
-      window.dispatchEvent(new CustomEvent("nav-config-changed"));
-    } catch (err) {
-      console.error("保存导航设置失败:", err);
-      setEnabledNavItems(enabledNavItems);
-    }
-  };
-
-  const handleRecommendationSelectionToggle = async (checked: boolean) => {
-    if (!config) return;
-    const previousValue = appendSelectedTextToRecommendation;
-    setAppendSelectedTextToRecommendation(checked);
-
-    try {
-      const newConfig = {
-        ...config,
-        chat_appearance: {
-          ...(config.chat_appearance || {}),
-          append_selected_text_to_recommendation: checked,
-        },
-      };
-      await saveConfig(newConfig);
-      setConfig(newConfig);
-      window.dispatchEvent(new CustomEvent("chat-appearance-config-changed"));
-    } catch (err) {
-      console.error("保存推荐上下文设置失败:", err);
-      setAppendSelectedTextToRecommendation(previousValue);
-    }
-  };
-
-  return (
-    <Container>
-      <Section>
-        <SectionTitle>工作区定制</SectionTitle>
-
-        <SettingItem>
-          <SettingHeader>
-            <SettingIcon>
-              <Palette size={20} />
-            </SettingIcon>
-            <SettingInfo>
-              <SettingLabel>创作模式卡片</SettingLabel>
-              <SettingDescription>
-                选择您希望在创建新项目时可以使用的快捷内容创作模板，它们会在新对话页面展现。
-              </SettingDescription>
-            </SettingInfo>
-          </SettingHeader>
-
-          <TagsContainer>
-            {ALL_CONTENT_THEMES.map((t) => (
-              <TagButton
-                key={t.id}
-                $active={enabledThemes.includes(t.id)}
-                onClick={() => handleThemeToggle(t.id)}
-                className={cn(
-                  "px-3 py-1.5 rounded-full text-xs font-medium transition-colors",
-                  enabledThemes.includes(t.id)
-                    ? "bg-primary text-primary-foreground"
-                    : "bg-muted text-muted-foreground hover:bg-muted/80",
-                )}
-              >
-                {t.label}
-              </TagButton>
-            ))}
-          </TagsContainer>
-        </SettingItem>
-
-        <SettingItem>
-          <SettingHeader>
-            <SettingIcon>
-              <Palette size={20} />
-            </SettingIcon>
-            <SettingInfo>
-              <SettingLabel>左侧边栏导航</SettingLabel>
-              <SettingDescription>
-                定制主视图左侧边栏启用的常驻导航图标入口，最少须保留一个。
-              </SettingDescription>
-            </SettingInfo>
-          </SettingHeader>
-
-          <TagsContainer>
-            {ALL_NAV_ITEMS.map((item) => (
-              <TagButton
-                key={item.id}
-                $active={enabledNavItems.includes(item.id)}
-                onClick={() => handleNavItemToggle(item.id)}
-                className={cn(
-                  "px-3 py-1.5 rounded-full text-xs font-medium transition-colors",
-                  enabledNavItems.includes(item.id)
-                    ? "bg-primary text-primary-foreground"
-                    : "bg-muted text-muted-foreground hover:bg-muted/80",
-                )}
-              >
-                {item.label}
-              </TagButton>
-            ))}
-          </TagsContainer>
-        </SettingItem>
-
-        <SettingItem>
-          <SettingHeader>
-            <SettingIcon>
-              <Palette size={20} />
-            </SettingIcon>
-            <SettingInfo>
-              <SettingLabel>推荐自动附带选中内容</SettingLabel>
-              <SettingDescription>
-                开启后，点击推荐提示词会自动追加当前编辑器选中文本作为上下文。
-              </SettingDescription>
-            </SettingInfo>
-          </SettingHeader>
-
-          <ToggleRow>
-            <ToggleInfo>
-              建议开启：更贴合当前段落；关闭可避免附加额外上下文。
-            </ToggleInfo>
-            <Switch
-              checked={appendSelectedTextToRecommendation}
-              onCheckedChange={handleRecommendationSelectionToggle}
-            />
-          </ToggleRow>
-        </SettingItem>
-      </Section>
-    </Container>
-  );
+  return <AppearanceSettings />;
 }
 
 export default ChatAppearanceSettings;
diff --git a/src/components/settings-v2/general/hotkeys/index.test.tsx b/src/components/settings-v2/general/hotkeys/index.test.tsx
new file mode 100644
index 000000000..1c8d610aa
--- /dev/null
+++ b/src/components/settings-v2/general/hotkeys/index.test.tsx
@@ -0,0 +1,197 @@
+import { act } from "react";
+import { createRoot, type Root } from "react-dom/client";
+import { afterEach, beforeEach, describe, expect, it, vi } from "vitest";
+
+const { mockGetExperimentalConfig, mockGetVoiceInputConfig } = vi.hoisted(
+  () => ({
+    mockGetExperimentalConfig: vi.fn(),
+    mockGetVoiceInputConfig: vi.fn(),
+  }),
+);
+
+vi.mock("@/lib/api/experimentalFeatures", () => ({
+  getExperimentalConfig: mockGetExperimentalConfig,
+}));
+
+vi.mock("@/lib/api/asrProvider", () => ({
+  getVoiceInputConfig: mockGetVoiceInputConfig,
+}));
+
+import { HotkeysSettings } from ".";
+
+interface Mounted {
+  container: HTMLDivElement;
+  root: Root;
+}
+
+const mounted: Mounted[] = [];
+
+function renderComponent(): HTMLDivElement {
+  const container = document.createElement("div");
+  document.body.appendChild(container);
+  const root = createRoot(container);
+
+  act(() => {
+    root.render(<HotkeysSettings />);
+  });
+
+  mounted.push({ container, root });
+  return container;
+}
+
+async function flushEffects() {
+  await act(async () => {
+    await Promise.resolve();
+  });
+}
+
+async function waitForLoad() {
+  await flushEffects();
+  await flushEffects();
+}
+
+function findButtonByText(
+  container: HTMLElement,
+  text: string,
+): HTMLButtonElement {
+  const element = Array.from(container.querySelectorAll("button")).find(
+    (button) => button.textContent?.includes(text),
+  );
+  if (!element) {
+    throw new Error(`未找到按钮文本: ${text}`);
+  }
+  return element as HTMLButtonElement;
+}
+
+async function clickButton(button: HTMLButtonElement) {
+  await act(async () => {
+    button.dispatchEvent(new MouseEvent("click", { bubbles: true }));
+    await flushEffects();
+  });
+}
+
+beforeEach(() => {
+  (
+    globalThis as typeof globalThis & {
+      IS_REACT_ACT_ENVIRONMENT?: boolean;
+    }
+  ).IS_REACT_ACT_ENVIRONMENT = true;
+
+  vi.clearAllMocks();
+
+  mockGetExperimentalConfig.mockResolvedValue({
+    screenshot_chat: {
+      enabled: true,
+      shortcut: "CommandOrControl+Shift+4",
+    },
+  });
+
+  mockGetVoiceInputConfig.mockResolvedValue({
+    enabled: true,
+    shortcut: "CommandOrControl+Shift+Space",
+    processor: {
+      polish_enabled: true,
+      default_instruction_id: "default",
+    },
+    output: {
+      mode: "type",
+      type_delay_ms: 0,
+    },
+    instructions: [],
+    sound_enabled: true,
+    translate_shortcut: "",
+    translate_instruction_id: "",
+  });
+});
+
+afterEach(() => {
+  while (mounted.length > 0) {
+    const target = mounted.pop();
+    if (!target) {
+      break;
+    }
+
+    act(() => {
+      target.root.unmount();
+    });
+    target.container.remove();
+  }
+
+  vi.clearAllMocks();
+});
+
+describe("HotkeysSettings", () => {
+  it("应渲染新的快捷键总览与主要分区", async () => {
+    const container = renderComponent();
+    await waitForLoad();
+
+    const text = container.textContent ?? "";
+    expect(text).toContain("HOTKEY MAP");
+    expect(text).toContain("快捷键总数");
+    expect(text).toContain("全局快捷键");
+    expect(text).toContain("页面内快捷键");
+    expect(text).toContain("截图对话");
+    expect(text).toContain("语音输入");
+    expect(text).toContain("终端搜索");
+    expect(text).toContain("⌘/Ctrl");
+    expect(text).toContain("未设置");
+  });
+
+  it("加载失败后应支持重试并重新渲染内容", async () => {
+    mockGetExperimentalConfig
+      .mockRejectedValueOnce(new Error("网络异常"))
+      .mockResolvedValue({
+        screenshot_chat: {
+          enabled: false,
+          shortcut: "CommandOrControl+Shift+S",
+        },
+      });
+
+    const container = renderComponent();
+    await waitForLoad();
+
+    expect(container.textContent).toContain("加载快捷键失败：网络异常");
+
+    await clickButton(findButtonByText(container, "重试"));
+    await waitForLoad();
+
+    expect(mockGetExperimentalConfig).toHaveBeenCalledTimes(2);
+    expect(container.textContent).toContain("全局快捷键");
+    expect(container.textContent).toContain("截图对话");
+  });
+
+  it("应正确展示待配置的翻译快捷键状态", async () => {
+    mockGetExperimentalConfig.mockResolvedValue({
+      screenshot_chat: {
+        enabled: false,
+        shortcut: "",
+      },
+    });
+
+    mockGetVoiceInputConfig.mockResolvedValue({
+      enabled: false,
+      shortcut: "",
+      processor: {
+        polish_enabled: false,
+        default_instruction_id: "default",
+      },
+      output: {
+        mode: "type",
+        type_delay_ms: 0,
+      },
+      instructions: [],
+      sound_enabled: false,
+      translate_shortcut: "",
+      translate_instruction_id: "",
+    });
+
+    const container = renderComponent();
+    await waitForLoad();
+
+    const text = container.textContent ?? "";
+    expect(text).toContain("待配置");
+    expect(text).toContain("语音翻译模式");
+    expect(text).toContain("未启用");
+    expect(text).toContain("翻译指令未绑定");
+  });
+});
diff --git a/src/components/settings-v2/general/hotkeys/index.tsx b/src/components/settings-v2/general/hotkeys/index.tsx
index 87a6f7230..8716d80ce 100644
--- a/src/components/settings-v2/general/hotkeys/index.tsx
+++ b/src/components/settings-v2/general/hotkeys/index.tsx
@@ -1,112 +1,32 @@
 /**
  * 快捷键设置页面
  *
- * 显示应用中已实现的快捷键
+ * 汇总当前版本已实现的快捷键，并标明作用范围与配置来源。
  */
 
-import { useCallback, useEffect, useState } from "react";
-import styled from "styled-components";
-import { Loader2 } from "lucide-react";
+import {
+  useCallback,
+  useEffect,
+  useMemo,
+  useState,
+  type ReactNode,
+} from "react";
+import {
+  AlertCircle,
+  Keyboard,
+  Mic,
+  ScanText,
+  Sparkles,
+  TerminalSquare,
+  type LucideIcon,
+} from "lucide-react";
+import { cn } from "@/lib/utils";
 import { getExperimentalConfig } from "@/lib/api/experimentalFeatures";
 import {
   getVoiceInputConfig,
   type VoiceInputConfig,
 } from "@/lib/api/asrProvider";
 
-const Container = styled.div`
-  display: flex;
-  flex-direction: column;
-  gap: 24px;
-`;
-
-const HeaderHint = styled.div`
-  font-size: 12px;
-  color: hsl(var(--muted-foreground));
-`;
-
-const Section = styled.div`
-  display: flex;
-  flex-direction: column;
-  gap: 12px;
-`;
-
-const SectionTitle = styled.h3`
-  font-size: 14px;
-  font-weight: 600;
-  color: hsl(var(--foreground));
-  margin: 0;
-  padding-bottom: 8px;
-  border-bottom: 1px solid hsl(var(--border));
-`;
-
-const HotkeyItem = styled.div`
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-  padding: 12px 16px;
-  background: hsl(var(--card));
-  border: 1px solid hsl(var(--border));
-  border-radius: 8px;
-`;
-
-const HotkeyInfo = styled.div`
-  display: flex;
-  flex-direction: column;
-  gap: 4px;
-`;
-
-const HotkeyLabel = styled.div`
-  font-size: 14px;
-  font-weight: 500;
-  color: hsl(var(--foreground));
-`;
-
-const HotkeyDescription = styled.div`
-  font-size: 12px;
-  color: hsl(var(--muted-foreground));
-`;
-
-const HotkeyMeta = styled.div`
-  margin-top: 2px;
-  font-size: 11px;
-  color: hsl(var(--muted-foreground));
-`;
-
-const HotkeyValue = styled.div`
-  display: flex;
-  align-items: center;
-  gap: 4px;
-`;
-
-const StatusBadge = styled.span<{ $enabled: boolean }>`
-  margin-right: 8px;
-  padding: 2px 8px;
-  border-radius: 999px;
-  font-size: 11px;
-  border: 1px solid
-    ${({ $enabled }) =>
-      $enabled ? "hsl(var(--primary) / 0.3)" : "hsl(var(--border))"};
-  color: ${({ $enabled }) =>
-    $enabled ? "hsl(var(--primary))" : "hsl(var(--muted-foreground))"};
-  background: ${({ $enabled }) =>
-    $enabled ? "hsl(var(--primary) / 0.08)" : "hsl(var(--muted) / 0.35)"};
-`;
-
-const KeyBadge = styled.span`
-  display: inline-flex;
-  align-items: center;
-  justify-content: center;
-  min-width: 24px;
-  height: 24px;
-  padding: 0 8px;
-  background: hsl(var(--muted));
-  border: 1px solid hsl(var(--border));
-  border-radius: 4px;
-  font-size: 12px;
-  font-family: monospace;
-  color: hsl(var(--foreground));
-`;
-
 interface HotkeyConfig {
   id: string;
   label: string;
@@ -114,9 +34,49 @@ interface HotkeyConfig {
   keys: string[];
   enabled: boolean;
   source: string;
+  scope: "global" | "local";
 }
 
-function formatShortcutKeys(shortcut: string): string[] {
+interface HotkeyState {
+  globalHotkeys: HotkeyConfig[];
+  localHotkeys: HotkeyConfig[];
+}
+
+interface HotkeySectionMeta {
+  title: string;
+  description: string;
+  hotkeys: HotkeyConfig[];
+}
+
+interface HotkeyPanelProps {
+  icon: LucideIcon;
+  title: string;
+  description: string;
+  aside?: ReactNode;
+  children: ReactNode;
+}
+
+interface SummaryStatProps {
+  label: string;
+  value: string;
+  description: string;
+}
+
+const HOTKEY_ICON_MAP: Record<string, LucideIcon> = {
+  "screenshot-chat": ScanText,
+  "voice-input": Mic,
+  "voice-translate": Sparkles,
+  "terminal-search": TerminalSquare,
+  "terminal-font-plus": TerminalSquare,
+  "terminal-font-minus": TerminalSquare,
+  "terminal-font-reset": TerminalSquare,
+};
+
+function formatShortcutKeys(shortcut?: string): string[] {
+  if (!shortcut?.trim()) {
+    return ["未设置"];
+  }
+
   const map: Record<string, string> = {
     CommandOrControl: "⌘/Ctrl",
     Command: "⌘",
@@ -126,51 +86,59 @@ function formatShortcutKeys(shortcut: string): string[] {
     Option: "⌥",
     Shift: "⇧",
     Super: "Super",
+    Space: "Space",
   };
 
-  return shortcut
+  const keys = shortcut
     .split("+")
     .map((part) => part.trim())
     .filter(Boolean)
     .map((part) => map[part] ?? part);
-}
 
-interface HotkeyState {
-  globalHotkeys: HotkeyConfig[];
-  localHotkeys: HotkeyConfig[];
+  return keys.length > 0 ? keys : ["未设置"];
 }
 
 function buildHotkeys(
   screenshotEnabled: boolean,
-  screenshotShortcut: string,
-  voiceConfig: VoiceInputConfig,
+  screenshotShortcut: string | undefined,
+  voiceConfig: Partial<VoiceInputConfig>,
 ): HotkeyState {
+  const voiceShortcut = formatShortcutKeys(voiceConfig.shortcut);
+  const translateShortcut = formatShortcutKeys(voiceConfig.translate_shortcut);
+  const voiceEnabled = voiceConfig.enabled ?? false;
+  const translateEnabled =
+    voiceEnabled && Boolean(voiceConfig.translate_shortcut?.trim());
+  const translateInstructionId = voiceConfig.translate_instruction_id?.trim();
+
   const globalHotkeys: HotkeyConfig[] = [
     {
       id: "screenshot-chat",
       label: "截图对话",
-      description: "触发全局截图并打开截图对话窗口",
+      description: "触发全局截图并打开截图对话窗口。",
       keys: formatShortcutKeys(screenshotShortcut),
       enabled: screenshotEnabled,
       source: "实验功能 → 截图对话",
+      scope: "global",
     },
     {
       id: "voice-input",
       label: "语音输入",
-      description: "按下开始录音，松开后识别并输出",
-      keys: formatShortcutKeys(voiceConfig.shortcut),
-      enabled: voiceConfig.enabled,
+      description: "按下开始录音，松开后识别并输出。",
+      keys: voiceShortcut,
+      enabled: voiceEnabled,
       source: "语音服务",
+      scope: "global",
     },
     {
       id: "voice-translate",
       label: "语音翻译模式",
-      description: "独立快捷键触发语音识别并执行翻译指令",
-      keys: voiceConfig.translate_shortcut
-        ? formatShortcutKeys(voiceConfig.translate_shortcut)
-        : ["未设置"],
-      enabled: voiceConfig.enabled && !!voiceConfig.translate_shortcut,
-      source: `语音服务 → 指令 ${voiceConfig.translate_instruction_id}`,
+      description: "独立快捷键触发语音识别并执行翻译指令。",
+      keys: translateShortcut,
+      enabled: translateEnabled,
+      source: translateInstructionId
+        ? `语音服务 → 指令 ${translateInstructionId}`
+        : "语音服务 → 翻译指令未绑定",
+      scope: "global",
     },
   ];
 
@@ -178,68 +146,178 @@ function buildHotkeys(
     {
       id: "terminal-search",
       label: "终端搜索",
-      description: "在终端页面打开搜索框",
+      description: "在终端页面打开搜索框。",
       keys: ["⌘/Ctrl", "F"],
       enabled: true,
       source: "终端页面",
+      scope: "local",
     },
     {
       id: "terminal-font-plus",
       label: "终端字体放大",
-      description: "在终端页面增大字体",
+      description: "在终端页面增大字体。",
       keys: ["⌘/Ctrl", "+"],
       enabled: true,
       source: "终端页面",
+      scope: "local",
     },
     {
       id: "terminal-font-minus",
       label: "终端字体缩小",
-      description: "在终端页面减小字体",
+      description: "在终端页面减小字体。",
       keys: ["⌘/Ctrl", "-"],
       enabled: true,
       source: "终端页面",
+      scope: "local",
     },
     {
       id: "terminal-font-reset",
       label: "终端字体重置",
-      description: "在终端页面重置字体大小",
+      description: "在终端页面重置字体大小。",
       keys: ["⌘/Ctrl", "0"],
       enabled: true,
       source: "终端页面",
+      scope: "local",
     },
   ];
 
   return { globalHotkeys, localHotkeys };
 }
 
-function HotkeySection({
+function HotkeyPanel({
+  icon: Icon,
   title,
-  hotkeys,
-}: {
-  title: string;
-  hotkeys: HotkeyConfig[];
-}) {
+  description,
+  aside,
+  children,
+}: HotkeyPanelProps) {
   return (
-    <Section>
-      <SectionTitle>{title}</SectionTitle>
-      {hotkeys.map((hotkey) => (
-        <HotkeyItem key={hotkey.id}>
-          <HotkeyInfo>
-            <HotkeyLabel>{hotkey.label}</HotkeyLabel>
-            <HotkeyDescription>{hotkey.description}</HotkeyDescription>
-            <HotkeyMeta>{hotkey.source}</HotkeyMeta>
-          </HotkeyInfo>
-          <HotkeyValue>
-            <StatusBadge $enabled={hotkey.enabled}>
-              {hotkey.enabled ? "已启用" : "未启用"}
-            </StatusBadge>
-            {hotkey.keys.map((key, index) => (
-              <KeyBadge key={index}>{key}</KeyBadge>
-            ))}
-          </HotkeyValue>
-        </HotkeyItem>
-      ))}
-    </Section>
+    <article className="rounded-[26px] border border-slate-200/80 bg-white p-5 shadow-sm shadow-slate-950/5">
+      <div className="flex flex-col gap-4 sm:flex-row sm:items-start sm:justify-between">
+        <div className="space-y-1">
+          <div className="flex items-center gap-2 text-sm font-semibold text-slate-900">
+            <Icon className="h-4 w-4 text-sky-600" />
+            {title}
+          </div>
+          <p className="text-sm leading-6 text-slate-500">{description}</p>
+        </div>
+        {aside ? (
+          <div className="flex flex-wrap items-center gap-2">{aside}</div>
+        ) : null}
+      </div>
+
+      <div className="mt-5">{children}</div>
+    </article>
+  );
+}
+
+function SummaryStat({ label, value, description }: SummaryStatProps) {
+  return (
+    <div className="rounded-[22px] border border-white/90 bg-white/88 p-4 shadow-sm">
+      <p className="text-xs font-medium tracking-[0.12em] text-slate-500">
+        {label}
+      </p>
+      <p className="mt-3 text-3xl font-semibold tracking-tight text-slate-900">
+        {value}
+      </p>
+      <p className="mt-2 text-xs leading-5 text-slate-500">{description}</p>
+    </div>
+  );
+}
+
+function LoadingSkeleton() {
+  return (
+    <div className="space-y-6 pb-8">
+      <div className="h-[228px] animate-pulse rounded-[30px] border border-slate-200/80 bg-[linear-gradient(135deg,rgba(244,251,248,0.98)_0%,rgba(248,250,252,0.98)_45%,rgba(241,246,255,0.96)_100%)]" />
+      <div className="grid gap-6 xl:grid-cols-2">
+        <div className="h-[360px] animate-pulse rounded-[26px] border border-slate-200/80 bg-white" />
+        <div className="h-[360px] animate-pulse rounded-[26px] border border-slate-200/80 bg-white" />
+      </div>
+    </div>
+  );
+}
+
+function HotkeyCard({ hotkey }: { hotkey: HotkeyConfig }) {
+  const Icon = HOTKEY_ICON_MAP[hotkey.id] || Keyboard;
+
+  return (
+    <article className="rounded-[22px] border border-slate-200/80 bg-slate-50/60 p-4">
+      <div className="flex flex-col gap-4 lg:flex-row lg:items-start lg:justify-between">
+        <div className="flex items-start gap-3">
+          <div className="flex h-11 w-11 items-center justify-center rounded-2xl border border-slate-200 bg-white text-slate-700">
+            <Icon className="h-5 w-5" />
+          </div>
+          <div className="space-y-1">
+            <div className="flex flex-wrap items-center gap-2">
+              <p className="text-sm font-semibold text-slate-900">
+                {hotkey.label}
+              </p>
+              <span
+                className={cn(
+                  "rounded-full border px-2.5 py-1 text-[11px] font-medium",
+                  hotkey.enabled
+                    ? "border-emerald-200 bg-emerald-50 text-emerald-700"
+                    : "border-slate-200 bg-slate-100 text-slate-500",
+                )}
+              >
+                {hotkey.enabled ? "已启用" : "未启用"}
+              </span>
+              <span className="rounded-full border border-slate-200 bg-white px-2.5 py-1 text-[11px] font-medium text-slate-500">
+                {hotkey.scope === "global" ? "全局" : "页面内"}
+              </span>
+            </div>
+            <p className="text-sm leading-6 text-slate-500">
+              {hotkey.description}
+            </p>
+            <p className="text-xs leading-5 text-slate-400">{hotkey.source}</p>
+          </div>
+        </div>
+
+        <div className="flex flex-wrap items-center gap-2 lg:max-w-[280px] lg:justify-end">
+          {hotkey.keys.map((key) => (
+            <span
+              key={`${hotkey.id}-${key}`}
+              className={cn(
+                "inline-flex min-h-9 min-w-9 items-center justify-center rounded-[14px] border px-3 text-sm shadow-sm",
+                key === "未设置"
+                  ? "border-amber-200 bg-amber-50 text-amber-700"
+                  : "border-slate-200 bg-white text-slate-700",
+              )}
+            >
+              {key}
+            </span>
+          ))}
+        </div>
+      </div>
+    </article>
+  );
+}
+
+function HotkeySection({ title, description, hotkeys }: HotkeySectionMeta) {
+  const enabledCount = hotkeys.filter((item) => item.enabled).length;
+
+  return (
+    <HotkeyPanel
+      icon={title === "全局快捷键" ? Sparkles : TerminalSquare}
+      title={title}
+      description={description}
+      aside={
+        <>
+          <span className="rounded-full border border-slate-200 bg-slate-100 px-3 py-1 text-xs font-medium text-slate-500">
+            共 {hotkeys.length} 项
+          </span>
+          <span className="rounded-full border border-emerald-200 bg-emerald-50 px-3 py-1 text-xs font-medium text-emerald-700">
+            已启用 {enabledCount} 项
+          </span>
+        </>
+      }
+    >
+      <div className="space-y-3">
+        {hotkeys.map((hotkey) => (
+          <HotkeyCard key={hotkey.id} hotkey={hotkey} />
+        ))}
+      </div>
+    </HotkeyPanel>
   );
 }
 
@@ -260,8 +338,8 @@ export function HotkeysSettings() {
       ]);
 
       const built = buildHotkeys(
-        experimentalConfig.screenshot_chat.enabled,
-        experimentalConfig.screenshot_chat.shortcut,
+        experimentalConfig?.screenshot_chat?.enabled ?? false,
+        experimentalConfig?.screenshot_chat?.shortcut,
         voiceConfig,
       );
 
@@ -276,46 +354,178 @@ export function HotkeysSettings() {
   }, []);
 
   useEffect(() => {
-    loadHotkeys();
+    void loadHotkeys();
   }, [loadHotkeys]);
 
-  return (
-    <Container>
-      <HeaderHint>
-        仅展示当前版本已实现的快捷键；全局快捷键会随配置实时更新。
-      </HeaderHint>
+  const summary = useMemo(() => {
+    const allHotkeys = [...globalHotkeys, ...localHotkeys];
+    const enabledHotkeys = allHotkeys.filter((item) => item.enabled);
 
-      {loading ? (
-        <div
-          style={{
-            display: "flex",
-            alignItems: "center",
-            gap: 8,
-            fontSize: 13,
-          }}
-        >
-          <Loader2 size={16} className="animate-spin" />
-          正在加载快捷键信息...
+    return {
+      total: allHotkeys.length,
+      enabled: enabledHotkeys.length,
+      disabled: allHotkeys.length - enabledHotkeys.length,
+      globalEnabled: globalHotkeys.filter((item) => item.enabled).length,
+      localEnabled: localHotkeys.filter((item) => item.enabled).length,
+    };
+  }, [globalHotkeys, localHotkeys]);
+
+  if (loading) {
+    return <LoadingSkeleton />;
+  }
+
+  return (
+    <div className="space-y-6 pb-8">
+      {error ? (
+        <div className="flex items-center justify-between gap-4 rounded-[20px] border border-rose-200 bg-rose-50/90 px-4 py-3 text-sm text-rose-700 shadow-sm shadow-slate-950/5">
+          <div className="flex items-center gap-2">
+            <AlertCircle className="h-4 w-4" />
+            <span>加载快捷键失败：{error}</span>
+          </div>
+          <button
+            type="button"
+            onClick={() => void loadHotkeys()}
+            className="rounded-full border border-rose-200 bg-white px-3 py-1.5 text-xs font-medium text-rose-700 transition hover:border-rose-300 hover:bg-rose-50"
+          >
+            重试
+          </button>
         </div>
-      ) : error ? (
-        <div
-          style={{
-            padding: "10px 12px",
-            borderRadius: 8,
-            border: "1px solid hsl(var(--destructive) / 0.4)",
-            color: "hsl(var(--destructive))",
-            fontSize: 13,
-          }}
-        >
-          加载快捷键失败：{error}
+      ) : null}
+
+      <section className="relative overflow-hidden rounded-[30px] border border-emerald-200/70 bg-[linear-gradient(135deg,rgba(244,251,248,0.98)_0%,rgba(248,250,252,0.98)_45%,rgba(241,246,255,0.96)_100%)] shadow-sm shadow-slate-950/5">
+        <div className="pointer-events-none absolute -left-20 top-[-72px] h-56 w-56 rounded-full bg-emerald-200/30 blur-3xl" />
+        <div className="pointer-events-none absolute right-[-76px] top-[-24px] h-56 w-56 rounded-full bg-sky-200/28 blur-3xl" />
+
+        <div className="relative flex flex-col gap-6 p-6 lg:p-8">
+          <div className="grid gap-6 xl:grid-cols-[minmax(0,1.1fr)_minmax(360px,0.9fr)] xl:items-stretch">
+            <div className="max-w-3xl space-y-5">
+              <span className="inline-flex items-center rounded-full border border-emerald-200 bg-white/85 px-3 py-1 text-xs font-semibold tracking-[0.16em] text-emerald-700 shadow-sm">
+                HOTKEY MAP
+              </span>
+              <div className="space-y-2">
+                <p className="text-[28px] font-semibold tracking-tight text-slate-900">
+                  把全局快捷键和页面内快捷键放到同一个清单里查看
+                </p>
+                <p className="max-w-2xl text-sm leading-7 text-slate-600">
+                  这里展示当前版本已经实现的快捷键，包含作用范围、来源和启用状态。
+                  在 macOS 中会显示 <span className="font-medium">⌘</span>， 在
+                  Windows 中对应 <span className="font-medium">Ctrl</span>。
+                </p>
+              </div>
+
+              <div className="flex flex-wrap items-center gap-2">
+                <span className="rounded-full border border-white/90 bg-white/88 px-3 py-1.5 text-xs font-medium text-slate-600 shadow-sm">
+                  全局快捷键会随语音服务和实验功能配置同步更新
+                </span>
+                <span className="rounded-full border border-white/90 bg-white/88 px-3 py-1.5 text-xs font-medium text-slate-600 shadow-sm">
+                  页面内快捷键当前主要作用于终端页面
+                </span>
+              </div>
+            </div>
+
+            <div className="grid gap-3 sm:grid-cols-3 xl:grid-cols-1 xl:content-start">
+              <SummaryStat
+                label="快捷键总数"
+                value={summary.total.toString()}
+                description="当前设置页已归档的快捷键数量。"
+              />
+              <SummaryStat
+                label="已启用"
+                value={summary.enabled.toString()}
+                description="当前可直接使用的快捷键数量。"
+              />
+              <SummaryStat
+                label="待配置"
+                value={summary.disabled.toString()}
+                description="依赖功能开关、权限或尚未设置快捷键的项目。"
+              />
+            </div>
+          </div>
         </div>
-      ) : (
-        <>
-          <HotkeySection title="全局快捷键" hotkeys={globalHotkeys} />
-          <HotkeySection title="页面内快捷键" hotkeys={localHotkeys} />
-        </>
-      )}
-    </Container>
+      </section>
+
+      <div className="grid gap-6 xl:grid-cols-[minmax(0,1.14fr)_minmax(320px,0.86fr)]">
+        <div className="space-y-6">
+          <HotkeySection
+            title="全局快捷键"
+            description="可在任意页面触发，但依赖语音服务或实验功能已开启。"
+            hotkeys={globalHotkeys}
+          />
+          <HotkeySection
+            title="页面内快捷键"
+            description="仅在对应页面激活，目前主要覆盖终端场景。"
+            hotkeys={localHotkeys}
+          />
+        </div>
+
+        <div className="space-y-6">
+          <HotkeyPanel
+            icon={Keyboard}
+            title="使用提示"
+            description="先确认作用范围，再去对应模块启用功能，避免以为快捷键失效。"
+          >
+            <div className="space-y-3">
+              <div className="rounded-[22px] border border-slate-200/80 bg-slate-50/60 p-4">
+                <p className="text-sm font-semibold text-slate-900">
+                  跨平台差异
+                </p>
+                <p className="mt-2 text-sm leading-6 text-slate-500">
+                  列表里的{" "}
+                  <span className="font-medium text-slate-700">⌘/Ctrl</span>
+                  表示 macOS 使用 Command，Windows 使用 Ctrl。
+                </p>
+              </div>
+              <div className="rounded-[22px] border border-slate-200/80 bg-slate-50/60 p-4">
+                <p className="text-sm font-semibold text-slate-900">
+                  全局快捷键生效条件
+                </p>
+                <p className="mt-2 text-sm leading-6 text-slate-500">
+                  截图对话依赖实验功能配置，语音输入和翻译模式依赖语音服务已经启用，
+                  且系统允许应用注册全局快捷键。
+                </p>
+              </div>
+              <div className="rounded-[22px] border border-slate-200/80 bg-slate-50/60 p-4">
+                <p className="text-sm font-semibold text-slate-900">
+                  页面内快捷键
+                </p>
+                <p className="mt-2 text-sm leading-6 text-slate-500">
+                  终端类快捷键只在终端页面聚焦时有效，不会影响其他工作区输入体验。
+                </p>
+              </div>
+            </div>
+          </HotkeyPanel>
+
+          <HotkeyPanel
+            icon={Sparkles}
+            title="快捷状态概览"
+            description="帮助你快速判断当前哪些快捷键可直接用、哪些还需要配置。"
+          >
+            <div className="grid gap-3">
+              <div className="rounded-[22px] border border-slate-200/80 bg-slate-50/60 p-4">
+                <div className="flex items-center justify-between gap-3">
+                  <p className="text-sm font-semibold text-slate-900">
+                    全局快捷键
+                  </p>
+                  <span className="rounded-full border border-emerald-200 bg-emerald-50 px-3 py-1 text-xs font-medium text-emerald-700">
+                    已启用 {summary.globalEnabled} / {globalHotkeys.length}
+                  </span>
+                </div>
+              </div>
+              <div className="rounded-[22px] border border-slate-200/80 bg-slate-50/60 p-4">
+                <div className="flex items-center justify-between gap-3">
+                  <p className="text-sm font-semibold text-slate-900">
+                    页面内快捷键
+                  </p>
+                  <span className="rounded-full border border-emerald-200 bg-emerald-50 px-3 py-1 text-xs font-medium text-emerald-700">
+                    已启用 {summary.localEnabled} / {localHotkeys.length}
+                  </span>
+                </div>
+              </div>
+            </div>
+          </HotkeyPanel>
+        </div>
+      </div>
+    </div>
   );
 }
 
diff --git a/src/components/settings-v2/general/memory/index.test.tsx b/src/components/settings-v2/general/memory/index.test.tsx
index ee03659a4..a46da03a9 100644
--- a/src/components/settings-v2/general/memory/index.test.tsx
+++ b/src/components/settings-v2/general/memory/index.test.tsx
@@ -208,6 +208,19 @@ afterEach(() => {
 });
 
 describe("MemorySettings", () => {
+  it("应渲染新的记忆概览与主要分区", async () => {
+    const container = renderComponent();
+    await flushEffects();
+    await flushEffects();
+
+    const text = container.textContent ?? "";
+    expect(text).toContain("MEMORY SNAPSHOT");
+    expect(text).toContain("偏好画像");
+    expect(text).toContain("三层记忆可用性");
+    expect(text).toContain("记忆来源策略");
+    expect(text).toContain("自动记忆（Auto Memory）");
+  });
+
   it("初始化时应加载来源与自动记忆索引", async () => {
     renderComponent();
     await flushEffects();
diff --git a/src/components/settings-v2/general/memory/index.tsx b/src/components/settings-v2/general/memory/index.tsx
index 5802bdd61..5ccdc41c7 100644
--- a/src/components/settings-v2/general/memory/index.tsx
+++ b/src/components/settings-v2/general/memory/index.tsx
@@ -1,5 +1,23 @@
-import { useCallback, useEffect, useMemo, useState } from "react";
-import { Brain, Loader2, RefreshCw } from "lucide-react";
+import {
+  useCallback,
+  useEffect,
+  useMemo,
+  useState,
+  type ReactNode,
+} from "react";
+import {
+  AlertCircle,
+  Brain,
+  CheckCircle2,
+  Database,
+  Files,
+  FolderTree,
+  Layers3,
+  RefreshCw,
+  Sparkles,
+  type LucideIcon,
+} from "lucide-react";
+import { Switch } from "@/components/ui/switch";
 import { cn } from "@/lib/utils";
 import {
   getMemoryAutoIndex,
@@ -133,6 +151,56 @@ interface MultiSelectSectionProps {
   options: string[];
   value: string[];
   onToggle: (value: string) => void;
+  multiple?: boolean;
+  className?: string;
+}
+
+interface MemoryPanelProps {
+  icon: LucideIcon;
+  title: string;
+  description?: string;
+  aside?: ReactNode;
+  className?: string;
+  children: ReactNode;
+}
+
+const INPUT_CLASS_NAME =
+  "w-full rounded-[16px] border border-slate-200 bg-slate-50/70 px-3.5 py-2.5 text-sm text-slate-700 outline-none transition placeholder:text-slate-400 focus:border-slate-300 focus:bg-white";
+const TEXTAREA_CLASS_NAME = `${INPUT_CLASS_NAME} min-h-24`;
+const TOGGLE_ROW_CLASS_NAME =
+  "flex items-center justify-between rounded-[18px] border border-slate-200 bg-slate-50/60 px-4 py-3 text-sm text-slate-700";
+
+function MemoryPanel({
+  icon: Icon,
+  title,
+  description,
+  aside,
+  className,
+  children,
+}: MemoryPanelProps) {
+  return (
+    <article
+      className={cn(
+        "rounded-[26px] border border-slate-200/80 bg-white p-5 shadow-sm shadow-slate-950/5",
+        className,
+      )}
+    >
+      <div className="flex flex-col gap-4 sm:flex-row sm:items-start sm:justify-between">
+        <div className="space-y-1">
+          <div className="flex items-center gap-2 text-sm font-semibold text-slate-900">
+            <Icon className="h-4 w-4 text-sky-600" />
+            {title}
+          </div>
+          {description ? (
+            <p className="text-sm leading-6 text-slate-500">{description}</p>
+          ) : null}
+        </div>
+        {aside ? <div className="flex flex-wrap items-center gap-2">{aside}</div> : null}
+      </div>
+
+      <div className="mt-5">{children}</div>
+    </article>
+  );
 }
 
 function MultiSelectSection({
@@ -141,17 +209,37 @@ function MultiSelectSection({
   options,
   value,
   onToggle,
+  multiple = true,
+  className,
 }: MultiSelectSectionProps) {
+  const badgeText = multiple
+    ? value.length > 0
+      ? `${value.length} 个已选`
+      : "可多选"
+    : value.length > 0
+      ? "已选择"
+      : "待选择";
+
   return (
-    <div className="rounded-lg border p-4 space-y-3">
-      <div>
-        <h3 className="text-sm font-medium">{title}</h3>
-        {subtitle && (
-          <p className="text-xs text-muted-foreground">{subtitle}</p>
-        )}
+    <article
+      className={cn(
+        "rounded-[24px] border border-slate-200/80 bg-slate-50/60 p-4",
+        className,
+      )}
+    >
+      <div className="flex flex-col gap-3 sm:flex-row sm:items-start sm:justify-between">
+        <div>
+          <h3 className="text-sm font-semibold text-slate-900">{title}</h3>
+          {subtitle && (
+            <p className="mt-1 text-xs leading-5 text-slate-500">{subtitle}</p>
+          )}
+        </div>
+        <span className="rounded-full border border-slate-200 bg-white px-3 py-1 text-xs font-medium text-slate-500">
+          {badgeText}
+        </span>
       </div>
 
-      <div className="flex flex-wrap gap-2">
+      <div className="mt-4 flex flex-wrap gap-2.5">
         {options.map((option) => {
           const selected = value.includes(option);
           return (
@@ -160,10 +248,10 @@ function MultiSelectSection({
               type="button"
               onClick={() => onToggle(option)}
               className={cn(
-                "rounded-md border px-3 py-1.5 text-xs transition-colors",
+                "rounded-full border px-3.5 py-2 text-sm transition shadow-sm",
                 selected
-                  ? "border-primary bg-primary/10 text-primary"
-                  : "hover:bg-muted",
+                  ? "border-slate-900 bg-slate-900 text-white"
+                  : "border-slate-200 bg-white text-slate-600 hover:border-slate-300 hover:text-slate-900",
               )}
             >
               {option}
@@ -171,6 +259,70 @@ function MultiSelectSection({
           );
         })}
       </div>
+    </article>
+  );
+}
+
+function SummaryStat({
+  label,
+  value,
+  description,
+}: {
+  label: string;
+  value: string;
+  description: string;
+}) {
+  return (
+    <div className="rounded-[20px] border border-white/90 bg-white/88 p-4 shadow-sm">
+      <p className="text-xs font-medium tracking-[0.12em] text-slate-500">
+        {label}
+      </p>
+      <p className="mt-3 text-3xl font-semibold tracking-tight text-slate-900">
+        {value}
+      </p>
+      <p className="mt-2 text-xs leading-5 text-slate-500">{description}</p>
+    </div>
+  );
+}
+
+function SourceStatusPill({
+  loaded,
+  exists,
+}: {
+  loaded: boolean;
+  exists: boolean;
+}) {
+  return (
+    <span
+      className={cn(
+        "rounded-full border px-2 py-0.5 text-[10px] font-medium",
+        loaded
+          ? "border-emerald-200 bg-emerald-50 text-emerald-700"
+          : exists
+            ? "border-amber-200 bg-amber-50 text-amber-700"
+            : "border-slate-200 bg-slate-100 text-slate-500",
+      )}
+    >
+      {loaded ? "已加载" : exists ? "存在未命中" : "未发现"}
+    </span>
+  );
+}
+
+function LoadingSkeleton() {
+  return (
+    <div className="space-y-6 pb-8">
+      <div className="h-[228px] animate-pulse rounded-[30px] border border-slate-200/80 bg-[linear-gradient(135deg,rgba(244,251,248,0.98)_0%,rgba(248,250,252,0.98)_45%,rgba(241,246,255,0.96)_100%)]" />
+      <div className="grid gap-6 xl:grid-cols-[minmax(0,1.35fr)_minmax(340px,0.92fr)]">
+        <div className="h-[420px] animate-pulse rounded-[26px] border border-slate-200/80 bg-white" />
+        <div className="space-y-6">
+          <div className="h-[240px] animate-pulse rounded-[26px] border border-slate-200/80 bg-white" />
+          <div className="h-[220px] animate-pulse rounded-[26px] border border-slate-200/80 bg-white" />
+        </div>
+      </div>
+      <div className="grid gap-6 xl:grid-cols-[minmax(0,1.18fr)_minmax(0,0.82fr)]">
+        <div className="h-[420px] animate-pulse rounded-[26px] border border-slate-200/80 bg-white" />
+        <div className="h-[420px] animate-pulse rounded-[26px] border border-slate-200/80 bg-white" />
+      </div>
     </div>
   );
 }
@@ -400,548 +552,765 @@ export function MemorySettings() {
   };
 
   if (loading) {
-    return (
-      <div className="flex items-center justify-center py-12 text-muted-foreground">
-        <Loader2 className="mr-2 h-5 w-5 animate-spin" />
-        正在加载记忆设置...
-      </div>
-    );
+    return <LoadingSkeleton />;
   }
 
   const profile = normalizeProfile(draft.profile);
   const sourcesConfig = normalizeSources(draft.sources);
   const autoConfig = normalizeAuto(draft.auto);
   const resolveConfig = normalizeResolve(draft.resolve);
+  const profileAnsweredCount = [
+    profile.current_status,
+    profile.strengths?.length ? "strengths" : "",
+    profile.explanation_style?.length ? "explanation_style" : "",
+    profile.challenge_preference?.length ? "challenge_preference" : "",
+  ].filter(Boolean).length;
+  const profileCompletionPercent = Math.round((profileAnsweredCount / 4) * 100);
+  const readyLayerLabel = layerMetrics
+    ? `${layerMetrics.readyLayers}/${layerMetrics.totalLayers}`
+    : "--";
+  const sourceHitLabel = effectiveSources
+    ? `${effectiveSources.loaded_sources}/${effectiveSources.total_sources}`
+    : "--";
+  const autoStatusLabel = autoConfig.enabled
+    ? autoIndex?.entry_exists
+      ? "已初始化"
+      : "待初始化"
+    : "已关闭";
+  const messageIsError = Boolean(
+    message && (message.includes("失败") || message.includes("请先")),
+  );
 
   return (
-    <div className="space-y-4 max-w-4xl">
-      <div className="rounded-lg border p-4">
-        <div className="flex items-start justify-between gap-4">
-          <div className="flex items-start gap-2">
-            <Brain className="h-4 w-4 text-muted-foreground mt-0.5" />
-            <div>
-              <h3 className="text-sm font-medium">记忆</h3>
-              <p className="text-xs text-muted-foreground mt-1">
-                启用对话记忆功能，以便更好地理解上下文
+    <div className="space-y-6 pb-8">
+      {message ? (
+        <div
+          className={cn(
+            "flex items-center gap-3 rounded-[20px] border px-4 py-3 text-sm shadow-sm shadow-slate-950/5",
+            messageIsError
+              ? "border-rose-200 bg-rose-50/90 text-rose-700"
+              : "border-emerald-200 bg-emerald-50/90 text-emerald-700",
+          )}
+        >
+          {messageIsError ? (
+            <AlertCircle className="h-4 w-4 flex-shrink-0" />
+          ) : (
+            <CheckCircle2 className="h-4 w-4 flex-shrink-0" />
+          )}
+          <span>{message}</span>
+        </div>
+      ) : null}
+
+      <section className="relative overflow-hidden rounded-[30px] border border-emerald-200/70 bg-[linear-gradient(135deg,rgba(244,251,248,0.98)_0%,rgba(248,250,252,0.98)_45%,rgba(241,246,255,0.96)_100%)] shadow-sm shadow-slate-950/5">
+        <div className="pointer-events-none absolute -left-20 top-[-72px] h-56 w-56 rounded-full bg-emerald-200/30 blur-3xl" />
+        <div className="pointer-events-none absolute right-[-76px] top-[-24px] h-56 w-56 rounded-full bg-sky-200/28 blur-3xl" />
+
+        <div className="relative grid gap-6 p-6 lg:p-8 xl:grid-cols-[minmax(0,1.12fr)_minmax(380px,0.88fr)]">
+          <div className="space-y-5">
+            <span className="inline-flex items-center rounded-full border border-emerald-200 bg-white/85 px-3 py-1 text-xs font-semibold tracking-[0.16em] text-emerald-700 shadow-sm">
+              MEMORY SNAPSHOT
+            </span>
+            <div className="space-y-2">
+              <p className="text-[28px] font-semibold tracking-tight text-slate-900">
+                让记忆真正参与上下文
+              </p>
+              <p className="max-w-2xl text-sm leading-7 text-slate-600">
+                这页负责管理用户画像、三层记忆来源与自动记忆入口。目标不是堆更多配置，
+                而是让代理在长期使用里更稳定地理解你的背景与偏好。
               </p>
             </div>
-          </div>
 
-          <div className="flex items-center gap-2">
-            <button
-              type="button"
-              onClick={handleCancel}
-              disabled={!dirty || saving}
-              className="rounded border px-3 py-1.5 text-xs hover:bg-muted disabled:opacity-60"
-            >
-              取消
-            </button>
-            <button
-              type="button"
-              onClick={handleSave}
-              disabled={!dirty || saving}
-              className="rounded bg-primary px-3 py-1.5 text-xs text-primary-foreground hover:opacity-90 disabled:opacity-60"
-            >
-              {saving ? "保存中..." : "保存"}
-            </button>
-          </div>
-        </div>
-
-        <div className="mt-4 flex items-center justify-between rounded-md border p-3">
-          <div className="text-sm">启用记忆</div>
-          <input
-            type="checkbox"
-            checked={draft.enabled}
-            onChange={(event) =>
-              setDraft((prev) => ({ ...prev, enabled: event.target.checked }))
-            }
-            className="h-4 w-4 rounded border-gray-300"
-          />
-        </div>
-      </div>
-
-      <div className="rounded-lg border p-4 space-y-3">
-        <h3 className="text-sm font-medium">
-          以下哪个选项最能形容你现在的状态?
-        </h3>
-        <div className="flex flex-wrap gap-2">
-          {STATUS_OPTIONS.map((option) => {
-            const selected = profile.current_status === option;
-            return (
-              <button
-                key={option}
-                type="button"
-                onClick={() => setStatus(option)}
-                className={cn(
-                  "rounded-md border px-3 py-1.5 text-xs transition-colors",
-                  selected
-                    ? "border-primary bg-primary/10 text-primary"
-                    : "hover:bg-muted",
-                )}
-              >
-                {option}
-              </button>
-            );
-          })}
-        </div>
-      </div>
-
-      <MultiSelectSection
-        title="你觉得自己有哪些方面比较擅长?"
-        subtitle="（可多选）"
-        options={STRENGTH_OPTIONS}
-        value={profile.strengths || []}
-        onToggle={(option) => toggleMulti("strengths", option)}
-      />
-
-      <MultiSelectSection
-        title="我解释事情时通常更喜欢:"
-        subtitle="（可多选）"
-        options={EXPLANATION_STYLE_OPTIONS}
-        value={profile.explanation_style || []}
-        onToggle={(option) => toggleMulti("explanation_style", option)}
-      />
-
-      <MultiSelectSection
-        title="当你遇到难题/概念时，你更倾向于:"
-        subtitle="（可多选）"
-        options={CHALLENGE_OPTIONS}
-        value={profile.challenge_preference || []}
-        onToggle={(option) => toggleMulti("challenge_preference", option)}
-      />
-
-      <div className="rounded-lg border p-4 space-y-3 bg-muted/20">
-        <div className="flex items-center justify-between gap-2">
-          <h3 className="text-sm font-medium">三层记忆可用性</h3>
-          <button
-            type="button"
-            onClick={() => loadLayerMetrics()}
-            disabled={loadingLayerMetrics}
-            className="inline-flex items-center gap-1 rounded border px-2 py-1 text-[11px] hover:bg-muted disabled:opacity-60"
-          >
-            <RefreshCw
-              className={cn("h-3 w-3", loadingLayerMetrics && "animate-spin")}
-            />
-            刷新
-          </button>
-        </div>
-
-        {layerMetrics ? (
-          <>
-            <div className="text-xs text-muted-foreground">
-              已可用 {layerMetrics.readyLayers}/{layerMetrics.totalLayers} 层
+            <div className="flex flex-wrap gap-2">
+              <span className="rounded-full border border-white/90 bg-white/80 px-3 py-1.5 text-xs font-medium text-slate-600 shadow-sm">
+                画像完成度 {profileCompletionPercent}%
+              </span>
+              <span className="rounded-full border border-white/90 bg-white/80 px-3 py-1.5 text-xs font-medium text-slate-600 shadow-sm">
+                三层可用 {readyLayerLabel}
+              </span>
+              <span className="rounded-full border border-white/90 bg-white/80 px-3 py-1.5 text-xs font-medium text-slate-600 shadow-sm">
+                来源命中 {sourceHitLabel}
+              </span>
+              <span className="rounded-full border border-white/90 bg-white/80 px-3 py-1.5 text-xs font-medium text-slate-600 shadow-sm">
+                自动记忆 {autoStatusLabel}
+              </span>
             </div>
-            <div className="space-y-2">
-              {layerMetrics.cards.map((card) => (
-                <div
-                  key={card.key}
-                  className="rounded border bg-background/60 px-3 py-2"
-                >
-                  <div className="flex items-center justify-between gap-2">
-                    <span className="text-xs font-medium">{card.title}</span>
-                    <span
-                      className={cn(
-                        "rounded-full border px-2 py-0.5 text-[10px]",
-                        card.available
-                          ? "text-green-700 border-green-200 bg-green-50"
-                          : "text-muted-foreground border-muted",
-                      )}
-                    >
-                      {card.available ? "已生效" : "待完善"}
-                    </span>
-                  </div>
-                  <p className="mt-1 text-[11px] text-muted-foreground leading-relaxed">
-                    {card.description}
-                  </p>
-                </div>
-              ))}
-            </div>
-            <p className="text-xs text-muted-foreground">
-              第三层（项目记忆）的补全操作在「记忆」页面进行（支持一键初始化）。
+
+            <p className="text-xs leading-5 text-slate-500">
+              当前模式：{draft.enabled ? "记忆已启用" : "记忆已关闭"}。
+              {dirty ? " 有未保存更改。" : " 当前配置与已保存版本一致。"}
             </p>
-          </>
-        ) : (
-          <p className="text-xs text-muted-foreground">正在加载三层状态...</p>
-        )}
-      </div>
+          </div>
 
-      <div className="rounded-lg border p-4 space-y-4">
-        <div className="flex items-center justify-between gap-2">
-          <h3 className="text-sm font-medium">记忆来源策略</h3>
-          <button
-            type="button"
-            onClick={() => loadSourceState()}
-            disabled={loadingSourceState}
-            className="inline-flex items-center gap-1 rounded border px-2 py-1 text-[11px] hover:bg-muted disabled:opacity-60"
-          >
-            <RefreshCw
-              className={cn("h-3 w-3", loadingSourceState && "animate-spin")}
-            />
-            刷新来源
-          </button>
+          <article className="flex h-full flex-col rounded-[26px] border border-white/90 bg-white/84 p-5 shadow-sm shadow-slate-950/5 backdrop-blur-[2px]">
+            <div className="flex flex-col gap-4 sm:flex-row sm:items-start sm:justify-between">
+              <div>
+                <div className="flex items-center gap-2 text-sm font-semibold text-slate-900">
+                  <Brain className="h-4 w-4 text-sky-600" />
+                  记忆控制台
+                </div>
+                <p className="mt-1 text-sm leading-6 text-slate-500">
+                  统一管理开关、保存动作与核心状态摘要。
+                </p>
+              </div>
+
+              <div className="flex items-center gap-2">
+                <button
+                  type="button"
+                  onClick={handleCancel}
+                  disabled={!dirty || saving}
+                  className="rounded-full border border-slate-200 bg-white px-3 py-1.5 text-xs font-medium text-slate-600 transition hover:border-slate-300 hover:text-slate-900 disabled:opacity-60"
+                >
+                  取消
+                </button>
+                <button
+                  type="button"
+                  onClick={handleSave}
+                  disabled={!dirty || saving}
+                  className="rounded-full bg-slate-900 px-3 py-1.5 text-xs font-medium text-white transition hover:bg-slate-800 disabled:opacity-60"
+                >
+                  {saving ? "保存中..." : "保存"}
+                </button>
+              </div>
+            </div>
+
+            <div className="mt-5 flex items-center justify-between rounded-[20px] border border-slate-200 bg-slate-50/70 px-4 py-3">
+              <div>
+                <p className="text-sm font-semibold text-slate-900">启用记忆</p>
+                <p className="mt-1 text-xs leading-5 text-slate-500">
+                  启用对话记忆功能，以便更好地理解上下文。
+                </p>
+              </div>
+              <Switch
+                aria-label="启用记忆"
+                checked={draft.enabled}
+                onCheckedChange={(checked) =>
+                  setDraft((prev) => ({ ...prev, enabled: checked }))
+                }
+              />
+            </div>
+
+            <div className="mt-4 grid gap-3 sm:grid-cols-2">
+              <SummaryStat
+                label="画像完成度"
+                value={`${profileCompletionPercent}%`}
+                description="状态、擅长方向、解释偏好与拆解方式的完成比例。"
+              />
+              <SummaryStat
+                label="三层可用"
+                value={readyLayerLabel}
+                description="统一记忆、上下文记忆与项目记忆的当前可用层数。"
+              />
+              <SummaryStat
+                label="来源命中"
+                value={sourceHitLabel}
+                description="当前工作目录下已加载的记忆来源数量。"
+              />
+              <SummaryStat
+                label="自动记忆"
+                value={autoStatusLabel}
+                description="Auto Memory 入口的当前启用与初始化状态。"
+              />
+            </div>
+          </article>
         </div>
+      </section>
 
-        <div className="grid grid-cols-1 md:grid-cols-2 gap-3">
-          <label className="space-y-1">
-            <span className="text-xs text-muted-foreground">组织策略文件</span>
-            <input
-              type="text"
-              value={sourcesConfig.managed_policy_path || ""}
-              onChange={(event) =>
-                setDraft((prev) => ({
-                  ...prev,
-                  sources: {
-                    ...normalizeSources(prev.sources),
-                    managed_policy_path: event.target.value || undefined,
-                  },
-                }))
-              }
-              className="w-full rounded border bg-background px-2 py-1.5 text-xs"
-              placeholder="例如 /Library/Application Support/ProxyCast/AGENTS.md"
-            />
-          </label>
-
-          <label className="space-y-1">
-            <span className="text-xs text-muted-foreground">用户记忆文件</span>
-            <input
-              type="text"
-              value={sourcesConfig.user_memory_path || ""}
-              onChange={(event) =>
-                setDraft((prev) => ({
-                  ...prev,
-                  sources: {
-                    ...normalizeSources(prev.sources),
-                    user_memory_path: event.target.value || undefined,
-                  },
-                }))
-              }
-              className="w-full rounded border bg-background px-2 py-1.5 text-xs"
-              placeholder="例如 ~/.proxycast/AGENTS.md"
-            />
-          </label>
-
-          <label className="space-y-1">
-            <span className="text-xs text-muted-foreground">
-              项目本地私有文件
+      <section className="grid gap-6 xl:grid-cols-[minmax(0,1.28fr)_minmax(340px,0.92fr)]">
+        <MemoryPanel
+          icon={Sparkles}
+          title="偏好画像"
+          description="用更清晰的问卷型结构沉淀你的身份、擅长方向与偏好解释方式。"
+          aside={
+            <span className="rounded-full border border-slate-200 bg-slate-50 px-3 py-1 text-xs font-medium text-slate-500">
+              4 个维度
             </span>
-            <input
-              type="text"
-              value={sourcesConfig.project_local_memory_path || ""}
-              onChange={(event) =>
-                setDraft((prev) => ({
-                  ...prev,
-                  sources: {
-                    ...normalizeSources(prev.sources),
-                    project_local_memory_path: event.target.value || undefined,
-                  },
-                }))
-              }
-              className="w-full rounded border bg-background px-2 py-1.5 text-xs"
-              placeholder="例如 AGENTS.local.md"
+          }
+        >
+          <div className="space-y-4">
+            <MultiSelectSection
+              title="以下哪个选项最能形容你现在的状态?"
+              subtitle="单选，用于帮助代理判断你的知识密度和上下文称呼。"
+              options={STATUS_OPTIONS}
+              value={profile.current_status ? [profile.current_status] : []}
+              onToggle={(option) => setStatus(option)}
+              multiple={false}
             />
-          </label>
 
-          <label className="space-y-1">
-            <span className="text-xs text-muted-foreground">最大导入深度</span>
-            <input
-              type="number"
-              min={1}
-              max={20}
-              value={resolveConfig.import_max_depth ?? 5}
-              onChange={(event) => {
-                const value = Number(event.target.value);
+            <div className="grid gap-4 xl:grid-cols-2">
+              <MultiSelectSection
+                title="你觉得自己有哪些方面比较擅长?"
+                subtitle="可多选，用于强化优先理解的领域。"
+                options={STRENGTH_OPTIONS}
+                value={profile.strengths || []}
+                onToggle={(option) => toggleMulti("strengths", option)}
+              />
+
+              <MultiSelectSection
+                title="我解释事情时通常更喜欢:"
+                subtitle="可多选，用于调整表达风格与组织方式。"
+                options={EXPLANATION_STYLE_OPTIONS}
+                value={profile.explanation_style || []}
+                onToggle={(option) => toggleMulti("explanation_style", option)}
+              />
+
+              <MultiSelectSection
+                title="当你遇到难题/概念时，你更倾向于:"
+                subtitle="可多选，用于决定先讲例子、难点还是拆解步骤。"
+                options={CHALLENGE_OPTIONS}
+                value={profile.challenge_preference || []}
+                onToggle={(option) => toggleMulti("challenge_preference", option)}
+                className="xl:col-span-2"
+              />
+            </div>
+          </div>
+        </MemoryPanel>
+
+        <div className="space-y-6">
+          <MemoryPanel
+            icon={Layers3}
+            title="三层记忆可用性"
+            description="持续检查统一记忆、上下文记忆与项目记忆的参与情况。"
+            aside={
+              <button
+                type="button"
+                onClick={() => loadLayerMetrics()}
+                disabled={loadingLayerMetrics}
+                className="inline-flex items-center gap-2 rounded-full border border-slate-200 bg-white px-3 py-1.5 text-xs font-medium text-slate-600 transition hover:border-slate-300 hover:text-slate-900 disabled:opacity-60"
+              >
+                <RefreshCw
+                  className={cn("h-3.5 w-3.5", loadingLayerMetrics && "animate-spin")}
+                />
+                刷新
+              </button>
+            }
+          >
+            {layerMetrics ? (
+              <div className="space-y-3">
+                <div className="rounded-[20px] border border-slate-200 bg-slate-50/70 px-4 py-3 text-sm text-slate-600">
+                  已可用 {layerMetrics.readyLayers}/{layerMetrics.totalLayers} 层
+                </div>
+                {layerMetrics.cards.map((card) => (
+                  <div
+                    key={card.key}
+                    className="rounded-[20px] border border-slate-200/80 bg-slate-50/60 p-4"
+                  >
+                    <div className="flex items-start justify-between gap-3">
+                      <div>
+                        <p className="text-sm font-semibold text-slate-900">
+                          {card.title}
+                        </p>
+                        <p className="mt-1 text-xs leading-5 text-slate-500">
+                          {card.description}
+                        </p>
+                      </div>
+                      <span
+                        className={cn(
+                          "rounded-full border px-2 py-0.5 text-[10px] font-medium",
+                          card.available
+                            ? "border-emerald-200 bg-emerald-50 text-emerald-700"
+                            : "border-slate-200 bg-slate-100 text-slate-500",
+                        )}
+                      >
+                        {card.available ? "已生效" : "待完善"}
+                      </span>
+                    </div>
+                    <div className="mt-4 text-3xl font-semibold tracking-tight text-slate-900">
+                      {card.value}
+                      <span className="ml-1 text-sm font-medium text-slate-500">
+                        {card.unit}
+                      </span>
+                    </div>
+                  </div>
+                ))}
+                <p className="text-xs leading-5 text-slate-500">
+                  第三层（项目记忆）的补全操作在「记忆」页面进行（支持一键初始化）。
+                </p>
+              </div>
+            ) : (
+              <p className="text-sm text-slate-500">正在加载三层状态...</p>
+            )}
+          </MemoryPanel>
+
+          <MemoryPanel
+            icon={FolderTree}
+            title="来源状态总览"
+            description="快速查看当前记忆解析策略和来源命中状态。"
+            aside={
+              <button
+                type="button"
+                onClick={() => loadSourceState()}
+                disabled={loadingSourceState}
+                className="inline-flex items-center gap-2 rounded-full border border-slate-200 bg-white px-3 py-1.5 text-xs font-medium text-slate-600 transition hover:border-slate-300 hover:text-slate-900 disabled:opacity-60"
+              >
+                <RefreshCw
+                  className={cn("h-3.5 w-3.5", loadingSourceState && "animate-spin")}
+                />
+                刷新来源
+              </button>
+            }
+          >
+            <div className="grid gap-3 sm:grid-cols-2">
+              <div className="rounded-[20px] border border-slate-200/80 bg-slate-50/70 px-4 py-4">
+                <p className="text-xs font-medium text-slate-500">命中来源</p>
+                <p className="mt-2 text-2xl font-semibold tracking-tight text-slate-900">
+                  {sourceHitLabel}
+                </p>
+              </div>
+              <div className="rounded-[20px] border border-slate-200/80 bg-slate-50/70 px-4 py-4">
+                <p className="text-xs font-medium text-slate-500">@import 策略</p>
+                <p className="mt-2 text-lg font-semibold tracking-tight text-slate-900">
+                  {resolveConfig.follow_imports ? "跟随导入" : "关闭导入"}
+                </p>
+              </div>
+              <div className="rounded-[20px] border border-slate-200/80 bg-slate-50/70 px-4 py-4">
+                <p className="text-xs font-medium text-slate-500">最大导入深度</p>
+                <p className="mt-2 text-2xl font-semibold tracking-tight text-slate-900">
+                  {resolveConfig.import_max_depth ?? 5}
+                </p>
+              </div>
+              <div className="rounded-[20px] border border-slate-200/80 bg-slate-50/70 px-4 py-4">
+                <p className="text-xs font-medium text-slate-500">额外目录记忆</p>
+                <p className="mt-2 text-lg font-semibold tracking-tight text-slate-900">
+                  {resolveConfig.load_additional_dirs_memory ? "已加载" : "未加载"}
+                </p>
+              </div>
+            </div>
+
+            <div className="mt-4 rounded-[20px] border border-slate-200/80 bg-slate-50/70 px-4 py-4">
+              <div className="flex items-center gap-2 text-xs font-medium text-slate-500">
+                <Files className="h-3.5 w-3.5 text-slate-400" />
+                当前工作目录
+              </div>
+              <p className="mt-2 break-all text-sm leading-6 text-slate-700">
+                {effectiveSources?.working_dir || "未返回工作目录"}
+              </p>
+            </div>
+          </MemoryPanel>
+        </div>
+      </section>
+
+      <MemoryPanel
+        icon={Database}
+        title="记忆来源策略"
+        description="统一管理组织策略、项目规则目录和额外仓库记忆加载规则。"
+      >
+        <div className="space-y-4">
+          <div className="grid gap-4 xl:grid-cols-2">
+            <div className="rounded-[22px] border border-slate-200/80 bg-slate-50/60 p-4">
+              <p className="text-sm font-semibold text-slate-900">基础路径</p>
+              <div className="mt-4 grid gap-4 md:grid-cols-2">
+                <label className="space-y-2">
+                  <span className="text-xs font-medium text-slate-500">
+                    组织策略文件
+                  </span>
+                  <input
+                    type="text"
+                    value={sourcesConfig.managed_policy_path || ""}
+                    onChange={(event) =>
+                      setDraft((prev) => ({
+                        ...prev,
+                        sources: {
+                          ...normalizeSources(prev.sources),
+                          managed_policy_path: event.target.value || undefined,
+                        },
+                      }))
+                    }
+                    className={INPUT_CLASS_NAME}
+                    placeholder="例如 /Library/Application Support/ProxyCast/AGENTS.md"
+                  />
+                </label>
+
+                <label className="space-y-2">
+                  <span className="text-xs font-medium text-slate-500">
+                    用户记忆文件
+                  </span>
+                  <input
+                    type="text"
+                    value={sourcesConfig.user_memory_path || ""}
+                    onChange={(event) =>
+                      setDraft((prev) => ({
+                        ...prev,
+                        sources: {
+                          ...normalizeSources(prev.sources),
+                          user_memory_path: event.target.value || undefined,
+                        },
+                      }))
+                    }
+                    className={INPUT_CLASS_NAME}
+                    placeholder="例如 ~/.proxycast/AGENTS.md"
+                  />
+                </label>
+
+                <label className="space-y-2 md:col-span-2">
+                  <span className="text-xs font-medium text-slate-500">
+                    项目本地私有文件
+                  </span>
+                  <input
+                    type="text"
+                    value={sourcesConfig.project_local_memory_path || ""}
+                    onChange={(event) =>
+                      setDraft((prev) => ({
+                        ...prev,
+                        sources: {
+                          ...normalizeSources(prev.sources),
+                          project_local_memory_path:
+                            event.target.value || undefined,
+                        },
+                      }))
+                    }
+                    className={INPUT_CLASS_NAME}
+                    placeholder="例如 AGENTS.local.md"
+                  />
+                </label>
+              </div>
+            </div>
+
+            <div className="rounded-[22px] border border-slate-200/80 bg-slate-50/60 p-4">
+              <p className="text-sm font-semibold text-slate-900">解析规则</p>
+              <div className="mt-4 grid gap-4 md:grid-cols-2">
+                <label className="space-y-2">
+                  <span className="text-xs font-medium text-slate-500">
+                    最大导入深度
+                  </span>
+                  <input
+                    type="number"
+                    min={1}
+                    max={20}
+                    value={resolveConfig.import_max_depth ?? 5}
+                    onChange={(event) => {
+                      const value = Number(event.target.value);
+                      setDraft((prev) => ({
+                        ...prev,
+                        resolve: {
+                          ...normalizeResolve(prev.resolve),
+                          import_max_depth: Number.isFinite(value)
+                            ? Math.max(1, Math.min(20, value))
+                            : 5,
+                        },
+                      }));
+                    }}
+                    className={INPUT_CLASS_NAME}
+                  />
+                </label>
+
+                <label className="space-y-2">
+                  <span className="text-xs font-medium text-slate-500">
+                    额外目录数量
+                  </span>
+                  <div className="rounded-[16px] border border-slate-200 bg-white px-3.5 py-2.5 text-sm text-slate-700">
+                    {(resolveConfig.additional_dirs || []).length}
+                  </div>
+                </label>
+              </div>
+
+              <div className="mt-4 grid gap-3 md:grid-cols-2">
+                <label className={TOGGLE_ROW_CLASS_NAME}>
+                  <span>跟随 @import</span>
+                  <Switch
+                    aria-label="跟随 @import"
+                    checked={resolveConfig.follow_imports ?? true}
+                    onCheckedChange={(checked) =>
+                      setDraft((prev) => ({
+                        ...prev,
+                        resolve: {
+                          ...normalizeResolve(prev.resolve),
+                          follow_imports: checked,
+                        },
+                      }))
+                    }
+                  />
+                </label>
+
+                <label className={TOGGLE_ROW_CLASS_NAME}>
+                  <span>加载额外目录记忆</span>
+                  <Switch
+                    aria-label="加载额外目录记忆"
+                    checked={resolveConfig.load_additional_dirs_memory ?? false}
+                    onCheckedChange={(checked) =>
+                      setDraft((prev) => ({
+                        ...prev,
+                        resolve: {
+                          ...normalizeResolve(prev.resolve),
+                          load_additional_dirs_memory: checked,
+                        },
+                      }))
+                    }
+                  />
+                </label>
+              </div>
+            </div>
+          </div>
+
+          <div className="grid gap-4 xl:grid-cols-2">
+            <label className="space-y-2 rounded-[22px] border border-slate-200/80 bg-slate-50/60 p-4">
+              <span className="text-sm font-semibold text-slate-900">
+                项目记忆文件
+              </span>
+              <span className="text-xs leading-5 text-slate-500">
+                每行一个相对路径，例如 `AGENTS.md`。
+              </span>
+              <textarea
+                value={(sourcesConfig.project_memory_paths || []).join("\n")}
+                onChange={(event) =>
+                  setDraft((prev) => ({
+                    ...prev,
+                    sources: {
+                      ...normalizeSources(prev.sources),
+                      project_memory_paths: parseLines(event.target.value),
+                    },
+                  }))
+                }
+                className={TEXTAREA_CLASS_NAME}
+              />
+            </label>
+
+            <label className="space-y-2 rounded-[22px] border border-slate-200/80 bg-slate-50/60 p-4">
+              <span className="text-sm font-semibold text-slate-900">
+                项目规则目录
+              </span>
+              <span className="text-xs leading-5 text-slate-500">
+                每行一个相对路径，用于定义仓库级规则目录。
+              </span>
+              <textarea
+                value={(sourcesConfig.project_rule_dirs || []).join("\n")}
+                onChange={(event) =>
+                  setDraft((prev) => ({
+                    ...prev,
+                    sources: {
+                      ...normalizeSources(prev.sources),
+                      project_rule_dirs: parseLines(event.target.value),
+                    },
+                  }))
+                }
+                className={TEXTAREA_CLASS_NAME}
+              />
+            </label>
+          </div>
+
+          <label className="space-y-2 rounded-[22px] border border-slate-200/80 bg-slate-50/60 p-4">
+            <span className="text-sm font-semibold text-slate-900">
+              额外目录
+            </span>
+            <span className="text-xs leading-5 text-slate-500">
+              每行一个绝对路径，可添加 `aster-rust` 等外部仓库参与记忆解析。
+            </span>
+            <textarea
+              value={(resolveConfig.additional_dirs || []).join("\n")}
+              onChange={(event) =>
                 setDraft((prev) => ({
                   ...prev,
                   resolve: {
                     ...normalizeResolve(prev.resolve),
-                    import_max_depth: Number.isFinite(value)
-                      ? Math.max(1, Math.min(20, value))
-                      : 5,
+                    additional_dirs: parseLines(event.target.value),
                   },
-                }));
-              }}
-              className="w-full rounded border bg-background px-2 py-1.5 text-xs"
+                }))
+              }
+              className={TEXTAREA_CLASS_NAME}
+              placeholder="例如 /Users/coso/Documents/dev/ai/astercloud/aster-rust"
             />
           </label>
         </div>
+      </MemoryPanel>
 
-        <label className="space-y-1 block">
-          <span className="text-xs text-muted-foreground">
-            项目记忆文件（每行一个相对路径）
-          </span>
-          <textarea
-            value={(sourcesConfig.project_memory_paths || []).join("\n")}
-            onChange={(event) =>
-              setDraft((prev) => ({
-                ...prev,
-                sources: {
-                  ...normalizeSources(prev.sources),
-                  project_memory_paths: parseLines(event.target.value),
-                },
-              }))
-            }
-            className="w-full rounded border bg-background px-2 py-1.5 text-xs min-h-20"
-          />
-        </label>
-
-        <label className="space-y-1 block">
-          <span className="text-xs text-muted-foreground">
-            项目规则目录（每行一个相对路径）
-          </span>
-          <textarea
-            value={(sourcesConfig.project_rule_dirs || []).join("\n")}
-            onChange={(event) =>
-              setDraft((prev) => ({
-                ...prev,
-                sources: {
-                  ...normalizeSources(prev.sources),
-                  project_rule_dirs: parseLines(event.target.value),
-                },
-              }))
-            }
-            className="w-full rounded border bg-background px-2 py-1.5 text-xs min-h-16"
-          />
-        </label>
-
-        <label className="space-y-1 block">
-          <span className="text-xs text-muted-foreground">
-            额外目录（每行一个绝对路径，可添加 aster-rust 等外部仓库）
-          </span>
-          <textarea
-            value={(resolveConfig.additional_dirs || []).join("\n")}
-            onChange={(event) =>
-              setDraft((prev) => ({
-                ...prev,
-                resolve: {
-                  ...normalizeResolve(prev.resolve),
-                  additional_dirs: parseLines(event.target.value),
-                },
-              }))
-            }
-            className="w-full rounded border bg-background px-2 py-1.5 text-xs min-h-16"
-            placeholder="例如 /Users/coso/Documents/dev/ai/astercloud/aster-rust"
-          />
-        </label>
-
-        <div className="grid grid-cols-1 md:grid-cols-2 gap-3">
-          <label className="flex items-center justify-between rounded border px-3 py-2 text-xs">
-            <span>跟随 @import</span>
-            <input
-              type="checkbox"
-              checked={resolveConfig.follow_imports ?? true}
-              onChange={(event) =>
-                setDraft((prev) => ({
-                  ...prev,
-                  resolve: {
-                    ...normalizeResolve(prev.resolve),
-                    follow_imports: event.target.checked,
-                  },
-                }))
-              }
-              className="h-4 w-4 rounded border-gray-300"
-            />
-          </label>
-
-          <label className="flex items-center justify-between rounded border px-3 py-2 text-xs">
-            <span>加载额外目录记忆</span>
-            <input
-              type="checkbox"
-              checked={resolveConfig.load_additional_dirs_memory ?? false}
-              onChange={(event) =>
-                setDraft((prev) => ({
-                  ...prev,
-                  resolve: {
-                    ...normalizeResolve(prev.resolve),
-                    load_additional_dirs_memory: event.target.checked,
-                  },
-                }))
-              }
-              className="h-4 w-4 rounded border-gray-300"
-            />
-          </label>
-        </div>
-      </div>
-
-      <div className="rounded-lg border p-4 space-y-4">
-        <div className="flex items-center justify-between gap-2">
-          <h3 className="text-sm font-medium">自动记忆（Auto Memory）</h3>
+      <MemoryPanel
+        icon={Database}
+        title="自动记忆（Auto Memory）"
+        description="管理自动记忆入口、写入内容和当前索引预览。"
+        aside={
           <button
             type="button"
             onClick={handleToggleAutoImmediately}
-            className="rounded border px-2 py-1 text-[11px] hover:bg-muted"
+            className="rounded-full border border-slate-200 bg-white px-3 py-1.5 text-xs font-medium text-slate-600 transition hover:border-slate-300 hover:text-slate-900"
           >
             {autoConfig.enabled ? "立即关闭" : "立即开启"}
           </button>
-        </div>
+        }
+      >
+        <div className="space-y-4">
+          <div className="grid gap-4 xl:grid-cols-3">
+            <label className="space-y-2 rounded-[22px] border border-slate-200/80 bg-slate-50/60 p-4">
+              <span className="text-sm font-semibold text-slate-900">入口文件</span>
+              <input
+                type="text"
+                value={autoConfig.entrypoint || "MEMORY.md"}
+                onChange={(event) =>
+                  setDraft((prev) => ({
+                    ...prev,
+                    auto: {
+                      ...normalizeAuto(prev.auto),
+                      entrypoint: event.target.value,
+                    },
+                  }))
+                }
+                className={INPUT_CLASS_NAME}
+              />
+            </label>
 
-        <div className="grid grid-cols-1 md:grid-cols-3 gap-3">
-          <label className="space-y-1">
-            <span className="text-xs text-muted-foreground">入口文件</span>
-            <input
-              type="text"
-              value={autoConfig.entrypoint || "MEMORY.md"}
-              onChange={(event) =>
-                setDraft((prev) => ({
-                  ...prev,
-                  auto: {
-                    ...normalizeAuto(prev.auto),
-                    entrypoint: event.target.value,
-                  },
-                }))
-              }
-              className="w-full rounded border bg-background px-2 py-1.5 text-xs"
-            />
-          </label>
+            <label className="space-y-2 rounded-[22px] border border-slate-200/80 bg-slate-50/60 p-4">
+              <span className="text-sm font-semibold text-slate-900">
+                加载行数上限
+              </span>
+              <input
+                type="number"
+                min={20}
+                max={1000}
+                value={autoConfig.max_loaded_lines ?? 200}
+                onChange={(event) => {
+                  const value = Number(event.target.value);
+                  setDraft((prev) => ({
+                    ...prev,
+                    auto: {
+                      ...normalizeAuto(prev.auto),
+                      max_loaded_lines: Number.isFinite(value)
+                        ? Math.max(20, Math.min(1000, value))
+                        : 200,
+                    },
+                  }));
+                }}
+                className={INPUT_CLASS_NAME}
+              />
+            </label>
 
-          <label className="space-y-1">
-            <span className="text-xs text-muted-foreground">加载行数上限</span>
-            <input
-              type="number"
-              min={20}
-              max={1000}
-              value={autoConfig.max_loaded_lines ?? 200}
-              onChange={(event) => {
-                const value = Number(event.target.value);
-                setDraft((prev) => ({
-                  ...prev,
-                  auto: {
-                    ...normalizeAuto(prev.auto),
-                    max_loaded_lines: Number.isFinite(value)
-                      ? Math.max(20, Math.min(1000, value))
-                      : 200,
-                  },
-                }));
-              }}
-              className="w-full rounded border bg-background px-2 py-1.5 text-xs"
-            />
-          </label>
-
-          <label className="space-y-1">
-            <span className="text-xs text-muted-foreground">
-              自动记忆根目录
-            </span>
-            <input
-              type="text"
-              value={autoConfig.root_dir || ""}
-              onChange={(event) =>
-                setDraft((prev) => ({
-                  ...prev,
-                  auto: {
-                    ...normalizeAuto(prev.auto),
-                    root_dir: event.target.value || undefined,
-                  },
-                }))
-              }
-              className="w-full rounded border bg-background px-2 py-1.5 text-xs"
-              placeholder="默认自动推导，可留空"
-            />
-          </label>
-        </div>
-
-        <div className="rounded border p-3 space-y-2">
-          <div className="text-xs text-muted-foreground">写入自动记忆</div>
-          <input
-            type="text"
-            value={autoTopic}
-            onChange={(event) => setAutoTopic(event.target.value)}
-            className="w-full rounded border bg-background px-2 py-1.5 text-xs"
-            placeholder="可选：topic，例如 workflow"
-          />
-          <textarea
-            value={autoNote}
-            onChange={(event) => setAutoNote(event.target.value)}
-            className="w-full rounded border bg-background px-2 py-1.5 text-xs min-h-20"
-            placeholder="输入要写入自动记忆的内容"
-          />
-          <button
-            type="button"
-            onClick={handleUpdateAutoNote}
-            disabled={savingAutoNote}
-            className="rounded bg-primary px-3 py-1.5 text-xs text-primary-foreground hover:opacity-90 disabled:opacity-60"
-          >
-            {savingAutoNote ? "写入中..." : "写入自动记忆"}
-          </button>
-        </div>
-
-        <div className="rounded border p-3 space-y-2">
-          <div className="text-xs text-muted-foreground">
-            当前索引：{autoIndex?.entry_exists ? "已存在" : "未初始化"}
-            {autoIndex ? `，${autoIndex.total_lines} 行` : ""}
+            <label className="space-y-2 rounded-[22px] border border-slate-200/80 bg-slate-50/60 p-4">
+              <span className="text-sm font-semibold text-slate-900">
+                自动记忆根目录
+              </span>
+              <input
+                type="text"
+                value={autoConfig.root_dir || ""}
+                onChange={(event) =>
+                  setDraft((prev) => ({
+                    ...prev,
+                    auto: {
+                      ...normalizeAuto(prev.auto),
+                      root_dir: event.target.value || undefined,
+                    },
+                  }))
+                }
+                className={INPUT_CLASS_NAME}
+                placeholder="默认自动推导，可留空"
+              />
+            </label>
           </div>
-          {autoIndex?.preview_lines?.length ? (
-            <pre className="text-[11px] leading-relaxed whitespace-pre-wrap break-words bg-muted/30 rounded p-2 max-h-44 overflow-auto">
-              {autoIndex.preview_lines.join("\n")}
-            </pre>
-          ) : (
-            <p className="text-xs text-muted-foreground">
-              暂无自动记忆入口内容
-            </p>
-          )}
-        </div>
-      </div>
 
-      <div className="rounded-lg border p-4 space-y-3 bg-muted/20">
-        <div className="flex items-center justify-between gap-2">
-          <h3 className="text-sm font-medium">记忆来源命中详情</h3>
-          <div className="text-xs text-muted-foreground">
+          <div className="grid gap-4 xl:grid-cols-[minmax(0,1.06fr)_minmax(360px,0.94fr)]">
+            <div className="rounded-[22px] border border-slate-200/80 bg-slate-50/60 p-4">
+              <div className="flex items-center gap-2 text-sm font-semibold text-slate-900">
+                <Database className="h-4 w-4 text-emerald-600" />
+                写入自动记忆
+              </div>
+              <div className="mt-4 space-y-3">
+                <input
+                  type="text"
+                  value={autoTopic}
+                  onChange={(event) => setAutoTopic(event.target.value)}
+                  className={INPUT_CLASS_NAME}
+                  placeholder="可选：topic，例如 workflow"
+                />
+                <textarea
+                  value={autoNote}
+                  onChange={(event) => setAutoNote(event.target.value)}
+                  className={TEXTAREA_CLASS_NAME}
+                  placeholder="输入要写入自动记忆的内容"
+                />
+                <button
+                  type="button"
+                  onClick={handleUpdateAutoNote}
+                  disabled={savingAutoNote}
+                  className="rounded-full bg-slate-900 px-4 py-2 text-sm font-medium text-white transition hover:bg-slate-800 disabled:opacity-60"
+                >
+                  {savingAutoNote ? "写入中..." : "写入自动记忆"}
+                </button>
+              </div>
+            </div>
+
+            <div className="rounded-[22px] border border-slate-200/80 bg-slate-50/60 p-4">
+              <div className="flex items-center gap-2 text-sm font-semibold text-slate-900">
+                <Files className="h-4 w-4 text-sky-600" />
+                当前索引
+              </div>
+              <div className="mt-4 rounded-[18px] border border-white/90 bg-white/88 px-4 py-3 shadow-sm">
+                <p className="text-xs leading-5 text-slate-500">
+                  {autoIndex?.entry_exists ? "已存在" : "未初始化"}
+                  {autoIndex ? ` · ${autoIndex.total_lines} 行` : ""}
+                </p>
+              </div>
+              {autoIndex?.preview_lines?.length ? (
+                <pre className="mt-4 max-h-52 overflow-auto rounded-[18px] border border-white/90 bg-white/88 p-3 text-[11px] leading-relaxed text-slate-600 whitespace-pre-wrap break-words shadow-sm">
+                  {autoIndex.preview_lines.join("\n")}
+                </pre>
+              ) : (
+                <p className="mt-4 text-sm leading-6 text-slate-500">
+                  暂无自动记忆入口内容
+                </p>
+              )}
+            </div>
+          </div>
+        </div>
+      </MemoryPanel>
+
+      <MemoryPanel
+        icon={Files}
+        title="记忆来源命中详情"
+        description="逐项查看来源是否命中、是否已加载，以及实际预览内容。"
+        aside={
+          <span className="rounded-full border border-slate-200 bg-slate-50 px-3 py-1 text-xs font-medium text-slate-500">
             {effectiveSources
               ? `命中 ${effectiveSources.loaded_sources}/${effectiveSources.total_sources}`
               : "--"}
-          </div>
-        </div>
-
+          </span>
+        }
+      >
         {effectiveSources ? (
-          <div className="space-y-2">
-            {effectiveSources.sources.map((source) => (
-              <div
-                key={`${source.kind}-${source.path}`}
-                className="rounded border bg-background/60 px-3 py-2"
-              >
-                <div className="flex items-center justify-between gap-2">
-                  <span className="text-xs font-medium">{source.kind}</span>
-                  <span
-                    className={cn(
-                      "rounded-full border px-2 py-0.5 text-[10px]",
-                      source.loaded
-                        ? "text-green-700 border-green-200 bg-green-50"
-                        : "text-muted-foreground border-muted",
-                    )}
-                  >
-                    {source.loaded
-                      ? "已加载"
-                      : source.exists
-                        ? "存在未命中"
-                        : "未发现"}
-                  </span>
+          <div className="space-y-4">
+            <div className="flex flex-wrap gap-2">
+              <span className="rounded-full border border-slate-200 bg-slate-50 px-3 py-1 text-xs font-medium text-slate-500">
+                工作目录：{effectiveSources.working_dir}
+              </span>
+              <span className="rounded-full border border-slate-200 bg-slate-50 px-3 py-1 text-xs font-medium text-slate-500">
+                跟随 @import：{effectiveSources.follow_imports ? "是" : "否"}
+              </span>
+              <span className="rounded-full border border-slate-200 bg-slate-50 px-3 py-1 text-xs font-medium text-slate-500">
+                导入深度：{effectiveSources.import_max_depth}
+              </span>
+            </div>
+
+            <div className="grid gap-3 xl:grid-cols-2">
+              {effectiveSources.sources.map((source) => (
+                <div
+                  key={`${source.kind}-${source.path}`}
+                  className="rounded-[20px] border border-slate-200/80 bg-slate-50/60 p-4"
+                >
+                  <div className="flex items-center justify-between gap-3">
+                    <span className="text-sm font-semibold text-slate-900">
+                      {source.kind}
+                    </span>
+                    <SourceStatusPill
+                      loaded={source.loaded}
+                      exists={source.exists}
+                    />
+                  </div>
+                  <p className="mt-2 break-all text-xs leading-5 text-slate-500">
+                    {source.path}
+                  </p>
+                  {source.preview ? (
+                    <p className="mt-3 text-sm leading-6 text-slate-600 line-clamp-3">
+                      {source.preview}
+                    </p>
+                  ) : null}
+                  {source.warnings?.length > 0 ? (
+                    <p className="mt-3 text-xs leading-5 text-amber-600">
+                      {source.warnings.join("；")}
+                    </p>
+                  ) : null}
                 </div>
-                <p className="mt-1 text-[11px] text-muted-foreground break-all">
-                  {source.path}
-                </p>
-                {source.preview && (
-                  <p className="mt-1 text-[11px] leading-relaxed text-muted-foreground line-clamp-2">
-                    {source.preview}
-                  </p>
-                )}
-                {source.warnings?.length > 0 && (
-                  <p className="mt-1 text-[11px] text-amber-600">
-                    {source.warnings.join("；")}
-                  </p>
-                )}
-              </div>
-            ))}
+              ))}
+            </div>
           </div>
         ) : (
-          <p className="text-xs text-muted-foreground">
-            正在加载来源命中结果...
-          </p>
+          <p className="text-sm text-slate-500">正在加载来源命中结果...</p>
         )}
-      </div>
-
-      {message && (
-        <div className="rounded-md border bg-muted/30 px-3 py-2 text-xs text-muted-foreground">
-          {message}
-        </div>
-      )}
+      </MemoryPanel>
     </div>
   );
 }
diff --git a/src/components/settings-v2/hooks/useSettingsCategory.ts b/src/components/settings-v2/hooks/useSettingsCategory.ts
index b5533a871..eeb36e13b 100644
--- a/src/components/settings-v2/hooks/useSettingsCategory.ts
+++ b/src/components/settings-v2/hooks/useSettingsCategory.ts
@@ -12,7 +12,6 @@ import {
   User,
   BarChart3,
   Palette,
-  MessageSquare,
   Keyboard,
   Brain,
   Bot,
@@ -106,11 +105,6 @@ export function useSettingsCategory(): CategoryGroup[] {
           label: t("settings.tab.appearance", "外观"),
           icon: Palette,
         },
-        {
-          key: SettingsTabs.ChatAppearance,
-          label: t("settings.tab.chatAppearance", "聊天外观"),
-          icon: MessageSquare,
-        },
         {
           key: SettingsTabs.Hotkeys,
           label: t("settings.tab.hotkeys", "快捷键"),
diff --git a/src/components/settings-v2/system/channels/index.test.tsx b/src/components/settings-v2/system/channels/index.test.tsx
new file mode 100644
index 000000000..6ddbcb55e
--- /dev/null
+++ b/src/components/settings-v2/system/channels/index.test.tsx
@@ -0,0 +1,210 @@
+import { act } from "react";
+import { createRoot, type Root } from "react-dom/client";
+import { afterEach, beforeEach, describe, expect, it, vi } from "vitest";
+
+const { mockGetConfig, mockSaveConfig } = vi.hoisted(() => ({
+  mockGetConfig: vi.fn(),
+  mockSaveConfig: vi.fn(),
+}));
+
+const { mockUseConfiguredProviders } = vi.hoisted(() => ({
+  mockUseConfiguredProviders: vi.fn(),
+}));
+
+vi.mock("@/lib/api/appConfig", () => ({
+  getConfig: mockGetConfig,
+  saveConfig: mockSaveConfig,
+}));
+
+vi.mock("@/hooks/useConfiguredProviders", () => ({
+  useConfiguredProviders: mockUseConfiguredProviders,
+}));
+
+vi.mock("./ChannelLogTailPanel", () => ({
+  ChannelLogTailPanel: () => <div>日志面板占位</div>,
+}));
+
+import { ChannelsSettings } from ".";
+
+interface Mounted {
+  container: HTMLDivElement;
+  root: Root;
+}
+
+const mounted: Mounted[] = [];
+
+function renderComponent(): HTMLDivElement {
+  const container = document.createElement("div");
+  document.body.appendChild(container);
+  const root = createRoot(container);
+
+  act(() => {
+    root.render(<ChannelsSettings />);
+  });
+
+  mounted.push({ container, root });
+  return container;
+}
+
+async function flushEffects() {
+  await act(async () => {
+    await Promise.resolve();
+  });
+}
+
+async function waitForLoad() {
+  await flushEffects();
+  await flushEffects();
+}
+
+function findButton(container: HTMLElement, text: string): HTMLButtonElement {
+  const button = Array.from(container.querySelectorAll("button")).find((item) =>
+    item.textContent?.includes(text),
+  );
+  if (!button) {
+    throw new Error(`未找到按钮: ${text}`);
+  }
+  return button as HTMLButtonElement;
+}
+
+async function clickButton(button: HTMLButtonElement) {
+  await act(async () => {
+    button.dispatchEvent(new MouseEvent("click", { bubbles: true }));
+    await flushEffects();
+  });
+}
+
+beforeEach(() => {
+  (
+    globalThis as typeof globalThis & {
+      IS_REACT_ACT_ENVIRONMENT?: boolean;
+    }
+  ).IS_REACT_ACT_ENVIRONMENT = true;
+
+  vi.clearAllMocks();
+
+  mockUseConfiguredProviders.mockReturnValue({
+    providers: [],
+    loading: false,
+  });
+
+  mockGetConfig.mockResolvedValue({
+    channels: {
+      telegram: {
+        enabled: false,
+        bot_token: "123456:telegram-token",
+        allowed_user_ids: ["10001"],
+        default_model: "openai/gpt-4.1",
+      },
+      discord: {
+        enabled: true,
+        bot_token: "discord-token",
+        allowed_server_ids: ["guild-1"],
+        default_model: "claude/claude-sonnet-4",
+        default_account: "default",
+        accounts: {},
+        dm_policy: "pairing",
+        allow_from: [],
+        group_policy: "allowlist",
+        group_allow_from: [],
+        streaming: "partial",
+        reply_to_mode: "off",
+      },
+      feishu: {
+        enabled: false,
+        app_id: "cli_test",
+        app_secret: "secret",
+        default_model: undefined,
+        dm_policy: "open",
+        allow_from: ["*"],
+        group_policy: "allowlist",
+        group_allow_from: [],
+      },
+    },
+    gateway: {
+      tunnel: {
+        enabled: false,
+        provider: "cloudflare",
+        mode: "managed",
+        local_host: "127.0.0.1",
+        local_port: 3000,
+        cloudflare: {
+          tunnel_name: "proxycast",
+          dns_name: "bot.example.com",
+        },
+      },
+    },
+  });
+
+  mockSaveConfig.mockResolvedValue(undefined);
+});
+
+afterEach(() => {
+  while (mounted.length > 0) {
+    const target = mounted.pop();
+    if (!target) {
+      break;
+    }
+
+    act(() => {
+      target.root.unmount();
+    });
+    target.container.remove();
+  }
+
+  vi.clearAllMocks();
+});
+
+describe("ChannelsSettings", () => {
+  it("应渲染新的渠道控制总览和工作区切换", async () => {
+    const container = renderComponent();
+    await waitForLoad();
+
+    const text = container.textContent ?? "";
+    expect(text).toContain("CHANNEL CONTROL");
+    expect(text).toContain("工作区切换");
+    expect(text).toContain("渠道总览");
+    expect(text).toContain("推荐顺序");
+    expect(text).toContain("Telegram");
+    expect(text).toContain("Discord");
+    expect(text).toContain("飞书");
+  });
+
+  it("在渠道配置页修改 Telegram 开关后应支持保存", async () => {
+    const container = renderComponent();
+    await waitForLoad();
+
+    await clickButton(findButton(container, "渠道配置"));
+    expect(container.textContent).toContain("Telegram 配置说明");
+
+    const switches = Array.from(
+      container.querySelectorAll<HTMLButtonElement>('button[role="switch"]'),
+    );
+    if (switches.length === 0) {
+      throw new Error("未找到渠道开关");
+    }
+
+    await clickButton(switches[0]);
+
+    expect(container.textContent).toContain("未保存的更改");
+
+    await clickButton(findButton(container, "保存"));
+
+    expect(mockSaveConfig).toHaveBeenCalledTimes(1);
+    expect(mockSaveConfig).toHaveBeenCalledWith(
+      expect.objectContaining({
+        channels: expect.objectContaining({
+          telegram: expect.objectContaining({
+            enabled: true,
+          }),
+        }),
+        gateway: expect.objectContaining({
+          tunnel: expect.objectContaining({
+            local_host: "127.0.0.1",
+            local_port: 3000,
+          }),
+        }),
+      }),
+    );
+  });
+});
diff --git a/src/components/settings-v2/system/channels/index.tsx b/src/components/settings-v2/system/channels/index.tsx
index 0d9b58311..48d7d5576 100644
--- a/src/components/settings-v2/system/channels/index.tsx
+++ b/src/components/settings-v2/system/channels/index.tsx
@@ -4,7 +4,13 @@
  * Telegram / Discord / 飞书 三个 Bot 渠道的内联表单配置
  */
 
-import React, { useState, useEffect, useCallback, useMemo } from "react";
+import React, {
+  useState,
+  useEffect,
+  useCallback,
+  useMemo,
+  type ReactNode,
+} from "react";
 import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs";
 import {
   Eye,
@@ -19,6 +25,7 @@ import {
   SlidersHorizontal,
   Network,
   ScrollText,
+  type LucideIcon,
 } from "lucide-react";
 import { getConfig, saveConfig, type Config } from "@/lib/api/appConfig";
 import {
@@ -49,6 +56,7 @@ import {
   getProviderModelCompatibilityIssue,
 } from "@/components/agent/chat/utils/providerModelCompatibility";
 import { ChannelLogTailPanel } from "./ChannelLogTailPanel";
+import { cn } from "@/lib/utils";
 
 // ============================================================================
 // 默认值
@@ -102,6 +110,98 @@ type TabKey = "telegram" | "discord" | "feishu";
 type ChannelSubPage = "overview" | "config" | "gateway" | "logs";
 type DebugTabKey = "telegram" | "feishu" | "discord";
 
+const INPUT_CLASS_NAME =
+  "w-full rounded-[16px] border border-slate-200 bg-white px-3.5 py-2.5 text-sm text-slate-700 outline-none transition placeholder:text-slate-400 focus:border-slate-300 focus:ring-2 focus:ring-slate-200";
+const MONO_INPUT_CLASS_NAME = `${INPUT_CLASS_NAME} font-mono`;
+const PANEL_CLASS_NAME =
+  "space-y-4 rounded-[26px] border border-slate-200/80 bg-white p-5 shadow-sm shadow-slate-950/5";
+const SOFT_CARD_CLASS_NAME =
+  "rounded-[22px] border border-slate-200/80 bg-slate-50/60 p-4";
+const SECTION_TABS_CLASS_NAME =
+  "grid w-full max-w-md grid-cols-3 rounded-[18px] border border-slate-200 bg-slate-50 p-1";
+const SECTION_TAB_TRIGGER_CLASS_NAME =
+  "rounded-[14px] px-3 py-2 text-sm font-medium text-slate-600 transition data-[state=active]:bg-white data-[state=active]:text-slate-900 data-[state=active]:shadow-sm";
+
+interface SurfacePanelProps {
+  icon: LucideIcon;
+  title: string;
+  description: string;
+  aside?: ReactNode;
+  children: ReactNode;
+  className?: string;
+}
+
+interface SummaryStatProps {
+  label: string;
+  value: string;
+  description: string;
+}
+
+function SurfacePanel({
+  icon: Icon,
+  title,
+  description,
+  aside,
+  children,
+  className,
+}: SurfacePanelProps) {
+  return (
+    <article
+      className={cn(
+        "rounded-[26px] border border-slate-200/80 bg-white p-5 shadow-sm shadow-slate-950/5",
+        className,
+      )}
+    >
+      <div className="flex flex-col gap-4 sm:flex-row sm:items-start sm:justify-between">
+        <div className="space-y-1">
+          <div className="flex items-center gap-2 text-sm font-semibold text-slate-900">
+            <Icon className="h-4 w-4 text-sky-600" />
+            {title}
+          </div>
+          <p className="text-sm leading-6 text-slate-500">{description}</p>
+        </div>
+        {aside ? (
+          <div className="flex flex-wrap items-center gap-2">{aside}</div>
+        ) : null}
+      </div>
+
+      <div className="mt-5">{children}</div>
+    </article>
+  );
+}
+
+function SummaryStat({ label, value, description }: SummaryStatProps) {
+  return (
+    <div className="rounded-[22px] border border-white/90 bg-white/88 p-4 shadow-sm">
+      <p className="text-xs font-medium tracking-[0.12em] text-slate-500">
+        {label}
+      </p>
+      <p className="mt-3 text-3xl font-semibold tracking-tight text-slate-900">
+        {value}
+      </p>
+      <p className="mt-2 text-xs leading-5 text-slate-500">{description}</p>
+    </div>
+  );
+}
+
+function LoadingSkeleton() {
+  return (
+    <div className="space-y-6 pb-8">
+      <div className="h-[228px] animate-pulse rounded-[30px] border border-slate-200/80 bg-[linear-gradient(135deg,rgba(244,251,248,0.98)_0%,rgba(248,250,252,0.98)_45%,rgba(241,246,255,0.96)_100%)]" />
+      <div className="grid gap-6 xl:grid-cols-[minmax(0,1.16fr)_minmax(320px,0.84fr)]">
+        <div className="space-y-6">
+          <div className="h-[320px] animate-pulse rounded-[26px] border border-slate-200/80 bg-white" />
+          <div className="h-[420px] animate-pulse rounded-[26px] border border-slate-200/80 bg-white" />
+        </div>
+        <div className="space-y-6">
+          <div className="h-[240px] animate-pulse rounded-[26px] border border-slate-200/80 bg-white" />
+          <div className="h-[240px] animate-pulse rounded-[26px] border border-slate-200/80 bg-white" />
+        </div>
+      </div>
+    </div>
+  );
+}
+
 // ============================================================================
 // 模型选择器子组件
 // ============================================================================
@@ -136,11 +236,13 @@ function DefaultModelSelect({
 
   return (
     <div>
-      <label className="block text-sm font-medium mb-1.5">默认模型</label>
+      <label className="mb-1.5 block text-sm font-medium text-slate-900">
+        默认模型
+      </label>
       <select
         value={value || ""}
         onChange={(e) => onChange(e.target.value || undefined)}
-        className="w-full px-3 py-2 rounded-lg border bg-background text-sm focus:ring-2 focus:ring-primary/20 focus:border-primary outline-none"
+        className={INPUT_CLASS_NAME}
       >
         <option value="">未指定（使用全局默认）</option>
         {providersLoading && <option disabled>加载中...</option>}
@@ -162,7 +264,7 @@ function DefaultModelSelect({
           );
         })}
       </select>
-      <p className="text-xs text-muted-foreground mt-1">
+      <p className="mt-1 text-xs leading-5 text-slate-500">
         为此渠道指定默认使用的 AI 模型
       </p>
     </div>
@@ -189,24 +291,26 @@ function PasswordInput({
   const [show, setShow] = useState(false);
   return (
     <div>
-      <label className="block text-sm font-medium mb-1.5">{label}</label>
+      <label className="mb-1.5 block text-sm font-medium text-slate-900">
+        {label}
+      </label>
       <div className="relative">
         <input
           type={show ? "text" : "password"}
           value={value}
           onChange={(e) => onChange(e.target.value)}
           placeholder={placeholder}
-          className="w-full px-3 py-2 pr-10 rounded-lg border bg-background text-sm font-mono focus:ring-2 focus:ring-primary/20 focus:border-primary outline-none"
+          className={`${MONO_INPUT_CLASS_NAME} pr-10`}
         />
         <button
           type="button"
           onClick={() => setShow(!show)}
-          className="absolute right-2 top-1/2 -translate-y-1/2 p-1.5 rounded hover:bg-muted"
+          className="absolute right-2 top-1/2 -translate-y-1/2 rounded-full p-1.5 text-slate-500 transition hover:bg-slate-100 hover:text-slate-900"
         >
           {show ? <EyeOff className="h-4 w-4" /> : <Eye className="h-4 w-4" />}
         </button>
       </div>
-      {hint && <p className="text-xs text-muted-foreground mt-1">{hint}</p>}
+      {hint ? <p className="mt-1 text-xs leading-5 text-slate-500">{hint}</p> : null}
     </div>
   );
 }
@@ -240,7 +344,9 @@ function StringListInput({
 
   return (
     <div>
-      <label className="block text-sm font-medium mb-1.5">{label}</label>
+      <label className="mb-1.5 block text-sm font-medium text-slate-900">
+        {label}
+      </label>
       <div className="flex gap-2">
         <input
           type="text"
@@ -250,12 +356,12 @@ function StringListInput({
             e.key === "Enter" && (e.preventDefault(), addItem())
           }
           placeholder={placeholder}
-          className="flex-1 px-3 py-2 rounded-lg border bg-background text-sm focus:ring-2 focus:ring-primary/20 focus:border-primary outline-none"
+          className={`flex-1 ${INPUT_CLASS_NAME}`}
         />
         <button
           type="button"
           onClick={addItem}
-          className="px-3 py-2 rounded-lg border hover:bg-muted text-sm"
+          className="rounded-[16px] border border-slate-200 bg-white px-3 py-2 text-sm text-slate-600 transition hover:border-slate-300 hover:bg-slate-50 hover:text-slate-900"
         >
           <Plus className="h-4 w-4" />
         </button>
@@ -265,13 +371,13 @@ function StringListInput({
           {values.map((v) => (
             <span
               key={v}
-              className="inline-flex items-center gap-1 px-2 py-0.5 rounded-md bg-muted text-sm"
+              className="inline-flex items-center gap-1 rounded-full border border-slate-200 bg-white px-2.5 py-1 text-sm text-slate-600"
             >
               {v}
               <button
                 type="button"
                 onClick={() => onChange(values.filter((x) => x !== v))}
-                className="hover:text-destructive"
+                className="rounded-full text-slate-400 transition hover:text-rose-600"
               >
                 <X className="h-3 w-3" />
               </button>
@@ -279,7 +385,7 @@ function StringListInput({
           ))}
         </div>
       )}
-      {hint && <p className="text-xs text-muted-foreground mt-1">{hint}</p>}
+      {hint ? <p className="mt-1 text-xs leading-5 text-slate-500">{hint}</p> : null}
     </div>
   );
 }
@@ -294,16 +400,21 @@ function ConfigGuideCard({
   note?: string;
 }) {
   return (
-    <div className="rounded-lg border bg-muted/20 p-4">
-      <h3 className="text-sm font-medium">{title}</h3>
-      <div className="mt-2 space-y-1">
+    <div className={SOFT_CARD_CLASS_NAME}>
+      <h3 className="text-sm font-semibold text-slate-900">{title}</h3>
+      <div className="mt-3 space-y-2">
         {steps.map((step, index) => (
-          <p key={step} className="text-xs text-muted-foreground">
-            {index + 1}. {step}
-          </p>
+          <div key={step} className="flex gap-2 text-sm leading-6 text-slate-500">
+            <span className="mt-0.5 inline-flex h-5 w-5 shrink-0 items-center justify-center rounded-full border border-slate-200 bg-white text-[11px] font-semibold text-slate-600">
+              {index + 1}
+            </span>
+            <p>{step}</p>
+          </div>
         ))}
       </div>
-      {note && <p className="mt-2 text-xs text-muted-foreground">{note}</p>}
+      {note ? (
+        <p className="mt-3 text-xs leading-5 text-slate-500">{note}</p>
+      ) : null}
     </div>
   );
 }
@@ -374,7 +485,7 @@ function GatewayTunnelPanel({
   };
 
   return (
-    <div className="space-y-4 p-4 rounded-lg border">
+    <div className={PANEL_CLASS_NAME}>
       <div>
         <h3 className="text-sm font-medium">Gateway 公共隧道</h3>
         <p className="text-xs text-muted-foreground">
@@ -710,7 +821,7 @@ function TelegramForm({
   onChange: (c: TelegramBotConfig) => void;
 }) {
   return (
-    <div className="space-y-4 p-4 rounded-lg border">
+    <div className={PANEL_CLASS_NAME}>
       <div className="flex items-center justify-between">
         <div>
           <h3 className="text-sm font-medium">启用 Telegram Bot</h3>
@@ -819,7 +930,7 @@ function TelegramGatewayDebugPanel() {
   const busy = busyAction !== null;
 
   return (
-    <div className="space-y-4 p-4 rounded-lg border">
+    <div className={PANEL_CLASS_NAME}>
       <div>
         <h3 className="text-sm font-medium">Telegram Gateway 调试工具</h3>
         <p className="text-xs text-muted-foreground">
@@ -1025,7 +1136,7 @@ function FeishuGatewayDebugPanel() {
   const busy = busyAction !== null;
 
   return (
-    <div className="space-y-4 p-4 rounded-lg border">
+    <div className={PANEL_CLASS_NAME}>
       <div>
         <h3 className="text-sm font-medium">Feishu Gateway 调试工具</h3>
         <p className="text-xs text-muted-foreground">
@@ -1219,7 +1330,7 @@ function DiscordGatewayDebugPanel() {
   const busy = busyAction !== null;
 
   return (
-    <div className="space-y-4 p-4 rounded-lg border">
+    <div className={PANEL_CLASS_NAME}>
       <div>
         <h3 className="text-sm font-medium">Discord Gateway 调试工具</h3>
         <p className="text-xs text-muted-foreground">
@@ -1472,7 +1583,7 @@ function DiscordForm({
   const replyToMode = (config.reply_to_mode || "off").toLowerCase();
 
   return (
-    <div className="space-y-4 p-4 rounded-lg border">
+    <div className={PANEL_CLASS_NAME}>
       <div className="flex items-center justify-between">
         <div>
           <h3 className="text-sm font-medium">启用 Discord Bot</h3>
@@ -1873,7 +1984,7 @@ function FeishuForm({
   const replyToMode = (config.reply_to_mode || "off").toLowerCase();
 
   return (
-    <div className="space-y-4 p-4 rounded-lg border">
+    <div className={PANEL_CLASS_NAME}>
       <div className="flex items-center justify-between">
         <div>
           <h3 className="text-sm font-medium">启用飞书 Bot</h3>
@@ -2201,11 +2312,7 @@ export function ChannelsSettings({ className }: ChannelsSettingsProps) {
   };
 
   if (!config) {
-    return (
-      <div className="flex items-center justify-center h-64">
-        <Loader2 className="h-6 w-6 animate-spin text-muted-foreground" />
-      </div>
-    );
+    return <LoadingSkeleton />;
   }
 
   const TAB_LABELS: Record<TabKey, string> = {
@@ -2220,7 +2327,12 @@ export function ChannelsSettings({ className }: ChannelsSettingsProps) {
     logs: "日志与调试",
   };
 
-  const channelOverview = [
+  const channelOverview: Array<{
+    key: TabKey;
+    label: string;
+    enabled: boolean;
+    model: string;
+  }> = [
     {
       key: "telegram",
       label: "Telegram",
@@ -2274,27 +2386,119 @@ export function ChannelsSettings({ className }: ChannelsSettingsProps) {
   ];
 
   const enabledCount = channelOverview.filter((item) => item.enabled).length;
+  const configuredModelCount = channelOverview.filter(
+    (item) => item.model !== "跟随全局默认",
+  ).length;
+  const tunnelEnabled = gateway.tunnel?.enabled === true;
   const currentScopeLabel =
     activeSubPage === "config"
       ? `${SUB_PAGE_LABELS[activeSubPage]} / ${TAB_LABELS[activeTab]}`
       : SUB_PAGE_LABELS[activeSubPage];
 
   return (
-    <div className={`space-y-6 ${className || ""}`}>
+    <div className={cn("space-y-6 pb-8", className)}>
       {message && (
         <div
-          className={`rounded-lg border p-3 text-sm mb-4 ${
+          className={cn(
+            "flex items-center gap-2 rounded-[20px] border px-4 py-3 text-sm shadow-sm shadow-slate-950/5",
             message.type === "error"
-              ? "border-destructive bg-destructive/10 text-destructive"
-              : "border-green-500 bg-green-50 text-green-700 dark:bg-green-900/20 dark:text-green-400"
-          }`}
+              ? "border-rose-200 bg-rose-50/90 text-rose-700"
+              : "border-emerald-200 bg-emerald-50/90 text-emerald-700",
+          )}
         >
+          <AlertCircle className="h-4 w-4" />
           {message.text}
         </div>
       )}
 
-      <div className="rounded-xl border bg-background/40 p-3">
-        <div className="grid grid-cols-1 md:grid-cols-2 xl:grid-cols-4 gap-2">
+      <section className="relative overflow-hidden rounded-[30px] border border-emerald-200/70 bg-[linear-gradient(135deg,rgba(244,251,248,0.98)_0%,rgba(248,250,252,0.98)_45%,rgba(241,246,255,0.96)_100%)] shadow-sm shadow-slate-950/5">
+        <div className="pointer-events-none absolute -left-20 top-[-72px] h-56 w-56 rounded-full bg-emerald-200/30 blur-3xl" />
+        <div className="pointer-events-none absolute right-[-76px] top-[-24px] h-56 w-56 rounded-full bg-sky-200/28 blur-3xl" />
+
+        <div className="relative flex flex-col gap-6 p-6 lg:p-8">
+          <div className="grid gap-6 xl:grid-cols-[minmax(0,1.08fr)_minmax(360px,0.92fr)]">
+            <div className="max-w-3xl space-y-5">
+              <span className="inline-flex items-center rounded-full border border-emerald-200 bg-white/85 px-3 py-1 text-xs font-semibold tracking-[0.16em] text-emerald-700 shadow-sm">
+                CHANNEL CONTROL
+              </span>
+              <div className="space-y-2">
+                <p className="text-[28px] font-semibold tracking-tight text-slate-900">
+                  把渠道配置、公网入口和运行调试收拢到一个操作台里
+                </p>
+                <p className="max-w-2xl text-sm leading-7 text-slate-600">
+                  这里按“概览、配置、网关、日志”组织渠道工作流，减少在多个零散表单之间来回切换。
+                  保存逻辑保持不变，改动后仍然通过底部操作条统一提交。
+                </p>
+              </div>
+
+              <div className="flex flex-wrap items-center gap-2">
+                <span className="rounded-full border border-white/90 bg-white/88 px-3 py-1.5 text-xs font-medium text-slate-600 shadow-sm">
+                  Telegram / Discord / 飞书共用同一页治理流程
+                </span>
+                <span className="rounded-full border border-white/90 bg-white/88 px-3 py-1.5 text-xs font-medium text-slate-600 shadow-sm">
+                  先配渠道，再接公网入口，最后看日志与调试
+                </span>
+                <span className="rounded-full border border-white/90 bg-white/88 px-3 py-1.5 text-xs font-medium text-slate-600 shadow-sm">
+                  当前视图：{currentScopeLabel}
+                </span>
+              </div>
+            </div>
+
+            <div className="grid gap-3 sm:grid-cols-3 xl:grid-cols-1 xl:content-start">
+              <SummaryStat
+                label="已启用渠道"
+                value={`${enabledCount}/${channelOverview.length}`}
+                description="当前已经打开开关并参与运行的渠道数量。"
+              />
+              <SummaryStat
+                label="已设默认模型"
+                value={configuredModelCount.toString()}
+                description="已为渠道显式指定默认模型的数量。"
+              />
+              <SummaryStat
+                label="公网隧道"
+                value={tunnelEnabled ? "已启用" : "未启用"}
+                description="统一公网入口的当前状态，用于承接回调与外部请求。"
+              />
+            </div>
+          </div>
+
+          <div className="flex flex-col gap-4 rounded-[24px] border border-white/90 bg-white/80 p-4 shadow-sm lg:flex-row lg:items-center lg:justify-between">
+            <div className="space-y-2">
+              <div className="flex flex-wrap items-center gap-2">
+                <span
+                  className={cn(
+                    "rounded-full border px-3 py-1 text-xs font-medium",
+                    isDirty
+                      ? "border-amber-200 bg-amber-50 text-amber-700"
+                      : "border-emerald-200 bg-emerald-50 text-emerald-700",
+                  )}
+                >
+                  {isDirty ? "存在未保存变更" : "配置已同步"}
+                </span>
+                <span className="rounded-full border border-slate-200 bg-white px-3 py-1 text-xs font-medium text-slate-500">
+                  网关隧道 {tunnelEnabled ? "开启" : "关闭"}
+                </span>
+                <span className="rounded-full border border-slate-200 bg-white px-3 py-1 text-xs font-medium text-slate-500">
+                  当前子页 {SUB_PAGE_LABELS[activeSubPage]}
+                </span>
+              </div>
+              <p className="text-sm leading-6 text-slate-600">
+                {isDirty
+                  ? "你已经修改了当前渠道配置，底部操作条会保留“取消”和“保存”。"
+                  : "建议先在概览确认启用状态，再进入配置或网关分区做细节调整。"}
+              </p>
+            </div>
+          </div>
+        </div>
+      </section>
+
+      <SurfacePanel
+        icon={LayoutDashboard}
+        title="工作区切换"
+        description="按工作流切换当前区域，而不是在一个超长页面里滚动查找。"
+      >
+        <div className="grid gap-3 md:grid-cols-2 xl:grid-cols-4">
           {subPages.map((page) => {
             const Icon = page.icon;
             const isActive = activeSubPage === page.key;
@@ -2303,249 +2507,516 @@ export function ChannelsSettings({ className }: ChannelsSettingsProps) {
                 key={page.key}
                 type="button"
                 onClick={() => setActiveSubPage(page.key)}
-                className={`text-left rounded-lg border px-3 py-2 transition-colors ${
+                className={cn(
+                  "group rounded-[22px] border p-4 text-left transition",
                   isActive
-                    ? "border-primary bg-primary/10"
-                    : "border-transparent hover:border-border hover:bg-muted/40"
-                }`}
+                    ? "border-slate-300 bg-slate-900 text-white shadow-sm"
+                    : "border-slate-200/80 bg-slate-50/60 hover:-translate-y-0.5 hover:border-slate-300 hover:bg-white",
+                )}
               >
-                <div className="flex items-center gap-2">
-                  <Icon className="h-4 w-4 text-muted-foreground" />
-                  <span className="text-sm font-medium">{page.label}</span>
+                <div className="flex items-start justify-between gap-3">
+                  <div
+                    className={cn(
+                      "flex h-11 w-11 items-center justify-center rounded-2xl border",
+                      isActive
+                        ? "border-white/20 bg-white/10 text-white"
+                        : "border-slate-200 bg-white text-slate-700",
+                    )}
+                  >
+                    <Icon className="h-5 w-5" />
+                  </div>
+                  <span
+                    className={cn(
+                      "rounded-full border px-2.5 py-1 text-[11px] font-medium",
+                      isActive
+                        ? "border-white/15 bg-white/10 text-white"
+                        : "border-slate-200 bg-white text-slate-500",
+                    )}
+                  >
+                    {page.label}
+                  </span>
                 </div>
-                <p className="mt-1 text-xs text-muted-foreground">
+                <p
+                  className={cn(
+                    "mt-4 text-sm font-semibold",
+                    isActive ? "text-white" : "text-slate-900",
+                  )}
+                >
+                  {page.label}
+                </p>
+                <p
+                  className={cn(
+                    "mt-1 text-sm leading-6",
+                    isActive ? "text-white/80" : "text-slate-500",
+                  )}
+                >
                   {page.description}
                 </p>
               </button>
             );
           })}
         </div>
-      </div>
+      </SurfacePanel>
 
       {activeSubPage === "overview" && (
-        <div className="space-y-6">
-          <div className="rounded-xl border bg-background/40 p-4 md:p-5">
-            <div className="flex flex-wrap items-center justify-between gap-3">
-              <div>
-                <h2 className="text-base font-semibold">渠道总览</h2>
-                <p className="text-xs text-muted-foreground">
-                  已启用 {enabledCount} / {channelOverview.length} 个渠道
-                </p>
-              </div>
-              <div className="rounded-md border bg-muted/30 px-3 py-1.5 text-xs text-muted-foreground">
-                建议流程：先完成「渠道配置」，再进入「网关与隧道」与「日志与调试」验证。
-              </div>
-            </div>
-            <div className="mt-4 grid grid-cols-1 md:grid-cols-3 gap-3">
+        <div className="grid gap-6 xl:grid-cols-[minmax(0,1.16fr)_minmax(320px,0.84fr)]">
+          <SurfacePanel
+            icon={LayoutDashboard}
+            title="渠道总览"
+            description="从这里快速判断哪些渠道已经具备基本可用条件。"
+            aside={
+              <span className="rounded-full border border-slate-200 bg-slate-100 px-3 py-1 text-xs font-medium text-slate-500">
+                已启用 {enabledCount} / {channelOverview.length}
+              </span>
+            }
+          >
+            <div className="grid gap-4 md:grid-cols-2 xl:grid-cols-3">
               {channelOverview.map((item) => (
-                <div
+                <button
                   key={item.key}
-                  className="rounded-lg border bg-muted/20 p-4"
+                  type="button"
+                  onClick={() => {
+                    setActiveTab(item.key);
+                    setActiveSubPage("config");
+                  }}
+                  className="group rounded-[22px] border border-slate-200/80 bg-slate-50/60 p-4 text-left transition hover:-translate-y-0.5 hover:border-slate-300 hover:bg-white"
                 >
-                  <div className="flex items-center justify-between">
-                    <h3 className="text-sm font-medium">{item.label}</h3>
+                  <div className="flex items-center justify-between gap-3">
+                    <h3 className="text-sm font-semibold text-slate-900">
+                      {item.label}
+                    </h3>
                     <span
-                      className={`rounded px-2 py-0.5 text-xs ${
+                      className={cn(
+                        "rounded-full border px-2.5 py-1 text-[11px] font-medium",
                         item.enabled
-                          ? "bg-green-100 text-green-700 dark:bg-green-900/30 dark:text-green-300"
-                          : "bg-gray-100 text-gray-600 dark:bg-gray-800 dark:text-gray-300"
-                      }`}
+                          ? "border-emerald-200 bg-emerald-50 text-emerald-700"
+                          : "border-slate-200 bg-white text-slate-500",
+                      )}
                     >
                       {item.enabled ? "已启用" : "未启用"}
                     </span>
                   </div>
-                  <p className="mt-2 text-xs text-muted-foreground break-all">
+                  <p className="mt-3 text-sm leading-6 text-slate-500">
                     默认模型：{item.model}
                   </p>
-                </div>
+                  <p className="mt-4 text-xs font-medium text-slate-400 transition group-hover:text-slate-600">
+                    进入渠道配置
+                  </p>
+                </button>
               ))}
             </div>
+          </SurfacePanel>
+
+          <div className="space-y-6">
+            <SurfacePanel
+              icon={SlidersHorizontal}
+              title="推荐顺序"
+              description="按这个顺序做，可以减少渠道接入时的排障往返。"
+            >
+              <div className="space-y-3">
+                <div className={SOFT_CARD_CLASS_NAME}>
+                  <p className="text-sm font-semibold text-slate-900">
+                    先完成渠道基础配置
+                  </p>
+                  <p className="mt-2 text-sm leading-6 text-slate-500">
+                    填好 Token、App Secret、白名单和默认模型，确保基础参数完整。
+                  </p>
+                </div>
+                <div className={SOFT_CARD_CLASS_NAME}>
+                  <p className="text-sm font-semibold text-slate-900">
+                    再检查公网入口
+                  </p>
+                  <p className="mt-2 text-sm leading-6 text-slate-500">
+                    需要外部回调时，再进入“网关与隧道”处理 tunnel、webhook 和回调同步。
+                  </p>
+                </div>
+                <div className={SOFT_CARD_CLASS_NAME}>
+                  <p className="text-sm font-semibold text-slate-900">
+                    最后看日志与调试
+                  </p>
+                  <p className="mt-2 text-sm leading-6 text-slate-500">
+                    通过状态查询、探测账号和实时日志判断链路是否打通，而不是盲改表单字段。
+                  </p>
+                </div>
+              </div>
+            </SurfacePanel>
+
+            <SurfacePanel
+              icon={Network}
+              title="入口状态"
+              description="当前统一入口和保存状态摘要。"
+            >
+              <div className="grid gap-3">
+                <div className={SOFT_CARD_CLASS_NAME}>
+                  <div className="flex items-center justify-between gap-3">
+                    <p className="text-sm font-semibold text-slate-900">
+                      公网隧道
+                    </p>
+                    <span
+                      className={cn(
+                        "rounded-full border px-2.5 py-1 text-[11px] font-medium",
+                        tunnelEnabled
+                          ? "border-emerald-200 bg-emerald-50 text-emerald-700"
+                          : "border-slate-200 bg-white text-slate-500",
+                      )}
+                    >
+                      {tunnelEnabled ? "已启用" : "未启用"}
+                    </span>
+                  </div>
+                </div>
+                <div className={SOFT_CARD_CLASS_NAME}>
+                  <div className="flex items-center justify-between gap-3">
+                    <p className="text-sm font-semibold text-slate-900">
+                      未保存更改
+                    </p>
+                    <span
+                      className={cn(
+                        "rounded-full border px-2.5 py-1 text-[11px] font-medium",
+                        isDirty
+                          ? "border-amber-200 bg-amber-50 text-amber-700"
+                          : "border-emerald-200 bg-emerald-50 text-emerald-700",
+                      )}
+                    >
+                      {isDirty ? "待处理" : "无"}
+                    </span>
+                  </div>
+                </div>
+              </div>
+            </SurfacePanel>
           </div>
         </div>
       )}
 
       {activeSubPage === "config" && (
-        <div className="rounded-xl border bg-background/40 p-4 md:p-5">
-          <div className="mb-4">
-            <h2 className="text-base font-semibold">渠道配置</h2>
-            <p className="text-xs text-muted-foreground">
-              仅维护渠道基础参数，不包含运行调试操作。
-            </p>
-          </div>
-          <div className="mb-4">
-            <ConfigGuideCard
-              title="配置说明（通用）"
-              steps={[
-                "先开启渠道开关，再填写密钥或 Token。",
-                "建议先设置默认模型，避免走到全局默认导致行为不一致。",
-                "点底部“保存”后，再切到“日志与调试”验证链路是否通畅。",
-              ]}
-              note="敏感凭证仅用于本地配置保存，排查问题时可在“日志与调试”查看网关行为。"
-            />
-          </div>
-          <Tabs
-            value={activeTab}
-            onValueChange={(v) => setActiveTab(v as TabKey)}
-            className="w-full"
+        <div className="grid gap-6 xl:grid-cols-[minmax(0,1.15fr)_minmax(320px,0.85fr)]">
+          <SurfacePanel
+            icon={SlidersHorizontal}
+            title="渠道配置"
+            description="这里只处理基础参数，不包含运行态调试动作。"
+            aside={
+              <span className="rounded-full border border-slate-200 bg-slate-100 px-3 py-1 text-xs font-medium text-slate-500">
+                当前渠道：{TAB_LABELS[activeTab]}
+              </span>
+            }
           >
-            <TabsList className="grid w-full max-w-md grid-cols-3">
-              <TabsTrigger value="telegram">Telegram</TabsTrigger>
-              <TabsTrigger value="discord">Discord</TabsTrigger>
-              <TabsTrigger value="feishu">飞书</TabsTrigger>
-            </TabsList>
+            <div className="space-y-4">
+              <ConfigGuideCard
+                title="配置说明（通用）"
+                steps={[
+                  "先开启渠道开关，再填写密钥或 Token。",
+                  "建议先设置默认模型，避免走到全局默认导致行为不一致。",
+                  "点底部“保存”后，再切到“日志与调试”验证链路是否通畅。",
+                ]}
+                note="敏感凭证仅用于本地配置保存，排查问题时可在“日志与调试”查看网关行为。"
+              />
 
-            <TabsContent value="telegram" className="mt-5">
-              <div className="space-y-4">
-                <ConfigGuideCard
-                  title="Telegram 配置说明"
-                  steps={[
-                    "在 @BotFather 创建机器人并复制 Bot Token。",
-                    "如果要限制访问，填写允许的用户 ID 列表；留空表示不过滤。",
-                    "建议先选默认模型，再保存并到日志页筛选 TelegramGateway 检查消息链路。",
-                  ]}
-                />
-                <TelegramForm
-                  config={channels.telegram}
-                  onChange={(tg) => setChannels({ ...channels, telegram: tg })}
-                />
-              </div>
-            </TabsContent>
+              <Tabs
+                value={activeTab}
+                onValueChange={(v) => setActiveTab(v as TabKey)}
+                className="w-full"
+              >
+                <TabsList className={SECTION_TABS_CLASS_NAME}>
+                  <TabsTrigger
+                    value="telegram"
+                    className={SECTION_TAB_TRIGGER_CLASS_NAME}
+                  >
+                    Telegram
+                  </TabsTrigger>
+                  <TabsTrigger
+                    value="discord"
+                    className={SECTION_TAB_TRIGGER_CLASS_NAME}
+                  >
+                    Discord
+                  </TabsTrigger>
+                  <TabsTrigger
+                    value="feishu"
+                    className={SECTION_TAB_TRIGGER_CLASS_NAME}
+                  >
+                    飞书
+                  </TabsTrigger>
+                </TabsList>
 
-            <TabsContent value="discord" className="mt-5">
-              <div className="space-y-4">
-                <ConfigGuideCard
-                  title="Discord 配置说明"
-                  steps={[
-                    "在 Discord Developer Portal 创建应用并生成 Bot Token。",
-                    "将 Bot 邀请到目标服务器后，按需填写允许的服务器 ID。",
-                    "保存后通过日志页观察 RPC/渠道日志确认请求已进入代理链路。",
-                  ]}
-                />
-                <DiscordForm
-                  config={channels.discord}
-                  onChange={(dc) => setChannels({ ...channels, discord: dc })}
-                />
-              </div>
-            </TabsContent>
+                <TabsContent value="telegram" className="mt-5 space-y-4">
+                  <ConfigGuideCard
+                    title="Telegram 配置说明"
+                    steps={[
+                      "在 @BotFather 创建机器人并复制 Bot Token。",
+                      "如果要限制访问，填写允许的用户 ID 列表；留空表示不过滤。",
+                      "建议先选默认模型，再保存并到日志页筛选 TelegramGateway 检查消息链路。",
+                    ]}
+                  />
+                  <TelegramForm
+                    config={channels.telegram}
+                    onChange={(tg) => setChannels({ ...channels, telegram: tg })}
+                  />
+                </TabsContent>
 
-            <TabsContent value="feishu" className="mt-5">
-              <div className="space-y-4">
-                <ConfigGuideCard
-                  title="飞书配置说明"
-                  steps={[
-                    "填写 App ID / App Secret，并按需设置 Verification Token 与 Encrypt Key。",
-                    "连接模式优先使用 Webhook；Webhook Host/Port/Path 要与网关入口一致。",
-                    "保存后建议在“网关与隧道”同步回调 URL，再到日志页筛选 FeishuGateway 验证。",
-                  ]}
-                />
-                <FeishuForm
-                  config={channels.feishu}
-                  onChange={(fs) => setChannels({ ...channels, feishu: fs })}
-                />
+                <TabsContent value="discord" className="mt-5 space-y-4">
+                  <ConfigGuideCard
+                    title="Discord 配置说明"
+                    steps={[
+                      "在 Discord Developer Portal 创建应用并生成 Bot Token。",
+                      "将 Bot 邀请到目标服务器后，按需填写允许的服务器 ID。",
+                      "保存后通过日志页观察 RPC/渠道日志确认请求已进入代理链路。",
+                    ]}
+                  />
+                  <DiscordForm
+                    config={channels.discord}
+                    onChange={(dc) => setChannels({ ...channels, discord: dc })}
+                  />
+                </TabsContent>
+
+                <TabsContent value="feishu" className="mt-5 space-y-4">
+                  <ConfigGuideCard
+                    title="飞书配置说明"
+                    steps={[
+                      "填写 App ID / App Secret，并按需设置 Verification Token 与 Encrypt Key。",
+                      "连接模式优先使用 Webhook；Webhook Host/Port/Path 要与网关入口一致。",
+                      "保存后建议在“网关与隧道”同步回调 URL，再到日志页筛选 FeishuGateway 验证。",
+                    ]}
+                  />
+                  <FeishuForm
+                    config={channels.feishu}
+                    onChange={(fs) => setChannels({ ...channels, feishu: fs })}
+                  />
+                </TabsContent>
+              </Tabs>
+            </div>
+          </SurfacePanel>
+
+          <div className="space-y-6">
+            <SurfacePanel
+              icon={LayoutDashboard}
+              title="当前配置摘要"
+              description="用于确认本次准备编辑的是哪个渠道，以及哪些渠道还没配完。"
+            >
+              <div className="space-y-3">
+                {channelOverview.map((item) => (
+                  <button
+                    key={item.key}
+                    type="button"
+                    onClick={() => setActiveTab(item.key)}
+                    className={cn(
+                      "w-full rounded-[22px] border p-4 text-left transition",
+                      activeTab === item.key
+                        ? "border-slate-300 bg-slate-900 text-white"
+                        : "border-slate-200/80 bg-slate-50/60 hover:border-slate-300 hover:bg-white",
+                    )}
+                  >
+                    <div className="flex items-center justify-between gap-3">
+                      <p className="text-sm font-semibold">{item.label}</p>
+                      <span
+                        className={cn(
+                          "rounded-full border px-2.5 py-1 text-[11px] font-medium",
+                          activeTab === item.key
+                            ? "border-white/15 bg-white/10 text-white"
+                            : item.enabled
+                              ? "border-emerald-200 bg-emerald-50 text-emerald-700"
+                              : "border-slate-200 bg-white text-slate-500",
+                        )}
+                      >
+                        {item.enabled ? "已启用" : "未启用"}
+                      </span>
+                    </div>
+                    <p
+                      className={cn(
+                        "mt-2 text-sm leading-6",
+                        activeTab === item.key ? "text-white/80" : "text-slate-500",
+                      )}
+                    >
+                      默认模型：{item.model}
+                    </p>
+                  </button>
+                ))}
               </div>
-            </TabsContent>
-          </Tabs>
+            </SurfacePanel>
+
+            <SurfacePanel
+              icon={Network}
+              title="配置提示"
+              description="优先保证基础配置完整，再去处理运行态问题。"
+            >
+              <div className="space-y-3">
+                <div className={SOFT_CARD_CLASS_NAME}>
+                  <p className="text-sm font-semibold text-slate-900">
+                    默认模型不要留到最后
+                  </p>
+                  <p className="mt-2 text-sm leading-6 text-slate-500">
+                    三个渠道的默认模型建议尽早设置，避免调试时误落到全局默认。
+                  </p>
+                </div>
+                <div className={SOFT_CARD_CLASS_NAME}>
+                  <p className="text-sm font-semibold text-slate-900">
+                    凭证填写后再切网关
+                  </p>
+                  <p className="mt-2 text-sm leading-6 text-slate-500">
+                    先让 Bot 能本地正常工作，再处理公网隧道与回调同步，排障路径更短。
+                  </p>
+                </div>
+              </div>
+            </SurfacePanel>
+          </div>
         </div>
       )}
 
       {activeSubPage === "gateway" && (
-        <div className="space-y-3">
-          <div>
-            <h2 className="text-base font-semibold">网关与隧道</h2>
-            <p className="text-xs text-muted-foreground">
-              统一管理公网隧道、回调同步与连通性探测。
-            </p>
-          </div>
-          <ConfigGuideCard
-            title="网关与隧道说明"
-            steps={[
-              "先确认本地网关地址（local host/port）可访问，再配置 tunnel 参数。",
-              "Cloudflare 模式优先设置 tunnel_name 与 dns_name，再执行“创建隧道”。",
-              "隧道启动后执行“同步飞书回调 URL”，确保飞书侧回调地址一致。",
-            ]}
-            note="建议每次变更后都先“查询状态”，再到日志页观察是否有连接异常。"
-          />
-          <GatewayTunnelPanel
-            config={gateway}
-            onChange={setGateway}
-            defaultFeishuAccountId={
-              channels.feishu.default_account || "default"
+        <div className="grid gap-6 xl:grid-cols-[minmax(0,1.18fr)_minmax(320px,0.82fr)]">
+          <SurfacePanel
+            icon={Network}
+            title="网关与隧道"
+            description="统一管理公网隧道、回调同步与连通性探测。"
+            aside={
+              <span
+                className={cn(
+                  "rounded-full border px-3 py-1 text-xs font-medium",
+                  tunnelEnabled
+                    ? "border-emerald-200 bg-emerald-50 text-emerald-700"
+                    : "border-slate-200 bg-slate-100 text-slate-500",
+                )}
+              >
+                {tunnelEnabled ? "隧道已启用" : "隧道未启用"}
+              </span>
             }
-            onReloadConfig={loadConfig}
-          />
+          >
+            <div className="space-y-4">
+              <ConfigGuideCard
+                title="网关与隧道说明"
+                steps={[
+                  "先确认本地网关地址（local host/port）可访问，再配置 tunnel 参数。",
+                  "Cloudflare 模式优先设置 tunnel_name 与 dns_name，再执行“创建隧道”。",
+                  "隧道启动后执行“同步飞书回调 URL”，确保飞书侧回调地址一致。",
+                ]}
+                note="建议每次变更后都先“查询状态”，再到日志页观察是否有连接异常。"
+              />
+              <GatewayTunnelPanel
+                config={gateway}
+                onChange={setGateway}
+                defaultFeishuAccountId={
+                  channels.feishu.default_account || "default"
+                }
+                onReloadConfig={loadConfig}
+              />
+            </div>
+          </SurfacePanel>
+
+          <SurfacePanel
+            icon={LayoutDashboard}
+            title="入口摘要"
+            description="用于快速核对当前 tunnel 关键参数。"
+          >
+            <div className="space-y-3">
+              <div className={SOFT_CARD_CLASS_NAME}>
+                <p className="text-sm font-semibold text-slate-900">
+                  本地入口
+                </p>
+                <p className="mt-2 text-sm leading-6 text-slate-500">
+                  {(gateway.tunnel?.local_host || "127.0.0.1")}:
+                  {gateway.tunnel?.local_port ?? 3000}
+                </p>
+              </div>
+              <div className={SOFT_CARD_CLASS_NAME}>
+                <p className="text-sm font-semibold text-slate-900">
+                  Tunnel Provider / 模式
+                </p>
+                <p className="mt-2 text-sm leading-6 text-slate-500">
+                  {gateway.tunnel?.provider || "cloudflare"} /{" "}
+                  {gateway.tunnel?.mode || "managed"}
+                </p>
+              </div>
+              <div className={SOFT_CARD_CLASS_NAME}>
+                <p className="text-sm font-semibold text-slate-900">
+                  飞书默认账号
+                </p>
+                <p className="mt-2 text-sm leading-6 text-slate-500">
+                  {channels.feishu.default_account || "default"}
+                </p>
+              </div>
+            </div>
+          </SurfacePanel>
         </div>
       )}
 
       {activeSubPage === "logs" && (
-        <div className="grid grid-cols-1 2xl:grid-cols-2 gap-6">
-          <section className="space-y-3">
-            <div>
-              <h2 className="text-base font-semibold">渠道日志观察</h2>
-              <p className="text-xs text-muted-foreground">
-                支持实时 tail、过滤与清空，快速定位 TelegramGateway / RPC 问题。
-              </p>
+        <div className="grid gap-6 xl:grid-cols-[minmax(0,1.02fr)_minmax(0,0.98fr)]">
+          <SurfacePanel
+            icon={ScrollText}
+            title="渠道日志观察"
+            description="支持实时 tail、过滤与清空，快速定位 TelegramGateway / RPC 问题。"
+          >
+            <div className="space-y-4">
+              <ConfigGuideCard
+                title="日志排查说明"
+                steps={[
+                  "先选择过滤模式（如 TelegramGateway / RPC），缩小观察范围。",
+                  "遇到历史噪音可先“清空日志”，再复现问题获取干净样本。",
+                  "如果日志无输出，先去“运行调试”页执行状态查询确认服务已启动。",
+                ]}
+              />
+              <ChannelLogTailPanel />
             </div>
-            <ConfigGuideCard
-              title="日志排查说明"
-              steps={[
-                "先选择过滤模式（如 TelegramGateway / RPC），缩小观察范围。",
-                "遇到历史噪音可先“清空日志”，再复现问题获取干净样本。",
-                "如果日志无输出，先去“运行调试”页执行状态查询确认服务已启动。",
-              ]}
-            />
-            <ChannelLogTailPanel />
-          </section>
+          </SurfacePanel>
 
-          <section className="space-y-3">
-            <div>
-              <h2 className="text-base font-semibold">运行调试</h2>
-              <p className="text-xs text-muted-foreground">
-                用于执行渠道启停、重启、状态查询与账号探测。
-              </p>
-            </div>
-            <div className="rounded-xl border bg-background/40 p-4">
-              <Tabs
-                value={activeDebugTab}
-                onValueChange={(v) => setActiveDebugTab(v as DebugTabKey)}
-                className="w-full"
-              >
-                <TabsList className="grid w-full max-w-md grid-cols-3">
-                  <TabsTrigger value="telegram">Telegram</TabsTrigger>
-                  <TabsTrigger value="feishu">飞书</TabsTrigger>
-                  <TabsTrigger value="discord">Discord</TabsTrigger>
-                </TabsList>
+          <SurfacePanel
+            icon={Network}
+            title="运行调试"
+            description="用于执行渠道启停、重启、状态查询与账号探测。"
+          >
+            <Tabs
+              value={activeDebugTab}
+              onValueChange={(v) => setActiveDebugTab(v as DebugTabKey)}
+              className="w-full"
+            >
+              <TabsList className={SECTION_TABS_CLASS_NAME}>
+                <TabsTrigger
+                  value="telegram"
+                  className={SECTION_TAB_TRIGGER_CLASS_NAME}
+                >
+                  Telegram
+                </TabsTrigger>
+                <TabsTrigger
+                  value="feishu"
+                  className={SECTION_TAB_TRIGGER_CLASS_NAME}
+                >
+                  飞书
+                </TabsTrigger>
+                <TabsTrigger
+                  value="discord"
+                  className={SECTION_TAB_TRIGGER_CLASS_NAME}
+                >
+                  Discord
+                </TabsTrigger>
+              </TabsList>
 
-                <TabsContent value="telegram" className="mt-4">
-                  <TelegramGatewayDebugPanel />
-                </TabsContent>
+              <TabsContent value="telegram" className="mt-4">
+                <TelegramGatewayDebugPanel />
+              </TabsContent>
 
-                <TabsContent value="feishu" className="mt-4">
-                  <FeishuGatewayDebugPanel />
-                </TabsContent>
+              <TabsContent value="feishu" className="mt-4">
+                <FeishuGatewayDebugPanel />
+              </TabsContent>
 
-                <TabsContent value="discord" className="mt-4">
-                  <DiscordGatewayDebugPanel />
-                </TabsContent>
-              </Tabs>
-            </div>
-          </section>
+              <TabsContent value="discord" className="mt-4">
+                <DiscordGatewayDebugPanel />
+              </TabsContent>
+            </Tabs>
+          </SurfacePanel>
         </div>
       )}
 
       {/* 底部固定栏 */}
       {isDirty && (
-        <div className="sticky bottom-0 mt-6 flex items-center justify-between rounded-lg border bg-background/95 backdrop-blur p-3">
+        <div className="sticky bottom-0 mt-6 flex flex-col gap-3 rounded-[22px] border border-slate-200/80 bg-white/95 p-4 shadow-lg shadow-slate-950/10 backdrop-blur lg:flex-row lg:items-center lg:justify-between">
           <div className="flex items-center gap-2 text-sm text-muted-foreground">
             <AlertCircle className="h-4 w-4 text-yellow-500" />
             <span>未保存的更改</span>
-            <span className="rounded bg-muted px-1.5 py-0.5 text-xs font-medium">
+            <span className="rounded-full border border-slate-200 bg-slate-100 px-2.5 py-1 text-xs font-medium text-slate-500">
               {currentScopeLabel}
             </span>
           </div>
           <div className="flex gap-2">
             <button
               onClick={handleCancel}
-              className="flex items-center gap-1.5 px-3 py-1.5 rounded-lg border text-sm hover:bg-muted"
+              className="flex items-center gap-1.5 rounded-full border border-slate-200 bg-white px-4 py-2 text-sm font-medium text-slate-600 transition hover:border-slate-300 hover:text-slate-900"
             >
               <RotateCcw className="h-3.5 w-3.5" />
               取消
@@ -2553,7 +3024,7 @@ export function ChannelsSettings({ className }: ChannelsSettingsProps) {
             <button
               onClick={handleSave}
               disabled={saving}
-              className="flex items-center gap-1.5 px-4 py-1.5 rounded-lg bg-primary text-primary-foreground text-sm font-medium hover:bg-primary/90 disabled:opacity-50"
+              className="flex items-center gap-1.5 rounded-full bg-slate-900 px-4 py-2 text-sm font-medium text-white transition hover:bg-slate-800 disabled:opacity-50"
             >
               {saving ? (
                 <Loader2 className="h-3.5 w-3.5 animate-spin" />
diff --git a/src/components/settings-v2/system/chrome-relay/index.test.tsx b/src/components/settings-v2/system/chrome-relay/index.test.tsx
new file mode 100644
index 000000000..cb4579e02
--- /dev/null
+++ b/src/components/settings-v2/system/chrome-relay/index.test.tsx
@@ -0,0 +1,200 @@
+import { act } from "react";
+import { createRoot, type Root } from "react-dom/client";
+import { afterEach, beforeEach, describe, expect, it, vi } from "vitest";
+
+const {
+  mockGetConfig,
+  mockLaunchBrowserRuntimeAssist,
+  mockOpenBrowserRuntimeDebuggerWindow,
+  mockGetChromeProfileSessions,
+  mockGetChromeBridgeEndpointInfo,
+  mockGetChromeBridgeStatus,
+  mockGetBrowserBackendPolicy,
+  mockGetBrowserBackendsStatus,
+} = vi.hoisted(() => ({
+  mockGetConfig: vi.fn(),
+  mockLaunchBrowserRuntimeAssist: vi.fn(),
+  mockOpenBrowserRuntimeDebuggerWindow: vi.fn(),
+  mockGetChromeProfileSessions: vi.fn(),
+  mockGetChromeBridgeEndpointInfo: vi.fn(),
+  mockGetChromeBridgeStatus: vi.fn(),
+  mockGetBrowserBackendPolicy: vi.fn(),
+  mockGetBrowserBackendsStatus: vi.fn(),
+}));
+
+vi.mock("@/lib/api/appConfig", () => ({
+  getConfig: mockGetConfig,
+}));
+
+vi.mock("@/features/browser-runtime", () => ({
+  BrowserRuntimeDebugPanel: () => <div data-testid="browser-runtime-panel" />,
+}));
+
+vi.mock("@/lib/webview-api", async () => {
+  const actual = await vi.importActual<object>("@/lib/webview-api");
+  return {
+    ...actual,
+    launchBrowserRuntimeAssist: mockLaunchBrowserRuntimeAssist,
+    openBrowserRuntimeDebuggerWindow: mockOpenBrowserRuntimeDebuggerWindow,
+    getChromeProfileSessions: mockGetChromeProfileSessions,
+    getChromeBridgeEndpointInfo: mockGetChromeBridgeEndpointInfo,
+    getChromeBridgeStatus: mockGetChromeBridgeStatus,
+    getBrowserBackendPolicy: mockGetBrowserBackendPolicy,
+    getBrowserBackendsStatus: mockGetBrowserBackendsStatus,
+    closeChromeProfileSession: vi.fn(),
+    openChromeProfileWindow: vi.fn(),
+    setBrowserBackendPolicy: vi.fn(),
+    browserExecuteAction: vi.fn(),
+    chromeBridgeExecuteCommand: vi.fn(),
+  };
+});
+
+import { ChromeRelaySettings } from ".";
+
+interface Mounted {
+  container: HTMLDivElement;
+  root: Root;
+}
+
+const mounted: Mounted[] = [];
+
+function renderComponent() {
+  const container = document.createElement("div");
+  document.body.appendChild(container);
+  const root = createRoot(container);
+  act(() => {
+    root.render(<ChromeRelaySettings />);
+  });
+  mounted.push({ container, root });
+  return container;
+}
+
+async function flushEffects() {
+  await act(async () => {
+    await Promise.resolve();
+  });
+}
+
+function findButton(container: HTMLElement, text: string): HTMLButtonElement {
+  const target = Array.from(container.querySelectorAll("button")).find(
+    (button) => button.textContent?.includes(text),
+  );
+  if (!target) {
+    throw new Error(`未找到按钮: ${text}`);
+  }
+  return target as HTMLButtonElement;
+}
+
+beforeEach(() => {
+  (
+    globalThis as typeof globalThis & {
+      IS_REACT_ACT_ENVIRONMENT?: boolean;
+    }
+  ).IS_REACT_ACT_ENVIRONMENT = true;
+
+  mockGetConfig.mockResolvedValue({
+    web_search: {
+      engine: "google",
+    },
+  });
+  mockLaunchBrowserRuntimeAssist.mockResolvedValue({
+    profile: {
+      success: true,
+      reused: false,
+    },
+    session: {
+      session_id: "mock-session",
+      profile_key: "search_google",
+      target_id: "mock-target",
+      target_title: "Mock Target",
+      target_url: "https://www.google.com/search?q=proxycast+browser+assist",
+      remote_debugging_port: 13001,
+      ws_debugger_url: "ws://127.0.0.1:13001/devtools/page/mock-target",
+      created_at: "2026-03-14T00:00:00Z",
+      connected: true,
+    },
+  });
+  mockOpenBrowserRuntimeDebuggerWindow.mockResolvedValue(undefined);
+  mockGetChromeProfileSessions.mockResolvedValue([]);
+  mockGetChromeBridgeEndpointInfo.mockResolvedValue({
+    server_running: true,
+    host: "127.0.0.1",
+    port: 8999,
+    observer_ws_url: "ws://127.0.0.1:8999/observer",
+    control_ws_url: "ws://127.0.0.1:8999/control",
+    bridge_key: "proxy_cast",
+  });
+  mockGetChromeBridgeStatus.mockResolvedValue({
+    observer_count: 0,
+    control_count: 0,
+    pending_command_count: 0,
+    observers: [],
+    controls: [],
+    pending_commands: [],
+  });
+  mockGetBrowserBackendPolicy.mockResolvedValue({
+    priority: ["aster_compat", "proxycast_extension_bridge", "cdp_direct"],
+    auto_fallback: true,
+  });
+  mockGetBrowserBackendsStatus.mockResolvedValue({
+    policy: {
+      priority: ["aster_compat", "proxycast_extension_bridge", "cdp_direct"],
+      auto_fallback: true,
+    },
+    bridge_observer_count: 0,
+    bridge_control_count: 0,
+    running_profile_count: 0,
+    cdp_alive_profile_count: 0,
+    aster_native_host_supported: true,
+    aster_native_host_configured: false,
+    backends: [],
+  });
+});
+
+afterEach(() => {
+  while (mounted.length > 0) {
+    const target = mounted.pop();
+    if (!target) break;
+    act(() => {
+      target.root.unmount();
+    });
+    target.container.remove();
+  }
+  vi.clearAllMocks();
+});
+
+describe("ChromeRelaySettings", () => {
+  it("点击一键按钮时应启动浏览器协助", async () => {
+    const container = renderComponent();
+    await flushEffects();
+
+    const button = findButton(container, "一键启动浏览器协助");
+    await act(async () => {
+      button.click();
+      await flushEffects();
+    });
+
+    expect(mockLaunchBrowserRuntimeAssist).toHaveBeenCalledTimes(1);
+    expect(mockLaunchBrowserRuntimeAssist).toHaveBeenCalledWith({
+      profile_key: "search_google",
+      url: "https://www.google.com/search?q=proxycast+browser+assist",
+      open_window: true,
+      stream_mode: "both",
+    });
+    expect(container.textContent).toContain("浏览器协助已启动");
+  });
+
+  it("点击按钮时应打开独立浏览器调试窗口", async () => {
+    const container = renderComponent();
+    await flushEffects();
+
+    const button = findButton(container, "打开独立调试窗口");
+    await act(async () => {
+      button.click();
+      await flushEffects();
+    });
+
+    expect(mockOpenBrowserRuntimeDebuggerWindow).toHaveBeenCalledTimes(1);
+    expect(container.textContent).toContain("已打开独立浏览器调试窗口");
+  });
+});
diff --git a/src/components/settings-v2/system/chrome-relay/index.tsx b/src/components/settings-v2/system/chrome-relay/index.tsx
index 3167f1509..03ac39ef9 100644
--- a/src/components/settings-v2/system/chrome-relay/index.tsx
+++ b/src/components/settings-v2/system/chrome-relay/index.tsx
@@ -1,6 +1,25 @@
-import { useEffect, useMemo, useState } from "react";
-import { ExternalLink, Globe, RefreshCw } from "lucide-react";
+import {
+  useCallback,
+  useEffect,
+  useMemo,
+  useRef,
+  useState,
+  type ReactNode,
+} from "react";
+import {
+  Bug,
+  Copy,
+  ExternalLink,
+  Globe,
+  Layers3,
+  RefreshCw,
+  Sparkles,
+  type LucideIcon,
+} from "lucide-react";
+import { BrowserRuntimeDebugPanel } from "@/features/browser-runtime";
 import { getConfig } from "@/lib/api/appConfig";
+import { Switch } from "@/components/ui/switch";
+import { cn } from "@/lib/utils";
 import {
   browserExecuteAction,
   chromeBridgeExecuteCommand,
@@ -10,10 +29,13 @@ import {
   getChromeBridgeEndpointInfo,
   getChromeBridgeStatus,
   getChromeProfileSessions,
+  launchBrowserRuntimeAssist,
+  openBrowserRuntimeDebuggerWindow,
   openChromeProfileWindow,
   setBrowserBackendPolicy,
   type BrowserBackendPolicy,
   type BrowserBackendsStatusSnapshot,
+  type BrowserBackendStatusItem,
   type BrowserBackendType,
   type ChromeBridgeEndpointInfo,
   type ChromeBridgeStatusSnapshot,
@@ -22,10 +44,66 @@ import {
 
 type SearchEngine = "google" | "xiaohongshu";
 
-const GOOGLE_SETTINGS_URL = "https://www.google.com/preferences?hl=zh-CN";
-const XIAOHONGSHU_SETTINGS_URL = "https://www.xiaohongshu.com/explore";
-const GOOGLE_PROFILE_KEY = "search_google";
-const XIAOHONGSHU_PROFILE_KEY = "search_xiaohongshu";
+interface SurfacePanelProps {
+  icon: LucideIcon;
+  title: string;
+  description: string;
+  aside?: ReactNode;
+  children: ReactNode;
+}
+
+interface SummaryStatProps {
+  label: string;
+  value: string;
+  description: string;
+}
+
+interface EngineDefinition {
+  id: SearchEngine;
+  label: string;
+  description: string;
+  settingsUrl: string;
+  assistUrl: string;
+  bridgeTestUrl: string;
+  backendTestUrl: string;
+  profileKey: string;
+  settingsButtonLabel: string;
+}
+
+const SECONDARY_BUTTON_CLASS_NAME =
+  "inline-flex items-center gap-2 rounded-full border border-slate-200 bg-white px-4 py-2 text-sm font-medium text-slate-600 transition hover:border-slate-300 hover:text-slate-900 disabled:cursor-not-allowed disabled:opacity-50";
+const PRIMARY_BUTTON_CLASS_NAME =
+  "inline-flex items-center gap-2 rounded-full bg-slate-900 px-4 py-2 text-sm font-medium text-white transition hover:bg-slate-800 disabled:cursor-not-allowed disabled:opacity-50";
+const SELECT_CLASS_NAME =
+  "h-11 rounded-[16px] border border-slate-200 bg-white px-3.5 text-sm text-slate-700 outline-none transition focus:border-slate-300 focus:ring-2 focus:ring-slate-200";
+
+const ENGINE_ORDER: SearchEngine[] = ["google", "xiaohongshu"];
+const ENGINE_DEFINITIONS: Record<SearchEngine, EngineDefinition> = {
+  google: {
+    id: "google",
+    label: "Google",
+    description: "独立 Profile 用于搜索偏好、语言和地区设置。",
+    settingsUrl: "https://www.google.com/preferences?hl=zh-CN",
+    assistUrl: "https://www.google.com/search?q=proxycast+browser+assist",
+    bridgeTestUrl: "https://www.google.com/search?q=proxycast",
+    backendTestUrl:
+      "https://www.google.com/search?q=proxycast+browser+backend",
+    profileKey: "search_google",
+    settingsButtonLabel: "打开 Google 设置",
+  },
+  xiaohongshu: {
+    id: "xiaohongshu",
+    label: "小红书",
+    description: "独立 Profile 用于账号登录、内容浏览和扩展桥接。",
+    settingsUrl: "https://www.xiaohongshu.com/explore",
+    assistUrl: "https://www.xiaohongshu.com/explore",
+    bridgeTestUrl: "https://www.xiaohongshu.com/explore",
+    backendTestUrl: "https://www.xiaohongshu.com/explore",
+    profileKey: "search_xiaohongshu",
+    settingsButtonLabel: "打开小红书设置",
+  },
+};
+
 const BACKEND_OPTIONS: BrowserBackendType[] = [
   "aster_compat",
   "proxycast_extension_bridge",
@@ -38,8 +116,111 @@ const BACKEND_LABELS: Record<BrowserBackendType, string> = {
   cdp_direct: "CDP 直连",
 };
 
+const BACKEND_DESCRIPTIONS: Record<BrowserBackendType, string> = {
+  aster_compat: "优先复用现有 Aster 兼容链路，适合需要兼容旧协议接入的场景。",
+  proxycast_extension_bridge:
+    "通过浏览器扩展回传页面信息并执行命令，适合人工观察和轻量控制。",
+  cdp_direct: "直接走 Chrome DevTools Protocol，适合实时调试与会话接管。",
+};
+
+function createPolicyKey(policy: BrowserBackendPolicy | null) {
+  if (!policy) {
+    return "";
+  }
+  return `${policy.auto_fallback}:${policy.priority.join(",")}`;
+}
+
+function normalizePriority(priority: BrowserBackendType[]) {
+  const merged: BrowserBackendType[] = [];
+  for (const backend of priority) {
+    if (BACKEND_OPTIONS.includes(backend) && !merged.includes(backend)) {
+      merged.push(backend);
+    }
+  }
+
+  for (const backend of BACKEND_OPTIONS) {
+    if (!merged.includes(backend)) {
+      merged.push(backend);
+    }
+  }
+
+  return merged.slice(0, BACKEND_OPTIONS.length);
+}
+
+function SurfacePanel({
+  icon: Icon,
+  title,
+  description,
+  aside,
+  children,
+}: SurfacePanelProps) {
+  return (
+    <article className="rounded-[26px] border border-slate-200/80 bg-white p-5 shadow-sm shadow-slate-950/5">
+      <div className="flex flex-col gap-4 sm:flex-row sm:items-start sm:justify-between">
+        <div className="space-y-1">
+          <div className="flex items-center gap-2 text-sm font-semibold text-slate-900">
+            <Icon className="h-4 w-4 text-sky-600" />
+            {title}
+          </div>
+          <p className="text-sm leading-6 text-slate-500">{description}</p>
+        </div>
+        {aside ? (
+          <div className="flex flex-wrap items-center gap-2">{aside}</div>
+        ) : null}
+      </div>
+
+      <div className="mt-5">{children}</div>
+    </article>
+  );
+}
+
+function SummaryStat({ label, value, description }: SummaryStatProps) {
+  return (
+    <div className="rounded-[22px] border border-white/90 bg-white/88 p-4 shadow-sm">
+      <p className="text-xs font-medium tracking-[0.12em] text-slate-500">
+        {label}
+      </p>
+      <p className="mt-3 text-3xl font-semibold tracking-tight text-slate-900">
+        {value}
+      </p>
+      <p className="mt-2 text-xs leading-5 text-slate-500">{description}</p>
+    </div>
+  );
+}
+
+function StatusPill({
+  tone,
+  children,
+}: {
+  tone: "neutral" | "success" | "warning";
+  children: ReactNode;
+}) {
+  return (
+    <span
+      className={cn(
+        "rounded-full border px-3 py-1 text-xs font-medium",
+        tone === "success" &&
+          "border-emerald-200 bg-emerald-50 text-emerald-700",
+        tone === "warning" &&
+          "border-amber-200 bg-amber-50 text-amber-700",
+        tone === "neutral" &&
+          "border-slate-200 bg-white text-slate-500",
+      )}
+    >
+      {children}
+    </span>
+  );
+}
+
+function resolveBackendTone(item?: BrowserBackendStatusItem | null) {
+  if (!item) {
+    return "neutral" as const;
+  }
+  return item.available ? ("success" as const) : ("warning" as const);
+}
+
 export function ChromeRelaySettings() {
-  const [testEngine, setTestEngine] = useState<SearchEngine>("google");
+  const [activeEngine, setActiveEngine] = useState<SearchEngine>("google");
   const [openingEngine, setOpeningEngine] = useState<SearchEngine | null>(null);
   const [closingProfileKey, setClosingProfileKey] = useState<string | null>(
     null,
@@ -52,6 +233,8 @@ export function ChromeRelaySettings() {
     useState<BrowserBackendType | null>(null);
   const [testingBridgeEngine, setTestingBridgeEngine] =
     useState<SearchEngine | null>(null);
+  const [launchingAssist, setLaunchingAssist] = useState(false);
+  const [openingDebugger, setOpeningDebugger] = useState(false);
   const [sessions, setSessions] = useState<ChromeProfileSessionInfo[]>([]);
   const [bridgeEndpoint, setBridgeEndpoint] =
     useState<ChromeBridgeEndpointInfo | null>(null);
@@ -63,271 +246,420 @@ export function ChromeRelaySettings() {
     useState<BrowserBackendPolicy | null>(null);
   const [backendsStatus, setBackendsStatus] =
     useState<BrowserBackendsStatusSnapshot | null>(null);
+  const [runtimeSessionId, setRuntimeSessionId] = useState<string | null>(null);
   const [message, setMessage] = useState<{
     type: "success" | "error";
     text: string;
   } | null>(null);
+  const backendPolicyRef = useRef<BrowserBackendPolicy | null>(null);
+  const draftBackendPolicyRef = useRef<BrowserBackendPolicy | null>(null);
 
-  const normalizePriority = (priority: BrowserBackendType[]) => {
-    const merged: BrowserBackendType[] = [];
-    for (const backend of priority) {
-      if (BACKEND_OPTIONS.includes(backend) && !merged.includes(backend)) {
-        merged.push(backend);
+  useEffect(() => {
+    backendPolicyRef.current = backendPolicy;
+  }, [backendPolicy]);
+
+  useEffect(() => {
+    draftBackendPolicyRef.current = draftBackendPolicy;
+  }, [draftBackendPolicy]);
+
+  const pushMessage = useCallback(
+    (nextMessage: { type: "success" | "error"; text: string }, timeout = 2500) => {
+      setMessage(nextMessage);
+      if (timeout > 0) {
+        window.setTimeout(() => setMessage(null), timeout);
       }
-    }
-    for (const backend of BACKEND_OPTIONS) {
-      if (!merged.includes(backend)) {
-        merged.push(backend);
+    },
+    [],
+  );
+
+  const refreshSessions = useCallback(
+    async (silent: boolean) => {
+      if (!silent) {
+        setRefreshingSessions(true);
       }
-    }
-    return merged.slice(0, BACKEND_OPTIONS.length);
-  };
+      try {
+        const next = await getChromeProfileSessions();
+        setSessions(next);
+      } catch (error) {
+        if (!silent) {
+          pushMessage({
+            type: "error",
+            text: `刷新会话失败: ${
+              error instanceof Error ? error.message : String(error)
+            }`,
+          });
+        }
+      } finally {
+        if (!silent) {
+          setRefreshingSessions(false);
+        }
+      }
+    },
+    [pushMessage],
+  );
+
+  const refreshBridgeStatus = useCallback(
+    async (silent: boolean) => {
+      if (!silent) {
+        setRefreshingBridge(true);
+      }
+      try {
+        const [endpoint, status] = await Promise.all([
+          getChromeBridgeEndpointInfo(),
+          getChromeBridgeStatus(),
+        ]);
+        setBridgeEndpoint(endpoint);
+        setBridgeStatus(status);
+      } catch (error) {
+        if (!silent) {
+          pushMessage({
+            type: "error",
+            text: `刷新扩展连接状态失败: ${
+              error instanceof Error ? error.message : String(error)
+            }`,
+          });
+        }
+      } finally {
+        if (!silent) {
+          setRefreshingBridge(false);
+        }
+      }
+    },
+    [pushMessage],
+  );
+
+  const refreshBackendStatus = useCallback(
+    async (silent: boolean) => {
+      if (!silent) {
+        setRefreshingBackends(true);
+      }
+      try {
+        const [policy, status] = await Promise.all([
+          getBrowserBackendPolicy(),
+          getBrowserBackendsStatus(),
+        ]);
+        const normalizedPolicy: BrowserBackendPolicy = {
+          auto_fallback: policy.auto_fallback,
+          priority: normalizePriority(policy.priority),
+        };
+        const shouldSyncDraft =
+          !draftBackendPolicyRef.current ||
+          !backendPolicyRef.current ||
+          createPolicyKey(draftBackendPolicyRef.current) ===
+            createPolicyKey(backendPolicyRef.current);
+
+        setBackendPolicy(normalizedPolicy);
+        backendPolicyRef.current = normalizedPolicy;
+        if (shouldSyncDraft) {
+          setDraftBackendPolicy(normalizedPolicy);
+          draftBackendPolicyRef.current = normalizedPolicy;
+        }
+        setBackendsStatus(status);
+      } catch (error) {
+        if (!silent) {
+          pushMessage({
+            type: "error",
+            text: `刷新浏览器后端状态失败: ${
+              error instanceof Error ? error.message : String(error)
+            }`,
+          });
+        }
+      } finally {
+        if (!silent) {
+          setRefreshingBackends(false);
+        }
+      }
+    },
+    [pushMessage],
+  );
+
+  const refreshAll = useCallback(
+    async (silent: boolean) => {
+      await Promise.all([
+        refreshSessions(silent),
+        refreshBridgeStatus(silent),
+        refreshBackendStatus(silent),
+      ]);
+    },
+    [refreshBackendStatus, refreshBridgeStatus, refreshSessions],
+  );
 
   useEffect(() => {
     void getConfig()
       .then((config) => {
-        const engine = (config.web_search?.engine || "google") as SearchEngine;
-        setTestEngine(engine);
+        const nextEngine = config.web_search?.engine;
+        if (
+          nextEngine === ENGINE_DEFINITIONS.google.id ||
+          nextEngine === ENGINE_DEFINITIONS.xiaohongshu.id
+        ) {
+          setActiveEngine(nextEngine);
+        }
       })
       .catch(() => {
         // ignore
       });
 
-    void refreshSessions(true);
-    void refreshBridgeStatus(true);
-    void refreshBackendStatus(true);
-
+    void refreshAll(true);
     const timer = window.setInterval(() => {
-      void refreshSessions(true);
-      void refreshBridgeStatus(true);
-      void refreshBackendStatus(true);
+      void refreshAll(true);
     }, 15000);
 
     return () => window.clearInterval(timer);
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, []);
-
-  const hasBackendPolicyChanges = useMemo(() => {
-    if (!backendPolicy || !draftBackendPolicy) return false;
-    if (backendPolicy.auto_fallback !== draftBackendPolicy.auto_fallback)
-      return true;
-    return (
-      backendPolicy.priority.join(",") !== draftBackendPolicy.priority.join(",")
-    );
-  }, [backendPolicy, draftBackendPolicy]);
+  }, [refreshAll]);
 
+  const selectedEngine = ENGINE_DEFINITIONS[activeEngine];
+  const sessionsByProfile = useMemo(
+    () => new Map(sessions.map((session) => [session.profile_key, session])),
+    [sessions],
+  );
+  const observersByProfile = useMemo(
+    () =>
+      new Map(
+        (bridgeStatus?.observers ?? []).map((observer) => [
+          observer.profile_key,
+          observer,
+        ]),
+      ),
+    [bridgeStatus?.observers],
+  );
+  const selectedSession = sessionsByProfile.get(selectedEngine.profileKey) ?? null;
   const hasObserverConnected = (bridgeStatus?.observer_count ?? 0) > 0;
+  const hasBackendPolicyChanges =
+    createPolicyKey(backendPolicy) !== createPolicyKey(draftBackendPolicy);
+  const backendStatusList =
+    backendsStatus?.backends ??
+    BACKEND_OPTIONS.map((backend) => ({
+      backend,
+      available: false,
+      reason: "等待状态拉取",
+      capabilities: [],
+    }));
 
-  const refreshSessions = async (silent: boolean) => {
-    if (!silent) setRefreshingSessions(true);
-    try {
-      const next = await getChromeProfileSessions();
-      setSessions(next);
-    } catch (error) {
-      if (!silent) {
-        setMessage({
-          type: "error",
-          text: `刷新会话失败: ${error instanceof Error ? error.message : String(error)}`,
+  const openSearchSettingsWindow = useCallback(
+    async (engine: SearchEngine) => {
+      const target = ENGINE_DEFINITIONS[engine];
+      try {
+        setOpeningEngine(engine);
+        const result = await openChromeProfileWindow({
+          profile_key: target.profileKey,
+          url: target.settingsUrl,
         });
-      }
-    } finally {
-      if (!silent) setRefreshingSessions(false);
-    }
-  };
-
-  const refreshBridgeStatus = async (silent: boolean) => {
-    if (!silent) setRefreshingBridge(true);
-    try {
-      const [endpoint, status] = await Promise.all([
-        getChromeBridgeEndpointInfo(),
-        getChromeBridgeStatus(),
-      ]);
-      setBridgeEndpoint(endpoint);
-      setBridgeStatus(status);
-    } catch (error) {
-      if (!silent) {
-        setMessage({
-          type: "error",
-          text: `刷新扩展连接状态失败: ${error instanceof Error ? error.message : String(error)}`,
+        if (!result.success) {
+          throw new Error(result.error || "创建窗口失败");
+        }
+        pushMessage({
+          type: "success",
+          text: result.reused
+            ? `已复用 ${target.label} 会话 (PID ${result.pid ?? "-"})`
+            : `已启动 ${target.label} 会话 (PID ${result.pid ?? "-"})`,
         });
-      }
-    } finally {
-      if (!silent) setRefreshingBridge(false);
-    }
-  };
-
-  const refreshBackendStatus = async (silent: boolean) => {
-    if (!silent) setRefreshingBackends(true);
-    try {
-      const [policy, status] = await Promise.all([
-        getBrowserBackendPolicy(),
-        getBrowserBackendsStatus(),
-      ]);
-      const normalizedPolicy: BrowserBackendPolicy = {
-        auto_fallback: policy.auto_fallback,
-        priority: normalizePriority(policy.priority),
-      };
-      setBackendPolicy(normalizedPolicy);
-      setDraftBackendPolicy(normalizedPolicy);
-      setBackendsStatus(status);
-    } catch (error) {
-      if (!silent) {
-        setMessage({
+        await refreshSessions(true);
+      } catch (error) {
+        pushMessage({
           type: "error",
-          text: `刷新浏览器后端状态失败: ${error instanceof Error ? error.message : String(error)}`,
+          text: `打开设置窗口失败: ${
+            error instanceof Error ? error.message : String(error)
+          }`,
         });
+      } finally {
+        setOpeningEngine(null);
       }
-    } finally {
-      if (!silent) setRefreshingBackends(false);
-    }
-  };
+    },
+    [pushMessage, refreshSessions],
+  );
 
-  const getProfileKey = (engine: SearchEngine) =>
-    engine === "google" ? GOOGLE_PROFILE_KEY : XIAOHONGSHU_PROFILE_KEY;
-
-  const getSessionByEngine = (engine: SearchEngine) => {
-    const key = getProfileKey(engine);
-    return sessions.find((session) => session.profile_key === key);
-  };
-
-  const getObserverByEngine = (engine: SearchEngine) => {
-    const key = getProfileKey(engine);
-    const observers = bridgeStatus?.observers || [];
-    return (
-      observers.find((observer) => observer.profile_key === key) ||
-      observers.at(0) ||
-      null
-    );
-  };
-
-  const openSearchSettingsWindow = async (engine: SearchEngine) => {
-    const profileKey = getProfileKey(engine);
-    const panelConfig =
-      engine === "google"
-        ? {
-            url: GOOGLE_SETTINGS_URL,
-            profile_key: profileKey,
-          }
-        : {
-            url: XIAOHONGSHU_SETTINGS_URL,
-            profile_key: profileKey,
-          };
+  const closeSession = useCallback(
+    async (engine: SearchEngine) => {
+      const target = ENGINE_DEFINITIONS[engine];
+      setClosingProfileKey(target.profileKey);
+      try {
+        const closed = await closeChromeProfileSession(target.profileKey);
+        pushMessage({
+          type: closed ? "success" : "error",
+          text: closed ? "会话已关闭" : "未找到运行中的会话",
+        });
+        await refreshSessions(true);
+      } catch (error) {
+        pushMessage({
+          type: "error",
+          text: `关闭会话失败: ${
+            error instanceof Error ? error.message : String(error)
+          }`,
+        });
+      } finally {
+        setClosingProfileKey(null);
+      }
+    },
+    [pushMessage, refreshSessions],
+  );
 
+  const handleLaunchBrowserAssist = useCallback(async () => {
     try {
-      setOpeningEngine(engine);
-      const result = await openChromeProfileWindow({
-        profile_key: panelConfig.profile_key,
-        url: panelConfig.url,
+      setLaunchingAssist(true);
+      const result = await launchBrowserRuntimeAssist({
+        profile_key: selectedEngine.profileKey,
+        url: selectedEngine.assistUrl,
+        open_window: true,
+        stream_mode: "both",
       });
-      if (!result.success) {
-        throw new Error(result.error || "创建窗口失败");
-      }
-      setMessage({
+      setRuntimeSessionId(result.session.session_id);
+      pushMessage({
         type: "success",
-        text: result.reused
-          ? `已复用 ${engine === "google" ? "Google" : "小红书"} 会话 (PID ${result.pid ?? "-"})`
-          : `已启动 ${engine === "google" ? "Google" : "小红书"} 会话 (PID ${result.pid ?? "-"})`,
+        text: `浏览器协助已启动：${
+          result.session.target_title ||
+          result.session.target_url ||
+          selectedEngine.assistUrl
+        }`,
       });
-      setTimeout(() => setMessage(null), 2500);
-      await refreshSessions(true);
+      await refreshAll(true);
     } catch (error) {
-      console.error("打开独立设置窗口失败:", error);
-      setMessage({
+      pushMessage({
         type: "error",
-        text: `打开设置窗口失败: ${error instanceof Error ? error.message : String(error)}`,
+        text: `启动浏览器协助失败: ${
+          error instanceof Error ? error.message : String(error)
+        }`,
       });
     } finally {
-      setOpeningEngine(null);
+      setLaunchingAssist(false);
     }
-  };
+  }, [pushMessage, refreshAll, selectedEngine]);
 
-  const closeSession = async (engine: SearchEngine) => {
-    const profileKey = getProfileKey(engine);
-    setClosingProfileKey(profileKey);
+  const handleOpenDebuggerWindow = useCallback(async () => {
     try {
-      const closed = await closeChromeProfileSession(profileKey);
-      setMessage({
-        type: closed ? "success" : "error",
-        text: closed ? "会话已关闭" : "未找到运行中的会话",
+      setOpeningDebugger(true);
+      await openBrowserRuntimeDebuggerWindow(
+        runtimeSessionId
+          ? { session_id: runtimeSessionId }
+          : { profile_key: selectedEngine.profileKey },
+      );
+      pushMessage({
+        type: "success",
+        text: "已打开独立浏览器调试窗口",
       });
-      setTimeout(() => setMessage(null), 2500);
-      await refreshSessions(true);
     } catch (error) {
-      setMessage({
+      pushMessage({
         type: "error",
-        text: `关闭会话失败: ${error instanceof Error ? error.message : String(error)}`,
+        text: `打开独立调试窗口失败: ${
+          error instanceof Error ? error.message : String(error)
+        }`,
       });
     } finally {
-      setClosingProfileKey(null);
+      setOpeningDebugger(false);
     }
-  };
+  }, [pushMessage, runtimeSessionId, selectedEngine.profileKey]);
 
-  const testBridgeCommand = async (engine: SearchEngine) => {
-    if (!bridgeEndpoint?.server_running) {
-      setMessage({
-        type: "error",
-        text: "服务未运行，无法执行扩展桥接测试",
-      });
-      return;
-    }
-    if (!hasObserverConnected) {
-      setMessage({
-        type: "error",
-        text: "未检测到扩展 observer 连接，请先在目标 Chrome Profile 安装并连接扩展",
+  const copyBridgeConfig = useCallback(
+    async (engine: SearchEngine) => {
+      if (!bridgeEndpoint) {
+        pushMessage({
+          type: "error",
+          text: "桥接端点尚未加载，无法复制配置",
+        });
+        return;
+      }
+
+      try {
+        if (!navigator.clipboard?.writeText) {
+          throw new Error("当前环境不支持剪贴板写入");
+        }
+        await navigator.clipboard.writeText(
+          JSON.stringify(
+            {
+              serverUrl: `ws://${bridgeEndpoint.host}:${bridgeEndpoint.port}`,
+              bridgeKey: bridgeEndpoint.bridge_key,
+              profileKey: ENGINE_DEFINITIONS[engine].profileKey,
+            },
+            null,
+            2,
+          ),
+        );
+        pushMessage({
+          type: "success",
+          text: `${ENGINE_DEFINITIONS[engine].label} 配置已复制到剪贴板`,
+        });
+      } catch (error) {
+        pushMessage({
+          type: "error",
+          text: `复制扩展配置失败: ${
+            error instanceof Error ? error.message : String(error)
+          }`,
+        });
+      }
+    },
+    [bridgeEndpoint, pushMessage],
+  );
+
+  const testBridgeCommand = useCallback(
+    async (engine: SearchEngine) => {
+      if (!bridgeEndpoint?.server_running) {
+        pushMessage({
+          type: "error",
+          text: "服务未运行，无法执行扩展桥接测试",
+        });
+        return;
+      }
+      if (!hasObserverConnected) {
+        pushMessage({
+          type: "error",
+          text: "未检测到扩展 observer 连接，请先完成扩展接入",
+        });
+        return;
+      }
+
+      const target = ENGINE_DEFINITIONS[engine];
+      try {
+        setTestingBridgeEngine(engine);
+        const result = await chromeBridgeExecuteCommand({
+          profile_key: target.profileKey,
+          command: "open_url",
+          url: target.bridgeTestUrl,
+          wait_for_page_info: true,
+          timeout_ms: 45000,
+        });
+        if (!result.success) {
+          throw new Error(result.error || "命令执行失败");
+        }
+        pushMessage({
+          type: "success",
+          text: `扩展桥接测试成功：${result.page_info?.title || "已打开目标页面"}`,
+        });
+        await refreshBridgeStatus(true);
+      } catch (error) {
+        pushMessage({
+          type: "error",
+          text: `扩展桥接测试失败: ${
+            error instanceof Error ? error.message : String(error)
+          }`,
+        });
+      } finally {
+        setTestingBridgeEngine(null);
+      }
+    },
+    [bridgeEndpoint?.server_running, hasObserverConnected, pushMessage, refreshBridgeStatus],
+  );
+
+  const updateBackendPriority = useCallback(
+    (index: number, backend: BrowserBackendType) => {
+      setDraftBackendPolicy((prev) => {
+        if (!prev) {
+          return prev;
+        }
+        const next = [...prev.priority];
+        next[index] = backend;
+        return {
+          ...prev,
+          priority: normalizePriority(next),
+        };
       });
+    },
+    [],
+  );
+
+  const saveBackendPolicy = useCallback(async () => {
+    if (!draftBackendPolicy) {
       return;
     }
 
-    const url =
-      engine === "google"
-        ? "https://www.google.com/search?q=proxycast"
-        : "https://www.xiaohongshu.com/explore";
-    try {
-      setTestingBridgeEngine(engine);
-      const result = await chromeBridgeExecuteCommand({
-        profile_key: getProfileKey(engine),
-        command: "open_url",
-        url,
-        wait_for_page_info: true,
-        timeout_ms: 45000,
-      });
-      if (!result.success) {
-        throw new Error(result.error || "命令执行失败");
-      }
-      const pageTitle = result.page_info?.title || "未知页面";
-      setMessage({
-        type: "success",
-        text: `扩展桥接测试成功：${pageTitle}`,
-      });
-      setTimeout(() => setMessage(null), 3000);
-      await refreshBridgeStatus(true);
-    } catch (error) {
-      setMessage({
-        type: "error",
-        text: `扩展桥接测试失败: ${error instanceof Error ? error.message : String(error)}`,
-      });
-    } finally {
-      setTestingBridgeEngine(null);
-    }
-  };
-
-  const updateBackendPriority = (
-    index: number,
-    backend: BrowserBackendType,
-  ) => {
-    setDraftBackendPolicy((prev) => {
-      if (!prev) return prev;
-      const next = [...prev.priority];
-      next[index] = backend;
-      return {
-        ...prev,
-        priority: normalizePriority(next),
-      };
-    });
-  };
-
-  const saveBackendPolicy = async () => {
-    if (!draftBackendPolicy) return;
     setSavingBackendPolicy(true);
     try {
       const normalizedPolicy: BrowserBackendPolicy = {
@@ -341,465 +673,750 @@ export function ChromeRelaySettings() {
       };
       setBackendPolicy(finalPolicy);
       setDraftBackendPolicy(finalPolicy);
-      setMessage({ type: "success", text: "浏览器后端策略已保存" });
-      setTimeout(() => setMessage(null), 2500);
+      pushMessage({
+        type: "success",
+        text: "浏览器后端策略已保存",
+      });
       await refreshBackendStatus(true);
     } catch (error) {
-      setMessage({
+      pushMessage({
         type: "error",
-        text: `保存后端策略失败: ${error instanceof Error ? error.message : String(error)}`,
-      });
-    } finally {
-      setSavingBackendPolicy(false);
-    }
-  };
-
-  const testBackendAction = async (backend: BrowserBackendType) => {
-    const backendStatus = backendsStatus?.backends?.find(
-      (item) => item.backend === backend,
-    );
-    if (backendStatus && !backendStatus.available) {
-      setMessage({
-        type: "error",
-        text: `${BACKEND_LABELS[backend]} 当前不可用: ${
-          backendStatus.reason || "缺少可用连接"
-        }`,
-      });
-      return;
-    }
-
-    const url =
-      testEngine === "google"
-        ? "https://www.google.com/search?q=proxycast+browser+backend"
-        : "https://www.xiaohongshu.com/explore";
-    try {
-      setTestingBackend(backend);
-      const result = await browserExecuteAction({
-        backend,
-        profile_key: getProfileKey(testEngine),
-        action: "navigate",
-        args: {
-          action: "goto",
-          url,
-          wait_for_page_info: true,
-        },
-        timeout_ms: 45000,
-      });
-      if (!result.success) {
-        throw new Error(result.error || "执行失败");
-      }
-      setMessage({
-        type: "success",
-        text: `${BACKEND_LABELS[backend]} 测试成功`,
-      });
-      setTimeout(() => setMessage(null), 2500);
-      await Promise.all([
-        refreshBridgeStatus(true),
-        refreshBackendStatus(true),
-      ]);
-    } catch (error) {
-      setMessage({
-        type: "error",
-        text: `${BACKEND_LABELS[backend]} 测试失败: ${
+        text: `保存后端策略失败: ${
           error instanceof Error ? error.message : String(error)
         }`,
       });
     } finally {
-      setTestingBackend(null);
+      setSavingBackendPolicy(false);
     }
-  };
+  }, [draftBackendPolicy, pushMessage, refreshBackendStatus]);
+
+  const testBackendAction = useCallback(
+    async (backend: BrowserBackendType) => {
+      const backendStatus = backendsStatus?.backends.find(
+        (item) => item.backend === backend,
+      );
+      if (backendStatus && !backendStatus.available) {
+        pushMessage({
+          type: "error",
+          text: `${BACKEND_LABELS[backend]} 当前不可用: ${
+            backendStatus.reason || "缺少可用连接"
+          }`,
+        });
+        return;
+      }
+
+      try {
+        setTestingBackend(backend);
+        const result = await browserExecuteAction({
+          backend,
+          profile_key: selectedEngine.profileKey,
+          action: "navigate",
+          args: {
+            action: "goto",
+            url: selectedEngine.backendTestUrl,
+            wait_for_page_info: true,
+          },
+          timeout_ms: 45000,
+        });
+        if (!result.success) {
+          throw new Error(result.error || "执行失败");
+        }
+        pushMessage({
+          type: "success",
+          text: `${BACKEND_LABELS[backend]} 测试成功`,
+        });
+        await Promise.all([
+          refreshBridgeStatus(true),
+          refreshBackendStatus(true),
+        ]);
+      } catch (error) {
+        pushMessage({
+          type: "error",
+          text: `${BACKEND_LABELS[backend]} 测试失败: ${
+            error instanceof Error ? error.message : String(error)
+          }`,
+        });
+      } finally {
+        setTestingBackend(null);
+      }
+    },
+    [backendsStatus?.backends, pushMessage, refreshBackendStatus, refreshBridgeStatus, selectedEngine],
+  );
+
+  const runtimeSummary = useMemo(
+    () => ({
+      runningProfiles: backendsStatus?.running_profile_count ?? 0,
+      cdpAliveProfiles: backendsStatus?.cdp_alive_profile_count ?? 0,
+      observerCount: bridgeStatus?.observer_count ?? 0,
+      controlCount: bridgeStatus?.control_count ?? 0,
+      pendingCommands: bridgeStatus?.pending_command_count ?? 0,
+    }),
+    [backendsStatus, bridgeStatus],
+  );
 
   return (
-    <div className="space-y-4 max-w-3xl pb-20">
-      {message && (
+    <div className="space-y-6 pb-8">
+      {message ? (
         <div
-          className={`rounded-lg border p-3 text-sm ${
-            message.type === "error"
-              ? "border-destructive bg-destructive/10 text-destructive"
-              : "border-green-500 bg-green-50 text-green-700 dark:bg-green-900/20 dark:text-green-400"
-          }`}
+          className={cn(
+            "flex items-center justify-between gap-4 rounded-[20px] border px-4 py-3 text-sm shadow-sm shadow-slate-950/5",
+            message.type === "success"
+              ? "border-emerald-200 bg-emerald-50/90 text-emerald-700"
+              : "border-rose-200 bg-rose-50/90 text-rose-700",
+          )}
         >
-          {message.text}
-        </div>
-      )}
-
-      <div className="rounded-lg border p-5 space-y-3">
-        <div className="flex items-center gap-2">
-          <Globe className="h-4 w-4 text-primary" />
-          <h3 className="text-sm font-medium">Chrome Relay 运行状态</h3>
-        </div>
-        <p className="text-xs text-muted-foreground">
-          Profile 会话 {backendsStatus?.running_profile_count ?? 0} | CDP 可用{" "}
-          {backendsStatus?.cdp_alive_profile_count ?? 0} | 扩展 observer{" "}
-          {bridgeStatus?.observer_count ?? 0} | control{" "}
-          {bridgeStatus?.control_count ?? 0}
-        </p>
-        <button
-          type="button"
-          onClick={() => {
-            void refreshSessions(false);
-            void refreshBridgeStatus(false);
-            void refreshBackendStatus(false);
-          }}
-          disabled={
-            refreshingSessions || refreshingBridge || refreshingBackends
-          }
-          className="inline-flex items-center gap-2 rounded-md border px-3 py-2 text-sm hover:bg-muted disabled:opacity-50"
-        >
-          <RefreshCw
-            className={`h-3.5 w-3.5 ${
-              refreshingSessions || refreshingBridge || refreshingBackends
-                ? "animate-spin"
-                : ""
-            }`}
-          />
-          刷新状态
-        </button>
-      </div>
-
-      <div className="rounded-lg border p-5 space-y-3">
-        <h3 className="text-sm font-medium">Google 搜索设置窗口</h3>
-        <p className="text-xs text-muted-foreground">
-          打开独立 Chrome Profile 窗口，配置 Google 语言、地区与搜索偏好。
-        </p>
-        {(() => {
-          const session = getSessionByEngine("google");
-          return session ? (
-            <p className="text-xs text-muted-foreground">
-              会话运行中 | PID {session.pid} | 来源 {session.browser_source} |
-              调试端口 {session.remote_debugging_port}
-            </p>
-          ) : (
-            <p className="text-xs text-muted-foreground">当前无运行中的会话</p>
-          );
-        })()}
-        <div className="flex items-center gap-2">
+          <span>{message.text}</span>
           <button
             type="button"
-            onClick={() => openSearchSettingsWindow("google")}
-            disabled={openingEngine === "google"}
-            className="inline-flex items-center gap-2 rounded-md border px-3 py-2 text-sm hover:bg-muted disabled:opacity-50"
+            onClick={() => setMessage(null)}
+            className="rounded-full border border-current/20 bg-white px-3 py-1.5 text-xs font-medium transition hover:bg-white/90"
           >
-            {openingEngine === "google" ? "打开中..." : "打开 Google 设置"}
-            <ExternalLink className="h-3.5 w-3.5" />
-          </button>
-          <button
-            type="button"
-            onClick={() => closeSession("google")}
-            disabled={
-              !getSessionByEngine("google") ||
-              closingProfileKey === GOOGLE_PROFILE_KEY
-            }
-            className="inline-flex items-center gap-2 rounded-md border px-3 py-2 text-sm hover:bg-muted disabled:opacity-50"
-          >
-            {closingProfileKey === GOOGLE_PROFILE_KEY
-              ? "关闭中..."
-              : "关闭会话"}
+            关闭
           </button>
         </div>
-      </div>
+      ) : null}
 
-      <div className="rounded-lg border p-5 space-y-3">
-        <h3 className="text-sm font-medium">小红书设置窗口</h3>
-        <p className="text-xs text-muted-foreground">
-          打开独立 Chrome Profile 窗口，登录并配置小红书账号。
-        </p>
-        {(() => {
-          const session = getSessionByEngine("xiaohongshu");
-          return session ? (
-            <p className="text-xs text-muted-foreground">
-              会话运行中 | PID {session.pid} | 来源 {session.browser_source} |
-              调试端口 {session.remote_debugging_port}
-            </p>
-          ) : (
-            <p className="text-xs text-muted-foreground">当前无运行中的会话</p>
-          );
-        })()}
-        <div className="flex items-center gap-2">
-          <button
-            type="button"
-            onClick={() => openSearchSettingsWindow("xiaohongshu")}
-            disabled={openingEngine === "xiaohongshu"}
-            className="inline-flex items-center gap-2 rounded-md border px-3 py-2 text-sm hover:bg-muted disabled:opacity-50"
-          >
-            {openingEngine === "xiaohongshu" ? "打开中..." : "打开小红书设置"}
-            <ExternalLink className="h-3.5 w-3.5" />
-          </button>
-          <button
-            type="button"
-            onClick={() => closeSession("xiaohongshu")}
-            disabled={
-              !getSessionByEngine("xiaohongshu") ||
-              closingProfileKey === XIAOHONGSHU_PROFILE_KEY
-            }
-            className="inline-flex items-center gap-2 rounded-md border px-3 py-2 text-sm hover:bg-muted disabled:opacity-50"
-          >
-            {closingProfileKey === XIAOHONGSHU_PROFILE_KEY
-              ? "关闭中..."
-              : "关闭会话"}
-          </button>
-        </div>
-      </div>
+      <section className="relative overflow-hidden rounded-[30px] border border-emerald-200/70 bg-[linear-gradient(135deg,rgba(244,251,248,0.98)_0%,rgba(248,250,252,0.98)_45%,rgba(241,246,255,0.96)_100%)] shadow-sm shadow-slate-950/5">
+        <div className="pointer-events-none absolute -left-20 top-[-72px] h-56 w-56 rounded-full bg-emerald-200/30 blur-3xl" />
+        <div className="pointer-events-none absolute right-[-76px] top-[-24px] h-56 w-56 rounded-full bg-sky-200/28 blur-3xl" />
 
-      <div className="rounded-lg border p-5 space-y-3">
-        <h3 className="text-sm font-medium">浏览器后端编排策略</h3>
-        <p className="text-xs text-muted-foreground">
-          统一调度 Aster 协议适配、扩展桥接和 CDP
-          直连。支持按优先级执行并在失败时自动回退。
-        </p>
+        <div className="relative flex flex-col gap-6 p-6 lg:p-8">
+          <div className="grid gap-6 xl:grid-cols-[minmax(0,1.12fr)_minmax(360px,0.88fr)] xl:items-stretch">
+            <div className="max-w-3xl space-y-5">
+              <span className="inline-flex items-center rounded-full border border-emerald-200 bg-white/85 px-3 py-1 text-xs font-semibold tracking-[0.16em] text-emerald-700 shadow-sm">
+                CHROME RELAY
+              </span>
 
-        <div className="space-y-2">
-          <label
-            htmlFor="relay-test-engine"
-            className="text-xs text-muted-foreground"
-          >
-            后端测试默认引擎
-          </label>
-          <select
-            id="relay-test-engine"
-            value={testEngine}
-            onChange={(e) => setTestEngine(e.target.value as SearchEngine)}
-            className="h-9 rounded-md border bg-background px-3 text-sm outline-none focus:ring-2 focus:ring-primary/20"
-          >
-            <option value="google">Google</option>
-            <option value="xiaohongshu">小红书</option>
-          </select>
-        </div>
+              <div className="space-y-2">
+                <p className="text-[28px] font-semibold tracking-tight text-slate-900">
+                  在一个宽视图里统一管理浏览器 Profile、扩展桥接、后端回退和实时调试
+                </p>
+                <p className="max-w-2xl text-sm leading-7 text-slate-600">
+                  这里不再拆成几块旧式表单。你可以直接检查当前会话、调整后端优先级，
+                  一键拉起浏览器协助，并在底部实时调试面板里接管或观察浏览器状态。
+                </p>
+              </div>
 
-        <div className="space-y-2">
-          {[0, 1, 2].map((idx) => (
-            <div
-              className="flex items-center gap-2"
-              key={`backend-priority-${idx}`}
-            >
-              <label className="text-xs text-muted-foreground w-16">{`优先级 ${idx + 1}`}</label>
-              <select
-                value={
-                  draftBackendPolicy?.priority[idx] || BACKEND_OPTIONS[idx]
-                }
-                onChange={(e) =>
-                  updateBackendPriority(
-                    idx,
-                    e.target.value as BrowserBackendType,
-                  )
-                }
-                className="h-9 rounded-md border bg-background px-3 text-sm outline-none focus:ring-2 focus:ring-primary/20"
-              >
-                {BACKEND_OPTIONS.map((option) => (
-                  <option key={`backend-option-${option}`} value={option}>
-                    {BACKEND_LABELS[option]}
-                  </option>
-                ))}
-              </select>
+              <div className="flex flex-wrap items-center gap-2">
+                <StatusPill tone="neutral">
+                  当前目标 {selectedEngine.label}
+                </StatusPill>
+                <StatusPill tone={hasObserverConnected ? "success" : "warning"}>
+                  扩展 observer {runtimeSummary.observerCount}
+                </StatusPill>
+                <StatusPill
+                  tone={
+                    draftBackendPolicy?.auto_fallback ?? true
+                      ? "success"
+                      : "neutral"
+                  }
+                >
+                  自动回退 {(draftBackendPolicy?.auto_fallback ?? true) ? "开启" : "关闭"}
+                </StatusPill>
+              </div>
+            </div>
+
+            <div className="grid gap-3 sm:grid-cols-3 xl:grid-cols-1 xl:content-start">
+              <SummaryStat
+                label="运行 Profile"
+                value={runtimeSummary.runningProfiles.toString()}
+                description="当前已启动的独立浏览器 Profile 数量。"
+              />
+              <SummaryStat
+                label="CDP 可用"
+                value={runtimeSummary.cdpAliveProfiles.toString()}
+                description="可被实时调试和浏览器协助复用的 CDP 会话数量。"
+              />
+              <SummaryStat
+                label="桥接连接"
+                value={`${runtimeSummary.observerCount}/${runtimeSummary.controlCount}`}
+                description="observer / control 当前连接数，用于判断扩展桥接是否健康。"
+              />
+            </div>
+          </div>
+
+          <div className="flex flex-col gap-4 rounded-[24px] border border-white/90 bg-white/80 p-4 shadow-sm lg:flex-row lg:items-center lg:justify-between">
+            <div className="space-y-2">
+              <div className="flex flex-wrap items-center gap-2">
+                <label
+                  htmlFor="chrome-relay-engine"
+                  className="text-xs font-medium text-slate-500"
+                >
+                  当前目标
+                </label>
+                <select
+                  id="chrome-relay-engine"
+                  value={activeEngine}
+                  onChange={(event) =>
+                    setActiveEngine(event.target.value as SearchEngine)
+                  }
+                  className={cn(SELECT_CLASS_NAME, "h-10 min-w-[160px]")}
+                >
+                  {ENGINE_ORDER.map((engine) => (
+                    <option key={engine} value={engine}>
+                      {ENGINE_DEFINITIONS[engine].label}
+                    </option>
+                  ))}
+                </select>
+                <StatusPill tone="neutral">
+                  待处理命令 {runtimeSummary.pendingCommands}
+                </StatusPill>
+                <StatusPill tone={selectedSession ? "success" : "warning"}>
+                  {selectedSession ? "当前 Profile 已启动" : "当前 Profile 未启动"}
+                </StatusPill>
+              </div>
+              <p className="text-sm leading-6 text-slate-600">
+                一键协助会优先打开 {selectedEngine.label} 对应的独立 Profile，
+                并在可用时自动接入实时调试会话。
+              </p>
+            </div>
+
+            <div className="flex flex-wrap items-center gap-2">
               <button
                 type="button"
-                onClick={() =>
-                  void testBackendAction(
-                    (draftBackendPolicy?.priority[idx] ||
-                      BACKEND_OPTIONS[idx]) as BrowserBackendType,
-                  )
-                }
+                onClick={() => void handleLaunchBrowserAssist()}
+                disabled={launchingAssist}
+                className={PRIMARY_BUTTON_CLASS_NAME}
+              >
+                <ExternalLink className="h-4 w-4" />
+                {launchingAssist ? "启动中..." : "一键启动浏览器协助"}
+              </button>
+              <button
+                type="button"
+                onClick={() => void handleOpenDebuggerWindow()}
+                disabled={openingDebugger}
+                className={SECONDARY_BUTTON_CLASS_NAME}
+              >
+                <Bug className="h-4 w-4" />
+                {openingDebugger ? "打开中..." : "打开独立调试窗口"}
+              </button>
+              <button
+                type="button"
+                onClick={() => void refreshAll(false)}
                 disabled={
-                  testingBackend ===
-                  (draftBackendPolicy?.priority[idx] || BACKEND_OPTIONS[idx])
+                  refreshingSessions || refreshingBridge || refreshingBackends
                 }
-                className="inline-flex items-center gap-1 rounded-md border px-2.5 py-1.5 text-xs hover:bg-muted disabled:opacity-50"
+                className={SECONDARY_BUTTON_CLASS_NAME}
               >
-                {testingBackend ===
-                (draftBackendPolicy?.priority[idx] || BACKEND_OPTIONS[idx])
-                  ? "测试中..."
-                  : "测试"}
+                <RefreshCw
+                  className={cn(
+                    "h-4 w-4",
+                    refreshingSessions || refreshingBridge || refreshingBackends
+                      ? "animate-spin"
+                      : "",
+                  )}
+                />
+                刷新状态
               </button>
             </div>
-          ))}
+          </div>
         </div>
+      </section>
 
-        <label className="flex items-center gap-2 text-sm">
-          <input
-            type="checkbox"
-            checked={draftBackendPolicy?.auto_fallback ?? true}
-            onChange={(e) =>
-              setDraftBackendPolicy((prev) =>
-                prev
-                  ? {
-                      ...prev,
-                      auto_fallback: e.target.checked,
-                    }
-                  : prev,
-              )
+      <div className="grid gap-6 xl:grid-cols-[minmax(0,1.16fr)_minmax(320px,0.84fr)]">
+        <div className="space-y-6">
+          <SurfacePanel
+            icon={Globe}
+            title="Profile 会话"
+            description="为搜索和桥接准备独立浏览器 Profile。每个会话都可以单独打开、关闭，并观察当前调试端口。"
+            aside={
+              <StatusPill tone={selectedSession ? "success" : "neutral"}>
+                当前查看 {selectedEngine.label}
+              </StatusPill>
             }
-          />
-          自动回退到下一后端
-        </label>
-
-        <div className="rounded-md border bg-muted/30 p-3 space-y-1 text-xs">
-          {(backendsStatus?.backends || []).map((item) => (
-            <p key={`backend-status-${item.backend}`}>
-              {BACKEND_LABELS[item.backend]}:{" "}
-              {item.available ? "可用" : "不可用"}
-              {item.reason ? ` | ${item.reason}` : ""}
-            </p>
-          ))}
-          <p>
-            Aster native-host:{" "}
-            {backendsStatus?.aster_native_host_configured ? "已配置" : "未配置"}
-            {" | "}
-            平台支持:{" "}
-            {backendsStatus?.aster_native_host_supported ? "是" : "否"}
-          </p>
-        </div>
-
-        <div className="flex items-center gap-2 flex-wrap">
-          <button
-            type="button"
-            onClick={() => void saveBackendPolicy()}
-            disabled={!hasBackendPolicyChanges || savingBackendPolicy}
-            className="inline-flex items-center gap-2 rounded-md border px-3 py-2 text-sm hover:bg-muted disabled:opacity-50"
           >
-            {savingBackendPolicy ? "保存中..." : "保存后端策略"}
-          </button>
-          <button
-            type="button"
-            onClick={() => void refreshBackendStatus(false)}
-            disabled={refreshingBackends}
-            className="inline-flex items-center gap-2 rounded-md border px-3 py-2 text-sm hover:bg-muted disabled:opacity-50"
-          >
-            <RefreshCw
-              className={`h-3.5 w-3.5 ${refreshingBackends ? "animate-spin" : ""}`}
-            />
-            刷新后端状态
-          </button>
-        </div>
-      </div>
+            <div className="grid gap-4 lg:grid-cols-2">
+              {ENGINE_ORDER.map((engine) => {
+                const target = ENGINE_DEFINITIONS[engine];
+                const session = sessionsByProfile.get(target.profileKey) ?? null;
 
-      <div className="rounded-lg border p-5 space-y-3">
-        <h3 className="text-sm font-medium">Chrome 扩展桥接</h3>
-        <p className="text-xs text-muted-foreground">
-          该能力用于让浏览器扩展回传页面信息并接收控制命令。请在对应 Chrome
-          Profile 安装扩展并连接 observer 地址。
-        </p>
-        <p className="text-xs text-muted-foreground">
-          服务状态: {bridgeEndpoint?.server_running ? "运行中" : "未运行"} |
-          observer 连接: {bridgeStatus?.observer_count ?? 0} | control 连接:{" "}
-          {bridgeStatus?.control_count ?? 0} | 待处理命令:{" "}
-          {bridgeStatus?.pending_command_count ?? 0}
-        </p>
-        {bridgeEndpoint && (
-          <div className="rounded-md border bg-muted/30 p-3 space-y-1 text-xs">
-            <p className="break-all">
-              Observer WS: {bridgeEndpoint.observer_ws_url}
-            </p>
-            <p className="break-all">
-              Control WS: {bridgeEndpoint.control_ws_url}
-            </p>
-            <p className="break-all">Bridge Key: {bridgeEndpoint.bridge_key}</p>
-            <div className="pt-2 flex items-center gap-2">
-              <button
-                type="button"
-                onClick={() => {
-                  const config = {
-                    serverUrl: `ws://${bridgeEndpoint.host}:${bridgeEndpoint.port}`,
-                    bridgeKey: bridgeEndpoint.bridge_key,
-                    profileKey: "search_google",
-                  };
-                  navigator.clipboard.writeText(
-                    JSON.stringify(config, null, 2),
-                  );
-                  setMessage({
-                    type: "success",
-                    text: "Google 配置已复制到剪贴板",
-                  });
-                  setTimeout(() => setMessage(null), 2000);
-                }}
-                className="inline-flex items-center gap-1 rounded-md border px-2.5 py-1.5 text-xs hover:bg-muted"
-              >
-                复制 Google 配置
-              </button>
-              <button
-                type="button"
-                onClick={() => {
-                  const config = {
-                    serverUrl: `ws://${bridgeEndpoint.host}:${bridgeEndpoint.port}`,
-                    bridgeKey: bridgeEndpoint.bridge_key,
-                    profileKey: "search_xiaohongshu",
-                  };
-                  navigator.clipboard.writeText(
-                    JSON.stringify(config, null, 2),
-                  );
-                  setMessage({
-                    type: "success",
-                    text: "小红书配置已复制到剪贴板",
-                  });
-                  setTimeout(() => setMessage(null), 2000);
-                }}
-                className="inline-flex items-center gap-1 rounded-md border px-2.5 py-1.5 text-xs hover:bg-muted"
-              >
-                复制小红书配置
-              </button>
+                return (
+                  <div
+                    key={engine}
+                    className="flex h-full flex-col justify-between gap-5 rounded-[24px] border border-slate-200/80 bg-[linear-gradient(135deg,rgba(255,255,255,0.96)_0%,rgba(248,250,252,0.92)_100%)] p-5"
+                  >
+                    <div className="space-y-4">
+                      <div className="flex flex-wrap items-start justify-between gap-3">
+                        <div className="space-y-1">
+                          <p className="text-base font-semibold text-slate-900">
+                            {target.label}
+                          </p>
+                          <p className="text-sm leading-6 text-slate-500">
+                            {target.description}
+                          </p>
+                        </div>
+                        <StatusPill tone={session ? "success" : "warning"}>
+                          {session ? "会话运行中" : "尚未启动"}
+                        </StatusPill>
+                      </div>
+
+                      {session ? (
+                        <div className="grid gap-3 text-sm text-slate-600 sm:grid-cols-2">
+                          <div className="rounded-[18px] border border-slate-200/80 bg-white/90 p-3">
+                            <p className="text-xs font-medium text-slate-500">
+                              进程 / 来源
+                            </p>
+                            <p className="mt-2 font-medium text-slate-900">
+                              PID {session.pid}
+                            </p>
+                            <p className="mt-1 text-xs text-slate-500">
+                              {session.browser_source}
+                            </p>
+                          </div>
+                          <div className="rounded-[18px] border border-slate-200/80 bg-white/90 p-3">
+                            <p className="text-xs font-medium text-slate-500">
+                              调试端口
+                            </p>
+                            <p className="mt-2 font-medium text-slate-900">
+                              {session.remote_debugging_port}
+                            </p>
+                            <p className="mt-1 text-xs text-slate-500">
+                              Profile {session.profile_key}
+                            </p>
+                          </div>
+                          <div className="rounded-[18px] border border-slate-200/80 bg-white/90 p-3 sm:col-span-2">
+                            <p className="text-xs font-medium text-slate-500">
+                              最近页面
+                            </p>
+                            <p className="mt-2 break-all text-sm text-slate-700">
+                              {session.last_url}
+                            </p>
+                          </div>
+                        </div>
+                      ) : (
+                        <div className="rounded-[20px] border border-dashed border-slate-200 bg-slate-50/70 p-4 text-sm leading-6 text-slate-500">
+                          当前还没有运行中的独立会话。先打开设置窗口，或直接使用上方的一键浏览器协助。
+                        </div>
+                      )}
+                    </div>
+
+                    <div className="flex flex-wrap items-center gap-2">
+                      <button
+                        type="button"
+                        onClick={() => void openSearchSettingsWindow(engine)}
+                        disabled={openingEngine === engine}
+                        className={SECONDARY_BUTTON_CLASS_NAME}
+                      >
+                        <ExternalLink className="h-4 w-4" />
+                        {openingEngine === engine
+                          ? "打开中..."
+                          : target.settingsButtonLabel}
+                      </button>
+                      <button
+                        type="button"
+                        onClick={() => void closeSession(engine)}
+                        disabled={
+                          !session || closingProfileKey === target.profileKey
+                        }
+                        className={SECONDARY_BUTTON_CLASS_NAME}
+                      >
+                        {closingProfileKey === target.profileKey
+                          ? "关闭中..."
+                          : "关闭会话"}
+                      </button>
+                    </div>
+                  </div>
+                );
+              })}
             </div>
-          </div>
-        )}
-        <div className="text-xs text-muted-foreground space-y-1">
-          <p>
-            Google observer:{" "}
-            {(() => {
-              const observer = getObserverByEngine("google");
-              return observer
-                ? `${observer.client_id} | 最近页面: ${observer.last_page_info?.title || "无"}`
-                : "未连接";
-            })()}
-          </p>
-          <p>
-            小红书 observer:{" "}
-            {(() => {
-              const observer = getObserverByEngine("xiaohongshu");
-              return observer
-                ? `${observer.client_id} | 最近页面: ${observer.last_page_info?.title || "无"}`
-                : "未连接";
-            })()}
-          </p>
+          </SurfacePanel>
+
+          <SurfacePanel
+            icon={Layers3}
+            title="浏览器后端策略"
+            description="统一编排 Aster 协议适配、扩展桥接与 CDP 直连，并决定失败时是否自动回退。"
+          >
+            <div className="grid gap-5 lg:grid-cols-[minmax(0,1fr)_320px]">
+              <div className="space-y-4">
+                <div className="rounded-[24px] border border-slate-200/80 bg-slate-50/70 p-4">
+                  <div className="grid gap-4 sm:grid-cols-[minmax(0,1fr)_auto] sm:items-center">
+                    <div className="space-y-1">
+                      <p className="text-sm font-semibold text-slate-900">
+                        默认测试目标
+                      </p>
+                      <p className="text-sm leading-6 text-slate-500">
+                        该目标会用于后端测试和一键浏览器协助，减少多处切换。
+                      </p>
+                    </div>
+                    <select
+                      value={activeEngine}
+                      onChange={(event) =>
+                        setActiveEngine(event.target.value as SearchEngine)
+                      }
+                      className={cn(SELECT_CLASS_NAME, "min-w-[180px]")}
+                    >
+                      {ENGINE_ORDER.map((engine) => (
+                        <option key={`relay-engine-${engine}`} value={engine}>
+                          {ENGINE_DEFINITIONS[engine].label}
+                        </option>
+                      ))}
+                    </select>
+                  </div>
+
+                  <div className="mt-4 flex flex-col gap-3 rounded-[20px] border border-slate-200/80 bg-white/85 p-4 sm:flex-row sm:items-start sm:justify-between">
+                    <div className="space-y-1">
+                      <p className="text-sm font-semibold text-slate-900">
+                        自动回退
+                      </p>
+                      <p className="text-sm leading-6 text-slate-500">
+                        当前后端失败时，自动切换到下一个优先级继续执行。
+                      </p>
+                    </div>
+                    <Switch
+                      aria-label="自动回退到下一后端"
+                      checked={draftBackendPolicy?.auto_fallback ?? true}
+                      onCheckedChange={(checked) =>
+                        setDraftBackendPolicy((prev) =>
+                          prev
+                            ? {
+                                ...prev,
+                                auto_fallback: checked,
+                              }
+                            : prev,
+                        )
+                      }
+                    />
+                  </div>
+                </div>
+
+                <div className="space-y-3">
+                  {[0, 1, 2].map((index) => {
+                    const selectedBackend =
+                      draftBackendPolicy?.priority[index] ||
+                      BACKEND_OPTIONS[index];
+                    return (
+                      <div
+                        key={`backend-priority-${index}`}
+                        className="rounded-[22px] border border-slate-200/80 bg-white p-4"
+                      >
+                        <div className="flex flex-col gap-4 lg:flex-row lg:items-center lg:justify-between">
+                          <div className="space-y-2">
+                            <p className="text-sm font-semibold text-slate-900">
+                              {`优先级 ${index + 1}`}
+                            </p>
+                            <p className="text-sm leading-6 text-slate-500">
+                              {BACKEND_DESCRIPTIONS[selectedBackend]}
+                            </p>
+                          </div>
+
+                          <div className="flex flex-col gap-2 sm:flex-row sm:items-center">
+                            <select
+                              value={selectedBackend}
+                              onChange={(event) =>
+                                updateBackendPriority(
+                                  index,
+                                  event.target.value as BrowserBackendType,
+                                )
+                              }
+                              className={cn(SELECT_CLASS_NAME, "min-w-[220px]")}
+                            >
+                              {BACKEND_OPTIONS.map((option) => (
+                                <option
+                                  key={`backend-option-${index}-${option}`}
+                                  value={option}
+                                >
+                                  {BACKEND_LABELS[option]}
+                                </option>
+                              ))}
+                            </select>
+                            <button
+                              type="button"
+                              onClick={() => void testBackendAction(selectedBackend)}
+                              disabled={testingBackend === selectedBackend}
+                              className={SECONDARY_BUTTON_CLASS_NAME}
+                            >
+                              {testingBackend === selectedBackend
+                                ? "测试中..."
+                                : "测试"}
+                            </button>
+                          </div>
+                        </div>
+                      </div>
+                    );
+                  })}
+                </div>
+              </div>
+
+              <div className="rounded-[24px] border border-slate-200/80 bg-slate-50/70 p-4">
+                <div className="space-y-1">
+                  <p className="text-sm font-semibold text-slate-900">
+                    当前可用性
+                  </p>
+                  <p className="text-sm leading-6 text-slate-500">
+                    后端状态来自运行时即时快照，用于判断当前是否具备可执行链路。
+                  </p>
+                </div>
+
+                <div className="mt-4 space-y-3">
+                  {backendStatusList.map((item) => (
+                    <div
+                      key={`backend-status-${item.backend}`}
+                      className="rounded-[20px] border border-slate-200/80 bg-white/90 p-4"
+                    >
+                      <div className="flex flex-wrap items-center justify-between gap-3">
+                        <p className="text-sm font-semibold text-slate-900">
+                          {BACKEND_LABELS[item.backend]}
+                        </p>
+                        <StatusPill tone={resolveBackendTone(item)}>
+                          {item.available ? "可用" : item.reason || "待检查"}
+                        </StatusPill>
+                      </div>
+                      <p className="mt-2 text-sm leading-6 text-slate-500">
+                        {item.reason || BACKEND_DESCRIPTIONS[item.backend]}
+                      </p>
+                      <p className="mt-2 text-xs leading-5 text-slate-500">
+                        能力:{" "}
+                        {item.capabilities.length > 0
+                          ? item.capabilities.join(" / ")
+                          : "等待运行时返回"}
+                      </p>
+                    </div>
+                  ))}
+                </div>
+
+                <div className="mt-4 rounded-[20px] border border-slate-200/80 bg-white/90 p-4 text-sm leading-6 text-slate-600">
+                  <p>
+                    Aster native-host:{" "}
+                    {backendsStatus?.aster_native_host_configured
+                      ? "已配置"
+                      : "未配置"}
+                  </p>
+                  <p>
+                    平台支持:{" "}
+                    {backendsStatus?.aster_native_host_supported ? "是" : "否"}
+                  </p>
+                </div>
+
+                <div className="mt-4 flex flex-wrap items-center gap-2">
+                  <button
+                    type="button"
+                    onClick={() => void saveBackendPolicy()}
+                    disabled={!hasBackendPolicyChanges || savingBackendPolicy}
+                    className={PRIMARY_BUTTON_CLASS_NAME}
+                  >
+                    {savingBackendPolicy ? "保存中..." : "保存后端策略"}
+                  </button>
+                  <button
+                    type="button"
+                    onClick={() => void refreshBackendStatus(false)}
+                    disabled={refreshingBackends}
+                    className={SECONDARY_BUTTON_CLASS_NAME}
+                  >
+                    <RefreshCw
+                      className={cn(
+                        "h-4 w-4",
+                        refreshingBackends ? "animate-spin" : "",
+                      )}
+                    />
+                    刷新后端状态
+                  </button>
+                </div>
+              </div>
+            </div>
+          </SurfacePanel>
         </div>
-        {!hasObserverConnected && (
-          <div className="rounded-md border border-amber-400/40 bg-amber-50 px-3 py-2 text-xs text-amber-800">
-            未检测到扩展 observer 连接。请在对应 Chrome Profile 安装并打开
-            Proxycast Browser Bridge 扩展，在扩展弹窗填写 Observer WS 与 Bridge
-            Key 后再测试。
-          </div>
-        )}
-        <div className="flex items-center gap-2 flex-wrap">
-          <button
-            type="button"
-            onClick={() => testBridgeCommand("google")}
-            disabled={testingBridgeEngine === "google"}
-            className="inline-flex items-center gap-2 rounded-md border px-3 py-2 text-sm hover:bg-muted disabled:opacity-50"
+
+        <div className="space-y-6">
+          <SurfacePanel
+            icon={Sparkles}
+            title="Chrome 扩展桥接"
+            description="该桥接负责让浏览器扩展回传页面信息并接收控制命令，适合在独立 Profile 中补充观察与辅助执行。"
+            aside={
+              <StatusPill
+                tone={bridgeEndpoint?.server_running ? "success" : "warning"}
+              >
+                {bridgeEndpoint?.server_running ? "桥接服务运行中" : "桥接服务未运行"}
+              </StatusPill>
+            }
           >
-            {testingBridgeEngine === "google"
-              ? "测试中..."
-              : "测试 Google 扩展"}
-          </button>
-          <button
-            type="button"
-            onClick={() => testBridgeCommand("xiaohongshu")}
-            disabled={testingBridgeEngine === "xiaohongshu"}
-            className="inline-flex items-center gap-2 rounded-md border px-3 py-2 text-sm hover:bg-muted disabled:opacity-50"
+            <div className="space-y-4">
+              <div className="grid gap-3 sm:grid-cols-2">
+                <div className="rounded-[22px] border border-slate-200/80 bg-slate-50/70 p-4">
+                  <p className="text-xs font-medium tracking-[0.12em] text-slate-500">
+                    OBSERVER
+                  </p>
+                  <p className="mt-3 text-3xl font-semibold tracking-tight text-slate-900">
+                    {runtimeSummary.observerCount}
+                  </p>
+                  <p className="mt-2 text-xs leading-5 text-slate-500">
+                    扩展侧页面观察连接数，用于回传页面信息和心跳。
+                  </p>
+                </div>
+                <div className="rounded-[22px] border border-slate-200/80 bg-slate-50/70 p-4">
+                  <p className="text-xs font-medium tracking-[0.12em] text-slate-500">
+                    CONTROL
+                  </p>
+                  <p className="mt-3 text-3xl font-semibold tracking-tight text-slate-900">
+                    {runtimeSummary.controlCount}
+                  </p>
+                  <p className="mt-2 text-xs leading-5 text-slate-500">
+                    控制通道连接数，用于命令转发与桥接调试。
+                  </p>
+                </div>
+              </div>
+
+              <div className="rounded-[24px] border border-slate-200/80 bg-slate-50/70 p-4">
+                <div className="space-y-1">
+                  <p className="text-sm font-semibold text-slate-900">
+                    扩展接入信息
+                  </p>
+                  <p className="text-sm leading-6 text-slate-500">
+                    在目标 Chrome Profile 的扩展弹窗里填写以下 WebSocket 端点与 Bridge Key。
+                  </p>
+                </div>
+
+                {bridgeEndpoint ? (
+                  <div className="mt-4 rounded-[20px] border border-slate-200/80 bg-white/90 p-4">
+                    <div className="space-y-2 text-sm text-slate-600">
+                      <p className="break-all">
+                        Observer WS: {bridgeEndpoint.observer_ws_url}
+                      </p>
+                      <p className="break-all">
+                        Control WS: {bridgeEndpoint.control_ws_url}
+                      </p>
+                      <p className="break-all">
+                        Bridge Key: {bridgeEndpoint.bridge_key}
+                      </p>
+                    </div>
+
+                    <div className="mt-4 flex flex-wrap items-center gap-2">
+                      {ENGINE_ORDER.map((engine) => (
+                        <button
+                          key={`copy-config-${engine}`}
+                          type="button"
+                          onClick={() => void copyBridgeConfig(engine)}
+                          className={SECONDARY_BUTTON_CLASS_NAME}
+                        >
+                          <Copy className="h-4 w-4" />
+                          {`复制 ${ENGINE_DEFINITIONS[engine].label} 配置`}
+                        </button>
+                      ))}
+                    </div>
+                  </div>
+                ) : (
+                  <div className="mt-4 rounded-[20px] border border-dashed border-slate-200 bg-white/70 p-4 text-sm leading-6 text-slate-500">
+                    尚未获取到桥接端点信息，请先刷新状态或确认后端服务已经启动。
+                  </div>
+                )}
+              </div>
+
+              <div className="space-y-3">
+                {ENGINE_ORDER.map((engine) => {
+                  const observer =
+                    observersByProfile.get(ENGINE_DEFINITIONS[engine].profileKey) ??
+                    null;
+                  return (
+                    <div
+                      key={`observer-status-${engine}`}
+                      className="rounded-[20px] border border-slate-200/80 bg-white p-4"
+                    >
+                      <div className="flex flex-wrap items-center justify-between gap-3">
+                        <p className="text-sm font-semibold text-slate-900">
+                          {ENGINE_DEFINITIONS[engine].label} observer
+                        </p>
+                        <StatusPill tone={observer ? "success" : "warning"}>
+                          {observer ? observer.client_id : "未连接"}
+                        </StatusPill>
+                      </div>
+                      <p className="mt-2 text-sm leading-6 text-slate-500">
+                        {observer?.last_page_info?.title
+                          ? `最近页面：${observer.last_page_info.title}`
+                          : "尚未收到最近页面信息"}
+                      </p>
+                    </div>
+                  );
+                })}
+              </div>
+
+              {!hasObserverConnected ? (
+                <div className="rounded-[20px] border border-amber-200 bg-amber-50/90 px-4 py-3 text-sm leading-6 text-amber-800">
+                  未检测到扩展 observer 连接。请在对应 Chrome Profile 安装并打开
+                  Proxycast Browser Bridge 扩展，然后填入上面的 Observer WS 与
+                  Bridge Key。
+                </div>
+              ) : null}
+
+              <div className="flex flex-wrap items-center gap-2">
+                {ENGINE_ORDER.map((engine) => (
+                  <button
+                    key={`bridge-test-${engine}`}
+                    type="button"
+                    onClick={() => void testBridgeCommand(engine)}
+                    disabled={testingBridgeEngine === engine}
+                    className={SECONDARY_BUTTON_CLASS_NAME}
+                  >
+                    {testingBridgeEngine === engine
+                      ? "测试中..."
+                      : `测试 ${ENGINE_DEFINITIONS[engine].label} 扩展`}
+                  </button>
+                ))}
+                <button
+                  type="button"
+                  onClick={() => void refreshBridgeStatus(false)}
+                  disabled={refreshingBridge}
+                  className={SECONDARY_BUTTON_CLASS_NAME}
+                >
+                  <RefreshCw
+                    className={cn(
+                      "h-4 w-4",
+                      refreshingBridge ? "animate-spin" : "",
+                    )}
+                  />
+                  刷新扩展状态
+                </button>
+              </div>
+            </div>
+          </SurfacePanel>
+
+          <SurfacePanel
+            icon={Sparkles}
+            title="使用建议"
+            description="按这个顺序处理，页面状态会更稳定，也更容易复用到浏览器协助和实时调试。"
           >
-            {testingBridgeEngine === "xiaohongshu"
-              ? "测试中..."
-              : "测试小红书扩展"}
-          </button>
-          <button
-            type="button"
-            onClick={() => refreshBridgeStatus(false)}
-            disabled={refreshingBridge}
-            className="inline-flex items-center gap-2 rounded-md border px-3 py-2 text-sm hover:bg-muted disabled:opacity-50"
-          >
-            <RefreshCw
-              className={`h-3.5 w-3.5 ${refreshingBridge ? "animate-spin" : ""}`}
-            />
-            刷新扩展状态
-          </button>
+            <div className="space-y-3">
+              <div className="rounded-[22px] border border-slate-200/80 bg-slate-50/70 p-4">
+                <p className="text-sm font-semibold text-slate-900">
+                  1. 先准备独立 Profile
+                </p>
+                <p className="mt-2 text-sm leading-6 text-slate-500">
+                  先为 Google 或小红书打开独立设置窗口，确认账号、语言与内容偏好已经稳定。
+                </p>
+              </div>
+              <div className="rounded-[22px] border border-slate-200/80 bg-slate-50/70 p-4">
+                <p className="text-sm font-semibold text-slate-900">
+                  2. 再接通扩展桥接
+                </p>
+                <p className="mt-2 text-sm leading-6 text-slate-500">
+                  observer 连上以后，扩展才会持续回传页面信息。这样排查桥接链路会更直观。
+                </p>
+              </div>
+              <div className="rounded-[22px] border border-slate-200/80 bg-slate-50/70 p-4">
+                <p className="text-sm font-semibold text-slate-900">
+                  3. 需要人工介入时再开调试窗口
+                </p>
+                <p className="mt-2 text-sm leading-6 text-slate-500">
+                  顶部的独立调试窗口和底部实时调试面板都能复用当前目标 Profile，
+                  适合需要观察页面变化或临时接管输入的时刻。
+                </p>
+              </div>
+            </div>
+          </SurfacePanel>
         </div>
       </div>
+
+      <SurfacePanel
+        icon={Bug}
+        title="浏览器实时调试"
+        description="底部直接复用浏览器实时会话面板。适合观察事件流、查看画面并在必要时接管当前页面。"
+      >
+        <BrowserRuntimeDebugPanel
+          sessions={sessions}
+          onMessage={(nextMessage) => setMessage(nextMessage)}
+          showStandaloneWindowButton={false}
+          initialProfileKey={selectedEngine.profileKey}
+          initialSessionId={runtimeSessionId ?? undefined}
+        />
+      </SurfacePanel>
     </div>
   );
 }
diff --git a/src/components/settings-v2/system/developer/index.test.tsx b/src/components/settings-v2/system/developer/index.test.tsx
new file mode 100644
index 000000000..a3b7e6c79
--- /dev/null
+++ b/src/components/settings-v2/system/developer/index.test.tsx
@@ -0,0 +1,277 @@
+import { act } from "react";
+import { createRoot, type Root } from "react-dom/client";
+import { afterEach, beforeEach, describe, expect, it, vi } from "vitest";
+
+const { mockUseComponentDebug } = vi.hoisted(() => ({
+  mockUseComponentDebug: vi.fn(),
+}));
+
+const { mockGetConfig } = vi.hoisted(() => ({
+  mockGetConfig: vi.fn(),
+}));
+
+const { mockGetLogs, mockGetPersistedLogsTail } = vi.hoisted(() => ({
+  mockGetLogs: vi.fn(),
+  mockGetPersistedLogsTail: vi.fn(),
+}));
+
+const {
+  mockGetServerDiagnostics,
+  mockGetLogStorageDiagnostics,
+  mockGetWindowsStartupDiagnostics,
+} = vi.hoisted(() => ({
+  mockGetServerDiagnostics: vi.fn(),
+  mockGetLogStorageDiagnostics: vi.fn(),
+  mockGetWindowsStartupDiagnostics: vi.fn(),
+}));
+
+const {
+  mockBuildCrashDiagnosticPayload,
+  mockClearCrashDiagnosticHistory,
+  mockCollectRuntimeSnapshotForDiagnostic,
+  mockCollectThemeWorkbenchDocumentStateForDiagnostic,
+  mockCopyCrashDiagnosticJsonToClipboard,
+  mockCopyCrashDiagnosticToClipboard,
+  mockExportCrashDiagnosticToJson,
+  mockIsClipboardPermissionDeniedError,
+  mockNormalizeCrashReportingConfig,
+  mockOpenCrashDiagnosticDownloadDirectory,
+} = vi.hoisted(() => ({
+  mockBuildCrashDiagnosticPayload: vi.fn(),
+  mockClearCrashDiagnosticHistory: vi.fn(),
+  mockCollectRuntimeSnapshotForDiagnostic: vi.fn(),
+  mockCollectThemeWorkbenchDocumentStateForDiagnostic: vi.fn(),
+  mockCopyCrashDiagnosticJsonToClipboard: vi.fn(),
+  mockCopyCrashDiagnosticToClipboard: vi.fn(),
+  mockExportCrashDiagnosticToJson: vi.fn(),
+  mockIsClipboardPermissionDeniedError: vi.fn(),
+  mockNormalizeCrashReportingConfig: vi.fn(),
+  mockOpenCrashDiagnosticDownloadDirectory: vi.fn(),
+}));
+
+vi.mock("@/contexts/ComponentDebugContext", () => ({
+  useComponentDebug: mockUseComponentDebug,
+}));
+
+vi.mock("@/lib/api/appConfig", () => ({
+  getConfig: mockGetConfig,
+}));
+
+vi.mock("@/lib/api/logs", () => ({
+  getLogs: mockGetLogs,
+  getPersistedLogsTail: mockGetPersistedLogsTail,
+}));
+
+vi.mock("@/lib/api/serverRuntime", () => ({
+  getServerDiagnostics: mockGetServerDiagnostics,
+  getLogStorageDiagnostics: mockGetLogStorageDiagnostics,
+  getWindowsStartupDiagnostics: mockGetWindowsStartupDiagnostics,
+}));
+
+vi.mock("@/lib/crashDiagnostic", () => ({
+  buildCrashDiagnosticPayload: mockBuildCrashDiagnosticPayload,
+  clearCrashDiagnosticHistory: mockClearCrashDiagnosticHistory,
+  collectRuntimeSnapshotForDiagnostic: mockCollectRuntimeSnapshotForDiagnostic,
+  collectThemeWorkbenchDocumentStateForDiagnostic:
+    mockCollectThemeWorkbenchDocumentStateForDiagnostic,
+  CLEAR_CRASH_DIAGNOSTIC_HISTORY_CONFIRM_TEXT: "确认清空诊断信息？",
+  copyCrashDiagnosticJsonToClipboard: mockCopyCrashDiagnosticJsonToClipboard,
+  copyCrashDiagnosticToClipboard: mockCopyCrashDiagnosticToClipboard,
+  exportCrashDiagnosticToJson: mockExportCrashDiagnosticToJson,
+  isClipboardPermissionDeniedError: mockIsClipboardPermissionDeniedError,
+  normalizeCrashReportingConfig: mockNormalizeCrashReportingConfig,
+  openCrashDiagnosticDownloadDirectory: mockOpenCrashDiagnosticDownloadDirectory,
+}));
+
+vi.mock("../shared/ClipboardPermissionGuideCard", () => ({
+  ClipboardPermissionGuideCard: () => <div>剪贴板权限卡片占位</div>,
+}));
+
+vi.mock("../shared/WorkspaceRepairHistoryCard", () => ({
+  WorkspaceRepairHistoryCard: () => <div>自愈记录卡片占位</div>,
+}));
+
+import { DeveloperSettings } from ".";
+
+interface Mounted {
+  container: HTMLDivElement;
+  root: Root;
+}
+
+const mounted: Mounted[] = [];
+
+function renderComponent(): HTMLDivElement {
+  const container = document.createElement("div");
+  document.body.appendChild(container);
+  const root = createRoot(container);
+
+  act(() => {
+    root.render(<DeveloperSettings />);
+  });
+
+  mounted.push({ container, root });
+  return container;
+}
+
+async function flushEffects() {
+  await act(async () => {
+    await Promise.resolve();
+  });
+}
+
+function findButton(container: HTMLElement, text: string): HTMLButtonElement {
+  const button = Array.from(container.querySelectorAll("button")).find((item) =>
+    item.textContent?.includes(text),
+  );
+  if (!button) {
+    throw new Error(`未找到按钮: ${text}`);
+  }
+  return button as HTMLButtonElement;
+}
+
+function findSwitch(container: HTMLElement, ariaLabel: string): HTMLButtonElement {
+  const button = container.querySelector<HTMLButtonElement>(
+    `button[aria-label="${ariaLabel}"]`,
+  );
+  if (!button) {
+    throw new Error(`未找到开关: ${ariaLabel}`);
+  }
+  return button;
+}
+
+async function clickButton(button: HTMLButtonElement) {
+  await act(async () => {
+    button.dispatchEvent(new MouseEvent("click", { bubbles: true }));
+    await flushEffects();
+  });
+}
+
+beforeEach(() => {
+  (
+    globalThis as typeof globalThis & {
+      IS_REACT_ACT_ENVIRONMENT?: boolean;
+    }
+  ).IS_REACT_ACT_ENVIRONMENT = true;
+
+  vi.clearAllMocks();
+
+  mockUseComponentDebug.mockReturnValue({
+    enabled: false,
+    setEnabled: vi.fn(),
+    componentInfo: null,
+    showComponentInfo: vi.fn(),
+    hideComponentInfo: vi.fn(),
+  });
+
+  mockGetConfig.mockResolvedValue({
+    crash_reporting: {
+      enabled: true,
+      dsn: null,
+      environment: "production",
+      sample_rate: 1,
+      send_pii: false,
+    },
+  });
+  mockGetLogs.mockResolvedValue([{ level: "error", message: "boom" }]);
+  mockGetPersistedLogsTail.mockResolvedValue([{ level: "info", message: "ok" }]);
+  mockGetServerDiagnostics.mockResolvedValue({ ok: true });
+  mockGetLogStorageDiagnostics.mockResolvedValue({ ok: true });
+  mockGetWindowsStartupDiagnostics.mockResolvedValue({ ok: true });
+
+  mockCollectRuntimeSnapshotForDiagnostic.mockResolvedValue({
+    runtimeSnapshot: { summary: "runtime" },
+    collectionNotes: ["note-a"],
+  });
+  mockCollectThemeWorkbenchDocumentStateForDiagnostic.mockResolvedValue({
+    documentId: "doc-1",
+  });
+  mockNormalizeCrashReportingConfig.mockImplementation((config) => config);
+  mockBuildCrashDiagnosticPayload.mockReturnValue({ payload: "diagnostic" });
+  mockCopyCrashDiagnosticToClipboard.mockResolvedValue(undefined);
+  mockCopyCrashDiagnosticJsonToClipboard.mockResolvedValue(undefined);
+  mockExportCrashDiagnosticToJson.mockReturnValue({
+    fileName: "diagnostic.json",
+    locationHint: "/tmp",
+  });
+  mockOpenCrashDiagnosticDownloadDirectory.mockResolvedValue({
+    openedPath: "/tmp",
+  });
+  mockClearCrashDiagnosticHistory.mockResolvedValue(undefined);
+  mockIsClipboardPermissionDeniedError.mockReturnValue(false);
+});
+
+afterEach(() => {
+  while (mounted.length > 0) {
+    const target = mounted.pop();
+    if (!target) {
+      break;
+    }
+
+    act(() => {
+      target.root.unmount();
+    });
+    target.container.remove();
+  }
+
+  vi.clearAllMocks();
+});
+
+describe("DeveloperSettings", () => {
+  it("应渲染新的开发者工作台与主要分区", () => {
+    const container = renderComponent();
+
+    const text = container.textContent ?? "";
+    expect(text).toContain("DEVELOPER DESK");
+    expect(text).toContain("组件视图调试");
+    expect(text).toContain("崩溃诊断日志（开发协作）");
+    expect(text).toContain("诊断建议");
+    expect(text).toContain("动作清单");
+    expect(text).toContain("自愈记录卡片占位");
+  });
+
+  it("切换组件调试开关后应调用 setEnabled", async () => {
+    const setEnabled = vi.fn();
+    mockUseComponentDebug.mockReturnValue({
+      enabled: false,
+      setEnabled,
+      componentInfo: null,
+      showComponentInfo: vi.fn(),
+      hideComponentInfo: vi.fn(),
+    });
+
+    const container = renderComponent();
+    await clickButton(findSwitch(container, "切换组件视图调试"));
+
+    expect(setEnabled).toHaveBeenCalledTimes(1);
+    expect(setEnabled).toHaveBeenCalledWith(true);
+  });
+
+  it("点击复制诊断信息后应构建并复制诊断载荷", async () => {
+    const container = renderComponent();
+
+    await clickButton(findButton(container, "复制诊断信息"));
+    await flushEffects();
+
+    expect(mockCollectRuntimeSnapshotForDiagnostic).toHaveBeenCalledTimes(1);
+    expect(mockBuildCrashDiagnosticPayload).toHaveBeenCalledTimes(1);
+    expect(mockCopyCrashDiagnosticToClipboard).toHaveBeenCalledWith({
+      payload: "diagnostic",
+    });
+    expect(container.textContent).toContain("诊断信息已复制，可直接发给开发者");
+  });
+
+  it("复制诊断因剪贴板权限失败时应显示权限指引", async () => {
+    mockCopyCrashDiagnosticToClipboard.mockRejectedValueOnce(
+      new Error("clipboard denied"),
+    );
+    mockIsClipboardPermissionDeniedError.mockReturnValue(true);
+
+    const container = renderComponent();
+
+    await clickButton(findButton(container, "复制诊断信息"));
+    await flushEffects();
+
+    expect(container.textContent).toContain("剪贴板权限卡片占位");
+    expect(container.textContent).toContain("clipboard denied");
+  });
+});
diff --git a/src/components/settings-v2/system/developer/index.tsx b/src/components/settings-v2/system/developer/index.tsx
index f37e5d036..597f7121e 100644
--- a/src/components/settings-v2/system/developer/index.tsx
+++ b/src/components/settings-v2/system/developer/index.tsx
@@ -1,9 +1,15 @@
-/**
- * @file DeveloperSettings.tsx
- * @description 开发者设置页面 - 组件视图调试等开发工具
- */
-import { useCallback, useState } from "react";
-import { Bug, Code2, Eye, Trash2 } from "lucide-react";
+import { useCallback, useMemo, useState, type ReactNode } from "react";
+import {
+  AlertCircle,
+  Bug,
+  Code2,
+  Eye,
+  ScrollText,
+  ShieldAlert,
+  Sparkles,
+  Trash2,
+  type LucideIcon,
+} from "lucide-react";
 import { Switch } from "@/components/ui/switch";
 import { useComponentDebug } from "@/contexts/ComponentDebugContext";
 import { getConfig } from "@/lib/api/appConfig";
@@ -19,8 +25,8 @@ import {
   collectRuntimeSnapshotForDiagnostic,
   collectThemeWorkbenchDocumentStateForDiagnostic,
   CLEAR_CRASH_DIAGNOSTIC_HISTORY_CONFIRM_TEXT,
-  copyCrashDiagnosticToClipboard,
   copyCrashDiagnosticJsonToClipboard,
+  copyCrashDiagnosticToClipboard,
   exportCrashDiagnosticToJson,
   isClipboardPermissionDeniedError,
   normalizeCrashReportingConfig,
@@ -30,6 +36,89 @@ import { cn } from "@/lib/utils";
 import { ClipboardPermissionGuideCard } from "../shared/ClipboardPermissionGuideCard";
 import { WorkspaceRepairHistoryCard } from "../shared/WorkspaceRepairHistoryCard";
 
+interface SurfacePanelProps {
+  icon: LucideIcon;
+  title: string;
+  description: string;
+  aside?: ReactNode;
+  children: ReactNode;
+}
+
+interface SummaryStatProps {
+  label: string;
+  value: string;
+  description: string;
+}
+
+const SECONDARY_BUTTON_CLASS_NAME =
+  "inline-flex items-center gap-2 rounded-full border border-slate-200 bg-white px-4 py-2 text-sm font-medium text-slate-600 transition hover:border-slate-300 hover:text-slate-900 disabled:cursor-not-allowed disabled:opacity-50";
+const DANGER_BUTTON_CLASS_NAME =
+  "inline-flex items-center gap-2 rounded-full border border-rose-200 bg-rose-50 px-4 py-2 text-sm font-medium text-rose-700 transition hover:border-rose-300 hover:bg-rose-100 disabled:cursor-not-allowed disabled:opacity-50";
+
+function SurfacePanel({
+  icon: Icon,
+  title,
+  description,
+  aside,
+  children,
+}: SurfacePanelProps) {
+  return (
+    <article className="rounded-[26px] border border-slate-200/80 bg-white p-5 shadow-sm shadow-slate-950/5">
+      <div className="flex flex-col gap-4 sm:flex-row sm:items-start sm:justify-between">
+        <div className="space-y-1">
+          <div className="flex items-center gap-2 text-sm font-semibold text-slate-900">
+            <Icon className="h-4 w-4 text-sky-600" />
+            {title}
+          </div>
+          <p className="text-sm leading-6 text-slate-500">{description}</p>
+        </div>
+        {aside ? (
+          <div className="flex flex-wrap items-center gap-2">{aside}</div>
+        ) : null}
+      </div>
+
+      <div className="mt-5">{children}</div>
+    </article>
+  );
+}
+
+function SummaryStat({ label, value, description }: SummaryStatProps) {
+  return (
+    <div className="rounded-[22px] border border-white/90 bg-white/88 p-4 shadow-sm">
+      <p className="text-xs font-medium tracking-[0.12em] text-slate-500">
+        {label}
+      </p>
+      <p className="mt-3 text-3xl font-semibold tracking-tight text-slate-900">
+        {value}
+      </p>
+      <p className="mt-2 text-xs leading-5 text-slate-500">{description}</p>
+    </div>
+  );
+}
+
+function StatusPill({
+  active,
+  activeLabel,
+  inactiveLabel,
+}: {
+  active: boolean;
+  activeLabel: string;
+  inactiveLabel: string;
+}) {
+  return (
+    <span
+      className={cn(
+        "rounded-full border px-3 py-1 text-xs font-medium",
+        active
+          ? "border-emerald-200 bg-emerald-50 text-emerald-700"
+          : "border-slate-200 bg-slate-100 text-slate-500",
+      )}
+    >
+      {active ? activeLabel : inactiveLabel}
+    </span>
+  );
+}
+
 export function DeveloperSettings() {
   const { enabled, setEnabled } = useComponentDebug();
   const [diagnosticBusy, setDiagnosticBusy] = useState(false);
@@ -91,13 +180,13 @@ export function DeveloperSettings() {
         text: "诊断信息已复制，可直接发给开发者",
       });
       setTimeout(() => setMessage(null), 2500);
-    } catch (err) {
-      console.error("复制诊断信息失败:", err);
-      const isPermissionDenied = isClipboardPermissionDeniedError(err);
+    } catch (error) {
+      console.error("复制诊断信息失败:", error);
+      const isPermissionDenied = isClipboardPermissionDeniedError(error);
       setShowClipboardGuide(isPermissionDenied);
       setMessage({
         type: "error",
-        text: err instanceof Error ? err.message : "复制诊断信息失败",
+        text: error instanceof Error ? error.message : "复制诊断信息失败",
       });
     } finally {
       setDiagnosticBusy(false);
@@ -116,13 +205,13 @@ export function DeveloperSettings() {
         text: "纯 JSON 诊断信息已复制",
       });
       setTimeout(() => setMessage(null), 2500);
-    } catch (err) {
-      console.error("复制纯 JSON 失败:", err);
-      const isPermissionDenied = isClipboardPermissionDeniedError(err);
+    } catch (error) {
+      console.error("复制纯 JSON 失败:", error);
+      const isPermissionDenied = isClipboardPermissionDeniedError(error);
       setShowClipboardGuide(isPermissionDenied);
       setMessage({
         type: "error",
-        text: err instanceof Error ? err.message : "复制纯 JSON 失败",
+        text: error instanceof Error ? error.message : "复制纯 JSON 失败",
       });
     } finally {
       setDiagnosticBusy(false);
@@ -152,11 +241,11 @@ export function DeveloperSettings() {
           : `诊断文件已导出：${result.fileName}（位置：${result.locationHint}）`,
       });
       setTimeout(() => setMessage(null), 2500);
-    } catch (err) {
-      console.error("导出诊断信息失败:", err);
+    } catch (error) {
+      console.error("导出诊断信息失败:", error);
       setMessage({
         type: "error",
-        text: err instanceof Error ? err.message : "导出诊断信息失败",
+        text: error instanceof Error ? error.message : "导出诊断信息失败",
       });
     } finally {
       setDiagnosticBusy(false);
@@ -173,11 +262,11 @@ export function DeveloperSettings() {
         text: `已打开下载目录：${result.openedPath}`,
       });
       setTimeout(() => setMessage(null), 2500);
-    } catch (err) {
-      console.error("打开下载目录失败:", err);
+    } catch (error) {
+      console.error("打开下载目录失败:", error);
       setMessage({
         type: "error",
-        text: err instanceof Error ? err.message : "打开下载目录失败",
+        text: error instanceof Error ? error.message : "打开下载目录失败",
       });
     } finally {
       setDiagnosticBusy(false);
@@ -202,147 +291,311 @@ export function DeveloperSettings() {
         text: "已清空旧诊断信息，后续复制将只包含新的诊断数据",
       });
       setTimeout(() => setMessage(null), 2500);
-    } catch (err) {
-      console.error("清空旧诊断信息失败:", err);
+    } catch (error) {
+      console.error("清空旧诊断信息失败:", error);
       setMessage({
         type: "error",
-        text: err instanceof Error ? err.message : "清空旧诊断信息失败",
+        text: error instanceof Error ? error.message : "清空旧诊断信息失败",
       });
     } finally {
       setDiagnosticBusy(false);
     }
   }, []);
 
-  return (
-    <div className="space-y-6 max-w-2xl">
-      {/* 标题 */}
-      <div className="flex items-center gap-2 mb-4">
-        <Code2 className="w-5 h-5 text-primary" />
-        <h3 className="text-lg font-semibold">开发者工具</h3>
-      </div>
+  const summary = useMemo(
+    () => ({
+      diagnosticActionCount: 5,
+      debugModeLabel: enabled ? "已启用" : "未启用",
+      clipboardLabel: showClipboardGuide ? "待处理" : "正常",
+    }),
+    [enabled, showClipboardGuide],
+  );
 
-      {/* 消息提示 */}
-      {message && (
+  return (
+    <div className="space-y-6 pb-8">
+      {message ? (
         <div
           className={cn(
-            "rounded-lg px-3 py-2 text-sm",
+            "flex items-center gap-2 rounded-[20px] border px-4 py-3 text-sm shadow-sm shadow-slate-950/5",
             message.type === "success"
-              ? "bg-green-100 text-green-700 dark:bg-green-900/30 dark:text-green-400"
-              : "bg-destructive/10 text-destructive",
+              ? "border-emerald-200 bg-emerald-50/90 text-emerald-700"
+              : "border-rose-200 bg-rose-50/90 text-rose-700",
           )}
         >
-          {message.text}
+          <AlertCircle className="h-4 w-4" />
+          <span>{message.text}</span>
         </div>
-      )}
+      ) : null}
 
-      {showClipboardGuide && <ClipboardPermissionGuideCard />}
+      <section className="relative overflow-hidden rounded-[30px] border border-emerald-200/70 bg-[linear-gradient(135deg,rgba(244,251,248,0.98)_0%,rgba(248,250,252,0.98)_45%,rgba(241,246,255,0.96)_100%)] shadow-sm shadow-slate-950/5">
+        <div className="pointer-events-none absolute -left-20 top-[-72px] h-56 w-56 rounded-full bg-emerald-200/30 blur-3xl" />
+        <div className="pointer-events-none absolute right-[-76px] top-[-24px] h-56 w-56 rounded-full bg-sky-200/28 blur-3xl" />
 
-      {/* 组件视图调试 */}
-      <div className="border rounded-lg p-4">
-        <div className="flex items-center justify-between">
-          <div className="flex items-center gap-3">
-            <div className="p-2 bg-blue-500/10 rounded-lg">
-              <Eye className="w-5 h-5 text-blue-500" />
+        <div className="relative flex flex-col gap-6 p-6 lg:p-8">
+          <div className="grid gap-6 xl:grid-cols-[minmax(0,1.08fr)_minmax(360px,0.92fr)]">
+            <div className="max-w-3xl space-y-5">
+              <span className="inline-flex items-center rounded-full border border-emerald-200 bg-white/85 px-3 py-1 text-xs font-semibold tracking-[0.16em] text-emerald-700 shadow-sm">
+                DEVELOPER DESK
+              </span>
+              <div className="space-y-2">
+                <p className="text-[28px] font-semibold tracking-tight text-slate-900">
+                  把组件调试、崩溃诊断和自愈记录放到同一个开发工作台里
+                </p>
+                <p className="max-w-2xl text-sm leading-7 text-slate-600">
+                  这里优先服务排障和开发协作，重点是快速收集可用信息，而不是堆更多低价值表单。
+                  组件调试和诊断按钮仍保持原有行为，只是重新组织了信息层次。
+                </p>
+              </div>
+
+              <div className="flex flex-wrap items-center gap-2">
+                <span className="rounded-full border border-white/90 bg-white/88 px-3 py-1.5 text-xs font-medium text-slate-600 shadow-sm">
+                  组件视图调试适合开发模式下看轮廓和路径
+                </span>
+                <span className="rounded-full border border-white/90 bg-white/88 px-3 py-1.5 text-xs font-medium text-slate-600 shadow-sm">
+                  诊断动作会采集日志、运行态快照和系统自检信息
+                </span>
+                <span className="rounded-full border border-white/90 bg-white/88 px-3 py-1.5 text-xs font-medium text-slate-600 shadow-sm">
+                  Workspace 自愈记录用于追踪自动修复链路
+                </span>
+              </div>
             </div>
-            <div>
-              <h4 className="font-medium">组件视图调试</h4>
-              <p className="text-sm text-muted-foreground">
-                显示组件轮廓，Alt+点击查看组件信息
+
+            <div className="grid gap-3 sm:grid-cols-3 xl:grid-cols-1 xl:content-start">
+              <SummaryStat
+                label="组件调试"
+                value={summary.debugModeLabel}
+                description="控制组件轮廓显示与 Alt 点击诊断，不改变运行逻辑。"
+              />
+              <SummaryStat
+                label="诊断动作"
+                value={summary.diagnosticActionCount.toString()}
+                description="当前提供清空、复制、纯 JSON、导出和打开目录五个动作。"
+              />
+              <SummaryStat
+                label="剪贴板权限"
+                value={summary.clipboardLabel}
+                description="复制诊断失败且属于权限问题时，会在本页展示系统设置指引。"
+              />
+            </div>
+          </div>
+
+          <div className="flex flex-col gap-4 rounded-[24px] border border-white/90 bg-white/80 p-4 shadow-sm lg:flex-row lg:items-center lg:justify-between">
+            <div className="space-y-2">
+              <div className="flex flex-wrap items-center gap-2">
+                <StatusPill
+                  active={enabled}
+                  activeLabel="组件调试已启用"
+                  inactiveLabel="组件调试未启用"
+                />
+                <StatusPill
+                  active={!showClipboardGuide}
+                  activeLabel="剪贴板权限正常"
+                  inactiveLabel="需检查剪贴板权限"
+                />
+                <span className="rounded-full border border-slate-200 bg-white px-3 py-1 text-xs font-medium text-slate-500">
+                  {diagnosticBusy ? "诊断任务执行中" : "当前空闲"}
+                </span>
+              </div>
+              <p className="text-sm leading-6 text-slate-600">
+                建议先打开组件调试看清页面结构，再根据问题类型决定是否复制或导出完整诊断包。
               </p>
             </div>
           </div>
-          <Switch checked={enabled} onCheckedChange={setEnabled} />
+        </div>
+      </section>
+
+      <div className="grid gap-6 xl:grid-cols-[minmax(0,1.14fr)_minmax(320px,0.86fr)]">
+        <div className="space-y-6">
+          <SurfacePanel
+            icon={Eye}
+            title="组件视图调试"
+            description="显示组件轮廓并支持 Alt 点击查看组件信息，适合开发模式下定位复杂界面。"
+            aside={
+              <StatusPill
+                active={enabled}
+                activeLabel="已启用"
+                inactiveLabel="未启用"
+              />
+            }
+          >
+            <div className="space-y-4">
+              <div className="rounded-[22px] border border-slate-200/80 bg-slate-50/60 p-4">
+                <div className="flex flex-col gap-4 sm:flex-row sm:items-start sm:justify-between">
+                  <div className="space-y-1">
+                    <p className="text-sm font-semibold text-slate-900">
+                      开启组件轮廓与信息查看
+                    </p>
+                    <p className="text-sm leading-6 text-slate-500">
+                      不影响业务行为，只在调试时提供轮廓高亮和组件来源查看能力。
+                    </p>
+                  </div>
+                  <Switch
+                    aria-label="切换组件视图调试"
+                    checked={enabled}
+                    onCheckedChange={setEnabled}
+                  />
+                </div>
+              </div>
+
+              {enabled ? (
+                <div className="rounded-[22px] border border-slate-200/80 bg-white p-4">
+                  <p className="text-sm font-semibold text-slate-900">
+                    使用说明
+                  </p>
+                  <div className="mt-3 space-y-2 text-sm leading-6 text-slate-500">
+                    <p>1. 按住 Alt 键并悬浮，可查看组件轮廓。</p>
+                    <p>2. Alt + 点击组件，可查看名称和文件路径。</p>
+                    <p>3. 文件路径仅在开发模式 `npm run tauri dev` 下可用。</p>
+                  </div>
+                </div>
+              ) : null}
+            </div>
+          </SurfacePanel>
+
+          <SurfacePanel
+            icon={Bug}
+            title="崩溃诊断日志（开发协作）"
+            description="用于定位 Windows 闪退与初装异常，汇总前端崩溃、调用轨迹、服务器/日志诊断和启动自检信息。"
+          >
+            <div className="space-y-4">
+              <div className="rounded-[22px] border border-slate-200/80 bg-slate-50/60 p-4 text-sm leading-6 text-slate-500">
+                导出的内容会自动对 DSN 做脱敏处理。适合在复现问题后立刻复制或导出，减少信息丢失。
+              </div>
+
+              <div className="flex flex-wrap gap-3">
+                <button
+                  type="button"
+                  onClick={() => void handleClearDiagnosticHistory()}
+                  disabled={diagnosticBusy}
+                  className={DANGER_BUTTON_CLASS_NAME}
+                >
+                  <Trash2 className="h-4 w-4" />
+                  清空旧诊断信息
+                </button>
+                <button
+                  type="button"
+                  onClick={() => void handleCopyDiagnostic()}
+                  disabled={diagnosticBusy}
+                  className={SECONDARY_BUTTON_CLASS_NAME}
+                >
+                  <Bug className="h-4 w-4" />
+                  复制诊断信息
+                </button>
+                <button
+                  type="button"
+                  onClick={() => void handleCopyDiagnosticJson()}
+                  disabled={diagnosticBusy}
+                  className={SECONDARY_BUTTON_CLASS_NAME}
+                >
+                  <Code2 className="h-4 w-4" />
+                  复制纯 JSON
+                </button>
+                <button
+                  type="button"
+                  onClick={() => void handleExportDiagnostic()}
+                  disabled={diagnosticBusy}
+                  className={SECONDARY_BUTTON_CLASS_NAME}
+                >
+                  <ScrollText className="h-4 w-4" />
+                  导出诊断 JSON
+                </button>
+                <button
+                  type="button"
+                  onClick={() => void handleOpenDownloadDirectory()}
+                  disabled={diagnosticBusy}
+                  className={SECONDARY_BUTTON_CLASS_NAME}
+                >
+                  <Sparkles className="h-4 w-4" />
+                  打开下载目录
+                </button>
+              </div>
+            </div>
+          </SurfacePanel>
+
+          <WorkspaceRepairHistoryCard
+            className="rounded-[26px] border-slate-200/80 bg-white p-5 shadow-sm shadow-slate-950/5"
+            description="仅用于开发排查，记录最近自动修复/迁移（不打断用户操作）"
+          />
         </div>
 
-        {enabled && (
-          <div className="mt-4 p-3 bg-muted/50 rounded-md text-sm text-muted-foreground">
-            <p className="font-medium text-foreground mb-2">使用说明:</p>
-            <ul className="list-disc list-inside space-y-1">
-              <li>按住 Alt 键 + 鼠标悬浮显示组件轮廓</li>
-              <li>Alt + 点击组件可查看名称和文件路径</li>
-              <li>文件路径仅在开发模式 (npm run tauri dev) 下可用</li>
-            </ul>
-          </div>
-        )}
-      </div>
+        <div className="space-y-6">
+          {showClipboardGuide ? (
+            <SurfacePanel
+              icon={ShieldAlert}
+              title="剪贴板权限指引"
+              description="如果复制诊断失败且属于权限问题，可按下面的系统指引恢复。"
+            >
+              <ClipboardPermissionGuideCard />
+            </SurfacePanel>
+          ) : null}
 
-      {/* 崩溃诊断入口 */}
-      <div className="border rounded-lg p-4 space-y-4">
-        <div className="flex items-start gap-3">
-          <div className="p-2 bg-rose-500/10 rounded-lg">
-            <Bug className="w-5 h-5 text-rose-500" />
-          </div>
-          <div>
-            <h4 className="font-medium">崩溃诊断日志（开发协作）</h4>
-            <p className="text-sm text-muted-foreground">
-              用于定位 Windows 闪退与初装异常，包含
-              FrontendCrash、调用轨迹、服务器/日志诊断与 Windows 启动自检（DSN
-              自动脱敏）
-            </p>
-          </div>
-        </div>
+          <SurfacePanel
+            icon={Sparkles}
+            title="诊断建议"
+            description="先缩小问题范围，再决定要收集哪种信息，避免一次性导出过多噪音。"
+          >
+            <div className="space-y-3">
+              <div className="rounded-[22px] border border-slate-200/80 bg-slate-50/60 p-4">
+                <p className="text-sm font-semibold text-slate-900">
+                  页面结构问题
+                </p>
+                <p className="mt-2 text-sm leading-6 text-slate-500">
+                  先打开组件调试，确认具体组件边界和来源文件，再回到对应页面修。
+                </p>
+              </div>
+              <div className="rounded-[22px] border border-slate-200/80 bg-slate-50/60 p-4">
+                <p className="text-sm font-semibold text-slate-900">
+                  闪退或启动异常
+                </p>
+                <p className="mt-2 text-sm leading-6 text-slate-500">
+                  优先复制或导出完整诊断信息，这类问题更依赖启动自检和运行态快照。
+                </p>
+              </div>
+              <div className="rounded-[22px] border border-slate-200/80 bg-slate-50/60 p-4">
+                <p className="text-sm font-semibold text-slate-900">
+                  自愈链路核对
+                </p>
+                <p className="mt-2 text-sm leading-6 text-slate-500">
+                  在 Workspace 自动修复记录里看最近动作，再决定是否需要清理旧诊断历史。
+                </p>
+              </div>
+            </div>
+          </SurfacePanel>
 
-        <div className="flex items-center gap-2">
-          <button
-            type="button"
-            onClick={() => void handleClearDiagnosticHistory()}
-            disabled={diagnosticBusy}
-            className={cn(
-              "inline-flex items-center gap-1 rounded-md border border-rose-200 bg-rose-50 px-3 py-1.5 text-xs text-rose-700 transition-colors dark:border-rose-900/40 dark:bg-rose-950/20 dark:text-rose-300",
-              diagnosticBusy && "opacity-50 cursor-not-allowed",
-            )}
+          <SurfacePanel
+            icon={Code2}
+            title="动作清单"
+            description="不同诊断动作解决的问题不同，不建议每次都盲目全导出。"
           >
-            <Trash2 className="h-3.5 w-3.5" />
-            清空旧诊断信息
-          </button>
-          <button
-            type="button"
-            onClick={() => void handleCopyDiagnostic()}
-            disabled={diagnosticBusy}
-            className={cn(
-              "rounded-md border px-3 py-1.5 text-xs transition-colors",
-              diagnosticBusy && "opacity-50 cursor-not-allowed",
-            )}
-          >
-            复制诊断信息
-          </button>
-          <button
-            type="button"
-            onClick={() => void handleCopyDiagnosticJson()}
-            disabled={diagnosticBusy}
-            className={cn(
-              "rounded-md border px-3 py-1.5 text-xs transition-colors",
-              diagnosticBusy && "opacity-50 cursor-not-allowed",
-            )}
-          >
-            复制纯 JSON
-          </button>
-          <button
-            type="button"
-            onClick={() => void handleExportDiagnostic()}
-            disabled={diagnosticBusy}
-            className={cn(
-              "rounded-md border px-3 py-1.5 text-xs transition-colors",
-              diagnosticBusy && "opacity-50 cursor-not-allowed",
-            )}
-          >
-            导出诊断 JSON
-          </button>
-          <button
-            type="button"
-            onClick={() => void handleOpenDownloadDirectory()}
-            disabled={diagnosticBusy}
-            className={cn(
-              "rounded-md border px-3 py-1.5 text-xs transition-colors",
-              diagnosticBusy && "opacity-50 cursor-not-allowed",
-            )}
-          >
-            打开下载目录
-          </button>
+            <div className="space-y-3">
+              <div className="rounded-[22px] border border-slate-200/80 bg-slate-50/60 p-4">
+                <p className="text-sm font-semibold text-slate-900">
+                  复制诊断信息
+                </p>
+                <p className="mt-2 text-sm leading-6 text-slate-500">
+                  适合直接发给开发者或贴到 issue 中，包含结构化摘要和关键上下文。
+                </p>
+              </div>
+              <div className="rounded-[22px] border border-slate-200/80 bg-slate-50/60 p-4">
+                <p className="text-sm font-semibold text-slate-900">
+                  复制纯 JSON / 导出 JSON
+                </p>
+                <p className="mt-2 text-sm leading-6 text-slate-500">
+                  更适合程序化比对和归档，内容完整，但阅读成本更高。
+                </p>
+              </div>
+              <div className="rounded-[22px] border border-slate-200/80 bg-slate-50/60 p-4">
+                <p className="text-sm font-semibold text-slate-900">
+                  清空旧诊断信息
+                </p>
+                <p className="mt-2 text-sm leading-6 text-slate-500">
+                  用于复现场景前清理历史噪音。执行后不可恢复，只保留新的问题样本。
+                </p>
+              </div>
+            </div>
+          </SurfacePanel>
         </div>
       </div>
-
-      <WorkspaceRepairHistoryCard description="仅用于开发排查，记录最近自动修复/迁移（不打断用户操作）" />
     </div>
   );
 }
diff --git a/src/components/settings-v2/system/environment/index.test.tsx b/src/components/settings-v2/system/environment/index.test.tsx
new file mode 100644
index 000000000..9c5d6590d
--- /dev/null
+++ b/src/components/settings-v2/system/environment/index.test.tsx
@@ -0,0 +1,255 @@
+import { act } from "react";
+import { createRoot, type Root } from "react-dom/client";
+import { afterEach, beforeEach, describe, expect, it, vi } from "vitest";
+
+const { mockGetConfig, mockGetEnvironmentPreview, mockSaveConfig } =
+  vi.hoisted(() => ({
+    mockGetConfig: vi.fn(),
+    mockGetEnvironmentPreview: vi.fn(),
+    mockSaveConfig: vi.fn(),
+  }));
+
+vi.mock("@/lib/api/appConfig", () => ({
+  getConfig: mockGetConfig,
+  getEnvironmentPreview: mockGetEnvironmentPreview,
+  saveConfig: mockSaveConfig,
+}));
+
+import { EnvironmentSettings } from ".";
+
+interface Mounted {
+  container: HTMLDivElement;
+  root: Root;
+}
+
+const mounted: Mounted[] = [];
+
+function renderComponent(): HTMLDivElement {
+  const container = document.createElement("div");
+  document.body.appendChild(container);
+  const root = createRoot(container);
+
+  act(() => {
+    root.render(<EnvironmentSettings />);
+  });
+
+  mounted.push({ container, root });
+  return container;
+}
+
+async function flushEffects() {
+  await act(async () => {
+    await Promise.resolve();
+  });
+}
+
+async function waitForLoad() {
+  await flushEffects();
+  await flushEffects();
+}
+
+function findButton(container: HTMLElement, text: string): HTMLButtonElement {
+  const button = Array.from(container.querySelectorAll("button")).find((item) =>
+    item.textContent?.includes(text),
+  );
+  if (!button) {
+    throw new Error(`未找到按钮: ${text}`);
+  }
+  return button as HTMLButtonElement;
+}
+
+function findInput(container: HTMLElement, id: string): HTMLInputElement {
+  const input = container.querySelector<HTMLInputElement>(`#${id}`);
+  if (!input) {
+    throw new Error(`未找到输入框: ${id}`);
+  }
+  return input;
+}
+
+async function clickButton(button: HTMLButtonElement) {
+  await act(async () => {
+    button.dispatchEvent(new MouseEvent("click", { bubbles: true }));
+    await flushEffects();
+  });
+}
+
+async function setInputValue(input: HTMLInputElement, value: string) {
+  const nativeSetter = Object.getOwnPropertyDescriptor(
+    window.HTMLInputElement.prototype,
+    "value",
+  )?.set;
+  if (!nativeSetter) {
+    throw new Error("未找到 input value setter");
+  }
+
+  await act(async () => {
+    nativeSetter.call(input, value);
+    input.dispatchEvent(new Event("input", { bubbles: true }));
+    await flushEffects();
+  });
+}
+
+beforeEach(() => {
+  (
+    globalThis as typeof globalThis & {
+      IS_REACT_ACT_ENVIRONMENT?: boolean;
+    }
+  ).IS_REACT_ACT_ENVIRONMENT = true;
+
+  vi.clearAllMocks();
+
+  mockGetConfig.mockResolvedValue({
+    environment: {
+      shell_import: {
+        enabled: true,
+        timeout_ms: 1800,
+      },
+      variables: [
+        {
+          key: "OPENAI_BASE_URL",
+          value: "https://old.example.com",
+          enabled: true,
+        },
+      ],
+    },
+  });
+
+  mockGetEnvironmentPreview.mockResolvedValue({
+    shellImport: {
+      enabled: true,
+      status: "ok",
+      message: "已从登录 Shell 导入 PATH 与代理变量",
+      importedCount: 5,
+      durationMs: 42,
+    },
+    entries: [
+      {
+        key: "OPENAI_API_KEY",
+        value: "sk-live-secret-value",
+        maskedValue: "sk-live-***",
+        source: "override",
+        sourceLabel: "环境变量覆盖",
+        sensitive: true,
+        overriddenSources: ["shell_import"],
+      },
+      {
+        key: "HTTP_PROXY",
+        value: "http://127.0.0.1:7890",
+        maskedValue: "http://127.0.0.1:7890",
+        source: "shell_import",
+        sourceLabel: "Shell 环境导入",
+        sensitive: false,
+        overriddenSources: [],
+      },
+    ],
+  });
+
+  mockSaveConfig.mockResolvedValue(undefined);
+});
+
+afterEach(() => {
+  while (mounted.length > 0) {
+    const target = mounted.pop();
+    if (!target) {
+      break;
+    }
+
+    act(() => {
+      target.root.unmount();
+    });
+    target.container.remove();
+  }
+
+  vi.clearAllMocks();
+});
+
+describe("EnvironmentSettings", () => {
+  it("应渲染新的环境变量总览与关键分区", async () => {
+    const container = renderComponent();
+    await waitForLoad();
+
+    const text = container.textContent ?? "";
+    expect(text).toContain("ENVIRONMENT LAYER");
+    expect(text).toContain("Shell 环境导入");
+    expect(text).toContain("环境变量覆盖");
+    expect(text).toContain("合并规则");
+    expect(text).toContain("生效预览");
+    expect(text).toContain("已从登录 Shell 导入 PATH 与代理变量");
+    expect(findInput(container, "environment-variable-key-0").value).toBe(
+      "OPENAI_BASE_URL",
+    );
+  });
+
+  it("点击添加变量后应新增一条覆盖项", async () => {
+    const container = renderComponent();
+    await waitForLoad();
+
+    expect(
+      container.querySelectorAll('input[id^="environment-variable-key-"]')
+        .length,
+    ).toBe(1);
+
+    await clickButton(findButton(container, "添加变量"));
+
+    expect(
+      container.querySelectorAll('input[id^="environment-variable-key-"]')
+        .length,
+    ).toBe(2);
+
+    expect(findInput(container, "environment-variable-key-1").value).toBe("");
+    expect(findInput(container, "environment-variable-value-1").value).toBe("");
+  });
+
+  it("修改覆盖项后应调用保存接口", async () => {
+    const container = renderComponent();
+    await waitForLoad();
+
+    await setInputValue(
+      findInput(container, "environment-variable-key-0"),
+      "OPENAI_API_BASE",
+    );
+    await setInputValue(
+      findInput(container, "environment-variable-value-0"),
+      "https://override.example.com",
+    );
+    await setInputValue(
+      findInput(container, "environment-shell-import-timeout"),
+      "2200",
+    );
+
+    await clickButton(findButton(container, "保存并应用"));
+    await waitForLoad();
+
+    expect(mockSaveConfig).toHaveBeenCalledTimes(1);
+    expect(mockSaveConfig).toHaveBeenCalledWith(
+      expect.objectContaining({
+        environment: {
+          shell_import: {
+            enabled: true,
+            timeout_ms: 2200,
+          },
+          variables: [
+            {
+              key: "OPENAI_API_BASE",
+              value: "https://override.example.com",
+              enabled: true,
+            },
+          ],
+        },
+      }),
+    );
+  });
+
+  it("应在预览区支持敏感值显隐切换", async () => {
+    const container = renderComponent();
+    await waitForLoad();
+
+    expect(container.textContent).toContain("sk-live-***");
+    expect(container.textContent).not.toContain("sk-live-secret-value");
+
+    await clickButton(findButton(container, "显示值"));
+
+    expect(container.textContent).toContain("sk-live-secret-value");
+    expect(container.textContent).toContain("已覆盖来源：Shell 环境导入");
+  });
+});
diff --git a/src/components/settings-v2/system/environment/index.tsx b/src/components/settings-v2/system/environment/index.tsx
index b85d6949a..924ca620a 100644
--- a/src/components/settings-v2/system/environment/index.tsx
+++ b/src/components/settings-v2/system/environment/index.tsx
@@ -1,5 +1,14 @@
-import { useCallback, useEffect, useMemo, useState } from "react";
 import {
+  useCallback,
+  useEffect,
+  useMemo,
+  useState,
+  type ReactNode,
+} from "react";
+import {
+  Eye,
+  EyeOff,
+  Layers3,
   Plus,
   RefreshCw,
   Save,
@@ -7,10 +16,10 @@ import {
   Terminal,
   Trash2,
   Variable,
-  Eye,
-  EyeOff,
+  type LucideIcon,
 } from "lucide-react";
 import { Switch } from "@/components/ui/switch";
+import { cn } from "@/lib/utils";
 import {
   getConfig,
   getEnvironmentPreview,
@@ -21,6 +30,34 @@ import {
   type EnvironmentVariableOverride,
 } from "@/lib/api/appConfig";
 
+interface SurfacePanelProps {
+  icon: LucideIcon;
+  title: string;
+  description: string;
+  aside?: ReactNode;
+  children: ReactNode;
+}
+
+interface SummaryStatProps {
+  label: string;
+  value: string;
+  description: string;
+}
+
+interface FieldBlockProps {
+  label: string;
+  htmlFor: string;
+  hint?: string;
+  children: ReactNode;
+}
+
+const INPUT_CLASS_NAME =
+  "w-full rounded-[16px] border border-slate-200 bg-white px-3.5 py-2.5 text-sm text-slate-700 outline-none transition placeholder:text-slate-400 focus:border-slate-300 focus:ring-2 focus:ring-slate-200";
+const SECONDARY_BUTTON_CLASS_NAME =
+  "inline-flex items-center gap-2 rounded-full border border-slate-200 bg-white px-4 py-2 text-sm font-medium text-slate-600 transition hover:border-slate-300 hover:text-slate-900 disabled:cursor-not-allowed disabled:opacity-50";
+const PRIMARY_BUTTON_CLASS_NAME =
+  "inline-flex items-center gap-2 rounded-full bg-slate-900 px-4 py-2 text-sm font-medium text-white transition hover:bg-slate-800 disabled:cursor-not-allowed disabled:opacity-50";
+
 function normalizeEnvironmentConfig(config: Config | null): EnvironmentConfig {
   return {
     shell_import: {
@@ -52,6 +89,111 @@ function formatSourceLabel(source: string): string {
   }
 }
 
+function resolveShellImportMeta(status?: string) {
+  switch (status) {
+    case "ok":
+      return {
+        label: "已导入",
+        className:
+          "border-emerald-200 bg-emerald-50 text-emerald-700",
+      };
+    case "disabled":
+      return {
+        label: "已停用",
+        className: "border-slate-200 bg-slate-100 text-slate-500",
+      };
+    case "error":
+      return {
+        label: "异常",
+        className: "border-rose-200 bg-rose-50 text-rose-700",
+      };
+    default:
+      return {
+        label: "待检查",
+        className: "border-amber-200 bg-amber-50 text-amber-700",
+      };
+  }
+}
+
+function formatDuration(durationMs?: number | null) {
+  if (durationMs == null || durationMs < 0) {
+    return "未记录";
+  }
+  return `${durationMs} ms`;
+}
+
+function SurfacePanel({
+  icon: Icon,
+  title,
+  description,
+  aside,
+  children,
+}: SurfacePanelProps) {
+  return (
+    <article className="rounded-[26px] border border-slate-200/80 bg-white p-5 shadow-sm shadow-slate-950/5">
+      <div className="flex flex-col gap-4 sm:flex-row sm:items-start sm:justify-between">
+        <div className="space-y-1">
+          <div className="flex items-center gap-2 text-sm font-semibold text-slate-900">
+            <Icon className="h-4 w-4 text-sky-600" />
+            {title}
+          </div>
+          <p className="text-sm leading-6 text-slate-500">{description}</p>
+        </div>
+        {aside ? (
+          <div className="flex flex-wrap items-center gap-2">{aside}</div>
+        ) : null}
+      </div>
+
+      <div className="mt-5">{children}</div>
+    </article>
+  );
+}
+
+function SummaryStat({ label, value, description }: SummaryStatProps) {
+  return (
+    <div className="rounded-[22px] border border-white/90 bg-white/88 p-4 shadow-sm">
+      <p className="text-xs font-medium tracking-[0.12em] text-slate-500">
+        {label}
+      </p>
+      <p className="mt-3 text-3xl font-semibold tracking-tight text-slate-900">
+        {value}
+      </p>
+      <p className="mt-2 text-xs leading-5 text-slate-500">{description}</p>
+    </div>
+  );
+}
+
+function FieldBlock({ label, htmlFor, hint, children }: FieldBlockProps) {
+  return (
+    <div className="space-y-2">
+      <label htmlFor={htmlFor} className="text-sm font-medium text-slate-900">
+        {label}
+      </label>
+      {children}
+      {hint ? <p className="text-xs leading-5 text-slate-500">{hint}</p> : null}
+    </div>
+  );
+}
+
+function LoadingSkeleton() {
+  return (
+    <div className="space-y-6 pb-8">
+      <div className="h-[228px] animate-pulse rounded-[30px] border border-slate-200/80 bg-[linear-gradient(135deg,rgba(244,251,248,0.98)_0%,rgba(248,250,252,0.98)_45%,rgba(241,246,255,0.96)_100%)]" />
+      <div className="grid gap-6 xl:grid-cols-[minmax(0,1.16fr)_minmax(320px,0.84fr)]">
+        <div className="space-y-6">
+          <div className="h-[290px] animate-pulse rounded-[26px] border border-slate-200/80 bg-white" />
+          <div className="h-[360px] animate-pulse rounded-[26px] border border-slate-200/80 bg-white" />
+        </div>
+        <div className="space-y-6">
+          <div className="h-[240px] animate-pulse rounded-[26px] border border-slate-200/80 bg-white" />
+          <div className="h-[220px] animate-pulse rounded-[26px] border border-slate-200/80 bg-white" />
+        </div>
+      </div>
+      <div className="h-[360px] animate-pulse rounded-[26px] border border-slate-200/80 bg-white" />
+    </div>
+  );
+}
+
 export function EnvironmentSettings() {
   const [config, setConfig] = useState<Config | null>(null);
   const [preview, setPreview] = useState<EnvironmentPreview | null>(null);
@@ -185,268 +327,478 @@ export function EnvironmentSettings() {
     [updateEnvironment],
   );
 
+  const summary = useMemo(() => {
+    const enabledOverrides = environment.variables.filter(
+      (entry) => entry.enabled && entry.key.trim(),
+    ).length;
+    const shellImportMeta = resolveShellImportMeta(preview?.shellImport.status);
+
+    return {
+      shellImportMeta,
+      overrideCount: environment.variables.length,
+      enabledOverrides,
+      previewCount: preview?.entries.length ?? 0,
+    };
+  }, [environment.variables, preview]);
+
   if (loading) {
-    return (
-      <div className="flex items-center justify-center py-16 text-muted-foreground">
-        <RefreshCw className="mr-2 h-5 w-5 animate-spin" />
-        正在加载环境变量配置...
-      </div>
-    );
+    return <LoadingSkeleton />;
   }
 
   return (
-    <div className="space-y-6">
-      <div className="rounded-xl border bg-card p-4">
-        <div className="flex flex-col gap-4 lg:flex-row lg:items-start lg:justify-between">
-          <div className="space-y-2">
-            <div className="flex items-center gap-2">
-              <Variable className="h-5 w-5 text-primary" />
-              <h3 className="text-base font-semibold">统一环境变量控制</h3>
-            </div>
-            <p className="text-sm text-muted-foreground">
-              按 Shell
-              环境导入与显式环境变量覆盖统一管理运行时环境。模型、搜索和
-              OpenClaw 等模块只消费这里的结果，不再各自维护独立环境逻辑。
-            </p>
-            <p className="text-xs text-muted-foreground">
-              兼容说明：旧入口仍可编辑，但底层已统一写入同一份环境配置。
-            </p>
-          </div>
-          <div className="flex flex-wrap items-center gap-2">
-            <button
-              type="button"
-              onClick={() => void refreshPreview()}
-              disabled={refreshingPreview}
-              className="inline-flex items-center gap-2 rounded-lg border px-3 py-2 text-sm hover:bg-muted disabled:opacity-50"
-            >
-              <RefreshCw
-                className={`h-4 w-4 ${refreshingPreview ? "animate-spin" : ""}`}
-              />
-              刷新预览
-            </button>
-            <button
-              type="button"
-              onClick={() => void handleSave()}
-              disabled={saving}
-              className="inline-flex items-center gap-2 rounded-lg bg-primary px-3 py-2 text-sm font-medium text-primary-foreground hover:bg-primary/90 disabled:opacity-50"
-            >
-              <Save className="h-4 w-4" />
-              {saving ? "保存中..." : "保存并应用"}
-            </button>
-          </div>
-        </div>
-      </div>
-
+    <div className="space-y-6 pb-8">
       {message ? (
         <div
-          className={`rounded-xl border px-4 py-3 text-sm ${
+          className={cn(
+            "flex items-center justify-between gap-4 rounded-[20px] border px-4 py-3 text-sm shadow-sm shadow-slate-950/5",
             message.type === "success"
-              ? "border-emerald-200 bg-emerald-50 text-emerald-700 dark:border-emerald-900 dark:bg-emerald-950/40 dark:text-emerald-300"
-              : "border-destructive/30 bg-destructive/10 text-destructive"
-          }`}
+              ? "border-emerald-200 bg-emerald-50/90 text-emerald-700"
+              : "border-rose-200 bg-rose-50/90 text-rose-700",
+          )}
         >
-          {message.text}
+          <div className="flex items-center gap-2">
+            <ShieldAlert className="h-4 w-4" />
+            <span>{message.text}</span>
+          </div>
+          {message.type === "error" ? (
+            <button
+              type="button"
+              onClick={() => void loadPageData()}
+              className="rounded-full border border-current/20 bg-white px-3 py-1.5 text-xs font-medium transition hover:bg-white/90"
+            >
+              重新加载
+            </button>
+          ) : null}
         </div>
       ) : null}
 
-      <section className="rounded-xl border bg-card">
-        <div className="border-b px-5 py-4">
-          <div className="flex items-center gap-2">
-            <Terminal className="h-5 w-5 text-primary" />
-            <h4 className="font-semibold">Shell 环境导入</h4>
-          </div>
-          <p className="mt-2 text-sm text-muted-foreground">
-            可选地从登录 Shell 读取 PATH、代理等环境变量，再与显式覆盖项合并。
-          </p>
-        </div>
-        <div className="grid gap-4 px-5 py-4 lg:grid-cols-[1fr_220px]">
-          <div className="rounded-lg border p-4">
-            <div className="flex items-center justify-between gap-4">
-              <div>
-                <div className="font-medium">启用 Shell 环境导入</div>
-                <p className="mt-1 text-sm text-muted-foreground">
-                  适合需要继承登录 Shell 中 PATH、代理、Node
-                  版本管理器配置的场景。
+      <section className="relative overflow-hidden rounded-[30px] border border-emerald-200/70 bg-[linear-gradient(135deg,rgba(244,251,248,0.98)_0%,rgba(248,250,252,0.98)_45%,rgba(241,246,255,0.96)_100%)] shadow-sm shadow-slate-950/5">
+        <div className="pointer-events-none absolute -left-20 top-[-72px] h-56 w-56 rounded-full bg-emerald-200/30 blur-3xl" />
+        <div className="pointer-events-none absolute right-[-76px] top-[-24px] h-56 w-56 rounded-full bg-sky-200/28 blur-3xl" />
+
+        <div className="relative flex flex-col gap-6 p-6 lg:p-8">
+          <div className="grid gap-6 xl:grid-cols-[minmax(0,1.1fr)_minmax(360px,0.9fr)]">
+            <div className="max-w-3xl space-y-5">
+              <span className="inline-flex items-center rounded-full border border-emerald-200 bg-white/85 px-3 py-1 text-xs font-semibold tracking-[0.16em] text-emerald-700 shadow-sm">
+                ENVIRONMENT LAYER
+              </span>
+              <div className="space-y-2">
+                <p className="text-[28px] font-semibold tracking-tight text-slate-900">
+                  用同一层环境变量结果驱动运行时、搜索和服务配置
+                </p>
+                <p className="max-w-2xl text-sm leading-7 text-slate-600">
+                  这里把 Shell 导入、显式覆盖和运行时预览放在同一个工作区里，
+                  减少分散配置。敏感值默认保持掩码，避免在设置页里意外暴露。
                 </p>
               </div>
-              <Switch
-                checked={environment.shell_import.enabled}
-                onCheckedChange={(checked) =>
-                  updateEnvironment((prev) => ({
-                    ...prev,
-                    shell_import: {
-                      ...prev.shell_import,
-                      enabled: checked,
-                    },
-                  }))
+
+              <div className="flex flex-wrap items-center gap-2">
+                <span className="rounded-full border border-white/90 bg-white/88 px-3 py-1.5 text-xs font-medium text-slate-600 shadow-sm">
+                  旧入口最终都会写入同一份环境配置
+                </span>
+                <span className="rounded-full border border-white/90 bg-white/88 px-3 py-1.5 text-xs font-medium text-slate-600 shadow-sm">
+                  显式覆盖优先级高于 Shell 导入
+                </span>
+                <span className="rounded-full border border-white/90 bg-white/88 px-3 py-1.5 text-xs font-medium text-slate-600 shadow-sm">
+                  生效结果以底部预览为准
+                </span>
+              </div>
+            </div>
+
+            <div className="grid gap-3 sm:grid-cols-3 xl:grid-cols-1 xl:content-start">
+              <SummaryStat
+                label="Shell 导入"
+                value={summary.shellImportMeta.label}
+                description={
+                  preview?.shellImport.message ||
+                  "根据当前开关和状态展示导入结果。"
                 }
               />
+              <SummaryStat
+                label="覆盖项"
+                value={`${summary.enabledOverrides}/${summary.overrideCount}`}
+                description="已启用覆盖项 / 总覆盖项，用于快速判断当前是否存在有效显式变量。"
+              />
+              <SummaryStat
+                label="预览变量"
+                value={summary.previewCount.toString()}
+                description="当前统一环境层最终提供给运行时的变量数量。"
+              />
             </div>
           </div>
 
-          <div className="rounded-lg border p-4">
-            <label className="mb-2 block text-sm font-medium">
-              导入超时（ms）
-            </label>
-            <input
-              type="number"
-              min={100}
-              max={30000}
-              step={100}
-              value={environment.shell_import.timeout_ms}
-              onChange={(event) =>
-                updateEnvironment((prev) => ({
-                  ...prev,
-                  shell_import: {
-                    ...prev.shell_import,
-                    timeout_ms: Math.min(
-                      30000,
-                      Math.max(
-                        100,
-                        Number.parseInt(event.target.value, 10) || 1500,
-                      ),
-                    ),
-                  },
-                }))
-              }
-              className="w-full rounded-lg border bg-background px-3 py-2 text-sm"
-            />
-            <p className="mt-2 text-xs text-muted-foreground">
-              超时后会回退为仅使用显式覆盖，不阻塞整体运行。
-            </p>
-          </div>
-        </div>
-        {preview ? (
-          <div className="border-t px-5 py-4 text-sm">
+          <div className="flex flex-col gap-4 rounded-[24px] border border-white/90 bg-white/80 p-4 shadow-sm lg:flex-row lg:items-center lg:justify-between">
+            <div className="space-y-2">
+              <div className="flex flex-wrap items-center gap-2">
+                <span
+                  className={cn(
+                    "rounded-full border px-3 py-1 text-xs font-medium",
+                    summary.shellImportMeta.className,
+                  )}
+                >
+                  Shell 导入 {summary.shellImportMeta.label}
+                </span>
+                <span className="rounded-full border border-slate-200 bg-white px-3 py-1 text-xs font-medium text-slate-500">
+                  已导入 {preview?.shellImport.importedCount ?? 0} 项
+                </span>
+                <span className="rounded-full border border-slate-200 bg-white px-3 py-1 text-xs font-medium text-slate-500">
+                  耗时 {formatDuration(preview?.shellImport.durationMs)}
+                </span>
+              </div>
+              <p className="text-sm leading-6 text-slate-600">
+                {preview?.shellImport.message ||
+                  "保存后会重新计算当前统一环境层的结果。"}
+              </p>
+            </div>
+
             <div className="flex flex-wrap items-center gap-2">
-              <span className="font-medium">当前状态：</span>
+              <button
+                type="button"
+                onClick={() => void refreshPreview()}
+                disabled={refreshingPreview}
+                className={SECONDARY_BUTTON_CLASS_NAME}
+              >
+                <RefreshCw
+                  className={cn(
+                    "h-4 w-4",
+                    refreshingPreview ? "animate-spin" : "",
+                  )}
+                />
+                刷新预览
+              </button>
+              <button
+                type="button"
+                onClick={() => void handleSave()}
+                disabled={saving}
+                className={PRIMARY_BUTTON_CLASS_NAME}
+              >
+                <Save className="h-4 w-4" />
+                {saving ? "保存中..." : "保存并应用"}
+              </button>
+            </div>
+          </div>
+        </div>
+      </section>
+
+      <div className="grid gap-6 xl:grid-cols-[minmax(0,1.16fr)_minmax(320px,0.84fr)]">
+        <div className="space-y-6">
+          <SurfacePanel
+            icon={Terminal}
+            title="Shell 环境导入"
+            description="可选地从登录 Shell 读取 PATH、代理和版本管理器环境，再与显式覆盖项合并。"
+            aside={
               <span
-                className={`rounded-full px-2 py-0.5 text-xs ${
-                  preview.shellImport.status === "ok"
-                    ? "bg-emerald-100 text-emerald-700 dark:bg-emerald-950/50 dark:text-emerald-300"
-                    : preview.shellImport.status === "disabled"
-                      ? "bg-muted text-muted-foreground"
-                      : "bg-amber-100 text-amber-700 dark:bg-amber-950/50 dark:text-amber-300"
-                }`}
+                className={cn(
+                  "rounded-full border px-3 py-1 text-xs font-medium",
+                  summary.shellImportMeta.className,
+                )}
               >
-                {preview.shellImport.status}
+                {summary.shellImportMeta.label}
               </span>
-              <span className="text-muted-foreground">
-                {preview.shellImport.message}
-              </span>
-            </div>
-          </div>
-        ) : null}
-      </section>
-
-      <section className="rounded-xl border bg-card">
-        <div className="border-b px-5 py-4">
-          <div className="flex items-center justify-between gap-3">
-            <div>
-              <div className="flex items-center gap-2">
-                <Variable className="h-5 w-5 text-primary" />
-                <h4 className="font-semibold">环境变量覆盖</h4>
-              </div>
-              <p className="mt-2 text-sm text-muted-foreground">
-                显式设置或覆盖运行时环境变量。这里的配置优先级高于 Shell
-                导入与旧入口兼容逻辑。
-              </p>
-            </div>
-            <button
-              type="button"
-              onClick={addVariable}
-              className="inline-flex items-center gap-2 rounded-lg border px-3 py-2 text-sm hover:bg-muted"
-            >
-              <Plus className="h-4 w-4" />
-              添加变量
-            </button>
-          </div>
-        </div>
-        <div className="space-y-3 px-5 py-4">
-          {environment.variables.length === 0 ? (
-            <div className="rounded-lg border border-dashed p-6 text-center text-sm text-muted-foreground">
-              暂无显式环境变量覆盖，当前仅使用 Shell
-              导入与业务模块推导的运行时变量。
-            </div>
-          ) : (
-            environment.variables.map((entry, index) => (
-              <div
-                key={`${entry.key}-${index}`}
-                className="grid gap-3 rounded-lg border p-4 lg:grid-cols-[140px_1fr_160px_56px]"
-              >
-                <div className="space-y-2">
-                  <label className="block text-xs font-medium text-muted-foreground">
-                    变量名
-                  </label>
-                  <input
-                    type="text"
-                    value={entry.key}
-                    onChange={(event) =>
-                      updateVariable(index, { key: event.target.value })
-                    }
-                    placeholder="例如 OPENAI_BASE_URL"
-                    className="w-full rounded-lg border bg-background px-3 py-2 text-sm"
-                  />
-                </div>
-                <div className="space-y-2">
-                  <label className="block text-xs font-medium text-muted-foreground">
-                    变量值
-                  </label>
-                  <input
-                    type="text"
-                    value={entry.value}
-                    onChange={(event) =>
-                      updateVariable(index, { value: event.target.value })
-                    }
-                    placeholder="变量值"
-                    className="w-full rounded-lg border bg-background px-3 py-2 text-sm"
-                  />
-                </div>
-                <div className="flex items-end justify-between gap-3 lg:justify-start">
-                  <div className="space-y-2">
-                    <label className="block text-xs font-medium text-muted-foreground">
-                      启用
-                    </label>
-                    <Switch
-                      checked={entry.enabled}
-                      onCheckedChange={(checked) =>
-                        updateVariable(index, { enabled: checked })
-                      }
-                    />
+            }
+          >
+            <div className="grid gap-4 lg:grid-cols-[minmax(0,1fr)_280px]">
+              <div className="rounded-[22px] border border-slate-200/80 bg-slate-50/60 p-4">
+                <div className="flex flex-col gap-4 sm:flex-row sm:items-start sm:justify-between">
+                  <div className="space-y-1">
+                    <p className="text-sm font-semibold text-slate-900">
+                      启用 Shell 环境导入
+                    </p>
+                    <p className="text-sm leading-6 text-slate-500">
+                      适合需要继承 PATH、代理、Node 版本管理器等登录 Shell
+                      环境的场景。
+                    </p>
                   </div>
-                </div>
-                <div className="flex items-end justify-end">
-                  <button
-                    type="button"
-                    onClick={() => removeVariable(index)}
-                    className="rounded-lg border p-2 text-muted-foreground hover:bg-muted hover:text-foreground"
-                    title="删除变量"
-                  >
-                    <Trash2 className="h-4 w-4" />
-                  </button>
+                  <Switch
+                    aria-label="启用 Shell 环境导入"
+                    checked={environment.shell_import.enabled}
+                    onCheckedChange={(checked) =>
+                      updateEnvironment((prev) => ({
+                        ...prev,
+                        shell_import: {
+                          ...prev.shell_import,
+                          enabled: checked,
+                        },
+                      }))
+                    }
+                  />
                 </div>
               </div>
-            ))
-          )}
-        </div>
-      </section>
 
-      <section className="rounded-xl border bg-card">
-        <div className="border-b px-5 py-4">
-          <div className="flex items-center justify-between gap-3">
-            <div>
-              <div className="flex items-center gap-2">
-                <ShieldAlert className="h-5 w-5 text-primary" />
-                <h4 className="font-semibold">生效预览</h4>
+              <div className="rounded-[22px] border border-slate-200/80 bg-slate-50/60 p-4">
+                <FieldBlock
+                  label="导入超时（ms）"
+                  htmlFor="environment-shell-import-timeout"
+                  hint="超时后会回退为仅使用显式覆盖，不阻塞整体运行。"
+                >
+                  <input
+                    id="environment-shell-import-timeout"
+                    type="number"
+                    min={100}
+                    max={30000}
+                    step={100}
+                    value={environment.shell_import.timeout_ms}
+                    onChange={(event) =>
+                      updateEnvironment((prev) => ({
+                        ...prev,
+                        shell_import: {
+                          ...prev.shell_import,
+                          timeout_ms: Math.min(
+                            30000,
+                            Math.max(
+                              100,
+                              Number.parseInt(event.target.value, 10) || 1500,
+                            ),
+                          ),
+                        },
+                      }))
+                    }
+                    className={INPUT_CLASS_NAME}
+                  />
+                </FieldBlock>
               </div>
-              <p className="mt-2 text-sm text-muted-foreground">
-                展示当前统一环境层最终提供给运行时的关键变量，以及它们的来源。
-              </p>
             </div>
+
+            <div className="mt-4 grid gap-3 md:grid-cols-3">
+              <div className="rounded-[22px] border border-slate-200/80 bg-white p-4">
+                <p className="text-sm font-semibold text-slate-900">导入状态</p>
+                <p className="mt-2 text-sm leading-6 text-slate-500">
+                  {preview?.shellImport.message ||
+                    "尚未获取导入状态，保存后可查看最终结果。"}
+                </p>
+              </div>
+              <div className="rounded-[22px] border border-slate-200/80 bg-white p-4">
+                <p className="text-sm font-semibold text-slate-900">已导入项</p>
+                <p className="mt-2 text-2xl font-semibold tracking-tight text-slate-900">
+                  {preview?.shellImport.importedCount ?? 0}
+                </p>
+                <p className="mt-1 text-xs leading-5 text-slate-500">
+                  当前从 Shell 收集到的环境变量数量。
+                </p>
+              </div>
+              <div className="rounded-[22px] border border-slate-200/80 bg-white p-4">
+                <p className="text-sm font-semibold text-slate-900">最近耗时</p>
+                <p className="mt-2 text-2xl font-semibold tracking-tight text-slate-900">
+                  {formatDuration(preview?.shellImport.durationMs)}
+                </p>
+                <p className="mt-1 text-xs leading-5 text-slate-500">
+                  用于判断当前 Shell 导入是否过慢。
+                </p>
+              </div>
+            </div>
+          </SurfacePanel>
+
+          <SurfacePanel
+            icon={Variable}
+            title="环境变量覆盖"
+            description="显式设置或覆盖运行时环境变量，优先级高于 Shell 导入与旧入口兼容逻辑。"
+            aside={
+              <button
+                type="button"
+                onClick={addVariable}
+                className={SECONDARY_BUTTON_CLASS_NAME}
+              >
+                <Plus className="h-4 w-4" />
+                添加变量
+              </button>
+            }
+          >
+            {environment.variables.length === 0 ? (
+              <div className="rounded-[22px] border border-dashed border-slate-300 bg-slate-50/60 p-8 text-center">
+                <p className="text-sm font-medium text-slate-700">
+                  暂无显式环境变量覆盖
+                </p>
+                <p className="mt-2 text-sm leading-6 text-slate-500">
+                  当前仅使用 Shell 导入与业务模块推导的运行时变量，适合先观察实际生效结果。
+                </p>
+              </div>
+            ) : (
+              <div className="space-y-3">
+                {environment.variables.map((entry, index) => (
+                  <article
+                    key={`${entry.key}-${index}`}
+                    className="rounded-[22px] border border-slate-200/80 bg-slate-50/60 p-4"
+                  >
+                    <div className="grid gap-4 xl:grid-cols-[minmax(0,1fr)_minmax(0,1.2fr)_180px_56px]">
+                      <FieldBlock
+                        label="变量名"
+                        htmlFor={`environment-variable-key-${index}`}
+                      >
+                        <input
+                          id={`environment-variable-key-${index}`}
+                          type="text"
+                          value={entry.key}
+                          onChange={(event) =>
+                            updateVariable(index, { key: event.target.value })
+                          }
+                          placeholder="例如 OPENAI_BASE_URL"
+                          className={INPUT_CLASS_NAME}
+                        />
+                      </FieldBlock>
+
+                      <FieldBlock
+                        label="变量值"
+                        htmlFor={`environment-variable-value-${index}`}
+                      >
+                        <input
+                          id={`environment-variable-value-${index}`}
+                          type="text"
+                          value={entry.value}
+                          onChange={(event) =>
+                            updateVariable(index, { value: event.target.value })
+                          }
+                          placeholder="变量值"
+                          className={INPUT_CLASS_NAME}
+                        />
+                      </FieldBlock>
+
+                      <div className="flex flex-col justify-between gap-3 rounded-[18px] border border-slate-200 bg-white p-3">
+                        <div className="space-y-1">
+                          <p className="text-sm font-medium text-slate-900">
+                            是否启用
+                          </p>
+                          <p className="text-xs leading-5 text-slate-500">
+                            关闭后会保留该条目，但不参与最终合并。
+                          </p>
+                        </div>
+                        <div className="flex items-center justify-between gap-3">
+                          <span
+                            className={cn(
+                              "rounded-full border px-2.5 py-1 text-[11px] font-medium",
+                              entry.enabled
+                                ? "border-emerald-200 bg-emerald-50 text-emerald-700"
+                                : "border-slate-200 bg-slate-100 text-slate-500",
+                            )}
+                          >
+                            {entry.enabled ? "已启用" : "未启用"}
+                          </span>
+                          <Switch
+                            aria-label={`启用变量 ${index + 1}`}
+                            checked={entry.enabled}
+                            onCheckedChange={(checked) =>
+                              updateVariable(index, { enabled: checked })
+                            }
+                          />
+                        </div>
+                      </div>
+
+                      <div className="flex items-end justify-end">
+                        <button
+                          type="button"
+                          onClick={() => removeVariable(index)}
+                          className="flex h-11 w-11 items-center justify-center rounded-2xl border border-slate-200 bg-white text-slate-500 transition hover:border-rose-200 hover:bg-rose-50 hover:text-rose-600"
+                          title="删除变量"
+                        >
+                          <Trash2 className="h-4 w-4" />
+                        </button>
+                      </div>
+                    </div>
+                  </article>
+                ))}
+              </div>
+            )}
+          </SurfacePanel>
+        </div>
+
+        <div className="space-y-6">
+          <SurfacePanel
+            icon={Layers3}
+            title="合并规则"
+            description="先看清楚优先级，再决定变量应放在 Shell 里还是显式覆盖里。"
+          >
+            <div className="space-y-3">
+              <div className="rounded-[22px] border border-slate-200/80 bg-slate-50/60 p-4">
+                <div className="flex items-center justify-between gap-3">
+                  <p className="text-sm font-semibold text-slate-900">
+                    优先级 1
+                  </p>
+                  <span className="rounded-full border border-emerald-200 bg-emerald-50 px-3 py-1 text-xs font-medium text-emerald-700">
+                    最终生效
+                  </span>
+                </div>
+                <p className="mt-2 text-sm leading-6 text-slate-500">
+                  显式环境变量覆盖会直接覆盖同名值，适合保存代理、API Host
+                  或调试开关。
+                </p>
+              </div>
+              <div className="rounded-[22px] border border-slate-200/80 bg-slate-50/60 p-4">
+                <div className="flex items-center justify-between gap-3">
+                  <p className="text-sm font-semibold text-slate-900">
+                    优先级 2
+                  </p>
+                  <span className="rounded-full border border-slate-200 bg-white px-3 py-1 text-xs font-medium text-slate-500">
+                    补充来源
+                  </span>
+                </div>
+                <p className="mt-2 text-sm leading-6 text-slate-500">
+                  Shell 导入负责继承登录环境里的 PATH、代理与工具链变量，
+                  适合减少重复录入。
+                </p>
+              </div>
+              <div className="rounded-[22px] border border-slate-200/80 bg-slate-50/60 p-4">
+                <div className="flex items-center justify-between gap-3">
+                  <p className="text-sm font-semibold text-slate-900">
+                    兼容入口
+                  </p>
+                  <span className="rounded-full border border-amber-200 bg-amber-50 px-3 py-1 text-xs font-medium text-amber-700">
+                    已统一
+                  </span>
+                </div>
+                <p className="mt-2 text-sm leading-6 text-slate-500">
+                  网络搜索等旧入口仍可编辑，但最终都会回到同一份环境配置，避免来源打架。
+                </p>
+              </div>
+            </div>
+          </SurfacePanel>
+
+          <SurfacePanel
+            icon={ShieldAlert}
+            title="使用提示"
+            description="这页主要服务于需要稳定管理运行时环境的桌面场景。"
+          >
+            <div className="space-y-3">
+              <div className="rounded-[22px] border border-slate-200/80 bg-slate-50/60 p-4">
+                <p className="text-sm font-semibold text-slate-900">
+                  敏感值默认掩码
+                </p>
+                <p className="mt-2 text-sm leading-6 text-slate-500">
+                  预览区默认展示掩码，只有在明确点击“显示值”后才会直接显示敏感内容。
+                </p>
+              </div>
+              <div className="rounded-[22px] border border-slate-200/80 bg-slate-50/60 p-4">
+                <p className="text-sm font-semibold text-slate-900">
+                  先改覆盖，再看预览
+                </p>
+                <p className="mt-2 text-sm leading-6 text-slate-500">
+                  如果只是想覆盖少量变量，优先直接添加覆盖项，然后通过底部预览确认来源是否正确。
+                </p>
+              </div>
+              <div className="rounded-[22px] border border-slate-200/80 bg-slate-50/60 p-4">
+                <p className="text-sm font-semibold text-slate-900">
+                  跨平台注意
+                </p>
+                <p className="mt-2 text-sm leading-6 text-slate-500">
+                  Shell 导入会受到当前系统 Shell 与登录环境差异影响。若需要稳定结果，优先使用显式覆盖项。
+                </p>
+              </div>
+            </div>
+          </SurfacePanel>
+        </div>
+      </div>
+
+      <SurfacePanel
+        icon={ShieldAlert}
+        title="生效预览"
+        description="展示统一环境层最终提供给运行时的关键变量，以及它们当前来自哪里。"
+        aside={
+          <>
+            <span className="rounded-full border border-slate-200 bg-slate-100 px-3 py-1 text-xs font-medium text-slate-500">
+              {showValues ? "已显示真实值" : "敏感值默认掩码"}
+            </span>
             <button
               type="button"
               onClick={() => setShowValues((prev) => !prev)}
-              className="inline-flex items-center gap-2 rounded-lg border px-3 py-2 text-sm hover:bg-muted"
+              className={SECONDARY_BUTTON_CLASS_NAME}
             >
               {showValues ? (
                 <EyeOff className="h-4 w-4" />
@@ -455,54 +807,73 @@ export function EnvironmentSettings() {
               )}
               {showValues ? "隐藏值" : "显示值"}
             </button>
+          </>
+        }
+      >
+        {!preview || preview.entries.length === 0 ? (
+          <div className="rounded-[22px] border border-dashed border-slate-300 bg-slate-50/60 p-8 text-center">
+            <p className="text-sm font-medium text-slate-700">
+              暂无可预览的环境变量
+            </p>
+            <p className="mt-2 text-sm leading-6 text-slate-500">
+              保存配置后会重新计算统一环境层，届时可在这里确认最终生效值与来源。
+            </p>
           </div>
-        </div>
-        <div className="px-5 py-4">
-          {!preview || preview.entries.length === 0 ? (
-            <div className="rounded-lg border border-dashed p-6 text-center text-sm text-muted-foreground">
-              暂无可预览的环境变量。
+        ) : (
+          <div className="overflow-hidden rounded-[24px] border border-slate-200/80 bg-white">
+            <div className="hidden grid-cols-[220px_minmax(0,1fr)_180px] border-b border-slate-200/80 bg-slate-50/80 px-5 py-3 text-xs font-medium uppercase tracking-[0.14em] text-slate-500 md:grid">
+              <span>变量</span>
+              <span>当前值</span>
+              <span>来源</span>
             </div>
-          ) : (
-            <div className="overflow-hidden rounded-lg border">
-              <div className="grid grid-cols-[220px_1fr_160px] border-b bg-muted/40 px-4 py-3 text-xs font-medium uppercase tracking-wide text-muted-foreground">
-                <span>变量</span>
-                <span>当前值</span>
-                <span>来源</span>
-              </div>
-              <div className="divide-y">
-                {preview.entries.map((entry) => (
-                  <div
-                    key={entry.key}
-                    className="grid grid-cols-[220px_1fr_160px] items-start gap-3 px-4 py-3 text-sm"
-                  >
-                    <div className="font-mono font-medium">{entry.key}</div>
-                    <div className="space-y-1">
-                      <div className="font-mono break-all text-muted-foreground">
-                        {showValues || !entry.sensitive
-                          ? entry.value
-                          : entry.maskedValue}
-                      </div>
-                      {entry.overriddenSources.length > 0 ? (
-                        <div className="text-xs text-amber-600 dark:text-amber-300">
-                          已覆盖来源：
-                          {entry.overriddenSources
-                            .map(formatSourceLabel)
-                            .join("、")}
-                        </div>
-                      ) : null}
-                    </div>
-                    <div>
-                      <span className="inline-flex rounded-full bg-muted px-2 py-0.5 text-xs text-muted-foreground">
-                        {entry.sourceLabel}
-                      </span>
-                    </div>
+            <div className="divide-y divide-slate-200/80">
+              {preview.entries.map((entry) => (
+                <article
+                  key={entry.key}
+                  className="grid gap-4 px-5 py-4 md:grid-cols-[220px_minmax(0,1fr)_180px] md:items-start"
+                >
+                  <div className="space-y-1">
+                    <p className="text-[11px] font-medium uppercase tracking-[0.14em] text-slate-400 md:hidden">
+                      变量
+                    </p>
+                    <p className="font-mono text-sm font-medium text-slate-900">
+                      {entry.key}
+                    </p>
                   </div>
-                ))}
-              </div>
+
+                  <div className="space-y-2">
+                    <p className="text-[11px] font-medium uppercase tracking-[0.14em] text-slate-400 md:hidden">
+                      当前值
+                    </p>
+                    <p className="rounded-[16px] border border-slate-200/80 bg-slate-50/70 px-3 py-2 font-mono text-sm break-all text-slate-600">
+                      {showValues || !entry.sensitive
+                        ? entry.value
+                        : entry.maskedValue}
+                    </p>
+                    {entry.overriddenSources.length > 0 ? (
+                      <p className="text-xs leading-5 text-amber-600">
+                        已覆盖来源：
+                        {entry.overriddenSources
+                          .map(formatSourceLabel)
+                          .join("、")}
+                      </p>
+                    ) : null}
+                  </div>
+
+                  <div className="space-y-2">
+                    <p className="text-[11px] font-medium uppercase tracking-[0.14em] text-slate-400 md:hidden">
+                      来源
+                    </p>
+                    <span className="inline-flex rounded-full border border-slate-200 bg-slate-100 px-3 py-1 text-xs font-medium text-slate-600">
+                      {entry.sourceLabel}
+                    </span>
+                  </div>
+                </article>
+              ))}
             </div>
-          )}
-        </div>
-      </section>
+          </div>
+        )}
+      </SurfacePanel>
     </div>
   );
 }
diff --git a/src/components/settings-v2/system/security-performance/index.test.tsx b/src/components/settings-v2/system/security-performance/index.test.tsx
new file mode 100644
index 000000000..3a5adbef3
--- /dev/null
+++ b/src/components/settings-v2/system/security-performance/index.test.tsx
@@ -0,0 +1,286 @@
+import { act } from "react";
+import { createRoot, type Root } from "react-dom/client";
+import { afterEach, beforeEach, describe, expect, it, vi } from "vitest";
+
+const {
+  mockGetRateLimitConfig,
+  mockUpdateRateLimitConfig,
+  mockGetConversationConfig,
+  mockUpdateConversationConfig,
+  mockGetHintRoutes,
+  mockUpdateHintRoutes,
+  mockGetPairingConfig,
+  mockUpdatePairingConfig,
+} = vi.hoisted(() => ({
+  mockGetRateLimitConfig: vi.fn(),
+  mockUpdateRateLimitConfig: vi.fn(),
+  mockGetConversationConfig: vi.fn(),
+  mockUpdateConversationConfig: vi.fn(),
+  mockGetHintRoutes: vi.fn(),
+  mockUpdateHintRoutes: vi.fn(),
+  mockGetPairingConfig: vi.fn(),
+  mockUpdatePairingConfig: vi.fn(),
+}));
+
+const { mockToastSuccess, mockToastError } = vi.hoisted(() => ({
+  mockToastSuccess: vi.fn(),
+  mockToastError: vi.fn(),
+}));
+
+vi.mock("@/lib/api/securityPerformance", () => ({
+  getRateLimitConfig: mockGetRateLimitConfig,
+  updateRateLimitConfig: mockUpdateRateLimitConfig,
+  getConversationConfig: mockGetConversationConfig,
+  updateConversationConfig: mockUpdateConversationConfig,
+  getHintRoutes: mockGetHintRoutes,
+  updateHintRoutes: mockUpdateHintRoutes,
+  getPairingConfig: mockGetPairingConfig,
+  updatePairingConfig: mockUpdatePairingConfig,
+}));
+
+vi.mock("sonner", () => ({
+  toast: {
+    success: mockToastSuccess,
+    error: mockToastError,
+  },
+}));
+
+import { SecurityPerformanceSettings } from ".";
+
+interface Mounted {
+  container: HTMLDivElement;
+  root: Root;
+}
+
+const mounted: Mounted[] = [];
+
+function renderComponent(): HTMLDivElement {
+  const container = document.createElement("div");
+  document.body.appendChild(container);
+  const root = createRoot(container);
+
+  act(() => {
+    root.render(<SecurityPerformanceSettings />);
+  });
+
+  mounted.push({ container, root });
+  return container;
+}
+
+async function flushEffects() {
+  await act(async () => {
+    await Promise.resolve();
+  });
+}
+
+async function waitForLoad() {
+  await flushEffects();
+  await flushEffects();
+}
+
+function findButton(container: HTMLElement, text: string): HTMLButtonElement {
+  const button = Array.from(container.querySelectorAll("button")).find((item) =>
+    item.textContent?.includes(text),
+  );
+  if (!button) {
+    throw new Error(`未找到按钮: ${text}`);
+  }
+  return button as HTMLButtonElement;
+}
+
+function findSwitch(container: HTMLElement, ariaLabel: string): HTMLButtonElement {
+  const button = container.querySelector<HTMLButtonElement>(
+    `button[aria-label="${ariaLabel}"]`,
+  );
+  if (!button) {
+    throw new Error(`未找到开关: ${ariaLabel}`);
+  }
+  return button;
+}
+
+function findInput(container: HTMLElement, id: string): HTMLInputElement {
+  const input = container.querySelector<HTMLInputElement>(`#${id}`);
+  if (!input) {
+    throw new Error(`未找到输入框: ${id}`);
+  }
+  return input;
+}
+
+async function clickButton(button: HTMLButtonElement) {
+  await act(async () => {
+    button.dispatchEvent(new MouseEvent("click", { bubbles: true }));
+    await flushEffects();
+  });
+}
+
+async function setInputValue(input: HTMLInputElement, value: string) {
+  const nativeSetter = Object.getOwnPropertyDescriptor(
+    window.HTMLInputElement.prototype,
+    "value",
+  )?.set;
+  if (!nativeSetter) {
+    throw new Error("未找到 input value setter");
+  }
+
+  await act(async () => {
+    nativeSetter.call(input, value);
+    input.dispatchEvent(new Event("input", { bubbles: true }));
+    await flushEffects();
+  });
+}
+
+async function blurInput(input: HTMLInputElement) {
+  await act(async () => {
+    input.focus();
+    input.dispatchEvent(new FocusEvent("focus", { bubbles: true }));
+    input.dispatchEvent(new FocusEvent("blur", { bubbles: true }));
+    input.blur();
+    await flushEffects();
+  });
+}
+
+beforeEach(() => {
+  (
+    globalThis as typeof globalThis & {
+      IS_REACT_ACT_ENVIRONMENT?: boolean;
+      ResizeObserver?: typeof ResizeObserver;
+    }
+  ).IS_REACT_ACT_ENVIRONMENT = true;
+
+  (
+    globalThis as typeof globalThis & {
+      ResizeObserver?: typeof ResizeObserver;
+    }
+  ).ResizeObserver = class ResizeObserver {
+    observe() {}
+    unobserve() {}
+    disconnect() {}
+  };
+
+  vi.clearAllMocks();
+
+  mockGetRateLimitConfig.mockResolvedValue({
+    enabled: false,
+    requests_per_minute: 60,
+    window_secs: 60,
+  });
+  mockUpdateRateLimitConfig.mockResolvedValue(undefined);
+
+  mockGetConversationConfig.mockResolvedValue({
+    trim_enabled: true,
+    max_messages: 80,
+    summary_enabled: false,
+  });
+  mockUpdateConversationConfig.mockResolvedValue(undefined);
+
+  mockGetHintRoutes.mockResolvedValue([
+    {
+      hint: "translate",
+      provider: "openai",
+      model: "gpt-4.1",
+    },
+  ]);
+  mockUpdateHintRoutes.mockResolvedValue(undefined);
+
+  mockGetPairingConfig.mockResolvedValue({
+    enabled: false,
+  });
+  mockUpdatePairingConfig.mockResolvedValue(undefined);
+});
+
+afterEach(() => {
+  while (mounted.length > 0) {
+    const target = mounted.pop();
+    if (!target) {
+      break;
+    }
+
+    act(() => {
+      target.root.unmount();
+    });
+    target.container.remove();
+  }
+
+  vi.clearAllMocks();
+});
+
+describe("SecurityPerformanceSettings", () => {
+  it("应渲染新的安全与性能总览和主要分区", async () => {
+    const container = renderComponent();
+    await waitForLoad();
+
+    const text = container.textContent ?? "";
+    expect(text).toContain("SECURITY CONTROL");
+    expect(text).toContain("速率限制");
+    expect(text).toContain("对话管理");
+    expect(text).toContain("提示路由");
+    expect(text).toContain("配对认证");
+    expect(text).toContain("治理建议");
+    expect(
+      findInput(container, "security-performance-route-hint-0").value,
+    ).toBe("translate");
+  });
+
+  it("切换速率限制开关后应立即保存", async () => {
+    const container = renderComponent();
+    await waitForLoad();
+
+    await clickButton(findSwitch(container, "启用速率限制"));
+
+    expect(mockUpdateRateLimitConfig).toHaveBeenCalledTimes(1);
+    expect(mockUpdateRateLimitConfig).toHaveBeenCalledWith({
+      enabled: true,
+      requests_per_minute: 60,
+      window_secs: 60,
+    });
+    expect(mockToastSuccess).toHaveBeenCalledWith("速率限制已更新");
+  });
+
+  it("新增提示路由并失焦后应保存规则", async () => {
+    const container = renderComponent();
+    await waitForLoad();
+
+    await clickButton(findButton(container, "添加规则"));
+
+    await setInputValue(
+      findInput(container, "security-performance-route-hint-1"),
+      "code-review",
+    );
+    await setInputValue(
+      findInput(container, "security-performance-route-provider-1"),
+      "claude",
+    );
+    const modelInput = findInput(
+      container,
+      "security-performance-route-model-1",
+    );
+    await setInputValue(modelInput, "claude-sonnet-4");
+    await blurInput(modelInput);
+
+    expect(mockUpdateHintRoutes).toHaveBeenCalledTimes(1);
+    expect(mockUpdateHintRoutes).toHaveBeenCalledWith([
+      {
+        hint: "translate",
+        provider: "openai",
+        model: "gpt-4.1",
+      },
+      {
+        hint: "code-review",
+        provider: "claude",
+        model: "claude-sonnet-4",
+      },
+    ]);
+    expect(mockToastSuccess).toHaveBeenCalledWith("提示路由已更新");
+  });
+
+  it("切换配对认证后应立即保存", async () => {
+    const container = renderComponent();
+    await waitForLoad();
+
+    await clickButton(findSwitch(container, "启用配对认证"));
+
+    expect(mockUpdatePairingConfig).toHaveBeenCalledTimes(1);
+    expect(mockUpdatePairingConfig).toHaveBeenCalledWith({ enabled: true });
+    expect(mockToastSuccess).toHaveBeenCalledWith("配对认证已更新");
+  });
+});
diff --git a/src/components/settings-v2/system/security-performance/index.tsx b/src/components/settings-v2/system/security-performance/index.tsx
index db78e3c5f..72ffa75e1 100644
--- a/src/components/settings-v2/system/security-performance/index.tsx
+++ b/src/components/settings-v2/system/security-performance/index.tsx
@@ -1,32 +1,56 @@
-import { useState, useEffect, useCallback } from "react";
-import { ShieldCheck, Plus, Trash2 } from "lucide-react";
+import { useCallback, useEffect, useMemo, useState, type ReactNode } from "react";
+import {
+  Gauge,
+  Link2,
+  MessageSquareMore,
+  Plus,
+  RefreshCw,
+  Route,
+  ShieldCheck,
+  Sparkles,
+  Trash2,
+  type LucideIcon,
+} from "lucide-react";
 import { toast } from "sonner";
 import { Switch } from "@/components/ui/switch";
 import { Slider } from "@/components/ui/slider";
-import { Input } from "@/components/ui/input";
-import { Button } from "@/components/ui/button";
+import { cn } from "@/lib/utils";
 import {
-  Select,
-  SelectContent,
-  SelectItem,
-  SelectTrigger,
-  SelectValue,
-} from "@/components/ui/select";
-import {
-  getRateLimitConfig,
-  updateRateLimitConfig,
   getConversationConfig,
-  updateConversationConfig,
   getHintRoutes,
-  updateHintRoutes,
   getPairingConfig,
+  getRateLimitConfig,
+  updateConversationConfig,
+  updateHintRoutes,
   updatePairingConfig,
-  RateLimitConfig,
-  ConversationConfig,
-  HintRouteEntry,
-  PairingConfig,
+  updateRateLimitConfig,
+  type ConversationConfig,
+  type HintRouteEntry,
+  type PairingConfig,
+  type RateLimitConfig,
 } from "@/lib/api/securityPerformance";
 
+interface SurfacePanelProps {
+  icon: LucideIcon;
+  title: string;
+  description: string;
+  aside?: ReactNode;
+  children: ReactNode;
+}
+
+interface SummaryStatProps {
+  label: string;
+  value: string;
+  description: string;
+}
+
+interface FieldBlockProps {
+  label: string;
+  htmlFor: string;
+  hint?: string;
+  children: ReactNode;
+}
+
 const DEFAULT_RATE_LIMIT: RateLimitConfig = {
   enabled: false,
   requests_per_minute: 60,
@@ -41,9 +65,109 @@ const DEFAULT_CONVERSATION: ConversationConfig = {
 
 const DEFAULT_PAIRING: PairingConfig = { enabled: false };
 
+const INPUT_CLASS_NAME =
+  "w-full rounded-[16px] border border-slate-200 bg-white px-3.5 py-2.5 text-sm text-slate-700 outline-none transition placeholder:text-slate-400 focus:border-slate-300 focus:ring-2 focus:ring-slate-200";
+const SECONDARY_BUTTON_CLASS_NAME =
+  "inline-flex items-center gap-2 rounded-full border border-slate-200 bg-white px-4 py-2 text-sm font-medium text-slate-600 transition hover:border-slate-300 hover:text-slate-900 disabled:cursor-not-allowed disabled:opacity-50";
+
+function SurfacePanel({
+  icon: Icon,
+  title,
+  description,
+  aside,
+  children,
+}: SurfacePanelProps) {
+  return (
+    <article className="rounded-[26px] border border-slate-200/80 bg-white p-5 shadow-sm shadow-slate-950/5">
+      <div className="flex flex-col gap-4 sm:flex-row sm:items-start sm:justify-between">
+        <div className="space-y-1">
+          <div className="flex items-center gap-2 text-sm font-semibold text-slate-900">
+            <Icon className="h-4 w-4 text-sky-600" />
+            {title}
+          </div>
+          <p className="text-sm leading-6 text-slate-500">{description}</p>
+        </div>
+        {aside ? (
+          <div className="flex flex-wrap items-center gap-2">{aside}</div>
+        ) : null}
+      </div>
+
+      <div className="mt-5">{children}</div>
+    </article>
+  );
+}
+
+function SummaryStat({ label, value, description }: SummaryStatProps) {
+  return (
+    <div className="rounded-[22px] border border-white/90 bg-white/88 p-4 shadow-sm">
+      <p className="text-xs font-medium tracking-[0.12em] text-slate-500">
+        {label}
+      </p>
+      <p className="mt-3 text-3xl font-semibold tracking-tight text-slate-900">
+        {value}
+      </p>
+      <p className="mt-2 text-xs leading-5 text-slate-500">{description}</p>
+    </div>
+  );
+}
+
+function FieldBlock({ label, htmlFor, hint, children }: FieldBlockProps) {
+  return (
+    <div className="space-y-2">
+      <label htmlFor={htmlFor} className="text-sm font-medium text-slate-900">
+        {label}
+      </label>
+      {children}
+      {hint ? <p className="text-xs leading-5 text-slate-500">{hint}</p> : null}
+    </div>
+  );
+}
+
+function LoadingSkeleton() {
+  return (
+    <div className="space-y-6 pb-8">
+      <div className="h-[228px] animate-pulse rounded-[30px] border border-slate-200/80 bg-[linear-gradient(135deg,rgba(244,251,248,0.98)_0%,rgba(248,250,252,0.98)_45%,rgba(241,246,255,0.96)_100%)]" />
+      <div className="grid gap-6 xl:grid-cols-[minmax(0,1.14fr)_minmax(320px,0.86fr)]">
+        <div className="space-y-6">
+          <div className="h-[320px] animate-pulse rounded-[26px] border border-slate-200/80 bg-white" />
+          <div className="h-[320px] animate-pulse rounded-[26px] border border-slate-200/80 bg-white" />
+        </div>
+        <div className="space-y-6">
+          <div className="h-[220px] animate-pulse rounded-[26px] border border-slate-200/80 bg-white" />
+          <div className="h-[220px] animate-pulse rounded-[26px] border border-slate-200/80 bg-white" />
+        </div>
+      </div>
+    </div>
+  );
+}
+
+function StatusPill({
+  active,
+  activeLabel,
+  inactiveLabel,
+}: {
+  active: boolean;
+  activeLabel: string;
+  inactiveLabel: string;
+}) {
+  return (
+    <span
+      className={cn(
+        "rounded-full border px-3 py-1 text-xs font-medium",
+        active
+          ? "border-emerald-200 bg-emerald-50 text-emerald-700"
+          : "border-slate-200 bg-slate-100 text-slate-500",
+      )}
+    >
+      {active ? activeLabel : inactiveLabel}
+    </span>
+  );
+}
+
 export function SecurityPerformanceSettings() {
   const [rateLimit, setRateLimit] = useState<RateLimitConfig>(DEFAULT_RATE_LIMIT);
-  const [conversation, setConversation] = useState<ConversationConfig>(DEFAULT_CONVERSATION);
+  const [conversation, setConversation] =
+    useState<ConversationConfig>(DEFAULT_CONVERSATION);
   const [hintRoutes, setHintRoutes] = useState<HintRouteEntry[]>([]);
   const [pairing, setPairing] = useState<PairingConfig>(DEFAULT_PAIRING);
   const [loading, setLoading] = useState(true);
@@ -67,7 +191,7 @@ export function SecurityPerformanceSettings() {
   }, []);
 
   useEffect(() => {
-    loadAll();
+    void loadAll();
   }, [loadAll]);
 
   const saveRateLimit = async (config: RateLimitConfig) => {
@@ -75,8 +199,8 @@ export function SecurityPerformanceSettings() {
     try {
       await updateRateLimitConfig(config);
       toast.success("速率限制已更新");
-    } catch (e) {
-      toast.error(`保存失败: ${e instanceof Error ? e.message : e}`);
+    } catch (error) {
+      toast.error(`保存失败: ${error instanceof Error ? error.message : error}`);
     }
   };
 
@@ -85,8 +209,8 @@ export function SecurityPerformanceSettings() {
     try {
       await updateConversationConfig(config);
       toast.success("对话管理已更新");
-    } catch (e) {
-      toast.error(`保存失败: ${e instanceof Error ? e.message : e}`);
+    } catch (error) {
+      toast.error(`保存失败: ${error instanceof Error ? error.message : error}`);
     }
   };
 
@@ -95,8 +219,8 @@ export function SecurityPerformanceSettings() {
     try {
       await updateHintRoutes(routes);
       toast.success("提示路由已更新");
-    } catch (e) {
-      toast.error(`保存失败: ${e instanceof Error ? e.message : e}`);
+    } catch (error) {
+      toast.error(`保存失败: ${error instanceof Error ? error.message : error}`);
     }
   };
 
@@ -105,208 +229,524 @@ export function SecurityPerformanceSettings() {
     try {
       await updatePairingConfig(config);
       toast.success("配对认证已更新");
-    } catch (e) {
-      toast.error(`保存失败: ${e instanceof Error ? e.message : e}`);
+    } catch (error) {
+      toast.error(`保存失败: ${error instanceof Error ? error.message : error}`);
     }
   };
 
+  const summary = useMemo(() => {
+    const enabledPolicies = [
+      rateLimit.enabled,
+      conversation.trim_enabled,
+      conversation.summary_enabled,
+      pairing.enabled,
+    ].filter(Boolean).length;
+
+    return {
+      enabledPolicies,
+      routeCount: hintRoutes.length,
+      rateLimitLabel: rateLimit.enabled
+        ? `${rateLimit.requests_per_minute}/分`
+        : "未启用",
+      conversationLabel: conversation.trim_enabled
+        ? `${conversation.max_messages} 条`
+        : "未修剪",
+    };
+  }, [
+    conversation.max_messages,
+    conversation.summary_enabled,
+    conversation.trim_enabled,
+    hintRoutes.length,
+    pairing.enabled,
+    rateLimit.enabled,
+    rateLimit.requests_per_minute,
+  ]);
+
   if (loading) {
-    return (
-      <div className="flex items-center justify-center h-32">
-        <div className="animate-spin h-6 w-6 border-2 border-primary border-t-transparent rounded-full" />
-      </div>
-    );
+    return <LoadingSkeleton />;
   }
 
   return (
-    <div className="space-y-4 max-w-2xl">
-      <div className="flex items-center gap-2 mb-4">
-        <ShieldCheck className="h-5 w-5 text-primary" />
-        <div>
-          <h3 className="text-sm font-medium">安全与性能配置</h3>
-          <p className="text-xs text-muted-foreground">管理速率限制、对话管理、提示路由和配对认证</p>
-        </div>
-      </div>
+    <div className="space-y-6 pb-8">
+      <section className="relative overflow-hidden rounded-[30px] border border-emerald-200/70 bg-[linear-gradient(135deg,rgba(244,251,248,0.98)_0%,rgba(248,250,252,0.98)_45%,rgba(241,246,255,0.96)_100%)] shadow-sm shadow-slate-950/5">
+        <div className="pointer-events-none absolute -left-20 top-[-72px] h-56 w-56 rounded-full bg-emerald-200/30 blur-3xl" />
+        <div className="pointer-events-none absolute right-[-76px] top-[-24px] h-56 w-56 rounded-full bg-sky-200/28 blur-3xl" />
 
-      {/* 速率限制 */}
-      <div className="rounded-lg border p-4 space-y-4">
-        <div className="flex items-center justify-between">
-          <div>
-            <h4 className="text-sm font-medium">速率限制</h4>
-            <p className="text-xs text-muted-foreground">限制 API 请求频率，防止滥用</p>
-          </div>
-          <Switch
-            checked={rateLimit.enabled}
-            onCheckedChange={(checked) => saveRateLimit({ ...rateLimit, enabled: checked })}
-          />
-        </div>
-        {rateLimit.enabled && (
-          <div className="space-y-4 pt-2 border-t">
-            <div>
-              <div className="flex items-center justify-between mb-2">
-                <span className="text-sm">每分钟请求数</span>
-                <span className="text-sm text-muted-foreground">{rateLimit.requests_per_minute}</span>
+        <div className="relative flex flex-col gap-6 p-6 lg:p-8">
+          <div className="grid gap-6 xl:grid-cols-[minmax(0,1.1fr)_minmax(360px,0.9fr)]">
+            <div className="max-w-3xl space-y-5">
+              <span className="inline-flex items-center rounded-full border border-emerald-200 bg-white/85 px-3 py-1 text-xs font-semibold tracking-[0.16em] text-emerald-700 shadow-sm">
+                SECURITY CONTROL
+              </span>
+              <div className="space-y-2">
+                <p className="text-[28px] font-semibold tracking-tight text-slate-900">
+                  把安全开关、对话约束和提示路由放到同一个治理面板里
+                </p>
+                <p className="max-w-2xl text-sm leading-7 text-slate-600">
+                  这里的配置以“自动保存”为主，适合快速调整防护强度和对话运行策略。
+                  重点不在堆更多表单，而是在一眼看清当前哪些保护已经打开。
+                </p>
               </div>
-              <Slider
-                value={[rateLimit.requests_per_minute]}
-                min={10}
-                max={200}
-                step={10}
-                onValueChange={([v]) => setRateLimit({ ...rateLimit, requests_per_minute: v })}
-                onValueCommit={([v]) => saveRateLimit({ ...rateLimit, requests_per_minute: v })}
+
+              <div className="flex flex-wrap items-center gap-2">
+                <span className="rounded-full border border-white/90 bg-white/88 px-3 py-1.5 text-xs font-medium text-slate-600 shadow-sm">
+                  开关和下拉选择会立即保存
+                </span>
+                <span className="rounded-full border border-white/90 bg-white/88 px-3 py-1.5 text-xs font-medium text-slate-600 shadow-sm">
+                  提示路由输入框在失焦后保存
+                </span>
+                <span className="rounded-full border border-white/90 bg-white/88 px-3 py-1.5 text-xs font-medium text-slate-600 shadow-sm">
+                  适合桌面端持续调参
+                </span>
+              </div>
+            </div>
+
+            <div className="grid gap-3 sm:grid-cols-3 xl:grid-cols-1 xl:content-start">
+              <SummaryStat
+                label="已启用策略"
+                value={summary.enabledPolicies.toString()}
+                description="速率限制、对话管理和配对认证中当前已打开的保护项数量。"
+              />
+              <SummaryStat
+                label="提示路由"
+                value={summary.routeCount.toString()}
+                description="当前按关键词进行模型路由的规则数量。"
+              />
+              <SummaryStat
+                label="速率限制"
+                value={summary.rateLimitLabel}
+                description="如果已启用，这里显示当前每分钟的请求阈值。"
               />
             </div>
-            <div>
-              <span className="text-sm mb-2 block">窗口大小</span>
-              <Select
-                value={String(rateLimit.window_secs)}
-                onValueChange={(v) => saveRateLimit({ ...rateLimit, window_secs: Number(v) })}
-              >
-                <SelectTrigger className="w-full">
-                  <SelectValue />
-                </SelectTrigger>
-                <SelectContent>
-                  <SelectItem value="30">30 秒</SelectItem>
-                  <SelectItem value="60">60 秒</SelectItem>
-                  <SelectItem value="120">120 秒</SelectItem>
-                </SelectContent>
-              </Select>
-            </div>
           </div>
-        )}
-      </div>
 
-      {/* 对话管理 */}
-      <div className="rounded-lg border p-4 space-y-4">
-        <h4 className="text-sm font-medium">对话管理</h4>
-        <div className="flex items-center justify-between">
-          <div>
-            <span className="text-sm">消息修剪</span>
-            <p className="text-xs text-muted-foreground">自动修剪超出限制的历史消息</p>
-          </div>
-          <Switch
-            checked={conversation.trim_enabled}
-            onCheckedChange={(checked) => saveConversation({ ...conversation, trim_enabled: checked })}
-          />
-        </div>
-        {conversation.trim_enabled && (
-          <div className="flex items-center gap-2 pl-1">
-            <span className="text-sm whitespace-nowrap">最大消息数</span>
-            <Input
-              type="number"
-              className="w-24 h-8"
-              value={conversation.max_messages}
-              min={10}
-              max={500}
-              onChange={(e) => setConversation({ ...conversation, max_messages: Number(e.target.value) || 50 })}
-              onBlur={() => saveConversation(conversation)}
-            />
-          </div>
-        )}
-        <div className="flex items-center justify-between">
-          <div>
-            <span className="text-sm">摘要生成</span>
-            <p className="text-xs text-muted-foreground">修剪时自动生成对话摘要</p>
-          </div>
-          <Switch
-            checked={conversation.summary_enabled}
-            onCheckedChange={(checked) => saveConversation({ ...conversation, summary_enabled: checked })}
-          />
-        </div>
-      </div>
-
-      {/* 提示路由 */}
-      <div className="rounded-lg border p-4 space-y-4">
-        <div className="flex items-center justify-between">
-          <div>
-            <h4 className="text-sm font-medium">提示路由</h4>
-            <p className="text-xs text-muted-foreground">根据提示关键词自动路由到指定模型</p>
-          </div>
-          <Button
-            variant="outline"
-            size="sm"
-            onClick={() => {
-              setHintRoutes([...hintRoutes, { hint: "", provider: "", model: "" }]);
-            }}
-          >
-            <Plus className="h-4 w-4 mr-1" />
-            添加
-          </Button>
-        </div>
-        {hintRoutes.length > 0 && (
-          <div className="space-y-2">
-            <div className="grid grid-cols-[1fr_1fr_1fr_32px] gap-2 text-xs text-muted-foreground px-1">
-              <span>关键词</span>
-              <span>Provider</span>
-              <span>模型</span>
-              <span />
-            </div>
-            {hintRoutes.map((route, i) => (
-              <div key={i} className="grid grid-cols-[1fr_1fr_1fr_32px] gap-2">
-                <Input
-                  className="h-8 text-sm"
-                  placeholder="hint"
-                  value={route.hint}
-                  onChange={(e) => {
-                    const next = [...hintRoutes];
-                    next[i] = { ...route, hint: e.target.value };
-                    setHintRoutes(next);
-                  }}
-                  onBlur={() => saveHintRoutes(hintRoutes)}
+          <div className="flex flex-col gap-4 rounded-[24px] border border-white/90 bg-white/80 p-4 shadow-sm lg:flex-row lg:items-center lg:justify-between">
+            <div className="space-y-2">
+              <div className="flex flex-wrap items-center gap-2">
+                <StatusPill
+                  active={rateLimit.enabled}
+                  activeLabel="速率限制已启用"
+                  inactiveLabel="速率限制未启用"
                 />
-                <Input
-                  className="h-8 text-sm"
-                  placeholder="provider"
-                  value={route.provider}
-                  onChange={(e) => {
-                    const next = [...hintRoutes];
-                    next[i] = { ...route, provider: e.target.value };
-                    setHintRoutes(next);
-                  }}
-                  onBlur={() => saveHintRoutes(hintRoutes)}
+                <StatusPill
+                  active={pairing.enabled}
+                  activeLabel="配对认证已启用"
+                  inactiveLabel="配对认证未启用"
                 />
-                <Input
-                  className="h-8 text-sm"
-                  placeholder="model"
-                  value={route.model}
-                  onChange={(e) => {
-                    const next = [...hintRoutes];
-                    next[i] = { ...route, model: e.target.value };
-                    setHintRoutes(next);
-                  }}
-                  onBlur={() => saveHintRoutes(hintRoutes)}
-                />
-                <Button
-                  variant="ghost"
-                  size="icon"
-                  className="h-8 w-8"
-                  onClick={() => {
-                    const next = hintRoutes.filter((_, idx) => idx !== i);
-                    saveHintRoutes(next);
-                  }}
-                >
-                  <Trash2 className="h-4 w-4 text-muted-foreground" />
-                </Button>
+                <span className="rounded-full border border-slate-200 bg-white px-3 py-1 text-xs font-medium text-slate-500">
+                  对话修剪 {summary.conversationLabel}
+                </span>
               </div>
-            ))}
-          </div>
-        )}
-        {hintRoutes.length === 0 && (
-          <p className="text-xs text-muted-foreground text-center py-2">暂无路由规则，点击添加按钮创建</p>
-        )}
-      </div>
+              <p className="text-sm leading-6 text-slate-600">
+                建议先打开速率限制和配对认证，再根据实际上下文长度调节对话修剪。
+              </p>
+            </div>
 
-      {/* 配对认证 */}
-      <div className="rounded-lg border p-4">
-        <div className="flex items-center justify-between">
-          <div>
-            <h4 className="text-sm font-medium">配对认证</h4>
-            <p className="text-xs text-muted-foreground">启用客户端配对认证，增强安全性</p>
+            <button
+              type="button"
+              onClick={() => void loadAll()}
+              className={SECONDARY_BUTTON_CLASS_NAME}
+            >
+              <RefreshCw className="h-4 w-4" />
+              重新加载
+            </button>
           </div>
-          <Switch
-            checked={pairing.enabled}
-            onCheckedChange={(checked) => savePairing({ enabled: checked })}
-          />
+        </div>
+      </section>
+
+      <div className="grid gap-6 xl:grid-cols-[minmax(0,1.14fr)_minmax(320px,0.86fr)]">
+        <div className="space-y-6">
+          <SurfacePanel
+            icon={Gauge}
+            title="速率限制"
+            description="限制 API 请求频率，减少滥用或异常高频请求带来的压力。"
+            aside={
+              <StatusPill
+                active={rateLimit.enabled}
+                activeLabel="已启用"
+                inactiveLabel="未启用"
+              />
+            }
+          >
+            <div className="space-y-4">
+              <div className="rounded-[22px] border border-slate-200/80 bg-slate-50/60 p-4">
+                <div className="flex flex-col gap-4 sm:flex-row sm:items-start sm:justify-between">
+                  <div className="space-y-1">
+                    <p className="text-sm font-semibold text-slate-900">
+                      启用速率限制
+                    </p>
+                    <p className="text-sm leading-6 text-slate-500">
+                      超出阈值后可提前拦截请求，适合公开入口或多人共享环境。
+                    </p>
+                  </div>
+                  <Switch
+                    aria-label="启用速率限制"
+                    checked={rateLimit.enabled}
+                    onCheckedChange={(checked) =>
+                      void saveRateLimit({ ...rateLimit, enabled: checked })
+                    }
+                  />
+                </div>
+              </div>
+
+              {rateLimit.enabled ? (
+                <div className="grid gap-4 lg:grid-cols-[minmax(0,1fr)_280px]">
+                  <div className="rounded-[22px] border border-slate-200/80 bg-white p-4">
+                    <div className="flex items-center justify-between gap-3">
+                      <div>
+                        <p className="text-sm font-semibold text-slate-900">
+                          每分钟请求数
+                        </p>
+                        <p className="mt-1 text-xs leading-5 text-slate-500">
+                          调高能减少误拦截，调低能更积极地控制频率。
+                        </p>
+                      </div>
+                      <span className="rounded-full border border-slate-200 bg-slate-100 px-3 py-1 text-xs font-medium text-slate-600">
+                        {rateLimit.requests_per_minute}
+                      </span>
+                    </div>
+                    <div className="mt-5 px-1">
+                      <Slider
+                        aria-label="每分钟请求数"
+                        value={[rateLimit.requests_per_minute]}
+                        min={10}
+                        max={200}
+                        step={10}
+                        onValueChange={([value]) =>
+                          setRateLimit({
+                            ...rateLimit,
+                            requests_per_minute: value,
+                          })
+                        }
+                        onValueCommit={([value]) =>
+                          void saveRateLimit({
+                            ...rateLimit,
+                            requests_per_minute: value,
+                          })
+                        }
+                      />
+                    </div>
+                  </div>
+
+                  <div className="rounded-[22px] border border-slate-200/80 bg-white p-4">
+                    <FieldBlock
+                      label="窗口大小"
+                      htmlFor="security-performance-rate-window"
+                      hint="窗口越大，限流判断越平滑，但恢复速度也更慢。"
+                    >
+                      <select
+                        id="security-performance-rate-window"
+                        value={String(rateLimit.window_secs)}
+                        onChange={(event) =>
+                          void saveRateLimit({
+                            ...rateLimit,
+                            window_secs: Number(event.target.value),
+                          })
+                        }
+                        className={INPUT_CLASS_NAME}
+                      >
+                        <option value="30">30 秒</option>
+                        <option value="60">60 秒</option>
+                        <option value="120">120 秒</option>
+                      </select>
+                    </FieldBlock>
+                  </div>
+                </div>
+              ) : (
+                <div className="rounded-[22px] border border-dashed border-slate-300 bg-slate-50/60 p-6 text-center">
+                  <p className="text-sm font-medium text-slate-700">
+                    当前未启用速率限制
+                  </p>
+                  <p className="mt-2 text-sm leading-6 text-slate-500">
+                    如果当前服务对外暴露或多人共享，建议先打开限流，再逐步微调阈值。
+                  </p>
+                </div>
+              )}
+            </div>
+          </SurfacePanel>
+
+          <SurfacePanel
+            icon={MessageSquareMore}
+            title="对话管理"
+            description="控制上下文裁剪和摘要策略，减少长对话拖慢响应或增加不必要成本。"
+          >
+            <div className="space-y-4">
+              <div className="rounded-[22px] border border-slate-200/80 bg-slate-50/60 p-4">
+                <div className="flex flex-col gap-4 sm:flex-row sm:items-start sm:justify-between">
+                  <div className="space-y-1">
+                    <p className="text-sm font-semibold text-slate-900">
+                      消息修剪
+                    </p>
+                    <p className="text-sm leading-6 text-slate-500">
+                      自动裁掉超出上限的历史消息，避免上下文无限增长。
+                    </p>
+                  </div>
+                  <Switch
+                    aria-label="启用消息修剪"
+                    checked={conversation.trim_enabled}
+                    onCheckedChange={(checked) =>
+                      void saveConversation({
+                        ...conversation,
+                        trim_enabled: checked,
+                      })
+                    }
+                  />
+                </div>
+              </div>
+
+              {conversation.trim_enabled ? (
+                <div className="rounded-[22px] border border-slate-200/80 bg-white p-4">
+                  <FieldBlock
+                    label="最大消息数"
+                    htmlFor="security-performance-max-messages"
+                    hint="输入完成后离开焦点即保存。建议根据模型上下文容量调节。"
+                  >
+                    <input
+                      id="security-performance-max-messages"
+                      type="number"
+                      min={10}
+                      max={500}
+                      value={conversation.max_messages}
+                      onChange={(event) =>
+                        setConversation({
+                          ...conversation,
+                          max_messages:
+                            Number.parseInt(event.target.value, 10) || 50,
+                        })
+                      }
+                      onBlur={() => void saveConversation(conversation)}
+                      className={INPUT_CLASS_NAME}
+                    />
+                  </FieldBlock>
+                </div>
+              ) : null}
+
+              <div className="rounded-[22px] border border-slate-200/80 bg-slate-50/60 p-4">
+                <div className="flex flex-col gap-4 sm:flex-row sm:items-start sm:justify-between">
+                  <div className="space-y-1">
+                    <p className="text-sm font-semibold text-slate-900">
+                      摘要生成
+                    </p>
+                    <p className="text-sm leading-6 text-slate-500">
+                      在修剪时自动生成摘要，帮助后续轮次保留关键上下文。
+                    </p>
+                  </div>
+                  <Switch
+                    aria-label="启用摘要生成"
+                    checked={conversation.summary_enabled}
+                    onCheckedChange={(checked) =>
+                      void saveConversation({
+                        ...conversation,
+                        summary_enabled: checked,
+                      })
+                    }
+                  />
+                </div>
+              </div>
+            </div>
+          </SurfacePanel>
+
+          <SurfacePanel
+            icon={Route}
+            title="提示路由"
+            description="按关键词把请求定向到指定 Provider 和模型，适合做轻量规则分流。"
+            aside={
+              <button
+                type="button"
+                onClick={() =>
+                  setHintRoutes([
+                    ...hintRoutes,
+                    { hint: "", provider: "", model: "" },
+                  ])
+                }
+                className={SECONDARY_BUTTON_CLASS_NAME}
+              >
+                <Plus className="h-4 w-4" />
+                添加规则
+              </button>
+            }
+          >
+            <div className="space-y-4">
+              <div className="rounded-[22px] border border-slate-200/80 bg-slate-50/60 p-4 text-sm leading-6 text-slate-500">
+                输入框在失焦后自动保存，删除规则会立即同步。适合把稳定命中的关键词放在这里，
+                不适合维护大量复杂分支逻辑。
+              </div>
+
+              {hintRoutes.length === 0 ? (
+                <div className="rounded-[22px] border border-dashed border-slate-300 bg-slate-50/60 p-8 text-center">
+                  <p className="text-sm font-medium text-slate-700">
+                    暂无提示路由规则
+                  </p>
+                  <p className="mt-2 text-sm leading-6 text-slate-500">
+                    点击“添加规则”创建简单的关键词分流策略。
+                  </p>
+                </div>
+              ) : (
+                <div className="space-y-3">
+                  {hintRoutes.map((route, index) => (
+                    <article
+                      key={`hint-route-${index}`}
+                      className="rounded-[22px] border border-slate-200/80 bg-white p-4"
+                    >
+                      <div className="grid gap-4 xl:grid-cols-[minmax(0,1fr)_minmax(0,1fr)_minmax(0,1fr)_56px]">
+                        <FieldBlock
+                          label="关键词"
+                          htmlFor={`security-performance-route-hint-${index}`}
+                        >
+                          <input
+                            id={`security-performance-route-hint-${index}`}
+                            type="text"
+                            value={route.hint}
+                            placeholder="例如 translate"
+                            onChange={(event) => {
+                              const next = [...hintRoutes];
+                              next[index] = {
+                                ...route,
+                                hint: event.target.value,
+                              };
+                              setHintRoutes(next);
+                            }}
+                            onBlur={() => void saveHintRoutes(hintRoutes)}
+                            className={INPUT_CLASS_NAME}
+                          />
+                        </FieldBlock>
+
+                        <FieldBlock
+                          label="Provider"
+                          htmlFor={`security-performance-route-provider-${index}`}
+                        >
+                          <input
+                            id={`security-performance-route-provider-${index}`}
+                            type="text"
+                            value={route.provider}
+                            placeholder="例如 openai"
+                            onChange={(event) => {
+                              const next = [...hintRoutes];
+                              next[index] = {
+                                ...route,
+                                provider: event.target.value,
+                              };
+                              setHintRoutes(next);
+                            }}
+                            onBlur={() => void saveHintRoutes(hintRoutes)}
+                            className={INPUT_CLASS_NAME}
+                          />
+                        </FieldBlock>
+
+                        <FieldBlock
+                          label="模型"
+                          htmlFor={`security-performance-route-model-${index}`}
+                        >
+                          <input
+                            id={`security-performance-route-model-${index}`}
+                            type="text"
+                            value={route.model}
+                            placeholder="例如 gpt-4.1"
+                            onChange={(event) => {
+                              const next = [...hintRoutes];
+                              next[index] = {
+                                ...route,
+                                model: event.target.value,
+                              };
+                              setHintRoutes(next);
+                            }}
+                            onBlur={() => void saveHintRoutes(hintRoutes)}
+                            className={INPUT_CLASS_NAME}
+                          />
+                        </FieldBlock>
+
+                        <div className="flex items-end justify-end">
+                          <button
+                            type="button"
+                            onClick={() =>
+                              void saveHintRoutes(
+                                hintRoutes.filter((_, idx) => idx !== index),
+                              )
+                            }
+                            className="flex h-11 w-11 items-center justify-center rounded-2xl border border-slate-200 bg-white text-slate-500 transition hover:border-rose-200 hover:bg-rose-50 hover:text-rose-600"
+                            title="删除规则"
+                          >
+                            <Trash2 className="h-4 w-4" />
+                          </button>
+                        </div>
+                      </div>
+                    </article>
+                  ))}
+                </div>
+              )}
+            </div>
+          </SurfacePanel>
+        </div>
+
+        <div className="space-y-6">
+          <SurfacePanel
+            icon={ShieldCheck}
+            title="配对认证"
+            description="对客户端接入增加额外认证步骤，适合共享或受控环境。"
+            aside={
+              <StatusPill
+                active={pairing.enabled}
+                activeLabel="已启用"
+                inactiveLabel="未启用"
+              />
+            }
+          >
+            <div className="rounded-[22px] border border-slate-200/80 bg-slate-50/60 p-4">
+              <div className="flex flex-col gap-4 sm:flex-row sm:items-start sm:justify-between">
+                <div className="space-y-1">
+                  <p className="text-sm font-semibold text-slate-900">
+                    启用客户端配对认证
+                  </p>
+                  <p className="text-sm leading-6 text-slate-500">
+                    开启后，未完成配对的客户端不能直接接入，能显著降低误接入风险。
+                  </p>
+                </div>
+                <Switch
+                  aria-label="启用配对认证"
+                  checked={pairing.enabled}
+                  onCheckedChange={(checked) =>
+                    void savePairing({ enabled: checked })
+                  }
+                />
+              </div>
+            </div>
+          </SurfacePanel>
+
+          <SurfacePanel
+            icon={Sparkles}
+            title="治理建议"
+            description="用最少的开关覆盖最常见的安全和性能问题，不引入多余复杂度。"
+          >
+            <div className="space-y-3">
+              <div className="rounded-[22px] border border-slate-200/80 bg-slate-50/60 p-4">
+                <div className="flex items-center gap-2 text-sm font-semibold text-slate-900">
+                  <Gauge className="h-4 w-4 text-sky-600" />
+                  共享入口优先打开限流
+                </div>
+                <p className="mt-2 text-sm leading-6 text-slate-500">
+                  如果服务提供给多个终端或团队成员，先开启速率限制，再观察是否需要上调阈值。
+                </p>
+              </div>
+              <div className="rounded-[22px] border border-slate-200/80 bg-slate-50/60 p-4">
+                <div className="flex items-center gap-2 text-sm font-semibold text-slate-900">
+                  <MessageSquareMore className="h-4 w-4 text-sky-600" />
+                  长对话场景打开修剪
+                </div>
+                <p className="mt-2 text-sm leading-6 text-slate-500">
+                  对连续长会话工作流，消息修剪和摘要生成可以一起启用，减轻上下文膨胀。
+                </p>
+              </div>
+              <div className="rounded-[22px] border border-slate-200/80 bg-slate-50/60 p-4">
+                <div className="flex items-center gap-2 text-sm font-semibold text-slate-900">
+                  <Link2 className="h-4 w-4 text-sky-600" />
+                  提示路由保持简单
+                </div>
+                <p className="mt-2 text-sm leading-6 text-slate-500">
+                  更适合稳定关键词和固定模型映射。复杂策略应放到更专门的调度层，而不是继续堆表单。
+                </p>
+              </div>
+            </div>
+          </SurfacePanel>
         </div>
       </div>
     </div>
diff --git a/src/components/settings-v2/system/web-search/index.test.tsx b/src/components/settings-v2/system/web-search/index.test.tsx
index 2f5528bfb..2d557fe17 100644
--- a/src/components/settings-v2/system/web-search/index.test.tsx
+++ b/src/components/settings-v2/system/web-search/index.test.tsx
@@ -161,6 +161,13 @@ describe("WebSearchSettings", () => {
     await flushEffects();
     await flushEffects();
 
+    const text = container.textContent ?? "";
+    expect(text).toContain("SEARCH STACK");
+    expect(text).toContain("联网搜索配置");
+    expect(text).toContain("Provider 凭证");
+    expect(text).toContain("Multi Search Engine");
+    expect(text).toContain("联网图片搜索");
+
     const select = findSelect(container, "web-search-engine");
     expect(select.value).toBe("google");
     const provider = findSelect(container, "web-search-provider");
diff --git a/src/components/settings-v2/system/web-search/index.tsx b/src/components/settings-v2/system/web-search/index.tsx
index 9f2ab71cb..cef2e82e4 100644
--- a/src/components/settings-v2/system/web-search/index.tsx
+++ b/src/components/settings-v2/system/web-search/index.tsx
@@ -1,6 +1,14 @@
-import { useEffect, useMemo, useState } from "react";
-import { Globe, Image as ImageIcon, RefreshCw } from "lucide-react";
+import { useEffect, useMemo, useState, type ReactNode } from "react";
+import {
+  Compass,
+  Image as ImageIcon,
+  Layers3,
+  Search,
+  ShieldCheck,
+  type LucideIcon,
+} from "lucide-react";
 import { open } from "@tauri-apps/plugin-shell";
+import { cn } from "@/lib/utils";
 import { getConfig, saveConfig, type Config } from "@/lib/api/appConfig";
 
 type SearchEngine = "google" | "xiaohongshu";
@@ -17,6 +25,41 @@ type MultiSearchEngineOption = {
   enabled: boolean;
 };
 
+interface SurfacePanelProps {
+  icon: LucideIcon;
+  title: string;
+  description: string;
+  aside?: ReactNode;
+  children: ReactNode;
+}
+
+interface SummaryStatProps {
+  label: string;
+  value: string;
+  description: string;
+}
+
+interface FieldBlockProps {
+  label: string;
+  htmlFor: string;
+  hint?: string;
+  children: ReactNode;
+}
+
+interface StatusPillProps {
+  active: boolean;
+  label: string;
+}
+
+const INPUT_CLASS_NAME =
+  "w-full rounded-[16px] border border-slate-200 bg-white px-3.5 py-2.5 text-sm text-slate-700 outline-none transition placeholder:text-slate-400 focus:border-slate-300 focus:ring-2 focus:ring-slate-200";
+const TEXT_BUTTON_CLASS_NAME =
+  "rounded-full border border-slate-200 bg-white px-3 py-1.5 text-xs font-medium text-slate-600 transition hover:border-slate-300 hover:text-slate-900";
+const ACTION_BUTTON_CLASS_NAME =
+  "rounded-full border border-slate-200 bg-white px-4 py-2 text-sm font-medium text-slate-600 transition hover:border-slate-300 hover:text-slate-900 disabled:cursor-not-allowed disabled:opacity-50";
+const PRIMARY_BUTTON_CLASS_NAME =
+  "rounded-full bg-slate-900 px-4 py-2 text-sm font-medium text-white transition hover:bg-slate-800 disabled:cursor-not-allowed disabled:opacity-50";
+
 const PEXELS_APPLY_URL = "https://www.pexels.com/api/new/";
 const PEXELS_DOC_URL = "https://www.pexels.com/api/";
 const PIXABAY_APPLY_URL = "https://pixabay.com/accounts/register/";
@@ -160,6 +203,128 @@ function parseBoundedInt(
   return parsed;
 }
 
+function SurfacePanel({
+  icon: Icon,
+  title,
+  description,
+  aside,
+  children,
+}: SurfacePanelProps) {
+  return (
+    <article className="rounded-[26px] border border-slate-200/80 bg-white p-5 shadow-sm shadow-slate-950/5">
+      <div className="flex flex-col gap-4 sm:flex-row sm:items-start sm:justify-between">
+        <div className="space-y-1">
+          <div className="flex items-center gap-2 text-sm font-semibold text-slate-900">
+            <Icon className="h-4 w-4 text-sky-600" />
+            {title}
+          </div>
+          <p className="text-sm leading-6 text-slate-500">{description}</p>
+        </div>
+        {aside ? (
+          <div className="flex flex-wrap items-center gap-2">{aside}</div>
+        ) : null}
+      </div>
+
+      <div className="mt-5">{children}</div>
+    </article>
+  );
+}
+
+function SummaryStat({ label, value, description }: SummaryStatProps) {
+  return (
+    <div className="rounded-[22px] border border-white/90 bg-white/88 p-4 shadow-sm">
+      <p className="text-xs font-medium tracking-[0.12em] text-slate-500">
+        {label}
+      </p>
+      <p className="mt-3 text-3xl font-semibold tracking-tight text-slate-900">
+        {value}
+      </p>
+      <p className="mt-2 text-xs leading-5 text-slate-500">{description}</p>
+    </div>
+  );
+}
+
+function FieldBlock({ label, htmlFor, hint, children }: FieldBlockProps) {
+  return (
+    <div className="space-y-2">
+      <label htmlFor={htmlFor} className="text-sm font-medium text-slate-900">
+        {label}
+      </label>
+      {children}
+      {hint ? <p className="text-xs leading-5 text-slate-500">{hint}</p> : null}
+    </div>
+  );
+}
+
+function StatusPill({ active, label }: StatusPillProps) {
+  return (
+    <span
+      className={cn(
+        "rounded-full border px-2.5 py-1 text-xs font-medium",
+        active
+          ? "border-emerald-200 bg-emerald-50 text-emerald-700"
+          : "border-slate-200 bg-slate-100 text-slate-500",
+      )}
+    >
+      {label}
+    </span>
+  );
+}
+
+function SecretInput({
+  id,
+  value,
+  placeholder,
+  visible,
+  onToggleVisible,
+  onChange,
+}: {
+  id: string;
+  value: string;
+  placeholder: string;
+  visible: boolean;
+  onToggleVisible: () => void;
+  onChange: (value: string) => void;
+}) {
+  return (
+    <div className="relative">
+      <input
+        id={id}
+        type={visible ? "text" : "password"}
+        value={value}
+        onChange={(e) => onChange(e.target.value)}
+        placeholder={placeholder}
+        className={`${INPUT_CLASS_NAME} pr-20`}
+      />
+      <button
+        type="button"
+        onClick={onToggleVisible}
+        className="absolute right-1.5 top-1/2 -translate-y-1/2 rounded-full border border-slate-200 bg-white px-2.5 py-1 text-xs font-medium text-slate-600 transition hover:border-slate-300 hover:text-slate-900"
+      >
+        {visible ? "隐藏" : "显示"}
+      </button>
+    </div>
+  );
+}
+
+function LoadingSkeleton() {
+  return (
+    <div className="space-y-6 pb-20">
+      <div className="h-[228px] animate-pulse rounded-[30px] border border-slate-200/80 bg-[linear-gradient(135deg,rgba(244,251,248,0.98)_0%,rgba(248,250,252,0.98)_45%,rgba(241,246,255,0.96)_100%)]" />
+      <div className="grid gap-6 xl:grid-cols-[minmax(0,1.15fr)_minmax(320px,0.85fr)]">
+        <div className="space-y-6">
+          <div className="h-[380px] animate-pulse rounded-[26px] border border-slate-200/80 bg-white" />
+          <div className="h-[420px] animate-pulse rounded-[26px] border border-slate-200/80 bg-white" />
+        </div>
+        <div className="space-y-6">
+          <div className="h-[280px] animate-pulse rounded-[26px] border border-slate-200/80 bg-white" />
+          <div className="h-[260px] animate-pulse rounded-[26px] border border-slate-200/80 bg-white" />
+        </div>
+      </div>
+    </div>
+  );
+}
+
 export function WebSearchSettings() {
   const [config, setConfig] = useState<Config | null>(null);
   const [draftEngine, setDraftEngine] = useState<SearchEngine>("google");
@@ -348,6 +513,19 @@ export function WebSearchSettings() {
   const pexelsKeyConfigured = draftPexelsApiKey.trim().length > 0;
   const pixabayKeyConfigured = draftPixabayApiKey.trim().length > 0;
 
+  const configuredSearchProviders = [
+    tavilyKeyConfigured,
+    bingSearchKeyConfigured,
+    googleSearchKeyConfigured && googleSearchEngineConfigured,
+    draftProvider === "duckduckgo_instant",
+    draftProvider === "multi_search_engine" || mseCustomEngineReady,
+  ].filter(Boolean).length;
+
+  const providerChainPreview =
+    parseCsv(draftProviderPriority).length > 0
+      ? parseCsv(draftProviderPriority).join(" -> ")
+      : "自动默认链";
+
   const handleSave = async () => {
     if (!config || !hasUnsavedChanges) return;
 
@@ -448,577 +626,698 @@ export function WebSearchSettings() {
   };
 
   if (loading) {
-    return (
-      <div className="flex items-center justify-center h-40">
-        <RefreshCw className="h-5 w-5 animate-spin text-muted-foreground" />
-      </div>
-    );
+    return <LoadingSkeleton />;
   }
 
   return (
-    <div className="space-y-4 max-w-3xl pb-20">
-      {message && (
+    <div className="space-y-6 pb-20">
+      {message ? (
         <div
-          className={`rounded-lg border p-3 text-sm ${
+          className={cn(
+            "flex items-center justify-between gap-4 rounded-[20px] border px-4 py-3 text-sm shadow-sm shadow-slate-950/5",
             message.type === "error"
-              ? "border-destructive bg-destructive/10 text-destructive"
-              : "border-green-500 bg-green-50 text-green-700 dark:bg-green-900/20 dark:text-green-400"
-          }`}
+              ? "border-rose-200 bg-rose-50/90 text-rose-700"
+              : "border-emerald-200 bg-emerald-50/90 text-emerald-700",
+          )}
         >
-          {message.text}
-        </div>
-      )}
-
-      <div className="rounded-lg border p-5 space-y-4">
-        <div className="flex items-center gap-2">
-          <Globe className="h-4 w-4 text-primary" />
-          <div>
-            <h3 className="text-sm font-medium">联网搜索配置</h3>
-            <p className="text-xs text-muted-foreground">
-              使用策略化回退链路统一管理 Tavily / MSE / Bing / Google /
-              DuckDuckGo。
-            </p>
-          </div>
-        </div>
-
-        <div className="space-y-2">
-          <label htmlFor="web-search-engine" className="text-sm font-medium">
-            选择搜索引擎
-          </label>
-          <select
-            id="web-search-engine"
-            value={draftEngine}
-            onChange={(e) => setDraftEngine(e.target.value as SearchEngine)}
-            className="w-full h-10 rounded-md border bg-background px-3 text-sm outline-none focus:ring-2 focus:ring-primary/20"
-          >
-            <option value="google">Google</option>
-            <option value="xiaohongshu">小红书</option>
-          </select>
-          <p className="text-xs text-muted-foreground">
-            Google 适用于通用搜索，小红书适用于中文生活方式和购物内容。
-          </p>
-        </div>
-
-        <div className="space-y-2">
-          <label htmlFor="web-search-provider" className="text-sm font-medium">
-            首选搜索提供商
-          </label>
-          <select
-            id="web-search-provider"
-            value={draftProvider}
-            onChange={(e) =>
-              setDraftProvider(e.target.value as WebSearchProvider)
-            }
-            className="w-full h-10 rounded-md border bg-background px-3 text-sm outline-none focus:ring-2 focus:ring-primary/20"
-          >
-            <option value="tavily">Tavily Search API</option>
-            <option value="multi_search_engine">
-              Multi Search Engine v2.0.1
-            </option>
-            <option value="duckduckgo_instant">
-              DuckDuckGo Instant Answer (免费)
-            </option>
-            <option value="bing_search_api">Bing Search API</option>
-            <option value="google_custom_search">
-              Google Custom Search API
-            </option>
-          </select>
-        </div>
-
-        <div className="space-y-2">
-          <label
-            htmlFor="web-search-provider-priority"
-            className="text-sm font-medium"
-          >
-            提供商回退优先级（逗号分隔）
-          </label>
-          <input
-            id="web-search-provider-priority"
-            value={draftProviderPriority}
-            onChange={(e) => setDraftProviderPriority(e.target.value)}
-            placeholder="tavily, multi_search_engine, bing_search_api, google_custom_search, duckduckgo_instant"
-            className="w-full h-10 rounded-md border bg-background px-3 text-sm outline-none focus:ring-2 focus:ring-primary/20"
-          />
-          <p className="text-xs text-muted-foreground">
-            未填写时会自动使用默认回退链；未知 provider 会被忽略。
-          </p>
-        </div>
-
-        <div className="h-px bg-border/60" />
-
-        <div className="space-y-2">
-          <label
-            htmlFor="web-search-tavily-key"
-            className="text-sm font-medium"
-          >
-            Tavily API Key
-          </label>
-          <div className="flex items-center gap-2">
+          <span>{message.text}</span>
+          {message.type === "error" ? (
             <button
               type="button"
-              onClick={() => void openExternalUrl(TAVILY_APPLY_URL)}
-              className="rounded-md border px-3 py-1.5 text-xs hover:bg-muted"
+              onClick={() => void loadConfig()}
+              className="rounded-full border border-current/15 bg-white/80 px-3 py-1.5 text-xs font-medium transition hover:bg-white"
             >
-              申请 Tavily Key
+              重新加载
             </button>
-            <button
-              type="button"
-              onClick={() => void openExternalUrl(TAVILY_DOC_URL)}
-              className="rounded-md border px-3 py-1.5 text-xs hover:bg-muted"
-            >
-              查看文档
-            </button>
-          </div>
-          <div className="relative">
-            <input
-              id="web-search-tavily-key"
-              type={showTavilyApiKey ? "text" : "password"}
-              value={draftTavilyApiKey}
-              onChange={(e) => setDraftTavilyApiKey(e.target.value)}
-              placeholder="输入 TAVILY_API_KEY"
-              className="w-full h-10 rounded-md border bg-background px-3 pr-20 text-sm outline-none focus:ring-2 focus:ring-primary/20"
-            />
-            <button
-              type="button"
-              onClick={() => setShowTavilyApiKey((prev) => !prev)}
-              className="absolute right-1.5 top-1/2 -translate-y-1/2 rounded-md border px-2.5 py-1 text-xs"
-            >
-              {showTavilyApiKey ? "隐藏" : "显示"}
-            </button>
-          </div>
-          <p className="text-xs text-muted-foreground">
-            未填写时会回退环境变量 <code>TAVILY_API_KEY</code>。
-          </p>
+          ) : null}
         </div>
+      ) : null}
 
-        <div className="space-y-2">
-          <label htmlFor="web-search-bing-key" className="text-sm font-medium">
-            Bing Search API Key
-          </label>
-          <div className="flex items-center gap-2">
-            <button
-              type="button"
-              onClick={() => void openExternalUrl(BING_SEARCH_APPLY_URL)}
-              className="rounded-md border px-3 py-1.5 text-xs hover:bg-muted"
-            >
-              申请 Bing Key
-            </button>
-            <button
-              type="button"
-              onClick={() => void openExternalUrl(BING_SEARCH_DOC_URL)}
-              className="rounded-md border px-3 py-1.5 text-xs hover:bg-muted"
-            >
-              查看文档
-            </button>
-          </div>
-          <div className="relative">
-            <input
-              id="web-search-bing-key"
-              type={showBingSearchApiKey ? "text" : "password"}
-              value={draftBingSearchApiKey}
-              onChange={(e) => setDraftBingSearchApiKey(e.target.value)}
-              placeholder="输入 BING_SEARCH_API_KEY"
-              className="w-full h-10 rounded-md border bg-background px-3 pr-20 text-sm outline-none focus:ring-2 focus:ring-primary/20"
-            />
-            <button
-              type="button"
-              onClick={() => setShowBingSearchApiKey((prev) => !prev)}
-              className="absolute right-1.5 top-1/2 -translate-y-1/2 rounded-md border px-2.5 py-1 text-xs"
-            >
-              {showBingSearchApiKey ? "隐藏" : "显示"}
-            </button>
-          </div>
-          <p className="text-xs text-muted-foreground">
-            未填写时会回退环境变量 <code>BING_SEARCH_API_KEY</code>。
-          </p>
-        </div>
+      <section className="relative overflow-hidden rounded-[30px] border border-emerald-200/70 bg-[linear-gradient(135deg,rgba(244,251,248,0.98)_0%,rgba(248,250,252,0.98)_45%,rgba(241,246,255,0.96)_100%)] shadow-sm shadow-slate-950/5">
+        <div className="pointer-events-none absolute -left-20 top-[-72px] h-56 w-56 rounded-full bg-emerald-200/30 blur-3xl" />
+        <div className="pointer-events-none absolute right-[-76px] top-[-24px] h-56 w-56 rounded-full bg-sky-200/28 blur-3xl" />
 
-        <div className="space-y-2">
-          <label
-            htmlFor="web-search-google-key"
-            className="text-sm font-medium"
-          >
-            Google Search API Key
-          </label>
-          <div className="flex items-center gap-2">
-            <button
-              type="button"
-              onClick={() => void openExternalUrl(GOOGLE_SEARCH_API_APPLY_URL)}
-              className="rounded-md border px-3 py-1.5 text-xs hover:bg-muted"
-            >
-              申请 Google Key
-            </button>
-            <button
-              type="button"
-              onClick={() => void openExternalUrl(GOOGLE_SEARCH_DOC_URL)}
-              className="rounded-md border px-3 py-1.5 text-xs hover:bg-muted"
-            >
-              查看文档
-            </button>
-          </div>
-          <div className="relative">
-            <input
-              id="web-search-google-key"
-              type={showGoogleSearchApiKey ? "text" : "password"}
-              value={draftGoogleSearchApiKey}
-              onChange={(e) => setDraftGoogleSearchApiKey(e.target.value)}
-              placeholder="输入 GOOGLE_SEARCH_API_KEY"
-              className="w-full h-10 rounded-md border bg-background px-3 pr-20 text-sm outline-none focus:ring-2 focus:ring-primary/20"
-            />
-            <button
-              type="button"
-              onClick={() => setShowGoogleSearchApiKey((prev) => !prev)}
-              className="absolute right-1.5 top-1/2 -translate-y-1/2 rounded-md border px-2.5 py-1 text-xs"
-            >
-              {showGoogleSearchApiKey ? "隐藏" : "显示"}
-            </button>
-          </div>
-          <p className="text-xs text-muted-foreground">
-            未填写时会回退环境变量 <code>GOOGLE_SEARCH_API_KEY</code>。
-          </p>
-        </div>
+        <div className="relative flex flex-col gap-6 p-6 lg:p-8">
+          <div className="grid gap-6 xl:grid-cols-[minmax(0,1.1fr)_minmax(360px,0.9fr)] xl:items-stretch">
+            <div className="max-w-3xl space-y-5">
+              <span className="inline-flex items-center rounded-full border border-emerald-200 bg-white/85 px-3 py-1 text-xs font-semibold tracking-[0.16em] text-emerald-700 shadow-sm">
+                SEARCH STACK
+              </span>
+              <div className="space-y-2">
+                <p className="text-[28px] font-semibold tracking-tight text-slate-900">
+                  统一管理联网搜索链路、回退策略和图片搜索凭证
+                </p>
+                <p className="max-w-2xl text-sm leading-7 text-slate-600">
+                  把搜索入口、Provider 回退链、MSE 聚合参数和图片搜索 Key
+                  放在同一个宽版视图里，不再让长表单把信息挤成一列。
+                </p>
+              </div>
 
-        <div className="space-y-2">
-          <label
-            htmlFor="web-search-google-engine-id"
-            className="text-sm font-medium"
-          >
-            Google Search Engine ID (CSE CX)
-          </label>
-          <input
-            id="web-search-google-engine-id"
-            value={draftGoogleSearchEngineId}
-            onChange={(e) => setDraftGoogleSearchEngineId(e.target.value)}
-            placeholder="输入 GOOGLE_SEARCH_ENGINE_ID"
-            className="w-full h-10 rounded-md border bg-background px-3 text-sm outline-none focus:ring-2 focus:ring-primary/20"
-          />
-          <div className="flex items-center gap-2">
-            <button
-              type="button"
-              onClick={() => void openExternalUrl(GOOGLE_SEARCH_CSE_URL)}
-              className="rounded-md border px-3 py-1.5 text-xs hover:bg-muted"
-            >
-              创建 CSE
-            </button>
-          </div>
-          <p className="text-xs text-muted-foreground">
-            未填写时会回退环境变量 <code>GOOGLE_SEARCH_ENGINE_ID</code>。
-          </p>
-        </div>
+              <div className="flex flex-wrap items-center gap-2">
+                <span className="rounded-full border border-white/90 bg-white/88 px-3 py-1.5 text-xs font-medium text-slate-600 shadow-sm">
+                  搜索引擎：{draftEngine === "google" ? "Google" : "小红书"}
+                </span>
+                <span className="rounded-full border border-white/90 bg-white/88 px-3 py-1.5 text-xs font-medium text-slate-600 shadow-sm">
+                  首选 Provider：{draftProvider}
+                </span>
+                <span className="rounded-full border border-white/90 bg-white/88 px-3 py-1.5 text-xs font-medium text-slate-600 shadow-sm">
+                  当前回退链：{providerChainPreview}
+                </span>
+              </div>
+            </div>
 
-        <div className="h-px bg-border/60" />
-
-        <div className="space-y-2">
-          <label
-            htmlFor="web-search-mse-priority"
-            className="text-sm font-medium"
-          >
-            Multi Search Engine 引擎优先级（逗号分隔）
-          </label>
-          <input
-            id="web-search-mse-priority"
-            value={draftMsePriority}
-            onChange={(e) => setDraftMsePriority(e.target.value)}
-            placeholder="google, bing, duckduckgo, brave"
-            className="w-full h-10 rounded-md border bg-background px-3 text-sm outline-none focus:ring-2 focus:ring-primary/20"
-          />
-          <div className="flex items-center gap-2">
-            <button
-              type="button"
-              onClick={() => void openExternalUrl(MSE_DOC_URL)}
-              className="rounded-md border px-3 py-1.5 text-xs hover:bg-muted"
-            >
-              查看 MSE 设计参考
-            </button>
-          </div>
-        </div>
-
-        <div className="grid gap-3 sm:grid-cols-3">
-          <div className="space-y-2">
-            <label
-              htmlFor="web-search-mse-max-per-engine"
-              className="text-sm font-medium"
-            >
-              每引擎结果上限
-            </label>
-            <input
-              id="web-search-mse-max-per-engine"
-              value={draftMseMaxResultsPerEngine}
-              onChange={(e) => setDraftMseMaxResultsPerEngine(e.target.value)}
-              className="w-full h-10 rounded-md border bg-background px-3 text-sm outline-none focus:ring-2 focus:ring-primary/20"
-            />
-          </div>
-          <div className="space-y-2">
-            <label
-              htmlFor="web-search-mse-max-total"
-              className="text-sm font-medium"
-            >
-              聚合结果总上限
-            </label>
-            <input
-              id="web-search-mse-max-total"
-              value={draftMseMaxTotalResults}
-              onChange={(e) => setDraftMseMaxTotalResults(e.target.value)}
-              className="w-full h-10 rounded-md border bg-background px-3 text-sm outline-none focus:ring-2 focus:ring-primary/20"
-            />
-          </div>
-          <div className="space-y-2">
-            <label
-              htmlFor="web-search-mse-timeout"
-              className="text-sm font-medium"
-            >
-              单引擎超时 (ms)
-            </label>
-            <input
-              id="web-search-mse-timeout"
-              value={draftMseTimeoutMs}
-              onChange={(e) => setDraftMseTimeoutMs(e.target.value)}
-              className="w-full h-10 rounded-md border bg-background px-3 text-sm outline-none focus:ring-2 focus:ring-primary/20"
-            />
-          </div>
-        </div>
-
-        <div className="space-y-2">
-          <label
-            htmlFor="web-search-mse-custom-engine-name"
-            className="text-sm font-medium"
-          >
-            自定义引擎名称（可选）
-          </label>
-          <input
-            id="web-search-mse-custom-engine-name"
-            value={draftMseCustomEngineName}
-            onChange={(e) => setDraftMseCustomEngineName(e.target.value)}
-            placeholder="例如: hn"
-            className="w-full h-10 rounded-md border bg-background px-3 text-sm outline-none focus:ring-2 focus:ring-primary/20"
-          />
-          <label
-            htmlFor="web-search-mse-custom-engine-template"
-            className="text-sm font-medium"
-          >
-            自定义引擎 URL 模板（必须包含 {"{query}"}）
-          </label>
-          <input
-            id="web-search-mse-custom-engine-template"
-            value={draftMseCustomEngineTemplate}
-            onChange={(e) => setDraftMseCustomEngineTemplate(e.target.value)}
-            placeholder="https://example.com/search?q={query}"
-            className="w-full h-10 rounded-md border bg-background px-3 text-sm outline-none focus:ring-2 focus:ring-primary/20"
-          />
-        </div>
-      </div>
-
-      <div className="rounded-lg border p-5 space-y-4">
-        <div className="flex items-start justify-between gap-3">
-          <div className="flex items-center gap-2">
-            <ImageIcon className="h-4 w-4 text-primary" />
-            <div>
-              <h3 className="text-sm font-medium">联网图片搜索</h3>
-              <p className="text-xs text-muted-foreground">
-                配置插图页「图片搜索 → 联网搜索」使用的 Pexels API Key。
-              </p>
+            <div className="grid gap-3 sm:grid-cols-3 xl:grid-cols-1 xl:content-start">
+              <SummaryStat
+                label="已就绪 Provider"
+                value={configuredSearchProviders.toString()}
+                description="按当前表单状态估算，可直接参与回退链的搜索来源。"
+              />
+              <SummaryStat
+                label="图片搜索 Key"
+                value={[pexelsKeyConfigured, pixabayKeyConfigured]
+                  .filter(Boolean)
+                  .length.toString()}
+                description="用于插图页联网图片搜索的可用 API Key 数量。"
+              />
+              <SummaryStat
+                label="待保存变更"
+                value={hasUnsavedChanges ? "有" : "无"}
+                description="修改搜索引擎、Key 或聚合参数后统一在底部保存。"
+              />
             </div>
           </div>
-          <div className="flex flex-col items-end gap-1">
-            <span
-              className={`inline-flex items-center rounded-full px-2 py-1 text-xs ${
-                pexelsKeyConfigured
-                  ? "bg-green-500/10 text-green-600 dark:text-green-400"
-                  : "bg-muted text-muted-foreground"
-              }`}
-            >
-              Pexels {pexelsKeyConfigured ? "已填写" : "未填写"}
-            </span>
-            <span
-              className={`inline-flex items-center rounded-full px-2 py-1 text-xs ${
-                pixabayKeyConfigured
-                  ? "bg-green-500/10 text-green-600 dark:text-green-400"
-                  : "bg-muted text-muted-foreground"
-              }`}
-            >
-              Pixabay {pixabayKeyConfigured ? "已填写" : "未填写"}
-            </span>
-          </div>
+        </div>
+      </section>
+
+      <div className="grid gap-6 xl:grid-cols-[minmax(0,1.15fr)_minmax(320px,0.85fr)]">
+        <div className="space-y-6">
+          <SurfacePanel
+            icon={Search}
+            title="联网搜索配置"
+            description="先确定搜索引擎和首选 Provider，再补齐回退顺序与所需凭证。"
+            aside={
+              <>
+                <StatusPill
+                  active={draftEngine === "google"}
+                  label={
+                    draftEngine === "google" ? "通用搜索优先" : "小红书内容优先"
+                  }
+                />
+                <StatusPill
+                  active={draftProvider === "duckduckgo_instant"}
+                  label={`当前 Provider：${draftProvider}`}
+                />
+              </>
+            }
+          >
+            <div className="grid gap-5 xl:grid-cols-[minmax(0,0.92fr)_minmax(0,1.08fr)]">
+              <article className="rounded-[24px] border border-slate-200/80 bg-slate-50/60 p-4">
+                <div className="space-y-4">
+                  <FieldBlock
+                    label="选择搜索引擎"
+                    htmlFor="web-search-engine"
+                    hint="Google 适用于通用搜索，小红书适用于中文生活方式和购物内容。"
+                  >
+                    <select
+                      id="web-search-engine"
+                      value={draftEngine}
+                      onChange={(e) =>
+                        setDraftEngine(e.target.value as SearchEngine)
+                      }
+                      className={`${INPUT_CLASS_NAME} h-11`}
+                    >
+                      <option value="google">Google</option>
+                      <option value="xiaohongshu">小红书</option>
+                    </select>
+                  </FieldBlock>
+
+                  <FieldBlock
+                    label="首选搜索提供商"
+                    htmlFor="web-search-provider"
+                  >
+                    <select
+                      id="web-search-provider"
+                      value={draftProvider}
+                      onChange={(e) =>
+                        setDraftProvider(e.target.value as WebSearchProvider)
+                      }
+                      className={`${INPUT_CLASS_NAME} h-11`}
+                    >
+                      <option value="tavily">Tavily Search API</option>
+                      <option value="multi_search_engine">
+                        Multi Search Engine v2.0.1
+                      </option>
+                      <option value="duckduckgo_instant">
+                        DuckDuckGo Instant Answer (免费)
+                      </option>
+                      <option value="bing_search_api">Bing Search API</option>
+                      <option value="google_custom_search">
+                        Google Custom Search API
+                      </option>
+                    </select>
+                  </FieldBlock>
+
+                  <FieldBlock
+                    label="提供商回退优先级（逗号分隔）"
+                    htmlFor="web-search-provider-priority"
+                    hint="未填写时会自动使用默认回退链；未知 provider 会被忽略。"
+                  >
+                    <input
+                      id="web-search-provider-priority"
+                      value={draftProviderPriority}
+                      onChange={(e) => setDraftProviderPriority(e.target.value)}
+                      placeholder="tavily, multi_search_engine, bing_search_api, google_custom_search, duckduckgo_instant"
+                      className={INPUT_CLASS_NAME}
+                    />
+                  </FieldBlock>
+                </div>
+              </article>
+
+              <article className="rounded-[24px] border border-slate-200/80 bg-slate-50/60 p-4">
+                <div className="space-y-4">
+                  <div className="rounded-[20px] border border-slate-200/80 bg-white p-4">
+                    <p className="text-sm font-semibold text-slate-900">
+                      Provider 凭证状态
+                    </p>
+                    <div className="mt-3 flex flex-wrap gap-2">
+                      <StatusPill
+                        active={tavilyKeyConfigured}
+                        label={`Tavily ${tavilyKeyConfigured ? "已填写" : "未填写"}`}
+                      />
+                      <StatusPill
+                        active={bingSearchKeyConfigured}
+                        label={`Bing ${bingSearchKeyConfigured ? "已填写" : "未填写"}`}
+                      />
+                      <StatusPill
+                        active={googleSearchKeyConfigured}
+                        label={`Google ${googleSearchKeyConfigured ? "已填写" : "未填写"}`}
+                      />
+                      <StatusPill
+                        active={googleSearchEngineConfigured}
+                        label={`CSE ${googleSearchEngineConfigured ? "已填写" : "未填写"}`}
+                      />
+                    </div>
+                  </div>
+
+                  <div className="rounded-[20px] border border-slate-200/80 bg-white p-4">
+                    <p className="text-sm font-semibold text-slate-900">
+                      当前回退预览
+                    </p>
+                    <p className="mt-2 text-sm leading-6 text-slate-500">
+                      {providerChainPreview}
+                    </p>
+                  </div>
+
+                  <div className="rounded-[20px] border border-slate-200/80 bg-white p-4">
+                    <p className="text-sm font-semibold text-slate-900">
+                      配置建议
+                    </p>
+                    <p className="mt-2 text-sm leading-6 text-slate-500">
+                      如果需要更稳定的通用联网搜索，优先补齐 Tavily、Bing 或
+                      Google Custom Search；MSE 更适合做聚合兜底。
+                    </p>
+                  </div>
+                </div>
+              </article>
+            </div>
+          </SurfacePanel>
+
+          <SurfacePanel
+            icon={ShieldCheck}
+            title="Provider 凭证"
+            description="把 Tavily、Bing、Google Custom Search 的 Key 放在同一块配置，减少来回跳转。"
+          >
+            <div className="grid gap-4 xl:grid-cols-2">
+              <article className="rounded-[24px] border border-slate-200/80 bg-slate-50/60 p-4">
+                <FieldBlock
+                  label="Tavily API Key"
+                  htmlFor="web-search-tavily-key"
+                  hint="未填写时会回退环境变量 TAVILY_API_KEY。"
+                >
+                  <>
+                    <div className="mb-2 flex items-center gap-2">
+                      <button
+                        type="button"
+                        onClick={() => void openExternalUrl(TAVILY_APPLY_URL)}
+                        className={TEXT_BUTTON_CLASS_NAME}
+                      >
+                        申请 Tavily Key
+                      </button>
+                      <button
+                        type="button"
+                        onClick={() => void openExternalUrl(TAVILY_DOC_URL)}
+                        className={TEXT_BUTTON_CLASS_NAME}
+                      >
+                        查看文档
+                      </button>
+                    </div>
+                    <SecretInput
+                      id="web-search-tavily-key"
+                      value={draftTavilyApiKey}
+                      placeholder="输入 TAVILY_API_KEY"
+                      visible={showTavilyApiKey}
+                      onToggleVisible={() =>
+                        setShowTavilyApiKey((prev) => !prev)
+                      }
+                      onChange={setDraftTavilyApiKey}
+                    />
+                  </>
+                </FieldBlock>
+              </article>
+
+              <article className="rounded-[24px] border border-slate-200/80 bg-slate-50/60 p-4">
+                <FieldBlock
+                  label="Bing Search API Key"
+                  htmlFor="web-search-bing-key"
+                  hint="未填写时会回退环境变量 BING_SEARCH_API_KEY。"
+                >
+                  <>
+                    <div className="mb-2 flex items-center gap-2">
+                      <button
+                        type="button"
+                        onClick={() =>
+                          void openExternalUrl(BING_SEARCH_APPLY_URL)
+                        }
+                        className={TEXT_BUTTON_CLASS_NAME}
+                      >
+                        申请 Bing Key
+                      </button>
+                      <button
+                        type="button"
+                        onClick={() =>
+                          void openExternalUrl(BING_SEARCH_DOC_URL)
+                        }
+                        className={TEXT_BUTTON_CLASS_NAME}
+                      >
+                        查看文档
+                      </button>
+                    </div>
+                    <SecretInput
+                      id="web-search-bing-key"
+                      value={draftBingSearchApiKey}
+                      placeholder="输入 BING_SEARCH_API_KEY"
+                      visible={showBingSearchApiKey}
+                      onToggleVisible={() =>
+                        setShowBingSearchApiKey((prev) => !prev)
+                      }
+                      onChange={setDraftBingSearchApiKey}
+                    />
+                  </>
+                </FieldBlock>
+              </article>
+
+              <article className="rounded-[24px] border border-slate-200/80 bg-slate-50/60 p-4 xl:col-span-2">
+                <div className="grid gap-4 xl:grid-cols-[minmax(0,1fr)_minmax(280px,0.74fr)]">
+                  <FieldBlock
+                    label="Google Search API Key"
+                    htmlFor="web-search-google-key"
+                    hint="未填写时会回退环境变量 GOOGLE_SEARCH_API_KEY。"
+                  >
+                    <>
+                      <div className="mb-2 flex items-center gap-2">
+                        <button
+                          type="button"
+                          onClick={() =>
+                            void openExternalUrl(GOOGLE_SEARCH_API_APPLY_URL)
+                          }
+                          className={TEXT_BUTTON_CLASS_NAME}
+                        >
+                          申请 Google Key
+                        </button>
+                        <button
+                          type="button"
+                          onClick={() =>
+                            void openExternalUrl(GOOGLE_SEARCH_DOC_URL)
+                          }
+                          className={TEXT_BUTTON_CLASS_NAME}
+                        >
+                          查看文档
+                        </button>
+                      </div>
+                      <SecretInput
+                        id="web-search-google-key"
+                        value={draftGoogleSearchApiKey}
+                        placeholder="输入 GOOGLE_SEARCH_API_KEY"
+                        visible={showGoogleSearchApiKey}
+                        onToggleVisible={() =>
+                          setShowGoogleSearchApiKey((prev) => !prev)
+                        }
+                        onChange={setDraftGoogleSearchApiKey}
+                      />
+                    </>
+                  </FieldBlock>
+
+                  <FieldBlock
+                    label="Google Search Engine ID (CSE CX)"
+                    htmlFor="web-search-google-engine-id"
+                    hint="未填写时会回退环境变量 GOOGLE_SEARCH_ENGINE_ID。"
+                  >
+                    <>
+                      <div className="mb-2">
+                        <button
+                          type="button"
+                          onClick={() =>
+                            void openExternalUrl(GOOGLE_SEARCH_CSE_URL)
+                          }
+                          className={TEXT_BUTTON_CLASS_NAME}
+                        >
+                          创建 CSE
+                        </button>
+                      </div>
+                      <input
+                        id="web-search-google-engine-id"
+                        value={draftGoogleSearchEngineId}
+                        onChange={(e) =>
+                          setDraftGoogleSearchEngineId(e.target.value)
+                        }
+                        placeholder="输入 GOOGLE_SEARCH_ENGINE_ID"
+                        className={INPUT_CLASS_NAME}
+                      />
+                    </>
+                  </FieldBlock>
+                </div>
+              </article>
+            </div>
+          </SurfacePanel>
+
+          <SurfacePanel
+            icon={Layers3}
+            title="Multi Search Engine"
+            description="集中维护 MSE 聚合顺序、上限、超时和自定义引擎模板。"
+            aside={
+              <StatusPill
+                active={mseCustomEngineReady}
+                label={`自定义模板 ${mseCustomEngineReady ? "可用" : "未配置"}`}
+              />
+            }
+          >
+            <div className="grid gap-5 xl:grid-cols-[minmax(0,1fr)_minmax(300px,0.72fr)]">
+              <article className="rounded-[24px] border border-slate-200/80 bg-slate-50/60 p-4">
+                <div className="space-y-4">
+                  <FieldBlock
+                    label="Multi Search Engine 引擎优先级（逗号分隔）"
+                    htmlFor="web-search-mse-priority"
+                  >
+                    <>
+                      <div className="mb-2">
+                        <button
+                          type="button"
+                          onClick={() => void openExternalUrl(MSE_DOC_URL)}
+                          className={TEXT_BUTTON_CLASS_NAME}
+                        >
+                          查看 MSE 设计参考
+                        </button>
+                      </div>
+                      <input
+                        id="web-search-mse-priority"
+                        value={draftMsePriority}
+                        onChange={(e) => setDraftMsePriority(e.target.value)}
+                        placeholder="google, bing, duckduckgo, brave"
+                        className={INPUT_CLASS_NAME}
+                      />
+                    </>
+                  </FieldBlock>
+
+                  <div className="grid gap-3 sm:grid-cols-3">
+                    <FieldBlock
+                      label="每引擎结果上限"
+                      htmlFor="web-search-mse-max-per-engine"
+                    >
+                      <input
+                        id="web-search-mse-max-per-engine"
+                        value={draftMseMaxResultsPerEngine}
+                        onChange={(e) =>
+                          setDraftMseMaxResultsPerEngine(e.target.value)
+                        }
+                        className={INPUT_CLASS_NAME}
+                      />
+                    </FieldBlock>
+                    <FieldBlock
+                      label="聚合结果总上限"
+                      htmlFor="web-search-mse-max-total"
+                    >
+                      <input
+                        id="web-search-mse-max-total"
+                        value={draftMseMaxTotalResults}
+                        onChange={(e) =>
+                          setDraftMseMaxTotalResults(e.target.value)
+                        }
+                        className={INPUT_CLASS_NAME}
+                      />
+                    </FieldBlock>
+                    <FieldBlock
+                      label="单引擎超时 (ms)"
+                      htmlFor="web-search-mse-timeout"
+                    >
+                      <input
+                        id="web-search-mse-timeout"
+                        value={draftMseTimeoutMs}
+                        onChange={(e) => setDraftMseTimeoutMs(e.target.value)}
+                        className={INPUT_CLASS_NAME}
+                      />
+                    </FieldBlock>
+                  </div>
+
+                  <FieldBlock
+                    label="自定义引擎名称（可选）"
+                    htmlFor="web-search-mse-custom-engine-name"
+                  >
+                    <input
+                      id="web-search-mse-custom-engine-name"
+                      value={draftMseCustomEngineName}
+                      onChange={(e) =>
+                        setDraftMseCustomEngineName(e.target.value)
+                      }
+                      placeholder="例如: hn"
+                      className={INPUT_CLASS_NAME}
+                    />
+                  </FieldBlock>
+
+                  <FieldBlock
+                    label={"自定义引擎 URL 模板（必须包含 {query}）"}
+                    htmlFor="web-search-mse-custom-engine-template"
+                  >
+                    <input
+                      id="web-search-mse-custom-engine-template"
+                      value={draftMseCustomEngineTemplate}
+                      onChange={(e) =>
+                        setDraftMseCustomEngineTemplate(e.target.value)
+                      }
+                      placeholder="https://example.com/search?q={query}"
+                      className={INPUT_CLASS_NAME}
+                    />
+                  </FieldBlock>
+                </div>
+              </article>
+
+              <article className="rounded-[24px] border border-slate-200/80 bg-slate-50/60 p-4">
+                <div className="space-y-4">
+                  <div className="rounded-[20px] border border-slate-200/80 bg-white p-4">
+                    <p className="text-sm font-semibold text-slate-900">
+                      MSE 使用建议
+                    </p>
+                    <p className="mt-2 text-sm leading-6 text-slate-500">
+                      优先把常用引擎放在前面，避免总上限太高导致响应慢；超时建议维持在
+                      4s 左右作为桌面端均衡值。
+                    </p>
+                  </div>
+                  <div className="rounded-[20px] border border-slate-200/80 bg-white p-4">
+                    <p className="text-sm font-semibold text-slate-900">
+                      当前模板状态
+                    </p>
+                    <p className="mt-2 text-sm leading-6 text-slate-500">
+                      {mseCustomEngineReady
+                        ? `已准备好自定义引擎：${draftMseCustomEngineName}`
+                        : "自定义引擎还未就绪，需要名称和包含 {query} 的模板。"}
+                    </p>
+                  </div>
+                </div>
+              </article>
+            </div>
+          </SurfacePanel>
         </div>
 
-        <div className="space-y-4">
-          <label
-            htmlFor="web-search-pexels-key"
-            className="text-sm font-medium"
+        <div className="space-y-6">
+          <SurfacePanel
+            icon={ImageIcon}
+            title="联网图片搜索"
+            description="配置插图页“图片搜索 → 联网搜索”使用的 Pexels 与 Pixabay API Key。"
+            aside={
+              <>
+                <StatusPill
+                  active={pexelsKeyConfigured}
+                  label={`Pexels ${pexelsKeyConfigured ? "已填写" : "未填写"}`}
+                />
+                <StatusPill
+                  active={pixabayKeyConfigured}
+                  label={`Pixabay ${pixabayKeyConfigured ? "已填写" : "未填写"}`}
+                />
+              </>
+            }
           >
-            Pexels API Key
-          </label>
-          <div className="flex items-center gap-2">
-            <button
-              type="button"
-              onClick={() => void openExternalUrl(PEXELS_APPLY_URL)}
-              className="rounded-md border px-3 py-1.5 text-xs hover:bg-muted"
-            >
-              申请 Pexels Key
-            </button>
-            <button
-              type="button"
-              onClick={() => void openExternalUrl(PEXELS_DOC_URL)}
-              className="rounded-md border px-3 py-1.5 text-xs hover:bg-muted"
-            >
-              查看文档
-            </button>
-          </div>
-          <div className="relative">
-            <input
-              id="web-search-pexels-key"
-              type={showPexelsApiKey ? "text" : "password"}
-              value={draftPexelsApiKey}
-              onChange={(e) => setDraftPexelsApiKey(e.target.value)}
-              placeholder="输入 Pexels API Key"
-              className="w-full h-10 rounded-md border bg-background px-3 pr-20 text-sm outline-none focus:ring-2 focus:ring-primary/20"
-            />
-            <button
-              type="button"
-              onClick={() => setShowPexelsApiKey((prev) => !prev)}
-              className="absolute right-1.5 top-1/2 -translate-y-1/2 rounded-md border px-2.5 py-1 text-xs"
-            >
-              {showPexelsApiKey ? "隐藏" : "显示"}
-            </button>
-          </div>
+            <div className="space-y-5">
+              <article className="rounded-[24px] border border-slate-200/80 bg-slate-50/60 p-4">
+                <FieldBlock
+                  label="Pexels API Key"
+                  htmlFor="web-search-pexels-key"
+                  hint="未填写时会回退读取环境变量 PEXELS_API_KEY。"
+                >
+                  <>
+                    <div className="mb-2 flex items-center gap-2">
+                      <button
+                        type="button"
+                        onClick={() => void openExternalUrl(PEXELS_APPLY_URL)}
+                        className={TEXT_BUTTON_CLASS_NAME}
+                      >
+                        申请 Pexels Key
+                      </button>
+                      <button
+                        type="button"
+                        onClick={() => void openExternalUrl(PEXELS_DOC_URL)}
+                        className={TEXT_BUTTON_CLASS_NAME}
+                      >
+                        查看文档
+                      </button>
+                    </div>
+                    <SecretInput
+                      id="web-search-pexels-key"
+                      value={draftPexelsApiKey}
+                      placeholder="输入 Pexels API Key"
+                      visible={showPexelsApiKey}
+                      onToggleVisible={() =>
+                        setShowPexelsApiKey((prev) => !prev)
+                      }
+                      onChange={setDraftPexelsApiKey}
+                    />
+                  </>
+                </FieldBlock>
 
-          <div className="rounded-md bg-muted/40 px-3 py-2 text-xs text-muted-foreground space-y-1">
-            <p>
-              未填写时会回退读取环境变量 <code>PEXELS_API_KEY</code>。
-            </p>
-            <p>申请地址：{PEXELS_APPLY_URL}</p>
-            <p>验证路径：插图 → 图片搜索 → 联网搜索。</p>
-          </div>
+                <div className="mt-3 rounded-[18px] border border-slate-200 bg-white px-4 py-3 text-xs leading-5 text-slate-500">
+                  申请地址：{PEXELS_APPLY_URL}
+                  <br />
+                  验证路径：插图 → 图片搜索 → 联网搜索。
+                </div>
+              </article>
 
-          <div className="h-px bg-border/60" />
+              <article className="rounded-[24px] border border-slate-200/80 bg-slate-50/60 p-4">
+                <FieldBlock
+                  label="Pixabay API Key"
+                  htmlFor="web-search-pixabay-key"
+                  hint="未填写时会回退读取环境变量 PIXABAY_API_KEY。"
+                >
+                  <>
+                    <div className="mb-2 flex items-center gap-2">
+                      <button
+                        type="button"
+                        onClick={() => void openExternalUrl(PIXABAY_APPLY_URL)}
+                        className={TEXT_BUTTON_CLASS_NAME}
+                      >
+                        申请 Pixabay Key
+                      </button>
+                      <button
+                        type="button"
+                        onClick={() => void openExternalUrl(PIXABAY_DOC_URL)}
+                        className={TEXT_BUTTON_CLASS_NAME}
+                      >
+                        查看文档
+                      </button>
+                    </div>
+                    <SecretInput
+                      id="web-search-pixabay-key"
+                      value={draftPixabayApiKey}
+                      placeholder="输入 Pixabay API Key"
+                      visible={showPixabayApiKey}
+                      onToggleVisible={() =>
+                        setShowPixabayApiKey((prev) => !prev)
+                      }
+                      onChange={setDraftPixabayApiKey}
+                    />
+                  </>
+                </FieldBlock>
 
-          <label
-            htmlFor="web-search-pixabay-key"
-            className="text-sm font-medium"
+                <div className="mt-3 rounded-[18px] border border-slate-200 bg-white px-4 py-3 text-xs leading-5 text-slate-500">
+                  申请地址：{PIXABAY_APPLY_URL}
+                  <br />
+                  验证路径：插图 → 图片搜索 → Pixabay 图库。
+                </div>
+              </article>
+            </div>
+          </SurfacePanel>
+
+          <SurfacePanel
+            icon={Compass}
+            title="观测面板"
+            description="快速判断当前搜索链路是否齐全，便于在保存前做一次配置自检。"
           >
-            Pixabay API Key
-          </label>
-          <div className="flex items-center gap-2">
-            <button
-              type="button"
-              onClick={() => void openExternalUrl(PIXABAY_APPLY_URL)}
-              className="rounded-md border px-3 py-1.5 text-xs hover:bg-muted"
-            >
-              申请 Pixabay Key
-            </button>
-            <button
-              type="button"
-              onClick={() => void openExternalUrl(PIXABAY_DOC_URL)}
-              className="rounded-md border px-3 py-1.5 text-xs hover:bg-muted"
-            >
-              查看文档
-            </button>
-          </div>
-          <div className="relative">
-            <input
-              id="web-search-pixabay-key"
-              type={showPixabayApiKey ? "text" : "password"}
-              value={draftPixabayApiKey}
-              onChange={(e) => setDraftPixabayApiKey(e.target.value)}
-              placeholder="输入 Pixabay API Key"
-              className="w-full h-10 rounded-md border bg-background px-3 pr-20 text-sm outline-none focus:ring-2 focus:ring-primary/20"
-            />
-            <button
-              type="button"
-              onClick={() => setShowPixabayApiKey((prev) => !prev)}
-              className="absolute right-1.5 top-1/2 -translate-y-1/2 rounded-md border px-2.5 py-1 text-xs"
-            >
-              {showPixabayApiKey ? "隐藏" : "显示"}
-            </button>
-          </div>
-          <div className="rounded-md bg-muted/40 px-3 py-2 text-xs text-muted-foreground space-y-1">
-            <p>
-              未填写时会回退读取环境变量 <code>PIXABAY_API_KEY</code>。
-            </p>
-            <p>申请地址：{PIXABAY_APPLY_URL}</p>
-            <p>验证路径：插图 → 图片搜索 → Pixabay图库。</p>
-          </div>
+            <div className="space-y-4">
+              <div className="flex flex-wrap gap-2">
+                <StatusPill
+                  active={tavilyKeyConfigured}
+                  label={`Tavily ${tavilyKeyConfigured ? "已填写" : "未填写"}`}
+                />
+                <StatusPill
+                  active={bingSearchKeyConfigured}
+                  label={`Bing ${bingSearchKeyConfigured ? "已填写" : "未填写"}`}
+                />
+                <StatusPill
+                  active={googleSearchKeyConfigured}
+                  label={`Google ${googleSearchKeyConfigured ? "已填写" : "未填写"}`}
+                />
+                <StatusPill
+                  active={googleSearchEngineConfigured}
+                  label={`CSE ${googleSearchEngineConfigured ? "已填写" : "未填写"}`}
+                />
+                <StatusPill
+                  active={mseCustomEngineReady}
+                  label={`MSE 自定义模板 ${mseCustomEngineReady ? "可用" : "未配置"}`}
+                />
+              </div>
+              <div className="rounded-[20px] border border-slate-200/80 bg-slate-50/60 p-4">
+                <p className="text-sm font-semibold text-slate-900">
+                  当前 provider 回退链
+                </p>
+                <p className="mt-2 text-sm leading-6 text-slate-500">
+                  {providerChainPreview}
+                </p>
+              </div>
+              <div className="rounded-[20px] border border-slate-200/80 bg-slate-50/60 p-4">
+                <p className="text-sm font-semibold text-slate-900">
+                  图片搜索 Key
+                </p>
+                <p className="mt-2 text-sm leading-6 text-slate-500">
+                  {pexelsKeyConfigured || pixabayKeyConfigured
+                    ? "插图页至少已有一个联网图片来源可用。"
+                    : "图片搜索 Key 仍未配置，插图页联网搜索会回退到环境变量或不可用状态。"}
+                </p>
+              </div>
+            </div>
+          </SurfacePanel>
         </div>
       </div>
 
-      <div className="rounded-lg border p-4 space-y-2">
-        <h3 className="text-sm font-medium">观测面板</h3>
-        <div className="flex flex-wrap items-center gap-2">
-          <span
-            className={`inline-flex items-center rounded-full px-2 py-1 text-xs ${
-              tavilyKeyConfigured
-                ? "bg-green-500/10 text-green-600 dark:text-green-400"
-                : "bg-muted text-muted-foreground"
-            }`}
-          >
-            Tavily {tavilyKeyConfigured ? "已填写" : "未填写"}
-          </span>
-          <span
-            className={`inline-flex items-center rounded-full px-2 py-1 text-xs ${
-              bingSearchKeyConfigured
-                ? "bg-green-500/10 text-green-600 dark:text-green-400"
-                : "bg-muted text-muted-foreground"
-            }`}
-          >
-            Bing {bingSearchKeyConfigured ? "已填写" : "未填写"}
-          </span>
-          <span
-            className={`inline-flex items-center rounded-full px-2 py-1 text-xs ${
-              googleSearchKeyConfigured
-                ? "bg-green-500/10 text-green-600 dark:text-green-400"
-                : "bg-muted text-muted-foreground"
-            }`}
-          >
-            Google {googleSearchKeyConfigured ? "已填写" : "未填写"}
-          </span>
-          <span
-            className={`inline-flex items-center rounded-full px-2 py-1 text-xs ${
-              googleSearchEngineConfigured
-                ? "bg-green-500/10 text-green-600 dark:text-green-400"
-                : "bg-muted text-muted-foreground"
-            }`}
-          >
-            CSE {googleSearchEngineConfigured ? "已填写" : "未填写"}
-          </span>
-          <span
-            className={`inline-flex items-center rounded-full px-2 py-1 text-xs ${
-              mseCustomEngineReady
-                ? "bg-green-500/10 text-green-600 dark:text-green-400"
-                : "bg-muted text-muted-foreground"
-            }`}
-          >
-            MSE 自定义模板 {mseCustomEngineReady ? "可用" : "未配置"}
-          </span>
-        </div>
-        <p className="text-xs text-muted-foreground">
-          当前 provider 回退链：
-          {parseCsv(draftProviderPriority).length > 0
-            ? parseCsv(draftProviderPriority).join(" -> ")
-            : "自动默认链"}
-        </p>
-      </div>
-
-      <div className="sticky bottom-0 bg-background/95 backdrop-blur supports-[backdrop-filter]:bg-background/80 border rounded-lg px-4 py-3 flex items-center justify-between gap-3">
-        <div className="text-sm text-muted-foreground">
-          {hasUnsavedChanges ? "未保存的更改" : "所有更改已保存"}
-        </div>
-        <div className="flex items-center gap-2">
-          <button
-            type="button"
-            onClick={handleReset}
-            disabled={!hasUnsavedChanges || saving}
-            className="rounded-md border px-3 py-2 text-sm disabled:opacity-50"
-          >
-            取消
-          </button>
-          <button
-            type="button"
-            onClick={handleSave}
-            disabled={!hasUnsavedChanges || saving}
-            className="rounded-md bg-primary px-4 py-2 text-sm text-primary-foreground hover:bg-primary/90 disabled:opacity-50"
-          >
-            {saving ? "保存中..." : "保存"}
-          </button>
+      <div className="sticky bottom-0 rounded-[24px] border border-slate-200/80 bg-white/92 px-4 py-3 shadow-lg shadow-slate-950/5 backdrop-blur supports-[backdrop-filter]:bg-white/80">
+        <div className="flex flex-col gap-3 sm:flex-row sm:items-center sm:justify-between">
+          <div className="text-sm text-slate-500">
+            {hasUnsavedChanges ? "未保存的更改" : "所有更改已保存"}
+          </div>
+          <div className="flex items-center gap-2">
+            <button
+              type="button"
+              onClick={handleReset}
+              disabled={!hasUnsavedChanges || saving}
+              className={ACTION_BUTTON_CLASS_NAME}
+            >
+              取消
+            </button>
+            <button
+              type="button"
+              onClick={handleSave}
+              disabled={!hasUnsavedChanges || saving}
+              className={PRIMARY_BUTTON_CLASS_NAME}
+            >
+              {saving ? "保存中..." : "保存"}
+            </button>
+          </div>
         </div>
       </div>
     </div>
diff --git a/src/components/skills/SkillsPage.test.tsx b/src/components/skills/SkillsPage.test.tsx
index c65355fe0..6a989f079 100644
--- a/src/components/skills/SkillsPage.test.tsx
+++ b/src/components/skills/SkillsPage.test.tsx
@@ -12,6 +12,12 @@ const mockUseSkills = vi.fn();
 const mockInspectLocalSkill = vi.fn();
 const mockInspectRemoteSkill = vi.fn();
 const mockCreateSkillScaffold = vi.fn();
+const mockImportLocalSkill = vi.fn();
+const mockOpenDialog = vi.fn();
+
+vi.mock("@tauri-apps/plugin-dialog", () => ({
+  open: (...args: unknown[]) => mockOpenDialog(...args),
+}));
 
 vi.mock("@/hooks/useSkills", () => ({
   useSkills: (...args: unknown[]) => mockUseSkills(...args),
@@ -32,6 +38,7 @@ vi.mock("@/lib/api/skills", async () => {
         mockInspectRemoteSkill(...args),
       createSkillScaffold: (...args: unknown[]) =>
         mockCreateSkillScaffold(...args),
+      importLocalSkill: (...args: unknown[]) => mockImportLocalSkill(...args),
     },
   };
 });
@@ -113,6 +120,8 @@ beforeEach(() => {
   mockInspectLocalSkill.mockReset();
   mockInspectRemoteSkill.mockReset();
   mockCreateSkillScaffold.mockReset();
+  mockImportLocalSkill.mockReset();
+  mockOpenDialog.mockReset();
   mockInspectLocalSkill.mockResolvedValue({
     content: "# Test",
     metadata: {},
@@ -158,6 +167,8 @@ beforeEach(() => {
       deprecatedFields: [],
     },
   });
+  mockImportLocalSkill.mockResolvedValue({ directory: "imported-skill" });
+  mockOpenDialog.mockResolvedValue("/tmp/imported-skill");
 });
 
 afterEach(() => {
@@ -421,9 +432,9 @@ describe("SkillsPage", () => {
 
     renderSkillsPage();
 
-    const openButton = Array.from(document.body.querySelectorAll("button")).find(
-      (item) => item.textContent?.includes("新建 Skill"),
-    );
+    const openButton = Array.from(
+      document.body.querySelectorAll("button"),
+    ).find((item) => item.textContent?.includes("新建 Skill"));
 
     await act(async () => {
       openButton?.dispatchEvent(new MouseEvent("click", { bubbles: true }));
@@ -464,4 +475,40 @@ describe("SkillsPage", () => {
     );
     expect(refresh).toHaveBeenCalledTimes(1);
   });
+
+  it("点击导入 Skill 应调用导入 API 并刷新列表", async () => {
+    const refresh = vi.fn().mockResolvedValue(undefined);
+    mockUseSkills.mockReturnValue({
+      skills: [],
+      repos: [],
+      loading: false,
+      remoteLoading: false,
+      error: null,
+      refresh,
+      install: vi.fn(),
+      uninstall: vi.fn(),
+      addRepo: vi.fn(),
+      removeRepo: vi.fn(),
+    });
+
+    const { container } = renderSkillsPage();
+    const importButton = Array.from(container.querySelectorAll("button")).find(
+      (item) => item.textContent?.includes("导入 Skill"),
+    );
+
+    await act(async () => {
+      importButton?.dispatchEvent(new MouseEvent("click", { bubbles: true }));
+    });
+
+    expect(mockOpenDialog).toHaveBeenCalledWith({
+      directory: true,
+      multiple: false,
+      title: "选择一个包含 SKILL.md 的技能目录",
+    });
+    expect(mockImportLocalSkill).toHaveBeenCalledWith(
+      "/tmp/imported-skill",
+      "proxycast",
+    );
+    expect(refresh).toHaveBeenCalledTimes(1);
+  });
 });
diff --git a/src/components/skills/SkillsPage.tsx b/src/components/skills/SkillsPage.tsx
index be9f032e6..49401ce11 100644
--- a/src/components/skills/SkillsPage.tsx
+++ b/src/components/skills/SkillsPage.tsx
@@ -1,4 +1,5 @@
 import { useState, forwardRef, useImperativeHandle, useRef } from "react";
+import { open as openDialog } from "@tauri-apps/plugin-dialog";
 import {
   CheckCircle2,
   ChevronDown,
@@ -50,10 +51,8 @@ const sectionStyleMap = {
     displayTitle: "内置技能",
     summaryClassName:
       "bg-[linear-gradient(135deg,rgba(255,247,237,0.9),rgba(255,255,255,0.98))]",
-    iconClassName:
-      "border-orange-200 bg-orange-100/80 text-orange-700",
-    countClassName:
-      "bg-orange-100 text-orange-700",
+    iconClassName: "border-orange-200 bg-orange-100/80 text-orange-700",
+    countClassName: "bg-orange-100 text-orange-700",
     hint: "随应用提供，默认可用",
   },
   local: {
@@ -61,10 +60,8 @@ const sectionStyleMap = {
     displayTitle: "本地技能",
     summaryClassName:
       "bg-[linear-gradient(135deg,rgba(241,245,249,0.92),rgba(255,255,255,0.98))]",
-    iconClassName:
-      "border-slate-200 bg-slate-100/90 text-slate-700",
-    countClassName:
-      "bg-slate-100 text-slate-700",
+    iconClassName: "border-slate-200 bg-slate-100/90 text-slate-700",
+    countClassName: "bg-slate-100 text-slate-700",
     hint: "项目与本地技能可直接查看",
   },
   remote: {
@@ -72,10 +69,8 @@ const sectionStyleMap = {
     displayTitle: "远程技能",
     summaryClassName:
       "bg-[linear-gradient(135deg,rgba(236,253,245,0.9),rgba(255,255,255,0.98))]",
-    iconClassName:
-      "border-emerald-200 bg-emerald-100/80 text-emerald-700",
-    countClassName:
-      "bg-emerald-100 text-emerald-700",
+    iconClassName: "border-emerald-200 bg-emerald-100/80 text-emerald-700",
+    countClassName: "bg-emerald-100 text-emerald-700",
     hint: "缓存展示，支持安装前预检",
   },
 } as const;
@@ -106,6 +101,7 @@ export const SkillsPage = forwardRef<SkillsPageRef, SkillsPageProps>(
     const contentRequestIdRef = useRef(0);
     const [scaffoldDialogOpen, setScaffoldDialogOpen] = useState(false);
     const [scaffoldCreating, setScaffoldCreating] = useState(false);
+    const [importingLocalSkill, setImportingLocalSkill] = useState(false);
 
     const {
       skills,
@@ -207,6 +203,28 @@ export const SkillsPage = forwardRef<SkillsPageRef, SkillsPageProps>(
       }
     };
 
+    const handleImportLocalSkill = async () => {
+      const selected = await openDialog({
+        directory: true,
+        multiple: false,
+        title: "选择一个包含 SKILL.md 的技能目录",
+      });
+
+      if (!selected || Array.isArray(selected)) {
+        return;
+      }
+
+      setImportingLocalSkill(true);
+      try {
+        await skillsApi.importLocalSkill(selected, app);
+        await refresh();
+      } catch (e) {
+        alert(`导入失败: ${e instanceof Error ? e.message : String(e)}`);
+      } finally {
+        setImportingLocalSkill(false);
+      }
+    };
+
     /**
      * 处理执行按钮点击
      * 打开执行对话框并设置选中的 Skill
@@ -385,6 +403,16 @@ export const SkillsPage = forwardRef<SkillsPageRef, SkillsPageProps>(
                   />
                   刷新
                 </button>
+                <button
+                  onClick={() => void handleImportLocalSkill()}
+                  disabled={loading || importingLocalSkill}
+                  className={secondaryActionButtonClassName}
+                >
+                  <FolderOpen
+                    className={`h-4 w-4 ${importingLocalSkill ? "animate-pulse" : ""}`}
+                  />
+                  {importingLocalSkill ? "导入中..." : "导入 Skill"}
+                </button>
                 <button
                   onClick={() => setScaffoldDialogOpen(true)}
                   className={primaryActionButtonClassName}
diff --git a/src/components/style/StylePage.test.tsx b/src/components/style/StylePage.test.tsx
index 94670edff..2ec918c7b 100644
--- a/src/components/style/StylePage.test.tsx
+++ b/src/components/style/StylePage.test.tsx
@@ -40,6 +40,8 @@ describe("StylePage", () => {
     await flushEffects();
 
     expect(container.textContent).toContain("先确认状态与下一步动作");
+    expect(container.textContent).toContain("风格资产数");
+    expect(container.textContent).toContain("当前状态");
     expect(container.textContent).toContain("最近使用的风格");
     expect(container.textContent).toContain("最近应用到的项目");
     expect(container.textContent).not.toContain("结构化编辑");
diff --git a/src/components/style/StylePage.tsx b/src/components/style/StylePage.tsx
index 822e5cdbd..19d547855 100644
--- a/src/components/style/StylePage.tsx
+++ b/src/components/style/StylePage.tsx
@@ -1,12 +1,14 @@
-import { useCallback, useEffect, useMemo, useState } from "react";
+import { useCallback, useEffect, useMemo, useState, type ReactNode } from "react";
 import {
   ArrowRight,
+  Clock3,
   FolderKanban,
   Lightbulb,
   Palette,
   PanelsTopLeft,
   Sparkles,
   Wand2,
+  type LucideIcon,
 } from "lucide-react";
 import type {
   Page,
@@ -97,17 +99,17 @@ function SectionTabs({
   ];
 
   return (
-    <div className="inline-flex rounded-xl border bg-card p-1">
+    <div className="inline-flex rounded-2xl border border-white/85 bg-white/85 p-1 shadow-sm shadow-slate-950/5 backdrop-blur">
       {tabs.map((tab) => (
         <button
           key={tab.key}
           type="button"
           onClick={() => onChange(tab.key)}
           className={cn(
-            "rounded-lg px-3 py-1.5 text-sm transition-colors",
+            "rounded-xl px-4 py-2 text-sm font-medium transition-colors",
             activeSection === tab.key
-              ? "bg-primary text-primary-foreground"
-              : "text-muted-foreground hover:bg-muted",
+              ? "bg-slate-900 text-white shadow-sm"
+              : "text-slate-600 hover:bg-slate-100 hover:text-slate-900",
           )}
         >
           {tab.label}
@@ -117,6 +119,93 @@ function SectionTabs({
   );
 }
 
+function OverviewMetricCard({
+  label,
+  value,
+  description,
+}: {
+  label: string;
+  value: string;
+  description: string;
+}) {
+  return (
+    <div className="rounded-[22px] border border-white/90 bg-white/88 p-4 shadow-sm shadow-slate-950/5">
+      <p className="text-sm font-semibold text-slate-800">{label}</p>
+      <p className="mt-1 text-xs leading-5 text-slate-500">{description}</p>
+      <p className="mt-4 text-3xl font-semibold tracking-tight text-slate-900">
+        {value}
+      </p>
+    </div>
+  );
+}
+
+function OverviewFeatureCard({
+  icon: Icon,
+  title,
+  description,
+  accentClassName,
+  badge,
+  children,
+  actionLabel,
+  onAction,
+  actionVariant = "outline",
+  disabled = false,
+}: {
+  icon: LucideIcon;
+  title: string;
+  description: string;
+  accentClassName: string;
+  badge: string;
+  children: ReactNode;
+  actionLabel: string;
+  onAction: () => void;
+  actionVariant?: "default" | "outline";
+  disabled?: boolean;
+}) {
+  return (
+    <article className="relative overflow-hidden rounded-[26px] border border-slate-200/80 bg-white shadow-sm shadow-slate-950/5">
+      <div
+        className={`pointer-events-none absolute inset-x-0 top-0 h-24 bg-gradient-to-br ${accentClassName}`}
+      />
+      <div className="relative flex h-full flex-col p-5">
+        <div className="flex items-start justify-between gap-4">
+          <div className="flex items-start gap-3">
+            <div className="flex h-12 w-12 items-center justify-center rounded-2xl border border-white/90 bg-white/90 text-slate-700 shadow-sm">
+              <Icon className="h-5 w-5" />
+            </div>
+            <div>
+              <h2 className="text-base font-semibold tracking-tight text-slate-900">
+                {title}
+              </h2>
+              <p className="mt-1 text-sm leading-6 text-slate-500">
+                {description}
+              </p>
+            </div>
+          </div>
+          <span className="rounded-full bg-slate-100 px-3 py-1 text-xs font-medium text-slate-600">
+            {badge}
+          </span>
+        </div>
+
+        <div className="mt-5 flex flex-1 flex-col gap-4">
+          <div className="rounded-[20px] border border-slate-200/80 bg-white/90 px-4 py-4 text-sm text-slate-600">
+            {children}
+          </div>
+
+          <Button
+            className="mt-auto w-full"
+            variant={actionVariant}
+            onClick={onAction}
+            disabled={disabled}
+          >
+            {actionLabel}
+          </Button>
+        </div>
+      </div>
+    </article>
+  );
+}
+
 function RecentEntryCard({
   entry,
   onOpen,
@@ -128,19 +217,28 @@ function RecentEntryCard({
     <button
       type="button"
       onClick={() => onOpen(entry)}
-      className="rounded-xl border bg-card px-4 py-4 text-left transition-colors hover:bg-muted/30"
+      className="group rounded-[22px] border border-slate-200/80 bg-[linear-gradient(180deg,rgba(255,255,255,0.98)_0%,rgba(248,250,252,0.98)_100%)] px-4 py-4 text-left shadow-sm shadow-slate-950/5 transition hover:-translate-y-0.5 hover:border-slate-300 hover:shadow-md"
     >
       <div className="flex items-start justify-between gap-3">
-        <div className="min-w-0">
-          <div className="flex flex-wrap items-center gap-2">
-            <div className="text-sm font-medium">{entry.profile.name}</div>
-            <Badge variant="outline">{entry.sourceLabel}</Badge>
+        <div className="min-w-0 flex-1">
+          <div className="flex items-start gap-3">
+            <div className="mt-0.5 flex h-10 w-10 flex-shrink-0 items-center justify-center rounded-2xl border border-sky-200 bg-sky-100 text-sky-700">
+              <Palette className="h-4 w-4" />
+            </div>
+            <div className="min-w-0">
+              <div className="flex flex-wrap items-center gap-2">
+                <div className="truncate text-sm font-semibold text-slate-900">
+                  {entry.profile.name}
+                </div>
+                <Badge variant="outline">{entry.sourceLabel}</Badge>
+              </div>
+              <p className="mt-2 line-clamp-2 text-sm leading-6 text-slate-500">
+                {entry.profile.description || "尚未补充风格定位"}
+              </p>
+            </div>
           </div>
-          <p className="mt-2 line-clamp-2 text-sm text-muted-foreground">
-            {entry.profile.description || "尚未补充风格定位"}
-          </p>
         </div>
-        <ArrowRight className="mt-0.5 h-4 w-4 flex-shrink-0 text-muted-foreground" />
+        <ArrowRight className="mt-0.5 h-4 w-4 flex-shrink-0 text-slate-400 transition group-hover:translate-x-0.5 group-hover:text-slate-600" />
       </div>
 
       <div className="mt-3 flex flex-wrap gap-2">
@@ -150,11 +248,23 @@ function RecentEntryCard({
           </Badge>
         ))}
       </div>
+
+      <div className="mt-4 flex flex-wrap items-center justify-between gap-2 text-xs text-slate-500">
+        <span className="inline-flex items-center gap-1.5">
+          <Clock3 className="h-3.5 w-3.5" />
+          最近更新 {formatDateTimeLabel(entry.updatedAt)}
+        </span>
+        <span>
+          {entry.sourceFiles.length > 0
+            ? `${entry.sourceFiles.length} 个样本`
+            : "手动资产"}
+        </span>
+      </div>
     </button>
   );
 }
 
-function formatAppliedAtLabel(value: string): string {
+function formatDateTimeLabel(value: string): string {
   const date = new Date(value);
   if (Number.isNaN(date.getTime())) {
     return "刚刚";
@@ -180,21 +290,25 @@ function RecentApplicationCard({
   return (
     <div
       className={cn(
-        "rounded-xl border px-4 py-4",
-        isCurrentProject ? "border-primary bg-primary/5" : "bg-card",
+        "rounded-[22px] border px-4 py-4 shadow-sm shadow-slate-950/5",
+        isCurrentProject
+          ? "border-emerald-300 bg-emerald-50/80"
+          : "border-slate-200/80 bg-white",
       )}
     >
       <div className="flex flex-wrap items-center gap-2">
-        <div className="text-sm font-medium">{item.projectName}</div>
+        <div className="text-sm font-semibold text-slate-900">
+          {item.projectName}
+        </div>
         {isCurrentProject ? <Badge variant="secondary">当前项目</Badge> : null}
       </div>
 
-      <div className="mt-2 text-sm text-muted-foreground">
+      <div className="mt-2 text-sm text-slate-600">
         关联风格：{item.entryName}
       </div>
-      <div className="mt-2 text-xs text-muted-foreground">
+      <div className="mt-2 text-xs text-slate-500">
         {item.workspaceLabel ? `${item.workspaceLabel} · ` : ""}
-        应用于 {formatAppliedAtLabel(item.appliedAt)}
+        应用于 {formatDateTimeLabel(item.appliedAt)}
       </div>
 
       <div className="mt-4 flex flex-wrap gap-2">
@@ -231,21 +345,27 @@ function RecommendedActions({
   }>;
 }) {
   return (
-    <Card className="border bg-card">
-      <CardHeader className="pb-3">
-        <CardTitle className="flex items-center gap-2 text-base">
+    <Card className="relative overflow-hidden rounded-[26px] border border-amber-200/70 bg-[linear-gradient(180deg,rgba(255,251,235,0.82)_0%,rgba(255,255,255,0.98)_36%,rgba(255,255,255,1)_100%)] shadow-sm shadow-slate-950/5">
+      <div className="pointer-events-none absolute right-[-54px] top-[-24px] h-36 w-36 rounded-full bg-amber-200/40 blur-3xl" />
+      <CardHeader className="relative pb-3">
+        <CardTitle className="flex items-center gap-2 text-base text-slate-900">
           <Lightbulb className="h-4 w-4" />
           推荐下一步
         </CardTitle>
-        <CardDescription>
+        <CardDescription className="text-slate-600">
           根据当前状态，只展示最值得先做的动作。
         </CardDescription>
       </CardHeader>
-      <CardContent className="space-y-3">
+      <CardContent className="relative space-y-3">
         {items.map((item) => (
-          <div key={item.title} className="rounded-xl border px-4 py-4">
-            <div className="text-sm font-medium">{item.title}</div>
-            <div className="mt-2 text-sm text-muted-foreground">
+          <div
+            key={item.title}
+            className="rounded-[20px] border border-white/90 bg-white/90 px-4 py-4"
+          >
+            <div className="text-sm font-semibold text-slate-900">
+              {item.title}
+            </div>
+            <div className="mt-2 text-sm leading-6 text-slate-500">
               {item.description}
             </div>
             <Button
@@ -386,10 +506,12 @@ function OverviewSection({
   return (
     <div className="space-y-6">
       {entryCount === 0 ? (
-        <Card className="border bg-gradient-to-br from-primary/5 via-background to-primary/10">
+        <Card className="rounded-[26px] border border-slate-200/80 bg-[linear-gradient(135deg,rgba(248,250,252,0.98)_0%,rgba(255,255,255,1)_55%,rgba(239,246,255,0.92)_100%)] shadow-sm shadow-slate-950/5">
           <CardHeader className="pb-3">
-            <CardTitle className="text-lg">还没有风格资产</CardTitle>
-            <CardDescription>
+            <CardTitle className="text-lg text-slate-900">
+              还没有风格资产
+            </CardTitle>
+            <CardDescription className="text-slate-600">
               总览页先帮你判断下一步，不需要一上来就进入复杂工作台。
             </CardDescription>
           </CardHeader>
@@ -403,108 +525,101 @@ function OverviewSection({
       ) : null}
 
       <div className="grid gap-4 lg:grid-cols-3">
-        <Card className="border bg-card">
-          <CardHeader className="pb-3">
-            <CardTitle className="flex items-center gap-2 text-base">
-              <FolderKanban className="h-4 w-4" />
-              管理风格资产
-            </CardTitle>
-            <CardDescription>
-              当前已沉淀 {entryCount} 条风格资产，活跃风格为 {activeEntryName}。
-            </CardDescription>
-          </CardHeader>
-          <CardContent className="space-y-4">
-            <div className="text-sm text-muted-foreground">
-              在工作台中完成上传、编辑、预设导入和条目维护。
+        <OverviewFeatureCard
+          icon={FolderKanban}
+          title="管理风格资产"
+          description={`当前已沉淀 ${entryCount} 条风格资产，活跃风格为 ${activeEntryName}。`}
+          accentClassName="from-sky-200/65 via-white to-white"
+          badge={`${entryCount} 条`}
+          actionLabel="进入风格库工作台"
+          onAction={onEnterLibrary}
+          actionVariant="default"
+        >
+          <div className="space-y-3">
+            <div>在工作台中完成上传、编辑、预设导入和条目维护。</div>
+            <div className="inline-flex rounded-full border border-slate-200/80 bg-slate-50 px-3 py-1 text-xs text-slate-500">
+              优先在这里沉淀可复用的个人风格基线
             </div>
-            <Button className="w-full" onClick={onEnterLibrary}>
-              进入风格库工作台
-            </Button>
-          </CardContent>
-        </Card>
+          </div>
+        </OverviewFeatureCard>
 
-        <Card className="border bg-card">
-          <CardHeader className="pb-3">
-            <CardTitle className="flex items-center gap-2 text-base">
-              <Palette className="h-4 w-4" />
-              项目默认风格
-            </CardTitle>
-            <CardDescription>
+        <OverviewFeatureCard
+          icon={Palette}
+          title="项目默认风格"
+          description={
+            projectId
+              ? `当前项目：${project?.name || "正在加载项目..."}`
+              : "当前未选择项目"
+          }
+          accentClassName="from-emerald-200/65 via-white to-white"
+          badge={projectId ? "项目已绑定" : "等待项目"}
+          actionLabel="打开项目风格策略"
+          onAction={onOpenProjectStyleGuide}
+          disabled={!projectId}
+        >
+          {hasStyleGuideContent(projectStyleGuide) ? (
+            <div className="space-y-2">
+              {projectStyleSummary.map((item) => (
+                <div key={item}>{item}</div>
+              ))}
+            </div>
+          ) : (
+            <div>
               {projectId
-                ? `当前项目：${project?.name || "正在加载项目..."}`
-                : "当前未选择项目"}
-            </CardDescription>
-          </CardHeader>
-          <CardContent className="space-y-4">
-            {hasStyleGuideContent(projectStyleGuide) ? (
-              <div className="space-y-2 text-sm text-muted-foreground">
-                {projectStyleSummary.map((item) => (
-                  <div key={item}>{item}</div>
-                ))}
-              </div>
-            ) : (
-              <div className="text-sm text-muted-foreground">
-                {projectId
-                  ? "当前项目还没有默认风格，建议先从风格库选择一条资产应用到项目。"
-                  : "选择项目后，可以把某条风格资产设为该项目的默认风格基线。"}
-              </div>
-            )}
-            <Button
-              variant="outline"
-              className="w-full"
-              disabled={!projectId}
-              onClick={onOpenProjectStyleGuide}
-            >
-              打开项目风格策略
-            </Button>
-          </CardContent>
-        </Card>
+                ? "当前项目还没有默认风格，建议先从风格库选择一条资产应用到项目。"
+                : "选择项目后，可以把某条风格资产设为该项目的默认风格基线。"}
+            </div>
+          )}
+        </OverviewFeatureCard>
 
-        <Card className="border bg-card">
-          <CardHeader className="pb-3">
-            <CardTitle className="flex items-center gap-2 text-base">
-              <Wand2 className="h-4 w-4" />
-              画布即时风格化
-            </CardTitle>
-            <CardDescription>
-              文本风格化会优先读取项目默认风格，再回退到通用润色。
-            </CardDescription>
-          </CardHeader>
-          <CardContent className="space-y-4">
-            <div className="inline-flex rounded-full border px-3 py-1 text-xs text-muted-foreground">
+        <OverviewFeatureCard
+          icon={Wand2}
+          title="画布即时风格化"
+          description="文本风格化会优先读取项目默认风格，再回退到通用润色。"
+          accentClassName="from-amber-200/60 via-white to-white"
+          badge={textStylizeSourceLabel}
+          actionLabel="进入风格库工作台"
+          onAction={onEnterLibrary}
+        >
+          <div className="space-y-3">
+            <div className="inline-flex rounded-full border border-amber-200 bg-amber-50 px-3 py-1 text-xs text-amber-700">
               当前来源：{textStylizeSourceLabel}
             </div>
-            <div className="text-sm text-muted-foreground">
-              总览页只负责建立心智模型；真正的资产编辑和应用操作放在工作台中完成。
+            <div>
+              总览页负责建立心智模型；真正的资产编辑和应用操作放在工作台中完成。
             </div>
-          </CardContent>
-        </Card>
+          </div>
+        </OverviewFeatureCard>
       </div>
 
-      <div className="grid gap-4 xl:grid-cols-[minmax(0,1.2fr)_420px]">
-        <Card className="border bg-card">
+      <div className="grid gap-4 xl:grid-cols-[minmax(0,1.35fr)_420px]">
+        <Card className="rounded-[26px] border border-slate-200/80 bg-white shadow-sm shadow-slate-950/5">
           <CardHeader className="pb-3">
-            <CardTitle className="flex items-center gap-2 text-base">
+            <CardTitle className="flex items-center gap-2 text-base text-slate-900">
               <Sparkles className="h-4 w-4" />
               最近使用的风格
             </CardTitle>
-            <CardDescription>
+            <CardDescription className="text-slate-600">
               从最近资产继续编辑，比直接进入完整工作台更轻量。
             </CardDescription>
           </CardHeader>
           <CardContent className="space-y-3">
             {recentEntries.length > 0 ? (
-              recentEntries.map((entry) => (
-                <RecentEntryCard
-                  key={entry.id}
-                  entry={entry}
-                  onOpen={onOpenRecentEntry}
-                />
-              ))
+              <div className="grid gap-3 md:grid-cols-2">
+                {recentEntries.map((entry) => (
+                  <RecentEntryCard
+                    key={entry.id}
+                    entry={entry}
+                    onOpen={onOpenRecentEntry}
+                  />
+                ))}
+              </div>
             ) : (
-              <div className="rounded-xl border border-dashed px-6 py-10 text-center">
-                <div className="text-sm font-medium">还没有风格资产</div>
-                <p className="mt-2 text-sm text-muted-foreground">
+              <div className="rounded-[22px] border border-dashed border-slate-300 px-6 py-10 text-center">
+                <div className="text-sm font-medium text-slate-900">
+                  还没有风格资产
+                </div>
+                <p className="mt-2 text-sm text-slate-500">
                   先上传样本或新建一条手动风格，再进入工作台继续维护。
                 </p>
                 <Button className="mt-4" onClick={onEnterLibrary}>
@@ -516,33 +631,47 @@ function OverviewSection({
         </Card>
 
         <div className="space-y-4">
-          <Card className="border bg-card">
-            <CardHeader className="pb-3">
-              <CardTitle className="flex items-center gap-2 text-base">
+          <Card className="relative overflow-hidden rounded-[26px] border border-slate-200/80 bg-[linear-gradient(180deg,rgba(248,250,252,0.92)_0%,rgba(255,255,255,1)_40%)] shadow-sm shadow-slate-950/5">
+            <div className="pointer-events-none absolute left-[-48px] top-[-32px] h-36 w-36 rounded-full bg-sky-200/25 blur-3xl" />
+            <CardHeader className="relative pb-3">
+              <CardTitle className="flex items-center gap-2 text-base text-slate-900">
                 <PanelsTopLeft className="h-4 w-4" />
                 入口与状态
               </CardTitle>
-              <CardDescription>
+              <CardDescription className="text-slate-600">
                 总览页只保留状态感知与入口，不与编辑表单混排。
               </CardDescription>
             </CardHeader>
-            <CardContent className="space-y-5">
-              <div className="flex items-center justify-between rounded-xl border px-4 py-3">
+            <CardContent className="relative space-y-5">
+              <div className="flex items-center justify-between rounded-[20px] border border-slate-200/80 bg-white/92 px-4 py-3">
                 <div>
-                  <div className="text-sm font-medium">启用我的风格</div>
-                  <div className="mt-1 text-xs text-muted-foreground">
+                  <div className="text-sm font-medium text-slate-900">
+                    启用我的风格
+                  </div>
+                  <div className="mt-1 text-xs text-slate-500">
                     开启后，我的风格会出现在创作任务风格选择器中。
                   </div>
                 </div>
                 <Switch checked={enabled} onCheckedChange={onEnableChange} />
               </div>
 
-              <div className="rounded-xl border px-4 py-4">
-                <div className="text-sm font-medium">建议使用路径</div>
-                <div className="mt-3 space-y-2 text-sm text-muted-foreground">
-                  <div>1. 进入工作台沉淀或整理风格资产</div>
-                  <div>2. 将风格资产应用到当前项目默认风格</div>
-                  <div>3. 在画布上通过文本风格化消费项目风格基线</div>
+              <div className="rounded-[20px] border border-slate-200/80 bg-white/92 px-4 py-4">
+                <div className="text-sm font-medium text-slate-900">
+                  建议使用路径
+                </div>
+                <div className="mt-3 space-y-3">
+                  {[
+                    "进入工作台沉淀或整理风格资产",
+                    "将风格资产应用到当前项目默认风格",
+                    "在画布上通过文本风格化消费项目风格基线",
+                  ].map((item, index) => (
+                    <div key={item} className="flex gap-3 text-sm text-slate-600">
+                      <span className="flex h-6 w-6 flex-shrink-0 items-center justify-center rounded-full bg-slate-100 text-xs font-semibold text-slate-700">
+                        {index + 1}
+                      </span>
+                      <span className="pt-0.5">{item}</span>
+                    </div>
+                  ))}
                 </div>
               </div>
 
@@ -556,10 +685,12 @@ function OverviewSection({
         </div>
       </div>
 
-      <Card className="border bg-card">
+      <Card className="rounded-[26px] border border-slate-200/80 bg-white shadow-sm shadow-slate-950/5">
         <CardHeader className="pb-3">
-          <CardTitle className="text-base">最近应用到的项目</CardTitle>
-          <CardDescription>
+          <CardTitle className="text-base text-slate-900">
+            最近应用到的项目
+          </CardTitle>
+          <CardDescription className="text-slate-600">
             帮你快速回忆最近哪些项目已经接入了风格资产。
           </CardDescription>
         </CardHeader>
@@ -579,9 +710,11 @@ function OverviewSection({
               ))}
             </div>
           ) : (
-            <div className="rounded-xl border border-dashed px-6 py-10 text-center">
-              <div className="text-sm font-medium">还没有应用记录</div>
-              <p className="mt-2 text-sm text-muted-foreground">
+            <div className="rounded-[22px] border border-dashed border-slate-300 px-6 py-10 text-center">
+              <div className="text-sm font-medium text-slate-900">
+                还没有应用记录
+              </div>
+              <p className="mt-2 text-sm text-slate-500">
                 当你把风格资产设为项目默认风格后，这里会显示最近接入过的项目。
               </p>
             </div>
@@ -694,6 +827,58 @@ export function StylePage({ onNavigate, pageParams }: StylePageProps) {
       }),
     [applicationHistory, recentProjects],
   );
+  const connectedProjectCount = useMemo(
+    () => new Set(recentApplications.map((item) => item.projectId)).size,
+    [recentApplications],
+  );
+  const overviewStats = useMemo(
+    () => [
+      {
+        label: "风格资产数",
+        value: String(entries.length),
+        description:
+          entries.length > 0
+            ? `当前活跃风格：${activeEntry?.profile.name || "未命名风格"}`
+            : "先建立第一条可复用的风格资产",
+      },
+      {
+        label: "接入项目",
+        value: String(connectedProjectCount),
+        description:
+          connectedProjectCount > 0
+            ? "已有项目接入我的风格基线"
+            : "还没有项目使用风格资产",
+      },
+      {
+        label: "当前状态",
+        value: enabled ? "已启用" : "已停用",
+        description: projectId
+          ? hasStyleGuideContent(projectStyleGuide)
+            ? "当前项目已建立默认风格"
+            : "当前项目等待设置默认风格"
+          : "还未选择当前工作项目",
+      },
+    ],
+    [
+      activeEntry?.profile.name,
+      connectedProjectCount,
+      enabled,
+      entries.length,
+      projectId,
+      projectStyleGuide,
+    ],
+  );
+  const overviewBadges = useMemo(
+    () =>
+      [
+        enabled ? "全局开关已启用" : "全局开关未启用",
+        `活跃风格：${activeEntry?.profile.name || "暂无"}`,
+        projectId
+          ? `当前项目：${project?.name || "正在加载项目..."}`
+          : "当前项目：未选择",
+      ].filter(Boolean),
+    [activeEntry?.profile.name, enabled, project?.name, projectId],
+  );
 
   const navigateSection = useCallback(
     (section: StylePageSection) => {
@@ -752,26 +937,116 @@ export function StylePage({ onNavigate, pageParams }: StylePageProps) {
   );
 
   return (
-    <div className="h-full overflow-y-auto bg-background">
-      <div className="mx-auto flex max-w-7xl flex-col gap-6 p-6">
-        <div className="flex flex-wrap items-start justify-between gap-4">
-          <div>
-            <div className="text-sm text-muted-foreground">
-              {sectionMeta.eyebrow}
-            </div>
-            <h1 className="mt-1 text-2xl font-semibold tracking-tight">
-              {sectionMeta.title}
-            </h1>
-            <p className="mt-2 max-w-3xl text-sm leading-6 text-muted-foreground">
-              {sectionMeta.description}
-            </p>
-          </div>
+    <div
+      className={cn(
+        "h-full overflow-y-auto",
+        activeSection === "overview"
+          ? "bg-[linear-gradient(180deg,rgba(248,250,252,1)_0%,rgba(246,250,248,1)_44%,rgba(255,255,255,1)_100%)]"
+          : "bg-background",
+      )}
+    >
+      <div className="mx-auto flex max-w-[1440px] flex-col gap-6 p-6">
+        {activeSection === "overview" ? (
+          <section className="relative overflow-hidden rounded-[30px] border border-emerald-200/70 bg-[linear-gradient(135deg,rgba(244,251,248,0.98)_0%,rgba(248,250,252,0.98)_45%,rgba(241,246,255,0.96)_100%)] shadow-sm shadow-slate-950/5">
+            <div className="pointer-events-none absolute -left-20 top-[-72px] h-56 w-56 rounded-full bg-emerald-200/30 blur-3xl" />
+            <div className="pointer-events-none absolute right-[-76px] top-[-24px] h-56 w-56 rounded-full bg-sky-200/28 blur-3xl" />
+            <div className="relative flex flex-col gap-6 p-6 lg:p-8">
+              <div className="flex flex-col gap-6 xl:flex-row xl:items-start xl:justify-between">
+                <div className="max-w-3xl space-y-4">
+                  <span className="inline-flex items-center rounded-full border border-emerald-200 bg-white/85 px-3 py-1 text-xs font-semibold tracking-[0.16em] text-emerald-700 shadow-sm">
+                    STYLE OVERVIEW
+                  </span>
+                  <div className="space-y-2">
+                    <div className="text-sm font-medium text-slate-500">
+                      {sectionMeta.eyebrow}
+                    </div>
+                    <h1 className="text-3xl font-semibold tracking-tight text-slate-900">
+                      {sectionMeta.title}
+                    </h1>
+                    <p className="max-w-2xl text-sm leading-6 text-slate-600">
+                      {sectionMeta.description}
+                    </p>
+                  </div>
 
-          <SectionTabs
-            activeSection={activeSection}
-            onChange={navigateSection}
-          />
-        </div>
+                  <div className="flex flex-wrap gap-2">
+                    {overviewBadges.map((item) => (
+                      <span
+                        key={item}
+                        className="rounded-full border border-white/90 bg-white/80 px-3 py-1 text-xs font-medium text-slate-600 shadow-sm"
+                      >
+                        {item}
+                      </span>
+                    ))}
+                  </div>
+
+                  <div className="flex flex-wrap gap-3 pt-1">
+                    <Button onClick={() => navigateSection("library")}>
+                      进入风格库工作台
+                    </Button>
+                    <Button
+                      variant="outline"
+                      onClick={handleOpenProjectStyleGuide}
+                      disabled={!projectId}
+                    >
+                      打开项目风格策略
+                    </Button>
+                    <Button variant="ghost" onClick={handleOpenProjects}>
+                      查看项目列表
+                    </Button>
+                  </div>
+                </div>
+
+                <div className="flex flex-col gap-4 xl:min-w-[430px] xl:items-end">
+                  <SectionTabs
+                    activeSection={activeSection}
+                    onChange={navigateSection}
+                  />
+                  <div className="grid gap-3 sm:grid-cols-3 xl:w-full">
+                    {overviewStats.map((item) => (
+                      <OverviewMetricCard
+                        key={item.label}
+                        label={item.label}
+                        value={item.value}
+                        description={item.description}
+                      />
+                    ))}
+                  </div>
+                </div>
+              </div>
+            </div>
+          </section>
+        ) : (
+          <section className="rounded-[26px] border border-slate-200/80 bg-white/92 p-5 shadow-sm shadow-slate-950/5">
+            <div className="flex flex-wrap items-start justify-between gap-4">
+              <div className="max-w-3xl">
+                <div className="text-sm text-slate-500">{sectionMeta.eyebrow}</div>
+                <h1 className="mt-1 text-2xl font-semibold tracking-tight text-slate-900">
+                  {sectionMeta.title}
+                </h1>
+                <p className="mt-2 text-sm leading-6 text-slate-600">
+                  {sectionMeta.description}
+                </p>
+              </div>
+
+              <div className="flex flex-col items-end gap-3">
+                <SectionTabs
+                  activeSection={activeSection}
+                  onChange={navigateSection}
+                />
+                <div className="flex flex-wrap justify-end gap-2">
+                  {overviewBadges.slice(0, 2).map((item) => (
+                    <span
+                      key={item}
+                      className="rounded-full border border-slate-200 bg-slate-50 px-3 py-1 text-xs font-medium text-slate-600"
+                    >
+                      {item}
+                    </span>
+                  ))}
+                </div>
+              </div>
+            </div>
+          </section>
+        )}
 
         {activeSection === "overview" ? (
           <OverviewSection
@@ -795,6 +1070,7 @@ export function StylePage({ onNavigate, pageParams }: StylePageProps) {
           <StyleLibraryPanel
             projectId={projectId}
             onOpenProjectStyleGuide={handleOpenProjectStyleGuide}
+            compactHeader
           />
         )}
       </div>
diff --git a/src/components/tools/ToolCardContextMenu.tsx b/src/components/tools/ToolCardContextMenu.tsx
index 86a1cd4c5..5918e9308 100644
--- a/src/components/tools/ToolCardContextMenu.tsx
+++ b/src/components/tools/ToolCardContextMenu.tsx
@@ -18,6 +18,7 @@ import {
   ContextMenuTrigger,
 } from "@/components/ui/context-menu";
 import { ConfirmDialog } from "@/components/ConfirmDialog";
+import type { Page, PageParams } from "@/types/page";
 
 /**
  * 工具卡片数据结构
@@ -33,25 +34,13 @@ interface DynamicToolCard {
   status?: string;
 }
 
-/**
- * 页面类型
- */
-type Page =
-  | "provider-pool"
-  | "api-server"
-  | "agent"
-  | "tools"
-  | "settings"
-  | "plugins"
-  | `plugin:${string}`;
-
 interface ToolCardContextMenuProps {
   /** 工具卡片数据 */
   tool: DynamicToolCard;
   /** 子元素 */
   children: React.ReactNode;
   /** 页面导航回调 */
-  onNavigate: (page: Page) => void;
+  onNavigate: (page: Page, params?: PageParams) => void;
   /** 切换插件启用状态回调 */
   onToggleEnabled?: (pluginId: string, enabled: boolean) => void;
   /** 卸载插件回调 */
diff --git a/src/components/workspace/WorkbenchPage.tsx b/src/components/workspace/WorkbenchPage.tsx
index e3e94a7e8..bb6293aa1 100644
--- a/src/components/workspace/WorkbenchPage.tsx
+++ b/src/components/workspace/WorkbenchPage.tsx
@@ -234,7 +234,10 @@ export function WorkbenchPage({
         rightRail={
           shouldHideVideoRightRailInWorkspace ? null : (
             <WorkbenchRightRail
-              shouldRender={shouldRenderWorkspaceRightRail}
+              shouldRender={
+                shouldRenderWorkspaceRightRail &&
+                !(activeWorkspaceView === "create" && !selectedContentId)
+              }
               isCreateWorkspaceView={isCreateWorkspaceView}
               projectId={selectedProjectId}
               theme={theme}
diff --git a/src/components/workspace/panels/WorkbenchCreateEntryHome.tsx b/src/components/workspace/panels/WorkbenchCreateEntryHome.tsx
index d7ada363f..7a9acebbb 100644
--- a/src/components/workspace/panels/WorkbenchCreateEntryHome.tsx
+++ b/src/components/workspace/panels/WorkbenchCreateEntryHome.tsx
@@ -1,23 +1,10 @@
-import { useEffect, useMemo, useState } from "react";
-import {
-  ChevronDown,
-  ChevronUp,
-  FileText,
-  ListTodo,
-  Sparkles,
-  X,
-} from "lucide-react";
+import { useEffect, useState } from "react";
+import { FolderOpen, LayoutTemplate, PenTool, Sparkles } from "lucide-react";
 import { A2UIRenderer } from "@/components/content-creator/a2ui/components";
 import type {
   A2UIFormData,
   A2UIResponse,
 } from "@/components/content-creator/a2ui/types";
-import { WORKSPACE_CREATE_CONFIRMATION_TASK_PRESET } from "@/components/content-creator/a2ui/taskCardPresets";
-import { A2UI_TASK_CARD_TOKENS } from "@/components/content-creator/a2ui/taskCardTokens";
-import {
-  A2UITaskCardBody,
-  A2UITaskCardStatusBadge,
-} from "@/components/content-creator/a2ui/taskCardPrimitives";
 import { Badge } from "@/components/ui/badge";
 import { Button } from "@/components/ui/button";
 import {
@@ -49,17 +36,6 @@ const SOURCE_LABELS: Record<PendingCreateConfirmation["source"], string> = {
   quick_create: "快捷创建",
 };
 
-function getPromptPreview(prompt?: string): string {
-  const normalizedPrompt = prompt?.trim() || "";
-  if (!normalizedPrompt) {
-    return "";
-  }
-  if (normalizedPrompt.length <= 72) {
-    return normalizedPrompt;
-  }
-  return `${normalizedPrompt.slice(0, 72)}…`;
-}
-
 export function WorkbenchCreateEntryHome({
   projectName,
   pendingCreateConfirmation,
@@ -68,315 +44,143 @@ export function WorkbenchCreateEntryHome({
   onSubmitCreateConfirmation,
   onCancelCreateConfirmation,
 }: WorkbenchCreateEntryHomeProps) {
-  const [isTaskExpanded, setIsTaskExpanded] = useState(
-    Boolean(createConfirmationResponse),
-  );
-  const [confirmationFormData, setConfirmationFormData] = useState<A2UIFormData>(
-    {},
-  );
-
-  useEffect(() => {
-    setIsTaskExpanded(Boolean(createConfirmationResponse));
-  }, [createConfirmationResponse]);
+  const [confirmationFormData, setConfirmationFormData] = useState<A2UIFormData>({});
 
   useEffect(() => {
     setConfirmationFormData({});
   }, [createConfirmationResponse?.id]);
 
   const hasPendingTask = Boolean(createConfirmationResponse);
-  const promptPreview = getPromptPreview(
-    pendingCreateConfirmation?.initialUserPrompt,
-  );
+  const promptPreview = pendingCreateConfirmation?.initialUserPrompt?.trim() || "";
+  
   const sourceLabel = pendingCreateConfirmation
     ? SOURCE_LABELS[pendingCreateConfirmation.source]
     : "创作首页";
+    
   const creationModeLabel = pendingCreateConfirmation
     ? CREATION_MODE_LABELS[pendingCreateConfirmation.creationMode] ||
       pendingCreateConfirmation.creationMode
     : null;
-  const selectedOptionRaw =
-    confirmationFormData[CREATE_CONFIRMATION_FORM_FIELDS.option];
-  const selectedOption = Array.isArray(selectedOptionRaw)
-    ? selectedOptionRaw[0]
-    : selectedOptionRaw;
-  const noteValue = String(
-    confirmationFormData[CREATE_CONFIRMATION_FORM_FIELDS.note] || "",
-  ).trim();
+    
+  const selectedOptionRaw = confirmationFormData[CREATE_CONFIRMATION_FORM_FIELDS.option];
+  const selectedOption = Array.isArray(selectedOptionRaw) ? selectedOptionRaw[0] : selectedOptionRaw;
+  const noteValue = String(confirmationFormData[CREATE_CONFIRMATION_FORM_FIELDS.note] || "").trim();
+  
   const canSubmitTask = Boolean(
-    selectedOption &&
-      (selectedOption !== "other" || noteValue.length >= 2),
+    selectedOption && (selectedOption !== "other" || noteValue.length >= 2),
   );
-  const taskSummary = useMemo(() => {
-    switch (selectedOption) {
-      case "continue_history":
-        return "继续已有内容";
-      case "new_post":
-        return "新写一篇内容";
-      case "new_version":
-        return "新建一个版本";
-      case "other":
-        return noteValue || "补充自定义说明";
-      default:
-        return "等待确认开始方式";
-    }
-  }, [noteValue, selectedOption]);
 
   return (
     <div
-      className="relative flex-1 min-h-0 overflow-hidden bg-[linear-gradient(180deg,rgba(248,250,252,0.98),rgba(241,245,249,0.92))]"
+      className="relative flex-1 min-h-0 flex flex-col items-center justify-center p-6 md:p-12 overflow-y-auto bg-slate-50 dark:bg-[#0B0C10] transition-colors"
       data-testid="workspace-create-entry-home"
     >
-      <div className="absolute inset-0 bg-[linear-gradient(to_right,rgba(148,163,184,0.08)_1px,transparent_1px),linear-gradient(to_bottom,rgba(148,163,184,0.08)_1px,transparent_1px)] bg-[size:28px_28px] opacity-70" />
-
-      <div className="relative flex h-full min-h-0 flex-col px-6 py-5">
-        <div className="mx-auto flex w-full max-w-5xl flex-1 flex-col">
-          <div className="rounded-[28px] border border-white/80 bg-background/92 p-6 shadow-[0_16px_50px_rgba(15,23,42,0.06)] backdrop-blur">
-            <div className="flex flex-wrap items-center justify-between gap-4">
-              <div className="space-y-2">
-                <div className="flex flex-wrap items-center gap-2">
-                  <Badge
-                    variant="outline"
-                    className="border-blue-200 bg-blue-50 text-blue-700"
-                  >
-                    {sourceLabel}
-                  </Badge>
-                  {creationModeLabel ? (
-                    <Badge
-                      variant="secondary"
-                      className="bg-slate-100 text-slate-700"
-                    >
-                      {creationModeLabel}
-                    </Badge>
-                  ) : null}
-                </div>
-
-                <div className="space-y-2">
-                  <h2 className="text-2xl font-semibold tracking-tight text-slate-900">
-                    {projectName ? `${projectName} · 创作首页` : "创作首页"}
-                  </h2>
-                  <p className="max-w-xl text-sm leading-6 text-slate-500">
-                    先进入创作工作区，再通过单步任务卡补充必要信息。
-                  </p>
-                </div>
-              </div>
-
-              <div className="flex shrink-0 gap-2">
-                <Button variant="outline" onClick={onOpenCreateContentDialog}>
-                  发起创建确认
-                </Button>
-                {hasPendingTask ? (
-                  <Button
-                    variant="default"
-                    onClick={() => setIsTaskExpanded((value) => !value)}
-                    data-testid="workspace-create-confirmation-toggle"
-                  >
-                    {isTaskExpanded ? "收起任务" : "继续填写"}
-                  </Button>
-                ) : null}
-              </div>
-            </div>
-
-            <div className="mt-6 grid gap-4 lg:grid-cols-[1.7fr_0.9fr]">
-              <div className="relative min-h-[420px] overflow-hidden rounded-[24px] border border-slate-200/80 bg-white shadow-sm">
-                <div className="flex items-center justify-between border-b border-slate-100 px-6 py-4">
-                  <div className="flex items-center gap-2 text-sm font-medium text-slate-900">
-                    <FileText className="h-4 w-4 text-violet-600" />
-                    新项目
-                  </div>
-                  <div className="text-xs text-slate-400">创作画布已就绪</div>
-                </div>
-                <div className="flex h-[calc(100%-57px)] flex-col justify-between bg-[linear-gradient(180deg,rgba(255,255,255,0.96),rgba(248,250,252,0.98))] px-8 py-7">
-                  <div className="space-y-3">
-                    <div className="h-4 w-40 rounded-full bg-slate-100" />
-                    <div className="h-4 w-56 rounded-full bg-slate-100" />
-                    <div className="mt-8 text-4xl font-semibold tracking-tight text-slate-800">
-                      {projectName || "新项目"}
-                    </div>
-                    <div className="max-w-xl text-sm leading-6 text-slate-500">
-                      {hasPendingTask
-                        ? "当前正在等待你确认开始方式。确认后，我会继续进入对应的创作流程。"
-                        : "当前没有待处理任务。你可以直接发起一次创建确认，然后再继续创作。"}
-                    </div>
-                  </div>
-                  {promptPreview ? (
-                    <div className="rounded-2xl border border-dashed border-blue-200 bg-blue-50/70 px-4 py-3 text-sm text-slate-700">
-                      已识别提示：{promptPreview}
-                    </div>
-                  ) : (
-                    <div className="rounded-2xl border border-dashed border-slate-200 bg-slate-50/80 px-4 py-3 text-sm text-slate-500">
-                      这里先保留画布感，等你确认后再继续进入生成与编辑。
-                    </div>
-                  )}
-                </div>
-              </div>
-
-              <div className="rounded-[24px] border border-slate-200/80 bg-white/92 p-5 shadow-sm">
-                <div className="flex items-center gap-2 text-sm font-medium text-slate-900">
-                  <ListTodo className="h-4 w-4 text-blue-600" />
-                  任务概览
-                </div>
-                <div className="mt-4 space-y-3">
-                  <div className="rounded-2xl border border-slate-100 bg-slate-50/90 px-4 py-3">
-                    <div className="text-xs uppercase tracking-[0.18em] text-slate-400">
-                      状态
-                    </div>
-                    <div className="mt-2 text-sm font-medium text-slate-900">
-                      {hasPendingTask ? "待补充信息" : "暂无待办"}
-                    </div>
-                    <div className="mt-1 text-xs leading-5 text-slate-500">
-                      {hasPendingTask
-                        ? "任务卡支持收起，底部仍会保留状态条。"
-                        : "发起创建确认后，这里会显示当前步骤。"}
-                    </div>
-                  </div>
-                  <div className="rounded-2xl border border-slate-100 bg-slate-50/90 px-4 py-3">
-                    <div className="text-xs uppercase tracking-[0.18em] text-slate-400">
-                      当前步骤
-                    </div>
-                    <div className="mt-2 text-sm font-medium text-slate-900">
-                      01 · 选择开始方式
-                    </div>
-                    <div className="mt-1 text-xs leading-5 text-slate-500">
-                      {hasPendingTask
-                        ? `当前选择：${taskSummary}`
-                        : "确认后再进入生成或编辑。"}
-                    </div>
-                  </div>
-                </div>
-              </div>
-            </div>
+      {/* Premium Ambient Backgrounds */}
+      <div className="absolute top-[-10%] left-[20%] w-[600px] h-[600px] bg-[radial-gradient(circle,hsl(var(--primary)/0.08)_0%,transparent_70%)] rounded-full pointer-events-none blur-3xl opacity-60 dark:opacity-40" />
+      <div className="absolute bottom-[-10%] right-[10%] w-[500px] h-[500px] bg-[radial-gradient(circle,hsl(var(--primary)/0.05)_0%,transparent_70%)] rounded-full pointer-events-none blur-3xl opacity-50 dark:opacity-30" />
+      
+      <div className="w-full max-w-[800px] relative z-10 flex flex-col items-center gap-10 animate-in fade-in slide-in-from-bottom-6 duration-700 zoom-in-95 ease-out">
+        
+        {/* Header Section */}
+        <div className="text-center space-y-6">
+          <div className="flex justify-center flex-wrap items-center gap-2.5">
+            {projectName && (
+              <Badge variant="outline" className="border-slate-200/60 bg-white/60 dark:border-white/10 dark:bg-white/5 backdrop-blur-md text-slate-700 dark:text-slate-200 font-medium px-4 py-1.5 shadow-sm">
+                <FolderOpen className="w-3.5 h-3.5 mr-1.5 text-primary" />
+                {projectName}
+              </Badge>
+            )}
+            <Badge variant="secondary" className="bg-primary/10 text-primary dark:bg-primary/20 hover:bg-primary/20 transition-colors font-medium px-4 py-1.5 backdrop-blur-md shadow-sm border border-primary/20">
+              <Sparkles className="w-3.5 h-3.5 mr-1.5" />
+              {sourceLabel}
+            </Badge>
+            {creationModeLabel && (
+              <Badge variant="outline" className="border-slate-200/60 bg-white/60 dark:border-white/10 dark:bg-white/5 backdrop-blur-md text-slate-700 dark:text-slate-200 font-medium px-4 py-1.5 shadow-sm">
+                <PenTool className="w-3.5 h-3.5 mr-1.5 text-slate-500 dark:text-slate-400" />
+                {creationModeLabel}
+              </Badge>
+            )}
           </div>
+          
+          <h1 className="text-4xl md:text-5xl font-extrabold tracking-tight text-slate-900 dark:text-white drop-shadow-sm">
+            {hasPendingTask ? "确认创作方式" : "创作画布已就绪"}
+          </h1>
+          <p className="text-lg text-slate-500 dark:text-slate-400 max-w-xl mx-auto leading-relaxed">
+            {hasPendingTask 
+              ? "为你准备了以下选项，补充所需信息后我们将立即开始。" 
+              : "当前没有待处理任务，你可以直接发起创建确认，然后再继续创作。"}
+          </p>
         </div>
 
-        {hasPendingTask ? (
-          <>
-            {isTaskExpanded ? (
-              <div className="absolute inset-0 bg-white/28 backdrop-blur-[1px]" />
-            ) : null}
-            {isTaskExpanded ? (
-              <div className="absolute inset-x-0 bottom-28 flex justify-center px-4">
-                <div
-                  className={A2UI_TASK_CARD_TOKENS.workspaceOverlay}
-                  data-testid="workspace-create-confirmation-card"
-                >
-                  <div className="flex items-start justify-between gap-4">
-                    <div className="space-y-2">
-                      <div className="text-[26px] font-semibold tracking-tight text-slate-900">
-                        {WORKSPACE_CREATE_CONFIRMATION_TASK_PRESET.title}
-                      </div>
-                      <div className="max-w-2xl text-sm leading-6 text-slate-600">
-                        {WORKSPACE_CREATE_CONFIRMATION_TASK_PRESET.subtitle}
+        {/* Input/Task Card */}
+        <div className="w-full relative group">
+          <div className="absolute -inset-0.5 bg-gradient-to-br from-primary/30 to-purple-500/30 rounded-[28px] blur-md opacity-20 group-hover:opacity-40 transition duration-500"></div>
+          
+          <div className="relative w-full bg-white/80 dark:bg-[#15161A]/80 backdrop-blur-xl border border-white/40 dark:border-white/10 rounded-[26px] shadow-2xl overflow-hidden transition-all duration-500">
+            {hasPendingTask ? (
+              <div className="flex flex-col">
+                <div className="p-8 md:p-10 md:pb-8 flex flex-col gap-8">
+                  {promptPreview && (
+                    <div className="relative rounded-[18px] border border-primary/20 bg-primary/5 p-6 text-sm text-slate-800 dark:text-slate-200 shadow-inner group/prompt">
+                      <div className="absolute -top-3 left-6 bg-white dark:bg-[#1A1C21] px-3 py-0.5 text-[11px] font-bold text-primary tracking-widest rounded-full border border-primary/20 shadow-sm flex items-center gap-1.5">
+                        <Sparkles className="w-3 h-3" />
+                        原始需求
                       </div>
+                      <div className="leading-relaxed whitespace-pre-wrap text-[15px]">{promptPreview}</div>
                     </div>
-                    <div className="flex items-center gap-3">
-                      <A2UITaskCardStatusBadge
-                        label={WORKSPACE_CREATE_CONFIRMATION_TASK_PRESET.statusLabel}
-                      />
-                      <Button
-                        size="icon"
-                        variant="ghost"
-                        title="收起补充信息"
-                        onClick={() => setIsTaskExpanded(false)}
-                      >
-                        <X className="h-4 w-4" />
-                      </Button>
-                    </div>
-                  </div>
+                  )}
 
-                  <A2UITaskCardBody
-                    className={A2UI_TASK_CARD_TOKENS.workspaceSection}
+                  <A2UIRenderer
+                    response={createConfirmationResponse!}
+                    className="space-y-6 [&_.a2ui-container_textarea]:min-h-[120px] [&_.a2ui-container_textarea]:text-base [&_.a2ui-container_textarea]:p-4"
+                    onFormStateChange={setConfirmationFormData}
+                    submitDisabled={!canSubmitTask}
+                    submitButtonClassName="w-full h-[56px] text-lg font-bold rounded-2xl mt-6 bg-gradient-to-r from-primary to-purple-600 hover:opacity-90 text-white shadow-lg shadow-primary/25 transition-all hover:scale-[1.01] active:scale-[0.98] flex items-center justify-center gap-2 border-0"
+                    onSubmit={(formData) => {
+                      if (onSubmitCreateConfirmation) {
+                        void onSubmitCreateConfirmation(formData);
+                      }
+                    }}
+                  />
+                </div>
+
+                <div className="flex items-center justify-between px-8 py-5 bg-slate-50/50 dark:bg-black/20 border-t border-slate-200/50 dark:border-white/5 backdrop-blur-md">
+                  <div className="text-[13px] text-slate-500 dark:text-slate-400 font-medium">
+                    切换项目或返回其他视图后，也可稍后处理
+                  </div>
+                  <Button 
+                    variant="ghost" 
+                    size="sm" 
+                    className="h-9 px-4 text-[13px] font-medium text-slate-600 hover:text-slate-900 dark:text-slate-400 dark:hover:text-white hover:bg-slate-200/50 dark:hover:bg-white/10 rounded-full transition-all"
+                    onClick={onCancelCreateConfirmation}
                   >
-                    <div className="mb-4 flex items-center justify-between gap-3">
-                      <div className="flex items-center gap-3">
-                        <div className="flex h-8 w-8 items-center justify-center rounded-full bg-white text-sm font-semibold text-slate-700 shadow-sm">
-                          01
-                        </div>
-                        <div>
-                          <div className="text-sm font-medium text-slate-900">
-                            请选择一种开始方式
-                          </div>
-                          <div className="text-xs text-blue-600">单项选择</div>
-                        </div>
-                      </div>
-                      <div className="rounded-full bg-white px-3 py-1 text-xs text-slate-500 shadow-sm">
-                        当前选择：{taskSummary}
-                      </div>
-                    </div>
-
-                    {promptPreview ? (
-                      <div className="mb-4 rounded-2xl border border-dashed border-blue-200 bg-blue-50/80 px-4 py-3 text-sm text-slate-700">
-                        已附带提示：{promptPreview}
-                      </div>
-                    ) : null}
-
-                    {createConfirmationResponse && (
-                      <A2UIRenderer
-                        response={createConfirmationResponse}
-                        className="space-y-4"
-                        onFormStateChange={setConfirmationFormData}
-                        submitDisabled={!canSubmitTask}
-                        submitButtonClassName="w-full"
-                        onSubmit={(formData) => {
-                          void onSubmitCreateConfirmation?.(formData);
-                        }}
-                      />
-                    )}
-                  </A2UITaskCardBody>
-
-                  <div className="mt-4 flex flex-wrap items-center justify-between gap-3">
-                    <div className="text-xs text-slate-500">
-                      切换项目或返回其他视图后，这个任务仍可稍后继续。
-                    </div>
-                    <div className="flex items-center gap-2">
-                      <Button
-                        variant="ghost"
-                        onClick={() => setIsTaskExpanded(false)}
-                      >
-                        稍后处理
-                      </Button>
-                      <Button
-                        variant="ghost"
-                        onClick={onCancelCreateConfirmation}
-                      >
-                        取消任务
-                      </Button>
-                    </div>
-                  </div>
+                    暂不处理
+                  </Button>
                 </div>
               </div>
-            ) : null}
-
-            <div className="absolute inset-x-0 bottom-4 flex justify-center px-4">
-              <button
-                type="button"
-                className={A2UI_TASK_CARD_TOKENS.workspaceDock}
-                onClick={() => setIsTaskExpanded((value) => !value)}
-                data-testid="workspace-create-confirmation-dock"
-              >
-                <div className="min-w-0">
-                  <div className="flex items-center gap-2 text-sm font-medium text-blue-600">
-                    <Sparkles className="h-4 w-4" />
-                    正在准备创作
-                    <span className="text-slate-400">·</span>
-                    <span className="text-slate-700">{WORKSPACE_CREATE_CONFIRMATION_TASK_PRESET.statusLabel}</span>
-                  </div>
-                  <div className="mt-1 truncate text-xs text-slate-500">
-                    {isTaskExpanded
-                      ? `当前步骤：${taskSummary || "等待确认开始方式"}`
-                      : `点击展开补充信息 · ${taskSummary || "等待确认开始方式"}`}
-                  </div>
+            ) : (
+              <div className="p-20 flex flex-col items-center justify-center text-center">
+                <div className="w-24 h-24 rounded-3xl bg-gradient-to-br from-slate-100 to-slate-50 dark:from-slate-800 dark:to-slate-900 border border-slate-200/50 dark:border-slate-700/50 flex items-center justify-center mb-8 shadow-inner relative group-hover:scale-105 transition-transform duration-500">
+                  <div className="absolute inset-0 bg-primary/10 rounded-3xl blur-md opacity-0 group-hover:opacity-100 transition-opacity duration-500" />
+                  <LayoutTemplate className="w-12 h-12 text-slate-400 dark:text-slate-500 relative z-10" strokeWidth={1} />
                 </div>
-                <div className="shrink-0 rounded-full border border-slate-200 p-2 text-slate-500">
-                  {isTaskExpanded ? (
-                    <ChevronDown className="h-4 w-4" />
-                  ) : (
-                    <ChevronUp className="h-4 w-4" />
-                  )}
-                </div>
-              </button>
-            </div>
-          </>
-        ) : null}
+                <h3 className="text-2xl font-bold text-slate-900 dark:text-white mb-4">
+                  暂无待处理任务
+                </h3>
+                <p className="text-base text-slate-500 dark:text-slate-400 mb-10 max-w-sm leading-relaxed">
+                  你可以通过对话输入框发送你的创作需求，或点击下方按钮手动发起。
+                </p>
+                <Button 
+                  onClick={onOpenCreateContentDialog}
+                  className="h-12 px-8 rounded-full bg-slate-900 hover:bg-slate-800 text-white dark:bg-white dark:hover:bg-slate-200 dark:text-slate-900 transition-all shadow-lg hover:shadow-xl hover:-translate-y-0.5 font-semibold text-[15px]"
+                >
+                  <Sparkles className="w-4 h-4 mr-2" />
+                  发起创建确认
+                </Button>
+              </div>
+            )}
+          </div>
+        </div>
       </div>
     </div>
   );
diff --git a/src/components/workspace/panels/WorkbenchMainContent.tsx b/src/components/workspace/panels/WorkbenchMainContent.tsx
index a0819cb00..92ea9b8f8 100644
--- a/src/components/workspace/panels/WorkbenchMainContent.tsx
+++ b/src/components/workspace/panels/WorkbenchMainContent.tsx
@@ -1,5 +1,16 @@
 import { type ComponentType } from "react";
-import { FolderOpen, Plus, Sparkles } from "lucide-react";
+import {
+  FolderOpen,
+  Plus,
+  Sparkles,
+  PenTool,
+  Boxes,
+  LayoutTemplate,
+  Wand2,
+  Send,
+  Settings,
+  Workflow,
+} from "lucide-react";
 import { Button } from "@/components/ui/button";
 import type { Page, PageParams, WorkspaceTheme, WorkspaceViewMode } from "@/types/page";
 import type {
@@ -11,7 +22,7 @@ import type {
   ThemeWorkspaceRendererProps,
   ThemeWorkspaceView,
 } from "@/features/themes/types";
-import type { Project } from "@/lib/api/project";
+import { getProjectTypeLabel, type Project } from "@/lib/api/project";
 import { AgentChatPage } from "@/components/agent";
 import type { WorkflowProgressSnapshot } from "@/components/agent/chat";
 import type { CreationMode } from "@/components/content-creator/types";
@@ -22,6 +33,70 @@ import {
 } from "@/components/workspace/utils/createConfirmationPolicy";
 import { WorkbenchCreateEntryHome } from "./WorkbenchCreateEntryHome";
 
+const NAV_META: Record<
+  string,
+  { icon: any; description: string; colorClass: string; bgClass: string }
+> = {
+  create: {
+    icon: PenTool,
+    description: "AI 辅助内容撰写与多轮迭代",
+    colorClass: "text-emerald-600 dark:text-emerald-400",
+    bgClass: "bg-emerald-50 dark:bg-emerald-950/30",
+  },
+  material: {
+    icon: Boxes,
+    description: "管理参考素材、图片与知识库",
+    colorClass: "text-amber-600 dark:text-amber-400",
+    bgClass: "bg-amber-50 dark:bg-amber-950/30",
+  },
+  template: {
+    icon: LayoutTemplate,
+    description: "管理与应用内容排版模板",
+    colorClass: "text-sky-600 dark:text-sky-400",
+    bgClass: "bg-sky-50 dark:bg-sky-950/30",
+  },
+  style: {
+    icon: Wand2,
+    description: "定制并固化项目的叙事与视觉风格",
+    colorClass: "text-indigo-600 dark:text-indigo-400",
+    bgClass: "bg-indigo-50 dark:bg-indigo-950/30",
+  },
+  publish: {
+    icon: Send,
+    description: "预览、分发与一键发布内容",
+    colorClass: "text-rose-600 dark:text-rose-400",
+    bgClass: "bg-rose-50 dark:bg-rose-950/30",
+  },
+  settings: {
+    icon: Settings,
+    description: "配置参数、模型与流程阈值",
+    colorClass: "text-slate-600 dark:text-slate-400",
+    bgClass: "bg-slate-50 dark:bg-slate-900/50",
+  },
+  workflow: {
+    icon: Workflow,
+    description: "图形化统筹与编排工作流",
+    colorClass: "text-violet-600 dark:text-violet-400",
+    bgClass: "bg-violet-50 dark:bg-violet-950/30",
+  },
+};
+
+function getProjectHeroDescription(project: Project | null): string {
+  if (!project) {
+    return "欢迎来到您的灵感控制台。在这里，您可以高效统筹所有素材、构思文稿、规划视觉排版，并将创意一键分发至全域社媒网络。";
+  }
+
+  const projectTypeLabel = getProjectTypeLabel(project.workspaceType);
+  const tagSummary =
+    project.tags.length > 0 ? `当前聚焦 ${project.tags.slice(0, 3).join(" / ")}。` : "";
+  const contentSummary =
+    project.stats?.content_count && project.stats.content_count > 0
+      ? `已沉淀 ${project.stats.content_count} 份内容，适合继续串联创作、排版与发布。`
+      : "可以从素材整理、内容创作到预览发布，逐步搭建完整的项目工作流。";
+
+  return `${projectTypeLabel}项目已就绪。${tagSummary}${contentSummary}`;
+}
+
 type ThemeWorkspaceRenderer = ComponentType<ThemeWorkspaceRendererProps> | null | undefined;
 
 export interface WorkbenchMainContentProps {
@@ -98,54 +173,138 @@ export function WorkbenchMainContent({
 
   if (workspaceMode === "project-management") {
     return (
-      <div className="h-full min-h-0 p-4">
-        <div className="h-full rounded-lg border bg-card p-4 flex flex-col gap-4">
-          <div className="flex items-start justify-between gap-3">
-            <div>
-              <h2 className="text-base font-medium">统一创作工作区</h2>
-              <p className="text-sm text-muted-foreground mt-1">
-                左侧选择项目后，可直接进入创作、风格、流程、发布与设置
-              </p>
-            </div>
-            <div className="flex items-center gap-2">
-              <Button variant="outline" onClick={onOpenCreateProjectDialog}>
-                <FolderOpen className="h-4 w-4 mr-1" />
-                新建项目
-              </Button>
-              <Button
-                variant="outline"
-                onClick={onOpenCreateContentDialog}
-                disabled={!selectedProjectId}
-              >
-                <Plus className="h-4 w-4 mr-1" />
-                新建文稿
-              </Button>
-            </div>
-          </div>
+      <div className="h-full min-h-0 flex flex-col bg-slate-50/30 dark:bg-[#0a0a0a] relative overflow-hidden">
+        {/* Absolute Background Elements for the entire page */}
+        <div className="absolute top-[-10%] left-[-10%] w-[40%] h-[40%] bg-emerald-400/10 dark:bg-emerald-500/10 rounded-full blur-[120px] pointer-events-none" />
+        <div className="absolute bottom-[-10%] right-[-10%] w-[40%] h-[40%] bg-sky-400/10 dark:bg-sky-500/10 rounded-full blur-[120px] pointer-events-none" />
 
-          {!selectedProjectId ? (
-            <div className="flex-1 rounded-md border border-dashed flex flex-col items-center justify-center text-muted-foreground gap-2">
-              <Sparkles className="h-8 w-8 opacity-60" />
-              <p className="text-sm">请先在左侧选择项目</p>
-            </div>
-          ) : (
-            <div className="space-y-3">
-              <div className="text-sm text-muted-foreground">
-                当前项目：{selectedProject?.name}
+        {/* Top Header - Ultra clean glassmorphic */}
+        <div className="relative z-20 px-8 py-6 shrink-0 flex flex-col md:flex-row md:items-center justify-between gap-6 border-b border-border/40 bg-white/40 dark:bg-background/40 backdrop-blur-xl">
+          <div>
+            <h2 className="text-2xl font-bold tracking-tight text-slate-900 dark:text-white flex items-center gap-2">
+              <Sparkles className="h-5 w-5 text-emerald-500" />
+              统一创作工作区
+            </h2>
+            <p className="text-[13px] font-medium text-slate-500 dark:text-slate-400 mt-1.5">
+              一站式统筹创意、素材、排版与多矩阵分发
+            </p>
+          </div>
+          <div className="flex items-center gap-3">
+            <Button
+              variant="outline"
+              className="h-10 px-5 rounded-full bg-white/60 dark:bg-card/60 backdrop-blur-md border-border/80 hover:bg-slate-50 dark:hover:bg-slate-800 transition-all font-medium"
+              onClick={onOpenCreateProjectDialog}
+            >
+              <FolderOpen className="h-4 w-4 mr-2 text-slate-500 dark:text-slate-400" />
+              <span className="text-sm">新建项目</span>
+            </Button>
+            <Button
+              className="h-10 px-6 rounded-full bg-slate-900 hover:bg-slate-800 text-white shadow-lg shadow-slate-900/10 dark:bg-white dark:text-slate-900 dark:hover:bg-slate-100 dark:shadow-white/10 transition-all font-semibold"
+              onClick={onOpenCreateContentDialog}
+              disabled={!selectedProjectId}
+            >
+              <Plus className="h-4 w-4 mr-2" />
+              <span className="text-sm">新建文稿</span>
+            </Button>
+          </div>
+        </div>
+
+        {/* Main Content Area */}
+        <div className="relative z-10 flex-1 min-h-0 overflow-y-auto px-6 py-8 md:px-12 md:py-12 scroll-smooth">
+          <div className="max-w-[1280px] mx-auto">
+            {!selectedProjectId ? (
+              <div className="rounded-[32px] border border-dashed border-border/60 bg-white/20 dark:bg-card/20 backdrop-blur-md flex flex-col items-center justify-center text-slate-500 gap-6 min-h-[500px] shadow-sm">
+                <div className="relative flex items-center justify-center">
+                  <div className="absolute inset-0 bg-emerald-400/20 dark:bg-emerald-500/20 blur-2xl rounded-full" />
+                  <div className="relative h-20 w-20 rounded-2xl bg-gradient-to-br from-white to-slate-50 dark:from-slate-800 dark:to-slate-900 flex items-center justify-center border border-border/50 shadow-xl">
+                    <Sparkles className="h-10 w-10 text-emerald-500 dark:text-emerald-400" />
+                  </div>
+                </div>
+                <div className="text-center space-y-2">
+                  <h3 className="text-xl font-bold text-slate-800 dark:text-slate-200">
+                    等待唤醒创作引擎
+                  </h3>
+                  <p className="text-[15px] font-medium text-slate-500 dark:text-slate-400 max-w-[300px]">
+                    在左侧选择已有项目，或新建一个项目以开启全新的创作旅程
+                  </p>
+                </div>
               </div>
-              <div className="flex flex-wrap gap-2">
-                {navigationItems.map((item) => (
-                  <Button
-                    key={item.key}
-                    variant="outline"
-                    onClick={() => onEnterWorkspaceView(item.key)}
-                  >
-                    进入{item.label}
-                  </Button>
-                ))}
+            ) : (
+              <div className="space-y-10">
+                {/* Stunning Hero Project Overview Card */}
+                <div className="group relative rounded-[32px] border border-border/40 bg-white/60 dark:bg-[#111111]/80 p-8 md:p-12 shadow-2xl shadow-slate-200/50 dark:shadow-black/50 overflow-hidden transition-all duration-500 hover:border-border/60 backdrop-blur-xl">
+                  {/* Highly Dynamic Animated Meshes */}
+                  <div className="absolute top-[-20%] right-[-10%] w-[600px] h-[600px] bg-gradient-to-bl from-emerald-400/20 via-cyan-400/10 to-transparent dark:from-emerald-500/15 dark:via-cyan-600/10 rounded-full blur-[80px] pointer-events-none transition-transform duration-1000 group-hover:scale-110 group-hover:rotate-12" />
+                  <div className="absolute bottom-[-20%] left-[-10%] w-[500px] h-[500px] bg-gradient-to-tr from-violet-400/15 via-pink-400/5 to-transparent dark:from-violet-600/15 dark:via-pink-800/5 rounded-full blur-[80px] pointer-events-none transition-transform duration-1000 group-hover:scale-110 group-hover:-rotate-12" />
+                  
+                  {/* Subtle Grid Noise Texture (Optional, adds premium feel) */}
+                  <div className="absolute inset-0 opacity-[0.015] dark:opacity-[0.03] bg-[url('https://grainy-gradients.vercel.app/noise.svg')] pointer-events-none mix-blend-overlay" />
+
+                  <div className="relative z-10 flex flex-col items-start max-w-3xl">
+                    <div className="inline-flex items-center gap-2 px-3.5 py-1.5 rounded-full bg-emerald-50 dark:bg-emerald-500/10 border border-emerald-200/50 dark:border-emerald-500/20 text-emerald-700 dark:text-emerald-300 text-xs font-bold tracking-widest uppercase mb-6 shadow-sm backdrop-blur-md">
+                      <FolderOpen className="h-3.5 w-3.5" />
+                      {theme === "social-media" ? "社媒矩阵引擎" : "核心项目枢纽"}
+                    </div>
+                    
+                    <h3 className="text-4xl md:text-5xl font-black text-transparent bg-clip-text bg-gradient-to-br from-slate-900 via-slate-800 to-slate-500 dark:from-white dark:via-slate-200 dark:to-slate-500 tracking-tight leading-tight mb-5">
+                      {selectedProject?.name || "未命名项目"}
+                    </h3>
+                    
+                    <p className="text-base md:text-lg text-slate-600 dark:text-slate-400/90 font-medium leading-relaxed max-w-2xl">
+                      {getProjectHeroDescription(selectedProject)}
+                    </p>
+                  </div>
+                </div>
+
+                {/* Highly Polished Modules Grid */}
+                <div>
+                  <div className="flex items-center gap-3 mb-6 px-2">
+                    <div className="h-6 w-1.5 rounded-full bg-gradient-to-b from-emerald-400 to-cyan-500" />
+                    <h4 className="text-[17px] font-bold text-slate-900 dark:text-white tracking-wide">
+                      创作链路模块
+                    </h4>
+                  </div>
+                  
+                  <div className="grid grid-cols-1 md:grid-cols-2 xl:grid-cols-3 gap-5">
+                    {navigationItems.map((item) => {
+                      const meta = NAV_META[item.key] || {
+                        icon: Sparkles,
+                        description: `进入 ${item.label} 管理与配置`,
+                        colorClass: "text-slate-600 dark:text-slate-400",
+                        bgClass: "bg-slate-100 dark:bg-slate-800/60",
+                      };
+                      const Icon = meta.icon;
+
+                      return (
+                        <button
+                          key={item.key}
+                          onClick={() => onEnterWorkspaceView(item.key)}
+                          className="group relative flex flex-col text-left rounded-[28px] bg-white/60 dark:bg-[#151515]/60 border border-border/50 p-6 md:p-7 shadow-sm backdrop-blur-xl transition-all duration-300 hover:shadow-xl hover:shadow-slate-200/50 dark:hover:shadow-black/50 hover:border-slate-300 dark:hover:border-slate-700 hover:-translate-y-1.5 overflow-hidden"
+                        >
+                          {/* Inner soft glow on hover */}
+                          <div className="absolute inset-0 bg-gradient-to-br from-white/60 to-transparent dark:from-white/5 dark:to-transparent opacity-0 group-hover:opacity-100 transition-opacity duration-500 pointer-events-none" />
+                          
+                          <div
+                            className={`relative h-14 w-14 rounded-[18px] flex items-center justify-center mb-6 transition-transform duration-500 group-hover:scale-110 group-hover:rotate-3 shadow-inner ${meta.bgClass}`}
+                          >
+                            <Icon className={`h-6 w-6 ${meta.colorClass}`} />
+                          </div>
+                          
+                          <div className="relative font-bold text-slate-900 dark:text-white text-[19px] mb-2 transition-colors">
+                            {item.label}
+                          </div>
+                          
+                          <div className="relative text-[14px] font-medium text-slate-500 dark:text-slate-400/80 leading-relaxed">
+                            {meta.description}
+                          </div>
+                        </button>
+                      );
+                    })}
+                  </div>
+                </div>
               </div>
-            </div>
-          )}
+            )}
+          </div>
         </div>
       </div>
     );
diff --git a/src/components/workspace/panels/workbenchRightRailActionSections.tsx b/src/components/workspace/panels/workbenchRightRailActionSections.tsx
index b9855e1dc..f0676f557 100644
--- a/src/components/workspace/panels/workbenchRightRailActionSections.tsx
+++ b/src/components/workspace/panels/workbenchRightRailActionSections.tsx
@@ -31,12 +31,26 @@ const SECTION_TONE_CLASS: Record<
 
 const CARD_TONE_CLASS: Record<
   WorkbenchRightRailCapabilityItem["tone"],
-  string
+  { default: string; hover: string; icon: string }
 > = {
-  violet:
-    "border-violet-100 bg-violet-50/80 text-violet-500 hover:border-violet-200 hover:bg-violet-50",
-  blue: "border-blue-100 bg-blue-50/80 text-blue-500 hover:border-blue-200 hover:bg-blue-50",
-  pink: "border-pink-100 bg-pink-50/80 text-pink-500 hover:border-pink-200 hover:bg-pink-50",
+  violet: {
+    default: "border-violet-200/40 bg-violet-50/50 text-slate-700 dark:border-violet-800/30 dark:bg-violet-900/10 dark:text-slate-300",
+    hover:
+      "hover:border-violet-300/60 hover:bg-violet-100/80 hover:text-violet-800 hover:shadow-sm dark:hover:border-violet-700/50 dark:hover:bg-violet-900/30 dark:hover:text-violet-200 transition-all",
+    icon: "text-violet-500 dark:text-violet-400 group-hover:scale-110 transition-transform duration-300",
+  },
+  blue: {
+    default: "border-blue-200/40 bg-blue-50/50 text-slate-700 dark:border-blue-800/30 dark:bg-blue-900/10 dark:text-slate-300",
+    hover:
+      "hover:border-blue-300/60 hover:bg-blue-100/80 hover:text-blue-800 hover:shadow-sm dark:hover:border-blue-700/50 dark:hover:bg-blue-900/30 dark:hover:text-blue-200 transition-all",
+    icon: "text-blue-500 dark:text-blue-400 group-hover:scale-110 transition-transform duration-300",
+  },
+  pink: {
+    default: "border-pink-200/40 bg-pink-50/50 text-slate-700 dark:border-pink-800/30 dark:bg-pink-900/10 dark:text-slate-300",
+    hover:
+      "hover:border-pink-300/60 hover:bg-pink-100/80 hover:text-pink-800 hover:shadow-sm dark:hover:border-pink-700/50 dark:hover:bg-pink-900/30 dark:hover:text-pink-200 transition-all",
+    icon: "text-pink-500 dark:text-pink-400 group-hover:scale-110 transition-transform duration-300",
+  },
 };
 
 const EXPANDABLE_ACTION_KEYS = new Set([
@@ -308,8 +322,9 @@ export function WorkbenchRightRailActionSections({
                     type="button"
                     data-testid={`workbench-right-rail-action-${item.key}`}
                     className={cn(
-                      "h-[58px] rounded-xl border px-3 py-2 text-left transition-colors",
-                      CARD_TONE_CLASS[item.tone],
+                      "group relative h-[58px] rounded-xl border px-3 py-2 text-left transition-all",
+                      CARD_TONE_CLASS[item.tone].default,
+                      CARD_TONE_CLASS[item.tone].hover,
                     )}
                     onClick={() => {
                       if (EXPANDABLE_ACTION_KEYS.has(item.key)) {
@@ -318,7 +333,7 @@ export function WorkbenchRightRailActionSections({
                     }}
                   >
                     <div className="flex items-center gap-2 text-xs font-medium leading-none">
-                      <Icon className="h-3.5 w-3.5" />
+                      <Icon className={cn("h-3.5 w-3.5 transition-colors", CARD_TONE_CLASS[item.tone].icon)} />
                       <span className="leading-tight">{item.label}</span>
                     </div>
                   </button>
diff --git a/src/components/workspace/panels/workbenchRightRailExpandedChrome.tsx b/src/components/workspace/panels/workbenchRightRailExpandedChrome.tsx
index 8820017e5..3a555203c 100644
--- a/src/components/workspace/panels/workbenchRightRailExpandedChrome.tsx
+++ b/src/components/workspace/panels/workbenchRightRailExpandedChrome.tsx
@@ -57,18 +57,20 @@ export function WorkbenchRightRailHeadingCard({
   }
 
   return (
-    <div className="rounded-xl border border-border/70 bg-muted/35 px-3 py-2">
-      <div className="text-[11px] font-semibold uppercase tracking-[0.12em] text-muted-foreground">
+    <div className="px-1 py-1">
+      <div className="text-[11px] font-semibold uppercase tracking-[0.12em] text-muted-foreground/80">
         {eyebrow ?? "独立右栏"}
       </div>
-      <div className="mt-1 text-sm font-medium text-foreground">{heading}</div>
+      <div className="mt-1.5 text-[15px] font-semibold text-foreground tracking-tight">{heading}</div>
       {subheading ? (
-        <div className="mt-1 text-xs text-muted-foreground">{subheading}</div>
+        <div className="mt-1 text-[13px] text-muted-foreground">{subheading}</div>
       ) : null}
     </div>
   );
 }
 
+import { Sparkles } from "lucide-react";
+
 export function WorkbenchRightRailStyleGuideCard({
   projectId,
   onOpen,
@@ -81,17 +83,23 @@ export function WorkbenchRightRailStyleGuideCard({
   }
 
   return (
-    <div className="rounded-xl border border-violet-200/70 bg-violet-50/60 px-3 py-3 dark:border-violet-900/60 dark:bg-violet-950/20">
-      <div className="text-xs font-semibold text-violet-700 dark:text-violet-300">
-        风格策略
+    <div className="group relative overflow-hidden rounded-[22px] border border-slate-200/80 bg-[linear-gradient(135deg,rgba(255,250,240,0.92)_0%,rgba(255,255,255,1)_46%,rgba(241,246,255,0.92)_100%)] px-4 py-4 shadow-sm shadow-slate-950/5 transition-all hover:-translate-y-0.5 hover:border-slate-300 hover:shadow-md dark:border-violet-900/60 dark:from-violet-950/20 dark:to-background">
+      <div className="absolute -right-6 -top-6 opacity-[0.08] transition-opacity group-hover:opacity-[0.12]">
+        <Sparkles className="h-24 w-24 text-amber-500 dark:text-violet-400" />
       </div>
-      <div className="mt-1 text-sm text-foreground">
-        统一管理项目默认风格，并作为当前创作的风格基线。
-      </div>
-      <div className="mt-3 flex gap-2">
-        <Button size="sm" variant="outline" className="h-8" onClick={onOpen}>
-          编辑项目风格
-        </Button>
+      <div className="relative">
+        <div className="flex items-center gap-1.5 text-xs font-semibold text-amber-700 dark:text-violet-400">
+          <Sparkles className="h-3.5 w-3.5" />
+          风格策略
+        </div>
+        <div className="mt-1.5 text-[12px] leading-relaxed text-slate-600">
+          统一管理项目默认风格，并作为当前创作的风格基线。
+        </div>
+        <div className="mt-3">
+          <Button size="sm" variant="outline" className="h-7 border-slate-200/80 bg-white/80 text-[11px] hover:bg-slate-50 hover:text-slate-900 dark:border-violet-900/60 dark:bg-black/50 dark:hover:bg-violet-900/30 dark:hover:text-violet-300" onClick={onOpen}>
+            编辑项目风格
+          </Button>
+        </div>
       </div>
     </div>
   );
@@ -111,7 +119,7 @@ export function WorkbenchRightRailStyleGuideDialog({
   return (
     <Dialog open={open} onOpenChange={onOpenChange}>
       <DialogContent className="max-h-[90vh] max-w-6xl overflow-y-auto p-0">
-        <DialogHeader className="border-b px-6 py-4">
+        <DialogHeader className="sr-only">
           <DialogTitle>项目默认风格</DialogTitle>
         </DialogHeader>
         <div className="p-6">
diff --git a/src/features/browser-runtime/BrowserRuntimeDebugPanel.test.tsx b/src/features/browser-runtime/BrowserRuntimeDebugPanel.test.tsx
new file mode 100644
index 000000000..3391609ff
--- /dev/null
+++ b/src/features/browser-runtime/BrowserRuntimeDebugPanel.test.tsx
@@ -0,0 +1,125 @@
+import React from "react";
+import { act } from "react";
+import { createRoot, type Root } from "react-dom/client";
+import { afterEach, beforeEach, describe, expect, it, vi } from "vitest";
+import { BrowserRuntimeDebugPanel } from "./BrowserRuntimeDebugPanel";
+
+const { mockUseBrowserRuntimeDebug } = vi.hoisted(() => ({
+  mockUseBrowserRuntimeDebug: vi.fn(),
+}));
+
+const defaultRuntimeState = {
+  selectedSession: null,
+  selectedProfileKey: "general_browser_assist",
+  setSelectedProfileKey: vi.fn(),
+  selectedTargetId: "",
+  setSelectedTargetId: vi.fn(),
+  targets: [],
+  sessionState: null,
+  latestFrame: null,
+  latestFrameMetadata: null,
+  consoleEvents: [],
+  networkEvents: [],
+  loadingTargets: false,
+  openingSession: false,
+  streaming: false,
+  refreshingState: false,
+  controlBusy: false,
+  lifecycleState: null,
+  isHumanControlling: false,
+  isWaitingForHuman: false,
+  isAgentResuming: false,
+  canDirectControl: false,
+  refreshTargets: vi.fn(async () => undefined),
+  openSession: vi.fn(async () => undefined),
+  startStream: vi.fn(async () => undefined),
+  stopStream: vi.fn(async () => undefined),
+  closeSession: vi.fn(async () => undefined),
+  refreshSessionState: vi.fn(async () => undefined),
+  takeOverSession: vi.fn(async () => undefined),
+  releaseSession: vi.fn(async () => undefined),
+  resumeSession: vi.fn(async () => undefined),
+  clickAt: vi.fn(async () => undefined),
+  scrollPage: vi.fn(async () => undefined),
+  typeIntoFocusedElement: vi.fn(async () => undefined),
+};
+
+vi.mock("./useBrowserRuntimeDebug", () => ({
+  useBrowserRuntimeDebug: mockUseBrowserRuntimeDebug,
+}));
+
+vi.mock("./api", () => ({
+  browserRuntimeApi: {
+    openBrowserRuntimeDebuggerWindow: vi.fn(async () => undefined),
+    reopenProfileWindow: vi.fn(async () => undefined),
+  },
+}));
+
+const mountedRoots: Array<{ root: Root; container: HTMLDivElement }> = [];
+
+beforeEach(() => {
+  (
+    globalThis as typeof globalThis & {
+      IS_REACT_ACT_ENVIRONMENT?: boolean;
+    }
+  ).IS_REACT_ACT_ENVIRONMENT = true;
+  mockUseBrowserRuntimeDebug.mockReturnValue({
+    ...defaultRuntimeState,
+  });
+});
+
+afterEach(() => {
+  while (mountedRoots.length > 0) {
+    const mounted = mountedRoots.pop();
+    if (!mounted) break;
+    act(() => {
+      mounted.root.unmount();
+    });
+    mounted.container.remove();
+  }
+  vi.clearAllMocks();
+});
+
+async function renderPanel() {
+  const container = document.createElement("div");
+  document.body.appendChild(container);
+  const root = createRoot(container);
+  mountedRoots.push({ root, container });
+  await act(async () => {
+    root.render(
+      <BrowserRuntimeDebugPanel
+        sessions={[]}
+        initialProfileKey="general_browser_assist"
+        initialSessionId="browser-session-1"
+      />,
+    );
+  });
+  await act(async () => {
+    await Promise.resolve();
+  });
+  return container;
+}
+
+describe("BrowserRuntimeDebugPanel", () => {
+  it("存在初始附着会话时不应因空 session 列表而退回占位提示", async () => {
+    const container = await renderPanel();
+    expect(container.textContent).toContain("浏览器实时会话");
+    expect(container.textContent).toContain("正在连接浏览器会话");
+    expect(container.textContent).not.toContain(
+      "还没有运行中的独立 Chrome Profile",
+    );
+  });
+
+  it("启动浏览器时应展示明确的加载提示", async () => {
+    mockUseBrowserRuntimeDebug.mockReturnValue({
+      ...defaultRuntimeState,
+      openingSession: true,
+      refreshingState: false,
+    });
+
+    const container = await renderPanel();
+
+    expect(container.textContent).toContain("正在启动 Chrome、连接调试通道");
+    expect(container.textContent).toContain("通常需要 3–8 秒");
+  });
+});
diff --git a/src/features/browser-runtime/BrowserRuntimeDebugPanel.tsx b/src/features/browser-runtime/BrowserRuntimeDebugPanel.tsx
new file mode 100644
index 000000000..69621a73d
--- /dev/null
+++ b/src/features/browser-runtime/BrowserRuntimeDebugPanel.tsx
@@ -0,0 +1,1236 @@
+import {
+  useMemo,
+  useRef,
+  useState,
+  type MouseEvent,
+  type WheelEvent,
+} from "react";
+import {
+  Bug,
+  ExternalLink,
+  Globe,
+  Hand,
+  Pause,
+  Play,
+  RefreshCw,
+  Send,
+} from "lucide-react";
+import type { ChromeProfileSessionInfo } from "@/lib/webview-api";
+import { browserRuntimeApi } from "./api";
+import { useBrowserRuntimeDebug } from "./useBrowserRuntimeDebug";
+
+interface BrowserRuntimeDebugPanelProps {
+  sessions: ChromeProfileSessionInfo[];
+  onMessage?: (message: { type: "success" | "error"; text: string }) => void;
+  showStandaloneWindowButton?: boolean;
+  initialProfileKey?: string;
+  initialSessionId?: string;
+  initialTargetId?: string;
+  embedded?: boolean;
+}
+
+function formatEventSubtitle(event: {
+  type: string;
+  occurred_at: string;
+  text?: string;
+  url?: string;
+  status?: number;
+}) {
+  if (event.type === "console_message") {
+    return event.text || "";
+  }
+  if (event.type === "network_response") {
+    return `${event.status || "-"} · ${event.url || ""}`;
+  }
+  if (event.type === "network_request") {
+    return event.url || "";
+  }
+  return event.occurred_at;
+}
+
+function resolveSessionStatus(
+  sessionState: {
+    connected: boolean;
+    lifecycle_state: string;
+    human_reason?: string;
+    last_error?: string;
+  } | null,
+) {
+  if (!sessionState) {
+    return {
+      label: "未连接",
+      toneClass: "border-border/70 bg-muted/40 text-muted-foreground",
+      description: "还没有附着到浏览器实时会话。",
+    };
+  }
+
+  switch (sessionState.lifecycle_state) {
+    case "human_controlling":
+      return {
+        label: "你正在接管",
+        toneClass:
+          "border-amber-300/70 bg-amber-50 text-amber-800 dark:border-amber-800/70 dark:bg-amber-950/30 dark:text-amber-200",
+        description:
+          sessionState.human_reason || "当前画布已切换为人工处理模式。",
+      };
+    case "waiting_for_human":
+      return {
+        label: "等待你处理",
+        toneClass:
+          "border-orange-300/70 bg-orange-50 text-orange-800 dark:border-orange-800/70 dark:bg-orange-950/30 dark:text-orange-200",
+        description:
+          sessionState.human_reason || "Agent 已停在当前页面，等待你介入处理。",
+      };
+    case "agent_resuming":
+      return {
+        label: "恢复中",
+        toneClass:
+          "border-sky-300/70 bg-sky-50 text-sky-800 dark:border-sky-800/70 dark:bg-sky-950/30 dark:text-sky-200",
+        description:
+          sessionState.human_reason || "浏览器会话正在交回给 Agent。",
+      };
+    case "failed":
+      return {
+        label: "会话失败",
+        toneClass: "border-destructive/60 bg-destructive/10 text-destructive",
+        description:
+          sessionState.last_error || "浏览器连接已异常中断，请刷新或重新连接。",
+      };
+    case "closed":
+      return {
+        label: "已关闭",
+        toneClass: "border-border/70 bg-muted/40 text-muted-foreground",
+        description: "实时会话已经关闭。",
+      };
+    case "launching":
+      return {
+        label: "连接中",
+        toneClass:
+          "border-sky-300/70 bg-sky-50 text-sky-800 dark:border-sky-800/70 dark:bg-sky-950/30 dark:text-sky-200",
+        description: "浏览器实时会话正在建立连接。",
+      };
+    default:
+      return {
+        label: sessionState.connected ? "执行中" : "未连接",
+        toneClass:
+          "border-emerald-300/70 bg-emerald-50 text-emerald-800 dark:border-emerald-800/70 dark:bg-emerald-950/30 dark:text-emerald-200",
+        description: "Agent 正在当前浏览器会话中执行任务。",
+      };
+  }
+}
+
+function resolveFrameCoordinate(params: {
+  clientX: number;
+  clientY: number;
+  rect: DOMRect;
+  frameWidth?: number;
+  frameHeight?: number;
+}) {
+  const { clientX, clientY, rect, frameWidth, frameHeight } = params;
+  if (!frameWidth || !frameHeight || rect.width <= 0 || rect.height <= 0) {
+    return null;
+  }
+
+  const frameAspect = frameWidth / frameHeight;
+  const containerAspect = rect.width / rect.height;
+  let renderedWidth = rect.width;
+  let renderedHeight = rect.height;
+  let offsetX = 0;
+  let offsetY = 0;
+
+  if (frameAspect > containerAspect) {
+    renderedHeight = rect.width / frameAspect;
+    offsetY = (rect.height - renderedHeight) / 2;
+  } else {
+    renderedWidth = rect.height * frameAspect;
+    offsetX = (rect.width - renderedWidth) / 2;
+  }
+
+  const localX = clientX - rect.left - offsetX;
+  const localY = clientY - rect.top - offsetY;
+  if (
+    localX < 0 ||
+    localY < 0 ||
+    localX > renderedWidth ||
+    localY > renderedHeight
+  ) {
+    return null;
+  }
+
+  return {
+    x: (localX / renderedWidth) * frameWidth,
+    y: (localY / renderedHeight) * frameHeight,
+  };
+}
+
+function resolveLiveViewPlaceholder(params: {
+  sessionCount: number;
+  hasAttachIntent: boolean;
+  openingSession: boolean;
+  refreshingState: boolean;
+  sessionState: {
+    connected: boolean;
+    lifecycle_state: string;
+  } | null;
+}) {
+  const {
+    sessionCount,
+    hasAttachIntent,
+    openingSession,
+    refreshingState,
+    sessionState,
+  } = params;
+
+  if (sessionCount === 0 && !hasAttachIntent) {
+    return "还没有运行中的浏览器会话。请先在通用对话里启动浏览器协助。";
+  }
+
+  if (openingSession || refreshingState) {
+    return "正在启动 Chrome、连接调试通道，通常需要 3–8 秒。";
+  }
+
+  if (sessionState) {
+    return "已连接浏览器，正在等待首帧画面。若超过 10 秒仍无画面，可点击“恢复画面”或刷新会话。";
+  }
+
+  return "正在连接浏览器会话...";
+}
+
+export function BrowserRuntimeDebugPanel(props: BrowserRuntimeDebugPanelProps) {
+  const {
+    sessions,
+    onMessage,
+    showStandaloneWindowButton = true,
+    initialProfileKey,
+    initialSessionId,
+    initialTargetId,
+    embedded = false,
+  } = props;
+  const runtime = useBrowserRuntimeDebug(sessions, onMessage, {
+    initialProfileKey,
+    initialSessionId,
+    initialTargetId,
+  });
+  const [showAdvanced, setShowAdvanced] = useState(false);
+  const [manualInput, setManualInput] = useState("");
+  const liveViewRef = useRef<HTMLDivElement | null>(null);
+
+  const currentTitle =
+    runtime.sessionState?.last_page_info?.title ||
+    runtime.sessionState?.target_title ||
+    "未打开会话";
+  const currentUrl =
+    runtime.sessionState?.last_page_info?.url ||
+    runtime.sessionState?.target_url ||
+    runtime.selectedSession?.last_url ||
+    "";
+  const statusInfo = useMemo(
+    () => resolveSessionStatus(runtime.sessionState),
+    [runtime.sessionState],
+  );
+  const hasAttachIntent = Boolean(
+    runtime.sessionState ||
+    runtime.selectedProfileKey ||
+    initialProfileKey ||
+    initialSessionId,
+  );
+  const compactActionButtonClass =
+    "inline-flex h-8 items-center gap-1 rounded-md border px-2.5 text-xs hover:bg-muted disabled:opacity-60";
+  const embeddedIconButtonClass =
+    "inline-flex h-8 w-8 items-center justify-center rounded-[10px] border border-border/70 bg-background/90 text-muted-foreground transition-colors hover:bg-muted hover:text-foreground disabled:opacity-60";
+  const embeddedPrimaryButtonClass =
+    "inline-flex h-8 items-center gap-1 rounded-[10px] border px-2.5 text-xs font-medium transition-colors disabled:opacity-60";
+  const showEmbeddedControlTray =
+    runtime.canDirectControl ||
+    runtime.isWaitingForHuman ||
+    runtime.isHumanControlling ||
+    showAdvanced;
+  const liveViewPlaceholder = resolveLiveViewPlaceholder({
+    sessionCount: sessions.length,
+    hasAttachIntent,
+    openingSession: runtime.openingSession,
+    refreshingState: runtime.refreshingState,
+    sessionState: runtime.sessionState,
+  });
+
+  const handleOpenStandaloneWindow = async () => {
+    try {
+      await browserRuntimeApi.openBrowserRuntimeDebuggerWindow({
+        session_id: runtime.sessionState?.session_id,
+        profile_key:
+          runtime.sessionState?.profile_key || runtime.selectedProfileKey,
+      });
+      onMessage?.({
+        type: "success",
+        text: "已打开独立浏览器实时会话窗口",
+      });
+    } catch (error) {
+      onMessage?.({
+        type: "error",
+        text: `打开独立实时会话窗口失败: ${
+          error instanceof Error ? error.message : String(error)
+        }`,
+      });
+    }
+  };
+
+  const handleOpenSystemBrowser = async () => {
+    const profileKey =
+      runtime.sessionState?.profile_key || runtime.selectedProfileKey;
+    if (!profileKey || !currentUrl) {
+      onMessage?.({
+        type: "error",
+        text: "当前没有可打开的浏览器页面",
+      });
+      return;
+    }
+
+    try {
+      await browserRuntimeApi.reopenProfileWindow({
+        profile_key: profileKey,
+        url: currentUrl,
+      });
+      onMessage?.({
+        type: "success",
+        text: "已在独立 Chrome 会话中打开当前页面",
+      });
+    } catch (error) {
+      onMessage?.({
+        type: "error",
+        text: `打开系统浏览器失败: ${
+          error instanceof Error ? error.message : String(error)
+        }`,
+      });
+    }
+  };
+
+  const handleLiveViewClick = async (event: MouseEvent<HTMLDivElement>) => {
+    if (!runtime.canDirectControl || runtime.controlBusy) {
+      return;
+    }
+    const rect = liveViewRef.current?.getBoundingClientRect();
+    if (!rect) {
+      return;
+    }
+    const point = resolveFrameCoordinate({
+      clientX: event.clientX,
+      clientY: event.clientY,
+      rect,
+      frameWidth: runtime.latestFrameMetadata?.width,
+      frameHeight: runtime.latestFrameMetadata?.height,
+    });
+    if (!point) {
+      return;
+    }
+    await runtime.clickAt(point.x, point.y);
+  };
+
+  const handleLiveViewWheel = async (event: WheelEvent<HTMLDivElement>) => {
+    if (!runtime.canDirectControl || runtime.controlBusy) {
+      return;
+    }
+    event.preventDefault();
+    await runtime.scrollPage(event.deltaY < 0 ? "up" : "down");
+  };
+
+  const handleSendManualInput = async () => {
+    const value = manualInput.trim();
+    if (!value) {
+      return;
+    }
+    await runtime.typeIntoFocusedElement(value);
+    setManualInput("");
+  };
+
+  if (embedded) {
+    const embeddedAction = !runtime.sessionState ? (
+      <button
+        type="button"
+        className={embeddedPrimaryButtonClass}
+        onClick={() => void runtime.openSession()}
+        disabled={runtime.openingSession || !runtime.selectedProfileKey}
+      >
+        {runtime.openingSession ? "连接中" : "连接"}
+      </button>
+    ) : runtime.isHumanControlling ? (
+      <button
+        type="button"
+        className="inline-flex h-8 items-center gap-1 rounded-[10px] border border-emerald-300/70 bg-emerald-50 px-2.5 text-xs font-medium text-emerald-800 transition-colors hover:bg-emerald-100 disabled:opacity-60 dark:border-emerald-800/70 dark:bg-emerald-950/30 dark:text-emerald-200"
+        onClick={() => void runtime.resumeSession()}
+        disabled={runtime.controlBusy}
+      >
+        <Play className="h-3.5 w-3.5" />
+        {runtime.controlBusy ? "处理中" : "继续"}
+      </button>
+    ) : runtime.isWaitingForHuman ? (
+      <button
+        type="button"
+        className="inline-flex h-8 items-center gap-1 rounded-[10px] border border-amber-300/70 bg-amber-50 px-2.5 text-xs font-medium text-amber-800 transition-colors hover:bg-amber-100 disabled:opacity-60 dark:border-amber-800/70 dark:bg-amber-950/30 dark:text-amber-200"
+        onClick={() => void runtime.takeOverSession()}
+        disabled={runtime.controlBusy}
+      >
+        <Hand className="h-3.5 w-3.5" />
+        处理
+      </button>
+    ) : (
+      <button
+        type="button"
+        className="inline-flex h-8 items-center gap-1 rounded-[10px] border border-amber-300/70 bg-amber-50 px-2.5 text-xs font-medium text-amber-800 transition-colors hover:bg-amber-100 disabled:opacity-60 dark:border-amber-800/70 dark:bg-amber-950/30 dark:text-amber-200"
+        onClick={() => void runtime.takeOverSession()}
+        disabled={runtime.controlBusy || runtime.isAgentResuming}
+      >
+        <Hand className="h-3.5 w-3.5" />
+        {runtime.isAgentResuming ? "恢复中" : "接管"}
+      </button>
+    );
+
+    return (
+      <div className="flex h-full min-h-0 w-full flex-col overflow-hidden bg-background">
+        <div className="flex items-center gap-2 border-b border-border/60 bg-muted/15 px-3 py-2">
+          <div className="hidden items-center gap-1.5 md:flex">
+            <span className="h-2.5 w-2.5 rounded-full bg-[#ff5f57]" />
+            <span className="h-2.5 w-2.5 rounded-full bg-[#febc2e]" />
+            <span className="h-2.5 w-2.5 rounded-full bg-[#28c840]" />
+          </div>
+          <div className="min-w-0 flex-1 rounded-[12px] border border-border/70 bg-background/95 px-3 py-1.5 shadow-sm">
+            <div className="flex items-center gap-2">
+              <span
+                className={`h-2.5 w-2.5 shrink-0 rounded-full ${
+                  runtime.sessionState?.connected
+                    ? runtime.isHumanControlling
+                      ? "bg-amber-500"
+                      : "bg-emerald-500"
+                    : "bg-muted-foreground/50"
+                }`}
+              />
+              <Globe className="h-3.5 w-3.5 shrink-0 text-muted-foreground" />
+              <span className="truncate text-[12px] text-foreground/90">
+                {currentUrl || "正在准备浏览器会话..."}
+              </span>
+            </div>
+          </div>
+          <div
+            className={`hidden rounded-full border px-2 py-1 text-[11px] font-medium lg:block ${statusInfo.toneClass}`}
+          >
+            {statusInfo.label}
+          </div>
+          {embeddedAction}
+          <button
+            type="button"
+            className={embeddedIconButtonClass}
+            onClick={() => void runtime.refreshSessionState()}
+            disabled={runtime.refreshingState || !runtime.sessionState}
+            aria-label="刷新会话"
+            title="刷新会话"
+          >
+            <RefreshCw
+              className={`h-3.5 w-3.5 ${
+                runtime.refreshingState ? "animate-spin" : ""
+              }`}
+            />
+          </button>
+          {showStandaloneWindowButton ? (
+            <button
+              type="button"
+              className={embeddedIconButtonClass}
+              onClick={() => void handleOpenStandaloneWindow()}
+              aria-label="独立窗口"
+              title="独立窗口"
+            >
+              <ExternalLink className="h-3.5 w-3.5" />
+            </button>
+          ) : null}
+          <button
+            type="button"
+            className={embeddedIconButtonClass}
+            onClick={() => setShowAdvanced((value) => !value)}
+            aria-label={showAdvanced ? "收起调试" : "展开调试"}
+            title={showAdvanced ? "收起调试" : "展开调试"}
+          >
+            <Bug className="h-3.5 w-3.5" />
+          </button>
+        </div>
+
+        <div
+          ref={liveViewRef}
+          className={`relative min-h-0 flex-1 overflow-hidden bg-black/95 ${
+            runtime.canDirectControl ? "cursor-crosshair" : "cursor-default"
+          }`}
+          onClick={(event) => void handleLiveViewClick(event)}
+          onWheel={(event) => void handleLiveViewWheel(event)}
+        >
+          {runtime.latestFrame ? (
+            <img
+              src={`data:image/jpeg;base64,${runtime.latestFrame}`}
+              alt="browser-live-view"
+              className="absolute inset-0 h-full w-full select-none object-contain"
+              draggable={false}
+            />
+          ) : (
+            <div className="absolute inset-0 flex items-center justify-center px-6 text-center text-sm text-white/75">
+              {liveViewPlaceholder}
+            </div>
+          )}
+
+          <div className="absolute left-3 top-3 max-w-[min(60%,24rem)] rounded-full bg-black/55 px-3 py-1.5 text-[11px] text-white/90 backdrop-blur">
+            <span className="truncate">{currentTitle}</span>
+          </div>
+
+          {runtime.sessionState?.last_error ? (
+            <div className="absolute bottom-3 left-3 right-3 rounded-md bg-destructive/90 px-3 py-2 text-xs text-destructive-foreground shadow-sm">
+              {runtime.sessionState.last_error}
+            </div>
+          ) : showEmbeddedControlTray ? (
+            <div className="absolute bottom-3 left-3 right-3 rounded-full bg-black/55 px-3 py-1.5 text-[11px] text-white/90 backdrop-blur">
+              {runtime.canDirectControl
+                ? "已接管：可以直接点击画面、滚轮滚动，并向当前焦点输入文本。"
+                : runtime.isWaitingForHuman
+                  ? "Agent 正在等待你接管当前页面。"
+                  : runtime.isHumanControlling
+                    ? "人工处理中，可随时继续交回给 Agent。"
+                    : "实时会话已附着。"}
+            </div>
+          ) : null}
+        </div>
+
+        {showEmbeddedControlTray ? (
+          <div className="border-t border-border/70 bg-background/95 px-3 py-2">
+            <div className="flex flex-wrap items-center gap-2">
+              {runtime.isHumanControlling ? (
+                <button
+                  type="button"
+                  className={compactActionButtonClass}
+                  onClick={() => void runtime.releaseSession()}
+                  disabled={runtime.controlBusy}
+                >
+                  <Pause className="h-3.5 w-3.5" />
+                  结束接管
+                </button>
+              ) : null}
+              {runtime.isWaitingForHuman ? (
+                <button
+                  type="button"
+                  className={compactActionButtonClass}
+                  onClick={() =>
+                    void runtime.resumeSession("无需人工处理，继续执行")
+                  }
+                  disabled={runtime.controlBusy}
+                >
+                  <Play className="h-3.5 w-3.5" />
+                  继续执行
+                </button>
+              ) : null}
+              {runtime.sessionState ? (
+                <button
+                  type="button"
+                  className={compactActionButtonClass}
+                  onClick={() =>
+                    void (runtime.streaming
+                      ? runtime.stopStream()
+                      : runtime.startStream("both"))
+                  }
+                >
+                  {runtime.streaming ? "停止画面" : "恢复画面"}
+                </button>
+              ) : null}
+              {showAdvanced ? (
+                <button
+                  type="button"
+                  className={compactActionButtonClass}
+                  onClick={() => void handleOpenSystemBrowser()}
+                  disabled={!currentUrl}
+                >
+                  <Globe className="h-3.5 w-3.5" />
+                  在 Chrome 中继续
+                </button>
+              ) : null}
+            </div>
+
+            {runtime.canDirectControl ? (
+              <div className="mt-2 flex flex-wrap items-center gap-2">
+                <input
+                  className="h-8 min-w-[220px] flex-1 rounded-md border bg-background px-3 text-sm disabled:cursor-not-allowed disabled:opacity-60"
+                  placeholder="向当前焦点输入文本"
+                  value={manualInput}
+                  disabled={runtime.controlBusy}
+                  onChange={(event) => setManualInput(event.target.value)}
+                  onKeyDown={(event) => {
+                    if (event.key === "Enter") {
+                      event.preventDefault();
+                      void handleSendManualInput();
+                    }
+                  }}
+                />
+                <button
+                  type="button"
+                  className={compactActionButtonClass}
+                  disabled={runtime.controlBusy}
+                  onClick={() => void handleSendManualInput()}
+                >
+                  <Send className="h-3.5 w-3.5" />
+                  发送
+                </button>
+                <button
+                  type="button"
+                  className={compactActionButtonClass}
+                  disabled={runtime.controlBusy}
+                  onClick={() => void runtime.scrollPage("up")}
+                >
+                  上滚
+                </button>
+                <button
+                  type="button"
+                  className={compactActionButtonClass}
+                  disabled={runtime.controlBusy}
+                  onClick={() => void runtime.scrollPage("down")}
+                >
+                  下滚
+                </button>
+              </div>
+            ) : null}
+
+          {showAdvanced ? (
+            <div className="mt-3 space-y-3 border-t border-border/70 pt-3">
+              <div className="grid gap-3 md:grid-cols-2">
+                <label className="space-y-1 text-xs">
+                  <span className="text-muted-foreground">Profile 会话</span>
+                  <select
+                    className="w-full rounded-md border bg-background px-3 py-2 text-sm"
+                    value={runtime.selectedProfileKey}
+                    onChange={(event) =>
+                      runtime.setSelectedProfileKey(event.target.value)
+                    }
+                  >
+                    {sessions.map((session) => (
+                      <option
+                        key={session.profile_key}
+                        value={session.profile_key}
+                      >
+                        {session.profile_key} · PID {session.pid || "-"}
+                      </option>
+                    ))}
+                  </select>
+                </label>
+                <label className="space-y-1 text-xs">
+                  <span className="text-muted-foreground">CDP 标签页</span>
+                  <select
+                    className="w-full rounded-md border bg-background px-3 py-2 text-sm"
+                    value={runtime.selectedTargetId}
+                    onChange={(event) =>
+                      runtime.setSelectedTargetId(event.target.value)
+                    }
+                  >
+                    {runtime.targets.length === 0 ? (
+                      <option value="">未发现标签页</option>
+                    ) : (
+                      runtime.targets.map((target) => (
+                        <option key={target.id} value={target.id}>
+                          {target.title || target.url || target.id}
+                        </option>
+                      ))
+                    )}
+                  </select>
+                </label>
+              </div>
+
+              <div className="flex flex-wrap gap-2">
+                <button
+                  type="button"
+                  className={compactActionButtonClass}
+                  onClick={() => void runtime.refreshTargets()}
+                  disabled={
+                    runtime.loadingTargets || !runtime.selectedProfileKey
+                  }
+                >
+                  <RefreshCw className="h-3.5 w-3.5" />
+                  刷新标签页
+                </button>
+                <button
+                  type="button"
+                  className={compactActionButtonClass}
+                  onClick={() => void runtime.openSession()}
+                  disabled={
+                    runtime.openingSession || !runtime.selectedProfileKey
+                  }
+                >
+                  {runtime.openingSession ? "打开中..." : "重新附着"}
+                </button>
+                <button
+                  type="button"
+                  className={compactActionButtonClass}
+                  onClick={() => void handleOpenSystemBrowser()}
+                  disabled={!currentUrl}
+                >
+                  <Globe className="h-3.5 w-3.5" />
+                  在 Chrome 中继续
+                </button>
+              </div>
+
+              <div className="grid gap-3 xl:grid-cols-[1.2fr_0.8fr]">
+                <div className="rounded-md border p-3 text-xs">
+                  <div className="mb-2 text-sm font-medium">会话信息</div>
+                  <div className="grid gap-2 md:grid-cols-2">
+                    <div>
+                      <span className="text-muted-foreground">Session：</span>
+                      <span className="break-all">
+                        {runtime.sessionState?.session_id || "-"}
+                      </span>
+                    </div>
+                    <div>
+                      <span className="text-muted-foreground">Target：</span>
+                      <span className="break-all">
+                        {runtime.sessionState?.target_id || "-"}
+                      </span>
+                    </div>
+                    <div>
+                      <span className="text-muted-foreground">状态：</span>
+                      <span>{runtime.sessionState?.lifecycle_state || "-"}</span>
+                    </div>
+                    <div>
+                      <span className="text-muted-foreground">控制模式：</span>
+                      <span>{runtime.sessionState?.control_mode || "-"}</span>
+                    </div>
+                    <div>
+                      <span className="text-muted-foreground">WS：</span>
+                      <span className="break-all">
+                        {runtime.sessionState?.ws_debugger_url || "-"}
+                      </span>
+                    </div>
+                    <div>
+                      <span className="text-muted-foreground">最后帧：</span>
+                      <span>{runtime.sessionState?.last_frame_at || "-"}</span>
+                    </div>
+                  </div>
+                </div>
+
+                <div className="grid gap-3 md:grid-cols-2 xl:grid-cols-1">
+                  <div className="rounded-md border p-3">
+                    <div className="mb-2 flex items-center justify-between">
+                      <div className="text-sm font-medium">Console</div>
+                      <div className="text-[11px] text-muted-foreground">
+                        {runtime.consoleEvents.length} 条
+                      </div>
+                    </div>
+                    <div className="max-h-[180px] space-y-2 overflow-auto text-xs">
+                      {runtime.consoleEvents.length === 0 ? (
+                        <div className="text-muted-foreground">
+                          暂无 Console 事件
+                        </div>
+                      ) : (
+                        runtime.consoleEvents.map((event) => (
+                          <div
+                            key={event.sequence}
+                            className="rounded border p-2"
+                          >
+                            <div className="font-medium text-foreground/90">
+                              [
+                              {event.type === "console_message"
+                                ? event.level
+                                : event.type}
+                              ]
+                            </div>
+                            <div className="text-muted-foreground">
+                              {formatEventSubtitle(event)}
+                            </div>
+                          </div>
+                        ))
+                      )}
+                    </div>
+                  </div>
+
+                  <div className="rounded-md border p-3">
+                    <div className="mb-2 flex items-center justify-between">
+                      <div className="text-sm font-medium">Network</div>
+                      <div className="text-[11px] text-muted-foreground">
+                        {runtime.networkEvents.length} 条
+                      </div>
+                    </div>
+                    <div className="max-h-[180px] space-y-2 overflow-auto text-xs">
+                      {runtime.networkEvents.length === 0 ? (
+                        <div className="text-muted-foreground">
+                          暂无 Network 事件
+                        </div>
+                      ) : (
+                        runtime.networkEvents.map((event) => (
+                          <div
+                            key={event.sequence}
+                            className="rounded border p-2"
+                          >
+                            <div className="font-medium text-foreground/90">
+                              {event.type}
+                            </div>
+                            <div className="break-all text-muted-foreground">
+                              {formatEventSubtitle(event)}
+                            </div>
+                          </div>
+                        ))
+                      )}
+                    </div>
+                  </div>
+                </div>
+              </div>
+            </div>
+          ) : null}
+          </div>
+        ) : null}
+      </div>
+    );
+  }
+
+  return (
+    <div className="space-y-4 rounded-lg border p-5">
+      <div className="flex items-start justify-between gap-3">
+        <div className="min-w-0">
+          <h3 className="text-sm font-medium">浏览器实时会话</h3>
+          <p className="text-xs text-muted-foreground">
+            在通用对话里直接查看浏览器现场。需要时可人工接管，并在完成后交回给
+            Agent。
+          </p>
+        </div>
+        <div className="flex items-center gap-2">
+          {showStandaloneWindowButton ? (
+            <button
+              type="button"
+              className="inline-flex items-center gap-1 rounded-md border px-2.5 py-1.5 text-xs hover:bg-muted"
+              onClick={() => void handleOpenStandaloneWindow()}
+            >
+              <ExternalLink className="h-3.5 w-3.5" />
+              独立窗口
+            </button>
+          ) : null}
+          <button
+            type="button"
+            className="inline-flex items-center gap-1 rounded-md border px-2.5 py-1.5 text-xs hover:bg-muted"
+            onClick={() => setShowAdvanced((value) => !value)}
+          >
+            <Bug className="h-3.5 w-3.5" />
+            {showAdvanced ? "收起高级调试" : "高级调试"}
+          </button>
+        </div>
+      </div>
+
+      {sessions.length === 0 && !hasAttachIntent ? (
+        <div className="rounded-md border border-dashed p-4 text-sm text-muted-foreground">
+          还没有运行中的独立 Chrome Profile。请先从通用对话启动浏览器协助。
+        </div>
+      ) : (
+        <>
+          <div className="rounded-xl border bg-muted/15 p-4">
+            <div className="mb-4 flex flex-wrap items-start justify-between gap-3">
+              <div className="min-w-0">
+                <div className="text-xs text-muted-foreground">当前页面</div>
+                <div className="truncate text-sm font-medium">
+                  {currentTitle}
+                </div>
+                <div className="truncate text-xs text-muted-foreground">
+                  {currentUrl || "尚未获取页面 URL"}
+                </div>
+              </div>
+              <div
+                className={`rounded-full border px-2.5 py-1 text-[11px] font-medium ${statusInfo.toneClass}`}
+              >
+                {statusInfo.label}
+              </div>
+            </div>
+
+            <div className="mb-3 rounded-lg border bg-background/70 px-3 py-2">
+              <div className="text-xs text-foreground">
+                {statusInfo.description}
+              </div>
+              {runtime.sessionState?.last_error ? (
+                <div className="mt-1 text-[11px] text-destructive">
+                  最近错误: {runtime.sessionState.last_error}
+                </div>
+              ) : null}
+            </div>
+
+            <div
+              ref={liveViewRef}
+              className={`relative h-[260px] w-full overflow-hidden rounded-lg border bg-black/95 sm:h-[320px] lg:h-[420px] ${
+                runtime.canDirectControl ? "cursor-crosshair" : "cursor-default"
+              }`}
+              onClick={(event) => void handleLiveViewClick(event)}
+              onWheel={(event) => void handleLiveViewWheel(event)}
+            >
+              {runtime.latestFrame ? (
+                <img
+                  src={`data:image/jpeg;base64,${runtime.latestFrame}`}
+                  alt="browser-live-view"
+                  className="absolute inset-0 h-full w-full select-none object-contain"
+                  draggable={false}
+                />
+              ) : (
+                <div className="absolute inset-0 flex items-center justify-center px-4 text-center text-xs text-muted-foreground">
+                  {liveViewPlaceholder}
+                </div>
+              )}
+
+              <div className="absolute left-3 top-3 rounded-full bg-black/60 px-2.5 py-1 text-[11px] text-white">
+                {runtime.sessionState?.transport_kind || "cdp_frames"}
+              </div>
+
+              <div className="absolute bottom-3 left-3 right-3 rounded-md bg-black/60 px-3 py-2 text-[11px] text-white/90">
+                {runtime.canDirectControl
+                  ? "当前支持点击画面、滚轮滚动，并把文本发送到当前焦点元素。"
+                  : "点击“接管浏览器”后，可直接在这里进行最小人工操作。"}
+              </div>
+            </div>
+          </div>
+
+          <div className="flex flex-wrap gap-2">
+            {!runtime.sessionState ? (
+              <button
+                type="button"
+                className="rounded-md border px-3 py-1.5 text-xs hover:bg-muted disabled:opacity-60"
+                onClick={() => void runtime.openSession()}
+                disabled={runtime.openingSession || !runtime.selectedProfileKey}
+              >
+                {runtime.openingSession ? "连接中..." : "连接浏览器"}
+              </button>
+            ) : null}
+
+            {runtime.sessionState ? (
+              <>
+                {runtime.isHumanControlling ? (
+                  <>
+                    <button
+                      type="button"
+                      className="inline-flex items-center gap-1 rounded-md border border-emerald-300/70 bg-emerald-50 px-3 py-1.5 text-xs text-emerald-800 hover:bg-emerald-100 disabled:opacity-60 dark:border-emerald-800/70 dark:bg-emerald-950/30 dark:text-emerald-200"
+                      onClick={() => void runtime.resumeSession()}
+                      disabled={runtime.controlBusy}
+                    >
+                      <Play className="h-3.5 w-3.5" />
+                      {runtime.controlBusy ? "处理中..." : "我已完成，继续执行"}
+                    </button>
+                    <button
+                      type="button"
+                      className="inline-flex items-center gap-1 rounded-md border px-3 py-1.5 text-xs hover:bg-muted disabled:opacity-60"
+                      onClick={() => void runtime.releaseSession()}
+                      disabled={runtime.controlBusy}
+                    >
+                      <Pause className="h-3.5 w-3.5" />
+                      结束接管
+                    </button>
+                  </>
+                ) : runtime.isWaitingForHuman ? (
+                  <>
+                    <button
+                      type="button"
+                      className="inline-flex items-center gap-1 rounded-md border border-amber-300/70 bg-amber-50 px-3 py-1.5 text-xs text-amber-800 hover:bg-amber-100 disabled:opacity-60 dark:border-amber-800/70 dark:bg-amber-950/30 dark:text-amber-200"
+                      onClick={() => void runtime.takeOverSession()}
+                      disabled={runtime.controlBusy}
+                    >
+                      <Hand className="h-3.5 w-3.5" />
+                      开始人工处理
+                    </button>
+                    <button
+                      type="button"
+                      className="inline-flex items-center gap-1 rounded-md border px-3 py-1.5 text-xs hover:bg-muted disabled:opacity-60"
+                      onClick={() =>
+                        void runtime.resumeSession("无需人工处理，继续执行")
+                      }
+                      disabled={runtime.controlBusy}
+                    >
+                      <Play className="h-3.5 w-3.5" />
+                      直接继续执行
+                    </button>
+                  </>
+                ) : (
+                  <button
+                    type="button"
+                    className="inline-flex items-center gap-1 rounded-md border border-amber-300/70 bg-amber-50 px-3 py-1.5 text-xs text-amber-800 hover:bg-amber-100 disabled:opacity-60 dark:border-amber-800/70 dark:bg-amber-950/30 dark:text-amber-200"
+                    onClick={() => void runtime.takeOverSession()}
+                    disabled={runtime.controlBusy || runtime.isAgentResuming}
+                  >
+                    <Hand className="h-3.5 w-3.5" />
+                    {runtime.isAgentResuming ? "恢复中..." : "接管浏览器"}
+                  </button>
+                )}
+
+                <button
+                  type="button"
+                  className="rounded-md border px-3 py-1.5 text-xs hover:bg-muted disabled:opacity-60"
+                  onClick={() =>
+                    void (runtime.streaming
+                      ? runtime.stopStream()
+                      : runtime.startStream("both"))
+                  }
+                  disabled={!runtime.sessionState}
+                >
+                  {runtime.streaming ? "停止实时画面" : "恢复实时画面"}
+                </button>
+
+                <button
+                  type="button"
+                  className="inline-flex items-center gap-1 rounded-md border px-3 py-1.5 text-xs hover:bg-muted disabled:opacity-60"
+                  onClick={() => void runtime.refreshSessionState()}
+                  disabled={runtime.refreshingState}
+                >
+                  <RefreshCw
+                    className={`h-3.5 w-3.5 ${
+                      runtime.refreshingState ? "animate-spin" : ""
+                    }`}
+                  />
+                  {runtime.refreshingState ? "刷新中..." : "刷新状态"}
+                </button>
+
+                <button
+                  type="button"
+                  className="rounded-md border px-3 py-1.5 text-xs hover:bg-muted disabled:opacity-60"
+                  onClick={() => void runtime.closeSession()}
+                >
+                  关闭会话
+                </button>
+              </>
+            ) : null}
+          </div>
+
+          <div className="rounded-lg border bg-background/60 p-3">
+            <div className="mb-2 flex items-center justify-between gap-3">
+              <div>
+                <div className="text-xs font-medium">最小人工控制</div>
+                <div className="text-[11px] text-muted-foreground">
+                  适合验证码、短信码、多因素认证和临时异常流程。
+                </div>
+              </div>
+              <div className="text-[11px] text-muted-foreground">
+                {runtime.canDirectControl ? "已启用" : "未启用"}
+              </div>
+            </div>
+
+            <div className="flex flex-wrap gap-2">
+              <input
+                className="min-w-[220px] flex-1 rounded-md border bg-background px-3 py-2 text-sm disabled:cursor-not-allowed disabled:opacity-60"
+                placeholder="把文本发送到当前焦点元素"
+                value={manualInput}
+                disabled={!runtime.canDirectControl || runtime.controlBusy}
+                onChange={(event) => setManualInput(event.target.value)}
+                onKeyDown={(event) => {
+                  if (event.key === "Enter") {
+                    event.preventDefault();
+                    void handleSendManualInput();
+                  }
+                }}
+              />
+              <button
+                type="button"
+                className="inline-flex items-center gap-1 rounded-md border px-3 py-2 text-xs hover:bg-muted disabled:opacity-60"
+                disabled={!runtime.canDirectControl || runtime.controlBusy}
+                onClick={() => void handleSendManualInput()}
+              >
+                <Send className="h-3.5 w-3.5" />
+                发送文本
+              </button>
+              <button
+                type="button"
+                className="rounded-md border px-3 py-2 text-xs hover:bg-muted disabled:opacity-60"
+                disabled={!runtime.canDirectControl || runtime.controlBusy}
+                onClick={() => void runtime.scrollPage("up")}
+              >
+                上滚
+              </button>
+              <button
+                type="button"
+                className="rounded-md border px-3 py-2 text-xs hover:bg-muted disabled:opacity-60"
+                disabled={!runtime.canDirectControl || runtime.controlBusy}
+                onClick={() => void runtime.scrollPage("down")}
+              >
+                下滚
+              </button>
+            </div>
+          </div>
+
+          {showAdvanced ? (
+            <>
+              <div className="grid gap-3 md:grid-cols-2">
+                <label className="space-y-1 text-xs">
+                  <span className="text-muted-foreground">Profile 会话</span>
+                  <select
+                    className="w-full rounded-md border bg-background px-3 py-2 text-sm"
+                    value={runtime.selectedProfileKey}
+                    onChange={(event) =>
+                      runtime.setSelectedProfileKey(event.target.value)
+                    }
+                  >
+                    {sessions.map((session) => (
+                      <option
+                        key={session.profile_key}
+                        value={session.profile_key}
+                      >
+                        {session.profile_key} · PID {session.pid}
+                      </option>
+                    ))}
+                  </select>
+                </label>
+                <label className="space-y-1 text-xs">
+                  <span className="text-muted-foreground">CDP 标签页</span>
+                  <select
+                    className="w-full rounded-md border bg-background px-3 py-2 text-sm"
+                    value={runtime.selectedTargetId}
+                    onChange={(event) =>
+                      runtime.setSelectedTargetId(event.target.value)
+                    }
+                  >
+                    {runtime.targets.length === 0 ? (
+                      <option value="">未发现标签页</option>
+                    ) : (
+                      runtime.targets.map((target) => (
+                        <option key={target.id} value={target.id}>
+                          {target.title || target.url || target.id}
+                        </option>
+                      ))
+                    )}
+                  </select>
+                </label>
+              </div>
+
+              <div className="flex flex-wrap gap-2">
+                <button
+                  type="button"
+                  className="inline-flex items-center gap-1 rounded-md border px-2.5 py-1.5 text-xs hover:bg-muted disabled:opacity-60"
+                  onClick={() => void runtime.refreshTargets()}
+                  disabled={
+                    runtime.loadingTargets || !runtime.selectedProfileKey
+                  }
+                >
+                  <RefreshCw className="h-3.5 w-3.5" />
+                  刷新标签页
+                </button>
+                <button
+                  type="button"
+                  className="rounded-md border px-3 py-1.5 text-xs hover:bg-muted disabled:opacity-60"
+                  onClick={() => void runtime.openSession()}
+                  disabled={
+                    runtime.openingSession || !runtime.selectedProfileKey
+                  }
+                >
+                  {runtime.openingSession ? "打开中..." : "重新附着会话"}
+                </button>
+                <button
+                  type="button"
+                  className="inline-flex items-center gap-1 rounded-md border px-3 py-1.5 text-xs hover:bg-muted disabled:opacity-60"
+                  onClick={() => void handleOpenSystemBrowser()}
+                  disabled={!currentUrl}
+                >
+                  <Globe className="h-3.5 w-3.5" />在 Chrome 中继续
+                </button>
+              </div>
+
+              <div className="grid gap-3 xl:grid-cols-[1.2fr_0.8fr]">
+                <div className="space-y-3">
+                  <div className="rounded-md border p-3 text-xs">
+                    <div className="mb-2 text-sm font-medium">会话信息</div>
+                    <div className="grid gap-2 md:grid-cols-2">
+                      <div>
+                        <span className="text-muted-foreground">Session：</span>
+                        <span className="break-all">
+                          {runtime.sessionState?.session_id || "-"}
+                        </span>
+                      </div>
+                      <div>
+                        <span className="text-muted-foreground">Target：</span>
+                        <span className="break-all">
+                          {runtime.sessionState?.target_id || "-"}
+                        </span>
+                      </div>
+                      <div>
+                        <span className="text-muted-foreground">状态：</span>
+                        <span>
+                          {runtime.sessionState?.lifecycle_state || "-"}
+                        </span>
+                      </div>
+                      <div>
+                        <span className="text-muted-foreground">
+                          控制模式：
+                        </span>
+                        <span>{runtime.sessionState?.control_mode || "-"}</span>
+                      </div>
+                      <div>
+                        <span className="text-muted-foreground">WS：</span>
+                        <span className="break-all">
+                          {runtime.sessionState?.ws_debugger_url || "-"}
+                        </span>
+                      </div>
+                      <div>
+                        <span className="text-muted-foreground">最后帧：</span>
+                        <span>
+                          {runtime.sessionState?.last_frame_at || "-"}
+                        </span>
+                      </div>
+                    </div>
+                  </div>
+                </div>
+
+                <div className="space-y-3">
+                  <div className="rounded-md border p-3">
+                    <div className="mb-2 flex items-center justify-between">
+                      <div className="text-sm font-medium">Console</div>
+                      <div className="text-[11px] text-muted-foreground">
+                        {runtime.consoleEvents.length} 条
+                      </div>
+                    </div>
+                    <div className="max-h-[220px] space-y-2 overflow-auto text-xs">
+                      {runtime.consoleEvents.length === 0 ? (
+                        <div className="text-muted-foreground">
+                          暂无 Console 事件
+                        </div>
+                      ) : (
+                        runtime.consoleEvents.map((event) => (
+                          <div
+                            key={event.sequence}
+                            className="rounded border p-2"
+                          >
+                            <div className="font-medium text-foreground/90">
+                              [
+                              {event.type === "console_message"
+                                ? event.level
+                                : event.type}
+                              ]
+                            </div>
+                            <div className="text-muted-foreground">
+                              {formatEventSubtitle(event)}
+                            </div>
+                          </div>
+                        ))
+                      )}
+                    </div>
+                  </div>
+
+                  <div className="rounded-md border p-3">
+                    <div className="mb-2 flex items-center justify-between">
+                      <div className="text-sm font-medium">Network</div>
+                      <div className="text-[11px] text-muted-foreground">
+                        {runtime.networkEvents.length} 条
+                      </div>
+                    </div>
+                    <div className="max-h-[220px] space-y-2 overflow-auto text-xs">
+                      {runtime.networkEvents.length === 0 ? (
+                        <div className="text-muted-foreground">
+                          暂无 Network 事件
+                        </div>
+                      ) : (
+                        runtime.networkEvents.map((event) => (
+                          <div
+                            key={event.sequence}
+                            className="rounded border p-2"
+                          >
+                            <div className="font-medium text-foreground/90">
+                              {event.type}
+                            </div>
+                            <div className="break-all text-muted-foreground">
+                              {formatEventSubtitle(event)}
+                            </div>
+                          </div>
+                        ))
+                      )}
+                    </div>
+                  </div>
+                </div>
+              </div>
+            </>
+          ) : null}
+        </>
+      )}
+    </div>
+  );
+}
diff --git a/src/features/browser-runtime/BrowserRuntimeWorkspace.test.tsx b/src/features/browser-runtime/BrowserRuntimeWorkspace.test.tsx
new file mode 100644
index 000000000..59acaf9fa
--- /dev/null
+++ b/src/features/browser-runtime/BrowserRuntimeWorkspace.test.tsx
@@ -0,0 +1,177 @@
+import React from "react";
+import { act } from "react";
+import { createRoot, type Root } from "react-dom/client";
+import { afterEach, beforeEach, describe, expect, it, vi } from "vitest";
+import { BrowserRuntimeWorkspace } from "./BrowserRuntimeWorkspace";
+
+const { mockGetChromeProfileSessions } = vi.hoisted(() => ({
+  mockGetChromeProfileSessions: vi.fn(),
+}));
+
+vi.mock("@/lib/webview-api", () => ({
+  getChromeProfileSessions: mockGetChromeProfileSessions,
+}));
+
+vi.mock("./BrowserRuntimeDebugPanel", () => ({
+  BrowserRuntimeDebugPanel: ({
+    sessions,
+    onMessage,
+  }: {
+    sessions: Array<{ profile_key: string }>;
+    onMessage?: (message: { type: "success" | "error"; text: string }) => void;
+  }) => (
+    <div data-testid="browser-runtime-debug-panel">
+      <span>{sessions.length}</span>
+      <button
+        type="button"
+        data-testid="emit-browser-runtime-error"
+        onClick={() =>
+          onMessage?.({
+            type: "error",
+            text: "读取 CDP 标签页失败: 没有可用的 Chrome profile 会话",
+          })
+        }
+      >
+        emit
+      </button>
+    </div>
+  ),
+}));
+
+const mountedRoots: Array<{ root: Root; container: HTMLDivElement }> = [];
+
+beforeEach(() => {
+  (
+    globalThis as typeof globalThis & {
+      IS_REACT_ACT_ENVIRONMENT?: boolean;
+    }
+  ).IS_REACT_ACT_ENVIRONMENT = true;
+  mockGetChromeProfileSessions.mockResolvedValue([]);
+});
+
+afterEach(() => {
+  while (mountedRoots.length > 0) {
+    const mounted = mountedRoots.pop();
+    if (!mounted) break;
+    act(() => {
+      mounted.root.unmount();
+    });
+    mounted.container.remove();
+  }
+  vi.clearAllMocks();
+});
+
+async function renderWorkspace() {
+  const container = document.createElement("div");
+  document.body.appendChild(container);
+  const root = createRoot(container);
+  mountedRoots.push({ root, container });
+  await act(async () => {
+    root.render(<BrowserRuntimeWorkspace />);
+  });
+  await act(async () => {
+    await Promise.resolve();
+  });
+  return container;
+}
+
+async function renderWorkspaceWithProps(
+  props?: Partial<React.ComponentProps<typeof BrowserRuntimeWorkspace>>,
+) {
+  const container = document.createElement("div");
+  document.body.appendChild(container);
+  const root = createRoot(container);
+  mountedRoots.push({ root, container });
+  await act(async () => {
+    root.render(<BrowserRuntimeWorkspace {...props} />);
+  });
+  await act(async () => {
+    await Promise.resolve();
+  });
+  return container;
+}
+
+describe("BrowserRuntimeWorkspace", () => {
+  it("渲染会话数量并把数据透传给调试面板", async () => {
+    mockGetChromeProfileSessions.mockResolvedValueOnce([
+      {
+        profile_key: "search_google",
+        browser_source: "system",
+        browser_path: "/Applications/Google Chrome",
+        profile_dir: "/tmp/profile",
+        remote_debugging_port: 13001,
+        pid: 12345,
+        started_at: "2026-03-14T00:00:00Z",
+        last_url: "https://example.com",
+      },
+    ]);
+
+    const container = await renderWorkspace();
+    expect(container.textContent).toContain("当前运行 Profile");
+    expect(container.textContent).toContain("1");
+    expect(
+      container.querySelector("[data-testid='browser-runtime-debug-panel']")
+        ?.textContent,
+    ).toContain("1");
+  });
+
+  it("未激活时不应启动会话刷新或渲染调试面板", async () => {
+    const container = await renderWorkspaceWithProps({ active: false });
+
+    expect(mockGetChromeProfileSessions).not.toHaveBeenCalled();
+    expect(
+      container.querySelector("[data-testid='browser-runtime-debug-panel']"),
+    ).toBeNull();
+    expect(container.textContent).toBe("");
+  });
+
+  it("嵌入模式应占满父级高度且不再渲染独立标题区", async () => {
+    const container = await renderWorkspaceWithProps({
+      embedded: true,
+      initialProfileKey: "general_browser_assist",
+    });
+
+    const shell = container.firstElementChild as HTMLElement | null;
+    expect(shell?.className).toContain("h-full");
+    expect(shell?.className).toContain("min-h-0");
+    expect(shell?.className).toContain("flex-col");
+    expect(container.textContent).not.toContain("浏览器实时会话");
+  });
+
+  it("嵌入模式错误消息应支持手动关闭，并抑制同类消息立即重复出现", async () => {
+    const container = await renderWorkspaceWithProps({
+      embedded: true,
+      initialProfileKey: "general_browser_assist",
+    });
+
+    const emitButton = container.querySelector(
+      "[data-testid='emit-browser-runtime-error']",
+    ) as HTMLButtonElement | null;
+
+    expect(emitButton).not.toBeNull();
+
+    await act(async () => {
+      emitButton?.click();
+    });
+
+    expect(container.textContent).toContain("读取 CDP 标签页失败");
+
+    const closeButton = container.querySelector(
+      'button[aria-label="关闭消息"]',
+    ) as HTMLButtonElement | null;
+
+    expect(closeButton).not.toBeNull();
+
+    await act(async () => {
+      closeButton?.click();
+    });
+
+    expect(container.textContent).not.toContain("读取 CDP 标签页失败");
+
+    await act(async () => {
+      emitButton?.click();
+    });
+
+    expect(container.textContent).not.toContain("读取 CDP 标签页失败");
+  });
+});
diff --git a/src/features/browser-runtime/BrowserRuntimeWorkspace.tsx b/src/features/browser-runtime/BrowserRuntimeWorkspace.tsx
new file mode 100644
index 000000000..68750ff30
--- /dev/null
+++ b/src/features/browser-runtime/BrowserRuntimeWorkspace.tsx
@@ -0,0 +1,221 @@
+import { useCallback, useEffect, useRef, useState } from "react";
+import { RefreshCw, X } from "lucide-react";
+import {
+  getChromeProfileSessions,
+  type ChromeProfileSessionInfo,
+} from "@/lib/webview-api";
+import { BrowserRuntimeDebugPanel } from "./BrowserRuntimeDebugPanel";
+
+const MESSAGE_AUTO_HIDE_MS = 3000;
+const MESSAGE_DISMISS_SUPPRESS_MS = 12000;
+
+type RuntimeMessage = {
+  type: "success" | "error";
+  text: string;
+};
+
+function createMessageKey(message: RuntimeMessage) {
+  return `${message.type}:${message.text}`;
+}
+
+interface BrowserRuntimeWorkspaceProps {
+  standalone?: boolean;
+  initialProfileKey?: string;
+  initialSessionId?: string;
+  initialTargetId?: string;
+  embedded?: boolean;
+  active?: boolean;
+}
+
+export function BrowserRuntimeWorkspace(props: BrowserRuntimeWorkspaceProps) {
+  const {
+    standalone = false,
+    initialProfileKey,
+    initialSessionId,
+    initialTargetId,
+    embedded = false,
+    active = true,
+  } = props;
+  const shouldActivate = standalone || embedded || active;
+  const [sessions, setSessions] = useState<ChromeProfileSessionInfo[]>([]);
+  const [refreshing, setRefreshing] = useState(false);
+  const [message, setMessage] = useState<RuntimeMessage | null>(null);
+  const messageRef = useRef<RuntimeMessage | null>(null);
+  const dismissedMessageRef = useRef<{
+    key: string;
+    expiresAt: number;
+  } | null>(null);
+
+  useEffect(() => {
+    messageRef.current = message;
+  }, [message]);
+
+  const showMessage = useCallback((nextMessage: RuntimeMessage) => {
+    const dismissedMessage = dismissedMessageRef.current;
+    const nextMessageKey = createMessageKey(nextMessage);
+
+    if (
+      dismissedMessage &&
+      dismissedMessage.key === nextMessageKey &&
+      dismissedMessage.expiresAt > Date.now()
+    ) {
+      return;
+    }
+
+    const currentMessage = messageRef.current;
+    if (
+      currentMessage &&
+      createMessageKey(currentMessage) === nextMessageKey
+    ) {
+      return;
+    }
+
+    setMessage(nextMessage);
+  }, []);
+
+  const handleDismissMessage = useCallback(() => {
+    const currentMessage = messageRef.current;
+    if (!currentMessage) {
+      return;
+    }
+
+    dismissedMessageRef.current = {
+      key: createMessageKey(currentMessage),
+      expiresAt: Date.now() + MESSAGE_DISMISS_SUPPRESS_MS,
+    };
+    setMessage(null);
+  }, []);
+
+  const refreshSessions = useCallback(async (silent = false) => {
+    if (!silent) {
+      setRefreshing(true);
+    }
+    try {
+      const next = await getChromeProfileSessions();
+      setSessions(next);
+    } catch (error) {
+      showMessage({
+        type: "error",
+        text: `刷新浏览器会话失败: ${
+          error instanceof Error ? error.message : String(error)
+        }`,
+      });
+    } finally {
+      if (!silent) {
+        setRefreshing(false);
+      }
+    }
+  }, [showMessage]);
+
+  useEffect(() => {
+    if (!shouldActivate) {
+      return;
+    }
+
+    void refreshSessions(true);
+    const pollInterval =
+      initialSessionId || initialProfileKey || embedded ? 1500 : 15000;
+    const timer = window.setInterval(() => {
+      void refreshSessions(true);
+    }, pollInterval);
+    return () => window.clearInterval(timer);
+  }, [
+    embedded,
+    initialProfileKey,
+    initialSessionId,
+    refreshSessions,
+    shouldActivate,
+  ]);
+
+  useEffect(() => {
+    if (!message) return;
+    const timer = window.setTimeout(() => setMessage(null), MESSAGE_AUTO_HIDE_MS);
+    return () => window.clearTimeout(timer);
+  }, [message]);
+
+  if (!shouldActivate) {
+    return null;
+  }
+
+  const rootClassName = standalone
+    ? "min-h-screen bg-background p-6"
+    : embedded
+      ? "relative flex h-full min-h-0 flex-col bg-background"
+      : "space-y-4";
+  const messageClassName = embedded
+    ? `absolute left-3 right-3 top-3 z-20 rounded-xl border px-3 py-2.5 text-sm shadow-lg shadow-slate-950/10 backdrop-blur ${
+        message?.type === "error"
+          ? "border-destructive bg-destructive/95 text-destructive-foreground"
+          : "border-green-500 bg-green-600/95 text-white"
+      }`
+    : `rounded-md border px-3 py-2 text-sm ${
+        message?.type === "error"
+          ? "border-destructive bg-destructive/10 text-destructive"
+          : "border-green-500 bg-green-50 text-green-700 dark:bg-green-900/20 dark:text-green-400"
+      }`;
+
+  return (
+    <div className={rootClassName}>
+      {!embedded ? (
+        <div className="rounded-lg border p-5 space-y-3">
+          <div className="flex items-center justify-between gap-3">
+            <div>
+              <h2 className="text-base font-semibold">浏览器实时会话</h2>
+              <p className="text-sm text-muted-foreground">
+                统一管理实时画面、人工接管、会话状态与高级调试信息。
+              </p>
+            </div>
+            <button
+              type="button"
+              onClick={() => void refreshSessions(false)}
+              disabled={refreshing}
+              className="inline-flex items-center gap-2 rounded-md border px-3 py-2 text-sm hover:bg-muted disabled:opacity-60"
+            >
+              <RefreshCw
+                className={`h-3.5 w-3.5 ${refreshing ? "animate-spin" : ""}`}
+              />
+              刷新会话
+            </button>
+          </div>
+
+          <div className="text-xs text-muted-foreground">
+            当前运行 Profile：
+            <span className="ml-1 font-medium text-foreground">
+              {sessions.length}
+            </span>
+            个
+          </div>
+        </div>
+      ) : null}
+
+      {message ? (
+        <div className={messageClassName} role="alert">
+          <div className="flex items-start gap-3">
+            <div className="min-w-0 flex-1 leading-5">{message.text}</div>
+            <button
+              type="button"
+              onClick={handleDismissMessage}
+              className="inline-flex h-6 w-6 shrink-0 items-center justify-center rounded-md text-current/80 transition hover:bg-black/10 hover:text-current"
+              aria-label="关闭消息"
+              title="关闭"
+            >
+              <X className="h-3.5 w-3.5" />
+            </button>
+          </div>
+        </div>
+      ) : null}
+
+      <div className={embedded ? "min-h-0 flex-1" : undefined}>
+        <BrowserRuntimeDebugPanel
+          sessions={sessions}
+          onMessage={showMessage}
+          showStandaloneWindowButton={!standalone}
+          initialProfileKey={initialProfileKey}
+          initialSessionId={initialSessionId}
+          initialTargetId={initialTargetId}
+          embedded={embedded}
+        />
+      </div>
+    </div>
+  );
+}
diff --git a/src/features/browser-runtime/api.ts b/src/features/browser-runtime/api.ts
new file mode 100644
index 000000000..41e3b6002
--- /dev/null
+++ b/src/features/browser-runtime/api.ts
@@ -0,0 +1,62 @@
+import {
+  browserExecuteAction,
+  type OpenChromeProfileResponse,
+  openChromeProfileWindow,
+  closeCdpSession,
+  getBrowserEventBuffer,
+  getBrowserSessionState,
+  launchBrowserRuntimeAssist,
+  listCdpTargets,
+  openBrowserRuntimeDebuggerWindow,
+  openCdpSession,
+  releaseBrowserSession,
+  resumeBrowserSession,
+  startBrowserStream,
+  stopBrowserStream,
+  takeOverBrowserSession,
+  type BrowserEvent,
+  type BrowserEventBufferSnapshot,
+  type BrowserControlMode,
+  type BrowserSessionLifecycleState,
+  type BrowserStreamMode,
+  type BrowserTransportKind,
+  type CdpSessionState,
+  type CdpTargetInfo,
+} from "@/lib/webview-api";
+import {
+  hasNativeTauriEventSupport,
+  safeListen,
+} from "@/lib/dev-bridge/safeInvoke";
+
+export type {
+  BrowserEvent,
+  BrowserEventBufferSnapshot,
+  BrowserControlMode,
+  BrowserSessionLifecycleState,
+  BrowserStreamMode,
+  BrowserTransportKind,
+  CdpSessionState,
+  CdpTargetInfo,
+  OpenChromeProfileResponse,
+};
+
+export const browserRuntimeApi = {
+  listCdpTargets,
+  openCdpSession,
+  closeCdpSession,
+  startBrowserStream,
+  stopBrowserStream,
+  getBrowserSessionState,
+  takeOverBrowserSession,
+  releaseBrowserSession,
+  resumeBrowserSession,
+  getBrowserEventBuffer,
+  openBrowserRuntimeDebuggerWindow,
+  launchBrowserRuntimeAssist,
+  browserExecuteAction,
+  reopenProfileWindow: (params: { profile_key: string; url: string }) =>
+    openChromeProfileWindow(params),
+  listenBrowserEvent: (handler: (event: { payload: BrowserEvent }) => void) =>
+    safeListen<BrowserEvent>("browser-event", handler),
+  supportsNativeEvents: () => hasNativeTauriEventSupport(),
+};
diff --git a/src/features/browser-runtime/index.ts b/src/features/browser-runtime/index.ts
new file mode 100644
index 000000000..e16c58706
--- /dev/null
+++ b/src/features/browser-runtime/index.ts
@@ -0,0 +1,2 @@
+export { BrowserRuntimeDebugPanel } from "./BrowserRuntimeDebugPanel";
+export { BrowserRuntimeWorkspace } from "./BrowserRuntimeWorkspace";
diff --git a/src/features/browser-runtime/useBrowserRuntimeDebug.test.tsx b/src/features/browser-runtime/useBrowserRuntimeDebug.test.tsx
new file mode 100644
index 000000000..1a001f4c2
--- /dev/null
+++ b/src/features/browser-runtime/useBrowserRuntimeDebug.test.tsx
@@ -0,0 +1,192 @@
+import React from "react";
+import { afterEach, describe, expect, it, vi } from "vitest";
+import { act } from "react";
+import { useBrowserRuntimeDebug } from "./useBrowserRuntimeDebug";
+import {
+  cleanupMountedRoots,
+  mountHarness,
+  setupReactActEnvironment,
+  type MountedRoot,
+} from "@/components/workspace/hooks/testUtils";
+
+const {
+  mockBrowserRuntimeApi,
+  browserEventHandlerRef,
+} = vi.hoisted(() => ({
+  mockBrowserRuntimeApi: {
+    listCdpTargets: vi.fn(),
+    openCdpSession: vi.fn(),
+    closeCdpSession: vi.fn(),
+    startBrowserStream: vi.fn(),
+    stopBrowserStream: vi.fn(),
+    getBrowserSessionState: vi.fn(),
+    takeOverBrowserSession: vi.fn(),
+    releaseBrowserSession: vi.fn(),
+    resumeBrowserSession: vi.fn(),
+    getBrowserEventBuffer: vi.fn(),
+    openBrowserRuntimeDebuggerWindow: vi.fn(),
+    launchBrowserRuntimeAssist: vi.fn(),
+    browserExecuteAction: vi.fn(),
+    reopenProfileWindow: vi.fn(),
+    listenBrowserEvent: vi.fn(),
+    supportsNativeEvents: vi.fn(),
+  },
+  browserEventHandlerRef: {
+    current: null as null | ((event: { payload: any }) => void),
+  },
+}));
+
+vi.mock("./api", () => ({
+  browserRuntimeApi: {
+    ...mockBrowserRuntimeApi,
+  },
+}));
+
+setupReactActEnvironment();
+
+const mountedRoots: MountedRoot[] = [];
+
+function HookHarness(props: {
+  sessions: Array<{ profile_key: string; last_url?: string }>;
+  onMessage?: (message: { type: "success" | "error"; text: string }) => void;
+}) {
+  const runtime = useBrowserRuntimeDebug(props.sessions as any, props.onMessage, {
+    initialProfileKey: "general_browser_assist",
+    initialSessionId: "session-old",
+  });
+
+  return (
+    <div
+      data-testid="runtime-hook"
+      data-session-id={runtime.sessionState?.session_id || ""}
+      data-target-url={runtime.sessionState?.target_url || ""}
+      data-streaming={runtime.streaming ? "true" : "false"}
+    />
+  );
+}
+
+describe("useBrowserRuntimeDebug", () => {
+  afterEach(() => {
+    cleanupMountedRoots(mountedRoots);
+    browserEventHandlerRef.current = null;
+    vi.clearAllMocks();
+  });
+
+  it("浏览器连接被外部关闭后应自动重新拉起并恢复会话", async () => {
+    mockBrowserRuntimeApi.supportsNativeEvents.mockReturnValue(true);
+    mockBrowserRuntimeApi.listenBrowserEvent.mockImplementation(
+      (handler: (event: { payload: any }) => void) => {
+        browserEventHandlerRef.current = handler;
+        return Promise.resolve(() => undefined);
+      },
+    );
+    mockBrowserRuntimeApi.getBrowserSessionState.mockResolvedValue({
+      session_id: "session-old",
+      profile_key: "general_browser_assist",
+      target_id: "target-old",
+      target_title: "旧页面",
+      target_url: "https://news.baidu.com/",
+      remote_debugging_port: 16312,
+      ws_debugger_url: "ws://127.0.0.1:16312/devtools/page/old",
+      stream_mode: "both",
+      transport_kind: "cdp_frames",
+      lifecycle_state: "live",
+      control_mode: "agent",
+      created_at: "2026-03-14T00:00:00Z",
+      connected: true,
+      last_page_info: {
+        title: "旧页面",
+        url: "https://news.baidu.com/",
+        markdown: "",
+        updated_at: "2026-03-14T00:00:01Z",
+      },
+    });
+    mockBrowserRuntimeApi.getBrowserEventBuffer.mockResolvedValue({
+      events: [],
+      next_cursor: 0,
+    });
+    mockBrowserRuntimeApi.listCdpTargets.mockResolvedValue([]);
+    mockBrowserRuntimeApi.launchBrowserRuntimeAssist.mockResolvedValue({
+      profile: {
+        success: true,
+        reused: false,
+        browser_source: "chrome",
+        browser_path: "/Applications/Google Chrome.app/Contents/MacOS/Google Chrome",
+        profile_dir: "/tmp/general_browser_assist",
+        remote_debugging_port: 16312,
+        pid: 12345,
+        devtools_http_url: "http://127.0.0.1:16312/json/version",
+        error: null,
+      },
+      session: {
+        session_id: "session-new",
+        profile_key: "general_browser_assist",
+        target_id: "target-new",
+        target_title: "恢复后的页面",
+        target_url: "https://news.baidu.com/",
+        remote_debugging_port: 16312,
+        ws_debugger_url: "ws://127.0.0.1:16312/devtools/page/new",
+        stream_mode: "both",
+        transport_kind: "cdp_frames",
+        lifecycle_state: "live",
+        control_mode: "agent",
+        created_at: "2026-03-14T00:01:00Z",
+        connected: true,
+      },
+    });
+
+    const onMessage = vi.fn();
+    const { container } = mountHarness(
+      HookHarness,
+      {
+        sessions: [
+          {
+            profile_key: "general_browser_assist",
+            last_url: "https://news.baidu.com/",
+          },
+        ],
+        onMessage,
+      },
+      mountedRoots,
+    );
+
+    await act(async () => {
+      await Promise.resolve();
+      await Promise.resolve();
+    });
+
+    await act(async () => {
+      browserEventHandlerRef.current?.({
+        payload: {
+          session_id: "session-old",
+          sequence: 2,
+          occurred_at: "2026-03-14T00:01:10Z",
+          type: "session_error",
+          error: "读取 CDP 消息失败: IO error: Connection reset by peer (os error 54)",
+        },
+      });
+      await Promise.resolve();
+      await Promise.resolve();
+    });
+
+    expect(mockBrowserRuntimeApi.launchBrowserRuntimeAssist).toHaveBeenCalledWith(
+      expect.objectContaining({
+        profile_key: "general_browser_assist",
+        url: "https://news.baidu.com/",
+        open_window: false,
+        stream_mode: "both",
+      }),
+    );
+    expect(
+      container.querySelector("[data-testid='runtime-hook']")?.getAttribute(
+        "data-session-id",
+      ),
+    ).toBe("session-new");
+    expect(onMessage).toHaveBeenCalledWith(
+      expect.objectContaining({
+        type: "success",
+        text: expect.stringContaining("已自动重新启动并恢复会话"),
+      }),
+    );
+  });
+});
diff --git a/src/features/browser-runtime/useBrowserRuntimeDebug.ts b/src/features/browser-runtime/useBrowserRuntimeDebug.ts
new file mode 100644
index 000000000..7e00fdc06
--- /dev/null
+++ b/src/features/browser-runtime/useBrowserRuntimeDebug.ts
@@ -0,0 +1,876 @@
+import { useCallback, useEffect, useMemo, useRef, useState } from "react";
+import type {
+  BrowserEvent,
+  BrowserSessionLifecycleState,
+  BrowserStreamMode,
+  ChromeProfileSessionInfo,
+  CdpSessionState,
+  CdpTargetInfo,
+} from "@/lib/webview-api";
+import { browserRuntimeApi } from "./api";
+
+const MAX_CONSOLE_EVENTS = 80;
+const MAX_NETWORK_EVENTS = 120;
+const AUTO_RECOVERY_COOLDOWN_MS = 1500;
+
+const RECOVERABLE_BROWSER_ERROR_PATTERNS = [
+  "connection reset by peer",
+  "broken pipe",
+  "socket_error",
+  "socket closed",
+  "socket_closed",
+  "读取 cdp 消息失败",
+  "没有可用的 chrome profile 会话",
+  "未找到 profile_key",
+];
+
+type StatusMessage = {
+  type: "success" | "error";
+  text: string;
+};
+
+type LatestFrameMetadata = Extract<
+  BrowserEvent,
+  { type: "frame_chunk" }
+>["metadata"];
+
+function appendCapped<T>(items: T[], next: T, limit: number): T[] {
+  const merged = [...items, next];
+  if (merged.length <= limit) {
+    return merged;
+  }
+  return merged.slice(merged.length - limit);
+}
+
+function normalizeRuntimeErrorMessage(error: unknown): string {
+  return error instanceof Error ? error.message : String(error);
+}
+
+function isRecoverableBrowserError(error: unknown): boolean {
+  const normalized = normalizeRuntimeErrorMessage(error).toLowerCase();
+  return RECOVERABLE_BROWSER_ERROR_PATTERNS.some((pattern) =>
+    normalized.includes(pattern),
+  );
+}
+
+function reduceSessionStateWithEvent(
+  previous: CdpSessionState | null,
+  event: BrowserEvent,
+): CdpSessionState | null {
+  if (!previous) {
+    return previous;
+  }
+
+  const nextBase: CdpSessionState = {
+    ...previous,
+    last_event_at: event.occurred_at,
+  };
+
+  switch (event.type) {
+    case "frame_chunk":
+      return {
+        ...nextBase,
+        last_frame_at: event.occurred_at,
+      };
+    case "page_info_changed":
+      return {
+        ...nextBase,
+        target_title: event.title,
+        target_url: event.url,
+        last_page_info: {
+          title: event.title,
+          url: event.url,
+          markdown: event.markdown,
+          updated_at: event.occurred_at,
+        },
+      };
+    case "session_state_changed":
+      return {
+        ...nextBase,
+        lifecycle_state: event.lifecycle_state,
+        control_mode: event.control_mode,
+        human_reason: event.human_reason,
+      };
+    case "session_error":
+      return {
+        ...nextBase,
+        last_error: event.error,
+      };
+    case "session_closed":
+      return {
+        ...nextBase,
+        connected: false,
+        lifecycle_state:
+          previous.lifecycle_state === "failed" ? "failed" : "closed",
+      };
+    default:
+      return nextBase;
+  }
+}
+
+export function useBrowserRuntimeDebug(
+  sessions: ChromeProfileSessionInfo[],
+  onMessage?: (message: StatusMessage) => void,
+  options?: {
+    initialProfileKey?: string;
+    initialSessionId?: string;
+    initialTargetId?: string;
+  },
+) {
+  const initialProfileKey = options?.initialProfileKey ?? "";
+  const initialSessionId = options?.initialSessionId ?? "";
+  const initialTargetId = options?.initialTargetId ?? "";
+  const [selectedProfileKey, setSelectedProfileKey] = useState<string>("");
+  const [selectedTargetId, setSelectedTargetId] = useState<string>("");
+  const [targets, setTargets] = useState<CdpTargetInfo[]>([]);
+  const [sessionState, setSessionState] = useState<CdpSessionState | null>(
+    null,
+  );
+  const [latestFrame, setLatestFrame] = useState<string | null>(null);
+  const [latestFrameMetadata, setLatestFrameMetadata] =
+    useState<LatestFrameMetadata | null>(null);
+  const [consoleEvents, setConsoleEvents] = useState<BrowserEvent[]>([]);
+  const [networkEvents, setNetworkEvents] = useState<BrowserEvent[]>([]);
+  const [_eventCursor, setEventCursor] = useState<number>(0);
+  const [loadingTargets, setLoadingTargets] = useState(false);
+  const [openingSession, setOpeningSession] = useState(false);
+  const [streaming, setStreaming] = useState(false);
+  const [refreshingState, setRefreshingState] = useState(false);
+  const [controlBusy, setControlBusy] = useState(false);
+  const eventCursorRef = useRef<number>(0);
+  const autoAttachedSessionRef = useRef<string>("");
+  const autoOpenedProfileRef = useRef<string>("");
+  const recoveryInFlightRef = useRef<Promise<boolean> | null>(null);
+  const lastRecoveryAtRef = useRef<number>(0);
+  const lastRecoveredErrorKeyRef = useRef<string>("");
+  const lastRecoveredSessionIdRef = useRef<string>("");
+
+  useEffect(() => {
+    if (!selectedTargetId && initialTargetId) {
+      setSelectedTargetId(initialTargetId);
+    }
+  }, [initialTargetId, selectedTargetId]);
+
+  useEffect(() => {
+    const pinnedProfileKey = sessionState?.profile_key || initialProfileKey;
+    if (!selectedProfileKey && pinnedProfileKey) {
+      setSelectedProfileKey(pinnedProfileKey);
+      return;
+    }
+
+    if (sessions.length === 0) {
+      if (!initialSessionId && !sessionState?.session_id) {
+        setTargets([]);
+      }
+      return;
+    }
+
+    if (!selectedProfileKey) {
+      setSelectedProfileKey(sessions[0].profile_key);
+      return;
+    }
+
+    const hasSelectedSession = sessions.some(
+      (session) => session.profile_key === selectedProfileKey,
+    );
+    if (!hasSelectedSession && !initialSessionId && !sessionState?.session_id) {
+      setSelectedProfileKey(sessions[0].profile_key);
+      setTargets([]);
+    }
+  }, [
+    initialProfileKey,
+    initialSessionId,
+    selectedProfileKey,
+    sessionState?.profile_key,
+    sessionState?.session_id,
+    sessions,
+  ]);
+
+  const selectedSession = useMemo(
+    () =>
+      sessions.find((session) => session.profile_key === selectedProfileKey) ||
+      null,
+    [selectedProfileKey, sessions],
+  );
+
+  const emitMessage = useCallback(
+    (message: StatusMessage) => {
+      onMessage?.(message);
+    },
+    [onMessage],
+  );
+
+  const applyEvent = useCallback((event: BrowserEvent) => {
+    setSessionState((previous) => reduceSessionStateWithEvent(previous, event));
+    if (event.type === "frame_chunk") {
+      setLatestFrame(event.data);
+      setLatestFrameMetadata(event.metadata);
+      return;
+    }
+    if (event.type === "console_message") {
+      setConsoleEvents((items) =>
+        appendCapped(items, event, MAX_CONSOLE_EVENTS),
+      );
+      return;
+    }
+    if (
+      event.type === "network_request" ||
+      event.type === "network_response" ||
+      event.type === "network_failed"
+    ) {
+      setNetworkEvents((items) =>
+        appendCapped(items, event, MAX_NETWORK_EVENTS),
+      );
+      return;
+    }
+    if (event.type === "session_closed") {
+      setStreaming(false);
+      return;
+    }
+    if (event.type === "session_state_changed") {
+      if (
+        event.lifecycle_state === "closed" ||
+        event.lifecycle_state === "failed"
+      ) {
+        setStreaming(false);
+      }
+    }
+  }, []);
+
+  const syncBuffer = useCallback(
+    async (sessionId: string, cursor?: number) => {
+      const snapshot = await browserRuntimeApi.getBrowserEventBuffer({
+        session_id: sessionId,
+        cursor,
+      });
+      eventCursorRef.current = snapshot.next_cursor;
+      setEventCursor(snapshot.next_cursor);
+      for (const event of snapshot.events) {
+        applyEvent(event);
+      }
+      return snapshot;
+    },
+    [applyEvent],
+  );
+
+  const recoverBrowserSession = useCallback(
+    async (reason: string) => {
+      const profileKey =
+        sessionState?.profile_key || selectedProfileKey || initialProfileKey;
+      if (!profileKey) {
+        return false;
+      }
+
+      const url =
+        sessionState?.last_page_info?.url ||
+        sessionState?.target_url ||
+        selectedSession?.last_url ||
+        "https://www.google.com/";
+      const now = Date.now();
+
+      if (recoveryInFlightRef.current) {
+        return recoveryInFlightRef.current;
+      }
+
+      if (now - lastRecoveryAtRef.current < AUTO_RECOVERY_COOLDOWN_MS) {
+        return false;
+      }
+
+      lastRecoveryAtRef.current = now;
+      const recoveryTask = (async () => {
+        setOpeningSession(true);
+        setRefreshingState(true);
+        setControlBusy(false);
+        setConsoleEvents([]);
+        setNetworkEvents([]);
+        setLatestFrame(null);
+        setLatestFrameMetadata(null);
+        setTargets([]);
+        eventCursorRef.current = 0;
+        setEventCursor(0);
+        setSessionState((previous) =>
+          previous ? { ...previous, last_error: undefined } : previous,
+        );
+
+        try {
+          const result = await browserRuntimeApi.launchBrowserRuntimeAssist({
+            profile_key: profileKey,
+            url,
+            open_window: false,
+            stream_mode: "both",
+          });
+          setSelectedProfileKey(result.session.profile_key);
+          setSelectedTargetId(result.session.target_id || "");
+          setSessionState(result.session);
+          setStreaming(Boolean(result.session.stream_mode));
+          await syncBuffer(result.session.session_id, 0);
+
+          try {
+            const nextTargets = await browserRuntimeApi.listCdpTargets(
+              result.session.profile_key,
+            );
+            setTargets(nextTargets);
+          } catch {
+            setTargets([]);
+          }
+
+          emitMessage({
+            type: "success",
+            text: "检测到浏览器已关闭，已自动重新启动并恢复会话",
+          });
+          return true;
+        } catch (error) {
+          emitMessage({
+            type: "error",
+            text: `${reason}，自动恢复失败: ${normalizeRuntimeErrorMessage(error)}`,
+          });
+          return false;
+        } finally {
+          recoveryInFlightRef.current = null;
+          setOpeningSession(false);
+          setRefreshingState(false);
+        }
+      })();
+
+      recoveryInFlightRef.current = recoveryTask;
+      return recoveryTask;
+    },
+    [
+      emitMessage,
+      initialProfileKey,
+      selectedProfileKey,
+      selectedSession?.last_url,
+      sessionState,
+      syncBuffer,
+    ],
+  );
+
+  const handleRecoverableError = useCallback(
+    async (error: unknown, reason: string) => {
+      if (!isRecoverableBrowserError(error)) {
+        return false;
+      }
+      return recoverBrowserSession(reason);
+    },
+    [recoverBrowserSession],
+  );
+
+  const ensureSessionStream = useCallback(
+    async (nextState: CdpSessionState, mode: BrowserStreamMode = "both") => {
+      if (nextState.stream_mode) {
+        setStreaming(true);
+        return nextState;
+      }
+      const started = await browserRuntimeApi.startBrowserStream({
+        session_id: nextState.session_id,
+        mode,
+      });
+      setSessionState(started);
+      setStreaming(true);
+      return started;
+    },
+    [],
+  );
+
+  const refreshTargets = useCallback(async () => {
+    if (!selectedProfileKey) return;
+    setLoadingTargets(true);
+    try {
+      const nextTargets =
+        await browserRuntimeApi.listCdpTargets(selectedProfileKey);
+      setTargets(nextTargets);
+      const nextSelectedTargetId =
+        nextTargets.find((target) => target.id === selectedTargetId)?.id ||
+        nextTargets.find((target) => target.id === initialTargetId)?.id ||
+        nextTargets[0]?.id ||
+        "";
+      if (nextSelectedTargetId !== selectedTargetId) {
+        setSelectedTargetId(nextSelectedTargetId);
+      }
+    } catch (error) {
+      if (await handleRecoverableError(error, "检测到浏览器标签页已失效")) {
+        return;
+      }
+      emitMessage({
+        type: "error",
+        text: `读取 CDP 标签页失败: ${normalizeRuntimeErrorMessage(error)}`,
+      });
+    } finally {
+      setLoadingTargets(false);
+    }
+  }, [
+    emitMessage,
+    handleRecoverableError,
+    initialTargetId,
+    selectedProfileKey,
+    selectedTargetId,
+  ]);
+
+  useEffect(() => {
+    if (!selectedProfileKey) return;
+    void refreshTargets();
+  }, [refreshTargets, selectedProfileKey]);
+
+  useEffect(() => {
+    if (!initialSessionId) return;
+    if (autoAttachedSessionRef.current === initialSessionId) return;
+    autoAttachedSessionRef.current = initialSessionId;
+
+    const attach = async () => {
+      try {
+        setRefreshingState(true);
+        let nextState =
+          await browserRuntimeApi.getBrowserSessionState(initialSessionId);
+        setSessionState(nextState);
+        setSelectedProfileKey(nextState.profile_key);
+        setSelectedTargetId(nextState.target_id || initialTargetId);
+        setStreaming(Boolean(nextState.stream_mode));
+        nextState = await ensureSessionStream(nextState);
+        await syncBuffer(nextState.session_id, 0);
+      } catch (error) {
+        if (await handleRecoverableError(error, "附着浏览器会话失败")) {
+          return;
+        }
+        emitMessage({
+          type: "error",
+          text: `附着浏览器会话失败: ${normalizeRuntimeErrorMessage(error)}`,
+        });
+      } finally {
+        setRefreshingState(false);
+      }
+    };
+
+    void attach();
+  }, [
+    emitMessage,
+    ensureSessionStream,
+    handleRecoverableError,
+    initialSessionId,
+    initialTargetId,
+    syncBuffer,
+  ]);
+
+  const openSession = useCallback(async () => {
+    if (!selectedProfileKey) return;
+    setOpeningSession(true);
+    try {
+      setConsoleEvents([]);
+      setNetworkEvents([]);
+      setLatestFrame(null);
+      setLatestFrameMetadata(null);
+      eventCursorRef.current = 0;
+      setEventCursor(0);
+      let nextState = await browserRuntimeApi.openCdpSession({
+        profile_key: selectedProfileKey,
+        target_id: selectedTargetId || undefined,
+      });
+      setSessionState(nextState);
+      nextState = await ensureSessionStream(nextState);
+      await syncBuffer(nextState.session_id);
+      emitMessage({
+        type: "success",
+        text: `浏览器实时会话已连接：${nextState.target_title || nextState.target_url}`,
+      });
+    } catch (error) {
+      if (await handleRecoverableError(error, "打开 CDP 会话失败")) {
+        return;
+      }
+      emitMessage({
+        type: "error",
+        text: `打开 CDP 会话失败: ${normalizeRuntimeErrorMessage(error)}`,
+      });
+    } finally {
+      setOpeningSession(false);
+    }
+  }, [
+    emitMessage,
+    ensureSessionStream,
+    handleRecoverableError,
+    selectedProfileKey,
+    selectedTargetId,
+    syncBuffer,
+  ]);
+
+  useEffect(() => {
+    if (initialSessionId || sessionState?.session_id || openingSession) {
+      return;
+    }
+
+    const profileKey = selectedProfileKey || initialProfileKey;
+    if (!profileKey) {
+      return;
+    }
+
+    if (!sessions.some((session) => session.profile_key === profileKey)) {
+      return;
+    }
+
+    if (autoOpenedProfileRef.current === profileKey) {
+      return;
+    }
+
+    autoOpenedProfileRef.current = profileKey;
+    void openSession();
+  }, [
+    initialProfileKey,
+    initialSessionId,
+    openSession,
+    openingSession,
+    selectedProfileKey,
+    sessionState?.session_id,
+    sessions,
+  ]);
+
+  const refreshSessionState = useCallback(async () => {
+    if (!sessionState?.session_id) return;
+    setRefreshingState(true);
+    try {
+      const nextState = await browserRuntimeApi.getBrowserSessionState(
+        sessionState.session_id,
+      );
+      setSessionState(nextState);
+      setStreaming(Boolean(nextState.stream_mode));
+      await syncBuffer(nextState.session_id, eventCursorRef.current);
+    } catch (error) {
+      if (await handleRecoverableError(error, "刷新浏览器会话失败")) {
+        return;
+      }
+      emitMessage({
+        type: "error",
+        text: `刷新会话状态失败: ${normalizeRuntimeErrorMessage(error)}`,
+      });
+    } finally {
+      setRefreshingState(false);
+    }
+  }, [emitMessage, handleRecoverableError, sessionState?.session_id, syncBuffer]);
+
+  const startStream = useCallback(
+    async (mode: BrowserStreamMode = "both") => {
+      if (!sessionState?.session_id) {
+        emitMessage({ type: "error", text: "请先打开 CDP 会话" });
+        return;
+      }
+      try {
+        const nextState = await browserRuntimeApi.startBrowserStream({
+          session_id: sessionState.session_id,
+          mode,
+        });
+        setSessionState(nextState);
+        setStreaming(true);
+        emitMessage({
+          type: "success",
+          text: mode === "frames" ? "已启动画面流" : "已启动浏览器事件流",
+        });
+      } catch (error) {
+        if (await handleRecoverableError(error, "启动浏览器流失败")) {
+          return;
+        }
+        emitMessage({
+          type: "error",
+          text: `启动浏览器流失败: ${normalizeRuntimeErrorMessage(error)}`,
+        });
+      }
+    },
+    [emitMessage, handleRecoverableError, sessionState],
+  );
+
+  const stopStream = useCallback(async () => {
+    if (!sessionState?.session_id) return;
+    try {
+      const nextState = await browserRuntimeApi.stopBrowserStream(
+        sessionState.session_id,
+      );
+      setSessionState(nextState);
+      setStreaming(false);
+      emitMessage({ type: "success", text: "浏览器流已停止" });
+    } catch (error) {
+      emitMessage({
+        type: "error",
+        text: `停止浏览器流失败: ${error instanceof Error ? error.message : String(error)}`,
+      });
+    }
+  }, [emitMessage, sessionState]);
+
+  const closeSession = useCallback(async () => {
+    if (!sessionState?.session_id) return;
+    try {
+      await browserRuntimeApi.closeCdpSession(sessionState.session_id);
+      setSessionState(null);
+      setStreaming(false);
+      setConsoleEvents([]);
+      setNetworkEvents([]);
+      setLatestFrame(null);
+      setLatestFrameMetadata(null);
+      eventCursorRef.current = 0;
+      setEventCursor(0);
+      emitMessage({ type: "success", text: "CDP 会话已关闭" });
+    } catch (error) {
+      emitMessage({
+        type: "error",
+        text: `关闭 CDP 会话失败: ${error instanceof Error ? error.message : String(error)}`,
+      });
+    }
+  }, [emitMessage, sessionState]);
+
+  const takeOverSession = useCallback(
+    async (humanReason?: string) => {
+      if (!sessionState?.session_id) {
+        emitMessage({ type: "error", text: "当前没有可接管的浏览器会话" });
+        return;
+      }
+      setControlBusy(true);
+      try {
+        let nextState = await browserRuntimeApi.takeOverBrowserSession({
+          session_id: sessionState.session_id,
+          human_reason: humanReason ?? "已进入人工接管",
+        });
+        setSessionState(nextState);
+        nextState = await ensureSessionStream(nextState);
+        emitMessage({ type: "success", text: "已切换为人工接管模式" });
+      } catch (error) {
+        emitMessage({
+          type: "error",
+          text: `切换人工接管失败: ${
+            error instanceof Error ? error.message : String(error)
+          }`,
+        });
+      } finally {
+        setControlBusy(false);
+      }
+    },
+    [emitMessage, ensureSessionStream, sessionState],
+  );
+
+  const releaseSession = useCallback(
+    async (humanReason?: string) => {
+      if (!sessionState?.session_id) return;
+      setControlBusy(true);
+      try {
+        const nextState = await browserRuntimeApi.releaseBrowserSession({
+          session_id: sessionState.session_id,
+          human_reason: humanReason ?? "等待你确认是否继续执行",
+        });
+        setSessionState(nextState);
+        emitMessage({ type: "success", text: "会话已保持为待继续状态" });
+      } catch (error) {
+        emitMessage({
+          type: "error",
+          text: `结束接管失败: ${error instanceof Error ? error.message : String(error)}`,
+        });
+      } finally {
+        setControlBusy(false);
+      }
+    },
+    [emitMessage, sessionState],
+  );
+
+  const resumeSession = useCallback(
+    async (humanReason?: string) => {
+      if (!sessionState?.session_id) return;
+      setControlBusy(true);
+      try {
+        let nextState = await browserRuntimeApi.resumeBrowserSession({
+          session_id: sessionState.session_id,
+          human_reason: humanReason ?? "人工处理完成，继续执行",
+        });
+        setSessionState(nextState);
+        nextState = await ensureSessionStream(nextState);
+        emitMessage({ type: "success", text: "已交还给 Agent 继续执行" });
+      } catch (error) {
+        emitMessage({
+          type: "error",
+          text: `恢复 Agent 执行失败: ${
+            error instanceof Error ? error.message : String(error)
+          }`,
+        });
+      } finally {
+        setControlBusy(false);
+      }
+    },
+    [emitMessage, ensureSessionStream, sessionState],
+  );
+
+  const runDirectControlAction = useCallback(
+    async (
+      action: "click" | "type" | "scroll_page",
+      args: Record<string, unknown>,
+      successText?: string,
+    ) => {
+      if (!sessionState?.profile_key) {
+        emitMessage({ type: "error", text: "当前没有可控制的浏览器会话" });
+        return;
+      }
+      setControlBusy(true);
+      try {
+        await browserRuntimeApi.browserExecuteAction({
+          profile_key: sessionState.profile_key,
+          backend: "cdp_direct",
+          action,
+          args: {
+            ...args,
+            target_id: sessionState.target_id,
+          },
+        });
+        await syncBuffer(sessionState.session_id, eventCursorRef.current);
+        if (successText) {
+          emitMessage({ type: "success", text: successText });
+        }
+      } catch (error) {
+        if (await handleRecoverableError(error, "浏览器连接已断开")) {
+          return;
+        }
+        emitMessage({
+          type: "error",
+          text: `发送浏览器控制指令失败: ${normalizeRuntimeErrorMessage(error)}`,
+        });
+      } finally {
+        setControlBusy(false);
+      }
+    },
+    [emitMessage, handleRecoverableError, sessionState, syncBuffer],
+  );
+
+  const clickAt = useCallback(
+    async (x: number, y: number) => {
+      await runDirectControlAction(
+        "click",
+        { x, y },
+        `已发送点击指令 (${Math.round(x)}, ${Math.round(y)})`,
+      );
+    },
+    [runDirectControlAction],
+  );
+
+  const scrollPage = useCallback(
+    async (direction: "up" | "down", amount = 520) => {
+      await runDirectControlAction("scroll_page", {
+        direction,
+        amount,
+      });
+    },
+    [runDirectControlAction],
+  );
+
+  const typeIntoFocusedElement = useCallback(
+    async (text: string) => {
+      const value = text.trim();
+      if (!value) {
+        return;
+      }
+      await runDirectControlAction(
+        "type",
+        { text: value },
+        "已发送文本到当前焦点",
+      );
+    },
+    [runDirectControlAction],
+  );
+
+  useEffect(() => {
+    if (!sessionState?.session_id) return;
+    if (!browserRuntimeApi.supportsNativeEvents()) {
+      void syncBuffer(sessionState.session_id, eventCursorRef.current);
+      const timer = window.setInterval(() => {
+        void syncBuffer(sessionState.session_id, eventCursorRef.current);
+      }, 1000);
+      return () => window.clearInterval(timer);
+    }
+    let active = true;
+    const unlistenPromise = browserRuntimeApi.listenBrowserEvent(
+      ({ payload }) => {
+        if (!active || payload.session_id !== sessionState.session_id) return;
+        eventCursorRef.current = Math.max(
+          eventCursorRef.current,
+          payload.sequence,
+        );
+        setEventCursor((cursor) => Math.max(cursor, payload.sequence));
+        applyEvent(payload);
+      },
+    );
+    return () => {
+      active = false;
+      void unlistenPromise.then((unlisten) => unlisten());
+    };
+  }, [applyEvent, sessionState?.session_id, syncBuffer]);
+
+  useEffect(() => {
+    if (!sessionState?.session_id || !sessionState.last_error) {
+      return;
+    }
+    if (!isRecoverableBrowserError(sessionState.last_error)) {
+      return;
+    }
+
+    const recoveryKey = `${sessionState.session_id}:${sessionState.last_error}`;
+    if (lastRecoveredErrorKeyRef.current === recoveryKey) {
+      return;
+    }
+    lastRecoveredErrorKeyRef.current = recoveryKey;
+    void recoverBrowserSession("检测到浏览器连接中断");
+  }, [recoverBrowserSession, sessionState?.last_error, sessionState?.session_id]);
+
+  useEffect(() => {
+    if (!sessionState?.session_id || sessionState.connected) {
+      return;
+    }
+    if (
+      sessionState.lifecycle_state !== "failed" &&
+      sessionState.lifecycle_state !== "closed"
+    ) {
+      return;
+    }
+    if (lastRecoveredSessionIdRef.current === sessionState.session_id) {
+      return;
+    }
+    lastRecoveredSessionIdRef.current = sessionState.session_id;
+    void recoverBrowserSession("检测到浏览器会话已关闭");
+  }, [
+    recoverBrowserSession,
+    sessionState?.connected,
+    sessionState?.lifecycle_state,
+    sessionState?.session_id,
+  ]);
+
+  const lifecycleState: BrowserSessionLifecycleState | null =
+    sessionState?.lifecycle_state ?? null;
+  const isHumanControlling = lifecycleState === "human_controlling";
+  const isWaitingForHuman = lifecycleState === "waiting_for_human";
+  const isAgentResuming = lifecycleState === "agent_resuming";
+  const canDirectControl = Boolean(sessionState && isHumanControlling);
+
+  return {
+    selectedSession,
+    selectedProfileKey,
+    setSelectedProfileKey,
+    selectedTargetId,
+    setSelectedTargetId,
+    targets,
+    sessionState,
+    latestFrame,
+    latestFrameMetadata,
+    consoleEvents,
+    networkEvents,
+    loadingTargets,
+    openingSession,
+    streaming,
+    refreshingState,
+    controlBusy,
+    lifecycleState,
+    isHumanControlling,
+    isWaitingForHuman,
+    isAgentResuming,
+    canDirectControl,
+    refreshTargets,
+    openSession,
+    startStream,
+    stopStream,
+    closeSession,
+    refreshSessionState,
+    takeOverSession,
+    releaseSession,
+    resumeSession,
+    clickAt,
+    scrollPage,
+    typeIntoFocusedElement,
+  };
+}
diff --git a/src/hooks/useProjects.ts b/src/hooks/useProjects.ts
index 362a2ef17..d1816e4b0 100644
--- a/src/hooks/useProjects.ts
+++ b/src/hooks/useProjects.ts
@@ -32,6 +32,8 @@ import { recordWorkspaceRepair } from "@/lib/workspaceHealthTelemetry";
 export interface UseProjectsReturn {
   /** 项目列表 */
   projects: Project[];
+  /** 通用对话项目列表 */
+  generalProjects: Project[];
   /** 筛选后的项目列表 */
   filteredProjects: Project[];
   /** 默认项目 */
@@ -50,6 +52,8 @@ export interface UseProjectsReturn {
   create: (request: CreateProjectRequest) => Promise<Project>;
   /** 更新项目 */
   update: (id: string, update: ProjectUpdate) => Promise<Project>;
+  /** 重命名项目 */
+  rename: (id: string, name: string) => Promise<Project>;
   /** 删除项目 */
   remove: (id: string) => Promise<boolean>;
   /** 获取或创建默认项目 */
@@ -133,6 +137,11 @@ export function useProjects(): UseProjectsReturn {
     return result;
   }, [projects, filter]);
 
+  const generalProjects = useMemo(
+    () => projects.filter((project) => project.workspaceType === "general"),
+    [projects],
+  );
+
   /** 创建项目 */
   const create = useCallback(
     async (request: CreateProjectRequest): Promise<Project> => {
@@ -159,6 +168,21 @@ export function useProjects(): UseProjectsReturn {
     [refresh],
   );
 
+  /** 重命名项目 */
+  const rename = useCallback(
+    async (id: string, name: string): Promise<Project> => {
+      const trimmedName = name.trim();
+      if (!trimmedName) {
+        throw new Error("项目名称不能为空");
+      }
+
+      const project = await updateProject(id, { name: trimmedName });
+      await refresh();
+      return toProjectView(project);
+    },
+    [refresh],
+  );
+
   /** 删除项目 */
   const remove = useCallback(
     async (id: string): Promise<boolean> => {
@@ -183,6 +207,7 @@ export function useProjects(): UseProjectsReturn {
 
   return {
     projects,
+    generalProjects,
     filteredProjects,
     defaultProject,
     loading,
@@ -192,6 +217,7 @@ export function useProjects(): UseProjectsReturn {
     refresh,
     create,
     update,
+    rename,
     remove,
     getOrCreateDefault,
   };
diff --git a/src/hooks/usePrompts.ts b/src/hooks/usePrompts.ts
deleted file mode 100644
index afd3865e4..000000000
--- a/src/hooks/usePrompts.ts
+++ /dev/null
@@ -1,134 +0,0 @@
-import { useState, useCallback, useRef } from "react";
-import { promptsApi, Prompt, AppType } from "@/lib/api/prompts";
-
-export function usePrompts(appType: AppType) {
-  const [prompts, setPrompts] = useState<Record<string, Prompt>>({});
-  const [currentFileContent, setCurrentFileContent] = useState<string | null>(
-    null,
-  );
-  const [loading, setLoading] = useState(false);
-  const hasAutoImported = useRef<Record<string, boolean>>({});
-
-  const reload = useCallback(async () => {
-    setLoading(true);
-    try {
-      // Auto-import on first load if no prompts exist
-      if (!hasAutoImported.current[appType]) {
-        hasAutoImported.current[appType] = true;
-        try {
-          const imported = await promptsApi.autoImport(appType);
-          if (imported > 0) {
-            console.log(`Auto-imported ${imported} prompt(s) for ${appType}`);
-          }
-        } catch (e) {
-          console.log("Auto-import skipped:", e);
-        }
-      }
-
-      const data = await promptsApi.getPrompts(appType);
-      setPrompts(data);
-
-      // Also load current file content
-      try {
-        const content = await promptsApi.getCurrentFileContent(appType);
-        setCurrentFileContent(content);
-      } catch {
-        setCurrentFileContent(null);
-      }
-    } catch (error) {
-      console.error("Failed to load prompts:", error);
-    } finally {
-      setLoading(false);
-    }
-  }, [appType]);
-
-  const savePrompt = useCallback(
-    async (id: string, prompt: Prompt) => {
-      await promptsApi.upsertPrompt(appType, id, prompt);
-      await reload();
-    },
-    [appType, reload],
-  );
-
-  const deletePrompt = useCallback(
-    async (id: string) => {
-      await promptsApi.deletePrompt(appType, id);
-      await reload();
-    },
-    [appType, reload],
-  );
-
-  const enablePrompt = useCallback(
-    async (id: string) => {
-      await promptsApi.enablePrompt(appType, id);
-      await reload();
-    },
-    [appType, reload],
-  );
-
-  const toggleEnabled = useCallback(
-    async (id: string, enabled: boolean) => {
-      // Optimistic update
-      const previousPrompts = prompts;
-
-      if (enabled) {
-        // If enabling, first disable all others
-        const updatedPrompts = Object.keys(prompts).reduce(
-          (acc, key) => {
-            acc[key] = {
-              ...prompts[key],
-              enabled: key === id,
-            };
-            return acc;
-          },
-          {} as Record<string, Prompt>,
-        );
-        setPrompts(updatedPrompts);
-      } else {
-        setPrompts((prev) => ({
-          ...prev,
-          [id]: {
-            ...prev[id],
-            enabled: false,
-          },
-        }));
-      }
-
-      try {
-        if (enabled) {
-          await promptsApi.enablePrompt(appType, id);
-        } else {
-          // Disable by updating with enabled=false
-          await promptsApi.upsertPrompt(appType, id, {
-            ...prompts[id],
-            enabled: false,
-          });
-        }
-        await reload();
-      } catch (error) {
-        // Rollback on failure
-        setPrompts(previousPrompts);
-        throw error;
-      }
-    },
-    [appType, prompts, reload],
-  );
-
-  const importFromFile = useCallback(async () => {
-    const id = await promptsApi.importFromFile(appType);
-    await reload();
-    return id;
-  }, [appType, reload]);
-
-  return {
-    prompts,
-    loading,
-    currentFileContent,
-    reload,
-    savePrompt,
-    deletePrompt,
-    enablePrompt,
-    toggleEnabled,
-    importFromFile,
-  };
-}
diff --git a/src/index.css b/src/index.css
index f362ee4db..58e03763c 100644
--- a/src/index.css
+++ b/src/index.css
@@ -8,6 +8,8 @@
     --foreground: 222.2 84% 4.9%;
     --card: 0 0% 100%;
     --card-foreground: 222.2 84% 4.9%;
+    --popover: 0 0% 100%;
+    --popover-foreground: 222.2 84% 4.9%;
     --primary: 222.2 47.4% 11.2%;
     --primary-foreground: 210 40% 98%;
     --secondary: 210 40% 96.1%;
@@ -42,6 +44,8 @@
     --foreground: 210 40% 98%;
     --card: 222.2 84% 4.9%;
     --card-foreground: 210 40% 98%;
+    --popover: 222.2 84% 4.9%;
+    --popover-foreground: 210 40% 98%;
     --primary: 210 40% 98%;
     --primary-foreground: 222.2 47.4% 11.2%;
     --secondary: 217.2 32.6% 17.5%;
diff --git a/src/lib/api/skills.ts b/src/lib/api/skills.ts
index 1c7d84b3b..d334cd2a4 100644
--- a/src/lib/api/skills.ts
+++ b/src/lib/api/skills.ts
@@ -67,6 +67,10 @@ export interface SkillRepo {
   enabled: boolean;
 }
 
+export interface ImportedSkillResult {
+  directory: string;
+}
+
 export type AppType = "claude" | "codex" | "gemini" | "proxycast";
 
 function normalizeStandardCompliance(
@@ -200,6 +204,16 @@ export const skillsApi = {
     return normalizeInspection(inspection);
   },
 
+  async importLocalSkill(
+    sourcePath: string,
+    app: AppType = "proxycast",
+  ): Promise<ImportedSkillResult> {
+    return safeInvoke<ImportedSkillResult>("import_local_skill_for_app", {
+      app,
+      source_path: sourcePath,
+    });
+  },
+
   async inspectRemoteSkill(
     locator: RemoteSkillLocator,
   ): Promise<SkillInspection> {
diff --git a/src/lib/artifact/parser.ts b/src/lib/artifact/parser.ts
index 3d6e87e08..d6f2a18c6 100644
--- a/src/lib/artifact/parser.ts
+++ b/src/lib/artifact/parser.ts
@@ -362,6 +362,7 @@ export class ArtifactParser {
       svg: "SVG",
       mermaid: "Diagram",
       react: "React Component",
+      browser_assist: "Browser Assist",
       "canvas:document": "Document",
       "canvas:poster": "Poster",
       "canvas:music": "Music",
diff --git a/src/lib/artifact/types.ts b/src/lib/artifact/types.ts
index cbaffb6a4..0f747cc46 100644
--- a/src/lib/artifact/types.ts
+++ b/src/lib/artifact/types.ts
@@ -24,6 +24,7 @@ export type ArtifactType =
   | "svg"
   | "mermaid"
   | "react"
+  | "browser_assist"
   // Canvas 类型
   | "canvas:document"
   | "canvas:poster"
@@ -147,6 +148,7 @@ export const LIGHTWEIGHT_ARTIFACT_TYPES: ArtifactType[] = [
   "svg",
   "mermaid",
   "react",
+  "browser_assist",
 ];
 
 /**
@@ -197,6 +199,7 @@ export const DEFAULT_FILE_EXTENSIONS: Record<ArtifactType, string> = {
   svg: "svg",
   mermaid: "mmd",
   react: "jsx",
+  browser_assist: "txt",
   "canvas:document": "md",
   "canvas:poster": "json",
   "canvas:music": "json",
diff --git a/src/lib/dev-bridge/safeInvoke.ts b/src/lib/dev-bridge/safeInvoke.ts
index 56f837bbf..e5942b8f2 100644
--- a/src/lib/dev-bridge/safeInvoke.ts
+++ b/src/lib/dev-bridge/safeInvoke.ts
@@ -45,8 +45,14 @@ const INVOKE_ERROR_TEXT_LIMIT = 800;
 const SECRET_PATTERNS: Array<[RegExp, string]> = [
   [/\bBearer\s+[A-Za-z0-9._-]+\b/gi, "Bearer ***"],
   [/\bapi[_-]?key\s*[:=]\s*["']?[A-Za-z0-9._-]+["']?/gi, "api_key=***"],
-  [/\baccess[_-]?token\s*[:=]\s*["']?[A-Za-z0-9._-]+["']?/gi, "access_token=***"],
-  [/\brefresh[_-]?token\s*[:=]\s*["']?[A-Za-z0-9._-]+["']?/gi, "refresh_token=***"],
+  [
+    /\baccess[_-]?token\s*[:=]\s*["']?[A-Za-z0-9._-]+["']?/gi,
+    "access_token=***",
+  ],
+  [
+    /\brefresh[_-]?token\s*[:=]\s*["']?[A-Za-z0-9._-]+["']?/gi,
+    "refresh_token=***",
+  ],
   [/\btoken\s*[:=]\s*["']?[A-Za-z0-9._-]{10,}["']?/gi, "token=***"],
   [/\bsk-[A-Za-z0-9]{12,}\b/g, "sk-***"],
 ];
@@ -280,7 +286,10 @@ export async function safeInvoke<T = any>(
     (window as any).__TAURI__?.core?.invoke
   ) {
     try {
-      const result = await (window as any).__TAURI__.core.invoke(cmd, args) as T;
+      const result = (await (window as any).__TAURI__.core.invoke(
+        cmd,
+        args,
+      )) as T;
       recordInvokeTrace(cmd, args, "tauri-ipc", "success", startedAt);
       return result;
     } catch (error) {
@@ -293,7 +302,7 @@ export async function safeInvoke<T = any>(
   // Legacy check for older Tauri versions
   if (typeof window !== "undefined" && (window as any).__TAURI__?.invoke) {
     try {
-      const result = await (window as any).__TAURI__.invoke(cmd, args) as T;
+      const result = (await (window as any).__TAURI__.invoke(cmd, args)) as T;
       recordInvokeTrace(cmd, args, "tauri-legacy", "success", startedAt);
       return result;
     } catch (error) {
@@ -306,7 +315,7 @@ export async function safeInvoke<T = any>(
   // 2. 浏览器开发模式下，部分原生/非关键命令直接优先走 mock。
   if (isDevBridgeAvailable() && shouldPreferMockInBrowser(cmd)) {
     try {
-      const result = await baseInvoke(cmd, args) as T;
+      const result = (await baseInvoke(cmd, args)) as T;
       recordInvokeTrace(cmd, args, "fallback-invoke", "success", startedAt);
       return result;
     } catch (error) {
@@ -342,14 +351,8 @@ export async function safeInvoke<T = any>(
       );
 
       try {
-        const result = await baseInvoke(cmd, args) as T;
-        recordInvokeTrace(
-          cmd,
-          args,
-          "fallback-invoke",
-          "success",
-          startedAt,
-        );
+        const result = (await baseInvoke(cmd, args)) as T;
+        recordInvokeTrace(cmd, args, "fallback-invoke", "success", startedAt);
         return result;
       } catch (fallbackError) {
         recordInvokeError(cmd, args, fallbackError, "fallback-invoke");
@@ -368,7 +371,7 @@ export async function safeInvoke<T = any>(
 
   // 4. Fallback 到 mock（Vite alias 会替换 @tauri-apps 导入）
   try {
-    const result = await baseInvoke(cmd, args) as T;
+    const result = (await baseInvoke(cmd, args)) as T;
     recordInvokeTrace(cmd, args, "fallback-invoke", "success", startedAt);
     return result;
   } catch (error) {
@@ -398,6 +401,12 @@ export async function safeListen<T = any>(
   return baseListen(event, handler);
 }
 
+export function hasNativeTauriEventSupport(): boolean {
+  return Boolean(
+    typeof window !== "undefined" && (window as any).__TAURI__?.event?.listen,
+  );
+}
+
 /**
  * 安全的 Tauri emit 封装
  * 优先使用真实的 Tauri event API
diff --git a/src/lib/resourceProjectSelection.ts b/src/lib/resourceProjectSelection.ts
index 8b1631ddb..034000c85 100644
--- a/src/lib/resourceProjectSelection.ts
+++ b/src/lib/resourceProjectSelection.ts
@@ -4,6 +4,7 @@ const RESOURCE_PROJECT_CHANGE_EVENT = "proxycast:resource-project-change";
 
 export type ResourceProjectChangeSource =
   | "resources"
+  | "general-chat"
   | "image-gen-target"
   | "image-gen-save"
   | "unknown";
diff --git a/src/lib/tauri-mock/core.ts b/src/lib/tauri-mock/core.ts
index daedf9a76..591e56247 100644
--- a/src/lib/tauri-mock/core.ts
+++ b/src/lib/tauri-mock/core.ts
@@ -487,6 +487,42 @@ const defaultMocks: Record<string, any> = {
   }),
   get_chrome_profile_sessions: () => [],
   close_chrome_profile_session: () => true,
+  open_browser_runtime_debugger_window: () => ({ success: true }),
+  close_browser_runtime_debugger_window: () => ({ success: true }),
+  launch_browser_runtime_assist: (args: any) => ({
+    profile: {
+      success: true,
+      reused: false,
+      browser_source: "system",
+      browser_path:
+        "/Applications/Google Chrome.app/Contents/MacOS/Google Chrome",
+      profile_dir: `/tmp/proxycast/chrome_profiles/${args?.request?.profile_key ?? "search_google"}`,
+      remote_debugging_port: 13001,
+      pid: 12345,
+      devtools_http_url: "http://127.0.0.1:13001/json/version",
+    },
+    session: {
+      session_id: "mock-cdp-session",
+      profile_key: args?.request?.profile_key ?? "search_google",
+      target_id: args?.request?.target_id ?? "mock-target-1",
+      target_title: "Mock Target",
+      target_url: args?.request?.url ?? "https://example.com",
+      remote_debugging_port: 13001,
+      ws_debugger_url: "ws://127.0.0.1:13001/devtools/page/mock-target-1",
+      devtools_frontend_url:
+        "/devtools/inspector.html?ws=127.0.0.1:13001/devtools/page/mock-target-1",
+      stream_mode: args?.request?.stream_mode ?? "both",
+      last_page_info: {
+        title: "Mock Target",
+        url: args?.request?.url ?? "https://example.com",
+        markdown: `# Mock Target\nURL: ${args?.request?.url ?? "https://example.com"}`,
+        updated_at: new Date().toISOString(),
+      },
+      last_event_at: new Date().toISOString(),
+      created_at: new Date().toISOString(),
+      connected: true,
+    },
+  }),
   open_chrome_profile_window: () => ({
     success: true,
     reused: false,
@@ -569,9 +605,106 @@ const defaultMocks: Record<string, any> = {
       },
     ],
   }),
+  list_cdp_targets: () => [
+    {
+      id: "mock-target-1",
+      title: "Mock Target",
+      url: "https://example.com",
+      target_type: "page",
+      web_socket_debugger_url:
+        "ws://127.0.0.1:13001/devtools/page/mock-target-1",
+      devtools_frontend_url:
+        "/devtools/inspector.html?ws=127.0.0.1:13001/devtools/page/mock-target-1",
+    },
+  ],
+  open_cdp_session: (args: any) => ({
+    session_id: "mock-cdp-session",
+    profile_key: args?.request?.profile_key ?? "search_google",
+    target_id: args?.request?.target_id ?? "mock-target-1",
+    target_title: "Mock Target",
+    target_url: "https://example.com",
+    remote_debugging_port: 13001,
+    ws_debugger_url: "ws://127.0.0.1:13001/devtools/page/mock-target-1",
+    devtools_frontend_url:
+      "/devtools/inspector.html?ws=127.0.0.1:13001/devtools/page/mock-target-1",
+    stream_mode: undefined,
+    last_page_info: {
+      title: "Mock Target",
+      url: "https://example.com",
+      markdown: "# Mock Target\nURL: https://example.com",
+      updated_at: new Date().toISOString(),
+    },
+    last_event_at: new Date().toISOString(),
+    created_at: new Date().toISOString(),
+    connected: true,
+  }),
+  close_cdp_session: () => true,
+  start_browser_stream: (args: any) => ({
+    session_id: args?.request?.session_id ?? "mock-cdp-session",
+    profile_key: "search_google",
+    target_id: "mock-target-1",
+    target_title: "Mock Target",
+    target_url: "https://example.com",
+    remote_debugging_port: 13001,
+    ws_debugger_url: "ws://127.0.0.1:13001/devtools/page/mock-target-1",
+    stream_mode: args?.request?.mode ?? "both",
+    last_page_info: {
+      title: "Mock Target",
+      url: "https://example.com",
+      markdown: "# Mock Target\nURL: https://example.com",
+      updated_at: new Date().toISOString(),
+    },
+    last_event_at: new Date().toISOString(),
+    created_at: new Date().toISOString(),
+    connected: true,
+  }),
+  stop_browser_stream: (args: any) => ({
+    session_id: args?.request?.session_id ?? "mock-cdp-session",
+    profile_key: "search_google",
+    target_id: "mock-target-1",
+    target_title: "Mock Target",
+    target_url: "https://example.com",
+    remote_debugging_port: 13001,
+    ws_debugger_url: "ws://127.0.0.1:13001/devtools/page/mock-target-1",
+    stream_mode: undefined,
+    last_page_info: {
+      title: "Mock Target",
+      url: "https://example.com",
+      markdown: "# Mock Target\nURL: https://example.com",
+      updated_at: new Date().toISOString(),
+    },
+    last_event_at: new Date().toISOString(),
+    created_at: new Date().toISOString(),
+    connected: true,
+  }),
+  get_browser_session_state: (args: any) => ({
+    session_id: args?.request?.session_id ?? "mock-cdp-session",
+    profile_key: "search_google",
+    target_id: "mock-target-1",
+    target_title: "Mock Target",
+    target_url: "https://example.com",
+    remote_debugging_port: 13001,
+    ws_debugger_url: "ws://127.0.0.1:13001/devtools/page/mock-target-1",
+    stream_mode: "both",
+    last_page_info: {
+      title: "Mock Target",
+      url: "https://example.com",
+      markdown: "# Mock Target\nURL: https://example.com",
+      updated_at: new Date().toISOString(),
+    },
+    last_event_at: new Date().toISOString(),
+    created_at: new Date().toISOString(),
+    connected: true,
+  }),
+  get_browser_event_buffer: () => ({
+    events: [],
+    next_cursor: 0,
+  }),
   browser_execute_action: (args: any) => ({
     success: true,
     backend: args?.request?.backend ?? "aster_compat",
+    session_id: "mock-cdp-session",
+    target_id: "mock-target-1",
     action: args?.request?.action ?? "navigate",
     request_id: `browser-mock-${Date.now()}`,
     data: {
@@ -729,6 +862,7 @@ const defaultMocks: Record<string, any> = {
   }),
   install_skill_for_app: () => ({ success: true }),
   uninstall_skill_for_app: () => ({ success: true }),
+  import_local_skill_for_app: () => ({ directory: "mock-skill" }),
   enable_skill: () => ({ success: true }),
   disable_skill: () => ({ success: true }),
 
diff --git a/src/lib/webview-api.ts b/src/lib/webview-api.ts
index bdb982d70..2efb3b9f7 100644
--- a/src/lib/webview-api.ts
+++ b/src/lib/webview-api.ts
@@ -228,6 +228,8 @@ export interface BrowserActionAttempt {
 export interface BrowserActionResult {
   success: boolean;
   backend?: BrowserBackendType;
+  session_id?: string;
+  target_id?: string;
   action: string;
   request_id: string;
   data?: unknown;
@@ -247,6 +249,202 @@ export interface BrowserActionAuditRecord {
   attempts: BrowserActionAttempt[];
 }
 
+export interface CdpTargetInfo {
+  id: string;
+  title: string;
+  url: string;
+  target_type: string;
+  web_socket_debugger_url?: string;
+  devtools_frontend_url?: string;
+}
+
+export interface BrowserPageInfo {
+  title: string;
+  url: string;
+  markdown: string;
+  updated_at: string;
+}
+
+export type BrowserStreamMode = "events" | "frames" | "both";
+export type BrowserSessionLifecycleState =
+  | "launching"
+  | "live"
+  | "waiting_for_human"
+  | "human_controlling"
+  | "agent_resuming"
+  | "closed"
+  | "failed";
+export type BrowserControlMode = "agent" | "human" | "shared";
+export type BrowserTransportKind = "cdp_frames";
+
+export interface CdpSessionState {
+  session_id: string;
+  profile_key: string;
+  target_id: string;
+  target_title: string;
+  target_url: string;
+  remote_debugging_port: number;
+  ws_debugger_url: string;
+  devtools_frontend_url?: string;
+  stream_mode?: BrowserStreamMode;
+  transport_kind: BrowserTransportKind;
+  lifecycle_state: BrowserSessionLifecycleState;
+  control_mode: BrowserControlMode;
+  human_reason?: string;
+  last_page_info?: BrowserPageInfo;
+  last_event_at?: string;
+  last_frame_at?: string;
+  last_error?: string;
+  created_at: string;
+  connected: boolean;
+}
+
+export type BrowserEvent =
+  | {
+      session_id: string;
+      sequence: number;
+      occurred_at: string;
+      type: "session_opened";
+      profile_key: string;
+      target_id: string;
+    }
+  | {
+      session_id: string;
+      sequence: number;
+      occurred_at: string;
+      type: "session_closed";
+      reason: string;
+    }
+  | {
+      session_id: string;
+      sequence: number;
+      occurred_at: string;
+      type: "session_error";
+      error: string;
+    }
+  | {
+      session_id: string;
+      sequence: number;
+      occurred_at: string;
+      type: "session_state_changed";
+      lifecycle_state: BrowserSessionLifecycleState;
+      control_mode: BrowserControlMode;
+      human_reason?: string;
+    }
+  | {
+      session_id: string;
+      sequence: number;
+      occurred_at: string;
+      type: "page_info_changed";
+      title: string;
+      url: string;
+      markdown: string;
+    }
+  | {
+      session_id: string;
+      sequence: number;
+      occurred_at: string;
+      type: "console_message";
+      level: string;
+      text: string;
+      timestamp: number;
+    }
+  | {
+      session_id: string;
+      sequence: number;
+      occurred_at: string;
+      type: "network_request";
+      request_id: string;
+      url: string;
+      method: string;
+    }
+  | {
+      session_id: string;
+      sequence: number;
+      occurred_at: string;
+      type: "network_response";
+      request_id: string;
+      url: string;
+      status: number;
+      mime_type: string;
+    }
+  | {
+      session_id: string;
+      sequence: number;
+      occurred_at: string;
+      type: "network_failed";
+      request_id: string;
+      error_text: string;
+    }
+  | {
+      session_id: string;
+      sequence: number;
+      occurred_at: string;
+      type: "frame_chunk";
+      data: string;
+      metadata: {
+        width: number;
+        height: number;
+        timestamp: number;
+        sequence: number;
+      };
+    }
+  | {
+      session_id: string;
+      sequence: number;
+      occurred_at: string;
+      type: "frame_dropped";
+      reason: string;
+    }
+  | {
+      session_id: string;
+      sequence: number;
+      occurred_at: string;
+      type: "command_started";
+      command_id: number;
+      action: string;
+    }
+  | {
+      session_id: string;
+      sequence: number;
+      occurred_at: string;
+      type: "command_completed";
+      command_id: number;
+      action: string;
+    }
+  | {
+      session_id: string;
+      sequence: number;
+      occurred_at: string;
+      type: "command_failed";
+      command_id: number;
+      action: string;
+      error: string;
+    };
+
+export interface BrowserEventBufferSnapshot {
+  events: BrowserEvent[];
+  next_cursor: number;
+}
+
+export interface LaunchBrowserRuntimeAssistRequest {
+  profile_key: string;
+  url: string;
+  target_id?: string;
+  open_window?: boolean;
+  stream_mode?: BrowserStreamMode;
+}
+
+export interface BrowserRuntimeAssistLaunchResponse {
+  profile: OpenChromeProfileResponse;
+  session: CdpSessionState;
+}
+
+export interface UpdateBrowserSessionControlRequest {
+  session_id: string;
+  human_reason?: string;
+}
+
 /**
  * 创建一个新的 webview 窗口来显示外部 URL
  *
@@ -273,7 +471,9 @@ export async function openChromeProfileWindow(
 /**
  * 获取当前运行中的 Chrome Profile 会话
  */
-export async function getChromeProfileSessions(): Promise<ChromeProfileSessionInfo[]> {
+export async function getChromeProfileSessions(): Promise<
+  ChromeProfileSessionInfo[]
+> {
   return safeInvoke<ChromeProfileSessionInfo[]>("get_chrome_profile_sessions");
 }
 
@@ -292,7 +492,9 @@ export async function closeChromeProfileSession(
  * 获取 ChromeBridge 端点信息（用于扩展配置）
  */
 export async function getChromeBridgeEndpointInfo(): Promise<ChromeBridgeEndpointInfo> {
-  return safeInvoke<ChromeBridgeEndpointInfo>("get_chrome_bridge_endpoint_info");
+  return safeInvoke<ChromeBridgeEndpointInfo>(
+    "get_chrome_bridge_endpoint_info",
+  );
 }
 
 /**
@@ -308,9 +510,12 @@ export async function getChromeBridgeStatus(): Promise<ChromeBridgeStatusSnapsho
 export async function chromeBridgeExecuteCommand(
   request: ChromeBridgeCommandRequest,
 ): Promise<ChromeBridgeCommandResult> {
-  return safeInvoke<ChromeBridgeCommandResult>("chrome_bridge_execute_command", {
-    request,
-  });
+  return safeInvoke<ChromeBridgeCommandResult>(
+    "chrome_bridge_execute_command",
+    {
+      request,
+    },
+  );
 }
 
 export async function getBrowserBackendPolicy(): Promise<BrowserBackendPolicy> {
@@ -326,7 +531,120 @@ export async function setBrowserBackendPolicy(
 }
 
 export async function getBrowserBackendsStatus(): Promise<BrowserBackendsStatusSnapshot> {
-  return safeInvoke<BrowserBackendsStatusSnapshot>("get_browser_backends_status");
+  return safeInvoke<BrowserBackendsStatusSnapshot>(
+    "get_browser_backends_status",
+  );
+}
+
+export async function listCdpTargets(
+  profileKey?: string,
+): Promise<CdpTargetInfo[]> {
+  return safeInvoke<CdpTargetInfo[]>("list_cdp_targets", {
+    request: {
+      profile_key: profileKey,
+    },
+  });
+}
+
+export async function openCdpSession(params: {
+  profile_key: string;
+  target_id?: string;
+}): Promise<CdpSessionState> {
+  return safeInvoke<CdpSessionState>("open_cdp_session", {
+    request: params,
+  });
+}
+
+export async function closeCdpSession(sessionId: string): Promise<boolean> {
+  return safeInvoke<boolean>("close_cdp_session", {
+    request: {
+      session_id: sessionId,
+    },
+  });
+}
+
+export async function startBrowserStream(params: {
+  session_id: string;
+  mode: BrowserStreamMode;
+}): Promise<CdpSessionState> {
+  return safeInvoke<CdpSessionState>("start_browser_stream", {
+    request: params,
+  });
+}
+
+export async function stopBrowserStream(
+  sessionId: string,
+): Promise<CdpSessionState> {
+  return safeInvoke<CdpSessionState>("stop_browser_stream", {
+    request: {
+      session_id: sessionId,
+    },
+  });
+}
+
+export async function getBrowserSessionState(
+  sessionId: string,
+): Promise<CdpSessionState> {
+  return safeInvoke<CdpSessionState>("get_browser_session_state", {
+    request: {
+      session_id: sessionId,
+    },
+  });
+}
+
+export async function takeOverBrowserSession(
+  request: UpdateBrowserSessionControlRequest,
+): Promise<CdpSessionState> {
+  return safeInvoke<CdpSessionState>("take_over_browser_session", {
+    request,
+  });
+}
+
+export async function releaseBrowserSession(
+  request: UpdateBrowserSessionControlRequest,
+): Promise<CdpSessionState> {
+  return safeInvoke<CdpSessionState>("release_browser_session", {
+    request,
+  });
+}
+
+export async function resumeBrowserSession(
+  request: UpdateBrowserSessionControlRequest,
+): Promise<CdpSessionState> {
+  return safeInvoke<CdpSessionState>("resume_browser_session", {
+    request,
+  });
+}
+
+export async function getBrowserEventBuffer(params: {
+  session_id: string;
+  cursor?: number;
+}): Promise<BrowserEventBufferSnapshot> {
+  return safeInvoke<BrowserEventBufferSnapshot>("get_browser_event_buffer", {
+    request: params,
+  });
+}
+
+export async function openBrowserRuntimeDebuggerWindow(request?: {
+  session_id?: string;
+  profile_key?: string;
+}): Promise<void> {
+  return safeInvoke<void>("open_browser_runtime_debugger_window", {
+    request,
+  });
+}
+
+export async function closeBrowserRuntimeDebuggerWindow(): Promise<void> {
+  return safeInvoke<void>("close_browser_runtime_debugger_window");
+}
+
+export async function launchBrowserRuntimeAssist(
+  request: LaunchBrowserRuntimeAssistRequest,
+): Promise<BrowserRuntimeAssistLaunchResponse> {
+  return safeInvoke<BrowserRuntimeAssistLaunchResponse>(
+    "launch_browser_runtime_assist",
+    { request },
+  );
 }
 
 export async function browserExecuteAction(
@@ -338,9 +656,12 @@ export async function browserExecuteAction(
 export async function getBrowserActionAuditLogs(
   limit?: number,
 ): Promise<BrowserActionAuditRecord[]> {
-  return safeInvoke<BrowserActionAuditRecord[]>("get_browser_action_audit_logs", {
-    limit,
-  });
+  return safeInvoke<BrowserActionAuditRecord[]>(
+    "get_browser_action_audit_logs",
+    {
+      limit,
+    },
+  );
 }
 
 /**
diff --git a/src/lib/workspace/navigation.test.ts b/src/lib/workspace/navigation.test.ts
index 65ad28edf..77afa1582 100644
--- a/src/lib/workspace/navigation.test.ts
+++ b/src/lib/workspace/navigation.test.ts
@@ -1,11 +1,17 @@
 import { describe, expect, it } from "vitest";
-import { buildHomeAgentParams, buildWorkspaceResetParams } from "./navigation";
+import {
+  buildClawAgentParams,
+  buildHomeAgentParams,
+  buildWorkspaceResetParams,
+} from "./navigation";
 
 describe("buildHomeAgentParams", () => {
   it("应返回 general 主题且解锁", () => {
     const params = buildHomeAgentParams();
     expect(params.theme).toBe("general");
     expect(params.lockTheme).toBe(false);
+    expect(params.immersiveHome).toBe(false);
+    expect(params.agentEntry).toBe("new-task");
   });
 
   it("应生成 newChatAt 时间戳", () => {
@@ -19,9 +25,16 @@ describe("buildHomeAgentParams", () => {
   it("应允许 overrides 但不覆盖核心字段", () => {
     const params = buildHomeAgentParams({ projectId: "proj-1" });
     expect(params.projectId).toBe("proj-1");
-    // theme 和 lockTheme 始终被覆盖
+    // theme / lockTheme / agentEntry 始终被覆盖
     expect(params.theme).toBe("general");
     expect(params.lockTheme).toBe(false);
+    expect(params.agentEntry).toBe("new-task");
+    expect(params.immersiveHome).toBe(false);
+  });
+
+  it("应允许显式关闭首页沉浸模式", () => {
+    const params = buildHomeAgentParams({ immersiveHome: false });
+    expect(params.immersiveHome).toBe(false);
   });
 
   it("多次调用应生成不同的 newChatAt（幂等性验证）", () => {
@@ -33,6 +46,39 @@ describe("buildHomeAgentParams", () => {
   });
 });
 
+describe("buildClawAgentParams", () => {
+  it("应返回 Claw 任务中心参数", () => {
+    const params = buildClawAgentParams();
+
+    expect(params.agentEntry).toBe("claw");
+    expect(params.theme).toBe("general");
+    expect(params.lockTheme).toBe(false);
+    expect(params.immersiveHome).toBe(false);
+  });
+
+  it("应允许透传项目上下文，但不覆盖核心字段", () => {
+    const params = buildClawAgentParams({
+      projectId: "proj-2",
+      immersiveHome: true,
+    });
+
+    expect(params.projectId).toBe("proj-2");
+    expect(params.agentEntry).toBe("claw");
+    expect(params.immersiveHome).toBe(true);
+    expect(params.theme).toBe("general");
+  });
+
+  it("应允许显式透传初始主题", () => {
+    const params = buildClawAgentParams({
+      theme: "social-media",
+    });
+
+    expect(params.agentEntry).toBe("claw");
+    expect(params.theme).toBe("social-media");
+    expect(params.lockTheme).toBe(false);
+  });
+});
+
 describe("buildWorkspaceResetParams", () => {
   it("应默认使用 project-management 视图模式", () => {
     const params = buildWorkspaceResetParams();
diff --git a/src/lib/workspace/navigation.ts b/src/lib/workspace/navigation.ts
index c24100ae1..0b4f66da6 100644
--- a/src/lib/workspace/navigation.ts
+++ b/src/lib/workspace/navigation.ts
@@ -5,12 +5,26 @@ export function buildHomeAgentParams(
 ): AgentPageParams {
   return {
     ...overrides,
+    agentEntry: "new-task",
+    immersiveHome: overrides.immersiveHome ?? false,
     theme: "general",
     lockTheme: false,
     newChatAt: Date.now(),
   };
 }
 
+export function buildClawAgentParams(
+  overrides: Partial<AgentPageParams> = {},
+): AgentPageParams {
+  return {
+    ...overrides,
+    agentEntry: "claw",
+    immersiveHome: overrides.immersiveHome ?? false,
+    theme: overrides.theme ?? "general",
+    lockTheme: false,
+  };
+}
+
 export function buildWorkspaceResetParams(
   overrides: Partial<AgentPageParams> = {},
   workspaceViewMode: WorkspaceViewMode = "project-management",
diff --git a/src/pages/README.md b/src/pages/README.md
index d87d336d0..92560c7ff 100644
--- a/src/pages/README.md
+++ b/src/pages/README.md
@@ -10,6 +10,7 @@
 ## 文件索引
 
 - `screenshot-chat.tsx` - 截图对话悬浮窗口页面（独立 Tauri 窗口）
+- `browser-runtime-debugger.tsx` - 浏览器运行时调试页面（可独立窗口打开）
 - `update-notification.tsx` - 更新提醒悬浮窗口页面（独立 Tauri 窗口，轻量 Toast 交互，支持 1/3/7 天稍后提醒）
 - `update-notification.css` - 更新提醒窗口样式（底部 Toast + 进入/退出动画）
 - `index.ts` - 页面导出入口
diff --git a/src/pages/browser-runtime-debugger.tsx b/src/pages/browser-runtime-debugger.tsx
new file mode 100644
index 000000000..845b746da
--- /dev/null
+++ b/src/pages/browser-runtime-debugger.tsx
@@ -0,0 +1,12 @@
+import { BrowserRuntimeWorkspace } from "@/features/browser-runtime/BrowserRuntimeWorkspace";
+
+export function BrowserRuntimeDebuggerPage() {
+  const params = new URLSearchParams(window.location.search);
+  return (
+    <BrowserRuntimeWorkspace
+      standalone
+      initialProfileKey={params.get("profile_key") || undefined}
+      initialSessionId={params.get("session_id") || undefined}
+    />
+  );
+}
diff --git a/src/pages/index.ts b/src/pages/index.ts
index 10f474612..8e5080d7a 100644
--- a/src/pages/index.ts
+++ b/src/pages/index.ts
@@ -1 +1,2 @@
 export { SmartInputPage } from "./smart-input";
+export { BrowserRuntimeDebuggerPage } from "./browser-runtime-debugger";
diff --git a/src/types/page.ts b/src/types/page.ts
index 3e8b2f178..683112ba7 100644
--- a/src/types/page.ts
+++ b/src/types/page.ts
@@ -66,17 +66,14 @@ export const WORKSPACE_PAGE_THEME_MAP: Record<
 };
 
 export type Page =
-  | "provider-pool"
   | "openclaw"
-  | "api-server"
   | "agent"
   | "style"
-  | "workspace"
   | ThemeWorkspacePage
   | "image-gen"
   | "batch"
-  | "mcp"
   | "resources"
+  | "browser-runtime"
   | "tools"
   | "plugins"
   | "settings"
@@ -135,6 +132,8 @@ export interface OpenClawPageParams {
 export interface AgentPageParams {
   projectId?: string;
   contentId?: string;
+  /** Agent 入口模式：新建任务或任务中心 */
+  agentEntry?: "new-task" | "claw";
   /** 进入 Agent 时自动发送的首条用户消息 */
   initialUserPrompt?: string;
   /** 进入 Agent 时优先创建的话题名称 */
@@ -147,6 +146,8 @@ export interface AgentPageParams {
   lockTheme?: boolean;
   /** 从资源管理页进入（用于沉浸式展示） */
   fromResources?: boolean;
+  /** 首页沉浸模式：隐藏左侧应用导航与话题列表，仅保留主工作区 */
+  immersiveHome?: boolean;
   /** 首页点击触发的新会话标记（时间戳） */
   newChatAt?: number;
   /** 主题工作台重置标记（时间戳） */
diff --git a/src/types/settings.ts b/src/types/settings.ts
index fc10f1858..b59712f14 100644
--- a/src/types/settings.ts
+++ b/src/types/settings.ts
@@ -80,7 +80,6 @@ export const SETTINGS_GROUPS: Record<SettingsGroupKey, SettingsTabs[]> = {
   [SettingsGroupKey.Account]: [SettingsTabs.Profile, SettingsTabs.Stats],
   [SettingsGroupKey.General]: [
     SettingsTabs.Appearance,
-    SettingsTabs.ChatAppearance,
     SettingsTabs.Hotkeys,
     SettingsTabs.Memory,
   ],
diff --git a/tailwind.config.js b/tailwind.config.js
index 4d56591cb..c8924f6f7 100644
--- a/tailwind.config.js
+++ b/tailwind.config.js
@@ -31,6 +31,10 @@ export default {
           DEFAULT: "hsl(var(--card))",
           foreground: "hsl(var(--card-foreground))",
         },
+        popover: {
+          DEFAULT: "hsl(var(--popover))",
+          foreground: "hsl(var(--popover-foreground))",
+        },
       },
       borderRadius: {
         lg: "var(--radius)",