# 截图采集清单（screenshots/）

本仓库根目录 `screenshots/` 存放 README「演示」章节的 GUI 截图（README 以
`screenshots/<file>` 相对路径引用；`screenshots/` 已纳入 npm 包 `files`，npm
页 README 可正常渲染）。规则：

1. **必须是真实截图**——面板运行在真实 harness 会话上截取，禁止 mock、手绘或生成图。插件卖的是"真相可验证"，文档自己也不能破例。
2. 命名与用途（当前已有 4 张，README 均已引用）：

   | 文件 | 内容 |
   |---|---|
   | `01-overview.png` | 面板全貌：scope 切换 + from/to 时间节点下拉（意图标签 + `(HEAD)` 前缀）→ 目录树文件清单（A/M/D）→ 逐行 diff（红删绿增 + ↑/↓ 变更块跳转）+ Restore workspace 恢复卡片 |
   | `02-trace.png` | **Trace (session log)** 范围：三泳道拖选时间线（Input/Model/Tools span + turn 边界），拖选区间映射为 from/to 边界节点 |
   | `03-this session.png` | **本会话** 范围：当前会话检查点时间线 → 目录树 → 逐行 diff |
   | `04-this project.png` | **本项目** 范围：跨会话合并 + fork 血缘分支下拉 |

   尚待采集（截到后补进 README）：恢复卡片预览 diff（`gui-restore-preview.png`）、
   降级节点 `⚠ degraded` 标记与提示条（`gui-degraded.png`）。

3. 建议宽度 ≥ 1200px、PNG 或 WebP、单张 ≤ 1MB；README 中引用方式：
   `![面板全貌](screenshots/01-overview.png)`；文件名含空格时用 `%20` 编码，
   如 `![本会话范围](screenshots/03-this%20session.png)`。
4. **UI 每次大改后必须重新截图并更新 README**——过期截图比没有截图更伤信任。
5. 截图场景建议：开一个真实会话，让代理依次新增、修改、删除文件（至少 3 次变更工具调用），再打开 Diff 面板截取；恢复预览图在预览恢复计划后截取。