From b3e5f078492af038ae1cceff54bc90954454c7d6 Mon Sep 17 00:00:00 2001
From: Koushik <koushikyemula@gmail.com>
Date: Fri, 6 Nov 2026 16:07:11 +0530
Subject: [PATCH 1/2] fix(web): voice input no longer shifts the composer's
 model controls

Recording now swaps the composer's right-side controls for the voice controls in place, instead of pushing the model picker left. The waveform is 12 compact bars driven by the mic level.
---
 apps/web/src/components/chat/ChatComposer.tsx | 67 +++++++++++--------
 .../components/chat/ComposerSpeechButton.tsx  | 13 ++--
 .../src/components/chat/VoiceInputPill.tsx    | 18 +++--
 .../components/settings/MicrophoneTest.tsx    |  2 +-
 4 files changed, 53 insertions(+), 47 deletions(-)

diff --git a/apps/web/src/components/chat/ChatComposer.tsx b/apps/web/src/components/chat/ChatComposer.tsx
index 69022a93fbeea..a308c953f62ff 100644
--- a/apps/web/src/components/chat/ChatComposer.tsx
+++ b/apps/web/src/components/chat/ChatComposer.tsx
@@ -1879,6 +1879,7 @@ export const ChatComposer = memo(function ChatComposer(props: ChatComposerProps)
     },
   });
   const { blocksSubmission: voiceInputActive, submitAfterDictation } = speechInput;
