feat(desktop): add audio muting to browser pane

apps/desktop/src/lib/trpc/routers/browser/browser.ts

@@ -49,6 +49,30 @@ export const createBrowserRouter = () => {
 				return { success: true };
 			}),
 
+		/** Sets whether audio is muted for the given browser pane. */
+		setAudioMuted: publicProcedure
+			.input(
+				z.object({
+					paneId: z.string(),
+					muted: z.boolean(),
+				}),
+			)
+			.mutation(({ input }) => {
+				browserManager.setAudioMuted(input.paneId, input.muted);
+				return { success: true };
+			}),
+
+		/** Queries whether audio is muted for the given browser pane. */
+		isAudioMuted: publicProcedure
+			.input(
+				z.object({
+					paneId: z.string(),
+				}),
+			)
+			.query(({ input }) => {
+				return browserManager.isAudioMuted(input.paneId);
+			}),
+
 		goBack: publicProcedure
 			.input(z.object({ paneId: z.string() }))
 			.mutation(({ input }) => {

apps/desktop/src/main/lib/browser/browser-manager.test.ts

@@ -8,6 +8,13 @@ import {
 	mock,
 	test,
 } from "bun:test";
+
+mock.module("@lingui/core/macro", () => ({
+	msg: (descriptor: unknown) => descriptor,
+	t: (descriptor: unknown) => descriptor,
+}));
+
+import { i18n } from "@superset/i18n";
 import { webContents } from "electron";
 import { PROTOCOL_SCHEME } from "shared/constants";
 import { browserManager } from "./browser-manager";
@@ -19,6 +26,10 @@ const preloadFromId = fromIdMock.getMockImplementation();
 
 beforeAll(() => {
 	fromIdMock.mockImplementation((id: number) => wcById.get(id) ?? null);
+	if (!i18n.locale) {
+		i18n.load("en", {});
+		i18n.activate("en");
+	}
 });
 
 afterAll(() => {
@@ -45,6 +56,9 @@ type WcListener = (...args: unknown[]) => void;
 
 interface FakeWebContents {
 	throttlingCalls: boolean[];
+	audioMuted: boolean;
+	setAudioMuted: (muted: boolean) => void;
+	isAudioMuted: () => boolean;
 	isDestroyed: () => boolean;
 	isCrashed: () => boolean;
 	setBackgroundThrottling: (allowed: boolean) => void;
@@ -65,13 +79,16 @@ interface FakeWebContents {
 		sendCommand: ReturnType<typeof mock>;
 	};
 }
-
 let nextId = 1;
-
 function makeWc(): { wc: FakeWebContents; id: number } {
 	const throttlingCalls: boolean[] = [];
 	const wc: FakeWebContents = {
 		throttlingCalls,
+		audioMuted: false,
+		setAudioMuted: (muted: boolean) => {
+			wc.audioMuted = muted;
+		},
+		isAudioMuted: () => wc.audioMuted,
 		isDestroyed: () => false,
 		isCrashed: () => false,
 		setBackgroundThrottling: (allowed: boolean) => {
@@ -878,3 +895,105 @@ describe("right-click menu", () => {
 		expect(popup).toHaveBeenCalled();
 	});
 });
+
+describe("audio muting", () => {
+	test("sets audio muted on guest webContents and persists across registrations", () => {
+		const paneId = "test-audio-pane";
+		registered.push(paneId);
+		try {
+			const { wc: wc1, id: id1 } = makeWc();
+
+			// 1. Initial register: default unmuted
+			browserManager.register(paneId, id1);
+			expect(browserManager.isAudioMuted(paneId)).toBe(false);
+			expect(wc1.audioMuted).toBe(false);
+
+			// 2. Explicit mute: updates both manager and webContents
+			browserManager.setAudioMuted(paneId, true);
+			expect(browserManager.isAudioMuted(paneId)).toBe(true);
+			expect(wc1.audioMuted).toBe(true);
+
+			// 3. Re-register with a new webContents ID (reloads / navigation / crash recovery)
+			const { wc: wc2, id: id2 } = makeWc();
+			browserManager.register(paneId, id2);
+
+			// Mute state must persist and be applied to the new webContents
+			expect(browserManager.isAudioMuted(paneId)).toBe(true);
+			expect(wc2.audioMuted).toBe(true);
+
+			// 4. Explicit unmute
+			browserManager.setAudioMuted(paneId, false);
+			expect(browserManager.isAudioMuted(paneId)).toBe(false);
+			expect(wc2.audioMuted).toBe(false);
+		} finally {
+			browserManager.unregister(paneId);
+		}
+	});
+
+	test("applies mute state to child popups both at creation and dynamically", () => {
+		const paneId = "test-popup-audio-pane";
+		registered.push(paneId);
+		try {
+			const { wc: guestWc, id: guestId } = makeWc();
+			browserManager.register(paneId, guestId);
+
+			const { wc: popupWc } = makeWc();
+			const windowListeners = new Map<string, (() => void)[]>();
+			const fakeWindow = {
+				webContents: popupWc,
+				on: (event: string, fn: () => void) => {
+					windowListeners.set(event, [
+						...(windowListeners.get(event) ?? []),
+						fn,
+					]);
+				},
+				once: (event: string, fn: () => void) => {
+					windowListeners.set(event, [
+						...(windowListeners.get(event) ?? []),
+						fn,
+					]);
+				},
+				close: () => {
+					for (const fn of windowListeners.get("closed") ?? []) {
+						fn();
+					}
+				},
+			};
+
+			// Simulate child popup creation while unmuted
+			for (const listener of guestWc.listeners.get("did-create-window") ?? []) {
+				listener(fakeWindow);
+			}
+			expect(popupWc.audioMuted).toBe(false);
+
+			// Muting pane updates the existing popup
+			browserManager.setAudioMuted(paneId, true);
+			expect(popupWc.audioMuted).toBe(true);
+
+			// Unmuting pane updates the existing popup
+			browserManager.setAudioMuted(paneId, false);
+			expect(popupWc.audioMuted).toBe(false);
+
+			// Muting pane again, then creating a second popup opens it muted
+			browserManager.setAudioMuted(paneId, true);
+			const { wc: popupWc2 } = makeWc();
+			const fakeWindow2 = {
+				webContents: popupWc2,
+				on: () => {},
+				once: () => {},
+			};
+			for (const listener of guestWc.listeners.get("did-create-window") ?? []) {
+				listener(fakeWindow2);
+			}
+			expect(popupWc2.audioMuted).toBe(true);
+
+			// Closing window unhooks it
+			fakeWindow.close();
+			browserManager.setAudioMuted(paneId, false);
+			// popupWc was closed, so it stays as it was
+			expect(popupWc2.audioMuted).toBe(false);
+		} finally {
+			browserManager.unregister(paneId);
+		}
+	});
+});

apps/desktop/src/main/lib/browser/browser-manager.ts

@@ -260,6 +260,8 @@ class BrowserManager extends EventEmitter {
 	private popupListeners = new Map<string, () => void>();
 	private focusListeners = new Map<string, () => void>();
 	private cdpDetachers = new Map<string, () => void>();
+	private mutedPanes = new Map<string, boolean>();
+	private popupWebContents = new Map<string, Set<Electron.WebContents>>();
 	// Ref-count of in-flight agent work per pane (a live CDP session, a
 	// screenshot capture). While present the guest renderer stays
 	// un-throttled — see acquireAgentWake. The entry object's identity ties
@@ -270,7 +272,36 @@ class BrowserManager extends EventEmitter {
 	private forwardableChords = new Set<string>();
 	private designMode = new DesignModeController();
 
-	setForwardableChords(chords: string[]): void {
+	/** Sets audio muted state for the given pane and its child popups. */
+	public setAudioMuted(paneId: string, muted: boolean): void {
+		this.mutedPanes.set(paneId, muted);
+		const entry = this.panes.get(paneId);
+		if (entry) {
+			const guest = webContents.fromId(entry.webContentsId);
+			if (
+				guest &&
+				!guest.isDestroyed() &&
+				typeof guest.setAudioMuted === "function"
+			) {
+				guest.setAudioMuted(muted);
+			}
+		}
+		const popups = this.popupWebContents.get(paneId);
+		if (popups) {
+			for (const popup of popups) {
+				if (!popup.isDestroyed() && typeof popup.setAudioMuted === "function") {
+					popup.setAudioMuted(muted);
+				}
+			}
+		}
+	}
+
+	/** Returns true if the pane is currently set to mute audio. */
+	public isAudioMuted(paneId: string): boolean {
+		return this.mutedPanes.get(paneId) ?? false;
+	}
+
+	public setForwardableChords(chords: string[]): void {
 		this.forwardableChords = new Set(chords);
 	}
 
@@ -300,6 +331,12 @@ class BrowserManager extends EventEmitter {
 		});
 		const wc = webContents.fromId(webContentsId);
 		if (wc) {
+			// Apply persisted or default audio mute state
+			const isMuted = this.isAudioMuted(paneId);
+			if (typeof wc.setAudioMuted === "function") {
+				wc.setAudioMuted(isMuted);
+			}
+
 			// Throttling stays enabled by default so parked/offscreen persistent
 			// webviews don't run at full speed in the background — except while
 			// agent work is in flight on the pane (see acquireAgentWake), where a
@@ -338,6 +375,8 @@ class BrowserManager extends EventEmitter {
 		this.designMode.cancel(paneId, "destroyed");
 		this.panes.delete(paneId);
 		this.consoleLogs.delete(paneId);
+		this.mutedPanes.delete(paneId);
+		this.popupWebContents.delete(paneId);
 		// Tell subscribers when a live wake dies with the pane, so the renderer
 		// doesn't keep a stale pane id in its exemption set.
 		if (this.agentWakes.delete(paneId)) this.emitAgentActive();
@@ -1081,6 +1120,16 @@ class BrowserManager extends EventEmitter {
 	): void {
 		const wc = window.webContents;
 		markBrowserPanePopup(wc);
+		if (typeof wc.setAudioMuted === "function") {
+			wc.setAudioMuted(this.isAudioMuted(paneId));
+		}
+		let popups = this.popupWebContents.get(paneId);
+		if (!popups) {
+			popups = new Set();
+			this.popupWebContents.set(paneId, popups);
+		}
+		popups.add(wc);
+
 		const detachGuard = attachNavigationGuard(wc, (url) =>
 			this.emit("deep-link", url),
 		);
@@ -1090,7 +1139,13 @@ class BrowserManager extends EventEmitter {
 		wc.on("did-create-window", (child) => {
 			this.configurePopupWindow(paneId, child);
 		});
-		window.on("closed", detachGuard);
+		window.once("closed", () => {
+			popups?.delete(wc);
+			if (popups?.size === 0) {
+				this.popupWebContents.delete(paneId);
+			}
+			detachGuard();
+		});
 	}
 
 	/** Items extensions add with `chrome.contextMenus`, for the pane's right-click menu. */

apps/desktop/src/renderer/routes/_authenticated/_dashboard/v2-workspace/$workspaceId/hooks/usePaneRegistry/components/BrowserPane/components/BrowserOverflowMenu/BrowserOverflowMenu.tsx

@@ -8,7 +8,14 @@ import {
 } from "@superset/ui/dropdown-menu";
 import { toast } from "@superset/ui/sonner";
 import { useNavigate } from "@tanstack/react-router";
-import { CheckIcon, MinusIcon, PlusIcon, RotateCcwIcon } from "lucide-react";
+import {
+	CheckIcon,
+	MinusIcon,
+	PlusIcon,
+	RotateCcwIcon,
+	Volume2Icon,
+	VolumeXIcon,
+} from "lucide-react";
 import { useEffect, useState } from "react";
 import { TbDots } from "react-icons/tb";
 import { ImportHistoryDialog } from "renderer/components/ImportHistoryDialog";
@@ -72,6 +79,48 @@ export function BrowserOverflowMenu({
 	const [isScreenshotsOpen, setIsScreenshotsOpen] = useState(false);
 	const [isClearDataOpen, setIsClearDataOpen] = useState(false);
 	const [isMenuOpen, setIsMenuOpen] = useState(false);
+	const [audioMuteState, setAudioMuteState] = useState<{
+		paneId: string;
+		muted: boolean;
+	} | null>(null);
+
+	const isAudioMuteLoaded = audioMuteState?.paneId === paneId;
+	const isAudioMuted = isAudioMuteLoaded ? audioMuteState.muted : false;
+
+	useEffect(() => {
+		if (!paneId) return;
+		let cancelled = false;
+		electronTrpcClient.browser.isAudioMuted
+			.query({ paneId })
+			.then((muted) => {
+				if (!cancelled) {
+					setAudioMuteState({ paneId, muted });
+				}
+			})
+			.catch((error) => {
+				console.warn("[BrowserOverflowMenu] could not read audio mute state", {
+					paneId,
+					error,
+				});
+			});
+		return () => {
+			cancelled = true;
+		};
+	}, [paneId]);
+
+	const handleToggleMute = () => {
+		if (!paneId || !isAudioMuteLoaded) return;
+		const next = !isAudioMuted;
+		electronTrpcClient.browser.setAudioMuted
+			.mutate({ paneId, muted: next })
+			.then(() => setAudioMuteState({ paneId, muted: next }))
+			.catch((error) => {
+				console.warn("[BrowserOverflowMenu] could not set audio mute state", {
+					paneId,
+					error,
+				});
+			});
+	};
 
 	// The webview swallows pointer events, so a click on the page would never
 	// reach the document listener Radix dismisses on; passing the click
@@ -257,6 +306,18 @@ export function BrowserOverflowMenu({
 						<Trans>Take a screenshot</Trans>
 					</DropdownMenuItem>
 					<DropdownMenuSeparator />
+					<DropdownMenuItem
+						onClick={handleToggleMute}
+						disabled={!hasPage || !isAudioMuteLoaded}
+						className="justify-between"
+					>
+						{isAudioMuted ? <Trans>Unmute</Trans> : <Trans>Mute</Trans>}
+						{isAudioMuted ? (
+							<VolumeXIcon className="size-3.5" />
+						) : (
+							<Volume2Icon className="size-3.5" />
+						)}
+					</DropdownMenuItem>
 					<DropdownMenuItem onClick={handleHardReload} disabled={!hasPage}>
 						<Trans>Hard reload</Trans>
 					</DropdownMenuItem>