Trace Detail

The trace detail page is Trace's flagship surface. On app.molar.it/trace/{id} it combines a step sidebar, three viewer modes, five synchronized timeline ribbons, and nine inspector tabs on one page. On trace.molar.it/traces/{id} you get steps, events, video, share, Debugger, and Layer 2 enqueue.

Demo: Open demo trace — failed checkout at step 7 (fixture when Trace API is unavailable).

Viewer surfaces

Page layout (full forensic viewer)

┌──────────────────────────────────────────────────────────────────────────┐
│ ← Back · [scenario title] [status] [tier] [mender pill?]                 │
│ shortId · duration · size · code_sha · Guard #4521 · 22m ago             │
│                                    [Pin] [Share] [Export] [Replay] [···] │
├──────────┬───────────────────────────────────────────────┬─────────────────┤
│ Steps    │ Viewer mode bar: Video | DOM | Source         │ Inspector tabs  │
│ sidebar  │ ┌─────────────────────────────────────────┐   │ Overview        │
│          │ │         Replay surface                │   │ Events | Network│
│ ▶ 1 ok   │ └─────────────────────────────────────────┘   │ Console | Clones│
│ ▶ 2 ok   │ [Play] [◀▶] speed · STEP/NET/DOM/CON/AGT   │ Agent | Debugger│
│ ▼ 7 fail │ ════════════ scrubber ribbons ════════════   │ Replay | Artifacts│
│          │                                               │                 │
│ storage  │                                               │ (tab content)   │
│ summary  │                                               │                 │
└──────────┴───────────────────────────────────────────────┴─────────────────┘

Three regions:

1. Left — Steps sidebar — Playwright test steps with pass/fail/skip markers
2. Center — Viewer + scrubber — Video, DOM, or Source mode with five ribbons
3. Right — Inspector — Nine tabbed panels for metadata, events, and actions

Header

Header actions

Steps sidebar

The left panel lists every Playwright test step in execution order.

Keyboard: J / K move to previous/next step. Selecting a step syncs the scrubber to that step's start timestamp.

The sidebar footer shows storage summary: NDJSON size, blob count with dedup percentage, and active clone names.

Viewer modes

Three modes share one scrubber and time display (2.38s / 30.1s).

Video mode (default)

Playwright-recorded screencast (video.webm hot tier, video.av1.mp4 cold tier). Video currentTime tracks scrubber position. Best for human intuition and stakeholder demos.

Overlay shows: REPLAY · {scenario_slug} · video.webm

DOM mode

rrweb player rendering an isolated iframe at the scrubber timestamp.

Data source: rrweb-events.ndjson.zst (extracted during postprocess from dom.mutation and dom.snapshot events).

Overlay shows mutation count and stream size.

Source mode

Embedded Playwright-compatible viewer loading trace.playwright.zip.

Use Source mode when you need Playwright's action tree; use DOM mode for smooth timeline scrubbing.

Switch modes with the mode bar or query param: ?mode=dom.

Five ribbons (scrubber)

Below the viewer, the scrubber renders five stacked ribbon rows plus a playhead and failure diamond.

Controls:

All inspector tabs that support time-sync (Network, Console) filter to events overlapping the current scrub timestamp.

Nine inspector tabs

On trace.molar.it, the right panel ships Events, Video, Debugger, and Diff (child traces only). The nine-tab layout below is the target on app.molar.it/trace.

Open a tab via click or query param: ?tab=network&step=7.

Overview

• Failure block — signature, assertion message, cluster count, last green comparison link
• Mender analysis — classification, confidence, summary, Promote to fix PR button
• Source — PR #, repo, author, Guard run ID with outbound links
• Storage — tier, pin state, NDJSON size, blob dedup, S3 prefix

Events

Filterable table of all 21+ event kinds. Columns: seq, timestamp, kind, step_id, summary.

Click a row → scrubber jumps to that event's timestamp and step sidebar updates.

Filters: All, Steps, Network, Console, Assertions, Agent, Clones.

API: GET /v1/traces/{id}/events?kind=assertion&limit=100

Network

Time-synced to scrubber — shows requests whose [start_ts, end_ts] overlaps current time.

Columns: method, URL (clone hosts highlighted), status, timing waterfall, size.

Click row → detail drawer with headers and bodies via GET /v1/traces/{id}/blob/{sha256}.

Console

Time-synced console.log, warn, error at scrub position. Step attribution on each line.

Clones

Per-clone JSON state at selected step boundary. JMESPath filter box. Open in Clones deep link to clones.molar.it/sessions/{runId}.

Requires Clones SKU — upsell banner when absent.

Agent

Chronological list of agent.thought and agent.action events. Expandable payloads. Collapsible agent ribbon below scrubber mirrors this on the timeline.

Debugger

Chat panel — see Debugger & replay. Default-expanded on failed traces. Budget bar in header.

Replay

Layer 2 replay attempts for this trace: status, from_step, triggered_via (ui / debugger / api), child trace link.

Click succeeded replay → navigate to /traces/{sourceId}/replay/{replayId} diff view.

Artifacts

Downloadable files with signed URLs:

Share

Share is shipped on both cloud surfaces. POST /v1/traces/{id}/share creates org-only or public-read permalinks; embed routes serve a minimal read-only viewer.

The share modal controls permalink visibility.

Permalink formats:

Public shares require no login.

Export

The export menu offers:

Markdown export is server-rendered from summary.json + event slices.

Live SSE streaming

Traces with status=running stream events via Server-Sent Events:

GET /v1/traces/{id}/stream

The detail page subscribes automatically. New events append to the Events tab and extend ribbon segments in real time. A disconnect banner appears on network loss with auto-reconnect.

Running trace indicators:

• Pulsing live badge in header
• Step sidebar shows in-progress step
• Scrubber playhead follows live edge when playing

When the run ends (run.end event), status transitions to passed or failed and postprocess finalizes artifacts (~2s).

Keyboard shortcuts

Full reference:

Shortcuts are disabled when focus is in an input or textarea.

Cold tier and restore

Cold traces retain summary.json and final screenshot only. Full artifacts live in Glacier Instant Retrieval.

Before Layer 2 replay or DOM/video viewing on a cold trace:

1. Click Restore for replay in header or Overview
2. POST /v1/traces/{id}/restore queues async restore (~30–90s)
3. Progress bar in header; email notification optional

Pinned traces never tier down.

Related pages