Coding Agent Visualizer — see what your agent did

A dozen linked views

One session, every angle

Pick a session and switch between views — all driven by one unified data model, so every agent source looks consistent.

🕸️

Execution graph

The conversation as a compact left-to-right flow (dagre-layouted). Tool calls fold into chips, sub-agents branch off — no more endless staircase.

🌊

Span waterfall

The distributed-tracing view every serious agent tool converged on: each event a span, indented by call depth, sized by inferred duration.

🔥

Token-cost flame

An icicle where width ∝ tokens and depth = call nesting. A token-heavy turn or sub-agent pops out instantly.

⏱️

Timeline

Every event on a time track with role colors — feel the rhythm, spot the long-running tools and the gaps.

🗂️

File heatmap

Which files the session touched and how often, colored cool→hot by edit frequency.

📊

Stats dashboard

Duration, message and tool counts, input/output/cache tokens, a cumulative-token sparkline and per-tool usage bars.

💬

Transcript

A clean, readable conversation with collapsible tool blocks for when you just want to read.

🧩

Diff & inspect

Click any node for full message / reasoning / tool I/O, with colored diffs for Edit & Write and one-click copy.

🟢

Live tail

Watch a running session stream into every view in real time as the agent works — no refresh, no polling.

📈

Cross-session analytics

Zoom out from a single run to cost, tool trends and activity across all your sessions.

📤

Export

Save any session as Markdown or a self-contained shareable HTML file in one click.

🗂️

Multi-source

Claude Code, Codex, Gemini, OpenCode and Cursor today — a new agent is just one adapter file.

How it works

Local files in, insight out

A single Bun fullstack server serves both the UI and a tiny local-data API. No backend, no database, no telemetry.

Discover

Scans ~/.claude/projects and ~/.codex/sessions for session JSONL files.

Normalize

Per-agent adapters map raw logs into one UnifiedSession model — nodes, tools, tokens, parent links.

Visualize

Every view renders from that single model, so all sources look consistent and feel fast.

// one shape that every adapter normalizes into
interface SessionNode {
  id: string; parentId: string | null;   // DAG edges
  role: "user"|"assistant"|"tool"|"reasoning";
  isSidechain?: boolean;                // sub-agent branch
  text?: string; thinking?: string;
  tool?: { name: string; input: unknown; files?: string[] };
  tokens?: { input: number; output: number };
}

Quick start

Running in under a minute

Requires Bun. Install it, then run the visualizer — no clone needed.

# 1 · Install Bun — macOS & Linux
curl -fsSL https://bun.sh/install | bash

# …or Windows (PowerShell)
powershell -c "irm bun.sh/install.ps1 | iex"

# 2 · Run it — no clone needed
bunx coding-agent-visualizer@latest   # → http://localhost:19876

Roadmap

What's next

Graph, span waterfall, flame, timeline, file heatmap, stats & transcript

Five adapters — Claude Code, Codex, Gemini, OpenCode & Cursor

dagre auto-layout + chain compaction · mtime-cached session scan

Live tail — stream updates into the graph as the agent works

Cross-session analytics · Markdown / HTML export

More adapters (Aider, Cline, …)

Shareable hosted snapshots

See what your
coding agent actually did