From 8459d7aec441201e39752fccfc885b2bf446eade Mon Sep 17 00:00:00 2001
From: maria-rcks <maria@kuuro.net>
Date: Sun, 8 Nov 2026 23:42:46 +0000
Subject: [PATCH 1/9] fix(web): voice settings read like the other settings
 pages

The microphone test gets its own row with an inline record, level, and
playback strip, so it no longer crushes the microphone description.
Selects show short values, descriptions are one sentence, dictionary
counts are gone, the destination is a normal row, and the model browser
uses a search plus language and sort menus instead of a cramped
two-pane list. Custom cleanup instructions start from the built-in
prompt and the editor only shows for Custom.
---
 .../components/settings/MicrophoneTest.tsx    | 200 ++--
 .../settings/SpeechModelComparison.tsx        |  27 -
 .../VoiceSettingsPanel.browser.test.tsx       |  10 +-
 .../settings/VoiceSettingsPanel.tsx           | 894 +++++++++---------
 4 files changed, 561 insertions(+), 570 deletions(-)

diff --git a/apps/web/src/components/settings/MicrophoneTest.tsx b/apps/web/src/components/settings/MicrophoneTest.tsx
index d3597e2dea67..14482bfbed91 100644
--- a/apps/web/src/components/settings/MicrophoneTest.tsx
+++ b/apps/web/src/components/settings/MicrophoneTest.tsx
@@ -1,12 +1,14 @@
 import { MICROPHONE_PERMISSION_ERROR } from "@t3tools/client-runtime/voice-input";
-import { CheckIcon, MicIcon, PauseIcon, PlayIcon, RotateCcwIcon, XIcon } from "lucide-react";
+import { MicIcon, PauseIcon, PlayIcon, RotateCcwIcon, SquareIcon, XIcon } from "lucide-react";
 import { useEffect, useRef, useState } from "react";
 
 import { useStableCallback } from "~/hooks/useStableCallback";
 import workletUrl from "../../speech/pcmWorklet.ts?worker&url";
-import { VoiceInputErrorPill } from "../chat/VoiceInputErrorPill";
-import { VoiceInputPill, VoiceWaveform } from "../chat/VoiceInputPill";
+import { VoiceWaveform } from "../chat/VoiceInputPill";
+import { cn } from "../../lib/utils";
 import { Button } from "../ui/button";
+import { SettingsRow } from "./settingsLayout";
+import { searchableSetting } from "./settingsSearch";
 
 const LOOPBACK_SECONDS = 10;
 const formatTime = (seconds: number) =>
@@ -181,70 +183,11 @@ export function MicrophoneTest({ microphoneId }: { microphoneId: string }) {
     setError(null);
   };
 
