Timeline

The timeline is the core innovation of Dashcam. It is a canvas-rendered horizontal bar that displays every event from a session as markers on swim lanes, with a draggable playhead that controls what every other panel shows. Drag the playhead to any moment, and the Chat panel shows the conversation at that point, the Code panel shows the diff, the Result panel shows the screenshot, and the Test panel shows the test results — all synchronized to the same instant in time.

This is the feature that turns hours of autonomous agent work into something you can actually review.

How It Works

The timeline is rendered on an HTML Canvas element, not the DOM. This is deliberate. A single Claude Code session can produce thousands of events — tool invocations, messages, file writes, test runs, decisions. Rendering each event as a DOM element would tank performance. Canvas rendering keeps scrubbing at 60fps even with 10,000+ events on screen.

A React wrapper handles mouse events, keyboard shortcuts, and state management. The canvas handles pixel-level rendering of lanes, markers, the time ruler, and the playhead. The result is an interface that feels as smooth as dragging a YouTube progress bar, even when the underlying data is orders of magnitude more complex.

Swim Lanes

Each agent in a session gets its own horizontal track — a swim lane. For a simple Claude Code session, there is one lane. For multi-agent setups (Loki Mode with 41 agent types, Claude Squad with parallel instances), each agent occupies its own lane, stacked vertically.

Swim lanes make parallel work legible. You can see at a glance that the frontend agent was writing components while the backend agent was building API routes, and the test agent was running integration tests — all at the same time.

Each lane is 32px tall with a 4px gap between lanes. The lane label sits to the left (120px wide, truncated with ellipsis for long names). The rest of the lane is the event track.

Event Markers

Events appear as shaped markers along their swim lane, positioned horizontally at their timestamp. Different shapes encode different event types so you can scan the timeline visually:

Regular events are 8px in diameter. Decisions, milestones, and errors are 12px — larger so they stand out in a sea of regular events.

Hover over any marker to see a tooltip preview: a one-line summary of the event, its exact timestamp, and the agent that produced it. Click a marker to snap the playhead to that position.

The Playhead

The playhead is a violet vertical line (2px wide) that spans all swim lanes. It represents "now" — the point in time you are inspecting. Every dockable panel synchronizes to the playhead position.

At the top of the playhead is a 12px-wide grabber handle. Drag it left or right to scrub through the session. As you drag, panels update in real-time (debounced to 16ms for smooth 60fps updates). The experience is like scrubbing through a video — except instead of watching pixels change, you are watching the agent's conversation, code changes, and app state evolve.

Click anywhere on the timeline background to jump the playhead to that position. Double-click an event marker to snap to it and open its detail in the Chat panel.

Time Ruler

The top 24px of the timeline is the time ruler. It displays tick marks and labels at appropriate intervals based on the current zoom level.

The ruler supports two display modes:

• Absolute time — Wall-clock timestamps: 09:00, 09:15, 09:30
• Relative time — Time since session start: 0:00, 0:15, 0:30

Toggle between modes by clicking the time display in the playback controls.

Zoom Levels

The timeline supports multiple zoom levels so you can see the big picture or drill into a specific moment:

Zoom with:

• Scroll wheel on the timeline area
• Trackpad pinch gesture
• Zoom slider in the playback controls
• Keyboard: + / - keys

Zoom transitions are animated (200ms ease-out) so you never lose spatial context.

Playback Controls

The bottom of the timeline panel contains YouTube-style playback controls:

When you hit Play, the playhead advances through events automatically. At 1x speed, it moves in real time — the same pace the agent originally worked. At 8x, a five-hour session compresses to about 37 minutes.

Timeline Position

By default, the timeline sits at the bottom of the viewport, like the terminal panel in VS Code. But it is fully repositionable:

• Drag the title bar to dock it to any edge (top, bottom, left, right)
• Resize by dragging the edge handle. Minimum height: 120px. Maximum: 50% of the viewport.
• Collapse by double-clicking the title bar. Click again to restore.
• Context menu for precise placement options

The timeline's position and size are saved to localStorage and restored on your next visit.

Keyboard Shortcuts