@agent-native/core 0.161.23 → 0.162.0

package/corpus/README.md

@@ -31,4 +31,4 @@ rg -n "defineAction|useActionQuery" node_modules/@agent-native/core/corpus
 
 ## Generated Counts
 
-- template files: 8321
+- template files: 8323

package/corpus/templates/analytics/.agents/skills/real-time-sync/SKILL.md

@@ -50,7 +50,7 @@ The agent modifies data in SQL, but the UI runs in the browser. SSE bridges same
 
    For list/sidebar queries, use the same pattern — pass the counter into the queryKey of every list query you want to keep fresh.
 
-4. **Fallback** polling calls `/_agent-native/poll?since=N`. It runs every 2 seconds until SSE is connected, then relaxes to 15 seconds (`SSE_FALLBACK_INTERVAL_MS`). If SSE is disabled or unavailable (e.g., edge/serverless deployments), polling continues at the 2 s cadence. Polling is the universal serverless fallback: new framework writes are read from the durable `sync_events` log, while the older DB timestamp scan remains as a slower safety net for direct SQL writes and older processes.
+4. **Fallback** polling calls `/_agent-native/poll?since=N`. It polls every 2 seconds only while an agent run is in flight; otherwise it idles at 60 seconds whether or not SSE is connected (`SSE_FALLBACK_INTERVAL_MS` and `IDLE_POLL_INTERVAL_MS`, both 60 s). A hidden tab polls no faster than every 10 seconds (`HIDDEN_POLL_INTERVAL_MS`). Polling is the universal serverless fallback: new framework writes are read from the durable `sync_events` log, while the older DB timestamp scan remains as a slower safety net for direct SQL writes and older processes.
 
 5. When the agent writes to the database, the version increments, SSE/polling detects it, and React Query refetches the affected queries.
 

package/corpus/templates/analytics/app/components/dashboard/SqlChart.tsx

