Claude Code Analysis: Visaulize Your Claude Code History

A web-based visualizer for Claude agent session traces. Renders conversation graphs as interactive DAGs with time-based layout, subagent branching, and detailed event inspection.

Features

• DAG visualization — nodes for user/assistant turns, tool calls, task calls, and hook events; edges follow parentUuid links
• Subagent branching — task nodes branch right, subagent chains run in parallel columns
• Time-based layout — vertical position reflects timestamps; parallel chains align; sequential-only periods use compact spacing
• Chain collapsing — linear runs of non-branching nodes collapse into a single node; click to expand in a side panel
• Variable node height — collapsed chains stretch proportionally when parallel work is occurring
• Event detail panel — click any node to inspect metadata, content blocks, thinking, tool inputs/results, and raw YAML/JSON
• Session browser — sidebar lists all projects and sessions with event counts and timestamps

Setup

yarn install
yarn dev

The app runs at http://localhost:3000. The API server runs at http://localhost:3001.

Trace directory

By default, traces are read from ~/.claude/projects. Override with the TRACES_DIR environment variable:

TRACES_DIR=/path/to/projects yarn dev

Or pass it directly when running the server standalone:

node --import tsx/esm server/index.ts /path/to/projects

Each project is a subdirectory containing .jsonl session files. Subagent traces live at <project>/<sessionId>/subagents/<agentId>.jsonl.

Stackd

• Frontend — React 18, @xyflow/react v12
• Layout — custom timestamp + lane-based algorithm
• Backend — Express, reads JSONL files line-by-line
• Bundler — Vite 5