fischer-agentkit/docs/plans/2026-06-19-001-feat-chat-area-vi-redesign-plan.md

---
status: active
date: 2026-06-19
type: feat
origin: docs/brainstorms/2026-06-18-chat-area-vi-redesign-requirements.md
---

# feat: 聊天主区 VI 重梳与新功能适配 — 实施计划（执行中 / 复审版）

---

## Summary

本计划承接 [聊天主区 VI 重梳需求文档](docs/brainstorms/2026-06-18-chat-area-vi-redesign-requirements.md)，目标是把需求中的设计令牌、消息视觉范式、右屏 Tab 面板、@team / @board 消息适配以及 Preview 静态样例全部落地。

**当前进展（截至复审时点）：**

- `U1. 补齐设计令牌与主题映射` 已完成：`tokens.css` 与 `theme.ts` 新增 `--radius-card`、`--font-mono`、`--accent-team*`、`--accent-board*`、`--shadow-card` 等；关键组件已使用语义 token。
- `U2. 消息模型与分发器对齐后端事件` 已完成：`IChatMessage` 扩展了 `plan_phases`、`error_detail`、`board_conclusion` 等字段；`useMessageRenderer.ts` 已新增 `team_plan`、`board_banner`、`board_conclusion`、`error` 等路由；`chat.ts` 已调整 `board_started` / `board_concluded` 事件推送。
- `U3. TeamPlanCard 视觉升级` 已完成：蓝色顶条、阶段时间线、进度条、状态图标就位。
- `U4. Board 复杂消息组件群` 已完成：`BoardBannerCard.vue`、`BoardRoundCard.vue`、`BoardConclusionCard.vue` 已新建/升级；`Scene4BoardDiscussion.vue` 已加入 banner、多轮发言、小结、结论的完整示例。
- `U5. ErrorCard 重试与渲染集成` 已完成：ErrorCard 支持重试事件，`useMessageRenderer.ts` 已路由 error 类型。
- `U6. ChatInput 交互补全` 已完成：拖拽上传浮层、清空按钮、专家团/私董会语义色按钮就位。
- `U7. 右屏 Tab 面板内容补全` **部分完成**：Tab bar 与「监控」内容已就位，但「技能 / 系统 / 知识库」三个 Tab 的内容尚未根据 `activeTab` 切换渲染。

**剩余工作：**

- `U7` 完成：实现 `SkillsTab` / `SystemTab` / `KnowledgeTab` 三个子组件，并在 `SystemMonitorPanel.vue` 中按 `activeTab` 切换。
- `U7` 结对代码审查。
- `U8` Preview 样例场景精修。
- `U8` 结对代码审查。
- `U9` BoardMeetingModal VI 适配收尾。
- `U9` 结对代码审查。
- `U10` 质量门与后端回归测试。

**执行纪律：** 每个开发单元完成后，启动一个子 agent 进行结对代码审查；审查通过后再进入下一单元。全部完成后统一跑 `vue-tsc --noEmit` / `npm run build` / `pytest` 并修复问题。

---

## Problem Frame

聊天主区既要承载普通对话（user / assistant 文本），也要承载越来越复杂的 AI 运行态：专家团计划、私董会多轮讨论、工具调用链、错误恢复。现有实现已经把这些类型拆成独立组件，但：

1. 视觉语言与需求文档仍有偏差（TeamPlanCard 缺少进度条、BoardRoundCard 缺少紫色边框与角色标签、ErrorCard 缺少重试）；
2. 消息分发器没有为 `error`、`board_started`、`board_conclusion`、`plan_update` 等类型预留专属渲染路径；
3. 右屏 `SystemMonitorPanel` 只有「监控」有内容，「技能 / 系统 / 知识库」尚未接入；
4. 部分设计令牌（`--radius-card`、`--font-mono`）和交互细节（拖拽上传、清空输入、按钮语义色）尚未补齐。

---

## Requirements Traceability

