Session Timeline Visualizer

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