From c14403aabe29540bfe962ea7ae9f574824da4a90 Mon Sep 17 00:00:00 2001
From: Chris Scott <99081550+chriswritescode-dev@users.noreply.github.com>
Date: Fri, 1 May 2026 23:38:07 +0000
Subject: [PATCH 1/2] fix: add startup timeout to STT microphone start

Race microphone startup against a 10s timeout to prevent the voice
button from getting stuck in a loading state when the microphone
never actually starts. On timeout, abort the recorder/recognizer,
reset all STT state, and return false so the UI can recover.
---
 frontend/src/hooks/useSTT.ts | 74 ++++++++++++++++++++++++++++++++++--
 1 file changed, 70 insertions(+), 4 deletions(-)

diff --git a/frontend/src/hooks/useSTT.ts b/frontend/src/hooks/useSTT.ts
index f6ddac00..fdf5e4c7 100644
--- a/frontend/src/hooks/useSTT.ts
+++ b/frontend/src/hooks/useSTT.ts
@@ -5,6 +5,8 @@ import { AudioRecorder } from '@/lib/audioRecorder'
 import { sttApi } from '@/api/stt'
 import { DEFAULT_STT_CONFIG } from '@/api/types/settings'
 
+const STT_START_TIMEOUT_MS = 10_000
+
 export function useSTT(userId = 'default') {
   const { preferences } = useSettings(userId)
   const [isRecording, setIsRecording] = useState(false)
@@ -21,6 +23,8 @@ export function useSTT(userId = 'default') {
   const userIdRef = useRef(userId)
   const errorTimeoutRef = useRef<ReturnType<typeof setTimeout> | null>(null)
   const lastProcessedBlobRef = useRef<Blob | null>(null)
+  const startupTimeoutRef = useRef<ReturnType<typeof setTimeout> | null>(null)
+  const startOpIdRef = useRef(0)
   
   useEffect(() => {
     userIdRef.current = userId
@@ -202,6 +206,9 @@ export function useSTT(userId = 'default') {
     setError(null)
     lastProcessedBlobRef.current = null
 
+    const startOpId = ++startOpIdRef.current
+    clearStartupTimeout()
+
     if (isExternalProvider) {
       if (!audioRecorder.current) {
         audioRecorder.current = new AudioRecorder()
@@ -210,11 +217,30 @@ export function useSTT(userId = 'default') {
 
       try {
         setIsProcessing(true)
-        await audioRecorder.current.start()
+
+        const startupPromise = audioRecorder.current.start()
+        const timeoutPromise = new Promise<never>((_, reject) => {
+          startupTimeoutRef.current = setTimeout(() => {
+            if (startOpIdRef.current !== startOpId) return
+            reject(new Error('Microphone start timed out'))
+          }, STT_START_TIMEOUT_MS)
+        })
+
+        await Promise.race([startupPromise, timeoutPromise])
+        clearStartupTimeout()
+
+        if (startOpIdRef.current !== startOpId) return false
+
         setIsProcessing(false)
         return true
       } catch (err) {
+        clearStartupTimeout()
+        if (startOpIdRef.current !== startOpId) return false
         setIsProcessing(false)
+        if (err instanceof Error && err.message === 'Microphone start timed out') {
+          abortAndResetOnTimeout()
+          return false
+        }
         setIsError(true)
         setError(err instanceof Error ? err.message : 'Failed to start recording')
         return false
@@ -228,16 +254,35 @@ export function useSTT(userId = 'default') {
 
       try {
         setIsProcessing(true)
-        await recognizer.current.start(options)
+
+        const startupPromise = recognizer.current.start(options)
+        const timeoutPromise = new Promise<never>((_, reject) => {
+          startupTimeoutRef.current = setTimeout(() => {
+            if (startOpIdRef.current !== startOpId) return
+            reject(new Error('Microphone start timed out'))
+          }, STT_START_TIMEOUT_MS)
+        })
+
+        await Promise.race([startupPromise, timeoutPromise])
+        clearStartupTimeout()
+
+        if (startOpIdRef.current !== startOpId) return false
+
         return true
       } catch (err) {
+        clearStartupTimeout()
+        if (startOpIdRef.current !== startOpId) return false
         setIsProcessing(false)
+        if (err instanceof Error && err.message === 'Microphone start timed out') {
+          abortAndResetOnTimeout()
+          return false
+        }
         setIsError(true)
         setError(err instanceof Error ? err.message : 'Failed to start recording')
         return false
       }
     }
-  }, [isSupported, isEnabled, isExternalProvider, config.language, setupAudioRecorder])
+  }, [isSupported, isEnabled, isExternalProvider, config.language, setupAudioRecorder, clearStartupTimeout, abortAndResetOnTimeout])
 
   const stopRecording = useCallback(() => {
     if (isExternalProvider && audioRecorder.current) {
@@ -283,11 +328,32 @@ export function useSTT(userId = 'default') {
     setInterimTranscript('')
   }, [])
 
+  const clearStartupTimeout = useCallback(() => {
+    if (startupTimeoutRef.current) {
+      clearTimeout(startupTimeoutRef.current)
+      startupTimeoutRef.current = null
+    }
+  }, [])
+
+  const abortAndResetOnTimeout = useCallback(() => {
+    if (isExternalProvider && audioRecorder.current) {
+      audioRecorder.current.abort()
+    } else {
+      recognizer.current.abort()
+    }
+    setIsRecording(false)
+    setIsProcessing(false)
+    setState('idle')
+    setIsError(true)
+    setError('Microphone start timed out')
+  }, [isExternalProvider])
+
   useEffect(() => {
     return () => {
       if (errorTimeoutRef.current) clearTimeout(errorTimeoutRef.current)
+      clearStartupTimeout()
     }
-  }, [])
+  }, [clearStartupTimeout])
 
   return {
     isRecording,

From f8168ade1be7eed48653ce2d474b534f1703d186 Mon Sep 17 00:00:00 2001
From: Chris Scott <99081550+chriswritescode-dev@users.noreply.github.com>
Date: Fri, 1 May 2026 20:13:20 -0400
Subject: [PATCH 2/2] refactor(frontend): improve voice status overlay and
 scroll button visibility

---
 .../src/components/message/PromptInput.tsx    |  4 +-
 .../components/message/VoiceStatusOverlay.tsx | 58 ++++++++++---------
 frontend/src/hooks/useSTT.ts                  | 40 ++++++-------
 3 files changed, 52 insertions(+), 50 deletions(-)

diff --git a/frontend/src/components/message/PromptInput.tsx b/frontend/src/components/message/PromptInput.tsx
index b5f63a18..624d3c33 100644
--- a/frontend/src/components/message/PromptInput.tsx
+++ b/frontend/src/components/message/PromptInput.tsx
@@ -1241,7 +1241,7 @@ return (
           
         </div>
 <div className="flex items-center gap-1.5 md:gap-2 flex-shrink-0">
-            {isMobile && showScrollButton ? (
+            {isMobile && showScrollButton && !showVoiceFeedback ? (
               <button
                 onClick={onScrollToBottom}
                 className="px-4 py-2 rounded-lg bg-black hover:bg-zinc-900 text-white transition-all duration-200 active:scale-95 shadow-md flex items-center justify-center min-w-[52px] border border-zinc-700"
@@ -1286,7 +1286,7 @@ return (
           {sttEnabled && sttSupported && (
             renderVoiceButton('desktop')
           )}
-          {isMobile && !showScrollButton && sttEnabled && sttSupported && !hasPendingPermissionForSession && (
+          {isMobile && sttEnabled && sttSupported && !hasPendingPermissionForSession && (!showScrollButton || showVoiceFeedback) && (
             renderVoiceButton('mobile')
           )}
             <button
diff --git a/frontend/src/components/message/VoiceStatusOverlay.tsx b/frontend/src/components/message/VoiceStatusOverlay.tsx
index 050cec20..1dfa8f81 100644
--- a/frontend/src/components/message/VoiceStatusOverlay.tsx
+++ b/frontend/src/components/message/VoiceStatusOverlay.tsx
@@ -8,31 +8,36 @@ interface VoiceStatusOverlayProps {
   state: VoiceStatusOverlayState | null
 }
 
+function WaveformBars() {
+  return (
+    <div className="flex items-end gap-[3px] h-8">
+      {[0, 1, 2, 3, 4].map((i) => (
+        <div
+          key={i}
+          className="w-1.5 rounded-full bg-white"
+          style={{
+            height: '100%',
+            animation: `waveBar 0.9s ease-in-out infinite`,
+            animationDelay: `${i * 0.12}s`,
+          }}
+        />
+      ))}
+      <style>{`
+        @keyframes waveBar {
+          0%, 100% { transform: scaleY(0.2); }
+          50% { transform: scaleY(1); }
+        }
+      `}</style>
+    </div>
+  )
+}
+
 export function VoiceStatusOverlay({ show, label, state }: VoiceStatusOverlayProps) {
   if (!show || !label || !state) {
     return null
   }
 
   const isLoading = state === 'starting' || state === 'processing' || state === 'sending'
-  const showLoadingText = state !== 'starting'
-  const topLabel = state === 'readyToSend'
-    ? 'Release'
-    : state === 'starting'
-      ? 'Starting'
-      : state === 'processing'
-        ? 'Transcribe'
-        : state === 'sending'
-          ? 'Sending'
-          : 'Swipe'
-  const bottomLabel = state === 'starting'
-    ? 'Mic'
-    : state === 'processing'
-      ? 'Speech'
-      : state === 'sending'
-        ? 'Prompt'
-        : state === 'readyToSend'
-          ? 'Send'
-          : 'Send'
   const actionWords = state === 'readyToSend'
     ? ['Release', 'To', 'Send']
     : ['Swipe', 'To', 'Send']
@@ -47,12 +52,11 @@ export function VoiceStatusOverlay({ show, label, state }: VoiceStatusOverlayPro
         <div className="absolute inset-x-1 top-1 h-10 rounded-full bg-white/20 blur-sm" />
         <div className="relative flex flex-1 flex-col items-center justify-center gap-1">
           {isLoading ? (
-            <>
+            state === 'processing' ? (
+              <WaveformBars />
+            ) : (
               <LoaderCircle className="h-6 w-6 animate-spin" />
-              {showLoadingText && (
-                <span className="text-[10px] font-bold uppercase leading-none tracking-wide">{topLabel}</span>
-              )}
-            </>
+            )
           ) : (
             <>
               <ArrowUp className="h-8 w-8 animate-bounce" />
@@ -64,11 +68,9 @@ export function VoiceStatusOverlay({ show, label, state }: VoiceStatusOverlayPro
             </>
           )}
         </div>
-        {isLoading && showLoadingText ? (
-          <span className="relative text-[10px] font-bold uppercase leading-none tracking-wide">{bottomLabel}</span>
-        ) : !isLoading ? (
+        {!isLoading && (
           <X className="relative h-4 w-4" />
-        ) : null}
+        )}
       </div>
     </div>
   )
diff --git a/frontend/src/hooks/useSTT.ts b/frontend/src/hooks/useSTT.ts
index fdf5e4c7..f4dc5e5c 100644
--- a/frontend/src/hooks/useSTT.ts
+++ b/frontend/src/hooks/useSTT.ts
@@ -187,6 +187,26 @@ export function useSTT(userId = 'default') {
     }
   }, [isEnabled, isExternalProvider, setupAudioRecorder])
 
+  const clearStartupTimeout = useCallback(() => {
+    if (startupTimeoutRef.current) {
+      clearTimeout(startupTimeoutRef.current)
+      startupTimeoutRef.current = null
+    }
+  }, [])
+
+  const abortAndResetOnTimeout = useCallback(() => {
+    if (isExternalProvider && audioRecorder.current) {
+      audioRecorder.current.abort()
+    } else {
+      recognizer.current.abort()
+    }
+    setIsRecording(false)
+    setIsProcessing(false)
+    setState('idle')
+    setIsError(true)
+    setError('Microphone start timed out')
+  }, [isExternalProvider])
+
   const startRecording = useCallback(async (): Promise<boolean> => {
     if (!isSupported) {
       setError('Speech recognition is not supported in this browser')
@@ -328,26 +348,6 @@ export function useSTT(userId = 'default') {
     setInterimTranscript('')
   }, [])
 
-  const clearStartupTimeout = useCallback(() => {
-    if (startupTimeoutRef.current) {
-      clearTimeout(startupTimeoutRef.current)
-      startupTimeoutRef.current = null
-    }
-  }, [])
-
-  const abortAndResetOnTimeout = useCallback(() => {
-    if (isExternalProvider && audioRecorder.current) {
-      audioRecorder.current.abort()
-    } else {
-      recognizer.current.abort()
-    }
-    setIsRecording(false)
-    setIsProcessing(false)
-    setState('idle')
-    setIsError(true)
-    setError('Microphone start timed out')
-  }, [isExternalProvider])
-
   useEffect(() => {
     return () => {
       if (errorTimeoutRef.current) clearTimeout(errorTimeoutRef.current)