📈(frontend) stop double-reporting media device failures

Only report `Other` `MediaDeviceFailure` cases as they genuinely
need investigation.

Make sure we do not report the same situation both as a media event
and as a media exception when it is already handled.

CHANGELOG.md

@@ -8,6 +8,51 @@ and this project adheres to
 
 ## [Unreleased]
 
+### Changed
+
+- 🔥(frontend) drop unused vendored ConnectionObserver
+- 🐛(frontend) vendor formatChatMessageLinks and trim surrounding newlines
+
+### Fixed
+
+- 📈(frontend) downgrade unreachable external home URL from error to event
+- 🐛(frontend) handle 401 responses when syncing user preferences
+- 🐛(frontend) harden speaker test against missing sinks and play errors
+- 🐛(frontend) implement hysteresis band for the control bar layout
+- 🐛(frontend) fix toolbar ResizeObserver loop and alignment drift
+- 🐛(analytics) filter benign ResizeObserver loop error in Sentry/PostHog
+- 🐛(frontend) stop reporting screen-share denials as errors
+- 🐛(frontend) generalize screen-share error modal beyond macOS
+- 📈(frontend) stop double-reporting media device failures
+
+## [1.26.0] - 2026-08-12
+
+### Added
+
+- 📈(frontend) capture media diagnostics on media errors
+- ✨(frontend) add an audio gauge to the microphone select menu
+- ✨(frontend) add a sound tester to the output select menu
+- ✨(frontend) prompt for permissions when toggling a denied device
+- ⚗️(frontend) capture console.error in PostHog
+- 📈(frontend) snapshot media devices on the happy path
+- 🚸(frontend) guide users when the OS blocks browser media access
+- ✨(frontend) add a silent-microphone watcher on join and room screens
+
+### Changed
+
+- ♻️(frontend) encapsulate error tracking behind a telemetry module
+- ♻️(frontend) encapsulate PostHog capture calls in the telemetry module
+- 🔧(frontend) sync persisted device ids with the actual selected devices
+- 💄(frontend) hide the ProConnect button on narrow viewports
+- ♻️(frontend) prefer captureMediaEvent over reportError when no-op
+
+### Fixed
+
+- 🐛(frontend) drop exact deviceId constraint on dynamic track creation
+- 🐛(frontend) fix permission store regression
+- 🐛(frontend) handle missing device errors gracefully
+- 🐛(frontend) display the meeting id in the join screen page title
+
 ## [1.25.2] - 2026-08-06
 
 ### Fixed

src/agents/pyproject.toml

@@ -1,7 +1,7 @@
 
 [project]
 name = "agents"
