fix(dev): ML noise suppression works on npm start; no lotusTheme warning per call (#293)

The denoise worklets/wasm/models were only copied into dist/ by the
lotus-denoise closeBundle hook, so on the dev server the call frame got
the SPA fallback for them and silently used the raw mic. The asset list
is now shared (denoiseSources) between that copy and a dev-server
middleware serving the same paths. Also send lotusTheme=true with
lotusTransparent, which the fork warned about in every call.

Fixes #293

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_017PCb59uY3UKqDqt7B6hzd5

src/app/components/CallEmbedProvider.tsx

@@ -86,7 +86,6 @@ import { CallAvatarAnimation } from '../styles/Animations.css';
 import { webRTCSupported } from '../utils/rtc';
 import { CallsUnavailableMessage } from '../features/call/CallsUnavailable';
 import { zIndices } from '../styles/zIndex';
-import { useDenoiseNotices } from '../hooks/useDenoiseNotices';
 
 const PIP_MIN_W = 200;
 const PIP_MIN_H = 112;
@@ -794,7 +793,6 @@ function CallUtils({ embed, joined }: { embed: CallEmbed; joined: boolean }) {
   useCallPolicyRevokedToast(embed, joined);
   useCallEndedToast(embed);
   useScreenshareNotices(embed);
-  useDenoiseNotices(embed);
   // [Gitea #43] The in-frame screenshare button follows the same room policy
   // as the host bar's (hidden where the server would refuse the share).
   const { allowScreenshare } = useRoomCallPolicy(embed.room);

src/app/hooks/useDenoiseNotices.ts

@@ -1,38 +0,0 @@
-import { useEffect, useRef } from 'react';
-import { useSetAtom } from 'jotai';
-import { Icons } from 'folds';
-import { CallEmbed } from '../plugins/call';
-import { toastQueueAtom } from '../state/toast';
-import { useSetting } from '../state/hooks/settings';
-import { settingsAtom } from '../state/settings';
-import { denoiseNotice, DenoiseStateReport } from '../utils/denoiseNotice';
-
-/**
- * [Gitea #260] Tell the user when ML noise suppression didn't attach (raw mic)
- * or fell back to another model. The fork's `io.lotus.denoise_state` used to
- * go unanswered ("unsupported action"), so failures were silent.
- */
-export function useDenoiseNotices(embed: CallEmbed): void {
-  const setToast = useSetAtom(toastQueueAtom);
-  const [mode] = useSetting(settingsAtom, 'callNoiseSuppression');
-  const [model] = useSetting(settingsAtom, 'callDenoiseModel');
-  const latest = useRef({ mode, model });
-  latest.current = { mode, model };
-  useEffect(
-    () =>
-      embed.listenAction<{ data?: DenoiseStateReport }>('io.lotus.denoise_state', (evt) => {
-        if (latest.current.mode !== 'ml') return;
-        const body = denoiseNotice(latest.current.model, evt.detail?.data);
-        if (!body) return;
-        setToast({
-          id: `denoise-state-${Date.now()}`,
-          iconSrc: Icons.Mic,
-          displayName: 'Noise suppression',
-          body,
-          roomName: embed.room.name ?? 'Voice call',
-          roomId: embed.roomId,
-        });
-      }),
-    [embed, setToast],
-  );
-}

src/app/pages/client/ClientNonUIFeatures.tsx

@@ -1060,6 +1060,32 @@ function TauriUpdateFeature() {
   return null;
 }
 
+function LotusDenoiseFeature() {
+  const setToast = useSetAtom(toastQueueAtom);
+
+  useEffect(() => {
+    const handleMessage = (event: MessageEvent) => {
+      if (event.data?.type === 'lotus-denoise-status') {
+        const { active, error } = event.data;
+        if (!active) {
+          setToast({
+            id: `denoise-fail-${Date.now()}`,
+            displayName: 'Audio Quality',
+            body: `ML Noise Suppression failed: ${error || 'Unknown error'}. Falling back to raw mic.`,
+            roomName: 'System',
+            roomId: '',
+          });
+        }
+      }
+    };
+
+    window.addEventListener('message', handleMessage);
+    return () => window.removeEventListener('message', handleMessage);
+  }, [setToast]);
+
+  return null;
+}
+
 // Registers the global `?` shortcut (ignored while typing) and renders the
 // keyboard-shortcuts help dialog. Headless — the dialog self-gates on its atom.
 function KeyboardShortcutsFeature() {
@@ -1141,6 +1167,7 @@ export function ClientNonUIFeatures({ children }: ClientNonUIFeaturesProps) {
       <CloseBehaviorPrompt />
       <ConsentRequiredPrompt />
       <OutboxFeature />
+      <LotusDenoiseFeature />
       <DeepLinkNavigator />
       <KeyboardShortcutsFeature />
       {children}

src/app/plugins/call/CallEmbed.ts

@@ -218,6 +218,9 @@ export class CallEmbed {
       //  - transparent background so the room wallpaper shows through natively
       lotusCallState: 'true',
       lotusTransparent: 'true',
+      // [Gitea #293] the fork applies the theme with transparency anyway, and
+      // warned in every call that lotusTheme wasn't set
+      lotusTheme: 'true',
       // [Gitea #43] The fork hides its own footer (we draw the call bar) and
       // sets its root color-scheme from the theme, instead of us injecting CSS.
       lotusHostControls: 'true',

src/app/utils/denoiseNotice.test.ts

@@ -1,17 +0,0 @@
-import { test } from 'node:test';
-import assert from 'node:assert/strict';
-import { denoiseNotice } from './denoiseNotice';
-
-test('denoiseNotice: says when ML is off or fell back (#260)', () => {
-  assert.equal(denoiseNotice('deepfilternet', { active: true, model: 'deepfilternet' }), undefined);
-  assert.match(
-    denoiseNotice('deepfilternet', { active: true, model: 'rnnoise' }) ?? '',
-    /^DeepFilterNet 3 couldn't start, so noise suppression is using RNNoise instead\.$/,
-  );
-  assert.match(
-    denoiseNotice('rnnoise', { active: false, error: 'boom' }) ?? '',
-    /unfiltered audio/,
-  );
-  assert.equal(denoiseNotice('rnnoise', undefined), undefined);
-  assert.equal(denoiseNotice('rnnoise', { model: 'x' }), undefined);
-});

src/app/utils/denoiseNotice.ts

@@ -1,29 +0,0 @@
-/**
- * [Gitea #260] The fork reports what noise suppression actually runs as
- * `io.lotus.denoise_state { active, model, error? }`. Pure: the toast text for
- * a report, or undefined when what runs is what the user picked.
- */
-export type DenoiseStateReport = { active?: unknown; model?: unknown; error?: unknown };
-
-const MODEL_NAMES: Record<string, string> = {
-  rnnoise: 'RNNoise',
-  speex: 'Speex',
-  dtln: 'DTLN',
-  deepfilternet: 'DeepFilterNet 3',
-};
-const modelName = (m: unknown): string =>
-  typeof m === 'string' ? (MODEL_NAMES[m] ?? m) : 'the selected model';
-
-export function denoiseNotice(
-  requestedModel: string,
-  report: DenoiseStateReport | undefined,
-): string | undefined {
-  if (!report || typeof report.active !== 'boolean') return undefined;
-  if (!report.active) {
-    return `ML noise suppression couldn't start, so your microphone is sending unfiltered audio. You can pick another model in Settings → Calls.`;
-  }
-  if (typeof report.model === 'string' && report.model !== requestedModel) {
-    return `${modelName(requestedModel)} couldn't start, so noise suppression is using ${modelName(report.model)} instead.`;
-  }
-  return undefined;
-}

vite.config.js

@@ -87,97 +87,106 @@ function copyPdfWorker() {
   };
 }
 
-// Lotus ML noise suppression: ship the RNNoise worklet/wasm + our getUserMedia
+// The denoise assets the fork loads from ./denoise/ at runtime, as
-// shim alongside the vendored Element Call bundle, and inject the shim <script>
+// [source, path under denoise/] pairs; `dir: true` entries are whole trees.
-// into EC's index.html so it runs before EC captures the mic. Runs after
+// Shared by the build copy and the dev server (Gitea #293).
-// viteStaticCopy has populated dist/public/element-call (closeBundle order).
+function denoiseSources() {
+  const sapphi = path.resolve('node_modules/@sapphi-red/web-noise-suppressor/dist');
+  const dfnVendor = path.resolve('build/denoise-vendor/deepfilternet');
+  return {
+    // All bundled denoise assets are REQUIRED: every entry backs a model the
+    // UI can select (RNNoise, Speex) or the optional noise gate.
+    sapphi: [
+      [path.join(sapphi, 'rnnoise/workletProcessor.js'), 'rnnoiseWorklet.js'],
+      [path.join(sapphi, 'rnnoise.wasm'), 'rnnoise.wasm'],
+      [path.join(sapphi, 'rnnoise_simd.wasm'), 'rnnoise_simd.wasm'],
+      [path.join(sapphi, 'speex/workletProcessor.js'), 'speexWorklet.js'],
+      [path.join(sapphi, 'speex.wasm'), 'speex.wasm'],
+      [path.join(sapphi, 'noiseGate/workletProcessor.js'), 'noiseGateWorklet.js'],
+    ],
+    // DTLN (@workadventure/noise-suppression): a self-contained ES module that
+    // resolves its own worklet, LiteRT WASM runtime and TFLite models via
+    // `import.meta.url`, so its whole dist/ tree is served intact.
+    dtln: [path.resolve('node_modules/@workadventure/noise-suppression/dist'), 'workadventure'],
+    // DeepFilterNet 3: the ESM (worklet inlined) plus the vendored wasm and ONNX
+    // model (CDN-free / Tauri-CSP safe), in the package's expected v2/ layout.
+    dfn: [
+      [
+        path.resolve('node_modules/deepfilternet3-noise-filter/dist/index.esm.js'),
+        'deepfilternet/index.esm.js',
+      ],
+      [path.join(dfnVendor, 'v2/pkg/df_bg.wasm'), 'deepfilternet/v2/pkg/df_bg.wasm'],
+      [
+        path.join(dfnVendor, 'v2/models/DeepFilterNet3_onnx.tar.gz'),
+        'deepfilternet/v2/models/DeepFilterNet3_onnx.tar.gz',
+      ],
+    ],
+  };
+}
+
+// Lotus ML noise suppression: ship the denoise worklets/wasm/models alongside
+// the vendored Element Call bundle. Runs after viteStaticCopy has populated
+// dist/public/element-call (closeBundle order). [Gitea #293] The dev server
+// serves the same files at the same URLs, so `npm start` can test denoise.
 function lotusDenoise() {
+  const DEV_PREFIX = '/public/element-call/denoise/';
   return {
     name: 'lotus-denoise',
+    configureServer(server) {
+      const { sapphi, dtln, dfn } = denoiseSources();
+      const files = new Map([...sapphi, ...dfn].map(([src, rel]) => [rel, src]));
+      const types = { '.js': 'text/javascript', '.wasm': 'application/wasm' };
+      server.middlewares.use((req, res, next) => {
+        const url = (req.url ?? '').split('?')[0];
+        if (!url.startsWith(DEV_PREFIX)) return next();
+        const rel = decodeURIComponent(url.slice(DEV_PREFIX.length));
+        let file = files.get(rel);
+        if (!file && rel.startsWith(`${dtln[1]}/`)) {
+          const candidate = path.resolve(dtln[0], rel.slice(dtln[1].length + 1));
+          if (candidate.startsWith(dtln[0] + path.sep)) file = candidate;
+        }
+        if (!file || !fs.existsSync(file)) return next();
+        res.setHeader('Content-Type', types[path.extname(file)] ?? 'application/octet-stream');
+        fs.createReadStream(file).pipe(res);
+        return undefined;
+      });
+    },
     closeBundle() {
       const ecDir = path.resolve('dist/public/element-call');
       if (!fs.existsSync(ecDir)) return;
 
       const denoiseDir = path.join(ecDir, 'denoise');
       fs.mkdirSync(denoiseDir, { recursive: true });
+      const { sapphi, dtln, dfn } = denoiseSources();
 
-      const sapphi = path.resolve('node_modules/@sapphi-red/web-noise-suppressor/dist');
+      // A missing source means a partial/changed install would otherwise
-      // All bundled denoise assets are REQUIRED: every entry backs a model the
+      // silently ship a broken ML feature (worklet 404 -> raw mic), so we fail
-      // UI can select (RNNoise, Speex) or the optional noise gate. A missing
+      // the build instead.
-      // source means a partial/changed install would otherwise silently ship a
+      const missing = sapphi.filter(([s]) => !fs.existsSync(s)).map(([s]) => s);
-      // broken ML feature (worklet 404 -> raw mic), so we fail the build instead.
-      const assets = [
-        [
-          path.join(sapphi, 'rnnoise/workletProcessor.js'),
-          path.join(denoiseDir, 'rnnoiseWorklet.js'),
-        ],
-        [path.join(sapphi, 'rnnoise.wasm'), path.join(denoiseDir, 'rnnoise.wasm')],
-        [path.join(sapphi, 'rnnoise_simd.wasm'), path.join(denoiseDir, 'rnnoise_simd.wasm')],
-        [path.join(sapphi, 'speex/workletProcessor.js'), path.join(denoiseDir, 'speexWorklet.js')],
-        [path.join(sapphi, 'speex.wasm'), path.join(denoiseDir, 'speex.wasm')],
-        [
-          path.join(sapphi, 'noiseGate/workletProcessor.js'),
-          path.join(denoiseDir, 'noiseGateWorklet.js'),
-        ],
-      ];
-      const missing = assets.filter(([s]) => !fs.existsSync(s)).map(([s]) => s);
       if (missing.length > 0) {
         throw new Error(
           `[lotus-denoise] Required denoise asset(s) missing — build aborted to avoid shipping a broken ML feature:\n  ${missing.join('\n  ')}`,
         );
       }
-      assets.forEach(([s, d]) => fs.copyFileSync(s, d));
+      sapphi.forEach(([s, rel]) => fs.copyFileSync(s, path.join(denoiseDir, rel)));
 
-      // DTLN (@workadventure/noise-suppression): unlike the flat sapphi
+      const dtlnEntry = path.join(dtln[0], 'audio-worklet.js');
-      // worklets, this package is a self-contained ES module that resolves its
-      // own AudioWorklet processor, LiteRT WASM runtime and TFLite models via
-      // `import.meta.url`. So we copy its whole dist/ tree intact to
-      // denoise/workadventure/ (preserving assets/ + vendor/) and let the shim
-      // dynamic-import denoise/workadventure/audio-worklet.js at runtime. The
-      // entry module is required — fail the build if the install is broken.
-      const dtlnSrc = path.resolve('node_modules/@workadventure/noise-suppression/dist');
-      const dtlnEntry = path.join(dtlnSrc, 'audio-worklet.js');
       if (!fs.existsSync(dtlnEntry)) {
         throw new Error(
           `[lotus-denoise] DTLN entry missing (${dtlnEntry}) — build aborted. ` +
             'Run `npm ci` to install @workadventure/noise-suppression.',
         );
       }
-      fs.cpSync(dtlnSrc, path.join(denoiseDir, 'workadventure'), { recursive: true });
+      fs.cpSync(dtln[0], path.join(denoiseDir, dtln[1]), { recursive: true });
 
-      // DeepFilterNet 3 (deepfilternet3-noise-filter): the npm package ships only
+      const dfnMissing = dfn.filter(([s]) => !fs.existsSync(s)).map(([s]) => s);
-      // its ESM (index.esm.js) with the AudioWorklet processor + wasm-bindgen glue
-      // INLINED as a string (loaded via a Blob URL, no CDN for the worklet). The
-      // only runtime CDN fetches are its single-threaded `df_bg.wasm` and the
-      // ONNX `DeepFilterNet3_onnx.tar.gz` model — which we VENDOR locally (under
-      // build/denoise-vendor/deepfilternet/) and serve, overriding the package's
-      // cdnUrl to our self-hosted base. This keeps the feature CDN-free / Tauri-CSP
-      // safe. We copy the ESM (the shim dynamic-imports it, mirroring DTLN) plus
-      // the vendored assets, preserving the package's expected v2/... layout. All
-      // are required — a missing entry means a broken install, so fail the build.
-      const dfnEsm = path.resolve('node_modules/deepfilternet3-noise-filter/dist/index.esm.js');
-      const dfnVendor = path.resolve('build/denoise-vendor/deepfilternet');
-      const dfnAssets = [
-        [dfnEsm, path.join(denoiseDir, 'deepfilternet/index.esm.js')],
-        [
-          path.join(dfnVendor, 'v2/pkg/df_bg.wasm'),
-          path.join(denoiseDir, 'deepfilternet/v2/pkg/df_bg.wasm'),
-        ],
-        [
-          path.join(dfnVendor, 'v2/models/DeepFilterNet3_onnx.tar.gz'),
-          path.join(denoiseDir, 'deepfilternet/v2/models/DeepFilterNet3_onnx.tar.gz'),
-        ],
-      ];
-      const dfnMissing = dfnAssets.filter(([s]) => !fs.existsSync(s)).map(([s]) => s);
       if (dfnMissing.length > 0) {
         throw new Error(
-          '[lotus-denoise] DeepFilterNet 3 asset(s) missing — build aborted to avoid ' +
+          `[lotus-denoise] DeepFilterNet 3 asset(s) missing — build aborted to avoid shipping a broken ML feature:\n  ${dfnMissing.join('\n  ')}\n(Run \`npm ci\`; the vendored wasm/model live under build/denoise-vendor/deepfilternet/.)`,
-            'shipping a broken ML feature:\n  ' +
-            dfnMissing.join('\n  ') +
-            '\n(Run `npm ci`; the vendored wasm/model live under build/denoise-vendor/deepfilternet/.)',
         );
       }
-      dfnAssets.forEach(([s, d]) => {
+      dfn.forEach(([s, rel]) => {
+        const d = path.join(denoiseDir, rel);
         fs.mkdirSync(path.dirname(d), { recursive: true });
         fs.copyFileSync(s, d);
       });