@brett_lamy/docstream 1.21.0 → 1.22.1

package/src/replay/ReplayDevtools.tsx

@@ -0,0 +1,352 @@
+/* The player's DevTools: a Console and a Network button in the top bar, with what had happened by the playhead —
+   requests sent and, in red, how many had failed; console errors in red — and, behind them, a panel over the
+   page in the manner of Chrome's DevTools. The Console lists what had been logged, warnings and errors on their
+   tinted rows with their stack traces; the Network tab lists the requests that had been sent (a request still
+   waiting at the playhead shows as pending), and a request's row opens its headers, payload and response.
+
+   Everything is a function of the playhead: scrub back and the lists shrink to what DevTools showed then. A row's
+   time jumps the player there. Esc closes the panel. Plain React + plain CSS, like the player. */
+import { useEffect, useMemo, useRef, useState, type KeyboardEvent as ReactKeyboardEvent, type PointerEvent as ReactPointerEvent } from 'react'
+import { ChevronRight, CircleX, Info, Network, SquareTerminal, TriangleAlert, X } from 'lucide-react'
+import type { ReplayConsoleEntry, ReplayDevtoolsState, ReplayRequest } from './devtools'
+
+export type ReplayDevtoolsTab = 'console' | 'network'
+
+const time = (ms: number) => {
+  const s = Math.max(0, ms) / 1000
+  return `${Math.floor(s / 60)}:${(s % 60).toFixed(1).padStart(4, '0')}`
+}
+const duration = (ms?: number) => (ms === undefined ? '—' : ms < 1000 ? `${Math.round(ms)} ms` : `${(ms / 1000).toFixed(2)} s`)
+
+/** The two buttons for the top bar (or the controls row): icon, request count and, in red, what failed. */
+export function DevtoolsButtons({ state, open, onOpen }: {
+  state: ReplayDevtoolsState; open: ReplayDevtoolsTab | null; onOpen: (tab: ReplayDevtoolsTab) => void
+}) {
+  const { requests, failed, errors, warnings } = state.counts
+  return (
+    <div data-slot="replay-devtools-buttons">
+      <button
+        type="button"
+        data-slot="replay-devtools-button"
+        data-tab="console"
+        aria-pressed={open === 'console'}
+        aria-label={`Console: ${errors} ${errors === 1 ? 'error' : 'errors'}, ${warnings} ${warnings === 1 ? 'warning' : 'warnings'}`}
+        title="Console"
+        onClick={() => onOpen('console')}
+      >
+        <SquareTerminal size={14} strokeWidth={2} />
+        {errors ? <span data-part="failed">{errors}</span> : null}
+        {warnings ? <span data-part="warn">{warnings}</span> : null}
+      </button>
+      <button
+        type="button"
+        data-slot="replay-devtools-button"
+        data-tab="network"
+        aria-pressed={open === 'network'}
+        aria-label={`Network: ${requests} ${requests === 1 ? 'request' : 'requests'}, ${failed} failed`}
+        title="Network"
+        onClick={() => onOpen('network')}
+      >
+        <Network size={14} strokeWidth={2} />
+        <span data-part="count">{requests}</span>
+        {failed ? <span data-part="failed">{failed}</span> : null}
+      </button>
+    </div>
+  )
+}
+
+/** The panel over the page: Console and Network, cut at the playhead. */
+export function DevtoolsPanel({ state, at, tab, onTab, onClose, onSeek }: {
+  state: ReplayDevtoolsState; at: number; tab: ReplayDevtoolsTab; onTab: (tab: ReplayDevtoolsTab) => void
+  onClose: () => void; onSeek: (ms: number) => void
+}) {
+  const panel = useRef<HTMLDivElement>(null)
+  const [height, setHeight] = useState(58)
+  useEffect(() => { panel.current?.focus({ preventScroll: true }) }, [])
+
+  // Drag the top edge to resize, as a fraction of the stage.
+  const resize = (e: ReactPointerEvent<HTMLDivElement>) => {
+    const stage = panel.current?.parentElement
+    if (!stage) return
+    e.preventDefault()
+    const el = e.currentTarget
+    el.setPointerCapture(e.pointerId)
+    const box = stage.getBoundingClientRect()
+    const move = (ev: PointerEvent) => setHeight(Math.min(92, Math.max(22, ((box.bottom - ev.clientY) / box.height) * 100)))
+    const up = () => { el.removeEventListener('pointermove', move); el.removeEventListener('pointerup', up) }
+    el.addEventListener('pointermove', move)
+    el.addEventListener('pointerup', up)
+  }
+
+  const onKeyDown = (e: ReactKeyboardEvent) => {
+    if (e.key === 'Escape') { e.stopPropagation(); onClose() }
+    // The player's own keys (space, arrows, J/K/L) stay out of the panel.
+    else if (!(e.target as HTMLElement).closest('input')) e.stopPropagation()
+  }
+
+  const tabs: { id: ReplayDevtoolsTab; label: string }[] = [{ id: 'console', label: 'Console' }, { id: 'network', label: 'Network' }]
+  return (
+    <div
+      ref={panel}
+      data-slot="replay-devtools"
+      role="dialog"
+      aria-label="DevTools"
+      tabIndex={-1}
+      onKeyDown={onKeyDown}
+      style={{ height: `${height}%` }}
+    >
+      <div data-slot="replay-devtools-resize" aria-hidden="true" onPointerDown={resize} />
+      <div data-slot="replay-devtools-tabs">
+        <div data-slot="replay-devtools-tablist" role="tablist" aria-label="DevTools panels">
+        {tabs.map((t) => (
+          <button
+            key={t.id}
+            type="button"
+            role="tab"
+            aria-selected={tab === t.id}
+            onClick={() => onTab(t.id)}
+            onKeyDown={(e) => {
+              if (e.key === 'ArrowLeft' || e.key === 'ArrowRight') { e.preventDefault(); onTab(t.id === 'console' ? 'network' : 'console') }
+            }}
+            tabIndex={tab === t.id ? 0 : -1}
+          >
+            {t.label}
+            {t.id === 'console' && state.counts.errors ? <span data-part="failed">{state.counts.errors}</span> : null}
+            {t.id === 'network' && state.counts.failed ? <span data-part="failed">{state.counts.failed}</span> : null}
+          </button>
+        ))}
+        </div>
+        <span data-part="at">As of {time(at)}</span>
+        <button type="button" data-slot="replay-devtools-close" aria-label="Close DevTools" onClick={onClose}><X size={14} /></button>
+      </div>
+      {tab === 'console' ? <ConsolePane state={state} onSeek={onSeek} /> : <NetworkPane state={state} onSeek={onSeek} />}
+    </div>
+  )
+}
+
+/* ── Console ─────────────────────────────────────────────────────────────────────── */
+
+type LevelFilter = 'all' | 'error' | 'warn' | 'info'
+const LEVEL_ICON = { error: CircleX, warn: TriangleAlert, info: Info } as const
+
+function ConsolePane({ state, onSeek }: { state: ReplayDevtoolsState; onSeek: (ms: number) => void }) {
+  const [query, setQuery] = useState('')
+  const [level, setLevel] = useState<LevelFilter>('all')
+  const list = useRef<HTMLDivElement>(null)
+  const rows = useMemo(() => {
+    const q = query.trim().toLowerCase()
+    return state.console.filter((e) =>
+      (level === 'all' || (level === 'info' ? e.level === 'info' || e.level === 'log' || e.level === 'debug' : e.level === level)) &&
+      (!q || e.message.toLowerCase().includes(q)))
+  }, [state.console, query, level])
+  // Follow new messages as they're logged, unless you've scrolled up to read.
+  const pinned = useRef(true)
+  useEffect(() => {
+    const el = list.current
+    if (el && pinned.current) el.scrollTop = el.scrollHeight
+  }, [rows.length])
+  return (
+    <div data-slot="replay-devtools-pane" data-pane="console">
+      <div data-slot="replay-devtools-toolbar">
+        <input type="search" aria-label="Filter console" placeholder="Filter" value={query} onChange={(e) => setQuery(e.currentTarget.value)} />
+        <select aria-label="Log levels" value={level} onChange={(e) => setLevel(e.currentTarget.value as LevelFilter)}>
+          <option value="all">All levels</option>
+          <option value="error">Errors</option>
+          <option value="warn">Warnings</option>
+          <option value="info">Info</option>
+        </select>
+        <span data-part="summary">
+          {state.counts.errors ? <span data-part="failed">{state.counts.errors} {state.counts.errors === 1 ? 'error' : 'errors'}</span> : null}
+          {state.counts.warnings ? <span data-part="warn">{state.counts.warnings} {state.counts.warnings === 1 ? 'warning' : 'warnings'}</span> : null}
+        </span>
+      </div>
+      <div
+        ref={list}
+        data-slot="replay-devtools-list"
+        role="log"
+        aria-label="Console messages"
+        onScroll={(e) => { const el = e.currentTarget; pinned.current = el.scrollHeight - el.scrollTop - el.clientHeight < 8 }}
+      >
+        {rows.map((entry) => <ConsoleRow key={entry.id} entry={entry} onSeek={onSeek} />)}
+        {!rows.length ? <p data-slot="replay-devtools-empty">{state.console.length ? 'No messages match the filter' : 'Nothing logged yet'}</p> : null}
+        {state.counts.laterMessages ? <p data-slot="replay-devtools-later">{state.counts.laterMessages} more later in the recording</p> : null}
+      </div>
+    </div>
+  )
+}
+
+function ConsoleRow({ entry, onSeek }: { entry: ReplayConsoleEntry; onSeek: (ms: number) => void }) {
+  const Glyph = entry.level === 'error' || entry.level === 'warn' || entry.level === 'info' ? LEVEL_ICON[entry.level] : null
+  const body = (
+    <>
+      <span data-part="icon" aria-hidden="true">{Glyph ? <Glyph size={12} strokeWidth={2.2} /> : null}</span>
+      <span data-part="message">{entry.message || ' '}</span>
+    </>
+  )
+  return (
+    <div data-slot="replay-devtools-message" data-level={entry.level}>
+      {entry.trace?.length ? (
+        <details>
+          <summary>{body}</summary>
+          <ol data-part="trace">{entry.trace.map((frame, i) => <li key={i}>{frame}</li>)}</ol>
+        </details>
+      ) : <div data-part="line">{body}</div>}
+      <button type="button" data-part="time" aria-label={`Go to ${time(entry.time)}`} onClick={() => onSeek(entry.time)}>{time(entry.time)}</button>
+    </div>
+  )
+}
+
+/* ── Network ─────────────────────────────────────────────────────────────────────── */
+
+type RequestFilter = 'all' | 'fetch' | 'failed'
+type Row = ReplayRequest & { pending: boolean }
+
+const statusText = (r: Row) => (r.pending ? '(pending)' : r.status === undefined ? (r.failed ? '(failed)' : '—') : r.status === 0 ? '(failed)' : String(r.status))
+
+function NetworkPane({ state, onSeek }: { state: ReplayDevtoolsState; onSeek: (ms: number) => void }) {
+  const [query, setQuery] = useState('')
+  const [filter, setFilter] = useState<RequestFilter>('all')
+  const [selectedId, setSelectedId] = useState<string | null>(null)
+  const rows = useMemo(() => {
+    const q = query.trim().toLowerCase()
+    return state.network.filter((r) =>
+      (filter === 'all' || (filter === 'failed' ? r.failed && !r.pending : r.type === 'fetch' || r.type === 'xhr')) &&
+      (!q || r.url.toLowerCase().includes(q) || r.method.toLowerCase() === q))
+  }, [state.network, query, filter])
+  const selected = state.network.find((r) => r.id === selectedId) ?? null
+  // The waterfall spans from the first request to the last answer seen by the playhead.
+  const span = useMemo(() => {
+    const first = state.network[0]?.time ?? 0
+    let last = first + 1
+    for (const r of state.network) last = Math.max(last, r.time + (r.duration ?? 0))
+    return { first, length: last - first }
+  }, [state.network])
+
+  return (
+    <div data-slot="replay-devtools-pane" data-pane="network" data-detail={selected ? '' : undefined}>
+      <div data-slot="replay-devtools-toolbar">
+        <input type="search" aria-label="Filter requests" placeholder="Filter" value={query} onChange={(e) => setQuery(e.currentTarget.value)} />
+        <div data-slot="replay-devtools-chips" role="radiogroup" aria-label="Request types">
+          {(['all', 'fetch', 'failed'] as const).map((f) => (
+            <button key={f} type="button" role="radio" aria-checked={filter === f} onClick={() => setFilter(f)}>
+              {f === 'all' ? 'All' : f === 'fetch' ? 'Fetch/XHR' : 'Failed'}
+            </button>
+          ))}
+        </div>
+      </div>
+      <div data-slot="replay-devtools-network">
+        <div data-slot="replay-devtools-table-wrap">
+          <table data-slot="replay-devtools-table">
+            <thead>
+              <tr>
+                <th scope="col">Name</th>
+                <th scope="col">Status</th>
+                {selected ? null : <><th scope="col">Method</th><th scope="col">Type</th><th scope="col">Time</th><th scope="col" data-col="waterfall">Waterfall</th></>}
+              </tr>
+            </thead>
+            <tbody>
+              {rows.map((r) => (
+                <tr
+                  key={r.id}
+                  data-failed={(r.failed && !r.pending) || undefined}
+                  data-pending={r.pending || undefined}
+                  aria-selected={r.id === selectedId}
+                  tabIndex={0}
+                  onClick={() => setSelectedId(r.id === selectedId ? null : r.id)}
+                  onKeyDown={(e) => { if (e.key === 'Enter' || e.key === ' ') { e.preventDefault(); setSelectedId(r.id === selectedId ? null : r.id) } }}
+                >
+                  <td title={r.url}><span data-part="name">{r.name}</span></td>
+                  <td>{statusText(r)}</td>
+                  {selected ? null : (
+                    <>
+                      <td>{r.method}</td>
+                      <td>{r.type}</td>
+                      <td>{r.pending ? 'Pending' : duration(r.duration)}</td>
+                      <td data-col="waterfall">
+                        <span
+                          data-part="bar"
+                          style={{
+                            left: `${((r.time - span.first) / span.length) * 100}%`,
+                            width: `max(2px, ${(((r.duration ?? 0) / span.length) * 100).toFixed(2)}%)`,
+                          }}
+                        />
+                      </td>
+                    </>
+                  )}
+                </tr>
+              ))}
+            </tbody>
+          </table>
+          {!rows.length ? <p data-slot="replay-devtools-empty">{state.network.length ? 'No requests match the filter' : 'No requests yet'}</p> : null}
+        </div>
+        {selected ? <RequestDetail request={selected} onClose={() => setSelectedId(null)} onSeek={onSeek} /> : null}
+      </div>
+      <div data-slot="replay-devtools-status">
+        <span>{state.counts.requests} {state.counts.requests === 1 ? 'request' : 'requests'}</span>
+        {state.counts.failed ? <span data-part="failed">{state.counts.failed} failed</span> : null}
+        {state.counts.laterRequests ? <span>{state.counts.laterRequests} more later in the recording</span> : null}
+      </div>
+    </div>
+  )
+}
+
+type DetailTab = 'headers' | 'payload' | 'response'
+
+function RequestDetail({ request, onClose, onSeek }: { request: Row; onClose: () => void; onSeek: (ms: number) => void }) {
+  const [tab, setTab] = useState<DetailTab>('headers')
+  const pretty = (body?: string) => {
+    if (body === undefined || body === '') return undefined
+    try { return JSON.stringify(JSON.parse(body), null, 2) } catch { return body }
+  }
+  const general: [string, string][] = [
+    ['Request URL', request.url],
+    ['Request Method', request.method],
+    ['Status Code', request.pending ? 'Pending' : request.status !== undefined ? `${request.status}${request.statusText ? ` ${request.statusText}` : ''}` : request.failed ? 'Failed' : 'Unknown'],
+    ...(request.error ? [['Error', request.error] as [string, string]] : []),
+    ['Sent at', time(request.time)],
+    ['Duration', duration(request.duration)],
+  ]
+  return (
+    <div data-slot="replay-devtools-detail">
+      <div data-slot="replay-devtools-detail-tabs">
+        <button type="button" aria-label="Close request details" data-slot="replay-devtools-close" onClick={onClose}><X size={13} /></button>
+        <div data-slot="replay-devtools-tablist" role="tablist" aria-label={`${request.name} details`}>
+          {(['headers', 'payload', 'response'] as const).map((t) => (
+            <button key={t} type="button" role="tab" aria-selected={tab === t} onClick={() => setTab(t)}>
+              {t[0]!.toUpperCase() + t.slice(1)}
+            </button>
+          ))}
+        </div>
+      </div>
+      <div data-slot="replay-devtools-detail-body">
+        {tab === 'headers' ? (
+          <>
+            <Section title="General" rows={general} />
+            {request.responseHeaders ? <Section title="Response Headers" rows={Object.entries(request.responseHeaders)} /> : null}
+            {request.requestHeaders ? <Section title="Request Headers" rows={Object.entries(request.requestHeaders)} /> : null}
+            <button type="button" data-slot="replay-devtools-jump" onClick={() => onSeek(request.time)}>Go to {time(request.time)} in the recording</button>
+          </>
+        ) : (
+          <Body text={pretty(tab === 'payload' ? request.requestBody : request.responseBody)} empty={tab === 'payload' ? 'This request has no recorded payload' : request.pending ? 'Waiting for the response' : 'The recording has no response body for this request'} />
+        )}
+      </div>
+    </div>
+  )
+}
+
+function Section({ title, rows }: { title: string; rows: [string, string][] }) {
+  return (
+    <details open data-slot="replay-devtools-section">
+      <summary><ChevronRight size={12} data-part="chevron" />{title}</summary>
+      <dl>
+        {rows.map(([k, v]) => (
+          <div key={k}><dt>{k}</dt><dd>{v}</dd></div>
+        ))}
+      </dl>
+    </details>
+  )
+}
+
+function Body({ text, empty }: { text?: string; empty: string }) {
+  return text !== undefined ? <pre data-slot="replay-devtools-body">{text}</pre> : <p data-slot="replay-devtools-empty">{empty}</p>
+}

