{"id":48085242,"url":"https://github.com/anaypaul/claude-session-visualizer","last_synced_at":"2026-04-20T01:00:54.039Z","repository":{"id":347950095,"uuid":"1195854425","full_name":"anaypaul/claude-session-visualizer","owner":"anaypaul","description":"Live visualization dashboard for Claude Code sessions — execution trees, token burn charts, thinking explorer, error replay, and real-time session monitoring","archived":false,"fork":false,"pushed_at":"2026-03-30T06:42:11.000Z","size":105,"stargazers_count":0,"open_issues_count":4,"forks_count":1,"subscribers_count":0,"default_branch":"main","last_synced_at":"2026-03-30T08:28:22.737Z","etag":null,"topics":["agentic-coding","ai-coding","ai-tools","anthropic","claude","claude-ai","claude-code","claude-code-tools","code-analysis","cost-tracking","dashboard","developer-tools","devtools","llm-tools","observability","react","react-flow","session-viewer","typescript","visualization"],"latest_commit_sha":null,"homepage":"https://github.com/anaypaul/claude-session-visualizer#quick-start","language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/anaypaul.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":"CONTRIBUTING.md","funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null,"zenodo":null,"notice":null,"maintainers":null,"copyright":null,"agents":null,"dco":null,"cla":null}},"created_at":"2026-03-30T06:04:31.000Z","updated_at":"2026-03-30T06:42:15.000Z","dependencies_parsed_at":null,"dependency_job_id":null,"html_url":"https://github.com/anaypaul/claude-session-visualizer","commit_stats":null,"previous_names":["anaypaul/claude-session-visualizer"],"tags_count":null,"template":false,"template_full_name":null,"purl":"pkg:github/anaypaul/claude-session-visualizer","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/anaypaul%2Fclaude-session-visualizer","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/anaypaul%2Fclaude-session-visualizer/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/anaypaul%2Fclaude-session-visualizer/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/anaypaul%2Fclaude-session-visualizer/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/anaypaul","download_url":"https://codeload.github.com/anaypaul/claude-session-visualizer/tar.gz/refs/heads/main","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/anaypaul%2Fclaude-session-visualizer/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":286080680,"owners_count":32028547,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2026-04-20T00:18:06.643Z","status":"ssl_error","status_checked_at":"2026-04-20T00:17:31.068Z","response_time":55,"last_error":"SSL_read: unexpected eof while reading","robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":false,"can_crawl_api":true,"host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["agentic-coding","ai-coding","ai-tools","anthropic","claude","claude-ai","claude-code","claude-code-tools","code-analysis","cost-tracking","dashboard","developer-tools","devtools","llm-tools","observability","react","react-flow","session-viewer","typescript","visualization"],"created_at":"2026-04-04T15:14:13.317Z","updated_at":"2026-04-20T01:00:54.032Z","avatar_url":"https://github.com/anaypaul.png","language":"TypeScript","funding_links":[],"categories":["Companion Apps \u0026 GUIs"],"sub_categories":["Quick Setup with cc-safe-setup"],"readme":"# Claude Session Visualizer\n\n[![License: MIT](https://img.shields.io/badge/License-MIT-yellow.svg)](https://opensource.org/licenses/MIT)\n[![TypeScript](https://img.shields.io/badge/TypeScript-5.6-blue.svg)](https://www.typescriptlang.org/)\n[![React](https://img.shields.io/badge/React-18-61dafb.svg)](https://react.dev/)\n[![Node.js](https://img.shields.io/badge/Node.js-18%2B-339933.svg)](https://nodejs.org/)\n[![PRs Welcome](https://img.shields.io/badge/PRs-welcome-brightgreen.svg)](https://github.com/anaypaul/claude-session-visualizer/pulls)\n\n\u003e **DevTools for Claude Code** — See exactly what Claude did, how much it cost, where it failed, and what it was thinking.\n\nA 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.\n\n```\n 3 commands to get started:\n $ git clone https://github.com/anaypaul/claude-session-visualizer.git\n $ cd claude-session-visualizer \u0026\u0026 npm install\n $ npm run dev    # Open http://localhost:3458\n```\n\n\u003cp align=\"center\"\u003e\n  \u003cstrong\u003e\n    \u003ca href=\"#quick-start\"\u003eQuick Start\u003c/a\u003e \u0026nbsp;\u0026bull;\u0026nbsp;\n    \u003ca href=\"#features\"\u003eFeatures\u003c/a\u003e \u0026nbsp;\u0026bull;\u0026nbsp;\n    \u003ca href=\"#how-it-works\"\u003eHow It Works\u003c/a\u003e \u0026nbsp;\u0026bull;\u0026nbsp;\n    \u003ca href=\"#development\"\u003eDevelopment\u003c/a\u003e \u0026nbsp;\u0026bull;\u0026nbsp;\n    \u003ca href=\"#contributing\"\u003eContributing\u003c/a\u003e\n  \u003c/strong\u003e\n\u003c/p\u003e\n\nIf you find this useful, [give it a star](https://github.com/anaypaul/claude-session-visualizer) — it helps others discover it.\n\n---\n\n## What is this?\n\nEvery 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.\n\nThink 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.\n\n### Who is this for?\n\n- **Claude Code power users** who want to understand and optimize their sessions\n- **Developers debugging** failed or expensive Claude Code runs\n- **Teams evaluating** different prompting strategies across sessions\n- **Anyone curious** about what happens inside a Claude Code session\n\n---\n\n## Quick Start\n\n### Prerequisites\n\n- **Node.js 18+** (check with `node -v`)\n- **Claude Code** installed (sessions are stored in `~/.claude/`)\n\n### Install and Run\n\n```bash\n# Clone the repository\ngit clone https://github.com/anaypaul/claude-session-visualizer.git\ncd claude-session-visualizer\n\n# Install dependencies\nnpm install\n\n# Start the dashboard (backend + frontend)\nnpm run dev\n```\n\nOpen **http://localhost:3458** in your browser. That's it.\n\nThe dashboard will automatically discover all your Claude Code sessions (active and historical) and display them in the sidebar. Click any session to explore it.\n\n---\n\n## Features\n\n### Conversation Timeline\n\nThe default view renders your session as a threaded conversation with:\n\n- **User/Assistant messages** with markdown rendering and model badges\n- **Tool call cards** — color-coded by type (Bash, Read, Write, Agent, etc.), expandable to show full input/output\n- **Thinking blocks** — collapsible, showing Claude's reasoning process\n- **Full-text search** — search across all messages, tool calls, and thinking blocks\n- **Filter toggles** — show/hide by message type, sidechain, errors, or specific agent\n\n### Execution Tree\n\nAn interactive graph (powered by React Flow) showing the complete execution flow:\n\n- **Agent nodes** (large) — main session and every subagent with status, type, and message count\n- **Tool call nodes** (small) — every tool invocation as a color-coded child node\n- **Collapsible groups** — click an agent to expand/collapse its tool calls\n- **Error highlighting** — failed tool calls glow red\n- **Pan, zoom, minimap** — navigate large execution trees with ease\n\n### Token Burn Chart\n\nA stacked area chart tracking cumulative token consumption over the session:\n\n- **Four token types** — input, output, cache read, cache creation\n- **Running cost estimate** — in USD, using model-specific Anthropic pricing (Opus / Sonnet)\n- **Per-turn tooltips** — hover to see the cost breakdown for any individual turn\n- **Real-time updates** — the chart grows as the session progresses\n\n### Thinking Explorer\n\nA dedicated view for Claude's reasoning:\n\n- **Density sparkline** — see where Claude was thinking hardest (longest thinking blocks)\n- **Keyword search** — search across all thinking blocks with match highlighting\n- **Trigger context** — see which user message triggered each thinking block\n- **Stats** — estimated token count, character count, and average thinking length\n\n### Error Replay\n\nA debugging view that surfaces every failure:\n\n- **Error density strip** — red dots on a session timeline showing where errors occurred\n- **Failure rate** — X errors out of Y tool calls (Z%)\n- **Recovery detection** — did Claude retry the same tool, try a different approach, or give up?\n- **Error cards** — tool name, input summary, error message, and what happened next\n\n### Session History\n\nBrowse all your Claude Code sessions across every project:\n\n- **65+ sessions** discoverable from `~/.claude/projects/`\n- **Filter by status** — All / Live / Closed\n- **Search** — by session ID, project name, or working directory\n- **Project badges** — see which project each session belongs to\n- **Metadata** — message count, session duration, file size\n\n### Task Board\n\nA kanban-style view of Claude Code tasks:\n\n- **Three columns** — Pending, In Progress, Completed\n- **Dependency tracking** — blocked-by and blocks relationships\n- **Owner badges** — who (or which agent) owns each task\n\n---\n\n## How It Works\n\nClaude Session Visualizer is a local-only tool. It reads files from your machine — nothing is sent to any server.\n\n### Architecture\n\n```\n~/.claude/\n  projects/              Hono Backend (port 3457)          Browser (port 3458)\n  ├── *.jsonl  ────────\u003e  File Watcher (chokidar)  ──────\u003e  React + Zustand\n  └── sessions/           JSONL Parser                      React Flow\n      └── *.json          SSE Broadcaster          \u003c──────  EventSource\n                          REST API                 \u003c──────  fetch()\n```\n\n### Data flow\n\n1. **Claude Code** writes conversation data as append-only JSONL files in `~/.claude/projects/`\n2. **File watcher** (chokidar) detects changes using byte-offset tracking — only reads new data, never re-reads the full file\n3. **JSONL parser** normalizes raw messages into a clean schema, grouping streamed assistant responses by `message.id`\n4. **SSE broadcaster** pushes events to all connected browsers in real time\n5. **React frontend** receives events via `EventSource`, updates the Zustand store, and re-renders the active view\n\n### What data does it read?\n\n| File | What it contains |\n|------|-----------------|\n| `~/.claude/sessions/{pid}.json` | Active session registry (PID, session ID, working directory) |\n| `~/.claude/projects/{path}/{sessionId}.jsonl` | Full conversation transcript (messages, tool calls, thinking) |\n| `~/.claude/projects/{path}/{sessionId}/subagents/agent-{id}.jsonl` | Subagent conversation transcripts |\n| `~/.claude/projects/{path}/{sessionId}/subagents/agent-{id}.meta.json` | Agent metadata (type, description) |\n| `~/.claude/tasks/{groupId}/{taskId}.json` | Task definitions (subject, status, dependencies) |\n\n### Privacy\n\n- **100% local** — the dashboard runs on your machine and reads local files only\n- **Read-only** — it never writes to or modifies any Claude Code files\n- **No telemetry** — no data is sent anywhere\n- **No authentication** — designed for single-user local use\n\n---\n\n## Development\n\n### Tech Stack\n\n| Layer | Technology |\n|-------|-----------|\n| Backend | [Hono](https://hono.dev/) (TypeScript), Node.js |\n| Real-time | Server-Sent Events (SSE) |\n| File watching | [chokidar](https://github.com/paulmillr/chokidar) v4 |\n| Frontend | [React](https://react.dev/) 18, [Vite](https://vite.dev/) |\n| State | [Zustand](https://zustand.docs.pmnd.rs/) v5 |\n| Graph viz | [React Flow](https://reactflow.dev/) (@xyflow/react) |\n| Charts | [Recharts](https://recharts.org/) |\n| Language | TypeScript throughout |\n\n### Project Structure\n\n```\nclaude-session-visualizer/\n├── server/                     # Backend (Hono, port 3457)\n│   ├── index.ts                #   Server entry point\n│   ├── api.ts                  #   REST API (session listing, conversation loading)\n│   ├── hooks.ts                #   Claude Code hook receiver (10 endpoints)\n│   ├── sse.ts                  #   SSE broadcaster (client management, event dispatch)\n│   ├── parser.ts               #   JSONL parser (message normalization, grouping)\n│   ├── watcher.ts              #   File watcher (byte-offset tracking, session discovery)\n│   └── types.ts                #   Shared type definitions (the contract)\n├── src/                        # Frontend (React, port 3458)\n│   ├── main.tsx                #   React entry point\n│   ├── App.tsx                 #   Dashboard layout (sidebar, tabs, metrics)\n│   ├── store.ts                #   Zustand store (sessions, messages, agents, tasks)\n│   ├── types.ts                #   Frontend type definitions\n│   ├── hooks/\n│   │   └── useSSE.ts           #   SSE connection hook\n│   ├── components/\n│   │   ├── SessionList.tsx     #   Session browser (filter, search, history)\n│   │   ├── ConversationTimeline.tsx  # Message timeline with search integration\n│   │   ├── MessageBubble.tsx   #   Individual message renderer\n│   │   ├── ToolCallCard.tsx    #   Tool call visualization\n│   │   ├── ThinkingBlock.tsx   #   Inline thinking block (collapsible)\n│   │   ├── AgentGraph.tsx      #   Execution tree (React Flow)\n│   │   ├── TaskBoard.tsx       #   Kanban task board\n│   │   ├── MetricsPanel.tsx    #   Token/tool metrics\n│   │   ├── TokenBurnChart.tsx  #   Cost waterfall chart\n│   │   ├── ThinkingExplorer.tsx #  Thinking trace viewer\n│   │   ├── ErrorReplayView.tsx #   Error investigation view\n│   │   └── MessageSearchBar.tsx #  Search \u0026 filter bar\n│   └── utils/\n│       └── messageFilter.ts    #   Message filtering logic\n├── index.html                  # HTML entry point\n├── package.json\n├── tsconfig.json\n└── vite.config.ts              # Vite config (proxy 3458 → 3457)\n```\n\n### Scripts\n\n```bash\nnpm run dev          # Start both backend and frontend in dev mode\nnpm run dev:server   # Start only the backend (port 3457)\nnpm run dev:client   # Start only the frontend (port 3458)\nnpm run build        # Production build (TypeScript check + Vite build)\nnpm run preview      # Preview the production build\n```\n\n### Adding a New View\n\nThe tab system is plug-and-play. To add a new visualization:\n\n1. Create `src/components/MyNewView.tsx`:\n   ```tsx\n   import { useStore } from '../store';\n\n   export function MyNewView() {\n     const messages = useStore(s =\u003e s.messages);\n     // Your visualization here\n     return \u003cdiv\u003e...\u003c/div\u003e;\n   }\n   ```\n\n2. Register it in `src/App.tsx`:\n   ```tsx\n   import { MyNewView } from './components/MyNewView';\n\n   type TabId = '...' | 'myview';\n\n   const TABS = [\n     ...existing,\n     { id: 'myview', label: 'My View' },\n   ];\n\n   const TAB_COMPONENTS = {\n     ...existing,\n     myview: MyNewView,\n   };\n   ```\n\n3. That's it. No backend changes needed if your view uses existing data from the store.\n\n### Adding a New SSE Event\n\nTo stream new data types from backend to frontend:\n\n1. Add the event type to `server/types.ts` in the `SSEEvent` union\n2. Emit it from `server/watcher.ts` or `server/hooks.ts` via `broadcast(event)`\n3. Handle it in `src/store.ts` inside `handleSSEEvent()`\n4. Consume it in any component via `useStore()`\n\n---\n\n## Optional: Real-Time Hooks\n\nBy default, the visualizer discovers sessions by watching JSONL files. For lower-latency updates, you can configure Claude Code to send HTTP hooks directly to the visualizer.\n\nAdd this to your `~/.claude/settings.json`:\n\n```json\n{\n  \"hooks\": {\n    \"PreToolUse\": [{ \"matcher\": \"*\", \"hooks\": [{ \"type\": \"http\", \"url\": \"http://localhost:3457/hooks/pre-tool-use\" }] }],\n    \"PostToolUse\": [{ \"matcher\": \"*\", \"hooks\": [{ \"type\": \"http\", \"url\": \"http://localhost:3457/hooks/post-tool-use\" }] }],\n    \"SubagentStart\": [{ \"matcher\": \"*\", \"hooks\": [{ \"type\": \"http\", \"url\": \"http://localhost:3457/hooks/subagent-start\" }] }],\n    \"SubagentStop\": [{ \"matcher\": \"*\", \"hooks\": [{ \"type\": \"http\", \"url\": \"http://localhost:3457/hooks/subagent-stop\" }] }],\n    \"Stop\": [{ \"hooks\": [{ \"type\": \"http\", \"url\": \"http://localhost:3457/hooks/stop\" }] }],\n    \"SessionStart\": [{ \"matcher\": \"*\", \"hooks\": [{ \"type\": \"http\", \"url\": \"http://localhost:3457/hooks/session-start\" }] }],\n    \"SessionEnd\": [{ \"hooks\": [{ \"type\": \"http\", \"url\": \"http://localhost:3457/hooks/session-end\" }] }]\n  }\n}\n```\n\n---\n\n## Troubleshooting\n\n### \"No sessions detected\"\n\nMake sure Claude Code has been run at least once. Session data is stored in `~/.claude/projects/`. Check that this directory exists and contains `.jsonl` files:\n\n```bash\nls ~/.claude/projects/\n```\n\n### \"Waiting for messages...\"\n\nClick a session in the sidebar to load it. If sessions appear but messages don't load, check the backend is running:\n\n```bash\ncurl http://localhost:3457/health\n```\n\n### Port conflicts\n\nIf ports 3457 or 3458 are in use, update them in:\n- `server/index.ts` (line 13) for the backend port\n- `vite.config.ts` (line 11-12) for the frontend port and proxy target\n\n---\n\n## Roadmap\n\n- [ ] Session comparison view (side-by-side metrics for two sessions)\n- [ ] File activity heatmap (which files Claude touched most)\n- [ ] Session tagging and annotations\n- [ ] Export sessions as JSON/CSV\n- [ ] Deep linking (`?session=\u003cid\u003e` URL parameter)\n- [ ] Code-splitting for faster initial load\n\n---\n\n## Contributing\n\nContributions are welcome! Here's how to get started:\n\n1. **Fork** the repository\n2. **Create a branch** for your feature (`git checkout -b feat/my-feature`)\n3. **Make your changes** — see [Development](#development) for the project structure\n4. **Test locally** — run `npm run dev` and verify in the browser\n5. **Submit a pull request** with a clear description of what you built\n\n### Guidelines\n\n- TypeScript strict mode — no `any` unless absolutely necessary\n- All styling inline (no CSS modules or Tailwind) — keeps the project self-contained\n- New views should read from the Zustand store, not fetch data independently\n- Keep the backend read-only — never write to Claude Code's files\n\n---\n\n## License\n\nThis project is licensed under the [MIT License](LICENSE).\n\n---\n\nBuilt with Claude Code.\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fanaypaul%2Fclaude-session-visualizer","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fanaypaul%2Fclaude-session-visualizer","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fanaypaul%2Fclaude-session-visualizer/lists"}