| 需求来源 | 本计划覆盖范围 |
|---|---|
| §2 Color System | 补齐 `--radius-card`、`--font-mono`，深色模式同步，移除硬编码旧色 |
| §3.1 整体布局 | ChatView max-width 已居中；右屏折叠由 `RightPanel` 负责，本计划补 Tab 内容 |
| §3.2 消息类型表 | 为 `team_plan`、`board_banner`、`board_speech`、`board_summary`、`board_conclusion`、`error` 补齐/升级组件与分发 |
| §3.3 关键交互 | ChatInput 拖拽浮层、清空按钮、按钮语义色；ErrorCard 重试；ToolCallCard 默认收起已具备 |
| §4 Right Panel | SystemMonitorPanel 增加「技能 / 系统 / 知识库」可切换内容 |
| §5 Input Area | 专家团/私董会按钮着色、拖拽上传、清空 |
| §6.3 Mockup 6 场景 | 调整 Scene1/4/5，使预览更接近需求图 |

---

## Key Technical Decisions

1. **继续沿用 `MessageShell` + `useMessageRenderer` 分发架构。** 复杂消息统一走 `ChatMessage` 分发，不在 `ChatView` 里写大量 `v-if`。
2. **扩展 `IChatMessage` 模型承载复杂消息字段。** 新增 `plan_phases`、`error_detail`、`board_conclusion`，让后端事件可以无损透传到组件层，而不是把所有状态塞进 `content`。
3. **Board 顶部 Banner 用消息流中的 `milestone` 卡片表达。** `board_started` 事件进入聊天列表时渲染为 `BoardBannerCard`，关闭原来的纯文本 `milestone` fallback；`board_concluded` 渲染为 `BoardConclusionCard`。
4. **右屏 Tab 内容复用现有 store 与组件，但做紧凑版。** 避免把完整 `SkillsView` / `KnowledgeBaseView` 的页面级 padding 和 header 搬进侧边栏；新建 `SkillsPanel` / `KnowledgePanel` / `SystemPanel` 只保留核心列表/指标。
5. **所有新增/修改组件必须先过 `vue-tsc --noEmit`。** 由于前端没有单元测试，类型检查 + 构建即主要质量门。
6. **每个单元完成后启动结对审查子 agent。** 审查范围：类型安全、Vue 范式、设计令牌使用、边界条件处理；审查通过后再进入下一单元。

---

## Implementation Units

### U1. 补齐设计令牌与主题映射

**Goal:** 让需求文档 §2 中新增的 `--radius-card`、`--font-mono` 等令牌就位，并清理组件中残留的硬编码色值。

**Requirements:** §2.1 / §2.2 / §2.4 / §2.5

**Dependencies:** 无

**Files:**
- `src/agentkit/server/frontend/src/styles/tokens.css`
- `src/agentkit/server/frontend/src/styles/theme.ts`
- `src/agentkit/server/frontend/src/components/chat/BoardMeetingModal.vue`
- `src/agentkit/server/frontend/src/components/layout/SystemMonitorPanel.vue`

**Approach:**
- 在 `:root` 与 `[data-theme="dark"]` 中新增 `--radius-card: 12px` 和 `--font-mono: 'SF Mono', 'Fira Code', ...`。
- `theme.ts` 的 `Card` / `Modal` 组件 token 优先读取 `--radius-card`。
- 将 `BoardMeetingModal.vue` 中硬编码的 `rgba(142, 68, 173, ...)` 与 `rgba(99, 102, 241, ...)` 替换为 `--accent-board-soft` / `--accent-board-bg`。
- 将 `SystemMonitorPanel.vue` 中硬编码的健康色 `#22c55e`、错误色 `#ef4444` 替换为语义令牌。

**Test scenarios:**
- `vue-tsc --noEmit` 通过。
- 在浏览器开发者工具中检查 `:root` 包含 `--radius-card` 与 `--font-mono`。
- 深色模式下 `--accent-board-soft` 为带透明度的紫色。

**Verification:** 类型检查通过；浏览器 computed styles 可见新增令牌；BoardMeetingModal 选中态背景不再出现旧紫色。

