🤖 fix: voice input keybind improvements (#846)

_Generated with mux_

Fixes several voice input UX issues:

**Space key hold causing gibberish sends**
- Track `spaceHeld` in a ref, require release before space can trigger
send
- Prevents rapid start→send when user holds space

**Ctrl+D not working globally during recording**
- Moved recording keybinds into `useVoiceInput` hook (owns state
machine, should own keybinds)
- Uses `matchesKeybind(e, KEYBINDS.TOGGLE_VOICE_INPUT)` as source of
truth

**Space requiring focus to send**
- Use capture phase (`addEventListener(..., true)`) to intercept before
focused elements consume the event
- Now space/escape/ctrl+d work regardless of focus during recording

Design is more correct by construction: listeners only added when `state
=== 'recording'`, auto-cleanup on state change.

Author: ammar-agent

src/browser/components/ChatInput/index.tsx

@@ -173,6 +173,7 @@ export const ChatInput: React.FC<ChatInputProps> = (props) => {
     },
     onSend: () => void handleSend(),
     openAIKeySet,
+    useRecordingKeybinds: true,
   });
 
   // Start creation tutorial when entering creation mode
@@ -496,23 +497,9 @@ export const ChatInput: React.FC<ChatInputProps> = (props) => {
       voiceInput.toggle();
     };
 
-    // Global keybinds only active during recording
-    const handleKeyDown = (e: KeyboardEvent) => {
-      if (voiceInput.state !== "recording") return;
-      if (e.key === " ") {
-        e.preventDefault();
-        voiceInput.stop({ send: true });
-      } else if (e.key === "Escape") {
-        e.preventDefault();
-        voiceInput.cancel();
-      }
-    };
-
     window.addEventListener(CUSTOM_EVENTS.TOGGLE_VOICE_INPUT, handleToggle as EventListener);
-    window.addEventListener("keydown", handleKeyDown);
     return () => {
       window.removeEventListener(CUSTOM_EVENTS.TOGGLE_VOICE_INPUT, handleToggle as EventListener);
-      window.removeEventListener("keydown", handleKeyDown);
     };
   }, [voiceInput, setToast]);
 
@@ -862,9 +849,10 @@ export const ChatInput: React.FC<ChatInputProps> = (props) => {
       return;
     }
 
-    // Space on empty input starts voice recording
+    // Space on empty input starts voice recording (ignore key repeat from holding)
     if (
       e.key === " " &&
+      !e.repeat &&
       input.trim() === "" &&
       voiceInput.shouldShowUI &&
       voiceInput.isApiKeySet &&

src/browser/hooks/useVoiceInput.ts

@@ -7,6 +7,7 @@
  */
 
 import { useState, useCallback, useRef, useEffect } from "react";
+import { matchesKeybind, KEYBINDS } from "@/browser/utils/ui/keybinds";
 
 export type VoiceInputState = "idle" | "recording" | "transcribing";
 
@@ -16,6 +17,13 @@ export interface UseVoiceInputOptions {
   /** Called after successful transcription if stop({ send: true }) was used */
   onSend?: () => void;
   openAIKeySet: boolean;
+  /**
+   * When true, hook manages global keybinds during recording:
+   * - Space: stop and send (requires release after start)
+   * - Escape: cancel
+   * - Ctrl+D / Cmd+D: stop without sending
+   */
+  useRecordingKeybinds?: boolean;
 }
 
 export interface UseVoiceInputResult {
@@ -236,6 +244,48 @@ export function useVoiceInput(options: UseVoiceInputOptions): UseVoiceInputResul
     };
   }, [releaseStream]);
 
+  // ---------------------------------------------------------------------------
+  // Recording keybinds (when useRecordingKeybinds is true)
+  // ---------------------------------------------------------------------------
+
+  // Track if space is held to prevent start→send when user holds space
+  const spaceHeldRef = useRef(false);
+
+  useEffect(() => {
+    if (!options.useRecordingKeybinds || state !== "recording") {
+      spaceHeldRef.current = false;
+      return;
+    }
+
+    // Assume space is held when recording starts (conservative default)
+    spaceHeldRef.current = true;
+
+    const handleKeyUp = (e: KeyboardEvent) => {
+      if (e.key === " ") spaceHeldRef.current = false;
+    };
+
+    const handleKeyDown = (e: KeyboardEvent) => {
+      if (e.key === " " && !spaceHeldRef.current) {
+        e.preventDefault();
+        stop({ send: true });
+      } else if (e.key === "Escape") {
+        e.preventDefault();
+        cancel();
+      } else if (matchesKeybind(e, KEYBINDS.TOGGLE_VOICE_INPUT)) {
+        e.preventDefault();
+        stop();
+      }
+    };
+
+    // Use capture phase to intercept before focused elements consume the event
+    window.addEventListener("keyup", handleKeyUp, true);
+    window.addEventListener("keydown", handleKeyDown, true);
+    return () => {
+      window.removeEventListener("keyup", handleKeyUp, true);
+      window.removeEventListener("keydown", handleKeyDown, true);
+    };
+  }, [options.useRecordingKeybinds, state, stop, cancel]);
+
   // ---------------------------------------------------------------------------
   // Return
   // ---------------------------------------------------------------------------