From c433db07b7324fb7a327fa3dc600117f16852346 Mon Sep 17 00:00:00 2001
From: rishikanthc <rishikanthc@gmail.com>
Date: Thu, 25 Dec 2025 18:03:05 -0800
Subject: [PATCH] feat: add toggle for Automatic Gain Control

Allow users to enable/disable AGC before starting recording.
AGC automatically adjusts microphone volume for consistent levels.
---
 .../src/components/SystemAudioRecorder.tsx    | 28 ++++++++++++++++++-
 1 file changed, 27 insertions(+), 1 deletion(-)

diff --git a/web/frontend/src/components/SystemAudioRecorder.tsx b/web/frontend/src/components/SystemAudioRecorder.tsx
index 2705a364..3ea692c5 100644
--- a/web/frontend/src/components/SystemAudioRecorder.tsx
+++ b/web/frontend/src/components/SystemAudioRecorder.tsx
@@ -27,6 +27,7 @@ import {
 	DropdownMenuTrigger,
 } from "@/components/ui/dropdown-menu";
 import { Slider } from "@/components/ui/slider";
+import { Switch } from "@/components/ui/switch";
 import { useToast } from "@/components/ui/toast";
 
 interface SystemAudioRecorderProps {
@@ -65,6 +66,9 @@ export function SystemAudioRecorder({
 	const [availableDevices, setAvailableDevices] = useState<MediaDeviceInfo[]>([]);
 	const [selectedDevice, setSelectedDevice] = useState("");
 
+	// Audio Settings
+	const [autoGainControl, setAutoGainControl] = useState(true);
+
 	// Error & Compatibility
 	const [compatibilityError, setCompatibilityError] = useState<string | null>(null);
 	const [permissionDenied, setPermissionDenied] = useState(false);
@@ -315,7 +319,7 @@ export function SystemAudioRecorder({
 						// @ts-expect-error - Chrome/Edge support "remote-only" for echo cancellation
 						echoCancellation: "remote-only",  // Only cancel remote echo, allow mic during local playback
 						noiseSuppression: true,   // Remove background noise
-						autoGainControl: true,    // Normalize volume levels
+						autoGainControl: autoGainControl,    // Normalize volume levels (user configurable)
 					},
 				});
 
@@ -849,6 +853,28 @@ export function SystemAudioRecorder({
 						</div>
 					)}
 
+					{/* Audio Settings */}
+					<div className="space-y-3">
+						<label className="text-sm font-medium text-[var(--text-primary)]">
+							Audio Settings
+						</label>
+						<div className="flex items-center justify-between p-3 bg-[var(--bg-card)] border border-[var(--border-subtle)] rounded-[var(--radius-card)]">
+							<div className="flex-1">
+								<div className="text-sm font-medium text-[var(--text-primary)]">
+									Automatic Gain Control
+								</div>
+								<p className="text-xs text-[var(--text-tertiary)] mt-1">
+									Automatically adjusts microphone volume for consistent audio levels
+								</p>
+							</div>
+							<Switch
+								id="agc-toggle"
+								checked={autoGainControl}
+								onCheckedChange={setAutoGainControl}
+							/>
+						</div>
+					</div>
+
 					{/* Start Button */}
 					<Button
 						onClick={startRecording}