voice: audit + noise suppression toggle + stability fixes

Gateway: - transmitter.ts: cap backpressure queue at 500 chunks (prevents memory leak) - transmitter.ts: fix Redis race — assign redisSub AFTER subscribe completes - voice.handler.ts: static import Redis instead of dynamic (cleaner, no eval) Frontend: - mic-transmit.ts: MicAccessError with specific reasons (permission-denied, no-mic, timeout) - mic-transmit.ts: noiseSuppression option in getUserMedia constraints - mic-transmit.ts: proper DOMException handling for all getUserMedia failure modes - use-voice.ts: noiseSuppression state + toggleNoiseSuppression exposed - use-voice.ts: cleanup on unmount (stops transmitter, clears refs) - voice/view.tsx: noise suppression toggle button (ShieldCheck/ShieldOff icons) - voice/view.tsx: improved mic error toasts (permission denied / no mic specific) - voice/view.tsx: NS status in codec footer (NS_ACTIVE when enabled)
2026-08-26 23:32:37 +07:00
parent 4f4f92706c
commit 7e0d0d5123
5 changed files with 214 additions and 31 deletions
@@ -1,6 +1,13 @@
 "use client";

-import { Mic, PhoneOff, Radio, Volume2 } from "lucide-react";
+import {
+  Mic,
+  PhoneOff,
+  Radio,
+  ShieldCheck,
+  ShieldOff,
+  Volume2,
+} from "lucide-react";
 import { useEffect, useState } from "react";
 import { useAmbient } from "@/components/ambient/ambient-context";
 import { Button, GlassPanel, toast } from "@/components/primitives";
@@ -66,7 +73,19 @@ export function VoiceView({
        tone: next ? "signal" : "neutral",
      });
    } catch (e) {
-      toast({ title: "Mic toggle failed", description: String(e), tone: "vermilion" });
+      // MicAccessError from mic-transmit.ts has specific reasons
+      const msg = e instanceof Error ? e.message : String(e);
+      const isPermDenied = msg.includes("denied") || msg.includes("Permission");
+      const isNoMic = msg.includes("No microphone");
+      toast({
+        title: isPermDenied
+          ? "Mic permission denied"
+          : isNoMic
+            ? "No microphone found"
+            : "Mic toggle failed",
+        description: msg,
+        tone: "vermilion",
+      });
    }
  };

@@ -264,10 +283,46 @@ export function VoiceView({
                    <div className="mt-1.5 h-1 w-full overflow-hidden rounded-full bg-surface-2">
                      <div
                        className="h-full rounded-full bg-signal transition-all duration-100"
-                        style={{ width: `${Math.min(100, mic.micLevel * 100)}%` }}
+                        style={{
+                          width: `${Math.min(100, mic.micLevel * 100)}%`,
+                        }}
                      />
                    </div>
                  )}
+
+                  {/* Noise Suppression Toggle */}
+                  <div className="mt-2.5 flex items-center gap-2">
+                    <button
+                      type="button"
+                      onClick={() => {
+                        const next = !mic.noiseSuppression;
+                        mic.toggleNoiseSuppression(next);
+                        toast({
+                          title: next
+                            ? "Noise suppression ON"
+                            : "Noise suppression OFF",
+                          tone: next ? "signal" : "neutral",
+                        });
+                      }}
+                      className={`flex items-center gap-1 rounded-md px-2 py-1 text-[10px] font-medium transition-all ${
+                        mic.noiseSuppression
+                          ? "bg-success/15 text-success border border-success/30"
+                          : "bg-surface-2 text-ink-faint border border-hairline hover:border-ink-muted/30"
+                      }`}
+                    >
+                      {mic.noiseSuppression ? (
+                        <ShieldCheck className="size-3" />
+                      ) : (
+                        <ShieldOff className="size-3" />
+                      )}
+                      NS {mic.noiseSuppression ? "ON" : "OFF"}
+                    </button>
+                    {micActive && (
+                      <span className="font-mono text-[9px] text-ink-faint">
+                        {mic.noiseSuppression ? "noise gated" : "raw audio"}
+                      </span>
+                    )}
+                  </div>
                </div>

                {/* Listen Toggle */}
