diff --git a/packages/dashboard/src/dashboard.tsx b/packages/dashboard/src/dashboard.tsx
index c2f1e643eaf25..27e966c1973ed 100644
--- a/packages/dashboard/src/dashboard.tsx
+++ b/packages/dashboard/src/dashboard.tsx
@@ -19,6 +19,9 @@ import './dashboard.css';
 import { ChevronLeftIcon, ChevronRightIcon, LockIcon, LockOpenIcon, ReloadIcon, ScreenshotRegionIcon } from './icons';
 import { clientToViewport, getImageLayout } from './imageLayout';
 import { Recording } from './recording';
+import { HistoryPlayer } from './historyPlayer';
+import type { HistoryPlayback } from './historyPlayback';
+import { HistoryScrubber } from './historyScrubber';
 import { AnnotateSidebar, AnnotateOverlay } from './annotateView';
 
 import { ToolbarButton } from '@web/components/toolbarButton';
@@ -66,7 +69,7 @@ export const Dashboard: React.FC<DashboardProps> = ({ model }) => {
   const [, setRevision] = React.useState(0);
   React.useEffect(() => model.subscribe(() => setRevision(r => r + 1)), [model]);
 
-  const { tabs, mode, recording, liveFrame, annotateSession, pendingCapture } = model.state;
+  const { tabs, mode, recording, liveFrame, annotateSession, pendingCapture, history } = model.state;
   const interactive = mode === 'interactive';
   const annotateActive = !!annotateSession;
   const selectedFrame = annotateSession?.frames.find(f => f.id === annotateSession.selectedFrameId) ?? null;
@@ -79,6 +82,8 @@ export const Dashboard: React.FC<DashboardProps> = ({ model }) => {
   const viewportMainRef = React.useRef<HTMLDivElement>(null);
   const browserChromeRef = React.useRef<HTMLDivElement>(null);
   const interactiveBtnRef = React.useRef<HTMLButtonElement>(null);
+  const historyVideoRef = React.useRef<HTMLVideoElement>(null);
+  const historyPlaybackRef = React.useRef<HistoryPlayback | null>(null);
   const moveThrottleRef = React.useRef(0);
 
   const aspect = liveFrame && liveFrame.viewportWidth && liveFrame.viewportHeight
@@ -259,7 +264,9 @@ export const Dashboard: React.FC<DashboardProps> = ({ model }) => {
             title={annotateActive ? 'Add screenshot' : 'Take screenshot'}
             disabled={!ready || pendingCapture}
             onClick={() => {
-              if (annotateActive)
+              if (history.scrubMode)
+                void model.addHistoryAnnotateFrame(historyVideoRef.current);
+              else if (annotateActive)
                 model.addAnnotateFrame();
               else
                 model.enterAnnotate('user');
@@ -368,6 +375,8 @@ export const Dashboard: React.FC<DashboardProps> = ({ model }) => {
                 />
               </div>
               {overlayText && <div className={'screen-overlay' + (liveFrame ? ' has-frame' : '')}><span>{overlayText}</span></div>}
+              {history.scrubMode && <HistoryPlayer videoRef={historyVideoRef} playbackRef={historyPlaybackRef} model={model} time={history.scrubTime} />}
+              {history.enabled && <HistoryScrubber model={model} history={history} videoRef={historyVideoRef} playbackRef={historyPlaybackRef} />}
             </div>
           </div>
         </div>
diff --git a/packages/dashboard/src/dashboardChannel.ts b/packages/dashboard/src/dashboardChannel.ts
index b09fc47e66e20..2106eb2bf8e37 100644
--- a/packages/dashboard/src/dashboardChannel.ts
+++ b/packages/dashboard/src/dashboardChannel.ts
@@ -34,21 +34,39 @@ export type AnnotationData = { x: number; y: number; width: number; height: numb
 
 export type SubmittedAnnotationFrame = {
   data: string;
-  ariaSnapshot: string;
+  ariaSnapshot?: string;
   annotations: AnnotationData[];
-  sessionTitle: string;
-  title: string;
-  url: string;
+  sessionTitle?: string;
+  title?: string;
+  url?: string;
   viewportWidth: number;
   viewportHeight: number;
+  timestamp: number;
+};
+
+export type HistorySnapshot =
+  | { enabled: false }
+  | { enabled: true; init: string };
+
+// Cluster manifest entry shipped per cluster. Coverage end is derived
+// on the frontend as `clusters[idx+1]?.startWallMs ?? Date.now()` —
+// the live cluster grows up to "now" as frames are written.
+export type HistoryCluster = {
+  // Wallclock ms of this cluster's first frame.
+  startWallMs: number;
+  // Byte position of the cluster's first byte within the recorder webm.
+  fileOffset: number;
+  byteLen: number;
 };
 
 export type DashboardChannelEvents = {
   sessions: { sessions: SessionStatus[]; clientInfo: ClientInfo };
   tabs: { tabs: Tab[] };
-  frame: { data: string; viewportWidth: number; viewportHeight: number };
+  frame: { data: string; viewportWidth: number; viewportHeight: number; timestamp: number };
   annotate: {};
   cancelAnnotate: {};
+  history: HistorySnapshot;
+  historyCluster: HistoryCluster;
 };
 
 export type MouseButton = 'left' | 'middle' | 'right';
@@ -73,6 +91,7 @@ export interface DashboardChannel {
   startRecording(): Promise<void>;
   stopRecording(): Promise<{ streamId: string }>;
   readStream(params: { streamId: string }): Promise<{ data: string; eof: boolean }>;
+  recorderReadBytes(params: { offset: number; length: number }): Promise<{ data: string }>;
   screenshot(): Promise<{ data: string; viewportWidth: number; viewportHeight: number; ariaSnapshot: string }>;
   submitAnnotation(params: { frames: SubmittedAnnotationFrame[]; feedback: string }): Promise<void>;
   cancelAnnotation(): Promise<void>;
diff --git a/packages/dashboard/src/dashboardModel.ts b/packages/dashboard/src/dashboardModel.ts
index 30f4c38bf04b9..67471ef28be68 100644
--- a/packages/dashboard/src/dashboardModel.ts
+++ b/packages/dashboard/src/dashboardModel.ts
@@ -16,9 +16,10 @@
 
 import { buildAnnotatedImage, saveAnnotationAsDownload } from './annotationImage';
 import { buildAnnotationZip } from './annotationZip';
+import { captureVideoFrameAsPng } from './historyPlayback';
 
 import type { Annotation } from './annotations';
-import type { DashboardChannel, DashboardChannelEvents, MouseButton, SessionStatus, SubmittedAnnotationFrame, Tab } from './dashboardChannel';
+import type { DashboardChannel, DashboardChannelEvents, HistoryCluster, HistorySnapshot, MouseButton, SessionStatus, SubmittedAnnotationFrame, Tab } from './dashboardChannel';
 import type { ClientInfo } from '../../playwright-core/src/tools/cli-client/registry';
 import type { BrowserDescriptor } from '../../playwright-core/src/serverRegistry';
 
@@ -35,10 +36,13 @@ export type AnnotateFrame = {
   data: string;
   viewportWidth: number;
   viewportHeight: number;
-  ariaSnapshot: string;
-  sessionTitle: string;
-  title: string;
-  url: string;
+  // Wall-clock ms since epoch — same coordinate space as live frame
+  // timestamps, so live and historical frames are directly comparable.
+  timestamp: number;
+  ariaSnapshot?: string;
+  sessionTitle?: string;
+  title?: string;
+  url?: string;
   annotations: Annotation[];
 };
 
@@ -50,6 +54,28 @@ export type AnnotateSession = {
   feedback: string;
 };
 
+export type HistoryState = {
+  enabled: boolean;
+  // True when the user is in scrub mode (history player visible).
+  scrubMode: boolean;
+  // Currently scrubbed time, in wall-clock ms.
+  scrubTime: number;
+  // While scrubbing, the bar's right edge is frozen here so the cursor
+  // doesn't drift left as the wall clock keeps advancing.
+  // null = use the live edge.
+  scrubFrozenEndMs: number | null;
+  // Cluster manifest pushed by the daemon. Each entry describes a
+  // wallclock start and an exact byte range in the webm, so the frontend
+  // knows precisely what's available and where to fetch it from. Reset
+  // on every `history` event; rebuilt from subsequent `historyCluster`
+  // events.
+  clusters: HistoryCluster[];
+  // Webm init segment bytes for the current recording, decoded once
+  // from the base64 in the `history` event. null when no recording is
+  // active. The MSE pipeline appends this verbatim before any cluster.
+  init: Uint8Array | null;
+};
+
 export type DashboardState = {
   // Session model state.
   sessions: SessionStatus[];
@@ -62,6 +88,7 @@ export type DashboardState = {
   pendingCapture: boolean;
   mode: Mode;
   recording: RecordingState | null;
+  history: HistoryState;
 };
 
 type Listener = () => void;
@@ -76,8 +103,26 @@ const initialState: DashboardState = {
   pendingCapture: false,
   mode: 'readonly',
   recording: null,
+  history: { enabled: false, scrubMode: false, scrubTime: 0, scrubFrozenEndMs: null, clusters: [], init: null },
 };
 
+// Returns the wall-clock range visible to the history scrubber. `startMs` is
+// the first cluster's wallclock; `endMs` is the frozen scrub-entry time while
+// scrubbing (so the cursor doesn't drift as wall-clock advances), or the
+// live edge otherwise (max of latest frame and wall clock now).
+export function historyTimeRange(history: HistoryState, liveFrame: { timestamp: number } | undefined): { startMs: number; endMs: number } {
+  const liveEdge = Math.max(liveFrame?.timestamp ?? 0, Date.now());
+  const end = history.scrubFrozenEndMs ?? liveEdge;
+  const start = history.clusters[0]?.startWallMs ?? end;
+  return { startMs: start, endMs: Math.max(start, end) };
+}
+
+function clamp(v: number, min: number, max: number): number {
+  if (max < min)
+    return min;
+  return Math.min(Math.max(v, min), max);
+}
+
 export class DashboardModel {
   state: DashboardState = initialState;
 
@@ -86,6 +131,7 @@ export class DashboardModel {
   // Monotonic token to invalidate in-flight screenshot requests when
   // pendingAnnotate is cleared or replaced.
   private _requestId = 0;
+  private _bytesCache = new Map<number, Promise<Uint8Array>>();
 
   constructor(client: DashboardChannel) {
     this._client = client;
@@ -94,6 +140,76 @@ export class DashboardModel {
     client.on('frame', params => this._emit({ liveFrame: params }));
     client.on('annotate', () => this.enterAnnotate('cli'));
     client.on('cancelAnnotate', () => this.cancelAnnotate(false));
+    client.on('history', snapshot => this._onHistorySnapshot(snapshot));
+    client.on('historyCluster', params => this._onHistoryCluster(params));
+  }
+
+  private _onHistorySnapshot(snapshot: HistorySnapshot) {
+    this._bytesCache.clear();
+    const initialState = {
+      enabled: false,
+      scrubMode: false,
+      scrubTime: 0,
+      scrubFrozenEndMs: null,
+      clusters: [],
+      init: null
+    };
+    if (!snapshot.enabled) {
+      this._emit({ history: initialState });
+      return;
+    }
+    this._emit({ history: { ...initialState, enabled: true, init: Uint8Array.fromBase64(snapshot.init) } });
+  }
+
+  private _onHistoryCluster(c: HistoryCluster) {
+    const { history } = this.state;
+    if (!history.enabled)
+      return;
+    history.clusters.push(c);
+    this._emit({ history });
+  }
+
+  enterScrub(timeMs?: number) {
+    const h = this.state.history;
+    if (!h.enabled || h.clusters.length === 0)
+      return;
+    // Freeze the bar's right edge so the cursor stays where the user
+    // put it as wall time keeps advancing.
+    const frozenEnd = Math.max(this.state.liveFrame?.timestamp ?? 0, Date.now());
+    const start = h.clusters[0].startWallMs;
+    const t = clamp(timeMs ?? frozenEnd, start, frozenEnd);
+    this._emit({ history: { ...h, scrubMode: true, scrubTime: t, scrubFrozenEndMs: frozenEnd } });
+  }
+
+  exitScrub() {
+    const h = this.state.history;
+    if (!h.scrubMode)
+      return;
+    this._emit({ history: { ...h, scrubMode: false, scrubFrozenEndMs: null } });
+  }
+
+  setScrubTime(timeMs: number) {
+    const h = this.state.history;
+    if (!h.scrubMode)
+      return;
+    const range = historyTimeRange(h, this.state.liveFrame);
+    const t = clamp(timeMs, range.startMs, range.endMs);
+    if (t === h.scrubTime)
+      return;
+    this._emit({ history: { ...h, scrubTime: t } });
+  }
+
+  readBytes(offset: number, length: number): Promise<Uint8Array | null> {
+    const cached = this._bytesCache.get(offset);
+    if (cached)
+      return cached;
+    const p = (async () => {
+      const result = await this._client.recorderReadBytes({ offset, length });
+      return Uint8Array.fromBase64(result.data);
+    })();
+    this._bytesCache.set(offset, p);
+    p.catch(() => this._bytesCache.delete(offset));
+    return p;
   }
 
   subscribe(listener: Listener): () => void {
@@ -296,6 +412,7 @@ export class DashboardModel {
         url: frame.url,
         viewportWidth: frame.viewportWidth,
         viewportHeight: frame.viewportHeight,
+        timestamp: frame.timestamp,
       });
     }
     if (session.initiator === 'cli') {
@@ -359,12 +476,36 @@ export class DashboardModel {
       data: frameData.data,
       viewportWidth: frameData.viewportWidth,
       viewportHeight: frameData.viewportHeight,
+      timestamp: Date.now(),
       ariaSnapshot: frameData.ariaSnapshot,
       sessionTitle,
       title: selectedTab?.title ?? '',
       url: selectedTab?.url ?? '',
       annotations: [],
     };
+    this._pushAnnotateFrame(frame, initiator);
+  }
+
+  async addHistoryAnnotateFrame(video: HTMLVideoElement | null) {
+    if (!video || this.state.pendingCapture)
+      return;
+    const captured = await captureVideoFrameAsPng(video);
+    if (!captured)
+      return;
+    if (!this.state.annotateSession)
+      await this._discardRecording();
+    const frame: AnnotateFrame = {
+      id: 'frm-' + Math.random().toString(36).slice(2, 10),
+      data: captured.data,
+      viewportWidth: captured.viewportWidth,
+      viewportHeight: captured.viewportHeight,
+      timestamp: this.state.history.scrubTime,
+      annotations: [],
+    };
+    this._pushAnnotateFrame(frame, 'user');
+  }
+
+  private _pushAnnotateFrame(frame: AnnotateFrame, initiator?: 'cli' | 'user') {
     const existing = this.state.annotateSession;
     const session: AnnotateSession = existing
       ? { ...existing, frames: [...existing.frames, frame], selectedFrameId: frame.id, focusAnnotationId: null }
diff --git a/packages/dashboard/src/historyPlayback.ts b/packages/dashboard/src/historyPlayback.ts
new file mode 100644
index 0000000000000..a7a2a677016a2
--- /dev/null
+++ b/packages/dashboard/src/historyPlayback.ts
@@ -0,0 +1,363 @@
+/**
+ * Copyright (c) Microsoft Corporation.
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ * http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+import type { HistoryCluster } from './dashboardChannel';
+import type { DashboardModel } from './dashboardModel';
+
+const MIME = 'video/webm; codecs="vp8"';
+const SEEK_TOLERANCE_SEC = 0.05;
+const SUPPORTS_MSE = typeof window !== 'undefined' && 'MediaSource' in window && MediaSource.isTypeSupported(MIME);
+
+// Owns the per-session MSE playback pipeline: the <video> element, the
+// MediaSource, the SourceBuffer, and seek scheduling. One controller per
+// scrubber. The React shell mounts the controller's `<video>` into the
+// container it wants to render the playback in.
+//
+// Kept as a plain class (not a hook) because the MSE state machine
+// (MediaSource + SourceBuffer + append chain + pending seek + object URL)
+// is exactly the kind of imperative resource that doesn't fit React's
+// declarative model: a hook version would need 5+ refs and a useEffect
+// cleanup that manually tears down the same state graph, with no
+// semantic gain.
+//
+// Reads the cluster manifest from the model — every seek picks the
+// covering cluster deterministically and fetches its exact byte range,
+// so there's no guesswork on either side of the wire.
+export class HistoryPlayback {
+  readonly video: HTMLVideoElement;
+
+  private readonly _model: DashboardModel;
+  private _mediaSource: MediaSource | null = null;
+  private _sourceBuffer: SourceBuffer | null = null;
+  private _objectUrl: string | null = null;
+  private _initLoaded = false;
+  // Single tail of appendBuffer calls. The next append always chains
+  // off the previous one, so we never race on `SourceBuffer.updating`.
+  private _appendChain: Promise<void> = Promise.resolve();
+  private _pendingSeekSec: number | null = null;
+  private _disposed = false;
+  // Unsubscribe from model updates; rebound when clusters arrive after
+  // a seek targeting the live edge so we can append the freshly-landed
+  // cluster.
+  private _unsubscribe: (() => void) | null = null;
+
+  constructor(model: DashboardModel) {
+    this._model = model;
+    this.video = document.createElement('video');
+    this.video.muted = true;
+    this.video.playsInline = true;
+    this.video.controls = false;
+    this.video.style.width = '100%';
+    this.video.style.height = '100%';
+    this.video.style.objectFit = 'contain';
+    this.video.style.background = '#000';
+    if (SUPPORTS_MSE)
+      this._setupMediaSource();
+    this._unsubscribe = model.subscribe(() => this._onModelChange());
+  }
+
+  // Stable callback ref: pass straight to a React `<div ref={...}>`. The
+  // controller appends its `<video>` into that container, and removes it
+  // again when React invokes the ref with `null`.
+  readonly mountRef = (container: HTMLElement | null): void => {
+    if (!container) {
+      this.video.remove();
+      return;
+    }
+    container.appendChild(this.video);
+  };
+
+  // Request that playback shows the frame at `wallClockMs`. Idempotent
+  // and re-entrant — picks the covering cluster from the model's
+  // manifest, fetches it (model dedupes), and seeks once buffered.
+  seek(wallClockMs: number): void {
+    if (!SUPPORTS_MSE)
+      return;
+    const clusters = this._model.state.history.clusters;
+    if (clusters.length === 0)
+      return;
+    const originWallMs = clusters[0].startWallMs;
+    const targetSec = Math.max(0, wallClockMs - originWallMs) / 1000;
+    // While playing, the scrubber's `timeupdate` handler echoes the
+    // current playhead back through model.setScrubTime → seek(). By the
+    // time this seek runs, the video has naturally advanced past the
+    // echo target; honoring it would yank playback backward and lock us
+    // in a flicker. Recognise the echo (target at-or-slightly-behind
+    // currentTime while playing) and let playback continue.
+    if (!this.video.paused) {
+      const diff = this.video.currentTime - targetSec;
+      if (diff >= 0 && diff < 1) {
+        this._pendingSeekSec = null;
+        return;
+      }
+    }
+    this._pendingSeekSec = targetSec;
+    const pick = this._coveringCluster(wallClockMs);
+    if (!pick)
+      return;
+    const { cluster, index } = pick;
+    // Snap pending seek into the cluster's coverage if it lands in a gap
+    // (e.g. static page → target after the latest cluster, or target
+    // before the first cluster). This is deterministic: the manifest
+    // tells us exactly where each cluster's coverage starts.
+    const endWallMs = clusters[index + 1]?.startWallMs ?? Date.now();
+    if (wallClockMs > endWallMs)
+      this._pendingSeekSec = (endWallMs - originWallMs) / 1000 - SEEK_TOLERANCE_SEC;
+    else if (wallClockMs < cluster.startWallMs)
+      this._pendingSeekSec = (cluster.startWallMs - originWallMs) / 1000;
+    this._maybeSatisfyPendingSeek();
+    void this._ensureClusterBuffered(cluster);
+  }
+
+  async play(): Promise<void> {
+    if (this.video.readyState < 2 /* HAVE_CURRENT_DATA */) {
+      await new Promise<void>(resolve => {
+        const onReady = () => {
+          this.video.removeEventListener('loadeddata', onReady);
+          this.video.removeEventListener('canplay', onReady);
+          resolve();
+        };
+        this.video.addEventListener('loadeddata', onReady);
+        this.video.addEventListener('canplay', onReady);
+      });
+    }
+    await this.video.play().catch(() => {});
+  }
+
+  pause(): void {
+    this.video.pause();
+  }
+
+  dispose(): void {
+    if (this._disposed)
+      return;
+    this._disposed = true;
+    this._unsubscribe?.();
+    this._unsubscribe = null;
+    const ms = this._mediaSource;
+    const url = this._objectUrl;
+    if (ms && ms.readyState === 'open')
+      try { ms.endOfStream(); } catch { /* already closed */ }
+    if (url)
+      URL.revokeObjectURL(url);
+    this.video.removeAttribute('src');
+    try { this.video.load(); } catch { /* ignore */ }
+    if (this.video.parentElement)
+      this.video.parentElement.removeChild(this.video);
+    this._mediaSource = null;
+    this._sourceBuffer = null;
+    this._objectUrl = null;
+  }
+
+  private _setupMediaSource(): void {
+    const ms = new MediaSource();
+    this._mediaSource = ms;
+    const url = URL.createObjectURL(ms);
+    this._objectUrl = url;
+    this.video.src = url;
+
+    ms.addEventListener('sourceopen', () => {
+      if (this._disposed)
+        return;
+      const sb = ms.addSourceBuffer(MIME);
+      sb.mode = 'segments';
+      this._sourceBuffer = sb;
+      // Whenever an append completes, retry any pending seek so we pick
+      // up the moment we can satisfy it.
+      sb.addEventListener('updateend', () => {
+        if (this._disposed)
+          return;
+        this._maybeSatisfyPendingSeek();
+      });
+      void this._loadInit();
+    });
+  }
+
+  private async _loadInit(): Promise<void> {
+    const initBytes = this._model.state.history.init;
+    if (this._disposed || !initBytes || this._initLoaded)
+      return;
+    await this._append(initBytes);
+    this._initLoaded = true;
+    const clusters = this._model.state.history.clusters;
+    if (this._pendingSeekSec !== null && clusters.length > 0) {
+      const wallMs = clusters[0].startWallMs + this._pendingSeekSec * 1000;
+      const pick = this._coveringCluster(wallMs);
+      if (pick)
+        await this._ensureClusterBuffered(pick.cluster);
+    }
+  }
+
+  // Pick the cluster whose coverage window covers `wallClockMs`, or — if
+  // it falls in a gap — the closest preceding cluster. Returns null when
+  // the manifest is empty. Returns the cluster's index so callers can
+  // derive coverage end via `clusters[index+1]`.
+  private _coveringCluster(wallClockMs: number): { cluster: HistoryCluster; index: number } | null {
+    const clusters = this._model.state.history.clusters;
+    if (clusters.length === 0)
+      return null;
+    // Binary search for the last cluster whose startWallMs <= wallClockMs.
+    let lo = 0;
+    let hi = clusters.length - 1;
+    let pick = -1;
+    while (lo <= hi) {
+      const mid = (lo + hi) >> 1;
+      if (clusters[mid].startWallMs <= wallClockMs) {
+        pick = mid;
+        lo = mid + 1;
+      } else {
+        hi = mid - 1;
+      }
+    }
+    // Target before the first cluster — snap forward to it.
+    if (pick === -1)
+      return { cluster: clusters[0], index: 0 };
+    return { cluster: clusters[pick], index: pick };
+  }
+
+  // Make sure the cluster's bytes are present in the SourceBuffer's
+  // buffered range. Uses `buffered` itself as the dedupe signal — so if
+  // the browser evicts under memory pressure we transparently re-append
+  // on the next seek through the same window.
+  private async _ensureClusterBuffered(cluster: HistoryCluster): Promise<void> {
+    const clusters = this._model.state.history.clusters;
+    if (clusters.length === 0)
+      return;
+    const targetSec = (cluster.startWallMs - clusters[0].startWallMs) / 1000;
+    if (this._coversBuffered(targetSec))
+      return;
+    const bytes = await this._model.readBytes(cluster.fileOffset, cluster.byteLen);
+    if (this._disposed || !bytes || !this._initLoaded)
+      return;
+    if (this._coversBuffered(targetSec))
+      return;
+    await this._append(bytes);
+  }
+
+  // Serialise appends through a single promise chain. `appendBuffer` only
+  // sets `sb.updating` synchronously; the slot isn't actually free until
+  // `updateend` fires.
+  private _append(bytes: Uint8Array): Promise<void> {
+    this._appendChain = this._appendChain.then(() => new Promise<void>((resolve, reject) => {
+      const sb = this._sourceBuffer;
+      if (!sb || this._disposed) {
+        resolve();
+        return;
+      }
+      const onDone = () => {
+        sb.removeEventListener('updateend', onDone);
+        sb.removeEventListener('error', onError);
+        resolve();
+      };
+      const onError = () => {
+        sb.removeEventListener('updateend', onDone);
+        sb.removeEventListener('error', onError);
+        reject(new Error('SourceBuffer append failed'));
+      };
+      sb.addEventListener('updateend', onDone);
+      sb.addEventListener('error', onError);
+      try {
+        // appendBuffer expects an ArrayBuffer-backed BufferSource. Both
+        // callers (init/chunk bytes from Uint8Array.fromBase64 in
+        // dashboardModel) hand us Uint8Arrays whose `buffer` is in fact
+        // an ArrayBuffer — TS's lib types just widen it to ArrayBufferLike.
+        sb.appendBuffer(bytes as Uint8Array<ArrayBuffer>);
+      } catch (e) {
+        sb.removeEventListener('updateend', onDone);
+        sb.removeEventListener('error', onError);
+        reject(e as Error);
+      }
+    })).catch(() => { /* swallow; next append is independent */ });
+    return this._appendChain;
+  }
+
+  private _coversBuffered(targetSec: number): boolean {
+    const sb = this._sourceBuffer;
+    if (!sb)
+      return false;
+    for (let i = 0; i < sb.buffered.length; i++) {
+      if (sb.buffered.start(i) - SEEK_TOLERANCE_SEC <= targetSec && targetSec <= sb.buffered.end(i) + SEEK_TOLERANCE_SEC)
+        return true;
+    }
+    return false;
+  }
+
+  private _maybeSatisfyPendingSeek(): void {
+    const target = this._pendingSeekSec;
+    if (target === null)
+      return;
+    if (!this._coversBuffered(target))
+      return;
+    if (Math.abs(this.video.currentTime - target) < SEEK_TOLERANCE_SEC) {
+      this._pendingSeekSec = null;
+      return;
+    }
+    try {
+      this.video.currentTime = target;
+      this._pendingSeekSec = null;
+    } catch {
+      // not seekable yet — leave pendingSeekSec set so next updateend retries.
+    }
+  }
+
+  // When the model emits (e.g. a `historyCluster` event landed), the
+  // covering cluster for an outstanding seek may have just appeared.
+  // Re-run the buffering path so we fetch + append it.
+  private _onModelChange(): void {
+    if (this._disposed || this._pendingSeekSec === null || !this._initLoaded)
+      return;
+    const clusters = this._model.state.history.clusters;
+    if (clusters.length === 0)
+      return;
+    const wallMs = clusters[0].startWallMs + this._pendingSeekSec * 1000;
+    const pick = this._coveringCluster(wallMs);
+    if (!pick)
+      return;
+    void this._ensureClusterBuffered(pick.cluster);
+  }
+}
+
+// Capture the frame currently displayed by an MSE-fed <video> as PNG bytes.
+// Lives alongside the controller because it operates on the same `<video>`
+// the controller owns.
+export async function captureVideoFrameAsPng(video: HTMLVideoElement): Promise<{ data: string; viewportWidth: number; viewportHeight: number } | null> {
+  if (!video.videoWidth || !video.videoHeight)
+    return null;
+  if (video.readyState < 2 /* HAVE_CURRENT_DATA */)
+    return null;
+  if (video.seeking)
+    return null;
+  try {
+    const canvas = document.createElement('canvas');
+    canvas.width = video.videoWidth;
+    canvas.height = video.videoHeight;
+    const ctx = canvas.getContext('2d');
+    if (!ctx)
+      return null;
+    ctx.drawImage(video, 0, 0, canvas.width, canvas.height);
+    const blob = await new Promise<Blob | null>(resolve => canvas.toBlob(resolve, 'image/png'));
+    if (!blob)
+      return null;
+    const buf = await blob.arrayBuffer();
+    return {
+      data: new Uint8Array(buf).toBase64(),
+      viewportWidth: canvas.width,
+      viewportHeight: canvas.height,
+    };
+  } catch {
+    return null;
+  }
+}
diff --git a/packages/dashboard/src/historyPlayer.tsx b/packages/dashboard/src/historyPlayer.tsx
new file mode 100644
index 0000000000000..2526ad4cf59e1
--- /dev/null
+++ b/packages/dashboard/src/historyPlayer.tsx
@@ -0,0 +1,93 @@
+/**
+ * Copyright (c) Microsoft Corporation.
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ * http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+import React from 'react';
+
+import { HistoryPlayback } from './historyPlayback';
+
+import type { DashboardModel } from './dashboardModel';
+
+// Thin React shell over the imperative HistoryPlayback controller.
+//
+// The component owns one controller instance for its lifetime. The
+// callback ref is the lifecycle — created when React hands us a
+// container element, disposed when it hands us null. No useEffect; the
+// controller's `seek` is idempotent so we call it inline during render.
+//
+// Two HistoryPlayer instances can coexist (live-scrub + hover preview):
+// each gets its own controller and its own `<video>`, but they share
+// the recorder init segment and the per-chunk fetch cache via
+// `DashboardModel`, so the second one isn't a network cold-start.
+type HistoryPlayerProps = {
+  model: DashboardModel;
+  // Recorder-relative wall-clock ms to display.
+  time: number;
+  className?: string;
+  // Optional handle on the underlying <video> for screenshot capture.
+  // Receives the element on mount and null on unmount.
+  videoRef?: React.MutableRefObject<HTMLVideoElement | null>;
+  // Optional handle on the playback controller for parents that need to
+  // call `play()`/`pause()` or read its snapshot (buffered ranges,
+  // fetch state).
+  playbackRef?: React.MutableRefObject<HistoryPlayback | null>;
+};
+
+export const HistoryPlayer: React.FC<HistoryPlayerProps> = ({ model, time, className, videoRef, playbackRef }) => {
+  // The controller instance lives in a ref pinned to the component
+  // instance. It's created/destroyed exclusively through the callback
+  // ref below — never during render.
+  const controllerRef = React.useRef<HistoryPlayback | null>(null);
+  // Latest `time` kept in a ref so the mount callback can read it
+  // without re-binding (which would dispose+recreate the controller
+  // every time `time` changes).
+  const timeRef = React.useRef(time);
+  timeRef.current = time;
+
+  const mountRef = React.useCallback((el: HTMLDivElement | null) => {
+    if (el) {
+      if (!controllerRef.current)
+        controllerRef.current = new HistoryPlayback(model);
+      const c = controllerRef.current;
+      if (!c)
+        return;
+      c.mountRef(el);
+      c.video.className = className ?? 'history-player';
+      if (videoRef)
+        videoRef.current = c.video;
+      if (playbackRef)
+        playbackRef.current = c;
+      // Initial seek — between mount and the next render there's no
+      // other code that would tell the controller what to display.
+      c.seek(timeRef.current);
+    } else {
+      if (videoRef)
+        videoRef.current = null;
+      if (playbackRef)
+        playbackRef.current = null;
+      controllerRef.current?.dispose();
+      controllerRef.current = null;
+    }
+  }, [model, videoRef, playbackRef, className]);
+
+  // Drive seek imperatively. Safe to call on every render — the
+  // controller dedupes and noops when the target is already buffered.
+  controllerRef.current?.seek(time);
+
+  return <div ref={mountRef} className={className ?? 'history-player'} />;
+};
+HistoryPlayer.displayName = 'HistoryPlayer';
+
+export { captureVideoFrameAsPng } from './historyPlayback';
diff --git a/packages/dashboard/src/historyScrubber.css b/packages/dashboard/src/historyScrubber.css
new file mode 100644
index 0000000000000..511b93cb6cd56
--- /dev/null
+++ b/packages/dashboard/src/historyScrubber.css
@@ -0,0 +1,257 @@
+/*
+ * Copyright (c) Microsoft Corporation.
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ * http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+/* The scrubber idles as a hairline at the bottom of the viewport — barely
+   visible, just enough to communicate "history exists". On hover, focus, or
+   while scrubbing, it expands to a full chrome strip with controls. */
+.history-scrubber {
+  position: absolute;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  height: 6px;
+  display: flex;
+  align-items: stretch;
+  gap: 0;
+  padding: 0;
+  background: transparent;
+  color: #ddd;
+  font-size: 12px;
+  z-index: 30;
+  user-select: none;
+  transition: height 120ms ease, padding 120ms ease, gap 120ms ease, background 120ms ease;
+}
+
+.history-scrubber:hover,
+.history-scrubber:focus-within,
+.history-scrubber.expanded {
+  height: 32px;
+  padding: 0 10px;
+  gap: 8px;
+  background: rgba(20, 20, 20, 0.78);
+  align-items: center;
+}
+
+.history-play-btn {
+  background: transparent;
+  color: #eee;
+  border: 1px solid #666;
+  border-radius: 3px;
+  width: 0;
+  height: 22px;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  font-size: 11px;
+  cursor: pointer;
+  padding: 0;
+  flex: 0 0 auto;
+  opacity: 0;
+  overflow: hidden;
+  pointer-events: none;
+  border-width: 0;
+  transition: opacity 120ms ease, width 120ms ease, border-width 120ms ease;
+}
+
+.history-scrubber:hover .history-play-btn,
+.history-scrubber:focus-within .history-play-btn,
+.history-scrubber.expanded .history-play-btn {
+  width: 26px;
+  opacity: 1;
+  pointer-events: auto;
+  border-width: 1px;
+}
+
+.history-play-btn:disabled {
+  opacity: 0.4;
+  cursor: not-allowed;
+}
+
+.history-play-btn:hover:not(:disabled) {
+  color: #fff;
+  border-color: #fff;
+}
+
+.history-track {
+  position: relative;
+  flex: 1;
+  /* Hairline state: the track _is_ the scrubber. */
+  height: 100%;
+  background: transparent;
+  border-radius: 0;
+  cursor: pointer;
+  outline: none;
+}
+
+.history-scrubber:hover .history-track,
+.history-scrubber:focus-within .history-track,
+.history-scrubber.expanded .history-track {
+  height: 14px;
+  background: #2a2a2a;
+  border-radius: 3px;
+}
+
+.history-track:focus-visible {
+  box-shadow: 0 0 0 2px #4a90e2;
+}
+
+/* Single contiguous coverage span. The actual <video> source MIME chunks are
+   an implementation detail and not surfaced here. */
+.history-coverage {
+  position: absolute;
+  left: 0;
+  right: 0;
+  top: 0;
+  bottom: 0;
+  background: #4a90e2;
+  opacity: 0;
+  border-radius: inherit;
+  transition: opacity 120ms ease;
+}
+
+.history-scrubber:hover .history-coverage,
+.history-scrubber:focus-within .history-coverage,
+.history-scrubber.expanded .history-coverage {
+  top: 2px;
+  bottom: 2px;
+  opacity: 0.55;
+}
+
+.history-cursor {
+  position: absolute;
+  top: -2px;
+  bottom: -2px;
+  width: 2px;
+  background: #fff;
+  pointer-events: none;
+  transform: translateX(-1px);
+  transition: opacity 0.1s;
+}
+
+.history-time {
+  position: relative;
+  min-width: 0;
+  width: 0;
+  overflow: hidden;
+  opacity: 0;
+  text-align: right;
+  font-variant-numeric: tabular-nums;
+  color: #aaa;
+  display: flex;
+  flex-direction: column;
+  align-items: flex-end;
+  line-height: 1.1;
+  white-space: nowrap;
+  cursor: default;
+  transition: opacity 120ms ease, width 120ms ease;
+}
+
+.history-scrubber:hover .history-time,
+.history-scrubber:focus-within .history-time,
+.history-scrubber.expanded .history-time {
+  width: auto;
+  min-width: 56px;
+  opacity: 1;
+}
+
+.history-time-rel {
+  color: #ddd;
+}
+
+.history-time-abs {
+  font-size: 10px;
+  color: #777;
+}
+
+.history-player {
+  position: absolute;
+  inset: 0;
+  width: 100%;
+  height: 100%;
+  background: #000;
+  z-index: 20;
+  object-fit: contain;
+}
+
+.history-thumb {
+  position: absolute;
+  bottom: calc(100% + 8px);
+  width: 200px;
+  height: 112px;
+  transform: translateX(-50%);
+  background: #000;
+  border: 1px solid #444;
+  border-radius: 4px;
+  overflow: hidden;
+  pointer-events: none;
+  z-index: 30;
+}
+
+.history-thumb.hidden {
+  visibility: hidden;
+}
+
+.history-thumb-player {
+  position: absolute;
+  inset: 0;
+  width: 100%;
+  height: 100%;
+  object-fit: contain;
+}
+
+.history-thumb-time {
+  position: absolute;
+  bottom: 4px;
+  left: 50%;
+  transform: translateX(-50%);
+  font-size: 10px;
+  color: #ddd;
+  background: rgba(0, 0, 0, 0.7);
+  padding: 1px 6px;
+  border-radius: 2px;
+}
+
+.history-live-btn {
+  position: absolute;
+  top: 50%;
+  right: 0;
+  transform: translateY(-50%);
+  background: rgba(20, 20, 20, 0.95);
+  color: #ff4d4d;
+  border: 1px solid #ff4d4d;
+  border-radius: 3px;
+  padding: 2px 8px;
+  font-size: 10px;
+  font-weight: bold;
+  letter-spacing: 0.5px;
+  cursor: pointer;
+  flex: 0 0 auto;
+  opacity: 0;
+  pointer-events: none;
+  transition: opacity 120ms ease;
+}
+
+.history-time:hover .history-live-btn,
+.history-time:focus-within .history-live-btn,
+.history-live-btn:focus-visible {
+  opacity: 1;
+  pointer-events: auto;
+}
+
+.history-live-btn:hover {
+  color: #fff;
+  background: #ff4d4d;
+}
diff --git a/packages/dashboard/src/historyScrubber.tsx b/packages/dashboard/src/historyScrubber.tsx
new file mode 100644
index 0000000000000..3f838a80711d9
--- /dev/null
+++ b/packages/dashboard/src/historyScrubber.tsx
@@ -0,0 +1,314 @@
+/**
+ * Copyright (c) Microsoft Corporation.
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ * http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+import React from 'react';
+
+import { historyTimeRange } from './dashboardModel';
+import { HistoryPlayer } from './historyPlayer';
+import './historyScrubber.css';
+
+import type { DashboardModel, HistoryState } from './dashboardModel';
+import type { HistoryPlayback } from './historyPlayback';
+
+type HistoryScrubberProps = {
+  model: DashboardModel;
+  history: HistoryState;
+  videoRef: React.RefObject<HTMLVideoElement | null>;
+  playbackRef: React.RefObject<HistoryPlayback | null>;
+};
+
+const STEP_MS = 1000;
+const STEP_BIG_MS = 5000;
+// Roughly half the thumb's width — keeps it from running off either end
+// of the track when the cursor is near the edges.
+const THUMB_HALF_WIDTH_PX = 100;
+
+export const HistoryScrubber: React.FC<HistoryScrubberProps> = ({ model, history, videoRef, playbackRef }) => {
+  const trackRef = React.useRef<HTMLDivElement>(null);
+  const draggingRef = React.useRef(false);
+  const range = historyTimeRange(history, model.state.liveFrame);
+  const total = range.endMs - range.startMs;
+  const inScrub = history.scrubMode;
+  const [playing, setPlaying] = React.useState(false);
+  // Hover preview: a small floating <HistoryPlayer> tile pinned above the
+  // track. `hover` is null when the cursor isn't over the track. We keep
+  // the player mounted across hovers (one persistent MediaSource) by
+  // remembering the last position and hiding via CSS — re-mounting on
+  // every hover would tear down + rebuild MSE + re-append the init
+  // segment, causing visible churn on rapid hover.
+  const [hover, setHover] = React.useState<{ x: number; trackWidth: number; time: number } | null>(null);
+  const lastHoverRef = React.useRef<{ x: number; trackWidth: number; time: number } | null>(null);
+  if (hover)
+    lastHoverRef.current = hover;
+  const hoverRafRef = React.useRef<number | null>(null);
+
+  const seek = React.useCallback((time: number) => {
+    if (!model.state.history.scrubMode)
+      model.enterScrub(time);
+    else
+      model.setScrubTime(time);
+  }, [model]);
+
+  const seekFromClientX = React.useCallback((clientX: number) => {
+    const track = trackRef.current;
+    if (!track || total <= 0)
+      return;
+    const rect = track.getBoundingClientRect();
+    const ratio = Math.max(0, Math.min(1, (clientX - rect.left) / rect.width));
+    seek(range.startMs + ratio * total);
+  }, [range.startMs, total, seek]);
+
+  const onMouseDown = (e: React.MouseEvent<HTMLDivElement>) => {
+    if (e.button !== 0)
+      return;
+    draggingRef.current = true;
+    // Pause playback when the user grabs the playhead.
+    playbackRef.current?.pause();
+    seekFromClientX(e.clientX);
+    e.preventDefault();
+  };
+
+  const onTrackMouseMove = (e: React.MouseEvent<HTMLDivElement>) => {
+    if (draggingRef.current || total <= 0)
+      return;
+    const clientX = e.clientX;
+    if (hoverRafRef.current !== null)
+      return;
+    hoverRafRef.current = requestAnimationFrame(() => {
+      hoverRafRef.current = null;
+      const track = trackRef.current;
+      if (!track)
+        return;
+      const rect = track.getBoundingClientRect();
+      const x = Math.max(0, Math.min(rect.width, clientX - rect.left));
+      const ratio = x / rect.width;
+      setHover({ x, trackWidth: rect.width, time: range.startMs + ratio * total });
+    });
+  };
+
+  const onTrackMouseLeave = () => {
+    if (hoverRafRef.current !== null) {
+      cancelAnimationFrame(hoverRafRef.current);
+      hoverRafRef.current = null;
+    }
+    setHover(null);
+  };
+
+  React.useEffect(() => () => {
+    if (hoverRafRef.current !== null)
+      cancelAnimationFrame(hoverRafRef.current);
+  }, []);
+
+  React.useEffect(() => {
+    const onMove = (e: MouseEvent) => {
+      if (draggingRef.current)
+        seekFromClientX(e.clientX);
+    };
+    const onUp = () => { draggingRef.current = false; };
+    window.addEventListener('mousemove', onMove);
+    window.addEventListener('mouseup', onUp);
+    return () => {
+      window.removeEventListener('mousemove', onMove);
+      window.removeEventListener('mouseup', onUp);
+    };
+  }, [seekFromClientX]);
+
+  // Reflect the underlying <video>'s play state into local UI state, and
+  // advance scrubTime as the video plays so the playhead tracks naturally.
+  React.useEffect(() => {
+    const video = videoRef.current;
+    if (!video || !inScrub)
+      return;
+    const originWallMs = history.clusters[0]?.startWallMs ?? 0;
+    const onPlay = () => setPlaying(true);
+    const onPause = () => setPlaying(false);
+    const onTimeUpdate = () => {
+      if (draggingRef.current)
+        return;
+      const t = originWallMs + video.currentTime * 1000;
+      model.setScrubTime(t);
+    };
+    video.addEventListener('play', onPlay);
+    video.addEventListener('pause', onPause);
+    video.addEventListener('timeupdate', onTimeUpdate);
+    setPlaying(!video.paused);
+    return () => {
+      video.removeEventListener('play', onPlay);
+      video.removeEventListener('pause', onPause);
+      video.removeEventListener('timeupdate', onTimeUpdate);
+    };
+  }, [videoRef, inScrub, model, history.clusters]);
+
+  // Reset local play state on exiting scrub mode (the <video> unmounts).
+  React.useEffect(() => {
+    if (!inScrub)
+      setPlaying(false);
+  }, [inScrub]);
+
+  const playDisabled = total <= 0;
+  const onPlayClick = () => {
+    if (playDisabled)
+      return;
+    if (!inScrub) {
+      // Enter scrub a few seconds before live so there's something to play.
+      model.enterScrub(range.endMs - 5000);
+      // The controller may not exist yet — it's created when HistoryPlayer
+      // mounts. Defer to a microtask so React commits the mount first,
+      // then ask the controller to play. `play()` itself awaits loadeddata.
+      queueMicrotask(() => {
+        void playbackRef.current?.play();
+      });
+      return;
+    }
+    const c = playbackRef.current;
+    if (!c)
+      return;
+    if (playing)
+      c.pause();
+    else
+      void c.play();
+  };
+
+  const onKeyDown = (e: React.KeyboardEvent<HTMLDivElement>) => {
+    if (total <= 0)
+      return;
+    if (e.key === ' ' || e.key === 'Spacebar') {
+      onPlayClick();
+      e.preventDefault();
+      return;
+    }
+    const step = e.shiftKey ? STEP_BIG_MS : STEP_MS;
+    const t = inScrub ? history.scrubTime : range.endMs;
+    let next: number | null = null;
+    switch (e.key) {
+      case 'ArrowLeft': next = t - step; break;
+      case 'ArrowRight': next = t + step; break;
+      case 'Home': next = range.startMs; break;
+      case 'End': next = range.endMs; break;
+      case 'Escape':
+        if (inScrub) {
+          model.exitScrub();
+          e.preventDefault();
+        }
+        return;
+    }
+    if (next !== null) {
+      seek(next);
+      e.preventDefault();
+    }
+  };
+
+  // 1s tick to refresh the displayed relative time ("-11s" → "-12s") even
+  // when the bar geometry is frozen during scrub.
+  const [nowTick, setNowTick] = React.useState(() => Date.now());
+  React.useEffect(() => {
+    if (!inScrub)
+      return;
+    const id = setInterval(() => setNowTick(Date.now()), 1000);
+    return () => clearInterval(id);
+  }, [inScrub]);
+
+  if (!history.enabled)
+    return null;
+
+  const cursorRatio = total > 0 && inScrub
+    ? Math.max(0, Math.min(1, (history.scrubTime - range.startMs) / total))
+    : 1;
+  const showRelative = inScrub ? formatRelative(history.scrubTime - nowTick) : 'live';
+  const showAbsolute = inScrub ? formatAbsolute(history.scrubTime) : '';
+
+  return (
+    <div className={'history-scrubber' + (inScrub ? ' expanded' : '')}>
+      <button
+        className='history-play-btn'
+        onClick={onPlayClick}
+        disabled={playDisabled}
+        title={inScrub ? (playing ? 'Pause (space)' : 'Play (space)') : 'Play recent history (space)'}
+        aria-label={playing ? 'Pause' : 'Play'}
+      >
+        {inScrub && playing ? '❚❚' : '▶'}
+      </button>
+      <div
+        ref={trackRef}
+        className='history-track'
+        tabIndex={0}
+        role='slider'
+        aria-label='History scrubber'
+        aria-valuemin={range.startMs}
+        aria-valuemax={range.endMs}
+        aria-valuenow={inScrub ? history.scrubTime : range.endMs}
+        onMouseDown={onMouseDown}
+        onMouseMove={onTrackMouseMove}
+        onMouseLeave={onTrackMouseLeave}
+        onKeyDown={onKeyDown}
+      >
+        {/* Single coverage span. History is contiguous within a Page's
+            lifetime, so segment seams are an MSE detail and not surfaced. */}
+        {total > 0 && <div className='history-coverage' />}
+        <div
+          className='history-cursor'
+          style={{ left: `${cursorRatio * 100}%`, opacity: inScrub ? 1 : 0 }}
+        />
+        {lastHoverRef.current && (
+          <div
+            className={'history-thumb' + (hover ? '' : ' hidden')}
+            style={{ left: clampThumbCenter(lastHoverRef.current.x, lastHoverRef.current.trackWidth) }}
+          >
+            <HistoryPlayer model={model} time={lastHoverRef.current.time} className='history-thumb-player' />
+            <div className='history-thumb-time'>{formatRelative(lastHoverRef.current.time - Date.now())}</div>
+          </div>
+        )}
+      </div>
+      <div className='history-time'>
+        <span className='history-time-rel'>{showRelative}</span>
+        {showAbsolute && <span className='history-time-abs'>{showAbsolute}</span>}
+        {inScrub && (
+          <button
+            className='history-live-btn'
+            onClick={() => model.exitScrub()}
+            title='Return to live (Esc)'
+          >
+            ● LIVE
+          </button>
+        )}
+      </div>
+    </div>
+  );
+};
+
+function clampThumbCenter(x: number, trackWidth: number): number {
+  // Keep the (centered) thumb fully within the track.
+  return Math.max(THUMB_HALF_WIDTH_PX, Math.min(trackWidth - THUMB_HALF_WIDTH_PX, x));
+}
+
+function formatRelative(deltaMs: number): string {
+  const sec = Math.round(deltaMs / 1000);
+  if (sec === 0)
+    return 'live';
+  const sign = sec < 0 ? '-' : '+';
+  const abs = Math.abs(sec);
+  if (abs < 60)
+    return `${sign}${abs}s`;
+  const m = Math.floor(abs / 60);
+  const s = abs % 60;
+  return `${sign}${m}m${s.toString().padStart(2, '0')}s`;
+}
+
+function formatAbsolute(timeMs: number): string {
+  if (!Number.isFinite(timeMs) || timeMs <= 0)
+    return '';
+  return new Date(timeMs).toLocaleTimeString();
+}
diff --git a/packages/playwright-core/src/serverRegistry.ts b/packages/playwright-core/src/serverRegistry.ts
index 3f5ddb0a74a67..e4b1811cff1dc 100644
--- a/packages/playwright-core/src/serverRegistry.ts
+++ b/packages/playwright-core/src/serverRegistry.ts
@@ -132,6 +132,7 @@ class ServerRegistry extends EventEmitter {
       browser,
       endpoint: endpoint.endpoint,
       workspaceDir: endpoint.workspaceDir,
+      metadata: endpoint.metadata,
     };
     await fs.promises.writeFile(file, JSON.stringify(descriptor, null, 2), 'utf-8');
   }
diff --git a/packages/playwright-core/src/tools/backend/DEPS.list b/packages/playwright-core/src/tools/backend/DEPS.list
index 00720253e24a7..e32b81045e3a4 100644
--- a/packages/playwright-core/src/tools/backend/DEPS.list
+++ b/packages/playwright-core/src/tools/backend/DEPS.list
@@ -1,6 +1,7 @@
 [*]
 ../../..
 ../..
+../../server/registry/index.ts
 @utils/**
 @utils/**
 @isomorphic/**
diff --git a/packages/playwright-core/src/tools/backend/context.ts b/packages/playwright-core/src/tools/backend/context.ts
index c1604bd83a2de..43a8bb9c5baf8 100644
--- a/packages/playwright-core/src/tools/backend/context.ts
+++ b/packages/playwright-core/src/tools/backend/context.ts
@@ -25,6 +25,7 @@ import { eventsHelper } from '@utils/eventsHelper';
 import { isPathInside, isSystemDirectory, isWritable } from '@utils/fileUtils';
 import { playwright } from '../../inprocess';
 
+import { PageRecorder } from './pageRecorder';
 import { Tab } from './tab';
 
 import type * as playwrightTypes from '../../..';
@@ -53,6 +54,10 @@ export type ContextConfig = {
     mode?: 'full' | 'none';
   };
   testIdAttribute?: string;
+  recordVideo?: {
+    size?: { width: number; height: number };
+    dir?: string;
+  };
   timeouts?: {
     action?: number;
     navigation?: number;
@@ -104,6 +109,7 @@ export class Context {
     fileNames: string[];
     fileName: string;
   } | undefined;
+  private _pageRecorders = new Map<playwrightTypes.Page, PageRecorder>();
   private _disposables: Disposable[] = [];
 
   private _runningToolName: string | undefined;
@@ -225,22 +231,42 @@ export class Context {
       return [];
     const video = this._video;
     for (const page of this._rawBrowserContext.pages())
-      await page.screencast.stop();
+      await this._stopPageVideo(page);
     this._video = undefined;
     return [...video.fileNames];
   }
 
-  private async _startPageVideo(page: playwrightTypes.Page) {
+  private _nextVideoFileName(): string {
     if (!this._video)
-      return;
+      throw new Error('No active video session');
     const suffix = this._video.fileNames.length ? `-${this._video.fileNames.length}` : '';
     let fileName = this._video.fileName;
-    if (fileName && suffix) {
+    if (suffix) {
       const ext = path.extname(fileName);
       fileName = path.basename(fileName, ext) + suffix + ext;
     }
     this._video.fileNames.push(fileName);
-    await page.screencast.start({ path: fileName, ...this._video.params });
+    return fileName;
+  }
+
+  private async _startPageVideo(page: playwrightTypes.Page) {
+    if (!this._video)
+      return;
+    const fileName = this._nextVideoFileName();
+    const recorder = this._pageRecorders.get(page);
+    if (recorder) {
+      await page.screencast.stop();
+      await page.screencast.start({ onFrame: frame => recorder.writeFrame(frame.data, Date.now()), path: fileName, ...this._video.params });
+    } else {
+      await page.screencast.start({ path: fileName, ...this._video.params });
+    }
+  }
+
+  private async _stopPageVideo(page: playwrightTypes.Page) {
+    const recorder = this._pageRecorders.get(page);
+    await page.screencast.stop();
+    if (recorder)
+      await page.screencast.start({ onFrame: frame => recorder.writeFrame(frame.data, Date.now()) });
   }
 
   private _onPageCreated(page: playwrightTypes.Page) {
@@ -248,7 +274,10 @@ export class Context {
     this._tabs.push(tab);
     if (!this._currentTab)
       this._currentTab = tab;
-    this._startPageVideo(page).catch(() => {});
+    if (this.config.recordVideo?.dir)
+      void this._startPageRecorder(page);
+    else if (this._video)
+      this._startPageVideo(page).catch(() => {});
   }
 
   private _onPageClosed(tab: Tab) {
@@ -259,6 +288,12 @@ export class Context {
 
     if (this._currentTab === tab)
       this._currentTab = this._tabs[Math.min(index, this._tabs.length - 1)];
+
+    const recorder = this._pageRecorders.get(tab.page);
+    if (recorder) {
+      this._pageRecorders.delete(tab.page);
+      recorder.stop().catch(e => testDebug(`PageRecorder stop failed: ${(e as Error).message}`));
+    }
   }
 
   routes(): RouteEntry[] {
@@ -342,6 +377,9 @@ export class Context {
     for (const initScript of this.config.browser?.initScript || [])
       this._disposables.push(await browserContext.addInitScript({ path: path.resolve(this.options.cwd, initScript) }));
 
+    if (this.config.recordVideo?.dir)
+      this._setupRecording();
+
     for (const page of browserContext.pages())
       this._onPageCreated(page);
     this._disposables.push(eventsHelper.addEventListener(browserContext, 'page', page => this._onPageCreated(page)));
@@ -349,6 +387,37 @@ export class Context {
     return browserContext;
   }
 
+  private _setupRecording() {
+    const dir = this.config.recordVideo!.dir!;
+    fs.mkdirSync(dir, { recursive: true });
+    this._rawBrowserContext.once('close', () => {
+      for (const recorder of this._pageRecorders.values())
+        recorder.stop().catch(() => {});
+      this._pageRecorders.clear();
+      fs.rmSync(dir, { recursive: true, force: true });
+    });
+  }
+
+  // TODO: review this
+  private async _startPageRecorder(page: playwrightTypes.Page) {
+    const dir = this.config.recordVideo!.dir!;
+    // Default size when not provided: fall back to a reasonable 1280x720
+    // (matches Playwright's screencast default). We need a concrete size
+    // up-front because ffmpeg's filter chain is fixed at launch.
+    const recordSize = this.config.recordVideo!.size ?? { width: 1280, height: 720 };
+    // eslint-disable-next-line no-restricted-syntax -- _guid is conservative.
+    const guid = (page as any)._guid as string;
+    try {
+      const recorder = await PageRecorder.create({ recordingDir: dir, pageId: guid, size: recordSize });
+      this._pageRecorders.set(page, recorder);
+      const videoPath = this._video ? this._nextVideoFileName() : undefined;
+      await page.screencast.start({ onFrame: frame => recorder.writeFrame(frame.data, Date.now()), size: recordSize, path: videoPath, ...(this._video?.params ?? {}) });
+    } catch (e) {
+      // eslint-disable-next-line no-console
+      console.error(`Failed to start video recording for page ${guid}:`, (e as Error).message);
+    }
+  }
+
   checkUrlAllowed(url: string) {
     if (this.config.allowUnrestrictedFileAccess)
       return;
diff --git a/packages/playwright-core/src/tools/backend/pageRecorder.ts b/packages/playwright-core/src/tools/backend/pageRecorder.ts
new file mode 100644
index 0000000000000..1325e6d604549
--- /dev/null
+++ b/packages/playwright-core/src/tools/backend/pageRecorder.ts
@@ -0,0 +1,204 @@
+/**
+ * Copyright (c) Microsoft Corporation.
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ * http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+import fs from 'fs';
+import path from 'path';
+import { Transform } from 'stream';
+import { finished } from 'stream/promises';
+
+import jpegjs from 'jpeg-js';
+import { debugLogger } from '@utils/debugLogger';
+import { mkdirIfNeeded } from '@utils/fileUtils';
+import { monotonicTime } from '@isomorphic/time';
+import { EbmlStreamParser } from '@utils/ebmlParser';
+import { launchProcess } from '@utils/processLauncher';
+
+import { registry } from '../../server/registry/index';
+
+import type { ChildProcess } from 'child_process';
+import type { ClusterMeta } from '@utils/ebmlParser';
+import type { TransformCallback } from 'stream';
+
+const fps = 25;
+
+type Size = { width: number; height: number };
+
+// Daemon-side video recorder. Owns one ffmpeg child per page, takes mjpeg
+// frames via writeFrame (sourced from page.screencast.onFrame), and writes
+// two files to recordingDir:
+//   * <pageId>.webm — the encoded media (tee of ffmpeg stdout).
+//   * <pageId>.cues — ndjson sidecar, one cluster per line:
+//         {"startWallMs":1700000000000,"fileOffset":1024,"byteLen":2048}
+//     monotonic by fileOffset and startWallMs (parser emits clusters in
+//     file order). The first record's fileOffset is the size of the init
+//     segment. Append-only — safe to poll-tail from the dashboard process
+//     without reader/writer locks.
+//
+// Frame pacing and shutdown semantics are lifted verbatim from the
+// server-side FfmpegVideoRecorder.
+export class PageRecorder {
+  private _size: Size;
+  private _process: ChildProcess;
+  private _gracefullyClose: () => Promise<void>;
+  private _webmStream: fs.WriteStream;
+  private _cuesStream: fs.WriteStream;
+
+  private _firstFrameTimestamp: number = 0;
+  private _lastFrame: { timestamp: number, frameNumber: number, buffer: Buffer } | null = null;
+  private _lastWriteNodeTime: number = 0;
+  private _isStopped = false;
+
+  static async create(options: { recordingDir: string; pageId: string; size: Size }): Promise<PageRecorder> {
+    const webmPath = path.join(options.recordingDir, `${options.pageId}.webm`);
+    const cuesPath = path.join(options.recordingDir, `${options.pageId}.cues`);
+    await mkdirIfNeeded(webmPath);
+    const webmStream = fs.createWriteStream(webmPath);
+    const cuesStream = fs.createWriteStream(cuesPath);
+    await Promise.all([
+      new Promise<void>((resolve, reject) => webmStream.once('open', () => resolve()).once('error', reject)),
+      new Promise<void>((resolve, reject) => cuesStream.once('open', () => resolve()).once('error', reject)),
+    ]);
+
+    // Wallclock origin for the recording — the .cues stream below
+    // converts each cluster's recorder-relative timecode to wallclock by
+    // adding this. Captured before ffmpeg starts so it covers the whole
+    // stream.
+    const originWallMs = Date.now();
+
+    const w = options.size.width;
+    const h = options.size.height;
+    // VP8 args copied verbatim from server/videoRecorder.ts, plus:
+    //   -cluster_time_limit 1000  ~1s cluster cadence (seek granularity).
+    //   -g 50                     keyframe every ~2s @ 25fps (so seeks land on
+    //                             a decodable cluster soon after a target time).
+    //   -flush_packets 1          push every packet to stdout immediately so
+    //                             the dashboard sees clusters land promptly
+    //                             (without this ffmpeg buffers pipe writes).
+    const args = (
+      `-loglevel error -f image2pipe -avioflags direct -fpsprobesize 0 -probesize 32 -analyzeduration 0 ` +
+      `-c:v mjpeg -i pipe:0 -y -an -r ${fps} -c:v vp8 -qmin 0 -qmax 50 -crf 8 -deadline realtime -speed 8 -b:v 1M -threads 1 ` +
+      `-vf pad=${w}:${h}:0:0:gray,crop=${w}:${h}:0:0 ` +
+      `-cluster_time_limit 1000 -g 50 -flush_packets 1 -f webm pipe:1`
+    ).split(' ');
+
+    const { launchedProcess, gracefullyClose } = await launchProcess({
+      command: registry.findExecutable('ffmpeg')!.executablePathOrDie('javascript'),
+      args,
+      stdio: ['pipe', 'pipe', 'pipe'],
+      tempDirectories: [],
+      attemptToGracefullyClose: async () => {
+        launchedProcess.stdin!.end();
+        await new Promise<void>(resolve => launchedProcess.once('exit', () => resolve()));
+      },
+      onExit: (code, signal) => debugLogger.log('browser', `PageRecorder ffmpeg exit code=${code} signal=${signal}`),
+      log: msg => debugLogger.log('browser', `PageRecorder ${msg}`),
+    });
+    launchedProcess.stdin!.on('error', e => debugLogger.log('browser', `PageRecorder ffmpeg stdin error: ${String(e)}`));
+    launchedProcess.stdout!.on('error', e => debugLogger.log('browser', `PageRecorder ffmpeg stdout error: ${String(e)}`));
+
+    launchedProcess.stdout!.pipe(webmStream);
+    launchedProcess.stdout!.pipe(new CueStream(originWallMs)).pipe(cuesStream);
+
+    return new PageRecorder(options.size, launchedProcess, gracefullyClose, webmStream, cuesStream);
+  }
+
+  private constructor(size: Size, process: ChildProcess, gracefullyClose: () => Promise<void>, webmStream: fs.WriteStream, cuesStream: fs.WriteStream) {
+    this._size = size;
+    this._process = process;
+    this._gracefullyClose = gracefullyClose;
+    this._webmStream = webmStream;
+    this._cuesStream = cuesStream;
+  }
+
+  writeFrame(frame: Buffer, wallTimeMs: number): void {
+    if (this._isStopped)
+      return;
+    // wallTimeMs is the page.screencast onFrame frameSwapWallTime (ms).
+    // ffmpeg expects seconds for our pacing math.
+    const timestamp = wallTimeMs / 1000;
+
+    if (!this._firstFrameTimestamp)
+      this._firstFrameTimestamp = timestamp;
+
+    const frameNumber = Math.floor((timestamp - this._firstFrameTimestamp) * fps);
+
+    if (this._lastFrame) {
+      // Pad with the previous frame so ffmpeg sees a steady fps stream.
+      // TODO: we could replace the steady-fps padding entirely by sending
+      // mkv-wrapped frames with explicit timestamps (so ffmpeg doesn't
+      // need image2pipe + repeated frames to fill gaps).
+      const repeatCount = frameNumber - this._lastFrame.frameNumber;
+      const stdin = this._process.stdin!;
+      for (let i = 0; i < repeatCount; ++i) {
+        stdin.write(this._lastFrame.buffer, error => {
+          if (error)
+            debugLogger.log('browser', `PageRecorder ffmpeg failed to write: ${String(error)}`);
+        });
+      }
+    }
+
+    this._lastFrame = { buffer: frame, timestamp, frameNumber };
+    this._lastWriteNodeTime = monotonicTime();
+  }
+
+  async stop(): Promise<void> {
+    if (this._isStopped)
+      return;
+    if (!this._lastFrame) {
+      // ffmpeg only emits any output upon non-empty input.
+      this.writeFrame(createWhiteImage(this._size.width, this._size.height), monotonicTime() * 1000);
+    }
+    // Pad with at least 1s of the last frame
+    const addTime = Math.max((monotonicTime() - this._lastWriteNodeTime) / 1000, 1);
+    this.writeFrame(Buffer.from([]), (this._lastFrame!.timestamp + addTime) * 1000);
+    this._isStopped = true;
+    try {
+      await this._gracefullyClose();
+    } catch (e) {
+      debugLogger.log('error', `PageRecorder ffmpeg failed to stop: ${String(e)}`);
+    }
+    await Promise.allSettled([
+      finished(this._webmStream),
+      finished(this._cuesStream),
+    ]);
+  }
+}
+
+function createWhiteImage(width: number, height: number): Buffer {
+  const data = Buffer.alloc(width * height * 4, 255);
+  return jpegjs.encode({ data, width, height }, 80).data;
+}
+
+class CueStream extends Transform {
+  constructor(originWallMs: number) {
+    const parser = new EbmlStreamParser({
+      onInit: () => {},
+      onCluster: (cluster: ClusterMeta) => this.push(JSON.stringify({
+        startWallMs: originWallMs + (cluster.timecodeMs ?? 0),
+        fileOffset: cluster.fileOffset,
+        byteLen: cluster.byteLen,
+      }) + '\n'),
+    });
+    super({
+      transform(chunk: Buffer, _: BufferEncoding, cb: TransformCallback) {
+        try { parser.feed(chunk); cb(); } catch (e) { cb(e as Error); }
+      },
+      flush(cb: TransformCallback) {
+        try { parser.end(); cb(); } catch (e) { cb(e as Error); }
+      },
+    });
+  }
+}
diff --git a/packages/playwright-core/src/tools/cli-daemon/program.ts b/packages/playwright-core/src/tools/cli-daemon/program.ts
index 1d8877330b8ad..6ab65d1d37b8f 100644
--- a/packages/playwright-core/src/tools/cli-daemon/program.ts
+++ b/packages/playwright-core/src/tools/cli-daemon/program.ts
@@ -16,6 +16,7 @@
 
 /* eslint-disable no-console */
 
+import crypto from 'crypto';
 import fs from 'fs';
 import os from 'os';
 import path from 'path';
@@ -29,6 +30,7 @@ import { createBrowserWithInfo } from '../mcp/browserFactory';
 import * as configUtils from '../mcp/config';
 import { createClientInfo } from '../cli-client/registry';
 import { registry as browserRegistry } from '../../server/registry/index';
+import { ContextConfig } from '../backend/context';
 import type { Command } from 'commander';
 
 export function decorateProgram(program: Command) {
@@ -60,13 +62,22 @@ export function decorateProgram(program: Command) {
 
         try {
           const { browser, browserInfo, canBind, ownership } = await createBrowserWithInfo(mcpConfig, mcpClientInfo, options);
-          if (canBind)
-            await browser.bind(sessionName, { workspaceDir: clientInfo.workspaceDir });
+          const contextConfig: ContextConfig = mcpConfig;
+          if (canBind) {
+            if (contextConfig.recordVideo)
+              contextConfig.recordVideo.dir = path.join(os.tmpdir(), 'pw-recordings-' + crypto.randomBytes(6).toString('hex'));
+            await browser.bind(sessionName, {
+              workspaceDir: clientInfo.workspaceDir,
+              metadata: {
+                recordingDir: contextConfig.recordVideo?.dir
+              },
+            });
+          }
           const browserContext = mcpConfig.browser.isolated ? await browser.newContext(mcpConfig.browser.contextOptions) : browser.contexts()[0];
           if (!browserContext)
             throw new Error('Error: unable to connect to a browser that does not have any contexts');
           const persistent = options.persistent || options.profile || mcpConfig.browser.userDataDir ? true : undefined;
-          const socketPath = await startCliDaemonServer(sessionName, browserContext, browserInfo, mcpConfig, clientInfo, mcpClientInfo, { persistent, exitOnClose: true, ownership });
+          const socketPath = await startCliDaemonServer(sessionName, browserContext, browserInfo, contextConfig, clientInfo, mcpClientInfo, { persistent, exitOnClose: true, ownership });
           console.log(`Daemon listening on ${socketPath}\n`);
         } catch (error) {
           console.log(error);
diff --git a/packages/playwright-core/src/tools/dashboard/dashboardController.ts b/packages/playwright-core/src/tools/dashboard/dashboardController.ts
index c87e35e720049..acd6be1449d5b 100644
--- a/packages/playwright-core/src/tools/dashboard/dashboardController.ts
+++ b/packages/playwright-core/src/tools/dashboard/dashboardController.ts
@@ -22,13 +22,14 @@ import { execFile } from 'child_process';
 import { Disposable } from '@isomorphic/disposable';
 import { ManualPromise } from '@isomorphic/manualPromise';
 import { eventsHelper } from '@utils/eventsHelper';
+import { monotonicTime } from '@isomorphic/time';
 import { createClientInfo } from '../cli-client/registry';
 
 import { SessionProviderEvent } from './sessionProvider';
 
 import type * as api from '../../..';
 import type { Transport } from '@utils/httpServer';
-import type { SubmittedAnnotationFrame, Tab } from '@dashboard/dashboardChannel';
+import type { HistoryCluster, HistorySnapshot, SubmittedAnnotationFrame, Tab } from '@dashboard/dashboardChannel';
 import type { BrowserDescriptor } from '../../serverRegistry';
 import type { SessionProvider } from './sessionProvider';
 
@@ -245,7 +246,15 @@ export class DashboardConnection implements Transport {
   }
 
   emitFrame(data: string, viewportWidth: number, viewportHeight: number) {
-    this.sendEvent?.('frame', { data, viewportWidth, viewportHeight });
+    this.sendEvent?.('frame', { data, viewportWidth, viewportHeight, timestamp: Date.now() });
+  }
+
+  emitHistory(snapshot: HistorySnapshot) {
+    this.sendEvent?.('history', snapshot);
+  }
+
+  emitHistoryCluster(cluster: HistoryCluster) {
+    this.sendEvent?.('historyCluster', cluster);
   }
 
   emitAnnotate({ signal }: { signal: AbortSignal }): Promise<AnnotateResult> {
@@ -295,6 +304,14 @@ export class DashboardConnection implements Transport {
     return this._recordingDir;
   }
 
+  recordingDirFor(context: api.BrowserContext): string | undefined {
+    for (const entry of this._provider.contextEntries()) {
+      if (entry.context === context)
+        return entry.descriptor.metadata?.recordingDir as string | undefined;
+    }
+    return undefined;
+  }
+
   _pushTabs() {
     if (this._pushTabsScheduled)
       return;
@@ -375,6 +392,8 @@ class AttachedPage {
   private _screencastRunning = false;
   private _recordingPath: string | null = null;
   private _disposed = false;
+  private _recordingDir: string | undefined;
+  private _historyReader: HistoryReader | null = null;
 
   constructor(owner: DashboardConnection, page: api.Page) {
     this._owner = owner;
@@ -384,6 +403,7 @@ class AttachedPage {
   get page(): api.Page { return this._page; }
 
   async init() {
+    this._recordingDir = this._owner.recordingDirFor(this._page.context());
     this._listeners.push(
         eventsHelper.addEventListener(this._page, 'close', () => {
           this._owner._handleAttachedPageClose(this._page.context());
@@ -398,14 +418,84 @@ class AttachedPage {
       this._screencastRunning = true;
       await this._startScreencast(this._page);
     }
+    void this._emitHistorySnapshot().catch(() => {
+      this._owner.emitHistory({ enabled: false });
+    });
+  }
+
+  // TODO: review this
+  private async _emitHistorySnapshot() {
+    // Polling is intentional. The daemon starts each page's
+    // `screencast.start` asynchronously after the page is created (see
+    // Context._startPageRecorder), and there's currently no event that
+    // fires when the cues file gets its first record on disk. Until
+    // that signal exists we poll for up to 5s at 100ms intervals — long
+    // enough to cover the screencast handshake on a slow CI box without
+    // making the "no recording at all" case feel sluggish.
+    if (!this._recordingDir) {
+      this._owner.emitHistory({ enabled: false });
+      return;
+    }
+    const guid = pageId(this._page);
+    const webmPath = path.join(this._recordingDir, `${guid}.webm`);
+    const cuesPath = path.join(this._recordingDir, `${guid}.cues`);
+    let reader: HistoryReader | null = null;
+    // TODO: exponential backoff with much longer cap
+    const deadline = monotonicTime() + 5000;
+    while (!this._disposed && monotonicTime() < deadline) {
+      reader = await HistoryReader.open(webmPath, cuesPath, c => this._emitCluster(c)).catch(() => null);
+      if (reader)
+        break;
+      await new Promise(r => setTimeout(r, 100));
+    }
+    if (this._disposed) {
+      if (reader)
+        void reader.dispose().catch(() => {});
+      return;
+    }
+    if (!reader) {
+      this._owner.emitHistory({ enabled: false });
+      return;
+    }
+    // The reader has already drained any clusters present at open time
+    // and fired `_emitCluster` for each. Wait for the webm init segment
+    // to land before declaring history enabled — the frontend ships it
+    // straight into the MediaSource and can't start without it.
+    let init: Buffer | null = null;
+    const initDeadline = monotonicTime() + 5000;
+    while (!this._disposed && monotonicTime() < initDeadline) {
+      init = await reader.ensureInit();
+      if (init)
+        break;
+      await new Promise(r => setTimeout(r, 100));
+    }
+    if (this._disposed) {
+      void reader.dispose().catch(() => {});
+      return;
+    }
+    if (!init) {
+      void reader.dispose().catch(() => {});
+      this._owner.emitHistory({ enabled: false });
+      return;
+    }
+    this._historyReader = reader;
+    this._owner.emitHistory({ enabled: true, init: init.toString('base64') });
+  }
+
+  private _emitCluster(c: HistoryCluster) {
+    if (this._disposed)
+      return;
+    this._owner.emitHistoryCluster(c);
   }
 
   dispose() {
     this._disposed = true;
     this._listeners.forEach(d => d.dispose());
     this._listeners = [];
+    void this._historyReader?.dispose().catch(() => {});
+    this._historyReader = null;
     if (this._screencastRunning)
-      this._page.screencast.stop().catch(() => {});
+      void this._page.screencast.stop().catch(() => {});
     this._screencastRunning = false;
     this._recordingPath = null;
   }
@@ -521,6 +611,13 @@ class AttachedPage {
     await page.screencast.stop().catch(() => {});
     await this._startScreencast(page);
   }
+
+  async recorderReadBytes(params: { offset: number; length: number }): Promise<{ data: string } | null> {
+    if (!this._historyReader)
+      throw new Error('No history reader');
+    const buf = await this._historyReader.readBytes(params.offset, params.length);
+    return { data: buf.toString('base64') };
+  }
 }
 
 function browserId(browser: api.Browser): string {
@@ -556,3 +653,165 @@ async function faviconUrl(page: api.Page): Promise<string | undefined> {
   const timeout = new Promise<undefined>(resolve => setTimeout(() => resolve(undefined), 3000));
   return await Promise.race([url, timeout]);
 }
+
+// Lazy reader pair: holds one fd onto a daemon-written `<pageId>.webm`
+// (for byte-range reads + birthtime) and one fd onto the matching
+// `<pageId>.cues` ndjson sidecar (for cluster index tailing).
+//
+// The .cues file is appended monotonically by the daemon's PageRecorder:
+// one JSON object per line, `{wallMs, fileOffset, byteLen}`.
+// Tailing is push-based: HistoryReader owns a 250ms tick that stats the
+// cues fd; when it has grown, the new tail [_cuesSize, newSize) is read
+// into a buffer via the long-lived cues fd, split on '\n' (with a small
+// held-over partial-line tail), and each JSON line fires the `onCluster`
+// callback. We hold one long-lived fd on the cues sidecar because
+// re-opening on every tick is expensive on Windows.
+// Init segment bytes are inferred as `webm[0 .. firstCluster.fileOffset)`
+// and cached after the first cluster shows up.
+export type CueRecord = HistoryCluster;
+
+export class HistoryReader {
+  readonly webmPath: string;
+  readonly cuesPath: string;
+  private _webmFd: fs.promises.FileHandle;
+  private _cuesFd: fs.promises.FileHandle;
+  private _cuesSize = 0;
+  private _cuesTail = '';
+  private _initBytes: Buffer | null = null;
+  private _firstClusterOffset: number | null = null;
+  private _disposed = false;
+  private _onCluster: (rec: HistoryCluster) => void;
+  private _drainPromise: Promise<void> = Promise.resolve();
+  private _tickTimer: NodeJS.Timeout | null = null;
+
+  private constructor(webmPath: string, cuesPath: string, webmFd: fs.promises.FileHandle, cuesFd: fs.promises.FileHandle, onCluster: (rec: HistoryCluster) => void) {
+    this.webmPath = webmPath;
+    this.cuesPath = cuesPath;
+    this._webmFd = webmFd;
+    this._cuesFd = cuesFd;
+    this._onCluster = onCluster;
+  }
+
+  static async open(webmPath: string, cuesPath: string, onCluster: (rec: HistoryCluster) => void): Promise<HistoryReader> {
+    const webmFd = await fs.promises.open(webmPath, 'r');
+    // One long-lived fd on the cues sidecar: re-opening every tick is
+    // cheap on POSIX but expensive on Windows (security descriptor
+    // checks, MFT entry resolution, antivirus filter callbacks).
+    let cuesFd: fs.promises.FileHandle;
+    try {
+      cuesFd = await fs.promises.open(cuesPath, 'r');
+    } catch (e) {
+      await webmFd.close().catch(() => {});
+      throw e;
+    }
+    const reader = new HistoryReader(webmPath, cuesPath, webmFd, cuesFd, onCluster);
+    // Catch-up drain: fire `onCluster` for everything already in the file
+    // before returning, so the caller can rely on having the historical
+    // index in hand by the time `open` resolves.
+    await reader.flush();
+    // Live tail: a 250ms stat-based tick. Local-fs polling is cheap and
+    // avoids fs.watch's per-platform quirks; latency to the live edge is
+    // bounded by the tick interval.
+    reader._tickTimer = setInterval(() => {
+      if (reader._disposed)
+        return;
+      void reader.flush().catch(() => { /* best-effort */ });
+    }, 250);
+    return reader;
+  }
+
+  async dispose(): Promise<void> {
+    this._disposed = true;
+    if (this._tickTimer) {
+      clearInterval(this._tickTimer);
+      this._tickTimer = null;
+    }
+    // Wait for any in-flight drain so we don't close the fd out from
+    // under a pending read.
+    await this._drainPromise.catch(() => {});
+    await this._webmFd.close().catch(() => {});
+    await this._cuesFd.close().catch(() => {});
+  }
+
+  // One-shot drain of the cues sidecar up to its current size. Safe to
+  // call concurrently with the internal tick — drains are serialised on
+  // `_drainPromise`.
+  flush(): Promise<void> {
+    const next = this._drainPromise.then(() => this._drainOnce());
+    // Swallow rejections on the chain so the next caller doesn't inherit
+    // an earlier failure.
+    this._drainPromise = next.catch(() => {});
+    return next;
+  }
+
+  private async _drainOnce(): Promise<void> {
+    if (this._disposed)
+      return;
+    const { size } = await this._cuesFd.stat();
+    if (size <= this._cuesSize)
+      return;
+    const len = size - this._cuesSize;
+    const buf = Buffer.allocUnsafe(len);
+    let read = 0;
+    while (read < len) {
+      const { bytesRead } = await this._cuesFd.read(buf, read, len - read, this._cuesSize + read);
+      if (!bytesRead)
+        break;
+      read += bytesRead;
+    }
+    this._cuesSize += read;
+    if (!read)
+      return;
+    this._cuesTail += buf.slice(0, read).toString('utf8');
+    let nl = this._cuesTail.indexOf('\n');
+    while (nl !== -1) {
+      const line = this._cuesTail.slice(0, nl).trim();
+      this._cuesTail = this._cuesTail.slice(nl + 1);
+      nl = this._cuesTail.indexOf('\n');
+      if (!line)
+        continue;
+      let rec: HistoryCluster;
+      try {
+        rec = JSON.parse(line) as HistoryCluster;
+      } catch {
+        // Skip malformed line — daemon may be mid-write on the last
+        // entry; we'll see the full line on the next drain.
+        continue;
+      }
+      if (this._firstClusterOffset === null)
+        this._firstClusterOffset = rec.fileOffset;
+      try {
+        this._onCluster(rec);
+      } catch {
+        // Subscriber callback failure shouldn't kill the tail loop.
+      }
+      if (this._disposed)
+        break;
+    }
+  }
+
+  async ensureInit(): Promise<Buffer | null> {
+    if (this._initBytes)
+      return this._initBytes;
+    await this.flush();
+    const initLen = this._firstClusterOffset;
+    if (initLen === null || initLen <= 0)
+      return null;
+    const buf = Buffer.allocUnsafe(initLen);
+    const { bytesRead } = await this._webmFd.read(buf, 0, initLen, 0);
+    if (bytesRead < initLen)
+      return null;
+    this._initBytes = buf;
+    return this._initBytes;
+  }
+
+  async readBytes(offset: number, length: number): Promise<Buffer> {
+    if (this._disposed || offset < 0 || length <= 0)
+      throw new Error('Invalid read');
+    const buf = Buffer.allocUnsafe(length);
+    const { bytesRead } = await this._webmFd.read(buf, 0, length, offset);
+    if (bytesRead < length)
+      throw new Error(`Expected to read ${length} bytes at offset ${offset}, but only got ${bytesRead}`);
+    return buf;
+  }
+}
diff --git a/packages/playwright-core/src/tools/mcp/config.d.ts b/packages/playwright-core/src/tools/mcp/config.d.ts
index 640084178c026..b8d25783960ee 100644
--- a/packages/playwright-core/src/tools/mcp/config.d.ts
+++ b/packages/playwright-core/src/tools/mcp/config.d.ts
@@ -142,6 +142,16 @@ export type Config = {
    */
   saveSession?: boolean;
 
+  /**
+   * Record videos into outputDir. Enables scrubback support in Dashboard.
+   */
+  recordVideo?: {
+    /**
+     * Dimensions of the recorded video.
+     */
+    size?: { width: number; height: number };
+  };
+
   /**
    * Reuse the same browser context between all connected HTTP clients.
    */
diff --git a/packages/playwright-core/src/tools/mcp/configIni.ts b/packages/playwright-core/src/tools/mcp/configIni.ts
index 078295e7a9ae8..6bfa84c9ac490 100644
--- a/packages/playwright-core/src/tools/mcp/configIni.ts
+++ b/packages/playwright-core/src/tools/mcp/configIni.ts
@@ -158,7 +158,7 @@ const longhandTypes: Record<string, LonghandType> = {
   'capabilities': 'string[]',
   'saveSession': 'boolean',
   'saveTrace': 'boolean',
-  'saveVideo': 'size',
+  'recordVideo.size': 'size',
   'sharedBrowserContext': 'boolean',
   'outputDir': 'string',
   'imageResponses': 'string',
diff --git a/packages/playwright-core/src/tools/mcp/program.ts b/packages/playwright-core/src/tools/mcp/program.ts
index ceca2400ae984..a5bb6743025b9 100644
--- a/packages/playwright-core/src/tools/mcp/program.ts
+++ b/packages/playwright-core/src/tools/mcp/program.ts
@@ -14,6 +14,10 @@
  * limitations under the License.
  */
 
+import crypto from 'crypto';
+import os from 'os';
+import path from 'path';
+
 import { Option as ProgramOption } from 'commander';
 import * as mcpServer from '../utils/mcp/server';
 import { commaSeparatedList, dotenvFileLoader, enumParser, headerParser, numberParser, resolutionParser, resolveCLIConfigForMCP, semicolonSeparatedList } from './config';
@@ -24,6 +28,7 @@ import { filteredTools } from '../backend/tools';
 import { testDebug } from './log';
 import { packageJSON } from '../../package';
 
+import type { ContextConfig } from '../backend/context';
 import type { Command } from 'commander';
 import type { ClientInfo } from '../utils/mcp/server';
 import type * as playwright from '../../..';
@@ -118,15 +123,23 @@ export function decorateMCPCommand(command: Command) {
               });
             }
             clientCount++;
+            const contextConfig: ContextConfig = config;
             const { browser, canBind } = sharedBrowserPromise ? { browser: await sharedBrowserPromise, canBind: false } : await createBrowserWithInfo(config, clientInfo, options);
             if (canBind) {
               const count = (clientNameCounters.get(clientInfo.clientName) ?? 0) + 1;
               clientNameCounters.set(clientInfo.clientName, count);
               const sessionName = count > 1 ? `${clientInfo.clientName} (${count})` : clientInfo.clientName;
-              await browser.bind(sessionName, { workspaceDir: clientInfo.cwd });
+              if (contextConfig.recordVideo)
+                contextConfig.recordVideo.dir = path.join(os.tmpdir(), 'pw-recordings-' + crypto.randomBytes(6).toString('hex'));
+              await browser.bind(sessionName, {
+                workspaceDir: clientInfo.cwd,
+                metadata: {
+                  recordingDir: contextConfig.recordVideo?.dir
+                },
+              });
             }
             const browserContext = config.browser.isolated ? await browser.newContext(config.browser.contextOptions) : browser.contexts()[0];
-            return new BrowserBackend(config, browserContext, tools);
+            return new BrowserBackend(contextConfig, browserContext, tools);
           },
           disposed: async backend => {
             clientCount--;
diff --git a/packages/utils/ebmlParser.ts b/packages/utils/ebmlParser.ts
new file mode 100644
index 0000000000000..44b5d50868e40
--- /dev/null
+++ b/packages/utils/ebmlParser.ts
@@ -0,0 +1,252 @@
+/**
+ * Copyright (c) Microsoft Corporation.
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ * http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+// Minimal streaming EBML/Matroska parser geared at:
+//  - splitting an init segment off the front of a webm stream;
+//  - emitting one event per Cluster with timecode, keyframe flag, and the
+//    absolute byte range the cluster occupies in the original stream.
+//
+// Designed for the daemon's PageRecorder, which feeds it ffmpeg's stdout
+// in arbitrary chunks and writes the same bytes to a scratch .webm file.
+
+const ID_CLUSTER = 0x1F43B675;
+const ID_SEGMENT = 0x18538067;
+const ID_TIMECODE = 0xE7;
+const ID_SIMPLEBLOCK = 0xA3;
+const UNKNOWN_SIZE = 0xFFFFFFFFFFFFFFn;
+
+// Top-level segment-child IDs that, when seen inside an unknown-size cluster,
+// indicate the end of that cluster.
+const TOP_LEVEL_TERMINATORS = new Set<number>([
+  0x1F43B675, // Cluster
+  0x1C53BB6B, // Cues
+  0x1654AE6B, // Tracks
+  0x1549A966, // Info
+  0x114D9B74, // SeekHead
+  0x1043A770, // Chapters
+  0x1941A469, // Attachments
+  0x1254C367, // Tags
+]);
+
+export type ClusterMeta = {
+  fileOffset: number;
+  byteLen: number;
+  timecodeMs: number | null;
+  hasKeyframe: boolean;
+};
+
+export type EbmlParserOptions = {
+  onInit: (initBytes: Buffer) => void;
+  onCluster: (cluster: ClusterMeta) => void;
+};
+
+function vintWidth(b: number): number {
+  if (b === 0)
+    throw new Error('Invalid EBML vint (first byte 0)');
+  for (let i = 1, m = 0x80; i <= 8; i++, m >>= 1) {
+    if (b & m)
+      return i;
+  }
+  throw new Error('EBML vint > 8 bytes');
+}
+
+type VintRead = { value: bigint; width: number };
+
+function readVint(buf: Buffer, offset: number, keepMarker: boolean): VintRead | null {
+  if (offset >= buf.length)
+    return null;
+  const w = vintWidth(buf[offset]);
+  if (offset + w > buf.length)
+    return null;
+  let v = keepMarker
+    ? BigInt(buf[offset])
+    : BigInt(buf[offset] & ((1 << (8 - w)) - 1));
+  for (let i = 1; i < w; i++)
+    v = (v << 8n) | BigInt(buf[offset + i]);
+  return { value: v, width: w };
+}
+
+function readUintBE(buf: Buffer, offset: number, length: number): bigint {
+  let v = 0n;
+  for (let i = 0; i < length; i++)
+    v = (v << 8n) | BigInt(buf[offset + i]);
+  return v;
+}
+
+function parseClusterBody(buf: Buffer, start: number, end: number): { timecodeMs: number | null, hasKeyframe: boolean } {
+  let p = start;
+  let timecodeMs: number | null = null;
+  let hasKeyframe = false;
+  while (p < end) {
+    const idR = readVint(buf, p, true);
+    if (!idR)
+      break;
+    const id = Number(idR.value);
+    p += idR.width;
+    const sizeR = readVint(buf, p, false);
+    if (!sizeR)
+      break;
+    p += sizeR.width;
+    const len = Number(sizeR.value);
+    if (id === ID_TIMECODE) {
+      timecodeMs = Number(readUintBE(buf, p, len));
+    } else if (id === ID_SIMPLEBLOCK) {
+      // SimpleBlock: vint trackNum, int16 timecode, u8 flags, data...
+      const trackNum = readVint(buf, p, false);
+      if (trackNum) {
+        const flags = buf[p + trackNum.width + 2];
+        if (flags & 0x80)
+          hasKeyframe = true;
+      }
+    }
+    p += len;
+  }
+  return { timecodeMs, hasKeyframe };
+}
+
+type PendingCluster = {
+  startOffset: number;
+  bodyStart: number;
+  endOffset?: number;
+  sizeKnown: boolean;
+};
+
+export class EbmlStreamParser {
+  private _onInit: (initBytes: Buffer) => void;
+  private _onCluster: (cluster: ClusterMeta) => void;
+  private _buf: Buffer = Buffer.alloc(0);
+  // byte offset of _buf[0] in the original stream
+  private _consumedOffset: number = 0;
+  private _initEmitted: boolean = false;
+  // bytes shifted out of _buf before init was emitted
+  private _initParts: Buffer[] | null = [];
+  private _pending: PendingCluster | null = null;
+
+  constructor(options: EbmlParserOptions) {
+    this._onInit = options.onInit;
+    this._onCluster = options.onCluster;
+  }
+
+  feed(chunk: Buffer): void {
+    this._buf = this._buf.length ? Buffer.concat([this._buf, chunk]) : chunk;
+    this._tryParse();
+  }
+
+  end(): void {
+    if (this._pending && !this._pending.sizeKnown)
+      this._finalizeCluster(this._buf.length);
+  }
+
+  private _tryParse(): void {
+    while (true) {
+      if (this._pending) {
+        const c = this._pending;
+        if (c.sizeKnown) {
+          const localEnd = c.endOffset! - this._consumedOffset;
+          if (this._buf.length < localEnd)
+            return;
+          this._finalizeCluster(localEnd);
+          continue;
+        } else {
+          const localEnd = this._findClusterEndUnknownSize(c.bodyStart - this._consumedOffset);
+          if (localEnd === null)
+            return;
+          this._finalizeCluster(localEnd);
+          continue;
+        }
+      }
+
+      const idR = readVint(this._buf, 0, true);
+      if (!idR)
+        return;
+      const id = Number(idR.value);
+      const sizeR = readVint(this._buf, idR.width, false);
+      if (!sizeR)
+        return;
+
+      if (id === ID_SEGMENT) {
+        // descend into the segment body without consuming size
+        this._shift(idR.width + sizeR.width);
+        continue;
+      }
+
+      if (id === ID_CLUSTER) {
+        if (!this._initEmitted) {
+          const initBytes = Buffer.concat(this._initParts ?? []);
+          this._onInit(initBytes);
+          this._initEmitted = true;
+          this._initParts = null;
+        }
+        const headerLen = idR.width + sizeR.width;
+        const startOffset = this._consumedOffset;
+        const bodyStart = this._consumedOffset + headerLen;
+        if (sizeR.value === UNKNOWN_SIZE)
+          this._pending = { startOffset, bodyStart, sizeKnown: false };
+        else
+          this._pending = { startOffset, bodyStart, endOffset: bodyStart + Number(sizeR.value), sizeKnown: true };
+        this._shift(headerLen);
+        continue;
+      }
+
+      // Skip non-cluster, non-segment top-level (EBML header, Tracks, etc.)
+      const total = idR.width + sizeR.width + Number(sizeR.value);
+      if (this._buf.length < total)
+        return;
+      this._shift(total);
+    }
+  }
+
+  private _finalizeCluster(localBodyEnd: number): void {
+    const c = this._pending!;
+    const bodyStartLocal = c.bodyStart - this._consumedOffset;
+    const cluster = parseClusterBody(this._buf, bodyStartLocal, localBodyEnd);
+    const byteLen = localBodyEnd - (c.startOffset - this._consumedOffset);
+    this._onCluster({
+      fileOffset: c.startOffset,
+      byteLen,
+      timecodeMs: cluster.timecodeMs,
+      hasKeyframe: cluster.hasKeyframe,
+    });
+    this._shift(localBodyEnd);
+    this._pending = null;
+  }
+
+  private _findClusterEndUnknownSize(localStart: number): number | null {
+    let p = localStart;
+    while (p < this._buf.length) {
+      const idR = readVint(this._buf, p, true);
+      if (!idR)
+        return null;
+      const id = Number(idR.value);
+      if (TOP_LEVEL_TERMINATORS.has(id) && p > localStart)
+        return p;
+      const sizeR = readVint(this._buf, p + idR.width, false);
+      if (!sizeR)
+        return null;
+      if (sizeR.value === UNKNOWN_SIZE)
+        return null;
+      p += idR.width + sizeR.width + Number(sizeR.value);
+    }
+    return null;
+  }
+
+  private _shift(n: number): void {
+    if (!this._initEmitted && this._initParts)
+      this._initParts.push(Buffer.from(this._buf.subarray(0, n)));
+    this._buf = this._buf.subarray(n);
+    this._consumedOffset += n;
+  }
+}
diff --git a/packages/utils/processLauncher.ts b/packages/utils/processLauncher.ts
index 9c77c7a0ce3ad..3a101a2dc84c4 100644
--- a/packages/utils/processLauncher.ts
+++ b/packages/utils/processLauncher.ts
@@ -31,7 +31,7 @@ export type LaunchProcessOptions = {
   handleSIGINT?: boolean,
   handleSIGTERM?: boolean,
   handleSIGHUP?: boolean,
-  stdio: 'pipe' | 'stdin',
+  stdio: 'pipe' | 'stdin' | childProcess.StdioOptions,
   tempDirectories: string[],
 
   cwd?: string,
@@ -129,7 +129,11 @@ function removeProcessHandlersIfNeeded() {
 }
 
 export async function launchProcess(options: LaunchProcessOptions): Promise<LaunchResult> {
-  const stdio: ('ignore' | 'pipe')[] = options.stdio === 'pipe' ? ['ignore', 'pipe', 'pipe', 'pipe', 'pipe'] : ['pipe', 'pipe', 'pipe'];
+  const stdio: childProcess.StdioOptions = Array.isArray(options.stdio)
+    ? options.stdio
+    : options.stdio === 'pipe'
+      ? ['ignore', 'pipe', 'pipe', 'pipe', 'pipe']
+      : ['pipe', 'pipe', 'pipe'];
   options.log(`<launching> ${options.command} ${options.args ? options.args.join(' ') : ''}`);
   const spawnOptions: childProcess.SpawnOptions = {
     // On non-windows platforms, `detached: true` makes child process a leader of a new
@@ -169,15 +173,24 @@ export async function launchProcess(options: LaunchProcessOptions): Promise<Laun
   }
   options.log(`<launched> pid=${spawnedProcess.pid}`);
 
-  const stdout = readline.createInterface({ input: spawnedProcess.stdout! });
-  stdout.on('line', (data: string) => {
-    options.log(`[pid=${spawnedProcess.pid}][out] ` + data);
-  });
+  // When caller provides a raw stdio array, they may want direct access
+  // to stdout (e.g. binary stream) — skip the readline wrapper that would
+  // consume it. Still log stderr line-by-line if stderr is piped.
+  const rawStdio = Array.isArray(options.stdio);
+  if (!rawStdio) {
+    const stdout = readline.createInterface({ input: spawnedProcess.stdout! });
+    stdout.on('line', (data: string) => {
+      options.log(`[pid=${spawnedProcess.pid}][out] ` + data);
+    });
+  }
 
-  const stderr = readline.createInterface({ input: spawnedProcess.stderr! });
-  stderr.on('line', (data: string) => {
-    options.log(`[pid=${spawnedProcess.pid}][err] ` + data);
-  });
+  const stderrSlot = rawStdio ? (options.stdio as childProcess.StdioOptions as any)[2] : 'pipe';
+  if (stderrSlot === 'pipe') {
+    const stderr = readline.createInterface({ input: spawnedProcess.stderr! });
+    stderr.on('line', (data: string) => {
+      options.log(`[pid=${spawnedProcess.pid}][err] ` + data);
+    });
+  }
 
   let processClosed = false;
   let fulfillCleanup = () => {};
diff --git a/tests/mcp/annotate.spec.ts b/tests/mcp/annotate.spec.ts
index 0f00ca9d11213..c947817f3339c 100644
--- a/tests/mcp/annotate.spec.ts
+++ b/tests/mcp/annotate.spec.ts
@@ -501,3 +501,108 @@ test('should disengage annotate mode when --annotate client disconnects', async
 
   await expect(dashboard.getByRole('main', { name: 'Dashboard', exact: true })).toBeVisible();
 });
+
+test('--annotate can capture a historic frame from the scrubber', async ({ connectToDashboard, cli }, testInfo) => {
+  test.slow();
+
+  const configPath = testInfo.outputPath('config.json');
+  await fs.promises.writeFile(configPath, JSON.stringify({ recordVideo: {} }));
+
+  // Open the backend daemon with recordVideo enabled, then start a
+  // dashboard webapp with a known bind title we'll later --annotate.
+  await cli('open', `--config=${configPath}`, 'about:blank');
+  const bindTitle = `--playwright-internal--${crypto.randomUUID()}`;
+  await cli('show', { bindTitle });
+
+  // Two connections: one to the daemon (default) for direct page control,
+  // one to the dashboard webapp for UI interaction.
+  const backend = await connectToDashboard('default');
+  const dashboardBrowser = await connectToDashboard(bindTitle);
+  const page = backend.contexts()[0].pages()[0];
+  // Page starts blue. We'll let the recorder accumulate enough blue
+  // history for ffmpeg to flush a cluster (VP8's default keyframe
+  // interval is ~10s — clusters only land on keyframes, so a shorter
+  // warm-up may leave the file with no readable clusters at all).
+  // After that, flip to red so the LIVE frame (auto-captured first by
+  // --annotate) is red and the HISTORIC frame captured via the
+  // scrubber is blue.
+  await page.setContent(`<body style="background: rgb(0,0,255); margin: 0; height: 100vh">
+    <div id=t style="color: white; font-size: 48px"></div>
+    <script>setInterval(() => t.textContent = Date.now(), 50);</script>`);
+
+  const dashboard = dashboardBrowser.contexts()[0].pages()[0];
+  await dashboard.getByRole('navigation', { name: 'Sessions' }).getByRole('option').first().click();
+  await expect(dashboard.locator('img#display')).toBeVisible();
+
+  await page.waitForTimeout(12_000);
+  await page.evaluate(() => document.body.style.background = 'rgb(255,0,0)');
+  await page.waitForTimeout(3500);
+
+  const track = dashboard.locator('.history-track');
+  await expect.poll(
+      async () => track.evaluate(el => Number(el.getAttribute('aria-valuemax')) - Number(el.getAttribute('aria-valuemin'))),
+      { timeout: 15_000 }).toBeGreaterThanOrEqual(3000);
+
+  // --annotate auto-captures the current (red) live frame as Screenshot 1.
+  const annotatePromise = cli('show', '--annotate', { bindTitle });
+  let done = false;
+  void annotatePromise.finally(() => { done = true; });
+
+  await expect(dashboard.locator('.annotate-modal-image')).toBeVisible();
+  // Dismiss the overlay so the scrubber is reachable; sidebar stays.
+  await dashboard.getByRole('button', { name: 'Done annotating' }).click();
+  await expect(dashboard.locator('.annotate-overlay')).toHaveCount(0);
+
+  const box = (await track.boundingBox())!;
+  await dashboard.mouse.click(box.x + box.width * 0.25, box.y + box.height / 2);
+
+  // Wait until the scrubber player actually shows blue (avoids capturing
+  // a black/transitional frame).
+  await expect.poll(async () => dashboard.locator('video.history-player').evaluate((v: HTMLVideoElement) => {
+    if (!v.videoWidth || !v.videoHeight)
+      return false;
+    const canvas = document.createElement('canvas');
+    canvas.width = v.videoWidth;
+    canvas.height = v.videoHeight;
+    const ctx = canvas.getContext('2d')!;
+    ctx.drawImage(v, 0, 0);
+    const d = ctx.getImageData(Math.floor(v.videoWidth / 2), Math.floor(v.videoHeight / 2), 1, 1).data;
+    return d[2] > 150 && d[0] < 80;
+  }), { timeout: 15_000 }).toBe(true);
+
+  // Capture the historic (blue) frame — `scrubMode` is on so this routes
+  // to `addHistoryAnnotateFrame`.
+  await dashboard.getByRole('button', { name: /^(Take|Add) screenshot$/ }).click();
+  await expect(dashboard.locator('.annotate-sidebar-thumb')).toHaveCount(2);
+
+  await expect(dashboard.locator('.annotate-overlay')).toBeVisible();
+  await dashboard.getByRole('button', { name: 'Done annotating' }).click();
+  await dashboard.getByRole('button', { name: 'Submit', exact: true }).click();
+
+  const { output, exitCode } = await annotatePromise;
+  expect(done).toBe(true);
+  expect(exitCode).toBe(0);
+  expect(output).toMatch(/## Screenshot 1/);
+  expect(output).toMatch(/## Screenshot 2/);
+
+  // Screenshot 2 (the historic capture) must still be blue when decoded.
+  const match = output.match(/- \[Annotation image 2\]\((\.playwright-cli[\\/]annotations-2-.*\.png)\)/);
+  expect(match, `output:\n${output}`).not.toBeNull();
+  const pngPath = path.resolve(testInfo.outputDir, match![1]);
+  expect(fs.existsSync(pngPath)).toBe(true);
+
+  const centerColor = await dashboard.evaluate(async (b64: string) => {
+    const img = new Image();
+    img.src = 'data:image/png;base64,' + b64;
+    await img.decode();
+    const canvas = document.createElement('canvas');
+    canvas.width = img.naturalWidth;
+    canvas.height = img.naturalHeight;
+    const ctx = canvas.getContext('2d')!;
+    ctx.drawImage(img, 0, 0);
+    const d = ctx.getImageData(Math.floor(img.naturalWidth / 2), Math.floor(img.naturalHeight / 2), 1, 1).data;
+    return { r: d[0], g: d[1], b: d[2] };
+  }, fs.readFileSync(pngPath).toString('base64'));
+  expect(centerColor.b).toBeGreaterThan(150);
+  expect(centerColor.r).toBeLessThan(80);
+});
diff --git a/tests/mcp/cli-devtools.spec.ts b/tests/mcp/cli-devtools.spec.ts
index 7718e6e714af9..8918ec7c8a183 100644
--- a/tests/mcp/cli-devtools.spec.ts
+++ b/tests/mcp/cli-devtools.spec.ts
@@ -228,6 +228,18 @@ test('video-start-stop', async ({ cli, server }) => {
   expect(videoStopOutput).toContain(`### Result\n- [Video](./video.webm)\n- [Video](./video-1.webm)`);
 });
 
+test('video-start-stop with daemon recordVideo active', async ({ cli, server }, testInfo) => {
+  const configPath = testInfo.outputPath('config.json');
+  await fs.promises.writeFile(configPath, JSON.stringify({ recordVideo: {} }));
+  await cli('open', `--config=${configPath}`, server.HELLO_WORLD);
+  await new Promise(r => setTimeout(r, 1500));
+  const { output: startOutput } = await cli('video-start', 'video.webm');
+  expect(startOutput).toContain('Video recording started.');
+  await new Promise(r => setTimeout(r, 1500));
+  const { output: stopOutput } = await cli('video-stop');
+  expect(stopOutput).toContain('[Video](./video.webm)');
+});
+
 test('video-chapter', async ({ cli, server }) => {
   await cli('open', server.HELLO_WORLD);
   await cli('video-start', 'video.webm');
diff --git a/tests/mcp/dashboard.spec.ts b/tests/mcp/dashboard.spec.ts
index eda77af07cce1..d282d2d27a52f 100644
--- a/tests/mcp/dashboard.spec.ts
+++ b/tests/mcp/dashboard.spec.ts
@@ -179,6 +179,51 @@ test('save recording streams WebM bytes to the chosen file', async ({ cli, serve
   expect(bytes.subarray(0, 4)).toEqual(Buffer.from([0x1a, 0x45, 0xdf, 0xa3]));
 });
 
+test('history scrubber replays a frame from the past when recordVideo is on', async ({ cli, connectToDashboard, startDashboardServer }, testInfo) => {
+  test.slow();
+
+  const configPath = testInfo.outputPath('config.json');
+  await fs.promises.writeFile(configPath, JSON.stringify({ recordVideo: {} }));
+
+  await cli('open', `--config=${configPath}`, 'about:blank');
+  const browser = await connectToDashboard('default');
+  const context = browser.contexts()[0];
+  const page = context.pages()[0];
+  await page.setContent(`<body style="background: rgb(0,0,255); margin: 0; height: 100vh">
+    <div id=t style="color: white; font-size: 48px"></div>
+    <script>setInterval(() => t.textContent = Date.now(), 50);</script>`);
+
+  const dashboard = await startDashboardServer();
+  await dashboard.getByRole('navigation', { name: 'Sessions' }).getByRole('option').first().click();
+  await expect(dashboard.locator('img#display')).toBeVisible();
+
+  await page.waitForTimeout(3500);
+  await page.evaluate(() => document.body.style.background = 'rgb(255,0,0)');
+  await page.waitForTimeout(3500);
+
+  const track = dashboard.locator('.history-track');
+  await expect.poll(
+      async () => track.evaluate(el => Number(el.getAttribute('aria-valuemax')) - Number(el.getAttribute('aria-valuemin'))),
+      { timeout: 15_000 }).toBeGreaterThanOrEqual(3000);
+
+  const box = (await track.boundingBox())!;
+  await dashboard.mouse.click(box.x + box.width * 0.25, box.y + box.height / 2);
+
+  // Scrubber should be displaying a blue frame (early period) — sample the
+  // centre pixel of the <video>.
+  await expect.poll(async () => dashboard.locator('video.history-player').evaluate((v: HTMLVideoElement) => {
+    if (!v.videoWidth || !v.videoHeight)
+      return false;
+    const canvas = document.createElement('canvas');
+    canvas.width = v.videoWidth;
+    canvas.height = v.videoHeight;
+    const ctx = canvas.getContext('2d')!;
+    ctx.drawImage(v, 0, 0);
+    const d = ctx.getImageData(Math.floor(v.videoWidth / 2), Math.floor(v.videoHeight / 2), 1, 1).data;
+    return d[2] > 150 && d[0] < 80;
+  }), { timeout: 15_000 }).toBe(true);
+});
+
 test('two concurrent cli show invocations both succeed', async ({ cli }) => {
   const bindTitle = `--playwright-internal--${crypto.randomUUID()}`;
   const [first, second] = await Promise.all([cli('show', { bindTitle }), cli('show', { bindTitle })]);