docs: trim scope to core features and add Agent Teams UI spec

- Remove Search, Dispatch, Customize pages (not needed for MVP) - Sidebar simplified to: New session + Scheduled + project filter + sessions - Add Agent Teams panel design: team status bar, member tabs with color coding, teammate transcript switching, running/completed/failed states - Add Agent Teams interaction flow (create → view members → switch → back) - Requirements reduced from 118 to 89 items, focused on: 1. Core conversation (messages, tools, permissions, streaming) 2. Session management with project selection 3. Scheduled tasks 4. Agent Teams member activity visualization Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
2026-07-17 13:13:35 +08:00 · 2026-04-05 13:41:36 +08:00 · 2026-04-05 13:41:36 +08:00 · f1c310a004
commit f1c310a004
parent 0c6d2754b4
2 changed files with 306 additions and 396 deletions
--- a/docs/ui-clone/01-requirements.md
+++ b/docs/ui-clone/01-requirements.md
@ -4,23 +4,21 @@

 ### 1.1 目标

-完全复刻 Claude Code Desktop App 的桌面端 GUI 界面。原始应用是 Anthropic 出品的 AI 编程助手，采用跨平台桌面架构（Electron），支持 macOS/Windows。
+复刻 Claude Code Desktop App 的桌面端 GUI 核心功能。聚焦于 **AI 对话交互**、**会话管理**、**定时任务** 和 **Agent Teams 可视化** 四大模块。

-### 1.2 原始技术栈
-
- **前端框架**: React 18 + TypeScript
- **终端渲染**: Ink（自定义 fork，基于 Yoga 布局引擎）
- **桌面容器**: Electron
- **状态管理**: React Context + 自定义 Store（类 Zustand）
- **构建工具**: Bun
-
-### 1.3 复刻技术栈建议
+### 1.2 复刻技术栈

 - **前端框架**: React 18 + TypeScript
 - **UI 渲染**: 标准浏览器 DOM（替换 Ink 终端渲染）
 - **桌面容器**: Electron 或 Tauri
 - **样式方案**: TailwindCSS v4
- **状态管理**: Zustand 或 Jotai
+- **状态管理**: Zustand
+
+### 1.3 核心原则
+
+- **CLI/UI 数据互通**: UI 读写与 CLI 完全相同的 JSONL/JSON 文件
+- **非侵入性**: 不修改原始 CLI 源代码
+- **聚焦核心**: 只做对话 + 会话 + 定时任务 + Agent Teams，不做 Search/Dispatch/Customize

 ---

@ -28,175 +26,195 @@

 | 编号 | 页面 | 描述 | 优先级 |
 |------|------|------|--------|
-| P1 | 顶部标题栏 | macOS 窗口控件 + Chat/Cowork/Code 标签页 | P0 |
-| P2 | 左侧边栏 | 导航菜单 + 项目过滤 + 会话列表 | P0 |
-| P3 | 底部状态栏 | 用户信息 + 仓库信息 + 模式切换 | P1 |
-| P4 | Code 空状态页 | 吉祥物 + 输入框 + 快捷入口 | P0 |
-| P5 | Code 活跃会话页 | 消息列表 + 输入区 + 工具调用展示 | P0 |
-| P6 | 权限模式选择器 | 下拉菜单：Ask/Auto/Plan/Bypass | P0 |
-| P7 | 模型选择器 | 下拉菜单：模型列表 + Effort 等级 | P0 |
+| P1 | 顶部标题栏 | macOS 窗口控件 + Code 标签 | P0 |
+| P2 | 左侧边栏 | New session + Scheduled + 项目选择 + 会话列表 | P0 |
+| P3 | 底部状态栏 | 用户信息 + 仓库信息 | P1 |
+| P4 | Code 空状态页 | 吉祥物 + 输入框 | P0 |
+| P5 | Code 活跃会话页 | 消息列表 + 输入区 + 工具调用 + Agent Teams 面板 | P0 |
+| P6 | 权限模式选择器 | Ask/Auto/Plan/Bypass 下拉菜单 | P0 |
+| P7 | 模型选择器 | 模型列表 + Effort 等级 | P0 |
 | P8 | Scheduled 定时任务页 | 任务列表 + 空状态 | P1 |
 | P9 | 新建定时任务模态框 | 创建定时任务表单 | P1 |
-| P10 | Search 搜索页 | 全局内容搜索 | P1 |
-| P11 | Dispatch 分发页 | Agent 管理 + 任务分发 | P2 |
-| P12 | Customize 设置页 | Status/Config/Usage 标签页 | P1 |
+
+**已移除**: Search 搜索页、Dispatch 分发页、Customize 设置页（设置直接在输入框控件里完成）

 ---

-## 三、功能需求详述
+## 三、功能需求

 ### 3.1 顶部标题栏 (P1)

