Merge branch 'gzy_iframedf' into 'master'

feat: 登录token回传至宿主 See merge request knowledge-base-bj/deerflow-server!102
feat: 登录token回传至宿主
2026-06-08 04:35:35 +00:00 · 2026-06-08 12:33:24 +08:00 · 2026-06-07 15:54:16 +00:00 · 2026-06-07 23:53:52 +08:00 · 2026-06-07 14:56:48 +00:00 · 2026-06-07 22:55:50 +08:00
271 changed files with 39236 additions and 16407 deletions
@@ -1,474 +0,0 @@
-# New Chat 接口流式返回格式说明
-
-## 接口概览
-
- **路径**：`POST /new_chat`
- **传输协议**：Server-Sent Events (SSE)
- **Content-Type**：`text/event-stream`
- **协议基础**：Vercel AI SDK Data Stream Protocol
-
---
-
-## 请求格式
-
-```json
-{
-  "chat_id": 123,
-  "search_space_id": 456,
-  "user_query": "用户问题",
-  "pic_query": [{"image_url": "/tmp/xxx.png"}],
-  "model_name": "gpt-4o",
-  "enable_citations": true,
-}
-```
-
-| 字段 | 类型 | 必填 | 说明 |
-|------|------|------|------|
-| `chat_id` | int | ✅ | 会话 ID，同时作为 LangGraph 的 thread_id |
-| `search_space_id` | int | ✅ | 搜索空间 ID |
-| `user_query` | string | ✅ | 用户问题 |
-| `pic_query` | list\|null | ❌ | 图片路径列表，格式 `[{"image_url": "..."}]` |
-| `model_name` | string\|null | ❌ | 指定模型名称（插件场景使用） |
-| `enable_citations` | bool | ❌ | 是否启用引用（默认 true） |
-| `messages` | list\|null | ❌ | 历史消息列表 |
-| `attachments` | list\|null | ❌ | 上传附件（已解析为 Markdown） |
-| `mentioned_document_ids` | list\|null | ❌ | 前端 @ 引用的文档 ID 列表 |
-
---
-
-## 响应 Headers
-
-```
-Content-Type: text/event-stream
-Cache-Control: no-cache
-Connection: keep-alive
-X-Accel-Buffering: no
-```
-
---
-
-## SSE 数据帧格式
-
-每条消息均为标准 SSE 格式：
-
-```
-data: {JSON 对象}\n\n
-```
-
-流结束时发送：
-
-```
-data: [DONE]\n\n
-```
-
---
-
-## 事件类型详解
-
-### 1. 消息生命周期
-
-#### `start` — 消息开始
-
-```json
-{"type": "start", "messageId": "msg_abc123"}
-```
-
-| 字段 | 说明 |
-|------|------|
-| `messageId` | 本次消息的唯一 ID |
-
---
-
-#### `finish` — 消息结束
-
-```json
-{"type": "finish"}
-```
-
---
-
-#### `[DONE]` — 流终止标记
-
-```
-data: [DONE]
-```
-
-> 这是流中最后一帧，为纯字符串，不是 JSON。
-
---
-
-### 2. 步骤控制（多轮工具调用）
-
-#### `start-step` — 步骤开始
-
-```json
-{"type": "start-step"}
-```
-
-#### `finish-step` — 步骤结束
-
-```json
-{"type": "finish-step"}
-```
-
-> 每次 LLM 调用算一个 step。工具调用期间会有多个 step 交替出现。
-
---
-
-### 3. 文本块（start / delta / end 模式）
-
-#### `text-start` — 文本块开始
-
-```json
-{"type": "text-start", "id": "text_abc123"}
-```
-
-#### `text-delta` — 文本增量内容
-
-```json
-{"type": "text-delta", "id": "text_abc123", "delta": "Hello, "}
-```
-
-#### `text-end` — 文本块结束
-
-```json
-{"type": "text-end", "id": "text_abc123"}
-```
-
---
-
-### 4. 推理块（Reasoning，适用于 DeepSeek R1 等思维链模型）
-
-#### `reasoning-start` — 推理块开始
-
-```json
-{"type": "reasoning-start", "id": "reasoning_abc123"}
-```
-
-#### `reasoning-delta` — 推理增量内容
-
-```json
-{"type": "reasoning-delta", "id": "reasoning_abc123", "delta": "让我先思考..."}
-```
-
-#### `reasoning-end` — 推理块结束
-
-```json
-{"type": "reasoning-end", "id": "reasoning_abc123"}
-```
-
-> 触发时机：
-> - 模型返回 `additional_kwargs.reasoning_content`（DeepSeek R1 原生）
-> - 模型输出中包含 `<think>...</think>` 标签（自动剥离）
-
---
-
-### 5. 工具调用
-
-#### `tool-input-start` — 工具调用开始
-
-```json
-{"type": "tool-input-start", "toolCallId": "call_abc123", "toolName": "search_knowledge_base"}
-```
-
-#### `tool-input-delta` — 工具输入流式内容（增量）
-
-```json
-{"type": "tool-input-delta", "toolCallId": "call_abc123", "inputTextDelta": "San Fra"}
-```
-
-#### `tool-input-available` — 工具输入完整参数
-
-```json
-{
-  "type": "tool-input-available",
-  "toolCallId": "call_abc123",
-  "toolName": "search_knowledge_base",
-  "input": {"query": "机器学习入门"}
-}
-```
-
-#### `tool-output-available` — 工具执行结果
-
-```json
-{
-  "type": "tool-output-available",
-  "toolCallId": "call_abc123",
-  "output": {"status": "completed", "result_length": 1234}
-}
-```
-
-> 注意：`search_knowledge_base` 只返回摘要（不含全文），`write_todos`、`link_preview`、`display_image`、`scrape_webpage`、`generate_podcast` 会返回完整 output 供前端渲染组件。
-
---
-
-### 6. 来源引用
-
-#### `source-url` — URL 来源
-
-```json
-{
-  "type": "source-url",
-  "sourceId": "https://example.com",
-  "url": "https://example.com",
-  "title": "示例页面"
-}
-```
-
-#### `source-document` — 文档来源
-
-```json
-{
-  "type": "source-document",
-  "sourceId": "doc_123",
-  "mediaType": "file",
-  "title": "报告.pdf",
-  "description": "第三季度报告"
-}
-```
-
---
-
-### 7. 文件
-
-```json
-{"type": "file", "url": "https://example.com/image.png", "mediaType": "image/png"}
-```
-
---
-
-### 8. 自定义数据（`data-*` 类型）
-
-#### `data-terminal-info` — 终端信息提示
-
-```json
-{
-  "type": "data-terminal-info",
-  "data": {
-    "text": "知识库搜索已完成",
-    "type": "success"
-  }
-}
-```
-
-`type` 枚举值：`info` | `error` | `success` | `warning`
-
---
-
-#### `data-further-questions` — 推荐追问问题
-
-```json
-{
-  "type": "data-further-questions",
-  "data": {
-    "questions": ["问题1", "问题2", "问题3"]
-  }
-}
-```
-
---
-
-#### `data-thinking-step` — 思考步骤（思维链 UI 展示）
-
-```json
-{
-  "type": "data-thinking-step",
-  "data": {
-    "id": "thinking-1",
-    "title": "正在搜索知识库",
-    "status": "in_progress",
-    "items": ["Query: 机器学习入门"]
-  }
-}
-```
-
-| 字段 | 说明 |
-|------|------|
-| `id` | 步骤唯一 ID（格式 `thinking-N`） |
-| `title` | 步骤标题 |
-| `status` | `pending` \| `in_progress` \| `completed` |
-| `items` | 步骤详情列表（可选） |
-
-> 同一个 `id` 的步骤事件会被重复发送以更新状态（先 `in_progress` 后 `completed`）。
-
-**常见步骤标题对照：**
-
-| 工具 / 场景 | 标题 |
-|------------|------|
-| 初始分析 | 正在理解您的请求 / 正在分析您的内容 |
-| `search_knowledge_base` | 查询个人知识库中 |
-| `search_web` | 网查搜索中 |
-| `link_preview` | 正在获取链接预览 |
-| `display_image` | 正在分析图片 |
-| `scrape_webpage` | 正在抓取网页 |
-| `write_todos`（首次） | 正在创建计划 |
-| `write_todos`（更新） | 正在更新进度 |
-| `generate_podcast` | 正在生成播客 |
-
---
-
-### 9. 错误
-
-```json
-{
-  "type": "error",
-  "errorText": "API rate limit exceeded",
-  "errorType": "llm",
-  "errorCode": "rate_limit"
-}
-```
-
-| 字段 | 说明 |
-|------|------|
-| `errorText` | 错误描述文本 |
-| `errorType` | 错误类型（见下表） |
-| `errorCode` | 具体错误代码（可选） |
-
-**errorType 枚举：**
-
-| 值 | 含义 |
-|----|------|
-| `llm` | LLM / API 错误（模型不存在、限流、密钥错误等） |
-| `network` | 网络连通性错误 |
-| `timeout` | 请求超时 |
-| `authentication` | 鉴权 / 权限错误 |
-| `rate_limit` | 速率限制 |
-| `validation` | 输入验证错误 |
-| `internal` | 内部服务器错误 |
-| `unknown` | 未知错误 |
-
---
-
-### 10. 中断（Human-in-the-loop）
-
-```json
-{
-  "type": "interrupt",
-  "messageId": "msg_abc123",
-  "interrupt": {
-    "action_requests": [...],
-    "review_configs": [...]
-  },
-  "payload": {"expertAgentId": 42}
-}
-```
-
---
-
-## 完整流示例（普通问答）
-
-```
-data: {"type":"start","messageId":"msg_abc123"}
-
-data: {"type":"start-step"}
-
-data: {"type":"data-thinking-step","data":{"id":"thinking-1","title":"正在理解您的请求","status":"in_progress","items":["Processing: 什么是向量数据库？"]}}
-
-data: {"type":"data-thinking-step","data":{"id":"thinking-1","title":"正在理解您的请求","status":"completed","items":["Processing: 什么是向量数据库？"]}}
-
-data: {"type":"text-start","id":"text_xyz789"}
-
-data: {"type":"text-delta","id":"text_xyz789","delta":"向量数据库是"}
-
-data: {"type":"text-delta","id":"text_xyz789","delta":"一种专为存储和检索"}
-
-data: {"type":"text-delta","id":"text_xyz789","delta":"高维向量而设计的数据库..."}
-
-data: {"type":"text-end","id":"text_xyz789"}
-
-data: {"type":"finish-step"}
-
-data: {"type":"finish"}
-
-data: [DONE]
-```
-
---
-
-## 完整流示例（含工具调用）
-
-```
-data: {"type":"start","messageId":"msg_abc123"}
-
-data: {"type":"start-step"}
-
-data: {"type":"data-thinking-step","data":{"id":"thinking-1","title":"正在理解您的请求","status":"in_progress","items":["Processing: 搜索最新 AI 论文"]}}
-
-data: {"type":"data-thinking-step","data":{"id":"thinking-1","title":"正在理解您的请求","status":"completed","items":["Processing: 搜索最新 AI 论文"]}}
-
-data: {"type":"data-thinking-step","data":{"id":"thinking-2","title":"查询个人知识库中","status":"in_progress","items":["Query: 最新 AI 论文"]}}
-
-data: {"type":"tool-input-start","toolCallId":"call_xxx","toolName":"search_knowledge_base"}
-
-data: {"type":"tool-input-available","toolCallId":"call_xxx","toolName":"search_knowledge_base","input":{"query":"最新 AI 论文"}}
-
-data: {"type":"data-thinking-step","data":{"id":"thinking-2","title":"Searching knowledge base","status":"completed","items":["Query: 最新 AI 论文","Found relevant information (2048 chars)"]}}
-
-data: {"type":"tool-output-available","toolCallId":"call_xxx","output":{"status":"completed","result_length":2048}}
-
-data: {"type":"data-terminal-info","data":{"text":"知识库搜索已完成","type":"success"}}
-
-data: {"type":"text-start","id":"text_xyz789"}
-
-data: {"type":"text-delta","id":"text_xyz789","delta":"根据知识库中的内容..."}
-
-data: {"type":"text-end","id":"text_xyz789"}
-
-data: {"type":"finish-step"}
-
-data: {"type":"finish"}
-
-data: [DONE]
-```
-
---
-
-## 完整流示例（含推理过程）
-
-```
-data: {"type":"start","messageId":"msg_abc123"}
-
-data: {"type":"start-step"}
-
-data: {"type":"reasoning-start","id":"reasoning_r01"}
-
-data: {"type":"reasoning-delta","id":"reasoning_r01","delta":"让我先分析这个问题..."}
-
-data: {"type":"reasoning-delta","id":"reasoning_r01","delta":"需要考虑以下几个方面..."}
-
-data: {"type":"reasoning-end","id":"reasoning_r01"}
-
-data: {"type":"text-start","id":"text_xyz789"}
-
-data: {"type":"text-delta","id":"text_xyz789","delta":"综合分析后，结论是..."}
-
-data: {"type":"text-end","id":"text_xyz789"}
-
-data: {"type":"finish-step"}
-
-data: {"type":"finish"}
-
-data: [DONE]
-```
-
---
-
-## 标准消息流顺序
-
-```
-start
-  └─ start-step
-       ├─ [data-thinking-step × N]   思考步骤（可多次）
-       ├─ [reasoning-start/delta/end] 推理过程（可选）
-       ├─ [tool-input-start]          工具调用开始（可多次）
-       ├─ [tool-input-available]      工具参数确认
-       ├─ [tool-output-available]     工具结果
-       ├─ [data-terminal-info]        终端提示（可多次）
-       ├─ [source-url / source-document] 来源引用（可选）
-       ├─ text-start
-       │    └─ text-delta × N         流式文本
-       └─ text-end
-     finish-step
-finish
-[DONE]
-```
@@ -1,229 +0,0 @@
-# 问答模式路由智能体设计方案
-
-> **状态**：部分实现 ✓
-> - ✅ `subagent_mode` 注入机制已实现（`build_run_config`、`_CONTEXT_CONFIGURABLE_KEYS`）
-> - ✅ DeerFlow 运行时 `subagent_mode` 加载已实现（`make_lead_agent`）
-> - ✅ `router_quality_tool.py` 已创建
-> - ✅ 子 Agent 目录结构已创建（7个子 Agent 的 SOUL.md 和 config.yaml）
-> - ✅ 路由器 SOUL.md 已更新
-> - ⏳ 集成测试和质检提示词测试待完成
-
-## 1. 背景与目标
-
-路由器智能体（`f0e75f44f7594053ba1567ed89258f35`）根据用户问题判断最合适的问答模式（fast/rag/bigMode/moreModes/taskChat/hxchat/deerFlow），选择后需要调用相应子 Agent 执行，路由器对执行结果进行**完整性质检**，通过则流式输出到前端，不通过则重新匹配模式并再次执行。
-
-## 2. 整体流程
-
-```
-用户问题
-    │
-    ▼
-┌──────────────────────────────┐
-│ 路由器智能体                  │
-│ (已有 SOUL.md)                │
-│ ① 判断最佳模式                │
-└─────────────┬────────────────┘
-              │ 选择模式
-              ▼
-┌──────────────────────────────┐
-│ 子 Agent 执行                 │
-│ (完整执行完毕，结果缓存)        │
-└─────────────┬────────────────┘
-              │ 执行完毕
-              ▼
-┌──────────────────────────────┐
-│ 路由器质检                    │
-│ LLM 判断结果是否完整覆盖用户问题 │
-└─────────────┬────────────────┘
-              │
-         ③ 质检结果
-         ┌────┴────┐
-         │通过      │不通过
-         ▼         ▼
-     流式输出   重新匹配模式
-     到前端     (最多重试2次)
-```
-
- **最大重试次数**：每个问题最多 2 次重试（总共最多 3 次执行），超过后强制输出当前结果并标注"结果可能不完整"
-
-## 3. 目录结构
-
-```
-.deer-flow/agents/f0e75f44f7594053ba1567ed89258f35/
-├── SOUL.md                     ← 路由器智能体（已有）
-├── config.yaml                 ← 路由器配置
-└── subagents/
-    ├── fast/
-    │   ├── SOUL.md             ← 快速问答子 Agent
-    │   └── config.yaml         ← tool_groups 声明
-    ├── rag/
-    │   ├── SOUL.md
-    │   └── config.yaml
-    ├── bigMode/
-    │   ├── SOUL.md
-    │   └── config.yaml
-    ├── moreModes/
-    │   ├── SOUL.md
-    │   └── config.yaml
-    ├── taskChat/
-    │   ├── SOUL.md
-    │   └── config.yaml
-    ├── hxchat/
-    │   ├── SOUL.md
-    │   └── config.yaml
-    └── deerFlow/
-        ├── SOUL.md
-        └── config.yaml
-```
-
-**父子关系**：子 Agent 目录放在路由器下二级 `subagents/`，通过目录层级体现父子结构。
-
-## 4. 子 Agent 配置
-
-### 4.1 config.yaml 格式
-
-```yaml
-id: rag
-name: 知识库问答子Agent
-description: 从知识库检索并返回引用
-tool_groups:
-  - knowledge          # 知识库检索工具组
-  - file:read          # 只读文件工具
-skills: []
-model: deepseek-chat
-```
-
-### 4.2 tool_groups 说明
-
- tool_groups 在系统级 `config.yaml` 中统一定义（`tool_groups` 列表）
- 子 Agent 的 config.yaml 通过 `tool_groups` 字段声明自己可以使用哪些工具组
- 工具组示例：web（网页搜索）、knowledge（知识库检索）、file:read、file:write、bash 等
-
-## 5. 调用方式
-
-### 5.1 复用 Gateway API（方案 A — 推荐）
-
-路由器通过 DeerFlow 现有 `/api/threads/{thread_id}/runs/stream` 接口调用子 Agent：
-
-```
-POST /api/threads/{thread_id}/runs/stream
-{
-  "assistant_id": "f0e75f44f7594053ba1567ed89258f35",
-  "context": {
-    "subagent_mode": "rag"          ← 路由器注入子模式
-  },
-  "input": {
-    "messages": [...]
-  },
-  "stream_mode": ["values"]
-}
-```
-
-**执行步骤**：
-1. 路由器启动一个 run，assistant_id 指向路由器本身
-2. 路由器通过 `context.subagent_mode` 告知 DeerFlow 运行时本次应加载哪个子 Agent
-3. DeerFlow 运行时加载 `subagents/{subagent_mode}/SOUL.md` 和对应的 tool_groups
-4. 子 Agent 完整执行，结果缓存在 StreamBridge 中
-5. 执行完毕后，路由器读取完整结果
-
-**context.subagent_mode 注入机制**：
- `build_run_config` 中新增 `subagent_mode` 到 `_CONTEXT_CONFIGURABLE_KEYS`
- `make_lead_agent` 读取 `configurable.subagent_mode`，如果存在则加载对应子 Agent 的 SOUL.md 和工具配置
- 如果 `subagent_mode` 不存在，则正常运行路由器自己的 SOUL.md
-
-### 5.2 质检提示词
-
-路由器在子 Agent 执行完毕后，用 LLM 进行完整性质检：
-
-```
-你是一个质检员。上游子 Agent 已根据问题执行完毕。
-请判断以下结果是否完整覆盖了用户问题的所有子问题。
-
-用户原始问题：{original_question}
-
-子 Agent 执行结果：
-{agent_output}
-
-请只返回 JSON 格式：
-{
-  "passed": true/false,
-  "reason": "判断理由（10字内）",
-  "missing_parts": ["缺失的子问题1", "缺失的子问题2"]  // 如果 passed=false
-}
-```
-
-**质检维度**：完整性（结果是否覆盖了用户问题的所有子问题）
-
-## 6. 关键代码改动
-
-### 6.1 DeerFlow 运行时改动 ✓
-
-**文件**：`packages/harness/deerflow/agents/lead_agent/agent.py`
-
-已实现：
- `make_lead_agent` 读取 `configurable.subagent_mode`（第362-394行）
- 如果存在，加载 `.deer-flow/agents/{agent_id}/subagents/{subagent_mode}/SOUL.md` 和对应 `config.yaml`
- 工具绑定使用子 Agent 的 tool_groups，而非父 Agent 的
-
-### 6.2 build_run_config 改动 ✓
-
-**文件**：`app/gateway/services.py`
-
-已实现：
- `_CONTEXT_CONFIGURABLE_KEYS` 已包含 `subagent_mode`（第149-171行）
- `merge_run_context_overrides` 将 `subagent_mode` 透传到 configurable
-
-### 6.3 路由器 SOUL.md 改动 ✓
-
-**文件**：`.deer-flow/agents/f0e75f44f7594053ba1567ed89258f35/SOUL.md`
-
-已更新：
- 角色扩展：增加"在确定模式后，调用相应子 Agent 执行并对结果进行质检"的职责
- 工具描述：已声明 router_quality_check 工具
-
-### 6.4 新增路由器质检工具 ✓
-
-**文件**：`packages/harness/deerflow/tools/builtins/router_quality_tool.py`
-
-已实现：
-```python
-@tool("router_quality_check", parse_docstring=True, return_direct=True)
-def router_quality_check(original_question: str, agent_output: str) -> str:
-    """质检工具 — 判断子 Agent 输出是否完整覆盖用户问题"""
-```
-
-## 7. 数据流
-
-```
-用户问题
-    │
-    ▼
-路由器 SOUL.md 判断模式
-    │
-    ▼
-启动子 Agent Run（context.subagent_mode = rag）
-    │
-    ▼
-子 Agent SOUL.md + tool_groups 执行
-    │
-    ▼
-StreamBridge 缓存完整结果
-    │
-    ▼
-路由器调用 router_quality_check 质检
-    │
-    ├── passed=true → 流式输出到前端
-    └── passed=false → 重新匹配模式（最多2次重试）
-```
-
-## 8. 测试计划
-
- **单元测试**：`tests/test_router_subagent.py` — 测试模式判断、质检逻辑、重试机制
- **集成测试**：手动调用 `/api/threads/{thread_id}/runs/stream`，验证完整流程
- **质检提示词测试**：针对不同问题类型测试质检结果的准确性
-
-## 9. 依赖项
-
- 路由器复用现有 Gateway API，无需新建接口
- 质检使用 LLM（deepseek-chat 或配置中指定的模型）
- tool_groups 机制依赖系统级 config.yaml 中的工具组定义
@@ -24,10 +24,16 @@ VITE_AIPI_B2ACTOR_XWT_PATH=/fromB/toXWT?isFrame=1
 VITE_AIPI_KNOWLEDGE_IFRAME_API_URL=https://ch1.b.uat.4.cn/knowes/api/iframeKnowledgeUrl
 VITE_AIPI_KNOWLEDGE_IFRAME_SKIN=red
 VITE_AIPI_MOPECHAT_URL=https://ch1.b.uat.4.cn/likun_b1_mope
-VITE_AIPI_BACKENP_URL=https://knowledgetoolserver.b.uat.4.cn
-# 我的笔记前端
-VITE_AIPI_FRONTEND_URL=https://knowledgetoolserver.b.uat.4.cn
+VITE_AIPI_BACKENP_URL=http://47.88.25.99:8000
+# 工作室/笔记本后端接口（侧边栏“工作室”列表、笔记本详情等都走这里，不是 VITE_NOTE_API_BASE_URL）
+# 工作室/笔记本前端地址（用于 auth/callback 等跳转）
+# VITE_AIPI_FRONTEND_URL=https://knowledgetoolserver.b.uat.4.cn
+VITE_NOTEBOOK_API_BASE_URL=http://47.88.25.99:8000
+# 工作室侧边栏显示开关；仅控制入口显示，展开内容仍依赖 notebook 接口成功返回数据
+VITE_STUDIO_ENABLED=true
+VITE_AIPI_FRONTEND_URL=http://47.88.25.99:3000
 VITE_AIPI_CONSUMER_URL=https://ch1.b.uat.4.cn/consumer
+
 # MaxKey 鉴权（getTokenByOnlineTicket）
 VITE_AUTH_BASE_URL=https://auth.y.sit.4.cn
 VITE_AIPI_PGLINKTO_URL=https://pg.b.uat.4.cn
@@ -35,5 +41,3 @@ VITE_AIPI_XKLINKTO_URL=https://kz.b.uat.4.cn
 # 可选：Canvas 独立 LangGraph 地址（不设则回退到 VITE_LANGGRAPH_BASE_URL）
 # VITE_CANVAS_LANGGRAPH_BASE_URL=

-# 我的笔记是否显示，侧边栏
-VITE_STUDIO_ENABLED=false
@@ -15,10 +15,15 @@ VITE_AIPI_B2ACTOR_XWT_PATH=/fromB/toXWT?isFrame=1
 VITE_AIPI_KNOWLEDGE_IFRAME_API_URL=https://ch1.b.uat.4.cn/knowes/api/iframeKnowledgeUrl
 VITE_AIPI_KNOWLEDGE_IFRAME_SKIN=red
 VITE_AIPI_MOPECHAT_URL=https://ch1.b.uat.4.cn/likun_b1_mope
+# 工作室/笔记本后端接口（侧边栏“工作室”列表、笔记本详情等都走这里，不是 VITE_NOTE_API_BASE_URL）
 VITE_AIPI_BACKENP_URL=https://knowledgetoolserver.b.uat.4.cn
+# 工作室/笔记本前端地址（用于 auth/callback 等跳转）
+VITE_AIPI_FRONTEND_URL=https://knowledgetoolserver.b.uat.4.cn
 VITE_AIPI_CONSUMER_URL=https://ch1.b.uat.4.cn/consumer
 VITE_AUTH_BASE_URL=https://auth.y.sit.4.cn
 VITE_AIPI_PGLINKTO_URL=https://pg.b.uat.4.cn
 VITE_AIPI_XKLINKTO_URL=https://kz.b.uat.4.cn

 # VITE_NOTE_API_BASE_URL=http://127.0.0.1:8000
+# 工作室侧边栏显示开关；仅控制入口显示，展开内容仍依赖 notebook 接口成功返回数据
+VITE_STUDIO_ENABLED=true
@@ -21,6 +21,9 @@
 # VITE_BACKEND_BASE_URL=https://ch1.b.uat.4.cn/deerflow
 # VITE_LANGGRAPH_BASE_URL=https://ch1.b.uat.4.cn/deerflow/api
 # VITE_NOTE_API_BASE_URL=http://47.88.25.99:8000
+# VITE_AIPI_BACKENP_URL=https://knowledgetoolserver.b.uat.4.cn
+# VITE_AIPI_FRONTEND_URL=https://knowledgetoolserver.b.uat.4.cn
+# VITE_STUDIO_ENABLED=true  # 仅控制“工作室”入口显示，列表内容仍依赖 notebook 接口数据

 # --- 生产打包（见 .env.production）---
 # 部署前修改 .env.production 中的地址，再执行 pnpm build
@@ -1,32 +1,43 @@
-# 内网 / 局域网生产打包（npm run build:network 或 pnpm build:network）
-# 打包前请将 192.168.1.100 改为实际服务器 IP；变量会写入 dist，运行时不可再改
+# 本地开发（pnpm dev）— 与原先 .env 保持一致
+# 个人覆盖请新建 .env.development.local（已 gitignore，优先级更高）

-# Gateway / DeerFlow API（与 offline-backend DEPLOY 文档一致）
+# Gateway / DeerFlow API
 VITE_BACKEND_BASE_URL=http://47.88.25.99:7001
 VITE_LANGGRAPH_BASE_URL=http://47.88.25.99:7001/api

 # 轻应用「新建笔记」系列接口
-VITE_NOTE_API_BASE_URL=http://192.168.1.100:8000
-# CMZS 后端接口
-VITE_API_BASE_URL=http://192.168.1.100/zncm
+VITE_NOTE_API_BASE_URL=http://47.88.25.99:8000
+# CMZS后端接口
+VITE_API_BASE_URL=https://ch1.b.uat.4.cn/zncm
 # 佳来模型对话接口
-VITE_AIPI_CHAT_URL=http://192.168.1.100/gpt
+VITE_AIPI_CHAT_URL=https://ch1.b.uat.4.cn/gpt
 # 多轮检索接口
-VITE_AIPI_GENERATE_CHAT_URL=http://192.168.1.100/jialai_b1_chat
-VITE_AIPI_TASK_CHAT_URL=http://192.168.1.100/qq_b1_chat
-VITE_AIPI_KNOWLEDGE_URL=http://192.168.1.100/knowlibrary
-VITE_AIPI_B1COH_URL=http://192.168.1.100/web
-VITE_AIPI_B2ACTOR_URL=http://192.168.1.100
+VITE_AIPI_GENERATE_CHAT_URL=https://ch1.b.uat.4.cn/jialai_b1_chat
+VITE_AIPI_TASK_CHAT_URL=https://ch1.b.uat.4.cn/qq_b1_chat
+VITE_AIPI_KNOWLEDGE_URL=https://chlib.b.uat.4.cn/knowlibrary
+VITE_AIPI_B1COH_URL=https://ch1.b.uat.4.cn/web
+VITE_AIPI_B2ACTOR_URL=https://ty.b.uat.4.cn
 VITE_AIPI_B2ACTOR_XWT_PATH=/fromB/toXWT?isFrame=1
-VITE_AIPI_KNOWLEDGE_IFRAME_API_URL=http://192.168.1.100/knowes/api/iframeKnowledgeUrl
+VITE_AIPI_KNOWLEDGE_IFRAME_API_URL=https://ch1.b.uat.4.cn/knowes/api/iframeKnowledgeUrl
 VITE_AIPI_KNOWLEDGE_IFRAME_SKIN=red
-VITE_AIPI_MOPECHAT_URL=http://192.168.1.100/likun_b1_mope
-VITE_AIPI_BACKENP_URL=http://192.168.1.100
-VITE_AIPI_CONSUMER_URL=http://192.168.1.100/consumer
-# MaxKey 鉴权（getTokenByOnlineTicket，内网部署请改为实际地址）
-VITE_AUTH_BASE_URL=https://auth.y.sit.4.cn
-VITE_AIPI_PGLINKTO_URL=http://192.168.1.100
-VITE_AIPI_XKLINKTO_URL=http://192.168.1.100
+VITE_AIPI_B2ACTOR_XWT_PATH=/fromB/toXWT?isFrame=1
+VITE_AIPI_KNOWLEDGE_IFRAME_API_URL=https://ch1.b.uat.4.cn/knowes/api/iframeKnowledgeUrl
+VITE_AIPI_KNOWLEDGE_IFRAME_SKIN=red
+VITE_AIPI_MOPECHAT_URL=https://ch1.b.uat.4.cn/likun_b1_mope
+VITE_AIPI_BACKENP_URL=http://47.88.25.99:8000
+# 工作室/笔记本后端接口（侧边栏“工作室”列表、笔记本详情等都走这里，不是 VITE_NOTE_API_BASE_URL）
+# 工作室/笔记本前端地址（用于 auth/callback 等跳转）
+# VITE_AIPI_FRONTEND_URL=https://knowledgetoolserver.b.uat.4.cn
+VITE_NOTEBOOK_API_BASE_URL=http://47.88.25.99:8000
+# 工作室侧边栏显示开关；仅控制入口显示，展开内容仍依赖 notebook 接口成功返回数据
+VITE_STUDIO_ENABLED=true
+VITE_AIPI_FRONTEND_URL=http://47.88.25.99:3000
+VITE_AIPI_CONSUMER_URL=https://ch1.b.uat.4.cn/consumer

-# 可选：Canvas 独立 LangGraph 地址
+# MaxKey 鉴权（getTokenByOnlineTicket）
+VITE_AUTH_BASE_URL=https://auth.y.sit.4.cn
+VITE_AIPI_PGLINKTO_URL=https://pg.b.uat.4.cn
+VITE_AIPI_XKLINKTO_URL=https://kz.b.uat.4.cn
+# 可选：Canvas 独立 LangGraph 地址（不设则回退到 VITE_LANGGRAPH_BASE_URL）
 # VITE_CANVAS_LANGGRAPH_BASE_URL=
+
@@ -19,13 +19,17 @@ VITE_AIPI_B2ACTOR_XWT_PATH=/fromB/toXWT?isFrame=1
 VITE_AIPI_KNOWLEDGE_IFRAME_API_URL=https://ch1.b.uat.4.cn/knowes/api/iframeKnowledgeUrl
 VITE_AIPI_KNOWLEDGE_IFRAME_SKIN=red
 VITE_AIPI_MOPECHAT_URL=https://ch1.b.uat.4.cn/likun_b1_mope
+# 工作室/笔记本后端接口（侧边栏“工作室”列表、笔记本详情等都走这里，不是 VITE_NOTE_API_BASE_URL）
 VITE_AIPI_BACKENP_URL=https://knowledgetoolserver.b.uat.4.cn
 VITE_AIPI_CONSUMER_URL=https://ch1.b.uat.4.cn/consumer
 # MaxKey 鉴权（getTokenByOnlineTicket）
 VITE_AUTH_BASE_URL=https://auth.y.uat.4.cn
 VITE_AIPI_PGLINKTO_URL=https://pg.b.uat.4.cn
 VITE_AIPI_XKLINKTO_URL=https://kz.b.uat.4.cn
-VITE_AIPI_FRONTEND_URL=https://knowledgetoolserver.b.uat.4.cn
+# 工作室/笔记本前端地址（用于 auth/callback 等跳转）
+VITE_AIPI_FRONTEND_URL=https://knowledgetoolweb.b.uat.4.cn
+# 工作室侧边栏显示开关；仅控制入口显示，展开内容仍依赖 notebook 接口成功返回数据
+VITE_STUDIO_ENABLED=true

 # 可选：Canvas 独立 LangGraph 地址
 # VITE_CANVAS_LANGGRAPH_BASE_URL=
@@ -3,3 +3,6 @@
 # VITE_BACKEND_BASE_URL=https://your-intranet-host/deerflow
 # VITE_LANGGRAPH_BASE_URL=https://your-intranet-host/deerflow/api
 # VITE_NOTE_API_BASE_URL=https://your-intranet-host/note-api
+# VITE_AIPI_BACKENP_URL=https://your-notebook-backend-host
+# VITE_AIPI_FRONTEND_URL=https://your-notebook-frontend-host
+# VITE_STUDIO_ENABLED=true
@@ -19,12 +19,17 @@ VITE_AIPI_B2ACTOR_XWT_PATH=/fromB/toXWT?isFrame=1
 VITE_AIPI_KNOWLEDGE_IFRAME_API_URL=https://ch1.b.sit.4.cn/knowes/api/iframeKnowledgeUrl
 VITE_AIPI_KNOWLEDGE_IFRAME_SKIN=red
 VITE_AIPI_MOPECHAT_URL=https://ch1.b.sit.4.cn/likun_b1_mope
+# 工作室/笔记本后端接口（侧边栏“工作室”列表、笔记本详情等都走这里，不是 VITE_NOTE_API_BASE_URL）
 VITE_AIPI_BACKENP_URL=https://knowledgetoolserver.b.sit.4.cn
 VITE_AIPI_CONSUMER_URL=https://ch1.b.sit.4.cn/consumer
 # MaxKey 鉴权（getTokenByOnlineTicket）
 VITE_AUTH_BASE_URL=https://auth.y.sit.4.cn
 VITE_AIPI_PGLINKTO_URL=https://pg.b.sit.4.cn
 VITE_AIPI_XKLINKTO_URL=https://kz.b.sit.4.cn
+# 工作室/笔记本前端地址（用于 auth/callback 等跳转）
+VITE_AIPI_FRONTEND_URL=https://knowledgetoolserver.b.sit.4.cn
+# 工作室侧边栏显示开关；仅控制入口显示，展开内容仍依赖 notebook 接口成功返回数据
+VITE_STUDIO_ENABLED=true

 # 可选：Canvas 独立 LangGraph 地址
 # VITE_CANVAS_LANGGRAPH_BASE_URL=
@@ -107,7 +107,7 @@ http://localhost:5173/#/embed/chats/new?sessionId=...&message=...&username=guest

 ## 4. 公开 HTTP API（无需鉴权）

-前缀：`/api/public/embed/`（走 Gateway，与 `VITE_BACKEND_BASE_URL` 一致，默认 `http://127.0.0.1:8001`）。
+前缀：`/api/public/embed/`（走 Gateway，与 `VITE_BACKEND_BASE_URL` 一致，默认 `http://47.88.25.99:7001/`）。

 CSRF / Auth 中间件对 `/api/public/` 放行；请求 **不需要** Cookie。

@@ -315,7 +315,7 @@ document.getElementById("deerflow-embed").src =
 ### 5.2 轮询直到结束

 ```javascript
-const API = "http://127.0.0.1:8001"; // VITE_BACKEND_BASE_URL
+const API = "http://47.88.25.99:7001/"; // VITE_BACKEND_BASE_URL

 async function pollUntilFinished(sessionId) {
  const res = await fetch(
@@ -348,7 +348,7 @@ const timer = setInterval(async () => {

 ### 5.3 跨域注意

-父页面从浏览器 `fetch` Gateway（如 `http://127.0.0.1:8001`）时，**Origin 必须是后端 CORS 白名单里的完整地址**（含协议、主机、端口），与 API 地址是否写 `localhost` / `127.0.0.1` 无关。
+父页面从浏览器 `fetch` Gateway（如 `http://47.88.25.99:7001/`）时，**Origin 必须是后端 CORS 白名单里的完整地址**（含协议、主机、端口），与 API 地址是否写 `localhost` / `127.0.0.1` 无关。

 **本地开发**（前端默认 `5174`）请在 Gateway 环境变量中配置：

@@ -0,0 +1,514 @@
+# 多智能体规划 · 后台挂起执行 + 进度可视化 —— 分步实现方案
+
+> 目标：在「多智能体规划」第二步增加**后台挂起**能力——把当前任务挂到后台，自动一路跑到
+> 最后一步（Step3 结果绘制完成）为止；历史记录下拉框里进行中的任务显示加载动画；点击进行中
+> 的任务弹出一个**大弹窗**，里面是**横向的智能体派活链路流程图**（节点 = 各席位智能体，图标 +
+> 名称，不同颜色，正在发言的节点和它的连接线带加载动画）；弹窗里有「查看」按钮，点击进入正在
+> 进行中的任务实时观察。
+
+---
+
+## 0. 现状与架构事实（动手前必读）
+
+研究自现有代码，决定了整套方案的形态。**关键结论：当前编排循环跑在前端，离开页面即中断。**
+
+### 0.1 前端现状
+
+| 事实 | 位置 |
+|------|------|
+| Step2 编排循环（leader → 顺序派 special → leader … 直到 `dispatched===[]` 共识 / `MAX_CYCLES=8`）**完全由前端 hook 驱动** | `src/roundtable-planning/hooks/useStep2Orchestration.ts:992-1204`（recommend）、`1228-1439`（chain） |
+| 循环由 `currentStep===2` 的 `useEffect` 启停；离开 Step2 的 cleanup 会 `orchestrationCancelRef.current=true` + `abortAllInFlight()` 中断 | `useStep2Orchestration.ts:1468-1541`（尤其 cleanup `1534-1537`、`1471-1477`） |
+| 共识判定：`leaderRes.dispatched.length===0` → `setHasConsensus(true)` | `useStep2Orchestration.ts:1091-1099` |
+| 进入 Step3：手动点按钮，前置 `hasConsensus===true` | `Step2Panel.tsx:370-381`、`RoundtablePlanningPage.tsx:586-595` |
+| Step3「结果绘制」：前端流式调 `roundtable-report` 智能体，写出 `outputs/方案总览.html`，`phase→"done"` 即完成 | `src/roundtable-planning/hooks/useStep3Report.ts:36,51,165,560-596,636-652` |
+| 草稿持久化：`/api/roundtable-drafts`，含 step1/step2/step3 三段快照 + `furthestStep(1|2|3)`，**无显式 status 字段** | `src/roundtable-planning/api/drafts.ts:25-110,112,184-225` |
+| 历史下拉 UI（触发按钮 + 列表 + 重命名/删除） | `RoundtablePlanningPage.tsx:771-892` |
+| 自动保存触发点（Step1 回复完 / Step2 每轮气泡收尾 / Step3 报告保存 / 步骤前进） | `useDraftPersistence.ts:248-316` |
+| 加载草稿恢复：`handleLoadDraft` → `getDraft` → `cancelAllStreams` → hydrate → `setCurrentStep(furthestStep)` | `useDraftPersistence.ts:308-368` |
+
+### 0.2 后端现状
+
+| 事实 | 位置 |
+|------|------|
+| `/api/multi-agent/init`：为各席位并行建 thread + 单例总控 `roundtable-coordinator`，SSE 返回 `seat_ready`/`coordinator_ready`/`init_done(thread_ids)` | `app/gateway/routers/multi_agent.py:647-823` |
+| `/api/multi-agent/run/stream`：驱动**单轮** leader 或 special 的 LLM 执行，末尾 JSON 帧 `status`（派活列表 / `[]` 共识 / `clarification` / `error`） | `multi_agent.py:1076-1142` |
+| `/api/multi-agent/report/init`：为 Step3 报告建 thread | `multi_agent.py`（report/init） |
+| **后端不存在编排循环**——leader 派活由前端解释后再逐个发 `run/stream`；后端只做单轮执行 + 把派活/完成「广播」追加进各 thread 历史消息 | `multi_agent.py:24-29,487-502,1108-1142` |
+| 派活格式：`agent_orchestration` 工具调用 `{agent_name, task}`（旧式 bash 解析兼容） | `multi_agent.py:525-552` |
+
+### 0.3 可复用模板：AI 写作的「后台多阶段流程」
+
+AI 写作已经把「后台跑多阶段流程 + 前端 SSE 订阅 + 可 resume + 定时清理」跑通了，**圆桌后台作业直接照搬这套**：
+
+| 模板要素 | 位置 |
+|------|------|
+| LangGraph 图驱动多阶段（researching/writing_outline/writing_draft/reviewing/…），条件路由推进，`interrupt()` 暂停点等用户输入 | `packages/harness/deerflow/agents/ai_writing/graph.py`、`nodes/*`（`pause_material_confirm` 等 `45-290`） |
+| Session 持久化表 `ai_writing_sessions`：`id/user_id/title/status/draft_*/transcript(LONGTEXT)/...`，`status∈{in_progress,done,error}` | `packages/harness/deerflow/persistence/ai_writing_sessions/model.py:14-39` |
+| `transcript` 用 `PortableLongText`（MySQL LONGTEXT，避开 64KB），时间用 `BeijingDateTime` | 同上 `27-38` |
+| 进度走 LangGraph Server 标准流 `stream_mode=["messages-tuple","values"]`，**graph 在 langgraph runtime 里跑，任意 worker 可 join stream**（这是后台健壮性的关键） | `ai_writing.py:1-17`、`langgraph.json:16-18` |
+| Checkpointer 共享 `AsyncSqliteSaver`，落 `.deer-flow/data/checkpoints.db`（需挂数据卷） | `runtime/checkpointer/async_provider.py` |
+| Cleanup cron（leader 文件锁、活跃保护、先删 CP 再删 DB、admin 手动触发） | `app/gateway/ai_writing_cleanup.py:26,34-59,111-135,193-215,307-367` |
+| **多 worker 坑**：模块级内存 dict（`_event_queues`）每 worker 一份会丢会话；SSE 进程内直调会整段 buffer。解法：状态进 DB+checkpointer、SSE 走真 TCP loopback `127.0.0.1`（`trust_env=False` 禁代理） | `multi_agent.py:271-293`、`AIWritingPage.tsx` 文件头注释 §3/§5 |
+
+### 0.4 决策（已与产品确认）
+
+1. **后端真后台执行**：把编排循环搬到后端 run，刷新 / 关页 / 换设备都不中断。
+2. **流程图节点 = 智能体派活链路**：横向排列的席位节点，正在发言的节点 + 连接线加载动画。
+
+> ⚠️ **本方案最大的工作量在 Phase 2**：把目前跑在前端 TS 里的编排循环（`runOrchestration`/`runChainOrchestration`）
+> 移植成一个后端 **LangGraph「圆桌总控编排图」**。这是与 AI 写作一致、可在 LangGraph runtime 里
+> 后台跑且天然 checkpoint 的健壮路径。下文每个阶段都给出验收标准，可独立提测。
+
+---
+
+## 1. 总体架构
+
+```
+┌─────────────────────────────── 前端 (frontend-web) ───────────────────────────────┐
+│  Step2Panel ──「后台挂起」按钮──▶ POST /api/roundtable-jobs (start)                  │
+│  HistoryDropdown ── 进行中任务显示 spinner ──▶ 点击 ──▶ DispatchChainModal(大弹窗)    │
+│        DispatchChainModal ── 订阅 GET /api/roundtable-jobs/{id}/stream(SSE)          │
+│              横向派活链路流程图(节点=席位, 活动节点+连线动画) ──「查看」──▶ 进入任务实时观察 │
+└───────────────────────────────────────────────────────────────────────────────────┘
+                                   │ SSE 进度 / 快照
+┌─────────────────────────────── 后端 (backend) ─────────────────────────────────────┐
+│  /api/roundtable-jobs  路由层(start/get/stream/resume/cancel) ── 仿 ai_writing.py     │
+│        │ 启动后台 run                                                                 │
+│  LangGraph「圆桌总控编排图」 roundtable_orchestrator  ── 仿 ai_writing graph           │
+│     init → leader_call → parse_dispatch → dispatch_seats(顺序) → loop ↺               │
+│         → consensus → report_draw(写 HTML) → done   （clarification 点 interrupt())   │
+│        │ 每次状态转移持久化进度                                                        │
+│  roundtable_jobs 表(status/phase/dispatch_chain/active_speaker/...) + 共享 checkpointer│
+│  cleanup cron (仿 ai_writing_cleanup.py)                                              │
+└───────────────────────────────────────────────────────────────────────────────────┘
+```
+
+**核心思路**：后台作业 = 一个 LangGraph 图的一次 run。图节点内部复用现有的单轮执行能力
+（`multi_agent.py` 里 leader/special 的 run 逻辑），把「解释派活 → 顺序派活 → 回到 leader」的
+循环从前端搬进图节点。前端从「驱动者」退化为「观察者」：通过 SSE 订阅进度渲染。
+
+---
+
+## 2. 数据契约（前后端共享，先定义后实现）
+
+### 2.1 作业状态机 `JobStatus`
+
+```
+queued          # 已创建，等待 worker 拉起
+running          # 编排进行中（Step2 派活循环 / Step3 绘制）
+awaiting_input   # 命中 clarification，等用户回答（interrupt 挂起）
+done             # 已跑到 Step3 绘制完成
+error            # 出错终止
+cancelled        # 用户取消
+```
+
+### 2.2 作业阶段 `JobPhase`（细化给流程图/进度条用）
+
+```
+initializing       # 建 thread / 总控就绪
+leader_thinking    # 总控在决策派活
+dispatching        # 正在顺序派活给席位（配合 active_speaker）
+consensus          # 共识达成（dispatched=[]）
+report_drawing     # Step3 报告绘制中
+report_done        # 绘制完成
+```
+
+### 2.3 派活链路节点 `DispatchChainNode`（流程图核心数据）
+
+```ts
+interface DispatchChainNode {
+  agentId: string;        // 席位 agent_id（小写）
+  name: string;           // 显示名
+  avatarType: string;     // 复用 getAvatarTypeFor(agentId, index) → 决定颜色
+  order: number;          // 横向排列次序（chain 模式=链条顺序；recommend 模式=席位/发言顺序）
+  state: 'pending' | 'active' | 'done';  // 节点状态（驱动颜色/动画）
+  lastSpokeCycle?: number;               // 最近发言轮次（可选，做 tooltip）
+}
+```
+
+### 2.4 进度事件 `JobProgressEvent`（SSE 推送的归一化事件）
+
+```ts
+type JobProgressEvent =
+  | { type: 'status';   status: JobStatus }
+  | { type: 'phase';    phase: JobPhase; cycle: number }
+  | { type: 'chain';    nodes: DispatchChainNode[] }           // 派活链路全量/增量
+  | { type: 'active';   agentId: string | null }               // 当前发言席位（null=总控/无）
+  | { type: 'consensus'; percentage: number }
+  | { type: 'dialogue'; bubble: Step2DialogueLike }            // 新增/收尾的对话气泡（供「查看」实时渲染）
+  | { type: 'clarification'; question: string }                // 命中澄清
+  | { type: 'done';     step3: DraftStep3Snapshot }            // 终态：最终报告快照
+  | { type: 'error';    detail: string };
+```
+
+> SSE 通道可直接复用 LangGraph Server 的 `values` 流（图状态快照），由前端 hook 把 `values`
+> 映射成上述归一化事件；也可在路由层做映射后再下发。**推荐前端映射**（少一层后端耦合）。
+
+### 2.5 作业记录 `RoundtableJob`（持久化 + 列表展示）
+
+```ts
+interface RoundtableJob {
+  id: string;
+  draftId: string;            // 关联的草稿
+  userId: string;
+  status: JobStatus;
+  phase: JobPhase;
+  cycle: number;              // 当前轮次（0..MAX_CYCLES）
+  dispatchChain: DispatchChainNode[];
+  activeAgentId: string | null;
+  consensusPercentage: number;
+  pendingClarification: string | null;
+  threadIds: Record<string,string> | null;  // 复用 ThreadIdMap
+  coordinatorName: string | null;
+  orchestrationMode: 'recommend' | 'chain';
+  chain?: { id: string; title: string } | null;
+  error: string | null;
+  createdAt: string;
+  updatedAt: string;
+}
+```
+
+---
+
+## Phase 1 —— 后端：圆桌作业持久化模型
+
+**目标**：建一张 `roundtable_jobs` 表（仿 `ai_writing_sessions`），存作业状态/阶段/派活链路，
+并在 `roundtable_drafts` 列表里能 join 出当前作业状态。
+
+**涉及文件（新增/改）**
+- 新增 `packages/harness/deerflow/persistence/roundtable_jobs/model.py`（ORM 模型，仿 `ai_writing_sessions/model.py:14-39`）
+- 新增 `.../roundtable_jobs/sql.py`（Repository：`create / get / update_progress / list_by_user / list_older_than / delete`，仿 `ai_writing_sessions/sql.py`）
+- 新增 alembic 迁移 `persistence/migrations/versions/<date>_create_roundtable_jobs.py`
+- 改 `roundtable_drafts` 的列表查询：返回里带上 `status`/`jobId`（LEFT JOIN roundtable_jobs，或在 draft 行上冗余一个 `status` 字段，二选一，见下）
+
+**步骤**
+1. 字段设计（对齐 §2.5）：`id(PK)`、`draft_id`、`user_id`、`status`、`phase`、`cycle(Int)`、
+   `dispatch_chain(PortableLongText/JSON)`、`active_agent_id`、`consensus_percentage(Int)`、
+   `pending_clarification(Text)`、`thread_ids(JSON)`、`coordinator_name`、`orchestration_mode`、
+   `chain(JSON)`、`error(Text)`、`created_at/updated_at(BeijingDateTime)`。
+2. `dispatch_chain` / `thread_ids` / `chain` 用 `PortableLongText` 存 JSON 字符串，repo 层序列化。
+3. 列表 join：给 `DraftMeta` 增加 `status?: JobStatus` 与 `jobId?: string`。
+   **推荐方案**：草稿与作业 1:1（一个草稿最多一个活跃作业），在 draft 列表查询 LEFT JOIN
+   `roundtable_jobs` 取最新作业的 `status`。
+4. 索引：`(user_id, updated_at)`、`(draft_id)`、`(status)`（cleanup/列表用）。
+
+**验收**
+- 迁移可 `alembic upgrade head` 跑通，MySQL 上 `dispatch_chain` 为 `longtext`。
+- 单测：create→update_progress→get 往返；`list_by_user` 按 `updated_at` 倒序；`list_older_than` 分批。
+
+---
+
+## Phase 2 —— 后端：圆桌总控编排 LangGraph 图（核心 / 最大工作量）
+
+**目标**：把前端的编排循环移植成一个后端 LangGraph 图，可在 LangGraph runtime 里后台跑、天然
+checkpoint，一路跑到 Step3 绘制完成。
+
+**涉及文件（新增）**
+- `packages/harness/deerflow/agents/roundtable_orchestrator/graph.py`（图装配，仿 `ai_writing/graph.py`）
+- `.../roundtable_orchestrator/state.py`（图状态 schema：intent、selectedAgents、threadIds、coordinatorName、
+  mode/chain、dialogues、dispatchChain、activeAgentId、cycle、consensus、phase、step3 等）
+- `.../roundtable_orchestrator/nodes/*.py`（各节点）
+- 在 `langgraph.json` 注册新 assistant `roundtable_orchestrator`（仿 ai_writing assistant 注册，参考 `langgraph.json:16-18`）
+
+**图节点设计（把前端循环逐段翻译过来）**
+
+| 节点 | 职责 | 对应前端逻辑 |
+|------|------|------|
+| `init` | 复用 `_create_thread_direct` 批量建席位 thread + 总控就绪（或接收前端已建好的 `threadIds` 直接用） | `useStep2Orchestration.ts:1485-1531` / `multi_agent.py:647-823` |
+| `leader_call` | 跑一轮总控（agent_type=leader），拿 `status`（派活列表 / `[]` / `clarification`） | 单轮逻辑 `multi_agent.py:1076-1142` |
+| `route_after_leader`（条件边） | `clarification`→`interrupt`；有派活→`dispatch_seats`；`[]`→`consensus` | `useStep2Orchestration.ts:1091-1181` |
+| `dispatch_seats` | **顺序**派活：对 dispatched 里每个席位依次跑 special run；每开始一个就更新 `activeAgentId` + 进度持久化 | `useStep2Orchestration.ts:1101-1181`（务必串行，勿并行，详见前端 §5.4 注释） |
+| `clarification_pause` | `interrupt()` 挂起，`status→awaiting_input`，写 `pending_clarification` | 仿 ai_writing `pause_*` `45-290` |
+| `consensus` | `setHasConsensus`、`consensus=100`，落库后进入 `report_draw` | `1091-1099` |
+| `report_draw` | 跑 `roundtable-report`（先 report/init 建 thread），流式写 `outputs/方案总览.html`，产出 `DraftStep3Snapshot` | `useStep3Report.ts:91-149,636-652,560-596` |
+| `done` | `status→done`、写 `step3` 进作业 + 回写草稿 step3 快照 | `RoundtablePlanningPage.tsx:613-617` |
+
+**关键实现要点**
+1. **复用单轮执行**：节点内部不要重写 LLM 调用，抽出 `multi_agent.py` 里 leader/special/report 的
+   单轮 run 为可被图节点直接 `await` 的内部函数（去掉 HTTP 层，进程内调 LangGraph）。
+2. **派活广播**：保留现有把「总控给 X 派了活 / X 完成」追加进各 thread 历史的广播
+   （`multi_agent.py:487-502`），让席位读到全局上下文。
+3. **MAX_CYCLES 兜底**：图里维护 `cycle`，≥8 强制收敛（对齐 `roundtable-constants.ts:13`）。
+4. **chain 模式**：`orchestration_mode==='chain'` 时按 `chain.seats` 固定顺序派活，跳过总控自由决策的
+   部分（对齐 `runChainOrchestration` `1228-1439`）。
+5. **进度落库**：每个节点结束 `update_progress(jobId, {phase, cycle, dispatchChain, activeAgentId,
+   consensus, dialogues_delta})`，前端 SSE 才有实时数据。
+6. **dialogues 累积**：把每轮气泡写进图状态 `dialogues`，既供「查看」实时渲染，也供作业结束回写草稿 step2。
+
+**验收**
+- 用脚本（仿 `scripts/probe_ai_writing_assistant.py`）直接对图发起一次 run，不开前端，能从 intent +
+  selectedAgents 一路跑到写出 `方案总览.html`，作业 `status` 终态 `done`。
+- 命中 clarification 时图 `interrupt`，`status=awaiting_input`，`pending_clarification` 有值。
+- chain 模式按链条顺序派活，recommend 模式由总控自由派活，两条路径都能收敛。
+
+---
+
+## Phase 3 —— 后端：作业控制 + 进度 SSE 接口
+
+**目标**：暴露 start/get/stream/resume/cancel，后台 run 走 LangGraph Server（任意 worker 可 join）。
+
+**涉及文件（新增/改）**
+- 新增 `app/gateway/routers/roundtable_jobs.py`（仿 `ai_writing.py` 的 CRUD + 控制壳）
+- 在 gateway `app.py` 注册路由
+- 新增 `app/gateway/roundtable_jobs_cleanup.py`（仿 `ai_writing_cleanup.py`）+ 在启动处挂 cron
+
+**接口契约**
+
+| 方法 | 路径 | 说明 |
+|------|------|------|
+| `POST` | `/api/roundtable-jobs` | 入参：`{draftId, intent, selectedAgents, threadIds?, coordinatorName?, model, orchestrationMode, chain?}`。建作业记录(`queued`) + 启动图 run（LangGraph Server thread），返回 `RoundtableJob` |
+| `GET` | `/api/roundtable-jobs/{id}` | 作业快照（轮询兜底 / 弹窗首帧） |
+| `GET` | `/api/roundtable-jobs/{id}/stream` | SSE 进度流：透传图 `values`/`messages-tuple`，或映射成 §2.4 事件下发。**走真 TCP loopback**（`multi_agent.py:271-293`），禁代理 |
+| `POST` | `/api/roundtable-jobs/{id}/resume` | 入参 `{answer}`，回填 clarification → 图 resume，`status→running` |
+| `POST` | `/api/roundtable-jobs/{id}/cancel` | 取消图 run，`status→cancelled` |
+| `GET` | `/api/roundtable-jobs?draftId=` | 按草稿查活跃作业（页面恢复用） |
+| `POST` | `/api/roundtable-jobs/admin/cleanup` | 管理员手动清理（仿 ai_writing admin cleanup `307-367`） |
+
+**多 worker 健壮性（务必遵守，照搬 ai_writing 教训）**
+- 作业状态只存 **DB + checkpointer**，**不要**用模块级内存 dict 存 per-session 状态。
+- SSE 必须经真 TCP `127.0.0.1` loopback，不能 `httpx.ASGITransport(app=...)` 进程内直调（会整段 buffer）。
+- 图 run 跑在 LangGraph runtime（独立于处理 HTTP 的 worker），刷新/换 worker 都能重新 join stream。
+- 数据卷：`.deer-flow/data/checkpoints.db` 必须挂出，否则容器重启丢状态。
+
+**验收**
+- `POST /start` 后立刻 `GET /{id}` 能拿到 `queued/running`；关掉 SSE 再重连能继续收进度。
+- 杀掉发起 start 的 worker（或多 worker 轮询），`resume`/`stream` 仍命中同一作业。
+- cleanup 干跑：活跃作业永不删，先删 CP 再删 DB。
+
+---
+
+## Phase 4 —— 前端：作业 API 客户端 + 数据模型扩展
+
+**目标**：前端有一层干净的作业 API 与类型，历史列表能拿到 status。
+
+**涉及文件（新增/改）**
+- 新增 `src/roundtable-planning/api/roundtable-jobs.ts`：
+  ```ts
+  export async function startJob(payload: StartJobPayload): Promise<RoundtableJob>
+  export async function getJob(id: string): Promise<RoundtableJob>
+  export function streamJob(id: string, on: (e: JobProgressEvent) => void): () => void  // 返回 unsubscribe
+  export async function resumeJob(id: string, answer: string): Promise<void>
+  export async function cancelJob(id: string): Promise<void>
+  ```
+  - `streamJob` 复用项目现有 SSE/`streamMultiAgent` 的封装方式（`api/multi-agent.ts:403+`），把
+    LangGraph `values` 映射成 §2.4 的归一化事件。
+- 改 `src/roundtable-planning/api/drafts.ts`：`DraftMeta` 增 `status?: JobStatus; jobId?: string`
+  （`drafts.ts:76-83` + 字段映射 `122-178` 加 snake_case 转换）。
+- 新增 `src/roundtable-planning/lib/job-types.ts`：把 §2.1–2.5 的类型集中导出。
+
+**验收**：`pnpm typecheck` 通过；`getJob`/`streamJob` 能拉到 Phase 3 的数据。
+
+---
+
+## Phase 5 —— 前端：Step2「后台挂起」按钮
+
+**目标**：Step2 顶栏/底栏加按钮，点击把当前任务交给后端后台跑，前端停止本地循环、转为观察者。
+
+**涉及文件（改）**
+- `src/roundtable-planning/components/Step2Panel.tsx`（按钮放在现有「进入第三步」附近 `370-381`）
+- `src/roundtable-planning/pages/RoundtablePlanningPage.tsx`（接线 + 观察者模式）
+- `src/roundtable-planning/hooks/useStep2Orchestration.ts`（暴露「停止本地循环并交后台」的方法）
+
+**步骤**
+1. Step2Panel 加「⏼ 后台挂起」按钮，`onBackgroundSuspend` 回调。
+2. 页面 `handleBackgroundSuspend`：
+   - `ensureDraft(2)` 拿到 `draftId`（`useDraftPersistence.ts` ensureDraft）。
+   - 收集当前状态：`intentReady`、`selectedAgents`、`threadIds`、`coordinatorName`、`model`、
+     `orchestrationMode`、`chain`（全部来自 `step2`/`step1` 现有状态）。
+   - `startJob(...)` → 拿到 `jobId`。
+   - **停止前端本地编排**：调用 `step2.stopOrchestration()` + 置一个 `backgroundedJobId` 标记，
+     让 `currentStep===2` 的 useEffect **不再自启本地循环**（在 `useStep2Orchestration.ts:1468-1541`
+     的启动条件里加 `&& !backgrounded`）。
+   - toast「已转入后台，可离开页面，任务会自动跑到结果绘制完成」。
+   - 刷新历史列表（`drafts` 重新拉，进行中项即出现 spinner）。
+3. **观察者模式**：若当前停留在 Step2 且该 draft 有 running 作业，订阅 `streamJob`，把进度事件渲染成
+   对话气泡/活动席位（复用现有 Step2 渲染），而不是本地驱动。
+
+**注意：避免「双跑」**——后台已接管后，前端绝不能再并行驱动同一批 thread。用 `backgroundedJobId`
+互斥；加载草稿时若发现有 running 作业，直接进观察者模式。
+
+**验收**：点「后台挂起」→ 可立即切到别的任务/路由；回来仍在跑；不会出现前后端同时派活。
+
+---
+
+## Phase 6 —— 前端：历史下拉框「进行中」加载动画
+
+**目标**：历史下拉里 `status==='running'`（或 `awaiting_input`）的草稿条目显示加载动画；点击进行中
+条目不直接 load，而是打开流程图弹窗。
+
+**涉及文件（改）**
+- `src/roundtable-planning/pages/RoundtablePlanningPage.tsx` 的 `HistoryDropdown`（`771-892`）
+
+**步骤**
+1. 列表项左侧名称前/后，按 `d.status` 渲染状态标记：
+   - `running` → 旋转的 `Loader2`（`animate-spin`）+「进行中」。
+   - `awaiting_input` → 呼吸点 +「待澄清」（琥珀色）。
+   - `done`/无 → 维持现状（显示 `Step {furthestStep}`）。
+   - `error` → 红点 +「出错」。
+2. 点击行为分流：
+   - `running`/`awaiting_input` → `openDispatchChainModal(d.jobId)`（Phase 7），**不**直接 `onLoad`。
+   - 其它 → 维持 `onLoad(id)`。
+3. 列表需要 `status`，确保 Phase 4 的 `DraftMeta.status` 已就位；下拉打开时 `refresh()` 拉最新。
+
+**验收**：后台挂起后，历史下拉对应条目转圈；点击弹出流程图弹窗。
+
+---
+
+## Phase 7 —— 前端：派活链路流程图弹窗（横向 / 大弹窗 / 动画）
+
+**目标**：大弹窗，横向排列的智能体派活链路。节点 = 席位（图标 + 名称），不同颜色；正在发言的
+节点和它的连接线带加载动画；含「查看」按钮。
+
+**涉及文件（新增）**
+- `src/roundtable-planning/components/DispatchChainModal.tsx`
+
+**实现选型**：链路是「总控 → 席位序列」的线性结构 + 需要对**单个节点和单条连线**做精确动画，
+**推荐手写 flex 横向布局 + CSS 动画连接线**（轻、可控）。项目已装 `@xyflow/react@12`（带 `animated`
+边）作为备选，但手写对本场景的「节点 loading + 连线流动」更直接。
+
+**结构（手写方案草图）**
+```tsx
+<Dialog open={open} onOpenChange={onOpenChange}>
+  <DialogContent className="flex max-h-[88vh] flex-col gap-0 sm:max-w-5xl"> {/* 大弹窗 */}
+    <DialogHeader>… 任务标题 + 阶段标签（leader_thinking/dispatching/report_drawing…） …</DialogHeader>
+
+    {/* 横向链路：总控 ──▶ 席位1 ──▶ 席位2 ──▶ … ──▶ [共识] ──▶ [报告绘制] */}
+    <div className="custom-scrollbar overflow-x-auto py-8">
+      <div className="flex items-center gap-0 min-w-max px-6">
+        <CoordinatorNode active={phase==='leader_thinking'} />
+        {nodes.map((n,i)=>(
+          <Fragment key={n.agentId}>
+            <Connector active={n.state==='active'} />            {/* 活动连线：流动虚线动画 */}
+            <ChainNode node={n} />                               {/* 活动节点：彩色+脉冲光环 */}
+          </Fragment>
+        ))}
+        <Connector active={phase==='consensus'} />
+        <MilestoneNode label="共识" done={consensus===100} />
+        <Connector active={phase==='report_drawing'} />
+        <MilestoneNode label="报告绘制" active={phase==='report_drawing'} done={phase==='report_done'} />
+      </div>
+    </div>
+
+    <DialogFooter className="border-t pt-3 sm:justify-between">
+      <span className="text-xs text-muted-foreground">轮次 {cycle}/8 · {statusLabel}</span>
+      <Button onClick={onView}>查看</Button>   {/* Phase 8 */}
+    </DialogFooter>
+  </DialogContent>
+</Dialog>
+```
+
+**节点颜色**：`avatarType = getAvatarTypeFor(agentId, order)` → `chainTagClasses(avatarType)`
+（复用 `lib/business-chain.ts:56-72` + `lib/roundtable-constants.ts`），与业务链条卡片同一套色。
+
+**节点状态样式**
+- `pending`：灰色描边、低透明度。
+- `active`：席位色填充 + 外圈 `animate-ping`/脉冲光环 + 图标旋转或呼吸。
+- `done`：席位色实心 + 右上角 ✓。
+
+**连接线加载动画（active 连线）**：CSS 流动虚线（marching-ants）或渐变扫光：
+```css
+/* roundtable-planning.css 追加 */
+@keyframes chain-flow { to { background-position: 20px 0; } }
+.chain-connector--active {
+  background-image: linear-gradient(90deg, var(--brand-500) 50%, transparent 50%);
+  background-size: 20px 100%;
+  animation: chain-flow 0.6s linear infinite;
+}
+```
+
+**数据来源**：弹窗 mount 时 `getJob(jobId)` 取首帧，随后 `streamJob(jobId, onEvent)` 实时更新
+`nodes`/`activeAgentId`/`phase`/`consensus`/`cycle`；`done` 事件后停止动画、全节点置 `done`。
+弹窗关闭时 `unsubscribe`。
+
+**验收**：弹窗够大、横向滚动；活动席位节点和它左侧连线在动；阶段推进时高亮顺移；`done` 后静止。
+
+---
+
+## Phase 8 —— 前端：「查看」进入进行中任务并实时观察
+
+**目标**：弹窗「查看」→ 进入该任务，停在 Step2 实时看后台进度（气泡/活动席位随 SSE 刷新），
+跑完自动呈现 Step3 结果。
+
+**涉及文件（改）**
+- `RoundtablePlanningPage.tsx`（接 `onView`）
+- `useDraftPersistence.ts`（`handleLoadDraft` 增「带作业」分支）
+- `useStep2Orchestration.ts`（观察者渲染）
+
+**步骤**
+1. `onView`：关弹窗 → `handleLoadDraft(draftId)` 恢复该草稿到 Step2（`useDraftPersistence.ts:308-368`），
+   但**跳过本地编排自启**（识别到有 running 作业 → 进观察者模式，对齐 Phase 5 的互斥标记）。
+2. 订阅 `streamJob(jobId)`，把 `dialogue` 事件 append 进 `step2RoundtableDialogues`、`active` 事件
+   驱动 `activeSpeakerId` 高亮、`consensus` 更新百分比。
+3. 命中 `awaiting_input`：在 Step2 弹出澄清输入（复用现有 `pendingClarification` UI），用户回答 →
+   `resumeJob(jobId, answer)`（而非本地 `submitClarification`）。
+4. `done` 事件：用返回的 `DraftStep3Snapshot` 走 `hydrateStep3` + 允许切到 Step3 查看报告
+   （`useStep3Report.hydrateSaved` `708-767`）；作业列表该项变「已完成」。
+
+**验收**：从历史「查看」进入能实时看到后台在跑；澄清能在前端回答并续跑；跑完能看到最终报告。
+
+---
+
+## Phase 9 —— 边界、健壮性与收尾
+
+1. **双跑互斥**：任一 draft 同一时刻只允许一个执行者（前端本地 or 后台作业）。加载草稿/进入 Step2
+   前先 `GET /api/roundtable-jobs?draftId=`，有 running 就进观察者模式。
+2. **后台命中澄清**：`awaiting_input` 时历史下拉显示「待澄清」徽标；流程图弹窗显示「等待澄清」；
+   只有「查看」进去才能回答（或在弹窗里直接给一个回答框，调用 `resumeJob`）。
+3. **取消**：流程图弹窗/Step2 提供「停止后台」→ `cancelJob`，`status→cancelled`，前端可恢复本地编辑。
+4. **错误恢复**：`error` 事件展示 detail；允许「重试」= 重新 `startJob`（沿用已建 threadIds）。
+5. **MAX_CYCLES / 预算**：后台图内兜底（对齐前端 `MAX_CYCLES=8`），到顶强制收敛并照常进 Step3。
+6. **多 worker**：严格遵守 Phase 3 的「状态进 DB+checkpointer、SSE 走 loopback」；部署若多 worker
+   需 sticky 或全靠 DB 态（推荐后者）。
+7. **清理**：`roundtable_jobs` cleanup cron（活跃保护、先删 CP 再删 DB），与 draft 生命周期对齐。
+8. **历史列表性能**：draft 列表 join 作业 status 时注意 N+1；用一次 LEFT JOIN 取最新作业。
+
+---
+
+## 端到端验证清单（提测前逐条过）
+
+- [ ] Step2 点「后台挂起」→ 立刻可离开页面 / 切到别的任务，后台继续跑。
+- [ ] 历史下拉里该任务显示加载动画（转圈）。
+- [ ] 点击进行中任务 → 大弹窗、横向派活链路、活动节点+连线在动、节点不同颜色。
+- [ ] 阶段推进（leader→派活→共识→报告绘制）时弹窗高亮顺移。
+- [ ] 弹窗「查看」→ 进入任务实时观察气泡/活动席位。
+- [ ] 后台命中澄清 → 列表「待澄清」+ 弹窗提示 + 可回答续跑（`resumeJob`）。
+- [ ] 一路自动跑到 Step3「绘制完成」，最终报告可在 Step3 查看，作业 `done`。
+- [ ] 浏览器刷新 / 关页重开后，任务仍在后台跑、状态可恢复（真后台验证）。
+- [ ] 取消后台 → `cancelled`，无残留双跑。
+- [ ] 多 worker（或杀 worker）下 stream/resume 不丢会话。
+- [ ] cleanup 干跑不误删活跃作业。
+
+---
+
+## 工作量与排期建议
+
+| 阶段 | 内容 | 粗估 | 依赖 |
+|------|------|------|------|
+| P0 | 数据契约定型（本文 §2） | 0.5d | — |
+| P1 | 后端作业表 + repo + 迁移 | 1d | P0 |
+| **P2** | **后端编排图（移植循环）** | **3–5d（核心难点）** | P0,P1 |
+| P3 | 后端控制 + SSE + cleanup | 1.5d | P1,P2 |
+| P4 | 前端作业 API + 类型 + draft status | 0.5d | P3 |
+| P5 | Step2 后台挂起按钮 + 互斥 | 1d | P4 |
+| P6 | 历史下拉 loading 动画 | 0.5d | P4 |
+| P7 | 派活链路流程图弹窗 | 1.5d | P4 |
+| P8 | 「查看」实时观察 + 澄清续跑 | 1.5d | P5,P7 |
+| P9 | 边界/健壮性/清理 | 1d | 全部 |
+
+> 建议先打通 **P1→P2→P3** 的后端最小闭环（脚本验证图能后台跑到出报告），再做前端 P4–P8。
+> P2 是整条链路成败的关键，务必先用脱离前端的探针脚本（仿 `scripts/probe_ai_writing_assistant.py`）跑通。
+
+---
+
+## 附：关键参考代码索引
+
+- 前端编排循环（待移植到后端）：`useStep2Orchestration.ts:992-1204,1228-1439,1468-1541`
+- 共识判定 / 进 Step3：`useStep2Orchestration.ts:1091-1099`、`Step2Panel.tsx:370-381`、`RoundtablePlanningPage.tsx:586-595`
+- Step3 绘制完成标志：`useStep3Report.ts:51,165,560-596,636-652`
+- 草稿模型 / API / 自动保存 / 加载恢复：`api/drafts.ts:25-110,184-225`、`useDraftPersistence.ts:248-316,308-368`
+- 历史下拉 UI：`RoundtablePlanningPage.tsx:771-892`
+- 后端单轮执行 / 派活 / 广播：`multi_agent.py:647-823,1076-1142,525-552,487-502`、loopback `271-293`
+- AI 写作模板：`agents/ai_writing/graph.py`、`ai_writing_sessions/model.py:14-39`、`ai_writing.py`、`ai_writing_cleanup.py:307-367`、`AIWritingPage.tsx` 文件头注释
+- 颜色体系复用：`lib/business-chain.ts:56-72`、`lib/roundtable-constants.ts`（`getAvatarTypeFor`）
+- 流程图备选库：`@xyflow/react@12`（已安装）
+```
@@ -0,0 +1,124 @@
+# 多智能体「后台挂起」—— 当前状态、遗留问题与下次继续指南
+
+> 配套设计文档：`multi-agent-background-run-dev.md`（分 Phase 0-9 的总方案）。
+> 本文记录**截至本次会话的实际进展 + 还没解决的遗留问题**，方便下次直接续接。
+
+---
+
+## 一、整体状态：跑通到哪了
+
+「后台挂起」= Step2 把研讨交给后端**进程内驱动真模型**（leader→各席位→共识→报告），
+survive 刷新/关页，对话与报告作为一个 **run 写进草稿**（和手动跑同一存取），可在历史回看。
+
+**真网关已在本地验证可跑通**（2026-06-04 日志确认：roundtable-coordinator + 各席位 +
+roundtable-report 真调 deepseek、真搜索、跑到 report run success）。但还有几个**内容/产物层面的遗留问题**（见第三节）。
+
+### 已完成（可用）
+- ✅ 后端持久化：`roundtable_jobs` 表（迁移 `20260604_01` / `20260605_01` dialogues / `20260605_02` step3）。
+- ✅ 编排引擎 `packages/harness/deerflow/agents/roundtable_orchestrator/`（recommend + chain + 报告，纯逻辑可单测）。
+- ✅ 控制面 `app/gateway/routers/roundtable_jobs.py`：start/get/by-draft/stream(SSE)/resume/cancel/admin-cleanup。
+- ✅ 执行器 `app/gateway/roundtable_job_executor.py`：后台任务 + `set_current_user` + 生命周期 + **每轮把对话作为 `job-<id>` run 写进 `draft.step2.runs[]`（同手动存取）** + done 写 step3。
+- ✅ 真网关 `app/gateway/roundtable_inprocess_gateway.py`：`SimpleNamespace(app)` + `start_run` 进程内驱动 agent；复用 `multi_agent._extract_dispatch` 解析派活；checkpointer 读最终 messages。
+- ✅ 模拟网关 `roundtable_orchestrator/simulated_gateway.py`（不调真模型，前端联调用）。
+- ✅ 前端：`api/roundtable-jobs.ts`、`lib/job-types.ts`、Step2「后台挂起」按钮、历史下拉 loading、`DispatchChainModal`/`DispatchChainJobModal`（流程图 + 对话面板 markdown + 加宽 + 澄清作答 + 取消 + 查看）。
+- ✅ 上下文「广播」（inline）：席位/总控 prompt 带上「任务背景 + 前序各席位交付 + 别提问」约束（修「席位拿不到关键信息、反问用户、总控瞎编」）。
+- ✅ 后端测试：`tests/test_roundtable_jobs.py` / `test_roundtable_orchestrator.py` / `test_roundtable_job_executor.py` / `test_roundtable_jobs_api.py` 全过。
+
+---
+
+## 二、怎么启动 / 验证（每次开工先做）
+
+1. **开真网关**（默认是模拟网关）：已写进 `offline-backend-20260512/.env`：
+   ```
+   ROUNDTABLE_JOB_GATEWAY=inprocess
+   ```
+   启动日志应出现 `[roundtable-jobs] gateway = inprocess (real models)`。
+
+2. **必须用 `make gateway`（不带 --reload）跑后端！**
+   `make dev` 的 `--reload` 监视 `backend/` 目录，agent 运行时往 `.deer-flow/` 写文件
+   （memory.json / checkpoint / 沙箱输出）会触发热重载，**把长时后台任务杀掉**。
+   （改进项：给 uvicorn 加 `--reload-exclude '.deer-flow/*'`，或始终用 `make gateway`。）
+
+3. **直接查库验证**（最有效，PowerShell 控制台是 GBK，导出到文件看中文）：
+   ```bash
+   cd offline-backend-20260512/backend
+   # 查最新作业的 dialogues / step3
+   PYTHONPATH=. uv run python -c "import sqlite3,json; con=sqlite3.connect('.deer-flow/data/deerflow.db'); ..."
+   ```
+   - 作业表：`.deer-flow/data/deerflow.db` → 表 `roundtable_jobs`（`dialogues`/`step3` 列）。
+   - 草稿表：`roundtable_drafts` → `step2` 列里应有 `runs[ {id:"job-<jobId>", jobId, jobStatus, step2RoundtableDialogues:[...], step3:{...}} ]`。
+
+4. **前端验证**：后台挂起 → 等跑完 → 从历史加载该草稿 → Step2 应显示后台研讨完整对话（走现有 `normalizeStep2Runs`/`hydrateStep2Run`）。
+
+---
+
+## 三、遗留问题（下次重点，已按优先级排）
+
+### P0 —— 报告 agent 不写 HTML 文件（结果绘制拿不到产物）
+- **现象**：后台报告 run 跑完，日志 `report html: no .html found in ...threads/<id>/user-data/outputs`；
+  `run.step3.html` 回退成报告 agent 的**纯文字**（不含 `<html>`），第3步画不出东西。
+- **已做**：`build_report_prompt`（`roundtable_orchestrator/engine.py`）已对齐前端
+  `useStep3Report.buildReportPrompt`，明确「用 write_file 写入 /mnt/user-data/outputs/方案总览.html」；
+  `_read_report_html`（`roundtable_inprocess_gateway.py`）已改为扫 outputs 目录任意 `.html`。
+- **仍没解决**：报告 agent（deepseek-chat）还是没调 `write_file`。
+- **下次怎么查**：
+  1. 对比**前端那条能写出 HTML 的报告 run** 的确切调用（`useStep3Report.ts` 里 `streamMultiAgent`
+     调 `/api/multi-agent/run/stream` 的 body：`agent_type`/`excluded_tools`/`context` 等），
+     和后台 `_run_agent_turn`（`roundtable_inprocess_gateway.py`，agent_name=roundtable-report，
+     `excluded_tools=_REPORT_EXCLUDED`）逐项比对，找出差异（怀疑 reasoning_effort / thinking /
+     某个 context 字段 / recursion 步数导致它没走到 write_file）。
+  2. 看报告 run 的最终 messages（checkpoint）里有没有 write_file 的 tool_call（被 dangling 截断？）。
+  3. 报告 agent 的 SOUL：`app/gateway/routers/_roundtable_seed/roundtable-report/SOUL.md`——确认它默认行为。
+
+### P1 —— 内容质量（本次刚加 inline 广播，待真机验证）
+- **已做**：席位/总控 prompt 注入「任务背景 + 前序交付 + 别提问」。
+- **待验证**：真机跑一次，看席位是否基于真实上下文产出（不再反问/凭记忆瞎编）。
+- **若 inline 不够**：考虑实现**真·thread 广播**（像 `multi_agent._append_thread_message` 那样把
+  「用户意图 / 派活 / 各席位交付」追加进各 thread 历史）。进程内要避开 HTTP loopback 鉴权，
+  得用 checkpointer 直接 append human 消息（参考 `threads` 路由 POST `/state` 的内部逻辑）。这块较重，先看 inline 够不够。
+
+### P2 —— 对话「没有步骤（steps）」
+- **现象**：手动跑的气泡带工具调用步骤卡（`onPhaseChange` → `appendStepIfNew` → `Step2Dialogue.steps`）；
+  后台对话只存了最终正文，没有 steps。
+- **下次怎么做**：后台 `_run_agent_turn` 跑完后，从 checkpoint 的 messages 里抽出 tool_calls，
+  映射成 `Step2Dialogue.steps`（`{id,key,label,ts,args}`），在执行器 `_to_step2_dialogue` 里带上。
+  纯展示增强，不影响内容/报告。
+
+### P3 —— 双跑浪费 + --reload 坑（工程健壮性）
+- 进 Step2 时前端会自动跑一遍本地研讨（真模型、真线程）；点后台挂起后前端那条 run 在后端还会跑完
+  （`stopOrchestration` 只断客户端、停不了后端 run）→ 和后台作业短暂双跑、双倍 token。
+  - 优化方向：进 Step2 改成「显式开始」而非自动跑；或后台挂起时真正 cancel 前端那条 run。
+- `make dev` 的 `--reload` 会杀后台任务（见第二节）；改进项：`--reload-exclude '.deer-flow/*'`。
+
+---
+
+## 四、关键文件清单（下次定位用）
+
+**后端**
+| 文件 | 作用 |
+|------|------|
+| `app/gateway/roundtable_inprocess_gateway.py` | 真网关：进程内驱动 leader/seat/re 编排循环 + `build_report_prompt` + inline 广播（`_seat_message`/`_deliveries_block`） |
+| `.../roundtable_orchestrator/progress.py` | 进度落库 + `on_dialogue` 每轮回调 |
+| `.../persistence/roundtable_jobs/` | job 表 model/sql |
+| `app/gateway/deps.py` | `ROUNDTABLE_JOB_GATEWAY` 选网关 + 注入 executor（draft_store） |
+
+**前端**
+| 文件 | 作用 |
+|------|------|
+| `src/roundtable-planning/api/roundtable-jobs.ts` | 作业 API + SSE |
+| `src/roundtable-planning/lib/job-types.ts` | 类型（RoundtableJob/JobDialogue/...） |
+| `src/roundtable-planning/components/DispatchChainModal.tsx` / `DispatchChainJobModal.tsx` | 流程图弹窗 + 对话面板 |
+| `src/roundtable-planning/pages/RoundtablePlanningPage.tsx` | 后台挂起按钮、历史下拉、**runs[] 多运行模型**（`hydrateStep2Run`/`getStep2SnapshotWithRuns`/`normalizeStep2Runs`） |
+| `src/roundtable-planning/api/drafts.ts` | `DraftStep2RunSnapshot`（带 jobId/jobStatus/step3） |
+
+---
+
+## 五、关键架构事实（避免重复踩坑）
+
+1. **真网关进程内驱动**：`start_run(body, thread_id, SimpleNamespace(app=app))` + `set_current_user`，
+   不走 HTTP（loopback 调 `/api/multi-agent/*` 不可行：`_auth_headers` 只转发用户 token + owner check）。
+2. **后台作业首启自建全新线程**（`StartParams.is_resume`），绝不复用前端本地研讨的线程（会撞 409）。
+3. **存取统一**：后台作业 = `draft.step2.runs[]` 里一个带 jobId 的 run，和手动跑同一存取/hydrate 路径，
+   **不要再开 observe/回显分支**（之前试过，被否）。
+4. **聊天记录确实存上了**（job.dialogues + draft 的 run）；之前"没存上"是测了旧代码 / 看的是前端本地残缺数据。
+5. 多 worker / SSE：状态进 DB、SSE 走 DB 轮询；真网关进程内无 loopback。
@@ -0,0 +1,404 @@
+# 多智能体会商 Step2 多结果线方案
+
+## 背景
+
+当前「多智能体会商 / 多智能体规划」里，一个历史草稿只保存一份 `step2` 快照。用户从历史记录加载草稿后，如果再次点击「智能体推荐」并在弹窗里点击「进入研讨」，新的 Step2 研讨会继续写入同一份 `draft.step2`，结果是第一次生成内容会被第二次生成内容覆盖，或者页面只能展示最新一次结果。
+
+产品期望是：
+
+- 用户从历史记录进入已有草稿时，进入第二步后，左下角能看到第一次生成结果。
+- 用户再次点击「智能体推荐」并点击「进入研讨」时，要开启一条新的研讨结果线。
+- 第二次生成结果显示在左下角，但不能影响第一次生成结果。
+- 用户之后再次查看同一个历史草稿时，可以分别查看第一次生成结果和第二次生成结果。
+
+因此，这个需求的核心不是简单增加一个展示区域，而是把 Step2 从「单结果」升级为「一个草稿下多条研讨 run」。
+
+## 现状
+
+相关位置：
+
+- `src/roundtable-planning/api/drafts.ts`
+- `src/roundtable-planning/pages/RoundtablePlanningPage.tsx`
+- `src/roundtable-planning/hooks/useStep2Orchestration.ts`
+- `src/roundtable-planning/components/Step2Panel.tsx`
+- `src/roundtable-planning/components/RecommendAgentsDialog.tsx`
+
+当前 `DraftStep2Snapshot` 结构大致是：
+
+```ts
+export interface DraftStep2Snapshot {
+  selectedAgents?: Array<{ agent_id: string; name: string }>;
+  threadIds: ThreadIdMap | null;
+  coordinatorName: string | null;
+  step2RoundtableDialogues: unknown[];
+  lastLeaderContent: string;
+  hasConsensus: boolean;
+  consensusPercentage: number;
+  budgetLimit: number;
+  seatStubMessages?: Record<string, unknown[]>;
+  orchestrationMode?: "recommend" | "chain";
+  chain?: { id: string; title: string } | null;
+}
+```
+
+这意味着一个草稿只有一份：
+
+- 参会智能体
+- 多智能体 thread 映射
+- 研讨气泡
+- 总控最终内容
+- 共识状态
+- 沙箱产物 stub
+- 编排模式和业务链条
+
+当前 `RoundtablePlanningPage.tsx` 里的 `handleConfirmAgents` 在用户点击「进入研讨」后会：
+
+1. 规范化选中的 agents。
+2. 写入 `step2.selectedAgents`。
+3. 调用 `step2.resetInitGate()`。
+4. 设置 `orchestrationMode` / `chainMeta`。
+5. 切到 `currentStep = 2`。
+
+它没有先把当前 Step2 结果归档成「第一次生成结果」，也没有为新的研讨创建独立 run。因此第二次研讨天然会复用同一个 `draft.step2` 写入位置。
+
+## 目标模型
+
+建议引入 Step2 run 概念：一个草稿可以有多条 Step2 结果线，每条结果线保存一份完整的 Step2 快照。
+
+```ts
+interface Step2RunSnapshot {
+  id: string;
+  title: string;
+  createdAt: string;
+  source: "initial" | "recommend" | "chain" | "manual";
+  selectedAgents?: Array<{ agent_id: string; name: string }>;
+  threadIds: ThreadIdMap | null;
+  coordinatorName: string | null;
+  step2RoundtableDialogues: unknown[];
+  lastLeaderContent: string;
+  hasConsensus: boolean;
+  consensusPercentage: number;
+  budgetLimit: number;
+  seatStubMessages?: Record<string, unknown[]>;
+  orchestrationMode?: "recommend" | "chain";
+  chain?: { id: string; title: string } | null;
+  step3?: DraftStep3Snapshot | null;
+}
+```
+
+`DraftStep2Snapshot` 保留现有字段作为当前激活 run 的镜像，同时新增 `runs` 和 `activeRunId`：
+
+```ts
+export interface DraftStep2Snapshot {
+  activeRunId?: string;
+  runs?: Step2RunSnapshot[];
+
+  selectedAgents?: Array<{ agent_id: string; name: string }>;
+  threadIds: ThreadIdMap | null;
+  coordinatorName: string | null;
+  step2RoundtableDialogues: unknown[];
+  lastLeaderContent: string;
+  hasConsensus: boolean;
+  consensusPercentage: number;
+  budgetLimit: number;
+  seatStubMessages?: Record<string, unknown[]>;
+  orchestrationMode?: "recommend" | "chain";
+  chain?: { id: string; title: string } | null;
+}
+```
+
+这样做的好处：
+
+- 老代码仍然可以从 `draft.step2.step2RoundtableDialogues` 读取当前结果。
+- 新 UI 可以从 `draft.step2.runs` 展示第一次、第二次、第三次生成结果。
+- 老草稿没有 `runs` 时，可以在 hydrate 时把原来的 `step2` 包装成一条默认 run。
+- 暂时不需要改数据库表结构，因为 `step2` 本身就是 JSON 快照。
+
+## 行为设计
+
+### 1. 历史记录加载
+
+用户点击历史记录加载草稿时：
+
+1. 拉取完整草稿。
+2. 如果 `draft.step2.runs` 存在，使用 `activeRunId` 找到当前结果线。
+3. 如果 `draft.step2.runs` 不存在，但旧字段里有 `step2RoundtableDialogues`，自动包装成一条 run：
+
+```ts
+{
+  id: "legacy-run",
+  title: "第一次生成结果",
+  createdAt: draft.updatedAt,
+  source: "initial",
+  ...draft.step2
+}
+```
+
+4. hydrate 当前 active run 到 Step2 runtime。
+5. 左下角展示 run 列表。
+
+### 2. 再次点击智能体推荐进入研讨
+
+用户在已有历史草稿中再次点击「智能体推荐」并确认进入研讨时：
+
+1. 先把当前页面里的 Step2 状态保存为当前 active run。
+2. 创建一条新的 run：
+
+```ts
+{
+  id: crypto.randomUUID(),
+  title: `第 ${runs.length + 1} 次生成结果`,
+  createdAt: new Date().toISOString(),
+  source: result.mode,
+  selectedAgents: normalizedAgents,
+  threadIds: null,
+  coordinatorName: null,
+  step2RoundtableDialogues: [],
+  lastLeaderContent: "",
+  hasConsensus: false,
+  consensusPercentage: 0,
+  budgetLimit: DEFAULT_BUDGET,
+  seatStubMessages: {},
+  orchestrationMode: result.mode,
+  chain: result.mode === "chain" ? result.chain ?? null : null
+}
+```
+
+3. 将 `activeRunId` 切到新 run。
+4. 清空 Step2 runtime。
+5. 设置新选中的 agents / mode / chain。
+6. `resetInitGate()`，进入 Step2 后重新创建一组独立 thread。
+7. 自动保存草稿。
+
+关键点：第二次 run 必须使用新的 `threadIds`，不能沿用第一次 run 的 `threadIds`，否则后端 thread 历史会混在一起。
+
+### 3. 左下角结果列表
+
+左下角建议展示一个「生成结果」区域：
+
+- 第一次生成结果
+- 第二次生成结果
+- 第三次生成结果
+
+每条展示：
+
+- 标题
+- 创建时间
+- 状态：研讨中 / 已达成共识 / 未完成 / 已生成报告
+- 使用模式：智能体推荐 / 业务链条
+
+点击某条结果时：
+
+1. 保存当前 active run。
+2. 切换 `activeRunId`。
+3. hydrate 被点击的 run。
+4. 中间 Step2 对话区显示该 run 的研讨气泡。
+5. 如果该 run 已有 `step3`，进入 Step3 时展示对应报告。
+
+### 4. Step3 结果归属
+
+目前 `draft.step3` 是草稿级别的一份报告。如果只保留这一份，第二次结果生成报告后仍会覆盖第一次报告。
+
+建议：
+
+- `draft.step3` 继续作为当前 active run 的镜像，兼容现有 Step3 页面。
+- 每条 `Step2RunSnapshot.step3` 保存自己的报告。
+- `onReportSaved` 时同时写入当前 active run 的 `step3`。
+
+这样用户切换到第一次生成结果时，可以看到第一次的 Step3 报告；切换到第二次生成结果时，可以看到第二次的 Step3 报告。
+
+## 建议改动点
+
+### 1. `api/drafts.ts`
+
+扩展类型：
+
+- 新增 `Step2RunSnapshot`。
+- `DraftStep2Snapshot` 增加 `activeRunId?: string` 和 `runs?: Step2RunSnapshot[]`。
+
+同时保留旧字段，避免影响现有保存、加载和 Step3。
+
+### 2. `useStep2Orchestration.ts`
+
+新增或暴露两个能力：
+
+- `getCurrentRunSnapshot()`：从当前 Step2 runtime 生成一条 run 快照。
+- `hydrateRunSnapshot(run)`：把某条 run 恢复到 Step2 runtime。
+
+`hydrateFromDraft` 继续存在，但内部可以优先选择 active run 来 hydrate。
+
+### 3. `RoundtablePlanningPage.tsx`
+
+新增页面级状态：
+
+```ts
+const [step2Runs, setStep2Runs] = useState<Step2RunSnapshot[]>([]);
+const [activeStep2RunId, setActiveStep2RunId] = useState<string | null>(null);
+```
+
+调整几个流程：
+
+- `getStep2Snapshot` 输出 `runs` 和 `activeRunId`。
+- `hydrateStep2` 兼容旧草稿并恢复 runs。
+- `handleConfirmAgents` 在新建研讨前先归档当前 active run，再创建新 run。
+- `onReportSaved` 把 Step3 报告写回当前 active run。
+
+### 4. `Step2Panel.tsx`
+
+新增左下角结果列表展示。建议作为一个独立组件，避免 Step2Panel 继续变大：
+
+```tsx
+<Step2RunSwitcher
+  runs={step2Runs}
+  activeRunId={activeStep2RunId}
+  onSelect={handleSelectStep2Run}
+/>
+```
+
+组件职责只做展示和选择，不直接读写 draft。
+
+### 5. `Step3Panel.tsx`
+
+传入当前 active run 的报告：
+
+- 如果当前 run 有 `step3`，展示它。
+- 如果没有，按现有逻辑生成新报告。
+- 生成完成后通过 `onReportSaved` 写回 run。
+
+## 兼容策略
+
+老草稿没有 `runs` 字段时，不做数据迁移，前端加载时即时包装。
+
+判断规则：
+
+```ts
+function normalizeStep2Runs(step2: DraftStep2Snapshot): {
+  runs: Step2RunSnapshot[];
+  activeRunId: string | null;
+} {
+  if (step2.runs?.length) {
+    return {
+      runs: step2.runs,
+      activeRunId: step2.activeRunId ?? step2.runs[0].id,
+    };
+  }
+
+  const hasLegacyContent =
+    step2.step2RoundtableDialogues?.length > 0 ||
+    Boolean(step2.threadIds) ||
+    Boolean(step2.lastLeaderContent);
+
+  if (!hasLegacyContent) {
+    return { runs: [], activeRunId: null };
+  }
+
+  const legacyRun: Step2RunSnapshot = {
+    id: "legacy-run",
+    title: "第一次生成结果",
+    createdAt: new Date().toISOString(),
+    source: step2.orchestrationMode ?? "initial",
+    selectedAgents: step2.selectedAgents,
+    threadIds: step2.threadIds,
+    coordinatorName: step2.coordinatorName,
+    step2RoundtableDialogues: step2.step2RoundtableDialogues,
+    lastLeaderContent: step2.lastLeaderContent,
+    hasConsensus: step2.hasConsensus,
+    consensusPercentage: step2.consensusPercentage,
+    budgetLimit: step2.budgetLimit,
+    seatStubMessages: step2.seatStubMessages,
+    orchestrationMode: step2.orchestrationMode,
+    chain: step2.chain,
+  };
+
+  return { runs: [legacyRun], activeRunId: legacyRun.id };
+}
+```
+
+## 风险点
+
+### 1. 自动保存覆盖
+
+Step2 现在会在每个气泡收尾时自动保存。如果引入多 run，自动保存必须先把当前 runtime 合并回 active run，再写入 `draft.step2.runs`。
+
+否则会出现 UI 切到第二次结果，但保存时仍更新第一次 run 的情况。
+
+### 2. threadIds 混用
+
+每条 run 必须拥有自己的 `threadIds`。新建 run 时要清空 `threadIds` 并让 Step2 重新 init。
+
+如果复用旧 thread，会导致两次研讨的后端上下文互相污染。
+
+### 3. Step3 报告覆盖
+
+如果只保存草稿级 `step3`，多 run 的报告无法分别查看。
+
+建议把报告写入当前 run，同时保留草稿级 `step3` 作为 active run 镜像。
+
+### 4. 正在运行中的 run
+
+如果配合后台任务能力，run 还需要带 job 信息：
+
+```ts
+jobId?: string | null;
+jobStatus?: JobStatus | null;
+```
+
+这样左下角可以显示「第二次生成结果正在运行」，并打开派活链路弹窗。
+
+## 分阶段实现建议
+
+### P0：纯前端多 run 快照
+
+目标：先解决“第一次 / 第二次结果分别可查看”。
+
+- 扩展 `DraftStep2Snapshot` 类型。
+- 页面维护 `step2Runs` / `activeStep2RunId`。
+- `handleConfirmAgents` 新建 run。
+- 左下角展示 run 列表。
+- 切换 run 能恢复不同 Step2 对话。
+
+不改后端表结构。
+
+### P1：Step3 绑定 run
+
+目标：每次研讨结果对应自己的报告。
+
+- `Step2RunSnapshot.step3` 保存报告。
+- `onReportSaved` 写回 active run。
+- 切换 run 时同步 Step3 显示。
+
+### P2：后台任务绑定 run
+
+目标：和后台挂起执行方案打通。
+
+- run 增加 `jobId` / `jobStatus`。
+- 历史列表和左下角都能显示某条 run 正在执行。
+- 点击正在执行的 run 打开派活链路弹窗。
+
+### P3：后端 run 表
+
+如果后续一个草稿下 run 数量很多，或者需要服务端按 run 查询、删除、重命名，再考虑新增后端表：
+
+- `roundtable_runs`
+- `draft_id`
+- `run_id`
+- `title`
+- `status`
+- `step2_snapshot`
+- `step3_snapshot`
+- `created_at`
+- `updated_at`
+
+短期不建议一开始就上表，先用现有 `step2` JSON 快照落地更快。
+
+## 验收清单
+
+- 从历史记录加载旧草稿时，左下角出现「第一次生成结果」。
+- 点击「第一次生成结果」能看到原来的 Step2 研讨气泡。
+- 在历史草稿中重新点击「智能体推荐」并「进入研讨」后，左下角新增「第二次生成结果」。
+- 第二次研讨开始时，Step2 对话区为空或只显示新 run 初始化内容。
+- 第二次 run 使用新的 `threadIds`，不会复用第一次 run 的后端线程。
+- 切回「第一次生成结果」时，第一次的对话、共识状态、沙箱产物仍可查看。
+- 切回「第二次生成结果」时，第二次的对话继续显示。
+- 刷新页面后再次加载该历史草稿，两条结果线都还在。
+- 如果两次都生成了 Step3 报告，切换不同结果线时能看到各自对应的报告。
@@ -0,0 +1,610 @@
+# 圆桌 DAG 编排 + 并行执行显示 —— 分步实现需求文档
+
+> 目标读者：实现本功能的前端 / 后端工程师。
+> 本文是**可逐步落地**的需求 + 设计文档，每个 Phase 都能独立交付、独立验收。
+
+---
+
+## 0. 背景与目标
+
+### 0.1 现状
+
+Step 2 圆桌目前有两种编排模式（`orchestrationMode`，见 `hooks/useStep2Orchestration.ts`）：
+
+- **`free`（自由模式）**：总控（leader）自由决定派活给谁，`runOrchestration` 循环驱动。
+- **`chain`（线性链条）**：用户把席位排成一条**线性**链 `A → B → C`，`runChainOrchestration` 按顺序逐个派活，最后总控收口。链路用 `DispatchChainModal.tsx` 的**横向流程图**展示（总控 → 席位1 → 席位2 → … → 共识 → 报告）。
+
+链条数据现在只是一个**有序数组** `selectedAgents`（线性），节点状态类型见 `lib/job-types.ts`（`ChainNodeState = pending | active | done`）。
+
+### 0.2 目标（本次新增）
+
+1. **DAG 编排**：用户可视化指定**智能体之间的直接依赖关系**——有的串行（`A → B → C`），有的并行（`A B C` 同时跑）。编排结果是一张**流程图（DAG）**。
+2. **并行执行**：DAG 里同一层（互不依赖）的智能体**并行**跑，墙钟时间从「串行求和」降到「并行取最慢」。
+3. **并行禁止写文件**：并行的智能体**禁用文件写入 / 沙箱命令**，避免它们同时打开沙箱互相打架。产物以消息正文交付；落文件留给串行 / 收口阶段。
+4. **并行高性能显示**：并行时收起左侧、顶部头像条切换、主区同时显示 2 个智能体的消息流，其余**只接流不渲染**，避免页面卡死。
+
+### 0.3 设计总原则
+
+- **复用** 现有 special run / leader run / rollback 抢占 / 轻量交付状态接口（`GET /threads/{id}/last-ai-message`），不另起炉灶。
+- **线性链是 DAG 的特例**：`chain` 模式可平滑迁移成"每层 1 个节点"的 DAG，老数据不破坏。
+- **分层（Stage）优先于自由连线**：编辑交互首选「分层」模型（每个 stage 放若干并行席位，stage 间串行），实现成本低、覆盖 95% 的"串 / 并"诉求；自由连线画布作为后续可选增强（见 §2.3）。
+
+### 0.4 已确认的设计决策（✅ 本期按这些实现）
+
+> 以下三项已与需求方确认锁定，实现时直接按此，不再二选一。
+
+1. **✅ 编排模型 = 分层 Stage**：本期只做分层（每个 stage 放若干并行席位、stage 间串行）。**自由连线画布本期不做**，仅在数据模型层预留（§1.2）以免将来返工。
+2. **✅ 并行跳过 leader、前端直派**：DAG 由用户显式指定，执行时前端**直接**对 stage 内席位发起 special run，**不**每个 stage 再跑一轮总控派活；只在最后 `finalSynthesis` 跑一轮 leader 综合（即 §3.2 的方案 B）。
+3. **✅ 主区固定 2 列，窄屏降 1 列**：并行时主区最多并排显示 2 个被选中智能体的消息流；窄屏（断点见 §5.3）降为 1 列 + 头像条横向滚动。不做 3+ 列。
+
+---
+
+## 1. 数据模型
+
+### 1.1 DAG 的「分层」表示（推荐，主模型）
+
+把 DAG 表示成**有序的 stage 列表**，每个 stage 内的席位并行、stage 之间串行：
+
+```ts
+// lib/dag-types.ts （新建）
+
+/** 一个并行批次：stage 内所有席位并行执行。 */
+export interface OrchestrationStage {
+  /** stage 稳定 id（拖拽重排 / diff 用）。 */
+  id: string;
+  /** 本 stage 并行执行的席位（agent_id 列表）。1 个 = 退化为串行节点。 */
+  agentIds: string[];
+}
+
+/** 用户编排出的执行计划。stages 顺序即串行顺序。 */
+export interface OrchestrationPlan {
+  /** 编排模式标识，持久化进 step2。 */
+  mode: "dag";
+  /** 串行执行的批次；每批内并行。 */
+  stages: OrchestrationStage[];
+  /** 收口：是否在所有 stage 完成后由总控综合（默认 true）。 */
+  finalSynthesis: boolean;
+}
+```
+
+- **串行** `A → B → C` = `stages: [{agentIds:[A]}, {agentIds:[B]}, {agentIds:[C]}]`。
+- **并行** `A B C` = `stages: [{agentIds:[A,B,C]}]`。
+- **混合** `A →(B C)→ D` = `stages: [{[A]}, {[B,C]}, {[D]}]`。
+
+> 为什么用分层而不是「邻接表 / 边」：执行调度本就是「拓扑分批」，分层就是分批的结果，前端不必再做拓扑排序，也天然避免环；编辑器交互更直观（拖卡片进 stage）。真正的自由连线 DAG 见 §2.3（可选）。
+
+### 1.2 通用 DAG 表示（§2.3 自由连线时才需要）
+
+若将来做自由连线画布，再引入边表示，并在执行前做一次**拓扑排序 → 分层**，落回 §1.1 的 stages 结构给调度器用：
+
+```ts
+export interface DagEdge { from: string; to: string }   // from 完成后才能跑 to
+export interface DagGraph { nodes: string[]; edges: DagEdge[] }
+// 执行前：toposortToStages(graph) -> OrchestrationStage[]
+```
+
+### 1.3 持久化
+
+- 复用 `roundtable_drafts.step2` JSON（见后端 `app.gateway.routers` roundtable-drafts + `hooks/useStep2Orchestration.ts` 里对 `step2` 的读写）。
+- 在 `step2` 增加字段：`orchestrationPlan: OrchestrationPlan | null`。
+- `orchestrationMode` 扩展为 `"free" | "chain" | "dag"`；`chain` 旧数据读取时即时转换为单节点-stage 的 `dag`（兼容层，不改老 draft）。
+
+### 1.4 校验（纯函数，可单测）
+
+`lib/dag-types.ts` 内提供：
+
+```ts
+validatePlan(plan: OrchestrationPlan, selectedAgentIds: string[]): {
+  ok: boolean;
+  errors: string[];   // 面向用户的中文提示
+}
+```
+
+校验项：
+- 每个 `agentId` 必须在本次选定席位 `selectedAgents` 内（防止编排了不存在的席位 → 复用后端 `_partition_dispatch` 同思路的"必须在 roster 内"）。
+- 不允许空 stage；不允许同一席位出现在多个 stage（一个席位只跑一次）。
+- 至少 1 个 stage。
+- （可选）单 stage 并行度上限提示（如 > 6 并行给 warning：远程模型并发 + 沙箱压力）。
+
+---
+
+## 2. 编排编辑器（流程图构建）交互
+
+### 2.1 入口与整体布局
+
+- 在 Step 2 顶部模式切换里新增 **「依赖编排」**（`dag`）模式（与现有 自由 / 链条 并列）。
+- 选择 `dag` 后弹出 / 进入**编排编辑器**（复用 Dialog 大弹窗，参考 `DispatchChainModal` 的尺寸 `w-[94vw] max-w-[1240px]`）。
+
+### 2.2 推荐交互：分层（Stage）编辑器（Phase 2 实现）
+
+```
+┌ 依赖编排 ───────────────────────────────────────── [校验✓] [保存] ┐
+│  可选席位（点/拖加入某个 stage）                                   │
+│  [情报收集] [环境评估] [方案设计] [风险审查] [执行规划] [前端实现]  │
+│ ─────────────────────────────────────────────────────────────── │
+│  Stage 1（并行）              Stage 2（并行）       Stage 3        │
+│  ┌──────────┐  ─────▶  ┌──────────┐ ┌────────┐ ─▶ ┌──────────┐    │
+│  │ 情报收集 │          │ 方案设计 │ │风险审查│    │ 执行规划 │    │
+│  └──────────┘          └──────────┘ └────────┘    └──────────┘    │
+│   [＋ 拖席位到此]        [＋]                       [＋]            │
+│  [＋ 新建 Stage（串在最后）]                                       │
+│ ─────────────────────────────────────────────────────────────── │
+│  说明：同一 Stage 内的席位会**并行**执行；Stage 之间**串行**       │
+│  （后一个 Stage 能看到前面所有 Stage 的交付摘要）。                │
+└───────────────────────────────────────────────────────────────────┘
+```
+
+交互要点：
+- **加入 stage**：从顶部可选席位**拖拽**到某个 stage，或点席位 →「加入 Stage N」。
+- **移动 / 重排**：席位可在 stage 间拖动；stage 可整体左右拖动重排（改串行顺序）。
+- **删除**：席位 / 空 stage 可删。
+- **并行度提示**：stage 内 ≥2 席位即标「并行」徽标；过多给 warning。
+- **实时校验**：`validatePlan` 实时跑，错误在顶部红条提示，「保存」在校验通过前禁用。
+- **预览流程图**：编辑区下方实时渲染只读流程图缩略（复用 §7 的 DAG 流程图组件）。
+
+> 拖拽可用现成轻量方案（HTML5 DnD 或 `@dnd-kit`，看项目是否已有依赖；没有就先用「点选 + 加入/移出按钮」的无拖拽版，Phase 2 先上无拖拽、Phase 2.5 再加拖拽）。
+
+### 2.3 可选增强：自由连线画布（后续，非本期必须）
+
+- 节点自由摆放 + 拉线建边 → `DagGraph`（§1.2）。
+- 实现成本高（画布 / 连线 / 命中检测 / 自动布局），且分层模型已覆盖绝大多数诉求。**本期不做**，仅在数据模型上预留 §1.2，避免将来返工。
+
+### 2.4 验收（Phase 2）
+
+- 能拖 / 点把席位分配到多个 stage，保存进 `step2.orchestrationPlan`。
+- 刷新 / 重进 draft 能恢复编排。
+- 非法编排（空 stage / 席位重复 / 席位不在 roster）有明确中文提示且无法保存。
+
+---
+
+## 3. 执行调度（前端编排循环 + 后端复用）
+
+### 3.1 新增 `runDagOrchestration`（`useStep2Orchestration.ts`）
+
+与现有 `runOrchestration` / `runChainOrchestration` 并列，逻辑：
+
+```
+for (stageIndex, stage of plan.stages):
+  if isStale() break               // 复用现有 epoch 抢占（人工干预/暂停）
+  // 1) 总控按本 stage 的席位并行派活（一轮 leader，dispatched = stage.agentIds）
+  //    —— 或跳过 leader，前端直接对 stage 内每个席位发起 special run（见 3.2）
+  // 2) 并行跑 stage 内所有席位
+  await Promise.all(stage.agentIds.map(seat =>
+        streamMultiAgent({ agentType:"special", agentName:seat,
+                           newMessage: buildStageTask(seat, plan, stageIndex),
+                           parallelNoFile: stage.agentIds.length > 1,  // §4
+                           ... })))
+  // 3) 等本 stage 全部 ✅（Promise.all 天然 barrier）再进入下一 stage
+// 4) finalSynthesis：最后一轮 leader（synthesisMode=true）综合所有 stage 交付
+```
+
+要点：
+- **批内并行**：`Promise.all`（不是现在的 `for await` 串行）。
+- **批间串行**：`Promise.all` 即 barrier，自动等齐。
+- **依赖可见性**：进入 stage N 的席位时，把**前面所有 stage 已交付席位的摘要**拼进它的 `newMessage`（复用 §交付状态：网关 `_collect_delivery_status` / `GET last-ai-message?max_chars=N`，前端也可在 stage 边界拉一次摘要拼进 task）。这样 `(B C)` 能看到 `A` 的产出。
+- **抢占 / 干预 / 暂停**：每个 stage 边界检查 `isStale()`（epoch），与现有自由 / 链条模式一致。
+- **rollback**：special run 已统一 `multitask_strategy=rollback`，并行多席位各自不同 thread，互不冲突。
+
+### 3.2 是否每 stage 都走 leader？ — ✅ 已定：前端直派（方案 B）
+
+**本期采用方案 B**：DAG 由用户**显式**指定，不需要 leader 再"决定派给谁"。前端**直接**对 stage 内每个席位发起 special run，省掉每 stage 的 leader LLM 往返（更快、更可控）；只在所有 stage 完成后、`finalSynthesis` 为真时跑**一轮** leader（`synthesisMode=true`）综合所有交付。
+
+> （备选方案 A：每 stage 跑一轮 leader 派活——更贴现有架构但每 stage 多一次 leader LLM、更慢。**本期不采用**，留档备查。）
+
+### 3.3 后端改动
+
+- **基本不需要新接口**：special run（`POST /api/multi-agent/run/stream` agent_type=special）、leader run、轻量交付读（`GET /threads/{id}/last-ai-message`）、轻量追加（`POST /threads/{id}/messages/append`）都已就绪。
+- 仅需 §4 的「并行禁写文件」run policy 开关。
+
+### 3.4 验收（Phase 3）
+
+- `(B C)` 两席位**同时**出现在执行（后端日志两条 special run 时间重叠；前端两个流并行增长）。
+- stage 间严格串行（stage 2 不早于 stage 1 全部完成）。
+- stage N 席位的输入里能看到 stage <N 的交付摘要。
+
+---
+
+## 4. 并行时禁止写文件（防沙箱打架）
+
+### 4.1 后端 run policy
+
+`app/gateway/roundtable_run_policy.py` 现有角色：`leader` / `seat` / `report`。新增一个角色或开关：
+
+- 方案：给 `seat` 增加一个「并行变体」`seat_parallel`，其 `excluded_tools` 在 `seat` 基础上**再禁** `write_file` / `bash` / `str_replace` / `present_files`（与 `report` 角色禁写的思路一致）。
+- `_special_run`（`multi_agent.py`）按请求里的一个新 flag（如 `no_file: true`）选择 `seat_parallel` policy。
+
+### 4.2 前端传参
+
+- `streamMultiAgent` 请求体新增 `parallel_no_file?: boolean`（或复用 `no_file`）。
+- `runDagOrchestration` 在 `stage.agentIds.length > 1`（真并行）时置 `true`；单节点 stage（实际串行）不限制，可正常写文件。
+
+### 4.3 产物归属
+
+- 并行席位的产物 = **消息正文**（被 `_collect_delivery_status` / 综合块读取）。
+- 需要落文件 / 画图的（如 Step3 报告、`roundtable-report`）放在**串行的收口阶段**单独跑，不在并行批次里。
+
+### 4.4 验收（Phase 4）
+
+- 并行 stage 的席位 run 日志显示 `Excluded ... ['write_file','bash','str_replace','present_files', ...]`。
+- 并行期间不再出现多个席位抢同一沙箱 / 写文件冲突。
+
+---
+
+## 5. 并行执行的前端显示
+
+### 5.1 布局总览（并行进行时）
+
+```
+┌ 多智能体圆桌会商中心 ─────────────────────────────────────────────┐
+│ [头像条：进行中的并行智能体]            [模型选择 ▾] [暂停会商]     │
+│  (情报)●  (方案)●  (风险)●  (执行)  …                              │
+│   ↑选中    ↑选中    loading  hidden                                │
+│ ───────────────────────────────────────────────────────────────── │
+│  ┌─ 方案设计（选中）──────────┐  ┌─ 风险审查（选中）──────────┐   │
+│  │ 一、整体架构…（流式渲染）  │  │ 1. 合规风险 IDFA/OAID…     │   │
+│  │ …                          │  │ …                          │   │
+│  └────────────────────────────┘  └────────────────────────────┘   │
+└───────────────────────────────────────────────────────────────────┘
+（左侧"参与角色"栏在并行时整体收起，腾出横向空间放两列消息）
+```
+
+### 5.2 关键交互（与需求逐条对齐）
+
+1. **收起左侧**：并行执行时把左侧「参与角色 / 人工参与」栏整体折叠（一个 `isParallelRunning` 状态控制；非并行恢复）。
+2. **头像条**：位置在**消息列表上方、模型选择器左侧**。展示**当前并行批次的所有进行中智能体头像**：
+   - **进行中** → 头像加 loading 动画（复用 `DispatchChainModal` 的 `animate-ping` 光环 + `Loader2Icon animate-spin` 角标）。
+   - **已完成** → 打勾（复用现有 `CheckIcon` 角标）。
+   - **选中** → 高亮描边（当前正在主区显示的那 2 个）。
+3. **主区同时显示 2 个**：被选中的 2 个智能体的消息列表**并排两列**渲染。
+4. **多于 2 个先隐藏**：未选中的智能体**不渲染 DOM**（见 §6 性能）。
+5. **点头像切换**：点击未选中的头像 → 把它设为选中之一（替换当前 2 个里的一个，或按"最近点击保留 2 个"的 LRU 策略）；被换下的智能体**停止渲染但继续接流**。
+
+### 5.3 选中策略 — ✅ 固定 2 列，窄屏降 1 列
+
+- 维护 `selectedParallelSeats: string[]`，**最多 2**（固定 2 列）。**不做 3+ 列**。
+- **响应式**：宽屏 2 列并排；窄屏（建议断点 `< 1024px` / `lg`）降为**1 列**，头像条横向滚动切换；此时 `selectedParallelSeats` 仍可存 2 个，但主区只渲染当前 1 个（点头像切换哪个在前）。
+- 默认选中本批次**最先开始**的（宽屏 2 个 / 窄屏 1 个）。
+- 点头像：若已选中则取消；未选中则加入（超过上限时按 LRU 踢掉最早选中的）。被换下的席位**停止渲染但继续接流**（§6）。
+
+### 5.4 验收（Phase 5）
+
+- 并行时左侧收起、出现头像条、主区两列。
+- 进行中头像有 loading；完成打勾；选中有高亮。
+- 点头像能切换主区显示的智能体，且切换是**即时**的（数据已在内存，见 §6）。
+
+---
+
+## 6. 流式高性能策略（避免页面卡死）
+
+> 核心矛盾：N 个并行席位同时高频 `onTextDelta`，若都 setState + Markdown 渲染会卡死。
+
+### 6.1 全接收、惰性渲染
+
+- **所有**并行 run 的流都正常订阅（不丢数据）：每个席位的增量文本**累积进 store / ref**（`Map<agentId, { text, status, charCount }>`）。
+- **只有被选中（主区显示）的席位**才把累积文本挂到 DOM 渲染（Markdown）。
+- **未选中**席位：只更新内存 + 头像条上的轻量进度（字数 / loading），**不挂载消息 DOM**。
+- 切换选中时：把该席位已累积的全文一次性渲染 + 继续接增量。
+
+### 6.2 渲染节流
+
+- 选中席位的流式渲染**节流/合帧**：用 `requestAnimationFrame` 或 ~50–100ms 批量 flush 累积的 token，而不是每个 token 一次 setState。
+- Markdown 渲染对"流式中"可降级（纯文本 / 轻量渲染），**完成后**再做完整 Markdown（现有 `MessageBubble` 的 `streaming` 标志可复用：streaming 时简渲、done 后全渲）。
+
+### 6.3 头像条进度
+
+- 头像条只显示**廉价**信息：loading 动画 + 可选字数（`charCount`，从内存 Map 取，节流更新，例如每 500ms 刷一次）。不触发消息体渲染。
+
+### 6.4 数据流（建议结构）
+
+```
+streamMultiAgent(seat).onTextDelta(text) →
+    parallelStore.append(seatId, text)          // 纯内存累积，O(1)
+    if seatId ∈ selectedParallelSeats:          // 仅选中的进 React state（节流）
+        scheduleFlush(seatId)                    // rAF / 节流 setState
+    else:
+        bumpCharCount(seatId)                    // 仅更新头像条进度（节流）
+```
+
+### 6.5 验收（Phase 6）
+
+- 6+ 席位并行时页面不卡（输入 / 滚动 / 切换流畅）。
+- 切到一个之前隐藏的席位，能立刻看到它**到目前为止的全部**输出（证明流没丢、只是没渲染）。
+
+---
+
+## 7. 流程图执行态可视化（DAG 版）
+
+- 把现有 `DispatchChainModal.tsx`（横向**线性**流程图）扩展 / 复刻成 **DAG 流程图**：
+  - 按 stage 分**列**，stage 内席位**纵向并列**，stage 间用连接线。
+  - 节点状态复用 `ChainNodeState`（pending / active / done）+ 现有动画（`animate-ping` / `Loader2Icon` / `CheckIcon`）。
+  - 末尾接 `共识 → 结果绘制` 里程碑（沿用现有）。
+- 用途：编辑器里的只读预览（§2.2 底部）+ 执行时的总览（可选小窗 / 顶部缩略）。
+
+```
+总控 ─▶ ┌ Stage1 ┐ ─▶ ┌ Stage2 ┐ ─▶ ┌ Stage3 ┐ ─▶ 🤝共识 ─▶ 📊报告
+        │ 情报●  │     │ 方案✓  │     │ 执行○  │
+        └────────┘     │ 风险●  │     └────────┘
+                       └────────┘
+```
+
+### 7.1 验收（Phase 7）
+
+- 编辑器底部 / 执行时能看到 DAG 流程图，节点状态随执行实时更新（active/done）。
+
+### 7.2 实施结论（2026-06-07，✅ 已完成）
+
+- **新组件** `components/DagFlowChart.tsx`：纯展示组件，复刻 `DispatchChainModal` 的节点 / 连线 / 里程碑视觉（`animate-ping` 光环 + `Loader2Icon` 转圈 + `CheckIcon` 打勾 + `rt-chain-connector` 连线动画），但按 **stage 分列**：总控 ─▶ ┌Stage1┐ ─▶ ┌Stage2┐ ─▶ 🤝共识 ─▶ 📊结果绘制，stage 内席位**纵向并列**。`compact` 紧凑模式给缩略图用。所有状态由 props 传入（`stages` / `resolveSeat` / `seatStates` / `coordinatorState` / `consensusState` / `reportState`）；不传 `seatStates` → 全 pending（只读预览）。`aggregateStageState` 把 stage 内席位聚合成列状态(任一 active→active、全 done→done)驱动 stage 间连线。
+- **编辑器只读预览**（§2.2 底部）：`BusinessChainEditorPage` 底部加「编排预览」section，把 `stageGroups`(去空 stage) 映射成 `DagFlowChart` 的 stages + `resolvePreviewSeat`(席位名/配色)，`compact`、全 pending、随编辑实时变。
+- **执行态总览**（Step 2 顶部缩略）：`useStep2Orchestration` 新增 `dagNodeStates: Record<agentId, ChainNodeState>`，`runDagOrchestration` 跨 stage 维护(进入 stage→该批 active、席位终态→done、`resetStep2State` 清空)；经 `RoundtablePlanningPage` 把 `orchestrationMode/orchestrationPlan/dagNodeStates` 传到 `Step2Panel`，dag 模式下会话区顶部 `compact` 渲染 DagFlowChart。总控/共识里程碑状态由 `Step2Panel` 从节点状态 + `isOrchestrating`/`hasConsensus` 派生（中转轮时无席位 active + isOrchestrating → 总控 active）。
+- 改动文件：`components/DagFlowChart.tsx`(新)、`pages/BusinessChainEditorPage.tsx`、`hooks/useStep2Orchestration.ts`、`components/Step2Panel.tsx`、`pages/RoundtablePlanningPage.tsx`。typecheck 零新增(基线 65)。
+- **下次实地验收**：①编辑器底部随分层编辑实时画出流程图;②Step2 dag 模式顶部出现缩略流程图,跑起来后当前 stage 列点亮(active 转圈)、完成打勾、中转时总控亮、最后共识亮。
+
+---
+
+## 8. 分步实现计划（每步可独立交付 + 验收）
+
+| Phase | 内容 | 主要文件 | 依赖 | 可独立验收 |
+|---|---|---|---|---|
+| **1** | DAG 数据模型 + 校验 + 持久化字段 | `lib/dag-types.ts`（新）、draft step2 读写 | — | 纯函数单测：`validatePlan` / `chain→dag` 兼容转换 |
+| **2** | 分层编排编辑器（先无拖拽：点选加入/移出） | `components/DagPlanEditor.tsx`（新）、Step2 模式切换 | P1 | 能编排并保存/恢复，非法编排有提示 |
+| **2.5** | 编辑器拖拽 | 同上 + `@dnd-kit`（若引入） | P2 | 拖拽分配/重排 |
+| **3** | `runDagOrchestration`：批内并行 + 批间串行 + 依赖摘要注入 | `hooks/useStep2Orchestration.ts`、`api/multi-agent.ts` | P1 | 后端日志并行 special run 时间重叠；stage 严格串行 |
+| **4** | 并行禁写文件 run policy | `roundtable_run_policy.py`、`multi_agent.py`、`api/multi-agent.ts` | P3 | 并行 run 的 excluded_tools 含 write_file/bash/... |
+| **5** | 并行显示骨架：收起左侧 + 头像条 + 两列 + 选中切换 | `components/Step2Panel.tsx`、`components/ParallelSeatStrip.tsx`（新） | P3 | 见 §5.4 |
+| **6** | 流式高性能：全接收 / 惰性渲染 / 节流 | `hooks/useStep2Orchestration.ts`（parallelStore）、`Step2Panel` | P5 | 见 §6.5（6+ 并行不卡） |
+| **7** | DAG 流程图执行态可视化 | `components/DagFlowChart.tsx`（复刻自 `DispatchChainModal`） | P2、P3 | 见 §7.1 |
+| **8** | 边界 / 异常 | 各处 | 全部 | 见 §9 |
+
+> 落地顺序建议：**P1 → P3 → P4 → P5 → P6**（先把"能并行跑 + 能看 + 不卡"打通），**P2 编辑器**可与 P3 并行开发（先用一份 hardcode/简单 UI 的 plan 驱动 P3 联调），**P7 / P2.5 / 2.3** 作为增强后置。
+
+---
+
+## 9. 边界与异常（Phase 8）
+
+- **某并行节点失败 / 超时**：单个席位失败不拖垮整 stage；标该节点 error，stage 其余 ✅ 仍推进；收口时把"X 失败"如实告知总控（复用交付状态 ⬜ + 失败标记）。
+- **依赖未满足**：调度器保证 stage 串行，理论不会发生；防御性校验 stage N 启动前 stage <N 必须全部终态（done/failed）。
+- **人工干预 / 暂停 / 恢复**：在 stage 边界检查 `isStale()`（epoch）；干预指令插入后，从"下一个未开始的 stage"继续（已完成 stage 不重跑）。
+- **并行禁写文件 vs 席位本想写文件**：在席位 SOUL / 派活提示里说明"本轮为并行研讨，产出请直接写在回复正文，不要写文件"，降低模型困惑。
+- **窄屏**：主区两列降为一列 + 头像条横向滚动。
+- **单 stage 全并行（一次性 N 个）**：给并行度 warning（远程模型并发限流 / 成本）。
+
+---
+
+## 10. 与现有代码的衔接点速查
+
+- 编排循环：`hooks/useStep2Orchestration.ts`（`runOrchestration` / `runChainOrchestration` 旁新增 `runDagOrchestration`；复用 `isStale()` epoch、`abortAllInFlight`、`appendStreamingDialogue` / `appendToDialogue`）。
+- 流式 API：`api/multi-agent.ts`（`streamMultiAgent`，新增 `parallel_no_file` 入参；`onTextDelta(text, messageId)` 已是按席位回调，天然支持并行分流）。
+- 显示：`components/Step2Panel.tsx`（消息列表 `step2RoundtableDialogues.map`；新增头像条 `ParallelSeatStrip` + 两列容器 + 折叠左侧）。
+- 流程图：`components/DispatchChainModal.tsx` / `lib/job-types.ts` / `lib/business-chain.ts`（复刻成 DAG 版）。
+- 常量 / 元数据：`lib/roundtable-constants.ts`（`BUILTIN_AGENT_META` 头像/中文名、`buildAgentNameToRole`）。
+- 后端 run policy：`app/gateway/roundtable_run_policy.py`（新增 `seat_parallel`）、`app/gateway/routers/multi_agent.py`（`_special_run` 读 `no_file` flag）。
+- 交付摘要：`GET /api/threads/{id}/last-ai-message?max_chars=N`（依赖注入 stage N 输入用）。
+
+---
+
+## 11. 一句话总结
+
+把「线性链条」升级为「分层 DAG」：**编辑器**用分层 stage（拖卡片）表达串/并；**调度**用 `Promise.all` 批内并行、批间 barrier 串行，依赖摘要在 stage 边界注入；**并行禁写文件**避免沙箱打架；**显示**收起左侧、头像条切换、主区两列、未选中只接流不渲染（rAF 节流）保证不卡。全部建立在现有 special/leader run + 轻量交付接口之上，后端几乎零新接口。
+
+---
+
+## 12. 已知问题与排查记录（2026-06-06）
+
+### 12.1 ❗并行席位「步骤条」不显示 —— 根因：`seat_parallel` 工具面禁得过多
+
+**现象**：并行两列里的席位气泡看不到步骤条（`MessageStepsCard`），而串行席位有。
+
+**排查结论（已定位，待修）**：
+
+1. **步骤条只渲染「工具调用」步骤**。`MessageStepsCard` 的 `isToolStep` 只认 `tool_calling:<toolName>` 的步骤进折叠卡；纯阶段步骤（`connecting:` / `streaming:` 这类 reasoning）只渲染成**底部一行小灯泡**，不出大卡（见 `MessageStepsCard.tsx` L80-100）。
+2. **并行席位几乎调不动任何会产生步骤的工具**。后端 `app/gateway/roundtable_run_policy.py`：
+   - `_SEAT_EXCLUDED = [web_search, ask_clarification, present_files, view_image, agent_orchestration]` —— **注意 `web_search` 对所有席位（串行也）就禁了**（注释「圆桌研讨里联网搜索一律禁用」）。
+   - `_SEAT_PARALLEL_EXCLUDED = _SEAT_EXCLUDED + [write_file, bash, str_replace]`。
+   - 于是并行席位可用工具几乎只剩 `read_file / ls / task / write_todos / memory / hindsight_*`，研究/分析类席位基本一个都不会调 → **没有任何 `tool_calling` 步骤** → 步骤条（大卡）不出现。
+3. **对比串行为何「有步骤条」**：串行席位（`seat` policy）**能 `write_file`**，会产生 `tool_calling:write_file` 步骤 → 大卡出现。并行被禁了 write_file + 又没有 search，所以一个工具步都没有。
+
+**用户诉求**：并行时**只禁真正会冲突的写操作**，搜索信息 / 调用技能等**必要操作不要禁**。
+
+**关键事实（影响方案选择）**：圆桌每个席位是**独立 thread = 独立 sandbox**（后端 per-thread 隔离 `.deer-flow/users/{uid}/threads/{tid}/`）。所以并行席位写文件**在后端并不会互相冲突**；当初 §4「并行禁写文件」的「打架」其实主要是**前端单沙箱预览**（`activeArtifactThreadId` 只能同时显示一个）+ 产物归集到正文的简化考量，并非后端真冲突。→ 这意味着「并行禁写」的必要性比原设想弱，可放宽。
+
+**✅ 决策：选 A（2026-06-06 已实施）**：把 `seat_parallel` 放宽到**只禁 `write_file / bash / str_replace`**（防前端单沙箱预览串台 + 产物走正文）+ 仍禁 `ask_clarification / present_files / view_image / agent_orchestration`（打断/越权类），但**放开 `web_search` 与技能**（搜索不碰 sandbox；技能靠 `read_file`）。改在 `app/gateway/roundtable_run_policy.py` 的 `_SEAT_PARALLEL_EXCLUDED`（**不再继承** seat 的 web_search 禁用，显式列举），测试 `tests/test_roundtable_run_policy.py` 同步更新（`test_seat_parallel_allows_web_search_and_skills`）。
+→ 并行席位现在能联网搜索/用技能 → 产生 `tool_calling` 步骤 → 步骤条显示。
+
+> 备选 B（连写文件也放开，沙箱按 thread 隔离）/ C（重新评估「圆桌串行也一律禁 web_search」）**本期不做**，留档。串行席位目前仍禁搜索（`seat` policy 不变）。
+
+### 12.2 其它已修（本轮反馈）
+
+- 最左侧**全局工作区侧栏**并行时收起：改用与「打开沙箱」同一路径 `useSidebarSafe()?.setOpen(false)`（之前只收了圆桌「参与角色」栏 `step2SidebarExpanded`）。并行结束**不自动展开**（与沙箱收起不回弹一致）。
+- 并行两列改回**完整 Markdown**（撤销 §6.2 流式纯文本降级 `plainWhileStreaming`），与串行同款 `Step2Message`。
+- 头像条**不再显示字数**（去掉 charCount 徽标 + 字段）。
+- **致命 bug 已修**：用户干预 / 并行跑完后**不再重跑整张 DAG**。`dagPlanExecutedRef` 闸门 + DAG 各阶段跑完后释放锁 `await runOrchestration(handoff)` 交回总控继续派活/收口；后续干预/恢复一律走 leader 自由派活。
+- **并行两列宽表溢出已修（2026-06-07）**：模型输出的 Markdown **表格**（如「法律免责条款」表）没有宽度约束 / 横向滚动容器，在并行两列的窄列里会**超出左列、盖到相邻列**。修法：`MessageBubble.sharedMarkdownComponents.table`（+ `markdown-components.tsx`）把 `<table>` 套进 `<div class="max-w-full overflow-x-auto">`——表格保持自然宽度、超出时**列内横向滚动**而非撑破列宽。`min-w-0` 链(grid `minmax(0,1fr)` → 列 `min-w-0` → 气泡 `flex-1 min-w-0`)本就齐全,只差 table 这一层。
+- **关于「并行席位无步骤条」**：步骤条(`MessageStepsCard` 大卡)只在席位产生 `tool_calling` 步骤时出现(§12.1)。纯分析型席位若本轮**直接写分析正文、没调用任何工具**(web_search 等),就只显示一行「正在输出」思考指示、不出大卡——这是设计使然,非解析失败。要确认是否真调了工具:浏览器 devtools 设 `window.__MULTI_AGENT_DEBUG__=true` 看 `frame# event=messages` 里有无 tool_calls,或查后端 special run 日志。
+
+### 12.3 ✅需求变更：Stage 间「经总控中转 + 广播」（2026-06-06 提出，2026-06-07 已实施）
+
+**当前实现（方案 B，§3.2）**：DAG 各 stage 由前端**直接**派活，stage 间不跑 leader，靠前端把 `buildDependencySummary` 拼进下一 stage 的 task（`priorSummary`）。各 stage 跑完后才 `await runOrchestration` 交回总控收口。
+
+**新诉求**：业务链条调用时，**每一轮 stage 之间都要经总控中转 + 广播**，而不是前端直接串下去。具体：
+
+1. 第 1 轮并行调用 stage1 的 A、B、C；
+2. A/B/C **全部完成后**，把这一批的**输出广播出来**（广播给其它席位 + 总控 thread）；
+3. **总控（leader）接收**这批交付 → 再**往下继续派活**（派 stage2 的 D、E）；
+4. 派活时把（承上的）消息**广播给下一轮的 D、E**；
+5. 以此类推，直到所有 stage 跑完再收口。
+
+> 即把 §3.2 的「方案 B 前端直派」改成 **「方案 A' = 计划约束下的总控中转」**：stage 边界插入一轮 leader，由它综合上一批交付并驱动下一批（下一批席位仍由编排计划**钉死**为 D、E，不是 leader 自由乱派——leader 负责「承上启下 + 广播上下文」，计划负责「派给谁」）。
+
+**实施要点（下次会话）**：
+
+- **每个 stage 完成 → 广播该批输出**：后端 `_special_run` 已对每个 seat 做 detached 后广播（「子智能体X完成…交付内容为:…」→ 其它席位 + 总控）。但它是 **detached/best-effort + 截断**；要让总控**可靠**地在下一轮前看到，需在 stage barrier 处**等广播落地**（或前端在 stage 边界用 `GET /threads/{id}/last-ai-message` 主动收齐各席位交付再喂给 leader）。
+- **插入 leader 中转轮**：`runDagOrchestration` 在进入下一 stage 前，跑一轮 leader（`synthesisMode=true` 让后端注入上一批**完整**交付），让总控产出一段「承上启下」说明；把这段说明（而非机械 `priorSummary`）作为下一 stage 席位 task 的上下文 / 或广播给下一批席位 thread（复用 `POST /threads/{id}/messages/append`）。
+- **下一批仍由计划钉死**：leader 中转轮**不**自由决定派给谁（计划已定 D、E）；可参考 `buildChainLeaderTask` 的「约束 leader 只派给指定席位」思路，或干脆 leader 只做综合、前端照计划派 D、E 并把 leader 综合 + 广播注入其 task。
+- **与「并行禁写」「§12.1 放开搜索」并存**：中转/广播不影响工具面。
+- **与致命 bug 修复并存**：最后一个 stage 跑完仍走「交回总控（`runOrchestration`）收口/继续派活」；用户干预仍走 leader、不重跑 DAG。
+
+**影响文件（预估）**：`hooks/useStep2Orchestration.ts`（`runDagOrchestration` 的 stage 循环里加 leader 中转 + 广播收齐）、可能复用后端 `_leader_run`（synthesisMode 注入全文）/ `/messages/append`（广播）/ `/last-ai-message`（收齐交付）。后端基本无需新接口。
+
+**✅ 实施结论（2026-06-07）**：后端**零改动**，全部在前端 `runDagOrchestration` 内完成，复用既有「传摘要按需传全文」优化链路：
+
+1. **中转轮位置**：每个**非最后**的 stage barrier 到达后（`Promise.all` 收齐本批交付），插入**一轮 leader**「中转轮」，展示为「总控协调（承上启下）」气泡。最后一个 stage 后**不**插中转，综合/收口仍交给末尾的 `runOrchestration` 接管（与致命 bug 修复一致）。
+2. **可靠收齐交付（传摘要）**：中转轮跑 `streamMultiAgent({agentType:"leader", synthesisMode:false})`。后端 `_leader_run` 本就在每轮 leader 前用 `_collect_delivery_status`（走**轻量 `GET /last-ai-message?max_chars=600` 接口**）**客观核对**各席位真实交付并把**摘要**注入总控输入（`_build_seat_status_block`）——比 detached 广播可靠（直接实读各席位 thread，不依赖 best-effort 广播是否落地）。故中转轮传 `synthesisMode:false`：只综合本批、**不收口**，只注入摘要；**完整交付正文**留到末尾收口的 synthesis 轮（`_build_full_deliverables_block`，全 ✅ 才注入）按需读取——即「**传摘要按需传全文**」。
+3. **承上启下驱动下一批**：中转轮产出的综合说明存进 `leaderBridge`，作为**下一 stage** 席位 task 的上下文（`buildStageTask({priorSummary: leaderBridge, priorIsBridge:true})`，措辞为「承上启下综合说明」而非机械「交付摘要」），替代原来的 `buildDependencySummary(deliveries)`。中转失败/无产出时回退机械依赖摘要，不阻断。
+4. **下一批由计划钉死**：中转轮提示（`buildDagTransitTask`）明确告知总控「下一阶段席位已由编排计划钉死为 X、Y，你**不要**自行 `agent_orchestration` 派活、**不要**收口」，前端仍照计划直派下一批；即便弱模型仍派了活，前端忽略其 `dispatched`、只取 `content` 当 bridge。
+5. **广播**：本批输出广播给其它席位 + 总控 = 后端 `_special_run` 既有 detached 后广播（截断摘要）；承上消息给下一批 = 注入其 task `new_message`（席位 run 输入必见，比 `/messages/append` 更可靠，省一次写盘）。
+6. **澄清/抢占/失败**：中转轮触发澄清 → 暂停 DAG（回复后走 leader 自由派活、不重跑 DAG，沿用 `dagPlanExecutedRef` 闸门）；被 `isStale()`/abort 抢占 → 静默收尾；异常 → 该气泡标错误、清空 bridge 继续。
+
+**纯函数**：`lib/dag-types.ts` 新增 `buildDagTransitTask`（中转轮提示）+ `buildStageTask` 加 `priorIsBridge` 形参；`lib/dag-types.test.ts` 加 4 个单测（共 27 个全过）。
+
+> ⚠️ **§12.3 的「单独中转轮 + 前端直派」已被 §12.4 取代**（2026-06-07 同日）：见下。`buildDagTransitTask` / `buildStageTask` / `buildDependencySummary` 仍保留在 lib（带单测），但 `runDagOrchestration` 不再调用它们。
+
+### 12.4 ✅ 需求再变更：DAG 改成「总控驱动每 stage 派活」（2026-06-07，§3.2 方案 A）
+
+**新诉求（用户原话）**：把并行(DAG)逻辑改得和串行一样——串行时总控给多个智能体派活、它们完成后汇报给总控、总控再继续往下派活；并行也改成「由总控判断要执行哪些步骤，这些步骤完成后再汇报给总控，总控继续往下派活」。
+
+**已确认的两个关键决策**：
+1. **每批「派给谁」**：✅ **计划钉死成员，但走总控派活**（不是总控自由乱派）。即 stage 成员仍由编排计划定死，但改成总控每轮**真正** `agent_orchestration` 派活给这些席位（约束只派给它们、且每个都派到）。= §3.2「方案 A」+ 批内并行。
+2. **适用范围**：✅ **只改 dag 模式**（recommend 仍串行逐个、chain 不动）。
+
+**实现（后端零改动，全在 `runDagOrchestration`）**：每个 stage 两步——
+- **(a) 总控派活轮**：跑一轮 `leader`，提示 `buildDagStageLeaderTask`（首 stage 带任务背景；后续 stage 靠后端注入的此前交付摘要承上；列出本 stage 钉死席位的 `agent_name`，要求逐个派到、不派清单外、不收口）。`synthesisMode:false` → 后端 `_build_seat_status_block` 走轻量 `last-ai-message` 注入各席位**摘要**（传摘要按需传全文）。
+- **(b) 批内并行**：本 stage 席位并行跑总控派给各自的 task——`pickDagSeatTask(leaderRes.dispatched, content, agentId, name)` 命中其 `agent_name`；总控漏派/写偏则回退总控正文/模板，**不借用别席位 task**（多席位并行避免张冠李戴）。完成后交付经后端 `_special_run` detached 后广播回总控；下一 stage 的派活轮即可看到。
+- barrier 后进入下一 stage，总控再派下一批。全部 stage 跑完 → 交回 `runOrchestration` 收口（synthesisMode 按需注入全文）。
+
+**相比 §12.3 的变化**：§12.3 是「前端直派 + stage 间单独插一轮只综合的中转轮」；§12.4 把**每个 stage 本身**就改成「总控派活轮 + 批内并行」——总控既承上（注入的摘要）又派活，不再需要单独的中转轮。与 chain 模式同构，区别是一次钉死一批、批内并行。
+
+**纯函数**：`lib/dag-types.ts` 新增 `buildDagStageLeaderTask`（每 stage 派活提示）+ `pickDagSeatTask`（取某席位 task，多席位不张冠李戴）；`lib/dag-types.test.ts` 加 5 个单测（共 32 个全过）。`runDagOrchestration` 不再用 `buildStageTask/buildDependencySummary/buildDagTransitTask`（保留在 lib）。
+
+**Phase 7 流程图兼容**：总控派活轮无席位 active + `isOrchestrating` → 流程图「总控」节点显示 active（承上派活中），随后该 stage 列点亮，无缝衔接。
+
+**下次实地验收**：①每个 stage 前出现「总控协调（派活中/承上派活中）」气泡,内容是总控对本 stage 席位的派活说明;②后端日志该轮 leader 的 `_partition_dispatch` 派给的正是本 stage 钉死席位;③这些席位并行跑(special 日志时间重叠);④完成后下一 stage 总控派活轮能看到上一批交付摘要(`[leader-roster]` 日志)。
+
+### 12.5 ✅ 流程图弹窗化 + DAG「快速/沙箱」执行子模式（2026-06-07）
+
+三个改动一起做:
+
+**(1) 流程图改成弹窗**:Step2 顶部不再内联 `DagFlowChart`(挤占两列消息高度,截图 `样式优化-1.png`)。改成一条细栏「分层编排执行中 · 共 N 个阶段 ＋ [查看编排流程图]」按钮,点开 `Dialog` 看**全尺寸**流程图(非 compact)。编辑器(`BusinessChainEditorPage`)底部预览保持内联不变。改 `Step2Panel.tsx`(加 `dagFlowOpen` state + Dialog)。
+
+**(2) 推荐弹窗新增 DAG 执行子模式(快速/沙箱)**:`BusinessChainPicker` 在选中链条**有分层并行**(走 dag)时,「进入研讨」旁出现「执行方式:快速·双列禁写 / 沙箱·单列可写」二选一(只 dag 时出现,§已确认)。
+   - **快速(`fast`,默认)**:同 stage 席位**并行**、主区**双列**、`parallelNoFile=true`(seat_parallel **禁写文件**)。= 之前的行为。
+   - **沙箱(`sandbox`)**:同 stage 席位**仍并行**,但主区**单列**(`selectedParallelSeats` 最多 1)、`parallelNoFile=false`(seat policy **允许写文件**);点头像切换查看,沙箱跟随当前席位。
+   - 数据流:`SeatSelectionResult.dagExecMode` → `RoundtablePlanningPage` state(持久化进 `DraftStep2(Run)Snapshot.dagExecMode`,mirror orchestrationPlan)→ `useStep2Orchestration` option → `runDagOrchestration`。
+
+**(3) 沙箱跟随当前显示席位(防 bug 重点,用户特别强调)**:`useStep2Orchestration`
+   - `sandboxFollowThreadIdRef` = 当前显示席位的 thread;`openSeatVirtualArtifact` 的 auto 守卫:sandbox 模式下,**后台并行席位**写文件时若不是当前显示席位,**不自动打开**(否则沙箱内容和主区列表错位)。
+   - 切换显示席位的 effect(keyed on `selectedParallelSeats` + `dagExecMode`):该席位**有产物**(stub 里有 write_file/str_replace)→ `openSeatLatestArtifact` 强制打开它最新的文件;**无产物**→ 关闭沙箱面板(`setActiveArtifactThreadId(null)` + `deselectArtifact` + `setArtifactsOpen(false)`)。
+   - 当前显示席位 live 写文件 → `handleArtifactToolPhase` auto-open,守卫放行(follow===该席位)。后台席位写 → 守卫拦掉、只缓存 stub;切到它时 effect 再打开。
+   - `toggleParallelSeat`:sandbox 单列 = 点头像切换(始终保留 1 个,不取消到空);fast 双列 = 原 LRU 2 个。
+
+**改动文件**:`lib/business-chain.ts`(SeatSelectionResult.dagExecMode)、`components/BusinessChainPicker.tsx`(子模式 UI)、`api/drafts.ts`(快照 dagExecMode)、`pages/RoundtablePlanningPage.tsx`(state/snapshot/hydrate/confirm/reset 全链)、`hooks/useStep2Orchestration.ts`(option + parallelNoFile/单列 + 沙箱跟随 + toggle cap)、`components/Step2Panel.tsx`(流程图弹窗 + 单列 grid)。typecheck 零新增(基线 65),dag-types 32 单测全过。
+
+**下次实地验收(沙箱跟随是重点)**:①推荐弹窗选有并行的链条 → 出现「快速/沙箱」二选一;②快速=双列禁写(无沙箱);③沙箱=单列、席位能写文件、点头像切换列表时沙箱内容**同步**切换:有产物显示、无产物关闭;④后台席位写文件不会把沙箱抢到非当前列表;⑤流程图点按钮弹窗、全尺寸、节点随执行点亮。
+
+### 12.6 ✅ 修:并行席位「跟着派活」（2026-06-07）
+
+**现象**(截图 `bug-1.png`):总控派活后,并行席位的气泡里显示的是**总控的整段派活叙述**(「我来调度各智能体…第1阶段任务清单:席位1…席位2…」),还去调 `skill_list` 找 `agent_orchestration`——席位在**模仿派活**。
+
+**根因**:总控这轮**没真正调用 `agent_orchestration` 工具**(弱模型 deepseek 用文字罗列了派活计划)→ 后端解析的 `dispatched=[]` → 前端 `pickDagSeatTask` 回退把**总控整段叙述**喂给**每个**席位 → 席位照抄叙述、模仿派活。(席位本就被 run policy 禁了 `agent_orchestration`,**派不了活**,只是空转一轮叙述 + 调 `skill_list`。)
+
+**修 v1(护栏,效果不足)**:`pickDagSeatTask` 加角色边界护栏 + 回退措辞改「挑出属于你的那份」;`buildDagStageLeaderTask` 加「必须真正调用工具」。→ **没拦住**:总控对 deepseek 仍只写文字不调工具(`dispatched` 还是空),席位拿到的**任务正文本身**就是那段「我来调度…席位1/2/3」,护栏被淹没;3/4 席位仍模仿派活,有的甚至绕道 `bash`+`python requests.get('/api/agents')` 调内部接口派活(bug-1~4)。
+
+**✅ 修 v2(根治:回退绝不注入派活叙述)**:`pickDagSeatTask` 去掉 `leaderContent` 入参——
+- **命中**总控结构化派活(真调了工具)→ `请你作为「X」，完成总控派给你的本阶段任务：<dispatched task>` + 护栏;
+- **未命中 / `dispatched` 空**(总控只写文字)→ **绝不**把总控派活叙述喂给席位,改给**干净本职任务**:「请你作为「X」,从你的专业职责出发,独立完成本阶段属于你的分析与交付。任务背景与此前各阶段交付已在你的会话上下文里(后端广播注入),据此承接」+ 护栏。护栏强化到「不要用 bash/python/脚本访问内部接口(/api/agents、agent_orchestration)派活、不要复述『我来调度』总控口吻」。
+- `buildDagStageLeaderTask` 的「必须真正调用工具」保留(让命中率更高、尽量走 exact-match)。
+- `dag-types.test.ts` 改 2 单测(共 33 过)。typecheck 65。
+
+> ⚠️ **残留次要污染源(若仍复发再处理)**:DAG 每个 stage 的 leader 轮,后端 `_leader_run` 会把 leader 的输入(含「请你作为总控…派活」)**预广播**进所有席位线程(`总控智能体收到用户消息:…`)。席位的**当轮任务**已干净(修 v2),这条只是历史上下文,理论上被「最新的干净任务 + 护栏」压制。若实测仍模仿派活,下一步:后端给 DAG leader 轮加 `suppress_pre_broadcast` / 或广播一条**净化**过的背景(去掉派活措辞)。
+
+### 12.7 ✅ 修 4 项(2026-06-07):席位仍派活(v3 后端)+ 沙箱关不掉 + 并行不自动下滑 + 流程图只到 Step2
+
+实测 §12.6 仍有席位派活(视觉设计师 `skill_manage` 找 agent-orchestration、列 dispatch all 4)——**坐实**了「残留次要污染源」:后端 leader 预广播把派活 prompt 推进席位线程,弱模型从历史里捡到派活意图。一起修了 4 项:
+
+1. **席位仍派活(根治·后端)**:`_leader_run` 加 `suppress_pre_broadcast` 参数;DAG「每 stage 派活轮」前端传 `suppressPreBroadcast: true`(`api/multi-agent.ts` → `suppress_pre_broadcast`,run/stream 读取)。为真时:**不**把总控派活 prompt 预广播给席位、**也不**把「总控给 X 派活」detached 广播给兄弟席位。recommend/chain 不传该 flag,行为不变。配套:`pickDagSeatTask` 加 `seedMessage` 入参——预广播抑制后席位线程没有用户原始消息了,把**任务背景**直接写进席位 task(此前各阶段交付仍由 special 完成后广播注入)。→ 席位线程里**任何地方都没有派活语句**,根治模仿。
+2. **沙箱关闭按钮关不掉**:沙箱跟随 effect 之前每次 render(deps 身份变)都重跑 → 把用户刚关的沙箱强制重开。加 `lastReconciledSeatRef` 守卫:**只在显示席位真正变化时**才开/关沙箱;用户手动关闭(席位没变)时 effect 早退,不再回弹。
+3. **并行时自动下滑失效**:平铺列表 ↔ 网格(两列/单列)切换时 `scrollHeight` 突变、`scrollTop` 被浏览器 clamp → `useAutoScroll` 误判「用户上滚」而停跟随。`Step2Panel` 加 effect:`isParallelRunning` / `selectedParallelSeats` 变化时 `scrollStep2ToBottom()` 重新拉到底 + 恢复跟随。
+4. **流程图只展示 Step2**:`DagFlowChart` 加 `showReportMilestone`(默认 true);Step2 弹窗 + 编辑器预览传 `false` —— 只到「共识」(Step2 终点),去掉「结果绘制」(那是 Step3)。
+
+**改动**:后端 `multi_agent.py`(`_leader_run` suppress 两处广播 + run/stream 读 flag);前端 `api/multi-agent.ts`、`lib/dag-types.ts`(pickDagSeatTask + seedMessage)、`hooks/useStep2Orchestration.ts`(传 flag + seed + 沙箱跟随守卫)、`components/Step2Panel.tsx`(自动下滑 effect + showReportMilestone)、`components/DagFlowChart.tsx`、`pages/BusinessChainEditorPage.tsx`。`dag-types.test.ts` 共 **34 单测过**;前端 tsc 65 基线零新增;后端 `py_compile` OK。
+
+### 12.8 ✅ 席位产出 md 文件 + 禁写 .py（2026-06-07）
+
+**现象**:某次 7 席位**全都没产出 md 文件**;且一直有的问题——席位**有时写 .py 脚本**(用户要求:不写 .py,其它格式可以)。
+
+**根因(没 md)**:两层都堵了——(a)**快速模式** `seat_parallel` policy 禁了 `write_file`(原「产物走正文」设计);(b)DAG 席位**提示词**写的是「直接输出你的交付正文」,即使沙箱模式(允许写)也不会去写文件。
+
+**修**:
+1. **后端 policy 放开写文件、统一禁 bash**(`roundtable_run_policy.py`):
+   - `seat_parallel`:去掉 `write_file` / `str_replace` 禁用(**可写 md**),保留禁 `bash` + 打断/越权类;仍放开 `web_search`。
+   - `seat`:新增禁 `bash`(原来允许)——圆桌席位是「文档产出者」,不该跑 shell/python 脚本(弱模型爱写 .py 再跑生成产物,乱且抓不到预览);改为**直接 write_file 写成品文档**。
+   - `report`:`bash` 已随 `seat` 禁,改为 `[*_SEAT_EXCLUDED, "str_replace"]`(集合不变)。
+   - 测试 `test_roundtable_run_policy.py`:`test_seats_can_write_files_but_not_run_bash`(seat / seat_parallel 都可写文件、都禁 bash),6 用例过。
+2. **前端提示词**(`pickDagSeatTask`)加「产物要求」:**把完整交付写成一个 .md 文件**(write_file 到 outputs)+ 正文给摘要;**禁写 .py 或任何脚本文件**,.md/.html/.txt 等其它格式都可以,唯独不要 .py。
+3. **快速模式(双列)不自动开沙箱**(`openSeatVirtualArtifact` 新增守卫):放开写文件后,双列里多席位并发写文件会让单沙箱预览反复串台——fast 模式 DAG 并行批次**完全不自动开沙箱**(文件仍写盘,Step3/文件卡可查看);沙箱模式(单列)仍按「沙箱跟随当前席位」预览。
+
+**关于 .py 的强度**:`write_file` 是全局工具(所有 agent 共用),无法在网关层按扩展名硬拦,故 .py 禁止走**提示词**(强约束)+ **禁 bash**(写了也跑不了,脚本生成产物的动机被掐断)。若实测仍偶发写 .py 且需**硬拦**,下一步:给 lead_agent 的 `write_file` 工具加一个「按 run context 禁某些扩展名」的开关,网关 `_run_payload` 对圆桌席位置 `[".py"]`(只影响圆桌 run,不动其它 agent)。
+
+**改动**:`roundtable_run_policy.py`、`test_roundtable_run_policy.py`、`lib/dag-types.ts`、`lib/dag-types.test.ts`(35 过)、`hooks/useStep2Orchestration.ts`。前端 tsc 65、后端 py_compile OK + 6 policy 单测过。⚠️ **改了后端,需重启 Gateway**。
+
+### 12.9 ✅ 席位「按需取前序全文」只读工具 read_peer_delivery（2026-06-07）
+
+**诉求**:A,B,C → D,E 时,D,E 默认拿 A,B,C 的**摘要**,但识别到需要**全文**时也能取到。之前只有总控(leader)能「摘要默认+按需全文」(跨 thread 读),下游席位**不能**(席位间 thread 隔离、只有 1500 字截断广播)。
+
+**实现**(真·按需,全文只在调用工具时才进 LLM 上下文):
+1. **新 harness 只读工具** `read_peer_delivery(seat_name)`(`packages/harness/deerflow/tools/builtins/roundtable_peers_tool.py`):从 `runtime.context["roundtable_peer_deliveries"]`(网关注入的 `[{name,content}]`)按席位名取全文;空名→列出可取席位;非圆桌场景→「无」。只读 context dict,**不跨 thread、不碰 sandbox、无网络**,纯 `deerflow.*`(不违反 harness→app 防火墙)。注册进 `tools/tools.py` 的 builtin(始终在,只读无副作用)。
+2. **网关注入 context**:`_run_payload` 加 `extra_context`;`_special_run` 收 `peer_deliveries` → 注入 `context.roundtable_peer_deliveries`;run/stream 读 `peer_deliveries`(规整 `[{name,content}]`)。**不进 prompt → 不调工具就不耗 token**。
+3. **run policy**:`read_peer_delivery` 从 `leader`(总控自己跨 thread 读,不需要)+ `report`(Step3 不读前序)排除;**席位(seat/seat_parallel)保留**。
+4. **前端**:`runDagOrchestration` 跨 stage 累积**完整交付** `priorDeliveries`,stage>0 席位的 special run 带 `peerDeliveries`(`api/multi-agent.ts` → `peer_deliveries`);`pickDagSeatTask` 加 `hasPeers` 形参,有前序时在 task 里提示「需要某前序席位全文时调用 read_peer_delivery('<名>'),平时用摘要」。
+
+**最终语义**:D、E 默认看 A、B、C 的**摘要**(1500 字广播);识别到不够 → 调 `read_peer_delivery('情报收集')` 取**全文**。总控仍是摘要默认+综合轮全文。**= 用户要的「摘要默认、按需全文」对席位也成立了。**
+
+**改动**:后端 `roundtable_peers_tool.py`(新)、`tools/tools.py`、`roundtable_run_policy.py`、`multi_agent.py`;前端 `api/multi-agent.ts`、`lib/dag-types.ts`、`lib/dag-types.test.ts`(36 过)、`hooks/useStep2Orchestration.ts`。前端 tsc 65;后端 py_compile OK + 6 policy 单测过 + 工具导入/行为 smoke 通过。⚠️ **改了后端 + 新增 harness 工具,需重启 Gateway**。
+
+### 12.10 ✅ 修:沙箱模式第一个席位不自动开沙箱（2026-06-07，前端）
+
+**现象**:沙箱(单列)模式并行时,**第一个**席位的消息列表不自动打开沙箱(要手动开);切换到其它席位时正常自动打开。
+
+**根因**:沙箱跟随 effect(§12.5)在选中席位**还没写产物**时走「关闭沙箱」分支,里面同时调了 `deselectArtifact()` **和** `setArtifactsOpen(false)`。后者是 context 的 **wrapped setOpen**(`context.tsx:73`):`关闭时若 autoOpen 为真 → 把 autoOpen 置 false`。于是第一个席位刚选中(还没写文件)→ autoOpen 被关 → 该席位**随后 live 写文件**时,`openSeatVirtualArtifact` 的 `!flags.autoOpen` 守卫拦掉自动打开。切换到**已写过**文件的席位能开,是因为那条路走 `openSeatLatestArtifact`(force,auto=false,绕过 autoOpen 守卫)。
+
+**修**(一行):关闭分支只保留 `deselectArtifact()`(它走 raw `setOpen(false)`,**不**动 autoOpen),删掉多余的 `setArtifactsOpen(false)`。这样面板关掉、但 autoOpen 仍为真 → 第一个席位 live 写文件时正常自动开沙箱。(若用户**手动**关过沙箱,autoOpen 本就为 false,不会自动重开 —— 尊重用户。)改 `hooks/useStep2Orchestration.ts` 沙箱跟随 effect。tsc 65。
+
+### 12.11 ✅ 修:快速模式又生成文件了 + Fragment 警告（2026-06-07）；记录无关 404
+
+1. **快速模式不应生成文件(回退 §12.8 的过度放开)**:§12.8 为「让席位产 md」把 `seat_parallel`(快速模式)也放开了 write_file —— 但**快速模式(双列)的设计就是产物走正文、不写文件**,写文件归**沙箱模式**(单列 + 沙箱预览)。修:
+   - `roundtable_run_policy.py`:`seat_parallel` 重新**禁 write_file / str_replace**(保留禁 bash);`seat`(沙箱模式)仍可写。
+   - `useStep2Orchestration.ts`:`parallelNoFile = dagExecMode !== "sandbox"`(快速模式一律禁写,含单节点 stage;沙箱模式放开)。
+   - `pickDagSeatTask` 加 `allowFiles` 形参:沙箱(true)=写 .md 文件 + 禁 .py;快速(false)=产物走正文、不写文件。hook 按 `dagExecMode === "sandbox"` 传。
+   - 测试:`test_sandbox_seat_writes_files_fast_parallel_does_not`(6 过);`dag-types.test.ts` 拆成沙箱/快速两个产物要求用例(37 过)。
+   - **语义**:快速=双列、产物走正文、不写文件;沙箱=单列、写 .md、沙箱跟随预览。
+2. **`Invalid prop data-lov-id supplied to React.Fragment`**:`DagFlowChart` 的 stage 循环用了具名 `<Fragment key>`,dev 代码标注插件(lovable-tagger)给它注入 `data-lov-id`,而 Fragment 只接受 key/children → React 警告。修:换成 `<div className="contents" key=...>`(display:contents 不生成盒子,Connector/StageColumn 仍是外层 flex 直接子项,布局不变,且能接收 data-*)。移除 `Fragment` import。
+3. **(无关,非本期引入)`/api/getTokenByEmail?email=…%40local.deerflow` 404 ×60**:来自 `src/core/studio/api.ts` 的 `fetchStudioToken`(studio/expert-auth 引导),用户邮箱被映射到 legacy `@local.deerflow` 域、后端 `getTokenByEmail` 不认 → 404,React Query 跨多个 `useStudioToken` 调用点重试 → 重复多次。**与圆桌 DAG 改动无关**(圆桌头像是本地 SVG,本期未新增任何前端 GET)。需要的话单独排查 studio token 链路。
+
+---
+
+## 13. 实施进度（截至 2026-06-06，下次会话续）
+
+| Phase | 内容 | 状态 |
+|---|---|---|
+| 1 | DAG 数据模型 + 校验 + 持久化字段（`lib/dag-types.ts`，24 单测） | ✅ 完成 |
+| 2 | 分层编辑器（**做进业务链条页**）：链条加 `stages` 字段（前后端 + alembic `20260607_03` + 11 后端单测）；`BusinessChainEditorPage` 竖列分组 Stage（DnD + 按钮）；纯逻辑 `lib/chain-stages.ts`（19 单测） | ✅ 完成 |
+| 3 | `runDagOrchestration`：批内 `Promise.all` 并行 + 批间 barrier 串行 + 依赖摘要注入（方案 B 前端直派） | ✅ 完成 |
+| 4 | 并行 run policy `seat_parallel`（`roundtable_run_policy.py` + `multi_agent.py` 读 `parallel_no_file`，6 后端单测）；**§12.1 方案 A 已放开 web_search/技能** | ✅ 完成 |
+| 5 | 并行显示：收起左侧 + 头像条 + 两列 + 选中切换 | ✅ 完成（本轮修了侧栏/Markdown/字数） |
+| 6 | 流式高性能：ref 全量累积 + 节流 flush（仅选中渲染） | ✅ 完成 |
+| 7 | DAG 流程图执行态可视化（`DispatchChainModal` 复刻成按 stage 分列；后改成**弹窗**见 §12.5） | ✅ 完成（2026-06-07） |
+
+**端到端闭环已通**：链条页编排分层 → 存库 → 选链条进 Step2 → `runDagOrchestration` 并行直派 → 各阶段完交回总控派活/收口。
+
+**✅ §12.3 已实施（2026-06-07）**：见 §12.3「实施结论」。`runDagOrchestration` 在每个非末尾 stage barrier 后插入 leader 中转轮（`synthesisMode:false` 走轻量 `last-ai-message` 注入摘要、收口轮才按需全文），承上启下驱动下一批；后端零改动；`dag-types.ts` 加 `buildDagTransitTask` + `buildStageTask.priorIsBridge`，27 单测全过。
+
+**下次会话 TODO（优先级从高到低）**：
+1. **运行时实地验收 §12.3**：①每个 stage 之间出现「总控协调（承上启下）」气泡，内容是对上一批的综合；②后端日志中转轮 `[leader-roster] ... 注入席位交付状态` 显示上一批 ✅、未跑的 ⬜；③下一 stage 席位 task 里带的是总控承上说明（非机械摘要）；④中转轮不应真的派活（即使派了前端也忽略）。
+2. 运行时实地验收（旧）：①§12.1 后并行席位能搜索、步骤条显示；②并行 special 日志时间重叠 + `Excluded` 不含 web_search 含 write_file；③用户干预后是「总控派活」而非重跑 DAG；④最左全局侧栏 + 参与角色栏并行收起且不回弹。
+3. **✅ Phase 7 DAG 流程图可视化已完成（2026-06-07）**：见 §7.2。`DagFlowChart` 组件 + 编辑器只读预览 + Step2 执行态缩略(`dagNodeStates` 实时驱动)。
+4. （可选）串行也确定性注入上一轮交付摘要。
+
+**关键文件速查**：
+- 前端：`hooks/useStep2Orchestration.ts`（`runDagOrchestration` / `dagPlanExecutedRef` / 并行 store+flush）、`components/Step2Panel.tsx`（两列+头像条）、`components/ParallelSeatStrip.tsx`、`lib/dag-types.ts`、`lib/chain-stages.ts`、`pages/BusinessChainEditorPage.tsx`、`pages/RoundtablePlanningPage.tsx`（侧栏收起 effect + handleConfirmAgents dag 分支）、`components/BusinessChainPicker.tsx`（链条→dag）。
+- 后端：`app/gateway/roundtable_run_policy.py`（`seat_parallel`，**待放宽**）、`app/gateway/routers/multi_agent.py`（`_special_run` 读 `parallel_no_file`）、`persistence/roundtable_chains/`（`stages` 列）、`migrations/versions/20260607_03_chain_stages.py`。
+- 测试：`frontend-web` 用 esbuild 转译 `.test.ts` 后 `node --test`（项目无 vitest）；后端 `PYTHONPATH=. uv run pytest tests/test_roundtable_chain_stages.py tests/test_roundtable_run_policy.py`。
+
@@ -13,7 +13,8 @@
        } catch (e) {}
      })();
    </script>
-    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <link rel="icon" type="image/svg+xml" href="/favicon.svg" />
    <title>CM 助手</title>
  </head>
  <body>
@@ -22,6 +22,7 @@
    "@dnd-kit/core": "^6.3.1",
    "@dnd-kit/sortable": "^10.0.0",
    "@dnd-kit/utilities": "^3.2.2",
+    "@fontsource/noto-sans-sc": "^5.2.9",
    "@langchain/core": "^1.1.15",
    "@langchain/langgraph-sdk": "^1.5.3",
    "@radix-ui/react-avatar": "^1.1.11",
@@ -55,6 +56,7 @@
    "@uiw/react-codemirror": "^4.25.4",
    "@xyflow/react": "^12.10.0",
    "ai": "^6.0.33",
+    "axios": "1.16.1",
    "best-effort-json-parser": "^1.2.1",
    "canvas-confetti": "^1.9.4",
    "class-variance-authority": "^0.7.1",
@@ -63,6 +65,7 @@
    "codemirror": "^6.0.2",
    "date-fns": "^4.1.0",
    "dayjs": "^1.11.21",
+    "dnd-kit": "^0.0.2",
    "docx": "^9.5.1",
    "dotenv": "^17.2.3",
    "embla-carousel-react": "^8.6.0",
@@ -0,0 +1,29 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 64 64" role="img" aria-label="智能助手中心">
+  <defs>
+    <!-- 品牌玫红渐变填充的圆角磁贴 -->
+    <linearGradient id="tile" x1="6" y1="4" x2="58" y2="60" gradientUnits="userSpaceOnUse">
+      <stop stop-color="#FB7185"/>
+      <stop offset="1" stop-color="#E11D48"/>
+    </linearGradient>
+    <!-- 气泡内 AI 闪光星：玫红渐变，与白色气泡形成对比 -->
+    <linearGradient id="spark" x1="24" y1="18" x2="40" y2="36" gradientUnits="userSpaceOnUse">
+      <stop stop-color="#FB7185"/>
+      <stop offset="1" stop-color="#E11D48"/>
+    </linearGradient>
+  </defs>
+
+  <!-- 磁贴背景 -->
+  <rect width="64" height="64" rx="15" fill="url(#tile)"/>
+
+  <!-- 辅助小闪光，点出「多种智能工具」 -->
+  <path fill="#FFFFFF" fill-opacity="0.85"
+    d="M47 43 Q47.6 46.4 50.5 47 Q47.6 47.6 47 51 Q46.4 47.6 43.5 47 Q46.4 46.4 47 43 Z"/>
+
+  <!-- 助手对话气泡（白色）+ 尾巴 -->
+  <rect x="12" y="13" width="40" height="28" rx="10" fill="#FFFFFF"/>
+  <path fill="#FFFFFF" d="M21 40 H31 L19 49 Z"/>
+
+  <!-- 气泡内的 AI 闪光星 -->
+  <path fill="url(#spark)"
+    d="M32 17.5 Q33.2 25.8 41.5 27 Q33.2 28.2 32 36.5 Q30.8 28.2 22.5 27 Q30.8 25.8 32 17.5 Z"/>
+</svg>
@@ -17,6 +17,7 @@ import LoginPage from "./pages/LoginPage";
 import PageRoutes from "./pages/PageRoutes";
 import PublicScheduledTaskPage from "./pages/PublicScheduledTaskPage";
 import PublicSharePage from "./pages/PublicSharePage";
+import PublicRoundtableSharePage from "./pages/PublicRoundtableSharePage";
 import EmbedChatPage from "./pages/EmbedChatPage";
 import { ChatRuntime } from "./pages/WorkspaceRoutes";
 import { NotFoundPage } from "./pages/NotFoundPage";
@@ -63,6 +64,15 @@ export function App() {
          <Route path="/landing" element={<LandingPage />} />
          {/* Public read-only conversation viewer — no authentication. */}
          <Route path="/share/:shareCode" element={<PublicSharePage />} />
+          {/* Public read-only roundtable share — landing + full result report. */}
+          <Route
+            path="/roundtable-share/:shareCode"
+            element={<PublicRoundtableSharePage />}
+          />
+          <Route
+            path="/roundtable-share/:shareCode/report"
+            element={<PublicRoundtableSharePage report />}
+          />
          {/* Public read-only scheduled-task runs viewer — no authentication. */}
          <Route
            path="/public/scheduled-tasks/:taskId"
@@ -0,0 +1,45 @@
+import { useEffect, useState } from "react";
+
+import { injectInPageAnchorHandler } from "@/core/utils/markdown";
+
+/**
+ * Sandboxed preview of a generated HTML document.
+ *
+ * Renders via a `blob:` URL rather than `srcDoc`. A srcDoc document's base URL
+ * is `about:srcdoc`, so clicking an in-page anchor (`<a href="#section">`)
+ * navigates the frame to `about:blank#section` and BLANKS it. A `blob:` URL is
+ * a real document URL, so fragment links scroll within the frame as expected —
+ * all without enabling scripts (the sandbox stays script-free for security; the
+ * server already sanitizes script vectors and this is defense-in-depth).
+ *
+ * The `charset=utf-8` on the blob type is required: a blob: URL whose
+ * Content-Type omits the charset is decoded with the OS default (GBK/Latin-1 on
+ * Chinese Windows), garbling CJK text when the HTML lacks a `<meta charset>`.
+ */
+export function HtmlPreviewFrame({
+  html,
+  className = "h-[70vh] w-full rounded-md border bg-white",
+}: {
+  html: string;
+  className?: string;
+}) {
+  const [url, setUrl] = useState<string>();
+
+  useEffect(() => {
+    const blob = new Blob([injectInPageAnchorHandler(html ?? "")], {
+      type: "text/html;charset=utf-8",
+    });
+    const objectUrl = URL.createObjectURL(blob);
+    setUrl(objectUrl);
+    return () => URL.revokeObjectURL(objectUrl);
+  }, [html]);
+
+  return (
+    <iframe
+      title="HTML 预览"
+      sandbox="allow-scripts allow-forms"
+      src={url}
+      className={className}
+    />
+  );
+}
@@ -1,5 +1,5 @@
 .sidebar-contnet {
-    position: fixed;
+    position: absolute;
    left: 0;
    top: 4rem;
    z-index: 40;
@@ -55,14 +55,6 @@ export function PageSidebarDark({ collapsed, onToggleCollapsed }: PageSidebarDar
    }, 180);
  };

-  const closeNavPanel = () => {
-    if (hoverCloseTimerRef.current !== null) {
-      window.clearTimeout(hoverCloseTimerRef.current);
-      hoverCloseTimerRef.current = null;
-    }
-    setHoveredTopId(null);
-  };
-
  const hasActiveChild = (item: MenuItem): boolean => {
    if (item.path && pathname === item.path) {
      return true;
@@ -83,7 +75,9 @@ export function PageSidebarDark({ collapsed, onToggleCollapsed }: PageSidebarDar
    if (matchedTopItem) {
      setActiveTopId(matchedTopItem.id);
    }
-    closeNavPanel();
+    // 不在导航时强制关闭 flyout：flyout 绝对定位在 group 盒子之外，强制关闭后鼠标
+    // 仍停在 flyout 区域却收不到 group 的 mouseenter，导致连续点击第二个任务时面板
+    // 消失且不回来。开合只交给 hover（mouseleave 有 180ms 宽限），即可连续点选。
  }, [pathname, visibleMenuItems]);

  const toggleExpanded = (id: string) => {
@@ -122,14 +116,12 @@ export function PageSidebarDark({ collapsed, onToggleCollapsed }: PageSidebarDar
    if (item.children?.length) {
      const firstPath = findFirstRoutePath(item.children);
      if (firstPath) {
-        closeNavPanel();
        navigate(firstPath);
      }
      return;
    }

    if (item.path) {
-      closeNavPanel();
      navigate(item.path);
    }
  };
@@ -141,7 +133,6 @@ export function PageSidebarDark({ collapsed, onToggleCollapsed }: PageSidebarDar
    }

    if (item.path) {
-      closeNavPanel();
      navigate(item.path);
    }
  };
@@ -0,0 +1,96 @@
+"use client";
+
+import { ChevronLeftIcon, ChevronRightIcon } from "lucide-react";
+
+import { Button } from "@/components/ui/button";
+import { cn } from "@/lib/utils";
+
+/** Compute the page-number window to render, inserting -1 sentinels for gaps.
+ * Always shows first/last and a window around the current page. */
+function buildPageItems(current: number, totalPages: number): number[] {
+  if (totalPages <= 7) {
+    return Array.from({ length: totalPages }, (_, i) => i + 1);
+  }
+  const items = new Set<number>([1, totalPages, current]);
+  for (const d of [1, 2]) {
+    if (current - d >= 1) items.add(current - d);
+    if (current + d <= totalPages) items.add(current + d);
+  }
+  const sorted = [...items].sort((a, b) => a - b);
+  const out: number[] = [];
+  let prev = 0;
+  for (const p of sorted) {
+    if (prev && p - prev > 1) out.push(-1); // gap sentinel
+    out.push(p);
+    prev = p;
+  }
+  return out;
+}
+
+export interface PaginationProps {
+  page: number;
+  pageSize: number;
+  total: number;
+  onPageChange: (page: number) => void;
+  className?: string;
+}
+
+/** Controlled, compact pagination control. Renders nothing when a single page. */
+export function Pagination({
+  page,
+  pageSize,
+  total,
+  onPageChange,
+  className,
+}: PaginationProps) {
+  const totalPages = Math.max(1, Math.ceil(total / Math.max(pageSize, 1)));
+  if (totalPages <= 1) return null;
+
+  const items = buildPageItems(page, totalPages);
+
+  return (
+    <nav
+      className={cn("flex items-center justify-center gap-1", className)}
+      aria-label="分页"
+    >
+      <Button
+        variant="outline"
+        size="icon-sm"
+        disabled={page <= 1}
+        onClick={() => onPageChange(page - 1)}
+        aria-label="上一页"
+      >
+        <ChevronLeftIcon className="h-4 w-4" />
+      </Button>
+      {items.map((p, idx) =>
+        p === -1 ? (
+          <span
+            key={`gap-${idx}`}
+            className="text-muted-foreground px-1 text-sm select-none"
+          >
+            …
+          </span>
+        ) : (
+          <Button
+            key={p}
+            variant={p === page ? "default" : "outline"}
+            size="icon-sm"
+            onClick={() => onPageChange(p)}
+            aria-current={p === page ? "page" : undefined}
+          >
+            {p}
+          </Button>
+        ),
+      )}
+      <Button
+        variant="outline"
+        size="icon-sm"
+        disabled={page >= totalPages}
+        onClick={() => onPageChange(page + 1)}
+        aria-label="下一页"
+      >
+        <ChevronRightIcon className="h-4 w-4" />
+      </Button>
+    </nav>
+  );
+}
@@ -22,10 +22,31 @@ function ResizablePanelGroup({
  );
 }

+// react-resizable-panels v4 changed size semantics: a bare *number* is now
+// interpreted as PIXELS, while a unit-less *string* is a percentage. Every call
+// site in this app passes sizes as percentages (the v2/v3 convention), so a
+// value like `maxSize={60}` would otherwise pin a panel to 60px and freeze the
+// layout/drag. Normalize numbers to "<n>%" to preserve the intended percentage.
+const asPercent = (v: number | string | undefined) =>
+  typeof v === "number" ? `${v}%` : v;
+
 function ResizablePanel({
+  defaultSize,
+  minSize,
+  maxSize,
+  collapsedSize,
  ...props
 }: React.ComponentProps<typeof ResizablePrimitive.Panel>) {
-  return <ResizablePrimitive.Panel data-slot="resizable-panel" {...props} />;
+  return (
+    <ResizablePrimitive.Panel
+      data-slot="resizable-panel"
+      defaultSize={asPercent(defaultSize)}
+      minSize={asPercent(minSize)}
+      maxSize={asPercent(maxSize)}
+      collapsedSize={asPercent(collapsedSize)}
+      {...props}
+    />
+  );
 }

 function ResizableHandle({
@@ -39,14 +60,19 @@ function ResizableHandle({
    <ResizablePrimitive.Separator
      data-slot="resizable-handle"
      className={cn(
-        "bg-border focus-visible:ring-ring relative flex w-px items-center justify-center after:absolute after:inset-y-0 after:left-1/2 after:w-1 after:-translate-x-1/2 focus-visible:ring-1 focus-visible:ring-offset-1 focus-visible:outline-hidden data-[panel-group-direction=vertical]:h-px data-[panel-group-direction=vertical]:w-full data-[panel-group-direction=vertical]:after:left-0 data-[panel-group-direction=vertical]:after:h-1 data-[panel-group-direction=vertical]:after:w-full data-[panel-group-direction=vertical]:after:translate-x-0 data-[panel-group-direction=vertical]:after:-translate-y-1/2 [&[data-panel-group-direction=vertical]>div]:rotate-90",
+        // Thin visible divider, but a generous invisible hit area on both sides
+        // (after:w-4 → 16px) so the handle is easy to grab and drag. Hovering /
+        // dragging tints the divider so it's obvious it's interactive.
+        "bg-border hover:bg-primary/60 active:bg-primary relative flex w-px items-center justify-center transition-colors",
+        "after:absolute after:inset-y-0 after:left-1/2 after:w-4 after:-translate-x-1/2 after:cursor-col-resize",
+        "focus-visible:ring-ring focus-visible:ring-1 focus-visible:ring-offset-1 focus-visible:outline-hidden",
        className,
      )}
      {...props}
    >
      {withHandle && (
-        <div className="bg-border z-10 flex h-4 w-3 items-center justify-center rounded-xs border">
-          <GripVerticalIcon className="size-2.5" />
+        <div className="bg-border z-10 flex h-8 w-4 items-center justify-center rounded-sm border shadow-sm">
+          <GripVerticalIcon className="size-3.5" />
        </div>
      )}
    </ResizablePrimitive.Separator>
@@ -1,6 +1,6 @@
 "use client";

-import { Loader2, MessageSquareIcon, SearchIcon, UserIcon } from "lucide-react";
+import { ArrowDownWideNarrow, Loader2, MessageSquareIcon, SearchIcon, UserIcon } from "lucide-react";
 import { useMemo, useState } from "react";

 import { Badge } from "@/components/ui/badge";
@@ -83,6 +83,8 @@ function UserInfoPanel({ user }: { user: UserListItem }) {
            <Badge variant="secondary">普通用户</Badge>
          )}
        </dd>
+        <dt className="text-muted-foreground font-medium">问答次数</dt>
+        <dd className="tabular-nums">{user.qa_count}</dd>
        <dt className="text-muted-foreground font-medium">Skills</dt>
        <dd className="tabular-nums">{user.skill_count}</dd>
        <dt className="text-muted-foreground font-medium">Agents</dt>
@@ -300,21 +302,29 @@ export function AdminUserHub() {
  const { data: users, isLoading: usersLoading } = useAllUsers(true);
  const [selectedUserId, setSelectedUserId] = useState<string | null>(null);
  const [userQuery, setUserQuery] = useState("");
-  const [activeTab, setActiveTab] = useState<"info" | "audit" | "memory">("info");
+  // 活动审计 放到前面 → 默认进入审计标签页。
+  const [activeTab, setActiveTab] = useState<"audit" | "info" | "memory">("audit");
+  // 是否按问答次数（降序）排序用户列表。
+  const [sortByQa, setSortByQa] = useState(false);

  const filteredUsers = useMemo(() => {
    const needle = userQuery.trim().toLowerCase();
-    const list = users ?? [];
-    return needle
-      ? list.filter((u) => u.email.toLowerCase().includes(needle))
-      : list;
-  }, [users, userQuery]);
+    let list = users ?? [];
+    if (needle) {
+      list = list.filter((u) => u.email.toLowerCase().includes(needle));
+    }
+    if (sortByQa) {
+      // Copy before sorting so we never mutate the query cache array.
+      list = [...list].sort((a, b) => (b.qa_count ?? 0) - (a.qa_count ?? 0));
+    }
+    return list;
+  }, [users, userQuery, sortByQa]);

  const selectedUser = users?.find((u) => u.id === selectedUserId) ?? null;

  function selectUser(id: string) {
    setSelectedUserId(id);
-    setActiveTab("info");
+    setActiveTab("audit");
  }

  return (
@@ -338,6 +348,20 @@ export function AdminUserHub() {
              className="pl-8"
            />
          </div>
+          <button
+            type="button"
+            onClick={() => setSortByQa((v) => !v)}
+            className={cn(
+              "mx-2 mb-1 flex items-center justify-center gap-1 rounded-md border px-2 py-1 text-xs",
+              sortByQa
+                ? "border-primary/40 bg-primary/5 text-primary"
+                : "text-muted-foreground hover:bg-muted",
+            )}
+            title="按问答次数从高到低排序"
+          >
+            <ArrowDownWideNarrow className="size-3.5" />
+            {sortByQa ? "按问答次数排序中" : "按问答次数排序"}
+          </button>
          <ScrollArea className="min-h-0 flex-1">
            {usersLoading && (
              <div className="text-muted-foreground flex items-center justify-center gap-2 py-8 text-sm">
@@ -369,6 +393,12 @@ export function AdminUserHub() {
                      管理员
                    </Badge>
                  )}
+                  <span
+                    className="text-muted-foreground shrink-0 tabular-nums text-xs"
+                    title="问答次数"
+                  >
+                    {u.qa_count ?? 0}
+                  </span>
                </button>
              ))}
            </div>
@@ -388,8 +418,8 @@ export function AdminUserHub() {
          >
            <div className="border-b px-4 pt-3 shrink-0">
              <TabsList variant="line">
-                <TabsTrigger value="info">用户信息</TabsTrigger>
                <TabsTrigger value="audit">活动审计</TabsTrigger>
+                <TabsTrigger value="info">用户信息</TabsTrigger>
                <TabsTrigger value="memory">记忆管理</TabsTrigger>
              </TabsList>
            </div>
@@ -7,6 +7,7 @@ import {
  InfoIcon,
  LockIcon,
  MessageSquareIcon,
+  PinIcon,
  ShieldIcon,
  SparklesIcon,
  SquarePenIcon,
@@ -15,7 +16,14 @@ import {
  Trash2Icon,
 } from "lucide-react";
 import { useRouter } from "next/navigation";
-import { useEffect, useMemo, useState } from "react";
+import {
+  useEffect,
+  useLayoutEffect,
+  useMemo,
+  useRef,
+  useState,
+  type ReactNode,
+} from "react";
 import { toast } from "sonner";

 import { Badge } from "@/components/ui/badge";
@@ -49,6 +57,7 @@ import {
  useSetAgentFeatured,
  useSetAgentPrivate,
  useToggleAgentFavorite,
+  useToggleAgentPin,
  useUpdateAgent,
 } from "@/core/agents";
 import { getAgent } from "@/core/agents/api";
@@ -61,9 +70,122 @@ import { cn } from "@/lib/utils";

 interface AgentCardProps {
  agent: Agent;
+  /** "card" (default) renders the full gallery card; "list" renders a compact
+   * single-row layout for the list view. All dialogs/actions are shared. */
+  layout?: "card" | "list";
 }

-export function AgentCard({ agent }: AgentCardProps) {
+interface BadgeItem {
+  key: string;
+  node: ReactNode;
+}
+
+// Minimum number of skill/tool badges to always render before collapsing the
+// remainder into the "+N" chip.
+const MIN_VISIBLE_BADGES = 3;
+
+/** Render skill/tool-group badges clamped to at most two rows. Overflow is
+ * collapsed into a clickable "+N" chip that opens a dialog listing the full
+ * badge set (the visible rows stay as-is — only the chip is interactive).
+ *
+ * Badge widths are variable, so the cutoff is measured rather than assumed: an
+ * off-screen mirror of the full badge set is laid out at the real container
+ * width, and we keep only the badges that land within the first two rows
+ * (reserving one slot for the "+N" chip). A ResizeObserver recomputes when the
+ * responsive grid changes the card width.
+ */
+function ClampedBadgeRow({ items }: { items: BadgeItem[] }) {
+  const measureRef = useRef<HTMLDivElement>(null);
+  const [visible, setVisible] = useState(items.length);
+  const [dialogOpen, setDialogOpen] = useState(false);
+  const sig = items.map((i) => i.key).join("|");
+
+  useLayoutEffect(() => {
+    const el = measureRef.current;
+    if (!el) return;
+    const compute = () => {
+      const kids = Array.from(el.children) as HTMLElement[];
+      if (kids.length === 0) {
+        setVisible(0);
+        return;
+      }
+      const top0 = kids[0].offsetTop;
+      const rowH = kids[0].offsetHeight;
+      // +2px fudge so the second row's badges (which may sit a hair lower due
+      // to line-box rounding) are not falsely treated as a third row.
+      const maxBottom = top0 + rowH * 2 + 2;
+      let count = 0;
+      for (const k of kids) {
+        if (k.offsetTop + k.offsetHeight <= maxBottom) count += 1;
+        else break;
+      }
+      // Reserve one slot for the "+N" chip when anything overflows so the chip
+      // itself never spills onto a third row.
+      if (count < kids.length && count > 0) count -= 1;
+      // Always surface a few badges before collapsing into "+N", even when the
+      // card is narrow enough that two rows barely fit anything (otherwise a
+      // skinny column could show just "+N" with no skills at all). Keeps at
+      // least one badge hidden so the chip still makes sense.
+      if (count < kids.length) {
+        count = Math.max(count, Math.min(MIN_VISIBLE_BADGES, kids.length - 1));
+      }
+      setVisible(count);
+    };
+    compute();
+    const ro = new ResizeObserver(compute);
+    ro.observe(el);
+    return () => ro.disconnect();
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [sig]);
+
+  const hidden = items.length - visible;
+  const showChip = hidden > 0;
+  const shown = items.slice(0, visible);
+
+  return (
+    <div className="relative">
+      {/* Off-screen full-width mirror used only for measuring row breaks. */}
+      <div
+        ref={measureRef}
+        aria-hidden
+        className="pointer-events-none invisible absolute inset-x-0 top-0 flex flex-wrap gap-1"
+      >
+        {items.map((i) => i.node)}
+      </div>
+      <div className="flex flex-wrap gap-1">
+        {shown.map((i) => i.node)}
+        {showChip && (
+          <Badge
+            variant="secondary"
+            className="hover:bg-secondary/70 cursor-pointer text-xs"
+            title="查看全部"
+            onClick={(e) => {
+              e.stopPropagation();
+              setDialogOpen(true);
+            }}
+          >
+            +{hidden}
+          </Badge>
+        )}
+      </div>
+
+      <Dialog open={dialogOpen} onOpenChange={setDialogOpen}>
+        <DialogContent className="sm:max-w-lg">
+          <DialogHeader>
+            <DialogTitle>全部技能与工具</DialogTitle>
+            <DialogDescription>共 {items.length} 项</DialogDescription>
+          </DialogHeader>
+          <div className="flex max-h-[60vh] flex-wrap gap-1.5 overflow-y-auto py-1">
+            {items.map((i) => i.node)}
+          </div>
+        </DialogContent>
+      </Dialog>
+    </div>
+  );
+}
+
+export function AgentCard({ agent, layout = "card" }: AgentCardProps) {
+  const isList = layout === "list";
  const { t } = useI18n();
  const router = useRouter();
  const deleteAgent = useDeleteAgent();
@@ -72,6 +194,7 @@ export function AgentCard({ agent }: AgentCardProps) {
  const setFeatured = useSetAgentFeatured();
  const setPrivate = useSetAgentPrivate();
  const toggleFavorite = useToggleAgentFavorite();
+  const togglePin = useToggleAgentPin();
  const { skills, isLoading: isSkillsLoading } = useSkills();
  const [deleteOpen, setDeleteOpen] = useState(false);
  const [editOpen, setEditOpen] = useState(false);
@@ -110,6 +233,7 @@ export function AgentCard({ agent }: AgentCardProps) {
  // already own, so only offer it on built-in / others' agents.
  const canFavorite = !isOwned;
  const isFavorite = !!agent.is_favorite;
+  const isPinned = !!agent.is_pinned;

  useEffect(() => {
    if (!editOpen) {
@@ -273,6 +397,16 @@ export function AgentCard({ agent }: AgentCardProps) {
    }
  }

+  async function handleTogglePin() {
+    const next = !isPinned;
+    try {
+      await togglePin.mutateAsync({ id: agent.id, pinned: next });
+      toast.success(next ? "已置顶" : "已取消置顶");
+    } catch (err) {
+      toast.error(err instanceof Error ? err.message : String(err));
+    }
+  }
+
  async function handleToggleFeatured() {
    // One-click on/off — ordering is handled by the dedicated 管理 Agent 列表
    // dialog. Featured agents get appended to the end on add (Date.now() is a
@@ -304,252 +438,326 @@ export function AgentCard({ agent }: AgentCardProps) {

  const enabledSkills = skills.filter((skill) => skill.enabled);

-  return (
+  // Status badges (内置 / 我的 / 来自他人 / 已发布 / 私密 / 首页推荐) — shared by
+  // both the card header and the compact list row.
+  const statusBadges = (
    <>
-      <Card className="group flex min-w-0 flex-col transition-shadow hover:shadow-md">
-        <CardHeader className="min-w-0 pb-3">
-          <div className="flex min-w-0 items-start justify-between gap-2">
-            <div className="flex min-w-0 flex-1 items-center gap-2 overflow-hidden">
-              <div className="bg-primary/10 text-primary flex h-9 w-9 shrink-0 items-center justify-center rounded-lg">
-                <BotIcon className="h-5 w-5" />
-              </div>
-              <div className="min-w-0 flex-1 overflow-hidden">
-                <CardTitle
-                  className="block w-full min-w-0 overflow-hidden text-base text-ellipsis whitespace-nowrap"
-                  title={desensitize(agent.name)}
-                >
-                  {desensitize(agent.name)}
-                </CardTitle>
-                {agent.model && (
-                  <Badge variant="secondary" className="mt-0.5 text-xs">
-                    {desensitize(agent.model)}
-                  </Badge>
-                )}
-              </div>
+      {isBuiltin && (
+        <Badge variant="secondary" className="text-xs">
+          内置
+        </Badge>
+      )}
+      {isOwned && (
+        <Badge
+          variant="default"
+          className="bg-emerald-500/15 text-emerald-700 hover:bg-emerald-500/15 dark:text-emerald-300 text-xs"
+        >
+          我的
+        </Badge>
+      )}
+      {isFromOthers && (
+        <Badge
+          variant="outline"
+          className="border-blue-500/30 text-blue-700 dark:text-blue-300 text-xs"
+          title={agent.user_id ? `来自用户 ${agent.user_id}` : "已发布"}
+        >
+          来自他人
+        </Badge>
+      )}
+      {isOwned && agent.published && !agent.is_private && (
+        <Badge
+          variant="outline"
+          className="border-sky-500/30 text-sky-700 dark:text-sky-300 text-xs"
+          title="该智能体已对所有用户可见"
+        >
+          <GlobeIcon className="size-3" />
+          已发布
+        </Badge>
+      )}
+      {agent.is_private && (
+        <Badge
+          variant="outline"
+          className="border-purple-500/30 text-purple-700 dark:text-purple-300 text-xs"
+          title="该智能体位于私密广场，需要密码才能查看"
+        >
+          <ShieldIcon className="size-3" />
+          私密
+        </Badge>
+      )}
+      {agent.featured_order != null && (
+        <Badge
+          variant="outline"
+          className="border-amber-500/40 text-amber-700 dark:text-amber-300 text-xs"
+          title="已加入首页选择器"
+        >
+          <SparklesIcon className="size-3" />
+          首页推荐
+        </Badge>
+      )}
+    </>
+  );
+
+  const skillBadgeItems = [
+    ...(agent.tool_groups ?? []).map((group) => ({
+      key: `tg:${group}`,
+      node: (
+        <Badge key={`tg:${group}`} variant="outline" className="text-xs">
+          {desensitize(group)}
+        </Badge>
+      ),
+    })),
+    ...(agent.skills ?? []).map((skill) => ({
+      key: `sk:${skill}`,
+      node: (
+        <Badge
+          key={`sk:${skill}`}
+          variant="secondary"
+          className="hover:bg-secondary/70 cursor-pointer text-xs"
+          title={t.settings.skills.viewDetailAction}
+          onClick={(e) => {
+            e.stopPropagation();
+            setDetailSkillName(skill);
+          }}
+        >
+          {desensitize(skill)}
+        </Badge>
+      ),
+    })),
+  ];
+  const hasSkillsOrTools =
+    (agent.tool_groups?.length ?? agent.skills?.length ?? 0) > 0;
+
+  const showActionRow =
+    canEdit || canDelete || isOwned || isAdmin || canFavorite;
+
+  // The icon action buttons, shared by both layouts.
+  const actionButtons = (
+    <>
+      {canFavorite && (
+        <Button
+          size="icon"
+          variant="ghost"
+          className={cn(
+            "h-8 w-8 shrink-0",
+            !isList && "mr-auto",
+            isFavorite && "text-amber-500 hover:text-amber-600",
+          )}
+          onClick={() => void handleToggleFavorite()}
+          disabled={toggleFavorite.isPending}
+          title={isFavorite ? "取消收藏" : "收藏到「我的」"}
+        >
+          <StarIcon
+            className={cn("h-3.5 w-3.5", isFavorite && "fill-current")}
+          />
+        </Button>
+      )}
+      <Button
+        size="icon"
+        variant="ghost"
+        className={cn(
+          "h-8 w-8 shrink-0",
+          isPinned && "text-emerald-600 hover:text-emerald-700",
+          !isList && !canFavorite && "mr-auto",
+        )}
+        onClick={() => void handleTogglePin()}
+        disabled={togglePin.isPending}
+        title={isPinned ? "取消置顶" : "置顶"}
+      >
+        <PinIcon className={cn("h-3.5 w-3.5", isPinned && "fill-current")} />
+      </Button>
+      {isAdmin && (
+        <Button
+          size="icon"
+          variant="ghost"
+          className={cn(
+            "h-8 w-8 shrink-0",
+            agent.featured_order != null &&
+              "text-amber-600 hover:text-amber-700",
+          )}
+          onClick={() => void handleToggleFeatured()}
+          disabled={setFeatured.isPending}
+          title={
+            agent.featured_order != null
+              ? "从首页选择器移除"
+              : "加入首页选择器"
+          }
+        >
+          <SparklesIcon className="h-3.5 w-3.5" />
+        </Button>
+      )}
+      <Button
+        size="icon"
+        variant="ghost"
+        className="h-8 w-8 shrink-0"
+        onClick={() => setTagPickerOpen(true)}
+        title={t.adminTags.manageTags}
+      >
+        <TagsIcon className="h-3.5 w-3.5" />
+      </Button>
+      {isOwned && (
+        <Button
+          size="icon"
+          variant="ghost"
+          className="h-8 w-8 shrink-0"
+          onClick={() => void handleTogglePublished()}
+          disabled={updateAgent.isPending}
+          title={agent.published ? "取消发布" : "发布"}
+        >
+          {agent.published ? (
+            <LockIcon className="h-3.5 w-3.5" />
+          ) : (
+            <GlobeIcon className="h-3.5 w-3.5" />
+          )}
+        </Button>
+      )}
+      {(isOwned || isAdmin) && (
+        <Button
+          size="icon"
+          variant="ghost"
+          className={cn(
+            "h-8 w-8 shrink-0",
+            agent.is_private && "text-purple-600 hover:text-purple-700",
+          )}
+          onClick={() => void handleTogglePrivate()}
+          disabled={updateAgent.isPending || setPrivate.isPending}
+          title={agent.is_private ? "移出私密广场" : "放入私密广场"}
+        >
+          <ShieldIcon className="h-3.5 w-3.5" />
+        </Button>
+      )}
+      <Button
+        size="icon"
+        variant="ghost"
+        className="h-8 w-8 shrink-0"
+        onClick={() => void handleDuplicate()}
+        disabled={createAgent.isPending}
+        title="复制为新智能体"
+      >
+        <CopyIcon className="h-3.5 w-3.5" />
+      </Button>
+      {canEdit && (
+        <Button
+          size="icon"
+          variant="ghost"
+          className="h-8 w-8 shrink-0"
+          onClick={() => setEditOpen(true)}
+          title="编辑智能体"
+        >
+          <SquarePenIcon className="h-3.5 w-3.5" />
+        </Button>
+      )}
+      {canDelete && (
+        <Button
+          size="icon"
+          variant="ghost"
+          className="text-destructive hover:text-destructive h-8 w-8 shrink-0"
+          onClick={() => setDeleteOpen(true)}
+          title={t.agents.delete}
+        >
+          <Trash2Icon className="h-3.5 w-3.5" />
+        </Button>
+      )}
+    </>
+  );
+
+  const chatButton = (
+    <Button
+      size="sm"
+      className={cn(isList ? "shrink-0" : "w-full")}
+      onClick={handleChat}
+    >
+      <MessageSquareIcon className="mr-1.5 h-3.5 w-3.5" />
+      {t.agents.chat}
+    </Button>
+  );
+
+  const cardLayout = (
+    <Card className="group flex min-w-0 flex-col transition-shadow hover:shadow-md">
+      <CardHeader className="min-w-0 pb-2">
+        <div className="flex min-w-0 items-start justify-between gap-2">
+          <div className="flex min-w-0 flex-1 items-center gap-2 overflow-hidden">
+            <div className="bg-primary/10 text-primary flex h-9 w-9 shrink-0 items-center justify-center rounded-lg">
+              <BotIcon className="h-5 w-5" />
            </div>
-            <div className="flex shrink-0 items-center gap-1">
-              {isBuiltin && (
-                <Badge variant="secondary" className="text-xs">
-                  内置
-                </Badge>
-              )}
-              {isOwned && (
-                <Badge
-                  variant="default"
-                  className="bg-emerald-500/15 text-emerald-700 hover:bg-emerald-500/15 dark:text-emerald-300 text-xs"
-                >
-                  我的
-                </Badge>
-              )}
-              {isFromOthers && (
-                <Badge
-                  variant="outline"
-                  className="border-blue-500/30 text-blue-700 dark:text-blue-300 text-xs"
-                  title={agent.user_id ? `来自用户 ${agent.user_id}` : "已发布"}
-                >
-                  来自他人
-                </Badge>
-              )}
-              {isOwned && agent.published && !agent.is_private && (
-                <Badge
-                  variant="outline"
-                  className="border-sky-500/30 text-sky-700 dark:text-sky-300 text-xs"
-                  title="该智能体已对所有用户可见"
-                >
-                  <GlobeIcon className="size-3" />
-                  已发布
-                </Badge>
-              )}
-              {agent.is_private && (
-                <Badge
-                  variant="outline"
-                  className="border-purple-500/30 text-purple-700 dark:text-purple-300 text-xs"
-                  title="该智能体位于私密广场，需要密码才能查看"
-                >
-                  <ShieldIcon className="size-3" />
-                  私密
-                </Badge>
-              )}
-              {agent.featured_order != null && (
-                <Badge
-                  variant="outline"
-                  className="border-amber-500/40 text-amber-700 dark:text-amber-300 text-xs"
-                  title="已加入首页选择器"
-                >
-                  <SparklesIcon className="size-3" />
-                  首页推荐
+            <div className="min-w-0 flex-1 overflow-hidden">
+              <CardTitle
+                className="block w-full min-w-0 overflow-hidden text-base text-ellipsis whitespace-nowrap"
+                title={desensitize(agent.name)}
+              >
+                {desensitize(agent.name)}
+              </CardTitle>
+              {agent.model && (
+                <Badge variant="secondary" className="mt-0.5 text-xs">
+                  {desensitize(agent.model)}
                </Badge>
              )}
            </div>
          </div>
-          {agent.description && (
-            <CardDescription className="mt-2 line-clamp-2 text-sm">
-              {desensitize(agent.description)}
-            </CardDescription>
-          )}
-        </CardHeader>
-
-        {(agent.tags?.length ?? 0) > 0 && (
-          <CardContent className="pt-0 pb-2">
-            <TagChipList tags={agent.tags!} />
-          </CardContent>
+          <div className="flex shrink-0 flex-wrap items-center justify-end gap-1">
+            {statusBadges}
+          </div>
+        </div>
+        {agent.description && (
+          <CardDescription className="mt-2 line-clamp-2 text-sm">
+            {desensitize(agent.description)}
+          </CardDescription>
        )}
+      </CardHeader>

-        {(agent.tool_groups?.length ?? agent.skills?.length ?? 0) > 0 && (
-          <CardContent className="pt-0 pb-3">
-            <div className="flex flex-wrap gap-1">
-              {agent.tool_groups?.map((group) => (
-                <Badge
-                  key={`tg:${group}`}
-                  variant="outline"
-                  className="text-xs"
-                >
-                  {desensitize(group)}
-                </Badge>
-              ))}
-              {agent.skills?.map((skill) => (
-                <Badge
-                  key={`sk:${skill}`}
-                  variant="secondary"
-                  className="hover:bg-secondary/70 cursor-pointer text-xs"
-                  title={t.settings.skills.viewDetailAction}
-                  onClick={(e) => {
-                    e.stopPropagation();
-                    setDetailSkillName(skill);
-                  }}
-                >
-                  {desensitize(skill)}
-                </Badge>
-              ))}
-            </div>
-          </CardContent>
+      {(agent.tags?.length ?? 0) > 0 && (
+        <CardContent className="pt-0 pb-2">
+          <TagChipList tags={agent.tags!} />
+        </CardContent>
+      )}
+
+      {hasSkillsOrTools && (
+        <CardContent className="pt-0 pb-2">
+          <ClampedBadgeRow items={skillBadgeItems} />
+        </CardContent>
+      )}
+
+      <CardFooter className="mt-auto flex flex-col items-stretch gap-2 pt-2">
+        {showActionRow && (
+          <div className="flex flex-wrap items-center justify-end gap-1">
+            {actionButtons}
+          </div>
        )}
+        {chatButton}
+      </CardFooter>
+    </Card>
+  );

-        <CardFooter className="mt-auto flex flex-col items-stretch gap-2 pt-3">
-          {(canEdit || canDelete || isOwned || isAdmin || canFavorite) && (
-            <div className="flex flex-wrap items-center justify-end gap-1">
-              {canFavorite && (
-                <Button
-                  size="icon"
-                  variant="ghost"
-                  className={cn(
-                    "mr-auto h-8 w-8 shrink-0",
-                    isFavorite && "text-amber-500 hover:text-amber-600",
-                  )}
-                  onClick={() => void handleToggleFavorite()}
-                  disabled={toggleFavorite.isPending}
-                  title={isFavorite ? "取消收藏" : "收藏到「我的」"}
-                >
-                  <StarIcon
-                    className={cn("h-3.5 w-3.5", isFavorite && "fill-current")}
-                  />
-                </Button>
-              )}
-              {isAdmin && (
-                <Button
-                  size="icon"
-                  variant="ghost"
-                  className={cn(
-                    "h-8 w-8 shrink-0",
-                    agent.featured_order != null &&
-                      "text-amber-600 hover:text-amber-700",
-                  )}
-                  onClick={() => void handleToggleFeatured()}
-                  disabled={setFeatured.isPending}
-                  title={
-                    agent.featured_order != null
-                      ? "从首页选择器移除"
-                      : "加入首页选择器"
-                  }
-                >
-                  <SparklesIcon className="h-3.5 w-3.5" />
-                </Button>
-              )}
-              {isAdmin && (
-                <Button
-                  size="icon"
-                  variant="ghost"
-                  className="h-8 w-8 shrink-0"
-                  onClick={() => setTagPickerOpen(true)}
-                  title={t.adminTags.manageTags}
-                >
-                  <TagsIcon className="h-3.5 w-3.5" />
-                </Button>
-              )}
-              {isOwned && (
-                <Button
-                  size="icon"
-                  variant="ghost"
-                  className="h-8 w-8 shrink-0"
-                  onClick={() => void handleTogglePublished()}
-                  disabled={updateAgent.isPending}
-                  title={agent.published ? "取消发布" : "发布"}
-                >
-                  {agent.published ? (
-                    <LockIcon className="h-3.5 w-3.5" />
-                  ) : (
-                    <GlobeIcon className="h-3.5 w-3.5" />
-                  )}
-                </Button>
-              )}
-              {(isOwned || isAdmin) && (
-                <Button
-                  size="icon"
-                  variant="ghost"
-                  className={cn(
-                    "h-8 w-8 shrink-0",
-                    agent.is_private &&
-                      "text-purple-600 hover:text-purple-700",
-                  )}
-                  onClick={() => void handleTogglePrivate()}
-                  disabled={updateAgent.isPending || setPrivate.isPending}
-                  title={
-                    agent.is_private ? "移出私密广场" : "放入私密广场"
-                  }
-                >
-                  <ShieldIcon className="h-3.5 w-3.5" />
-                </Button>
-              )}
-              <Button
-                size="icon"
-                variant="ghost"
-                className="h-8 w-8 shrink-0"
-                onClick={() => void handleDuplicate()}
-                disabled={createAgent.isPending}
-                title="复制为新智能体"
-              >
-                <CopyIcon className="h-3.5 w-3.5" />
-              </Button>
-              {canEdit && (
-                <Button
-                  size="icon"
-                  variant="ghost"
-                  className="h-8 w-8 shrink-0"
-                  onClick={() => setEditOpen(true)}
-                  title="编辑智能体"
-                >
-                  <SquarePenIcon className="h-3.5 w-3.5" />
-                </Button>
-              )}
-              {canDelete && (
-                <Button
-                  size="icon"
-                  variant="ghost"
-                  className="text-destructive hover:text-destructive h-8 w-8 shrink-0"
-                  onClick={() => setDeleteOpen(true)}
-                  title={t.agents.delete}
-                >
-                  <Trash2Icon className="h-3.5 w-3.5" />
-                </Button>
-              )}
-            </div>
-          )}
-          <Button size="sm" className="w-full" onClick={handleChat}>
-            <MessageSquareIcon className="mr-1.5 h-3.5 w-3.5" />
-            {t.agents.chat}
-          </Button>
-        </CardFooter>
-      </Card>
+  const listLayout = (
+    <div className="group flex min-w-0 items-center gap-3 rounded-lg border p-2.5 transition-shadow hover:shadow-sm dark:border-[#213D5E] dark:bg-[#02244C]">
+      <div className="bg-primary/10 text-primary flex h-9 w-9 shrink-0 items-center justify-center rounded-lg">
+        <BotIcon className="h-5 w-5" />
+      </div>
+      <div className="min-w-0 flex-1 overflow-hidden">
+        <div className="flex min-w-0 items-center gap-2">
+          <span
+            className="min-w-0 truncate text-sm font-medium"
+            title={desensitize(agent.name)}
+          >
+            {desensitize(agent.name)}
+          </span>
+          <div className="flex shrink-0 items-center gap-1">{statusBadges}</div>
+        </div>
+        {agent.description && (
+          <p className="text-muted-foreground mt-0.5 truncate text-xs">
+            {desensitize(agent.description)}
+          </p>
+        )}
+      </div>
+      <div className="flex shrink-0 items-center gap-1">
+        {showActionRow && actionButtons}
+        {chatButton}
+      </div>
+    </div>
+  );
+
+  return (
+    <>
+      {isList ? listLayout : cardLayout}

      <Dialog open={editOpen} onOpenChange={setEditOpen}>
        <DialogContent className="max-h-[85vh] overflow-y-auto sm:max-w-2xl">
@@ -726,15 +934,13 @@ export function AgentCard({ agent }: AgentCardProps) {
        </DialogContent>
      </Dialog>

-      {isAdmin && (
-        <TagPickerDialog
-          open={tagPickerOpen}
-          onOpenChange={setTagPickerOpen}
-          targetType="agent"
-          targetId={agent.id}
-          currentTags={agent.tags ?? []}
-        />
-      )}
+      <TagPickerDialog
+        open={tagPickerOpen}
+        onOpenChange={setTagPickerOpen}
+        targetType="agent"
+        targetId={agent.id}
+        currentTags={agent.tags ?? []}
+      />


      <SkillDetailDialog
@@ -1,23 +1,26 @@
 "use client";

-import { BotIcon, LockIcon, PlusIcon, ShieldIcon } from "lucide-react";
+import { ArrowDownUpIcon, BotIcon, LockIcon, PlusIcon, ShieldIcon } from "lucide-react";
 import { useRouter } from "next/navigation";
-import { useEffect, useMemo, useState } from "react";
+import { useEffect, useState } from "react";
 import { toast } from "sonner";

 import { Button } from "@/components/ui/button";
 import { Input } from "@/components/ui/input";
+import { Pagination } from "@/components/ui/pagination";
+import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select";
 import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs";
 import { TagSearchBar } from "@/components/workspace/tags/tag-search-bar";
-import { useAgents, usePrivateAgents } from "@/core/agents";
-import type { Agent } from "@/core/agents";
-import { getStoredAuth } from "@/core/auth";
+import { ViewModeToggle } from "@/components/workspace/view-mode-toggle";
+import { useAgentsPaginated, usePrivateAgentsPaginated } from "@/core/agents";
+import type { Agent, AgentSort } from "@/core/agents";
 import { useI18n } from "@/core/i18n/hooks";
-import { usePrivateSquareStatus } from "@/core/system-settings/hooks";
-import { desensitize } from "@/lib/desensitize";
+import { usePrivateSquareStatus, useViewMode } from "@/core/system-settings/hooks";

 import { AgentCard } from "./agent-card";

+const PAGE_SIZE = 12;
+
 // Within a single tab the verified password is kept in sessionStorage so a
 // refresh / route navigation does not re-prompt. Cleared on tab close, so the
 // password never persists beyond the browsing session.
@@ -26,24 +29,26 @@ const PRIVATE_SQUARE_PASSWORD_KEY = "deer-flow.private-square-password";
 export function AgentGallery() {
  const { t } = useI18n();
  const router = useRouter();
+  const [viewMode, setViewMode] = useViewMode("agent");
  const [activeTab, setActiveTab] = useState<"all" | "mine" | "private">(
    "mine",
  );
  const [search, setSearch] = useState("");
  const [tagIds, setTagIds] = useState<string[]>([]);
-  // Tag filtering stays server-side; name search must run on the *desensitized*
-  // form because that's what the user sees on the card. If we sent the search
-  // string to the backend it would compare against the raw stored name and
-  // miss every desensitized hit (e.g. typing "TS分析" wouldn't match the
-  // stored "态势分析").
-  const { agents, isLoading } = useAgents({ tagIds });
+  const [sort, setSort] = useState<AgentSort>("time_desc");
+  // Per-tab 1-based page index, preserved while switching tabs.
+  const [pages, setPages] = useState<{ all: number; mine: number; private: number }>(
+    { all: 1, mine: 1, private: 1 },
+  );

-  const needle = search.trim().toLowerCase();
-  const matchesSearch = (a: Agent) =>
-    !needle || desensitize(a.name).toLowerCase().includes(needle);
-
-  const storedAuth = useMemo(() => getStoredAuth(), []);
-  const currentUserId = storedAuth?.user_id ?? null;
+  // Search + tag filtering are both server-side now. The backend mirrors the
+  // frontend's desensitize map, so typing the displayed abbreviation (e.g.
+  // "TS") still matches the stored raw name (e.g. "态势分析"). Whenever the
+  // filters change, every tab returns to its first page.
+  const tagKey = tagIds.join(",");
+  useEffect(() => {
+    setPages({ all: 1, mine: 1, private: 1 });
+  }, [search, tagKey, sort]);

  const { data: privateStatus } = usePrivateSquareStatus();
  const privateFeatureAvailable = !!privateStatus?.enabled;
@@ -56,11 +61,37 @@ export function AgentGallery() {
  });
  const [passwordInput, setPasswordInput] = useState("");

+  // Only the active tab fetches. "广场" maps to the server "square" scope
+  // (built-in/published, never private), "我的" to "mine" (owned + favorited).
+  const mainScope = activeTab === "mine" ? "mine" : "square";
+  const mainPage = activeTab === "mine" ? pages.mine : pages.all;
+  const {
+    agents: mainAgents,
+    total: mainTotal,
+    isLoading: mainLoading,
+  } = useAgentsPaginated({
+    scope: mainScope,
+    search,
+    tagIds,
+    sort,
+    page: mainPage,
+    pageSize: PAGE_SIZE,
+    enabled: activeTab !== "private",
+  });
+
  const {
    agents: privateAgents,
+    total: privateTotal,
    isLoading: isPrivateLoading,
    error: privateError,
-  } = usePrivateAgents(privatePassword);
+  } = usePrivateAgentsPaginated(privatePassword, {
+    search,
+    tagIds,
+    sort,
+    page: pages.private,
+    pageSize: PAGE_SIZE,
+    enabled: activeTab === "private",
+  });

  // If the server reports the stored password no longer works (likely the
  // admin rotated it), drop it from session storage and re-prompt.
@@ -72,49 +103,9 @@ export function AgentGallery() {
    }
  }, [privateError, privatePassword]);

-  // The "广场" tab must never surface private-square agents, even to their
-  // own owner — moving an agent into the private square is supposed to hide
-  // it from the public square entirely. (The backend listing endpoint
-  // already filters them out for non-owners; this extra clause covers the
-  // owner's own private agents, which still come back in the unified list
-  // because owners always see their own.)
-  const allAgents = useMemo(
-    () =>
-      agents.filter(
-        (a) => (a.builtin || a.published) && !a.is_private && matchesSearch(a),
-      ),
-    // matchesSearch closes over `needle`; depending on `search` is sufficient
-    // and avoids re-running on every render via the function reference.
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-    [agents, search],
-  );
-
-  // "我的" shows the user's own agents plus any agent they've favorited (收藏)
-  // from the square — favorited public agents have a different user_id but a
-  // truthy is_favorite flag.
-  const myAgents = useMemo(
-    () =>
-      agents.filter(
-        (a) =>
-          ((a.user_id !== null && a.user_id === currentUserId) ||
-            a.is_favorite) &&
-          matchesSearch(a),
-      ),
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-    [agents, currentUserId, search],
-  );
-
-  const filteredPrivateAgents = useMemo(() => {
-    const wanted = new Set(tagIds);
-    return privateAgents.filter((a) => {
-      if (!matchesSearch(a)) return false;
-      if (wanted.size > 0) {
-        if (!(a.tags ?? []).some((tg) => wanted.has(tg.id))) return false;
-      }
-      return true;
-    });
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [privateAgents, search, tagIds]);
+  const activeTotal = activeTab === "private" ? privateTotal : mainTotal;
+  const setTabPage = (tab: "all" | "mine" | "private", page: number) =>
+    setPages((prev) => ({ ...prev, [tab]: page }));

  const handleNewAgent = () => {
    router.push("/page/workspace/agents/new");
@@ -136,13 +127,56 @@ export function AgentGallery() {
    setPrivatePassword(null);
  };

-  const renderGrid = (list: typeof agents) => (
-    <div className="grid grid-cols-1 gap-4 sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4">
-      {list.map((agent) => (
-        <AgentCard key={agent.id} agent={agent} />
-      ))}
-    </div>
-  );
+  const renderGrid = (list: Agent[]) =>
+    viewMode === "list" ? (
+      <div className="flex flex-col gap-2">
+        {list.map((agent) => (
+          <AgentCard key={agent.id} agent={agent} layout="list" />
+        ))}
+      </div>
+    ) : (
+      <div className="grid grid-cols-1 gap-4 sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4">
+        {list.map((agent) => (
+          <AgentCard key={agent.id} agent={agent} />
+        ))}
+      </div>
+    );
+
+  /** Loading / empty / (grid + pagination) for one paginated tab. */
+  const renderListBody = (opts: {
+    list: Agent[];
+    total: number;
+    isLoading: boolean;
+    tab: "all" | "mine" | "private";
+    emptyDescription: string;
+    showNewButton?: boolean;
+  }) => {
+    const { list, total, isLoading, tab, emptyDescription, showNewButton } = opts;
+    // keepPreviousData keeps the old page visible while a new page loads, so
+    // only show the spinner on the very first load (no rows yet).
+    if (isLoading && list.length === 0) {
+      return (
+        <div className="text-muted-foreground flex h-40 items-center justify-center text-sm">
+          {t.common.loading}
+        </div>
+      );
+    }
+    if (list.length === 0) {
+      return renderEmpty(emptyDescription, showNewButton);
+    }
+    return (
+      <div className="flex flex-col gap-4">
+        {renderGrid(list)}
+        <Pagination
+          page={pages[tab]}
+          pageSize={PAGE_SIZE}
+          total={total}
+          onPageChange={(p) => setTabPage(tab, p)}
+          className="pt-2"
+        />
+      </div>
+    );
+  };

  const renderEmpty = (description: string, showNewButton = false) => (
    <div className="flex h-64 flex-col items-center justify-center gap-3 text-center">
@@ -218,6 +252,15 @@ export function AgentGallery() {
              onKeyDown={(e) => {
                if (e.key === "Enter") handleSubmitPassword();
              }}
+              // This is a one-off access code, not a login credential. Tell
+              // browsers / password managers not to save or autofill it (which
+              // would also stop them from spilling a saved account into the
+              // name search box on this page).
+              name="private-square-access-code"
+              autoComplete="off"
+              data-1p-ignore
+              data-lpignore="true"
+              data-form-type="other"
            />
            <Button onClick={handleSubmitPassword}>进入私密广场</Button>
          </div>
@@ -225,19 +268,13 @@ export function AgentGallery() {
      );
    }

-    if (isPrivateLoading) {
-      return (
-        <div className="text-muted-foreground flex h-40 items-center justify-center text-sm">
-          {t.common.loading}
-        </div>
-      );
-    }
-
-    if (filteredPrivateAgents.length === 0) {
-      return renderEmpty("私密广场暂时还没有智能体。");
-    }
-
-    return renderGrid(filteredPrivateAgents);
+    return renderListBody({
+      list: privateAgents,
+      total: privateTotal,
+      isLoading: isPrivateLoading,
+      tab: "private",
+      emptyDescription: "私密广场暂时还没有智能体。",
+    });
  };

  return (
@@ -276,48 +313,70 @@ export function AgentGallery() {
                </TabsTrigger>
              )}
            </TabsList>
-            {activeTab === "private" && privatePassword && (
-              <Button
-                variant="outline"
-                size="sm"
-                onClick={handleLockPrivate}
-                title="锁定私密广场，下次需要重新输入密码"
-              >
-                <LockIcon className="mr-1.5 h-3.5 w-3.5" />
-                锁定
-              </Button>
-            )}
+            <div className="flex items-center gap-3">
+              <span className="text-muted-foreground text-sm whitespace-nowrap">
+                共 {activeTotal} 个
+              </span>
+              <ViewModeToggle value={viewMode} onChange={setViewMode} />
+              {activeTab === "private" && privatePassword && (
+                <Button
+                  variant="outline"
+                  size="sm"
+                  onClick={handleLockPrivate}
+                  title="锁定私密广场，下次需要重新输入密码"
+                >
+                  <LockIcon className="mr-1.5 h-3.5 w-3.5" />
+                  锁定
+                </Button>
+              )}
+            </div>
          </div>
          <TagSearchBar
            targetType="agent"
            onSearchChange={setSearch}
            tagIds={tagIds}
            onTagIdsChange={setTagIds}
+            actions={
+              <Select value={sort} onValueChange={(v) => setSort(v as AgentSort)}>
+                <SelectTrigger
+                  className="h-9 w-full gap-2 px-3 text-xs sm:w-[148px]"
+                  title="排序"
+                >
+                  <ArrowDownUpIcon className="text-muted-foreground size-3.5" />
+                  <SelectValue />
+                </SelectTrigger>
+                <SelectContent position="popper" side="bottom" sideOffset={4}>
+                  <SelectItem value="time_desc">最新创建</SelectItem>
+                  <SelectItem value="time_asc">最早创建</SelectItem>
+                  <SelectItem value="updated_desc">最近更新</SelectItem>
+                  <SelectItem value="updated_asc">最早更新</SelectItem>
+                  <SelectItem value="name_asc">名称 A-Z</SelectItem>
+                  <SelectItem value="name_desc">名称 Z-A</SelectItem>
+                </SelectContent>
+              </Select>
+            }
          />
        </div>

        <TabsContent value="all" className="flex-1 overflow-y-auto p-6 mt-0">
-          {isLoading ? (
-            <div className="text-muted-foreground flex h-40 items-center justify-center text-sm">
-              {t.common.loading}
-            </div>
-          ) : allAgents.length === 0 ? (
-            renderEmpty(t.agents.emptyDescription)
-          ) : (
-            renderGrid(allAgents)
-          )}
+          {renderListBody({
+            list: mainAgents,
+            total: mainTotal,
+            isLoading: mainLoading,
+            tab: "all",
+            emptyDescription: t.agents.emptyDescription,
+          })}
        </TabsContent>

        <TabsContent value="mine" className="flex-1 overflow-y-auto p-6 mt-0">
-          {isLoading ? (
-            <div className="text-muted-foreground flex h-40 items-center justify-center text-sm">
-              {t.common.loading}
-            </div>
-          ) : myAgents.length === 0 ? (
-            renderEmpty(t.agents.emptyDescription, true)
-          ) : (
-            renderGrid(myAgents)
-          )}
+          {renderListBody({
+            list: mainAgents,
+            total: mainTotal,
+            isLoading: mainLoading,
+            tab: "mine",
+            emptyDescription: t.agents.emptyDescription,
+            showNewButton: true,
+          })}
        </TabsContent>

        {privateFeatureAvailable && (
@@ -136,21 +136,21 @@ export function AgentManageDialog({
                {agents.map((agent, index) => (
                  <div
                    key={agent.id}
-                    className="flex items-center gap-2 px-3 py-2 hover:bg-accent/30"
+                    className="flex min-w-0 items-start gap-2 px-3 py-2 hover:bg-accent/30"
                  >
                    <span className="text-muted-foreground w-6 shrink-0 text-center text-xs tabular-nums">
                      {index + 1}
                    </span>
-                    <BotIcon className="text-muted-foreground size-4 shrink-0" />
+                    <BotIcon className="text-muted-foreground mt-0.5 size-4 shrink-0" />
                    <div className="flex min-w-0 flex-1 flex-col">
                      <span className="truncate text-sm">{agent.name}</span>
                      {agent.description && (
-                        <span className="truncate text-[11px] text-muted-foreground">
+                        <span className="line-clamp-2 whitespace-normal break-words text-[11px] leading-snug text-muted-foreground">
                          {agent.description}
                        </span>
                      )}
                    </div>
-                    <div className="flex items-center gap-0.5">
+                    <div className="flex shrink-0 items-center gap-0.5">
                      <Tooltip content="上移">
                        <Button
                          size="icon"
@@ -222,12 +222,13 @@ export function AgentManageDialog({
                      key={agent.id}
                      value={`${agent.name} ${agent.description ?? ""}`}
                      onSelect={() => void add(agent)}
+                      className="flex w-full min-w-0 items-start overflow-hidden"
                    >
-                      <BotIcon className="text-muted-foreground mr-2 size-4 shrink-0" />
+                      <BotIcon className="text-muted-foreground mr-2 mt-0.5 size-4 shrink-0" />
                      <div className="flex min-w-0 flex-1 flex-col">
                        <span className="truncate text-sm">{agent.name}</span>
                        {agent.description && (
-                          <span className="truncate text-[10px] text-muted-foreground">
+                          <span className="line-clamp-2 whitespace-normal break-words text-[10px] leading-snug text-muted-foreground">
                            {agent.description}
                          </span>
                        )}
@@ -120,15 +120,15 @@ export function AgentSelector({
                      value={`${agent.name} ${agent.description ?? ""}`}
                      onSelect={() => handleSelect(agent)}
                      className={cn(
-                        "flex items-center gap-2",
+                        "flex w-full min-w-0 items-start gap-2 overflow-hidden",
                        agent.id === selectedAgentId && "bg-accent",
                      )}
                    >
-                      <BotIcon className="text-muted-foreground size-4 shrink-0" />
+                      <BotIcon className="text-muted-foreground mt-0.5 size-4 shrink-0" />
                      <div className="flex min-w-0 flex-1 flex-col">
                        <span className="truncate text-sm">{agent.name}</span>
                        {agent.description && (
-                          <span className="truncate text-[10px] text-muted-foreground">
+                          <span className="line-clamp-2 whitespace-normal break-words text-[10px] leading-snug text-muted-foreground">
                            {agent.description}
                          </span>
                        )}
@@ -14,6 +14,7 @@ import {
  XIcon,
 } from "lucide-react";
 import { useCallback, useEffect, useMemo, useRef, useState } from "react";
+import type { AnchorHTMLAttributes, HTMLAttributes, ReactNode } from "react";
 import { toast } from "sonner";
 import { Streamdown } from "streamdown";

@@ -43,12 +44,29 @@ import {
  useArtifactContent,
  useUpdateArtifactContent,
 } from "@/core/artifacts/hooks";
-import { urlOfArtifact } from "@/core/artifacts/utils";
+import { resolveArtifactURL, urlOfArtifact } from "@/core/artifacts/utils";
 import { useI18n } from "@/core/i18n/hooks";
 import { downloadMarkdownAsDocx } from "@/core/scheduled-tasks/markdown-docx";
 import { installSkill } from "@/core/skills/api";
 import { streamdownPlugins } from "@/core/streamdown";
-import { checkCodeFile, getFileName } from "@/core/utils/files";
+import {
+  checkCodeFile,
+  getFileName,
+  isImageFile,
+} from "@/core/utils/files";
+import {
+  downloadMermaidSvgFile,
+  isMermaidFile,
+  openMermaidSvgInNewTab,
+  renderMermaidToSvg,
+} from "@/core/utils/mermaid";
+import {
+  createMarkdownAnchorResolver,
+  injectInPageAnchorHandler,
+  isInPageAnchor,
+  scrollToInPageAnchor,
+} from "@/core/utils/markdown";
+import { getBackendBaseURL } from "@/core/config";
 import { env } from "@/env";
 import { desensitize } from "@/lib/desensitize";
 import { cn } from "@/lib/utils";
@@ -61,6 +79,12 @@ import { useArtifacts } from "./context";

 const SANDBOX_RESUME_EVENT = "workspace:sandbox-resume-autoscroll";

+function extractTextFromChildren(children: ReactNode): string {
+  if (typeof children === "string" || typeof children === "number") return String(children);
+  if (Array.isArray(children)) return children.map(extractTextFromChildren).join("");
+  return "";
+}
+
 function findScrollableArtifactElement(root: HTMLElement | null) {
  if (!root) {
    return null;
@@ -85,29 +109,36 @@ export function ArtifactFileDetail({
  className,
  filepath: filepathFromProps,
  threadId,
+  onClose,
 }: {
  className?: string;
  filepath: string;
  threadId: string;
+  /** 覆盖默认关闭行为（仅 setOpen(false)）；圆桌 Step3 文件预览用于退出沙箱模式。 */
+  onClose?: () => void;
 }) {
  const { t } = useI18n();
  const { artifacts, setOpen, select } = useArtifacts();
  const { isMock, thread, publicShareCode } = useThread();
-  const isWriteFile = useMemo(() => {
+  const isWriteFileVirtual = useMemo(() => {
    return filepathFromProps.startsWith("write-file:");
  }, [filepathFromProps]);
  const filepath = useMemo(() => {
-    if (isWriteFile) {
+    if (isWriteFileVirtual) {
      const url = new URL(filepathFromProps);
      return decodeURIComponent(url.pathname);
    }
    return filepathFromProps;
-  }, [filepathFromProps, isWriteFile]);
+  }, [filepathFromProps, isWriteFileVirtual]);
+  /** write_file 流式预览走 tool args 文本；图片等二进制产物始终走 artifacts API。 */
+  const useWriteFileStreaming = useMemo(() => {
+    return isWriteFileVirtual && !isImageFile(filepath);
+  }, [filepath, isWriteFileVirtual]);
  const isSkillFile = useMemo(() => {
    return filepath.endsWith(".skill");
  }, [filepath]);
  const { isCodeFile, language } = useMemo(() => {
-    if (isWriteFile) {
+    if (useWriteFileStreaming) {
      let nextLanguage = checkCodeFile(filepath).language;
      nextLanguage ??= "text";
      return { isCodeFile: true, language: nextLanguage };
@@ -116,18 +147,25 @@ export function ArtifactFileDetail({
      return { isCodeFile: true, language: "markdown" };
    }
    return checkCodeFile(filepath);
-  }, [filepath, isWriteFile, isSkillFile]);
+  }, [filepath, useWriteFileStreaming, isSkillFile]);
  const isSupportPreview = useMemo(() => {
-    return language === "html" || language === "markdown";
+    return (
+      language === "html" ||
+      language === "markdown" ||
+      language === "mermaid"
+    );
  }, [language]);
  const { content, isApplyingEdit } = useArtifactContent({
    threadId,
    filepath: filepathFromProps,
-    enabled: isCodeFile && !isWriteFile,
+    enabled: isCodeFile && !useWriteFileStreaming,
  });

  const canEditArtifact =
-    language === "markdown" && !isWriteFile && !isSkillFile && !isMock;
+    language === "markdown" &&
+    !useWriteFileStreaming &&
+    !isSkillFile &&
+    !isMock;
  const [draftContent, setDraftContent] = useState("");
  const [hasLocalEdits, setHasLocalEdits] = useState(false);
  const updateArtifact = useUpdateArtifactContent();
@@ -135,12 +173,14 @@ export function ArtifactFileDetail({
  const isHtmlStreaming = language === "html" && thread.isLoading;
  const hasMultipleArtifacts = (artifacts?.length ?? 0) > 1;
  const fileTypeLabel = useMemo(() => {
+    if (isImageFile(filepath)) return "IMG";
+    if (isMermaidFile(filepath) || language === "mermaid") return "MMD";
    if (language === "html") return "HTML";
    if (language === "markdown") return "MD";
    if (isSkillFile) return "SKILL";
    if (language) return language.toUpperCase();
    return "FILE";
-  }, [isSkillFile, language]);
+  }, [filepath, isSkillFile, language]);

  const [viewMode, setViewMode] = useState<"code" | "preview">("code");
  const [allowAutoViewSwitch, setAllowAutoViewSwitch] = useState(true);
@@ -406,6 +446,13 @@ export function ArtifactFileDetail({
      toast.error("文件内容为空，暂时无法打开");
      return;
    }
+    if (language === "mermaid") {
+      void openMermaidSvgInNewTab(source).catch((error) => {
+        console.error("Failed to open mermaid artifact:", error);
+        toast.error(error instanceof Error ? error.message : "Failed to open artifact");
+      });
+      return;
+    }
    const blobType =
      language === "html"
        ? "text/html;charset=utf-8"
@@ -424,6 +471,13 @@ export function ArtifactFileDetail({
      toast.error("文件内容为空，暂时无法下载");
      return;
    }
+    if (language === "mermaid") {
+      void downloadMermaidSvgFile(source, filepath).catch((error) => {
+        console.error("Failed to download mermaid artifact:", error);
+        toast.error(error instanceof Error ? error.message : "Download failed");
+      });
+      return;
+    }
    const blobType =
      language === "html"
        ? "text/html;charset=utf-8"
@@ -450,7 +504,7 @@ export function ArtifactFileDetail({
              {fileTypeLabel}
            </span>
            <ArtifactTitle className="min-w-0">
-              {isWriteFile ? (
+              {useWriteFileStreaming ? (
                <div className="truncate px-3">{getFileName(filepath)}</div>
              ) : hasMultipleArtifacts ? (
                <Select value={filepath} onValueChange={select}>
@@ -527,7 +581,7 @@ export function ArtifactFileDetail({
                onClick={handleSaveArtifact}
              />
            )}
-            {!isWriteFile && filepath.endsWith(".skill") && (
+            {!useWriteFileStreaming && filepath.endsWith(".skill") && (
              <Tooltip content={t.toolCalls.skillInstallTooltip}>
                <ArtifactAction
                  icon={isInstalling ? LoaderIcon : PackageIcon}
@@ -546,10 +600,23 @@ export function ArtifactFileDetail({
              label={t.common.openInNewWindow}
              tooltip={t.common.openInNewWindow}
              onClick={async () => {
-                if (isWriteFile) {
+                if (useWriteFileStreaming) {
                  handleOpenWriteFileInNewTab();
                  return;
                }
+                if (language === "mermaid") {
+                  try {
+                    await openMermaidSvgInNewTab(displayContent ?? "");
+                  } catch (error) {
+                    console.error(error);
+                    toast.error(
+                      error instanceof Error
+                        ? error.message
+                        : "Failed to open artifact",
+                    );
+                  }
+                  return;
+                }
                try {
                  await openArtifactInNewTab({
                    filepath,
@@ -584,7 +651,7 @@ export function ArtifactFileDetail({
                tooltip={t.clipboard.copyToClipboard}
              />
            )}
-            {!isWriteFile && language === "markdown" && (
+            {!useWriteFileStreaming && language === "markdown" && (
              <ArtifactAction
                icon={isExportingWord ? LoaderIcon : FileType2Icon}
                label="另存为 Word"
@@ -598,10 +665,23 @@ export function ArtifactFileDetail({
              label={t.common.download}
              tooltip={t.common.download}
              onClick={async () => {
-                if (isWriteFile) {
+                if (useWriteFileStreaming) {
                  handleDownloadWriteFile();
                  return;
                }
+                if (language === "mermaid") {
+                  try {
+                    await downloadMermaidSvgFile(displayContent ?? "", filepath);
+                  } catch (error) {
+                    console.error(error);
+                    toast.error(
+                      error instanceof Error
+                        ? error.message
+                        : "Download failed",
+                    );
+                  }
+                  return;
+                }
                try {
                  await downloadArtifactFile({
                    filepath,
@@ -623,7 +703,7 @@ export function ArtifactFileDetail({
              className="hover:bg-background"
              icon={XIcon}
              label={t.common.close}
-              onClick={() => setOpen(false)}
+              onClick={() => (onClose ? onClose() : setOpen(false))}
              tooltip={t.common.close}
            />
          </ArtifactActions>
@@ -652,10 +732,14 @@ export function ArtifactFileDetail({
        )}
        {isSupportPreview &&
          viewMode === "preview" &&
-          (language === "markdown" || language === "html") && (
+          (language === "markdown" ||
+            language === "html" ||
+            language === "mermaid") && (
              <ArtifactFilePreview
                content={desensitize(displayContent ?? "")}
                language={language ?? "text"}
+                threadId={threadId}
+                publicShareCode={publicShareCode}
                animated={showPreviewSwitchPulse}
                activeCursor={isApplyingEdit}
              />
@@ -696,18 +780,121 @@ export function ArtifactFileDetail({
  );
 }

+function SandboxPreviewImage({
+  src,
+  alt,
+  threadId,
+  publicShareCode,
+  ...props
+}: React.ImgHTMLAttributes<HTMLImageElement> & {
+  threadId: string;
+  publicShareCode?: string;
+}) {
+  if (!src || typeof src !== "string") {
+    return null;
+  }
+
+  let url = src;
+  if (src.startsWith("/mnt/")) {
+    if (publicShareCode) {
+      const normalized = src.startsWith("/") ? src : `/${src}`;
+      url = `${getBackendBaseURL()}/api/public/shares/${encodeURIComponent(
+        publicShareCode,
+      )}/files${normalized}`;
+    } else {
+      url = resolveArtifactURL(src, threadId);
+    }
+  }
+
+  return (
+    <img
+      {...props}
+      className={cn(
+        "my-3 max-w-full overflow-hidden rounded-lg",
+        props.className,
+      )}
+      src={url}
+      alt={alt}
+    />
+  );
+}
+
 export function ArtifactFilePreview({
  content,
  language,
+  threadId,
+  publicShareCode,
  animated = false,
  activeCursor = false,
 }: {
  content: string;
  language: string;
+  threadId: string;
+  publicShareCode?: string;
  animated?: boolean;
  activeCursor?: boolean;
 }) {
  const [htmlPreviewUrl, setHtmlPreviewUrl] = useState<string>();
+  const [mermaidSvg, setMermaidSvg] = useState<string | null>(null);
+  const [mermaidError, setMermaidError] = useState<string | null>(null);
+  const markdownComponents = useMemo(() => {
+    const anchorResolver = createMarkdownAnchorResolver(content ?? "");
+    const heading = (level: 1 | 2 | 3 | 4 | 5 | 6) => {
+      const Tag = `h${level}` as const;
+      return ({ children, id, ...props }: HTMLAttributes<HTMLHeadingElement>) => (
+        <Tag id={id ?? anchorResolver.getHeadingId(level, extractTextFromChildren(children))} {...props}>
+          {children}
+        </Tag>
+      );
+    };
+
+    return {
+      h1: heading(1),
+      h2: heading(2),
+      h3: heading(3),
+      h4: heading(4),
+      h5: heading(5),
+      h6: heading(6),
+      a: (props: AnchorHTMLAttributes<HTMLAnchorElement>) => {
+        if (typeof props.children === "string" && /^citation:(.+)$/.test(props.children)) {
+          return <ArtifactLink {...props} />;
+        }
+        const { className, ...rest } = props;
+        const resolvedHref = anchorResolver.resolveHref(
+          props.href,
+          extractTextFromChildren(props.children),
+        );
+        if (resolvedHref === null) {
+          return (
+            <span
+              className={cn(
+                "text-primary/80 decoration-dotted underline underline-offset-2 cursor-not-allowed",
+                className,
+              )}
+              title="未在当前 Markdown 中找到对应章节"
+            >
+              {props.children}
+            </span>
+          );
+        }
+        const finalHref = resolvedHref ?? props.href;
+        return (
+          <ArtifactLink
+            {...rest}
+            className={className}
+            href={finalHref}
+            onClick={(event) => {
+              if (isInPageAnchor(finalHref)) {
+                event.preventDefault();
+                scrollToInPageAnchor(event.currentTarget, finalHref);
+              }
+              rest.onClick?.(event);
+            }}
+          />
+        );
+      },
+    };
+  }, [content]);

  useEffect(() => {
    if (language !== "html") {
@@ -718,7 +905,11 @@ export function ArtifactFilePreview({
    // 必须带 charset=utf-8：blob: URL 的 Content-Type 不含 charset 时，iframe 会按
    // 系统默认编码(中文 Windows 常为 GBK/Latin-1)解码,模型生成的 HTML 若没写
    // <meta charset> 就会中文乱码。与下方下载/新窗口打开的 blobType 保持一致。
-    const blob = new Blob([content ?? ""], { type: "text/html;charset=utf-8" });
+    // Intercept in-page anchor clicks so they scroll within the iframe instead
+    // of navigating the sandboxed blob: document (which blanks the frame).
+    const blob = new Blob([injectInPageAnchorHandler(content ?? "")], {
+      type: "text/html;charset=utf-8",
+    });
    const url = URL.createObjectURL(blob);
    setHtmlPreviewUrl(url);

@@ -727,10 +918,42 @@ export function ArtifactFilePreview({
    };
  }, [content, language]);

+  useEffect(() => {
+    if (language !== "mermaid") {
+      setMermaidSvg(null);
+      setMermaidError(null);
+      return;
+    }
+
+    let cancelled = false;
+    setMermaidSvg(null);
+    setMermaidError(null);
+
+    void renderMermaidToSvg(content ?? "")
+      .then((svg) => {
+        if (!cancelled) {
+          setMermaidSvg(svg);
+        }
+      })
+      .catch((error) => {
+        console.error("Failed to render mermaid preview:", error);
+        if (!cancelled) {
+          setMermaidError(
+            error instanceof Error ? error.message : "Mermaid 渲染失败",
+          );
+        }
+      });
+
+    return () => {
+      cancelled = true;
+    };
+  }, [content, language]);
+
  if (language === "markdown") {
    return (
      <div
        data-artifact-preview-scroll
+        data-markdown-anchor-root
        className={cn(
          "size-full overflow-auto px-5 py-4",
          animated && "animate-[sandbox-preview-enter_320ms_ease-out]",
@@ -739,7 +962,16 @@ export function ArtifactFilePreview({
        <Streamdown
          className="size-full"
          {...streamdownPlugins}
-          components={{ a: ArtifactLink }}
+          components={{
+            ...markdownComponents,
+            img: (props) => (
+              <SandboxPreviewImage
+                {...props}
+                threadId={threadId}
+                publicShareCode={publicShareCode}
+              />
+            ),
+          }}
        >
          {content ?? ""}
        </Streamdown>
@@ -764,5 +996,38 @@ export function ArtifactFilePreview({
    );
  }

+  if (language === "mermaid") {
+    return (
+      <div
+        data-artifact-preview-scroll
+        className={cn(
+          "size-full overflow-auto bg-[#fcfdfc] px-5 py-4",
+          animated && "animate-[sandbox-preview-enter_320ms_ease-out]",
+        )}
+      >
+        {mermaidSvg ? (
+          <div
+            className="mx-auto flex min-h-full items-start justify-center rounded-2xl border border-slate-200 bg-white p-4 shadow-sm"
+            dangerouslySetInnerHTML={{ __html: mermaidSvg }}
+          />
+        ) : mermaidError ? (
+          <div className="space-y-3">
+            <div className="rounded-xl border border-rose-200 bg-rose-50 px-4 py-3 text-sm text-rose-700">
+              {mermaidError}
+            </div>
+            <pre className="whitespace-pre-wrap break-words rounded-xl bg-slate-100 p-4 text-xs text-slate-700">
+              {content ?? ""}
+            </pre>
+          </div>
+        ) : (
+          <div className="text-muted-foreground flex size-full items-center justify-center gap-2 text-sm">
+            <LoaderIcon className="size-5 animate-spin" />
+            正在生成图表预览
+          </div>
+        )}
+      </div>
+    );
+  }
+
  return null;
 }
@@ -19,32 +19,43 @@ import {
  DialogTitle,
 } from "@/components/ui/dialog";
 import { Input } from "@/components/ui/input";
+import {
+  Select,
+  SelectContent,
+  SelectItem,
+  SelectTrigger,
+  SelectValue,
+} from "@/components/ui/select";
+import { Switch } from "@/components/ui/switch";
 import { Textarea } from "@/components/ui/textarea";
+import { useAgentSelector } from "@/core/agents/hooks";
 import {
  useCreateCustomPrompt,
  useCustomPrompts,
  useDeleteCustomPrompt,
  useUpdateCustomPrompt,
 } from "@/core/custom-prompts";
+import {
+  useUpdateUserPreferences,
+  useUserPreferences,
+} from "@/core/user-preferences";
+import { desensitize } from "@/lib/desensitize";
 import { cn } from "@/lib/utils";

-/**
- * Bar above the chat input showing the user's saved prompts as centered,
- * clickable chips. When there are too many to fit, they become a horizontal
- * carousel (arrows appear). A gear pinned to the far right opens the manage
- * dialog. Prompts are bound to the account (server-backed), and this coexists
- * with the admin-configured global prompt prefix.
- */
 export function CustomPromptBar({
  onInsert,
  className,
+  currentAgentId,
 }: {
  onInsert: (content: string) => void;
  className?: string;
+  currentAgentId?: string | null;
 }) {
-  const prompts = useCustomPrompts();
+  const allPrompts = useCustomPrompts();
+  const prompts = allPrompts.filter(
+    (prompt) => !prompt.agent_id || prompt.agent_id === currentAgentId,
+  );
  const [manageOpen, setManageOpen] = useState(false);
-
  const scrollRef = useRef<HTMLDivElement>(null);
  const [canLeft, setCanLeft] = useState(false);
  const [canRight, setCanRight] = useState(false);
@@ -60,7 +71,7 @@ export function CustomPromptBar({
    updateArrows();
    window.addEventListener("resize", updateArrows);
    return () => window.removeEventListener("resize", updateArrows);
-  }, [updateArrows, prompts]);
+  }, [prompts, updateArrows]);

  const scrollByDir = (dir: 1 | -1) => {
    scrollRef.current?.scrollBy({ left: dir * 220, behavior: "smooth" });
@@ -70,7 +81,7 @@ export function CustomPromptBar({

  return (
    <>
-      <div className={cn("flex items-center gap-1", className)}>
+      <div className={cn("flex min-w-0 items-center gap-1", className)}>
        {prompts.length > 0 && (
          <>
            {overflowing && (
@@ -89,7 +100,7 @@ export function CustomPromptBar({
            <div
              ref={scrollRef}
              onScroll={updateArrows}
-              className="flex-1 overflow-x-auto [-ms-overflow-style:none] [scrollbar-width:none] [&::-webkit-scrollbar]:hidden"
+              className="min-w-0 flex-1 overflow-x-auto [-ms-overflow-style:none] [scrollbar-width:none] [&::-webkit-scrollbar]:hidden"
            >
              <div className="mx-auto flex w-max items-center gap-1.5 px-0.5 py-0.5">
                {prompts.map((prompt) => (
@@ -123,7 +134,7 @@ export function CustomPromptBar({
            )}
          </>
        )}
-        {prompts.length === 0 && <div className="flex-1" />}
+        {prompts.length === 0 && <div className="min-w-0 flex-1" />}
        <Button
          type="button"
          variant="ghost"
@@ -153,16 +164,26 @@ function ManagePromptsDialog({
  const createPrompt = useCreateCustomPrompt();
  const updatePrompt = useUpdateCustomPrompt();
  const deletePrompt = useDeleteCustomPrompt();
+  const { agents } = useAgentSelector();
+  const preferences = useUserPreferences();
+  const updatePreferences = useUpdateUserPreferences();
  const [editingId, setEditingId] = useState<string | null>(null);
  const [title, setTitle] = useState("");
  const [content, setContent] = useState("");
+  const [agentId, setAgentId] = useState<string | undefined>(undefined);

  const saving = createPrompt.isPending || updatePrompt.isPending;

+  const selectableAgents = agents;
+
+  const agentNameById = (id?: string | null) =>
+    id ? agents.find((agent) => agent.id === id)?.name ?? null : null;
+
  const resetForm = () => {
    setEditingId(null);
    setTitle("");
    setContent("");
+    setAgentId(undefined);
  };

  const handleSubmit = async () => {
@@ -171,15 +192,24 @@ function ManagePromptsDialog({
      toast.error("提示词内容不能为空");
      return;
    }
+    if (!agentId) {
+      toast.error("请选择关联智能体");
+      return;
+    }
+
    try {
      if (editingId) {
        await updatePrompt.mutateAsync({
          id: editingId,
-          input: { title: trimmedTitle, content },
+          input: { title: trimmedTitle, content, agent_id: agentId },
        });
        toast.success("提示词已更新");
      } else {
-        await createPrompt.mutateAsync({ title: trimmedTitle, content });
+        await createPrompt.mutateAsync({
+          title: trimmedTitle,
+          content,
+          agent_id: agentId,
+        });
        toast.success("提示词已添加");
      }
      resetForm();
@@ -189,17 +219,31 @@ function ManagePromptsDialog({
  };

  const handleEdit = (id: string) => {
-    const target = prompts.find((p) => p.id === id);
+    const target = prompts.find((prompt) => prompt.id === id);
    if (!target) return;
    setEditingId(id);
    setTitle(target.title);
    setContent(target.content);
+    setAgentId(
+      target.agent_id && selectableAgents.some((agent) => agent.id === target.agent_id)
+        ? target.agent_id
+        : undefined,
+    );
+  };
+
+  const handleToggleHideAdmin = async (next: boolean) => {
+    try {
+      await updatePreferences.mutateAsync({ hide_admin_prompt_prefix: next });
+    } catch (err) {
+      toast.error(err instanceof Error ? err.message : String(err));
+    }
  };

  const handleDelete = async (id: string) => {
    try {
      await deletePrompt.mutateAsync(id);
      if (editingId === id) resetForm();
+      toast.success("提示词已删除");
    } catch (err) {
      toast.error(err instanceof Error ? err.message : String(err));
    }
@@ -217,25 +261,73 @@ function ManagePromptsDialog({
        <DialogHeader>
          <DialogTitle>管理常用提示词</DialogTitle>
          <DialogDescription>
-            保存常用的提示词，保存后会以小标签形式显示在输入框上方，点击即可填入。提示词与你的账号绑定，可跨设备使用。
+            保存常用提示词后，会显示在输入框上方。提示词与账号绑定，可跨设备使用。
          </DialogDescription>
        </DialogHeader>

+        <div className="flex items-start justify-between gap-3 rounded-md border p-3">
+          <div className="min-w-0">
+            <p className="text-sm font-medium">只用我自己的提示词</p>
+            <p className="text-muted-foreground mt-0.5 text-xs">
+              开启后，输入框不再显示管理员配置的提示词前缀开关，本账号仅使用自己保存的提示词。
+            </p>
+          </div>
+          <Switch
+            checked={preferences.hide_admin_prompt_prefix}
+            disabled={updatePreferences.isPending}
+            onCheckedChange={(value) => void handleToggleHideAdmin(value)}
+          />
+        </div>
+
        <div className="space-y-3 rounded-md border p-3">
          <Input
            value={title}
-            onChange={(e) => setTitle(e.target.value)}
+            onChange={(event) => setTitle(event.target.value)}
            placeholder="名称（可选，例如：周报总结）"
          />
          <Textarea
            value={content}
-            onChange={(e) => setContent(e.target.value)}
+            onChange={(event) => setContent(event.target.value)}
            placeholder="提示词内容"
            className="min-h-28"
          />
+          <div className="flex min-w-0 flex-col gap-1">
+            <p className="text-muted-foreground text-xs">关联智能体</p>
+            <Select value={agentId} onValueChange={setAgentId}>
+              <SelectTrigger className="w-full min-w-0 max-w-full overflow-hidden [&>span]:min-w-0 [&>span]:flex-1 [&>span]:truncate [&>span]:text-left">
+                <SelectValue placeholder="请选择已配置的智能体" />
+              </SelectTrigger>
+              <SelectContent
+                position="popper"
+                className="max-h-[40vh] w-[var(--radix-select-trigger-width)] max-w-[var(--radix-select-trigger-width)] overflow-hidden"
+              >
+                {selectableAgents.map((agent) => (
+                  <SelectItem
+                    key={agent.id}
+                    value={agent.id}
+                    className="max-w-full pr-8"
+                  >
+                    <span className="block max-w-full truncate">
+                      {desensitize(agent.name)}
+                    </span>
+                  </SelectItem>
+                ))}
+              </SelectContent>
+            </Select>
+            <p className="text-muted-foreground text-xs">
+              {selectableAgents.length === 0
+                ? "当前账号还没有已配置的智能体。"
+                : "关联后，仅在选中该智能体的对话里显示此提示词。"}
+            </p>
+          </div>
          <div className="flex justify-end gap-2">
            {editingId && (
-              <Button variant="outline" size="sm" onClick={resetForm} disabled={saving}>
+              <Button
+                variant="outline"
+                size="sm"
+                onClick={resetForm}
+                disabled={saving}
+              >
                取消编辑
              </Button>
            )}
@@ -260,6 +352,11 @@ function ManagePromptsDialog({
                  <p className="truncate text-sm font-medium">
                    {prompt.title || "未命名提示词"}
                  </p>
+                  {prompt.agent_id && (
+                    <p className="mt-0.5 truncate text-[11px] text-sky-600 dark:text-sky-400">
+                      仅 {desensitize(agentNameById(prompt.agent_id) || "未知智能体")} 可见
+                    </p>
+                  )}
                  <p className="text-muted-foreground mt-0.5 line-clamp-2 text-xs whitespace-pre-wrap">
                    {prompt.content}
                  </p>
@@ -86,7 +86,8 @@ import {
  DropdownMenuTrigger,
 } from "../ui/dropdown-menu";

-import { useRecommendedQuestions } from "@/core/recommended-questions/hooks";
+import { useRecommendedQuestions } from "@/core/recommended-questions/hooks";
+import { useUserPreferences } from "@/core/user-preferences";
 import {
  isThreadRagModeLocked,
  lockThreadRagMode,
@@ -131,6 +132,7 @@ export function InputBox({
  onStop,
  promptPrefix,
  agentSelector,
+  assistantId,
  ...props
 }: Omit<ComponentProps<typeof PromptInput>, "onSubmit"> & {
  assistantId?: string | null;
@@ -203,7 +205,11 @@ export function InputBox({
    null,
  );

-  const { questions: recommendedQuestions } = useRecommendedQuestions();
+  const { questions: recommendedQuestions } = useRecommendedQuestions();
+  const userPreferences = useUserPreferences();
+  const showAdminRecommendedQuestions =
+    !userPreferences.hide_admin_prompt_prefix &&
+    recommendedQuestions.length > 0;

  useEffect(() => {
    if (models.length === 0) {
@@ -510,7 +516,7 @@ export function InputBox({
        </div>
      )}

-      {isNewThread && searchParams.get("mode") !== "skill" && recommendedQuestions.length > 0 && (
+      {isNewThread && searchParams.get("mode") !== "skill" && showAdminRecommendedQuestions && (
        <div className="flex flex-wrap justify-center gap-2.5 px-4 mb-[10px]">
          {recommendedQuestions.map((q) => (
            <button
@@ -564,6 +570,7 @@ export function InputBox({
      {isNewThread && (
        <CustomPromptBar
          className="px-1"
+          currentAgentId={agentSelector?.selectedAgentId ?? assistantId ?? null}
          onInsert={(content) => {
            const current = textInput.value?.trim() ?? "";
            textInput.setInput(current ? `${current}\n${content}` : content);
@@ -0,0 +1,99 @@
+import { Trash2Icon } from "lucide-react";
+import { useState } from "react";
+import { toast } from "sonner";
+
+import { Button } from "@/components/ui/button";
+import {
+  Dialog,
+  DialogContent,
+  DialogDescription,
+  DialogFooter,
+  DialogHeader,
+  DialogTitle,
+} from "@/components/ui/dialog";
+import { useI18n } from "@/core/i18n/hooks";
+import { useDeleteMessage } from "@/core/threads/hooks";
+
+import { Tooltip } from "../tooltip";
+
+/**
+ * Hover affordance that deletes a conversation turn (a user question together
+ * with its answer) after a confirmation step. The actual removal is persisted
+ * server-side; `onDeleted` receives the ids the server removed so the parent
+ * can hide those bubbles immediately without waiting for the stream cache to
+ * refresh.
+ */
+export function DeleteMessageButton({
+  threadId,
+  messageId,
+  onDeleted,
+  className,
+}: {
+  threadId: string;
+  messageId: string;
+  onDeleted?: (deletedIds: string[]) => void;
+  className?: string;
+}) {
+  const { t } = useI18n();
+  const [open, setOpen] = useState(false);
+  const deleteMessage = useDeleteMessage();
+
+  const handleConfirm = async () => {
+    try {
+      const deletedIds = await deleteMessage.mutateAsync({
+        threadId,
+        messageId,
+      });
+      onDeleted?.(deletedIds);
+      setOpen(false);
+    } catch (error) {
+      toast.error(
+        error instanceof Error ? error.message : "删除消息失败。",
+      );
+    }
+  };
+
+  return (
+    <>
+      <Tooltip content={t.inputBox.deleteMessage}>
+        <Button
+          size="icon-sm"
+          type="button"
+          variant="ghost"
+          className={className}
+          onClick={() => setOpen(true)}
+        >
+          <Trash2Icon size={12} />
+        </Button>
+      </Tooltip>
+      <Dialog open={open} onOpenChange={setOpen}>
+        <DialogContent className="sm:max-w-sm">
+          <DialogHeader>
+            <DialogTitle>{t.inputBox.deleteMessageConfirmTitle}</DialogTitle>
+            <DialogDescription>
+              {t.inputBox.deleteMessageConfirmDescription}
+            </DialogDescription>
+          </DialogHeader>
+          <DialogFooter>
+            <Button
+              type="button"
+              variant="ghost"
+              onClick={() => setOpen(false)}
+              disabled={deleteMessage.isPending}
+            >
+              {t.common.cancel}
+            </Button>
+            <Button
+              type="button"
+              variant="destructive"
+              onClick={() => void handleConfirm()}
+              disabled={deleteMessage.isPending}
+            >
+              {t.common.delete}
+            </Button>
+          </DialogFooter>
+        </DialogContent>
+      </Dialog>
+    </>
+  );
+}
@@ -1,79 +1,136 @@
-"use client";
-
-import { useMemo } from "react";
-import type { AnchorHTMLAttributes } from "react";
-
-import {
-  MessageResponse,
-  type MessageResponseProps,
-} from "@/components/ai-elements/message";
-import { streamdownPlugins } from "@/core/streamdown";
-import { cn } from "@/lib/utils";
-
-import { CitationLink } from "../citations/citation-link";
-
-function isExternalUrl(href: string | undefined): boolean {
-  return !!href && /^https?:\/\//.test(href);
-}
-
-export type MarkdownContentProps = {
-  content: string;
-  isLoading: boolean;
-  rehypePlugins: MessageResponseProps["rehypePlugins"];
-  className?: string;
-  remarkPlugins?: MessageResponseProps["remarkPlugins"];
-  components?: MessageResponseProps["components"];
-};
-
-/** Renders markdown content. */
-export function MarkdownContent({
-  content,
-  rehypePlugins,
-  className,
-  remarkPlugins = streamdownPlugins.remarkPlugins,
-  components: componentsFromProps,
-}: MarkdownContentProps) {
-  const components = useMemo(() => {
-    return {
-      a: (props: AnchorHTMLAttributes<HTMLAnchorElement>) => {
-        if (props.href?.startsWith("#reference-")) {
-          return <CitationLink {...props} />;
-        }
-        if (typeof props.children === "string") {
-          const match = /^citation:(.+)$/.exec(props.children);
-          if (match) {
-            const [, text] = match;
-            return <CitationLink {...props}>{text}</CitationLink>;
-          }
-        }
-        const { className, target, rel, ...rest } = props;
-        const external = isExternalUrl(props.href);
-        return (
-          <a
-            {...rest}
-            className={cn(
-              "text-primary decoration-primary/30 hover:decoration-primary/60 underline underline-offset-2 transition-colors",
-              className,
-            )}
-            target={target ?? (external ? "_blank" : undefined)}
-            rel={rel ?? (external ? "noopener noreferrer" : undefined)}
-          />
-        );
-      },
-      ...componentsFromProps,
-    };
-  }, [componentsFromProps]);
-
-  if (!content) return null;
-
-  return (
-    <MessageResponse
-      className={className}
-      remarkPlugins={remarkPlugins}
-      rehypePlugins={rehypePlugins}
-      components={components}
-    >
-      {content}
-    </MessageResponse>
-  );
-}
+"use client";
+
+import { useMemo } from "react";
+import type { AnchorHTMLAttributes, HTMLAttributes, ReactNode } from "react";
+
+import {
+  MessageResponse,
+  type MessageResponseProps,
+} from "@/components/ai-elements/message";
+import { streamdownPlugins } from "@/core/streamdown";
+import {
+  createMarkdownAnchorResolver,
+  isInPageAnchor,
+  scrollToInPageAnchor,
+} from "@/core/utils/markdown";
+import { cn } from "@/lib/utils";
+
+import { CitationLink } from "../citations/citation-link";
+
+function isExternalUrl(href: string | undefined): boolean {
+  return !!href && /^https?:\/\//.test(href);
+}
+
+function extractTextFromChildren(children: ReactNode): string {
+  if (typeof children === "string" || typeof children === "number") return String(children);
+  if (Array.isArray(children)) return children.map(extractTextFromChildren).join("");
+  return "";
+}
+
+export type MarkdownContentProps = {
+  content: string;
+  isLoading: boolean;
+  rehypePlugins: MessageResponseProps["rehypePlugins"];
+  className?: string;
+  remarkPlugins?: MessageResponseProps["remarkPlugins"];
+  components?: MessageResponseProps["components"];
+};
+
+/** Renders markdown content. */
+export function MarkdownContent({
+  content,
+  rehypePlugins,
+  className,
+  remarkPlugins = streamdownPlugins.remarkPlugins,
+  components: componentsFromProps,
+}: MarkdownContentProps) {
+  const anchorResolver = useMemo(() => createMarkdownAnchorResolver(content), [content]);
+  const components = useMemo(() => {
+    const heading = (level: 1 | 2 | 3 | 4 | 5 | 6) => {
+      const Tag = `h${level}` as const;
+      return ({ children, id, ...props }: HTMLAttributes<HTMLHeadingElement>) => (
+        <Tag id={id ?? anchorResolver.getHeadingId(level, extractTextFromChildren(children))} {...props}>
+          {children}
+        </Tag>
+      );
+    };
+
+    return {
+      h1: heading(1),
+      h2: heading(2),
+      h3: heading(3),
+      h4: heading(4),
+      h5: heading(5),
+      h6: heading(6),
+      a: (props: AnchorHTMLAttributes<HTMLAnchorElement>) => {
+        if (props.href?.startsWith("#reference-")) {
+          return <CitationLink {...props} />;
+        }
+        if (typeof props.children === "string") {
+          const match = /^citation:(.+)$/.exec(props.children);
+          if (match) {
+            const [, text] = match;
+            return <CitationLink {...props}>{text}</CitationLink>;
+          }
+        }
+        const { className, target, rel, ...rest } = props;
+        const external = isExternalUrl(props.href);
+        const resolvedHref = anchorResolver.resolveHref(
+          props.href,
+          extractTextFromChildren(props.children),
+        );
+        if (resolvedHref === null) {
+          return (
+            <span
+              className={cn(
+                "text-primary/80 decoration-dotted underline underline-offset-2 cursor-not-allowed",
+                className,
+              )}
+              title="未在当前 Markdown 中找到对应章节"
+            >
+              {props.children}
+            </span>
+          );
+        }
+        const finalHref = resolvedHref ?? props.href;
+        return (
+          <a
+            {...rest}
+            href={finalHref}
+            className={cn(
+              "text-primary decoration-primary/30 hover:decoration-primary/60 underline underline-offset-2 transition-colors",
+              className,
+            )}
+            target={target ?? (external ? "_blank" : undefined)}
+            rel={rel ?? (external ? "noopener noreferrer" : undefined)}
+            onClick={(event) => {
+              // HashRouter would turn a `#section` click into a route change → 404.
+              // Scroll to the heading ourselves instead.
+              if (isInPageAnchor(finalHref)) {
+                event.preventDefault();
+                scrollToInPageAnchor(event.currentTarget, finalHref);
+              }
+              rest.onClick?.(event);
+            }}
+          />
+        );
+      },
+      ...componentsFromProps,
+    };
+  }, [anchorResolver, componentsFromProps]);
+
+  if (!content) return null;
+
+  return (
+    <div data-markdown-anchor-root className="contents">
+      <MessageResponse
+        className={className}
+        remarkPlugins={remarkPlugins}
+        rehypePlugins={rehypePlugins}
+        components={components}
+      >
+        {content}
+      </MessageResponse>
+    </div>
+  );
+}
@@ -57,6 +57,7 @@ import { CopyButton } from '../copy-button';
 import { Tooltip } from '../tooltip';
 import { SkillDisplayBlock } from '../skill-display-block';
 import { ThreadContext } from './context';
+import { DeleteMessageButton } from './delete-message-button';
 import { DownloadWordButton } from './download-word-button';
 import { MarkdownContent, type MarkdownContentProps } from './markdown-content';
 import { MessageTokenUsage } from './message-token-usage';
@@ -135,6 +136,7 @@ export function MessageListItem({
  displaySources = [],
  extraRehypePlugins,
  onEditResubmit,
+  onMessageDeleted,
 }: {
  className?: string;
  fitRowToContent?: boolean;
@@ -145,6 +147,7 @@ export function MessageListItem({
  displaySources?: RuntimeDisplaySource[];
  extraRehypePlugins?: ReturnType<typeof useRehypeSplitWordsIntoSpans>;
  onEditResubmit?: (text: string) => void;
+  onMessageDeleted?: (deletedIds: string[]) => void;
 }) {
  const isHuman = message.type === 'human';
  const messageMarkdown =
@@ -170,6 +173,7 @@ export function MessageListItem({
        displaySources={displaySources}
        extraRehypePlugins={extraRehypePlugins}
        onEditResubmit={onEditResubmit}
+        onMessageDeleted={onMessageDeleted}
      />
      {/*
        Human messages carry their own inline copy/edit toolbar inside
@@ -214,6 +218,7 @@ function HumanMessageBlock({
  messageTime,
  components,
  onEditResubmit,
+  deleteButton,
 }: {
  text: string;
  pageContext?: EmbeddedPageContext | null;
@@ -221,6 +226,7 @@ function HumanMessageBlock({
  messageTime: { label: string; full: string } | null;
  components: MarkdownContentProps["components"];
  onEditResubmit?: (text: string) => void;
+  deleteButton?: React.ReactNode;
 }) {
  const { t } = useI18n();
  const [editing, setEditing] = useState(false);
@@ -298,10 +304,10 @@ function HumanMessageBlock({
      )}
      <MessageTimeStamp time={messageTime} align="right" />
      {pageContext && <EmbeddedPageContextCard pageContext={pageContext} />}
-      {text && (
+      {(text || deleteButton) && (
        <div className="flex items-center gap-0.5 opacity-0 transition-opacity duration-200 group-hover/conversation-message:opacity-100">
-          <CopyButton clipboardData={text} className="size-6" />
-          {onEditResubmit && (
+          {text && <CopyButton clipboardData={text} className="size-6" />}
+          {text && onEditResubmit && (
            <Tooltip content={t.inputBox.editQuestion}>
              <Button
                size="icon-sm"
@@ -314,6 +320,7 @@ function HumanMessageBlock({
              </Button>
            </Tooltip>
          )}
+          {deleteButton}
        </div>
      )}
    </div>
@@ -360,6 +367,7 @@ function MessageContent_({
  displaySources = [],
  extraRehypePlugins,
  onEditResubmit,
+  onMessageDeleted,
 }: {
  className?: string;
  message: Message;
@@ -369,6 +377,7 @@ function MessageContent_({
  displaySources?: RuntimeDisplaySource[];
  extraRehypePlugins?: ReturnType<typeof useRehypeSplitWordsIntoSpans>;
  onEditResubmit?: (text: string) => void;
+  onMessageDeleted?: (deletedIds: string[]) => void;
 }) {
  const baseRehypePlugins = useRehypeSplitWordsIntoSpans(isLoading);

@@ -500,6 +509,11 @@ function MessageContent_({
  }

  if (isHuman) {
+    // Only the user's own question carries a delete affordance, and only once
+    // it exists server-side (real, non-optimistic id). Deleting it cascades to
+    // its answer on the backend.
+    const canDelete =
+      !!onMessageDeleted && !!message.id && !message.id.startsWith('opt-');
    return (
      <HumanMessageBlock
        text={parsedHumanContent.content}
@@ -508,6 +522,16 @@ function MessageContent_({
        messageTime={messageTime}
        components={components}
        onEditResubmit={onEditResubmit}
+        deleteButton={
+          canDelete ? (
+            <DeleteMessageButton
+              threadId={threadId}
+              messageId={message.id!}
+              onDeleted={(ids) => onMessageDeleted?.(ids)}
+              className="size-6"
+            />
+          ) : null
+        }
      />
    );
  }
@@ -1,7 +1,7 @@
 import type { Message } from "@langchain/langgraph-sdk";
 import type { BaseStream } from "@langchain/langgraph-sdk/react";
 import { CheckIcon, SendIcon, XIcon } from "lucide-react";
-import { useCallback, useEffect, useMemo, useState } from "react";
+import { useCallback, useContext, useEffect, useMemo, useState } from "react";

 import {
  Conversation,
@@ -37,6 +37,7 @@ import { resolveAllowMultiple } from "@/roundtable-planning/lib/clarification";
 import { ArtifactFileList } from "../artifacts/artifact-file-list";
 import { StreamingIndicator } from "../streaming-indicator";

+import { ThreadContext } from "./context";
 import { MarkdownContent } from "./markdown-content";
 import { MessageGroup } from "./message-group";
 import { MessageListItem } from "./message-list-item";
@@ -88,7 +89,38 @@ export function MessageList({
  );
  const updateSubtask = useUpdateSubtask();
  const { t } = useI18n();
-  const messages = thread.messages;
+  const threadContext = useContext(ThreadContext);
+  // Read-only contexts (public share, mock previews) must not offer deletion.
+  const allowDelete = !threadContext?.publicShareCode && !threadContext?.isMock;
+
+  // Locally hide messages the user just deleted. The server-side checkpoint is
+  // trimmed immediately, but the live `useStream` cache still holds the message
+  // until the next refetch — filtering by id here makes the removal instant and
+  // keeps it hidden for the rest of the session (a reload reads the trimmed
+  // state). Reset whenever the active thread changes.
+  const [hiddenMessageIds, setHiddenMessageIds] = useState<Set<string>>(
+    () => new Set(),
+  );
+  useEffect(() => {
+    setHiddenMessageIds(new Set());
+  }, [threadId]);
+  const handleMessageDeleted = useCallback((deletedIds: string[]) => {
+    if (deletedIds.length === 0) return;
+    setHiddenMessageIds((prev) => {
+      const next = new Set(prev);
+      for (const id of deletedIds) next.add(id);
+      return next;
+    });
+  }, []);
+
+  const allMessages = thread.messages;
+  const messages = useMemo(
+    () =>
+      hiddenMessageIds.size === 0
+        ? allMessages
+        : allMessages.filter((m) => !m.id || !hiddenMessageIds.has(m.id)),
+    [allMessages, hiddenMessageIds],
+  );

  // Stamp a wall-clock time onto every question/answer the first time it is
  // seen, in a single batched commit. Questions sent this session already carry
@@ -259,6 +291,9 @@ export function MessageList({
                  displaySources={displaySources}
                  extraRehypePlugins={extraRehypePlugins}
                  onEditResubmit={onEditResubmit}
+                  onMessageDeleted={
+                    allowDelete ? handleMessageDeleted : undefined
+                  }
                />
              );
            });
@@ -0,0 +1,266 @@
+"use client";
+
+import { useCallback, useEffect, useState } from "react";
+import { usePathname, useRouter } from "next/navigation";
+import { ChevronDown, Loader2, MoreHorizontal, Pencil, Share2, Trash2 } from "lucide-react";
+import { toast } from "sonner";
+
+import { Button } from "@/components/ui/button";
+import {
+  Dialog,
+  DialogContent,
+  DialogFooter,
+  DialogHeader,
+  DialogTitle,
+} from "@/components/ui/dialog";
+import {
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuItem,
+  DropdownMenuSeparator,
+  DropdownMenuTrigger,
+} from "@/components/ui/dropdown-menu";
+import { Input } from "@/components/ui/input";
+import {
+  SidebarGroup,
+  SidebarGroupContent,
+  SidebarGroupLabel,
+  SidebarMenu,
+  SidebarMenuAction,
+  SidebarMenuItem,
+  SidebarMenuButton,
+} from "@/components/ui/sidebar";
+import { ShareRoundtableDraftDialog } from "@/components/workspace/roundtable-draft-share-dialogs";
+import { formatRelative } from "@/open-canvas/components/ai-writing/AIWritingHistoryDropdown";
+import { useRoundtableDrafts } from "@/roundtable-planning/hooks/useRoundtableDrafts";
+import type { DraftMeta } from "@/roundtable-planning/api/drafts";
+import { isIMEComposing } from "@/lib/ime";
+
+const ROUNDTABLE_PATH = "/page/workspace/roundtable/planning";
+
+function openDraft(
+  draft: DraftMeta,
+  isOnPage: boolean,
+  router: ReturnType<typeof useRouter>,
+) {
+  if (isOnPage) {
+    // 已在会商页面：直接派事件让页面加载该草稿（仿 AI 写作的 open-session）。
+    window.dispatchEvent(
+      new CustomEvent("roundtable:open-draft", { detail: draft.id }),
+    );
+  } else {
+    // 不在该页面：把草稿 id 暂存到 sessionStorage，跳转后由页面消费。
+    sessionStorage.setItem("roundtable:pending-draft", draft.id);
+    router.push(ROUNDTABLE_PATH);
+  }
+}
+
+/** 把草稿的后台作业状态 / 步骤映射成侧边栏小标签（仿页面内 HistoryDropdown）。 */
+function StatusBadge({ draft }: { draft: DraftMeta }) {
+  if (draft.status === "running") {
+    return (
+      <span className="inline-flex items-center gap-1 text-[10px] font-medium text-primary">
+        <Loader2 className="w-2.5 h-2.5 animate-spin" />
+        进行中
+      </span>
+    );
+  }
+  if (draft.status === "awaiting_input") {
+    return <span className="text-[10px] font-medium text-amber-500">待澄清</span>;
+  }
+  if (draft.status === "error") {
+    return <span className="text-[10px] font-medium text-rose-500">出错</span>;
+  }
+  return (
+    <span className="text-[10px] font-medium text-muted-foreground">
+      第 {draft.furthestStep} 步
+    </span>
+  );
+}
+
+export function RecentRoundtableList() {
+  const router = useRouter();
+  const pathname = usePathname();
+  const { drafts, loading, refresh, rename, remove } = useRoundtableDrafts();
+  const [collapsed, setCollapsed] = useState(
+    () => localStorage.getItem("sidebar:recent-roundtable-collapsed") === "true",
+  );
+
+  // 重命名对话框状态。
+  const [renameId, setRenameId] = useState<string | null>(null);
+  const [renameValue, setRenameValue] = useState("");
+  // 分享对话框 —— 正在分享的草稿 id。
+  const [shareId, setShareId] = useState<string | null>(null);
+
+  const toggleCollapsed = () => {
+    const next = !collapsed;
+    setCollapsed(next);
+    localStorage.setItem("sidebar:recent-roundtable-collapsed", String(next));
+  };
+
+  useEffect(() => {
+    void refresh();
+  }, [refresh]);
+
+  const handleRenameSubmit = useCallback(async () => {
+    const id = renameId;
+    const title = renameValue.trim();
+    if (!id || !title) {
+      setRenameId(null);
+      return;
+    }
+    try {
+      await rename(id, title);
+      toast.success("✏️ 已重命名");
+    } catch {
+      toast.error("重命名失败，请重试");
+    } finally {
+      setRenameId(null);
+      setRenameValue("");
+    }
+  }, [renameId, renameValue, rename]);
+
+  const handleDelete = useCallback(
+    async (draft: DraftMeta) => {
+      if (!window.confirm("确定删除这条会商记录吗？此操作不可恢复。")) return;
+      try {
+        await remove(draft.id);
+        toast.success("🗑 已删除会商记录");
+      } catch {
+        toast.error("删除失败，请重试");
+      }
+    },
+    [remove],
+  );
+
+  if (!loading && drafts.length === 0) return null;
+
+  const isOnPage = pathname === ROUNDTABLE_PATH;
+
+  return (
+    <>
+      <SidebarGroup className="px-2 pt-3 mt-0 border-t border-sidebar-border/60">
+        <SidebarGroupLabel
+          className="text-muted-foreground/70 px-3 mb-1 text-[10px] font-semibold tracking-[0.12em] uppercase cursor-pointer select-none flex items-center justify-between hover:text-muted-foreground transition-colors"
+          onClick={toggleCollapsed}
+        >
+          <span>多智能体会商</span>
+          <ChevronDown
+            className={`w-3 h-3 shrink-0 transition-transform duration-200 ${collapsed ? "-rotate-90" : ""}`}
+          />
+        </SidebarGroupLabel>
+        <SidebarGroupContent
+          className={`group-data-[collapsible=icon]:pointer-events-none group-data-[collapsible=icon]:-mt-8 group-data-[collapsible=icon]:opacity-0 overflow-hidden transition-all duration-200 ${
+            collapsed ? "max-h-0 opacity-0 pointer-events-none" : "max-h-[600px] opacity-100"
+          }`}
+        >
+          <SidebarMenu>
+            <div className="flex w-full flex-col gap-0.5">
+              {loading && drafts.length === 0 ? (
+                <p className="px-3 py-1 text-[12px] text-muted-foreground">加载中…</p>
+              ) : (
+                drafts.slice(0, 10).map((draft) => (
+                  <SidebarMenuItem key={draft.id} className="group/side-menu-item">
+                    <SidebarMenuButton
+                      className={
+                        "rounded-lg h-auto py-1.5 px-3 text-muted-foreground " +
+                        "hover:text-foreground hover:bg-sidebar-accent/60"
+                      }
+                      onClick={() => openDraft(draft, isOnPage, router)}
+                    >
+                      <div className="flex flex-col items-start min-w-0 w-full">
+                        <span className="text-[13px] truncate w-full leading-snug">
+                          {draft.title || "未命名草稿"}
+                        </span>
+                        <div className="flex items-center gap-1 mt-0.5">
+                          <StatusBadge draft={draft} />
+                          <span className="text-[10px] text-muted-foreground">·</span>
+                          <span className="text-[10px] text-muted-foreground">
+                            {formatRelative(draft.updatedAt)}
+                          </span>
+                        </div>
+                      </div>
+                    </SidebarMenuButton>
+                    <DropdownMenu>
+                      <DropdownMenuTrigger asChild>
+                        <SidebarMenuAction
+                          showOnHover
+                          className="bg-background/50 hover:bg-background top-2"
+                        >
+                          <MoreHorizontal />
+                          <span className="sr-only">更多</span>
+                        </SidebarMenuAction>
+                      </DropdownMenuTrigger>
+                      <DropdownMenuContent
+                        className="w-44 rounded-lg"
+                        side="right"
+                        align="start"
+                      >
+                        <DropdownMenuItem
+                          onSelect={() => {
+                            setRenameId(draft.id);
+                            setRenameValue(draft.title || "");
+                          }}
+                        >
+                          <Pencil className="text-muted-foreground" />
+                          <span>重命名</span>
+                        </DropdownMenuItem>
+                        <DropdownMenuItem onSelect={() => setShareId(draft.id)}>
+                          <Share2 className="text-muted-foreground" />
+                          <span>分享</span>
+                        </DropdownMenuItem>
+                        <DropdownMenuSeparator />
+                        <DropdownMenuItem onSelect={() => void handleDelete(draft)}>
+                          <Trash2 className="text-muted-foreground" />
+                          <span>删除</span>
+                        </DropdownMenuItem>
+                      </DropdownMenuContent>
+                    </DropdownMenu>
+                  </SidebarMenuItem>
+                ))
+              )}
+            </div>
+          </SidebarMenu>
+        </SidebarGroupContent>
+      </SidebarGroup>
+
+      {/* 重命名对话框 */}
+      <Dialog open={renameId !== null} onOpenChange={(o) => !o && setRenameId(null)}>
+        <DialogContent className="sm:max-w-[425px]">
+          <DialogHeader>
+            <DialogTitle>重命名会商</DialogTitle>
+          </DialogHeader>
+          <div className="py-4">
+            <Input
+              autoFocus
+              value={renameValue}
+              onChange={(e) => setRenameValue(e.target.value)}
+              placeholder="输入新名称"
+              onKeyDown={(e) => {
+                if (e.key === "Enter" && !isIMEComposing(e)) {
+                  e.preventDefault();
+                  void handleRenameSubmit();
+                }
+              }}
+            />
+          </div>
+          <DialogFooter>
+            <Button variant="outline" onClick={() => setRenameId(null)}>
+              取消
+            </Button>
+            <Button onClick={() => void handleRenameSubmit()}>保存</Button>
+          </DialogFooter>
+        </DialogContent>
+      </Dialog>
+
+      {/* 分享对话框 */}
+      <ShareRoundtableDraftDialog
+        draftId={shareId}
+        open={shareId !== null}
+        onOpenChange={(o) => {
+          if (!o) setShareId(null);
+        }}
+      />
+    </>
+  );
+}
@@ -0,0 +1,322 @@
+"use client";
+
+import {
+  CheckIcon,
+  CopyIcon,
+  DownloadIcon,
+  ExternalLinkIcon,
+  Loader2,
+  Trash2Icon,
+} from "lucide-react";
+import { useEffect, useState } from "react";
+import { toast } from "sonner";
+
+import { Button } from "@/components/ui/button";
+import {
+  Dialog,
+  DialogContent,
+  DialogDescription,
+  DialogHeader,
+  DialogTitle,
+} from "@/components/ui/dialog";
+import { Input } from "@/components/ui/input";
+import type { DraftShare, DraftShareMode, DraftSharePreview } from "@/core/roundtable-draft-shares/api";
+import { buildPublicDraftShareUrl, extractShareCode } from "@/core/roundtable-draft-shares/api";
+import {
+  useCreateDraftShare,
+  useImportDraftShare,
+  usePreviewDraftShare,
+  useRevokeDraftShare,
+} from "@/core/roundtable-draft-shares/hooks";
+import { cn } from "@/lib/utils";
+
+function errorMessage(err: unknown): string {
+  return err instanceof Error ? err.message : String(err);
+}
+
+/**
+ * Dialog that produces a share link for a single roundtable draft. Two modes:
+ *
+ * - `view` — mints a public, read-only link that anyone can open without logging
+ *   in; it renders the draft's Step 3 result report (方案总览).
+ * - `import` — mints a short code; a recipient enters it in the import dialog to
+ *   copy the whole 会商 draft into their own account.
+ */
+export function ShareRoundtableDraftDialog({
+  draftId,
+  open,
+  onOpenChange,
+}: {
+  draftId: string | null;
+  open: boolean;
+  onOpenChange: (open: boolean) => void;
+}) {
+  const createShare = useCreateDraftShare();
+  const revokeShare = useRevokeDraftShare();
+  const [mode, setMode] = useState<DraftShareMode>("view");
+  const [share, setShare] = useState<DraftShare | null>(null);
+  const [copied, setCopied] = useState(false);
+
+  // Reset to the default mode (read-only link) every time the dialog opens.
+  useEffect(() => {
+    if (open) setMode("view");
+  }, [open, draftId]);
+
+  // Mint / reuse the link whenever the dialog opens or the mode changes.
+  useEffect(() => {
+    if (!open || !draftId) return;
+    setShare(null);
+    setCopied(false);
+    createShare
+      .mutateAsync({ draftId, mode })
+      .then(setShare)
+      .catch((err) => toast.error(errorMessage(err)));
+    // createShare is stable enough; re-running only on open/draftId/mode is intended.
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [open, draftId, mode]);
+
+  const isView = mode === "view";
+  const publicUrl = isView && share ? buildPublicDraftShareUrl(share.share_code) : "";
+
+  async function handleCopy() {
+    if (!share) return;
+    const text = isView ? publicUrl : share.share_code;
+    try {
+      await navigator.clipboard.writeText(text);
+      setCopied(true);
+      toast.success(isView ? "链接已复制" : "分享码已复制");
+      setTimeout(() => setCopied(false), 1500);
+    } catch {
+      toast.error("复制到剪贴板失败");
+    }
+  }
+
+  async function handleRevoke() {
+    if (!share || !window.confirm("撤销后此分享立即失效，确定吗？")) return;
+    try {
+      await revokeShare.mutateAsync(share.share_code);
+      toast.success("已撤销分享");
+      onOpenChange(false);
+    } catch (err) {
+      toast.error(errorMessage(err));
+    }
+  }
+
+  return (
+    <Dialog open={open} onOpenChange={onOpenChange}>
+      <DialogContent className="sm:max-w-md">
+        <DialogHeader>
+          <DialogTitle>分享会商</DialogTitle>
+          <DialogDescription>
+            {isView
+              ? "生成一个只读链接，任何人无需登录都能查看这次会商生成的结果报告。"
+              : "生成一个分享码，对方在「导入会商」里输入它即可把这份会商复制到自己的账号继续研讨。"}
+          </DialogDescription>
+        </DialogHeader>
+
+        {/* Mode selector */}
+        <div className="bg-muted flex gap-1 rounded-lg p-1">
+          {(
+            [
+              { value: "view" as const, label: "只读链接" },
+              { value: "import" as const, label: "导入副本" },
+            ]
+          ).map((option) => (
+            <button
+              key={option.value}
+              type="button"
+              onClick={() => setMode(option.value)}
+              className={cn(
+                "flex-1 rounded-md px-3 py-1.5 text-sm transition-colors",
+                mode === option.value
+                  ? "bg-background text-foreground shadow-sm"
+                  : "text-muted-foreground hover:text-foreground",
+              )}
+            >
+              {option.label}
+            </button>
+          ))}
+        </div>
+
+        {!share ? (
+          <div className="text-muted-foreground flex items-center gap-2 py-8 text-sm">
+            <Loader2 className="size-4 animate-spin" />
+            正在生成分享…
+          </div>
+        ) : (
+          <div className="space-y-3">
+            <div>
+              <p className="text-muted-foreground mb-1 text-xs">
+                {isView ? "只读链接" : "分享码"}
+              </p>
+              <div className="flex items-center gap-2">
+                {isView ? (
+                  <Input
+                    readOnly
+                    value={publicUrl}
+                    onFocus={(e) => e.currentTarget.select()}
+                    className="flex-1 font-mono text-xs"
+                  />
+                ) : (
+                  <code className="bg-muted flex-1 rounded-md px-3 py-2 text-center font-mono text-lg tracking-[0.3em]">
+                    {share.share_code}
+                  </code>
+                )}
+                <Button variant="outline" onClick={() => void handleCopy()}>
+                  {copied ? (
+                    <CheckIcon className="size-4" />
+                  ) : (
+                    <CopyIcon className="size-4" />
+                  )}
+                  {isView ? "复制链接" : "复制码"}
+                </Button>
+              </div>
+            </div>
+            {isView ? (
+              <div className="space-y-3">
+                <p className="text-muted-foreground text-xs">
+                  拿到链接的人都能查看这次会商的结果报告（只读）。若会商尚未生成结果报告，对方会看到提示。撤销后链接立即失效。
+                </p>
+                <Button
+                  variant="outline"
+                  size="sm"
+                  onClick={() => window.open(publicUrl, "_blank", "noopener")}
+                >
+                  <ExternalLinkIcon className="size-3.5" />
+                  在新标签页打开
+                </Button>
+              </div>
+            ) : (
+              <p className="text-muted-foreground text-xs">
+                把这个分享码发给对方，他们在「导入会商」里输入即可复制一份。撤销后分享码立即失效。
+              </p>
+            )}
+            <Button
+              variant="ghost"
+              size="sm"
+              className="text-destructive hover:text-destructive"
+              disabled={revokeShare.isPending}
+              onClick={() => void handleRevoke()}
+            >
+              <Trash2Icon className="size-3.5" />
+              撤销分享
+            </Button>
+          </div>
+        )}
+      </DialogContent>
+    </Dialog>
+  );
+}
+
+/** Dialog where a user pastes a share code to import someone's roundtable draft. */
+export function ImportRoundtableDraftDialog({
+  open,
+  onOpenChange,
+  onImported,
+}: {
+  open: boolean;
+  onOpenChange: (open: boolean) => void;
+  /** Called with the new local draft id after a successful import. */
+  onImported?: (draftId: string | null) => void;
+}) {
+  const [input, setInput] = useState("");
+  const [preview, setPreview] = useState<DraftSharePreview | null>(null);
+  const previewShare = usePreviewDraftShare();
+  const importShare = useImportDraftShare();
+
+  // Reset state whenever the dialog closes.
+  useEffect(() => {
+    if (!open) {
+      setInput("");
+      setPreview(null);
+    }
+  }, [open]);
+
+  async function handlePreview() {
+    const code = extractShareCode(input);
+    if (!code) {
+      toast.error("请输入分享码");
+      return;
+    }
+    try {
+      setPreview(await previewShare.mutateAsync(code));
+    } catch (err) {
+      setPreview(null);
+      toast.error(errorMessage(err));
+    }
+  }
+
+  async function handleImport() {
+    const code = preview?.share_code ?? extractShareCode(input);
+    if (!code) {
+      toast.error("请输入分享码");
+      return;
+    }
+    try {
+      const result = await importShare.mutateAsync(code);
+      if (result.imported > 0) {
+        toast.success("导入成功，已加入「多智能体会商」历史");
+      } else {
+        toast.info("这份会商之前已导入过");
+      }
+      onImported?.(result.draft_id);
+      onOpenChange(false);
+    } catch (err) {
+      toast.error(errorMessage(err));
+    }
+  }
+
+  return (
+    <Dialog open={open} onOpenChange={onOpenChange}>
+      <DialogContent className="sm:max-w-md">
+        <DialogHeader>
+          <DialogTitle>导入会商</DialogTitle>
+          <DialogDescription>
+            输入对方分享的「导入副本」分享码，把这份会商复制到你自己的账号。
+          </DialogDescription>
+        </DialogHeader>
+
+        <div className="flex gap-2">
+          <Input
+            value={input}
+            onChange={(e) => {
+              setInput(e.target.value);
+              setPreview(null);
+            }}
+            placeholder="粘贴分享码或链接"
+            className="font-mono"
+          />
+          <Button
+            variant="outline"
+            onClick={() => void handlePreview()}
+            disabled={previewShare.isPending || !input.trim()}
+          >
+            {previewShare.isPending && <Loader2 className="size-4 animate-spin" />}
+            预览
+          </Button>
+        </div>
+
+        {preview && (
+          <div className="space-y-2 rounded-lg border p-3 text-sm">
+            <p className="font-medium">{preview.title || "未命名会商"}</p>
+            <p className="text-muted-foreground text-xs">
+              来自用户 {preview.shared_by}
+            </p>
+            <Button
+              className="w-full"
+              onClick={() => void handleImport()}
+              disabled={importShare.isPending}
+            >
+              {importShare.isPending ? (
+                <Loader2 className="size-4 animate-spin" />
+              ) : (
+                <DownloadIcon className="size-4" />
+              )}
+              {importShare.isPending ? "正在导入…" : "导入到我的账号"}
+            </Button>
+          </div>
+        )}
+      </DialogContent>
+    </Dialog>
+  );
+}
@@ -1,6 +1,6 @@
 "use client";

-import { MoonIcon, SunIcon } from "lucide-react";
+import { LayoutGridIcon, ListIcon, MoonIcon, SunIcon } from "lucide-react";
 import { useMemo, type ComponentType, type SVGProps } from "react";
 import { toast } from "sonner";

@@ -48,6 +48,8 @@ export function AppearanceSettingsPage() {
  const { data: citationDisplay } = useCitationDisplaySettings();
  const updateCitationDisplay = useUpdateCitationDisplaySettings();
  const globalDefault = appearance?.default_theme ?? "light";
+  const globalSkillView = appearance?.default_skill_view ?? "list";
+  const globalAgentView = appearance?.default_agent_view ?? "card";
  const cleanupWords =
    citationDisplay?.cleanup_words ?? settings.display.citationCleanupWords ?? [];

@@ -65,6 +67,27 @@ export function AppearanceSettingsPage() {
    }
  };

+  const handleSetDefaultView = async (
+    kind: "skill" | "agent",
+    value: "card" | "list",
+  ) => {
+    const current = kind === "skill" ? globalSkillView : globalAgentView;
+    if (value === current) return;
+    try {
+      await updateAppearance.mutateAsync(
+        kind === "skill"
+          ? { default_skill_view: value }
+          : { default_agent_view: value },
+      );
+      const label = kind === "skill" ? "技能" : "智能体";
+      toast.success(
+        `已将${label}默认展示模式设置为${value === "card" ? "卡片" : "列表"}`,
+      );
+    } catch (e) {
+      toast.error(e instanceof Error ? e.message : "保存失败");
+    }
+  };
+
  const themeOptions = useMemo(
    () => [
      {
@@ -146,6 +169,52 @@ export function AppearanceSettingsPage() {
        </>
      )}

+      {isAdmin && (
+        <>
+          <Separator />
+          <SettingsSection
+            title="默认展示模式（管理员）"
+            description="技能与智能体列表对所有还没有手动切换过的用户的默认展示模式；已经自己切换过的用户保留其个人选择不受影响。"
+          >
+            <div className="flex flex-col gap-4">
+              {(
+                [
+                  { kind: "skill", label: "技能", current: globalSkillView },
+                  { kind: "agent", label: "智能体", current: globalAgentView },
+                ] as const
+              ).map(({ kind, label, current }) => (
+                <div key={kind} className="flex flex-wrap items-center gap-2">
+                  <span className="w-14 text-sm font-medium">{label}</span>
+                  <Button
+                    type="button"
+                    variant={current === "card" ? "default" : "outline"}
+                    size="sm"
+                    onClick={() => void handleSetDefaultView(kind, "card")}
+                    disabled={updateAppearance.isPending}
+                  >
+                    <LayoutGridIcon className="mr-1.5 size-4" />
+                    卡片
+                  </Button>
+                  <Button
+                    type="button"
+                    variant={current === "list" ? "default" : "outline"}
+                    size="sm"
+                    onClick={() => void handleSetDefaultView(kind, "list")}
+                    disabled={updateAppearance.isPending}
+                  >
+                    <ListIcon className="mr-1.5 size-4" />
+                    列表
+                  </Button>
+                  <p className="text-muted-foreground ml-2 text-xs">
+                    当前系统默认：{current === "card" ? "卡片" : "列表"}
+                  </p>
+                </div>
+              ))}
+            </div>
+          </SettingsSection>
+        </>
+      )}
+
      <Separator />

      <SettingsSection
@@ -1,6 +1,6 @@
 "use client";

-import { PenLineIcon, PlusIcon, SearchIcon, Trash2Icon } from "lucide-react";
+import { PenLineIcon, PlusIcon, SearchIcon, Trash2Icon, Heart, BookOpen, Map, Zap, Target, ShieldAlert } from "lucide-react";
 import { useMemo, useState } from "react";
 import { toast } from "sonner";

@@ -464,13 +464,41 @@ const HISTORY_LABELS: Record<string, string> = {
  longTermBackground: "长期背景",
 };

+const CATEGORY_LABELS: Record<string, Record<string, string>> = {
+  zh: {
+    preference: "偏好",
+    knowledge: "知识",
+    context: "背景",
+    behavior: "行为",
+    goal: "目标",
+    correction: "纠偏",
+  },
+  en: {
+    preference: "Preference",
+    knowledge: "Knowledge",
+    context: "Context",
+    behavior: "Behavior",
+    goal: "Goal",
+    correction: "Correction",
+  },
+};
+
 const CATEGORY_COLORS: Record<string, string> = {
-  preference: "bg-blue-100 text-blue-700",
-  knowledge: "bg-green-100 text-green-700",
-  context: "bg-yellow-100 text-yellow-700",
-  behavior: "bg-purple-100 text-purple-700",
-  goal: "bg-orange-100 text-orange-700",
-  correction: "bg-red-100 text-red-700",
+  preference: "bg-blue-50 text-blue-700 border border-blue-200/50 dark:bg-blue-950/30 dark:text-blue-400 dark:border-blue-900/30",
+  knowledge: "bg-green-50 text-green-700 border border-green-200/50 dark:bg-green-950/30 dark:text-green-400 dark:border-green-900/30",
+  context: "bg-amber-50 text-amber-700 border border-amber-200/50 dark:bg-amber-950/30 dark:text-amber-400 dark:border-amber-900/30",
+  behavior: "bg-purple-50 text-purple-700 border border-purple-200/50 dark:bg-purple-950/30 dark:text-purple-400 dark:border-purple-900/30",
+  goal: "bg-orange-50 text-orange-700 border border-orange-200/50 dark:bg-orange-950/30 dark:text-orange-400 dark:border-orange-900/30",
+  correction: "bg-red-50 text-red-700 border border-red-200/50 dark:bg-red-950/30 dark:text-red-400 dark:border-red-900/30",
+};
+
+const CATEGORY_ICONS: Record<string, React.ElementType> = {
+  preference: Heart,
+  knowledge: BookOpen,
+  context: Map,
+  behavior: Zap,
+  goal: Target,
+  correction: ShieldAlert,
 };

 /** V1 记忆只读视图:展示 memory.json 的全部字段，Tab 布局。 */
@@ -484,6 +512,9 @@ function MemoryV1View({
    memory_usage: string;
  };
 }) {
+  const { locale } = useI18n();
+  const isZh = locale.startsWith("zh");
+  const labelMap = isZh ? CATEGORY_LABELS.zh : CATEGORY_LABELS.en;
  const ctxEntries = Object.entries(memory.user_context ?? {}).filter(([, v]) => v);
  const historyEntries = Object.entries(memory.history ?? {}).filter(([, v]) => v);

@@ -519,37 +550,63 @@ function MemoryV1View({
                暂无事实记录，对话后系统会自动提取。
              </div>
            ) : (
-              <div className="space-y-2">
-                {memory.facts.map((fact) => (
-                  <div key={fact.id} className="rounded-md border p-3 space-y-1.5">
-                    <div className="flex items-center gap-2">
-                      <span
-                        className={`rounded px-1.5 py-0.5 text-xs font-medium ${
-                          CATEGORY_COLORS[fact.category] ?? "bg-gray-100 text-gray-700"
-                        }`}
-                      >
-                        {fact.category}
-                      </span>
-                      <div className="flex-1 h-1.5 rounded-full bg-muted overflow-hidden">
-                        <div
-                          className="h-full rounded-full bg-primary"
-                          style={{ width: `${Math.round(fact.confidence * 100)}%` }}
-                        />
+              <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-5 pt-2">
+                {memory.facts.map((fact) => {
+                  const categoryLabel = labelMap[fact.category] ?? fact.category;
+                  const Icon = CATEGORY_ICONS[fact.category] ?? PlusIcon;
+                  return (
+                    <div
+                      key={fact.id}
+                      className="group relative flex flex-col justify-between rounded-xl border border-border/40 bg-gradient-to-br from-card to-card/50 hover:from-card hover:to-card hover:border-primary/30 hover:shadow-md hover:-translate-y-0.5 transition-all duration-300 p-5 space-y-4 dark:border-[#213D5E]/40 dark:from-[#022248]/40 dark:to-[#022248]/10 dark:hover:from-[#022248]/60 dark:hover:to-[#022248]/30 overflow-hidden"
+                    >
+                      {/* Subtle top highlight */}
+                      <div className="absolute inset-x-0 top-0 h-px bg-gradient-to-r from-transparent via-primary/10 to-transparent opacity-0 group-hover:opacity-100 transition-opacity duration-300" />
+
+                      <div className="space-y-4">
+                        <div className="flex items-center justify-between gap-2">
+                          <span
+                            className={`inline-flex items-center gap-1.5 rounded-full px-2.5 py-1 text-xs font-medium border shadow-sm ${
+                              CATEGORY_COLORS[fact.category] ?? "bg-gray-100 text-gray-700 border-gray-200"
+                            }`}
+                          >
+                            <Icon className="w-3.5 h-3.5" />
+                            {categoryLabel}
+                          </span>
+                          <div className="flex flex-col items-end gap-1">
+                            <span className="text-[11px] text-muted-foreground font-semibold tracking-wider">
+                              {Math.round(fact.confidence * 100)}%
+                            </span>
+                            {/* Confidence Progress Bar */}
+                            <div className="h-1 w-12 rounded-full bg-muted overflow-hidden">
+                              <div
+                                className="h-full rounded-full bg-primary transition-all duration-500"
+                                style={{ width: `${Math.round(fact.confidence * 100)}%` }}
+                              />
+                            </div>
+                          </div>
+                        </div>
+
+                        <p className="text-[14px] text-foreground/90 leading-relaxed whitespace-pre-wrap [overflow-wrap:anywhere]">
+                          {desensitize(fact.content)}
+                        </p>
                      </div>
-                      <span className="text-xs text-muted-foreground shrink-0">
-                        {Math.round(fact.confidence * 100)}%
-                      </span>
+
+                      {fact.sourceError && (
+                        <div className="mt-auto pt-2">
+                          <div className="rounded-lg bg-red-50/80 dark:bg-red-950/30 border border-red-100 dark:border-red-900/50 p-3 text-xs text-red-600 dark:text-red-400 shadow-sm">
+                            <div className="flex items-center gap-1.5 font-semibold mb-1">
+                              <ShieldAlert className="w-3.5 h-3.5" />
+                              <span>避免</span>
+                            </div>
+                            <p className="leading-relaxed opacity-90">{desensitize(fact.sourceError)}</p>
+                          </div>
+                        </div>
+                      )}
                    </div>
-                    <p className="text-sm whitespace-pre-wrap [overflow-wrap:anywhere]">{desensitize(fact.content)}</p>
-                    {fact.sourceError && (
-                      <p className="rounded bg-red-50 px-2 py-1 text-xs text-red-600 dark:bg-[#311629] dark:text-[#EE212C]">
-                        避免：{desensitize(fact.sourceError)}
-                      </p>
-                    )}
-                  </div>
-                ))}
+                  );
+                })}
              </div>
-             )}
+            )}
          </div>
        </TabsContent>

@@ -3,6 +3,8 @@
 import {
  AlertCircle,
  ArchiveIcon,
+  ArrowDownUpIcon,
+  BookmarkIcon,
  CheckCircle2,
  ChevronLeftIcon,
  ChevronRightIcon,
@@ -14,7 +16,6 @@ import {
  Loader2,
  LockIcon,
  PinIcon,
-  PinOffIcon,
  RefreshCwIcon,
  SparklesIcon,
  TagsIcon,
@@ -38,12 +39,12 @@ import {
 } from "@/components/ui/dialog";
 import {
  Empty,
-  EmptyContent,
  EmptyDescription,
  EmptyHeader,
  EmptyMedia,
  EmptyTitle,
 } from "@/components/ui/empty";
+
 import {
  Item,
  ItemActions,
@@ -52,11 +53,13 @@ import {
  ItemDescription,
 } from "@/components/ui/item";
 import { Input } from "@/components/ui/input";
+import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select";
 import { Tabs, TabsList, TabsTrigger } from "@/components/ui/tabs";
 import { SkillDetailDialog } from "@/components/workspace/skills/skill-detail-dialog";
 import { TagChipList } from "@/components/workspace/tags/tag-chip";
 import { TagPickerDialog } from "@/components/workspace/tags/tag-picker-dialog";
 import { TagSearchBar } from "@/components/workspace/tags/tag-search-bar";
+import { ViewModeToggle } from "@/components/workspace/view-mode-toggle";
 import { useTheme } from "@/contexts/ThemeContext";
 import { getStoredAuth } from "@/core/auth";
 import { useI18n } from "@/core/i18n/hooks";
@@ -66,11 +69,13 @@ import {
  useDuplicateSkill,
  useInstallSkillUpload,
  useReconcileCustomSkills,
+  useSetSkillFeatured,
  useSetSkillPinned,
  useSetSkillPublished,
  useSkills,
  useValidateSkillUpload,
 } from "@/core/skills/hooks";
+import { useViewMode } from "@/core/system-settings/hooks";
 import type { Skill } from "@/core/skills/type";
 import { env } from "@/env";
 import { desensitize } from "@/lib/desensitize";
@@ -92,6 +97,15 @@ export function SkillSettingsPage({ onClose }: { onClose?: () => void } = {}) {
 }

 const PAGE_SIZE = 10;
+type SkillSort =
+  | "time_desc"
+  | "time_asc"
+  | "activity_desc"
+  | "activity_asc"
+  | "usage_desc"
+  | "usage_asc"
+  | "name_asc"
+  | "name_desc";

 /** 重新扫描成功 toast：仅暗色模式使用，浅色走 Sonner 默认样式 */
 const rescanSuccessToastDarkOptions = {
@@ -136,10 +150,12 @@ function SkillSettingsList({ onClose }: { onClose?: () => void }) {
  const [archiveSheetOpen, setArchiveSheetOpen] = useState(false);
  const [search, setSearch] = useState("");
  const [tagIds, setTagIds] = useState<string[]>([]);
+  const [sort, setSort] = useState<SkillSort>("time_desc");
  const [page, setPage] = useState(1);
+  const [viewMode, setViewMode] = useViewMode("skill");
  const reconcileMutation = useReconcileCustomSkills();
  // Name + tag filtering is resolved server-side via the /api/skills query.
-  const { skills, isLoading, error } = useSkills({ search, tagIds });
+  const { skills, isLoading, error } = useSkills({ search, tagIds, sort });

  const storedAuth = useMemo(() => getStoredAuth(), []);
  const currentUserId = storedAuth?.user_id ?? null;
@@ -185,25 +201,36 @@ function SkillSettingsList({ onClose }: { onClose?: () => void }) {
  }, [skills, currentUserId]);

  const filteredSkills = filter === "mine" ? activeMine : activeAll;
+  const orderedSkills = useMemo(
+    () =>
+      filteredSkills
+        .map((skill, index) => ({ skill, index }))
+        .sort((a, b) => {
+          // 置顶(featured)决定排序;钉选(pinned)只管防归档,不影响顺序。
+          const featuredDelta =
+            Number(!!b.skill.featured) - Number(!!a.skill.featured);
+          return featuredDelta || a.index - b.index;
+        })
+        .map(({ skill }) => skill),
+    [filteredSkills],
+  );
  const staleCount = staleVisible.length;
  const archivedCount = archivedVisible.length;

-  const totalPages = Math.max(1, Math.ceil(filteredSkills.length / PAGE_SIZE));
+  const totalPages = Math.max(1, Math.ceil(orderedSkills.length / PAGE_SIZE));
  // Filter / search / tag changes may shrink the result set — pull the page
  // back into range without forcing a reset on every keystroke.
  useEffect(() => {
    if (page > totalPages) setPage(totalPages);
  }, [page, totalPages]);
+  useEffect(() => {
+    setPage(1);
+  }, [search, tagIds, sort]);
  const pagedSkills = useMemo(
-    () => filteredSkills.slice((page - 1) * PAGE_SIZE, page * PAGE_SIZE),
-    [filteredSkills, page],
+    () => orderedSkills.slice((page - 1) * PAGE_SIZE, page * PAGE_SIZE),
+    [orderedSkills, page],
  );

-  const handleCreateSkill = () => {
-    onClose?.();
-    router.push("/?mode=skill");
-  };
-
  const handleRescan = async () => {
    try {
      const result = await reconcileMutation.mutateAsync();
@@ -303,10 +330,6 @@ function SkillSettingsList({ onClose }: { onClose?: () => void }) {
            <Upload className="size-4" />
            {t.settings.skills.installSkill}
          </Button>
-          <Button size="sm" onClick={handleCreateSkill}>
-            <SparklesIcon className="size-4" />
-            {t.settings.skills.createSkill}
-          </Button>
        </div>
      </header>
      <TagSearchBar
@@ -314,24 +337,57 @@ function SkillSettingsList({ onClose }: { onClose?: () => void }) {
        onSearchChange={setSearch}
        tagIds={tagIds}
        onTagIdsChange={setTagIds}
+        actions={
+          <div className="flex items-center gap-2">
+            <ViewModeToggle value={viewMode} onChange={setViewMode} />
+            <Select value={sort} onValueChange={(v) => setSort(v as SkillSort)}>
+              <SelectTrigger
+                className="h-9 w-full gap-2 px-3 text-xs sm:w-[148px]"
+                title="排序"
+              >
+                <ArrowDownUpIcon className="text-muted-foreground size-3.5" />
+                <SelectValue />
+              </SelectTrigger>
+              <SelectContent position="popper" side="bottom" sideOffset={4}>
+                <SelectItem value="time_desc">最新创建</SelectItem>
+                <SelectItem value="time_asc">最早创建</SelectItem>
+                <SelectItem value="activity_desc">最近使用</SelectItem>
+                <SelectItem value="activity_asc">最早使用</SelectItem>
+                <SelectItem value="usage_desc">使用最多</SelectItem>
+                <SelectItem value="usage_asc">使用最少</SelectItem>
+                <SelectItem value="name_asc">名称 A-Z</SelectItem>
+                <SelectItem value="name_desc">名称 Z-A</SelectItem>
+              </SelectContent>
+            </Select>
+          </div>
+        }
      />
      {isLoading && (
        <div className="text-muted-foreground text-sm">{t.common.loading}</div>
      )}
      {error && <div className="text-destructive text-sm">Error: {error.message}</div>}
      {!isLoading && !error && filteredSkills.length === 0 && (
-        <EmptySkill onCreateSkill={handleCreateSkill} />
+        <EmptySkill />
+      )}
+      {!isLoading && !error && filteredSkills.length > 0 && (
+        <div
+          className={cn(
+            viewMode === "card"
+              ? "grid grid-cols-1 gap-3 sm:grid-cols-2 xl:grid-cols-3"
+              : "flex flex-col gap-3",
+          )}
+        >
+          {pagedSkills.map((skill) => (
+            <SkillRow
+              key={skill.name}
+              skill={skill}
+              currentUserId={currentUserId}
+              isAdmin={isAdmin}
+              layout={viewMode === "card" ? "card" : "row"}
+            />
+          ))}
+        </div>
      )}
-      {!isLoading && !error &&
-        filteredSkills.length > 0 &&
-        pagedSkills.map((skill) => (
-          <SkillRow
-            key={skill.name}
-            skill={skill}
-            currentUserId={currentUserId}
-            isAdmin={isAdmin}
-          />
-        ))}
      {!isLoading && !error && totalPages > 1 && (
        <div className="flex items-center justify-end gap-2 pt-1">
          <Button
@@ -384,14 +440,19 @@ export function SkillRow({
  skill,
  currentUserId,
  isAdmin,
+  layout = "row",
 }: {
  skill: Skill;
  currentUserId: string | null;
  isAdmin: boolean;
+  /** "row" = full-width horizontal item (default); "card" = grid card cell. */
+  layout?: "row" | "card";
 }) {
+  const isCard = layout === "card";
  const { t } = useI18n();
  const setPublished = useSetSkillPublished();
  const setPinned = useSetSkillPinned();
+  const setFeatured = useSetSkillFeatured();
  const deleteSkill = useDeleteCustomSkill();
  const duplicateSkillMutation = useDuplicateSkill();
  const [confirmDeleteOpen, setConfirmDeleteOpen] = useState(false);
@@ -471,176 +532,251 @@ export function SkillRow({
    }
  }

+  async function handleToggleFeatured() {
+    const next = !skill.featured;
+    try {
+      await setFeatured.mutateAsync({ skillName: skill.name, featured: next });
+      toast.success(
+        next
+          ? t.settings.skills.featureSuccess
+          : t.settings.skills.unfeatureSuccess,
+      );
+    } catch (err) {
+      toast.error(err instanceof Error ? err.message : String(err));
+    }
+  }
+
+  const badgeGroup = (
+    <div className="flex flex-wrap items-center gap-2">
+      <span className={cn(isCard && "truncate font-medium")}>
+        {desensitize(skill.name)}
+      </span>
+      {isBuiltin && (
+        <Badge variant="secondary" className="text-xs">
+          {t.settings.skills.badgeBuiltin}
+        </Badge>
+      )}
+      {isOwned && (
+        <Badge
+          variant="default"
+          className="bg-emerald-500/15 text-emerald-700 hover:bg-emerald-500/15 dark:text-emerald-300 text-xs"
+        >
+          {t.settings.skills.badgeMine}
+        </Badge>
+      )}
+      {isFromOthers && (
+        <Badge
+          variant="outline"
+          className="border-blue-500/30 text-blue-700 dark:text-blue-300 text-xs"
+          title={
+            skill.owner_user_id
+              ? t.settings.skills.badgeFromOthersTitle.replace(
+                  "{user_id}",
+                  skill.owner_user_id,
+                )
+              : undefined
+          }
+        >
+          {t.settings.skills.badgeFromOthers}
+        </Badge>
+      )}
+      {isOwned && skill.published && (
+        <Badge
+          variant="outline"
+          className="border-sky-500/30 text-sky-700 dark:text-sky-300 text-xs"
+          title={t.settings.skills.badgePublishedTitle}
+        >
+          <GlobeIcon className="size-3" />
+          {t.settings.skills.badgePublished}
+        </Badge>
+      )}
+      {isCustom && !isBuiltin && skill.source === "agent" && (
+        <Badge
+          variant="outline"
+          className="border-cyan-500/30 text-cyan-700 dark:text-cyan-300 text-xs"
+          title={t.settings.skills.badgeSourceAgentTitle}
+        >
+          {t.settings.skills.badgeSourceAgent}
+        </Badge>
+      )}
+      {isCustom && !isBuiltin && skill.source === "upload" && (
+        <Badge
+          variant="outline"
+          className="border-zinc-400/40 text-zinc-600 dark:text-zinc-400 text-xs"
+          title={t.settings.skills.badgeSourceUploadTitle}
+        >
+          {t.settings.skills.badgeSourceUpload}
+        </Badge>
+      )}
+      {skill.featured && (
+        <Badge
+          variant="outline"
+          className="border-amber-500/30 text-amber-700 dark:text-amber-300 text-xs"
+          title={t.settings.skills.badgeFeaturedTitle}
+        >
+          {t.settings.skills.badgeFeatured}
+        </Badge>
+      )}
+      {skill.pinned && (
+        <Badge
+          variant="outline"
+          className="border-purple-500/30 text-purple-700 dark:text-purple-300 text-xs"
+          title={t.settings.skills.badgePinnedTitle}
+        >
+          {t.settings.skills.badgePinned}
+        </Badge>
+      )}
+    </div>
+  );
+
+  const metaNodes = (
+    <>
+      {skill.use_count !== undefined && (
+        <div className="text-muted-foreground mt-1 text-xs">
+          {skill.use_count > 0
+            ? t.settings.skills.useCountInline.replace(
+                "{count}",
+                String(skill.use_count),
+              )
+            : t.settings.skills.useCountInlineZero}
+        </div>
+      )}
+      {(skill.tags?.length ?? 0) > 0 && (
+        <TagChipList tags={skill.tags!} className="mt-2" />
+      )}
+    </>
+  );
+
+  const actionButtons = (
+    <>
+      <Button
+        size="icon"
+        variant="ghost"
+        className="h-8 w-8 shrink-0"
+        onClick={() => setTagPickerOpen(true)}
+        title={t.adminTags.manageTags}
+      >
+        <TagsIcon className="size-3.5" />
+      </Button>
+      {canManage && (
+        <Button
+          size="icon"
+          variant="ghost"
+          className={cn(
+            "h-8 w-8 shrink-0",
+            skill.featured && "text-amber-600 hover:text-amber-700",
+          )}
+          disabled={setFeatured.isPending}
+          onClick={() => void handleToggleFeatured()}
+          title={
+            skill.featured
+              ? t.settings.skills.unfeatureAction
+              : t.settings.skills.featureAction
+          }
+        >
+          <PinIcon
+            className={cn("size-3.5", skill.featured && "fill-current")}
+          />
+        </Button>
+      )}
+      {canManage && (
+        <Button
+          size="icon"
+          variant="ghost"
+          className={cn(
+            "h-8 w-8 shrink-0",
+            skill.pinned && "text-emerald-600 hover:text-emerald-700",
+          )}
+          disabled={setPinned.isPending}
+          onClick={() => void handleTogglePinned()}
+          title={
+            skill.pinned
+              ? t.settings.skills.unpinAction
+              : t.settings.skills.pinAction
+          }
+        >
+          <BookmarkIcon
+            className={cn("size-3.5", skill.pinned && "fill-current")}
+          />
+        </Button>
+      )}
+      {canTogglePublish && (
+        <Button
+          size="icon"
+          variant="ghost"
+          className="h-8 w-8 shrink-0"
+          disabled={setPublished.isPending}
+          onClick={() => void handleTogglePublished(!skill.published)}
+          title={
+            skill.published
+              ? t.settings.skills.unpublishAction
+              : t.settings.skills.publishAction
+          }
+        >
+          {skill.published ? (
+            <LockIcon className="size-3.5" />
+          ) : (
+            <GlobeIcon className="size-3.5" />
+          )}
+        </Button>
+      )}
+      <Button
+        size="icon"
+        variant="ghost"
+        className="h-8 w-8 shrink-0"
+        disabled={duplicateSkillMutation.isPending}
+        onClick={handleOpenDuplicate}
+        title="复制为新技能"
+      >
+        <CopyIcon className="size-3.5" />
+      </Button>
+      {canManage && (
+        <Button
+          size="icon"
+          variant="ghost"
+          className="text-destructive hover:text-destructive h-8 w-8 shrink-0"
+          onClick={() => setConfirmDeleteOpen(true)}
+          title={t.settings.skills.deleteAction}
+        >
+          <Trash2Icon className="size-3.5" />
+        </Button>
+      )}
+    </>
+  );
+
  return (
    <>
-      <Item className="w-full dark:border-[#213D5E] dark:bg-[#02244C] dark:text-white" variant="outline">
-        <ItemContent
-          className="cursor-pointer"
-          onClick={() => setDetailOpen(true)}
-        >
-          <ItemTitle>
-            <div className="flex flex-wrap items-center gap-2">
-              <span>{desensitize(skill.name)}</span>
-              {isBuiltin && (
-                <Badge variant="secondary" className="text-xs">
-                  {t.settings.skills.badgeBuiltin}
-                </Badge>
-              )}
-              {isOwned && (
-                <Badge
-                  variant="default"
-                  className="bg-emerald-500/15 text-emerald-700 hover:bg-emerald-500/15 dark:text-emerald-300 text-xs"
-                >
-                  {t.settings.skills.badgeMine}
-                </Badge>
-              )}
-              {isFromOthers && (
-                <Badge
-                  variant="outline"
-                  className="border-blue-500/30 text-blue-700 dark:text-blue-300 text-xs"
-                  title={
-                    skill.owner_user_id
-                      ? t.settings.skills.badgeFromOthersTitle.replace(
-                          "{user_id}",
-                          skill.owner_user_id,
-                        )
-                      : undefined
-                  }
-                >
-                  {t.settings.skills.badgeFromOthers}
-                </Badge>
-              )}
-              {isOwned && skill.published && (
-                <Badge
-                  variant="outline"
-                  className="border-sky-500/30 text-sky-700 dark:text-sky-300 text-xs"
-                  title={t.settings.skills.badgePublishedTitle}
-                >
-                  <GlobeIcon className="size-3" />
-                  {t.settings.skills.badgePublished}
-                </Badge>
-              )}
-              {isCustom && !isBuiltin && skill.source === "agent" && (
-                <Badge
-                  variant="outline"
-                  className="border-cyan-500/30 text-cyan-700 dark:text-cyan-300 text-xs"
-                  title={t.settings.skills.badgeSourceAgentTitle}
-                >
-                  {t.settings.skills.badgeSourceAgent}
-                </Badge>
-              )}
-              {isCustom && !isBuiltin && skill.source === "upload" && (
-                <Badge
-                  variant="outline"
-                  className="border-zinc-400/40 text-zinc-600 dark:text-zinc-400 text-xs"
-                  title={t.settings.skills.badgeSourceUploadTitle}
-                >
-                  {t.settings.skills.badgeSourceUpload}
-                </Badge>
-              )}
-              {skill.pinned && (
-                <Badge
-                  variant="outline"
-                  className="border-purple-500/30 text-purple-700 dark:text-purple-300 text-xs"
-                  title={t.settings.skills.badgePinnedTitle}
-                >
-                  {t.settings.skills.badgePinned}
-                </Badge>
-              )}
-            </div>
-          </ItemTitle>
-          <ItemDescription className="line-clamp-4">
-            {desensitize(skill.description ?? "")}
-          </ItemDescription>
-          {skill.use_count !== undefined && (
-            <div className="text-muted-foreground mt-1 text-xs">
-              {skill.use_count > 0
-                ? t.settings.skills.useCountInline.replace(
-                    "{count}",
-                    String(skill.use_count),
-                  )
-                : t.settings.skills.useCountInlineZero}
-            </div>
-          )}
-          {(skill.tags?.length ?? 0) > 0 && (
-            <TagChipList tags={skill.tags!} className="mt-2" />
-          )}
-        </ItemContent>
-        <ItemActions>
-          {isAdmin && (
-            <Button
-              size="icon"
-              variant="ghost"
-              className="h-8 w-8 shrink-0"
-              onClick={() => setTagPickerOpen(true)}
-              title={t.adminTags.manageTags}
-            >
-              <TagsIcon className="size-3.5" />
-            </Button>
-          )}
-          {canManage && (
-            <Button
-              size="icon"
-              variant="ghost"
-              className="h-8 w-8 shrink-0"
-              disabled={setPinned.isPending}
-              onClick={() => void handleTogglePinned()}
-              title={
-                skill.pinned
-                  ? t.settings.skills.unpinAction
-                  : t.settings.skills.pinAction
-              }
-            >
-              {skill.pinned ? (
-                <PinOffIcon className="size-3.5" />
-              ) : (
-                <PinIcon className="size-3.5" />
-              )}
-            </Button>
-          )}
-          {canTogglePublish && (
-            <Button
-              size="icon"
-              variant="ghost"
-              className="h-8 w-8 shrink-0"
-              disabled={setPublished.isPending}
-              onClick={() => void handleTogglePublished(!skill.published)}
-              title={
-                skill.published
-                  ? t.settings.skills.unpublishAction
-                  : t.settings.skills.publishAction
-              }
-            >
-              {skill.published ? (
-                <LockIcon className="size-3.5" />
-              ) : (
-                <GlobeIcon className="size-3.5" />
-              )}
-            </Button>
-          )}
-          <Button
-            size="icon"
-            variant="ghost"
-            className="h-8 w-8 shrink-0"
-            disabled={duplicateSkillMutation.isPending}
-            onClick={handleOpenDuplicate}
-            title="复制为新技能"
+      {isCard ? (
+        <div className="flex h-full min-w-0 flex-col rounded-lg border p-3 transition-shadow hover:shadow-sm dark:border-[#213D5E] dark:bg-[#02244C] dark:text-white">
+          <div
+            className="min-w-0 flex-1 cursor-pointer"
+            onClick={() => setDetailOpen(true)}
          >
-            <CopyIcon className="size-3.5" />
-          </Button>
-          {canManage && (
-            <Button
-              size="icon"
-              variant="ghost"
-              className="text-destructive hover:text-destructive h-8 w-8 shrink-0"
-              onClick={() => setConfirmDeleteOpen(true)}
-              title={t.settings.skills.deleteAction}
-            >
-              <Trash2Icon className="size-3.5" />
-            </Button>
-          )}
-        </ItemActions>
-      </Item>
+            {badgeGroup}
+            <p className="text-muted-foreground mt-1 line-clamp-3 text-sm">
+              {desensitize(skill.description ?? "")}
+            </p>
+            {metaNodes}
+          </div>
+          <div className="mt-2 flex flex-wrap items-center justify-end gap-1 border-t pt-2 dark:border-[#213D5E]">
+            {actionButtons}
+          </div>
+        </div>
+      ) : (
+        <Item className="w-full dark:border-[#213D5E] dark:bg-[#02244C] dark:text-white" variant="outline">
+          <ItemContent
+            className="cursor-pointer"
+            onClick={() => setDetailOpen(true)}
+          >
+            <ItemTitle>{badgeGroup}</ItemTitle>
+            <ItemDescription className="line-clamp-4">
+              {desensitize(skill.description ?? "")}
+            </ItemDescription>
+            {metaNodes}
+          </ItemContent>
+          <ItemActions>{actionButtons}</ItemActions>
+        </Item>
+      )}
      <Dialog open={duplicateOpen} onOpenChange={setDuplicateOpen}>
        <DialogContent>
          <DialogHeader>
@@ -706,15 +842,13 @@ export function SkillRow({
          </DialogFooter>
        </DialogContent>
      </Dialog>
-      {isAdmin && (
-        <TagPickerDialog
-          open={tagPickerOpen}
-          onOpenChange={setTagPickerOpen}
-          targetType="skill"
-          targetId={skill.name}
-          currentTags={skill.tags ?? []}
-        />
-      )}
+      <TagPickerDialog
+        open={tagPickerOpen}
+        onOpenChange={setTagPickerOpen}
+        targetType="skill"
+        targetId={skill.name}
+        currentTags={skill.tags ?? []}
+      />
      <SkillDetailDialog
        skillName={skill.name}
        open={detailOpen}
@@ -724,7 +858,7 @@ export function SkillRow({
  );
 }

-function EmptySkill({ onCreateSkill }: { onCreateSkill: () => void }) {
+function EmptySkill() {
  const { t } = useI18n();
  return (
    <Empty>
@@ -737,9 +871,6 @@ function EmptySkill({ onCreateSkill }: { onCreateSkill: () => void }) {
          {t.settings.skills.emptyDescription}
        </EmptyDescription>
      </EmptyHeader>
-      <EmptyContent>
-        <Button onClick={onCreateSkill}>{t.settings.skills.emptyButton}</Button>
-      </EmptyContent>
    </Empty>
  );
 }
@@ -133,8 +133,7 @@ export function SkillDetailDialog({
    return stripYamlFrontmatter(contentData?.content ?? "");
  }, [contentData]);

-  const defaultTab: "detail" | "source" =
-    skill && !skill.detail ? "source" : "detail";
+  const defaultTab: "detail" = "detail";
  const selectedTab = activeTab ?? defaultTab;

  function startEditing() {
@@ -234,10 +233,6 @@ export function SkillDetailDialog({
                  {tx.filesSectionTitle}
                </TabsTrigger>
              )}
-              <TabsTrigger value="source" className="text-xs">
-                <FileCode2Icon className="mr-1 size-3.5" />
-                {tx.contentSectionTitle}
-              </TabsTrigger>
            </TabsList>

            <div className="flex shrink-0 items-center gap-1">
@@ -337,13 +332,9 @@ export function SkillDetailDialog({
              <div className="text-muted-foreground rounded-lg border border-dashed px-4 py-8 text-center">
                <FileTextIcon className="mx-auto mb-2 size-6 opacity-40" />
                <p className="text-sm">{tx.detailEmpty}</p>
-                {isOwner ? (
-                  <p className="mt-1 text-xs">
-                    Open the SKILL.md tab to view the skill source.
-                  </p>
-                ) : (
+                {isOwner && canManage ? (
                  <p className="mt-1 text-xs">{tx.detailAdminOnlyHint}</p>
-                )}
+                ) : null}
              </div>
            )}
          </TabsContent>
@@ -17,20 +17,22 @@ export function TagChip({
  className?: string;
 }) {
  const color = resolveTagColor(tag.color);
+  const label = desensitize(tag.name);
  return (
    <span
      className={cn(
-        "inline-flex items-center gap-1 rounded-full border px-2 py-0.5 text-xs font-medium",
+        "inline-flex max-w-full min-w-0 items-center gap-1 rounded-full border px-2 py-0.5 text-xs font-medium",
        color.chip,
        className,
      )}
+      title={label}
    >
-      {desensitize(tag.name)}
+      <span className="min-w-0 truncate">{label}</span>
      {onRemove && (
        <button
          type="button"
          onClick={onRemove}
-          className="hover:opacity-70"
+          className="shrink-0 hover:opacity-70"
          aria-label={`remove ${tag.name}`}
        >
          <XIcon className="size-3" />
@@ -50,7 +52,7 @@ export function TagChipList({
 }) {
  if (!tags || tags.length === 0) return null;
  return (
-    <div className={cn("flex flex-wrap gap-1", className)}>
+    <div className={cn("flex min-w-0 max-w-full flex-wrap gap-1", className)}>
      {tags.map((tag) => (
        <TagChip key={tag.name} tag={tag} />
      ))}
@@ -20,9 +20,9 @@ import { cn } from "@/lib/utils";
 import { resolveTagColor } from "./tag-colors";

 /**
- * Admin-only dialog to set the tags on one resource. Clicking a tag binds or
- * unbinds it immediately (no separate save step). Only tags of ``targetType``
- * are offered, enforcing "a tag may only tag its own type".
+ * Dialog to set the tags on one resource. Clicking a tag binds or unbinds it
+ * immediately (no separate save step). Only tags of ``targetType`` are offered,
+ * enforcing "a tag may only tag its own type".
 */
 export function TagPickerDialog({
  open,
@@ -1,7 +1,7 @@
 "use client";

 import { CheckIcon, ChevronDownIcon, ChevronUpIcon, SearchIcon } from "lucide-react";
-import { useEffect, useRef, useState } from "react";
+import { useEffect, useRef, useState, type ReactNode } from "react";

 import { Input } from "@/components/ui/input";
 import { useI18n } from "@/core/i18n/hooks";
@@ -31,12 +31,14 @@ export function TagSearchBar({
  tagIds,
  onTagIdsChange,
  className,
+  actions,
 }: {
  targetType: TagType;
  onSearchChange: (value: string) => void;
  tagIds: string[];
  onTagIdsChange: (value: string[]) => void;
  className?: string;
+  actions?: ReactNode;
 }) {
  const { t } = useI18n();
  const { data: tags } = useTags(targetType);
@@ -67,14 +69,31 @@ export function TagSearchBar({

  return (
    <div className={cn("flex flex-col gap-2.5", className)}>
-      <div className="relative">
-        <SearchIcon className="text-muted-foreground dark:text-[#60a5fa]/90 absolute left-2.5 top-1/2 size-4 -translate-y-1/2" />
-        <Input
-          value={input}
-          onChange={(e) => setInput(e.target.value)}
-          placeholder={t.adminTags.searchPlaceholder}
-          className="pl-8"
-        />
+      <div className="flex flex-col gap-2 sm:flex-row sm:items-center">
+        <div className="relative min-w-0 flex-1">
+          <SearchIcon className="text-muted-foreground dark:text-[#60a5fa]/90 absolute left-2.5 top-1/2 size-4 -translate-y-1/2" />
+          <Input
+            value={input}
+            onChange={(e) => setInput(e.target.value)}
+            placeholder={t.adminTags.searchPlaceholder}
+            className="pl-8"
+            name="tag-search"
+            // A `type="password"` field elsewhere on the page (e.g. the private
+            // square access gate) makes browsers / password managers pick the
+            // nearest text input as the "username" and autofill the account into
+            // it. Mark this search box so it is never treated as a credential
+            // field.
+            autoComplete="off"
+            data-1p-ignore
+            data-lpignore="true"
+            data-form-type="other"
+          />
+        </div>
+        {actions && (
+          <div className="flex w-full shrink-0 justify-end sm:w-auto">
+            {actions}
+          </div>
+        )}
      </div>

      {allTags.length > 0 && (
@@ -0,0 +1,56 @@
+"use client";
+
+import { LayoutGridIcon, ListIcon } from "lucide-react";
+
+import { Button } from "@/components/ui/button";
+import type { ViewMode } from "@/core/system-settings/api";
+import { cn } from "@/lib/utils";
+
+/**
+ * Compact card/list switch shown in the header of the skills and agents lists.
+ * Purely presentational — the parent owns the `value` (resolved from the user's
+ * local override or the admin default via `useViewMode`) and persists changes.
+ */
+export function ViewModeToggle({
+  value,
+  onChange,
+  className,
+}: {
+  value: ViewMode;
+  onChange: (mode: ViewMode) => void;
+  className?: string;
+}) {
+  return (
+    <div
+      className={cn(
+        "bg-muted/60 inline-flex items-center gap-0.5 rounded-md p-0.5",
+        className,
+      )}
+      role="group"
+      aria-label="展示模式"
+    >
+      <Button
+        type="button"
+        size="icon"
+        variant={value === "card" ? "default" : "ghost"}
+        className="size-7"
+        onClick={() => onChange("card")}
+        title="卡片模式"
+        aria-pressed={value === "card"}
+      >
+        <LayoutGridIcon className="size-3.5" />
+      </Button>
+      <Button
+        type="button"
+        size="icon"
+        variant={value === "list" ? "default" : "ghost"}
+        className="size-7"
+        onClick={() => onChange("list")}
+        title="列表模式"
+        aria-pressed={value === "list"}
+      >
+        <ListIcon className="size-3.5" />
+      </Button>
+    </div>
+  );
+}
@@ -6,10 +6,12 @@ import {
  BrainIcon,
  CalendarClockIcon,
  ChevronsUpDown,
+  DatabaseZapIcon,
  GaugeIcon,
  HistoryIcon,
  MessageSquareCodeIcon,
  MessageSquarePlusIcon,
+  ScrollTextIcon,
  Settings2Icon,
  SettingsIcon,
  ShieldCheckIcon,
@@ -36,6 +38,10 @@ import {
 import { getStoredAuth } from "@/core/auth";
 import { useI18n } from "@/core/i18n/hooks";
 import { useUnreadCount } from "@/core/notifications";
+import {
+  loadLogSystemSettings,
+  type LogSystemSettings,
+} from "@/core/system-settings/api";

 import { NotificationDialog } from "./notification-dialog";
 import { useNavigate } from "react-router-dom";
@@ -71,6 +77,7 @@ export function WorkspaceNavMenu() {
  >("appearance");
  const [notificationOpen, setNotificationOpen] = useState(false);
  const [mounted, setMounted] = useState(false);
+  const [logSystem, setLogSystem] = useState<LogSystemSettings | null>(null);
  const { open: isSidebarOpen } = useSidebar();
  const { t } = useI18n();
  const { data: unreadCount = 0 } = useUnreadCount();
@@ -79,6 +86,21 @@ export function WorkspaceNavMenu() {
    setMounted(true);
  }, []);

+  useEffect(() => {
+    if (!isAdmin) return;
+    let cancelled = false;
+    loadLogSystemSettings()
+      .then((settings) => {
+        if (!cancelled) setLogSystem(settings);
+      })
+      .catch(() => {
+        if (!cancelled) setLogSystem(null);
+      });
+    return () => {
+      cancelled = true;
+    };
+  }, [isAdmin]);
+
  return (
    <>
      <SettingsDialog
@@ -166,6 +188,16 @@ export function WorkspaceNavMenu() {
                      大模型调用统计
                    </DropdownMenuItem>
                  )}
+                  {isAdmin && (
+                    <DropdownMenuItem
+                      onClick={() =>
+                        navigate("/page/workspace/settings/checkpoint-migration")
+                      }
+                    >
+                      <DatabaseZapIcon />
+                      Checkpoint 迁移
+                    </DropdownMenuItem>
+                  )}
                  {isAdmin && (
                    <DropdownMenuItem
                      onClick={() => navigate("/page/workspace/admin")}
@@ -200,12 +232,24 @@ export function WorkspaceNavMenu() {
                      技能管理
                    </DropdownMenuItem>
                  )}
-                  {isAdmin && (
+                  <DropdownMenuItem
+                    onClick={() => navigate("/page/workspace/admin/tags")}
+                  >
+                    <TagsIcon />
+                    {t.adminTags.title}
+                  </DropdownMenuItem>
+                  {isAdmin && logSystem?.enabled && logSystem.url && (
                    <DropdownMenuItem
-                      onClick={() => navigate("/page/workspace/admin/tags")}
+                      onClick={() =>
+                        window.open(
+                          logSystem.url,
+                          "_blank",
+                          "noopener,noreferrer",
+                        )
+                      }
                    >
-                      <TagsIcon />
-                      {t.adminTags.title}
+                      <ScrollTextIcon />
+                      {logSystem.label || "日志系统"}
                    </DropdownMenuItem>
                  )}
                </DropdownMenuGroup>
@@ -12,6 +12,7 @@ import { useTheme } from "@/contexts/ThemeContext";
 import { cn } from "@/lib/utils";

 import { RecentChatList } from "./recent-chat-list";
+import { RecentRoundtableList } from "./recent-roundtable-list";
 import { RecentWritingList } from "./recent-writing-list";
 import { WorkspaceHeader } from "./workspace-header";
 import { WorkspaceNavChatList } from "./workspace-nav-chat-list";
@@ -46,6 +47,7 @@ export function WorkspaceSidebar({
        <SidebarContent>
          <WorkspaceNavChatList showCollapseTrigger={compactChrome} />
          {isSidebarOpen && <RecentChatList />}
+          {isSidebarOpen && <RecentRoundtableList />}
          {isSidebarOpen && <RecentWritingList />}
        </SidebarContent>
        {!compactChrome && (
@@ -184,6 +184,21 @@ export const ThemeProvider: React.FC<ThemeProviderProps> = ({ children }) => {
      : 'light'
    : readPersistedTheme();

+  useEffect(() => {
+    if (typeof document === 'undefined') return;
+
+    const root = document.documentElement;
+
+    if (theme === 'dark') {
+      root.setAttribute('theme-mode', 'dark');
+      root.classList.add('dark');
+      return;
+    }
+
+    root.removeAttribute('theme-mode');
+    root.classList.remove('dark');
+  }, [theme]);
+
  const toggleTheme = () => {
    setNextTheme(theme === 'dark' ? 'light' : 'dark');
    markExplicitChoice();
@@ -35,6 +35,144 @@ export interface AdminMemoryResponse {
  buckets: AdminMemoryBucket[];
 }

+export interface AdminUserQaItem {
+  run_id: string;
+  thread_id: string;
+  thread_title: string;
+  assistant_id: string;
+  status: string;
+  model_name: string;
+  question: string;
+  answer: string;
+  total_tokens: number;
+  created_at: string;
+  updated_at: string;
+}
+
+export interface AdminUserQaPageResponse {
+  user_id: string;
+  page: number;
+  page_size: number;
+  total: number;
+  items: AdminUserQaItem[];
+}
+
+export interface AdminLeaderboardUser {
+  user_id: string;
+  email: string;
+  system_role: string;
+  thread_count: number;
+  run_count: number;
+  qa_count: number;
+  llm_call_count: number;
+  tool_call_count: number;
+  skill_call_count: number;
+  total_tokens: number;
+  input_tokens: number;
+  output_tokens: number;
+  last_active_at: string;
+}
+
+export interface AdminLeaderboardSkill {
+  name: string;
+  call_count: number;
+  user_count: number;
+  success_count: number;
+  error_count: number;
+  avg_duration_ms: number;
+  last_used_at: string;
+}
+
+export interface AdminLeaderboardDimension {
+  name: string;
+  count: number;
+  user_count: number;
+  success_count: number;
+  error_count: number;
+  total_tokens: number;
+  last_seen_at: string;
+}
+
+export interface AdminLeaderboardQuestion {
+  text: string;
+  user_id: string;
+  email: string;
+  thread_id: string;
+  run_id: string;
+  asked_at: string;
+}
+
+export interface AdminLeaderboardTrendPoint {
+  date: string;
+  runs: number;
+  questions: number;
+  tokens: number;
+  users: number;
+}
+
+export interface AdminLeaderboardOverview {
+  total_users: number;
+  active_users: number;
+  total_threads: number;
+  total_runs: number;
+  total_questions: number;
+  total_tokens: number;
+  total_skill_calls: number;
+  total_tool_calls: number;
+  error_runs: number;
+}
+
+export interface AdminLeaderboardResponse {
+  range_days: number;
+  since: string;
+  until: string;
+  status?: "ready" | "running" | "refreshing";
+  generated_at?: string;
+  message?: string;
+  overview: AdminLeaderboardOverview;
+  users_by_activity: AdminLeaderboardUser[];
+  users_by_questions: AdminLeaderboardUser[];
+  users_by_tokens: AdminLeaderboardUser[];
+  skills: AdminLeaderboardSkill[];
+  tools: AdminLeaderboardSkill[];
+  models: AdminLeaderboardDimension[];
+  agents: AdminLeaderboardDimension[];
+  run_statuses: AdminLeaderboardDimension[];
+  recent_questions: AdminLeaderboardQuestion[];
+  frequent_questions: AdminLeaderboardQuestion[];
+  trends: AdminLeaderboardTrendPoint[];
+}
+
+export interface AdminUserAnalyticsResponse {
+  range_days: number;
+  since: string;
+  until: string;
+  user: AdminLeaderboardUser;
+  overview: AdminLeaderboardOverview;
+  skills: AdminLeaderboardSkill[];
+  tools: AdminLeaderboardSkill[];
+  models: AdminLeaderboardDimension[];
+  agents: AdminLeaderboardDimension[];
+  run_statuses: AdminLeaderboardDimension[];
+  recent_questions: AdminLeaderboardQuestion[];
+  trends: AdminLeaderboardTrendPoint[];
+}
+
+export interface AdminLeaderboardReportResponse {
+  report: string;
+  generated_at: string;
+  cached?: boolean;
+  model_name?: string | null;
+}
+
+export type AdminLeaderboardReportStreamEvent =
+  | { event: "meta"; data: { cached?: boolean; model_name?: string | null } }
+  | { event: "cached"; data: { report: string; generated_at?: string | null; model_name?: string | null } }
+  | { event: "thinking"; data: { chunk: string } }
+  | { event: "text"; data: { chunk: string } }
+  | { event: "done"; data: { cached?: boolean; generated_at?: string | null; model_name?: string | null; report?: string } }
+  | { event: "error"; data: { message: string } };
+
 const base = () => `${getBackendBaseURL()}/api/admin/users`;

 async function parse<T>(res: Response, what: string): Promise<T> {
@@ -64,6 +202,22 @@ export async function listUserThreadMessages(
  );
 }

+export async function listUserQa(
+  userId: string,
+  params: { page?: number; pageSize?: number; q?: string } = {},
+): Promise<AdminUserQaPageResponse> {
+  const search = new URLSearchParams({
+    page: String(params.page ?? 1),
+    page_size: String(params.pageSize ?? 20),
+  });
+  const query = (params.q ?? "").trim();
+  if (query) search.set("q", query);
+  return parse(
+    await apiFetch(`${base()}/${encodeURIComponent(userId)}/qa?${search}`),
+    "Failed to load user Q&A",
+  );
+}
+
 export async function getUserMemory(
  userId: string,
 ): Promise<AdminMemoryResponse> {
@@ -73,6 +227,133 @@ export async function getUserMemory(
  );
 }

+export async function getUserLeaderboard(
+  range: {
+    since: string;
+    until: string;
+    days?: number;
+  },
+  limit = 20,
+): Promise<AdminLeaderboardResponse> {
+  const params = new URLSearchParams({
+    days: String(range.days ?? 30),
+    since: range.since,
+    until: range.until,
+    limit: String(limit),
+  });
+  return parse(
+    await apiFetch(`${base()}/leaderboard?${params}`),
+    "Failed to load leaderboard",
+  );
+}
+
+export async function getUserAnalytics(
+  userId: string,
+  range: { since: string; until: string; days?: number },
+  limit = 20,
+): Promise<AdminUserAnalyticsResponse> {
+  const params = new URLSearchParams({
+    days: String(range.days ?? 30),
+    since: range.since,
+    until: range.until,
+    limit: String(limit),
+  });
+  return parse(
+    await apiFetch(`${base()}/${encodeURIComponent(userId)}/analytics?${params}`),
+    "Failed to load user analytics",
+  );
+}
+
+export async function generateUserLeaderboardReport(
+  range: { since: string; until: string; days?: number },
+  limit = 30,
+  modelName?: string,
+): Promise<AdminLeaderboardReportResponse> {
+  const params = new URLSearchParams({
+    days: String(range.days ?? 30),
+    since: range.since,
+    until: range.until,
+    limit: String(limit),
+  });
+  if (modelName) params.set("model_name", modelName);
+  return parse(
+    await apiFetch(`${base()}/leaderboard/report?${params}`, {
+      method: "POST",
+    }),
+    "Failed to generate leaderboard report",
+  );
+}
+
+function parseSseFrame(frame: string): AdminLeaderboardReportStreamEvent | null {
+  let event = "message";
+  const dataLines: string[] = [];
+  for (const rawLine of frame.split(/\r?\n/)) {
+    const line = rawLine.trimEnd();
+    if (!line || line.startsWith(":")) continue;
+    if (line.startsWith("event:")) {
+      event = line.slice("event:".length).trim();
+    } else if (line.startsWith("data:")) {
+      dataLines.push(line.slice("data:".length).trimStart());
+    }
+  }
+  if (!dataLines.length) return null;
+  const data = JSON.parse(dataLines.join("\n")) as AdminLeaderboardReportStreamEvent["data"];
+  return { event, data } as AdminLeaderboardReportStreamEvent;
+}
+
+export async function streamUserLeaderboardReport({
+  range,
+  limit = 30,
+  modelName,
+  signal,
+  onEvent,
+}: {
+  range: { since: string; until: string; days?: number };
+  limit?: number;
+  modelName?: string;
+  signal?: AbortSignal;
+  onEvent: (event: AdminLeaderboardReportStreamEvent) => void;
+}) {
+  const params = new URLSearchParams({
+    days: String(range.days ?? 30),
+    since: range.since,
+    until: range.until,
+    limit: String(limit),
+  });
+  if (modelName) params.set("model_name", modelName);
+  const response = await apiFetch(`${base()}/leaderboard/report/stream?${params}`, {
+    method: "POST",
+    signal,
+  });
+  if (!response.ok) {
+    const err = (await response.json().catch(() => ({}))) as { detail?: string };
+    throw new Error(err.detail ?? `Failed to stream leaderboard report (HTTP ${response.status})`);
+  }
+  if (!response.body) {
+    throw new Error("当前浏览器不支持流式报告读取");
+  }
+
+  const reader = response.body.getReader();
+  const decoder = new TextDecoder("utf-8");
+  let buffer = "";
+  for (;;) {
+    const { done, value } = await reader.read();
+    buffer += decoder.decode(value ?? new Uint8Array(), { stream: !done });
+    const frames = buffer.split(/\r?\n\r?\n/);
+    buffer = frames.pop() ?? "";
+    for (const frame of frames) {
+      const parsed = parseSseFrame(frame);
+      if (parsed) onEvent(parsed);
+    }
+    if (done) break;
+  }
+  const tail = buffer.trim();
+  if (tail) {
+    const parsed = parseSseFrame(tail);
+    if (parsed) onEvent(parsed);
+  }
+}
+
 export async function addAdminMemoryEntry(
  userId: string,
  content: string,
@@ -5,7 +5,11 @@ import {
  addAdminV1Fact,
  deleteAdminMemoryEntry,
  deleteAdminV1Fact,
+  generateUserLeaderboardReport,
  getUserMemory,
+  getUserAnalytics,
+  getUserLeaderboard,
+  listUserQa,
  listUserThreadMessages,
  listUserThreads,
  replaceAdminMemoryEntry,
@@ -13,6 +17,56 @@ import {
  updateAdminV1Section,
 } from "./api";

+export function useUserLeaderboard(
+  range: {
+    since: string;
+    until: string;
+    days?: number;
+  },
+  limit = 20,
+) {
+  return useQuery({
+    queryKey: [
+      "admin-activity",
+      "leaderboard",
+      range.since,
+      range.until,
+      limit,
+    ],
+    queryFn: () => getUserLeaderboard(range, limit),
+    refetchInterval: (query) => {
+      const status = query.state.data?.status;
+      return status === "running" || status === "refreshing" ? 3000 : false;
+    },
+  });
+}
+
+export function useUserAnalytics(
+  userId: string | null,
+  range: { since: string; until: string; days?: number },
+  limit = 20,
+) {
+  return useQuery({
+    queryKey: ["admin-activity", "analytics", userId, range.since, range.until, limit],
+    queryFn: () => getUserAnalytics(userId!, range, limit),
+    enabled: !!userId,
+  });
+}
+
+export function useGenerateUserLeaderboardReport() {
+  return useMutation({
+    mutationFn: ({
+      range,
+      limit,
+      modelName,
+    }: {
+      range: { since: string; until: string; days?: number };
+      limit?: number;
+      modelName?: string;
+    }) => generateUserLeaderboardReport(range, limit ?? 30, modelName),
+  });
+}
+
 /** Threads owned by a given user. Disabled until a user is picked. */
 export function useUserThreads(userId: string | null) {
  return useQuery({
@@ -22,6 +76,17 @@ export function useUserThreads(userId: string | null) {
  });
 }

+export function useUserQa(
+  userId: string | null,
+  params: { page: number; pageSize: number; q?: string },
+) {
+  return useQuery({
+    queryKey: ["admin-activity", "qa", userId, params.page, params.pageSize, params.q ?? ""],
+    queryFn: () => listUserQa(userId!, params),
+    enabled: !!userId,
+  });
+}
+
 /** Messages of a given thread. Disabled until a thread is picked. */
 export function useUserThreadMessages(
  userId: string | null,
@@ -2,11 +2,13 @@ import { getBackendBaseURL } from "@/core/config";
 import { apiFetch } from "@/core/api";

 import type {
-  Agent,
-  AgentSelectorResponse,
-  CreateAgentRequest,
-  UpdateAgentRequest,
-} from "./types";
+  Agent,
+  AgentSelectorResponse,
+  AgentSort,
+  CreateAgentRequest,
+  PaginatedAgents,
+  UpdateAgentRequest,
+} from "./types";

 const BACKEND_UNAVAILABLE_STATUSES = new Set([502, 503, 504]);

@@ -23,13 +25,27 @@ export class AgentNameCheckError extends Error {
 export interface ListAgentsParams {
  search?: string;
  tagIds?: string[];
-}
+  /** Pagination scope. Omit for the legacy combined-visibility list. */
+  scope?: "mine" | "square";
+  /** 1-based page index. Providing this (or scope) enables server-side pagination. */
+  page?: number;
+  pageSize?: number;
+  sort?: AgentSort;
+}

-export async function listAgents(params: ListAgentsParams = {}): Promise<Agent[]> {
+function buildAgentsQuery(params: ListAgentsParams): string {
  const qs = new URLSearchParams();
  if (params.search) qs.set("search", params.search);
  for (const id of params.tagIds ?? []) qs.append("tag_ids", id);
-  const query = qs.toString();
+  if (params.scope) qs.set("scope", params.scope);
+  if (params.page != null) qs.set("page", String(params.page));
+  if (params.pageSize != null) qs.set("page_size", String(params.pageSize));
+  if (params.sort) qs.set("sort", params.sort);
+  return qs.toString();
+}
+
+export async function listAgents(params: ListAgentsParams = {}): Promise<Agent[]> {
+  const query = buildAgentsQuery(params);
  const res = await apiFetch(
    `${getBackendBaseURL()}/api/agents${query ? `?${query}` : ""}`,
  );
@@ -38,6 +54,29 @@ export async function listAgents(params: ListAgentsParams = {}): Promise<Agent[]
  return data.agents;
 }

+/** Like {@link listAgents} but returns the pagination envelope (total/page). */
+export async function listAgentsPaginated(
+  params: ListAgentsParams = {},
+): Promise<PaginatedAgents> {
+  const query = buildAgentsQuery(params);
+  const res = await apiFetch(
+    `${getBackendBaseURL()}/api/agents${query ? `?${query}` : ""}`,
+  );
+  if (!res.ok) throw new Error(`Failed to load agents: ${res.statusText}`);
+  const data = (await res.json()) as {
+    agents: Agent[];
+    total?: number;
+    page?: number;
+    page_size?: number;
+  };
+  return {
+    agents: data.agents,
+    total: data.total ?? data.agents.length,
+    page: data.page ?? params.page ?? 1,
+    pageSize: data.page_size ?? params.pageSize ?? data.agents.length,
+  };
+}
+
 export async function listAllAgentsAdmin(): Promise<Agent[]> {
  const res = await apiFetch(`${getBackendBaseURL()}/api/agents?admin=true`);
  if (!res.ok) {
@@ -90,13 +129,13 @@ export async function deleteAgent(id: string): Promise<void> {
  if (!res.ok) throw new Error(`Failed to delete agent: ${res.statusText}`);
 }

-export async function getAgentSelector(): Promise<AgentSelectorResponse> {
+export async function getAgentSelector(): Promise<AgentSelectorResponse> {
  const res = await apiFetch(`${getBackendBaseURL()}/api/agents/selector`);
  if (!res.ok) throw new Error(`Failed to load agent selector: ${res.statusText}`);
  return res.json() as Promise<AgentSelectorResponse>;
-}
-
-export async function favoriteAgent(id: string): Promise<void> {
+}
+
+export async function favoriteAgent(id: string): Promise<void> {
  const res = await apiFetch(`${getBackendBaseURL()}/api/agents/${id}/favorite`, {
    method: "POST",
  });
@@ -106,15 +145,35 @@ export async function favoriteAgent(id: string): Promise<void> {
  }
 }

-export async function unfavoriteAgent(id: string): Promise<void> {
+export async function unfavoriteAgent(id: string): Promise<void> {
  const res = await apiFetch(`${getBackendBaseURL()}/api/agents/${id}/favorite`, {
    method: "DELETE",
  });
  if (!res.ok) {
    const err = (await res.json().catch(() => ({}))) as { detail?: string };
    throw new Error(err.detail ?? `Failed to unfavorite agent: ${res.statusText}`);
-  }
-}
+  }
+}
+
+export async function pinAgent(id: string): Promise<void> {
+  const res = await apiFetch(`${getBackendBaseURL()}/api/agents/${id}/pin`, {
+    method: "POST",
+  });
+  if (!res.ok) {
+    const err = (await res.json().catch(() => ({}))) as { detail?: string };
+    throw new Error(err.detail ?? `Failed to pin agent: ${res.statusText}`);
+  }
+}
+
+export async function unpinAgent(id: string): Promise<void> {
+  const res = await apiFetch(`${getBackendBaseURL()}/api/agents/${id}/pin`, {
+    method: "DELETE",
+  });
+  if (!res.ok) {
+    const err = (await res.json().catch(() => ({}))) as { detail?: string };
+    throw new Error(err.detail ?? `Failed to unpin agent: ${res.statusText}`);
+  }
+}

 export async function reorderFeaturedAgents(agentIds: string[]): Promise<void> {
  const res = await apiFetch(
@@ -152,6 +211,54 @@ export async function listPrivateAgents(password: string): Promise<Agent[]> {
  return data.agents;
 }

+export interface ListPrivateAgentsParams {
+  password: string;
+  search?: string;
+  tagIds?: string[];
+  page?: number;
+  pageSize?: number;
+  sort?: AgentSort;
+}
+
+/** Paginated private-square listing (password-gated). */
+export async function listPrivateAgentsPaginated(
+  params: ListPrivateAgentsParams,
+): Promise<PaginatedAgents> {
+  const res = await apiFetch(
+    `${getBackendBaseURL()}/api/agents/private-square/list`,
+    {
+      method: "POST",
+      headers: { "Content-Type": "application/json" },
+      body: JSON.stringify({
+        password: params.password,
+        search: params.search || undefined,
+        tag_ids: params.tagIds && params.tagIds.length ? params.tagIds : undefined,
+        page: params.page,
+        page_size: params.pageSize,
+        sort: params.sort,
+      }),
+    },
+  );
+  if (!res.ok) {
+    const err = (await res.json().catch(() => ({}))) as { detail?: string };
+    throw new Error(
+      err.detail ?? `Failed to load private agents: ${res.statusText}`,
+    );
+  }
+  const data = (await res.json()) as {
+    agents: Agent[];
+    total?: number;
+    page?: number;
+    page_size?: number;
+  };
+  return {
+    agents: data.agents,
+    total: data.total ?? data.agents.length,
+    page: data.page ?? params.page ?? 1,
+    pageSize: data.page_size ?? params.pageSize ?? data.agents.length,
+  };
+}
+
 export async function setAgentPrivate(
  id: string,
  isPrivate: boolean,
@@ -3,25 +3,55 @@ import {
  useMutation,
  useQuery,
  useQueryClient,
-} from "@tanstack/react-query";
-
-import {
+} from "@tanstack/react-query";
+
+import {
  adminSyncAgentSkills,
  createAgent,
  deleteAgent,
  favoriteAgent,
  getAgent,
  getAgentSelector,
-  listAgents,
-  listAllAgentsAdmin,
-  listPrivateAgents,
-  reorderFeaturedAgents,
-  setAgentFeatured,
-  setAgentPrivate,
-  unfavoriteAgent,
-  updateAgent,
-} from "./api";
-import type { Agent, CreateAgentRequest, UpdateAgentRequest } from "./types";
+  listAgents,
+  listAgentsPaginated,
+  listAllAgentsAdmin,
+  listPrivateAgents,
+  listPrivateAgentsPaginated,
+  pinAgent,
+  reorderFeaturedAgents,
+  setAgentFeatured,
+  setAgentPrivate,
+  unfavoriteAgent,
+  unpinAgent,
+  updateAgent,
+} from "./api";
+import type {
+  Agent,
+  AgentSort,
+  CreateAgentRequest,
+  PaginatedAgents,
+  UpdateAgentRequest,
+} from "./types";
+
+/** A cached agent listing is either a plain ``Agent[]`` (legacy ``useAgents``)
+ * or the paginated ``{ agents, total, ... }`` envelope. Mutators patch both. */
+type CachedAgents = Agent[] | PaginatedAgents | undefined;
+
+function isPaginated(value: CachedAgents): value is PaginatedAgents {
+  return !!value && !Array.isArray(value) && Array.isArray(value.agents);
+}
+
+/** Apply ``map`` to every agent inside whatever listing shape is cached. */
+function mapCachedAgents(
+  queryClient: ReturnType<typeof useQueryClient>,
+  map: (a: Agent) => Agent,
+) {
+  queryClient.setQueriesData<CachedAgents>({ queryKey: ["agents"] }, (old) => {
+    if (Array.isArray(old)) return old.map(map);
+    if (isPaginated(old)) return { ...old, agents: old.agents.map(map) };
+    return old;
+  });
+}

 /** Patch an updated agent into every cached agent listing immediately so
 * cards re-render before the background refetch finishes. Without this the
@@ -32,13 +62,7 @@ function applyAgentToCache(
  queryClient: ReturnType<typeof useQueryClient>,
  next: Agent,
 ) {
-  queryClient.setQueriesData<Agent[] | undefined>(
-    { queryKey: ["agents"] },
-    (old) => {
-      if (!Array.isArray(old)) return old;
-      return old.map((a) => (a.id === next.id ? { ...a, ...next } : a));
-    },
-  );
+  mapCachedAgents(queryClient, (a) => (a.id === next.id ? { ...a, ...next } : a));
 }

 export function useAgents(params: { search?: string; tagIds?: string[] } = {}) {
@@ -52,6 +76,45 @@ export function useAgents(params: { search?: string; tagIds?: string[] } = {}) {
  return { agents: data ?? [], isLoading, error };
 }

+/** Server-side paginated agent listing for one gallery tab (scope). Returns
+ * the page of agents plus the total count for the "共 N 个" header. */
+export function useAgentsPaginated(params: {
+  scope: "mine" | "square";
+  search?: string;
+  tagIds?: string[];
+  sort?: AgentSort;
+  page: number;
+  pageSize: number;
+  enabled?: boolean;
+}) {
+  const { scope, page, pageSize, enabled = true } = params;
+  const search = params.search ?? "";
+  const tagIds = params.tagIds ?? [];
+  const sort = params.sort ?? "time_desc";
+  const { data, isLoading, error } = useQuery({
+    queryKey: [
+      "agents",
+      "paginated",
+      scope,
+      search,
+      [...tagIds].sort(),
+      sort,
+      page,
+      pageSize,
+    ],
+    queryFn: () =>
+      listAgentsPaginated({ scope, search, tagIds, sort, page, pageSize }),
+    enabled,
+    placeholderData: keepPreviousData,
+  });
+  return {
+    agents: data?.agents ?? [],
+    total: data?.total ?? 0,
+    isLoading,
+    error,
+  };
+}
+
 /**
 * Admin-only listing — returns every agent including unpublished agents owned
 * by other users and private-square entries. Caller must be ``system_role
@@ -117,20 +180,14 @@ export function useDeleteAgent() {
 /** Toggle a user's favorite (收藏) on an agent, with an optimistic flip of
 * ``is_favorite`` across every cached agent listing + detail so the star
 * reacts instantly before the round-trip completes. */
-export function useToggleAgentFavorite() {
+export function useToggleAgentFavorite() {
  const queryClient = useQueryClient();
  return useMutation({
    mutationFn: ({ id, favorite }: { id: string; favorite: boolean }) =>
      favorite ? favoriteAgent(id) : unfavoriteAgent(id),
    onMutate: ({ id, favorite }) => {
-      queryClient.setQueriesData<Agent[] | undefined>(
-        { queryKey: ["agents"] },
-        (old) =>
-          Array.isArray(old)
-            ? old.map((a) =>
-                a.id === id ? { ...a, is_favorite: favorite } : a,
-              )
-            : old,
+      mapCachedAgents(queryClient, (a) =>
+        a.id === id ? { ...a, is_favorite: favorite } : a,
      );
      queryClient.setQueryData<Agent | undefined>(["agents", id], (old) =>
        old ? { ...old, is_favorite: favorite } : old,
@@ -139,10 +196,30 @@ export function useToggleAgentFavorite() {
    onSettled: () => {
      void queryClient.invalidateQueries({ queryKey: ["agents"] });
    },
-  });
-}
-
-export function useAgentSelector() {
+  });
+}
+
+export function useToggleAgentPin() {
+  const queryClient = useQueryClient();
+  return useMutation({
+    mutationFn: ({ id, pinned }: { id: string; pinned: boolean }) =>
+      pinned ? pinAgent(id) : unpinAgent(id),
+    onMutate: ({ id, pinned }) => {
+      mapCachedAgents(queryClient, (a) =>
+        a.id === id ? { ...a, is_pinned: pinned } : a,
+      );
+      queryClient.setQueryData<Agent | undefined>(["agents", id], (old) =>
+        old ? { ...old, is_pinned: pinned } : old,
+      );
+    },
+    onSuccess: async () => {
+      await queryClient.invalidateQueries({ queryKey: ["agents"] });
+      await queryClient.refetchQueries({ queryKey: ["agents"], type: "active" });
+    },
+  });
+}
+
+export function useAgentSelector() {
  const { data, isLoading, error } = useQuery({
    queryKey: ["agents", "selector"],
    queryFn: () => getAgentSelector(),
@@ -153,9 +230,9 @@ export function useAgentSelector() {
    isLoading,
    error,
  };
-}
-
-function invalidateAgentQueries(queryClient: ReturnType<typeof useQueryClient>) {
+}
+
+function invalidateAgentQueries(queryClient: ReturnType<typeof useQueryClient>) {
  void queryClient.invalidateQueries({ queryKey: ["agents"] });
 }

@@ -196,6 +273,58 @@ export function usePrivateAgents(password: string | null) {
  return { agents: data ?? [], isLoading, error, refetch };
 }

+/** Paginated variant of {@link usePrivateAgents} — one page of the
+ * password-gated private square plus the total count. */
+export function usePrivateAgentsPaginated(
+  password: string | null,
+  params: {
+    search?: string;
+    tagIds?: string[];
+    sort?: AgentSort;
+    page: number;
+    pageSize: number;
+    enabled?: boolean;
+  },
+) {
+  const { page, pageSize, enabled = true } = params;
+  const search = params.search ?? "";
+  const tagIds = params.tagIds ?? [];
+  const sort = params.sort ?? "time_desc";
+  const { data, isLoading, error, refetch } = useQuery({
+    queryKey: [
+      "agents",
+      "private-square",
+      password ?? "",
+      "paginated",
+      search,
+      [...tagIds].sort(),
+      sort,
+      page,
+      pageSize,
+    ],
+    queryFn: () =>
+      listPrivateAgentsPaginated({
+        password: password!,
+        search,
+        tagIds,
+        sort,
+        page,
+        pageSize,
+      }),
+    enabled: !!password && enabled,
+    staleTime: 30_000,
+    retry: false,
+    placeholderData: keepPreviousData,
+  });
+  return {
+    agents: data?.agents ?? [],
+    total: data?.total ?? 0,
+    isLoading,
+    error,
+    refetch,
+  };
+}
+
 export function useSetAgentPrivate() {
  const queryClient = useQueryClient();
  return useMutation({
@@ -1,6 +1,6 @@
 import type { Tag } from "@/core/tags";

-export interface Agent {
+export interface Agent {
  id: string;
  name: string;
  description: string;
@@ -17,11 +17,22 @@ export interface Agent {
  tags?: Tag[];
  featured_order?: number | null;
  /** Whether the current user has favorited (收藏) this agent. */
-  is_favorite?: boolean;
-}
+  is_favorite?: boolean;
+  is_pinned?: boolean;
+}
+
+export type AgentSort = "time_desc" | "time_asc" | "updated_desc" | "updated_asc" | "name_asc" | "name_desc";
+
+export interface AgentSelectorResponse {
+  agents: Agent[];
+}

-export interface AgentSelectorResponse {
+/** Pagination envelope returned by the server-side paginated agent listings. */
+export interface PaginatedAgents {
  agents: Agent[];
+  total: number;
+  page: number;
+  pageSize: number;
 }

 export interface CreateAgentRequest {
@@ -1,4 +1,8 @@
-import { getAuthorizationHeaderValue } from "@/core/auth";
+import {
+  clearStoredAuth,
+  getAuthorizationHeaderValue,
+  getStoredAuth,
+} from "@/core/auth";
 import { withCsrfHeaders } from "./csrf";

 function withAuthHeaders(headers?: HeadersInit): Headers {
@@ -8,13 +12,40 @@ function withAuthHeaders(headers?: HeadersInit): Headers {
    next.set("Authorization", authHeader);
  }
  return next;
-}
-
-export function apiFetch(input: RequestInfo | URL, init?: RequestInit) {
-  return fetch(input, {
+}
+
+function requestUrl(input: RequestInfo | URL): string {
+  if (typeof input === "string") return input;
+  if (input instanceof URL) return input.href;
+  return (input as Request).url ?? "";
+}
+
+export async function apiFetch(input: RequestInfo | URL, init?: RequestInit) {
+  const response = await fetch(input, {
    ...init,
    credentials: init?.credentials ?? "include",
    headers: withAuthHeaders(init?.headers),
  });
+
+  // Session is considered lost ONLY when the backend actually answers 401.
+  // (Previously a stray localStorage change could log the user out client-side
+  // even though the session was still valid.) Auth endpoints are excluded so a
+  // failed/transient login attempt never wipes state, and we only act when we
+  // believed we were logged in — avoiding redirect loops on the login page.
+  if (response.status === 401) {
+    const url = requestUrl(input);
+    const isAuthEndpoint = url.includes("/api/v1/auth/");
+    if (!isAuthEndpoint && getStoredAuth()) {
+      clearStoredAuth();
+      if (
+        typeof window !== "undefined" &&
+        !window.location.hash.startsWith("#/login")
+      ) {
+        window.location.replace("#/login");
+      }
+    }
+  }
+
+  return response;
 }
-
+
@@ -0,0 +1,93 @@
+import { apiFetch } from "@/core/api/fetch-client";
+import { getBackendBaseURL } from "@/core/config";
+import { downloadMarkdownAsDocx } from "@/core/scheduled-tasks/markdown-docx";
+
+function filenameFromContentDisposition(header: string | null): string | null {
+  if (!header) return null;
+  const star = /filename\*=(?:UTF-8'')?([^;]+)/i.exec(header);
+  if (star) {
+    const raw = star[1].replace(/["']/g, "").trim();
+    try {
+      return decodeURIComponent(raw);
+    } catch {
+      return raw;
+    }
+  }
+  const plain = /filename="?([^";\n]+)"?/i.exec(header);
+  return plain ? plain[1].trim() : null;
+}
+
+function sanitizeFallbackFilename(title: string | undefined): string {
+  const base = (title?.trim() || "document").replace(/[<>:"/\\|?*\x00-\x1f]+/g, "_");
+  return base.toLowerCase().endsWith(".docx") ? base : `${base}.docx`;
+}
+
+async function downloadBlobResponse(response: Response, fallbackFilename: string) {
+  if (!response.ok) {
+    const error = await response
+      .json()
+      .catch(() => ({ detail: "导出 Word 失败" }));
+    const detail = error.detail;
+    if (typeof detail === "string") throw new Error(detail);
+    throw new Error("导出 Word 失败");
+  }
+
+  const blob = await response.blob();
+  const filename =
+    filenameFromContentDisposition(response.headers.get("Content-Disposition")) ??
+    fallbackFilename;
+  const url = URL.createObjectURL(blob);
+  const anchor = document.createElement("a");
+  anchor.href = url;
+  anchor.download = filename;
+  anchor.rel = "noopener";
+  document.body.appendChild(anchor);
+  anchor.click();
+  anchor.remove();
+  window.setTimeout(() => URL.revokeObjectURL(url), 30_000);
+}
+
+/**
+ * 通用 Markdown → Word 导出（Gateway `writing` 路由，与 `/api/writing/rewrite` 同级）。
+ *
+ *   POST /api/writing/export/docx
+ *   Body: { title?: string, markdown: string }
+ *
+ * 返回 `application/vnd.openxmlformats-officedocument.wordprocessingml.document`，
+ * 文件名在 `Content-Disposition` 中。
+ */
+export async function downloadMarkdownDocxFromBackend(options: {
+  title?: string;
+  markdown: string;
+}): Promise<void> {
+  const markdown = options.markdown.trim();
+  if (!markdown) {
+    throw new Error("文档内容为空");
+  }
+
+  const fallbackFilename = sanitizeFallbackFilename(options.title);
+
+  try {
+    const response = await apiFetch(`${getBackendBaseURL()}/api/writing/export/docx`, {
+      method: "POST",
+      headers: { "Content-Type": "application/json" },
+      body: JSON.stringify({
+        title: options.title?.trim() || undefined,
+        markdown,
+      }),
+    });
+
+    if (response.status === 404) {
+      await downloadMarkdownAsDocx(markdown, options.title?.trim() || "document", options.title);
+      return;
+    }
+
+    await downloadBlobResponse(response, fallbackFilename);
+  } catch (err) {
+    if (err instanceof TypeError) {
+      await downloadMarkdownAsDocx(markdown, options.title?.trim() || "document", options.title);
+      return;
+    }
+    throw err;
+  }
+}
@@ -60,7 +60,12 @@ export async function downloadArtifactFile({
    filenameFromContentDisposition(cd) ?? getFileName(filepath);

  const blob = await res.blob();
-  const objectUrl = URL.createObjectURL(blob);
+  const contentType = res.headers.get("Content-Type")?.split(";")[0]?.trim();
+  const downloadBlob =
+    contentType && blob.type !== contentType
+      ? new Blob([await blob.arrayBuffer()], { type: contentType })
+      : blob;
+  const objectUrl = URL.createObjectURL(downloadBlob);
  const a = document.createElement("a");
  a.href = objectUrl;
  a.download = filename;
@@ -3,9 +3,24 @@ import { useMemo } from "react";

 import { useThread } from "@/components/workspace/messages/context";

+import { isImageFile } from "../utils/files";
+
 import { loadArtifactContent, loadArtifactContentFromToolCall } from "./loader";
 import { updateArtifactContent } from "./api";

+function isWriteFileStreamingUrl(filepath: string): boolean {
+  if (!filepath.startsWith("write-file:")) {
+    return false;
+  }
+  try {
+    const url = new URL(filepath);
+    const path = decodeURIComponent(url.pathname);
+    return !isImageFile(path);
+  } catch {
+    return true;
+  }
+}
+
 function hasToolResult(thread: ReturnType<typeof useThread>["thread"], toolCallId?: string) {
  if (!toolCallId) {
    return false;
@@ -70,16 +85,16 @@ export function useArtifactContent({
  threadId: string;
  enabled?: boolean;
 }) {
-  const isWriteFile = useMemo(() => {
-    return filepath.startsWith("write-file:");
+  const useWriteFileStreaming = useMemo(() => {
+    return isWriteFileStreamingUrl(filepath);
  }, [filepath]);
  const { thread, isMock, publicShareCode } = useThread();
  const content = useMemo(() => {
-    if (isWriteFile) {
+    if (useWriteFileStreaming) {
      return loadArtifactContentFromToolCall({ url: filepath, thread });
    }
    return null;
-  }, [filepath, isWriteFile, thread]);
+  }, [filepath, useWriteFileStreaming, thread]);

  const { data, isLoading, error } = useQuery({
    queryKey: ["artifact", filepath, threadId, isMock, publicShareCode],
@@ -92,7 +107,7 @@ export function useArtifactContent({
    staleTime: 5 * 60 * 1000,
  });
  const pendingEdit = useMemo(() => {
-    if (isWriteFile) {
+    if (useWriteFileStreaming) {
      return null;
    }
    return applyPendingTextEdit({
@@ -100,11 +115,13 @@ export function useArtifactContent({
      filepath,
      thread,
    });
-  }, [data?.content, filepath, isWriteFile, thread]);
+  }, [data?.content, filepath, useWriteFileStreaming, thread]);

  return {
-    content: isWriteFile ? content : (pendingEdit?.content ?? data?.content),
-    url: isWriteFile ? undefined : data?.url,
+    content: useWriteFileStreaming
+      ? content
+      : (pendingEdit?.content ?? data?.content),
+    url: useWriteFileStreaming ? undefined : data?.url,
    isLoading,
    isApplyingEdit: pendingEdit?.kind === "editing",
    error,
@@ -9,6 +9,8 @@ export interface UserListItem {
  system_role: "admin" | "user";
  skill_count: number;
  agent_count: number;
+  /** 问答次数：用户提问的次数（一次提问算一次）。 */
+  qa_count: number;
 }

 export async function listAllUsers(): Promise<UserListItem[]> {
@@ -6,13 +6,7 @@ import { toast } from "sonner";
 import { getStoredAuth } from "@/core/auth";

 const AUTH_STORAGE_KEY = "deerflow.auth";
-
-// 防抖窗口:跨标签页登录/重写 auth 常常在极短时间内连发多个 storage 事件
-// (例如先写 token、再写用户信息)。等它"落定"再判断,避免抖动期的中间态
-// (短暂 null / 半写状态)误触发动作。
 const SETTLE_DELAY_MS = 1200;
-
-// 提示 toast 的稳定 id —— 同一次身份变化只保留一条,避免连发事件刷屏。
 const IDENTITY_TOAST_ID = "auth-identity-changed";

 function readUserId(): string | null {
@@ -20,23 +14,8 @@ function readUserId(): string | null {
 }

 /**
- * Mount once at the app root. Watches `localStorage["deerflow.auth"]` for
- * cross-tab changes.
- *
- * 背景:`deerflow.auth` 在同源所有标签页之间共享。某个标签页登录/重写它时,
- * 其它标签页仍持有旧用户的内存态(会话列表、thread id、以及多智能体会商这类
- * 纯内存的页面状态),与新 token 不一致,可能在"新对话"等操作上 404。
- *
- * 旧实现:只要检测到 user_id 变化就 `window.location.reload()`。这会把**正在
- * 使用的标签页**(例如正在跑多智能体会商第二步的那个)整页刷新,内存态全丢、
- * 步骤回到第一步 —— 用户复制链接到新标签页打开(新标签页可能以不同/默认用户
- * 重新登录并改写共享 auth)就会触发,体验很差。
- *
- * 现实现(方案 1,收敛粗暴刷新):
- *  - **真·退出登录**(auth 变为 null)→ 仍然跳登录页并刷新(本就该重新登录)。
- *  - **出现不同的非空用户**(另一个标签页登录成别的身份)→ **不再自动整页刷新**,
- *    改为弹一条常驻提示,把"是否刷新同步"的决定权交给用户,避免冲掉正在进行的工作。
- *  - 防抖 + 落定后二次校验,过滤掉同用户重写 / 抖动中间态带来的误触发。
+ * Mount once at the app root. Watches localStorage auth changes from other
+ * tabs and lets the user decide when to refresh on account switches.
 */
 export function AuthSyncWatcher() {
  const lastUserIdRef = useRef<string | null>(readUserId());
@@ -44,26 +23,18 @@ export function AuthSyncWatcher() {
  useEffect(() => {
    let settleTimer: ReturnType<typeof setTimeout> | null = null;

-    // storage 事件落定后再判断当前的真实身份并决定动作。
    function evaluateSettledIdentity() {
      const nextUserId = readUserId();
      if (nextUserId === lastUserIdRef.current) {
-        // 同用户重写,或抖动后又回到原身份 —— 无需任何动作。
        return;
      }

+      lastUserIdRef.current = nextUserId;
+
      if (nextUserId === null) {
-        // 另一个标签页退出登录(或清空了 auth)→ 本标签页也该回到登录页。
-        lastUserIdRef.current = null;
-        window.location.replace("#/login");
-        window.location.reload();
        return;
      }

-      // 出现了不同的非空用户。共享 auth 已被改成别的身份,继续在本标签页发请求
-      // 可能 404 / 鉴权失败,但**不**强制刷新 —— 用户可能正在本标签页干活
-      // (如多智能体会商),由用户自己决定何时刷新同步。
-      lastUserIdRef.current = nextUserId;
      toast.warning("检测到账号在其它标签页发生变化", {
        id: IDENTITY_TOAST_ID,
        description: "当前标签页仍是原会话。如需与新账号同步,请刷新页面。",
@@ -76,8 +47,9 @@ export function AuthSyncWatcher() {
    }

    function handleStorage(event: StorageEvent) {
-      // 只关心 auth 键的变化;event.key === null 表示 localStorage 被整体清空。
-      if (event.key !== null && event.key !== AUTH_STORAGE_KEY) {
+      // Ignore unrelated keys and localStorage.clear(). Backend session loss is
+      // handled centrally through 401 responses.
+      if (event.key !== AUTH_STORAGE_KEY) {
        return;
      }
      if (settleTimer) {
@@ -5,7 +5,7 @@ const CONSUMER_URL = import.meta.env.VITE_AIPI_CONSUMER_URL || "";
 export const TOOLS_TOKEN_STORAGE_KEY = "tools_token";
 export const EXTERNAL_USER_ID_STORAGE_KEY = "userId";
 export const EXTERNAL_USER_INFO_STORAGE_KEY = "userInfo";
-export const GENERAL_QA_ROUTE = "/page/strategy/qa/general";
+export const GENERAL_QA_ROUTE = "/page/workspace/chats/new";

 type UserDetailResponse = {
  data?: {
@@ -9,6 +9,12 @@ export interface CustomPrompt {
  title: string;
  content: string;
  sort_order?: number;
+  /**
+   * Optional association to a single agent. ``null``/absent = global (shown for
+   * every agent); otherwise the prompt only surfaces when that agent is
+   * selected.
+   */
+  agent_id?: string | null;
  created_at?: string | null;
  updated_at?: string | null;
 }
@@ -27,6 +33,7 @@ async function listUserPrompts(): Promise<CustomPrompt[]> {
 async function createUserPrompt(input: {
  title: string;
  content: string;
+  agent_id?: string | null;
 }): Promise<CustomPrompt> {
  const res = await apiFetch(baseUrl(), {
    method: "POST",
@@ -42,7 +49,7 @@ async function createUserPrompt(input: {

 async function updateUserPrompt(
  id: string,
-  input: { title?: string; content?: string },
+  input: { title?: string; content?: string; agent_id?: string | null },
 ): Promise<CustomPrompt> {
  const res = await apiFetch(`${baseUrl()}/${encodeURIComponent(id)}`, {
    method: "PUT",
@@ -93,7 +100,7 @@ export function useUpdateCustomPrompt() {
      input,
    }: {
      id: string;
-      input: { title?: string; content?: string };
+      input: { title?: string; content?: string; agent_id?: string | null };
    }) => updateUserPrompt(id, input),
    onSuccess: () => {
      void queryClient.invalidateQueries({ queryKey: QUERY_KEY });
@@ -82,6 +82,10 @@ export const enUS: Translations = {
  inputBox: {
    placeholder: "How can I assist you today?",
    editQuestion: "Edit question",
+    deleteMessage: "Delete question and answer",
+    deleteMessageConfirmTitle: "Delete this question and its answer?",
+    deleteMessageConfirmDescription:
+      "The question and its answer will both be removed. This cannot be undone.",
    createSkillPrompt:
      "We're going to build a new skill step by step with `skill-creator`. To start, what do you want this skill to do?",
    addAttachments: "Add attachments",
@@ -472,6 +476,8 @@ export const enUS: Translations = {
      badgeArchivedTitle: "Archived — recoverable from the archive drawer",
      badgePinned: "Pinned",
      badgePinnedTitle: "Pinned — the curator will never auto-archive this skill",
+      badgeFeatured: "Top",
+      badgeFeaturedTitle: "Pinned to the top of the list",
      badgeSourceAgent: "Agent-created",
      badgeSourceAgentTitle: "Auto-generated by an agent during a conversation",
      badgeSourceUpload: "Uploaded",
@@ -490,6 +496,10 @@ export const enUS: Translations = {
      unpinAction: "Unpin",
      pinSuccess: "Pinned",
      unpinSuccess: "Unpinned",
+      featureAction: "Pin to top",
+      unfeatureAction: "Unpin from top",
+      featureSuccess: "Pinned to top",
+      unfeatureSuccess: "Unpinned from top",
      deleteAction: "Delete skill",
      deleteConfirm:
        "Delete skill \"{name}\"? This cannot be undone and the skill will be removed from any agent that referenced it.",
@@ -79,6 +79,9 @@ export interface Translations {
  inputBox: {
    placeholder: string;
    editQuestion: string;
+    deleteMessage: string;
+    deleteMessageConfirmTitle: string;
+    deleteMessageConfirmDescription: string;
    createSkillPrompt: string;
    addAttachments: string;
    mode: string;
@@ -406,6 +409,8 @@ export interface Translations {
      badgeArchivedTitle: string;
      badgePinned: string;
      badgePinnedTitle: string;
+      badgeFeatured: string;
+      badgeFeaturedTitle: string;
      badgeSourceAgent: string;
      badgeSourceAgentTitle: string;
      badgeSourceUpload: string;
@@ -424,6 +429,10 @@ export interface Translations {
      unpinAction: string;
      pinSuccess: string;
      unpinSuccess: string;
+      featureAction: string;
+      unfeatureAction: string;
+      featureSuccess: string;
+      unfeatureSuccess: string;
      deleteAction: string;
      deleteConfirm: string;
      deleteSuccess: string;
@@ -1,4 +1,4 @@
-import {
+import {
  CompassIcon,
  GraduationCapIcon,
  ImageIcon,
@@ -82,6 +82,9 @@ export const zhCN: Translations = {
  inputBox: {
    placeholder: "今天我能为你做些什么？",
    editQuestion: "编辑问题",
+    deleteMessage: "删除提问及回答",
+    deleteMessageConfirmTitle: "删除该提问及其回答？",
+    deleteMessageConfirmDescription: "该提问及对应的回答都会被删除，且无法恢复。",
    createSkillPrompt:
      "我们一起用 skill-creator 技能来创建一个技能吧。先问问我希望这个技能能做什么。",
    addAttachments: "添加附件",
@@ -453,6 +456,8 @@ export const zhCN: Translations = {
      badgeArchivedTitle: "已被归档,可在归档抽屉中恢复",
      badgePinned: "钉选",
      badgePinnedTitle: "已钉选,策展程序不会自动归档此技能",
+      badgeFeatured: "置顶",
+      badgeFeaturedTitle: "已置顶,固定显示在列表顶部",
      badgeSourceAgent: "Agent 创建",
      badgeSourceAgentTitle: "在对话中由 Agent 自动生成",
      badgeSourceUpload: "用户上传",
@@ -471,6 +476,10 @@ export const zhCN: Translations = {
      unpinAction: "取消钉选",
      pinSuccess: "已钉选",
      unpinSuccess: "已取消钉选",
+      featureAction: "置顶",
+      unfeatureAction: "取消置顶",
+      featureSuccess: "已置顶",
+      unfeatureSuccess: "已取消置顶",
      deleteAction: "删除技能",
      deleteConfirm: "确认删除技能 “{name}”？该操作不可恢复,且会从引用它的所有智能体中自动移除。",
      deleteSuccess: "技能已删除",
@@ -54,15 +54,13 @@ export const sidebarMenuItems: MenuItem[] = [
    icon: HelpCircle,
    children: [
      { id: "general-qa", label: "通用问答", icon: CircleHelp, path: "/page/workspace/chats/new" },
-      { id: "expert-qa", label: "专家问答", icon: Brain, path: "/page/strategy/qa/expert-qa" },
-      // 「圆桌规划」入口暂时隐藏 —— 功能仍在 /page/roundtable/planning,只是不在侧边栏出现。
-      // 需要重新开放时取消注释即可。
-      // {
-      //   id: "qa-roundtable",
-      //   label: "圆桌规划",
-      //   icon: Bot,
-      //   path: "/page/roundtable/planning",
-      // },
+      {
+        id: "multi-agent-roundtable",
+        label: "多智能体会商",
+        icon: Users,
+        path: "/page/strategy/qa/multi-agent-roundtable",
+      },
+      // { id: "expert-qa", label: "专家问答", icon: Brain, path: "/page/strategy/qa/expert-qa" },
      { id: "qa-zzjc", label: "zzjc支持", icon: Bot },
      { id: "qa-zzxd", label: "zzXD应用", icon: Layout },
      { id: "qa-research", label: "课题研究", icon: FileText, path: "/page/canvas/ai-writing" },
@@ -0,0 +1,141 @@
+import { apiFetch } from "@/core/api";
+import { getBackendBaseURL } from "@/core/config";
+// Share codes share the same alphabet/shape as conversation shares, so reuse the
+// extractor instead of duplicating the regex.
+export { extractShareCode } from "@/core/thread-shares/api";
+
+/**
+ * Roundtable-draft share modes:
+ * - `import` — recipient (a logged-in user) copies the 会商 draft into their own
+ *   account and can keep working on the copy.
+ * - `view` — a public, read-only page anyone can open without logging in; it
+ *   renders the draft's Step 3 result report (方案总览 HTML).
+ */
+export type DraftShareMode = "import" | "view";
+
+export interface DraftShare {
+  share_code: string;
+  owner_user_id: string;
+  draft_id: string;
+  revoked: boolean;
+  mode: DraftShareMode;
+  created_at: string | null;
+}
+
+/** One sub-agent's final delivery from the Step 2 roundtable. */
+export interface PublicDraftSeatDelivery {
+  sender: string;
+  content: string;
+}
+
+/** Read-only roundtable-result snapshot returned by the public view-share endpoint. */
+export interface PublicDraftShareSnapshot {
+  share_code: string;
+  title: string;
+  mode: string;
+  /** 总控最终结论 (markdown). */
+  consensus_text: string;
+  /** 各席位最终交付. */
+  seat_deliveries: PublicDraftSeatDelivery[];
+  /** Self-contained Step 3 result report HTML (empty when no report exists). */
+  html: string;
+  summary: string | null;
+  generated_at: string | null;
+  has_report: boolean;
+  created_at: string | null;
+}
+
+export interface DraftSharePreview {
+  share_code: string;
+  shared_by: string;
+  title: string;
+}
+
+export interface DraftImportResult {
+  imported: number;
+  skipped: number;
+  draft_id: string | null;
+}
+
+const baseUrl = () => `${getBackendBaseURL()}/api/roundtable-draft-shares`;
+
+async function parseError(response: Response, fallback: string): Promise<Error> {
+  const data = (await response.json().catch(() => ({}))) as { detail?: unknown };
+  const detail = data.detail;
+  const message =
+    typeof detail === "string" && detail
+      ? detail
+      : `${fallback} (HTTP ${response.status})`;
+  return new Error(message);
+}
+
+/** Create (or reuse) a share code for one roundtable draft in the given mode. */
+export async function createDraftShare(
+  draftId: string,
+  mode: DraftShareMode = "import",
+): Promise<DraftShare> {
+  const response = await apiFetch(baseUrl(), {
+    method: "POST",
+    headers: { "Content-Type": "application/json" },
+    body: JSON.stringify({ draft_id: draftId, mode }),
+  });
+  if (!response.ok) throw await parseError(response, "创建分享失败");
+  return response.json() as Promise<DraftShare>;
+}
+
+/** List the current user's own roundtable-draft share links. */
+export async function listDraftShares(): Promise<DraftShare[]> {
+  const response = await apiFetch(baseUrl());
+  if (!response.ok) throw await parseError(response, "加载分享列表失败");
+  const json = (await response.json()) as { shares: DraftShare[] };
+  return json.shares;
+}
+
+/** Revoke a share link so it can no longer be previewed, imported, or viewed. */
+export async function revokeDraftShare(shareCode: string): Promise<void> {
+  const response = await apiFetch(`${baseUrl()}/${encodeURIComponent(shareCode)}`, {
+    method: "DELETE",
+  });
+  if (!response.ok) throw await parseError(response, "撤销分享失败");
+}
+
+/** Preview a share link before importing it. */
+export async function previewDraftShare(shareCode: string): Promise<DraftSharePreview> {
+  const response = await apiFetch(
+    `${baseUrl()}/${encodeURIComponent(shareCode)}/preview`,
+  );
+  if (!response.ok) throw await parseError(response, "无法读取该分享");
+  return response.json() as Promise<DraftSharePreview>;
+}
+
+/** Import the roundtable draft behind a share link into the current account. */
+export async function importDraftShare(shareCode: string): Promise<DraftImportResult> {
+  const response = await apiFetch(
+    `${baseUrl()}/${encodeURIComponent(shareCode)}/import`,
+    { method: "POST" },
+  );
+  if (!response.ok) throw await parseError(response, "导入失败");
+  return response.json() as Promise<DraftImportResult>;
+}
+
+/**
+ * Fetch the public read-only snapshot of a `view`-mode roundtable share.
+ *
+ * Uses a plain `fetch` (no auth header) — the `/api/public/` endpoint is
+ * intentionally world-readable so anyone with the link can open it.
+ */
+export async function getPublicDraftShareSnapshot(
+  shareCode: string,
+): Promise<PublicDraftShareSnapshot> {
+  const response = await fetch(
+    `${getBackendBaseURL()}/api/public/roundtable-shares/${encodeURIComponent(shareCode)}`,
+  );
+  if (!response.ok) throw await parseError(response, "无法打开该分享");
+  return response.json() as Promise<PublicDraftShareSnapshot>;
+}
+
+/** Build the shareable public URL for a `view`-mode roundtable share code. */
+export function buildPublicDraftShareUrl(shareCode: string): string {
+  // The app uses HashRouter, so the public viewer lives at `#/roundtable-share/<code>`.
+  return `${window.location.origin}${window.location.pathname}#/roundtable-share/${shareCode}`;
+}
@@ -0,0 +1,61 @@
+import { useMutation, useQuery, useQueryClient } from "@tanstack/react-query";
+
+import {
+  createDraftShare,
+  importDraftShare,
+  listDraftShares,
+  previewDraftShare,
+  revokeDraftShare,
+  type DraftShareMode,
+} from "./api";
+
+export function useDraftShares(enabled = true) {
+  return useQuery({
+    queryKey: ["roundtable-draft-shares"],
+    queryFn: listDraftShares,
+    enabled,
+  });
+}
+
+export function useCreateDraftShare() {
+  const queryClient = useQueryClient();
+  return useMutation({
+    mutationFn: ({
+      draftId,
+      mode = "import",
+    }: {
+      draftId: string;
+      mode?: DraftShareMode;
+    }) => createDraftShare(draftId, mode),
+    onSuccess: () => {
+      void queryClient.invalidateQueries({ queryKey: ["roundtable-draft-shares"] });
+    },
+  });
+}
+
+export function useRevokeDraftShare() {
+  const queryClient = useQueryClient();
+  return useMutation({
+    mutationFn: (shareCode: string) => revokeDraftShare(shareCode),
+    onSuccess: () => {
+      void queryClient.invalidateQueries({ queryKey: ["roundtable-draft-shares"] });
+    },
+  });
+}
+
+export function usePreviewDraftShare() {
+  return useMutation({
+    mutationFn: (shareCode: string) => previewDraftShare(shareCode),
+  });
+}
+
+export function useImportDraftShare() {
+  const queryClient = useQueryClient();
+  return useMutation({
+    mutationFn: (shareCode: string) => importDraftShare(shareCode),
+    onSuccess: () => {
+      // Imported drafts show up in the user's roundtable history sidebar.
+      void queryClient.invalidateQueries({ queryKey: ["roundtable-drafts"] });
+    },
+  });
+}
@@ -26,6 +26,14 @@ export type HtmlPageConfig = {

 export type ScheduledTaskExecutionContext = {
  require_markdown?: boolean;
+  /**
+   * The unified "必须生成 HTML" switch. The task form no longer splits "普通任务 /
+   * HTML 页面" into separate kinds — instead ``require_html`` and
+   * ``require_markdown`` are two independent toggles that may both be on. Legacy
+   * tasks created under the old two-tab UI still carry ``task_kind`` and are
+   * treated as HTML tasks by the backend for backward compatibility.
+   */
+  require_html?: boolean;
  task_kind?: ScheduledTaskKind;
  html_config?: HtmlPageConfig;
  [key: string]: unknown;
@@ -55,6 +55,13 @@ export interface LocalSettings {
     * app sizes text/spacing in rem, the whole UI scales proportionally.
     */
    fontScale: number;
+    /**
+     * Per-user override for the skill / agent list display mode (card vs list).
+     * `undefined` = follow the admin-configured system default. Set when the
+     * user flips the card/list toggle on the skills or agents page.
+     */
+    skillViewMode?: "card" | "list";
+    agentViewMode?: "card" | "list";
  };
  context: Omit<
    AgentThreadContext,
@@ -6,12 +6,14 @@ import type { Skill, SkillDisplayConfig, SkillState } from "./type";
 export interface ListSkillsParams {
  search?: string;
  tagIds?: string[];
+  sort?: "time_desc" | "time_asc" | "activity_desc" | "activity_asc" | "usage_desc" | "usage_asc" | "name_asc" | "name_desc";
 }

 export async function loadSkills(params: ListSkillsParams = {}) {
  const qs = new URLSearchParams();
  if (params.search) qs.set("search", params.search);
  for (const id of params.tagIds ?? []) qs.append("tag_ids", id);
+  if (params.sort) qs.set("sort", params.sort);
  const query = qs.toString();
  const skills = await apiFetch(
    `${getBackendBaseURL()}/api/skills${query ? `?${query}` : ""}`,
@@ -296,6 +298,24 @@ export async function setSkillPinned(
  return response.json() as Promise<Skill>;
 }

+export async function setSkillFeatured(
+  skillName: string,
+  featured: boolean,
+): Promise<Skill> {
+  const response = await apiFetch(
+    `${getBackendBaseURL()}/api/skills/custom/${encodeURIComponent(skillName)}/featured`,
+    {
+      method: "PUT",
+      headers: { "Content-Type": "application/json" },
+      body: JSON.stringify({ featured }),
+    },
+  );
+  if (!response.ok) {
+    throw await parseDetailedError(response, "Failed to update skill featured state");
+  }
+  return response.json() as Promise<Skill>;
+}
+
 export interface SkillContentResponse {
  name: string;
  category: string;
@@ -19,23 +19,32 @@ import {
  setSkillDetail,
  setSkillDisplay,
  setSkillPinned,
+  setSkillFeatured,
  setSkillPublished,
  setSkillState,
  validateSkillUpload,
 } from "./api";
+import type { ListSkillsParams } from "./api";
 import type { Skill, SkillState } from "./type";

 import { loadAllSkillsAdmin, loadSkills } from ".";

-export function useSkills(params: { search?: string; tagIds?: string[] } = {}) {
+// Stable empty fallback. Returning `data ?? []` inline would hand out a fresh
+// array reference on every render while the query is loading/errored, which
+// makes downstream `useMemo([skills])` / `useEffect([skills])` consumers churn
+// forever (observed as a "Maximum update depth exceeded" loop on NewAgentPage).
+const EMPTY_SKILLS: Skill[] = [];
+
+export function useSkills(params: ListSkillsParams = {}) {
  const search = params.search ?? "";
  const tagIds = params.tagIds ?? [];
+  const sort = params.sort ?? "time_desc";
  const { data, isLoading, error } = useQuery({
-    queryKey: ["skills", search, [...tagIds].sort()],
-    queryFn: () => loadSkills({ search, tagIds }),
+    queryKey: ["skills", search, [...tagIds].sort(), sort],
+    queryFn: () => loadSkills({ search, tagIds, sort }),
    placeholderData: keepPreviousData,
  });
-  return { skills: data ?? [], isLoading, error };
+  return { skills: data ?? EMPTY_SKILLS, isLoading, error };
 }

 /**
@@ -50,7 +59,7 @@ export function useAllSkillsAdmin(enabled: boolean) {
    enabled,
    staleTime: 30_000,
  });
-  return { skills: data ?? [], isLoading, error };
+  return { skills: data ?? EMPTY_SKILLS, isLoading, error };
 }

 export function useSkillContent(skillName: string | null) {
@@ -193,6 +202,17 @@ export function useSetSkillPinned() {
  });
 }

+export function useSetSkillFeatured() {
+  const queryClient = useQueryClient();
+  return useMutation({
+    mutationFn: ({ skillName, featured }: { skillName: string; featured: boolean }) =>
+      setSkillFeatured(skillName, featured),
+    onSuccess: () => {
+      void queryClient.invalidateQueries({ queryKey: ["skills"] });
+    },
+  });
+}
+
 export function useDuplicateSkill() {
  const queryClient = useQueryClient();
  return useMutation({
@@ -60,9 +60,12 @@ export interface Skill {
  // so stale / archived skills appear in dedicated drawers instead.
  state?: SkillState;
  pinned?: boolean;
+  // 置顶 —— 仅影响列表排序,与 pinned(防自动归档)正交。
+  featured?: boolean;
  // Provenance — distinguishes skills created by an agent during a chat
  // (``agent``) from skills the user uploaded / authored manually (``upload``).
  source?: SkillSource;
+  created_at?: string | null;
  last_activity_at?: string | null;
  use_count?: number;
  view_count?: number;
@@ -61,6 +61,22 @@ export interface CitationDisplayUpdate {
  cleanup_words?: string[];
 }

+export interface LeaderboardSettings {
+  exclude_user_ids: string[];
+  include_scheduled: boolean;
+  include_admins: boolean;
+  include_failed: boolean;
+  cleanup_system_questions: boolean;
+}
+
+export interface LeaderboardSettingsUpdate {
+  exclude_user_ids?: string[];
+  include_scheduled?: boolean;
+  include_admins?: boolean;
+  include_failed?: boolean;
+  cleanup_system_questions?: boolean;
+}
+
 export async function loadPrivateSquareStatus(): Promise<PrivateSquareStatus> {
  const response = await apiFetch(
    `${getBackendBaseURL()}/api/system-settings/private-square`,
@@ -74,13 +90,18 @@ export async function loadPrivateSquareStatus(): Promise<PrivateSquareStatus> {
 }

 export type ThemeMode = "light" | "dark";
+export type ViewMode = "card" | "list";

 export interface AppearanceSettings {
  default_theme: ThemeMode;
+  default_skill_view: ViewMode;
+  default_agent_view: ViewMode;
 }

 export interface AppearanceUpdate {
  default_theme?: ThemeMode;
+  default_skill_view?: ViewMode;
+  default_agent_view?: ViewMode;
 }

 export async function loadAppearanceSettings(): Promise<AppearanceSettings> {
@@ -127,6 +148,36 @@ export async function loadCitationDisplaySettings(): Promise<CitationDisplaySett
  return (await response.json()) as CitationDisplaySettings;
 }

+export async function loadLeaderboardSettings(): Promise<LeaderboardSettings> {
+  const response = await apiFetch(
+    `${getBackendBaseURL()}/api/system-settings/leaderboard`,
+  );
+  if (!response.ok) {
+    throw new Error(`Failed to load leaderboard settings: ${response.status}`);
+  }
+  return (await response.json()) as LeaderboardSettings;
+}
+
+export async function updateLeaderboardSettings(
+  body: LeaderboardSettingsUpdate,
+): Promise<LeaderboardSettings> {
+  const response = await apiFetch(
+    `${getBackendBaseURL()}/api/system-settings/leaderboard`,
+    {
+      method: "PUT",
+      headers: { "Content-Type": "application/json" },
+      body: JSON.stringify(body),
+    },
+  );
+  if (!response.ok) {
+    const detail = await response
+      .json()
+      .catch(() => ({ detail: "Failed to update leaderboard settings" }));
+    throw new Error(detail.detail ?? "Failed to update leaderboard settings");
+  }
+  return (await response.json()) as LeaderboardSettings;
+}
+
 export async function updateCitationDisplaySettings(
  body: CitationDisplayUpdate,
 ): Promise<CitationDisplaySettings> {
@@ -147,6 +198,22 @@ export async function updateCitationDisplaySettings(
  return (await response.json()) as CitationDisplaySettings;
 }

+export interface LogSystemSettings {
+  enabled: boolean;
+  url: string;
+  label: string;
+}
+
+export async function loadLogSystemSettings(): Promise<LogSystemSettings> {
+  const response = await apiFetch(
+    `${getBackendBaseURL()}/api/system-settings/log-system`,
+  );
+  if (!response.ok) {
+    throw new Error(`Failed to load log system settings: ${response.status}`);
+  }
+  return (await response.json()) as LogSystemSettings;
+}
+
 export async function updatePrivateSquareSettings(
  body: PrivateSquareUpdate,
 ): Promise<PrivateSquareStatus> {
@@ -1,24 +1,31 @@
 import { useMutation, useQuery, useQueryClient } from "@tanstack/react-query";

+import { useLocalSettings } from "@/core/settings";
+
 import {
  loadAppearanceSettings,
  loadCitationDisplaySettings,
+  loadLeaderboardSettings,
  loadPrivateSquareStatus,
  loadPromptPrefixSettings,
  updateAppearanceSettings,
  updateCitationDisplaySettings,
+  updateLeaderboardSettings,
  updatePrivateSquareSettings,
  updatePromptPrefixSettings,
  type AppearanceUpdate,
  type CitationDisplayUpdate,
+  type LeaderboardSettingsUpdate,
  type PrivateSquareUpdate,
  type PromptPrefixUpdate,
+  type ViewMode,
 } from "./api";

 const PROMPT_PREFIX_KEY = ["systemSettings", "promptPrefix"] as const;
 const PRIVATE_SQUARE_KEY = ["systemSettings", "privateSquare"] as const;
 const APPEARANCE_KEY = ["systemSettings", "appearance"] as const;
 const CITATION_DISPLAY_KEY = ["systemSettings", "citationDisplay"] as const;
+const LEADERBOARD_KEY = ["systemSettings", "leaderboard"] as const;

 export function usePromptPrefixSettings() {
  return useQuery({
@@ -82,6 +89,31 @@ export function useUpdateAppearanceSettings() {
  });
 }

+/**
+ * Effective card/list display mode for the skill or agent list. A user's own
+ * choice (persisted in local settings) wins; otherwise the admin-configured
+ * system default applies; otherwise a built-in fallback (skills → list,
+ * agents → card, matching the historical layout of each page). `setMode`
+ * persists the user's override locally.
+ */
+export function useViewMode(
+  kind: "skill" | "agent",
+): [ViewMode, (mode: ViewMode) => void] {
+  const [settings, setSettings] = useLocalSettings();
+  const { data: appearance } = useAppearanceSettings();
+  const overrideKey = kind === "skill" ? "skillViewMode" : "agentViewMode";
+  const userOverride = settings.display[overrideKey];
+  const adminDefault =
+    kind === "skill"
+      ? appearance?.default_skill_view
+      : appearance?.default_agent_view;
+  const fallback: ViewMode = kind === "skill" ? "list" : "card";
+  const mode: ViewMode = userOverride ?? adminDefault ?? fallback;
+  const setMode = (next: ViewMode) =>
+    setSettings("display", { [overrideKey]: next });
+  return [mode, setMode];
+}
+
 export function useCitationDisplaySettings() {
  return useQuery({
    queryKey: CITATION_DISPLAY_KEY,
@@ -102,3 +134,25 @@ export function useUpdateCitationDisplaySettings() {
    },
  });
 }
+
+export function useLeaderboardSettings() {
+  return useQuery({
+    queryKey: LEADERBOARD_KEY,
+    queryFn: () => loadLeaderboardSettings(),
+    staleTime: 60_000,
+    refetchOnWindowFocus: false,
+    retry: false,
+  });
+}
+
+export function useUpdateLeaderboardSettings() {
+  const queryClient = useQueryClient();
+  return useMutation({
+    mutationFn: (body: LeaderboardSettingsUpdate) =>
+      updateLeaderboardSettings(body),
+    onSuccess: (data) => {
+      queryClient.setQueryData(LEADERBOARD_KEY, data);
+      queryClient.invalidateQueries({ queryKey: ["admin-activity", "leaderboard"] });
+    },
+  });
+}
@@ -350,12 +350,12 @@ export function useThreadStream({
        // agent thread URL — otherwise fall back to the global new chat.
        const hash = typeof window !== "undefined" ? window.location.hash : "";
        const agentMatch = hash.match(/#\/page\/workspace\/agents\/([^/]+)\//);
-        const iframeMatch = hash.match(/#\/page\/workspace\/chats_iframe\//);
-        const target = agentMatch
-          ? `/page/workspace/agents/${agentMatch[1]}/chats/new`
-          : iframeMatch
-            ? "/page/workspace/chats_iframe/new"
-            : "/page/workspace/chats/new";
+        const iframeMatch = hash.match(/#\/page\/workspace\/chats_iframe\//);
+        const target = agentMatch
+          ? `/page/workspace/agents/${agentMatch[1]}/chats/new`
+          : iframeMatch
+            ? "/page/workspace/chats_iframe/new"
+            : "/page/workspace/chats/new";
        // First navigate to a safe URL so the post-reload page lands on a
        // valid route. Then full-reload so TanStack Query cache, context
        // providers and any other state captured under the previous user's
@@ -621,10 +621,15 @@ export function useThreadStream({
          lockThreadRagMode(threadId);
        }

-        await thread.submit(
-          {
-            messages: [
-              {
+        const mergedContext = {
+          ...context,
+          ...extraContext,
+        };
+
+        await thread.submit(
+          {
+            messages: [
+              {
                type: "human",
                content: [
                  {
@@ -642,32 +647,33 @@ export function useThreadStream({
              },
            ],
          },
-          {
-            threadId: threadId,
-            streamSubgraphs: true,
-            streamResumable: true,
-            config: {
-              recursion_limit: 1000,
-            },
-            context: {
-              ...extraContext,
-              ...context,
-              thinking_enabled: context.mode !== "flash",
-              is_plan_mode: context.mode === "pro" || context.mode === "ultra",
-              subagent_enabled: context.mode === "ultra",
-              reasoning_effort:
-                context.reasoning_effort ??
-                (context.mode === "ultra"
-                  ? "high"
-                  : context.mode === "pro"
-                    ? "medium"
-                    : context.mode === "thinking"
-                      ? "low"
-                      : undefined),
-              memory_injection_enabled: context.memory_injection_enabled ?? true,
-              rag_mode_enabled: ragModeEnabled,
-              thread_id: threadId,
-            },
+          {
+            threadId: threadId,
+            streamSubgraphs: true,
+            streamResumable: true,
+            config: {
+              recursion_limit: 1000,
+            },
+            context: {
+              ...mergedContext,
+              thinking_enabled: mergedContext.mode !== "flash",
+              is_plan_mode:
+                mergedContext.mode === "pro" || mergedContext.mode === "ultra",
+              subagent_enabled: mergedContext.mode === "ultra",
+              reasoning_effort:
+                mergedContext.reasoning_effort ??
+                (mergedContext.mode === "ultra"
+                  ? "high"
+                  : mergedContext.mode === "pro"
+                    ? "medium"
+                    : mergedContext.mode === "thinking"
+                      ? "low"
+                      : undefined),
+              memory_injection_enabled:
+                mergedContext.memory_injection_enabled ?? true,
+              rag_mode_enabled: ragModeEnabled,
+              thread_id: threadId,
+            },
          },
        );
        void queryClient.invalidateQueries({ queryKey: ["threads", "search"] });
@@ -804,6 +810,49 @@ export function useDeleteThread() {
  });
 }

+/**
+ * Delete a conversation turn (a user question together with its answer) from a
+ * thread. Hits the Gateway endpoint that removes the question and every
+ * following message up to the next question from the latest checkpoint, and
+ * returns the ids that were actually removed. The live `useStream` cache is not
+ * auto-refreshed by this call — callers hide the returned ids locally (see
+ * `MessageList`) so the removal shows immediately; a reload then reads the
+ * persisted, already-trimmed state.
+ */
+export function useDeleteMessage() {
+  return useMutation({
+    mutationFn: async ({
+      threadId,
+      messageId,
+    }: {
+      threadId: string;
+      messageId: string;
+    }): Promise<string[]> => {
+      const response = await apiFetch(
+        `${getBackendBaseURL()}/api/threads/${encodeURIComponent(
+          threadId,
+        )}/messages/${encodeURIComponent(messageId)}`,
+        {
+          method: "DELETE",
+        },
+      );
+
+      if (!response.ok) {
+        const error = await response
+          .json()
+          .catch(() => ({ detail: "删除消息失败。" }));
+        throw new Error(error.detail ?? "删除消息失败。");
+      }
+
+      const body = (await response.json().catch(() => ({}))) as {
+        deleted_ids?: string[];
+      };
+      // Fall back to the requested id so the caller can always hide something.
+      return body.deleted_ids?.length ? body.deleted_ids : [messageId];
+    },
+  });
+}
+
 export function useRenameThread() {
  const queryClient = useQueryClient();
  const apiClient = getAPIClient();
@@ -0,0 +1,85 @@
+import { useMutation, useQuery, useQueryClient } from "@tanstack/react-query";
+
+import { apiFetch } from "@/core/api";
+import { getBackendBaseURL } from "@/core/config";
+
+/** Per-user UI preferences, bound to the account (stored server-side). */
+export interface UserPreferences {
+  /**
+   * When true, the chat input hides the admin-configured prompt-prefix switch
+   * and never applies the prefix — the user uses only their own prompts.
+   */
+  hide_admin_prompt_prefix: boolean;
+}
+
+const QUERY_KEY = ["user-preferences"] as const;
+const DEFAULT_PREFS: UserPreferences = { hide_admin_prompt_prefix: false };
+const baseUrl = () => `${getBackendBaseURL()}/api/user-preferences`;
+
+async function getUserPreferences(): Promise<UserPreferences> {
+  const res = await apiFetch(baseUrl());
+  if (!res.ok) throw new Error(`Failed to load preferences: ${res.statusText}`);
+  const data = (await res.json()) as Partial<UserPreferences>;
+  return { hide_admin_prompt_prefix: !!data.hide_admin_prompt_prefix };
+}
+
+async function updateUserPreferences(
+  input: Partial<UserPreferences>,
+): Promise<UserPreferences> {
+  const res = await apiFetch(baseUrl(), {
+    method: "PUT",
+    headers: { "Content-Type": "application/json" },
+    body: JSON.stringify(input),
+  });
+  if (!res.ok) {
+    const err = (await res.json().catch(() => ({}))) as { detail?: string };
+    throw new Error(err.detail ?? `Failed to update preferences: ${res.statusText}`);
+  }
+  const data = (await res.json()) as Partial<UserPreferences>;
+  return { hide_admin_prompt_prefix: !!data.hide_admin_prompt_prefix };
+}
+
+/** Reactive current-user preferences (server-backed, follows the account). */
+export function useUserPreferences(): UserPreferences {
+  const { data } = useQuery({
+    queryKey: QUERY_KEY,
+    queryFn: getUserPreferences,
+  });
+  return data ?? DEFAULT_PREFS;
+}
+
+export function useUserPreferencesQuery() {
+  return useQuery({
+    queryKey: QUERY_KEY,
+    queryFn: getUserPreferences,
+  });
+}
+
+export function useUpdateUserPreferences() {
+  const queryClient = useQueryClient();
+  return useMutation({
+    mutationFn: updateUserPreferences,
+    // Optimistically flip the cached preference so the switch — and every
+    // surface that reacts to it (e.g. the chat input's admin prompt-prefix
+    // toggle) — updates instantly instead of waiting for the round-trip,
+    // which made the toggle look like it "didn't take effect / didn't refresh".
+    onMutate: async (input) => {
+      await queryClient.cancelQueries({ queryKey: QUERY_KEY });
+      const previous = queryClient.getQueryData<UserPreferences>(QUERY_KEY);
+      queryClient.setQueryData<UserPreferences>(QUERY_KEY, (old) => ({
+        ...(old ?? DEFAULT_PREFS),
+        ...input,
+      }));
+      return { previous };
+    },
+    onError: (_err, _input, context) => {
+      // Roll back to the pre-toggle value if the server rejected the change.
+      if (context?.previous) {
+        queryClient.setQueryData(QUERY_KEY, context.previous);
+      }
+    },
+    onSuccess: (data) => {
+      queryClient.setQueryData(QUERY_KEY, data);
+    },
+  });
+}
@@ -94,10 +94,11 @@ const extensionMap: Record<string, string> = {
  ini: "ini",
  env: "dotenv",

-  // Markdown & Docs
-  md: "markdown",
-  mdx: "mdx",
-  rst: "rst",
+  // Markdown & Docs
+  md: "markdown",
+  mdx: "mdx",
+  mmd: "mermaid",
+  rst: "rst",

  // SQL
  sql: "sql",
@@ -151,6 +152,23 @@ export function getFileExtension(filepath: string) {
  return filepath.split(".").pop()!.toLocaleLowerCase();
 }

+const IMAGE_EXTENSIONS = new Set([
+  "png",
+  "jpg",
+  "jpeg",
+  "gif",
+  "webp",
+  "svg",
+  "bmp",
+  "ico",
+  "tiff",
+  "heic",
+]);
+
+export function isImageFile(filepath: string): boolean {
+  return IMAGE_EXTENSIONS.has(getFileExtension(filepath));
+}
+
 export function checkCodeFile(
  filepath: string,
 ):
@@ -1,10 +1,196 @@
-export function extractTitleFromMarkdown(markdown: string) {
-  if (markdown.startsWith("# ")) {
-    let title = markdown.split("\n")[0]!.trim();
-    if (title.startsWith("# ")) {
-      title = title.slice(2).trim();
-    }
-    return title;
-  }
-  return undefined;
-}
+export function extractTitleFromMarkdown(markdown: string) {
+  if (markdown.startsWith("# ")) {
+    let title = markdown.split("\n")[0]!.trim();
+    if (title.startsWith("# ")) {
+      title = title.slice(2).trim();
+    }
+    return title;
+  }
+  return undefined;
+}
+
+export type MarkdownHeadingAnchor = {
+  level: number;
+  text: string;
+  id: string;
+};
+
+export type MarkdownAnchorResolver = {
+  headings: MarkdownHeadingAnchor[];
+  getHeadingId: (level: number, text: string) => string | undefined;
+  resolveHref: (href: string | undefined, label?: string) => string | null | undefined;
+};
+
+const HEADING_RE = /^(#{1,6})\s+(.+?)\s*#*\s*$/;
+const PROTOCOL_RE = /^[a-z][a-z\d+.-]*:/i;
+
+function stripInlineMarkdown(value: string): string {
+  return value
+    .replace(/!\[([^\]]*)\]\([^)]+\)/g, "$1")
+    .replace(/\[([^\]]+)\]\([^)]+\)/g, "$1")
+    .replace(/[`*_~]/g, "")
+    .replace(/<[^>]+>/g, "")
+    .trim();
+}
+
+export function markdownSlug(value: string): string {
+  const cleaned = stripInlineMarkdown(value)
+    .normalize("NFKC")
+    .toLowerCase()
+    .replace(/[^\p{L}\p{N}\s._-]+/gu, "")
+    .trim()
+    .replace(/[\s._-]+/g, "-")
+    .replace(/^-+|-+$/g, "");
+  return cleaned || "section";
+}
+
+function decodeLinkPart(value: string): string {
+  try {
+    return decodeURIComponent(value);
+  } catch {
+    return value;
+  }
+}
+
+/** True for hrefs that point to an anchor within the current document (`#section`). */
+export function isInPageAnchor(href: string | undefined | null): href is string {
+  return !!href && href.startsWith("#") && !href.startsWith("#reference-");
+}
+
+function escapeAttrValue(value: string): string {
+  return value.replace(/\\/g, "\\\\").replace(/"/g, '\\"');
+}
+
+/**
+ * Scrolls to an in-page anchor by id without mutating `window.location.hash`.
+ *
+ * The app runs under a HashRouter, so letting an `<a href="#...">` click change
+ * the hash would be interpreted as a route change and 404. We resolve the target
+ * element ourselves and scroll to it instead. Scoped to the nearest
+ * `[data-markdown-anchor-root]` so headings in other messages don't collide.
+ */
+export function scrollToInPageAnchor(anchor: HTMLElement, href: string | undefined | null): void {
+  if (!isInPageAnchor(href)) return;
+  const id = decodeLinkPart(href.slice(1)).trim();
+  if (!id) return;
+  const scope = anchor.closest<HTMLElement>("[data-markdown-anchor-root]");
+  const selector = `[id="${escapeAttrValue(id)}"]`;
+  const target =
+    (scope?.querySelector<HTMLElement>(selector) ?? null) ??
+    document.getElementById(id) ??
+    document.querySelector<HTMLElement>(selector);
+  target?.scrollIntoView({ behavior: "smooth", block: "start" });
+}
+
+function normalizeLookupKey(value: string): string {
+  return markdownSlug(decodeLinkPart(value).replace(/^#+/, ""));
+}
+
+function isExternalOrSpecialHref(href: string): boolean {
+  if (href.startsWith("//")) return true;
+  if (PROTOCOL_RE.test(href)) return true;
+  return href.startsWith("/") || href.startsWith("?");
+}
+
+function candidateTextFromHref(href: string): string {
+  const withoutQuery = href.split(/[?#]/)[0] ?? href;
+  const lastSegment = withoutQuery.split("/").filter(Boolean).pop() ?? withoutQuery;
+  return decodeLinkPart(lastSegment).replace(/\.(md|markdown)$/i, "");
+}
+
+/**
+ * Injects a small runtime script into generated HTML so that clicking an
+ * in-page anchor (`<a href="#section">`) scrolls within the iframe instead of
+ * navigating it. The preview iframe loads from a sandboxed `blob:` URL, where a
+ * fragment navigation blanks the frame; intercepting the click avoids that.
+ */
+export function injectInPageAnchorHandler(html: string): string {
+  const script = `<script>(function(){
+  function decode(v){try{return decodeURIComponent(v);}catch(e){return v;}}
+  function bySelector(id){
+    if(!document.querySelector)return null;
+    var esc=window.CSS&&CSS.escape?CSS.escape(id):id.replace(/["\\\\]/g,"\\\\$&");
+    try{return document.querySelector("#"+esc+",[name=\\""+esc+"\\"]");}catch(e){return null;}
+  }
+  document.addEventListener("click",function(e){
+    var el=e.target;
+    while(el&&el.tagName!=="A"){el=el.parentElement;}
+    if(!el)return;
+    var href=el.getAttribute("href");
+    if(!href||href.charAt(0)!=="#"||href.length<2)return;
+    e.preventDefault();
+    var id=decode(href.slice(1));
+    var raw=href.slice(1);
+    var target=
+      document.getElementById(id)||
+      document.getElementById(raw)||
+      document.getElementsByName(id)[0]||
+      document.getElementsByName(raw)[0]||
+      bySelector(id)||
+      bySelector(raw);
+    if(target){target.scrollIntoView({behavior:"smooth",block:"start"});}
+  },true);
+})();</script>`;
+  if (/<\/body>/i.test(html)) {
+    return html.replace(/<\/body>/i, `${script}</body>`);
+  }
+  return html + script;
+}
+
+export function createMarkdownAnchorResolver(markdown: string): MarkdownAnchorResolver {
+  const headings: MarkdownHeadingAnchor[] = [];
+  const idsByLookup = new Map<string, string>();
+  const seen = new Map<string, number>();
+  let inFence = false;
+
+  for (const rawLine of markdown.split(/\r?\n/)) {
+    const line = rawLine.trim();
+    if (/^(```|~~~)/.test(line)) {
+      inFence = !inFence;
+      continue;
+    }
+    if (inFence) continue;
+
+    const match = HEADING_RE.exec(rawLine);
+    if (!match) continue;
+
+    const level = match[1]!.length;
+    const text = stripInlineMarkdown(match[2]!);
+    const baseId = markdownSlug(text);
+    const count = seen.get(baseId) ?? 0;
+    seen.set(baseId, count + 1);
+    const id = count === 0 ? baseId : `${baseId}-${count}`;
+
+    headings.push({ level, text, id });
+    idsByLookup.set(normalizeLookupKey(text), id);
+    idsByLookup.set(normalizeLookupKey(id), id);
+  }
+
+  return {
+    headings,
+    getHeadingId: (level: number, text: string) => {
+      void level;
+      return idsByLookup.get(normalizeLookupKey(text));
+    },
+    resolveHref: (href: string | undefined, label?: string) => {
+      if (!href) return href;
+      const trimmed = href.trim();
+      if (!trimmed || isExternalOrSpecialHref(trimmed)) return href;
+
+      const hash = trimmed.includes("#") ? trimmed.slice(trimmed.indexOf("#") + 1) : "";
+      const candidates = [
+        hash,
+        trimmed.startsWith("#") ? trimmed.slice(1) : "",
+        candidateTextFromHref(trimmed),
+        label ?? "",
+      ].filter(Boolean);
+
+      for (const candidate of candidates) {
+        const id = idsByLookup.get(normalizeLookupKey(candidate));
+        if (id) return `#${id}`;
+      }
+
+      return trimmed.startsWith("#") ? null : null;
+    },
+  };
+}
@@ -0,0 +1,75 @@
+import { getFileName } from "./files";
+
+let mermaidInitialized = false;
+
+export function isMermaidFile(filepath: string): boolean {
+  return /\.mmd$/i.test(filepath);
+}
+
+export function getMermaidImageFileName(filepath: string, extension = "svg"): string {
+  return getFileName(filepath).replace(/\.mmd$/i, `.${extension}`);
+}
+
+async function getMermaidModule() {
+  const mod = await import("mermaid");
+  const mermaid = mod.default;
+  if (!mermaidInitialized) {
+    mermaid.initialize({
+      startOnLoad: false,
+      securityLevel: "strict",
+    });
+    mermaidInitialized = true;
+  }
+  return mermaid;
+}
+
+export async function renderMermaidToSvg(source: string): Promise<string> {
+  const text = source.trim();
+  if (!text) {
+    throw new Error("Mermaid 内容为空，无法生成图片");
+  }
+
+  const mermaid = await getMermaidModule();
+  const renderId = `mermaid-preview-${Math.random().toString(36).slice(2, 10)}`;
+  const host = document.createElement("div");
+  host.style.position = "fixed";
+  host.style.left = "-10000px";
+  host.style.top = "-10000px";
+  host.style.pointerEvents = "none";
+  host.style.opacity = "0";
+  document.body.appendChild(host);
+
+  try {
+    const { svg, bindFunctions } = await mermaid.render(renderId, text);
+    host.innerHTML = svg;
+    bindFunctions?.(host);
+    return host.innerHTML;
+  } finally {
+    host.remove();
+  }
+}
+
+export async function openMermaidSvgInNewTab(source: string): Promise<void> {
+  const svg = await renderMermaidToSvg(source);
+  const blob = new Blob([svg], { type: "image/svg+xml;charset=utf-8" });
+  const objectUrl = URL.createObjectURL(blob);
+  const win = window.open(objectUrl, "_blank", "noopener,noreferrer");
+  if (win) {
+    win.opener = null;
+  }
+  window.setTimeout(() => URL.revokeObjectURL(objectUrl), 120_000);
+}
+
+export async function downloadMermaidSvgFile(source: string, filepath: string): Promise<void> {
+  const svg = await renderMermaidToSvg(source);
+  const blob = new Blob([svg], { type: "image/svg+xml;charset=utf-8" });
+  const objectUrl = URL.createObjectURL(blob);
+  const a = document.createElement("a");
+  a.href = objectUrl;
+  a.download = getMermaidImageFileName(filepath);
+  a.rel = "noopener";
+  document.body.appendChild(a);
+  a.click();
+  a.remove();
+  window.setTimeout(() => URL.revokeObjectURL(objectUrl), 30_000);
+}
@@ -1,6 +1,10 @@
-import "./styles/globals.css";
-import "tdesign-react/es/style/index.css";
-import "katex/dist/katex.min.css";
+import "@fontsource/noto-sans-sc/chinese-simplified-400.css";
+import "@fontsource/noto-sans-sc/chinese-simplified-500.css";
+import "@fontsource/noto-sans-sc/chinese-simplified-600.css";
+import "@fontsource/noto-sans-sc/chinese-simplified-700.css";
+import "./styles/globals.css";
+import "tdesign-react/es/style/index.css";
+import "katex/dist/katex.min.css";

 import React from "react";
 import ReactDOM from "react-dom/client";
@@ -1,69 +1,12 @@
-import { apiFetch } from "@/core/api/fetch-client";
-import { getBackendBaseURL } from "@/core/config";
+import { downloadMarkdownDocxFromBackend } from "@/core/api/markdown-docx-export";

-function filenameFromContentDisposition(header: string | null): string | null {
-  if (!header) return null;
-  const star = /filename\*=(?:UTF-8'')?([^;]+)/i.exec(header);
-  if (star) {
-    const raw = star[1].replace(/["']/g, "").trim();
-    try {
-      return decodeURIComponent(raw);
-    } catch {
-      return raw;
-    }
-  }
-  const plain = /filename="?([^";\n]+)"?/i.exec(header);
-  return plain ? plain[1].trim() : null;
-}
-
-function sanitizeFallbackFilename(title: string | undefined): string {
-  const base = (title?.trim() || "document").replace(/[<>:"/\\|?*\x00-\x1f]+/g, "_");
-  return base.toLowerCase().endsWith(".docx") ? base : `${base}.docx`;
-}
-
-async function downloadBlobResponse(response: Response, fallbackFilename: string) {
-  if (!response.ok) {
-    const error = await response
-      .json()
-      .catch(() => ({ detail: "导出 Word 失败" }));
-    const detail = error.detail;
-    if (typeof detail === "string") throw new Error(detail);
-    throw new Error("导出 Word 失败");
-  }
-
-  const blob = await response.blob();
-  const filename =
-    filenameFromContentDisposition(response.headers.get("Content-Disposition")) ??
-    fallbackFilename;
-  const url = URL.createObjectURL(blob);
-  const anchor = document.createElement("a");
-  anchor.href = url;
-  anchor.download = filename;
-  anchor.rel = "noopener";
-  document.body.appendChild(anchor);
-  anchor.click();
-  anchor.remove();
-  window.setTimeout(() => URL.revokeObjectURL(url), 30_000);
-}
-
-/** 调用后端导出 AI 写作草稿为 Word，仅传正文 markdown，不传目录/大纲。 */
+/** AI 写作草稿导出 Word（走通用 `/api/writing/export/docx`）。 */
 export async function downloadAIWritingDocx(options: {
  title?: string;
  draftMarkdown: string;
 }): Promise<void> {
-  const draftMarkdown = options.draftMarkdown.trim();
-  if (!draftMarkdown) {
-    throw new Error("文档内容为空");
-  }
-
-  const response = await apiFetch(`${getBackendBaseURL()}/api/ai-writing/export/docx`, {
-    method: "POST",
-    headers: { "Content-Type": "application/json" },
-    body: JSON.stringify({
-      title: options.title?.trim() || undefined,
-      draft_markdown: draftMarkdown,
-    }),
+  await downloadMarkdownDocxFromBackend({
+    title: options.title,
+    markdown: options.draftMarkdown,
  });
-
-  await downloadBlobResponse(response, sanitizeFallbackFilename(options.title));
 }
@@ -1,6 +1,7 @@
 import { FileText, PenLine } from 'lucide-react';

 import { useAIWritingOptional } from '../../contexts/AIWritingContext';
+import { useAIWritingHistoryOptional } from '../../contexts/AIWritingHistoryContext';
 import { useCanvasGraphContext } from '../../contexts/CanvasGraphContext';
 import { useCanvasUIContext } from '../../contexts/CanvasUIContext';
 import { assembleStreamingDraftMarkdown } from '../../hooks/useAIWritingStream';
@@ -32,8 +33,12 @@ function DraftWaitingPlaceholder() {

 export function AIWritingDraftPanel() {
  const writing = useAIWritingOptional();
+  const history = useAIWritingHistoryOptional();
+  const isHistoryMode = history?.isHistoryMode ?? false;
  const { artifact } = useCanvasGraphContext();
  const { isDraftEditable } = useCanvasUIContext();
+  // 历史回看与写作完成态一致：Tiptap + 目录；流式生成中仍走 Markdown 预览
+  const showCompletedDraftView = isDraftEditable || isHistoryMode;

  const writingStatus = writing?.state.status;
  // 仅当章节仍在累积时走流式 Markdown；draft_ready 清空 sections 后即使 status 尚未切走也进画布
@@ -96,7 +101,8 @@ export function AIWritingDraftPanel() {
        <div className="flex-1 overflow-hidden">
          <TextArtifactRenderer
            content={textContent}
-            isStreaming={!isDraftEditable}
+            isStreaming={!showCompletedDraftView}
+            readOnly={isHistoryMode}
          />
        </div>
      </div>
@@ -13,8 +13,8 @@ import {
 } from '@/components/ui/dialog';
 import { useArticleTypes } from '../../hooks/useArticleTypes';

-import { useCanvasGraphContext } from '../../contexts/CanvasGraphContext';
 import { useAIWriting } from '../../contexts/AIWritingContext';
+import { useAIWritingHistory } from '../../contexts/AIWritingHistoryContext';
 import { useAIWritingSessions } from '../../hooks/useAIWritingSessions';
 import { adminCleanupAIWritingSessions } from '../../api/ai-writing-sessions';

@@ -74,15 +74,13 @@ export function AIWritingPanel({
  hideAdvancedFields?: boolean;
 } = {}) {
  const navigate = useNavigate();
-  const { setArtifact } = useCanvasGraphContext();
  const { state, startWriting, submitIntervention, pauseWriting, resumeWriting, reset } = useAIWriting();
+  const { historySession, isHistoryMode, openHistory, closeHistory } = useAIWritingHistory();
  const { sessions, loading: sessionsLoading, refresh, rename, remove } = useAIWritingSessions();
  const { articleTypes, refresh: refreshArticleTypes } = useArticleTypes();

  useEffect(() => { refreshArticleTypes(); }, [refreshArticleTypes]);

-  // History view state — null means normal writing mode
-  const [historySession, setHistorySession] = useState<AIWritingSessionSummary | null>(null);
  const [reqDialogOpen, setReqDialogOpen] = useState(false);

  const isIdle = state.status === 'idle';
@@ -178,27 +176,13 @@ export function AIWritingPanel({
  }, []);

  const handleSelectHistory = useCallback((session: AIWritingSessionSummary) => {
-    setHistorySession(session);
-    // Push historical draft to the right panel
-    if (session.draft_markdown) {
-      setArtifact({
-        currentIndex: 0,
-        contents: [{
-          index: 0,
-          type: 'text',
-          title: session.draft_title ?? session.title,
-          fullMarkdown: session.draft_markdown,
-        }],
-      });
-    } else {
-      setArtifact(null);
-    }
-  }, [setArtifact]);
+    void openHistory(session);
+  }, [openHistory]);

  const handleNewSession = useCallback(() => {
-    setHistorySession(null);
+    closeHistory();
    reset();
-  }, [reset]);
+  }, [closeHistory, reset]);

  // ── 侧边栏"最近写作"通信：两种路径 ────────────────────────────────────────
  // 用 ref 包住 handler，保证事件监听器始终能拿到最新版本
@@ -246,60 +230,27 @@ export function AIWritingPanel({
    }
  }, [refresh]);

-  const showNewButton = historySession !== null || state.status !== 'idle';
-
-  // History view mode
-  if (historySession) {
-    return (
-      <div className="flex flex-col h-full overflow-hidden bg-background">
-        <DraftSync status={state.status} markdown={state.currentDraftMarkdown} title={state.currentDraftTitle} />
-        <div className="flex items-center justify-between px-4 py-2.5 border-b shrink-0">
-          <span className="text-sm font-semibold truncate flex-1 min-w-0 mr-2">
-            {historySession.draft_title ?? historySession.title}
-          </span>
-          <div className="flex items-center gap-1.5 shrink-0">
-            <Button
-              variant="ghost"
-              size="icon"
-              className="h-7 w-7"
-              onClick={() => navigate('/page/canvas/article-types')}
-              title="文章类型配置"
-            >
-              <Settings2 className="size-3.5" />
-            </Button>
-            <Button variant="ghost" size="sm" className="h-7 px-2 text-xs gap-1" onClick={handleNewSession}>
-              <Plus className="size-3" />
-              新建对话
-            </Button>
-            <AIWritingHistoryDropdown
-              sessions={sessions}
-              selectedId={historySession.id}
-              loading={sessionsLoading}
-              onSelect={handleSelectHistory}
-              onDelete={remove}
-              onRename={rename}
-              onRefresh={refresh}
-            />
-          </div>
-        </div>
-        <AIWritingHistoryView session={historySession} />
-      </div>
-    );
-  }
+  const showNewButton = isHistoryMode || state.status !== 'idle';

  return (
    <div className="flex flex-col h-full overflow-hidden bg-background">
-      <DraftSync status={state.status} markdown={state.currentDraftMarkdown} title={state.currentDraftTitle} />
+      {!isHistoryMode && (
+        <DraftSync status={state.status} markdown={state.currentDraftMarkdown} title={state.currentDraftTitle} />
+      )}
      {/* 头部 */}
      <div className="flex items-center justify-between px-4 py-2.5 border-b shrink-0">
        <span
          className={cn(
-            'text-sm font-semibold shrink-0',
-            !isIdle && 'cursor-pointer hover:text-primary transition-colors',
+            'text-sm font-semibold shrink-0 min-w-0 truncate',
+            isHistoryMode && 'flex-1 mr-2',
+            !isIdle && !isHistoryMode && 'cursor-pointer hover:text-primary transition-colors',
          )}
-          onClick={() => { if (!isIdle && state.request) setReqDialogOpen(true); }}
+          onClick={() => { if (!isIdle && !isHistoryMode && state.request) setReqDialogOpen(true); }}
+          title={isHistoryMode ? (historySession?.draft_title ?? historySession?.title) : undefined}
        >
-          AI 智能写作
+          {isHistoryMode
+            ? (historySession?.draft_title ?? historySession?.title ?? '写作历史')
+            : 'AI 智能写作'}
        </span>
        <div className="flex items-center gap-1.5">
          {/* ⚠️ 临时调试：admin 一键清理 —— 阶段 7 删冗余时移除 */}
@@ -365,7 +316,7 @@ export function AIWritingPanel({
          )}
          <AIWritingHistoryDropdown
            sessions={sessions}
-            selectedId={null}
+            selectedId={historySession?.id ?? null}
            loading={sessionsLoading}
            onSelect={handleSelectHistory}
            onDelete={remove}
@@ -378,8 +329,13 @@ export function AIWritingPanel({
      {/* 主体：relative 父容器 + absolute 滚动容器，确保滚动容器尺寸始终正确 */}
      <div className="flex-1 min-h-0 relative">
      <div ref={scrollRef} className="absolute inset-0 overflow-y-auto">
+        {/* 历史回看：左侧时间线（与实时写作同一套 AIWritingTimeline） */}
+        {isHistoryMode && historySession && (
+          <AIWritingHistoryView session={historySession} />
+        )}
+
        {/* 未开始时显示表单 */}
-        {isIdle && (
+        {isIdle && !isHistoryMode && (
          <AIWritingForm
            onSubmit={startWriting}
            hideAdvancedFields={hideAdvancedFields}
@@ -402,7 +358,7 @@ export function AIWritingPanel({
        )}

        {/* 运行中或完成后显示时间线 */}
-        {!isIdle && (
+        {!isIdle && !isHistoryMode && (
          <AIWritingTimeline
            events={state.progressEvents}
            completedInterventions={state.completedInterventions}
@@ -507,7 +463,7 @@ export function AIWritingPanel({
      </div>{/* 相对定位容器结束 */}

      {/* 状态栏 */}
-      {!isIdle && (
+      {!isIdle && !isHistoryMode && (
        <div
          className={cn(
            'shrink-0 px-4 py-2 border-t text-xs flex items-center gap-2',
@@ -22,6 +22,8 @@ import type { RewriteAction, RewriteTone } from "../../api/rewrite";
 interface TextArtifactRendererProps {
  content: CanvasArtifactText;
  isStreaming?: boolean;
+  /** 完成态只读（如历史回看）：保留目录 + 排版，禁用编辑与 AI 润色 */
+  readOnly?: boolean;
 }

 interface PanelPos {
@@ -38,7 +40,7 @@ interface LastAction {
  customInstruction?: string;
 }

-export function TextArtifactRenderer({ content, isStreaming }: TextArtifactRendererProps) {
+export function TextArtifactRenderer({ content, isStreaming, readOnly = false }: TextArtifactRendererProps) {
  const { artifact, setArtifact } = useCanvasGraphContext();
  const { writingSelection } = useCanvasUIContext();

@@ -72,7 +74,7 @@ export function TextArtifactRenderer({ content, isStreaming }: TextArtifactRende
  const editor = useWritingEditor({
    markdown: content.fullMarkdown,
    onChange: handleEditorChange,
-    editable: !isStreaming,
+    editable: !isStreaming && !readOnly,
    placeholder: "开始写作…",
  });

@@ -270,10 +272,15 @@ export function TextArtifactRenderer({ content, isStreaming }: TextArtifactRende
    );
  }

-  // ── Edit mode ─────────────────────────────────────────────────────────
+  // ── Edit mode（写作完成态 / 历史回看只读）────────────────────────────────
  return (
    <div className="h-full flex flex-col overflow-hidden">
-      <WritingToolbar editor={editor} markdown={content.fullMarkdown} title={content.title} />
+      <WritingToolbar
+        editor={editor}
+        markdown={content.fullMarkdown}
+        title={content.title}
+        readOnly={readOnly}
+      />

      <div className="flex-1 flex min-h-0 overflow-hidden">
        {/* 左侧目录栏（仿豆包）：文档标题层级导航 */}
@@ -282,7 +289,7 @@ export function TextArtifactRenderer({ content, isStreaming }: TextArtifactRende
        {/* 文档滚动区 */}
        <div ref={setDocScrollEl} className="flex-1 overflow-y-auto">
          <div className="max-w-2xl mx-auto px-10 pt-10">
-            {editor && (
+            {editor && !readOnly && (
              <>
                <WritingBubbleMenu editor={editor} onAiRewrite={openAiMenu} />
                <WritingParagraphMenu editor={editor} onAiRewrite={openAiMenu} />
@@ -294,7 +301,7 @@ export function TextArtifactRenderer({ content, isStreaming }: TextArtifactRende
      </div>

      {/* Phase: AI action menu */}
-      {phase === "menu" && (
+      {!readOnly && phase === "menu" && (
        <WritingAiMenu
          pos={panelPos}
          status={status}
@@ -307,7 +314,7 @@ export function TextArtifactRenderer({ content, isStreaming }: TextArtifactRende
      )}

      {/* Phase: result preview */}
-      {phase === "preview" && (
+      {!readOnly && phase === "preview" && (
        <WritingRewritePreview
          pos={panelPos}
          status={status}
@@ -69,9 +69,11 @@ interface WritingToolbarProps {
  markdown?: string;
  /** 文档标题，用作 .docx 文件名与封面 */
  title?: string;
+  /** 历史回看等场景：仅保留导出，隐藏格式工具 */
+  readOnly?: boolean;
 }

-export function WritingToolbar({ editor, markdown, title }: WritingToolbarProps) {
+export function WritingToolbar({ editor, markdown, title, readOnly = false }: WritingToolbarProps) {
  const [exporting, setExporting] = useState(false);

  if (!editor) return null;
@@ -94,6 +96,42 @@ export function WritingToolbar({ editor, markdown, title }: WritingToolbarProps)
    }
  };

+  if (readOnly) {
+    return (
+      <div className="flex items-center gap-2 px-3 py-1.5 border-b bg-background/80 backdrop-blur-sm shrink-0">
+        <span className="text-xs text-muted-foreground">历史文稿（只读）</span>
+        <div className="ml-auto flex items-center gap-1">
+          <Tooltip>
+            <TooltipTrigger asChild>
+              <button
+                type="button"
+                onMouseDown={(e) => {
+                  e.preventDefault();
+                  void handleExport();
+                }}
+                disabled={!canExport}
+                className={cn(
+                  "inline-flex h-7 w-7 items-center justify-center rounded-md text-sm transition-colors",
+                  "hover:bg-accent hover:text-accent-foreground",
+                  "disabled:pointer-events-none disabled:opacity-40",
+                )}
+              >
+                {exporting ? (
+                  <Loader2 className="h-3.5 w-3.5 animate-spin" />
+                ) : (
+                  <Download className="h-3.5 w-3.5" />
+                )}
+              </button>
+            </TooltipTrigger>
+            <TooltipContent side="bottom" className="text-xs">
+              导出 Word
+            </TooltipContent>
+          </Tooltip>
+        </div>
+      </div>
+    );
+  }
+
  return (
    <div className="flex items-center gap-0.5 px-3 py-1.5 border-b bg-background/80 backdrop-blur-sm shrink-0 flex-wrap">
      {/* Block type */}
@@ -0,0 +1,82 @@
+import { createContext, useCallback, useContext, useMemo, useState, type ReactNode } from 'react';
+
+import { getAIWritingSession } from '../api/ai-writing-sessions';
+import type { AIWritingSessionSummary } from '../api/ai-writing-sessions';
+import { useCanvasGraphContext } from './CanvasGraphContext';
+import { useCanvasUIContext } from './CanvasUIContext';
+
+type AIWritingHistoryContextValue = {
+  historySession: AIWritingSessionSummary | null;
+  isHistoryMode: boolean;
+  openHistory: (session: AIWritingSessionSummary) => Promise<void>;
+  closeHistory: () => void;
+};
+
+const AIWritingHistoryContext = createContext<AIWritingHistoryContextValue | null>(null);
+
+export function AIWritingHistoryProvider({ children }: { children: ReactNode }) {
+  const { setArtifact } = useCanvasGraphContext();
+  const { setIsDraftEditable } = useCanvasUIContext();
+  const [historySession, setHistorySession] = useState<AIWritingSessionSummary | null>(null);
+
+  const openHistory = useCallback(async (session: AIWritingSessionSummary) => {
+    let full = session;
+    if (!session.draft_markdown || !session.transcript) {
+      try {
+        full = await getAIWritingSession(session.id);
+      } catch {
+        // 列表项已够用，拉详情失败则继续用摘要
+      }
+    }
+    setHistorySession(full);
+    // 完成态布局（Tiptap + 左侧目录），由 DraftPanel 根据 isHistoryMode 只读展示
+    setIsDraftEditable(true);
+    if (full.draft_markdown) {
+      setArtifact({
+        currentIndex: 0,
+        contents: [{
+          index: 0,
+          type: 'text',
+          title: full.draft_title ?? full.title,
+          fullMarkdown: full.draft_markdown,
+        }],
+      });
+    } else {
+      setArtifact(null);
+    }
+  }, [setArtifact, setIsDraftEditable]);
+
+  const closeHistory = useCallback(() => {
+    setHistorySession(null);
+    setArtifact(null);
+    setIsDraftEditable(true);
+  }, [setArtifact, setIsDraftEditable]);
+
+  const value = useMemo(
+    () => ({
+      historySession,
+      isHistoryMode: historySession !== null,
+      openHistory,
+      closeHistory,
+    }),
+    [historySession, openHistory, closeHistory],
+  );
+
+  return (
+    <AIWritingHistoryContext.Provider value={value}>
+      {children}
+    </AIWritingHistoryContext.Provider>
+  );
+}
+
+export function useAIWritingHistory() {
+  const ctx = useContext(AIWritingHistoryContext);
+  if (!ctx) {
+    throw new Error('useAIWritingHistory must be used within AIWritingHistoryProvider');
+  }
+  return ctx;
+}
+
+export function useAIWritingHistoryOptional() {
+  return useContext(AIWritingHistoryContext);
+}
@@ -92,6 +92,7 @@ import { AIWritingPanel } from '../components/ai-writing/AIWritingPanel';
 import { AIWritingDraftPanel } from '../components/ai-writing/AIWritingDraftPanel';
 import { WritingSetupChat } from '../components/ai-writing/WritingSetupChat';
 import { AIWritingProvider, useAIWriting } from '../contexts/AIWritingContext';
+import { AIWritingHistoryProvider, useAIWritingHistory } from '../contexts/AIWritingHistoryContext';
 import { WritingFormProvider } from '../contexts/WritingFormContext';
 import {
  ResizableHandle,
@@ -102,17 +103,101 @@ import {
 // Panel IDs used as keys in the v4 Layout map
 const WRITING_ID = 'aw-writing';
 const DRAFT_ID   = 'aw-draft';
+// 初始问答阶段（idle）专用的两栏 ID：左=问答助手，右=写作配置表单
+const SETUP_CHAT_ID = 'aw-setup-chat';
+const SETUP_FORM_ID = 'aw-setup-form';

 // Match the original canvas page proportions (chat=35, artifact=65)
 const DEFAULT_LAYOUT = { [WRITING_ID]: 35, [DRAFT_ID]: 65 };
+// idle 阶段镜像原比例：问答框在左占大头(65)，配置表单在右占小头(35)
+const SETUP_LAYOUT = { [SETUP_CHAT_ID]: 65, [SETUP_FORM_ID]: 35 };

 /**
- * 右侧面板：未开始写作（idle）时显示「写作助手 Q&A」，帮用户聊清并回填左侧表单；
- * 一旦开始写作（status !== idle）就切回草稿预览。
+ * 写作配置表单面板（写作助手回填的目标），抽出复用：idle 时在右栏，开始写作后在左栏。
 */
-function AIWritingRightPanel() {
+function WritingFormPanel({ hideAdvancedFields }: { hideAdvancedFields: boolean }) {
+  return (
+    // 与原布局保持相同的 flex-1 min-h-0 包裹，确保内部 h-full 正确解析
+    <div className="flex-1 min-h-0 overflow-hidden">
+      <AIWritingPanel hideAdvancedFields={hideAdvancedFields} />
+    </div>
+  );
+}
+
+/**
+ * 根据写作状态切换两套左右布局：
+ *  - idle（初始问答阶段）：左=「写作助手 Q&A」，右=「写作配置选项」表单；
+ *  - 开始写作后：回到原布局——左=写作配置/时间线面板，右=草稿预览。
+ */
+function AIWritingLayout({ hideAdvancedFields }: { hideAdvancedFields: boolean }) {
+  const layoutRef = useRef<GroupImperativeHandle>(null);
  const { state } = useAIWriting();
-  return state.status === 'idle' ? <WritingSetupChat /> : <AIWritingDraftPanel />;
+  const { isHistoryMode } = useAIWritingHistory();
+
+  // 初始问答阶段：无历史查看；查看历史时与「正在写作」相同左右分栏（左时间线、右草稿）
+  if (state.status === 'idle' && !isHistoryMode) {
+    return (
+      <ResizablePanelGroup
+        orientation="horizontal"
+        groupRef={layoutRef}
+        defaultLayout={SETUP_LAYOUT}
+        className="h-full"
+      >
+        {/* 左侧：写作助手 Q&A */}
+        <ResizablePanel
+          id={SETUP_CHAT_ID}
+          defaultSize={65}
+          minSize={40}
+          className="overflow-hidden"
+        >
+          <WritingSetupChat />
+        </ResizablePanel>
+
+        <ResizableHandle withHandle />
+
+        {/* 右侧：写作配置选项表单 */}
+        <ResizablePanel
+          id={SETUP_FORM_ID}
+          defaultSize={35}
+          minSize={20}
+          className="overflow-hidden flex flex-col"
+        >
+          <WritingFormPanel hideAdvancedFields={hideAdvancedFields} />
+        </ResizablePanel>
+      </ResizablePanelGroup>
+    );
+  }
+
+  return (
+    <ResizablePanelGroup
+      orientation="horizontal"
+      groupRef={layoutRef}
+      defaultLayout={DEFAULT_LAYOUT}
+      className="h-full"
+    >
+      {/* 左侧：AI 写作面板，与原画布页左侧等宽 */}
+      <ResizablePanel
+        id={WRITING_ID}
+        defaultSize={35}
+        minSize={20}
+        className="overflow-hidden flex flex-col"
+      >
+        <WritingFormPanel hideAdvancedFields={hideAdvancedFields} />
+      </ResizablePanel>
+
+      <ResizableHandle withHandle />
+
+      {/* 右侧：草稿预览面板 */}
+      <ResizablePanel
+        id={DRAFT_ID}
+        defaultSize={65}
+        minSize={40}
+        className="overflow-hidden"
+      >
+        <AIWritingDraftPanel />
+      </ResizablePanel>
+    </ResizablePanelGroup>
+  );
 }

 export default function AIWritingPage({
@@ -120,53 +205,23 @@ export default function AIWritingPage({
 }: {
  hideAdvancedFields?: boolean;
 } = {}) {
-  const layoutRef = useRef<GroupImperativeHandle>(null);
-
  return (
    <CanvasThreadProvider>
    <CanvasGraphProvider>
      <CanvasUIProvider>
+      <AIWritingHistoryProvider>
      <AIWritingProvider>
      <WritingFormProvider>
      <TooltipProvider delayDuration={300}>
        <div className="h-full flex flex-col overflow-hidden bg-background">
          <div className="flex-1 min-h-0 overflow-hidden">
-            <ResizablePanelGroup
-              orientation="horizontal"
-              groupRef={layoutRef}
-              defaultLayout={DEFAULT_LAYOUT}
-              className="h-full"
-            >
-              {/* 左侧：AI 写作面板，与原画布页左侧等宽 */}
-              <ResizablePanel
-                id={WRITING_ID}
-                defaultSize={35}
-                minSize={20}
-                className="overflow-hidden flex flex-col"
-              >
-                {/* 与原布局保持相同的 flex-1 min-h-0 包裹，确保内部 h-full 正确解析 */}
-                <div className="flex-1 min-h-0 overflow-hidden">
-                  <AIWritingPanel hideAdvancedFields={hideAdvancedFields} />
-                </div>
-              </ResizablePanel>
-
-              <ResizableHandle withHandle />
-
-              {/* 右侧：草稿预览面板 */}
-              <ResizablePanel
-                id={DRAFT_ID}
-                defaultSize={65}
-                minSize={40}
-                className="overflow-hidden"
-              >
-                <AIWritingRightPanel />
-              </ResizablePanel>
-            </ResizablePanelGroup>
+            <AIWritingLayout hideAdvancedFields={hideAdvancedFields} />
          </div>
        </div>
      </TooltipProvider>
      </WritingFormProvider>
      </AIWritingProvider>
+      </AIWritingHistoryProvider>
      </CanvasUIProvider>
    </CanvasGraphProvider>
    </CanvasThreadProvider>
@@ -1,6 +1,7 @@
 "use client";

 import { useEffect, useMemo, useRef, useState } from "react";
+import { useQueryClient } from "@tanstack/react-query";
 import {
  Download,
  Edit3,
@@ -71,6 +72,7 @@ const emptyForm = {
 };

 export default function AdminScheduledTasksPage() {
+  const queryClient = useQueryClient();
  const { theme } = useTheme();
  const navigate = useNavigate();
  const [searchParams] = useSearchParams();
@@ -178,8 +180,15 @@ export default function AdminScheduledTasksPage() {
  };

  const triggerTask = async (task: ScheduledTask) => {
+    setSelectedTaskId(task.task_id);
    try {
      await actions.trigger.mutateAsync(task.task_id);
+      await queryClient.invalidateQueries({
+        queryKey: ["scheduled-tasks", "admin", task.task_id, "runs"],
+      });
+      await queryClient.invalidateQueries({
+        queryKey: ["scheduled-tasks", "admin", "list"],
+      });
      toast.success("已触发执行");
    } catch (error) {
      toast.error(error instanceof Error ? error.message : "触发失败");
@@ -208,23 +217,24 @@ export default function AdminScheduledTasksPage() {
    <WorkspaceContainer>
      <WorkspaceHeader />
      <WorkspaceBody>
-        <div className="grid size-full min-h-0 grid-cols-1 gap-4 p-4 xl:grid-cols-[460px_minmax(0,1fr)]">
-          <Card className="flex min-h-0 flex-col">
+        <div className="grid size-full min-h-0 grid-cols-1 grid-rows-[minmax(0,1fr)_minmax(0,1fr)] gap-4 p-4 xl:grid-cols-[460px_minmax(0,1fr)] xl:grid-rows-1">
+          <Card className="flex min-h-0 min-w-0 flex-col">
            <CardHeader className="gap-3">
-              <div>
+              <div className="min-w-0">
                <CardTitle>定时任务管理</CardTitle>
                <p className="text-muted-foreground mt-1 text-sm">
                  管理员视图：查看、编辑、删除全部用户的定时任务
                </p>
              </div>
              <form
-                className="flex gap-2"
+                className="flex min-w-0 gap-2"
                onSubmit={(event) => {
                  event.preventDefault();
                  setSearch(searchInput.trim());
                }}
              >
                <Input
+                  className="min-w-0"
                  value={searchInput}
                  onChange={(event) => setSearchInput(event.target.value)}
                  placeholder="按任务名称搜索"
@@ -268,7 +278,7 @@ export default function AdminScheduledTasksPage() {
                      onClick={() => setSelectedTaskId(task.task_id)}
                    >
                      <div className="flex items-start justify-between gap-3">
-                        <div className="min-w-0">
+                        <div className="min-w-0 flex-1">
                          <div className="truncate font-medium">
                            {task.name}
                          </div>
@@ -348,10 +358,10 @@ export default function AdminScheduledTasksPage() {
            </CardContent>
          </Card>

-          <Card className="flex min-h-0 flex-col">
+          <Card className="flex min-h-0 min-w-0 flex-col">
            <CardHeader className="gap-2">
              <CardTitle>执行记录</CardTitle>
-              <p className="text-muted-foreground text-sm">
+              <p className="text-muted-foreground min-w-0 truncate text-sm">
                {selectedTask ? selectedTask.name : "请选择左侧任务"}
              </p>
            </CardHeader>
@@ -379,11 +389,11 @@ export default function AdminScheduledTasksPage() {
                      className="rounded-md border p-4 transition-colors hover:bg-accent/40"
                    >
                      <div className="flex flex-wrap items-start justify-between gap-3">
-                        <div className="min-w-0">
+                        <div className="min-w-0 flex-1">
                          <div className="truncate font-medium">
                            {run.result?.title || formatDate(run.scheduled_for)}
                          </div>
-                          <div className="text-muted-foreground mt-1 text-xs">
+                          <div className="text-muted-foreground mt-1 break-words text-xs">
                            计划：{formatDate(run.scheduled_for)} · 开始：
                            {formatDate(run.started_at)}
                          </div>
@@ -1,46 +1,21 @@
 "use client";

-import { Loader2, MessageSquareIcon, SearchIcon, UserIcon } from "lucide-react";
-import { useMemo, useState } from "react";
+import { Loader2, MessageSquareIcon, SearchIcon, UserIcon, XIcon } from "lucide-react";
+import { useEffect, useMemo, useState } from "react";
+import { useSearchParams } from "react-router-dom";

 import { Badge } from "@/components/ui/badge";
+import { Button } from "@/components/ui/button";
 import { Input } from "@/components/ui/input";
+import { Pagination } from "@/components/ui/pagination";
 import { ScrollArea } from "@/components/ui/scroll-area";
 import { Tabs, TabsList, TabsTrigger } from "@/components/ui/tabs";
-import { useUserMemory, useUserThreadMessages, useUserThreads } from "@/core/admin/hooks";
-import type { AdminMemoryBucket, AdminMessage } from "@/core/admin/api";
+import { useUserMemory, useUserQa, useUserThreads } from "@/core/admin/hooks";
+import type { AdminMemoryBucket, AdminUserQaItem } from "@/core/admin/api";
 import { useAllUsers } from "@/core/auth/hooks";
 import { cn } from "@/lib/utils";

-/** Flatten a langchain message dump (or raw string / block list) into text. */
-function extractText(content: unknown): string {
-  if (content == null) return "";
-  if (typeof content === "string") return content;
-  if (Array.isArray(content)) {
-    return content
-      .map((block) => {
-        if (typeof block === "string") return block;
-        if (block && typeof block === "object") {
-          const text = (block as Record<string, unknown>).text;
-          if (typeof text === "string") return text;
-        }
-        return "";
-      })
-      .join("");
-  }
-  if (typeof content === "object") {
-    const inner = (content as Record<string, unknown>).content;
-    if (inner !== undefined) return extractText(inner);
-  }
-  return "";
-}
-
-function roleOf(message: AdminMessage): "user" | "assistant" | null {
-  const type = (message.type ?? "").toLowerCase();
-  if (type === "human") return "user";
-  if (type === "ai" || type === "aimessagechunk") return "assistant";
-  return null; // tool results and system messages are hidden from the Q&A view
-}
+const QA_PAGE_SIZE = 20;

 function fmtTime(iso: string): string {
  if (!iso) return "";
@@ -48,24 +23,39 @@ function fmtTime(iso: string): string {
  return Number.isNaN(d.getTime()) ? iso : d.toLocaleString();
 }

-/** A single Q&A bubble. */
-function MessageRow({ message }: { message: AdminMessage }) {
-  const role = roleOf(message);
-  if (!role) return null;
-  const text = extractText(message.content).trim();
-  if (!text) return null; // skip empty AI turns (e.g. tool-call-only responses)
+function fmtNumber(value: number): string {
+  return new Intl.NumberFormat("zh-CN").format(value || 0);
+}
+
+function QaItemCard({ item }: { item: AdminUserQaItem }) {
+  const isError = item.status === "error" || item.status === "timeout";
  return (
-    <div className={cn("flex flex-col gap-1", role === "user" ? "items-start" : "items-end")}>
-      <span className="text-muted-foreground text-xs">
-        {role === "user" ? "用户提问" : "AI 回答"}
-      </span>
-      <div
-        className={cn(
-          "max-w-[85%] whitespace-pre-wrap rounded-lg border px-3 py-2 text-sm",
-          role === "user" ? "bg-muted" : "bg-primary/5 border-primary/20",
-        )}
-      >
-        {text}
+    <div className="rounded-md border bg-background p-4">
+      <div className="mb-3 flex flex-wrap items-center gap-2">
+        <span className="text-muted-foreground text-xs">{fmtTime(item.created_at)}</span>
+        <Badge variant={isError ? "destructive" : "secondary"}>{item.status || "unknown"}</Badge>
+        {item.model_name && <Badge variant="outline">{item.model_name}</Badge>}
+        {item.assistant_id && <Badge variant="outline">{item.assistant_id}</Badge>}
+        <span className="text-muted-foreground text-xs">{fmtNumber(item.total_tokens)} tokens</span>
+      </div>
+      {(item.thread_title || item.thread_id) && (
+        <div className="text-muted-foreground mb-3 truncate text-xs">
+          {item.thread_title || "未命名会话"} · {item.thread_id}
+        </div>
+      )}
+      <div className="grid gap-3">
+        <div>
+          <div className="text-muted-foreground mb-1 text-xs font-medium">用户提问</div>
+          <div className="bg-muted whitespace-pre-wrap rounded-md px-3 py-2 text-sm">
+            {item.question || "空问题"}
+          </div>
+        </div>
+        <div>
+          <div className="text-muted-foreground mb-1 text-xs font-medium">AI 回答</div>
+          <div className="border-primary/20 bg-primary/5 max-h-64 overflow-auto whitespace-pre-wrap rounded-md border px-3 py-2 text-sm">
+            {item.answer || "暂无回答"}
+          </div>
+        </div>
      </div>
    </div>
  );
@@ -109,19 +99,38 @@ function MemoryBucketView({ bucket }: { bucket: AdminMemoryBucket }) {
 }

 export default function AdminUserActivityPage() {
+  const [searchParams] = useSearchParams();
  const { data: users, isLoading: usersLoading } = useAllUsers(true);
  const [userId, setUserId] = useState<string | null>(null);
  const [threadId, setThreadId] = useState<string | null>(null);
  const [userQuery, setUserQuery] = useState("");
+  const [qaQuery, setQaQuery] = useState("");
+  const [qaPage, setQaPage] = useState(1);
  const [tab, setTab] = useState<"qa" | "memory">("qa");
+  const targetUserId = searchParams.get("user");

  const { data: threads, isLoading: threadsLoading } = useUserThreads(userId);
-  const { data: messages, isLoading: messagesLoading } = useUserThreadMessages(
-    userId,
-    threadId,
-  );
+  const { data: qaData, isLoading: qaLoading, isFetching: qaFetching } = useUserQa(userId, {
+    page: qaPage,
+    pageSize: QA_PAGE_SIZE,
+    q: qaQuery,
+  });
  const { data: memory, isLoading: memoryLoading } = useUserMemory(userId);

+  useEffect(() => {
+    if (targetUserId) {
+      setUserId(targetUserId);
+      setThreadId(null);
+      setQaQuery("");
+      setQaPage(1);
+      setTab("qa");
+    }
+  }, [targetUserId]);
+
+  useEffect(() => {
+    setQaPage(1);
+  }, [userId, qaQuery]);
+
  const filteredUsers = useMemo(() => {
    const needle = userQuery.trim().toLowerCase();
    const list = users ?? [];
@@ -133,9 +142,17 @@ export default function AdminUserActivityPage() {
  const selectUser = (id: string) => {
    setUserId(id);
    setThreadId(null);
+    setQaQuery("");
+    setQaPage(1);
    setTab("qa");
  };

+  const clearQaFilter = () => {
+    setThreadId(null);
+    setQaQuery("");
+    setQaPage(1);
+  };
+
  return (
    <div className="flex size-full flex-col">
      <div className="border-b px-6 py-4">
@@ -192,8 +209,19 @@ export default function AdminUserActivityPage() {

        {/* Pane 2: threads */}
        <div className="flex w-72 shrink-0 flex-col border-r">
-          <div className="text-muted-foreground border-b px-3 py-2 text-xs font-medium">
-            会话列表{threads ? `（${threads.length}）` : ""}
+          <div className="flex items-center justify-between gap-2 border-b px-3 py-2">
+            <span className="text-muted-foreground text-xs font-medium">
+              会话列表{threads ? `（${threads.length}）` : ""}
+            </span>
+            <Button
+              type="button"
+              variant="ghost"
+              size="sm"
+              disabled={!userId || (!threadId && !qaQuery)}
+              onClick={clearQaFilter}
+            >
+              全部
+            </Button>
          </div>
          <ScrollArea className="min-h-0 flex-1">
            {!userId && (
@@ -218,6 +246,8 @@ export default function AdminUserActivityPage() {
                  type="button"
                  onClick={() => {
                    setThreadId(thread.thread_id);
+                    setQaQuery(thread.thread_id);
+                    setQaPage(1);
                    setTab("qa");
                  }}
                  className={cn(
@@ -259,28 +289,63 @@ export default function AdminUserActivityPage() {

              <ScrollArea className="min-h-0 flex-1">
                {tab === "qa" && (
-                  <div className="p-4">
-                    {!threadId && (
-                      <div className="text-muted-foreground flex flex-col items-center gap-2 py-16 text-sm">
-                        <MessageSquareIcon className="size-6" />
-                        请从中间列选择一个会话
+                  <div className="flex flex-col gap-4 p-4">
+                    <div className="flex flex-col gap-2">
+                      <div className="flex items-center gap-2">
+                        <div className="relative min-w-0 flex-1">
+                          <SearchIcon className="text-muted-foreground absolute left-3 top-1/2 size-4 -translate-y-1/2" />
+                          <Input
+                            value={qaQuery}
+                            onChange={(event) => {
+                              setQaQuery(event.target.value);
+                              setThreadId(null);
+                              setQaPage(1);
+                            }}
+                            placeholder="搜索问题、回答、运行 ID 或会话 ID"
+                            className="pl-9"
+                          />
+                        </div>
+                        {qaQuery && (
+                          <Button type="button" variant="outline" size="sm" onClick={clearQaFilter}>
+                            <XIcon className="size-4" />
+                            清空
+                          </Button>
+                        )}
                      </div>
-                    )}
-                    {threadId && messagesLoading && (
+                      <div className="text-muted-foreground flex flex-wrap items-center gap-2 text-xs">
+                        <span>共 {fmtNumber(qaData?.total ?? 0)} 条问答</span>
+                        {threadId && <Badge variant="outline">已按会话过滤</Badge>}
+                        {qaFetching && !qaLoading && (
+                          <span className="inline-flex items-center gap-1">
+                            <Loader2 className="size-3 animate-spin" /> 更新中
+                          </span>
+                        )}
+                      </div>
+                    </div>
+
+                    {qaLoading && (
                      <div className="text-muted-foreground flex items-center justify-center gap-2 py-16 text-sm">
                        <Loader2 className="size-4 animate-spin" /> 加载中
                      </div>
                    )}
-                    {threadId && !messagesLoading && (
+                    {!qaLoading && (qaData?.items.length ?? 0) === 0 && (
+                      <div className="text-muted-foreground flex flex-col items-center gap-2 py-16 text-sm">
+                        <MessageSquareIcon className="size-6" />
+                        暂无匹配的问答记录
+                      </div>
+                    )}
+                    {!qaLoading && (qaData?.items.length ?? 0) > 0 && (
                      <div className="flex flex-col gap-3">
-                        {(messages ?? []).map((m, i) => (
-                          <MessageRow key={m.id ?? i} message={m} />
+                        {(qaData?.items ?? []).map((item) => (
+                          <QaItemCard key={item.run_id} item={item} />
                        ))}
-                        {(messages ?? []).every((m) => !roleOf(m)) && (
-                          <div className="text-muted-foreground py-12 text-center text-sm">
-                            该会话暂无问答记录
-                          </div>
-                        )}
+                        <Pagination
+                          page={qaPage}
+                          pageSize={QA_PAGE_SIZE}
+                          total={qaData?.total ?? 0}
+                          onPageChange={setQaPage}
+                          className="pt-2"
+                        />
                      </div>
                    )}
                  </div>
@@ -0,0 +1,204 @@
+"use client";
+
+import { ArrowLeft, Save, Search, ShieldOff, SlidersHorizontal, X } from "lucide-react";
+import { useMemo, useState } from "react";
+import { useNavigate } from "react-router-dom";
+import { toast } from "sonner";
+
+import { Badge } from "@/components/ui/badge";
+import { Button } from "@/components/ui/button";
+import { Input } from "@/components/ui/input";
+import { ScrollArea } from "@/components/ui/scroll-area";
+import { Switch } from "@/components/ui/switch";
+import type { UserListItem } from "@/core/auth/api";
+import { useAllUsers } from "@/core/auth/hooks";
+import {
+  useLeaderboardSettings,
+  useUpdateLeaderboardSettings,
+} from "@/core/system-settings/hooks";
+
+function userLabel(user?: UserListItem) {
+  return user?.email || user?.id || "";
+}
+
+export default function AdminUserLeaderboardSettingsPage() {
+  const navigate = useNavigate();
+  const { data: users = [] } = useAllUsers(true);
+  const { data: settings, isLoading } = useLeaderboardSettings();
+  const updateSettings = useUpdateLeaderboardSettings();
+  const [query, setQuery] = useState("");
+
+  const excludedIds = settings?.exclude_user_ids ?? [];
+  const selectedUsers = useMemo(
+    () => excludedIds.map((id) => users.find((user) => user.id === id) ?? ({ id, email: id, system_role: "user" } as UserListItem)),
+    [excludedIds, users],
+  );
+  const candidates = useMemo(() => {
+    const needle = query.trim().toLowerCase();
+    if (!needle) return [];
+    return users
+      .filter((user) => !excludedIds.includes(user.id))
+      .filter((user) => `${user.email} ${user.id}`.toLowerCase().includes(needle))
+      .slice(0, 8);
+  }, [excludedIds, query, users]);
+
+  const patch = async (body: Record<string, unknown>) => {
+    try {
+      await updateSettings.mutateAsync(body);
+      toast.success("排行榜设置已保存");
+    } catch (error) {
+      toast.error(error instanceof Error ? error.message : "保存失败");
+    }
+  };
+
+  const addUser = (userId: string) => {
+    void patch({ exclude_user_ids: [...excludedIds, userId] });
+    setQuery("");
+  };
+
+  const removeUser = (userId: string) => {
+    void patch({ exclude_user_ids: excludedIds.filter((id) => id !== userId) });
+  };
+
+  return (
+    <div className="flex size-full min-h-0 bg-[#FFF7F7] text-[#231815] dark:bg-[#19090A] dark:text-white">
+      <main className="flex min-w-0 flex-1 flex-col">
+        <div className="border-b border-[#F1D6D6] bg-white px-6 py-5 dark:border-[#462123] dark:bg-[#230D0F]">
+          <div className="flex flex-wrap items-center justify-between gap-3">
+            <div>
+              <div className="mb-2 flex items-center gap-2 text-sm text-[#9F343A]">
+                <SlidersHorizontal className="size-4" />
+                管理员设置
+              </div>
+              <h1 className="text-2xl font-semibold">排行榜设置</h1>
+              <p className="mt-1 text-sm text-[#7A5A5A] dark:text-[#D8B8B8]">
+                这里的规则会影响用户排行榜、趋势、技能、模型、问题与个人详情统计。
+              </p>
+            </div>
+            <div className="flex gap-2">
+              <Button variant="outline" onClick={() => navigate("/page/strategy/admin/user-leaderboard")}>
+                <ArrowLeft className="mr-1 size-4" />
+                返回排行榜
+              </Button>
+            </div>
+          </div>
+        </div>
+
+        <ScrollArea className="min-h-0 flex-1">
+          <div className="mx-auto max-w-6xl space-y-5 p-6">
+            <section className="rounded-lg border border-[#F1D6D6] bg-white p-5 shadow-sm dark:border-[#462123] dark:bg-[#230D0F]">
+              <div className="mb-4 flex items-start justify-between gap-3">
+                <div>
+                  <div className="flex items-center gap-2 font-semibold">
+                    <ShieldOff className="size-4 text-[#C1121F]" />
+                    统计排除名单
+                  </div>
+                  <p className="mt-1 text-sm text-[#7A5A5A] dark:text-[#D8B8B8]">
+                    名单中的账号不会进入排行榜、趋势、问题、模型和技能统计。
+                  </p>
+                </div>
+                {excludedIds.length > 0 && (
+                  <Button size="sm" variant="outline" onClick={() => void patch({ exclude_user_ids: [] })}>
+                    清空名单
+                  </Button>
+                )}
+              </div>
+
+              <div className="grid gap-4 lg:grid-cols-[340px_minmax(0,1fr)]">
+                <div className="relative">
+                  <Search className="absolute left-3 top-1/2 size-4 -translate-y-1/2 text-[#A87575]" />
+                  <Input
+                    value={query}
+                    onChange={(event) => setQuery(event.target.value)}
+                    placeholder="搜索账号邮箱或 ID"
+                    className="h-10 border-[#F1D6D6] bg-white pl-9"
+                  />
+                  {query.trim() && candidates.length > 0 && (
+                    <div className="absolute z-20 mt-2 max-h-72 w-full overflow-hidden rounded-lg border border-[#F1D6D6] bg-white shadow-lg dark:border-[#462123] dark:bg-[#230D0F]">
+                      <ScrollArea className="max-h-72">
+                        {candidates.map((user) => (
+                          <button
+                            key={user.id}
+                            type="button"
+                            onClick={() => addUser(user.id)}
+                            className="flex w-full items-center justify-between gap-3 border-b border-[#F8EAEA] px-3 py-2 text-left text-sm last:border-b-0 hover:bg-[#FFF1F1] dark:border-[#462123] dark:hover:bg-[#361315]"
+                          >
+                            <span className="min-w-0">
+                              <span className="block truncate font-medium">{user.email}</span>
+                              <span className="block truncate text-xs text-[#8B6B6B]">{user.id}</span>
+                            </span>
+                            <Badge variant="outline">{user.system_role === "admin" ? "管理员" : "用户"}</Badge>
+                          </button>
+                        ))}
+                      </ScrollArea>
+                    </div>
+                  )}
+                </div>
+                <div className="min-h-10 rounded-lg bg-[#FFF7F7] p-3 dark:bg-[#19090A]">
+                  {selectedUsers.length === 0 ? (
+                    <span className="text-sm text-[#8B6B6B]">暂无排除账号</span>
+                  ) : (
+                    <div className="flex flex-wrap gap-2">
+                      {selectedUsers.map((user) => (
+                        <span
+                          key={user.id}
+                          className="inline-flex max-w-[280px] items-center gap-1.5 rounded-full border border-[#F1D6D6] bg-white px-3 py-1.5 text-xs text-[#7A1F25] shadow-sm dark:border-[#462123] dark:bg-[#230D0F] dark:text-[#F2B8BB]"
+                          title={userLabel(user)}
+                        >
+                          <span className="truncate">{userLabel(user)}</span>
+                          <button type="button" onClick={() => removeUser(user.id)} aria-label={`移除 ${userLabel(user)}`}>
+                            <X className="size-3.5" />
+                          </button>
+                        </span>
+                      ))}
+                    </div>
+                  )}
+                </div>
+              </div>
+            </section>
+
+            <section className="rounded-lg border border-[#F1D6D6] bg-white p-5 shadow-sm dark:border-[#462123] dark:bg-[#230D0F]">
+              <div className="mb-4 flex items-start justify-between gap-3">
+                <div>
+                  <div className="flex items-center gap-2 font-semibold">
+                    <Save className="size-4 text-[#C1121F]" />
+                    统计规则
+                  </div>
+                  <p className="mt-1 text-sm text-[#7A5A5A] dark:text-[#D8B8B8]">
+                    关闭某项后，该类数据会从榜单、趋势、问题列表和个人统计中移除。
+                  </p>
+                </div>
+                {isLoading && <Badge variant="outline">加载中</Badge>}
+              </div>
+
+              <div className="grid gap-3 md:grid-cols-2">
+                {[
+                  ["include_scheduled", "统计定时任务", "关闭后，定时任务产生的运行、问答、Token、模型调用、最新问题都不统计。"],
+                  ["include_admins", "统计管理员账号", "关闭后，管理员账号不参与排行和整体指标。"],
+                  ["include_failed", "统计失败运行", "关闭后，失败运行和失败模型调用不进入榜单。"],
+                  ["cleanup_system_questions", "隐藏系统标签问题", "开启后，<uploaded_files> 等附件/系统标签不会出现在问题列表。"],
+                ].map(([key, title, desc]) => (
+                  <label
+                    key={key}
+                    className="flex min-h-28 cursor-pointer items-start justify-between gap-4 rounded-lg border border-[#F1D6D6] bg-[#FFF7F7] p-4 dark:border-[#462123] dark:bg-[#19090A]"
+                  >
+                    <span>
+                      <span className="block font-medium">{title}</span>
+                      <span className="mt-1 block text-sm leading-6 text-[#7A5A5A] dark:text-[#D8B8B8]">{desc}</span>
+                    </span>
+                    <Switch
+                      checked={Boolean(settings?.[key as keyof typeof settings])}
+                      disabled={!settings || updateSettings.isPending}
+                      onCheckedChange={(checked) => void patch({ [key]: checked })}
+                      aria-label={title}
+                    />
+                  </label>
+                ))}
+              </div>
+            </section>
+          </div>
+        </ScrollArea>
+      </main>
+    </div>
+  );
+}
@@ -131,8 +131,8 @@ export default function AgentChatPage() {
  const pendingMessageHandled = useRef(false);
  useEffect(() => {
    if (pendingMessageHandled.current) return;
-    if (!agent_id || !isNewThread || hasStartedConversation) return;
-    let pending: { agentId?: string; text?: string } | null = null;
+    if (!agent_id) return;
+    let pending: { agentId?: string; threadId?: string; text?: string } | null = null;
    try {
      const raw = sessionStorage.getItem("pendingAgentMessage");
      if (raw) pending = JSON.parse(raw);
@@ -140,10 +140,15 @@ export default function AgentChatPage() {
      pending = null;
    }
    if (!pending || pending.agentId !== agent_id || !pending.text) return;
+    if (pending.threadId) {
+      if (pending.threadId !== threadId) return;
+    } else if (!isNewThread) {
+      return;
+    }
    pendingMessageHandled.current = true;
    sessionStorage.removeItem("pendingAgentMessage");
    handleSubmit({ text: pending.text, files: [] });
-  }, [agent_id, isNewThread, hasStartedConversation, handleSubmit]);
+  }, [agent_id, threadId, isNewThread, handleSubmit]);

  const handleClarificationSubmit = useCallback(
    (answer: string) => {
@@ -250,6 +255,7 @@ export default function AgentChatPage() {
                    className="w-full"
                    isNewThread={isLandingState}
                    threadId={threadId}
+                    assistantId={agent_id}
                    autoFocus={isLandingState}
                    status={
                      thread.error
@@ -1,10 +1,13 @@
 "use client";

 import { useRouter } from "next/navigation";
-import { useCallback, useEffect, useMemo, useState } from "react";
+import { useCallback, useEffect, useMemo, useRef, useState } from "react";
+import { toast } from "sonner";

 import { type PromptInputMessage } from "@/components/ai-elements/prompt-input";
+import { getAPIClient } from "@/core/api";
 import { usePromptPrefixSettings } from "@/core/system-settings/hooks";
+import { useUserPreferencesQuery } from "@/core/user-preferences";
 import { ArtifactTrigger, useArtifacts } from "@/components/workspace/artifacts";
 import {
  ChatBox,
@@ -50,8 +53,15 @@ export default function ChatPage() {
  const [mounted, setMounted] = useState(false);
  const { tokenUsageEnabled } = useModels();
  const { data: promptPrefixSettings } = usePromptPrefixSettings();
+  // Personal opt-out: when set, hide the admin prompt-prefix switch entirely and
+  // never apply the prefix — the user uses only their own prompts.
+  const { data: userPreferences, isLoading: preferencesLoading } =
+    useUserPreferencesQuery();
+  const hideAdminPrompt = userPreferences?.hide_admin_prompt_prefix === true;
  const [promptPrefixOn, setPromptPrefixOn] = useState(false);
  const [selectedAgentId, setSelectedAgentId] = useState<string | null>(null);
+  const [agentHandoffPending, setAgentHandoffPending] = useState(false);
+  const agentHandoffPendingRef = useRef(false);
  const { agents: selectorAgents, isLoading: selectorLoading } =
    useAgentSelector();
  const { selectedArtifact } = useArtifacts();
@@ -142,15 +152,37 @@ export default function ChatPage() {
        message.text &&
        (!message.files || message.files.length === 0)
      ) {
-        try {
-          sessionStorage.setItem(
-            "pendingAgentMessage",
-            JSON.stringify({ agentId: selectedAgentId, text: message.text }),
-          );
-        } catch {
-          // sessionStorage may be unavailable in private mode; fall through.
-        }
-        router.push(`/page/workspace/agents/${selectedAgentId}/chats/new`);
+        if (agentHandoffPendingRef.current) return;
+        const text = message.text.trim();
+        agentHandoffPendingRef.current = true;
+        setAgentHandoffPending(true);
+        setHasStartedConversation(true);
+        void (async () => {
+          try {
+            const created = await getAPIClient(isMock).threads.create({
+              metadata: { agent_id: selectedAgentId },
+            });
+            sessionStorage.setItem(
+              "pendingAgentMessage",
+              JSON.stringify({
+                agentId: selectedAgentId,
+                threadId: created.thread_id,
+                text,
+              }),
+            );
+            saveLastAgentId(selectedAgentId);
+            router.push(
+              `/page/workspace/agents/${selectedAgentId}/chats/${created.thread_id}`,
+            );
+          } catch (err) {
+            agentHandoffPendingRef.current = false;
+            setAgentHandoffPending(false);
+            setHasStartedConversation(false);
+            toast.error(
+              err instanceof Error ? err.message : "创建智能体对话失败",
+            );
+          }
+        })();
        return;
      }

@@ -159,6 +191,8 @@ export default function ChatPage() {
        isNewThread &&
        !hasStartedConversation &&
        promptPrefixOn &&
+        !preferencesLoading &&
+        !hideAdminPrompt &&
        promptPrefixSettings?.enabled === true;
      setHasStartedConversation(true);
      window.dispatchEvent(
@@ -189,7 +223,11 @@ export default function ChatPage() {
      hasStartedConversation,
      promptPrefixOn,
      promptPrefixSettings,
+      hideAdminPrompt,
+      preferencesLoading,
      selectedAgentId,
+      agentHandoffPending,
+      isMock,
      router,
      settings.context.writing_mode,
      writingArtifactPath,
@@ -217,6 +255,9 @@ export default function ChatPage() {

  const promptPrefixProp = useMemo(() => {
    if (!promptPrefixSettings?.enabled) return undefined;
+    if (preferencesLoading) return undefined;
+    // Personal opt-out hides the admin prompt-prefix switch entirely.
+    if (hideAdminPrompt) return undefined;
    // The prefix toggle is offered only on the opening turn of a new thread.
    if (!isNewThread || hasStartedConversation) return undefined;
    return {
@@ -224,7 +265,14 @@ export default function ChatPage() {
      on: promptPrefixOn,
      onToggle: () => setPromptPrefixOn((v) => !v),
    };
-  }, [promptPrefixSettings, isNewThread, hasStartedConversation, promptPrefixOn]);
+  }, [
+    promptPrefixSettings,
+    hideAdminPrompt,
+    preferencesLoading,
+    isNewThread,
+    hasStartedConversation,
+    promptPrefixOn,
+  ]);

  const messageListPaddingBottom = showFollowups
    ? MESSAGE_LIST_DEFAULT_PADDING_BOTTOM +
@@ -325,7 +373,8 @@ export default function ChatPage() {
                      context={settings.context}
                      disabled={
                        env.NEXT_PUBLIC_STATIC_WEBSITE_ONLY === "true" ||
-                        isUploading
+                        isUploading ||
+                        agentHandoffPending
                      }
                      onContextChange={(context) =>
                        setSettings("context", context)
@@ -0,0 +1,257 @@
+"use client";
+
+import { DatabaseZap, Loader2Icon, RefreshCwIcon } from "lucide-react";
+import { useMutation, useQuery } from "@tanstack/react-query";
+import { useMemo, useState } from "react";
+import { toast } from "sonner";
+
+import { Badge } from "@/components/ui/badge";
+import { Button } from "@/components/ui/button";
+import { Input } from "@/components/ui/input";
+import { apiFetch } from "@/core/api";
+import { getBackendBaseURL } from "@/core/config";
+
+interface CheckpointMigrationSources {
+  source_paths: string[];
+}
+
+interface CheckpointMigrationTask {
+  task_id: string;
+  status: "queued" | "running" | "completed" | "failed";
+  start_at: string;
+  end_at: string;
+  source_paths: string[];
+  total_threads: number;
+  copied_threads: number;
+  skipped_threads: number;
+  failed_threads: number;
+  skipped_ranges: number;
+  message: string;
+  error?: string | null;
+  created_at: string;
+  updated_at: string;
+}
+
+async function loadSources(): Promise<CheckpointMigrationSources> {
+  const response = await apiFetch(
+    `${getBackendBaseURL()}/api/admin/checkpoint-migration/sources`,
+  );
+  if (!response.ok) throw new Error("加载 SQLite 来源失败");
+  return (await response.json()) as CheckpointMigrationSources;
+}
+
+async function startMigration(body: {
+  start_at: string;
+  end_at: string;
+}): Promise<CheckpointMigrationTask> {
+  const response = await apiFetch(
+    `${getBackendBaseURL()}/api/admin/checkpoint-migration/tasks`,
+    {
+      method: "POST",
+      headers: { "Content-Type": "application/json" },
+      body: JSON.stringify(body),
+    },
+  );
+  if (!response.ok) {
+    const detail = await response.json().catch(() => ({ detail: "启动迁移失败" }));
+    throw new Error(detail.detail ?? "启动迁移失败");
+  }
+  return (await response.json()) as CheckpointMigrationTask;
+}
+
+async function loadTask(taskId: string): Promise<CheckpointMigrationTask> {
+  const response = await apiFetch(
+    `${getBackendBaseURL()}/api/admin/checkpoint-migration/tasks/${taskId}`,
+  );
+  if (!response.ok) throw new Error("加载迁移任务失败");
+  return (await response.json()) as CheckpointMigrationTask;
+}
+
+function toLocalInputValue(date: Date): string {
+  const pad = (n: number) => String(n).padStart(2, "0");
+  return `${date.getFullYear()}-${pad(date.getMonth() + 1)}-${pad(date.getDate())}T${pad(date.getHours())}:${pad(date.getMinutes())}`;
+}
+
+function statusVariant(status?: string) {
+  if (status === "failed") return "destructive" as const;
+  if (status === "completed") return "default" as const;
+  if (status === "queued" || status === "running") return "secondary" as const;
+  return "outline" as const;
+}
+
+export default function CheckpointMigrationPage() {
+  const now = useMemo(() => new Date(), []);
+  const weekAgo = useMemo(
+    () => new Date(now.getTime() - 7 * 24 * 60 * 60 * 1000),
+    [now],
+  );
+  const [startAt, setStartAt] = useState(toLocalInputValue(weekAgo));
+  const [endAt, setEndAt] = useState(toLocalInputValue(now));
+  const [taskId, setTaskId] = useState<string | null>(null);
+
+  const { data: sources, isLoading: sourcesLoading, refetch } = useQuery({
+    queryKey: ["checkpointMigration", "sources"],
+    queryFn: loadSources,
+    staleTime: 60_000,
+    refetchOnWindowFocus: false,
+  });
+  const startMutation = useMutation({ mutationFn: startMigration });
+  const { data: task } = useQuery({
+    queryKey: ["checkpointMigration", "task", taskId],
+    queryFn: () => loadTask(taskId as string),
+    enabled: !!taskId,
+    refetchInterval: (query) => {
+      const status = query.state.data?.status;
+      return status === "queued" || status === "running" ? 2000 : false;
+    },
+    refetchOnWindowFocus: false,
+  });
+
+  const running =
+    startMutation.isPending ||
+    task?.status === "queued" ||
+    task?.status === "running";
+
+  async function handleStart() {
+    const start = new Date(startAt);
+    const end = new Date(endAt);
+    if (Number.isNaN(start.getTime()) || Number.isNaN(end.getTime())) {
+      toast.error("请选择有效的开始和结束时间");
+      return;
+    }
+    if (end <= start) {
+      toast.error("结束时间必须晚于开始时间");
+      return;
+    }
+    try {
+      const created = await startMutation.mutateAsync({
+        start_at: start.toISOString(),
+        end_at: end.toISOString(),
+      });
+      setTaskId(created.task_id);
+      toast.success("迁移任务已启动");
+    } catch (err) {
+      toast.error(err instanceof Error ? err.message : "启动迁移失败");
+    }
+  }
+
+  return (
+    <div className="mx-auto flex w-full max-w-3xl flex-col gap-6 px-6 py-10">
+      <div>
+        <h1 className="text-xl font-semibold">Checkpoint 迁移</h1>
+        <p className="text-muted-foreground mt-1 text-sm">
+          按时间段把 SQLite 旧聊天 checkpoint 同步到 Postgres。同一来源、同一时间段完成后再次执行会跳过。
+        </p>
+      </div>
+
+      <section className="rounded-lg border bg-white p-5 dark:border-[#213D5E] dark:bg-[#02244C]">
+        <div className="mb-4 flex items-center justify-between">
+          <div className="flex items-center gap-2 text-sm font-medium">
+            <DatabaseZap className="size-4" />
+            SQLite 来源
+          </div>
+          <Button
+            variant="ghost"
+            size="sm"
+            onClick={() => refetch()}
+            disabled={sourcesLoading}
+            title="刷新"
+          >
+            <RefreshCwIcon className="size-4" />
+          </Button>
+        </div>
+        {sourcesLoading ? (
+          <div className="text-muted-foreground flex items-center gap-2 text-sm">
+            <Loader2Icon className="size-4 animate-spin" />
+            加载中
+          </div>
+        ) : (sources?.source_paths.length ?? 0) > 0 ? (
+          <div className="space-y-2">
+            {sources?.source_paths.map((path) => (
+              <div
+                key={path}
+                className="rounded border bg-muted/40 px-3 py-2 font-mono text-xs break-all"
+              >
+                {path}
+              </div>
+            ))}
+          </div>
+        ) : (
+          <div className="text-muted-foreground rounded border border-dashed px-3 py-6 text-center text-sm">
+            未配置 SQLite 来源路径
+          </div>
+        )}
+      </section>
+
+      <section className="rounded-lg border bg-white p-5 dark:border-[#213D5E] dark:bg-[#02244C]">
+        <div className="grid gap-4 sm:grid-cols-2">
+          <label className="flex flex-col gap-1.5 text-sm">
+            <span className="font-medium">开始时间</span>
+            <Input
+              type="datetime-local"
+              value={startAt}
+              onChange={(e) => setStartAt(e.target.value)}
+            />
+          </label>
+          <label className="flex flex-col gap-1.5 text-sm">
+            <span className="font-medium">结束时间</span>
+            <Input
+              type="datetime-local"
+              value={endAt}
+              onChange={(e) => setEndAt(e.target.value)}
+            />
+          </label>
+        </div>
+        <div className="mt-5 flex justify-end">
+          <Button
+            onClick={handleStart}
+            disabled={running || !(sources?.source_paths.length ?? 0)}
+          >
+            {running && <Loader2Icon className="size-4 animate-spin" />}
+            开始同步
+          </Button>
+        </div>
+      </section>
+
+      {task && (
+        <section className="rounded-lg border bg-white p-5 dark:border-[#213D5E] dark:bg-[#02244C]">
+          <div className="mb-4 flex items-center justify-between">
+            <div className="text-sm font-medium">任务状态</div>
+            <Badge variant={statusVariant(task.status)}>{task.status}</Badge>
+          </div>
+          <div className="grid gap-3 text-sm sm:grid-cols-4">
+            <div className="rounded border p-3">
+              <div className="text-muted-foreground text-xs">总线程</div>
+              <div className="mt-1 text-lg font-semibold tabular-nums">
+                {task.total_threads}
+              </div>
+            </div>
+            <div className="rounded border p-3">
+              <div className="text-muted-foreground text-xs">已复制</div>
+              <div className="mt-1 text-lg font-semibold tabular-nums">
+                {task.copied_threads}
+              </div>
+            </div>
+            <div className="rounded border p-3">
+              <div className="text-muted-foreground text-xs">已跳过</div>
+              <div className="mt-1 text-lg font-semibold tabular-nums">
+                {task.skipped_threads}
+              </div>
+            </div>
+            <div className="rounded border p-3">
+              <div className="text-muted-foreground text-xs">跳过时间段</div>
+              <div className="mt-1 text-lg font-semibold tabular-nums">
+                {task.skipped_ranges}
+              </div>
+            </div>
+          </div>
+          {(task.message || task.error) && (
+            <div className="mt-4 rounded border bg-muted/40 px-3 py-2 text-sm">
+              {task.error || task.message}
+            </div>
+          )}
+        </section>
+      )}
+    </div>
+  );
+}
@@ -17,6 +17,7 @@ import {
 } from "@/components/workspace/messages";
 import { ThreadContext } from "@/components/workspace/messages/context";
 import { TodoList } from "@/components/workspace/todo-list";
+import { getAccessToken } from "@/core/auth";
 import { useI18n } from "@/core/i18n/hooks";
 import { useModels } from "@/core/models/hooks";
 import { useNotification } from "@/core/notification/hooks";
@@ -33,6 +34,22 @@ import {
 } from "./iframe-chat-submit";

 type BrainyChatStatus = "started" | "finished";
+type BrainyAuthTokenMessage = {
+  source: "brainy-iframe";
+  type: "brainy:auth-token";
+  payload: {
+    accessToken: string;
+  };
+};
+type BrainyChatInterruptMessage = {
+  source?: string;
+  type?: string;
+  payload?: {
+    reason?: string;
+    requestId?: string;
+  };
+  requestId?: string;
+};

 function postBrainyChatStatus(status: BrainyChatStatus, requestId: string) {
  window.parent?.postMessage(
@@ -48,6 +65,18 @@ function postBrainyChatStatus(status: BrainyChatStatus, requestId: string) {
  );
 }

+function postBrainyAuthToken(accessToken: string) {
+  const message: BrainyAuthTokenMessage = {
+    source: "brainy-iframe",
+    type: "brainy:auth-token",
+    payload: {
+      accessToken,
+    },
+  };
+
+  window.parent?.postMessage(message, "*");
+}
+
 export default function IframeChatPage() {
  const routeBase = useRouteBase();
  const router = useRouter();
@@ -70,6 +99,28 @@ export default function IframeChatPage() {
    setMounted(true);
  }, []);

+  useEffect(() => {
+    let lastToken: string | undefined;
+
+    const emitAccessToken = () => {
+      const accessToken = getAccessToken();
+      if (!accessToken || accessToken === lastToken) {
+        return;
+      }
+      lastToken = accessToken;
+      postBrainyAuthToken(accessToken);
+    };
+
+    emitAccessToken();
+    window.addEventListener("focus", emitAccessToken);
+    window.addEventListener("storage", emitAccessToken);
+
+    return () => {
+      window.removeEventListener("focus", emitAccessToken);
+      window.removeEventListener("storage", emitAccessToken);
+    };
+  }, []);
+
  useEffect(() => {
    if (isNewThread) {
      setHasStartedConversation(false);
@@ -206,10 +257,34 @@ export default function IframeChatPage() {
    [sendMessage, threadId],
  );

+  const handleInterrupt = useCallback(
+    async (message: BrainyChatInterruptMessage) => {
+      const targetRequestId = message.payload?.requestId?.trim();
+      if (targetRequestId) {
+        pendingRequestIdRef.current = targetRequestId;
+      }
+
+      console.log("收到插件中断消息", {
+        reason: message.payload?.reason,
+        requestId: message.requestId,
+        targetRequestId,
+      });
+
+      await thread.stop();
+    },
+    [thread],
+  );
+
  useEffect(() => {
-    const handleMessage = (event: MessageEvent<BrainyChatSubmitMessage>) => {
+    const handleMessage = (
+      event: MessageEvent<BrainyChatSubmitMessage | BrainyChatInterruptMessage>,
+    ) => {
      const data = event.data;
      if (data?.source !== "brainy-extension") return;
+      if (data?.type === "brainy:chat-interrupt") {
+        void handleInterrupt(data);
+        return;
+      }
      if (data?.type !== "brainy:chat-submit") return;

      const { submitText, files, iframeContext, additionalKwargs } =
@@ -220,8 +295,10 @@ export default function IframeChatPage() {
        prompt: data.payload?.prompt,
        pageContext: data.payload?.pageContext,
        screenshot: data.payload?.screenshot,
+        model: data.payload?.model,
        requestId: data.requestId,
        filesCount: files.length,
+        iframeContext,
      });

      if (!submitText && files.length === 0) return;
@@ -239,7 +316,7 @@ export default function IframeChatPage() {
    return () => {
      window.removeEventListener("message", handleMessage);
    };
-  }, [handleSubmit]);
+  }, [handleInterrupt, handleSubmit]);

  const messageListPaddingBottom = showFollowups
    ? MESSAGE_LIST_DEFAULT_PADDING_BOTTOM +
@@ -310,7 +310,7 @@ const errorToastDarkOptions = {
          <label className="text-muted-foreground text-xs dark:text-white">用户名</label>
          <Input
            value={user}
-            placeholder="按用户名匹配（@ 前部分）"
+            placeholder="按用户名模糊搜索（@ 前部分）"
            onChange={(e) => {
              setUser(e.target.value);
              setPage(0);
@@ -1,4 +1,4 @@
-"use client";
+"use client";

 import {
  ArrowLeftIcon,
@@ -19,6 +19,11 @@ import {
 } from "@/components/ai-elements/prompt-input";
 import { Button } from "@/components/ui/button";
 import { Input } from "@/components/ui/input";
+import {
+  ResizableHandle,
+  ResizablePanel,
+  ResizablePanelGroup,
+} from "@/components/ui/resizable";
 import {
  Select,
  SelectContent,
@@ -361,8 +366,19 @@ export default function NewAgentPage() {
            ) : null}
          </header>

-          <main className="grid min-h-0 flex-1 grid-cols-1 md:grid-cols-[minmax(0,1fr)_420px]">
-            <section className="flex min-h-0 flex-col border-r">
+          <ResizablePanelGroup
+            id="new-agent-config-panels"
+            orientation="horizontal"
+            defaultLayout={{ chat: 62, config: 38 }}
+            className="min-h-0 flex-1"
+          >
+            <ResizablePanel
+              id="chat"
+              defaultSize={62}
+              minSize={40}
+              className="min-h-0"
+            >
+            <section className="flex size-full min-h-0 flex-col">
              <div className="min-h-0 flex-1">
                <MessageList
                  className="size-full"
@@ -428,8 +444,18 @@ export default function NewAgentPage() {
                </PromptInput>
              </div>
            </section>
+            </ResizablePanel>

-            <aside className="bg-background min-h-0 overflow-y-auto">
+            <ResizableHandle withHandle />
+
+            <ResizablePanel
+              id="config"
+              defaultSize={38}
+              minSize={24}
+              maxSize={60}
+              className="min-h-0"
+            >
+            <aside className="bg-background size-full min-h-0 overflow-y-auto">
              <div className="space-y-5 p-4">
                <div>
                  <h2 className="text-sm font-semibold">智能体配置</h2>
@@ -606,7 +632,8 @@ export default function NewAgentPage() {
                </Button>
              </div>
            </aside>
-          </main>
+            </ResizablePanel>
+          </ResizablePanelGroup>
        </div>
      </ArtifactsProvider>
    </ThreadContext.Provider>
@@ -0,0 +1,238 @@
+"use client";
+
+import { useQuery } from "@tanstack/react-query";
+import {
+  BarChart3,
+  CheckCircle,
+  ChevronDown,
+  ChevronRight,
+  ExternalLink,
+  FileText,
+  Loader2,
+} from "lucide-react";
+import { useState } from "react";
+import ReactMarkdown from "react-markdown";
+import { useParams } from "react-router-dom";
+import remarkGfm from "remark-gfm";
+
+import {
+  getPublicDraftShareSnapshot,
+  type PublicDraftSeatDelivery,
+} from "@/core/roundtable-draft-shares/api";
+import { markdownComponents } from "@/roundtable-planning/components/markdown-components";
+
+/** 各席位最终交付 —— 折叠手风琴（仿 HighFidelityReport 第二区块）。 */
+function SeatDeliveries({ seats }: { seats: PublicDraftSeatDelivery[] }) {
+  const [expanded, setExpanded] = useState<Set<number>>(() => new Set());
+  const toggle = (i: number) =>
+    setExpanded((prev) => {
+      const next = new Set(prev);
+      if (next.has(i)) next.delete(i);
+      else next.add(i);
+      return next;
+    });
+
+  if (seats.length === 0) {
+    return (
+      <p className="text-[11px] text-slate-400 italic">本次会商暂无子智能体交付。</p>
+    );
+  }
+  return (
+    <div className="space-y-2">
+      {seats.map((seat, idx) => {
+        const open = expanded.has(idx);
+        return (
+          <div key={`${seat.sender}-${idx}`} className="border border-slate-200 rounded-xl overflow-hidden">
+            <button
+              type="button"
+              onClick={() => toggle(idx)}
+              className="w-full flex items-center justify-between gap-2 px-3 py-2.5 bg-slate-50 hover:bg-slate-100 transition text-left"
+            >
+              <div className="flex items-center gap-2 min-w-0">
+                {open ? (
+                  <ChevronDown className="w-3.5 h-3.5 text-slate-500 shrink-0" />
+                ) : (
+                  <ChevronRight className="w-3.5 h-3.5 text-slate-500 shrink-0" />
+                )}
+                <span className="text-[11.5px] font-bold text-slate-800 truncate">
+                  {seat.sender || "未命名席位"}
+                </span>
+              </div>
+              <span className="text-[10px] text-slate-400 font-mono shrink-0">
+                {seat.content.length} 字
+              </span>
+            </button>
+            {open && (
+              <div className="px-4 py-3 text-xs text-slate-700 leading-relaxed border-t border-slate-100 bg-white">
+                <ReactMarkdown remarkPlugins={[remarkGfm]} components={markdownComponents}>
+                  {seat.content || "(空)"}
+                </ReactMarkdown>
+              </div>
+            )}
+          </div>
+        );
+      })}
+    </div>
+  );
+}
+
+/**
+ * Public, read-only roundtable-result viewer.
+ *
+ * Reachable at `#/roundtable-share/<code>` with NO authentication — anyone with
+ * the link can open it. Two views, driven by the `report` prop / route:
+ *
+ * - landing (`#/roundtable-share/<code>`): a read-only result page mirroring the
+ *   in-app Step 3「最终方案展示」— 总控最终结论 + 各席位最终交付 + a 「查看结果绘制」
+ *   button that opens the full report in a NEW TAB (when one was generated).
+ * - report (`#/roundtable-share/<code>/report`): the Step 3 report (a
+ *   self-contained HTML document) rendered full-screen inside a sandboxed
+ *   `iframe` (no `allow-scripts`), so the agent-generated HTML can never execute
+ *   code in the app origin.
+ */
+export default function PublicRoundtableSharePage({
+  report = false,
+}: {
+  report?: boolean;
+}) {
+  const { shareCode } = useParams<{ shareCode: string }>();
+
+  const { data, isLoading, isError } = useQuery({
+    queryKey: ["public-roundtable-share", shareCode],
+    queryFn: () => getPublicDraftShareSnapshot(shareCode!),
+    enabled: !!shareCode,
+    retry: false,
+    refetchOnWindowFocus: false,
+  });
+
+  if (isLoading) {
+    return (
+      <div className="bg-background text-muted-foreground flex h-screen items-center justify-center gap-2 text-sm">
+        <Loader2 className="size-4 animate-spin" />
+        正在加载分享内容…
+      </div>
+    );
+  }
+
+  if (isError || !data) {
+    return (
+      <div className="bg-background flex h-screen flex-col items-center justify-center gap-2 px-6 text-center">
+        <p className="text-lg font-medium">分享不可用</p>
+        <p className="text-muted-foreground text-sm">
+          该分享链接不存在、已被撤销，或不是只读分享。
+        </p>
+      </div>
+    );
+  }
+
+  // ── 报告页：整页沙箱 iframe 展示第 3 步结果绘制 ──────────────────────────────
+  if (report) {
+    return (
+      <div className="bg-background flex h-screen flex-col">
+        <header className="flex shrink-0 items-center gap-2 border-b px-6 py-3">
+          <h1 className="truncate text-base font-semibold">
+            {data.title || "未命名会商"}
+          </h1>
+          <span className="bg-muted text-muted-foreground shrink-0 rounded-full px-2 py-0.5 text-xs">
+            结果绘制 · 只读
+          </span>
+        </header>
+        <main className="min-h-0 flex-1">
+          {data.has_report ? (
+            <iframe
+              // No `allow-scripts` — the report is self-contained (inline CSS +
+              // inline SVG charts) and must never run as a script in the app origin.
+              sandbox=""
+              title={data.title || "会商结果报告"}
+              srcDoc={data.html}
+              className="size-full border-0 bg-white"
+            />
+          ) : (
+            <div className="text-muted-foreground flex h-full flex-col items-center justify-center gap-2 px-6 text-center text-sm">
+              <p className="text-base font-medium text-foreground">暂无结果报告</p>
+              <p>这次会商还没有生成第三步「结果绘制」的方案报告。</p>
+            </div>
+          )}
+        </main>
+      </div>
+    );
+  }
+
+  // ── 落地页：总控最终结论 + 各席位最终交付 + 查看结果绘制（新标签打开报告页）─────
+  const reportUrl = `${window.location.origin}${window.location.pathname}#/roundtable-share/${shareCode}/report`;
+
+  return (
+    <div className="bg-[#fef6f6] flex h-screen flex-col text-slate-800">
+      <header className="flex shrink-0 flex-col gap-1 border-b border-slate-100 bg-white px-6 py-3">
+        <div className="flex items-center gap-2">
+          <h1 className="truncate text-base font-semibold">
+            {data.title || "未命名会商"}
+          </h1>
+          <span className="bg-slate-100 text-slate-500 shrink-0 rounded-full px-2 py-0.5 text-xs">
+            只读分享
+          </span>
+        </div>
+        <p className="text-slate-400 text-xs">
+          这是一份多智能体会商的结果分享（只读）。
+        </p>
+      </header>
+
+      <main className="min-h-0 flex-1 overflow-y-auto">
+        <div className="mx-auto w-full max-w-6xl space-y-6 p-6">
+          {/* 1. 结果绘制 —— 新标签打开报告页 */}
+          <section className="bg-white border border-slate-200 rounded-2xl p-5 shadow-[0_2px_8px_rgba(0,0,0,0.02)]">
+            <h4 className="text-xs font-black text-slate-900 uppercase tracking-widest mb-3 flex items-center gap-2">
+              <BarChart3 className="w-4 h-4 text-primary" />
+              结果绘制
+            </h4>
+            {data.has_report ? (
+              <a
+                href={reportUrl}
+                target="_blank"
+                rel="noopener noreferrer"
+                className="bg-primary text-white hover:bg-[var(--brand-900)] inline-flex items-center gap-2 rounded-xl px-5 py-2.5 text-sm font-semibold transition shadow-sm shadow-primary/10"
+              >
+                <BarChart3 className="size-4" />
+                查看结果绘制
+                <ExternalLink className="size-3.5 opacity-80" />
+              </a>
+            ) : (
+              <p className="text-[11px] text-slate-400 italic">
+                这次会商还没有生成第三步「结果绘制」的方案报告。
+              </p>
+            )}
+          </section>
+
+          {/* 2. 总控最终结论 */}
+          <section className="bg-white border border-slate-200 rounded-2xl p-5 shadow-[0_2px_8px_rgba(0,0,0,0.02)]">
+            <h4 className="text-xs font-black text-slate-900 uppercase tracking-widest mb-3 flex items-center gap-2">
+              <CheckCircle className="w-4 h-4 text-emerald-500 shrink-0" />
+              总控最终结论
+            </h4>
+            {data.consensus_text ? (
+              <div className="text-xs text-slate-700 leading-relaxed">
+                <ReactMarkdown remarkPlugins={[remarkGfm]} components={markdownComponents}>
+                  {data.consensus_text}
+                </ReactMarkdown>
+              </div>
+            ) : (
+              <p className="text-[11px] text-slate-400 italic">暂无总控结论。</p>
+            )}
+          </section>
+
+          {/* 3. 各席位最终交付 */}
+          <section className="bg-white border border-slate-200 rounded-2xl p-5 shadow-[0_2px_8px_rgba(0,0,0,0.02)]">
+            <h4 className="text-xs font-black text-slate-900 uppercase tracking-widest mb-3 flex items-center gap-2">
+              <FileText className="w-4 h-4 text-primary" />
+              各席位最终交付
+              <span className="text-[10px] font-mono font-semibold text-slate-400 bg-slate-100 px-1.5 py-0.5 rounded">
+                {data.seat_deliveries.length}
+              </span>
+            </h4>
+            <SeatDeliveries seats={data.seat_deliveries} />
+          </section>
+        </div>
+      </main>
+    </div>
+  );
+}
@@ -3,14 +3,18 @@
 import { useMutation, useQuery, useQueryClient } from "@tanstack/react-query";
 import {
  Check,
+  ChevronLeft,
+  ChevronRight,
  Download,
  FileText,
+  List,
  Loader2,
  Pencil,
  Trash2,
  X,
 } from "lucide-react";
-import { useCallback, useEffect, useMemo, useState } from "react";
+import { useCallback, useEffect, useMemo, useRef, useState } from "react";
+import type { PointerEvent as ReactPointerEvent } from "react";
 import { useParams } from "react-router-dom";
 import { toast } from "sonner";

@@ -35,6 +39,7 @@ import {
  TooltipTrigger,
 } from "@/components/ui/tooltip";
 import { MarkdownContent } from "@/components/workspace/messages/markdown-content";
+import { HtmlPreviewFrame } from "@/components/html-preview-frame";
 import { getBackendBaseURL } from "@/core/config";
 import { downloadMarkdownAsDocx } from "@/core/scheduled-tasks/markdown-docx";
 import { reasoningPlugins } from "@/core/streamdown";
@@ -253,6 +258,11 @@ function stripTimestampSuffix(title: string): string {
 }

 const BODY_TAB_VALUE = "__body__";
+const HTML_TAB_VALUE = "__html__";
+const RUN_LIST_COLLAPSED_WIDTH = 56;
+const RUN_LIST_DEFAULT_WIDTH = 380;
+const RUN_LIST_MIN_WIDTH = 280;
+const RUN_LIST_MAX_WIDTH = 560;

 /**
 * Public, unauthenticated scheduled-task viewer.
@@ -269,6 +279,9 @@ export default function PublicScheduledTaskPage() {
  const { taskId } = useParams<{ taskId: string }>();
  const [selectedRunId, setSelectedRunId] = useState<string | null>(null);
  const [pendingDeleteRun, setPendingDeleteRun] = useState<{ id: string; title: string } | null>(null);
+  const [runListExpanded, setRunListExpanded] = useState(false);
+  const [runListWidth, setRunListWidth] = useState(RUN_LIST_DEFAULT_WIDTH);
+  const dragStateRef = useRef<{ startX: number; startWidth: number } | null>(null);
  const queryClient = useQueryClient();

  const { data, isLoading, isError, error } = useQuery({
@@ -332,6 +345,58 @@ export default function PublicScheduledTaskPage() {
    }
  }, [runs, selectedRunId]);

+  const task = data?.task;
+  const visibleRunListWidth = runListExpanded ? runListWidth : RUN_LIST_COLLAPSED_WIDTH;
+
+  const expandRunList = useCallback(() => {
+    setRunListExpanded(true);
+    setRunListWidth((width) =>
+      Math.min(RUN_LIST_MAX_WIDTH, Math.max(RUN_LIST_MIN_WIDTH, width)),
+    );
+  }, []);
+
+  const collapseRunList = useCallback(() => {
+    setRunListExpanded(false);
+  }, []);
+
+  const handleRunListDragStart = useCallback(
+    (event: ReactPointerEvent<HTMLDivElement>) => {
+      event.preventDefault();
+      dragStateRef.current = {
+        startX: event.clientX,
+        startWidth: visibleRunListWidth,
+      };
+      document.body.style.cursor = "col-resize";
+      document.body.style.userSelect = "none";
+
+      const handlePointerMove = (moveEvent: PointerEvent) => {
+        const drag = dragStateRef.current;
+        if (!drag) return;
+        const nextWidth = drag.startWidth + moveEvent.clientX - drag.startX;
+        if (nextWidth <= RUN_LIST_COLLAPSED_WIDTH + 28) {
+          setRunListExpanded(false);
+          return;
+        }
+        setRunListExpanded(true);
+        setRunListWidth(
+          Math.min(RUN_LIST_MAX_WIDTH, Math.max(RUN_LIST_MIN_WIDTH, nextWidth)),
+        );
+      };
+
+      const handlePointerUp = () => {
+        dragStateRef.current = null;
+        document.body.style.cursor = "";
+        document.body.style.userSelect = "";
+        window.removeEventListener("pointermove", handlePointerMove);
+        window.removeEventListener("pointerup", handlePointerUp);
+      };
+
+      window.addEventListener("pointermove", handlePointerMove);
+      window.addEventListener("pointerup", handlePointerUp);
+    },
+    [visibleRunListWidth],
+  );
+
  if (!taskId) {
    return (
      <div className="text-muted-foreground flex h-screen items-center justify-center text-sm">
@@ -357,12 +422,15 @@ export default function PublicScheduledTaskPage() {
    );
  }

-  const task = data?.task;
-
  return (
    <TooltipProvider delayDuration={150}>
-      <div className="bg-muted/20 grid h-screen min-h-0 grid-cols-1 gap-4 p-4 xl:grid-cols-[380px_minmax(0,1fr)]">
-        <Card className="flex min-h-0 flex-col">
+      <div className="bg-muted/20 flex h-screen min-h-0 overflow-hidden p-4">
+        <div
+          className="relative flex min-h-0 shrink-0 transition-[width] duration-200 ease-out"
+          style={{ width: visibleRunListWidth }}
+        >
+          {runListExpanded ? (
+          <Card className="flex min-h-0 w-full flex-col overflow-hidden">
          <CardHeader className="gap-1">
            <div className="flex items-start justify-between gap-2">
              <Tooltip>
@@ -377,9 +445,21 @@ export default function PublicScheduledTaskPage() {
                  </TooltipContent>
                )}
              </Tooltip>
-              <Badge variant={task?.enabled ? "default" : "secondary"} className="shrink-0">
-                {task?.enabled ? "启用" : "暂停"}
-              </Badge>
+              <div className="flex shrink-0 items-center gap-1">
+                <Badge variant={task?.enabled ? "default" : "secondary"}>
+                  {task?.enabled ? "启用" : "暂停"}
+                </Badge>
+                <Button
+                  size="icon"
+                  variant="ghost"
+                  className="text-muted-foreground hover:text-primary size-7"
+                  onClick={collapseRunList}
+                  title="收起执行记录列表"
+                  aria-label="收起执行记录列表"
+                >
+                  <ChevronLeft className="size-4" />
+                </Button>
+              </div>
            </div>
            {task?.description && task.description.trim() && (
              <p className="text-muted-foreground line-clamp-3 text-xs leading-relaxed break-all whitespace-pre-wrap">
@@ -481,9 +561,36 @@ export default function PublicScheduledTaskPage() {
              </div>
            </ScrollArea>
          </CardContent>
-        </Card>
+          </Card>
+          ) : (
+            <Card className="flex min-h-0 w-full flex-col items-center overflow-hidden py-3">
+              <Button
+                size="icon"
+                variant="ghost"
+                className="text-muted-foreground hover:text-primary"
+                onClick={expandRunList}
+                title="展开执行记录列表"
+                aria-label="展开执行记录列表"
+              >
+                <List className="size-4" />
+              </Button>
+            </Card>
+          )}
+          <div
+            role="separator"
+            aria-orientation="vertical"
+            title="拖拽调整列表宽度"
+            className="group absolute top-0 -right-3 z-20 flex h-full w-6 cursor-col-resize items-center justify-center"
+            onPointerDown={handleRunListDragStart}
+          >
+            <div className="bg-border group-hover:bg-primary/70 h-full w-px transition-colors" />
+            <div className="bg-background text-muted-foreground group-hover:text-primary absolute top-1/2 flex size-5 -translate-y-1/2 items-center justify-center rounded-full border shadow-sm transition-colors">
+              <ChevronRight className="size-3" />
+            </div>
+          </div>
+        </div>

-        <Card className="flex min-h-0 flex-col">
+        <Card className="ml-4 flex min-h-0 flex-1 flex-col">
          {selectedRun ? (
            <RunDetailPane key={selectedRun.id} run={selectedRun} taskId={taskId} />
          ) : (
@@ -546,12 +653,14 @@ export default function PublicScheduledTaskPage() {
 }

 type ContentTab = {
-  /** Stable tab identifier — `__body__` for inline content, `file-<index>` for files. */
+  /** Stable tab identifier — `__html__` for the HTML preview, `__body__` for
+   * inline content, `file-<index>` for files. */
  value: string;
  /** Short label rendered in the TabsTrigger. */
  label: string;
-  /** Distinguishes body vs MD attachment so the editor knows which PUT to call. */
-  kind: "body" | "file";
+  /** Distinguishes the HTML preview vs body vs MD attachment so the renderer /
+   * editor knows what to show and which PUT to call. */
+  kind: "body" | "file" | "html";
  /** File index (when `kind === "file"`). */
  fileIndex?: number;
  /** Filename for downloads (defaults to the run title for body). */
@@ -592,17 +701,27 @@ function RunDetailPane({ run, taskId }: { run: PublicRun; taskId: string }) {
    [run.result?.files],
  );

-  // Tabs: every MD file first (priority per spec), then the inline body.
+  // Tabs: HTML preview first (when present), then every MD file, then the
+  // inline body. For an HTML run that also produced a Markdown file, this keeps
+  // the page preview AND surfaces the .md instead of hiding it. The generated
+  // HTML document itself is never listed as a downloadable "file" tab — it has
+  // its own preview.
  const tabs: ContentTab[] = useMemo(() => {
-    const list: ContentTab[] = markdownFiles.map((file, idx) => ({
-      value: `file-${file.index}`,
-      // Show the actual filename without the `.md` suffix — the user explicitly
-      // asked for "no '文件' label, just the name without extension".
-      label: stripExtension(file.name) || `文件 ${idx + 1}`,
-      kind: "file",
-      fileIndex: file.index,
-      fileName: file.name,
-    }));
+    const list: ContentTab[] = [];
+    if (isHtmlRun) {
+      list.push({ value: HTML_TAB_VALUE, label: "HTML 预览", kind: "html" });
+    }
+    list.push(
+      ...markdownFiles.map((file, idx) => ({
+        value: `file-${file.index}`,
+        // Show the actual filename without the `.md` suffix — the user explicitly
+        // asked for "no '文件' label, just the name without extension".
+        label: stripExtension(file.name) || `文件 ${idx + 1}`,
+        kind: "file" as const,
+        fileIndex: file.index,
+        fileName: file.name,
+      })),
+    );
    list.push({
      value: BODY_TAB_VALUE,
      label: "正文",
@@ -610,7 +729,7 @@ function RunDetailPane({ run, taskId }: { run: PublicRun; taskId: string }) {
      fileName: run.result?.title || "scheduled-task-result",
    });
    return list;
-  }, [markdownFiles, run.result?.title]);
+  }, [isHtmlRun, markdownFiles, run.result?.title]);

  const [activeTab, setActiveTab] = useState<string>(tabs[0]?.value ?? BODY_TAB_VALUE);

@@ -751,13 +870,13 @@ function RunDetailPane({ run, taskId }: { run: PublicRun; taskId: string }) {
              下载原文件
            </a>
          )}
-          {!isHtmlRun && (
+          {activeTabMeta?.kind !== "html" && (
            <Button size="sm" variant="outline" onClick={handleDownloadWord}>
              <FileText className="size-4" />
              下载 Word
            </Button>
          )}
-          {!isHtmlRun &&
+          {activeTabMeta?.kind !== "html" &&
            (isEditing ? (
              <>
                <Button
@@ -803,22 +922,7 @@ function RunDetailPane({ run, taskId }: { run: PublicRun; taskId: string }) {
      </CardHeader>

      <CardContent className="min-h-0 flex-1 overflow-hidden p-0">
-        {isHtmlRun ? (
-          <div className="h-full p-4">
-            {htmlContent ? (
-              <iframe
-                title="HTML 预览"
-                sandbox="allow-same-origin"
-                srcDoc={htmlContent}
-                className="h-full min-h-[60vh] w-full rounded-md border bg-white"
-              />
-            ) : (
-              <div className="text-muted-foreground rounded-md border p-3 text-sm">
-                HTML 页面尚未生成或正在生成中。
-              </div>
-            )}
-          </div>
-        ) : tabs.length === 0 ? (
+        {tabs.length === 0 ? (
          <div className="text-muted-foreground p-6 text-sm">无可用内容。</div>
        ) : (
          <Tabs
@@ -848,7 +952,18 @@ function RunDetailPane({ run, taskId }: { run: PublicRun; taskId: string }) {
                  {run.error}
                </div>
              )}
-              {fileIsLoading ? (
+              {activeTabMeta?.kind === "html" ? (
+                htmlContent ? (
+                  <HtmlPreviewFrame
+                    html={htmlContent}
+                    className="min-h-[60vh] w-full flex-1 rounded-md border bg-white"
+                  />
+                ) : (
+                  <div className="text-muted-foreground rounded-md border p-3 text-sm">
+                    HTML 页面尚未生成或正在生成中。
+                  </div>
+                )
+              ) : fileIsLoading ? (
                <div className="text-muted-foreground flex items-center gap-2 text-sm">
                  <Loader2 className="size-4 animate-spin" />
                  正在加载文件内容...