Fix voice input garbled/repeated text after silence timeout

[brendanlong]

Summary

• Fixes garbled/repeated words in voice input after the browser auto-restarts SpeechRecognition on a silence timeout
• Adds tests for useVoiceRecording behavior (currently skipped pending infrastructure fix in Fix React.act infrastructure issue in jsdom component tests (React 19 + @testing-library/react) #320)

Root Cause

When the browser's SpeechRecognition stops due to silence (some browsers do this even with continuous: true), the onend handler restarts it by calling recognition.start(). Chrome creates a fresh results list starting at index 0 for the new session, but lastFinalizedLengthRef.current still held the character offset from the previous session.

This caused the onresult handler to either:

• Skip new words (if new finals.length < old offset)
• Report garbled mid-word substrings (if new finals.length eventually exceeded the old offset)

Fix

Reset lastFinalizedLengthRef.current = 0 before calling recognition.start() in the auto-restart path, so the new session's results are processed from index 0 correctly.

recognition.onend = () => {
  if (recognitionRef.current === recognition) {
    try {
      // Reset offset — new session starts a fresh results list from index 0
      lastFinalizedLengthRef.current = 0;
      recognition.start();
    } catch { ... }
  }
};

Test plan

• Manual: use voice input, pause speaking for a few seconds (to trigger silence timeout + auto-restart), then continue speaking — words should appear correctly without garbling
• Unit tests pass: pnpm test:run

Fixes #317

🤖 Generated with Claude Code

[gemini-code-assist]

Code Review

This pull request introduces a new test suite for the useVoiceRecording hook and fixes a bug where the finalized text offset was not reset during automatic session restarts. The Vitest configuration has been updated to include these tests in the jsdom environment, though they are currently skipped. A review comment suggests also resetting the interim transcript state during auto-restarts to ensure UI consistency and prevent stale text from persisting.

[gemini-code-assist]

When auto-restarting the recognition session after a silence timeout, it is important to also reset the interim transcript state. Since the new session starts with a fresh results list, any existing interim text from the previous session is no longer valid and would persist in the UI until the new session produces its first result. Resetting interimRef.current and calling setInterimTranscript('') ensures the UI stays consistent with the recognition state and aligns with the practice of using useRef for synchronous state tracking to avoid race conditions from stale closures.

          lastFinalizedLengthRef.current = 0;
          interimRef.current = '';
          setInterimTranscript('');

References

1. To avoid race conditions from stale closures in React callbacks that are called multiple times within a single render cycle, use a useRef for synchronous state tracking instead of relying on useState, which is subject to batching.