feat: ElevenLabs-styled MicSelector + provider-aware TTS voice listing + audio quality fix

- Replace MicrophonePanel/AudioLevelMeter with ElevenLabs DevLab-styled
  MicSelector (LiveWaveform + device dropdown + record/pause/play/trash)
- Fix mic sound-check playback: ScriptProcessorNode captures sequential
  non-overlapping PCM (replaces broken AnalyserNode polling that caused
  distorted audio from overlapping reads)
- Provider-aware TTS voice listing: voices match active TTS_PROVIDER
  (azure/say/mock), resolveTtsVoiceId rejects invalid voice ids
- Remove dead UI: Start TTS, Speech & Translation section, Test My
  Microphone, level prop on MicSelector
- 88/88 tests, type-check, lint, build clean

Author: muhammadhasnainsaeed

docs/ARCHITECTURE.md

@@ -45,7 +45,7 @@ Electron
           ├── services/useTranslation.ts (translation events → english text)
           ├── services/useTts.ts (TTS state)
           ├── services/useAudioOutput.ts (WebAudio playback, device selection)
-          ├── components/ (MicrophonePanel, AudioLevelMeter, SttPanel)
+          ├── components/ (MicSelector, AudioOutputPanel, VoicePicker, TtsPanel, PipelinePanel, SetupPanel, AudioLevelMeter)
           ├── pages/ (HomeScreen; LiveTranslationScreen = subtitle stub)
           └── styles/ (App.css)
 

docs/CHANGELOG.md

@@ -3,6 +3,104 @@
 Every agent working on this repository MUST append a dated entry describing
 their changes after finishing work.
 
