diff --git a/e2e/scripts/rebuild-viewer.ts b/e2e/scripts/rebuild-viewer.ts
index 7869bc602..f45075401 100644
--- a/e2e/scripts/rebuild-viewer.ts
+++ b/e2e/scripts/rebuild-viewer.ts
@@ -2,8 +2,9 @@
 // test: refresh runs/manifest.json + vite-build the SPA into runs/.
 // Usage: bun e2e/scripts/rebuild-viewer.ts
 import { execFileSync } from "node:child_process";
-import { rmSync } from "node:fs";
-import { join } from "node:path";
+import { cpSync, rmSync } from "node:fs";
+import { createRequire } from "node:module";
+import { dirname, join } from "node:path";
 import { fileURLToPath } from "node:url";
 
 import { buildManifest } from "../src/viewer/manifest";
@@ -17,4 +18,18 @@ execFileSync("bunx", ["vite", "build", "--config", "viewer/vite.config.ts"], {
   cwd: e2eDir,
   stdio: "inherit",
 });
+
+// Self-host Playwright's trace viewer (a static PWA shipped inside
+// playwright-core) next to the runs. trace.playwright.dev is HTTPS and
+// browsers refuse to let it fetch a trace.zip from a plain-HTTP server
+// (mixed content) — which is exactly how this viewer is reached over
+// tailscale. Same-origin, the restriction disappears.
+// playwright-core isn't a direct dependency — resolve it through
+// playwright (which is), then walk from its entry to the package root.
+const require = createRequire(import.meta.url);
+const playwrightCoreEntry = createRequire(require.resolve("playwright")).resolve("playwright-core");
+const traceViewerSrc = join(dirname(playwrightCoreEntry), "lib/vite/traceViewer");
+rmSync(join(runsDir, "trace-viewer"), { recursive: true, force: true });
+cpSync(traceViewerSrc, join(runsDir, "trace-viewer"), { recursive: true });
+
 console.log(`viewer rebuilt at ${runsDir}`);
diff --git a/e2e/src/surfaces/browser.ts b/e2e/src/surfaces/browser.ts
index c11268f8d..a7c82744b 100644
--- a/e2e/src/surfaces/browser.ts
+++ b/e2e/src/surfaces/browser.ts
@@ -11,7 +11,7 @@ import { promisify } from "node:util";
 import { Effect } from "effect";
 import { chromium, type Page } from "playwright";
 
-import { markFocus, markRecordingStart } from "../timeline";
+import { markFocus, markNavigation, markRecordingStart } from "../timeline";
 import { appendTraces, type TraceEntry } from "../trace-harvest";
 import type { Identity, Target } from "../target";
 
@@ -78,6 +78,12 @@ export const makeBrowserSurface = (dir: string, target: Target): BrowserSurface
         // The session video's clock starts with the page; anchor it for the
         // run's focus timeline (scripts/film.ts cuts on these).
         markRecordingStart(dir, "browser");
+        // Main-frame navigations feed the viewer's synthetic URL bar — the
+        // recording itself is chromeless, so this is the only place the
+        // address the developer "typed" survives.
+        page.on("framenavigated", (frame) => {
+          if (frame === page.mainFrame()) markNavigation(dir, frame.url());
+        });
         // Harvest distributed-trace ids: every app API request carries a W3C
         // traceparent (Effect's HttpClient), and each id names one
         // click→server→DB trace in whatever OTLP store the run exported to
diff --git a/e2e/src/timeline.ts b/e2e/src/timeline.ts
index 4de414fed..061c8c93b 100644
--- a/e2e/src/timeline.ts
+++ b/e2e/src/timeline.ts
@@ -16,6 +16,8 @@ export interface Timeline {
   readonly anchors: { terminal?: number; browser?: number };
   /** Focus transitions (first event per contiguous run of a window). */
   readonly focus: Array<{ at: number; window: TimelineWindow }>;
+  /** Main-frame navigations — lets the viewer render a live URL bar. */
+  readonly nav?: Array<{ at: number; url: string }>;
 }
 
 const fileFor = (runDir: string) => join(runDir, "timeline.json");
@@ -32,7 +34,10 @@ const write = (runDir: string, timeline: Timeline) =>
 /** Record that `window`'s recording clock starts now. */
 export const markRecordingStart = (runDir: string, window: TimelineWindow): void => {
   const timeline = read(runDir);
-  write(runDir, { ...timeline, anchors: { ...timeline.anchors, [window]: Date.now() } });
+  write(runDir, {
+    ...timeline,
+    anchors: { ...timeline.anchors, [window]: Date.now() },
+  });
 };
 
 /** Record that the scenario is acting on `window` (deduped per run). */
@@ -43,5 +48,13 @@ export const markFocus = (runDir: string, window: TimelineWindow): void => {
   write(runDir, timeline);
 };
 
