@pheem49/mint 1.14.0 → 1.16.0

package/src/renderer/shared/utils/speech.ts

@@ -23,6 +23,7 @@ export function useSpeechToText({
   const [voiceAwaitingResponse, setVoiceAwaitingResponse] = useState(false)
 
   const recognitionRef = useRef<any>(null)
+  const resolveStartRef = useRef<((started: boolean) => void) | null>(null)
   const silenceTimerRef = useRef<number | null>(null)
   const restartTimerRef = useRef<number | null>(null)
 
@@ -75,8 +76,25 @@ export function useSpeechToText({
     clearRestartTimer()
     clearSilenceTimer()
     recognitionRef.current?.stop()
+    setIsRecording(false)
+    setVoiceMode(false)
+  }
+
+  const cancelRecognition = () => {
+    clearRestartTimer()
+    clearSilenceTimer()
+    const recognition = recognitionRef.current
     recognitionRef.current = null
+    resolveStartRef.current?.(false)
+    resolveStartRef.current = null
+    if (recognition) {
+      recognition.onstart = recognition.onresult = recognition.onend = recognition.onerror = null
+      try { recognition.abort() } catch {}
+    }
+    voiceModeRef.current = false
+    setVoiceMode(false)
     setIsRecording(false)
+    setVoiceTranscript('')
   }
 
   const scheduleVoiceListen = (delayMs = 350) => {
@@ -88,18 +106,19 @@ export function useSpeechToText({
     }, delayMs)
   }
 
-  const startRecognition = (autoSend: boolean) => {
-    if (recognitionRef.current || sendingRef.current || voiceAwaitingResponseRef.current || isSpeakingRef.current) return
+  const startRecognition = (autoSend = false): Promise<boolean> => {
+    if (recognitionRef.current || sendingRef.current || voiceAwaitingResponseRef.current || isSpeakingRef.current) return Promise.resolve(false)
 
     const SpeechRecognitionApi = (window as any).SpeechRecognition || (window as any).webkitSpeechRecognition
     if (!SpeechRecognitionApi) {
-      alert('Speech-to-text (Speech Recognition) is not supported in this browser/WebView. Please use Google Chrome or Microsoft Edge to enable voice conversation.')
+      setVoiceTranscript('Speech recognition is unavailable in this browser. Use Chrome or Edge.')
       voiceModeRef.current = false
-      setVoiceMode(false)
-      return
+      setVoiceMode(true)
+      return Promise.resolve(false)
     }
 
     let accumulatedTranscript = ''
+    const started = new Promise<boolean>(resolve => { resolveStartRef.current = resolve })
     clearSilenceTimer()
 
     try {
@@ -118,9 +137,14 @@ export function useSpeechToText({
       }
 
       recognition.onstart = () => {
+        if (recognitionRef.current !== recognition) return
         setIsRecording(true)
+        setVoiceMode(true)
+        resolveStartRef.current?.(true)
+        resolveStartRef.current = null
       }
       recognition.onresult = (event: any) => {
+        if (recognitionRef.current !== recognition) return
         let interimText = ''
         let finalText = ''
         for (let index = event.resultIndex; index < event.results.length; index += 1) {
@@ -141,12 +165,21 @@ export function useSpeechToText({
         }
       }
       recognition.onerror = (event: any) => {
-        console.error('Speech recognition error', event)
+        if (recognitionRef.current !== recognition) return
+        resolveStartRef.current?.(false)
+        resolveStartRef.current = null
+        setVoiceTranscript(event.error === 'not-allowed' ? 'Microphone permission denied' : `Speech recognition error: ${event.error}`)
+        voiceModeRef.current = false
+        setVoiceMode(false)
         setIsRecording(false)
         clearSilenceTimer()
       }
       recognition.onend = () => {
+        if (recognitionRef.current !== recognition) return
+        resolveStartRef.current?.(false)
+        resolveStartRef.current = null
         recognitionRef.current = null
+        if (!autoSend) { voiceModeRef.current = false; setVoiceMode(false) }
         setIsRecording(false)
         clearSilenceTimer()
         const finalText = accumulatedTranscript.trim()
@@ -170,17 +203,21 @@ export function useSpeechToText({
       }
       recognitionRef.current = recognition
       recognition.start()
+      return started
     } catch (error) {
-      console.error('Failed to start speech recognition', error)
+      resolveStartRef.current?.(false)
+      resolveStartRef.current = null
+      setVoiceTranscript(error instanceof Error ? error.message : String(error))
       recognitionRef.current = null
       setIsRecording(false)
       clearSilenceTimer()
+      return Promise.resolve(false)
     }
   }
 
   // Auto-listen trigger
   useEffect(() => {
-    if (!voiceMode || sending || voiceAwaitingResponse || isSpeaking || isRecording) return
+    if (!voiceMode || sending || voiceAwaitingResponse || isSpeaking || isRecording || recognitionRef.current) return
     scheduleVoiceListen()
   }, [voiceMode, sending, voiceAwaitingResponse, isSpeaking, isRecording])
 
@@ -189,9 +226,13 @@ export function useSpeechToText({
     return () => {
       clearRestartTimer()
       clearSilenceTimer()
+      resolveStartRef.current?.(false)
+      resolveStartRef.current = null
       if (recognitionRef.current) {
         try {
-          recognitionRef.current.stop()
+          const recognition = recognitionRef.current
+          recognition.onstart = recognition.onresult = recognition.onend = recognition.onerror = null
+          recognition.abort()
         } catch (e) {
           // ignore
         }
@@ -210,6 +251,7 @@ export function useSpeechToText({
     voiceModeRef,
     startRecognition,
     stopRecognition,
+    cancelRecognition,
     scheduleVoiceListen,
     clearRestartTimer
   }

package/src/renderer/shared/utils/syntaxHighlight.test.tsx

@@ -0,0 +1,22 @@
+import { describe, expect, it } from 'vitest'
+import { renderToStaticMarkup } from 'react-dom/server'
+import { renderHighlightedCode } from './syntaxHighlight'
+
+describe('highlight reuse', () => {
+  it('reuses unchanged code across rerenders and message remounts', () => {
+    const first = renderHighlightedCode('const answer = 42', 'typescript', true)
+    expect(renderHighlightedCode('const answer = 42', 'typescript', true)).toBe(first)
+  })
+  it('does not reuse stale text, language, or line-number settings', () => {
+    const first = renderHighlightedCode('const answer = 42', 'typescript', true)
+    expect(renderHighlightedCode('const answer = 43', 'typescript', true)).not.toBe(first)
+    expect(renderHighlightedCode('const answer = 42', 'plaintext', true)).not.toBe(first)
+    const withoutNumbers = renderHighlightedCode('const answer = 42', 'typescript', false)
+    expect(renderToStaticMarkup(withoutNumbers)).not.toContain('chat-code-line-num')
+  })
+  it('evicts old entries instead of retaining every visited code block', () => {
+    const first = renderHighlightedCode('const evicted = 0', 'typescript')
+    for (let i = 0; i < 100; i++) renderHighlightedCode(`const other = ${i}`, 'typescript')
+    expect(renderHighlightedCode('const evicted = 0', 'typescript')).not.toBe(first)
+  })
+})

package/src/renderer/shared/utils/syntaxHighlight.tsx

@@ -335,6 +335,32 @@ export function renderHighlightedCode(
   language: string,
   showLineNumbers = true
 ): ReactNode {
+  const key = `${language}:${showLineNumbers ? 1 : 0}:${code}`
+  const cached = highlightedCodeCache.get(key)
+  if (cached) {
+    highlightedCodeCache.delete(key)
+    highlightedCodeCache.set(key, cached)
+    return cached.node
+  }
+  const node = buildHighlightedCode(code, language, showLineNumbers)
+  // Bound retained source and React elements when virtualized rows remount.
+  // Large blocks still get per-component memoization without global retention.
+  if (code.length <= 50_000) {
+    highlightedCodeCache.set(key, { node, chars: code.length })
+    cachedCodeChars += code.length
+    while (highlightedCodeCache.size > 32 || cachedCodeChars > 100_000) {
+      const oldest = highlightedCodeCache.keys().next().value!
+      cachedCodeChars -= highlightedCodeCache.get(oldest)!.chars
+      highlightedCodeCache.delete(oldest)
+    }
+  }
+  return node
+}
+
+const highlightedCodeCache = new Map<string, { node: ReactNode; chars: number }>()
+let cachedCodeChars = 0
+
+function buildHighlightedCode(code: string, language: string, showLineNumbers: boolean): ReactNode {
   const lines = code.split('\n')
 
   return (

package/src/renderer/shared/utils/ui.ts

@@ -135,71 +135,11 @@ export async function createTrimmedImagePreview(dataUri: string): Promise<string
   return previewCanvas.toDataURL('image/png')
 }
 
-export const lightenColor = (hex: string, amount: number): string => {
-  const clean = hex.replace('#', '')
-  if (clean.length !== 6) return hex
-  const num = parseInt(clean, 16)
-  const r = Math.min(255, (num >> 16) + amount)
-  const g = Math.min(255, ((num >> 8) & 0x00FF) + amount)
-  const b = Math.min(255, (num & 0x0000FF) + amount)
-  return `#${((r << 16) | (g << 8) | b).toString(16).padStart(6, '0')}`
-}
+import { applyTheme, hexToRgb, lightenColor, getContrastText } from '../theme/themeManager'
+export { hexToRgb, lightenColor, getContrastText }
 
-export const hexToRgb = (hex: string): { r: number; g: number; b: number } => {
-  const result = /^#?([a-f\d]{2})([a-f\d]{2})([a-f\d]{2})$/i.exec(hex)
-  return result ? {
-    r: parseInt(result[1], 16),
-    g: parseInt(result[2], 16),
-    b: parseInt(result[3], 16),
-  } : { r: 15, g: 23, b: 42 }
+export const applyThemeStyles = (cfg: any): void => {
+  applyTheme(cfg)
 }
 
-export const applyThemeStyles = (cfg: any): void => {
-  const theme = cfg.theme || 'dark'
-  const accentColor = cfg.accentColor || '#ffffffff'
-  const systemTextColor = cfg.systemTextColor || '#f8fafc'
-  const rgb = hexToRgb(accentColor)
-
-  document.documentElement.setAttribute('data-theme', theme)
-  document.documentElement.style.setProperty('--accent', accentColor)
-  document.documentElement.style.setProperty('--accent-hover', lightenColor(accentColor, 20))
-  document.documentElement.style.setProperty('--accent-glow', `rgba(${rgb.r}, ${rgb.g}, ${rgb.b}, 0.35)`)
-  document.documentElement.style.setProperty('--accent-subtle', `rgba(${rgb.r}, ${rgb.g}, ${rgb.b}, 0.15)`)
-  document.documentElement.style.setProperty('--accent-border', `rgba(${rgb.r}, ${rgb.g}, ${rgb.b}, 0.3)`)
-  const chatTextColor = cfg.chatTextColor || systemTextColor
-  document.documentElement.style.setProperty('--text-main', systemTextColor)
-  document.documentElement.style.setProperty('--text-chat', chatTextColor)
-  document.documentElement.style.setProperty('--glass-blur', cfg.glassBlur || 'blur(16px)')
-  document.body.style.fontFamily = cfg.fontFamily || "'Outfit', sans-serif"
-  document.documentElement.style.fontSize = cfg.fontSize || '18px'
-
-  if (theme === 'custom') {
-    if (cfg.customBgStart && cfg.customBgEnd) {
-      document.documentElement.style.setProperty('--bg-color', cfg.customBgStart)
-      document.documentElement.style.setProperty('--bg-gradient', `linear-gradient(135deg, ${cfg.customBgStart} 0%, ${cfg.customBgEnd} 100%)`)
-    }
-    if (cfg.customPanelBg) {
-      const rgb = hexToRgb(cfg.customPanelBg)
-      document.documentElement.style.setProperty('--panel-bg', `rgba(${rgb.r}, ${rgb.g}, ${rgb.b}, 0.75)`)
-      document.documentElement.style.setProperty('--panel-raised', `rgba(${rgb.r}, ${rgb.g}, ${rgb.b}, 0.82)`)
-      document.documentElement.style.setProperty('--panel-soft', `rgba(${rgb.r}, ${rgb.g}, ${rgb.b}, 0.46)`)
-      document.documentElement.style.setProperty('--chrome-bg', `rgba(${rgb.r}, ${rgb.g}, ${rgb.b}, 0.88)`)
-      document.documentElement.style.setProperty('--surface-bg', `rgba(${rgb.r}, ${rgb.g}, ${rgb.b}, 0.62)`)
-      document.documentElement.style.setProperty('--surface-strong', `rgba(${rgb.r}, ${rgb.g}, ${rgb.b}, 0.86)`)
-      document.documentElement.style.setProperty('--input-bg', `rgba(${rgb.r}, ${rgb.g}, ${rgb.b}, 0.72)`)
-    }
-    return
-  }
 
-  ;[
-    '--bg-color',
-    '--bg-gradient',
-    '--panel-bg',
-    '--panel-raised',
-    '--panel-soft',
-    '--chrome-bg',
-    '--surface-bg',
-    '--surface-strong',
-    '--input-bg',
-  ].forEach((prop) => document.documentElement.style.removeProperty(prop))
-}

package/src/renderer/shared/utils/useGeminiLiveVoice.ts

@@ -51,12 +51,17 @@ export function useGeminiLiveVoice({ workspacePath, chatId, startSession, sendAu
   const [voiceAwaitingResponse, setVoiceAwaitingResponse] = useState(false)
   const [isPaused, setIsPaused] = useState(false)
   const [isSpeaking, setIsSpeaking] = useState(false)
+  const [errorMessage, setErrorMessage] = useState('')
 
   const voiceModeRef = useRef(false)
   const voiceAwaitingResponseRef = useRef(false)
   const isPausedRef = useRef(false)
   const sessionIdRef = useRef<string | null>(null)
   const audioContextRef = useRef<AudioContext | null>(null)
+  const analyserRef = useRef<AnalyserNode | null>(null)
+  const generationRef = useRef(0)
+  const playbackSourcesRef = useRef(new Set<AudioBufferSourceNode>())
+  const stopRef = useRef<() => void>(() => {})
   const micStreamRef = useRef<MediaStream | null>(null)
   const captureNodesRef = useRef<{ source: MediaStreamAudioSourceNode; processor: ScriptProcessorNode } | null>(null)
   const nextPlaybackTimeRef = useRef(0)
@@ -76,6 +81,11 @@ export function useGeminiLiveVoice({ workspacePath, chatId, startSession, sendAu
   const ensureAudioContext = useCallback((): AudioContext => {
     if (!audioContextRef.current || audioContextRef.current.state === 'closed') {
       audioContextRef.current = new AudioContext()
+      analyserRef.current = audioContextRef.current.createAnalyser()
+      analyserRef.current.fftSize = 512
+      analyserRef.current.smoothingTimeConstant = 0.3
+      analyserRef.current.minDecibels = -90
+      analyserRef.current.maxDecibels = -10
     }
     return audioContextRef.current
   }, [])
@@ -94,6 +104,9 @@ export function useGeminiLiveVoice({ workspacePath, chatId, startSession, sendAu
     const source = ctx.createBufferSource()
     source.buffer = buffer
     source.connect(ctx.destination)
+    if (analyserRef.current) source.connect(analyserRef.current)
+    playbackSourcesRef.current.add(source)
+    source.onended = () => { playbackSourcesRef.current.delete(source); source.disconnect() }
 
     const startAt = Math.max(ctx.currentTime, nextPlaybackTimeRef.current)
     source.start(startAt)
@@ -132,13 +145,16 @@ export function useGeminiLiveVoice({ workspacePath, chatId, startSession, sendAu
         console.error('Gemini Live session error', event.message)
         transcriptRoleRef.current = null
         setAssistantTranscript(event.message)
+        setErrorMessage(event.message)
         break
       case 'closed':
+        stopRef.current()
         setIsRecording(false)
         setVoiceAwaitingResponse(false)
         setIsSpeaking(false)
         sessionIdRef.current = null
         transcriptRoleRef.current = null
+        setErrorMessage('Live connection closed')
         break
     }
   }, [playAudioChunk])
@@ -152,7 +168,17 @@ export function useGeminiLiveVoice({ workspacePath, chatId, startSession, sendAu
   }, [])
 
   const stop = useCallback(() => {
+    ++generationRef.current
     stopCapture()
+    for (const source of playbackSourcesRef.current) {
+      try { source.stop(); source.disconnect() } catch { /* Already ended. */ }
+    }
+    playbackSourcesRef.current.clear()
+    analyserRef.current?.disconnect()
+    analyserRef.current = null
+    const context = audioContextRef.current
+    audioContextRef.current = null
+    if (context && context.state !== 'closed') void context.close().catch(error => console.error('Failed to close Live audio', error))
     const sessionId = sessionIdRef.current
     sessionIdRef.current = null
     setIsRecording(false)
@@ -167,6 +193,7 @@ export function useGeminiLiveVoice({ workspacePath, chatId, startSession, sendAu
     nextPlaybackTimeRef.current = 0
     if (sessionId) stopSession(sessionId).catch((error) => console.error('Failed to stop Gemini Live session', error))
   }, [stopCapture, stopSession])
+  stopRef.current = stop
 
   const togglePause = useCallback(() => {
     setIsPaused((current) => {
@@ -177,7 +204,9 @@ export function useGeminiLiveVoice({ workspacePath, chatId, startSession, sendAu
   }, [])
 
   const start = useCallback(async () => {
+    const generation = ++generationRef.current
     try {
+      setErrorMessage('')
       transcriptRoleRef.current = null
       setUserTranscript('')
       setAssistantTranscript('')
@@ -193,15 +222,27 @@ export function useGeminiLiveVoice({ workspacePath, chatId, startSession, sendAu
       const stream = await navigator.mediaDevices.getUserMedia({
         audio: { channelCount: 1, echoCancellation: true, noiseSuppression: true, autoGainControl: true }
       })
+      if (generation !== generationRef.current) {
+        stream.getTracks().forEach(track => track.stop())
+        return
+      }
       console.log('[gemini-live] microphone granted, starting session...')
       micStreamRef.current = stream
 
-      const sessionId = await startSession(handleEvent, workspacePath, chatId)
+      const sessionId = await startSession(event => {
+        if (generation === generationRef.current) handleEvent(event)
+      }, workspacePath, chatId)
+      if (generation !== generationRef.current) {
+        await stopSession(sessionId)
+        return
+      }
       console.log('[gemini-live] session started', sessionId)
       sessionIdRef.current = sessionId
 
       const ctx = ensureAudioContext()
       const source = ctx.createMediaStreamSource(stream)
+      if (ctx.state === 'suspended') await ctx.resume()
+      if (generation !== generationRef.current) { source.disconnect(); return }
       const processor = ctx.createScriptProcessor(CAPTURE_BUFFER_SIZE, 1, 1)
       const ratio = ctx.sampleRate / MIC_SAMPLE_RATE
 
@@ -223,20 +264,21 @@ export function useGeminiLiveVoice({ workspacePath, chatId, startSession, sendAu
       }
 
       source.connect(processor)
+      if (analyserRef.current) source.connect(analyserRef.current)
       processor.connect(ctx.destination)
       captureNodesRef.current = { source, processor }
       setIsRecording(true)
       setVoiceAwaitingResponse(true)
     } catch (error) {
+      if (generation !== generationRef.current) return
       console.error('Failed to start Gemini Live voice session', error)
       // Keep voiceMode on so the error stays visible in the voice-mode bar instead of
       // vanishing the instant it appears; the user can dismiss it with the mic button.
       setAssistantTranscript(`Error: ${error instanceof Error ? error.message : String(error)}`)
-      stopCapture()
-      setIsRecording(false)
-      setVoiceAwaitingResponse(false)
+      setErrorMessage(error instanceof Error ? error.message : String(error))
+      stop()
     }
-  }, [handleEvent, workspacePath, chatId, ensureAudioContext, stopCapture, startSession, sendAudioChunk])
+  }, [handleEvent, workspacePath, chatId, ensureAudioContext, stop, startSession, stopSession, sendAudioChunk])
 
   useEffect(() => {
     if (voiceMode) {
@@ -271,6 +313,8 @@ export function useGeminiLiveVoice({ workspacePath, chatId, startSession, sendAu
     isPaused,
     togglePause,
     isSpeaking,
+    analyserRef,
+    errorMessage,
     restart,
     startRecognition: noop,
     stopRecognition: noop,

package/src/renderer/shared/utils/useLatestCallback.ts

@@ -0,0 +1,9 @@
+import { useCallback, useLayoutEffect, useRef } from 'react'
+
+// Memoized messages keep stable event handlers while their actions/settings
+// can change. Events always call the last committed implementation.
+export function useLatestCallback<T extends (...args: any[]) => any>(callback: T): T {
+  const latest = useRef(callback)
+  useLayoutEffect(() => { latest.current = callback }, [callback])
+  return useCallback(((...args: Parameters<T>) => latest.current(...args)) as T, [])
+}

package/src/renderer/shared/utils/useNativeVoiceInput.ts

@@ -1,99 +1,107 @@
 import { useCallback, useEffect, useRef, useState } from 'react'
+import { createNativeRecordingSession, type NativeRecordingBackend } from './nativeRecordingSession'
 
-export interface NativeVoiceInputOptions {
+export interface NativeVoiceInputOptions extends NativeRecordingBackend {
   onSendVoiceMessage: (text: string) => Promise<any>
-  startRecording: () => Promise<void>
-  stopRecordingAndTranscribe: () => Promise<string>
 }
 
-/**
- * Push-to-talk voice input backed by a Rust-side mic recorder (cpal) and
- * whichever chat provider is configured for transcription — desktop only.
- * Replaces the old browser `window.SpeechRecognition`-based `useSpeechToText`,
- * which only worked in Chrome/Edge and not at all in the Tauri desktop
- * webview on Linux.
- *
- * Exposes the same field names `useSpeechToText` did (isRecording/voiceMode/
- * startRecognition/stopRecognition/scheduleVoiceListen/clearRestartTimer) so
- * it drops into a chat panel's mic button without reworking call sites.
- * Unlike the old hook, this is explicit push-to-talk with no continuous
- * auto-relisten loop (there's no mid-recording silence detection — audio only
- * reaches the transcription step after the user presses stop), so
- * `scheduleVoiceListen`/`clearRestartTimer` are no-ops here.
- */
-export function useNativeVoiceInput({ onSendVoiceMessage, startRecording, stopRecordingAndTranscribe }: NativeVoiceInputOptions) {
+/** Explicit push-to-talk, with cancel/stop requests serialized behind device startup. */
+export function useNativeVoiceInput(options: NativeVoiceInputOptions) {
   const [isRecording, setIsRecording] = useState(false)
   const [voiceMode, setVoiceMode] = useState(false)
   const [voiceTranscript, setVoiceTranscript] = useState('')
   const [voiceAwaitingResponse, setVoiceAwaitingResponse] = useState(false)
-
   const voiceAwaitingResponseRef = useRef(false)
   const voiceModeRef = useRef(false)
-
-  useEffect(() => {
-    voiceAwaitingResponseRef.current = voiceAwaitingResponse
-  }, [voiceAwaitingResponse])
-  useEffect(() => {
-    voiceModeRef.current = voiceMode
-  }, [voiceMode])
+  const latest = useRef(options)
+  latest.current = options
+  const mounted = useRef(true)
+  const epoch = useRef(0)
+  const stopping = useRef<Promise<void> | null>(null)
+  const session = useRef<ReturnType<typeof createNativeRecordingSession> | null>(null)
+  session.current ??= createNativeRecordingSession({
+    startRecording: () => latest.current.startRecording(),
+    stopRecordingAndTranscribe: () => latest.current.stopRecordingAndTranscribe(),
+    cancelRecording: () => latest.current.cancelRecording(),
+  })
+  useEffect(() => { voiceAwaitingResponseRef.current = voiceAwaitingResponse }, [voiceAwaitingResponse])
+  useEffect(() => { voiceModeRef.current = voiceMode }, [voiceMode])
 
   const startRecognition = useCallback(async () => {
-    if (isRecording) return
+    if (stopping.current) return false
+    const request = ++epoch.current
     setVoiceTranscript('')
     try {
-      await startRecording()
-      setIsRecording(true)
-      setVoiceMode(true)
+      const started = await session.current!.start()
+      if (started && mounted.current && request === epoch.current) {
+        setIsRecording(true)
+        setVoiceMode(true)
+      }
+      return started && mounted.current && request === epoch.current
     } catch (error) {
-      console.error('Failed to start native mic recording', error)
-      setVoiceTranscript(error instanceof Error ? error.message : String(error))
+      if (mounted.current && request === epoch.current) {
+        setVoiceTranscript(error instanceof Error ? error.message : String(error))
+        setVoiceMode(true)
+      }
+      return false
     }
-  }, [isRecording, startRecording])
+  }, [])
 
-  const stopRecognition = useCallback(async () => {
-    if (!isRecording) return
+  const stopRecognition = useCallback(() => {
+    if (stopping.current) return stopping.current
+    const request = epoch.current
     setIsRecording(false)
     setVoiceAwaitingResponse(true)
     setVoiceTranscript('Transcribing...')
-    try {
-      const text = await stopRecordingAndTranscribe()
-      const trimmed = text.trim()
-      if (trimmed) {
-        setVoiceTranscript(trimmed)
-        await onSendVoiceMessage(trimmed)
-      } else {
-        setVoiceTranscript('No speech detected')
+    const finish = async () => {
+      try {
+        const text = await session.current!.stop()
+        if (!mounted.current || request !== epoch.current || text === null) return
+        const trimmed = text.trim()
+        setVoiceTranscript(trimmed || 'No speech detected')
+        if (trimmed) await latest.current.onSendVoiceMessage(trimmed)
+      } catch (error) {
+        if (mounted.current && request === epoch.current) {
+          setVoiceTranscript(error instanceof Error ? error.message : String(error))
+        }
+      } finally {
+        stopping.current = null
+        if (mounted.current) {
+          setVoiceAwaitingResponse(false)
+          setVoiceMode(false)
+        }
       }
-    } catch (error) {
-      console.error('Native voice transcription failed', error)
-      // Surfaces MicTranscribeError's message verbatim, e.g. "provider 'anthropic'
-      // does not support audio input for voice transcription — switch to a
-      // provider that does..."
-      setVoiceTranscript(error instanceof Error ? error.message : String(error))
-    } finally {
-      setVoiceAwaitingResponse(false)
-      setVoiceMode(false)
     }
-  }, [isRecording, stopRecordingAndTranscribe, onSendVoiceMessage])
+    const task = finish()
+    stopping.current = task
+    return task
+  }, [])
 
-  // No continuous auto-relisten loop under native push-to-talk — kept as no-ops
-  // so existing call sites (which invoke these after TTS playback finishes) stay
-  // harmless without needing to be stripped out everywhere.
+  const cancelRecognition = useCallback(async () => {
+    ++epoch.current
+    setIsRecording(false)
+    setVoiceMode(false)
+    setVoiceTranscript('')
+    try { await session.current!.cancel() } catch (error) {
+      if (mounted.current) {
+        setVoiceTranscript(error instanceof Error ? error.message : String(error))
+        setVoiceMode(true)
+      }
+    }
+  }, [])
+
+  useEffect(() => {
+    mounted.current = true
+    return () => {
+      mounted.current = false
+      ++epoch.current
+      void session.current!.cancel().catch(error => console.error('Failed to close microphone', error))
+    }
+  }, [])
+  // Native recording is one-shot; the legacy voice-conversation scheduling API stays inert.
   const scheduleVoiceListen = useCallback((_delayMs?: number) => {}, [])
   const clearRestartTimer = useCallback(() => {}, [])
-
-  return {
-    isRecording,
-    voiceMode,
-    setVoiceMode,
-    voiceTranscript,
-    setVoiceTranscript,
-    voiceAwaitingResponse,
-    voiceAwaitingResponseRef,
-    voiceModeRef,
-    startRecognition,
-    stopRecognition,
-    scheduleVoiceListen,
-    clearRestartTimer
-  }
+  return { isRecording, voiceMode, setVoiceMode, voiceTranscript, setVoiceTranscript,
+    voiceAwaitingResponse, voiceAwaitingResponseRef, voiceModeRef, startRecognition,
+    stopRecognition, cancelRecognition, scheduleVoiceListen, clearRestartTimer }
 }

package/src/renderer/shared/utils/useSessionSources.ts

@@ -0,0 +1,33 @@
+import { useCallback, useEffect, useMemo, useState } from 'react'
+import { conversationPlatform } from '../platform'
+import type { AgentProgress, ConversationSources } from '../types'
+import { collectSessionSources } from './sessionSources'
+
+/** Shared session ownership and polling for the Desktop and Web source panels. */
+export function useSessionSources(chatId: string, liveProgress: AgentProgress[], enabled: boolean) {
+  const [state, setState] = useState<{ chatId: string; value: ConversationSources | null; error: string; loading: boolean } | null>(null)
+  const [attempt, setAttempt] = useState(0)
+  const retry = useCallback(() => setAttempt(value => value + 1), [])
+  useEffect(() => {
+    if (!enabled) return
+    let disposed = false
+    let busy = false
+    setState({ chatId, value: null, error: '', loading: true })
+    const load = async () => {
+      if (busy || document.hidden) return
+      busy = true
+      try {
+        const value = await conversationPlatform.getConversationSources(chatId)
+        if (!disposed) setState({ chatId, value, error: '', loading: false })
+      } catch (error) {
+        if (!disposed) setState(previous => ({ chatId, value: previous?.chatId === chatId ? previous.value : null, error: String(error), loading: false }))
+      } finally { busy = false }
+    }
+    void load()
+    const timer = window.setInterval(() => { void load() }, 2000)
+    return () => { disposed = true; window.clearInterval(timer) }
+  }, [enabled, chatId, attempt])
+  const current = state?.chatId === chatId ? state : null
+  const sources = useMemo(() => enabled ? collectSessionSources(current?.value ?? { attachments: [], webSearchProgress: [] }, liveProgress) : [], [enabled, current, liveProgress])
+  return { sources, loading: enabled && (!current || current.loading), error: current?.error || '', retry }
+}