@agent-native/core 0.176.1 → 0.176.2-nightly-20260831184159

package/corpus/templates/clips/app/components/recorder/recorder-engine.ts

@@ -16,6 +16,7 @@ import {
   chunkUploadUrl,
   pickMimeType,
   pickMimeTypeCandidates,
+  UPLOAD_SLICE_BYTES,
   type UploadMode,
 } from "@shared/recording-core";
 
@@ -35,6 +36,11 @@ import {
   formatMb,
   type CompressionResult,
 } from "@/lib/compress";
+import {
+  deleteRecordingBackup,
+  putRecordingBackupChunk,
+  putRecordingBackupMeta,
+} from "@/lib/recording-backup";
 
 // Re-exported for existing callers; the canonical impls live in
 // @shared/recording-core and are shared with the Chrome extension recorder.
@@ -535,6 +541,13 @@ export class RecorderEngine {
   private localChunks: Blob[] = [];
   private totalRecordedBytes = 0;
   private lastFinalizeMeta: RecordingFinalizeMeta | null = null;
+  /**
+   * Count of chunks mirrored to IndexedDB for this take (`recording-backup.ts`).
+   * Best-effort and independent of `chunkIndex`/upload state — a mirror write
+   * failure never blocks or retries the actual upload.
+   */
+  private backupChunkIndex = 0;
+  private backupMirrorQueue: Promise<void> = Promise.resolve();
   /**
    * Owns the abort signal threaded into the compression pass so a `cancel()`
    * during a multi-minute ffmpeg.wasm encode actually terminates the worker
@@ -1195,6 +1208,7 @@ export class RecorderEngine {
     this.localChunks = [];
     this.totalRecordedBytes = 0;
     this.lastFinalizeMeta = null;
+    this.backupChunkIndex = 0;
     this.uploadAbort = new AbortController();
     this.uploadMode = this.opts.uploadMode ?? "buffered";
     this.uploadGenerationId = null;
@@ -1216,6 +1230,7 @@ export class RecorderEngine {
       // whether this recording needs compression.
       this.localChunks.push(blob);
       this.totalRecordedBytes += blob.size;
+      this.mirrorChunkToBackup(blob);
       if (this.uploadMode === "streaming") {
         this.pendingStreamBlobs.push(blob);
         this.pendingStreamBytes += blob.size;
@@ -1298,6 +1313,7 @@ export class RecorderEngine {
       }
     }
 
+    let backupCaptureComplete = this.recorder.state === "inactive";
     if (this.recorder.state === "inactive") {
       // The MediaRecorder may have auto-stopped if all its tracks ended
       // (e.g. display-only mode with no mic). Different browsers dispatch
@@ -1317,7 +1333,7 @@ export class RecorderEngine {
       // again would duplicate the final ~2s slice in `localChunks`,
       // inflating the assembled blob and corrupting the compressed
       // re-encode.
-      const finalDataAvailable = new Promise<void>((resolve) => {
+      const finalDataAvailable = new Promise<boolean>((resolve) => {
         let resolved = false;
         // Defer with a microtask so the start()-time listener's
         // synchronous body (push + queue upload) runs first — both
@@ -1329,7 +1345,7 @@ export class RecorderEngine {
           queueMicrotask(() => {
             if (resolved) return;
             resolved = true;
-            resolve();
+            resolve(true);
           });
         };
         this.recorder!.addEventListener("dataavailable", passthrough, {
@@ -1342,7 +1358,7 @@ export class RecorderEngine {
           if (resolved) return;
           resolved = true;
           this.recorder?.removeEventListener("dataavailable", passthrough);
-          resolve();
+          resolve(false);
         }, 10_000);
       });
 
@@ -1357,7 +1373,7 @@ export class RecorderEngine {
         throw err;
       }
 
-      await finalDataAvailable;
+      backupCaptureComplete = await finalDataAvailable;
     }
 
     const dimensions = this.readDimensions();
@@ -1371,6 +1387,9 @@ export class RecorderEngine {
       hasCamera,
     };
     this.lastFinalizeMeta = finalizeMeta;
+    if (backupCaptureComplete) {
+      this.markRecordingBackupComplete(finalizeMeta);
+    }
 
     // Stop camera and mic hardware immediately — privacy-sensitive inputs no
     // longer needed once the final chunk is flushed. The composite and display
@@ -1400,7 +1419,6 @@ export class RecorderEngine {
     }
 
     let result: Record<string, unknown> | undefined;
-    let completed = false;
     try {
       if (
         COMPRESSION_ENABLED &&
@@ -1444,7 +1462,6 @@ export class RecorderEngine {
         });
       }
       this.transition("complete");
-      completed = true;
     } catch (err) {
       // Reachable from compressAndReupload (compression failure, OOM,
       // reset-chunks failure, hard-cap exceeded, abort) and from the
@@ -1460,13 +1477,7 @@ export class RecorderEngine {
     } finally {
       // Always release hardware resources, even if the final upload failed.
       this.cleanupTracks();
-      // Keep the in-memory chunks after an upload failure so the error screen
-      // can retry the upload without making the user re-record. They are
-      // dropped on success or when cancel/restart runs.
-      if (completed) {
-        this.localChunks = [];
-        this.lastFinalizeMeta = null;
-      }
+      this.clearRecordingDataIfReady(result);
     }
 
     return this.toFinalizeResult(result, finalizeMeta);
@@ -1485,11 +1496,9 @@ export class RecorderEngine {
     this.uploadAbort = new AbortController();
 
     let result: Record<string, unknown> | undefined;
-    let completed = false;
     try {
       result = await this.uploadBufferedChunks(meta, this.uploadAbort.signal);
       this.transition("complete");
-      completed = true;
       return this.toFinalizeResult(result, meta);
     } catch (err) {
       const e = err instanceof Error ? err : new Error(errorMessage(err));
@@ -1499,13 +1508,19 @@ export class RecorderEngine {
       this.transition("error", { message: e.message });
       throw e;
     } finally {
-      if (completed) {
-        this.localChunks = [];
-        this.lastFinalizeMeta = null;
-      }
+      this.clearRecordingDataIfReady(result);
     }
   }
 
+  private clearRecordingDataIfReady(
+    result: Record<string, unknown> | undefined,
+  ): void {
+    if (result?.status !== "ready") return;
+    this.localChunks = [];
+    this.lastFinalizeMeta = null;
+    this.clearRecordingBackup();
+  }
+
   private toFinalizeResult(
     result: Record<string, unknown> | undefined,
     meta: RecordingFinalizeMeta,
@@ -1792,6 +1807,7 @@ export class RecorderEngine {
     this.localChunks = [];
     this.totalRecordedBytes = 0;
     this.lastFinalizeMeta = null;
+    this.clearRecordingBackup();
     this.transition("idle");
 
     if (this.opts.abortUrl) {
@@ -2014,7 +2030,6 @@ export class RecorderEngine {
 
     // Keep binary uploads comfortably under Netlify's effective function
     // payload limit. This mirrors the local-file upload path in record.tsx.
-    const UPLOAD_SLICE_BYTES = 3 * 1024 * 1024;
     const PARALLELISM = 4;
     const totalSlices = Math.max(1, Math.ceil(blob.size / UPLOAD_SLICE_BYTES));
 
@@ -2386,6 +2401,70 @@ export class RecorderEngine {
     );
   }
 
+  /**
+   * Mirror one raw chunk to IndexedDB so the library can retry this upload
+   * from this browser later, even after a reload. Fire-and-forget and never
+   * allowed to affect the recording/upload path — a mirror write failure (a
+   * private browsing tab, IndexedDB disabled, quota exceeded) is silently
+   * dropped, the same as a lost desktop local-file write would just mean no
+   * recovery option rather than a broken recording.
+   */
+  private mirrorChunkToBackup(blob: Blob): void {
+    const recordingId = this.opts.recordingId;
+    if (!recordingId || recordingId === "__pending__") return;
+    const index = this.backupChunkIndex++;
+    const dimensions = this.readDimensions();
+    this.backupMirrorQueue = this.backupMirrorQueue
+      .then(async () => {
+        await putRecordingBackupChunk(recordingId, index, blob);
+        await putRecordingBackupMeta({
+          recordingId,
+          mimeType: this.mimeType,
+          durationMs: Math.round(this.getElapsedMs()),
+          width: dimensions.width,
+          height: dimensions.height,
+          hasAudio: this.hasAudioTrack(),
+          hasCamera: !!this.cameraStream,
+          bytes: this.totalRecordedBytes,
+          chunkCount: index + 1,
+          savedAt: new Date().toISOString(),
+          completedAt: null,
+        });
+      })
+      .catch(() => {});
+  }
+
+  private markRecordingBackupComplete(meta: RecordingFinalizeMeta): void {
+    const recordingId = this.opts.recordingId;
+    if (!recordingId || recordingId === "__pending__") return;
+    this.backupMirrorQueue = this.backupMirrorQueue
+      .then(() => {
+        const completedAt = new Date().toISOString();
+        return putRecordingBackupMeta({
+          recordingId,
+          mimeType: this.mimeType,
+          durationMs: meta.durationMs,
+          width: meta.dimensions.width,
+          height: meta.dimensions.height,
+          hasAudio: meta.hasAudio,
+          hasCamera: meta.hasCamera,
+          bytes: this.totalRecordedBytes,
+          chunkCount: this.backupChunkIndex,
+          savedAt: completedAt,
+          completedAt,
+        });
+      })
+      .catch(() => {});
+  }
+
+  private clearRecordingBackup(): void {
+    const recordingId = this.opts.recordingId;
+    if (!recordingId || recordingId === "__pending__") return;
+    this.backupMirrorQueue = this.backupMirrorQueue
+      .then(() => deleteRecordingBackup(recordingId))
+      .catch(() => {});
+  }
+
   /** Best-effort — unsupported browsers or a denied request must never block capture. */
   private async acquireWakeLock(): Promise<void> {
     // The platform drops a screen wake lock the moment the document goes

package/corpus/templates/clips/app/components/recorder/recording-toolbar.tsx

@@ -1,18 +1,13 @@
 import { useT } from "@agent-native/core/client/i18n";
-import {
-  IconPlayerPause,
-  IconPlayerPlay,
-  IconPlayerStop,
-  IconTrash,
-} from "@tabler/icons-react";
+import { LiveWaveform } from "@shared/live-waveform";
+import type {
+  RecordingPlayheadConfirmChange,
+  RecordingPlayheadIntent,
+  RecordingPlayheadLayout,
+} from "@shared/recording-playhead";
+import { RecordingPlayhead } from "@shared/recording-playhead";
 import { useEffect, useRef, useState } from "react";
 
-import {
-  Tooltip,
-  TooltipContent,
-  TooltipTrigger,
-} from "@/components/ui/tooltip";
-
 import { clampRectToViewport, type BubblePosition } from "./camera-positioner";
 
 export interface RecordingToolbarProps {
@@ -24,23 +19,22 @@ export interface RecordingToolbarProps {
   isPaused: boolean;
   onTogglePause: () => void;
   onStop: () => void;
+  /** Used by the upload/compress state, where delete still opens the route's
+   * existing confirmation dialog even though the playhead is not live. */
   onCancel: () => void;
+  onConfirmAction: (intent: RecordingPlayheadIntent) => void;
+  onConfirmChange: (change: RecordingPlayheadConfirmChange) => void;
 }
 
-const TOOLBAR_WIDTH = 232;
+// The shared playhead's resting width is the initial drag bound. The measured
+// layout below expands that bound before the playhead reveals controls.
+const TOOLBAR_WIDTH = 150;
 const TOOLBAR_HEIGHT = 56;
 // Drop the toolbar just below the centered "Recording your screen…" status
 // text (which sits at the viewport's vertical center) so the controls don't
 // overlap it.
 const TOOLBAR_TOP_OFFSET = 48;
 
-function formatElapsed(ms: number): string {
-  const totalSeconds = Math.max(0, Math.floor(ms / 1000));
-  const m = Math.floor(totalSeconds / 60);
-  const s = totalSeconds % 60;
-  return `${String(m).padStart(2, "0")}:${String(s).padStart(2, "0")}`;
-}
-
 export function RecordingToolbar({
   active,
   getElapsedMs,
@@ -48,6 +42,8 @@ export function RecordingToolbar({
   onTogglePause,
   onStop,
   onCancel,
+  onConfirmAction,
+  onConfirmChange,
 }: RecordingToolbarProps) {
   const t = useT();
   const rootRef = useRef<HTMLDivElement>(null);
@@ -63,6 +59,7 @@ export function RecordingToolbar({
     }, 250);
     return () => window.clearInterval(id);
   }, [active]);
+
   const [pos, setPos] = useState<BubblePosition>(() =>
     typeof window === "undefined"
       ? { left: 16, top: 16, corner: "tl" }
@@ -74,19 +71,61 @@ export function RecordingToolbar({
   );
   const [dragging, setDragging] = useState(false);
   const dragOffsetRef = useRef({ dx: 0, dy: 0 });
+  const [toolbarLayout, setToolbarLayout] = useState<RecordingPlayheadLayout>({
+    width: TOOLBAR_WIDTH,
+    height: TOOLBAR_HEIGHT,
+  });
+  const [pendingAction, setPendingAction] =
+    useState<RecordingPlayheadIntent | null>(null);
+  const toolbarLayoutRef = useRef(toolbarLayout);
+  toolbarLayoutRef.current = toolbarLayout;
+
+  useEffect(() => {
+    if (!active) setPendingAction(null);
+  }, [active]);
+
+  function handlePlayheadLayoutChange(layout: RecordingPlayheadLayout) {
+    const nextLayout = {
+      width: Math.max(TOOLBAR_WIDTH, Math.ceil(layout.width)),
+      height: Math.max(TOOLBAR_HEIGHT, Math.ceil(layout.height)),
+    };
+    toolbarLayoutRef.current = nextLayout;
+    setToolbarLayout((previous) =>
+      previous.width === nextLayout.width &&
+      previous.height === nextLayout.height
+        ? previous
+        : nextLayout,
+    );
+    setPos((previous) => {
+      const clamped = clampRectToViewport(
+        previous.left,
+        previous.top,
+        nextLayout,
+        {
+          width: window.innerWidth,
+          height: window.innerHeight,
+        },
+      );
+      if (clamped.left === previous.left && clamped.top === previous.top) {
+        return previous;
+      }
+      return { ...previous, left: clamped.left, top: clamped.top };
+    });
+  }
+
+  function handlePlayheadConfirmAction(intent: RecordingPlayheadIntent) {
+    setPendingAction(intent);
+    onConfirmAction(intent);
+  }
 
   useEffect(() => {
     function onResize() {
+      const layout = toolbarLayoutRef.current;
       setPos((p) => {
-        const clamped = clampRectToViewport(
-          p.left,
-          p.top,
-          { width: TOOLBAR_WIDTH, height: TOOLBAR_HEIGHT },
-          {
-            width: window.innerWidth,
-            height: window.innerHeight,
-          },
-        );
+        const clamped = clampRectToViewport(p.left, p.top, layout, {
+          width: window.innerWidth,
+          height: window.innerHeight,
+        });
         return {
           ...p,
           left: clamped.left,
@@ -101,7 +140,7 @@ export function RecordingToolbar({
 
   function onPointerDown(e: React.PointerEvent<HTMLDivElement>) {
     const target = e.target as HTMLElement;
-    if (target.closest("[data-toolbar-btn]")) return;
+    if (target.closest("[data-recording-playhead-button]")) return;
     if (!rootRef.current) return;
     const rect = rootRef.current.getBoundingClientRect();
     dragOffsetRef.current = {
@@ -115,12 +154,11 @@ export function RecordingToolbar({
   function onPointerMove(e: React.PointerEvent<HTMLDivElement>) {
     if (!dragging) return;
     const { dx, dy } = dragOffsetRef.current;
-    const left = e.clientX - dx;
-    const top = e.clientY - dy;
+    const layout = toolbarLayoutRef.current;
     const clamped = clampRectToViewport(
-      left,
-      top,
-      { width: TOOLBAR_WIDTH, height: TOOLBAR_HEIGHT },
+      e.clientX - dx,
+      e.clientY - dy,
+      layout,
       { width: window.innerWidth, height: window.innerHeight },
     );
     setPos((prev) => ({ ...prev, left: clamped.left, top: clamped.top }));
@@ -128,106 +166,62 @@ export function RecordingToolbar({
 
   function onPointerUp(e: React.PointerEvent<HTMLDivElement>) {
     if (!rootRef.current) return;
-    rootRef.current.releasePointerCapture(e.pointerId);
+    if (rootRef.current.hasPointerCapture(e.pointerId)) {
+      rootRef.current.releasePointerCapture(e.pointerId);
+    }
     setDragging(false);
   }
 
-  const bg = isPaused ? "bg-white text-black" : "bg-black/85 text-white";
-
   return (
     <div
       ref={rootRef}
-      role="toolbar"
-      aria-label={t("recordingToolbar.controls")}
       onPointerDown={onPointerDown}
       onPointerMove={onPointerMove}
       onPointerUp={onPointerUp}
       onPointerCancel={onPointerUp}
       className={
-        "fixed z-[95] flex items-center gap-1 rounded-full px-3 py-2 shadow-2xl backdrop-blur " +
-        bg +
-        (dragging ? " cursor-grabbing" : " cursor-grab")
+        dragging ? "fixed z-[95] cursor-grabbing" : "fixed z-[95] cursor-grab"
       }
       style={{
         left: pos.left,
         top: pos.top,
+        width: "max-content",
         minWidth: TOOLBAR_WIDTH,
-        height: TOOLBAR_HEIGHT,
+        minHeight: toolbarLayout.height,
         touchAction: "none",
       }}
     >
-      <Tooltip>
-        <TooltipTrigger asChild>
-          <button
-            data-toolbar-btn
-            type="button"
-            onClick={onTogglePause}
-            className="flex h-9 w-9 items-center justify-center rounded-full hover:bg-white/15"
-            aria-label={
-              isPaused
-                ? t("recordingToolbar.resumeRecording")
-                : t("recordingToolbar.pauseRecording")
-            }
-          >
-            {isPaused ? (
-              <IconPlayerPlay className="h-4 w-4" />
-            ) : (
-              <IconPlayerPause className="h-4 w-4" />
-            )}
-          </button>
-        </TooltipTrigger>
-        <TooltipContent>
-          {isPaused
-            ? t("recordingToolbar.resumeShortcut")
-            : t("recordingToolbar.pauseShortcut")}
-        </TooltipContent>
-      </Tooltip>
-
-      <Tooltip>
-        <TooltipTrigger asChild>
-          <button
-            data-toolbar-btn
-            type="button"
-            onClick={onStop}
-            className="flex h-9 w-9 items-center justify-center rounded-full bg-white text-black hover:bg-white/85"
-            aria-label={t("recordingToolbar.stop")}
-          >
-            <IconPlayerStop className="h-4 w-4" />
-          </button>
-        </TooltipTrigger>
-        <TooltipContent>{t("recordingToolbar.stop")}</TooltipContent>
-      </Tooltip>
-
-      <div
-        className="mx-2 flex h-9 items-center gap-2 rounded-full bg-white/10 px-3 text-sm font-mono tabular-nums"
-        aria-label={t("recordingToolbar.elapsed")}
-      >
-        <span
-          className="inline-block h-2 w-2 rounded-full bg-white"
-          style={{
-            animation: isPaused ? "none" : "pulse 1s ease-in-out infinite",
-          }}
-        />
-        {formatElapsed(elapsedMs)}
-        {isPaused && (
-          <span className="text-[10px] uppercase tracking-wide">Paused</span>
-        )}
-      </div>
-
-      <Tooltip>
-        <TooltipTrigger asChild>
-          <button
-            data-toolbar-btn
-            type="button"
-            onClick={onCancel}
-            className="flex h-9 w-9 items-center justify-center rounded-full hover:bg-white/15"
-            aria-label={t("recordingToolbar.cancel")}
-          >
-            <IconTrash className="h-4 w-4" />
-          </button>
-        </TooltipTrigger>
-        <TooltipContent>{t("recordingToolbar.cancelShortcut")}</TooltipContent>
-      </Tooltip>
+      <RecordingPlayhead
+        elapsedMs={elapsedMs}
+        paused={isPaused}
+        enabled={active}
+        pendingAction={pendingAction}
+        meter={<LiveWaveform level={null} dimmed={!active || isPaused} />}
+        labels={{
+          controls: t("recordingToolbar.controls"),
+          stop: t("recordingToolbar.stop"),
+          pause: t("recordingToolbar.pauseRecording"),
+          resume: t("recordingToolbar.resumeRecording"),
+          pauseShortcut: t("recordingToolbar.pauseShortcut"),
+          resumeShortcut: t("recordingToolbar.resumeShortcut"),
+          restart: t("recordingToolbar.restart"),
+          restartShortcut: t("recordingToolbar.restartShortcut"),
+          delete: t("recordingToolbar.cancel"),
+          deleteShortcut: t("recordingToolbar.cancelShortcut"),
+          restartQuestion: t("recordingToolbar.restartQuestion"),
+          deleteQuestion: () => t("recordingToolbar.discardConfirmTitle"),
+          restartConfirm: t("recordingToolbar.restartConfirm"),
+          deleteConfirm: t("recordingToolbar.discardRecording"),
+          resumeConfirm: t("recordingToolbar.resume"),
+        }}
+        onStop={onStop}
+        onTogglePause={onTogglePause}
+        onConfirmAction={handlePlayheadConfirmAction}
+        onDeleteRequest={onCancel}
+        onConfirmChange={onConfirmChange}
+        onLayoutChange={handlePlayheadLayoutChange}
+        className={active ? undefined : "opacity-80"}
+      />
     </div>
   );
 }