Concurrent sweep: clips desktop local-export + AGENTS.md status-block wording (BuilderIO#1043)

Author: steve8708

AGENTS.md

@@ -24,18 +24,20 @@ read the relevant skill before changing that area.
 
 ## Final Status Block
 
-Every final response must end with exactly:
+Every final response must end with a three-line status block:
 
 ```md
 ---
 
 ⠀
-🟢 Brief status
+🟢 Actual concise status sentence
 ```
 
-Use `🟢` when the requested coding/work unit is finished on the current branch,
-even if routine commit/PR/deploy/CI remains. Use `🟡` when non-routine work or a
-manual step is still pending. Use `🔴` only when blocked on user input.
+The words after the icon are a short, task-specific status written for this
+response; never use the placeholder text `Brief status` literally. Use `🟢`
+when the requested coding/work unit is finished on the current branch, even if
+routine commit/PR/deploy/CI remains. Use `🟡` when non-routine work or a manual
+step is still pending. Use `🔴` only when blocked on user input.
 
 ## Architecture Contract
 

templates/clips/desktop/src/app.tsx

@@ -17,6 +17,7 @@ import {
 } from "./lib/bubble-webrtc";
 import {
   discardBrowserRecordingBackup,
+  exportBrowserRecordingBackup,
   listBrowserRecordingBackups,
   retryBrowserRecordingBackup,
   shouldUseNativeFullscreenRecording,
@@ -40,6 +41,7 @@ import {
   IconAlertTriangle,
   IconArrowLeft,
   IconCircleCheck,
+  IconDownload,
   IconFolderOpen,
   IconPencil,
   IconInfoCircle,
@@ -629,6 +631,9 @@ export function App() {
     [],
   );
   const [retryingUploadId, setRetryingUploadId] = useState<string | null>(null);
+  const [exportingUploadId, setExportingUploadId] = useState<string | null>(
+    null,
+  );
   const [discardingUploadId, setDiscardingUploadId] = useState<string | null>(
     null,
   );
@@ -1961,7 +1966,7 @@ export function App() {
   }
 
   async function retryPendingUpload(upload: PendingDesktopUpload) {
-    if (retryingUploadId || discardingUploadId) return;
+    if (retryingUploadId || exportingUploadId || discardingUploadId) return;
     const targetServerUrl = serverUrlForPendingUpload(upload, serverUrl);
     setRecError(null);
     setRetryingUploadId(upload.recordingId);
@@ -1998,8 +2003,38 @@ export function App() {
     }
   }
 
+  async function exportPendingUpload(upload: PendingDesktopUpload) {
+    if (retryingUploadId || exportingUploadId || discardingUploadId) return;
+    setRecError(null);
+
+    if (upload.kind === "native") {
+      openPendingUploadFolder(upload);
+      return;
+    }
+
+    setExportingUploadId(upload.recordingId);
+    try {
+      const exportResult = await exportBrowserRecordingBackup(
+        upload.recordingId,
+      );
+      setLocalRecordingNotice({
+        folderPath: exportResult.folderPath,
+        files: [exportResult.file],
+      });
+      await invoke("open_local_recording_folder", {
+        path: exportResult.folderPath,
+      });
+    } catch (err) {
+      const message = err instanceof Error ? err.message : String(err);
+      console.error("[clips-tray] export saved upload failed:", err);
+      setRecError(message);
+    } finally {
+      setExportingUploadId(null);
+    }
+  }
+
   async function discardPendingUpload(upload: PendingDesktopUpload) {
-    if (retryingUploadId || discardingUploadId) return;
+    if (retryingUploadId || exportingUploadId || discardingUploadId) return;
     setRecError(null);
     setDiscardingUploadId(upload.recordingId);
     setPendingUploads((uploads) =>
@@ -2511,7 +2546,9 @@ export function App() {
         <PendingUploadBanner
           uploads={pendingUploads}
           retryingUploadId={retryingUploadId}
+          exportingUploadId={exportingUploadId}
           discardingUploadId={discardingUploadId}
+          onExport={exportPendingUpload}
           onRetry={retryPendingUpload}
           onDiscard={discardPendingUpload}
           onOpenFolder={openPendingUploadFolder}
@@ -2877,14 +2914,18 @@ function PermissionRecoveryBanner({
 function PendingUploadBanner({
   uploads,
   retryingUploadId,
+  exportingUploadId,
   discardingUploadId,
+  onExport,
   onRetry,
   onDiscard,
   onOpenFolder,
 }: {
   uploads: PendingDesktopUpload[];
   retryingUploadId: string | null;
+  exportingUploadId: string | null;
   discardingUploadId: string | null;
+  onExport: (upload: PendingDesktopUpload) => void;
   onRetry: (upload: PendingDesktopUpload) => void;
   onDiscard: (upload: PendingDesktopUpload) => void;
   onOpenFolder: (upload: PendingDesktopUpload) => void;
@@ -2893,7 +2934,11 @@ function PendingUploadBanner({
   if (!latest) return null;
 
   const retrying = retryingUploadId === latest.recordingId;
+  const exporting = exportingUploadId === latest.recordingId;
   const canOpenFolder = latest.kind === "native" && !!latest.folderPath;
+  const canExport = latest.kind === "browser";
+  const actionsDisabled =
+    !!retryingUploadId || !!exportingUploadId || !!discardingUploadId;
   const savedLabel =
     uploads.length === 1
       ? "1 Clip saved locally"
@@ -2923,18 +2968,30 @@ function PendingUploadBanner({
           <button
             type="button"
             className="pending-upload-folder"
-            disabled={discardingUploadId === latest.recordingId}
+            disabled={actionsDisabled}
             onClick={() => onOpenFolder(latest)}
             aria-label="Open saved local clip folder"
             title="Open saved local clip folder"
           >
             <IconFolderOpen size={14} stroke={2} />
           </button>
         ) : null}
+        {canExport ? (
+          <button
+            type="button"
+            className="pending-upload-folder"
+            disabled={actionsDisabled}
+            onClick={() => onExport(latest)}
+            aria-label="Download saved local clip"
+            title="Download saved local clip"
+          >
+            <IconDownload size={14} stroke={2} />
+          </button>
+        ) : null}
         <button
           type="button"
           className="pending-upload-retry"
-          disabled={!!retryingUploadId || !!discardingUploadId}
+          disabled={actionsDisabled}
           onClick={() => onRetry(latest)}
         >
           <IconRefresh size={14} stroke={2} />
@@ -2943,7 +3000,7 @@ function PendingUploadBanner({
         <button
           type="button"
           className="pending-upload-discard"
-          disabled={!!retryingUploadId || !!discardingUploadId}
+          disabled={actionsDisabled}
           onClick={() => onDiscard(latest)}
           aria-label="Discard saved local clip"
           title="Discard saved local clip"

templates/clips/desktop/src/lib/local-export.ts

@@ -38,6 +38,12 @@ export interface LocalRecordingExportHandle {
   cancel(): Promise<void>;
 }
 
+export interface LocalBlobExportResult {
+  folderPath: string;
+  folderName: string;
+  file: LocalExportedFile;
+}
+
 interface PreparedLocalTarget {
   role: LocalRecordingFileRole;
   stream: MediaStream;
@@ -52,7 +58,7 @@ interface PreparedLocalTarget {
   writeQueue: Promise<void>;
 }
 
-const LOCAL_EXPORT_FOLDER = "Clips";
+export const LOCAL_EXPORT_FOLDER = "Clips";
 
 function pickRecordingMimeType(): string {
   return (
@@ -64,7 +70,7 @@ function pickRecordingMimeType(): string {
   );
 }
 
-function extensionForMimeType(mimeType: string): string {
+export function extensionForMimeType(mimeType: string): string {
   const normalized = mimeType.toLowerCase();
   if (normalized.includes("mp4")) return "mp4";
   if (normalized.includes("quicktime")) return "mov";
@@ -85,6 +91,96 @@ export function createLocalRecordingFolderName(): string {
   return `clip-${timestamp}-${nonce}`;
 }
 
+export async function exportBlobChunksToLocalRecordingFile({
+  chunks,
+  role = "composed",
+  mimeType,
+  folderName,
+  durationMs = 0,
+  width = null,
+  height = null,
+}: {
+  chunks: Blob[];
+  role?: LocalRecordingFileRole;
+  mimeType: string;
+  folderName?: string;
+  durationMs?: number;
+  width?: number | null;
+  height?: number | null;
+}): Promise<LocalBlobExportResult> {
+  if (chunks.length === 0) {
+    throw new Error("No saved recording chunks are available to export");
+  }
+
+  const resolvedFolderName = folderName ?? createLocalRecordingFolderName();
+  const relativeFolderPath = `${LOCAL_EXPORT_FOLDER}/${resolvedFolderName}`;
+  const normalizedMimeType = mimeType || "video/webm";
+  const fileName = `${roleFileSuffix(role)}.${extensionForMimeType(
+    normalizedMimeType,
+  )}`;
+  const relativePath = `${relativeFolderPath}/${fileName}`;
+
+  await mkdir(relativeFolderPath, {
+    baseDir: BaseDirectory.Video,
+    recursive: true,
+  });
+
+  const folderPath = await join(await videoDir(), relativeFolderPath);
+  const filePath = await join(folderPath, fileName);
+  const file = await create(relativePath, {
+    baseDir: BaseDirectory.Video,
+  });
+
+  let bytes = 0;
+  let closed = false;
+  try {
+    for (const chunk of chunks) {
+      if (!chunk || chunk.size === 0) continue;
+      const data = new Uint8Array(await chunk.arrayBuffer());
+      if (data.byteLength === 0) continue;
+      const written = await file.write(data);
+      if (written !== data.byteLength) {
+        throw new Error(
+          `Short write for ${fileName}: wrote ${written} of ${data.byteLength} bytes`,
+        );
+      }
+      bytes += written;
+    }
+    await file.close();
+    closed = true;
+  } catch (err) {
+    if (!closed) {
+      await file.close().catch(() => {});
+    }
+    await remove(relativePath, {
+      baseDir: BaseDirectory.Video,
+    }).catch(() => {});
+    throw err;
+  }
+
+  if (bytes === 0) {
+    await remove(relativePath, {
+      baseDir: BaseDirectory.Video,
+    }).catch(() => {});
+    throw new Error("Saved recording export was empty");
+  }
+
+  return {
+    folderPath,
+    folderName: resolvedFolderName,
+    file: {
+      role,
+      path: filePath,
+      fileName,
+      mimeType: normalizedMimeType,
+      bytes,
+      durationMs,
+      width,
+      height,
+    },
+  };
+}
+
 function enqueueWrite(target: PreparedLocalTarget, blob: Blob) {
   target.writeQueue = target.writeQueue
     .then(async () => {

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

@@ -53,7 +53,9 @@ import { open as openExternal } from "@tauri-apps/plugin-shell";
 import { createCameraCompositeStream } from "./camera-composite";
 import {
   createLocalRecordingFolderName,
+  exportBlobChunksToLocalRecordingFile,
   prepareLocalRecordingExport,
+  type LocalBlobExportResult,
   type LocalRecordingExportHandle,
   type LocalExportedFile,
   type LocalRecordingTarget,
@@ -569,6 +571,28 @@ export async function discardBrowserRecordingBackup(
   await deleteBrowserRecordingBackup(recordingId);
 }
 
+export async function exportBrowserRecordingBackup(
+  recordingId: string,
+): Promise<LocalBlobExportResult> {
+  const meta = await getBrowserRecordingBackupMeta(recordingId);
+  if (!meta) {
+    throw new Error("Local recording backup not found");
+  }
+  const chunks = await getBrowserRecordingBackupChunks(recordingId);
+  if (chunks.length === 0) {
+    throw new Error("Local recording backup has no chunks");
+  }
+
+  return exportBlobChunksToLocalRecordingFile({
+    chunks: chunks.map((chunk) => chunk.blob),
+    role: "composed",
+    mimeType: meta.mimeType || chunks[0]?.mimeType || "video/webm",
+    durationMs: meta.durationMs,
+    width: meta.width,
+    height: meta.height,
+  });
+}
+
 async function markBrowserRecordingBackupError(
   recordingId: string,
   error: string,
@@ -2749,6 +2773,16 @@ async function startNativeRecordingInner(
       elapsedMs,
     }).catch(() => {});
   }
+
+  async function openFailedRecordingPage() {
+    const viewUrl = `/r/${id}?saveFailed=1`;
+    try {
+      await openExternal(`${params.serverUrl.replace(/\/+$/, "")}${viewUrl}`);
+    } catch (err) {
+      console.error("[clips-recorder] openExternal failed:", err);
+    }
+  }
+
   const tickHandle = setInterval(() => emitState(pausedAt != null), 500);
 
   // 5. Wire toolbar events.
@@ -2987,6 +3021,7 @@ async function startNativeRecordingInner(
         invoke("hide_finalizing").catch((err) =>
           console.error("[clips-recorder] hide_finalizing failed:", err),
         );
+        await openFailedRecordingPage();
         throw failed;
       }
 
@@ -3027,9 +3062,11 @@ async function startNativeRecordingInner(
         await markBrowserRecordingBackupError(id, error.message).catch(
           () => {},
         );
+        await abortRecordingUpload(params.serverUrl, id, error.message);
         invoke("hide_finalizing").catch((hideErr) =>
           console.error("[clips-recorder] hide_finalizing failed:", hideErr),
         );
+        await openFailedRecordingPage();
         throw error;
       }
       await deleteBrowserRecordingBackup(id).catch((err) => {