-  if (error) {
-    return (
-      <VoiceInputErrorPill
-        error={error}
-        errorAction="retry"
-        onRetry={() => void start()}
-        onDismiss={cancel}
-      />
-    );
-  }
-  if (phase === "idle") {
-    return (
-      <Button size="sm" variant="outline" onClick={() => void start()}>
-        <MicIcon />
-        Test microphone
-      </Button>
-    );
-  }
-  if (phase === "ready" && recording) {
-    return (
-      <MicrophonePlayback
-        key={recording.url}
-        src={recording.url}
-        duration={recording.duration}
-        onRetry={() => void start()}
-        onDone={cancel}
-      />
-    );
-  }
-  return (
-    <VoiceInputPill>
-      <Button
-        size="icon-sm-pill"
-        variant="ghost"
-        aria-label="Cancel microphone test"
-        onClick={cancel}
-      >
-        <XIcon />
-      </Button>
-      {phase === "recording" ? (
-        <>
-          <VoiceWaveform level={level} />
-          <span aria-hidden className="size-1.5 shrink-0 rounded-full bg-primary" />
-          <span
-            className="shrink-0 text-xs tabular-nums text-muted-foreground"
-            aria-label="Recording time"
-          >
-            {formatTime(elapsed)} / {formatTime(LOOPBACK_SECONDS)}
-          </span>
-          <meter
-            aria-label="Microphone input level"
-            min={0}
-            max={1}
-            value={level}
-            className="sr-only"
-          />
-        </>
-      ) : (
-        <span role="status" className="min-w-0 flex-1 truncate text-xs text-muted-foreground">
-          Opening microphone…
-        </span>
-      )}
+  const control =
+    phase === "recording" || phase === "starting" ? (
       <Button
-        size="icon-sm-pill"
+        size="sm"
+        variant="outline"
         aria-label="Stop recording"
         disabled={phase !== "recording"}
         onClick={() => {
@@ -252,23 +195,77 @@ export function MicrophoneTest({ microphoneId }: { microphoneId: string }) {
           if (recorder && recorder.state !== "inactive") recorder.stop();
         }}
       >
-        <CheckIcon />
+        <SquareIcon />
+        Stop
+      </Button>
+    ) : (
+      <Button size="sm" variant="outline" onClick={() => void start()}>
+        {phase === "ready" ? <RotateCcwIcon /> : <MicIcon />}
+        {phase === "ready" ? "Record again" : "Record"}
       </Button>
-    </VoiceInputPill>
+    );
+  const panel = error ? (
+    <p role="alert" className="min-w-0 flex-1 text-xs text-destructive">
+      {error}
+    </p>
+  ) : phase === "starting" ? (
+    <span role="status" className="min-w-0 flex-1 truncate text-xs text-muted-foreground">
+      Opening microphone…
+    </span>
+  ) : phase === "recording" ? (
+    <>
+      <span aria-hidden className="size-1.5 shrink-0 rounded-full bg-destructive" />
+      <div className="flex w-36 min-w-0">
+        <VoiceWaveform level={level} />
+      </div>
+      <span
+        className="ms-auto shrink-0 text-xs tabular-nums text-muted-foreground"
+        aria-label="Recording time"
+      >
+        {formatTime(elapsed)} / {formatTime(LOOPBACK_SECONDS)}
+      </span>
+      <meter
+        aria-label="Microphone input level"
+        min={0}
+        max={1}
+        value={level}
+        className="sr-only"
+      />
+    </>
+  ) : phase === "ready" && recording ? (
+    <MicrophonePlayback key={recording.url} src={recording.url} duration={recording.duration} />
+  ) : null;
+
+  return (
+    <SettingsRow
+      {...searchableSetting("microphone-test")}
+      title="Test microphone"
+      description="Record ten seconds and play it back. The audio stays on this device."
+      control={control}
+    >
+      {panel ? (
+        <div
+          className={cn(
+            "mt-3 mb-2 flex min-h-10 items-center gap-3 rounded-lg border border-border/60 bg-muted/30 py-1 pe-1",
+            phase === "ready" && !error ? "ps-1" : "ps-3",
+          )}
+        >
+          {panel}
+          <Button
+            size="icon-sm"
+            variant="ghost-muted"
+            aria-label={phase === "ready" ? "Discard recording" : "Cancel microphone test"}
+            onClick={cancel}
+          >
+            <XIcon />
+          </Button>
+        </div>
+      ) : null}
+    </SettingsRow>
   );
 }
 
-function MicrophonePlayback({
-  src,
-  duration,
-  onRetry,
-  onDone,
-}: {
-  src: string;
-  duration: number;
-  onRetry(): void;
-  onDone(): void;
-}) {
+function MicrophonePlayback({ src, duration }: { src: string; duration: number }) {
   const audio = useRef<HTMLAudioElement>(null);
   const [playing, setPlaying] = useState(false);
   const [position, setPosition] = useState(0);
@@ -292,7 +289,7 @@ function MicrophonePlayback({
   };
 
   return (
-    <div className="flex flex-col gap-1">
+    <>
       <audio
         ref={audio}
         src={src}
@@ -303,15 +300,19 @@ function MicrophonePlayback({
         onTimeUpdate={() => setPosition(audio.current?.currentTime ?? 0)}
         onError={() => setFailed(true)}
       />
-      <VoiceInputPill>
-        <Button
-          size="icon-sm-pill"
-          variant="ghost"
-          aria-label={playing ? "Pause recording" : "Play recording"}
-          onClick={() => void togglePlayback()}
-        >
-          {playing ? <PauseIcon /> : <PlayIcon />}
-        </Button>
+      <Button
+        size="icon-sm-pill"
+        variant="outline"
+        aria-label={playing ? "Pause recording" : "Play recording"}
+        onClick={() => void togglePlayback()}
+      >
+        {playing ? <PauseIcon /> : <PlayIcon />}
+      </Button>
+      {failed ? (
+        <p role="alert" className="min-w-0 flex-1 text-xs text-destructive">
+          Could not play this recording. Try recording again.
+        </p>
+      ) : (
         <input
           type="range"
           aria-label="Recording playback position"
@@ -330,21 +331,10 @@ function MicrophonePlayback({
           }}
           className="h-1 min-w-0 flex-1 cursor-pointer appearance-none rounded-full bg-muted accent-primary focus-visible:outline-2 focus-visible:-outline-offset-2 focus-visible:outline-ring [&::-webkit-slider-thumb]:size-2.5 [&::-webkit-slider-thumb]:appearance-none [&::-webkit-slider-thumb]:rounded-full [&::-webkit-slider-thumb]:bg-primary [&::-moz-range-thumb]:size-2.5 [&::-moz-range-thumb]:rounded-full [&::-moz-range-thumb]:border-0 [&::-moz-range-thumb]:bg-primary"
         />
-        <span className="shrink-0 text-xs tabular-nums text-muted-foreground">
-          {formatTime(position)}
-        </span>
-        <Button size="icon-sm-pill" variant="ghost" aria-label="Record again" onClick={onRetry}>
-          <RotateCcwIcon />
-        </Button>
-        <Button size="icon-sm-pill" aria-label="Done" onClick={onDone}>
-          <CheckIcon />
-        </Button>
-      </VoiceInputPill>
-      {failed ? (
-        <p role="alert" className="text-xs text-destructive">
-          Could not play this recording. Try recording again.
-        </p>
-      ) : null}
-    </div>
+      )}
+      <span className="shrink-0 text-xs tabular-nums text-muted-foreground">
+        {formatTime(position)} / {formatTime(duration)}
+      </span>
+    </>
   );
 }
diff --git a/apps/web/src/components/settings/SpeechModelComparison.tsx b/apps/web/src/components/settings/SpeechModelComparison.tsx
index 47f8ca57e998..4842c688b36d 100644
--- a/apps/web/src/components/settings/SpeechModelComparison.tsx
+++ b/apps/web/src/components/settings/SpeechModelComparison.tsx
@@ -1,7 +1,5 @@
 import type { EnvironmentSpeechModel, SpeechBenchmarkTier } from "@t3tools/contracts";
-import { CheckIcon } from "lucide-react";
 
-import { cn } from "../../lib/utils";
 import { languageLabel } from "./SpeechLanguageSelect";
 
 const commonLanguages = [
@@ -45,31 +43,6 @@ export function orderSpeechLanguages(languages: readonly string[], preferred: re
   );
 }
 
-export function LanguageRow({
-  label,
-  selected,
-  onClick,
-}: {
-  label: string;
-  selected: boolean;
-  onClick: () => void;
-}) {
-  return (
-    <button
-      type="button"
-      aria-pressed={selected}
-      onClick={onClick}
-      className={cn(
-        "flex shrink-0 cursor-pointer items-center justify-between gap-2 rounded-md px-2.5 py-1.5 text-left text-sm outline-none hover:bg-muted/50 focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-ring",
-        selected && "bg-muted font-medium",
-      )}
-    >
-      {label}
-      {selected && <CheckIcon className="size-3.5 shrink-0" />}
-    </button>
-  );
-}
-
 export function ModelBenchmarks({
   model,
   languages,
diff --git a/apps/web/src/components/settings/VoiceSettingsPanel.browser.test.tsx b/apps/web/src/components/settings/VoiceSettingsPanel.browser.test.tsx
index 06f4496f3378..888da736f89a 100644
--- a/apps/web/src/components/settings/VoiceSettingsPanel.browser.test.tsx
+++ b/apps/web/src/components/settings/VoiceSettingsPanel.browser.test.tsx
@@ -331,17 +331,23 @@ it("tests the selected model after download and preserves its transcript across
           const result = screen.getByRole("status", { name: "Test transcript" });
           await expect.element(result).toHaveTextContent(transcript);
 
-          const search = screen.getByRole("textbox", { name: "Search transcription models" });
+          const search = screen.getByRole("searchbox", { name: "Search transcription models" });
           await userEvent.fill(search, "no matching model");
           await expect.element(screen.getByText("No models match.")).toBeVisible();
           await userEvent.clear(search);
+          const languages = screen.getByRole("button", { name: /^Filter by language/ });
+          await userEvent.click(languages);
           await userEvent.fill(screen.getByRole("textbox", { name: "Search languages" }), "fr");
-          const french = screen.getByRole("button", { name: "French", exact: true });
+          const french = screen.getByRole("menuitemcheckbox", { name: "French", exact: true });
           await userEvent.click(french);
+          await userEvent.keyboard("{Escape}");
           await expect.element(screen.getByText("Bilingual", { exact: true })).toBeVisible();
           await expect.element(screen.getByText("B+", { exact: true })).toBeVisible();
           expect(screen.container.querySelector("#transcription-test")).toHaveAttribute("hidden");
+          await userEvent.click(languages);
+          await userEvent.fill(screen.getByRole("textbox", { name: "Search languages" }), "fr");
           await userEvent.click(french);
+          await userEvent.keyboard("{Escape}");
           await expect.element(result).toBeVisible();
           await vi.waitFor(() =>
             expect(
diff --git a/apps/web/src/components/settings/VoiceSettingsPanel.tsx b/apps/web/src/components/settings/VoiceSettingsPanel.tsx
index 495abdefb6b6..dd65e553d50e 100644
--- a/apps/web/src/components/settings/VoiceSettingsPanel.tsx
+++ b/apps/web/src/components/settings/VoiceSettingsPanel.tsx
@@ -30,6 +30,7 @@ import { createModelSelection } from "@t3tools/shared/model";
 import { resolveSpeechPostProcessingModelSelection } from "@t3tools/shared/serverSettings";
 import { cloudSpeechLanguages } from "@t3tools/shared/speech";
 import {
+  ArrowDownUpIcon,
   AudioLinesIcon,
   CheckIcon,
   DownloadIcon,
@@ -38,10 +39,12 @@ import {
   MonitorIcon,
   MicOffIcon,
   MicIcon,
+  PlusIcon,
   RefreshCwIcon,
+  SearchIcon,
   StarIcon,
-  SlidersHorizontalIcon,
   Trash2Icon,
+  TriangleAlertIcon,
   XIcon,
 } from "lucide-react";
 import { useEffect, useRef, useState, type ReactNode } from "react";
@@ -88,6 +91,7 @@ import {
   MenuRadioGroup,
   MenuRadioItem,
   MenuRadioItemIndicator,
+  MenuSearchInput,
   MenuSeparator,
   MenuTrigger,
 } from "../ui/menu";
@@ -105,7 +109,7 @@ import { Textarea } from "../ui/textarea";
 import { toastManager } from "../ui/toast";
 import { MicrophoneTest } from "./MicrophoneTest";
 import { CloudVoiceConfiguration } from "./CloudVoiceConfiguration";
-import { LanguageRow, ModelBenchmarks, orderSpeechLanguages } from "./SpeechModelComparison";
+import { ModelBenchmarks, orderSpeechLanguages } from "./SpeechModelComparison";
 import { languageLabel, SpeechLanguageSelect } from "./SpeechLanguageSelect";
 import { filterSpeechModels, type SpeechModelSort } from "./speechModelBrowser";
 import { AdvancedSettings } from "./AdvancedSettings";
@@ -135,10 +139,10 @@ function CloudSpeechLogo({ provider }: { provider: CloudSpeechProvider }) {
 }
 const SYSTEM_DEFAULT = "system-default";
 const formatSize = (bytes: number) => `${Math.round(bytes / 1024 / 1024)} MB`;
-const SHORTCUT_MODE_LABELS: Record<VoiceShortcutMode, string> = {
-  auto: "Auto: press to toggle, hold to record",
-  hold: "Hold: record while held",
-  toggle: "Toggle: press to start, press again to stop",
+const SHORTCUT_MODES: Record<VoiceShortcutMode, { label: string; hint: string }> = {
+  auto: { label: "Auto", hint: "Tap to toggle, hold to talk" },
+  hold: { label: "Hold", hint: "Record while held" },
+  toggle: { label: "Toggle", hint: "Tap to start, tap to stop" },
 };
 const UNLOAD_LABELS: Record<SpeechModelUnloadTimeout, string> = {
   never: "Never",
@@ -188,107 +192,113 @@ function ModelCard(props: ModelCardProps) {
   const downloading = model.state === "downloading" || model.state === "verifying";
   const progress = model.downloaded === undefined ? 0 : (model.downloaded / model.size) * 100;
   return (
-    <div className="flex flex-wrap items-start gap-3 px-3 py-2.5 sm:px-4">
-      <div className="min-w-0 flex-1">
-        <div className="flex flex-wrap items-center gap-1.5">
-          <span className="text-sm font-medium leading-5">{model.name}</span>
-          {model.recommended ? (
-            <ModelBadge
-              icon={<StarIcon className="mr-1 size-3" />}
-              label="Recommended"
-              tooltip="A good default pick for the languages it covers."
-            />
-          ) : null}
-          {model.supportsStreaming ? (
-            <ModelBadge
-              icon={<AudioLinesIcon className="mr-1 size-3" />}
-              label="Live preview"
-              tooltip="Shows words in your draft as you speak, before the recording finishes."
-            />
+    <div className="@container/model px-3 py-3">
+      <div className="flex flex-col gap-2.5 @min-[28rem]/model:flex-row @min-[28rem]/model:items-start @min-[28rem]/model:gap-4">
+        <div className="min-w-0 flex-1">
+          <div className="flex flex-wrap items-center gap-1.5">
+            <span className="text-sm font-medium leading-5">{model.name}</span>
+            {model.recommended ? (
+              <ModelBadge
+                icon={<StarIcon className="mr-1 size-3" />}
+                label="Recommended"
+                tooltip="A good default pick for the languages it covers."
+              />
+            ) : null}
+            {model.supportsStreaming ? (
+              <ModelBadge
+                icon={<AudioLinesIcon className="mr-1 size-3" />}
+                label="Live preview"
+                tooltip="Shows words in your draft as you speak, before the recording finishes."
+              />
+            ) : null}
+            {model.supportsTranslation ? (
+              <ModelBadge
+                icon={<LanguagesIcon className="mr-1 size-3" />}
+                label="Translate"
+                tooltip="Can write English text from speech in another language. Turn on Translate to English to use it."
+              />
+            ) : null}
+          </div>
+          {model.description ? (
+            <p className="mt-0.5 text-xs leading-normal text-muted-foreground">
+              {model.description}
+            </p>
           ) : null}
-          {model.supportsTranslation ? (
-            <ModelBadge
-              icon={<LanguagesIcon className="mr-1 size-3" />}
-              label="Translate"
-              tooltip="Can write English text from speech in another language. Turn on Translate to English to use it."
-            />
+          <ModelBenchmarks
+            model={model}
+            languages={props.comparisonLanguages}
+            tier={props.benchmarkTier}
+            facts={[
+              ...(model.languages.length > 1
+                ? [`${model.languages.length} languages`]
+                : model.benchmark
+                  ? []
+                  : [languageLabel(model.languages[0] ?? "")]),
+              formatSize(model.size),
+            ]}
+          />
+          {downloading ? (
+            <div className="mt-2">
+              <div
+                role="progressbar"
+                aria-label={`${model.name} download progress`}
+                aria-valuemin={0}
+                aria-valuemax={100}
+                aria-valuenow={Math.round(progress)}
+                className="h-1 overflow-hidden rounded-full bg-muted"
+              >
+                <div
+                  className="h-full bg-primary transition-[width] duration-200"
+                  style={{ width: `${progress}%` }}
+                />
+              </div>
+              <p className="mt-1 text-2xs text-muted-foreground">
+                {model.state === "verifying"
+                  ? "Verifying download…"
+                  : `${Math.round(progress)}% downloaded`}
+              </p>
+            </div>
           ) : null}
         </div>
-        <p className="mt-0.5 text-xs leading-relaxed text-muted-foreground">{model.description}</p>
-        <ModelBenchmarks
-          model={model}
-          languages={props.comparisonLanguages}
-          tier={props.benchmarkTier}
-          facts={[
-            ...(model.languages.length > 1
-              ? [`${model.languages.length} languages`]
-              : model.benchmark
-                ? []
-                : [languageLabel(model.languages[0] ?? "")]),
-            formatSize(model.size),
-          ]}
-        />
-        {downloading ? (
-          <div className="mt-2">
-            <div
-              role="progressbar"
-              aria-label={`${model.name} download progress`}
-              aria-valuemin={0}
-              aria-valuemax={100}
-              aria-valuenow={Math.round(progress)}
-              className="h-1 overflow-hidden rounded-full bg-muted"
+        <div className="flex max-w-full shrink-0 flex-wrap items-center gap-1.5">
+          {props.testControls}
+          {downloading ? (
+            <Button
+              size="icon-sm"
+              variant="outline"
+              aria-label={`Cancel ${model.name} download`}
+              disabled={!props.canCancel}
+              onClick={props.onCancel}
             >
-              <div
-                className="h-full bg-primary transition-[width] duration-200"
-                style={{ width: `${progress}%` }}
-              />
-            </div>
-            <p className="mt-1 text-2xs text-muted-foreground">
-              {model.state === "verifying"
-                ? "Verifying download…"
-                : `${Math.round(progress)}% downloaded`}
-            </p>
-          </div>
-        ) : null}
-      </div>
-      <div className="flex max-w-full flex-wrap items-center justify-end gap-1">
-        {props.testControls}
-        {downloading ? (
-          <Button
-            size="icon-sm"
-            variant="ghost"
-            aria-label={`Cancel ${model.name} download`}
-            disabled={!props.canCancel}
-            onClick={props.onCancel}
-          >
-            <XIcon className="size-3.5" />
-          </Button>
-        ) : model.state === "downloadable" ? (
-          <Button size="sm" variant="outline" disabled={props.busy} onClick={props.onDownload}>
-            <DownloadIcon className="mr-1.5 size-3.5" />
-            Download
-          </Button>
-        ) : model.active ? (
-          <Button size="sm" variant="secondary" disabled>
-            <CheckIcon className="mr-1.5 size-3.5" />
-            Selected
-          </Button>
-        ) : (
-          <Button size="sm" variant="outline" disabled={props.busy} onClick={props.onSelect}>
-            Use model
-          </Button>
-        )}
-        {model.state === "installed" ? (
-          <Button
-            size="icon-sm"
-            variant="ghost"
-            disabled={props.busy}
-            aria-label={`Delete ${model.name}`}
-            onClick={props.onDelete}
-          >
-            <Trash2Icon className="size-3.5" />
-          </Button>
-        ) : null}
+              <XIcon className="size-3.5" />
+            </Button>
+          ) : model.state === "downloadable" ? (
+            <Button size="sm" variant="outline" disabled={props.busy} onClick={props.onDownload}>
+              <DownloadIcon />
+              Download
+            </Button>
+          ) : model.active ? (
+            <Button size="sm" variant="secondary" disabled>
+              <CheckIcon />
+              Selected
+            </Button>
+          ) : (
+            <Button size="sm" variant="outline" disabled={props.busy} onClick={props.onSelect}>
+              Use model
+            </Button>
+          )}
+          {model.state === "installed" ? (
+            <Button
+              size="icon-sm"
+              variant="outline"
+              disabled={props.busy}
+              aria-label={`Delete ${model.name}`}
+              onClick={props.onDelete}
+            >
+              <Trash2Icon />
+            </Button>
+          ) : null}
+        </div>
       </div>
       {props.children}
     </div>
@@ -340,13 +350,13 @@ function DictionaryEditor(props: {
   };
   return (
     <>
-      <div className="flex items-start gap-1.5">
+      <div className="flex items-start gap-2">
         <Textarea
           value={termDraft}
           rows={1}
           maxLength={5_100}
           disabled={disabled}
-          placeholder="Add words or phrases, separated by commas or line breaks"
+          placeholder="Add words, separated by commas"
           aria-label={`Add a word or phrase to the ${label}`}
           onChange={(event) => setTermDraft(event.target.value)}
           onKeyDown={(event) => {
@@ -355,12 +365,13 @@ function DictionaryEditor(props: {
             addTerm();
           }}
         />
-        <Button type="button" disabled={!canAddTerm} onClick={addTerm}>
+        <Button type="button" variant="outline" disabled={!canAddTerm} onClick={addTerm}>
+          <PlusIcon />
           Add
         </Button>
       </div>
       {words.length > 0 ? (
-        <ul aria-label={`${label} entries`} className="mt-3 flex flex-wrap gap-1.5">
+        <ul aria-label={`${label} entries`} className="mt-2.5 flex flex-wrap gap-1.5">
           {words.map(({ term, aliases }) => (
             <li
               key={term}
@@ -432,16 +443,11 @@ function ProjectDictionaryRow() {
       title={isProjectScope ? "Project dictionary" : "Shared dictionary"}
       description={
         isProjectScope
-          ? `Saved with ${scope.scope.label} on its environment. Everyone who dictates in this project gets these spellings, along with their own dictionary. Project spellings win when the two overlap.`
-          : "Saved on the environment and used in every project there, along with each person’s own dictionary. Pick a project above to limit these words to one project."
-      }
-      control={
-        <span className="text-xs text-muted-foreground">
-          {words.length} {words.length === 1 ? "entry" : "entries"}
-        </span>
+          ? `Used by everyone who dictates in ${scope.scope.label}.`
+          : "Used by everyone who dictates on this environment."
       }
     >
-      <div className="mt-2 pb-3.5">
+      <div className="mt-3 pb-2">
         <DictionaryEditor
           label={isProjectScope ? "project dictionary" : "shared dictionary"}
           words={words}
@@ -794,10 +800,14 @@ function SpeechModelBrowser(props: {
   const accuracyLanguage = selectedLanguages[0] ?? "en";
   const sortLabels: Record<SpeechModelSort, string> = {
     recommended: "Recommended",
-    size: "Smallest download",
-    accuracy: `Best ${languageLabel(accuracyLanguage)} accuracy`,
-    speed: "Fastest transcription",
+    size: "Smallest",
+    accuracy: "Most accurate",
+    speed: "Fastest",
   };
+  const languagesLabel =
+    selectedLanguages.length === 0
+      ? "All languages"
+      : selectedLanguages.map(languageLabel).join(", ");
   const sortedModels = filterSpeechModels(models, {
     search,
     languages: selectedLanguages,
@@ -812,180 +822,174 @@ function SpeechModelBrowser(props: {
       ? [activeModel, ...sortedModels]
       : sortedModels;
 
+  if (!status) return null;
+  if (!status.supported)
+    return (
+      <SettingsRow
+        {...searchableSetting("speech-models")}
+        title="Models"
+        description={`This environment can’t transcribe audio: ${status.reason}.`}
+      />
+    );
   return (
-    <SettingsSearchTarget
+    <SettingsRow
       {...searchableSetting("speech-models")}
+      title="Models"
+      description={`Grades are error rates and speed is seconds per 30 s of audio, from Handy’s benchmark ${status.benchmarkTier === "cpu" ? "CPU" : "GPU"}.`}
       className="@container/voice-models"
     >
-      {status && !status.supported ? (
-        <p className="px-4 py-2 text-sm text-muted-foreground">
-          This environment can’t transcribe audio: {status.reason}.
-        </p>
-      ) : null}
-      {status?.supported ? (
-        <>
-          <p className="border-b border-border/60 px-3 py-2 text-xs text-muted-foreground sm:px-4">
-            Pick languages to see models that support all of them. Accuracy is word or character
-            error rate: lower is better. Speed is the time to transcribe 30 seconds of audio on
-            Handy’s benchmark {status.benchmarkTier === "cpu" ? "CPU" : "GPU"}.
-          </p>
-          <div className="@min-[32rem]/voice-models:grid @min-[32rem]/voice-models:grid-cols-[11rem_minmax(0,1fr)]">
-            <div className="flex min-h-0 flex-col border-b border-border/60 bg-muted/10 @min-[32rem]/voice-models:border-r @min-[32rem]/voice-models:border-b-0">
-              <div className="space-y-2 p-3">
-                <p className="text-sm font-medium">Languages</p>
-                <Input
-                  size="compact"
-                  aria-label="Search languages"
-                  placeholder="Search languages"
-                  value={languageSearch}
-                  onChange={(e) => setLanguageSearch(e.target.value)}
-                />
-              </div>
-              <div
-                role="group"
-                aria-label="Browse models by language"
-                className="flex gap-1 overflow-x-auto px-2 pb-2 @min-[32rem]/voice-models:h-72 @min-[32rem]/voice-models:flex-col @min-[32rem]/voice-models:overflow-y-auto"
-              >
-                <LanguageRow
-                  label="All languages"
-                  selected={selectedLanguages.length === 0}
-                  onClick={() => setSelection([])}
-                />
-                {visibleLanguages.map((code) => (
-                  <LanguageRow
-                    key={code}
-                    label={languageLabel(code)}
-                    selected={selectedLanguages.includes(code)}
-                    onClick={() =>
-                      setSelection(
-                        selectedLanguages.includes(code)
-                          ? selectedLanguages.filter((language) => language !== code)
-                          : [...selectedLanguages, code],
-                      )
-                    }
-                  />
-                ))}
-                {visibleLanguages.length === 0 && (
-                  <p className="px-2 py-1 text-xs text-muted-foreground">No languages match.</p>
-                )}
-              </div>
+      <div className="mt-3 flex min-w-0 gap-2">
+        <InputGroup className="min-w-0 flex-1 **:[input]:h-9 sm:**:[input]:h-8">
+          <InputGroupAddon>
+            <SearchIcon aria-hidden />
+          </InputGroupAddon>
+          <InputGroupInput
+            type="search"
+            aria-label="Search transcription models"
+            placeholder="Search models"
+            value={search}
+            onChange={(e) => setSearch(e.target.value)}
+          />
+        </InputGroup>
+        <Menu>
+          <MenuTrigger
+            render={<Button variant="outline" className="max-w-56" />}
+            aria-label={`Filter by language: ${languagesLabel}`}
+          >
+            <LanguagesIcon />
+            <span className="hidden truncate @min-[34rem]/voice-models:inline">
+              {languagesLabel}
+            </span>
+          </MenuTrigger>
+          <MenuPopup align="end">
+            <MenuSearchInput
+              autoFocus
+              aria-label="Search languages"
+              placeholder="Search languages"
+              value={languageSearch}
+              onChange={(e) => setLanguageSearch(e.target.value)}
+            />
+            <div
+              role="group"
+              aria-label="Browse models by language"
+              className="max-h-72 overflow-y-auto"
+            >
+              {needle ? null : (
+                <MenuCheckboxItem
+                  checked={selectedLanguages.length === 0}
+                  onCheckedChange={() => setSelection([])}
+                >
+                  All languages
+                </MenuCheckboxItem>
+              )}
+              {visibleLanguages.map((code) => (
+                <MenuCheckboxItem
+                  key={code}
+                  checked={selectedLanguages.includes(code)}
+                  onCheckedChange={() =>
+                    setSelection(
+                      selectedLanguages.includes(code)
+                        ? selectedLanguages.filter((language) => language !== code)
+                        : [...selectedLanguages, code],
+                    )
+                  }
+                >
+                  {languageLabel(code)}
+                </MenuCheckboxItem>
+              ))}
+              {visibleLanguages.length === 0 && (
+                <p className="px-2 py-1.5 text-sm text-muted-foreground">No languages match.</p>
+              )}
             </div>
-            <div className="flex min-w-0 flex-col">
-              <div className="space-y-2 p-3">
-                <p className="text-sm font-medium">
-                  {selectedLanguages.length
-                    ? "Models for " + selectedLanguages.map(languageLabel).join(", ")
-                    : "All models"}
-                </p>
-                <InputGroup>
-                  <InputGroupInput
-                    size="compact"
-                    aria-label="Search transcription models"
-                    placeholder="Search models"
-                    value={search}
-                    onChange={(e) => setSearch(e.target.value)}
-                  />
-                  <InputGroupAddon align="inline-end">
-                    <Menu>
-                      <MenuTrigger
-                        render={<Button size="compact" variant="ghost-muted" />}
-                        aria-label={`Sort and filter models: ${sortLabels[sort]}${downloadedOnly ? ", downloaded only" : ""}`}
-                      >
-                        <SlidersHorizontalIcon />
-                        <span className="hidden @min-[40rem]/voice-models:inline">
-                          {sortLabels[sort]}
-                        </span>
-                        {downloadedOnly && <span>1</span>}
-                      </MenuTrigger>
-                      <MenuPopup align="end">
-                        <MenuGroup>
-                          <MenuGroupLabel>Sort by</MenuGroupLabel>
-                          <MenuRadioGroup
-                            value={sort}
-                            onValueChange={(value) => setSort(value as SpeechModelSort)}
-                          >
-                            {(Object.keys(sortLabels) as SpeechModelSort[]).map((value) => (
-                              <MenuRadioItem key={value} value={value} closeOnClick>
-                                <span className="flex items-center justify-between gap-3">
-                                  {sortLabels[value]}
-                                  <MenuRadioItemIndicator />
-                                </span>
-                              </MenuRadioItem>
-                            ))}
-                          </MenuRadioGroup>
-                        </MenuGroup>
-                        <MenuSeparator />
-                        <MenuCheckboxItem
-                          checked={downloadedOnly}
-                          onCheckedChange={setDownloadedOnly}
-                        >
-                          Downloaded only
-                        </MenuCheckboxItem>
-                      </MenuPopup>
-                    </Menu>
-                  </InputGroupAddon>
-                </InputGroup>
-              </div>
-              <div
-                className="h-72 overflow-y-auto divide-y divide-border/60"
-                role="region"
-                aria-label="Transcription models"
-                tabIndex={0}
+          </MenuPopup>
+        </Menu>
+        <Menu>
+          <MenuTrigger
+            render={<Button variant="outline" />}
+            aria-label={`Sort and filter models: ${sortLabels[sort]}${downloadedOnly ? ", downloaded only" : ""}`}
+          >
+            <ArrowDownUpIcon />
+            <span className="hidden @min-[34rem]/voice-models:inline">{sortLabels[sort]}</span>
+          </MenuTrigger>
+          <MenuPopup align="end">
+            <MenuGroup>
+              <MenuGroupLabel>Sort by</MenuGroupLabel>
+              <MenuRadioGroup
+                value={sort}
+                onValueChange={(value) => setSort(value as SpeechModelSort)}
               >
-                {sortedModels.length === 0 && (
-                  <p className="px-4 py-2 text-sm text-muted-foreground">No models match.</p>
-                )}
-                {renderedModels.map((model) => {
-                  const card: ModelCardProps = {
-                    model:
-                      model.id === requestedDownload && model.state === "downloadable"
-                        ? { ...model, state: "downloading" }
-                        : model,
-                    busy: controlsDisabled,
-                    canCancel,
-                    comparisonLanguages: selectedLanguages,
-                    benchmarkTier: status.benchmarkTier,
-                    onDownload: () =>
-                      void run(
-                        "Could not download the model",
-                        () =>
-                          runEnvironmentSpeech(downloadEnvironmentSpeechModel(prepared, model.id)),
-                        model.id,
-                      ),
-                    onSelect: () =>
-                      void run("Could not select the model", () =>
-                        runEnvironmentSpeech(selectEnvironmentSpeechModel(prepared, model.id)),
-                      ),
-                    onCancel: () =>
-                      void run("Could not cancel the download", () =>
-                        runEnvironmentSpeech(
-                          cancelEnvironmentSpeechModelDownload(prepared, model.id),
-                        ),
-                      ),
-                    onDelete: () =>
-                      void run("Could not delete the model", () =>
-                        runEnvironmentSpeech(removeEnvironmentSpeechModel(prepared, model.id)),
-                      ),
-                  };
-                  return model.active ? (
-                    <TranscriptionTest
-                      key={model.id}
-                      card={card}
-                      hidden={!sortedModels.includes(model)}
-                      environmentId={props.testEnvironmentId}
-                      projectId={props.projectId}
-                      projectName={props.projectName}
-                    />
-                  ) : (
-                    <ModelCard key={model.id} {...card} />
-                  );
-                })}
-              </div>
-            </div>
-          </div>
-        </>
-      ) : null}
-    </SettingsSearchTarget>
+                {(Object.keys(sortLabels) as SpeechModelSort[]).map((value) => (
+                  <MenuRadioItem key={value} value={value} closeOnClick>
+                    <span className="flex items-center justify-between gap-3">
+                      {value === "accuracy"
+                        ? `Most accurate in ${languageLabel(accuracyLanguage)}`
+                        : sortLabels[value]}
+                      <MenuRadioItemIndicator />
+                    </span>
+                  </MenuRadioItem>
+                ))}
+              </MenuRadioGroup>
+            </MenuGroup>
+            <MenuSeparator />
+            <MenuCheckboxItem checked={downloadedOnly} onCheckedChange={setDownloadedOnly}>
+              Downloaded only
+            </MenuCheckboxItem>
+          </MenuPopup>
+        </Menu>
+      </div>
+      <div
+        className="mt-2 mb-2 max-h-96 divide-y divide-border/60 overflow-y-auto rounded-lg border border-border/60"
+        role="region"
+        aria-label="Transcription models"
+        tabIndex={0}
+      >
+        {sortedModels.length === 0 && (
+          <p className="px-3 py-3 text-sm text-muted-foreground">No models match.</p>
+        )}
+        {renderedModels.map((model) => {
+          const card: ModelCardProps = {
+            model:
+              model.id === requestedDownload && model.state === "downloadable"
+                ? { ...model, state: "downloading" }
+                : model,
+            busy: controlsDisabled,
+            canCancel,
+            comparisonLanguages: selectedLanguages,
+            benchmarkTier: status.benchmarkTier,
+            onDownload: () =>
+              void run(
+                "Could not download the model",
+                () => runEnvironmentSpeech(downloadEnvironmentSpeechModel(prepared, model.id)),
+                model.id,
+              ),
+            onSelect: () =>
+              void run("Could not select the model", () =>
+                runEnvironmentSpeech(selectEnvironmentSpeechModel(prepared, model.id)),
+              ),
+            onCancel: () =>
+              void run("Could not cancel the download", () =>
+                runEnvironmentSpeech(cancelEnvironmentSpeechModelDownload(prepared, model.id)),
+              ),
+            onDelete: () =>
+              void run("Could not delete the model", () =>
+                runEnvironmentSpeech(removeEnvironmentSpeechModel(prepared, model.id)),
+              ),
+          };
+          return model.active ? (
+            <TranscriptionTest
+              key={model.id}
+              card={card}
+              hidden={!sortedModels.includes(model)}
+              environmentId={props.testEnvironmentId}
+              projectId={props.projectId}
+              projectName={props.projectName}
+            />
+          ) : (
+            <ModelCard key={model.id} {...card} />
+          );
+        })}
+      </div>
+    </SettingsRow>
   );
 }
 
@@ -1057,40 +1061,41 @@ function TranscriptionTest(props: {
         }
       >
         {showTranscript ? (
-          <div className="w-full">
-            <div className="flex items-start gap-2">
-              <p className="min-w-0 flex-1 text-xs leading-relaxed text-muted-foreground">
-                Say a sentence in the language above. Cleanup is skipped, so you see exactly what
-                the model heard. The transcript stays on this page.
-              </p>
-              <Button
-                size="icon-sm"
-                variant="ghost"
-                aria-label="Close model test"
-                onClick={() => {
-                  speech.cancel();
-                  setShowTranscript(false);
-                }}
-              >
-                <XIcon />
-              </Button>
+          <div className="mt-3 flex items-start gap-3 rounded-lg border border-border/60 bg-muted/30 py-1 ps-3 pe-1">
+            <div className="min-w-0 flex-1 py-1.5">
+              {speech.preview || transcript !== null ? null : (
+                <p className="text-xs text-muted-foreground">
+                  Say a sentence. Cleanup is skipped, so you see exactly what the model heard.
+                </p>
+              )}
+              {speech.preview || transcript !== null ? (
+                <p
+                  role="status"
+                  aria-label="Test transcript"
+                  className="select-text whitespace-pre-wrap break-words text-sm leading-relaxed"
+                >
+                  {speech.preview ? (
+                    <>
+                      {speech.preview.committed}
+                      <span className="text-muted-foreground">{speech.preview.tentative}</span>
+                    </>
+                  ) : (
+                    transcript || "No speech recognized. Try again."
+                  )}
+                </p>
+              ) : null}
             </div>
-            {speech.preview || transcript !== null ? (
-              <p
-                role="status"
-                aria-label="Test transcript"
-                className="mt-2 select-text whitespace-pre-wrap break-words text-sm leading-relaxed"
-              >
-                {speech.preview ? (
-                  <>
-                    {speech.preview.committed}
-                    <span className="text-muted-foreground">{speech.preview.tentative}</span>
-                  </>
-                ) : (
-                  transcript || "No speech recognized. Try again."
-                )}
-              </p>
-            ) : null}
+            <Button
+              size="icon-sm"
+              variant="ghost-muted"
+              aria-label="Close model test"
+              onClick={() => {
+                speech.cancel();
+                setShowTranscript(false);
+              }}
+            >
+              <XIcon />
+            </Button>
           </div>
         ) : null}
       </ModelCard>
@@ -1216,52 +1221,55 @@ export function VoiceSettingsPanel() {
         <SettingsRow
           {...searchableSetting("voice-microphone")}
           title="Microphone"
-          description="System default follows your operating system. Record a ten-second test and play it back here. Test audio stays on this device and is never transcribed."
+          description="System default follows your operating system."
           control={
-            <div className="flex min-w-0 flex-wrap items-center justify-end gap-1.5">
-              <SettingsSearchTarget {...searchableSetting("microphone-test")}>
-                <MicrophoneTest key={selectedMicrophone} microphoneId={selectedMicrophone} />
-              </SettingsSearchTarget>
-              <div className="flex min-w-0 items-center gap-1.5">
-                <Select
-                  value={selectedMicrophone ? `device:${selectedMicrophone}` : SYSTEM_DEFAULT}
-                  onValueChange={(value) => {
-                    if (value)
-                      void updateClientSettings({
-                        voiceMicrophone:
-                          value === SYSTEM_DEFAULT ? "" : value.slice("device:".length),
-                      });
-                  }}
-                >
-                  <SelectTrigger size="sm" aria-label="Microphone" className="max-w-64">
-                    <SelectValue>{selectedMicrophoneLabel}</SelectValue>
-                  </SelectTrigger>
-                  <SelectPopup align="end" alignItemWithTrigger={false}>
-                    <SelectItem value={SYSTEM_DEFAULT}>System default</SelectItem>
-                    {microphones.map((device) => (
-                      <SelectItem key={device.deviceId} value={`device:${device.deviceId}`}>
-                        {device.label}
-                      </SelectItem>
-                    ))}
-                  </SelectPopup>
-                </Select>
-                <Button
-                  type="button"
-                  variant="ghost"
-                  size="icon-sm"
-                  aria-label="Refresh microphones"
-                  onClick={() => void refreshMicrophones()}
-                >
-                  <RefreshCwIcon className="size-3.5" />
-                </Button>
-              </div>
+            <div className="flex min-w-0 items-center gap-1.5">
+              <Select
+                value={selectedMicrophone ? `device:${selectedMicrophone}` : SYSTEM_DEFAULT}
+                onValueChange={(value) => {
+                  if (value)
+                    void updateClientSettings({
+                      voiceMicrophone:
+                        value === SYSTEM_DEFAULT ? "" : value.slice("device:".length),
+                    });
+                }}
+              >
+                <SelectTrigger size="sm" aria-label="Microphone" className="max-w-56">
+                  <SelectValue>{selectedMicrophoneLabel}</SelectValue>
+                </SelectTrigger>
+                <SelectPopup align="end" alignItemWithTrigger={false}>
+                  <SelectItem value={SYSTEM_DEFAULT}>System default</SelectItem>
+                  {microphones.map((device) => (
+                    <SelectItem key={device.deviceId} value={`device:${device.deviceId}`}>
+                      {device.label}
+                    </SelectItem>
+                  ))}
+                </SelectPopup>
+              </Select>
+              <Tooltip>
+                <TooltipTrigger
+                  render={
+                    <Button
+                      type="button"
+                      variant="outline"
+                      size="icon-sm"
+                      aria-label="Refresh microphones"
+                      onClick={() => void refreshMicrophones()}
+                    >
+                      <RefreshCwIcon />
+                    </Button>
+                  }
+                />
+                <TooltipPopup>Refresh microphones</TooltipPopup>
+              </Tooltip>
             </div>
           }
         />
+        <MicrophoneTest key={selectedMicrophone} microphoneId={selectedMicrophone} />
         <SettingsRow
           {...searchableSetting("dictation-shortcut-mode")}
           title="Dictation shortcut"
-          description="How the dictation shortcut starts and stops recording."
+          description={`${SHORTCUT_MODES[settings.voiceShortcutMode].hint}.`}
           control={
             <Select
               value={settings.voiceShortcutMode}
@@ -1270,13 +1278,18 @@ export function VoiceSettingsPanel() {
                   void updateClientSettings({ voiceShortcutMode: value as VoiceShortcutMode });
               }}
             >
-              <SelectTrigger size="sm" aria-label="Dictation shortcut mode" className="max-w-72">
-                <SelectValue>{SHORTCUT_MODE_LABELS[settings.voiceShortcutMode]}</SelectValue>
+              <SelectTrigger size="sm" aria-label="Dictation shortcut mode">
+                <SelectValue>{SHORTCUT_MODES[settings.voiceShortcutMode].label}</SelectValue>
               </SelectTrigger>
               <SelectPopup align="end" alignItemWithTrigger={false}>
-                {(Object.keys(SHORTCUT_MODE_LABELS) as VoiceShortcutMode[]).map((mode) => (
+                {(Object.keys(SHORTCUT_MODES) as VoiceShortcutMode[]).map((mode) => (
                   <SelectItem key={mode} value={mode}>
-                    {SHORTCUT_MODE_LABELS[mode]}
+                    <span className="flex flex-col">
+                      {SHORTCUT_MODES[mode].label}
+                      <span className="text-xs text-muted-foreground">
+                        {SHORTCUT_MODES[mode].hint}
+                      </span>
+                    </span>
                   </SelectItem>
                 ))}
               </SelectPopup>
@@ -1286,16 +1299,31 @@ export function VoiceSettingsPanel() {
       </SettingsSection>
 
       <SettingsSection id="voice-transcription" title="Transcription">
-        <SettingsSearchTarget
+        <SettingsRow
           {...searchableSetting("voice-transcription-destination")}
-          className="@container/destination px-3 py-3 sm:px-4"
-        >
-          <div className="flex items-center justify-between gap-2">
-            <h3 className="shrink-0 text-sm font-medium">
-              <span className="@max-[18rem]/destination:hidden">Transcribe with</span>
-              <span className="@min-[18rem]/destination:hidden">Use</span>
-            </h3>
-            <div className="flex min-w-0 items-center justify-end gap-1">
+          title="Transcribe with"
+          description="Where your speech is turned into text."
+          control={
+            <div className="flex min-w-0 items-center gap-1.5">
+              {destination.environmentId && chosenUnsupported ? (
+                <Tooltip>
+                  <TooltipTrigger
+                    render={
+                      <Button
+                        size="icon-sm"
+                        variant="ghost"
+                        aria-label={`${chosenEnvironment.label} can’t transcribe audio locally`}
+                      >
+                        <TriangleAlertIcon className="text-warning" />
+                      </Button>
+                    }
+                  />
+                  <TooltipPopup>
+                    {chosenEnvironment.label} can’t transcribe audio locally. Choose another
+                    destination.
+                  </TooltipPopup>
+                </Tooltip>
+              ) : null}
               <Select
                 value={destinationValue}
                 onValueChange={(value) => {
@@ -1422,15 +1450,8 @@ export function VoiceSettingsPanel() {
                   </Tooltip>
                 )}
             </div>
-          </div>
-          {destination.environmentId && chosenUnsupported ? (
-            <p className="mt-2 text-xs text-destructive">
-              {chosenEnvironment.label} can’t transcribe audio locally. Choose a different
-              destination.
-            </p>
-          ) : null}
-        </SettingsSearchTarget>
-
+          }
+        />
         {pendingCloud && cloudEnvironment && (
           <CloudVoiceConfiguration
             key={JSON.stringify(pendingCloud)}
@@ -1449,10 +1470,10 @@ export function VoiceSettingsPanel() {
             title="Language"
             description={
               destination.cloudProvider
-                ? "The cloud provider can detect your language automatically."
-                : model
-                  ? `${model.model} ${model.supportsLanguageDetection ? "detects the language automatically" : "uses one fixed language"}.`
-                  : "Choose an environment above to see the languages its transcription model supports."
+                ? "The provider detects your language automatically."
+                : model?.supportsLanguageDetection
+                  ? `${model.model} detects the language automatically.`
+                  : `${model?.model ?? "This model"} uses one fixed language.`
             }
             control={
               <SpeechLanguageSelect
@@ -1476,28 +1497,13 @@ export function VoiceSettingsPanel() {
             }
           />
         ) : null}
-        {prepared ? (
-          <SpeechModelBrowser
-            key={prepared.environmentId}
-            prepared={prepared}
-            catalog={catalog}
-            testEnvironmentId={
-              project?.environmentId ?? target?.environmentId ?? prepared.environmentId
-            }
-            projectId={project?.id ?? null}
-            projectName={project?.title ?? null}
-          />
-        ) : null}
-        {prepared && <AdvancedSpeechSettings prepared={prepared} catalog={catalog} />}
-      </SettingsSection>
-      <SettingsSection id="voice-recognition" title="Transcription options">
         <SettingsRow
           {...searchableSetting("speech-silence-filtering")}
           title="Silence filtering"
           description={
             destination.cloudProvider === "openai"
-              ? "OpenAI handles silence automatically."
-              : "Skip silence and other non-speech audio before transcription, keeping a short buffer so words aren’t cut off."
+              ? "OpenAI handles silence itself."
+              : "Skip silence and background noise before transcribing."
           }
           control={
             <Switch
@@ -1513,7 +1519,7 @@ export function VoiceSettingsPanel() {
         <SettingsRow
           {...searchableSetting("remove-filler-words")}
           title="Remove filler words"
-          description="Remove filler words like “um” and “uh” from transcripts."
+          description="Drop “um” and “uh” from transcripts."
           control={
             <Switch
               aria-label="Remove filler words"
@@ -1524,18 +1530,28 @@ export function VoiceSettingsPanel() {
             />
           }
         />
+        {prepared ? (
+          <SpeechModelBrowser
+            key={prepared.environmentId}
+            prepared={prepared}
+            catalog={catalog}
+            testEnvironmentId={
+              project?.environmentId ?? target?.environmentId ?? prepared.environmentId
+            }
+            projectId={project?.id ?? null}
+            projectName={project?.title ?? null}
+          />
+        ) : null}
+        {prepared && <AdvancedSpeechSettings prepared={prepared} catalog={catalog} />}
+      </SettingsSection>
+
+      <SettingsSection id="voice-dictionary" title="Dictionary">
         <SettingsRow
           {...searchableSetting("speech-dictionary")}
-          title="Dictionary"
-          description="Names and terms transcription should spell your way, saved on this device. Add an alias when it keeps hearing a term wrong. The name of the project you dictate in is also sent as a hint."
-          control={
-            <span className="text-xs text-muted-foreground">
-              {settings.speechCustomWords.length}{" "}
-              {settings.speechCustomWords.length === 1 ? "entry" : "entries"}
-            </span>
-          }
+          title="Your dictionary"
+          description="Names and terms to spell your way, saved on this device."
         >
-          <div className="mt-2 pb-3.5">
+          <div className="mt-3 pb-2">
             <DictionaryEditor
               label="dictionary"
               words={settings.speechCustomWords}
@@ -1549,7 +1565,7 @@ export function VoiceSettingsPanel() {
       <SettingsSection id={searchableSetting("speech-post-processing").id} title="Cleanup">
         <SettingsRow
           title="Clean up transcripts"
-          description="Fixes punctuation, numbers, and spoken corrections with the cleanup model on the draft’s environment. Sends the transcript and nearby draft text, never audio."
+          description="Off by default. Sends transcript text, never audio, to the cleanup model to fix punctuation and corrections."
           control={
             <Switch
               aria-label="Clean up transcripts"
@@ -1560,8 +1576,12 @@ export function VoiceSettingsPanel() {
         />
         {cleanupEnabled ? (
           <SettingsRow
-            title="Cleanup instructions"
-            description="Use the built-in instructions or write your own."
+            title="Instructions"
+            description={
+              settings.speechPostProcessingPrompt.mode === "custom"
+                ? "Your own instructions for cleanup."
+                : "Fix punctuation, numbers, lists, and spoken corrections."
+            }
             control={
               <Select
                 value={settings.speechPostProcessingPrompt.mode}
@@ -1569,13 +1589,17 @@ export function VoiceSettingsPanel() {
                   if (value === "default" || value === "custom")
                     void updateClientSettings({
                       speechPostProcessingPrompt: {
-                        ...settings.speechPostProcessingPrompt,
                         mode: value,
+                        customInstructions:
+                          value === "custom" &&
+                          !settings.speechPostProcessingPrompt.customInstructions.trim()
+                            ? DEFAULT_SPEECH_POST_PROCESSING_PROMPT
+                            : settings.speechPostProcessingPrompt.customInstructions,
                       },
                     });
                 }}
               >
-                <SelectTrigger size="sm" aria-label="Cleanup instructions" className="max-w-64">
+                <SelectTrigger size="sm" aria-label="Cleanup instructions">
                   <SelectValue>
                     {settings.speechPostProcessingPrompt.mode === "custom" ? "Custom" : "Built-in"}
                   </SelectValue>
@@ -1587,25 +1611,23 @@ export function VoiceSettingsPanel() {
               </Select>
             }
           >
-            <Textarea
-              aria-label="Custom cleanup instructions"
-              className="mt-2"
-              maxLength={10_000}
-              disabled={settings.speechPostProcessingPrompt.mode !== "custom"}
-              value={
-                settings.speechPostProcessingPrompt.mode === "custom"
-                  ? settings.speechPostProcessingPrompt.customInstructions
-                  : DEFAULT_SPEECH_POST_PROCESSING_PROMPT
-              }
-              onChange={(event) =>
-                void updateClientSettings({
-                  speechPostProcessingPrompt: {
-                    mode: "custom",
-                    customInstructions: event.target.value,
-                  },
-                })
-              }
-            />
+            {settings.speechPostProcessingPrompt.mode === "custom" ? (
+              <div className="mt-3 pb-2">
+                <Textarea
+                  aria-label="Custom cleanup instructions"
+                  maxLength={10_000}
+                  value={settings.speechPostProcessingPrompt.customInstructions}
+                  onChange={(event) =>
+                    void updateClientSettings({
+                      speechPostProcessingPrompt: {
+                        mode: "custom",
+                        customInstructions: event.target.value,
+                      },
+                    })
+                  }
+                />
+              </div>
+            ) : null}
           </SettingsRow>
         ) : null}
         {cleanupEnabled && settingsScope !== null ? <CleanupModelRow /> : null}
@@ -1613,7 +1635,7 @@ export function VoiceSettingsPanel() {
           <SettingsRow
             {...searchableSetting("speech-correction-word")}
             title="Correction cue"
-            description="The word or phrase you say to flag a correction, like “sorry” or “scratch that”. Cleanup applies the correction only where one is meant, and hears the cue as a hint."
+            description="The phrase you say to fix a mistake, like “scratch that”."
             control={
               <Input
                 key={settings.speechCorrectionWord}

From d0bd9685bad623f32e9252a2a16bb747bacb44cd Mon Sep 17 00:00:00 2001
From: maria-rcks <maria@kuuro.net>
Date: Sun, 8 Nov 2026 23:51:20 +0000
Subject: [PATCH 2/9] fix(web): dictation reads as one capsule across the app

Recording, transcribing, cleanup and errors now share one rounded capsule
that sits beside the send button and next to the action buttons in every
text field. Errors are an icon, a short label and one action. The first-run
setup dialog drops the step bar and the long paragraphs.
---
 .../chat/AssistantCitationCommentEditor.tsx   |  10 +-
 apps/web/src/components/chat/ChatComposer.tsx |   2 -
 .../components/chat/ComposerSpeechButton.tsx  | 289 ++++++------------
 .../components/chat/VoiceInputErrorPill.tsx   | 103 +++----
 .../src/components/chat/VoiceInputPill.tsx    |  34 ++-
 .../src/components/chat/VoiceInputSetup.tsx   | 259 ++++++++--------
 .../pullRequest/PullRequestCommentForm.tsx    |   4 +-
 .../pullRequest/PullRequestReviewForm.tsx     |   4 +-
 apps/web/src/speech/useTextFieldSpeech.tsx    |  44 +--
 9 files changed, 332 insertions(+), 417 deletions(-)

diff --git a/apps/web/src/components/chat/AssistantCitationCommentEditor.tsx b/apps/web/src/components/chat/AssistantCitationCommentEditor.tsx
index f97c66c7f07e..cdd8e1249cfc 100644
--- a/apps/web/src/components/chat/AssistantCitationCommentEditor.tsx
+++ b/apps/web/src/components/chat/AssistantCitationCommentEditor.tsx
@@ -113,15 +113,7 @@ export function AssistantCitationCommentEditor({
         </p>
       ) : null}
       <div className="mt-2 flex flex-wrap items-center justify-end gap-2">
-        <div
-          className={
-            speech.state.phase === "idle"
-              ? "contents"
-              : "flex basis-full flex-wrap gap-2 *:min-w-0 *:grow **:data-[slot=voice-input-pill]:w-full"
-          }
-        >
-          <TextFieldSpeechControls speech={speech} />
-        </div>
+        <TextFieldSpeechControls speech={speech} />
         <Button
           variant="outline"
           size="xs"
diff --git a/apps/web/src/components/chat/ChatComposer.tsx b/apps/web/src/components/chat/ChatComposer.tsx
index 65eb3896f48c..9fa213402b46 100644
--- a/apps/web/src/components/chat/ChatComposer.tsx
+++ b/apps/web/src/components/chat/ChatComposer.tsx
@@ -3629,11 +3629,9 @@ export const ChatComposer = memo(function ChatComposer(props: ChatComposerProps)
                         />
                         <ComposerSpeechButton
                           state={speechInput.state}
-                          progress={null}
                           shortcutLabel={dictationShortcutLabel}
                           disabled={dictationDisabled}
                           onStart={() => void speechInput.start()}
-                          onCancel={() => speechInput.cancel()}
                         />
                       </>
                     ) : null}
diff --git a/apps/web/src/components/chat/ComposerSpeechButton.tsx b/apps/web/src/components/chat/ComposerSpeechButton.tsx
index 8a258f47e329..2d9525a8ca8e 100644
--- a/apps/web/src/components/chat/ComposerSpeechButton.tsx
+++ b/apps/web/src/components/chat/ComposerSpeechButton.tsx
@@ -1,6 +1,6 @@
 import type { VoiceInputState } from "@t3tools/client-runtime/voice-input";
 import { CheckIcon, MicIcon, XIcon } from "lucide-react";
-import { useEffect, useState } from "react";
+import { useEffect, useState, type PointerEvent, type ReactElement } from "react";
 
 import { VoiceInputErrorPill } from "./VoiceInputErrorPill";
 import { VoiceInputPill, VoiceWaveform } from "./VoiceInputPill";
@@ -9,69 +9,33 @@ import { Button } from "../ui/button";
 import { Spinner } from "../ui/spinner";
 import { Tooltip, TooltipPopup, TooltipTrigger } from "../ui/tooltip";
 
-type SpeechPresentation = {
-  status: string | null;
-  showsCancel: boolean;
-  showsConfirm: boolean;
-  confirmEnabled: boolean;
-  showsSend: boolean;
-};
+type DownloadProgress = { downloaded: number; total: number } | null;
 
+const keepFocus = (event: PointerEvent) => event.preventDefault();
+
+/** One short status line per phase; also mirrored into the preview annotation editor. */
 export function resolveSpeechPresentation(
   state: VoiceInputState,
-  progress: { downloaded: number; total: number } | null,
-): SpeechPresentation {
+  progress: DownloadProgress,
+): { status: string | null; active: boolean } {
   switch (state.phase) {
     case "idle":
-      return {
-        status: null,
-        showsCancel: false,
-        showsConfirm: false,
-        confirmEnabled: false,
-        showsSend: true,
-      };
+      return { status: null, active: false };
     case "error":
-      return {
-        status: state.error ?? "Voice input failed",
-        showsCancel: false,
-        showsConfirm: false,
-        confirmEnabled: false,
-        showsSend: true,
-      };
+      return { status: state.error ?? "Voice input failed", active: false };
     case "preparing":
       return {
         status: progress
-          ? `Downloading speech model ${Math.round((progress.downloaded / Math.max(1, progress.total)) * 100)}%`
-          : "Preparing",
-        showsCancel: true,
-        showsConfirm: true,
-        confirmEnabled: false,
-        showsSend: true,
+          ? `Downloading model ${Math.round((progress.downloaded / Math.max(1, progress.total)) * 100)}%`
+          : "Starting…",
+        active: true,
       };
     case "recording":
-      return {
-        status: "Recording",
-        showsCancel: true,
-        showsConfirm: true,
-        confirmEnabled: true,
-        showsSend: true,
-      };
+      return { status: "Recording", active: true };
     case "transcribing":
-      return {
-        status: "Transcribing",
-        showsCancel: true,
-        showsConfirm: true,
-        confirmEnabled: false,
-        showsSend: true,
-      };
+      return { status: "Transcribing…", active: true };
     case "post-processing":
-      return {
-        status: "Post-processing",
-        showsCancel: true,
-        showsConfirm: true,
-        confirmEnabled: false,
-        showsSend: true,
-      };
+      return { status: "Cleaning up…", active: true };
   }
 }
 
@@ -94,81 +58,29 @@ function RecordingStatus(props: { level: number; recordingLimitSeconds?: number
 
   return (
     <>
-      <VoiceWaveform level={props.level} />
-      <span aria-hidden className="size-1.5 shrink-0 rounded-full bg-primary" />
-      <span className="shrink-0 text-secondary-label text-xs tabular-nums">
+      <span aria-hidden className="size-2 shrink-0 rounded-full bg-destructive" />
+      <span className="shrink-0 text-xs text-muted-foreground tabular-nums">
         {formatElapsed(elapsedSeconds)}
         {props.recordingLimitSeconds !== undefined
           ? ` / ${formatElapsed(props.recordingLimitSeconds)}`
           : ""}
       </span>
+      <VoiceWaveform level={props.level} />
     </>
   );
 }
 
-function ComposerSpeechStatus(props: {
-  state: VoiceInputState;
-  progress: { downloaded: number; total: number } | null;
-  level: number;
-  recordingLimitSeconds?: number | undefined;
-}) {
-  const presentation = resolveSpeechPresentation(props.state, props.progress);
-
-  if (!presentation.status) return null;
-  const isRecording = props.state.phase === "recording";
-  const isError = props.state.phase === "error";
-
-  return (
-    <div
-      className="flex h-7 min-w-0 flex-1 items-center gap-2"
-      role="status"
-      aria-live={isRecording ? "off" : "polite"}
-      aria-label={presentation.status}
-    >
-      {isRecording ? (
-        <RecordingStatus level={props.level} recordingLimitSeconds={props.recordingLimitSeconds} />
-      ) : (
-        <span
-          className={cn(
-            "min-w-0 flex-1 truncate text-right text-sm text-secondary-label",
-            isError && "text-destructive",
-          )}
-        >
-          {presentation.status}
-        </span>
-      )}
-    </div>
-  );
-}
-
-function ComposerSpeechCancelButton(props: {
-  state: VoiceInputState;
-  shortcutLabel?: string | null;
-  onCancel(): void;
+function ShortcutTooltip(props: {
+  label: string;
+  shortcut?: string | null | undefined;
+  children: ReactElement;
 }) {
-  if (props.state.phase === "idle") return null;
-  const label = props.state.phase === "error" ? "Dismiss voice input error" : "Cancel voice input";
-
   return (
     <Tooltip>
-      <TooltipTrigger
-        render={
-          <Button
-            type="button"
-            size="icon-sm-pill"
-            variant="ghost"
-            aria-label={label}
-            onPointerDown={(event) => event.preventDefault()}
-            onClick={props.onCancel}
-            className="shrink-0"
-          >
-            <XIcon />
-          </Button>
-        }
-      />
+      <TooltipTrigger render={props.children} />
       <TooltipPopup side="top">
-        {label}
-        {props.shortcutLabel ? ` (${props.shortcutLabel})` : ""}
+        {props.label}
+        {props.shortcut ? ` (${props.shortcut})` : ""}
       </TooltipPopup>
     </Tooltip>
   );
@@ -176,49 +88,38 @@ function ComposerSpeechCancelButton(props: {
 
 export function ComposerSpeechButton(props: {
   state: VoiceInputState;
-  progress: { downloaded: number; total: number } | null;
   shortcutLabel?: string | null;
   disabled?: boolean;
+  /** Compact matches the `xs` buttons beside text-field editors. */
+  size?: "default" | "compact";
   onStart(): void;
-  onCancel(): void;
 }) {
-  const presentation = resolveSpeechPresentation(props.state, props.progress);
+  if (props.state.phase !== "idle") return null;
   const label = "Start voice input";
 
-  if (presentation.showsConfirm || props.state.phase === "error") return null;
-
   return (
-    <Tooltip>
-      <TooltipTrigger
-        render={
-          <Button
-            type="button"
-            size="icon-sm"
-            variant="ghost"
-            aria-label={label}
-            disabled={props.disabled}
-            onPointerDown={(event) => event.preventDefault()}
-            onClick={() => {
-              if (props.disabled) return;
-              props.onStart();
-            }}
-            className="relative shrink-0"
-          >
-            <MicIcon />
-          </Button>
-        }
-      />
-      <TooltipPopup side="top">
-        {label}
-        {props.shortcutLabel ? ` (${props.shortcutLabel})` : ""}
-      </TooltipPopup>
-    </Tooltip>
+    <ShortcutTooltip label={label} shortcut={props.shortcutLabel}>
+      <Button
+        type="button"
+        size={props.size === "compact" ? "icon-xs" : "icon-sm"}
+        variant="ghost"
+        aria-label={label}
+        disabled={props.disabled}
+        onPointerDown={keepFocus}
+        onClick={() => {
+          if (!props.disabled) props.onStart();
+        }}
+        className="shrink-0"
+      >
+        <MicIcon />
+      </Button>
+    </ShortcutTooltip>
   );
 }
 
 export function ComposerSpeechRecordingPill(props: {
   state: VoiceInputState;
-  progress: { downloaded: number; total: number } | null;
+  progress: DownloadProgress;
   finishShortcutLabel?: string | null;
   cancelShortcutLabel?: string | null;
   level: number;
@@ -229,8 +130,8 @@ export function ComposerSpeechRecordingPill(props: {
   onCancel(): void;
   onSkipPostProcessing(): void;
 }) {
-  const presentation = resolveSpeechPresentation(props.state, props.progress);
-  if (props.state.phase === "error") {
+  const { phase } = props.state;
+  if (phase === "error") {
     return (
       <VoiceInputErrorPill
         error={props.state.error}
@@ -242,61 +143,71 @@ export function ComposerSpeechRecordingPill(props: {
       />
     );
   }
-  if (!presentation.showsConfirm) return null;
-
-  const label = presentation.confirmEnabled
-    ? "Finish voice input"
-    : (presentation.status ?? "Voice input is busy");
+  const presentation = resolveSpeechPresentation(props.state, props.progress);
+  if (!presentation.active) return null;
+  const recording = phase === "recording";
+  const trailing = recording || phase === "post-processing";
 
   return (
     <VoiceInputPill>
-      <ComposerSpeechCancelButton
-        state={props.state}
-        shortcutLabel={props.cancelShortcutLabel ?? null}
-        onCancel={props.onCancel}
-      />
-      <ComposerSpeechStatus
-        state={props.state}
-        progress={props.progress}
-        level={props.level}
-        recordingLimitSeconds={props.recordingLimitSeconds}
-      />
-      {props.state.phase === "post-processing" ? (
+      <ShortcutTooltip label="Cancel voice input" shortcut={props.cancelShortcutLabel}>
+        <Button
+          type="button"
+          size="icon-sm-pill"
+          variant="ghost"
+          aria-label="Cancel voice input"
+          onPointerDown={keepFocus}
+          onClick={props.onCancel}
+          className="shrink-0"
+        >
+          <XIcon />
+        </Button>
+      </ShortcutTooltip>
+      <div
+        className={cn("flex min-w-0 flex-1 items-center gap-2", !trailing && "pe-3")}
+        role="status"
+        aria-live={recording ? "off" : "polite"}
+        aria-label={presentation.status ?? undefined}
+      >
+        {recording ? (
+          <RecordingStatus
+            level={props.level}
+            recordingLimitSeconds={props.recordingLimitSeconds}
+          />
+        ) : (
+          <>
+            <Spinner aria-hidden size="sm" tone="muted" className="shrink-0" />
+            <span className="min-w-0 truncate text-sm text-muted-foreground">
+              {presentation.status}
+            </span>
+          </>
+        )}
+      </div>
+      {phase === "post-processing" ? (
         <Button
           type="button"
           size="sm-pill"
           variant="ghost"
-          onPointerDown={(event) => event.preventDefault()}
+          onPointerDown={keepFocus}
           onClick={props.onSkipPostProcessing}
           className="shrink-0"
         >
           Skip
         </Button>
-      ) : (
-        <Tooltip>
-          <TooltipTrigger
-            render={
-              <Button
-                type="button"
-                size="icon-sm-pill"
-                aria-label={label}
-                disabled={!presentation.confirmEnabled}
-                onPointerDown={(event) => event.preventDefault()}
-                onClick={props.onStop}
-                className="shrink-0"
-              >
-                {presentation.confirmEnabled ? <CheckIcon /> : <Spinner aria-hidden />}
-              </Button>
-            }
-          />
-          <TooltipPopup side="top">
-            {label}
-            {presentation.confirmEnabled && props.finishShortcutLabel
-              ? ` (${props.finishShortcutLabel})`
-              : ""}
-          </TooltipPopup>
-        </Tooltip>
-      )}
+      ) : recording ? (
+        <ShortcutTooltip label="Finish voice input" shortcut={props.finishShortcutLabel}>
+          <Button
+            type="button"
+            size="icon-sm-pill"
+            aria-label="Finish voice input"
+            onPointerDown={keepFocus}
+            onClick={props.onStop}
+            className="shrink-0"
+          >
+            <CheckIcon />
+          </Button>
+        </ShortcutTooltip>
+      ) : null}
     </VoiceInputPill>
   );
 }
diff --git a/apps/web/src/components/chat/VoiceInputErrorPill.tsx b/apps/web/src/components/chat/VoiceInputErrorPill.tsx
index 26f4895e1b3f..15b8dfc64a75 100644
--- a/apps/web/src/components/chat/VoiceInputErrorPill.tsx
+++ b/apps/web/src/components/chat/VoiceInputErrorPill.tsx
@@ -1,34 +1,35 @@
 import { MICROPHONE_PERMISSION_ERROR } from "@t3tools/client-runtime/voice-input";
 import { useNavigate } from "@tanstack/react-router";
-import { RotateCcwIcon, SettingsIcon, XIcon } from "lucide-react";
+import { CircleAlertIcon, XIcon } from "lucide-react";
 
 import { Button } from "../ui/button";
 import { Tooltip, TooltipPopup, TooltipTrigger } from "../ui/tooltip";
 import { VoiceInputPill } from "./VoiceInputPill";
 
 const VOICE_ERROR_LABELS: Record<string, string> = {
-  [MICROPHONE_PERMISSION_ERROR]: "Microphone access needed",
-  "Microphone access is required for voice input.": "Microphone access needed",
+  [MICROPHONE_PERMISSION_ERROR]: "Mic blocked",
+  "Microphone access is required for voice input.": "Mic blocked",
   "This draft is no longer available.": "Draft unavailable",
-  "Another voice recording is already active.": "Another recording active",
+  "Another voice recording is already active.": "Already recording",
   "Voice transcription is not available.": "Voice input unavailable",
-  "Voice transcription is still finishing. Try again shortly.": "Transcription still busy",
+  "Voice transcription is still finishing. Try again shortly.": "Still transcribing",
   "Voice transcription is not available for this language.": "Language unsupported",
-  "Could not prepare voice transcription.": "Couldn’t prepare dictation",
-  "Could not start voice recording.": "Couldn’t start recording",
+  "Could not prepare voice transcription.": "Couldn’t start",
+  "Could not start voice recording.": "Couldn’t start",
   "Voice recording was interrupted.": "Recording interrupted",
-  "Could not finish voice recording.": "Couldn’t finish recording",
+  "Could not finish voice recording.": "Couldn’t finish",
   "Could not transcribe this recording.": "Transcription failed",
   "Voice transcription on this environment failed.": "Transcription failed",
   "The draft changed while voice input was running. The transcript was not added.": "Draft changed",
-  "No speech was detected.": "No speech detected",
-  "Microphone processing failed.": "Microphone processing failed",
-  "The microphone disconnected.": "Microphone disconnected",
+  "No speech was detected.": "No speech heard",
+  "Microphone processing failed.": "Mic failed",
+  "The microphone disconnected.": "Mic disconnected",
 };
 
-function voiceErrorLabel(error: string | null): string {
-  return (error && VOICE_ERROR_LABELS[error]) || "Voice input failed";
-}
+const RETRYABLE_TRANSCRIPTIONS = new Set([
+  "Could not transcribe this recording.",
+  "Voice transcription on this environment failed.",
+]);
 
 export function VoiceInputErrorPill(props: {
   error: string | null;
@@ -39,15 +40,15 @@ export function VoiceInputErrorPill(props: {
   onDismiss(): void;
 }) {
   const navigate = useNavigate();
+  const message = props.error ?? "Voice input failed";
   const openSettings = props.errorAction === "settings";
-  const actionLabel = openSettings
-    ? "Open voice settings"
-    : props.error === "Could not transcribe this recording." ||
-        props.error === "Voice transcription on this environment failed."
-      ? "Retry transcription"
-      : "Record again";
+  const action = openSettings
+    ? { label: "Open voice settings", text: "Settings" }
+    : props.error && RETRYABLE_TRANSCRIPTIONS.has(props.error)
+      ? { label: "Retry transcription", text: "Retry" }
+      : { label: "Record again", text: "Record again" };
   return (
-    <VoiceInputPill>
+    <VoiceInputPill tone="error">
       <Tooltip>
         <TooltipTrigger
           render={
@@ -58,13 +59,14 @@ export function VoiceInputErrorPill(props: {
               aria-label="Dismiss voice input error"
               onPointerDown={(event) => event.preventDefault()}
               onClick={props.onDismiss}
+              className="shrink-0"
             >
               <XIcon />
             </Button>
           }
         />
         <TooltipPopup side="top">
-          Dismiss voice input error
+          Dismiss
           {props.cancelShortcutLabel ? ` (${props.cancelShortcutLabel})` : ""}
         </TooltipPopup>
       </Tooltip>
@@ -74,42 +76,41 @@ export function VoiceInputErrorPill(props: {
             <span
               tabIndex={0}
               role="status"
-              aria-label={props.error ?? "Voice input failed"}
-              className="min-w-0 flex-1 truncate text-sm text-destructive"
+              aria-label={message}
+              className="flex min-w-0 items-center gap-1.5 text-sm font-medium outline-none focus-visible:underline"
             />
           }
         >
-          {voiceErrorLabel(props.error)}
+          <CircleAlertIcon aria-hidden className="size-3.5 shrink-0" />
+          <span className="truncate">
+            {(props.error && VOICE_ERROR_LABELS[props.error]) || "Voice input failed"}
+          </span>
         </TooltipTrigger>
-        <TooltipPopup side="top">{props.error ?? "Voice input failed"}</TooltipPopup>
+        <TooltipPopup side="top">{message}</TooltipPopup>
       </Tooltip>
       {props.errorAction ? (
-        <Tooltip>
-          <TooltipTrigger
-            render={
-              <Button
-                type="button"
-                size="icon-sm-pill"
-                variant="ghost"
-                aria-label={actionLabel}
-                disabled={props.disabled}
-                onPointerDown={(event) => event.preventDefault()}
-                onClick={() => {
-                  if (openSettings) {
-                    props.onDismiss();
-                    void navigate({ to: "/settings/voice" });
-                  } else {
-                    props.onRetry();
-                  }
-                }}
-              >
-                {openSettings ? <SettingsIcon /> : <RotateCcwIcon />}
-              </Button>
+        <Button
+          type="button"
+          size="sm-pill"
+          variant="ghost"
+          aria-label={action.label}
+          disabled={props.disabled}
+          onPointerDown={(event) => event.preventDefault()}
+          onClick={() => {
+            if (openSettings) {
+              props.onDismiss();
+              void navigate({ to: "/settings/voice" });
+            } else {
+              props.onRetry();
             }
-          />
-          <TooltipPopup side="top">{actionLabel}</TooltipPopup>
-        </Tooltip>
-      ) : null}
+          }}
+          className="ms-auto shrink-0"
+        >
+          {action.text}
+        </Button>
+      ) : (
+        <span aria-hidden className="w-1.5 shrink-0" />
+      )}
     </VoiceInputPill>
   );
 }
diff --git a/apps/web/src/components/chat/VoiceInputPill.tsx b/apps/web/src/components/chat/VoiceInputPill.tsx
index b95a49c13e26..e104f38bae28 100644
--- a/apps/web/src/components/chat/VoiceInputPill.tsx
+++ b/apps/web/src/components/chat/VoiceInputPill.tsx
@@ -1,8 +1,10 @@
 import { memo, useEffect, useRef, type ReactNode } from "react";
 import { useMediaQuery } from "~/hooks/useMediaQuery";
+import { cn } from "~/lib/utils";
 
-const WAVEFORM_BAR_COUNT = 28;
+const WAVEFORM_BAR_COUNT = 24;
 const WAVEFORM_BAR_IDS = Array.from({ length: WAVEFORM_BAR_COUNT }, (_, index) => String(index));
+const WAVEFORM_REST_SCALE = 0.2;
 
 export const VoiceWaveform = memo(function VoiceWaveform(props: { level: number }) {
   const prefersReducedMotion = useMediaQuery("(prefers-reduced-motion: reduce)");
@@ -17,15 +19,15 @@ export const VoiceWaveform = memo(function VoiceWaveform(props: { level: number
     barsRef.current.forEach((bar, index) => {
       if (!bar) return;
       const level = levels[index] ?? 0;
-      bar.style.opacity = String(0.22 + level * 0.78);
-      bar.style.transform = `scaleY(${prefersReducedMotion ? 0.35 : Math.max(0.08, level)})`;
+      bar.style.opacity = String(0.3 + level * 0.55);
+      bar.style.transform = `scaleY(${prefersReducedMotion ? 0.4 : Math.max(WAVEFORM_REST_SCALE, level)})`;
     });
   }, [prefersReducedMotion, props.level]);
 
   return (
     <div
       aria-hidden
-      className="flex h-5 min-w-0 flex-1 items-center justify-between gap-px overflow-hidden"
+      className="flex h-4 min-w-0 flex-1 items-center justify-end gap-0.5 overflow-hidden"
     >
       {WAVEFORM_BAR_IDS.map((id, index) => (
         <span
@@ -33,20 +35,34 @@ export const VoiceWaveform = memo(function VoiceWaveform(props: { level: number
           ref={(bar) => {
             barsRef.current[index] = bar;
           }}
-          className="h-full w-0.5 shrink-0 origin-center rounded-full bg-primary opacity-25 transition-[transform,opacity] duration-100 ease-out motion-reduce:transition-none"
-          style={{ transform: `scaleY(${prefersReducedMotion ? 0.35 : 0.08})` }}
+          className="h-full w-0.5 shrink-0 origin-center rounded-full bg-foreground opacity-35 transition-[transform,opacity] duration-100 ease-out motion-reduce:transition-none"
+          style={{ transform: `scaleY(${prefersReducedMotion ? 0.4 : WAVEFORM_REST_SCALE})` }}
         />
       ))}
     </div>
   );
 });
 
-export function VoiceInputPill({ children }: { children: ReactNode }) {
+/**
+ * The capsule every dictation state renders in. It matches the composer's pill buttons
+ * (h-8, h-7 from sm), so starting a recording never resizes the toolbar it sits in.
+ */
+export function VoiceInputPill({
+  children,
+  tone = "default",
+}: {
+  children: ReactNode;
+  tone?: "default" | "error";
+}) {
   return (
-    // Same height as the toolbar's icon buttons, so starting a recording never resizes the composer.
     <div
       data-slot="voice-input-pill"
-      className="flex h-8 w-48 min-w-0 shrink-0 items-center gap-2 sm:h-7 sm:w-64"
+      className={cn(
+        "flex h-8 items-center gap-1.5 rounded-full ring-1 ring-inset sm:h-7",
+        tone === "error"
+          ? "max-w-fit min-w-0 grow-2 basis-0 bg-destructive/6 text-destructive ring-destructive/24"
+          : "max-w-60 min-w-32 flex-1 bg-muted/48 ring-border",
+      )}
     >
       {children}
     </div>
diff --git a/apps/web/src/components/chat/VoiceInputSetup.tsx b/apps/web/src/components/chat/VoiceInputSetup.tsx
index cf697979fc27..57a90f1ca348 100644
--- a/apps/web/src/components/chat/VoiceInputSetup.tsx
+++ b/apps/web/src/components/chat/VoiceInputSetup.tsx
@@ -6,7 +6,7 @@ import type {
   EnvironmentSpeechStatus,
 } from "@t3tools/contracts";
 import { useNavigate } from "@tanstack/react-router";
-import { RefreshCwIcon } from "lucide-react";
+import { CircleAlertIcon, MicIcon, RefreshCwIcon } from "lucide-react";
 import { useEffect, useState } from "react";
 
 import { useClientSettings, updateClientSettings } from "../../hooks/useSettings";
@@ -17,7 +17,7 @@ import { languageLabel } from "../settings/SpeechLanguageSelect";
 import { Button } from "../ui/button";
 import { Dialog } from "../ui/dialog";
 import { Select, SelectItem, SelectPopup, SelectTrigger, SelectValue } from "../ui/select";
-import { WizardFooter, WizardHeader, WizardPanel, WizardPopup, WizardSteps } from "../ui/wizard";
+import { WizardFooter, WizardHeader, WizardPanel, WizardPopup } from "../ui/wizard";
 
 export function VoiceInputSetup(props: {
   environmentId: EnvironmentId | null;
@@ -49,7 +49,7 @@ export function VoiceInputSetup(props: {
       setMicrophones(await listBrowserMicrophones());
       setMicrophoneError(null);
     } catch {
-      setMicrophoneError("Could not list microphones. You can still use the system default.");
+      setMicrophoneError("Couldn’t list microphones. The system default still works.");
     }
     setLoadingMicrophones(false);
   });
@@ -77,39 +77,38 @@ export function VoiceInputSetup(props: {
     void navigate({ to: "/settings/voice", hash });
   };
 
+  const destination = environment?.label ?? "your transcription environment";
+
   return (
     <Dialog open={props.open} onOpenChange={props.onOpenChange}>
       <WizardPopup>
         <WizardHeader
-          title="Set up voice input"
-          description={`Transcribe speech on ${environment?.label ?? "your transcription environment"} and use voice input across environments.`}
-        >
-          <WizardSteps steps={["Model", "Ready to dictate"]} currentStep={props.step} />
-        </WizardHeader>
+          title={props.step === 0 ? "Set up voice input" : "Voice input is ready"}
+          description={
+            props.step === 0
+              ? `Download a speech model once. Your audio is transcribed on ${destination}.`
+              : "Pick a microphone, then start talking."
+          }
+        />
         <WizardPanel>
           {props.step === 0 ? (
             <section className="space-y-3 text-sm">
               {model ? (
-                <div className="rounded-lg border border-border/70 bg-card/60 p-4">
-                  <div className="flex items-center justify-between gap-2">
-                    <h3 className="font-medium">{model.name}</h3>
-                    {model?.recommended && props.language ? (
-                      <span className="text-xs font-medium text-primary">
-                        Recommended for {languageLabel(props.language)}
-                      </span>
-                    ) : null}
+                <div className="space-y-3 rounded-lg border border-border/70 bg-card/60 p-3">
+                  <div className="flex items-baseline justify-between gap-3">
+                    <h3 className="min-w-0 truncate font-medium">{model.name}</h3>
+                    <span className="shrink-0 text-xs text-muted-foreground tabular-nums">
+                      {Math.round(model.size / 1024 / 1024)} MB
+                    </span>
                   </div>
-                  <p className="mt-2 text-muted-foreground">
-                    Download the {Math.round(model.size / 1024 / 1024)} MB model to{" "}
-                    {environment?.label ?? "your transcription environment"}. Microphone audio is
-                    sent there for transcription, as chosen in Voice settings.
-                  </p>
-                  <p className="mt-2 text-muted-foreground">
-                    Silero (1.2 MB), used for silence filtering and pause detection, downloads
-                    alongside the speech model. An installed copy is reused.
+                  <p className="text-xs text-muted-foreground">
+                    {model.recommended && props.language
+                      ? `Recommended for ${languageLabel(props.language)}. `
+                      : ""}
+                    Includes a 1.2 MB silence detector.
                   </p>
                   {props.downloading ? (
-                    <div role="status" className="mt-4 space-y-1 text-muted-foreground">
+                    <div role="status" className="space-y-1.5">
                       <div
                         role="progressbar"
                         aria-label="Speech model download progress"
@@ -123,9 +122,9 @@ export function VoiceInputSetup(props: {
                           style={{ width: `${progress ?? 0}%` }}
                         />
                       </div>
-                      <p className="text-xs">
-                        {model?.state === "verifying"
-                          ? "Verifying download…"
+                      <p className="text-xs text-muted-foreground tabular-nums">
+                        {model.state === "verifying"
+                          ? "Verifying…"
                           : progress === null
                             ? "Starting download…"
                             : `${progress}% downloaded`}
@@ -139,119 +138,121 @@ export function VoiceInputSetup(props: {
                 </p>
               ) : null}
               {props.error ? (
-                <p role="alert" className="text-destructive">
+                <p role="alert" className="flex items-start gap-1.5 text-destructive">
+                  <CircleAlertIcon aria-hidden className="mt-0.5 size-3.5 shrink-0" />
                   {props.error}
                 </p>
               ) : null}
             </section>
           ) : (
-            <section className="space-y-4 text-sm">
-              <div className="space-y-2">
-                <label className="font-medium" htmlFor="voice-setup-microphone">
-                  Microphone
-                </label>
-                <div className="flex items-center gap-2">
-                  <Select
-                    value={selectedMicrophone ? `device:${selectedMicrophone}` : "system-default"}
-                    disabled={loadingMicrophones}
-                    onValueChange={(value) => {
-                      if (value)
-                        void updateClientSettings({
-                          voiceMicrophone:
-                            value === "system-default" ? "" : value.slice("device:".length),
-                        });
-                    }}
-                  >
-                    <SelectTrigger
-                      id="voice-setup-microphone"
-                      size="sm"
-                      aria-label="Microphone"
-                      className="min-w-0 flex-1"
-                    >
-                      <SelectValue>{selectedMicrophoneLabel}</SelectValue>
-                    </SelectTrigger>
-                    <SelectPopup align="end" alignItemWithTrigger={false}>
-                      <SelectItem value="system-default">System default</SelectItem>
-                      {selectedIsUnavailable ? (
-                        <SelectItem value={`device:${selectedMicrophone}`}>
-                          Selected microphone (Unavailable)
-                        </SelectItem>
-                      ) : null}
-                      {microphones.map((device) => (
-                        <SelectItem key={device.deviceId} value={`device:${device.deviceId}`}>
-                          {device.label}
-                        </SelectItem>
-                      ))}
-                    </SelectPopup>
-                  </Select>
-                  <Button
-                    type="button"
-                    variant="ghost"
-                    size="icon-sm"
-                    disabled={loadingMicrophones}
-                    aria-label="Refresh microphones"
-                    onClick={() => void refreshMicrophones()}
+            <section className="space-y-2 text-sm">
+              <label className="sr-only" htmlFor="voice-setup-microphone">
+                Microphone
+              </label>
+              <div className="flex items-center gap-2">
+                <Select
+                  value={selectedMicrophone ? `device:${selectedMicrophone}` : "system-default"}
+                  disabled={loadingMicrophones}
+                  onValueChange={(value) => {
+                    if (value)
+                      void updateClientSettings({
+                        voiceMicrophone:
+                          value === "system-default" ? "" : value.slice("device:".length),
+                      });
+                  }}
+                >
+                  <SelectTrigger
+                    id="voice-setup-microphone"
+                    size="sm"
+                    aria-label="Microphone"
+                    className="min-w-0 flex-1"
                   >
-                    <RefreshCwIcon className="size-3.5" />
-                  </Button>
-                </div>
-                {selectedIsUnavailable ? (
-                  <p className="text-xs text-destructive">
-                    The selected microphone is unavailable. Choose another or use the system
-                    default.
-                  </p>
-                ) : null}
-                {microphoneError ? (
-                  <p role="alert" className="text-xs text-muted-foreground">
-                    {microphoneError}
-                  </p>
-                ) : null}
+                    <MicIcon aria-hidden className="size-3.5 shrink-0 text-muted-foreground" />
+                    <SelectValue>{selectedMicrophoneLabel}</SelectValue>
+                  </SelectTrigger>
+                  <SelectPopup align="end" alignItemWithTrigger={false}>
+                    <SelectItem value="system-default">System default</SelectItem>
+                    {selectedIsUnavailable ? (
+                      <SelectItem value={`device:${selectedMicrophone}`}>
+                        Selected microphone (Unavailable)
+                      </SelectItem>
+                    ) : null}
+                    {microphones.map((device) => (
+                      <SelectItem key={device.deviceId} value={`device:${device.deviceId}`}>
+                        {device.label}
+                      </SelectItem>
+                    ))}
+                  </SelectPopup>
+                </Select>
+                <Button
+                  type="button"
+                  variant="ghost"
+                  size="icon-sm"
+                  disabled={loadingMicrophones}
+                  aria-label="Refresh microphones"
+                  onClick={() => void refreshMicrophones()}
+                >
+                  <RefreshCwIcon className="size-3.5" />
+                </Button>
               </div>
-              <p className="text-muted-foreground">
-                Speak and transcribe in multiple languages or translate into English, and get names
-                and technical terms right with the dictionary in Voice settings.
-              </p>
+              {selectedIsUnavailable ? (
+                <p className="text-xs text-destructive">
+                  That microphone is unplugged. Pick another one.
+                </p>
+              ) : null}
+              {microphoneError ? (
+                <p role="alert" className="text-xs text-muted-foreground">
+                  {microphoneError}
+                </p>
+              ) : null}
             </section>
           )}
         </WizardPanel>
-        <WizardFooter>
-          {props.step === 0 ? (
-            <>
-              <Button variant="outline" onClick={() => openSettings("speech-models")}>
-                {model ? "Choose another model or language" : "Choose a model or language"}
+        {props.step === 0 ? (
+          <WizardFooter
+            leading={
+              <Button variant="ghost" onClick={() => openSettings("speech-models")}>
+                {model ? "Other models" : "Choose a model"}
               </Button>
-              {props.onRetryCatalog ? (
-                <Button onClick={props.onRetryCatalog}>Retry loading models</Button>
-              ) : null}
-              {props.downloading ? (
-                <Button variant="outline" disabled={!canManage} onClick={props.onCancelDownload}>
-                  Cancel download
-                </Button>
-              ) : null}
-              {model ? (
-                <Button
-                  disabled={!canManage || props.downloading || !status}
-                  onClick={props.onDownload}
-                >
-                  {props.downloading
-                    ? "Downloading…"
-                    : props.error
-                      ? "Try again"
-                      : canManage
-                        ? "Download model"
-                        : "Ask an environment admin to download"}
-                </Button>
-              ) : null}
-            </>
-          ) : (
-            <>
-              <Button variant="outline" onClick={() => openSettings("")}>
-                Customize in Voice settings
+            }
+          >
+            {props.onRetryCatalog ? (
+              <Button onClick={props.onRetryCatalog}>Retry loading models</Button>
+            ) : null}
+            {props.downloading ? (
+              <Button variant="outline" disabled={!canManage} onClick={props.onCancelDownload}>
+                Cancel download
               </Button>
-              <Button onClick={props.onStartRecording}>Start dictating</Button>
-            </>
-          )}
-        </WizardFooter>
+            ) : null}
+            {model ? (
+              <Button
+                disabled={!canManage || props.downloading || !status}
+                onClick={props.onDownload}
+              >
+                {props.downloading
+                  ? "Downloading…"
+                  : props.error
+                    ? "Try again"
+                    : canManage
+                      ? "Download model"
+                      : "Needs an admin to download"}
+              </Button>
+            ) : null}
+          </WizardFooter>
+        ) : (
+          <WizardFooter
+            leading={
+              <Button variant="ghost" onClick={() => openSettings("")}>
+                Voice settings
+              </Button>
+            }
+          >
+            <Button onClick={props.onStartRecording}>
+              <MicIcon />
+              Start dictating
+            </Button>
+          </WizardFooter>
+        )}
       </WizardPopup>
     </Dialog>
   );
diff --git a/apps/web/src/components/pullRequest/PullRequestCommentForm.tsx b/apps/web/src/components/pullRequest/PullRequestCommentForm.tsx
index f7aa2ece22a4..cf0ff1ab468c 100644
--- a/apps/web/src/components/pullRequest/PullRequestCommentForm.tsx
+++ b/apps/web/src/components/pullRequest/PullRequestCommentForm.tsx
@@ -137,9 +137,7 @@ export function PullRequestCommentForm({
         }}
       />
       <div className="flex flex-wrap items-center justify-end gap-2">
-        <div className="mr-auto flex min-w-0 flex-wrap items-center gap-1">
-          <TextFieldSpeechControls speech={speech} disabled={locked} />
-        </div>
+        <TextFieldSpeechControls speech={speech} disabled={locked} />
         {followUpAction === null ? null : (
           <Button
             size="xs"
diff --git a/apps/web/src/components/pullRequest/PullRequestReviewForm.tsx b/apps/web/src/components/pullRequest/PullRequestReviewForm.tsx
index 5308c6320898..6a50a758f30b 100644
--- a/apps/web/src/components/pullRequest/PullRequestReviewForm.tsx
+++ b/apps/web/src/components/pullRequest/PullRequestReviewForm.tsx
@@ -177,9 +177,7 @@ export function PullRequestReviewForm({
         }}
       />
       <div className="mt-2 flex flex-wrap items-center justify-end gap-2">
-        <div className="mr-auto flex min-w-0 flex-wrap items-center gap-1">
-          <TextFieldSpeechControls speech={speech} disabled={pending} />
-        </div>
+        <TextFieldSpeechControls speech={speech} disabled={pending} />
         {offered.length > 1 ? (
           <Select
             value={selectedVerdict?.value ?? null}
diff --git a/apps/web/src/speech/useTextFieldSpeech.tsx b/apps/web/src/speech/useTextFieldSpeech.tsx
index a6c995355015..720c6ba76472 100644
--- a/apps/web/src/speech/useTextFieldSpeech.tsx
+++ b/apps/web/src/speech/useTextFieldSpeech.tsx
@@ -75,35 +75,35 @@ export function TextFieldSpeechControls({
   return (
     <>
       {speech.preview ? (
-        <p role="status" className="w-full text-sm text-muted-foreground">
+        <p
+          role="status"
+          className="order-first max-h-24 w-full overflow-y-auto rounded-lg border border-border/60 bg-muted/30 px-2.5 py-1.5 text-sm break-words whitespace-pre-wrap"
+        >
           {speech.preview.committed}
-          <span className="opacity-70">{speech.preview.tentative}</span>
+          <span className="text-muted-foreground">{speech.preview.tentative}</span>
         </p>
       ) : null}
-      <div className="flex min-w-0 items-center gap-1">
-        <ComposerSpeechRecordingPill
+      <ComposerSpeechRecordingPill
+        state={speech.state}
+        progress={null}
+        level={speech.level}
+        finishShortcutLabel={speech.shortcutLabel}
+        cancelShortcutLabel="Esc"
+        disabled={disabled}
+        onStart={() => void speech.start()}
+        onStop={() => void speech.stop()}
+        onCancel={speech.cancel}
+        onSkipPostProcessing={speech.skipPostProcessing}
+      />
+      {speech.available ? (
+        <ComposerSpeechButton
           state={speech.state}
-          progress={null}
-          level={speech.level}
-          finishShortcutLabel={speech.shortcutLabel}
-          cancelShortcutLabel="Esc"
+          size="compact"
+          shortcutLabel={speech.shortcutLabel}
           disabled={disabled}
           onStart={() => void speech.start()}
-          onStop={() => void speech.stop()}
-          onCancel={speech.cancel}
-          onSkipPostProcessing={speech.skipPostProcessing}
         />
-        {speech.available ? (
-          <ComposerSpeechButton
-            state={speech.state}
-            progress={null}
-            shortcutLabel={speech.shortcutLabel}
-            disabled={disabled}
-            onStart={() => void speech.start()}
-            onCancel={speech.cancel}
-          />
-        ) : null}
-      </div>
+      ) : null}
       <VoiceInputSetup
         environmentId={speech.transcriptionEnvironmentId}
         open={speech.setup.open}

From 6becf460ea02c68f06543947d9ee1205520ea341 Mon Sep 17 00:00:00 2001
From: maria-rcks <maria@kuuro.net>
Date: Mon, 9 Nov 2026 00:26:58 +0000
Subject: [PATCH 3/9] fix(web): voice settings model test and mic test fit
 their space

The selected model stacks its controls under its details while a test
is open, so the live recording capsule no longer squeezes the text. The
microphone test waveform sits next to the recording dot again, and a
missing microphone reads as one plain sentence.
---
 .../src/components/settings/MicrophoneTest.tsx   | 16 ++++++++--------
 .../components/settings/VoiceSettingsPanel.tsx   | 12 +++++++++++-
 2 files changed, 19 insertions(+), 9 deletions(-)

diff --git a/apps/web/src/components/settings/MicrophoneTest.tsx b/apps/web/src/components/settings/MicrophoneTest.tsx
index 14482bfbed91..4459ca1d8130 100644
--- a/apps/web/src/components/settings/MicrophoneTest.tsx
+++ b/apps/web/src/components/settings/MicrophoneTest.tsx
@@ -165,15 +165,15 @@ export function MicrophoneTest({ microphoneId }: { microphoneId: string }) {
       if (capture.current !== current) return;
       releaseCapture();
       setPhase("idle");
+      const name = typeof cause === "object" && cause !== null && "name" in cause && cause.name;
       setError(
-        typeof cause === "object" &&
-          cause !== null &&
-          "name" in cause &&
-          cause.name === "NotAllowedError"
+        name === "NotAllowedError"
           ? MICROPHONE_PERMISSION_ERROR
-          : cause instanceof Error
-            ? cause.message
-            : "Could not access the microphone.",
+          : name === "NotFoundError"
+            ? "No microphone found."
+            : cause instanceof Error
+              ? cause.message
+              : "Could not access the microphone.",
       );
     }
   };
@@ -215,7 +215,7 @@ export function MicrophoneTest({ microphoneId }: { microphoneId: string }) {
   ) : phase === "recording" ? (
     <>
       <span aria-hidden className="size-1.5 shrink-0 rounded-full bg-destructive" />
-      <div className="flex w-36 min-w-0">
+      <div className="flex w-24 min-w-0">
         <VoiceWaveform level={level} />
       </div>
       <span
diff --git a/apps/web/src/components/settings/VoiceSettingsPanel.tsx b/apps/web/src/components/settings/VoiceSettingsPanel.tsx
index dd65e553d50e..0b9d0614da32 100644
--- a/apps/web/src/components/settings/VoiceSettingsPanel.tsx
+++ b/apps/web/src/components/settings/VoiceSettingsPanel.tsx
@@ -50,6 +50,7 @@ import {
 import { useEffect, useRef, useState, type ReactNode } from "react";
 
 import { useStableCallback } from "~/hooks/useStableCallback";
+import { cn } from "~/lib/utils";
 import { listBrowserMicrophones, type BrowserMicrophone } from "../../speech/browserMicrophones";
 import { preferredSpeechLanguages } from "../../speech/preferredSpeechLanguages";
 import {
@@ -172,6 +173,8 @@ type ModelCardProps = {
   readonly onCancel: () => void;
   readonly onDelete: () => void;
   readonly testControls?: ReactNode;
+  /** Keeps the controls under the text, so a live test never squeezes the model's details. */
+  readonly stacked?: boolean;
   readonly children?: ReactNode;
 };
 
@@ -193,7 +196,13 @@ function ModelCard(props: ModelCardProps) {
   const progress = model.downloaded === undefined ? 0 : (model.downloaded / model.size) * 100;
   return (
     <div className="@container/model px-3 py-3">
-      <div className="flex flex-col gap-2.5 @min-[28rem]/model:flex-row @min-[28rem]/model:items-start @min-[28rem]/model:gap-4">
+      <div
+        className={cn(
+          "flex flex-col gap-2.5",
+          !props.stacked &&
+            "@min-[28rem]/model:flex-row @min-[28rem]/model:items-start @min-[28rem]/model:gap-4",
+        )}
+      >
         <div className="min-w-0 flex-1">
           <div className="flex flex-wrap items-center gap-1.5">
             <span className="text-sm font-medium leading-5">{model.name}</span>
@@ -1025,6 +1034,7 @@ function TranscriptionTest(props: {
     <SettingsSearchTarget {...searchableSetting("transcription-test")} hidden={props.hidden}>
       <ModelCard
         {...props.card}
+        stacked={showTranscript}
         testControls={
           <div className="flex min-w-0 max-w-full items-center gap-1">
             <ComposerSpeechRecordingPill

From eb304e24c8afe4875abd9071bc8ed62b0f02adb2 Mon Sep 17 00:00:00 2001
From: maria-rcks <maria@kuuro.net>
Date: Mon, 9 Nov 2026 00:39:12 +0000
Subject: [PATCH 4/9] fix(web): dictation capsule sits evenly in the composer
 and text-field rows

The recording capsule sizes to its content with a fixed-width waveform, so the
timer, waveform and finish button no longer leave a gap or overlap. It matches
the send button height and insets its round buttons. Text-field rows get a
compact capsule at the xs button height. Error actions use the outline button
and the error label shows a focus ring.
---
 .../components/chat/ComposerSpeechButton.tsx  | 21 +++++++++++++------
 .../components/chat/VoiceInputErrorPill.tsx   | 12 ++++++-----
 .../src/components/chat/VoiceInputPill.tsx    | 15 ++++++++-----
 apps/web/src/speech/useTextFieldSpeech.tsx    |  1 +
 4 files changed, 33 insertions(+), 16 deletions(-)

diff --git a/apps/web/src/components/chat/ComposerSpeechButton.tsx b/apps/web/src/components/chat/ComposerSpeechButton.tsx
index 2d9525a8ca8e..214b6715caad 100644
--- a/apps/web/src/components/chat/ComposerSpeechButton.tsx
+++ b/apps/web/src/components/chat/ComposerSpeechButton.tsx
@@ -65,7 +65,9 @@ function RecordingStatus(props: { level: number; recordingLimitSeconds?: number
           ? ` / ${formatElapsed(props.recordingLimitSeconds)}`
           : ""}
       </span>
-      <VoiceWaveform level={props.level} />
+      <div className="me-1.5 flex w-16 min-w-0 shrink">
+        <VoiceWaveform level={props.level} />
+      </div>
     </>
   );
 }
@@ -124,6 +126,8 @@ export function ComposerSpeechRecordingPill(props: {
   cancelShortcutLabel?: string | null;
   level: number;
   recordingLimitSeconds?: number | undefined;
+  /** Compact matches the `xs` buttons beside text-field editors. */
+  size?: "default" | "compact";
   onStart(): void;
   disabled?: boolean;
   onStop(): void;
@@ -131,9 +135,11 @@ export function ComposerSpeechRecordingPill(props: {
   onSkipPostProcessing(): void;
 }) {
   const { phase } = props.state;
+  const compact = props.size === "compact";
   if (phase === "error") {
     return (
       <VoiceInputErrorPill
+        size={props.size}
         error={props.state.error}
         errorAction={props.state.errorAction}
         disabled={props.disabled ?? false}
@@ -149,11 +155,11 @@ export function ComposerSpeechRecordingPill(props: {
   const trailing = recording || phase === "post-processing";
 
   return (
-    <VoiceInputPill>
+    <VoiceInputPill size={props.size}>
       <ShortcutTooltip label="Cancel voice input" shortcut={props.cancelShortcutLabel}>
         <Button
           type="button"
-          size="icon-sm-pill"
+          size={compact ? "icon-xs" : "icon-sm-pill"}
           variant="ghost"
           aria-label="Cancel voice input"
           onPointerDown={keepFocus}
@@ -164,7 +170,10 @@ export function ComposerSpeechRecordingPill(props: {
         </Button>
       </ShortcutTooltip>
       <div
-        className={cn("flex min-w-0 flex-1 items-center gap-2", !trailing && "pe-3")}
+        className={cn(
+          "flex min-w-0 flex-1 items-center gap-2 overflow-hidden",
+          !trailing && "pe-2.5",
+        )}
         role="status"
         aria-live={recording ? "off" : "polite"}
         aria-label={presentation.status ?? undefined}
@@ -186,7 +195,7 @@ export function ComposerSpeechRecordingPill(props: {
       {phase === "post-processing" ? (
         <Button
           type="button"
-          size="sm-pill"
+          size={compact ? "xs" : "sm-pill"}
           variant="ghost"
           onPointerDown={keepFocus}
           onClick={props.onSkipPostProcessing}
@@ -198,7 +207,7 @@ export function ComposerSpeechRecordingPill(props: {
         <ShortcutTooltip label="Finish voice input" shortcut={props.finishShortcutLabel}>
           <Button
             type="button"
-            size="icon-sm-pill"
+            size={compact ? "icon-xs" : "icon-sm-pill"}
             aria-label="Finish voice input"
             onPointerDown={keepFocus}
             onClick={props.onStop}
diff --git a/apps/web/src/components/chat/VoiceInputErrorPill.tsx b/apps/web/src/components/chat/VoiceInputErrorPill.tsx
index 15b8dfc64a75..ad05ed155898 100644
--- a/apps/web/src/components/chat/VoiceInputErrorPill.tsx
+++ b/apps/web/src/components/chat/VoiceInputErrorPill.tsx
@@ -36,25 +36,27 @@ export function VoiceInputErrorPill(props: {
   errorAction: "retry" | "settings" | null;
   disabled?: boolean;
   cancelShortcutLabel?: string | null;
+  size?: "default" | "compact" | undefined;
   onRetry(): void;
   onDismiss(): void;
 }) {
   const navigate = useNavigate();
   const message = props.error ?? "Voice input failed";
   const openSettings = props.errorAction === "settings";
+  const compact = props.size === "compact";
   const action = openSettings
     ? { label: "Open voice settings", text: "Settings" }
     : props.error && RETRYABLE_TRANSCRIPTIONS.has(props.error)
       ? { label: "Retry transcription", text: "Retry" }
       : { label: "Record again", text: "Record again" };
   return (
-    <VoiceInputPill tone="error">
+    <VoiceInputPill tone="error" size={props.size}>
       <Tooltip>
         <TooltipTrigger
           render={
             <Button
               type="button"
-              size="icon-sm-pill"
+              size={compact ? "icon-xs" : "icon-sm-pill"}
               variant="ghost"
               aria-label="Dismiss voice input error"
               onPointerDown={(event) => event.preventDefault()}
@@ -77,7 +79,7 @@ export function VoiceInputErrorPill(props: {
               tabIndex={0}
               role="status"
               aria-label={message}
-              className="flex min-w-0 items-center gap-1.5 text-sm font-medium outline-none focus-visible:underline"
+              className="flex min-w-0 items-center gap-1.5 rounded-sm text-sm font-medium outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-inset"
             />
           }
         >
@@ -91,8 +93,8 @@ export function VoiceInputErrorPill(props: {
       {props.errorAction ? (
         <Button
           type="button"
-          size="sm-pill"
-          variant="ghost"
+          size={compact ? "xs" : "sm-pill"}
+          variant="outline"
           aria-label={action.label}
           disabled={props.disabled}
           onPointerDown={(event) => event.preventDefault()}
diff --git a/apps/web/src/components/chat/VoiceInputPill.tsx b/apps/web/src/components/chat/VoiceInputPill.tsx
index e104f38bae28..aa1d5dd81ee4 100644
--- a/apps/web/src/components/chat/VoiceInputPill.tsx
+++ b/apps/web/src/components/chat/VoiceInputPill.tsx
@@ -44,24 +44,29 @@ export const VoiceWaveform = memo(function VoiceWaveform(props: { level: number
 });
 
 /**
- * The capsule every dictation state renders in. It matches the composer's pill buttons
- * (h-8, h-7 from sm), so starting a recording never resizes the toolbar it sits in.
+ * The capsule every dictation state renders in. Default matches the composer's send button
+ * and insets its pill buttons; compact matches the `xs` buttons in text-field action rows.
  */
 export function VoiceInputPill({
   children,
   tone = "default",
+  size = "default",
 }: {
   children: ReactNode;
   tone?: "default" | "error";
+  size?: "default" | "compact" | undefined;
 }) {
   return (
     <div
       data-slot="voice-input-pill"
       className={cn(
-        "flex h-8 items-center gap-1.5 rounded-full ring-1 ring-inset sm:h-7",
+        "flex min-w-0 items-center gap-1.5 ring-1 ring-inset",
+        size === "compact"
+          ? "h-7 rounded-md sm:h-6"
+          : "h-9 max-w-fit grow-[1.5] basis-0 rounded-full p-0.5 sm:h-8",
         tone === "error"
-          ? "max-w-fit min-w-0 grow-2 basis-0 bg-destructive/6 text-destructive ring-destructive/24"
-          : "max-w-60 min-w-32 flex-1 bg-muted/48 ring-border",
+          ? "bg-destructive/6 text-destructive ring-destructive/24"
+          : "bg-muted/48 ring-border",
       )}
     >
       {children}
diff --git a/apps/web/src/speech/useTextFieldSpeech.tsx b/apps/web/src/speech/useTextFieldSpeech.tsx
index 720c6ba76472..575072c71d09 100644
--- a/apps/web/src/speech/useTextFieldSpeech.tsx
+++ b/apps/web/src/speech/useTextFieldSpeech.tsx
@@ -84,6 +84,7 @@ export function TextFieldSpeechControls({
         </p>
       ) : null}
       <ComposerSpeechRecordingPill
+        size="compact"
         state={speech.state}
         progress={null}
         level={speech.level}

From 12db601813f7b59f0658b122bada4c3406d37c27 Mon Sep 17 00:00:00 2001
From: maria-rcks <maria@kuuro.net>
Date: Mon, 9 Nov 2026 01:03:18 +0000
Subject: [PATCH 5/9] fix(web): unsupported transcription destination says so
 in its row

---
 .../settings/VoiceSettingsPanel.tsx           | 26 ++++---------------
 1 file changed, 5 insertions(+), 21 deletions(-)

diff --git a/apps/web/src/components/settings/VoiceSettingsPanel.tsx b/apps/web/src/components/settings/VoiceSettingsPanel.tsx
index 0b9d0614da32..9a93ebb3fb68 100644
--- a/apps/web/src/components/settings/VoiceSettingsPanel.tsx
+++ b/apps/web/src/components/settings/VoiceSettingsPanel.tsx
@@ -44,7 +44,6 @@ import {
   SearchIcon,
   StarIcon,
   Trash2Icon,
-  TriangleAlertIcon,
   XIcon,
 } from "lucide-react";
 import { useEffect, useRef, useState, type ReactNode } from "react";
@@ -1312,28 +1311,13 @@ export function VoiceSettingsPanel() {
         <SettingsRow
           {...searchableSetting("voice-transcription-destination")}
           title="Transcribe with"
-          description="Where your speech is turned into text."
+          description={
+            destination.environmentId && chosenUnsupported
+              ? `${chosenEnvironment.label} can’t transcribe audio locally. Choose another destination.`
+              : "Where your speech is turned into text."
+          }
           control={
             <div className="flex min-w-0 items-center gap-1.5">
-              {destination.environmentId && chosenUnsupported ? (
-                <Tooltip>
-                  <TooltipTrigger
-                    render={
-                      <Button
-                        size="icon-sm"
-                        variant="ghost"
-                        aria-label={`${chosenEnvironment.label} can’t transcribe audio locally`}
-                      >
-                        <TriangleAlertIcon className="text-warning" />
-                      </Button>
-                    }
-                  />
-                  <TooltipPopup>
-                    {chosenEnvironment.label} can’t transcribe audio locally. Choose another
-                    destination.
-                  </TooltipPopup>
-                </Tooltip>
-              ) : null}
               <Select
                 value={destinationValue}
                 onValueChange={(value) => {

From 52f50d17d57aacb1655088e328ae896e22f31d46 Mon Sep 17 00:00:00 2001
From: maria-rcks <maria@kuuro.net>
Date: Wed, 11 Nov 2026 21:37:14 +0000
Subject: [PATCH 6/9] fix(web): voice settings fit phone widths

Below the row and card container breakpoints, Voice settings now stack like Settings > General: full-width microphone, destination and correction cue fields, a one-line dictionary input, a tidy dictionary list, model actions in deliberate rows, and the model path field above its button. Nothing changes at 760px and wider.
---
 .../settings/VoiceSettingsPanel.tsx           | 61 +++++++++++--------
 1 file changed, 36 insertions(+), 25 deletions(-)

diff --git a/apps/web/src/components/settings/VoiceSettingsPanel.tsx b/apps/web/src/components/settings/VoiceSettingsPanel.tsx
index e45dde5d6498..3487ee4c0ab6 100644
--- a/apps/web/src/components/settings/VoiceSettingsPanel.tsx
+++ b/apps/web/src/components/settings/VoiceSettingsPanel.tsx
@@ -371,27 +371,33 @@ function DictionaryEditor(props: {
   return (
     <>
       <div className="flex items-start gap-2">
-        <Textarea
-          value={termDraft}
-          rows={1}
-          maxLength={5_100}
-          disabled={disabled}
-          placeholder="Add words, separated by commas"
-          aria-label={`Add a word or phrase to the ${label}`}
-          onChange={(event) => setTermDraft(event.target.value)}
-          onKeyDown={(event) => {
-            if (event.key !== "Enter" || event.shiftKey) return;
-            event.preventDefault();
-            addTerm();
-          }}
-        />
+        {/* One line while empty, so a wrapped placeholder never makes the field taller than Add. */}
+        <div className="min-w-0 flex-1 [&_textarea]:placeholder-shown:whitespace-nowrap">
+          <Textarea
+            value={termDraft}
+            rows={1}
+            maxLength={5_100}
+            disabled={disabled}
+            placeholder="Add words, separated by commas"
+            aria-label={`Add a word or phrase to the ${label}`}
+            onChange={(event) => setTermDraft(event.target.value)}
+            onKeyDown={(event) => {
+              if (event.key !== "Enter" || event.shiftKey) return;
+              event.preventDefault();
+              addTerm();
+            }}
+          />
+        </div>
         <Button type="button" variant="outline" disabled={!canAddTerm} onClick={addTerm}>
           <PlusIcon />
           Add
         </Button>
       </div>
       {words.length > 0 ? (
-        <ul aria-label={`${label} entries`} className="mt-2.5 flex flex-wrap gap-1.5">
+        <ul
+          aria-label={`${label} entries`}
+          className="mt-2.5 flex flex-col gap-1.5 @min-[32rem]/settings-row:flex-row @min-[32rem]/settings-row:flex-wrap"
+        >
           {words.map(({ term, aliases }) => (
             <li
               key={term}
@@ -408,7 +414,7 @@ function DictionaryEditor(props: {
                   maxLength={50}
                   aria-label={`Alias for ${term}`}
                   placeholder="Misspelling"
-                  className="w-32"
+                  className="ms-auto w-32"
                   onChange={(event) => setAliasDraft({ term, value: event.target.value })}
                   onBlur={() => setAliasDraft(null)}
                   onKeyDown={(event) => {
@@ -423,6 +429,7 @@ function DictionaryEditor(props: {
                   type="button"
                   size="xs"
                   variant="ghost-muted"
+                  className="ms-auto"
                   disabled={disabled || aliases.length >= 8}
                   aria-label={`Add an alias for ${term}`}
                   onClick={() => setAliasDraft({ term, value: "" })}
@@ -540,7 +547,7 @@ function CleanupModelRow() {
         connectedEnvironments.length === 0 ? (
           <span className="text-sm text-muted-foreground">Connect an environment first.</span>
         ) : (
-          <div className="flex min-w-0 flex-wrap items-center justify-end gap-2">
+          <div className="flex min-w-0 flex-wrap items-center gap-2 @min-[32rem]/settings-row:justify-end">
             {dedicated && (!hasProvider || !instanceEntry) ? (
               <span className="text-sm text-muted-foreground">
                 No text generation providers available.
@@ -1013,7 +1020,7 @@ function SpeechModelBrowser(props: {
       </div>
       {status.supportsModelLinking && canReadFiles ? (
         <form
-          className="mb-2 flex items-center gap-2"
+          className="mb-2 flex flex-col items-start gap-2 @min-[28rem]/voice-models:flex-row @min-[28rem]/voice-models:items-center"
           onSubmit={(event) => {
             event.preventDefault();
             void run("Could not use a model from that path", async () => {
@@ -1022,7 +1029,7 @@ function SpeechModelBrowser(props: {
             });
           }}
         >
-          <div className="min-w-0 flex-1">
+          <div className="w-full min-w-0 flex-1">
             <Input
               size="compact"
               aria-label="Path to a model file or folder already on this environment"
@@ -1079,7 +1086,7 @@ function TranscriptionTest(props: {
         {...props.card}
         stacked={showTranscript}
         testControls={
-          <div className="flex min-w-0 max-w-full items-center gap-1">
+          <div className="order-last flex min-w-0 max-w-full basis-full items-center gap-1 @min-[28rem]/model:order-none @min-[28rem]/model:basis-auto">
             <ComposerSpeechRecordingPill
               state={speech.state}
               progress={null}
@@ -1276,7 +1283,7 @@ export function VoiceSettingsPanel() {
           title="Microphone"
           description="System default follows your operating system."
           control={
-            <div className="flex min-w-0 items-center gap-1.5">
+            <div className="flex w-full min-w-0 items-center gap-1.5 @min-[32rem]/settings-row:w-auto">
               <Select
                 value={selectedMicrophone ? `device:${selectedMicrophone}` : SYSTEM_DEFAULT}
                 onValueChange={(value) => {
@@ -1287,7 +1294,11 @@ export function VoiceSettingsPanel() {
                     });
                 }}
               >
-                <SelectTrigger size="sm" aria-label="Microphone" className="max-w-56">
+                <SelectTrigger
+                  size="sm"
+                  aria-label="Microphone"
+                  className="@min-[32rem]/settings-row:max-w-56"
+                >
                   <SelectValue>{selectedMicrophoneLabel}</SelectValue>
                 </SelectTrigger>
                 <SelectPopup align="end" alignItemWithTrigger={false}>
@@ -1361,7 +1372,7 @@ export function VoiceSettingsPanel() {
               : "Where your speech is turned into text."
           }
           control={
-            <div className="flex min-w-0 items-center gap-1.5">
+            <div className="flex w-full min-w-0 items-center gap-1.5 @min-[32rem]/settings-row:w-auto">
               <Select
                 value={destinationValue}
                 onValueChange={(value) => {
@@ -1387,7 +1398,7 @@ export function VoiceSettingsPanel() {
                 <SelectTrigger
                   size="sm"
                   aria-label="Transcribe with"
-                  className="w-auto min-w-0 max-w-72"
+                  className="min-w-0 @min-[32rem]/settings-row:w-auto @min-[32rem]/settings-row:max-w-72"
                 >
                   <SelectValue>
                     <span className="flex min-w-0 items-center gap-2">
@@ -1681,7 +1692,7 @@ export function VoiceSettingsPanel() {
                 maxLength={50}
                 placeholder="sorry"
                 aria-label="Correction cue"
-                className="w-40"
+                className="@min-[32rem]/settings-row:w-40"
                 onBlur={(event) => {
                   const next = event.target.value.trim();
                   if (next !== settings.speechCorrectionWord)

From 3b3cb91a1dfd34143a47780a02cfdb95c309d780 Mon Sep 17 00:00:00 2001
From: maria-rcks <maria@kuuro.net>
Date: Wed, 11 Nov 2026 22:18:58 +0000
Subject: [PATCH 7/9] fix(web): dictation capsule fits the composer on phones

On a compact composer footer the dictation capsule takes the row beside send: the model controls, attach button and compact chip step aside until dictation ends. Text-field capsules take their own row on phones so the field's buttons stay together below.
---
 apps/web/src/components/chat/ChatComposer.tsx | 29 ++++++++++++-------
 .../components/chat/ComposerSpeechButton.tsx  |  2 +-
 .../src/components/chat/VoiceInputPill.tsx    |  3 +-
 3 files changed, 22 insertions(+), 12 deletions(-)

diff --git a/apps/web/src/components/chat/ChatComposer.tsx b/apps/web/src/components/chat/ChatComposer.tsx
index 9e08984c1440..dc2271d7cae5 100644
--- a/apps/web/src/components/chat/ChatComposer.tsx
+++ b/apps/web/src/components/chat/ChatComposer.tsx
@@ -985,6 +985,7 @@ export const ChatComposer = memo(function ChatComposer(props: ChatComposerProps)
     null,
   );
   const [isDragOverComposer, setIsDragOverComposer] = useState(false);
+  const [isComposerFooterCompact, setIsComposerFooterCompact] = useState(false);
   const [isComposerPrimaryActionsCompact, setIsComposerPrimaryActionsCompact] = useState(false);
   const [isComposerModelPickerOpen, setIsComposerModelPickerOpen] = useState(false);
   const isMobileViewport = useMediaQuery("max-sm");
@@ -1484,19 +1485,18 @@ export const ChatComposer = memo(function ChatComposer(props: ChatComposerProps)
   useLayoutEffect(() => {
     const composerForm = composerFormRef.current;
     if (!composerForm) return;
-    const measurePrimaryActionsCompact = () => {
+    const measureCompactLayouts = () => {
       const composerFormWidth = composerForm.clientWidth;
       const options = { hasWideActions: composerFooterHasWideActions };
-      return (
+      setIsComposerFooterCompact(shouldUseCompactComposerFooter(composerFormWidth));
+      setIsComposerPrimaryActionsCompact(
         shouldUseCompactComposerFooter(composerFormWidth, options) &&
-        shouldUseCompactComposerPrimaryActions(composerFormWidth, options)
+          shouldUseCompactComposerPrimaryActions(composerFormWidth, options),
       );
     };
 
-    setIsComposerPrimaryActionsCompact(measurePrimaryActionsCompact());
-    return observeResize(composerForm, () => {
-      setIsComposerPrimaryActionsCompact(measurePrimaryActionsCompact());
-    });
+    measureCompactLayouts();
+    return observeResize(composerForm, measureCompactLayouts);
   }, [composerFooterHasWideActions]);
 
   // oxlint-disable-next-line t3code/no-unreasoned-state-sync -- reads draft images as data URLs and persists them to the draft store, dropping stale results on cleanup
@@ -1825,6 +1825,8 @@ export const ChatComposer = memo(function ChatComposer(props: ChatComposerProps)
     },
   });
   const { blocksSubmission: voiceInputActive, submitAfterDictation } = speechInput;
+  // A compact footer gives the dictation capsule the whole row beside the send button.
+  const dictationTakesFooter = isComposerFooterCompact && speechInput.state.phase !== "idle";
   const submissionTarget = activePendingProgress ? "pending-user-input" : "provider-turn";
   const submissionBlocked = isComposerSubmissionBlocked({
     submissionTarget,
@@ -3571,7 +3573,9 @@ export const ChatComposer = memo(function ChatComposer(props: ChatComposerProps)
                     "hidden sm:flex",
                 )}
               >
-                {composerAttachButton ? <div className="me-2">{composerAttachButton}</div> : null}
+                {composerAttachButton && !dictationTakesFooter ? (
+                  <div className="me-2">{composerAttachButton}</div>
+                ) : null}
                 <div
                   data-chat-composer-actions="right"
                   data-chat-composer-transition-actions="true"
@@ -3584,7 +3588,10 @@ export const ChatComposer = memo(function ChatComposer(props: ChatComposerProps)
                     ref={attachExpandedComposerControls}
                     data-chat-composer-controls="footer"
                     data-chat-composer-footer-controls="true"
-                    className="relative flex min-w-0 flex-1 items-center justify-end gap-0.5"
+                    className={cn(
+                      "relative flex min-w-0 flex-1 items-center justify-end gap-0.5",
+                      dictationTakesFooter && "hidden",
+                    )}
                   >
                     {composerControls}
                   </div>
@@ -3627,7 +3634,9 @@ export const ChatComposer = memo(function ChatComposer(props: ChatComposerProps)
                     onResume={onResume}
                     onPreviousPendingQuestion={onPreviousActivePendingUserInputQuestion}
                     onInterrupt={handleInterruptPrimaryActionStable}
-                    compactBeforeSendTokens={props.resumeCompactionTokens}
+                    compactBeforeSendTokens={
+                      dictationTakesFooter ? null : props.resumeCompactionTokens
+                    }
                     keepFullHistory={props.keepFullHistory}
                     onToggleKeepFullHistory={props.onToggleKeepFullHistory}
                   >
diff --git a/apps/web/src/components/chat/ComposerSpeechButton.tsx b/apps/web/src/components/chat/ComposerSpeechButton.tsx
index 214b6715caad..ca9ef2a278ad 100644
--- a/apps/web/src/components/chat/ComposerSpeechButton.tsx
+++ b/apps/web/src/components/chat/ComposerSpeechButton.tsx
@@ -65,7 +65,7 @@ function RecordingStatus(props: { level: number; recordingLimitSeconds?: number
           ? ` / ${formatElapsed(props.recordingLimitSeconds)}`
           : ""}
       </span>
-      <div className="me-1.5 flex w-16 min-w-0 shrink">
+      <div className="me-1.5 flex w-16 min-w-0 shrink grow">
         <VoiceWaveform level={props.level} />
       </div>
     </>
diff --git a/apps/web/src/components/chat/VoiceInputPill.tsx b/apps/web/src/components/chat/VoiceInputPill.tsx
index aa1d5dd81ee4..1aa238a8c4b2 100644
--- a/apps/web/src/components/chat/VoiceInputPill.tsx
+++ b/apps/web/src/components/chat/VoiceInputPill.tsx
@@ -62,7 +62,8 @@ export function VoiceInputPill({
       className={cn(
         "flex min-w-0 items-center gap-1.5 ring-1 ring-inset",
         size === "compact"
-          ? "h-7 rounded-md sm:h-6"
+          ? // Phones give the capsule its own row so the field's buttons stay together below it.
+            "h-7 rounded-md max-sm:order-first max-sm:basis-full sm:h-6"
           : "h-9 max-w-fit grow-[1.5] basis-0 rounded-full p-0.5 sm:h-8",
         tone === "error"
           ? "bg-destructive/6 text-destructive ring-destructive/24"

From 217bfcad716347af8acb77fd63bccccda4de4ad4 Mon Sep 17 00:00:00 2001
From: maria-rcks <maria@kuuro.net>
Date: Wed, 11 Nov 2026 23:02:14 +0000
Subject: [PATCH 8/9] feat(web): microphones are an ordered list, first
 connected one wins

Settings > Voice now lists System default and every named microphone in a
saved order, like mobile. Recording uses the first entry that is connected
right now, so an unplugged preferred microphone falls through to the next
row instead of failing. Microphones are remembered below System default the
first time they are seen, can be moved up and down or dragged, and can be
forgotten. The voice setup dialog's picker moves its choice to the top.

The order is a new device-local client setting, voiceMicrophones. The old
voiceMicrophone value seeds an empty order and stays in the schema.
---
 .../src/components/chat/VoiceInputSetup.tsx   |  33 +++-
 .../settings/MicrophoneOrderList.tsx          | 172 ++++++++++++++++++
 .../components/settings/MicrophoneTest.tsx    |  10 +-
 .../VoiceSettingsPanel.browser.test.tsx       |  48 +++++
 .../settings/VoiceSettingsPanel.tsx           |  96 +++++-----
 .../src/components/settings/settingsSearch.ts |   2 +-
 apps/web/src/speech/browserMicrophones.ts     |  48 ++++-
 .../speech/browserPcmCapture.browser.test.ts  |  15 +-
 apps/web/src/speech/browserPcmCapture.ts      |   5 +-
 apps/web/src/speech/browserVoiceInput.ts      |   2 +-
 apps/web/src/speech/microphoneOrder.ts        | 123 +++++++++++++
 ...useEnvironmentSpeechInput.browser.test.tsx |   2 +
 .../src/speech/useEnvironmentSpeechInput.ts   |   3 +-
 docs/user/voice-input.md                      |  13 +-
 packages/contracts/src/settings.ts            |  13 +-
 15 files changed, 503 insertions(+), 82 deletions(-)
 create mode 100644 apps/web/src/components/settings/MicrophoneOrderList.tsx
 create mode 100644 apps/web/src/speech/microphoneOrder.ts

diff --git a/apps/web/src/components/chat/VoiceInputSetup.tsx b/apps/web/src/components/chat/VoiceInputSetup.tsx
index 57a90f1ca348..e1f74b68376c 100644
--- a/apps/web/src/components/chat/VoiceInputSetup.tsx
+++ b/apps/web/src/components/chat/VoiceInputSetup.tsx
@@ -1,5 +1,9 @@
 import { useStableCallback } from "~/hooks/useStableCallback";
-import { listBrowserMicrophones, type BrowserMicrophone } from "../../speech/browserMicrophones";
+import {
+  listBrowserMicrophones,
+  updateMicrophoneOrder,
+  type BrowserMicrophone,
+} from "../../speech/browserMicrophones";
 import type {
   EnvironmentId,
   EnvironmentSpeechModel,
@@ -9,7 +13,12 @@ import { useNavigate } from "@tanstack/react-router";
 import { CircleAlertIcon, MicIcon, RefreshCwIcon } from "lucide-react";
 import { useEffect, useState } from "react";
 
-import { useClientSettings, updateClientSettings } from "../../hooks/useSettings";
+import { useClientSettings } from "../../hooks/useSettings";
+import {
+  microphoneOrder,
+  preferMicrophone,
+  preferredMicrophoneId,
+} from "../../speech/microphoneOrder";
 import { useEnvironment } from "../../state/environments";
 import { AuthSettingsWriteScope } from "@t3tools/contracts";
 import { useEnvironmentScope } from "../../state/session";
@@ -38,8 +47,9 @@ export function VoiceInputSetup(props: {
   const navigate = useNavigate();
   const environment = useEnvironment(props.environmentId);
   const canManage = useEnvironmentScope(props.environmentId, AuthSettingsWriteScope);
-  const selectedMicrophone = useClientSettings((settings) => settings.voiceMicrophone);
+  const order = useClientSettings(microphoneOrder);
   const [microphones, setMicrophones] = useState<BrowserMicrophone[]>([]);
+  const selectedMicrophone = preferredMicrophoneId(order, microphones);
   const [loadingMicrophones, setLoadingMicrophones] = useState(false);
   const [microphoneError, setMicrophoneError] = useState<string | null>(null);
   const refreshMicrophones = useStableCallback(async () => {
@@ -154,11 +164,18 @@ export function VoiceInputSetup(props: {
                   value={selectedMicrophone ? `device:${selectedMicrophone}` : "system-default"}
                   disabled={loadingMicrophones}
                   onValueChange={(value) => {
-                    if (value)
-                      void updateClientSettings({
-                        voiceMicrophone:
-                          value === "system-default" ? "" : value.slice("device:".length),
-                      });
+                    if (!value) return;
+                    const deviceId = value.slice("device:".length);
+                    const label =
+                      microphones.find((device) => device.deviceId === deviceId)?.label ?? "";
+                    updateMicrophoneOrder((order) =>
+                      preferMicrophone(
+                        order,
+                        value === "system-default"
+                          ? { kind: "default" }
+                          : { kind: "device", deviceId, label },
+                      ),
+                    );
                   }}
                 >
                   <SelectTrigger
diff --git a/apps/web/src/components/settings/MicrophoneOrderList.tsx b/apps/web/src/components/settings/MicrophoneOrderList.tsx
new file mode 100644
index 000000000000..e5bd92755d27
--- /dev/null
+++ b/apps/web/src/components/settings/MicrophoneOrderList.tsx
@@ -0,0 +1,172 @@
+import {
+  DndContext,
+  type DragEndEvent,
+  PointerSensor,
+  closestCenter,
+  useSensor,
+  useSensors,
+} from "@dnd-kit/core";
+import { restrictToParentElement, restrictToVerticalAxis } from "@dnd-kit/modifiers";
+import { SortableContext, useSortable, verticalListSortingStrategy } from "@dnd-kit/sortable";
+import { CSS } from "@dnd-kit/utilities";
+import { ArrowDownIcon, ArrowUpIcon, GripVerticalIcon, XIcon } from "lucide-react";
+
+import { cn } from "~/lib/utils";
+import { type BrowserMicrophone, updateMicrophoneOrder } from "../../speech/browserMicrophones";
+import {
+  type MicrophoneEntry,
+  forgetMicrophone,
+  microphoneEntryKey,
+  moveMicrophone,
+  preferredMicrophone,
+} from "../../speech/microphoneOrder";
+import { Button } from "../ui/button";
+
+/** The saved microphone order. Keyboard users reorder with the step buttons. */
+export function MicrophoneOrderList(props: {
+  readonly order: ReadonlyArray<MicrophoneEntry>;
+  readonly devices: ReadonlyArray<BrowserMicrophone>;
+}) {
+  const { order, devices } = props;
+  const keys = order.map(microphoneEntryKey);
+  const inUse = microphoneEntryKey(preferredMicrophone(order, devices));
+  // Device ids stay hidden until microphone permission, so connection is unknown before it.
+  const devicesKnown = devices.some((device) => device.deviceId);
+  const sensors = useSensors(useSensor(PointerSensor, { activationConstraint: { distance: 4 } }));
+  const move = (key: string, steps: number) =>
+    updateMicrophoneOrder((current) => moveMicrophone(current, key, steps));
+  const handleDragEnd = (event: DragEndEvent) => {
+    if (event.over === null || event.active.id === event.over.id) return;
+    const from = keys.indexOf(String(event.active.id));
+    const to = keys.indexOf(String(event.over.id));
+    if (from !== -1 && to !== -1) move(String(event.active.id), to - from);
+  };
+
+  return (
+    <DndContext
+      sensors={sensors}
+      collisionDetection={closestCenter}
+      modifiers={[restrictToVerticalAxis, restrictToParentElement]}
+      onDragEnd={handleDragEnd}
+    >
+      <SortableContext items={keys} strategy={verticalListSortingStrategy}>
+        <ol
+          aria-label="Microphones, preferred first"
+          className="divide-y divide-border/60 rounded-lg border border-border/60"
+        >
+          {order.map((entry, index) => {
+            const key = microphoneEntryKey(entry);
+            const device =
+              entry.kind === "device"
+                ? devices.find((candidate) => candidate.deviceId === entry.deviceId)
+                : undefined;
+            return (
+              <MicrophoneRow
+                key={key}
+                id={key}
+                name={
+                  entry.kind === "default"
+                    ? "System default"
+                    : entry.label || device?.label || "Saved microphone"
+                }
+                position={index + 1}
+                count={order.length}
+                inUse={key === inUse}
+                notConnected={entry.kind === "device" && devicesKnown && !device}
+                onMove={(steps) => move(key, steps)}
+                onForget={
+                  entry.kind === "device"
+                    ? () => updateMicrophoneOrder((current) => forgetMicrophone(current, key))
+                    : undefined
+                }
+              />
+            );
+          })}
+        </ol>
+      </SortableContext>
+    </DndContext>
+  );
+}
+
+function MicrophoneRow(props: {
+  readonly id: string;
+  readonly name: string;
+  readonly position: number;
+  readonly count: number;
+  readonly inUse: boolean;
+  readonly notConnected: boolean;
+  readonly onMove: (steps: number) => void;
+  readonly onForget: (() => void) | undefined;
+}) {
+  const { name } = props;
+  const { listeners, setNodeRef, setActivatorNodeRef, transform, transition, isDragging } =
+    useSortable({ id: props.id });
+  return (
+    <li
+      ref={setNodeRef}
+      style={{ transform: CSS.Translate.toString(transform), transition }}
+      className={cn(
+        // Phones put the marker and controls on a second line so names stay readable.
+        "grid grid-cols-[1rem_minmax(0,1fr)_auto] items-center gap-x-2 py-1.5 ps-3 pe-1.5 @min-[32rem]/settings-row:grid-cols-[1rem_auto_minmax(0,1fr)_auto_auto]",
+        isDragging && "relative z-10 rounded-lg bg-background shadow-md",
+      )}
+    >
+      <span className="text-xs tabular-nums text-muted-foreground">{props.position}</span>
+      <span className="col-span-2 text-sm leading-5 break-words @min-[32rem]/settings-row:col-span-1">
+        {name}
+      </span>
+      <span className="col-start-2 flex @min-[32rem]/settings-row:col-start-auto">
+        {props.inUse ? (
+          <span className="rounded-sm bg-success/12 px-1 text-2xs text-success-foreground">
+            In use
+          </span>
+        ) : props.notConnected ? (
+          <span className="text-2xs text-muted-foreground">Not connected</span>
+        ) : null}
+      </span>
+      <span
+        ref={setActivatorNodeRef}
+        {...listeners}
+        aria-hidden
+        className="hidden size-6 shrink-0 cursor-grab touch-none items-center justify-center rounded text-muted-foreground/70 hover:text-foreground active:cursor-grabbing @min-[32rem]/settings-row:flex"
+      >
+        <GripVerticalIcon className="size-3.5" />
+      </span>
+      <span className="flex items-center gap-0.5">
+        <Button
+          type="button"
+          size="icon-xs"
+          variant="ghost-muted"
+          disabled={props.position === 1}
+          aria-label={`Move ${name} up`}
+          onClick={() => props.onMove(-1)}
+        >
+          <ArrowUpIcon />
+        </Button>
+        <Button
+          type="button"
+          size="icon-xs"
+          variant="ghost-muted"
+          disabled={props.position === props.count}
+          aria-label={`Move ${name} down`}
+          onClick={() => props.onMove(1)}
+        >
+          <ArrowDownIcon />
+        </Button>
+        {props.onForget ? (
+          <Button
+            type="button"
+            size="icon-xs"
+            variant="ghost-muted"
+            aria-label={`Forget ${name}`}
+            onClick={props.onForget}
+          >
+            <XIcon />
+          </Button>
+        ) : (
+          <span aria-hidden className="size-7 sm:size-6" />
+        )}
+      </span>
+    </li>
+  );
+}
diff --git a/apps/web/src/components/settings/MicrophoneTest.tsx b/apps/web/src/components/settings/MicrophoneTest.tsx
index 4459ca1d8130..280cdc266c2d 100644
--- a/apps/web/src/components/settings/MicrophoneTest.tsx
+++ b/apps/web/src/components/settings/MicrophoneTest.tsx
@@ -29,7 +29,14 @@ type Capture = {
  * device: no environment, transcriber, or provider is involved, so a silent result points
  * at the microphone rather than at transcription.
  */
-export function MicrophoneTest({ microphoneId }: { microphoneId: string }) {
+export function MicrophoneTest({
+  microphoneId,
+  onMicrophoneAccess,
+}: {
+  microphoneId: string;
+  /** Labels and device ids become readable once the browser grants access. */
+  onMicrophoneAccess: () => void;
+}) {
   const [phase, setPhase] = useState<"idle" | "starting" | "recording" | "ready">("idle");
   const [recording, setRecording] = useState<{ url: string; duration: number } | null>(null);
   const [error, setError] = useState<string | null>(null);
@@ -92,6 +99,7 @@ export function MicrophoneTest({ microphoneId }: { microphoneId: string }) {
         return;
       }
       current.stream = stream;
+      onMicrophoneAccess();
       const recorder = new MediaRecorder(stream);
       current.recorder = recorder;
       const chunks: Blob[] = [];
diff --git a/apps/web/src/components/settings/VoiceSettingsPanel.browser.test.tsx b/apps/web/src/components/settings/VoiceSettingsPanel.browser.test.tsx
index 888da736f89a..93187363198d 100644
--- a/apps/web/src/components/settings/VoiceSettingsPanel.browser.test.tsx
+++ b/apps/web/src/components/settings/VoiceSettingsPanel.browser.test.tsx
@@ -14,6 +14,7 @@ import { expect, it, vi } from "vite-plus/test";
 import { userEvent } from "vite-plus/test/browser";
 import { render } from "../../../test/render";
 import { __setClientSettingsForTests, getClientSettings } from "../../hooks/useSettings";
+import { chooseRecordingMicrophone } from "../../speech/browserMicrophones";
 import {
   useEnvironmentSpeechInput,
   useVoiceTranscriptionDestination,
@@ -597,3 +598,50 @@ it("keeps punctuation in a saved dictionary term and its alias", async () => {
     { term: "O'Reilly", aliases: ['"Oh Really"'] },
   ]);
 });
+
+it("records from the first connected microphone in the saved order", async () => {
+  const previous = getClientSettings();
+  using cleanup = new DisposableStack();
+  cleanup.defer(() => __setClientSettingsForTests(previous));
+  // A single saved microphone from before the order existed comes first.
+  __setClientSettingsForTests({ ...previous, voiceMicrophone: "yeti", voiceMicrophones: [] });
+  const input = (deviceId: string, label: string) =>
+    ({ deviceId, label, groupId: deviceId, kind: "audioinput" }) as MediaDeviceInfo;
+  const yeti = input("yeti", "Blue Yeti");
+  const airpods = input("airpods", "AirPods Pro");
+  using devices = vi
+    .spyOn(navigator.mediaDevices, "enumerateDevices")
+    .mockResolvedValue([yeti, airpods]);
+  const saved = () =>
+    getClientSettings().voiceMicrophones.map((entry) =>
+      entry.kind === "default" ? "System default" : entry.label,
+    );
+  await using screen = await render(
+    <SettingsScopeProvider search={{}} onChange={() => {}}>
+      <VoiceSettingsPanel />
+    </SettingsScopeProvider>,
+  );
+  const list = screen.getByRole("list", { name: "Microphones, preferred first" });
+  await expect.poll(saved).toEqual(["Blue Yeti", "System default", "AirPods Pro"]);
+  const row = (index: number) => list.getByRole("listitem").nth(index);
+  await expect.element(row(0)).toHaveTextContent("1Blue YetiIn use");
+  expect(await chooseRecordingMicrophone()).toBe("yeti");
+
+  devices.mockResolvedValue([airpods]);
+  await userEvent.click(screen.getByRole("button", { name: "Refresh microphones" }));
+  await expect.element(row(0)).toHaveTextContent("1Blue YetiNot connected");
+  await expect.element(row(1)).toHaveTextContent("2System defaultIn use");
+  expect(await chooseRecordingMicrophone()).toBe("");
+
+  await userEvent.click(screen.getByRole("button", { name: "Move AirPods Pro up" }));
+  await userEvent.click(screen.getByRole("button", { name: "Move AirPods Pro up" }));
+  expect(saved()).toEqual(["AirPods Pro", "Blue Yeti", "System default"]);
+  await expect.element(screen.getByRole("button", { name: "Move AirPods Pro up" })).toBeDisabled();
+  expect(await chooseRecordingMicrophone()).toBe("airpods");
+
+  await userEvent.click(screen.getByRole("button", { name: "Forget Blue Yeti" }));
+  expect(saved()).toEqual(["AirPods Pro", "System default"]);
+  await expect
+    .element(screen.getByRole("button", { name: "Forget System default" }))
+    .not.toBeInTheDocument();
+});
diff --git a/apps/web/src/components/settings/VoiceSettingsPanel.tsx b/apps/web/src/components/settings/VoiceSettingsPanel.tsx
index 3487ee4c0ab6..1a158efb3bb3 100644
--- a/apps/web/src/components/settings/VoiceSettingsPanel.tsx
+++ b/apps/web/src/components/settings/VoiceSettingsPanel.tsx
@@ -53,7 +53,16 @@ import { useEffect, useRef, useState, type ReactNode } from "react";
 
 import { useStableCallback } from "~/hooks/useStableCallback";
 import { cn } from "~/lib/utils";
-import { listBrowserMicrophones, type BrowserMicrophone } from "../../speech/browserMicrophones";
+import {
+  listAudioInputs,
+  updateMicrophoneOrder,
+  type BrowserMicrophone,
+} from "../../speech/browserMicrophones";
+import {
+  microphoneOrder,
+  preferredMicrophoneId,
+  rememberMicrophones,
+} from "../../speech/microphoneOrder";
 import { preferredSpeechLanguages } from "../../speech/preferredSpeechLanguages";
 import {
   chooseAudioDestination,
@@ -110,6 +119,7 @@ import {
 import { Switch } from "../ui/switch";
 import { Textarea } from "../ui/textarea";
 import { toastManager } from "../ui/toast";
+import { MicrophoneOrderList } from "./MicrophoneOrderList";
 import { MicrophoneTest } from "./MicrophoneTest";
 import { CloudVoiceConfiguration } from "./CloudVoiceConfiguration";
 import { ModelBenchmarks, orderSpeechLanguages } from "./SpeechModelComparison";
@@ -140,7 +150,6 @@ function CloudSpeechLogo({ provider }: { provider: CloudSpeechProvider }) {
     />
   );
 }
-const SYSTEM_DEFAULT = "system-default";
 const formatSize = (bytes: number) => `${Math.round(bytes / 1024 / 1024)} MB`;
 const SHORTCUT_MODES: Record<VoiceShortcutMode, { label: string; hint: string }> = {
   auto: { label: "Auto", hint: "Tap to toggle, hold to talk" },
@@ -1196,7 +1205,9 @@ export function VoiceSettingsPanel() {
   const refreshMicrophones = useStableCallback(async () => {
     if (!navigator.mediaDevices?.enumerateDevices) return;
     try {
-      setMicrophones(await listBrowserMicrophones());
+      const devices = await listAudioInputs();
+      setMicrophones(devices);
+      updateMicrophoneOrder((order) => rememberMicrophones(order, devices));
     } catch {
       setMicrophones([]);
     }
@@ -1218,11 +1229,8 @@ export function VoiceSettingsPanel() {
       (member) => member.environmentId === target?.environmentId && member.id === target.projectId,
     ) ?? members?.[0];
 
-  const selectedMicrophone = settings.voiceMicrophone;
-  const selectedMicrophoneLabel = selectedMicrophone
-    ? (microphones.find((device) => device.deviceId === selectedMicrophone)?.label ??
-      "Selected microphone (unavailable)")
-    : "System default";
+  const order = microphoneOrder(settings);
+  const selectedMicrophone = preferredMicrophoneId(order, microphones);
   const environmentChoices = environments.map((environment) => ({
     environment,
     value: JSON.stringify(["environment", environment.environmentId]),
@@ -1281,55 +1289,35 @@ export function VoiceSettingsPanel() {
         <SettingsRow
           {...searchableSetting("voice-microphone")}
           title="Microphone"
-          description="System default follows your operating system."
+          description="Voice input uses the first connected microphone in this list."
           control={
-            <div className="flex w-full min-w-0 items-center gap-1.5 @min-[32rem]/settings-row:w-auto">
-              <Select
-                value={selectedMicrophone ? `device:${selectedMicrophone}` : SYSTEM_DEFAULT}
-                onValueChange={(value) => {
-                  if (value)
-                    void updateClientSettings({
-                      voiceMicrophone:
-                        value === SYSTEM_DEFAULT ? "" : value.slice("device:".length),
-                    });
-                }}
-              >
-                <SelectTrigger
-                  size="sm"
-                  aria-label="Microphone"
-                  className="@min-[32rem]/settings-row:max-w-56"
-                >
-                  <SelectValue>{selectedMicrophoneLabel}</SelectValue>
-                </SelectTrigger>
-                <SelectPopup align="end" alignItemWithTrigger={false}>
-                  <SelectItem value={SYSTEM_DEFAULT}>System default</SelectItem>
-                  {microphones.map((device) => (
-                    <SelectItem key={device.deviceId} value={`device:${device.deviceId}`}>
-                      {device.label}
-                    </SelectItem>
-                  ))}
-                </SelectPopup>
-              </Select>
-              <Tooltip>
-                <TooltipTrigger
-                  render={
-                    <Button
-                      type="button"
-                      variant="outline"
-                      size="icon-sm"
-                      aria-label="Refresh microphones"
-                      onClick={() => void refreshMicrophones()}
-                    >
-                      <RefreshCwIcon />
-                    </Button>
-                  }
-                />
-                <TooltipPopup>Refresh microphones</TooltipPopup>
-              </Tooltip>
-            </div>
+            <Tooltip>
+              <TooltipTrigger
+                render={
+                  <Button
+                    type="button"
+                    variant="outline"
+                    size="icon-sm"
+                    aria-label="Refresh microphones"
+                    onClick={() => void refreshMicrophones()}
+                  >
+                    <RefreshCwIcon />
+                  </Button>
+                }
+              />
+              <TooltipPopup>Refresh microphones</TooltipPopup>
+            </Tooltip>
           }
+        >
+          <div className="mt-3 pb-2">
+            <MicrophoneOrderList order={order} devices={microphones} />
+          </div>
+        </SettingsRow>
+        <MicrophoneTest
+          key={selectedMicrophone}
+          microphoneId={selectedMicrophone}
+          onMicrophoneAccess={() => void refreshMicrophones()}
         />
-        <MicrophoneTest key={selectedMicrophone} microphoneId={selectedMicrophone} />
         <SettingsRow
           {...searchableSetting("dictation-shortcut-mode")}
           title="Dictation shortcut"
diff --git a/apps/web/src/components/settings/settingsSearch.ts b/apps/web/src/components/settings/settingsSearch.ts
index 4f61ba41c0d8..8d4a273023fa 100644
--- a/apps/web/src/components/settings/settingsSearch.ts
+++ b/apps/web/src/components/settings/settingsSearch.ts
@@ -539,7 +539,7 @@ export const SETTINGS_SEARCH_ITEMS = [
     id: "voice-microphone",
     title: "Microphone",
     to: "/settings/voice",
-    searchTerms: ["mic input audio device"],
+    searchTerms: ["mic input audio device order priority preferred"],
   },
   {
     id: "dictation-shortcut-mode",
diff --git a/apps/web/src/speech/browserMicrophones.ts b/apps/web/src/speech/browserMicrophones.ts
index f690c4fcd5fb..8c9f7e8ede43 100644
--- a/apps/web/src/speech/browserMicrophones.ts
+++ b/apps/web/src/speech/browserMicrophones.ts
@@ -1,11 +1,49 @@
+import {
+  getClientSettings,
+  isClientSettingsHydrated,
+  updateClientSettings,
+} from "../hooks/useSettings";
+import {
+  type MicrophoneEntry,
+  microphoneOrder,
+  preferredMicrophoneId,
+  rememberMicrophones,
+} from "./microphoneOrder";
+
 export type BrowserMicrophone = Pick<MediaDeviceInfo, "deviceId" | "label">;
 
-export async function listBrowserMicrophones(): Promise<BrowserMicrophone[]> {
+/** Audio inputs as the browser reports them. Labels stay empty until microphone permission. */
+export async function listAudioInputs(): Promise<BrowserMicrophone[]> {
   const devices = await navigator.mediaDevices.enumerateDevices();
   return devices
     .filter((device) => device.kind === "audioinput")
-    .map(({ deviceId, label }, index) => ({
-      deviceId,
-      label: label || `Microphone ${index + 1}`,
-    }));
+    .map(({ deviceId, label }) => ({ deviceId, label }));
+}
+
+export async function listBrowserMicrophones(): Promise<BrowserMicrophone[]> {
+  return (await listAudioInputs()).map(({ deviceId, label }, index) => ({
+    deviceId,
+    label: label || `Microphone ${index + 1}`,
+  }));
+}
+
+/** Applies a change to the saved order. Skipped before hydration so defaults never replace a saved order. */
+export function updateMicrophoneOrder(
+  change: (order: ReadonlyArray<MicrophoneEntry>) => ReadonlyArray<MicrophoneEntry>,
+): ReadonlyArray<MicrophoneEntry> {
+  const known = microphoneOrder(getClientSettings());
+  if (!isClientSettingsHydrated()) return known;
+  const next = change(known);
+  if (next !== known) void updateClientSettings({ voiceMicrophones: [...next] });
+  return next;
+}
+
+/** Remembers newly seen microphones and returns the device id to record from, empty for System default. */
+export async function chooseRecordingMicrophone(): Promise<string> {
+  // Rejects where the browser has no media devices, such as plain HTTP.
+  const devices = await listAudioInputs().catch(() => []);
+  return preferredMicrophoneId(
+    updateMicrophoneOrder((order) => rememberMicrophones(order, devices)),
+    devices,
+  );
 }
diff --git a/apps/web/src/speech/browserPcmCapture.browser.test.ts b/apps/web/src/speech/browserPcmCapture.browser.test.ts
index 892f6d640691..19dd8397b091 100644
--- a/apps/web/src/speech/browserPcmCapture.browser.test.ts
+++ b/apps/web/src/speech/browserPcmCapture.browser.test.ts
@@ -1,21 +1,30 @@
 import { expect, it, vi } from "vite-plus/test";
 import { createBrowserPcmCapture } from "./browserPcmCapture";
 
-it("cancels an unanswered permission prompt and stops a late microphone stream", async () => {
+it("records from the chosen microphone, cancels an unanswered prompt, and stops a late stream", async () => {
   let grantPermission!: (media: MediaStream) => void;
   const permission = new Promise<MediaStream>((resolve) => {
     grantPermission = resolve;
   });
   using microphone = vi.spyOn(navigator.mediaDevices, "getUserMedia").mockReturnValue(permission);
   const capture = createBrowserPcmCapture(
-    { getMicrophoneId: () => "", onLevel: vi.fn(), onDurationLimit: vi.fn(), onError: vi.fn() },
+    {
+      getMicrophoneId: async () => "blue-yeti",
+      onLevel: vi.fn(),
+      onDurationLimit: vi.fn(),
+      onError: vi.fn(),
+    },
     async () => ({ locale: "en", transcribe: async () => "" }),
   );
   const abort = new AbortController();
   await capture.transcriber.prepare({ signal: abort.signal });
   const rejected = vi.fn();
   const preparing = capture.recorder.prepareToRecordAsync(abort.signal).catch(rejected);
-  expect(microphone).toHaveBeenCalledOnce();
+  await vi.waitFor(() =>
+    expect(microphone).toHaveBeenCalledExactlyOnceWith({
+      audio: { deviceId: { exact: "blue-yeti" } },
+    }),
+  );
   abort.abort();
   const stop = vi.fn();
   try {
diff --git a/apps/web/src/speech/browserPcmCapture.ts b/apps/web/src/speech/browserPcmCapture.ts
index f38d616d9544..d9cf20e60010 100644
--- a/apps/web/src/speech/browserPcmCapture.ts
+++ b/apps/web/src/speech/browserPcmCapture.ts
@@ -12,7 +12,7 @@ type PreparedBrowserTranscription = PreparedVoiceTranscription & {
 
 export function createBrowserPcmCapture(
   input: {
-    readonly getMicrophoneId: () => string;
+    readonly getMicrophoneId: () => string | Promise<string>;
     readonly onLevel: (level: number) => void;
     readonly onDurationLimit: () => void;
     readonly onError: (message: string) => void;
@@ -59,7 +59,8 @@ export function createBrowserPcmCapture(
       if (recordingUri) URL.revokeObjectURL(recordingUri);
       recordingUri = null;
       chunks = [];
-      const microphoneId = input.getMicrophoneId();
+      const microphoneId = await input.getMicrophoneId();
+      captureSignal.throwIfAborted();
       const captured = await new Promise<MediaStream>((resolve, reject) => {
         const onAbort = () => reject(captureSignal.reason);
         const permission = navigator.mediaDevices.getUserMedia({
diff --git a/apps/web/src/speech/browserVoiceInput.ts b/apps/web/src/speech/browserVoiceInput.ts
index 345ebf78f2bb..e6d164db59f3 100644
--- a/apps/web/src/speech/browserVoiceInput.ts
+++ b/apps/web/src/speech/browserVoiceInput.ts
@@ -27,7 +27,7 @@ export function createBrowserVoiceInputPlatform(input: {
   readonly cloudModel?: CloudSpeechModelId | undefined;
   readonly hasAudioConsent: () => boolean;
   readonly getTranscriptionOptions: () => SpeechTranscriptionOptions;
-  readonly getMicrophoneId: () => string;
+  readonly getMicrophoneId: () => string | Promise<string>;
   readonly onLevel: (level: number) => void;
   readonly onDurationLimit: () => void;
   readonly onText: (text: SpeechStreamText) => void;
diff --git a/apps/web/src/speech/microphoneOrder.ts b/apps/web/src/speech/microphoneOrder.ts
new file mode 100644
index 000000000000..33fafa4c5296
--- /dev/null
+++ b/apps/web/src/speech/microphoneOrder.ts
@@ -0,0 +1,123 @@
+import type { ClientSettings, VoiceMicrophoneEntry } from "@t3tools/contracts";
+
+import type { BrowserMicrophone } from "./browserMicrophones";
+
+export type MicrophoneEntry = VoiceMicrophoneEntry;
+
+const SYSTEM_DEFAULT: MicrophoneEntry = { kind: "default" };
+
+// Chromium lists the current default and Windows communications device under these ids too.
+const ALIAS_DEVICE_IDS = new Set(["", "default", "communications"]);
+
+export function microphoneEntryKey(entry: MicrophoneEntry): string {
+  return entry.kind === "default" ? "default" : `device:${entry.deviceId}`;
+}
+
+/** The saved order with exactly one System default row; an empty order starts from the legacy choice. */
+export function microphoneOrder(
+  settings: Pick<ClientSettings, "voiceMicrophones" | "voiceMicrophone">,
+): ReadonlyArray<MicrophoneEntry> {
+  if (settings.voiceMicrophones.length === 0) {
+    return settings.voiceMicrophone
+      ? [{ kind: "device", deviceId: settings.voiceMicrophone, label: "" }, SYSTEM_DEFAULT]
+      : [SYSTEM_DEFAULT];
+  }
+  const keys = new Set<string>();
+  const order = settings.voiceMicrophones.filter((entry) => {
+    const key = microphoneEntryKey(entry);
+    if (keys.has(key)) return false;
+    keys.add(key);
+    return true;
+  });
+  return keys.has("default") ? order : [...order, SYSTEM_DEFAULT];
+}
+
+/** Adds labelled devices seen for the first time directly below System default and refreshes labels. */
+export function rememberMicrophones(
+  order: ReadonlyArray<MicrophoneEntry>,
+  devices: ReadonlyArray<BrowserMicrophone>,
+): ReadonlyArray<MicrophoneEntry> {
+  let next: MicrophoneEntry[] | null = null;
+  let insertAt = order.findIndex((entry) => entry.kind === "default") + 1;
+  for (const device of devices) {
+    if (!device.label || ALIAS_DEVICE_IDS.has(device.deviceId)) continue;
+    const current: ReadonlyArray<MicrophoneEntry> = next ?? order;
+    const index = current.findIndex(
+      (entry) => entry.kind === "device" && entry.deviceId === device.deviceId,
+    );
+    const existing = current[index];
+    if (existing?.kind === "device" && existing.label === device.label) continue;
+    next ??= [...order];
+    const entry: MicrophoneEntry = {
+      kind: "device",
+      deviceId: device.deviceId,
+      label: device.label,
+    };
+    if (index !== -1) {
+      next[index] = entry;
+      continue;
+    }
+    next.splice(insertAt, 0, entry);
+    insertAt += 1;
+  }
+  return next ?? order;
+}
+
+/**
+ * The first entry that is connected right now. System default always is. Before microphone
+ * permission the browser hides device ids, so the first entry is used as it was saved.
+ */
+export function preferredMicrophone(
+  order: ReadonlyArray<MicrophoneEntry>,
+  devices: ReadonlyArray<BrowserMicrophone>,
+): MicrophoneEntry {
+  if (devices.every((device) => !device.deviceId)) return order[0] ?? SYSTEM_DEFAULT;
+  return (
+    order.find(
+      (entry) =>
+        entry.kind === "default" || devices.some((device) => device.deviceId === entry.deviceId),
+    ) ?? SYSTEM_DEFAULT
+  );
+}
+
+/** The `deviceId` to record from, or an empty string for System default. */
+export function preferredMicrophoneId(
+  order: ReadonlyArray<MicrophoneEntry>,
+  devices: ReadonlyArray<BrowserMicrophone>,
+): string {
+  const entry = preferredMicrophone(order, devices);
+  return entry.kind === "device" ? entry.deviceId : "";
+}
+
+export function moveMicrophone(
+  order: ReadonlyArray<MicrophoneEntry>,
+  key: string,
+  steps: number,
+): ReadonlyArray<MicrophoneEntry> {
+  const from = order.findIndex((entry) => microphoneEntryKey(entry) === key);
+  const to = Math.max(0, Math.min(order.length - 1, from + steps));
+  if (from === -1 || from === to) return order;
+  const next = [...order];
+  const [entry] = next.splice(from, 1);
+  if (!entry) return order;
+  next.splice(to, 0, entry);
+  return next;
+}
+
+/** Moves an entry to the top, adding it when it is not listed yet. */
+export function preferMicrophone(
+  order: ReadonlyArray<MicrophoneEntry>,
+  entry: MicrophoneEntry,
+): ReadonlyArray<MicrophoneEntry> {
+  const key = microphoneEntryKey(entry);
+  const existing = order.find((candidate) => microphoneEntryKey(candidate) === key);
+  return [existing ?? entry, ...order.filter((candidate) => microphoneEntryKey(candidate) !== key)];
+}
+
+/** Removes a named microphone. System default stays. */
+export function forgetMicrophone(
+  order: ReadonlyArray<MicrophoneEntry>,
+  key: string,
+): ReadonlyArray<MicrophoneEntry> {
+  return key === "default" ? order : order.filter((entry) => microphoneEntryKey(entry) !== key);
+}
diff --git a/apps/web/src/speech/useEnvironmentSpeechInput.browser.test.tsx b/apps/web/src/speech/useEnvironmentSpeechInput.browser.test.tsx
index 17c131202294..d1f3c36d00f2 100644
--- a/apps/web/src/speech/useEnvironmentSpeechInput.browser.test.tsx
+++ b/apps/web/src/speech/useEnvironmentSpeechInput.browser.test.tsx
@@ -91,6 +91,8 @@ vi.mock("../state/environments", () => ({
 }));
 vi.mock("../hooks/useSettings", () => ({
   updateClientSettings: vi.fn(),
+  getClientSettings: () => ({ ...DEFAULT_CLIENT_SETTINGS, ...mocks.settings }),
+  isClientSettingsHydrated: () => true,
   useClientSettingsHydrated: () => true,
   useClientSettings: (selector?: (settings: Record<string, unknown>) => unknown) => {
     const settings = { ...DEFAULT_CLIENT_SETTINGS, ...mocks.settings };
diff --git a/apps/web/src/speech/useEnvironmentSpeechInput.ts b/apps/web/src/speech/useEnvironmentSpeechInput.ts
index c569c14500be..26a6835c3104 100644
--- a/apps/web/src/speech/useEnvironmentSpeechInput.ts
+++ b/apps/web/src/speech/useEnvironmentSpeechInput.ts
@@ -37,6 +37,7 @@ import {
 } from "../hooks/useSettings";
 import { useEnvironment } from "../state/environments";
 import { useEnvironmentScope, usePreparedConnection } from "../state/session";
+import { chooseRecordingMicrophone } from "./browserMicrophones";
 import { createBrowserVoiceInputPlatform } from "./browserVoiceInput";
 import { preferredSpeechLanguages } from "./preferredSpeechLanguages";
 import { runEnvironmentSpeech } from "./runEnvironmentSpeech";
@@ -296,7 +297,7 @@ export function useEnvironmentSpeechInput(input: HookInput) {
           speechSilenceFiltering: settings.speechSilenceFiltering,
         };
       },
-      getMicrophoneId: () => latestRef.current.clientSettings.voiceMicrophone,
+      getMicrophoneId: chooseRecordingMicrophone,
       onLevel: setLevel,
       onDurationLimit: () => void controller.stop(),
       onText: (text) => {
diff --git a/docs/user/voice-input.md b/docs/user/voice-input.md
index 0672ae23ea23..95ea15d707d0 100644
--- a/docs/user/voice-input.md
+++ b/docs/user/voice-input.md
@@ -142,12 +142,15 @@ the model hears the cue as a dictionary hint.
 
 ## Test and troubleshoot
 
-In **Settings → Voice**, **Test microphone** beside the microphone selector
-records up to ten seconds and plays it back in your browser;
-the audio stays on this device and is never transcribed, so silent playback
+In **Settings → Voice**, voice input uses the first connected microphone in the
+**Microphone** list. A microphone joins the list below System default the first
+time it is seen, so nothing changes until you move it up. If a preferred
+microphone is unplugged, the next connected one is used.
+
+**Test microphone** records from that microphone for up to ten seconds and
+plays it back in your browser; the audio stays on this device and is never transcribed, so silent playback
 points at the microphone. **Test model** on the selected model shows a transcript using the
 same environment, language, and dictionary as the composer, but skips transcript
 cleanup even when it is on, so you see what the model heard. Browser recording
 needs HTTPS or localhost and microphone permission; for a remote server over
-plain HTTP, use the desktop app. If the selected microphone is missing, choose
-another or the system default.
+plain HTTP, use the desktop app.
diff --git a/packages/contracts/src/settings.ts b/packages/contracts/src/settings.ts
index 346213992e4b..c073534c8be7 100644
--- a/packages/contracts/src/settings.ts
+++ b/packages/contracts/src/settings.ts
@@ -370,6 +370,12 @@ export type ModelPreferences = {
 export const VoiceShortcutMode = Schema.Literals(["auto", "hold", "toggle"]);
 export type VoiceShortcutMode = typeof VoiceShortcutMode.Type;
 
+export const VoiceMicrophoneEntry = Schema.Union([
+  Schema.Struct({ kind: Schema.Literal("default") }),
+  Schema.Struct({ kind: Schema.Literal("device"), deviceId: Schema.String, label: Schema.String }),
+]);
+export type VoiceMicrophoneEntry = typeof VoiceMicrophoneEntry.Type;
+
 /**
  * Where this device sends microphone audio. A cloud grant names the forwarding environment and
  * the provider; an OpenRouter grant also names the exact model, since OpenRouter has no default.
@@ -548,8 +554,12 @@ export const ClientSettingsSchema = Schema.Struct({
   timestampFormat: TimestampFormat.pipe(
     Schema.withDecodingDefault(Effect.succeed(DEFAULT_TIMESTAMP_FORMAT)),
   ),
-  // Device-local input device id. An empty string follows the operating system default.
+  // Superseded by voiceMicrophones; read only to seed an empty order.
   voiceMicrophone: Schema.String.pipe(Schema.withDecodingDefault(Effect.succeed(""))),
+  // Device-local microphone order. Recording uses the first connected entry.
+  voiceMicrophones: Schema.Array(VoiceMicrophoneEntry).pipe(
+    Schema.withDecodingDefault(Effect.succeed([])),
+  ),
   voiceShortcutMode: VoiceShortcutMode.pipe(Schema.withDecodingDefault(Effect.succeed("auto"))),
   speechLanguage: SpeechLanguage.pipe(Schema.withDecodingDefault(Effect.succeed("auto"))),
   speechTranslateToEnglish: Schema.Boolean.pipe(Schema.withDecodingDefault(Effect.succeed(false))),
@@ -2048,6 +2058,7 @@ export const ClientSettingsPatch = Schema.Struct({
   sidebarThreadSortOrder: Schema.optionalKey(SidebarThreadSortOrder),
   timestampFormat: Schema.optionalKey(TimestampFormat),
   voiceMicrophone: Schema.optionalKey(Schema.String),
+  voiceMicrophones: Schema.optionalKey(Schema.Array(VoiceMicrophoneEntry)),
   voiceShortcutMode: Schema.optionalKey(VoiceShortcutMode),
   speechLanguage: Schema.optionalKey(SpeechLanguage),
   speechTranslateToEnglish: Schema.optionalKey(Schema.Boolean),

From 47812a2e826c43440063d3279586a4c7304f045f Mon Sep 17 00:00:00 2001
From: maria-rcks <maria@kuuro.net>
Date: Wed, 11 Nov 2026 23:53:19 +0000
Subject: [PATCH 9/9] fix(web): a missing saved microphone falls back to the
 system default

Opening a saved microphone the browser can no longer find now retries with
the system default, which covers the case where device ids are hidden before
permission. The cleanup description names the draft text it sends. Send keeps
its compaction label while the chip is hidden during phone dictation, and the
setup picker never saves an alias or id-less input as a named row.
---
 apps/web/src/components/chat/ChatComposer.tsx |  5 ++---
 .../chat/ComposerFooterControls.tsx           |  2 ++
 .../chat/ComposerPrimaryActions.tsx           |  4 +++-
 .../src/components/chat/VoiceInputSetup.tsx   |  3 ++-
 .../components/settings/MicrophoneTest.tsx    |  5 ++---
 .../settings/VoiceSettingsPanel.tsx           |  2 +-
 .../speech/browserPcmCapture.browser.test.ts  | 19 +++++++++++++++++--
 apps/web/src/speech/browserPcmCapture.ts      | 18 +++++++++++++++---
 apps/web/src/speech/microphoneOrder.ts        |  5 +++++
 9 files changed, 49 insertions(+), 14 deletions(-)

diff --git a/apps/web/src/components/chat/ChatComposer.tsx b/apps/web/src/components/chat/ChatComposer.tsx
index f488c62e7375..8a1c87932957 100644
--- a/apps/web/src/components/chat/ChatComposer.tsx
+++ b/apps/web/src/components/chat/ChatComposer.tsx
@@ -3643,9 +3643,8 @@ export const ChatComposer = memo(function ChatComposer(props: ChatComposerProps)
                     onResume={onResume}
                     onPreviousPendingQuestion={onPreviousActivePendingUserInputQuestion}
                     onInterrupt={handleInterruptPrimaryActionStable}
-                    compactBeforeSendTokens={
-                      dictationTakesFooter ? null : props.resumeCompactionTokens
-                    }
+                    compactBeforeSendTokens={props.resumeCompactionTokens}
+                    hideCompactToggle={dictationTakesFooter}
                     keepFullHistory={props.keepFullHistory}
                     onToggleKeepFullHistory={props.onToggleKeepFullHistory}
                   >
diff --git a/apps/web/src/components/chat/ComposerFooterControls.tsx b/apps/web/src/components/chat/ComposerFooterControls.tsx
index 3f753daed599..ff8ea79ebd31 100644
--- a/apps/web/src/components/chat/ComposerFooterControls.tsx
+++ b/apps/web/src/components/chat/ComposerFooterControls.tsx
@@ -216,6 +216,7 @@ export const ComposerFooterPrimaryActions = memo(function ComposerFooterPrimaryA
   onPreviousPendingQuestion: () => void;
   onInterrupt: () => void;
   compactBeforeSendTokens: number | null;
+  hideCompactToggle: boolean;
   keepFullHistory: boolean;
   onToggleKeepFullHistory: () => void;
 }) {
@@ -245,6 +246,7 @@ export const ComposerFooterPrimaryActions = memo(function ComposerFooterPrimaryA
         onPreviousPendingQuestion={props.onPreviousPendingQuestion}
         onInterrupt={props.onInterrupt}
         compactBeforeSendTokens={props.compactBeforeSendTokens}
+        hideCompactToggle={props.hideCompactToggle}
         keepFullHistory={props.keepFullHistory}
         onToggleKeepFullHistory={props.onToggleKeepFullHistory}
       >
diff --git a/apps/web/src/components/chat/ComposerPrimaryActions.tsx b/apps/web/src/components/chat/ComposerPrimaryActions.tsx
index 8e28cc1dd6af..695ddb0983b9 100644
--- a/apps/web/src/components/chat/ComposerPrimaryActions.tsx
+++ b/apps/web/src/components/chat/ComposerPrimaryActions.tsx
@@ -62,6 +62,7 @@ interface ComposerPrimaryActionsProps {
   onPreviousPendingQuestion: () => void;
   onInterrupt: () => void;
   compactBeforeSendTokens?: number | null;
+  hideCompactToggle?: boolean;
   keepFullHistory?: boolean;
   onToggleKeepFullHistory?: () => void;
 }
@@ -118,6 +119,7 @@ export const ComposerPrimaryActions = memo(function ComposerPrimaryActions({
   onPreviousPendingQuestion,
   onInterrupt,
   compactBeforeSendTokens = null,
+  hideCompactToggle = false,
   keepFullHistory = false,
   onToggleKeepFullHistory,
 }: ComposerPrimaryActionsProps) {
@@ -356,7 +358,7 @@ export const ComposerPrimaryActions = memo(function ComposerPrimaryActions({
       <TooltipPopup>{submitTooltip}</TooltipPopup>
     </Tooltip>
   );
-  if (compactTokens === null) {
+  if (compactTokens === null || hideCompactToggle) {
     return withStopButton(
       <>
         {children}
diff --git a/apps/web/src/components/chat/VoiceInputSetup.tsx b/apps/web/src/components/chat/VoiceInputSetup.tsx
index e1f74b68376c..1d490bc3f995 100644
--- a/apps/web/src/components/chat/VoiceInputSetup.tsx
+++ b/apps/web/src/components/chat/VoiceInputSetup.tsx
@@ -15,6 +15,7 @@ import { useEffect, useState } from "react";
 
 import { useClientSettings } from "../../hooks/useSettings";
 import {
+  isSystemDefaultDeviceId,
   microphoneOrder,
   preferMicrophone,
   preferredMicrophoneId,
@@ -171,7 +172,7 @@ export function VoiceInputSetup(props: {
                     updateMicrophoneOrder((order) =>
                       preferMicrophone(
                         order,
-                        value === "system-default"
+                        value === "system-default" || isSystemDefaultDeviceId(deviceId)
                           ? { kind: "default" }
                           : { kind: "device", deviceId, label },
                       ),
diff --git a/apps/web/src/components/settings/MicrophoneTest.tsx b/apps/web/src/components/settings/MicrophoneTest.tsx
index 280cdc266c2d..4ee12fe119ff 100644
--- a/apps/web/src/components/settings/MicrophoneTest.tsx
+++ b/apps/web/src/components/settings/MicrophoneTest.tsx
@@ -3,6 +3,7 @@ import { MicIcon, PauseIcon, PlayIcon, RotateCcwIcon, SquareIcon, XIcon } from "
 import { useEffect, useRef, useState } from "react";
 
 import { useStableCallback } from "~/hooks/useStableCallback";
+import { openMicrophone } from "../../speech/browserPcmCapture";
 import workletUrl from "../../speech/pcmWorklet.ts?worker&url";
 import { VoiceWaveform } from "../chat/VoiceInputPill";
 import { cn } from "../../lib/utils";
@@ -91,9 +92,7 @@ export function MicrophoneTest({
     const current: Capture = {};
     capture.current = current;
     try {
-      const stream = await navigator.mediaDevices.getUserMedia({
-        audio: microphoneId ? { deviceId: { exact: microphoneId } } : true,
-      });
+      const stream = await openMicrophone(microphoneId);
       if (capture.current !== current) {
         stream.getTracks().forEach((track) => track.stop());
         return;
diff --git a/apps/web/src/components/settings/VoiceSettingsPanel.tsx b/apps/web/src/components/settings/VoiceSettingsPanel.tsx
index 1a158efb3bb3..cfddfce72d15 100644
--- a/apps/web/src/components/settings/VoiceSettingsPanel.tsx
+++ b/apps/web/src/components/settings/VoiceSettingsPanel.tsx
@@ -1602,7 +1602,7 @@ export function VoiceSettingsPanel() {
       <SettingsSection id={searchableSetting("speech-post-processing").id} title="Cleanup">
         <SettingsRow
           title="Clean up transcripts"
-          description="Off by default. Sends transcript text, never audio, to the cleanup model to fix punctuation and corrections."
+          description="Off by default. Sends the transcript and nearby draft text, never audio, to the cleanup model."
           control={
             <Switch
               aria-label="Clean up transcripts"
diff --git a/apps/web/src/speech/browserPcmCapture.browser.test.ts b/apps/web/src/speech/browserPcmCapture.browser.test.ts
index 19dd8397b091..8c59e40d4837 100644
--- a/apps/web/src/speech/browserPcmCapture.browser.test.ts
+++ b/apps/web/src/speech/browserPcmCapture.browser.test.ts
@@ -1,5 +1,5 @@
 import { expect, it, vi } from "vite-plus/test";
-import { createBrowserPcmCapture } from "./browserPcmCapture";
+import { createBrowserPcmCapture, openMicrophone } from "./browserPcmCapture";
 
 it("records from the chosen microphone, cancels an unanswered prompt, and stops a late stream", async () => {
   let grantPermission!: (media: MediaStream) => void;
@@ -33,5 +33,20 @@ it("records from the chosen microphone, cancels an unanswered prompt, and stops
     grantPermission({ getTracks: () => [{ stop }] } as unknown as MediaStream);
     await preparing;
   }
-  expect(stop).toHaveBeenCalledOnce();
+  await vi.waitFor(() => expect(stop).toHaveBeenCalledOnce());
+});
+
+it("falls back to the system default when the saved microphone is gone, and reports other failures", async () => {
+  const media = {} as MediaStream;
+  using microphone = vi
+    .spyOn(navigator.mediaDevices, "getUserMedia")
+    .mockRejectedValueOnce(new DOMException("gone", "OverconstrainedError"))
+    .mockResolvedValueOnce(media);
+  await expect(openMicrophone("blue-yeti")).resolves.toBe(media);
+  expect(microphone).toHaveBeenLastCalledWith({ audio: true });
+
+  const denied = new DOMException("denied", "NotAllowedError");
+  microphone.mockRejectedValueOnce(denied);
+  await expect(openMicrophone("blue-yeti")).rejects.toBe(denied);
+  expect(microphone).toHaveBeenCalledTimes(3);
 });
diff --git a/apps/web/src/speech/browserPcmCapture.ts b/apps/web/src/speech/browserPcmCapture.ts
index d9cf20e60010..eafafeb4c202 100644
--- a/apps/web/src/speech/browserPcmCapture.ts
+++ b/apps/web/src/speech/browserPcmCapture.ts
@@ -10,6 +10,20 @@ type PreparedBrowserTranscription = PreparedVoiceTranscription & {
   readonly streaming?: VoiceStreamingSession & { readonly feed: (pcm: Float32Array) => void };
 };
 
+/** Opens a microphone. A saved device the browser can no longer find falls back to System default. */
+export async function openMicrophone(microphoneId: string): Promise<MediaStream> {
+  if (!microphoneId) return navigator.mediaDevices.getUserMedia({ audio: true });
+  try {
+    return await navigator.mediaDevices.getUserMedia({
+      audio: { deviceId: { exact: microphoneId } },
+    });
+  } catch (error) {
+    const name = typeof error === "object" && error !== null && "name" in error ? error.name : "";
+    if (name !== "OverconstrainedError" && name !== "NotFoundError") throw error;
+    return navigator.mediaDevices.getUserMedia({ audio: true });
+  }
+}
+
 export function createBrowserPcmCapture(
   input: {
     readonly getMicrophoneId: () => string | Promise<string>;
@@ -63,9 +77,7 @@ export function createBrowserPcmCapture(
       captureSignal.throwIfAborted();
       const captured = await new Promise<MediaStream>((resolve, reject) => {
         const onAbort = () => reject(captureSignal.reason);
-        const permission = navigator.mediaDevices.getUserMedia({
-          audio: microphoneId ? { deviceId: { exact: microphoneId } } : true,
-        });
+        const permission = openMicrophone(microphoneId);
         captureSignal.addEventListener("abort", onAbort, { once: true });
         void permission.then(
           (media) => {
diff --git a/apps/web/src/speech/microphoneOrder.ts b/apps/web/src/speech/microphoneOrder.ts
index 33fafa4c5296..212811e63d20 100644
--- a/apps/web/src/speech/microphoneOrder.ts
+++ b/apps/web/src/speech/microphoneOrder.ts
@@ -9,6 +9,11 @@ const SYSTEM_DEFAULT: MicrophoneEntry = { kind: "default" };
 // Chromium lists the current default and Windows communications device under these ids too.
 const ALIAS_DEVICE_IDS = new Set(["", "default", "communications"]);
 
+/** True for ids that stand for the system default, including the id-less input shown before permission. */
+export function isSystemDefaultDeviceId(deviceId: string): boolean {
+  return ALIAS_DEVICE_IDS.has(deviceId);
+}
+
 export function microphoneEntryKey(entry: MicrophoneEntry): string {
   return entry.kind === "default" ? "default" : `device:${entry.deviceId}`;
 }