+  const voiceControlsOpen = speechInput.available && speechInput.state.phase !== "idle";
   const voiceSendDisabledReason =
     sendDisabledReason ?? (speechInput.preparing ? "Preparing voice input" : null);
   const dictationShortcutLabel = useDictationShortcut({
@@ -3612,13 +3613,35 @@ export const ChatComposer = memo(function ChatComposer(props: ChatComposerProps)
                   }
                   className="flex min-w-0 flex-1 flex-nowrap items-center justify-end gap-2"
                 >
-                  <div
-                    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"
-                  >
-                    {composerControls}
+                  <div className="relative flex min-w-0 flex-1 items-center">
+                    <div
+                      ref={attachExpandedComposerControls}
+                      data-chat-composer-controls="footer"
+                      data-chat-composer-footer-controls="true"
+                      className={cn(
+                        "relative flex min-w-0 flex-1 items-center justify-end gap-0.5 transition-[opacity,visibility] duration-150 ease-out",
+                        voiceControlsOpen && "invisible opacity-0",
+                      )}
+                    >
+                      {composerControls}
+                    </div>
+                    {/* Outside the measured controls so the timer's text changes never re-measure them. */}
+                    {voiceControlsOpen ? (
+                      <div className="absolute inset-0 flex items-center justify-end transition-[opacity,translate] duration-200 ease-(--ease-drawer) starting:translate-x-2 starting:opacity-0 motion-reduce:starting:translate-x-0">
+                        <ComposerSpeechRecordingPill
+                          state={speechInput.state}
+                          progress={null}
+                          finishShortcutLabel={dictationShortcutLabel}
+                          cancelShortcutLabel="Esc"
+                          level={speechInput.level}
+                          disabled={dictationDisabled}
+                          onStart={() => void speechInput.start()}
+                          onStop={() => void speechInput.stop()}
+                          onCancel={() => speechInput.cancel()}
+                          onSkipPostProcessing={() => speechInput.skipPostProcessing()}
+                        />
+                      </div>
+                    ) : null}
                   </div>
                   <ComposerFooterPrimaryActions
                     compact={isComposerPrimaryActionsCompact}
@@ -3680,28 +3703,14 @@ export const ChatComposer = memo(function ChatComposer(props: ChatComposerProps)
                       : {})}
                   >
                     {speechInput.available ? (
-                      <>
-                        <ComposerSpeechRecordingPill
-                          state={speechInput.state}
-                          progress={null}
-                          finishShortcutLabel={dictationShortcutLabel}
-                          cancelShortcutLabel="Esc"
-                          level={speechInput.level}
-                          disabled={dictationDisabled}
-                          onStart={() => void speechInput.start()}
-                          onStop={() => void speechInput.stop()}
-                          onCancel={() => speechInput.cancel()}
-                          onSkipPostProcessing={() => speechInput.skipPostProcessing()}
-                        />
-                        <ComposerSpeechButton
-                          state={speechInput.state}
-                          progress={null}
-                          shortcutLabel={dictationShortcutLabel}
-                          disabled={dictationDisabled}
-                          onStart={() => void speechInput.start()}
-                          onCancel={() => speechInput.cancel()}
-                        />
-                      </>
+                      <ComposerSpeechButton
+                        state={speechInput.state}
+                        progress={null}
+                        shortcutLabel={dictationShortcutLabel}
+                        disabled={dictationDisabled}
+                        onStart={() => void speechInput.start()}
+                        onCancel={() => speechInput.cancel()}
+                      />
                     ) : null}
                     <VoiceInputSetup
                       environmentId={speechInput.transcriptionEnvironmentId}
diff --git a/apps/web/src/components/chat/ComposerSpeechButton.tsx b/apps/web/src/components/chat/ComposerSpeechButton.tsx
index 8a258f47e3296..3237b1ab85bd4 100644
--- a/apps/web/src/components/chat/ComposerSpeechButton.tsx
+++ b/apps/web/src/components/chat/ComposerSpeechButton.tsx
@@ -95,7 +95,6 @@ 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">
         {formatElapsed(elapsedSeconds)}
         {props.recordingLimitSeconds !== undefined
@@ -120,7 +119,7 @@ function ComposerSpeechStatus(props: {
 
   return (
     <div
-      className="flex h-7 min-w-0 flex-1 items-center gap-2"
+      className="flex h-7 min-w-0 flex-1 items-center justify-end gap-2"
       role="status"
       aria-live={isRecording ? "off" : "polite"}
       aria-label={presentation.status}
@@ -250,17 +249,17 @@ export function ComposerSpeechRecordingPill(props: {
 
   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}
       />
+      <ComposerSpeechCancelButton
+        state={props.state}
+        shortcutLabel={props.cancelShortcutLabel ?? null}
+        onCancel={props.onCancel}
+      />
       {props.state.phase === "post-processing" ? (
         <Button
           type="button"
diff --git a/apps/web/src/components/chat/VoiceInputPill.tsx b/apps/web/src/components/chat/VoiceInputPill.tsx
index a08567dbd6734..829c3eea9b605 100644
--- a/apps/web/src/components/chat/VoiceInputPill.tsx
+++ b/apps/web/src/components/chat/VoiceInputPill.tsx
@@ -1,7 +1,9 @@
 import { memo, useEffect, useRef, type ReactNode } from "react";
 import { useMediaQuery } from "~/hooks/useMediaQuery";
 
-const WAVEFORM_BAR_COUNT = 28;
+const WAVEFORM_BAR_COUNT = 12;
+// A silent bar is a 2px dot: 2px of the bar's 14px height.
+const WAVEFORM_MIN_SCALE = 2 / 14;
 const WAVEFORM_BAR_IDS = Array.from({ length: WAVEFORM_BAR_COUNT }, (_, index) => String(index));
 
 export const VoiceWaveform = memo(function VoiceWaveform(props: { level: number }) {
@@ -17,24 +19,20 @@ 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.transform = `scaleY(${prefersReducedMotion ? 0.35 : Math.max(WAVEFORM_MIN_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"
-    >
+    <div aria-hidden className="flex h-5 min-w-0 items-center gap-0.5 overflow-hidden">
       {WAVEFORM_BAR_IDS.map((id, index) => (
         <span
           key={id}
           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-3.5 w-0.5 shrink-0 origin-center rounded-full bg-primary transition-transform duration-100 ease-out motion-reduce:transition-none"
+          style={{ transform: `scaleY(${prefersReducedMotion ? 0.35 : WAVEFORM_MIN_SCALE})` }}
         />
       ))}
     </div>
@@ -44,7 +42,7 @@ export const VoiceWaveform = memo(function VoiceWaveform(props: { level: number
 export function VoiceInputPill({ children }: { children: ReactNode }) {
   return (
     // Same height as the toolbar's icon buttons, so starting a recording never resizes the composer.
-    <div className="flex h-8 w-48 min-w-0 shrink-0 items-center gap-2 sm:h-7 sm:w-64">
+    <div className="flex h-8 w-48 max-w-full min-w-0 shrink-0 items-center gap-2 sm:h-7 sm:w-64">
       {children}
     </div>
   );
diff --git a/apps/web/src/components/settings/MicrophoneTest.tsx b/apps/web/src/components/settings/MicrophoneTest.tsx
index d3597e2dea670..a98a412fd1a46 100644
--- a/apps/web/src/components/settings/MicrophoneTest.tsx
+++ b/apps/web/src/components/settings/MicrophoneTest.tsx
@@ -225,7 +225,7 @@ export function MicrophoneTest({ microphoneId }: { microphoneId: string }) {
           <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"
+            className="flex-1 shrink-0 text-xs tabular-nums text-muted-foreground"
             aria-label="Recording time"
           >
             {formatTime(elapsed)} / {formatTime(LOOPBACK_SECONDS)}

From b3cd7cf005e83a10d27601c449c7beb5a234091b Mon Sep 17 00:00:00 2001
From: Koushik <koushikyemula@gmail.com>
Date: Fri, 6 Nov 2026 18:40:45 +0530
Subject: [PATCH 2/2] fix(web): keep the newest waveform bars and the test
 timer readable when narrow

The waveform clips its oldest bars instead of its newest, and the microphone test timer no longer wraps; its stop button is pushed to the edge instead.
---
 apps/web/src/components/chat/VoiceInputPill.tsx     | 2 +-
 apps/web/src/components/settings/MicrophoneTest.tsx | 3 ++-
 2 files changed, 3 insertions(+), 2 deletions(-)

diff --git a/apps/web/src/components/chat/VoiceInputPill.tsx b/apps/web/src/components/chat/VoiceInputPill.tsx
index 829c3eea9b605..f5128cea4d7db 100644
--- a/apps/web/src/components/chat/VoiceInputPill.tsx
+++ b/apps/web/src/components/chat/VoiceInputPill.tsx
@@ -24,7 +24,7 @@ export const VoiceWaveform = memo(function VoiceWaveform(props: { level: number
   }, [prefersReducedMotion, props.level]);
 
   return (
-    <div aria-hidden className="flex h-5 min-w-0 items-center gap-0.5 overflow-hidden">
+    <div aria-hidden className="flex h-5 min-w-0 items-center justify-end gap-0.5 overflow-hidden">
       {WAVEFORM_BAR_IDS.map((id, index) => (
         <span
           key={id}
diff --git a/apps/web/src/components/settings/MicrophoneTest.tsx b/apps/web/src/components/settings/MicrophoneTest.tsx
index a98a412fd1a46..8be89318723b8 100644
--- a/apps/web/src/components/settings/MicrophoneTest.tsx
+++ b/apps/web/src/components/settings/MicrophoneTest.tsx
@@ -225,7 +225,7 @@ export function MicrophoneTest({ microphoneId }: { microphoneId: string }) {
           <VoiceWaveform level={level} />
           <span aria-hidden className="size-1.5 shrink-0 rounded-full bg-primary" />
           <span
-            className="flex-1 shrink-0 text-xs tabular-nums text-muted-foreground"
+            className="shrink-0 text-xs tabular-nums text-muted-foreground"
             aria-label="Recording time"
           >
             {formatTime(elapsed)} / {formatTime(LOOPBACK_SECONDS)}
@@ -246,6 +246,7 @@ export function MicrophoneTest({ microphoneId }: { microphoneId: string }) {
       <Button
         size="icon-sm-pill"
         aria-label="Stop recording"
+        className="ms-auto"
         disabled={phase !== "recording"}
         onClick={() => {
           const recorder = capture.current?.recorder;