feat(voice): full Yapper voice integration (STT + TTS + streaming)

[dimakis]

Summary

• Phase 1 — Batch STT: Audio capture with MediaRecorder format negotiation (WebM/Opus → MP4 fallback), useVoice hook with Yapper health polling, push-to-talk MicButton, wired into ChatInput/ChatView
• Phase 2 — TTS Playback: Chunked text synthesis via /v1/synthesize, AudioContext singleton, sequential playback with AbortController cancellation, VoiceSettings component (toggle + voice picker), auto-speak on assistant message completion
• Phase 3 — Streaming STT: WebSocket client for /v1/transcribe/stream, streaming MediaRecorder with timeslice chunks, live partial transcript overlay in ChatInput, batch fallback on WS failure

What's new

Layer	Files	What
Audio capture	audio.ts	createRecorder() + createStreamingRecorder() with format negotiation
WS client	yapper-ws.ts	createYapperStreamClient() — queued sends, JSON transcript parsing
TTS	tts.ts	chunkText(), synthesize(), playAudio(), AudioContext singleton
Hook	useVoice.ts	Central voice state — health, recording (stream+batch), TTS, partials
Components	MicButton, VoiceSettings, ChatInput updates	Push-to-talk, TTS controls, partial transcript overlay
Page	ChatView.tsx	Owns useVoice(), auto-speak effect, stops speaking on send
Design docs	streaming-stt.md, tts-playback.md	Architecture decisions and protocol details

Test plan

• 206 tests pass (npm test — all 25 test files green)
• Manual: verify Yapper health detection (start/stop Yapper, check mic button appears/disappears)
• Manual: batch STT — hold mic, speak, release, verify transcript appears in input
• Manual: streaming STT — hold mic, verify live partial transcript overlay updates in real time
• Manual: TTS — enable in settings, send message, verify auto-speak on response
• Manual: cancel mid-recording and mid-speak both clean up correctly
• Manual: Safari — verify MP4 fallback works for MediaRecorder

🤖 Generated with Claude Code

[dimakis]

PR Review: feat(voice): full Yapper voice integration (STT + TTS + streaming)

Full rollup of phases 1–3. Solid architecture and test coverage (587 tests). Three issues to address:

🐛 Dual-recorder stream sharing bug (useVoice.ts)

startRecording creates both a StreamingRecorder and a batch Recorder on the same MediaStream. Both call stopTracks(stream) on stop/cancel. Whichever stops first kills the mic for the other — so if the streaming recorder stops tracks before the batch fallback tries to use the stream, recorder.stop() produces an empty/truncated blob.

Fix: only stop tracks once, in a single cleanup path, rather than letting both recorders independently kill the stream.

⚠️ Auto-speak fires during streaming, not on completion (ChatView.tsx)

The auto-speak useEffect triggers on msgState.messages changes but doesn't check msgState.running. This means TTS can fire before the assistant message is fully streamed — the messageId ref prevents duplicate speaks, but the message content may be incomplete when it first triggers.

Note: PR #108 already fixes this by extracting useAutoSpeak with a running guard, plus stripCodeForTts and truncateForTts. Merging #108 first and rebasing #110 resolves this and the stale tts.ts (which is missing those helpers and the playAudio idempotency fix).

💡 Use last partial as fallback on WS timeout (useVoice.ts)

When the 5s WS timeout fires without a final transcript, stopRecording returns empty string silently. The user loses their dictation with no indication. Consider returning partialTranscript as best-effort instead of ''.

Minor notes

• mimeToFormat() is a plain function recreated every render — could be module-level
• tts-playback.md still references messages.length tracking but implementation uses messageId
• WS send queue is unbounded (not a real concern at audio chunk sizes, but worth a comment)
• No test for the dual-recorder stream conflict scenario

Recommended merge order

1. Merge #108 into feat/voice-stt-batch
2. Rebase #110 onto updated main (picks up #108 fixes)
3. Merge #110

🤖 Generated with Claude Code