🤖 feat: add configurable event sounds for agent review completion

src/browser/App.tsx

@@ -39,7 +39,7 @@ import { CommandPalette } from "./components/CommandPalette/CommandPalette";
 import { buildCoreSources, type BuildSourcesParams } from "./utils/commands/sources";
 
 import { THINKING_LEVELS, type ThinkingLevel } from "@/common/types/thinking";
-import { CUSTOM_EVENTS } from "@/common/constants/events";
+import { CUSTOM_EVENTS, type CustomEventType } from "@/common/constants/events";
 import { isWorkspaceForkSwitchEvent } from "./utils/workspaceEvents";
 import {
   getAgentIdKey,
@@ -94,6 +94,8 @@ import { getErrorMessage } from "@/common/utils/errors";
 import assert from "@/common/utils/assert";
 import { createProjectRefs } from "@/common/utils/multiProject";
 import { MULTI_PROJECT_SIDEBAR_SECTION_ID } from "@/common/constants/multiProject";
+import type { EventSoundSettings } from "@/common/config/schemas/appConfigOnDisk";
+import { playEventSound } from "@/browser/utils/audio/eventSounds";
 import { WORKSPACE_DEFAULTS } from "@/constants/workspaceDefaults";
 import { LandingPage } from "@/browser/features/LandingPage/LandingPage";
 import { LoadingScreen } from "@/browser/components/LoadingScreen/LoadingScreen";
@@ -238,6 +240,55 @@ function AppInner() {
     workspaceMetadataRef.current = workspaceMetadata;
   }, [workspaceMetadata]);
 
