diff --git a/apps/desktop/src/ipc/channels.ts b/apps/desktop/src/ipc/channels.ts
index 226793657848..f49b6dbd968e 100644
--- a/apps/desktop/src/ipc/channels.ts
+++ b/apps/desktop/src/ipc/channels.ts
@@ -113,3 +113,5 @@ export const PREVIEW_POINTER_EVENT_CHANNEL = "desktop:preview-pointer-event";
 export const MAC_PERMISSION_HELPER_CHANNEL = "desktop:mac-permission-helper";
 
 export const CHECK_SYSTEM_PERMISSION_CHANNEL = "desktop:check-system-permission";
+
+export const PREVIEW_RECORDING_INPUT_CHANNEL = "desktop:preview-recording-input";
diff --git a/apps/desktop/src/ipc/methods/preview.ts b/apps/desktop/src/ipc/methods/preview.ts
index 5fb7eff99fc6..36cf7c9abe15 100644
--- a/apps/desktop/src/ipc/methods/preview.ts
+++ b/apps/desktop/src/ipc/methods/preview.ts
@@ -30,11 +30,13 @@ import {
 } from "@t3tools/contracts";
 import * as Effect from "effect/Effect";
 import * as Schema from "effect/Schema";
+import * as Option from "effect/Option";
 import * as NodeURL from "node:url";
 
 import * as ElectronWindow from "../../electron/ElectronWindow.ts";
 import * as BrowserImport from "../../preview/BrowserImport/BrowserImport.ts";
 import * as PreviewManager from "../../preview/Manager.ts";
+import * as DesktopClientSettings from "../../settings/DesktopClientSettings.ts";
 import { PREVIEW_WEBVIEW_PREFERENCES } from "../../preview/WebviewPreferences.ts";
 import * as IpcChannels from "../channels.ts";
 import * as DesktopIpc from "../DesktopIpc.ts";
@@ -50,6 +52,9 @@ export const installPreviewEventForwarding = Effect.fn(
   yield* manager.subscribeRecordingFrames((frame) =>
     electronWindow.sendAll(IpcChannels.PREVIEW_RECORDING_FRAME_CHANNEL, frame),
   );
+  yield* manager.subscribeRecordingInputs((event) =>
+    electronWindow.sendAll(IpcChannels.PREVIEW_RECORDING_INPUT_CHANNEL, event),
+  );
   yield* manager.subscribePointerEvents((event) =>
     electronWindow.sendAll(IpcChannels.PREVIEW_POINTER_EVENT_CHANNEL, event),
   );
@@ -180,11 +185,21 @@ export const cancelPickElement = tabMethod(
   "desktop.ipc.preview.cancelPickElement",
   (manager, tabId) => manager.cancelPickElement(tabId),
 );
-export const startRecording = tabMethod(
-  IpcChannels.PREVIEW_RECORDING_START_CHANNEL,
-  "desktop.ipc.preview.startRecording",
-  (manager, tabId) => manager.startRecording(tabId),
-);
+export const startRecording = DesktopIpc.makeIpcMethod({
+  channel: IpcChannels.PREVIEW_RECORDING_START_CHANNEL,
+  payload: DesktopPreviewTabInputSchema,
+  result: Schema.Void,
+  handler: Effect.fn("desktop.ipc.preview.startRecording")(function* ({ tabId }) {
+    const manager = yield* PreviewManager.PreviewManager;
+    const store = yield* DesktopClientSettings.DesktopClientSettings;
+    const settings = yield* store.get;
+    const options = Option.map(settings, (value) => ({
+      showKeyPresses: value.browserRecordingShowKeyPresses,
+      showMousePresses: value.browserRecordingShowMousePresses,
+    }));
+    yield* manager.startRecording(tabId, Option.getOrUndefined(options));
+  }),
+});
 export const stopRecording = tabMethod(
   IpcChannels.PREVIEW_RECORDING_STOP_CHANNEL,
   "desktop.ipc.preview.stopRecording",
diff --git a/apps/desktop/src/preload.ts b/apps/desktop/src/preload.ts
index 885b31a64d6b..7256f610fbeb 100644
--- a/apps/desktop/src/preload.ts
+++ b/apps/desktop/src/preload.ts
@@ -1,6 +1,7 @@
 import type {
   DesktopBridge,
   DesktopPreviewPointerEvent,
+  DesktopPreviewRecordingInputEvent,
   DesktopPreviewRecordingFrame,
   DesktopPreviewTabState,
   DesktopSnapShotEvent,
@@ -327,6 +328,15 @@ contextBridge.exposeInMainWorld("desktopBridge", {
         ipcRenderer.invoke(IpcChannels.PREVIEW_PICTURE_IN_PICTURE_CLOSE_CHANNEL, { tabId }),
     },
     recording: {
+      onInput: (listener) => {
+        const wrappedListener = (_event: Electron.IpcRendererEvent, event: unknown) => {
+          if (typeof event !== "object" || event === null) return;
+          listener(event as DesktopPreviewRecordingInputEvent);
+        };
+        ipcRenderer.on(IpcChannels.PREVIEW_RECORDING_INPUT_CHANNEL, wrappedListener);
+        return () =>
+          ipcRenderer.removeListener(IpcChannels.PREVIEW_RECORDING_INPUT_CHANNEL, wrappedListener);
+      },
       startScreencast: (tabId) =>
         ipcRenderer.invoke(IpcChannels.PREVIEW_RECORDING_START_CHANNEL, { tabId }),
       stopScreencast: (tabId) =>
diff --git a/apps/desktop/src/preview/GuestProtocol.ts b/apps/desktop/src/preview/GuestProtocol.ts
index e63597b71efc..1a73bb30f29e 100644
--- a/apps/desktop/src/preview/GuestProtocol.ts
+++ b/apps/desktop/src/preview/GuestProtocol.ts
@@ -5,3 +5,8 @@ export const ANNOTATION_CAPTURED_CHANNEL = "preview:annotation-captured";
 export const ANNOTATION_THEME_CHANNEL = "preview:annotation-theme";
 export const HUMAN_INPUT_CHANNEL = "preview:human-input";
 export const MOUSE_NAVIGATE_CHANNEL = "preview:mouse-navigate";
+export const RECORDING_CURSOR_CHANNEL = "preview:recording-cursor";
+export const RECORDING_POINTER_CHANNEL = "preview:recording-pointer";
+export const RECORDING_KEY_CHANNEL = "preview:recording-key";
+export const RECORDING_INPUT_CHANNEL = "preview:recording-input";
+export const RECORDING_CONTROLLER_CHANNEL = "preview:recording-controller";
diff --git a/apps/desktop/src/preview/Manager.test.ts b/apps/desktop/src/preview/Manager.test.ts
index 7b76a1b8003a..304efeafefe9 100644
--- a/apps/desktop/src/preview/Manager.test.ts
+++ b/apps/desktop/src/preview/Manager.test.ts
@@ -1,7 +1,10 @@
 import * as NodeVM from "node:vm";
 import { it as effectIt } from "@effect/vitest";
 import { DESKTOP_PREVIEW_RECORDING_CAPTURE_TRIGGER } from "@t3tools/contracts";
-import type { DesktopPreviewRecordingFrame } from "@t3tools/contracts";
+import type {
+  DesktopPreviewRecordingFrame,
+  DesktopPreviewRecordingInputEvent,
+} from "@t3tools/contracts";
 import { HostProcessPlatform } from "@t3tools/shared/hostProcess";
 import * as Cause from "effect/Cause";
 import * as Deferred from "effect/Deferred";
@@ -2885,6 +2888,165 @@ describe("PreviewManager", () => {
     ),
   );
 
+  effectIt.effect(
+    "restores the native cursor when recording startup fails, then allows a retry",
+    () =>
+      withManager((manager) =>
+        Effect.gen(function* () {
+          const host = makeTestHostWebContents();
+          host.executeJavaScript.mockResolvedValueOnce(false);
+          let cursorActive = false;
+          const cursorAtCapture: boolean[] = [];
+          const contents = Object.assign(
+            makeTestPreviewWebContents(
+              async () => {
+                cursorAtCapture.push(cursorActive);
+                return {
+                  toJPEG: () => Buffer.from("frame"),
+                  getSize: () => ({ width: 800, height: 600 }),
+                };
+              },
+              42,
+              host,
+            ),
+            {
+              send: (channel: string, active: unknown) => {
+                if (channel === "preview:recording-cursor") cursorActive = active === true;
+              },
+            },
+          );
+          fromId.mockReturnValue(contents as never);
+          yield* manager.createTab("tab_cursor");
+          yield* manager.registerWebview("tab_cursor", 42);
+          const failed = yield* Effect.exit(manager.startRecording("tab_cursor"));
+          expect(Exit.isFailure(failed)).toBe(true);
+          expect(cursorAtCapture).toEqual([true]);
+          expect(cursorActive).toBe(false);
+
+          yield* manager.startRecording("tab_cursor");
+          expect(cursorAtCapture).toEqual([true, true]);
+          expect(cursorActive).toBe(true);
+          yield* manager.stopRecording("tab_cursor");
+          expect(cursorActive).toBe(false);
+        }),
+      ),
+  );
+
+  effectIt.effect("restores the recording cursor after navigation only while recording", () =>
+    withManager((manager) =>
+      Effect.gen(function* () {
+        const listeners = new Map<string, () => void>();
+        let cursorActive = false;
+        let cursorUpdated: (() => void) | undefined;
+        let inputOptions: unknown;
+        const options = { showKeyPresses: true, showMousePresses: false };
+        const contents = Object.assign(
+          makeTestPreviewWebContents(async () => ({
+            toJPEG: () => Buffer.from("frame"),
+            getSize: () => ({ width: 800, height: 600 }),
+          })),
+          {
+            on: (event: string, listener: () => void) => listeners.set(event, listener),
+            send: (channel: string, active: unknown, recordingOptions: unknown) => {
+              if (channel !== "preview:recording-cursor") return;
+              cursorActive = active === true;
+              inputOptions = recordingOptions;
+              cursorUpdated?.();
+            },
+          },
+        );
+        fromId.mockReturnValue(contents as never);
+        yield* manager.createTab("tab_cursor_reload");
+        yield* manager.registerWebview("tab_cursor_reload", 42);
+        yield* manager.startRecording("tab_cursor_reload", options);
+        for (const recording of [true, false]) {
+          if (!recording) yield* manager.stopRecording("tab_cursor_reload");
+          // A new document has lost the previous preload's cursor overlay.
+          cursorActive = false;
+          const restored = new Promise<void>((resolve) => {
+            cursorUpdated = resolve;
+          });
+          listeners.get("dom-ready")?.();
+          yield* Effect.promise(() => restored);
+          cursorUpdated = undefined;
+          expect(cursorActive).toBe(recording);
+          expect(inputOptions).toEqual(recording ? options : undefined);
+        }
+      }),
+    ),
+  );
+
+  effectIt.effect("gates recording decorations and isolates failed subscribers", () =>
+    withManager((manager) =>
+      Effect.gen(function* () {
+        const callbacks = new Map<
+          string,
+          (event: unknown, input: unknown) => Fiber.Fiber<void, never> | undefined
+        >();
+        const contents = Object.assign(
+          makeTestPreviewWebContents(async () => ({
+            toJPEG: () => Buffer.from("frame"),
+            getSize: () => ({ width: 800, height: 600 }),
+          })),
+          {
+            ipc: {
+              on: (
+                channel: string,
+                callback: (event: unknown, input: unknown) => Fiber.Fiber<void, never> | undefined,
+              ) => callbacks.set(channel, callback),
+              off: vi.fn(),
+            },
+          },
+        );
+        fromId.mockReturnValue(contents as never);
+        yield* manager.createTab("tab_recording_input");
+        yield* manager.registerWebview("tab_recording_input", 42);
+        const received: DesktopPreviewRecordingInputEvent[] = [];
+        yield* manager.subscribeRecordingInputs(() => Effect.die("renderer unavailable"));
+        yield* manager.subscribeRecordingInputs((event) =>
+          Effect.sync(() => {
+            received.push(event);
+          }),
+        );
+        const send = (input: unknown) =>
+          Effect.gen(function* () {
+            const fiber = callbacks.get("preview:recording-input")?.(null, input);
+            if (fiber) yield* Fiber.join(fiber);
+          });
+        const key = { type: "key", label: "⌘C", held: true, width: 800 };
+        const pointer = {
+          type: "pointer",
+          phase: "down",
+          x: 120,
+          y: 80,
+          width: 800,
+          height: 600,
+        };
+        yield* send(key);
+        expect(received).toEqual([]);
+        yield* manager.startRecording("tab_recording_input", {
+          showKeyPresses: true,
+          showMousePresses: false,
+        });
+        yield* send(key);
+        yield* send(pointer);
+        yield* send({ ...key, width: 0 });
+        expect(received).toEqual([{ tabId: "tab_recording_input", input: key }]);
+        yield* manager.stopRecording("tab_recording_input");
+        yield* send(key);
+        expect(received).toHaveLength(1);
+        yield* manager.startRecording("tab_recording_input", {
+          showKeyPresses: false,
+          showMousePresses: true,
+        });
+        yield* send(key);
+        yield* send(pointer);
+        expect(received.at(-1)).toEqual({ tabId: "tab_recording_input", input: pointer });
+        expect(received).toHaveLength(2);
+      }),
+    ),
+  );
+
   effectIt.effect("continues native recording when the source warmup fails", () =>
     withManager((manager) =>
       Effect.gen(function* () {
@@ -3853,88 +4015,108 @@ describe("PreviewManager", () => {
     ),
   );
 
-  effectIt.effect("emits the resolved pointer target before dispatching an automation click", () =>
-    withManager((manager) =>
-      Effect.gen(function* () {
-        let humanInput: ((_event: unknown, signal: unknown) => void) | undefined;
-        const activity: string[] = [];
-        const sendCommand = vi.fn(async (method: string, params?: Record<string, unknown>) => {
-          if (method === "Runtime.evaluate") {
-            return {
-              result: {
-                value: { width: 800, height: 600 },
-              },
-            };
-          }
-          if (method === "Input.dispatchMouseEvent" && params?.type === "mousePressed") {
-            activity.push("mousePressed");
-            humanInput?.({}, { kind: "pointer", x: params.x, y: params.y, button: 0 });
-          }
-          return undefined;
-        });
-        fromId.mockReturnValue({
-          id: 42,
-          isDestroyed: () => false,
-          getType: () => "webview",
-          getURL: () => "https://example.com",
-          getTitle: () => "Example",
-          isLoading: () => false,
-          isDevToolsOpened: () => false,
-          getZoomFactor: () => 1,
-          setZoomFactor: vi.fn(),
-          setAudioMuted: vi.fn(),
-          isCurrentlyAudible: () => false,
-          on: vi.fn(),
-          off: vi.fn(),
-          ipc: {
-            on: vi.fn((channel: string, listener: typeof humanInput) => {
-              if (channel === "preview:human-input") humanInput = listener;
-            }),
-            off: vi.fn(),
-          },
-          send: webviewSend,
-          navigationHistory: { canGoBack: () => false, canGoForward: () => false },
-          setIgnoreMenuShortcuts: vi.fn(),
-          setWindowOpenHandler: vi.fn(),
-          debugger: {
-            isAttached: () => false,
-            attach: vi.fn(),
-            sendCommand,
+  effectIt.effect(
+    "records the resolved pointer target before dispatching an automation click",
+    () =>
+      withManager((manager) =>
+        Effect.gen(function* () {
+          let humanInput: ((_event: unknown, signal: unknown) => void) | undefined;
+          const activity: string[] = [];
+          const sendCommand = vi.fn(async (method: string, params?: Record<string, unknown>) => {
+            if (method === "Runtime.evaluate") {
+              return {
+                result: {
+                  value: { width: 800, height: 600 },
+                },
+              };
+            }
+            if (method === "Input.dispatchMouseEvent" && params?.type === "mousePressed") {
+              activity.push("mousePressed");
+              humanInput?.({}, { kind: "pointer", x: params.x, y: params.y, button: 0 });
+            }
+            return undefined;
+          });
+          fromId.mockReturnValue({
+            id: 42,
+            hostWebContents: makeTestHostWebContents(),
+            capturePage: vi.fn(async () => ({ toPNG: () => Buffer.from("frame") })),
+            setBackgroundThrottling: vi.fn(),
+            isDestroyed: () => false,
+            getType: () => "webview",
+            getURL: () => "https://example.com",
+            getTitle: () => "Example",
+            isLoading: () => false,
+            isDevToolsOpened: () => false,
+            getZoomFactor: () => 1,
+            setZoomFactor: vi.fn(),
+            setAudioMuted: vi.fn(),
+            isCurrentlyAudible: () => false,
             on: vi.fn(),
             off: vi.fn(),
-          },
-        } as never);
-
-        yield* manager.subscribePointerEvents((event) =>
-          Effect.sync(() => {
-            activity.push(event.phase);
-          }),
-        );
-        yield* manager.createTab("tab_1");
-        yield* manager.registerWebview("tab_1", 42);
-        const click = yield* manager
-          .automationClick("tab_1", { x: 120, y: 80 })
-          .pipe(Effect.forkChild({ startImmediately: true }));
-        yield* TestClock.adjust(200);
-        yield* Fiber.join(click);
+            ipc: {
+              on: vi.fn((channel: string, listener: typeof humanInput) => {
+                if (channel === "preview:human-input") humanInput = listener;
+              }),
+              off: vi.fn(),
+            },
+            send: webviewSend,
+            navigationHistory: { canGoBack: () => false, canGoForward: () => false },
+            setIgnoreMenuShortcuts: vi.fn(),
+            setWindowOpenHandler: vi.fn(),
+            debugger: {
+              isAttached: () => false,
+              attach: vi.fn(),
+              sendCommand,
+              on: vi.fn(),
+              off: vi.fn(),
+            },
+          } as never);
 
-        expect(activity).toEqual(["move", "click", "mousePressed"]);
-        expect(sendCommand).toHaveBeenCalledWith("Input.dispatchMouseEvent", {
-          type: "mousePressed",
-          x: 120,
-          y: 80,
-          button: "left",
-          clickCount: 1,
-        });
-        expect(sendCommand).toHaveBeenCalledWith("Input.dispatchMouseEvent", {
-          type: "mouseReleased",
-          x: 120,
-          y: 80,
-          button: "left",
-          clickCount: 1,
-        });
-      }),
-    ),
+          yield* manager.subscribePointerEvents((event) =>
+            Effect.sync(() => {
+              activity.push(event.phase);
+            }),
+          );
+          yield* manager.createTab("tab_1");
+          yield* manager.registerWebview("tab_1", 42);
+          yield* manager.startRecording("tab_1");
+          const click = yield* manager
+            .automationClick("tab_1", { x: 120, y: 80 })
+            .pipe(Effect.forkChild({ startImmediately: true }));
+          yield* TestClock.adjust(200);
+          yield* Fiber.join(click);
+
+          expect(activity).toEqual(["move", "click", "mousePressed"]);
+          expect(
+            webviewSend.mock.calls
+              .filter(([channel]) => channel === "preview:recording-controller")
+              .map(([, controller]) => controller),
+          ).toEqual(["agent", "none"]);
+
+          const recordedPointer = webviewSend.mock.calls
+            .filter(([channel]) => channel === "preview:recording-pointer")
+            .map(([, event]) => event);
+          expect(recordedPointer).toEqual([
+            expect.objectContaining({ phase: "move", x: 120, y: 80 }),
+            expect.objectContaining({ phase: "click", x: 120, y: 80 }),
+          ]);
+          expect(sendCommand).toHaveBeenCalledWith("Input.dispatchMouseEvent", {
+            type: "mousePressed",
+            x: 120,
+            y: 80,
+            button: "left",
+            clickCount: 1,
+          });
+          yield* manager.stopRecording("tab_1");
+          expect(sendCommand).toHaveBeenCalledWith("Input.dispatchMouseEvent", {
+            type: "mouseReleased",
+            x: 120,
+            y: 80,
+            button: "left",
+            clickCount: 1,
+          });
+        }),
+      ),
   );
 
   effectIt.effect("types in background webviews and enables native key input", () =>
@@ -4230,6 +4412,9 @@ describe("PreviewManager", () => {
         });
         fromId.mockReturnValue({
           id: 42,
+          hostWebContents: makeTestHostWebContents(),
+          capturePage: vi.fn(async () => ({ toPNG: () => Buffer.from("frame") })),
+          setBackgroundThrottling: vi.fn(),
           isDestroyed: () => false,
           getType: () => "webview",
           getURL: () => "https://example.com",
@@ -4263,6 +4448,7 @@ describe("PreviewManager", () => {
 
         yield* manager.createTab("tab_1");
         yield* manager.registerWebview("tab_1", 42);
+        yield* manager.startRecording("tab_1");
 
         const click = yield* manager
           .automationClick("tab_1", { x: 120, y: 80 })
@@ -4270,6 +4456,12 @@ describe("PreviewManager", () => {
         yield* TestClock.adjust(200);
         const exit = yield* Fiber.await(click);
         expect(Exit.isFailure(exit)).toBe(true);
+        expect(
+          webviewSend.mock.calls
+            .filter(([channel]) => channel === "preview:recording-controller")
+            .map(([, controller]) => controller),
+        ).toEqual(["agent", "human", "none"]);
+        yield* manager.stopRecording("tab_1");
         if (Exit.isSuccess(exit)) return;
         const error = Option.getOrThrow(Cause.findErrorOption(exit.cause));
         expect(error).toMatchObject({
diff --git a/apps/desktop/src/preview/Manager.ts b/apps/desktop/src/preview/Manager.ts
index a2e34fe54736..468c47065315 100644
--- a/apps/desktop/src/preview/Manager.ts
+++ b/apps/desktop/src/preview/Manager.ts
@@ -6,7 +6,10 @@
  * here). Single layer-scoped browser session partition.
  */
 import * as NodeCrypto from "node:crypto";
-import { DESKTOP_PREVIEW_RECORDING_CAPTURE_TRIGGER } from "@t3tools/contracts";
+import {
+  DesktopPreviewRecordingInputSchema,
+  DESKTOP_PREVIEW_RECORDING_CAPTURE_TRIGGER,
+} from "@t3tools/contracts";
 import type {
   DesktopPreviewAnnotationTheme,
   DesktopPreviewAutomationStatus,
@@ -18,6 +21,7 @@ import type {
   PreviewAnnotationSubmissionResult,
   DesktopPreviewRecordingArtifact,
   DesktopPreviewRecordingFrame,
+  DesktopPreviewRecordingInputEvent,
   DesktopPreviewScreenshotArtifact,
   DesktopPreviewTabDefaults,
   PreviewAutomationClickInput,
@@ -71,6 +75,11 @@ import {
   ELEMENT_PICKED_CHANNEL,
   HUMAN_INPUT_CHANNEL,
   MOUSE_NAVIGATE_CHANNEL,
+  RECORDING_CURSOR_CHANNEL,
+  RECORDING_POINTER_CHANNEL,
+  RECORDING_KEY_CHANNEL,
+  RECORDING_INPUT_CHANNEL,
+  RECORDING_CONTROLLER_CHANNEL,
   START_PICK_CHANNEL,
 } from "./GuestProtocol.ts";
 import { isPreviewAnnotationPayload } from "./PickedElementPayload.ts";
@@ -81,6 +90,7 @@ import {
   previewAutomationEditingCommandExpression,
 } from "./PreviewKeyboard.ts";
 import { captureFavicon, safeHttpOrigin, selectFaviconCandidates } from "./FaviconCapture.ts";
+import { DEFAULT_RECORDING_INPUT_OPTIONS, type RecordingInputOptions } from "./RecordingInput.ts";
 
 export type PreviewNavStatus =
   | { kind: "Idle" }
@@ -437,6 +447,7 @@ interface ManagedListeners {
 type FrameCaptureConsumer = "picture-in-picture" | "recording";
 
 interface FrameCaptureSession {
+  readonly recordingInputOptions?: RecordingInputOptions;
   readonly scope: Scope.Closeable | null;
   readonly consumers: ReadonlySet<FrameCaptureConsumer>;
   readonly unthrottledWebContentsIds: ReadonlySet<number>;
@@ -485,6 +496,10 @@ interface BrowserDiagnostics {
   readonly requests: ReadonlyMap<string, { url: string; method: string }>;
 }
 
+const isRecordingInput = Schema.is(DesktopPreviewRecordingInputSchema);
+
+type RecordingInputListener = (event: DesktopPreviewRecordingInputEvent) => Effect.Effect<void>;
+
 type PointerEventListener = (event: DesktopPreviewPointerEvent) => Effect.Effect<void>;
 
 interface ExpectedAgentInput {
@@ -636,6 +651,9 @@ const makeNativeOperations = Effect.fn("PreviewManager.makeOperations")(function
   const attachedRef = yield* Ref.make<ReadonlyMap<number, ManagedListeners>>(new Map());
   const listenersRef = yield* Ref.make<ReadonlySet<Listener>>(new Set());
   const pointerEventListenersRef = yield* Ref.make<ReadonlySet<PointerEventListener>>(new Set());
+  const recordingInputListenersRef = yield* Ref.make<ReadonlySet<RecordingInputListener>>(
+    new Set(),
+  );
   const recordingFrameListenersRef = yield* Ref.make<ReadonlySet<RecordingFrameListener>>(
     new Set(),
   );
@@ -821,6 +839,20 @@ const makeNativeOperations = Effect.fn("PreviewManager.makeOperations")(function
         return Effect.succeed([undefined, sessions] as const);
       }
       return setFrameCaptureWebContentsBackgroundThrottling(wc, false).pipe(
+        Effect.tap(() =>
+          Effect.gen(function* () {
+            if (!current.consumers.has("recording")) return;
+            const tab = (yield* SynchronizedRef.get(tabsRef)).get(tabId);
+            yield* attempt({ operation: "recording.cursor", tabId, webContentsId: wc.id }, () =>
+              wc.send(
+                RECORDING_CURSOR_CHANNEL,
+                true,
+                current.recordingInputOptions,
+                tab?.controller,
+              ),
+            );
+          }),
+        ),
         Effect.map(
           () =>
             [
@@ -846,6 +878,15 @@ const makeNativeOperations = Effect.fn("PreviewManager.makeOperations")(function
         if (!current || !current.consumers.has(consumer)) {
           return [undefined, sessions] as const;
         }
+        if (consumer === "recording") {
+          yield* Effect.forEach(current.unthrottledWebContentsIds, (id) =>
+            attempt({ operation: "recording.cursor", tabId, webContentsId: id }, () => {
+              const contents = webContents.fromId(id);
+              if (contents && !contents.isDestroyed())
+                contents.send(RECORDING_CURSOR_CHANNEL, false);
+            }).pipe(Effect.ignore),
+          );
+        }
         const consumers = new Set(current.consumers);
         consumers.delete(consumer);
         if (consumers.size > 0) {
@@ -896,7 +937,7 @@ const makeNativeOperations = Effect.fn("PreviewManager.makeOperations")(function
   });
 
   const deliverEvent = (
-    eventKind: "state-change" | "recording-frame" | "pointer-event",
+    eventKind: "state-change" | "recording-frame" | "recording-input" | "pointer-event",
     tabId: string,
     delivery: () => Effect.Effect<void>,
   ) =>
@@ -933,6 +974,7 @@ const makeNativeOperations = Effect.fn("PreviewManager.makeOperations")(function
   const update = Effect.fn("PreviewManager.update")(function* (
     tabId: string,
     patch: Partial<PreviewTabState>,
+    humanPoint?: { readonly x: number; readonly y: number },
   ) {
     const updatedAt = yield* currentIso;
     const next = yield* SynchronizedRef.modify(tabsRef, (tabs) => {
@@ -950,7 +992,20 @@ const makeNativeOperations = Effect.fn("PreviewManager.makeOperations")(function
     // can commit between the modify above and here, and republishing this
     // snapshot would roll the UI back to a value that writer will not send
     // again because it suppresses unchanged audibility.
-    if (Option.isSome(next)) yield* emitIfCurrent(tabId, next.value);
+    if (Option.isSome(next)) {
+      if (patch.controller !== undefined && next.value.webContentsId != null) {
+        const capture = (yield* SynchronizedRef.get(frameCaptureSessionsRef)).get(tabId);
+        const webContentsId = next.value.webContentsId;
+        if (capture?.consumers.has("recording")) {
+          yield* attempt({ operation: "recording.controller", tabId }, () => {
+            const contents = webContents.fromId(webContentsId);
+            if (contents && !contents.isDestroyed())
+              contents.send(RECORDING_CONTROLLER_CHANNEL, patch.controller, humanPoint);
+          }).pipe(Effect.ignore);
+        }
+      }
+      yield* emitIfCurrent(tabId, next.value);
+    }
   });
 
   /**
@@ -1728,6 +1783,21 @@ const makeNativeOperations = Effect.fn("PreviewManager.makeOperations")(function
     const sync = () => runFork(syncState(true));
     const syncNavigation = () => runFork(syncState(false, true));
     const syncInPageNavigation = () => runFork(syncState(false));
+    const restoreRecordingCursor = () =>
+      runFork(
+        Effect.gen(function* () {
+          const session = (yield* SynchronizedRef.get(frameCaptureSessionsRef)).get(tabId);
+          if (!wc.isDestroyed()) {
+            const tab = (yield* SynchronizedRef.get(tabsRef)).get(tabId);
+            wc.send(
+              RECORDING_CURSOR_CHANNEL,
+              session?.consumers.has("recording") ?? false,
+              session?.recordingInputOptions,
+              tab?.controller,
+            );
+          }
+        }),
+      );
     const navigationStarted = (
       event: Electron.Event<Electron.WebContentsDidStartNavigationEventParams>,
     ) => {
@@ -1860,13 +1930,37 @@ const makeNativeOperations = Effect.fn("PreviewManager.makeOperations")(function
           copy.set(tabId, (epochs.get(tabId) ?? 0) + 1);
         }),
       );
-      yield* update(tabId, { controller: "human" });
+      yield* update(
+        tabId,
+        { controller: "human" },
+        isPreviewInputSignal(rawSignal) && rawSignal.kind === "pointer"
+          ? { x: rawSignal.x, y: rawSignal.y }
+          : undefined,
+      );
       yield* Effect.sleep(750);
       const tabs = yield* SynchronizedRef.get(tabsRef);
       if (tabs.get(tabId)?.controller === "human") {
         yield* update(tabId, { controller: "none" });
       }
     });
+    const recordingInput = (_event: unknown, input: unknown) => {
+      if (!isRecordingInput(input)) return;
+      return runFork(
+        Effect.gen(function* () {
+          const tab = (yield* SynchronizedRef.get(tabsRef)).get(tabId);
+          const capture = (yield* SynchronizedRef.get(frameCaptureSessionsRef)).get(tabId);
+          if (tab?.webContentsId !== wc.id || !capture?.consumers.has("recording")) return;
+          if (input.type === "key" && !capture.recordingInputOptions?.showKeyPresses) return;
+          if (input.type === "pointer" && !capture.recordingInputOptions?.showMousePresses) return;
+          const listeners = yield* Ref.get(recordingInputListenersRef);
+          yield* Effect.forEach(
+            listeners,
+            (listener) => deliverEvent("recording-input", tabId, () => listener({ tabId, input })),
+            { discard: true },
+          );
+        }),
+      );
+    };
     const humanInput = (_event: unknown, rawSignal?: unknown): void => {
       runFork(handleHumanInput(rawSignal));
     };
@@ -1928,11 +2022,13 @@ const makeNativeOperations = Effect.fn("PreviewManager.makeOperations")(function
         wc.off("page-favicon-updated", faviconUpdated as never);
         wc.off("did-start-loading", sync);
         wc.off("did-stop-loading", sync);
+        wc.off("dom-ready", restoreRecordingCursor);
         wc.off("did-fail-load", failed as never);
         wc.off("audio-state-changed", audioStateChanged);
         wc.off("did-create-window", windowCreated);
         wc.off("before-input-event", beforeInput);
         wc.ipc.off(HUMAN_INPUT_CHANNEL, humanInput);
+        wc.ipc.off(RECORDING_INPUT_CHANNEL, recordingInput);
         wc.ipc.off(MOUSE_NAVIGATE_CHANNEL, mouseNavigate);
       }).pipe(Effect.ignore),
     );
@@ -1948,9 +2044,11 @@ const makeNativeOperations = Effect.fn("PreviewManager.makeOperations")(function
         wc.on("page-favicon-updated", faviconUpdated as never);
         wc.on("did-start-loading", sync);
         wc.on("did-stop-loading", sync);
+        wc.on("dom-ready", restoreRecordingCursor);
         wc.on("did-fail-load", failed as never);
         wc.on("audio-state-changed", audioStateChanged);
         wc.ipc.on(HUMAN_INPUT_CHANNEL, humanInput);
+        wc.ipc.on(RECORDING_INPUT_CHANNEL, recordingInput);
         wc.ipc.on(MOUSE_NAVIGATE_CHANNEL, mouseNavigate);
         wc.setWindowOpenHandler((details) => {
           if (previewWindowOpenAction(details) === "popup") {
@@ -3405,7 +3503,10 @@ const makeNativeOperations = Effect.fn("PreviewManager.makeOperations")(function
     });
   };
 
-  const startRecording = Effect.fn("PreviewManager.startRecording")(function* (tabId: string) {
+  const startRecording = Effect.fn("PreviewManager.startRecording")(function* (
+    tabId: string,
+    options: RecordingInputOptions = DEFAULT_RECORDING_INPUT_OPTIONS,
+  ) {
     if ((yield* Ref.get(closingTabIdsRef)).has(tabId)) {
       return yield* new PreviewTabNotFoundError({ tabId });
     }
@@ -3413,11 +3514,21 @@ const makeNativeOperations = Effect.fn("PreviewManager.makeOperations")(function
       tabId,
       Effect.gen(function* () {
         yield* startFrameCapture(tabId, "recording");
+        yield* SynchronizedRef.update(frameCaptureSessionsRef, (sessions) =>
+          replaceMap(sessions, (copy) => {
+            const current = copy.get(tabId);
+            if (current) copy.set(tabId, { ...current, recordingInputOptions: options });
+          }),
+        );
         const wc = yield* requireWebContents(tabId);
         const requestWebContents = wc.hostWebContents;
         if (requestWebContents === null) {
           return yield* new PreviewMainWindowClosedError({ tabId });
         }
+        const tab = (yield* SynchronizedRef.get(tabsRef)).get(tabId);
+        yield* attempt({ operation: "recording.cursor", tabId, webContentsId: wc.id }, () =>
+          wc.send(RECORDING_CURSOR_CHANNEL, true, options, tab?.controller),
+        );
         yield* attemptPromise(
           {
             operation: "recording.warmSource",
@@ -3720,6 +3831,15 @@ const makeNativeOperations = Effect.fn("PreviewManager.makeOperations")(function
   const emitPointerEvent = Effect.fn("PreviewManager.emitPointerEvent")(function* (
     event: DesktopPreviewPointerEvent,
   ) {
+    const recording = (yield* SynchronizedRef.get(frameCaptureSessionsRef)).get(event.tabId);
+    const tab = (yield* SynchronizedRef.get(tabsRef)).get(event.tabId);
+    const webContentsId = tab?.webContentsId;
+    if (recording?.consumers.has("recording") && webContentsId != null) {
+      yield* attempt({ operation: "recording.pointer", tabId: event.tabId }, () => {
+        const contents = webContents.fromId(webContentsId);
+        if (contents && !contents.isDestroyed()) contents.send(RECORDING_POINTER_CHANNEL, event);
+      });
+    }
     const listeners = yield* Ref.get(pointerEventListenersRef);
     yield* Effect.forEach(
       listeners,
@@ -4110,6 +4230,18 @@ const makeNativeOperations = Effect.fn("PreviewManager.makeOperations")(function
     const keySequence = makePreviewAutomationNativeKeySequence(input, {
       isMac: hostPlatform === "darwin",
     });
+    const recording = (yield* SynchronizedRef.get(frameCaptureSessionsRef)).get(tabId);
+    if (recording?.consumers.has("recording") && recording.recordingInputOptions?.showKeyPresses) {
+      yield* attempt({ operation: "recording.key", tabId, webContentsId: wc.id }, () =>
+        wc.send(RECORDING_KEY_CHANNEL, {
+          key: keySequence.signal.key || input.key,
+          metaKey: input.modifiers?.includes("Meta") ?? false,
+          ctrlKey: input.modifiers?.includes("Control") ?? false,
+          altKey: input.modifiers?.includes("Alt") ?? false,
+          shiftKey: input.modifiers?.includes("Shift") ?? false,
+        }),
+      );
+    }
     // CDP keyboard dispatch follows the embedder's focused renderer, and
     // WebContents.focus() is a no-op for webview guests. Native input targets
     // this guest's widget directly, so Enter cannot submit the host composer.
@@ -4470,6 +4602,7 @@ const makeNativeOperations = Effect.fn("PreviewManager.makeOperations")(function
         Ref.set(expectedAgentInputsRef, new Map()),
         Ref.set(pointerEventListenersRef, new Set()),
         Ref.set(recordingFrameListenersRef, new Set()),
+        Ref.set(recordingInputListenersRef, new Set()),
       ],
       { discard: true },
     );
@@ -4513,6 +4646,8 @@ const makeNativeOperations = Effect.fn("PreviewManager.makeOperations")(function
     stopRecording,
     subscribePointerEvents: (listener: PointerEventListener) =>
       subscribe(pointerEventListenersRef, listener),
+    subscribeRecordingInputs: (listener: RecordingInputListener) =>
+      subscribe(recordingInputListenersRef, listener),
     subscribeRecordingFrames: (listener: RecordingFrameListener) =>
       subscribe(recordingFrameListenersRef, listener),
     subscribeStateChanges: (listener: Listener) => subscribe(listenersRef, listener),
@@ -4877,7 +5012,10 @@ export class PreviewManager extends Context.Service<
     readonly copyArtifactToClipboard: (path: string) => Effect.Effect<void, PreviewManagerError>;
     readonly openPictureInPicture: (tabId: string) => Effect.Effect<void, PreviewManagerError>;
     readonly closePictureInPicture: (tabId: string) => Effect.Effect<void, PreviewManagerError>;
-    readonly startRecording: (tabId: string) => Effect.Effect<void, PreviewManagerError>;
+    readonly startRecording: (
+      tabId: string,
+      options?: RecordingInputOptions,
+    ) => Effect.Effect<void, PreviewManagerError>;
     readonly stopRecording: (tabId: string) => Effect.Effect<void, PreviewManagerError>;
     readonly saveRecording: (
       tabId: string,
@@ -4918,6 +5056,9 @@ export class PreviewManager extends Context.Service<
     readonly subscribePointerEvents: (
       listener: PointerEventListener,
     ) => Effect.Effect<void, never, Scope.Scope>;
+    readonly subscribeRecordingInputs: (
+      listener: RecordingInputListener,
+    ) => Effect.Effect<void, never, Scope.Scope>;
     readonly subscribeRecordingFrames: (
       listener: RecordingFrameListener,
     ) => Effect.Effect<void, never, Scope.Scope>;
@@ -5011,6 +5152,7 @@ export const make = Effect.gen(function* PreviewManagerMake() {
     subscribeStateChanges: operations.subscribeStateChanges,
     subscribePointerEvents: operations.subscribePointerEvents,
     subscribeRecordingFrames: operations.subscribeRecordingFrames,
+    subscribeRecordingInputs: operations.subscribeRecordingInputs,
   });
 }).pipe(Effect.withSpan("PreviewManager.make"));
 
diff --git a/apps/desktop/src/preview/PickPreload.ts b/apps/desktop/src/preview/PickPreload.ts
index 6155c4119ec8..78351e9d79c3 100644
--- a/apps/desktop/src/preview/PickPreload.ts
+++ b/apps/desktop/src/preview/PickPreload.ts
@@ -16,6 +16,8 @@ import type {
 
 import { resolveAnnotationSubmission } from "./AnnotationKeyboard.ts";
 import { previewAnnotationStyles } from "./AnnotationStyles.generated.ts";
+import { installRecordingCursor } from "./RecordingCursor.ts";
+import { DEFAULT_RECORDING_INPUT_OPTIONS } from "./RecordingInput.ts";
 import {
   ANNOTATION_CAPTURED_CHANNEL,
   ANNOTATION_THEME_CHANNEL,
@@ -23,6 +25,11 @@ import {
   ELEMENT_PICKED_CHANNEL,
   HUMAN_INPUT_CHANNEL,
   MOUSE_NAVIGATE_CHANNEL,
+  RECORDING_CURSOR_CHANNEL,
+  RECORDING_POINTER_CHANNEL,
+  RECORDING_KEY_CHANNEL,
+  RECORDING_INPUT_CHANNEL,
+  RECORDING_CONTROLLER_CHANNEL,
   START_PICK_CHANNEL,
 } from "./GuestProtocol.ts";
 const OVERLAY_ATTRIBUTE = "data-t3code-annotation-ui";
@@ -35,6 +42,80 @@ const ELEMENT_CONTEXT_TIMEOUT_MS = 5_000;
 const CONTENT_LAYER_Z_INDEX = 1;
 const CHROME_LAYER_Z_INDEX = 10;
 
+let recordingCursor: ReturnType<typeof installRecordingCursor> | null = null;
+ipcRenderer.on(
+  RECORDING_CURSOR_CHANNEL,
+  (_event, active: unknown, inputOptions: unknown, controller: unknown) => {
+    if (active === true) {
+      const options =
+        typeof inputOptions === "object" && inputOptions !== null
+          ? {
+              showKeyPresses:
+                "showKeyPresses" in inputOptions && inputOptions.showKeyPresses === true,
+              showMousePresses:
+                "showMousePresses" in inputOptions && inputOptions.showMousePresses === true,
+            }
+          : DEFAULT_RECORDING_INPUT_OPTIONS;
+      recordingCursor ??= installRecordingCursor(document, window, options, (input) =>
+        ipcRenderer.send(RECORDING_INPUT_CHANNEL, input),
+      );
+      recordingCursor.setTheme(annotationTheme);
+      if (controller === "agent" || controller === "human" || controller === "none")
+        recordingCursor.setController(controller);
+    } else {
+      recordingCursor?.dispose();
+      recordingCursor = null;
+    }
+  },
+);
+ipcRenderer.on(RECORDING_CONTROLLER_CHANNEL, (_event, controller: unknown, point: unknown) => {
+  const humanPoint =
+    typeof point === "object" &&
+    point !== null &&
+    "x" in point &&
+    typeof point.x === "number" &&
+    Number.isFinite(point.x) &&
+    "y" in point &&
+    typeof point.y === "number" &&
+    Number.isFinite(point.y)
+      ? { x: point.x, y: point.y }
+      : undefined;
+  if (controller === "agent" || controller === "human" || controller === "none")
+    recordingCursor?.setController(controller, humanPoint);
+});
+ipcRenderer.on(RECORDING_KEY_CHANNEL, (_event, input: unknown) => {
+  if (
+    typeof input !== "object" ||
+    input === null ||
+    !("key" in input) ||
+    typeof input.key !== "string"
+  )
+    return;
+  recordingCursor?.keyPress({
+    key: input.key,
+    metaKey: "metaKey" in input && input.metaKey === true,
+    ctrlKey: "ctrlKey" in input && input.ctrlKey === true,
+    altKey: "altKey" in input && input.altKey === true,
+    shiftKey: "shiftKey" in input && input.shiftKey === true,
+  });
+});
+ipcRenderer.on(RECORDING_POINTER_CHANNEL, (_event, point: unknown) => {
+  if (
+    typeof point === "object" &&
+    point !== null &&
+    "x" in point &&
+    typeof point.x === "number" &&
+    Number.isFinite(point.x) &&
+    "y" in point &&
+    typeof point.y === "number" &&
+    Number.isFinite(point.y)
+  )
+    recordingCursor?.move(
+      { x: point.x, y: point.y },
+      "phase" in point && point.phase === "click" ? "click" : "move",
+    );
+});
+
 type AnnotationTool = "select" | "marquee" | "draw" | "erase";
 
 interface SelectedElement {
@@ -1361,6 +1442,7 @@ ipcRenderer.on(START_PICK_CHANNEL, (_event, theme: DesktopPreviewAnnotationTheme
 });
 ipcRenderer.on(ANNOTATION_THEME_CHANNEL, (_event, theme: DesktopPreviewAnnotationTheme) => {
   annotationTheme = theme;
+  recordingCursor?.setTheme(theme);
   activeSession?.applyTheme(theme);
 });
 ipcRenderer.on(CANCEL_PICK_CHANNEL, () => activeSession?.teardown(false));
diff --git a/apps/desktop/src/preview/RecordingCursor.ts b/apps/desktop/src/preview/RecordingCursor.ts
new file mode 100644
index 000000000000..70b0a43be43a
--- /dev/null
+++ b/apps/desktop/src/preview/RecordingCursor.ts
@@ -0,0 +1,197 @@
+import type {
+  DesktopPreviewAnnotationTheme,
+  DesktopPreviewRecordingInput,
+} from "@t3tools/contracts";
+
+import {
+  DEFAULT_RECORDING_INPUT_OPTIONS,
+  recordingKeyLabel,
+  recordingKeysAreSensitive,
+  type RecordingInputOptions,
+  type RecordingKeyPress,
+} from "./RecordingInput.ts";
+
+/**
+ * Chromium's capture cursor uses native window bounds, which do not follow a
+ * webview's CSS placement or scale. Draw it in the guest's coordinate space
+ * while recording, and make the native cursor transparent to avoid two cursors.
+ */
+export function installRecordingCursor(
+  document: Document,
+  window: Window,
+  options: RecordingInputOptions = DEFAULT_RECORDING_INPUT_OPTIONS,
+  emit: (input: DesktopPreviewRecordingInput) => void = () => {},
+) {
+  const style = document.createElement("style");
+  style.textContent =
+    "html, html * { cursor: none !important; } @media (prefers-reduced-motion: reduce) { [data-t3code-recording-agent-cursor] { transition: none !important; } }";
+  const cursor = document.createElement("div");
+  cursor.setAttribute("aria-hidden", "true");
+  cursor.setAttribute("data-t3code-recording-cursor", "");
+  cursor.style.cssText =
+    "position:fixed;left:0;top:0;width:16px;height:24px;pointer-events:none;z-index:2147483647;display:none;";
+  cursor.innerHTML =
+    '<svg xmlns="http://www.w3.org/2000/svg" width="16" height="24" viewBox="0 0 16 24"><path d="M1 1v18l4-4 4 8 3-1.5-4-8H15Z" fill="black" stroke="white" stroke-width="1.5" stroke-linejoin="round"/></svg>';
+  const agentCursor = document.createElement("div");
+  agentCursor.setAttribute("aria-hidden", "true");
+  agentCursor.setAttribute("data-t3code-recording-agent-cursor", "");
+  agentCursor.style.cssText =
+    "position:fixed;left:0;top:0;width:20px;height:20px;pointer-events:none;z-index:2147483647;display:none;filter:drop-shadow(0 1px 2px #0003);transition:transform 150ms ease-out,opacity 150ms ease-out;";
+  // Match the MousePointer2 icon used by the live AgentBrowserCursor.
+  agentCursor.innerHTML =
+    '<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="var(--recording-cursor-background,white)" stroke="var(--recording-cursor-primary,#2563eb)" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" style="transform:translate(-2px,-2px)"><path d="M4.037 4.688a.495.495 0 0 1 .651-.651l16 6.5a.5.5 0 0 1-.063.947l-6.124 1.58a2 2 0 0 0-1.438 1.435l-1.579 6.126a.5.5 0 0 1-.947.063z"/></svg>';
+  document.documentElement.append(style, cursor, agentCursor);
+  let controller: "human" | "agent" | "none" = "none";
+  let humanPoint: { readonly x: number; readonly y: number } | null = null;
+  const drawHuman = () => {
+    if (!humanPoint) return;
+    cursor.style.transform = `translate(${humanPoint.x}px, ${humanPoint.y}px)`;
+    cursor.style.display = "block";
+  };
+  let agentActive = false;
+  let agentTimer: number | undefined;
+  const setController = (
+    next: typeof controller,
+    point?: { readonly x: number; readonly y: number },
+  ) => {
+    if (point) humanPoint = point;
+    controller = next;
+    if (next === "agent") cursor.style.display = "none";
+    if (next === "human") drawHuman();
+    if (!agentActive) agentCursor.style.opacity = next === "human" ? "0.18" : "0.35";
+  };
+  const setTheme = (
+    theme: Pick<DesktopPreviewAnnotationTheme, "primary" | "background"> | null,
+  ) => {
+    agentCursor.style.setProperty("--recording-cursor-primary", theme?.primary ?? "#2563eb");
+    agentCursor.style.setProperty("--recording-cursor-background", theme?.background ?? "white");
+  };
+  let lastKeyLabel: string | null = null;
+  let pointerHeld = false;
+  let pointerFrame: number | undefined;
+  let pendingPointer: DesktopPreviewRecordingInput | undefined;
+  const cancelPendingPointer = () => {
+    if (pointerFrame !== undefined) window.cancelAnimationFrame(pointerFrame);
+    pointerFrame = undefined;
+    pendingPointer = undefined;
+  };
+  const keyPress = (input: RecordingKeyPress, held = false) => {
+    if (!options.showKeyPresses) return;
+    const label = recordingKeysAreSensitive(document)
+      ? null
+      : recordingKeyLabel(input, /Mac/.test(window.navigator.platform));
+    lastKeyLabel = label;
+    emit({ type: "key", label, held, width: window.innerWidth });
+  };
+  const pointer = (
+    point: { readonly x: number; readonly y: number },
+    phase: "move" | "down" | "up" | "click",
+  ) => {
+    if (!options.showMousePresses || (phase === "move" && !pointerHeld)) return;
+    if (phase === "down") pointerHeld = true;
+    if (phase === "up") pointerHeld = false;
+    const input: DesktopPreviewRecordingInput = {
+      type: "pointer",
+      phase,
+      ...point,
+      width: window.innerWidth,
+      height: window.innerHeight,
+    };
+    if (phase === "move") {
+      pendingPointer = input;
+      pointerFrame ??= window.requestAnimationFrame(() => {
+        pointerFrame = undefined;
+        if (pendingPointer) emit(pendingPointer);
+        pendingPointer = undefined;
+      });
+    } else {
+      cancelPendingPointer();
+      emit(input);
+    }
+  };
+  const move = (
+    point: { readonly x: number; readonly y: number },
+    phase: "move" | "click" = "move",
+  ) => {
+    agentCursor.style.transform = `translate(${point.x}px, ${point.y}px)`;
+    agentCursor.style.display = "block";
+    agentCursor.style.opacity = "1";
+    agentActive = true;
+    window.clearTimeout(agentTimer);
+    agentTimer = window.setTimeout(() => {
+      agentActive = false;
+      agentCursor.style.opacity = controller === "human" ? "0.18" : "0.35";
+    }, 700);
+    pointer(point, phase);
+  };
+  const moveHuman = (point: { readonly x: number; readonly y: number }) => {
+    if (controller === "agent") return;
+    humanPoint = point;
+    drawHuman();
+  };
+  const pointerMove = (event: PointerEvent) => {
+    if (event.pointerType === "touch") return;
+    const point = { x: event.clientX, y: event.clientY };
+    moveHuman(point);
+    pointer(point, "move");
+  };
+  const pointerDown = (event: PointerEvent) => {
+    if (event.pointerType === "touch") return;
+    moveHuman({ x: event.clientX, y: event.clientY });
+    pointer({ x: event.clientX, y: event.clientY }, "down");
+  };
+  const pointerUp = (event: PointerEvent) => {
+    if (event.pointerType !== "touch") pointer({ x: event.clientX, y: event.clientY }, "up");
+  };
+  const keyDown = (event: KeyboardEvent) => {
+    if (event.isComposing || event.repeat) return;
+    keyPress(event, true);
+  };
+  const keyUp = () => {
+    if (!options.showKeyPresses) return;
+    emit({
+      type: "key",
+      label: recordingKeysAreSensitive(document) ? null : lastKeyLabel,
+      held: false,
+      width: window.innerWidth,
+    });
+  };
+  const hide = () => {
+    cursor.style.display = "none";
+    pointerHeld = false;
+    cancelPendingPointer();
+    if (options.showKeyPresses || options.showMousePresses) emit({ type: "clear" });
+  };
+  const leave = (event: PointerEvent) => {
+    if (event.relatedTarget === null) hide();
+  };
+  window.addEventListener("pointermove", pointerMove, true);
+  window.addEventListener("pointerdown", pointerDown, true);
+  window.addEventListener("pointerup", pointerUp, true);
+  window.addEventListener("pointercancel", pointerUp, true);
+  window.addEventListener("keydown", keyDown, true);
+  window.addEventListener("keyup", keyUp, true);
+  window.addEventListener("pointerout", leave, true);
+  window.addEventListener("blur", hide);
+  return {
+    move,
+    keyPress,
+    setController,
+    setTheme,
+    dispose: () => {
+      window.removeEventListener("pointermove", pointerMove, true);
+      window.removeEventListener("pointerdown", pointerDown, true);
+      window.removeEventListener("pointerup", pointerUp, true);
+      window.removeEventListener("pointercancel", pointerUp, true);
+      window.removeEventListener("keydown", keyDown, true);
+      window.removeEventListener("keyup", keyUp, true);
+      window.removeEventListener("pointerout", leave, true);
+      window.removeEventListener("blur", hide);
+      cancelPendingPointer();
+      window.clearTimeout(agentTimer);
+      cursor.remove();
+      agentCursor.remove();
+      style.remove();
+    },
+  };
+}
diff --git a/apps/desktop/src/preview/RecordingInput.test.ts b/apps/desktop/src/preview/RecordingInput.test.ts
new file mode 100644
index 000000000000..062685ec2934
--- /dev/null
+++ b/apps/desktop/src/preview/RecordingInput.test.ts
@@ -0,0 +1,51 @@
+import { describe, expect, it } from "vite-plus/test";
+import { recordingKeyLabel, recordingKeysAreSensitive } from "./RecordingInput.ts";
+
+const key = (
+  value: string,
+  modifiers: Partial<{
+    metaKey: boolean;
+    ctrlKey: boolean;
+    altKey: boolean;
+    shiftKey: boolean;
+  }> = {},
+) => ({
+  key: value,
+  metaKey: false,
+  ctrlKey: false,
+  altKey: false,
+  shiftKey: false,
+  ...modifiers,
+});
+
+describe("recording key labels", () => {
+  it("formats macOS and other-platform shortcuts", () => {
+    expect(recordingKeyLabel(key("c", { metaKey: true }), true)).toBe("⌘C");
+    expect(recordingKeyLabel(key("c", { ctrlKey: true }), false)).toBe("Ctrl + C");
+    expect(recordingKeyLabel(key("Tab", { altKey: true, shiftKey: true }), true)).toBe("⌥⇧⇥");
+  });
+  it("shows held modifiers once and labels navigation keys", () => {
+    expect(recordingKeyLabel(key("Meta", { metaKey: true }), true)).toBe("⌘");
+    expect(recordingKeyLabel(key("Shift", { shiftKey: true }), false)).toBe("Shift");
+    expect(recordingKeyLabel(key("ArrowLeft"), true)).toBe("←");
+    expect(recordingKeyLabel(key(" "), false)).toBe("Space");
+  });
+  it.each(["Dead", "Unidentified", "Process", ""])("excludes composition key %s", (value) => {
+    expect(recordingKeyLabel(key(value), true)).toBeNull();
+  });
+});
+
+describe("recording key privacy", () => {
+  const field = (type: string) => ({ tagName: "INPUT", getAttribute: () => type });
+  const sensitive = (activeElement: unknown) =>
+    recordingKeysAreSensitive({ activeElement } as Document);
+  it("excludes password fields and their shadow-root focus", () => {
+    expect(sensitive(field("password"))).toBe(true);
+    expect(sensitive({ shadowRoot: { activeElement: field("password") } })).toBe(true);
+    expect(sensitive(field("text"))).toBe(false);
+  });
+  it("excludes iframe focus whose field cannot be inspected", () => {
+    expect(sensitive({ tagName: "IFRAME" })).toBe(true);
+    expect(sensitive({ tagName: "SECRET-FIELD" })).toBe(true);
+  });
+});
diff --git a/apps/desktop/src/preview/RecordingInput.ts b/apps/desktop/src/preview/RecordingInput.ts
new file mode 100644
index 000000000000..a69102121d4e
--- /dev/null
+++ b/apps/desktop/src/preview/RecordingInput.ts
@@ -0,0 +1,58 @@
+export interface RecordingInputOptions {
+  readonly showKeyPresses: boolean;
+  readonly showMousePresses: boolean;
+}
+
+export const DEFAULT_RECORDING_INPUT_OPTIONS: RecordingInputOptions = {
+  showKeyPresses: false,
+  showMousePresses: false,
+};
+
+export interface RecordingKeyPress {
+  readonly key: string;
+  readonly metaKey: boolean;
+  readonly ctrlKey: boolean;
+  readonly altKey: boolean;
+  readonly shiftKey: boolean;
+}
+
+/** Formats a single chord without duplicating a modifier pressed on its own. */
+export function recordingKeyLabel(input: RecordingKeyPress, isMac: boolean): string | null {
+  if (["Dead", "Process", "Unidentified", ""].includes(input.key)) return null;
+  const modifiers = [
+    input.ctrlKey || input.key === "Control" ? (isMac ? "⌃" : "Ctrl") : null,
+    input.altKey || input.key === "Alt" ? (isMac ? "⌥" : "Alt") : null,
+    input.shiftKey || input.key === "Shift" ? (isMac ? "⇧" : "Shift") : null,
+    input.metaKey || input.key === "Meta" ? (isMac ? "⌘" : "Win") : null,
+  ].filter((value) => value !== null);
+  const labels: Record<string, string> = {
+    Enter: "↵",
+    Tab: "⇥",
+    Backspace: "⌫",
+    Delete: "⌦",
+    Escape: "Esc",
+    ArrowUp: "↑",
+    ArrowDown: "↓",
+    ArrowLeft: "←",
+    ArrowRight: "→",
+    " ": "Space",
+    Space: "Space",
+  };
+  if (!["Control", "Alt", "Shift", "Meta"].includes(input.key)) {
+    modifiers.push(
+      labels[input.key] ?? (input.key.length === 1 ? input.key.toUpperCase() : input.key),
+    );
+  }
+  return modifiers.join(isMac ? "" : " + ");
+}
+
+/** Unknown iframe or closed-shadow focus is excluded because its field type cannot be checked. */
+export function recordingKeysAreSensitive(document: Document): boolean {
+  let element = document.activeElement;
+  while (element?.shadowRoot?.activeElement) element = element.shadowRoot.activeElement;
+  return (
+    element?.tagName === "IFRAME" ||
+    element?.tagName.includes("-") === true ||
+    element?.getAttribute("type")?.toLowerCase() === "password"
+  );
+}
diff --git a/apps/mobile/modules/t3-review-diff/android/build.gradle b/apps/mobile/modules/t3-review-diff/android/build.gradle
index 22bb070b3b81..d360d1580f1d 100644
--- a/apps/mobile/modules/t3-review-diff/android/build.gradle
+++ b/apps/mobile/modules/t3-review-diff/android/build.gradle
@@ -8,6 +8,10 @@ android {
   namespace 'expo.modules.t3reviewdiff'
   compileSdk rootProject.ext.compileSdkVersion
 
+  testOptions {
+    unitTests.includeAndroidResources = true
+  }
+
   defaultConfig {
     minSdkVersion rootProject.ext.minSdkVersion
     targetSdkVersion rootProject.ext.targetSdkVersion
@@ -16,4 +20,12 @@ android {
 
 dependencies {
   implementation project(':expo-modules-core')
+  testImplementation 'junit:junit:4.13.2'
+  testImplementation 'org.robolectric:robolectric:4.16.1'
+}
+
+tasks.withType(Test).configureEach {
+  javaLauncher = javaToolchains.launcherFor {
+    languageVersion = JavaLanguageVersion.of(21)
+  }
 }
diff --git a/apps/mobile/modules/t3-review-diff/android/src/main/java/expo/modules/t3reviewdiff/ReviewDiffCanvasDrawing.kt b/apps/mobile/modules/t3-review-diff/android/src/main/java/expo/modules/t3reviewdiff/ReviewDiffCanvasDrawing.kt
index 6782e6894d99..80d0410643ff 100644
--- a/apps/mobile/modules/t3-review-diff/android/src/main/java/expo/modules/t3reviewdiff/ReviewDiffCanvasDrawing.kt
+++ b/apps/mobile/modules/t3-review-diff/android/src/main/java/expo/modules/t3reviewdiff/ReviewDiffCanvasDrawing.kt
@@ -9,6 +9,7 @@ import android.graphics.Path
 import android.graphics.RectF
 import android.graphics.Shader
 import android.graphics.Typeface
+import android.text.TextPaint
 import kotlin.math.max
 import kotlin.math.min
 
@@ -177,6 +178,39 @@ internal class ReviewDiffCanvasDrawing(context: Context) {
     textPaint.isUnderlineText = fontStyle and 4 != 0
   }
 
+  var codeLayouts = CodeLayoutCache()
+
+  /** Capture paint on the UI thread; the decode worker owns the new cache until publication. */
+  fun prepareRows(
+    tokens: Map<String, List<DiffToken>>,
+    style: DiffStyle,
+    width: Int
+  ): (List<DiffRow>) -> CodeLayoutCache {
+    configureCodePaint(theme.text, 0, style)
+    val paint = TextPaint(textPaint)
+    val colors = theme
+    val cache = codeLayouts.copyForPreparation()
+    val availableWidth = (
+      width - style.changeBarWidthPx - style.gutterWidthPx -
+        style.codePaddingPx * 2f
+      ).toInt()
+    return { rows ->
+      cache.apply { layout(rows, tokens, paint, style, colors, availableWidth) }
+    }
+  }
+
+  fun codeWrapLayout(
+    rows: List<DiffRow>,
+    tokens: Map<String, List<DiffToken>>,
+    style: DiffStyle,
+    width: Int
+  ): CodeWrapLayout {
+    configureCodePaint(theme.text, 0, style)
+    val availableWidth = width - style.changeBarWidthPx - style.gutterWidthPx -
+      style.codePaddingPx * 2f
+    return codeLayouts.layout(rows, tokens, textPaint, style, theme, availableWidth.toInt())
+  }
+
   fun lineNumberColor(change: String): Int = when (change) {
     "add" -> theme.addText
     "delete" -> theme.deleteText
@@ -198,13 +232,17 @@ internal class ReviewDiffCanvasDrawing(context: Context) {
     }
   }
 
+  /** Highlights word diffs; [top]..[bottom] is the row's first visual line. */
+  @Suppress("LongParameterList")
   fun drawWordDiffRanges(
     canvas: Canvas,
     row: DiffRow,
     codeX: Float,
     top: Int,
-    bottom: Int
+    bottom: Int,
+    lines: CodeLines
   ) {
+    if (lines.nativeLayout != null) return
     if (row.wordDiffRanges.isEmpty() || (row.change != "add" && row.change != "delete")) return
     val color = if (row.change == "add") theme.addBar else theme.deleteBar
     backgroundPaint.color = withAlpha(color, 71)
@@ -213,14 +251,66 @@ internal class ReviewDiffCanvasDrawing(context: Context) {
     val highlightHeight = max(4f * density, min(bottom - top - 4f * density, fontHeight))
     val highlightTop = (top + bottom - highlightHeight) / 2f
     row.wordDiffRanges.forEach { range ->
-      val left = codeX + range.start * characterWidth
-      val right = max(left + 2f * density, codeX + range.end * characterWidth)
-      canvas.drawRoundRect(
-        RectF(left, highlightTop, right, highlightTop + highlightHeight),
-        3f * density,
-        3f * density,
-        backgroundPaint,
-      )
+      // A wrapped row splits the highlight at each visual line boundary.
+      lines.starts.forEachIndexed { line, lineStart ->
+        val start = max(range.start, lineStart)
+        val end = min(range.end, lines.end(line, Int.MAX_VALUE))
+        if (end <= start) return@forEachIndexed
+        val left = codeX + (start - lineStart) * characterWidth
+        val right = max(left + 2f * density, left + (end - start) * characterWidth)
+        val lineTop = highlightTop + line * lines.height
+        canvas.drawRoundRect(
+          RectF(left, lineTop, right, lineTop + highlightHeight),
+          3f * density,
+          3f * density,
+          backgroundPaint,
+        )
+      }
+    }
+  }
+
+  /** Draws a code row's text, or its syntax [tokens] when present, one visual line per start. */
+  @Suppress("LongParameterList")
+  fun drawCode(
+    canvas: Canvas,
+    content: String,
+    tokens: List<DiffToken>?,
+    codeX: Float,
+    baseline: Float,
+    style: DiffStyle,
+    lines: CodeLines
+  ) {
+    val nativeLayout = lines.nativeLayout
+    if (nativeLayout != null) {
+      canvas.save()
+      canvas.translate(codeX, baseline - nativeLayout.getLineBaseline(0))
+      nativeLayout.draw(canvas)
+      canvas.restore()
+      return
+    }
+    val runs = if (tokens.isNullOrEmpty()) listOf(DiffToken(content, null, 0)) else tokens
+    var line = 0
+    var x = codeX
+    var column = 0
+    runs.forEach { run ->
+      configureCodePaint(run.color ?: theme.text, run.fontStyle, style)
+      var start = 0
+      while (start < run.content.length) {
+        while (line + 1 < lines.starts.size && lines.starts[line + 1] <= column + start) {
+          line += 1
+          x = codeX
+        }
+        val end = min(run.content.length, lines.end(line, Int.MAX_VALUE) - column)
+        val lineBaseline = baseline + line * lines.height
+        if (lineBaseline + textPaint.fontMetrics.descent >= canvas.clipBounds.top &&
+          lineBaseline + textPaint.fontMetrics.ascent <= canvas.clipBounds.bottom
+        ) {
+          canvas.drawText(run.content, start, end, x, lineBaseline, textPaint)
+          x += textPaint.measureText(run.content, start, end)
+        }
+        start = end
+      }
+      column += run.content.length
     }
   }
 
diff --git a/apps/mobile/modules/t3-review-diff/android/src/main/java/expo/modules/t3reviewdiff/ReviewDiffCodeLayout.kt b/apps/mobile/modules/t3-review-diff/android/src/main/java/expo/modules/t3reviewdiff/ReviewDiffCodeLayout.kt
new file mode 100644
index 000000000000..dc77a8467033
--- /dev/null
+++ b/apps/mobile/modules/t3-review-diff/android/src/main/java/expo/modules/t3reviewdiff/ReviewDiffCodeLayout.kt
@@ -0,0 +1,169 @@
+package expo.modules.t3reviewdiff
+
+import android.graphics.Color
+import android.graphics.Paint
+import android.graphics.Typeface
+import android.text.Layout
+import android.text.SpannableString
+import android.text.Spanned
+import android.text.StaticLayout
+import android.text.TextPaint
+import android.text.style.BackgroundColorSpan
+import android.text.style.ForegroundColorSpan
+import android.text.style.StyleSpan
+import android.text.style.UnderlineSpan
+import kotlin.math.ceil
+import kotlin.math.max
+
+/** Text layout is independent of comment heights and vertical row offsets. */
+internal class CodeLines(
+  val starts: IntArray,
+  val height: Int,
+  val nativeLayout: StaticLayout? = null
+) {
+  fun end(line: Int, length: Int): Int = if (line + 1 < starts.size) starts[line + 1] else length
+
+  fun firstHeight(base: Int): Int = max(base, nativeLayout?.getLineBottom(0) ?: 0)
+
+  fun baseline(top: Int, bottom: Int, paint: Paint): Float = nativeLayout?.let {
+    top + (bottom - top - it.getLineBottom(0)) / 2f + it.getLineBaseline(0)
+  } ?: ((top + bottom - paint.fontMetrics.ascent - paint.fontMetrics.descent) / 2f)
+
+  val extraHeight: Int
+    get() = nativeLayout?.let { it.height - it.getLineBottom(0) } ?: ((starts.size - 1) * height)
+}
+
+internal class CodeWrapLayout(
+  val enabled: Boolean,
+  private val linesByRowId: Map<String, CodeLines>
+) {
+  fun lines(rowId: String): CodeLines = linesByRowId[rowId] ?: SINGLE_LINE
+  fun extraHeight(rowId: String): Int = lines(rowId).extraHeight
+  fun rowHeight(rowId: String, base: Int): Int = lines(rowId).let {
+    it.firstHeight(base) +
+      it.extraHeight
+  }
+
+  companion object {
+    private val SINGLE_LINE = CodeLines(intArrayOf(0), 0)
+    val NONE = CodeWrapLayout(false, emptyMap())
+  }
+}
+
+/** ASCII is fixed-pitch; other text needs the same shaping for measurement and drawing. */
+internal fun createCodeLines(text: CharSequence, paint: TextPaint, width: Int): CodeLines {
+  val characterWidth = paint.measureText("M")
+  val lineHeight = ceil(paint.fontMetrics.run { descent - ascent }).toInt()
+  if (text.all { it in ' '..'~' }) {
+    val columns = max(1, (width / characterWidth).toInt())
+    return CodeLines(
+      IntArray(max(1, (text.length + columns - 1) / columns)) {
+        it * columns
+      },
+      lineHeight
+    )
+  }
+  val layout = StaticLayout.Builder.obtain(text, 0, text.length, paint, max(1, width))
+    .setAlignment(Layout.Alignment.ALIGN_NORMAL)
+    .setIncludePad(false)
+    .setBreakStrategy(Layout.BREAK_STRATEGY_SIMPLE)
+    .setHyphenationFrequency(Layout.HYPHENATION_FREQUENCY_NONE)
+    .build()
+  return CodeLines(IntArray(layout.lineCount) { layout.getLineStart(it) }, lineHeight, layout)
+}
+
+internal class CodeLayoutCache {
+  private data class Entry(val row: DiffRow, val tokens: List<DiffToken>?, val lines: CodeLines)
+  private var entries = emptyMap<String, Entry>()
+  private var previousStyle: DiffStyle? = null
+  private var previousTheme: DiffTheme? = null
+  private var previousWidth = 0
+
+  /** Entries are immutable; a worker can reuse them without changing the displayed cache. */
+  fun copyForPreparation(): CodeLayoutCache = CodeLayoutCache().also {
+    it.entries = entries
+    it.previousStyle = previousStyle
+    it.previousTheme = previousTheme
+    it.previousWidth = previousWidth
+  }
+
+  @Suppress("LongParameterList")
+  fun layout(
+    rows: List<DiffRow>,
+    tokens: Map<String, List<DiffToken>>,
+    paint: Paint,
+    style: DiffStyle,
+    theme: DiffTheme,
+    width: Int
+  ): CodeWrapLayout {
+    if (!style.wordWrap || width < paint.measureText("M")) {
+      entries = emptyMap()
+      return CodeWrapLayout.NONE
+    }
+    if (previousStyle != style || previousTheme != theme || previousWidth != width) {
+      entries = emptyMap()
+      previousStyle = style
+      previousTheme = theme
+      previousWidth = width
+    }
+    val next = HashMap<String, Entry>()
+    val layouts = HashMap<String, CodeLines>()
+    for (row in rows) {
+      if (row.kind != "line") continue
+      val rowTokens = tokens[row.id]
+      val cached = entries[row.id]
+      val entry = if (cached?.row == row && cached.tokens == rowTokens) {
+        cached
+      } else {
+        val text = styledCode(row, rowTokens, theme)
+        Entry(row, rowTokens, createCodeLines(text, TextPaint(paint), width))
+      }
+      next[row.id] = entry
+      layouts[row.id] = entry.lines
+    }
+    entries = next
+    return CodeWrapLayout(true, layouts)
+  }
+
+  private fun styledCode(row: DiffRow, tokens: List<DiffToken>?, theme: DiffTheme): CharSequence {
+    // The ASCII path uses the existing token drawing and rounded highlight rectangles.
+    if (row.content.all { it in ' '..'~' }) return row.content
+    val text = SpannableString(row.content)
+    var offset = 0
+    for (token in tokens.orEmpty()) {
+      val end = (offset + token.content.length).coerceAtMost(text.length)
+      if (end > offset) {
+        token.color?.let {
+          text.setSpan(ForegroundColorSpan(it), offset, end, Spanned.SPAN_EXCLUSIVE_EXCLUSIVE)
+        }
+        val fontStyle = (if (token.fontStyle and 2 != 0) Typeface.BOLD else 0) or
+          (if (token.fontStyle and 1 != 0) Typeface.ITALIC else 0)
+        if (fontStyle !=
+          0
+        ) {
+          text.setSpan(StyleSpan(fontStyle), offset, end, Spanned.SPAN_EXCLUSIVE_EXCLUSIVE)
+        }
+        if (token.fontStyle and 4 !=
+          0
+        ) {
+          text.setSpan(UnderlineSpan(), offset, end, Spanned.SPAN_EXCLUSIVE_EXCLUSIVE)
+        }
+      }
+      offset = end
+    }
+    if (row.change == "add" || row.change == "delete") {
+      val bar = if (row.change == "add") theme.addBar else theme.deleteBar
+      val color = Color.argb(71, Color.red(bar), Color.green(bar), Color.blue(bar))
+      for (range in row.wordDiffRanges) {
+        val start = range.start.coerceIn(0, text.length)
+        val end = range.end.coerceIn(start, text.length)
+        if (end >
+          start
+        ) {
+          text.setSpan(BackgroundColorSpan(color), start, end, Spanned.SPAN_EXCLUSIVE_EXCLUSIVE)
+        }
+      }
+    }
+    return text
+  }
+}
diff --git a/apps/mobile/modules/t3-review-diff/android/src/main/java/expo/modules/t3reviewdiff/T3ReviewDiffView.kt b/apps/mobile/modules/t3-review-diff/android/src/main/java/expo/modules/t3reviewdiff/T3ReviewDiffView.kt
index 97e9f696db90..37fee1cb3613 100644
--- a/apps/mobile/modules/t3-review-diff/android/src/main/java/expo/modules/t3reviewdiff/T3ReviewDiffView.kt
+++ b/apps/mobile/modules/t3-review-diff/android/src/main/java/expo/modules/t3reviewdiff/T3ReviewDiffView.kt
@@ -143,10 +143,13 @@ class T3ReviewDiffView(context: Context, appContext: AppContext) : ExpoView(cont
   fun setRowsJson(value: String) {
     rowsDecodeGeneration += 1
     val generation = rowsDecodeGeneration
+    val prepareLayout = canvasView.prepareRows()
     payloadDecodeExecutor.execute {
       val decodedRows = parseRows(value)
+      val codeLayouts = prepareLayout(decodedRows)
       post {
         if (generation != rowsDecodeGeneration) return@post
+        canvasView.useCodeLayouts(codeLayouts)
         rows = decodedRows
         lastVisibleFileId = null
         rebuildVisibleRows()
@@ -460,7 +463,7 @@ internal data class DiffWordDiffRange(
   val end: Int
 )
 
-private data class DiffToken(
+internal data class DiffToken(
   val content: String,
   val color: Int?,
   val fontStyle: Int
@@ -543,6 +546,7 @@ internal data class DiffTheme(
 }
 
 internal data class DiffStyle(
+  val wordWrap: Boolean,
   val rowHeightPx: Float,
   val gutterWidthPx: Float,
   val codePaddingPx: Float,
@@ -564,6 +568,7 @@ internal data class DiffStyle(
 ) {
   companion object {
     fun defaults(density: Float): DiffStyle = DiffStyle(
+      wordWrap = false,
       rowHeightPx = 20f * density,
       gutterWidthPx = 72f * density,
       codePaddingPx = 10f * density,
@@ -587,6 +592,7 @@ internal data class DiffStyle(
     fun fromJson(value: String, fallback: DiffStyle, density: Float): DiffStyle = try {
       val json = JSONObject(value)
       DiffStyle(
+        wordWrap = json.optBoolean("wordWrap", fallback.wordWrap),
         rowHeightPx = json.floatDp("rowHeight", fallback.rowHeightPx, density),
         gutterWidthPx = json.floatDp("gutterWidth", fallback.gutterWidthPx, density),
         codePaddingPx = json.floatDp("codePadding", fallback.codePaddingPx, density),
@@ -684,6 +690,8 @@ private class DiffCanvasView(context: Context) : View(context) {
     },
   )
   private var rowOffsets = intArrayOf(0)
+
+  private var codeWrap = CodeWrapLayout.NONE
   private var verticalOffset = 0
   private var horizontalOffset = 0
   private val headerPathOffsetsByFileId = mutableMapOf<String, Int>()
@@ -699,6 +707,7 @@ private class DiffCanvasView(context: Context) : View(context) {
   var tokensByRowId: Map<String, List<DiffToken>> = emptyMap()
     set(value) {
       field = value
+      if (style.wordWrap) rebuildOffsets()
       invalidate()
     }
   var viewedFileIds: Set<String> = emptySet()
@@ -725,6 +734,7 @@ private class DiffCanvasView(context: Context) : View(context) {
     set(value) {
       field = value
       drawing.theme = value
+      if (style.wordWrap) rebuildOffsets()
       invalidate()
     }
   var style: DiffStyle = DiffStyle.defaults(density)
@@ -742,6 +752,11 @@ private class DiffCanvasView(context: Context) : View(context) {
   var onRowTap: ((DiffRow, String, RowTapTarget) -> Unit)? = null
   var onVisibleRowsChanged: ((Int, Int) -> Unit)? = null
 
+  fun prepareRows() = drawing.prepareRows(tokensByRowId, style, width)
+  fun useCodeLayouts(layouts: CodeLayoutCache) {
+    drawing.codeLayouts = layouts
+  }
+
   override fun onMeasure(widthMeasureSpec: Int, heightMeasureSpec: Int) {
     setMeasuredDimension(
       MeasureSpec.getSize(widthMeasureSpec),
@@ -751,6 +766,8 @@ private class DiffCanvasView(context: Context) : View(context) {
 
   override fun onSizeChanged(width: Int, height: Int, oldWidth: Int, oldHeight: Int) {
     super.onSizeChanged(width, height, oldWidth, oldHeight)
+    // Wrapped rows take their height from the width, so a new width is a new layout.
+    if (style.wordWrap && width != oldWidth) layoutRows()
     setVerticalOffset(verticalOffset)
     setHorizontalOffset(horizontalOffset)
     clampHeaderPathOffsets()
@@ -818,7 +835,8 @@ private class DiffCanvasView(context: Context) : View(context) {
 
   fun horizontalOffset(): Int = horizontalOffset
 
-  fun maxHorizontalOffset(): Int = max(0, contentWidthPx - width)
+  fun maxHorizontalOffset(): Int =
+    if (codeWrap.enabled) 0 else max(0, contentWidthPx - width)
 
   fun maxHorizontalOffset(target: HorizontalPanTarget): Int =
     if (target.kind == HorizontalPanKind.FILE_HEADER_PATH) {
@@ -844,14 +862,20 @@ private class DiffCanvasView(context: Context) : View(context) {
   }
 
   private fun rebuildOffsets() {
+    layoutRows()
+    requestLayout()
+    invalidate()
+  }
+
+  private fun layoutRows() {
+    codeWrap = drawing.codeWrapLayout(rows, tokensByRowId, style, width)
     rowOffsets = IntArray(rows.size + 1)
     rows.forEachIndexed { index, row ->
       rowOffsets[index + 1] = rowOffsets[index] + rowHeight(row)
     }
     setVerticalOffset(verticalOffset)
+    setHorizontalOffset(horizontalOffset)
     clampHeaderPathOffsets()
-    requestLayout()
-    invalidate()
   }
 
   private fun rowHeight(row: DiffRow): Int = when (row.kind) {
@@ -862,6 +886,7 @@ private class DiffCanvasView(context: Context) : View(context) {
     } else {
       (124 * density).toInt()
     }
+    "line" -> codeWrap.rowHeight(row.id, style.rowHeightPx.toInt())
     else -> style.rowHeightPx.toInt()
   }.coerceAtLeast(1)
 
@@ -1191,23 +1216,17 @@ private class DiffCanvasView(context: Context) : View(context) {
       )
     }
 
-    val tokens = tokensByRowId[row.id]
+    // Wrapped rows keep the line number and first code line in the first row-height band.
+    val lines = codeWrap.lines(row.id)
+    val firstLineBottom = top + lines.firstHeight(style.rowHeightPx.toInt())
     drawScrollableCode(canvas, top, bottom) { codeX ->
       drawing.configureCodePaint(theme.text, 0, style)
-      drawing.drawWordDiffRanges(canvas, row, codeX, top, bottom)
-      if (tokens.isNullOrEmpty()) {
-        canvas.drawText(row.content, codeX, centeredBaseline(top, bottom, textPaint), textPaint)
-      } else {
-        var x = codeX
-        tokens.forEach { token ->
-          drawing.configureCodePaint(token.color ?: theme.text, token.fontStyle, style)
-          canvas.drawText(token.content, x, centeredBaseline(top, bottom, textPaint), textPaint)
-          x += textPaint.measureText(token.content)
-        }
-      }
+      drawing.drawWordDiffRanges(canvas, row, codeX, top, firstLineBottom, lines)
+      val baseline = lines.baseline(top, firstLineBottom, textPaint)
+      drawing.drawCode(canvas, row.content, tokensByRowId[row.id], codeX, baseline, style, lines)
     }
 
-    drawLineNumber(canvas, row, top, bottom)
+    drawLineNumber(canvas, row, top, firstLineBottom)
   }
 
   private fun drawLineNumber(canvas: Canvas, row: DiffRow, top: Int, bottom: Int) {
diff --git a/apps/mobile/modules/t3-review-diff/android/src/test/java/expo/modules/t3reviewdiff/ReviewDiffCodeLayoutTest.kt b/apps/mobile/modules/t3-review-diff/android/src/test/java/expo/modules/t3reviewdiff/ReviewDiffCodeLayoutTest.kt
new file mode 100644
index 000000000000..1f4234b7175f
--- /dev/null
+++ b/apps/mobile/modules/t3-review-diff/android/src/test/java/expo/modules/t3reviewdiff/ReviewDiffCodeLayoutTest.kt
@@ -0,0 +1,150 @@
+package expo.modules.t3reviewdiff
+
+import android.graphics.Bitmap
+import android.graphics.Canvas
+import android.graphics.Color
+import android.graphics.Typeface
+import android.text.Spanned
+import android.text.TextPaint
+import android.text.style.BackgroundColorSpan
+import org.junit.Assert.assertEquals
+import org.junit.Assert.assertNotSame
+import org.junit.Assert.assertSame
+import org.junit.Assert.assertTrue
+import org.junit.Test
+import org.junit.runner.RunWith
+import org.robolectric.RobolectricTestRunner
+import org.robolectric.annotation.Config
+import org.robolectric.annotation.GraphicsMode
+
+@RunWith(RobolectricTestRunner::class)
+@Config(sdk = [35], manifest = Config.NONE)
+@GraphicsMode(GraphicsMode.Mode.NATIVE)
+class ReviewDiffCodeLayoutTest {
+  private val paint = TextPaint().apply {
+    color = Color.WHITE
+    textSize = 24f
+    typeface = Typeface.MONOSPACE
+  }
+
+  @Test
+  fun unicodeAndTabsFitWithoutSplittingClusters() {
+    val fixtures = listOf("漢字表示", "e\u0301", "👨‍👩‍👧‍👦", "مرحبا بالعالم ", "\tvalue ")
+    for (fixture in fixtures) {
+      val text = fixture.repeat(40)
+      for (width in listOf(180, 280, 420)) {
+        val layout = requireNotNull(createCodeLines(text, paint, width).nativeLayout)
+        assertInkFits(layout, width, fixture)
+        assertLinesFit(layout, fixture, width)
+      }
+    }
+  }
+
+  private fun assertLinesFit(layout: android.text.StaticLayout, fixture: String, width: Int) {
+    val text = layout.text
+    for (line in 0 until layout.lineCount) {
+      if (!fixture.contains('\t')) {
+        assertTrue("$fixture line $line at $width", layout.getLineMax(line) <= width + 1)
+      }
+      val start = layout.getLineStart(line)
+      assertTrue(start == 0 || !Character.isLowSurrogate(text[start]))
+      if (fixture == "👨‍👩‍👧‍👦" || fixture == "e\u0301") {
+        assertEquals(0, start % fixture.length)
+      }
+    }
+  }
+
+  private fun assertInkFits(layout: android.text.StaticLayout, width: Int, fixture: String) {
+    val bitmap = Bitmap.createBitmap(width + 40, layout.height, Bitmap.Config.ARGB_8888)
+    layout.draw(Canvas(bitmap))
+    for (x in width + 1 until bitmap.width) {
+      for (y in 0 until bitmap.height) {
+        assertEquals("$fixture ink outside width $width", 0, Color.alpha(bitmap.getPixel(x, y)))
+      }
+    }
+    bitmap.recycle()
+  }
+
+  @Test
+  fun asciiSegmentsCoverTheWholeLineAndFit() {
+    val text = "const value = 123; ".repeat(100)
+    val lines = createCodeLines(text, paint, 280)
+    val pieces = lines.starts.indices.map {
+      text.substring(lines.starts[it], lines.end(it, text.length))
+    }
+    assertEquals(text, pieces.joinToString(""))
+    assertTrue(pieces.all { paint.measureText(it) <= 280 })
+  }
+
+  @Test
+  fun changingCommentHeightReusesCodeButWidthAndContentInvalidateIt() {
+    val cache = CodeLayoutCache()
+    val row = row("漢字".repeat(100))
+    val comment = row.copy(kind = "comment", id = "comment", content = "", commentText = "Before")
+    val style = DiffStyle.defaults(1f).copy(wordWrap = true)
+    val theme = DiffTheme.fallback("light")
+    val first = cache.layout(
+      listOf(row, comment),
+      emptyMap(),
+      paint,
+      style,
+      theme,
+      280
+    ).lines(row.id)
+    val second = cache.layout(
+      listOf(row, comment.copy(commentText = "After")),
+      emptyMap(),
+      paint,
+      style,
+      theme,
+      280,
+    ).lines(row.id)
+    assertSame(first, second)
+    val narrow = cache.layout(listOf(row), emptyMap(), paint, style, theme, 180).lines(row.id)
+    assertNotSame(first, narrow)
+    assertTrue(narrow.extraHeight > first.extraHeight)
+    val edited = cache.layout(
+      listOf(row.copy(content = "短い")),
+      emptyMap(),
+      paint,
+      style,
+      theme,
+      180
+    ).lines(row.id)
+    assertTrue(edited.extraHeight < narrow.extraHeight)
+    assertEquals(
+      0,
+      cache.layout(
+        listOf(row),
+        emptyMap(),
+        paint,
+        style.copy(wordWrap = false),
+        theme,
+        180
+      ).extraHeight(row.id)
+    )
+  }
+
+  @Test
+  fun highlightsUseNativeTextRangesAndSurviveSyntaxArrival() {
+    val cache = CodeLayoutCache()
+    val row = row("漢字".repeat(30)).copy(wordDiffRanges = listOf(DiffWordDiffRange(3, 21)))
+    val style = DiffStyle.defaults(1f).copy(wordWrap = true)
+    val theme = DiffTheme.fallback("light")
+    val initial = cache.layout(listOf(row), emptyMap(), paint, style, theme, 180).lines(row.id)
+    val tokens = mapOf(row.id to listOf(DiffToken(row.content, 0xff008800.toInt(), 2)))
+    val highlighted = cache.layout(listOf(row), tokens, paint, style, theme, 180).lines(row.id)
+    assertNotSame(initial, highlighted)
+    val text = requireNotNull(highlighted.nativeLayout).text as Spanned
+    val span = text.getSpans(0, text.length, BackgroundColorSpan::class.java).single()
+    assertEquals(3, text.getSpanStart(span))
+    assertEquals(21, text.getSpanEnd(span))
+  }
+
+  private fun row(content: String) = DiffRow(
+    kind = "line", id = "line", fileId = "file", filePath = "test.ts", previousPath = null,
+    changeType = "modified", additions = 1, deletions = 0, text = "", content = content,
+    change = "add", oldLineNumber = null, newLineNumber = 1, wordDiffRanges = emptyList(),
+    commentText = "", commentRangeLabel = "", commentSectionTitle = "",
+  )
+}
diff --git a/apps/mobile/modules/t3-review-diff/ios/ReviewDiffCodeLayout.swift b/apps/mobile/modules/t3-review-diff/ios/ReviewDiffCodeLayout.swift
new file mode 100644
index 000000000000..1d8b3e8ea8d9
--- /dev/null
+++ b/apps/mobile/modules/t3-review-diff/ios/ReviewDiffCodeLayout.swift
@@ -0,0 +1,123 @@
+import UIKit
+
+/// ASCII uses fixed-pitch columns. TextKit handles shaping, tabs, and Unicode highlights.
+final class ReviewDiffCodeLayout: NSObject {
+  // Measurement reuses one engine; only recently drawn rows retain a full TextKit layout.
+  private static var measurer: ReviewDiffTextLayout {
+    let key = "T3ReviewDiff.textMeasurer"
+    if let layout = Thread.current.threadDictionary[key] as? ReviewDiffTextLayout { return layout }
+    let layout = ReviewDiffTextLayout()
+    Thread.current.threadDictionary[key] = layout
+    return layout
+  }
+  private static let drawnLayouts: NSCache<ReviewDiffCodeLayout, ReviewDiffTextLayout> = {
+    let cache = NSCache<ReviewDiffCodeLayout, ReviewDiffTextLayout>()
+    cache.countLimit = 128
+    return cache
+  }()
+  let text: String
+  let starts: [Int]
+  let lineHeight: CGFloat
+  let firstLineHeight: CGFloat
+  let extraHeight: CGFloat
+  private let font: UIFont
+  private let width: CGFloat
+  private let characterWidth: CGFloat
+  let usesNativeLayout: Bool
+
+  init(text: String, font: UIFont, width: CGFloat, characterWidth: CGFloat) {
+    self.text = text
+    self.font = font
+    self.width = width
+    self.characterWidth = characterWidth
+    lineHeight = ceil(font.lineHeight)
+    if text.utf8.allSatisfy({ $0 >= 32 && $0 <= 126 }) {
+      let columns = max(1, Int(width / characterWidth))
+      starts = Array(stride(from: 0, to: max(1, text.utf8.count), by: columns))
+      firstLineHeight = font.lineHeight
+      extraHeight = CGFloat(starts.count - 1) * lineHeight
+      usesNativeLayout = false
+    } else {
+      let layout = Self.measurer
+      layout.configure(text: text, font: font, width: width, characterWidth: characterWidth)
+      let manager = layout.manager
+      let container = layout.container
+      usesNativeLayout = true
+      starts = [0]
+      firstLineHeight = manager.numberOfGlyphs > 0
+        ? manager.lineFragmentRect(forGlyphAt: 0, effectiveRange: nil).height : font.lineHeight
+      extraHeight = max(0, manager.usedRect(for: container).height - firstLineHeight)
+    }
+  }
+
+  private func nativeLayout() -> ReviewDiffTextLayout {
+    if let cached = Self.drawnLayouts.object(forKey: self) { return cached }
+    let layout = ReviewDiffTextLayout()
+    layout.configure(text: text, font: font, width: width, characterWidth: characterWidth)
+    Self.drawnLayouts.setObject(layout, forKey: self)
+    return layout
+  }
+
+  /// Only colors change when syntax tokens arrive; the measured text and font stay intact.
+  func decorate(text: NSAttributedString, highlights: [NSRange], color: UIColor, version: Int) {
+    guard usesNativeLayout else { return }
+    let layout = nativeLayout()
+    guard layout.decorationVersion != version else { return }
+    let storage = layout.storage
+    let fullRange = NSRange(location: 0, length: storage.length)
+    storage.beginEditing()
+    storage.removeAttribute(.foregroundColor, range: fullRange)
+    storage.removeAttribute(.backgroundColor, range: fullRange)
+    text.enumerateAttribute(.foregroundColor, in: NSRange(location: 0, length: text.length)) { value, range, _ in
+      let intersection = NSIntersectionRange(range, fullRange)
+      if let value, intersection.length > 0 {
+        storage.addAttribute(.foregroundColor, value: value, range: intersection)
+      }
+    }
+    for range in highlights {
+      let intersection = NSIntersectionRange(range, fullRange)
+      if intersection.length > 0 {
+        storage.addAttribute(.backgroundColor, value: color, range: intersection)
+      }
+    }
+    storage.endEditing()
+    layout.decorationVersion = version
+  }
+
+  func draw(at origin: CGPoint, clip: CGRect) {
+    guard usesNativeLayout else { return }
+    let layout = nativeLayout()
+    let manager = layout.manager
+    let container = layout.container
+    let visible = clip.offsetBy(dx: -origin.x, dy: -origin.y)
+    let range = manager.glyphRange(forBoundingRect: visible, in: container)
+    manager.drawBackground(forGlyphRange: range, at: origin)
+    manager.drawGlyphs(forGlyphRange: range, at: origin)
+  }
+}
+
+private final class ReviewDiffTextLayout {
+  let storage = NSTextStorage()
+  let manager = NSLayoutManager()
+  let container = NSTextContainer(size: .zero)
+  var decorationVersion = -1
+
+  init() {
+    container.lineFragmentPadding = 0
+    container.lineBreakMode = .byCharWrapping
+    manager.addTextContainer(container)
+    storage.addLayoutManager(manager)
+  }
+
+  func configure(text: String, font: UIFont, width: CGFloat, characterWidth: CGFloat) {
+    let paragraph = NSMutableParagraphStyle()
+    paragraph.lineBreakMode = .byCharWrapping
+    paragraph.tabStops = []
+    paragraph.defaultTabInterval = characterWidth * 4
+    container.size = CGSize(width: max(1, width), height: .greatestFiniteMagnitude)
+    storage.setAttributedString(NSAttributedString(string: text, attributes: [
+      .font: font, .ligature: 0, .paragraphStyle: paragraph,
+    ]))
+    manager.ensureLayout(for: container)
+  }
+}
diff --git a/apps/mobile/modules/t3-review-diff/ios/T3ReviewDiffView.swift b/apps/mobile/modules/t3-review-diff/ios/T3ReviewDiffView.swift
index 74111988f150..e2400e0a9393 100644
--- a/apps/mobile/modules/t3-review-diff/ios/T3ReviewDiffView.swift
+++ b/apps/mobile/modules/t3-review-diff/ios/T3ReviewDiffView.swift
@@ -137,6 +137,7 @@ private struct ReviewDiffNativeTheme {
 }
 
 private struct ReviewDiffNativeStylePayload: Decodable {
+  let wordWrap: Bool?
   let rowHeight: Double?
   let contentWidth: Double?
   let changeBarWidth: Double?
@@ -170,6 +171,7 @@ private struct ReviewDiffNativeStylePayload: Decodable {
 }
 
 private struct ReviewDiffNativeStyle {
+  let wordWrap: Bool
   let rowHeight: CGFloat
   let contentWidth: CGFloat
   let changeBarWidth: CGFloat
@@ -203,6 +205,7 @@ private struct ReviewDiffNativeStyle {
 
   static func resolve(_ payload: ReviewDiffNativeStylePayload?) -> ReviewDiffNativeStyle {
     ReviewDiffNativeStyle(
+      wordWrap: payload?.wordWrap ?? false,
       rowHeight: metric(payload?.rowHeight, fallback: 24),
       contentWidth: metric(payload?.contentWidth, fallback: 2800),
       changeBarWidth: nonNegativeMetric(payload?.changeBarWidth, fallback: 4),
@@ -277,6 +280,7 @@ private struct ReviewDiffNativeStyle {
 
   func applyingOverrides(rowHeight: CGFloat?, contentWidth: CGFloat?) -> ReviewDiffNativeStyle {
     ReviewDiffNativeStyle(
+      wordWrap: wordWrap,
       rowHeight: rowHeight ?? self.rowHeight,
       contentWidth: contentWidth ?? self.contentWidth,
       changeBarWidth: changeBarWidth,
@@ -434,16 +438,21 @@ public final class T3ReviewDiffView: ExpoView, UIScrollViewDelegate {
           guard let self, generation == self.rowsDecodeGeneration else {
             return
           }
-          self.rows = decodedRows
-          self.contentView.rows = decodedRows
-          self.hasAppliedInitialRowIndex = false
-          self.lastVisibleFileId = nil
-          self.emitDebug("rows-decoded", [
-            "rows": decodedRows.count,
-            "firstKind": decodedRows.first?.kind ?? "none",
-          ])
-          self.updateContentMetrics()
-          self.applyPendingScrollIfNeeded()
+          self.contentView.prepareRows(decodedRows, on: self.payloadDecodeQueue, isCurrent: { [weak self] in
+            generation == self?.rowsDecodeGeneration
+          }, completion: { [weak self] in
+            guard let self, generation == self.rowsDecodeGeneration else { return }
+            self.rows = decodedRows
+            self.contentView.rows = decodedRows
+            self.hasAppliedInitialRowIndex = false
+            self.lastVisibleFileId = nil
+            self.emitDebug("rows-decoded", [
+              "rows": decodedRows.count,
+              "firstKind": decodedRows.first?.kind ?? "none",
+            ])
+            self.updateContentMetrics()
+            self.applyPendingScrollIfNeeded()
+          })
         }
       } catch {
         let message = error.localizedDescription
@@ -652,6 +661,7 @@ public final class T3ReviewDiffView: ExpoView, UIScrollViewDelegate {
 
   private func updateContentMetrics() {
     let style = contentView.style
+    contentView.viewportWidth = bounds.width
     let height = max(bounds.height, contentView.contentHeight)
     let width = bounds.width
     scrollView.contentSize = CGSize(width: bounds.width, height: height)
@@ -661,7 +671,6 @@ public final class T3ReviewDiffView: ExpoView, UIScrollViewDelegate {
       width: max(width, 1),
       height: max(bounds.height, 1)
     )
-    contentView.viewportWidth = bounds.width
     contentView.verticalOffset = scrollView.contentOffset.y
     contentView.invalidateVisibleViewport()
     contentView.setNeedsDisplay()
@@ -929,6 +938,7 @@ private final class ReviewDiffContentView: UIView, UIGestureRecognizerDelegate {
       headerPathOffsetsByFileId.removeAll()
       activePanFileId = nil
       activePanKind = nil
+      codeDecorationVersion += 1
       tokenAttributedStringsByRowId.removeAll()
       rebuildRowLayout()
       setNeedsDisplayForVisibleBounds()
@@ -936,6 +946,7 @@ private final class ReviewDiffContentView: UIView, UIGestureRecognizerDelegate {
   }
   var tokensByRowId: [String: [ReviewDiffNativeToken]] = [:] {
     didSet {
+      codeDecorationVersion += 1
       tokenAttributedStringsByRowId.removeAll()
       clampHorizontalOffsets()
       setNeedsDisplayForVisibleBounds()
@@ -976,6 +987,7 @@ private final class ReviewDiffContentView: UIView, UIGestureRecognizerDelegate {
   }
   var style = ReviewDiffNativeStyle.resolve(nil) {
     didSet {
+      codeDecorationVersion += 1
       tokenAttributedStringsByRowId.removeAll()
       rebuildRowLayout()
       clampHorizontalOffsets()
@@ -984,6 +996,10 @@ private final class ReviewDiffContentView: UIView, UIGestureRecognizerDelegate {
   }
   var viewportWidth: CGFloat = 0 {
     didSet {
+      // Wrapped rows take their height from the width, so a new width is a new layout.
+      if style.wordWrap, viewportWidth != oldValue {
+        rebuildRowLayout()
+      }
       clampHorizontalOffsets()
       setNeedsDisplayForVisibleBounds()
     }
@@ -992,6 +1008,7 @@ private final class ReviewDiffContentView: UIView, UIGestureRecognizerDelegate {
   var theme = ReviewDiffNativeTheme.resolve("light") {
     didSet {
       tokenColorsByHex.removeAll()
+      codeDecorationVersion += 1
       tokenAttributedStringsByRowId.removeAll()
       setNeedsDisplayForVisibleBounds()
     }
@@ -1004,6 +1021,13 @@ private final class ReviewDiffContentView: UIView, UIGestureRecognizerDelegate {
   private var tokenColorsByHex: [String: UIColor] = [:]
   private var tokenAttributedStringsByRowId: [String: NSAttributedString] = [:]
   private var codeCharacterWidth: CGFloat = 8
+  /// Columns per visual line while word wrap is on; nil while code rows pan horizontally.
+  private var codeWrapColumns: Int?
+  /// Text geometry survives comment height changes; width, font, and content invalidate it.
+  private var codeLayoutsByRowId: [String: ReviewDiffCodeLayout] = [:]
+  private var codeLayoutWidth: CGFloat = 0
+  private var codeLayoutFont: UIFont?
+  private var codeDecorationVersion = 0
   private var panStartHorizontalOffset: CGFloat = 0
   private var activePanFileId: String?
   private var activePanKind: ReviewDiffHorizontalPanKind?
@@ -1029,6 +1053,7 @@ private final class ReviewDiffContentView: UIView, UIGestureRecognizerDelegate {
     stickyWidth + style.codePadding
   }
 
+  /// Height before word wrap. Laid-out rows use height(at:), which includes wrapped lines.
   private func height(for row: ReviewDiffNativeRow) -> CGFloat {
     if row.kind == "file" {
       return style.fileHeaderHeight
@@ -1045,6 +1070,16 @@ private final class ReviewDiffContentView: UIView, UIGestureRecognizerDelegate {
     return style.rowHeight
   }
 
+  /// Laid-out height, including wrapped lines. Requires a layout built from the current rows.
+  private func height(at index: Int) -> CGFloat {
+    let nextOffset = index + 1 < rowOffsets.count ? rowOffsets[index + 1] : contentHeight
+    return nextOffset - rowOffsets[index]
+  }
+
+  private var codeWrapLineHeight: CGFloat {
+    ceil(codeFont.lineHeight)
+  }
+
   func frameForRow(at index: Int) -> CGRect? {
     guard rows.indices.contains(index), rowOffsets.indices.contains(index) else {
       return nil
@@ -1054,43 +1089,110 @@ private final class ReviewDiffContentView: UIView, UIGestureRecognizerDelegate {
       x: 0,
       y: rowOffsets[index],
       width: max(viewportWidth, 1),
-      height: height(for: rows[index])
+      height: height(at: index)
     )
   }
 
+  /// Shape new content on the existing decode worker before publishing rows to the UI.
+  func prepareRows(
+    _ rows: [ReviewDiffNativeRow],
+    on queue: DispatchQueue,
+    isCurrent: @escaping () -> Bool,
+    completion: @escaping () -> Void
+  ) {
+    let font = codeFont
+    let width = viewportWidth - codeStartX - style.codePadding
+    let characterWidth = monospaceCharacterWidth(font: font)
+    guard style.wordWrap, width >= characterWidth, characterWidth > 0 else {
+      completion()
+      return
+    }
+    let cached = codeLayoutWidth == width && codeLayoutFont == font ? codeLayoutsByRowId : [:]
+    queue.async { [weak self] in
+      var layouts: [String: ReviewDiffCodeLayout] = [:]
+      for row in rows where row.kind == "line" {
+        guard let text = row.content else { continue }
+        if let previous = cached[row.id], previous.text == text {
+          layouts[row.id] = previous
+        } else {
+          layouts[row.id] = ReviewDiffCodeLayout(text: text, font: font, width: width, characterWidth: characterWidth)
+        }
+      }
+      DispatchQueue.main.async { [weak self] in
+        guard let self, isCurrent() else { return }
+        if self.codeFont != font || self.viewportWidth - self.codeStartX - self.style.codePadding != width {
+          self.prepareRows(rows, on: queue, isCurrent: isCurrent, completion: completion)
+          return
+        }
+        self.codeLayoutWidth = width
+        self.codeLayoutFont = font
+        self.codeLayoutsByRowId = layouts
+        completion()
+      }
+    }
+  }
+
   private func rebuildRowLayout() {
     var nextOffsets: [CGFloat] = []
     var nextFileHeaderRowIndices: [Int] = []
     nextOffsets.reserveCapacity(rows.count)
     var maxColumnCountsByFileId: [String: Int] = [:]
+    var nextCodeLayouts: [String: ReviewDiffCodeLayout] = [:]
     var offset: CGFloat = 0
+    let font = codeFont
+    let characterWidth = monospaceCharacterWidth(font: font)
+    let wrapAvailableWidth = viewportWidth - codeStartX - style.codePadding
+    let wrapColumns = style.wordWrap && characterWidth > 0 && wrapAvailableWidth >= characterWidth
+      ? Int(wrapAvailableWidth / characterWidth)
+      : nil
+    if codeLayoutWidth != wrapAvailableWidth || codeLayoutFont != font {
+      codeLayoutsByRowId.removeAll()
+      codeLayoutWidth = wrapAvailableWidth
+      codeLayoutFont = font
+    }
 
     for (index, row) in rows.enumerated() {
       nextOffsets.append(offset)
       if row.kind == "file" {
         nextFileHeaderRowIndices.append(index)
       }
-      offset += height(for: row)
+      var rowHeight = height(for: row)
 
       let fileId = resolvedFileId(for: row)
       switch row.kind {
       case "line":
-        maxColumnCountsByFileId[fileId] = max(
-          maxColumnCountsByFileId[fileId] ?? 0,
-          row.content?.count ?? 0
-        )
+        // UTF-16 columns match the word diff ranges and the segments drawCodeLines draws.
+        let columnCount = row.content?.utf16.count ?? 0
+        maxColumnCountsByFileId[fileId] = max(maxColumnCountsByFileId[fileId] ?? 0, columnCount)
+        if wrapColumns != nil, let content = row.content {
+          let cached = codeLayoutsByRowId[row.id]
+          let layout: ReviewDiffCodeLayout
+          if let cached, cached.text == content {
+            layout = cached
+          } else {
+            layout = ReviewDiffCodeLayout(
+              text: content, font: font, width: wrapAvailableWidth, characterWidth: characterWidth
+            )
+          }
+          nextCodeLayouts[row.id] = layout
+          if rowHeight > 0 {
+            rowHeight = max(rowHeight, layout.firstLineHeight) + layout.extraHeight
+          }
+        }
       case "hunk":
         maxColumnCountsByFileId[fileId] = max(
           maxColumnCountsByFileId[fileId] ?? 0,
-          row.text?.count ?? 0
+          row.text?.utf16.count ?? 0
         )
       default:
-        continue
+        break
       }
+      offset += rowHeight
     }
 
-    let characterWidth = monospaceCharacterWidth(font: codeFont)
     codeCharacterWidth = characterWidth
+    codeWrapColumns = wrapColumns
+    codeLayoutsByRowId = nextCodeLayouts
     contentWidthsByFileId = maxColumnCountsByFileId.mapValues { maxColumnCount in
       let measuredWidth = ceil(CGFloat(maxColumnCount) * characterWidth) + style.codePadding * 2
       return max(0, min(style.contentWidth, measuredWidth))
@@ -1498,7 +1600,7 @@ private final class ReviewDiffContentView: UIView, UIGestureRecognizerDelegate {
     while lowerBound <= upperBound {
       let midpoint = (lowerBound + upperBound) / 2
       let rowStart = rowOffsets[midpoint]
-      let rowEnd = rowStart + height(for: rows[midpoint])
+      let rowEnd = rowStart + height(at: midpoint)
 
       if absoluteY < rowStart {
         upperBound = midpoint - 1
@@ -1521,7 +1623,7 @@ private final class ReviewDiffContentView: UIView, UIGestureRecognizerDelegate {
     var upperBound = rows.count
     while lowerBound < upperBound {
       let midpoint = (lowerBound + upperBound) / 2
-      let rowEnd = rowOffsets[midpoint] + height(for: rows[midpoint])
+      let rowEnd = rowOffsets[midpoint] + height(at: midpoint)
 
       if rowEnd < absoluteY {
         lowerBound = midpoint + 1
@@ -1609,6 +1711,9 @@ private final class ReviewDiffContentView: UIView, UIGestureRecognizerDelegate {
        let row = rows.first(where: { resolvedFileId(for: $0) == target.fileId && $0.kind == "file" }) {
       return maxHeaderPathOffset(for: row)
     }
+    if codeWrapColumns != nil {
+      return 0
+    }
 
     return max(0, contentWidth(for: target.fileId) - max(0, viewportWidth - codeStartX))
   }
@@ -1728,7 +1833,7 @@ private final class ReviewDiffContentView: UIView, UIGestureRecognizerDelegate {
     var drawnRowCount = 0
     for rowIndex in firstRowIndex...lastRowIndex {
       let rowStart = rowOffsets[rowIndex]
-      let rowHeight = height(for: rows[rowIndex])
+      let rowHeight = height(at: rowIndex)
       if rowHeight <= 0 {
         continue
       }
@@ -1786,7 +1891,7 @@ private final class ReviewDiffContentView: UIView, UIGestureRecognizerDelegate {
 
   private func drawRow(_ row: ReviewDiffNativeRow, rowIndex: Int, context: CGContext) {
     let rowY = rowOffsets[rowIndex] - verticalOffset
-    let fullRect = CGRect(x: 0, y: rowY, width: max(bounds.width, viewportWidth), height: height(for: row))
+    let fullRect = CGRect(x: 0, y: rowY, width: max(bounds.width, viewportWidth), height: height(at: rowIndex))
 
     switch row.kind {
     case "file":
@@ -2172,15 +2277,21 @@ private final class ReviewDiffContentView: UIView, UIGestureRecognizerDelegate {
     let horizontalOffset = horizontalOffset(for: fileId)
     let contentWidth = contentWidth(for: fileId)
     let change = row.change ?? "context"
+    // Wrapped rows keep the line number and first code line in the first row-height band.
+    let layout = codeLayoutsByRowId[row.id]
+    let firstLineRect = CGRect(
+      x: rect.minX, y: rect.minY, width: rect.width,
+      height: max(style.rowHeight, layout?.firstLineHeight ?? 0)
+    )
     rowBackground(for: change).setFill()
     context.fill(rect)
 
     if change == "add" {
       theme.addBar.setFill()
-      context.fill(CGRect(x: 0, y: rect.minY, width: style.changeBarWidth, height: style.rowHeight))
+      context.fill(CGRect(x: 0, y: rect.minY, width: style.changeBarWidth, height: rect.height))
     } else if change == "delete" {
       drawDeleteStripes(
-        rect: CGRect(x: 0, y: rect.minY, width: style.changeBarWidth, height: style.rowHeight),
+        rect: CGRect(x: 0, y: rect.minY, width: style.changeBarWidth, height: rect.height),
         context: context
       )
     }
@@ -2193,7 +2304,7 @@ private final class ReviewDiffContentView: UIView, UIGestureRecognizerDelegate {
         "\(lineNumber)",
         rect: CGRect(
           x: style.changeBarWidth,
-          y: centeredTextY(in: rect, font: lineNumberFont),
+          y: centeredTextY(in: firstLineRect, font: lineNumberFont),
           width: style.gutterWidth - style.codePadding,
           height: lineNumberFont.lineHeight
         ),
@@ -2203,28 +2314,85 @@ private final class ReviewDiffContentView: UIView, UIGestureRecognizerDelegate {
     }
 
     context.saveGState()
-    context.clip(to: CGRect(x: stickyWidth, y: rect.minY, width: max(0, viewportWidth - stickyWidth), height: style.rowHeight))
+    context.clip(to: CGRect(x: stickyWidth, y: rect.minY, width: max(0, viewportWidth - stickyWidth), height: rect.height))
     let codeTextRect = CGRect(
       x: codeStartX - horizontalOffset,
-      y: centeredTextY(in: rect, font: codeFont),
+      y: centeredTextY(in: firstLineRect, font: codeFont),
       width: contentWidth,
       height: codeFont.lineHeight
     )
-    drawWordDiffRanges(row, rowRect: rect, context: context, horizontalOffset: horizontalOffset)
+    if let layout, layout.usesNativeLayout {
+      let text = tokensByRowId[row.id].map {
+        tokenAttributedString(rowId: row.id, tokens: $0, fallbackColor: theme.text, font: codeFont)
+      } ?? NSAttributedString(string: row.content ?? "", attributes: [.foregroundColor: theme.text])
+      let highlights = (change == "add" || change == "delete") ? (row.wordDiffRanges ?? []) : []
+      layout.decorate(
+        text: text,
+        highlights: highlights.filter { $0.start >= 0 && $0.end > $0.start }.map {
+          NSRange(location: $0.start, length: $0.end - $0.start)
+        },
+        color: (change == "add" ? theme.addBar : theme.deleteBar).withAlphaComponent(0.28),
+        version: codeDecorationVersion
+      )
+      layout.draw(
+        at: CGPoint(x: codeStartX, y: rect.minY + max(0, (firstLineRect.height - layout.firstLineHeight) / 2)),
+        clip: context.boundingBoxOfClipPath
+      )
+      context.restoreGState()
+      return
+    }
+    let lineStarts = layout?.starts ?? [0]
+    drawWordDiffRanges(
+      row,
+      lineStarts: lineStarts,
+      firstLineRect: firstLineRect,
+      context: context,
+      horizontalOffset: horizontalOffset
+    )
     if let tokens = tokensByRowId[row.id], !tokens.isEmpty {
-      drawTokenText(
+      let attributedText = tokenAttributedString(
         rowId: row.id,
-        tokens,
-        rect: codeTextRect,
+        tokens: tokens,
         fallbackColor: theme.text,
         font: codeFont
       )
+      drawCodeLines(length: attributedText.length, lineStarts: lineStarts, firstLineRect: codeTextRect) { range, lineRect in
+        let segment = range.length == attributedText.length
+          ? attributedText
+          : attributedText.attributedSubstring(from: range)
+        segment.draw(in: lineRect)
+      }
     } else {
-      drawText(row.content ?? "", rect: codeTextRect, color: theme.text, font: codeFont)
+      let content = (row.content ?? "") as NSString
+      drawCodeLines(length: content.length, lineStarts: lineStarts, firstLineRect: codeTextRect) { range, lineRect in
+        let segment = range.length == content.length ? content as String : content.substring(with: range)
+        drawText(segment, rect: lineRect, color: theme.text, font: codeFont)
+      }
     }
     context.restoreGState()
   }
 
+  /// Draws the segment starting at each of the row's line starts on its own visual line.
+  private func drawCodeLines(
+    length: Int,
+    lineStarts: [Int],
+    firstLineRect: CGRect,
+    draw: (NSRange, CGRect) -> Void
+  ) {
+    var lineRect = firstLineRect
+    let clip = UIGraphicsGetCurrentContext()?.boundingBoxOfClipPath ?? bounds
+    let first = max(0, Int(floor((clip.minY - firstLineRect.minY) / codeWrapLineHeight)))
+    let last = min(lineStarts.count, Int(ceil((clip.maxY - firstLineRect.minY) / codeWrapLineHeight)))
+    guard first < last else { return }
+    lineRect.origin.y += CGFloat(first) * codeWrapLineHeight
+    for line in first..<last {
+      let lineStart = lineStarts[line]
+      let lineEnd = line + 1 < lineStarts.count ? lineStarts[line + 1] : length
+      draw(NSRange(location: lineStart, length: lineEnd - lineStart), lineRect)
+      lineRect.origin.y += codeWrapLineHeight
+    }
+  }
+
   private func drawSelectionOverlay(
     _ row: ReviewDiffNativeRow,
     rect: CGRect,
@@ -2244,7 +2412,8 @@ private final class ReviewDiffContentView: UIView, UIGestureRecognizerDelegate {
 
   private func drawWordDiffRanges(
     _ row: ReviewDiffNativeRow,
-    rowRect: CGRect,
+    lineStarts: [Int],
+    firstLineRect: CGRect,
     context: CGContext,
     horizontalOffset: CGFloat
   ) {
@@ -2263,8 +2432,8 @@ private final class ReviewDiffContentView: UIView, UIGestureRecognizerDelegate {
     } else {
       fillColor = theme.deleteBar.withAlphaComponent(0.28)
     }
-    let highlightHeight = max(4, min(rowRect.height - 4, codeFont.lineHeight))
-    let highlightY = rowRect.midY - highlightHeight / 2
+    let highlightHeight = max(4, min(firstLineRect.height - 4, codeFont.lineHeight))
+    let highlightY = firstLineRect.midY - highlightHeight / 2
 
     fillColor.setFill()
     for range in ranges {
@@ -2272,15 +2441,22 @@ private final class ReviewDiffContentView: UIView, UIGestureRecognizerDelegate {
         continue
       }
 
-      let startX = codeStartX - horizontalOffset + CGFloat(range.start) * codeCharacterWidth
-      let width = max(2, CGFloat(range.end - range.start) * codeCharacterWidth)
-      let highlightRect = CGRect(
-        x: startX,
-        y: highlightY,
-        width: width,
-        height: highlightHeight
-      )
-      UIBezierPath(roundedRect: highlightRect, cornerRadius: 3).fill()
+      // A wrapped row splits the highlight at each visual line boundary.
+      for (line, lineStart) in lineStarts.enumerated() {
+        let lineEnd = line + 1 < lineStarts.count ? lineStarts[line + 1] : Int.max
+        let start = max(range.start, lineStart)
+        let end = min(range.end, lineEnd)
+        guard end > start else {
+          continue
+        }
+        let highlightRect = CGRect(
+          x: codeStartX - horizontalOffset + CGFloat(start - lineStart) * codeCharacterWidth,
+          y: highlightY + CGFloat(line) * codeWrapLineHeight,
+          width: max(2, CGFloat(end - start) * codeCharacterWidth),
+          height: highlightHeight
+        )
+        UIBezierPath(roundedRect: highlightRect, cornerRadius: 3).fill()
+      }
     }
   }
 
@@ -2448,22 +2624,6 @@ private final class ReviewDiffContentView: UIView, UIGestureRecognizerDelegate {
     return (sample as NSString).size(withAttributes: attributes).width / CGFloat(sampleLength)
   }
 
-  private func drawTokenText(
-    rowId: String,
-    _ tokens: [ReviewDiffNativeToken],
-    rect: CGRect,
-    fallbackColor: UIColor,
-    font: UIFont
-  ) {
-    let attributedText = tokenAttributedString(
-      rowId: rowId,
-      tokens: tokens,
-      fallbackColor: fallbackColor,
-      font: font
-    )
-    attributedText.draw(in: rect)
-  }
-
   private func tokenAttributedString(
     rowId: String,
     tokens: [ReviewDiffNativeToken],
diff --git a/apps/mobile/modules/t3-review-diff/tests/ios/main.swift b/apps/mobile/modules/t3-review-diff/tests/ios/main.swift
new file mode 100644
index 000000000000..baeeaae77d9a
--- /dev/null
+++ b/apps/mobile/modules/t3-review-diff/tests/ios/main.swift
@@ -0,0 +1,60 @@
+import UIKit
+
+func check(_ passed: Bool, _ message: String = "Failed layout check") {
+  if !passed {
+    FileHandle.standardError.write(Data((message + "\n").utf8))
+    exit(1)
+  }
+}
+
+// Runs the production layout against UIKit through Mac Catalyst, without launching an app.
+let font = UIFont.monospacedSystemFont(ofSize: 14, weight: .regular)
+let characterWidth = ("M" as NSString).size(withAttributes: [.font: font]).width
+let fixtures = ["漢字表示", "e\u{301}", "👨‍👩‍👧‍👦", "مرحبا بالعالم ", "\tvalue "]
+var cases = 0
+for fixture in fixtures {
+  let text = String(repeating: fixture, count: 40)
+  var previousHeight = CGFloat.greatestFiniteMagnitude
+  for width: CGFloat in [180, 280, 420] {
+    let layout = ReviewDiffCodeLayout(text: text, font: font, width: width, characterWidth: characterWidth)
+    let height = layout.firstLineHeight + layout.extraHeight
+    check(height <= previousHeight, "Wider text must not require more height")
+    previousHeight = height
+    let fullRange = NSRange(location: 0, length: text.utf16.count)
+    let attributed = NSAttributedString(string: text, attributes: [.foregroundColor: UIColor.black])
+    layout.decorate(text: attributed, highlights: [], color: .clear, version: 0)
+    let format = UIGraphicsImageRendererFormat()
+    format.scale = 1
+    format.opaque = false
+    format.preferredRange = .standard
+    let size = CGSize(width: width + 40, height: ceil(height))
+    let image = UIGraphicsImageRenderer(size: size, format: format).image { _ in
+      layout.draw(at: .zero, clip: CGRect(origin: .zero, size: size))
+    }
+    let bitmap = image.cgImage!
+    let data = bitmap.dataProvider!.data!
+    let bytes = CFDataGetBytePtr(data)!
+    // Render without a viewport clip so an overflowing glyph cannot hide behind clipping.
+    for y in 0..<bitmap.height {
+      for x in Int(width) + 1..<bitmap.width {
+        check(bytes[y * bitmap.bytesPerRow + x * 4 + 3] == 0, "Ink outside viewport: \(fixture) x=\(x) y=\(y) bpp=\(bitmap.bitsPerPixel) alpha=\(bitmap.alphaInfo.rawValue)")
+      }
+    }
+    // Updating highlights and syntax colors must preserve measured geometry.
+    layout.decorate(text: attributed, highlights: [fullRange], color: .green, version: 1)
+    check(layout.firstLineHeight + layout.extraHeight == height)
+    cases += 1
+  }
+}
+let ascii = String(repeating: "const value = 123; ", count: 100)
+let layout = ReviewDiffCodeLayout(text: ascii, font: font, width: 280, characterWidth: characterWidth)
+let string = ascii as NSString
+var reconstructed = ""
+for (index, start) in layout.starts.enumerated() {
+  let end = index + 1 < layout.starts.count ? layout.starts[index + 1] : string.length
+  let segment = string.substring(with: NSRange(location: start, length: end - start))
+  check((segment as NSString).size(withAttributes: [.font: font]).width <= 280)
+  reconstructed += segment
+}
+check(reconstructed == ascii)
+print("Passed \(cases) Unicode/width cases, color-update geometry, and ASCII coverage")
diff --git a/apps/mobile/modules/t3-review-diff/tests/run-ios.sh b/apps/mobile/modules/t3-review-diff/tests/run-ios.sh
new file mode 100644
index 000000000000..464ef0cf4577
--- /dev/null
+++ b/apps/mobile/modules/t3-review-diff/tests/run-ios.sh
@@ -0,0 +1,12 @@
+#!/bin/bash
+set -euo pipefail
+module_dir=$(cd "$(dirname "$0")/.." && pwd)
+sdk=$(xcrun --sdk macosx --show-sdk-path)
+compiler=$(xcrun --find swiftc)
+output=$(mktemp -d)
+trap 'rm -rf "$output"' EXIT
+"$compiler" -O -target "$(uname -m)-apple-ios16.1-macabi" -sdk "$sdk" \
+  -F "$sdk/System/iOSSupport/System/Library/Frameworks" \
+  "$module_dir/ios/ReviewDiffCodeLayout.swift" "$module_dir/tests/ios/main.swift" \
+  -o "$output/layout-tests"
+"$output/layout-tests"
diff --git a/apps/mobile/src/features/devices/DevicePreviewRouteScreen.tsx b/apps/mobile/src/features/devices/DevicePreviewRouteScreen.tsx
index 82b2b90fecad..824164dc2e2b 100644
--- a/apps/mobile/src/features/devices/DevicePreviewRouteScreen.tsx
+++ b/apps/mobile/src/features/devices/DevicePreviewRouteScreen.tsx
@@ -68,7 +68,7 @@ function DevicePreviewScreen({
   const insets = useSafeAreaInsets();
   const { themeVariables } = useAppearancePreferences();
   const focused = useIsFocused();
-  const [foreground, setForeground] = useState(AppState.currentState === "active");
+  const [foreground, setForeground] = useState(AppState.currentState !== "background");
   const [selectedKey, setSelectedKey] = useState<string | null>(null);
   const [inputConnected, setInputConnected] = useState(false);
   const [streamAttempt, setStreamAttempt] = useState(0);
@@ -87,7 +87,7 @@ function DevicePreviewScreen({
   );
   useEffect(() => {
     const subscription = AppState.addEventListener("change", (state) =>
-      setForeground(state === "active"),
+      setForeground(state !== "background"),
     );
     return () => subscription.remove();
   }, []);
diff --git a/apps/mobile/src/features/devices/DeviceStreamWebView.tsx b/apps/mobile/src/features/devices/DeviceStreamWebView.tsx
index 9a5cef83ae3f..423fdb1c84a0 100644
--- a/apps/mobile/src/features/devices/DeviceStreamWebView.tsx
+++ b/apps/mobile/src/features/devices/DeviceStreamWebView.tsx
@@ -1,7 +1,19 @@
 import deviceStreamScript from "@t3tools/mobile-device-stream";
-import { useImperativeHandle, useLayoutEffect, useMemo, useRef, useState, type Ref } from "react";
-import { Platform } from "react-native";
+import {
+  useEffect,
+  useEffectEvent,
+  useImperativeHandle,
+  useLayoutEffect,
+  useMemo,
+  useRef,
+  useState,
+  type Ref,
+} from "react";
+import { ActivityIndicator, Platform, Pressable, View } from "react-native";
 import { WebView } from "react-native-webview";
+import type { DeviceStreamStatus } from "@t3tools/client-runtime/device/stream";
+
+import { AppText } from "../../components/AppText";
 
 import {
   deviceStreamDocument,
@@ -27,6 +39,7 @@ export function DeviceStreamWebView({
   ...props
 }: DeviceStreamConfiguration & NativeStreamBridge) {
   const [attempt, setAttempt] = useState(0);
+  const processRetried = useRef(false);
   const configuration = JSON.stringify({
     access: props.access,
     platform: props.platform,
@@ -41,7 +54,21 @@ export function DeviceStreamWebView({
       background={props.colors.background}
       onUnauthorized={props.onUnauthorized}
       onInputConnected={props.onInputConnected}
-      onRetry={() => setAttempt((attempt) => attempt + 1)}
+      onRetry={() => {
+        processRetried.current = false;
+        setAttempt((attempt) => attempt + 1);
+        void props.onUnauthorized();
+      }}
+      onStreaming={() => {
+        processRetried.current = false;
+      }}
+      onRecoverProcess={() => {
+        if (processRetried.current) return false;
+        processRetried.current = true;
+        setAttempt((attempt) => attempt + 1);
+        void props.onUnauthorized();
+        return true;
+      }}
     />
   );
 }
@@ -53,12 +80,38 @@ function DeviceStreamDocumentView({
   onUnauthorized,
   onInputConnected,
   onRetry,
+  onStreaming,
+  onRecoverProcess,
 }: NativeStreamBridge & {
   readonly configuration: string;
   readonly background: string;
   readonly onRetry: () => void;
+  readonly onStreaming: () => void;
+  readonly onRecoverProcess: () => boolean;
 }) {
   const webView = useRef<WebView>(null);
+  const active = useRef(true);
+  const failed = useRef(false);
+  const [status, setStatus] = useState<DeviceStreamStatus>("connecting");
+  const [error, setError] = useState<string | null>(null);
+  const [started, setStarted] = useState(false);
+  const fail = (message: string) => {
+    if (!active.current || failed.current) return;
+    failed.current = true;
+    void onInputConnected(false);
+    webView.current?.injectJavaScript("window.T3DeviceStream?.stop(); true;");
+    setError(message);
+    setStatus("error");
+  };
+  // The shared transport owns video timeouts once the document acknowledges startup.
+  const bootstrapTimedOut = useEffectEvent(() =>
+    fail("Device viewer could not start. Reconnect to try again."),
+  );
+  useEffect(() => {
+    if (started) return;
+    const timer = setTimeout(bootstrapTimedOut, 15_000);
+    return () => clearTimeout(timer);
+  }, [started]);
   const source = useMemo(
     () => ({
       html: deviceStreamDocument(configuration, deviceStreamScript),
@@ -78,32 +131,80 @@ function DeviceStreamDocumentView({
     appSwitcher: () => command("appSwitcher"),
     rotate: () => command("rotate"),
   }));
+  const resetInput = useEffectEvent(() => void onInputConnected(false));
   useLayoutEffect(() => {
+    active.current = true;
+    resetInput();
     const view = webView.current;
-    return () => view?.injectJavaScript("window.T3DeviceStream?.stop(); true;");
+    return () => {
+      active.current = false;
+      view?.injectJavaScript("window.T3DeviceStream?.stop(); true;");
+    };
   }, []);
+  const processTerminated = () => {
+    if (!active.current || failed.current) return;
+    void onInputConnected(false);
+    if (!onRecoverProcess()) fail("Device viewer stopped. Reconnect to try again.");
+  };
   return (
-    <WebView
-      ref={webView}
-      source={source}
-      originWhitelist={["*"]}
-      scrollEnabled={false}
-      bounces={false}
-      mixedContentMode="always"
-      allowUniversalAccessFromFileURLs
-      contentInsetAdjustmentBehavior="never"
-      setSupportMultipleWindows={false}
-      style={{ flex: 1, backgroundColor: background }}
-      onLoadStart={() => void onInputConnected(false)}
-      onShouldStartLoadWithRequest={(request) =>
-        request.url === "about:blank" || request.url === source.baseUrl
-      }
-      onMessage={(event) => {
-        const message = deviceStreamMessage(event.nativeEvent.data);
-        if (message?.type === "unauthorized") void onUnauthorized();
-        else if (message?.type === "input") void onInputConnected(message.connected);
-        else if (message?.type === "retry") onRetry();
-      }}
-    />
+    <View className="flex-1" style={{ backgroundColor: background }}>
+      <WebView
+        ref={webView}
+        source={source}
+        originWhitelist={["*"]}
+        scrollEnabled={false}
+        bounces={false}
+        mixedContentMode="always"
+        allowUniversalAccessFromFileURLs
+        contentInsetAdjustmentBehavior="never"
+        setSupportMultipleWindows={false}
+        style={{ flex: 1, backgroundColor: background }}
+        onError={() => fail("Device viewer could not load. Reconnect to try again.")}
+        onHttpError={() => fail("Device viewer could not load. Reconnect to try again.")}
+        onContentProcessDidTerminate={processTerminated}
+        onRenderProcessGone={processTerminated}
+        onShouldStartLoadWithRequest={(request) =>
+          request.url === "about:blank" || request.url === source.baseUrl
+        }
+        onMessage={(event) => {
+          if (!active.current || failed.current) return;
+          const message = deviceStreamMessage(event.nativeEvent.data);
+          if (message?.type === "unauthorized") void onUnauthorized();
+          else if (message?.type === "input") void onInputConnected(message.connected);
+          else if (message?.type === "retry") onRetry();
+          else if (message?.type === "status") {
+            setStarted(true);
+            if (message.status === "error") fail(message.detail ?? "Device stream failed.");
+            else {
+              setStatus(message.status);
+              if (message.status === "streaming") onStreaming();
+            }
+          }
+        }}
+      />
+      {status !== "streaming" ? (
+        <View
+          className="absolute inset-0 items-center justify-center gap-4 px-6"
+          style={{ backgroundColor: background }}
+        >
+          {status === "connecting" ? <ActivityIndicator colorClassName="accent-icon" /> : null}
+          <AppText
+            accessibilityLiveRegion="polite"
+            className="text-center text-sm text-foreground-muted"
+          >
+            {status === "error" ? error : "Connecting to device..."}
+          </AppText>
+          {status === "error" ? (
+            <Pressable
+              accessibilityRole="button"
+              className="rounded-full border border-secondary-border bg-secondary px-6 py-3"
+              onPress={onRetry}
+            >
+              <AppText className="text-secondary-foreground">Reconnect</AppText>
+            </Pressable>
+          ) : null}
+        </View>
+      ) : null}
+    </View>
   );
 }
diff --git a/apps/mobile/src/features/devices/device-stream-document.test.ts b/apps/mobile/src/features/devices/device-stream-document.test.ts
index ffc08667a147..95aa6a9dad23 100644
--- a/apps/mobile/src/features/devices/device-stream-document.test.ts
+++ b/apps/mobile/src/features/devices/device-stream-document.test.ts
@@ -1,5 +1,5 @@
 import * as NodeVM from "node:vm";
-import { describe, expect, it } from "vite-plus/test";
+import { describe, expect, it, vi } from "vite-plus/test";
 
 import { deviceStreamDocument, deviceStreamMessage } from "./device-stream-document";
 
@@ -13,7 +13,7 @@ describe("native device stream document", () => {
     );
     const script = html.match(/<script>([\s\S]*)<\/script>/)?.[1];
     expect(html.match(/<script>/g)).toHaveLength(1);
-    const input: unknown = NodeVM.runInNewContext(script!);
+    const input: unknown = NodeVM.runInNewContext(script!, { window: { addEventListener() {} } });
     expect(input).toEqual({ deviceId, ticket: "<ticket>" });
   });
 
@@ -22,6 +22,39 @@ describe("native device stream document", () => {
     expect(html.match(/<\/script>/g)).toHaveLength(1);
     expect(html).toContain('var text="<\\/script>";');
   });
+
+  it("reports a bootstrap exception to the native recovery UI", () => {
+    const postMessage = vi.fn();
+    const html = deviceStreamDocument(
+      "{}",
+      'var T3DeviceStream={start(){throw new Error("startup")}};',
+    );
+    NodeVM.runInNewContext(html.match(/<script>([\s\S]*)<\/script>/)![1]!, {
+      window: { addEventListener() {}, ReactNativeWebView: { postMessage } },
+    });
+    expect(JSON.parse(postMessage.mock.calls[0]![0] as string)).toEqual({
+      type: "status",
+      status: "error",
+      detail: "Device viewer stopped unexpectedly.",
+    });
+  });
+
+  it.each(["error", "unhandledrejection"])("reports later %s failures to native", (event) => {
+    const postMessage = vi.fn();
+    const listeners = new Map<string, () => void>();
+    const html = deviceStreamDocument("{}", "var T3DeviceStream={start(){}};");
+    NodeVM.runInNewContext(html.match(/<script>([\s\S]*)<\/script>/)![1]!, {
+      window: {
+        addEventListener: (name: string, callback: () => void) => listeners.set(name, callback),
+        ReactNativeWebView: { postMessage },
+      },
+    });
+    listeners.get(event)!();
+    expect(JSON.parse(postMessage.mock.calls[0]![0] as string)).toMatchObject({
+      type: "status",
+      status: "error",
+    });
+  });
 });
 
 describe("native device stream messages", () => {
@@ -38,6 +71,12 @@ describe("native device stream messages", () => {
     expect(deviceStreamMessage('{"type":"retry"}')).toEqual({ type: "retry" });
   });
 
+  it.each(["connecting", "streaming", "error"])("accepts stream %s feedback", (status) => {
+    expect(
+      deviceStreamMessage(JSON.stringify({ type: "status", status, detail: "Stream feedback" })),
+    ).toEqual({ type: "status", status, detail: "Stream feedback" });
+  });
+
   it.each([
     "invalid JSON",
     "null",
@@ -45,5 +84,8 @@ describe("native device stream messages", () => {
     "{}",
     '{"type":"input","connected":"yes"}',
     '{"type":"unknown"}',
+    '{"type":"status","status":"unknown"}',
+    '{"type":"status","status":"error","detail":42}',
+    '{"type":"status"}',
   ])("ignores invalid bridge messages: %s", (data) => expect(deviceStreamMessage(data)).toBeNull());
 });
diff --git a/apps/mobile/src/features/devices/device-stream-document.ts b/apps/mobile/src/features/devices/device-stream-document.ts
index f3b753d5e99c..961dee9affe0 100644
--- a/apps/mobile/src/features/devices/device-stream-document.ts
+++ b/apps/mobile/src/features/devices/device-stream-document.ts
@@ -19,7 +19,8 @@ export function deviceStreamDocument(configuration: string, script: string) {
   // Tickets and device names are data, including any HTML delimiter characters.
   const safeConfiguration = configuration.replace(/</g, "\\u003c");
   const safeScript = script.replace(/<\/script/gi, "<\\/script");
-  return `<!doctype html><html><head><meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1,user-scalable=no"></head><body><script>${safeScript}\nT3DeviceStream.start(${safeConfiguration});</script></body></html>`;
+  const failure = `window.ReactNativeWebView.postMessage(JSON.stringify({type:"status",status:"error",detail:"Device viewer stopped unexpectedly."}));`;
+  return `<!doctype html><html><head><meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1,user-scalable=no"></head><body><script>window.addEventListener("error",function(){${failure}});window.addEventListener("unhandledrejection",function(){${failure}});\n${safeScript}\ntry{T3DeviceStream.start(${safeConfiguration});}catch{${failure}}</script></body></html>`;
 }
 
 export function deviceStreamMessage(data: string) {
@@ -36,6 +37,21 @@ export function deviceStreamMessage(data: string) {
     ) {
       return { type: message.type, connected: message.connected } as const;
     }
+    if (
+      message.type === "status" &&
+      "status" in message &&
+      (message.status === "connecting" ||
+        message.status === "streaming" ||
+        message.status === "error") &&
+      (!("detail" in message) || typeof message.detail === "string")
+    ) {
+      return {
+        type: message.type,
+        status: message.status,
+        detail:
+          "detail" in message && typeof message.detail === "string" ? message.detail : undefined,
+      } as const;
+    }
   } catch {
     // Ignore messages that are not part of the stream bridge.
   }
diff --git a/apps/mobile/src/features/devices/device-stream.browser.test.ts b/apps/mobile/src/features/devices/device-stream.browser.test.ts
new file mode 100644
index 000000000000..5aeefdac0203
--- /dev/null
+++ b/apps/mobile/src/features/devices/device-stream.browser.test.ts
@@ -0,0 +1,117 @@
+import { afterEach, expect, it, vi } from "vite-plus/test";
+import { start, stop } from "./device-stream.browser";
+
+class Element extends EventTarget {
+  readonly style = {};
+  naturalWidth = 0;
+  naturalHeight = 0;
+  src = "";
+  readonly tag: string;
+  constructor(tag: string) {
+    super();
+    this.tag = tag;
+  }
+  setAttribute() {}
+  removeAttribute(name: string) {
+    if (name === "src") this.src = "";
+  }
+  append() {}
+}
+
+async function setup() {
+  vi.useFakeTimers();
+  const elements: Element[] = [];
+  vi.stubGlobal("document", {
+    documentElement: { style: {} },
+    body: { style: {}, replaceChildren() {} },
+    createElement: (tag: string) => {
+      const element = new Element(tag);
+      elements.push(element);
+      return element;
+    },
+  });
+  const postMessage = vi.fn();
+  vi.stubGlobal("window", { ReactNativeWebView: { postMessage }, addEventListener() {} });
+  vi.stubGlobal("fetch", () => Promise.resolve(new Response("prime")));
+  const sockets: Socket[] = [];
+  class Socket {
+    static OPEN = 1;
+    readyState = 1;
+    onopen: (() => void) | null = null;
+    close = vi.fn();
+    send = vi.fn();
+    constructor() {
+      sockets.push(this);
+    }
+  }
+  vi.stubGlobal("WebSocket", Socket);
+  const configuration = {
+    platform: "ios" as const,
+    deviceId: "fixture-device",
+    access: {
+      httpBase: "https://device.test",
+      wsBase: "wss://device.test",
+      credentials: false,
+      query: {},
+    },
+    colors: {
+      background: "white",
+      foreground: "black",
+      muted: "gray",
+      buttonBackground: "gray",
+      buttonForeground: "black",
+      buttonBorder: "gray",
+    },
+  };
+  start(configuration);
+  await vi.advanceTimersByTimeAsync(0);
+  return {
+    configuration,
+    elements,
+    sockets,
+    messages: () =>
+      postMessage.mock.calls.map(
+        ([message]) => JSON.parse(message as string) as { type: string; status?: string },
+      ),
+  };
+}
+
+afterEach(() => {
+  stop();
+  vi.useRealTimers();
+  vi.unstubAllGlobals();
+});
+
+it("bridges shared first-frame readiness, image failure, and a successful fresh attempt to native", async () => {
+  const { elements, messages, sockets, configuration } = await setup();
+  sockets[0]!.onopen?.();
+  expect(messages()).not.toContainEqual({ type: "status", status: "streaming" });
+  expect(messages()).toContainEqual({ type: "input", connected: true });
+  const image = elements.find((element) => element.tag === "img")!;
+  image.naturalWidth = 400;
+  image.naturalHeight = 800;
+  await vi.advanceTimersByTimeAsync(250);
+  expect(messages()).toContainEqual({ type: "status", status: "streaming" });
+  image.dispatchEvent(new Event("error"));
+  expect(messages()).toContainEqual({
+    type: "status",
+    status: "error",
+    detail: "Could not receive the device stream. Reconnect to try again.",
+  });
+  expect(messages()).toContainEqual({ type: "input", connected: false });
+  expect(messages()).not.toContainEqual({ type: "unauthorized" });
+  expect(image.src).toBe("");
+  expect(sockets[0]!.close).toHaveBeenCalledOnce();
+  start(configuration);
+  await vi.advanceTimersByTimeAsync(0);
+  const replacement = elements.findLast((element) => element.tag === "img")!;
+  replacement.naturalWidth = 400;
+  replacement.naturalHeight = 800;
+  replacement.dispatchEvent(new Event("load"));
+  expect(messages().at(-1)).toEqual({ type: "status", status: "streaming" });
+  image.dispatchEvent(new Event("error"));
+  expect(sockets[1]!.close).not.toHaveBeenCalled();
+  stop();
+  expect(replacement.src).toBe("");
+  expect(vi.getTimerCount()).toBe(0);
+});
diff --git a/apps/mobile/src/features/devices/device-stream.browser.ts b/apps/mobile/src/features/devices/device-stream.browser.ts
index efa81d9a043a..0b9e98a51b9f 100644
--- a/apps/mobile/src/features/devices/device-stream.browser.ts
+++ b/apps/mobile/src/features/devices/device-stream.browser.ts
@@ -12,13 +12,10 @@ declare global {
 }
 
 let activeClient: ReturnType<typeof createDeviceStreamClient> | null = null;
-let activeImage: HTMLImageElement | null = null;
 
 export function stop() {
   activeClient?.stop();
   activeClient = null;
-  activeImage?.removeAttribute("src");
-  activeImage = null;
 }
 
 export function command(button: "home" | "back" | "appSwitcher" | "rotate") {
@@ -70,34 +67,6 @@ export function start(configuration: DeviceStreamConfiguration) {
   image.alt = "";
   image.draggable = false;
   image.style.display = "none";
-  const overlay = document.createElement("div");
-  overlay.setAttribute("role", "status");
-  Object.assign(overlay.style, {
-    position: "fixed",
-    inset: "0",
-    display: "flex",
-    flexDirection: "column",
-    alignItems: "center",
-    justifyContent: "center",
-    gap: "16px",
-    padding: "24px",
-    textAlign: "center",
-    background: colors.background,
-  });
-  const detail = document.createElement("span");
-  const retry = document.createElement("button");
-  retry.textContent = "Retry";
-  Object.assign(retry.style, {
-    padding: "12px 24px",
-    borderRadius: "20px",
-    border: `1px solid ${colors.buttonBorder}`,
-    background: colors.buttonBackground,
-    color: colors.buttonForeground,
-    font: "inherit",
-    display: "none",
-  });
-  retry.addEventListener("click", () => post({ type: "retry" }));
-  overlay.append(detail, retry);
   const inputStatus = document.createElement("div");
   inputStatus.setAttribute("role", "status");
   inputStatus.textContent = "Reconnecting device controls...";
@@ -114,11 +83,17 @@ export function start(configuration: DeviceStreamConfiguration) {
   });
   frame.append(canvas, image);
   container.append(frame);
-  document.body.replaceChildren(container, overlay, inputStatus);
+  document.body.replaceChildren(container, inputStatus);
 
   let pointerId: number | null = null;
   let inputConnected = false;
   let streaming = false;
+  const reportStatus = (status: "connecting" | "streaming" | "error", detail?: string) => {
+    if (activeClient !== client) return;
+    streaming = status === "streaming";
+    inputStatus.style.display = streaming && !inputConnected ? "block" : "none";
+    post({ type: "status", status, detail });
+  };
   const layout = (screen: DeviceScreenSize | null) => {
     const landscape =
       screen?.orientation === "landscape_left" || screen?.orientation === "landscape_right";
@@ -160,19 +135,11 @@ export function start(configuration: DeviceStreamConfiguration) {
     { ...configuration, preferMjpeg: platform === "ios" },
     canvas,
     {
-      onStatus: (status, message) => {
-        streaming = status === "streaming";
-        overlay.style.display = streaming ? "none" : "flex";
-        inputStatus.style.display = streaming && !inputConnected ? "block" : "none";
-        detail.textContent =
-          status === "error" ? (message ?? "Device stream failed.") : "Connecting to device...";
-        retry.style.display = status === "error" ? "block" : "none";
-      },
+      onStatus: reportStatus,
       onScreen: layout,
-      onMjpegFallback: (url) => {
+      onMjpegFallback: () => {
         canvas.style.display = "none";
         image.style.display = "block";
-        image.src = url;
       },
       onUnauthorized: unauthorized,
       onInputConnected: (connected) => {
@@ -183,8 +150,7 @@ export function start(configuration: DeviceStreamConfiguration) {
     },
   );
   activeClient = client;
-  activeImage = image;
-  image.addEventListener("error", unauthorized);
+  client.setMjpegImage(image);
   const touch = (event: PointerEvent, phase: "begin" | "move" | "end") => {
     const rect = frame.getBoundingClientRect();
     client.sendTouch(
diff --git a/apps/mobile/src/features/review/ReviewCommentCard.tsx b/apps/mobile/src/features/review/ReviewCommentCard.tsx
index ff348e1f2a97..5be4e87cba40 100644
--- a/apps/mobile/src/features/review/ReviewCommentCard.tsx
+++ b/apps/mobile/src/features/review/ReviewCommentCard.tsx
@@ -110,8 +110,9 @@ export const ReviewCommentCard = memo(function ReviewCommentCard(props: {
     () => JSON.stringify(nativeReviewDiffTheme),
     [nativeReviewDiffTheme],
   );
+  // The card's height is sized from its row count, so its snippet stays unwrapped.
   const nativeStyleJson = useMemo(
-    () => JSON.stringify(nativeReviewDiffStyle),
+    () => JSON.stringify({ ...nativeReviewDiffStyle, wordWrap: false }),
     [nativeReviewDiffStyle],
   );
   const nativeDiffHeight = useMemo(
diff --git a/apps/mobile/src/features/review/nativeReviewDiffAdapter.ts b/apps/mobile/src/features/review/nativeReviewDiffAdapter.ts
index 8bea04c524dd..3056cc2136ca 100644
--- a/apps/mobile/src/features/review/nativeReviewDiffAdapter.ts
+++ b/apps/mobile/src/features/review/nativeReviewDiffAdapter.ts
@@ -63,8 +63,13 @@ function opaqueNativeHexColor(color: string, background: string): string {
   return `#${channels.map((channel) => channel.toString(16).padStart(2, "0")).join("")}`;
 }
 
-export function createNativeReviewDiffStyle(codeSurface: ResolvedMobileCodeSurface) {
+/** `wordWrap` wraps line rows at the view width instead of panning them horizontally. */
+export function createNativeReviewDiffStyle(
+  codeSurface: ResolvedMobileCodeSurface,
+  wordWrap: boolean,
+) {
   return {
+    wordWrap,
     rowHeight: codeSurface.rowHeight,
     contentWidth: NATIVE_REVIEW_DIFF_CONTENT_WIDTH,
     changeBarWidth: 4,
diff --git a/apps/mobile/src/features/review/reviewDiffHighlightScheduler.test.ts b/apps/mobile/src/features/review/reviewDiffHighlightScheduler.test.ts
new file mode 100644
index 000000000000..3792e49f54c7
--- /dev/null
+++ b/apps/mobile/src/features/review/reviewDiffHighlightScheduler.test.ts
@@ -0,0 +1,74 @@
+import { afterEach, beforeEach, describe, expect, it, vi } from "vite-plus/test";
+
+import { createReviewDiffHighlightScheduler } from "./reviewDiffHighlightScheduler";
+
+describe("review diff highlighting while scrolling", () => {
+  beforeEach(() => vi.useFakeTimers());
+  afterEach(() => vi.useRealTimers());
+
+  it("keeps requesting new rows during gradual scrolling through a large diff", () => {
+    const request = vi.fn();
+    const scheduler = createReviewDiffHighlightScheduler(request);
+    for (let firstRowIndex = 1; firstRowIndex <= 1_674; firstRowIndex++) {
+      scheduler.update({ firstRowIndex, lastRowIndex: firstRowIndex + 80 });
+      vi.advanceTimersByTime(16);
+    }
+    expect(request.mock.calls.length).toBeGreaterThan(100);
+    vi.advanceTimersByTime(150);
+    expect(request).toHaveBeenLastCalledWith({ firstRowIndex: 1_674, lastRowIndex: 1_754 });
+  });
+
+  it("highlights the settled viewport even below the movement threshold", () => {
+    const request = vi.fn();
+    const scheduler = createReviewDiffHighlightScheduler(request);
+    scheduler.update({ firstRowIndex: 2, lastRowIndex: 82 });
+    vi.advanceTimersByTime(100);
+    scheduler.update({ firstRowIndex: 3, lastRowIndex: 83 });
+    vi.advanceTimersByTime(100);
+    expect(request).not.toHaveBeenCalled();
+    vi.advanceTimersByTime(50);
+    expect(request).toHaveBeenCalledExactlyOnceWith({ firstRowIndex: 3, lastRowIndex: 83 });
+  });
+
+  it("does not let repeated draw events starve the settled refresh", () => {
+    const request = vi.fn();
+    const scheduler = createReviewDiffHighlightScheduler(request);
+    for (let i = 0; i < 10; i++) {
+      scheduler.update({ firstRowIndex: 1, lastRowIndex: 81 });
+      vi.advanceTimersByTime(30);
+    }
+    expect(request).toHaveBeenCalledExactlyOnceWith({ firstRowIndex: 1, lastRowIndex: 81 });
+  });
+
+  it("requests large jumps and reverse scrolling immediately without stale timers", () => {
+    const request = vi.fn();
+    const scheduler = createReviewDiffHighlightScheduler(request);
+    scheduler.update({ firstRowIndex: 1, lastRowIndex: 81 });
+    scheduler.update({ firstRowIndex: 1_000, lastRowIndex: 1_080 });
+    scheduler.update({ firstRowIndex: 0, lastRowIndex: 80 });
+    vi.runAllTimers();
+    expect(request.mock.calls).toEqual([
+      [{ firstRowIndex: 1_000, lastRowIndex: 1_080 }],
+      [{ firstRowIndex: 0, lastRowIndex: 80 }],
+    ]);
+  });
+
+  it("cancels pending work on disposal and resets the range for a new diff", () => {
+    const request = vi.fn();
+    const scheduler = createReviewDiffHighlightScheduler(request);
+    scheduler.update({ firstRowIndex: 1, lastRowIndex: 81 });
+    scheduler.cancel();
+    vi.runAllTimers();
+    expect(request).not.toHaveBeenCalled();
+    scheduler.update({ firstRowIndex: 1_000, lastRowIndex: 1_080 });
+    request.mockClear();
+    scheduler.update({ firstRowIndex: 1_001, lastRowIndex: 1_081 });
+    scheduler.reset();
+    vi.runAllTimers();
+    expect(request).not.toHaveBeenCalled();
+    scheduler.update({ firstRowIndex: 1, lastRowIndex: 81 });
+    expect(request).not.toHaveBeenCalled();
+    vi.advanceTimersByTime(150);
+    expect(request).toHaveBeenCalledExactlyOnceWith({ firstRowIndex: 1, lastRowIndex: 81 });
+  });
+});
diff --git a/apps/mobile/src/features/review/reviewDiffHighlightScheduler.ts b/apps/mobile/src/features/review/reviewDiffHighlightScheduler.ts
new file mode 100644
index 000000000000..4cededa52954
--- /dev/null
+++ b/apps/mobile/src/features/review/reviewDiffHighlightScheduler.ts
@@ -0,0 +1,51 @@
+export interface NativeReviewVisibleRange {
+  readonly firstRowIndex: number;
+  readonly lastRowIndex: number;
+}
+
+export function createReviewDiffHighlightScheduler(
+  request: (range: NativeReviewVisibleRange) => void,
+) {
+  let requestedRange: NativeReviewVisibleRange = { firstRowIndex: 0, lastRowIndex: 80 };
+  let visibleRange = requestedRange;
+  let timer: ReturnType<typeof setTimeout> | undefined;
+
+  const cancel = () => {
+    clearTimeout(timer);
+    timer = undefined;
+  };
+  const flush = () => {
+    cancel();
+    requestedRange = visibleRange;
+    request(visibleRange);
+  };
+
+  return {
+    update(nextRange: NativeReviewVisibleRange) {
+      if (
+        nextRange.firstRowIndex === visibleRange.firstRowIndex &&
+        nextRange.lastRowIndex === visibleRange.lastRowIndex
+      ) {
+        return;
+      }
+      visibleRange = nextRange;
+      cancel();
+      // Accumulate small scroll events relative to the last request, not each other.
+      const movedRows =
+        Math.abs(nextRange.firstRowIndex - requestedRange.firstRowIndex) +
+        Math.abs(nextRange.lastRowIndex - requestedRange.lastRowIndex);
+      if (movedRows >= 20) {
+        flush();
+      } else if (movedRows > 0) {
+        // Cover the final viewport even when scrolling stops below the threshold.
+        timer = setTimeout(flush, 150);
+      }
+    },
+    reset() {
+      cancel();
+      requestedRange = { firstRowIndex: 0, lastRowIndex: 80 };
+      visibleRange = requestedRange;
+    },
+    cancel,
+  };
+}
diff --git a/apps/mobile/src/features/review/useNativeReviewDiffHighlighting.ts b/apps/mobile/src/features/review/useNativeReviewDiffHighlighting.ts
index 35f06c263666..61a205f9d917 100644
--- a/apps/mobile/src/features/review/useNativeReviewDiffHighlighting.ts
+++ b/apps/mobile/src/features/review/useNativeReviewDiffHighlighting.ts
@@ -1,4 +1,4 @@
-import { useCallback, useEffect, useRef, useState } from "react";
+import { useEffect, useRef, useState } from "react";
 
 import {
   highlightNativeReviewDiffVisibleRows,
@@ -8,10 +8,10 @@ import {
 import type { NativeReviewDiffRow } from "../diffs/nativeReviewDiffSurface";
 import type { NativeReviewDiffFile } from "../diffs/nativeReviewDiffTypes";
 
-interface NativeReviewVisibleRange {
-  readonly firstRowIndex: number;
-  readonly lastRowIndex: number;
-}
+import {
+  createReviewDiffHighlightScheduler,
+  type NativeReviewVisibleRange,
+} from "./reviewDiffHighlightScheduler";
 
 function createEmptyTokenPatch(resetKey: string): string {
   return JSON.stringify({ resetKey, tokensByRowId: {} });
@@ -43,23 +43,22 @@ export function useNativeReviewDiffHighlighting(input: {
 }) {
   const { enabled, files, resetKey, rows, scheme } = input;
   const highlightedRowIdsRef = useRef<Set<string>>(new Set());
-  const visibleRangeRef = useRef<NativeReviewVisibleRange>({
+  const [visibleRange, setVisibleRange] = useState<NativeReviewVisibleRange>({
     firstRowIndex: 0,
     lastRowIndex: 80,
   });
   const visibleChunkIndexRef = useRef(0);
   const [tokensPatchJson, setTokensPatchJson] = useState(() => createEmptyTokenPatch(resetKey));
-  const [visibleHighlightRequest, setVisibleHighlightRequest] = useState(0);
+  const [scheduler] = useState(() => createReviewDiffHighlightScheduler(setVisibleRange));
 
   useEffect(() => {
+    scheduler.reset();
     highlightedRowIdsRef.current = new Set();
     visibleChunkIndexRef.current = 0;
-    visibleRangeRef.current = { firstRowIndex: 0, lastRowIndex: 80 };
+    setVisibleRange({ firstRowIndex: 0, lastRowIndex: 80 });
     setTokensPatchJson(createEmptyTokenPatch(resetKey));
-    if (enabled && rows.length > 0) {
-      setVisibleHighlightRequest((request) => request + 1);
-    }
-  }, [enabled, resetKey, rows.length]);
+    return () => scheduler.cancel();
+  }, [enabled, resetKey, rows.length, scheduler]);
 
   useEffect(() => {
     if (!enabled || rows.length === 0) {
@@ -67,7 +66,7 @@ export function useNativeReviewDiffHighlighting(input: {
     }
 
     const abortController = new AbortController();
-    const requestRange = visibleRangeRef.current;
+    const requestRange = visibleRange;
     const engine: NativeReviewDiffHighlightEngine = "native";
 
     void (async () => {
@@ -119,22 +118,10 @@ export function useNativeReviewDiffHighlighting(input: {
     })();
 
     return () => abortController.abort();
-  }, [enabled, files, resetKey, rows, scheme, visibleHighlightRequest]);
-
-  const updateVisibleRange = useCallback((nextRange: NativeReviewVisibleRange) => {
-    const previousRange = visibleRangeRef.current;
-    const movedRows =
-      Math.abs(nextRange.firstRowIndex - previousRange.firstRowIndex) +
-      Math.abs(nextRange.lastRowIndex - previousRange.lastRowIndex);
-
-    visibleRangeRef.current = nextRange;
-    if (movedRows >= 20) {
-      setVisibleHighlightRequest((request) => request + 1);
-    }
-  }, []);
+  }, [enabled, files, resetKey, rows, scheme, visibleRange]);
 
   return {
     tokensPatchJson,
-    updateVisibleRange,
+    updateVisibleRange: scheduler.update,
   };
 }
diff --git a/apps/mobile/src/features/settings/appearance/useAppearanceCodeSurface.ts b/apps/mobile/src/features/settings/appearance/useAppearanceCodeSurface.ts
index 62760f1e43fa..5bd7bb469827 100644
--- a/apps/mobile/src/features/settings/appearance/useAppearanceCodeSurface.ts
+++ b/apps/mobile/src/features/settings/appearance/useAppearanceCodeSurface.ts
@@ -21,8 +21,8 @@ export function useAppearanceCodeSurface(): {
   );
   const nativeSourceStyle = useMemo(() => createNativeSourceStyle(codeSurface), [codeSurface]);
   const nativeReviewDiffStyle = useMemo(
-    () => createNativeReviewDiffStyle(codeSurface),
-    [codeSurface],
+    () => createNativeReviewDiffStyle(codeSurface, appearance.codeWordBreak),
+    [appearance.codeWordBreak, codeSurface],
   );
 
   return {
diff --git a/apps/mobile/src/features/threads/NewTaskDraftScreen.tsx b/apps/mobile/src/features/threads/NewTaskDraftScreen.tsx
index 9732ed6865f5..681f6c5ee52d 100644
--- a/apps/mobile/src/features/threads/NewTaskDraftScreen.tsx
+++ b/apps/mobile/src/features/threads/NewTaskDraftScreen.tsx
@@ -1455,7 +1455,7 @@ export function NewTaskDraftScreen(props: {
           <Text className="text-2xl font-t3-medium tracking-tight text-foreground">in </Text>
           <Pressable
             accessibilityHint="Opens the project picker"
-            accessibilityLabel={`Change project from ${selectedProject.title}`}
+            accessibilityLabel={selectedProject.title}
             accessibilityRole="button"
             disabled={isComposerInteractionLocked}
             onPress={chooseProject}
diff --git a/apps/mobile/src/lib/composerFiles.test.ts b/apps/mobile/src/lib/composerFiles.test.ts
index 962be35013f2..a99c2c6064e7 100644
--- a/apps/mobile/src/lib/composerFiles.test.ts
+++ b/apps/mobile/src/lib/composerFiles.test.ts
@@ -477,10 +477,13 @@ describe("composer file attachments", () => {
     it("applies the remaining attachment slots to photos and videos together", async () => {
       mocks.pickMedia.mockResolvedValue({ canceled: false, assets: [image, video] });
 
-      const result = await pickComposerMedia({ existingCount: 7, maxVideoBytes: 50 * 1024 * 1024 });
+      const result = await pickComposerMedia({
+        existingCount: 99,
+        maxVideoBytes: 50 * 1024 * 1024,
+      });
 
       expect(result.attachments).toEqual([expect.objectContaining({ type: "image" })]);
-      expect(result.error).toBe("You can attach up to 8 attachments per message.");
+      expect(result.error).toBe("You can attach up to 100 attachments per message.");
       expect(mocks.pickMedia).toHaveBeenCalledWith(expect.objectContaining({ selectionLimit: 1 }));
       expect(mocks.copy).not.toHaveBeenCalled();
     });
@@ -625,9 +628,9 @@ describe("composer file attachments", () => {
   });
 
   it("does not open the picker when the draft has no remaining attachment slots", async () => {
-    await expect(pickComposerFiles({ existingCount: 8 })).resolves.toEqual({
+    await expect(pickComposerFiles({ existingCount: 100 })).resolves.toEqual({
       files: [],
-      error: "You can attach up to 8 files per message.",
+      error: "You can attach up to 100 files per message.",
     });
 
     expect(mocks.pickFile).not.toHaveBeenCalled();
@@ -838,7 +841,7 @@ describe("composer file attachments", () => {
       ],
     });
 
-    const result = await pickComposerFiles({ existingCount: 7, maxBytes: 1024 * 1024 });
+    const result = await pickComposerFiles({ existingCount: 99, maxBytes: 1024 * 1024 });
 
     expect(result.files.map((file) => file.name)).toEqual(["report.pdf"]);
   });
diff --git a/apps/mobile/src/state/use-composer-drafts.test.ts b/apps/mobile/src/state/use-composer-drafts.test.ts
index 6da72860009e..9f5dad4d5600 100644
--- a/apps/mobile/src/state/use-composer-drafts.test.ts
+++ b/apps/mobile/src/state/use-composer-drafts.test.ts
@@ -676,7 +676,7 @@ describe("mobile composer drafts", () => {
         return undefined;
       });
       const key = "environment-1:replace-file";
-      const files = Array.from({ length: 8 }, (_, index) => ({
+      const files = Array.from({ length: 100 }, (_, index) => ({
         id: `file-${index}`,
         type: "file" as const,
         name: `notes-${index}.txt`,
@@ -687,8 +687,8 @@ describe("mobile composer drafts", () => {
       appendComposerDraftAttachments(key, files, { appendReference: true });
       const firstLink = "[notes-0.txt](t3-context://v1/file/file-0)";
       const insertion = captureComposerDraftInsertion(key, { start: 0, end: firstLink.length });
-      expect(countComposerDraftAttachmentsAfterSelection(key, insertion)).toBe(7);
-      expect(getComposerDraftAfterSelection(key, insertion).context?.records).toHaveLength(7);
+      expect(countComposerDraftAttachmentsAfterSelection(key, insertion)).toBe(99);
+      expect(getComposerDraftAfterSelection(key, insertion).context?.records).toHaveLength(99);
       const replacement = { ...files[0]!, id: "replacement", fileUri: "file:///replacement.txt" };
       if (kind === "attachment") {
         expect(
@@ -716,7 +716,7 @@ describe("mobile composer drafts", () => {
             insertion,
           ),
         ).toBe(true);
-        expect(getComposerDraftSnapshot(key).attachments).toHaveLength(8);
+        expect(getComposerDraftSnapshot(key).attachments).toHaveLength(100);
         expect(getComposerDraftSnapshot(key).context?.records).toContainEqual(record);
         expect(getComposerDraftSnapshot(key).text).toBe(
           `${formatComposerContextReference(record)}${insertion.text.slice(firstLink.length)}`,
@@ -730,7 +730,7 @@ describe("mobile composer drafts", () => {
       }
       const draft = getComposerDraftSnapshot(key);
       expect(draft.attachments.map((file) => file.id)).not.toContain("file-0");
-      expect(draft.attachments.slice(0, 7)).toEqual(files.slice(1));
+      expect(draft.attachments.slice(0, 99)).toEqual(files.slice(1));
       expect(draft.context?.records.some((record) => record.contextId === "file-0")).toBe(false);
       await cleanup.promise;
       expect(composerAttachmentCleanupMocks.remove).toHaveBeenCalledWith(files[0]!.fileUri);
@@ -746,7 +746,7 @@ describe("mobile composer drafts", () => {
       return undefined;
     });
     const key = "environment-1:concurrent-import";
-    const files = Array.from({ length: 8 }, (_, index) => ({
+    const files = Array.from({ length: 100 }, (_, index) => ({
       id: `existing-${index}`,
       type: "file" as const,
       name: `notes-${index}.txt`,
@@ -906,7 +906,7 @@ describe("mobile composer drafts", () => {
       fileUri: `file:///documents/t3-composer-attachments/${id}.mov`,
     });
     const draftKey = "new-task:environment-1:project-cap";
-    const existing = Array.from({ length: 7 }, (_, index) => makeAttachment(`held-${index}`));
+    const existing = Array.from({ length: 99 }, (_, index) => makeAttachment(`held-${index}`));
     appAtomRegistry.set(composerDraftsAtom, {
       [draftKey]: { text: "send this", attachments: existing },
     });
@@ -918,7 +918,7 @@ describe("mobile composer drafts", () => {
 
     expect(rejected).toBe(1);
     const draft = appAtomRegistry.get(composerDraftsAtom)[draftKey];
-    expect(draft?.attachments).toHaveLength(8);
+    expect(draft?.attachments).toHaveLength(100);
     expect(draft?.attachments.at(-1)?.id).toBe("incoming-1");
     await cleanup.promise;
     expect(composerAttachmentCleanupMocks.remove).toHaveBeenCalledExactlyOnceWith(
@@ -932,7 +932,7 @@ describe("mobile composer drafts", () => {
       { allowOverflow: true },
     );
     expect(overflowRejected).toBe(0);
-    expect(appAtomRegistry.get(composerDraftsAtom)[draftKey]?.attachments).toHaveLength(9);
+    expect(appAtomRegistry.get(composerDraftsAtom)[draftKey]?.attachments).toHaveLength(101);
   });
 
   it("keeps shared attachment files until every draft releases them", async () => {
@@ -2270,7 +2270,7 @@ describe("mobile composer drafts", () => {
       previewUri: "data:image/png;base64,YWJj",
     });
     const existingImage = image("existing");
-    const sharedImages = Array.from({ length: 8 }, (_, index) => image(`shared-${index}`));
+    const sharedImages = Array.from({ length: 100 }, (_, index) => image(`shared-${index}`));
 
     const merged = mergeComposerDraftContentState(
       { [draftKey]: { text: "", attachments: [existingImage] } },
@@ -2278,9 +2278,9 @@ describe("mobile composer drafts", () => {
       { text: "", attachments: sharedImages },
     );
 
-    expect(merged[draftKey]?.attachments).toHaveLength(8);
+    expect(merged[draftKey]?.attachments).toHaveLength(100);
     expect(merged[draftKey]?.attachments[0]).toEqual(existingImage);
-    expect(merged[draftKey]?.attachments.at(-1)?.id).toBe("shared-6");
+    expect(merged[draftKey]?.attachments.at(-1)?.id).toBe("shared-98");
   });
 
   it("restores the exact draft captured before an interrupted share import", () => {
diff --git a/apps/server/src/bin.test.ts b/apps/server/src/bin.test.ts
index 795bb05db148..9bc20fff84e1 100644
--- a/apps/server/src/bin.test.ts
+++ b/apps/server/src/bin.test.ts
@@ -15,6 +15,7 @@ import {
 } from "@t3tools/contracts";
 import * as NetService from "@t3tools/shared/Net";
 import { HostProcessEnvironment } from "@t3tools/shared/hostProcess";
+import { DEFAULT_SIGNAL_EXPORT } from "@t3tools/shared/observability";
 import { assert, it } from "@effect/vitest";
 import * as Effect from "effect/Effect";
 import * as DateTime from "effect/DateTime";
@@ -101,10 +102,10 @@ const makeCliTestServerConfig = (baseDir: string) =>
       otlpTracesUrl: undefined,
       otlpMetricsUrl: undefined,
       otlpLogsUrl: undefined,
-      otlpExportIntervalMs: 10_000,
+      otlpTracesExport: DEFAULT_SIGNAL_EXPORT,
+      otlpMetricsExport: DEFAULT_SIGNAL_EXPORT,
+      otlpLogsExport: DEFAULT_SIGNAL_EXPORT,
       otlpServiceName: "t3-server",
-      otlpHeaders: undefined,
-      otlpProtocol: "http/json",
       mode: "web",
       port: 0,
       host: "127.0.0.1",
diff --git a/apps/server/src/cli/config.test.ts b/apps/server/src/cli/config.test.ts
index aea753c3398f..34ea7f685364 100644
--- a/apps/server/src/cli/config.test.ts
+++ b/apps/server/src/cli/config.test.ts
@@ -17,6 +17,7 @@ import {
   type DesktopBackendBootstrap as DesktopBackendBootstrapValue,
 } from "@t3tools/contracts";
 import * as NetService from "@t3tools/shared/Net";
+import { DEFAULT_SIGNAL_EXPORT } from "@t3tools/shared/observability";
 import * as NodeServices from "@effect/platform-node/NodeServices";
 import { deriveServerPaths } from "../config.ts";
 import { resolveServerConfig } from "./config.ts";
@@ -51,10 +52,10 @@ it.layer(NodeServices.layer)("cli config resolution", (it) => {
     otlpTracesUrl: undefined,
     otlpMetricsUrl: undefined,
     otlpLogsUrl: undefined,
-    otlpExportIntervalMs: 10_000,
+    otlpTracesExport: DEFAULT_SIGNAL_EXPORT,
+    otlpMetricsExport: DEFAULT_SIGNAL_EXPORT,
+    otlpLogsExport: DEFAULT_SIGNAL_EXPORT,
     otlpServiceName: "t3-server",
-    otlpHeaders: undefined,
-    otlpProtocol: "http/json",
     devAllowedOrigins: [],
   } as const;
 
@@ -764,7 +765,7 @@ it.layer(NodeServices.layer)("cli config resolution", (it) => {
         ),
       );
 
-      expect(resolved.otlpHeaders).toEqual({
+      expect(resolved.otlpTracesExport.headers).toEqual({
         authorization: "Basic abc==",
         "x-tenant": "t3",
       });
@@ -808,7 +809,7 @@ it.layer(NodeServices.layer)("cli config resolution", (it) => {
         ),
       );
 
-      expect(resolved.otlpHeaders).toEqual({
+      expect(resolved.otlpTracesExport.headers).toEqual({
         authorization: "Bearer abc==",
         "x-tenant": "t3",
       });
@@ -816,7 +817,7 @@ it.layer(NodeServices.layer)("cli config resolution", (it) => {
     }),
   );
 
-  it.effect("reads the OTLP protocol from env", () =>
+  it.effect("gives every signal the protocol named without one", () =>
     Effect.gen(function* () {
       const { join } = yield* Path.Path;
       const baseDir = join(NodeOS.tmpdir(), "t3-cli-config-otlp-protocol-base");
@@ -848,7 +849,11 @@ it.layer(NodeServices.layer)("cli config resolution", (it) => {
         ),
       );
 
-      expect(resolved.otlpProtocol).toBe("http/protobuf");
+      expect([
+        resolved.otlpTracesExport.protocol,
+        resolved.otlpMetricsExport.protocol,
+        resolved.otlpLogsExport.protocol,
+      ]).toEqual(["http/protobuf", "http/protobuf", "http/protobuf"]);
     }),
   );
 
diff --git a/apps/server/src/cli/config.ts b/apps/server/src/cli/config.ts
index 32f465b6fb0a..09a30aeb19e7 100644
--- a/apps/server/src/cli/config.ts
+++ b/apps/server/src/cli/config.ts
@@ -1,5 +1,9 @@
 import * as NetService from "@t3tools/shared/Net";
-import { OtlpHeadersFromString, OtlpProtocol } from "@t3tools/shared/observability";
+import {
+  OtlpHeadersFromString,
+  OtlpProtocol,
+  type SignalExport,
+} from "@t3tools/shared/observability";
 import { parsePersistedServerObservabilitySettings } from "@t3tools/shared/serverSettings";
 import { DesktopBackendBootstrap, PortSchema } from "@t3tools/contracts";
 import * as Config from "effect/Config";
@@ -382,6 +386,14 @@ export const resolveServerConfig = (
     );
     const logLevel = Option.getOrElse(cliLogLevel, () => env.logLevel);
 
+    // T3 Code's own OTLP variables name no signal, so the one answer they give
+    // is the answer for all three.
+    const signalExport: SignalExport = {
+      protocol: env.otlpProtocol,
+      headers: env.otlpHeaders,
+      exportIntervalMs: env.otlpExportIntervalMs,
+    };
+
     const config: ServerConfig.ServerConfig["Service"] = {
       logLevel,
       traceMinLevel: env.traceMinLevel,
@@ -399,10 +411,10 @@ export const resolveServerConfig = (
         persistedObservabilitySettings.otlpMetricsUrl,
       otlpLogsUrl:
         env.otlpLogsUrl ?? bootstrap?.otlpLogsUrl ?? persistedObservabilitySettings.otlpLogsUrl,
-      otlpExportIntervalMs: env.otlpExportIntervalMs,
+      otlpTracesExport: signalExport,
+      otlpMetricsExport: signalExport,
+      otlpLogsExport: signalExport,
       otlpServiceName: env.otlpServiceName,
-      otlpHeaders: env.otlpHeaders,
-      otlpProtocol: env.otlpProtocol,
       mode,
       port,
       cwd,
diff --git a/apps/server/src/cli/pair.ts b/apps/server/src/cli/pair.ts
index 9ff9a8e13b39..493e6b719416 100644
--- a/apps/server/src/cli/pair.ts
+++ b/apps/server/src/cli/pair.ts
@@ -15,6 +15,7 @@ import {
   PortSchema,
 } from "@t3tools/contracts";
 import { resolveWorktreeT3Home } from "@t3tools/shared/devHome";
+import { DEFAULT_SIGNAL_EXPORT } from "@t3tools/shared/observability";
 import {
   buildTailscaleHttpsBaseUrl,
   DEFAULT_TAILSCALE_SERVE_PORT,
@@ -321,10 +322,10 @@ const makePairServerConfig = Effect.fn(function* (input: {
     otlpTracesUrl: undefined,
     otlpMetricsUrl: undefined,
     otlpLogsUrl: undefined,
-    otlpExportIntervalMs: 10_000,
+    otlpTracesExport: DEFAULT_SIGNAL_EXPORT,
+    otlpMetricsExport: DEFAULT_SIGNAL_EXPORT,
+    otlpLogsExport: DEFAULT_SIGNAL_EXPORT,
     otlpServiceName: "t3-server",
-    otlpHeaders: undefined,
-    otlpProtocol: "http/json",
     mode: "web",
     port: state.port,
     host: state.host,
diff --git a/apps/server/src/config.ts b/apps/server/src/config.ts
index 4835ebb40e44..5762ccdb6ff3 100644
--- a/apps/server/src/config.ts
+++ b/apps/server/src/config.ts
@@ -17,7 +17,7 @@ import type * as Redacted from "effect/Redacted";
 import * as Schema from "effect/Schema";
 
 import { sweepStalePendingAttachments } from "./attachmentStore.ts";
-import { OtlpProtocol } from "@t3tools/shared/observability";
+import { DEFAULT_SIGNAL_EXPORT, type SignalExport } from "@t3tools/shared/observability";
 
 export const DEFAULT_PORT = 3773;
 
@@ -73,10 +73,15 @@ export class ServerConfig extends Context.Service<
     readonly otlpTracesUrl: string | undefined;
     readonly otlpMetricsUrl: string | undefined;
     readonly otlpLogsUrl: string | undefined;
-    readonly otlpExportIntervalMs: number;
+    /**
+     * How each signal is exported. Read instead of a process-wide setting so
+     * the wire format, credential, and schedule travel with the endpoint they
+     * were configured beside.
+     */
+    readonly otlpTracesExport: SignalExport;
+    readonly otlpMetricsExport: SignalExport;
+    readonly otlpLogsExport: SignalExport;
     readonly otlpServiceName: string;
-    readonly otlpHeaders: Readonly<Record<string, string>> | undefined;
-    readonly otlpProtocol: OtlpProtocol;
     readonly mode: RuntimeMode;
     readonly port: number;
     readonly host: string | undefined;
@@ -212,10 +217,10 @@ const makeTest = Effect.fn("ServerConfig.makeTest")(function* (
     otlpTracesUrl: undefined,
     otlpMetricsUrl: undefined,
     otlpLogsUrl: undefined,
-    otlpExportIntervalMs: 10_000,
+    otlpTracesExport: DEFAULT_SIGNAL_EXPORT,
+    otlpMetricsExport: DEFAULT_SIGNAL_EXPORT,
+    otlpLogsExport: DEFAULT_SIGNAL_EXPORT,
     otlpServiceName: "t3-server",
-    otlpHeaders: undefined,
-    otlpProtocol: "http/json",
     cwd,
     baseDir,
     ...derivedPaths,
diff --git a/apps/server/src/device/DeviceService.test.ts b/apps/server/src/device/DeviceService.test.ts
index f1ed9a7f0253..183f24d95c5b 100644
--- a/apps/server/src/device/DeviceService.test.ts
+++ b/apps/server/src/device/DeviceService.test.ts
@@ -7,10 +7,12 @@ import {
   type DeviceServiceState,
 } from "@t3tools/contracts";
 import * as Effect from "effect/Effect";
+import * as Exit from "effect/Exit";
 import * as Deferred from "effect/Deferred";
 import * as Fiber from "effect/Fiber";
 import * as PubSub from "effect/PubSub";
 import * as Ref from "effect/Ref";
+import * as Schema from "effect/Schema";
 import * as Stream from "effect/Stream";
 import { HttpClient, HttpClientResponse } from "effect/unstable/http";
 import { ServerSettingsService } from "../serverSettings.ts";
@@ -19,6 +21,8 @@ import { NodeRuntimeUnavailableError } from "@t3tools/shared/nodeRuntime";
 
 import { type DeviceService, makeWithHosts, stateStream } from "./DeviceService.ts";
 
+const decodeJson = Schema.decodeUnknownSync(Schema.fromJsonString(Schema.Unknown));
+
 const baseState: DeviceServiceState = {
   hosts: [],
   hostStatus: "idle",
@@ -378,3 +382,192 @@ it.effect("keeps shutdown successful when subsequent discovery fails", () =>
     expect(state.devices.find((device) => device.id === session.deviceId)?.booted).toBe(false);
   }).pipe(Effect.scoped),
 );
+
+it.effect.each(["shutdown", "close"] as const)(
+  "%s releases iOS capture so reopening uses a fresh session",
+  (operation) =>
+    Effect.gen(function* () {
+      const deviceId = DeviceId.make("11111111-1111-1111-1111-111111111111");
+      const threadId = ThreadId.make("capture-recovery");
+      let booted = true;
+      let capture: number | null = null;
+      let generation = 0;
+      const ready: DeviceHost.DeviceHostReady = {
+        nodePath: process.execPath,
+        hub: { origin: "http://device.test" },
+        helpers: { serveSimAxSettings: null, serveSimCli: null },
+        run: () => Effect.succeed({ code: 0, stdout: "", stderr: "" }),
+      };
+      const host: DeviceHost.DeviceHost["Service"] = {
+        id: LOCAL_DEVICE_HOST_ID,
+        summary: Effect.succeed({
+          id: LOCAL_DEVICE_HOST_ID,
+          kind: "local",
+          label: "Simulator host",
+          platforms: [{ platform: "ios", available: true }],
+          hubInstalled: true,
+          agentDeviceInstalled: false,
+        }),
+        platformAvailability: (platform) => Effect.succeed({ platform, available: true }),
+        ensureReady: () => Effect.succeed(ready),
+        ensureAgentReady: () => Effect.die("Agent access is not used in this test"),
+        current: Effect.succeed(ready),
+        stopAgent: Effect.void,
+        stop: Effect.void,
+      };
+      const http = HttpClient.make((request) =>
+        Effect.sync(() => {
+          const path = new URL(request.url).pathname;
+          if (path === "/api/devices") {
+            return HttpClientResponse.fromWeb(
+              request,
+              Response.json({
+                emulators: [],
+                simulators: [
+                  {
+                    id: deviceId,
+                    name: "iPhone",
+                    platform: "ios",
+                    version: "26",
+                    physical: false,
+                    booted,
+                  },
+                ],
+              }),
+            );
+          }
+          if (path === "/vendor/serve-sim/grid/api/start") capture ??= ++generation;
+          else if (path === "/vendor/serve-sim/grid/api/shutdown") {
+            if (request.body._tag !== "Uint8Array") throw new Error("Missing shutdown body");
+            expect(decodeJson(new TextDecoder().decode(request.body.body))).toEqual({
+              udid: deviceId,
+            });
+            capture = null;
+            booted = false;
+          } else if (path === "/api/devices/shutdown") {
+            // This route powers off without releasing serve-sim's cached capture.
+            booted = false;
+          } else if (path === "/api/devices/boot") booted = true;
+          else throw new Error(`Unexpected hub path: ${path}`);
+          return HttpClientResponse.fromWeb(request, Response.json({ ok: true, id: deviceId }));
+        }),
+      );
+      const service = yield* makeWithHosts(new Map([[host.id, host]])).pipe(
+        Effect.provideService(HttpClient.HttpClient, http),
+      );
+      const input = { threadId, deviceId, platform: "ios" as const };
+      yield* service.open(input);
+      expect(capture).toBe(1);
+      if (operation === "shutdown") yield* service.shutdown(input);
+      else yield* service.close({ threadId, deviceId, shutdown: true });
+      expect(capture).toBeNull();
+      expect((yield* service.state).sessions).toEqual([]);
+      yield* service.open(input);
+      expect(capture).toBe(2);
+      expect((yield* service.state).sessions).toHaveLength(1);
+    }).pipe(
+      Effect.provide(ServerSettingsService.layerTest({ enableDeviceSupport: true })),
+      Effect.scoped,
+    ),
+);
+
+it.effect.each([
+  { hubReports: "off", outcome: "succeeds" },
+  { hubReports: "booted", outcome: "fails" },
+  { hubReports: "missing", outcome: "fails" },
+] as const)(
+  "iOS shutdown $outcome when serve-sim rejects it and the hub reports the simulator $hubReports",
+  ({ hubReports, outcome }) =>
+    Effect.gen(function* () {
+      const deviceId = DeviceId.make("22222222-2222-2222-2222-222222222222");
+      const paths: string[] = [];
+      // The device list is stale until shutdown re-reads it from the hub.
+      let listed: "booted" | "off" | "missing" = "booted";
+      const ready: DeviceHost.DeviceHostReady = {
+        nodePath: process.execPath,
+        hub: { origin: "http://device.test" },
+        helpers: { serveSimAxSettings: null, serveSimCli: null },
+        run: () => Effect.succeed({ code: 0, stdout: "", stderr: "" }),
+      };
+      const host: DeviceHost.DeviceHost["Service"] = {
+        id: LOCAL_DEVICE_HOST_ID,
+        summary: Effect.succeed({
+          id: LOCAL_DEVICE_HOST_ID,
+          kind: "local",
+          label: "Simulator host",
+          platforms: [{ platform: "ios", available: true }],
+          hubInstalled: true,
+          agentDeviceInstalled: false,
+        }),
+        platformAvailability: (platform) => Effect.succeed({ platform, available: true }),
+        ensureReady: () => Effect.succeed(ready),
+        ensureAgentReady: () => Effect.die("Agent access is not used in this test"),
+        current: Effect.succeed(ready),
+        stopAgent: Effect.void,
+        stop: Effect.void,
+      };
+      const http = HttpClient.make((request) =>
+        Effect.sync(() => {
+          const path = new URL(request.url).pathname;
+          paths.push(path);
+          if (path === "/api/devices") {
+            return HttpClientResponse.fromWeb(
+              request,
+              Response.json({
+                emulators: [],
+                simulators:
+                  listed === "missing"
+                    ? []
+                    : [
+                        {
+                          id: deviceId,
+                          name: "iPhone",
+                          platform: "ios",
+                          version: "26",
+                          physical: false,
+                          booted: listed === "booted",
+                        },
+                      ],
+                // A partial listing still decodes; it must not read as "off".
+                errors: listed === "missing" ? [{ message: "simctl list failed" }] : [],
+              }),
+            );
+          }
+          if (path === "/vendor/serve-sim/grid/api/shutdown") {
+            // serve-sim runs `simctl shutdown` bare and returns its failure as-is.
+            listed = hubReports;
+            return HttpClientResponse.fromWeb(
+              request,
+              Response.json(
+                { ok: false, error: "Unable to shutdown device in current state: Shutdown" },
+                { status: 500 },
+              ),
+            );
+          }
+          throw new Error(`Unexpected hub path: ${path}`);
+        }),
+      );
+      const service = yield* makeWithHosts(new Map([[host.id, host]])).pipe(
+        Effect.provideService(HttpClient.HttpClient, http),
+      );
+      yield* service.list;
+      const exit = yield* Effect.exit(service.shutdown({ deviceId, platform: "ios" }));
+      expect(paths.filter((path) => path.endsWith("shutdown"))).toEqual([
+        "/vendor/serve-sim/grid/api/shutdown",
+      ]);
+      if (outcome === "succeeds") {
+        expect(Exit.isSuccess(exit)).toBe(true);
+        expect(
+          (yield* service.state).devices.find((device) => device.id === deviceId)?.booted,
+        ).toBe(false);
+      } else {
+        expect(Exit.isFailure(exit)).toBe(true);
+        expect(
+          (yield* service.state).devices.find((device) => device.id === deviceId)?.booted,
+        ).toBe(true);
+      }
+    }).pipe(
+      Effect.provide(ServerSettingsService.layerTest({ enableDeviceSupport: true })),
+      Effect.scoped,
+    ),
+);
diff --git a/apps/server/src/device/DeviceService.ts b/apps/server/src/device/DeviceService.ts
index 30e1f18c0497..45a2f928ecaa 100644
--- a/apps/server/src/device/DeviceService.ts
+++ b/apps/server/src/device/DeviceService.ts
@@ -670,25 +670,44 @@ export const makeWithHosts = Effect.fn("DeviceService.makeWithHosts")(function*
     platform: DevicePlatform,
   ) {
     const ready = yield* readiness(hostId);
-    yield* HttpClientRequest.post(`${ready.hub.origin}/api/devices/shutdown`).pipe(
-      HttpClientRequest.bodyJson({ platform, id: deviceId }),
-      Effect.mapError(
-        (cause) =>
-          new DeviceOperationError({ operation: "shutdown", reason: "invalid_payload", cause }),
-      ),
-      Effect.flatMap((request) => hubJson(request, HubActionResult, "shutdown")),
-      Effect.flatMap((result) =>
-        result.ok
-          ? Effect.void
-          : Effect.fail(
-              new DeviceOperationError({
-                operation: "shutdown",
-                reason: "hub_rejected",
-                cause: result,
-              }),
+    const postShutdown = (path: string, body: Record<string, string>) =>
+      HttpClientRequest.post(`${ready.hub.origin}${path}`).pipe(
+        HttpClientRequest.bodyJson(body),
+        Effect.mapError(
+          (cause) =>
+            new DeviceOperationError({ operation: "shutdown", reason: "invalid_payload", cause }),
+        ),
+        Effect.flatMap((request) => hubJson(request, HubActionResult, "shutdown")),
+        Effect.flatMap((result) =>
+          result.ok
+            ? Effect.void
+            : Effect.fail(
+                new DeviceOperationError({
+                  operation: "shutdown",
+                  reason: "hub_rejected",
+                  cause: result,
+                }),
+              ),
+        ),
+      );
+    // serve-sim's shutdown closes its in-process capture session before it runs
+    // `simctl shutdown`; the hub's generic shutdown can leave that session cached
+    // across a reboot. serve-sim runs simctl bare, though, so a simulator that is
+    // already off fails there. Accept that failure only when the hub confirms
+    // the simulator is off; a failure on a running one still surfaces.
+    yield* platform === "ios"
+      ? postShutdown(`${vendorPrefix("ios")}/grid/api/shutdown`, { udid: deviceId }).pipe(
+          Effect.catch((cause) =>
+            fetchDevices(ready).pipe(
+              Effect.flatMap(({ devices }) =>
+                devices.find((device) => device.id === deviceId)?.booted === false
+                  ? Effect.logInfo("iOS simulator was already shut down", { deviceId })
+                  : Effect.fail(cause),
+              ),
             ),
-      ),
-    );
+          ),
+        )
+      : postShutdown("/api/devices/shutdown", { platform, id: deviceId });
     yield* publish((state) => ({
       ...state,
       devices: state.devices.map((device) =>
diff --git a/apps/server/src/device/DeviceToolchain.ts b/apps/server/src/device/DeviceToolchain.ts
index 4d59cb462383..0493902302b3 100644
--- a/apps/server/src/device/DeviceToolchain.ts
+++ b/apps/server/src/device/DeviceToolchain.ts
@@ -25,9 +25,9 @@ import * as Semaphore from "effect/Semaphore";
 import * as ProcessRunner from "../processRunner.ts";
 
 const DEVICE_HUB_PACKAGE = "expo-device-hub";
-export const DEVICE_HUB_VERSION = "0.9.0";
+export const DEVICE_HUB_VERSION = "0.10.1";
 const AGENT_DEVICE_PACKAGE = "agent-device";
-export const AGENT_DEVICE_VERSION = "0.20.10";
+export const AGENT_DEVICE_VERSION = "0.21.7";
 
 const INSTALL_TIMEOUT = Duration.minutes(10);
 const installLock = Semaphore.makeUnsafe(1);
diff --git a/apps/server/src/environment/ServerEnvironment.test.ts b/apps/server/src/environment/ServerEnvironment.test.ts
index 0ccf8de691eb..b4758e980065 100644
--- a/apps/server/src/environment/ServerEnvironment.test.ts
+++ b/apps/server/src/environment/ServerEnvironment.test.ts
@@ -10,6 +10,8 @@ import * as Option from "effect/Option";
 import * as PlatformError from "effect/PlatformError";
 import * as Schema from "effect/Schema";
 
+import { DEFAULT_SIGNAL_EXPORT } from "@t3tools/shared/observability";
+
 import * as ServerSecretStore from "../auth/ServerSecretStore.ts";
 import {
   PUBLISH_AGENT_ACTIVITY_SECRET,
@@ -54,10 +56,10 @@ const makeServerConfig = Effect.fn(function* (baseDir: string) {
     otlpTracesUrl: undefined,
     otlpMetricsUrl: undefined,
     otlpLogsUrl: undefined,
-    otlpExportIntervalMs: 10_000,
+    otlpTracesExport: DEFAULT_SIGNAL_EXPORT,
+    otlpMetricsExport: DEFAULT_SIGNAL_EXPORT,
+    otlpLogsExport: DEFAULT_SIGNAL_EXPORT,
     otlpServiceName: "t3-server",
-    otlpHeaders: undefined,
-    otlpProtocol: "http/json",
     cwd: process.cwd(),
     baseDir,
     mode: "web",
diff --git a/apps/server/src/http.ts b/apps/server/src/http.ts
index 879ca66ca60a..7533b8c1db19 100644
--- a/apps/server/src/http.ts
+++ b/apps/server/src/http.ts
@@ -322,7 +322,7 @@ export const otlpTracesProxyRouteLayer = HttpRouter.add(
     const request = yield* HttpServerRequest.HttpServerRequest;
     const config = yield* ServerConfig.ServerConfig;
     const otlpTracesUrl = config.otlpTracesUrl;
-    const otlpHeaders = config.otlpHeaders;
+    const otlpHeaders = config.otlpTracesExport.headers;
     const browserTraceCollector = yield* BrowserTraceCollector.BrowserTraceCollector;
     const httpClient = yield* HttpClient.HttpClient;
     const serialization = yield* OtlpSerialization.OtlpSerialization;
diff --git a/apps/server/src/observability/Layers/Observability.ts b/apps/server/src/observability/Layers/Observability.ts
index 0c9acdfb1ee3..8f7b607745f4 100644
--- a/apps/server/src/observability/Layers/Observability.ts
+++ b/apps/server/src/observability/Layers/Observability.ts
@@ -20,7 +20,11 @@ import * as BrowserTraceCollector from "../BrowserTraceCollector.ts";
 export const ObservabilityLive = Layer.unwrap(
   Effect.gen(function* () {
     const config = yield* ServerConfig.ServerConfig;
-    const serializationLayer = otlpSerializationLayer(config.otlpProtocol);
+    const traces = config.otlpTracesExport;
+    const metrics = config.otlpMetricsExport;
+    // The trace serializer stays in the returned context because the browser
+    // trace forwarder exports on the same signal.
+    const serializationLayer = otlpSerializationLayer(traces.protocol);
     const resource = ServerConfig.otlpResource(config);
     const attribution = yield* ResourceAttribution.ResourceAttribution;
 
@@ -51,8 +55,8 @@ export const ObservabilityLive = Layer.unwrap(
             ? undefined
             : yield* OtlpTracer.make({
                 url: config.otlpTracesUrl,
-                exportInterval: `${config.otlpExportIntervalMs} millis`,
-                headers: config.otlpHeaders,
+                exportInterval: `${traces.exportIntervalMs} millis`,
+                headers: traces.headers,
                 resource,
               });
 
@@ -77,10 +81,10 @@ export const ObservabilityLive = Layer.unwrap(
         ? Layer.empty
         : OtlpMetrics.layer({
             url: config.otlpMetricsUrl,
-            exportInterval: `${config.otlpExportIntervalMs} millis`,
-            headers: config.otlpHeaders,
+            exportInterval: `${metrics.exportIntervalMs} millis`,
+            headers: metrics.headers,
             resource,
-          }).pipe(Layer.provideMerge(serializationLayer));
+          }).pipe(Layer.provide(otlpSerializationLayer(metrics.protocol)));
 
     return Layer.mergeAll(ServerLoggerLive, traceReferencesLayer, tracerLayer, metricsLayer);
   }),
diff --git a/apps/server/src/orchestration/Normalizer.attachments.test.ts b/apps/server/src/orchestration/Normalizer.attachments.test.ts
index 51c70d7401ae..d44ec58e6a95 100644
--- a/apps/server/src/orchestration/Normalizer.attachments.test.ts
+++ b/apps/server/src/orchestration/Normalizer.attachments.test.ts
@@ -13,6 +13,7 @@ import {
   ThreadId,
 } from "@t3tools/contracts";
 import * as Effect from "effect/Effect";
+import * as FileSystem from "effect/FileSystem";
 import * as Layer from "effect/Layer";
 import * as Schema from "effect/Schema";
 
@@ -59,6 +60,53 @@ function turnStartCommand(input: {
 }
 
 describe("normalizeDispatchCommand attachments", () => {
+  it.effect("accepts 100 inline images and rejects 101 before writing files", () =>
+    Effect.gen(function* () {
+      const config = yield* ServerConfig.ServerConfig;
+      const attachments = Array.from({ length: 100 }, () => ({
+        dataUrl: "data:image/png;base64,cGl4ZWxz",
+        sizeBytes: 6,
+      }));
+      const rejected = yield* normalizeDispatchCommand(
+        turnStartCommand({ attachments: [...attachments, attachments[0]!] }),
+      ).pipe(Effect.flip);
+      expect(rejected.message).toContain("up to 100");
+      expect(NodeFS.readdirSync(config.attachmentsDir)).toEqual([]);
+      const accepted = yield* normalizeDispatchCommand(turnStartCommand({ attachments }));
+      if (accepted.type !== "thread.turn.start") throw new Error("Wrong command");
+      expect(accepted.message.attachments).toHaveLength(100);
+      expect(NodeFS.readdirSync(config.attachmentsDir)).toHaveLength(100);
+    }).pipe(Effect.provide(testLayer)),
+  );
+
+  it.effect("rejects decoded image overflow before writing it and removes earlier files", () =>
+    Effect.gen(function* () {
+      const config = yield* ServerConfig.ServerConfig;
+      const fileSystem = yield* FileSystem.FileSystem;
+      let writtenBytes = 0;
+      const dataUrl = `data:image/png;base64,${Buffer.alloc(10 * 1024 * 1024).toString("base64")}`;
+      const command = turnStartCommand({
+        attachments: [
+          ...Array.from({ length: 8 }, () => ({ dataUrl, sizeBytes: 1 })),
+          { dataUrl: "data:image/png;base64,YQ==", sizeBytes: 0 },
+        ],
+      });
+      const error = yield* normalizeDispatchCommand(command).pipe(
+        Effect.provideService(FileSystem.FileSystem, {
+          ...fileSystem,
+          writeFile: (path, data, options) => {
+            writtenBytes += data.byteLength;
+            return fileSystem.writeFile(path, data, options);
+          },
+        }),
+        Effect.flip,
+      );
+      expect(error.message).toContain("80 MiB");
+      expect(writtenBytes).toBe(80 * 1024 * 1024);
+      expect(NodeFS.readdirSync(config.attachmentsDir)).toEqual([]);
+    }).pipe(Effect.provide(testLayer)),
+  );
+
   it.effect("rejects duplicate client ids before persisting attachments", () =>
     Effect.gen(function* () {
       const error = yield* normalizeDispatchCommand(
@@ -464,25 +512,25 @@ describe("question attachments", () => {
         answers: { first: "", second: "" },
         createdAt: "2026-08-01T00:00:00.000Z",
         attachmentsByQuestionId: {
-          first: Array.from({ length: 4 }, () => attachment),
-          second: Array.from({ length: 5 }, () => attachment),
+          first: Array.from({ length: 50 }, () => attachment),
+          second: Array.from({ length: 51 }, () => attachment),
         },
       };
       const failure = yield* normalizeDispatchCommand(command).pipe(Effect.flip);
-      expect(failure.message).toContain("up to 8");
+      expect(failure.message).toContain("up to 100");
       expect(NodeFS.readdirSync(config.attachmentsDir)).toEqual([`${id}.txt`]);
       const accepted = {
         ...command,
         attachmentsByQuestionId: {
           ...command.attachmentsByQuestionId,
-          second: Array.from({ length: 4 }, () => attachment),
+          second: Array.from({ length: 50 }, () => attachment),
         },
       };
       const normalized = yield* normalizeDispatchCommand(accepted);
       if (normalized.type !== "thread.user-input.respond") throw new Error("Wrong command");
       const attachments = Object.values(normalized.attachmentsByQuestionId!).flat();
-      expect(attachments).toHaveLength(8);
-      expect(new Set(attachments.map((item) => item.id)).size).toBe(8);
+      expect(attachments).toHaveLength(100);
+      expect(new Set(attachments.map((item) => item.id)).size).toBe(100);
       for (const item of attachments) {
         expect(item.name).toBe(attachment.name);
         expect(
diff --git a/apps/server/src/orchestration/Normalizer.ts b/apps/server/src/orchestration/Normalizer.ts
index bef58adc0581..d4959f39af59 100644
--- a/apps/server/src/orchestration/Normalizer.ts
+++ b/apps/server/src/orchestration/Normalizer.ts
@@ -5,7 +5,7 @@ import * as Path from "effect/Path";
 import {
   type ClientOrchestrationCommand,
   type UserInputAttachments,
-  PROVIDER_SEND_TURN_MAX_ATTACHMENTS,
+  getProviderAttachmentLimitError,
   type IsoDateTime,
   type OrchestrationCommand,
   OrchestrationDispatchCommandError,
@@ -142,13 +142,9 @@ export const normalizeDispatchCommand = (command: ClientOrchestrationCommand) =>
       canonicalCommand.type === "thread.turn.start"
         ? canonicalCommand.message.attachments
         : Object.values(canonicalCommand.attachmentsByQuestionId ?? {}).flat();
-    if (
-      canonicalCommand.type === "thread.user-input.respond" &&
-      attachments.length > PROVIDER_SEND_TURN_MAX_ATTACHMENTS
-    ) {
-      return yield* new OrchestrationDispatchCommandError({
-        message: `You can attach up to ${PROVIDER_SEND_TURN_MAX_ATTACHMENTS} files per question response.`,
-      });
+    const attachmentLimitError = getProviderAttachmentLimitError(attachments);
+    if (attachmentLimitError) {
+      return yield* new OrchestrationDispatchCommandError({ message: attachmentLimitError });
     }
     if (canonicalCommand.type === "thread.turn.start") {
       const clientAttachmentIds = new Set<string>();
@@ -163,11 +159,12 @@ export const normalizeDispatchCommand = (command: ClientOrchestrationCommand) =>
       }
     }
     const claimedAttachmentPaths: string[] = [];
+    const attachmentsWithDecodedSizes = [...attachments];
     // Context records bind to attachments by the id the client knew; they follow the rename.
     const finalAttachmentIdByClientId = new Map<string, string>();
     const normalizedAttachments = yield* Effect.forEach(
       attachments,
-      (attachment) =>
+      (attachment, index) =>
         Effect.gen(function* () {
           if (!("dataUrl" in attachment)) {
             const claim = planAttachmentClaim({
@@ -259,6 +256,11 @@ export const normalizeDispatchCommand = (command: ClientOrchestrationCommand) =>
             sizeBytes: bytes.byteLength,
             ...(attachment.source ? { source: attachment.source } : {}),
           };
+          attachmentsWithDecodedSizes[index] = persistedAttachment;
+          const decodedLimitError = getProviderAttachmentLimitError(attachmentsWithDecodedSizes);
+          if (decodedLimitError) {
+            return yield* new OrchestrationDispatchCommandError({ message: decodedLimitError });
+          }
 
           const attachmentPath = resolveAttachmentPath({
             attachmentsDir: serverConfig.attachmentsDir,
@@ -286,6 +288,7 @@ export const normalizeDispatchCommand = (command: ClientOrchestrationCommand) =>
                 }),
             ),
           );
+          claimedAttachmentPaths.push(attachmentPath);
           if (attachment.id !== undefined) {
             finalAttachmentIdByClientId.set(attachment.id, attachmentId);
           }
diff --git a/apps/server/src/pullRequest/PullRequestService.test.ts b/apps/server/src/pullRequest/PullRequestService.test.ts
index 9d563d3965c3..a0d111bd710f 100644
--- a/apps/server/src/pullRequest/PullRequestService.test.ts
+++ b/apps/server/src/pullRequest/PullRequestService.test.ts
@@ -3404,6 +3404,67 @@ it.effect("a listing narrowed to some projects is its own cache entry", () =>
   }),
 );
 
+it.effect(
+  "keeps listing freshness tied to read start when filtered reads finish out of order",
+  () =>
+    Effect.gen(function* () {
+      const olderStarted = yield* Deferred.make<void>();
+      const releaseOlder = yield* Deferred.make<void>();
+      let reads = 0;
+      const updatedAt = "2026-07-02T00:00:00Z";
+      const service = yield* makeService({
+        projects: [
+          project({ id: "p1", title: "web", workspaceRoot: "/a", repository: "acme/web" }),
+        ],
+        providers: [
+          fakeProvider("github", {
+            listChangeRequests: ({ filters }) =>
+              Effect.gen(function* () {
+                reads += 1;
+                const older = filters?.checks === "failing";
+                if (older) {
+                  yield* Deferred.succeed(olderStarted, undefined);
+                  yield* Deferred.await(releaseOlder);
+                }
+                return {
+                  items: [
+                    {
+                      ...changeRequest(1, updatedAt),
+                      checksState: older ? ("failing" as const) : ("passing" as const),
+                      mergeability: older ? ("mergeable" as const) : ("conflicting" as const),
+                    },
+                  ],
+                  truncated: false,
+                  continues: false,
+                };
+              }),
+          }),
+        ],
+      });
+      const olderInput = { state: "open" as const, filters: { checks: "failing" as const } };
+      const newerInput = { state: "open" as const, filters: { checks: "passing" as const } };
+
+      const olderRead = yield* service.list(olderInput).pipe(Effect.forkChild());
+      yield* Deferred.await(olderStarted);
+      yield* TestClock.adjust("1 second");
+      const newer = yield* service.list(newerInput);
+      yield* Deferred.succeed(releaseOlder, undefined);
+      const older = yield* Fiber.join(olderRead);
+
+      assert.strictEqual(older.entries[0]?.checksState, "failing");
+      assert.strictEqual(older.entries[0]?.mergeability, "mergeable");
+      assert.strictEqual(newer.entries[0]?.checksState, "passing");
+      assert.strictEqual(newer.entries[0]?.mergeability, "conflicting");
+      assert.strictEqual(typeof older.entries[0]?.observedAt, "number");
+      assert.strictEqual(typeof newer.entries[0]?.observedAt, "number");
+      assert.isBelow(older.entries[0]!.observedAt!, newer.entries[0]!.observedAt!);
+
+      const cachedOlder = yield* service.list(olderInput);
+      assert.strictEqual(cachedOlder.entries[0]?.observedAt, older.entries[0]?.observedAt);
+      assert.strictEqual(reads, 2);
+    }),
+);
+
 it.effect("keeps unrelated PRs warm after a mutation, explicit refresh, and project turn", () =>
   Effect.gen(function* () {
     const calls: string[] = [];
diff --git a/apps/server/src/pullRequest/PullRequestService.ts b/apps/server/src/pullRequest/PullRequestService.ts
index a653ef94c713..6b4b2bd8bfd5 100644
--- a/apps/server/src/pullRequest/PullRequestService.ts
+++ b/apps/server/src/pullRequest/PullRequestService.ts
@@ -611,6 +611,12 @@ function withRateLimitBackoff(
     Record<Exclude<keyof PullRequestProviderApi, keyof typeof wrapped>, never>;
 }
 
+// Capture before the provider read so a slow response keeps its original freshness through caches.
+const observeRead = Effect.fnUntraced(function* <A, E, R>(read: Effect.Effect<A, E, R>) {
+  const observedAt = yield* Clock.currentTimeMillis;
+  return { value: yield* read, observedAt };
+});
+
 export const make = Effect.gen(function* () {
   const mergedPullRequests = yield* PubSub.sliding<PullRequestMergeEvent>(64);
   const pullRequestRefreshes = yield* SubscriptionRef.make(0);
@@ -1076,6 +1082,7 @@ export const make = Effect.gen(function* () {
     readonly project: SupportedProject;
     readonly item: ProviderChangeRequest;
     readonly viewer: string;
+    readonly observedAt: number;
   }): PullRequestListEntry => {
     const viewer = input.viewer.toLowerCase();
     return {
@@ -1098,6 +1105,7 @@ export const make = Effect.gen(function* () {
       deletions: input.item.deletions,
       createdAt: input.item.createdAt,
       updatedAt: input.item.updatedAt,
+      observedAt: input.observedAt,
       ...(input.item.checksState === undefined || input.item.checksState === null
         ? {}
         : { checksState: input.item.checksState }),
@@ -1246,7 +1254,8 @@ export const make = Effect.gen(function* () {
                   }),
             })
             .pipe(
-              Effect.map((page): RepositoryBatch => {
+              observeRead,
+              Effect.map(({ value: page, observedAt }): RepositoryBatch => {
                 // The boundary instant was asked for inclusively, so the rows already sent at it
                 // come back with the slice. Dropping them here rather than asking for strictly
                 // older is what keeps their neighbours at the same instant from being skipped.
@@ -1262,7 +1271,7 @@ export const make = Effect.gen(function* () {
                   key,
                   entries: items
                     .filter((item) => matchesRowFilters(item, input.filters, viewer))
-                    .map((item) => toEntry({ project, item, viewer })),
+                    .map((item) => toEntry({ project, item, viewer, observedAt })),
                   errors: [],
                   truncated: page.truncated,
                   nextCursor:
@@ -1323,7 +1332,8 @@ export const make = Effect.gen(function* () {
             ? {}
             : { cursor: { updatedBefore: cursor.updatedBefore, delivered: cursor.delivered } }),
         }).pipe(
-          Effect.flatMap((page) =>
+          observeRead,
+          Effect.flatMap(({ value: page, observedAt }) =>
             Effect.flatMap(Clock.currentTimeMillis, (now) => {
               const rows = new Map<string, Array<ProviderChangeRequest>>();
               for (const [key, visibleAt] of searchVisibleAt) {
@@ -1384,7 +1394,7 @@ export const make = Effect.gen(function* () {
                     key: project.cursorKey,
                     entries: items
                       .filter((item) => matchesRowFilters(item, input.filters, viewer))
-                      .map((item) => toEntry({ project, item, viewer })),
+                      .map((item) => toEntry({ project, item, viewer, observedAt })),
                     errors: [],
                     truncated: page.truncated,
                     nextCursor:
@@ -1551,7 +1561,8 @@ export const make = Effect.gen(function* () {
             : project.api.getChangeRequestSummary(providerInput);
         return read.pipe(
           Effect.mapError(toPullRequestError("summary")),
-          Effect.map((changeRequest): PullRequestSummary => ({
+          observeRead,
+          Effect.map(({ value: changeRequest, observedAt }): PullRequestSummary => ({
             provider: project.api.kind,
             projectId: project.project.id,
             repository: project.repository,
@@ -1564,6 +1575,7 @@ export const make = Effect.gen(function* () {
             closedAt: changeRequest.closedAt ?? null,
             mergedAt: changeRequest.mergedAt ?? null,
             updatedAt: changeRequest.updatedAt,
+            observedAt,
             ...(changeRequest.isDraft === undefined ? {} : { isDraft: changeRequest.isDraft }),
             ...(changeRequest.author === undefined ? {} : { author: changeRequest.author }),
             ...(changeRequest.additions === undefined
@@ -1634,12 +1646,12 @@ export const make = Effect.gen(function* () {
                 host: project.host,
                 number: input.number,
               })
-              .pipe(Effect.mapError(toPullRequestError("detail"))),
+              .pipe(Effect.mapError(toPullRequestError("detail")), observeRead),
             viewerOf(project),
           ],
           { concurrency: 2 },
         ).pipe(
-          Effect.map(([changeRequest, viewer]): PullRequestDetail => ({
+          Effect.map(([{ value: changeRequest, observedAt }, viewer]): PullRequestDetail => ({
             provider: project.api.kind,
             capabilities: project.api.capabilities,
             projectId: project.project.id,
@@ -1664,6 +1676,7 @@ export const make = Effect.gen(function* () {
             baseBranch: changeRequest.baseBranch,
             createdAt: changeRequest.createdAt,
             updatedAt: changeRequest.updatedAt,
+            observedAt,
             mergedAt: changeRequest.mergedAt,
             closedAt: changeRequest.closedAt,
             reviewers: changeRequest.reviewers,
@@ -2894,12 +2907,14 @@ export const make = Effect.gen(function* () {
     closedAt: detail.closedAt,
     mergedAt: detail.mergedAt,
     updatedAt: detail.updatedAt,
+    observedAt: detail.observedAt,
   });
   const shouldReplaceHeldSummary = (key: string, next: PullRequestSummary) => {
     const current = lastGoodSummary.peek(key);
     if (current === undefined) return true;
     if (current.state === "merged" && next.state !== "merged") return false;
-    return next.updatedAt >= current.updatedAt;
+    if (next.updatedAt !== current.updatedAt) return next.updatedAt > current.updatedAt;
+    return (next.observedAt ?? -Infinity) >= (current.observedAt ?? -Infinity);
   };
   const detail: PullRequestService["Service"]["detail"] = (input) => {
     const key = refCacheKey(input);
diff --git a/apps/server/src/pullRequest/gitHubPullRequestJson.test.ts b/apps/server/src/pullRequest/gitHubPullRequestJson.test.ts
index 4591ac0437bf..81033e2e0d94 100644
--- a/apps/server/src/pullRequest/gitHubPullRequestJson.test.ts
+++ b/apps/server/src/pullRequest/gitHubPullRequestJson.test.ts
@@ -97,6 +97,40 @@ describe("pull request list decoding", () => {
     ]);
   });
 
+  it("takes the verdict from the latest reviews when GitHub summarizes none, as for a bot's approval", () => {
+    const batch = expectSuccess(
+      decodePullRequestListJson(
+        listJson([
+          {
+            reviewDecision: null,
+            latestReviews: [{ author: { login: "macroscopeapp" }, state: "APPROVED" }],
+          },
+          {
+            reviewDecision: "REVIEW_REQUIRED",
+            latestReviews: [
+              { author: { login: "octocat" }, state: "APPROVED" },
+              { author: { login: "hubot" }, state: "CHANGES_REQUESTED" },
+            ],
+          },
+          {
+            reviewDecision: "APPROVED",
+            latestReviews: [{ author: { login: "hubot" }, state: "CHANGES_REQUESTED" }],
+          },
+          {
+            reviewDecision: null,
+            latestReviews: [{ author: { login: "octocat" }, state: "COMMENTED" }],
+          },
+        ]),
+      ),
+    );
+    expect(batch.items.map((entry) => entry.reviewDecision)).toEqual([
+      "approved",
+      "changes-requested",
+      "approved",
+      null,
+    ]);
+  });
+
   it("rolls the head commit's checks up to the one word a row has space for", () => {
     const batch = expectSuccess(
       decodePullRequestListJson(
@@ -121,6 +155,13 @@ describe("pull request list decoding", () => {
           { statusCheckRollup: [{ context: "ci/legacy", state: "ERROR" }] },
           // Neither a pass, a failure nor a wait is no verdict rather than a green tick.
           { statusCheckRollup: [{ name: "lint", status: "COMPLETED", conclusion: "SKIPPED" }] },
+          // Cancelled reads as failing here and in the detail header, so the two never flap.
+          {
+            statusCheckRollup: [
+              { name: "lint", status: "COMPLETED", conclusion: "SUCCESS" },
+              { name: "test", status: "COMPLETED", conclusion: "CANCELLED" },
+            ],
+          },
           { statusCheckRollup: [] },
           {},
         ]),
@@ -132,6 +173,7 @@ describe("pull request list decoding", () => {
       "passing",
       "failing",
       null,
+      "failing",
       null,
       null,
     ]);
diff --git a/apps/server/src/pullRequest/gitHubPullRequestJson.ts b/apps/server/src/pullRequest/gitHubPullRequestJson.ts
index a011702d685e..eaaa4e34da84 100644
--- a/apps/server/src/pullRequest/gitHubPullRequestJson.ts
+++ b/apps/server/src/pullRequest/gitHubPullRequestJson.ts
@@ -68,6 +68,12 @@ const RawReviewRequestSchema = Schema.Struct({
   name: Schema.optional(Schema.NullOr(Schema.String)),
 });
 
+/** One reviewer's most recent review: the state is all the verdict needs, the author is for who. */
+const RawLatestReviewSchema = Schema.Struct({
+  author: Schema.optional(Schema.NullOr(RawActorSchema)),
+  state: Schema.optional(Schema.NullOr(Schema.String)),
+});
+
 const RawCheckSchema = Schema.Struct({
   __typename: Schema.optional(Schema.String),
   name: Schema.optional(Schema.NullOr(Schema.String)),
@@ -106,6 +112,7 @@ const RawListItemSchema = Schema.Struct({
   updatedAt: Schema.String,
   mergedAt: Schema.optional(Schema.NullOr(Schema.String)),
   reviewRequests: Schema.optional(Schema.Array(RawReviewRequestSchema)),
+  latestReviews: Schema.optional(Schema.NullOr(Schema.Array(RawLatestReviewSchema))),
   labels: Schema.optional(Schema.Array(RawLabelSchema)),
   /**
    * Every check of the head commit, which is the only rollup `gh pr list --json` can give: there
@@ -143,6 +150,9 @@ const RawSearchItemSchema = Schema.Struct({
   isDraft: Schema.optional(Schema.Boolean),
   mergeable: Schema.optional(Schema.NullOr(Schema.String)),
   reviewDecision: Schema.optional(Schema.NullOr(Schema.String)),
+  latestReviews: Schema.optional(
+    Schema.NullOr(Schema.Struct({ nodes: Schema.Array(Schema.NullOr(RawLatestReviewSchema)) })),
+  ),
   createdAt: Schema.String,
   updatedAt: Schema.String,
   mergedAt: Schema.optional(Schema.NullOr(Schema.String)),
@@ -514,13 +524,7 @@ const RawReviewThreadsSchema = Schema.Struct({
           ),
         ),
         latestReviews: Schema.optional(
-          Schema.NullOr(
-            Schema.Struct({
-              nodes: Schema.Array(
-                Schema.Struct({ author: Schema.optional(Schema.NullOr(RawActorSchema)) }),
-              ),
-            }),
-          ),
+          Schema.NullOr(Schema.Struct({ nodes: Schema.Array(RawLatestReviewSchema) })),
         ),
         reviewDismissals: Schema.optional(
           Schema.NullOr(
@@ -698,7 +702,7 @@ export function decodeActorAvatarsJson(
 }
 
 export const PULL_REQUEST_LIST_JSON_FIELDS =
-  "number,title,url,author,headRefName,baseRefName,state,isDraft,mergeable,reviewDecision,additions,deletions,createdAt,updatedAt,mergedAt,reviewRequests,labels,statusCheckRollup";
+  "number,title,url,author,headRefName,baseRefName,state,isDraft,mergeable,reviewDecision,additions,deletions,createdAt,updatedAt,mergedAt,reviewRequests,latestReviews,labels,statusCheckRollup";
 
 export const PULL_REQUEST_DETAIL_JSON_FIELDS = `${PULL_REQUEST_LIST_JSON_FIELDS},body,changedFiles,closedAt,isCrossRepository,headRepositoryOwner,headRefOid,autoMergeRequest`;
 
@@ -817,6 +821,7 @@ export function pullRequestSearchGraphQlQuery(rows: number, includeStacks = fals
         isDraft
         mergeable
         reviewDecision
+        latestReviews(first: 20) { nodes { state author { login } } }
         createdAt
         updatedAt
         mergedAt
@@ -891,7 +896,7 @@ export const REVIEW_THREADS_GRAPHQL_QUERY = `query($owner: String!, $name: Strin
         }
       }
       latestReviews(first: 50) {
-        nodes { author { __typename login avatarUrl } }
+        nodes { state author { __typename login avatarUrl } }
       }
       reviewDismissals: timelineItems(itemTypes: [REVIEW_DISMISSED_EVENT], first: ${GRAPHQL_PAGE_SIZE}) {
         pageInfo { hasNextPage endCursor }
@@ -1325,6 +1330,35 @@ function toMergeMethod(value: string | null | undefined): PullRequestMergeMethod
   }
 }
 
+/**
+ * GitHub's own `reviewDecision` counts only reviews that satisfy the branch rules, so an
+ * approval from an app (a review bot) or from anyone without the required permission leaves it
+ * empty. The reviewers still said something, and a row should show it: when GitHub reports no
+ * verdict, the latest review per reviewer decides, changes requested outranking approval.
+ */
+function toReviewDecisionWithReviews(
+  value: string | null | undefined,
+  // `gh pr list` hands the reviews as an array; the GraphQL reads hand a connection.
+  latestReviews:
+    | ReadonlyArray<Schema.Schema.Type<typeof RawLatestReviewSchema>>
+    | { readonly nodes: ReadonlyArray<Schema.Schema.Type<typeof RawLatestReviewSchema>> }
+    | null
+    | undefined,
+): PullRequestReviewDecision | null {
+  const summarized = toReviewDecision(value);
+  if (summarized === "approved" || summarized === "changes-requested") return summarized;
+  const reviews =
+    latestReviews === null || latestReviews === undefined
+      ? []
+      : "nodes" in latestReviews
+        ? latestReviews.nodes
+        : latestReviews;
+  const states = new Set(reviews.map((review) => review.state?.trim().toUpperCase() ?? ""));
+  if (states.has("CHANGES_REQUESTED")) return "changes-requested";
+  if (states.has("APPROVED")) return "approved";
+  return summarized;
+}
+
 function toReviewDecision(value: string | null | undefined): PullRequestReviewDecision | null {
   switch (value?.trim().toUpperCase()) {
     case "APPROVED":
@@ -1447,8 +1481,9 @@ function toCheckEntries(
  * GitHub's own indicator reads: a run that has already gone red will not go green by finishing.
  *
  * Null rather than "passing" for a head commit with no checks at all, so a repository that runs
- * none shows nothing instead of a green tick it never earned. Checks whose verdict is neither a
- * pass, a failure nor a wait — skipped, cancelled, neutral — count towards neither.
+ * none shows nothing instead of a green tick it never earned. A cancelled run is a failure, as
+ * GitHub's own rollup and the client's detail rollup both read it; skipped and neutral count
+ * towards neither, so the row and the detail header never disagree about one head commit.
  *
  * Counted off the deduped checks rather than the raw rollup, so the word and the list under it
  * cannot disagree: the run a re-run replaced is not a verdict twice. A row with no name at all is
@@ -1463,7 +1498,7 @@ function rollupChecksState(
     ...(raw ?? []).filter(isNamelessCheck).map((check) => toCheckStatus(check)),
   ];
   if (statuses.length === 0) return null;
-  if (statuses.includes("failure")) return "failing";
+  if (statuses.includes("failure") || statuses.includes("cancelled")) return "failing";
   if (statuses.includes("pending") || statuses.includes("action-required")) return "pending";
   return statuses.includes("success") ? "passing" : null;
 }
@@ -1557,7 +1592,7 @@ function toListItem(raw: Schema.Schema.Type<typeof RawListItemSchema>): GitHubPu
     state: toState(raw),
     isDraft: raw.isDraft ?? false,
     mergeability: toMergeability(raw.mergeable),
-    reviewDecision: toReviewDecision(raw.reviewDecision),
+    reviewDecision: toReviewDecisionWithReviews(raw.reviewDecision, raw.latestReviews),
     additions: raw.additions ?? 0,
     deletions: raw.deletions ?? 0,
     createdAt: raw.createdAt,
@@ -1680,6 +1715,9 @@ export function decodePullRequestSearchJson(
     items.push({
       ...toListItem({
         ...node,
+        latestReviews: (node.latestReviews?.nodes ?? []).flatMap((review) =>
+          review === null ? [] : [review],
+        ),
         reviewRequests: (node.reviewRequests?.nodes ?? []).flatMap((request) => {
           const login = trimmed(request?.requestedReviewer?.login);
           return login === null ? [] : [{ login }];
diff --git a/apps/server/src/server.test.ts b/apps/server/src/server.test.ts
index 2618020d388d..5d46c866a165 100644
--- a/apps/server/src/server.test.ts
+++ b/apps/server/src/server.test.ts
@@ -218,7 +218,7 @@ import {
   transferBudgetViolations,
 } from "../integration/TransferBudgetReport.integration.ts";
 import { symlinksSupported } from "@t3tools/shared/testing/symlinks";
-import { otlpSerializationLayer } from "@t3tools/shared/observability";
+import { DEFAULT_SIGNAL_EXPORT, otlpSerializationLayer } from "@t3tools/shared/observability";
 
 const defaultProjectId = ProjectId.make("project-default");
 const defaultThreadId = ThreadId.make("thread-default");
@@ -578,10 +578,10 @@ const buildAppUnderTest = (options?: {
       otlpTracesUrl: undefined,
       otlpMetricsUrl: undefined,
       otlpLogsUrl: undefined,
-      otlpExportIntervalMs: 10_000,
+      otlpTracesExport: DEFAULT_SIGNAL_EXPORT,
+      otlpMetricsExport: DEFAULT_SIGNAL_EXPORT,
+      otlpLogsExport: DEFAULT_SIGNAL_EXPORT,
       otlpServiceName: "t3-server",
-      otlpHeaders: undefined,
-      otlpProtocol: "http/json",
       mode: "desktop",
       port: 0,
       host: "127.0.0.1",
@@ -1076,7 +1076,7 @@ const buildAppUnderTest = (options?: {
           ...options?.layers?.browserTraceCollector,
         }),
       ),
-      Layer.provide(otlpSerializationLayer(config.otlpProtocol)),
+      Layer.provide(otlpSerializationLayer(config.otlpTracesExport.protocol)),
       Layer.provide(
         Layer.mock(ServerLifecycleEvents.ServerLifecycleEvents)({
           publish: (event) => Effect.succeed({ ...(event as any), sequence: 1 }),
@@ -5299,7 +5299,7 @@ it.layer(NodeServices.layer)("server router seam", (it) => {
       yield* buildAppUnderTest({
         config: {
           otlpTracesUrl: collector.url,
-          otlpProtocol: "http/protobuf",
+          otlpTracesExport: { ...DEFAULT_SIGNAL_EXPORT, protocol: "http/protobuf" },
         },
         layers: {
           browserTraceCollector: {
diff --git a/apps/server/src/serverLogger.test.ts b/apps/server/src/serverLogger.test.ts
index 59ca908cb4ad..cbb5056ed314 100644
--- a/apps/server/src/serverLogger.test.ts
+++ b/apps/server/src/serverLogger.test.ts
@@ -8,6 +8,8 @@ import * as Tracer from "effect/Tracer";
 import * as HttpClient from "effect/unstable/http/HttpClient";
 import * as HttpClientResponse from "effect/unstable/http/HttpClientResponse";
 
+import { DEFAULT_SIGNAL_EXPORT } from "@t3tools/shared/observability";
+
 import * as ServerConfig from "./config.ts";
 import { ServerLoggerLive } from "./serverLogger.ts";
 
@@ -51,10 +53,10 @@ const configLayer = (overrides: Partial<ServerConfig.ServerConfig["Service"]>) =
         otlpTracesUrl: undefined,
         otlpMetricsUrl: undefined,
         otlpLogsUrl: undefined,
-        otlpExportIntervalMs: 10_000,
+        otlpTracesExport: DEFAULT_SIGNAL_EXPORT,
+        otlpMetricsExport: DEFAULT_SIGNAL_EXPORT,
+        otlpLogsExport: DEFAULT_SIGNAL_EXPORT,
         otlpServiceName: "t3-server",
-        otlpHeaders: undefined,
-        otlpProtocol: "http/json",
         cwd: baseDir,
         baseDir,
         ...derivedPaths,
@@ -155,12 +157,15 @@ describe("ServerLoggerLive", () => {
     }),
   );
 
-  it.effect("sends the headers and wire format the rest of OTLP export already uses", () =>
+  it.effect("sends the headers and wire format the log signal asked for", () =>
     Effect.gen(function* () {
       const requests = yield* logThrough({
         otlpLogsUrl: "https://collector.example.com/v1/logs",
-        otlpProtocol: "http/protobuf",
-        otlpHeaders: { "x-scope": "logs" },
+        otlpLogsExport: {
+          ...DEFAULT_SIGNAL_EXPORT,
+          protocol: "http/protobuf",
+          headers: { "x-scope": "logs" },
+        },
       });
 
       assert.lengthOf(requests, 1);
diff --git a/apps/server/src/serverLogger.ts b/apps/server/src/serverLogger.ts
index 389a9535efab..6d19907c20ca 100644
--- a/apps/server/src/serverLogger.ts
+++ b/apps/server/src/serverLogger.ts
@@ -12,13 +12,14 @@ export const ServerLoggerLive = Effect.gen(function* () {
   const config = yield* ServerConfig;
   const minimumLogLevelLayer = Layer.succeed(References.MinimumLogLevel, config.logLevel);
 
+  const logs = config.otlpLogsExport;
   const otlpLogger =
     config.otlpLogsUrl === undefined
       ? undefined
       : OtlpLogger.make({
           url: config.otlpLogsUrl,
-          exportInterval: `${config.otlpExportIntervalMs} millis`,
-          headers: config.otlpHeaders,
+          exportInterval: `${logs.exportIntervalMs} millis`,
+          headers: logs.headers,
           resource: otlpResource(config),
         });
 
@@ -41,7 +42,7 @@ export const ServerLoggerLive = Effect.gen(function* () {
     { mergeWithExisting: false },
   ).pipe(
     Layer.provide(OtlpExporter.layerFlusher),
-    Layer.provide(otlpSerializationLayer(config.otlpProtocol)),
+    Layer.provide(otlpSerializationLayer(logs.protocol)),
   );
 
   return Layer.mergeAll(loggerLayer, minimumLogLevelLayer);
diff --git a/apps/web/src/browser/browserRecording.ts b/apps/web/src/browser/browserRecording.ts
index 5ea10c2b05d5..0bbe4bd7bf18 100644
--- a/apps/web/src/browser/browserRecording.ts
+++ b/apps/web/src/browser/browserRecording.ts
@@ -8,6 +8,8 @@ import { previewBridge } from "~/components/preview/previewBridge";
 import { ensureClientSettingsHydrated, getClientSettings } from "~/hooks/useSettings";
 import { appAtomRegistry } from "~/rpc/atomRegistry";
 
+import { createRecordingCompositor } from "./recordingCompositor";
+
 import { acquireBrowserSurfaceActivity } from "./browserSurfaceStore";
 
 export class BrowserRecordingUnavailableError extends Schema.TaggedError<BrowserRecordingUnavailableError>()(
@@ -123,6 +125,7 @@ interface ActiveRecording {
   releaseSurfaceActivity: (() => void) | null;
   stream: MediaStream | null;
   recorder: MediaRecorder | null;
+  compositor: Awaited<ReturnType<typeof createRecordingCompositor>>;
   savedBlob?: Blob;
   uploadPromise?: Promise<string>;
   lifecycle: BrowserRecordingLifecycle;
@@ -381,6 +384,8 @@ const captureTabMediaStreamWithTimeout = async (
 };
 
 const clearActiveRecording = (recording: ActiveRecording): void => {
+  recording.compositor?.dispose();
+  recording.compositor = null;
   recording.releaseSurfaceActivity?.();
   recording.releaseSurfaceActivity = null;
   if (activeRecordings.get(recording.tabId) !== recording) return;
@@ -525,6 +530,7 @@ export async function startBrowserRecording(
     releaseSurfaceActivity,
     stream: null,
     recorder: null,
+    compositor: null,
     lifecycle: startingLifecycle,
   };
   activeRecordings.set(tabId, recording);
@@ -534,7 +540,8 @@ export async function startBrowserRecording(
       clearActiveRecording(recording);
       throw cause;
     });
-    const frameRate = getClientSettings().browserRecordingFrameRate;
+    const settings = getClientSettings();
+    const frameRate = settings.browserRecordingFrameRate;
     await waitForBrowserRecordingPaint();
     const throwIfStartupCancelled = async (): Promise<void> => {
       // Once a grant starts, a stop lets startup finish so the caller receives an artifact.
@@ -614,7 +621,19 @@ export async function startBrowserRecording(
 
     let recorder: MediaRecorder;
     try {
-      recorder = createMediaRecorder(stream);
+      recording.compositor = await createRecordingCompositor(
+        stream,
+        {
+          showKeyPresses: settings.browserRecordingShowKeyPresses,
+          showMousePresses: settings.browserRecordingShowMousePresses,
+          frameRate,
+        },
+        (listener) =>
+          bridge.recording.onInput((event) => {
+            if (event.tabId === tabId) listener(event.input);
+          }),
+      );
+      recorder = createMediaRecorder(recording.compositor?.stream ?? stream);
       recording.recorder = recorder;
       recorder.addEventListener("dataavailable", (event) => {
         if (event.data.size > 0) chunks.push(event.data);
@@ -694,6 +713,8 @@ const finalizeBrowserRecording = async (
           cause,
         });
       }
+      recording.compositor?.dispose();
+      recording.compositor = null;
       // Encoding has flushed; release native capture before materializing and saving the file.
       stopMediaStream(recording.stream);
       recording.stream = null;
diff --git a/apps/web/src/browser/recordingCompositor.test.ts b/apps/web/src/browser/recordingCompositor.test.ts
new file mode 100644
index 000000000000..d10e69d24663
--- /dev/null
+++ b/apps/web/src/browser/recordingCompositor.test.ts
@@ -0,0 +1,179 @@
+import type { DesktopPreviewRecordingInput } from "@t3tools/contracts";
+import { afterEach, describe, expect, it, vi } from "vite-plus/test";
+
+import { createRecordingCompositor, RecordingDecorations } from "./recordingCompositor";
+
+const primaryColor = "oklch(0.65 0.2 310)";
+vi.mock("./annotationTheme", () => ({
+  readPreviewAnnotationTheme: () => ({ primary: "oklch(0.65 0.2 310)" }),
+}));
+
+const options = { showKeyPresses: true, showMousePresses: true, frameRate: 30 };
+const pointer = (
+  phase: "move" | "down" | "up" | "click",
+  x = 100,
+): DesktopPreviewRecordingInput => ({
+  type: "pointer",
+  phase,
+  x,
+  y: 80,
+  width: 800,
+  height: 600,
+});
+const context = () => ({
+  save: vi.fn(),
+  restore: vi.fn(),
+  beginPath: vi.fn(),
+  fill: vi.fn(),
+  stroke: vi.fn(),
+  ellipse: vi.fn(),
+  roundRect: vi.fn(),
+  fillText: vi.fn(),
+  drawImage: vi.fn(),
+  measureText: () => ({ width: 40 }),
+  globalAlpha: 1,
+  strokeStyle: "",
+  fillStyle: "",
+});
+
+describe("recording decorations", () => {
+  it("keeps rings aligned through dragging and stops following the cursor after release", () => {
+    const decorations = new RecordingDecorations(options, primaryColor);
+    const ctx = context();
+    decorations.apply(pointer("down"), 0);
+    decorations.apply(pointer("move", 120), 10);
+    decorations.draw(ctx as unknown as CanvasRenderingContext2D, 1600, 1200, 10);
+    expect(ctx.ellipse.mock.calls[0]?.slice(0, 4)).toEqual([240, 160, 40, 40]);
+    expect(ctx.strokeStyle).toBe(primaryColor);
+    expect(ctx.fillStyle).toBe(primaryColor);
+    expect(decorations.nextRedraw(10)).toBeNull();
+    decorations.apply(pointer("up", 130), 20);
+    decorations.apply(pointer("move", 300), 30);
+    decorations.draw(ctx as unknown as CanvasRenderingContext2D, 1600, 1200, 320);
+    expect(ctx.ellipse.mock.calls[1]?.slice(0, 4)).toEqual([260, 160, 50, 50]);
+    ctx.ellipse.mockClear();
+    decorations.draw(ctx as unknown as CanvasRenderingContext2D, 1600, 1200, 620);
+    expect(ctx.ellipse).not.toHaveBeenCalled();
+    expect(decorations.nextRedraw(620)).toBeNull();
+  });
+
+  it("pulses agent clicks and clears decorations on blur or navigation", () => {
+    const decorations = new RecordingDecorations(options, primaryColor);
+    const ctx = context();
+    decorations.apply(pointer("click"), 0);
+    decorations.draw(ctx as unknown as CanvasRenderingContext2D, 800, 600, 300);
+    expect(ctx.ellipse).toHaveBeenCalledOnce();
+    decorations.apply({ type: "clear" }, 301);
+    ctx.ellipse.mockClear();
+    decorations.draw(ctx as unknown as CanvasRenderingContext2D, 800, 600, 302);
+    expect(ctx.ellipse).not.toHaveBeenCalled();
+    expect(decorations.nextRedraw(302)).toBeNull();
+  });
+
+  it("holds shortcut badges until release, then expires them even on a static page", () => {
+    const decorations = new RecordingDecorations(options, primaryColor);
+    const ctx = context();
+    const key = { type: "key" as const, label: "⌘C", held: true, width: 800 };
+    decorations.apply(key, 0);
+    decorations.draw(ctx as unknown as CanvasRenderingContext2D, 1600, 1200, 5000);
+    expect(ctx.fillText.mock.calls[0]?.slice(0, 3)).toEqual(["⌘C", 800, 1098]);
+    decorations.apply({ ...key, held: false }, 5000);
+    expect(decorations.nextRedraw(5500)).toBe(400);
+    ctx.fillText.mockClear();
+    decorations.draw(ctx as unknown as CanvasRenderingContext2D, 1600, 1200, 5900);
+    expect(ctx.fillText).not.toHaveBeenCalled();
+  });
+
+  it("removes the previous key badge on password focus", () => {
+    const decorations = new RecordingDecorations(options, primaryColor);
+    const ctx = context();
+    decorations.apply({ type: "key", label: "A", held: true, width: 800 }, 0);
+    decorations.apply({ type: "key", label: null, held: true, width: 800 }, 1);
+    decorations.draw(ctx as unknown as CanvasRenderingContext2D, 800, 600, 2);
+    expect(ctx.fillText).not.toHaveBeenCalled();
+  });
+
+  it("honors independent opt-in flags", () => {
+    const decorations = new RecordingDecorations(
+      { ...options, showMousePresses: false },
+      primaryColor,
+    );
+    const ctx = context();
+    decorations.apply(pointer("down"), 0);
+    decorations.apply({ type: "key", label: "⌘C", held: true, width: 800 }, 0);
+    decorations.draw(ctx as unknown as CanvasRenderingContext2D, 800, 600, 1);
+    expect(ctx.ellipse).not.toHaveBeenCalled();
+    expect(ctx.fillText).toHaveBeenCalledOnce();
+  });
+});
+
+describe("detached recording compositor", () => {
+  afterEach(() => vi.unstubAllGlobals());
+
+  it("keeps native capture when both decorations are off", async () => {
+    vi.stubGlobal("document", {
+      createElement: () => {
+        throw new Error("must not allocate");
+      },
+    });
+    expect(
+      await createRecordingCompositor(
+        {} as MediaStream,
+        {
+          ...options,
+          showKeyPresses: false,
+          showMousePresses: false,
+        },
+        () => {
+          throw new Error("must not subscribe");
+        },
+      ),
+    ).toBeNull();
+  });
+
+  it.each([false, true])(
+    "releases the detached output on disposal or playback failure (%s)",
+    async (failPlayback) => {
+      const ctx = context();
+      const stop = vi.fn();
+      const unsubscribe = vi.fn();
+      const cancelFrame = vi.fn();
+      const source = {
+        getVideoTracks: () => [{ getSettings: () => ({ width: 800, height: 600 }) }],
+      } as unknown as MediaStream;
+      const stream = { getTracks: () => [{ stop }] } as unknown as MediaStream;
+      const canvas = { width: 0, height: 0, getContext: () => ctx, captureStream: () => stream };
+      const video = {
+        muted: false,
+        playsInline: false,
+        srcObject: null as MediaStream | null,
+        readyState: 2,
+        videoWidth: 800,
+        videoHeight: 600,
+        pause: vi.fn(),
+        play: async () => {
+          if (failPlayback) throw new Error("play failed");
+        },
+        requestVideoFrameCallback: () => 1,
+        cancelVideoFrameCallback: cancelFrame,
+      };
+      vi.stubGlobal("document", {
+        createElement: (tag: string) => (tag === "canvas" ? canvas : video),
+      });
+      vi.stubGlobal("window", { clearTimeout: vi.fn(), setTimeout: vi.fn() });
+      const compositor = createRecordingCompositor(source, options, () => unsubscribe);
+      if (failPlayback) await expect(compositor).rejects.toThrow("play failed");
+      else {
+        const result = await compositor;
+        expect(result?.stream).toBe(stream);
+        expect(ctx.drawImage).toHaveBeenCalledOnce();
+        result?.dispose();
+        result?.dispose();
+      }
+      expect(stop).toHaveBeenCalledOnce();
+      expect(unsubscribe).toHaveBeenCalledOnce();
+      expect(cancelFrame).toHaveBeenCalledWith(1);
+      expect(video.srcObject).toBeNull();
+    },
+  );
+});
diff --git a/apps/web/src/browser/recordingCompositor.ts b/apps/web/src/browser/recordingCompositor.ts
new file mode 100644
index 000000000000..352154bd9aef
--- /dev/null
+++ b/apps/web/src/browser/recordingCompositor.ts
@@ -0,0 +1,190 @@
+import type { DesktopPreviewRecordingInput } from "@t3tools/contracts";
+
+import { readPreviewAnnotationTheme } from "./annotationTheme";
+
+interface RecordingDecorationOptions {
+  readonly showKeyPresses: boolean;
+  readonly showMousePresses: boolean;
+  readonly frameRate: number;
+}
+
+/** Decorates a detached canvas; no recording UI is inserted into the preview page. */
+export async function createRecordingCompositor(
+  source: MediaStream,
+  options: RecordingDecorationOptions,
+  subscribe: (listener: (input: DesktopPreviewRecordingInput) => void) => () => void,
+) {
+  if (!options.showKeyPresses && !options.showMousePresses) return null;
+  const canvas = document.createElement("canvas");
+  const context = canvas.getContext("2d", { alpha: false });
+  if (!context) throw new Error("Recording canvas is unavailable.");
+  const video = document.createElement("video");
+  video.muted = true;
+  video.playsInline = true;
+  video.srcObject = source;
+  const settings = source.getVideoTracks()[0]?.getSettings();
+  canvas.width = settings?.width ?? 1920;
+  canvas.height = settings?.height ?? 1080;
+  const decorations = new RecordingDecorations(options, readPreviewAnnotationTheme().primary);
+  let disposed = false;
+  let frameId: number | undefined;
+  let timer: number | undefined;
+  const draw = () => {
+    if (disposed || video.readyState < 2) return;
+    const width = video.videoWidth || canvas.width;
+    const height = video.videoHeight || canvas.height;
+    if (canvas.width !== width) canvas.width = width;
+    if (canvas.height !== height) canvas.height = height;
+    context.drawImage(video, 0, 0, width, height);
+    const now = performance.now();
+    decorations.draw(context, width, height, now);
+    window.clearTimeout(timer);
+    const next = decorations.nextRedraw(now);
+    if (next !== null) timer = window.setTimeout(draw, next);
+  };
+  const frame = () => {
+    if (disposed) return;
+    draw();
+    frameId = video.requestVideoFrameCallback(frame);
+  };
+  const output = canvas.captureStream(options.frameRate);
+  let unsubscribe: (() => void) | undefined;
+  const dispose = () => {
+    if (disposed) return;
+    disposed = true;
+    unsubscribe?.();
+    window.clearTimeout(timer);
+    if (frameId !== undefined) video.cancelVideoFrameCallback(frameId);
+    video.pause();
+    video.srcObject = null;
+    for (const track of output.getTracks()) track.stop();
+  };
+  try {
+    unsubscribe = subscribe((input) => {
+      decorations.apply(input, performance.now());
+      draw();
+    });
+    frameId = video.requestVideoFrameCallback(frame);
+    await video.play();
+    draw();
+    return { stream: output, dispose };
+  } catch (error) {
+    dispose();
+    throw error;
+  }
+}
+
+/** Keeps input timing and coordinates independent of native video frame delivery. */
+export class RecordingDecorations {
+  private ring: {
+    x: number;
+    y: number;
+    width: number;
+    height: number;
+    held: boolean;
+    releasedAt: number | null;
+  } | null = null;
+  private key: { label: string; width: number; expiresAt: number | null } | null = null;
+
+  constructor(
+    private readonly options: RecordingDecorationOptions,
+    private readonly primaryColor: string,
+  ) {}
+
+  apply(input: DesktopPreviewRecordingInput, now: number) {
+    if (input.type === "clear") {
+      this.ring = null;
+      this.key = null;
+    } else if (input.type === "key" && this.options.showKeyPresses) {
+      this.key = input.label
+        ? { label: input.label, width: input.width, expiresAt: input.held ? null : now + 900 }
+        : null;
+    } else if (input.type === "pointer" && this.options.showMousePresses) {
+      if (input.phase === "down" || input.phase === "click") {
+        this.ring = {
+          x: input.x,
+          y: input.y,
+          width: input.width,
+          height: input.height,
+          held: input.phase === "down",
+          releasedAt: input.phase === "click" ? now : null,
+        };
+      } else if (this.ring?.held) {
+        this.ring = {
+          ...this.ring,
+          x: input.x,
+          y: input.y,
+          width: input.width,
+          height: input.height,
+          held: input.phase !== "up",
+          releasedAt: input.phase === "up" ? now : null,
+        };
+      }
+    }
+  }
+
+  nextRedraw(now: number): number | null {
+    if (
+      this.ring?.releasedAt !== null &&
+      this.ring?.releasedAt !== undefined &&
+      now < this.ring.releasedAt + 600
+    ) {
+      return 1000 / this.options.frameRate;
+    }
+    return this.key?.expiresAt !== null &&
+      this.key?.expiresAt !== undefined &&
+      now < this.key.expiresAt
+      ? this.key.expiresAt - now
+      : null;
+  }
+
+  draw(context: CanvasRenderingContext2D, width: number, height: number, now: number) {
+    // Guest coordinates are CSS pixels; native frames include zoom and display scale.
+    const scale = width / (this.key?.width ?? this.ring?.width ?? 1280);
+    const ring = this.ring;
+    if (ring && (ring.held || (ring.releasedAt !== null && now < ring.releasedAt + 600))) {
+      const progress = ring.releasedAt === null ? 0 : Math.min(1, (now - ring.releasedAt) / 600);
+      context.save();
+      const opacity = 0.9 * (1 - progress);
+      context.strokeStyle = this.primaryColor;
+      context.fillStyle = this.primaryColor;
+      context.lineWidth = 2 * scale;
+      context.beginPath();
+      context.ellipse(
+        (ring.x * width) / ring.width,
+        (ring.y * height) / ring.height,
+        ((20 * width) / ring.width) * (1 + progress * 0.5),
+        ((20 * height) / ring.height) * (1 + progress * 0.5),
+        0,
+        0,
+        Math.PI * 2,
+      );
+      context.globalAlpha = opacity * 0.15;
+      context.fill();
+      context.globalAlpha = opacity;
+      context.stroke();
+      context.restore();
+    }
+    const key = this.key;
+    if (key && (key.expiresAt === null || now < key.expiresAt)) {
+      context.save();
+      context.font = `500 ${26 * scale}px system-ui, sans-serif`;
+      const badgeWidth = Math.min(
+        width - 32 * scale,
+        context.measureText(key.label).width + 36 * scale,
+      );
+      const badgeHeight = 54 * scale;
+      const left = (width - badgeWidth) / 2;
+      const top = height - 24 * scale - badgeHeight;
+      context.fillStyle = "rgba(32,32,34,.86)";
+      context.beginPath();
+      context.roundRect(left, top, badgeWidth, badgeHeight, 14 * scale);
+      context.fill();
+      context.fillStyle = "white";
+      context.textAlign = "center";
+      context.textBaseline = "middle";
+      context.fillText(key.label, width / 2, top + badgeHeight / 2, badgeWidth - 24 * scale);
+      context.restore();
+    }
+  }
+}
diff --git a/apps/web/src/components/BranchToolbar.tsx b/apps/web/src/components/BranchToolbar.tsx
index 3330f40a090f..cdf3aeffbea1 100644
--- a/apps/web/src/components/BranchToolbar.tsx
+++ b/apps/web/src/components/BranchToolbar.tsx
@@ -233,6 +233,7 @@ const MobileRunContextSelector = memo(function MobileRunContextSelector({
                   <MenuRadioItem
                     value="auto"
                     disabled={envLocked}
+                    closeOnClick
                     onClick={() => {
                       if (autoEnvironmentLabel) onAutoEnvironment?.();
                     }}
@@ -250,6 +251,7 @@ const MobileRunContextSelector = memo(function MobileRunContextSelector({
                     key={env.environmentId}
                     disabled={envLocked}
                     value={env.environmentId}
+                    closeOnClick
                   >
                     <span className="flex min-w-0 items-center gap-1.5">
                       <EnvironmentMachineIcon kind={env.machine} className="size-3" />
@@ -274,7 +276,7 @@ const MobileRunContextSelector = memo(function MobileRunContextSelector({
               onEnvModeChange(value as EnvMode);
             }}
           >
-            <MenuRadioItem disabled={envModeLocked || forceNewWorktree} value="local">
+            <MenuRadioItem disabled={envModeLocked || forceNewWorktree} value="local" closeOnClick>
               <span className="flex min-w-0 items-center gap-1.5">
                 {activeWorktreePath ? (
                   <FolderGitIcon className="size-3" />
@@ -286,14 +288,14 @@ const MobileRunContextSelector = memo(function MobileRunContextSelector({
                 </span>
               </span>
             </MenuRadioItem>
-            <MenuRadioItem disabled={envModeLocked} value="worktree">
+            <MenuRadioItem disabled={envModeLocked} value="worktree" closeOnClick>
               <span className="flex min-w-0 items-center gap-1.5">
                 <FolderGit2Icon className="size-3" />
                 <span className="min-w-0 truncate">{resolveEnvModeLabel("worktree")}</span>
               </span>
             </MenuRadioItem>
             {previousWorktreeLabel ? (
-              <MenuRadioItem disabled={envModeLocked} value="previous-worktree">
+              <MenuRadioItem disabled={envModeLocked} value="previous-worktree" closeOnClick>
                 <span className="flex min-w-0 items-center gap-1.5">
                   <HistoryIcon className="size-3" />
                   <span className="min-w-0 truncate">{previousWorktreeLabel}</span>
diff --git a/apps/web/src/components/BranchToolbarBranchSelector.tsx b/apps/web/src/components/BranchToolbarBranchSelector.tsx
index d958f2f76625..a7fa1ce99724 100644
--- a/apps/web/src/components/BranchToolbarBranchSelector.tsx
+++ b/apps/web/src/components/BranchToolbarBranchSelector.tsx
@@ -545,6 +545,7 @@ export function BranchToolbarBranchSelector({
     setIsBranchMenuOpen(open);
     if (!open) {
       setBranchQuery("");
+      highlightedBranchValueRef.current = null;
     }
   }, []);
 
@@ -594,6 +595,9 @@ export function BranchToolbarBranchSelector({
   }, [fetchNextBranchPage, hasNextPage, isBranchMenuOpen, isFetchingNextPage]);
 
   const branchListRef = useRef<LegendListRef | null>(null);
+  // Tracks the highlighted picker value so Enter can activate it even when the
+  // virtualized row is not mounted (Base UI Enter clicks the mounted element).
+  const highlightedBranchValueRef = useRef<string | null>(null);
   const updateBranchListScrollFades = useCallback(() => {
     const scrollElement = branchListRef.current?.getScrollableNode?.();
     if (!(scrollElement instanceof HTMLElement)) {
@@ -676,6 +680,20 @@ export function BranchToolbarBranchSelector({
   const prUrl = currentLinkedPr?.url ?? displayedPr?.url;
   const openPrLink = useOpenPrLink(threadRef);
 
+  function selectPickerItem(itemValue: string) {
+    highlightedBranchValueRef.current = null;
+    if (itemValue === checkoutPullRequestItemValue && prReference && onCheckoutPullRequestRequest) {
+      handleOpenChange(false);
+      onComposerFocusRequest?.();
+      onCheckoutPullRequestRequest(prReference);
+    } else if (itemValue === createBranchItemValue) {
+      createRef(trimmedBranchQuery);
+    } else {
+      const refName = branchByName.get(itemValue);
+      if (refName) selectBranch(refName);
+    }
+  }
+
   function renderPickerItem(itemValue: string, index: number) {
     if (checkoutPullRequestItemValue && itemValue === checkoutPullRequestItemValue) {
       return (
@@ -685,15 +703,7 @@ export function BranchToolbarBranchSelector({
           index={index}
           value={itemValue}
           className="pe-2"
-          onClick={() => {
-            if (!prReference || !onCheckoutPullRequestRequest) {
-              return;
-            }
-            setIsBranchMenuOpen(false);
-            setBranchQuery("");
-            onComposerFocusRequest?.();
-            onCheckoutPullRequestRequest(prReference);
-          }}
+          onClick={() => selectPickerItem(itemValue)}
         >
           <div className="flex min-w-0 items-center gap-2 py-1">
             <SourceControlIcon className="size-3.5 shrink-0 text-muted-foreground" />
@@ -715,7 +725,7 @@ export function BranchToolbarBranchSelector({
           index={index}
           value={itemValue}
           className="pe-1.5"
-          onClick={() => createRef(trimmedBranchQuery)}
+          onClick={() => selectPickerItem(itemValue)}
         >
           <span className="truncate">Create new ref &quot;{newRefName}&quot;</span>
         </ComboboxItem>
@@ -743,7 +753,7 @@ export function BranchToolbarBranchSelector({
         index={index}
         value={itemValue}
         className="pe-1.5"
-        onClick={() => selectBranch(refName)}
+        onClick={() => selectPickerItem(itemValue)}
         onContextMenu={(event) => handleBranchContextMenu(event, itemValue)}
       >
         <div className="flex w-full min-w-0 items-center justify-between gap-2">
@@ -760,7 +770,8 @@ export function BranchToolbarBranchSelector({
       filteredItems={filteredBranchPickerItems}
       autoHighlight
       virtualized
-      onItemHighlighted={(_value, eventDetails) => {
+      onItemHighlighted={(value, eventDetails) => {
+        highlightedBranchValueRef.current = typeof value === "string" ? value : null;
         if (!isBranchMenuOpen || eventDetails.index < 0 || eventDetails.reason !== "keyboard") {
           return;
         }
@@ -828,6 +839,24 @@ export function BranchToolbarBranchSelector({
           placeholder="Search refs..."
           value={branchQuery}
           onChange={(event) => setBranchQuery(event.target.value)}
+          onKeyDown={(event) => {
+            if (event.key !== "Enter" || event.nativeEvent.isComposing || event.keyCode === 229) {
+              return;
+            }
+            const highlightedValue = highlightedBranchValueRef.current;
+            if (
+              highlightedValue === null ||
+              !filteredBranchPickerItems.includes(highlightedValue)
+            ) {
+              return;
+            }
+            (
+              event as typeof event & { preventBaseUIHandler?: () => void }
+            ).preventBaseUIHandler?.();
+            event.preventDefault();
+            event.stopPropagation();
+            selectPickerItem(highlightedValue);
+          }}
         />
         <div className="flex min-h-0 flex-1 flex-col overflow-hidden">
           <ComboboxEmpty>No refs found.</ComboboxEmpty>
diff --git a/apps/web/src/components/ChatMarkdown.test.tsx b/apps/web/src/components/ChatMarkdown.test.tsx
index 4e22e68ca902..3e1222e0ebb9 100644
--- a/apps/web/src/components/ChatMarkdown.test.tsx
+++ b/apps/web/src/components/ChatMarkdown.test.tsx
@@ -55,6 +55,7 @@ vi.mock("../editorPreferences", () => ({
 vi.mock("~/lib/openPullRequestLink", () => ({
   findProjectOnChangeRequestHost: () => undefined,
   parseChangeRequestUrl: () => null,
+  resolvePullRequestPreviewTarget: () => null,
   useOpenChangeRequestLink: () => vi.fn(),
 }));
 
diff --git a/apps/web/src/components/ChatMarkdown.tsx b/apps/web/src/components/ChatMarkdown.tsx
index abebe4841cbd..3b398dd5100e 100644
--- a/apps/web/src/components/ChatMarkdown.tsx
+++ b/apps/web/src/components/ChatMarkdown.tsx
@@ -53,7 +53,6 @@ import { inlineCodeFilePathCandidate } from "@t3tools/client-runtime/markdown-li
 import { mediaFileReference, mediaUrlReference } from "@t3tools/client-runtime/media-reference";
 import { mediaKindFromPath, mediaMimeTypeFromExtension } from "@t3tools/shared/filePreview";
 import * as Cause from "effect/Cause";
-import { sourceControlRepositorySelector } from "@t3tools/shared/sourceControl";
 import { AsyncResult } from "effect/unstable/reactivity";
 import React, {
   Children,
@@ -178,9 +177,9 @@ import {
   WORKSPACE_BASENAME_LOOKUP_LIMIT,
 } from "../workspaceBasenameLookup";
 import {
-  findProjectForChangeRequest,
   parseChangeRequestUrl,
   pullRequestCandidateUrlFromReferenceAutolink,
+  resolvePullRequestPreviewTarget,
   useOpenChangeRequestLink,
 } from "~/lib/openPullRequestLink";
 import { useOpenLink } from "../browser/useOpenLink";
@@ -863,7 +862,10 @@ function MarkdownDetails({
         <span>{summary}</span>
       </CollapsibleTrigger>
       <CollapsiblePanel>
-        <div className="pb-3 ps-6 text-foreground/80" data-markdown-details-content="">
+        <div
+          className="pb-3 ps-6 text-foreground/[calc(80%+var(--appearance-contrast-boost)/5)]"
+          data-markdown-details-content=""
+        >
           {content}
         </div>
       </CollapsiblePanel>
@@ -2886,32 +2888,14 @@ const CHAT_MARKDOWN_COMPONENTS = {
       const confirmBeforeOpen = pullRequestAutolink === "reference";
       const pullRequestCandidateUrl =
         confirmBeforeOpen && href ? pullRequestCandidateUrlFromReferenceAutolink(href) : href;
-      const pullRequestCandidate = pullRequestCandidateUrl
-        ? parseChangeRequestUrl(pullRequestCandidateUrl)
+      const pullRequestPreviewTarget = pullRequestCandidateUrl
+        ? resolvePullRequestPreviewTarget({
+            environmentId,
+            projects,
+            pullRequestsEnabled: serverConfig?.environment.capabilities.pullRequests === true,
+            url: pullRequestCandidateUrl,
+          })
         : null;
-      const pullRequestProject =
-        environmentId !== null &&
-        serverConfig?.environment.capabilities.pullRequests === true &&
-        pullRequestCandidate !== null
-          ? findProjectForChangeRequest(
-              projects.filter((project) => project.environmentId === environmentId),
-              pullRequestCandidate,
-            )
-          : undefined;
-      const pullRequestPreviewTarget =
-        environmentId === null || pullRequestProject === undefined || pullRequestCandidate === null
-          ? null
-          : {
-              environmentId,
-              input: {
-                projectId: pullRequestProject.id,
-                host: pullRequestCandidate.authority ?? pullRequestCandidate.host,
-                repository:
-                  sourceControlRepositorySelector(pullRequestProject.repositoryIdentity) ??
-                  pullRequestCandidate.repository,
-                number: pullRequestCandidate.number,
-              },
-            };
       const isSameDocumentLink = href?.startsWith("#") ?? false;
       const onClick = props.onClick;
       const canOpenInPreview = Boolean(threadRef) && isPreviewSupportedInRuntime();
@@ -3332,7 +3316,7 @@ function ChatMarkdown({
     <div
       ref={markdownRef}
       className={cn(
-        "chat-markdown w-full min-w-0 text-sm leading-relaxed text-foreground/80 [overflow-wrap:anywhere] [word-break:break-word]",
+        "chat-markdown w-full min-w-0 text-sm leading-relaxed text-foreground/[calc(80%+var(--appearance-contrast-boost)/5)] [overflow-wrap:anywhere] [word-break:break-word]",
         className,
       )}
       // Gates the fade-in for blocks that arrive while the response streams.
diff --git a/apps/web/src/components/ChatMarkdown.workspace-images.test.tsx b/apps/web/src/components/ChatMarkdown.workspace-images.test.tsx
index 344eca250ce9..bab751c74816 100644
--- a/apps/web/src/components/ChatMarkdown.workspace-images.test.tsx
+++ b/apps/web/src/components/ChatMarkdown.workspace-images.test.tsx
@@ -44,6 +44,7 @@ vi.mock("../editorPreferences", () => ({
 vi.mock("~/lib/openPullRequestLink", () => ({
   findProjectOnChangeRequestHost: () => undefined,
   parseChangeRequestUrl: () => null,
+  resolvePullRequestPreviewTarget: () => null,
   useOpenChangeRequestLink: () => vi.fn(),
 }));
 
diff --git a/apps/web/src/components/ComposerPromptEditorTiptap.tsx b/apps/web/src/components/ComposerPromptEditorTiptap.tsx
index 5126246dd05c..c108207304c4 100644
--- a/apps/web/src/components/ComposerPromptEditorTiptap.tsx
+++ b/apps/web/src/components/ComposerPromptEditorTiptap.tsx
@@ -725,6 +725,19 @@ function ComposerPromptEditorTiptapInner(props: ComposerPromptEditorProps) {
     );
   }, []);
 
+  const editorAttributes = useMemo(
+    () => ({
+      class: cn(
+        "composer-tiptap block max-h-50 min-h-17.5 w-full overflow-y-auto whitespace-pre-wrap wrap-break-word bg-transparent leading-relaxed text-foreground focus:outline-none",
+        className,
+      ),
+      "data-testid": "composer-editor",
+      "data-composer-rich-text": richText ? "true" : "false",
+      "aria-placeholder": placeholder,
+    }),
+    [className, placeholder, richText],
+  );
+
   const editor = useEditor(
     {
       extensions: [
@@ -787,15 +800,7 @@ function ComposerPromptEditorTiptapInner(props: ComposerPromptEditorProps) {
       ),
       editable: !disabled,
       editorProps: {
-        attributes: {
-          class: cn(
-            "composer-tiptap block max-h-50 min-h-17.5 w-full overflow-y-auto whitespace-pre-wrap wrap-break-word bg-transparent leading-relaxed text-foreground focus:outline-none",
-            className,
-          ),
-          "data-testid": "composer-editor",
-          "data-composer-rich-text": richText ? "true" : "false",
-          "aria-placeholder": placeholder,
-        },
+        attributes: editorAttributes,
         handleKeyDown: (view, event) => {
           if (
             isMacPlatform(navigator.platform) &&
@@ -995,6 +1000,17 @@ function ComposerPromptEditorTiptapInner(props: ComposerPromptEditorProps) {
     editorHolder.current = editor;
   }, [editor]);
 
+  // Tiptap forwards option changes to the view from a passive effect, so a
+  // class change here would reach the ProseMirror element one tick after
+  // React commits. The chat composer measures its resting and expanded
+  // geometry in layout effects that run first, and it clamps the prompt
+  // through `className`, so the attributes are pushed to the view here for
+  // those measurements to see the layout they are about to reserve for.
+  useLayoutEffect(() => {
+    if (!editor?.isInitialized) return;
+    editor.view.setProps({ attributes: editorAttributes });
+  }, [editor, editorAttributes]);
+
   const readSnapshot = useCallback(() => {
     const snapshot = snapshotRef.current;
     if (!editor) return snapshot;
diff --git a/apps/web/src/components/PullRequestThreadDialog.tsx b/apps/web/src/components/PullRequestThreadDialog.tsx
index 4004b4930c27..ddbd2876d4d2 100644
--- a/apps/web/src/components/PullRequestThreadDialog.tsx
+++ b/apps/web/src/components/PullRequestThreadDialog.tsx
@@ -222,9 +222,12 @@ export function PullRequestThreadDialog({
                 if (event.key !== "Enter") {
                   return;
                 }
+                if (event.nativeEvent.isComposing || event.keyCode === 229) {
+                  return;
+                }
                 event.preventDefault();
                 if (!isResolving && !preparePullRequestThreadAction.isPending) {
-                  void handleConfirm("local");
+                  void handleConfirm("worktree");
                 }
               }}
             />
diff --git a/apps/web/src/components/RightPanelTabs.tsx b/apps/web/src/components/RightPanelTabs.tsx
index f234efff093e..e1bc3f151fd9 100644
--- a/apps/web/src/components/RightPanelTabs.tsx
+++ b/apps/web/src/components/RightPanelTabs.tsx
@@ -34,6 +34,7 @@ import {
   type ReactNode,
   useCallback,
   useEffect,
+  useMemo,
   useRef,
   useState,
 } from "react";
@@ -62,7 +63,11 @@ import { ScrollArea } from "~/components/ui/scroll-area";
 import { PanelTabCloseButton } from "~/components/ui/panel-tab-close-button";
 import { faviconUrlForOrigin } from "~/lib/favicon";
 import { useTheme } from "~/hooks/useTheme";
-import { pullRequestEnvironment } from "~/state/pullRequests";
+import {
+  newestPullRequestSummary,
+  pullRequestEnvironment,
+  useSharedPullRequestSummary,
+} from "~/state/pullRequests";
 import { useEnvironmentQuery } from "~/state/query";
 import { COLLAPSED_SIDEBAR_TITLEBAR_INSET_CLASS } from "~/workspaceTitlebar";
 
@@ -800,19 +805,26 @@ function PullRequestSurfaceIcon({
           },
         }),
   ).data;
+  const reference = useMemo(
+    () => ({
+      projectId: surface.projectId as ProjectId,
+      repository: surface.repository,
+      number: surface.number,
+    }),
+    [surface.projectId, surface.repository, surface.number],
+  );
+  const sharedSummary = useSharedPullRequestSummary(resolvedEnvironmentId, reference, null);
   // The compact tab intentionally shows lifecycle and draft state only. Conflict warnings have
   // their own presentation on surfaces that have mergeability, while this tab stays stable as
   // detail data arrives.
-  const status =
-    linkedSnapshot !== null
-      ? linkedSnapshot
-      : detail === null
-        ? (seed ?? null)
-        : { state: detail.state, isDraft: detail.isDraft };
+  const status = linkedSnapshot ?? newestPullRequestSummary(detail, sharedSummary) ?? seed ?? null;
   if (status === null) {
     return <PullRequestGlyph.pullRequest className="size-3 shrink-0 text-muted-foreground" />;
   }
-  const presentation = resolvePullRequestState({ state: status.state, isDraft: status.isDraft });
+  const presentation = resolvePullRequestState({
+    state: status.state,
+    isDraft: status.isDraft ?? detail?.isDraft ?? seed?.isDraft ?? false,
+  });
   return <presentation.Icon className={cn("size-3 shrink-0", presentation.toneClassName)} />;
 }
 
diff --git a/apps/web/src/components/ThreadStatusIndicators.tsx b/apps/web/src/components/ThreadStatusIndicators.tsx
index 016a2c2e431d..5b2945042ac2 100644
--- a/apps/web/src/components/ThreadStatusIndicators.tsx
+++ b/apps/web/src/components/ThreadStatusIndicators.tsx
@@ -76,15 +76,24 @@ export function useLinkedThreadPullRequest(
   );
   const fallback =
     current === null ? ((!supportsLinks ? linkedPullRequest : null) ?? branchPullRequest) : null;
-  const host = fallback == null ? undefined : parseChangeRequestUrl(fallback.url)?.host;
-  const reference =
-    fallback == null ? null : { ...fallback, ...(host === undefined ? {} : { host }) };
+  // Stable per link: the shared summary effect keys on this object, and a sidebar row must not
+  // touch the cache on every render.
+  const reference = useMemo(() => {
+    if (fallback == null) return null;
+    const host = parseChangeRequestUrl(fallback.url)?.host;
+    return { ...fallback, ...(host === undefined ? {} : { host }) };
+  }, [fallback]);
   const queried = useEnvironmentQuery(
     !enabled || environmentId === null || reference === null
       ? null
       : linkedPullRequestDetailAtom({ environmentId, input: reference }),
-  ).data;
-  const detail = useSharedPullRequestSummary(environmentId, reference, queried);
+  );
+  const detail = useSharedPullRequestSummary(
+    environmentId,
+    reference,
+    queried.data,
+    queried.dataUpdatedAt,
+  );
 
   return useMemo(() => {
     if (current !== null) return linkedPullRequestSnapshotStatus(current);
diff --git a/apps/web/src/components/chat/ChatComposer.tsx b/apps/web/src/components/chat/ChatComposer.tsx
index 255f61a0c752..3fe6e740fb9f 100644
--- a/apps/web/src/components/chat/ChatComposer.tsx
+++ b/apps/web/src/components/chat/ChatComposer.tsx
@@ -206,6 +206,7 @@ import {
 import { useOpenPrLink } from "~/lib/openPullRequestLink";
 import {
   collectInlineContextIds,
+  stripInlineContextReferences,
   type ComposerContextReference,
   ensureInlineContextReferences,
   formatInlineContextReference,
@@ -1626,6 +1627,7 @@ export const ChatComposer = memo(function ChatComposer(props: ChatComposerProps)
   const previewFile = composerFiles.find((file) => file.id === previewFileId);
   const composerContextActions = useMemo(
     () => ({
+      environmentId,
       expandImage: (imageId: string) => {
         const preview = buildExpandedImagePreview(composerImages, imageId);
         if (preview) onExpandImage(preview);
@@ -5240,6 +5242,7 @@ export const ChatComposer = memo(function ChatComposer(props: ChatComposerProps)
     options?: {
       readonly source?: ChatFileAttachment["source"];
       readonly selection?: { start: number; end: number };
+      readonly skipImageInlineChip?: boolean;
     },
   ): Promise<boolean> => {
     if (!activeThreadId || files.length === 0 || isRevertingCheckpointRef.current) return false;
@@ -5259,6 +5262,20 @@ export const ChatComposer = memo(function ChatComposer(props: ChatComposerProps)
     // large image is being compressed, and the attachments and errors belong
     // to the thread the paste happened in.
     const threadId = activeThreadId;
+    // Images landing with no prose live on the shelf with no chip. Read before
+    // the awaits below: compression is async and the prompt may change while it
+    // runs. An explicit selection replace and states where the editor refuses
+    // input (connecting, approval, pending questions, project selection) still
+    // get chips so the image is never invisible, unless paste-as-text explicitly
+    // requests no inline image chip.
+    const imageAttachmentsGetChips =
+      !options?.skipImageInlineChip &&
+      (options?.selection !== undefined ||
+        isConnecting ||
+        isComposerApprovalState ||
+        pendingUserInputs.length > 0 ||
+        projectSelectionRequired ||
+        stripInlineContextReferences(promptRef.current).trim().length > 0);
 
     // Validation happens synchronously so concurrent pastes see each other:
     // accepted files reserve their attachment slots (via the pending counter)
@@ -5415,7 +5432,7 @@ export const ChatComposer = memo(function ChatComposer(props: ChatComposerProps)
             : [],
       );
       const storedImages = nextImages.filter((image) => storedImageIds.has(image.id));
-      if (storedImages.length > 0) {
+      if (storedImages.length > 0 && imageAttachmentsGetChips) {
         insertedAny =
           insertAttachmentReferences(storedImages.map(imageContextReference)) || insertedAny;
       }
@@ -5443,6 +5460,8 @@ export const ChatComposer = memo(function ChatComposer(props: ChatComposerProps)
   /**
    * Chips for freshly attached files land at the caret; when the editor cannot take
    * input (approval, pending questions) they are appended so the file is never invisible.
+   * Images skip this when they land with no prose and the editor takes input:
+   * the shelf thumbnail is enough.
    */
   const insertAttachmentReferences = (
     references: ReadonlyArray<ComposerContextReference>,
@@ -5581,7 +5600,7 @@ export const ChatComposer = memo(function ChatComposer(props: ChatComposerProps)
     ) {
       event.preventDefault();
       event.stopPropagation();
-      void addComposerAttachments(files);
+      void addComposerAttachments(files, { skipImageInlineChip: bypassAutoAttachment });
       return;
     }
 
diff --git a/apps/web/src/components/chat/ComposerBannerStack.test.tsx b/apps/web/src/components/chat/ComposerBannerStack.test.tsx
new file mode 100644
index 000000000000..d2e9a649df10
--- /dev/null
+++ b/apps/web/src/components/chat/ComposerBannerStack.test.tsx
@@ -0,0 +1,103 @@
+import { cloneElement, type ReactElement, type ReactNode } from "react";
+import { act, create, type ReactTestRenderer } from "react-test-renderer";
+import { afterEach, expect, it, vi } from "vite-plus/test";
+
+import { ComposerBannerStack } from "./ComposerBannerStack";
+
+vi.mock("../ui/popover", () => ({
+  Popover: "popover",
+  PopoverTrigger: ({ render, children }: { render: ReactElement; children: ReactNode }) =>
+    cloneElement(render, {}, children),
+  PopoverPopup: "popup",
+}));
+vi.mock("../ui/button", () => ({ Button: "button" }));
+vi.mock("../ui/scroll-area", () => ({ ScrollArea: "div" }));
+
+let renderer: ReactTestRenderer;
+afterEach(async () => {
+  if (renderer) await act(() => renderer.unmount());
+  vi.unstubAllGlobals();
+});
+
+it("only offers notice details when the description cannot fit", async () => {
+  vi.stubGlobal("IS_REACT_ACT_ENVIRONMENT", true);
+  let resize = () => {};
+  let mutate = () => {};
+  vi.stubGlobal(
+    "MutationObserver",
+    class {
+      constructor(callback: () => void) {
+        mutate = callback;
+      }
+      observe() {}
+      disconnect() {}
+    },
+  );
+  vi.stubGlobal(
+    "ResizeObserver",
+    class {
+      constructor(callback: () => void) {
+        resize = callback;
+      }
+      observe() {}
+      disconnect() {}
+    },
+  );
+  let position = "static";
+  vi.stubGlobal("getComputedStyle", () => ({ position }));
+  let availableWidth = 200;
+  const nested = { clientWidth: 100, scrollWidth: 80 };
+  const text = {
+    querySelectorAll: () => [nested],
+    get clientWidth() {
+      return (
+        availableWidth -
+        (renderer?.root.findAllByProps({ "aria-label": "Show notice details" }).length ? 28 : 0)
+      );
+    },
+    scrollWidth: 80,
+  };
+  await act(() => {
+    renderer = create(
+      <ComposerBannerStack
+        items={[
+          {
+            id: "usage",
+            variant: "info",
+            icon: null,
+            title: "Usage limits",
+            description: "OpenCode",
+          },
+        ]}
+      />,
+      {
+        createNodeMock: (element) =>
+          element.type === "span" ? text : element.type === "button" ? { offsetWidth: 24 } : null,
+      },
+    );
+  });
+  const details = () => renderer.root.findAllByProps({ "aria-label": "Show notice details" });
+  expect(details()).toHaveLength(0);
+  text.scrollWidth = 300;
+  await act(() => resize());
+  expect(details()).toHaveLength(1);
+  // It fits without the icon: the icon must not keep its own overflow alive.
+  availableWidth = 308;
+  await act(() => resize());
+  expect(details()).toHaveLength(0);
+  text.scrollWidth = 80;
+  await act(() => resize());
+  expect(details()).toHaveLength(0);
+  nested.scrollWidth = 500;
+  await act(() => mutate());
+  expect(details()).toHaveLength(1);
+  nested.scrollWidth = 80;
+  await act(() => mutate());
+  expect(details()).toHaveLength(0);
+  position = "absolute";
+  await act(() => resize());
+  expect(details()).toHaveLength(1);
+  position = "static";
+  await act(() => resize());
+  expect(details()).toHaveLength(0);
+});
diff --git a/apps/web/src/components/chat/ComposerBannerStack.tsx b/apps/web/src/components/chat/ComposerBannerStack.tsx
index b47790b96039..ec4b44259321 100644
--- a/apps/web/src/components/chat/ComposerBannerStack.tsx
+++ b/apps/web/src/components/chat/ComposerBannerStack.tsx
@@ -242,6 +242,82 @@ export function ComposerBannerStack({ className, items }: ComposerBannerStackPro
   );
 }
 
+/** Keep full descriptions reachable only when their inline copy is clipped. */
+function NoticeDescription({ children, compact }: { children: ReactNode; compact?: boolean }) {
+  const descriptionRef = useRef<HTMLSpanElement>(null);
+  const detailsRef = useRef<HTMLButtonElement>(null);
+  const [showDetails, setShowDetails] = useState(false);
+
+  useLayoutEffect(() => {
+    const description = descriptionRef.current;
+    if (!description) return;
+    const measure = () => {
+      // Ignore the space taken by the details button itself so it cannot
+      // sustain its own overflow after the description would otherwise fit.
+      const recoveredWidth = detailsRef.current ? detailsRef.current.offsetWidth + 4 : 0;
+      const hidden = getComputedStyle(description).position === "absolute";
+      setShowDetails(
+        hidden ||
+          [description, ...description.querySelectorAll("*")].some(
+            (element) => element.scrollWidth > element.clientWidth + recoveredWidth,
+          ),
+      );
+    };
+    measure();
+    const observer = new ResizeObserver(measure);
+    observer.observe(description);
+    // A child can reveal new text without resizing its clipped box.
+    const mutations = new MutationObserver(measure);
+    mutations.observe(description, { childList: true, subtree: true, characterData: true });
+    return () => {
+      observer.disconnect();
+      mutations.disconnect();
+    };
+  }, []);
+
+  return (
+    <span className={compact ? "contents" : "flex min-w-8 flex-1 items-center gap-1"}>
+      <span
+        ref={descriptionRef}
+        className={cn(
+          "min-w-0 truncate text-muted-foreground",
+          compact && "shrink-[9999] @max-[400px]:sr-only",
+        )}
+      >
+        {children}
+      </span>
+      {showDetails ? (
+        <Popover>
+          <PopoverTrigger
+            openOnHover
+            render={
+              <Button
+                ref={detailsRef}
+                size="icon-xs"
+                variant="ghost-muted"
+                aria-label="Show notice details"
+                className="flex-none"
+              />
+            }
+          >
+            <InfoIcon />
+          </PopoverTrigger>
+          <PopoverPopup
+            aria-label="Notice details"
+            tooltipStyle
+            side="top"
+            className="max-w-80 whitespace-normal text-pretty wrap-anywhere"
+          >
+            <ComposerBanner.Scroll className="max-h-[min(var(--available-height),24rem,40dvh)]">
+              {children}
+            </ComposerBanner.Scroll>
+          </PopoverPopup>
+        </Popover>
+      ) : null}
+    </span>
+  );
+}
+
 function ComposerBannerStackAlert({
   item,
   attached,
@@ -278,44 +354,9 @@ function ComposerBannerStackAlert({
         <ComposerBanner.Content className="whitespace-nowrap">
           <span className="min-w-0 truncate font-medium leading-7 sm:leading-6">{item.title}</span>
           {item.description ? (
-            <span className={item.compact ? "contents" : "flex min-w-8 flex-1 items-center gap-1"}>
-              <span
-                className={cn(
-                  "min-w-0 truncate text-muted-foreground",
-                  item.compact && "shrink-[9999] @max-[400px]:sr-only",
-                )}
-              >
-                {item.description}
-              </span>
-              <Popover>
-                <PopoverTrigger
-                  openOnHover
-                  render={
-                    <Button
-                      size="icon-xs"
-                      variant="ghost"
-                      aria-label="Show notice details"
-                      className={cn(
-                        "flex-none text-muted-foreground hover:text-foreground",
-                        item.compact && "hidden @max-[400px]:inline-flex",
-                      )}
-                    />
-                  }
-                >
-                  <InfoIcon className="size-3.5" />
-                </PopoverTrigger>
-                <PopoverPopup
-                  aria-label="Notice details"
-                  tooltipStyle
-                  side="top"
-                  className="max-w-80 whitespace-normal text-pretty wrap-anywhere"
-                >
-                  <ComposerBanner.Scroll className="max-h-[min(var(--available-height),24rem,40dvh)]">
-                    {item.description}
-                  </ComposerBanner.Scroll>
-                </PopoverPopup>
-              </Popover>
-            </span>
+            <NoticeDescription compact={item.compact ?? false}>
+              {item.description}
+            </NoticeDescription>
           ) : null}
         </ComposerBanner.Content>
         {item.actions || item.onDismiss ? (
diff --git a/apps/web/src/components/chat/DraftHeroHeadline.tsx b/apps/web/src/components/chat/DraftHeroHeadline.tsx
index 07956c2b299e..d542cd6a8a9f 100644
--- a/apps/web/src/components/chat/DraftHeroHeadline.tsx
+++ b/apps/web/src/components/chat/DraftHeroHeadline.tsx
@@ -136,10 +136,11 @@ export function DraftHeroHeadline({
       <Tooltip>
         <TooltipTrigger
           render={
-            <MenuTrigger
-              aria-label={hasResolvedProject ? "Change project" : "Choose a project"}
-              className="pointer-events-auto inline-block max-w-64 truncate border-foreground/60 border-b border-dotted align-baseline text-foreground transition-colors hover:border-foreground/80 focus-visible:rounded-sm focus-visible:outline-hidden focus-visible:ring-2 focus-visible:ring-ring"
-            />
+            // The trigger's accessible name comes from its visible text (the
+            // project title) so the hero sentence reads naturally: an
+            // aria-label here would replace the title with an action phrase
+            // mid-sentence and baffle screen-reader users.
+            <MenuTrigger className="pointer-events-auto inline-block max-w-64 truncate border-foreground/60 border-b border-dotted align-baseline text-foreground transition-colors hover:border-foreground/80 focus-visible:rounded-sm focus-visible:outline-hidden focus-visible:ring-2 focus-visible:ring-ring" />
           }
         >
           {activeProjectDisplayName ?? "Choose a project"}
@@ -233,8 +234,21 @@ export function DraftHeroHeadline({
     </button>
   );
 
+  // The composer hero is a sentence, so the heading's accessible name must be
+  // a complete sentence too. The project picker is a control rendered inline
+  // in the h1; without an explicit label its widget state bleeds into the
+  // announced phrase.
+  const headingLabel = hasResolvedProject
+    ? `What should we build in ${activeProjectDisplayName}?`
+    : canChooseProject
+      ? `${activeProjectDisplayName ?? "Choose a project"} to start`
+      : "Add a project to start";
+
   return (
-    <h1 className="mx-auto w-full max-w-5xl text-center font-normal text-2xl text-foreground tracking-tight sm:text-3xl">
+    <h1
+      aria-label={headingLabel}
+      className="mx-auto w-full max-w-5xl text-center font-normal text-2xl text-foreground tracking-tight sm:text-3xl"
+    >
       {hasResolvedProject ? (
         <>What should we build in {projectSelector}?</>
       ) : canChooseProject ? (
diff --git a/apps/web/src/components/chat/MessagesTimeline.tsx b/apps/web/src/components/chat/MessagesTimeline.tsx
index 42a45b991028..161adc8be00d 100644
--- a/apps/web/src/components/chat/MessagesTimeline.tsx
+++ b/apps/web/src/components/chat/MessagesTimeline.tsx
@@ -1778,7 +1778,7 @@ function QueuedMessageTimelineRow({
     <div className="flex flex-col items-end" data-queued-message-id={queuedMessage.id}>
       <div className="max-w-[80%] rounded-2xl border border-dashed border-border p-3 text-message-foreground/80">
         {text.length > 0 ? (
-          <div className="whitespace-pre-wrap break-words text-sm">{text}</div>
+          <UserMessageBody text={text} skills={ctx.skills} markdownCwd={ctx.markdownCwd} />
         ) : null}
         {attachmentCount > 0 || contextCount > 0 ? (
           <div className={cn("text-secondary-label text-xs", text.length > 0 && "mt-1.5")}>
@@ -2570,7 +2570,12 @@ function BackgroundWorktreeSetupChip({ snapshot }: { snapshot: WorktreeSetupSnap
         <Spinner className="size-3 shrink-0" />
         <span className="truncate">{scriptName}</span>
       </PopoverTrigger>
-      <PopoverPopup side="bottom" align="end" className="w-[32rem] max-w-[calc(100vw-2rem)] p-3">
+      <PopoverPopup
+        side="bottom"
+        align="end"
+        className="surface-glass! w-[28rem] max-w-[calc(100vw-2rem)]"
+        viewportClassName="py-3 [--viewport-inline-padding:--spacing(3)]"
+      >
         <WorktreeSetupCard
           snapshot={snapshot}
           embedded
@@ -3508,12 +3513,13 @@ function UserMessagePullRequestContextChip(props: {
   copyMarkdown: string;
   toneClassName: string;
 }) {
-  const { openPullRequest } = use(TimelineRowCtx);
+  const { activeThreadEnvironmentId, openPullRequest } = use(TimelineRowCtx);
   const metadata = props.record.pullRequest;
   if (metadata === undefined) return null;
   return (
     <PullRequestChip
       metadata={metadata}
+      environmentId={activeThreadEnvironmentId}
       label={reviewCommentContextLabel(props.record)}
       kindLabel={pullRequestContextKindLabel(props.record)}
       className={cn(CHAT_INLINE_CHIP_CLASS_NAME, props.toneClassName)}
@@ -4067,7 +4073,7 @@ const CollapsibleUserMessageBody = memo(function CollapsibleUserMessageBody(prop
 
 const UserMessageBody = memo(function UserMessageBody(props: {
   text: string;
-  renderContextReference: (reference: ChatMarkdownContextReference) => ReactNode;
+  renderContextReference?: (reference: ChatMarkdownContextReference) => ReactNode;
   skills: ReadonlyArray<Pick<ServerProviderSkill, "name" | "displayName">>;
   markdownCwd: string | undefined;
 }) {
diff --git a/apps/web/src/components/composerContextPresentation.tsx b/apps/web/src/components/composerContextPresentation.tsx
index 6a945be5d679..9e5c775161cb 100644
--- a/apps/web/src/components/composerContextPresentation.tsx
+++ b/apps/web/src/components/composerContextPresentation.tsx
@@ -5,6 +5,7 @@ import { formatAttachmentSize } from "@t3tools/client-runtime/state/attachments"
 import { videoMimeType } from "@t3tools/shared/video";
 import { MessageCircleIcon, MousePointerClickIcon } from "lucide-react";
 import { createContext, type MouseEvent, type ReactElement, type ReactNode, use } from "react";
+import type { EnvironmentId } from "@t3tools/contracts";
 
 import type { ComposerFileAttachment, ComposerImageAttachment } from "~/composerDraftStore";
 import { composerFileNeedsReattach } from "~/composerDraftStore";
@@ -66,6 +67,7 @@ export type ComposerDraftContextRecord =
 
 /** What a chip can do beyond showing itself; the composer supplies the handlers. */
 export interface ComposerContextActions {
+  environmentId: EnvironmentId | null;
   expandImage: (imageId: string) => void;
   expandVideo: (fileId: string) => void;
   openFile: (fileId: string) => void;
@@ -74,6 +76,7 @@ export interface ComposerContextActions {
 }
 
 export const ComposerContextActionsContext = createContext<ComposerContextActions>({
+  environmentId: null,
   expandImage: () => {},
   expandVideo: () => {},
   openFile: () => {},
@@ -247,6 +250,7 @@ function PullRequestContextChip(props: { record: ReviewCommentContext; toneClass
   return (
     <PullRequestChip
       metadata={metadata}
+      environmentId={actions.environmentId}
       label={reviewCommentContextLabel(props.record)}
       kindLabel={pullRequestContextKindLabel(props.record)}
       className={cn(COMPOSER_INLINE_CHIP_CLASS_NAME, props.toneClassName)}
diff --git a/apps/web/src/components/contextChipParts.tsx b/apps/web/src/components/contextChipParts.tsx
index 82370928c97b..9f8fa9998b4e 100644
--- a/apps/web/src/components/contextChipParts.tsx
+++ b/apps/web/src/components/contextChipParts.tsx
@@ -1,4 +1,4 @@
-import type { PullRequestContextMetadata } from "@t3tools/contracts";
+import type { EnvironmentId, PullRequestContextMetadata } from "@t3tools/contracts";
 import { CircleDashedIcon, FilmIcon, ImageIcon } from "lucide-react";
 import {
   useState,
@@ -23,6 +23,8 @@ import { PullRequestContextDetails } from "./PullRequestContextDetails";
 import { Button } from "./ui/button";
 import { Popover, PopoverPopup, PopoverTitle, PopoverTrigger } from "./ui/popover";
 import { Tooltip, TooltipPopup, TooltipTrigger } from "./ui/tooltip";
+import { PullRequestLinkPreview } from "./pullRequest/PullRequestLinkPreview";
+import { usePullRequestPreviewTarget } from "~/lib/openPullRequestLink";
 
 /** Shared visual slots; each surface keeps ownership of payload lookup and actions. */
 export function ContextChipShell({
@@ -112,6 +114,7 @@ export function ContextChipPopover(props: {
 
 export function PullRequestChip(props: {
   metadata: PullRequestContextMetadata;
+  environmentId: EnvironmentId | null;
   label: string;
   kindLabel: string;
   className: string;
@@ -119,29 +122,40 @@ export function PullRequestChip(props: {
   copyMarkdown?: string;
   onOpen: (event: MouseEvent<HTMLElement>, url: string) => void;
 }) {
+  const previewTarget = usePullRequestPreviewTarget(props.environmentId, props.metadata.url);
+  const button = (
+    <Button
+      variant="chip"
+      className={cn(
+        props.className,
+        CONTEXT_INLINE_CHIP_FOCUS_CLASS_NAME,
+        CONTEXT_INLINE_CHIP_INTERACTIVE_CLASS_NAME,
+        "cursor-pointer",
+      )}
+      aria-label={`Open ${props.kindLabel} ${props.label}: ${props.metadata.title}`}
+      data-markdown-copy={props.copyMarkdown}
+      onClick={(event) => props.onOpen(event, props.metadata.url)}
+    >
+      <PullRequestGlyph.pullRequest
+        className={cn(COMPOSER_INLINE_CHIP_ICON_CLASS_NAME, "size-3.5")}
+      />
+      <span className={props.labelClassName}>{props.label}</span>
+    </Button>
+  );
+  if (previewTarget !== null) {
+    return (
+      <PullRequestLinkPreview
+        link={button}
+        originalUrl={props.metadata.url}
+        target={previewTarget}
+        confirmBeforeOpen={false}
+        fallback={<PullRequestContextDetails metadata={props.metadata} />}
+      />
+    );
+  }
   return (
     <Tooltip>
-      <TooltipTrigger
-        render={
-          <Button
-            variant="chip"
-            className={cn(
-              props.className,
-              CONTEXT_INLINE_CHIP_FOCUS_CLASS_NAME,
-              CONTEXT_INLINE_CHIP_INTERACTIVE_CLASS_NAME,
-              "cursor-pointer",
-            )}
-            aria-label={`Open ${props.kindLabel} ${props.label}: ${props.metadata.title}`}
-            data-markdown-copy={props.copyMarkdown}
-            onClick={(event) => props.onOpen(event, props.metadata.url)}
-          >
-            <PullRequestGlyph.pullRequest
-              className={cn(COMPOSER_INLINE_CHIP_ICON_CLASS_NAME, "size-3.5")}
-            />
-            <span className={props.labelClassName}>{props.label}</span>
-          </Button>
-        }
-      />
+      <TooltipTrigger render={button} />
       <TooltipPopup side="top">
         <PullRequestContextDetails metadata={props.metadata} />
       </TooltipPopup>
diff --git a/apps/web/src/components/device/DeviceLoadingView.tsx b/apps/web/src/components/device/DeviceLoadingView.tsx
index 70e848c3ce7e..332d3994cca1 100644
--- a/apps/web/src/components/device/DeviceLoadingView.tsx
+++ b/apps/web/src/components/device/DeviceLoadingView.tsx
@@ -1,3 +1,4 @@
+import type { ReactNode } from "react";
 import { Smartphone } from "lucide-react";
 
 import { Spinner } from "~/components/ui/spinner";
@@ -8,6 +9,7 @@ export function DeviceLoadingView(props: {
   readonly stage: "opening" | "stream";
   readonly message: string;
   readonly error?: boolean;
+  readonly children?: ReactNode;
 }) {
   return (
     <div
@@ -28,6 +30,7 @@ export function DeviceLoadingView(props: {
           {!props.error ? <Spinner className="size-3" /> : null}
           <span>{props.message}</span>
         </div>
+        {props.children}
         {!props.error ? (
           <div
             className="flex w-24 gap-1"
diff --git a/apps/web/src/components/device/DeviceStreamView.test.tsx b/apps/web/src/components/device/DeviceStreamView.test.tsx
index 785560783131..7e0392340129 100644
--- a/apps/web/src/components/device/DeviceStreamView.test.tsx
+++ b/apps/web/src/components/device/DeviceStreamView.test.tsx
@@ -1,32 +1,63 @@
-import { act } from "react";
+import { act, useSyncExternalStore } from "react";
 import { create, type ReactTestRenderer } from "react-test-renderer";
 import { EnvironmentId } from "@t3tools/contracts";
-import { afterEach, expect, it, vi } from "vite-plus/test";
+import { afterEach, beforeEach, expect, it, vi } from "vite-plus/test";
 
+// Like the real atom, a refresh yields a new access object and re-renders subscribers.
+const accessStore = {
+  value: { httpBase: "http://test", wsBase: "ws://test", query: {}, credentials: true },
+  listeners: new Set<() => void>(),
+  refresh() {
+    accessStore.value = { ...accessStore.value };
+    for (const listener of accessStore.listeners) listener();
+  },
+  subscribe(listener: () => void) {
+    accessStore.listeners.add(listener);
+    return () => accessStore.listeners.delete(listener);
+  },
+};
 vi.mock("~/state/device", () => ({
-  useDeviceHubAccess: () => access,
-  refreshDeviceHubAccess: vi.fn(),
-}));
-const access = { httpBase: "http://test", wsBase: "ws://test", query: {}, credentials: true };
-vi.mock("@t3tools/client-runtime/device/stream", () => ({
-  createDeviceStreamClient: (
-    _target: unknown,
-    _canvas: unknown,
-    events: { onMjpegFallback: (url: string) => void },
-  ) => ({
-    start: () => events.onMjpegFallback("http://test/stream.mjpeg"),
-    stop: vi.fn(),
-  }),
+  useDeviceHubAccess: () => useSyncExternalStore(accessStore.subscribe, () => accessStore.value),
+  refreshDeviceHubAccess: () => accessStore.refresh(),
 }));
 import { DeviceStreamView } from "./DeviceStreamView";
+
+class Image extends EventTarget {
+  src = "";
+  naturalWidth = 0;
+  naturalHeight = 0;
+  removeAttribute(name: string) {
+    if (name === "src") this.src = "";
+  }
+}
 let renderer: ReactTestRenderer | undefined;
+let primes = 0;
+beforeEach(() => {
+  primes = 0;
+});
 afterEach(async () => {
   await act(async () => renderer?.unmount());
+  renderer = undefined;
+  vi.useRealTimers();
   vi.unstubAllGlobals();
 });
 
-it("removes MJPEG requests while hidden and reconnects when shown", async () => {
+async function setup() {
+  vi.useFakeTimers();
   vi.stubGlobal("IS_REACT_ACT_ENVIRONMENT", true);
+  vi.stubGlobal("fetch", () => {
+    primes++;
+    return Promise.resolve(new Response("prime"));
+  });
+  vi.stubGlobal(
+    "WebSocket",
+    class {
+      static OPEN = 1;
+      readyState = 1;
+      send() {}
+      close() {}
+    },
+  );
   vi.stubGlobal(
     "ResizeObserver",
     class {
@@ -34,6 +65,7 @@ it("removes MJPEG requests while hidden and reconnects when shown", async () =>
       disconnect() {}
     },
   );
+  const images: Image[] = [];
   const view = (visible: boolean) => (
     <DeviceStreamView
       hostId="local"
@@ -45,15 +77,61 @@ it("removes MJPEG requests while hidden and reconnects when shown", async () =>
   );
   await act(async () => {
     renderer = create(view(true), {
-      createNodeMock: () => ({
-        style: { setProperty() {} },
-        getBoundingClientRect: () => ({ width: 400, height: 800 }),
-      }),
+      createNodeMock: (node) => {
+        if (node.type === "img") {
+          const image = new Image();
+          images.push(image);
+          return image;
+        }
+        return {
+          style: { setProperty() {} },
+          getBoundingClientRect: () => ({ width: 400, height: 800 }),
+        };
+      },
     });
   });
-  expect(renderer!.root.findAllByType("img")).toHaveLength(1);
+  return { images, view };
+}
+
+it("removes MJPEG requests while hidden and reconnects when shown", async () => {
+  const { images, view } = await setup();
+  expect(images[0]!.src).toContain("stream.mjpeg");
   await act(async () => renderer!.update(view(false)));
   expect(renderer!.root.findAllByType("img")).toHaveLength(0);
+  expect(images[0]!.src).toBe("");
+  expect(vi.getTimerCount()).toBe(0);
   await act(async () => renderer!.update(view(true)));
-  expect(renderer!.root.findAllByType("img")).toHaveLength(1);
+  expect(images.at(-1)!.src).toContain("stream.mjpeg");
+});
+
+it("offers Reconnect after the shared timeout and receives a frame after retry with unchanged access", async () => {
+  const { images } = await setup();
+  await act(async () => {
+    await vi.advanceTimersByTimeAsync(15_000);
+  });
+  expect(
+    renderer!.root.findByProps({ role: "alert" }).findByType("span").children.join(""),
+  ).toContain("No video");
+  expect(images[0]!.src).toBe("");
+  await act(async () => renderer!.root.findByType("button").props.onClick());
+  expect(renderer!.root.findAllByProps({ role: "alert" })).toHaveLength(0);
+  expect(images[1]!.src).toContain("stream.mjpeg");
+  await act(async () => {
+    images[1]!.naturalWidth = 400;
+    images[1]!.naturalHeight = 800;
+    images[1]!.dispatchEvent(new Event("load"));
+  });
+  expect(renderer!.root.findAllByProps({ role: "status" })).toHaveLength(0);
+  expect(renderer!.root.findAllByType("button")).toHaveLength(0);
+  expect(vi.getTimerCount()).toBe(0);
+});
+
+it("starts exactly one new stream per Reconnect press", async () => {
+  await setup();
+  await act(async () => {
+    await vi.advanceTimersByTimeAsync(15_000);
+  });
+  expect(primes).toBe(1);
+  await act(async () => renderer!.root.findByType("button").props.onClick());
+  expect(primes).toBe(2);
 });
diff --git a/apps/web/src/components/device/DeviceStreamView.tsx b/apps/web/src/components/device/DeviceStreamView.tsx
index 60e8414fb060..4d4744a6268f 100644
--- a/apps/web/src/components/device/DeviceStreamView.tsx
+++ b/apps/web/src/components/device/DeviceStreamView.tsx
@@ -1,7 +1,8 @@
 import type { DevicePlatform, EnvironmentId } from "@t3tools/contracts";
-import { useEffect, useMemo, useRef, useState } from "react";
+import { useCallback, useEffect, useMemo, useRef, useState } from "react";
 
 import { cn } from "~/lib/utils";
+import { Button } from "~/components/ui/button";
 import { refreshDeviceHubAccess, useDeviceHubAccess } from "~/state/device";
 import { DeviceLoadingView } from "./DeviceLoadingView";
 import { type DeviceAxElement, fetchDeviceAxTree } from "./deviceHubApi";
@@ -49,6 +50,9 @@ export function DeviceStreamView(props: {
   const [screen, setScreen] = useState<DeviceScreenSize | null>(null);
   const [mjpegUrl, setMjpegUrl] = useState<string | null>(null);
   const [mjpegGeneration, setMjpegGeneration] = useState(0);
+  const attachMjpegImage = useCallback((image: HTMLImageElement | null) => {
+    clientRef.current?.setMjpegImage(image);
+  }, []);
   const [inputState, setInputState] = useState<{ connected: boolean; detail?: string }>({
     connected: false,
   });
@@ -235,11 +239,13 @@ export function DeviceStreamView(props: {
       role="application"
       aria-label={`${props.platform === "ios" ? "iOS Simulator" : "Android Emulator"} screen`}
       onKeyDown={(event) => {
+        if (event.target !== event.currentTarget) return;
         if (event.metaKey && !["r", "R"].includes(event.key)) return;
         event.preventDefault();
         clientRef.current?.sendKey(event.nativeEvent, "down");
       }}
       onKeyUp={(event) => {
+        if (event.target !== event.currentTarget) return;
         clientRef.current?.sendKey(event.nativeEvent, "up");
       }}
     >
@@ -279,7 +285,7 @@ export function DeviceStreamView(props: {
         {props.visible && access && mjpegUrl ? (
           <img
             key={mjpegGeneration}
-            src={mjpegUrl}
+            ref={attachMjpegImage}
             alt=""
             draggable={false}
             className="absolute top-0 left-0 object-contain"
@@ -317,14 +323,29 @@ export function DeviceStreamView(props: {
         </div>
       ) : null}
       {status !== "streaming" ? (
-        <div className="pointer-events-none absolute inset-0">
+        <div className="absolute inset-0">
           <DeviceLoadingView
             name={props.deviceName ?? "Device"}
             description={props.deviceDescription ?? ""}
             stage="stream"
             message={status === "error" ? (detail ?? "Stream failed.") : "Connecting video…"}
             error={status === "error"}
-          />
+          >
+            {status === "error" ? (
+              <Button
+                size="sm"
+                variant="outline"
+                onClick={() => {
+                  // An expired ticket surfaces as unauthorized on restart and
+                  // refreshes access through the effect; no need to mint one here.
+                  clientRef.current?.stop();
+                  clientRef.current?.start();
+                }}
+              >
+                Reconnect
+              </Button>
+            ) : null}
+          </DeviceLoadingView>
         </div>
       ) : null}
     </div>
diff --git a/apps/web/src/components/device/deviceStream.test.ts b/apps/web/src/components/device/deviceStream.test.ts
deleted file mode 100644
index 13a57d44ffcf..000000000000
--- a/apps/web/src/components/device/deviceStream.test.ts
+++ /dev/null
@@ -1,345 +0,0 @@
-import { afterEach, describe, expect, it, vi } from "vite-plus/test";
-
-import {
-  createDeviceStreamClient,
-  AvccDemuxer,
-  avcCodecString,
-  parseSemuPacket,
-  scanAccessUnit,
-} from "@t3tools/client-runtime/device/stream";
-
-const envelope = (tag: number, payload: number[]) => {
-  const length = 1 + payload.length;
-  return [
-    (length >>> 24) & 0xff,
-    (length >>> 16) & 0xff,
-    (length >>> 8) & 0xff,
-    length & 0xff,
-    tag,
-    ...payload,
-  ];
-};
-
-describe("AvccDemuxer", () => {
-  it("reassembles envelopes split across reads", () => {
-    const demuxer = new AvccDemuxer();
-    const bytes = new Uint8Array([
-      ...envelope(1, [1, 0x64, 0x00, 0x1f]),
-      ...envelope(2, [9, 9, 9]),
-      ...envelope(0x7f, [0]),
-      ...envelope(3, [4]),
-    ]);
-    const first = demuxer.push(bytes.subarray(0, 7));
-    const rest = demuxer.push(bytes.subarray(7));
-    const chunks = [...first, ...rest];
-    expect(chunks.map((chunk) => chunk.type)).toEqual(["description", "keyframe", "delta"]);
-    expect(Array.from(chunks[0]!.payload)).toEqual([1, 0x64, 0x00, 0x1f]);
-    expect(Array.from(chunks[1]!.payload)).toEqual([9, 9, 9]);
-  });
-
-  it("derives the WebCodecs codec string from the avcC record", () => {
-    expect(avcCodecString(new Uint8Array([1, 0x64, 0x00, 0x1f]))).toBe("avc1.64001f");
-    expect(avcCodecString(new Uint8Array([1]))).toBe("avc1.42E01E");
-  });
-});
-
-describe("native device stream transport", () => {
-  afterEach(() => {
-    vi.useRealTimers();
-    vi.unstubAllGlobals();
-  });
-
-  function setup(platform: "ios" | "android") {
-    vi.useFakeTimers();
-    vi.stubGlobal("VideoDecoder", vi.fn());
-    vi.stubGlobal("EncodedVideoChunk", vi.fn());
-    let resolveOpened!: (socket: FakeSocket) => void;
-    const waitForSocket = () =>
-      new Promise<FakeSocket>((resolve) => {
-        resolveOpened = resolve;
-      });
-    const opened = waitForSocket();
-    class FakeSocket {
-      static OPEN = 1;
-      readyState = 1;
-      binaryType = "";
-      onopen: (() => void) | null = null;
-      onclose: ((event: { code: number; reason: string }) => void) | null = null;
-      send = vi.fn();
-      close = vi.fn();
-      readonly url: string;
-      constructor(url: string) {
-        this.url = url;
-        resolveOpened(this);
-      }
-    }
-    vi.stubGlobal("WebSocket", FakeSocket);
-    const fetch = vi.fn(() => Promise.resolve(new Response("frame")));
-    vi.stubGlobal("fetch", fetch);
-    const events = {
-      onStatus: vi.fn(),
-      onScreen: vi.fn(),
-      onUnauthorized: vi.fn(),
-      onMjpegFallback: vi.fn(),
-      onInputConnected: vi.fn(),
-    };
-    const client = createDeviceStreamClient(
-      {
-        platform,
-        deviceId: "test device",
-        preferMjpeg: platform === "ios",
-        access: {
-          httpBase: "https://environment.test/api/device-hub",
-          wsBase: "wss://environment.test/api/device-hub",
-          credentials: false,
-          query: { wsTicket: "stream-ticket", hostId: "ssh-host" },
-        },
-      },
-      { getContext: () => null } as unknown as HTMLCanvasElement,
-      events,
-    );
-    return { client, opened, waitForSocket, events, fetch };
-  }
-
-  it("uses authenticated iOS MJPEG and forwards controls without a cross-origin video fetch", async () => {
-    const { client, opened, events, fetch } = setup("ios");
-    client.start();
-    const socket = await opened;
-    const imageUrl = new URL(events.onMjpegFallback.mock.calls[0]![0] as string);
-    expect(imageUrl.pathname).toContain("test%20device/stream.mjpeg");
-    expect(imageUrl.searchParams.get("wsTicket")).toBe("stream-ticket");
-    expect(imageUrl.searchParams.get("hostId")).toBe("ssh-host");
-    expect(fetch).toHaveBeenCalledTimes(1);
-    socket.onopen?.();
-    client.pressButton("home");
-    client.sendTouch("begin", 0.25, 0.75);
-    const messages = socket.send.mock.calls.slice(1).map(([bytes]) => {
-      const packet = bytes as Uint8Array;
-      return {
-        tag: packet[0],
-        body: JSON.parse(new TextDecoder().decode(packet.subarray(1))) as unknown,
-      };
-    });
-    expect(messages).toEqual([
-      { tag: 0x04, body: { button: "home" } },
-      { tag: 0x03, body: { type: "begin", x: 0.25, y: 0.75 } },
-    ]);
-    client.stop();
-    expect(socket.close).toHaveBeenCalledTimes(1);
-    expect(vi.getTimerCount()).toBe(0);
-  });
-
-  it("forwards Android gestures and device controls through the ticketed host socket", async () => {
-    const { client, opened } = setup("android");
-    client.start();
-    const socket = await opened;
-    const url = new URL(socket.url);
-    expect(url.searchParams.get("device")).toBe("test device");
-    expect(url.searchParams.get("wsTicket")).toBe("stream-ticket");
-    expect(url.searchParams.get("hostId")).toBe("ssh-host");
-    client.sendTouch("begin", 0.2, 0.8);
-    client.sendTouch("move", 0.2, 0.4);
-    client.sendTouch("end", 0.2, 0.1);
-    client.pressButton("home");
-    client.pressButton("appSwitcher");
-    expect(
-      socket.send.mock.calls.map(([message]) => JSON.parse(message as string) as unknown),
-    ).toEqual([
-      { type: "touch", action: "down", x: 0.2, y: 0.8 },
-      { type: "touch", action: "move", x: 0.2, y: 0.4 },
-      { type: "touch", action: "up", x: 0.2, y: 0.1 },
-      { type: "home" },
-      { type: "recents" },
-    ]);
-    client.stop();
-    expect(socket.close).toHaveBeenCalledTimes(1);
-  });
-
-  it("renews an expired Android ticket when the HTTP upgrade is rejected instead of retrying it forever", async () => {
-    const { client, opened, events } = setup("android");
-    client.start();
-    const socket = await opened;
-    socket.onclose?.({ code: 1006, reason: "" });
-    expect(events.onUnauthorized).toHaveBeenCalledTimes(1);
-    expect(vi.getTimerCount()).toBe(0);
-    client.stop();
-  });
-
-  it.each(["ios", "android"] as const)(
-    "keeps a restarted %s stream connected when the discarded socket closes late",
-    async (platform) => {
-      const { client, opened, waitForSocket, events } = setup(platform);
-      client.start();
-      const discarded = await opened;
-      client.stop();
-      const reopened = waitForSocket();
-      client.start();
-      const replacement = await reopened;
-      replacement.onopen?.();
-      replacement.send.mockClear();
-      events.onInputConnected.mockClear();
-
-      discarded.onclose?.({ code: 1006, reason: "" });
-
-      expect(events.onUnauthorized).not.toHaveBeenCalled();
-      expect(events.onInputConnected).not.toHaveBeenCalled();
-      expect(replacement.close).not.toHaveBeenCalled();
-      client.pressButton("home");
-      expect(replacement.send).toHaveBeenCalledTimes(1);
-      client.stop();
-      expect(replacement.close).toHaveBeenCalledTimes(1);
-      expect(vi.getTimerCount()).toBe(0);
-    },
-  );
-
-  it.each(["ios", "android"] as const)(
-    "does not renew credentials or reconnect a stopped %s stream",
-    async (platform) => {
-      const { client, opened, events } = setup(platform);
-      client.start();
-      const socket = await opened;
-      events.onInputConnected.mockClear();
-      client.stop();
-      socket.onclose?.({ code: 1006, reason: "" });
-      expect(events.onUnauthorized).not.toHaveBeenCalled();
-      expect(events.onInputConnected).not.toHaveBeenCalled();
-      expect(vi.getTimerCount()).toBe(0);
-    },
-  );
-});
-
-describe("serve-emu frames", () => {
-  it("strips the SEMU header and reads the keyframe flag and timestamp", () => {
-    const buffer = new ArrayBuffer(16 + 3);
-    const view = new DataView(buffer);
-    view.setUint32(0, 0x53454d55);
-    view.setUint8(4, 1);
-    view.setUint8(5, 1);
-    view.setBigUint64(8, 123456n);
-    new Uint8Array(buffer).set([7, 8, 9], 16);
-    const packet = parseSemuPacket(buffer);
-    expect(packet.isKey).toBe(true);
-    expect(packet.timestamp).toBe(123456);
-    expect(Array.from(packet.data)).toEqual([7, 8, 9]);
-  });
-
-  it("treats a frame without the header as raw data", () => {
-    const packet = parseSemuPacket(new Uint8Array([0, 0, 1, 0x65]).buffer);
-    expect(packet.isKey).toBeNull();
-    expect(packet.data.length).toBe(4);
-  });
-
-  it("finds the SPS and IDR NAL units in an Annex-B access unit", () => {
-    const unit = new Uint8Array([0, 0, 0, 1, 0x67, 0x64, 0x00, 0x1f, 0, 0, 1, 0x65, 0xaa]);
-    const scanned = scanAccessUnit(unit);
-    expect(scanned.isKey).toBe(true);
-    expect(scanned.sps && avcCodecString(scanned.sps)).toBe("avc1.64001f");
-    expect(scanAccessUnit(new Uint8Array([0, 0, 1, 0x41, 0x00])).isKey).toBe(false);
-  });
-});
-
-describe("iOS input startup", () => {
-  afterEach(() => {
-    vi.useRealTimers();
-    vi.unstubAllGlobals();
-  });
-
-  const setup = () => {
-    vi.useFakeTimers();
-    const sockets: FakeSocket[] = [];
-    class FakeSocket {
-      static OPEN = 1;
-      readyState = 1;
-      binaryType = "";
-      onopen: (() => void) | null = null;
-      onmessage: ((event: { data: ArrayBuffer }) => void) | null = null;
-      onclose: ((event: { code: number; reason: string }) => void) | null = null;
-      send = vi.fn();
-      close = vi.fn();
-      constructor() {
-        sockets.push(this);
-      }
-    }
-    vi.stubGlobal("WebSocket", FakeSocket);
-    const signals: AbortSignal[] = [];
-    vi.stubGlobal(
-      "fetch",
-      vi.fn((_url, init: RequestInit) => {
-        const signal = init.signal!;
-        signals.push(signal);
-        return Promise.resolve(
-          new Response(
-            new ReadableStream({
-              start(controller) {
-                signal.addEventListener("abort", () => controller.error(new Error("aborted")));
-              },
-            }),
-          ),
-        );
-      }),
-    );
-    const client = createDeviceStreamClient(
-      {
-        platform: "ios",
-        deviceId: "test-device",
-        access: {
-          httpBase: "http://test/api/device-hub",
-          wsBase: "ws://test/api/device-hub",
-          credentials: true,
-          query: {},
-        },
-      },
-      { getContext: () => null } as unknown as HTMLCanvasElement,
-      {
-        onStatus: vi.fn(),
-        onScreen: vi.fn(),
-        onUnauthorized: vi.fn(),
-        onMjpegFallback: vi.fn(),
-        onInputConnected: vi.fn(),
-      },
-    );
-    return { client, sockets, signals };
-  };
-
-  it("connects input when the MJPEG prime never produces a frame", async () => {
-    const { client, sockets, signals } = setup();
-    client.start();
-    await vi.advanceTimersByTimeAsync(2_000);
-    expect(signals[0]?.aborted).toBe(true);
-    expect(sockets).toHaveLength(1);
-    client.stop();
-  });
-
-  it("aborts priming immediately when hidden without opening a socket later", async () => {
-    const { client, sockets, signals } = setup();
-    client.start();
-    await vi.advanceTimersByTimeAsync(0);
-    client.stop();
-    expect(signals[0]?.aborted).toBe(true);
-    await vi.advanceTimersByTimeAsync(2_000);
-    expect(sockets).toHaveLength(0);
-  });
-
-  it.each([
-    ["landscape_left", 0.7, 1 - 0.2],
-    ["landscape_right", 1 - 0.7, 0.2],
-  ])("maps %s touches back to the raw iOS framebuffer", async (orientation, x, y) => {
-    const { client, sockets } = setup();
-    client.start();
-    await vi.advanceTimersByTimeAsync(2_000);
-    const socket = sockets[0]!;
-    const json = new TextEncoder().encode(JSON.stringify({ width: 400, height: 800, orientation }));
-    const packet = new Uint8Array(1 + json.length);
-    packet[0] = 0x82;
-    packet.set(json, 1);
-    socket.onmessage?.({ data: packet.buffer });
-    client.sendTouch("begin", 0.2, 0.7);
-    const sent = socket.send.mock.calls[0]![0] as Uint8Array;
-    expect(JSON.parse(new TextDecoder().decode(sent.subarray(1)))).toEqual({
-      type: "begin",
-      x,
-      y,
-    });
-    client.stop();
-  });
-});
diff --git a/apps/web/src/components/preview/AgentBrowserCursor.tsx b/apps/web/src/components/preview/AgentBrowserCursor.tsx
index bc89daee4595..408f268fa0c4 100644
--- a/apps/web/src/components/preview/AgentBrowserCursor.tsx
+++ b/apps/web/src/components/preview/AgentBrowserCursor.tsx
@@ -24,7 +24,6 @@ export function AgentBrowserCursor(props: {
 
   return (
     <AgentBrowserCursorEvent
-      key={event.sequence}
       event={event}
       content={content}
       zoomFactor={zoomFactor}
@@ -46,12 +45,13 @@ function AgentBrowserCursorEvent(props: {
   readonly controller: BrowserController;
 }) {
   const { event, content, zoomFactor, controller } = props;
-  const [active, setActive] = useState(true);
+  const [inactiveSequence, setInactiveSequence] = useState<number | null>(null);
+  const active = inactiveSequence !== event.sequence;
 
   useEffect(() => {
-    const timeout = window.setTimeout(() => setActive(false), CURSOR_ACTIVE_MS);
+    const timeout = window.setTimeout(() => setInactiveSequence(event.sequence), CURSOR_ACTIVE_MS);
     return () => window.clearTimeout(timeout);
-  }, []);
+  }, [event.sequence]);
 
   return (
     <div
diff --git a/apps/web/src/components/preview/PreviewView.test.tsx b/apps/web/src/components/preview/PreviewView.test.tsx
index e5b40c907b14..a2aa8c9a5bdd 100644
--- a/apps/web/src/components/preview/PreviewView.test.tsx
+++ b/apps/web/src/components/preview/PreviewView.test.tsx
@@ -7,7 +7,7 @@ import {
   FILL_PREVIEW_VIEWPORT,
   ThreadId,
 } from "@t3tools/contracts";
-import { act, Profiler } from "react";
+import { act, createElement, Profiler } from "react";
 import { renderToStaticMarkup } from "react-dom/server";
 import { beforeEach, describe, expect, it, vi } from "vite-plus/test";
 
@@ -33,6 +33,9 @@ const mocks = vi.hoisted(() => ({
   pictureInPicture: false,
   showEmptyState: false,
   loading: false,
+  serverEpoch: null as string | null,
+  recordingTabIds: new Set<string>(),
+  recordingRuntimeTabId: null as string | null,
   recordVisitForThread: vi.fn(),
 }));
 
@@ -98,6 +101,7 @@ vi.mock("~/previewStateStore", () => ({
   updatePreviewServerSnapshot: vi.fn(),
   useThreadPreviewState: () => ({
     activeTabId: "tab-1",
+    serverEpoch: mocks.serverEpoch,
     desktopByTabId: {
       "tab-1": {
         hasWebContents: true,
@@ -146,11 +150,11 @@ vi.mock("~/state/use-atom-command", () => ({
 }));
 
 vi.mock("~/browser/browserRecording", () => ({
-  findActiveBrowserRecordingRuntimeTabId: vi.fn(() => null),
+  findActiveBrowserRecordingRuntimeTabId: () => mocks.recordingRuntimeTabId,
   isBrowserRecordingStartCancelledError: vi.fn(() => false),
   startBrowserRecording: vi.fn(),
   stopBrowserRecording: vi.fn(),
-  useActiveBrowserRecordingTabIds: () => new Set(),
+  useActiveBrowserRecordingTabIds: () => mocks.recordingTabIds,
 }));
 
 vi.mock("~/browser/browserSurfaceStore", () => ({
@@ -244,7 +248,9 @@ vi.mock("./PreviewMoreMenu", () => ({
 }));
 vi.mock("./PreviewUnreachable", () => ({ PreviewUnreachable: () => null }));
 vi.mock("./ZoomIndicator", () => ({ ZoomIndicator: () => null }));
-vi.mock("./AgentBrowserCursor", () => ({ AgentBrowserCursor: () => null }));
+vi.mock("./AgentBrowserCursor", () => ({
+  AgentBrowserCursor: () => createElement("agent-cursor"),
+}));
 vi.mock("~/browser/BrowserSurfaceSlot", () => ({ BrowserSurfaceSlot: () => null }));
 vi.mock("./usePreviewSession", () => ({ usePreviewSession: vi.fn() }));
 
@@ -344,9 +350,38 @@ describe("PreviewView navigation", () => {
     mocks.pictureInPicture = false;
     mocks.showEmptyState = false;
     mocks.loading = false;
+    mocks.serverEpoch = null;
+    mocks.recordingTabIds = new Set();
+    mocks.recordingRuntimeTabId = null;
     mocks.recordVisitForThread.mockClear();
   });
 
+  it("shows the cursor in a replacement browser while the old instance still records", async () => {
+    const document = installTestDom();
+    const { createRoot } = await import("react-dom/client");
+    const container = document.createElement("div");
+    const root = createRoot(container as unknown as Element);
+    const hasCursor = (node: TestNode): boolean =>
+      node.nodeName === "AGENT-CURSOR" || node.childNodes.some(hasCursor);
+    mocks.recordingTabIds.add(TEST_RUNTIME_TAB_ID);
+    mocks.recordingRuntimeTabId = TEST_RUNTIME_TAB_ID;
+    try {
+      await act(() => {
+        root.render(<PreviewView threadRef={TEST_THREAD_REF} tabId="tab-1" visible />);
+      });
+      expect(hasCursor(container)).toBe(false);
+      mocks.serverEpoch = "replacement-server";
+      await act(() => {
+        root.render(<PreviewView threadRef={TEST_THREAD_REF} tabId="tab-1" visible />);
+      });
+      expect(hasCursor(container)).toBe(true);
+      expect(mocks.recordingTabIds.has(TEST_RUNTIME_TAB_ID)).toBe(true);
+    } finally {
+      await act(() => root.unmount());
+      vi.unstubAllGlobals();
+    }
+  });
+
   it("does not rerender while loading time passes", async () => {
     vi.useFakeTimers();
     mocks.loading = true;
diff --git a/apps/web/src/components/preview/PreviewView.tsx b/apps/web/src/components/preview/PreviewView.tsx
index d190a78d4825..810e6d502804 100644
--- a/apps/web/src/components/preview/PreviewView.tsx
+++ b/apps/web/src/components/preview/PreviewView.tsx
@@ -798,18 +798,17 @@ export function PreviewView({
         {snapshot && desktopOverlay ? (
           <ZoomIndicator zoomFactor={desktopOverlay.zoomFactor} />
         ) : null}
-        {runtimeTabId && desktopOverlay && !showEmptyState && !isUnreachable ? (
+        {runtimeTabId &&
+        desktopOverlay &&
+        !showEmptyState &&
+        !isUnreachable &&
+        !activeRecordingTabIds.has(runtimeTabId) ? (
           <AgentBrowserCursor
             tabId={runtimeTabId}
             zoomFactor={desktopOverlay.zoomFactor}
             controller={controller}
           />
         ) : null}
-        {controller !== "none" ? (
-          <div className="pointer-events-none absolute left-3 top-3 z-40 rounded-full border border-border/70 bg-background/90 px-2.5 py-1 text-[11px] font-medium shadow-sm backdrop-blur">
-            {controller === "agent" ? "Agent controlling browser" : "Human control"}
-          </div>
-        ) : null}
         {navStatus._tag === "LoadFailed" ? (
           <div className="absolute inset-0 z-10 bg-background">
             <PreviewUnreachable
diff --git a/apps/web/src/components/pullRequest/PullRequestChecksPopover.tsx b/apps/web/src/components/pullRequest/PullRequestChecksPopover.tsx
index 20100339ecbb..e9797016aad7 100644
--- a/apps/web/src/components/pullRequest/PullRequestChecksPopover.tsx
+++ b/apps/web/src/components/pullRequest/PullRequestChecksPopover.tsx
@@ -109,6 +109,7 @@ function ChecksBody({
 export function PullRequestChecksPopover({
   checksState,
   checks,
+  stale = false,
   environmentId,
   reference,
   threadRef = null,
@@ -117,6 +118,7 @@ export function PullRequestChecksPopover({
   checksState: PullRequestChecksState;
   /** The checks already in hand, for the detail header. Absent on a listing row. */
   checks?: ReadonlyArray<PullRequestCheck>;
+  stale?: boolean;
   environmentId?: EnvironmentId;
   reference?: PullRequestRef;
   /** Thread the popover sits beside; a listing row has none. */
@@ -125,7 +127,7 @@ export function PullRequestChecksPopover({
 }) {
   const presentation = pullRequestChecksStatePresentation(checksState);
   // Counts beat the rollup's own wording where they are known, the way GitHub's own header reads.
-  const summary = checks === undefined ? null : summarizePullRequestChecks(checks);
+  const summary = checks === undefined || stale ? null : summarizePullRequestChecks(checks);
   return (
     <Popover>
       {/* A listing row is itself a button, so the trigger renders as a span: a nested button is
@@ -148,7 +150,11 @@ export function PullRequestChecksPopover({
       <PopoverPopup align="start" className="w-80 max-w-full" side="bottom">
         <p className="mb-2 font-medium text-sm">{presentation.label}</p>
         {summary === null ? null : <p className="mb-2 text-muted-foreground text-xs">{summary}</p>}
-        {checks !== undefined ? (
+        {stale ? (
+          <p className="text-muted-foreground text-xs">
+            Check details are out of date. Refresh the pull request to update them.
+          </p>
+        ) : checks !== undefined ? (
           <ChecksBody checks={checks} threadRef={threadRef} />
         ) : environmentId !== undefined && reference !== undefined ? (
           <LazyChecksBody
diff --git a/apps/web/src/components/pullRequest/PullRequestCopyableCode.tsx b/apps/web/src/components/pullRequest/PullRequestCopyableCode.tsx
new file mode 100644
index 000000000000..4c9d14b53734
--- /dev/null
+++ b/apps/web/src/components/pullRequest/PullRequestCopyableCode.tsx
@@ -0,0 +1,66 @@
+import { useCopyToClipboard } from "~/hooks/useCopyToClipboard";
+import { cn } from "~/lib/utils";
+
+import { Tooltip, TooltipPopup, TooltipTrigger } from "../ui/tooltip";
+
+export function PullRequestCopyableCode({
+  value,
+  target,
+  copyLabel,
+  copiedLabel,
+  className,
+  tooltipSide = "top",
+  onError,
+}: {
+  readonly value: string;
+  readonly target: string;
+  readonly copyLabel: string;
+  readonly copiedLabel: string;
+  readonly className?: string;
+  readonly tooltipSide?: "top" | "bottom";
+  readonly onError?: (error: Error) => void;
+}) {
+  const { copyToClipboard, isCopied } = useCopyToClipboard({
+    target,
+    timeout: 1600,
+    ...(onError ? { onError } : {}),
+  });
+  return (
+    <Tooltip>
+      <TooltipTrigger
+        render={
+          <button
+            type="button"
+            className={cn(
+              "relative grid w-fit min-w-0 max-w-full shrink cursor-pointer rounded px-1 py-0.5 text-left outline-none transition-colors pointer-coarse:after:absolute pointer-coarse:after:size-full pointer-coarse:after:min-h-11 pointer-coarse:after:min-w-11 hover:bg-accent/45 hover:text-foreground focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-1 focus-visible:ring-offset-background",
+              className,
+            )}
+            aria-label={isCopied ? copiedLabel : copyLabel}
+            onClick={() => copyToClipboard(value)}
+          />
+        }
+      >
+        <code
+          className={cn(
+            "col-start-1 row-start-1 min-w-0 truncate transition-opacity duration-150 motion-reduce:transition-none",
+            isCopied ? "opacity-0" : "opacity-100",
+          )}
+        >
+          {value}
+        </code>
+        <span
+          aria-hidden="true"
+          className={cn(
+            "col-start-1 row-start-1 truncate text-center transition-opacity duration-150 motion-reduce:transition-none",
+            isCopied ? "opacity-100" : "opacity-0",
+          )}
+        >
+          Copied
+        </span>
+      </TooltipTrigger>
+      <TooltipPopup className="max-w-96 wrap-anywhere font-mono" side={tooltipSide}>
+        {`${isCopied ? "Copied" : copyLabel}: ${value}`}
+      </TooltipPopup>
+    </Tooltip>
+  );
+}
diff --git a/apps/web/src/components/pullRequest/PullRequestDetailPanel.test.tsx b/apps/web/src/components/pullRequest/PullRequestDetailPanel.test.tsx
index 18320ae33566..884bef0bf0b8 100644
--- a/apps/web/src/components/pullRequest/PullRequestDetailPanel.test.tsx
+++ b/apps/web/src/components/pullRequest/PullRequestDetailPanel.test.tsx
@@ -41,7 +41,8 @@ vi.mock("~/lib/sourceControlActions", () => ({
   usePreparePullRequestThreadAction: () => ({ run: prepareThread }),
 }));
 vi.mock("~/state/use-atom-command", () => ({ useAtomCommand: () => vi.fn() }));
-vi.mock("~/state/pullRequests", () => ({
+vi.mock("~/state/pullRequests", async (importOriginal) => ({
+  ...(await importOriginal<typeof import("~/state/pullRequests")>()),
   pullRequestEnvironment: { detail: () => "detail", activity: () => "activity" },
   usePullRequestTurnRefresh: () => 0,
   useSharedPullRequestSummary: () => null,
diff --git a/apps/web/src/components/pullRequest/PullRequestDetailPanel.tsx b/apps/web/src/components/pullRequest/PullRequestDetailPanel.tsx
index 31d81315c2e1..44b70f2e18ff 100644
--- a/apps/web/src/components/pullRequest/PullRequestDetailPanel.tsx
+++ b/apps/web/src/components/pullRequest/PullRequestDetailPanel.tsx
@@ -50,6 +50,7 @@ import {
   useMemo,
   useRef,
   useState,
+  type ReactNode,
 } from "react";
 
 import { type DraftId, useComposerDraftStore } from "~/composerDraftStore";
@@ -78,8 +79,13 @@ import { useProjects, useServerConfigs } from "~/state/entities";
 import { useEnvironments, usePrimaryEnvironmentId } from "~/state/environments";
 import { useEnvironmentQuery } from "~/state/query";
 import { useLiveRefresh } from "~/hooks/useLiveRefresh";
-import { pullRequestEnvironment } from "~/state/pullRequests";
-import { usePullRequestTurnRefresh, useSharedPullRequestSummary } from "~/state/pullRequests";
+import {
+  pullRequestEnvironment,
+  pullRequestListEntryToSummary,
+  newestPullRequestSummary,
+  usePullRequestTurnRefresh,
+  useSharedPullRequestSummary,
+} from "~/state/pullRequests";
 import { useAtomCommand } from "~/state/use-atom-command";
 import { PullRequestStackMenu } from "./PullRequestStackMenu";
 import { PullRequestThreadLinks } from "./PullRequestThreadLinks";
@@ -116,6 +122,7 @@ import { Popover, PopoverPopup, PopoverTrigger } from "../ui/popover";
 import { toastManager } from "../ui/toast";
 import { Tooltip, TooltipPopup, TooltipProvider, TooltipTrigger } from "../ui/tooltip";
 import { PullRequestDetailGhost, PullRequestTimelineGhost } from "./PullRequestGhosts";
+import { PullRequestCopyableCode } from "./PullRequestCopyableCode";
 import { PullRequestActivityUnavailableState } from "./PullRequestActivityUnavailableState";
 import { DiffPanelLoadingState } from "../DiffPanelShell";
 import { PullRequestsUnavailableState } from "./PullRequestsUnavailableState";
@@ -135,6 +142,7 @@ import {
   handoffPrompt,
   handoffReviewComments,
   latestPullRequestReviewOutcomes,
+  loadingPullRequestCheckoutCommand,
   isStackedPullRequestBase,
   pullRequestActionMenuHasGroup,
   pullRequestActionNeedsHostRefresh,
@@ -167,6 +175,7 @@ import {
   PullRequestMetaLine,
   PullRequestReviewOutcomeIcon,
   pullRequestChecksState,
+  pullRequestChecksStatePresentation,
   pullRequestReviewOutcomeToneClassName,
   resolvePullRequestState,
   summarizePullRequestChecks,
@@ -320,68 +329,6 @@ const openNumberContextMenu = (
   });
 };
 
-function PullRequestCopyableCode({
-  value,
-  target,
-  copyLabel,
-  copiedLabel,
-  className,
-  tooltipSide = "top",
-  onError,
-}: {
-  readonly value: string;
-  readonly target: string;
-  readonly copyLabel: string;
-  readonly copiedLabel: string;
-  readonly className?: string;
-  readonly tooltipSide?: "top" | "bottom";
-  readonly onError?: (error: Error) => void;
-}) {
-  const { copyToClipboard, isCopied } = useCopyToClipboard({
-    target,
-    timeout: 1600,
-    ...(onError ? { onError } : {}),
-  });
-  return (
-    <Tooltip>
-      <TooltipTrigger
-        render={
-          <button
-            type="button"
-            className={cn(
-              "relative grid w-fit min-w-0 max-w-full shrink cursor-pointer rounded px-1 py-0.5 text-left outline-none transition-colors pointer-coarse:after:absolute pointer-coarse:after:size-full pointer-coarse:after:min-h-11 pointer-coarse:after:min-w-11 hover:bg-accent/45 hover:text-foreground focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-1 focus-visible:ring-offset-background",
-              className,
-            )}
-            aria-label={isCopied ? copiedLabel : copyLabel}
-            onClick={() => copyToClipboard(value)}
-          />
-        }
-      >
-        <code
-          className={cn(
-            "col-start-1 row-start-1 min-w-0 truncate transition-opacity duration-150 motion-reduce:transition-none",
-            isCopied ? "opacity-0" : "opacity-100",
-          )}
-        >
-          {value}
-        </code>
-        <span
-          aria-hidden="true"
-          className={cn(
-            "col-start-1 row-start-1 truncate text-center transition-opacity duration-150 motion-reduce:transition-none",
-            isCopied ? "opacity-100" : "opacity-0",
-          )}
-        >
-          Copied
-        </span>
-      </TooltipTrigger>
-      <TooltipPopup className="max-w-96 wrap-anywhere font-mono" side={tooltipSide}>
-        {`${isCopied ? "Copied" : copyLabel}: ${value}`}
-      </TooltipPopup>
-    </Tooltip>
-  );
-}
-
 /**
  * The stale-branch warning, said beside the branch it is about rather than as a bar of its own.
  * The banner this replaces held a row of chrome open across the top of every pull request that
@@ -398,6 +345,8 @@ function PullRequestBaseFreshnessWarning({
   pending,
   onUpdate,
   iconClassName,
+  className,
+  children,
 }: {
   readonly baseBranch: string;
   readonly freshness: {
@@ -407,6 +356,9 @@ function PullRequestBaseFreshnessWarning({
   readonly pending: boolean;
   readonly onUpdate: (method: PullRequestUpdateMethod) => void;
   readonly iconClassName?: string;
+  readonly className?: string;
+  /** What the warning is about, drawn in the same amber before the mark: the base branch. */
+  readonly children?: ReactNode;
 }) {
   const behind =
     freshness.behindBy === null
@@ -425,11 +377,15 @@ function PullRequestBaseFreshnessWarning({
           <button
             type="button"
             aria-label={summary}
-            className="inline-flex shrink-0 cursor-help items-center rounded-sm text-amber-600 outline-none focus-visible:ring-2 focus-visible:ring-ring"
+            className={cn(
+              "inline-flex min-w-0 shrink-0 cursor-help items-center gap-1 rounded-sm text-amber-600 outline-none focus-visible:ring-2 focus-visible:ring-ring dark:text-amber-400/90",
+              className,
+            )}
           />
         }
       >
-        <TriangleAlertIcon aria-hidden className={cn("size-3.5", iconClassName)} />
+        {children}
+        <TriangleAlertIcon aria-hidden className={cn("size-3.5 shrink-0", iconClassName)} />
       </PopoverTrigger>
       <PopoverPopup
         align="start"
@@ -521,10 +477,11 @@ export function PullRequestDetailPanel({
 }) {
   const environmentConfigs = useServerConfigs();
   const projects = useProjects();
-  const repositoryIdentity = projects.find(
+  const project = projects.find(
     (project) =>
       project.id === requestedReference.projectId && project.environmentId === environmentId,
-  )?.repositoryIdentity;
+  );
+  const repositoryIdentity = project?.repositoryIdentity;
   const supportsThreadPullRequests =
     environmentConfigs.get(environmentId)?.environment.capabilities.threadPullRequests === true;
   const reference = useMemo(
@@ -542,6 +499,8 @@ export function PullRequestDetailPanel({
   const matchingListEntry =
     listEntry?.projectId === reference.projectId &&
     listEntry.repository.toLowerCase() === reference.repository.toLowerCase() &&
+    (reference.host === undefined ||
+      listEntry.host.toLowerCase() === reference.host.toLowerCase()) &&
     listEntry.number === reference.number
       ? listEntry
       : null;
@@ -675,14 +634,47 @@ export function PullRequestDetailPanel({
     cached: cachedDetail,
     reference,
   });
-  const sharedSummary = useSharedPullRequestSummary(environmentId, reference, resolvedCoreDetail);
+  const listSummary = useMemo(
+    () => (matchingListEntry === null ? null : pullRequestListEntryToSummary(matchingListEntry)),
+    [matchingListEntry],
+  );
+  const detailSummary = useMemo(
+    () =>
+      detailQuery.data === null
+        ? null
+        : {
+            ...detailQuery.data,
+            checksState: pullRequestChecksState(detailQuery.data.checks),
+          },
+    [detailQuery.data],
+  );
+  const observedSummary = useSharedPullRequestSummary(
+    environmentId,
+    reference,
+    detailSummary,
+    detailQuery.dataUpdatedAt,
+  );
+  // The list row is also published to the shared cache, but only after this commit's layout
+  // effects run, so it is compared directly rather than trusted to be there already.
+  const sharedSummary = useMemo(
+    () =>
+      newestPullRequestSummary(
+        resolvedCoreDetail,
+        newestPullRequestSummary(observedSummary, listSummary),
+      ),
+    [resolvedCoreDetail, observedSummary, listSummary],
+  );
   const coreDetail = useMemo(
     () =>
       resolvedCoreDetail === null || sharedSummary === null || sharedSummary === resolvedCoreDetail
         ? resolvedCoreDetail
         : {
             ...resolvedCoreDetail,
-            ...sharedSummary,
+            title: sharedSummary.title,
+            state: sharedSummary.state,
+            headBranch: sharedSummary.headBranch,
+            baseBranch: sharedSummary.baseBranch,
+            updatedAt: sharedSummary.updatedAt,
             author: sharedSummary.author ?? resolvedCoreDetail.author,
             additions: sharedSummary.additions ?? resolvedCoreDetail.additions,
             deletions: sharedSummary.deletions ?? resolvedCoreDetail.deletions,
@@ -720,6 +712,7 @@ export function PullRequestDetailPanel({
           },
     [activity, coreDetail],
   );
+  const handoffSummary = detail ?? sharedSummary;
   const keybindings = useAtomValue(primaryServerKeybindingsAtom);
   const { copyToClipboard: copyReference } = useCopyToClipboard<string>({
     target: "pull request reference",
@@ -761,15 +754,22 @@ export function PullRequestDetailPanel({
     repositoryUrl !== null
       ? new URL(`/${encodeURIComponent(detail.author.login)}`, repositoryUrl).toString()
       : null;
-  const checkoutCommand = detail
+  const checkoutCommand = handoffSummary
     ? pullRequestCheckoutCommand(
-        detail.provider,
-        detail.number,
-        detail.headBranch,
-        detail.headRepositoryNameWithOwner,
-        repositoryUrl,
+        handoffSummary.provider,
+        handoffSummary.number,
+        handoffSummary.headBranch,
+        detail?.headRepositoryNameWithOwner,
+        changeRequestRepositoryUrl(handoffSummary.url),
       )
-    : null;
+    : loadingPullRequestCheckoutCommand(reference, repositoryIdentity);
+  const onCheckoutCommandError = useCallback((error: Error) => {
+    toastManager.add({
+      type: "error",
+      title: "Could not copy checkout command",
+      description: error.message,
+    });
+  }, []);
   const branchRefsQuery = useEnvironmentQuery(
     detail === null
       ? null
@@ -945,9 +945,11 @@ export function PullRequestDetailPanel({
   const acting =
     pickableEnvironments.find((entry) => entry.environmentId === chosenEnvironmentId) ?? null;
   const actingEnvironmentId = acting?.environmentId ?? environmentId;
+  const checkoutRoot =
+    acting?.workspaceRoot ?? detail?.workspaceRoot ?? project?.workspaceRoot ?? null;
   const prepareThread = usePreparePullRequestThreadAction({
     environmentId: actingEnvironmentId,
-    cwd: acting?.workspaceRoot ?? detail?.workspaceRoot ?? null,
+    cwd: checkoutRoot,
   });
 
   const finishAction = async (
@@ -1178,7 +1180,7 @@ export function PullRequestDetailPanel({
     // already work — and it moves the branch under everything else that is open there.
     mode: "worktree" | "local" = "worktree",
   ) => {
-    if (!detail || handoff !== null) return;
+    if (!handoffSummary || handoff !== null) return;
     if (attachTarget !== null && task !== null) {
       writeTaskToComposer(attachTarget, task);
       toastManager.add({
@@ -1188,6 +1190,7 @@ export function PullRequestDetailPanel({
       });
       return;
     }
+    if (checkoutRoot === null) return;
     setHandoff(kind);
     // The menu closes on the press and takes its "Preparing..." label with it, so this is the
     // only thing answering for the checkout. It carries no timeout of its own: a loading toast
@@ -1198,7 +1201,10 @@ export function PullRequestDetailPanel({
     });
     // Wherever the reader chose to act: the thread, the checkout it is pointed at and the composer
     // the task lands in are all one server's, and picking another one moves all three.
-    const projectRef = scopeProjectRef(actingEnvironmentId, acting?.projectId ?? detail.projectId);
+    const projectRef = scopeProjectRef(
+      actingEnvironmentId,
+      acting?.projectId ?? handoffSummary.projectId,
+    );
     // The thread is opened before the checkout rather than after it, because the project's setup
     // script only runs for a checkout that knows which thread it is for — and a worktree with no
     // dependencies installed is not something anyone can test.
@@ -1219,7 +1225,7 @@ export function PullRequestDetailPanel({
       return;
     }
     const prepared = await prepareThread.run({
-      reference: detail.url,
+      reference: handoffSummary.url,
       mode,
       threadId: opened.threadId,
     });
@@ -1348,7 +1354,7 @@ export function PullRequestDetailPanel({
   };
 
   const startCheckout = (mode: "worktree" | "local") => {
-    if (!detail) return;
+    if (!handoffSummary) return;
     void startHandoff(`checkout:${mode}`, null, mode);
   };
 
@@ -1380,20 +1386,20 @@ export function PullRequestDetailPanel({
         baseBranch: detail.baseBranch,
         reviewThreads: detail.reviewThreads,
         comments: detail.comments,
-        checks: detail.checks,
+        checks: checksStale ? [] : detail.checks,
         commentsTruncated: detail.commentsTruncated,
       }),
     );
   };
 
   const startResolveConflicts = () => {
-    if (!detail) return;
+    if (!handoffSummary) return;
     void startHandoff("conflicts", {
       prompt: buildResolveConflictsPrompt({
-        number: detail.number,
-        url: detail.url,
-        headBranch: detail.headBranch,
-        baseBranch: detail.baseBranch,
+        number: handoffSummary.number,
+        url: handoffSummary.url,
+        headBranch: handoffSummary.headBranch,
+        baseBranch: handoffSummary.baseBranch,
       }),
     });
   };
@@ -1426,8 +1432,9 @@ export function PullRequestDetailPanel({
   // Out of date with the base, and still cleanly mergeable — the one pairing an update button
   // exists for. Null everywhere else, including hosts that cannot compare at all.
   const freshness = detail === null ? null : resolveBaseFreshness(detail);
-  // A host that cannot produce a patch has no Code tab to open. The tabs themselves stay hidden
-  // until the detail arrives, so the loading ghost is the panel's only unfinished UI.
+  // A host that cannot produce a patch has no Code tab to open. While detail is loading the ghost
+  // uses this optimistic tab set to reserve the same chrome; a host without a patch removes Code
+  // when its capabilities arrive.
   const visibleTabs = TABS.filter(
     (item) => item.value !== "code" || detail === null || detail.capabilities.diff,
   );
@@ -1443,7 +1450,17 @@ export function PullRequestDetailPanel({
   const can = (action: PullRequestAction) =>
     detail?.capabilities.actions.includes(action) === true &&
     detail.viewerPermissions.actions.includes(action);
-  const checksState = detail ? pullRequestChecksState(detail.checks) : null;
+  const detailChecksState = detail ? pullRequestChecksState(detail.checks) : null;
+  const latestChecksState =
+    sharedSummary?.checksState === undefined ? detailChecksState : sharedSummary.checksState;
+  // List rollups can omit workflows awaiting approval. Only refreshed detail can clear those.
+  const checksState =
+    latestChecksState !== "failing" &&
+    detail?.checks.some((check) => check.status === "action-required")
+      ? "pending"
+      : latestChecksState;
+  // A newer rollup cannot tell us which runs changed or how many passed.
+  const checksStale = checksState !== detailChecksState;
   // The merge state remains in one stable slot from waiting through completion. Conflicts take
   // the slot while they need a person; the armed badge remains beside them so that state is not lost.
   const primaryAction = detail
@@ -1494,7 +1511,13 @@ export function PullRequestDetailPanel({
   const statePresentation = detail
     ? resolvePullRequestState({ state: detail.state, isDraft: detail.isDraft })
     : null;
-  const checksSummary = detail ? summarizePullRequestChecks(detail.checks) : null;
+  const checksSummary = checksStale
+    ? checksState === null
+      ? "No checks reported"
+      : pullRequestChecksStatePresentation(checksState).label
+    : detail
+      ? summarizePullRequestChecks(detail.checks)
+      : null;
   // Approvals that still stand, and only those. A superseded one is dimmed beside the reviewer
   // who gave it, so counting it here would have the header assert in a number what the row next
   // to it has just qualified.
@@ -1509,10 +1532,115 @@ export function PullRequestDetailPanel({
         ).length
       : 0;
 
+  const checkoutControl =
+    context === "page" ? (
+      <Menu>
+        <Tooltip>
+          <TooltipTrigger
+            render={
+              <MenuTrigger
+                disabled={handoff !== null || checkoutRoot === null}
+                render={
+                  <Button
+                    size="xs"
+                    variant="outline"
+                    aria-label={handoff?.startsWith("checkout") ? "Checking out..." : "Check out"}
+                  >
+                    <GitBranchIcon aria-hidden className="size-3.5" />
+                    <span className="@max-[35rem]/pr-header:hidden">
+                      {handoff?.startsWith("checkout") ? "Checking out..." : "Check out"}
+                    </span>
+                    <ChevronDownIcon aria-hidden className="size-3.5 text-muted-foreground" />
+                  </Button>
+                }
+              />
+            }
+          />
+          <TooltipPopup>Check out this pull request</TooltipPopup>
+        </Tooltip>
+        <MenuPopup align="end" side="bottom" className="min-w-72">
+          <MenuItem onClick={() => startCheckout("worktree")}>
+            <GitBranchIcon className="mt-1 size-3.5 shrink-0 self-start" />
+            <span className="flex min-w-0 flex-col">
+              <span>In a separate worktree</span>
+              <span className="text-xs text-muted-foreground">
+                Its own folder and thread. Nothing you have open moves.
+              </span>
+            </span>
+          </MenuItem>
+          <MenuItem onClick={() => startCheckout("local")}>
+            <FolderGit2Icon className="mt-1 size-3.5 shrink-0 self-start" />
+            <span className="flex min-w-0 flex-col">
+              <span>In this repository</span>
+              <span className="text-xs text-muted-foreground">
+                Switches the branch you are working in, like `gh pr checkout`.
+              </span>
+            </span>
+          </MenuItem>
+          {pickableEnvironments.length > 0 ? (
+            <ActOnEnvironmentPicker
+              environments={pickableEnvironments}
+              value={actingEnvironmentId}
+              onChange={(next) => setActingScope({ pullRequestKey, environmentId: next })}
+              disabled={handoff !== null}
+            />
+          ) : null}
+        </MenuPopup>
+      </Menu>
+    ) : null;
+
+  const resolveConflictsControl = (
+    <Tooltip>
+      <TooltipTrigger
+        render={
+          <span className="inline-flex shrink-0">
+            <Button
+              size="xs"
+              variant="destructive-outline"
+              disabled={handoff !== null || (attachTarget === null && checkoutRoot === null)}
+              onClick={startResolveConflicts}
+              aria-label={handoff === "conflicts" ? "Preparing..." : "Resolve conflicts"}
+            >
+              <PullRequestGlyph.conflicting aria-hidden className="size-3.5" />
+              <span className="@max-[30rem]/pr-header:hidden">
+                {handoff === "conflicts" ? "Preparing..." : "Resolve conflicts"}
+              </span>
+            </Button>
+          </span>
+        }
+      />
+      <TooltipPopup side="top">
+        {handoff === "conflicts" ? "Preparing..." : "Resolve conflicts"}
+      </TooltipPopup>
+    </Tooltip>
+  );
+
   // The list already has the pull request's identity and summary. Keep them on screen
   // and let the richer detail read replace the remaining placeholders in place.
   if (detailQuery.isPending && !detail) {
-    return <PullRequestDetailGhost seed={matchingListEntry} />;
+    return (
+      <PullRequestDetailGhost
+        seed={matchingListEntry}
+        summary={sharedSummary}
+        checkoutCommand={checkoutCommand}
+        onCheckoutError={onCheckoutCommandError}
+        number={reference.number}
+        tabs={visibleTabs}
+        activeTab={tab}
+        {...(onBack ? { onBack } : {})}
+        {...(onClose ? { onClose } : {})}
+        actions={
+          handoffSummary ? (
+            <TooltipProvider delay={150} closeDelay={150} timeout={400}>
+              {checkoutControl}
+              {handoffSummary.state === "open" && handoffSummary.mergeability === "conflicting"
+                ? resolveConflictsControl
+                : null}
+            </TooltipProvider>
+          ) : undefined
+        }
+      />
+    );
   }
 
   return (
@@ -1720,71 +1848,7 @@ export function PullRequestDetailPanel({
                   threadRef={null}
                 />
               ) : null}
-              {/* Checking a pull request out is the reason to open one here at all, so it is a
-                  button of its own rather than a side effect of asking an agent for something.
-                  It asks where, because the two answers are not interchangeable: one leaves your
-                  work where it is, the other moves the repository you are standing in. Only on
-                  the page: beside a thread the branch is already checked out right there. */}
-              {context === "page" ? (
-                <Menu>
-                  <Tooltip>
-                    <TooltipTrigger
-                      render={
-                        <MenuTrigger
-                          disabled={handoff !== null}
-                          render={
-                            <Button
-                              size="xs"
-                              variant="outline"
-                              aria-label={
-                                handoff?.startsWith("checkout") ? "Checking out..." : "Check out"
-                              }
-                            >
-                              <GitBranchIcon aria-hidden className="size-3.5" />
-                              <span className="@max-[35rem]/pr-header:hidden">
-                                {handoff?.startsWith("checkout") ? "Checking out..." : "Check out"}
-                              </span>
-                              <ChevronDownIcon
-                                aria-hidden
-                                className="size-3.5 text-muted-foreground"
-                              />
-                            </Button>
-                          }
-                        />
-                      }
-                    />
-                    <TooltipPopup>Check out this pull request</TooltipPopup>
-                  </Tooltip>
-                  <MenuPopup align="end" side="bottom" className="min-w-72">
-                    <MenuItem onClick={() => startCheckout("worktree")}>
-                      <GitBranchIcon className="mt-1 size-3.5 shrink-0 self-start" />
-                      <span className="flex min-w-0 flex-col">
-                        <span>In a separate worktree</span>
-                        <span className="text-xs text-muted-foreground">
-                          Its own folder and thread. Nothing you have open moves.
-                        </span>
-                      </span>
-                    </MenuItem>
-                    <MenuItem onClick={() => startCheckout("local")}>
-                      <FolderGit2Icon className="mt-1 size-3.5 shrink-0 self-start" />
-                      <span className="flex min-w-0 flex-col">
-                        <span>In this repository</span>
-                        <span className="text-xs text-muted-foreground">
-                          Switches the branch you are working in, like `gh pr checkout`.
-                        </span>
-                      </span>
-                    </MenuItem>
-                    {pickableEnvironments.length > 0 ? (
-                      <ActOnEnvironmentPicker
-                        environments={pickableEnvironments}
-                        value={actingEnvironmentId}
-                        onChange={(next) => setActingScope({ pullRequestKey, environmentId: next })}
-                        disabled={handoff !== null}
-                      />
-                    ) : null}
-                  </MenuPopup>
-                </Menu>
-              ) : null}
+              {checkoutControl}
               {/* Said where the Merge button is, because it is the answer to why nobody has
                   pressed it: the merge is already asked for, and the host is holding it. */}
               {autoMergeArmed && primaryAction !== "auto-merge-armed" ? (
@@ -1809,31 +1873,7 @@ export function PullRequestDetailPanel({
                 </Tooltip>
               ) : null}
               {primaryAction === "resolve" ? (
-                <Tooltip>
-                  <TooltipTrigger
-                    render={
-                      <span className="inline-flex shrink-0">
-                        <Button
-                          size="xs"
-                          variant="destructive-outline"
-                          disabled={handoff !== null}
-                          onClick={startResolveConflicts}
-                          aria-label={
-                            handoff === "conflicts" ? "Preparing..." : "Resolve conflicts"
-                          }
-                        >
-                          <PullRequestGlyph.conflicting aria-hidden className="size-3.5" />
-                          <span className="@max-[30rem]/pr-header:hidden">
-                            {handoff === "conflicts" ? "Preparing..." : "Resolve conflicts"}
-                          </span>
-                        </Button>
-                      </span>
-                    }
-                  />
-                  <TooltipPopup side="top">
-                    {handoff === "conflicts" ? "Preparing..." : "Resolve conflicts"}
-                  </TooltipPopup>
-                </Tooltip>
+                resolveConflictsControl
               ) : primaryAction === "ready" ? (
                 <Tooltip>
                   <TooltipTrigger
@@ -2209,26 +2249,9 @@ export function PullRequestDetailPanel({
                   </span>
                   <span aria-hidden className="h-3 w-px shrink-0 bg-border/70" />
                   <span className="flex min-w-0 flex-1 items-center gap-1.5 font-mono text-[11px] text-muted-foreground/65">
-                    <Tooltip>
-                      <TooltipTrigger
-                        render={
-                          <span className="inline-flex min-w-0 max-w-[40%] shrink-0 items-center gap-1">
-                            {isStackedPullRequest ? (
-                              <PullRequestGlyph.stack
-                                aria-label="Stacked pull request"
-                                className="size-3 shrink-0"
-                              />
-                            ) : null}
-                            <code className="min-w-0 truncate">{detail.baseBranch}</code>
-                          </span>
-                        }
-                      />
-                      <TooltipPopup side="top">
-                        {isStackedPullRequest
-                          ? `Stacked on ${detail.baseBranch}`
-                          : detail.baseBranch}
-                      </TooltipPopup>
-                    </Tooltip>
+                    {/* An out-of-date base wears the warning on the branch name itself, so the
+                        name is amber and pointing at either the name or the mark opens the way
+                        out. Up to date, the name keeps its plain tooltip. */}
                     {freshness ? (
                       <PullRequestBaseFreshnessWarning
                         baseBranch={detail.baseBranch}
@@ -2236,8 +2259,38 @@ export function PullRequestDetailPanel({
                         pending={actionPending}
                         onUpdate={(method) => void perform("update-branch", undefined, method)}
                         iconClassName="size-3"
-                      />
-                    ) : null}
+                        className="max-w-[40%]"
+                      >
+                        {isStackedPullRequest ? (
+                          <PullRequestGlyph.stack
+                            aria-label="Stacked pull request"
+                            className="size-3 shrink-0"
+                          />
+                        ) : null}
+                        <code className="min-w-0 truncate">{detail.baseBranch}</code>
+                      </PullRequestBaseFreshnessWarning>
+                    ) : (
+                      <Tooltip>
+                        <TooltipTrigger
+                          render={
+                            <span className="inline-flex min-w-0 max-w-[40%] shrink-0 items-center gap-1">
+                              {isStackedPullRequest ? (
+                                <PullRequestGlyph.stack
+                                  aria-label="Stacked pull request"
+                                  className="size-3 shrink-0"
+                                />
+                              ) : null}
+                              <code className="min-w-0 truncate">{detail.baseBranch}</code>
+                            </span>
+                          }
+                        />
+                        <TooltipPopup side="top">
+                          {isStackedPullRequest
+                            ? `Stacked on ${detail.baseBranch}`
+                            : detail.baseBranch}
+                        </TooltipPopup>
+                      </Tooltip>
+                    )}
                     <ArrowLeftIcon
                       aria-label="receives changes from"
                       className="size-3 shrink-0 opacity-60"
@@ -2296,7 +2349,7 @@ export function PullRequestDetailPanel({
             {detail ? (
               <div className="col-span-2 mt-1 min-w-0 px-4 pb-4">
                 {titleDraft === null ? (
-                  <div className="group flex min-w-0 items-center gap-1">
+                  <div className="group flex min-h-7 min-w-0 items-center gap-1 sm:min-h-6">
                     <Tooltip>
                       <TooltipTrigger
                         render={
@@ -2357,7 +2410,7 @@ export function PullRequestDetailPanel({
                     </div>
                   </div>
                 )}
-                <div className="mt-2 flex min-w-0 items-center gap-2 text-xs text-muted-foreground">
+                <div className="mt-2 flex min-h-5 min-w-0 items-center gap-2 text-xs text-muted-foreground">
                   <PullRequestMetaLine className="min-w-0 whitespace-nowrap">
                     <PullRequestActorLabel
                       actor={detail.author}
@@ -2375,47 +2428,54 @@ export function PullRequestDetailPanel({
                       copiedLabel="Checkout command copied"
                       className="ml-auto font-mono"
                       tooltipSide="bottom"
-                      onError={(error) =>
-                        toastManager.add({
-                          type: "error",
-                          title: "Could not copy checkout command",
-                          description: error.message,
-                        })
-                      }
+                      onError={onCheckoutCommandError}
                     />
                   ) : null}
                 </div>
 
-                <div className="mt-4 flex min-w-0 items-center gap-2 text-xs text-muted-foreground">
+                <div className="mt-4 flex min-h-5 min-w-0 items-center gap-2 text-xs text-muted-foreground">
                   <span className="flex min-w-0 flex-1 items-center gap-1.5 font-mono text-xs text-muted-foreground/70">
-                    <Tooltip>
-                      <TooltipTrigger
-                        render={
-                          <span className="inline-flex min-w-0 max-w-[40%] shrink-0 items-center gap-1">
-                            {isStackedPullRequest ? (
-                              <PullRequestGlyph.stack
-                                aria-label="Stacked pull request"
-                                className="size-3 shrink-0"
-                              />
-                            ) : null}
-                            <code className="min-w-0 truncate">{detail.baseBranch}</code>
-                          </span>
-                        }
-                      />
-                      <TooltipPopup side="top">
-                        {isStackedPullRequest
-                          ? `Stacked on ${detail.baseBranch}`
-                          : detail.baseBranch}
-                      </TooltipPopup>
-                    </Tooltip>
+                    {/* An out-of-date base wears the warning on the branch name itself, so the
+                        name is amber and pointing at either the name or the mark opens the way
+                        out. Up to date, the name keeps its plain tooltip. */}
                     {freshness ? (
                       <PullRequestBaseFreshnessWarning
                         baseBranch={detail.baseBranch}
                         freshness={freshness}
                         pending={actionPending}
                         onUpdate={(method) => void perform("update-branch", undefined, method)}
-                      />
-                    ) : null}
+                        className="max-w-[40%]"
+                      >
+                        {isStackedPullRequest ? (
+                          <PullRequestGlyph.stack
+                            aria-label="Stacked pull request"
+                            className="size-3 shrink-0"
+                          />
+                        ) : null}
+                        <code className="min-w-0 truncate">{detail.baseBranch}</code>
+                      </PullRequestBaseFreshnessWarning>
+                    ) : (
+                      <Tooltip>
+                        <TooltipTrigger
+                          render={
+                            <span className="inline-flex min-w-0 max-w-[40%] shrink-0 items-center gap-1">
+                              {isStackedPullRequest ? (
+                                <PullRequestGlyph.stack
+                                  aria-label="Stacked pull request"
+                                  className="size-3 shrink-0"
+                                />
+                              ) : null}
+                              <code className="min-w-0 truncate">{detail.baseBranch}</code>
+                            </span>
+                          }
+                        />
+                        <TooltipPopup side="top">
+                          {isStackedPullRequest
+                            ? `Stacked on ${detail.baseBranch}`
+                            : detail.baseBranch}
+                        </TooltipPopup>
+                      </Tooltip>
+                    )}
                     <ArrowLeftIcon
                       aria-label="receives changes from"
                       className="size-3.5 shrink-0 opacity-60"
@@ -2429,7 +2489,7 @@ export function PullRequestDetailPanel({
                     />
                   </span>
                   <span className="ml-auto inline-flex shrink-0 items-center justify-end gap-2">
-                    <span className="inline-flex items-center gap-1.5 tabular-nums">
+                    <span className="inline-flex min-w-16 items-center justify-end gap-1.5 tabular-nums">
                       <FileDiffIcon className="size-3.5" />
                       {detail.changedFiles.toLocaleString()}{" "}
                       {detail.changedFiles === 1 ? "file" : "files"}
@@ -2474,7 +2534,7 @@ export function PullRequestDetailPanel({
             </ToggleGroup>
             {tab === "summary" ? (
               <span className="ml-auto inline-flex shrink-0 items-center">
-                {workflowApprovalsRequired > 0 && can("approve-workflows") ? (
+                {workflowApprovalsRequired > 0 && !checksStale && can("approve-workflows") ? (
                   <Tooltip>
                     <TooltipTrigger
                       render={
@@ -2516,6 +2576,7 @@ export function PullRequestDetailPanel({
                     {checksState !== null ? (
                       <PullRequestChecksPopover
                         checks={detail.checks}
+                        stale={checksStale}
                         checksState={checksState}
                         threadRef={threadRef}
                       />
@@ -2649,12 +2710,14 @@ export function PullRequestDetailPanel({
                   reference={reference}
                   detail={detail}
                   activityPending={activityPending}
+                  checksStale={checksStale}
                   activityError={activityError}
                   pendingFinding={handoff}
                   fixFindingLabel={handoffLabels.fixFinding}
                   fixCheckLabel={handoffLabels.fixCheck}
                   onFixFinding={startFixFinding}
                   onRefresh={refreshDetail}
+                  onRefreshChecks={refreshFromHost}
                 />
               </div>
             ) : null}
diff --git a/apps/web/src/components/pullRequest/PullRequestGhosts.tsx b/apps/web/src/components/pullRequest/PullRequestGhosts.tsx
index f8c922356548..40a0af103bc0 100644
--- a/apps/web/src/components/pullRequest/PullRequestGhosts.tsx
+++ b/apps/web/src/components/pullRequest/PullRequestGhosts.tsx
@@ -7,16 +7,32 @@
  * both themes) and the single `animate-skeleton` pulse, applied once on the container so any
  * number of bars costs one opacity animation.
  */
-import type { PullRequestListEntry } from "@t3tools/contracts";
-import { ArrowLeftIcon } from "lucide-react";
+import type { PullRequestListEntry, PullRequestSummary } from "@t3tools/contracts";
+import {
+  ArrowLeftIcon,
+  ChevronRightIcon,
+  EllipsisIcon,
+  ExternalLinkIcon,
+  FileDiffIcon,
+  PanelRightIcon,
+  TagIcon,
+  UserPlusIcon,
+  UsersIcon,
+} from "lucide-react";
+import type { ReactNode } from "react";
 
+import { readLocalApi } from "~/localApi";
 import { cn } from "~/lib/utils";
 import { formatRelativeTimeLabel } from "~/timestampFormat";
 
-import { pullRequestLabelColor } from "./pullRequestList.logic";
+import { Button, InlineButton } from "../ui/button";
+import { Toggle, ToggleGroup } from "../ui/toggle-group";
+import { PullRequestCopyableCode } from "./PullRequestCopyableCode";
 import {
   PullRequestActorLabel,
   PullRequestDiffStat,
+  PullRequestLabelChip,
+  PullRequestMetaLine,
   pullRequestChecksStatePresentation,
   resolvePullRequestState,
 } from "./pullRequestPresentation";
@@ -28,6 +44,11 @@ function GhostBar({ className }: { className?: string | undefined }) {
 /** Widths cycle rather than randomize, so the ghost renders the same on every pass. */
 const TITLE_WIDTHS = ["w-3/5", "w-2/5", "w-1/2", "w-2/3", "w-2/5", "w-3/5", "w-1/2"];
 const META_WIDTHS = ["w-2/5", "w-1/3", "w-2/5", "w-1/4", "w-1/3", "w-2/5", "w-1/3"];
+const DEFAULT_DETAIL_TABS = [
+  { value: "summary", label: "Summary" },
+  { value: "timeline", label: "Timeline" },
+  { value: "code", label: "Code" },
+] as const;
 
 /** Rows in the list's own grid — glyph, title over meta, time over diffstat. */
 export function PullRequestListGhost({
@@ -50,12 +71,12 @@ export function PullRequestListGhost({
       {Array.from({ length: rows }, (_, index) => (
         <div
           key={index}
-          className="grid grid-cols-[auto_minmax(0,1fr)_auto] items-center gap-3 rounded-lg px-3 py-2"
+          className="grid grid-cols-[auto_minmax(0,1fr)_auto] items-center gap-2 rounded-md px-3 py-2.5"
         >
           <GhostBar className="size-4 rounded-full" />
           <div className="min-w-0 space-y-1.5">
-            <GhostBar className={cn("h-3.5", TITLE_WIDTHS[index % TITLE_WIDTHS.length])} />
-            <GhostBar className={META_WIDTHS[index % META_WIDTHS.length]} />
+            <GhostBar className={cn("h-4", TITLE_WIDTHS[index % TITLE_WIDTHS.length])} />
+            <GhostBar className={cn("h-3.5", META_WIDTHS[index % META_WIDTHS.length])} />
           </div>
           <div className="flex flex-col items-end gap-1.5">
             <GhostBar className="w-12" />
@@ -72,16 +93,52 @@ export function PullRequestListGhost({
  * boundaries in the ghost prevents the loaded pull request from replacing one layout with
  * another a moment later.
  */
-export function PullRequestDetailGhost({ seed }: { seed?: PullRequestListEntry | null }) {
+export function PullRequestDetailGhost({
+  seed: entry,
+  summary,
+  actions,
+  checkoutCommand,
+  tabs = DEFAULT_DETAIL_TABS,
+  activeTab,
+  number,
+  onBack,
+  onClose,
+  onCheckoutError,
+}: {
+  seed?: PullRequestListEntry | null;
+  summary?: PullRequestSummary | null;
+  actions?: ReactNode;
+  checkoutCommand?: string | null;
+  tabs?: ReadonlyArray<{ value: string; label: string }>;
+  /** The panel's current tab, so the highlight does not jump when the detail arrives. */
+  activeTab?: string;
+  number?: number;
+  onBack?: (() => void) | undefined;
+  onClose?: (() => void) | undefined;
+  onCheckoutError?: ((error: Error) => void) | undefined;
+}) {
+  const seed = summary
+    ? {
+        ...entry,
+        ...summary,
+        isDraft: summary.isDraft ?? entry?.isDraft,
+      }
+    : entry;
   const statePresentation = seed
     ? resolvePullRequestState({
         state: seed.state,
-        isDraft: seed.isDraft,
+        isDraft: seed.isDraft ?? false,
       })
     : null;
-  const checksPresentation = seed?.checksState
-    ? pullRequestChecksStatePresentation(seed.checksState)
-    : null;
+  // Passing list rollups can omit workflows awaiting approval; wait for detail to claim success.
+  const checksPresentation =
+    seed?.checksState === "failing" || seed?.checksState === "pending"
+      ? pullRequestChecksStatePresentation(seed.checksState)
+      : null;
+  const checkout = checkoutCommand ?? null;
+  const changedFiles = summary?.changedFiles ?? null;
+  const selectedTab =
+    tabs.find((item) => item.value === activeTab)?.value ?? tabs[0]?.value ?? "summary";
 
   return (
     <div
@@ -92,100 +149,178 @@ export function PullRequestDetailGhost({ seed }: { seed?: PullRequestListEntry |
         !seed && "motion-safe:animate-skeleton",
       )}
     >
-      <div className="shrink-0 border-b border-border/60">
-        <div className="flex h-7 items-center justify-between gap-3 px-4">
-          <div className="flex min-w-0 flex-1 items-center gap-1.5">
-            {seed && statePresentation ? (
+      <div className="@container/pr-header grid min-w-0 shrink-0 grid-cols-[minmax(0,1fr)_auto] items-start gap-x-2 border-b border-border/60">
+        <div className="pl-4 grid h-7 min-w-0 items-center overflow-hidden">
+          <div className="flex min-w-0 items-center gap-1 text-sm text-muted-foreground sm:text-xs">
+            {onBack ? (
+              <Button
+                size="icon-micro"
+                variant="ghost-muted"
+                className="-ml-1.5"
+                onClick={onBack}
+                aria-label="Back to this thread's pull requests"
+              >
+                <ArrowLeftIcon aria-hidden className="size-3.5" />
+              </Button>
+            ) : null}
+            {seed ? (
               <>
-                <span className="min-w-0 truncate text-xs font-medium text-muted-foreground">
-                  {seed.repository}
-                </span>
-                <span
-                  className={cn("shrink-0 text-xs font-medium", statePresentation.toneClassName)}
+                <span className="min-w-0 truncate font-medium">{seed.repository}</span>
+                <InlineButton
+                  onClick={() => void readLocalApi()?.shell.openExternal(seed.url)}
+                  className={cn(
+                    "font-medium underline-offset-2 hover:underline",
+                    statePresentation?.toneClassName,
+                  )}
+                  aria-label={`Open pull request #${seed.number} on host`}
                 >
                   #{seed.number}
-                </span>
+                  <ExternalLinkIcon aria-hidden className="size-2.5" />
+                </InlineButton>
               </>
             ) : (
               <>
                 <GhostBar className="w-24" />
-                <GhostBar className="w-9" />
+                <span className="shrink-0 text-xs text-muted-foreground">#{number ?? "…"}</span>
               </>
             )}
           </div>
-          <div className="flex shrink-0 items-center gap-1">
-            <GhostBar className="h-5 w-16 rounded-md" />
-            <GhostBar className="size-5 rounded-md" />
-          </div>
+        </div>
+        <div className="mr-4 flex h-7 shrink-0 items-center justify-end gap-1">
+          {actions ?? <GhostBar className="h-6 w-16 rounded-md" />}
+          <Button size="icon-xs" variant="ghost" disabled aria-label="Pull request actions loading">
+            <EllipsisIcon aria-hidden className="size-4" />
+          </Button>
+          {onClose ? (
+            <Button
+              size="icon-xs"
+              variant="ghost"
+              aria-label="Collapse pull request panel"
+              onClick={onClose}
+            >
+              <PanelRightIcon aria-hidden className="size-3.5" />
+            </Button>
+          ) : null}
         </div>
 
-        <div className="px-4 pb-4 pt-1">
-          {seed ? (
-            <h1 className="truncate text-base font-semibold leading-snug">{seed.title}</h1>
-          ) : (
-            <GhostBar className="h-5 w-4/5 max-w-md" />
-          )}
-          <div className="mt-2 flex items-center gap-1.5">
-            {seed ? (
-              <>
-                <PullRequestActorLabel
-                  actor={seed.author}
-                  className="font-medium"
-                  tooltip={false}
-                />
-                <span className="text-xs text-muted-foreground">
-                  updated {formatRelativeTimeLabel(seed.updatedAt)}
-                </span>
-              </>
-            ) : (
-              <>
-                <GhostBar className="size-4 rounded-full" />
-                <GhostBar className="w-24" />
-              </>
-            )}
-          </div>
-          <div className="mt-4 flex min-w-0 items-center gap-2">
-            {seed ? (
-              <span className="flex min-w-0 flex-1 items-center gap-1.5 font-mono text-xs text-muted-foreground/70">
-                <code className="min-w-0 max-w-[40%] shrink-0 truncate">{seed.baseBranch}</code>
-                <ArrowLeftIcon
-                  aria-label="receives changes from"
-                  className="size-3.5 shrink-0 opacity-60"
-                />
-                <code className="min-w-0 flex-1 truncate">{seed.headBranch}</code>
-              </span>
-            ) : (
-              <>
-                <GhostBar className="h-6 w-24 rounded-md" />
-                <GhostBar className="size-3 rounded-full" />
-                <GhostBar className="h-6 w-32 rounded-md" />
-              </>
-            )}
-            <div className="ml-auto flex shrink-0 items-center gap-2">
-              <GhostBar className="w-10" />
+        <div className="col-span-2 grid grid-rows-[1fr]">
+          <div className="min-h-0 overflow-hidden">
+            <div className="col-span-2 mt-1 min-w-0 px-4 pb-4">
               {seed ? (
-                <PullRequestDiffStat
-                  additions={seed.additions}
-                  deletions={seed.deletions}
-                  className="font-mono text-xs"
-                />
+                <div className="flex min-h-7 min-w-0 items-center sm:min-h-6">
+                  <h1 className="truncate text-base font-semibold leading-snug">{seed.title}</h1>
+                </div>
               ) : (
-                <GhostBar className="w-20" />
+                <div className="flex min-h-7 min-w-0 items-center sm:min-h-6">
+                  <GhostBar className="h-5 w-4/5 max-w-md" />
+                </div>
               )}
+              <div className="mt-2 flex min-h-5 min-w-0 items-center gap-2 text-xs text-muted-foreground">
+                {seed ? (
+                  <PullRequestMetaLine className="min-w-0 whitespace-nowrap">
+                    <PullRequestActorLabel
+                      actor={seed.author ?? null}
+                      className="font-medium"
+                      tooltip={false}
+                    />
+                    <span>updated {formatRelativeTimeLabel(seed.updatedAt)}</span>
+                  </PullRequestMetaLine>
+                ) : (
+                  <PullRequestMetaLine className="min-w-0 whitespace-nowrap">
+                    <span className="flex items-center gap-1.5">
+                      <GhostBar className="size-4 rounded-full" />
+                      <GhostBar className="h-3 w-14" />
+                    </span>
+                    <GhostBar className="h-3 w-16" />
+                  </PullRequestMetaLine>
+                )}
+                {checkout ? (
+                  <PullRequestCopyableCode
+                    key={checkout}
+                    value={checkout}
+                    target="pull request checkout command"
+                    copyLabel="Copy checkout command"
+                    copiedLabel="Checkout command copied"
+                    className="ml-auto font-mono"
+                    tooltipSide="bottom"
+                    {...(onCheckoutError ? { onError: onCheckoutError } : {})}
+                  />
+                ) : null}
+              </div>
+
+              <div className="mt-4 flex min-h-5 min-w-0 items-center gap-2 text-xs text-muted-foreground">
+                <span className="flex min-w-0 flex-1 items-center gap-1.5 font-mono text-xs text-muted-foreground/70">
+                  {seed ? (
+                    <span className="inline-flex min-w-0 max-w-[40%] shrink-0 items-center gap-1">
+                      <code className="min-w-0 truncate">{seed.baseBranch}</code>
+                    </span>
+                  ) : (
+                    <span className="inline-flex min-w-0 max-w-[40%] shrink-0 items-center gap-1">
+                      <GhostBar className="h-3 w-12" />
+                    </span>
+                  )}
+                  <ArrowLeftIcon
+                    aria-label="receives changes from"
+                    className="size-3.5 shrink-0 opacity-60"
+                  />
+                  {seed ? (
+                    <PullRequestCopyableCode
+                      key={seed.headBranch}
+                      value={seed.headBranch}
+                      target="branch name"
+                      copyLabel="Copy pull request branch"
+                      copiedLabel="Branch name copied"
+                      className="min-w-0 font-mono"
+                    />
+                  ) : (
+                    <GhostBar className="h-3 w-32 flex-1" />
+                  )}
+                </span>
+                <span className="ml-auto inline-flex shrink-0 items-center justify-end gap-2">
+                  <span className="inline-flex min-w-16 items-center justify-end gap-1.5 tabular-nums">
+                    <FileDiffIcon aria-hidden className="size-3.5" />
+                    {changedFiles === null ? (
+                      <GhostBar className="h-3 w-10" />
+                    ) : (
+                      `${changedFiles.toLocaleString()} ${changedFiles === 1 ? "file" : "files"}`
+                    )}
+                  </span>
+                  {seed ? (
+                    <PullRequestDiffStat
+                      additions={seed.additions ?? 0}
+                      deletions={seed.deletions ?? 0}
+                      className="shrink-0 font-mono text-xs"
+                    />
+                  ) : (
+                    <GhostBar className="h-3 w-20" />
+                  )}
+                </span>
+              </div>
             </div>
           </div>
         </div>
 
-        <div className="flex min-h-10 items-center justify-between gap-3 border-t border-border/60 px-4 py-2">
-          <div className="flex items-center gap-1 p-0.5">
-            <GhostBar className="h-6 w-16 rounded-md" />
-            <GhostBar className="h-6 w-16 rounded-md" />
-            <GhostBar className="h-6 w-12 rounded-md" />
-          </div>
+        <nav
+          className="col-span-2 flex min-w-0 flex-wrap items-center gap-2 border-t border-border/60 px-4 py-2"
+          aria-label="Pull request tabs"
+          inert
+        >
+          <ToggleGroup
+            className="shrink-0"
+            size="segmented"
+            variant="segmented"
+            value={[selectedTab]}
+          >
+            {tabs.map((tab) => (
+              <Toggle key={tab.value} value={tab.value} tabIndex={-1}>
+                {tab.label}
+              </Toggle>
+            ))}
+          </ToggleGroup>
           {checksPresentation ? (
             <span
               className={cn(
-                "inline-flex items-center gap-1.5 text-xs",
+                "ml-auto inline-flex items-center gap-1.5 text-xs",
                 checksPresentation.toneClassName,
               )}
             >
@@ -193,74 +328,77 @@ export function PullRequestDetailGhost({ seed }: { seed?: PullRequestListEntry |
               {checksPresentation.label}
             </span>
           ) : (
-            <GhostBar className="w-20" />
+            <GhostBar className="ml-auto h-3 w-32" />
           )}
-        </div>
+        </nav>
       </div>
 
       <div className="min-h-0 flex-1 overflow-hidden">
-        <section className="px-4 py-3">
-          <div className="grid min-h-8 grid-cols-[6rem_minmax(0,1fr)] items-center gap-2">
-            <div className="flex items-center gap-1.5">
-              <GhostBar className="size-3.5 rounded-full" />
-              <GhostBar className="w-14" />
-            </div>
-            <div className="flex items-center gap-1">
-              <GhostBar className="size-4 rounded-full" />
-              <GhostBar className="size-4 rounded-full" />
-              <GhostBar className="ml-1 size-5 rounded-md" />
-            </div>
-          </div>
-          <div className="grid min-h-8 grid-cols-[6rem_minmax(0,1fr)] items-center gap-2">
-            <div className="flex items-center gap-1.5">
-              <GhostBar className="size-3.5 rounded-full" />
-              <GhostBar className="w-10" />
+        <section className="px-4 pt-2.5 pb-1">
+          <div className="space-y-2">
+            <div className="grid min-h-7 min-w-0 grid-cols-[6rem_minmax(0,1fr)] items-center gap-2 text-xs sm:min-h-6">
+              <span className="flex items-center gap-1.5 text-muted-foreground">
+                <UsersIcon aria-hidden className="size-3.5" />
+                Reviewers
+              </span>
+              <span className="flex min-w-0 items-center gap-1.5 text-foreground">
+                <GhostBar className="h-3 w-10" />
+                <Button size="icon-xs" variant="ghost" disabled aria-label="Reviewers loading">
+                  <UserPlusIcon aria-hidden className="size-3.5" />
+                </Button>
+              </span>
             </div>
-            <div className="flex items-center gap-1">
-              {seed ? (
-                seed.labels.slice(0, 3).map((label) => {
-                  const color = pullRequestLabelColor(label.color);
-                  return (
-                    <span
-                      key={label.name}
-                      className="inline-flex h-5 max-w-32 items-center gap-1 truncate rounded-full border border-border/70 bg-muted/40 px-2 text-[10px] text-muted-foreground"
-                    >
-                      <span
-                        aria-hidden
-                        className="size-2 shrink-0 rounded-full bg-muted-foreground"
-                        {...(color ? { style: { backgroundColor: color } } : {})}
+            <div className="grid min-h-7 min-w-0 grid-cols-[6rem_minmax(0,1fr)] items-center gap-2 text-xs sm:min-h-6">
+              <span className="flex items-center gap-1.5 text-muted-foreground">
+                <TagIcon aria-hidden className="size-3.5" />
+                Labels
+              </span>
+              <span className="flex min-w-0 flex-wrap items-center gap-1 text-foreground">
+                {entry?.labels ? (
+                  entry.labels.length > 0 ? (
+                    entry.labels.map((label) => (
+                      <PullRequestLabelChip
+                        key={label.name}
+                        label={label}
+                        size="default"
+                        className="max-w-48"
                       />
-                      <span className="truncate">{label.name}</span>
-                    </span>
-                  );
-                })
-              ) : (
-                <>
-                  <GhostBar className="h-5 w-24 rounded-full" />
-                  <GhostBar className="h-5 w-20 rounded-full" />
-                </>
-              )}
-            </div>
-          </div>
-          <div className="grid min-h-8 grid-cols-[6rem_minmax(0,1fr)] items-center gap-2">
-            <div className="flex items-center gap-1.5">
-              <GhostBar className="size-3.5 rounded-full" />
-              <GhostBar className="w-14" />
+                    ))
+                  ) : (
+                    <span className="text-muted-foreground">None</span>
+                  )
+                ) : (
+                  <>
+                    <GhostBar className="h-4.5 w-24" />
+                    <GhostBar className="h-4.5 w-20" />
+                  </>
+                )}
+                <Button size="icon-xs" variant="ghost" disabled aria-label="Labels loading">
+                  <TagIcon aria-hidden className="size-3.5" />
+                </Button>
+              </span>
             </div>
-            <GhostBar className="w-20" />
           </div>
         </section>
 
-        <section className="border-t border-border/60">
-          <div className="flex min-h-11 items-center gap-1.5 px-4 py-3">
-            <GhostBar className="h-4 w-24" />
-            <GhostBar className="size-3.5 rounded-full" />
+        <section>
+          <div className="sticky top-0 z-10 flex w-full items-center bg-background pr-4">
+            <div className="flex min-w-0 flex-1 items-center gap-1.5 px-4 py-3 text-left text-xs font-medium text-muted-foreground">
+              <span>Description</span>
+              <ChevronRightIcon
+                aria-hidden
+                className="size-3.5 rotate-90 text-muted-foreground/60"
+              />
+            </div>
           </div>
-          <div className="space-y-2 px-4 pb-4">
-            <GhostBar className="w-full" />
-            <GhostBar className="w-11/12" />
-            <GhostBar className="w-4/5" />
-            <GhostBar className="w-2/3" />
+          <div className="space-y-3 px-4 pb-4">
+            <GhostBar className="h-5 w-40" />
+            <div className="space-y-2">
+              <GhostBar className="h-4 w-full" />
+              <GhostBar className="h-4 w-11/12" />
+              <GhostBar className="h-4 w-4/5" />
+              <GhostBar className="h-4 w-2/3" />
+            </div>
           </div>
         </section>
       </div>
diff --git a/apps/web/src/components/pullRequest/PullRequestLinkPreview.tsx b/apps/web/src/components/pullRequest/PullRequestLinkPreview.tsx
index bbdbd9e16f99..1ed759eaa80e 100644
--- a/apps/web/src/components/pullRequest/PullRequestLinkPreview.tsx
+++ b/apps/web/src/components/pullRequest/PullRequestLinkPreview.tsx
@@ -1,6 +1,13 @@
 import { isAtomCommandInterrupted } from "@t3tools/client-runtime/state/runtime";
 import type { EnvironmentId, PullRequestRef } from "@t3tools/contracts";
-import { cloneElement, useState, type ComponentPropsWithoutRef, type ReactElement } from "react";
+import {
+  cloneElement,
+  useState,
+  type ComponentPropsWithoutRef,
+  type MouseEvent,
+  type ReactElement,
+  type ReactNode,
+} from "react";
 
 import { formatRelativeTimeLabel } from "~/timestampFormat";
 import { pullRequestEnvironment } from "~/state/pullRequests";
@@ -15,7 +22,9 @@ interface PullRequestLinkPreviewTarget {
   readonly input: PullRequestRef;
 }
 
-type PullRequestLinkElement = ReactElement<ComponentPropsWithoutRef<"a">>;
+type PullRequestLinkElement = ReactElement<
+  ComponentPropsWithoutRef<"a"> | ComponentPropsWithoutRef<"button">
+>;
 
 export function PullRequestLinkPreview({
   link,
@@ -24,13 +33,15 @@ export function PullRequestLinkPreview({
   confirmBeforeOpen,
   onOpenPullRequest,
   onOpenFallback,
+  fallback,
 }: {
   link: PullRequestLinkElement;
   originalUrl: string;
   target: PullRequestLinkPreviewTarget;
-  confirmBeforeOpen: boolean;
-  onOpenPullRequest: (url: string) => boolean;
-  onOpenFallback: (url: string) => Promise<void>;
+  confirmBeforeOpen?: boolean;
+  onOpenPullRequest?: (url: string) => boolean;
+  onOpenFallback?: (url: string) => Promise<void>;
+  fallback?: ReactNode;
 }) {
   const [open, setOpen] = useState(false);
   const [resolvingClick, setResolvingClick] = useState(false);
@@ -46,28 +57,29 @@ export function PullRequestLinkPreview({
     reportFailure: false,
     reportDefect: false,
   });
-  const trigger = confirmBeforeOpen
-    ? cloneElement(link, {
-        onClick: (event) => {
-          if (event.metaKey || event.ctrlKey || event.shiftKey || event.altKey) return;
-          event.preventDefault();
-          event.stopPropagation();
-          if (resolvingClick) return;
-          setOpen(false);
-          setResolvingClick(true);
-          void readPreview(target)
-            .then(async (result) => {
-              if (isAtomCommandInterrupted(result)) return;
-              if (result._tag === "Success" && onOpenPullRequest(result.value.url)) return;
-              await onOpenFallback(originalUrl);
-            })
-            .catch((error: unknown) => {
-              console.error("[pull-request-link-preview] failed to open link", error);
-            })
-            .finally(() => setResolvingClick(false));
-        },
-      })
-    : link;
+  const trigger =
+    confirmBeforeOpen === true
+      ? cloneElement(link, {
+          onClick: (event: MouseEvent<HTMLAnchorElement | HTMLButtonElement>) => {
+            if (event.metaKey || event.ctrlKey || event.shiftKey || event.altKey) return;
+            event.preventDefault();
+            event.stopPropagation();
+            if (resolvingClick) return;
+            setOpen(false);
+            setResolvingClick(true);
+            void readPreview(target)
+              .then(async (result) => {
+                if (isAtomCommandInterrupted(result)) return;
+                if (result._tag === "Success" && onOpenPullRequest?.(result.value.url)) return;
+                await onOpenFallback?.(originalUrl);
+              })
+              .catch((error: unknown) => {
+                console.error("[pull-request-link-preview] failed to open link", error);
+              })
+              .finally(() => setResolvingClick(false));
+          },
+        })
+      : link;
   const detail = detailQuery.data;
   const state =
     detail === null
@@ -86,9 +98,11 @@ export function PullRequestLinkPreview({
       {detail !== null || detailQuery.error !== null ? (
         <PreviewCardPopup align="center" className="w-80 max-w-[calc(100vw-2rem)] p-3">
           {detail === null ? (
-            <p className="text-xs leading-relaxed text-muted-foreground wrap-anywhere">
-              {originalUrl}
-            </p>
+            (fallback ?? (
+              <p className="text-xs leading-relaxed text-muted-foreground wrap-anywhere">
+                {originalUrl}
+              </p>
+            ))
           ) : (
             <div className="min-w-0">
               <div className="flex min-w-0 items-center gap-1.5 text-[11px] text-muted-foreground">
diff --git a/apps/web/src/components/pullRequest/PullRequestListRow.tsx b/apps/web/src/components/pullRequest/PullRequestListRow.tsx
new file mode 100644
index 000000000000..e77f82717698
--- /dev/null
+++ b/apps/web/src/components/pullRequest/PullRequestListRow.tsx
@@ -0,0 +1,158 @@
+import type {
+  PullRequestActor,
+  PullRequestMergeability,
+  PullRequestState,
+} from "@t3tools/contracts";
+import type { ReactNode } from "react";
+
+import { cn } from "~/lib/utils";
+import { formatRelativeTimeLabel } from "~/timestampFormat";
+
+import { Tooltip, TooltipPopup, TooltipTrigger } from "../ui/tooltip";
+import {
+  PullRequestActorAvatar,
+  PullRequestConflictGlyph,
+  PullRequestStateGlyph,
+} from "./pullRequestPresentation";
+
+/**
+ * The one row shape both pull request lists share: the full page and a thread's linked panel.
+ * A status column, then two lines — number and title with the diff counts on the right;
+ * author and whatever else the caller shows under them with the time on the right. The column
+ * stacks the lifecycle glyph over the checks glyph, so what a pull request is and how it is
+ * doing read top to bottom at the left edge, and the right edge is only numbers and time. The
+ * page puts repository and labels there, the panel puts the branches there. The caller owns
+ * the wrapper (a link on the panel, a button on the page) and hands in the slots.
+ */
+export const PULL_REQUEST_ROW_CLASS =
+  "group/pr-row flex w-full items-center gap-2 rounded-md py-1 pr-1 text-left";
+
+export const PULL_REQUEST_ROW_NUMBER_CLASS =
+  "shrink-0 font-mono text-xs tabular-nums text-muted-foreground";
+
+/**
+ * The conflict warning rides the corner of the lifecycle glyph, over the arrow's merge circle,
+ * so the leading slot stays one icon wide and titles line up whether or not a row is blocked.
+ * The background fill cuts it out of the glyph beneath.
+ */
+export function PullRequestRowGlyph({
+  state,
+  isDraft,
+  mergeability,
+  baseBranch,
+  below,
+  className,
+}: {
+  state: PullRequestState;
+  isDraft: boolean;
+  mergeability?: PullRequestMergeability | undefined;
+  baseBranch?: string | undefined;
+  /** Under the lifecycle glyph, level with the second line: the checks glyph. */
+  below?: ReactNode;
+  className?: string;
+}) {
+  return (
+    <span className={cn("flex w-4 shrink-0 flex-col items-center gap-0.5", className)}>
+      <span className="relative inline-flex">
+        <PullRequestStateGlyph state={state} isDraft={isDraft} />
+        {/* The wrapper takes the offset, not the icon, so the tooltip trigger inside keeps the
+            badge's size and anchors the popup to it. */}
+        <span className="absolute -right-1 -bottom-1 inline-flex">
+          <PullRequestConflictGlyph
+            state={state}
+            isDraft={isDraft}
+            {...(mergeability === undefined ? {} : { mergeability })}
+            {...(baseBranch === undefined ? {} : { baseBranch })}
+            className="size-3 fill-background [stroke-width:2.5]"
+          />
+        </span>
+      </span>
+      {below ? <span className="inline-flex text-[11px]">{below}</span> : null}
+    </span>
+  );
+}
+
+export function PullRequestRowLines({
+  number,
+  title,
+  status,
+  signals,
+  meta,
+  metaClassName,
+  updatedAt,
+}: {
+  /** The `#n` reference, already wrapped in whatever tooltip or menu the caller wants on it. */
+  number: ReactNode;
+  title: ReactNode;
+  /** Right end of the first line: stack, diff counts. */
+  status?: ReactNode;
+  /** Right after the title text: checks and review verdict glyphs. */
+  signals?: ReactNode;
+  /** Left of the second line: author, then repository and labels or the branches. */
+  meta?: ReactNode;
+  metaClassName?: string;
+  updatedAt?: string | null | undefined;
+}) {
+  return (
+    <span className="min-w-0 flex-1">
+      <span className="flex min-w-0 items-center gap-1.5">
+        {number}
+        <span className="min-w-0 truncate text-sm">{title}</span>
+        {signals ? (
+          <span className="flex shrink-0 items-center gap-1 text-[11px]">{signals}</span>
+        ) : null}
+        {status ? (
+          <span className="ml-auto flex shrink-0 items-center gap-1.5 text-[11px]">{status}</span>
+        ) : null}
+      </span>
+      <span
+        className={cn(
+          "flex min-w-0 items-center gap-1.5 overflow-hidden text-[11px] text-muted-foreground",
+          metaClassName,
+        )}
+      >
+        {meta}
+        {updatedAt ? (
+          <span className="ml-auto shrink-0 whitespace-nowrap tabular-nums">
+            {formatRelativeTimeLabel(updatedAt)}
+          </span>
+        ) : null}
+      </span>
+    </span>
+  );
+}
+
+/** Avatar and login at the meta line's own size, with the actor's full name on hover. */
+export function PullRequestRowAuthor({
+  actor,
+  className,
+  labelClassName,
+}: {
+  actor: PullRequestActor | null;
+  className?: string;
+  labelClassName?: string;
+}) {
+  const login = actor?.login ?? "ghost";
+  return (
+    <Tooltip>
+      <TooltipTrigger
+        render={<span className={cn("inline-flex min-w-0 items-center gap-1", className)} />}
+      >
+        <PullRequestActorAvatar actor={actor} className="size-3.5" />
+        <span className={cn("truncate", labelClassName)}>{login}</span>
+      </TooltipTrigger>
+      <TooltipPopup side="top">
+        {actor?.name && actor.name !== login ? `${actor.name} (@${login})` : login}
+      </TooltipPopup>
+    </Tooltip>
+  );
+}
+
+/** `head → base`, in the mono the branches are typed in. */
+export function PullRequestRowBranches({ head, base }: { head: string; base: string }) {
+  return (
+    <span className="truncate font-mono">
+      {head} → {base}
+    </span>
+  );
+}
diff --git a/apps/web/src/components/pullRequest/PullRequestRow.tsx b/apps/web/src/components/pullRequest/PullRequestRow.tsx
index e209ed018305..e32decde136c 100644
--- a/apps/web/src/components/pullRequest/PullRequestRow.tsx
+++ b/apps/web/src/components/pullRequest/PullRequestRow.tsx
@@ -4,19 +4,22 @@ import { memo, type RefCallback } from "react";
 
 import { cn } from "~/lib/utils";
 import { getSourceControlPresentationForKind } from "~/sourceControlPresentation";
-import { formatRelativeTimeLabel } from "~/timestampFormat";
 
 import { Tooltip, TooltipPopup, TooltipTrigger } from "../ui/tooltip";
 import { PullRequestChecksPopover } from "./PullRequestChecksPopover";
-import { pullRequestLabelColor, type EnvironmentPullRequestEntry } from "./pullRequestList.logic";
+import type { EnvironmentPullRequestEntry } from "./pullRequestList.logic";
 import { openOnHostLabel, showPullRequestLinkContextMenu } from "./pullRequestLinkContextMenu";
 import {
-  PullRequestActorLabel,
-  PullRequestConflictGlyph,
+  PULL_REQUEST_ROW_CLASS,
+  PULL_REQUEST_ROW_NUMBER_CLASS,
+  PullRequestRowAuthor,
+  PullRequestRowGlyph,
+  PullRequestRowLines,
+} from "./PullRequestListRow";
+import {
   PullRequestDiffStat,
-  PullRequestMetaLine,
-  PullRequestApprovalGlyph,
-  PullRequestStateGlyph,
+  PullRequestLabelChip,
+  PullRequestReviewDecisionGlyph,
 } from "./pullRequestPresentation";
 
 /**
@@ -37,32 +40,26 @@ function PullRequestRowLabels({ labels }: { labels: EnvironmentPullRequestEntry[
       {LABEL_SLOTS.map((slot, index) => {
         const label = labels[index];
         if (!label) return null;
-        const dot = pullRequestLabelColor(label.color);
         const remaining = labels.length - index - 1;
         return (
-          <span
-            key={label.name}
-            className={cn(
-              "inline-flex max-w-40 min-w-0 items-center gap-1 rounded-full border border-border/70 bg-muted/40 py-0 pl-1 pr-1.5 text-[10px] leading-3.5 text-muted-foreground",
-              slot.pill,
-            )}
-          >
-            <span
-              aria-hidden
-              className="size-2 shrink-0 rounded-full bg-muted-foreground"
-              {...(dot ? { style: { backgroundColor: dot } } : {})}
-            />
-            <span className="truncate">{label.name}</span>
+          <PullRequestLabelChip key={label.name} label={label} className={slot.pill}>
             {remaining > 0 ? (
               <span className={cn("shrink-0", slot.overflow)}>+{remaining}</span>
             ) : null}
-          </span>
+          </PullRequestLabelChip>
         );
       })}
     </span>
   );
 }
 
+/**
+ * The page row keeps a little more room around the shared lines than the panel, which sits in
+ * a narrow column. The intrinsic size is the content box a skipped row reserves, which is the
+ * two lines without the padding: a 56px row less 20px of `py-2.5`.
+ */
+const PAGE_ROW_CLASS = "px-3 py-2.5 [contain-intrinsic-block-size:36.5px]";
+
 export type PullRequestRowTarget = Pick<
   EnvironmentPullRequestEntry,
   "environmentId" | "projectId" | "host" | "repository" | "number"
@@ -105,95 +102,109 @@ function PullRequestRowImpl({
       aria-current={selected ? "true" : undefined}
       onClick={() => onSelect(entry)}
       className={cn(
-        "@container/pr-row grid w-full cursor-pointer grid-cols-[auto_minmax(0,1fr)] items-center gap-3 rounded-lg px-3 py-3 text-left transition-colors focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring",
+        PULL_REQUEST_ROW_CLASS,
+        PAGE_ROW_CLASS,
+        "cursor-pointer transition-colors focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring",
         // Offscreen rows are skipped for style, layout and paint: a long list costs what the
         // viewport shows, not what the pages have loaded. The intrinsic size keeps the
         // scrollbar honest while a row is skipped.
-        "[contain-intrinsic-block-size:66px] [content-visibility:auto]",
+        "[content-visibility:auto]",
         selected ? "bg-accent" : "hover:bg-accent/60",
       )}
     >
-      {/* The conflict warning rides the corner of the lifecycle glyph, over the arrow's
-          merge circle, so the leading slot stays one icon wide and titles line up whether or
-          not a row is blocked. The background fill cuts it out of the glyph beneath. */}
-      <span className="relative inline-flex self-start mt-0.75 shrink-0">
-        <PullRequestStateGlyph state={entry.state} isDraft={entry.isDraft} />
-        {/* The wrapper takes the offset, not the icon, so the tooltip trigger inside keeps the
-            badge's size and anchors the popup to it. */}
-        <span className="absolute -right-1 -bottom-1 inline-flex">
-          <PullRequestConflictGlyph
-            state={entry.state}
-            isDraft={entry.isDraft}
-            mergeability={entry.mergeability}
-            baseBranch={entry.baseBranch}
-            className="size-3 fill-background [stroke-width:2.5]"
-          />
-        </span>
-      </span>
-      <span className="grid min-w-0 grid-cols-[minmax(0,1fr)_auto] items-center gap-x-3 gap-y-1.5">
-        <span className="col-start-1 row-start-1 block truncate text-sm font-medium text-foreground">
-          {entry.title}
-        </span>
-        <span className="col-start-2 row-start-1 flex items-center justify-self-end gap-2 text-xs">
-          {entry.stack ? (
-            <PullRequestStackPopover
-              environmentId={entry.environmentId}
-              reference={{
-                projectId: entry.projectId,
-                host: entry.host,
-                repository: entry.repository,
-                number: entry.number,
-              }}
-              membership={entry.stack}
-              onSelect={(target) =>
-                onSelect({ ...target, host: entry.host, environmentId: entry.environmentId })
-              }
-            />
-          ) : null}
-          {/* Only a verdict somebody has actually given: "review required" is the absence of
-              one, and saying so on every unreviewed row would say nothing. */}
-          {entry.reviewDecision === "approved" ? (
-            <PullRequestApprovalGlyph />
-          ) : entry.reviewDecision === "changes-requested" ? (
-            <span className="min-w-0 truncate text-amber-600/90 dark:text-amber-400/80">
-              Changes requested
-            </span>
-          ) : null}
-          {entry.checksState === undefined ? null : (
-            <PullRequestChecksPopover
-              checksState={entry.checksState}
-              environmentId={entry.environmentId}
-              reference={{
-                projectId: entry.projectId,
-                repository: entry.repository,
-                number: entry.number,
-              }}
-            />
-          )}
-          <PullRequestDiffStat
-            additions={entry.additions}
-            deletions={entry.deletions}
-            className="shrink-0 whitespace-nowrap text-[11px]"
-          />
-        </span>
-        <PullRequestMetaLine className="@container/pr-row-meta col-start-1 row-start-2 overflow-hidden text-xs text-muted-foreground/70">
-          {matchedElsewhere ? (
-            <Tooltip>
-              <TooltipTrigger
-                render={
-                  <span className="flex min-w-6 items-center gap-1 overflow-hidden rounded-full border border-border/60 px-1 text-[10px]" />
+      <PullRequestRowGlyph
+        state={entry.state}
+        isDraft={entry.isDraft}
+        mergeability={entry.mergeability}
+        baseBranch={entry.baseBranch}
+        // On the title line rather than between the lines, as main aligns it.
+        className="mt-0.75 self-start"
+      />
+      <PullRequestRowLines
+        number={
+          // The number carries the link, here as much as on the detail: a right-click on it
+          // copies the pull request's own address rather than opening the editing menu.
+          <span
+            className={PULL_REQUEST_ROW_NUMBER_CLASS}
+            onContextMenu={(event) => {
+              event.preventDefault();
+              event.stopPropagation();
+              void showPullRequestLinkContextMenu({
+                url: entry.url,
+                openLabel: openOnHostLabel(entry.provider),
+                position: { x: event.clientX, y: event.clientY },
+              });
+            }}
+          >
+            #{entry.number}
+          </span>
+        }
+        title={entry.title}
+        signals={
+          <>
+            {entry.checksState === undefined ? null : (
+              <PullRequestChecksPopover
+                checksState={entry.checksState}
+                environmentId={entry.environmentId}
+                reference={{
+                  projectId: entry.projectId,
+                  repository: entry.repository,
+                  number: entry.number,
+                }}
+              />
+            )}
+            {/* Only a verdict the host actually reports: an approval, a request for changes,
+                or a review the branch rules still require. No glyph on the common case of a
+                pull request nobody has reviewed, so a row only wears a person when the person
+                has said something. */}
+            {entry.reviewDecision === undefined ? null : (
+              <PullRequestReviewDecisionGlyph decision={entry.reviewDecision} />
+            )}
+          </>
+        }
+        status={
+          <>
+            {entry.stack ? (
+              <PullRequestStackPopover
+                environmentId={entry.environmentId}
+                reference={{
+                  projectId: entry.projectId,
+                  host: entry.host,
+                  repository: entry.repository,
+                  number: entry.number,
+                }}
+                membership={entry.stack}
+                onSelect={(target) =>
+                  onSelect({ ...target, host: entry.host, environmentId: entry.environmentId })
                 }
-              >
-                <span className="sr-only">matched in the description</span>
-                <SearchIcon aria-hidden className="size-3 shrink-0" />
-                <span aria-hidden className="hidden truncate @xs/pr-row-meta:block">
-                  matched in the description
-                </span>
-              </TooltipTrigger>
-              <TooltipPopup side="top">Matched in the description</TooltipPopup>
-            </Tooltip>
-          ) : null}
-          <span className="flex shrink-0 items-center gap-1">
+              />
+            ) : null}
+            <PullRequestDiffStat
+              additions={entry.additions}
+              deletions={entry.deletions}
+              className="font-mono"
+            />
+          </>
+        }
+        metaClassName="@container/pr-row-meta"
+        meta={
+          <>
+            {matchedElsewhere ? (
+              <Tooltip>
+                <TooltipTrigger
+                  render={
+                    <span className="flex min-w-6 items-center gap-1 overflow-hidden rounded-full border border-border/60 px-1 text-[10px]" />
+                  }
+                >
+                  <span className="sr-only">matched in the description</span>
+                  <SearchIcon aria-hidden className="size-3 shrink-0" />
+                  <span aria-hidden className="hidden truncate @xs/pr-row-meta:block">
+                    matched in the description
+                  </span>
+                </TooltipTrigger>
+                <TooltipPopup side="top">Matched in the description</TooltipPopup>
+              </Tooltip>
+            ) : null}
             {showProvider ? (
               <Tooltip>
                 <TooltipTrigger render={<span className="inline-flex shrink-0" />}>
@@ -202,39 +213,20 @@ function PullRequestRowImpl({
                 <TooltipPopup>{providerName}</TooltipPopup>
               </Tooltip>
             ) : null}
-            {/* The number carries the link, here as much as on the detail: a right-click on it
-                copies the pull request's own address rather than opening the editing menu. */}
-            <span
-              onContextMenu={(event) => {
-                event.preventDefault();
-                event.stopPropagation();
-                void showPullRequestLinkContextMenu({
-                  url: entry.url,
-                  openLabel: openOnHostLabel(entry.provider),
-                  position: { x: event.clientX, y: event.clientY },
-                });
-              }}
-            >
-              #{entry.number}
-            </span>
-          </span>
-          {showProjectTitle ? <span className="truncate">{entry.repository}</span> : null}
-          {environmentLabel ? (
-            <span className="min-w-0 max-w-32 truncate">{environmentLabel}</span>
-          ) : null}
-          <PullRequestActorLabel
-            actor={entry.author}
-            className="min-w-4 max-w-40"
-            labelClassName="sr-only @xs/pr-row-meta:not-sr-only @xs/pr-row-meta:truncate"
-          />
-          {entry.labels.length > 0 ? <PullRequestRowLabels labels={entry.labels} /> : null}
-        </PullRequestMetaLine>
-        <span className="col-start-2 row-start-2 flex items-center justify-self-end gap-3 whitespace-nowrap text-[11px] text-muted-foreground/70 tabular-nums">
-          <span className="hidden @sm/pr-row:inline">
-            {formatRelativeTimeLabel(entry.updatedAt)}
-          </span>
-        </span>
-      </span>
+            <PullRequestRowAuthor
+              actor={entry.author}
+              className="min-w-3.5 max-w-40"
+              labelClassName="sr-only @xs/pr-row-meta:not-sr-only @xs/pr-row-meta:truncate"
+            />
+            {showProjectTitle ? <span className="truncate">{entry.repository}</span> : null}
+            {environmentLabel ? (
+              <span className="min-w-0 max-w-32 truncate">{environmentLabel}</span>
+            ) : null}
+            {entry.labels.length > 0 ? <PullRequestRowLabels labels={entry.labels} /> : null}
+          </>
+        }
+        updatedAt={entry.updatedAt}
+      />
     </button>
   );
 }
diff --git a/apps/web/src/components/pullRequest/PullRequestSummaryTab.tsx b/apps/web/src/components/pullRequest/PullRequestSummaryTab.tsx
index e89b38c28e1e..b461e4d5859d 100644
--- a/apps/web/src/components/pullRequest/PullRequestSummaryTab.tsx
+++ b/apps/web/src/components/pullRequest/PullRequestSummaryTab.tsx
@@ -30,8 +30,9 @@ import { Tooltip, TooltipPopup, TooltipTrigger } from "../ui/tooltip";
 import {
   PullRequestActorLabel,
   PullRequestCheckStatusIcon,
-  PullRequestReviewOutcomeBadge,
   pullRequestCheckStatusLabel,
+  PullRequestLabelChip,
+  PullRequestReviewOutcomeBadge,
   pullRequestReviewOutcomeLabel,
   pullRequestReviewOutcomeRingClassName,
   pullRequestReviewOutcomeStaleLabel,
@@ -56,7 +57,6 @@ import { PullRequestCommentBody } from "./PullRequestCommentBody";
 import { PullRequestMarkdownEditor } from "./PullRequestMarkdownEditor";
 import { PullRequestReactionBar } from "./PullRequestReactions";
 import { PullRequestConversationGhost } from "./PullRequestGhosts";
-import { pullRequestLabelColor } from "./pullRequestList.logic";
 import { sectionCollapseAnchorScrollTop } from "./pullRequestSummaryScroll.logic";
 
 /** One reviewer, however a host happens to have cased their login this time. */
@@ -275,7 +275,7 @@ function MetaRow({
   children: ReactNode;
 }) {
   return (
-    <div className="grid min-w-0 grid-cols-[6rem_minmax(0,1fr)] items-center gap-2 text-xs">
+    <div className="grid min-h-7 min-w-0 grid-cols-[6rem_minmax(0,1fr)] items-center gap-2 text-xs sm:min-h-6">
       <span className="flex items-center gap-1.5 text-muted-foreground">
         {icon}
         {label}
@@ -461,18 +461,21 @@ export function PullRequestSummaryTab({
   reference,
   detail,
   activityPending,
+  checksStale = false,
   activityError,
   pendingFinding,
   fixFindingLabel = "Fix in a thread",
   fixCheckLabel = "Fix",
   onFixFinding,
   onRefresh,
+  onRefreshChecks = onRefresh,
 }: {
   environmentId: EnvironmentId;
   threadRef: ScopedThreadRef | null;
   reference: PullRequestRef;
   detail: PullRequestDetailView;
   activityPending: boolean;
+  checksStale?: boolean;
   activityError: string | null;
   /** The hand-off currently preparing, if any, so only the finding it belongs to says so. */
   pendingFinding?: string | null;
@@ -480,6 +483,7 @@ export function PullRequestSummaryTab({
   fixCheckLabel?: string;
   onFixFinding?: (finding: PullRequestFinding) => void;
   onRefresh: () => void;
+  onRefreshChecks?: () => void;
 }) {
   // Keyed by the pull request, so opening another one starts at the end of its conversation
   // rather than wherever the last one had been read back to.
@@ -805,22 +809,14 @@ export function PullRequestSummaryTab({
                 {detail.labels.length === 0 ? (
                   <span className="text-muted-foreground">None</span>
                 ) : (
-                  detail.labels.map((label) => {
-                    const dot = pullRequestLabelColor(label.color);
-                    return (
-                      <span
-                        key={label.name}
-                        className="inline-flex max-w-48 items-center gap-1.5 rounded-full bg-muted/40 py-0.5 pl-1.5 pr-2 text-xs"
-                      >
-                        <span
-                          aria-hidden
-                          className="size-2 shrink-0 rounded-full bg-muted-foreground"
-                          {...(dot ? { style: { backgroundColor: dot } } : {})}
-                        />
-                        <span className="truncate">{label.name}</span>
-                      </span>
-                    );
-                  })
+                  detail.labels.map((label) => (
+                    <PullRequestLabelChip
+                      key={label.name}
+                      label={label}
+                      size="default"
+                      className="max-w-48"
+                    />
+                  ))
                 )}
                 {detail.capabilities.labels === true ? (
                   <PullRequestLabelPicker
@@ -872,7 +868,14 @@ export function PullRequestSummaryTab({
       </Section>
 
       <Section key={`checks:${detail.url}`} title="Checks" defaultOpen={false}>
-        {detail.checks.length === 0 ? (
+        {checksStale ? (
+          <div className="flex items-center gap-2 text-xs text-muted-foreground">
+            <span>Check details are out of date.</span>
+            <Button size="xs" variant="ghost" onClick={onRefreshChecks}>
+              Refresh
+            </Button>
+          </div>
+        ) : detail.checks.length === 0 ? (
           <p className="text-xs text-muted-foreground">No checks reported.</p>
         ) : (
           detail.checks.map((check, index) => {
diff --git a/apps/web/src/components/pullRequest/ThreadPullRequestsPanel.tsx b/apps/web/src/components/pullRequest/ThreadPullRequestsPanel.tsx
index 05bb598e11db..15221f26e63d 100644
--- a/apps/web/src/components/pullRequest/ThreadPullRequestsPanel.tsx
+++ b/apps/web/src/components/pullRequest/ThreadPullRequestsPanel.tsx
@@ -21,11 +21,16 @@ import { Tooltip, TooltipPopup, TooltipTrigger } from "../ui/tooltip";
 import { openLinkPullRequestDialog } from "./LinkPullRequestDialog";
 import { pullRequestListLines, type PullRequestListLine } from "./pullRequestListLines";
 import {
-  PullRequestActorAvatar,
-  PullRequestConflictGlyph,
+  PULL_REQUEST_ROW_CLASS,
+  PULL_REQUEST_ROW_NUMBER_CLASS,
+  PullRequestRowAuthor,
+  PullRequestRowBranches,
+  PullRequestRowGlyph,
+  PullRequestRowLines,
+} from "./PullRequestListRow";
+import {
   PullRequestDiffStat,
-  PullRequestApprovalGlyph,
-  PullRequestStateGlyph,
+  PullRequestReviewDecisionGlyph,
   pullRequestChecksStatePresentation,
 } from "./pullRequestPresentation";
 import { PullRequestGlyph } from "./pullRequestIcons";
@@ -72,7 +77,7 @@ function LinkRow({
   const snapshot = link.snapshot;
   return (
     <div
-      className="group/pr-row flex items-center gap-2 rounded-md py-1 pr-1 hover:bg-accent/60"
+      className={cn(PULL_REQUEST_ROW_CLASS, "relative hover:bg-accent/60")}
       // Each layer steps in under the one it targets. The step is capped: beyond a few layers
       // the indent only says "still in the stack", which the connector line already does, and
       // a sixteen-layer stack would otherwise stair-step off the right edge.
@@ -85,122 +90,132 @@ function LinkRow({
           className="size-4 shrink-0 text-muted-foreground"
         />
       ) : (
-        <span className="flex shrink-0 items-center gap-1">
-          <PullRequestStateGlyph state={snapshot.state} isDraft={snapshot.isDraft} />
-          <PullRequestConflictGlyph
-            state={snapshot.state}
-            isDraft={snapshot.isDraft}
-            baseBranch={snapshot.baseBranch}
-            {...(snapshot.mergeability ? { mergeability: snapshot.mergeability } : {})}
-          />
-        </span>
+        <PullRequestRowGlyph
+          state={snapshot.state}
+          isDraft={snapshot.isDraft}
+          mergeability={snapshot.mergeability}
+          baseBranch={snapshot.baseBranch}
+        />
       )}
       <a
         href={link.url}
         onClick={(event) => openPrLink(event, link.url, threadRef)}
-        className="min-w-0 flex-1"
+        className="flex min-w-0 flex-1"
       >
-        <span className="flex min-w-0 items-center gap-1.5">
-          <Tooltip>
-            <TooltipTrigger
-              render={
-                <span className="shrink-0 font-mono text-xs tabular-nums text-muted-foreground" />
-              }
-            >
-              #{link.number}
-            </TooltipTrigger>
-            <TooltipPopup>
-              {SOURCE_LABELS[link.source]} · {formatRelativeTimeLabel(link.linkedAt)}
-            </TooltipPopup>
-          </Tooltip>
-          <span className="min-w-0 flex-1 truncate text-sm">
-            {snapshot?.title ?? link.repository}
-          </span>
-          {/* Match the full PR list: review verdict, checks, then diff counts.
-              Each is absent rather than neutral when the
-              host said nothing, so a row without them reads as unknown, not as fine. */}
-          <span className="ml-auto flex shrink-0 items-center gap-1.5 text-[11px]">
-            {snapshot?.state === "open" &&
-            (snapshot.reviewDecision === "approved" ||
-              snapshot.reviewDecision === "changes-requested") ? (
-              snapshot.reviewDecision === "approved" ? (
-                <PullRequestApprovalGlyph />
-              ) : (
-                <span className="text-amber-600/90 dark:text-amber-400/80">Changes requested</span>
-              )
-            ) : null}
-            {snapshot?.checksState ? <ChecksGlyph state={snapshot.checksState} /> : null}
-            <PullRequestDiffStat
-              additions={snapshot?.additions ?? 0}
-              deletions={snapshot?.deletions ?? 0}
-              className="font-mono"
-            />
-          </span>
-        </span>
-        <span className="flex min-w-0 items-center gap-1.5 text-[11px] text-muted-foreground">
-          {stack ? (
+        <PullRequestRowLines
+          number={
             <Tooltip>
-              <TooltipTrigger
-                render={
-                  <span className="inline-flex shrink-0 items-center gap-0.5 text-foreground/70" />
-                }
-              >
-                <PullRequestGlyph.stack aria-hidden className="size-3" />
-                {stack.size}
+              <TooltipTrigger render={<span className={PULL_REQUEST_ROW_NUMBER_CLASS} />}>
+                #{link.number}
               </TooltipTrigger>
               <TooltipPopup>
-                {stack.kind === "native"
-                  ? `GitHub stack of ${stack.size}: merging a layer lands the ones below it.`
-                  : `${stack.size} pull requests chained by base branch.`}
+                {SOURCE_LABELS[link.source]} · {formatRelativeTimeLabel(link.linkedAt)}
               </TooltipPopup>
             </Tooltip>
-          ) : null}
-          {snapshot?.author ? (
-            <span className="inline-flex shrink-0 items-center gap-1">
-              <PullRequestActorAvatar actor={snapshot.author} className="size-3.5" />
-              <span className="max-w-28 truncate">{snapshot.author.login}</span>
-            </span>
-          ) : null}
-          <span className="truncate font-mono">
-            {snapshot !== null
-              ? `${snapshot.headBranch} → ${snapshot.baseBranch}`
-              : `${link.host}/${link.repository}`}
-          </span>
-          {snapshot?.updatedAt ? (
-            <span className="ml-auto shrink-0">{formatRelativeTimeLabel(snapshot.updatedAt)}</span>
-          ) : null}
-        </span>
-      </a>
-      <Menu>
-        <MenuTrigger
-          render={
-            <Button
-              variant="ghost"
-              size="icon-xs"
-              aria-label={`Actions for #${link.number}`}
-              className={cn(
-                "opacity-0 group-hover/pr-row:opacity-100 data-[popup-open]:opacity-100",
+          }
+          title={snapshot?.title ?? link.repository}
+          signals={
+            snapshot?.state === "open" ? (
+              <>
+                {snapshot.checksState ? <ChecksGlyph state={snapshot.checksState} /> : null}
+                {snapshot.reviewDecision ? (
+                  <PullRequestReviewDecisionGlyph decision={snapshot.reviewDecision} />
+                ) : null}
+              </>
+            ) : null
+          }
+          // Match the full PR list: diff counts up top, checks under the lifecycle glyph, the
+          // verdict by the author. Each is absent rather than neutral when the host said
+          // nothing, so a row without them reads as unknown, not as fine.
+          status={
+            <PullRequestDiffStat
+              additions={snapshot?.additions ?? 0}
+              deletions={snapshot?.deletions ?? 0}
+              className="font-mono"
+            />
+          }
+          meta={
+            <>
+              {stack ? (
+                <Tooltip>
+                  <TooltipTrigger
+                    render={
+                      <span className="inline-flex shrink-0 items-center gap-0.5 text-foreground/70" />
+                    }
+                  >
+                    <PullRequestGlyph.stack aria-hidden className="size-3" />
+                    {stack.size}
+                  </TooltipTrigger>
+                  <TooltipPopup>
+                    {stack.kind === "native"
+                      ? `GitHub stack of ${stack.size}: merging a layer lands the ones below it.`
+                      : `${stack.size} pull requests chained by base branch.`}
+                  </TooltipPopup>
+                </Tooltip>
+              ) : null}
+              {snapshot?.author ? (
+                <PullRequestRowAuthor
+                  actor={snapshot.author}
+                  className="shrink-0"
+                  labelClassName="max-w-28"
+                />
+              ) : null}
+              {snapshot !== null ? (
+                <PullRequestRowBranches head={snapshot.headBranch} base={snapshot.baseBranch} />
+              ) : (
+                <span className="truncate font-mono">
+                  {link.host}/{link.repository}
+                </span>
               )}
-            >
-              <MoreHorizontalIcon className="size-3.5" />
-            </Button>
+            </>
           }
+          updatedAt={snapshot?.updatedAt}
         />
-        <MenuPopup align="end" side="bottom">
-          <MenuItem onClick={() => void writeTextToClipboard(link.url, "link")}>
-            <LinkIcon className="size-3.5" />
-            Copy link
-          </MenuItem>
-          <MenuItem onClick={(event) => openPrLink(event, link.url, threadRef)}>
-            <ArrowUpRightIcon className="size-3.5" />
-            Open
-          </MenuItem>
-          <MenuItem onClick={() => onUnlink(link)}>
-            <PullRequestGlyph.unlink className="size-3.5" />
-            {link.source === "stack" ? "Dismiss from thread" : "Unlink from thread"}
-          </MenuItem>
-        </MenuPopup>
-      </Menu>
+      </a>
+      {/* Out of the row's flow, so no row reserves a column for a button only the hovered one
+          shows. It sits over the right end of the second line on the row's own hover color,
+          fading in from the left, so it covers the time and leaves the diff counts alone. */}
+      <span
+        className={cn(
+          "absolute right-0 bottom-0.5 flex items-center rounded-r-md bg-background pr-1 pl-5",
+          "[mask-image:linear-gradient(to_right,transparent,black_1rem)]",
+          // Hidden means untouchable too: on a touch screen there is no hover, and an invisible
+          // layer over the right of the row would otherwise swallow the tap meant for the link.
+          "pointer-events-none opacity-0 group-hover/pr-row:pointer-events-auto group-hover/pr-row:opacity-100",
+          "has-[[data-popup-open]]:pointer-events-auto has-[[data-popup-open]]:opacity-100",
+          "has-[:focus-visible]:pointer-events-auto has-[:focus-visible]:opacity-100",
+        )}
+      >
+        <span aria-hidden className="absolute inset-0 bg-accent/60" />
+        <Menu>
+          <MenuTrigger
+            render={
+              <Button
+                variant="ghost"
+                size="icon-micro"
+                aria-label={`Actions for #${link.number}`}
+                className="relative"
+              >
+                <MoreHorizontalIcon className="size-3.5" />
+              </Button>
+            }
+          />
+          <MenuPopup align="end" side="bottom">
+            <MenuItem onClick={() => void writeTextToClipboard(link.url, "link")}>
+              <LinkIcon className="size-3.5" />
+              Copy link
+            </MenuItem>
+            <MenuItem onClick={(event) => openPrLink(event, link.url, threadRef)}>
+              <ArrowUpRightIcon className="size-3.5" />
+              Open
+            </MenuItem>
+            <MenuItem onClick={() => onUnlink(link)}>
+              <PullRequestGlyph.unlink className="size-3.5" />
+              {link.source === "stack" ? "Dismiss from thread" : "Unlink from thread"}
+            </MenuItem>
+          </MenuPopup>
+        </Menu>
+      </span>
     </div>
   );
 }
diff --git a/apps/web/src/components/pullRequest/pullRequestChecks.test.tsx b/apps/web/src/components/pullRequest/pullRequestChecks.test.tsx
index a2b8e92d86fe..48a371a7a9c0 100644
--- a/apps/web/src/components/pullRequest/pullRequestChecks.test.tsx
+++ b/apps/web/src/components/pullRequest/pullRequestChecks.test.tsx
@@ -52,13 +52,20 @@ describe("pullRequestChecksState", () => {
   });
 });
 
-/** Every element of the tree the row returned, so a nested indicator can be looked for. */
+/**
+ * Every element of the tree the row returned, so a nested indicator can be looked for. The row
+ * hands its slots to the shared row lines as props rather than children, so every prop that
+ * holds an element is walked too.
+ */
 function flatten(node: ReactNode): ReadonlyArray<ReturnType<typeof Object>> {
   const found: unknown[] = [];
   for (const child of Children.toArray(node)) {
     if (!isValidElement(child)) continue;
     found.push(child);
-    found.push(...flatten((child.props as { readonly children?: ReactNode }).children));
+    for (const value of Object.values(child.props as Record<string, unknown>)) {
+      if (isValidElement(value)) found.push(...flatten(value));
+      else if (Array.isArray(value)) found.push(...flatten(value.filter(isValidElement)));
+    }
   }
   return found as ReadonlyArray<ReturnType<typeof Object>>;
 }
diff --git a/apps/web/src/components/pullRequest/pullRequestDetail.logic.test.ts b/apps/web/src/components/pullRequest/pullRequestDetail.logic.test.ts
index 5e75851f08ad..ac0c9d01d17e 100644
--- a/apps/web/src/components/pullRequest/pullRequestDetail.logic.test.ts
+++ b/apps/web/src/components/pullRequest/pullRequestDetail.logic.test.ts
@@ -7,7 +7,9 @@ import {
   type PullRequestComment,
   type PullRequestDetail,
   type PullRequestDetailView,
+  type PullRequestRef,
   type PullRequestReviewThread,
+  type RepositoryIdentity,
   type ThreadPullRequestLink,
 } from "@t3tools/contracts";
 import { describe, expect, it } from "vite-plus/test";
@@ -27,6 +29,7 @@ import {
   stripPullRequestHandoffReferences,
   isPullRequestVerdictStale,
   isStackedPullRequestBase,
+  loadingPullRequestCheckoutCommand,
   pullRequestPanelContext,
   latestPullRequestReviewOutcomes,
   newestPullRequestCommitAt,
@@ -94,6 +97,49 @@ describe("pull request checkout commands", () => {
       "git fetch 'https://forgejo.local/maria/repo'\\''$(echo nope)' refs/pull/42/head && git checkout -B pulls/42 FETCH_HEAD",
     );
   });
+
+  const reference = (host?: string): PullRequestRef => ({
+    projectId: ProjectId.make("project-1"),
+    ...(host === undefined ? {} : { host }),
+    repository: "acme/web",
+    number: 42,
+  });
+  const identity = (provider: string, canonicalKey: string): RepositoryIdentity => ({
+    canonicalKey,
+    locator: {
+      source: "git-remote",
+      remoteName: "origin",
+      remoteUrl: "git@github.com:acme/web.git",
+    },
+    provider,
+  });
+
+  it("uses a public host when no repository identity is available", () => {
+    expect(loadingPullRequestCheckoutCommand(reference("github.com"), undefined)).toBe(
+      "gh pr checkout 42",
+    );
+    expect(loadingPullRequestCheckoutCommand(reference("gitlab.com"), null)).toBe(
+      "glab mr checkout 42",
+    );
+  });
+
+  it("uses a matching enterprise identity and rejects an explicit host mismatch", () => {
+    const enterprise = identity("github", "github.example.test/acme/web");
+    expect(loadingPullRequestCheckoutCommand(reference("github.example.test"), enterprise)).toBe(
+      "gh pr checkout 42",
+    );
+    expect(loadingPullRequestCheckoutCommand(reference("github.com"), enterprise)).toBeNull();
+  });
+
+  it("does not infer a number-only command without a trusted provider", () => {
+    expect(loadingPullRequestCheckoutCommand(reference(), undefined)).toBeNull();
+    expect(
+      loadingPullRequestCheckoutCommand(
+        reference("github.com"),
+        identity("gitlab", "gitlab.com/acme/web"),
+      ),
+    ).toBeNull();
+  });
 });
 
 const TIMELINE_SOURCE: Pick<
diff --git a/apps/web/src/components/pullRequest/pullRequestDetail.logic.ts b/apps/web/src/components/pullRequest/pullRequestDetail.logic.ts
index 733e314b770f..2ec4863072dc 100644
--- a/apps/web/src/components/pullRequest/pullRequestDetail.logic.ts
+++ b/apps/web/src/components/pullRequest/pullRequestDetail.logic.ts
@@ -140,6 +140,22 @@ export function pullRequestCheckoutCommand(
   }
 }
 
+/** Build a checkout command from identity metadata while the detail request is still pending. */
+export function loadingPullRequestCheckoutCommand(
+  reference: PullRequestRef,
+  identity: RepositoryIdentity | null | undefined,
+): string | null {
+  const host = reference.host?.trim().toLowerCase();
+  const provider =
+    identity?.provider ??
+    (host === "github.com" ? "github" : host === "gitlab.com" ? "gitlab" : null);
+  if (provider !== "github" && provider !== "gitlab" && provider !== "azure-devops") return null;
+  if (identity?.provider !== undefined && host && pullRequestHostOf(identity, provider) !== host) {
+    return null;
+  }
+  return pullRequestCheckoutCommand(provider, reference.number, "");
+}
+
 /** Activity changes only when the same host resource reports a newer revision. */
 export function shouldRefreshPullRequestActivity(
   previous: { readonly key: string; readonly updatedAt: string } | null,
diff --git a/apps/web/src/components/pullRequest/pullRequestPresentation.tsx b/apps/web/src/components/pullRequest/pullRequestPresentation.tsx
index 65caae761ced..d46cad36622c 100644
--- a/apps/web/src/components/pullRequest/pullRequestPresentation.tsx
+++ b/apps/web/src/components/pullRequest/pullRequestPresentation.tsx
@@ -4,7 +4,9 @@ import type {
   PullRequestCheck,
   PullRequestCheckStatus,
   PullRequestChecksState,
+  PullRequestLabel,
   PullRequestMergeability,
+  PullRequestReviewDecision,
   PullRequestState,
 } from "@t3tools/contracts";
 import {
@@ -13,14 +15,17 @@ import {
   CircleDotIcon,
   CircleXIcon,
   UserCheckIcon,
+  UserRoundIcon,
+  UserRoundXIcon,
 } from "lucide-react";
-import { Children, isValidElement, type ReactNode, useState } from "react";
+import { Children, type CSSProperties, isValidElement, type ReactNode, useState } from "react";
 
 import { cn } from "~/lib/utils";
 
 import { Badge } from "../ui/badge";
 import { Tooltip, TooltipPopup, TooltipTrigger } from "../ui/tooltip";
 import type { PullRequestReviewOutcome } from "./pullRequestDetail.logic";
+import { pullRequestLabelColor } from "./pullRequestList.logic";
 import {
   PULL_REQUEST_STATE_PRESENTATION,
   PullRequestGlyph,
@@ -28,17 +33,87 @@ import {
   type PullRequestGlyphIcon,
 } from "./pullRequestIcons";
 
-export function PullRequestApprovalGlyph() {
+/**
+ * A host label as a flat tinted tag in the label's own color: a wash of it behind, the name
+ * in a mix of it and the theme foreground. The mix leans to the foreground because hosts hand
+ * out any color at all: at 30% of the label on light and 45% on dark, white, black and
+ * GitHub's pale yellows all clear 4.5:1 on their wash, selected row included, and
+ * saturated colors sit well above.
+ * A label with no usable color falls back to the muted tag. Children ride after the name,
+ * for an overflow count. The height is pinned so a labeled row is as tall as one without.
+ */
+export function PullRequestLabelChip({
+  label,
+  size = "sm",
+  className,
+  children,
+}: {
+  label: Pick<PullRequestLabel, "name" | "color">;
+  size?: "sm" | "default";
+  className?: string;
+  children?: ReactNode;
+}) {
+  const color = pullRequestLabelColor(label.color);
+  return (
+    <Badge
+      size={size}
+      variant="secondary"
+      className={cn(
+        "min-w-0 max-w-40 shrink justify-start gap-1 rounded-full px-2",
+        size === "sm" && "h-4 text-[.625rem]",
+        color &&
+          "bg-[color-mix(in_srgb,var(--label)_8%,transparent)] text-[color-mix(in_srgb,var(--label)_30%,var(--color-foreground))] dark:bg-[color-mix(in_srgb,var(--label)_12%,transparent)] dark:text-[color-mix(in_srgb,var(--label)_45%,var(--color-foreground))]",
+        className,
+      )}
+      {...(color ? { style: { "--label": color } as CSSProperties } : {})}
+    >
+      <span className="truncate">{label.name}</span>
+      {children}
+    </Badge>
+  );
+}
+
+/**
+ * The review verdict as one glyph beside the checks glyph, so a row answers both "does it
+ * build" and "did someone say yes" in the same spot. "Awaiting review" is only drawn when the
+ * host reports it, which on GitHub means the branch rules require a review nobody has given.
+ */
+function reviewDecisionPresentation(decision: PullRequestReviewDecision) {
+  switch (decision) {
+    case "approved":
+      return {
+        Icon: UserCheckIcon,
+        label: "Approved",
+        toneClassName: CHECK_STATUS_PRESENTATION.success.toneClassName,
+      };
+    case "changes-requested":
+      return {
+        Icon: UserRoundXIcon,
+        label: "Changes requested",
+        toneClassName: "text-amber-600/90 dark:text-amber-400/80",
+      };
+    case "review-required":
+      return {
+        Icon: UserRoundIcon,
+        label: "Awaiting review",
+        toneClassName: "text-muted-foreground/60",
+      };
+  }
+}
+
+export function PullRequestReviewDecisionGlyph({
+  decision,
+}: {
+  decision: PullRequestReviewDecision;
+}) {
+  const presentation = reviewDecisionPresentation(decision);
   return (
     <Tooltip>
       <TooltipTrigger render={<span className="inline-flex shrink-0" />}>
-        <UserCheckIcon
-          aria-hidden
-          className={cn("size-3.5", CHECK_STATUS_PRESENTATION.success.toneClassName)}
-        />
-        <span className="sr-only">Approved</span>
+        <presentation.Icon aria-hidden className={cn("size-3.5", presentation.toneClassName)} />
+        <span className="sr-only">{presentation.label}</span>
       </TooltipTrigger>
-      <TooltipPopup>Approved</TooltipPopup>
+      <TooltipPopup>{presentation.label}</TooltipPopup>
     </Tooltip>
   );
 }
diff --git a/apps/web/src/components/settings/ConnectionsSettings.tsx b/apps/web/src/components/settings/ConnectionsSettings.tsx
index 324361d7fb68..1410b3b5e0e7 100644
--- a/apps/web/src/components/settings/ConnectionsSettings.tsx
+++ b/apps/web/src/components/settings/ConnectionsSettings.tsx
@@ -3417,8 +3417,8 @@ export function ConnectionsSettings() {
                 </AlertDialogTitle>
                 <AlertDialogDescription>
                   {pendingDesktopServerExposureMode === "network-accessible"
-                    ? "T3 Code will restart to expose this environment over the network."
-                    : "T3 Code will restart and limit this environment back to this machine."}
+                    ? "Let your other devices connect to T3 Code over the network. Pair devices to give them access. T3 Code will restart."
+                    : "Devices connected over your local network will disconnect. Existing tunnels, such as T3 Connect or Tailscale HTTPS, keep working. T3 Code will restart."}
                 </AlertDialogDescription>
               </AlertDialogHeader>
               <AlertDialogFooter>
@@ -3426,27 +3426,23 @@ export function ConnectionsSettings() {
                   disabled={isUpdatingDesktopServerExposure}
                   render={<Button variant="outline" disabled={isUpdatingDesktopServerExposure} />}
                 >
-                  Cancel
+                  <span className="[text-box:trim-both_cap_alphabetic]">Cancel</span>
                 </AlertDialogClose>
                 <Button
-                  variant={
-                    pendingDesktopServerExposureMode === "local-only" ? "destructive" : "default"
-                  }
+                  variant="default"
                   onClick={handleConfirmDesktopServerExposureChange}
                   disabled={
                     pendingDesktopServerExposureMode === null || isUpdatingDesktopServerExposure
                   }
                 >
-                  {isUpdatingDesktopServerExposure ? (
-                    <>
-                      <Spinner className="size-3.5" />
-                      Restarting…
-                    </>
-                  ) : pendingDesktopServerExposureMode === "network-accessible" ? (
-                    "Restart and enable"
-                  ) : (
-                    "Restart and disable"
-                  )}
+                  {isUpdatingDesktopServerExposure && <Spinner className="size-3.5" />}
+                  <span className="[text-box:trim-both_cap_alphabetic]">
+                    {isUpdatingDesktopServerExposure
+                      ? "Restarting…"
+                      : pendingDesktopServerExposureMode === "network-accessible"
+                        ? "Restart and enable"
+                        : "Restart and disable"}
+                  </span>
                 </Button>
               </AlertDialogFooter>
             </AlertDialogPopup>
diff --git a/apps/web/src/components/settings/IntegrationsSettings.tsx b/apps/web/src/components/settings/IntegrationsSettings.tsx
index db6276d94685..60757724f2e4 100644
--- a/apps/web/src/components/settings/IntegrationsSettings.tsx
+++ b/apps/web/src/components/settings/IntegrationsSettings.tsx
@@ -470,6 +470,44 @@ function BrowserAppearanceSetting({ disabled }: { readonly disabled: boolean })
   );
 }
 
+function BrowserRecordingInputSettings({ disabled }: { readonly disabled: boolean }) {
+  const showKeys = useClientSettings((settings) => settings.browserRecordingShowKeyPresses);
+  const showMouse = useClientSettings((settings) => settings.browserRecordingShowMousePresses);
+  const updateSettings = useUpdatePrimarySettings();
+  return (
+    <>
+      <SettingsRow
+        {...searchableSetting("browser-recording-key-presses")}
+        description="Show pressed keys and shortcuts in new recordings. Password fields are excluded."
+        control={
+          <Switch
+            disabled={disabled}
+            checked={showKeys}
+            aria-label="Show key presses in recordings"
+            onCheckedChange={(checked) =>
+              updateSettings({ browserRecordingShowKeyPresses: Boolean(checked) })
+            }
+          />
+        }
+      />
+      <SettingsRow
+        {...searchableSetting("browser-recording-mouse-presses")}
+        description="Highlight mouse presses and held buttons in new recordings."
+        control={
+          <Switch
+            disabled={disabled}
+            checked={showMouse}
+            aria-label="Show mouse presses in recordings"
+            onCheckedChange={(checked) =>
+              updateSettings({ browserRecordingShowMousePresses: Boolean(checked) })
+            }
+          />
+        }
+      />
+    </>
+  );
+}
+
 function BrowserRecordingFrameRateSetting({ disabled }: { readonly disabled: boolean }) {
   const frameRate = useClientSettings((settings) => settings.browserRecordingFrameRate);
   const updateSettings = useUpdatePrimarySettings();
@@ -1326,6 +1364,7 @@ export function IntegrationsSettingsPanel() {
       <BrowserZoomSetting disabled={previewDefaultsDisabled} />
       <BrowserAppearanceSetting disabled={previewDefaultsDisabled} />
       <BrowserRecordingFrameRateSetting disabled={previewDefaultsDisabled} />
+      <BrowserRecordingInputSettings disabled={previewDefaultsDisabled} />
       <BrowserLinkTargetSetting disabled={previewDefaultsDisabled} />
       <BrowserAutoShowFloatingPreviewSetting disabled={previewDefaultsDisabled} />
     </>
diff --git a/apps/web/src/components/settings/SettingsPanels.logic.test.ts b/apps/web/src/components/settings/SettingsPanels.logic.test.ts
index d93db8d970b1..3f9d233ed278 100644
--- a/apps/web/src/components/settings/SettingsPanels.logic.test.ts
+++ b/apps/web/src/components/settings/SettingsPanels.logic.test.ts
@@ -268,6 +268,8 @@ describe("getChangedBrowserSettingLabels", () => {
         browserDefaultZoomFactor: 1.5,
         browserDefaultAppearance: "dark",
         browserRecordingFrameRate: 60,
+        browserRecordingShowKeyPresses: true,
+        browserRecordingShowMousePresses: true,
         browserLinkTarget: "app",
         browserAutoShowFloatingPreview: !DEFAULT_UNIFIED_SETTINGS.browserAutoShowFloatingPreview,
       }),
@@ -276,6 +278,8 @@ describe("getChangedBrowserSettingLabels", () => {
       "Browser zoom",
       "Browser appearance",
       "Recording frame rate",
+      "Recording key presses",
+      "Recording mouse presses",
       "Open links in",
       "Floating preview",
     ]);
diff --git a/apps/web/src/components/settings/SettingsPanels.logic.ts b/apps/web/src/components/settings/SettingsPanels.logic.ts
index 5cbcb190a97b..d5c6359c1c9f 100644
--- a/apps/web/src/components/settings/SettingsPanels.logic.ts
+++ b/apps/web/src/components/settings/SettingsPanels.logic.ts
@@ -115,6 +115,8 @@ export type BrowserDefaultSettings = Pick<
   | "browserDefaultZoomFactor"
   | "browserDefaultAppearance"
   | "browserRecordingFrameRate"
+  | "browserRecordingShowKeyPresses"
+  | "browserRecordingShowMousePresses"
   | "browserLinkTarget"
   | "browserAutoShowFloatingPreview"
 >;
@@ -156,6 +158,8 @@ export function getChangedBrowserSettingLabels(settings: BrowserDefaultSettings)
     ...(settings.browserRecordingFrameRate !== DEFAULT_UNIFIED_SETTINGS.browserRecordingFrameRate
       ? ["Recording frame rate"]
       : []),
+    ...(settings.browserRecordingShowKeyPresses ? ["Recording key presses"] : []),
+    ...(settings.browserRecordingShowMousePresses ? ["Recording mouse presses"] : []),
     ...(settings.browserLinkTarget !== DEFAULT_UNIFIED_SETTINGS.browserLinkTarget
       ? ["Open links in"]
       : []),
diff --git a/apps/web/src/components/settings/SettingsPanels.tsx b/apps/web/src/components/settings/SettingsPanels.tsx
index 85e1de588f94..180ab45361df 100644
--- a/apps/web/src/components/settings/SettingsPanels.tsx
+++ b/apps/web/src/components/settings/SettingsPanels.tsx
@@ -635,6 +635,8 @@ export function useSettingsRestore(onRestored?: () => void) {
       settings.browserDefaultZoomFactor,
       settings.browserDefaultAppearance,
       settings.browserRecordingFrameRate,
+      settings.browserRecordingShowKeyPresses,
+      settings.browserRecordingShowMousePresses,
       settings.browserLinkTarget,
       settings.browserAutoShowFloatingPreview,
       settings.appearanceContrast,
@@ -798,6 +800,8 @@ export function useSettingsRestore(onRestored?: () => void) {
       browserDefaultZoomFactor: DEFAULT_UNIFIED_SETTINGS.browserDefaultZoomFactor,
       browserDefaultAppearance: DEFAULT_UNIFIED_SETTINGS.browserDefaultAppearance,
       browserRecordingFrameRate: DEFAULT_UNIFIED_SETTINGS.browserRecordingFrameRate,
+      browserRecordingShowKeyPresses: DEFAULT_UNIFIED_SETTINGS.browserRecordingShowKeyPresses,
+      browserRecordingShowMousePresses: DEFAULT_UNIFIED_SETTINGS.browserRecordingShowMousePresses,
       browserLinkTarget: DEFAULT_UNIFIED_SETTINGS.browserLinkTarget,
       browserAutoShowFloatingPreview: DEFAULT_UNIFIED_SETTINGS.browserAutoShowFloatingPreview,
       // Re-granted like any other default. The confirmation dialog lists it by
diff --git a/apps/web/src/components/settings/settingsSearch.ts b/apps/web/src/components/settings/settingsSearch.ts
index 4532bd5f72fb..88f0326ea9e0 100644
--- a/apps/web/src/components/settings/settingsSearch.ts
+++ b/apps/web/src/components/settings/settingsSearch.ts
@@ -615,6 +615,18 @@ export const SETTINGS_SEARCH_ITEMS = [
     title: "Browser recording frame rate",
     to: "/settings/integrations",
   },
+  {
+    id: "browser-recording-key-presses",
+    title: "Show key presses in recordings",
+    to: "/settings/integrations",
+    searchTerms: ["browser preview keyboard shortcuts keystrokes overlay capture"],
+  },
+  {
+    id: "browser-recording-mouse-presses",
+    title: "Show mouse presses in recordings",
+    to: "/settings/integrations",
+    searchTerms: ["browser preview clicks buttons drag overlay capture"],
+  },
   {
     id: "browser-link-target",
     title: "Open links in",
diff --git a/apps/web/src/components/ui/menu.tsx b/apps/web/src/components/ui/menu.tsx
index 3563b0ed01ac..8beed75880ae 100644
--- a/apps/web/src/components/ui/menu.tsx
+++ b/apps/web/src/components/ui/menu.tsx
@@ -56,6 +56,10 @@ function MenuPopup({
         <MenuPrimitive.Popup
           className={cn(
             "dropdown-glass relative flex origin-(--transform-origin) rounded-lg shadow-[0_16px_40px_-18px_rgb(0_0_0/55%)] outline-none focus:outline-none dark:shadow-[0_18px_44px_-18px_rgb(0_0_0/80%)]",
+            // Portaled menus can overlap an Electron window drag region (e.g.
+            // the Review panel header). Drag hit-testing ignores z-index, so
+            // the topmost row would stay unhoverable without this opt-out.
+            "[-webkit-app-region:no-drag]",
             !hasExplicitWidthClass && "min-w-32",
             className,
           )}
diff --git a/apps/web/src/lib/openPullRequestLink.ts b/apps/web/src/lib/openPullRequestLink.ts
index b691aa58cce3..da67d0b043a4 100644
--- a/apps/web/src/lib/openPullRequestLink.ts
+++ b/apps/web/src/lib/openPullRequestLink.ts
@@ -1,6 +1,7 @@
-import type { EnvironmentId, ScopedThreadRef } from "@t3tools/contracts";
+import type { EnvironmentId, PullRequestRef, ScopedThreadRef } from "@t3tools/contracts";
+import { useAtomValue } from "@effect/atom-react";
 import { useNavigate } from "@tanstack/react-router";
-import { type MouseEvent, useCallback } from "react";
+import { type MouseEvent, useCallback, useMemo } from "react";
 
 import { pullRequestHostOf, type SourceControlProviderKind } from "@t3tools/contracts";
 import { parseChangeRequestUrl, type ChangeRequestLink } from "@t3tools/shared/changeRequestUrl";
@@ -15,6 +16,7 @@ import { useRightPanelStore } from "../rightPanelStore";
 import type { EnvironmentProject } from "@t3tools/client-runtime/state/shell";
 
 import { useProjects, useServerConfigs } from "../state/entities";
+import { serverEnvironment } from "../state/server";
 import { usePrimaryEnvironmentId } from "../state/environments";
 
 export {
@@ -93,6 +95,51 @@ export function findProjectForChangeRequest(
   });
 }
 
+export function resolvePullRequestPreviewTarget({
+  environmentId,
+  projects,
+  pullRequestsEnabled,
+  url,
+}: {
+  environmentId: EnvironmentId | null;
+  projects: ReadonlyArray<EnvironmentProject>;
+  pullRequestsEnabled: boolean;
+  url: string;
+}): { environmentId: EnvironmentId; input: PullRequestRef } | null {
+  if (!pullRequestsEnabled || environmentId === null) return null;
+  const parsed = parseChangeRequestUrl(url);
+  if (parsed === null) return null;
+  const project = findProjectForChangeRequest(
+    projects.filter((candidate) => candidate.environmentId === environmentId),
+    parsed,
+  );
+  if (project === undefined) return null;
+  return {
+    environmentId,
+    input: {
+      projectId: project.id,
+      host: parsed.authority ?? parsed.host,
+      repository: sourceControlRepositorySelector(project.repositoryIdentity) ?? parsed.repository,
+      number: parsed.number,
+    },
+  };
+}
+
+export function usePullRequestPreviewTarget(environmentId: EnvironmentId | null, url: string) {
+  const projects = useProjects();
+  const serverConfig = useAtomValue(serverEnvironment.configValueAtom(environmentId));
+  return useMemo(
+    () =>
+      resolvePullRequestPreviewTarget({
+        environmentId,
+        projects,
+        pullRequestsEnabled: serverConfig?.environment.capabilities.pullRequests === true,
+        url,
+      }),
+    [environmentId, projects, serverConfig, url],
+  );
+}
+
 /**
  * Any project checked out from the link's host. Thread links are host-level, so a pull request
  * from a repository nobody has checked out is still linkable as long as one project on that
diff --git a/apps/web/src/routes/_chat.pull-requests.tsx b/apps/web/src/routes/_chat.pull-requests.tsx
index f54415b1986c..485fa7718e3e 100644
--- a/apps/web/src/routes/_chat.pull-requests.tsx
+++ b/apps/web/src/routes/_chat.pull-requests.tsx
@@ -24,11 +24,13 @@ import {
   LayersIcon,
   ListChecksIcon,
   PenLineIcon,
+  UsersIcon,
   Plug2Icon,
   Maximize2Icon,
   Minimize2Icon,
   SearchIcon,
   UserLockIcon,
+  type LucideIcon,
 } from "lucide-react";
 import {
   useCallback,
@@ -146,6 +148,7 @@ import {
 } from "../state/pullRequests";
 import { useAtomCommand } from "../state/use-atom-command";
 import { cn } from "~/lib/utils";
+import { Separator } from "~/components/ui/separator";
 import { primaryServerKeybindingsAtom } from "~/state/server";
 import { getSourceControlPresentationForKind } from "~/sourceControlPresentation";
 import { PullRequestGlyph } from "~/components/pullRequest/pullRequestIcons";
@@ -188,6 +191,32 @@ export interface PullRequestsSearch extends PullRequestListPreferences {
   readonly selectedEnvironmentId?: EnvironmentId;
 }
 
+/**
+ * A group reads like the sidebar's shelves: its glyph, its name, how many, then a rule out
+ * to the edge. The glyph is the one the involvement filter uses for the same idea.
+ */
+const GROUP_ICONS: Record<string, LucideIcon> = {
+  authored: PenLineIcon,
+  reviewRequested: EyeIcon,
+  others: UsersIcon,
+};
+
+function PullRequestGroupHeader({
+  group,
+}: {
+  group: { key: string; label: string; entries: ReadonlyArray<unknown> };
+}) {
+  const Icon = GROUP_ICONS[group.key] ?? LayersIcon;
+  return (
+    <div className="flex items-center gap-2 px-3 pb-1 text-xs font-medium text-muted-foreground/70">
+      <Icon aria-hidden className="size-3.5 shrink-0" />
+      <h2 className="shrink-0">{group.label}</h2>
+      <span className="shrink-0 tabular-nums text-muted-foreground/50">{group.entries.length}</span>
+      <Separator className="min-w-2 flex-1 bg-border/60" />
+    </div>
+  );
+}
+
 // The state filters wear the same glyphs the rows do, so the two read as one vocabulary.
 const INVOLVEMENT_TABS = [
   { value: "all", label: "All", Icon: LayersIcon },
@@ -1659,11 +1688,7 @@ function PullRequestsRouteView() {
         <div className="space-y-3">
           {displayGroups.map((group) => (
             <div key={group.key} className="space-y-0.5">
-              {group.label ? (
-                <h2 className="px-3 pb-0.5 text-xs font-medium text-muted-foreground/70">
-                  {group.label}
-                </h2>
-              ) : null}
+              {group.label ? <PullRequestGroupHeader group={group} /> : null}
               {group.entries.map((entry) => {
                 const entryKey = pullRequestEntryKey(entry);
                 return (
diff --git a/apps/web/src/state/pullRequests.test.ts b/apps/web/src/state/pullRequests.test.ts
new file mode 100644
index 000000000000..48ee5b51b884
--- /dev/null
+++ b/apps/web/src/state/pullRequests.test.ts
@@ -0,0 +1,83 @@
+import { ProjectId, type PullRequestSummary } from "@t3tools/contracts";
+import { describe, expect, it } from "vite-plus/test";
+
+import { newestPullRequestObservation, newestPullRequestSummary } from "./pullRequests";
+
+function summary(overrides: Partial<PullRequestSummary> = {}): PullRequestSummary {
+  return {
+    provider: "github",
+    projectId: ProjectId.make("pull-request-cache-test"),
+    repository: "acme/widget",
+    number: 7,
+    title: "Improve widget",
+    url: "https://github.com/acme/widget/pull/7",
+    state: "open",
+    isDraft: false,
+    headBranch: "improve-widget",
+    baseBranch: "main",
+    updatedAt: "2026-09-10T00:00:00Z",
+    author: { login: "oliver", name: null, avatarUrl: null },
+    mergeability: "mergeable",
+    checksState: "passing",
+    ...overrides,
+  };
+}
+
+const observed = (value: PullRequestSummary, observedAt: number) => ({
+  summary: value,
+  observedAt,
+});
+
+describe("pull request summary cache", () => {
+  it("orders same-dated snapshots by the server's read time, not by arrival", () => {
+    const stale = observed(summary({ observedAt: 200 }), 500);
+    const held = observed(
+      summary({ mergeability: "conflicting", checksState: "failing", observedAt: 300 }),
+      100,
+    );
+    expect(newestPullRequestObservation(stale, held)?.summary).toMatchObject({
+      mergeability: "conflicting",
+      checksState: "failing",
+      observedAt: 300,
+    });
+    // An older filtered or server-cached response finishing last must not roll status back.
+    expect(newestPullRequestObservation(held, stale)).toBe(held);
+    // The same read seen again is not a new observation.
+    expect(newestPullRequestObservation(held, { ...held, observedAt: 900 })).toBe(held);
+  });
+
+  it("uses arrival order only when neither snapshot carries a server read time", () => {
+    const first = observed(summary(), 100);
+    const later = observed(summary({ checksState: "failing" }), 200);
+    expect(newestPullRequestObservation(first, later)).toMatchObject({ observedAt: 200 });
+    expect(newestPullRequestObservation(later, first)).toBe(later);
+    // A stamped read beats an unstamped one regardless of which arrived last.
+    const stamped = observed(summary({ observedAt: 50 }), 1);
+    expect(newestPullRequestObservation(later, stamped)?.summary.observedAt).toBe(50);
+    expect(newestPullRequestObservation(stamped, later)).toBe(stamped);
+  });
+
+  it("keeps known status when a newer snapshot omits it, and clears it when told to", () => {
+    const list = observed(summary({ reviewDecision: "approved", observedAt: 100 }), 100);
+    const sparse = observed(
+      summary({ checksState: undefined, reviewDecision: undefined, observedAt: 200 }),
+      200,
+    );
+    expect(newestPullRequestObservation(list, sparse)?.summary).toMatchObject({
+      checksState: "passing",
+      reviewDecision: "approved",
+    });
+    const cleared = observed(summary({ checksState: null, observedAt: 300 }), 300);
+    expect(newestPullRequestObservation(list, cleared)?.summary.checksState).toBeNull();
+  });
+
+  it("treats merged as final and otherwise prefers the later host update", () => {
+    const merged = summary({ state: "merged", updatedAt: "2026-09-01T00:00:00Z" });
+    const reopened = summary({ updatedAt: "2026-09-12T00:00:00Z", observedAt: 900 });
+    expect(newestPullRequestSummary(merged, reopened)).toBe(merged);
+    expect(newestPullRequestSummary(reopened, merged)).toBe(merged);
+    const older = summary({ updatedAt: "2026-09-11T00:00:00Z", observedAt: 999 });
+    expect(newestPullRequestSummary(older, reopened)).toBe(reopened);
+    expect(newestPullRequestSummary(reopened, older)).toBe(reopened);
+  });
+});
diff --git a/apps/web/src/state/pullRequests.ts b/apps/web/src/state/pullRequests.ts
index e2e840c89c49..365c6812d096 100644
--- a/apps/web/src/state/pullRequests.ts
+++ b/apps/web/src/state/pullRequests.ts
@@ -8,6 +8,7 @@ import type {
   EnvironmentId,
   PullRequestListInput,
   PullRequestListStatsInput,
+  PullRequestListEntry,
   PullRequestRef,
   PullRequestSummary,
 } from "@t3tools/contracts";
@@ -30,49 +31,147 @@ export const linkedPullRequestDetailAtom = createLinkedPullRequestSummaryAtomFam
   pullRequestEnvironment.refreshes,
 );
 
+export interface ObservedPullRequestSummary {
+  readonly summary: PullRequestSummary;
+  /** Client arrival time, the only ordering older servers leave us for same-dated snapshots. */
+  readonly observedAt: number;
+}
+
 const observedPullRequestSummaryAtom = Atom.family((key: string) =>
-  Atom.make<PullRequestSummary | null>(null).pipe(
+  Atom.make<ObservedPullRequestSummary | null>(null).pipe(
     Atom.setIdleTTL(5 * 60_000),
     Atom.withLabel(`web-pull-requests:observed-summary:${key}`),
   ),
 );
 
+/**
+ * Positive when `incoming` is the newer snapshot. Merged is final. Then the host's own update
+ * time, then the server's read-start time, which survives its caches; a snapshot without one
+ * never beats a stamped read. Zero when neither side carries a read time.
+ */
+function compareSummaries(current: PullRequestSummary, incoming: PullRequestSummary): number {
+  const merged = Number(incoming.state === "merged") - Number(current.state === "merged");
+  if (merged !== 0) return merged;
+  const updated = Date.parse(incoming.updatedAt) - Date.parse(current.updatedAt);
+  if (updated !== 0) return updated;
+  if (current.observedAt === undefined && incoming.observedAt === undefined) return 0;
+  return (incoming.observedAt ?? -Infinity) - (current.observedAt ?? -Infinity);
+}
+
 export function newestPullRequestSummary(
   current: PullRequestSummary | null,
   observed: PullRequestSummary | null,
 ): PullRequestSummary | null {
   if (current === null) return observed;
   if (observed === null) return current;
-  if (current.state === "merged") return current;
-  if (observed.state === "merged") return observed;
-  return Date.parse(observed.updatedAt) >= Date.parse(current.updatedAt) ? observed : current;
+  return compareSummaries(current, observed) >= 0 ? observed : current;
+}
+
+/** Reuse list status without treating its deferred line-count placeholders as real stats. */
+export function pullRequestListEntryToSummary(entry: PullRequestListEntry): PullRequestSummary {
+  return {
+    provider: entry.provider,
+    projectId: entry.projectId,
+    repository: entry.repository,
+    number: entry.number,
+    title: entry.title,
+    url: entry.url,
+    state: entry.state,
+    isDraft: entry.isDraft,
+    headBranch: entry.headBranch,
+    baseBranch: entry.baseBranch,
+    updatedAt: entry.updatedAt,
+    ...(entry.observedAt === undefined ? {} : { observedAt: entry.observedAt }),
+    author: entry.author,
+    ...(entry.reviewDecision === undefined ? {} : { reviewDecision: entry.reviewDecision }),
+    ...(entry.checksState === undefined ? {} : { checksState: entry.checksState }),
+    mergeability: entry.mergeability,
+  };
+}
+
+// A project has one remote, so its id already pins the host. Leaving the host out lets a list
+// row, a hostless legacy reference and a URL-derived thread reference share one entry.
+function pullRequestSummaryKey(environmentId: EnvironmentId, reference: PullRequestRef): string {
+  return JSON.stringify([
+    environmentId,
+    reference.projectId,
+    reference.repository.toLowerCase(),
+    reference.number,
+  ]);
+}
+
+/** The observation to hold after `incoming` arrives. Returns `current` itself on a tie. */
+export function newestPullRequestObservation(
+  current: ObservedPullRequestSummary | null,
+  incoming: ObservedPullRequestSummary | null,
+): ObservedPullRequestSummary | null {
+  if (current === null) return incoming;
+  if (incoming === null) return current;
+  let order = compareSummaries(current.summary, incoming.summary);
+  // Client clocks only break ties between snapshots that both lack a server read time.
+  if (
+    order === 0 &&
+    current.summary.observedAt === undefined &&
+    incoming.summary.observedAt === undefined
+  ) {
+    order = incoming.observedAt - current.observedAt;
+  }
+  if (!(order > 0)) return current;
+  // A sparse summary must not erase known status, or carry old detail stats into a new list read.
+  return {
+    ...incoming,
+    summary: {
+      ...incoming.summary,
+      isDraft: incoming.summary.isDraft ?? current.summary.isDraft,
+      mergeability: incoming.summary.mergeability ?? current.summary.mergeability,
+      reviewDecision:
+        incoming.summary.reviewDecision === undefined
+          ? current.summary.reviewDecision
+          : incoming.summary.reviewDecision,
+      checksState:
+        incoming.summary.checksState === undefined
+          ? current.summary.checksState
+          : incoming.summary.checksState,
+    },
+  };
+}
+
+function observePullRequestSummary(
+  environmentId: EnvironmentId,
+  reference: PullRequestRef,
+  summary: PullRequestSummary,
+  observedAt: number,
+): void {
+  const atom = observedPullRequestSummaryAtom(pullRequestSummaryKey(environmentId, reference));
+  appAtomRegistry.modify(atom, (previous) => {
+    const next = newestPullRequestObservation(previous, { summary, observedAt });
+    return next === previous ? [false, previous] : [true, next];
+  });
 }
 
 export function useSharedPullRequestSummary(
   environmentId: EnvironmentId | null,
   reference: PullRequestRef | null,
   current: PullRequestSummary | null,
+  observedAt: number | null = null,
 ): PullRequestSummary | null {
   const key =
     environmentId === null || reference === null
       ? "none"
-      : JSON.stringify([
-          environmentId,
-          reference.projectId,
-          reference.host?.toLowerCase() ?? null,
-          reference.repository.toLowerCase(),
-          reference.number,
-        ]);
+      : pullRequestSummaryKey(environmentId, reference);
   const atom = observedPullRequestSummaryAtom(key);
   const observed = useAtomValue(atom);
   useLayoutEffect(() => {
-    if (environmentId === null || current === null) return;
-    appAtomRegistry.modify(atom, (previous) => {
-      const next = newestPullRequestSummary(previous, current);
-      return next === previous ? [false, previous] : [true, next];
-    });
-  }, [atom, current, environmentId]);
-  return newestPullRequestSummary(current, observed);
+    if (environmentId === null || reference === null || current === null || observedAt === null)
+      return;
+    observePullRequestSummary(environmentId, reference, current, observedAt);
+  }, [current, environmentId, reference, observedAt]);
+  return (
+    newestPullRequestObservation(
+      observed,
+      current === null || observedAt === null ? null : { summary: current, observedAt },
+    )?.summary ?? current
+  );
 }
 export const pullRequestStackAtom = createPullRequestStackAtomFamily(
   connectionAtomRuntime,
@@ -90,6 +189,7 @@ interface MergedEnvironmentQueryView<A> {
   /** The first environment that failed. Others may still have answered — this is not fatal. */
   readonly error: string | null;
   readonly isPending: boolean;
+  readonly observations: ReadonlyArray<readonly [EnvironmentId, A, number]>;
 }
 
 /**
@@ -110,6 +210,7 @@ function createMergedEnvironmentQuery<Input, A>(
     Atom.make((get): MergedEnvironmentQueryView<A> => {
       const targets = JSON.parse(key) as ReadonlyArray<EnvironmentQueryTarget<Input>>;
       const values: Array<readonly [EnvironmentId, A]> = [];
+      const observations: Array<readonly [EnvironmentId, A, number]> = [];
       let error: string | null = null;
       let isPending = false;
       for (const target of targets) {
@@ -120,12 +221,16 @@ function createMergedEnvironmentQuery<Input, A>(
         }
         const value = Option.getOrNull(AsyncResult.value(result));
         if (value !== null) values.push([target.environmentId, value]);
+        if (result._tag === "Success") {
+          observations.push([target.environmentId, result.value, result.timestamp]);
+        }
       }
-      return { values, error, isPending };
+      return { values, error, isPending, observations };
     }).pipe(Atom.withLabel(`${label}:${key}`)),
   );
   const empty = Atom.make<MergedEnvironmentQueryView<A>>({
     values: [],
+    observations: [],
     error: null,
     isPending: false,
   }).pipe(Atom.withLabel(`${label}:empty`));
@@ -187,6 +292,23 @@ export function usePullRequestList(
   targets: ReadonlyArray<EnvironmentQueryTarget<PullRequestListInput>>,
 ): MergedPullRequestListView {
   const query = usePullRequestListsQuery(targets);
+  useLayoutEffect(() => {
+    for (const [environmentId, answer, observedAt] of query.observations) {
+      for (const entry of answer.entries) {
+        observePullRequestSummary(
+          environmentId,
+          {
+            projectId: entry.projectId,
+            host: entry.host,
+            repository: entry.repository,
+            number: entry.number,
+          },
+          pullRequestListEntryToSummary(entry),
+          observedAt,
+        );
+      }
+    }
+  }, [query.observations]);
   const data = useMemo(() => mergePullRequestLists(query.values), [query.values]);
   return { data, error: query.error, isPending: query.isPending, refresh: query.refresh };
 }
diff --git a/apps/web/src/state/query.ts b/apps/web/src/state/query.ts
index b2823a51e332..f5cb765a2479 100644
--- a/apps/web/src/state/query.ts
+++ b/apps/web/src/state/query.ts
@@ -9,6 +9,7 @@ const EMPTY_ASYNC_RESULT_ATOM = Atom.make(AsyncResult.initial<never, never>(fals
 
 export interface EnvironmentQueryView<A> {
   readonly data: A | null;
+  readonly dataUpdatedAt: number | null;
   readonly error: string | null;
   readonly isPending: boolean;
   readonly isSuccess: boolean;
@@ -30,6 +31,7 @@ export function useEnvironmentQuery<A, E>(
   const refresh = useAtomRefresh(selectedAtom);
   return {
     data: Option.getOrNull(AsyncResult.value(result)),
+    dataUpdatedAt: result._tag === "Success" ? result.timestamp : null,
     error: result._tag === "Failure" ? formatEnvironmentQueryError(result.cause) : null,
     isPending: atom !== null && result.waiting,
     isSuccess: result._tag === "Success",
diff --git a/docs/user/composer.md b/docs/user/composer.md
index fb51bd50754c..6e699d0669c1 100644
--- a/docs/user/composer.md
+++ b/docs/user/composer.md
@@ -14,9 +14,13 @@ to keep a large paste editable in the composer instead.
 
 ## Attach files
 
-Attach up to eight files per message. Images can be up to 10 MB; other files can
-be up to 50 MB, subject to the environment's upload support and limit. The agent
-receives them on the environment's machine.
+Attach up to 100 files per message. Each image can be up to 10 MiB, with at most
+80 MiB of images in one message. Other files, including videos, can be up to
+50 MiB each, subject to the environment's upload support and limit. The agent
+receives them on the environment's machine. Provider and model limits still
+apply, including images already in the conversation. A video attachment gives
+the agent a file path; it does not enable native video input. Antigravity does
+not accept video attachments.
 
 Uploads begin when you add an attachment. All uploads must finish before the
 message can send. Retry or remove a failed upload. On web and desktop, reloading
diff --git a/docs/user/question-attachments.md b/docs/user/question-attachments.md
index e157cac46cfc..de05ee75c58e 100644
--- a/docs/user/question-attachments.md
+++ b/docs/user/question-attachments.md
@@ -6,4 +6,4 @@ Each question keeps its own attachments as you move between questions. Your norm
 
 Files upload to the environment running the thread, including remote environments. The agent receives paths to those saved files with your answer and can open them with its available tools. Questions that only accept predefined choices do not offer attachments. Older servers need updating before this option appears.
 
-Submitted attachments remain in the thread history. Reverting a thread removes attachments belonging to discarded answers; deleting the thread uses the same file cleanup as other attachments. You can attach up to eight files across one set of answers, using the same file size limits as the normal composer.
+Submitted attachments remain in the thread history. Reverting a thread removes attachments belonging to discarded answers; deleting the thread uses the same file cleanup as other attachments. You can attach up to 100 files across one set of answers, using the same file and total image size limits as the normal composer.
diff --git a/packages/client-runtime/src/codexFileCitations.ts b/packages/client-runtime/src/codexFileCitations.ts
index b5042f0806e6..d29996501ea6 100644
--- a/packages/client-runtime/src/codexFileCitations.ts
+++ b/packages/client-runtime/src/codexFileCitations.ts
@@ -44,6 +44,7 @@ function markdownLabel(value: string): string {
 
 function markdownDestination(value: string): string {
   return value
+    .replaceAll("\\", "%5C")
     .replaceAll("<", "%3C")
     .replaceAll(">", "%3E")
     .replaceAll("\r", "%0D")
diff --git a/packages/client-runtime/src/codexMarkdownDirectives.test.ts b/packages/client-runtime/src/codexMarkdownDirectives.test.ts
index b2a22901eac2..efd5262d073c 100644
--- a/packages/client-runtime/src/codexMarkdownDirectives.test.ts
+++ b/packages/client-runtime/src/codexMarkdownDirectives.test.ts
@@ -8,6 +8,7 @@ import {
   renderCodexFileCitationsAsMarkdown,
   splitCodexArtifactTemplateMarkdown,
 } from "./codexMarkdownDirectives.js";
+import { parseMarkdownFileLink } from "./markdownLinks.js";
 
 interface TestNode {
   readonly type: string;
@@ -89,6 +90,24 @@ describe("remarkCodexDirectives", () => {
   });
 });
 
+describe.each([
+  { name: "renderCodexDirectivesForCopy", render: renderCodexDirectivesForCopy },
+  { name: "renderCodexFileCitationsAsMarkdown", render: renderCodexFileCitationsAsMarkdown },
+])("$name file citation round trips", ({ render }) => {
+  it.each([
+    "C:\\Users\\test\\[draft]\\report.md",
+    "\\\\server\\share\\report.md",
+    "outputs/report.md",
+    "/tmp/report%5C.md",
+  ])("preserves the literal path and line: %s", (path) => {
+    const markdown = render(`:codex-file-citation{path="${path}" line_range_start="7"}`);
+    const link = parseOrdinaryMarkdown(markdown).children?.[0]?.children?.[0];
+
+    expect(link?.type).toBe("link");
+    expect(parseMarkdownFileLink(link?.url ?? "")).toEqual({ path, line: 7 });
+  });
+});
+
 describe("native Markdown adapters", () => {
   it("uses the same parser to render file citations as portable links", () => {
     expect(renderCodexFileCitationsAsMarkdown(`Created ${FILE_CITATION}.`)).toBe(
diff --git a/packages/client-runtime/src/device/stream.test.ts b/packages/client-runtime/src/device/stream.test.ts
new file mode 100644
index 000000000000..b947f5c17a74
--- /dev/null
+++ b/packages/client-runtime/src/device/stream.test.ts
@@ -0,0 +1,735 @@
+import { afterEach, describe, expect, it, vi } from "vite-plus/test";
+
+import {
+  createDeviceStreamClient,
+  AvccDemuxer,
+  avcCodecString,
+  parseSemuPacket,
+  scanAccessUnit,
+} from "./stream.ts";
+
+const envelope = (tag: number, payload: number[]) => {
+  const length = 1 + payload.length;
+  return [
+    (length >>> 24) & 0xff,
+    (length >>> 16) & 0xff,
+    (length >>> 8) & 0xff,
+    length & 0xff,
+    tag,
+    ...payload,
+  ];
+};
+
+describe("AvccDemuxer", () => {
+  it("reassembles envelopes split across reads", () => {
+    const demuxer = new AvccDemuxer();
+    const bytes = new Uint8Array([
+      ...envelope(1, [1, 0x64, 0x00, 0x1f]),
+      ...envelope(2, [9, 9, 9]),
+      ...envelope(0x7f, [0]),
+      ...envelope(3, [4]),
+    ]);
+    const first = demuxer.push(bytes.subarray(0, 7));
+    const rest = demuxer.push(bytes.subarray(7));
+    const chunks = [...first, ...rest];
+    expect(chunks.map((chunk) => chunk.type)).toEqual(["description", "keyframe", "delta"]);
+    expect(Array.from(chunks[0]!.payload)).toEqual([1, 0x64, 0x00, 0x1f]);
+    expect(Array.from(chunks[1]!.payload)).toEqual([9, 9, 9]);
+  });
+
+  it("derives the WebCodecs codec string from the avcC record", () => {
+    expect(avcCodecString(new Uint8Array([1, 0x64, 0x00, 0x1f]))).toBe("avc1.64001f");
+    expect(avcCodecString(new Uint8Array([1]))).toBe("avc1.42E01E");
+  });
+});
+
+describe("native device stream transport", () => {
+  afterEach(() => {
+    vi.useRealTimers();
+    vi.unstubAllGlobals();
+  });
+
+  function setup(platform: "ios" | "android") {
+    vi.useFakeTimers();
+    vi.stubGlobal("VideoDecoder", vi.fn());
+    vi.stubGlobal("EncodedVideoChunk", vi.fn());
+    let resolveOpened!: (socket: FakeSocket) => void;
+    const waitForSocket = () =>
+      new Promise<FakeSocket>((resolve) => {
+        resolveOpened = resolve;
+      });
+    const opened = waitForSocket();
+    class FakeSocket {
+      static OPEN = 1;
+      readyState = 1;
+      binaryType = "";
+      onopen: (() => void) | null = null;
+      onclose: ((event: { code: number; reason: string }) => void) | null = null;
+      send = vi.fn();
+      close = vi.fn();
+      readonly url: string;
+      constructor(url: string) {
+        this.url = url;
+        resolveOpened(this);
+      }
+    }
+    vi.stubGlobal("WebSocket", FakeSocket);
+    const fetch = vi.fn(() => Promise.resolve(new Response("frame")));
+    vi.stubGlobal("fetch", fetch);
+    const events = {
+      onStatus: vi.fn(),
+      onScreen: vi.fn(),
+      onUnauthorized: vi.fn(),
+      onMjpegFallback: vi.fn(),
+      onInputConnected: vi.fn(),
+    };
+    const client = createDeviceStreamClient(
+      {
+        platform,
+        deviceId: "test device",
+        preferMjpeg: platform === "ios",
+        access: {
+          httpBase: "https://environment.test/api/device-hub",
+          wsBase: "wss://environment.test/api/device-hub",
+          credentials: false,
+          query: { wsTicket: "stream-ticket", hostId: "ssh-host" },
+        },
+      },
+      { getContext: () => null } as unknown as HTMLCanvasElement,
+      events,
+    );
+    return { client, opened, waitForSocket, events, fetch };
+  }
+
+  it("uses authenticated iOS MJPEG and forwards controls without a cross-origin video fetch", async () => {
+    const { client, opened, events, fetch } = setup("ios");
+    client.start();
+    const socket = await opened;
+    const imageUrl = new URL(events.onMjpegFallback.mock.calls[0]![0] as string);
+    expect(imageUrl.pathname).toContain("test%20device/stream.mjpeg");
+    expect(imageUrl.searchParams.get("wsTicket")).toBe("stream-ticket");
+    expect(imageUrl.searchParams.get("hostId")).toBe("ssh-host");
+    expect(fetch).toHaveBeenCalledTimes(1);
+    socket.onopen?.();
+    client.pressButton("home");
+    client.sendTouch("begin", 0.25, 0.75);
+    const messages = socket.send.mock.calls.slice(1).map(([bytes]) => {
+      const packet = bytes as Uint8Array;
+      return {
+        tag: packet[0],
+        body: JSON.parse(new TextDecoder().decode(packet.subarray(1))) as unknown,
+      };
+    });
+    expect(messages).toEqual([
+      { tag: 0x04, body: { button: "home" } },
+      { tag: 0x03, body: { type: "begin", x: 0.25, y: 0.75 } },
+    ]);
+    client.stop();
+    expect(socket.close).toHaveBeenCalledTimes(1);
+    expect(vi.getTimerCount()).toBe(0);
+  });
+
+  it("forwards Android gestures and device controls through the ticketed host socket", async () => {
+    const { client, opened } = setup("android");
+    client.start();
+    const socket = await opened;
+    const url = new URL(socket.url);
+    expect(url.searchParams.get("device")).toBe("test device");
+    expect(url.searchParams.get("wsTicket")).toBe("stream-ticket");
+    expect(url.searchParams.get("hostId")).toBe("ssh-host");
+    client.sendTouch("begin", 0.2, 0.8);
+    client.sendTouch("move", 0.2, 0.4);
+    client.sendTouch("end", 0.2, 0.1);
+    client.pressButton("home");
+    client.pressButton("appSwitcher");
+    expect(
+      socket.send.mock.calls.map(([message]) => JSON.parse(message as string) as unknown),
+    ).toEqual([
+      { type: "touch", action: "down", x: 0.2, y: 0.8 },
+      { type: "touch", action: "move", x: 0.2, y: 0.4 },
+      { type: "touch", action: "up", x: 0.2, y: 0.1 },
+      { type: "home" },
+      { type: "recents" },
+    ]);
+    client.stop();
+    expect(socket.close).toHaveBeenCalledTimes(1);
+  });
+
+  it("renews an expired Android ticket when the HTTP upgrade is rejected instead of retrying it forever", async () => {
+    const { client, opened, events } = setup("android");
+    client.start();
+    const socket = await opened;
+    socket.onclose?.({ code: 1006, reason: "" });
+    expect(events.onUnauthorized).toHaveBeenCalledTimes(1);
+    expect(vi.getTimerCount()).toBe(0);
+    client.stop();
+  });
+
+  it.each(["ios", "android"] as const)(
+    "keeps a restarted %s stream connected when the discarded socket closes late",
+    async (platform) => {
+      const { client, opened, waitForSocket, events } = setup(platform);
+      client.start();
+      const discarded = await opened;
+      client.stop();
+      const reopened = waitForSocket();
+      client.start();
+      const replacement = await reopened;
+      replacement.onopen?.();
+      replacement.send.mockClear();
+      events.onInputConnected.mockClear();
+
+      discarded.onclose?.({ code: 1006, reason: "" });
+
+      expect(events.onUnauthorized).not.toHaveBeenCalled();
+      expect(events.onInputConnected).not.toHaveBeenCalled();
+      expect(replacement.close).not.toHaveBeenCalled();
+      client.pressButton("home");
+      expect(replacement.send).toHaveBeenCalledTimes(1);
+      client.stop();
+      expect(replacement.close).toHaveBeenCalledTimes(1);
+      expect(vi.getTimerCount()).toBe(0);
+    },
+  );
+
+  it.each(["ios", "android"] as const)(
+    "does not renew credentials or reconnect a stopped %s stream",
+    async (platform) => {
+      const { client, opened, events } = setup(platform);
+      client.start();
+      const socket = await opened;
+      events.onInputConnected.mockClear();
+      client.stop();
+      socket.onclose?.({ code: 1006, reason: "" });
+      expect(events.onUnauthorized).not.toHaveBeenCalled();
+      expect(events.onInputConnected).not.toHaveBeenCalled();
+      expect(vi.getTimerCount()).toBe(0);
+    },
+  );
+});
+
+describe("serve-emu frames", () => {
+  it("strips the SEMU header and reads the keyframe flag and timestamp", () => {
+    const buffer = new ArrayBuffer(16 + 3);
+    const view = new DataView(buffer);
+    view.setUint32(0, 0x53454d55);
+    view.setUint8(4, 1);
+    view.setUint8(5, 1);
+    view.setBigUint64(8, 123456n);
+    new Uint8Array(buffer).set([7, 8, 9], 16);
+    const packet = parseSemuPacket(buffer);
+    expect(packet.isKey).toBe(true);
+    expect(packet.timestamp).toBe(123456);
+    expect(Array.from(packet.data)).toEqual([7, 8, 9]);
+  });
+
+  it("treats a frame without the header as raw data", () => {
+    const packet = parseSemuPacket(new Uint8Array([0, 0, 1, 0x65]).buffer);
+    expect(packet.isKey).toBeNull();
+    expect(packet.data.length).toBe(4);
+  });
+
+  it("finds the SPS and IDR NAL units in an Annex-B access unit", () => {
+    const unit = new Uint8Array([0, 0, 0, 1, 0x67, 0x64, 0x00, 0x1f, 0, 0, 1, 0x65, 0xaa]);
+    const scanned = scanAccessUnit(unit);
+    expect(scanned.isKey).toBe(true);
+    expect(scanned.sps && avcCodecString(scanned.sps)).toBe("avc1.64001f");
+    expect(scanAccessUnit(new Uint8Array([0, 0, 1, 0x41, 0x00])).isKey).toBe(false);
+  });
+});
+
+describe("iOS input startup", () => {
+  afterEach(() => {
+    vi.useRealTimers();
+    vi.unstubAllGlobals();
+  });
+
+  const setup = () => {
+    vi.useFakeTimers();
+    const sockets: FakeSocket[] = [];
+    class FakeSocket {
+      static OPEN = 1;
+      readyState = 1;
+      binaryType = "";
+      onopen: (() => void) | null = null;
+      onmessage: ((event: { data: ArrayBuffer }) => void) | null = null;
+      onclose: ((event: { code: number; reason: string }) => void) | null = null;
+      send = vi.fn();
+      close = vi.fn();
+      constructor() {
+        sockets.push(this);
+      }
+    }
+    vi.stubGlobal("WebSocket", FakeSocket);
+    const signals: AbortSignal[] = [];
+    vi.stubGlobal(
+      "fetch",
+      vi.fn((_url, init: RequestInit) => {
+        const signal = init.signal!;
+        signals.push(signal);
+        return Promise.resolve(
+          new Response(
+            new ReadableStream({
+              start(controller) {
+                signal.addEventListener("abort", () => controller.error(new Error("aborted")));
+              },
+            }),
+          ),
+        );
+      }),
+    );
+    const client = createDeviceStreamClient(
+      {
+        platform: "ios",
+        deviceId: "test-device",
+        access: {
+          httpBase: "http://test/api/device-hub",
+          wsBase: "ws://test/api/device-hub",
+          credentials: true,
+          query: {},
+        },
+      },
+      { getContext: () => null } as unknown as HTMLCanvasElement,
+      {
+        onStatus: vi.fn(),
+        onScreen: vi.fn(),
+        onUnauthorized: vi.fn(),
+        onMjpegFallback: vi.fn(),
+        onInputConnected: vi.fn(),
+      },
+    );
+    return { client, sockets, signals };
+  };
+
+  it("connects input when the MJPEG prime never produces a frame", async () => {
+    const { client, sockets, signals } = setup();
+    client.start();
+    await vi.advanceTimersByTimeAsync(2_000);
+    expect(signals[0]?.aborted).toBe(true);
+    expect(sockets).toHaveLength(1);
+    client.stop();
+  });
+
+  it("aborts priming immediately when hidden without opening a socket later", async () => {
+    const { client, sockets, signals } = setup();
+    client.start();
+    await vi.advanceTimersByTimeAsync(0);
+    client.stop();
+    expect(signals[0]?.aborted).toBe(true);
+    await vi.advanceTimersByTimeAsync(2_000);
+    expect(sockets).toHaveLength(0);
+  });
+
+  it.each([
+    ["landscape_left", 0.7, 1 - 0.2],
+    ["landscape_right", 1 - 0.7, 0.2],
+  ])("maps %s touches back to the raw iOS framebuffer", async (orientation, x, y) => {
+    const { client, sockets } = setup();
+    client.start();
+    await vi.advanceTimersByTimeAsync(2_000);
+    const socket = sockets[0]!;
+    const json = new TextEncoder().encode(JSON.stringify({ width: 400, height: 800, orientation }));
+    const packet = new Uint8Array(1 + json.length);
+    packet[0] = 0x82;
+    packet.set(json, 1);
+    socket.onmessage?.({ data: packet.buffer });
+    client.sendTouch("begin", 0.2, 0.7);
+    const sent = socket.send.mock.calls[0]![0] as Uint8Array;
+    expect(JSON.parse(new TextDecoder().decode(sent.subarray(1)))).toEqual({
+      type: "begin",
+      x,
+      y,
+    });
+    client.stop();
+  });
+});
+
+class MjpegImage extends EventTarget {
+  naturalWidth = 0;
+  naturalHeight = 0;
+  src = "";
+  removeAttribute(name: string) {
+    if (name === "src") {
+      this.src = "";
+      this.naturalWidth = 0;
+      this.naturalHeight = 0;
+    }
+  }
+}
+
+function recoveryFixture(platform: "ios" | "android" = "ios", preferMjpeg = true) {
+  vi.useFakeTimers();
+  const sockets: Socket[] = [];
+  class Socket {
+    static OPEN = 1;
+    readyState = 1;
+    binaryType = "";
+    onopen: (() => void) | null = null;
+    onmessage: ((event: { data: ArrayBuffer | string }) => void) | null = null;
+    onclose: ((event: { code: number; reason: string }) => void) | null = null;
+    send = vi.fn();
+    close = vi.fn();
+    constructor() {
+      sockets.push(this);
+    }
+  }
+  vi.stubGlobal("WebSocket", Socket);
+  const decoders: Decoder[] = [];
+  class Decoder {
+    static isConfigSupported = vi.fn(async () => ({ supported: true }));
+    state = "unconfigured";
+    decodeQueueSize = 0;
+    configure() {
+      this.state = "configured";
+    }
+    close() {
+      this.state = "closed";
+    }
+    decode() {}
+    readonly callbacks: { output: (frame: VideoFrame) => void; error: () => void };
+    constructor(callbacks: { output: (frame: VideoFrame) => void; error: () => void }) {
+      this.callbacks = callbacks;
+      decoders.push(this);
+    }
+  }
+  vi.stubGlobal("VideoDecoder", Decoder);
+  vi.stubGlobal("EncodedVideoChunk", vi.fn());
+  const videoBodies: ReadableStreamDefaultController<Uint8Array>[] = [];
+  const signals: AbortSignal[] = [];
+  const fetch = vi.fn((url: string, init: RequestInit) => {
+    const signal = init.signal!;
+    signals.push(signal);
+    if (!url.includes("stream.avcc")) return Promise.resolve(new Response("prime"));
+    return Promise.resolve(
+      new Response(
+        new ReadableStream<Uint8Array>({
+          start(body) {
+            videoBodies.push(body);
+            signal.addEventListener("abort", () => body.error(new Error("aborted")), {
+              once: true,
+            });
+          },
+        }),
+      ),
+    );
+  });
+  vi.stubGlobal("fetch", fetch);
+  const events = {
+    onStatus: vi.fn(),
+    onScreen: vi.fn(),
+    onUnauthorized: vi.fn(),
+    onMjpegFallback: vi.fn(),
+    onInputConnected: vi.fn(),
+  };
+  const drawImage = vi.fn();
+  const image = new MjpegImage();
+  const client = createDeviceStreamClient(
+    {
+      platform,
+      preferMjpeg,
+      deviceId: "test-device",
+      access: {
+        httpBase: "https://test/api/device-hub",
+        wsBase: "wss://test/api/device-hub",
+        credentials: true,
+        query: {},
+      },
+    },
+    { getContext: () => ({ drawImage }) } as unknown as HTMLCanvasElement,
+    events,
+  );
+  client.setMjpegImage(image as unknown as HTMLImageElement);
+  const imageReady = () => {
+    image.naturalWidth = 400;
+    image.naturalHeight = 800;
+    image.dispatchEvent(new Event("load"));
+  };
+  const decodedFrame = (index = decoders.length - 1) => {
+    const close = vi.fn();
+    decoders[index]!.callbacks.output({
+      displayWidth: 400,
+      displayHeight: 800,
+      close,
+    } as unknown as VideoFrame);
+    return close;
+  };
+  const sps = new Uint8Array([0, 0, 0, 1, 0x67, 0x64, 0, 0x1f, 0, 0, 1, 0x65]).buffer;
+  return {
+    client,
+    events,
+    image,
+    imageReady,
+    sockets,
+    signals,
+    fetch,
+    videoBodies,
+    decoders,
+    Decoder,
+    drawImage,
+    decodedFrame,
+    sps,
+  };
+}
+
+describe("shared device stream readiness and recovery", () => {
+  afterEach(() => {
+    vi.useRealTimers();
+    vi.unstubAllGlobals();
+  });
+
+  it("waits for actual MJPEG dimensions without requiring a multipart load event", async () => {
+    const { client, events, image } = recoveryFixture();
+    client.start();
+    await vi.advanceTimersByTimeAsync(0);
+    expect(image.src).toContain("stream.mjpeg");
+    expect(events.onStatus).not.toHaveBeenCalledWith("streaming", undefined);
+    image.naturalWidth = 400;
+    image.naturalHeight = 800;
+    await vi.advanceTimersByTimeAsync(250);
+    expect(events.onStatus).toHaveBeenLastCalledWith("streaming", undefined);
+    expect(vi.getTimerCount()).toBe(0);
+    await vi.advanceTimersByTimeAsync(20_000);
+    expect(events.onStatus).toHaveBeenLastCalledWith("streaming", undefined);
+    client.stop();
+  });
+
+  it("observes a web image attached after MJPEG fallback has already begun", async () => {
+    const { client, image, imageReady, events } = recoveryFixture();
+    client.setMjpegImage(null);
+    client.start();
+    expect(image.src).toBe("");
+    await vi.advanceTimersByTimeAsync(1000);
+    client.setMjpegImage(image as unknown as HTMLImageElement);
+    imageReady();
+    expect(events.onStatus).toHaveBeenLastCalledWith("streaming", undefined);
+    client.stop();
+    expect(image.src).toBe("");
+    expect(vi.getTimerCount()).toBe(0);
+  });
+
+  it("stops input and video on an image error without treating it as expired credentials", async () => {
+    const { client, image, imageReady, sockets, events } = recoveryFixture();
+    client.start();
+    await vi.advanceTimersByTimeAsync(0);
+    sockets[0]!.onopen?.();
+    imageReady();
+    image.dispatchEvent(new Event("error"));
+    expect(events.onStatus).toHaveBeenLastCalledWith("error", expect.stringContaining("Reconnect"));
+    expect(events.onInputConnected).toHaveBeenLastCalledWith(false, expect.any(String));
+    expect(events.onUnauthorized).not.toHaveBeenCalled();
+    expect(sockets[0]!.close).toHaveBeenCalledOnce();
+    expect(image.src).toBe("");
+    client.pressButton("home");
+    expect(sockets[0]!.send).toHaveBeenCalledTimes(1);
+    expect(vi.getTimerCount()).toBe(0);
+  });
+
+  it.each([
+    ["ios", true],
+    ["ios", false],
+    ["android", false],
+  ] as const)(
+    "bounds missing first frames for %s with preferMjpeg=%s",
+    async (platform, preferMjpeg) => {
+      const { client, events, signals, sockets, image } = recoveryFixture(platform, preferMjpeg);
+      client.start();
+      await vi.advanceTimersByTimeAsync(14_999);
+      expect(events.onStatus.mock.calls.some(([status]) => status === "error")).toBe(false);
+      await vi.advanceTimersByTimeAsync(1);
+      expect(events.onStatus).toHaveBeenLastCalledWith(
+        "error",
+        expect.stringContaining("No video"),
+      );
+      expect(events.onInputConnected).toHaveBeenLastCalledWith(false, expect.any(String));
+      expect(signals.every((signal) => signal.aborted)).toBe(true);
+      expect(sockets[0]!.close).toHaveBeenCalledOnce();
+      expect(image.src).toBe("");
+      expect(vi.getTimerCount()).toBe(0);
+    },
+  );
+
+  it("does not extend the first-frame deadline each time a socket reconnects", async () => {
+    const { client, sockets, events } = recoveryFixture("android");
+    client.start();
+    sockets[0]!.onopen?.();
+    sockets[0]!.onclose?.({ code: 1000, reason: "restart" });
+    await vi.advanceTimersByTimeAsync(14_999);
+    sockets[1]!.onopen?.();
+    await vi.advanceTimersByTimeAsync(1);
+    expect(events.onStatus).toHaveBeenLastCalledWith("error", expect.stringContaining("No video"));
+    expect(sockets[1]!.close).toHaveBeenCalledOnce();
+    expect(vi.getTimerCount()).toBe(0);
+  });
+
+  it("gives a manual restart a fresh deadline and ignores queued image events from its old binding", async () => {
+    const { client, image, events } = recoveryFixture();
+    const listeners: EventListener[] = [];
+    const add = image.addEventListener.bind(image);
+    vi.spyOn(image, "addEventListener").mockImplementation((name, callback, options) => {
+      if (typeof callback === "function") listeners.push(callback);
+      add(name, callback, options);
+    });
+    client.start();
+    await vi.advanceTimersByTimeAsync(10_000);
+    client.stop();
+    client.start();
+    events.onStatus.mockClear();
+    for (const listener of listeners.slice(0, 2)) listener(new Event("error"));
+    await vi.advanceTimersByTimeAsync(10_000);
+    expect(events.onStatus).not.toHaveBeenCalled();
+    const replacement = new MjpegImage();
+    client.setMjpegImage(replacement as unknown as HTMLImageElement);
+    replacement.naturalWidth = 400;
+    replacement.naturalHeight = 800;
+    replacement.dispatchEvent(new Event("load"));
+    expect(events.onStatus).toHaveBeenLastCalledWith("streaming", undefined);
+    client.stop();
+    expect(vi.getTimerCount()).toBe(0);
+  });
+
+  it("falls back from unsupported iOS H.264 without publishing a terminal error", async () => {
+    const { client, videoBodies, Decoder, events, imageReady } = recoveryFixture("ios", false);
+    Decoder.isConfigSupported.mockResolvedValue({ supported: false });
+    client.start();
+    await vi.advanceTimersByTimeAsync(0);
+    videoBodies[0]!.enqueue(new Uint8Array(envelope(1, [1, 0x64, 0, 0x1f])));
+    await vi.advanceTimersByTimeAsync(0);
+    expect(events.onMjpegFallback).toHaveBeenCalledOnce();
+    expect(events.onStatus.mock.calls.some(([status]) => status === "error")).toBe(false);
+    imageReady();
+    expect(events.onStatus).toHaveBeenLastCalledWith("streaming", undefined);
+    client.stop();
+  });
+
+  it("publishes a terminal unsupported-profile error for Android and closes its socket", async () => {
+    const { client, sockets, sps, Decoder, events } = recoveryFixture("android");
+    Decoder.isConfigSupported.mockResolvedValue({ supported: false });
+    client.start();
+    sockets[0]!.onmessage?.({ data: sps });
+    await vi.advanceTimersByTimeAsync(0);
+    expect(events.onStatus).toHaveBeenLastCalledWith(
+      "error",
+      expect.stringContaining("cannot decode"),
+    );
+    expect(sockets[0]!.close).toHaveBeenCalledOnce();
+    expect(events.onMjpegFallback).not.toHaveBeenCalled();
+    expect(vi.getTimerCount()).toBe(0);
+  });
+
+  it("waits for decoded Android output and bounds a rotation that never produces another frame", async () => {
+    const { client, sockets, sps, events, decodedFrame, drawImage } = recoveryFixture("android");
+    client.start();
+    sockets[0]!.onmessage?.({ data: sps });
+    await vi.advanceTimersByTimeAsync(0);
+    expect(events.onStatus.mock.calls.some(([status]) => status === "streaming")).toBe(false);
+    expect(decodedFrame()).toHaveBeenCalledOnce();
+    expect(drawImage).toHaveBeenCalledOnce();
+    expect(events.onStatus).toHaveBeenLastCalledWith("streaming", undefined);
+    sockets[0]!.onmessage?.({ data: JSON.stringify({ type: "video-session" }) });
+    await vi.advanceTimersByTimeAsync(15_000);
+    expect(events.onStatus).toHaveBeenLastCalledWith("error", expect.stringContaining("No video"));
+    expect(vi.getTimerCount()).toBe(0);
+  });
+
+  it("discards decoder support results and output from a previous Android socket", async () => {
+    const { client, sockets, sps, events, Decoder, decoders, decodedFrame, drawImage } =
+      recoveryFixture("android");
+    let resolveSupport!: (support: { supported: boolean }) => void;
+    Decoder.isConfigSupported.mockImplementationOnce(
+      () =>
+        new Promise((resolve) => {
+          resolveSupport = resolve;
+        }),
+    );
+    client.start();
+    sockets[0]!.onmessage?.({ data: sps });
+    client.stop();
+    client.start();
+    resolveSupport({ supported: true });
+    await vi.advanceTimersByTimeAsync(0);
+    expect(decoders).toHaveLength(0);
+    sockets[1]!.onmessage?.({ data: sps });
+    await vi.advanceTimersByTimeAsync(0);
+    client.stop();
+    client.start();
+    events.onStatus.mockClear();
+    expect(decodedFrame()).toHaveBeenCalledOnce();
+    expect(drawImage).not.toHaveBeenCalled();
+    expect(events.onStatus).not.toHaveBeenCalled();
+    client.stop();
+  });
+
+  it("ignores an old AVCC response rejected after a new attempt is connected", async () => {
+    const { client, fetch, events } = recoveryFixture("ios", false);
+    let resolveResponse!: (response: Response) => void;
+    fetch.mockImplementationOnce(() => Promise.resolve(new Response("prime")));
+    fetch.mockImplementationOnce(
+      () =>
+        new Promise((resolve) => {
+          resolveResponse = resolve;
+        }),
+    );
+    client.start();
+    await vi.advanceTimersByTimeAsync(0);
+    client.stop();
+    client.start();
+    await vi.advanceTimersByTimeAsync(0);
+    events.onStatus.mockClear();
+    resolveResponse(new Response(null, { status: 401 }));
+    await vi.advanceTimersByTimeAsync(0);
+    expect(events.onUnauthorized).not.toHaveBeenCalled();
+    expect(events.onStatus).not.toHaveBeenCalled();
+    client.stop();
+    expect(vi.getTimerCount()).toBe(0);
+  });
+
+  it("closes a delayed JPEG seed from a stopped AVCC attempt without painting it", async () => {
+    const { client, videoBodies, drawImage, events } = recoveryFixture("ios", false);
+    let resolveBitmap!: (bitmap: ImageBitmap) => void;
+    vi.stubGlobal(
+      "createImageBitmap",
+      () =>
+        new Promise((resolve) => {
+          resolveBitmap = resolve;
+        }),
+    );
+    client.start();
+    await vi.advanceTimersByTimeAsync(0);
+    videoBodies[0]!.enqueue(new Uint8Array(envelope(4, [1])));
+    await vi.advanceTimersByTimeAsync(0);
+    client.stop();
+    client.start();
+    events.onStatus.mockClear();
+    const close = vi.fn();
+    resolveBitmap({ width: 400, height: 800, close } as unknown as ImageBitmap);
+    await vi.advanceTimersByTimeAsync(0);
+    expect(close).toHaveBeenCalledOnce();
+    expect(drawImage).not.toHaveBeenCalled();
+    expect(events.onStatus).not.toHaveBeenCalled();
+    client.stop();
+  });
+});
+
+it("reports a stalled AVCC body after its initial image instead of leaving a frozen streaming state", async () => {
+  const { client, videoBodies, events, signals } = recoveryFixture("ios", false);
+  const close = vi.fn();
+  vi.stubGlobal("createImageBitmap", () => Promise.resolve({ width: 400, height: 800, close }));
+  try {
+    client.start();
+    await vi.advanceTimersByTimeAsync(0);
+    videoBodies[0]!.enqueue(new Uint8Array(envelope(4, [1])));
+    await vi.advanceTimersByTimeAsync(0);
+    expect(events.onStatus).toHaveBeenLastCalledWith("streaming", undefined);
+    await vi.advanceTimersByTimeAsync(15_000);
+    expect(events.onStatus).toHaveBeenLastCalledWith(
+      "error",
+      expect.stringContaining("stopped receiving video"),
+    );
+    expect(signals.every((signal) => signal.aborted)).toBe(true);
+    expect(vi.getTimerCount()).toBe(0);
+  } finally {
+    client.stop();
+    vi.useRealTimers();
+    vi.unstubAllGlobals();
+  }
+});
diff --git a/packages/client-runtime/src/device/stream.ts b/packages/client-runtime/src/device/stream.ts
index 02aa46c67e1d..9275f7be464b 100644
--- a/packages/client-runtime/src/device/stream.ts
+++ b/packages/client-runtime/src/device/stream.ts
@@ -37,8 +37,8 @@ export interface DeviceStreamEvents {
   readonly onUnauthorized: () => void;
   /**
    * H.264 cannot be decoded here (no WebCodecs, or the simulator's profile is
-   * unsupported); the owner should show this MJPEG URL in an `<img>` instead of
-   * the canvas.
+   * unsupported); the owner should show an `<img>` instead of the canvas
+   * and attach it with `setMjpegImage` so the client can observe real frames.
    */
   readonly onMjpegFallback: (url: string) => void;
   /** Whether touches and keys can currently reach the device. */
@@ -56,6 +56,8 @@ export interface DeviceStreamTarget {
 export type DeviceHardwareButton = "home" | "back" | "recents" | "power" | "appSwitcher";
 
 const RETRY_DELAY_MS = 1_000;
+const FIRST_FRAME_TIMEOUT_MS = 15_000;
+const MJPEG_FRAME_CHECK_MS = 250;
 const FRAME_DURATION_US = 16_667;
 const SEMU_MAGIC = 0x53454d55;
 const SEMU_HEADER_BYTES = 16;
@@ -205,6 +207,11 @@ export class AvccDemuxer {
 export interface DeviceStreamClient {
   readonly start: () => void;
   readonly stop: () => void;
+  /**
+   * Own the displayed MJPEG image's source and frame/error observation.
+   * `stop()` detaches it; attach a fresh image for each restart.
+   */
+  readonly setMjpegImage: (image: HTMLImageElement | null) => void;
   /** Normalized 0..1 coordinates in the displayed frame. */
   readonly sendTouch: (phase: "begin" | "move" | "end", x: number, y: number) => void;
   readonly sendKey: (event: KeyboardEvent, phase: "down" | "up") => void;
@@ -298,19 +305,99 @@ export function createDeviceStreamClient(
   let firstFrame = false;
   let configuring = false;
   let mjpeg = false;
+  let generation = 0;
+  let decoderEpoch = 0;
+  let frameTimer: ReturnType<typeof setTimeout> | null = null;
+  let videoReadTimer: ReturnType<typeof setTimeout> | null = null;
+  let mjpegImage: HTMLImageElement | null = null;
+  let releaseImage: (() => void) | null = null;
 
   const mjpegUrl = () => httpUrl(`/helper/${device}/stream.mjpeg`);
 
+  const setStatus = (status: DeviceStreamStatus, detail?: string) => {
+    if (!stopped) events.onStatus(status, detail);
+  };
+
+  const clearFrameTimer = () => {
+    if (frameTimer !== null) clearTimeout(frameTimer);
+    frameTimer = null;
+  };
+
+  const fail = (detail: string) => {
+    if (stopped) return;
+    stop();
+    events.onInputConnected(false, detail);
+    events.onStatus("error", detail);
+  };
+
+  const connecting = (detail?: string) => {
+    firstFrame = false;
+    if (frameTimer === null) {
+      frameTimer = setTimeout(
+        () => fail("No video received from the device. Reconnect to try again."),
+        FIRST_FRAME_TIMEOUT_MS,
+      );
+    }
+    setStatus("connecting", detail);
+  };
+
+  const frameReceived = () => {
+    if (firstFrame) return;
+    firstFrame = true;
+    clearFrameTimer();
+    setStatus("streaming");
+  };
+
+  const observeMjpegImage = () => {
+    releaseImage?.();
+    releaseImage = null;
+    const image = mjpegImage;
+    if (!image || stopped || !mjpeg) return;
+    let timer: ReturnType<typeof setTimeout> | null = null;
+    let released = false;
+    const check = () => {
+      if (released || stopped) return;
+      if (timer !== null) clearTimeout(timer);
+      timer = null;
+      if (image.naturalWidth > 0 && image.naturalHeight > 0) frameReceived();
+      else {
+        // Multipart images may not emit load until the response ends. Stop checking after the first frame.
+        timer = setTimeout(check, MJPEG_FRAME_CHECK_MS);
+      }
+    };
+    const error = () => {
+      if (!released) fail("Could not receive the device stream. Reconnect to try again.");
+    };
+    image.addEventListener("load", check);
+    image.addEventListener("error", error);
+    releaseImage = () => {
+      released = true;
+      if (timer !== null) clearTimeout(timer);
+      image.removeEventListener("load", check);
+      image.removeEventListener("error", error);
+      image.removeAttribute("src");
+    };
+    image.src = mjpegUrl();
+    check();
+  };
+
+  const setMjpegImage = (image: HTMLImageElement | null) => {
+    if (mjpegImage === image) return;
+    releaseImage?.();
+    releaseImage = null;
+    mjpegImage = image;
+    observeMjpegImage();
+  };
+
   const fallBackToMjpeg = () => {
     if (stopped || mjpeg) return;
     mjpeg = true;
+    controller?.abort();
+    controller = null;
     closeDecoder();
+    connecting();
     events.onMjpegFallback(mjpegUrl());
-    setStatus("streaming");
-  };
-
-  const setStatus = (status: DeviceStreamStatus, detail?: string) => {
-    if (!stopped) events.onStatus(status, detail);
+    if (!releaseImage) observeMjpegImage();
   };
 
   const paint = (source: CanvasImageSource, width: number, height: number) => {
@@ -323,14 +410,14 @@ export function createDeviceStreamClient(
         events.onScreen(screen);
       }
     }
-    canvas.getContext("2d")?.drawImage(source, 0, 0, width, height);
-    if (!firstFrame) {
-      firstFrame = true;
-      setStatus("streaming");
-    }
+    const context = canvas.getContext("2d");
+    if (!context) return fail("Could not display the device stream. Reconnect to try again.");
+    context.drawImage(source, 0, 0, width, height);
+    frameReceived();
   };
 
   const closeDecoder = () => {
+    decoderEpoch++;
     try {
       videoDecoder?.close();
     } catch {
@@ -340,40 +427,51 @@ export function createDeviceStreamClient(
     awaitingKeyframe = true;
   };
 
-  const makeDecoder = () =>
-    new VideoDecoder({
+  const recoverDecoder = () => {
+    if (platform === "ios") fallBackToMjpeg();
+    else {
+      closeDecoder();
+      connecting("Video decoder restarted.");
+      requestKeyframe();
+    }
+  };
+
+  const makeDecoder = () => {
+    const decoder = new VideoDecoder({
       output: (frame) => {
         try {
-          paint(frame, frame.displayWidth, frame.displayHeight);
+          if (videoDecoder === decoder) paint(frame, frame.displayWidth, frame.displayHeight);
         } finally {
           frame.close();
         }
       },
       error: () => {
-        closeDecoder();
-        requestKeyframe();
+        if (stopped || videoDecoder !== decoder) return;
+        recoverDecoder();
       },
     });
+    return decoder;
+  };
 
-  /**
-   * Resolves false when this browser cannot decode the stream's profile
-   * (simulators encode High 5.1, which headless and some hardware decoders
-   * reject). iOS then falls back to MJPEG; Android has no MJPEG.
-   */
-  const configureDecoder = async (config: VideoDecoderConfig): Promise<boolean> => {
+  /** iOS can fall back to MJPEG when the stream's H.264 profile is unsupported. */
+  const configureDecoder = async (
+    config: VideoDecoderConfig,
+    isCurrent: () => boolean,
+  ): Promise<boolean> => {
+    const epoch = decoderEpoch;
     const full: VideoDecoderConfig = { ...config, optimizeForLatency: true };
     const support = await VideoDecoder.isConfigSupported(full).catch(() => ({ supported: false }));
-    if (stopped) return false;
+    if (!isCurrent() || epoch !== decoderEpoch) return false;
     if (!support.supported) {
-      setStatus("error", `This browser cannot decode ${config.codec}.`);
+      if (platform === "android") fail(`This browser cannot decode ${config.codec}.`);
       return false;
     }
-    if (!videoDecoder || videoDecoder.state === "closed") videoDecoder = makeDecoder();
     try {
+      if (!videoDecoder || videoDecoder.state === "closed") videoDecoder = makeDecoder();
       videoDecoder.configure(full);
       return true;
     } catch (cause) {
-      setStatus("error", `Video decoder: ${(cause as Error).message}`);
+      if (platform === "android") fail(`Video decoder: ${(cause as Error).message}`);
       return false;
     }
   };
@@ -385,8 +483,7 @@ export function createDeviceStreamClient(
       awaitingKeyframe = false;
     }
     if (videoDecoder.decodeQueueSize > SOFT_DECODE_QUEUE) {
-      closeDecoder();
-      requestKeyframe();
+      recoverDecoder();
       return;
     }
     try {
@@ -399,8 +496,7 @@ export function createDeviceStreamClient(
       );
       timestamp += FRAME_DURATION_US;
     } catch {
-      closeDecoder();
-      requestKeyframe();
+      recoverDecoder();
     }
   };
 
@@ -423,42 +519,66 @@ export function createDeviceStreamClient(
 
   const handleUnauthorized = () => {
     stop();
+    events.onInputConnected(false);
     events.onUnauthorized();
   };
 
   // iOS video: fetch the AVCC body and demux into the decoder.
   const readIosVideo = async () => {
     const demuxer = new AvccDemuxer();
-    controller = new AbortController();
+    const session = generation;
+    const videoController = new AbortController();
+    controller = videoController;
+    const isCurrent = () => !stopped && generation === session && controller === videoController;
+    let retryDetail: string | undefined;
     try {
       const response = await fetch(httpUrl(`/helper/${device}/stream.avcc`), {
-        signal: controller.signal,
+        signal: videoController.signal,
         credentials: access.credentials ? "include" : "same-origin",
       });
+      if (!isCurrent()) return;
       if (response.status === 401 || response.status === 403) return handleUnauthorized();
       if (!response.ok || !response.body) throw new Error(`stream ${response.status}`);
       const reader = response.body.getReader();
       for (;;) {
-        const { done, value } = await reader.read();
-        if (done || stopped) break;
+        // An AVCC body can stay open after its helper stops producing frames.
+        const timer = setTimeout(() => {
+          if (isCurrent()) fail("Device stream stopped receiving video. Reconnect to try again.");
+        }, FIRST_FRAME_TIMEOUT_MS);
+        videoReadTimer = timer;
+        let result: ReadableStreamReadResult<Uint8Array>;
+        try {
+          result = await reader.read();
+        } finally {
+          clearTimeout(timer);
+          if (videoReadTimer === timer) videoReadTimer = null;
+        }
+        const { done, value } = result;
+        if (!isCurrent()) return;
+        if (done) break;
         for (const chunk of demuxer.push(value)) {
           switch (chunk.type) {
             case "seed":
               void createImageBitmap(new Blob([chunk.payload as BlobPart], { type: "image/jpeg" }))
                 .then((bitmap) => {
-                  paint(bitmap, bitmap.width, bitmap.height);
-                  bitmap.close();
+                  try {
+                    if (isCurrent()) paint(bitmap, bitmap.width, bitmap.height);
+                  } finally {
+                    bitmap.close();
+                  }
                 })
                 .catch(() => {});
               break;
             case "description": {
               awaitingKeyframe = true;
-              const configured = await configureDecoder({
-                codec: avcCodecString(chunk.payload),
-                description: chunk.payload,
-              });
+              const configured = await configureDecoder(
+                { codec: avcCodecString(chunk.payload), description: chunk.payload },
+                isCurrent,
+              );
+              if (!isCurrent()) return;
               if (!configured) {
                 await reader.cancel().catch(() => {});
+                if (!isCurrent()) return;
                 fallBackToMjpeg();
                 return;
               }
@@ -472,10 +592,16 @@ export function createDeviceStreamClient(
         }
       }
     } catch (cause) {
-      if (stopped) return;
-      setStatus("connecting", (cause as Error).message);
+      if (!isCurrent()) return;
+      retryDetail = (cause as Error).message;
+    }
+    if (isCurrent()) {
+      controller = null;
+      videoController.abort();
+      closeDecoder();
+      connecting(retryDetail);
+      scheduleRetry("video", () => void readIosVideo());
     }
-    if (!stopped) scheduleRetry("video", () => void readIosVideo());
   };
 
   /**
@@ -483,7 +609,7 @@ export function createDeviceStreamClient(
    * screen capture is running, and the AVCC stream does not reliably start
    * it. Touching the MJPEG endpoint does; one aborted request is enough.
    */
-  const primeIosHelper = async () => {
+  const primeIosHelper = async (session: number) => {
     const controller = new AbortController();
     primeController = controller;
     const timeout = setTimeout(() => controller.abort(), 2_000);
@@ -492,6 +618,7 @@ export function createDeviceStreamClient(
         signal: controller.signal,
         credentials: access.credentials ? "include" : "same-origin",
       });
+      if (stopped || generation !== session) return;
       if (response.status === 401 || response.status === 403) return handleUnauthorized();
       await response.body?.getReader().read();
     } catch {
@@ -506,16 +633,19 @@ export function createDeviceStreamClient(
   // iOS input socket; also carries the screen config the helper pushes.
   const connectIosInput = async () => {
     if (stopped) return;
-    await primeIosHelper();
-    if (stopped) return;
+    const session = generation;
+    await primeIosHelper(session);
+    if (stopped || generation !== session) return;
     const ws = new WebSocket(wsUrl(`/helper/ws?device=${device}`));
     ws.binaryType = "arraybuffer";
     socket = ws;
     ws.onopen = () => {
+      if (stopped || socket !== ws) return;
       ws.send(taggedJson(IOS_MSG_HARDWARE_KEYBOARD, { enabled: false }));
       events.onInputConnected(true);
     };
     ws.onmessage = (event) => {
+      if (stopped || socket !== ws) return;
       if (!(event.data instanceof ArrayBuffer)) return;
       const bytes = new Uint8Array(event.data);
       if (bytes.length < 1 || bytes[0] !== IOS_TAG_SCREEN_CONFIG) return;
@@ -556,14 +686,21 @@ export function createDeviceStreamClient(
     ws.binaryType = "arraybuffer";
     socket = ws;
     ws.onopen = () => {
-      setStatus("connecting");
+      if (stopped || socket !== ws) return;
+      connecting();
       events.onInputConnected(true);
     };
     ws.onmessage = (event) => {
+      if (stopped || socket !== ws) return;
       if (typeof event.data === "string") {
         // The encoder restarts at a new size when the device rotates; the
         // next keyframe carries a fresh SPS, so the decoder is rebuilt from it.
-        if (isVideoSessionMessage(event.data)) closeDecoder();
+        if (isVideoSessionMessage(event.data)) {
+          closeDecoder();
+          configuring = false;
+          connecting();
+          requestKeyframe();
+        }
         return;
       }
       if (!(event.data instanceof ArrayBuffer)) return;
@@ -576,11 +713,16 @@ export function createDeviceStreamClient(
       if (scanned?.sps && (!videoDecoder || videoDecoder.state !== "configured")) {
         if (configuring) return;
         configuring = true;
-        void configureDecoder({ codec: avcCodecString(scanned.sps) }).then((configured) => {
-          configuring = false;
-          awaitingKeyframe = true;
-          if (configured) requestKeyframe();
-        });
+        const epoch = decoderEpoch;
+        const isCurrent = () => !stopped && socket === ws;
+        void configureDecoder({ codec: avcCodecString(scanned.sps) }, isCurrent).then(
+          (configured) => {
+            if (!isCurrent() || epoch !== decoderEpoch) return;
+            configuring = false;
+            awaitingKeyframe = true;
+            if (configured) requestKeyframe();
+          },
+        );
         return;
       }
       if (!videoDecoder || videoDecoder.state !== "configured") {
@@ -601,7 +743,8 @@ export function createDeviceStreamClient(
         (event.code === 1006 && access.query.wsTicket)
       )
         return handleUnauthorized();
-      setStatus("connecting", event.reason || undefined);
+      configuring = false;
+      connecting(event.reason || undefined);
       scheduleRetry("input", connectAndroid);
     };
     ws.onerror = () => ws.close();
@@ -610,8 +753,9 @@ export function createDeviceStreamClient(
   const start = () => {
     if (!stopped) return;
     stopped = false;
-    firstFrame = false;
-    events.onStatus("connecting");
+    generation++;
+    configuring = false;
+    connecting();
     if (platform === "ios") {
       void connectIosInput();
       if (useWebCodecs) void readIosVideo();
@@ -619,27 +763,35 @@ export function createDeviceStreamClient(
     } else if (useWebCodecs) {
       connectAndroid();
     } else {
-      setStatus("error", "This browser cannot decode the Android stream (WebCodecs unavailable).");
+      fail("This browser cannot decode the Android stream (WebCodecs unavailable).");
     }
   };
 
   const stop = () => {
     if (stopped) return;
     stopped = true;
+    generation++;
     mjpeg = false;
+    clearFrameTimer();
+    if (videoReadTimer !== null) clearTimeout(videoReadTimer);
+    videoReadTimer = null;
+    releaseImage?.();
+    releaseImage = null;
+    mjpegImage = null;
     for (const timer of retryTimers.values()) clearTimeout(timer);
     retryTimers.clear();
     primeController?.abort();
     primeController = null;
     controller?.abort();
     controller = null;
-    socket?.close();
+    const discarded = socket;
     socket = null;
+    discarded?.close();
     closeDecoder();
   };
 
   const send = (payload: Uint8Array<ArrayBuffer> | string) => {
-    if (socket?.readyState === WebSocket.OPEN) socket.send(payload);
+    if (!stopped && socket?.readyState === WebSocket.OPEN) socket.send(payload);
   };
 
   const rawPoint = (x: number, y: number) => {
@@ -661,6 +813,7 @@ export function createDeviceStreamClient(
   return {
     start,
     stop,
+    setMjpegImage,
     sendTouch: (phase, x, y) => {
       if (platform === "ios") {
         send(taggedJson(IOS_MSG_TOUCH, { type: phase, ...rawPoint(x, y) }));
diff --git a/packages/contracts/src/ipc.ts b/packages/contracts/src/ipc.ts
index 7e738b97786b..c67ecd27c0e1 100644
--- a/packages/contracts/src/ipc.ts
+++ b/packages/contracts/src/ipc.ts
@@ -658,6 +658,30 @@ export interface DesktopPreviewPointerEvent {
   createdAt: string;
 }
 
+/** Recording decorations are forwarded separately from the captured page pixels. */
+export const DesktopPreviewRecordingInputSchema = Schema.Union([
+  Schema.Struct({
+    type: Schema.Literal("pointer"),
+    phase: Schema.Literals(["move", "down", "up", "click"]),
+    x: Schema.Finite,
+    y: Schema.Finite,
+    width: Schema.Finite.check(Schema.isGreaterThan(0)),
+    height: Schema.Finite.check(Schema.isGreaterThan(0)),
+  }),
+  Schema.Struct({
+    type: Schema.Literal("key"),
+    label: Schema.NullOr(Schema.String.check(Schema.isMaxLength(100))),
+    held: Schema.Boolean,
+    width: Schema.Finite.check(Schema.isGreaterThan(0)),
+  }),
+  Schema.Struct({ type: Schema.Literal("clear") }),
+]);
+export type DesktopPreviewRecordingInput = typeof DesktopPreviewRecordingInputSchema.Type;
+export interface DesktopPreviewRecordingInputEvent {
+  readonly tabId: string;
+  readonly input: DesktopPreviewRecordingInput;
+}
+
 /**
  * Static config a renderer needs to mount a preview `<webview>`. Returned
  * atomically by `DesktopPreviewBridge.getPreviewConfig()` so the renderer
@@ -1295,6 +1319,7 @@ export interface DesktopPreviewBridge {
     close: (tabId: string) => Promise<void>;
   };
   recording: {
+    onInput: (listener: (event: DesktopPreviewRecordingInputEvent) => void) => () => void;
     startScreencast: (tabId: string) => Promise<void>;
     stopScreencast: (tabId: string) => Promise<void>;
     save: (
diff --git a/packages/contracts/src/orchestration.ts b/packages/contracts/src/orchestration.ts
index 6ca7e25ca493..9a9ed05d4e6d 100644
--- a/packages/contracts/src/orchestration.ts
+++ b/packages/contracts/src/orchestration.ts
@@ -163,8 +163,9 @@ export const ProviderUserInputAnswers = Schema.Record(Schema.String, Schema.Unkn
 export type ProviderUserInputAnswers = typeof ProviderUserInputAnswers.Type;
 
 export const PROVIDER_SEND_TURN_MAX_INPUT_CHARS = 120_000;
-export const PROVIDER_SEND_TURN_MAX_ATTACHMENTS = 8;
+export const PROVIDER_SEND_TURN_MAX_ATTACHMENTS = 100;
 export const PROVIDER_SEND_TURN_MAX_IMAGE_BYTES = 10 * 1024 * 1024;
+const PROVIDER_SEND_TURN_MAX_TOTAL_IMAGE_BYTES = 80 * 1024 * 1024;
 export const PROVIDER_SEND_TURN_MAX_FILE_BYTES = 50 * 1024 * 1024;
 export const PROVIDER_SEND_TURN_SUPPORTED_IMAGE_MIME_TYPES = [
   "image/gif",
@@ -371,6 +372,25 @@ export const ChatAttachment = Schema.Union([
 ]);
 export type ChatAttachment = typeof ChatAttachment.Type;
 
+export function getProviderAttachmentLimitError(
+  attachments: ReadonlyArray<Pick<ChatAttachment, "type" | "mimeType" | "sizeBytes">>,
+): string | undefined {
+  if (attachments.length > PROVIDER_SEND_TURN_MAX_ATTACHMENTS) {
+    return `You can attach up to ${PROVIDER_SEND_TURN_MAX_ATTACHMENTS} files per message or question response.`;
+  }
+  const imageBytes = attachments.reduce(
+    (total, attachment) =>
+      total +
+      (attachment.type === "image" || isProviderSendTurnSupportedImageMimeType(attachment.mimeType)
+        ? attachment.sizeBytes
+        : 0),
+    0,
+  );
+  if (imageBytes > PROVIDER_SEND_TURN_MAX_TOTAL_IMAGE_BYTES) {
+    return "Images can total up to 80 MiB per message or question response. Use smaller images or send fewer at once.";
+  }
+}
+
 export const UserInputAttachments = Schema.Record(
   Schema.String,
   Schema.Array(Schema.Union([ChatImageAttachment, ChatFileAttachment])).pipe(
diff --git a/packages/contracts/src/provider.test.ts b/packages/contracts/src/provider.test.ts
index ba7ca63745b6..2c25977b7ed4 100644
--- a/packages/contracts/src/provider.test.ts
+++ b/packages/contracts/src/provider.test.ts
@@ -121,6 +121,57 @@ describe("ProviderSessionStartInput", () => {
 });
 
 describe("ProviderSendTurnInput", () => {
+  it("accepts 100 attachments and rejects 101", () => {
+    const attachments = Array.from({ length: 100 }, (_, index) => ({
+      type: "image",
+      id: `image-${index}`,
+      name: "image.png",
+      mimeType: "image/png",
+      sizeBytes: 1,
+    }));
+    expect(
+      decodeProviderSendTurnInput({ threadId: "thread-1", attachments }).attachments,
+    ).toHaveLength(100);
+    expect(() =>
+      decodeProviderSendTurnInput({
+        threadId: "thread-1",
+        attachments: [...attachments, attachments[0]],
+      }),
+    ).toThrow();
+  });
+
+  it.each(["image", "file"])(
+    "caps total image bytes for %s attachments without charging videos",
+    (type) => {
+      const image = {
+        type,
+        id: "image",
+        name: "image.png",
+        mimeType: "image/png",
+        sizeBytes: 10 * 1024 * 1024,
+      };
+      const video = {
+        type: "file",
+        id: "video",
+        name: "video.mp4",
+        mimeType: "video/mp4",
+        sizeBytes: 50 * 1024 * 1024,
+      };
+      expect(
+        decodeProviderSendTurnInput({
+          threadId: "thread-1",
+          attachments: [...Array.from({ length: 8 }, () => image), video],
+        }).attachments,
+      ).toHaveLength(9);
+      expect(() =>
+        decodeProviderSendTurnInput({
+          threadId: "thread-1",
+          attachments: [...Array.from({ length: 8 }, () => image), { ...image, sizeBytes: 1 }],
+        }),
+      ).toThrow(/80 MiB/);
+    },
+  );
+
   it("accepts codex modelSelection", () => {
     const parsed = decodeProviderSendTurnInput({
       threadId: "thread-1",
diff --git a/packages/contracts/src/provider.ts b/packages/contracts/src/provider.ts
index df91839e8520..8753ac2cf8e8 100644
--- a/packages/contracts/src/provider.ts
+++ b/packages/contracts/src/provider.ts
@@ -11,7 +11,7 @@ import {
 import {
   ChatAttachment,
   ModelSelection,
-  PROVIDER_SEND_TURN_MAX_ATTACHMENTS,
+  getProviderAttachmentLimitError,
   PROVIDER_SEND_TURN_MAX_INPUT_CHARS,
   ProviderApprovalDecision,
   ProviderApprovalPolicy,
@@ -75,7 +75,9 @@ export const ProviderSendTurnInput = Schema.Struct({
     TrimmedNonEmptyString.check(Schema.isMaxLength(PROVIDER_SEND_TURN_MAX_INPUT_CHARS)),
   ),
   attachments: Schema.optional(
-    Schema.Array(ChatAttachment).check(Schema.isMaxLength(PROVIDER_SEND_TURN_MAX_ATTACHMENTS)),
+    Schema.Array(ChatAttachment).check(
+      Schema.makeFilter((attachments) => getProviderAttachmentLimitError(attachments) ?? true),
+    ),
   ),
   modelSelection: Schema.optional(ModelSelection),
   interactionMode: Schema.optional(ProviderInteractionMode),
diff --git a/packages/contracts/src/pullRequest.ts b/packages/contracts/src/pullRequest.ts
index b146810a8aec..1a3c2d50b209 100644
--- a/packages/contracts/src/pullRequest.ts
+++ b/packages/contracts/src/pullRequest.ts
@@ -525,6 +525,8 @@ export const PullRequestListEntry = Schema.Struct({
   deletions: NonNegativeInt,
   createdAt: IsoDateTime,
   updatedAt: IsoDateTime,
+  /** Server epoch milliseconds when the provider read started; preserved on cache hits. */
+  observedAt: Schema.optional(Schema.Finite),
   viewerReviewRequested: Schema.Boolean,
   labels: Schema.Array(PullRequestLabel),
   /** Absent where the host does not summarise its reviews, which is every host but GitHub. */
@@ -736,6 +738,8 @@ export const PullRequestSummary = Schema.Struct({
   closedAt: Schema.optional(Schema.NullOr(Schema.String)),
   mergedAt: Schema.optional(Schema.NullOr(Schema.String)),
   updatedAt: IsoDateTime,
+  /** Server epoch milliseconds when the provider read started; preserved on cache hits. */
+  observedAt: Schema.optional(Schema.Finite),
   author: Schema.optional(Schema.NullOr(PullRequestActor)),
   additions: Schema.optional(NonNegativeInt),
   deletions: Schema.optional(NonNegativeInt),
@@ -841,6 +845,8 @@ export const PullRequestDetail = Schema.Struct({
   baseBranch: TrimmedNonEmptyString,
   createdAt: IsoDateTime,
   updatedAt: IsoDateTime,
+  /** Server epoch milliseconds when the provider read started; preserved on cache hits. */
+  observedAt: Schema.optional(Schema.Finite),
   mergedAt: Schema.NullOr(IsoDateTime),
   closedAt: Schema.NullOr(IsoDateTime),
   reviewers: Schema.Array(PullRequestActor),
diff --git a/packages/contracts/src/settings.test.ts b/packages/contracts/src/settings.test.ts
index 3a9fc35c4c82..ff54b6c0aa53 100644
--- a/packages/contracts/src/settings.test.ts
+++ b/packages/contracts/src/settings.test.ts
@@ -471,6 +471,23 @@ describe("ClientSettings browser recording frame rate", () => {
   });
 });
 
+describe("ClientSettings recording input overlays", () => {
+  it("defaults both overlays off and accepts independent opt-ins", () => {
+    const settings = decodeClientSettings({});
+    expect(settings.browserRecordingShowKeyPresses).toBe(false);
+    expect(settings.browserRecordingShowMousePresses).toBe(false);
+    expect(
+      decodeClientSettingsPatch({
+        browserRecordingShowKeyPresses: true,
+        browserRecordingShowMousePresses: false,
+      }),
+    ).toMatchObject({
+      browserRecordingShowKeyPresses: true,
+      browserRecordingShowMousePresses: false,
+    });
+  });
+});
+
 describe("ClientSettings glass opacity", () => {
   it("defaults to a readable translucent surface", () => {
     expect(decodeClientSettings({}).glassOpacity).toBe(80);
diff --git a/packages/contracts/src/settings.ts b/packages/contracts/src/settings.ts
index 42e91a76ecaf..73a2a2517d05 100644
--- a/packages/contracts/src/settings.ts
+++ b/packages/contracts/src/settings.ts
@@ -317,6 +317,12 @@ export const ClientSettingsSchema = Schema.Struct({
   browserRecordingFrameRate: BrowserRecordingFrameRate.pipe(
     Schema.withDecodingDefault(Effect.succeed(DEFAULT_BROWSER_RECORDING_FRAME_RATE)),
   ),
+  browserRecordingShowKeyPresses: Schema.Boolean.pipe(
+    Schema.withDecodingDefault(Effect.succeed(false)),
+  ),
+  browserRecordingShowMousePresses: Schema.Boolean.pipe(
+    Schema.withDecodingDefault(Effect.succeed(false)),
+  ),
   /**
    * Where links clicked in a thread (chat markdown, terminal output) open.
    * Only the desktop app has an in-app browser, so other clients ignore "app".
@@ -1525,6 +1531,8 @@ export const ClientSettingsPatch = Schema.Struct({
   browserDefaultZoomFactor: Schema.optionalKey(PreviewZoomFactor),
   browserDefaultAppearance: Schema.optionalKey(PreviewAppearancePreference),
   browserRecordingFrameRate: Schema.optionalKey(BrowserRecordingFrameRate),
+  browserRecordingShowKeyPresses: Schema.optionalKey(Schema.Boolean),
+  browserRecordingShowMousePresses: Schema.optionalKey(Schema.Boolean),
   browserLinkTarget: Schema.optionalKey(BrowserLinkTarget),
   browserAutoShowFloatingPreview: Schema.optionalKey(Schema.Boolean),
   browserProfiles: Schema.optionalKey(Schema.Array(BrowserProfile)),
diff --git a/packages/shared/src/observability.ts b/packages/shared/src/observability.ts
index 62121399853b..6393ed0879db 100644
--- a/packages/shared/src/observability.ts
+++ b/packages/shared/src/observability.ts
@@ -16,6 +16,25 @@ export type OtlpProtocol = typeof OtlpProtocol.Type;
 export const otlpSerializationLayer = (protocol: OtlpProtocol) =>
   protocol === "http/protobuf" ? OtlpSerialization.layerProtobuf : OtlpSerialization.layerJson;
 
+/**
+ * How one signal is exported, once whichever source named that signal's
+ * endpoint has been resolved. Held per signal rather than per process, so a
+ * wire format or a credential cannot be paired by hand with an endpoint that
+ * came from somewhere else.
+ */
+export interface SignalExport {
+  readonly protocol: OtlpProtocol;
+  readonly headers: Readonly<Record<string, string>> | undefined;
+  readonly exportIntervalMs: number;
+}
+
+/** What T3 Code exports with when nothing configured a signal. */
+export const DEFAULT_SIGNAL_EXPORT: SignalExport = {
+  protocol: "http/json",
+  headers: undefined,
+  exportIntervalMs: 10_000,
+};
+
 const FLUSH_BUFFER_THRESHOLD = 256;
 const textEncoder = new TextEncoder();
 
diff --git a/third-party-licenses.config.json b/third-party-licenses.config.json
index 01955554adf6..5c7c35f13b46 100644
--- a/third-party-licenses.config.json
+++ b/third-party-licenses.config.json
@@ -62,7 +62,7 @@
       "license": "MIT",
       "name": "agent-device",
       "sourceUrl": "https://github.com/callstack/agent-device",
-      "version": "0.20.10",
+      "version": "0.21.7",
       "generatedNotices": [
         {
           "licenseId": "MIT",
@@ -76,7 +76,7 @@
       "license": "MIT AND Apache-2.0 AND BSD-3-Clause",
       "name": "expo-device-hub",
       "sourceUrl": "https://github.com/expo/expo-device-hub",
-      "version": "0.9.0",
+      "version": "0.10.1",
       "generatedNotices": [
         {
           "licenseId": "MIT",