@obsrviq/player

The Obsrviq session-replay player — STRATA, a timeline-first debugging cockpit built on rrweb's Replayer. It inverts the usual replay layout: instead of a viewport + a column of DevTools tabs + a thin seekbar, time is the hero — a full-width, zoomable, multi-lane timeline is the spine, the replay is a letterboxed program monitor, and one playhead crosses everything on a single clock. (Design rationale + the full spec: docs/REPLAY_REDESIGN.md.)

npm install @obsrviq/player

import { ReplayPlayer } from '@obsrviq/player';
import '@obsrviq/player/styles.css';

<ReplayPlayer
  sessionId="…"
  apiBaseUrl="https://api.yourapp.com"
  token={consoleJwt}          // or apiKey="sk_live_…"
  startAtMs={42000}
  startMode="balanced"        // 'balanced' | 'stage' | 'debug'
  onEnded={() => {}}
  theme={{ '--lum-accent': '#10b981' }}
  embedded
/>

Give it a sized container (≥560px tall recommended for the full multi-lane view; it gracefully collapses to a single Signal Ribbon at very small sizes).

The cockpit

• Multi-lane timeline (the spine): Chapters · Interactions · Console · Network (a real mini-waterfall — bar position = start, width = duration) · Errors · Vitals — one shared x-axis, one iris playhead, brush-to-zoom + a breadcrumb zoom-stack, glyph clustering, and idle compression. Each lane is independently focusable, with solo / mute / collapse.
• Stage as a program monitor: the rrweb replay, letterboxed and framed, following the playhead.
• Selection-driven Inspector (replaces the 7-tab column): click any lane glyph or feed row → it populates one Inspector — Network detail (Headers / Payload / Response / Timing, privacy-gated), error stacks (+ Rewind 5s), DOM inspector, State diff — plus a persistent Unified Feed (the interleaved "story of the session") shown when nothing is selected.
• Navigate by meaning: a ⌘K command palette ("next 5xx", "next rage", "the conversion"), a Next-Problem key (N), and an AI synopsis whose claims are seek-chips.
• Focus modes: T Stage focus, D Debug focus, Balanced default — re-weight the cockpit for a PM demo vs. an engineer's deep-debug.

Capabilities (all preserved)

Play/pause/seek/variable speed (0.5–8×)/skip-idle/loop/fullscreen; full network request detail; error stacks; DOM inspector; click-to-seek from any glyph, feed row, chapter, chip, or palette result; keyboard shortcuts (press ?); a proper role="slider" scrubber on the ruler (and the Signal Ribbon at small sizes) with humanized aria-valuetext, focusable lanes, focus rings, and full prefers-reduced-motion handling.

Also exports createPlayerStore, usePlayer, loadSession, deriveMarkers, and the STRATA selectors (selectNextProblem, selectLanes, …) for custom integrations.