-**功能描述**: macOS 风格标题栏，集成窗口控件和主导航标签页。
-
-**需求项**:
- R-001: 显示 macOS 红绿灯按钮（关闭/最小化/全屏）
- R-002: 显示前进/后退导航箭头
- R-003: 显示 `Chat` / `Cowork` / `Code` 三个标签页，支持切换
- R-004: 活跃标签页高亮显示
- R-005: 标题栏区域支持拖拽移动窗口
-
-**源码参考**: `src/components/design-system/Tabs.tsx`
+- R-001: macOS 红绿灯按钮（关闭/最小化/全屏）
+- R-002: 前进/后退导航箭头
+- R-003: `Code` 标签居中显示（Chat/Cowork 预留位但暂不实现）
+- R-004: 标题栏可拖拽移动窗口

 ---

 ### 3.2 左侧边栏 (P2)

-**功能描述**: 垂直导航面板，包含功能入口和会话管理。
-
 #### 导航菜单

- R-006: 显示 5 个导航项（New session / Search / Scheduled / Dispatch / Customize）
- R-007: 点击导航项切换主内容区页面
- R-008: 当前选中项高亮显示
+- R-005: 显示 `+ New session` 和 `Scheduled` 两个导航项
+- R-006: 点击导航项切换主内容区
+- R-007: 当前选中项高亮

-#### 项目过滤器
+#### 项目选择器

- R-009: 显示 `All projects ▾` 下拉选择器
- R-010: 可选择特定项目过滤会话列表
- R-011: 右侧筛选图标，点击打开高级过滤
+- R-008: `All projects ▾` 下拉选择器
+- R-009: 可选择特定项目过滤会话列表

 #### 会话列表

- R-012: 按时间分组显示会话（Today / Previous 7 Days / Previous 30 Days / Older）
- R-013: 每项显示会话标题（首条用户消息摘要）
- R-014: 选中会话高亮，左侧显示圆点指示器
- R-015: 支持模糊搜索过滤会话列表
- R-016: 右键菜单支持重命名、删除操作
- R-017: 点击会话切换到对应的活跃会话页
+- R-010: 按时间分组（Today / Previous 7 Days / Older）
+- R-011: 每项显示会话标题（首条消息摘要 或 自定义标题）
+- R-012: 选中会话高亮，左侧圆点指示
+- R-013: 支持搜索过滤
+- R-014: 右键菜单：重命名、删除
+- R-015: 点击切换到对应会话

 **数据模型**:
 ```typescript
 type Session = {
-  id: string
-  title: string           // 首条消息摘要或自定义标题
+  id: string              // UUID v4
+  title: string           // 首条消息摘要 或 customTitle
  createdAt: Date
  modifiedAt: Date
  messageCount: number
-  projectName?: string    // 所属项目
-  summary?: string        // AI 生成的摘要
+  projectPath: string     // 项目目录（sanitized）
 }
 ```

-**源码参考**: `src/components/LogSelector.tsx`, `src/types/logs.ts`
-
 ---

 ### 3.3 底部状态栏 (P3)

-**需求项**:
- R-018: 左侧显示用户头像 + 用户名 + 订阅等级
- R-019: 显示下载按钮和更多操作按钮
- R-020: 中部显示当前 Git 仓库名称（GitHub 图标 + 仓库名）
- R-021: 显示当前 Git 分支（分支图标 + 分支名）
- R-022: 显示 `worktree` 复选框，控制是否使用 Git worktree
- R-023: 右侧显示 `Local ▾` / `Remote ▾` 运行模式切换
-
-**源码参考**: `src/components/StatusLine.tsx`
+- R-016: 用户头像 + 用户名 + 订阅等级（如 `Max plan`）
+- R-017: Git 仓库名 + 分支名
+- R-018: worktree 复选框
+- R-019: Local / Remote 模式切换

 ---

 ### 3.4 Code 空状态页 (P4)

-**需求项**:
- R-024: 居中显示 Clawd 吉祥物（像素风格小动物，橙色）
- R-025: 显示输入框，圆角矩形，带 placeholder 文本
- R-026: 输入框左侧 `+` 按钮，支持添加附件/上下文
- R-027: 输入框左下显示权限模式选择器
- R-028: 输入框右下显示模型选择器
- R-029: 输入框右侧显示麦克风图标（语音输入）
-
-**源码参考**: `src/components/LogoV2/`, `src/components/PromptInput/`
+- R-020: 居中显示 Clawd 吉祥物（像素风橙色小动物）
+- R-021: 底部输入框，圆角，placeholder 文本
+- R-022: `+` 按钮（添加附件/上下文）
+- R-023: 权限模式选择器（左下）
+- R-024: 模型选择器（右下）
+- R-025: 麦克风图标（语音输入，右侧）

 ---

-### 3.5 Code 活跃会话页 (P5)
+### 3.5 Code 活跃会话页 (P5) — 核心页面

-**功能描述**: 最核心的页面，显示 AI 对话过程。
+#### 3.5.1 会话标题栏

-#### 会话标题栏
+- R-026: 会话标题可点击修改
+- R-027: `▷ Preview ▾` 按钮（右上）

