Claude Code Visualizer

Real-time visualization of Claude Code sessions. Agents, tools and file operations are represented as animated nodes in an SVG scene.

Installation

npm install

Usage

npm run server   # Backend on port 3001
npm run dev      # Frontend on port 5173

Architecture

src/
├── main.tsx               # React entry point
├── App.tsx                # Root component — SSE connection, event TTL (8 s)
├── types.ts               # TypeScript interfaces (SessionEvent, Agent, Tool, FileOperation)
├── theme.ts               # Color palette and layout constants (radii, sizes)
└── components/
    ├── Scene.tsx           # Main SVG — node rings, Bézier links
    ├── AgentNode.tsx       # Circle — active agent (orange) / completed (brown)
    ├── ToolOrb.tsx         # Diamond — tool colored by category
    ├── FileNode.tsx        # Rectangle — read file (beige) / written file (orange)
    └── ControlPanel.tsx    # Bottom overlay — play/pause, event counter

server/
└── index.js               # Node.js server — parses .jsonl files and streams via SSE

Data flow

1. The server reads session logs from ~/.claude/projects (.jsonl files)
2. Events are streamed via /api/events (Server-Sent Events)
3. The frontend keeps active events for 8 seconds (sliding TTL)

Server options

node server/index.js --list                # List available projects
node server/index.js --project <name>      # Target a specific project

UI controls

• Play/Pause — freeze or resume event display
• Active event counter

Main dependencies

• React 18 + TypeScript + Vite
• framer-motion — node and SVG link animations
• Vanilla Node.js backend (no framework)