Live diagram and project diagram
Watch a session work as a live diagram, replay it, or see your project's structure.
On the phone a session's Diagram tab has three modes:
| Mode | Shows |
|---|---|
| Live | What the session is doing right now, as a diagram: account → PC → project → session → agent → model → tools used → files changed → Git → tests → todos → approvals. It is rebuilt from real state as events arrive (at most once a second) |
| History | The same diagram at a chosen point of the session's timeline, so you can step back through what happened |
| Project map | The project diagram described below |
Filter the Live and History diagrams by All, Agents, Files, Tools, Git, Tests or Connections. Tap a changed file to open its diff.
Project map
The project diagram shows the project's folders or files as boxes and draws an arrow wherever code really references other code. It is computed on your PC each time you open it or press Rescan.
Where: Desktop review panel → File map → Project diagram; phone session → Diagram → Project map.
index.html entry points (nothing points at them) on top
│ 2
src/ ──1──► styles/
│ 5 arrow label = number of references
lib/How it is built
- Up to 800 source files are collected; folders such as node_modules, .git, dist, build, .next, target, vendor and virtual environments are skipped.
- References are read from the first 300 files: JavaScript/TypeScript imports and requires, HTML script/link/a/iframe sources, CSS @import and Python imports.
- Small projects (up to 40 files) show every file; larger ones are grouped by top-level folder.
- Components that nothing points at come first, then what they use.
- On the phone, components containing files the session touched are highlighted.
Limits
References are found by pattern matching, not a compiler: path aliases (like @/lib) and package imports are not resolved. Languages without a rule (Go, Rust, Java, Kotlin and others) appear as boxes without arrows. Very large projects may take longer than the 20-second answer limit; press Retry.