@phenx-inc/ctlsurf 0.7.0 → 0.9.0

package/src/renderer/components/VoiceInput.tsx

@@ -1,70 +1,26 @@
 import { useCallback, useEffect, useRef, useState } from 'react'
 import { transcribeBlob, type ModelProgress } from '../lib/localWhisper'
 
-// ─── Minimal Web Speech API typings ──────────────────
-// webkitSpeechRecognition isn't in the standard DOM lib, so declare just the
-// surface we use. This API is frequently unavailable inside Electron (Chromium
-// ships without Google's speech backend); when it fails we fall back to a local
-// Whisper model (see ../lib/localWhisper).
-
-interface SpeechRecognitionResult {
-  isFinal: boolean
-  0: { transcript: string }
-}
-interface SpeechRecognitionEvent {
-  resultIndex: number
-  results: { length: number;[index: number]: SpeechRecognitionResult }
-}
-interface SpeechRecognitionErrorEvent { error: string }
-interface SpeechRecognitionLike {
-  lang: string
-  continuous: boolean
-  interimResults: boolean
-  start: () => void
-  stop: () => void
-  abort: () => void
-  onresult: ((e: SpeechRecognitionEvent) => void) | null
-  onerror: ((e: SpeechRecognitionErrorEvent) => void) | null
-  onend: (() => void) | null
-}
-type SpeechRecognitionCtor = new () => SpeechRecognitionLike
-
-function getRecognitionCtor(): SpeechRecognitionCtor | null {
-  const w = window as unknown as {
-    SpeechRecognition?: SpeechRecognitionCtor
-    webkitSpeechRecognition?: SpeechRecognitionCtor
-  }
-  return w.SpeechRecognition || w.webkitSpeechRecognition || null
-}
+// ─── Capabilities ────────────────────────────────────
+// Speech is transcribed entirely on-device via a local Whisper model (see
+// ../lib/localWhisper). The browser's Web Speech API is intentionally not used:
+// it's a cloud service whose Google backend is unreachable inside Electron
+// (Chromium ships without the API key), so it never works in this app.
 
-// ─── Capabilities & engine selection ─────────────────
-
-type Engine = 'web-speech' | 'local'
 type Phase = 'idle' | 'listening' | 'transcribing'
 
-const ENGINE_KEY = 'ctlsurf.voiceEngine'
+// Persisted audioinput deviceId; null/absent = OS default.
+const DEVICE_KEY = 'ctlsurf.voiceDeviceId'
+
+function loadDeviceId(): string | null {
+  try { return localStorage.getItem(DEVICE_KEY) || null } catch { return null }
+}
 
-const WEB_SPEECH_SUPPORTED = getRecognitionCtor() !== null
 const LOCAL_SUPPORTED =
   typeof navigator !== 'undefined' &&
   !!navigator.mediaDevices?.getUserMedia &&
   typeof MediaRecorder !== 'undefined' &&
   typeof OfflineAudioContext !== 'undefined'
