From cf7c66b99a535aa46e94db99e5c56adf10cd66a0 Mon Sep 17 00:00:00 2001
From: Jared Vititoe <jjvititoe1@gmail.com>
Date: Wed, 17 Jun 2026 20:02:16 -0400
Subject: [PATCH] Reorganize ML noise suppression settings UI

Move the model comparison out of the always-visible Noise Suppression
description and into the ML-only sub-settings. Add a compact info card
for the selected model (CPU / voice quality / transients / download) plus
a collapsible 4-model comparison. Group ML sub-settings into Model,
Enhancements, and Test & calibrate sections with clear labels and
separators. Fix invented --lt-border-color token and hardcoded
rgba background to real TDS tokens. Build the model dropdown and
DenoiseTester labels/compare buttons from DENOISE_MODELS so
DeepFilterNet 3 is handled correctly.

Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
---
 .../settings/general/DenoiseTester.tsx        |   4 +-
 src/app/features/settings/general/General.tsx | 260 +++++++++++-------
 src/app/utils/lotusDenoiseUtils.ts            |   4 +-
 3 files changed, 166 insertions(+), 102 deletions(-)

diff --git a/src/app/features/settings/general/DenoiseTester.tsx b/src/app/features/settings/general/DenoiseTester.tsx
index e3d48531f..acd8d511f 100644
--- a/src/app/features/settings/general/DenoiseTester.tsx
+++ b/src/app/features/settings/general/DenoiseTester.tsx
@@ -1,6 +1,7 @@
 import React, { useCallback, useEffect, useRef, useState } from 'react';
 import { Box, Button, Text } from 'folds';
 import { DenoiseModelId } from '../../../state/settings';