- R-030: 显示会话标题，可点击修改
- R-031: 右上角显示 `▷ Preview ▾` 按钮
+#### 3.5.2 消息列表

-#### 消息列表
+- R-028: 用户消息 — 右对齐暖色气泡
+- R-029: AI 文本 — 左对齐，Markdown 富文本
+- R-030: AI 思考 — 可折叠灰色块
+- R-031: 工具调用 — 可折叠块，显示工具名 + 摘要
+- R-032: 系统消息 — 居中灰色
+- R-033: 折叠区段 — `▸ Initialized your session`，内含子工具列表
+- R-034: 上下文压缩分界线
+- R-035: "N new messages" 跳转提示

- R-032: 虚拟滚动渲染消息列表，支持大量消息高性能显示
- R-033: 用户消息右对齐，暖色背景气泡
- R-034: AI 文本回复左对齐，支持 Markdown 富文本渲染
- R-035: AI 思考过程可折叠展示
- R-036: 工具调用块可折叠，显示工具名 + 参数摘要
- R-037: 系统消息居中灰色显示
- R-038: 支持消息分组折叠（如 `▸ Initialized your session`）
- R-039: 折叠区段内显示工具调用列表（`Agent 描述` / `Bash · N tool calls`）
- R-040: 上下文压缩分界线标记
- R-041: 滚动到顶部时显示 "N new messages" 跳转提示
-
-**消息类型数据模型**:
+**消息类型**:
 ```typescript
 type MessageType =
-  | 'user_text'              // 用户文本
-  | 'user_image'             // 用户图片
-  | 'assistant_text'         // AI 文本
-  | 'assistant_thinking'     // AI 思考
-  | 'assistant_tool_use'     // AI 工具调用
-  | 'user_tool_result'       // 工具执行结果
-  | 'system_text'            // 系统消息
-  | 'system_error'           // API 错误
-  | 'grouped_tool_use'       // 分组工具调用
-  | 'collapsed_section'      // 折叠区段
-  | 'compact_boundary'       // 压缩分界线
-  | 'attachment'             // 附件
+  | 'user_text'          | 'user_image'
+  | 'assistant_text'     | 'assistant_thinking'  | 'assistant_tool_use'
+  | 'user_tool_result'   | 'system_text'         | 'system_error'
+  | 'grouped_tool_use'   | 'collapsed_section'   | 'compact_boundary'
 ```

-#### 实时状态指示器
+#### 3.5.3 Agent Teams 可视化

- R-042: AI 处理中显示闪烁图标 + 动态动词（`Crafting...` / `Thinking...`）
- R-043: 显示已用时间计时器
- R-044: 显示已生成 token 数
- R-045: 提供停止生成按钮
+**功能描述**: 当对话中创建 Agent Teams 时，UI 需要展示每个 Team 成员的实时工作状态，等同于 CLI 终端中用 Shift+Up/Down 切换查看各成员 transcript 的体验。

-#### 底部输入区
+- R-036: 底部 Team 状态栏 — 显示活跃的 Team 名称 + 成员数量
+- R-037: 成员标签列表 — 每个 teammate 显示为可点击的标签（名称 + 颜色标识 + 状态指示）
+- R-038: 点击成员标签 → 切换到该成员的 transcript 视图
+- R-039: 成员 transcript 视图 — 独立的消息列表，展示该 agent 的完整对话
+- R-040: 成员状态指示 — `running`（闪烁点）/ `completed`（绿勾）/ `failed`（红叉）
+- R-041: 返回 Leader 视图按钮
+- R-042: 后台任务通知 — 当 teammate 完成时在 Leader 视图中显示 `<task-notification>` 消息

