Strata
Visualize every Claude Code session as a 3D topographic terrain. Drill down into projects, explore peaks of token usage, and resume past conversations — all from your browser, running entirely on your machine.
Visualize every Claude Code session as a 3D topographic terrain. Drill down into projects, explore peaks of token usage, and resume past conversations — all from your browser, running entirely on your machine.
# clone & run
git clone https://github.com/light-handle/strata.git
cd strata
npm install
npm run dev
# open http://localhost:5173
Gaussian-smoothed heightfield with 12-level contour lines via marching squares. Military thermal color ramp from navy through teal and amber to gold. Every peak labeled with project name and token count.
Three-level navigation: projects overview with treemap tiles → project detail with session cards and token bars → full session info. Selecting a project highlights its peaks on the terrain and dims everything else.
Full-width modal with the entire conversation. Prompts, responses, thinking blocks, tool calls, and subagent invocations — collapsible sections, smart previews, and time gap indicators.
Watch conversations unfold in real-time. Character-by-character typing animation with blinking cursor. Play/pause, scrubber bar, speed controls (1x–8x), and skip. Uses actual timestamp gaps between messages.
Wide-screen Gantt chart showing every tool call on a time axis. Color-coded by tool type, parallel tools on separate rows. Hover for details, click for full input JSON. Shows total execution time and max parallelism.
Dedicated tree visualization for sessions with subagents. Shows date/time for each agent, and automatically groups parallel executions — agents launched within seconds of each other. Click any node to load its full conversation.
WebSocket + chokidar watches your Claude files in real-time. Start a session in another terminal and watch the terrain grow as tokens flow.
One click to resume any past session. Opens a terminal with claude --resume so you can pick up exactly where you left off.
Fuzzy search across sessions, projects, and actions. Navigate the entire dashboard from your keyboard without touching the mouse.
Tile grid with mini session treemaps. Each tile shows relative token usage. Scrollable project list with activity indicators below.
Stats dashboard (sessions, tokens, messages). All sessions listed as cards with token bars and prompt previews. Terrain highlights this project's peaks.
Full session breakdown: first/last prompts, token grid (input/output/cache), tool usage bars, message counts, and a resume button. Camera flies to the peak.
Reads all .jsonl session files from ~/.claude/projects/ — the directory Claude Code uses to store conversation history.
Parses every message to extract token usage (input, output, cache read, cache create), tool calls, models, timestamps, prompts, and response summaries.
Maps sessions onto a 2D grid (time × project), applies Gaussian smoothing, generates contour lines via marching squares, and assigns vertex colors from a thermal ramp.
Three.js renders the heightfield with contour lines, diamond markers, and scan beams. React powers the panels. D3 draws the charts. All connected via WebSocket for live updates.
Full-width modal with prompts, responses, thinking blocks, tool calls, and subagent invocations.
Wide-screen D3 Gantt chart with color-coded bars, parallel row detection, hover tooltips, and click-to-inspect.
Dedicated tree visualization with parent/subagent navigation and full conversation loading per node.
Character-by-character typing animation with play/pause, scrubber, speed controls (1x–8x), and real timestamp gaps.