@brett_lamy/docstream 1.22.0 → 1.23.0

package/src/replay/ReplayPlayer.tsx

@@ -2,7 +2,8 @@
    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, 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
+   in the top bar with what had been logged and requested by the playhead, which open a DevTools panel over the page,
+   and inspections (inspections.ts) that open it on a request or message as playback reaches them. 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
@@ -18,6 +19,7 @@ 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 { getReplayInspections, replayInspectionAt, resolveReplayInspections, type ReplayInspection } from './inspections'
 import { getReplayMarkers, getReplayMeta, getReplayPointerTrack, replayPointerAt } from './markers'
 import type { ReplayMarker, ReplayMarkerKind, ReplayPointerTrack } from './markers'
 import type { ReplayStageHandle } from './stage-types'
@@ -36,6 +38,8 @@ export interface ReplayPreviewHandle {
   seek(ms: number): void
   toggle(): void
   getCurrentTime(): number
+  /** Jump to an inspection (by its id) and open DevTools on what it found. */
+  inspect(id: string): void
 }
 
 /** Options shared by every `ReplayPreview` (an `events` player or a `source` embed). */
@@ -63,11 +67,17 @@ export interface ReplayPlayerOptions {
   /** 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 panel cut at the playhead, shown when the recording has console messages, requests or inspections.
+   *  `disableDevtools` removes them, the panel and the inspections. */
+  disableDevtools?: boolean
+  /** @deprecated Use `disableDevtools`. `false` is the same as `disableDevtools`. */
   devtools?: boolean
   /** Open the DevTools panel on this tab at mount. */
   defaultDevtoolsTab?: ReplayDevtoolsTab
+  /** Moments where a request or console message was inspected. As playback reaches one, DevTools opens on its
+   *  tab with that request or message selected and the label above it; playback doesn't stop. Added to the
+   *  recording's own `inspect` custom events, and to the rail as checkpoints. */
+  inspections?: ReplayInspection[]
   /** 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
@@ -98,7 +108,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, devtools = true, defaultDevtoolsTab, fit = 'width', poster, lazy = true, playerRef, onTimeUpdate, onPlayingChange, onMarkerPress,
+  cursor = true, disableDevtools = false, devtools = true, defaultDevtoolsTab, inspections, fit = 'width', poster, lazy = true, playerRef, onTimeUpdate, onPlayingChange, onMarkerPress,
   className, style,
 }: ReplayPlayerOptions & { events: ReplayEvent[] }) {
   const rootRef = useRef<HTMLDivElement>(null)
@@ -107,14 +117,26 @@ export function ReplayPlayer({
   const meta = useMemo(() => getReplayMeta(events), [events])
   const track = useMemo(() => getReplayPointerTrack(events), [events])
   const recorded = useMemo(() => getReplayMarkers(events), [events])
-  const shown = useMemo(() => {
-    const list = Array.isArray(markers) ? markers : markers ? recorded : []
-    return markerKinds ? list.filter((m) => markerKinds.includes(m.kind)) : list
-  }, [markers, recorded, markerKinds])
 
+  const toolsOn = devtools && !disableDevtools
   const tools = useMemo(() => getReplayDevtools(events), [events])
-  const showTools = devtools && (tools.console.length > 0 || tools.network.length > 0)
+  const resolved = useMemo(
+    () => (toolsOn ? resolveReplayInspections([...getReplayInspections(events), ...(inspections ?? [])], tools) : []),
+    [toolsOn, events, inspections, tools],
+  )
+  const showTools = toolsOn && (tools.console.length > 0 || tools.network.length > 0 || resolved.length > 0)
   const [panel, setPanel] = useState<ReplayDevtoolsTab | null>(defaultDevtoolsTab ?? null)
+  // Whether an inspection (rather than a press) opened the panel: it then leaves focus where it was.
+  const [autoOpened, setAutoOpened] = useState(false)
+
+  const shown = useMemo(() => {
+    // Inspections from the prop join the rail as checkpoints (the recording's own are already among `recorded`).
+    const own: ReplayMarker[] = toolsOn ? (inspections ?? []).map((inspection, i) => ({
+      id: `inspection-${i}`, kind: 'custom', time: Math.max(0, inspection.time), label: inspection.label ?? 'Inspected',
+    })) : []
+    const list = Array.isArray(markers) ? markers : markers ? [...recorded, ...own].sort((a, b) => a.time - b.time) : []
+    return markerKinds ? list.filter((m) => markerKinds.includes(m.kind)) : list
+  }, [markers, recorded, markerKinds, inspections, toolsOn])
 
   const [visible, setVisible] = useState(!lazy)
   const [ready, setReady] = useState(false)
@@ -151,12 +173,22 @@ export function ReplayPlayer({
     return () => clearTimeout(timer)
   }, [ready, reduced])
 
+  const resolvedRef = useRef(resolved)
+  resolvedRef.current = resolved
   const handle = useMemo<ReplayPreviewHandle>(() => ({
     play: (offset) => { setFinished(false); stage.current?.play(offset) },
     pause: (offset) => stage.current?.pause(offset),
     seek: (ms) => { setFinished(false); stage.current?.seek(ms) },
     toggle: () => { setFinished(false); stage.current?.toggle() },
     getCurrentTime: () => stage.current?.getCurrentTime() ?? 0,
+    inspect: (id) => {
+      const inspection = resolvedRef.current.find((x) => x.id === id)
+      if (!inspection) return
+      setFinished(false)
+      stage.current?.seek(inspection.time)
+      setPanel(inspection.tab)
+      setAutoOpened(false)
+    },
   }), [])
   useImperativeHandle(playerRef, () => handle, [handle])
 
@@ -209,7 +241,23 @@ export function ReplayPlayer({
   }, [url, meta.href, recorded, time])
 
   const toolsState = useMemo(() => replayDevtoolsAt(tools, time), [tools, time])
-  const openTools = (tab: ReplayDevtoolsTab) => setPanel((p) => (p === tab ? null : tab))
+  const openTools = (tab: ReplayDevtoolsTab) => { setAutoOpened(false); setPanel((p) => (p === tab ? null : tab)) }
+
+  // Inspect mode: the inspection at the playhead opens DevTools on what it found. Only a change of inspection does
+  // (closing the panel keeps it closed until the next one); scrubbing back before the first closes what it opened.
+  const inspection = showTools ? replayInspectionAt(resolved, time) : undefined
+  const inspectionId = inspection?.id
+  const inspectionTab = inspection?.tab
+  const lastInspection = useRef<string | undefined>(undefined)
+  useEffect(() => {
+    if (inspectionId === lastInspection.current) return
+    const had = lastInspection.current
+    lastInspection.current = inspectionId
+    if (inspectionTab) {
+      setPanel(inspectionTab)
+      setAutoOpened(true)
+    } else if (had !== undefined && autoOpened) setPanel(null)
+  }, [inspectionId, inspectionTab, autoOpened])
   const toolButtons = showTools ? <DevtoolsButtons state={toolsState} open={panel} onOpen={openTools} /> : null
 
   const w = meta.width || 1280
@@ -269,11 +317,12 @@ export function ReplayPlayer({
         {showTools && panel ? (
           <DevtoolsPanel
             state={toolsState}
-            at={time}
             tab={panel}
             onTab={setPanel}
             onClose={() => { setPanel(null); rootRef.current?.focus({ preventScroll: true }) }}
             onSeek={(ms) => handle.seek(ms)}
+            inspection={inspection}
+            autoFocus={!autoOpened}
           />
         ) : null}
 

package/src/replay/devtools.ts

@@ -17,6 +17,8 @@ export type ReplayConsoleLevel = 'log' | 'info' | 'warn' | 'error' | 'debug'
 export interface ReplayConsoleEntry {
   /** Stable id (`console-<n>`). */
   id: string
+  /** The recording's own id for the message (`payload.id` of a custom event), which an inspection can name. */
+  key?: string
   /** Milliseconds from the start of the recording. */
   time: number
   level: ReplayConsoleLevel
@@ -33,6 +35,9 @@ export interface ReplayConsoleEntry {
 export interface ReplayRequest {
   /** Stable id (`request-<n>`). */
   id: string
+  /** The recording's own id for the request (`id` / `requestId`, e.g. a Replay request id), which an
+   *  inspection can name. */
+  key?: string
   /** When the request was sent, in ms from the start of the recording. */
   time: number
   /** How long it took, when known: the response arrived at `time + duration`. */
@@ -153,6 +158,7 @@ export function getReplayDevtools(events: readonly ReplayEvent[]): ReplayDevtool
     // request was sent that far before it (its own duration, for a lone request).
     const sent = Math.max(0, startTime !== undefined && batchEnd !== undefined ? at - (batchEnd - startTime) : at - (duration ?? 0))
     requests.push({
+      key: str(raw.requestId) ?? str(raw.id),
       time: sent,
       duration,
       method: (str(raw.method) ?? 'GET').toUpperCase(),
@@ -197,10 +203,10 @@ export function getReplayDevtools(events: readonly ReplayEvent[]): ReplayDevtool
         const detail = str(payload.message) ?? str(payload.detail)
         const message = detail ? `Uncaught ${label}: ${detail}` : `Uncaught ${label}`
         const trace = Array.isArray(payload.stack) ? payload.stack.map(String) : str(payload.stack)?.split('\n').map((l) => l.trim()).filter(Boolean)
-        consoleEntries.push({ time, level: 'error', message, args: [message], trace: trace?.length ? trace : undefined, source: 'exception' })
+        consoleEntries.push({ key: str(payload.id), time, level: 'error', message, args: [message], trace: trace?.length ? trace : undefined, source: 'exception' })
       } else if (CONSOLE_TAGS.has(tag)) {
         const args = Array.isArray(payload.args) ? payload.args.map((a) => asText(a) ?? '') : [str(payload.message) ?? str(payload.label) ?? asText(payload.detail) ?? '']
-        consoleEntries.push({ time, level: levelOf(payload.level ?? tag), message: args.join(' '), args, source: 'custom' })
+        consoleEntries.push({ key: str(payload.id), time, level: levelOf(payload.level ?? tag), message: args.join(' '), args, source: 'custom' })
       }
     }
   }

package/src/replay/index.ts

@@ -18,6 +18,8 @@ export type { ReplayMarker, ReplayMarkerKind, ReplayMeta, ReplayPointerPoint, Re
 export { getReplayDevtools, replayDevtoolsAt, requestName } from './devtools';
 export type { ReplayConsoleEntry, ReplayConsoleLevel, ReplayDevtools, ReplayDevtoolsState, ReplayRequest } from './devtools';
 export type { ReplayDevtoolsTab } from './ReplayDevtools';
+export { getReplayInspections, replayInspectionAt, resolveReplayInspections } from './inspections';
+export type { ReplayInspection, ReplayInspectionTab, ResolvedReplayInspection } from './inspections';
 export { ReplayEventType, ReplayIncrementalSource, ReplayMouseInteraction } from './types';
 export type { ReplayEvent } from './types';
 export { isReplayQaUrl, normalizeReplayEmbedUrl } from './url';

package/src/replay/inspections.ts

@@ -0,0 +1,105 @@
+/* Inspections: moments in a recording where someone (a person, a debugging agent) looked at a request or a console
+   message — "at 0:35 we inspected GET /api/search?q=te". The player follows them by default: as the playhead
+   reaches one, DevTools opens on its tab with that request (or message) selected and the inspection's label above
+   it, and playback carries on.
+
+   They come from the `inspections` prop or from the recording itself, as custom events tagged `inspect`
+   (`record.addCustomEvent('inspect', { tab, request, message, label })`), so an .rrweb file can carry its own.
+   An inspection names its target by the recording's id for it (a request's `requestId` / `id`, a custom console
+   event's `id`) or, failing that, by URL (the request with that URL sent nearest the inspection) or by text (the
+   last message containing it). Pure readers, no rrweb import. */
+import type { ReplayConsoleEntry, ReplayDevtools, ReplayRequest } from './devtools'
+import { ReplayEventType, type ReplayEvent } from './types'
+
+export type ReplayInspectionTab = 'network' | 'console'
+
+export interface ReplayInspection {
+  /** Stable id; defaults to `inspect-<n>`. */
+  id?: string
+  /** Milliseconds from the start of the recording. */
+  time: number
+  /** The DevTools tab to open (default: `network` when `request` is set, else `console`). */
+  tab?: ReplayInspectionTab
+  /** The request to select: the recording's id for it (`key`), or its URL. */
+  request?: string
+  /** The console message to select: the recording's id for it (`key`), or text it contains. */
+  message?: string
+  /** What was found, shown above the panel while the inspection is current. */
+  label?: string
+}
+
+/** An inspection with its defaults filled in and its target resolved against the recording's DevTools. */
+export interface ResolvedReplayInspection {
+  id: string
+  time: number
+  tab: ReplayInspectionTab
+  label?: string
+  /** The `ReplayRequest.id` to select, when the target was found. */
+  requestId?: string
+  /** The `ReplayConsoleEntry.id` to select, when the target was found. */
+  messageId?: string
+}
+
+export const INSPECT_TAG = 'inspect'
+
+const str = (value: unknown): string | undefined => (typeof value === 'string' && value ? value : undefined)
+
+/** The `inspect` custom events in a recording, as inspections (times in ms from its first event). */
+export function getReplayInspections(events: readonly ReplayEvent[]): ReplayInspection[] {
+  const list = [...events].sort((a, b) => a.timestamp - b.timestamp)
+  const start = list[0]?.timestamp ?? 0
+  const out: ReplayInspection[] = []
+  for (const event of list) {
+    if (event.type !== ReplayEventType.Custom) continue
+    const data = (event.data ?? {}) as { tag?: unknown; payload?: Record<string, unknown> }
+    if (data.tag !== INSPECT_TAG) continue
+    const p = data.payload ?? {}
+    const tab = p.tab === 'network' || p.tab === 'console' ? p.tab : undefined
+    out.push({ id: str(p.id), time: event.timestamp - start, tab, request: str(p.request), message: str(p.message), label: str(p.label) })
+  }
+  return out
+}
+
+function findRequest(network: readonly ReplayRequest[], target: string, time: number): ReplayRequest | undefined {
+  const byKey = network.find((r) => r.key === target)
+  if (byKey) return byKey
+  // By URL (exact, else the address without its origin): the one sent nearest the inspection.
+  const matches = network.filter((r) => r.url === target || r.url.replace(/^\w+:\/\/[^/]+/, '') === target)
+  return matches.sort((a, b) => Math.abs(a.time - time) - Math.abs(b.time - time))[0]
+}
+
+function findMessage(messages: readonly ReplayConsoleEntry[], target: string, time: number): ReplayConsoleEntry | undefined {
+  const byKey = messages.find((m) => m.key === target)
+  if (byKey) return byKey
+  const matches = messages.filter((m) => m.message.includes(target))
+  // The last one logged by the inspection, else the first after it.
+  return matches.filter((m) => m.time <= time).at(-1) ?? matches[0]
+}
+
+/** Fills in each inspection's id and tab and finds its request or message; sorted by time. */
+export function resolveReplayInspections(inspections: readonly ReplayInspection[], tools: ReplayDevtools): ResolvedReplayInspection[] {
+  return inspections
+    .map((inspection, i) => {
+      const request = inspection.request ? findRequest(tools.network, inspection.request, inspection.time) : undefined
+      const message = inspection.message ? findMessage(tools.console, inspection.message, inspection.time) : undefined
+      return {
+        id: inspection.id ?? `inspect-${i}`,
+        time: Math.max(0, inspection.time),
+        tab: inspection.tab ?? (inspection.request ? 'network' : 'console'),
+        label: inspection.label,
+        requestId: request?.id,
+        messageId: message?.id,
+      } satisfies ResolvedReplayInspection
+    })
+    .sort((a, b) => a.time - b.time)
+}
+
+/** The inspection current at `time`: the latest at or before it. */
+export function replayInspectionAt(inspections: readonly ResolvedReplayInspection[], time: number): ResolvedReplayInspection | undefined {
+  let current: ResolvedReplayInspection | undefined
+  for (const inspection of inspections) {
+    if (inspection.time > time) break
+    current = inspection
+  }
+  return current
+}

package/src/styles.css

@@ -4440,6 +4440,14 @@
 /* ── Replay DevTools: the Console / Network buttons in the top bar and the panel over the page ──
    Chrome's DevTools, in the player's tokens. Failed requests and errors read --destructive, warnings --warning. */
 @layer docstream.replay {
+  /* Text tones that keep 4.5:1 on the card in light and dark: the theme's muted, red and amber, pulled toward the
+     foreground (a theme's own --muted-foreground or --destructive is often tuned for larger text). */
+  :where([data-slot="replay-preview"]) {
+    --replay-devtools-dim: color-mix(in srgb, var(--foreground, #18181b) 68%, var(--card, #ffffff));
+    --replay-devtools-red: color-mix(in srgb, var(--destructive, #dc2626) 74%, var(--foreground, #18181b));
+    --replay-devtools-amber: color-mix(in srgb, var(--warning, #b45309) 56%, var(--foreground, #18181b));
+  }
+
   :where([data-slot="replay-preview-actions"]) {
     display: flex;
     flex-shrink: 0;
@@ -4465,7 +4473,7 @@
     outline: none;
     cursor: pointer;
     appearance: none;
-    color: var(--muted-foreground, #71717a);
+    color: var(--replay-devtools-dim);
     background: transparent;
     font: inherit;
     font-size: 11.5px;
@@ -4489,12 +4497,12 @@
   }
 
   :where([data-slot="replay-preview"] [data-part="failed"]) {
-    color: var(--destructive, #dc2626);
+    color: var(--replay-devtools-red);
     font-weight: 600;
   }
 
   :where([data-slot="replay-preview"] [data-part="warn"]) {
-    color: var(--warning, #b45309);
+    color: var(--replay-devtools-amber);
     font-weight: 600;
   }
 
@@ -4549,7 +4557,7 @@
     outline: none;
     cursor: pointer;
     appearance: none;
-    color: var(--muted-foreground, #71717a);
+    color: var(--replay-devtools-dim);
     background: transparent;
     font: inherit;
   }
@@ -4563,19 +4571,47 @@
     box-shadow: inset 0 0 0 2px var(--ring, #6366f1);
   }
 
-  :where([data-slot="replay-devtools-tabs"] [data-part="at"]) {
+  :where([data-slot="replay-devtools-tablist"]) {
+    display: flex;
+    align-items: stretch;
+  }
+
+  :where([data-slot="replay-devtools-tablist"] > button) {
     display: inline-flex;
     align-items: center;
-    margin-inline-start: auto;
-    padding-inline: 8px;
-    color: var(--muted-foreground, #71717a);
-    font-variant-numeric: tabular-nums;
+    gap: 5px;
+    margin: 0;
+    padding: 0 10px;
+    border: 0;
+    border-bottom: 2px solid transparent;
+    outline: none;
+    cursor: pointer;
+    appearance: none;
+    color: var(--replay-devtools-dim);
+    background: transparent;
+    font: inherit;
   }
 
+  :where([data-slot="replay-devtools-tablist"] > button[aria-selected="true"]) {
+    color: var(--foreground, #18181b);
+    border-bottom-color: var(--primary, #2563eb);
+  }
+
+  :where([data-slot="replay-devtools-tablist"] > button:focus-visible) {
+    box-shadow: inset 0 0 0 2px var(--ring, #6366f1);
+  }
+
+
+
+
   :where([data-slot="replay-devtools-tabs"] > [data-slot="replay-devtools-close"], [data-slot="replay-devtools-detail-tabs"] > [data-slot="replay-devtools-close"]) {
     padding: 0 8px;
   }
 
+  :where([data-slot="replay-devtools-tabs"] > [data-slot="replay-devtools-close"]) {
+    margin-inline-start: auto;
+  }
+
   :where([data-slot="replay-devtools-pane"]) {
     display: flex;
     flex: 1 1 0%;
@@ -4635,7 +4671,7 @@
     outline: none;
     cursor: pointer;
     appearance: none;
-    color: var(--muted-foreground, #71717a);
+    color: var(--replay-devtools-dim);
     background: transparent;
     font: inherit;
   }
@@ -4669,19 +4705,19 @@
   }
 
   :where([data-slot="replay-devtools-message"][data-level="warn"]) {
-    color: color-mix(in srgb, var(--warning, #b45309) 80%, var(--foreground, #18181b));
+    color: var(--replay-devtools-amber);
     background: color-mix(in srgb, var(--warning, #f59e0b) 10%, transparent);
     border-bottom-color: color-mix(in srgb, var(--warning, #f59e0b) 25%, transparent);
   }
 
   :where([data-slot="replay-devtools-message"][data-level="error"]) {
-    color: var(--destructive, #dc2626);
+    color: var(--replay-devtools-red);
     background: color-mix(in srgb, var(--destructive, #dc2626) 8%, transparent);
     border-bottom-color: color-mix(in srgb, var(--destructive, #dc2626) 22%, transparent);
   }
 
   :where([data-slot="replay-devtools-message"][data-level="debug"]) {
-    color: var(--muted-foreground, #71717a);
+    color: var(--replay-devtools-dim);
   }
 
   :where([data-slot="replay-devtools-message"] > details, [data-slot="replay-devtools-message"] > [data-part="line"]) {
@@ -4737,7 +4773,7 @@
     outline: none;
     cursor: pointer;
     appearance: none;
-    color: var(--muted-foreground, #71717a);
+    color: var(--replay-devtools-dim);
     background: transparent;
     font: inherit;
     font-variant-numeric: tabular-nums;
@@ -4756,7 +4792,7 @@
   :where([data-slot="replay-devtools-empty"], [data-slot="replay-devtools-later"]) {
     margin: 0;
     padding: 10px 12px;
-    color: var(--muted-foreground, #71717a);
+    color: var(--replay-devtools-dim);
   }
 
   :where([data-slot="replay-devtools-later"]) {
@@ -4796,7 +4832,7 @@
     height: 22px;
     padding: 0 8px;
     border-bottom: 1px solid var(--border, #e4e4e7);
-    color: var(--muted-foreground, #71717a);
+    color: var(--replay-devtools-dim);
     background: var(--card, #ffffff);
     font-weight: 500;
     text-align: start;
@@ -4844,13 +4880,18 @@
   :where([data-slot="replay-devtools-table"] tbody tr:focus-visible) {
     box-shadow: inset 0 0 0 2px var(--ring, #6366f1);
   }
+  /* The inspected request or message: a bar down its leading edge (the selection tint shows it's open). */
+  :where([data-slot="replay-devtools-table"] tbody tr[data-inspected], [data-slot="replay-devtools-message"][data-inspected]) {
+    box-shadow: inset 3px 0 0 var(--primary, #2563eb);
+  }
+
 
   :where([data-slot="replay-devtools-table"] tr[data-failed]) {
-    color: var(--destructive, #dc2626);
+    color: var(--replay-devtools-red);
   }
 
   :where([data-slot="replay-devtools-table"] tr[data-pending]) {
-    color: var(--muted-foreground, #71717a);
+    color: var(--replay-devtools-dim);
   }
 
   :where([data-slot="replay-devtools-table"] td[data-col="waterfall"]) {
@@ -4871,7 +4912,7 @@
   }
 
   :where([data-slot="replay-devtools-table"] tr[data-pending] [data-part="bar"]) {
-    background: color-mix(in srgb, var(--muted-foreground, #71717a) 50%, transparent);
+    background: color-mix(in srgb, var(--replay-devtools-dim) 50%, transparent);
   }
 
   :where([data-slot="replay-devtools-status"]) {
@@ -4882,7 +4923,7 @@
     height: 22px;
     padding: 0 8px;
     border-top: 1px solid var(--border, #e4e4e7);
-    color: var(--muted-foreground, #71717a);
+    color: var(--replay-devtools-dim);
     font-variant-numeric: tabular-nums;
   }
 
@@ -4939,7 +4980,7 @@
   :where([data-slot="replay-devtools-section"] dt) {
     flex-shrink: 0;
     min-width: 130px;
-    color: var(--muted-foreground, #71717a);
+    color: var(--replay-devtools-dim);
   }
 
   :where([data-slot="replay-devtools-section"] dd) {