Understand a large repository at a glance and see where coding agents are working right now.
Repo Canvas builds a local, Miro-like map of an existing project. Permanent areas, modules and relations show how the system fits together. Live work cards show what Codex, Claude Code and Kimi Code sessions are changing. Double-click a work card to return to that session.
Send your agent this repository URL and one sentence:
https://github.com/m0ast-git/repo-canvas
Install this project-visualization tool in the current repository, build the initial map, start it and give me the local Canvas URL.
The agent will follow INSTALL_WITH_AGENT.txt. The exact commands are:
npm install --save-dev --save-exact --ignore-scripts github:m0ast-git/repo-canvas#v0.11.2
npx --no-install repo-canvas setup
npm run repo-canvas:start
The server opens the protected loopback URL in your default browser. Keep that foreground terminal running while you use the Canvas.
- project areas that group related parts of the system;
- persistent modules, responsibilities, stores, pipeline stages and integrations;
- circular human participants outside project areas, with directed relations showing what they provide, decide, expect or receive;
- meaningful runtime, data and control-flow relations;
- a provisional work card as soon as a supported agent turn is observed;
- live work attached to every semantic entity it affects;
- entity passports and recent activity in the left rail;
- collapsible project sections, full-map reset and an in-canvas legend;
- draggable area headers and entity cards with immediate, saved movement of their nested contents;
- owner-controlled area and entity names and descriptions, plus relation labels, by double-clicking the object;
- light and dark themes, readable active-area emphasis and relation labels revealed by a forgiving line hover;
- distinct header controls for reloading current Canvas data and regenerating the semantic map with Architect;
- a persistent Architect status surface with current phase, heartbeat, elapsed time, validation repair and the final result;
- a local Update button that appears only when a newer verified release is available;
- direct navigation back to Codex App or an exact Codex, Claude Code or Kimi Code CLI resume command.
The data model has no fixed entity cap. One Canvas can hold a small project or a map with hundreds of semantic entities.
The map keeps one stable project geography at every zoom: areas, nested capabilities and concrete entities never disappear or jump to another composition. Zoom only changes where live activity is emphasized: an area while cards are too small to read, the affected entity at middle distance, and the exact agent work card when it becomes readable. Area colors also identify outgoing relations. React Flow keeps interaction smooth while ELK computes the composition off the main UI thread; the relation router reserves separate lanes and keeps labels outside cards.
Dragging empty canvas space always moves the camera. An area moves from its framed header; an entity moves from its card. The small ⠿ mark identifies those draggable surfaces, while the surrounding area body remains available for panning.