**Pair review:** 由子 agent 检查 token 命名一致性、深色模式同步、是否仍有遗漏硬编码色值。

---

### U2. 消息模型与分发器对齐后端事件

**Goal:** 让 `useMessageRenderer` 能正确识别 `error`、`board_started`、`board_conclusion`、`plan_update` 等消息类型，并给组件传递结构化数据。

**Requirements:** §3.2 / §6.1

**Dependencies:** U1

**Files:**
- `src/agentkit/server/frontend/src/api/types.ts`
- `src/agentkit/server/frontend/src/components/chat/helpers/useMessageRenderer.ts`
- `src/agentkit/server/frontend/src/components/chat/messages/index.ts`
- `src/agentkit/server/frontend/src/components/chat/ChatMessage.vue`
- `src/agentkit/server/frontend/src/stores/chat.ts`
- `src/agentkit/server/frontend/src/components/chat/messages/BoardBannerCard.vue`（已新建）
- `src/agentkit/server/frontend/src/components/chat/messages/BoardConclusionCard.vue`（已新建）

**Approach:**
- 在 `IChatMessage` 中新增可选字段：`plan_phases?: ITeamPlanPhase[]`、`error_detail?: string`、`board_conclusion?: IBoardConcludedData`。
- 扩展 `MessageViewType` 为 `'user' | 'assistant' | 'team_plan' | 'board_banner' | 'board_speech' | 'board_summary' | 'board_conclusion' | 'milestone' | 'error'`。
- `resolveMessageType` 按 `message_type` 返回 `team_plan`（`plan_update`）、`board_banner`（新增 `board_started`）、`board_conclusion`、`error`（新增 `error`）。
- `team_plan` 分支从 `message.plan_phases` 取阶段，而不是从 `tool_calls` 映射（当前实现是错误映射）。
- `chat.ts` 中 `board_started` 不再推送纯文本 `milestone`，而是推送 `message_type: 'board_started'` 的消息；`board_concluded` 推送 `message_type: 'board_conclusion'` 并带上 `board_conclusion` 数据。
- `error` 分支对应后端 `error` 事件或本地把 `status === 'error'` 的消息路由到 `ErrorCard`。

**Test scenarios:**
- Happy path: `plan_update` 消息渲染 `TeamPlanCard` 且阶段名称正确。
- Happy path: `board_started` 渲染 `BoardBannerCard`，显示主题、专家 chips、轮次。
- Happy path: `board_conclusion` 渲染 `BoardConclusionCard`，展示共识 / 分歧 / 建议。
- Error path: 后端 `error` 事件渲染 `ErrorCard` 并带重试按钮。
- Edge case: `message.plan_phases` 为空时 `TeamPlanCard` 不崩溃。

**Verification:** 在 Preview Scene3/4/6 中可见正确渲染；`vue-tsc` 无新增类型错误。

**Pair review:** 由子 agent 检查类型定义完整性、分发器分支覆盖、`chat.ts` 事件转换是否遗漏字段。

---

### U3. TeamPlanCard 视觉升级

**Goal:** 让专家团计划 card 符合需求图：蓝色顶条、Lead 头像、阶段时间线、进度条、状态图标。

**Requirements:** §3.2 Team Plan Card 图示

**Dependencies:** U2

**Files:**
- `src/agentkit/server/frontend/src/components/chat/messages/TeamPlanCard.vue`
- `src/agentkit/server/frontend/src/components/preview/scenes/Scene3TeamPlan.vue`

**Approach:**
- 顶部增加 4px 高的 `--accent-team` 顶条，左侧显示 Lead 头像 + 「专家团计划」标签 + 完成计数。
- 阶段列表使用相对时间线：每个阶段左侧圆点/状态图标（● 执行中、○ 待执行、✓ 完成、✕ 失败），下方可展开专家子步骤（预留 `result` / `milestone` 字段）。
- 底部增加进度条：`completed / total` 百分比，用 `--accent-team` 填充。
- 颜色统一使用 `--accent-team*` 系列，不再使用默认 Ant Design 紫色。

