escottalexander

Ccexplorer — Development skill for Claude Code

Development community

A browser-based inspector for Claude Code JSONL session transcripts.

How to install Ccexplorer

This entry records only its repository, not the path inside it, so there is no exact command to give. Open escottalexander/ccexplorer and copy the folder into ~/.claude/skills/, or the file into ~/.claude/agents/.

What Ccexplorer does

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.

Alternatives in Development

Chrome Devtools MCP — Chrome DevTools for coding agents 29504 108 1 31.7k ★
CLAUDE.md Additions — Turbo-recommended additions for ~/.claude/CLAUDE.md 263 ★
Network Traffic Analysis For Claude Code WebSocket Protocol — This document records methods to capture and analyze network traffic for understanding the Claude Code WebSock 232 ★

README

Claude Code Session Explorer

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