- R-046: 多行文本输入框，支持自动扩展高度
- R-047: 左侧 `+` 按钮添加附件
- R-048: 显示当前权限模式指示器
- R-049: 显示当前模型选择器
- R-050: AI 运行中显示停止按钮
+**数据模型**:
+```typescript
+type TeamContext = {
+  teamName: string
+  isLeader: boolean
+  teammates: Record<string, {
+    name: string
+    agentType?: string
+    status: 'running' | 'completed' | 'failed' | 'idle'
+    color: AgentColor   // red | blue | green | yellow | purple | orange | pink | cyan
+    messageCount: number
+  }>
+}

-**源码参考**: `src/screens/REPL.tsx`, `src/components/FullscreenLayout.tsx`, `src/components/VirtualMessageList.tsx`
+// 视图状态
+expandedView: 'none' | 'tasks' | 'teammates'
+viewingAgentTaskId?: string  // 当前正在查看的 teammate transcript
+```
+
+**交互流程**:
+```
+Leader 视图（默认）
+  ├─ 对话中 AI 调用 TeamCreate → 底部出现 Team 状态栏
+  ├─ Team 成员开始工作 → 各标签显示 running 状态
+  ├─ 点击成员标签 → 切换到该成员的 transcript
+  │   ├─ 显示该 agent 的独立消息流
+  │   ├─ 实时更新（工具调用、文本输出）
+  │   └─ 点击 "← Back to Leader" 返回
+  ├─ 成员完成 → 标签变为 completed + Leader 收到 task-notification
+  └─ 所有成员完成 → Leader 综合结果
+```
+
+**源码参考**:
+- `src/state/AppStateStore.ts` — `expandedView`, `viewingAgentTaskId`, `teamContext`
+- `src/components/TeammateViewHeader.tsx` — 切换队友视图头部
+- `src/components/CoordinatorAgentStatus.tsx` — 协调者状态面板
+- `src/components/tasks/BackgroundTaskStatus.tsx` — 后台任务状态
+- `src/state/selectors.ts` — `getViewedTeammateTask()`, `getActiveAgentForInput()`
+
+#### 3.5.4 工具调用展示
+
+- R-043: 单个工具调用 — 可折叠块（工具名 + 参数 + 结果）
+- R-044: Agent 子任务 — `Agent  描述` 格式，带 Agent 颜色标识
+- R-045: Bash 命令 — 命令文本高亮 + 可展开输出
+- R-046: 文件编辑 — Diff 结构化展示（绿色添加/红色删除）
+- R-047: 分组工具调用 — 连续同类工具合并为一组
+
+#### 3.5.5 实时状态
+
+- R-048: `✦ Crafting...` 闪烁动画 + 动态动词
+- R-049: 计时器 + token 计数
+- R-050: 停止生成按钮
+
+#### 3.5.6 底部输入区
+
+- R-051: 多行文本输入，自动扩展
+- R-052: `+` 添加附件
+- R-053: 权限模式指示器
+- R-054: 模型选择器
+- R-055: 停止按钮（AI 运行中）

 ---

 ### 3.6 权限模式选择器 (P6)

-**需求项**:
- R-051: 下拉菜单显示 4 个权限选项
- R-052: 每个选项显示图标 + 名称 + 描述
- R-053: 选中项显示 ✓ 标记
- R-054: 切换后即时生效
-
-**选项列表**:
+- R-056: 4 个选项的下拉菜单
+- R-057: 每项显示图标 + 名称 + 描述
+- R-058: 选中项 ✓ 标记
+- R-059: 切换即时生效

 | 选项 | 图标 | 描述 |
 |------|------|------|
@ -205,26 +223,13 @@ type MessageType =
 | Plan mode | 📋 | Create a plan before making changes |
 | Bypass permissions | ⚠ | Accepts all permissions |

-**数据模型**:
-```typescript
-type PermissionMode = 'default' | 'acceptEdits' | 'plan' | 'bypassPermissions' | 'dontAsk' | 'auto'
-```
-
-**源码参考**: `src/types/permissions.ts`, `src/utils/permissions/PermissionMode.ts`
-
 ---

 ### 3.7 模型选择器 (P7)

-**需求项**:
- R-055: 上部显示模型列表，下部显示 Effort 等级（分隔线分割）
- R-056: 每个模型显示名称 + 简短描述
- R-057: 选中模型显示 ✓ 标记
- R-058: Effort 等级: Low / Medium / High / Max
- R-059: 选中 Effort 显示 ✓ 标记
- R-060: 不同模型支持不同的 Effort 范围
-
-**模型列表**:
+- R-060: 模型列表（上部）+ Effort 等级（下部，分隔线分割）
+- R-061: 模型 — 名称 + 描述 + ✓ 选中
+- R-062: Effort — Low / Medium / High / Max + ✓ 选中

 | 模型 | 描述 |
 |------|------|
@ -233,214 +238,91 @@ type PermissionMode = 'default' | 'acceptEdits' | 'plan' | 'bypassPermissions' |
 | Sonnet 4.6 | Most efficient for everyday tasks |
 | Haiku 4.5 | Fastest for quick answers |

-**源码参考**: `src/components/ModelPicker.tsx`, `src/utils/model/modelOptions.ts`, `src/utils/effort.ts`
-
 ---

 ### 3.8 Scheduled 定时任务页 (P8)

-**需求项**:
- R-061: 页面标题 `Scheduled tasks`
- R-062: 描述文本说明如何使用定时任务
- R-063: 空状态显示时钟图标 + `No scheduled tasks yet.`
- R-064: 右上角 `+ New task` 按钮
- R-065: 有任务时显示任务列表（名称 + 描述 + 频率 + 下次执行时间）
- R-066: 每项支持编辑、删除操作
-
-**数据模型**:
-```typescript
-type ScheduledTask = {
-  id: string
-  name: string
-  description: string
-  prompt: string
-  cron: string              // 5-field cron 表达式
-  frequency: 'daily' | 'weekly' | 'monthly' | 'custom'
-  time: string              // HH:mm
-  createdAt: number
-  lastFiredAt?: number
-  recurring: boolean
-  permissionMode: PermissionMode
-  model: string
-  folderPath?: string
-  useWorktree: boolean
-}
-```
-
-**源码参考**: `src/utils/cronTasks.ts`, `src/tools/ScheduleCronTool/`
+- R-063: 页面标题 `Scheduled tasks`
+- R-064: 空状态：时钟图标 + `No scheduled tasks yet.`
+- R-065: `+ New task` 按钮（右上）
+- R-066: 任务列表：名称 + 描述 + 频率 + 下次执行
+- R-067: 每项支持编辑、删除

 ---

 ### 3.9 新建定时任务模态框 (P9)