**Test scenarios:**
- Happy path: 3 个阶段中 1 个运行、2 个待执行，进度条显示 33%。
- Edge case: 所有阶段失败，进度条为 0%，状态图标全为错误色。
- Edge case: 阶段名超长时显示 `text-overflow: ellipsis`。

**Verification:** Preview Scene3 与需求图一致；无类型错误。

**Pair review:** 由子 agent 检查样式 token 使用、进度计算正确性、状态图标映射。

---

### U4. Board 复杂消息组件群

**Goal:** 补齐私董会所需的 `BoardBannerCard`、`BoardRoundCard` 紫色边框样式、`BoardConclusionCard`。

**Requirements:** §3.2 Board Banner / Board Round Card / board_conclusion

**Dependencies:** U2

**Files:**
- `src/agentkit/server/frontend/src/components/chat/messages/BoardBannerCard.vue`（已新建）
- `src/agentkit/server/frontend/src/components/chat/messages/BoardRoundCard.vue`
- `src/agentkit/server/frontend/src/components/chat/messages/BoardConclusionCard.vue`（已新建）
- `src/agentkit/server/frontend/src/components/chat/messages/index.ts`
- `src/agentkit/server/frontend/src/components/preview/scenes/Scene4BoardDiscussion.vue`

**Approach:**
- `BoardBannerCard`：跨整行 card，顶部 4px `--accent-board` 条，显示 🏛️ 私董会主题、专家 emoji chips、主持人标签、当前轮次 / 最大轮次进度条。
- `BoardRoundCard`：外层包裹增加左侧 3px `--accent-board` 边框、`--accent-board-soft` 背景；header 显示专家头像 chip、第 N 轮、角色标签（主持/专家）。
- `BoardConclusionCard`：跨整行 card，紫色渐变顶条，内部展示「共识」「分歧」「决策建议」三个区块；默认折叠分歧与建议，点击展开。
- 导出到 `messages/index.ts`；更新 Preview Scene4 包含 banner + 3 轮发言 + 小结 + 结论。

**Test scenarios:**
- Happy path: banner 显示主题、专家、主持人、轮次进度。
- Happy path: 专家发言 card 左侧紫边，主持人 meta 带「主持」标签。
- Happy path: 结论 card 默认展开共识，折叠分歧/建议，点击可展开。
- Edge case: 结论数据为空时隐藏对应区块。

**Verification:** Preview Scene4 完整呈现 banner、发言、小结、结论；`vue-tsc` 通过。

**Pair review:** 由子 agent 检查紫色 token 一致性、BoardRoundCard 结构与需求图差异、折叠状态实现。

---

### U5. ErrorCard 重试与渲染集成

**Goal:** 错误 card 支持重试操作，并能在消息流中正确触发。

**Requirements:** §3.2 error / §3.3 错误重试

**Dependencies:** U2

**Files:**
- `src/agentkit/server/frontend/src/components/chat/messages/ErrorCard.vue`
- `src/agentkit/server/frontend/src/components/chat/helpers/useMessageRenderer.ts`
- `src/agentkit/server/frontend/src/components/chat/ChatMessage.vue`
- `src/agentkit/server/frontend/src/components/preview/scenes/Scene6Error.vue`
- `src/agentkit/server/frontend/src/stores/chat.ts`

**Approach:**
- `ErrorCard` 增加 `onRetry` prop / `emit('retry')`，在 card 底部显示「重试」按钮。
- `ChatMessage` 监听 retry 事件，调用 `chatStore.resendLastUserMessage()` 或类似 action；若不存在则新增该 action：取当前对话最后一条 user 消息重新发送。
- `useMessageRenderer` 对 `message_type === 'error'` 或 `status === 'error'` 的消息渲染 `ErrorCard`。
- Preview Scene6 的 ErrorCard 带重试按钮，点击后触发重发模拟。

**Test scenarios:**
- Happy path: 点击 ErrorCard「重试」重新发送最后一条 user 消息。
- Error path: 对话中没有 user 消息时重试按钮禁用或不显示。
- Edge case: 连续多次重试不追加重复占位消息。