@@ -304,19 +359,23 @@ export function VoiceView({
                  {/* Per-speaker level meters */}
                  {listenActive && listen.levels.size > 0 && (
                    <div className="mt-2 space-y-1">
-                      {Array.from(listen.levels.entries()).map(([hash, level]) => (
-                        <div key={hash} className="flex items-center gap-2">
-                          <span className="font-mono text-[9px] text-ink-faint w-8">
-                            #{hash.toString(16).slice(-3)}
-                          </span>
-                          <div className="h-1 flex-1 overflow-hidden rounded-full bg-surface-2">
-                            <div
-                              className="h-full rounded-full bg-success transition-all duration-100"
-                              style={{ width: `${Math.min(100, level * 100)}%` }}
-                            />
+                      {Array.from(listen.levels.entries()).map(
+                        ([hash, level]) => (
+                          <div key={hash} className="flex items-center gap-2">
+                            <span className="font-mono text-[9px] text-ink-faint w-8">
+                              #{hash.toString(16).slice(-3)}
+                            </span>
+                            <div className="h-1 flex-1 overflow-hidden rounded-full bg-surface-2">
+                              <div
+                                className="h-full rounded-full bg-success transition-all duration-100"
+                                style={{
+                                  width: `${Math.min(100, level * 100)}%`,
+                                }}
+                              />
+                            </div>
                          </div>
-                        </div>
-                      ))}
+                        ),
+                      )}
                    </div>
                  )}
                </div>
@@ -326,6 +385,7 @@ export function VoiceView({
            <div className="mt-6 border-t border-hairline pt-3">
              <div className="font-mono text-[10px] text-ink-muted">
                CODEC: OPUS 48KHZ · LOW_LATENCY
+                {mic.noiseSuppression ? " · NS_ACTIVE" : ""}
              </div>
            </div>
          </GlassPanel>
@@ -144,10 +144,13 @@ export function useMicTransmit(ws: {
 }) {
  const transmitterRef = useRef<MicTransmitter | null>(null);
  const [micLevel, setMicLevel] = useState(0);
+  const [noiseSuppression, setNoiseSuppressionState] = useState(true);

  const action = useAction(async (active: boolean) => {
    if (active) {
-      const transmitter = new MicTransmitter((frame) => ws.sendBinary(frame));
+      const transmitter = new MicTransmitter((frame) => ws.sendBinary(frame), {
+        noiseSuppression,
+      });
      transmitterRef.current = transmitter;
      await transmitter.start();
      await voiceApi.sendCommand("voice:transmit:start");
@@ -163,6 +166,14 @@ export function useMicTransmit(ws: {
    transmitterRef.current?.setVolume(volume / 100);
  }, []);

+  const toggleNoiseSuppression = useCallback((enabled: boolean) => {
+    setNoiseSuppressionState(enabled);
+    // If mic is already active, toggling NS requires restart
+    if (transmitterRef.current?.isActive) {
+      transmitterRef.current.setNoiseSuppression(enabled);
+    }
+  }, []);
+
  // Poll the analyser RMS so the UI can render a live input meter.
  useEffect(() => {
    const timer = setInterval(() => {
@@ -171,7 +182,21 @@ export function useMicTransmit(ws: {
    return () => clearInterval(timer);
  }, []);

-  return { ...action, setVolume, micLevel };
+  // Cleanup on unmount
+  useEffect(() => {
+    return () => {
+      transmitterRef.current?.stop();
+      transmitterRef.current = null;
+    };
+  }, []);
+
+  return {
+    ...action,
+    setVolume,
+    micLevel,
+    noiseSuppression,
+    toggleNoiseSuppression,
+  };
 }

 /**
@@ -62,6 +62,31 @@ class PcmDownsampler extends AudioWorkletProcessor {
 registerProcessor('pcm-downsampler', PcmDownsampler);
 `;

+/** Mic access error with user-actionable detail. */
+export class MicAccessError extends Error {
+  constructor(
+    message: string,
+    public readonly reason:
+      | "not-supported"
+      | "permission-denied"
+      | "no-mic"
+      | "timeout"
+      | "unknown",
+  ) {
+    super(message);
+    this.name = "MicAccessError";
+  }
+}
+
+export interface MicTransmitterOptions {
+  /** Enable browser-level noise suppression (default: true). */
+  noiseSuppression?: boolean;
+  /** Enable echo cancellation (default: true). */
+  echoCancellation?: boolean;
+  /** Enable auto gain control (default: true). */
+  autoGainControl?: boolean;
+}
+
 export class MicTransmitter {
  private ctx: AudioContext | null = null;
  private stream: MediaStream | null = null;
@@ -70,28 +95,82 @@ export class MicTransmitter {
  private levelBuf: Float32Array<ArrayBuffer> | null = null;
  private active = false;
  private volume = 1;
+  private noiseSuppression = true;

-  constructor(private readonly onChunk: (frame: ArrayBuffer) => void) {}
+  constructor(
+    private readonly onChunk: (frame: ArrayBuffer) => void,
+    private readonly options: MicTransmitterOptions = {},
+  ) {
+    this.noiseSuppression = options.noiseSuppression ?? true;
+  }

  get isActive(): boolean {
    return this.active;
  }

+  get isNoiseSuppressionEnabled(): boolean {
+    return this.noiseSuppression;
+  }
+
  async start(volume = 1): Promise<void> {
    if (this.active) return;
    this.volume = volume;

+    // ── Check getUserMedia support ───────────────────────────────────────
    if (!navigator.mediaDevices?.getUserMedia) {
-      throw new Error("getUserMedia is not available (insecure context?)");
+      throw new MicAccessError(
+        "getUserMedia is not available — are you on HTTPS or localhost?",
+        "not-supported",
+      );
    }

-    this.stream = await navigator.mediaDevices.getUserMedia({
-      audio: {
-        echoCancellation: true,
-        noiseSuppression: true,
-        autoGainControl: true,
-      },
-    });
+    // ── Request mic with noise suppression constraints ───────────────────
+    try {
+      this.stream = await navigator.mediaDevices.getUserMedia({
+        audio: {
+          echoCancellation: this.options.echoCancellation ?? true,
+          noiseSuppression: this.noiseSuppression,
+          autoGainControl: this.options.autoGainControl ?? true,
+        },
+      });
+    } catch (err) {
+      if (err instanceof DOMException) {
+        if (
+          err.name === "NotAllowedError" ||
+          err.name === "PermissionDeniedError"
+        ) {
+          throw new MicAccessError(
+            "Microphone access denied — allow mic permission in your browser",
+            "permission-denied",
+          );
+        }
+        if (
+          err.name === "NotFoundError" ||
+          err.name === "DevicesNotFoundError"
+        ) {
+          throw new MicAccessError(
+            "No microphone found — connect a mic and try again",
+            "no-mic",
+          );
+        }
+        if (err.name === "OverconstrainedError") {
+          throw new MicAccessError(
+            "Microphone does not support the requested constraints",
+            "unknown",
+          );
+        }
+        if (err.name === "AbortError" || err.name === "TimeoutError") {
+          throw new MicAccessError(
+            "Microphone access timed out — try again",
+            "timeout",
+          );
+        }
+      }
+      throw new MicAccessError(
+        `Failed to access microphone: ${err instanceof Error ? err.message : String(err)}`,
+        "unknown",
+      );
+    }

    this.ctx = new AudioContext({ sampleRate: 48000 });

@@ -153,6 +232,11 @@ export class MicTransmitter {
    this.node?.port.postMessage({ type: "volume", value: volume });
  }

+  /** Toggle noise suppression. Requires restart to take effect. */
+  setNoiseSuppression(enabled: boolean): void {
+    this.noiseSuppression = enabled;
+  }
+
  stop(): void {
    this.active = false;
    this.node?.port.postMessage({ type: "volume", value: 0 });