+  const eventSoundSettingsRef = useRef<EventSoundSettings | undefined>(undefined);
+  const eventSoundSettingsLoadVersionRef = useRef(0);
+  useEffect(() => {
+    const handleEventSoundSettingsChanged = (
+      event: CustomEventType<typeof CUSTOM_EVENTS.EVENT_SOUND_SETTINGS_CHANGED>
+    ) => {
+      eventSoundSettingsLoadVersionRef.current += 1;
+      eventSoundSettingsRef.current = event.detail.eventSoundSettings;
+    };
+
+    window.addEventListener(
+      CUSTOM_EVENTS.EVENT_SOUND_SETTINGS_CHANGED,
+      handleEventSoundSettingsChanged as EventListener
+    );
+
+    if (!api) {
+      eventSoundSettingsRef.current = undefined;
+      return () => {
+        window.removeEventListener(
+          CUSTOM_EVENTS.EVENT_SOUND_SETTINGS_CHANGED,
+          handleEventSoundSettingsChanged as EventListener
+        );
+      };
+    }
+
+    let isCancelled = false;
+    const loadVersion = eventSoundSettingsLoadVersionRef.current;
+    void api.config
+      .getConfig()
+      .then((config) => {
+        if (!isCancelled && loadVersion === eventSoundSettingsLoadVersionRef.current) {
+          eventSoundSettingsRef.current = config.eventSoundSettings;
+        }
+      })
+      .catch((error) => {
+        if (!isCancelled) {
+          console.debug("Failed to load event sound settings", { error: String(error) });
+        }
+      });
+
+    return () => {
+      isCancelled = true;
+      window.removeEventListener(
+        CUSTOM_EVENTS.EVENT_SOUND_SETTINGS_CHANGED,
+        handleEventSoundSettingsChanged as EventListener
+      );
+    };
+  }, [api]);
+
   const handleOpenMuxChat = useCallback(() => {
     // User requested an F1 shortcut to jump straight into Chat with Mux.
     const metadata = workspaceMetadataRef.current.get(MUX_HELP_CHAT_WORKSPACE_ID);
@@ -1002,6 +1053,9 @@ function AppInner() {
         return;
       }
 
+      // Play event sound (independent of notification settings).
+      playEventSound(eventSoundSettingsRef.current, "agent_review_ready", api);
+
       // Skip notification if the selected workspace is focused (Slack-like behavior).
       // Notification suppression intentionally follows selection state, not chat-route visibility.
       const isWorkspaceFocused =
@@ -1038,7 +1092,7 @@ function AppInner() {
     return () => {
       unsubscribe?.();
     };
-  }, [setSelectedWorkspace, workspaceStore]);
+  }, [api, setSelectedWorkspace, workspaceStore]);
 
   // Show auth modal if authentication is required
   if (status === "auth_required") {

src/browser/components/AppLoader/AppLoader.auth.test.tsx

@@ -11,6 +11,8 @@ let cleanupDom: (() => void) | null = null;
 let apiStatus: "auth_required" | "connecting" | "error" = "auth_required";
 let apiError: string | null = "Authentication required";
 
+const AUTH_TOKEN_STORAGE_KEY = "mux:auth-token";
+
 // AppLoader imports App, which pulls in Lottie-based components. In happy-dom,
 // lottie-web's canvas bootstrap can throw during module evaluation.
 void mock.module("lottie-react", () => ({
@@ -67,14 +69,32 @@ void mock.module("@/browser/components/StartupConnectionError/StartupConnectionE
 void mock.module("@/browser/components/AuthTokenModal/AuthTokenModal", () => ({
   // Note: Module mocks leak between bun test files.
   // Export all commonly-used symbols to avoid cross-test import errors.
+  // Keep token helpers behaviorally close to production so leaked mocks do not
+  // break tests that expect auth-token persistence.
   AuthTokenModal: (props: { error?: string | null }) => (
     <div data-testid="AuthTokenModalMock">{props.error ?? "no-error"}</div>
   ),
-  getStoredAuthToken: () => null,
-  // eslint-disable-next-line @typescript-eslint/no-empty-function
-  setStoredAuthToken: () => {},
-  // eslint-disable-next-line @typescript-eslint/no-empty-function
-  clearStoredAuthToken: () => {},
+  getStoredAuthToken: () => {
+    try {
+      return localStorage.getItem(AUTH_TOKEN_STORAGE_KEY);
+    } catch {
+      return null;
+    }
+  },
+  setStoredAuthToken: (token: string) => {
+    try {
+      localStorage.setItem(AUTH_TOKEN_STORAGE_KEY, token);
+    } catch {
+      // no-op in tests without storage
+    }
+  },
+  clearStoredAuthToken: () => {
+    try {
+      localStorage.removeItem(AUTH_TOKEN_STORAGE_KEY);
+    } catch {
+      // no-op in tests without storage
+    }
+  },
 }));
 
 import { AppLoader } from "../AppLoader/AppLoader";

src/browser/contexts/API.test.tsx

@@ -65,13 +65,44 @@ let fetchImpl: (input: RequestInfo | URL, init?: RequestInit) => Promise<Respons
 
 // Mock orpc client
 let pingImpl: () => Promise<string> = () => Promise.resolve("pong");
+const AUTH_TOKEN_STORAGE_KEY = "mux:auth-token";
 let storedAuthToken: string | null = null;
-const getStoredAuthTokenMock = mock(() => storedAuthToken);
+
+function readStoredAuthTokenFromLocalStorage(): string | null {
+  try {
+    return localStorage.getItem(AUTH_TOKEN_STORAGE_KEY);
+  } catch {
+    return storedAuthToken;
+  }
+}
+
+function writeStoredAuthTokenToLocalStorage(token: string): void {
+  try {
+    localStorage.setItem(AUTH_TOKEN_STORAGE_KEY, token);
+  } catch {
+    // no-op in tests without storage
+  }
+}
+
+function clearStoredAuthTokenFromLocalStorage(): void {
+  try {
+    localStorage.removeItem(AUTH_TOKEN_STORAGE_KEY);
+  } catch {
+    // no-op in tests without storage
+  }
+}
+
+const getStoredAuthTokenMock = mock(() => {
+  storedAuthToken = readStoredAuthTokenFromLocalStorage();
+  return storedAuthToken;
+});
 const setStoredAuthTokenMock = mock((token: string) => {
   storedAuthToken = token;
+  writeStoredAuthTokenToLocalStorage(token);
 });
 const clearStoredAuthTokenMock = mock(() => {
   storedAuthToken = null;
+  clearStoredAuthTokenFromLocalStorage();
 });
 
 void mock.module("@/common/orpc/client", () => ({
@@ -93,6 +124,8 @@ void mock.module("@orpc/client/message-port", () => ({
 void mock.module("@/browser/components/AuthTokenModal/AuthTokenModal", () => ({
   // Note: Module mocks leak between bun test files.
   // Export all commonly-used symbols to avoid cross-test import errors.
+  // Keep token helpers behaviorally close to production so leaked mocks do not
+  // break tests that expect auth-token persistence.
   AuthTokenModal: () => null,
   getStoredAuthToken: getStoredAuthTokenMock,
   setStoredAuthToken: setStoredAuthTokenMock,