fix(web): clean up voice settings

apps/web/src/components/settings/MicrophoneTest.tsx

@@ -3,6 +3,7 @@ import { CheckIcon, MicIcon, PauseIcon, PlayIcon, RotateCcwIcon, XIcon } from "l
 import { useEffect, useRef, useState } from "react";
 
 import { useStableCallback } from "~/hooks/useStableCallback";
+import workletUrl from "../../speech/pcmWorklet.ts?worker&url";
 import { VoiceInputErrorPill } from "../chat/VoiceInputErrorPill";
 import { VoiceInputPill, VoiceWaveform } from "../chat/VoiceInputPill";
 import { Button } from "../ui/button";
@@ -15,8 +16,9 @@ type Capture = {
   stream?: MediaStream;
   recorder?: MediaRecorder;
   context?: AudioContext;
+  worklet?: AudioWorkletNode;
   timer?: ReturnType<typeof setTimeout>;
-  meter?: ReturnType<typeof setInterval>;
+  elapsedTimer?: ReturnType<typeof setInterval>;
   startedAt?: number;
 };
 
@@ -39,7 +41,9 @@ export function MicrophoneTest({ microphoneId }: { microphoneId: string }) {
     if (!current) return;
     capture.current = null;
     clearTimeout(current.timer);
-    clearInterval(current.meter);
+    clearInterval(current.elapsedTimer);
+    current.worklet?.disconnect();
+    current.worklet?.port.close();
     if (current.recorder && current.recorder.state !== "inactive") current.recorder.stop();
     current.stream?.getTracks().forEach((track) => track.stop());
     void current.context?.close().catch(() => undefined);
@@ -66,7 +70,11 @@ export function MicrophoneTest({ microphoneId }: { microphoneId: string }) {
     setLevel(0);
     setElapsed(0);
     setPhase("starting");
-    if (!navigator.mediaDevices?.getUserMedia || typeof MediaRecorder === "undefined") {
+    if (
+      !navigator.mediaDevices?.getUserMedia ||
+      typeof MediaRecorder === "undefined" ||
+      typeof AudioWorkletNode === "undefined"
+    ) {
       setError("Microphone testing is unavailable in this browser. Use HTTPS or the desktop app.");
       setPhase("idle");
       return;
@@ -104,13 +112,14 @@ export function MicrophoneTest({ microphoneId }: { microphoneId: string }) {
         setRecording({ url: recordingUrl.current, duration });
         setPhase("ready");
       });
-      recorder.addEventListener("error", () => {
+      const onRecordingError = () => {
         if (capture.current !== current) return;
         releaseCapture();
         setLevel(0);
         setError("Could not record microphone audio. Try again.");
         setPhase("idle");
-      });
+      };
+      recorder.addEventListener("error", onRecordingError);
       for (const track of stream.getAudioTracks()) {
         track.addEventListener(
           "ended",
@@ -124,23 +133,28 @@ export function MicrophoneTest({ microphoneId }: { microphoneId: string }) {
       }
       const context = new AudioContext();
       current.context = context;
-      const analyser = context.createAnalyser();
-      analyser.fftSize = 256;
-      context.createMediaStreamSource(stream).connect(analyser);
+      await context.audioWorklet.addModule(workletUrl);
+      if (capture.current !== current) return;
+      const worklet = new AudioWorkletNode(context, "t3-pcm-capture", {
+        channelCount: 1,
+        processorOptions: { meterOnly: true },
+      });
+      current.worklet = worklet;
+      worklet.port.onmessage = ({ data }: MessageEvent<number | "stopped">) => {
+        if (capture.current === current && typeof data === "number") setLevel(data);
+      };
+      worklet.onprocessorerror = onRecordingError;
+      context.createMediaStreamSource(stream).connect(worklet);
+      worklet.connect(context.destination);
       await context.resume();
       if (capture.current !== current) return;
-      const samples = new Float32Array(analyser.fftSize);
       const startedAt = performance.now();
       current.startedAt = startedAt;
-      current.meter = setInterval(() => {
+      current.elapsedTimer = setInterval(() => {
         setElapsed(Math.min(LOOPBACK_SECONDS, Math.floor((performance.now() - startedAt) / 1_000)));
-        analyser.getFloatTimeDomainData(samples);
-        const rms = Math.sqrt(
-          samples.reduce((sum, value) => sum + value * value, 0) / samples.length,
-        );
-        setLevel(Math.min(1, rms * 5));
       }, 100);
       recorder.start();
+      worklet.port.postMessage("start", []);
       setPhase("recording");
       current.timer = setTimeout(() => {
         if (recorder.state !== "inactive") recorder.stop();

apps/web/src/components/settings/VoiceSettingsPanel.browser.test.tsx

@@ -1,10 +1,17 @@
 import { PrimaryConnectionTarget } from "@t3tools/client-runtime/connection";
-import { EnvironmentId, type EnvironmentSpeechModel } from "@t3tools/contracts";
+import {
+  EnvironmentId,
+  type EnvironmentSpeechModel,
+  type EnvironmentSpeechStatus,
+} from "@t3tools/contracts";
 import { expect, it, vi } from "vite-plus/test";
 import { userEvent } from "vite-plus/test/browser";
 import { render } from "../../../test/render";
 import { __setClientSettingsForTests, getClientSettings } from "../../hooks/useSettings";
-import { useVoiceTranscriptionDestination } from "../../speech/useEnvironmentSpeechInput";
+import {
+  useEnvironmentSpeechInput,
+  useVoiceTranscriptionDestination,
+} from "../../speech/useEnvironmentSpeechInput";
 import { chooseAudioDestination, chooseTranscriptCleanup } from "../../speech/voiceConsent";
 import { toastManager } from "../ui/toast";
 import { SettingsScopeProvider } from "./SettingsScopeContext";
@@ -13,6 +20,111 @@ import { VoiceSettingsPanel } from "./VoiceSettingsPanel";
 
 vi.mock(import("../../speech/useEnvironmentSpeechInput"), { spy: true });
 
+it("preserves the model test transcript when its model is filtered out", async () => {
+  const target = new PrimaryConnectionTarget({
+    environmentId: EnvironmentId.make("voice-filter"),
+    label: "Test environment",
+    httpBaseUrl: window.location.origin,
+    wsBaseUrl: "ws://localhost",
+  });
+  const prepared = { ...target, target, socketUrl: target.wsBaseUrl, httpAuthorization: null };
+  const model: EnvironmentSpeechModel = {
+    id: "tiny",
+    name: "Tiny",
+    description: "",
+    size: 100,
+    languages: ["en"],
+    accuracy: 1,
+    speed: 1,
+    recommended: false,
+    supportsStreaming: false,
+    supportsTranslation: false,
+    supportsLanguageDetection: false,
+    active: true,
+    state: "installed",
+  };
+  const status = {
+    supported: true,
+    state: "ready",
+    modelId: model.id,
+    model: model.name,
+    size: model.size,
+    supportsStreaming: false,
+    supportsTranslation: false,
+    acceleration: "cpu",
+    modelUnloadTimeout: "never",
+    gpuDevices: [],
+  } satisfies EnvironmentSpeechStatus;
+  const fetch = globalThis.fetch;
+  using _network = vi.spyOn(globalThis, "fetch").mockImplementation((input, init) => {
+    const url = new URL(input instanceof Request ? input.url : input, window.location.href);
+    if (url.pathname === "/api/voice/status") return Promise.resolve(Response.json(status));
+    if (url.pathname === "/api/voice/models")
+      return Promise.resolve(Response.json({ models: [model] }));
+    return fetch(input, init);
+  });
+  const transcript = "Keep this transcript.";
+  await vi.mocked(useVoiceTranscriptionDestination).withImplementation(
+    () => ({ environmentId: target.environmentId, label: target.label, grantId: "test", prepared }),
+    async () => {
+      await vi.mocked(useEnvironmentSpeechInput).withImplementation(
+        (input) => ({
+          available: true,
+          status,
+          transcriptionEnvironmentId: target.environmentId,
+          transcriptionEnvironmentLabel: target.label,
+          setup: {
+            open: false,
+            step: 0,
+            model: null,
+            downloading: false,
+            error: null,
+            setOpen: () => {},
+            download: async () => {},
+            cancelDownload: async () => {},
+            startRecording: async () => {},
+          },
+          state: { phase: "idle", error: null, errorAction: null },
+          preview: null,
+          level: 0,
+          preparing: false,
+          blocksSubmission: false,
+          freezesEditor: false,
+          start: async () => {
+            input.commitDraft(transcript, { start: transcript.length, end: transcript.length });
+          },
+          submitAfterDictation: () => {},
+          stop: async () => {},
+          cancel: () => {},
+          skipPostProcessing: () => {},
+        }),
+        async () => {
+          await using screen = await render(
+            <SettingsScopeProvider search={{}} onChange={() => {}}>
+              <VoiceSettingsPanel />
+            </SettingsScopeProvider>,
+          );
+          const testModel = screen.getByRole("button", { name: "Test model", exact: true });
+          await expect.element(testModel).toBeVisible();
+          await userEvent.click(testModel);
+          const result = screen.getByRole("status", { name: "Test transcript" });
+          await expect.element(result).toHaveTextContent(transcript);
+
+          const search = screen.getByRole("textbox", { name: "Search transcription models" });
+          await userEvent.fill(search, "no matching model");
+          await expect.element(screen.getByText("No matching models.")).toBeVisible();
+          await userEvent.clear(search);
+          await vi.waitFor(() =>
+            expect(
+              screen.container.querySelector('[aria-label="Test transcript"]')?.textContent,
+            ).toBe(transcript),
+          );
+        },
+      );
+    },
+  );
+});
+
 it("recovers from a failed download progress poll without notifying, but reports a failed initial load", async () => {
   const target = new PrimaryConnectionTarget({
     environmentId: EnvironmentId.make("voice-progress"),