+/** Record a main-frame navigation (deduped against the previous URL). */
+export const markNavigation = (runDir: string, url: string): void => {
+  const timeline = read(runDir);
+  const nav = timeline.nav ?? [];
+  if (nav.at(-1)?.url === url) return;
+  write(runDir, { ...timeline, nav: [...nav, { at: Date.now(), url }] });
+};
+
 export const readTimeline = (runDir: string): Timeline | null =>
   existsSync(fileFor(runDir)) ? read(runDir) : null;
diff --git a/e2e/viewer/src/App.tsx b/e2e/viewer/src/App.tsx
index 3704562d5..5370284fd 100644
--- a/e2e/viewer/src/App.tsx
+++ b/e2e/viewer/src/App.tsx
@@ -1,7 +1,10 @@
 import React, { Suspense, useEffect, useState } from "react";
 
+import type { SessionTimeline } from "./SessionPlayer";
+
 const TestSource = React.lazy(() => import("./TestSource"));
 const TerminalCast = React.lazy(() => import("./TerminalCast"));
+const SessionPlayer = React.lazy(() => import("./SessionPlayer"));
 
 // ---------------------------------------------------------------------------
 // The matrix (scenario × target health) plus a per-run artifact page. The
@@ -134,7 +137,10 @@ const Matrix = () => {
 
 // ---------------------------------------------------------------------------
 // Run page: status + error + artifacts. The trace opens in Playwright's own
-// viewer (trace.playwright.dev fetches the zip from this server, client-side).
+// viewer, SELF-HOSTED at /trace-viewer (copied out of playwright-core by
+// rebuild-viewer.ts). trace.playwright.dev would work on localhost but not
+// over tailscale: it's HTTPS, this server is HTTP, and browsers block the
+// mixed-content fetch of trace.zip. Same-origin avoids all of it.
 // ---------------------------------------------------------------------------
 
 // The suite's motel (local OTLP store, booted by the global setup on a
@@ -148,12 +154,15 @@ interface RunTraceRef {
   url: string;
 }
 
+type RunTab = "session" | "browser" | "terminal" | "source";
+
 const RunView = ({ target, slug }: { target: string; slug: string }) => {
   const base = `${target}/${slug}`;
   const [result, setResult] = useState<RunResult | null>(null);
   const [error, setError] = useState<string | null>(null);
-  const [tab, setTab] = useState<"media" | "source">("media");
+  const [tab, setTab] = useState<RunTab | null>(null);
   const [traces, setTraces] = useState<RunTraceRef[]>([]);
+  const [timeline, setTimeline] = useState<SessionTimeline | null>(null);
 
   useEffect(() => {
     fetch(`${base}/result.json`)
@@ -164,6 +173,10 @@ const RunView = ({ target, slug }: { target: string; slug: string }) => {
       .then((r) => (r.ok ? r.json() : []))
       .then(setTraces)
       .catch(() => setTraces([]));
+    fetch(`${base}/timeline.json`)
+      .then((r) => (r.ok ? r.json() : null))
+      .then(setTimeline)
+      .catch(() => setTimeline(null));
   }, [base]);
 
   if (error) return <div className="page error-text">failed to load run: {error}</div>;
@@ -171,19 +184,37 @@ const RunView = ({ target, slug }: { target: string; slug: string }) => {
 
   const has = (name: string) => result.artifacts.includes(name);
   const screenshots = result.artifacts.filter((a) => a.endsWith(".png")).sort();
-  // film.mp4 (scripts/film.ts) is the whole session as one video — terminal,
-  // browser hop, terminal, cut like tabbing between full-screen windows.
-  // When present it IS the session; the parts stay on disk for debugging.
+  const video = has("session.mp4") ? "session.mp4" : has("session.webm") ? "session.webm" : null;
   const film = has("film.mp4") ? "film.mp4" : null;
-  const video =
-    film ?? (has("session.mp4") ? "session.mp4" : has("session.webm") ? "session.webm" : null);
-  const cast = film ? null : has("terminal.cast") ? "terminal.cast" : null;
-  const media = video ?? cast;
+  const cast = has("terminal.cast") ? "terminal.cast" : null;
   const traceUrl = has("trace.zip")
-    ? `https://trace.playwright.dev/?trace=${encodeURIComponent(
-        new URL(`${base}/trace.zip`, window.location.href).toString(),
-      )}`
+    ? new URL(
+        `trace-viewer/index.html?trace=${encodeURIComponent(
+          new URL(`${base}/trace.zip`, window.location.href).toString(),
+        )}`,
+        window.location.href,
+      ).toString()
     : null;
+  // The live two-recording player needs both recordings AND a focus
+  // timeline whose clocks are anchored. Anything less falls back to
+  // film.mp4 (pre-rendered cuts) or the single recording.
+  const playable = Boolean(
+    cast &&
+    video &&
+    timeline &&
+    timeline.focus.length >= 2 &&
+    timeline.anchors.terminal !== undefined &&
+    timeline.anchors.browser !== undefined,
+  );
+
+  const tabs: Array<{ id: RunTab; label: string; available: boolean }> = [
+    { id: "session", label: "▶ session", available: playable || Boolean(film) },
+    { id: "browser", label: "browser", available: Boolean(video) },
+    { id: "terminal", label: "terminal", available: Boolean(cast) },
+    { id: "source", label: "</> test source", available: has("test.ts") },
+  ];
+  const available = tabs.filter((entry) => entry.available);
+  const active: RunTab | undefined = tab ?? available[0]?.id;
 
   return (
     <div className="page">
@@ -208,46 +239,52 @@ const RunView = ({ target, slug }: { target: string; slug: string }) => {
         {new Date(result.endedAt).toLocaleString()}
       </p>
       {result.error && <pre className="errbox">{result.error}</pre>}
-      {media && has("test.ts") && (
+
+      {available.length > 1 && (
         <div className="tabs">
-          <button
-            className={tab === "media" ? "tab active" : "tab"}
-            onClick={() => setTab("media")}
-          >
-            ▶ {cast && video ? "session" : video ? "video" : "terminal"}
-          </button>
-          <button
-            className={tab === "source" ? "tab active" : "tab"}
-            onClick={() => setTab("source")}
-          >
-            {"</>"} test source
-          </button>
+          {available.map((entry) => (
+            <button
+              key={entry.id}
+              className={active === entry.id ? "tab active" : "tab"}
+              onClick={() => setTab(entry.id)}
+            >
+              {entry.label}
+            </button>
+          ))}
         </div>
       )}
-      {(!media || tab === "source") && has("test.ts") && (
-        <Suspense fallback={<p className="dim">loading test source…</p>}>
-          {!media && <h2 className="section">The test</h2>}
-          <TestSource url={`${base}/test.ts`} />
-        </Suspense>
-      )}
-      {/* A run with BOTH recordings is one session in time order: the
-          terminal chat is the spine, the browser video is the hop that
-          happens in the middle of it. Show them in that order. */}
-      {cast && tab === "media" && (
-        <Suspense fallback={<p className="dim">loading recording…</p>}>
-          {video && <h2 className="section">1 · the chat, in the terminal</h2>}
-          <TerminalCast url={`${base}/${cast}`} />
-        </Suspense>
-      )}
-      {video && tab === "media" && (
+
+      {active === "session" &&
+        (playable && cast && video && timeline ? (
+          <Suspense fallback={<p className="dim">loading session player…</p>}>
+            <SessionPlayer
+              castUrl={`${base}/${cast}`}
+              videoUrl={`${base}/${video}`}
+              timeline={timeline}
+              traces={traces}
+              playwrightTraceUrl={traceUrl}
+              motelViewer={MOTEL_VIEWER}
+            />
+          </Suspense>
+        ) : (
+          film && (
+            <video
+              className="hero-video"
+              controls
+              autoPlay
+              muted
+              playsInline
+              preload="auto"
+              src={`${base}/${film}`}
+            />
+          )
+        ))}
+
+      {active === "browser" && video && (
         <>
-          {cast && <h2 className="section">2 · the browser hop, mid-chat</h2>}
-          {/* muted is required for browsers to honor autoplay; don't
-              autoplay when it's the second act of a session */}
           <video
             className="hero-video"
             controls
-            autoPlay={!cast}
             muted
             playsInline
             preload="auto"
@@ -269,12 +306,28 @@ const RunView = ({ target, slug }: { target: string; slug: string }) => {
           )}
         </>
       )}
-      {!media && !has("test.ts") && screenshots.length === 0 && (
+
+      {active === "terminal" && cast && (
+        <Suspense fallback={<p className="dim">loading recording…</p>}>
+          <TerminalCast url={`${base}/${cast}`} />
+        </Suspense>
+      )}
+
+      {active === "source" && has("test.ts") && (
+        <Suspense fallback={<p className="dim">loading test source…</p>}>
+          <TestSource url={`${base}/test.ts`} />
+        </Suspense>
+      )}
+
+      {!active && screenshots.length === 0 && (
         <p className="dim">
           No visual artifacts — this surface's source of truth is the test code and its assertions.
         </p>
       )}
-      {traces.length > 0 && (
+
+      {/* The session tab carries its own timeline-aligned trace table; the
+          flat list stays for runs viewed through any other lens. */}
+      {active !== "session" && traces.length > 0 && (
         <>
           <h2 className="section">Distributed traces</h2>
           <p className="hint">
diff --git a/e2e/viewer/src/SessionPlayer.tsx b/e2e/viewer/src/SessionPlayer.tsx
new file mode 100644
index 000000000..c285ae144
--- /dev/null
+++ b/e2e/viewer/src/SessionPlayer.tsx
@@ -0,0 +1,436 @@
+// One synced playback head over BOTH of a run's real recordings — the
+// terminal cast and the browser video — driven by the run's focus timeline
+// (timeline.json). Where film.mp4 bakes the cuts into pixels, this player
+// performs them live: the active act decides which recording is on screen,
+// a synthetic window chrome floats above it (terminal title bar, or a
+// browser URL bar fed by the timeline's nav track with a deep link into
+// the Playwright trace), and the scrubber carries the distributed-trace
+// markers so "what request fired at this moment" is one glance away.
+//
+// The master clock is WALL CLOCK: focus entries are wall-contiguous, so
+// session-time t maps to exactly one act, and each recording's own clock
+// is recovered through its anchor (timeline.anchors). No idle compression
+// anywhere — cast time must equal wall time for the cuts to land.
+import { useEffect, useMemo, useRef, useState } from "react";
+import * as AsciinemaPlayer from "asciinema-player";
+import "asciinema-player/dist/bundle/asciinema-player.css";
+
+export interface SessionTimeline {
+  anchors: { terminal?: number; browser?: number };
+  focus: Array<{ at: number; window: "terminal" | "browser" }>;
+  nav?: Array<{ at: number; url: string }>;
+}
+
+export interface SessionTraceRef {
+  id: string;
+  at: number;
+  url: string;
+  /** Request duration (ms) — recorded by the surfaces at run time. */
+  ms?: number;
+  status?: number;
+  /** Which window made the request: terminal (MCP/CLI) or browser. */
+  source?: "terminal" | "browser";
+  /** Readable name when the URL says nothing (MCP tool / JSON-RPC method). */
+  label?: string;
+}
+
+interface Act {
+  window: "terminal" | "browser";
+  /** Session seconds. */
+  from: number;
+  /** Session seconds; Infinity until media durations resolve the last act. */
+  to: number;
+}
+
+type CastPlayer = AsciinemaPlayer.Player;
+
+const fmt = (seconds: number): string => {
+  const s = Math.max(0, Math.floor(seconds));
+  return `${Math.floor(s / 60)}:${String(s % 60).padStart(2, "0")}`;
+};
+
+/** The cast's own duration: timestamp of its last event (the file is local
+ *  and line-delimited, cheaper and more deterministic than player events). */
+const fetchCastDuration = async (url: string): Promise<number> => {
+  const text = await fetch(url).then((r) => r.text());
+  const last = text.trimEnd().split("\n").at(-1);
+  if (!last || last.startsWith("{")) return 0;
+  return (JSON.parse(last) as [number])[0] ?? 0;
+};
+
+export const SessionPlayer = ({
+  castUrl,
+  videoUrl,
+  timeline,
+  traces,
+  playwrightTraceUrl,
+  motelViewer,
+}: {
+  castUrl: string;
+  videoUrl: string;
+  timeline: SessionTimeline;
+  traces: SessionTraceRef[];
+  playwrightTraceUrl: string | null;
+  motelViewer: string;
+}) => {
+  const sessionStart = timeline.focus[0]?.at ?? 0;
+  const terminalAnchor = timeline.anchors.terminal ?? sessionStart;
+  const browserAnchor = timeline.anchors.browser ?? sessionStart;
+
+  const castMount = useRef<HTMLDivElement>(null);
+  const videoRef = useRef<HTMLVideoElement>(null);
+  const castPlayer = useRef<CastPlayer | null>(null);
+  // Session-time playhead the tick reads/writes without re-subscribing.
+  const tRef = useRef(0);
+
+  const [castDuration, setCastDuration] = useState<number | null>(null);
+  const [videoDuration, setVideoDuration] = useState<number | null>(null);
+  const [t, setT] = useState(0);
+  const [playing, setPlaying] = useState(false);
+
+  // Acts: each focus entry runs until the next one; the last runs until its
+  // recording's end (anchored back into session time).
+  const acts = useMemo<Act[]>(() => {
+    const toSession = (wall: number) => (wall - sessionStart) / 1000;
+    return timeline.focus.map((entry, index) => {
+      const next = timeline.focus[index + 1];
+      let to = Infinity;
+      if (next) {
+        to = toSession(next.at);
+      } else if (entry.window === "terminal" && castDuration !== null) {
+        to = toSession(terminalAnchor + castDuration * 1000);
+      } else if (entry.window === "browser" && videoDuration !== null) {
+        to = toSession(browserAnchor + videoDuration * 1000);
+      }
+      return { window: entry.window, from: toSession(entry.at), to };
+    });
+  }, [timeline, sessionStart, terminalAnchor, browserAnchor, castDuration, videoDuration]);
+
+  const duration = acts.at(-1)?.to ?? 0;
+  const ready = castDuration !== null && videoDuration !== null && Number.isFinite(duration);
+
+  const actAt = (time: number): number => {
+    for (let i = acts.length - 1; i >= 0; i -= 1) {
+      const act = acts[i];
+      if (act && time >= act.from - 0.001) return i;
+    }
+    return 0;
+  };
+  const activeAct = acts[actAt(t)];
+  const activeWindow = activeAct?.window ?? "terminal";
+
+  /** A recording's own clock for session-time `time`. */
+  const mediaTime = (window: Act["window"], time: number): number =>
+    Math.max(
+      0,
+      (sessionStart + time * 1000 - (window === "terminal" ? terminalAnchor : browserAnchor)) /
+        1000,
+    );
+
+  // Mount the cast player once (no idle compression — sync needs real time).
+  useEffect(() => {
+    if (!castMount.current) return;
+    const player = AsciinemaPlayer.create(castUrl, castMount.current, {
+      autoPlay: false,
+      controls: false,
+      fit: "width",
+      terminalFontFamily: "ui-monospace, SFMono-Regular, Menlo, monospace",
+    });
+    castPlayer.current = player;
+    fetchCastDuration(castUrl).then(setCastDuration);
+    return () => {
+      castPlayer.current = null;
+      player.dispose();
+    };
+  }, [castUrl]);
+
+  // A cached mp4 can fire loadedmetadata before React attaches the handler;
+  // poll until the element reports a duration so `ready` can't deadlock.
+  useEffect(() => {
+    const interval = setInterval(() => {
+      const video = videoRef.current;
+      if (video && video.readyState >= 1 && Number.isFinite(video.duration)) {
+        setVideoDuration(video.duration);
+        clearInterval(interval);
+      }
+    }, 150);
+    return () => clearInterval(interval);
+  }, [videoUrl]);
+
+  /** Point both recordings at session-time `time`; play/pause to match. */
+  const apply = async (time: number, play: boolean) => {
+    const act = acts[actAt(time)];
+    if (!act) return;
+    const video = videoRef.current;
+    const cast = castPlayer.current;
+    if (act.window === "browser") {
+      cast?.pause();
+      if (video) {
+        const target = Math.min(mediaTime("browser", time), (videoDuration ?? Infinity) - 0.05);
+        if (Math.abs(video.currentTime - target) > 0.25) video.currentTime = target;
+        if (play) await video.play().catch(() => {});
+        else video.pause();
+      }
+    } else {
+      videoRef.current?.pause();
+      if (cast) {
+        const target = Math.min(mediaTime("terminal", time), (castDuration ?? Infinity) - 0.05);
+        const current = cast.getCurrentTime();
+        const now = typeof current === "number" ? current : await current;
+        if (Math.abs(now - target) > 0.25) await cast.seek(target);
+        if (play) cast.play();
+        else cast.pause();
+      }
+    }
+  };
+
+  // The tick: session time is read FROM the active recording (it is the
+  // clock); crossing an act boundary swaps recordings.
+  useEffect(() => {
+    if (!playing || !ready) return;
+    let cancelled = false;
+    const interval = setInterval(async () => {
+      if (cancelled) return;
+      const index = actAt(tRef.current);
+      const act = acts[index];
+      if (!act) return;
+      let media: number;
+      if (act.window === "browser") {
+        media = videoRef.current?.currentTime ?? 0;
+      } else {
+        const current = castPlayer.current?.getCurrentTime() ?? 0;
+        media = typeof current === "number" ? current : await current;
+      }
+      const wall = (act.window === "terminal" ? terminalAnchor : browserAnchor) + media * 1000;
+      let next = Math.max(tRef.current, (wall - sessionStart) / 1000);
+      if (next >= act.to - 0.05) {
+        if (index === acts.length - 1) {
+          setPlaying(false);
+          next = duration;
+        } else {
+          next = act.to + 0.001;
+          await apply(next, true);
+        }
+      }
+      tRef.current = next;
+      setT(next);
+    }, 100);
+    return () => {
+      cancelled = true;
+      clearInterval(interval);
+    };
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [playing, ready, acts]);
+
+  const seekTo = async (time: number) => {
+    const clamped = Math.min(Math.max(0, time), duration);
+    tRef.current = clamped;
+    setT(clamped);
+    await apply(clamped, playing);
+  };
+
+  const toggle = async () => {
+    const next = !playing;
+    setPlaying(next);
+    if (next && tRef.current >= duration - 0.1) {
+      tRef.current = 0;
+      setT(0);
+    }
+    await apply(tRef.current, next);
+  };
+
+  // Live URL: the last main-frame navigation at-or-before "now" (wall).
+  const wallNow = sessionStart + t * 1000;
+  const currentUrl =
+    [...(timeline.nav ?? [])].reverse().find((entry) => entry.at <= wallNow + 250)?.url ?? "";
+
+  // Trace markers in session time (only the ones inside the session).
+  const traceMarks = useMemo(
+    () =>
+      traces
+        .map((trace) => ({ ...trace, t: (trace.at - sessionStart) / 1000 }))
+        .filter((trace) => trace.t >= 0),
+    [traces, sessionStart],
+  );
+  // Duration bars are scaled to the slowest request — the question the rail
+  // answers is "which of these was the slow one", not absolute ms.
+  const slowest = Math.max(...traceMarks.map((mark) => mark.ms ?? 0), 1);
+
+  // Keep the in-playback trace row visible in the rail.
+  const railRef = useRef<HTMLDivElement>(null);
+  const nowIndex = traceMarks.findLastIndex((mark) => mark.t <= t);
+  useEffect(() => {
+    if (!playing || nowIndex < 0) return;
+    railRef.current
+      ?.querySelectorAll(".trace-row")
+      [nowIndex]?.scrollIntoView({ block: "nearest", behavior: "smooth" });
+  }, [nowIndex, playing]);
+
+  return (
+    <div className="player">
+      <div className="player-split">
+        <div className="player-main">
+          {/* Synthetic window chrome — the recordings are chromeless, so the
+              viewer restores what a developer would actually see: a terminal
+              title bar, or a browser URL bar with the address the page is on. */}
+          <div className={`chrome ${activeWindow}`}>
+            <span className="lights">
+              <i /> <i /> <i />
+            </span>
+            {activeWindow === "browser" ? (
+              <>
+                <span className="urlbar" title={currentUrl}>
+                  <span className="lock">⌁</span>
+                  {currentUrl.replace(/^https?:\/\//, "") || "about:blank"}
+                </span>
+                {playwrightTraceUrl && (
+                  <a
+                    className="chrome-link"
+                    href={playwrightTraceUrl}
+                    target="_blank"
+                    rel="noreferrer"
+                  >
+                    ⊙ inspect in Playwright
+                  </a>
+                )}
+              </>
+            ) : (
+              <span className="termtitle">terminal — agent chat</span>
+            )}
+          </div>
+
+          {/* Both layers fill the same fixed-aspect stage; the inactive one
+              hides with visibility (not display) so the cast keeps its
+              measured size and the box never jumps at a cut. */}
+          <div className="stage">
+            <div
+              className="layer"
+              style={{
+                visibility: activeWindow === "terminal" ? "visible" : "hidden",
+              }}
+            >
+              <div ref={castMount} className="cast-stage" />
+            </div>
+            <div
+              className="layer"
+              style={{
+                visibility: activeWindow === "browser" ? "visible" : "hidden",
+              }}
+            >
+              <video
+                ref={videoRef}
+                src={videoUrl}
+                muted
+                playsInline
+                preload="auto"
+                onLoadedMetadata={(event) => setVideoDuration(event.currentTarget.duration)}
+              />
+            </div>
+          </div>
+
+          <div className="transport">
+            <button className="playbtn" onClick={toggle} disabled={!ready}>
+              {playing ? "⏸" : "▶"}
+            </button>
+            <div
+              className="scrub"
+              onClick={(event) => {
+                const rect = event.currentTarget.getBoundingClientRect();
+                void seekTo(((event.clientX - rect.left) / rect.width) * duration);
+              }}
+            >
+              {ready &&
+                acts.map((act, index) => (
+                  <span
+                    key={index}
+                    className={`seg ${act.window}`}
+                    style={{
+                      left: `${(act.from / duration) * 100}%`,
+                      width: `${((act.to - act.from) / duration) * 100}%`,
+                    }}
+                    title={act.window}
+                  />
+                ))}
+              {ready &&
+                traceMarks.map((mark, index) => (
+                  <span
+                    key={`${mark.id}-${index}`}
+                    className="tick"
+                    style={{ left: `${(mark.t / duration) * 100}%` }}
+                    title={`${mark.url.replace(/^https?:\/\/[^/]+/, "")} → trace ${mark.id.slice(0, 8)}`}
+                  />
+                ))}
+              {ready && <span className="head" style={{ left: `${(t / duration) * 100}%` }} />}
+            </div>
+            <span className="clock">
+              {fmt(t)} / {ready ? fmt(duration) : "…"}
+            </span>
+          </div>
+        </div>
+
+        {/* The trace rail: every API request the session made, beside the
+            video it happened in, with a duration bar scaled to the slowest
+            request — "why did that take so long" is answered at a glance.
+            Rows seek the player; ids open motel's waterfall. */}
+        {traceMarks.length > 0 && (
+          <div className="trace-rail" ref={railRef}>
+            <div className="rail-head">
+              traces
+              <span className="rail-sub">click = seek · id = waterfall</span>
+            </div>
+            {traceMarks.map((mark, index) => {
+              const isNow = index === nowIndex;
+              const slow = (mark.ms ?? 0) >= 1000;
+              return (
+                <div
+                  key={`${mark.id}-${index}`}
+                  className={`trace-row${isNow ? " now" : ""}`}
+                  onClick={() => void seekTo(mark.t - 0.3)}
+                  title={mark.url}
+                >
+                  <div className="trace-line">
+                    <span className="trace-at">{fmt(mark.t)}</span>
+                    {mark.source && (
+                      <span className={`trace-src ${mark.source}`}>
+                        {mark.source === "terminal" ? "⌨" : "⊕"}
+                      </span>
+                    )}
+                    <span className="trace-path">
+                      {mark.label ?? mark.url.replace(/^https?:\/\/[^/]+/, "")}
+                    </span>
+                    <span
+                      className={`trace-ms${slow ? " slow" : ""}${
+                        mark.status !== undefined && mark.status >= 400 ? " err" : ""
+                      }`}
+                    >
+                      {mark.ms !== undefined ? `${mark.ms}ms` : "·"}
+                    </span>
+                  </div>
+                  <div className="trace-meter">
+                    <span
+                      className={`trace-bar${slow ? " slow" : ""}`}
+                      style={{
+                        width: `${Math.max(((mark.ms ?? 0) / slowest) * 100, 1.5)}%`,
+                      }}
+                    />
+                    <a
+                      className="trace-id"
+                      href={`${motelViewer}/trace/${mark.id}`}
+                      target="_blank"
+                      rel="noreferrer"
+                      onClick={(event) => event.stopPropagation()}
+                    >
+                      {mark.id.slice(0, 7)}
+                    </a>
+                  </div>
+                </div>
+              );
+            })}
+          </div>
+        )}
+      </div>
+    </div>
+  );
+};
+
+export default SessionPlayer;
diff --git a/e2e/viewer/src/styles.css b/e2e/viewer/src/styles.css
index 590028a58..d340fe361 100644
--- a/e2e/viewer/src/styles.css
+++ b/e2e/viewer/src/styles.css
@@ -186,3 +186,333 @@ a.watch.no {
   overflow: hidden;
   border: 1px solid #2a2a2a;
 }
+
+/* session player — synthetic window chrome + synced two-recording stage */
+.player {
+  margin-top: 0.8rem;
+}
+.chrome {
+  display: flex;
+  align-items: center;
+  gap: 10px;
+  background: #161b22;
+  border: 1px solid #21262d;
+  border-bottom: none;
+  border-radius: 10px 10px 0 0;
+  padding: 7px 12px;
+  min-height: 22px;
+}
+.chrome .lights {
+  display: inline-flex;
+  gap: 6px;
+}
+.chrome .lights i {
+  width: 11px;
+  height: 11px;
+  border-radius: 50%;
+  background: #2d333b;
+}
+.chrome.browser .lights i:nth-child(1) {
+  background: #ff5f57;
+}
+.chrome.browser .lights i:nth-child(2) {
+  background: #febc2e;
+}
+.chrome.browser .lights i:nth-child(3) {
+  background: #28c840;
+}
+.chrome.terminal .lights i:nth-child(1) {
+  background: #ff5f57;
+}
+.chrome.terminal .lights i:nth-child(2) {
+  background: #febc2e;
+}
+.chrome.terminal .lights i:nth-child(3) {
+  background: #28c840;
+}
+.urlbar {
+  flex: 1;
+  font:
+    12.5px ui-monospace,
+    SFMono-Regular,
+    Menlo,
+    monospace;
+  color: #aeb8c4;
+  background: #0b0f17;
+  border: 1px solid #21262d;
+  border-radius: 7px;
+  padding: 4px 10px;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+.urlbar .lock {
+  color: #58a6ff;
+  margin-right: 7px;
+}
+.termtitle {
+  flex: 1;
+  text-align: center;
+  font-size: 12.5px;
+  color: #6b7785;
+}
+.chrome-link {
+  font-size: 12px;
+  color: #58a6ff;
+  white-space: nowrap;
+}
+/* Fixed 16:10 stage (the browser records at 1280x800): the size never
+   changes when the act cuts between terminal and browser — both
+   recordings letterbox into the same box, like one screen. */
+.stage {
+  border: 1px solid #21262d;
+  border-radius: 0 0 10px 10px;
+  overflow: hidden;
+  background: #010409;
+  aspect-ratio: 16 / 10;
+  position: relative;
+}
+.stage .layer {
+  position: absolute;
+  inset: 0;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+.stage .layer video {
+  display: block;
+  max-width: 100%;
+  max-height: 100%;
+}
+.stage .layer .cast-stage {
+  width: 100%;
+  max-height: 100%;
+  overflow: hidden;
+}
+.cast-stage :is(.ap-player) {
+  border-radius: 0;
+}
+
+/* transport bar */
+.transport {
+  display: flex;
+  align-items: center;
+  gap: 12px;
+  margin-top: 10px;
+}
+.playbtn {
+  font: inherit;
+  font-size: 14px;
+  width: 38px;
+  height: 30px;
+  color: #d7dce5;
+  background: #0f1620;
+  border: 1px solid #21262d;
+  border-radius: 7px;
+  cursor: pointer;
+}
+.playbtn:hover {
+  border-color: #388bfd;
+}
+.scrub {
+  position: relative;
+  flex: 1;
+  height: 22px;
+  cursor: pointer;
+}
+.scrub .seg {
+  position: absolute;
+  top: 8px;
+  height: 6px;
+  border-radius: 3px;
+}
+.scrub .seg.terminal {
+  background: #1f3d2b;
+}
+.scrub .seg.browser {
+  background: #1d3a5f;
+}
+.scrub .tick {
+  position: absolute;
+  top: 5px;
+  width: 2px;
+  height: 12px;
+  background: #d29922;
+  opacity: 0.85;
+}
+.scrub .head {
+  position: absolute;
+  top: 2px;
+  width: 2px;
+  height: 18px;
+  background: #e6edf3;
+  box-shadow: 0 0 6px #58a6ff;
+}
+.clock {
+  font:
+    12px ui-monospace,
+    SFMono-Regular,
+    Menlo,
+    monospace;
+  color: #6b7785;
+  min-width: 86px;
+  text-align: right;
+}
+
+/* timeline-aligned trace table */
+.trace-now td {
+  background: #14222e;
+}
+.seeklink {
+  font:
+    12px ui-monospace,
+    SFMono-Regular,
+    Menlo,
+    monospace;
+  color: #58a6ff;
+  background: none;
+  border: none;
+  padding: 0;
+  cursor: pointer;
+}
+.seeklink:hover {
+  text-decoration: underline;
+}
+
+/* session player split: stage left, trace rail right */
+.page:has(.player-split) {
+  max-width: 1340px;
+}
+.player-split {
+  display: flex;
+  gap: 14px;
+  align-items: stretch;
+}
+.player-main {
+  flex: 1;
+  min-width: 0;
+}
+.trace-rail {
+  width: 300px;
+  flex: none;
+  max-height: 700px;
+  overflow-y: auto;
+  border: 1px solid #21262d;
+  border-radius: 10px;
+  background: #0d1219;
+}
+.rail-head {
+  position: sticky;
+  top: 0;
+  background: #161b22;
+  border-bottom: 1px solid #21262d;
+  padding: 7px 12px;
+  font-size: 12px;
+  font-weight: 600;
+  color: #6b7785;
+  text-transform: uppercase;
+  letter-spacing: 0.04em;
+  display: flex;
+  justify-content: space-between;
+  align-items: baseline;
+  z-index: 1;
+}
+.rail-sub {
+  font-weight: 400;
+  text-transform: none;
+  letter-spacing: 0;
+  font-size: 11px;
+  color: #3d4651;
+}
+.trace-row {
+  padding: 6px 12px 7px;
+  border-bottom: 1px solid #141a22;
+  cursor: pointer;
+}
+.trace-row:hover {
+  background: #101722;
+}
+.trace-row.now {
+  background: #14222e;
+  box-shadow: inset 2px 0 0 #388bfd;
+}
+.trace-line {
+  display: flex;
+  align-items: baseline;
+  gap: 8px;
+  font:
+    11.5px ui-monospace,
+    SFMono-Regular,
+    Menlo,
+    monospace;
+}
+.trace-at {
+  color: #58a6ff;
+  flex: none;
+}
+.trace-path {
+  flex: 1;
+  min-width: 0;
+  color: #8b98a9;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+.trace-ms {
+  flex: none;
+  color: #7ee787;
+}
+.trace-ms.slow {
+  color: #d29922;
+  font-weight: 700;
+}
+.trace-ms.err {
+  color: #ff7b72;
+  font-weight: 700;
+}
+.trace-meter {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  margin-top: 4px;
+}
+.trace-meter .trace-bar {
+  display: block;
+  height: 4px;
+  border-radius: 2px;
+  background: #2ea04366;
+  border-right: 2px solid #2ea043;
+}
+.trace-meter .trace-bar.slow {
+  background: #d2992266;
+  border-right-color: #d29922;
+}
+.trace-id {
+  margin-left: auto;
+  font:
+    10.5px ui-monospace,
+    SFMono-Regular,
+    Menlo,
+    monospace;
+  color: #3d4651;
+}
+.trace-id:hover {
+  color: #58a6ff;
+}
+
+/* trace source tag: terminal (MCP/CLI) vs browser */
+.trace-src {
+  flex: none;
+  font-size: 10px;
+  line-height: 1;
+  border-radius: 4px;
+  padding: 2px 4px;
+}
+.trace-src.terminal {
+  color: #7ee787;
+  background: #1f3d2b66;
+}
+.trace-src.browser {
+  color: #79c0ff;
+  background: #1d3a5f66;
+}
diff --git a/e2e/viewer/src/vite-env.d.ts b/e2e/viewer/src/vite-env.d.ts
index 2b4473482..5a251c155 100644
--- a/e2e/viewer/src/vite-env.d.ts
+++ b/e2e/viewer/src/vite-env.d.ts
@@ -9,9 +9,17 @@ declare module "monaco-editor/esm/vs/basic-languages/typescript/typescript.contr
 
 // No published types; the player is created imperatively and disposed.
 declare module "asciinema-player" {
+  export interface Player {
+    play(): unknown;
+    pause(): unknown;
+    seek(seconds: number): Promise<unknown>;
+    getCurrentTime(): number | Promise<number>;
+    getDuration(): number | Promise<number>;
+    dispose(): void;
+  }
   export function create(
     src: string,
     element: HTMLElement,
     options?: Record<string, unknown>,
-  ): { dispose: () => void };
+  ): Player;
 }