fix(voice): relax backend timeout and surface timeout errors

Bumps the proxy timeout to 5 minutes (VOICE_TIMEOUT_MS) since local TTS can
synthesize long messages at roughly real-time, and returns a clear timed-out
message (504) instead of failing silently. The read-aloud button now shows
backend errors.

src/components/chat/hooks/useTts.ts

@@ -8,14 +8,16 @@ let stopActive: (() => void) | null = null;
 export type TtsState = 'idle' | 'loading' | 'playing';
 
 /**
- * Tap-to-speak for a single message. Sends raw markdown to /api/voice/tts
- * (Kokoro sidecar via the Express proxy; cleaning happens server-side),
- * plays the returned audio. Manual-gesture only (v1) to satisfy iOS autoplay.
+ * Tap-to-speak for a single message. Sends raw markdown to /api/voice/tts and plays
+ * the returned audio. Manual-gesture only (v1) to satisfy iOS autoplay. Exposes the
+ * last error (e.g. a backend timeout) so the control can surface it.
  */
 export function useTts(getText: () => string) {
   const [state, setState] = useState<TtsState>('idle');
+  const [error, setError] = useState<string | null>(null);
   const audioRef = useRef<HTMLAudioElement | null>(null);
   const urlRef = useRef<string | null>(null);
+  const errorTimer = useRef<ReturnType<typeof setTimeout> | null>(null);
 
   const reset = useCallback(() => {
     if (audioRef.current) {
@@ -37,10 +39,17 @@ export function useTts(getText: () => string) {
     if (stopActive) stopActive = null;
   }, [reset]);
 
+  const showError = useCallback((msg: string) => {
+    setError(msg);
+    if (errorTimer.current) clearTimeout(errorTimer.current);
+    errorTimer.current = setTimeout(() => setError(null), 6000);
+  }, []);
+
   // Cleanup on unmount: drop the global stop handler if it points at us, then reset.
   useEffect(
     () => () => {
       if (stopActive === stop) stopActive = null;
+      if (errorTimer.current) clearTimeout(errorTimer.current);
       reset();
     },
     [reset, stop],
@@ -50,6 +59,7 @@ export function useTts(getText: () => string) {
     if (stopActive) stopActive();
     const text = getText();
     if (!text || !text.trim()) return;
+    setError(null);
 
     // Create + "unlock" the audio element synchronously inside the click gesture,
     // so iOS Safari lets us play it after the async fetch resolves.
@@ -72,7 +82,16 @@ export function useTts(getText: () => string) {
         body: JSON.stringify({ text }),
         headers: voiceConfigHeaders(),
       });
-      if (!res.ok) throw new Error(`tts ${res.status}`);
+      if (!res.ok) {
+        let msg = `Read-aloud failed (${res.status})`;
+        try {
+          const j = await res.json();
+          if (j?.error) msg = String(j.error);
+        } catch {
+          /* non-JSON error body */
+        }
+        throw new Error(msg);
+      }
       const blob = await res.blob();
       const url = URL.createObjectURL(blob);
       if (audioRef.current !== audio) {
@@ -84,16 +103,17 @@ export function useTts(getText: () => string) {
       audio.load();
       await audio.play();
       setState('playing');
-    } catch {
+    } catch (e) {
       reset();
       setState('idle');
+      showError(e instanceof Error ? e.message : 'Read-aloud failed');
     }
-  }, [getText, reset, stop]);
+  }, [getText, reset, stop, showError]);
 
   const toggle = useCallback(() => {
     if (state === 'playing' || state === 'loading') stop();
     else play();
   }, [state, play, stop]);
 
-  return { state, toggle };
+  return { state, toggle, error };
 }