Ccexplorer

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//.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, with API errors (rate limits, auth failures) flagged in red
• User messages — prompts, tool results, and pasted images/documents
• Hooks — pre/post hook executions (deduplicated from command+callback pairs)
• System events — turn durations, away-summaries, model fall