@@ -1623,8 +1623,15 @@ function MetricRenderer({
 
 function numericTableValue(value: unknown): number | null {
   if (typeof value === "number") return Number.isFinite(value) ? value : null;
-  if (typeof value !== "string" || value.trim() === "") return null;
-  const numeric = Number(value);
+  if (typeof value !== "string") return null;
+  const trimmed = value.trim();
+  if (trimmed === "") return null;
+  // Strip display formatting (currency symbols, thousands separators,
+  // percent signs, whitespace) so a formatted numeric column ("$1,234",
+  // "12.5%") still parses as a number instead of falling back to text.
+  const cleaned = trimmed.replace(/[$€£¥%,\s]/g, "");
+  if (cleaned === "" || cleaned === "-" || cleaned === "+") return null;
+  const numeric = Number(cleaned);
   return Number.isFinite(numeric) ? numeric : null;
 }
 
@@ -1651,6 +1658,15 @@ export function sortTableRows(
 
         const an = numericTableValue(av);
         const bn = numericTableValue(bv);
+
+        // A value that fails to parse as a number sorts after one that
+        // does, regardless of column direction — same rule as null above.
+        // Keeps a mostly-numeric column ("10", "9", "N/A") grouped by
+        // magnitude instead of interleaving text lexically with numbers,
+        // and never coerces the unparseable value to 0.
+        if (an !== null && bn === null) return -1;
+        if (an === null && bn !== null) return 1;
+
         const comparison =
           an !== null && bn !== null
             ? an - bn

package/corpus/templates/assets/.agents/skills/real-time-sync/SKILL.md

@@ -50,7 +50,7 @@ The agent modifies data in SQL, but the UI runs in the browser. SSE bridges same
 
    For list/sidebar queries, use the same pattern — pass the counter into the queryKey of every list query you want to keep fresh.
 
-4. **Fallback** polling calls `/_agent-native/poll?since=N`. It runs every 2 seconds until SSE is connected, then relaxes to 15 seconds (`SSE_FALLBACK_INTERVAL_MS`). If SSE is disabled or unavailable (e.g., edge/serverless deployments), polling continues at the 2 s cadence. Polling is the universal serverless fallback: new framework writes are read from the durable `sync_events` log, while the older DB timestamp scan remains as a slower safety net for direct SQL writes and older processes.
+4. **Fallback** polling calls `/_agent-native/poll?since=N`. It polls every 2 seconds only while an agent run is in flight; otherwise it idles at 60 seconds whether or not SSE is connected (`SSE_FALLBACK_INTERVAL_MS` and `IDLE_POLL_INTERVAL_MS`, both 60 s). A hidden tab polls no faster than every 10 seconds (`HIDDEN_POLL_INTERVAL_MS`). Polling is the universal serverless fallback: new framework writes are read from the durable `sync_events` log, while the older DB timestamp scan remains as a slower safety net for direct SQL writes and older processes.
 
 5. When the agent writes to the database, the version increments, SSE/polling detects it, and React Query refetches the affected queries.
 

package/corpus/templates/brain/.agents/skills/real-time-sync/SKILL.md

@@ -50,7 +50,7 @@ The agent modifies data in SQL, but the UI runs in the browser. SSE bridges same
 
    For list/sidebar queries, use the same pattern — pass the counter into the queryKey of every list query you want to keep fresh.
 
-4. **Fallback** polling calls `/_agent-native/poll?since=N`. It runs every 2 seconds until SSE is connected, then relaxes to 15 seconds (`SSE_FALLBACK_INTERVAL_MS`). If SSE is disabled or unavailable (e.g., edge/serverless deployments), polling continues at the 2 s cadence. Polling is the universal serverless fallback: new framework writes are read from the durable `sync_events` log, while the older DB timestamp scan remains as a slower safety net for direct SQL writes and older processes.
+4. **Fallback** polling calls `/_agent-native/poll?since=N`. It polls every 2 seconds only while an agent run is in flight; otherwise it idles at 60 seconds whether or not SSE is connected (`SSE_FALLBACK_INTERVAL_MS` and `IDLE_POLL_INTERVAL_MS`, both 60 s). A hidden tab polls no faster than every 10 seconds (`HIDDEN_POLL_INTERVAL_MS`). Polling is the universal serverless fallback: new framework writes are read from the durable `sync_events` log, while the older DB timestamp scan remains as a slower safety net for direct SQL writes and older processes.
 
 5. When the agent writes to the database, the version increments, SSE/polling detects it, and React Query refetches the affected queries.
 

package/corpus/templates/calendar/.agents/skills/real-time-sync/SKILL.md

@@ -50,7 +50,7 @@ The agent modifies data in SQL, but the UI runs in the browser. SSE bridges same
 
    For list/sidebar queries, use the same pattern — pass the counter into the queryKey of every list query you want to keep fresh.
 
-4. **Fallback** polling calls `/_agent-native/poll?since=N`. It runs every 2 seconds until SSE is connected, then relaxes to 15 seconds (`SSE_FALLBACK_INTERVAL_MS`). If SSE is disabled or unavailable (e.g., edge/serverless deployments), polling continues at the 2 s cadence. Polling is the universal serverless fallback: new framework writes are read from the durable `sync_events` log, while the older DB timestamp scan remains as a slower safety net for direct SQL writes and older processes.
+4. **Fallback** polling calls `/_agent-native/poll?since=N`. It polls every 2 seconds only while an agent run is in flight; otherwise it idles at 60 seconds whether or not SSE is connected (`SSE_FALLBACK_INTERVAL_MS` and `IDLE_POLL_INTERVAL_MS`, both 60 s). A hidden tab polls no faster than every 10 seconds (`HIDDEN_POLL_INTERVAL_MS`). Polling is the universal serverless fallback: new framework writes are read from the durable `sync_events` log, while the older DB timestamp scan remains as a slower safety net for direct SQL writes and older processes.
 
 5. When the agent writes to the database, the version increments, SSE/polling detects it, and React Query refetches the affected queries.
 

package/corpus/templates/calendar/server/handlers/google-auth.ts

@@ -163,23 +163,16 @@ function googleOAuthErrorPayload(
   message: string;
   code?: string;
   accountId?: string;
-  existingOwner?: string;
-  attemptedOwner?: string;
 } {
   if (
     error instanceof OAuthAccountOwnedByOtherUserError ||
     error?.name === "OAuthAccountOwnedByOtherUserError"
   ) {
     const account = error.accountId || "This Google account";
-    const existingOwner = error.existingOwner || undefined;
-    const attemptedOwner = error.attemptedOwner || undefined;
-    const message = `${account} is connected to another login. Sign out, then sign in with ${account}.`;
     return {
-      message,
+      message: `${account} is already connected to another login. Sign out, then sign in with the login that originally connected it.`,
       code: "account_owner_mismatch",
       accountId: error.accountId,
-      existingOwner,
-      attemptedOwner,
     };
   }
 

package/corpus/templates/chat/.agents/skills/real-time-sync/SKILL.md

@@ -50,7 +50,7 @@ The agent modifies data in SQL, but the UI runs in the browser. SSE bridges same
 
    For list/sidebar queries, use the same pattern — pass the counter into the queryKey of every list query you want to keep fresh.
 
-4. **Fallback** polling calls `/_agent-native/poll?since=N`. It runs every 2 seconds until SSE is connected, then relaxes to 15 seconds (`SSE_FALLBACK_INTERVAL_MS`). If SSE is disabled or unavailable (e.g., edge/serverless deployments), polling continues at the 2 s cadence. Polling is the universal serverless fallback: new framework writes are read from the durable `sync_events` log, while the older DB timestamp scan remains as a slower safety net for direct SQL writes and older processes.
+4. **Fallback** polling calls `/_agent-native/poll?since=N`. It polls every 2 seconds only while an agent run is in flight; otherwise it idles at 60 seconds whether or not SSE is connected (`SSE_FALLBACK_INTERVAL_MS` and `IDLE_POLL_INTERVAL_MS`, both 60 s). A hidden tab polls no faster than every 10 seconds (`HIDDEN_POLL_INTERVAL_MS`). Polling is the universal serverless fallback: new framework writes are read from the durable `sync_events` log, while the older DB timestamp scan remains as a slower safety net for direct SQL writes and older processes.
 
 5. When the agent writes to the database, the version increments, SSE/polling detects it, and React Query refetches the affected queries.
 

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

@@ -2,6 +2,7 @@ import { agentNativePath } from "@agent-native/core/client/api-path";
 import { useT } from "@agent-native/core/client/i18n";
 import { isSelectableAudioInputDevice } from "@shared/media-device-selection";
 import {
+  IconArrowLeft,
   IconBrowser,
   IconCamera,
   IconChevronDown,
@@ -14,16 +15,6 @@ import { useCallback, useEffect, useMemo, useRef, useState } from "react";
 
 import { CaptureInstallInlineLink } from "@/components/capture-install-options";
 import { ImportMenu } from "@/components/import-menu";
-import {
-  AlertDialog,
-  AlertDialogAction,
-  AlertDialogCancel,
-  AlertDialogContent,
-  AlertDialogDescription,
-  AlertDialogFooter,
-  AlertDialogHeader,
-  AlertDialogTitle,
-} from "@/components/ui/alert-dialog";
 import { Button } from "@/components/ui/button";
 import {
   Collapsible,
@@ -124,6 +115,69 @@ type SurfaceOption = {
 
 const REQUEST_MIC_ACCESS_VALUE = "__clips_request_microphone_access__";
 
+function MicOffConfirmation({
+  onBack,
+  onUnmute,
+  onContinue,
+}: {
+  onBack: () => void;
+  onUnmute: () => void;
+  onContinue: () => void;
+}) {
+  const t = useT();
+
+  return (
+    <div className="fixed inset-0 z-50 flex min-h-screen flex-col overflow-y-auto bg-background text-foreground">
+      <header className="flex shrink-0 items-center px-6 py-5 sm:px-10">
+        <button
+          type="button"
+          onClick={onBack}
+          className="inline-flex items-center gap-2 rounded-lg px-1 py-1 text-lg font-semibold transition-colors hover:bg-muted focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring"
+        >
+          <IconArrowLeft className="h-5 w-5 rtl:-scale-x-100" />
+          {t("recordingPage.back")}
+        </button>
+      </header>
+
+      <main className="flex flex-1 flex-col items-center justify-center px-6 py-12 text-center sm:py-16">
+        <div
+          className="relative flex h-28 w-28 items-center justify-center rounded-full bg-destructive/10 text-destructive"
+          aria-hidden="true"
+        >
+          <IconMicrophone className="h-12 w-12" strokeWidth={1.75} />
+          <span className="absolute h-1 w-20 rotate-45 rounded-full bg-destructive" />
+        </div>
+        <h1 className="mt-10 text-3xl font-semibold tracking-tight sm:text-4xl">
+          {t("preRecord.micOffConfirmTitle")}
+        </h1>
+        <p className="mt-4 max-w-md text-base leading-7 text-muted-foreground sm:text-lg">
+          {t("preRecord.micOffConfirmDescription")}
+        </p>
+      </main>
+
+      <footer className="flex shrink-0 justify-center border-t border-border bg-muted/20 px-6 py-6 sm:px-10">
+        <div className="flex w-full max-w-md gap-4">
+          <Button
+            type="button"
+            variant="outline"
+            onClick={onUnmute}
+            className="h-12 flex-1 rounded-xl text-base font-semibold"
+          >
+            {t("preRecord.unmuteMicrophone")}
+          </Button>
+          <Button
+            type="button"
+            onClick={onContinue}
+            className="h-12 flex-1 rounded-xl text-base font-semibold"
+          >
+            {t("preRecord.startWithoutMic")}
+          </Button>
+        </div>
+      </footer>
+    </div>
+  );
+}
+
 function isPseudoMediaDeviceId(value: string | null | undefined): boolean {
   const id = value?.trim().toLowerCase();
   return !id || id === "default" || id === "communications";
@@ -465,6 +519,20 @@ export function PreRecordPanel({
     onStart(buildStartOpts());
   }, [micId, buildStartOpts, onStart]);
 
+  const handleMicWarningBack = useCallback(() => {
+    setMicWarningOpen(false);
+  }, []);
+
+  const handleMicWarningUnmute = useCallback(() => {
+    chooseMic("default");
+    setMicWarningOpen(false);
+  }, [chooseMic]);
+
+  const handleMicWarningContinue = useCallback(() => {
+    setMicWarningOpen(false);
+    onStart(buildStartOpts());
+  }, [buildStartOpts, onStart]);
+
   const selectedCameraLabel = useMemo(() => {
     if (!needsCamera) return null;
     if (cameraId === "default") return t("preRecord.defaultCamera");
@@ -619,6 +687,16 @@ export function PreRecordPanel({
     return null;
   }, [audioEnabled, cameraTest.status, micTest.status, needsCamera, t]);
 
+  if (micWarningOpen) {
+    return (
+      <MicOffConfirmation
+        onBack={handleMicWarningBack}
+        onUnmute={handleMicWarningUnmute}
+        onContinue={handleMicWarningContinue}
+      />
+    );
+  }
+
   return (
     <div className="mx-auto w-full max-w-lg overflow-hidden rounded-2xl border border-border bg-card shadow-lg">
       <div className="p-6">
@@ -965,31 +1043,6 @@ export function PreRecordPanel({
           </>
         )}
       </div>
-
-      <AlertDialog open={micWarningOpen} onOpenChange={setMicWarningOpen}>
-        <AlertDialogContent>
-          <AlertDialogHeader>
-            <AlertDialogTitle>
-              {t("preRecord.micOffConfirmTitle")}
-            </AlertDialogTitle>
-            <AlertDialogDescription>
-              {t("preRecord.micOffConfirmDescription")}
-            </AlertDialogDescription>
-          </AlertDialogHeader>
-          <AlertDialogFooter>
-            <AlertDialogCancel>{t("common.cancel")}</AlertDialogCancel>
-            <AlertDialogAction
-              onClick={(event) => {
-                event.preventDefault();
-                setMicWarningOpen(false);
-                onStart(buildStartOpts());
-              }}
-            >
-              {t("preRecord.startWithoutMic")}
-            </AlertDialogAction>
-          </AlertDialogFooter>
-        </AlertDialogContent>
-      </AlertDialog>
     </div>
   );
 }

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

@@ -505,6 +505,8 @@ export class RecorderEngine {
   private cameraComposite: CameraCompositeHandle | null = null;
   private audioMixCtx: AudioContext | null = null;
   private audioMixSources: MediaStreamAudioSourceNode[] = [];
+  private wakeLock: WakeLockSentinel | null = null;
+  private wakeLockGeneration = 0;
   private recorder: MediaRecorder | null = null;
   private mimeType: string = "video/webm";
 
@@ -890,7 +892,7 @@ export class RecorderEngine {
         this.opts.displaySurface ?? "window",
       );
       const displayOptions: ExtendedDisplayMediaOptions =
-        screenCaptureDisplayOptions(displaySurface);
+        screenCaptureDisplayOptions(displaySurface, wantsMic);
 
       if (wantsMic || wantsDisplay) {
         this.audioMixCtx?.close().catch(() => {});
@@ -904,6 +906,14 @@ export class RecorderEngine {
         } catch (err) {
           throw this.friendlyError(err, "screen");
         }
+        // The OS is as free to sleep/lock the display during a pause as
+        // during active recording, which ends getDisplayMedia's video track
+        // outright (unlike the mic/camera, display capture requires an
+        // active compositor). Without this, a paused recording left idle
+        // finalizes early with no warning — see onDisplayTrackEnded below.
+        // Best-effort: unsupported browsers or a denied request must never
+        // block capture.
+        void this.acquireWakeLock();
       }
 
       if (wantsCamera) {
@@ -2360,9 +2370,34 @@ export class RecorderEngine {
     );
   }
 
+  /** Best-effort — unsupported browsers or a denied request must never block capture. */
+  private async acquireWakeLock(): Promise<void> {
+    const generation = ++this.wakeLockGeneration;
+    try {
+      // coercion-ok: optional chaining yields undefined only when the Wake
+      // Lock API itself is absent (older/other browsers) — a real rejection
+      // (denied request) is caught below, not coerced here.
+      const wakeLock = (await navigator.wakeLock?.request?.("screen")) ?? null;
+      if (generation !== this.wakeLockGeneration || !this.displayStream) {
+        wakeLock?.release().catch(() => {});
+        return;
+      }
+      this.wakeLock = wakeLock;
+    } catch {
+      if (generation === this.wakeLockGeneration) this.wakeLock = null;
+    }
+  }
+
+  private releaseWakeLock(): void {
+    this.wakeLockGeneration += 1;
+    this.wakeLock?.release().catch(() => {});
+    this.wakeLock = null;
+  }
+
   private cleanupTracks(): void {
     // Clear before stopping tracks so the `ended` events our own stop() fires
     // aren't mistaken for a disconnect.
+    this.releaseWakeLock();
     this.cameraLive = false;
     this.audioMixSources = [];
     this.audioMixCtx?.close().catch(() => {});

package/corpus/templates/clips/app/i18n/en-US.ts

@@ -1335,10 +1335,11 @@ All notable user-facing changes to Clips are documented here. Open it any time f
     cameraOff: "Camera off",
     includeCameraAria: "Include camera in this recording",
     startRecording: "Start recording",
-    micOffConfirmTitle: "Record without a microphone?",
+    micOffConfirmTitle: "Your mic is muted",
     micOffConfirmDescription:
-      "Your mic is off, so this recording won't capture any audio. Turn it on before starting if you want narration.",
-    startWithoutMic: "Start anyway",
+      "To have sound in your video, you’ll need to unmute your microphone.",
+    startWithoutMic: "Continue",
+    unmuteMicrophone: "Unmute",
     uploadVideo: "Upload video",
     importLoom: "Import Loom",
     importing: "Importing...",

package/corpus/templates/clips/desktop/src/app.tsx

@@ -37,16 +37,6 @@ import {
   useState,
 } from "react";
 
-import {
-  AlertDialog,
-  AlertDialogAction,
-  AlertDialogCancel,
-  AlertDialogContent,
-  AlertDialogDescription,
-  AlertDialogFooter,
-  AlertDialogHeader,
-  AlertDialogTitle,
-} from "./components/AlertDialog";
 import { FeedbackButton } from "./components/FeedbackButton";
 import {
   CamIcon,
@@ -58,6 +48,7 @@ import {
   SettingsIcon,
 } from "./components/Icons";
 import { MediaDeviceRow } from "./components/MediaDeviceRow";
+import { MicOffConfirmation } from "./components/MicOffConfirmation";
 import { ReadinessPanel } from "./components/ReadinessPanel";
 import { SourceRow, type CaptureSource } from "./components/SourceRow";
 import { Switch } from "./components/Switch";
@@ -3333,6 +3324,22 @@ export function App() {
     void handleStartRecording(options);
   }
 
+  function closeMicOffConfirmation() {
+    pendingStartOptionsRef.current = undefined;
+    setMicOffConfirmOpen(false);
+  }
+
+  function unmuteFromConfirmation() {
+    setMicOn(true);
+    closeMicOffConfirmation();
+  }
+
+  function continueWithoutMic() {
+    const options = pendingStartOptionsRef.current;
+    closeMicOffConfirmation();
+    void handleStartRecording(options);
+  }
+
   recordShortcutHandlerRef.current = () => {
     if (recorder) {
       emit("clips:recorder-stop").catch(() => {});
@@ -3960,7 +3967,19 @@ export function App() {
 
   return (
     <div className="app app-recorder" ref={appRef}>
-      <div className="recorder-home-content">
+      {micOffConfirmOpen ? (
+        <MicOffConfirmation
+          onBack={closeMicOffConfirmation}
+          onUnmute={unmuteFromConfirmation}
+          onContinue={continueWithoutMic}
+        />
+      ) : null}
+
+      <div
+        className="recorder-home-content"
+        hidden={micOffConfirmOpen}
+        aria-hidden={micOffConfirmOpen}
+      >
         <Header
           mode={mode}
           onModeChange={setMode}
@@ -4077,35 +4096,6 @@ export function App() {
           </button>
         ) : null}
 
-        <AlertDialog
-          open={micOffConfirmOpen}
-          onOpenChange={(open) => {
-            setMicOffConfirmOpen(open);
-            if (!open) pendingStartOptionsRef.current = undefined;
-          }}
-        >
-          <AlertDialogContent>
-            <AlertDialogHeader>
-              <AlertDialogTitle>Record without a microphone?</AlertDialogTitle>
-              <AlertDialogDescription>
-                Your mic is off, so this recording won&apos;t capture any audio.
-                Turn it on before starting if you want narration.
-              </AlertDialogDescription>
-            </AlertDialogHeader>
-            <AlertDialogFooter>
-              <AlertDialogAction
-                onClick={() => {
-                  const options = pendingStartOptionsRef.current;
-                  pendingStartOptionsRef.current = undefined;
-                  void handleStartRecording(options);
-                }}
-              >
-                Start anyway
-              </AlertDialogAction>
-              <AlertDialogCancel>Cancel</AlertDialogCancel>
-            </AlertDialogFooter>
-          </AlertDialogContent>
-        </AlertDialog>
         {recError ? (
           recError === MACOS_UPDATE_RESTART_MESSAGE ? (
             <UpdateRestartBanner message={recError} />

package/corpus/templates/clips/desktop/src/components/MicOffConfirmation.tsx

@@ -0,0 +1,47 @@
+import { IconArrowLeft, IconMicrophone2 } from "@tabler/icons-react";
+
+export function MicOffConfirmation({
+  onBack,
+  onUnmute,
+  onContinue,
+}: {
+  onBack: () => void;
+  onUnmute: () => void;
+  onContinue: () => void;
+}) {
+  return (
+    <section className="mic-off-confirmation" aria-labelledby="mic-off-title">
+      <header className="mic-off-confirmation-header">
+        <button
+          type="button"
+          className="mic-off-confirmation-back"
+          onClick={onBack}
+        >
+          <IconArrowLeft size={18} aria-hidden="true" />
+          Back
+        </button>
+      </header>
+
+      <div className="mic-off-confirmation-body">
+        <div className="mic-off-confirmation-visual" aria-hidden="true">
+          <IconMicrophone2 size={42} strokeWidth={1.7} />
+          <span className="mic-off-confirmation-slash" />
+        </div>
+        <h2 id="mic-off-title">Your mic is muted</h2>
+        <p>
+          To have sound in your video, you&apos;ll need to unmute your
+          microphone.
+        </p>
+      </div>
+
+      <footer className="mic-off-confirmation-actions">
+        <button type="button" className="secondary" onClick={onUnmute}>
+          Unmute
+        </button>
+        <button type="button" className="primary" onClick={onContinue}>
+          Continue
+        </button>
+      </footer>
+    </section>
+  );
+}

package/corpus/templates/clips/desktop/src/styles.css

@@ -3150,6 +3150,116 @@ body[data-clips-route="recording-pill"] #root {
   }
 }
 
+/* ------------------------------------------------------------------------- */
+/* Microphone-off confirmation                                                */
+/* ------------------------------------------------------------------------- */
+
+.mic-off-confirmation {
+  min-height: 430px;
+  display: flex;
+  flex-direction: column;
+  background: var(--bg);
+}
+
+.mic-off-confirmation-header {
+  display: flex;
+  align-items: center;
+  padding: 16px 18px 8px;
+}
+
+.mic-off-confirmation-back {
+  display: inline-flex;
+  align-items: center;
+  gap: 6px;
+  min-height: 30px;
+  padding: 4px 6px 4px 2px;
+  border: 0;
+  border-radius: var(--radius-sm);
+  background: transparent;
+  color: var(--fg);
+  cursor: pointer;
+  font-size: 15px;
+  font-weight: 650;
+  transition:
+    background 120ms,
+    color 120ms;
+}
+
+.mic-off-confirmation-back:hover {
+  background: var(--surface-hover);
+}
+
+.mic-off-confirmation-back:focus-visible {
+  outline: none;
+  box-shadow: 0 0 0 3px var(--brand-ring);
+}
+
+.mic-off-confirmation-body {
+  display: flex;
+  flex: 1 1 auto;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  padding: 24px 28px 30px;
+  text-align: center;
+}
+
+.mic-off-confirmation-visual {
+  position: relative;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 88px;
+  height: 88px;
+  border-radius: 50%;
+  background: var(--surface-strong);
+  color: var(--status-warn);
+}
+
+.mic-off-confirmation-slash {
+  position: absolute;
+  width: 58px;
+  height: 3px;
+  border-radius: var(--radius-pill);
+  background: var(--status-warn);
+  transform: rotate(45deg);
+}
+
+.mic-off-confirmation-body h2 {
+  margin: 24px 0 0;
+  font-size: 22px;
+  font-weight: 700;
+  letter-spacing: -0.02em;
+}
+
+.mic-off-confirmation-body p {
+  max-width: 300px;
+  margin: 8px 0 0;
+  color: var(--fg-muted);
+  font-size: 14px;
+  line-height: 1.55;
+}
+
+.mic-off-confirmation-actions {
+  display: grid;
+  grid-template-columns: repeat(2, minmax(0, 1fr));
+  gap: 10px;
+  padding: 16px 18px 18px;
+  border-top: 1px solid var(--border);
+  background: var(--surface);
+}
+
+.mic-off-confirmation-actions .primary,
+.mic-off-confirmation-actions .secondary {
+  width: auto;
+  min-width: 0;
+  height: 42px;
+  padding: 0 12px;
+  border-radius: var(--radius);
+  font-size: 13px;
+  white-space: nowrap;
+}
+
 /* ------------------------------------------------------------------------- */
 /* Alert dialog                                                              */
 /* ------------------------------------------------------------------------- */