@agent-native/core 0.114.6 → 0.114.8

package/corpus/templates/clips/desktop/src/lib/recorder.ts

@@ -80,6 +80,7 @@ import {
 } from "./pause-transition";
 import { reconcileProcessingBackup } from "./processing-backup-recovery";
 import { buildCaptureTitle, type CaptureTitleResult } from "./recording-title";
+import { prepareRewindRecordingStart } from "./rewind-recording-start";
 import { singleFlight } from "./single-flight";
 import {
   startTranscriptionCapture,
@@ -219,6 +220,61 @@ export interface StartParams {
   preAcquiredCameraStream?: MediaStream | null;
 }
 
+const REWIND_CLIP_ORIGINS_KEY = "clips.rewindClipOrigins.v1";
+
+export interface RewindClipOrigin {
+  recordingId: string;
+  startedAt: string;
+  includeMicrophone: boolean;
+  includeSystemAudio: boolean;
+  rememberedAt: string;
+}
+
+function readRewindClipOrigins(): Record<string, RewindClipOrigin> {
+  try {
+    const parsed = JSON.parse(
+      localStorage.getItem(REWIND_CLIP_ORIGINS_KEY) || "{}",
+    );
+    return parsed && typeof parsed === "object" ? parsed : {};
+  } catch {
+    return {};
+  }
+}
+
+function writeRewindClipOrigins(
+  origins: Record<string, RewindClipOrigin>,
+): void {
+  try {
+    localStorage.setItem(REWIND_CLIP_ORIGINS_KEY, JSON.stringify(origins));
+  } catch {
+    // Losing optional retrospective metadata must never cancel a live Clip.
+  }
+}
+
+function rememberRewindClipOrigin(origin: RewindClipOrigin): void {
+  const origins = readRewindClipOrigins();
+  origins[origin.recordingId] = origin;
+  const newest = Object.values(origins)
+    .sort((left, right) => right.rememberedAt.localeCompare(left.rememberedAt))
+    .slice(0, 50);
+  writeRewindClipOrigins(
+    Object.fromEntries(newest.map((entry) => [entry.recordingId, entry])),
+  );
+}
+
+export function getRewindClipOrigin(
+  recordingId: string,
+): RewindClipOrigin | null {
+  return readRewindClipOrigins()[recordingId] ?? null;
+}
+
+export function forgetRewindClipOrigin(recordingId: string): void {
+  const origins = readRewindClipOrigins();
+  if (!origins[recordingId]) return;
+  delete origins[recordingId];
+  writeRewindClipOrigins(origins);
+}
+
 export interface RecorderHandle {
   /** Stop the recording and resolve once the server has finalized. */
   stop(): Promise<RecorderStopResult>;
@@ -819,7 +875,7 @@ export function scheduleNativeBackupCleanupAfterProcessing(args: {
         timeoutMs: 12 * 60 * 1000,
       }),
     onReady: () =>
-      invoke("native_fullscreen_recording_dismiss_upload", {
+      invoke("native_fullscreen_recording_clear_upload", {
         recordingId: args.recordingId,
       }),
     onUnresolved: () => flagNativeBackupAfterProcessing(args.recordingId),
@@ -862,6 +918,38 @@ async function recoverAcceptedRecordingAfterFinalizeError({
   return "ready";
 }
 
+async function recoverAcceptedNativeRecordingAfterFinalizeError({
+  serverUrl,
+  recordingId,
+  authToken,
+}: {
+  serverUrl: string;
+  recordingId: string;
+  authToken?: string;
+}): Promise<"processing" | "ready" | null> {
+  const recovered = await waitForAcceptedRecordingAfterFinalizeError({
+    uploadUrl: chunkUrl(serverUrl, recordingId, 0, false),
+    recordingId,
+    authToken,
+    preferAuthenticated: true,
+  });
+  if (!recovered) return null;
+  if (recovered.status === "processing") {
+    scheduleNativeBackupCleanupAfterProcessing({
+      serverUrl,
+      recordingId,
+      authToken,
+    });
+    return "processing";
+  }
+  await invoke("native_fullscreen_recording_clear_upload", {
+    recordingId,
+  }).catch((error) => {
+    console.warn("[clips-recorder] native backup cleanup failed:", error);
+  });
+  return "ready";
+}
+
 export async function listBrowserRecordingBackups(): Promise<
   PendingBrowserRecordingUpload[]
 > {
@@ -1153,6 +1241,7 @@ async function createServerRecording(
     mimeType?: string;
     requestStreaming?: boolean;
     streamingUploadClient?: StreamingUploadClient;
+    visibility?: "public" | "private";
   },
 ) {
   const url = `${serverUrl.replace(/\/+$/, "")}/_agent-native/actions/create-recording`;
@@ -1176,6 +1265,7 @@ async function createServerRecording(
         hasCamera,
         hasAudio,
         spaceIds: [],
+        visibility: options?.visibility ?? "public",
         ...(options?.requestStreaming
           ? {
               requestStreaming: true,
@@ -1219,6 +1309,30 @@ async function createServerRecording(
   return { id: result.id, uploadMode };
 }
 
+export async function createPrivateAgentRewindRecording(
+  serverUrl: string,
+  hasAudio: boolean,
+  startedAt: string,
+): Promise<{ id: string; uploadMode: UploadMode }> {
+  return createServerRecording(
+    serverUrl,
+    false,
+    hasAudio,
+    {
+      title: `Rewind · ${new Date(startedAt).toLocaleString()}`,
+      titleSource: "context",
+      sourceAppName: "Clips Rewind",
+      sourceWindowTitle: null,
+    },
+    {
+      mimeType: NATIVE_FULLSCREEN_MIME_TYPE,
+      requestStreaming: true,
+      streamingUploadClient: "desktop-native",
+      visibility: "private",
+    },
+  );
+}
+
 interface ActiveWindowContext {
   appName?: string | null;
   windowTitle?: string | null;
@@ -1799,70 +1913,84 @@ async function selectRegionForRecording(): Promise<RegionCaptureRect> {
   }
 }
 
-function waitForCountdownEvent(timeoutMs = 4000): Promise<void> {
-  return new Promise((resolve, reject) => {
-    let timer: ReturnType<typeof setTimeout> | null = null;
-    const unlistens: UnlistenFn[] = [];
-    // Flag so that if the timeout fires BEFORE `listen()` resolves we can
-    // still call the unlisten the instant it arrives — otherwise the
-    // event handler closure stays registered for the life of the webview
-    // (leaks the `resolve` / `reject` closures + anything they pin).
-    let done = false;
-
-    const cleanup = () => {
-      if (timer) {
-        clearTimeout(timer);
-        timer = null;
-      }
-      for (const unlisten of unlistens.splice(0)) {
-        try {
-          unlisten();
-        } catch {
-          // ignore
-        }
-      }
-    };
-    const finish = (kind: "done" | "cancel") => {
-      if (done) return;
-      done = true;
-      cleanup();
-      if (kind === "cancel") {
-        reject(new CountdownCancelledError());
-      } else {
-        resolve();
-      }
-    };
-    const track = (listener: Promise<UnlistenFn>) => {
-      listener
-        .then((u) => {
-          if (done) {
-            try {
-              u();
-            } catch {
-              // ignore
-            }
-            return;
-          }
-          unlistens.push(u);
-        })
-        .catch((err) => {
-          if (done) return;
-          done = true;
-          cleanup();
-          reject(err);
-        });
-    };
+async function prepareCountdownEventWaiter(timeoutMs = 4000): Promise<{
+  event: Promise<string>;
+  cleanup: () => void;
+}> {
+  let resolveEvent!: (cause: string) => void;
+  let rejectEvent!: (error: Error) => void;
+  const event = new Promise<string>((resolve, reject) => {
+    resolveEvent = resolve;
+    rejectEvent = reject;
+  });
+  let timer: ReturnType<typeof setTimeout> | null = null;
+  const unlistens: UnlistenFn[] = [];
+  let done = false;
+  const onKeyDown = (keyboardEvent: KeyboardEvent) => {
+    if (keyboardEvent.key !== "Enter" && keyboardEvent.key !== "Escape") {
+      return;
+    }
+    keyboardEvent.preventDefault();
+    const cancelled = keyboardEvent.key === "Escape";
+    void emit(cancelled ? "clips:countdown-cancel" : "clips:countdown-done", {
+      cause: cancelled ? "escape" : "return",
+    });
+  };
+  // The parked popover deliberately keeps focus while the non-activating
+  // countdown is visible. Listen here as well as in the overlay/global-hotkey
+  // paths so Return is reliable even when macOS declines a bare global key.
+  window.addEventListener("keydown", onKeyDown);
 
-    track(listen("clips:countdown-done", () => finish("done")));
-    track(listen("clips:countdown-cancel", () => finish("cancel")));
+  const cleanup = () => {
+    window.removeEventListener("keydown", onKeyDown);
+    if (timer) {
+      clearTimeout(timer);
+      timer = null;
+    }
+    for (const unlisten of unlistens.splice(0)) {
+      try {
+        unlisten();
+      } catch {
+        // ignore
+      }
+    }
+  };
+  const finish = (kind: "done" | "cancel", cause = "unknown") => {
+    if (done) return;
+    done = true;
+    cleanup();
+    if (kind === "cancel") {
+      rejectEvent(new CountdownCancelledError());
+    } else {
+      resolveEvent(cause);
+    }
+  };
 
+  // Await both registrations before the countdown can become visible. A fast
+  // Return previously closed the overlay before these asynchronous listeners
+  // were ready, so the UI disappeared while the recorder waited for timeout.
+  const [doneUnlisten, cancelUnlisten] = await Promise.all([
+    listen<{ cause?: string }>("clips:countdown-done", (event) =>
+      finish("done", event.payload?.cause),
+    ),
+    listen<{ cause?: string }>("clips:countdown-cancel", (event) =>
+      finish("cancel", event.payload?.cause),
+    ),
+  ]);
+  if (done) {
+    doneUnlisten();
+    cancelUnlisten();
+  } else {
+    unlistens.push(doneUnlisten, cancelUnlisten);
     timer = setTimeout(() => {
       if (done) return;
       done = true;
       cleanup();
-      reject(new Error("timeout waiting for clips:countdown-done"));
+      rejectEvent(new Error("timeout waiting for clips:countdown-done"));
     }, timeoutMs);
-  });
+  }
+
+  return { event, cleanup };
 }
 
 async function showRegionGuidesForRecording(wantsScreen: boolean) {
@@ -1893,15 +2021,21 @@ async function runRecordingCountdown(wantsScreen: boolean) {
   // `audioCue.playBeforeCapture()` at the real capture-start (right before the
   // recorder/native capture is kicked off) so the beep lines up with the moment
   // recording actually begins — not one second early on the countdown's "1".
-  const countdownEvent = waitForCountdownEvent(COUNTDOWN_EVENT_TIMEOUT_MS);
+  const countdown = await prepareCountdownEventWaiter(
+    COUNTDOWN_EVENT_TIMEOUT_MS,
+  );
   await showRegionGuidesForRecording(wantsScreen);
+  let countdownGeneration: number;
   try {
-    await invoke("show_countdown");
+    countdownGeneration = await invoke<number>("show_countdown");
   } catch (err) {
     console.error("[clips-recorder] show_countdown failed:", err);
+    countdown.cleanup();
+    throw err;
   }
   try {
-    await countdownEvent;
+    const cause = await countdown.event;
+    console.log(`[rewind-latency] countdown completion cause=${cause}`);
   } catch (err) {
     if (isCountdownCancelledError(err)) {
       await invoke("hide_recording_chrome").catch(() => {});
@@ -1909,6 +2043,11 @@ async function runRecordingCountdown(wantsScreen: boolean) {
     }
     console.warn("[clips-recorder] countdown timed out — proceeding");
     return;
+  } finally {
+    countdown.cleanup();
+    await invoke("finish_countdown_shortcuts", {
+      generation: countdownGeneration,
+    }).catch(() => {});
   }
 }
 
@@ -2005,88 +2144,488 @@ function abortCreatedRecordingOnCountdownCancel(
     .catch(() => {});
 }
 
-async function startNativeFullscreenRecording(
+interface RewindClipBackendStatus {
+  compatibility: "compatible" | "not-compatible";
+  active: boolean;
+  paused: boolean;
+  retrospectiveSeconds: number;
+  sources: Array<"screen" | "system-audio" | "microphone" | "camera">;
+}
+
+interface RewindCaptureSuspensionLease {
+  leaseId: string | null;
+  suspendedRewind: boolean;
+}
+
+function acquireRewindCaptureSuspension(options: {
+  requiresScreen: boolean;
+  requiresMicrophone: boolean;
+}): Promise<RewindCaptureSuspensionLease> {
+  return invoke<RewindCaptureSuspensionLease>(
+    "rewind_capture_suspension_acquire",
+    options,
+  );
+}
+
+function captureSuspensionReleaser(
+  lease: RewindCaptureSuspensionLease,
+): () => Promise<void> {
+  let releasePromise: Promise<void> | null = null;
+  return () => {
+    if (!lease.leaseId) return Promise.resolve();
+    releasePromise ??= invoke("rewind_capture_suspension_release", {
+      leaseId: lease.leaseId,
+    });
+    return releasePromise;
+  };
+}
+
+function recorderWithCaptureSuspension(
+  handle: RecorderHandle,
+  release: () => Promise<void>,
+): RecorderHandle {
+  // Mutate the same handle object instead of returning a separate wrapper.
+  // Toolbar listeners close over `handle` inside each recorder backend; using
+  // the same object ensures those event-driven stop/cancel paths also release
+  // the suspension after the physical recorder has actually torn down.
+  const stop = handle.stop.bind(handle);
+  const cancel = handle.cancel.bind(handle);
+  let stopPromise: Promise<RecorderStopResult> | null = null;
+  let cancelPromise: Promise<void> | null = null;
+  handle.stop = async () => {
+    if (stopPromise) return stopPromise;
+    if (cancelPromise) {
+      await cancelPromise;
+      throw new Error("Recording was already cancelled");
+    }
+    stopPromise = (async () => {
+      try {
+        return await stop();
+      } finally {
+        await release();
+      }
+    })();
+    return stopPromise;
+  };
+  handle.cancel = async () => {
+    if (cancelPromise) return cancelPromise;
+    if (stopPromise) {
+      await stopPromise;
+      return;
+    }
+    cancelPromise = (async () => {
+      try {
+        await cancel();
+      } finally {
+        await release();
+      }
+    })();
+    return cancelPromise;
+  };
+  return handle;
+}
+
+/**
+ * Reuse the active local Rewind producer for a plain full-screen Clip. A
+ * `null` result is a pre-countdown compatibility decision; after countdown
+ * zero we fail closed instead of silently starting an ordinary second stream.
+ */
+async function tryStartRewindFullscreenRecording(
   params: StartParams,
   wantsCamera: boolean,
   wantsAudio: boolean,
   audioCue: AudioCue,
-): Promise<RecorderHandle> {
-  console.log("[clips-recorder] using native full-screen capture");
+): Promise<RecorderHandle | null> {
+  if (
+    params.mode === "camera" ||
+    (wantsCamera && params.localRecordingMode === "separate") ||
+    (params.source ?? "window") !== "full-screen"
+  ) {
+    return null;
+  }
+  const status = await invoke<RewindClipBackendStatus>(
+    "rewind_clip_status",
+  ).catch(() => null);
+  if (!status || status.compatibility !== "compatible" || status.active) {
+    return null;
+  }
+
   const localRecordingMode = params.localRecordingMode ?? "off";
   const localOnly = localRecordingMode !== "off";
-  const localFolderName = localOnly ? createLocalRecordingFolderName() : "";
-  const streamCleanups: Array<() => void> = [audioCue.cleanup];
-  let id = "";
+  const folderName = localOnly ? createLocalRecordingFolderName() : "";
+  const includeMic = wantsAudio;
+  const includeSystemAudio = params.systemAudioOn !== false;
+  const hasAudio = includeMic || includeSystemAudio;
+  let id = folderName;
   let uploadMode: UploadMode = "buffered";
-  let localCameraExport: LocalRecordingExportHandle | null = null;
-  let localCameraStream: MediaStream | null = null;
-  let localOwnsCameraStream = false;
-  let bubbleCaptureExcluded = false;
-  let captureRegion: RegionCaptureRect | null = null;
-  let transcriptionCapture: TranscriptionCapture | null = null;
-  // Timer baseline for the toolbar/pill elapsed clock. Stamped the instant
-  // native capture goes live (right after the start invoke resolves), not after
-  // the region-guide / transcription spin-up — which would push the displayed
-  // clock and the toolbar-enable behind the real recording start.
-  let startedAt = 0;
-  let nativeTranscriptFailureSaved = false;
-  const wantsSystemAudio = params.systemAudioOn !== false;
-  const wantsRecordedAudio = wantsAudio || wantsSystemAudio;
-  let micDeviceLabel: string | null = params.micLabel || null;
-  const saveTranscriptFailure = async (
-    failureReason: string,
-  ): Promise<boolean> => {
-    if (!wantsRecordedAudio || nativeTranscriptFailureSaved || !id)
-      return false;
-    nativeTranscriptFailureSaved = true;
-    return saveRecordingTranscriptFailure(
-      params.serverUrl,
-      id,
-      failureReason,
-      params.authToken,
-    );
-  };
-  const startNativeTranscriptionBeforeRecording = async () => {
-    if (localOnly || !wantsRecordedAudio || transcriptionCapture) return;
-    transcriptionCapture = await startTranscriptionCapture(
-      {
-        deviceId: params.micId,
-        label: micDeviceLabel,
+  await invoke("show_preparing");
+  const recordingPromise = localOnly
+    ? Promise.resolve<{ id: string; uploadMode: UploadMode }>({
+        id: folderName,
+        uploadMode: "buffered",
+      })
+    : (async () => {
+        const title = await captureTitleForRecording({
+          mode: params.mode,
+          source: params.source,
+        });
+        return createServerRecording(
+          params.serverUrl,
+          wantsCamera,
+          hasAudio,
+          title,
+          {
+            mimeType: NATIVE_FULLSCREEN_MIME_TYPE,
+            // Hosted storage requires the resumable upload session created by
+            // the streaming contract even though Rewind materializes one final
+            // MP4 at Stop. Without this, finalization reaches the server only to
+            // fail with 409 after the local encode has completed.
+            requestStreaming: true,
+            streamingUploadClient: "desktop-native",
+          },
+        );
+      })();
+  try {
+    const recording = await prepareRewindRecordingStart({
+      async prepare() {
+        const preparedRecording = await recordingPromise;
+        id = preparedRecording.id;
+        uploadMode = preparedRecording.uploadMode ?? "buffered";
+        await invoke<RewindClipBackendStatus>("rewind_clip_prepare", {
+          artifactLabel: id,
+          serverUrl: localOnly ? null : params.serverUrl,
+          recordingId: localOnly ? null : id,
+          authToken: localOnly ? null : (params.authToken ?? ""),
+          cookie: localOnly ? null : (params.cookie ?? ""),
+          includeMic,
+          includeSystemAudio,
+          hasCamera: wantsCamera,
+        });
+        return preparedRecording;
       },
-      wantsSystemAudio,
-      { voiceProcessing: false },
-    );
-    if (
-      wantsRecordedAudio &&
-      !transcriptionCapture &&
-      shouldSaveLocalTranscriptionStartupFailure()
-    ) {
-      void saveTranscriptFailure(
-        "macOS Speech recognition could not start for this recording. Check Speech Recognition, System Audio, and Microphone permissions, then retry transcription.",
+      async countdown() {
+        console.log("[rewind-latency] countdown shown after preparation");
+        await invoke("hide_preparing").catch(() => {});
+        await runRecordingCountdown(true);
+        console.log("[rewind-latency] countdown completed");
+      },
+      async activate(preparedRecording) {
+        const activationStarted = performance.now();
+        await invoke<RewindClipBackendStatus>("rewind_clip_start");
+        console.log(
+          `[rewind-latency] countdown completion to start acknowledgement ${Math.round(performance.now() - activationStarted)}ms`,
+        );
+        return preparedRecording;
+      },
+      onActivated() {
+        // The capture boundary must never wait for an audible affordance.
+        void audioCue.playBeforeCapture();
+      },
+    });
+    id = recording.id;
+    const originalStartedAt = new Date().toISOString();
+    if (!localOnly) {
+      rememberRewindClipOrigin({
+        recordingId: id,
+        startedAt: originalStartedAt,
+        includeMicrophone: includeMic,
+        includeSystemAudio,
+        rememberedAt: originalStartedAt,
+      });
+    }
+  } catch (err) {
+    await invoke("hide_preparing").catch(() => {});
+    if (id) forgetRewindClipOrigin(id);
+    await invoke("rewind_clip_cancel").catch(() => {});
+    audioCue.cleanup();
+    if (!localOnly) {
+      abortCreatedRecordingOnCountdownCancel(
+        err,
+        recordingPromise,
+        params.serverUrl,
       );
     }
-  };
-
-  try {
-    await invoke("park_popover_offscreen").catch(() => {});
-    emit("clips:popover-visible", false).catch(() => {});
-
-    if (params.source === "region") {
-      captureRegion = await selectRegionForRecording();
-      // Frame the selected area now so it stays visible through the countdown
-      // and the whole recording. hide_recording_chrome / hide_overlays tear it
-      // down on stop, cancel, and the error paths below.
-      await showRegionRecordBorder(captureRegion);
+    if (!localOnly && id) {
+      await abortRecordingUpload(
+        params.serverUrl,
+        id,
+        err instanceof Error ? err.message : String(err),
+      );
     }
+    throw err;
+  }
 
-    if (localOnly && localRecordingMode === "separate" && wantsCamera) {
-      localCameraStream =
-        params.preAcquiredCameraStream ??
-        (await getCameraStreamWithFallback(params.cameraId));
-      localOwnsCameraStream =
-        localCameraStream !== params.preAcquiredCameraStream;
-      localCameraExport = await prepareLocalRecordingExport(
-        [
+  let stopped = false;
+  let stopPromise: Promise<RecorderStopResult> | null = null;
+  let cancelPromise: Promise<void> | null = null;
+  let stateUnlistens: UnlistenFn[] = [];
+  let tickHandle: ReturnType<typeof setInterval> | null = null;
+  let pausedAt: number | null = null;
+  let pauseRequestedAt: number | null = null;
+  let accumulatedPauseMs = 0;
+  const startedAt = Date.now();
+  let pauseQueue: PauseTransitionQueue | null = null;
+
+  const emitState = (
+    paused = pauseQueue?.getDesiredPaused() ?? pausedAt !== null,
+  ) => {
+    const now = Date.now();
+    const pauseStart = pausedAt ?? (paused ? pauseRequestedAt : null);
+    emit("clips:recorder-state", {
+      paused,
+      elapsedMs: Math.max(
+        0,
+        now -
+          startedAt -
+          accumulatedPauseMs -
+          (paused && pauseStart !== null ? now - pauseStart : 0),
+      ),
+    }).catch(() => {});
+  };
+  const cleanupUi = () => {
+    pauseQueue?.dispose();
+    if (tickHandle) window.clearInterval(tickHandle);
+    tickHandle = null;
+    stateUnlistens.forEach((unlisten) => unlisten());
+    stateUnlistens = [];
+  };
+
+  const handle: RecorderHandle = {
+    async stop() {
+      if (stopPromise) return stopPromise;
+      if (stopped) return { recordingId: id, viewUrl: `/r/${id}` };
+      stopPromise = (async () => {
+        stopped = true;
+        cleanupUi();
+        if (!localOnly) showFinalizingFeedback();
+        try {
+          if (localOnly) {
+            const savePromise = invoke<NativeFullscreenSaveResult>(
+              "rewind_clip_stop_and_save",
+              {
+                folderName,
+                fileRole: "desktop",
+                includeMic,
+                includeSystemAudio,
+              },
+            );
+            savePromise.catch(() => {});
+            await invoke("hide_recording_chrome").catch(() => {});
+            if (wantsCamera) await invoke("close_bubble").catch(() => {});
+            const saved = await savePromise;
+            return {
+              recordingId: saved.recordingId,
+              viewUrl: "",
+              localOnly: true,
+              localFolder: saved.folderPath,
+              localFiles: [saved.file],
+            };
+          }
+
+          const viewUrl = `/r/${id}`;
+          const stopStarted = performance.now();
+          const uploadPromise = invoke<NativeFullscreenUploadResult>(
+            "rewind_clip_stop_and_upload",
+            {
+              serverUrl: params.serverUrl,
+              recordingId: id,
+              authToken: params.authToken ?? "",
+              cookie: params.cookie ?? "",
+              uploadMode,
+              includeMic,
+              includeSystemAudio,
+              hasCamera: wantsCamera,
+            },
+          );
+          console.log(
+            `[rewind-latency] stop command dispatched in ${Math.round(performance.now() - stopStarted)}ms`,
+          );
+          uploadPromise.catch(() => {});
+          await invoke("hide_recording_chrome").catch(() => {});
+          if (wantsCamera) await invoke("close_bubble").catch(() => {});
+          await openNativeUploadUrl(
+            id,
+            `${params.serverUrl.replace(/\/+$/, "")}${viewUrl}`,
+          );
+          try {
+            const uploaded = await uploadPromise;
+            if (uploaded.verificationPending) {
+              scheduleNativeBackupCleanupAfterProcessing({
+                serverUrl: params.serverUrl,
+                recordingId: id,
+                authToken: params.authToken,
+              });
+            }
+            return { recordingId: uploaded.recordingId, viewUrl };
+          } catch (err) {
+            if (
+              await recoverAcceptedNativeRecordingAfterFinalizeError({
+                serverUrl: params.serverUrl,
+                recordingId: id,
+                authToken: params.authToken,
+              })
+            ) {
+              return { recordingId: id, viewUrl };
+            }
+            await abortRecordingUpload(
+              params.serverUrl,
+              id,
+              err instanceof Error ? err.message : String(err),
+            );
+            throw err;
+          }
+        } finally {
+          audioCue.cleanup();
+          await clearRecordingState();
+        }
+      })();
+      return stopPromise;
+    },
+    async cancel() {
+      if (cancelPromise) return cancelPromise;
+      if (stopped) return;
+      cancelPromise = (async () => {
+        stopped = true;
+        cleanupUi();
+        await invoke("rewind_clip_cancel").catch(() => {});
+        audioCue.cleanup();
+        await invoke("hide_overlays").catch(() => {});
+        await clearRecordingState();
+        if (!localOnly && id) {
+          forgetRewindClipOrigin(id);
+          await cleanupCancelledRemoteRecording(params.serverUrl, id).catch(
+            () => {},
+          );
+        }
+      })();
+      return cancelPromise;
+    },
+  };
+
+  pauseQueue = createPauseTransitionQueue({
+    apply: (paused) =>
+      invoke(paused ? "rewind_clip_pause" : "rewind_clip_resume"),
+    onRequested(paused) {
+      if (paused && pausedAt === null) pauseRequestedAt = Date.now();
+      emitState(paused);
+    },
+    onApplied(paused) {
+      if (paused) {
+        pausedAt = pauseRequestedAt ?? Date.now();
+      } else {
+        if (pausedAt !== null) accumulatedPauseMs += Date.now() - pausedAt;
+        pausedAt = null;
+      }
+      pauseRequestedAt = null;
+      emitState(paused);
+    },
+    onError(_err, _attemptedPaused) {
+      pauseRequestedAt = null;
+      emitState(pauseQueue?.getAppliedPaused() ?? pausedAt !== null);
+    },
+  });
+  stateUnlistens = await Promise.all([
+    listen("clips:recorder-pause", () => pauseQueue?.request(true)),
+    listen("clips:recorder-resume", () => pauseQueue?.request(false)),
+    listen("clips:recorder-stop", () => {
+      void handle.stop().catch((error) => {
+        console.error("[clips-recorder] Rewind handle.stop() threw:", error);
+      });
+    }),
+    listen("clips:recorder-cancel", () => {
+      void handle.cancel().catch((error) => {
+        console.error("[clips-recorder] Rewind handle.cancel() threw:", error);
+      });
+    }),
+  ]);
+  tickHandle = window.setInterval(emitState, 500);
+  emit("clips:toolbar-enabled", true).catch(() => {});
+  emitState();
+  return handle;
+}
+
+async function startNativeFullscreenRecording(
+  params: StartParams,
+  wantsCamera: boolean,
+  wantsAudio: boolean,
+  audioCue: AudioCue,
+): Promise<RecorderHandle> {
+  console.log("[clips-recorder] using native full-screen capture");
+  const localRecordingMode = params.localRecordingMode ?? "off";
+  const localOnly = localRecordingMode !== "off";
+  const localFolderName = localOnly ? createLocalRecordingFolderName() : "";
+  const streamCleanups: Array<() => void> = [audioCue.cleanup];
+  let id = "";
+  let uploadMode: UploadMode = "buffered";
+  let localCameraExport: LocalRecordingExportHandle | null = null;
+  let localCameraStream: MediaStream | null = null;
+  let localOwnsCameraStream = false;
+  let bubbleCaptureExcluded = false;
+  let captureRegion: RegionCaptureRect | null = null;
+  let transcriptionCapture: TranscriptionCapture | null = null;
+  // Timer baseline for the toolbar/pill elapsed clock. Stamped the instant
+  // native capture goes live (right after the start invoke resolves), not after
+  // the region-guide / transcription spin-up — which would push the displayed
+  // clock and the toolbar-enable behind the real recording start.
+  let startedAt = 0;
+  let nativeTranscriptFailureSaved = false;
+  const wantsSystemAudio = params.systemAudioOn !== false;
+  const wantsRecordedAudio = wantsAudio || wantsSystemAudio;
+  let micDeviceLabel: string | null = params.micLabel || null;
+  const saveTranscriptFailure = async (
+    failureReason: string,
+  ): Promise<boolean> => {
+    if (!wantsRecordedAudio || nativeTranscriptFailureSaved || !id)
+      return false;
+    nativeTranscriptFailureSaved = true;
+    return saveRecordingTranscriptFailure(
+      params.serverUrl,
+      id,
+      failureReason,
+      params.authToken,
+    );
+  };
+  const startNativeTranscriptionBeforeRecording = async () => {
+    if (localOnly || !wantsRecordedAudio || transcriptionCapture) return;
+    transcriptionCapture = await startTranscriptionCapture(
+      {
+        deviceId: params.micId,
+        label: micDeviceLabel,
+      },
+      wantsSystemAudio,
+      { voiceProcessing: false },
+    );
+    if (
+      wantsRecordedAudio &&
+      !transcriptionCapture &&
+      shouldSaveLocalTranscriptionStartupFailure()
+    ) {
+      void saveTranscriptFailure(
+        "macOS Speech recognition could not start for this recording. Check Speech Recognition, System Audio, and Microphone permissions, then retry transcription.",
+      );
+    }
+  };
+
+  try {
+    await invoke("park_popover_offscreen").catch(() => {});
+    emit("clips:popover-visible", false).catch(() => {});
+
+    if (params.source === "region") {
+      captureRegion = await selectRegionForRecording();
+      // Frame the selected area now so it stays visible through the countdown
+      // and the whole recording. hide_recording_chrome / hide_overlays tear it
+      // down on stop, cancel, and the error paths below.
+      await showRegionRecordBorder(captureRegion);
+    }
+
+    if (localOnly && localRecordingMode === "separate" && wantsCamera) {
+      localCameraStream =
+        params.preAcquiredCameraStream ??
+        (await getCameraStreamWithFallback(params.cameraId));
+      localOwnsCameraStream =
+        localCameraStream !== params.preAcquiredCameraStream;
+      localCameraExport = await prepareLocalRecordingExport(
+        [
           {
             role: "camera",
             stream: streamFromTracks(localCameraStream.getVideoTracks()),
@@ -2167,7 +2706,6 @@ async function startNativeFullscreenRecording(
       // Whisper startup with countdown + deferred SCK warm.
       const countdownPromise = runRecordingCountdown(true);
       id = localFolderName;
-      const transcriptionPromise = startNativeTranscriptionBeforeRecording();
       const warmPromise = (async () => {
         const warmStartedAt = Date.now();
         await warmMic(id);
@@ -2178,11 +2716,12 @@ async function startNativeFullscreenRecording(
       try {
         await Promise.all([
           countdownPromise,
-          transcriptionPromise,
-          warmPromise,
+          (async () => {
+            await warmPromise;
+            await startNativeTranscriptionBeforeRecording();
+          })(),
         ]);
       } catch (err) {
-        await transcriptionPromise.catch(() => {});
         throw err;
       }
     } else {
@@ -2191,9 +2730,6 @@ async function startNativeFullscreenRecording(
         source: params.source,
       });
       const countdownPromise = runRecordingCountdown(true);
-      // Kick Whisper off immediately (no recording id needed) so Skip no longer
-      // serializes create → Whisper → SCK warm on the critical path.
-      const transcriptionPromise = startNativeTranscriptionBeforeRecording();
       const recordingPromise = (async () => {
         const captureTitle = await captureTitlePromise;
         const createStartedAt = Date.now();
@@ -2229,7 +2765,7 @@ async function startNativeFullscreenRecording(
         startTranscription: async () => {
           const transcriptionStartedAt = Date.now();
           try {
-            await transcriptionPromise;
+            await startNativeTranscriptionBeforeRecording();
           } finally {
             console.log(
               `[clips-recorder] transcription warm durationMs=${Date.now() - transcriptionStartedAt}`,
@@ -2600,7 +3136,7 @@ async function startNativeFullscreenRecording(
             uploadResult = await uploadPromise;
           } catch (err) {
             if (
-              await recoverAcceptedRecordingAfterFinalizeError({
+              await recoverAcceptedNativeRecordingAfterFinalizeError({
                 serverUrl: params.serverUrl,
                 recordingId: id,
                 authToken: params.authToken,
@@ -2912,12 +3448,30 @@ async function startRecordingInner(
   });
 
   if (wantsScreen && shouldUseNativeFullscreenRecording(captureSource)) {
-    return startNativeFullscreenRecording(
+    const rewindRecorder = await tryStartRewindFullscreenRecording(
       params,
       wantsCamera,
       wantsAudio,
       audioCue,
     );
+    if (rewindRecorder) return rewindRecorder;
+    const suspension = await acquireRewindCaptureSuspension({
+      requiresScreen: true,
+      requiresMicrophone: wantsAudio,
+    });
+    const releaseSuspension = captureSuspensionReleaser(suspension);
+    try {
+      const recorder = await startNativeFullscreenRecording(
+        params,
+        wantsCamera,
+        wantsAudio,
+        audioCue,
+      );
+      return recorderWithCaptureSuspension(recorder, releaseSuspension);
+    } catch (err) {
+      await releaseSuspension();
+      throw err;
+    }
   }
 
   // 1. Acquire streams BEFORE the countdown so the user gets the permission
@@ -2951,6 +3505,15 @@ async function startRecordingInner(
   const streamCleanups: Array<() => void> = [audioCue.cleanup];
   const devSyntheticCapture = shouldUseDevSyntheticCapture();
 
+  // Queue the native suspension before dispatching any WebKit capture calls.
+  // `getDisplayMedia` must stay in this user-activation turn, so awaiting IPC
+  // first would make the OS picker fail. The command is initiated first and
+  // must resolve before we accept any acquired stream below.
+  const suspensionPromise = acquireRewindCaptureSuspension({
+    requiresScreen: wantsScreen,
+    requiresMicrophone: wantsAudio,
+  });
+
   const displayStreamPromise: Promise<MediaStream> | null = wantsScreen
     ? (() => {
         if (!devSyntheticCapture) {
@@ -2997,213 +3560,611 @@ async function startRecordingInner(
     ? getAudioStreamWithFallback(params.micId, params.micLabel)
     : null;
 
-  // Use allSettled so a single rejection (e.g. user cancels the macOS screen
-  // picker → `NotAllowedError`) doesn't leave the OTHER resolved streams
-  // orphaned with live tracks. If ANY of the three rejected, we stop every
-  // track that DID resolve, then re-throw the original error so the caller's
-  // catch still sees `NotAllowedError` / `AbortError` as before.
-  console.log("[clips-recorder] allSettled IN — streams dispatched");
-  const settled = await Promise.allSettled([
-    displayStreamPromise,
-    bubbleCameraStreamPromise,
-    audioStreamPromise,
-  ]);
-  console.log(
-    "[clips-recorder] allSettled OUT — settled statuses:",
-    settled.map((s) => s.status),
-  );
-  const firstRejectionIndex = settled.findIndex((s) => s.status === "rejected");
-  const firstRejection =
-    firstRejectionIndex >= 0
-      ? (settled[firstRejectionIndex] as PromiseRejectedResult)
-      : null;
-  if (firstRejection) {
-    const canUseSyntheticScreen =
-      devSyntheticCapture &&
-      wantsScreen &&
-      displayStreamPromise != null &&
-      firstRejectionIndex === 0;
-    if (!canUseSyntheticScreen) {
-      for (const s of settled) {
-        if (s.status === "fulfilled" && s.value) {
-          try {
-            s.value.getTracks().forEach((t) => t.stop());
-          } catch {
-            // ignore — best-effort cleanup
+  let captureSuspension: RewindCaptureSuspensionLease;
+  try {
+    captureSuspension = await suspensionPromise;
+  } catch (err) {
+    // A picker may already have resolved while IPC was in flight. Tear down
+    // every possible stream before surfacing the fail-closed suspension error.
+    const streams = await Promise.allSettled([
+      displayStreamPromise,
+      bubbleCameraStreamPromise,
+      audioStreamPromise,
+    ]);
+    streams.forEach((result) => {
+      if (result.status === "fulfilled") {
+        result.value?.getTracks().forEach((track) => track.stop());
+      }
+    });
+    throw err;
+  }
+  const releaseCaptureSuspension = captureSuspensionReleaser(captureSuspension);
+
+  try {
+    // Use allSettled so a single rejection (e.g. user cancels the macOS screen
+    // picker → `NotAllowedError`) doesn't leave the OTHER resolved streams
+    // orphaned with live tracks. If ANY of the three rejected, we stop every
+    // track that DID resolve, then re-throw the original error so the caller's
+    // catch still sees `NotAllowedError` / `AbortError` as before.
+    console.log("[clips-recorder] allSettled IN — streams dispatched");
+    const settled = await Promise.allSettled([
+      displayStreamPromise,
+      bubbleCameraStreamPromise,
+      audioStreamPromise,
+    ]);
+    console.log(
+      "[clips-recorder] allSettled OUT — settled statuses:",
+      settled.map((s) => s.status),
+    );
+    const firstRejectionIndex = settled.findIndex(
+      (s) => s.status === "rejected",
+    );
+    const firstRejection =
+      firstRejectionIndex >= 0
+        ? (settled[firstRejectionIndex] as PromiseRejectedResult)
+        : null;
+    if (firstRejection) {
+      const canUseSyntheticScreen =
+        devSyntheticCapture &&
+        wantsScreen &&
+        displayStreamPromise != null &&
+        firstRejectionIndex === 0;
+      if (!canUseSyntheticScreen) {
+        for (const s of settled) {
+          if (s.status === "fulfilled" && s.value) {
+            try {
+              s.value.getTracks().forEach((t) => t.stop());
+            } catch {
+              // ignore — best-effort cleanup
+            }
           }
         }
+        // NOTE: we do NOT stop `reusedCameraStream` tracks here. The popover
+        // owns the camera for the entire session (see top-of-file comment +
+        // `preAcquiredCameraStream` doc) — it keeps the stream alive so the
+        // bubble stays live while the user retries.
+        const rejErr = firstRejection.reason;
+        console.error(
+          "[clips-recorder] stream acquisition failed:",
+          (rejErr as { name?: string })?.name,
+          (rejErr as { message?: string })?.message,
+          rejErr,
+        );
+        throw firstRejection.reason;
       }
-      // NOTE: we do NOT stop `reusedCameraStream` tracks here. The popover
-      // owns the camera for the entire session (see top-of-file comment +
-      // `preAcquiredCameraStream` doc) — it keeps the stream alive so the
-      // bubble stays live while the user retries.
-      const rejErr = firstRejection.reason;
-      console.error(
-        "[clips-recorder] stream acquisition failed:",
-        (rejErr as { name?: string })?.name,
-        (rejErr as { message?: string })?.message,
-        rejErr,
+      console.warn(
+        "[clips-recorder] continuing with opt-in dev synthetic capture after stream acquisition failed:",
+        firstRejection.reason,
       );
-      throw firstRejection.reason;
     }
-    console.warn(
-      "[clips-recorder] continuing with opt-in dev synthetic capture after stream acquisition failed:",
-      firstRejection.reason,
-    );
-  }
-  let displayStream =
-    settled[0].status === "fulfilled"
-      ? (settled[0].value as MediaStream | null)
-      : null;
-  let freshlyAcquiredCameraStream =
-    settled[1].status === "fulfilled"
-      ? (settled[1].value as MediaStream | null)
-      : null;
-  let audioStream =
-    settled[2].status === "fulfilled"
-      ? (settled[2].value as MediaStream | null)
-      : null;
-  if (
-    firstRejection &&
-    firstRejectionIndex === 0 &&
-    devSyntheticCapture &&
-    wantsScreen &&
-    !displayStream
-  ) {
-    [displayStream, freshlyAcquiredCameraStream, audioStream].forEach((s) =>
-      s?.getTracks().forEach((track) => track.stop()),
-    );
-    const syntheticDisplay = createSyntheticScreenStream();
-    displayStream = syntheticDisplay.stream;
-    streamCleanups.push(syntheticDisplay.cleanup);
-    if (wantsAudio && !audioStream) {
-      const syntheticAudio = createSyntheticAudioStream();
-      if (syntheticAudio) {
-        audioStream = syntheticAudio.stream;
-        streamCleanups.push(syntheticAudio.cleanup);
+    let displayStream =
+      settled[0].status === "fulfilled"
+        ? (settled[0].value as MediaStream | null)
+        : null;
+    let freshlyAcquiredCameraStream =
+      settled[1].status === "fulfilled"
+        ? (settled[1].value as MediaStream | null)
+        : null;
+    let audioStream =
+      settled[2].status === "fulfilled"
+        ? (settled[2].value as MediaStream | null)
+        : null;
+    if (
+      firstRejection &&
+      firstRejectionIndex === 0 &&
+      devSyntheticCapture &&
+      wantsScreen &&
+      !displayStream
+    ) {
+      [displayStream, freshlyAcquiredCameraStream, audioStream].forEach((s) =>
+        s?.getTracks().forEach((track) => track.stop()),
+      );
+      const syntheticDisplay = createSyntheticScreenStream();
+      displayStream = syntheticDisplay.stream;
+      streamCleanups.push(syntheticDisplay.cleanup);
+      if (wantsAudio && !audioStream) {
+        const syntheticAudio = createSyntheticAudioStream();
+        if (syntheticAudio) {
+          audioStream = syntheticAudio.stream;
+          streamCleanups.push(syntheticAudio.cleanup);
+        }
       }
+      freshlyAcquiredCameraStream = null;
     }
-    freshlyAcquiredCameraStream = null;
-  }
-  // Reused (from preview) XOR freshly acquired — `bubbleCameraStreamPromise`
-  // was null when we reused, so only one of the two can be non-null.
-  const bubbleCameraStream =
-    reusedCameraStream ?? freshlyAcquiredCameraStream ?? null;
+    // Reused (from preview) XOR freshly acquired — `bubbleCameraStreamPromise`
+    // was null when we reused, so only one of the two can be non-null.
+    const bubbleCameraStream =
+      reusedCameraStream ?? freshlyAcquiredCameraStream ?? null;
 
-  if (displayStream) {
-    console.log(
-      "[clips-recorder] display media acquired",
-      displayStream.getTracks().map((t) => t.kind),
-    );
-  }
-  if (bubbleCameraStream) {
-    const vtrack = bubbleCameraStream.getVideoTracks()[0];
-    console.log("[clips-recorder] camera acquired", {
-      label: vtrack?.label,
-      readyState: vtrack?.readyState,
-      muted: vtrack?.muted,
-    });
-  }
-  if (audioStream) {
-    console.log(
-      "[clips-recorder] audioStream acquired",
-      audioStream.getAudioTracks().map((t) => ({
-        label: t.label,
-        readyState: t.readyState,
-      })),
+    if (displayStream) {
+      console.log(
+        "[clips-recorder] display media acquired",
+        displayStream.getTracks().map((t) => t.kind),
+      );
+    }
+    if (bubbleCameraStream) {
+      const vtrack = bubbleCameraStream.getVideoTracks()[0];
+      console.log("[clips-recorder] camera acquired", {
+        label: vtrack?.label,
+        readyState: vtrack?.readyState,
+        muted: vtrack?.muted,
+      });
+    }
+    if (audioStream) {
+      console.log(
+        "[clips-recorder] audioStream acquired",
+        audioStream.getAudioTracks().map((t) => ({
+          label: t.label,
+          readyState: t.readyState,
+        })),
+      );
+    }
+
+    await invoke("park_popover_offscreen").catch(() => {});
+    emit("clips:popover-visible", false).catch(() => {});
+    const captureTitle = await captureTitleForRecording({
+      mode: params.mode,
+      source: captureSource,
+    });
+    let transcriptionCapture: TranscriptionCapture | null = null;
+
+    const recordedScreenCameraStream =
+      localRecordingMode !== "separate" &&
+      params.mode === "screen-camera" &&
+      displayStream &&
+      bubbleCameraStream
+        ? createCameraCompositeStream({
+            displayStream,
+            cameraStream: bubbleCameraStream,
+            bubbleSizeRatio: bubbleSizeRatioForName(
+              await invoke<string>("load_bubble_size").catch(() => "small"),
+            ),
+          })
+        : null;
+    if (recordedScreenCameraStream) {
+      streamCleanups.push(recordedScreenCameraStream.cleanup);
+      console.log("[clips-recorder] compositing camera into recorded video");
+    }
+
+    // Choose the primary video track for MediaRecorder:
+    //   - screen mode             → display
+    //   - screen-camera mode      → composited display + camera
+    //   - camera mode             → camera
+    const primaryVideo =
+      recordedScreenCameraStream?.stream ??
+      displayStream ??
+      (params.mode === "camera" ? bubbleCameraStream : null);
+    if (!primaryVideo) throw new Error("No video stream available");
+
+    const combined = new MediaStream();
+    primaryVideo.getVideoTracks().forEach((t) => combined.addTrack(t));
+    // Mic + system audio (mixed when both present); see buildRecordingAudio.
+    const recordingAudio = buildRecordingAudio(
+      audioStream?.getAudioTracks() ?? [],
+      displayStream?.getAudioTracks() ?? [],
     );
-  }
+    streamCleanups.push(recordingAudio.cleanup);
+    recordingAudio.tracks.forEach((t) => combined.addTrack(t));
+
+    // The popover owns the camera stream whenever we reused its pre-acquired
+    // preview stream — its session effect decides when to close the stream +
+    // hide the bubble + stop the pump, so the recorder must NOT stop those
+    // tracks on stop/cancel. The rare exception is the fresh-acquire fallback
+    // (preview stream wasn't ready at record start, so we opened the camera
+    // ourselves above) — there we own the tracks and must stop them, or the
+    // camera + macOS recording indicator leak after the recording ends.
+    const popoverOwnsCamera = bubbleCameraStream === reusedCameraStream;
+
+    if (localRecordingMode !== "off") {
+      console.log("[clips-recorder] starting local-only recording", {
+        localRecordingMode,
+      });
+      const targets = localRecordingTargetsForMode({
+        localRecordingMode,
+        displayStream,
+        bubbleCameraStream,
+        recordingAudio,
+        combined,
+      });
 
-  await invoke("park_popover_offscreen").catch(() => {});
-  emit("clips:popover-visible", false).catch(() => {});
-  const captureTitle = await captureTitleForRecording({
-    mode: params.mode,
-    source: captureSource,
-  });
-  let transcriptionCapture: TranscriptionCapture | null = null;
+      const countdownPromise = runRecordingCountdown(wantsScreen);
+      const localExportPromise = prepareLocalRecordingExport(targets);
+      let localExport: Awaited<ReturnType<typeof prepareLocalRecordingExport>>;
+      try {
+        [, localExport] = await Promise.all([
+          countdownPromise,
+          localExportPromise,
+        ]);
+      } catch (err) {
+        [displayStream, audioStream].forEach((stream) =>
+          stream?.getTracks().forEach((track) => track.stop()),
+        );
+        streamCleanups.forEach((cleanup) => cleanup());
+        if (!popoverOwnsCamera) {
+          bubbleCameraStream?.getTracks().forEach((track) => track.stop());
+        }
+        throw err;
+      }
 
-  const recordedScreenCameraStream =
-    localRecordingMode !== "separate" &&
-    params.mode === "screen-camera" &&
-    displayStream &&
-    bubbleCameraStream
-      ? createCameraCompositeStream({
-          displayStream,
-          cameraStream: bubbleCameraStream,
-          bubbleSizeRatio: bubbleSizeRatioForName(
-            await invoke<string>("load_bubble_size").catch(() => "small"),
-          ),
-        })
-      : null;
-  if (recordedScreenCameraStream) {
-    streamCleanups.push(recordedScreenCameraStream.cleanup);
-    console.log("[clips-recorder] compositing camera into recorded video");
-  }
+      const id = `local-${Date.now().toString(36)}`;
+      // Stamped at the real capture start below — kept 0 until then so the tick
+      // never reports an elapsed time against a stale baseline (which showed the
+      // clock counting up and then resetting to 0 when start finally fired).
+      let startedAt = 0;
+      let pausedAt: number | null = null;
+      let accumulatedPauseMs = 0;
+      let stopped = false;
+      let stateUnlistens: UnlistenFn[] = [];
+      let tickHandle: ReturnType<typeof setInterval> | null = null;
+
+      function emitState(paused: boolean) {
+        const now = Date.now();
+        const pausedNowMs = paused && pausedAt ? now - pausedAt : 0;
+        const elapsedMs = now - startedAt - accumulatedPauseMs - pausedNowMs;
+        emit("clips:recorder-state", {
+          paused,
+          elapsedMs,
+        }).catch(() => {});
+      }
 
-  // Choose the primary video track for MediaRecorder:
-  //   - screen mode             → display
-  //   - screen-camera mode      → composited display + camera
-  //   - camera mode             → camera
-  const primaryVideo =
-    recordedScreenCameraStream?.stream ??
-    displayStream ??
-    (params.mode === "camera" ? bubbleCameraStream : null);
-  if (!primaryVideo) throw new Error("No video stream available");
-
-  const combined = new MediaStream();
-  primaryVideo.getVideoTracks().forEach((t) => combined.addTrack(t));
-  // Mic + system audio (mixed when both present); see buildRecordingAudio.
-  const recordingAudio = buildRecordingAudio(
-    audioStream?.getAudioTracks() ?? [],
-    displayStream?.getAudioTracks() ?? [],
-  );
-  streamCleanups.push(recordingAudio.cleanup);
-  recordingAudio.tracks.forEach((t) => combined.addTrack(t));
-
-  // The popover owns the camera stream whenever we reused its pre-acquired
-  // preview stream — its session effect decides when to close the stream +
-  // hide the bubble + stop the pump, so the recorder must NOT stop those
-  // tracks on stop/cancel. The rare exception is the fresh-acquire fallback
-  // (preview stream wasn't ready at record start, so we opened the camera
-  // ourselves above) — there we own the tracks and must stop them, or the
-  // camera + macOS recording indicator leak after the recording ends.
-  const popoverOwnsCamera = bubbleCameraStream === reusedCameraStream;
-
-  if (localRecordingMode !== "off") {
-    console.log("[clips-recorder] starting local-only recording", {
-      localRecordingMode,
-    });
-    const targets = localRecordingTargetsForMode({
-      localRecordingMode,
-      displayStream,
-      bubbleCameraStream,
-      recordingAudio,
-      combined,
-    });
+      const toolbarUnlistens = await Promise.all([
+        listen("clips:recorder-pause", () => {
+          localExport.pause();
+          pausedAt = Date.now();
+          emitState(true);
+        }),
+        listen("clips:recorder-resume", () => {
+          localExport.resume();
+          if (pausedAt) accumulatedPauseMs += Date.now() - pausedAt;
+          pausedAt = null;
+          emitState(false);
+        }),
+        listen("clips:recorder-stop", () => {
+          console.log("[clips-recorder] local stop event received");
+          handle.stop().catch((err) => {
+            console.error("[clips-recorder] local handle.stop() threw:", err);
+          });
+        }),
+        listen("clips:recorder-cancel", () => {
+          console.log("[clips-recorder] local cancel event received");
+          handle.cancel().catch((err) => {
+            console.error("[clips-recorder] local handle.cancel() threw:", err);
+          });
+        }),
+      ]);
+      stateUnlistens = toolbarUnlistens;
+
+      await showRegionGuidesForRecording(wantsScreen);
+      await audioCue.playBeforeCapture();
+      localExport.start(2_000);
+      startedAt = Date.now();
+      tickHandle = setInterval(() => emitState(pausedAt != null), 500);
+      emit("clips:toolbar-enabled", true).catch(() => {});
+      emitState(false);
+
+      const detachCombinedStream = () => {
+        try {
+          combined.getTracks().forEach((track) => combined.removeTrack(track));
+        } catch {
+          // ignore — best-effort
+        }
+        for (const target of targets) {
+          try {
+            target.stream
+              .getTracks()
+              .forEach((track) => target.stream.removeTrack(track));
+          } catch {
+            // ignore — best-effort
+          }
+        }
+      };
+
+      const stopOwnedStreams = () => {
+        [displayStream, audioStream].forEach((stream) =>
+          stream?.getTracks().forEach((track) => track.stop()),
+        );
+        streamCleanups.forEach((cleanup) => cleanup());
+        if (!popoverOwnsCamera) {
+          bubbleCameraStream?.getTracks().forEach((track) => track.stop());
+        }
+      };
+
+      const hideChrome = async () => {
+        await invoke("hide_recording_chrome").catch((err) =>
+          console.error(`[clips-recorder] hide_recording_chrome failed:`, err),
+        );
+      };
+
+      const handle: RecorderHandle = {
+        async stop() {
+          if (stopped) {
+            return {
+              recordingId: id,
+              viewUrl: "",
+              localOnly: true,
+              localFolder: localExport.folderPath,
+              localFiles: [],
+            };
+          }
+          stopped = true;
+          if (tickHandle) clearInterval(tickHandle);
+          stateUnlistens.forEach((unlisten) => unlisten());
+          stateUnlistens = [];
+          const durationMs = Math.max(
+            0,
+            Math.round(Date.now() - startedAt - accumulatedPauseMs),
+          );
+          let files: LocalExportedFile[] = [];
+          try {
+            files = await localExport.stop(durationMs);
+          } finally {
+            detachCombinedStream();
+            stopOwnedStreams();
+            await hideChrome();
+          }
+          return {
+            recordingId: id,
+            viewUrl: "",
+            localOnly: true,
+            localFolder: localExport.folderPath,
+            localFiles: files,
+          };
+        },
+
+        async cancel() {
+          if (stopped) return;
+          stopped = true;
+          if (tickHandle) clearInterval(tickHandle);
+          stateUnlistens.forEach((unlisten) => unlisten());
+          stateUnlistens = [];
+          await localExport.cancel();
+          detachCombinedStream();
+          stopOwnedStreams();
+          await hideChrome();
+        },
+      };
+
+      return recorderWithCaptureSuspension(handle, releaseCaptureSuspension);
+    }
 
+    const uploadPrimaryVideo = createUploadOptimizedVideoStream(primaryVideo);
+    streamCleanups.push(uploadPrimaryVideo.cleanup);
+
+    const uploadCombined = new MediaStream();
+    uploadPrimaryVideo.stream
+      .getVideoTracks()
+      .forEach((track) => uploadCombined.addTrack(track));
+    recordingAudio.tracks.forEach((track) => uploadCombined.addTrack(track));
+
+    // MIME type is resolved up front so create-recording can initialize the
+    // resumable session with the correct content type when the server supports
+    // streaming uploads.
+    const mimeCandidates = [
+      "video/webm;codecs=vp8,opus",
+      "video/webm;codecs=vp9,opus",
+      "video/webm",
+    ];
+    const mimeType =
+      mimeCandidates.find((m) => MediaRecorder.isTypeSupported(m)) ?? "";
+
+    // 2+3. Countdown + create-recording happen IN PARALLEL. The countdown is
+    // pure visual feedback — gating it on a network round-trip makes the
+    // 3-2-1 feel laggy after the user picks a screen. Kick both off and
+    // wait at the end before starting the MediaRecorder.
+    console.log(
+      "[clips-recorder] invoking show_countdown + createServerRecording",
+    );
     const countdownPromise = runRecordingCountdown(wantsScreen);
-    const localExportPromise = prepareLocalRecordingExport(targets);
-    let localExport: Awaited<ReturnType<typeof prepareLocalRecordingExport>>;
+    console.time("[clips-recorder] createServerRecording duration");
+    const recordingPromise = createServerRecording(
+      params.serverUrl,
+      wantsCamera,
+      recordingAudio.tracks.length > 0,
+      captureTitle,
+      { mimeType: mimeType || "video/webm", requestStreaming: true },
+    ).finally(() => {
+      console.timeEnd("[clips-recorder] createServerRecording duration");
+    });
+    console.log("[clips-recorder] awaiting countdown + createServerRecording");
+    let createRes: Awaited<ReturnType<typeof createServerRecording>>;
     try {
-      [, localExport] = await Promise.all([
-        countdownPromise,
-        localExportPromise,
-      ]);
+      [, createRes] = await Promise.all([countdownPromise, recordingPromise]);
     } catch (err) {
-      [displayStream, audioStream].forEach((stream) =>
-        stream?.getTracks().forEach((track) => track.stop()),
+      abortCreatedRecordingOnCountdownCancel(
+        err,
+        recordingPromise,
+        params.serverUrl,
       );
-      streamCleanups.forEach((cleanup) => cleanup());
-      if (!popoverOwnsCamera) {
-        bubbleCameraStream?.getTracks().forEach((track) => track.stop());
-      }
       throw err;
     }
+    const { id, uploadMode } = createRes;
+    console.log(
+      "[clips-recorder] countdown + createServerRecording both resolved, id=",
+      id,
+    );
+    console.log("[clips-recorder] recording row created", { id, uploadMode });
+    let nativeTranscriptFailureSaved = false;
+    const saveTranscriptFailure = async (
+      failureReason: string,
+    ): Promise<boolean> => {
+      if (!wantsRecordedAudio || nativeTranscriptFailureSaved) return false;
+      nativeTranscriptFailureSaved = true;
+      return saveRecordingTranscriptFailure(
+        params.serverUrl,
+        id,
+        failureReason,
+        params.authToken,
+      );
+    };
+
+    // 4. Start MediaRecorder with a 2-second timeslice — each `ondataavailable`
+    //    streams a chunk to the server, so we don't hold 5-min buffers in memory.
+    const recorder = createCloudMediaRecorder(uploadCombined, mimeType);
+    let chunkIndex = 0;
+    let failed: Error | null = null;
+    let backupBytes = 0;
+    // Backup chunks are indexed by raw MediaRecorder blob (one per
+    // `ondataavailable`), independent of `chunkIndex` — on the streaming path
+    // `chunkIndex` counts aligned upload slices, not raw blobs.
+    let backupChunkCount = 0;
+    const streamMimeType = mimeType || "video/webm";
+    let backupMeta: BrowserRecordingBackupMeta = {
+      recordingId: id,
+      serverUrl: params.serverUrl.replace(/\/+$/, ""),
+      durationMs: 0,
+      width: null,
+      height: null,
+      bytes: 0,
+      hasAudio: uploadCombined.getAudioTracks().length > 0,
+      hasCamera: wantsCamera,
+      savedAt: new Date().toISOString(),
+      lastAttemptAt: null,
+      lastError: null,
+      retryCount: 0,
+      chunkCount: 0,
+      mimeType: mimeType || "video/webm",
+    };
+    const persistBackupMeta = async (
+      patch: Partial<BrowserRecordingBackupMeta> = {},
+    ) => {
+      backupMeta = { ...backupMeta, ...patch };
+      await putBrowserRecordingBackupMeta(backupMeta);
+    };
+    let backupFailure: Error | null = null;
+    const backupWrites = new Set<Promise<void>>();
+    let initialBackupWrite: Promise<void>;
+    initialBackupWrite = persistBackupMeta()
+      .catch((err) => {
+        backupFailure = err instanceof Error ? err : new Error(String(err));
+        console.warn("[clips-recorder] local backup metadata failed:", err);
+      })
+      .finally(() => {
+        backupWrites.delete(initialBackupWrite);
+      });
+    backupWrites.add(initialBackupWrite);
+
+    // Every raw MediaRecorder blob is mirrored to IndexedDB on both upload paths.
+    // If uploads fail the recording can still be recovered locally — replayed to
+    // the server (the retry first resets any resumable session so replay routes
+    // through the buffered chunk path) or exported to a local file.
+    const backupChunkLocally = (blob: Blob): Promise<void> => {
+      const backupIdx = backupChunkCount++;
+      backupBytes += blob.size;
+      const chunkMimeType = blob.type || streamMimeType;
+      let w: Promise<void>;
+      w = (async () => {
+        try {
+          await putBrowserRecordingBackupChunk({
+            recordingId: id,
+            index: backupIdx,
+            blob,
+            bytes: blob.size,
+            mimeType: chunkMimeType,
+            createdAt: new Date().toISOString(),
+          });
+          await persistBackupMeta({
+            bytes: backupBytes,
+            chunkCount: backupChunkCount,
+            mimeType: chunkMimeType,
+          });
+        } catch (err) {
+          backupFailure = err instanceof Error ? err : new Error(String(err));
+          console.warn("[clips-recorder] local chunk backup failed:", err);
+        }
+      })().finally(() => {
+        backupWrites.delete(w);
+      });
+      backupWrites.add(w);
+      return w;
+    };
+    // In-flight chunk uploads. We use a Set (not an array) so entries can be
+    // removed as soon as each fetch settles — otherwise, for a 30-minute
+    // recording the array grows to 900 Promises, and EACH promise closes over
+    // the Blob it's uploading. MediaRecorder Blobs are the raw encoded video
+    // chunk — ~500KB to ~1MB each. Holding 900 of them is a ~700MB leak per
+    // recording, and cumulative across recordings in a long-lived process.
+    // See `uploadChunk()` — it removes its own entry in `.finally()`.
+    const inflight = new Set<Promise<void>>();
+
+    // Streaming-path state. When the server opened a resumable session, blobs
+    // accumulate here until at least STREAM_CHUNK_BYTES is available, then a
+    // 256 KiB-aligned slice is uploaded as a non-final chunk. Resumable sessions
+    // append by byte offset server-side, so streamed chunks MUST arrive in order
+    // — uploads are serialized through `streamQueue`. The unaligned remainder is
+    // sent as the final chunk on stop().
+    let pendingStreamBlobs: Blob[] = [];
+    let pendingStreamBytes = 0;
+    let streamQueue: Promise<void> = Promise.resolve();
+
+    const queueStreamChunk = (blob: Blob, idx: number) => {
+      const url = chunkUrl(params.serverUrl, id, idx, false, {
+        mimeType: streamMimeType,
+      });
+      streamQueue = streamQueue.then(async () => {
+        if (failed) return;
+        try {
+          await uploadChunk(url, blob);
+        } catch (err) {
+          failed ??= err instanceof Error ? err : new Error(String(err));
+        }
+      });
+    };
+
+    const flushAlignedStreamChunks = () => {
+      while (pendingStreamBytes >= STREAM_CHUNK_BYTES) {
+        const combined = new Blob(pendingStreamBlobs, { type: streamMimeType });
+        const head = combined.slice(0, STREAM_CHUNK_BYTES, streamMimeType);
+        const tail = combined.slice(
+          STREAM_CHUNK_BYTES,
+          combined.size,
+          streamMimeType,
+        );
+        pendingStreamBlobs = tail.size > 0 ? [tail] : [];
+        pendingStreamBytes = tail.size;
+        queueStreamChunk(head, chunkIndex++);
+      }
+    };
+
+    recorder.ondataavailable = (ev) => {
+      if (!ev.data || ev.data.size === 0) return;
+
+      // Always mirror the raw blob to the local backup first (disaster recovery).
+      void backupChunkLocally(ev.data);
+
+      if (uploadMode === "streaming") {
+        // Resumable session on the server: buffer and flush 256 KiB-aligned
+        // slices, uploaded in order. The unaligned remainder is sent as the
+        // final chunk on stop().
+        pendingStreamBlobs.push(ev.data);
+        pendingStreamBytes += ev.data.size;
+        flushAlignedStreamChunks();
+        return;
+      }
+
+      const idx = chunkIndex++;
+      const chunkMimeType = ev.data.type || mimeType || "video/webm";
+      const url = chunkUrl(params.serverUrl, id, idx, false, {
+        mimeType: chunkMimeType,
+      });
+      // Wrap so `inflight.delete(p)` runs regardless of outcome. The closure
+      // holds the Blob only for the duration of this fetch — once removed,
+      // the Blob (and this promise) become GC-able. Note we assign `p` before
+      // constructing the promise body so `inflight.delete(p)` inside the
+      // `.finally` can reference the same handle we added.
+      let p: Promise<void>;
+      p = uploadChunk(url, ev.data)
+        .catch((err) => {
+          failed ??= err instanceof Error ? err : new Error(String(err));
+        })
+        .finally(() => {
+          inflight.delete(p);
+        });
+      inflight.add(p);
+    };
 
-    const id = `local-${Date.now().toString(36)}`;
     // Stamped at the real capture start below — kept 0 until then so the tick
-    // never reports an elapsed time against a stale baseline (which showed the
-    // clock counting up and then resetting to 0 when start finally fired).
+    // never reports elapsed against a stale baseline (which showed the clock
+    // counting up and then resetting to 0 when recorder.start finally fired).
     let startedAt = 0;
     let pausedAt: number | null = null;
     let accumulatedPauseMs = 0;
@@ -3221,28 +4182,49 @@ async function startRecordingInner(
       }).catch(() => {});
     }
 
+    // 5. Wire toolbar events.
     const toolbarUnlistens = await Promise.all([
       listen("clips:recorder-pause", () => {
-        localExport.pause();
-        pausedAt = Date.now();
-        emitState(true);
+        if (recorder.state === "recording") {
+          try {
+            recorder.pause();
+            pausedAt = Date.now();
+            emitState(true);
+            console.log(
+              "[clips-recorder] recorder pause: pausing transcription",
+            );
+            void transcriptionCapture?.pause().catch(() => {});
+          } catch {
+            // ignore
+          }
+        }
       }),
       listen("clips:recorder-resume", () => {
-        localExport.resume();
-        if (pausedAt) accumulatedPauseMs += Date.now() - pausedAt;
-        pausedAt = null;
-        emitState(false);
+        if (recorder.state === "paused") {
+          try {
+            recorder.resume();
+            if (pausedAt) accumulatedPauseMs += Date.now() - pausedAt;
+            pausedAt = null;
+            emitState(false);
+            console.log(
+              "[clips-recorder] recorder resume: resuming transcription",
+            );
+            void transcriptionCapture?.resume().catch(() => {});
+          } catch {
+            // ignore
+          }
+        }
       }),
       listen("clips:recorder-stop", () => {
-        console.log("[clips-recorder] local stop event received");
+        console.log("[clips-recorder] stop event received");
         handle.stop().catch((err) => {
-          console.error("[clips-recorder] local handle.stop() threw:", err);
+          console.error("[clips-recorder] handle.stop() threw:", err);
         });
       }),
       listen("clips:recorder-cancel", () => {
-        console.log("[clips-recorder] local cancel event received");
+        console.log("[clips-recorder] cancel event received");
         handle.cancel().catch((err) => {
-          console.error("[clips-recorder] local handle.cancel() threw:", err);
+          console.error("[clips-recorder] handle.cancel() threw:", err);
         });
       }),
     ]);
@@ -3250,868 +4232,489 @@ async function startRecordingInner(
 
     await showRegionGuidesForRecording(wantsScreen);
     await audioCue.playBeforeCapture();
-    localExport.start(2_000);
+    recorder.start(LIVE_UPLOAD_CHUNK_MS);
     startedAt = Date.now();
     tickHandle = setInterval(() => emitState(pausedAt != null), 500);
+    // The toolbar is already open (the popover's bubble-session effect
+    // spawns it alongside the bubble in its pre-record, disabled state).
+    // Now that MediaRecorder is actually ticking, flip the toolbar's
+    // Stop / Pause buttons to enabled so the user can drive the recorder.
     emit("clips:toolbar-enabled", true).catch(() => {});
+    // Seed the initial recorder-state so the time / paused styling match
+    // MediaRecorder's real state (before the first 500ms tick).
     emitState(false);
 
-    const detachCombinedStream = () => {
-      try {
-        combined.getTracks().forEach((track) => combined.removeTrack(track));
-      } catch {
-        // ignore — best-effort
-      }
-      for (const target of targets) {
+    // Live transcription capture starts AFTER the recorder is live. Its mic +
+    // ScreenCaptureKit spin-up takes ~1s; awaiting it before recorder.start was
+    // delaying capture, so the first ~1s the user expected to record was lost
+    // (and the recording felt cut at the end). It's a separate capture from the
+    // recorded audio tracks, so starting it slightly late is safe.
+    transcriptionCapture = wantsRecordedAudio
+      ? await startTranscriptionCapture(
+          {
+            deviceId: params.micId,
+            label: params.micLabel,
+          },
+          wantsSystemAudio,
+          // Match native path: VoiceProcessingIO AEC/ducking on a shared mic
+          // can tank live call volume and attenuate the recorded mic leg.
+          { voiceProcessing: false },
+        )
+      : null;
+    // Stop/Cancel can fire during the await above — at that point stop()/cancel()
+    // ran while transcriptionCapture was still null, so it never tore this down.
+    // Cancel the freshly-started session here so it doesn't keep running.
+    if (stopped && transcriptionCapture) {
+      void transcriptionCapture.cancel().catch(() => {});
+      transcriptionCapture = null;
+    } else if (pausedAt != null && transcriptionCapture) {
+      // The user paused while the engine was still starting; honor it now.
+      console.log(
+        "[clips-recorder] recorder: paused during startup, pausing transcription",
+      );
+      void transcriptionCapture.pause().catch(() => {});
+    } else if (
+      wantsRecordedAudio &&
+      !transcriptionCapture &&
+      shouldSaveLocalTranscriptionStartupFailure()
+    ) {
+      void saveTranscriptFailure(
+        "macOS Speech recognition could not start for this recording. Check Speech Recognition, System Audio, and Microphone permissions, then retry transcription.",
+      );
+    }
+
+    // 6. Bubble + toolbar visibility are owned by the popover's session
+    // effect (see app.tsx + bubble-pump.ts) — not the recorder. Both open
+    // as soon as the user opens the popover in screen-camera / camera mode
+    // with cameraOn. The recorder reuses that camera stream for the saved
+    // video composite and flips the toolbar from disabled → enabled above.
+
+    const performStop = async (): Promise<RecorderStopResult> => {
+      if (stopped) return { recordingId: id, viewUrl: `/r/${id}` };
+      stopped = true;
+      // Stamped right after the recorder fully stops below (see stoppedAt).
+      // Duration must measure recorded content — through the final flushed
+      // chunk — but NOT the transcript-finalize + thumbnail + upload awaits that
+      // follow, which add ~seconds and would overstate the saved duration.
+      let stoppedAt = 0;
+      const viewUrl = `/r/${id}`;
+      const absoluteViewUrl = `${params.serverUrl.replace(/\/+$/, "")}${viewUrl}`;
+      console.log("[clips-recorder] stop requested");
+      showFinalizingFeedback();
+      if (tickHandle) clearInterval(tickHandle);
+      stateUnlistens.forEach((u) => u());
+      stateUnlistens = [];
+
+      // Flush the in-flight recorder buffer, then wait for it to fully stop
+      // so we get the trailing dataavailable event.
+      const recorderStopped = new Promise<void>((resolve) => {
+        if (recorder.state === "inactive") {
+          stoppedAt = Date.now();
+          resolve();
+          return;
+        }
+        recorder.addEventListener(
+          "stop",
+          () => {
+            stoppedAt = Date.now();
+            resolve();
+          },
+          { once: true },
+        );
         try {
-          target.stream
-            .getTracks()
-            .forEach((track) => target.stream.removeTrack(track));
+          if (recorder.state === "paused") {
+            recorder.resume();
+            if (pausedAt) accumulatedPauseMs += Date.now() - pausedAt;
+            pausedAt = null;
+          }
         } catch {
-          // ignore — best-effort
+          // ignore
+        }
+        try {
+          recorder.requestData();
+        } catch {
+          // ignore
+        }
+        try {
+          recorder.stop();
+        } catch {
+          // ignore
         }
+      });
+      // `recorder.stop()` has already been requested, so recorded duration is
+      // fixed even if launching the browser takes a moment. Open the existing
+      // recording row now and let its page poll while upload/finalize continues.
+      //
+      // This must claim the native upload-open slot before launching. The
+      // Finalizing overlay receives the completion event later and uses the
+      // same claim; without it, browser recordings opened once here and then a
+      // second time when finalization completed.
+      await openNativeUploadUrl(id, absoluteViewUrl);
+      const recorderStopTimedOut = await Promise.race([
+        recorderStopped.then(() => false),
+        wait(MEDIA_RECORDER_STOP_TIMEOUT_MS).then(() => true),
+      ]);
+      if (recorderStopTimedOut) {
+        stoppedAt = Date.now();
+        failed ??= new Error(
+          "The recorder did not finish stopping. Your local backup was kept so you can retry or download it from Clips.",
+        );
+        void transcriptionCapture?.cancel().catch((err) => {
+          console.warn(
+            "[clips-recorder] transcription cancel after stop timeout failed:",
+            err,
+          );
+        });
       }
-    };
-
-    const stopOwnedStreams = () => {
-      [displayStream, audioStream].forEach((stream) =>
-        stream?.getTracks().forEach((track) => track.stop()),
+      // Use the recorder's stop event as the content boundary. If WebKit never
+      // emits it, the watchdog boundary preserves the available chunks and keeps
+      // post-processing time out of the recovery copy's duration.
+
+      const videoSettings = uploadPrimaryVideo.stream
+        .getVideoTracks()[0]
+        ?.getSettings();
+      const displaySettings = displayStream?.getVideoTracks()[0]?.getSettings();
+      const durationMs = Math.max(
+        0,
+        Math.round(stoppedAt - startedAt - accumulatedPauseMs),
       );
-      streamCleanups.forEach((cleanup) => cleanup());
-      if (!popoverOwnsCamera) {
-        bubbleCameraStream?.getTracks().forEach((track) => track.stop());
+      const width =
+        typeof videoSettings?.width === "number"
+          ? videoSettings.width
+          : typeof displaySettings?.width === "number"
+            ? displaySettings.width
+            : null;
+      const height =
+        typeof videoSettings?.height === "number"
+          ? videoSettings.height
+          : typeof displaySettings?.height === "number"
+            ? displaySettings.height
+            : null;
+      const finalMimeType = mimeType || backupMeta.mimeType || "video/webm";
+      try {
+        await persistBackupMeta({
+          durationMs,
+          width,
+          height,
+          bytes: backupBytes,
+          hasAudio: uploadCombined.getAudioTracks().length > 0,
+          hasCamera: wantsCamera,
+          chunkCount: backupChunkCount,
+          mimeType: finalMimeType,
+          lastError: null,
+        });
+      } catch (err) {
+        backupFailure = err instanceof Error ? err : new Error(String(err));
+        console.warn(
+          "[clips-recorder] local backup final metadata failed:",
+          err,
+        );
       }
-    };
 
-    const hideChrome = async () => {
-      await invoke("hide_recording_chrome").catch((err) =>
-        console.error(`[clips-recorder] hide_recording_chrome failed:`, err),
-      );
-    };
+      if (!recorderStopTimedOut) {
+        void captureAndUploadRecordingThumbnail({
+          serverUrl: params.serverUrl,
+          recordingId: id,
+          stream: primaryVideo,
+          authToken: params.authToken,
+        }).catch((err) => {
+          console.warn(
+            "[clips-recorder] thumbnail capture/upload failed:",
+            err,
+          );
+        });
 
-    const handle: RecorderHandle = {
-      async stop() {
-        if (stopped) {
-          return {
-            recordingId: id,
-            viewUrl: "",
-            localOnly: true,
-            localFolder: localExport.folderPath,
-            localFiles: [],
-          };
-        }
-        stopped = true;
-        if (tickHandle) clearInterval(tickHandle);
-        stateUnlistens.forEach((unlisten) => unlisten());
-        stateUnlistens = [];
-        const durationMs = Math.max(
-          0,
-          Math.round(Date.now() - startedAt - accumulatedPauseMs),
-        );
-        let files: LocalExportedFile[] = [];
-        try {
-          files = await localExport.stop(durationMs);
-        } finally {
-          detachCombinedStream();
-          stopOwnedStreams();
-          await hideChrome();
+        const capturedTranscript = await transcriptionCapture
+          ?.stop()
+          .catch((err) => {
+            console.warn("[clips-recorder] transcript stop failed:", err);
+            return null;
+          });
+        if (capturedTranscript?.text.trim()) {
+          await saveRecordingTranscript(
+            params.serverUrl,
+            id,
+            capturedTranscript,
+            params.authToken,
+          );
+        } else if (wantsRecordedAudio) {
+          await saveTranscriptFailure(
+            "No speech was captured during this recording. If you spoke or played system audio, check System Audio, Microphone input, Speech Recognition permission, and the selected mic, then retry transcription.",
+          );
         }
-        return {
-          recordingId: id,
-          viewUrl: "",
-          localOnly: true,
-          localFolder: localExport.folderPath,
-          localFiles: files,
-        };
-      },
-
-      async cancel() {
-        if (stopped) return;
-        stopped = true;
-        if (tickHandle) clearInterval(tickHandle);
-        stateUnlistens.forEach((unlisten) => unlisten());
-        stateUnlistens = [];
-        await localExport.cancel();
-        detachCombinedStream();
-        stopOwnedStreams();
-        await hideChrome();
-      },
-    };
-
-    return handle;
-  }
-
-  const uploadPrimaryVideo = createUploadOptimizedVideoStream(primaryVideo);
-  streamCleanups.push(uploadPrimaryVideo.cleanup);
-
-  const uploadCombined = new MediaStream();
-  uploadPrimaryVideo.stream
-    .getVideoTracks()
-    .forEach((track) => uploadCombined.addTrack(track));
-  recordingAudio.tracks.forEach((track) => uploadCombined.addTrack(track));
-
-  // MIME type is resolved up front so create-recording can initialize the
-  // resumable session with the correct content type when the server supports
-  // streaming uploads.
-  const mimeCandidates = [
-    "video/webm;codecs=vp8,opus",
-    "video/webm;codecs=vp9,opus",
-    "video/webm",
-  ];
-  const mimeType =
-    mimeCandidates.find((m) => MediaRecorder.isTypeSupported(m)) ?? "";
-
-  // 2+3. Countdown + create-recording happen IN PARALLEL. The countdown is
-  // pure visual feedback — gating it on a network round-trip makes the
-  // 3-2-1 feel laggy after the user picks a screen. Kick both off and
-  // wait at the end before starting the MediaRecorder.
-  console.log(
-    "[clips-recorder] invoking show_countdown + createServerRecording",
-  );
-  const countdownPromise = runRecordingCountdown(wantsScreen);
-  console.time("[clips-recorder] createServerRecording duration");
-  const recordingPromise = createServerRecording(
-    params.serverUrl,
-    wantsCamera,
-    recordingAudio.tracks.length > 0,
-    captureTitle,
-    { mimeType: mimeType || "video/webm", requestStreaming: true },
-  ).finally(() => {
-    console.timeEnd("[clips-recorder] createServerRecording duration");
-  });
-  console.log("[clips-recorder] awaiting countdown + createServerRecording");
-  let createRes: Awaited<ReturnType<typeof createServerRecording>>;
-  try {
-    [, createRes] = await Promise.all([countdownPromise, recordingPromise]);
-  } catch (err) {
-    abortCreatedRecordingOnCountdownCancel(
-      err,
-      recordingPromise,
-      params.serverUrl,
-    );
-    throw err;
-  }
-  const { id, uploadMode } = createRes;
-  console.log(
-    "[clips-recorder] countdown + createServerRecording both resolved, id=",
-    id,
-  );
-  console.log("[clips-recorder] recording row created", { id, uploadMode });
-  let nativeTranscriptFailureSaved = false;
-  const saveTranscriptFailure = async (
-    failureReason: string,
-  ): Promise<boolean> => {
-    if (!wantsRecordedAudio || nativeTranscriptFailureSaved) return false;
-    nativeTranscriptFailureSaved = true;
-    return saveRecordingTranscriptFailure(
-      params.serverUrl,
-      id,
-      failureReason,
-      params.authToken,
-    );
-  };
-
-  // 4. Start MediaRecorder with a 2-second timeslice — each `ondataavailable`
-  //    streams a chunk to the server, so we don't hold 5-min buffers in memory.
-  const recorder = createCloudMediaRecorder(uploadCombined, mimeType);
-  let chunkIndex = 0;
-  let failed: Error | null = null;
-  let backupBytes = 0;
-  // Backup chunks are indexed by raw MediaRecorder blob (one per
-  // `ondataavailable`), independent of `chunkIndex` — on the streaming path
-  // `chunkIndex` counts aligned upload slices, not raw blobs.
-  let backupChunkCount = 0;
-  const streamMimeType = mimeType || "video/webm";
-  let backupMeta: BrowserRecordingBackupMeta = {
-    recordingId: id,
-    serverUrl: params.serverUrl.replace(/\/+$/, ""),
-    durationMs: 0,
-    width: null,
-    height: null,
-    bytes: 0,
-    hasAudio: uploadCombined.getAudioTracks().length > 0,
-    hasCamera: wantsCamera,
-    savedAt: new Date().toISOString(),
-    lastAttemptAt: null,
-    lastError: null,
-    retryCount: 0,
-    chunkCount: 0,
-    mimeType: mimeType || "video/webm",
-  };
-  const persistBackupMeta = async (
-    patch: Partial<BrowserRecordingBackupMeta> = {},
-  ) => {
-    backupMeta = { ...backupMeta, ...patch };
-    await putBrowserRecordingBackupMeta(backupMeta);
-  };
-  let backupFailure: Error | null = null;
-  const backupWrites = new Set<Promise<void>>();
-  let initialBackupWrite: Promise<void>;
-  initialBackupWrite = persistBackupMeta()
-    .catch((err) => {
-      backupFailure = err instanceof Error ? err : new Error(String(err));
-      console.warn("[clips-recorder] local backup metadata failed:", err);
-    })
-    .finally(() => {
-      backupWrites.delete(initialBackupWrite);
-    });
-  backupWrites.add(initialBackupWrite);
-
-  // Every raw MediaRecorder blob is mirrored to IndexedDB on both upload paths.
-  // If uploads fail the recording can still be recovered locally — replayed to
-  // the server (the retry first resets any resumable session so replay routes
-  // through the buffered chunk path) or exported to a local file.
-  const backupChunkLocally = (blob: Blob): Promise<void> => {
-    const backupIdx = backupChunkCount++;
-    backupBytes += blob.size;
-    const chunkMimeType = blob.type || streamMimeType;
-    let w: Promise<void>;
-    w = (async () => {
-      try {
-        await putBrowserRecordingBackupChunk({
-          recordingId: id,
-          index: backupIdx,
-          blob,
-          bytes: blob.size,
-          mimeType: chunkMimeType,
-          createdAt: new Date().toISOString(),
-        });
-        await persistBackupMeta({
-          bytes: backupBytes,
-          chunkCount: backupChunkCount,
-          mimeType: chunkMimeType,
-        });
-      } catch (err) {
-        backupFailure = err instanceof Error ? err : new Error(String(err));
-        console.warn("[clips-recorder] local chunk backup failed:", err);
       }
-    })().finally(() => {
-      backupWrites.delete(w);
-    });
-    backupWrites.add(w);
-    return w;
-  };
-  // In-flight chunk uploads. We use a Set (not an array) so entries can be
-  // removed as soon as each fetch settles — otherwise, for a 30-minute
-  // recording the array grows to 900 Promises, and EACH promise closes over
-  // the Blob it's uploading. MediaRecorder Blobs are the raw encoded video
-  // chunk — ~500KB to ~1MB each. Holding 900 of them is a ~700MB leak per
-  // recording, and cumulative across recordings in a long-lived process.
-  // See `uploadChunk()` — it removes its own entry in `.finally()`.
-  const inflight = new Set<Promise<void>>();
-
-  // Streaming-path state. When the server opened a resumable session, blobs
-  // accumulate here until at least STREAM_CHUNK_BYTES is available, then a
-  // 256 KiB-aligned slice is uploaded as a non-final chunk. Resumable sessions
-  // append by byte offset server-side, so streamed chunks MUST arrive in order
-  // — uploads are serialized through `streamQueue`. The unaligned remainder is
-  // sent as the final chunk on stop().
-  let pendingStreamBlobs: Blob[] = [];
-  let pendingStreamBytes = 0;
-  let streamQueue: Promise<void> = Promise.resolve();
-
-  const queueStreamChunk = (blob: Blob, idx: number) => {
-    const url = chunkUrl(params.serverUrl, id, idx, false, {
-      mimeType: streamMimeType,
-    });
-    streamQueue = streamQueue.then(async () => {
-      if (failed) return;
+      if (popoverOwnsCamera) {
+        console.log("[clips-recorder] releasing popover camera");
+        emit("clips:release-camera").catch(() => {});
+      }
+
+      // Null the data handler so the final MediaRecorder teardown
+      // doesn't keep the closure (which captures `inflight`, the URL
+      // builder, and indirectly the MediaStream) reachable after we're
+      // done with it. WebKit's MediaRecorder can retain a reference to
+      // its event handler for the life of the object if you leave a
+      // non-null ondataavailable in place — null it to break the chain.
+      recorder.ondataavailable = null;
+      // Clear MediaStream track lists — just removing our
+      // references to the tracks is enough; the tracks themselves are
+      // owned by `displayStream` / `audioStream` / `bubbleCameraStream`
+      // and get stopped below.
       try {
-        await uploadChunk(url, blob);
-      } catch (err) {
-        failed ??= err instanceof Error ? err : new Error(String(err));
+        uploadCombined
+          .getTracks()
+          .forEach((t) => uploadCombined.removeTrack(t));
+        combined.getTracks().forEach((t) => combined.removeTrack(t));
+      } catch {
+        // ignore — best-effort
       }
-    });
-  };
 
-  const flushAlignedStreamChunks = () => {
-    while (pendingStreamBytes >= STREAM_CHUNK_BYTES) {
-      const combined = new Blob(pendingStreamBlobs, { type: streamMimeType });
-      const head = combined.slice(0, STREAM_CHUNK_BYTES, streamMimeType);
-      const tail = combined.slice(
-        STREAM_CHUNK_BYTES,
-        combined.size,
-        streamMimeType,
+      // Stop the streams WE own so OS permission indicators clear. The
+      // camera stream is owned by the popover when reused — we leave it
+      // alone so the bubble stays live if the popover is still open.
+      [displayStream, audioStream].forEach((s) =>
+        s?.getTracks().forEach((t) => t.stop()),
       );
-      pendingStreamBlobs = tail.size > 0 ? [tail] : [];
-      pendingStreamBytes = tail.size;
-      queueStreamChunk(head, chunkIndex++);
-    }
-  };
-
-  recorder.ondataavailable = (ev) => {
-    if (!ev.data || ev.data.size === 0) return;
-
-    // Always mirror the raw blob to the local backup first (disaster recovery).
-    void backupChunkLocally(ev.data);
-
-    if (uploadMode === "streaming") {
-      // Resumable session on the server: buffer and flush 256 KiB-aligned
-      // slices, uploaded in order. The unaligned remainder is sent as the
-      // final chunk on stop().
-      pendingStreamBlobs.push(ev.data);
-      pendingStreamBytes += ev.data.size;
-      flushAlignedStreamChunks();
-      return;
-    }
-
-    const idx = chunkIndex++;
-    const chunkMimeType = ev.data.type || mimeType || "video/webm";
-    const url = chunkUrl(params.serverUrl, id, idx, false, {
-      mimeType: chunkMimeType,
-    });
-    // Wrap so `inflight.delete(p)` runs regardless of outcome. The closure
-    // holds the Blob only for the duration of this fetch — once removed,
-    // the Blob (and this promise) become GC-able. Note we assign `p` before
-    // constructing the promise body so `inflight.delete(p)` inside the
-    // `.finally` can reference the same handle we added.
-    let p: Promise<void>;
-    p = uploadChunk(url, ev.data)
-      .catch((err) => {
-        failed ??= err instanceof Error ? err : new Error(String(err));
-      })
-      .finally(() => {
-        inflight.delete(p);
-      });
-    inflight.add(p);
-  };
-
-  // Stamped at the real capture start below — kept 0 until then so the tick
-  // never reports elapsed against a stale baseline (which showed the clock
-  // counting up and then resetting to 0 when recorder.start finally fired).
-  let startedAt = 0;
-  let pausedAt: number | null = null;
-  let accumulatedPauseMs = 0;
-  let stopped = false;
-  let stateUnlistens: UnlistenFn[] = [];
-  let tickHandle: ReturnType<typeof setInterval> | null = null;
+      streamCleanups.forEach((cleanup) => cleanup());
+      if (!popoverOwnsCamera) {
+        bubbleCameraStream?.getTracks().forEach((t) => t.stop());
+      }
 
-  function emitState(paused: boolean) {
-    const now = Date.now();
-    const pausedNowMs = paused && pausedAt ? now - pausedAt : 0;
-    const elapsedMs = now - startedAt - accumulatedPauseMs - pausedNowMs;
-    emit("clips:recorder-state", {
-      paused,
-      elapsedMs,
-    }).catch(() => {});
-  }
+      // Hide the recording-specific overlays (countdown + toolbar). The
+      // bubble is managed by the popover's session effect — when the
+      // popover is hidden or the user turns camera off, that effect tears
+      // down the bubble. Closing it here would cause a flicker on the
+      // cancel path where the popover re-appears with camera still on.
+      console.log("[clips-recorder] hiding recording chrome");
+      await invoke("hide_recording_chrome").catch((err) =>
+        console.error(`[clips-recorder] hide_recording_chrome failed:`, err),
+      );
 
-  // 5. Wire toolbar events.
-  const toolbarUnlistens = await Promise.all([
-    listen("clips:recorder-pause", () => {
-      if (recorder.state === "recording") {
-        try {
-          recorder.pause();
-          pausedAt = Date.now();
-          emitState(true);
-          console.log("[clips-recorder] recorder pause: pausing transcription");
-          void transcriptionCapture?.pause().catch(() => {});
-        } catch {
-          // ignore
-        }
+      // Wait for any in-flight chunk uploads to settle before sending the
+      // final chunk. Otherwise the server could finalize before the last
+      // few bytes land. On the streaming path uploads are serialized through
+      // `streamQueue`; on the buffered path they run concurrently and each
+      // `.finally` has already removed settled entries from `inflight`.
+      const pending = Array.from(inflight);
+      if (uploadMode === "streaming") {
+        await streamQueue;
+      } else {
+        await Promise.allSettled(pending);
       }
-    }),
-    listen("clips:recorder-resume", () => {
-      if (recorder.state === "paused") {
+      inflight.clear();
+      if (failed) {
         try {
-          recorder.resume();
-          if (pausedAt) accumulatedPauseMs += Date.now() - pausedAt;
-          pausedAt = null;
-          emitState(false);
-          console.log(
-            "[clips-recorder] recorder resume: resuming transcription",
+          // Keep the guard until the final metadata and every trailing chunk
+          // backup are durable, even though this upload cannot be finalized.
+          await Promise.allSettled([...backupWrites]);
+          console.error("[clips-recorder] chunk upload failed:", failed);
+          await markBrowserRecordingBackupError(id, failed.message).catch(
+            () => {},
           );
-          void transcriptionCapture?.resume().catch(() => {});
-        } catch {
-          // ignore
+          await abortRecordingUpload(params.serverUrl, id, failed.message);
+        } finally {
+          await clearRecordingState();
+          await publishFinalizingResult({
+            recordingId: id,
+            viewUrl: absoluteViewUrl,
+            ok: false,
+            error: failed.message,
+          });
         }
+        throw failed;
       }
-    }),
-    listen("clips:recorder-stop", () => {
-      console.log("[clips-recorder] stop event received");
-      handle.stop().catch((err) => {
-        console.error("[clips-recorder] handle.stop() threw:", err);
-      });
-    }),
-    listen("clips:recorder-cancel", () => {
-      console.log("[clips-recorder] cancel event received");
-      handle.cancel().catch((err) => {
-        console.error("[clips-recorder] handle.cancel() threw:", err);
-      });
-    }),
-  ]);
-  stateUnlistens = toolbarUnlistens;
-
-  await showRegionGuidesForRecording(wantsScreen);
-  await audioCue.playBeforeCapture();
-  recorder.start(LIVE_UPLOAD_CHUNK_MS);
-  startedAt = Date.now();
-  tickHandle = setInterval(() => emitState(pausedAt != null), 500);
-  // The toolbar is already open (the popover's bubble-session effect
-  // spawns it alongside the bubble in its pre-record, disabled state).
-  // Now that MediaRecorder is actually ticking, flip the toolbar's
-  // Stop / Pause buttons to enabled so the user can drive the recorder.
-  emit("clips:toolbar-enabled", true).catch(() => {});
-  // Seed the initial recorder-state so the time / paused styling match
-  // MediaRecorder's real state (before the first 500ms tick).
-  emitState(false);
-
-  // Live transcription capture starts AFTER the recorder is live. Its mic +
-  // ScreenCaptureKit spin-up takes ~1s; awaiting it before recorder.start was
-  // delaying capture, so the first ~1s the user expected to record was lost
-  // (and the recording felt cut at the end). It's a separate capture from the
-  // recorded audio tracks, so starting it slightly late is safe.
-  transcriptionCapture = wantsRecordedAudio
-    ? await startTranscriptionCapture(
-        {
-          deviceId: params.micId,
-          label: params.micLabel,
-        },
-        wantsSystemAudio,
-        // Match native path: VoiceProcessingIO AEC/ducking on a shared mic
-        // can tank live call volume and attenuate the recorded mic leg.
-        { voiceProcessing: false },
-      )
-    : null;
-  // Stop/Cancel can fire during the await above — at that point stop()/cancel()
-  // ran while transcriptionCapture was still null, so it never tore this down.
-  // Cancel the freshly-started session here so it doesn't keep running.
-  if (stopped && transcriptionCapture) {
-    void transcriptionCapture.cancel().catch(() => {});
-    transcriptionCapture = null;
-  } else if (pausedAt != null && transcriptionCapture) {
-    // The user paused while the engine was still starting; honor it now.
-    console.log(
-      "[clips-recorder] recorder: paused during startup, pausing transcription",
-    );
-    void transcriptionCapture.pause().catch(() => {});
-  } else if (
-    wantsRecordedAudio &&
-    !transcriptionCapture &&
-    shouldSaveLocalTranscriptionStartupFailure()
-  ) {
-    void saveTranscriptFailure(
-      "macOS Speech recognition could not start for this recording. Check Speech Recognition, System Audio, and Microphone permissions, then retry transcription.",
-    );
-  }
 
-  // 6. Bubble + toolbar visibility are owned by the popover's session
-  // effect (see app.tsx + bubble-pump.ts) — not the recorder. Both open
-  // as soon as the user opens the popover in screen-camera / camera mode
-  // with cameraOn. The recorder reuses that camera stream for the saved
-  // video composite and flips the toolbar from disabled → enabled above.
-
-  const performStop = async (): Promise<RecorderStopResult> => {
-    if (stopped) return { recordingId: id, viewUrl: `/r/${id}` };
-    stopped = true;
-    // Stamped right after the recorder fully stops below (see stoppedAt).
-    // Duration must measure recorded content — through the final flushed
-    // chunk — but NOT the transcript-finalize + thumbnail + upload awaits that
-    // follow, which add ~seconds and would overstate the saved duration.
-    let stoppedAt = 0;
-    const viewUrl = `/r/${id}`;
-    const absoluteViewUrl = `${params.serverUrl.replace(/\/+$/, "")}${viewUrl}`;
-    console.log("[clips-recorder] stop requested");
-    showFinalizingFeedback();
-    if (tickHandle) clearInterval(tickHandle);
-    stateUnlistens.forEach((u) => u());
-    stateUnlistens = [];
-
-    // Flush the in-flight recorder buffer, then wait for it to fully stop
-    // so we get the trailing dataavailable event.
-    const recorderStopped = new Promise<void>((resolve) => {
-      if (recorder.state === "inactive") {
-        stoppedAt = Date.now();
-        resolve();
-        return;
-      }
-      recorder.addEventListener(
-        "stop",
-        () => {
-          stoppedAt = Date.now();
-          resolve();
-        },
-        { once: true },
-      );
-      try {
-        if (recorder.state === "paused") {
-          recorder.resume();
-          if (pausedAt) accumulatedPauseMs += Date.now() - pausedAt;
-          pausedAt = null;
-        }
-      } catch {
-        // ignore
-      }
-      try {
-        recorder.requestData();
-      } catch {
-        // ignore
-      }
-      try {
-        recorder.stop();
-      } catch {
-        // ignore
-      }
-    });
-    // `recorder.stop()` has already been requested, so recorded duration is
-    // fixed even if launching the browser takes a moment. Open the existing
-    // recording row now and let its page poll while upload/finalize continues.
-    //
-    // This must claim the native upload-open slot before launching. The
-    // Finalizing overlay receives the completion event later and uses the
-    // same claim; without it, browser recordings opened once here and then a
-    // second time when finalization completed.
-    await openNativeUploadUrl(id, absoluteViewUrl);
-    const recorderStopTimedOut = await Promise.race([
-      recorderStopped.then(() => false),
-      wait(MEDIA_RECORDER_STOP_TIMEOUT_MS).then(() => true),
-    ]);
-    if (recorderStopTimedOut) {
-      stoppedAt = Date.now();
-      failed ??= new Error(
-        "The recorder did not finish stopping. Your local backup was kept so you can retry or download it from Clips.",
-      );
-      void transcriptionCapture?.cancel().catch((err) => {
-        console.warn(
-          "[clips-recorder] transcription cancel after stop timeout failed:",
-          err,
-        );
-      });
-    }
-    // Use the recorder's stop event as the content boundary. If WebKit never
-    // emits it, the watchdog boundary preserves the available chunks and keeps
-    // post-processing time out of the recovery copy's duration.
-
-    const videoSettings = uploadPrimaryVideo.stream
-      .getVideoTracks()[0]
-      ?.getSettings();
-    const displaySettings = displayStream?.getVideoTracks()[0]?.getSettings();
-    const durationMs = Math.max(
-      0,
-      Math.round(stoppedAt - startedAt - accumulatedPauseMs),
-    );
-    const width =
-      typeof videoSettings?.width === "number"
-        ? videoSettings.width
-        : typeof displaySettings?.width === "number"
-          ? displaySettings.width
-          : null;
-    const height =
-      typeof videoSettings?.height === "number"
-        ? videoSettings.height
-        : typeof displaySettings?.height === "number"
-          ? displaySettings.height
-          : null;
-    const finalMimeType = mimeType || backupMeta.mimeType || "video/webm";
-    try {
-      await persistBackupMeta({
-        durationMs,
-        width,
-        height,
-        bytes: backupBytes,
-        hasAudio: uploadCombined.getAudioTracks().length > 0,
-        hasCamera: wantsCamera,
-        chunkCount: backupChunkCount,
+      // Streaming: the closing bytes are whatever remains under the 256 KiB
+      // alignment boundary — send them as the final chunk so the resumable
+      // session can complete. Buffered: bytes are already staged server-side,
+      // so the final chunk is a 0-byte close sentinel.
+      const finalBody =
+        uploadMode === "streaming"
+          ? new Blob(pendingStreamBlobs, { type: finalMimeType })
+          : new Blob([], { type: finalMimeType });
+      pendingStreamBlobs = [];
+      pendingStreamBytes = 0;
+
+      const finalizeUrl = chunkUrl(params.serverUrl, id, chunkIndex, true, {
         mimeType: finalMimeType,
-        lastError: null,
+        durationMs: String(durationMs),
+        ...(width ? { width: String(width) } : {}),
+        ...(height ? { height: String(height) } : {}),
+        hasAudio: backupMeta.hasAudio ? "1" : "0",
+        hasCamera: wantsCamera ? "1" : "0",
       });
-    } catch (err) {
-      backupFailure = err instanceof Error ? err : new Error(String(err));
-      console.warn("[clips-recorder] local backup final metadata failed:", err);
-    }
-
-    if (!recorderStopTimedOut) {
-      void captureAndUploadRecordingThumbnail({
-        serverUrl: params.serverUrl,
-        recordingId: id,
-        stream: primaryVideo,
-        authToken: params.authToken,
-      }).catch((err) => {
-        console.warn("[clips-recorder] thumbnail capture/upload failed:", err);
+      console.log("[clips-recorder] finalize POST", finalizeUrl, {
+        chunksSent: chunkIndex,
+        inflightAtFinalize: pending.length,
+        finalBodyBytes: finalBody.size,
+        uploadMode,
+        anyFailed: !!failed,
       });
+      try {
+        const result = await finalizeAfterDurableBackup({
+          // Opening the browser must not make the desktop look idle until every
+          // trailing backup write and the final metadata are durable.
+          ensureBackupDurable: async () => {
+            await Promise.all([...backupWrites]);
+            if (backupFailure) throw backupFailure;
+            await persistBackupMeta({
+              durationMs,
+              width,
+              height,
+              bytes: backupBytes,
+              hasAudio: uploadCombined.getAudioTracks().length > 0,
+              hasCamera: wantsCamera,
+              chunkCount: backupChunkCount,
+              mimeType: finalMimeType,
+              lastError: null,
+            });
+          },
+          attemptFinalize: async () => {
+            try {
+              const finalRes = await fetch(finalizeUrl, {
+                method: "POST",
+                headers: { "Content-Type": "application/octet-stream" },
+                credentials: "include",
+                body: finalBody,
+                signal: AbortSignal.timeout(FINALIZE_UPLOAD_TIMEOUT_MS),
+              });
+              const bodyText = await finalRes.text().catch(() => "");
+              console.log(
+                "[clips-recorder] finalize response:",
+                finalRes.status,
+                bodyText.slice(0, 500),
+              );
+              if (!finalRes.ok) {
+                throw new Error(
+                  `Finalize failed (${finalRes.status}): ${bodyText.slice(0, 200)}`,
+                );
+              }
+              const receipt = parseFinalizeReceipt(bodyText);
+              const receiptStatus = verifyFinalizeReceipt(receipt, {
+                bytes: backupBytes,
+                durationMs,
+              });
+              if (receiptStatus === "processing") {
+                scheduleBrowserBackupCleanupAfterProcessing({
+                  serverUrl: params.serverUrl,
+                  recordingId: id,
+                  authToken: params.authToken,
+                });
+                return { recordingId: id, viewUrl };
+              }
+            } catch (err) {
+              console.error("[clips-recorder] finalize fetch failed:", err);
+              const error = err instanceof Error ? err : new Error(String(err));
+              if (
+                await recoverAcceptedRecordingAfterFinalizeError({
+                  serverUrl: params.serverUrl,
+                  recordingId: id,
+                  authToken: params.authToken,
+                })
+              ) {
+                return { recordingId: id, viewUrl };
+              }
+              await markBrowserRecordingBackupError(id, error.message).catch(
+                () => {},
+              );
+              await abortRecordingUpload(params.serverUrl, id, error.message);
+              throw error;
+            }
+            await deleteBrowserRecordingBackup(id).catch((err) => {
+              console.warn(
+                "[clips-recorder] local backup cleanup failed:",
+                err,
+              );
+            });
 
-      const capturedTranscript = await transcriptionCapture
-        ?.stop()
-        .catch((err) => {
-          console.warn("[clips-recorder] transcript stop failed:", err);
-          return null;
+            return { recordingId: id, viewUrl };
+          },
+          releaseGuard: clearRecordingState,
         });
-      if (capturedTranscript?.text.trim()) {
-        await saveRecordingTranscript(
-          params.serverUrl,
-          id,
-          capturedTranscript,
-          params.authToken,
-        );
-      } else if (wantsRecordedAudio) {
-        await saveTranscriptFailure(
-          "No speech was captured during this recording. If you spoke or played system audio, check System Audio, Microphone input, Speech Recognition permission, and the selected mic, then retry transcription.",
-        );
-      }
-    }
-    if (popoverOwnsCamera) {
-      console.log("[clips-recorder] releasing popover camera");
-      emit("clips:release-camera").catch(() => {});
-    }
-
-    // Null the data handler so the final MediaRecorder teardown
-    // doesn't keep the closure (which captures `inflight`, the URL
-    // builder, and indirectly the MediaStream) reachable after we're
-    // done with it. WebKit's MediaRecorder can retain a reference to
-    // its event handler for the life of the object if you leave a
-    // non-null ondataavailable in place — null it to break the chain.
-    recorder.ondataavailable = null;
-    // Clear MediaStream track lists — just removing our
-    // references to the tracks is enough; the tracks themselves are
-    // owned by `displayStream` / `audioStream` / `bubbleCameraStream`
-    // and get stopped below.
-    try {
-      uploadCombined.getTracks().forEach((t) => uploadCombined.removeTrack(t));
-      combined.getTracks().forEach((t) => combined.removeTrack(t));
-    } catch {
-      // ignore — best-effort
-    }
-
-    // Stop the streams WE own so OS permission indicators clear. The
-    // camera stream is owned by the popover when reused — we leave it
-    // alone so the bubble stays live if the popover is still open.
-    [displayStream, audioStream].forEach((s) =>
-      s?.getTracks().forEach((t) => t.stop()),
-    );
-    streamCleanups.forEach((cleanup) => cleanup());
-    if (!popoverOwnsCamera) {
-      bubbleCameraStream?.getTracks().forEach((t) => t.stop());
-    }
-
-    // Hide the recording-specific overlays (countdown + toolbar). The
-    // bubble is managed by the popover's session effect — when the
-    // popover is hidden or the user turns camera off, that effect tears
-    // down the bubble. Closing it here would cause a flicker on the
-    // cancel path where the popover re-appears with camera still on.
-    console.log("[clips-recorder] hiding recording chrome");
-    await invoke("hide_recording_chrome").catch((err) =>
-      console.error(`[clips-recorder] hide_recording_chrome failed:`, err),
-    );
-
-    // Wait for any in-flight chunk uploads to settle before sending the
-    // final chunk. Otherwise the server could finalize before the last
-    // few bytes land. On the streaming path uploads are serialized through
-    // `streamQueue`; on the buffered path they run concurrently and each
-    // `.finally` has already removed settled entries from `inflight`.
-    const pending = Array.from(inflight);
-    if (uploadMode === "streaming") {
-      await streamQueue;
-    } else {
-      await Promise.allSettled(pending);
-    }
-    inflight.clear();
-    if (failed) {
-      try {
-        // Keep the guard until the final metadata and every trailing chunk
-        // backup are durable, even though this upload cannot be finalized.
-        await Promise.allSettled([...backupWrites]);
-        console.error("[clips-recorder] chunk upload failed:", failed);
-        await markBrowserRecordingBackupError(id, failed.message).catch(
-          () => {},
-        );
-        await abortRecordingUpload(params.serverUrl, id, failed.message);
-      } finally {
-        await clearRecordingState();
+        await publishFinalizingResult({
+          recordingId: id,
+          viewUrl: absoluteViewUrl,
+          ok: true,
+        });
+        return result;
+      } catch (err) {
         await publishFinalizingResult({
           recordingId: id,
           viewUrl: absoluteViewUrl,
           ok: false,
-          error: failed.message,
+          error: err instanceof Error ? err.message : String(err),
         });
+        throw err;
       }
-      throw failed;
-    }
-
-    // Streaming: the closing bytes are whatever remains under the 256 KiB
-    // alignment boundary — send them as the final chunk so the resumable
-    // session can complete. Buffered: bytes are already staged server-side,
-    // so the final chunk is a 0-byte close sentinel.
-    const finalBody =
-      uploadMode === "streaming"
-        ? new Blob(pendingStreamBlobs, { type: finalMimeType })
-        : new Blob([], { type: finalMimeType });
-    pendingStreamBlobs = [];
-    pendingStreamBytes = 0;
-
-    const finalizeUrl = chunkUrl(params.serverUrl, id, chunkIndex, true, {
-      mimeType: finalMimeType,
-      durationMs: String(durationMs),
-      ...(width ? { width: String(width) } : {}),
-      ...(height ? { height: String(height) } : {}),
-      hasAudio: backupMeta.hasAudio ? "1" : "0",
-      hasCamera: wantsCamera ? "1" : "0",
-    });
-    console.log("[clips-recorder] finalize POST", finalizeUrl, {
-      chunksSent: chunkIndex,
-      inflightAtFinalize: pending.length,
-      finalBodyBytes: finalBody.size,
-      uploadMode,
-      anyFailed: !!failed,
-    });
-    try {
-      const result = await finalizeAfterDurableBackup({
-        // Opening the browser must not make the desktop look idle until every
-        // trailing backup write and the final metadata are durable.
-        ensureBackupDurable: async () => {
-          await Promise.all([...backupWrites]);
-          if (backupFailure) throw backupFailure;
-          await persistBackupMeta({
-            durationMs,
-            width,
-            height,
-            bytes: backupBytes,
-            hasAudio: uploadCombined.getAudioTracks().length > 0,
-            hasCamera: wantsCamera,
-            chunkCount: backupChunkCount,
-            mimeType: finalMimeType,
-            lastError: null,
-          });
-        },
-        attemptFinalize: async () => {
-          try {
-            const finalRes = await fetch(finalizeUrl, {
-              method: "POST",
-              headers: { "Content-Type": "application/octet-stream" },
-              credentials: "include",
-              body: finalBody,
-              signal: AbortSignal.timeout(FINALIZE_UPLOAD_TIMEOUT_MS),
-            });
-            const bodyText = await finalRes.text().catch(() => "");
-            console.log(
-              "[clips-recorder] finalize response:",
-              finalRes.status,
-              bodyText.slice(0, 500),
-            );
-            if (!finalRes.ok) {
-              throw new Error(
-                `Finalize failed (${finalRes.status}): ${bodyText.slice(0, 200)}`,
-              );
-            }
-            const receipt = parseFinalizeReceipt(bodyText);
-            const receiptStatus = verifyFinalizeReceipt(receipt, {
-              bytes: backupBytes,
-              durationMs,
-            });
-            if (receiptStatus === "processing") {
-              scheduleBrowserBackupCleanupAfterProcessing({
-                serverUrl: params.serverUrl,
-                recordingId: id,
-                authToken: params.authToken,
-              });
-              return { recordingId: id, viewUrl };
-            }
-          } catch (err) {
-            console.error("[clips-recorder] finalize fetch failed:", err);
-            const error = err instanceof Error ? err : new Error(String(err));
-            if (
-              await recoverAcceptedRecordingAfterFinalizeError({
-                serverUrl: params.serverUrl,
-                recordingId: id,
-                authToken: params.authToken,
-              })
-            ) {
-              return { recordingId: id, viewUrl };
-            }
-            await markBrowserRecordingBackupError(id, error.message).catch(
-              () => {},
-            );
-            await abortRecordingUpload(params.serverUrl, id, error.message);
-            throw error;
-          }
-          await deleteBrowserRecordingBackup(id).catch((err) => {
-            console.warn("[clips-recorder] local backup cleanup failed:", err);
-          });
-
-          return { recordingId: id, viewUrl };
-        },
-        releaseGuard: clearRecordingState,
-      });
-      await publishFinalizingResult({
-        recordingId: id,
-        viewUrl: absoluteViewUrl,
-        ok: true,
-      });
-      return result;
-    } catch (err) {
-      await publishFinalizingResult({
-        recordingId: id,
-        viewUrl: absoluteViewUrl,
-        ok: false,
-        error: err instanceof Error ? err.message : String(err),
-      });
-      throw err;
-    }
-  };
+    };
 
-  const handle: RecorderHandle = {
-    stop: singleFlight(performStop),
+    const handle: RecorderHandle = {
+      stop: singleFlight(performStop),
 
-    async cancel() {
-      if (stopped) return;
-      stopped = true;
-      if (tickHandle) clearInterval(tickHandle);
-      stateUnlistens.forEach((u) => u());
-      stateUnlistens = [];
-      void transcriptionCapture?.cancel().catch((err) => {
-        console.warn("[clips-recorder] transcription cancel failed:", err);
-      });
-      // Remove MediaRecorder's data handler so any final `ondataavailable`
-      // from the stop() below doesn't push a new Blob into `inflight`
-      // after we've decided to discard everything.
-      recorder.ondataavailable = null;
-      try {
-        if (recorder.state !== "inactive") recorder.stop();
-      } catch {
-        // ignore
-      }
-      // Drop stream track references — same rationale as in stop(). This
-      // detaches only from the MediaStreams; the originating streams own the
-      // tracks and we stop them below.
-      try {
-        uploadCombined
-          .getTracks()
-          .forEach((t) => uploadCombined.removeTrack(t));
-        combined.getTracks().forEach((t) => combined.removeTrack(t));
-      } catch {
-        // ignore
-      }
-      // Stop the streams WE own. Camera stays alive when the popover
-      // owns it (see stop() for the same split).
-      [displayStream, audioStream].forEach((s) =>
-        s?.getTracks().forEach((t) => t.stop()),
-      );
-      streamCleanups.forEach((cleanup) => cleanup());
-      if (!popoverOwnsCamera) {
-        bubbleCameraStream?.getTracks().forEach((t) => t.stop());
-      }
-      // Drop remaining in-flight chunk Blobs aggressively. Their fetches
-      // will still settle (we don't AbortController them — dev server is
-      // local and won't hang long) but we no longer hold references to the
-      // Blobs via this Set. Combined with the `ondataavailable = null`
-      // above, this guarantees no new Blobs latch on during the stop.
-      inflight.clear();
-      await invoke("hide_recording_chrome").catch(() => {});
-      // Tell the server to abort the partial recording (drops chunks from
-      // application_state, flips the recording row to 'failed'), then trash
-      // it. This is best-effort background cleanup: redo/cancel must release
-      // the desktop chrome immediately even if the server is slow or offline.
-      if (id) {
-        void cleanupCancelledRemoteRecording(params.serverUrl, id).catch(
-          (err) => {
-            console.warn("[clips-recorder] abort failed (non-fatal):", err);
-          },
+      async cancel() {
+        if (stopped) return;
+        stopped = true;
+        if (tickHandle) clearInterval(tickHandle);
+        stateUnlistens.forEach((u) => u());
+        stateUnlistens = [];
+        void transcriptionCapture?.cancel().catch((err) => {
+          console.warn("[clips-recorder] transcription cancel failed:", err);
+        });
+        // Remove MediaRecorder's data handler so any final `ondataavailable`
+        // from the stop() below doesn't push a new Blob into `inflight`
+        // after we've decided to discard everything.
+        recorder.ondataavailable = null;
+        try {
+          if (recorder.state !== "inactive") recorder.stop();
+        } catch {
+          // ignore
+        }
+        // Drop stream track references — same rationale as in stop(). This
+        // detaches only from the MediaStreams; the originating streams own the
+        // tracks and we stop them below.
+        try {
+          uploadCombined
+            .getTracks()
+            .forEach((t) => uploadCombined.removeTrack(t));
+          combined.getTracks().forEach((t) => combined.removeTrack(t));
+        } catch {
+          // ignore
+        }
+        // Stop the streams WE own. Camera stays alive when the popover
+        // owns it (see stop() for the same split).
+        [displayStream, audioStream].forEach((s) =>
+          s?.getTracks().forEach((t) => t.stop()),
         );
-      }
-      await deleteBrowserRecordingBackup(id).catch((err) => {
-        console.warn("[clips-recorder] local backup cleanup failed:", err);
-      });
-    },
-  };
+        streamCleanups.forEach((cleanup) => cleanup());
+        if (!popoverOwnsCamera) {
+          bubbleCameraStream?.getTracks().forEach((t) => t.stop());
+        }
+        // Drop remaining in-flight chunk Blobs aggressively. Their fetches
+        // will still settle (we don't AbortController them — dev server is
+        // local and won't hang long) but we no longer hold references to the
+        // Blobs via this Set. Combined with the `ondataavailable = null`
+        // above, this guarantees no new Blobs latch on during the stop.
+        inflight.clear();
+        await invoke("hide_recording_chrome").catch(() => {});
+        // Tell the server to abort the partial recording (drops chunks from
+        // application_state, flips the recording row to 'failed'), then trash
+        // it. This is best-effort background cleanup: redo/cancel must release
+        // the desktop chrome immediately even if the server is slow or offline.
+        if (id) {
+          void cleanupCancelledRemoteRecording(params.serverUrl, id).catch(
+            (err) => {
+              console.warn("[clips-recorder] abort failed (non-fatal):", err);
+            },
+          );
+        }
+        await deleteBrowserRecordingBackup(id).catch((err) => {
+          console.warn("[clips-recorder] local backup cleanup failed:", err);
+        });
+      },
+    };
 
-  return handle;
+    return recorderWithCaptureSuspension(handle, releaseCaptureSuspension);
+  } catch (err) {
+    await releaseCaptureSuspension();
+    throw err;
+  }
 }