-**需求项**:
- R-067: 模态框标题 `New scheduled task`
 - R-068: Info 横幅: `Local tasks only run while your computer is awake.`
- R-069: Name 文本输入（必填）
- R-070: Description 文本输入（必填）
- R-071: Prompt 多行文本输入
- R-072: Permissions 下拉选择器
- R-073: Model 下拉选择器
- R-074: Select folder 按钮
- R-075: worktree 复选框
- R-076: Frequency 下拉选择（Daily/Weekly/Monthly/Custom）
- R-077: Time 时间选择器
- R-078: 底部注释文本
- R-079: Cancel / Create task 操作按钮
+- R-069: Name（必填）+ Description（必填）
+- R-070: Prompt 多行输入
+- R-071: Permissions + Model 选择器
+- R-072: Select folder + worktree 复选框
+- R-073: Frequency 下拉 + Time 时间选择
+- R-074: Cancel / Create task 按钮

 ---

-### 3.10 Search 搜索页 (P10)
-
-**需求项**:
- R-080: 搜索输入框，支持实时搜索
- R-081: 防抖输入（100ms）
- R-082: 搜索结果列表：文件路径 + 行号 + 匹配文本高亮
- R-083: 选中结果显示上下文代码预览（±4 行）
- R-084: 最多 500 条结果，每文件最多 10 条
-
-**源码参考**: `src/components/GlobalSearchDialog.tsx`, `src/utils/ripgrep.ts`
-
---
-
-### 3.11 Dispatch 分发页 (P11)
-
-**需求项**:
- R-085: Agent 列表：显示已配置的 Agent 定义
- R-086: Agent 编辑器：创建/编辑 Agent 配置（名称、描述、模型、工具、颜色）
- R-087: 任务监控面板：后台任务状态列表
- R-088: Remote 会话管理
-
-**源码参考**: `src/components/agents/`, `src/components/tasks/`
-
---
-
-### 3.12 Customize 设置页 (P12)
-
-**需求项**:
- R-089: Status 标签：系统诊断信息展示
- R-090: Config 标签：权限规则编辑 + MCP 服务器配置
- R-091: Usage 标签：Token 用量和成本统计
- R-092: 主题选择器
- R-093: 输出风格选择器
- R-094: MCP 服务器管理面板
-
-**源码参考**: `src/components/Settings/`, `src/components/mcp/`
-
---
-
-## 四、交互组件需求
+## 四、交互组件

 ### 4.1 权限请求对话框

-**功能描述**: AI 执行工具前弹出的确认对话框。
+- R-075: Bash 命令 — 显示命令内容
+- R-076: 文件编辑 — 显示 diff
+- R-077: 文件写入 — 显示路径
+- R-078: 操作按钮：允许 / 拒绝 / 总是允许 / 总是拒绝

- R-095: Bash 命令权限请求 — 显示命令内容
- R-096: 文件编辑权限请求 — 显示 diff 预览
- R-097: 文件写入权限请求 — 显示文件路径
- R-098: 网络请求权限请求 — 显示 URL
- R-099: 操作按钮：允许 / 拒绝 / 总是允许 / 总是拒绝
+### 4.2 Markdown 渲染

-**源码参考**: `src/components/permissions/`
-
-### 4.2 Markdown 渲染器
-
- R-100: 标题、列表、粗体/斜体
- R-101: 代码块语法高亮
- R-102: 表格渲染
- R-103: 文件路径可点击跳转
- R-104: 图片内联显示
-
-**源码参考**: `src/components/Markdown.tsx`, `src/components/HighlightedCode/`
+- R-079: 标题、列表、粗体/斜体
+- R-080: 代码块语法高亮
+- R-081: 表格
+- R-082: 文件路径可点击

 ### 4.3 Diff 展示

- R-105: 添加行绿色 / 删除行红色
- R-106: 行号显示
- R-107: 文件路径头部
- R-108: 行内 word-level diff 高亮
+- R-083: 添加行绿色 / 删除行红色
+- R-084: 行号 + 文件路径头部
+- R-085: Word-level diff 高亮

-**源码参考**: `src/components/StructuredDiff.tsx`, `src/components/diff/`
+### 4.4 通知

-### 4.4 通知系统
-
- R-109: Toast 通知（成功/错误/警告/信息）
- R-110: 自动消失或手动关闭
- R-111: 队列管理
-
-**源码参考**: `src/context/notifications.tsx`
+- R-086: Toast 通知（成功/错误/警告）
+- R-087: 自动消失 + 队列

 ### 4.5 通用对话框

