Panels

When you click into a session, the main content area becomes a panel workspace. Each panel shows a different facet of the agent's work — synchronized to the timeline playhead position. Drag the playhead to 09:17 AM and the Chat panel shows the conversation at that moment, the Code panel shows the files being changed, the Result panel shows a screenshot of the app, and the Test panel shows which tests were passing.

Panels are built on Dockview, the same docking framework that powers VS Code's layout system. You can drag, split, tab, maximize, and dock panels in any arrangement you like. Your layout is saved to localStorage and restored automatically.

Panel Types

Chat Panel

What it shows: The agent's conversation at the playhead position.

The Chat panel renders the full AI conversation — user messages, assistant responses, thinking blocks, and tool invocations — with the current message highlighted by a violet left border. As you scrub the timeline, the panel auto-scrolls to keep the active message in view.

Key details:

• User messages appear right-aligned with a subtle accent background
• Assistant messages appear left-aligned with syntax highlighting for any inline code
• Thinking blocks are collapsible and rendered in muted italic text
• Tool use blocks display inline with the tool name as a badge (e.g., Write, Edit, Bash)
• Token counts appear as small badges on each message, so you can see where the agent spent its context

This panel answers the question: What was the agent thinking right now?

Code Panel

What it shows: Git diffs at the playhead position.

The Code panel displays the files the agent changed at the current moment, rendered as syntax-highlighted diffs. A collapsible file tree sidebar (200px, left side) lists all changed files with status badges:

• Green badge: file added
• Yellow badge: file modified
• Red badge: file deleted

Click any file in the tree to view its diff. Toggle between unified and split diff views. The diff renderer uses syntax highlighting so you can read the code changes as naturally as you would in a pull request.

This panel answers the question: What code changed right now?

Result Panel

What it shows: Screenshots or video recordings at the playhead position.

The Result panel displays the nearest screenshot or video frame to the playhead position. If the agent was writing frontend code and a dev server was running, you see exactly what the application looked like at that moment.

Key features:

• Image viewer with zoom and pan controls
• Before/after slider — drag a handle to compare the current screenshot with the previous one, revealing visual changes side by side
• Video player — if a video recording exists at this position, an embedded player with custom controls plays the recording
• Gallery strip — a thumbnail row at the bottom lets you browse all captures in the session
• "No capture" state — a clean placeholder with a camera icon when no screenshot exists near the playhead

This panel answers the question: What did the app look like right now?

Test Panel

What it shows: Test results at the playhead position.

The Test panel displays the pass/fail summary for any tests that ran near the current playhead position. The view includes:

• Summary bar — green and red counts showing passing and failing tests at a glance
• Test list — individual test names with status icons (checkmark, X, or skip)
• Error details — for failing tests, expandable sections show error messages and stack traces
• Mini timeline — a small bar showing all test runs across the session, so you can see testing patterns over time

This panel answers the question: Were the tests passing right now?

Decision Panel

What it shows: Architectural decisions the agent made.

The Decision panel presents a chronological log of decisions extracted from the agent's thinking blocks. Each entry includes:

• Title — a concise name for the decision (e.g., "Chose Zod over Yup for validation")
• Reasoning — the agent's explanation for why it chose this approach
• Alternatives — what the agent considered and rejected
• Outcome — what was actually implemented
• Category — architecture, library, pattern, refactor, or bugfix
• Timeline link — click to jump the playhead to the moment the decision was made

Filter decisions by category to focus on architectural choices, library selections, or refactoring decisions.

This panel answers the question: Why did the agent make this choice?

Cost Panel

What it shows: Token usage and cost tracking.

The Cost panel provides a financial view of the session:

• Cumulative cost graph — a line chart aligned with the timeline showing cost over time
• Model breakdown — cost split by model (Opus, Sonnet, Haiku) with color-coded bars
• Input vs. output tokens — see how much of the cost comes from reading context versus generating responses
• Cache hit rate — percentage of tokens served from cache
• Per-session and per-hour cost — aggregate statistics for budgeting

This panel answers the question: How much did this cost?

Layout Management

Drag and Drop

Grab any panel's title bar and drag it to rearrange. As you drag, blue drop zones appear at the edges of existing panels, showing where the dragged panel will land. Drop it:

• On a panel's tab bar — to add it as a tab in that group
• On a panel's edge — to split the area and create a side-by-side or stacked arrangement
• On the workspace edge — to dock it to the left, right, top, or bottom of the entire workspace

Tab Groups

Multiple panels can share the same space as tabs. Click the tab header to switch between them. Drag a tab out of its group to separate it into its own area.

Split Views

Drag a panel to the left or right edge of another panel to create a horizontal split. Drag to the top or bottom for a vertical split. Resize splits by dragging the divider handle.

Maximize and Minimize

Double-click a panel's title bar to maximize it, filling the entire workspace. Double-click again to restore it to its previous size. The minimize button in the title bar collapses the panel to just its tab header.

Default Layout

When you first open a session, Dashcam arranges panels in a sensible default:

+------------------+------------------+
|                  |                  |
|      Chat        |      Code        |
|                  |                  |
+------------------+------------------+
| [Chat] [Code] [Result] [Tests] [Decisions] [Cost] |
+----------------------------------------------------+

Chat and Code share the main area in a 50/50 split. All panels are accessible as tabs. Drag and rearrange as you see fit — your layout is saved automatically.

Reset Layout

Lost track of where everything went? Reset to the default layout from the View menu or with the keyboard shortcut Cmd/Ctrl + Shift + R.