package/src/replay/ReplayPlayer.tsx

@@ -1,7 +1,8 @@
 /* The player behind `ReplayPreview`: an rrweb session replay in a browser frame. The headless `ReplayStage`
    plays the recording (rrweb loads lazily, on first render); this adds the chrome around it: a URL bar that
    follows the recording's navigations, play/pause, a scrubber with the recording's moments on a rail above
-   it, a speed control, fullscreen, and a drawn cursor whose clicks ripple. Until the player is ready a
+   it, a speed control, fullscreen, a drawn cursor whose clicks ripple, and DevTools: Console and Network buttons
+   in the top bar with what had been logged and requested by the playhead, which open a DevTools panel over the page. Until the player is ready a
    poster (a page-shaped skeleton by default) holds the frame's exact size, so nothing jumps.
 
    Plain React + plain CSS (`@layer docstream.replay` in styles.css, `[data-slot]` hooks). Keys (focus inside
@@ -15,6 +16,8 @@ import {
 import { useReducedMotion } from 'framer-motion'
 import { Lock, Maximize, Minimize, Pause, Play, RotateCcw } from 'lucide-react'
 import { ReplayStage } from './ReplayStage'
+import { DevtoolsButtons, DevtoolsPanel, type ReplayDevtoolsTab } from './ReplayDevtools'
+import { getReplayDevtools, replayDevtoolsAt } from './devtools'
 import { getReplayMarkers, getReplayMeta, getReplayPointerTrack, replayPointerAt } from './markers'
 import type { ReplayMarker, ReplayMarkerKind, ReplayPointerTrack } from './markers'
 import type { ReplayStageHandle } from './stage-types'
@@ -59,6 +62,12 @@ export interface ReplayPlayerOptions {
   markers?: boolean | ReplayMarker[]
   /** Which recorded marker kinds to show (default all). */
   markerKinds?: ReplayMarkerKind[]