- R-112: 对话框基础组件（标题 + 内容 + 按钮）
- R-113: 模态遮罩层
- R-114: ESC 关闭最上层对话框
-
-**源码参考**: `src/components/design-system/Dialog.tsx`
-
-### 4.6 下拉选择器
-
- R-115: 单选 / 多选模式
- R-116: 键盘导航（↑↓ 选择 / Enter 确认 / Esc 关闭）
- R-117: 搜索过滤
- R-118: ✓ 选中标记
-
-**源码参考**: `src/components/CustomSelect/`
+- R-088: 标题 + 内容 + 按钮
+- R-089: ESC 关闭

 ---

 ## 五、数据模型

-### 5.1 全局应用状态 (AppState)
+### 5.1 全局状态 (AppState)

 ```typescript
 type AppState = {
-  // 模型设置
-  mainLoopModel: string | null          // 当前模型 ID
+  // 模型
+  mainLoopModel: string | null
  effort: 'low' | 'medium' | 'high' | 'max'
-  
-  // 视图状态
-  expandedView: 'none' | 'tasks' | 'teammates'
-  footerSelection: 'tasks' | 'tmux' | 'bagel' | 'teams' | 'bridge' | 'companion' | null
-  
-  // 权限
  permissionMode: PermissionMode
-  
+
+  // 视图
+  expandedView: 'none' | 'tasks' | 'teammates'
+  viewingAgentTaskId?: string
+
  // 任务
  tasks: Record<string, TaskState>
  foregroundedTaskId?: string
-  viewingAgentTaskId?: string
-  
-  // MCP 服务器
-  mcp: {
-    clients: MCPConnection[]
-    tools: Tool[]
-    commands: Command[]
-  }
-  
-  // 团队协作
-  teamContext?: {
-    teamName: string
-    teammates: Record<string, TeammateInfo>
-    isLeader: boolean
-  }
-  
+
+  // 团队
+  teamContext?: TeamContext
+
  // 通知
-  notifications: {
-    current: Notification | null
-    queue: Notification[]
-  }
-  
-  // 思考模式
-  thinkingEnabled: boolean
-  
-  // 设置
-  settings: Settings
+  notifications: { current: Notification | null; queue: Notification[] }
 }
 ```

-**源码参考**: `src/state/AppStateStore.ts`
-
 ### 5.2 消息模型

 ```typescript
@ -450,7 +332,6 @@ type Message = {
  content: ContentBlock[]
  timestamp: number
  model?: string
-  metadata?: MessageMetadata
 }

 type ContentBlock =
@ -461,108 +342,69 @@ type ContentBlock =
  | { type: 'thinking'; thinking: string }
 ```

-### 5.3 任务状态模型
-
-```typescript
-type TaskState =
-  | { type: 'local_shell'; command: string; status: 'running' | 'completed' | 'failed' }
-  | { type: 'local_agent'; agentName: string; status: 'running' | 'completed' }
-  | { type: 'remote_agent'; url: string; status: 'connecting' | 'connected' | 'disconnected' }
-  | { type: 'in_process_teammate'; name: string; agentType: string }
-```
-
 ---

-## 六、导航与路由
+## 六、导航模型

-### 6.1 导航模型
-
-应用采用**状态驱动导航**（非 URL 路由）:
+状态驱动（非 URL 路由）:

 ```
-顶级切换: Chat / Cowork / Code (标签页)
-         ↓
-侧边栏导航: New session → Code 空状态
-            Search → 搜索页
-            Scheduled → 定时任务页
-            Dispatch → 分发页
-            Customize → 设置页
-         ↓
-会话列表: 点击会话 → Code 活跃会话页
-         ↓
-子视图: expandedView → tasks 面板 / teammates 面板
-        viewingAgentTaskId → Agent 对话视图
+侧边栏: + New session → Code 空状态
+         Scheduled → 定时任务页
+         会话列表项 → Code 活跃会话页
+                      ↓
+                      expandedView = 'teammates' → Agent Teams 面板
+                      viewingAgentTaskId → 切换到某个 teammate 的 transcript
 ```

-### 6.2 模态层叠
-
- 对话框使用 LIFO 栈管理
- ESC 关闭最上层
- 遮罩层防止底层交互
-
 ---

 ## 七、实施路线图

-### Phase 1: 基础框架（可独立实现）
-1. 项目脚手架搭建
-2. 主题系统（颜色 token）
-3. 设计系统基础组件（Dialog, Tabs, Select, Button）
+### Phase 1: 基础框架
+1. 项目脚手架 + 主题系统
+2. 设计系统组件（Dialog, Select, Button）
+3. App Shell 布局（标题栏 + 侧边栏 + 状态栏）
 4. 全局状态管理
-5. App Shell 三栏布局

