A 3D topographic dashboard for your Claude Code sessions.
Features • Quick Start • How It Works • Tech Stack • Shortcuts
Strata scans your local ~/.claude/ directory and visualizes every Claude Code session you've ever run as an interactive 3D topographic terrain map. Peaks represent token usage — the bigger the session, the taller the mountain.
No cloud. No accounts. Everything runs locally on your machine.
A full 3D heightfield with Gaussian-smoothed peaks, marching-squares contour lines at 12 elevation levels, and a military thermal color ramp (navy → teal → green → amber → gold). Navigate like Google Maps — drag to pan, scroll to zoom, right-drag to tilt. Every peak is labeled with its project name and token count, with diamond markers and vertical scan beams. Even the smallest sessions create visible peaks.
The right panel shows all your projects as interactive tiles with mini session treemaps. Click any project to drill into it — see session count, total tokens, and message stats at a glance, then browse every session in that project as cards with token bars and prompt previews. When you drill into a project, the terrain highlights that project's peaks and dims everything else, so you can instantly see where a project lives on the map.
Click "Chat" on any session to open a full-width modal with the entire conversation. User prompts, Claude responses, thinking blocks, tool calls, tool results, and subagent invocations — all rendered with proper formatting. Collapsible sections, time gap indicators, and chunked rendering for large sessions.
Hit "Replay" inside the Chat modal to watch the conversation unfold in real-time. Blocks appear one at a time using actual timestamp gaps. Text blocks (prompts, responses, thinking) get a character-by-character typing animation with a blinking cursor. Play/pause, scrubber, speed controls (1x/2x/4x/8x), and skip. Click any typing block to complete it instantly. Long gaps auto-compress to 5 seconds.
Click "Tools" to open a wide-screen Gantt chart showing every tool call as a horizontal bar on a time axis. Color-coded by tool type, with parallel tools on separate rows. Hover for duration and input preview, click for full tool input JSON. Shows total execution time and max parallelism.
Click "Agents" on any session with subagents to open a dedicated tree visualization. The left panel shows the parent session as the root node with subagent branches — each displaying agent type, message count, date/time, and prompt preview. Agents launched within 5 seconds of each other are automatically grouped as parallel executions with a shared timestamp header. Click any node to load its full conversation in the right panel.
All sessions grouped by project, searchable. Automatically filters when you drill into a project from the right panel — shows a "Filtered to {project}" indicator with a clear button. Every session across all your projects, grouped and searchable. Click any session to fly the camera to its terrain peak and see full details — prompts, token breakdown by type (input/output/cache read/cache write), tool usage with bar charts, and the last exchange.
File watcher monitors ~/.claude/projects/ in real-time via WebSocket. Start a Claude Code session in another terminal and watch the terrain grow as tokens flow.
D3-powered stacked area chart showing token usage over time, broken down by project. Hover crosshair reveals daily details. Paired with a horizontal bar chart ranking projects by total token consumption.
Cmd+K to fuzzy search across sessions, projects, and actions. Navigate the entire dashboard from your keyboard.
Click "Resume" on any session to launch claude --resume <id> in a new Terminal window and pick up where you left off.
# Clone
git clone https://github.com/light-handle/strata.git
cd strata
# Install
npm install
# Run
npm run devOpen http://localhost:5173 in your browser. The server scans your Claude Code sessions automatically.
Requires Node.js 18+ and an existing
~/.claude/directory (created by Claude Code).
~/.claude/projects/
-Users-You-project-a/
session-uuid-1.jsonl <- full conversation log
session-uuid-2.jsonl
session-uuid-2/subagents/agent-xyz.jsonl
-Users-You-project-b/
...
Claude Code stores every session as a .jsonl file — one JSON object per line containing messages, tool calls, token usage, and metadata. Strata:
- Scans all project directories and parses every session file
- Extracts token counts, prompts, tool usage, timestamps, models
- Maps sessions onto a 2D grid (time × project) with Gaussian smoothing
- Renders a 3D heightfield terrain with contour lines and vertex colors
- Watches for file changes and pushes live updates via WebSocket
The right panel supports three levels of navigation:
| Level | View | What you see |
|---|---|---|
| 1 | Projects Overview | Tile grid of all projects with mini session treemaps + scrollable project list |
| 2 | Project Detail | Stats (sessions, tokens, messages) + all sessions as cards with token bars. Terrain dims non-project peaks. |
| 3 | Session Detail | Full session info: prompts, token breakdown, tool usage, resume button. Camera flies to peak. |
Click a project tile to drill in. Click a session card to see details and fly to its terrain peak. Use back buttons to navigate up.
| Action | Effect |
|---|---|
| Left-drag | Pan across the terrain |
| Scroll | Zoom in/out |
| Right-drag | Tilt/rotate the view |
| Click a peak marker | Select session, fly camera there |
| Select a project | Highlights project's peaks, dims all others |
| Layer | Technology |
|---|---|
| Frontend | React 18 + TypeScript + Vite |
| 3D Engine | Three.js + React Three Fiber + Drei |
| Charts | D3.js |
| Styling | Tailwind CSS 4 |
| Backend | Express + WebSocket (ws) |
| File Watching | Chokidar |
| Font | JetBrains Mono |
| Key | Action |
|---|---|
Cmd+K |
Command palette (search sessions, projects, actions) |
C |
Open Chat modal for selected session |
T |
Open Tools Gantt chart for selected session |
A |
Open Agents tree for selected session |
Esc |
Close active modal / deselect session / deselect project |
strata/
server/
index.ts Express + WebSocket server
scanner.ts JSONL parser, session aggregator
shared/
types.ts Shared TypeScript types
src/
App.tsx Main 3-column layout
context/ App state (panel visibility, selection, camera target)
components/
terrain/ 3D terrain (mesh, contours, camera, markers, labels)
timeline/ Conversation timeline (prompts, responses, thinking, tools)
panels/ Session list, project drill-down, session detail, analytics
charts/ D3 activity timeline, project bars
CommandPalette Cmd+K fuzzy search
HUDBar Top status bar with live clock
hooks/ WebSocket, keyboard shortcuts, session messages
lib/ Terrain math (Gaussian smoothing, marching squares), formatters
| Environment | Default | Description |
|---|---|---|
| Server port | 3141 |
Express + WebSocket |
| Client port | 5173 |
Vite dev server |
| Claude dir | ~/.claude/projects/ |
Auto-detected |
MIT
Built with Claude Code.