@agent-native/core 0.68.3 → 0.70.0

package/corpus/templates/calendar/CHANGELOG.md

@@ -0,0 +1,10 @@
+# Changelog
+
+All notable user-facing changes to Agent-Native Calendar are documented here. Open it any
+time from the command menu (Cmd+K → "What's new") or from Settings.
+
+## 2026-06-23
+
+### Added
+
+- See what's new right inside Agent-Native Calendar — a changelog now lives in the command menu (Cmd+K) and in Settings.

package/corpus/templates/calendar/app/pages/Settings.tsx

@@ -26,8 +26,10 @@ import { useSettings, useUpdateSettings } from "@/hooks/use-settings";
 import {
   AppearancePicker,
   callAction,
+  ChangelogSettingsCard,
   type AppearancePresetId,
 } from "@agent-native/core/client";
+import changelog from "../../CHANGELOG.md?raw";
 import {
   useGoogleAuthStatus,
   useGoogleAuthUrl,
@@ -151,6 +153,8 @@ export default function Settings() {
         </p>
       </div>
 
+      <ChangelogSettingsCard markdown={changelog} />
+
       {/* Google Calendar Connection */}
       <Card>
         <CardHeader>

package/corpus/templates/calendar/app/root.tsx

@@ -22,6 +22,7 @@ import {
   useDbSync,
 } from "@agent-native/core/client";
 import { IconSun, IconMoon } from "@tabler/icons-react";
+import changelog from "../CHANGELOG.md?raw";
 import type { LinksFunction } from "react-router";
 import stylesheet from "./global.css?url";
 configureTracking({
@@ -137,7 +138,12 @@ function AppContent() {
   return (
     <>
       <DbSyncSetup />
-      <CommandMenu open={cmdkOpen} onOpenChange={setCmdkOpen}>
+      <CommandMenu
+        open={cmdkOpen}
+        onOpenChange={setCmdkOpen}
+        changelog={changelog}
+        changelogKey="calendar"
+      >
         <CommandMenu.Group heading="Actions">
           <CommandMenu.Item onSelect={() => {}}>Search</CommandMenu.Item>
         </CommandMenu.Group>

package/corpus/templates/chat/CHANGELOG.md

@@ -0,0 +1,10 @@
+# Changelog
+
+All notable user-facing changes to Chat are documented here. Open it any
+time from the command menu (Cmd+K → "What's new").
+
+## 2026-06-23
+
+### Added
+
+- See what's new right inside Chat — a changelog now lives in the command menu (Cmd+K).

package/corpus/templates/chat/app/root.tsx

@@ -14,6 +14,7 @@ import {
   useCommandMenuShortcut,
 } from "@agent-native/core/client";
 import { IconSun, IconMoon } from "@tabler/icons-react";
+import changelog from "../CHANGELOG.md?raw";
 import { Layout as AppLayout } from "@/components/layout/Layout";
 import { TAB_ID } from "@/lib/tab-id";
 import { APP_TITLE } from "@/lib/app-config";
@@ -97,7 +98,12 @@ function AppContent() {
   useCommandMenuShortcut(useCallback(() => setCmdkOpen(true), []));
   return (
     <>
-      <CommandMenu open={cmdkOpen} onOpenChange={setCmdkOpen}>
+      <CommandMenu
+        open={cmdkOpen}
+        onOpenChange={setCmdkOpen}
+        changelog={changelog}
+        changelogKey="chat"
+      >
         <CommandMenu.Group heading="Actions">
           <CommandMenu.Item onSelect={() => {}}>Search</CommandMenu.Item>
         </CommandMenu.Group>

package/corpus/templates/clips/CHANGELOG.md

@@ -0,0 +1,10 @@
+# Changelog
+
+All notable user-facing changes to Clips are documented here. Open it any time
+from the command menu (Cmd+K → "What's new") or from Settings.
+
+## 2026-06-23
+
+### Added
+
+- See what's new right inside Clips — a changelog now lives in the command menu (Cmd+K) and in Settings.

package/corpus/templates/clips/app/components/player/share-dialog.tsx

@@ -9,6 +9,7 @@ import {
   appBasePath,
   appPath,
   useActionQuery,
+  useSession,
 } from "@agent-native/core/client";
 import {
   Popover,
@@ -34,8 +35,10 @@ import {
   type SharesResponse,
   type Visibility,
 } from "@/components/sharing/share-ui";
+import { SlackShareHint } from "@/components/sharing/slack-share-hint";
 import { buildAgentApiUrls } from "../../../shared/agent-context";
 import { isLoomEmbedUrl } from "../../../shared/loom";
+import { withShareAttribution } from "../../../shared/share-attribution";
 
 const PUBLIC_DESCRIPTION =
   "Anyone with the link can view — sign in to comment or react";
@@ -156,11 +159,6 @@ function ShareRecordingContent({
   hasPassword?: boolean;
   reserveCloseButton?: boolean;
 }) {
-  const shareUrl =
-    typeof window === "undefined"
-      ? ""
-      : absoluteAppUrl(`/share/${recordingId}`);
-
   const sharesQuery = useActionQuery<SharesResponse>("list-resource-shares", {
     resourceType: "recording",
     resourceId: recordingId,
@@ -168,6 +166,23 @@ function ShareRecordingContent({
 
   const data = sharesQuery.data;
   const canManage = data?.role === "owner" || data?.role === "admin";
+
+  // Attribution `via` must be a stable non-PII id, never an email. The only
+  // owner id available client-side is the *current* session's userId, which is
+  // the clip owner only when the viewer is the owner. Anyone else (e.g. a
+  // share-admin) gets an untagged `via` so we never attribute the link to the
+  // wrong person or leak the owner's email.
+  const { session } = useSession();
+  const ownerViaId =
+    data?.role === "owner" ? (session?.userId ?? undefined) : undefined;
+
+  const shareUrl =
+    typeof window === "undefined"
+      ? ""
+      : withShareAttribution(
+          absoluteAppUrl(`/share/${recordingId}`),
+          ownerViaId,
+        );
   const titleText = recordingTitle
     ? `Share "${recordingTitle}"`
     : "Share recording";
@@ -224,6 +239,7 @@ function ShareRecordingContent({
             recordingId={recordingId}
             sharesQuery={sharesQuery}
             canManage={canManage}
+            ownerViaId={ownerViaId}
           />
         </TabsContent>
       </Tabs>
@@ -321,6 +337,10 @@ function LinkTab({
         disabled={isPending || (!isPublic && canManage)}
       />
 
+      {/* Public links unfurl into a playable video in Slack; surface that here
+          (and a connect link) instead of leaving it buried in Settings. */}
+      {isPublic ? <SlackShareHint canManage={canManage} /> : null}
+
       <CopyField
         label="Share with agents"
         value={agentContextUrl}
@@ -389,10 +409,12 @@ function ClipsEmbedConfigurator({
   recordingId,
   sharesQuery,
   canManage,
+  ownerViaId,
 }: {
   recordingId: string;
   sharesQuery: SharesQuery;
   canManage: boolean;
+  ownerViaId?: string;
 }) {
   const [autoplay, setAutoplay] = useState(false);
   const [startMs, setStartMs] = useState(0);
@@ -416,8 +438,12 @@ function ClipsEmbedConfigurator({
     if (autoplay) params.push("autoplay=1");
     if (startMs > 0) params.push(`t=${Math.round(startMs / 1000)}`);
     const qs = params.length ? `?${params.join("&")}` : "";
-    return absoluteAppUrl(`/embed/${recordingId}${qs}`);
-  }, [recordingId, autoplay, startMs]);
+    // Keep autoplay/t intact and also self-attribute the embed.
+    return withShareAttribution(
+      absoluteAppUrl(`/embed/${recordingId}${qs}`),
+      ownerViaId,
+    );
+  }, [recordingId, autoplay, startMs, ownerViaId]);
 
   const code =
     mode === "responsive"

package/corpus/templates/clips/app/components/player/sign-in-prompt-dialog.tsx

@@ -21,6 +21,12 @@ export interface SignInPromptDialogProps {
    * fires there and forwards to `returnTo` once the viewer is signed in.
    */
   returnTo?: string;
+  /**
+   * Fired when the viewer activates the "Sign in" button, before navigation.
+   * Used by the public share page to emit the signin funnel event. Must not
+   * change navigation behavior.
+   */
+  onSignIn?: () => void;
 }
 
 function buildSignInHref(returnTo: string | undefined): string {
@@ -34,6 +40,7 @@ export function SignInPromptDialog({
   onOpenChange,
   intent,
   returnTo,
+  onSignIn,
 }: SignInPromptDialogProps) {
   return (
     <Dialog open={open} onOpenChange={onOpenChange}>
@@ -51,6 +58,7 @@ export function SignInPromptDialog({
           </Button>
           <Button
             onClick={() => {
+              onSignIn?.();
               window.location.href = buildSignInHref(returnTo);
             }}
           >

package/corpus/templates/clips/app/components/player/video-player.tsx

@@ -232,7 +232,10 @@ export const VideoPlayer = forwardRef<VideoPlayerHandle, VideoPlayerProps>(
     const [currentMs, setCurrentMs] = useState(startMs ?? 0);
     const [loomStartMs, setLoomStartMs] = useState<number | null>(null);
     const [volume, setVolume] = useState(1);
-    const [muted, setMuted] = useState(false);
+    // Autoplaying players (e.g. the Slack unfurl embed, `?autoplay=1`) must
+    // start muted or the browser blocks autoplay with a NotAllowedError. The
+    // share page (no autoplay) keeps full sound.
+    const [muted, setMuted] = useState(() => !!autoPlay);
     const [speed, setSpeed] = useState(() =>
       readPlaybackSpeedPreference(defaultSpeed),
     );
@@ -354,18 +357,30 @@ export const VideoPlayer = forwardRef<VideoPlayerHandle, VideoPlayerProps>(
       setIsPreparing(false);
     }, []);
 
-    const rejectPlayAttempt = useCallback((attemptId: number, err: unknown) => {
-      if (attemptId !== playAttemptIdRef.current) return;
-      playAttemptPendingRef.current = false;
-      setIsPlayPending(false);
-      setIsBuffering(false);
-
-      const name = err instanceof DOMException ? err.name : "";
-      if (name === "AbortError") return;
-
-      console.warn("[clips] playback start failed", err);
-      setPlayError("Could not start playback. Try again.");
-    }, []);
+    const rejectPlayAttempt = useCallback(
+      (attemptId: number, err: unknown) => {
+        if (attemptId !== playAttemptIdRef.current) return;
+        playAttemptPendingRef.current = false;
+        setIsPlayPending(false);
+        setIsBuffering(false);
+
+        const name = err instanceof DOMException ? err.name : "";
+        // AbortError: a newer load/seek superseded this play() — not a failure.
+        // NotAllowedError: the browser blocked autoplay because there was no
+        // user gesture (this is what happens inside Slack's cross-origin unfurl
+        // iframe). Both are expected — fall back to the click-to-play overlay
+        // instead of showing a scary "Could not start playback" message.
+        if (name === "AbortError" || name === "NotAllowedError") return;
+
+        console.warn("[clips] playback start failed", err);
+        reportPlaybackIssue("play-start-failed", err, videoRef.current, {
+          recordingId,
+          autoPlay: !!autoPlay,
+        });
+        setPlayError("Could not start playback. Try again.");
+      },
+      [autoPlay, recordingId],
+    );
 
     const attachPlayPromise = useCallback(
       (playPromise: Promise<void> | undefined, attemptId: number) => {
@@ -882,7 +897,10 @@ export const VideoPlayer = forwardRef<VideoPlayerHandle, VideoPlayerProps>(
       <div
         ref={containerRef}
         className={cn(
-          "relative bg-black overflow-hidden select-none group",
+          // `@container` lets the center play button scale with the player
+          // width (see CenterPlaybackOverlay) so it isn't oversized inside
+          // small embeds like the Slack unfurl iframe.
+          "relative @container bg-black overflow-hidden select-none group",
           theaterMode ? "fixed inset-0 z-40" : "rounded-xl",
           className,
         )}
@@ -910,12 +928,19 @@ export const VideoPlayer = forwardRef<VideoPlayerHandle, VideoPlayerProps>(
             ref={videoRef}
             src={activeVideoSrc}
             poster={resolveLocalUrl(thumbnailUrl)}
-            crossOrigin="anonymous"
+            // `crossOrigin` is only needed so the owner's canvas thumbnail
+            // capture isn't tainted. For everyone else (viewers, and the Slack
+            // unfurl embed) it adds nothing — but if the player is ever framed
+            // into a sandboxed/opaque-origin context (Slack double-iframes the
+            // embed), the resulting CORS check on the media bytes fails and the
+            // video won't load. Scope it to owners so embeds load cleanly.
+            crossOrigin={role === "owner" ? "anonymous" : undefined}
             className={cn(
               "w-full h-full",
               cover ? "object-cover" : "object-contain",
             )}
             autoPlay={autoPlay}
+            muted={muted}
             playsInline
             onLoadStart={() => {
               setCanPlay(false);
@@ -1014,12 +1039,26 @@ export const VideoPlayer = forwardRef<VideoPlayerHandle, VideoPlayerProps>(
               setIsBuffering(false);
               onEnded?.();
             }}
-            onError={() => {
+            onError={(e) => {
               playAttemptPendingRef.current = false;
               setIsPlayPending(false);
               setIsBuffering(false);
               setIsPreparing(false);
-              setPlayError("Video could not be loaded.");
+              const desc = describeMediaError(e.currentTarget.error);
+              reportPlaybackIssue(
+                "media-load-failed",
+                e.currentTarget.error,
+                e.currentTarget,
+                {
+                  recordingId,
+                  videoSrc: activeVideoSrc,
+                },
+              );
+              setPlayError(
+                desc
+                  ? `Video could not be loaded (${desc.label}).`
+                  : "Video could not be loaded.",
+              );
             }}
             onVolumeChange={(e) => {
               setVolume(e.currentTarget.volume);
@@ -1039,7 +1078,17 @@ export const VideoPlayer = forwardRef<VideoPlayerHandle, VideoPlayerProps>(
             durationMs={resolvedDurationMs}
             speed={speed}
             playError={playError}
-            onPlay={requestPlay}
+            onPlay={() => {
+              // An explicit click means the user wants to watch with sound, so
+              // undo the muted-autoplay default (see `muted` state) before we
+              // start playback.
+              const v = videoRef.current;
+              if (v && v.muted) {
+                v.muted = false;
+                setMuted(false);
+              }
+              requestPlay();
+            }}
             onSpeedChange={applySpeed}
             menuPortalContainer={fullscreenMenuContainer}
           />
@@ -1193,9 +1242,9 @@ function CenterPlaybackOverlay({
                 e.stopPropagation();
                 onPlay();
               }}
-              className="pointer-events-auto flex h-24 w-24 items-center justify-center rounded-full bg-white text-black shadow-2xl ring-1 ring-white/35 transition-transform duration-150 hover:scale-105 hover:bg-white focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-white focus-visible:ring-offset-2 focus-visible:ring-offset-black"
+              className="pointer-events-auto flex h-[clamp(3rem,13cqw,6rem)] w-[clamp(3rem,13cqw,6rem)] items-center justify-center rounded-full bg-white text-black shadow-2xl ring-1 ring-white/35 transition-transform duration-150 hover:scale-105 hover:bg-white focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-white focus-visible:ring-offset-2 focus-visible:ring-offset-black"
             >
-              <IconPlayerPlay className="ml-1 h-12 w-12 fill-current" />
+              <IconPlayerPlay className="ml-[6%] h-[clamp(1.5rem,6.5cqw,3rem)] w-[clamp(1.5rem,6.5cqw,3rem)] fill-current" />
             </button>
 
             <div
@@ -1302,6 +1351,87 @@ function formatSpeedLabel(rate: number): string {
   return `${Number.isInteger(rate) ? rate : rate.toFixed(1)}x`;
 }
 
+/** Human-readable label for an HTMLMediaElement `error` (MediaError). */
+function describeMediaError(
+  err: MediaError | null,
+): { code: number; label: string } | null {
+  if (!err) return null;
+  const labels: Record<number, string> = {
+    1: "load aborted",
+    2: "network error",
+    3: "decode error",
+    4: "format not supported",
+  };
+  return { code: err.code, label: labels[err.code] ?? "unknown error" };
+}
+
+/**
+ * Surface a playback failure to the console and Sentry with enough context to
+ * debug it remotely — e.g. when a clip "could not be loaded" inside a Slack
+ * unfurl where there's no visible console. Best-effort; never throws. Expected,
+ * benign cases (AbortError / autoplay-blocked NotAllowedError) are filtered out
+ * by the callers and never reach here.
+ */
+function reportPlaybackIssue(
+  reason: string,
+  err: unknown,
+  video: HTMLVideoElement | null,
+  extra: Record<string, unknown>,
+) {
+  const mediaError =
+    err && typeof err === "object" && "code" in err
+      ? (err as MediaError)
+      : (video?.error ?? null);
+  const name =
+    err instanceof DOMException || err instanceof Error ? err.name : undefined;
+  const message = err instanceof Error ? err.message : undefined;
+
+  let videoHost: string | undefined;
+  try {
+    if (video?.currentSrc) videoHost = new URL(video.currentSrc).host;
+  } catch {
+    // ignore unparseable src
+  }
+  let inIframe = false;
+  try {
+    inIframe = typeof window !== "undefined" && window.self !== window.top;
+  } catch {
+    inIframe = true;
+  }
+
+  const detail = {
+    ...extra,
+    errorName: name,
+    errorMessage: message,
+    mediaErrorCode: mediaError?.code,
+    mediaErrorLabel: describeMediaError(mediaError)?.label,
+    videoHost,
+    inIframe,
+    readyState: video?.readyState,
+    networkState: video?.networkState,
+  };
+  console.warn(`[clips] playback issue: ${reason}`, detail);
+
+  try {
+    const reportable =
+      err instanceof Error
+        ? err
+        : new Error(
+            `clips playback ${reason}: ${message ?? name ?? describeMediaError(mediaError)?.label ?? "unknown"}`,
+          );
+    captureClientException(reportable, {
+      tags: {
+        area: "clips-player",
+        playbackIssue: reason,
+        inIframe: String(inIframe),
+      },
+      extra: detail,
+    });
+  } catch {
+    // Diagnostics must never break playback UI.
+  }
+}
+
 function formatWatchDuration(ms: number): string {
   if (!Number.isFinite(ms) || ms <= 0) return "0 sec";
   const totalSeconds = Math.max(1, Math.round(ms / 1000));

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

@@ -48,6 +48,10 @@ import {
   type RecordingMode,
 } from "./recorder-engine";
 import type { CameraBubbleSize } from "./camera-bubble";
+import {
+  loadRecorderPreferences,
+  saveRecorderPreferences,
+} from "@/lib/recorder-preferences";
 import { CameraVisualizer, type CameraTestStatus } from "./camera-visualizer";
 import {
   MicrophoneVisualizer,
@@ -184,11 +188,14 @@ export function PreRecordPanel({
 }: PreRecordPanelProps) {
   const fileInputRef = useRef<HTMLInputElement>(null);
   const loomInputRef = useRef<HTMLInputElement>(null);
+  // Saved selections from the last visit. A `?mode=`/`?surface=` deep link
+  // (initialMode/initialDisplaySurface) still takes precedence over them.
+  const savedPrefs = useMemo(() => loadRecorderPreferences(), []);
   const [mode, setMode] = useState<RecordingMode>(
-    () => initialMode ?? "screen+camera",
+    () => initialMode ?? savedPrefs.mode ?? "screen+camera",
   );
   const [displaySurface, setDisplaySurface] = useState<DisplaySurface>(
-    () => initialDisplaySurface ?? "window",
+    () => initialDisplaySurface ?? savedPrefs.displaySurface ?? "window",
   );
   const [sourceOpen, setSourceOpen] = useState(false);
   const [deviceSettingsOpen, setDeviceSettingsOpen] = useState(false);
@@ -197,8 +204,12 @@ export function PreRecordPanel({
   const [loomError, setLoomError] = useState<string | null>(null);
   const [mics, setMics] = useState<MediaDeviceInfo[]>([]);
   const [cameras, setCameras] = useState<MediaDeviceInfo[]>([]);
-  const [micId, setMicId] = useState<string>("default");
-  const [cameraId, setCameraId] = useState<string>("default");
+  const [micId, setMicId] = useState<string>(
+    () => savedPrefs.micId ?? "default",
+  );
+  const [cameraId, setCameraId] = useState<string>(
+    () => savedPrefs.cameraId ?? "default",
+  );
   const [enumError, setEnumError] = useState<string | null>(null);
   const [micAccessStatus, setMicAccessStatus] =
     useState<DeviceAccessStatus>("idle");
@@ -274,13 +285,57 @@ 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.some((mic) => mic.deviceId === micId)) {
+    if (mics.length > 0 && !mics.some((mic) => mic.deviceId === micId)) {
       setMicId("default");
     }
   }, [micId, mics]);
 
+  // Same guard for cameras. Not persisted, so a temporarily missing device
+  // doesn't erase the saved choice.
+  useEffect(() => {
+    if (cameraId === "default" || cameraId === NO_CAMERA_DEVICE_ID) return;
+    if (
+      cameras.length > 0 &&
+      !cameras.some((camera) => camera.deviceId === cameraId)
+    ) {
+      setCameraId("default");
+    }
+  }, [cameraId, cameras]);
+
+  // Camera-only mode needs a camera — coerce a restored "off" sentinel to
+  // "default" so Start doesn't forward it as an exact deviceId. This is the
+  // single owner of that coercion: it covers both the mode-button click and the
+  // ?mode=camera deep-link/restore path.
+  useEffect(() => {
+    if (mode === "camera" && cameraId === NO_CAMERA_DEVICE_ID) {
+      setCameraId("default");
+    }
+  }, [mode, cameraId]);
+
+  // Persist deliberate picks only (not the resets above), so an unavailable
+  // device on load can't clobber the stored preference.
+  const chooseMode = useCallback((value: RecordingMode) => {
+    setMode(value);
+    saveRecorderPreferences({ mode: value });
+  }, []);
+  const chooseDisplaySurface = useCallback((value: DisplaySurface) => {
+    setDisplaySurface(value);
+    saveRecorderPreferences({ displaySurface: value });
+  }, []);
+  const chooseMic = useCallback((value: string) => {
+    setMicId(value);
+    saveRecorderPreferences({ micId: value });
+  }, []);
+  const chooseCamera = useCallback((value: string) => {
+    setCameraId(value);
+    saveRecorderPreferences({ cameraId: value });
+  }, []);
+
   const requestMicrophoneChoices = useCallback(async () => {
     if (!navigator.mediaDevices?.getUserMedia) {
       setMicAccessStatus("error");
@@ -376,9 +431,9 @@ export function PreRecordPanel({
         void requestMicrophoneChoices();
         return;
       }
-      setMicId(value);
+      chooseMic(value);
     },
-    [requestMicrophoneChoices],
+    [requestMicrophoneChoices, chooseMic],
   );
 
   const handleMicSignalChange = useCallback((hasSignal: boolean) => {
@@ -529,15 +584,10 @@ export function PreRecordPanel({
               <button
                 key={opt.value}
                 type="button"
-                onClick={() => {
-                  setMode(opt.value);
-                  if (
-                    opt.value === "camera" &&
-                    cameraId === NO_CAMERA_DEVICE_ID
-                  ) {
-                    setCameraId("default");
-                  }
-                }}
+                // Camera-only mode needs a camera; the [mode, cameraId] effect
+                // below coerces a restored "off" sentinel to "default" for both
+                // this click and the ?mode=camera deep-link path.
+                onClick={() => chooseMode(opt.value)}
                 className={cn(
                   "flex min-h-20 min-w-0 flex-col justify-between rounded-xl border p-3 text-left transition-colors",
                   active
@@ -605,7 +655,7 @@ export function PreRecordPanel({
                   <button
                     key={opt.value}
                     type="button"
-                    onClick={() => setDisplaySurface(opt.value)}
+                    onClick={() => chooseDisplaySurface(opt.value)}
                     className={cn(
                       "flex min-h-[76px] flex-col rounded-lg border p-2 text-left transition-colors",
                       active
@@ -703,7 +753,7 @@ export function PreRecordPanel({
                   <Switch
                     checked={audioEnabled}
                     onCheckedChange={(checked) =>
-                      setMicId(checked ? "default" : NO_MIC_DEVICE_ID)
+                      chooseMic(checked ? "default" : NO_MIC_DEVICE_ID)
                     }
                     disabled={busy}
                     aria-label="Include audio in this recording"
@@ -740,7 +790,7 @@ export function PreRecordPanel({
                     </div>
                     <Select
                       value={cameraId}
-                      onValueChange={setCameraId}
+                      onValueChange={chooseCamera}
                       disabled={!needsCamera}
                     >
                       <SelectTrigger className="h-9 min-w-0 flex-1 border-0 bg-transparent px-2 shadow-none hover:bg-muted/45 focus:ring-0 focus:ring-offset-0 disabled:opacity-60">
@@ -762,7 +812,9 @@ export function PreRecordPanel({
                       <Switch
                         checked={needsCamera}
                         onCheckedChange={(checked) =>
-                          setCameraId(checked ? "default" : NO_CAMERA_DEVICE_ID)
+                          chooseCamera(
+                            checked ? "default" : NO_CAMERA_DEVICE_ID,
+                          )
                         }
                         disabled={busy}
                         aria-label="Include camera in this recording"