Add enableListenerMode functionality to device lifecycle and error handling

frontend/src/hooks/useLobbyDevices/index.ts

@@ -89,6 +89,7 @@ export function useLobbyDevices(meetingReady: boolean): LobbyDeviceState {
     handleDismissPrompt: deviceLifecycle.handleDismissPrompt,
     clearError: mediaStream.clearError,
     clearDeviceError: mediaStream.clearDeviceError,
+    enableListenerMode: deviceLifecycle.enableListenerMode,
     retryDeviceAccess: setupDevicesAndEnumerate,
     cleanup: useCallback(() => {
       mediaStream.stopStream();

frontend/src/hooks/useLobbyDevices/types.ts

@@ -25,6 +25,7 @@ export interface LobbyDeviceState {
   handleDismissPrompt: () => void;
   clearError: () => void;
   clearDeviceError: () => void;
+  enableListenerMode: () => void;
   retryDeviceAccess: () => void;
   cleanup: () => void;
 }

frontend/src/hooks/useLobbyDevices/useDeviceLifecycle.ts

@@ -15,6 +15,7 @@ export interface DeviceLifecycleReturn {
   listenerMode: boolean;
   handleAllowPermissions: () => void;
   handleDismissPrompt: () => void;
+  enableListenerMode: () => void;
 }
 
 /**
@@ -70,10 +71,16 @@ export function useDeviceLifecycle({
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [meetingReady]);
 
+  const enableListenerMode = () => {
+    setListenerMode(true);
+    enumerateDevices().catch(() => {});
+  };
+
   return {
     showPermissionPrompt,
     listenerMode,
     handleAllowPermissions,
     handleDismissPrompt,
+    enableListenerMode,
   };
 }

frontend/src/pages/MeetingLobby/ErrorDisplay.tsx

@@ -6,6 +6,7 @@ interface ErrorDisplayProps {
   onClearDeviceError: () => void;
   onRetryDeviceAccess: () => void;
   onClearError: () => void;
+  onEnableListenerMode: () => void;
 }
 
 export const ErrorDisplay: React.FC<ErrorDisplayProps> = ({
@@ -14,6 +15,7 @@ export const ErrorDisplay: React.FC<ErrorDisplayProps> = ({
   onClearDeviceError,
   onRetryDeviceAccess,
   onClearError,
+  onEnableListenerMode,
 }) => {
   if (deviceError) {
     return (
@@ -27,7 +29,10 @@ export const ErrorDisplay: React.FC<ErrorDisplayProps> = ({
             // dialog appears on top of the modal, so the user keeps context.
             onRetryDeviceAccess();
           }}
-          onDismiss={onClearDeviceError}
+          onDismiss={() => {
+            onClearDeviceError();
+            onEnableListenerMode();
+          }}
         />
       </div>
     );

frontend/src/pages/MeetingLobby/index.tsx

@@ -69,6 +69,7 @@ export const MeetingLobby: React.FC<MeetingLobbyProps> = ({
         deviceError={devices.deviceError}
         error={displayError}
         onClearDeviceError={devices.clearDeviceError}
+        onEnableListenerMode={devices.enableListenerMode}
         onRetryDeviceAccess={async () => {
           // Browsers require getUserMedia to be called synchronously within the
           // user gesture (click). Calling it here directly — before any async