+  /** Console and Network buttons (in the top bar, or beside the controls without the browser chrome) that open a
+   *  DevTools panel cut at the playhead. `true` (default) shows them when the recording has console messages or
+   *  requests; `false` hides them. */
+  devtools?: boolean
+  /** Open the DevTools panel on this tab at mount. */
+  defaultDevtoolsTab?: ReplayDevtoolsTab
   /** Draw the recorded pointer and click ripples (default true). */
   cursor?: boolean
   /** `width` (default): the page scales to the frame's width and sets its height. `contain`: fill the frame's
@@ -89,7 +98,7 @@ const MARKER_NOUN: Record<ReplayMarkerKind, string> = {
 export function ReplayPlayer({
   events, url, title = 'Session replay', chrome = 'browser', trafficLights = true, controls = true,
   autoplay = false, loop = false, initialTime = 0, speeds = DEFAULT_PLAYER_SPEEDS, markers = true, markerKinds,
-  cursor = true, fit = 'width', poster, lazy = true, playerRef, onTimeUpdate, onPlayingChange, onMarkerPress,
+  cursor = true, devtools = true, defaultDevtoolsTab, fit = 'width', poster, lazy = true, playerRef, onTimeUpdate, onPlayingChange, onMarkerPress,
   className, style,
 }: ReplayPlayerOptions & { events: ReplayEvent[] }) {
   const rootRef = useRef<HTMLDivElement>(null)
@@ -103,6 +112,10 @@ export function ReplayPlayer({
     return markerKinds ? list.filter((m) => markerKinds.includes(m.kind)) : list
   }, [markers, recorded, markerKinds])
 
+  const tools = useMemo(() => getReplayDevtools(events), [events])
+  const showTools = devtools && (tools.console.length > 0 || tools.network.length > 0)
+  const [panel, setPanel] = useState<ReplayDevtoolsTab | null>(defaultDevtoolsTab ?? null)
+
   const [visible, setVisible] = useState(!lazy)
   const [ready, setReady] = useState(false)
   const [posterGone, setPosterGone] = useState(false)
@@ -195,6 +208,10 @@ export function ReplayPlayer({
     return current
   }, [url, meta.href, recorded, time])
 
+  const toolsState = useMemo(() => replayDevtoolsAt(tools, time), [tools, time])
+  const openTools = (tab: ReplayDevtoolsTab) => setPanel((p) => (p === tab ? null : tab))
+  const toolButtons = showTools ? <DevtoolsButtons state={toolsState} open={panel} onOpen={openTools} /> : null
+
   const w = meta.width || 1280
   const h = meta.height || 800
   const contain = fit === 'contain' || fullscreen
@@ -221,7 +238,7 @@ export function ReplayPlayer({
       }}
       style={style}
     >
-      {chrome === 'browser' ? <BrowserBar href={href} trafficLights={trafficLights} loading={!ready && meta.playable} /> : null}
+      {chrome === 'browser' ? <BrowserBar href={href} trafficLights={trafficLights} loading={!ready && meta.playable} actions={toolButtons} /> : null}
 
       <div data-slot="replay-preview-stage" style={{ '--replay-ar': `${w} / ${h}` } as CSSProperties}>
         {visible && meta.playable ? (
@@ -249,8 +266,19 @@ export function ReplayPlayer({
           </div>
         ) : null}
 
+        {showTools && panel ? (
+          <DevtoolsPanel
+            state={toolsState}
+            at={time}
+            tab={panel}
+            onTab={setPanel}
+            onClose={() => { setPanel(null); rootRef.current?.focus({ preventScroll: true }) }}
+            onSeek={(ms) => handle.seek(ms)}
+          />
+        ) : null}
+
         {controls ? (
-          <div data-slot="replay-preview-center" data-show={(ready && !playing) || undefined}>
+          <div data-slot="replay-preview-center" data-show={(ready && !playing && !(showTools && panel)) || undefined}>
             <button
               type="button"
               tabIndex={-1}
@@ -280,6 +308,7 @@ export function ReplayPlayer({
             onSeek={(ms) => handle.seek(ms)}
             onMarker={jumpTo}
           />
+          {chrome !== 'browser' ? toolButtons : null}
           <button type="button" data-slot="replay-preview-speed" aria-label={`Playback speed ${speed}×`} onClick={() => cycleSpeed(1)}>
             {`${speed}×`}
           </button>
@@ -301,7 +330,7 @@ export function splitReplayAddress(href: string): { host: string; path: string }
   return cut < 0 ? { host: shown, path: '' } : { host: shown.slice(0, cut), path: shown.slice(cut) }
 }
 
-export function BrowserBar({ href, trafficLights, loading }: { href: string; trafficLights: boolean; loading: boolean }) {
+export function BrowserBar({ href, trafficLights, loading, actions }: { href: string; trafficLights: boolean; loading: boolean; actions?: ReactNode }) {
   const { host, path } = splitReplayAddress(href)
   // Once the recording is past the site root, where it is (path, query, hash) is what matters:
   // it leads and keeps its room, and the host dims and gives way first.
@@ -322,7 +351,8 @@ export function BrowserBar({ href, trafficLights, loading }: { href: string; tra
           {path ? <span data-part="path">{path}</span> : null}
         </span>
       </div>
-      {trafficLights ? <span aria-hidden="true" data-slot="replay-preview-lights-spacer" /> : null}
+      {actions ? <div data-slot="replay-preview-actions">{actions}</div>
+        : trafficLights ? <span aria-hidden="true" data-slot="replay-preview-lights-spacer" /> : null}
     </div>
   )
 }

package/src/replay/demo/index.ts

@@ -1,14 +1,19 @@
 import type { ReplayEvent } from '../types';
 
-/* A small synthetic rrweb recording (58 events, ~9 s, 1280×800) for ReplayPreview's stories, docs and the loop-qa
+/* A small synthetic rrweb recording (67 events, ~9 s, 1280×800) for ReplayPreview's stories, docs and the loop-qa
    block: a shopper on a mock "Northwind" storefront adds two products, opens the cart, types an email and a
    promo code, and "Place order" fails — a custom `network` event (POST /api/checkout 500) and an `error` event
-   mark the moment. Recorded with rrweb 2.0.0-alpha.20 against a local page (no external assets), timestamps
+   mark the moment. Console messages (rrweb/console@1) and the page's other requests (rrweb/network@1, with
+   headers and bodies) were added by hand so the player's DevTools have something to show; none of them fail, so the
+   timeline markers are unchanged. Recorded with rrweb 2.0.0-alpha.20 against a local page (no external assets), timestamps
    rebased to 2026-09-24 14:32:08 UTC so every render is identical. */
 export const replayDemoEvents: ReplayEvent[] = [
   {"type":4,"data":{"href":"https://shop.northwind.test/collections/trail","width":1280,"height":800},"timestamp":1790260328000},
   {"type":2,"data":{"node":{"type":0,"childNodes":[{"type":1,"name":"html","publicId":"","systemId":"","id":2},{"type":2,"tagName":"html","attributes":{},"childNodes":[{"type":2,"tagName":"head","attributes":{},"childNodes":[{"type":2,"tagName":"meta","attributes":{"charset":"utf-8"},"childNodes":[],"id":5},{"type":2,"tagName":"title","attributes":{},"childNodes":[{"type":3,"textContent":"Northwind Outfitters","id":7}],"id":6},{"type":3,"textContent":"\n","id":8},{"type":2,"tagName":"style","attributes":{"_cssText":"* { box-sizing: border-box; }body { margin: 0px; font: 14px / 1.45 -apple-system, BlinkMacSystemFont, \"Segoe UI\", Inter, sans-serif; color: rgb(28, 25, 23); background: rgb(250, 250, 249); }header { display: flex; align-items: center; gap: 28px; height: 64px; padding: 0px 40px; background: rgb(255, 255, 255); border-bottom: 1px solid rgb(231, 229, 228); }.logo { font-weight: 700; font-size: 17px; letter-spacing: -0.02em; }.logo b { color: rgb(13, 148, 136); }nav a { color: rgb(87, 83, 78); text-decoration: none; margin-right: 20px; }.sp { flex: 1 1 0%; }.cart { position: relative; border: 1px solid rgb(214, 211, 209); background: rgb(255, 255, 255); border-radius: 999px; padding: 7px 14px; font: inherit; cursor: pointer; }.badge { position: absolute; top: -6px; right: -6px; min-width: 18px; height: 18px; border-radius: 9px; background: rgb(13, 148, 136); color: rgb(255, 255, 255); font-size: 11px; display: grid; place-items: center; padding: 0px 5px; }.hero { padding: 36px 40px 12px; }.hero h1 { margin: 0px; font-size: 30px; letter-spacing: -0.03em; }.hero p { margin: 6px 0px 0px; color: rgb(120, 113, 108); }.grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; padding: 20px 40px; }.card { background: rgb(255, 255, 255); border: 1px solid rgb(231, 229, 228); border-radius: 14px; overflow: hidden; transition: box-shadow 0.2s; }.card:hover { box-shadow: rgba(0, 0, 0, 0.08) 0px 8px 24px; }.img { height: 150px; }.i1 { background: linear-gradient(135deg, rgb(153, 246, 228), rgb(13, 148, 136)); }.i2 { background: linear-gradient(135deg, rgb(253, 230, 138), rgb(217, 119, 6)); }.i3 { background: linear-gradient(135deg, rgb(199, 210, 254), rgb(79, 70, 229)); }.i4 { background: linear-gradient(135deg, rgb(254, 205, 211), rgb(225, 29, 72)); }.body { padding: 12px 14px 14px; }.name { font-weight: 600; }.price { color: rgb(120, 113, 108); margin: 2px 0px 10px; }.add { width: 100%; border: 0px; border-radius: 9px; background: rgb(28, 25, 23); color: rgb(255, 255, 255); padding: 9px; font-style: inherit; font-variant: inherit; font-stretch: inherit; font-size: inherit; line-height: inherit; font-family: inherit; font-optical-sizing: inherit; font-size-adjust: inherit; font-kerning: inherit; font-feature-settings: inherit; font-variation-settings: inherit; font-language-override: inherit; font-weight: 600; cursor: pointer; }.drawer { position: fixed; top: 0px; right: 0px; bottom: 0px; width: 380px; background: rgb(255, 255, 255); border-left: 1px solid rgb(231, 229, 228); box-shadow: rgba(0, 0, 0, 0.12) -12px 0px 40px; padding: 24px; transform: translateX(100%); transition: transform 0.3s cubic-bezier(0.32, 0.72, 0, 1); }.drawer.open { transform: none; }.drawer h2 { margin: 0px 0px 16px; font-size: 18px; }.line { display: flex; justify-content: space-between; padding: 10px 0px; border-bottom: 1px solid rgb(245, 245, 244); }label { display: block; font-size: 12px; color: rgb(120, 113, 108); margin: 14px 0px 4px; }input { width: 100%; border: 1px solid rgb(214, 211, 209); border-radius: 9px; padding: 9px 11px; font: inherit; }.pay { margin-top: 18px; width: 100%; border: 0px; border-radius: 10px; background: rgb(13, 148, 136); color: rgb(255, 255, 255); padding: 11px; font-style: inherit; font-variant: inherit; font-stretch: inherit; font-size: inherit; line-height: inherit; font-family: inherit; font-optical-sizing: inherit; font-size-adjust: inherit; font-kerning: inherit; font-feature-settings: inherit; font-variation-settings: inherit; font-language-override: inherit; font-weight: 600; cursor: pointer; }.err { display: none; margin-top: 14px; border-radius: 10px; background: rgb(254, 242, 242); border: 1px solid rgb(254, 202, 202); color: rgb(185, 28, 28); padding: 10px 12px; font-size: 13px; }.err.show { display: block; }"},"childNodes":[{"type":3,"textContent":"","id":10}],"id":9},{"type":2,"tagName":"script","attributes":{"type":"text/javascript"},"childNodes":[{"type":3,"textContent":"SCRIPT_PLACEHOLDER","id":12}],"id":11}],"id":4},{"type":2,"tagName":"body","attributes":{},"childNodes":[{"type":3,"textContent":"\n","id":14},{"type":2,"tagName":"header","attributes":{},"childNodes":[{"type":2,"tagName":"div","attributes":{"class":"logo"},"childNodes":[{"type":3,"textContent":"north","id":17},{"type":2,"tagName":"b","attributes":{},"childNodes":[{"type":3,"textContent":"wind","id":19}],"id":18}],"id":16},{"type":2,"tagName":"nav","attributes":{},"childNodes":[{"type":2,"tagName":"a","attributes":{"href":"file:///tmp/rr/page.html#"},"childNodes":[{"type":3,"textContent":"New","id":22}],"id":21},{"type":2,"tagName":"a","attributes":{"href":"file:///tmp/rr/page.html#"},"childNodes":[{"type":3,"textContent":"Trail","id":24}],"id":23},{"type":2,"tagName":"a","attributes":{"href":"file:///tmp/rr/page.html#"},"childNodes":[{"type":3,"textContent":"Road","id":26}],"id":25},{"type":2,"tagName":"a","attributes":{"href":"file:///tmp/rr/page.html#"},"childNodes":[{"type":3,"textContent":"Sale","id":28}],"id":27}],"id":20},{"type":2,"tagName":"div","attributes":{"class":"sp"},"childNodes":[],"id":29},{"type":2,"tagName":"button","attributes":{"class":"cart","id":"cart"},"childNodes":[{"type":3,"textContent":"Cart ","id":31},{"type":2,"tagName":"span","attributes":{"class":"badge","id":"count"},"childNodes":[{"type":3,"textContent":"0","id":33}],"id":32}],"id":30}],"id":15},{"type":3,"textContent":"\n","id":34},{"type":2,"tagName":"section","attributes":{"class":"hero"},"childNodes":[{"type":2,"tagName":"h1","attributes":{},"childNodes":[{"type":3,"textContent":"Fall trail collection","id":37}],"id":36},{"type":2,"tagName":"p","attributes":{},"childNodes":[{"type":3,"textContent":"Built for mud, rain and long miles.","id":39}],"id":38}],"id":35},{"type":3,"textContent":"\n","id":40},{"type":2,"tagName":"section","attributes":{"class":"grid"},"childNodes":[{"type":3,"textContent":"\n","id":42},{"type":2,"tagName":"div","attributes":{"class":"card"},"childNodes":[{"type":2,"tagName":"div","attributes":{"class":"img i1"},"childNodes":[],"id":44},{"type":2,"tagName":"div","attributes":{"class":"body"},"childNodes":[{"type":2,"tagName":"div","attributes":{"class":"name"},"childNodes":[{"type":3,"textContent":"Trail Runner 2","id":47}],"id":46},{"type":2,"tagName":"div","attributes":{"class":"price"},"childNodes":[{"type":3,"textContent":"$148","id":49}],"id":48},{"type":2,"tagName":"button","attributes":{"class":"add","data-p":"Trail Runner 2","data-c":"148"},"childNodes":[{"type":3,"textContent":"Add to cart","id":51}],"id":50}],"id":45}],"id":43},{"type":3,"textContent":"\n","id":52},{"type":2,"tagName":"div","attributes":{"class":"card"},"childNodes":[{"type":2,"tagName":"div","attributes":{"class":"img i2"},"childNodes":[],"id":54},{"type":2,"tagName":"div","attributes":{"class":"body"},"childNodes":[{"type":2,"tagName":"div","attributes":{"class":"name"},"childNodes":[{"type":3,"textContent":"Summit Shell","id":57}],"id":56},{"type":2,"tagName":"div","attributes":{"class":"price"},"childNodes":[{"type":3,"textContent":"$229","id":59}],"id":58},{"type":2,"tagName":"button","attributes":{"class":"add","data-p":"Summit Shell","data-c":"229"},"childNodes":[{"type":3,"textContent":"Add to cart","id":61}],"id":60}],"id":55}],"id":53},{"type":3,"textContent":"\n","id":62},{"type":2,"tagName":"div","attributes":{"class":"card"},"childNodes":[{"type":2,"tagName":"div","attributes":{"class":"img i3"},"childNodes":[],"id":64},{"type":2,"tagName":"div","attributes":{"class":"body"},"childNodes":[{"type":2,"tagName":"div","attributes":{"class":"name"},"childNodes":[{"type":3,"textContent":"Ridge Pack 28L","id":67}],"id":66},{"type":2,"tagName":"div","attributes":{"class":"price"},"childNodes":[{"type":3,"textContent":"$119","id":69}],"id":68},{"type":2,"tagName":"button","attributes":{"class":"add","data-p":"Ridge Pack 28L","data-c":"119"},"childNodes":[{"type":3,"textContent":"Add to cart","id":71}],"id":70}],"id":65}],"id":63},{"type":3,"textContent":"\n","id":72},{"type":2,"tagName":"div","attributes":{"class":"card"},"childNodes":[{"type":2,"tagName":"div","attributes":{"class":"img i4"},"childNodes":[],"id":74},{"type":2,"tagName":"div","attributes":{"class":"body"},"childNodes":[{"type":2,"tagName":"div","attributes":{"class":"name"},"childNodes":[{"type":3,"textContent":"Merino Crew","id":77}],"id":76},{"type":2,"tagName":"div","attributes":{"class":"price"},"childNodes":[{"type":3,"textContent":"$68","id":79}],"id":78},{"type":2,"tagName":"button","attributes":{"class":"add","data-p":"Merino Crew","data-c":"68"},"childNodes":[{"type":3,"textContent":"Add to cart","id":81}],"id":80}],"id":75}],"id":73},{"type":3,"textContent":"\n","id":82}],"id":41},{"type":3,"textContent":"\n","id":83},{"type":2,"tagName":"aside","attributes":{"class":"drawer","id":"drawer"},"childNodes":[{"type":2,"tagName":"h2","attributes":{},"childNodes":[{"type":3,"textContent":"Your cart","id":86}],"id":85},{"type":2,"tagName":"div","attributes":{"id":"lines"},"childNodes":[],"id":87},{"type":2,"tagName":"div","attributes":{"class":"line"},"childNodes":[{"type":2,"tagName":"b","attributes":{},"childNodes":[{"type":3,"textContent":"Total","id":90}],"id":89},{"type":2,"tagName":"b","attributes":{"id":"total"},"childNodes":[{"type":3,"textContent":"$0","id":92}],"id":91}],"id":88},{"type":3,"textContent":"\n","id":93},{"type":2,"tagName":"label","attributes":{},"childNodes":[{"type":3,"textContent":"Email","id":95}],"id":94},{"type":2,"tagName":"input","attributes":{"id":"email","placeholder":"you@example.com"},"childNodes":[],"id":96},{"type":2,"tagName":"label","attributes":{},"childNodes":[{"type":3,"textContent":"Promo code","id":98}],"id":97},{"type":2,"tagName":"input","attributes":{"id":"promo","placeholder":"Optional"},"childNodes":[],"id":99},{"type":3,"textContent":"\n","id":100},{"type":2,"tagName":"button","attributes":{"class":"pay","id":"pay"},"childNodes":[{"type":3,"textContent":"Place order","id":102}],"id":101},{"type":2,"tagName":"div","attributes":{"class":"err","id":"err"},"childNodes":[{"type":3,"textContent":"Something went wrong. Please try again.","id":104}],"id":103}],"id":84},{"type":3,"textContent":"\n","id":105},{"type":2,"tagName":"script","attributes":{},"childNodes":[{"type":3,"textContent":"SCRIPT_PLACEHOLDER","id":107}],"id":106},{"type":3,"textContent":"\n","id":108}],"id":13}],"id":3}],"id":1},"initialOffset":{"left":0,"top":0}},"timestamp":1790260328004},
   {"type":3,"data":{"source":1,"positions":[{"x":640,"y":300,"id":41,"timeOffset":0}]},"timestamp":1790260328010},
+  {"type":6,"data":{"plugin":"rrweb/network@1","payload":{"requests":[{"url":"https://shop.northwind.test/collections/trail","method":"GET","initiatorType":"navigation","status":200,"startTime":0,"endTime":186,"requestHeaders":{"accept":"*/*"},"responseHeaders":{"content-type":"text/html; charset=utf-8","cache-control":"max-age=31536000"}},{"url":"https://shop.northwind.test/assets/app-4f2a.js","method":"GET","initiatorType":"script","status":200,"startTime":120,"endTime":214,"requestHeaders":{"accept":"*/*"},"responseHeaders":{"content-type":"text/javascript","cache-control":"max-age=31536000"}},{"url":"https://shop.northwind.test/assets/app-4f2a.css","method":"GET","initiatorType":"link","status":200,"startTime":122,"endTime":183,"requestHeaders":{"accept":"*/*"},"responseHeaders":{"content-type":"text/css","cache-control":"max-age=31536000"}}]}},"timestamp":1790260328190},
+  {"type":6,"data":{"plugin":"rrweb/console@1","payload":{"level":"log","trace":[],"payload":["\"[northwind] storefront ready\"","\"build 4.12.0\""]}},"timestamp":1790260328240},
+  {"type":6,"data":{"plugin":"rrweb/network@1","payload":{"requests":[{"url":"https://shop.northwind.test/api/products?collection=trail","method":"GET","initiatorType":"fetch","status":200,"startTime":300,"endTime":442,"requestHeaders":{"accept":"application/json"},"responseHeaders":{"content-type":"application/json; charset=utf-8","cache-control":"no-store"},"responseBody":"{\"products\": [{\"sku\": \"TR2\", \"name\": \"Trail Runner 2\", \"price\": 148}, {\"sku\": \"SS1\", \"name\": \"Summit Shell\", \"price\": 229}, {\"sku\": \"RP28\", \"name\": \"Ridge Pack 28L\", \"price\": 119}, {\"sku\": \"MC1\", \"name\": \"Merino Crew\", \"price\": 68}]}"}]}},"timestamp":1790260328420},
   {"type":3,"data":{"source":1,"positions":[{"x":608,"y":302,"id":54,"timeOffset":-99},{"x":357,"y":319,"id":54,"timeOffset":-35}]},"timestamp":1790260328511},
   {"type":3,"data":{"source":1,"positions":[{"x":223,"y":330,"id":44,"timeOffset":0}]},"timestamp":1790260329021},
   {"type":3,"data":{"source":1,"positions":[{"x":410,"y":330,"id":54,"timeOffset":-438},{"x":454,"y":341,"id":54,"timeOffset":-109},{"x":247,"y":433,"id":50,"timeOffset":-46}]},"timestamp":1790260329522},
@@ -17,6 +22,8 @@ export const replayDemoEvents: ReplayEvent[] = [
   {"type":3,"data":{"source":2,"type":0,"id":50,"x":182.5,"y":436.5299987792969},"timestamp":1790260329770},
   {"type":3,"data":{"source":2,"type":2,"id":50,"x":182,"y":436,"pointerType":0},"timestamp":1790260329770},
   {"type":3,"data":{"source":0,"texts":[],"attributes":[],"removes":[{"parentId":32,"id":33},{"parentId":91,"id":92}],"adds":[{"parentId":32,"nextId":null,"node":{"type":3,"textContent":"1","id":109}},{"parentId":87,"nextId":null,"node":{"type":2,"tagName":"div","attributes":{"class":"line"},"childNodes":[],"id":110}},{"parentId":110,"nextId":null,"node":{"type":2,"tagName":"span","attributes":{},"childNodes":[],"id":111}},{"parentId":111,"nextId":null,"node":{"type":3,"textContent":"$148","id":112}},{"parentId":91,"nextId":null,"node":{"type":3,"textContent":"$148","id":113}},{"parentId":110,"nextId":111,"node":{"type":2,"tagName":"span","attributes":{},"childNodes":[],"id":114}},{"parentId":114,"nextId":null,"node":{"type":3,"textContent":"Trail Runner 2","id":115}}]},"timestamp":1790260329771},
+  {"type":6,"data":{"plugin":"rrweb/network@1","payload":{"requests":[{"url":"https://shop.northwind.test/api/cart","method":"POST","initiatorType":"fetch","status":200,"startTime":2000,"endTime":2168,"requestHeaders":{"accept":"application/json","content-type":"application/json"},"responseHeaders":{"content-type":"application/json; charset=utf-8","cache-control":"no-store"},"requestBody":"{\"sku\": \"TR2\", \"qty\": 1}","responseBody":"{\"items\": 1, \"total\": 148}"}]}},"timestamp":1790260329939},
+  {"type":6,"data":{"plugin":"rrweb/console@1","payload":{"level":"info","trace":[],"payload":["\"cart: added\"","\"Trail Runner 2\""]}},"timestamp":1790260329941},
   {"type":3,"data":{"source":1,"positions":[{"x":182,"y":436,"id":50,"timeOffset":-253}]},"timestamp":1790260330023},
   {"type":5,"data":{"tag":"checkpoint","payload":{"label":"Added Trail Runner 2"}},"timestamp":1790260330279},
   {"type":3,"data":{"source":1,"positions":[{"x":223,"y":438,"id":50,"timeOffset":-243},{"x":512,"y":454,"id":60,"timeOffset":-181}]},"timestamp":1790260330524},
@@ -26,6 +33,8 @@ export const replayDemoEvents: ReplayEvent[] = [
   {"type":3,"data":{"source":2,"type":0,"id":70,"x":792.5,"y":436.5299987792969},"timestamp":1790260330663},
   {"type":3,"data":{"source":2,"type":2,"id":70,"x":792,"y":436,"pointerType":0},"timestamp":1790260330663},
   {"type":3,"data":{"source":0,"texts":[],"attributes":[],"removes":[{"parentId":32,"id":109},{"parentId":87,"id":110},{"parentId":91,"id":113}],"adds":[{"parentId":32,"nextId":null,"node":{"type":3,"textContent":"2","id":116}},{"parentId":87,"nextId":null,"node":{"type":2,"tagName":"div","attributes":{"class":"line"},"childNodes":[],"id":117}},{"parentId":117,"nextId":null,"node":{"type":2,"tagName":"span","attributes":{},"childNodes":[],"id":118}},{"parentId":118,"nextId":null,"node":{"type":3,"textContent":"$119","id":119}},{"parentId":91,"nextId":null,"node":{"type":3,"textContent":"$267","id":120}},{"parentId":87,"nextId":117,"node":{"type":2,"tagName":"div","attributes":{"class":"line"},"childNodes":[],"id":121}},{"parentId":121,"nextId":null,"node":{"type":2,"tagName":"span","attributes":{},"childNodes":[],"id":122}},{"parentId":121,"nextId":122,"node":{"type":2,"tagName":"span","attributes":{},"childNodes":[],"id":123}},{"parentId":123,"nextId":null,"node":{"type":3,"textContent":"Trail Runner 2","id":124}},{"parentId":122,"nextId":null,"node":{"type":3,"textContent":"$148","id":125}},{"parentId":117,"nextId":118,"node":{"type":2,"tagName":"span","attributes":{},"childNodes":[],"id":126}},{"parentId":126,"nextId":null,"node":{"type":3,"textContent":"Ridge Pack 28L","id":127}}]},"timestamp":1790260330664},
+  {"type":6,"data":{"plugin":"rrweb/network@1","payload":{"requests":[{"url":"https://shop.northwind.test/api/cart","method":"POST","initiatorType":"fetch","status":200,"startTime":2900,"endTime":3052,"requestHeaders":{"accept":"application/json","content-type":"application/json"},"responseHeaders":{"content-type":"application/json; charset=utf-8","cache-control":"no-store"},"requestBody":"{\"sku\": \"RP28\", \"qty\": 1}","responseBody":"{\"items\": 2, \"total\": 267}"}]}},"timestamp":1790260330816},
+  {"type":6,"data":{"plugin":"rrweb/console@1","payload":{"level":"info","trace":[],"payload":["\"cart: added\"","\"Ridge Pack 28L\""]}},"timestamp":1790260330818},
   {"type":3,"data":{"source":1,"positions":[{"x":792,"y":436,"id":70,"timeOffset":-363}]},"timestamp":1790260331025},
   {"type":3,"data":{"source":1,"positions":[{"x":815,"y":414,"id":65,"timeOffset":-249},{"x":1003,"y":234,"id":74,"timeOffset":-183},{"x":1191,"y":54,"id":15,"timeOffset":-116}]},"timestamp":1790260331526},
   {"type":3,"data":{"source":2,"type":1,"id":30,"x":1211.1400146484375,"y":31.489999771118164},"timestamp":1790260331688},
@@ -50,6 +59,8 @@ export const replayDemoEvents: ReplayEvent[] = [
   {"type":3,"data":{"source":2,"type":0,"id":99,"x":1090.5,"y":321.2099914550781},"timestamp":1790260333914},
   {"type":3,"data":{"source":2,"type":2,"id":99,"x":1090,"y":321,"pointerType":0},"timestamp":1790260333914},
   {"type":3,"data":{"source":1,"positions":[{"x":1090,"y":321,"id":99,"timeOffset":-441}]},"timestamp":1790260334354},
+  {"type":6,"data":{"plugin":"rrweb/console@1","payload":{"level":"warn","trace":["applyPromo (checkout.ts:71)","HTMLInputElement.onchange (checkout.ts:40)"],"payload":["\"[promo] `code` is deprecated; send `promoCode` instead\""]}},"timestamp":1790260334694},
+  {"type":6,"data":{"plugin":"rrweb/network@1","payload":{"requests":[{"url":"https://shop.northwind.test/api/promo/validate?code=FALL25","method":"GET","initiatorType":"fetch","status":200,"startTime":6800,"endTime":6918,"requestHeaders":{"accept":"application/json"},"responseHeaders":{"content-type":"application/json; charset=utf-8","cache-control":"no-store"},"responseBody":"{\"valid\": true, \"discount\": 0.15}"}]}},"timestamp":1790260334834},
   {"type":3,"data":{"source":1,"positions":[{"x":1090,"y":330,"id":99,"timeOffset":-193},{"x":1090,"y":401,"id":101,"timeOffset":-128}]},"timestamp":1790260334855},
   {"type":3,"data":{"source":2,"type":1,"id":101,"x":1090.5,"y":380.5},"timestamp":1790260334954},
   {"type":3,"data":{"source":5,"text":"FALL25","isChecked":false,"id":99},"timestamp":1790260334954},
@@ -59,8 +70,8 @@ export const replayDemoEvents: ReplayEvent[] = [
   {"type":3,"data":{"source":2,"type":2,"id":101,"x":1090,"y":380,"pointerType":0},"timestamp":1790260334954},
   {"type":3,"data":{"source":0,"texts":[],"attributes":[],"removes":[{"parentId":101,"id":102}],"adds":[{"parentId":101,"nextId":null,"node":{"type":3,"textContent":"Placing order…","id":128}}]},"timestamp":1790260334954},
   {"type":3,"data":{"source":1,"positions":[{"x":1090,"y":380,"id":101,"timeOffset":-402}]},"timestamp":1790260335356},
-  {"type":5,"data":{"tag":"network","payload":{"method":"POST","status":500,"url":"/api/checkout","label":"POST /api/checkout 500"}},"timestamp":1790260335855},
-  {"type":5,"data":{"tag":"error","payload":{"label":"TypeError","message":"Cannot read properties of undefined (reading 'total') at applyPromo (checkout.ts:88)"}},"timestamp":1790260335856},
+  {"type":5,"data":{"tag":"network","payload":{"method":"POST","status":500,"url":"/api/checkout","label":"POST /api/checkout 500","duration":412,"type":"fetch","requestHeaders":{"content-type":"application/json"},"requestBody":"{\"email\": \"sam@example.com\", \"promoCode\": null, \"code\": \"FALL25\", \"items\": [\"TR2\", \"RP28\"]}","responseHeaders":{"content-type":"application/json; charset=utf-8","x-request-id":"req_7Hq2c9"},"responseBody":"{\"error\": \"internal_error\", \"message\": \"Cannot read properties of undefined (reading 'total')\"}"}},"timestamp":1790260335855},
+  {"type":5,"data":{"tag":"error","payload":{"label":"TypeError","message":"Cannot read properties of undefined (reading 'total') at applyPromo (checkout.ts:88)","stack":["at applyPromo (checkout.ts:88:19)","at placeOrder (checkout.ts:132:5)","at HTMLButtonElement.onclick (checkout.ts:44:3)"]}},"timestamp":1790260335856},
   {"type":3,"data":{"source":0,"texts":[],"attributes":[{"id":103,"attributes":{"class":"err show"}}],"removes":[{"parentId":101,"id":128}],"adds":[{"parentId":101,"nextId":null,"node":{"type":3,"textContent":"Place order","id":129}}]},"timestamp":1790260335856},
   {"type":3,"data":{"source":1,"positions":[{"x":1085,"y":388,"id":101,"timeOffset":0}]},"timestamp":1790260336357},
   {"type":3,"data":{"source":1,"positions":[{"x":1050,"y":444,"id":103,"timeOffset":-441}]},"timestamp":1790260336859},