feat(voice): all microphone buttons use the server's speech recognition

- New useVoiceInput hook (lib/voice.ts): "server" records with MediaRecorder
  and sends to /voice/transcribe, "browser" keeps the live recognition,
  "off" or missing browser support hides the microphone.
- Quick dump bar, mobile capture sheet and hold-to-record use it; live
  waves from the real input level (VoiceWave) and "Wird erkannt…".
- Recordings stop after STT_MAX_SECONDS.

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>

frontend/src/features/capture/InstantCaptureBar.tsx

@@ -13,9 +13,12 @@ import {
   ChevronDown,
   AlertTriangle,
   Flame,
+  Loader2,
 } from 'lucide-react';
 import { PriorityLevel, SharedList, Thought } from '../../lib/types';
 import { api, triggerHaptic } from '../../lib/api';
+import { useVoiceInput } from '../../lib/useVoiceInput';
+import { VoiceWave } from '../../components/VoiceWave';
 
 export type CaptureTarget = 'inbox' | 'task' | 'list_item' | 'document';
 
@@ -46,17 +49,31 @@ export const InstantCaptureBar: React.FC<InstantCaptureBarProps> = ({
   const [target, setTarget] = useState<CaptureTarget>(fixedTarget || 'inbox');
   const [targetListId, setTargetListId] = useState<string>('');
   const [showOptions, setShowOptions] = useState(defaultShowOptions || hideTargetPicker);
-  const [isListening, setIsListening] = useState(false);
+  const [voiceError, setVoiceError] = useState<string | null>(null);
   const [isSubmitting, setIsSubmitting] = useState(false);
   const [justSavedLabel, setJustSavedLabel] = useState<string | null>(null);
   const [isMultiline, setIsMultiline] = useState(false);
 
   const inputRef = useRef<HTMLTextAreaElement>(null);
   const containerRef = useRef<HTMLFormElement>(null);
-  const recognitionRef = useRef<any>(null);
   const baseVoiceTextRef = useRef('');
   const hasVoiceInputRef = useRef(false);
 
+  // Voice input: own Whisper server or the browser's recognition (lib/voice.ts)
+  const voice = useVoiceInput({
+    onText: (text, final) => {
+      const base = baseVoiceTextRef.current;
+      if (text) setContent(base ? `${base} ${text}` : text);
+      if (final) inputRef.current?.focus();
+    },
+    onError: (message) => {
+      setVoiceError(message);
+      window.setTimeout(() => setVoiceError(null), 4000);
+    },
+  });
+  const isListening = voice.state === 'listening';
+  const isTranscribing = voice.state === 'transcribing';
+
   const adjustHeight = (el?: HTMLTextAreaElement | null) => {
     const targetEl = el || inputRef.current;
     if (!targetEl) return;
@@ -120,57 +137,13 @@ export const InstantCaptureBar: React.FC<InstantCaptureBarProps> = ({
   }, []);
 
   const toggleVoiceDictation = () => {
-    const SpeechRecognition =
-      (window as any).SpeechRecognition || (window as any).webkitSpeechRecognition;
-
-    if (!SpeechRecognition) {
-      alert('Spracheingabe wird von diesem Browser nicht direkt unterstützt (bitte Chrome, Edge oder Safari nutzen).');
-      return;
-    }
-
-    if (isListening && recognitionRef.current) {
-      recognitionRef.current.stop();
-      setIsListening(false);
-      return;
-    }
-
-    try {
+    if (voice.state === 'idle') {
       baseVoiceTextRef.current = content.replace(/\s*\[…\]$/, '').trim();
       hasVoiceInputRef.current = true;
-
-      const recognition = new SpeechRecognition();
-      recognition.lang = 'de-DE';
-      recognition.continuous = false;
-      recognition.interimResults = true;
-
-      recognition.onstart = () => {
-        setIsListening(true);
-        triggerHaptic(20);
-      };
-
-      recognition.onresult = (event: any) => {
-        let transcript = '';
-        for (let i = 0; i < event.results.length; i++) {
-          transcript += event.results[i][0].transcript;
-        }
-        const base = baseVoiceTextRef.current;
-        setContent(base ? `${base} ${transcript}` : transcript);
-      };
-
-      recognition.onerror = () => {
-        setIsListening(false);
-      };
-
-      recognition.onend = () => {
-        setIsListening(false);
-        inputRef.current?.focus();
-      };
-
-      recognitionRef.current = recognition;
-      recognition.start();
-    } catch {
-      setIsListening(false);
+      setVoiceError(null);
+      triggerHaptic(20);
     }
+    voice.toggle();
   };
 
   const executeCapture = async (
@@ -187,6 +160,8 @@ export const InstantCaptureBar: React.FC<InstantCaptureBarProps> = ({
     const capturedDueDate = dueDate;
     const capturedSource = hasVoiceInputRef.current || isListening ? 'voice' : 'manual';
     hasVoiceInputRef.current = false;
+    // A recognition still running would refill the field after it was saved
+    if (voice.state !== 'idle') voice.cancel();
 
     // Optimistically clear input immediately so the UI feels instant (<10ms) in all browsers
     setContent('');
@@ -285,8 +260,12 @@ export const InstantCaptureBar: React.FC<InstantCaptureBarProps> = ({
               }
             }}
             placeholder={
-              isListening
+              voiceError
+                ? voiceError
+                : isListening
                 ? 'Ich höre zu…'
+                : isTranscribing
+                ? 'Wird erkannt…'
                 : hideTargetPicker || fixedTarget === 'inbox'
                 ? 'Quick Dump erfassen… (Enter zum Speichern)'
                 : target === 'task'
@@ -336,19 +315,33 @@ export const InstantCaptureBar: React.FC<InstantCaptureBarProps> = ({
               </button>
             )}
 
-            {/* Voice Dictation Button */}
-            <button
-              type="button"
-              onClick={toggleVoiceDictation}
-              title="Spracheingabe"
-              className={`w-6 h-6 capture-pill rounded-full flex items-center justify-center transition-colors ${
-                isListening
-                  ? 'bg-accent-dim text-accent'
-                  : 'text-muted hover:text-main hover:bg-panel-elevated'
-              }`}
-            >
-              {isListening ? <MicOff className="w-3 h-3" /> : <Mic className="w-3 h-3" />}
-            </button>
+            {/* Voice Dictation Button (hidden when voice input is off or not supported) */}
+            {voice.available && (
+              <>
+                {isListening && voice.mode === 'server' && (
+                  <VoiceWave getLevel={voice.level} className="h-3.5 text-accent" />
+                )}
+                <button
+                  type="button"
+                  onClick={toggleVoiceDictation}
+                  disabled={isTranscribing}
+                  title={isListening ? 'Aufnahme beenden' : isTranscribing ? 'Wird erkannt…' : 'Spracheingabe'}
+                  className={`w-6 h-6 capture-pill rounded-full flex items-center justify-center transition-colors ${
+                    isListening || isTranscribing
+                      ? 'bg-accent-dim text-accent'
+                      : 'text-muted hover:text-main hover:bg-panel-elevated'
+                  }`}
+                >
+                  {isTranscribing ? (
+                    <Loader2 className="w-3 h-3 animate-spin" />
+                  ) : isListening ? (
+                    <MicOff className="w-3 h-3" />
+                  ) : (
+                    <Mic className="w-3 h-3" />
+                  )}
+                </button>
+              </>
+            )}
 
             {/* Instant Send Button */}
             <button