From 5458da1beee3859aa0af638a38535e8ac283e071 Mon Sep 17 00:00:00 2001
From: Rhys Sullivan <rhys@rhyssullivan.com>
Date: Fri, 12 Jun 2026 00:10:19 -0700
Subject: [PATCH 1/2] Viewer plays the session live: synced recordings, URL
 bar, trace lane
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

The run page's session tab now performs the cuts the film bakes into
pixels: one playback head drives both real recordings (asciinema cast +
browser video), the focus timeline decides which window is on screen,
and a synthetic window chrome floats above the stage — a terminal title
bar, or a browser URL bar fed by the timeline's new nav track (main-
frame navigations captured by the browser surface) with a deep link
into the Playwright trace.

The scrubber shows the acts (terminal/browser segments) and a tick per
distributed trace; the trace table is timeline-aligned — click a row's
timestamp to jump the player there, the row highlights as playback
passes it, and the trace id still opens motel's waterfall. Tabs split
the lenses: session / browser / terminal / source. film.mp4 remains the
fallback (and the PR-media artifact) for runs without an anchored
timeline.
---
 e2e/src/surfaces/browser.ts      |   8 +-
 e2e/src/timeline.ts              |  20 +-
 e2e/viewer/src/App.tsx           | 147 ++++++----
 e2e/viewer/src/SessionPlayer.tsx | 470 +++++++++++++++++++++++++++++++
 e2e/viewer/src/styles.css        | 330 ++++++++++++++++++++++
 e2e/viewer/src/vite-env.d.ts     |  10 +-
 6 files changed, 934 insertions(+), 51 deletions(-)
 create mode 100644 e2e/viewer/src/SessionPlayer.tsx

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..9f726551e 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");
@@ -30,9 +32,15 @@ const write = (runDir: string, timeline: Timeline) =>
   writeFileSync(fileFor(runDir), JSON.stringify(timeline, null, 1));
 
 /** Record that `window`'s recording clock starts now. */
-export const markRecordingStart = (runDir: string, window: TimelineWindow): void => {
+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 +51,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..fc29c0813
--- /dev/null
+++ b/e2e/viewer/src/SessionPlayer.tsx
@@ -0,0 +1,470 @@
+// 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;
 }

From e49bdd1f6516c96e50968b2a9486d60f11e20b7c Mon Sep 17 00:00:00 2001
From: Rhys Sullivan <rhys@rhyssullivan.com>
Date: Fri, 12 Jun 2026 00:27:53 -0700
Subject: [PATCH 2/2] Self-host Playwright's trace viewer next to the runs
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

trace.playwright.dev is HTTPS, so when the runs viewer is reached over
plain HTTP (tailscale IP) the browser blocks its fetch of trace.zip as
mixed content and the trace never loads. playwright-core ships the
trace viewer as a static PWA — rebuild-viewer.ts now copies it to
runs/trace-viewer and the run page links there same-origin, which also
keeps traces viewable offline.
---
 e2e/scripts/rebuild-viewer.ts    | 19 +++++++++--
 e2e/src/timeline.ts              |  5 +--
 e2e/viewer/src/SessionPlayer.tsx | 58 +++++++-------------------------
 3 files changed, 30 insertions(+), 52 deletions(-)

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/timeline.ts b/e2e/src/timeline.ts
index 9f726551e..061c8c93b 100644
--- a/e2e/src/timeline.ts
+++ b/e2e/src/timeline.ts
@@ -32,10 +32,7 @@ const write = (runDir: string, timeline: Timeline) =>
   writeFileSync(fileFor(runDir), JSON.stringify(timeline, null, 1));
 
 /** Record that `window`'s recording clock starts now. */