-### Phase 2: 核心对话页
-6. Code 空状态页（吉祥物 + 输入框）
-7. 输入区域（文本 + 附件 + 选择器）
-8. 消息列表基础版（用户文本 + AI 文本）
-9. 权限 / 模型选择器
-10. 加载状态指示器
+### Phase 2: 核心对话
+5. Code 空状态页
+6. 输入区域（文本 + 选择器）
+7. 消息列表（用户 + AI 文本）
+8. 权限 / 模型选择器
+9. 加载状态

 ### Phase 3: 高级渲染
-11. Markdown 渲染器
-12. 代码语法高亮
-13. 工具调用展示（折叠/展开）
-14. Diff 结构化展示
-15. 权限请求对话框
+10. Markdown + 代码高亮
+11. 工具调用展示
+12. Diff 展示
+13. 权限请求对话框

-### Phase 4: 辅助页面
-16. Scheduled 定时任务页 + 新建模态框
-17. Search 搜索页
-18. Dispatch 分发页
-19. Customize 设置页
+### Phase 4: Agent Teams
+14. Team 状态栏 + 成员标签
+15. Teammate transcript 视图切换
+16. 后台任务通知

-### Phase 5: 交互完善
-20. 会话管理全流程
-21. 键盘快捷键
-22. 通知系统
-23. 虚拟滚动优化
-24. 响应式适配
+### Phase 5: 定时任务
+17. Scheduled 页面 + 新建模态框

 ---

-## 八、关键源码文件索引
+## 八、关键源码索引

 | 功能 | 路径 |
 |------|------|
 | 全局状态 | `src/state/AppStateStore.ts` |
-| 状态 Provider | `src/state/AppState.tsx` |
 | 主屏幕 | `src/screens/REPL.tsx` |
-| 全屏布局 | `src/components/FullscreenLayout.tsx` |
-| 输入组件 | `src/components/PromptInput/PromptInput.tsx` |
-| 消息渲染 | `src/components/Message.tsx` |
-| 虚拟滚动 | `src/components/VirtualMessageList.tsx` |
+| 布局 | `src/components/FullscreenLayout.tsx` |
+| 输入 | `src/components/PromptInput/PromptInput.tsx` |
+| 消息 | `src/components/Message.tsx`, `src/components/messages/` |
 | 权限类型 | `src/types/permissions.ts` |
-| 权限 UI | `src/components/permissions/PermissionRequest.tsx` |
 | 模型选择 | `src/components/ModelPicker.tsx` |
-| 主题定义 | `src/utils/theme.ts` |
-| 设计系统 | `src/components/design-system/` |
+| 主题 | `src/utils/theme.ts` |
 | 定时任务 | `src/utils/cronTasks.ts` |
-| 搜索 | `src/components/GlobalSearchDialog.tsx` |
-| 设置 | `src/components/Settings/` |
-| Agent | `src/components/agents/` |
-| MCP | `src/components/mcp/` |
-| 工具接口 | `src/Tool.ts` |
-| 消息类型 | `src/components/messages/` |
+| Agent Teams | `src/components/TeammateViewHeader.tsx`, `src/components/CoordinatorAgentStatus.tsx` |
+| 后台任务 | `src/components/tasks/BackgroundTaskStatus.tsx` |
 | Diff | `src/components/StructuredDiff.tsx` |
 | 会话管理 | `src/components/LogSelector.tsx` |
