# 对话页面待开发事项

对话台（ChatView）是全项目离 CYBER 原型最远的一页。设置页那套骨架已经落地，
但对话台没有套上 —— 全仓库只有 `SettingsView.vue` 在用 `cy-*` 骨架类。

本文记录已核实的差距和推进顺序。所有条目均已对照
`prototype_reference/hermes-ui-cyber-chat.html` 与真实组件确认，不是推测。

## 为什么对话台排在最前面

对话台是结构最复杂的一页：一个页面里有会话列表、气泡流、审批卡、输入区、
右侧两个面板，六种结构各自的视觉规则都不同。骨架层没套上来，意味着这六块
各自沿用迁移前的样子，霓虹暗色的辨识度出不来。

令牌层和控件层已经达标 —— `styles/global.scss` 里的 `neon-sheen`、
`neon-pulse`、各处 `text-shadow` 都在。**缺的是页面骨架层和组件级语义配色**，
也就是原型第 3、7、9 三节。

## 现状：骨架类使用情况

`cy-view` / `cy-panel` / `cy-tabs` / `cy-sec-t` 的全仓库使用点：

| 文件 | 位置 |
| --- | --- |
| `views/hermes/SettingsView.vue` | `cy-tabs`、`cy-panel`、`cy-panel-b` |
| `styles/global.scss` | 定义处 |

对话台相关组件 —— `ChatPanel.vue`、`MessageList.vue`、`MessageItem.vue`、
`ChatInput.vue`、`SessionListItem.vue` —— **一个都没用**。

## 任务清单

### P0 · 修 rainbow-glow（违反三色语义规则）

一次动画里四种语义色同时在闪，直接违反「同屏内每种颜色只承担一种含义」。
硬编码值，未走令牌。

三处重复定义，需要收敛成一处：

| 文件 | 行 |
| --- | --- |
| `components/hermes/chat/MessageItem.vue` | `1523`（定义）、`1451`（调用） |
| `components/hermes/chat/SessionListItem.vue` | `409`（定义）、`395`（调用） |
| `components/hermes/group-chat/GroupMessageItem.vue` | `1051`（定义）、`1114`（调用） |

当前色值循环：`#ff6b6b` → `#feca57` → `#48dbfb` → `#ff9ff3` → 回环。

处理方向：按调用场景收敛到单色。`.speech-playing` 是语音播放态，
语义上属于「机器在动」，应改用 `--success`，去掉循环。

### P1 · 组件级语义配色

| 项 | 原型 | 真实实现 | 差距 |
| --- | --- | --- | --- |
| 发送键扫光 | 原型 133-140：28×26，青管壁 + `sheen` 每 3.4s 扫过 | `ChatInput.vue:1765-1783`：30×30，`border: 0 !important` + `box-shadow: none !important`，禁用态 `#9f9f9f` 纯灰 | **未实现**，且被 `!important` 显式压制 |
| 气泡 role 配色 | 原型 216-227：用户=青、助手=绿，助手气泡左缘一道 `lime-line` | `MessageItem.vue` 无 role 配色规则 | **未实现** |
| LED 指示灯 | 原型 151-156：7px 圆点 + 发光 + 呼吸动画 | 全局无 `.led` 类 | **未实现** |
| 会话列表当前项 | 原型 190-192：青软底 + 左侧 2px 发光条 | `SessionListItem.vue:288`：`box-shadow: 0 0 0 3px` 描边 | 形似，神韵不同 |
| 顶栏青色微光 | 原型 200-201：`radial-gradient` 压顶 | 无 | **未实现** |
| 审批卡橙区 | 原型 264-267：橙边 + 内发光 | `MessageList.vue:942` 有 `approval-pulse`，非原型那套橙语义区 | 部分 |
| 上下文余量条 | 原型 273-278：绿→橙→红三段 | `ChatInput.vue` 有 context meter | 已有，分段配色待确认 |

### P2 · 响应式

原型 166-177 定义了两档断点：

- `≤1180px`：Outline 从挤压主区改为浮层覆盖（`position: absolute`）
- `≤900px`：会话侧栏整体隐藏，顶栏 `.ws-tag` 隐藏

对话台真实实现是否已有等价断点，未核实。

## 已知原型侧问题（不是待开发项）

以下原型自身与真实实现不符，接入时以真实实现为准，不要照抄原型：

- **会话来源标签**：原型列了 8 种，真实只有 4 种
  （`api_server` / `cli` / `global_agent` / `workflow`，见
  `stores/hermes/chat.ts`）。原型里的 `cron` / `channel` / `group_chat` /
  `terminal` / `file` / `kanban` 不存在。
- **`moa` 作为气泡 role**：原型写进「role 全集」，但真实 `Message.role` 是
  5 元联合类型（`stores/hermes/chat.ts:47`）。`moa` 是 `display_role`，
  渲染时被映射成 `system`（同文件 `:483`）。原型的 `.bubble-row.moa` 和
  `AV.moa = '◇'` 都应删。
- **Outline 的「附件」区块**：原型 578-580 有，真实 `OutlinePanel.vue:82-111`
  只产出「用户提问 + h1/h2/h3 标题」两类条目，没有附件概念。
- **会话列表 `⌕` 搜索按钮**：原型 498 有，全项目无会话搜索功能。
- **顶栏副标题 `01JQ8F2K · default profile`**：原型 618 有，真实 header 只有
  单个 `headerTitle` 字符串（`ChatPanel.vue:307-311`），无第二行。
- **`m.reasoning` 作为消息字段**：原型当作字段，实际是
  `utils/thinking-parser.ts:51` 从 `content` 里正则摘 `<think>` 标签得到。
  折叠交互是真的，数据结构是假的。
- **`⇤` 语义错位**：原型 615 画成「返回」，真实同位置是切换会话侧栏显隐。
- **`~/work/hermes-ui` 完整路径**：真实 `workspace-badge` 只显示 basename
  （`ChatPanel.vue:1599`）。
- **顶栏常驻 `streaming` tag**：真实 streaming 标记在会话列表项上
  （`ChatPanel.vue:1209`），不在 header。

## 执行顺序建议

1. **P0 rainbow-glow** —— 范围明确、风险低、3 处收敛成 1 处。
2. **P1 骨架 + 语义色** —— 工作量最大。`ChatPanel.vue` 2300+ 行、
   `MessageItem.vue` 2100+ 行，套骨架要动结构不只是样式，建议逐块推进，
   每块单独验证。
3. **P2 响应式** —— 等 P1 的布局稳定后再做，否则要返工。

## 验证基线

改动前后都应跑：

```bash
npm run harness:check
npm run test          # 当前 277 文件 / 2049 通过
npm run test:e2e      # 当前 35 通过
npm run build
```

`chat/` 属聊天链，改动需要 `docs/chat-chain-changes/<date>-<slug>.md` 片段，
`harness:check` 会强制校验。