From 768e032eb93f0500f95a6a673872e9b9d2a1e445 Mon Sep 17 00:00:00 2001
From: Nikhil Sonti <nikhilsv92@gmail.com>
Date: Fri, 24 Jul 2026 14:27:40 -0700
Subject: [PATCH 1/2] fix(replay): auto-follow tool activity across tabs

Sequential tab chapters (#2024) made the visible tab's rrweb stream the
transport, so any tool that ran after its tab stopped emitting DOM events
became unreachable. In the 2026-07-24 Trendshift session tab 1 records
9.003s of events but receives tools at 24.225s, 26.717s and 38.321s; the
chapter ended at 9.003s and only 6 of 16 tab-attributed tools fell inside
their tab's span at all. Untabbed tools such as name_session were filtered
out of every chapter.

Replaces chapter orchestration with one global activity clock and a pure
session plan:

- session-replay.ts derives the current tool, the visible tab, and the
  tab-local projection as a function of global time. No camera history, so
  a backward seek, a forward seek, and a live refresh all agree.
- usePlayback owns activity time from animation-frame timestamps instead of
  mirroring rrweb, and resumes when a live recording grows past where it
  stopped.
- ReplayViewport keeps its single Replayer and aligns it to the projected
  time, holding a boundary frame while global activity continues past the
  end of the track. Caption and address bar now have separate sources.
- The action timeline is global again: every tool is listed, untabbed and
  no-visual tools stay current without moving the camera, and a tab click
  pins the camera only.

Tool starts come from the durationMs already on the dispatch row; missing,
negative, and non-finite values fall back to completion.
---
 .../apps/claw-app/modules/api/replay.hooks.ts |   10 +-
 .../claw-app/screens/replay/EventTimeline.tsx |   42 +-
 .../screens/replay/PlaybackTransport.test.tsx |   60 +-
 .../screens/replay/PlaybackTransport.tsx      |   26 +-
 .../claw-app/screens/replay/Replay.test.tsx   | 1686 +++++------------
 .../apps/claw-app/screens/replay/Replay.tsx   |  764 ++------
 .../screens/replay/ReplayViewport.test.tsx    |  306 ++-
 .../screens/replay/ReplayViewport.tsx         |  153 +-
 .../screens/replay/replay.data.test.ts        |   46 +-
 .../claw-app/screens/replay/replay.data.ts    |    8 +-
 .../claw-app/screens/replay/replay.helpers.ts |   18 +-
 .../screens/replay/session-replay.test.ts     |  402 ++++
 .../claw-app/screens/replay/session-replay.ts |  285 +++
 .../claw-app/screens/replay/tab-view.test.ts  |  118 +-
 .../apps/claw-app/screens/replay/tab-view.ts  |   69 +-
 .../screens/replay/use-playback.test.tsx      |  243 +++
 .../claw-app/screens/replay/use-playback.ts   |  136 +-
 17 files changed, 2192 insertions(+), 2180 deletions(-)
 create mode 100644 packages/browseros-agent/apps/claw-app/screens/replay/session-replay.test.ts
 create mode 100644 packages/browseros-agent/apps/claw-app/screens/replay/session-replay.ts
 create mode 100644 packages/browseros-agent/apps/claw-app/screens/replay/use-playback.test.tsx

diff --git a/packages/browseros-agent/apps/claw-app/modules/api/replay.hooks.ts b/packages/browseros-agent/apps/claw-app/modules/api/replay.hooks.ts
index abd9d68cc1..6002b66c10 100644
--- a/packages/browseros-agent/apps/claw-app/modules/api/replay.hooks.ts
+++ b/packages/browseros-agent/apps/claw-app/modules/api/replay.hooks.ts
@@ -25,8 +25,16 @@ export type ReplayVerb =
 export type ReplayKind = 'action' | 'block' | 'done'
 
 export interface ReplayFrame {
-  /** Seconds into the session. */
+  /** Seconds into the session, at which this dispatch completed. */
   t: number
+  /**
+   * How long the tool ran, from the source dispatch row. `session-replay.ts`
+   * subtracts it from `t` to approximate when the action began, which is when
+   * the replay starts treating it as current. Absent on rows recorded before
+   * durations were persisted; negative and non-finite values fall back to the
+   * completion time.
+   */
+  durationMs?: number | null
   kind: ReplayKind
   verb: ReplayVerb
   /** Short node label, e.g. the page title or a focused element. */
diff --git a/packages/browseros-agent/apps/claw-app/screens/replay/EventTimeline.tsx b/packages/browseros-agent/apps/claw-app/screens/replay/EventTimeline.tsx
index 5239cf85d6..901ee7555f 100644
--- a/packages/browseros-agent/apps/claw-app/screens/replay/EventTimeline.tsx
+++ b/packages/browseros-agent/apps/claw-app/screens/replay/EventTimeline.tsx
@@ -1,24 +1,26 @@
 import { Layers } from 'lucide-react'
 import { cn } from '@/lib/utils'
-import type { ReplayFrame } from '@/modules/api/replay.hooks'
 import { formatTime, KIND_STYLE, VERB_META } from './replay.helpers'
+import type { ReplayAction } from './session-replay'
 
 interface EventTimelineProps {
-  frames: readonly ReplayFrame[]
-  currentFrameIndex: number
-  onSelectFrame: (frame: ReplayFrame) => void
+  /** Every tool in the session, globally ordered — not filtered by tab. */
+  actions: readonly ReplayAction[]
+  /** Index of the globally current action; -1 before the first one starts. */
+  currentIndex: number
+  onSelectAction: (action: ReplayAction) => void
 }
 
 /**
- * Right-rail vertical event list. Each row corresponds to one frame
- * in the recording. Past frames are full-opacity, future frames dim,
- * and the row matching the playhead gets an accent-tint background.
- * Clicking a row seeks the player to that frame.
+ * Right-rail vertical list of the session's tools in chronological order.
+ * Rows are stamped with the action's activity start, which is both where the
+ * row becomes current and where clicking it seeks. Past rows are full-opacity,
+ * future rows dim, and the current row gets an accent-tint background.
  */
 export function EventTimeline({
-  frames,
-  currentFrameIndex,
-  onSelectFrame,
+  actions,
+  currentIndex,
+  onSelectAction,
 }: EventTimelineProps) {
   return (
     <aside className="flex w-[320px] shrink-0 flex-col border-border border-l bg-card">
@@ -27,20 +29,18 @@ export function EventTimeline({
         Action timeline
       </header>
       <div className="flex flex-1 flex-col overflow-y-auto px-3 py-2">
-        {frames.map((frame, i) => {
-          const seen = currentFrameIndex >= 0 && i <= currentFrameIndex
-          const isCurrent = i === currentFrameIndex
+        {actions.map((action, i) => {
+          const { frame } = action
+          const seen = currentIndex >= 0 && i <= currentIndex
+          const isCurrent = i === currentIndex
           const verb = VERB_META[frame.verb]
           const kind = KIND_STYLE[frame.kind]
-          const showConnector = i < frames.length - 1
+          const showConnector = i < actions.length - 1
           return (
             <button
               type="button"
-              key={
-                frame.dispatchId ??
-                `frame-${frame.kind}-${frame.verb}-${frame.t}-${i}`
-              }
-              onClick={() => onSelectFrame(frame)}
+              key={frame.dispatchId ?? `action-${action.sourceIndex}`}
+              onClick={() => onSelectAction(action)}
               className={cn(
                 'flex gap-3 rounded-lg p-2.5 text-left transition-opacity',
                 isCurrent && 'bg-accent-tint',
@@ -67,7 +67,7 @@ export function EventTimeline({
                     {verb.label}
                   </span>
                   <span className="ml-auto font-mono text-[10.5px] text-ink-3">
-                    {formatTime(frame.t)}
+                    {formatTime(action.startAt)}
                   </span>
                 </div>
                 <p className="mt-0.5 text-ink-2 text-xs leading-snug">
diff --git a/packages/browseros-agent/apps/claw-app/screens/replay/PlaybackTransport.test.tsx b/packages/browseros-agent/apps/claw-app/screens/replay/PlaybackTransport.test.tsx
index a4505ae16c..8c7a930f63 100644
--- a/packages/browseros-agent/apps/claw-app/screens/replay/PlaybackTransport.test.tsx
+++ b/packages/browseros-agent/apps/claw-app/screens/replay/PlaybackTransport.test.tsx
@@ -3,6 +3,7 @@ import { parseHTML } from 'linkedom'
 import { act } from 'react'
 import type { Root } from 'react-dom/client'
 import { PlaybackTransport } from './PlaybackTransport'
+import type { ReplayAction } from './session-replay'
 import { usePlayback } from './use-playback'
 
 const globalDescriptors = new Map(
@@ -14,6 +15,37 @@ const globalDescriptors = new Map(
 let root: Root
 let container: HTMLElement
 
+const bookmarks: ReplayAction[] = [
+  {
+    frame: {
+      t: 6,
+      kind: 'block',
+      verb: 'read',
+      node: 'blocked',
+      caption: 'read: blocked',
+      dispatchId: 7,
+    },
+    startAt: 4,
+    completionAt: 6,
+    trackTabId: null,
+    sourceIndex: 0,
+  },
+  {
+    frame: {
+      t: 8,
+      kind: 'action',
+      verb: 'read',
+      node: 'plain',
+      caption: 'read: plain',
+      dispatchId: 8,
+    },
+    startAt: 8,
+    completionAt: 8,
+    trackTabId: null,
+    sourceIndex: 1,
+  },
+]
+
 function TransportHarness() {
   const playback = usePlayback(10)
   return (
@@ -21,7 +53,7 @@ function TransportHarness() {
       <PlaybackTransport
         playback={playback}
         totalSeconds={10}
-        frames={[]}
+        actions={bookmarks}
         onSeek={playback.seek}
       />
       <button type="button" data-command-pause onClick={playback.pause}>
@@ -33,7 +65,7 @@ function TransportHarness() {
       <button
         type="button"
         data-command-finish
-        onClick={() => playback.syncFromPlayer(10)}
+        onClick={() => playback.seek(10)}
       >
         Finish
       </button>
@@ -60,6 +92,12 @@ beforeEach(async () => {
       value,
     })
   }
+  // linkedom ships no animation-frame API; the global clock needs one to run.
+  // Never fired here — these tests only exercise the transport's controls.
+  Object.assign(dom.window, {
+    requestAnimationFrame: () => 1,
+    cancelAnimationFrame: () => {},
+  })
   Object.defineProperty(globalThis, 'IS_REACT_ACT_ENVIRONMENT', {
     configurable: true,
     writable: true,
@@ -145,4 +183,22 @@ describe('PlaybackTransport', () => {
     expect(container.textContent).toContain('0:00 / 0:10')
     expect(fourTimes?.getAttribute('aria-pressed')).toBe('true')
   })
+
+  it('bookmarks non-action tools at their activity start', async () => {
+    await act(async () => root.render(<TransportHarness />))
+
+    const marks = [...container.querySelectorAll('button[aria-label^="Jump"]')]
+    expect(marks.map((mark) => mark.getAttribute('aria-label'))).toEqual([
+      'Jump to read: blocked',
+    ])
+    // startAt 4 of 10 seconds, not the completion at 6.
+    expect(marks[0]?.getAttribute('style')?.replace(/\s/g, '')).toContain(
+      'left:40%',
+    )
+
+    await act(async () => {
+      marks[0]?.dispatchEvent(new window.Event('click', { bubbles: true }))
+    })
+    expect(container.textContent).toContain('0:04 / 0:10')
+  })
 })
diff --git a/packages/browseros-agent/apps/claw-app/screens/replay/PlaybackTransport.tsx b/packages/browseros-agent/apps/claw-app/screens/replay/PlaybackTransport.tsx
index e457947eba..2c3cc6414c 100644
--- a/packages/browseros-agent/apps/claw-app/screens/replay/PlaybackTransport.tsx
+++ b/packages/browseros-agent/apps/claw-app/screens/replay/PlaybackTransport.tsx
@@ -2,28 +2,29 @@ import { Pause, Play, RotateCcw } from 'lucide-react'
 import type { ChangeEvent } from 'react'
 import { ToggleGroup, ToggleGroupItem } from '@/components/ui/toggle-group'
 import { cn } from '@/lib/utils'
-import type { ReplayFrame } from '@/modules/api/replay.hooks'
 import { formatTime, KIND_STYLE, PLAYBACK_SPEEDS } from './replay.helpers'
+import type { ReplayAction } from './session-replay'
 import type { Playback } from './use-playback'
 
 const SCRUBBER_STEP = 0.1
 
 interface PlaybackTransportProps {
   playback: Playback
+  /** Replayable activity for the whole session, not one tab's recording. */
   totalSeconds: number
-  frames: readonly ReplayFrame[]
+  actions: readonly ReplayAction[]
   onSeek: (seconds: number) => void
 }
 
 /**
- * Play / pause + scrubber + speed picker. Non-action frames render as
- * coloured bookmarks on the scrubber so the user can jump straight to
- * a block or done moment.
+ * Play / pause + scrubber + speed picker for global activity time.
+ * Non-action tools render as coloured bookmarks on the scrubber so the user
+ * can jump straight to a block or done moment.
  */
 export function PlaybackTransport({
   playback,
   totalSeconds,
-  frames,
+  actions,
   onSeek,
 }: PlaybackTransportProps) {
   const { time, isPlaying, speed, setSpeed, togglePlay } = playback
@@ -62,20 +63,19 @@ export function PlaybackTransport({
             className="absolute left-0 h-1.5 rounded-full bg-accent transition-[width] duration-100"
             style={{ width: `${progress}%` }}
           />
-          {frames.map((frame, index) => {
+          {actions.map((action) => {
+            const { frame } = action
             if (frame.kind === 'action') return null
-            const pct = totalSeconds === 0 ? 0 : (frame.t / totalSeconds) * 100
+            const pct =
+              totalSeconds === 0 ? 0 : (action.startAt / totalSeconds) * 100
             const kind = KIND_STYLE[frame.kind]
             return (
               <button
                 type="button"
-                key={
-                  frame.dispatchId ??
-                  `bookmark-${frame.kind}-${frame.t}-${index}`
-                }
+                key={frame.dispatchId ?? `bookmark-${action.sourceIndex}`}
                 title={frame.caption}
                 aria-label={`Jump to ${frame.caption}`}
-                onClick={() => onSeek(frame.t)}
+                onClick={() => onSeek(action.startAt)}
                 style={{ left: `${pct}%` }}
                 className={cn(
                   'absolute z-10 size-2.5 -translate-x-1/2 rounded-full border-2 border-card shadow-sm',
diff --git a/packages/browseros-agent/apps/claw-app/screens/replay/Replay.test.tsx b/packages/browseros-agent/apps/claw-app/screens/replay/Replay.test.tsx
index 3bd7116f15..ea7e5fd59b 100644
--- a/packages/browseros-agent/apps/claw-app/screens/replay/Replay.test.tsx
+++ b/packages/browseros-agent/apps/claw-app/screens/replay/Replay.test.tsx
@@ -6,24 +6,16 @@ import {
   type ReactNode,
   StrictMode,
   useContext,
-  useEffect,
 } from 'react'
 import type { Root } from 'react-dom/client'
 import { MemoryRouter } from 'react-router'
 import type { ReplayEvent, ReplayFrame } from '@/modules/api/replay.hooks'
 import * as replayDataModule from './replay.data'
 import { buildReplayEventCatalog } from './replay-events'
+import type { ReplayAction } from './session-replay'
 import type { Playback } from './use-playback'
 
 let replayResult: replayDataModule.UseReplayDataResult
-let playerTimeMs = 0
-let activePlayers = 0
-let maxActivePlayers = 0
-const playerCalls: Array<{
-  kind: 'seek' | 'play' | 'pause' | 'speed'
-  tabId: number
-  value?: number
-}> = []
 
 mock.module('./replay.data', () => ({
   ...replayDataModule,
@@ -32,56 +24,35 @@ mock.module('./replay.data', () => ({
 
 mock.module('./ReplayViewport', () => ({
   ReplayViewport: ({
+    action,
+    url,
     events,
-    onPlayerReady,
+    trackTime,
+    live,
+    isPlaying,
+    speed,
   }: {
+    action: ReplayFrame | undefined
+    url: string | null
     events: readonly ReplayEvent[]
-    onPlayerReady: (
-      handle: {
-        seek: (ms: number) => void
-        play: (ms: number) => void
-        pause: () => void
-        setSpeed: (speed: number) => void
-        getCurrentTime: () => number
-      } | null,
-    ) => void
-  }) => {
-    const tabId = events[0]?.tabId ?? -1
-    // biome-ignore lint/correctness/useExhaustiveDependencies: event-array replacement remounts the real ReplayViewport player.
-    useEffect(() => {
-      activePlayers += 1
-      maxActivePlayers = Math.max(maxActivePlayers, activePlayers)
-      onPlayerReady({
-        seek: (ms) => {
-          playerTimeMs = ms
-          playerCalls.push({ kind: 'seek', tabId, value: ms })
-        },
-        play: (ms) => {
-          playerTimeMs = ms
-          playerCalls.push({ kind: 'play', tabId, value: ms })
-        },
-        pause: () => {
-          playerCalls.push({ kind: 'pause', tabId })
-        },
-        setSpeed: (speed) => {
-          playerCalls.push({ kind: 'speed', tabId, value: speed })
-        },
-        getCurrentTime: () => playerTimeMs,
-      })
-      return () => {
-        activePlayers -= 1
-        onPlayerReady(null)
-      }
-    }, [events, onPlayerReady, tabId])
-    return (
-      <div
-        data-player-documents={events
-          .map((event) => event.documentId)
-          .join(',')}
-        data-player-types={events.map((event) => event.type).join(',')}
-      />
-    )
-  },
+    trackTime: number
+    live: boolean
+    isPlaying: boolean
+    speed: number
+  }) => (
+    <div
+      data-viewport-tab={events[0]?.tabId ?? -1}
+      data-viewport-documents={events
+        .map((event) => event.documentId)
+        .join(',')}
+      data-viewport-track-time={trackTime}
+      data-viewport-live={live}
+      data-viewport-playing={isPlaying}
+      data-viewport-speed={speed}
+      data-viewport-url={url ?? ''}
+      data-viewport-caption={action?.caption ?? ''}
+    />
+  ),
 }))
 
 mock.module('./PlaybackTransport', () => ({
@@ -100,6 +71,7 @@ mock.module('./PlaybackTransport', () => ({
         data-playback-time={playback.time}
         data-playback-playing={playback.isPlaying}
         data-playback-speed={playback.speed}
+        data-playback-total={totalSeconds}
       >
         <button
           type="button"
@@ -125,13 +97,16 @@ mock.module('./PlaybackTransport', () => ({
             {speed}×
           </button>
         ))}
-        <button
-          type="button"
-          data-playback-seek-middle
-          onClick={() => onSeek(totalSeconds / 2)}
-        >
-          Seek middle
-        </button>
+        {seekTargets.map((seconds) => (
+          <button
+            type="button"
+            key={seconds}
+            data-playback-seek={seconds}
+            onClick={() => onSeek(seconds)}
+          >
+            Seek {seconds}
+          </button>
+        ))}
       </div>
     )
   },
@@ -139,34 +114,38 @@ mock.module('./PlaybackTransport', () => ({
 
 mock.module('./EventTimeline', () => ({
   EventTimeline: ({
-    frames,
-    onSelectFrame,
+    actions,
+    currentIndex,
+    onSelectAction,
   }: {
-    frames: readonly ReplayFrame[]
-    onSelectFrame: (frame: ReplayFrame) => void
+    actions: readonly ReplayAction[]
+    currentIndex: number
+    onSelectAction: (action: ReplayAction) => void
   }) => (
-    <div data-event-timeline>
-      {frames.map((frame) => (
+    <div data-event-timeline data-current-index={currentIndex}>
+      {actions.map((action, index) => (
         <button
           type="button"
-          key={frame.dispatchId}
-          data-frame-tab={frame.tabId}
-          onClick={() => onSelectFrame(frame)}
+          key={action.frame.dispatchId ?? action.sourceIndex}
+          data-action-dispatch={action.frame.dispatchId}
+          data-action-start={action.startAt}
+          data-action-current={index === currentIndex}
+          onClick={() => onSelectAction(action)}
         >
-          {frame.caption}
+          {action.frame.caption}
         </button>
       ))}
     </div>
   ),
 }))
 
-const TargetSelectContext = createContext<{
-  selectedTarget: string
-  selectTarget: (targetId: string) => void
-}>({
-  selectedTarget: '',
-  selectTarget: () => {},
-})
+/** Scrub destinations the fake transport exposes as buttons. */
+const seekTargets = [0, 3, 9, 14, 16, 24.225, 26.717, 38.321]
+
+const TabSelectContext = createContext<{
+  selected: string
+  select: (value: string) => void
+}>({ selected: '', select: () => {} })
 
 mock.module('@/components/ui/tabs', () => ({
   Tabs: ({
@@ -175,14 +154,14 @@ mock.module('@/components/ui/tabs', () => ({
     children,
   }: {
     value: string
-    onValueChange: (targetId: string) => void
+    onValueChange: (value: string) => void
     children: ReactNode
   }) => (
-    <TargetSelectContext.Provider
-      value={{ selectedTarget: value, selectTarget: onValueChange }}
+    <TabSelectContext.Provider
+      value={{ selected: value, select: onValueChange }}
     >
-      <div data-selected-target={value}>{children}</div>
-    </TargetSelectContext.Provider>
+      <div data-selected-tab={value}>{children}</div>
+    </TabSelectContext.Provider>
   ),
   TabsList: ({ children }: { children: ReactNode }) => <div>{children}</div>,
   TabsTrigger: ({
@@ -194,14 +173,14 @@ mock.module('@/components/ui/tabs', () => ({
     children: ReactNode
     onClick?: () => void
   }) => {
-    const { selectedTarget, selectTarget } = useContext(TargetSelectContext)
+    const { selected, select } = useContext(TabSelectContext)
     return (
       <button
         type="button"
-        data-target-chip={value}
+        data-tab-chip={value}
         onClick={() => {
           onClick?.()
-          if (value !== selectedTarget) selectTarget(value)
+          if (value !== selected) select(value)
         }}
       >
         {children}
@@ -210,129 +189,7 @@ mock.module('@/components/ui/tabs', () => ({
   },
 }))
 
-const events: ReplayEvent[] = [
-  {
-    sessionId: 'session-1',
-    documentId: 'document-a',
-    targetId: 'target-a',
-    tabId: 1,
-    ts: 1_000,
-    type: 4,
-    data: { width: 1280, height: 720 },
-  },
-  {
-    sessionId: 'session-1',
-    documentId: 'document-a',
-    targetId: 'target-a',
-    tabId: 1,
-    ts: 1_001,
-    type: 2,
-    data: {},
-  },
-  {
-    sessionId: 'session-1',
-    documentId: 'document-a',
-    targetId: 'target-a',
-    tabId: 1,
-    ts: 5_000,
-    type: 3,
-    data: {},
-  },
-  {
-    sessionId: 'session-1',
-    documentId: 'document-b',
-    targetId: 'target-b',
-    tabId: 2,
-    ts: 10_000,
-    type: 4,
-    data: { width: 1280, height: 720 },
-  },
-  {
-    sessionId: 'session-1',
-    documentId: 'document-b',
-    targetId: 'target-b',
-    tabId: 2,
-    ts: 10_001,
-    type: 2,
-    data: {},
-  },
-  {
-    sessionId: 'session-1',
-    documentId: 'document-b',
-    targetId: 'target-b',
-    tabId: 2,
-    ts: 15_000,
-    type: 3,
-    data: {},
-  },
-]
-
-const frames: ReplayFrame[] = [
-  {
-    t: 1,
-    kind: 'action',
-    verb: 'read',
-    node: 'A',
-    caption: 'Read target A',
-    tabId: 1,
-    targetId: 'target-a',
-    dispatchId: 1,
-    url: 'https://first.example/products',
-  },
-  {
-    t: 12,
-    kind: 'action',
-    verb: 'click',
-    node: 'B',
-    caption: 'Click target B',
-    tabId: 2,
-    targetId: 'target-b',
-    dispatchId: 2,
-    url: 'https://second.example/checkout',
-  },
-]
-
-function replayData(
-  replayEvents: readonly ReplayEvent[],
-  tabOrder?: number[],
-  replayFrames: ReplayFrame[] = frames,
-): replayDataModule.ReplayData {
-  const eventCatalog = buildReplayEventCatalog(replayEvents)
-  const tabs = (tabOrder ?? eventCatalog.tabIds).map((tabId) => ({
-    tabId,
-    complete: true,
-    segments: eventCatalog.documentIdsForTab(tabId).map((documentId) => {
-      const documentEvents = eventCatalog.eventsForDocument(documentId)
-      return {
-        documentId,
-        targetId: documentEvents.find((event) => event.targetId)?.targetId,
-        firstEventAt: documentEvents[0]?.ts ?? 0,
-        lastEventAt: documentEvents.at(-1)?.ts ?? 0,
-        hasGap: false,
-        legacy: false,
-      }
-    }),
-  }))
-  return {
-    sessionId: 'session-1',
-    agentLabel: 'Codex',
-    taskTitle: 'Replay test',
-    harness: 'Codex',
-    status: 'done' as const,
-    site: 'example.com',
-    startedAt: 'Jul 18, 2026',
-    startedAtMs: 0,
-    duration: '0:15',
-    tokens: '-',
-    steps: '2',
-    totalSeconds: 15,
-    frames: replayFrames,
-    complete: true,
-    tabs,
-    eventsLoaded: true,
-    eventsForTab: eventCatalog.eventsForTab,
-  }
-}
+const SESSION_START_MS = 0
 
 function visualEvents(
   tabId: number,
@@ -371,30 +228,6 @@ function visualEvents(
   ]
 }
 
-function staticVisualEvents(tabId: number, atMs: number): ReplayEvent[] {
-  const documentId = `document-${tabId}`
-  return [
-    {
-      sessionId: 'session-1',
-      documentId,
-      targetId: `target-${tabId}`,
-      tabId,
-      ts: atMs,
-      type: 4,
-      data: { width: 1280, height: 720 },
-    },
-    {
-      sessionId: 'session-1',
-      documentId,
-      targetId: `target-${tabId}`,
-      tabId,
-      ts: atMs,
-      type: 2,
-      data: {},
-    },
-  ]
-}
-
 function noVisualEvent(tabId: number, atMs: number): ReplayEvent {
   return {
     sessionId: 'session-1',
@@ -407,21 +240,64 @@ function noVisualEvent(tabId: number, atMs: number): ReplayEvent {
   }
 }
 
-function chapterFrame(
-  tabId: number,
+function toolFrame(
+  tabId: number | null,
   atSeconds: number,
-  domain = `tab-${tabId}.example`,
+  extra: Partial<ReplayFrame> = {},
 ): ReplayFrame {
   return {
     t: atSeconds,
     kind: 'action',
     verb: 'read',
-    node: `Tab ${tabId}`,
-    caption: `Action on Tab ${tabId}`,
+    node: tabId === null ? 'session' : `Tab ${tabId}`,
+    caption: tabId === null ? 'name_session' : `Action on Tab ${tabId}`,
     tabId,
-    targetId: `target-${tabId}`,
-    dispatchId: tabId,
-    url: `https://${domain}/path`,
+    targetId: tabId === null ? undefined : `target-${tabId}`,
+    dispatchId: Math.round(atSeconds * 1000),
+    url: tabId === null ? null : `https://tab-${tabId}.example/path`,
+    ...extra,
+  }
+}
+
+function replayData(
+  replayEvents: readonly ReplayEvent[],
+  tabOrder?: number[],
+  replayFrames: ReplayFrame[] = [],
+): replayDataModule.ReplayData {
+  const eventCatalog = buildReplayEventCatalog(replayEvents)
+  const tabs = (tabOrder ?? eventCatalog.tabIds).map((tabId) => ({
+    tabId,
+    complete: true,
+    segments: eventCatalog.documentIdsForTab(tabId).map((documentId) => {
+      const documentEvents = eventCatalog.eventsForDocument(documentId)
+      return {
+        documentId,
+        targetId: documentEvents.find((event) => event.targetId)?.targetId,
+        firstEventAt: documentEvents[0]?.ts ?? 0,
+        lastEventAt: documentEvents.at(-1)?.ts ?? 0,
+        hasGap: false,
+        legacy: false,
+      }
+    }),
+  }))
+  return {
+    sessionId: 'session-1',
+    agentLabel: 'Codex',
+    taskTitle: 'Replay test',
+    harness: 'Codex',
+    status: 'done' as const,
+    site: 'example.com',
+    startedAt: 'Jul 18, 2026',
+    startedAtMs: SESSION_START_MS,
+    duration: '0:40',
+    tokens: '-',
+    steps: String(replayFrames.length),
+    totalSeconds: 40,
+    frames: replayFrames,
+    complete: true,
+    tabs,
+    eventsLoaded: true,
+    eventsForTab: eventCatalog.eventsForTab,
   }
 }
 
@@ -433,25 +309,12 @@ const globalDescriptors = new Map(
 
 let root: Root
 let container: HTMLElement
-let nextAnimationFrameId = 1
-let nextTimerId = 1
-const animationFrames = new Map<number, FrameRequestCallback>()
-const transitionTimers = new Map<
-  number,
-  { callback: TimerHandler; delay: number | undefined }
->()
-const clearedTimerIds: number[] = []
+let nextFrameId = 1
+let frames = new Map<number, FrameRequestCallback>()
 
 beforeEach(async () => {
-  playerTimeMs = 0
-  activePlayers = 0
-  maxActivePlayers = 0
-  playerCalls.length = 0
-  nextAnimationFrameId = 1
-  nextTimerId = 1
-  animationFrames.clear()
-  transitionTimers.clear()
-  clearedTimerIds.length = 0
+  nextFrameId = 1
+  frames = new Map()
   const dom = parseHTML(
     '<!doctype html><html><body><div id="root"></div></body></html>',
   )
@@ -472,21 +335,12 @@ beforeEach(async () => {
   }
   Object.assign(dom.window, {
     requestAnimationFrame: (callback: FrameRequestCallback) => {
-      const id = nextAnimationFrameId++
-      animationFrames.set(id, callback)
+      const id = nextFrameId++
+      frames.set(id, callback)
       return id
     },
     cancelAnimationFrame: (id: number) => {
-      animationFrames.delete(id)
-    },
-    setTimeout: (callback: TimerHandler, delay?: number) => {
-      const id = nextTimerId++
-      transitionTimers.set(id, { callback, delay })
-      return id
-    },
-    clearTimeout: (id: number) => {
-      clearedTimerIds.push(id)
-      transitionTimers.delete(id)
+      frames.delete(id)
     },
   })
   Object.defineProperty(globalThis, 'IS_REACT_ACT_ENVIRONMENT', {
@@ -527,776 +381,457 @@ async function renderReplay() {
   })
 }
 
-async function completeCurrentChapter(totalMs: number) {
-  playerTimeMs = totalMs
-  const callbacks = [...animationFrames.values()]
-  animationFrames.clear()
+/** Drives the global clock to an explicit animation-frame timestamp. */
+async function advanceTo(wallMs: number) {
+  const pending = [...frames.values()]
+  frames.clear()
   await act(async () => {
-    for (const callback of callbacks) callback(performance.now())
+    for (const callback of pending) callback(wallMs)
   })
 }
 
-async function fireNextTransition() {
-  const entry = transitionTimers.entries().next().value as
-    | [number, { callback: TimerHandler; delay: number | undefined }]
-    | undefined
-  if (!entry) throw new Error('transition timer missing')
-  transitionTimers.delete(entry[0])
+/** Plays from a standing start to `seconds` of activity at 1x. */
+async function playTo(seconds: number) {
   await act(async () => {
-    if (typeof entry[1].callback === 'function') entry[1].callback()
+    click('[data-playback-speed-option="1"]')
   })
+  await advanceTo(0)
+  await advanceTo(seconds * 1000)
 }
 
-async function click(selector: string) {
+function click(selector: string) {
   const target = container.querySelector(selector)
   if (!target) throw new Error(`missing target: ${selector}`)
-  await act(async () => {
-    target.dispatchEvent(new window.Event('click', { bubbles: true }))
-  })
+  target.dispatchEvent(new window.Event('click', { bubbles: true }))
 }
 
-describe('Replay', () => {
-  it('discovers logical tabs and keeps frame selection tab-local', async () => {
-    await renderReplay()
+async function clickAct(selector: string) {
+  await act(async () => click(selector))
+}
 
-    expect(
-      [...container.querySelectorAll('[data-target-chip]')].map(
-        (chip) => chip.textContent,
-      ),
-    ).toEqual([])
-    expect(container.textContent).toContain('No visual recording for this tab')
-    expect(container.querySelector('[data-player-targets]')).toBeNull()
+function attr(selector: string, name: string): string | null | undefined {
+  return container.querySelector(selector)?.getAttribute(name)
+}
 
-    replayResult = { ...replayResult, replay: replayData(events) }
-    await renderReplay()
+function viewport(name: string): string | null | undefined {
+  return attr('[data-viewport-tab]', `data-viewport-${name}`)
+}
 
-    expect(
-      container
-        .querySelector('[data-player-documents]')
-        ?.getAttribute('data-player-documents'),
-    ).toBe('document-a,document-a,document-a')
-    expect(
-      [...container.querySelectorAll('[data-target-chip]')].map(
-        (chip) => chip.textContent,
-      ),
-    ).toEqual(['Tab 1', 'Tab 2'])
-    expect(
-      container
-        .querySelector('[data-playback-playing]')
-        ?.getAttribute('data-playback-playing'),
-    ).toBe('true')
-
-    expect(container.querySelector('[data-frame-tab="2"]')).toBeNull()
-    await click('[data-target-chip="2"]')
-
-    expect(
-      container
-        .querySelector('[data-selected-target]')
-        ?.getAttribute('data-selected-target'),
-    ).toBe('2')
-    expect(
-      container
-        .querySelector('[data-player-documents]')
-        ?.getAttribute('data-player-documents'),
-    ).toBe('document-b,document-b,document-b')
-    expect(
-      container
-        .querySelector('[data-playback-time]')
-        ?.getAttribute('data-playback-time'),
-    ).toBe('0')
-
-    const targetBFrame = container.querySelector('[data-frame-tab="2"]')
-    if (!targetBFrame) throw new Error('tab 2 frame missing')
-    await act(async () => {
-      targetBFrame.dispatchEvent(new window.Event('click', { bubbles: true }))
-    })
-    expect(
-      container
-        .querySelector('[data-playback-time]')
-        ?.getAttribute('data-playback-time'),
-    ).toBe('2')
+function timelineCaptions(): string[] {
+  return [...container.querySelectorAll('[data-action-dispatch]')].map(
+    (row) => row.textContent ?? '',
+  )
+}
 
-    replayResult = {
-      ...replayResult,
-      replay: replayData(events, [1]),
-    }
+function currentCaption(): string | undefined {
+  return [...container.querySelectorAll('[data-action-dispatch]')].find(
+    (row) => row.getAttribute('data-action-current') === 'true',
+  )?.textContent
+}
+
+describe('Replay auto-follow', () => {
+  it('starts on the first playable tab and autoplays global activity', async () => {
+    replayResult.replay = replayData(
+      [...visualEvents(1, 1_000), ...visualEvents(2, 10_000)],
+      [1, 2],
+      [toolFrame(1, 3), toolFrame(2, 12)],
+    )
     await renderReplay()
 
-    expect(
-      container
-        .querySelector('[data-player-documents]')
-        ?.getAttribute('data-player-documents'),
-    ).toBe('document-a,document-a,document-a')
-    expect(
-      container
-        .querySelector('[data-playback-time]')
-        ?.getAttribute('data-playback-time'),
-    ).toBe('0')
+    expect(attr('[data-selected-tab]', 'data-selected-tab')).toBe('1')
+    expect(viewport('tab')).toBe('1')
+    expect(attr('[data-playback-playing]', 'data-playback-playing')).toBe(
+      'true',
+    )
+    // Activity spans the first checkpoint (1s) to the last rrweb event (14s).
+    expect(attr('[data-playback-time]', 'data-playback-total')).toBe('13')
+    expect(currentCaption()).toBeUndefined()
   })
 
-  it('merges navigation lifecycles into one tab-level replay', async () => {
-    const navigationEvents: ReplayEvent[] = [
-      ...events.slice(0, 3),
-      ...events.slice(3).map((candidate) => ({
-        ...candidate,
-        tabId: 1,
-        documentId: 'document-b',
-      })),
-    ]
-    replayResult = {
-      ...replayResult,
-      replay: replayData(navigationEvents),
-    }
-
+  it('switches tabs as chronological tool activity crosses the playhead', async () => {
+    replayResult.replay = replayData(
+      [...visualEvents(1, 1_000), ...visualEvents(2, 10_000)],
+      [1, 2],
+      [toolFrame(1, 3), toolFrame(2, 12)],
+    )
     await renderReplay()
+    await playTo(2)
 
-    expect(container.textContent).not.toContain('Navigation 1')
-    expect(container.textContent).not.toContain('Navigation 2')
-    expect(
-      container
-        .querySelector('[data-player-documents]')
-        ?.getAttribute('data-player-documents'),
-    ).toBe('document-a,document-a,document-a,document-b,document-b,document-b')
-    expect(
-      container.querySelector('[data-target-chip="document-b"]'),
-    ).toBeNull()
-  })
+    expect(currentCaption()).toBe('Action on Tab 1')
+    expect(viewport('tab')).toBe('1')
+    expect(attr('[data-selected-tab]', 'data-selected-tab')).toBe('1')
 
-  it('slices orphan mutations and explains where visual playback starts', async () => {
-    const incompleteEvents: ReplayEvent[] = [
-      {
-        sessionId: 'session-1',
-        documentId: 'document-a',
-        targetId: 'target-a',
-        tabId: 1,
-        ts: 1_000,
-        type: 3,
-        data: {},
-      },
-      {
-        sessionId: 'session-1',
-        documentId: 'document-a',
-        targetId: 'target-a',
-        tabId: 1,
-        ts: 4_000,
-        type: 2,
-        data: {},
-      },
-      {
-        sessionId: 'session-1',
-        documentId: 'document-a',
-        targetId: 'target-a',
-        tabId: 1,
-        ts: 5_000,
-        type: 3,
-        data: {},
-      },
-    ]
-    replayResult = {
-      ...replayResult,
-      replay: replayData(incompleteEvents),
-    }
+    await advanceTo(11_000)
 
-    await renderReplay()
-
-    expect(
-      container
-        .querySelector('[data-player-types]')
-        ?.getAttribute('data-player-types'),
-    ).toBe('2,3')
-    expect(container.textContent).toContain(
-      'Recording incomplete — playback starts at 0:03',
+    expect(currentCaption()).toBe('Action on Tab 2')
+    expect(viewport('tab')).toBe('2')
+    expect(attr('[data-selected-tab]', 'data-selected-tab')).toBe('2')
+    expect(viewport('url')).toBe('https://tab-2.example/path')
+    // The global playhead never restarted for the switch.
+    expect(attr('[data-playback-time]', 'data-playback-time')).toBe('11')
+    expect(attr('[data-playback-playing]', 'data-playback-playing')).toBe(
+      'true',
     )
   })
 
-  it("keeps the selected tab's prefix warning when another tab has a gap", async () => {
-    const partialReplay = replayData([
-      { ...events[0], ts: 0, type: 3 },
-      ...events,
-    ])
-    partialReplay.complete = false
-    const secondTab = partialReplay.tabs[1]
-    if (secondTab) {
-      secondTab.complete = false
-      const firstSegment = secondTab.segments[0]
-      if (firstSegment) firstSegment.hasGap = true
-    }
-    replayResult = { ...replayResult, replay: partialReplay }
-
+  it('keeps every tool in one global timeline regardless of tab', async () => {
+    replayResult.replay = replayData(
+      [...visualEvents(1, 1_000), ...visualEvents(2, 10_000)],
+      [1, 2, 3],
+      [toolFrame(1, 3), toolFrame(null, 6), toolFrame(3, 8), toolFrame(2, 12)],
+    )
     await renderReplay()
 
-    expect(container.textContent).toContain(
-      'Recording incomplete — playback starts at 0:01',
-    )
-    expect(container.textContent).not.toContain(
-      'this replay contains a known gap',
-    )
+    expect(timelineCaptions()).toEqual([
+      'Action on Tab 1',
+      'name_session',
+      'Action on Tab 3',
+      'Action on Tab 2',
+    ])
   })
 
-  it("does not leak another tab's gap into the selected tab", async () => {
-    const partialReplay = replayData(events)
-    partialReplay.complete = false
-    const secondTab = partialReplay.tabs[1]
-    if (secondTab) {
-      secondTab.complete = false
-      const firstSegment = secondTab.segments[0]
-      if (firstSegment) firstSegment.hasGap = true
-    }
-    replayResult = { ...replayResult, replay: partialReplay }
-
+  it('keeps an untabbed tool current without moving the camera', async () => {
+    replayResult.replay = replayData(
+      [...visualEvents(1, 1_000), ...visualEvents(2, 20_000)],
+      [1, 2],
+      [toolFrame(1, 3), toolFrame(null, 6), toolFrame(2, 22)],
+    )
     await renderReplay()
+    await playTo(5)
 
-    expect(container.textContent).not.toContain('Recording incomplete')
+    expect(currentCaption()).toBe('name_session')
+    expect(viewport('caption')).toBe('name_session')
+    expect(viewport('tab')).toBe('1')
+    // An untabbed tool has no URL of its own; the tab's chrome must survive.
+    expect(viewport('url')).toBe('https://tab-1.example/path')
   })
 
-  it('plays each chapter fully, waits one wall-clock second, and preserves speed', async () => {
-    const chapterEvents = [
-      ...visualEvents(1, 1_000),
-      ...visualEvents(2, 10_000, 5_000),
-    ]
-    replayResult = {
-      ...replayResult,
-      replay: replayData(
-        chapterEvents,
-        [1, 2],
-        [
-          chapterFrame(1, 2, 'first.example'),
-          chapterFrame(2, 12, 'second.example'),
-        ],
-      ),
-    }
+  it('keeps a no-visual tab tool current without blanking the viewport', async () => {
+    replayResult.replay = replayData(
+      [...visualEvents(1, 1_000), noVisualEvent(3, 8_000)],
+      [1, 3],
+      [toolFrame(1, 3), toolFrame(3, 8)],
+    )
     await renderReplay()
+    await playTo(7)
 
-    expect(container.textContent).toContain('Tab 1 of 2')
-    expect(container.querySelector('[data-event-timeline]')?.textContent).toBe(
-      'Action on Tab 1',
-    )
-    await click('[data-playback-speed-option="4"]')
-    await completeCurrentChapter(4_000)
+    expect(currentCaption()).toBe('Action on Tab 3')
+    expect(viewport('tab')).toBe('1')
+    expect(container.textContent).not.toContain('No visual recording')
+  })
 
-    expect(container.textContent).toContain(
-      'Tab 1 complete → Opening Tab 2 · second.example',
+  it('collapses several crossed actions into one switch to the latest tab', async () => {
+    replayResult.replay = replayData(
+      [
+        ...visualEvents(1, 1_000),
+        ...visualEvents(2, 6_000),
+        ...visualEvents(3, 12_000),
+      ],
+      [1, 2, 3],
+      [toolFrame(1, 3), toolFrame(2, 7), toolFrame(null, 9), toolFrame(3, 14)],
     )
-    expect(
-      container
-        .querySelector('[data-selected-target]')
-        ?.getAttribute('data-selected-target'),
-    ).toBe('2')
-    expect(container.textContent).toContain('Tab 2 of 2')
-    expect(container.querySelector('[data-event-timeline]')?.textContent).toBe(
-      'Action on Tab 2',
-    )
-    expect([...transitionTimers.values()].map(({ delay }) => delay)).toEqual([
-      1_000,
-    ])
-    expect(
-      playerCalls.some(
-        (call) => call.kind === 'play' && call.tabId === 2 && call.value === 0,
-      ),
-    ).toBe(false)
-
-    await fireNextTransition()
-
-    expect(container.textContent).not.toContain('Tab 1 complete')
-    expect(
-      container
-        .querySelector('[data-playback-playing]')
-        ?.getAttribute('data-playback-playing'),
-    ).toBe('true')
-    expect(
-      container
-        .querySelector('[data-playback-speed]')
-        ?.getAttribute('data-playback-speed'),
-    ).toBe('4')
-    expect(
-      playerCalls.some(
-        (call) => call.kind === 'play' && call.tabId === 2 && call.value === 0,
-      ),
-    ).toBe(true)
-    expect(maxActivePlayers).toBe(1)
+    await renderReplay()
+    await playTo(13)
+
+    expect(viewport('tab')).toBe('3')
+    expect(currentCaption()).toBe('Action on Tab 3')
   })
 
-  it('changes the warning, viewport, timeline, and local clock as one chapter', async () => {
-    const chapterEvents = [
-      ...visualEvents(1, 1_000),
-      ...visualEvents(2, 10_000),
-    ]
-    const chapterReplay = replayData(
-      chapterEvents,
+  it('resolves the same state seeking backward as forward', async () => {
+    replayResult.replay = replayData(
+      [...visualEvents(1, 1_000), ...visualEvents(2, 10_000)],
       [1, 2],
-      [chapterFrame(1, 2), chapterFrame(2, 11)],
+      [toolFrame(1, 3), toolFrame(2, 12)],
     )
-    const secondTab = chapterReplay.tabs[1]
-    if (!secondTab) throw new Error('tab 2 metadata missing')
-    secondTab.complete = false
-    const secondSegment = secondTab.segments[0]
-    if (!secondSegment) throw new Error('tab 2 segment missing')
-    secondSegment.hasGap = true
-    replayResult = { ...replayResult, replay: chapterReplay }
     await renderReplay()
 
-    expect(container.textContent).not.toContain('Recording incomplete')
-    await completeCurrentChapter(4_000)
+    await clickAct('[data-playback-seek="9"]')
+    const forward = {
+      tab: viewport('tab'),
+      caption: currentCaption(),
+      trackTime: viewport('track-time'),
+      live: viewport('live'),
+    }
 
-    expect(container.textContent).toContain('Tab 2 of 2')
-    expect(container.textContent).toContain(
-      'Recording incomplete — this replay contains a known gap',
-    )
-    expect(
-      container
-        .querySelector('[data-player-documents]')
-        ?.getAttribute('data-player-documents'),
-    ).toBe('document-2,document-2,document-2')
-    expect(container.querySelector('[data-event-timeline]')?.textContent).toBe(
-      'Action on Tab 2',
-    )
-    expect(
-      container
-        .querySelector('[data-playback-time]')
-        ?.getAttribute('data-playback-time'),
-    ).toBe('0')
+    await clickAct('[data-playback-seek="0"]')
+    expect(viewport('tab')).toBe('1')
+    expect(currentCaption()).toBeUndefined()
+
+    await clickAct('[data-playback-seek="14"]')
+    await clickAct('[data-playback-seek="9"]')
+
+    expect({
+      tab: viewport('tab'),
+      caption: currentCaption(),
+      trackTime: viewport('track-time'),
+      live: viewport('live'),
+    }).toEqual(forward)
   })
 
-  it('summarizes consecutive middle and trailing no-visual chapters', async () => {
-    const chapterEvents = [
-      ...visualEvents(1, 1_000),
-      noVisualEvent(2, 6_000),
-      noVisualEvent(3, 7_000),
-      ...visualEvents(4, 10_000),
-      noVisualEvent(5, 16_000),
-      noVisualEvent(6, 17_000),
-    ]
-    replayResult = {
-      ...replayResult,
-      replay: replayData(
-        chapterEvents,
-        [1, 2, 3, 4, 5, 6],
-        [
-          chapterFrame(1, 2),
-          chapterFrame(2, 6),
-          chapterFrame(3, 7),
-          chapterFrame(4, 11, 'fourth.example'),
-          chapterFrame(5, 16),
-          chapterFrame(6, 17),
-        ],
-      ),
-    }
+  it('pauses and seeks to an action start when its timeline row is clicked', async () => {
+    replayResult.replay = replayData(
+      [...visualEvents(1, 1_000), ...visualEvents(2, 10_000)],
+      [1, 2],
+      [toolFrame(1, 3), toolFrame(2, 12, { durationMs: 2_000 })],
+    )
     await renderReplay()
+    await clickAct('[data-action-dispatch="12000"]')
 
-    await completeCurrentChapter(4_000)
-    expect(container.textContent).toContain(
-      'Tab 1 complete → Opening Tab 4 · fourth.example',
-    )
-    expect(container.textContent).toContain(
-      'Skipped Tabs 2–3 — no visual recordings',
+    // 12s completion minus a 2s tool, rebased on the 1s activity origin.
+    expect(attr('[data-playback-time]', 'data-playback-time')).toBe('9')
+    expect(attr('[data-playback-playing]', 'data-playback-playing')).toBe(
+      'false',
     )
-    expect(container.textContent).toContain('Tab 4 of 6')
+    expect(viewport('tab')).toBe('2')
+    expect(currentCaption()).toBe('Action on Tab 2')
+  })
+})
 
-    await fireNextTransition()
-    await completeCurrentChapter(4_000)
-    expect(container.textContent).toContain('Tab 4 complete → Replay complete')
-    expect(container.textContent).toContain(
-      'Skipped Tabs 5–6 — no visual recordings',
-    )
-    expect(container.textContent).not.toContain(
-      'Replay completeReplay complete',
+describe('Replay manual control', () => {
+  const twoTabs = () =>
+    replayData(
+      [...visualEvents(1, 1_000), ...visualEvents(2, 10_000)],
+      [1, 2],
+      [toolFrame(1, 3), toolFrame(2, 12)],
     )
 
-    await fireNextTransition()
-    expect(container.textContent).toContain('Replay complete')
-    expect(transitionTimers.size).toBe(0)
-  })
-
-  it('explains leading skipped chapters before autoplaying the first playable tab', async () => {
-    const chapterEvents = [
-      noVisualEvent(1, 1_000),
-      noVisualEvent(2, 2_000),
-      ...visualEvents(3, 3_000),
-    ]
-    replayResult = {
-      ...replayResult,
-      replay: replayData(
-        chapterEvents,
-        [1, 2, 3],
-        [
-          chapterFrame(1, 1),
-          chapterFrame(2, 2),
-          chapterFrame(3, 3, 'playable.example'),
-        ],
-      ),
-    }
+  it('pins a clicked tab at the unchanged global time', async () => {
+    replayResult.replay = twoTabs()
     await renderReplay()
+    await playTo(3)
+    expect(viewport('tab')).toBe('1')
 
-    expect(container.textContent).toContain(
-      'Starting replay → Opening Tab 3 · playable.example',
-    )
-    expect(container.textContent).toContain(
-      'Skipped Tabs 1–2 — no visual recordings',
+    await clickAct('[data-tab-chip="2"]')
+
+    expect(attr('[data-playback-time]', 'data-playback-time')).toBe('3')
+    expect(attr('[data-playback-playing]', 'data-playback-playing')).toBe(
+      'false',
     )
-    expect(container.textContent).toContain('Tab 3 of 3')
-    expect(
-      container
-        .querySelector('[data-playback-playing]')
-        ?.getAttribute('data-playback-playing'),
-    ).toBe('false')
-
-    await fireNextTransition()
-    expect(
-      container
-        .querySelector('[data-playback-playing]')
-        ?.getAttribute('data-playback-playing'),
-    ).toBe('true')
+    expect(viewport('tab')).toBe('2')
+    // Tab 2 has not started recording at 3s, so it holds its first frame.
+    expect(viewport('track-time')).toBe('0')
+    expect(viewport('live')).toBe('false')
+    expect(container.querySelector('[data-resume-follow]')).not.toBeNull()
   })
 
-  it('waits for event loading before completing an all-no-visual replay', async () => {
-    const noVisualReplay = replayData(
-      [noVisualEvent(1, 1_000), noVisualEvent(2, 2_000)],
-      [1, 2],
-      [chapterFrame(1, 1), chapterFrame(2, 2)],
-    )
-    noVisualReplay.eventsLoaded = false
-    replayResult = { ...replayResult, replay: noVisualReplay }
+  it('keeps projecting a pinned tab while scrubbing', async () => {
+    replayResult.replay = twoTabs()
     await renderReplay()
+    await clickAct('[data-tab-chip="2"]')
 
-    expect(container.textContent).toContain('Tab 1 of 2')
-    expect(container.textContent).not.toContain('No visual recordings')
-    expect(transitionTimers.size).toBe(0)
+    // Tab 2 records from 9s to 13s of activity; the pin projects global time
+    // into that window and clamps outside it.
+    await clickAct('[data-playback-seek="9"]')
+    expect(viewport('tab')).toBe('2')
+    expect(viewport('track-time')).toBe('0')
+    expect(viewport('live')).toBe('true')
 
-    noVisualReplay.eventsLoaded = true
-    replayResult = { ...replayResult, replay: { ...noVisualReplay } }
+    await clickAct('[data-playback-seek="14"]')
+    expect(viewport('tab')).toBe('2')
+    expect(viewport('track-time')).toBe('4')
+    expect(viewport('live')).toBe('false')
+    expect(currentCaption()).toBe('Action on Tab 2')
+  })
+
+  it('clears the pin on Resume follow without moving the playhead', async () => {
+    replayResult.replay = twoTabs()
     await renderReplay()
+    await playTo(3)
+    await clickAct('[data-tab-chip="2"]')
 
-    expect(container.textContent).toContain(
-      'No visual recordings → Replay complete',
-    )
-    expect(container.textContent).toContain(
-      'Skipped Tabs 1–2 — no visual recordings',
-    )
-    expect([...transitionTimers.values()][0]?.delay).toBe(1_000)
+    await clickAct('[data-resume-follow]')
 
-    await fireNextTransition()
-    expect(container.textContent).toContain('Replay complete')
-    expect(container.querySelector('[data-playback-toggle]')).toBeNull()
+    expect(attr('[data-playback-time]', 'data-playback-time')).toBe('3')
+    expect(viewport('tab')).toBe('1')
+    expect(container.querySelector('[data-resume-follow]')).toBeNull()
   })
 
-  it('does not complete an all-no-visual replay while the session is live', async () => {
-    const liveReplay = replayData(
-      [noVisualEvent(1, 1_000)],
-      [1],
-      [chapterFrame(1, 1)],
-    )
-    liveReplay.status = 'running'
-    replayResult = { ...replayResult, replay: liveReplay }
+  it('resumes automatic following when Play is pressed while pinned', async () => {
+    replayResult.replay = twoTabs()
     await renderReplay()
+    await playTo(3)
+    await clickAct('[data-tab-chip="2"]')
+    expect(viewport('tab')).toBe('2')
+
+    await clickAct('[data-playback-toggle]')
 
-    expect(container.textContent).not.toContain(
-      'No visual recordings → Replay complete',
+    expect(attr('[data-playback-playing]', 'data-playback-playing')).toBe(
+      'true',
     )
-    expect(container.textContent).not.toContain('Replay complete')
-    expect(transitionTimers.size).toBe(0)
+    expect(viewport('tab')).toBe('1')
+    expect(container.querySelector('[data-resume-follow]')).toBeNull()
   })
 
-  it('autoplays when the first playable snapshot arrives after metadata', async () => {
-    const loadingReplay = replayData(
-      [],
-      [1],
-      [chapterFrame(1, 1, 'first.example')],
+  it('shows the no-recording state for a pinned tab without visuals', async () => {
+    replayResult.replay = replayData(
+      [...visualEvents(1, 1_000), noVisualEvent(3, 8_000)],
+      [1, 3],
+      [toolFrame(1, 3), toolFrame(3, 8)],
     )
-    loadingReplay.eventsLoaded = false
-    replayResult = { ...replayResult, replay: loadingReplay }
     await renderReplay()
+    await clickAct('[data-tab-chip="3"]')
 
     expect(container.textContent).toContain('No visual recording for this tab')
+    expect(timelineCaptions()).toEqual(['Action on Tab 1', 'Action on Tab 3'])
+    expect(container.querySelector('[data-playback-toggle]')).not.toBeNull()
+  })
 
-    replayResult = {
-      ...replayResult,
-      replay: replayData(
-        visualEvents(1, 1_000),
-        [1],
-        [chapterFrame(1, 1, 'first.example')],
-      ),
-    }
+  it('restarts global activity from zero after completion', async () => {
+    replayResult.replay = twoTabs()
     await renderReplay()
+    await playTo(20)
 
-    expect(
-      container
-        .querySelector('[data-playback-playing]')
-        ?.getAttribute('data-playback-playing'),
-    ).toBe('true')
-    expect(
-      container
-        .querySelector('[data-playback-time]')
-        ?.getAttribute('data-playback-time'),
-    ).toBe('0')
-  })
-
-  it('preserves a manual chapter choice while visual events are loading', async () => {
-    const loadingReplay = replayData(
-      [],
-      [1, 2],
-      [chapterFrame(1, 1), chapterFrame(2, 2)],
+    expect(attr('[data-playback-time]', 'data-playback-time')).toBe('13')
+    expect(attr('[data-playback-toggle]', 'aria-label')).toBe(
+      'Restart playback',
     )
-    loadingReplay.eventsLoaded = false
-    replayResult = { ...replayResult, replay: loadingReplay }
-    await renderReplay()
-    await click('[data-target-chip="2"]')
 
-    replayResult = {
-      ...replayResult,
-      replay: replayData(
-        [...visualEvents(1, 1_000), ...visualEvents(2, 10_000)],
-        [1, 2],
-        [chapterFrame(1, 1), chapterFrame(2, 11)],
-      ),
-    }
-    await renderReplay()
+    await clickAct('[data-playback-toggle]')
 
-    expect(
-      container
-        .querySelector('[data-selected-target]')
-        ?.getAttribute('data-selected-target'),
-    ).toBe('2')
-    expect(
-      container
-        .querySelector('[data-playback-playing]')
-        ?.getAttribute('data-playback-playing'),
-    ).toBe('false')
-    expect(
-      container
-        .querySelector('[data-playback-time]')
-        ?.getAttribute('data-playback-time'),
-    ).toBe('0')
+    expect(attr('[data-playback-time]', 'data-playback-time')).toBe('0')
+    expect(attr('[data-playback-playing]', 'data-playback-playing')).toBe(
+      'true',
+    )
+    expect(viewport('tab')).toBe('1')
   })
 
-  it('cancels an empty-replay transition when a playable snapshot arrives', async () => {
-    const emptyReplay = replayData(
-      [noVisualEvent(1, 1_000)],
-      [1],
-      [chapterFrame(1, 1, 'first.example')],
-    )
-    replayResult = { ...replayResult, replay: emptyReplay }
+  it('preserves the chosen speed across automatic switches', async () => {
+    replayResult.replay = twoTabs()
     await renderReplay()
+    await clickAct('[data-playback-speed-option="4"]')
+    await advanceTo(0)
+    await advanceTo(3_000)
 
-    const staleTransition = [...transitionTimers.values()][0]?.callback
-    expect(container.textContent).toContain(
-      'No visual recordings → Replay complete',
-    )
+    expect(attr('[data-playback-speed]', 'data-playback-speed')).toBe('4')
+    expect(viewport('tab')).toBe('2')
+    expect(viewport('speed')).toBe('4')
+  })
+})
 
-    replayResult = {
-      ...replayResult,
-      replay: replayData(
-        visualEvents(1, 1_000),
-        [1],
-        [chapterFrame(1, 1, 'first.example')],
-      ),
-    }
+describe('Replay recording states', () => {
+  it('merges same-tab navigations into one visual track', async () => {
+    const navigationEvents = [
+      ...visualEvents(1, 1_000),
+      ...visualEvents(1, 10_000).map((event) => ({
+        ...event,
+        documentId: 'document-1b',
+      })),
+    ]
+    replayResult.replay = replayData(navigationEvents, [1], [toolFrame(1, 12)])
     await renderReplay()
 
-    expect(transitionTimers.size).toBe(0)
-    expect(container.textContent).not.toContain('No visual recordings')
-    expect(
-      container
-        .querySelector('[data-playback-playing]')
-        ?.getAttribute('data-playback-playing'),
-    ).toBe('true')
-
-    await act(async () => {
-      if (typeof staleTransition === 'function') staleTransition()
-    })
-    expect(container.textContent).not.toContain('Replay complete')
+    expect(viewport('documents')).toBe(
+      'document-1,document-1,document-1,document-1b,document-1b,document-1b',
+    )
+    expect(container.querySelector('[data-tab-chip="document-1b"]')).toBeNull()
   })
 
-  it('starts a playable snapshot that arrives after empty-replay completion', async () => {
-    replayResult = {
-      ...replayResult,
-      replay: replayData(
-        [noVisualEvent(1, 1_000), noVisualEvent(2, 2_000)],
-        [1, 2],
-        [chapterFrame(1, 1), chapterFrame(2, 2, 'second.example')],
-      ),
-    }
-    await renderReplay()
-    await fireNextTransition()
-    expect(container.textContent).toContain('Replay complete')
-
-    replayResult = {
-      ...replayResult,
-      replay: replayData(
-        [noVisualEvent(1, 1_000), ...visualEvents(2, 2_000)],
-        [1, 2],
-        [chapterFrame(1, 1), chapterFrame(2, 2, 'second.example')],
-      ),
-    }
+  it('keeps the incomplete-prefix warning for the visible tab', async () => {
+    replayResult.replay = replayData(
+      [
+        noVisualEvent(1, 1_000),
+        ...visualEvents(1, 4_000).slice(1),
+        ...visualEvents(2, 20_000),
+      ],
+      [1, 2],
+      [toolFrame(1, 5)],
+    )
     await renderReplay()
 
-    expect(container.textContent).not.toContain('Replay complete')
     expect(container.textContent).toContain(
-      'Starting replay → Opening Tab 2 · second.example',
+      'Recording incomplete — playback starts at 0:03',
     )
-    expect(
-      container
-        .querySelector('[data-selected-target]')
-        ?.getAttribute('data-selected-target'),
-    ).toBe('2')
-    expect(
-      container
-        .querySelector('[data-playback-playing]')
-        ?.getAttribute('data-playback-playing'),
-    ).toBe('false')
-
-    await fireNextTransition()
-    expect(
-      container
-        .querySelector('[data-playback-playing]')
-        ?.getAttribute('data-playback-playing'),
-    ).toBe('true')
-    expect(
-      container
-        .querySelector('[data-playback-time]')
-        ?.getAttribute('data-playback-time'),
-    ).toBe('0')
   })
 
-  it('continues into a later chapter that becomes playable after completion', async () => {
-    replayResult = {
-      ...replayResult,
-      replay: replayData(
-        [...visualEvents(1, 1_000), noVisualEvent(2, 7_000)],
-        [1, 2],
-        [chapterFrame(1, 2), chapterFrame(2, 7, 'second.example')],
-      ),
-    }
+  it("does not leak another tab's gap into the visible tab", async () => {
+    const withGap = replayData(
+      [...visualEvents(1, 1_000), ...visualEvents(2, 10_000)],
+      [1, 2],
+      [toolFrame(1, 3), toolFrame(2, 12)],
+    )
+    const secondTab = withGap.tabs[1]
+    if (!secondTab) throw new Error('tab 2 metadata missing')
+    secondTab.complete = false
+    const segment = secondTab.segments[0]
+    if (segment) segment.hasGap = true
+    replayResult.replay = withGap
     await renderReplay()
-    await completeCurrentChapter(4_000)
-    await fireNextTransition()
-    expect(container.textContent).toContain('Replay complete')
 
-    replayResult = {
-      ...replayResult,
-      replay: replayData(
-        [...visualEvents(1, 1_000), ...visualEvents(2, 10_000)],
-        [1, 2],
-        [chapterFrame(1, 2), chapterFrame(2, 11, 'second.example')],
-      ),
-    }
-    await renderReplay()
+    expect(container.textContent).not.toContain('Recording incomplete')
 
-    expect(container.textContent).not.toContain('Replay complete')
+    await clickAct('[data-tab-chip="2"]')
     expect(container.textContent).toContain(
-      'Tab 1 complete → Opening Tab 2 · second.example',
+      'Recording incomplete — this replay contains a known gap',
     )
-    expect(
-      container
-        .querySelector('[data-selected-target]')
-        ?.getAttribute('data-selected-target'),
-    ).toBe('2')
-
-    await fireNextTransition()
-    expect(
-      container
-        .querySelector('[data-playback-playing]')
-        ?.getAttribute('data-playback-playing'),
-    ).toBe('true')
   })
 
-  it("resumes when the completed chapter's recording grows", async () => {
-    replayResult = {
-      ...replayResult,
-      replay: replayData(visualEvents(1, 1_000), [1], [chapterFrame(1, 2)]),
-    }
+  it('offers no transport until a playable recording resolves', async () => {
+    const loading = replayData([], [1], [toolFrame(1, 3)])
+    loading.eventsLoaded = false
+    replayResult.replay = loading
     await renderReplay()
-    await completeCurrentChapter(4_000)
-    expect(container.textContent).toContain('Replay complete')
+
+    expect(container.textContent).toContain('No visual recording for this tab')
+    expect(container.querySelector('[data-playback-toggle]')).toBeNull()
+    expect(timelineCaptions()).toEqual(['Action on Tab 1'])
 
     replayResult = {
       ...replayResult,
-      replay: replayData(
-        visualEvents(1, 1_000, 6_000),
-        [1],
-        [chapterFrame(1, 2)],
-      ),
+      replay: replayData(visualEvents(1, 1_000), [1], [toolFrame(1, 3)]),
     }
     await renderReplay()
 
-    expect(container.textContent).not.toContain('Replay complete')
-    expect(
-      container
-        .querySelector('[data-playback-time]')
-        ?.getAttribute('data-playback-time'),
-    ).toBe('4')
-    expect(
-      container
-        .querySelector('[data-playback-playing]')
-        ?.getAttribute('data-playback-playing'),
-    ).toBe('true')
-
-    await completeCurrentChapter(6_000)
-    expect(container.textContent).toContain('Replay complete')
+    expect(attr('[data-playback-playing]', 'data-playback-playing')).toBe(
+      'true',
+    )
+    expect(attr('[data-playback-time]', 'data-playback-time')).toBe('0')
   })
 
-  it('waits for the current event revision before finalizing the sequence', async () => {
-    const refreshingReplay = replayData(
+  it('extends a live replay without rewinding accepted activity', async () => {
+    replayResult.replay = replayData(
       visualEvents(1, 1_000),
       [1],
-      [chapterFrame(1, 2)],
+      [toolFrame(1, 3)],
     )
-    refreshingReplay.eventsLoaded = false
-    replayResult = { ...replayResult, replay: refreshingReplay }
     await renderReplay()
-    await completeCurrentChapter(4_000)
+    await playTo(9)
 
-    expect(container.textContent).not.toContain('Replay complete')
-
-    replayResult = {
-      ...replayResult,
-      replay: { ...refreshingReplay, eventsLoaded: true },
-    }
-    await renderReplay()
-
-    expect(container.textContent).toContain('Replay complete')
-  })
+    expect(attr('[data-playback-time]', 'data-playback-time')).toBe('4')
+    expect(attr('[data-playback-playing]', 'data-playback-playing')).toBe(
+      'false',
+    )
 
-  it('plays a static visual snapshot before advancing', async () => {
     replayResult = {
       ...replayResult,
       replay: replayData(
-        [...staticVisualEvents(1, 1_000), ...visualEvents(2, 10_000)],
-        [1, 2],
-        [chapterFrame(1, 1), chapterFrame(2, 11)],
+        visualEvents(1, 1_000, 10_000),
+        [1],
+        [toolFrame(1, 3)],
       ),
     }
     await renderReplay()
 
-    expect(container.querySelector('[data-player-types]')).not.toBeNull()
-    expect(
-      container
-        .querySelector('[data-playback-playing]')
-        ?.getAttribute('data-playback-playing'),
-    ).toBe('true')
-
-    await completeCurrentChapter(0)
-    expect(container.textContent).toContain(
-      'Tab 1 complete → Opening Tab 2 · tab-2.example',
+    expect(attr('[data-playback-time]', 'data-playback-time')).toBe('4')
+    expect(attr('[data-playback-total]', 'data-playback-total')).toBe('10')
+    expect(attr('[data-playback-playing]', 'data-playback-playing')).toBe(
+      'true',
     )
   })
 
-  it('resets selection, transport, and stale transitions when the session changes', async () => {
-    replayResult = {
-      ...replayResult,
-      replay: replayData(
-        [...visualEvents(1, 1_000), ...visualEvents(2, 10_000)],
-        [1, 2],
-        [chapterFrame(1, 2), chapterFrame(2, 11)],
-      ),
-    }
+  it('resets the pin and the clock when the session changes', async () => {
+    replayResult.replay = replayData(
+      [...visualEvents(1, 1_000), ...visualEvents(2, 10_000)],
+      [1, 2],
+      [toolFrame(1, 3), toolFrame(2, 12)],
+    )
     await renderReplay()
-    await completeCurrentChapter(4_000)
-    const staleTransition = [...transitionTimers.values()][0]?.callback
+    await playTo(3)
+    await clickAct('[data-tab-chip="2"]')
 
     const nextSession = replayData(
       [...visualEvents(2, 1_000), ...visualEvents(3, 10_000)],
       [2, 3],
-      [chapterFrame(2, 2), chapterFrame(3, 11)],
+      [toolFrame(2, 3), toolFrame(3, 12)],
     )
     nextSession.sessionId = 'session-2'
     replayResult = {
@@ -1306,283 +841,106 @@ describe('Replay', () => {
     }
     await renderReplay()
 
-    expect(transitionTimers.size).toBe(0)
-    expect(container.textContent).not.toContain('Tab 1 complete')
-    expect(container.textContent).not.toContain('Replay complete')
-    expect(container.textContent).toContain('Tab 1 of 2')
-    expect(
-      container
-        .querySelector('[data-selected-target]')
-        ?.getAttribute('data-selected-target'),
-    ).toBe('2')
-    expect(
-      container
-        .querySelector('[data-playback-time]')
-        ?.getAttribute('data-playback-time'),
-    ).toBe('0')
-    expect(
-      container
-        .querySelector('[data-playback-playing]')
-        ?.getAttribute('data-playback-playing'),
-    ).toBe('true')
-
-    await act(async () => {
-      if (typeof staleTransition === 'function') staleTransition()
-    })
-    expect(
-      container
-        .querySelector('[data-selected-target]')
-        ?.getAttribute('data-selected-target'),
-    ).toBe('2')
+    expect(container.querySelector('[data-resume-follow]')).toBeNull()
+    expect(attr('[data-playback-time]', 'data-playback-time')).toBe('0')
+    expect(attr('[data-playback-playing]', 'data-playback-playing')).toBe(
+      'true',
+    )
+    expect(viewport('tab')).toBe('2')
   })
 
-  it('cancels a pending transition and invalidates its callback on manual selection', async () => {
-    const chapterEvents = [
-      ...visualEvents(1, 1_000),
-      ...visualEvents(2, 10_000),
-      ...visualEvents(3, 20_000),
-    ]
-    replayResult = {
-      ...replayResult,
-      replay: replayData(
-        chapterEvents,
-        [1, 2, 3],
-        [chapterFrame(1, 2), chapterFrame(2, 11), chapterFrame(3, 21)],
-      ),
-    }
+  it('keeps a single-tab session on the same global model', async () => {
+    replayResult.replay = replayData(
+      visualEvents(1, 1_000),
+      [1],
+      [toolFrame(1, 3)],
+    )
     await renderReplay()
-    await completeCurrentChapter(4_000)
-
-    const pending = [...transitionTimers.values()][0]?.callback
-    await click('[data-target-chip="3"]')
-
-    expect(transitionTimers.size).toBe(0)
-    expect(clearedTimerIds).toHaveLength(1)
-    expect(container.textContent).not.toContain('Tab 1 complete')
-    expect(
-      container
-        .querySelector('[data-selected-target]')
-        ?.getAttribute('data-selected-target'),
-    ).toBe('3')
-    expect(
-      container
-        .querySelector('[data-playback-time]')
-        ?.getAttribute('data-playback-time'),
-    ).toBe('0')
-    expect(
-      container
-        .querySelector('[data-playback-playing]')
-        ?.getAttribute('data-playback-playing'),
-    ).toBe('false')
-
-    await act(async () => {
-      if (typeof pending === 'function') pending()
-    })
-    expect(
-      container
-        .querySelector('[data-selected-target]')
-        ?.getAttribute('data-selected-target'),
-    ).toBe('3')
-    expect(
-      container
-        .querySelector('[data-playback-playing]')
-        ?.getAttribute('data-playback-playing'),
-    ).toBe('false')
-  })
 
-  it('lets the active destination chip cancel its transition and continue forward', async () => {
-    replayResult = {
-      ...replayResult,
-      replay: replayData(
-        [
-          ...visualEvents(1, 1_000),
-          ...visualEvents(2, 10_000),
-          ...visualEvents(3, 20_000),
-        ],
-        [1, 2, 3],
-        [chapterFrame(1, 2), chapterFrame(2, 11), chapterFrame(3, 21)],
-      ),
-    }
-    await renderReplay()
-    await completeCurrentChapter(4_000)
-
-    expect(container.textContent).toContain('Tab 1 complete')
-    await click('[data-target-chip="2"]')
-
-    expect(transitionTimers.size).toBe(0)
-    expect(container.textContent).not.toContain('Tab 1 complete')
-    expect(
-      container
-        .querySelector('[data-playback-playing]')
-        ?.getAttribute('data-playback-playing'),
-    ).toBe('false')
-    expect(
-      container
-        .querySelector('[data-playback-time]')
-        ?.getAttribute('data-playback-time'),
-    ).toBe('0')
-
-    await click('[data-playback-toggle]')
-    await completeCurrentChapter(4_000)
-    expect(container.textContent).toContain(
-      'Tab 2 complete → Opening Tab 3 · tab-3.example',
+    expect(container.querySelector('[data-selected-tab]')).toBeNull()
+    expect(attr('[data-playback-playing]', 'data-playback-playing')).toBe(
+      'true',
     )
+
+    await playTo(9)
+    expect(attr('[data-playback-time]', 'data-playback-time')).toBe('4')
+    expect(viewport('tab')).toBe('1')
   })
 
-  it('keeps a manually selected no-visual chapter paused and tab-local', async () => {
-    const chapterEvents = [
-      ...visualEvents(1, 1_000),
-      noVisualEvent(2, 7_000),
-      ...visualEvents(3, 10_000),
-    ]
-    replayResult = {
-      ...replayResult,
-      replay: replayData(
-        chapterEvents,
-        [1, 2, 3],
-        [chapterFrame(1, 2), chapterFrame(2, 7), chapterFrame(3, 11)],
-      ),
-    }
+  it('cancels the animation loop when the replay unmounts', async () => {
+    replayResult.replay = replayData(
+      visualEvents(1, 1_000),
+      [1],
+      [toolFrame(1, 3)],
+    )
     await renderReplay()
-    await click('[data-target-chip="2"]')
+    await advanceTo(0)
+    expect(frames.size).toBe(1)
 
-    expect(container.textContent).toContain('No visual recording for this tab')
-    expect(container.textContent).toContain('Tab 2 of 3')
-    expect(container.querySelector('[data-event-timeline]')?.textContent).toBe(
-      'Action on Tab 2',
-    )
-    expect(container.querySelector('[data-playback-toggle]')).toBeNull()
-    expect(transitionTimers.size).toBe(0)
-  })
+    await act(async () => root.render(<div data-unmounted />))
 
-  it('restarts a completed sequence from the first playable tab', async () => {
-    const chapterEvents = [
-      ...visualEvents(1, 1_000),
-      ...visualEvents(2, 10_000),
-    ]
-    replayResult = {
-      ...replayResult,
-      replay: replayData(
-        chapterEvents,
-        [1, 2],
-        [chapterFrame(1, 2), chapterFrame(2, 11)],
-      ),
-    }
-    await renderReplay()
-    await click('[data-playback-speed-option="4"]')
-    await completeCurrentChapter(4_000)
-    await fireNextTransition()
-    await completeCurrentChapter(4_000)
-
-    expect(container.textContent).toContain('Replay complete')
-    expect(
-      container
-        .querySelector('[data-playback-toggle]')
-        ?.getAttribute('aria-label'),
-    ).toBe('Restart playback')
-
-    await click('[data-playback-toggle]')
-
-    expect(
-      container
-        .querySelector('[data-selected-target]')
-        ?.getAttribute('data-selected-target'),
-    ).toBe('1')
-    expect(container.textContent).toContain('Tab 1 of 2')
-    expect(
-      container
-        .querySelector('[data-playback-time]')
-        ?.getAttribute('data-playback-time'),
-    ).toBe('0')
-    expect(
-      container
-        .querySelector('[data-playback-playing]')
-        ?.getAttribute('data-playback-playing'),
-    ).toBe('true')
-    expect(
-      container
-        .querySelector('[data-playback-speed]')
-        ?.getAttribute('data-playback-speed'),
-    ).toBe('4')
+    expect(frames.size).toBe(0)
+    expect(container.querySelector('[data-unmounted]')).not.toBeNull()
   })
+})
 
-  it('keeps a single playable tab unchanged apart from chapter progress', async () => {
-    replayResult = {
-      ...replayResult,
-      replay: replayData(visualEvents(1, 1_000), [1], [chapterFrame(1, 2)]),
-    }
+describe('Replay Trendshift regression', () => {
+  // Tab 1 stops emitting DOM events at 9.003s but keeps receiving tool calls
+  // out to 38.321s. Chapter playback ended at 9.003s and could never reach them.
+  const TAB_1_VISUAL_END_MS = 9_003
+  const trendshift = () =>
+    replayData(
+      [
+        ...visualEvents(1, 0, TAB_1_VISUAL_END_MS),
+        ...visualEvents(2, 12_000, 6_000),
+      ],
+      [1, 2],
+      [
+        toolFrame(1, 2.053),
+        toolFrame(null, 14),
+        toolFrame(2, 16),
+        toolFrame(1, 24.225),
+        toolFrame(1, 26.717),
+        toolFrame(1, 38.321),
+      ],
+    )
+
+  it('reaches every late tool while holding the final recorded frame', async () => {
+    replayResult.replay = trendshift()
     await renderReplay()
 
-    expect(container.textContent).toContain('Tab 1 of 1')
-    expect(container.querySelector('[data-selected-target]')).toBeNull()
-    expect(
-      container
-        .querySelector('[data-playback-playing]')
-        ?.getAttribute('data-playback-playing'),
-    ).toBe('true')
-
-    await completeCurrentChapter(4_000)
-    expect(container.textContent).toContain('Replay complete')
-    expect(transitionTimers.size).toBe(0)
-  })
+    expect(attr('[data-playback-time]', 'data-playback-total')).toBe('38.321')
 
-  it('resumes from a manual seek after sequence completion', async () => {
-    replayResult = {
-      ...replayResult,
-      replay: replayData(visualEvents(1, 1_000), [1], [chapterFrame(1, 2)]),
+    for (const seconds of [24.225, 26.717, 38.321]) {
+      await clickAct(`[data-playback-seek="${seconds}"]`)
+      expect(currentCaption()).toBe('Action on Tab 1')
+      expect(viewport('tab')).toBe('1')
+      expect(viewport('track-time')).toBe(String(TAB_1_VISUAL_END_MS / 1000))
+      expect(viewport('live')).toBe('false')
     }
-    await renderReplay()
-    await completeCurrentChapter(4_000)
-    expect(container.textContent).toContain('Replay complete')
-
-    await click('[data-playback-seek-middle]')
-
-    expect(container.textContent).not.toContain('Replay complete')
-    expect(
-      container
-        .querySelector('[data-playback-time]')
-        ?.getAttribute('data-playback-time'),
-    ).toBe('2')
-    expect(
-      container
-        .querySelector('[data-playback-toggle]')
-        ?.getAttribute('aria-label'),
-    ).toBe('Play')
-
-    await click('[data-playback-toggle]')
-    expect(
-      container
-        .querySelector('[data-playback-time]')
-        ?.getAttribute('data-playback-time'),
-    ).toBe('2')
-    expect(
-      container
-        .querySelector('[data-playback-playing]')
-        ?.getAttribute('data-playback-playing'),
-    ).toBe('true')
   })
 
-  it('clears the transition timer when the replay unmounts', async () => {
-    replayResult = {
-      ...replayResult,
-      replay: replayData(
-        [...visualEvents(1, 1_000), ...visualEvents(2, 10_000)],
-        [1, 2],
-        [chapterFrame(1, 2), chapterFrame(2, 11)],
-      ),
-    }
+  it('still visits tab 2 in tool order between tab 1 tools', async () => {
+    replayResult.replay = trendshift()
     await renderReplay()
-    await completeCurrentChapter(4_000)
-    const pending = [...transitionTimers.values()][0]?.callback
 
-    await act(async () => root.render(<div data-unmounted />))
+    await clickAct('[data-playback-seek="16"]')
+    expect(viewport('tab')).toBe('2')
+    expect(currentCaption()).toBe('Action on Tab 2')
 
-    expect(transitionTimers.size).toBe(0)
-    expect(clearedTimerIds).toHaveLength(1)
-    await act(async () => {
-      if (typeof pending === 'function') pending()
-    })
-    expect(container.querySelector('[data-unmounted]')).not.toBeNull()
+    await clickAct('[data-playback-seek="24.225"]')
+    expect(viewport('tab')).toBe('1')
+  })
+
+  it('keeps the untabbed name_session visible and current', async () => {
+    replayResult.replay = trendshift()
+    await renderReplay()
+    await clickAct('[data-playback-seek="14"]')
+
+    expect(currentCaption()).toBe('name_session')
+    expect(viewport('caption')).toBe('name_session')
+    expect(viewport('tab')).toBe('1')
+    expect(timelineCaptions()).toContain('name_session')
   })
 })
 
diff --git a/packages/browseros-agent/apps/claw-app/screens/replay/Replay.tsx b/packages/browseros-agent/apps/claw-app/screens/replay/Replay.tsx
index 24d85a76bd..9ff089811e 100644
--- a/packages/browseros-agent/apps/claw-app/screens/replay/Replay.tsx
+++ b/packages/browseros-agent/apps/claw-app/screens/replay/Replay.tsx
@@ -10,572 +10,88 @@ import { useLocation } from 'react-router'
 import { StatusBadge } from '@/components/cockpit/StatusBadge'
 import { Spinner } from '@/components/ui/spinner'
 import { Tabs, TabsList, TabsTrigger } from '@/components/ui/tabs'
-import type { ReplayFrame } from '@/modules/api/replay.hooks'
 import { EventTimeline } from './EventTimeline'
 import { PlaybackTransport } from './PlaybackTransport'
-import { type ReplayPlayerHandle, ReplayViewport } from './ReplayViewport'
+import { ReplayViewport } from './ReplayViewport'
+import { useReplayData } from './replay.data'
 import {
-  buildTabView,
-  EMPTY_TAB_VIEW,
-  type ReplayData,
-  type TabView,
-  useReplayData,
-} from './replay.data'
-import { frameIndexAt } from './replay.helpers'
+  buildSessionReplayPlan,
+  EMPTY_SESSION_REPLAY_PLAN,
+  type ReplayAction,
+} from './session-replay'
 import { usePlayback } from './use-playback'
 
-const CHAPTER_TRANSITION_MS = 1_000
-const STATIC_CHAPTER_SECONDS = 0.001
-
-interface ChapterTransition {
-  kind: 'advance' | 'complete' | 'empty'
-  title: string
-  skipped: string | null
-}
-
-type SequenceCompletion = 'chapter' | 'empty' | null
-
-interface ReachedChapterEnd {
-  sessionId: string
-  tabId: number
-  seconds: number
-}
-
-/** Renders the audit replay page and syncs rrweb playback to the transport UI. */
+/**
+ * Renders the audit replay page.
+ *
+ * The page owns one global activity clock and asks the session plan which tool
+ * is current and which tab to show. Nothing here accumulates camera state, so a
+ * backward seek, a forward seek, and a live data refresh all land on the same
+ * answer. The operator can pin a tab to inspect it; that pins the camera only —
+ * the clock and the action schedule never fork.
+ */
 export function Replay() {
   const { replay, isLoading, navigate } = useReplayData()
   const location = useLocation()
-  const [selectedTabId, setSelectedTabId] = useState<number | null>(null)
-  const [transition, setTransition] = useState<ChapterTransition | null>(null)
-  const [sequenceCompletion, setSequenceCompletion] =
-    useState<SequenceCompletion>(null)
-  const sequenceComplete = sequenceCompletion !== null
-  const playerHandleRef = useRef<ReplayPlayerHandle | null>(null)
-  const playbackTimeRef = useRef(0)
-  const playbackSpeedRef = useRef(1)
-  const playbackIsPlayingRef = useRef(true)
-  const pendingTabSeekRef = useRef<number | null>(null)
-  const pendingTabPlaybackRef = useRef<'pause' | 'play'>('pause')
-  const transitionTimerRef = useRef<number | null>(null)
-  const transitionTokenRef = useRef(0)
+  const [pinnedTabId, setPinnedTabId] = useState<number | null>(null)
   const activeSessionRef = useRef<string | null>(null)
-  const autoStartedSessionRef = useRef<string | null>(null)
-  const operatorControlledSessionRef = useRef<string | null>(null)
-  const emptySequenceSessionRef = useRef<string | null>(null)
-  const reachedChapterEndRef = useRef<ReachedChapterEnd | null>(null)
 
-  const tabViewInput = useMemo(
-    () =>
-      replay
-        ? {
-            frames: replay.frames,
-            tabs: replay.tabs,
-            eventsForTab: replay.eventsForTab,
-            startedAtMs: replay.startedAtMs,
-          }
-        : null,
+  const plan = useMemo(
+    () => (replay ? buildSessionReplayPlan(replay) : EMPTY_SESSION_REPLAY_PLAN),
     [replay],
   )
-  const chapterViews = useMemo(
-    () =>
-      replay && tabViewInput
-        ? replay.tabs.map(({ tabId }) => buildTabView(tabViewInput, tabId))
-        : [],
-    [replay, tabViewInput],
-  )
-  const selectedTabIndex =
-    replay?.tabs.findIndex(({ tabId }) => tabId === selectedTabId) ?? -1
-  const perTabView =
-    selectedTabIndex >= 0
-      ? (chapterViews[selectedTabIndex] ?? EMPTY_TAB_VIEW)
-      : EMPTY_TAB_VIEW
-  const playableChapterIndices = useMemo(
-    () =>
-      chapterViews.flatMap((view, index) =>
-        isPlayableChapter(view) ? [index] : [],
-      ),
-    [chapterViews],
-  )
-
-  const playbackTotalSeconds = chapterPlaybackSeconds(perTabView)
-  const playback = usePlayback(playbackTotalSeconds)
-  const playbackPlayRef = useRef(playback.play)
-
-  useEffect(() => {
-    playbackPlayRef.current = playback.play
-  }, [playback.play])
-
-  const invalidateTransition = useCallback(() => {
-    transitionTokenRef.current += 1
-    const timer = transitionTimerRef.current
-    transitionTimerRef.current = null
-    if (timer !== null) window.clearTimeout(timer)
-  }, [])
-
-  const cancelTransition = useCallback(() => {
-    invalidateTransition()
-    setTransition(null)
-  }, [invalidateTransition])
-
-  const scheduleTransition = useCallback(
-    (next: ChapterTransition, onFinished: () => void) => {
-      invalidateTransition()
-      const token = transitionTokenRef.current
-      setTransition(next)
-      transitionTimerRef.current = window.setTimeout(() => {
-        if (transitionTokenRef.current !== token) return
-        transitionTimerRef.current = null
-        setTransition(null)
-        onFinished()
-      }, CHAPTER_TRANSITION_MS)
-    },
-    [invalidateTransition],
-  )
-
-  useEffect(
-    () => () => {
-      invalidateTransition()
-      activeSessionRef.current = null
-      autoStartedSessionRef.current = null
-      operatorControlledSessionRef.current = null
-      emptySequenceSessionRef.current = null
-      reachedChapterEndRef.current = null
-      pendingTabSeekRef.current = null
-      pendingTabPlaybackRef.current = 'pause'
-    },
-    [invalidateTransition],
-  )
-
-  useEffect(() => {
-    playbackTimeRef.current = playback.time
-  }, [playback.time])
-
-  useEffect(() => {
-    playbackSpeedRef.current = playback.speed
-    playerHandleRef.current?.setSpeed(playback.speed)
-  }, [playback.speed])
-
-  useEffect(() => {
-    playbackIsPlayingRef.current = playback.isPlaying
-  }, [playback.isPlaying])
+  const playback = usePlayback(plan.durationSeconds)
+  const { pause, play, seek, togglePlay: togglePlayback } = playback
 
   useEffect(() => {
-    if (!playerHandleRef.current) return
-    if (playback.isPlaying) {
-      playerHandleRef.current.play(playbackTimeRef.current * 1000)
-    } else {
-      playerHandleRef.current.pause()
-    }
-  }, [playback.isPlaying])
-
-  const seekTo = useCallback(
-    (seconds: number) => {
-      const next = playback.seek(seconds)
-      playbackTimeRef.current = next
-      playbackIsPlayingRef.current = false
-      playerHandleRef.current?.seek(next * 1000)
-    },
-    [playback.seek],
-  )
-
-  // biome-ignore lint/correctness/useExhaustiveDependencies: tab changes must flush pending seeks even when consecutive tabs have the same duration.
-  useEffect(() => {
-    const pendingSeconds = pendingTabSeekRef.current
-    if (pendingSeconds === null) return
-    const pendingPlayback = pendingTabPlaybackRef.current
-    pendingTabSeekRef.current = null
-    seekTo(pendingSeconds)
-    if (pendingPlayback === 'play') {
-      playbackTimeRef.current = pendingSeconds
-      playbackIsPlayingRef.current = true
-      playback.play()
-    }
-  }, [seekTo, selectedTabId])
-
-  const resetTab = useCallback(
-    (tabId: number, autoplay: boolean) => {
-      reachedChapterEndRef.current = null
-      playback.pause()
-      playbackTimeRef.current = 0
-      playbackIsPlayingRef.current = false
-      playerHandleRef.current?.pause()
-      if (tabId === selectedTabId) {
-        seekTo(0)
-        if (autoplay) {
-          playbackIsPlayingRef.current = true
-          playbackPlayRef.current()
-        }
-        return
-      }
-      pendingTabSeekRef.current = 0
-      pendingTabPlaybackRef.current = autoplay ? 'play' : 'pause'
-      setSelectedTabId(tabId)
-    },
-    [playback.pause, seekTo, selectedTabId],
-  )
-
-  const initializeEmptyReplay = useCallback(
-    (
-      currentReplay: ReplayData,
-      firstTabId: number,
-      hasSelectedTab: boolean,
-    ) => {
-      if (!hasSelectedTab) resetTab(firstTabId, false)
-      if (
-        !shouldCompleteNoVisualReplay(
-          currentReplay,
-          autoStartedSessionRef.current,
-        )
-      ) {
-        return
-      }
-      autoStartedSessionRef.current = currentReplay.sessionId
-      emptySequenceSessionRef.current = currentReplay.sessionId
-      scheduleTransition(
-        {
-          kind: 'empty',
-          title: 'No visual recordings → Replay complete',
-          skipped: skippedChapterSummary(
-            currentReplay.tabs.map((_, index) => index),
-          ),
-        },
-        () => setSequenceCompletion('empty'),
-      )
-    },
-    [resetTab, scheduleTransition],
-  )
-
-  const startInitialChapter = useCallback(
-    (
-      currentReplay: ReplayData,
-      firstTabId: number,
-      firstPlayableIndex: number,
-      hasSelectedTab: boolean,
-    ) => {
-      autoStartedSessionRef.current = currentReplay.sessionId
-      if (operatorControlledSessionRef.current === currentReplay.sessionId) {
-        if (!hasSelectedTab) resetTab(firstTabId, false)
-        return
-      }
-      if (firstPlayableIndex === 0) {
-        resetTab(firstTabId, true)
-        return
-      }
-
-      resetTab(
-        currentReplay.tabs[firstPlayableIndex]?.tabId ?? firstTabId,
-        false,
-      )
-      scheduleTransition(
-        {
-          kind: 'advance',
-          title: `Starting replay → Opening ${chapterName(currentReplay, firstPlayableIndex)}`,
-          skipped: skippedChapterSummary(
-            Array.from({ length: firstPlayableIndex }, (_, index) => index),
-          ),
-        },
-        () => {
-          playbackIsPlayingRef.current = true
-          playbackPlayRef.current()
-        },
-      )
-    },
-    [resetTab, scheduleTransition],
-  )
-
-  useEffect(() => {
-    if (!replay) return
-    const sessionChanged = activeSessionRef.current !== replay.sessionId
-    if (sessionChanged) {
-      activeSessionRef.current = replay.sessionId
-      autoStartedSessionRef.current = null
-      operatorControlledSessionRef.current = null
-      emptySequenceSessionRef.current = null
-      reachedChapterEndRef.current = null
-      cancelTransition()
-      setSequenceCompletion(null)
-    }
-
-    const firstTab = replay.tabs[0]
-    if (!firstTab) {
-      if (selectedTabId !== null) {
-        playback.pause()
-        playbackTimeRef.current = 0
-        playbackIsPlayingRef.current = false
-        playerHandleRef.current?.pause()
-        pendingTabSeekRef.current = 0
-        setSelectedTabId(null)
-      }
+    const sessionId = replay?.sessionId
+    if (sessionId === undefined || activeSessionRef.current === sessionId) {
       return
     }
-
-    const selectedTab = sessionChanged
-      ? undefined
-      : replay.tabs.find((tab) => tab.tabId === selectedTabId)
-    const firstPlayableIndex = playableChapterIndices[0]
-    const invalidEmptyTransition =
-      emptySequenceSessionRef.current === replay.sessionId &&
-      (firstPlayableIndex !== undefined ||
-        !replay.eventsLoaded ||
-        replay.status === 'running')
-    if (invalidEmptyTransition) {
-      cancelTransition()
-      emptySequenceSessionRef.current = null
-      autoStartedSessionRef.current = null
-      setSequenceCompletion(null)
-    }
-    if (firstPlayableIndex === undefined) {
-      initializeEmptyReplay(replay, firstTab.tabId, selectedTab !== undefined)
-      return
-    }
-
-    if (autoStartedSessionRef.current !== replay.sessionId) {
-      startInitialChapter(
-        replay,
-        firstTab.tabId,
-        firstPlayableIndex,
-        selectedTab !== undefined,
-      )
-      return
-    }
-
-    if (!selectedTab) resetTab(firstTab.tabId, false)
-  }, [
-    cancelTransition,
-    initializeEmptyReplay,
-    playableChapterIndices,
-    playback.pause,
-    replay,
-    resetTab,
-    selectedTabId,
-    startInitialChapter,
-  ])
+    activeSessionRef.current = sessionId
+    setPinnedTabId(null)
+    seek(0)
+    play()
+  }, [replay?.sessionId, play, seek])
 
   const selectTab = useCallback(
     (value: string) => {
       const tabId = Number(value)
-      if (!replay || !Number.isSafeInteger(tabId)) return
-      operatorControlledSessionRef.current = replay.sessionId
-      cancelTransition()
-      setSequenceCompletion(null)
-      resetTab(tabId, false)
+      if (!Number.isSafeInteger(tabId)) return
+      pause()
+      setPinnedTabId(tabId)
     },
-    [cancelTransition, replay, resetTab],
+    [pause],
   )
 
-  const selectFrame = useCallback(
-    (frame: ReplayFrame) => {
-      if (transition) return
-      if (replay) operatorControlledSessionRef.current = replay.sessionId
-      reachedChapterEndRef.current = null
-      setSequenceCompletion(null)
-      seekTo(frame.t)
-    },
-    [replay, seekTo, transition],
-  )
-
-  const onPlayerReady = useCallback((handle: ReplayPlayerHandle | null) => {
-    playerHandleRef.current = handle
-    if (!handle) return
-    const ms = playbackTimeRef.current * 1000
-    handle.setSpeed(playbackSpeedRef.current)
-    handle.seek(ms)
-    if (playbackIsPlayingRef.current) handle.play(ms)
-  }, [])
-
-  const advanceChapter = useCallback(() => {
-    if (!replay || selectedTabIndex < 0) return
-
-    const nextPlayableIndex = playableChapterIndices.find(
-      (index) => index > selectedTabIndex,
-    )
-    if (nextPlayableIndex !== undefined) {
-      const skippedIndices = Array.from(
-        { length: nextPlayableIndex - selectedTabIndex - 1 },
-        (_, offset) => selectedTabIndex + offset + 1,
-      )
-      setSequenceCompletion(null)
-      const nextTab = replay.tabs[nextPlayableIndex]
-      if (!nextTab) return
-      resetTab(nextTab.tabId, false)
-      scheduleTransition(
-        {
-          kind: 'advance',
-          title: `Tab ${selectedTabIndex + 1} complete → Opening ${chapterName(replay, nextPlayableIndex)}`,
-          skipped: skippedChapterSummary(skippedIndices),
-        },
-        () => {
-          playbackTimeRef.current = 0
-          playbackIsPlayingRef.current = true
-          playbackPlayRef.current()
-        },
-      )
-      return
-    }
-
-    const trailingSkippedIndices = Array.from(
-      { length: replay.tabs.length - selectedTabIndex - 1 },
-      (_, offset) => selectedTabIndex + offset + 1,
-    )
-    const selectedTab = replay.tabs[selectedTabIndex]
-    if (!selectedTab) return
-    reachedChapterEndRef.current = {
-      sessionId: replay.sessionId,
-      tabId: selectedTab.tabId,
-      seconds: playbackTotalSeconds,
-    }
-    if (!replay.eventsLoaded || replay.status === 'running') {
-      setSequenceCompletion(null)
-      return
-    }
-    const finishSequence = () => {
-      setSequenceCompletion('chapter')
-    }
-    if (trailingSkippedIndices.length > 0) {
-      scheduleTransition(
-        {
-          kind: 'complete',
-          title: `Tab ${selectedTabIndex + 1} complete → Replay complete`,
-          skipped: skippedChapterSummary(trailingSkippedIndices),
-        },
-        finishSequence,
-      )
-    } else {
-      finishSequence()
-    }
-  }, [
-    playableChapterIndices,
-    playbackTotalSeconds,
-    replay,
-    resetTab,
-    scheduleTransition,
-    selectedTabIndex,
-  ])
-
-  useEffect(() => {
-    if (!replay || selectedTabIndex < 0) return
-    const reachedEnd = reachedChapterEndRef.current
-    const selectedTabId = replay.tabs[selectedTabIndex]?.tabId
-    if (
-      !reachedEnd ||
-      reachedEnd.sessionId !== replay.sessionId ||
-      reachedEnd.tabId !== selectedTabId
-    ) {
-      return
-    }
-
-    if (playbackTotalSeconds > reachedEnd.seconds) {
-      reachedChapterEndRef.current = null
-      cancelTransition()
-      setSequenceCompletion(null)
-      playbackTimeRef.current = reachedEnd.seconds
-      playbackIsPlayingRef.current = true
-      playbackPlayRef.current()
-      return
-    }
-
-    const hasNewLaterChapter = playableChapterIndices.some(
-      (index) => index > selectedTabIndex,
-    )
-    const sequenceWasFinished =
-      sequenceCompletion === 'chapter' ||
-      transition?.kind === 'complete' ||
-      (sequenceCompletion === null && transition === null)
-    if (hasNewLaterChapter && sequenceWasFinished) {
-      reachedChapterEndRef.current = null
-      cancelTransition()
-      setSequenceCompletion(null)
-      advanceChapter()
-      return
-    }
-
-    if (
-      sequenceCompletion === null &&
-      transition === null &&
-      replay.eventsLoaded &&
-      replay.status !== 'running'
-    ) {
-      reachedChapterEndRef.current = null
-      advanceChapter()
-    }
-  }, [
-    advanceChapter,
-    cancelTransition,
-    playableChapterIndices,
-    playbackTotalSeconds,
-    replay,
-    selectedTabIndex,
-    sequenceCompletion,
-    transition,
-  ])
-
-  useEffect(() => {
-    if (!playback.isPlaying || playbackTotalSeconds === 0) return
-    let rafId = 0
-    let active = true
-    const sync = () => {
-      if (!active) return
-      const handle = playerHandleRef.current
-      const keepGoing = handle
-        ? playback.syncFromPlayer(handle.getCurrentTime() / 1000)
-        : true
-      if (keepGoing) {
-        rafId = window.requestAnimationFrame(sync)
-      } else {
-        advanceChapter()
-      }
-    }
-    rafId = window.requestAnimationFrame(sync)
-    return () => {
-      active = false
-      window.cancelAnimationFrame(rafId)
-    }
-  }, [
-    advanceChapter,
-    playback.isPlaying,
-    playback.syncFromPlayer,
-    playbackTotalSeconds,
-  ])
+  const resumeFollow = useCallback(() => setPinnedTabId(null), [])
 
-  const toggleSequencePlayback = useCallback(() => {
-    if (transition) return
-    if (!sequenceComplete) {
-      reachedChapterEndRef.current = null
-      playback.togglePlay()
-      return
-    }
+  // Play always resumes automatic following; pause leaves a pin in place so an
+  // operator can stop, inspect a tab, and step around without losing it.
+  const togglePlay = useCallback(() => {
+    if (!playback.isPlaying) setPinnedTabId(null)
+    togglePlayback()
+  }, [playback.isPlaying, togglePlayback])
 
-    const firstPlayableIndex = playableChapterIndices[0]
-    if (!replay || firstPlayableIndex === undefined) return
-    cancelTransition()
-    setSequenceCompletion(null)
-    const firstPlayableTab = replay.tabs[firstPlayableIndex]
-    if (firstPlayableTab) resetTab(firstPlayableTab.tabId, true)
-  }, [
-    cancelTransition,
-    playableChapterIndices,
-    playback,
-    replay,
-    resetTab,
-    sequenceComplete,
-    transition,
-  ])
+  const selectAction = useCallback(
+    (action: ReplayAction) => {
+      setPinnedTabId(null)
+      seek(action.startAt)
+    },
+    [seek],
+  )
 
   const transportPlayback = useMemo(
-    () => ({ ...playback, togglePlay: toggleSequencePlayback }),
-    [playback, toggleSequencePlayback],
-  )
-  const seekFromTransport = useCallback(
-    (seconds: number) => {
-      if (transition) return
-      if (replay) operatorControlledSessionRef.current = replay.sessionId
-      reachedChapterEndRef.current = null
-      setSequenceCompletion(null)
-      seekTo(seconds)
-    },
-    [replay, seekTo, transition],
+    () => ({ ...playback, togglePlay }),
+    [playback, togglePlay],
   )
 
+  const state = plan.stateAt(playback.time)
+  const visibleTabId = pinnedTabId ?? state.tabId
+  const track = plan.trackFor(visibleTabId)
+  const view = plan.viewFor(visibleTabId)
+  const projection = plan.project(visibleTabId, playback.time)
+
   if (isLoading || !replay) {
     return (
       <div className="flex h-full flex-1 items-center justify-center bg-bg-canvas text-ink-3">
@@ -603,8 +119,6 @@ export function Replay() {
     typeof (location.state as { from: unknown }).from === 'string'
   const back = () =>
     cameFromInAppFlow ? navigate(-1) : navigate(`/audit/${replay.sessionId}`)
-  const currentTabFrameIndex = frameIndexAt(perTabView.frames, playback.time)
-  const currentTabFrame = perTabView.frames[currentTabFrameIndex]
   const stats: { label: string; value: string }[] = [
     { label: 'Duration', value: replay.duration },
     { label: 'Steps', value: replay.steps },
@@ -652,72 +166,69 @@ export function Replay() {
 
       <div className="flex min-h-0 flex-1">
         <div className="flex min-w-0 flex-1 flex-col gap-3 p-4">
-          {selectedTabIndex >= 0 && (
+          {replay.tabs.length > 1 && (
             <div className="flex min-h-9 items-center gap-3">
-              {replay.tabs.length > 1 && selectedTabId !== null && (
-                <Tabs
-                  value={selectedTabId.toString()}
-                  onValueChange={selectTab}
-                >
-                  <TabsList variant="line">
-                    {replay.tabs.map(({ tabId }, idx) => (
-                      <TabsTrigger
-                        key={tabId}
-                        value={tabId.toString()}
-                        onClick={
-                          tabId === selectedTabId
-                            ? () => selectTab(tabId.toString())
-                            : undefined
-                        }
-                      >
-                        Tab {idx + 1}
-                      </TabsTrigger>
-                    ))}
-                  </TabsList>
-                </Tabs>
-              )}
-              <span
-                data-chapter-progress
-                className="ml-auto shrink-0 font-semibold text-ink-3 text-xs"
+              <Tabs
+                value={visibleTabId === null ? '' : visibleTabId.toString()}
+                onValueChange={selectTab}
               >
-                Tab {selectedTabIndex + 1} of {replay.tabs.length}
-              </span>
-              {sequenceComplete && (
-                <span
-                  role="status"
-                  className="shrink-0 rounded-full bg-accent-tint px-2.5 py-1 font-semibold text-accent-ink text-xs"
+                <TabsList variant="line">
+                  {replay.tabs.map(({ tabId }, idx) => (
+                    <TabsTrigger
+                      key={tabId}
+                      value={tabId.toString()}
+                      onClick={
+                        tabId === visibleTabId
+                          ? () => selectTab(tabId.toString())
+                          : undefined
+                      }
+                    >
+                      Tab {idx + 1}
+                    </TabsTrigger>
+                  ))}
+                </TabsList>
+              </Tabs>
+              {pinnedTabId !== null && (
+                <button
+                  type="button"
+                  data-resume-follow
+                  onClick={resumeFollow}
+                  className="ml-auto shrink-0 rounded-full bg-accent-tint px-2.5 py-1 font-semibold text-accent-ink text-xs"
                 >
-                  Replay complete
-                </span>
+                  Resume follow
+                </button>
               )}
             </div>
           )}
-          {perTabView.incompleteUntilMs !== null && (
+          {view.incompleteUntilMs !== null && (
             <div
               role="status"
               className="rounded-lg border border-amber/30 bg-amber-tint px-3 py-2 font-medium text-ink-2 text-xs"
             >
               Recording incomplete — playback starts at{' '}
-              {formatIncompleteOffset(perTabView.incompleteUntilMs)}
+              {formatIncompleteOffset(view.incompleteUntilMs)}
+            </div>
+          )}
+          {view.incompleteUntilMs === null && view.knownIncomplete && (
+            <div
+              role="status"
+              className="rounded-lg border border-amber/30 bg-amber-tint px-3 py-2 font-medium text-ink-2 text-xs"
+            >
+              Recording incomplete — this replay contains a known gap
             </div>
           )}
-          {perTabView.incompleteUntilMs === null &&
-            perTabView.knownIncomplete && (
-              <div
-                role="status"
-                className="rounded-lg border border-amber/30 bg-amber-tint px-3 py-2 font-medium text-ink-2 text-xs"
-              >
-                Recording incomplete — this replay contains a known gap
-              </div>
-            )}
           <div className="relative flex min-h-0 flex-1 flex-col gap-3">
             <div className="flex min-h-0 flex-1">
-              {isPlayableChapter(perTabView) ? (
+              {track ? (
                 <ReplayViewport
                   site={replay.site}
-                  frame={currentTabFrame}
-                  events={perTabView.events}
-                  onPlayerReady={onPlayerReady}
+                  action={state.currentAction?.frame}
+                  url={plan.urlAt(visibleTabId, playback.time)}
+                  events={track.view.events}
+                  trackTime={projection.trackTime}
+                  live={projection.live}
+                  isPlaying={playback.isPlaying}
+                  speed={playback.speed}
                 />
               ) : (
                 <div className="flex flex-1 items-center justify-center rounded-2xl border border-border-2 bg-card text-ink-3 text-sm shadow-sm">
@@ -725,36 +236,20 @@ export function Replay() {
                 </div>
               )}
             </div>
-            {isPlayableChapter(perTabView) && (
+            {plan.durationSeconds > 0 && (
               <PlaybackTransport
                 playback={transportPlayback}
-                totalSeconds={playbackTotalSeconds}
-                frames={perTabView.frames}
-                onSeek={seekFromTransport}
+                totalSeconds={plan.durationSeconds}
+                actions={plan.actions}
+                onSeek={seek}
               />
             )}
-            {transition && (
-              <div
-                role="status"
-                data-chapter-transition
-                className="absolute inset-0 z-20 flex flex-col items-center justify-center rounded-2xl bg-ink-deep/95 px-8 text-center shadow-sm"
-              >
-                <div className="font-semibold text-base text-white">
-                  {transition.title}
-                </div>
-                {transition.skipped && (
-                  <div className="mt-2 text-sm text-white/70">
-                    {transition.skipped}
-                  </div>
-                )}
-              </div>
-            )}
           </div>
         </div>
         <EventTimeline
-          frames={perTabView.frames}
-          currentFrameIndex={currentTabFrameIndex}
-          onSelectFrame={selectFrame}
+          actions={plan.actions}
+          currentIndex={state.currentIndex}
+          onSelectAction={selectAction}
         />
       </div>
     </div>
@@ -767,50 +262,3 @@ function formatIncompleteOffset(milliseconds: number): string {
   const seconds = totalSeconds % 60
   return `${minutes}:${String(seconds).padStart(2, '0')}`
 }
-
-function isPlayableChapter(view: TabView): boolean {
-  return view.hasFullSnapshot && view.events.length >= 2
-}
-
-function chapterPlaybackSeconds(view: TabView): number {
-  if (!isPlayableChapter(view)) return 0
-  return Math.max(view.totalSeconds, STATIC_CHAPTER_SECONDS)
-}
-
-function chapterName(replay: ReplayData, chapterIndex: number): string {
-  const tabId = replay.tabs[chapterIndex]?.tabId
-  const tabUrl = replay.frames.find(
-    (frame) => frame.tabId === tabId && frame.url,
-  )?.url
-  return `Tab ${chapterIndex + 1} · ${displayHost(tabUrl ?? replay.site)}`
-}
-
-function displayHost(value: string): string {
-  try {
-    const url = value.includes('://')
-      ? new URL(value)
-      : new URL(`https://${value}`)
-    return url.hostname || value
-  } catch {
-    return value
-  }
-}
-
-function skippedChapterSummary(indices: readonly number[]): string | null {
-  if (indices.length === 0) return null
-  if (indices.length === 1) {
-    return `Skipped Tab ${(indices[0] ?? 0) + 1} — no visual recording`
-  }
-  return `Skipped Tabs ${(indices[0] ?? 0) + 1}–${(indices.at(-1) ?? 0) + 1} — no visual recordings`
-}
-
-function shouldCompleteNoVisualReplay(
-  replay: ReplayData,
-  autoStartedSessionId: string | null,
-): boolean {
-  return (
-    replay.status !== 'running' &&
-    replay.eventsLoaded &&
-    autoStartedSessionId !== replay.sessionId
-  )
-}
diff --git a/packages/browseros-agent/apps/claw-app/screens/replay/ReplayViewport.test.tsx b/packages/browseros-agent/apps/claw-app/screens/replay/ReplayViewport.test.tsx
index 987d16e330..f2c5ac2639 100644
--- a/packages/browseros-agent/apps/claw-app/screens/replay/ReplayViewport.test.tsx
+++ b/packages/browseros-agent/apps/claw-app/screens/replay/ReplayViewport.test.tsx
@@ -2,16 +2,21 @@ import { afterEach, beforeEach, describe, expect, it, mock } from 'bun:test'
 import { parseHTML } from 'linkedom'
 import { act, StrictMode } from 'react'
 import type { Root } from 'react-dom/client'
-import type { ReplayEvent } from '@/modules/api/replay.hooks'
-import type { ReplayPlayerHandle } from './ReplayViewport'
+import type { ReplayEvent, ReplayFrame } from '@/modules/api/replay.hooks'
 
 interface ReplayerConfig {
   root: HTMLElement
 }
 
+type PlayerCall =
+  | { kind: 'play' | 'pause'; ms: number | undefined }
+  | { kind: 'speed'; speed: number }
+
 class FakeReplayer {
   readonly marker: HTMLElement
+  readonly calls: PlayerCall[] = []
   destroyed = false
+  currentTime = 0
 
   constructor(_events: unknown[], config: ReplayerConfig) {
     this.marker = document.createElement('div')
@@ -20,14 +25,22 @@ class FakeReplayer {
     fakeReplayers.push(this)
   }
 
-  pause(_ms?: number): void {}
+  pause(ms?: number): void {
+    if (ms !== undefined) this.currentTime = ms
+    this.calls.push({ kind: 'pause', ms })
+  }
 
-  play(_ms?: number): void {}
+  play(ms?: number): void {
+    if (ms !== undefined) this.currentTime = ms
+    this.calls.push({ kind: 'play', ms })
+  }
 
-  setConfig(_config: { speed: number }): void {}
+  setConfig(config: { speed: number }): void {
+    this.calls.push({ kind: 'speed', speed: config.speed })
+  }
 
   getCurrentTime(): number {
-    return 0
+    return this.currentTime
   }
 
   destroy(): void {
@@ -46,30 +59,83 @@ const globalDescriptors = new Map(
   ),
 )
 
-const events: ReplayEvent[] = [
-  {
-    sessionId: 'session-1',
-    documentId: 'document-a',
-    targetId: 'target-a',
-    tabId: 1,
-    ts: 1_000,
-    type: 4,
-    data: { width: 1280, height: 720 },
-  },
-  {
-    sessionId: 'session-1',
-    documentId: 'document-a',
-    targetId: 'target-a',
-    tabId: 1,
-    ts: 1_001,
-    type: 2,
-    data: {},
-  },
-]
+function tabEvents(tabId: number, documentId: string): ReplayEvent[] {
+  return [
+    {
+      sessionId: 'session-1',
+      documentId,
+      targetId: `target-${documentId}`,
+      tabId,
+      ts: 1_000,
+      type: 4,
+      data: { width: 1280, height: 720 },
+    },
+    {
+      sessionId: 'session-1',
+      documentId,
+      targetId: `target-${documentId}`,
+      tabId,
+      ts: 1_001,
+      type: 2,
+      data: {},
+    },
+  ]
+}
+
+const events = tabEvents(1, 'document-a')
+
+function action(caption: string, url: string | null = null): ReplayFrame {
+  return {
+    t: 1,
+    kind: 'action',
+    verb: 'read',
+    node: 'node',
+    caption,
+    url,
+  }
+}
 
 let root: Root | null
 let container: HTMLElement
 
+/** Live player, i.e. the one that survived Strict Mode's double invoke. */
+function livePlayer(): FakeReplayer {
+  const live = fakeReplayers.filter((replayer) => !replayer.destroyed)
+  if (live.length !== 1)
+    throw new Error(`expected 1 player, got ${live.length}`)
+  return live[0] as FakeReplayer
+}
+
+interface ViewportProps {
+  events?: readonly ReplayEvent[]
+  action?: ReplayFrame
+  url?: string | null
+  trackTime?: number
+  live?: boolean
+  isPlaying?: boolean
+  speed?: number
+}
+
+async function render(props: ViewportProps = {}) {
+  const { ReplayViewport } = await import('./ReplayViewport')
+  await act(async () => {
+    root?.render(
+      <StrictMode>
+        <ReplayViewport
+          site="example.com"
+          action={props.action}
+          url={props.url ?? null}
+          events={props.events ?? events}
+          trackTime={props.trackTime ?? 0}
+          live={props.live ?? true}
+          isPlaying={props.isPlaying ?? true}
+          speed={props.speed ?? 2}
+        />
+      </StrictMode>,
+    )
+  })
+}
+
 beforeEach(async () => {
   fakeReplayers.length = 0
   const dom = parseHTML(
@@ -112,24 +178,7 @@ afterEach(async () => {
 
 describe('ReplayViewport', () => {
   it('owns one live Replayer across Strict Mode setup, replacement, and unmount', async () => {
-    const readyValues: Array<ReplayPlayerHandle | null> = []
-    const onPlayerReady = (handle: ReplayPlayerHandle | null): void => {
-      readyValues.push(handle)
-    }
-    const { ReplayViewport } = await import('./ReplayViewport')
-
-    await act(async () => {
-      root?.render(
-        <StrictMode>
-          <ReplayViewport
-            site="example.com"
-            frame={undefined}
-            events={events}
-            onPlayerReady={onPlayerReady}
-          />
-        </StrictMode>,
-      )
-    })
+    await render()
 
     const canvas = container.querySelector('[data-replay-canvas]')
     expect(canvas?.querySelectorAll('[data-fake-replayer]')).toHaveLength(1)
@@ -137,30 +186,11 @@ describe('ReplayViewport', () => {
     expect(
       fakeReplayers.filter((replayer) => !replayer.destroyed),
     ).toHaveLength(1)
-    expect(readyValues.at(-1)).not.toBeNull()
 
-    const firstLiveReplayer = fakeReplayers.find(
-      (replayer) => !replayer.destroyed,
-    )
-    const replacementEvents = events.map((event) => ({
-      ...event,
-      documentId: 'document-b',
-      targetId: 'target-b',
-    }))
-    await act(async () => {
-      root?.render(
-        <StrictMode>
-          <ReplayViewport
-            site="example.com"
-            frame={undefined}
-            events={replacementEvents}
-            onPlayerReady={onPlayerReady}
-          />
-        </StrictMode>,
-      )
-    })
+    const firstLiveReplayer = livePlayer()
+    await render({ events: tabEvents(2, 'document-b') })
 
-    expect(firstLiveReplayer?.destroyed).toBe(true)
+    expect(firstLiveReplayer.destroyed).toBe(true)
     expect(canvas?.querySelectorAll('[data-fake-replayer]')).toHaveLength(1)
     expect(
       fakeReplayers.filter((replayer) => !replayer.destroyed),
@@ -170,6 +200,148 @@ describe('ReplayViewport', () => {
     root = null
 
     expect(fakeReplayers.every((replayer) => replayer.destroyed)).toBe(true)
-    expect(readyValues.at(-1)).toBeNull()
+  })
+
+  it('positions a new player at the supplied time, speed, and play state', async () => {
+    await render({ trackTime: 3, speed: 4, isPlaying: true, live: true })
+
+    expect(livePlayer().calls).toEqual([
+      { kind: 'speed', speed: 4 },
+      { kind: 'play', ms: 3_000 },
+    ])
+  })
+
+  it('builds a replacement player from the latest projection, not the old one', async () => {
+    await render({ trackTime: 1, speed: 2 })
+    await render({ trackTime: 8, speed: 4 })
+
+    const before = livePlayer()
+    await render({ events: tabEvents(2, 'document-b'), trackTime: 8, speed: 4 })
+
+    expect(before.destroyed).toBe(true)
+    expect(livePlayer().calls).toEqual([
+      { kind: 'speed', speed: 4 },
+      { kind: 'play', ms: 8_000 },
+    ])
+  })
+
+  it('holds a boundary frame paused while global playback continues', async () => {
+    await render({ trackTime: 9.003, live: false, isPlaying: true })
+
+    expect(livePlayer().calls.at(-1)).toEqual({ kind: 'pause', ms: 9_003 })
+  })
+
+  it('keeps a clamped track quiet as later global actions arrive', async () => {
+    await render({ trackTime: 9.003, live: false, isPlaying: true })
+    const player = livePlayer()
+    const settled = player.calls.length
+
+    await render({
+      trackTime: 9.003,
+      live: false,
+      isPlaying: true,
+      action: action('later tool on this tab'),
+    })
+
+    expect(player.calls).toHaveLength(settled)
+    expect(container.textContent).toContain('later tool on this tab')
+  })
+
+  it('resumes the player when global time re-enters the recorded range', async () => {
+    await render({ trackTime: 0, live: false, isPlaying: true })
+    const player = livePlayer()
+    player.calls.length = 0
+
+    await render({ trackTime: 0.5, live: true, isPlaying: true })
+
+    expect(player.calls).toEqual([
+      { kind: 'speed', speed: 2 },
+      { kind: 'play', ms: 500 },
+    ])
+  })
+
+  it('reaches the player with pause, resume, seek, and speed changes', async () => {
+    await render({ trackTime: 2 })
+    const player = livePlayer()
+
+    player.calls.length = 0
+    await render({ trackTime: 2, isPlaying: false })
+    expect(player.calls.at(-1)).toEqual({ kind: 'pause', ms: 2_000 })
+
+    player.calls.length = 0
+    await render({ trackTime: 6, isPlaying: false })
+    expect(player.calls.at(-1)).toEqual({ kind: 'pause', ms: 6_000 })
+
+    player.calls.length = 0
+    await render({ trackTime: 6, isPlaying: true })
+    expect(player.calls.at(-1)).toEqual({ kind: 'play', ms: 6_000 })
+
+    player.calls.length = 0
+    await render({ trackTime: 6, isPlaying: true, speed: 4 })
+    expect(player.calls).toEqual([
+      { kind: 'speed', speed: 4 },
+      { kind: 'play', ms: 6_000 },
+    ])
+  })
+
+  it('ignores small drift and corrects material drift once', async () => {
+    await render({ trackTime: 4, isPlaying: true, live: true })
+    const player = livePlayer()
+
+    player.currentTime = 4_100
+    player.calls.length = 0
+    await render({ trackTime: 4.2, isPlaying: true, live: true })
+    expect(player.calls).toEqual([])
+
+    player.currentTime = 1_000
+    await render({ trackTime: 4.4, isPlaying: true, live: true })
+    expect(player.calls).toEqual([
+      { kind: 'speed', speed: 2 },
+      { kind: 'play', ms: 4_400 },
+    ])
+
+    player.calls.length = 0
+    await render({ trackTime: 4.5, isPlaying: true, live: true })
+    expect(player.calls).toEqual([])
+  })
+
+  it('separates the caption from the address bar', async () => {
+    await render({
+      action: action('act: click Sign in', null),
+      url: 'https://trendshift.io/repositories',
+    })
+
+    expect(container.textContent).toContain('act: click Sign in')
+    expect(container.textContent).toContain(
+      'https://trendshift.io/repositories',
+    )
+
+    await render({
+      action: action('name_session', null),
+      url: 'https://trendshift.io/repositories',
+    })
+
+    expect(container.textContent).toContain('name_session')
+    expect(container.textContent).toContain(
+      'https://trendshift.io/repositories',
+    )
+  })
+
+  it('falls back to the task site when the tab has no known URL', async () => {
+    await render({ url: null })
+
+    expect(container.textContent).toContain('example.com')
+  })
+
+  it('shows no caption before the first action becomes current', async () => {
+    await render({ action: undefined })
+
+    expect(container.querySelector('[data-replay-canvas]')).not.toBeNull()
+    expect(container.querySelector('[data-replay-caption]')).toBeNull()
+
+    await render({ action: action('read: Trendshift') })
+    expect(
+      container.querySelector('[data-replay-caption]')?.textContent,
+    ).toContain('read: Trendshift')
   })
 })
diff --git a/packages/browseros-agent/apps/claw-app/screens/replay/ReplayViewport.tsx b/packages/browseros-agent/apps/claw-app/screens/replay/ReplayViewport.tsx
index 3f6b50f05d..88dc24b744 100644
--- a/packages/browseros-agent/apps/claw-app/screens/replay/ReplayViewport.tsx
+++ b/packages/browseros-agent/apps/claw-app/screens/replay/ReplayViewport.tsx
@@ -22,42 +22,52 @@ import 'rrweb-player/dist/style.css'
 // `.replayer-wrapper` styling.
 import { Replayer } from 'rrweb'
 
-export interface ReplayPlayerHandle {
-  seek(ms: number): void
-  play(ms: number): void
-  pause(): void
-  setSpeed(speed: number): void
-  getCurrentTime(): number
-}
-
 interface ReplayViewportProps {
   site: string
-  /** The frame whose caption is currently displayed in the overlay. */
-  frame: ReplayFrame | undefined
-  /** Every playable document lifecycle in the selected tab. */
+  /**
+   * Globally current action. Drives the caption only — it may belong to a tab
+   * other than the visible one, or to no tab at all.
+   */
+  action: ReplayFrame | undefined
+  /** Address bar for the visible tab, resolved independently of the caption. */
+  url: string | null
+  /** Every playable document lifecycle in the visible tab. */
   events: readonly ReplayEvent[]
-  /** Called when the rrweb Replayer mounts or is destroyed. */
-  onPlayerReady: (handle: ReplayPlayerHandle | null) => void
+  /** Seconds into this tab's own rrweb stream, already clamped to its range. */
+  trackTime: number
+  /**
+   * False when global time sits outside the recorded range. The player then
+   * holds a boundary frame — first checkpoint or final state — while global
+   * activity keeps running.
+   */
+  live: boolean
+  isPlaying: boolean
+  speed: number
 }
 
-/** Displays the selected tab's rrweb replay inside the audit browser chrome. */
+/** Displays the visible tab's rrweb replay inside the audit browser chrome. */
 export function ReplayViewport({
   site,
-  frame,
+  action,
+  url,
   events,
-  onPlayerReady,
+  trackTime,
+  live,
+  isPlaying,
+  speed,
 }: ReplayViewportProps) {
-  // Prefer the current frame's full URL so the address bar shows
-  // exactly where the agent was at this instant. Falls back to the
-  // task-level site (a hostname) when the frame carries no url
-  // (e.g. `run`, `windows`, `tab_groups` dispatches).
-  const addressBar = frame?.url ?? site
   return (
     <div className="relative flex flex-1 flex-col overflow-hidden rounded-2xl border border-border-2 bg-card shadow-sm">
-      <Chrome url={addressBar} />
+      <Chrome url={url ?? site} />
       <div className="relative flex flex-1 items-stretch justify-center overflow-hidden bg-bg-sunken">
-        <PlayerCanvas events={events} onReady={onPlayerReady} />
-        {frame && <Caption frame={frame} />}
+        <PlayerCanvas
+          events={events}
+          trackTime={trackTime}
+          live={live}
+          isPlaying={isPlaying}
+          speed={speed}
+        />
+        {action && <Caption action={action} />}
       </div>
     </div>
   )
@@ -79,9 +89,15 @@ function Chrome({ url }: { url: string }) {
   )
 }
 
-interface PlayerCanvasProps {
+interface PlayerTarget {
+  trackTime: number
+  live: boolean
+  isPlaying: boolean
+  speed: number
+}
+
+interface PlayerCanvasProps extends PlayerTarget {
   events: readonly ReplayEvent[]
-  onReady: (handle: ReplayPlayerHandle | null) => void
 }
 
 /**
@@ -93,6 +109,10 @@ const DEFAULT_RECORDED_SIZE = { width: 1280, height: 720 }
 // rrweb casts events strictly before the target; 0ms can leave the first
 // snapshot blank while paused.
 const MIN_RENDER_SEEK_MS = 1
+// rrweb runs its own timer while playing, so it and the global clock drift
+// apart continuously. Re-seeking every frame would stutter the replay; this is
+// the gap at which a viewer would notice the caption leading the picture.
+const DRIFT_TOLERANCE_MS = 250
 
 function readRecordedSize(events: readonly ReplayEvent[]): {
   width: number
@@ -111,9 +131,31 @@ function readRecordedSize(events: readonly ReplayEvent[]): {
   return { width, height }
 }
 
-/** Mounts rrweb's imperative Replayer and exposes the narrow playback handle. */
-function PlayerCanvas({ events, onReady }: PlayerCanvasProps) {
+function alignPlayer(replayer: Replayer, target: PlayerTarget): void {
+  const ms = Math.max(MIN_RENDER_SEEK_MS, target.trackTime * 1000)
+  replayer.setConfig({ speed: target.speed })
+  if (target.isPlaying && target.live) replayer.play(ms)
+  else replayer.pause(ms)
+}
+
+/** Mounts rrweb's imperative Replayer and keeps it on the projected time. */
+function PlayerCanvas({
+  events,
+  trackTime,
+  live,
+  isPlaying,
+  speed,
+}: PlayerCanvasProps) {
   const mountRef = useRef<HTMLDivElement>(null)
+  const replayerRef = useRef<Replayer | null>(null)
+  const appliedRef = useRef<PlayerTarget | null>(null)
+  // Latest committed target, so a player built for a newly selected tab lands
+  // on the current global position instead of the one that requested it.
+  const targetRef = useRef<PlayerTarget>({ trackTime, live, isPlaying, speed })
+  useEffect(() => {
+    targetRef.current = { trackTime, live, isPlaying, speed }
+  })
+
   useEffect(() => {
     const mount = mountRef.current
     if (!mount) return
@@ -162,15 +204,15 @@ function PlayerCanvas({ events, onReady }: PlayerCanvasProps) {
       observer.observe(mount)
     }
 
-    onReady({
-      seek: (ms) => replayer.pause(Math.max(MIN_RENDER_SEEK_MS, ms)),
-      play: (ms) => replayer.play(ms),
-      pause: () => replayer.pause(),
-      setSpeed: (speed) => replayer.setConfig({ speed }),
-      getCurrentTime: () => replayer.getCurrentTime(),
-    })
+    replayerRef.current = replayer
+    // Positioning here rather than waiting for the alignment effect keeps
+    // reconstruction inside one commit, so a tab switch never paints an
+    // unpositioned frame.
+    alignPlayer(replayer, targetRef.current)
+    appliedRef.current = targetRef.current
     return () => {
-      onReady(null)
+      replayerRef.current = null
+      appliedRef.current = null
       observer?.disconnect()
       try {
         replayer.destroy()
@@ -179,7 +221,31 @@ function PlayerCanvas({ events, onReady }: PlayerCanvasProps) {
       }
       mount.replaceChildren()
     }
-  }, [events, onReady])
+  }, [events])
+
+  useEffect(() => {
+    const replayer = replayerRef.current
+    const applied = appliedRef.current
+    if (!replayer || !applied) return
+    const target = { trackTime, live, isPlaying, speed }
+    const controlChanged =
+      applied.speed !== speed ||
+      applied.isPlaying !== isPlaying ||
+      applied.live !== live
+    if (!controlChanged) {
+      if (applied.isPlaying && applied.live) {
+        const drift = Math.abs(
+          replayer.getCurrentTime() - target.trackTime * 1000,
+        )
+        appliedRef.current = target
+        if (drift <= DRIFT_TOLERANCE_MS) return
+      } else if (applied.trackTime === target.trackTime) {
+        return
+      }
+    }
+    alignPlayer(replayer, target)
+    appliedRef.current = target
+  }, [trackTime, live, isPlaying, speed])
 
   return (
     <div
@@ -190,11 +256,14 @@ function PlayerCanvas({ events, onReady }: PlayerCanvasProps) {
   )
 }
 
-function Caption({ frame }: { frame: ReplayFrame }) {
-  const verb = VERB_META[frame.verb]
-  const kind = KIND_STYLE[frame.kind]
+function Caption({ action }: { action: ReplayFrame }) {
+  const verb = VERB_META[action.verb]
+  const kind = KIND_STYLE[action.kind]
   return (
-    <div className="absolute bottom-5 left-1/2 z-10 flex max-w-[82%] -translate-x-1/2 items-center gap-2.5 rounded-full bg-ink-deep/90 px-4 py-2 shadow-xl backdrop-blur">
+    <div
+      data-replay-caption
+      className="absolute bottom-5 left-1/2 z-10 flex max-w-[82%] -translate-x-1/2 items-center gap-2.5 rounded-full bg-ink-deep/90 px-4 py-2 shadow-xl backdrop-blur"
+    >
       <span
         className={cn(
           'flex size-5 items-center justify-center rounded-md text-white',
@@ -204,7 +273,7 @@ function Caption({ frame }: { frame: ReplayFrame }) {
         <verb.Icon className="size-3" />
       </span>
       <span className="truncate font-semibold text-white/90 text-xs">
-        {frame.caption}
+        {action.caption}
       </span>
     </div>
   )
diff --git a/packages/browseros-agent/apps/claw-app/screens/replay/replay.data.test.ts b/packages/browseros-agent/apps/claw-app/screens/replay/replay.data.test.ts
index 386c5d0666..850ce183f9 100644
--- a/packages/browseros-agent/apps/claw-app/screens/replay/replay.data.test.ts
+++ b/packages/browseros-agent/apps/claw-app/screens/replay/replay.data.test.ts
@@ -1,8 +1,52 @@
 import { describe, expect, it } from 'bun:test'
-import { mapTaskStatus } from './replay.data'
+import type { ToolDispatchRow } from '@/modules/api/audit.hooks'
+import { mapDispatchToFrame, mapTaskStatus } from './replay.data'
+
+const SESSION_START_MS = 1_000_000
+
+function row(overrides: Partial<ToolDispatchRow> = {}): ToolDispatchRow {
+  return {
+    dispatchId: 1,
+    createdAt: SESSION_START_MS + 5_000,
+    slug: 'agent',
+    label: 'Agent',
+    sessionId: 'session-1',
+    toolName: 'read',
+    ...overrides,
+  }
+}
 
 describe('mapTaskStatus', () => {
   it('maps cancelled API sessions to the existing stopped run status', () => {
     expect(mapTaskStatus('cancelled')).toBe('stopped')
   })
 })
+
+describe('mapDispatchToFrame', () => {
+  it('carries the source duration alongside the completion offset', () => {
+    const frame = mapDispatchToFrame(
+      row({ durationMs: 1_500 }),
+      SESSION_START_MS,
+      new Map(),
+    )
+
+    expect(frame.t).toBe(5)
+    expect(frame.durationMs).toBe(1_500)
+  })
+
+  it('leaves duration absent when the row never recorded one', () => {
+    const frame = mapDispatchToFrame(row(), SESSION_START_MS, new Map())
+
+    expect(frame.durationMs).toBeUndefined()
+  })
+
+  it('resolves tab identity through the target map when the row has no tab', () => {
+    const frame = mapDispatchToFrame(
+      row({ targetId: 'target-a' }),
+      SESSION_START_MS,
+      new Map([['target-a', 7]]),
+    )
+
+    expect(frame.tabId).toBe(7)
+  })
+})
diff --git a/packages/browseros-agent/apps/claw-app/screens/replay/replay.data.ts b/packages/browseros-agent/apps/claw-app/screens/replay/replay.data.ts
index a493fd2ded..b7dd9c9a68 100644
--- a/packages/browseros-agent/apps/claw-app/screens/replay/replay.data.ts
+++ b/packages/browseros-agent/apps/claw-app/screens/replay/replay.data.ts
@@ -319,7 +319,12 @@ const TOOL_TO_VERB: Record<string, ReplayVerb> = {
   evaluate: 'type',
 }
 
-function mapDispatchToFrame(
+/**
+ * One audit row as a replay frame. `t` is completion; `durationMs` rides along
+ * untouched so `session-replay.ts` can approximate when the tool began without
+ * a second source of truth for timing.
+ */
+export function mapDispatchToFrame(
   row: ToolDispatchRow,
   sessionStartMs: number,
   targetTabs: ReadonlyMap<string, number>,
@@ -336,6 +341,7 @@ function mapDispatchToFrame(
   const caption = buildCaption(row, verb, isError, cancelled)
   return {
     t,
+    durationMs: row.durationMs,
     kind,
     verb,
     node,
diff --git a/packages/browseros-agent/apps/claw-app/screens/replay/replay.helpers.ts b/packages/browseros-agent/apps/claw-app/screens/replay/replay.helpers.ts
index 891c3909cc..4336b97375 100644
--- a/packages/browseros-agent/apps/claw-app/screens/replay/replay.helpers.ts
+++ b/packages/browseros-agent/apps/claw-app/screens/replay/replay.helpers.ts
@@ -8,11 +8,7 @@ import {
   Send,
   Type,
 } from 'lucide-react'
-import type {
-  ReplayFrame,
-  ReplayKind,
-  ReplayVerb,
-} from '@/modules/api/replay.hooks'
+import type { ReplayKind, ReplayVerb } from '@/modules/api/replay.hooks'
 
 export interface VerbMeta {
   label: string
@@ -70,17 +66,5 @@ export function formatTime(seconds: number): string {
   return `${m}:${String(s).padStart(2, '0')}`
 }
 
-/** Last frame whose `t` is at or before `time`. Falls back to 0. */
-export function frameIndexAt(
-  frames: readonly ReplayFrame[],
-  time: number,
-): number {
-  let idx = 0
-  for (let i = 0; i < frames.length; i++) {
-    if (frames[i].t <= time + 0.001) idx = i
-  }
-  return idx
-}
-
 export const PLAYBACK_SPEEDS: readonly number[] = [1, 2, 4]
 export const DEFAULT_PLAYBACK_SPEED = 2
diff --git a/packages/browseros-agent/apps/claw-app/screens/replay/session-replay.test.ts b/packages/browseros-agent/apps/claw-app/screens/replay/session-replay.test.ts
new file mode 100644
index 0000000000..351c4fe15c
--- /dev/null
+++ b/packages/browseros-agent/apps/claw-app/screens/replay/session-replay.test.ts
@@ -0,0 +1,402 @@
+/**
+ * @license
+ * Copyright 2026 BrowserOS
+ * SPDX-License-Identifier: AGPL-3.0-or-later
+ */
+
+import { describe, expect, it } from 'bun:test'
+import type { ReplayEvent, ReplayFrame } from '@/modules/api/replay.hooks'
+import type { ReplayTabData } from './replay.data'
+import { buildReplayEventCatalog } from './replay-events'
+import {
+  buildSessionReplayPlan,
+  type SessionReplayPlanInput,
+} from './session-replay'
+
+const SESSION_START_MS = 1_000_000
+
+function frame(
+  t: number,
+  tabId: number | null,
+  extra: Partial<ReplayFrame> = {},
+): ReplayFrame {
+  return {
+    t,
+    kind: 'action',
+    verb: 'read',
+    node: 'test',
+    caption: `action at ${t}`,
+    tabId,
+    ...extra,
+  }
+}
+
+function event(
+  ts: number,
+  documentId: string,
+  tabId = 1,
+  type = 2,
+): ReplayEvent {
+  return {
+    sessionId: 'test',
+    documentId,
+    targetId: `target-${documentId}`,
+    tabId,
+    type,
+    data: {},
+    ts,
+  }
+}
+
+/** Snapshot plus a trailing mutation: the minimum rrweb can reconstruct. */
+function track(tabId: number, originMs: number, endMs: number): ReplayEvent[] {
+  const documentId = `document-${tabId}`
+  return [
+    event(originMs, documentId, tabId, 2),
+    event(endMs, documentId, tabId, 3),
+  ]
+}
+
+function tabs(...tabIds: number[]): ReplayTabData[] {
+  return tabIds.map((tabId) => ({ tabId, complete: true, segments: [] }))
+}
+
+function makeInput(
+  overrides: Partial<SessionReplayPlanInput> = {},
+): SessionReplayPlanInput {
+  return {
+    frames: [],
+    tabs: [],
+    eventsForTab: () => [],
+    startedAtMs: SESSION_START_MS,
+    ...overrides,
+  }
+}
+
+function planFor(
+  events: readonly ReplayEvent[],
+  frames: readonly ReplayFrame[],
+  tabIds: number[],
+) {
+  return buildSessionReplayPlan(
+    makeInput({
+      frames,
+      tabs: tabs(...tabIds),
+      eventsForTab: buildReplayEventCatalog(events).eventsForTab,
+    }),
+  )
+}
+
+describe('activity bounds', () => {
+  it('starts at the first playable checkpoint, not session start', () => {
+    const plan = planFor(
+      track(1, SESSION_START_MS + 4_000, SESSION_START_MS + 9_000),
+      [frame(6, 1)],
+      [1],
+    )
+
+    expect(plan.tracks).toHaveLength(1)
+    expect(plan.tracks[0]?.startAt).toBe(0)
+    expect(plan.firstPlayableTabId).toBe(1)
+    // The 6s dispatch sits 2s after the checkpoint at 4s.
+    expect(plan.actions[0]?.completionAt).toBe(2)
+  })
+
+  it('ends at the later of the last tool and the last rrweb event', () => {
+    const visualsEndLater = planFor(
+      track(1, SESSION_START_MS, SESSION_START_MS + 20_000),
+      [frame(5, 1)],
+      [1],
+    )
+    expect(visualsEndLater.durationSeconds).toBe(20)
+
+    const toolsEndLater = planFor(
+      track(1, SESSION_START_MS, SESSION_START_MS + 9_000),
+      [frame(38, 1)],
+      [1],
+    )
+    expect(toolsEndLater.durationSeconds).toBe(38)
+  })
+
+  it('reports no replayable activity when nothing is playable', () => {
+    const plan = planFor(
+      [event(SESSION_START_MS, 'document-1', 1, 3)],
+      [frame(4, 1), frame(9, null)],
+      [1],
+    )
+
+    expect(plan.durationSeconds).toBe(0)
+    expect(plan.tracks).toEqual([])
+    expect(plan.firstPlayableTabId).toBeNull()
+    // The global timeline still lists everything, timed from session start.
+    expect(plan.actions.map(({ startAt }) => startAt)).toEqual([4, 9])
+  })
+})
+
+describe('action schedule', () => {
+  it('derives start from a valid duration and falls back to completion', () => {
+    const plan = planFor(
+      track(1, SESSION_START_MS, SESSION_START_MS + 40_000),
+      [
+        frame(10, 1, { durationMs: 4_000, dispatchId: 1 }),
+        frame(20, 1, { durationMs: undefined, dispatchId: 2 }),
+        frame(30, 1, { durationMs: -5_000, dispatchId: 3 }),
+        frame(35, 1, { durationMs: Number.NaN, dispatchId: 4 }),
+        frame(38, 1, { durationMs: Number.POSITIVE_INFINITY, dispatchId: 5 }),
+      ],
+      [1],
+    )
+
+    expect(plan.actions.map(({ startAt }) => startAt)).toEqual([
+      6, 20, 30, 35, 38,
+    ])
+  })
+
+  it('clamps a start that precedes the activity origin', () => {
+    const plan = planFor(
+      track(1, SESSION_START_MS + 5_000, SESSION_START_MS + 20_000),
+      [frame(6, 1, { durationMs: 6_000 })],
+      [1],
+    )
+
+    // Completion is 1s into activity; a 6s tool would have begun 5s earlier.
+    expect(plan.actions[0]?.startAt).toBe(0)
+    expect(plan.actions[0]?.completionAt).toBe(1)
+  })
+
+  it('orders overlapping starts by completion, dispatch id, then source order', () => {
+    const plan = planFor(
+      track(1, SESSION_START_MS, SESSION_START_MS + 30_000),
+      [
+        // Every tool overlaps at start 10; only the tie-breaks separate them.
+        frame(12, 1, { durationMs: 2_000, dispatchId: 40, caption: 'latest' }),
+        frame(11, 1, { durationMs: 1_000, dispatchId: 30, caption: 'middle' }),
+        frame(10, 1, { durationMs: 0, dispatchId: 20, caption: 'higher-id' }),
+        frame(10, 1, { durationMs: 0, dispatchId: 10, caption: 'lower-id' }),
+        frame(10, 1, { durationMs: 0, caption: 'no-id-first' }),
+        frame(10, 1, { durationMs: 0, caption: 'no-id-second' }),
+      ],
+      [1],
+    )
+
+    expect(plan.actions.map(({ startAt }) => startAt)).toEqual([
+      10, 10, 10, 10, 10, 10,
+    ])
+    expect(plan.actions.map(({ frame: f }) => f.caption)).toEqual([
+      'lower-id',
+      'higher-id',
+      'no-id-first',
+      'no-id-second',
+      'middle',
+      'latest',
+    ])
+  })
+
+  it('does not mutate the source frame array', () => {
+    const frames = [
+      frame(20, 1, { dispatchId: 2 }),
+      frame(10, 1, { dispatchId: 1 }),
+    ]
+    planFor(track(1, SESSION_START_MS, SESSION_START_MS + 30_000), frames, [1])
+
+    expect(frames.map(({ dispatchId }) => dispatchId)).toEqual([2, 1])
+  })
+})
+
+describe('stateAt', () => {
+  const events = [
+    ...track(1, SESSION_START_MS, SESSION_START_MS + 10_000),
+    ...track(2, SESSION_START_MS + 20_000, SESSION_START_MS + 30_000),
+  ]
+  const frames = [
+    frame(5, 1, { dispatchId: 1, caption: 'tab 1 tool' }),
+    frame(15, null, { dispatchId: 2, caption: 'name_session' }),
+    frame(25, 2, { dispatchId: 3, caption: 'tab 2 tool' }),
+    frame(28, 3, { dispatchId: 4, caption: 'no-visual tab tool' }),
+  ]
+  const plan = planFor(events, frames, [1, 2, 3])
+
+  it('shows the first playable track before any action starts', () => {
+    expect(plan.stateAt(0).currentIndex).toBe(-1)
+    expect(plan.stateAt(0).currentAction).toBeNull()
+    expect(plan.stateAt(0).tabId).toBe(1)
+    expect(plan.project(1, 0)).toEqual({ trackTime: 0, live: true })
+  })
+
+  it('follows the latest crossed action that has a playable tab', () => {
+    expect(plan.stateAt(5).tabId).toBe(1)
+    expect(plan.stateAt(25).tabId).toBe(2)
+  })
+
+  it('keeps an untabbed action current without moving the camera', () => {
+    const state = plan.stateAt(15)
+    expect(state.currentAction?.frame.caption).toBe('name_session')
+    expect(state.currentAction?.trackTabId).toBeNull()
+    expect(state.tabId).toBe(1)
+  })
+
+  it('keeps a no-visual tab action current without moving the camera', () => {
+    const state = plan.stateAt(28)
+    expect(state.currentAction?.frame.caption).toBe('no-visual tab tool')
+    expect(state.currentAction?.trackTabId).toBeNull()
+    expect(state.tabId).toBe(2)
+  })
+
+  it('resolves identically regardless of query order', () => {
+    const forward = [0, 5, 15, 25, 28].map((t) => plan.stateAt(t))
+    const backward = [28, 25, 15, 5, 0].map((t) => plan.stateAt(t)).reverse()
+
+    expect(backward).toEqual(forward)
+  })
+
+  it('collapses several actions crossed in one update to the latest tab', () => {
+    // Jumping 0 -> 28 crosses tab 1, the untabbed tool, tab 2, and a no-visual
+    // tab; only the latest playable tab may win.
+    expect(plan.stateAt(28).tabId).toBe(2)
+    expect(plan.stateAt(28).currentIndex).toBe(3)
+  })
+})
+
+describe('projection', () => {
+  const plan = planFor(
+    [
+      ...track(1, SESSION_START_MS, SESSION_START_MS + 10_000),
+      ...track(2, SESSION_START_MS + 20_000, SESSION_START_MS + 30_000),
+    ],
+    [frame(5, 1), frame(25, 2)],
+    [1, 2],
+  )
+
+  it('holds the first checkpoint before a track begins recording', () => {
+    expect(plan.project(2, 5)).toEqual({ trackTime: 0, live: false })
+  })
+
+  it('tracks global time inside the recorded range', () => {
+    expect(plan.project(2, 25)).toEqual({ trackTime: 5, live: true })
+  })
+
+  it('holds the final recorded state after a track ends', () => {
+    expect(plan.project(1, 25)).toEqual({ trackTime: 10, live: false })
+    expect(plan.project(1, 10)).toEqual({ trackTime: 10, live: false })
+  })
+
+  it('returns a clamped projection for a tab with no track', () => {
+    expect(plan.project(99, 5)).toEqual({ trackTime: 0, live: false })
+    expect(plan.project(null, 5)).toEqual({ trackTime: 0, live: false })
+  })
+
+  it('never plays a static single-checkpoint track', () => {
+    const staticPlan = planFor(
+      [
+        event(SESSION_START_MS, 'document-1', 1, 2),
+        event(SESSION_START_MS, 'document-1', 1, 4),
+      ],
+      [frame(3, 1)],
+      [1],
+    )
+
+    expect(staticPlan.tracks[0]?.durationSeconds).toBe(0)
+    expect(staticPlan.project(1, 0).live).toBe(false)
+    expect(staticPlan.durationSeconds).toBe(3)
+  })
+})
+
+describe('address bar', () => {
+  const plan = planFor(
+    [
+      ...track(1, SESSION_START_MS, SESSION_START_MS + 30_000),
+      ...track(2, SESSION_START_MS + 5_000, SESSION_START_MS + 30_000),
+    ],
+    [
+      frame(2, 1, { dispatchId: 1, url: 'https://one.example/a' }),
+      frame(6, 2, { dispatchId: 2, url: 'https://two.example/b' }),
+      frame(8, 1, { dispatchId: 3, url: null }),
+      frame(10, null, { dispatchId: 4, url: 'https://untabbed.example' }),
+    ],
+    [1, 2],
+  )
+
+  it('keeps the visible tab URL when a later action carries none', () => {
+    expect(plan.urlAt(1, 10)).toBe('https://one.example/a')
+  })
+
+  it('does not leak another tab URL into the visible tab', () => {
+    expect(plan.urlAt(2, 10)).toBe('https://two.example/b')
+  })
+
+  it('has no URL before the tab is first seen', () => {
+    expect(plan.urlAt(2, 2)).toBeNull()
+    expect(plan.urlAt(null, 10)).toBeNull()
+  })
+})
+
+describe('same-tab navigation', () => {
+  it('stays one playable track across document lifecycles', () => {
+    const plan = planFor(
+      [
+        event(SESSION_START_MS, 'document-a', 1, 2),
+        event(SESSION_START_MS + 4_000, 'document-a', 1, 3),
+        event(SESSION_START_MS + 6_000, 'document-b', 1, 2),
+        event(SESSION_START_MS + 12_000, 'document-b', 1, 3),
+      ],
+      [frame(10, 1)],
+      [1],
+    )
+
+    expect(plan.tracks).toHaveLength(1)
+    expect(plan.tracks[0]?.durationSeconds).toBe(12)
+    expect(plan.project(1, 10)).toEqual({ trackTime: 10, live: true })
+  })
+})
+
+describe('Trendshift regression', () => {
+  // Real 2026-07-24 session: tab 1 stopped emitting DOM events at 9.003s while
+  // wait/read tools kept targeting it out to 38.321s. Chapter playback ended at
+  // 9.003s, so the last three tools could never become current.
+  const TAB_1_VISUAL_END = 9.003
+  const TAB_1_TOOLS = [2.053, 24.225, 26.717, 38.321]
+  const plan = planFor(
+    [
+      ...track(1, SESSION_START_MS, SESSION_START_MS + TAB_1_VISUAL_END * 1000),
+      ...track(2, SESSION_START_MS + 12_000, SESSION_START_MS + 18_000),
+    ],
+    [
+      ...TAB_1_TOOLS.map((t, index) =>
+        frame(t, 1, { dispatchId: index + 1, caption: `tab 1 tool ${t}` }),
+      ),
+      frame(14, null, { dispatchId: 90, caption: 'name_session' }),
+      frame(16, 2, { dispatchId: 91, caption: 'tab 2 tool' }),
+    ],
+    [1, 2],
+  )
+
+  it('keeps every late tool reachable inside the activity window', () => {
+    expect(plan.durationSeconds).toBe(38.321)
+    for (const t of TAB_1_TOOLS) {
+      expect(plan.stateAt(t).currentAction?.frame.caption).toBe(
+        `tab 1 tool ${t}`,
+      )
+    }
+  })
+
+  it('holds the final tab 1 frame while its late tools stay current', () => {
+    for (const t of [24.225, 26.717, 38.321]) {
+      expect(plan.stateAt(t).tabId).toBe(1)
+      expect(plan.project(1, t)).toEqual({
+        trackTime: TAB_1_VISUAL_END,
+        live: false,
+      })
+    }
+  })
+
+  it('still switches to tab 2 and back to tab 1 in tool order', () => {
+    expect(plan.stateAt(16).tabId).toBe(2)
+    expect(plan.stateAt(24.225).tabId).toBe(1)
+  })
+
+  it('keeps the untabbed name_session current without a camera move', () => {
+    const state = plan.stateAt(14)
+    expect(state.currentAction?.frame.caption).toBe('name_session')
+    expect(state.tabId).toBe(1)
+  })
+})
diff --git a/packages/browseros-agent/apps/claw-app/screens/replay/session-replay.ts b/packages/browseros-agent/apps/claw-app/screens/replay/session-replay.ts
new file mode 100644
index 0000000000..70e57fd2c8
--- /dev/null
+++ b/packages/browseros-agent/apps/claw-app/screens/replay/session-replay.ts
@@ -0,0 +1,285 @@
+/**
+ * @license
+ * Copyright 2026 BrowserOS
+ * SPDX-License-Identifier: AGPL-3.0-or-later
+ *
+ * Immutable projection of one session into a single chronological replay.
+ *
+ * The page owns global activity time; everything else is answered here as a
+ * pure function of that time — which tool is current, which Chrome tab the
+ * camera should show, and where that tab's bounded rrweb stream sits. Deriving
+ * rather than accumulating is what lets a forward seek, a backward seek, and a
+ * live plan swap all resolve to identical state with no camera history.
+ *
+ * The load-bearing case is a tab whose DOM recording stops long before its last
+ * tool call: real sessions contain tabs with ~9s of rrweb events and valid
+ * tab-attributed tools past 38s. Tools stay reachable on the global clock while
+ * the visible track clamps to its final recorded frame.
+ */
+
+import type { ReplayEvent, ReplayFrame } from '@/modules/api/replay.hooks'
+import type { ReplayTabData } from './replay.data'
+import {
+  type BuildTabViewInput,
+  buildTabView,
+  EMPTY_TAB_VIEW,
+  isPlayableTabView,
+  type TabView,
+} from './tab-view'
+
+export interface SessionReplayPlanInput extends BuildTabViewInput {
+  frames: readonly ReplayFrame[]
+  tabs: readonly ReplayTabData[]
+  eventsForTab: (tabId: number) => readonly ReplayEvent[]
+  /** Session start in epoch ms; the origin of every frame's `t`. */
+  startedAtMs: number
+}
+
+export interface ReplayAction {
+  /** Source dispatch row. `t` stays the session-relative completion offset. */
+  frame: ReplayFrame
+  /**
+   * Activity seconds where this action becomes current. Completion minus a
+   * valid duration, clamped at the activity origin.
+   */
+  startAt: number
+  /**
+   * Activity seconds of the source completion timestamp. Negative when the
+   * tool finished before the first recording checkpoint; used only to break
+   * ordering ties.
+   */
+  completionAt: number
+  /** Tab to show for this action, or null when it must not move the camera. */
+  trackTabId: number | null
+  /** Position in the source dispatch list; final ordering tie-break. */
+  sourceIndex: number
+}
+
+export interface ReplayTrack {
+  tabId: number
+  view: TabView
+  /** Activity seconds where this track's recording begins. */
+  startAt: number
+  /** Length of the track's own rrweb stream. */
+  durationSeconds: number
+}
+
+export interface ReplayState {
+  /** Index into `actions`; -1 before the first action starts. */
+  currentIndex: number
+  currentAction: ReplayAction | null
+  /** Tab the camera follows: latest crossed playable tab, else the first one. */
+  tabId: number | null
+}
+
+export interface TrackProjection {
+  /** Seconds into the track's own rrweb stream, clamped to its range. */
+  trackTime: number
+  /**
+   * True while global time lies inside the recorded range. False means the
+   * track is holding a boundary frame — its first checkpoint before the
+   * recording started, its final state after it ended — so rrweb must stay
+   * paused there even while global playback continues.
+   */
+  live: boolean
+}
+
+export interface SessionReplayPlan {
+  /** Replayable activity; 0 when no tab recorded anything renderable. */
+  durationSeconds: number
+  /** Every tool in one global chronological schedule. */
+  actions: readonly ReplayAction[]
+  /** Playable tracks, earliest recording first. */
+  tracks: readonly ReplayTrack[]
+  /** Tab shown before any action with visuals has been crossed. */
+  firstPlayableTabId: number | null
+  /** Any known tab, playable or not, for warnings and the pinned-tab state. */
+  viewFor: (tabId: number | null) => TabView
+  trackFor: (tabId: number | null) => ReplayTrack | null
+  stateAt: (time: number) => ReplayState
+  project: (tabId: number | null, time: number) => TrackProjection
+  /** Latest URL this tab was known to be on at `time`. */
+  urlAt: (tabId: number | null, time: number) => string | null
+}
+
+const NO_ACTIONS: readonly ReplayAction[] = []
+const NO_TRACKS: readonly ReplayTrack[] = []
+const CLAMPED_AT_START: TrackProjection = { trackTime: 0, live: false }
+const NO_STATE: ReplayState = {
+  currentIndex: -1,
+  currentAction: null,
+  tabId: null,
+}
+
+export const EMPTY_SESSION_REPLAY_PLAN: SessionReplayPlan = {
+  durationSeconds: 0,
+  actions: NO_ACTIONS,
+  tracks: NO_TRACKS,
+  firstPlayableTabId: null,
+  viewFor: () => EMPTY_TAB_VIEW,
+  trackFor: () => null,
+  stateAt: () => NO_STATE,
+  project: () => CLAMPED_AT_START,
+  urlAt: () => null,
+}
+
+/** Builds the immutable replay plan for one accepted revision of session data. */
+export function buildSessionReplayPlan(
+  input: SessionReplayPlanInput,
+): SessionReplayPlan {
+  const views = new Map<number, TabView>(
+    input.tabs.map((tab) => [tab.tabId, buildTabView(input, tab.tabId)]),
+  )
+  const playable = [...views.entries()].flatMap(([tabId, view]) =>
+    isPlayableTabView(view) && view.originMs !== null && view.endMs !== null
+      ? [{ tabId, view, originMs: view.originMs, endMs: view.endMs }]
+      : [],
+  )
+  playable.sort(
+    (left, right) => left.originMs - right.originMs || left.tabId - right.tabId,
+  )
+
+  // Without a checkpoint there is nothing to replay, so activity has no length.
+  // Actions are still scheduled against session start to keep the global
+  // timeline readable, and the page renders its no-recording state instead of a
+  // transport. Anchoring on the first checkpoint (rather than session start)
+  // also keeps the origin immutable as a live recording grows.
+  const first = playable[0]
+  const originMs = first?.originMs ?? input.startedAtMs
+  const actions = buildActions(
+    input,
+    originMs,
+    new Set(playable.map(({ tabId }) => tabId)),
+  )
+  const lastVisualEnd = playable.reduce(
+    (latest, track) => Math.max(latest, (track.endMs - originMs) / 1000),
+    0,
+  )
+  const lastCompletion = actions.reduce(
+    (latest, action) => Math.max(latest, action.completionAt),
+    0,
+  )
+  const durationSeconds = first ? Math.max(lastVisualEnd, lastCompletion) : 0
+
+  const tracks: ReplayTrack[] = playable.map(
+    ({ tabId, view, originMs: at }) => ({
+      tabId,
+      view,
+      startAt: (at - originMs) / 1000,
+      durationSeconds: view.totalSeconds,
+    }),
+  )
+  const tracksByTab = new Map(tracks.map((track) => [track.tabId, track]))
+  // Latest playable tab among actions[0..i], so a lookup never rescans history.
+  const cameraTabByIndex: (number | null)[] = []
+  let carried: number | null = null
+  for (const action of actions) {
+    carried = action.trackTabId ?? carried
+    cameraTabByIndex.push(carried)
+  }
+
+  const firstPlayableTabId = first?.tabId ?? null
+  const trackFor = (tabId: number | null): ReplayTrack | null =>
+    tabId === null ? null : (tracksByTab.get(tabId) ?? null)
+  const stateAt = (time: number): ReplayState => {
+    const currentIndex = lastActionStartedAt(actions, time)
+    return {
+      currentIndex,
+      currentAction: actions[currentIndex] ?? null,
+      tabId:
+        (currentIndex < 0 ? null : cameraTabByIndex[currentIndex]) ??
+        firstPlayableTabId,
+    }
+  }
+
+  return {
+    durationSeconds,
+    actions,
+    tracks,
+    firstPlayableTabId,
+    viewFor: (tabId) =>
+      tabId === null ? EMPTY_TAB_VIEW : (views.get(tabId) ?? EMPTY_TAB_VIEW),
+    trackFor,
+    stateAt,
+    project: (tabId, time) => {
+      const track = trackFor(tabId)
+      if (!track) return CLAMPED_AT_START
+      const elapsed = time - track.startAt
+      return {
+        trackTime: Math.min(Math.max(0, elapsed), track.durationSeconds),
+        live: elapsed >= 0 && elapsed < track.durationSeconds,
+      }
+    },
+    urlAt: (tabId, time) => {
+      if (tabId === null) return null
+      for (let i = lastActionStartedAt(actions, time); i >= 0; i--) {
+        const { frame } = actions[i] as ReplayAction
+        if (frame.tabId === tabId && frame.url) return frame.url
+      }
+      return null
+    },
+  }
+}
+
+function buildActions(
+  input: SessionReplayPlanInput,
+  originMs: number,
+  playableTabIds: ReadonlySet<number>,
+): readonly ReplayAction[] {
+  if (input.frames.length === 0) return NO_ACTIONS
+  return input.frames
+    .map((frame, sourceIndex): ReplayAction => {
+      const completionAt =
+        (input.startedAtMs + frame.t * 1000 - originMs) / 1000
+      const duration = frame.durationMs
+      const measured =
+        typeof duration === 'number' &&
+        Number.isFinite(duration) &&
+        duration >= 0
+          ? duration / 1000
+          : 0
+      return {
+        frame,
+        startAt: Math.max(0, completionAt - measured),
+        completionAt,
+        trackTabId:
+          frame.tabId !== null &&
+          frame.tabId !== undefined &&
+          playableTabIds.has(frame.tabId)
+            ? frame.tabId
+            : null,
+        sourceIndex,
+      }
+    })
+    .sort(
+      (left, right) =>
+        left.startAt - right.startAt ||
+        left.completionAt - right.completionAt ||
+        dispatchOrder(left) - dispatchOrder(right) ||
+        left.sourceIndex - right.sourceIndex,
+    )
+}
+
+function dispatchOrder(action: ReplayAction): number {
+  return action.frame.dispatchId ?? Number.MAX_SAFE_INTEGER
+}
+
+/** Index of the last action whose start has been crossed; -1 before the first. */
+function lastActionStartedAt(
+  actions: readonly ReplayAction[],
+  time: number,
+): number {
+  let low = 0
+  let high = actions.length - 1
+  let found = -1
+  while (low <= high) {
+    const mid = (low + high) >> 1
+    if ((actions[mid] as ReplayAction).startAt <= time) {
+      found = mid
+      low = mid + 1
+    } else {
+      high = mid - 1
+    }
+  }
+  return found
+}
diff --git a/packages/browseros-agent/apps/claw-app/screens/replay/tab-view.test.ts b/packages/browseros-agent/apps/claw-app/screens/replay/tab-view.test.ts
index 46cc7e539b..0d4ca57504 100644
--- a/packages/browseros-agent/apps/claw-app/screens/replay/tab-view.test.ts
+++ b/packages/browseros-agent/apps/claw-app/screens/replay/tab-view.test.ts
@@ -5,7 +5,7 @@
  */
 
 import { describe, expect, it } from 'bun:test'
-import type { ReplayEvent, ReplayFrame } from '@/modules/api/replay.hooks'
+import type { ReplayEvent } from '@/modules/api/replay.hooks'
 import type { ReplayTabData } from './replay.data'
 import {
   buildReplayDocumentIds,
@@ -15,25 +15,9 @@ import {
 import {
   type BuildTabViewInput,
   buildTabView,
-  tabSeekForFrame,
+  isPlayableTabView,
 } from './tab-view'
 
-function frame(
-  t: number,
-  tabId: number | null,
-  extra: Partial<ReplayFrame> = {},
-): ReplayFrame {
-  return {
-    t,
-    kind: 'action',
-    verb: 'read',
-    node: 'test',
-    caption: 'test',
-    tabId,
-    ...extra,
-  }
-}
-
 function event(
   ts: number,
   documentId: string,
@@ -77,10 +61,8 @@ function makeInput(
   overrides: Partial<BuildTabViewInput> = {},
 ): BuildTabViewInput {
   return {
-    frames: [],
     tabs: [],
     eventsForTab: () => [],
-    startedAtMs: 1_000_000,
     ...overrides,
   }
 }
@@ -89,11 +71,13 @@ describe('buildTabView', () => {
   it('returns empty without a selected tab', () => {
     const view = buildTabView(makeInput(), null)
     expect(view.events).toEqual([])
-    expect(view.frames).toEqual([])
+    expect(view.originMs).toBeNull()
+    expect(view.endMs).toBeNull()
     expect(view.totalSeconds).toBe(0)
+    expect(isPlayableTabView(view)).toBe(false)
   })
 
-  it('merges every document lifecycle and action from one tab', () => {
+  it('merges every document lifecycle from one tab into one track', () => {
     const events = [
       event(1_001_000, 'document-a', 1, 0),
       event(1_001_001, 'document-a', 1, 4),
@@ -107,7 +91,6 @@ describe('buildTabView', () => {
     ]
     const catalog = buildReplayEventCatalog(events)
     const input = makeInput({
-      frames: [frame(1, 1), frame(5, 1), frame(6, 2)],
       tabs: [
         tab(1, [
           {
@@ -136,8 +119,10 @@ describe('buildTabView', () => {
       'document-b',
       'document-b',
     ])
-    expect(view.frames.map(({ t }) => t)).toEqual([0, 4])
+    expect(view.originMs).toBe(1_001_000)
+    expect(view.endMs).toBe(1_006_000)
     expect(view.totalSeconds).toBe(5)
+    expect(isPlayableTabView(view)).toBe(true)
   })
 
   it('keeps a merged tab event array stable across audit polling', () => {
@@ -163,24 +148,16 @@ describe('buildTabView', () => {
       ]),
     ]
     const first = buildTabView(
-      makeInput({
-        frames: [frame(1, 1)],
-        tabs,
-        eventsForTab: catalog.eventsForTab,
-      }),
+      makeInput({ tabs, eventsForTab: catalog.eventsForTab }),
       1,
     )
     const afterAuditPoll = buildTabView(
-      makeInput({
-        frames: [frame(1, 1), frame(2, 1)],
-        tabs,
-        eventsForTab: catalog.eventsForTab,
-      }),
+      makeInput({ tabs, eventsForTab: catalog.eventsForTab }),
       1,
     )
 
+    // Stable identity keeps the single rrweb player alive across polls.
     expect(afterAuditPoll.events).toBe(first.events)
-    expect(afterAuditPoll.frames).not.toBe(first.frames)
   })
 
   it('reuses the playable stream after leading orphan mutations', () => {
@@ -206,6 +183,8 @@ describe('buildTabView', () => {
     const second = buildTabView(input, 1)
     expect(first.events.map(({ type }) => type)).toEqual([2, 3])
     expect(second.events).toBe(first.events)
+    // Bounds follow the playable slice, not the discarded orphan mutation.
+    expect(first.originMs).toBe(1_004_000)
     expect(first.incompleteUntilMs).toBe(3_000)
     expect(first.knownIncomplete).toBe(true)
   })
@@ -248,6 +227,7 @@ describe('buildTabView', () => {
     const view = buildTabView(input, 1)
     expect(view.hasFullSnapshot).toBe(false)
     expect(view.knownIncomplete).toBe(true)
+    expect(isPlayableTabView(view)).toBe(false)
   })
 
   it('reports a generic gap when omissions occur before and during playback', () => {
@@ -342,71 +322,3 @@ describe('catalog ordering', () => {
     ).toEqual(['first', 'later', 'stream-only'])
   })
 })
-
-describe('tabSeekForFrame', () => {
-  it('switches tabs using dispatch tab identity and the tab clock', () => {
-    const selectedFrame = frame(12, 2, { dispatchId: 22 })
-    const events = [
-      event(1_010_000, 'document-b', 2),
-      event(1_015_000, 'document-b', 2, 3),
-    ]
-    const input = makeInput({
-      frames: [frame(1, 1), selectedFrame],
-      tabs: [
-        tab(1, [
-          {
-            documentId: 'document-a',
-            firstEventAt: 1_001_000,
-            lastEventAt: 1_005_000,
-          },
-        ]),
-        tab(2, [
-          {
-            documentId: 'document-b',
-            firstEventAt: 1_010_000,
-            lastEventAt: 1_015_000,
-          },
-        ]),
-      ],
-      eventsForTab: buildReplayEventCatalog(events).eventsForTab,
-    })
-
-    expect(tabSeekForFrame(input, 1, selectedFrame)).toEqual({
-      tabId: 2,
-      seconds: 2,
-    })
-  })
-
-  it('does not reset the clock for an action after navigation', () => {
-    const selectedFrame = frame(12, 1, { dispatchId: 22 })
-    const events = [
-      event(1_001_000, 'document-a'),
-      event(1_005_000, 'document-a', 1, 3),
-      event(1_010_000, 'document-b'),
-      event(1_015_000, 'document-b', 1, 3),
-    ]
-    const input = makeInput({
-      frames: [selectedFrame],
-      tabs: [
-        tab(1, [
-          {
-            documentId: 'document-a',
-            firstEventAt: 1_001_000,
-            lastEventAt: 1_005_000,
-          },
-          {
-            documentId: 'document-b',
-            firstEventAt: 1_010_000,
-            lastEventAt: 1_015_000,
-          },
-        ]),
-      ],
-      eventsForTab: buildReplayEventCatalog(events).eventsForTab,
-    })
-
-    expect(tabSeekForFrame(input, 1, selectedFrame)).toEqual({
-      tabId: 1,
-      seconds: 11,
-    })
-  })
-})
diff --git a/packages/browseros-agent/apps/claw-app/screens/replay/tab-view.ts b/packages/browseros-agent/apps/claw-app/screens/replay/tab-view.ts
index 39328650f6..8206e53f7e 100644
--- a/packages/browseros-agent/apps/claw-app/screens/replay/tab-view.ts
+++ b/packages/browseros-agent/apps/claw-app/screens/replay/tab-view.ts
@@ -4,13 +4,20 @@
  * SPDX-License-Identifier: AGPL-3.0-or-later
  */
 
-import type { ReplayEvent, ReplayFrame } from '@/modules/api/replay.hooks'
+import type { ReplayEvent } from '@/modules/api/replay.hooks'
 import type { ReplayTabData } from './replay.data'
 
 export interface TabView {
-  frames: ReplayFrame[]
   /** Every playable document lifecycle from one Chrome tab. */
   events: readonly ReplayEvent[]
+  /**
+   * Absolute epoch ms of the first and last playable event. Null when the
+   * tab recorded nothing renderable. `session-replay.ts` anchors the global
+   * activity window on these, so they stay absolute rather than rebased.
+   */
+  originMs: number | null
+  endMs: number | null
+  /** Length of this tab's own rrweb stream. */
   totalSeconds: number
   hasFullSnapshot: boolean
   knownIncomplete: boolean
@@ -19,8 +26,9 @@ export interface TabView {
 }
 
 export const EMPTY_TAB_VIEW: TabView = {
-  frames: [],
   events: [],
+  originMs: null,
+  endMs: null,
   totalSeconds: 0,
   hasFullSnapshot: false,
   knownIncomplete: false,
@@ -54,13 +62,11 @@ interface DocumentState {
 }
 
 export interface BuildTabViewInput {
-  frames: ReplayFrame[]
-  tabs: ReplayTabData[]
+  tabs: readonly ReplayTabData[]
   eventsForTab: (tabId: number) => readonly ReplayEvent[]
-  startedAtMs: number
 }
 
-/** Projects one continuous player and action clock for a persisted Chrome tab. */
+/** Projects one continuous rrweb track for a persisted Chrome tab. */
 export function buildTabView(
   input: BuildTabViewInput,
   tabId: number | null,
@@ -71,27 +77,23 @@ export function buildTabView(
 
   const rawEvents = input.eventsForTab(tabId)
   const stream = playableTabStream(rawEvents)
-  const rawFrames = input.frames.filter((frame) => frame.tabId === tabId)
-  if (rawFrames.length === 0 && rawEvents.length === 0) return EMPTY_TAB_VIEW
-
   const hasFullSnapshot = stream.events.some((event) => event.type === 2)
+  // Without a snapshot nothing is renderable, so the raw stream still
+  // describes when the tab was alive for the incomplete-recording notice.
   const timingEvents = hasFullSnapshot ? stream.events : rawEvents
-  const originMs =
-    timingEvents[0]?.ts ?? input.startedAtMs + (rawFrames[0]?.t ?? 0) * 1000
-  const endMs =
-    timingEvents.at(-1)?.ts ??
-    input.startedAtMs + (rawFrames.at(-1)?.t ?? 0) * 1000
-  const originT = (originMs - input.startedAtMs) / 1000
+  const originMs = timingEvents[0]?.ts ?? null
+  const endMs = timingEvents.at(-1)?.ts ?? null
   const hasCatalogedGap =
     tab.complete === false ||
     tab.segments.some((segment) => segment.hasGap || segment.legacy)
   return {
-    frames: rawFrames.map((frame) => ({
-      ...frame,
-      t: Math.max(0, frame.t - originT),
-    })),
     events: stream.events,
-    totalSeconds: Math.max(0, (endMs - originMs) / 1000),
+    originMs,
+    endMs,
+    totalSeconds:
+      originMs === null || endMs === null
+        ? 0
+        : Math.max(0, (endMs - originMs) / 1000),
     hasFullSnapshot,
     knownIncomplete: hasCatalogedGap || stream.hasOmittedEvents,
     incompleteUntilMs:
@@ -101,28 +103,9 @@ export function buildTabView(
   }
 }
 
-export interface TabSeek {
-  tabId: number | null
-  seconds: number
-}
-
-/** Resolves an audit frame to its persisted Chrome tab and continuous clock. */
-export function tabSeekForFrame(
-  input: BuildTabViewInput,
-  selectedTabId: number | null,
-  frame: ReplayFrame,
-): TabSeek {
-  const tabId = frame.tabId ?? selectedTabId
-  if (tabId === null) return { tabId, seconds: frame.t }
-
-  const view = buildTabView(input, tabId)
-  const originMs =
-    view.events[0]?.ts ?? input.eventsForTab(tabId)[0]?.ts ?? input.startedAtMs
-  const timestamp = input.startedAtMs + frame.t * 1000
-  return {
-    tabId,
-    seconds: Math.max(0, (timestamp - originMs) / 1000),
-  }
+/** True when rrweb can reconstruct this tab: a snapshot plus something after it. */
+export function isPlayableTabView(view: TabView): boolean {
+  return view.hasFullSnapshot && view.events.length >= 2
 }
 
 function playableTabStream(
diff --git a/packages/browseros-agent/apps/claw-app/screens/replay/use-playback.test.tsx b/packages/browseros-agent/apps/claw-app/screens/replay/use-playback.test.tsx
new file mode 100644
index 0000000000..6e22827515
--- /dev/null
+++ b/packages/browseros-agent/apps/claw-app/screens/replay/use-playback.test.tsx
@@ -0,0 +1,243 @@
+/**
+ * @license
+ * Copyright 2026 BrowserOS
+ * SPDX-License-Identifier: AGPL-3.0-or-later
+ */
+
+import { afterEach, beforeEach, describe, expect, it } from 'bun:test'
+import { parseHTML } from 'linkedom'
+import { act } from 'react'
+import type { Root } from 'react-dom/client'
+import { type Playback, usePlayback } from './use-playback'
+
+const globalDescriptors = new Map(
+  ['window', 'document', 'navigator', 'HTMLElement', 'Node', 'Event'].map(
+    (name) => [name, Object.getOwnPropertyDescriptor(globalThis, name)],
+  ),
+)
+
+let root: Root
+let container: HTMLElement
+let latest: Playback
+let nextFrameId = 1
+let frames = new Map<number, FrameRequestCallback>()
+let cancelledFrameIds: number[] = []
+
+function Harness({ totalSeconds }: { totalSeconds: number }) {
+  latest = usePlayback(totalSeconds)
+  return <div data-time={latest.time} data-playing={latest.isPlaying} />
+}
+
+async function render(totalSeconds: number) {
+  await act(async () => root.render(<Harness totalSeconds={totalSeconds} />))
+}
+
+/** Fires every pending animation frame with an explicit wall-clock stamp. */
+async function advanceTo(wallMs: number) {
+  const pending = [...frames.values()]
+  frames.clear()
+  await act(async () => {
+    for (const callback of pending) callback(wallMs)
+  })
+}
+
+beforeEach(async () => {
+  nextFrameId = 1
+  frames = new Map()
+  cancelledFrameIds = []
+  const dom = parseHTML(
+    '<!doctype html><html><body><div id="root"></div></body></html>',
+  )
+  const globals = {
+    window: dom.window,
+    document: dom.document,
+    navigator: dom.window.navigator,
+    HTMLElement: dom.window.HTMLElement,
+    Node: dom.window.Node,
+    Event: dom.window.Event,
+  }
+  for (const [name, value] of Object.entries(globals)) {
+    Object.defineProperty(globalThis, name, {
+      configurable: true,
+      writable: true,
+      value,
+    })
+  }
+  Object.assign(dom.window, {
+    requestAnimationFrame: (callback: FrameRequestCallback) => {
+      const id = nextFrameId++
+      frames.set(id, callback)
+      return id
+    },
+    cancelAnimationFrame: (id: number) => {
+      cancelledFrameIds.push(id)
+      frames.delete(id)
+    },
+  })
+  Object.defineProperty(globalThis, 'IS_REACT_ACT_ENVIRONMENT', {
+    configurable: true,
+    writable: true,
+    value: true,
+  })
+
+  container = dom.document.getElementById('root') as unknown as HTMLElement
+  const { createRoot } = await import('react-dom/client')
+  root = createRoot(container)
+})
+
+afterEach(async () => {
+  await act(async () => root.unmount())
+  for (const [name, descriptor] of globalDescriptors) {
+    if (descriptor) Object.defineProperty(globalThis, name, descriptor)
+    else Reflect.deleteProperty(globalThis, name)
+  }
+  Reflect.deleteProperty(globalThis, 'IS_REACT_ACT_ENVIRONMENT')
+})
+
+describe('usePlayback', () => {
+  it('advances from animation-frame time at the selected speed', async () => {
+    await render(100)
+    await act(async () => latest.setSpeed(1))
+
+    await advanceTo(1_000)
+    expect(latest.time).toBe(0)
+
+    await advanceTo(3_000)
+    expect(latest.time).toBe(2)
+
+    await act(async () => latest.setSpeed(4))
+    await advanceTo(5_000)
+    await advanceTo(6_000)
+    expect(latest.time).toBe(6)
+  })
+
+  it('defaults to 2x without consulting a player', async () => {
+    await render(100)
+
+    expect(latest.speed).toBe(2)
+    await advanceTo(1_000)
+    await advanceTo(2_000)
+    expect(latest.time).toBe(2)
+  })
+
+  it('excludes paused wall time when playback resumes', async () => {
+    await render(100)
+    await act(async () => latest.setSpeed(1))
+    await advanceTo(0)
+    await advanceTo(2_000)
+    expect(latest.time).toBe(2)
+
+    await act(async () => latest.pause())
+    expect(latest.isPlaying).toBe(false)
+
+    await act(async () => latest.play())
+    await advanceTo(60_000)
+    await advanceTo(61_000)
+    expect(latest.time).toBe(3)
+  })
+
+  it('stops once at activity end and restarts from zero on play', async () => {
+    await render(10)
+    await act(async () => latest.setSpeed(1))
+    await advanceTo(0)
+    await advanceTo(20_000)
+
+    expect(latest.time).toBe(10)
+    expect(latest.isPlaying).toBe(false)
+    expect(frames.size).toBe(0)
+
+    await act(async () => latest.play())
+    expect(latest.time).toBe(0)
+    expect(latest.isPlaying).toBe(true)
+  })
+
+  it('clamps a seek to the activity window and pauses', async () => {
+    await render(10)
+
+    let applied = 0
+    await act(async () => {
+      applied = latest.seek(99)
+    })
+    expect(applied).toBe(10)
+    expect(latest.time).toBe(10)
+    expect(latest.isPlaying).toBe(false)
+
+    await act(async () => {
+      applied = latest.seek(-5)
+    })
+    expect(applied).toBe(0)
+    expect(latest.time).toBe(0)
+  })
+
+  it('resumes when a live recording grows past where activity ended', async () => {
+    await render(10)
+    await act(async () => latest.setSpeed(1))
+    await advanceTo(0)
+    await advanceTo(20_000)
+    expect(latest.isPlaying).toBe(false)
+
+    await render(20)
+
+    expect(latest.time).toBe(10)
+    expect(latest.isPlaying).toBe(true)
+  })
+
+  it('does not resume growth over an operator pause', async () => {
+    await render(10)
+    await act(async () => latest.setSpeed(1))
+    await advanceTo(0)
+    await advanceTo(4_000)
+    await act(async () => latest.pause())
+
+    await render(20)
+
+    expect(latest.time).toBe(4)
+    expect(latest.isPlaying).toBe(false)
+  })
+
+  it('clamps the playhead when activity shrinks', async () => {
+    await render(20)
+    await act(async () => latest.seek(18))
+
+    await render(6)
+
+    expect(latest.time).toBe(6)
+  })
+
+  it('runs no clock while there is nothing replayable', async () => {
+    await render(0)
+
+    expect(latest.isPlaying).toBe(true)
+    expect(frames.size).toBe(0)
+
+    // Autoplay survives until visuals resolve, then starts from zero.
+    await render(10)
+    await advanceTo(0)
+    await advanceTo(1_000)
+    expect(latest.time).toBe(2)
+  })
+
+  it('keeps exactly one animation loop across control changes', async () => {
+    await render(100)
+    await act(async () => latest.setSpeed(1))
+    await advanceTo(0)
+    expect(frames.size).toBe(1)
+
+    await act(async () => latest.setSpeed(4))
+    expect(frames.size).toBe(1)
+
+    await advanceTo(1_000)
+    expect(frames.size).toBe(1)
+  })
+
+  it('cancels its animation frame on unmount', async () => {
+    await render(100)
+    await advanceTo(0)
+    expect(frames.size).toBe(1)
+
+    await act(async () => root.unmount())
+
+    expect(frames.size).toBe(0)
+    expect(cancelledFrameIds.length).toBeGreaterThan(0)
+  })
+})
diff --git a/packages/browseros-agent/apps/claw-app/screens/replay/use-playback.ts b/packages/browseros-agent/apps/claw-app/screens/replay/use-playback.ts
index 1f2c01f916..7b725f1763 100644
--- a/packages/browseros-agent/apps/claw-app/screens/replay/use-playback.ts
+++ b/packages/browseros-agent/apps/claw-app/screens/replay/use-playback.ts
@@ -1,88 +1,131 @@
-import { useCallback, useEffect, useState } from 'react'
+import { useCallback, useEffect, useRef, useState } from 'react'
 import { DEFAULT_PLAYBACK_SPEED, PLAYBACK_SPEEDS } from './replay.helpers'
 
 export interface Playback {
-  /** Seconds elapsed in the selected tab's local recording. */
+  /** Seconds elapsed in the session's global activity window. */
   time: number
-  /** True while rrweb's internal timer should be running. */
   isPlaying: boolean
-  /** Multiplier applied by rrweb's internal timer. */
   speed: number
   setSpeed: (next: number) => void
-  /** Starts playback, restarting from zero after local completion. */
+  /** Starts playback, restarting from zero once activity has completed. */
   play: () => void
-  /** Pauses playback without moving the local playhead. */
+  /** Pauses playback without moving the playhead. */
   pause: () => void
-  /** Toggles play/pause. Restarts from 0 if the chapter already finished. */
   togglePlay: () => void
-  /** Jumps the playhead to `seconds` and pauses. */
+  /** Jumps the playhead to `seconds` and pauses. Returns the applied value. */
   seek: (seconds: number) => number
-  /** Updates display state from rrweb without seeking the player. */
-  syncFromPlayer: (seconds: number) => boolean
 }
 
-const END_EPSILON_SECONDS = 0.01
+interface Anchor {
+  /** Animation-frame timestamp this run of the clock started from. */
+  wallMs: number
+  /** Activity time at that timestamp. */
+  time: number
+}
 
-/** Owns replay transport state while rrweb owns the playback timer. */
+/**
+ * Authoritative clock for session activity time.
+ *
+ * The app owns this timer rather than rrweb, because the visible tab's
+ * recording routinely ends long before the session's last tool call — a
+ * player-owned clock simply stops there and strands every later action. Time
+ * advances from animation-frame timestamps so pauses, speed changes, and seeks
+ * re-anchor exactly instead of accumulating rounding drift.
+ */
 export function usePlayback(totalSeconds: number): Playback {
   const [time, setTime] = useState(0)
   const [isPlaying, setIsPlaying] = useState(true)
   const [speed, setSpeed] = useState<number>(DEFAULT_PLAYBACK_SPEED)
+  const timeRef = useRef(0)
+  const anchorRef = useRef<Anchor | null>(null)
+  // Distinguishes "stopped because activity ended" from an operator pause, so
+  // only the former resumes when a live recording extends the window.
+  const completedRef = useRef(false)
 
-  const clamp = useCallback(
-    (seconds: number) => Math.max(0, Math.min(totalSeconds, seconds)),
-    [totalSeconds],
-  )
+  const applyTime = useCallback((next: number) => {
+    timeRef.current = next
+    setTime(next)
+  }, [])
+
+  useEffect(() => {
+    if (!isPlaying || totalSeconds <= 0) return
+    let active = true
+    let frameId = 0
+    const tick = (wallMs: number) => {
+      if (!active) return
+      const anchor = anchorRef.current
+      if (anchor === null) {
+        // First frame of this run: adopt whatever time the controls left
+        // behind, so a speed change never replays or skips elapsed activity.
+        anchorRef.current = { wallMs, time: timeRef.current }
+      } else {
+        const next = anchor.time + ((wallMs - anchor.wallMs) / 1000) * speed
+        if (next >= totalSeconds) {
+          anchorRef.current = null
+          completedRef.current = true
+          applyTime(totalSeconds)
+          setIsPlaying(false)
+          return
+        }
+        applyTime(next)
+      }
+      frameId = window.requestAnimationFrame(tick)
+    }
+    frameId = window.requestAnimationFrame(tick)
+    return () => {
+      active = false
+      window.cancelAnimationFrame(frameId)
+      anchorRef.current = null
+    }
+  }, [applyTime, isPlaying, speed, totalSeconds])
 
   useEffect(() => {
-    setTime((prev) => clamp(prev))
-  }, [clamp])
+    if (timeRef.current > totalSeconds) {
+      anchorRef.current = null
+      applyTime(totalSeconds)
+      return
+    }
+    if (completedRef.current && timeRef.current < totalSeconds) {
+      // A live recording grew past where playback stopped; carry on from the
+      // accepted time instead of stranding the operator at the old end.
+      completedRef.current = false
+      anchorRef.current = null
+      setIsPlaying(true)
+    }
+  }, [applyTime, totalSeconds])
 
   const setPlaybackSpeed = useCallback((next: number) => {
     if (PLAYBACK_SPEEDS.includes(next)) setSpeed(next)
   }, [])
 
   const play = useCallback(() => {
-    setTime((prev) => (prev >= totalSeconds ? 0 : prev))
-    setIsPlaying(totalSeconds > 0)
-  }, [totalSeconds])
+    anchorRef.current = null
+    completedRef.current = false
+    if (totalSeconds > 0 && timeRef.current >= totalSeconds) applyTime(0)
+    setIsPlaying(true)
+  }, [applyTime, totalSeconds])
 
   const pause = useCallback(() => {
+    anchorRef.current = null
+    completedRef.current = false
     setIsPlaying(false)
   }, [])
 
   const togglePlay = useCallback(() => {
-    setIsPlaying((playing) => {
-      if (playing) return false
-      setTime((prev) => (prev >= totalSeconds ? 0 : prev))
-      return totalSeconds > 0
-    })
-  }, [totalSeconds])
+    if (isPlaying) pause()
+    else play()
+  }, [isPlaying, pause, play])
 
   const seek = useCallback(
     (seconds: number) => {
-      const clamped = clamp(seconds)
-      setTime(clamped)
+      const clamped = Math.max(0, Math.min(totalSeconds, seconds))
+      anchorRef.current = null
+      completedRef.current = false
+      applyTime(clamped)
       setIsPlaying(false)
       return clamped
     },
-    [clamp],
-  )
-
-  const syncFromPlayer = useCallback(
-    (seconds: number) => {
-      const clamped = clamp(seconds)
-      const finished =
-        totalSeconds > 0 && clamped >= totalSeconds - END_EPSILON_SECONDS
-      if (finished) {
-        setTime(totalSeconds)
-        setIsPlaying(false)
-        return false
-      }
-      setTime(clamped)
-      return true
-    },
-    [clamp, totalSeconds],
+    [applyTime, totalSeconds],
   )
 
   return {
@@ -94,6 +137,5 @@ export function usePlayback(totalSeconds: number): Playback {
     pause,
     togglePlay,
     seek,
-    syncFromPlayer,
   }
 }

From f040492d87975070b2b6269a74b05d1535c096e3 Mon Sep 17 00:00:00 2001
From: Nikhil Sonti <nikhilsv92@gmail.com>
Date: Fri, 24 Jul 2026 14:30:29 -0700
Subject: [PATCH 2/2] refactor(replay): drop re-exports orphaned by the global
 plan

`buildTabView` and `TabView` were re-exported from replay.data.ts for callers
that reached them through that module; the page now builds a session plan
instead, so nothing does. Also refreshes the `startedAtMs` doc for its new
consumer, and keeps a tab selected when a session has no playable recording at
all, matching what the chapter page used to show.
---
 .../apps/claw-app/screens/replay/Replay.tsx    |  6 +-----
 .../claw-app/screens/replay/replay.data.ts     | 18 ++++--------------
 .../screens/replay/session-replay.test.ts      |  3 +++
 .../claw-app/screens/replay/session-replay.ts  |  5 ++++-
 4 files changed, 12 insertions(+), 20 deletions(-)

diff --git a/packages/browseros-agent/apps/claw-app/screens/replay/Replay.tsx b/packages/browseros-agent/apps/claw-app/screens/replay/Replay.tsx
index 9ff089811e..b77e3a65b2 100644
--- a/packages/browseros-agent/apps/claw-app/screens/replay/Replay.tsx
+++ b/packages/browseros-agent/apps/claw-app/screens/replay/Replay.tsx
@@ -81,11 +81,7 @@ export function Replay() {
     [seek],
   )
 
-  const transportPlayback = useMemo(
-    () => ({ ...playback, togglePlay }),
-    [playback, togglePlay],
-  )
-
+  const transportPlayback = { ...playback, togglePlay }
   const state = plan.stateAt(playback.time)
   const visibleTabId = pinnedTabId ?? state.tabId
   const track = plan.trackFor(visibleTabId)
diff --git a/packages/browseros-agent/apps/claw-app/screens/replay/replay.data.ts b/packages/browseros-agent/apps/claw-app/screens/replay/replay.data.ts
index b7dd9c9a68..dc18ad17a2 100644
--- a/packages/browseros-agent/apps/claw-app/screens/replay/replay.data.ts
+++ b/packages/browseros-agent/apps/claw-app/screens/replay/replay.data.ts
@@ -56,10 +56,10 @@ export interface ReplayData {
   site: string
   startedAt: string
   /**
-   * Raw session start in ms since epoch. Used by `buildTabView` to
-   * translate a frame's session-relative `t` into tab-relative time.
-   * `startedAt` above is the formatted date string; this is the
-   * machine-readable original.
+   * Raw session start in ms since epoch. `session-replay.ts` adds it to a
+   * frame's session-relative `t` to recover the absolute timestamp it needs to
+   * place actions against rrweb's absolute event stream. `startedAt` above is
+   * the formatted date string; this is the machine-readable original.
    */
   startedAtMs: number
   duration: string
@@ -76,16 +76,6 @@ export interface ReplayData {
   eventsForTab: (tabId: number) => readonly ReplayEvent[]
 }
 
-// `buildTabView` and the `TabView` shape live in `./tab-view.ts` so
-// tests can import them without dragging the react-query-kit hook
-// graph. Re-exported here for backward-compat with existing
-// callers that reach it through this module.
-export {
-  buildTabView,
-  EMPTY_TAB_VIEW,
-  type TabView,
-} from './tab-view'
-
 export interface UseReplayDataResult {
   replay: ReplayData | null
   sessionId: string
diff --git a/packages/browseros-agent/apps/claw-app/screens/replay/session-replay.test.ts b/packages/browseros-agent/apps/claw-app/screens/replay/session-replay.test.ts
index 351c4fe15c..8bd7d9186a 100644
--- a/packages/browseros-agent/apps/claw-app/screens/replay/session-replay.test.ts
+++ b/packages/browseros-agent/apps/claw-app/screens/replay/session-replay.test.ts
@@ -130,6 +130,9 @@ describe('activity bounds', () => {
     expect(plan.firstPlayableTabId).toBeNull()
     // The global timeline still lists everything, timed from session start.
     expect(plan.actions.map(({ startAt }) => startAt)).toEqual([4, 9])
+    // The camera still names a tab so the page can show its no-recording state.
+    expect(plan.stateAt(0).tabId).toBe(1)
+    expect(plan.trackFor(1)).toBeNull()
   })
 })
 
diff --git a/packages/browseros-agent/apps/claw-app/screens/replay/session-replay.ts b/packages/browseros-agent/apps/claw-app/screens/replay/session-replay.ts
index 70e57fd2c8..0448c8347f 100644
--- a/packages/browseros-agent/apps/claw-app/screens/replay/session-replay.ts
+++ b/packages/browseros-agent/apps/claw-app/screens/replay/session-replay.ts
@@ -179,6 +179,9 @@ export function buildSessionReplayPlan(
   }
 
   const firstPlayableTabId = first?.tabId ?? null
+  // With nothing playable anywhere, still name a tab so the page keeps a chip
+  // selected and shows that tab's no-recording state rather than no tab at all.
+  const cameraFallbackTabId = firstPlayableTabId ?? input.tabs[0]?.tabId ?? null
   const trackFor = (tabId: number | null): ReplayTrack | null =>
     tabId === null ? null : (tracksByTab.get(tabId) ?? null)
   const stateAt = (time: number): ReplayState => {
@@ -188,7 +191,7 @@ export function buildSessionReplayPlan(
       currentAction: actions[currentIndex] ?? null,
       tabId:
         (currentIndex < 0 ? null : cameraTabByIndex[currentIndex]) ??
-        firstPlayableTabId,
+        cameraFallbackTabId,
     }
   }