[aikhanjum]

Adds a mic button to the chat composer so students can talk instead of type. This came up at the all-hands.

How it works

• Uses the browser's built-in speech recognition (SpeechRecognition / webkitSpeechRecognition). Works in Chrome, Edge and Safari. In Firefox the mic button is hidden.
• Speech fills the draft as you talk. Nothing is sent until you hit send, so you can fix it first.
• Dictation picks up after whatever you'd already typed. Typing or sending cancels it, so a late speech result can't overwrite your edit or refill a box you just sent.
• PI's server doesn't change. Audio is handled entirely by the browser.
• If the mic is blocked, missing, or offline, a short note under the composer says so. Silence and manual stops don't show an error.

Files

• src/client/lib/dictation.ts: the useDictation hook plus pure helpers (joinDictation, transcriptOf, dictationProblem)
• src/client/components/Composer.tsx: mic button, wiring, screen-reader status
• src/client/components/Icons.tsx: IconMic in the existing hand-drawn set
• src/client/styles/chat.css: mic styles, with the listening pulse turned off under reduced motion
• tests/dictation.test.ts: helper tests

Testing

• npm run typecheck, npm test (43 passing) and npm run build all pass locally.
• I haven't clicked through it in a signed-in browser yet. Please try it on the preview in Chrome and Safari before merging.

🤖 Generated with Claude Code