60 lines
8.6 KiB
Markdown
60 lines
8.6 KiB
Markdown
# 对话样式与调试画面采集（2026-10-15）
|
||
|
||
本轮先补齐 REA 的画面、布局和 SVG 采集，再把取得的原版 CSS 与组件结构接入 YCode。工作范围为对话区域样式，云端服务和子代理调度按用户要求暂后。
|
||
|
||
## 原版证据与能力
|
||
|
||
- WorkBuddy 5.8.2 / Electron 37.10.3 / Chrome 138.0.7204.251；沿用调试端口 9223，唯一选定原版 renderer 文件页面。
|
||
- 本地 REA 副本版本 `6.5.0-visual.1`，新增 `include_visuals`，默认关闭。公开入口 `npm run rea:visual:capture` 同时请求已加载 CSS 正文、PNG、计算样式及 SVG 几何属性。
|
||
- 原版画面 Evidence：`ev_dbd7b4f6304305b0428d19c891088806a09d05b33a1b69d7e7df95e22f3914f4`，归档 `.tmp/rea-css-evidence/<Evidence ID>.json`；导出 `.tmp/rea-visual-reference/workbuddy.png` 和 `layout.json`。
|
||
- 实际取得 1336×901 画面、828 个布局记录、189 个 SVG 节点（73 个 SVG 根）。布局记录含 27 个计算样式属性、节点关系和边界；不保留聊天正文和输入值。PNG 自身含原版当前可见对话，保留在本地。
|
||
- 采集由 REA provider 内部执行 `Page.getLayoutMetrics`、`DOMSnapshot.captureSnapshot`、`Page.captureScreenshot`；包装脚本只调用公开 REA CLI。没有导航、点击、重载原版或执行 renderer JavaScript，没有绕过 REA。
|
||
- 使用 view capture（`fromSurface:false`）；surface capture 曾超时。采集有 30 秒超时。布局与截图是先后采样，不是原子快照，范围限当前可见页面，不代表全部交互状态。
|
||
|
||
CSS 沿用已校验的固定 Evidence `ev_377c8790468b3c67dad8577aabb327f98d3140659f0fffdbabfcff5a40cc9e94`。64 份正文共 5,946,566 字节；13 份匹配既有 ASAR 清单、2 份有差异，详情见 [CSS 采集修复](REA-CSS采集修复-2026-10-15.md)。生成器检查固定 Evidence、SHA 和选择器；不会把运行时正文冒称为与安装包逐字节相同。
|
||
|
||
## 已接入的变化
|
||
|
||
- 消息区域接回 `conversation-timeline`、`cr-message-list`、`cr-document` 和原版左右消息 frame 层级；限定 832px 列宽。用户气泡使用原版内容容器、段落样式和动作行定位。
|
||
- `source-styles.css` 从三个已采集 CSS 文件选择 389 条规则，覆盖主题、消息 frame、助手/用户内容、思考折叠、工具展开、计划、审批和消息动作。保留相关条件规则及动画 keyframe；只映射选择器和宿主结构，规则正文沿用原版。
|
||
- 思考与单个工具的展开内容保留在 DOM，通过原版 shell 的折叠样式切换，并为关闭区域补 `aria-hidden` 和 `inert`。计划接回标题、任务列表及状态图标的原版层级。
|
||
- 输入区接回原版 24px 外层留白、编辑区、56px 工具栏、24px 容器圆角、边框、阴影及禁用状态；按钮顺序为添加、权限，右侧为模型、语音、发送。对话页移除额外工作目录 footer，目录设置仍可由顶部设置进入；首页保留该入口。
|
||
- 问答浮层由 bundle 的 `ggdxn` CSS module 映射，共 79 条投影规则，恢复标题、分页、选项、复选框、自定义回答和 footer；放入 `conversation-input-area__custom-floating`，与输入框共用左右留白。选项恢复为原版 `div role="button"`，消除原生 button 默认居中；保留 Enter/空格激活，并用 `aria-pressed` 表达本地选中状态。
|
||
- 消息动作使用源图标；发送、麦克风、权限和当前重新生成图标由 REA 画面采集中的实际 SVG 节点恢复。问答图标取自该组件真实引用的定义，保留 Evidence、源摘要和 UTF-16 范围。
|
||
- 任务卡恢复 `TaskToolRenderer` 的 root/result/item/title/content 层级、默认展开状态和 40 条原版规则。清除 22 组旧 Task 选择器，避免旧 root 边框、子 span 的 12px/600 字重覆盖；键盘折叠与现有审批回调保留。该工作仅涉及卡片 UI。
|
||
- 审批选项箭头恢复实际 `yo → pl → uc → lc` 图标绑定及 16px 默认尺寸，替换文字 `>`。源码为 `contexts-BMeWSUHk.js` 和 `src-DPDj7_qD.js`，恢复器校验固定 runtime Evidence、两份 SHA、调用与导出关系。
|
||
- 命令视图定位到 `src-DbE1_mgM.js` 的 `ExecuteCommandView`（UTF-16 offset 1035987）及动态 `cr-` 前缀。命令标题、命令和合并 stdout/stderr 使用原版 div 结构及单色字体、换行、行高；本地包装用 `display:contents` 投射为原版内容容器的 flex 布局，消除旧 pre 背景和内边距。现有完整输出入口及 exit-code 提示保留，仍有结构扩展，未声称整体等价。
|
||
- 六档字体控制继续生效。原版 Slate 编辑区声明投射到现有 textarea；没有伪造 Slate 编辑器。现有 textarea 的 200px 高度上限保留，原版长输入上限仍未实测。
|
||
|
||
生成入口：
|
||
|
||
```powershell
|
||
npm run recover:conversation-styles
|
||
npm run recover:conversation-icons
|
||
node scripts/rea/recover-question-icons.mjs
|
||
```
|
||
|
||
上述生成器只处理既有 REA 导出。不要直接以更新后的“最新证据”别名覆盖固定 CSS manifest；需要更换基线时先复核生成器引用及差异。
|
||
|
||
## 验证与验收边界
|
||
|
||
同为 1336×901、默认字号，在 YCode 本地 fixture 读取浏览器最终计算值，与 REA 原版记录逐项比较：**28 项选定属性一致**。包含列宽与内边距、助手标题间距、用户气泡字体/行高/圆角/背景、输入框边框与阴影、编辑区留白、工具栏留白与间距、语音按钮圆角。报告 `.tmp/conversation-style-metrics.json` 同时保存预期值、实际值及节点尺寸。
|
||
|
||
助手名称、助手内容、文本块、用户气泡、输入宿主的 **5 个计算字体族字符串一致**，记录 `.tmp/conversation-style-font-metrics.json`。这不证明各 fallback 实际使用了相同字体文件，也不替代文字像素对照。
|
||
|
||
这次比较使用不同消息内容，是属性与几何抽查，**不能当作同状态的全图像素差通过**。原版当前画面没有问答、审批等全部状态；这些状态采用源 CSS/组件证据与本地交互回归，尚待原版同状态画面对照。
|
||
|
||
本轮 `npm run build`、样式及图标来源校验、`test:conversation`、`test:artifacts`、`test:font-size`（57 项断言）和 `test:rea-css` 均通过。浏览器验证了思考展开与收起、工具组/单项工具/完整输出展开、问答提交后继续、审批后继续、字号调整和长输入。长输入实测高度 200px、内容 scrollHeight 525px。
|
||
|
||
中断后恢复本地预览服务，另用独立的隐藏 Electron 测试窗口复验最终构建：仅加载 YCode localhost fixture，通过真实键盘事件选择第二个问答选项，确认回答被提交且回合继续；再确认审批后继续。控制台错误 0。问答浮层与输入框实测同为 784px、x=416，选项高 40px，文字 `text-align:start`。该验证不连接 WorkBuddy，不执行真实模型或文件写入。记录 `.tmp/conversation-style-final-ui.json`；可复验脚本 `.tmp/verify-conversation-style-final.cjs`。
|
||
|
||
续验还确认任务标题高 32px、行高 16px、字重 500、root 没有多余边框，键盘 Enter 可折叠并重新展开；工具组标题恢复 15px。命令头显示实际命令，命令/输出节点为 div，输出行高 18px、内边距 0、背景透明，测试输出完整保留。
|
||
|
||
最终截图 `.tmp/conversation-style-aligned-2026-10-15.png`（为展示完整消息，将任务卡收起并滚到消息顶部；该卡原版默认展开已独立验证）；问答状态截图 `.tmp/conversation-question-aligned-2026-10-15.png`。截图在有限动画完成及实际 paint 后保存，并已人工查看。
|
||
|
||
仍未完整验收的样式范围包括：各类工具专用结果 renderer、任务详情卡、附件与产物详情、所有 hover/焦点/错误/流式状态、深色和不同字号的原版同状态画面、动效逐帧及长列表虚拟化。YCode 名称和当前测试消息不是原版内容；原生富文本编辑器行为尚未等价。后续应按状态补对照，不能据此次 28 项抽查宣称对话区已全量 1:1。
|
||
|
||
其中一项已定位的具体结构差异：同一 runtime 脚本的 `ReadFileView`（offset 1081144）返回 header-only 的 `ToolHeader`，以文件名链接和行号展示、发出 `tool.file.open`；YCode 仍在可展开卡片内显示文件正文。文件读取不是“CSS 无法取得”，需要继续接回共享 ToolHeader 结构，同时保留当前完整输出与文件打开契约。Web/MCP、文件列表等正文也没有因套入通用工具容器就完成验收。
|
||
|
||
全局 REA、注册配置及原版文件未修改；本地修复 manifest 记录 12 个变更模块并验证对应全局文件摘要保持不变。
|