Claude Code Session Explorer

A browser-based inspector for Claude Code JSONL session transcripts. Think Chrome DevTools' Network tab, but for understanding what Claude did during a coding session — every tool call, thinking block, context window shift, and subagent spawn laid out on a single interactive timeline.

Why

Claude Code sessions can run for hundreds of turns across multiple subagents, consuming tokens in ways that are hard to reason about from the raw JSONL. This tool lets you:

Watch a session live as Claude works — the timeline updates automatically
See exactly where context tokens are spent and when compactions fire
Trace tool call chains and inspect their inputs/outputs
Understand subagent lifecycles — which tool spawned them, what they did
Spot errors, slow calls, and repeated patterns at a glance

Quick Start

Run with npx

npx ccexplorer

To open a specific session file:

npx ccexplorer ~/.claude/projects/<project>/<session-id>.jsonl

Local development

npm install
npm start

Opens the explorer at http://127.0.0.1:3457. It auto-discovers all sessions from ~/.claude/projects/.

npm start runs the CLI locally (ccexplorer) via tsx.

Features

Event Timeline

The main view is a filterable table of every event in the session, ordered chronologically:

Tool calls — name, input, result, duration, and error status
Thinking blocks — model reasoning with token usage
Assistant text — response content
User messages — prompts and tool results
Hooks — pre/post hook executions (deduplicated from command+callback pairs)
System events — turn boundaries, compactions
Compaction events — context resets with trigger reason and pre-compaction token count

Each row shows the context added (Ctx+), running context total, time, and timestamp.

Context Tracking

Running total column resets to zero after compaction boundaries
Context sparkline — an inline area chart showing token usage over time, with compaction drops marked as vertical lines. Click anywhere on the chart to jump to that event.
Hover breakdown — hover the Total column to see cache read, cache creation, input, and output token counts
Streaming deduplication — events sharing a requestId (streamed chunks from the same API call) are dimmed with an ↑ indicator to avoid double-counting

Agent Scopes

Sessions with subagents show a scope picker on the left. Each agent (main, Task subagents, compaction subagents) has its own timeline. Events that spawn a subagent display a purple Spawns Subagent badge, and the detail panel links directly to that agent's scope.

Detail Panel

Click any row to inspect it. The detail panel shows:

Tool calls — JSON tree viewer for input (collapsible, syntax-highlighted), full result text, metadata from tool_result events, success/error badge
Thinking/Assistant — full content with token breakdown
Compaction — trigger, pre-compaction token count, link to compaction subagent
All events — timestamp badge, context info with hover breakdown

Filtering

Kind pills — toggle event types (Tool, Thinking, User, Assistant, Hook, System, Compaction) with a three-state cycle: show all → solo → exclude
Tool pills — filter by specific tool names within the current scope
Status pills — filter by ok/error
Search — full-text search across summaries, tool names, IDs, and content
Min Time — filter tool calls by minimum duration

Session Browser

A modal session picker groups sessions by project and labels each with the first user message from the session. Sessions are sorted by recency. The active session is polled for changes and the timeline updates live.

Navigation

Back/forward buttons track your selection history across scope jumps and row selections, similar to browser navigation.

Architecture

src/
  cli.ts                  — CLI entry point (published as `ccex`)
  index.ts                — programmatic entry point
  types.ts                — shared TypeScript types for all events and analysis
  parser/
    jsonl-reader.ts       — reads session JSONL bundles (main + subagent files)
    session-tree.ts       — builds a tree of events with tool pairing
  analyzers/
    network-tab.ts        — builds scoped event timelines with tool pairs
    reasoning-chain.ts    — chronological thinking/tool/text timeline
    tool-dashboard.ts     — tool stats, file access patterns, sequential patterns
    context-tracker.ts    — per-turn token tracking with compaction resets
    skill-detector.ts     — estimates token impact of CLAUDE.md and skill files
  web/
    server.ts             — HTTP server with session discovery and caching
    public/
      index.html          — shell HTML
      app.js              — single-file UI application
      styles.css           — dark theme styles

Development

npm test           # run tests once
npm run test:watch # watch mode

Publish

npm publish --access public

The prepack script builds TypeScript and copies static web assets into dist/ so the CLI works when installed via npm.

Ccexplorer

Install / Use

README