+## 2026-09-03 — TTS voice listing provider-aware + Settings cleanup (Start TTS, Speech & Translation, mic-selector, Test My Microphone)
+
+- **TTS voice listing is now provider-aware.** `listVoices(development, provider)`
+  in `src/main/services/tts/voices.ts` returns the catalog matching the active
+  synthesizer: `TTS_PROVIDER=say` → only macOS/system voices (Azure ids are
+  never listed because `say` cannot speak them); `TTS_PROVIDER=azure` → Azure
+  voices always + macOS system voices in dev; `mock` → Azure only; unknown →
+  none. New pure helper `resolveTtsProviderName()` reads `TTS_PROVIDER` from the
+  env (default `mock`) and is unit-tested.
+- **`tts:list-voices` IPC threads the resolved provider** into `listVoices` and
+  returns it in `ListVoicesResult.provider` (`packages/shared/index.ts`),
+  so the catalog the UI shows always matches the runtime synthesizer.
+- **`resolveTtsVoiceId()` is provider-aware too**: with `TTS_PROVIDER=say` a
+  persisted Azure id is rejected (falls back to the `say` provider default)
+  because `say` cannot synthesize it; azure/mock keeps the existing
+  `normalizeSelectedVoiceId()` behavior. This prevents listing an Azure voice
+  under `say` or trying to speak an Azure voice with `say`.
+- **Removed the redundant "Start TTS" / "Stop TTS" button** in Settings → Voice.
+  Audited: it only enabled `translationActive`, was duplicated by the
+  SessionManager during a meeting, and overlapped with the existing **Test Voice**
+  button (independent, self-terminating `tts:test`). `TtsPanel` now keeps voice
+  selection + Test Voice + status/current-text display. `handleTtsStart` and the
+  `onTtsStart`/`onTtsStop` props were removed end-to-end.
+- **Removed the "Speech & Translation" Settings section** and its dead manual
+  control surface: `SttPanel.tsx` and `TranslationPanel.tsx` were deleted; the
+  `speech` nav entry, and the `SttPanel`/`TranslationPanel` renders and their
+  props were removed from `SettingsScreen.tsx`. Dead `handleSttStart` /
+  `handleSttStop` and the `onSttStart`/`onSttStop`/`onTranslationStart`/
+  `onTranslationStop` props were removed from `App.tsx`. The shared `stt`/
+  `translation` hooks and the meeting pipeline are untouched (STT/translation
+  still run via `/ Start Meeting`).
+- **Fixed `MicSelector` sound-check playback** ("couldn't hear recorded sound"):
+  the `<audio>` element (`HTMLAudioElement`) cannot decode **any** audio format
+  in this AVMedia Chromium build (conclusive: WAV, webm, and via
+  `createMediaElementSource` all yield `networkState=3` /
+  `MEDIA_ERR_SRC_NOT_SUPPORTED`). Rewrote the capture and playback to use the
+  repo's own raw-PCM path: the mic stream is tapped with a second
+  `AudioContext` + `ScriptProcessorNode` at 24 kHz, accumulating sequential,
+  non-overlapping PCM frames into a Float32 array via event-driven capture.
+  Playback uses `AudioContext.createBuffer(source).connect(destination).start()`
+  (the same pattern `useAudioOutput` uses, proven audible in this build). Pause/
+  resume tracks elapsed frames via a poll timer and re-creates a sub-buffer from
+  the paused offset on resume. Duplicate `handleStreamEnd` calls (LiveWaveform
+  cleanup) are guarded by a `scriptProcessorRef !== null` check.
+  `src/renderer/components/MicSelector.tsx`.
+
+- **Fixed `MicSelector` sound-check audio quality** (distorted/laggy playback):
+  the previous implementation used `AnalyserNode.getFloatTimeDomainData()` polled
+  via `setInterval(30ms)` to capture PCM. This is fundamentally broken for
+  sequential capture: `getFloatTimeDomainData` returns a sliding window of the
+  last `fftSize` samples, not sequential non-overlapping chunks. At 24 kHz with
+  `fftSize=1024`, the analyser refreshes every ~42 ms, but 30 ms polls land
+  between frame boundaries — causing overlapping reads (~300 duplicate samples per
+  read), which produces pitch-shifted, distorted playback. CDP-verified:
+  `getFloatTimeDomainData` at 5 ms apart returns 100% identical data (analyser
+  hasn't refreshed), at 42 ms apart returns 0% overlap. Replaced with
+  `ScriptProcessorNode` (`createScriptProcessor(4096, 1, 1)`) which fires
+  `onaudioprocess` once per buffer with guaranteed sequential, non-overlapping
+  `Float32Array` chunks. CDP timing: 3 s recording → ~2.79 s playback (delta is
+  ScriptProcessorNode startup + React teardown latency, not sample-rate error).
+  `src/renderer/components/MicSelector.tsx`.
+
+- **Fixed the `MicSelector` sound-check Play → Pause flow.** The `LiveWaveform`
+  was rendered with `key={checkState}`, which remounted the component on every
+  state change (`idle → recording → recorded → playing`). Each remount
+  re-ran the microphone setup/teardown effect — tearing the stream down,
+  re-fetching the mic, and churning `audio.onended`/playback state so the
+  `playing` state wouldn't hold and the Play→Pause transition failed.
+  Removed the `key` so a single stable `LiveWaveform` instance persists; it now
+  clears its own history on teardown (`active=false`), and recording
+  stop/`onStreamEnd` sealing works once. `src/renderer/components/MicSelector.tsx`.
+
+- **Replaced the microphone UI with an ElevenLabs-styled `MicSelector`**
+  (`src/renderer/components/MicSelector.tsx`). The ElevenLabs registry is
+  rate-limited (HTTP 429 — `npx @elevenlabs/cli@latest components add
+  mic-selector` and the `shadcn` fallback both fail), so — consistent with how
+  `VoicePicker` and the vendored `LiveWaveform` were handled — a local component
+  mirrors the ElevenLabs DevLab `mic-selector` **sound-check card**: a live
+  `LiveWaveform` (barWidth 3, scrolling, fade edges), a microphone device
+  dropdown (popover with mic glyph + check), and a record / pause / play / trash
+  control row plus a mute toggle. Record/play is a device test only: the
+  `LiveWaveform` opens ONE stream and hands it to a `MediaRecorder` via
+  `onStreamReady`, so capture is never duplicated with the meeting pipeline
+  (which still owns real recording). Wired through the existing `useMicrophone`
+  device state (`micDevices`/`selectedDeviceId`/`permission`/`error`/
+  `onSelectDevice`); the `level` prop and `AudioLevelMeter` were dropped.
+  Old `MicrophonePanel.tsx` and its now-unconsumed `onMicStart`/`onMicStop`
+  props were deleted.
+- **Removed the "Test My Microphone" diagnostics button** (dead — it re-ran
+  `microphone.start`, duplicating the meeting path) and its `onDeviceTest`
+  prop. Diagnostics now lists mic / TTS / audio-output / current-stage status
+  (STT and Translation rows removed with the Speech & Translation section).
+- **Validation**: `npm run type-check` clean; `npm test` **88/88** (5 new:
+  `resolveTtsProviderName`, per-provider `listVoices` for azure/mock/say/
+  unknown); `npm run build` OK (`dist/renderer/index.html` present); `npm run
+  format:check` clean; `npm run lint` **0 errors** (13 pre-existing warnings
+  unchanged, incl. hook/`no-unused-vars` in App/useSetup/tests).
+
 ## 2026-09-03 — Voice picker restyled to ElevenLabs UI + search by gender/country/source
 
 - **Rewrote `VoicePicker.tsx` to mirror the ElevenLabs UI `voice-picker`

docs/CURRENT_STATE.md

@@ -2,6 +2,85 @@
 
 _Last updated: 2026-09-03_
 
+## TTS voice listing provider-aware + Settings cleanup
+
+Completed (2026-09-03). Multi-part refresh of the Settings surface + TTS voice
+catalog so they match the active runtime provider.
+
+### What is done
+- **Provider-aware voice listing.** `listVoices(development, provider)` in
+  `src/main/services/tts/voices.ts` now returns the catalog for the active
+  synthesizer instead of always listing Azure (+system in dev):
+  - `TTS_PROVIDER=say` → **only macOS system voices** (never Azure ids — `say`
+    cannot speak them).
+  - `TTS_PROVIDER=azure` → Azure voices always + macOS system voices in dev.
+  - `mock` → Azure only; unknown provider → no voices.
+  - New pure, unit-tested `resolveTtsProviderName()` reads `TTS_PROVIDER`.
+- **`tts:list-voices` threads the provider and returns it** via
+  `ListVoicesResult.provider` (`packages/shared/index.ts`), so the picker list
+  always matches the runtime synthesizer.
+- **`resolveTtsVoiceId()` is provider-aware**: under `TTS_PROVIDER=say` a
+  persisted Azure id is dropped (falls back to the `say` provider default)
+  because `say` cannot synthesize it; azure/mock keeps the existing
+  `normalizeSelectedVoiceId()` behavior.
+- **"Start TTS" removed** (audited redundant: gated on `translationActive`,
+  duplicated by SessionManager in-meeting, overlapped by the self-terminating
+  Test Voice). `TtsPanel` keeps voice selection + Test Voice + status.
+- **"Speech & Translation" Settings section removed** as dead manual control;
+  `SttPanel.tsx`/`TranslationPanel.tsx` deleted; dead `handleSttStart`/
+  `handleSttStop` and `onStt*`/`onTranslation*` props removed. STT/translation
+  still run via `/ Start Meeting` (hooks + pipeline untouched).
+- **Fix applied**: removed `key={checkState}` from the `LiveWaveform` inside
+  `MicSelector` — it was remounting the waveform on every state change, tearing
+  the recording stream down and making the Play → Pause sound-check flow fail.
+  A single persistent waveform instance now handles record/stop/play cleanly.
+
+- **Fix applied**: `MicSelector` sound-check playback reworked to use the
+  repo's own raw-PCM + `createBufferSource` path. The `<audio>` element
+  (`HTMLAudioElement`) cannot decode **any** audio format in this AVMedia
+  Chromium build (conclusive: WAV, webm, via `createMediaElementSource` all
+  yield `networkState=3` / MEDIA_ERR_SRC_NOT_SUPPORTED). The implementation:
+  - **Capture**: taps the `LiveWaveform`'s single mic stream with a second
+    `AudioContext` + `ScriptProcessorNode` (`createScriptProcessor(4096, 1, 1)`)
+    at 24 kHz, capturing sequential, non-overlapping PCM frames via
+    `onaudioprocess` events into a Float32 array. (Replaced the previous
+    `AnalyserNode` + `setInterval` approach, which produced overlapping reads
+    and distorted playback — CDP-verified: `getFloatTimeDomainData` returns a
+    sliding window, not sequential chunks.)
+  - **Play**: `AudioContext.createBuffer(source).connect(ctx.destination).start()`
+    (the repo's own `useAudioOutput` pattern, proven audible in this build).
+  - **Pause/Resume**: a poll timer tracks elapsed frames; pause stores the
+    current offset and closes the source; play creates a new sub-buffer from the
+    offset onward. `onended` restores the recorded state after completion.
+  - Duplicate `handleStreamEnd` calls from LiveWaveform cleanup are guarded by a
+    `scriptProcessorRef !== null` check.
+  Combined with the `key={checkState}` removal, the full record → stop → play →
+  pause → play-again → finish → trash flow works. `src/renderer/components/
+  MicSelector.tsx`.
+
+- **ElevenLabs-styled `MicSelector`** replaces the microphone UI
+  (`MicrophonePanel.tsx`, `AudioLevelMeter.tsx` deleted). The ElevenLabs
+  registry is rate-limited (HTTP 429), so — consistent with the vendored
+  `LiveWaveform` and the custom `VoicePicker` — a local component mirrors the
+  ElevenLabs DevLab `mic-selector` **sound-check card**: a live `LiveWaveform`,
+  a microphone device dropdown, and record / pause / play / trash + mute
+  controls. It is a device-test surface only: `LiveWaveform` opens ONE stream
+  handed to the PCM recorder via `onStreamReady` — capture is never duplicated
+  with the meeting pipeline (which still owns real recording). Drives device
+  selection through the existing `useMicrophone` state; the `level` prop and
+  `AudioLevelMeter` were dropped.
+- **"Test My Microphone" diagnostics button removed** (dead: duplicated
+  `microphone.start`). Diagnostics shows mic / TTS / audio-output / stage.
+
+### Validation
+- `npm run type-check` clean; `npm test` **88/88** (5 new provider/voice tests);
+  `npm run build` OK (`dist/renderer/index.html` present); `npm run format:check`
+  clean; `npm run lint` 0 errors (13 pre-existing warnings unchanged).
+
+### What remains / next
+- None for this cleanup. The TTS provider/voice path is unchanged for `azure`;
+  `say` (currently active in `.env`) now lists only macOS system voices.
+
 ## TTS voice selection: searchable VoicePicker, Test Voice, dev system voices
 
 Completed (2026-09-03). Voice preference feature for the Settings → Voice section.

packages/shared/index.ts

@@ -122,6 +122,11 @@ export interface ListVoicesResult {
   voices: TtsVoice[];
   /** True when the app is running unpackaged (macOS system voices available). */
   development: boolean;
+  /**
+   * The active TTS provider that produced this catalog — `say` lists only
+   * macOS system voices; `azure`/`mock` list Azure voices (system in dev).
+   */
+  provider?: 'azure' | 'say' | 'mock' | 'none';
   message?: string;
 }
 

src/main/ipc/tts.ts

@@ -19,7 +19,12 @@
 import { ipcMain, BrowserWindow, app } from 'electron';
 import { TtsManager } from '../services/tts/manager';
 import type { AudioOutputManager } from '../services/audio-output/manager';
-import { listVoices, normalizeSelectedVoiceId } from '../services/tts/voices';
+import {
+  listVoices,
+  normalizeSelectedVoiceId,
+  resolveTtsProviderName,
+  voiceIsAzure,
+} from '../services/tts/voices';
 import { loadPreferences } from './preferences';
 
 const TEST_TEXT = 'Hello, this is a test of the selected voice.';
@@ -34,10 +39,24 @@ export function isTtsDevelopment(): boolean {
   return !app.isPackaged;
 }
 
-/** The provider id currently selected by the user, resolved for this environment. */
+/**
+ * The voice id currently selected by the user, resolved for this environment
+ * AND the active TTS provider. A persisted id that the active provider cannot
+ * synthesize is dropped so the provider falls back to its own default voice:
+ *   - `say`:   only macOS system voices are usable (an Azure id is rejected).
+ *   - azure/mock: only curated Azure ids in production (system voices in dev).
+ */
 export function resolveTtsVoiceId(): string | null {
   const preferences = loadPreferences();
-  return normalizeSelectedVoiceId(preferences.ttsVoiceId, isTtsDevelopment());
+  const stored = preferences.ttsVoiceId?.trim();
+  const provider = resolveTtsProviderName();
+
+  if (provider === 'say') {
+    if (!stored || voiceIsAzure(stored)) return null;
+    return stored;
+  }
+
+  return normalizeSelectedVoiceId(stored, isTtsDevelopment());
 }
 
 export function registerTtsIpc(getWindow: () => BrowserWindow | null, audioOutput: AudioOutputManager): void {
@@ -57,8 +76,13 @@ export function registerTtsIpc(getWindow: () => BrowserWindow | null, audioOutpu
 
   ipcMain.handle('tts:list-voices', async (): Promise<import('@shared/index').ListVoicesResult> => {
     try {
-      const { voices, development } = await listVoices(isTtsDevelopment());
-      return { ok: true, voices, development };
+      const provider = resolveTtsProviderName();
+      const {
+        voices,
+        development,
+        provider: resolvedProvider,
+      } = await listVoices(isTtsDevelopment(), provider);
+      return { ok: true, voices, development, provider: resolvedProvider };
     } catch (err) {
       const msg = err instanceof Error ? err.message : String(err);
       return { ok: false, voices: [], development: isTtsDevelopment(), message: msg };

src/main/services/tts/voices.ts

@@ -115,28 +115,83 @@ function runSayList(): Promise<string> {
   });
 }
 
-/** List all voices for the current environment. */
+/** TTS providers that can map a selected voice onto a playable synthesizer. */
+export type TtsProviderName = 'azure' | 'say' | 'mock' | 'none';
+
+/**
+ * Resolve the configured TTS provider name for the current process. Mirrors the
+ * source of truth used by `createTtsProvider` so the voice catalog stays in
+ * lock-step with the synthesizer actually used at runtime.
+ */
+export function resolveTtsProviderName(
+  env: Record<string, string | undefined> = process.env,
+): TtsProviderName {
+  const name = (env.TTS_PROVIDER || 'mock').toLowerCase();
+  return name === 'azure' || name === 'say' || name === 'mock' ? name : 'none';
+}
+
+/**
+ * List all voices for the current environment, filtered to the active TTS
+ * provider. Because a picked voice must always be audible with the synthesizer
+ * that runs in this process:
+ *   - `say`:   only macOS system voices (no Azure ids — they are not `say` voices).
+ *   - `azure`: Azure voices always, plus macOS system voices in dev only.
+ *   - `mock`:  Azure voices only (mock produces no real audio; used in dev/tests).
+ *   - `none`:  no voices (unknown provider).
+ */
 export async function listVoices(
   development: boolean,
-): Promise<{ voices: TtsVoice[]; development: boolean }> {
-  const voices: TtsVoice[] = AZURE_VOICES.map((v) => ({
-    id: v.id,
-    name: v.name,
-    gender: v.gender,
-    source: 'azure',
-    country: countryFromAzureId(v.id),
-  }));
+  provider: TtsProviderName,
+): Promise<{ voices: TtsVoice[]; development: boolean; provider: TtsProviderName }> {
+  const voices: TtsVoice[] = [];
 
-  if (development) {
+  if (provider === 'say') {
+    // macOS system voices are the only voices the `say` synthesizer can use.
     try {
       const system = await runSayList();
       voices.push(...parseSayVoices(system));
     } catch {
-      // macOS `say` enumeration failed — Azures voices still enumerated.
+      // macOS `say` enumeration failed — return an empty system list.
     }
+    return { voices, development, provider };
+  }
+
+  if (provider === 'azure') {
+    voices.push(
+      ...AZURE_VOICES.map((v) => ({
+        id: v.id,
+        name: v.name,
+        gender: v.gender,
+        source: 'azure' as const,
+        country: countryFromAzureId(v.id),
+      })),
+    );
+    if (development) {
+      try {
+        const system = await runSayList();
+        voices.push(...parseSayVoices(system));
+      } catch {
+        // macOS `say` enumeration failed — Azure voices still enumerated.
+      }
+    }
+    return { voices, development, provider };
+  }
+
+  // mock: Azure voices only (mock is a dev/testing synthesizer with no audio).
+  if (provider === 'mock') {
+    voices.push(
+      ...AZURE_VOICES.map((v) => ({
+        id: v.id,
+        name: v.name,
+        gender: v.gender,
+        source: 'azure' as const,
+        country: countryFromAzureId(v.id),
+      })),
+    );
+    return { voices, development, provider };
   }
 
-  return { voices, development };
+  return { voices, development, provider };
 }
 
 /**