-export const markRecordingStart = (
-  runDir: string,
-  window: TimelineWindow,
-): void => {
+export const markRecordingStart = (runDir: string, window: TimelineWindow): void => {
   const timeline = read(runDir);
   write(runDir, {
     ...timeline,
diff --git a/e2e/viewer/src/SessionPlayer.tsx b/e2e/viewer/src/SessionPlayer.tsx
index fc29c0813..c285ae144 100644
--- a/e2e/viewer/src/SessionPlayer.tsx
+++ b/e2e/viewer/src/SessionPlayer.tsx
@@ -104,20 +104,10 @@ export const SessionPlayer = ({
       }
       return { window: entry.window, from: toSession(entry.at), to };
     });
-  }, [
-    timeline,
-    sessionStart,
-    terminalAnchor,
-    browserAnchor,
-    castDuration,
-    videoDuration,
-  ]);
+  }, [timeline, sessionStart, terminalAnchor, browserAnchor, castDuration, videoDuration]);
 
   const duration = acts.at(-1)?.to ?? 0;
-  const ready =
-    castDuration !== null &&
-    videoDuration !== null &&
-    Number.isFinite(duration);
+  const ready = castDuration !== null && videoDuration !== null && Number.isFinite(duration);
 
   const actAt = (time: number): number => {
     for (let i = acts.length - 1; i >= 0; i -= 1) {
@@ -133,9 +123,7 @@ export const SessionPlayer = ({
   const mediaTime = (window: Act["window"], time: number): number =>
     Math.max(
       0,
-      (sessionStart +
-        time * 1000 -
-        (window === "terminal" ? terminalAnchor : browserAnchor)) /
+      (sessionStart + time * 1000 - (window === "terminal" ? terminalAnchor : browserAnchor)) /
         1000,
     );
 
@@ -178,22 +166,15 @@ export const SessionPlayer = ({
     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;
+        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 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);
@@ -220,9 +201,7 @@ export const SessionPlayer = ({
         const current = castPlayer.current?.getCurrentTime() ?? 0;
         media = typeof current === "number" ? current : await current;
       }
-      const wall =
-        (act.window === "terminal" ? terminalAnchor : browserAnchor) +
-        media * 1000;
+      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) {
@@ -263,9 +242,7 @@ export const SessionPlayer = ({
   // 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 ?? "";
+    [...(timeline.nav ?? [])].reverse().find((entry) => entry.at <= wallNow + 250)?.url ?? "";
 
   // Trace markers in session time (only the ones inside the session).
   const traceMarks = useMemo(
@@ -346,9 +323,7 @@ export const SessionPlayer = ({
                 muted
                 playsInline
                 preload="auto"
-                onLoadedMetadata={(event) =>
-                  setVideoDuration(event.currentTarget.duration)
-                }
+                onLoadedMetadata={(event) => setVideoDuration(event.currentTarget.duration)}
               />
             </div>
           </div>
@@ -361,9 +336,7 @@ export const SessionPlayer = ({
               className="scrub"
               onClick={(event) => {
                 const rect = event.currentTarget.getBoundingClientRect();
-                void seekTo(
-                  ((event.clientX - rect.left) / rect.width) * duration,
-                );
+                void seekTo(((event.clientX - rect.left) / rect.width) * duration);
               }}
             >
               {ready &&
@@ -387,12 +360,7 @@ export const SessionPlayer = ({
                     title={`${mark.url.replace(/^https?:\/\/[^/]+/, "")} → trace ${mark.id.slice(0, 8)}`}
                   />
                 ))}
-              {ready && (
-                <span
-                  className="head"
-                  style={{ left: `${(t / duration) * 100}%` }}
-                />
-              )}
+              {ready && <span className="head" style={{ left: `${(t / duration) * 100}%` }} />}
             </div>
             <span className="clock">
               {fmt(t)} / {ready ? fmt(duration) : "…"}
@@ -432,9 +400,7 @@ export const SessionPlayer = ({
                     </span>
                     <span
                       className={`trace-ms${slow ? " slow" : ""}${
-                        mark.status !== undefined && mark.status >= 400
-                          ? " err"
-                          : ""
+                        mark.status !== undefined && mark.status >= 400 ? " err" : ""
                       }`}
                     >
                       {mark.ms !== undefined ? `${mark.ms}ms` : "·"}