-| 导航 hook | `src/hooks/useGlobalKeybindings.tsx` |
+| 服务端 API | `src/server/` |
--- a/docs/ui-clone/02-ui-design-spec.md
+++ b/docs/ui-clone/02-ui-design-spec.md
@ -322,10 +322,7 @@
 ```
 ┌──────────────┐
 │ + New session │ ← 导航项
-│ 🔍 Search     │
 │ ⏰ Scheduled  │
-│ 📦 Dispatch   │
-│ ⚙ Customize  │
 │              │
 │ All projects ▾│ ← 项目过滤
 │ ─────────────│
@ -582,7 +579,68 @@

 ---

-### 5.10 Scheduled 页面
+### 5.10 Agent Teams 面板
+
+当对话中创建 Agent Teams 时，消息列表下方出现 Team 状态栏和成员标签。
+
+```
+┌──────────────────────────────────────────────────────────┐
+│ [消息列表...]                                            │
+│                                                          │
+│ ▸ Team: ui-backend-dev (3 members)                      │
+│ ┌──────────────────────────────────────────────────────┐ │
+│ │ ● session-dev    ● config-dev     ○ features-dev     │ │
+│ │   running          completed        running          │ │
+│ └──────────────────────────────────────────────────────┘ │
+│                                                          │
+│ ─────── Viewing: session-dev transcript ──────────      │
+│                                                          │
+│  [该成员的独立消息流]                                      │
+│  > 正在读取 sessionStorage.ts...                          │
+│  Agent  探索会话存储                                      │
+│  Bash · 2 tool calls                                     │
+│                                                          │
+│  [← Back to Leader]                                      │
+└──────────────────────────────────────────────────────────┘
+```
+
+| 元素 | 规格 |
+|------|------|
+| Team 状态栏高度 | 32px |
+| Team 状态栏背景 | `#F5F3EF` |
+| Team 名称 | 13px, 字重 600 |
+| 成员数量 | 13px, 色 `#999999` |
+| 成员标签容器 | flex row, gap 8px, padding 8px 12px |
+| 成员标签 | 圆角 6px, padding 4px 10px, 字号 12px, 字重 500 |
+| 成员标签背景(默认) | `#F0EDE8` |
+| 成员标签背景(选中) | Agent 专用色（半透明 15%） |
+| 成员标签边框(选中) | 2px solid Agent 专用色 |
+| 状态指示器 | 左侧 6px 圆点 |
+| Running 指示器 | 色 `rgb(202,138,4)` (黄), 闪烁动画 |
+| Completed 指示器 | 色 `rgb(44,122,57)` (绿), 实心 |
+| Failed 指示器 | 色 `rgb(171,43,63)` (红), 实心 |
+| Idle 指示器 | 色 `#CCCCCC` (灰), 空心 |
+| 分隔线("Viewing...") | 1px solid `#E5E3DE`, 上下 8px margin |
+| "Viewing" 标签 | 12px, 色 `#999999`, 居中 |
+| Back 按钮 | 13px, 色 `rgb(87,105,247)`, 左对齐, cursor pointer |
+| Teammate transcript | 与主消息列表相同的渲染规则 |
+
+**Agent 颜色分配** (来自 `src/utils/theme.ts`):
+
+| 颜色名 | Light 色值 | 用于标签边框和背景色 |
+|--------|-----------|---------------------|
+| red | `rgb(220,38,38)` | 第 1 个 agent |
+| blue | `rgb(37,99,235)` | 第 2 个 agent |
+| green | `rgb(22,163,74)` | 第 3 个 agent |
+| yellow | `rgb(202,138,4)` | 第 4 个 agent |
+| purple | `rgb(147,51,234)` | 第 5 个 agent |
+| orange | `rgb(234,88,12)` | 第 6 个 agent |
+| pink | `rgb(219,39,119)` | 第 7 个 agent |
+| cyan | `rgb(8,145,178)` | 第 8 个 agent |
+
+---
+
+### 5.11 Scheduled 页面

 ```
 ┌──────────────────────────────────────────┐
@ -610,7 +668,7 @@

 ---

-### 5.11 New Scheduled Task 模态框
+### 5.12 New Scheduled Task 模态框

 ```
 ┌──────────────────────────────────────────────┐
@ -678,7 +736,7 @@

 ---

-### 5.12 活跃会话标题栏
+### 5.13 活跃会话标题栏

 ```
  Analyze project structure and codebase ▾        ▷ Preview ▾
@ -836,17 +894,27 @@
  → 输入框恢复为空/上次未发送的草稿
 ```

-### 8.6 搜索流程
+### 8.6 Agent Teams 流程

 ```
-用户点击侧边栏 "Search"
-  → 主内容区显示搜索页
-  → 用户输入关键词
-  → 100ms 防抖后发起搜索
-  → 显示匹配结果列表
-  → 用户点击结果项
-  → 显示代码上下文预览
-  → 用户可跳转到文件或插入到对话
+对话中 AI 调用 TeamCreate
+  → 消息列表下方出现 Team 状态栏
+  → 显示 Team 名称 + 成员标签列表
+  → 各成员标签显示 ● running（黄色闪烁）
+
+用户点击某个成员标签
+  → 消息列表切换到该成员的 transcript
+  → 显示 "Viewing: {name} transcript" 分隔线
+  → 实时渲染该 agent 的消息流（工具调用、文本）
+  → 底部显示 "← Back to Leader" 按钮
+
+成员完成任务
+  → 对应标签变为 ● completed（绿色实心）
+  → Leader 视图收到 task-notification 消息
+
+用户点击 "← Back to Leader"
+  → 返回 Leader 的主对话流
+  → Team 状态栏依然可见
 ```

 ---
@ -875,10 +943,7 @@
 | 用途 | 图标 | 说明 |
 |------|------|------|
 | New session | `+` | 加号，创建新会话 |
-| Search | 🔍 | 放大镜 |
 | Scheduled | ⏰ | 时钟 |
-| Dispatch | 📦 | 发送箱 |
-| Customize | 🔒 | 锁/齿轮 |
 | Ask permissions | ⚙ | 齿轮 |
 | Auto accept | `</>` | 代码符号 |
 | Plan mode | 📋 | 剪贴板 |
@ -892,6 +957,9 @@
 | Git 分支 | 🔀 | 分支图标 |
 | 前进 | → | 右箭头 |
 | 后退 | ← | 左箭头 |
-| 下载 | ⬇ | 下箭头 |
 | 选中 | ✓ | 勾选 |
 | 信息 | ℹ | 圆形 i |
+| Agent Running | ● | 6px 圆点，闪烁 |
+| Agent Completed | ● | 6px 实心绿点 |
+| Agent Failed | ● | 6px 实心红点 |
+| Back to Leader | ← | 左箭头 + 文本 |