Claude Harness Visualizer
这是什么
Claude Code 干活的时候，它的 Agent 到底在干什么？这个项目把 Harness Agent 的工作流实时画出来：ReactFlow 交互流程图、ECharts 时序图、按语义折叠的高层调用图，外加回放、变速、筛选和一个 /admin 管理面板。
怎么做的
- 事件采集只走官方通道：HTTP hooks（
.claude/settings.json）、CLI wrapper 的 NDJSON 流、transcript 文件 tail 兜底。不改二进制、不逆向、不违反用户协议。 - 后端 Express + WebSocket 做事件归一化、会话存储和回放引擎；前端 Next.js + Zustand 渲染三种视图。
- 语义层把零散事件折叠成有意义的单元：用户回合、推理块、工具组、子代理、MCP 调用、skill、插件。
踩坑记录
（待补充：写这个项目时真实踩过的坑）