Claude Session Visualizer

Claude Session Visualizer

[](https://opensource.org/licenses/MIT) [](https://www.typescriptlang.org/) [](https://react.dev/) [](https://nodejs.org/) [](https://github.com/anaypaul/claude-session-visualizer/pulls)

**DevTools for Claude Code** — See exactly what Claude did, how much it cost, where it failed, and what it was thinking.

A real-time visualization dashboard for [Claude Code](https://claude.ai/code) sessions. Browse, search, and analyze your coding sessions with interactive execution trees, token cost tracking, thinking trace exploration, and error debugging — all in your browser.

 3 commands to get started:
 $ git clone https://github.com/anaypaul/claude-session-visualizer.git
 $ cd claude-session-visualizer && npm install
 $ npm run dev    # Open http://localhost:3458

Quick Start  • 
Features  • 
How It Works  • 
Development  • 
Contributing

If you find this useful, [give it a star](https://github.com/anaypaul/claude-session-visualizer) — it helps others discover it.

---

What is this?

Every Claude Code session generates a rich transcript — messages, tool calls, agent spawns, thinking blocks, and token usage — stored as JSONL files on your machine. **Claude Session Visualizer** reads these files and renders them as an interactive, real-time dashboard in your browser.

Think of it as **DevTools for Claude Code**: you can see exactly what Claude did, how much it cost, where it failed, and what it was thinking.

Who is this for?

• Claude Code power users who want to understand and optimize their sessions
• Developers debugging failed or expensive Claude Code runs
• Teams evaluating different prompting strategies across sessions
• Anyone curious about what happens inside a Claude Code session

---

...