-version = "1.25.2"
+version = "1.26.0"
 requires-python = ">=3.12"
 dependencies = [
     "livekit-agents==1.6.7",

src/agents/uv.lock

@@ -9,7 +9,7 @@ resolution-markers = [
 
 [[package]]
 name = "agents"
-version = "1.25.2"
+version = "1.26.0"
 source = { virtual = "." }
 dependencies = [
     { name = "livekit-agents" },

src/backend/pyproject.toml

@@ -7,7 +7,7 @@ build-backend = "uv_build"
 
 [project]
 name = "meet"
-version = "1.25.2"
+version = "1.26.0"
 authors = [{ "name" = "DINUM", "email" = "dev@mail.numerique.gouv.fr" }]
 classifiers = [
     "Development Status :: 5 - Production/Stable",

src/backend/uv.lock

@@ -1187,7 +1187,7 @@ wheels = [
 
 [[package]]
 name = "meet"
-version = "1.25.2"
+version = "1.26.0"
 source = { editable = "." }
 dependencies = [
     { name = "aiohttp" },

src/frontend/package-lock.json

@@ -1,12 +1,12 @@
 {
   "name": "meet",
-  "version": "1.25.2",
+  "version": "1.26.0",
   "lockfileVersion": 3,
   "requires": true,
   "packages": {
     "": {
       "name": "meet",
-      "version": "1.25.2",
+      "version": "1.26.0",
       "dependencies": {
         "@fontsource-variable/atkinson-hyperlegible-next": "5.2.6",
         "@fontsource-variable/lexend": "5.2.11",

src/frontend/package.json

@@ -1,7 +1,7 @@
 {
   "name": "meet",
   "private": true,
-  "version": "1.25.2",
+  "version": "1.26.0",
   "type": "module",
   "scripts": {
     "dev": "panda codegen && vite",

src/frontend/src/components/SoundTester.tsx

@@ -3,27 +3,30 @@ import { useEffect, useRef, useState } from 'react'
 import { useTranslation } from 'react-i18next'
 import { useMediaDeviceSelect } from '@livekit/components-react'
 import { reportError } from '@/features/analytics/telemetry'
+import { canTestAudioOutput } from '@/features/rooms/utils/canTestAudioOutput'
 
 export const SoundTester = () => {
   const { t } = useTranslation('settings')
   const [isPlaying, setIsPlaying] = useState(false)
   const audioRef = useRef<HTMLAudioElement>(null)
 
-  const { activeDeviceId } = useMediaDeviceSelect({ kind: 'audiooutput' })
+  const { devices, activeDeviceId } = useMediaDeviceSelect({
+    kind: 'audiooutput',
+  })
 
   useEffect(() => {
-    const updateActiveId = async (deviceId: string) => {
-      try {
-        await audioRef?.current?.setSinkId(deviceId)
-      } catch (error) {
-        reportError(
-          'device_switch_failure',
-          new Error(`Error setting sinkId: ${error}`)
-        )
+    if (!canTestAudioOutput() || !activeDeviceId) return
+    if (!devices.some((device) => device.deviceId === activeDeviceId)) return
+    audioRef.current?.setSinkId(activeDeviceId).catch((error) => {
+      if (error instanceof DOMException && error.name === 'NotFoundError') {
+        return
       }
-    }
-    updateActiveId(activeDeviceId)
-  }, [activeDeviceId])
+      reportError(
+        'device_switch_failure',
+        new Error(`Error setting sinkId: ${error}`)
+      )
+    })
+  }, [devices, activeDeviceId])
 
   // prevent pausing the sound
   navigator.mediaSession.setActionHandler('pause', function () {})
@@ -32,9 +35,13 @@ export const SoundTester = () => {
     <>
       <Button
         variant="secondaryText"
-        onPress={() => {
-          audioRef?.current?.play()
-          setIsPlaying(true)
+        onPress={async () => {
+          try {
+            await audioRef?.current?.play()
+            setIsPlaying(true)
+          } catch {
+            setIsPlaying(false)
+          }
         }}
         size="sm"
         isDisabled={isPlaying}
@@ -48,7 +55,7 @@ export const SoundTester = () => {
       {/* eslint-disable jsx-a11y/media-has-caption */}
       <audio
         ref={audioRef}
-        src="sounds/uprise.mp3"
+        src="/sounds/uprise.mp3"
         onEnded={() => setIsPlaying(false)}
       />
     </>

src/frontend/src/features/analytics/exceptionFilters.ts

@@ -0,0 +1,24 @@
+import type { CaptureResult } from 'posthog-js'
+
+const IGNORED_EXCEPTION_PATTERNS = [
+  /ResizeObserver loop (completed with undelivered notifications|limit exceeded)/,
+]
+
+const shouldIgnoreException = (value: unknown): boolean =>
+  typeof value === 'string' &&
+  IGNORED_EXCEPTION_PATTERNS.some((pattern) => pattern.test(value))
+
+export const filterExceptions = (
+  event: CaptureResult | null
+): CaptureResult | null => {
+  if (event?.event !== '$exception') return event
+
+  const exceptionList = event.properties?.['$exception_list']
+  const values: unknown[] = Array.isArray(exceptionList)
+    ? exceptionList.map((exception) => exception?.value)
+    : []
+
+  values.push(event.properties?.['$exception_message'])
+
+  return values.some(shouldIgnoreException) ? null : event
+}

src/frontend/src/features/analytics/hooks/useAnalytics.ts

@@ -1,8 +1,8 @@
 import { useEffect } from 'react'
-import { useLocation } from 'wouter'
 import { type ApiUser } from '@/features/auth/api/ApiUser'
 import { useUser } from '@/features/auth/api/useUser'
 import { getPosthog } from '../utils'
+import { filterExceptions } from '../exceptionFilters'
 
 export const startAnalyticsSession = (data: ApiUser) => {
   getPosthog().then((ph) => {
@@ -31,7 +31,6 @@ export const useAnalytics = ({
   flags_api_host,
   isDisabled,
 }: useAnalyticsProps) => {
-  const [location] = useLocation()
   const { user } = useUser()
 
   useEffect(() => {
@@ -42,6 +41,14 @@ export const useAnalytics = ({
         api_host: host,
         flags_api_host: flags_api_host,
         person_profiles: 'always',
+        capture_pageview: 'history_change',
+        capture_pageleave: true,
+        capture_exceptions: {
+          capture_unhandled_errors: true,
+          capture_unhandled_rejections: true,
+          capture_console_errors: true,
+        },
+        before_send: filterExceptions,
       })
     })
   }, [id, host, flags_api_host, isDisabled])
@@ -51,12 +58,5 @@ export const useAnalytics = ({
     startAnalyticsSession(user)
   }, [user])
 
-  // From PostHog tutorial on PageView tracking in a Single Page Application (SPA) context.
-  useEffect(() => {
-    getPosthog().then((ph) => {
-      ph.capture('$pageview')
-    })
-  }, [location])
-
   return null
 }

src/frontend/src/features/analytics/telemetry.ts

@@ -19,9 +19,11 @@ export const captureEvent = (
 export type LogCode =
   // media
   | 'join_preview_failure'
+  | 'room_media_failure'
   | 'livekit_room_error'
   | 'device_switch_failure'
   | 'permission_poll_failure'
+  | 'media_devices_error_event'
   // non-media families
   | 'participant_mute_api_failure'
   | 'permissions_api_failure'
@@ -133,7 +135,15 @@ export const captureMediaEvent = async (
     | 'media-device-error'
     | 'media-acquisition'
     | 'media-device-topology'
-    | 'media-device-success',
+    | 'media-device-success'
+    | 'device-not-found'
+    | 'permissions-denied'
+    | 'screen-share-permission-denied'
+    | 'silent-mic-detected'
+    | 'silent-mic-analyser-unavailable'
+    | 'silent-mic-recovered'
+    | 'visit-room'
+    | 'connection-event',
   props: Record<string, unknown>
 ) => {
   captureEvent(event, { ...props, ...(await deviceSnapshot()) })

src/frontend/src/features/auth/api/useSyncUserPreferencesWithBackend.tsx

@@ -6,6 +6,8 @@ import { queryClient } from '@/api/queryClient'
 import { updateUserPreferences } from './updateUserPreferences'
 import { convertToBackendLanguage } from '@/utils/languages'
 import { useUser } from './useUser'
+import { ApiError } from '@/api/ApiError.ts'
+import { reportError } from '@/features/analytics/telemetry'
 
 /**
  * Hook that synchronizes user browser preferences (language, timezone) with backend user settings.
@@ -42,6 +44,11 @@ export const useSyncUserPreferencesWithBackend = () => {
       }
     }
 
-    syncBrowserPreferencesToBackend()
+    syncBrowserPreferencesToBackend().catch((error) => {
+      if (error instanceof ApiError && error.statusCode === 401) return
+      reportError('generic_failure', error, {
+        context: '[useSyncUserPreferencesWithBackend] Failed to sync:',
+      })
+    })
   }, [i18n.language, isLoggedIn, user, mutateAsync])
 }

src/frontend/src/features/chat/components/ChatMessageBody.tsx

@@ -1,6 +1,6 @@
 import { ChatRow } from '@/stores/chat'
 import React, { useMemo } from 'react'
-import { formatChatMessageLinks } from '@livekit/components-react'
+import { formatChatMessageLinks } from '../utils'
 import { css } from '@/styled-system/css'
 import { Text } from '@/primitives'
 

src/frontend/src/features/chat/utils.tsx

@@ -0,0 +1,32 @@
+import { tokenize, createDefaultGrammar } from '@livekit/components-core'
+import { ReactNode } from 'react'
+
+const defaultGrammar = Object.freeze(createDefaultGrammar())
+
+export function formatChatMessageLinks(message: string): ReactNode {
+  const trimmedMessage = message.replace(/^[\r\n]+|[\r\n]+$/g, '')
+  return tokenize(trimmedMessage, defaultGrammar).map((tok, i) => {
+    if (typeof tok === `string`) {
+      return tok
+    } else {
+      const content = tok.content.toString()
+      const href =
+        tok.type === `url`
+          ? /^http(s?):\/\//.test(content)
+            ? content
+            : `https://${content}`
+          : `mailto:${content}`
+      return (
+        <a
+          className="lk-chat-link"
+          key={i}
+          href={href}
+          target="_blank"
+          rel="noreferrer"
+        >
+          {content}
+        </a>
+      )
+    }
+  })
+}

src/frontend/src/features/home/routes/Home.tsx

@@ -15,7 +15,7 @@ import { css } from '@/styled-system/css'
 import { useConfig } from '@/api/useConfig'
 import { LoginButton } from '@/components/LoginButton'
 import { LoadingScreen } from '@/components/LoadingScreen'
-import { reportError } from '@/features/analytics/telemetry'
+import { captureEvent } from '@/features/analytics/telemetry'
 
 const Columns = ({ children }: { children?: ReactNode }) => {
   return (
@@ -161,8 +161,10 @@ const Home = () => {
           window.location.replace(data.external_home_url)
         } catch (error) {
           setRedirectFailed(true)
-          reportError('generic_failure', error, {
-            context: 'Site is not reachable:',
+          captureEvent('external-home-unreachable', {
+            error_name: error instanceof Error ? error.name : 'Unknown',
+            error_message:
+              error instanceof Error ? error.message : String(error),
           })
         }
       }

src/frontend/src/features/notifications/hooks/useSoundNotification.tsx

@@ -6,7 +6,7 @@ import type { NotificationType } from '@/features/notifications/NotificationType
 // fixme - handle dynamic audio output changes
 export const useNotificationSound = () => {
   const notificationsSnap = useSnapshot(notificationsStore)
-  const [play] = useSound('./sounds/notifications.mp3', {
+  const [play] = useSound('/sounds/notifications.mp3', {
     sprite: {
       participantJoined: [0, 1150],
       handRaised: [1400, 180],

src/frontend/src/features/pip/hooks/usePictureInPicture.ts

@@ -61,14 +61,20 @@ export const usePictureInPicture = () => {
       if (!IS_PIP_SUPPORTED) return null
       if (isOpen) return null
 
+      let pipWindow: Window
       try {
-        const pipWindow =
+        pipWindow =
           await // eslint-disable-next-line @typescript-eslint/no-explicit-any
           (window as any).documentPictureInPicture.requestWindow({
             width,
             height,
           })
+      } catch {
+        // Avoid unhandled rejections if the user blocks or closes the request.
+        return null
+      }
 
+      try {
         initializeTitleAndLanguage(pipWindow, t('title'))
         initializePortalContainer(pipWindow)
         syncStyles(pipWindow)
@@ -86,10 +92,10 @@ export const usePictureInPicture = () => {
         })
         documentPictureInPictureStore.window = ref(pipWindow)
       } catch (error) {
-        // Avoid unhandled rejections if the user blocks or closes the request.
         reportError('generic_failure', error, {
-          context: 'Failed to open Picture-in-Picture window',
+          context: 'pip_init_failure',
         })
+        pipWindow.close()
         return null
       }
     },

src/frontend/src/features/reactions/components/toolbar/ReactionButtonsContainer.tsx

@@ -26,8 +26,8 @@ const StyledContainer = styled('div', {
     backgroundColor: 'primaryDark.100',
     maxWidth: '100%',
     opacity: 0,
-    transform: 'translateY(3.25rem)',
-    transition: 'opacity, transform',
+    translate: '0 3.25rem',
+    transition: 'opacity, translate',
     transitionDuration: '0.5s',
     transitionTimingFunction: 'cubic-bezier(0.4, 0, 0.2, 1)',
     pointerEvents: 'none',
@@ -36,7 +36,7 @@ const StyledContainer = styled('div', {
     isVisible: {
       true: {
         opacity: 1,
-        transform: 'translateY(0)',
+        translate: '0 0',
         pointerEvents: 'auto',
       },
     },
@@ -84,7 +84,7 @@ export const ReactionButtonsContainer = ({
     shouldBeCenteredWithToggleButton,
     setShouldBeCenteredWithToggleButton,
   ] = useState(false)
-  const [rightOffset, setRightOffset] = useState(0)
+  const [offsetX, setOffsetX] = useState(0)
 
   const updateArrows = useCallback(() => {
     const el = scrollRef.current
@@ -115,7 +115,7 @@ export const ReactionButtonsContainer = ({
 
   useLayoutEffect(() => {
     if (!shouldBeCenteredWithToggleButton || isMobile) {
-      setRightOffset(0)
+      setOffsetX(0)
       return
     }
 
@@ -133,7 +133,7 @@ export const ReactionButtonsContainer = ({
       const containerCenterX = containerRect.left + containerRect.width / 2
       const shift = toggleCenterX - containerCenterX
       if (Math.abs(shift) < 0.5) return
-      setRightOffset((prev) => prev - shift * 2)
+      setOffsetX((prev) => prev + shift)
     }
 
     const schedule = () => {
@@ -182,7 +182,7 @@ export const ReactionButtonsContainer = ({
       isVisible={isVisible}
       style={
         shouldBeCenteredWithToggleButton && !isMobile && adjustedCentering
-          ? { marginRight: `${rightOffset}px` }
+          ? { transform: `translateX(${offsetX}px)` }
           : { margin: '0 15px' }
       }
     >

src/frontend/src/features/rooms/components/Conference.tsx

@@ -25,26 +25,17 @@ import { VideoConference } from '../livekit/prefabs/VideoConference'
 import { css } from '@/styled-system/css'
 import { BackgroundProcessorFactory } from '../livekit/components/blur'
 import { LocalUserChoices } from '@/stores/userChoices'
-import { MediaDeviceErrorAlert } from './MediaDeviceErrorAlert'
-import {
-  captureEvent,
-  reportError,
-  captureMediaEvent,
-} from '@/features/analytics/telemetry'
+import { captureMediaEvent, reportError } from '@/features/analytics/telemetry'
 import { useConfig } from '@/api/useConfig'
 import { isFireFox } from '@/utils/livekit'
 import { useIsMobile } from '@/utils/useIsMobile'
 import { navigateTo } from '@/navigation/navigateTo'
-import { connectionObserverStore } from '@/stores/connectionObserver'
 import { PictureInPictureConference } from '@/features/pip/components/PictureInPictureConference'
 import { notifyAutoMutedOnJoin } from '@/features/notifications/utils'
 import { useSnapshot } from 'valtio'
 import { userPreferencesStore } from '@/stores/userPreferences'
 import { userStore } from '@/stores/user'
-import {
-  PERMISSION_BY_DEVICE_KIND,
-  notePermissionDeniedFromGum,
-} from '@/stores/permissions'
+import { WatchMediaDeviceErrors } from './WatchMediaDeviceErrors'
 
 export const Conference = ({
   roomId,
@@ -64,7 +55,7 @@ export const Conference = ({
   const { username } = useSnapshot(userStore)
 
   useEffect(() => {
-    captureEvent('visit-room', { slug: roomId })
+    void captureMediaEvent('visit-room', { slug: roomId })
   }, [roomId])
   const fetchKey = [keys.room, roomId]
 
@@ -177,14 +168,6 @@ export const Conference = ({
     prepareConnection()
   }, [room, apiConfig, isConnectionWarmedUp])
 
-  const [mediaDeviceError, setMediaDeviceError] = useState<{
-    error: MediaDeviceFailure | null
-    kind: MediaDeviceKind | null
-  }>({
-    error: null,
-    kind: null,
-  })
-
   const isMobile = useIsMobile()
 
   const hasAutoMutedRef = useRef(false)
@@ -242,9 +225,10 @@ export const Conference = ({
             backgroundColor: 'primaryDark.50 !important',
           })}
           onError={(e) => {
+            const failure = MediaDeviceFailure.getFailure(e)
+            if (failure && failure !== MediaDeviceFailure.Other) return
             reportError('livekit_room_error', e, {
               path: 'connect_publish',
-              failure: MediaDeviceFailure.getFailure(e) ?? 'not-a-device-error',
             })
           }}
           onConnected={async () => {
@@ -263,23 +247,8 @@ export const Conference = ({
           onDisconnected={(e) => {
             const metadata = {
               room_id: roomId,
-              pc_publisher: connectionObserverStore.publisher && {
-                ...connectionObserverStore.publisher,
-              },
-              pc_subscriber: connectionObserverStore.subscriber && {
-                ...connectionObserverStore.subscriber,
-              },
-              pc_publisher_changes_count:
-                connectionObserverStore.publisherChangesCount,
-              pc_subscriber_changes_count:
-                connectionObserverStore.subscriberChangesCount,
             }
 
-            connectionObserverStore.publisher = null
-            connectionObserverStore.publisherChangesCount = 0
-            connectionObserverStore.subscriber = null
-            connectionObserverStore.subscriberChangesCount = 0
-
             switch (e) {
               case DisconnectReason.CLIENT_INITIATED:
                 navigateTo(
@@ -305,32 +274,10 @@ export const Conference = ({
                 return
             }
           }}
-          onMediaDeviceFailure={(e, kind) => {
-            if (!e || !kind) return
-            void captureMediaEvent('media-device-error', {
-              log_code: 'media_devices_error_event',
-              path: 'connect_publish',
-              failure: e,
-              kind,
-            })
-            switch (e) {
-              case MediaDeviceFailure.DeviceInUse:
-                setMediaDeviceError({ error: e, kind })
-                break
-              case MediaDeviceFailure.PermissionDenied:
-                notePermissionDeniedFromGum(PERMISSION_BY_DEVICE_KIND[kind])
-                break
-              default:
-                break
-            }
-          }}
         >
+          <WatchMediaDeviceErrors />
           <VideoConference />
           {!isMobile && <InviteDialog mode={mode} />}
-          <MediaDeviceErrorAlert
-            {...mediaDeviceError}
-            onClose={() => setMediaDeviceError({ error: null, kind: null })}
-          />
           <PictureInPictureConference />
         </LiveKitRoom>
       </Screen>

src/frontend/src/features/rooms/components/Join.tsx

@@ -28,7 +28,9 @@ import {
   userChoicesStore,
 } from '@/stores/userChoices'
 import { useCannotUseDevice } from '../livekit/hooks/useCannotUseDevice'
+import { useDeviceMissing } from '../livekit/hooks/useDeviceMissing'
 import { useJoinTracks } from '../livekit/hooks/useJoinTracks'
+import { SilentMicDetector } from './SilentMicDetector'
 
 const styles = {
   page: css({
@@ -51,16 +53,16 @@ const styles = {
     lg: { height: '540px', flexGrow: 1 },
   }),
   previewStack: css({
-    display: 'inline-flex',
+    display: 'flex',
     flexDirection: 'column',
     flexGrow: 1,
     minWidth: 0,
-    flexShrink: { base: 0, sm: 1 },
+    width: '100%',
   }),
   previewFrame: css({
     borderRadius: '1rem',
-    flex: '0 1',
-    minWidth: '320px',
+    minWidth: { base: 0, sm: '320px' },
+    maxWidth: '100%',
     margin: { base: '0.5rem', sm: '1rem', lg: '1rem 0.5rem 1rem 1rem' },
     overflow: 'hidden',
     position: 'relative',
@@ -89,7 +91,6 @@ const styles = {
   previewAspect: css({
     position: 'relative',
     width: '100%',
-    height: 'fit-content',
     aspectRatio: '16 / 9',
   }),
   previewSurface: css({
@@ -192,18 +193,21 @@ const toggleTrack =
   (enabled: boolean, save: (v: boolean) => void, track?: PreviewTrack) =>
   async () => {
     save(!enabled)
-    if (enabled) {
-      await track?.mute()
-    } else {
-      await track?.unmute()
+    try {
+      await (enabled ? track?.mute() : track?.unmute())
+    } catch (err) {
+      save(enabled)
+      reportError('join_preview_failure', err as Error, {
+        path: 'join_preview',
+      })
     }
   }
 
 const switchTrackDevice =
   (save: (id: string) => void, track?: PreviewTrack) => async (id: string) => {
     try {
-      save(id)
       await track?.setDeviceId({ exact: id })
+      save(id)
     } catch (err) {
       reportError('join_preview_failure', err as Error, {
         path: 'join_preview',
@@ -212,16 +216,21 @@ const switchTrackDevice =
   }
 
 function getPreviewMessages({
+  cameraFound,
   cameraDenied,
   micDenied,
   videoEnabled,
   videoStarted,
 }: {
+  cameraFound: boolean
   cameraDenied: boolean
   micDenied: boolean
   videoEnabled: boolean
   videoStarted: boolean
 }): { hint: string | null; permissionsButtonLabel: string | null } {
+  if (!cameraFound) {
+    return { hint: 'cameraNotFound', permissionsButtonLabel: null }
+  }
   if (cameraDenied) {
     const key = micDenied ? 'cameraAndMicNotGranted' : 'cameraNotGranted'
     return { hint: key, permissionsButtonLabel: key }
@@ -257,7 +266,7 @@ function useAttachedVideo(
     element.addEventListener('loadedmetadata', handleLoaded)
 
     return () => {
-      videoTrack.detach()
+      videoTrack.detach(element)
       element.removeEventListener('loadedmetadata', handleLoaded)
       element.style.opacity = '0'
       setVideoStarted(false)
@@ -318,16 +327,20 @@ const VideoPreview = ({
 
   const cameraDenied = useCannotUseDevice('videoinput')
   const micDenied = useCannotUseDevice('audioinput')
+  const cameraMissing = useDeviceMissing('videoinput')
 
   const { videoEl, videoStarted } = useAttachedVideo(videoTrack, videoEnabled)
 
   const { hint, permissionsButtonLabel } = getPreviewMessages({
+    cameraFound: !cameraMissing,
     cameraDenied,
     micDenied,
     videoEnabled,
     videoStarted,
   })
 
+  const isError = cameraMissing || cameraDenied
+
   return (
     <div className={styles.previewFrame}>
       <div className={styles.gradientTop} />
@@ -356,8 +369,13 @@ const VideoPreview = ({
               />
             </div>
           </div>
-          <div role="alert" className={styles.hintOverlay}>
-            <p className={styles.hintText}>{hint && t(hint)}</p>
+          <div className={styles.hintOverlay}>
+            <p role="alert" className={styles.hintText}>
+              {isError && hint ? t(hint) : null}
+            </p>
+            <p role="status" className={styles.hintText}>
+              {!isError && hint ? t(hint) : null}
+            </p>
             {permissionsButtonLabel && (
               <Button
                 size="sm"
@@ -450,6 +468,7 @@ export const Join = ({
 
   return (
     <Screen footer={false}>
+      <SilentMicDetector track={audioTrack} context="join" />
       <div className={styles.page}>
         <div className={styles.previewColumn}>
           <div className={styles.previewStack}>

src/frontend/src/features/rooms/components/Lobby.tsx

@@ -149,6 +149,7 @@ export const Lobby = ({
                 type="text"
                 onChange={saveUsername}
                 label={t('usernameLabel')}
+                aria-label={t('usernameLabel')}
                 id="input-name"
                 defaultValue={username || user?.full_name}
                 validate={(value) => !value && t('errors.usernameEmpty')}

src/frontend/src/features/rooms/components/Permissions.tsx

@@ -1,13 +1,114 @@
 import { useWatchPermissions } from '@/features/rooms/hooks/useWatchPermissions'
 import { css } from '@/styled-system/css'
-import { Dialog, H } from '@/primitives'
+import { Button, Dialog, H, P } from '@/primitives'
 import { RiEqualizer2Line } from '@remixicon/react'
 import { useEffect, useMemo } from 'react'
 import { useSnapshot } from 'valtio'
-import { closePermissionsDialog, permissionsStore } from '@/stores/permissions'
+import {
+  closePermissionsDialog,
+  closeSystemPermissionsDialog,
+  permissionsStore,
+} from '@/stores/permissions'
 import { useTranslation } from 'react-i18next'
 import { injectIconIntoTranslation } from '@/utils/translation'
 import { isSafari } from '@/utils/livekit'
+import { type OS, getOS } from '@/utils/os'
+
+type StepsOs = 'macos' | 'windows' | 'android' | 'other'
+
+const STEPS_OS: Record<OS, StepsOs> = {
+  macos: 'macos',
+  windows: 'windows',
+  android: 'android',
+  linux: 'other',
+  other: 'other',
+}
+
+const getSystemSettingsUrl = (os: OS, label: string): string | null => {
+  if (os === 'macos') {
+    if (label === 'camera')
+      return 'x-apple.systempreferences:com.apple.preference.security?Privacy_Camera'
+    if (label === 'microphone')
+      return 'x-apple.systempreferences:com.apple.preference.security?Privacy_Microphone'
+    return 'x-apple.systempreferences:com.apple.preference.security?Privacy'
+  }
+  if (os === 'windows') {
+    if (label === 'camera') return 'ms-settings:privacy-webcam'
+    if (label === 'microphone') return 'ms-settings:privacy-microphone'
+    return 'ms-settings:privacy'
+  }
+  return null
+}
+
+const SystemPermissions = () => {
+  const { t } = useTranslation('rooms', { keyPrefix: 'systemPermissionDialog' })
+  const permissions = useSnapshot(permissionsStore)
+  const os = useMemo(() => getOS() || 'other', [])
+
+  const label = useMemo(() => {
+    if (permissions.microphoneSystemDenied && permissions.cameraSystemDenied) {
+      return 'cameraAndMicrophone'
+    }
+    if (permissions.cameraSystemDenied) return 'camera'
+    return 'microphone'
+  }, [permissions])
+
+  const isOpen = permissions.isSystemPermissionDialogOpen
+
+  // Auto-close once access works again (the user fixed the OS settings).
+  useEffect(() => {
+    if (
+      isOpen &&
+      !permissions.microphoneSystemDenied &&
+      !permissions.cameraSystemDenied
+    ) {
+      closeSystemPermissionsDialog()
+    }
+  }, [isOpen, permissions])
+
+  const device = t(`device.${label}`)
+  const settingsUrl = getSystemSettingsUrl(os, label)
+
+  return (
+    <Dialog
+      isOpen={isOpen}
+      role="dialog"
+      type="flex"
+      title=""
+      aria-label={t(`heading.${label}`)}
+      onClose={closeSystemPermissionsDialog}
+    >
+      <div
+        className={css({
+          maxWidth: '500px',
+        })}
+      >
+        <H lvl={1}>{t(`heading.${label}`)}</H>
+        <P>{t('intro', { device })}</P>
+        <ol className={css({ listStyle: 'decimal', paddingLeft: '24px' })}>
+          {Array.from({ length: 2 }, (_, index) => (
+            <li key={index}>
+              {t(`steps.${STEPS_OS[os] || 'other'}.${index + 1}`, { device })}
+            </li>
+          ))}
+        </ol>
+        {settingsUrl && (
+          <div className={css({ marginTop: '2rem' })}>
+            <Button
+              variant="primary"
+              size="sm"
+              onPress={() => {
+                window.open(settingsUrl, '_blank')
+              }}
+            >
+              {t('openSettings')}
+            </Button>
+          </div>
+        )}
+      </div>
+    </Dialog>
+  )
+}
 
 /**
  * Singleton component - ensures permissions sync runs only once across the app.
@@ -65,68 +166,74 @@ export const Permissions = () => {
   const appTitle = `${import.meta.env.VITE_APP_TITLE}`
 
   return (
-    <Dialog
-      isOpen={permissions.isPermissionDialogOpen}
-      role="dialog"
-      type="flex"
-      title=""
-      aria-label={t(`heading.${permissionLabel}`, {
-        appTitle,
-      })}
-      onClose={closePermissionsDialog}
-    >
-      <div
-        className={css({
-          display: 'flex',
-          justifyContent: 'center',
-          alignItems: 'center',
-          flexDirection: 'column',
-          md: {
-            flexDirection: 'row',
-          },
+    <>
+      <SystemPermissions />
+      <Dialog
+        isOpen={permissions.isPermissionDialogOpen}
+        role="dialog"
+        type="flex"
+        title=""
+        aria-label={t(`heading.${permissionLabel}`, {
+          appTitle,
         })}
+        onClose={closePermissionsDialog}
       >
-        <img
-          src="/assets/camera_mic_permission.svg"
-          alt=""
-          className={css({
-            width: '100%',
-            minHeight: '290px',
-            maxWidth: '290px',
-          })}
-        />
         <div
           className={css({
-            maxWidth: '400px',
+            display: 'flex',
+            justifyContent: 'center',
+            alignItems: 'center',
+            flexDirection: 'column',
+            md: {
+              flexDirection: 'row',
+            },
           })}
         >
-          <H lvl={2}>
-            {t(`heading.${permissionLabel}`, {
-              appTitle,
+          <img
+            src="/assets/camera_mic_permission.svg"
+            alt=""
+            className={css({
+              width: '100%',
+              minHeight: '290px',
+              maxWidth: '290px',
             })}
-          </H>
-          <ol className={css({ listStyle: 'decimal', paddingLeft: '24px' })}>
-            <li>
-              {isSafari() ? (
-                t('body.openMenu.safari', {
-                  appDomain: window.origin.replace('https://', ''),
-                })
-              ) : (
-                <>
-                  {descriptionBeforeIcon}
-                  <span
-                    style={{ display: 'inline-block', verticalAlign: 'middle' }}
-                  >
-                    <RiEqualizer2Line />
-                  </span>
-                  {descriptionAfterIcon}
-                </>
-              )}
-            </li>
-            <li>{t(`body.details.${permissionLabel}`)}</li>
-          </ol>
+          />
+          <div
+            className={css({
+              maxWidth: '400px',
+            })}
+          >
+            <H lvl={2}>
+              {t(`heading.${permissionLabel}`, {
+                appTitle,
+              })}
+            </H>
+            <ol className={css({ listStyle: 'decimal', paddingLeft: '24px' })}>
+              <li>
+                {isSafari() ? (
+                  t('body.openMenu.safari', {
+                    appDomain: window.origin.replace('https://', ''),
+                  })
+                ) : (
+                  <>
+                    {descriptionBeforeIcon}
+                    <span
+                      style={{
+                        display: 'inline-block',
+                        verticalAlign: 'middle',
+                      }}
+                    >
+                      <RiEqualizer2Line />
+                    </span>
+                    {descriptionAfterIcon}
+                  </>
+                )}
+              </li>
+              <li>{t(`body.details.${permissionLabel}`)}</li>
+            </ol>
+          </div>
         </div>
-      </div>
-    </Dialog>
+      </Dialog>
+    </>
   )
 }

src/frontend/src/features/rooms/components/Rating.tsx

@@ -5,7 +5,6 @@ import { useTranslation } from 'react-i18next'
 import { styled, VStack } from '@/styled-system/jsx'
 import { Button as RACButton } from 'react-aria-components'
 import { useIsAnalyticsEnabled } from '@/features/analytics/hooks/useIsAnalyticsEnabled'
-import type { CandidateInfo } from '@/stores/connectionObserver'
 import { captureEvent } from '@/features/analytics/telemetry'
 
 const Card = styled('div', {
@@ -240,10 +239,6 @@ const ConfirmationMessage = ({ onNext }: { onNext: () => void }) => {
 
 type RatingMetadata = {
   room_id?: string
-  pc_publisher?: CandidateInfo
-  pc_subscriber?: CandidateInfo
-  pc_publisher_changes_count?: number
-  pc_subscriber_changes_count?: number
 }
 
 export const Rating = ({

src/frontend/src/features/rooms/components/SilentMicDetector.tsx

@@ -0,0 +1,123 @@
+import { useEffect, useRef } from 'react'
+import { useSnapshot } from 'valtio'
+import { createAudioAnalyser, LocalAudioTrack } from 'livekit-client'
+import { useLocalParticipant } from '@livekit/components-react'
+import { reportMicSample, silentMicStore } from '@/stores/silentMic'
+import { captureMediaEvent } from '@/features/analytics/telemetry'
+import { useIsTrackMuted } from '../livekit/hooks/useIsTrackMuted'
+
+// A live microphone always has a noise floor; only a signal pinned to
+// zero counts as silent (no audio data flowing at all).
+const SILENT_VOLUME_EPSILON = 0.0001
+const TICK_MS = 1_000
+
+type SilentMicContext = 'join' | 'room'
+
+const ActiveDetector = ({
+  track,
+  context,
+}: {
+  track: LocalAudioTrack
+  context: SilentMicContext
+}) => {
+  const isMuted = useIsTrackMuted(track)
+
+  // The interval reads through refs so state updates never re-arm the
+  // timer or the analyser.
+  const mutedRef = useRef(isMuted)
+  mutedRef.current = isMuted
+  const contextRef = useRef(context)
+  contextRef.current = context
+
+  useEffect(() => {
+    let audioAnalyser: ReturnType<typeof createAudioAnalyser>
+    try {
+      audioAnalyser = createAudioAnalyser(track, {
+        fftSize: 256,
+        smoothingTimeConstant: 0.7,
+      })
+    } catch {
+      void captureMediaEvent('silent-mic-analyser-unavailable', {
+        context: contextRef.current,
+      })
+      return
+    }
+    const { analyser, calculateVolume, cleanup } = audioAnalyser
+
+    const tick = () => {
+      // Zero volume is only evidence of silence when audio data is
+      // actually flowing. Skip the sample when:
+      //  - the mic is intentionally muted;
+      //  - the tab is backgrounded (suspended AudioContext reads as zero);
+      //  - the AudioContext is not running yet — Chrome keeps it
+      //    'suspended' until a user gesture on pages loaded without
+      //    activation, and a suspended analyser reports zeros for a
+      //    perfectly healthy microphone.
+      if (
+        mutedRef.current ||
+        document.visibilityState !== 'visible' ||
+        analyser.context.state !== 'running'
+      ) {
+        return
+      }
+      const result = reportMicSample({
+        trackId: track.mediaStreamTrack?.id,
+        silent: calculateVolume() <= SILENT_VOLUME_EPSILON,
+        deltaMs: TICK_MS,
+      })
+      if (result === 'silent-detected') {
+        void captureMediaEvent('silent-mic-detected', {
+          context: contextRef.current,
+          media_stream_track_muted: track.mediaStreamTrack?.muted ?? null,
+        })
+      } else if (result === 'recovered') {
+        void captureMediaEvent('silent-mic-recovered', {
+          context: contextRef.current,
+        })
+      }
+    }
+
+    const interval = window.setInterval(tick, TICK_MS)
+    return () => {
+      window.clearInterval(interval)
+      void cleanup()
+    }
+  }, [track])
+
+  return null
+}
+
+/**
+ * One-shot silent-mic check (see stores/silentMic.ts). Renders nothing;
+ * mounts the volume watcher only while the check is still undecided so
+ * the analyser goes away as soon as the outcome is known.
+ */
+export const SilentMicDetector = ({
+  track,
+  context,
+}: {
+  track?: LocalAudioTrack
+  context: SilentMicContext
+}) => {
+  const { status } = useSnapshot(silentMicStore)
+  if ((status !== 'watching' && status !== 'silent') || !track) {
+    return null
+  }
+  return (
+    <ActiveDetector
+      key={track.mediaStreamTrack?.id}
+      track={track}
+      context={context}
+    />
+  )
+}
+
+/** Room-side variant: watches the published local microphone track. */
+export const RoomSilentMicDetector = () => {
+  const { microphoneTrack } = useLocalParticipant()
+  const track =
+    microphoneTrack?.track instanceof LocalAudioTrack
+      ? microphoneTrack.track
+      : undefined
+  return <SilentMicDetector track={track} context="room" />
+}

src/frontend/src/features/rooms/components/SilentMicDialog.tsx

@@ -0,0 +1,64 @@
+import { useTranslation } from 'react-i18next'
+import { useSnapshot } from 'valtio'
+import { css } from '@/styled-system/css'
+import { Button, Dialog, H, P } from '@/primitives'
+import {
+  closeSilentMicDialog,
+  discardSilentMicDetection,
+  silentMicStore,
+} from '@/stores/silentMic'
+
+/**
+ * Opened from the "!" badge on the microphone toggle when the silent-mic
+ * check tripped (see stores/silentMic.ts). Explains the likely causes
+ * and lets the user opt out of the detection for good.
+ */
+export const SilentMicDialog = () => {
+  const { t } = useTranslation('rooms', { keyPrefix: 'silentMic.dialog' })
+  const { isDialogOpen } = useSnapshot(silentMicStore)
+
+  return (
+    <Dialog
+      isOpen={isDialogOpen}
+      role="dialog"
+      type="flex"
+      title=""
+      aria-label={t('title')}
+      onClose={closeSilentMicDialog}
+    >
+      <div
+        className={css({
+          maxWidth: '500px',
+        })}
+      >
+        <H lvl={1}>{t('title')}</H>
+        <P>{t('intro')}</P>
+        <ul className={css({ listStyle: 'disc', paddingLeft: '24px' })}>
+          <li>{t('causes.system')}</li>
+          <li>{t('causes.hardware')}</li>
+          <li>{t('causes.wrongDevice')}</li>
+        </ul>
+        <P>{t('hint')}</P>
+        <div
+          className={css({
+            marginTop: '1.5rem',
+            display: 'flex',
+            gap: '1rem',
+            flexWrap: 'wrap',
+          })}
+        >
+          <Button variant="primary" size="sm" onPress={closeSilentMicDialog}>
+            {t('close')}
+          </Button>
+          <Button
+            variant="tertiary"
+            size="sm"
+            onPress={discardSilentMicDetection}
+          >
+            {t('discard')}
+          </Button>
+        </div>
+      </div>
+    </Dialog>
+  )
+}

src/frontend/src/features/rooms/components/WatchMediaDeviceErrors.tsx

@@ -0,0 +1,11 @@
+import { MediaDeviceErrorAlert } from './MediaDeviceErrorAlert'
+import { useWatchMediaDeviceErrors } from '../livekit/hooks/useWatchMediaDeviceErrors'
+
+/**
+ * Single place responsible for the room's media device errors — mounts the
+ * watcher and renders the resulting user-facing alert.
+ */
+export const WatchMediaDeviceErrors = () => {
+  const { error, kind, clear } = useWatchMediaDeviceErrors()
+  return <MediaDeviceErrorAlert error={error} kind={kind} onClose={clear} />
+}

src/frontend/src/features/rooms/hooks/useWatchDeviceAvailability.ts

@@ -0,0 +1,19 @@
+import { useEffect } from 'react'
+import { syncDeviceAvailability } from '@/stores/deviceAvailability'
+
+export function useWatchDeviceAvailability() {
+  useEffect(() => {
+    if (!navigator.mediaDevices) return
+    syncDeviceAvailability()
+    navigator.mediaDevices.addEventListener(
+      'devicechange',
+      syncDeviceAvailability
+    )
+    return () => {
+      navigator.mediaDevices.removeEventListener(
+        'devicechange',
+        syncDeviceAvailability
+      )
+    }
+  }, [])
+}

src/frontend/src/features/rooms/livekit/components/ConnectionObserver.tsx

@@ -9,28 +9,16 @@ import { useSnapshot } from 'valtio'
 import { DisconnectReason, RoomEvent } from 'livekit-client'
 
 import { userPreferencesStore } from '@/stores/userPreferences'
+
+import { captureEvent, captureMediaEvent } from '@/features/analytics/telemetry'
 import { connectionObserverStore } from '@/stores/connectionObserver'
 
-import { useFeatureFlagEnabled } from 'posthog-js/react'
-import { isMobileBrowser } from '@livekit/components-core'
-import { FeatureFlags } from '@/features/analytics/enums'
-import { captureEvent } from '@/features/analytics/telemetry'
-
-const CANDIDATE_POLL_INTERVAL_MS = 5000
-
 export const ConnectionObserver = () => {
   const room = useRoomContext()
   const connectionStartTimeRef = useRef<number | null>(null)
 
   const { data } = useConfig()
   const isAnalyticsEnabled = useIsAnalyticsEnabled()
-
-  const featureEnabled = useFeatureFlagEnabled(FeatureFlags.candidatePolling)
-  const isMobile = isMobileBrowser()
-
-  const isAdvancedConnectionObserverEnabled =
-    !isMobile && isAnalyticsEnabled && featureEnabled
-
   const userPreferencesSnap = useSnapshot(userPreferencesStore)
 
   const idleDisconnectModalTimeoutRef = useRef<ReturnType<
@@ -80,100 +68,6 @@ export const ConnectionObserver = () => {
     userPreferencesSnap.is_idle_disconnect_modal_enabled,
   ])
 
-  useEffect(() => {
-    if (!isAdvancedConnectionObserverEnabled) return
-    if (!room) return
-
-    let interval: ReturnType<typeof setInterval> | null = null
-
-    const pollCandidate = async (
-      label: 'publisher' | 'subscriber',
-      // eslint-disable-next-line @typescript-eslint/no-explicit-any
-      pc?: any
-    ) => {
-      if (!pc) return
-
-      let stats: RTCStatsReport
-      try {
-        stats = await pc.getStats()
-      } catch {
-        return
-      }
-
-      // eslint-disable-next-line @typescript-eslint/no-explicit-any
-      stats.forEach((report: any) => {
-        if (
-          report.type === 'candidate-pair' &&
-          report.state === 'succeeded' &&
-          report.nominated
-        ) {
-          const remoteCandidate = stats.get(report.remoteCandidateId)
-          if (!remoteCandidate) return
-
-          const next = {
-            type: remoteCandidate.candidateType,
-            address: remoteCandidate.address,
-            protocol: remoteCandidate.protocol,
-          }
-
-          const current = connectionObserverStore[label]
-
-          const hasChanged =
-            current?.type !== next.type ||
-            current?.address !== next.address ||
-            current?.protocol !== next.protocol
-
-          if (hasChanged) {
-            connectionObserverStore[label] = next
-            const key = `${label}ChangesCount` as const
-            connectionObserverStore[key] =
-              (connectionObserverStore[key] || 0) + 1
-          }
-        }
-      })
-    }
-
-    const poll = async () => {
-      const publisher = room.engine?.pcManager?.publisher
-      const subscriber = room.engine?.pcManager?.subscriber
-
-      await Promise.all([
-        pollCandidate('publisher', publisher),
-        pollCandidate('subscriber', subscriber),
-      ])
-    }
-
-    const startPolling = async () => {
-      if (interval) return // prevent duplicates
-
-      // Initial snapshot
-      await poll()
-
-      interval = setInterval(poll, CANDIDATE_POLL_INTERVAL_MS)
-    }
-
-    const stopPolling = () => {
-      if (!interval) return
-      clearInterval(interval)
-      interval = null
-    }
-
-    room.on(RoomEvent.Connected, startPolling)
-    room.on(RoomEvent.Reconnected, startPolling)
-
-    room.on(RoomEvent.Reconnecting, stopPolling)
-    room.on(RoomEvent.Disconnected, stopPolling)
-
-    return () => {
-      stopPolling()
-
-      room.off(RoomEvent.Connected, startPolling)
-      room.off(RoomEvent.Reconnected, startPolling)
-      room.off(RoomEvent.Reconnecting, stopPolling)
-      room.off(RoomEvent.Disconnected, stopPolling)
-    }
-  }, [room, isAdvancedConnectionObserverEnabled])
-
   useEffect(() => {
     if (!isAnalyticsEnabled) return
 
@@ -182,7 +76,7 @@ export const ConnectionObserver = () => {
       // total session duration from first connect to final disconnect.
       if (connectionStartTimeRef.current != null) return
       connectionStartTimeRef.current = Date.now()
-      captureEvent('connection-event')
+      void captureMediaEvent('connection-event', {})
     }
 
     const handleReconnect = () => {

src/frontend/src/features/rooms/livekit/components/ScreenShareErrorModal.tsx

@@ -1,6 +1,13 @@
 import { A, Button, Dialog, P } from '@/primitives'
 import { useTranslation } from 'react-i18next'
 import { css } from '@/styled-system/css'
+import { getOS, type OS } from '@/utils/os'
+
+const SCREEN_CAPTURE_SETTINGS_LINKS: Partial<Record<OS, string>> = {
+  macos:
+    'x-apple.systempreferences:com.apple.preference.security?Privacy_ScreenCapture',
+  windows: 'ms-settings:privacy-graphicscaptureprogrammatic',
+}
 
 // todo - refactor it into a generic system
 export const ScreenShareErrorModal = ({
@@ -11,7 +18,8 @@ export const ScreenShareErrorModal = ({
   onClose: () => void
 }) => {
   const { t } = useTranslation('rooms', { keyPrefix: 'error.screenShare' })
-  const isMac = navigator.userAgent.toLowerCase().indexOf('mac') !== -1
+  const os = getOS()
+  const settingsHref = SCREEN_CAPTURE_SETTINGS_LINKS[os]
 
   return (
     <Dialog
@@ -26,15 +34,16 @@ export const ScreenShareErrorModal = ({
           <>
             <P>
               {t('message')}{' '}
-              {isMac && (
+              {settingsHref && (
                 <>
-                  {t('macInstructions')}{' '}
+                  {t('settingsInstructions')}{' '}
                   <A
-                    href="x-apple.systempreferences:com.apple.preference.security?Privacy_ScreenCapture"
+                    href={settingsHref}
+                    target="_blank"
                     color="primary"
-                    aria-label={t('macSystemPreferences') + '-' + t('newTab')}
+                    aria-label={t(`settingsLabel.${os}`) + '-' + t('newTab')}
                   >
-                    {t('macSystemPreferences')}
+                    {t(`settingsLabel.${os}`)}
                   </A>
                   .{' '}
                 </>

src/frontend/src/features/rooms/livekit/components/controls/Device/AudioLevelGauge.tsx

@@ -1,29 +1,29 @@
-import { useEffect, useState } from 'react'
-import { LocalAudioTrack, TrackEvent } from 'livekit-client'
+import { LocalAudioTrack } from 'livekit-client'
 import { useTrackVolume } from '@livekit/components-react'
 import { useTranslation } from 'react-i18next'
 import { RiMicLine, RiMicOffLine } from '@remixicon/react'
 import { styled } from '@/styled-system/jsx'
 import { Text } from '@/primitives'
+import { useIsTrackMuted } from '../../../hooks/useIsTrackMuted'
 
 const StyledContainer = styled('div', {
   base: {
     display: 'flex',
     alignItems: 'center',
     gap: '0.75rem',
-    padding: '0.625rem 0.75rem',
-    marginTop: '0.25rem',
+    padding: '0.75rem 0.25rem',
+    marginTop: '0.5rem',
     borderTop: '1px solid',
     minHeight: '2.5rem',
   },
   variants: {
     theme: {
       light: {
-        borderColor: 'greyscale.250',
+        borderColor: 'gray.200',
         color: 'greyscale.600',
       },
       dark: {
-        borderColor: 'rgba(255 255 255 / 0.2)',
+        borderColor: 'primaryDark.300',
         color: 'rgba(255 255 255 / 0.7)',
       },
     },
@@ -77,28 +77,6 @@ type AudioLevelGaugeProps = {
   variant?: Theme
 }
 
-const useIsTrackMuted = (track?: LocalAudioTrack) => {
-  const [isMuted, setIsMuted] = useState(() => track?.isMuted ?? true)
-
-  useEffect(() => {
-    if (!track) {
-      setIsMuted(true)
-      return
-    }
-    setIsMuted(track.isMuted)
-    const onMuted = () => setIsMuted(true)
-    const onUnmuted = () => setIsMuted(false)
-    track.on(TrackEvent.Muted, onMuted)
-    track.on(TrackEvent.Unmuted, onUnmuted)
-    return () => {
-      track.off(TrackEvent.Muted, onMuted)
-      track.off(TrackEvent.Unmuted, onUnmuted)
-    }
-  }, [track])
-
-  return isMuted
-}
-
 const LevelBar = ({
   track,
   theme,
@@ -140,7 +118,7 @@ export const AudioLevelGauge = ({
       {showMutedHint ? (
         <>
           <RiMicOffLine size={18} aria-hidden="true" />
-          <Text variant="sm">{t('audioinput.muteTest')}</Text>
+          <Text variant="bodyXsMedium">{t('audioinput.muteTest')}</Text>
         </>
       ) : (
         <LevelBar

src/frontend/src/features/rooms/livekit/components/controls/Device/OutputSoundTester.tsx

@@ -1,9 +1,8 @@
-import { useEffect, useRef, useState } from 'react'
+import { useCallback, useEffect, useRef, useState } from 'react'
 import { useTranslation } from 'react-i18next'
 import { RiVolumeUpLine } from '@remixicon/react'
 import { styled } from '@/styled-system/jsx'
 import { Button } from '@/primitives'
-import { reportError } from '@/features/analytics/telemetry'
 import { canTestAudioOutput } from '@/features/rooms/utils/canTestAudioOutput'
 
 // Speaker test in the audiooutput menu footer (Meet-style UX). Outputs have
@@ -23,6 +22,7 @@ const StyledContainer = styled('div', {
     alignItems: 'center',
     gap: '0.5rem',
     paddingTop: '0.5rem',
+    marginTop: '0.5rem',
     borderTop: '1px solid',
   },
   variants: {
@@ -37,6 +37,21 @@ const StyledContainer = styled('div', {
   },
 })
 
+const StyledButtonContent = styled('span', {
+  base: {
+    position: 'relative',
+    display: 'flex',
+    alignItems: 'center',
+    justifyContent: 'center',
+    width: 'full',
+    paddingX: '1.625rem',
+    '& > svg': {
+      position: 'absolute',
+      left: 0,
+    },
+  },
+})
+
 type OutputSoundTesterProps = {
   /** The device the test should play through (the select's current key). */
   sinkId?: string
@@ -51,15 +66,33 @@ export const OutputSoundTester = ({
   const audioRef = useRef<HTMLAudioElement>(null)
   const [isPlaying, setIsPlaying] = useState(false)
 
+  const latestSinkIdRef = useRef(sinkId)
+  latestSinkIdRef.current = sinkId
+
+  const stopPlayback = useCallback(() => {
+    const audio = audioRef.current
+    if (audio) {
+      audio.pause()
+      audio.currentTime = 0
+    }
+    setIsPlaying(false)
+  }, [])
+
   useEffect(() => {
     if (!sinkId || !canTestAudioOutput()) return
-    audioRef.current?.setSinkId(sinkId).catch((error) => {
-      reportError('device_switch_failure', error, {
-        kind: 'audiooutput',
-        context: 'test sound setSinkId',
-      })
+    audioRef.current?.setSinkId(sinkId).catch(() => {
+      // Re-routing failed (stale or unplugged device): stop the test rather
+      // than keep playing through the previous sink.
+      if (latestSinkIdRef.current === sinkId) {
+        stopPlayback()
+      }
     })
-  }, [sinkId])
+  }, [sinkId, stopPlayback])
+
+  useEffect(() => {
+    const audio = audioRef.current
+    return () => audio?.pause()
+  }, [])
 
   return (
     <StyledContainer theme={variant}>
@@ -68,20 +101,32 @@ export const OutputSoundTester = ({
         size="sm"
         fullWidth
         isDisabled={isPlaying}
-        onPress={() => {
-          audioRef.current
-            ?.play()
-            .then(() => setIsPlaying(true))
-            .catch(() => {})
+        onPress={async () => {
+          const audio = audioRef.current
+          if (!audio) return
+          try {
+            // Confirm routing before starting: a no-op when already routed,
+            // but rejects on a stale device id, so the test never plays
+            // through the wrong sink.
+            if (sinkId && canTestAudioOutput()) {
+              await audio.setSinkId(sinkId)
+            }
+            await audio.play()
+            setIsPlaying(true)
+          } catch {
+            stopPlayback()
+          }
         }}
       >
-        <RiVolumeUpLine size={18} aria-hidden />
-        {isPlaying ? t('audiooutput.testing') : t('audiooutput.test')}
+        <StyledButtonContent>
+          <RiVolumeUpLine size={18} aria-hidden />
+          {isPlaying ? t('audiooutput.testing') : t('audiooutput.test')}
+        </StyledButtonContent>
       </Button>
       {/* eslint-disable-next-line jsx-a11y/media-has-caption */}
       <audio
         ref={audioRef}
-        src="sounds/uprise.mp3"
+        src="/sounds/uprise.mp3"
         onEnded={() => setIsPlaying(false)}
       />
     </StyledContainer>

src/frontend/src/features/rooms/livekit/components/controls/Device/PermissionNeededButton.tsx

@@ -4,8 +4,17 @@ import { openPermissionsDialog } from '@/stores/permissions'
 import { css } from '@/styled-system/css'
 import { useTranslation } from 'react-i18next'
 
-export const PermissionNeededButton = () => {
+type PermissionNeededButtonProps = {
+  tooltip?: string
+  onPress?: () => void
+}
+
+export const PermissionNeededButton = ({
+  tooltip,
+  onPress,
+}: PermissionNeededButtonProps) => {
   const { t } = useTranslation('rooms', { keyPrefix: 'permissionsButton' })
+  const label = tooltip ?? t('tooltip')
   return (
     <div
       className={css({
@@ -17,9 +26,9 @@ export const PermissionNeededButton = () => {
       })}
     >
       <Button
-        aria-label={t('ariaLabel')}
-        tooltip={t('tooltip')}
-        onPress={() => openPermissionsDialog()}
+        aria-label={tooltip ? label : t('ariaLabel')}
+        tooltip={label}
+        onPress={onPress ?? (() => openPermissionsDialog())}
         variant="permission"
       >
         <div

src/frontend/src/features/rooms/livekit/components/controls/Device/SelectDevice.tsx

@@ -4,6 +4,7 @@ import { useEffect, useMemo } from 'react'
 import { Select, SelectProps } from '@/primitives/Select'
 import type { Placement } from '@react-types/overlays'
 import { useCannotUseDevice } from '../../../hooks/useCannotUseDevice'
+import { useDeviceMissing } from '../../../hooks/useDeviceMissing'
 import { useDeviceIcons } from '@/features/rooms/livekit/hooks/useDeviceIcons'
 import type { LocalAudioTrack } from 'livekit-client'
 import { AudioLevelGauge } from './AudioLevelGauge'
@@ -113,6 +114,25 @@ export const SelectDevice = ({
 
   const deviceIcons = useDeviceIcons(kind)
   const cannotUseDevice = useCannotUseDevice(kind)
+  const deviceMissing = useDeviceMissing(kind)
+
+  if (deviceMissing) {
+    return (
+      <Select
+        aria-label={t(`NotFound.title.${kind}`, {
+          keyPrefix: 'mediaErrorDialog',
+        })}
+        label=""
+        isDisabled={true}
+        items={[]}
+        placeholder={t(`NotFound.title.${kind}`, {
+          keyPrefix: 'mediaErrorDialog',
+        })}
+        iconComponent={deviceIcons.select}
+        {...contextProps}
+      />
+    )
+  }
 
   if (cannotUseDevice) {
     return (

src/frontend/src/features/rooms/livekit/components/controls/Device/ToggleDevice.tsx

@@ -12,10 +12,15 @@ import {
   useMaybeRoomContext,
   useRoomContext,
 } from '@livekit/components-react'
+import { MediaDeviceFailure } from 'livekit-client'
+import { MediaDeviceErrorAlert } from '@/features/rooms/components/MediaDeviceErrorAlert'
 import type { ButtonRecipeProps } from '@/primitives/buttonRecipe'
 import type { ToggleButtonProps } from '@/primitives/ToggleButton'
 import { openPermissionsDialog } from '@/stores/permissions'
+import { openSilentMicDialog, silentMicStore } from '@/stores/silentMic'
+import { useSnapshot } from 'valtio'
 import { useCannotUseDevice } from '../../../hooks/useCannotUseDevice'
+import { useDeviceMissing } from '../../../hooks/useDeviceMissing'
 import { requestDevicePermission } from '../../../hooks/useJoinTracks'
 import { useDeviceIcons } from '../../../hooks/useDeviceIcons'
 import { useDeviceShortcut } from '../../../hooks/useDeviceShortcut'
@@ -91,12 +96,24 @@ export const ToggleDevice = <T extends ToggleSource>({
 
   const deviceIcons = useDeviceIcons(kind)
   const cannotUseDevice = useCannotUseDevice(kind)
+  const deviceMissing = useDeviceMissing(kind)
+  const { status: silentMicStatus } = useSnapshot(silentMicStore)
+  const silentMicWarning =
+    kind === 'audioinput' &&
+    silentMicStatus === 'silent' &&
+    !cannotUseDevice &&
+    !deviceMissing
   const deviceShortcut = useDeviceShortcut(kind)
   const announce = useScreenReaderAnnounce()
 
   const isRequestingPermission = useRef(false)
+  const [showDeviceNotFound, setShowDeviceNotFound] = useState(false)
 
   const onPress = async () => {
+    if (!enabled && deviceMissing) {
+      setShowDeviceNotFound(true)
+      return
+    }
     if (!cannotUseDevice) {
       toggle()
       return
@@ -104,7 +121,10 @@ export const ToggleDevice = <T extends ToggleSource>({
     if (isRequestingPermission.current) return
     isRequestingPermission.current = true
     try {
-      const granted = await requestDevicePermission(kind)
+      const granted = await requestDevicePermission(
+        kind,
+        context === 'join' ? 'join_preview' : 'room'
+      )
       if (granted) {
         toggle()
       } else {
@@ -161,7 +181,20 @@ export const ToggleDevice = <T extends ToggleSource>({
 
   return (
     <div style={{ position: 'relative' }}>
-      {cannotUseDevice && <PermissionNeededButton />}
+      {(cannotUseDevice || deviceMissing) && (
+        <PermissionNeededButton
+          tooltip={deviceMissing ? t(`deviceNotFound.${kind}`) : undefined}
+          onPress={
+            deviceMissing ? () => setShowDeviceNotFound(true) : undefined
+          }
+        />
+      )}
+      {silentMicWarning && (
+        <PermissionNeededButton
+          tooltip={t('tooltip', { keyPrefix: 'silentMic' })}
+          onPress={openSilentMicDialog}
+        />
+      )}
       <ToggleButton
         isSelected={!enabled}
         isDisabled={isDisabled}
@@ -172,15 +205,22 @@ export const ToggleDevice = <T extends ToggleSource>({
         onPress={onPress}
         aria-label={toggleLabel}
         tooltip={
-          cannotUseDevice
-            ? t('tooltip', { keyPrefix: 'permissionsButton' })
-            : toggleLabel
+          deviceMissing
+            ? t(`deviceNotFound.${kind}`)
+            : cannotUseDevice
+              ? t('tooltip', { keyPrefix: 'permissionsButton' })
+              : toggleLabel
         }
         {...computedToggleButtonProps}
         {...overrideToggleButtonProps}
       >
         <Icon />
       </ToggleButton>
+      <MediaDeviceErrorAlert
+        error={showDeviceNotFound ? MediaDeviceFailure.NotFound : null}
+        kind={kind}
+        onClose={() => setShowDeviceNotFound(false)}
+      />
     </div>
   )
 }

src/frontend/src/features/rooms/livekit/hooks/useCannotUseDevice.ts

@@ -9,6 +9,8 @@ export const useCannotUseDevice = (kind: MediaDeviceKind) => {
     isMicrophonePrompted,
     isCameraDenied,
     isCameraPrompted,
+    microphoneSystemDenied,
+    cameraSystemDenied,
   } = useSnapshot(permissionsStore)
 
   return useMemo(() => {
@@ -17,9 +19,11 @@ export const useCannotUseDevice = (kind: MediaDeviceKind) => {
     switch (kind) {
       case 'audioinput':
       case 'audiooutput': // audiooutput uses microphone permissions
-        return isMicrophoneDenied || isMicrophonePrompted
+        return (
+          isMicrophoneDenied || isMicrophonePrompted || microphoneSystemDenied
+        )
       case 'videoinput':
-        return isCameraDenied || isCameraPrompted
+        return isCameraDenied || isCameraPrompted || cameraSystemDenied
 
       default:
         return false
@@ -31,5 +35,7 @@ export const useCannotUseDevice = (kind: MediaDeviceKind) => {
     isMicrophonePrompted,
     isCameraDenied,
     isCameraPrompted,
+    microphoneSystemDenied,
+    cameraSystemDenied,
   ])
 }

src/frontend/src/features/rooms/livekit/hooks/useCopyRoomToClipboard.ts

@@ -59,7 +59,9 @@ export const useCopyRoomToClipboard = (room: ApiRoom | undefined) => {
       await navigator.clipboard.writeText(content)
       setIsCopied(true)
     } catch (error) {
-      reportError('clipboard_failure', error)
+      reportError('clipboard_failure', error, {
+        context: 'copy_room_content',
+      })
     }
   }
 
@@ -68,7 +70,9 @@ export const useCopyRoomToClipboard = (room: ApiRoom | undefined) => {
       await navigator.clipboard.writeText(roomUrl)
       setIsRoomUrlCopied(true)
     } catch (error) {
-      reportError('clipboard_failure', error)
+      reportError('clipboard_failure', error, {
+        context: 'copy_room_url',
+      })
     }
   }
 

src/frontend/src/features/rooms/livekit/hooks/useDeviceMissing.ts

@@ -0,0 +1,27 @@
+import { useSnapshot } from 'valtio'
+import { deviceAvailabilityStore } from '@/stores/deviceAvailability'
+import { permissionsStore } from '@/stores/permissions'
+
+/**
+ * enumerateDevices() may hide OS/app-blocked devices on Firefox Android.
+ * Only report "missing" when no permission block explains the absence,
+ * so the permission UI takes precedence.
+ */
+export const useDeviceMissing = (kind: MediaDeviceKind): boolean => {
+  const { hasCamera, hasMicrophone } = useSnapshot(deviceAvailabilityStore)
+  const {
+    cameraSystemDenied,
+    microphoneSystemDenied,
+    isCameraDenied,
+    isMicrophoneDenied,
+  } = useSnapshot(permissionsStore)
+
+  switch (kind) {
+    case 'videoinput':
+      return !hasCamera && !cameraSystemDenied && !isCameraDenied
+    case 'audioinput':
+      return !hasMicrophone && !microphoneSystemDenied && !isMicrophoneDenied
+    default:
+      return false
+  }
+}

src/frontend/src/features/rooms/livekit/hooks/useIsTrackMuted.ts

@@ -0,0 +1,24 @@
+import { type LocalAudioTrack, TrackEvent } from 'livekit-client'
+import { useEffect, useState } from 'react'
+
+export const useIsTrackMuted = (track?: LocalAudioTrack) => {
+  const [isMuted, setIsMuted] = useState(() => track?.isMuted ?? true)
+
+  useEffect(() => {
+    if (!track) {
+      setIsMuted(true)
+      return
+    }
+    setIsMuted(track.isMuted)
+    const onMuted = () => setIsMuted(true)
+    const onUnmuted = () => setIsMuted(false)
+    track.on(TrackEvent.Muted, onMuted)
+    track.on(TrackEvent.Unmuted, onUnmuted)
+    return () => {
+      track.off(TrackEvent.Muted, onMuted)
+      track.off(TrackEvent.Unmuted, onUnmuted)
+    }
+  }, [track])
+
+  return isMuted
+}

src/frontend/src/features/rooms/livekit/hooks/useJoinTracks.ts

@@ -10,10 +10,16 @@ import {
 } from 'livekit-client'
 import { BackgroundProcessorFactory } from '../components/blur'
 import {
+  classifyPermissionError,
+  isLikelySystemNotFound,
+  isSystemPermissionError,
+  noteGumSuccess,
   notePermissionDeniedFromGum,
+  noteSystemPermissionDenied,
   type PermissionKind,
 } from '@/stores/permissions'
-import { reportError } from '@/features/analytics/telemetry'
+import { getOS } from '@/utils/os'
+import { captureMediaEvent, reportError } from '@/features/analytics/telemetry'
 import {
   saveAudioInputDeviceId,
   saveAudioInputEnabled,
@@ -38,13 +44,57 @@ const PERMISSION_KIND: Record<'audioinput' | 'videoinput', PermissionKind> = {
   videoinput: 'camera',
 }
 
-export const onJoinPreviewError = (e: Error, kind?: PermissionKind) => {
-  reportError('join_preview_failure', e, { path: 'join_preview' })
+type MediaPath = 'join_preview' | 'room'
+
+const onMediaPermissionError = (
+  e: Error,
+  kind?: PermissionKind,
+  path: MediaPath = 'join_preview'
+) => {
   if (
     MediaDeviceFailure.getFailure(e) === MediaDeviceFailure.PermissionDenied
   ) {
-    notePermissionDeniedFromGum(kind)
+    void classifyPermissionError(e, kind).then((scope) => {
+      if (scope === 'system') {
+        noteSystemPermissionDenied(kind)
+      } else {
+        notePermissionDeniedFromGum(kind)
+      }
+      captureMediaEvent('permissions-denied', {
+        path,
+        kind,
+        denied_scope: scope,
+        os: getOS(),
+      })
+    })
+    return
   }
+
+  if (MediaDeviceFailure.getFailure(e) === MediaDeviceFailure.NotFound) {
+    // Firefox reports OS-level blocks as NotFoundError (macOS privacy
+    // settings, missing Android app permissions).
+    void isLikelySystemNotFound(e, kind).then((system) => {
+      if (system) {
+        noteSystemPermissionDenied(kind)
+        captureMediaEvent('permissions-denied', {
+          path,
+          kind,
+          denied_scope: 'system',
+          os: getOS(),
+        })
+        return
+      }
+      captureMediaEvent('device-not-found', { path, kind })
+    })
+    return
+  }
+
+  // "Other" and "Device in use" are still reported as errors, as they are not handled on the join screen.
+  reportError(
+    path === 'room' ? 'room_media_failure' : 'join_preview_failure',
+    e,
+    { path, kind }
+  )
 }
 
 // Module-level: effect dependencies, must be referentially stable.
@@ -55,7 +105,8 @@ const stopAll = (stream: MediaStream) =>
   stream.getTracks().forEach((track) => track.stop())
 
 export const requestDevicePermission = async (
-  kind: 'audioinput' | 'videoinput'
+  kind: 'audioinput' | 'videoinput',
+  path: MediaPath = 'join_preview'
 ): Promise<boolean> => {
   try {
     const track =
@@ -63,21 +114,32 @@ export const requestDevicePermission = async (
         ? await createLocalAudioTrack()
         : await createLocalVideoTrack()
     track.stop()
+    noteGumSuccess(PERMISSION_KIND[kind])
     return true
   } catch (error) {
-    onJoinPreviewError(error as Error, PERMISSION_KIND[kind])
+    onMediaPermissionError(error as Error, PERMISSION_KIND[kind], path)
     return false
   }
 }
 
+type WarmupState = {
+  audioReady: boolean
+  videoReady: boolean
+}
+
 /**
  * Requests camera and microphone once on mount (one combined call → at
- * most one browser dialog) and releases them immediately. Returns true
- * once settled; track acquisition must wait for it to avoid a second
- * dialog.
+ * most one browser dialog) and releases them immediately. Readiness is
+ * per kind: track acquisition must wait for its own kind to be settled
+ * to avoid a second dialog, but a microphone that stalls or fails (e.g.
+ * OS-level block on Firefox) must not hold the camera hostage — that is
+ * how LiveKit behaves in-room (independent per-kind acquisitions).
  */
-function useWarmupPermissions(): boolean {
-  const [done, setDone] = useState(false)
+function useWarmupPermissions(): WarmupState {
+  const [state, setState] = useState<WarmupState>({
+    audioReady: false,
+    videoReady: false,
+  })
   const started = useRef(false)
 
   useEffect(() => {
@@ -86,6 +148,8 @@ function useWarmupPermissions(): boolean {
     }
     started.current = true
 
+    const bothReady = () => setState({ audioReady: true, videoReady: true })
+
     const warmup = async () => {
       try {
         stopAll(
@@ -94,35 +158,50 @@ function useWarmupPermissions(): boolean {
             video: true,
           })
         )
+        noteGumSuccess()
+        bothReady()
       } catch (error) {
         if (
           MediaDeviceFailure.getFailure(error as Error) ===
-          MediaDeviceFailure.PermissionDenied
+            MediaDeviceFailure.PermissionDenied &&
+          !isSystemPermissionError(error)
         ) {
           // Retrying after a dismissal would show a second dialog.
-          onJoinPreviewError(error as Error)
+          onMediaPermissionError(error as Error)
+          bothReady()
           return
         }
         // Combined requests fail atomically (e.g. missing webcam fails the
-        // mic too) — retry per kind; permission is settled, no dialog risk.
-        try {
-          stopAll(await navigator.mediaDevices.getUserMedia({ audio: true }))
-        } catch (e) {
-          onJoinPreviewError(e as Error, 'microphone')
-        }
-        try {
-          stopAll(await navigator.mediaDevices.getUserMedia({ video: true }))
-        } catch (e) {
-          onJoinPreviewError(e as Error, 'camera')
-        }
-      } finally {
-        setDone(true)
+        // mic too, and an OS-level block on one device fails both) — retry
+        // per kind to know which device is affected; permission is settled
+        // at the browser level, no dialog risk. The retries run in parallel
+        // and settle readiness independently.
+        void navigator.mediaDevices
+          .getUserMedia({ audio: true })
+          .then((stream) => {
+            stopAll(stream)
+            noteGumSuccess('microphone')
+          })
+          .catch((e) => onMediaPermissionError(e as Error, 'microphone'))
+          .finally(() =>
+            setState((current) => ({ ...current, audioReady: true }))
+          )
+        void navigator.mediaDevices
+          .getUserMedia({ video: true })
+          .then((stream) => {
+            stopAll(stream)
+            noteGumSuccess('camera')
+          })
+          .catch((e) => onMediaPermissionError(e as Error, 'camera'))
+          .finally(() =>
+            setState((current) => ({ ...current, videoReady: true }))
+          )
       }
     }
     warmup()
   }, [])
 
-  return done
+  return state
 }
 
 function useLocalTrack<T extends LocalAudioTrack | LocalVideoTrack>({
@@ -148,6 +227,7 @@ function useLocalTrack<T extends LocalAudioTrack | LocalVideoTrack>({
     let cancelled = false
     create()
       .then((newTrack) => {
+        noteGumSuccess(permissionKind)
         if (cancelled) {
           newTrack.stop()
           return
@@ -155,7 +235,7 @@ function useLocalTrack<T extends LocalAudioTrack | LocalVideoTrack>({
         setTrack(newTrack)
       })
       .catch((error) => {
-        onJoinPreviewError(error as Error, permissionKind)
+        onMediaPermissionError(error as Error, permissionKind)
         onFailure()
       })
     return () => {
@@ -209,7 +289,7 @@ export function useJoinTracks(): {
     processorConfig,
   } = useSnapshot(userChoicesStore)
 
-  const ready = useWarmupPermissions()
+  const { audioReady, videoReady } = useWarmupPermissions()
 
   const createAudio = useCallback(
     () =>
@@ -231,7 +311,7 @@ export function useJoinTracks(): {
   )
 
   const audioTrack = useLocalTrack({
-    ready,
+    ready: audioReady,
     enabled: audioEnabled,
     create: createAudio,
     permissionKind: 'microphone',
@@ -239,7 +319,7 @@ export function useJoinTracks(): {
   })
 
   const videoTrack = useLocalTrack({
-    ready,
+    ready: videoReady,
     enabled: videoEnabled,
     create: createVideo,
     permissionKind: 'camera',

src/frontend/src/features/rooms/livekit/hooks/useRaisedHand.ts

@@ -80,12 +80,9 @@ export function useRaisedHand({ participant }: useRaisedHandProps) {
     try {
       await raiseHand(!isHandRaised)
     } catch (e) {
-      reportError(
-        'generic_failure',
-        new Error(
-          `Failed to toggle hand: ${e instanceof Error ? e.message : 'Unknown error'}`
-        )
-      )
+      reportError('generic_failure', e, {
+        context: 'toggle_raised_hand',
+      })
     }
   }
 

src/frontend/src/features/rooms/livekit/hooks/useRoomPageTitle.ts

@@ -1,28 +1,18 @@
 import { useTitle } from 'hoofd'
-import { useRoomData } from './useRoomData'
 import { useMemo } from 'react'
 
 const APP_TITLE = import.meta.env.VITE_APP_TITLE ?? ''
 
 /**
- * Updates the browser tab title with the room name to help users easily find
+ * Updates the browser tab title with the room id to help users easily find
  * the meeting tab among many open tabs. Works on both the join screen and
  * once connected.
  */
-export const useRoomPageTitle = () => {
-  const roomData = useRoomData()
-
+export const useRoomPageTitle = (roomId?: string) => {
   const pageTitle = useMemo(() => {
-    if (!roomData) {
-      return APP_TITLE
-    }
-
-    const roomLabel = roomData.name || roomData.slug || ''
-
-    if (!roomLabel) return APP_TITLE
-
-    return `${APP_TITLE} - ${roomLabel}  `
-  }, [roomData])
+    if (!roomId) return APP_TITLE
+    return `${APP_TITLE} - ${roomId}`
+  }, [roomId])
 
   useTitle(pageTitle)
 }

src/frontend/src/features/rooms/livekit/hooks/useSyncTrackDeviceId.ts

@@ -2,18 +2,14 @@ import { useEffect } from 'react'
 import { TrackEvent, type LocalTrack } from 'livekit-client'
 
 /**
- * Keeps the persisted device preference aligned with the device the track
- * is ACTUALLY using — the track is the ground truth, not the store.
+ * Keeps the persisted preference aligned with the track's actual device.
+ * The track is the source of truth, not the store.
  *
- * Syncs on mount and on every TrackEvent.Restarted, which covers all the
- * moments the underlying device can change on the join screen:
- *  - initial acquisition where LiveKit resolved the 'default' alias
- *    (getDeviceId(normalize=true) resolves it to the concrete id via
- *    livekit's DeviceManager — this replaces the former
- *    useResolveInitiallyDefaultDeviceId, which never fired after init),
- *  - a device switch via setDeviceId,
- *  - an unmute re-acquisition,
- *  - the browser falling back to another device.
+ * Syncs on mount and TrackEvent.Restarted, covering acquisition/restart,
+ * setDeviceId switches, unmute re-acquisition, and browser fallback.
+ *
+ * Skip persisting the raw "default" alias: it means "follow the OS default"
+ * and resolving it would pin the preference to a concrete device.
  */
 export const useSyncTrackDeviceId = (
   track: LocalTrack | undefined,
@@ -24,9 +20,9 @@ export const useSyncTrackDeviceId = (
     let cancelled = false
     const sync = () => {
       track
-        .getDeviceId()
+        .getDeviceId(false)
         .then((deviceId) => {
-          if (!cancelled && deviceId && deviceId !== 'default') {
+          if (!cancelled && deviceId) {
             save(deviceId)
           }
         })

src/frontend/src/features/rooms/livekit/hooks/useWatchMediaDeviceErrors.ts

@@ -0,0 +1,104 @@
+import { useCallback, useEffect, useState } from 'react'
+import { useRoomContext } from '@livekit/components-react'
+import { MediaDeviceFailure, RoomEvent } from 'livekit-client'
+import {
+  PERMISSION_BY_DEVICE_KIND,
+  type PermissionDeniedScope,
+  type PermissionKind,
+  classifyPermissionError,
+  isLikelySystemNotFound,
+  notePermissionDeniedFromGum,
+  noteSystemPermissionDenied,
+} from '@/stores/permissions'
+import { syncDeviceAvailability } from '@/stores/deviceAvailability'
+import { captureMediaEvent } from '@/features/analytics/telemetry'
+import { getOS } from '@/utils/os'
+
+type MediaDeviceAlert = {
+  error: MediaDeviceFailure | null
+  kind: MediaDeviceKind | null
+}
+
+const NO_ALERT: MediaDeviceAlert = { error: null, kind: null }
+
+const capturePermissionsDenied = (
+  scope: PermissionDeniedScope,
+  kind?: PermissionKind
+) =>
+  captureMediaEvent('permissions-denied', {
+    path: 'connect_publish',
+    kind,
+    denied_scope: scope,
+    os: getOS(),
+  })
+
+/**
+ * Single owner of the room's media device errors
+ * (RoomEvent.MediaDevicesError): telemetry, the user-facing alert, device
+ * availability refresh, and browser- vs OS-level permission classification.
+ * Listens to the raw room event because onMediaDeviceFailure only exposes
+ * LiveKit's mapped enum, and the raw error is needed to tell a browser-level
+ * denial from an OS-level one (Chromium's "Permission denied by system",
+ * Firefox/macOS's NotFoundError).
+ */
+export const useWatchMediaDeviceErrors = (): MediaDeviceAlert & {
+  clear: () => void
+} => {
+  const room = useRoomContext()
+  const [alert, setAlert] = useState<MediaDeviceAlert>(NO_ALERT)
+
+  useEffect(() => {
+    const onDeviceError = (error: Error, kind?: MediaDeviceKind) => {
+      const failure = MediaDeviceFailure.getFailure(error)
+      if (!failure) return
+      if (failure != MediaDeviceFailure.Other) {
+        void captureMediaEvent('media-device-error', {
+          log_code: 'media_devices_error_event',
+          path: 'connect_publish',
+          failure,
+          kind: kind ?? 'unknown',
+        })
+      }
+      if (!kind) return
+      const permissionKind = PERMISSION_BY_DEVICE_KIND[kind]
+      switch (failure) {
+        case MediaDeviceFailure.DeviceInUse:
+          setAlert({ error: failure, kind })
+          break
+        case MediaDeviceFailure.NotFound:
+          void syncDeviceAvailability()
+          // Firefox reports OS-level blocks as NotFoundError (macOS privacy
+          // settings, missing Android app permissions).
+          void isLikelySystemNotFound(error, permissionKind).then((system) => {
+            if (system) {
+              noteSystemPermissionDenied(permissionKind)
+              void capturePermissionsDenied('system', permissionKind)
+            } else {
+              setAlert({ error: failure, kind })
+            }
+          })
+          break
+        case MediaDeviceFailure.PermissionDenied:
+          void classifyPermissionError(error, permissionKind).then((scope) => {
+            void capturePermissionsDenied(scope, permissionKind)
+            if (scope === 'system') {
+              noteSystemPermissionDenied(permissionKind)
+            } else {
+              notePermissionDeniedFromGum(permissionKind)
+            }
+          })
+          break
+        default:
+          break
+      }
+    }
+    room.on(RoomEvent.MediaDevicesError, onDeviceError)
+    return () => {
+      room.off(RoomEvent.MediaDevicesError, onDeviceError)
+    }
+  }, [room])
+
+  const clear = useCallback(() => setAlert(NO_ALERT), [])
+
+  return { ...alert, clear }
+}

src/frontend/src/features/rooms/livekit/prefabs/ControlBar/MoreOptions.tsx

@@ -12,7 +12,8 @@ import type { ToggleButtonProps } from '@/primitives/ToggleButton'
 import { RiArrowDownSLine, RiArrowUpSLine } from '@remixicon/react'
 import { useTranslation } from 'react-i18next'
 
-const CONTROL_BAR_BREAKPOINT = 1100
+const CONTROL_BAR_BREAKPOINT_WIDE = 1100
+const CONTROL_BAR_BREAKPOINT_NARROW = 1050
 
 const NavigationControls = ({
   onPress,
@@ -65,10 +66,9 @@ export const LateralMenu = () => {
     </DialogTrigger>
   )
 }
-
 interface BreakpointObserverProps {
   containerRef: RefObject<HTMLDivElement>
-  onWideChange: (isWide: boolean) => void
+  onWideChange: (isWide: boolean | null) => void
 }
 
 const BreakpointObserver = ({
@@ -76,7 +76,20 @@ const BreakpointObserver = ({
   onWideChange,
 }: BreakpointObserverProps) => {
   const { width } = useSize(containerRef)
-  const isWide = width > CONTROL_BAR_BREAKPOINT
+  const [isWide, setIsWide] = useState<boolean | null>(null)
+
+  useEffect(() => {
+    if (!width) {
+      return
+    }
+    if (width > CONTROL_BAR_BREAKPOINT_WIDE) {
+      setIsWide(true)
+    } else if (width <= CONTROL_BAR_BREAKPOINT_NARROW) {
+      setIsWide(false)
+    } else {
+      setIsWide((prev) => (prev === null ? false : prev))
+    }
+  }, [width])
 
   useEffect(() => {
     onWideChange(isWide)
@@ -90,7 +103,7 @@ export const MoreOptions = ({
 }: {
   parentElement: RefObject<HTMLDivElement>
 }) => {
-  const [isWide, setIsWide] = useState(false)
+  const [isWide, setIsWide] = useState<boolean | null>(null)
 
   return (
     <nav
@@ -107,7 +120,7 @@ export const MoreOptions = ({
         containerRef={parentElement}
         onWideChange={setIsWide}
       />
-      {isWide ? <NavigationControls /> : <LateralMenu />}
+      {isWide !== null && (isWide ? <NavigationControls /> : <LateralMenu />)}
     </nav>
   )
 }

src/frontend/src/features/rooms/livekit/prefabs/VideoConference.tsx

@@ -11,10 +11,11 @@ import { SidePanel } from '../components/SidePanel'
 import { RecordingProvider } from '@/features/recording'
 import { ScreenShareErrorModal } from '../components/ScreenShareErrorModal'
 import { ConnectionObserver } from '../components/ConnectionObserver'
-import { reportError } from '@/features/analytics/telemetry'
+import { captureMediaEvent, reportError } from '@/features/analytics/telemetry'
+import { getOS } from '@/utils/os'
+import { isFireFox } from '@/utils/livekit'
 import { MediaStateObserver } from '../components/MediaStateObserver'
 import { RoomMetadataSynchronizer } from '../components/RoomMetadataSynchronizer'
-import { useRoomPageTitle } from '../hooks/useRoomPageTitle'
 import { useNoiseReduction } from '../hooks/useNoiseReduction'
 import { VideoResolutionSubscription } from '../components/VideoResolutionSubscription'
 import { SettingsDialogProvider } from '@/features/settings/components/SettingsDialogProvider'
@@ -27,6 +28,7 @@ import { StageLayout } from '@/features/layout/components/StageLayout'
 import { PinAnnouncer } from '@/features/layout/components/PinAnnouncer'
 import { ChatProvider } from '@/features/chat/components/ChatProvider'
 import { SyncDevicePreferences } from '@/features/rooms/livekit/components/SyncDevicePreferences'
+import { RoomSilentMicDetector } from '@/features/rooms/components/SilentMicDetector'
 
 /**
  * @public
@@ -36,6 +38,20 @@ export interface VideoConferenceProps extends React.HTMLAttributes<HTMLDivElemen
   SettingsComponent?: React.ComponentType
 }
 
+const getScreenSharePermissionDeniedScope = (
+  error: Error
+): 'system' | 'user' | 'browser' | null => {
+  if (error.name === 'NotAllowedError') {
+    if (/by system/i.test(error.message)) return 'system'
+    if (/by user/i.test(error.message)) return 'user'
+    return 'browser'
+  }
+  if (error.name === 'NotFoundError' && isFireFox() && getOS() === 'macos') {
+    return 'system'
+  }
+  return null
+}
+
 /**
  * The `VideoConference` ready-made component is your drop-in solution for a classic video conferencing application.
  * It provides functionality such as focusing on one participant, grid view with pagination to handle large numbers
@@ -55,18 +71,46 @@ export interface VideoConferenceProps extends React.HTMLAttributes<HTMLDivElemen
  * @public
  */
 export function VideoConference({ ...props }: VideoConferenceProps) {
-  useRoomPageTitle()
   useNoiseReduction()
 
   const { isOpen: isPictureInPictureOpen } = usePictureInPicture()
 
   const [isShareErrorVisible, setIsShareErrorVisible] = useState(false)
 
+  const handleDeviceError = ({
+    source,
+    error,
+  }: {
+    source: Track.Source
+    error: Error
+  }) => {
+    if (source === Track.Source.ScreenShare) {
+      const scope = getScreenSharePermissionDeniedScope(error)
+      if (scope) {
+        if (scope === 'system') setIsShareErrorVisible(true)
+        void captureMediaEvent('screen-share-permission-denied', {
+          at: 'ControlBar.onDeviceError',
+          source,
+          error_name: error.name,
+          error_message: error.message,
+          denied_scope: scope,
+          os: getOS(),
+        })
+        return
+      }
+    }
+    reportError('device_switch_failure', error, {
+      at: 'ControlBar.onDeviceError',
+      source,
+    })
+  }
+
   return (
     <>
       <RoomMetadataSynchronizer />
       <ConnectionObserver />
       <SyncDevicePreferences />
+      <RoomSilentMicDetector />
       <MediaStateObserver />
       <ChatProvider />
       <VideoResolutionSubscription />
@@ -92,21 +136,7 @@ export function VideoConference({ ...props }: VideoConferenceProps) {
                 <StageLayout />
               )}
             </RoomContentArea>
-            <ControlBar
-              onDeviceError={(e) => {
-                reportError('device_switch_failure', e.error, {
-                  at: 'ControlBar.onDeviceError',
-                  source: e.source,
-                })
-                if (
-                  e.source == Track.Source.ScreenShare &&
-                  e.error.toString() ==
-                    'NotAllowedError: Permission denied by system'
-                ) {
-                  setIsShareErrorVisible(true)
-                }
-              }}
-            />
+            <ControlBar onDeviceError={handleDeviceError} />
             <SidePanel />
           </>
         )}

src/frontend/src/features/rooms/routes/Feedback.tsx

@@ -6,7 +6,6 @@ import { Rating } from '@/features/rooms/components/Rating.tsx'
 import { useLocation } from 'wouter'
 import { useMemo } from 'react'
 import { DisconnectReason } from 'livekit-client'
-import type { CandidateInfo } from '@/stores/connectionObserver'
 
 // fixme - duplicated with home, refactor in a proper style
 const Heading = styled('h1', {
@@ -48,10 +47,6 @@ const FeedbackRoute = () => {
     const state = window.history.state
     return {
       room_id: state?.room_id as string,
-      pc_publisher: state?.pc_publisher as CandidateInfo,
-      pc_publisher_changes_count: state?.pc_publisher_changes_count as number,
-      pc_subscriber: state?.pc_subscriber as CandidateInfo,
-      pc_subscriber_changes_count: state?.pc_subscriber_changes_count as number,
     }
   }, [])
 

src/frontend/src/features/rooms/routes/Room.tsx

@@ -7,6 +7,7 @@ import { useUser } from '@/features/auth/api/useUser'
 import { Conference } from '../components/Conference'
 import { Join } from '../components/Join'
 import { Permissions } from '../components/Permissions'
+import { SilentMicDialog } from '../components/SilentMicDialog'
 import { useKeyboardShortcuts } from '@/features/shortcuts/useKeyboardShortcuts'
 import {
   isRoomValid,
@@ -14,11 +15,14 @@ import {
 } from '@/features/rooms/utils/isRoomValid'
 import { useConfig } from '@/api/useConfig.ts'
 import { LogLevel, setLogLevel } from 'livekit-client'
+import { useWatchDeviceAvailability } from '@/features/rooms/hooks/useWatchDeviceAvailability'
+import { useRoomPageTitle } from '@/features/rooms/livekit/hooks/useRoomPageTitle'
 
 const BaseRoom = ({ children }: { children: ReactNode }) => {
   return (
     <UserAware>
       <Permissions />
+      <SilentMicDialog />
       {children}
     </UserAware>
   )
@@ -36,12 +40,15 @@ const Room = () => {
 
   const { data } = useConfig()
 
+  useRoomPageTitle(roomId)
+
   useEffect(() => {
     const shouldSilenceLogs = data?.silence_livekit_debug_logs || false
     setLogLevel(shouldSilenceLogs ? LogLevel.silent : LogLevel.debug)
   }, [data?.silence_livekit_debug_logs])
 
   useKeyboardShortcuts()
+  useWatchDeviceAvailability()
 
   const clearRouterState = () => {
     if (window?.history?.state) {

src/frontend/src/features/settings/components/tabs/AccountTab.tsx

@@ -36,12 +36,9 @@ export const AccountTab = ({ id, onOpenChange }: AccountTabProps) => {
       saveUsername(name)
       onOpenChange?.(false) // only close on success
     } catch (error) {
-      reportError(
-        'generic_failure',
-        new Error(
-          `Failed to rename participant: ${error instanceof Error ? error.message : 'Unknown error'}`
-        )
-      )
+      reportError('generic_failure', error, {
+        context: 'rename_participant',
+      })
     }
   }
   const handleOnCancel = () => {

src/frontend/src/layout/Header.tsx

@@ -169,7 +169,13 @@ export const Header = () => {
                 !isTermsOfService &&
                 !loginButtonDisabledByUrl && (
                   <>
-                    <LoginButton proConnectHint={false} />
+                    <div
+                      className={css({
+                        display: { base: 'none', xsm: 'block' },
+                      })}
+                    >
+                      <LoginButton proConnectHint={false} />
+                    </div>
                     <LoginHint />
                   </>
                 )}

src/frontend/src/locales/de/rooms.json

@@ -12,6 +12,10 @@
     "loading": "Laden…",
     "select": "Wähle einen Wert",
     "permissionsNeeded": "Berechtigung erforderlich",
+    "deviceNotFound": {
+      "videoinput": "Keine Kamera erkannt. Prüfe, ob sie richtig angeschlossen ist.",
+      "audioinput": "Kein Mikrofon erkannt. Prüfe, ob es richtig angeschlossen ist."
+    },
     "settings": {
       "audio": "Audioeinstellungen",
       "video": "Videoeinstellungen"
@@ -62,6 +66,7 @@
       "usernameEmpty": "Dein Name darf nicht leer sein"
     },
     "cameraDisabled": "Kamera ist deaktiviert.",
+    "cameraNotFound": "Keine Kamera erkannt. Prüfe, ob sie richtig angeschlossen ist.",
     "cameraStarting": "Kamera wird gestartet…",
     "cameraNotGranted": "Möchtest du, dass andere dich während des Meetings sehen können?",
     "cameraAndMicNotGranted": "Möchtest du, dass andere dich während des Meetings sehen und hören können?",
@@ -117,6 +122,16 @@
         "videoinput": "Deine Kamera wird bereits in einem anderen Tab oder von einer anderen App verwendet. Dies verhindert die Aktivierung in diesem Meeting. Wenn du deine Kamera hier verwenden möchtest, schließe den anderen Tab oder die App."
       }
     },
+    "NotFound": {
+      "title": {
+        "audioinput": "Kein Mikrofon erkannt",
+        "videoinput": "Keine Kamera erkannt"
+      },
+      "body": {
+        "audioinput": "Auf deinem Gerät wurde kein Mikrofon erkannt. Prüfe, ob es richtig angeschlossen ist und nicht durch einen Schalter stummgeschaltet wird, und versuche es dann erneut.",
+        "videoinput": "Auf deinem Gerät wurde keine Kamera erkannt. Prüfe, ob sie richtig angeschlossen ist und nicht durch eine Abdeckung oder einen Schalter blockiert wird, und versuche es dann erneut."
+      }
+    },
     "close": "OK"
   },
   "permissionErrorDialog": {
@@ -139,6 +154,53 @@
       }
     }
   },
+  "systemPermissionDialog": {
+    "heading": {
+      "camera": "Erlauben Sie Ihrem Browser, Ihre Kamera zu verwenden",
+      "microphone": "Erlauben Sie Ihrem Browser, Ihr Mikrofon zu verwenden",
+      "cameraAndMicrophone": "Erlauben Sie Ihrem Browser, Ihre Kamera und Ihr Mikrofon zu verwenden"
+    },
+    "device": {
+      "camera": "Kamera",
+      "microphone": "Mikrofon",
+      "cameraAndMicrophone": "Kamera und Ihr Mikrofon"
+    },
+    "intro": "Ihr Browser hat bereits die Berechtigung, aber die Systemeinstellungen Ihres Computers blockieren den Zugriff auf Ihr(e) {{device}}.",
+    "steps": {
+      "macos": {
+        "1": "Öffnen Sie in den Systemeinstellungen „Datenschutz & Sicherheit“.",
+        "2": "Erlauben Sie Ihrem Browser den Zugriff auf Ihr(e) {{device}}."
+      },
+      "windows": {
+        "1": "Öffnen Sie in den Windows-Einstellungen „Datenschutz und Sicherheit“.",
+        "2": "Aktivieren Sie den Zugriff auf {{device}} und erlauben Sie Desktop-Apps die Nutzung."
+      },
+      "android": {
+        "1": "Öffnen Sie in den Android-Einstellungen „Apps“ und wählen Sie Ihren Browser aus.",
+        "2": "Erlauben Sie unter „Berechtigungen“ den Zugriff auf Ihr(e) {{device}} und laden Sie die Seite anschließend neu."
+      },
+      "other": {
+        "1": "Erlauben Sie Ihrem Browser in den Datenschutzeinstellungen Ihres Systems den Zugriff auf Ihr(e) {{device}}.",
+        "2": "Versuchen Sie es anschließend erneut."
+      }
+    },
+    "openSettings": "Systemeinstellungen öffnen"
+  },
+  "silentMic": {
+    "tooltip": "Ihr Mikrofon ist aktiviert, aber es wird kein Ton erkannt. Klicken Sie für weitere Informationen.",
+    "dialog": {
+      "title": "Kein Ton erkannt",
+      "intro": "Ihr Mikrofon ist aktiviert, aber seit einiger Zeit wird kein Ton erkannt. Überprüfen Sie Folgendes:",
+      "causes": {
+        "system": "Der Zugriff auf das Mikrofon wird möglicherweise durch die Datenschutzeinstellungen Ihres Systems blockiert.",
+        "hardware": "Möglicherweise ist ein Stummschalter aktiviert oder das Mikrofon ist nicht angeschlossen oder defekt.",
+        "wrongDevice": "Möglicherweise ist das falsche Mikrofon ausgewählt. Wählen Sie im Mikrofonmenü ein anderes aus."
+      },
+      "hint": "Sprechen Sie erneut, nachdem Sie diese Punkte überprüft haben. Die Warnung verschwindet, sobald ein Ton erkannt wird.",
+      "close": "Verstanden",
+      "discard": "Erkennung eines stummen Mikrofons deaktivieren"
+    }
+  },
   "permissionsButton": {
     "tooltip": "Mehr Infos",
     "ariaLabel": "Problem mit Berechtigungen. Mehr Infos anzeigen"
@@ -152,8 +214,11 @@
       "title": "Bildschirmfreigabe nicht möglich",
       "ariaLabel": "Bildschirmfreigabe nicht möglich",
       "message": "Deinem Browser fehlt möglicherweise die Berechtigung, den Bildschirm deines Geräts abzugreifen.",
-      "macInstructions": "Gehe zu den",
-      "macSystemPreferences": "Systemeinstellungen",
+      "settingsInstructions": "Gehe zu den",
+      "settingsLabel": {
+        "macos": "Systemeinstellungen",
+        "windows": "Windows-Datenschutzeinstellungen"
+      },
       "helpLinkText": "Weitere Informationen findest du unter",
       "helpLinkLabel": "Bildschirmfreigabeproblem",
       "closeButton": "Schließen",

src/frontend/src/locales/en/rooms.json

@@ -12,6 +12,10 @@
     "loading": "Loading…",
     "select": "Select a value",
     "permissionsNeeded": "Permission needed",
+    "deviceNotFound": {
+      "videoinput": "No camera detected. Check that it is properly wired.",
+      "audioinput": "No microphone detected. Check that it is properly wired."
+    },
     "settings": {
       "audio": "Audio settings",
       "video": "Video settings"
@@ -62,6 +66,7 @@
       "usernameEmpty": "Your name cannot be empty"
     },
     "cameraDisabled": "Camera is disabled.",
+    "cameraNotFound": "No camera detected. Check that it is properly plugged in.",
     "cameraStarting": "Camera is starting…",
     "cameraNotGranted": "Would you like others to be able to see you during the meeting?",
     "cameraAndMicNotGranted": "Would you like others to be able to see and hear you during the meeting?",
@@ -117,6 +122,16 @@
         "videoinput": "Your camera is already in use by another tab or application, which prevents it from being activated in this video call. If you wish, close the other tab or application to use it here."
       }
     },
+    "NotFound": {
+      "title": {
+        "audioinput": "No microphone detected",
+        "videoinput": "No camera detected"
+      },
+      "body": {
+        "audioinput": "No microphone was detected on your device. Check that it is properly plugged in and not disabled by a mute switch, then try again.",
+        "videoinput": "No camera was detected on your device. Check that it is properly plugged in and not blocked by a cover or switch, then try again."
+      }
+    },
     "close": "OK"
   },
   "permissionErrorDialog": {
@@ -139,6 +154,53 @@
       }
     }
   },
+  "systemPermissionDialog": {
+    "heading": {
+      "camera": "Allow your browser to use your camera",
+      "microphone": "Allow your browser to use your microphone",
+      "cameraAndMicrophone": "Allow your browser to use your camera and microphone"
+    },
+    "device": {
+      "camera": "camera",
+      "microphone": "microphone",
+      "cameraAndMicrophone": "camera and microphone"
+    },
+    "intro": "Your browser already has permission, but your computer's system settings are blocking access to your {{device}}.",
+    "steps": {
+      "macos": {
+        "1": "In System Settings, open “Privacy & Security”.",
+        "2": "Allow your browser to access your {{device}}."
+      },
+      "windows": {
+        "1": "In Windows Settings, open “Privacy & security”.",
+        "2": "Turn on {{device}} access and allow desktop apps to use it."
+      },
+      "android": {
+        "1": "In Android Settings, open “Apps” and select your browser.",
+        "2": "In “Permissions”, allow access to the {{device}}, then reload this page."
+      },
+      "other": {
+        "1": "In your system's privacy settings, allow your browser to access your {{device}}.",
+        "2": "Then try again."
+      }
+    },
+    "openSettings": "Open system settings"
+  },
+  "silentMic": {
+    "tooltip": "Your microphone is on, but no sound is being detected. Click to learn more.",
+    "dialog": {
+      "title": "No sound detected",
+      "intro": "Your microphone is on, but we haven't detected any sound for a while. Check the following:",
+      "causes": {
+        "system": "Your system's privacy settings may be blocking microphone access.",
+        "hardware": "A mute switch may be turned on, or your microphone may be disconnected or faulty.",
+        "wrongDevice": "The wrong microphone may be selected. Try choosing another one from the microphone menu."
+      },
+      "hint": "Speak again after checking these settings. This warning will disappear as soon as sound is detected.",
+      "close": "Got it",
+      "discard": "Turn off silent microphone detection"
+    }
+  },
   "permissionsButton": {
     "tooltip": "More info",
     "ariaLabel": "Permissions issue. Show more info"
@@ -152,8 +214,11 @@
       "title": "Unable to share your screen",
       "ariaLabel": "Unable to share your screen",
       "message": "Your browser may not be allowed to record the screen on your computer.",
-      "macInstructions": "Go to your",
-      "macSystemPreferences": "System Preferences",
+      "settingsInstructions": "Go to your",
+      "settingsLabel": {
+        "macos": "System Preferences",
+        "windows": "Windows privacy settings"
+      },
       "helpLinkText": "To learn more, see",
       "helpLinkLabel": "Presentation issue",
       "closeButton": "Dismiss",

src/frontend/src/locales/fr/rooms.json

@@ -12,6 +12,10 @@
     "loading": "Chargement…",
     "select": "Sélectionnez une valeur",
     "permissionsNeeded": "Autorisations nécessaires",
+    "deviceNotFound": {
+      "videoinput": "Aucune caméra détectée. Vérifiez qu'elle est bien branchée.",
+      "audioinput": "Aucun microphone détecté. Vérifiez qu'il est bien branché."
+    },
     "settings": {
       "audio": "Paramètres audio",
       "video": "Paramètres video"
@@ -62,6 +66,7 @@
       "usernameEmpty": "Votre nom ne peut pas être vide"
     },
     "cameraDisabled": "La caméra est désactivée.",
+    "cameraNotFound": "Aucune caméra détectée. Vérifiez qu'elle est bien branchée.",
     "cameraStarting": "La caméra va démarrer…",
     "cameraNotGranted": "Souhaitez-vous que les autres puissent vous voir pendant la réunion ?",
     "cameraAndMicNotGranted": "Souhaitez-vous que les autres puissent vous voir et vous entendre pendant la réunion ?",
@@ -117,6 +122,16 @@
         "videoinput": "Votre caméra est déjà utilisée dans un autre onglet ou une autre application, ce qui empêche son activation dans cette visioconférence. Si vous le souhaitez, fermez l'autre onglet ou application pour l'utiliser ici."
       }
     },
+    "NotFound": {
+      "title": {
+        "audioinput": "Aucun microphone détecté",
+        "videoinput": "Aucune caméra détectée"
+      },
+      "body": {
+        "audioinput": "Aucun microphone n'a été détecté sur votre appareil. Vérifiez qu'il est bien branché et qu'aucun bouton ne le coupe, puis réessayez.",
+        "videoinput": "Aucune caméra n'a été détectée sur votre appareil. Vérifiez qu'elle est bien branchée et qu'aucun cache ou bouton ne la bloque, puis réessayez."
+      }
+    },
     "close": "OK"
   },
   "permissionErrorDialog": {
@@ -139,6 +154,53 @@
       }
     }
   },
+  "systemPermissionDialog": {
+    "heading": {
+      "camera": "Autorisez votre navigateur à utiliser votre caméra",
+      "microphone": "Autorisez votre navigateur à utiliser votre micro",
+      "cameraAndMicrophone": "Autorisez votre navigateur à utiliser votre caméra et votre micro"
+    },
+    "device": {
+      "camera": "caméra",
+      "microphone": "micro",
+      "cameraAndMicrophone": "caméra et votre micro"
+    },
+    "intro": "Votre navigateur a déjà l'autorisation, mais les réglages de votre ordinateur bloquent l'accès à votre {{device}}.",
+    "steps": {
+      "macos": {
+        "1": "Dans les réglages Système, ouvrez « Confidentialité et sécurité ».",
+        "2": "Autorisez votre navigateur à accéder à votre {{device}}."
+      },
+      "windows": {
+        "1": "Dans les paramètres Windows, ouvrez « Confidentialité et sécurité ».",
+        "2": "Activez l'accès à votre {{device}} et autorisez les applications de bureau à l'utiliser."
+      },
+      "android": {
+        "1": "Dans les paramètres Android, ouvrez « Applications » puis sélectionnez votre navigateur.",
+        "2": "Dans « Autorisations », autorisez l'accès à votre {{device}}, puis rechargez la page."
+      },
+      "other": {
+        "1": "Dans les paramètres de confidentialité de votre système, autorisez votre navigateur à accéder à votre {{device}}.",
+        "2": "Puis réessayez."
+      }
+    },
+    "openSettings": "Ouvrir les réglages système"
+  },
+  "silentMic": {
+    "tooltip": "Votre micro est activé, mais aucun son n'est détecté. Cliquez pour en savoir plus.",
+    "dialog": {
+      "title": "Aucun son détecté",
+      "intro": "Votre micro est activé, mais aucun son n'est détecté depuis un moment. Vérifiez les points suivants :",
+      "causes": {
+        "system": "L'accès au micro est peut-être bloqué dans les réglages de confidentialité de votre système.",
+        "hardware": "Un bouton ou interrupteur coupe peut-être le micro, ou celui-ci est débranché ou défectueux.",
+        "wrongDevice": "Un autre micro est peut-être sélectionné. Essayez d'en choisir un autre dans le menu du micro."
+      },
+      "hint": "Parlez à nouveau après avoir vérifié ces points. L'avertissement disparaîtra dès qu'un son sera détecté.",
+      "close": "Compris",
+      "discard": "Désactiver cette détection"
+    }
+  },
   "permissionsButton": {
     "tooltip": "Plus d'infos",
     "ariaLabel": "Problème de permissions. Afficher plus d'infos"
@@ -152,8 +214,11 @@
       "title": "Impossible de partager votre écran",
       "ariaLabel": "Impossible de partager votre écran",
       "message": "Il se peut que votre navigateur ne soit pas autorisé à enregistrer l'écran sur votre ordinateur.",
-      "macInstructions": "Accèdez à vos",
-      "macSystemPreferences": "Préférences système",
+      "settingsInstructions": "Accédez à vos",
+      "settingsLabel": {
+        "macos": "Préférences système",
+        "windows": "paramètres de confidentialité Windows"
+      },
       "helpLinkText": "Pour en savoir plus, consulter",
       "helpLinkLabel": "Problème de présentation",
       "closeButton": "Ignorer",

src/frontend/src/locales/nl/rooms.json

@@ -12,6 +12,10 @@
     "loading": "Bezig met laden…",
     "select": "Selecteer een waarde",
     "permissionsNeeded": "Toestemming vereist",
+    "deviceNotFound": {
+      "videoinput": "Geen camera gedetecteerd. Controleer of deze goed is aangesloten.",
+      "audioinput": "Geen microfoon gedetecteerd. Controleer of deze goed is aangesloten."
+    },
     "settings": {
       "audio": "Audio-instellingen",
       "video": "Video-instellingen"
@@ -62,6 +66,7 @@
       "usernameEmpty": "Uw naam kan niet leeg zijn"
     },
     "cameraDisabled": "Camera is uitgeschakeld.",
+    "cameraNotFound": "Geen camera gedetecteerd. Controleer of deze goed is aangesloten.",
     "cameraStarting": "Camera wordt ingeschakeld…",
     "cameraNotGranted": "Wilt u dat anderen u tijdens de vergadering kunnen zien?",
     "cameraAndMicNotGranted": "Wilt u dat anderen u tijdens de vergadering kunnen zien en horen?",
@@ -117,6 +122,16 @@
         "videoinput": "Je camera wordt al gebruikt door een ander tabblad of een andere toepassing, waardoor deze niet geactiveerd kan worden in dit videogesprek. Sluit indien gewenst het andere tabblad of de toepassing om je camera hier te gebruiken."
       }
     },
+    "NotFound": {
+      "title": {
+        "audioinput": "Geen microfoon gedetecteerd",
+        "videoinput": "Geen camera gedetecteerd"
+      },
+      "body": {
+        "audioinput": "Er is geen microfoon gedetecteerd op je apparaat. Controleer of deze goed is aangesloten en niet door een schakelaar is gedempt, en probeer het opnieuw.",
+        "videoinput": "Er is geen camera gedetecteerd op je apparaat. Controleer of deze goed is aangesloten en niet door een afdekking of schakelaar wordt geblokkeerd, en probeer het opnieuw."
+      }
+    },
     "close": "OK"
   },
   "permissionErrorDialog": {
@@ -139,6 +154,53 @@
       }
     }
   },
+  "systemPermissionDialog": {
+    "heading": {
+      "camera": "Geef je browser toestemming om je camera te gebruiken",
+      "microphone": "Geef je browser toestemming om je microfoon te gebruiken",
+      "cameraAndMicrophone": "Geef je browser toestemming om je camera en microfoon te gebruiken"
+    },
+    "device": {
+      "camera": "camera",
+      "microphone": "microfoon",
+      "cameraAndMicrophone": "camera en microfoon"
+    },
+    "intro": "Je browser heeft al toestemming, maar de systeeminstellingen van je computer blokkeren de toegang tot je {{device}}.",
+    "steps": {
+      "macos": {
+        "1": "Open in Systeeminstellingen “Privacy en beveiliging”.",
+        "2": "Geef je browser toegang tot je {{device}}."
+      },
+      "windows": {
+        "1": "Open in de Windows-instellingen “Privacy en beveiliging”.",
+        "2": "Zet {{device}}-toegang aan en sta desktop-apps toe deze te gebruiken."
+      },
+      "android": {
+        "1": "Open in de Android-instellingen “Apps” en kies je browser.",
+        "2": "Sta bij “Machtigingen” toegang tot je {{device}} toe en herlaad daarna de pagina."
+      },
+      "other": {
+        "1": "Geef je browser in de privacy-instellingen van je systeem toegang tot je {{device}}.",
+        "2": "Probeer het daarna opnieuw."
+      }
+    },
+    "openSettings": "Systeeminstellingen openen"
+  },
+  "silentMic": {
+    "tooltip": "Je microfoon staat aan, maar er wordt geen geluid gedetecteerd. Klik voor meer informatie.",
+    "dialog": {
+      "title": "Geen geluid gedetecteerd",
+      "intro": "Je microfoon staat aan, maar er is al een tijdje geen geluid gedetecteerd. Controleer het volgende:",
+      "causes": {
+        "system": "De privacyinstellingen van je systeem blokkeren mogelijk de toegang tot je microfoon.",
+        "hardware": "Mogelijk staat er een mute-schakelaar aan, of is je microfoon niet aangesloten of defect.",
+        "wrongDevice": "Mogelijk is de verkeerde microfoon geselecteerd. Kies een andere microfoon in het microfoonmenu."
+      },
+      "hint": "Spreek opnieuw nadat je dit hebt gecontroleerd. De waarschuwing verdwijnt zodra er geluid wordt gedetecteerd.",
+      "close": "Begrepen",
+      "discard": "Detectie van een stille microfoon uitschakelen"
+    }
+  },
   "permissionsButton": {
     "tooltip": "Meer info",
     "ariaLabel": "Probleem met machtigingen. Meer info weergeven"
@@ -152,8 +214,11 @@
       "title": "Kan uw scherm niet delen",
       "ariaLabel": "Kan uw scherm niet delen",
       "message": "Het is mogelijk dat uw browser geen toestemming heeft om het scherm op uw computer op te nemen.",
-      "macInstructions": "Ga naar uw",
-      "macSystemPreferences": "Systeemvoorkeuren",
+      "settingsInstructions": "Ga naar uw",
+      "settingsLabel": {
+        "macos": "Systeemvoorkeuren",
+        "windows": "Windows-privacyinstellingen"
+      },
       "helpLinkText": "Meer informatie, zie",
       "helpLinkLabel": "Presentatieprobleem",
       "closeButton": "Negeren",

src/frontend/src/primitives/Checkbox.tsx

@@ -8,7 +8,6 @@ import { type StyledVariantProps } from '@/styled-system/types'
 import { styled } from '@/styled-system/jsx'
 import { FieldErrors } from './FieldErrors'
 import { FieldDescription } from './FieldDescription'
-import { reportError } from '@/features/analytics/telemetry'
 
 // styled taken from example at https://react-spectrum.adobe.com/react-aria/Checkbox.html
 const StyledCheckbox = styled(RACCheckbox, {
@@ -113,12 +112,6 @@ export const Checkbox = ({
   const descriptionId = useId()
 
   if (isInvalid !== undefined) {
-    reportError(
-      'generic_failure',
-      new Error(
-        'Checkbox: passing isInvalid is not supported, use the validate prop instead'
-      )
-    )
     return null
   }
 

src/frontend/src/primitives/Select.tsx

@@ -116,51 +116,55 @@ export const Select = <T extends string | number>({
   const { t } = useTranslation('global')
   return (
     <RACSelect {...props}>
-      {label}
-      <StyledButton variant={variant}>
-        {!!IconComponent && (
-          <StyledIcon>
-            <IconComponent size={18} />
-          </StyledIcon>
-        )}
-        <StyledSelectValue />
-        <RiArrowDropDownLine
-          aria-hidden="true"
-          className={css({ flexShrink: 0 })}
-        />
-      </StyledButton>
-      <StyledPopover placement={placement}>
-        <Box size="sm" type="popover" variant={variant}>
-          <ListBox>
-            {items.map((item) => (
-              <ListBoxItem
-                className={
-                  menuRecipe({
-                    extraPadding: true,
-                    variant: variant,
-                  }).item
-                }
-                id={item.value}
-                key={item.value}
-                textValue={
-                  typeof item.label === 'string' ? item.label : undefined
-                }
-              >
-                {({ isSelected }) => (
-                  <>
-                    {item.label}
-                    {isSelected && (
-                      <VisuallyHidden>, {t('selected')}</VisuallyHidden>
+      {({ isOpen }) => (
+        <>
+          {label}
+          <StyledButton variant={variant}>
+            {!!IconComponent && (
+              <StyledIcon>
+                <IconComponent size={18} />
+              </StyledIcon>
+            )}
+            <StyledSelectValue />
+            <RiArrowDropDownLine
+              aria-hidden="true"
+              className={css({ flexShrink: 0 })}
+            />
+          </StyledButton>
+          <StyledPopover placement={placement}>
+            <Box size="sm" type="popover" variant={variant}>
+              <ListBox>
+                {items.map((item) => (
+                  <ListBoxItem
+                    className={
+                      menuRecipe({
+                        extraPadding: true,
+                        variant: variant,
+                      }).item
+                    }
+                    id={item.value}
+                    key={item.value}
+                    textValue={
+                      typeof item.label === 'string' ? item.label : undefined
+                    }
+                  >
+                    {({ isSelected }) => (
+                      <>
+                        {item.label}
+                        {isSelected && (
+                          <VisuallyHidden>, {t('selected')}</VisuallyHidden>
+                        )}
+                      </>
                     )}
-                  </>
-                )}
-              </ListBoxItem>
-            ))}
-          </ListBox>
-          {menuFooter}
-        </Box>
-      </StyledPopover>
-      {errors}
+                  </ListBoxItem>
+                ))}
+              </ListBox>
+              {isOpen && menuFooter}
+            </Box>
+          </StyledPopover>
+          {errors}
+        </>
+      )}
     </RACSelect>
   )
 }

src/frontend/src/stores/connectionObserver.ts

@@ -1,23 +1,9 @@
 import { proxy } from 'valtio'
 
-export type CandidateInfo = {
-  type: string
-  address: string
-  protocol: string
-}
-
 type State = {
   isIdleDisconnectModalOpen: boolean
-  publisher: CandidateInfo | null
-  publisherChangesCount: number
-  subscriber: CandidateInfo | null
-  subscriberChangesCount: number
 }
 
 export const connectionObserverStore = proxy<State>({
   isIdleDisconnectModalOpen: false,
-  publisher: null,
-  publisherChangesCount: 0,
-  subscriber: null,
-  subscriberChangesCount: 0,
 })

src/frontend/src/stores/deviceAvailability.ts

@@ -0,0 +1,38 @@
+import { proxy } from 'valtio'
+import { captureMediaEvent, reportError } from '@/features/analytics/telemetry'
+
+// Device presence (not permission): enumerateDevices() exposes kinds
+// before any grant. Optimistic defaults until the first sync.
+export const deviceAvailabilityStore = proxy({
+  hasCamera: true,
+  hasMicrophone: true,
+  synced: false,
+})
+
+export const syncDeviceAvailability = async (): Promise<void> => {
+  try {
+    const devices = await navigator.mediaDevices.enumerateDevices()
+    const hasCamera = devices.some((d) => d.kind === 'videoinput')
+    const hasMicrophone = devices.some((d) => d.kind === 'audioinput')
+
+    // Report each absence once, not on every devicechange.
+    const firstSync = !deviceAvailabilityStore.synced
+    if (!hasCamera && (firstSync || deviceAvailabilityStore.hasCamera)) {
+      void captureMediaEvent('device-not-found', { kind: 'videoinput' })
+    }
+    if (
+      !hasMicrophone &&
+      (firstSync || deviceAvailabilityStore.hasMicrophone)
+    ) {
+      void captureMediaEvent('device-not-found', { kind: 'audioinput' })
+    }
+
+    deviceAvailabilityStore.hasCamera = hasCamera
+    deviceAvailabilityStore.hasMicrophone = hasMicrophone
+    deviceAvailabilityStore.synced = true
+  } catch (error) {
+    reportError('permissions_api_failure', error as Error, {
+      context: 'enumerateDevices for device availability',
+    })
+  }
+}

src/frontend/src/stores/permissions.ts

@@ -1,12 +1,17 @@
 import { proxy } from 'valtio'
+import { isFireFox, isMacintosh } from '@/utils/livekit'
+import { isAndroid } from '@/utils/os'
 
 type PermissionState = undefined | 'granted' | 'prompt' | 'denied'
 
 type State = {
   cameraPermission: PermissionState
   microphonePermission: PermissionState
+  cameraSystemDenied: boolean
+  microphoneSystemDenied: boolean
   isLoading: boolean
   isPermissionDialogOpen: boolean
+  isSystemPermissionDialogOpen: boolean
   requestOrigin?: 'audioinput' | 'videoinput'
   isCameraGranted: boolean
   isMicrophoneGranted: boolean
@@ -19,8 +24,11 @@ type State = {
 export const permissionsStore = proxy<State>({
   cameraPermission: undefined,
   microphonePermission: undefined,
+  cameraSystemDenied: false,
+  microphoneSystemDenied: false,
   isLoading: true,
   isPermissionDialogOpen: false,
+  isSystemPermissionDialogOpen: false,
   requestOrigin: undefined,
   get isCameraGranted() {
     return this.cameraPermission === 'granted'
@@ -45,10 +53,33 @@ export const permissionsStore = proxy<State>({
 export const openPermissionsDialog = (
   requestOrigin?: 'audioinput' | 'videoinput'
 ) => {
+  // When the block is at the OS level, browser-side instructions are
+  // useless — route to the system permissions dialog instead.
+  const systemBlocked =
+    requestOrigin === 'audioinput'
+      ? permissionsStore.microphoneSystemDenied
+      : requestOrigin === 'videoinput'
+        ? permissionsStore.cameraSystemDenied
+        : permissionsStore.microphoneSystemDenied ||
+          permissionsStore.cameraSystemDenied
+  if (systemBlocked) {
+    openSystemPermissionsDialog()
+    return
+  }
   permissionsStore.isPermissionDialogOpen = true
   permissionsStore.requestOrigin = requestOrigin
 }
 
+export const openSystemPermissionsDialog = () => {
+  // Never show both dialogs stacked: the system-level one wins.
+  permissionsStore.isPermissionDialogOpen = false
+  permissionsStore.isSystemPermissionDialogOpen = true
+}
+
+export const closeSystemPermissionsDialog = () => {
+  permissionsStore.isSystemPermissionDialogOpen = false
+}
+
 export const closePermissionsDialog = () => {
   permissionsStore.isPermissionDialogOpen = false
 }
@@ -100,36 +131,166 @@ const labelsVisible = async () => {
   }
 }
 
+/**
+ * Outcomes witnessed first-hand from getUserMedia this session. The
+ * Permissions API is a weaker signal in both directions on Firefox:
+ *
+ * - denials: Firefox < 151 keeps temporary (non-"remembered") denials at
+ *   'prompt' — the default mode on mobile — and some browsers cannot
+ *   query camera/microphone at all;
+ * - grants: one-time grants are coupled to the active capture, so the
+ *   query drops back to 'prompt' the moment a track stops (e.g. the user
+ *   toggling a device off), and the PermissionStatus change event
+ *   re-syncs at exactly that moment.
+ *
+ * Without this memory, every syncPermissions (focus, devicechange,
+ * status change) clobbers the state right back to 'prompt', which the UI
+ * renders as "permission needed" — mid-session, on devices that just
+ * worked. A queried 'prompt' therefore never downgrades a witnessed
+ * outcome; only hard evidence (a queried 'granted'/'denied', or the next
+ * gUM outcome) replaces it.
+ */
+const gumOutcome: Record<PermissionKind, 'granted' | 'denied' | undefined> = {
+  camera: undefined,
+  microphone: undefined,
+}
+
 export const syncPermissions = async () => {
   const [camera, microphone] = await Promise.all([
     queryPermission('camera'),
     queryPermission('microphone'),
   ])
-  if (camera && microphone) {
-    setPermissions({ camera, microphone })
-    return
-  }
-  const granted = await labelsVisible()
-  const resolve = (kind: PermissionKind, queried?: PermissionState) => {
-    if (queried) return queried
+  const granted = camera && microphone ? () => false : await labelsVisible()
+  const resolve = (
+    kind: PermissionKind,
+    queried?: PermissionState
+  ): PermissionState => {
+    // Hard evidence from the Permissions API wins in both directions.
+    if (queried === 'granted' || (!queried && granted(kind))) {
+      gumOutcome[kind] = 'granted'
+      return 'granted'
+    }
+    if (queried === 'denied') {
+      gumOutcome[kind] = 'denied'
+      return 'denied'
+    }
+    // 'prompt' (or no query support): a witnessed gUM outcome is the
+    // stronger signal — keep it.
+    if (gumOutcome[kind]) return gumOutcome[kind]
+    if (queried === 'prompt') return 'prompt'
     const current =
       kind === 'camera'
         ? permissionsStore.cameraPermission
         : permissionsStore.microphonePermission
     if (current === 'denied') return 'denied'
-    return granted(kind) ? 'granted' : 'prompt'
+    return 'prompt'
   }
-  setPermissions({
+  const resolved = {
     camera: resolve('camera', camera),
     microphone: resolve('microphone', microphone),
-  })
+  }
+  setPermissions(resolved)
 }
 
 export const notePermissionDeniedFromGum = (kind?: PermissionKind) => {
-  if (kind) {
-    setPermissions({ [kind]: 'denied' })
-    void syncPermissions()
-    return
+  // A combined audio+video request fails atomically: no kind means the
+  // denial covers both devices.
+  const kinds: PermissionKind[] = kind ? [kind] : ['microphone', 'camera']
+  const denied: Partial<Record<PermissionKind, PermissionState>> = {}
+  for (const k of kinds) {
+    gumOutcome[k] = 'denied'
+    denied[k] = 'denied'
+  }
+  setPermissions(denied)
+  void syncPermissions()
+}
+
+export type PermissionDeniedScope = 'browser' | 'system'
+
+/**
+ * Chromium reports OS-level blocks (macOS/Windows privacy settings) with an
+ * explicit, non-localized message: "Permission denied by system", as opposed
+ * to "Permission denied" for a browser-level block.
+ */
+export const isSystemPermissionError = (error: unknown): boolean =>
+  (error as Error)?.name === 'NotAllowedError' &&
+  /by system/i.test((error as Error)?.message ?? '')
+
+/**
+ * Decides whether a getUserMedia permission failure comes from the browser
+ * or from the OS. Fallback for non-Chromium browsers: gUM rejected with
+ * NotAllowedError although the browser-level permission is granted — the
+ * block can only come from the OS.
+ */
+export const classifyPermissionError = async (
+  error: unknown,
+  kind?: PermissionKind
+): Promise<PermissionDeniedScope> => {
+  if (isSystemPermissionError(error)) return 'system'
+  if ((error as Error)?.name !== 'NotAllowedError') return 'browser'
+  const kinds: PermissionKind[] = kind ? [kind] : ['microphone', 'camera']
+  const states = await Promise.all(kinds.map(queryPermission))
+  return states.every((state) => state === 'granted') ? 'system' : 'browser'
+}
+
+/**
+ * Firefox surfaces OS-level blocks as NotFoundError ("The object can not
+ * be found here.") instead of NotAllowedError.
+ *
+ * - macOS: tell it apart from a genuinely missing device — the device
+ *   still shows up in enumerateDevices.
+ * - Android: Fenix rejects with NotFoundError when the app itself lacks
+ *   the Android camera/mic permission (mozilla-mobile/fenix#15023), often
+ *   before any site prompt, and may hide the blocked devices from
+ *   enumerateDevices entirely. Phones and tablets always have both
+ *   devices, so "not found" there means an OS-level block, not missing
+ *   hardware.
+ */
+export const isLikelySystemNotFound = async (
+  error: unknown,
+  kind?: PermissionKind
+): Promise<boolean> => {
+  if ((error as Error)?.name !== 'NotFoundError') return false
+  if (!isFireFox()) return false
+  if (isAndroid()) return true
+  if (!isMacintosh()) return false
+  try {
+    const devices = await navigator.mediaDevices.enumerateDevices()
+    const deviceKinds = kind
+      ? [KIND_MAP[kind]]
+      : (['audioinput', 'videoinput'] as const)
+    return deviceKinds.every((deviceKind) =>
+      devices.some((device) => device.kind === deviceKind)
+    )
+  } catch {
+    return false
+  }
+}
+
+export const noteSystemPermissionDenied = (kind?: PermissionKind) => {
+  // Only flags the state (shown as the blocked-device hint on the toggle);
+  // the dialog itself opens when the user clicks the blocked toggle.
+  const kinds: PermissionKind[] = kind ? [kind] : ['microphone', 'camera']
+  for (const k of kinds) {
+    const key = k === 'camera' ? 'cameraSystemDenied' : 'microphoneSystemDenied'
+    permissionsStore[key] = true
   }
   void syncPermissions()
 }
+
+/**
+ * Successful acquisition proves the permission is granted and the OS no
+ * longer blocks the device — record it directly, since the Permissions
+ * API may still report 'prompt' (Firefox one-time grants).
+ */
+export const noteGumSuccess = (kind?: PermissionKind) => {
+  const kinds: PermissionKind[] = kind ? [kind] : ['microphone', 'camera']
+  const granted: Partial<Record<PermissionKind, PermissionState>> = {}
+  for (const k of kinds) {
+    gumOutcome[k] = 'granted'
+    granted[k] = 'granted'
+    if (k === 'camera') permissionsStore.cameraSystemDenied = false
+    else permissionsStore.microphoneSystemDenied = false
+  }
+  setPermissions(granted)
+}

src/frontend/src/stores/silentMic.ts

@@ -0,0 +1,98 @@
+import { proxy } from 'valtio'
+import { captureEvent } from '@/features/analytics/telemetry'
+
+const DISCARD_STORAGE_KEY = 'silent-mic-detection-discarded'
+
+/**
+ * One-shot UX check: a live microphone always produces at least a noise
+ * floor, so a mic that stays pinned to zero for a whole minute is not a
+ * quiet room — it is an OS-level permission block, a hardware mute
+ * switch, or a dead device. The check runs on the join screen and in
+ * the room until it settles:
+ *
+ *   watching → passed     first non-zero sample (check is over, no UI)
+ *   watching → silent     45s of accumulated zero signal (warning badge)
+ *   silent   → passed     sound finally arrives (warning auto-clears)
+ *   any      → discarded  user opts out (persisted on this browser)
+ */
+export type SilentMicStatus = 'watching' | 'silent' | 'passed' | 'discarded'
+
+const isDiscardPersisted = (): boolean => {
+  try {
+    return localStorage.getItem(DISCARD_STORAGE_KEY) === '1'
+  } catch {
+    return false
+  }
+}
+
+export const silentMicStore = proxy({
+  status: (isDiscardPersisted() ? 'discarded' : 'watching') as SilentMicStatus,
+  isDialogOpen: false,
+})
+
+const SILENT_DURATION_MS = 10_000
+
+// Accumulation is module state, not store state: it changes every tick
+// and must survive the join → room transition without re-rendering
+// anything.
+let silentMs = 0
+let watchedTrackId: string | undefined
+
+export type SilentMicSampleResult = 'silent-detected' | 'recovered' | null
+
+/**
+ * Feed one detection sample. Returns the transition it caused, so the
+ * caller can attach telemetry with its own context.
+ */
+export const reportMicSample = ({
+  trackId,
+  silent,
+  deltaMs,
+}: {
+  trackId?: string
+  silent: boolean
+  deltaMs: number
+}): SilentMicSampleResult => {
+  const { status } = silentMicStore
+  if (status === 'discarded' || status === 'passed') return null
+
+  if (trackId !== watchedTrackId) {
+    // New capture (device switch, re-acquire): fresh window.
+    watchedTrackId = trackId
+    silentMs = 0
+  }
+
+  if (!silent) {
+    silentMs = 0
+    silentMicStore.status = 'passed'
+    silentMicStore.isDialogOpen = false
+    return status === 'silent' ? 'recovered' : null
+  }
+
+  if (status !== 'watching') return null
+  silentMs += deltaMs
+  if (silentMs >= SILENT_DURATION_MS) {
+    silentMicStore.status = 'silent'
+    return 'silent-detected'
+  }
+  return null
+}
+
+export const openSilentMicDialog = () => {
+  silentMicStore.isDialogOpen = true
+}
+
+export const closeSilentMicDialog = () => {
+  silentMicStore.isDialogOpen = false
+}
+
+export const discardSilentMicDetection = () => {
+  silentMicStore.status = 'discarded'
+  silentMicStore.isDialogOpen = false
+  try {
+    localStorage.setItem(DISCARD_STORAGE_KEY, '1')
+  } catch {
+    /* private mode: the opt-out just won't persist */
+  }
+  captureEvent('silent-mic-discarded')
+}

src/frontend/src/stores/user.ts

@@ -20,7 +20,7 @@ function getUserState(): State {
     }
   } catch (error: unknown) {
     reportError('generic_failure', error, {
-      context: '[UserPreferencesStore] Failed to parse stored settings:',
+      context: '[UserStore] Failed to parse stored settings:',
     })
     return DEFAULT_STATE
   }

src/frontend/src/utils/os.ts

@@ -0,0 +1,17 @@
+export type OS = 'macos' | 'windows' | 'linux' | 'android' | 'other'
+
+export const isAndroid = (): boolean => /android/i.test(navigator.userAgent)
+
+export const getOS = (): OS => {
+  const source = `${
+    (navigator as { userAgentData?: { platform?: string } }).userAgentData
+      ?.platform ?? navigator.platform
+  } ${navigator.userAgent}`
+  // Android UAs also contain "Linux" (and desktop-mode ones may not say
+  // much else), so check it before the desktop platforms.
+  if (isAndroid()) return 'android'
+  if (/mac/i.test(source)) return 'macos'
+  if (/win/i.test(source)) return 'windows'
+  if (/linux|x11/i.test(source)) return 'linux'
+  return 'other'
+}

src/mail/package-lock.json

@@ -1,12 +1,12 @@
 {
   "name": "mail_mjml",
-  "version": "1.25.2",
+  "version": "1.26.0",
   "lockfileVersion": 3,
   "requires": true,
   "packages": {
     "": {
       "name": "mail_mjml",
-      "version": "1.25.2",
+      "version": "1.26.0",
       "license": "MIT",
       "dependencies": {
         "@html-to/text-cli": "0.6.0",

src/mail/package.json

@@ -1,6 +1,6 @@
 {
   "name": "mail_mjml",
-  "version": "1.25.2",
+  "version": "1.26.0",
   "description": "An util to generate html and text django's templates from mjml templates",
   "type": "module",
   "dependencies": {

src/sdk/package-lock.json

@@ -1,12 +1,12 @@
 {
   "name": "sdk",
-  "version": "1.25.2",
+  "version": "1.26.0",
   "lockfileVersion": 3,
   "requires": true,
   "packages": {
     "": {
       "name": "sdk",
-      "version": "1.25.2",
+      "version": "1.26.0",
       "license": "ISC",
       "workspaces": [
         "./library",

src/sdk/package.json

@@ -1,6 +1,6 @@
 {
   "name": "sdk",
-  "version": "1.25.2",
+  "version": "1.26.0",
   "author": "",
   "license": "ISC",
   "description": "",

src/summary/pyproject.toml

@@ -1,7 +1,7 @@
 
 [project]
 name = "summary"
-version = "1.25.2"
+version = "1.26.0"
 dependencies = [
     "fastapi[standard]>=0.105.0",
     "uvicorn>=0.24.0",