-const ANY_SUPPORTED = WEB_SPEECH_SUPPORTED || LOCAL_SUPPORTED
-
-function loadInitialEngine(): Engine {
-  if (!WEB_SPEECH_SUPPORTED && LOCAL_SUPPORTED) return 'local'
-  try {
-    if (localStorage.getItem(ENGINE_KEY) === 'local' && LOCAL_SUPPORTED) return 'local'
-  } catch { /* ignore */ }
-  return WEB_SPEECH_SUPPORTED ? 'web-speech' : 'local'
-}
-
-// Web Speech errors that mean the engine itself is unreachable (vs. a mic
-// permission/hardware problem, which would also break the local fallback).
-function isEngineUnavailable(code: string): boolean {
-  return code === 'network' || code === 'service-not-allowed'
-}
 
 function describeMicError(err: unknown): string {
   const name = (err as { name?: string })?.name
@@ -82,26 +38,28 @@ interface VoiceInputProps {
 }
 
 export function VoiceInput({ onTranscript, variant = 'titlebar' }: VoiceInputProps) {
-  const [engine, setEngine] = useState<Engine>(loadInitialEngine)
   const [phase, setPhase] = useState<Phase>('idle')
-  const [interim, setInterim] = useState('')
   const [modelPct, setModelPct] = useState<number | null>(null)
+  // Transcript-so-far streamed from the model during transcription (live preview).
+  const [partial, setPartial] = useState('')
   const [error, setError] = useState<string | null>(null)
   const [notice, setNotice] = useState<string | null>(null)
 
-  // Web Speech refs
-  const recognitionRef = useRef<SpeechRecognitionLike | null>(null)
-  const finalRef = useRef('')
-  // Local (Whisper) refs
+  // Mic source selection
+  const [devices, setDevices] = useState<MediaDeviceInfo[]>([])
+  const [selectedDeviceId, setSelectedDeviceId] = useState<string | null>(loadDeviceId)
+  const [showDevicePicker, setShowDevicePicker] = useState(false)
+  const selectedDeviceIdRef = useRef(selectedDeviceId)
+  useEffect(() => { selectedDeviceIdRef.current = selectedDeviceId }, [selectedDeviceId])
+  const wrapRef = useRef<HTMLDivElement>(null)
+
+  // Recording refs
   const streamRef = useRef<MediaStream | null>(null)
   const recorderRef = useRef<MediaRecorder | null>(null)
   const chunksRef = useRef<Blob[]>([])
   // Set true when the user releases before getUserMedia resolves (quick tap).
   const cancelGestureRef = useRef(false)
 
-  const engineRef = useRef(engine)
-  useEffect(() => { engineRef.current = engine }, [engine])
-
   const onTranscriptRef = useRef(onTranscript)
   useEffect(() => { onTranscriptRef.current = onTranscript }, [onTranscript])
 
@@ -117,77 +75,94 @@ export function VoiceInput({ onTranscript, variant = 'titlebar' }: VoiceInputPro
     return () => clearTimeout(t)
   }, [notice])
 
-  const switchToLocal = useCallback((reason: string) => {
-    try { localStorage.setItem(ENGINE_KEY, 'local') } catch { /* ignore */ }
-    setEngine('local')
-    setNotice(reason)
-  }, [])
-
   const stopStream = useCallback(() => {
     streamRef.current?.getTracks().forEach((t) => t.stop())
     streamRef.current = null
   }, [])
 
-  // ─── Web Speech engine ─────────────────────────────
-
-  const startWebSpeech = useCallback(() => {
-    const Ctor = getRecognitionCtor()
-    if (!Ctor || recognitionRef.current) return
-    setError(null); setNotice(null); setInterim('')
-    finalRef.current = ''
-
-    const rec = new Ctor()
-    rec.lang = navigator.language || 'en-US'
-    rec.continuous = true
-    rec.interimResults = true
-
-    rec.onresult = (event) => {
-      let finalText = ''
-      let interimText = ''
-      for (let i = 0; i < event.results.length; i++) {
-        const res = event.results[i]
-        if (res.isFinal) finalText += res[0].transcript
-        else interimText += res[0].transcript
-      }
-      finalRef.current = finalText
-      setInterim(interimText)
-    }
+  // ─── Mic source selection ──────────────────────────
 
-    rec.onerror = (event) => {
-      if (isEngineUnavailable(event.error) && LOCAL_SUPPORTED) {
-        // The streamed audio is gone; switch engines and ask for a retry.
-        finalRef.current = ''
-        switchToLocal('Voice service unavailable — switched to on-device. Press again.')
-      } else if (event.error !== 'no-speech' && event.error !== 'aborted') {
-        setError(event.error === 'not-allowed' ? 'Microphone access denied' : `Voice error: ${event.error}`)
+  const refreshDevices = useCallback(async () => {
+    if (!navigator.mediaDevices?.enumerateDevices) return
+    try {
+      const all = await navigator.mediaDevices.enumerateDevices()
+      setDevices(all.filter((d) => d.kind === 'audioinput'))
+    } catch { /* ignore */ }
+  }, [])
+
+  // Device labels are blank until mic permission is granted, so when the user
+  // opens the picker we request a one-shot permission to populate names.
+  const ensureDeviceLabels = useCallback(async () => {
+    if (!navigator.mediaDevices?.enumerateDevices) return
+    try {
+      const all = await navigator.mediaDevices.enumerateDevices()
+      const inputs = all.filter((d) => d.kind === 'audioinput')
+      if (inputs.length && inputs.every((d) => !d.label)) {
+        const s = await navigator.mediaDevices.getUserMedia({ audio: true })
+        s.getTracks().forEach((t) => t.stop())
       }
-    }
+    } catch { /* permission denied → we'll show generic names */ }
+    await refreshDevices()
+  }, [refreshDevices])
 
-    rec.onend = () => {
-      const text = finalRef.current.trim()
-      recognitionRef.current = null
-      setPhase('idle')
-      setInterim('')
-      if (text) onTranscriptRef.current(text)
-    }
+  const toggleDevicePicker = useCallback(() => {
+    setShowDevicePicker((open) => !open)
+  }, [])
+
+  // Populate device labels whenever the picker opens (needs mic permission).
+  useEffect(() => {
+    if (showDevicePicker) void ensureDeviceLabels()
+  }, [showDevicePicker, ensureDeviceLabels])
 
-    recognitionRef.current = rec
+  const chooseDevice = useCallback((id: string | null) => {
+    setSelectedDeviceId(id)
     try {
-      rec.start()
-      setPhase('listening')
+      if (id) localStorage.setItem(DEVICE_KEY, id)
+      else localStorage.removeItem(DEVICE_KEY)
+    } catch { /* ignore */ }
+    setShowDevicePicker(false)
+  }, [])
+
+  // Acquire a stream honoring the saved device, gracefully falling back to the
+  // OS default if that device was unplugged since it was chosen.
+  const getStream = useCallback(async (): Promise<MediaStream> => {
+    const id = selectedDeviceIdRef.current
+    try {
+      return await navigator.mediaDevices.getUserMedia({
+        audio: id ? { deviceId: { exact: id } } : true,
+      })
     } catch (err) {
-      recognitionRef.current = null
-      setPhase('idle')
-      setError('Could not start microphone')
-      console.error('[voice] web speech start failed', err)
+      if (id && (err as { name?: string })?.name === 'OverconstrainedError') {
+        try { localStorage.removeItem(DEVICE_KEY) } catch { /* ignore */ }
+        setSelectedDeviceId(null)
+        setNotice('Saved microphone unavailable — using system default.')
+        return navigator.mediaDevices.getUserMedia({ audio: true })
+      }
+      throw err
     }
-  }, [switchToLocal])
-
-  const stopWebSpeech = useCallback(() => {
-    try { recognitionRef.current?.stop() } catch { /* already stopped */ }
   }, [])
 
-  // ─── Local (Whisper) engine ────────────────────────
+  // Keep the list fresh when devices are plugged/unplugged.
+  useEffect(() => {
+    const md = navigator.mediaDevices
+    if (!md?.addEventListener) return
+    const onChange = () => { void refreshDevices() }
+    md.addEventListener('devicechange', onChange)
+    void refreshDevices()
+    return () => md.removeEventListener('devicechange', onChange)
+  }, [refreshDevices])
+
+  // Close the picker on an outside click.
+  useEffect(() => {
+    if (!showDevicePicker) return
+    const onDocDown = (e: MouseEvent) => {
+      if (!wrapRef.current?.contains(e.target as Node)) setShowDevicePicker(false)
+    }
+    document.addEventListener('mousedown', onDocDown)
+    return () => document.removeEventListener('mousedown', onDocDown)
+  }, [showDevicePicker])
+
+  // ─── On-device (Whisper) transcription ─────────────
 
   const handleModelProgress = useCallback((p: ModelProgress) => {
     if (p.status === 'progress' && typeof p.progress === 'number') {
@@ -203,24 +178,31 @@ export function VoiceInput({ onTranscript, variant = 'titlebar' }: VoiceInputPro
     if (blob.size === 0) { setPhase('idle'); return }
 
     setPhase('transcribing')
-    setInterim('')
+    setPartial('')
     try {
-      const text = await transcribeBlob(blob, handleModelProgress)
+      const text = await transcribeBlob(blob, handleModelProgress, (t) => {
+        // First streamed token means the model is loaded and decoding — drop the
+        // download indicator and start showing the live transcript.
+        setModelPct(null)
+        setPartial(t)
+      })
       if (text) onTranscriptRef.current(text)
+      else setNotice('No speech detected — check the mic source (▾).')
     } catch (err) {
       setError('On-device transcription failed')
       console.error('[voice] local transcription failed', err)
     } finally {
       setPhase('idle')
       setModelPct(null)
+      setPartial('')
     }
   }, [stopStream, handleModelProgress])
 
   const startLocal = useCallback(async () => {
-    setError(null); setNotice(null); setInterim('')
+    setError(null); setNotice(null)
     cancelGestureRef.current = false
     try {
-      const stream = await navigator.mediaDevices.getUserMedia({ audio: true })
+      const stream = await getStream()
       // Released during the permission/await — don't record anything.
       if (cancelGestureRef.current) {
         stream.getTracks().forEach((t) => t.stop())
@@ -241,7 +223,7 @@ export function VoiceInput({ onTranscript, variant = 'titlebar' }: VoiceInputPro
       setError(describeMicError(err))
       console.error('[voice] getUserMedia failed', err)
     }
-  }, [runLocalTranscription, stopStream])
+  }, [runLocalTranscription, stopStream, getStream])
 
   const stopLocal = useCallback(() => {
     cancelGestureRef.current = true
@@ -254,21 +236,18 @@ export function VoiceInput({ onTranscript, variant = 'titlebar' }: VoiceInputPro
   // ─── Push-to-talk gesture ──────────────────────────
 
   const handlePointerDown = (e: React.PointerEvent) => {
-    if (!ANY_SUPPORTED || phase !== 'idle') return
+    if (!LOCAL_SUPPORTED || phase !== 'idle') return
     e.preventDefault()
     e.currentTarget.setPointerCapture?.(e.pointerId)
-    if (engineRef.current === 'web-speech' && WEB_SPEECH_SUPPORTED) startWebSpeech()
-    else if (LOCAL_SUPPORTED) void startLocal()
+    void startLocal()
   }
   const handlePointerUp = (e: React.PointerEvent) => {
     e.currentTarget.releasePointerCapture?.(e.pointerId)
-    if (engineRef.current === 'web-speech') stopWebSpeech()
-    else stopLocal()
+    stopLocal()
   }
 
   // Clean up on unmount.
   useEffect(() => () => {
-    try { recognitionRef.current?.abort() } catch { /* ignore */ }
     try { recorderRef.current?.stop() } catch { /* ignore */ }
     streamRef.current?.getTracks().forEach((t) => t.stop())
   }, [])
@@ -278,33 +257,53 @@ export function VoiceInput({ onTranscript, variant = 'titlebar' }: VoiceInputPro
   const listening = phase === 'listening'
   const busy = phase === 'transcribing'
 
-  const title = !ANY_SUPPORTED
+  const title = !LOCAL_SUPPORTED
     ? 'Voice typing not supported in this build'
     : listening
       ? 'Listening… release to insert'
       : busy
         ? 'Transcribing…'
-        : engine === 'local'
-          ? 'Hold to talk (on-device) — speech is typed into the terminal'
-          : 'Hold to talk — speech is typed into the terminal'
+        : 'Hold to talk (on-device) — speech is typed into the terminal'
 
   let chip: { kind: 'listening' | 'busy' | 'notice' | 'error'; text: string } | null = null
   if (error && phase === 'idle') chip = { kind: 'error', text: error }
   else if (notice && phase === 'idle') chip = { kind: 'notice', text: notice }
-  else if (listening) chip = { kind: 'listening', text: interim || (engine === 'local' ? 'Recording…' : 'Listening…') }
-  else if (busy) chip = { kind: 'busy', text: modelPct !== null ? `Downloading voice model… ${modelPct}%` : 'Transcribing…' }
+  else if (listening) chip = { kind: 'listening', text: 'Recording…' }
+  else if (busy) {
+    // Show the most recent ~90 chars of the live transcript as a ticker so a long
+    // dictation doesn't overflow the chip.
+    const preview = partial.length > 90 ? '…' + partial.slice(-90) : partial
+    chip = {
+      kind: 'busy',
+      text: modelPct !== null ? `Downloading voice model… ${modelPct}%` : (preview || 'Transcribing…'),
+    }
+  }
 
   const floating = variant === 'floating'
   const btnClass = floating
     ? `voice-btn voice-btn-floating ${listening ? 'listening' : ''} ${busy ? 'busy' : ''}`
     : `titlebar-btn titlebar-icon-btn voice-btn ${listening ? 'listening' : ''} ${busy ? 'busy' : ''}`
 
+  // Hide Chromium's synthetic "default"/"communications" aggregate entries from
+  // the list; we expose our own "System default" item instead.
+  const realDevices = devices.filter(
+    (d) => d.deviceId && d.deviceId !== 'default' && d.deviceId !== 'communications',
+  )
+  const rawDefault = devices.find((d) => d.deviceId === 'default')?.label
+  const defaultLabel = rawDefault
+    ? `System default · ${rawDefault.replace(/^Default\s*-\s*/i, '')}`
+    : 'System default'
+  const activeLabel = selectedDeviceId
+    ? (realDevices.find((d) => d.deviceId === selectedDeviceId)?.label || 'Selected microphone')
+    : defaultLabel
+  const showSourcePicker = floating && LOCAL_SUPPORTED
+
   return (
-    <div className="voice-input-wrap">
+    <div className="voice-input-wrap" ref={wrapRef}>
       <button
         type="button"
         className={btnClass}
-        disabled={!ANY_SUPPORTED}
+        disabled={!LOCAL_SUPPORTED}
         onPointerDown={handlePointerDown}
         onPointerUp={handlePointerUp}
         onPointerCancel={handlePointerUp}
@@ -315,6 +314,50 @@ export function VoiceInput({ onTranscript, variant = 'titlebar' }: VoiceInputPro
         <span className="voice-icon" aria-hidden="true">🎤</span>
         <span className={`voice-dot ${listening ? 'on' : busy ? 'busy' : 'off'}`} />
       </button>
+      {showSourcePicker && (
+        <button
+          type="button"
+          className="voice-source-btn"
+          onPointerDown={(e) => e.stopPropagation()}
+          onClick={toggleDevicePicker}
+          title={`Mic source: ${activeLabel}`}
+          aria-label="Choose microphone source"
+          aria-expanded={showDevicePicker}
+        >
+          ▾
+        </button>
+      )}
+      {showSourcePicker && showDevicePicker && (
+        <div className="voice-source-menu" role="menu">
+          <div className="voice-source-head">Microphone source</div>
+          <button
+            type="button"
+            role="menuitemradio"
+            aria-checked={selectedDeviceId === null}
+            className={`voice-source-item ${selectedDeviceId === null ? 'active' : ''}`}
+            onClick={() => chooseDevice(null)}
+          >
+            <span className="voice-source-check">{selectedDeviceId === null ? '✓' : ''}</span>
+            <span className="voice-source-label">{defaultLabel}</span>
+          </button>
+          {realDevices.map((d, i) => (
+            <button
+              key={d.deviceId}
+              type="button"
+              role="menuitemradio"
+              aria-checked={selectedDeviceId === d.deviceId}
+              className={`voice-source-item ${selectedDeviceId === d.deviceId ? 'active' : ''}`}
+              onClick={() => chooseDevice(d.deviceId)}
+            >
+              <span className="voice-source-check">{selectedDeviceId === d.deviceId ? '✓' : ''}</span>
+              <span className="voice-source-label">{d.label || `Microphone ${i + 1}`}</span>
+            </button>
+          ))}
+          {realDevices.length === 0 && (
+            <div className="voice-source-empty">No microphones found</div>
+          )}
+        </div>
+      )}
       {chip && <div className={`voice-chip ${chip.kind} ${floating ? 'voice-chip-floating' : ''}`}>{chip.text}</div>}
     </div>
   )

package/src/renderer/index.html

@@ -4,9 +4,71 @@
   <meta charset="UTF-8" />
   <meta name="viewport" content="width=device-width, initial-scale=1.0" />
   <title>ctlsurf-worker</title>
+  <!-- Boot splash styles are inlined here so they paint on the first frame,
+       before the JS bundle and styles.css have loaded. Without this the window
+       shows an empty dark pane while React mounts and the startup IPC runs. -->
+  <style>
+    #boot-splash {
+      position: fixed;
+      inset: 0;
+      z-index: 9999;
+      display: flex;
+      flex-direction: column;
+      align-items: center;
+      justify-content: center;
+      gap: 16px;
+      background: #1a1b26;
+      font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
+      transition: opacity 0.3s ease;
+      -webkit-app-region: drag; /* keep the frameless window draggable during load */
+    }
+    #boot-splash.boot-splash-hidden {
+      opacity: 0;
+      pointer-events: none;
+    }
+    .boot-spinner {
+      width: 34px;
+      height: 34px;
+      border-radius: 50%;
+      border: 3px solid rgba(122, 162, 247, 0.22);
+      border-top-color: #7aa2f7;
+      animation: boot-spin 0.8s linear infinite;
+    }
+    @keyframes boot-spin {
+      to { transform: rotate(360deg); }
+    }
+    .boot-splash-title {
+      font-size: 15px;
+      font-weight: 600;
+      letter-spacing: 0.02em;
+      color: #c0caf5;
+    }
+    .boot-splash-label {
+      font-size: 12px;
+      letter-spacing: 0.04em;
+      color: #565f89;
+    }
+  </style>
 </head>
 <body>
+  <div id="boot-splash">
+    <div class="boot-spinner"></div>
+    <div class="boot-splash-title">ctlsurf</div>
+    <div class="boot-splash-label">Starting up…</div>
+  </div>
   <div id="root"></div>
+  <script>
+    // Fades out and removes the boot splash. Called by the React app once its
+    // startup IPC has settled (see App.tsx). The timeout is a safety net so a
+    // hung startup never leaves the user stuck behind the splash forever.
+    window.__dismissSplash = function () {
+      var el = document.getElementById('boot-splash')
+      if (!el) return
+      el.classList.add('boot-splash-hidden')
+      setTimeout(function () { el.remove() }, 350)
+    }
+    setTimeout(function () { window.__dismissSplash() }, 10000)
+  </script>
   <script type="module" src="./main.tsx"></script>
 </body>
 </html>

package/src/renderer/lib/localWhisper.ts

@@ -6,6 +6,37 @@
 const MODEL = 'Xenova/whisper-base'
 const TARGET_SAMPLE_RATE = 16000
 
+// Whisper hallucinates filler tokens ("you", "Thank you.", "Thanks for
+// watching.") when fed silence. Two guards below tame that:
+//  - Below SILENCE_RMS we treat the clip as silent and skip the model entirely.
+//  - Between SILENCE_RMS and LOW_CONFIDENCE_RMS we still run the model but drop
+//    the result if it's *only* a known filler phrase (likely a hallucination on
+//    a quiet clip rather than real speech).
+const SILENCE_RMS = 0.008
+const LOW_CONFIDENCE_RMS = 0.02
+const FILLER_PHRASES = new Set([
+  'you',
+  'thank you',
+  'thank you very much',
+  'thank you for watching',
+  'thanks for watching',
+  'please subscribe',
+])
+
+// Root-mean-square amplitude of the clip — a cheap loudness proxy. Normalized
+// speech sits around 0.05–0.15; a silent room is well under 0.005.
+function computeRms(pcm: Float32Array): number {
+  if (pcm.length === 0) return 0
+  let sum = 0
+  for (let i = 0; i < pcm.length; i++) sum += pcm[i] * pcm[i]
+  return Math.sqrt(sum / pcm.length)
+}
+
+function isFillerOnly(text: string): boolean {
+  const norm = text.toLowerCase().replace(/[.!?,…"']/g, '').replace(/\s+/g, ' ').trim()
+  return FILLER_PHRASES.has(norm)
+}
+
 export interface ModelProgress {
   status: string
   file?: string
@@ -76,13 +107,70 @@ async function blobToPcm16k(blob: Blob): Promise<Float32Array | null> {
   return rendered.getChannelData(0)
 }
 
-export async function transcribeBlob(blob: Blob, onProgress?: (p: ModelProgress) => void): Promise<string> {
-  const transcriber = await loadTranscriber(onProgress)
+export async function transcribeBlob(
+  blob: Blob,
+  onProgress?: (p: ModelProgress) => void,
+  // Optional live preview: called with the transcript-so-far as the model
+  // decodes, for progressive on-screen feedback. The return value (below) is
+  // still the authoritative, de-duplicated text used for the actual insert.
+  onPartial?: (text: string) => void,
+): Promise<string> {
+  // Decode first so a silent clip never triggers the (one-time, ~75MB) model
+  // download just to be thrown away below.
   const pcm = await blobToPcm16k(blob)
   if (!pcm) return ''
-  const result = await transcriber(pcm)
-  const text = Array.isArray(result)
+  const rms = computeRms(pcm)
+  if (rms < SILENCE_RMS) {
+    console.info(`[voice] near-silent clip (rms=${rms.toFixed(4)}); skipping transcription`)
+    return ''
+  }
+
+  const transcriber = await loadTranscriber(onProgress)
+
+  // Stream decoded text to onPartial as it's generated. `committed` holds text
+  // from finished chunks; `current` is the in-progress chunk — keeping them
+  // separate avoids the stride overlap duplicating words across 30s boundaries
+  // in the preview. Best-effort: if the streamer can't be built we just skip the
+  // preview and still return the final text.
+  let streamer: unknown
+  if (onPartial) {
+    try {
+      const { WhisperTextStreamer } = await import('@huggingface/transformers')
+      const tokenizer = (transcriber as unknown as {
+        tokenizer: ConstructorParameters<typeof WhisperTextStreamer>[0]
+      }).tokenizer
+      let committed = ''
+      let current = ''
+      streamer = new WhisperTextStreamer(tokenizer, {
+        on_chunk_start: () => { current = '' },
+        callback_function: (delta: string) => {
+          current += delta
+          onPartial((committed + current).replace(/\s+/g, ' ').trim())
+        },
+        on_chunk_end: () => { committed = (committed + current).trim() + ' '; current = '' },
+      })
+    } catch (err) {
+      console.warn('[voice] streaming preview unavailable', err)
+    }
+  }
+
+  // Whisper only attends to a 30s window at a time. Without chunk_length_s the
+  // pipeline truncates to that first window, silently dropping anything spoken
+  // past ~30s. Chunking transcribes the full clip in overlapping 30s windows
+  // (stride gives overlap so words aren't lost at the seams) so long speeches
+  // are captured in full.
+  const result = await transcriber(pcm, {
+    chunk_length_s: 30,
+    stride_length_s: 5,
+    ...(streamer ? { streamer } : {}),
+  })
+  const text = (Array.isArray(result)
     ? result.map((r) => r.text).join(' ')
-    : result?.text
-  return (text || '').trim()
+    : result?.text || '').trim()
+
+  if (text && rms < LOW_CONFIDENCE_RMS && isFillerOnly(text)) {
+    console.info(`[voice] dropping filler-only output "${text}" from quiet clip (rms=${rms.toFixed(4)})`)
+    return ''
+  }
+  return text
 }