UI Wireframe
分组规则
本视图从 timeline.ndjson 读取所有事件,按 kind 字段分桶:
| 分到 | kind 包含 |
|---|---|
| L3 | project_created · prd_drafted · sdd_generated · human_feedback · sign_off · abandon |
| L2 | integration_started · integration_done · integration_failed · triage_* |
| L1 | unit_state · agent_started (Coder/Tester) · agent_done · unit_passed · unit_failed |
| 无 | agent_started (PM/Architect/Integrator/Triager) → 归到对应 loop |
交互
- 顶部时间窗口选择:最近 1h / 24h / 全部 / 自定义
- 点击任一事件 → 底部详情面板展开(如 wireframe)
- 事件类型 chip 过滤(暂时隐藏某些 kind)
- 缩放 / 平移时间轴(d3-zoom)
- 「↗ Buglist」联动:选中 L2 事件 → 自动 filter buglist 到该 run 的 bug
- 「↗ Changelog」联动:选中 PRD/SDD 事件 → 跳 changelog 对应条
L1 高频降采样
L1 事件可能一分钟几十条。视图层做降采样:
- 同 unit 同 attempt 内多条 agent.step → 折叠为一个圆点
- 同 wave 内连续 passed → 横线表示批次
- retry 失败用红色圆点,覆盖在绿色之上
- 点击折叠批次 → 展开详细
L2 / L3 强调
L2 是 amber pulse 动画(如果 currently running),失败用 red 高亮。L3 事件用 violet 大圆点+ 上方文字标签,便于看「为什么改」。