**Verification:** Scene6 可交互；类型检查通过。

**Pair review:** 由子 agent 检查重试逻辑幂等性、空消息边界、事件冒泡处理。

---

### U6. ChatInput 交互补全

**Goal:** 完成输入区的语义色按钮、拖拽上传浮层、清空按钮。

**Requirements:** §5.2 / §5.3

**Dependencies:** U1

**Files:**
- `src/agentkit/server/frontend/src/components/chat/ChatInput.vue`
- `src/agentkit/server/frontend/src/components/preview/scenes/Scene1Welcome.vue`

**Approach:**
- 「专家团」按钮默认/悬停使用 `--accent-team`；「私董会」按钮默认/悬停使用 `--accent-board`；图标尺寸保持 14px。
- 在 textarea 区域监听 `dragenter` / `dragover` / `dragleave` / `drop`，放下文件时显示「拖放以附加」半透明浮层并调用现有 `handleFileChange` 逻辑。
- 在 footer 增加「清空」按钮，点击后 `inputText = ''` 并清空已选附件 pills。
- Preview Scene1 的输入框预填文本改为 `@team:tech_lead,frontend_engineer,backend_engineer 设计一个用户认证系统`。

**Test scenarios:**
- Happy path: 拖拽文件到输入区出现浮层，松开后文件被引用到输入框。
- Happy path: 点击清空后输入框与附件 pills 清空。
- Edge case: 非文件拖拽（如文本）不触发上传浮层。

**Verification:** 浏览器手动验证；`vue-tsc` 通过。

**Pair review:** 由子 agent 检查拖拽事件处理是否健壮、清空是否同时清理附件、按钮语义色是否正确。

---

### U7. 右屏 Tab 面板内容补全

**Goal:** SystemMonitorPanel 的「技能 / 系统 / 知识库」三个 Tab 有真实内容。

**Requirements:** §4.1 / §4.3

**Dependencies:** 无

**Files:**
- `src/agentkit/server/frontend/src/components/layout/SystemMonitorPanel.vue`
- `src/agentkit/server/frontend/src/stores/skills.ts`
- `src/agentkit/server/frontend/src/stores/knowledge.ts`
- `src/agentkit/server/frontend/src/components/skills/SkillCard.vue`
- `src/agentkit/server/frontend/src/components/kb/SearchTest.vue`
- `src/agentkit/server/frontend/src/api/system.ts`（已新建）

**Approach:**
- 保持 Tab bar 与切换逻辑不变，把当前监控内容拆到 `MonitorTab` 子组件。
- 新增 `SkillsTab`：使用 `useSkillsStore` 拉取技能列表，以紧凑列表展示技能名 + 描述 + 状态，点击展开 `SkillDetail`；复用 `SkillCard` 但减少 padding。
- 新增 `SystemTab`：展示当前 `resources`（CPU / 内存 / 磁盘）与服务健康检查，避免重复监控 Tab 的 4 个 metric card。
- 新增 `KnowledgeTab`：使用 `useKnowledgeStore` 拉取 sources，展示知识库源列表，并在底部嵌入 `SearchTest` 做检索测试。
- 激活 Tab 的下划线颜色改为 `--accent-team`。

**Test scenarios:**
- Happy path: 切换到「技能」Tab 可见技能列表，点击技能弹出详情。
- Happy path: 切换到「系统」Tab 可见资源使用率与服务状态。
- Happy path: 切换到「知识库」Tab 可见源列表与检索测试入口。
- Error path: API 失败时显示友好错误提示。

**Verification:** 在 `/agent/chat` 打开右屏切换 4 个 Tab；`vue-tsc` / `npm run build` 通过。

**Pair review:** 由子 agent 检查 store 使用是否引入重复请求、Tab 切换状态、API 错误处理。

---

### U8. Preview 样例场景精修

**Goal:** 让 6 个 Preview 场景与需求文档 §6.3 一一对应，便于视觉 review。

**Requirements:** §6.3

