# Session Timeline Visualizer - Claude Code DevTools

## Timeline Visualization

Zoom:
User Messages
Assistant Messages
Tool Calls
System/Meta
Total Messages
0
User Messages
0
Assistant Messages
0
Session Duration
--

## About This Tool

### Purpose

Visualize the temporal flow of Claude Code conversations using an interactive Canvas-based timeline. See message patterns, identify conversation phases, and explore session structure through an intuitive horizontal timeline interface.

### Features

- Interactive Canvas Timeline: Messages rendered as colored circles on a horizontal timeline
- Role-Based Color Coding: Instant visual identification of user, assistant, tool, and system messages
- Hover Tooltips: Preview message content without leaving the timeline view
- Zoom & Pan: Navigate through long sessions with smooth zooming and panning controls
- Session Statistics: Real-time metrics on message counts and session duration
- Sample Data: Built-in example for immediate exploration
- JSONL Support: Load real Claude Code transcript files directly

### Web Research Integration

Source: MDN Web Docs - Canvas Element

Techniques Applied:

- fillRect() & fillStyle: Using Canvas 2D context methods to draw colored rectangles and circles representing messages with role-specific colors
- fillText() & font properties: Rendering timestamps and labels directly on canvas with customized text styling for timeline markers
- Mouse event coordinates: Converting browser mouse events to canvas coordinates for precise hover detection and tooltip positioning, accounting for canvas offset and scaling

### Usage

1. Load Data: Click "Load Sample Data" to see an example, or use the file input to load a Claude Code JSONL transcript
2. Explore Timeline: Hover over message circles to see previews; messages are laid out chronologically from left to right
3. Zoom: Use the zoom slider to focus on specific time periods or get an overview of the entire session
4. Pan: Click and drag the timeline to navigate horizontally through the conversation
5. Reset: Click "Reset View" to return to the default zoom level and position

### Technical Implementation

The timeline uses HTML5 Canvas for high-performance rendering of potentially hundreds of messages. Key implementation details:

- Coordinate System: Canvas uses pixel-based coordinates with (0,0) at top-left, messages are positioned along a horizontal time axis
- Scaling & Translation: Canvas context transformations enable smooth zoom and pan without redrawing logic changes
- Event Handling: Mouse position is converted to canvas space by accounting for canvas offset, scroll position, and current zoom level
- Performance: Redraw optimizations ensure smooth interaction even with 1000+ messages