+import { DENOISE_MODELS } from '../../../utils/lotusDenoiseUtils';
 import {
   DenoiseNode,
   buildGateNode,
@@ -307,7 +308,7 @@ export function DenoiseTester({ model, useGate, gateThreshold, nativeNS }: Denoi
     [stopLive, stopPlayback],
   );
 
-  const modelLabel = model === 'rnnoise' ? 'RNNoise' : model === 'speex' ? 'Speex' : 'DTLN';
+  const modelLabel = DENOISE_MODELS.find((m) => m.id === model)?.name ?? model;
 
   return (
     <Box direction="Column" gap="400">
@@ -367,6 +368,7 @@ export function DenoiseTester({ model, useGate, gateThreshold, nativeNS }: Denoi
                 { label: 'RNNoise', model: 'rnnoise' },
                 { label: 'Speex', model: 'speex' },
                 { label: 'DTLN', model: 'dtln' },
+                { label: 'DeepFilterNet', model: 'deepfilternet' },
               ] as const
             ).map((b) => (
               <Button
diff --git a/src/app/features/settings/general/General.tsx b/src/app/features/settings/general/General.tsx
index bfdf9a6cc..de55cba8f 100644
--- a/src/app/features/settings/general/General.tsx
+++ b/src/app/features/settings/general/General.tsx
@@ -1240,6 +1240,7 @@ function Calls() {
   const deafenBind = useKeyBind(setDeafenKey);
 
   const mlSupported = isMLDenoiseSupported();
+  const selectedDenoiseModel = DENOISE_MODELS.find((m) => m.id === callDenoiseModel);
 
   return (
     <Box direction="Column" gap="100">
@@ -1258,46 +1259,9 @@ function Calls() {
             <Box direction="Column" gap="200">
               <Text>
                 Filter background noise from your mic during calls. Browser-native uses the built-in
-                WebRTC suppressor (Google NSNet2).
+                WebRTC suppressor (Google NSNet2). ML runs a dedicated model for stronger removal.
               </Text>
 
-              <Box direction="Column" gap="100" style={{ overflowX: 'auto' }}>
-                <Box
-                  direction="Row"
-                  gap="100"
-                  style={{ borderBottom: '1px solid var(--lt-border-color)', paddingBottom: '4px' }}
-                >
-                  <Box style={{ width: '120px' }}>
-                    <Text size="T200">Model</Text>
-                  </Box>
-                  <Box style={{ width: '80px' }}>
-                    <Text size="T200">CPU</Text>
-                  </Box>
-                  <Box style={{ width: '80px' }}>
-                    <Text size="T200">Quality</Text>
-                  </Box>
-                  <Box grow="Yes">
-                    <Text size="T200">Transients</Text>
-                  </Box>
-                </Box>
-                {DENOISE_MODELS.map((model) => (
-                  <Box key={model.id} direction="Row" gap="100">
-                    <Box style={{ width: '120px' }}>
-                      <Text size="T200">{model.name}</Text>
-                    </Box>
-                    <Box style={{ width: '80px' }}>
-                      <Text size="T200">{model.cpuUsage}</Text>
-                    </Box>
-                    <Box style={{ width: '80px' }}>
-                      <Text size="T200">{model.voiceQuality}</Text>
-                    </Box>
-                    <Box grow="Yes">
-                      <Text size="T200">{model.transients}</Text>
-                    </Box>
-                  </Box>
-                ))}
-              </Box>
-
               {!mlSupported && (
                 <Box direction="Column" gap="100">
                   <Text size="T200" priority="400">
@@ -1312,11 +1276,6 @@ function Calls() {
                   </Box>
                 </Box>
               )}
-              {callNoiseSuppression === 'ml' && (
-                <Text size="T200" priority="400">
-                  Note: Applying changes requires rejoining the call.
-                </Text>
-              )}
             </Box>
           }
           after={
@@ -1339,73 +1298,174 @@ function Calls() {
         {callNoiseSuppression === 'ml' && (
           <Box
             direction="Column"
-            gap="300"
+            gap="400"
             style={{
               padding: '16px',
               marginTop: '8px',
-              borderTop: '1px solid var(--lt-border-color)',
-              background: 'rgba(0,0,0,0.1)',
+              borderTop: '1px solid var(--border-color)',
+              background: 'var(--bg-card)',
             }}
           >
-            <SettingTile
-              title="ML Model"
-              description="Choose the machine learning model to use for noise removal."
-              after={
-                <SettingsSelect<DenoiseModelId>
-                  value={callDenoiseModel}
-                  onChange={setCallDenoiseModel}
-                  options={[
-                    { value: 'rnnoise', label: 'RNNoise' },
-                    { value: 'speex', label: 'Speex (Legacy)' },
-                    { value: 'dtln', label: 'DTLN (beta)' },
-                    { value: 'deepfilternet', label: 'DeepFilterNet 3 (beta)' },
-                  ]}
-                />
-              }
-            />
-
-            <SettingTile
-              title="Series Suppression"
-              description="Run the browser's native stationary noise filter before the ML model. Recommended for eliminating fan hum."
-              after={
-                <Switch
-                  variant="Primary"
-                  value={callDenoiseNativeNS}
-                  onChange={setCallDenoiseNativeNS}
-                />
-              }
-            />
-
-            <SettingTile
-              title="Noise Gate"
-              description="Hard-cut audio when you aren't speaking to ensure absolute silence between sentences."
-              after={
-                <Switch variant="Primary" value={callDenoiseGate} onChange={setCallDenoiseGate} />
-              }
-            />
-
-            {callDenoiseGate && (
-              <Box direction="Column" gap="100">
-                <Box direction="Row" justifyContent="SpaceBetween">
-                  <Text size="T200">Gate Threshold</Text>
-                  <Text size="T200">{callDenoiseGateThreshold} dB</Text>
+            {/* ── Model selection ───────────────────────────────────────── */}
+            <Box direction="Column" gap="200">
+              <Text size="L400">Model</Text>
+              <SettingTile
+                title="ML Model"
+                description="Choose the machine learning model used for noise removal. Heavier models clean more aggressively at a higher CPU cost."
+                after={
+                  <SettingsSelect<DenoiseModelId>
+                    value={callDenoiseModel}
+                    onChange={setCallDenoiseModel}
+                    options={DENOISE_MODELS.map((m) => ({ value: m.id, label: m.name }))}
+                  />
+                }
+              />
+              {selectedDenoiseModel && (
+                <Box
+                  direction="Column"
+                  gap="200"
+                  style={{
+                    padding: '12px',
+                    borderRadius: '8px',
+                    border: '1px solid var(--border-color)',
+                    background: 'var(--bg-input)',
+                  }}
+                >
+                  <Text size="T300">{selectedDenoiseModel.name}</Text>
+                  <Text size="T200" priority="300">
+                    {selectedDenoiseModel.description}
+                  </Text>
+                  <Box direction="Row" gap="400" wrap="Wrap">
+                    {(
+                      [
+                        { label: 'CPU', value: selectedDenoiseModel.cpuUsage },
+                        { label: 'Voice quality', value: selectedDenoiseModel.voiceQuality },
+                        { label: 'Transients', value: selectedDenoiseModel.transients },
+                        { label: 'Download', value: selectedDenoiseModel.binarySize },
+                      ] as const
+                    ).map((stat) => (
+                      <Box key={stat.label} direction="Column" gap="100">
+                        <Text size="T200" priority="300">
+                          {stat.label}
+                        </Text>
+                        <Text size="T300">{stat.value}</Text>
+                      </Box>
+                    ))}
+                  </Box>
                 </Box>
-                <input
-                  type="range"
-                  min="-100"
-                  max="0"
-                  step="1"
-                  value={callDenoiseGateThreshold}
-                  onChange={(e) => setCallDenoiseGateThreshold(parseInt(e.target.value, 10))}
-                  style={{ width: '100%', accentColor: 'var(--accent-orange)' }}
-                />
-              </Box>
-            )}
+              )}
 
+              <details>
+                <summary style={{ cursor: 'pointer' }}>
+                  <Text as="span" size="T200" priority="300">
+                    Compare all models
+                  </Text>
+                </summary>
+                <Box direction="Column" gap="100" style={{ overflowX: 'auto', marginTop: '8px' }}>
+                  <Box
+                    direction="Row"
+                    gap="100"
+                    style={{
+                      borderBottom: '1px solid var(--border-color)',
+                      paddingBottom: '4px',
+                    }}
+                  >
+                    <Box style={{ width: '160px' }}>
+                      <Text size="T200" priority="300">
+                        Model
+                      </Text>
+                    </Box>
+                    <Box style={{ width: '80px' }}>
+                      <Text size="T200" priority="300">
+                        CPU
+                      </Text>
+                    </Box>
+                    <Box style={{ width: '90px' }}>
+                      <Text size="T200" priority="300">
+                        Quality
+                      </Text>
+                    </Box>
+                    <Box grow="Yes">
+                      <Text size="T200" priority="300">
+                        Transients
+                      </Text>
+                    </Box>
+                  </Box>
+                  {DENOISE_MODELS.map((model) => (
+                    <Box key={model.id} direction="Row" gap="100">
+                      <Box style={{ width: '160px' }}>
+                        <Text size="T200">{model.name}</Text>
+                      </Box>
+                      <Box style={{ width: '80px' }}>
+                        <Text size="T200">{model.cpuUsage}</Text>
+                      </Box>
+                      <Box style={{ width: '90px' }}>
+                        <Text size="T200">{model.voiceQuality}</Text>
+                      </Box>
+                      <Box grow="Yes">
+                        <Text size="T200">{model.transients}</Text>
+                      </Box>
+                    </Box>
+                  ))}
+                </Box>
+              </details>
+
+              <Text size="T200" priority="400">
+                Note: Applying changes requires rejoining the call.
+              </Text>
+            </Box>
+
+            {/* ── Enhancement toggles ───────────────────────────────────── */}
+            <Box
+              direction="Column"
+              gap="300"
+              style={{ paddingTop: '12px', borderTop: '1px solid var(--border-color)' }}
+            >
+              <Text size="L400">Enhancements</Text>
+              <SettingTile
+                title="Series Suppression"
+                description="Run the browser's native stationary noise filter before the ML model. Recommended for eliminating fan hum."
+                after={
+                  <Switch
+                    variant="Primary"
+                    value={callDenoiseNativeNS}
+                    onChange={setCallDenoiseNativeNS}
+                  />
+                }
+              />
+
+              <SettingTile
+                title="Noise Gate"
+                description="Hard-cut audio when you aren't speaking to ensure absolute silence between sentences."
+                after={
+                  <Switch variant="Primary" value={callDenoiseGate} onChange={setCallDenoiseGate} />
+                }
+              />
+
+              {callDenoiseGate && (
+                <Box direction="Column" gap="100">
+                  <Box direction="Row" justifyContent="SpaceBetween">
+                    <Text size="T200">Gate Threshold</Text>
+                    <Text size="T200">{callDenoiseGateThreshold} dB</Text>
+                  </Box>
+                  <input
+                    type="range"
+                    min="-100"
+                    max="0"
+                    step="1"
+                    value={callDenoiseGateThreshold}
+                    onChange={(e) => setCallDenoiseGateThreshold(parseInt(e.target.value, 10))}
+                    style={{ width: '100%', accentColor: 'var(--accent-orange)' }}
+                  />
+                </Box>
+              )}
+            </Box>
+
+            {/* ── Test & calibrate ──────────────────────────────────────── */}
             <Box
               direction="Column"
               gap="200"
-              style={{ paddingTop: '8px', borderTop: '1px solid var(--border-color)' }}
+              style={{ paddingTop: '12px', borderTop: '1px solid var(--border-color)' }}
             >
               <Text size="L400">Test &amp; calibrate</Text>
               <Text size="T200" priority="300">
diff --git a/src/app/utils/lotusDenoiseUtils.ts b/src/app/utils/lotusDenoiseUtils.ts
index cc1d5d259..9e6ae5800 100644
--- a/src/app/utils/lotusDenoiseUtils.ts
+++ b/src/app/utils/lotusDenoiseUtils.ts
@@ -2,8 +2,10 @@
  * Detection utilities for Lotus ML noise suppression (RNNoise).
  */
 
+import { DenoiseModelId } from '../state/settings';
+
 export type DenoiseModel = {
-  id: string;
+  id: DenoiseModelId;
   name: string;
   description: string;
   cpuUsage: string;