**Dependencies:** U2 / U3 / U4 / U5 / U6

**Files:**
- `src/agentkit/server/frontend/src/components/preview/ChatPreviewShell.vue`
- `src/agentkit/server/frontend/src/components/preview/scenes/Scene1Welcome.vue`
- `src/agentkit/server/frontend/src/components/preview/scenes/Scene3TeamPlan.vue`
- `src/agentkit/server/frontend/src/components/preview/scenes/Scene4BoardDiscussion.vue`
- `src/agentkit/server/frontend/src/components/preview/scenes/Scene5ToolCall.vue`

**Approach:**
- Scene1：顶部 hero + 4 能力提示 + 预填 `@team:...` 的输入框。
- Scene3：使用升级后的 `TeamPlanCard`，第 1 阶段 running、专家子项展开。
- Scene4：包含 `BoardBannerCard`、3 轮不同专家发言、1 个小结、1 个 `BoardConclusionCard`。
- Scene5：展示嵌套 2 层 tool call，状态点变化（running → completed / error）。
- ChatPreviewShell：场景切换按钮增加键盘左右箭头监听，方便演示。

**Test scenarios:**
- Happy path: 6 个场景全部可切换且无 console error。
- Happy path: Scene4 的 banner 与结论 card 完整渲染。
- Edge case: 快速切换场景不残留上一个场景的滚动位置（滚动容器复位）。

**Verification:** `/agent/preview` 可完整演示 6 个场景；构建通过。

**Pair review:** 由子 agent 检查 mock 数据类型与真实接口是否一致、场景切换是否健壮。

---

### U9. BoardMeetingModal VI 适配

**Goal:** 私董会 Modal 使用新的紫色语义令牌，移除旧 `#8E44AD` 与 indigo 硬编码。

**Requirements:** §6.1

**Dependencies:** U1

**Files:**
- `src/agentkit/server/frontend/src/components/chat/BoardMeetingModal.vue`

**Approach:**
- 选中态背景改为 `--accent-board-bg` / `--accent-board-soft`。
- 选中边框使用 `--accent-board`。
- 主持人标签颜色从 Ant Design `purple` 改为自定义 Tag，背景 `--accent-board-soft`、文字 `--accent-board`。
- hover 边框改为 `--color-primary`（近黑）。

**Test scenarios:**
- Happy path: 选中专家后卡片边框为紫色，主持人卡片背景为浅紫色。
- Edge case: 深色模式下紫色令牌仍可见。

**Verification:** 在 ChatInput 打开「私董会」Modal 验证；`vue-tsc` 通过。

**Pair review:** 由子 agent 检查是否仍有遗漏硬编码色值、深色模式表现。

---

### U10. 质量门与后端回归

**Goal:** 确保前端类型安全、构建成功，后端单元测试不回归。

**Requirements:** §8.1 完成定义

**Dependencies:** U1-U9

**Files:**
- `src/agentkit/server/frontend/package.json`
- `src/agentkit/server/routes/chat.py`（仅验证上传接口未破坏）
- `src/agentkit/server/routes/experts.py`（仅验证专家列表未破坏）

**Approach:**
- 在前端目录运行 `npx vue-tsc --noEmit`。
- 运行 `npm run build`。
- 在仓库根目录运行 `ruff check src/` 与 `ruff format src/`。
- 运行 `python3 -m pytest tests/unit/ -x -q`；若 `test_rewoo_agent_yaml_loads` 失败则按已知问题跳过。
- 修复所有阻塞性错误后重新跑门。

**Test scenarios:**
- `vue-tsc --noEmit` 通过。
- `npm run build` 生成 `src/agentkit/server/static/` 且无报错。
- `pytest tests/unit/ -x -q` 通过（允许跳过已知失败）。
- `ruff check src/` 通过。

**Verification:** 三个命令均返回 0（或 pytest 仅因已知用例跳过）。

**Pair review:** 由子 agent 检查类型错误修复是否引入新的运行时问题、构建产物是否正常。

---

## Scope Boundaries

