@agent-native/core 0.88.0 → 0.90.1

package/corpus/templates/clips/app/components/recorder/pre-record-panel.tsx

@@ -1,25 +1,5 @@
 import { agentNativePath, useT } from "@agent-native/core/client";
-import { useIsMobile } from "@agent-native/toolkit/hooks/use-mobile";
-import { Button } from "@agent-native/toolkit/ui/button";
-import {
-  Collapsible,
-  CollapsibleContent,
-  CollapsibleTrigger,
-} from "@agent-native/toolkit/ui/collapsible";
-import { Input } from "@agent-native/toolkit/ui/input";
-import {
-  Popover,
-  PopoverContent,
-  PopoverTrigger,
-} from "@agent-native/toolkit/ui/popover";
-import {
-  Select,
-  SelectContent,
-  SelectItem,
-  SelectTrigger,
-  SelectValue,
-} from "@agent-native/toolkit/ui/select";
-import { Switch } from "@agent-native/toolkit/ui/switch";
+import { isSelectableAudioInputDevice } from "@shared/media-device-selection";
 import {
   IconBrowser,
   IconCamera,
@@ -42,6 +22,27 @@ import {
 } from "react";
 
 import { CaptureInstallInlineLink } from "@/components/capture-install-options";
+import { Button } from "@/components/ui/button";
+import {
+  Collapsible,
+  CollapsibleContent,
+  CollapsibleTrigger,
+} from "@/components/ui/collapsible";
+import { Input } from "@/components/ui/input";
+import {
+  Popover,
+  PopoverContent,
+  PopoverTrigger,
+} from "@/components/ui/popover";
+import {
+  Select,
+  SelectContent,
+  SelectItem,
+  SelectTrigger,
+  SelectValue,
+} from "@/components/ui/select";
+import { Switch } from "@/components/ui/switch";
+import { useIsMobile } from "@/hooks/use-mobile";
 import {
   loadRecorderPreferences,
   saveRecorderPreferences,
@@ -69,6 +70,7 @@ export interface PreRecordPanelProps {
     mode: RecordingMode;
     displaySurface: DisplaySurface;
     micDeviceId: string | null;
+    micDeviceLabel?: string | null;
     cameraDeviceId: string | null;
   }) => void;
   initialMode?: RecordingMode | null;
@@ -184,6 +186,9 @@ export function PreRecordPanel({
   const [micId, setMicId] = useState<string>(
     () => savedPrefs.micId ?? "default",
   );
+  const [micLabel, setMicLabel] = useState<string>(
+    () => savedPrefs.micLabel ?? "",
+  );
   const [cameraId, setCameraId] = useState<string>(
     () => savedPrefs.cameraId ?? "default",
   );
@@ -288,11 +293,7 @@ export function PreRecordPanel({
       }
       const devices = await navigator.mediaDevices.enumerateDevices();
       setEnumError(null);
-      setMics(
-        devices.filter(
-          (d) => d.kind === "audioinput" && isSelectableMediaDevice(d),
-        ),
-      );
+      setMics(devices.filter((d) => isSelectableAudioInputDevice(d)));
       setCameras(
         devices.filter(
           (d) => d.kind === "videoinput" && isSelectableMediaDevice(d),
@@ -331,13 +332,12 @@ export function PreRecordPanel({
     [mics],
   );
 
-  // Reset to "default" only once a populated list genuinely excludes the saved
-  // device — an empty list means "not enumerated yet", and resetting then would
-  // wipe a restored preference before devices load.
   useEffect(() => {
     if (micId === "default" || micId === NO_MIC_DEVICE_ID) return;
-    if (mics.length > 0 && !mics.some((mic) => mic.deviceId === micId)) {
-      setMicId("default");
+    const match = mics.find((mic) => mic.deviceId === micId);
+    if (match?.label) {
+      setMicLabel(match.label);
+      saveRecorderPreferences({ micId, micLabel: match.label });
     }
   }, [micId, mics]);
 
@@ -374,10 +374,18 @@ export function PreRecordPanel({
     setDisplaySurface(next);
     saveRecorderPreferences({ displaySurface: next });
   }, []);
-  const chooseMic = useCallback((value: string) => {
-    setMicId(value);
-    saveRecorderPreferences({ micId: value });
-  }, []);
+  const chooseMic = useCallback(
+    (value: string) => {
+      const label =
+        value === "default" || value === NO_MIC_DEVICE_ID
+          ? ""
+          : (mics.find((mic) => mic.deviceId === value)?.label ?? "");
+      setMicId(value);
+      setMicLabel(label);
+      saveRecorderPreferences({ micId: value, micLabel: label });
+    },
+    [mics],
+  );
   const chooseCamera = useCallback((value: string) => {
     setCameraId(value);
     saveRecorderPreferences({ cameraId: value });
@@ -421,9 +429,10 @@ export function PreRecordPanel({
     if (micId === "default") return t("preRecord.defaultMicrophone");
     return (
       mics.find((mic) => mic.deviceId === micId)?.label ||
+      micLabel ||
       t("preRecord.shortMicLabel", { id: micId.slice(0, 4) })
     );
-  }, [micId, mics, t]);
+  }, [micId, micLabel, mics, t]);
 
   const selectedCameraLabel = useMemo(() => {
     if (!needsCamera) return null;
@@ -942,6 +951,10 @@ export function PreRecordPanel({
                 displaySurface:
                   normalizeDisplaySurfaceForRuntime(displaySurface),
                 micDeviceId: micId === "default" ? null : micId,
+                micDeviceLabel:
+                  micId === "default" || micId === NO_MIC_DEVICE_ID
+                    ? null
+                    : selectedMicLabel,
                 cameraDeviceId:
                   needsCamera && cameraId !== "default" ? cameraId : null,
               })

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

@@ -12,6 +12,12 @@ import {
   trackEvent,
 } from "@agent-native/core/client";
 import { waitForReadyRecordingAfterFinalizeError } from "@shared/finalize-recovery";
+import {
+  chooseFallbackAudioInput,
+  enumerateAudioInputDevices,
+  isLikelyPhoneMicLabel,
+  type AudioInputFallback,
+} from "@shared/media-device-selection";
 import {
   chunkUploadUrl,
   pickMimeType,
@@ -101,6 +107,8 @@ export interface RecorderEngineOptions {
   displaySurface?: DisplaySurface;
   /** Selected mic deviceId (optional — default used when omitted). */
   micDeviceId?: string | null;
+  /** Last known user-visible mic label, used to recover rotated device ids. */
+  micDeviceLabel?: string | null;
   /** Selected camera deviceId (optional — default used when omitted). */
   cameraDeviceId?: string | null;
   /** Camera bubble size selected in the pre-record UI. */
@@ -221,6 +229,8 @@ const DEFAULT_CHUNK_MS = 1000;
 const GCS_CHUNK_ALIGN_BYTES = 256 * 1024;
 const STREAM_CHUNK_BYTES = 15 * GCS_CHUNK_ALIGN_BYTES; // 3.75 MiB
 const CHUNK_UPLOAD_MAX_ATTEMPTS = 3;
+const CHUNK_UPLOAD_TIMEOUT_MS = 60_000;
+const FINAL_CHUNK_UPLOAD_TIMEOUT_MS = 180_000;
 const RETRYABLE_CHUNK_UPLOAD_STATUSES = new Set([
   408, 425, 429, 500, 502, 503, 504,
 ]);
@@ -272,6 +282,16 @@ function errorMessage(err: unknown): string {
   return err instanceof Error ? err.message : String(err || "Unknown error");
 }
 
+function micLabelDiagnostic(label: string | null | undefined): string {
+  const value = label?.trim();
+  if (!value) return "empty";
+  if (isLikelyPhoneMicLabel(value)) return "phone-like";
+  if (/\b(?:macbook|built[- ]?in|internal microphone)\b/i.test(value)) {
+    return "built-in";
+  }
+  return "redacted";
+}
+
 function makeAbortError(message: string): Error {
   const error = new Error(message);
   error.name = "AbortError";
@@ -421,6 +441,53 @@ function waitForRetry(ms: number, signal?: AbortSignal): Promise<void> {
   });
 }
 
+function timeoutError(message: string): Error {
+  const err = new Error(message);
+  err.name = "TimeoutError";
+  return err;
+}
+
+function abortError(message: string): Error {
+  const err = new Error(message);
+  err.name = "AbortError";
+  return err;
+}
+
+function fetchSignalWithTimeout(
+  parent: AbortSignal | undefined,
+  timeoutMs: number,
+): { signal: AbortSignal; cleanup: () => void } {
+  const controller = new AbortController();
+  const timeout = window.setTimeout(() => {
+    controller.abort(
+      timeoutError(`Upload request timed out after ${timeoutMs / 1000}s`),
+    );
+  }, timeoutMs);
+  let onAbort: (() => void) | null = null;
+  if (parent) {
+    if (parent.aborted) {
+      controller.abort(parent.reason ?? abortError("Upload aborted"));
+    } else {
+      onAbort = () => {
+        controller.abort(parent.reason ?? abortError("Upload aborted"));
+      };
+      parent.addEventListener("abort", onAbort, { once: true });
+    }
+  }
+  return {
+    signal: controller.signal,
+    cleanup: () => {
+      window.clearTimeout(timeout);
+      if (onAbort) parent?.removeEventListener("abort", onAbort);
+    },
+  };
+}
+
+function fetchAbortError(signal: AbortSignal, err: unknown): Error {
+  if (signal.aborted && signal.reason instanceof Error) return signal.reason;
+  return err instanceof Error ? err : new Error(String(err));
+}
+
 export class RecorderEngine {
   readonly opts: Required<
     Pick<RecorderEngineOptions, "chunkIntervalMs" | "uploadUrl" | "abortUrl">
@@ -496,12 +563,16 @@ export class RecorderEngine {
   private cameraDisconnectNotified = false;
   private micDisconnectNotified = false;
   /**
-   * Set when a stale/unavailable `micDeviceId` forces a fallback to the system
-   * default mic during `acquire()`. The recording then runs on the default
-   * device, so live transcription (which can only ever use the default mic) is
-   * safe to start even though a specific mic was originally requested.
+   * Set only when a stale/unavailable `micDeviceId` forces a bare system
+   * default mic during `acquire()`. Explicit concrete fallback mics do not set
+   * this because Web Speech cannot pin live transcription to those devices.
    */
   private micFellBackToDefault = false;
+  /**
+   * True when the final recorded mic stream is the browser/OS default input.
+   * Used to decide whether live transcription will listen to the same device.
+   */
+  private micUsesSystemDefault = false;
 
   private state: RecorderState = "idle";
 
@@ -531,14 +602,183 @@ export class RecorderEngine {
   }
 
   /**
-   * True when `acquire()` had to fall back from the requested `micDeviceId` to
-   * the system default mic. Lets the UI start live transcription for this
-   * session even though a specific mic was originally selected.
+   * True only when `acquire()` had to fall back from a concrete requested mic
+   * to the system default mic.
    */
   didMicFallBackToDefault(): boolean {
     return this.micFellBackToDefault;
   }
 
+  /**
+   * True when the final recorded mic stream is the system default. Live Web
+   * Speech transcription can only use that same default input, not an explicit
+   * concrete fallback device.
+   */
+  didMicUseSystemDefault(): boolean {
+    return this.micUsesSystemDefault;
+  }
+
+  private reportMicFallback(
+    mechanism: string,
+    message: string,
+    extra: Record<string, unknown> = {},
+  ): void {
+    console.warn("[recorder]", message, extra);
+    try {
+      trackEvent("clips_mic_device_fallback", {
+        app: "clips",
+        template: "clips",
+        surface: "web_recorder",
+        mechanism,
+        ...extra,
+      });
+    } catch {
+      // Analytics should never change recording behavior.
+    }
+    captureClientException(new Error(message), {
+      tags: { surface: "web_recorder", mechanism },
+      extra,
+    });
+  }
+
+  private async chooseExplicitMicFallback(
+    avoidDeviceIds: Array<string | null | undefined> = [],
+  ): Promise<AudioInputFallback | null> {
+    try {
+      return chooseFallbackAudioInput(await enumerateAudioInputDevices(), {
+        savedLabel: this.opts.micDeviceLabel,
+        avoidDeviceIds,
+      });
+    } catch (err) {
+      this.reportMicFallback(
+        "mic-fallback-enumeration-failed",
+        "Could not enumerate microphones for fallback.",
+        {
+          error: errorMessage(err),
+          requestedDeviceId: this.opts.micDeviceId ?? null,
+          requestedDeviceLabel: micLabelDiagnostic(this.opts.micDeviceLabel),
+        },
+      );
+      return null;
+    }
+  }
+
+  private async tryExplicitMicFallback(
+    mechanism: string,
+    avoidDeviceIds: Array<string | null | undefined> = [],
+  ): Promise<MediaStream | null> {
+    const fallback = await this.chooseExplicitMicFallback(avoidDeviceIds);
+    if (!fallback) return null;
+    try {
+      const stream = await navigator.mediaDevices.getUserMedia({
+        audio: voiceFocusedAudioConstraints(fallback.deviceId),
+        video: false,
+      });
+      this.reportMicFallback(
+        mechanism,
+        "Using an explicit fallback microphone instead of the system default.",
+        {
+          requestedDeviceId: this.opts.micDeviceId ?? null,
+          requestedDeviceLabel: micLabelDiagnostic(this.opts.micDeviceLabel),
+          fallbackDeviceId: fallback.deviceId,
+          fallbackDeviceLabel: micLabelDiagnostic(fallback.label),
+          fallbackReason: fallback.reason,
+        },
+      );
+      this.opts.onWarning?.(
+        fallback.reason === "saved-label"
+          ? "Selected microphone was reconnected under a new device id."
+          : "Selected microphone was unavailable; using another available microphone.",
+      );
+      return stream;
+    } catch (err) {
+      if (!isDeviceUnavailableError(err)) throw err;
+      this.reportMicFallback(
+        "mic-explicit-fallback-failed",
+        "Explicit microphone fallback was unavailable.",
+        {
+          requestedDeviceId: this.opts.micDeviceId ?? null,
+          requestedDeviceLabel: micLabelDiagnostic(this.opts.micDeviceLabel),
+          fallbackDeviceId: fallback.deviceId,
+          fallbackDeviceLabel: micLabelDiagnostic(fallback.label),
+          fallbackReason: fallback.reason,
+          error: errorMessage(err),
+        },
+      );
+      return null;
+    }
+  }
+
+  private async replaceUnsafeMicCaptureIfPossible(
+    stream: MediaStream,
+    requestedDeviceId: string | null | undefined,
+  ): Promise<MediaStream> {
+    const track = stream.getAudioTracks()[0];
+    if (!track) return stream;
+    const settings = track.getSettings?.();
+    const actualDeviceId = settings?.deviceId ?? "";
+    const mismatched =
+      !!requestedDeviceId &&
+      !!actualDeviceId &&
+      actualDeviceId !== requestedDeviceId;
+    const phoneLike = isLikelyPhoneMicLabel(track.label);
+    if (!mismatched && !phoneLike) return stream;
+
+    const replacement = await this.tryExplicitMicFallback(
+      phoneLike ? "mic-phone-capture-correction" : "mic-device-mismatch",
+      [requestedDeviceId, actualDeviceId],
+    );
+    if (!replacement) return stream;
+    for (const oldTrack of stream.getTracks()) oldTrack.stop();
+    this.micFellBackToDefault = false;
+    this.micUsesSystemDefault = false;
+    return replacement;
+  }
+
+  private async getDefaultMicStreamWithFallback(
+    originalError: unknown,
+  ): Promise<MediaStream> {
+    try {
+      const stream = await navigator.mediaDevices.getUserMedia({
+        audio: voiceFocusedAudioConstraints(),
+        video: false,
+      });
+      this.micFellBackToDefault = !!this.opts.micDeviceId;
+      this.micUsesSystemDefault = true;
+      this.reportMicFallback(
+        "mic-system-default-fallback",
+        "Using the system default microphone after explicit fallback was unavailable.",
+        {
+          requestedDeviceId: this.opts.micDeviceId ?? null,
+          requestedDeviceLabel: micLabelDiagnostic(this.opts.micDeviceLabel),
+          error: errorMessage(originalError),
+        },
+      );
+      this.opts.onWarning?.(
+        "Selected microphone was unavailable; using the system default microphone.",
+      );
+      return this.replaceUnsafeMicCaptureIfPossible(stream, null);
+    } catch (fallbackErr) {
+      if (!isDeviceUnavailableError(fallbackErr)) throw fallbackErr;
+      this.reportMicFallback(
+        "mic-basic-audio-fallback",
+        "Voice-focused microphone constraints failed; retrying basic audio.",
+        {
+          requestedDeviceId: this.opts.micDeviceId ?? null,
+          requestedDeviceLabel: micLabelDiagnostic(this.opts.micDeviceLabel),
+          error: errorMessage(fallbackErr),
+        },
+      );
+      const stream = await navigator.mediaDevices.getUserMedia({
+        audio: true,
+        video: false,
+      });
+      this.micFellBackToDefault = !!this.opts.micDeviceId;
+      this.micUsesSystemDefault = true;
+      return this.replaceUnsafeMicCaptureIfPossible(stream, null);
+    }
+  }
+
   getPreviewStream(): MediaStream | null {
     return this.previewStream;
   }
@@ -727,21 +967,38 @@ export class RecorderEngine {
 
       if (wantsMic) {
         try {
-          this.micStream = await navigator.mediaDevices.getUserMedia({
-            audio: voiceFocusedAudioConstraints(this.opts.micDeviceId),
+          const requestedId = this.opts.micDeviceId?.trim() || "";
+          const stream = await navigator.mediaDevices.getUserMedia({
+            audio: voiceFocusedAudioConstraints(requestedId),
             video: false,
           });
+          this.micUsesSystemDefault = !requestedId;
+          this.micStream = await this.replaceUnsafeMicCaptureIfPossible(
+            stream,
+            requestedId,
+          );
         } catch (err) {
-          // Same stale-device fallback as the camera — retry default mic.
+          // Same stale-device trigger as the camera, but do not jump straight
+          // to OS default: Continuity can make default point at an iPhone mic.
           if (this.opts.micDeviceId && isDeviceUnavailableError(err)) {
+            const explicitFallback = await this.tryExplicitMicFallback(
+              "mic-stale-device-fallback",
+              [this.opts.micDeviceId],
+            );
+            if (explicitFallback) {
+              this.micUsesSystemDefault = false;
+              this.micStream = explicitFallback;
+            } else {
+              try {
+                this.micStream =
+                  await this.getDefaultMicStreamWithFallback(err);
+              } catch (retryErr) {
+                throw this.friendlyError(retryErr, "microphone");
+              }
+            }
+          } else if (!this.opts.micDeviceId && isDeviceUnavailableError(err)) {
             try {
-              this.micStream = await navigator.mediaDevices.getUserMedia({
-                audio: voiceFocusedAudioConstraints(),
-                video: false,
-              });
-              // Recording is now on the system default mic, so live
-              // transcription can run for this session after all.
-              this.micFellBackToDefault = true;
+              this.micStream = await this.getDefaultMicStreamWithFallback(err);
             } catch (retryErr) {
               throw this.friendlyError(retryErr, "microphone");
             }
@@ -1740,6 +1997,10 @@ export class RecorderEngine {
     let res: Response | null = null;
     let triedFinalUploadRecovery = false;
     for (let attempt = 1; attempt <= CHUNK_UPLOAD_MAX_ATTEMPTS; attempt++) {
+      const fetchSignal = fetchSignalWithTimeout(
+        extra.signal,
+        extra.isFinal ? FINAL_CHUNK_UPLOAD_TIMEOUT_MS : CHUNK_UPLOAD_TIMEOUT_MS,
+      );
       try {
         res = await fetch(url, {
           method: "POST",
@@ -1748,27 +2009,27 @@ export class RecorderEngine {
               blob.type || this.mimeType || "application/octet-stream",
           },
           body,
-          signal: extra.signal,
+          signal: fetchSignal.signal,
         });
       } catch (err) {
+        const uploadErr = fetchAbortError(fetchSignal.signal, err);
         // The final chunk is safe to retry on a network error: finalize is
         // idempotent server-side (a recording already 'ready' returns its
         // existing result), so a lost response won't double-finalize.
         if (
           attempt >= CHUNK_UPLOAD_MAX_ATTEMPTS ||
-          (err as { name?: string } | null)?.name === "AbortError"
+          uploadErr.name === "AbortError"
         ) {
-          if (
-            extra.isFinal &&
-            (err as { name?: string } | null)?.name !== "AbortError"
-          ) {
+          if (extra.isFinal && uploadErr.name !== "AbortError") {
             const recovered = await this.recoverReadyAfterFinalUploadError();
             if (recovered) return recovered;
           }
-          throw err;
+          throw uploadErr;
         }
         await waitForRetry(retryDelayMs(attempt), extra.signal);
         continue;
+      } finally {
+        fetchSignal.cleanup();
       }
 
       if (

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

@@ -1,9 +1,4 @@
 import { useT } from "@agent-native/core/client";
-import {
-  Tooltip,
-  TooltipContent,
-  TooltipTrigger,
-} from "@agent-native/toolkit/ui/tooltip";
 import {
   IconPlayerPause,
   IconPlayerPlay,
@@ -12,6 +7,12 @@ import {
 } from "@tabler/icons-react";
 import { useEffect, useRef, useState } from "react";
 
+import {
+  Tooltip,
+  TooltipContent,
+  TooltipTrigger,
+} from "@/components/ui/tooltip";
+
 import { clampRectToViewport, type BubblePosition } from "./camera-positioner";
 
 export interface RecordingToolbarProps {

package/corpus/templates/clips/app/components/recorder/storage-setup-card.tsx

@@ -4,12 +4,6 @@ import {
   openBuilderConnectPopup,
   useT,
 } from "@agent-native/core/client";
-import {
-  Tooltip,
-  TooltipContent,
-  TooltipProvider,
-  TooltipTrigger,
-} from "@agent-native/toolkit/ui/tooltip";
 import {
   IconCheck,
   IconCloud,
@@ -19,6 +13,13 @@ import {
 } from "@tabler/icons-react";
 import { useCallback, useEffect, useRef, useState } from "react";
 
+import {
+  Tooltip,
+  TooltipContent,
+  TooltipProvider,
+  TooltipTrigger,
+} from "@/components/ui/tooltip";
+
 function BuilderBMark({ className }: { className?: string }) {
   return (
     <svg

package/corpus/templates/clips/app/components/sharing/share-ui.tsx

@@ -3,16 +3,6 @@ import {
   useActionQuery,
   useT,
 } from "@agent-native/core/client";
-import { Button } from "@agent-native/toolkit/ui/button";
-import { Checkbox } from "@agent-native/toolkit/ui/checkbox";
-import { Input } from "@agent-native/toolkit/ui/input";
-import {
-  Select,
-  SelectContent,
-  SelectItem,
-  SelectTrigger,
-  SelectValue,
-} from "@agent-native/toolkit/ui/select";
 import {
   IconBuilding,
   IconCheck,
@@ -24,6 +14,16 @@ import {
 import { useQueryClient } from "@tanstack/react-query";
 import { useMemo, useState } from "react";
 
+import { Button } from "@/components/ui/button";
+import { Checkbox } from "@/components/ui/checkbox";
+import { Input } from "@/components/ui/input";
+import {
+  Select,
+  SelectContent,
+  SelectItem,
+  SelectTrigger,
+  SelectValue,
+} from "@/components/ui/select";
 import { cn } from "@/lib/utils";
 
 // ---------------------------------------------------------------------------