@agent-native/core 0.84.20 → 0.84.22

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

@@ -6,7 +6,12 @@
  * but no React state lives here — callers subscribe via `onState`, `onChunk`,
  * and `onError`.
  */
-import { appBasePath, captureClientException } from "@agent-native/core/client";
+import {
+  appBasePath,
+  captureClientException,
+  trackEvent,
+} from "@agent-native/core/client";
+import { waitForReadyRecordingAfterFinalizeError } from "@shared/finalize-recovery";
 import {
   chunkUploadUrl,
   pickMimeType,
@@ -40,6 +45,25 @@ export type DisplaySurface = "monitor" | "window" | "browser";
 export const NO_MIC_DEVICE_ID = "__clips_no_microphone__";
 export const NO_CAMERA_DEVICE_ID = "__clips_no_camera__";
 
+export function supportsBrowserTabCapture(): boolean {
+  if (typeof navigator === "undefined") return false;
+  const userAgent = navigator.userAgent || "";
+  if (/AgentNativeDesktop|Electron|Tauri|WKWebView|WebView/i.test(userAgent)) {
+    return false;
+  }
+  const isChromium =
+    /Chrome|Chromium|CriOS|Edg|OPR/i.test(userAgent) &&
+    !/Firefox|FxiOS/i.test(userAgent);
+  return isChromium;
+}
+
+export function normalizeDisplaySurfaceForRuntime(
+  surface: DisplaySurface,
+): DisplaySurface {
+  if (surface === "browser" && !supportsBrowserTabCapture()) return "window";
+  return surface;
+}
+
 type ExtendedDisplayMediaOptions = DisplayMediaStreamOptions & {
   video: MediaTrackConstraints & { displaySurface?: DisplaySurface };
   preferCurrentTab?: boolean;
@@ -334,6 +358,19 @@ function isRetryableChunkUploadStatus(status: number): boolean {
   return RETRYABLE_CHUNK_UPLOAD_STATUSES.has(status);
 }
 
+function trackClipUploadBlockingFailure(props: Record<string, unknown>): void {
+  try {
+    trackEvent("clips_upload_blocking_failure", {
+      app: "clips",
+      template: "clips",
+      surface: "web_recorder",
+      ...props,
+    });
+  } catch {
+    // Analytics should never change recording behavior.
+  }
+}
+
 function retryDelayMs(attempt: number): number {
   return attempt === 1 ? 500 : 1500;
 }
@@ -626,7 +663,9 @@ export class RecorderEngine {
       // directly anchored to the user's click. Camera/mic prompts do not need
       // that transient activation, and launching them in parallel with the
       // screen picker can make Chrome/macOS report a false permission failure.
-      const displaySurface = this.opts.displaySurface ?? "window";
+      const displaySurface = normalizeDisplaySurfaceForRuntime(
+        this.opts.displaySurface ?? "window",
+      );
       const displayOptions: ExtendedDisplayMediaOptions = {
         video: {
           frameRate: {
@@ -1699,6 +1738,7 @@ export class RecorderEngine {
 
     const body = await blob.arrayBuffer();
     let res: Response | null = null;
+    let triedFinalUploadRecovery = false;
     for (let attempt = 1; attempt <= CHUNK_UPLOAD_MAX_ATTEMPTS; attempt++) {
       try {
         res = await fetch(url, {
@@ -1718,6 +1758,13 @@ export class RecorderEngine {
           attempt >= CHUNK_UPLOAD_MAX_ATTEMPTS ||
           (err as { name?: string } | null)?.name === "AbortError"
         ) {
+          if (
+            extra.isFinal &&
+            (err as { name?: string } | null)?.name !== "AbortError"
+          ) {
+            const recovered = await this.recoverReadyAfterFinalUploadError();
+            if (recovered) return recovered;
+          }
           throw err;
         }
         await waitForRetry(retryDelayMs(attempt), extra.signal);
@@ -1729,6 +1776,13 @@ export class RecorderEngine {
         attempt < CHUNK_UPLOAD_MAX_ATTEMPTS &&
         isRetryableChunkUploadStatus(res.status)
       ) {
+        if (extra.isFinal && res.status === 504) {
+          triedFinalUploadRecovery = true;
+          await res.text().catch(() => "");
+          const recovered = await this.recoverReadyAfterFinalUploadError();
+          if (recovered) return recovered;
+          break;
+        }
         await res.text().catch(() => "");
         await waitForRetry(retryDelayMs(attempt), extra.signal);
         continue;
@@ -1738,6 +1792,15 @@ export class RecorderEngine {
     }
 
     if (!res) {
+      trackClipUploadBlockingFailure({
+        stage: "chunk_upload",
+        failureKind: "no_response",
+        recordingId: this.opts.recordingId,
+        chunkIndex: index,
+        isFinal: extra.isFinal === true,
+        chunkBytes: blob.size,
+        uploadMode: this.opts.uploadMode,
+      });
       throw new Error(`Chunk ${index} upload failed: no response`);
     }
 
@@ -1746,6 +1809,28 @@ export class RecorderEngine {
       const err = new Error(
         `Chunk ${index} upload failed (${res.status}): ${text || res.statusText}`,
       );
+      if (
+        extra.isFinal &&
+        !triedFinalUploadRecovery &&
+        this.isFinalUploadRecoveryCandidate(res.status, err)
+      ) {
+        const recovered = await this.recoverReadyAfterFinalUploadError();
+        if (recovered) return recovered;
+      }
+      trackClipUploadBlockingFailure({
+        stage: "chunk_upload",
+        failureKind: "http_error",
+        recordingId: this.opts.recordingId,
+        chunkIndex: index,
+        isFinal: extra.isFinal === true,
+        httpStatus: res.status,
+        statusText: res.statusText,
+        chunkBytes: blob.size,
+        uploadMode: this.opts.uploadMode,
+        finalUploadRecoveryAttempted:
+          extra.isFinal === true &&
+          this.isFinalUploadRecoveryCandidate(res.status, err),
+      });
       // Capture rich context to Sentry BEFORE throwing — when this hits
       // production we want enough breadcrumbs in the event to debug a
       // "Builder.io upload failed (500)" without re-running the upload.
@@ -1799,6 +1884,25 @@ export class RecorderEngine {
     }
   }
 
+  private isFinalUploadRecoveryCandidate(
+    status: number,
+    error: Error,
+  ): boolean {
+    if (status === 413) return false;
+    return !/too large|exceeds.*limit|chunk too large/i.test(error.message);
+  }
+
+  private async recoverReadyAfterFinalUploadError(): Promise<Record<
+    string,
+    unknown
+  > | null> {
+    return waitForReadyRecordingAfterFinalizeError({
+      uploadUrl: this.opts.uploadUrl,
+      recordingId: this.opts.recordingId,
+      preferAuthenticated: true,
+    });
+  }
+
   private readDimensions(): { width: number; height: number } {
     const videoTrack =
       this.combinedStream?.getVideoTracks()[0] ||

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

@@ -1,6 +1,5 @@
 import { useT } from "@agent-native/core/client";
 import {
-  IconConfetti,
   IconPlayerPause,
   IconPlayerPlay,
   IconPlayerStop,
@@ -13,7 +12,6 @@ import {
   TooltipContent,
   TooltipTrigger,
 } from "@/components/ui/tooltip";
-import { isMacPlatform } from "@/lib/utils";
 
 import { clampRectToViewport, type BubblePosition } from "./camera-positioner";
 
@@ -22,11 +20,10 @@ export interface RecordingToolbarProps {
   isPaused: boolean;
   onTogglePause: () => void;
   onStop: () => void;
-  onConfetti: () => void;
   onCancel: () => void;
 }
 
-const TOOLBAR_WIDTH = 276;
+const TOOLBAR_WIDTH = 232;
 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
@@ -45,7 +42,6 @@ export function RecordingToolbar({
   isPaused,
   onTogglePause,
   onStop,
-  onConfetti,
   onCancel,
 }: RecordingToolbarProps) {
   const t = useT();
@@ -201,23 +197,6 @@ export function RecordingToolbar({
         )}
       </div>
 
-      <Tooltip>
-        <TooltipTrigger asChild>
-          <button
-            data-toolbar-btn
-            type="button"
-            onClick={onConfetti}
-            className="flex h-9 w-9 items-center justify-center rounded-full hover:bg-white/15"
-            aria-label="Confetti"
-          >
-            <IconConfetti className="h-4 w-4" />
-          </button>
-        </TooltipTrigger>
-        <TooltipContent>
-          Confetti ({isMacPlatform() ? "Ctrl+\u2318+C" : "Ctrl+Alt+C"})
-        </TooltipContent>
-      </Tooltip>
-
       <Tooltip>
         <TooltipTrigger asChild>
           <button

package/corpus/templates/clips/app/routes/record.tsx

@@ -7,6 +7,7 @@ import {
 } from "@agent-native/core/client";
 import { useLiveTranscription } from "@agent-native/core/client/transcription/use-live-transcription";
 import type { BrowserDiagnosticsData } from "@shared/browser-diagnostics";
+import { waitForReadyRecordingAfterFinalizeError } from "@shared/finalize-recovery";
 import {
   chunkUploadUrl,
   pickMimeType,
@@ -498,6 +499,10 @@ function friendlyRecordingErrorMessage(error: string): string {
   return error;
 }
 
+function userFacingActionErrorMessage(error: string): string {
+  return error.replace(/^Action [a-z0-9-]+ failed:\s*/i, "").trim() || error;
+}
+
 function captureThumbnailFromPreview(
   video: HTMLVideoElement | null,
   recordingId: string,
@@ -1562,12 +1567,32 @@ export default function RecordRoute() {
             hasAudio: isFinal ? true : undefined,
             hasCamera: isFinal ? false : undefined,
           });
-          const chunkRes = await fetch(chunkUrl, {
-            method: "POST",
-            headers: { "Content-Type": uploadMimeType },
-            body: await slice.arrayBuffer(),
-            signal: abort.signal,
-          });
+          let chunkRes: Response;
+          try {
+            chunkRes = await fetch(chunkUrl, {
+              method: "POST",
+              headers: { "Content-Type": uploadMimeType },
+              body: await slice.arrayBuffer(),
+              signal: abort.signal,
+            });
+          } catch (err) {
+            if (
+              isFinal &&
+              createdId &&
+              (err as { name?: string } | null)?.name !== "AbortError"
+            ) {
+              const recovered = await waitForReadyRecordingAfterFinalizeError({
+                uploadUrl: uploadBase,
+                recordingId: createdId,
+                preferAuthenticated: true,
+              });
+              if (recovered) {
+                finalChunkResult = recovered;
+                break;
+              }
+            }
+            throw err;
+          }
           if (!chunkRes.ok) {
             const text = await chunkRes.text().catch(() => "");
             const error = new Error(
@@ -1578,6 +1603,22 @@ export default function RecordRoute() {
               }),
             );
             (error as Error & { status?: number }).status = chunkRes.status;
+            if (
+              isFinal &&
+              createdId &&
+              chunkRes.status !== 413 &&
+              !isUploadSizeError(error.message)
+            ) {
+              const recovered = await waitForReadyRecordingAfterFinalizeError({
+                uploadUrl: uploadBase,
+                recordingId: createdId,
+                preferAuthenticated: true,
+              });
+              if (recovered) {
+                finalChunkResult = recovered;
+                break;
+              }
+            }
             throw error;
           }
           if (isFinal) {
@@ -1708,7 +1749,7 @@ export default function RecordRoute() {
       } catch (err) {
         throw new Error(
           err instanceof Error
-            ? err.message
+            ? userFacingActionErrorMessage(err.message)
             : t("recordRoute.couldNotImportLoom"),
         );
       } finally {
@@ -2377,7 +2418,6 @@ export default function RecordRoute() {
           isPaused={isPaused}
           onTogglePause={togglePause}
           onStop={() => void doStop()}
-          onConfetti={fireConfetti}
           onCancel={() => void doCancel()}
         />
       )}

package/corpus/templates/clips/changelog/2026-07-01-clip-uploads-and-loom-imports-finish-sooner-by-skipping-the-.md

@@ -0,0 +1,6 @@
+---
+type: improved
+date: 2026-07-01
+---
+
+Clip uploads and Loom imports finish sooner by skipping the Builder.io compression wait after upload registration.

package/corpus/templates/clips/changelog/2026-07-01-clip-uploads-and-playback-recover-more-reliably-from-storage.md

@@ -0,0 +1,6 @@
+---
+type: fixed
+date: 2026-07-01
+---
+
+Clip uploads and playback recover more reliably from storage timeouts.

package/corpus/templates/clips/changelog/2026-07-01-desktop-recording-avoids-unsupported-browser-tab-capture.md

@@ -0,0 +1,6 @@
+---
+type: fixed
+date: 2026-07-01
+---
+
+Desktop recording setup no longer offers unsupported browser-tab capture in desktop app windows.

package/corpus/templates/clips/changelog/2026-07-01-embedded-player-progress-is-easier-to-see-on-dark-videos.md

@@ -0,0 +1,6 @@
+---
+type: fixed
+date: 2026-07-01
+---
+
+Embedded player progress is easier to see on dark videos.

package/corpus/templates/clips/changelog/2026-07-01-loom-imports-show-clear-guidance-when-loom-does-not-provide-a-downloadable-video.md

@@ -0,0 +1,6 @@
+---
+type: fixed
+date: 2026-07-01
+---
+
+Loom imports now show clear guidance when Loom does not provide a downloadable video.

package/corpus/templates/clips/changelog/2026-07-01-move-to-folder-now-opens-folder-choices-directly-instead-of.md

@@ -0,0 +1,6 @@
+---
+type: fixed
+date: 2026-07-01
+---
+
+Move to folder now opens folder choices directly instead of starting an agent chat.

package/corpus/templates/clips/changelog/2026-07-01-preserve-in-flight-streaming-uploads-when-the-streaming-kill.md

@@ -0,0 +1,6 @@
+---
+type: fixed
+date: 2026-07-01
+---
+
+Preserve in-flight streaming uploads when the streaming kill switch is disabled mid-recording.

package/corpus/templates/clips/changelog/2026-07-01-recording-controls-are-cleaner-and-the-countdown-uses-shadow.md

@@ -0,0 +1,6 @@
+---
+type: improved
+date: 2026-07-01
+---
+
+Recording controls are cleaner and the countdown uses shadowed numbers instead of a filled circle.

package/corpus/templates/clips/changelog/2026-07-01-recordings-now-recover-when-final-upload-status-gets-lost.md

@@ -0,0 +1,6 @@
+---
+type: fixed
+date: 2026-07-01
+---
+
+Recordings now recover when the final upload finishes but the browser receives a timeout instead of the saved clip response.

package/corpus/templates/clips/chrome-extension/public/manifest.json

@@ -2,7 +2,7 @@
   "manifest_version": 3,
   "name": "Agent-Native Clips",
   "short_name": "Clips",
-  "version": "0.1.9",
+  "version": "0.1.11",
   "description": "Start Clips recordings from Chrome, capture optional diagnostics, and preview Clips links on GitHub.",
   "minimum_chrome_version": "116",
   "action": {

package/corpus/templates/clips/chrome-extension/src/finalize-recovery.ts

@@ -1,224 +1,7 @@
-type FetchLike = (
-  input: RequestInfo | URL,
-  init?: RequestInit,
-) => Promise<Response>;
-
-export type RecoveredReadyRecording = {
-  ok: true;
-  finalized: true;
-  recoveredAfterFinalizeError: true;
-  id: string;
-  recordingId: string;
-  status: "ready";
-  videoUrl: string;
-  durationMs?: number;
-  width?: number;
-  height?: number;
-  hasAudio?: boolean;
-  hasCamera?: boolean;
-};
-
-type ProbeResult =
-  | { ready: true; result: RecoveredReadyRecording }
-  | { ready: false; terminal: boolean; status?: string };
-
-const DEFAULT_READY_RECOVERY_TIMEOUT_MS = 90_000;
-const DEFAULT_READY_RECOVERY_INTERVAL_MS = 3_000;
-const DEFAULT_READY_RECOVERY_FETCH_TIMEOUT_MS = 2_000;
-
-function sleep(ms: number): Promise<void> {
-  return new Promise((resolve) => setTimeout(resolve, ms));
-}
-
-export function publicRecordingStatusUrl(
-  uploadUrl: string,
-  recordingId: string,
-): string {
-  const url = new URL(uploadUrl);
-  const match = url.pathname.match(/^(.*)\/api\/uploads\/[^/]+\/chunk$/);
-  const basePath = match?.[1] ?? "";
-  url.pathname = `${basePath}/api/public-recording`;
-  url.search = "";
-  url.searchParams.set("id", recordingId);
-  return url.toString();
-}
-
-export function authenticatedRecordingStatusUrl(
-  uploadUrl: string,
-  recordingId: string,
-): string {
-  const url = new URL(uploadUrl);
-  const match = url.pathname.match(/^(.*)\/api\/uploads\/[^/]+\/chunk$/);
-  const basePath = match?.[1] ?? "";
-  url.pathname = `${basePath}/api/uploads/${encodeURIComponent(recordingId)}/status`;
-  url.search = "";
-  return url.toString();
-}
-
-function optionalNumber(value: unknown): number | undefined {
-  return typeof value === "number" && Number.isFinite(value)
-    ? value
-    : undefined;
-}
-
-function optionalBoolean(value: unknown): boolean | undefined {
-  return typeof value === "boolean" ? value : undefined;
-}
-
-export function readyRecordingFromPublicPayload(
-  payload: unknown,
-  fallbackRecordingId: string,
-): ProbeResult {
-  const root =
-    payload && typeof payload === "object"
-      ? (payload as Record<string, unknown>)
-      : null;
-  const recording =
-    root?.recording && typeof root.recording === "object"
-      ? (root.recording as Record<string, unknown>)
-      : null;
-  const status =
-    typeof recording?.status === "string" ? recording.status : undefined;
-
-  if (!recording) return { ready: false, terminal: false };
-  if (status === "failed") return { ready: false, terminal: true, status };
-
-  const videoUrl =
-    typeof recording.videoUrl === "string" ? recording.videoUrl : "";
-  if (status !== "ready" || !videoUrl) {
-    return { ready: false, terminal: false, status };
-  }
-
-  const id =
-    typeof recording.id === "string" && recording.id
-      ? recording.id
-      : fallbackRecordingId;
-  return {
-    ready: true,
-    result: {
-      ok: true,
-      finalized: true,
-      recoveredAfterFinalizeError: true,
-      id,
-      recordingId: id,
-      status: "ready",
-      videoUrl,
-      durationMs: optionalNumber(recording.durationMs),
-      width: optionalNumber(recording.width),
-      height: optionalNumber(recording.height),
-      hasAudio: optionalBoolean(recording.hasAudio),
-      hasCamera: optionalBoolean(recording.hasCamera),
-    },
-  };
-}
-
-async function fetchWithTimeout(
-  fetchImpl: FetchLike,
-  url: string,
-  init: RequestInit,
-  timeoutMs: number,
-): Promise<Response> {
-  if (timeoutMs <= 0 || typeof AbortController === "undefined") {
-    return fetchImpl(url, init);
-  }
-
-  const controller = new AbortController();
-  const timer = setTimeout(() => controller.abort(), timeoutMs);
-  try {
-    return await fetchImpl(url, { ...init, signal: controller.signal });
-  } finally {
-    clearTimeout(timer);
-  }
-}
-
-export async function waitForReadyRecordingAfterFinalizeError(args: {
-  uploadUrl: string;
-  recordingId: string;
-  authToken?: string | null;
-  fetchImpl?: FetchLike;
-  sleepImpl?: (ms: number) => Promise<void>;
-  timeoutMs?: number;
-  intervalMs?: number;
-  fetchTimeoutMs?: number;
-}): Promise<RecoveredReadyRecording | null> {
-  const fetchImpl = args.fetchImpl ?? fetch;
-  const sleepImpl = args.sleepImpl ?? sleep;
-  const timeoutMs = Math.max(
-    1,
-    args.timeoutMs ?? DEFAULT_READY_RECOVERY_TIMEOUT_MS,
-  );
-  const intervalMs = Math.max(
-    1,
-    args.intervalMs ?? DEFAULT_READY_RECOVERY_INTERVAL_MS,
-  );
-  const attempts = Math.max(1, Math.ceil(timeoutMs / intervalMs));
-  let url: string;
-  let authenticatedUrl: string | null = null;
-  try {
-    url = publicRecordingStatusUrl(args.uploadUrl, args.recordingId);
-    authenticatedUrl = args.authToken
-      ? authenticatedRecordingStatusUrl(args.uploadUrl, args.recordingId)
-      : null;
-  } catch {
-    return null;
-  }
-
-  for (let attempt = 0; attempt < attempts; attempt += 1) {
-    const urls = authenticatedUrl
-      ? [
-          { url: authenticatedUrl, authenticated: true },
-          { url, authenticated: false },
-        ]
-      : [{ url, authenticated: false }];
-
-    for (const endpoint of urls) {
-      const headers: Record<string, string> = {
-        Accept: "application/json",
-        "X-Agent-Native-Frontend": "1",
-      };
-      if (endpoint.authenticated && args.authToken) {
-        headers.Authorization = `Bearer ${args.authToken}`;
-      }
-
-      try {
-        const response = await fetchWithTimeout(
-          fetchImpl,
-          endpoint.url,
-          {
-            method: "GET",
-            headers,
-            credentials: "include",
-            cache: "no-store",
-          },
-          args.fetchTimeoutMs ?? DEFAULT_READY_RECOVERY_FETCH_TIMEOUT_MS,
-        );
-
-        if (response.ok) {
-          const payload = await response.json().catch(() => null);
-          const probe = readyRecordingFromPublicPayload(
-            payload,
-            args.recordingId,
-          );
-          if (probe.ready) return probe.result;
-          if (probe.terminal) return null;
-          break;
-        }
-
-        if (
-          response.status >= 400 &&
-          response.status < 500 &&
-          !endpoint.authenticated &&
-          !authenticatedUrl
-        ) {
-          return null;
-        }
-      } catch {
-        // Try the public endpoint fallback below, then keep polling.
-      }
-    }
-
-    if (attempt < attempts - 1) await sleepImpl(intervalMs);
-  }
-
-  return null;
-}
+export {
+  authenticatedRecordingStatusUrl,
+  publicRecordingStatusUrl,
+  readyRecordingFromPublicPayload,
+  waitForReadyRecordingAfterFinalizeError,
+  type RecoveredReadyRecording,
+} from "@shared/finalize-recovery";