### In Scope

- 聊天主区 VI 令牌补齐与深色模式同步。
- `ChatMessage` 分发器与 `IChatMessage` 模型扩展。
- `TeamPlanCard`、`BoardBannerCard`、`BoardRoundCard`、`BoardConclusionCard`、`ErrorCard` 的升级/新建。
- `ChatInput` 的拖拽上传、清空、语义色按钮。
- `SystemMonitorPanel` 的「技能 / 系统 / 知识库」Tab 内容。
- `ChatPreviewView` 6 个样例场景精修。
- `BoardMeetingModal` VI 适配。
- 质量门（vue-tsc / build / ruff / pytest）。
- 每个开发单元后的结对代码审查。

### Out of Scope

- 侧边栏 `ChatSidebar`、顶部 `TopNav`、抽屉布局改造。
- 移动端响应式优化。
- 实际 WebSocket 数据流改造（仅前端渲染层适配）。
- 可访问性（a11y）专项审计。
- 虚拟滚动、消息懒加载等性能优化。
- 消息编辑 / 分支对话（Trae 范式）。

### Deferred to Follow-Up Work

- UserBubble / AssistantText 的 hover 操作条（编辑/复制/重新生成/反馈）—— 需求 §3.3 提到，但本期以复杂事件 card 和右屏为主，可在后续 PR 补齐。
- 流式光标竖线动画 —— 当前使用 `a-spin` 占位，后续可替换为闪烁竖线。

---

## Risks & Dependencies

| 风险 | 等级 | 缓解措施 |
|---|---|---|
| 扩展 `IChatMessage` 会影响现有对话持久化格式 | 中 | 新增字段均为 optional；后端返回 JSON 不校验未知字段时无影响。 |
| `SystemMonitorPanel` 嵌入完整 Skills/KB 组件可能触发重复请求 | 中 | 使用 store 缓存，Tab 切换不重新 fetch；`onMounted` 仍负责首次加载。 |
| Preview Scene 精修引入新的假数据类型与真实后端不一致 | 低 | Preview 明确为静态 mockup，不依赖真实 WebSocket。 |
| 后端 `pytest` 已有已知失败 `test_rewoo_agent_yaml_loads` | 低 | 按项目规则跳过该用例。 |
| 多单元改动叠加导致类型错误难以定位 | 中 | 每单元独立跑 `vue-tsc --noEmit`，不累积错误。 |

---

## Open Questions

以下问题来自需求文档 §9，实施前按默认值处理，后续可再调整：

1. **Q1** `@team` 蓝 vs `@board` 紫：保持当前分配（蓝=协作，紫=深度）。
2. **Q2** 流式光标：保持当前 spin 占位，竖线动画 deferred。
3. **Q3** 私董会按钮文字：保持「私董会」。
4. **Q4** 专家团按钮文字：保持「专家团」。
5. **Q5** 消息引用：本期不做。

---

## Success Criteria

- [x] `tokens.css` + `theme.ts` 新增令牌就位。
- [x] `BoardBannerCard` / `BoardRoundCard` / `BoardConclusionCard` 结构与样式就位。
- [ ] `/agent/preview` 6 个场景全部可见且可交互。
- [ ] 无硬编码旧色残留（U1、U9 收尾）。
- [ ] `vue-tsc --noEmit` 与 `npm run build` 通过。
- [ ] `ruff check src/` 通过。
- [ ] `pytest tests/unit/ -x -q` 通过（允许跳过已知失败）。
- [ ] 右屏 4 个 Tab 都有内容。
- [ ] ErrorCard 支持重试。
- [ ] 每个开发单元都经过子 agent 结对审查并确认无阻塞问题。

---

## Sources & Research

- Origin: [docs/brainstorms/2026-06-18-chat-area-vi-redesign-requirements.md](docs/brainstorms/2026-06-18-chat-area-vi-redesign-requirements.md)
- Local patterns: `src/agentkit/server/frontend/src/components/chat/messages/`, `src/agentkit/server/frontend/src/components/layout/RightPanel.vue`