anaypaul

Claude Session Visualizer — Development skill for Claude Code

Development community intermediate

new Live visualization dashboard for Claude Code sessions with execution trees, token cost tracking, thinking trace exploration, and error debugging.

How to install Claude Session Visualizer

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

What Claude Session Visualizer does

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

Alternatives in Development

Root Cause Tracing — Use when errors occur deep in execution and you need to trace back to find the original trigger 102.5k ★
Godogen Source Repo — This repository contains two source trees for the same project: - claude/ — Claude Code source tree - codex/ 2.8k ★
Sniffly — Claude Code dashboard with usage stats, error analysis, and sharable feature 1.2k ★

README

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.