Monet
한국어 | 日本語
Monet: The Claude Code Interface.
A node-graph project file viewer that tracks all Claude Code activity in real time.
Install, open the Neural Map window, and it just works. No configuration needed.
Monet detects every Claude Code session touching your workspace.
VSCode Extension, terminal CLI, desktop app — if a Claude is reading or editing your project files, Monet sees it.
Download
Marketplace: Visual Studio Marketplace
Requirements: VSCode 1.85+ / Cursor / Claude Code installed
After install: Cmd+Shift+P → Monet: Show Neural Map → Done.
No config files to touch. Monet auto-registers HTTP hooks in ~/.claude/settings.json, scans your project files, and draws the graph.
Why
Agent-driven development is becoming the standard.
I haven't written code by hand in about six months.
I know — we're not fully there yet. There are still plenty of moments where you have to read the code yourself.
But the direction is clear. We're delegating more and more to agents.
Here's the problem.
A Claude session spews dozens of lines of text in rapid succession.
It's hard to tell at a glance which files were read, which were modified.
Two sessions running at once? Your mental model gets noisy.
Three sessions simultaneously? Honestly, you're just praying.
Monet was built to solve this.
See the whole project structure rather than individual code.
See Claude's activity as an overlay animation at a glance rather than scrolling through logs.
The bottleneck is now us humans.
Monet proposes the most elegant way to reduce visual cognitive load in agent-driven development.
Not everyone will agree. But we're going to try.
Interface
Neural Map
Every file in your project is laid out on a physics simulation powered by d3-force.
Inspired by Obsidian's graph view, but Monet goes beyond static structure visualization — the core is real-time AI activity overlay.
Directories become cluster boundaries. Import relationships become edges.
- Nodes = files. Size proportional to file size. Color-coded by file type.
- Clusters = directories. Labels appear and disappear naturally as you zoom.
- Edges = import/require relationships. 1-hop neighbors of active nodes get tinted with the session color.
Real-time Activity Overlay
When Claude reads a file, the node glows. When it edits, a ripple radiates.
File-to-file movement is shown as particles flowing along trail lines.
Each session has a unique color. When multiple sessions are working at the same time, you can intuitively see who is doing what, where.
Session Cards
Floating cards at the bottom of the screen show active sessions.
- Status icon: read, edit, search, terminal, thinking — real-time activity indicator
- Model + tokens/cost: model name, cumulative token count, estimated cost in USD
- Sub-agents: shows child agents (Explore, Plan, etc.) spawned by Claude
- Click: pin-highlight that session's activity area on the Neural Map
- Hover: temporary highlight (clears on mouse leave unless pinned)
Session Replay
Replays a completed session's entire activity compressed into a 10-second timeline.
Hit the play button on a session card to see the chronological order in which Claude explored and modified files.
Lasso Selection
Cmd+drag to select multiple nodes at once.
Right-click menu for copy paths, copy as context, or open all.
Architecture
Claude Code (CLI / Extension / Desktop)
│
│ PostToolUse / SessionStart / SessionEnd
▼
┌─ Extension Host (Node.js) ──────────────┐
│ │
│ Hook Server ◄── HTTP POST (localhost) │
│ │ │
│ JSONL Watcher ◄── ~/.claude/projects/ │
│ │ │
│ Graph Builder ◄── workspace files │
│ │
└──────────── postMessage ─────────────────┘
│
▼
┌─ WebView (React + PixiJS) ──────────────┐
│ │
│ Zustand Store ← state management │
│ │ │
│ d3-force (WebWorker) ← physics sim │
│ │ │
│ PixiJS v8 Renderer ← 60fps rendering │
│ │
└──────────────────────────────────────────┘
How Monet Detects Every Claude Session
Monet captures Claude activity through two channels.
1. HTTP Hook Server
When the extension starts, it auto-registers HTTP hooks in ~/.claude/settings.json.
From that point, every Claude Code session started on the machine — terminal CLI, VSCode extension, desktop app — sends events to Monet each time a tool is used.
Project path filtering ensures events unrelated to the current workspace are ignored.
Even sessions started from a different project directory are detected if they touch files in this project.
2. JSONL Watcher (Fallback)
Claude Code writes per-session JSONL files under ~/.claude/projects/.
For sessions where hooks were missed or that started before the extension, JSONL file changes are watched to supplement metadata (model name, first prompt, sub-agents, token usage).
Features
| Feature |
Description |
| Real-time activity tracking |
Read, Edit, Write, Bash, Glob, Grep — every tool use visualized on nodes |
| Multi-session support |
Multiple concurrent Claude sessions distinguished by color |
| Sub-agent tracking |
Child agents (Explore, Plan, etc.) shown under parent session |
| Session replay |
JSONL-based 10-second compressed playback |
| Token/cost estimation |
Per-session cumulative tokens, model-specific USD cost |
| Edit conflict detection |
Warning ring when 2+ sessions edit the same file simultaneously |
| Permission wait alert |
Visual notification when Claude is waiting for tool approval |
| File tooltip |
Hover a node for file preview, activity history, edit region highlights |
| Lasso selection |
Cmd+drag multi-select → copy paths / open all |
| LOD system |
5-level detail adjustment based on zoom level |
| Git status |
Modified, Staged, Untracked labels on file nodes |
Known Issues & Future Direction
On the Hooks-Based Architecture
Monet depends on Claude Code's hook system (PostToolUse, SessionStart, SessionEnd).
This is an officially provided API by Anthropic, but its behavior may change in future updates.
What we've confirmed:
- Hooks are cached at session startup. If you restart the Monet extension, already-running sessions won't pick up the new hook URL. (The JSONL Watcher compensates for this.)
- Hook response timeout is set to 1 second — Monet does not slow down Claude's work.
- There is no performance impact on existing sessions. Hooks operate as non-blocking observers.
We will respond quickly to any changes in Anthropic's hook API.
Scope
Monet supports Claude Code only.
There are currently no plans to support other AI engines such as Gemini CLI or OpenAI Codex.
This is a deliberate choice. Monet is deeply integrated with Claude Code's Hook + JSONL architecture. Adding an abstraction layer would dilute the core experience.
If you've devised an approach to apply this to other AI engines while maintaining the user experience, please share it via an issue. We'll take it seriously.
Roadmap
- Replay improvements: Current fixed 10-second playback → timeline editor with segment selection, speed control, and event filtering.
- Large project optimization: Performance degrades with thousands of files. WebWorker simulation, data-level LOD (cluster collapsing), and progressive graph loading are in progress.
- Web dashboard (Phase 2): Multi-project view, session history browser.
Development
git clone https://github.com/dc143cdev/monet.git
cd monet
npm install
npm run link # Symlink to Cursor extensions (first time only)
npm run dev # Build + success message
# Cmd+Shift+P → "Developer: Reload Window"
npm run watch # File watch mode (auto-reload on WebView changes)
Note: Extension Development Host (F5) does not work.
Neural Map requires a real Cursor window with actual Claude Code sessions.
An empty sandbox has no data. That's why we use the symlink approach.
License
MIT License.
Contributing
Issues and PRs are welcome.
Bug reports → GitHub Issues
Ideas and suggestions → Discussions
Built by dc143c — with a lot of Claude.
