feat(dashboard): timeline jump-to-v0 + jump-to-live icon buttons

Compact icon-only controls book-ending the existing step-back / step-
forward arrows. The four-button cluster reads `⏮ ◀ ▶ ⏭` left to
right.

- timeline-jump-v0 — Phosphor SkipBack icon. Disabled at min. Calls
  fireImmediate(min) and pauses autoplay.
- timeline-jump-live — Phosphor SkipForward icon. In replay calls
  onExit() (drops the in-banner "Return to live" duplicate). In live
  mode at non-max version, fireImmediate(max).

Sizes match the existing step buttons (size-sm secondary). Layout
stays a single row; thumb + play + speed unchanged.

EnactmentDetailPage's existing `:exit_replay` test repointed at the
new timeline-jump-live testid.

Tests: TimelineScrubber +4 cases (jump-v0 fires onScrub, disabled at
min, jump-live in live disabled at max, jump-live in replay calls
onExit). Vitest 161 → 166.

Co-Authored-By: Claude Opus 4.7 <noreply@anthropic.com>

Author: fahchen

dashboard/ui/src/components/TimelineScrubber.test.tsx

@@ -203,6 +203,69 @@ describe("TimelineScrubber autoplay", () => {
     expect(slider.dataset.autoplaying).toBe("false")
   })
 
+  it("Jump-to-v0 fires onScrub(min) and disables at min", () => {
+    const { onScrub } = renderScrubber({
+      replayState: { version: 3, replayed_from: 3 } as never
+    })
+    const btn = screen.getByTestId("timeline-jump-v0") as HTMLButtonElement
+    expect(btn.disabled).toBe(false)
+    act(() => {
+      btn.click()
+    })
+    expect(onScrub).toHaveBeenCalledTimes(1)
+    expect(onScrub).toHaveBeenLastCalledWith(1)
+  })
+
+  it("Jump-to-v0 disabled when value is already at min", () => {
+    renderScrubber({ replayState: { version: 1, replayed_from: 1 } as never })
+    expect((screen.getByTestId("timeline-jump-v0") as HTMLButtonElement).disabled).toBe(true)
+  })
+
+  it("Jump-to-live in live mode at non-max fires onScrub(max)", () => {
+    const onScrub = vi.fn()
+    const onExit = vi.fn()
+    render(
+      <TimelineScrubber
+        range={{ min: 1, max: 5 }}
+        liveVersion={5}
+        replayState={null}
+        onScrub={onScrub}
+        onExit={onExit}
+        isPending={false}
+      />
+    )
+    // value initializes to liveVersion (5) which equals max → disabled.
+    const btn = screen.getByTestId("timeline-jump-live") as HTMLButtonElement
+    expect(btn.disabled).toBe(true)
+    expect(onScrub).not.toHaveBeenCalled()
+    expect(onExit).not.toHaveBeenCalled()
+  })
+
+  it("Jump-to-live in replay mode calls onExit (exit_replay path)", () => {
+    const { onScrub, onExit } = renderScrubber()
+    const btn = screen.getByTestId("timeline-jump-live") as HTMLButtonElement
+    expect(btn.disabled).toBe(false)
+    act(() => {
+      btn.click()
+    })
+    expect(onExit).toHaveBeenCalledTimes(1)
+    expect(onScrub).not.toHaveBeenCalled()
+  })
+
+  it("Step buttons remain present and functional alongside jump buttons", () => {
+    const { onScrub } = renderScrubber()
+    expect(screen.getByTestId("timeline-step-back")).toBeDefined()
+    expect(screen.getByTestId("timeline-step-forward")).toBeDefined()
+    act(() => {
+      screen.getByTestId("timeline-step-forward").click()
+    })
+    expect(onScrub).toHaveBeenLastCalledWith(2)
+    act(() => {
+      screen.getByTestId("timeline-step-back").click()
+    })
+    expect(onScrub).toHaveBeenLastCalledWith(1)
+  })
+
   it("Home / End jump to extremes via the slider", () => {
     const { onScrub } = renderScrubber()
     const slider = screen.getByTestId("timeline-slider")

dashboard/ui/src/components/TimelineScrubber.tsx

@@ -4,7 +4,9 @@ import {
   CaretLeftIcon,
   CaretRightIcon,
   PauseIcon,
-  PlayIcon
+  PlayIcon,
+  SkipBackIcon,
+  SkipForwardIcon
 } from "@phosphor-icons/react"
 
 type VersionRange = ColouredFlowDashboardWeb.Views.VersionRange
@@ -234,19 +236,24 @@ export default function TimelineScrubber({
               End of timeline
             </span>
           ) : null}
-          {replayActive ? (
-            <Button
-              variant="secondary"
-              size="sm"
-              onClick={onExit}
-              data-testid="timeline-exit-replay"
-            >
-              Return to live
-            </Button>
-          ) : null}
         </div>
       </div>
       <div className="flex items-center gap-2">
+        <Button
+          variant="secondary"
+          size="sm"
+          onClick={() => {
+            if (value === min) return
+            setValue(min)
+            fireImmediate(min)
+            if (playing) setPlaying(false)
+          }}
+          disabled={disabled || value <= min || isPending}
+          aria-label="Jump to v0"
+          data-testid="timeline-jump-v0"
+        >
+          <SkipBackIcon size={14} weight="bold" aria-hidden />
+        </Button>
         <Button
           variant="secondary"
           size="sm"
@@ -288,6 +295,25 @@ export default function TimelineScrubber({
         >
           <CaretRightIcon size={14} weight="bold" aria-hidden />
         </Button>
+        <Button
+          variant="secondary"
+          size="sm"
+          onClick={() => {
+            if (replayActive) {
+              onExit()
+              return
+            }
+            if (value === max) return
+            setValue(max)
+            fireImmediate(max)
+            if (playing) setPlaying(false)
+          }}
+          disabled={disabled || (!replayActive && value >= max) || isPending}
+          aria-label="Jump to live"
+          data-testid="timeline-jump-live"
+        >
+          <SkipForwardIcon size={14} weight="bold" aria-hidden />
+        </Button>
         <Button
           variant={playing ? "secondary" : "primary"}
           size="sm"

dashboard/ui/src/routes/EnactmentDetailPage.test.tsx

@@ -945,7 +945,7 @@ describe("EnactmentDetailPage", () => {
       }
     })
 
-    it("Return to live button dispatches :exit_replay", async () => {
+    it("Jump-to-live button dispatches :exit_replay while in replay", async () => {
       const restore = mutateReplay(
         { version: 1, derived_at: "2026-05-29T01:00:00Z" },
         { min: 0, max: 3 }
@@ -954,7 +954,7 @@ describe("EnactmentDetailPage", () => {
       try {
         renderRoute(<EnactmentDetailPage />)
         await act(async () => {
-          fireEvent.click(screen.getByTestId("timeline-exit-replay"))
+          fireEvent.click(screen.getByTestId("timeline-jump-live"))
         })
         expect(exitReplayMock).toHaveBeenCalledOnce()
       } finally {