✨(frontend) introduce performance mode with auto-detection and telemetry

Provide CPU relief during video meetings for low-spec and constrained
devices by dynamically reducing video quality.

Context and motivation:

Video processing can be intensive on resource-constrained hardware.
To ensure accessibility on any device, this feature introduces both
automatic, proactive CPU-constraint detection and manual controls in
settings, so users can reduce CPU load while keeping control over
their experience.

Key changes:

* Performance mode store
  - Central, non-persisted store as the single source of truth for
    performance mode.
  - Decouples inputs (e.g. `CpuConstrainedObserver`, settings
    toggle) from effects (`PerformanceModeController` for publishing
    encodings, `VideoResolutionSubscription` for incoming quality
    caps).
  - Intentionally session-scoped to prevent sticky low-quality
    modes across meetings.

* Auto-detection and user toast notification
  - Automatically activate performance mode when the encoder
    reports CPU constraints.
  - Show a 30-second toast letting users override ("keep my
    quality"), which restores encodings and suppresses further
    auto-activations for the session.

* Video settings tab
  - Update the Videos tab in the settings so it reflects the
    current performance mode state and lets users toggle it
    manually.

* Hardware telemetry snapshot
  - Add a non-throwing, best-effort environment snapshot (core
    count, memory, battery status) attached to performance events,
    to help analyze hardware patterns across sessions.

CHANGELOG.md

@@ -8,6 +8,52 @@ and this project adheres to
 
 ## [Unreleased]
 
+### Added
+
+- ✨(frontend) introduce performance mode with auto-detection and telemetry
+
+### 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
+
+## [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",
@@ -22,7 +22,6 @@
         "@tanstack/react-query": "5.101.1",
         "@timephy/rnnoise-wasm": "1.0.0",
         "crisp-sdk-web": "1.1.2",
-        "derive-valtio": "0.2.0",
         "hoofd": "1.7.3",
         "humanize-duration": "3.33.2",
         "i18next": "26.3.1",
@@ -4710,15 +4709,6 @@
         "node": ">= 0.8"
       }
     },
-    "node_modules/derive-valtio": {
-      "version": "0.2.0",
-      "resolved": "https://registry.npmjs.org/derive-valtio/-/derive-valtio-0.2.0.tgz",
-      "integrity": "sha512-6slhaFHtfaL3t5dLYaQt6s4G2xZymhu0Ktdl7OMeVk8+46RgR8ft6FL0Tr4F31W+yPH03nJe1SSP4JFy2hSMRA==",
-      "license": "MIT",
-      "peerDependencies": {
-        "valtio": ">=2.0.0-rc.0"
-      }
-    },
     "node_modules/detect-libc": {
       "version": "2.1.2",
       "resolved": "https://registry.npmjs.org/detect-libc/-/detect-libc-2.1.2.tgz",

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",
@@ -29,7 +29,6 @@
     "@tanstack/react-query": "5.101.1",
     "@timephy/rnnoise-wasm": "1.0.0",
     "crisp-sdk-web": "1.1.2",
-    "derive-valtio": "0.2.0",
     "hoofd": "1.7.3",
     "humanize-duration": "3.33.2",
     "i18next": "26.3.1",

src/frontend/src/components/SoundTester.tsx

@@ -2,24 +2,31 @@ import { Button } from '@/primitives'
 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) {
-        console.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 () {})
@@ -28,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}
@@ -44,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/hardware.ts

@@ -0,0 +1,68 @@
+export interface HardwareSnapshot {
+  /** navigator.hardwareConcurrency — logical CPU cores. */
+  cpu_cores: number | null
+  /** navigator.deviceMemory — RAM in GiB, bucketed by the browser (Chromium only). */
+  device_memory_gb: number | null
+  /** performance.memory.jsHeapSizeLimit in MB (Chromium only, non-standard). */
+  js_heap_limit_mb: number | null
+  /** performance.memory.usedJSHeapSize in MB (Chromium only, non-standard). */
+  js_heap_used_mb: number | null
+  /** Battery level 0..1 via navigator.getBattery() (Chromium only). */
+  battery_level: number | null
+  /** Whether the device is plugged in, via navigator.getBattery(). */
+  battery_charging: boolean | null
+}
+
+const BATTERY_TIMEOUT_MS = 1_000
+
+const toMb = (bytes: unknown): number | null =>
+  typeof bytes === 'number' ? Math.round(bytes / (1024 * 1024)) : null
+
+export const collectHardwareSnapshot = async (): Promise<HardwareSnapshot> => {
+  const snapshot: HardwareSnapshot = {
+    cpu_cores: null,
+    device_memory_gb: null,
+    js_heap_limit_mb: null,
+    js_heap_used_mb: null,
+    battery_level: null,
+    battery_charging: null,
+  }
+
+  try {
+    snapshot.cpu_cores = navigator.hardwareConcurrency ?? null
+
+    const nav = navigator as Navigator & {
+      deviceMemory?: number
+      userAgentData?: { mobile?: boolean; platform?: string }
+      getBattery?: () => Promise<{ level: number; charging: boolean }>
+    }
+
+    snapshot.device_memory_gb = nav.deviceMemory ?? null
+
+    const memory = (
+      performance as Performance & {
+        memory?: { jsHeapSizeLimit?: number; usedJSHeapSize?: number }
+      }
+    ).memory
+    snapshot.js_heap_limit_mb = toMb(memory?.jsHeapSizeLimit)
+    snapshot.js_heap_used_mb = toMb(memory?.usedJSHeapSize)
+
+    if (typeof nav.getBattery === 'function') {
+      // getBattery can hang on some platforms — don't let it delay the event.
+      const battery = await Promise.race([
+        nav.getBattery(),
+        new Promise<null>((resolve) =>
+          setTimeout(() => resolve(null), BATTERY_TIMEOUT_MS)
+        ),
+      ]).catch(() => null)
+      if (battery) {
+        snapshot.battery_level = battery.level
+        snapshot.battery_charging = battery.charging
+      }
+    }
+  } catch {
+    // telemetry must never break the app
+  }
+
+  return snapshot
+}

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

@@ -1,15 +1,8 @@
 import { useEffect } from 'react'
-import { useLocation } from 'wouter'
-import { type PostHog } from 'posthog-js'
 import { type ApiUser } from '@/features/auth/api/ApiUser'
 import { useUser } from '@/features/auth/api/useUser'
-
-let posthog: PostHog | null = null
-
-const getPosthog = async () => {
-  if (!posthog) posthog = (await import('posthog-js')).default
-  return posthog
-}
+import { getPosthog } from '../utils'
+import { filterExceptions } from '../exceptionFilters'
 
 export const startAnalyticsSession = (data: ApiUser) => {
   getPosthog().then((ph) => {
@@ -38,7 +31,6 @@ export const useAnalytics = ({
   flags_api_host,
   isDisabled,
 }: useAnalyticsProps) => {
-  const [location] = useLocation()
   const { user } = useUser()
 
   useEffect(() => {
@@ -49,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])
@@ -58,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

@@ -0,0 +1,149 @@
+import { getPosthog } from './utils'
+
+export const captureEvent = (
+  event: string,
+  props?: Record<string, unknown>
+) => {
+  void getPosthog()
+    .then((ph) => {
+      ph.capture(event, props)
+    })
+    .catch(() => {
+      /* telemetry must never break the app */
+    })
+  if (import.meta.env.DEV) {
+    console.warn(`[telemetry] ${event}`, props)
+  }
+}
+
+export type LogCode =
+  // media
+  | 'join_preview_failure'
+  | 'room_media_failure'
+  | 'livekit_room_error'
+  | 'device_switch_failure'
+  | 'permission_poll_failure'
+  // non-media families
+  | 'participant_mute_api_failure'
+  | 'permissions_api_failure'
+  | 'effects_processor_failure'
+  | 'clipboard_failure'
+  | 'fullscreen_failure'
+  | 'publish_sources_failure'
+  | 'performance_mode_failure'
+  | 'disconnect_failure'
+  | 'generic_failure'
+
+export const reportError = (
+  logCode: LogCode,
+  error: unknown,
+  extraInfo: Record<string, unknown> = {}
+): void => {
+  const e = error instanceof Error ? error : new Error(String(error))
+  void getPosthog()
+    .then((ph) => {
+      ph.captureException(e, {
+        log_code: logCode,
+        error_name: e.name,
+        error_message: e.message,
+        ...extraInfo,
+      })
+    })
+    .catch(() => {})
+  if (import.meta.env.DEV) {
+    console.warn(`[${logCode}]`, e, extraInfo)
+  }
+}
+
+export interface DeviceSnapshot {
+  cam_count: number
+  mic_count: number
+  out_count: number
+  labels_visible: boolean
+  saved_cam_present: boolean | null
+  saved_mic_present: boolean | null
+  saved_video_device_id_set: boolean
+  saved_audio_device_id_set: boolean
+  audio_enabled: boolean | null
+  video_enabled: boolean | null
+  cam_permission: PermissionState | 'unknown'
+  mic_permission: PermissionState | 'unknown'
+}
+
+/** Reads the persisted LiveKit user choices without importing the store. */
+const readPersistedChoices = (): {
+  videoDeviceId?: string
+  audioDeviceId?: string
+  videoEnabled?: boolean
+  audioEnabled?: boolean
+} => {
+  try {
+    return JSON.parse(localStorage.getItem('lk-user-choices') ?? '{}')
+  } catch {
+    return {}
+  }
+}
+
+const queryPermission = async (
+  name: 'camera' | 'microphone'
+): Promise<PermissionState | 'unknown'> => {
+  try {
+    const status = await navigator.permissions.query({
+      name: name as PermissionName,
+    })
+    return status.state
+  } catch {
+    return 'unknown'
+  }
+}
+
+export const deviceSnapshot = async (): Promise<DeviceSnapshot> => {
+  const choices = readPersistedChoices()
+  let devices: MediaDeviceInfo[] = []
+  try {
+    devices = await navigator.mediaDevices.enumerateDevices()
+  } catch {
+    /* snapshot stays partial */
+  }
+  const ofKind = (k: MediaDeviceKind) => devices.filter((d) => d.kind === k)
+  const present = (k: MediaDeviceKind, id?: string) =>
+    id ? ofKind(k).some((d) => d.deviceId === id) : null
+
+  const [cam_permission, mic_permission] = await Promise.all([
+    queryPermission('camera'),
+    queryPermission('microphone'),
+  ])
+
+  return {
+    cam_count: ofKind('videoinput').length,
+    mic_count: ofKind('audioinput').length,
+    out_count: ofKind('audiooutput').length,
+    labels_visible: devices.some((d) => !!d.label),
+    saved_cam_present: present('videoinput', choices.videoDeviceId),
+    saved_mic_present: present('audioinput', choices.audioDeviceId),
+    saved_video_device_id_set: !!choices.videoDeviceId,
+    saved_audio_device_id_set: !!choices.audioDeviceId,
+    audio_enabled: choices.audioEnabled ?? null,
+    video_enabled: choices.videoEnabled ?? null,
+    cam_permission,
+    mic_permission,
+  }
+}
+
+export const captureMediaEvent = async (
+  event:
+    | 'media-device-error'
+    | 'media-acquisition'
+    | 'media-device-topology'
+    | 'media-device-success'
+    | 'device-not-found'
+    | 'permissions-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/analytics/utils.ts

@@ -0,0 +1,8 @@
+import type { PostHog } from 'posthog-js'
+
+let posthog: PostHog | null = null
+
+export const getPosthog = async () => {
+  if (!posthog) posthog = (await import('posthog-js')).default
+  return posthog
+}

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,6 +15,7 @@ import { css } from '@/styled-system/css'
 import { useConfig } from '@/api/useConfig'
 import { LoginButton } from '@/components/LoginButton'
 import { LoadingScreen } from '@/components/LoadingScreen'
+import { captureEvent } from '@/features/analytics/telemetry'
 
 const Columns = ({ children }: { children?: ReactNode }) => {
   return (
@@ -160,7 +161,11 @@ const Home = () => {
           window.location.replace(data.external_home_url)
         } catch (error) {
           setRedirectFailed(true)
-          console.error('Site is not reachable:', error)
+          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/NotificationDuration.ts

@@ -3,6 +3,7 @@ export enum ToastDuration {
   MEDIUM = 4000,
   LONG = 5000,
   EXTRA_LONG = 7000,
+  UNDO_WINDOW = 30000,
 }
 
 export const NotificationDuration = {
@@ -15,4 +16,5 @@ export const NotificationDuration = {
   REACTION_RECEIVED: ToastDuration.SHORT,
   RECORDING_REQUESTED: ToastDuration.LONG,
   ROLE_CHANGED: ToastDuration.LONG,
+  CPU_CONSTRAINED: ToastDuration.UNDO_WINDOW,
 } as const

src/frontend/src/features/notifications/NotificationType.ts

@@ -18,4 +18,5 @@ export enum NotificationType {
   RecordingSaving = 'recordingSaving',
   PermissionsRemoved = 'permissionsRemoved',
   RoleChanged = 'roleChanged',
+  CpuConstrained = 'cpuConstrained',
 }

src/frontend/src/features/notifications/components/ToastCpuConstrained.tsx

@@ -0,0 +1,61 @@
+import { useToast } from 'react-aria'
+import { useRef } from 'react'
+
+import { type ToastProps } from './Toast'
+import { VStack } from '@/styled-system/jsx'
+import { useTranslation } from 'react-i18next'
+import { Button, Text } from '@/primitives'
+import { css } from '@/styled-system/css'
+import { StyledToastContainer } from './StyledToastContainer'
+import { disablePerformanceMode } from '@/stores/performanceMode'
+import { captureEvent } from '@/features/analytics/telemetry'
+
+// todo - make it closable
+export function ToastCpuConstrained({ state, ...props }: Readonly<ToastProps>) {
+  const { t } = useTranslation('notifications', {
+    keyPrefix: 'cpuConstrained',
+  })
+  const ref = useRef(null)
+  const { toastProps, contentProps } = useToast(props, state, ref)
+  const toast = props.toast
+
+  const handleKeepQuality = () => {
+    captureEvent('cpu-constrained-degradation-cancelled')
+    disablePerformanceMode({ declinedAuto: true })
+    state.close(toast.key)
+  }
+
+  return (
+    <StyledToastContainer {...toastProps} ref={ref}>
+      <VStack
+        justify="start"
+        alignItems="self-start"
+        {...contentProps}
+        maxWidth="370px"
+        gap="0.75rem"
+        padding={14}
+      >
+        <Text
+          margin={false}
+          className={css({
+            wordBreak: 'break-word',
+            overflowWrap: 'break-word',
+            whiteSpace: 'normal',
+          })}
+        >
+          {t('message')}
+        </Text>
+        <Button
+          size="sm"
+          variant="text"
+          className={css({
+            color: 'primary.300',
+          })}
+          onPress={() => handleKeepQuality()}
+        >
+          {t('keepQuality')}
+        </Button>
+      </VStack>
+    </StyledToastContainer>
+  )
+}

src/frontend/src/features/notifications/components/ToastRegion.tsx

@@ -15,6 +15,7 @@ import { ToastPermissionsRemoved } from './ToastPermissionsRemoved'
 import { ToastRecordingRequest } from './ToastRecordingRequest'
 import { ToastAutoMuteLargeRoom } from './ToastAutoMuteLargeRoom'
 import { ToastRoleChanged } from '@/features/notifications/components/ToastRoleChanged'
+import { ToastCpuConstrained } from './ToastCpuConstrained'
 
 interface ToastRegionProps extends AriaToastRegionProps {
   state: ToastState<ToastData>
@@ -74,6 +75,9 @@ const renderToast = (
     case NotificationType.RoleChanged:
       return <ToastRoleChanged key={toast.key} toast={toast} state={state} />
 
+    case NotificationType.CpuConstrained:
+      return <ToastCpuConstrained key={toast.key} toast={toast} state={state} />
+
     default:
       return <Toast key={toast.key} toast={toast} state={state} />
   }

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/notifications/utils.ts

@@ -4,6 +4,7 @@ import { NotificationDuration } from './NotificationDuration'
 import type { Participant } from 'livekit-client'
 import type { NotificationPayload } from './NotificationPayload'
 import type { RecordingMode } from '@/features/recording'
+import { reportError } from '@/features/analytics/telemetry'
 
 export const notifyAutoMutedOnJoin = () => {
   toastQueue.add(
@@ -14,6 +15,15 @@ export const notifyAutoMutedOnJoin = () => {
   )
 }
 
+export const notifyCpuConstrained = () => {
+  toastQueue.add(
+    {
+      type: NotificationType.CpuConstrained,
+    },
+    { timeout: NotificationDuration.CPU_CONSTRAINED }
+  )
+}
+
 export const showLowerHandToast = (
   participant: Participant,
   onClose: () => void
@@ -55,7 +65,9 @@ export const decodeNotificationDataReceived = (
     return parsed as NotificationPayload
   } catch (error) {
     // Handle errors appropriately for your application
-    console.error('Failed to decode notification payload:', error)
+    reportError('generic_failure', error, {
+      context: 'Failed to decode notification payload:',
+    })
     return
   }
 }

src/frontend/src/features/participants/api/lowerHandParticipants.ts

@@ -1,5 +1,6 @@
 import type { Participant } from 'livekit-client'
 import { useLowerHandParticipant } from './lowerHandParticipant'
+import { reportError } from '@/features/analytics/telemetry'
 
 export const useLowerHandParticipants = () => {
   const { lowerHandParticipant } = useLowerHandParticipant()
@@ -11,7 +12,9 @@ export const useLowerHandParticipants = () => {
       )
       return Promise.all(promises)
     } catch (error) {
-      console.error('An error occurred while lowering hands :', error)
+      reportError('generic_failure', error, {
+        context: 'An error occurred while lowering hands :',
+      })
       throw new Error('An error occurred while lowering hands.', {
         cause: error,
       })

src/frontend/src/features/participants/api/updateParticipantRole.ts

@@ -1,6 +1,7 @@
 import { fetchApi } from '@/api/fetchApi'
 import { useRoomData } from '@/features/rooms/livekit/hooks/useRoomData'
 import { AssignableParticipantRole } from '@/features/rooms/api/ApiRoom'
+import { reportError } from '@/features/analytics/telemetry'
 
 export const useParticipantRole = () => {
   const data = useRoomData()
@@ -22,8 +23,11 @@ export const useParticipantRole = () => {
         }),
       })
     } catch (error) {
-      console.error(
-        `Failed to update participant's role ${identity}: ${error instanceof Error ? error.message : 'Unknown error'}`
+      reportError(
+        'generic_failure',
+        new Error(
+          `Failed to update participant's role ${identity}: ${error instanceof Error ? error.message : 'Unknown error'}`
+        )
       )
     }
   }

src/frontend/src/features/participants/hooks/useWaitingParticipants.ts

@@ -10,6 +10,7 @@ import {
 } from '../../participants/api/listWaitingParticipants'
 import { decodeNotificationDataReceived } from '@/features/notifications/utils'
 import { NotificationType } from '@/features/notifications/NotificationType'
+import { reportError } from '@/features/analytics/telemetry'
 
 export const POLL_INTERVAL_MS = 1000
 
@@ -87,7 +88,7 @@ export const useWaitingParticipants = () => {
 
       await refetchWaiting()
     } catch (e) {
-      console.error(e)
+      reportError('generic_failure', e)
       setListEnabled(true)
     }
   }

src/frontend/src/features/performance/components/CpuConstrainedObserver.tsx

@@ -0,0 +1,71 @@
+import { useEffect, useRef } from 'react'
+import { useRoomContext } from '@livekit/components-react'
+import {
+  LocalTrackPublication,
+  LocalVideoTrack,
+  ParticipantEvent,
+  Track,
+} from 'livekit-client'
+
+import { captureEvent } from '@/features/analytics/telemetry'
+import { collectHardwareSnapshot } from '@/features/analytics/hardware'
+import { notifyCpuConstrained } from '@/features/notifications/utils'
+import { isFireFox } from '@/utils/livekit'
+import {
+  enablePerformanceMode,
+  performanceModeStore,
+} from '@/stores/performanceMode'
+
+export const CpuConstrainedObserver = () => {
+  const room = useRoomContext()
+  const degradedTracksRef = useRef(new WeakSet<LocalVideoTrack>())
+
+  useEffect(() => {
+    const localParticipant = room.localParticipant
+
+    const handleCpuConstrained = (
+      track: LocalVideoTrack,
+      publication: LocalTrackPublication
+    ) => {
+      const { enabled, userDeclinedAuto } = performanceModeStore
+
+      const shouldDegrade =
+        publication.source === Track.Source.Camera &&
+        !enabled &&
+        !userDeclinedAuto &&
+        !degradedTracksRef.current.has(track)
+
+      void collectHardwareSnapshot().then((hardware) => {
+        captureEvent('cpu-constrained', {
+          firefox: isFireFox(),
+          source: publication.source,
+          degraded: shouldDegrade,
+          trackOptions: publication.options,
+          performance_mode_enabled: enabled,
+          user_declined_auto: userDeclinedAuto,
+          ...hardware,
+        })
+      })
+
+      if (!shouldDegrade) return
+      degradedTracksRef.current.add(track)
+
+      enablePerformanceMode('cpu')
+      notifyCpuConstrained()
+    }
+
+    localParticipant.on(
+      ParticipantEvent.LocalTrackCpuConstrained,
+      handleCpuConstrained
+    )
+
+    return () => {
+      localParticipant.off(
+        ParticipantEvent.LocalTrackCpuConstrained,
+        handleCpuConstrained
+      )
+    }
+  }, [room])
+
+  return null
+}

src/frontend/src/features/performance/components/PerformanceModeController.tsx

@@ -0,0 +1,108 @@
+import { useEffect } from 'react'
+import { useRoomContext } from '@livekit/components-react'
+import {
+  LocalTrackPublication,
+  LocalVideoTrack,
+  ParticipantEvent,
+  Track,
+  TrackEvent,
+} from 'livekit-client'
+import { useSnapshot } from 'valtio'
+import { reportError } from '@/features/analytics/telemetry'
+import {
+  disablePerformanceMode,
+  performanceModeStore,
+} from '@/stores/performanceMode'
+import { degradeVideoTrack, restoreVideoTrack } from '../degradation'
+
+/** Delay to re-apply degradation after restart to avoid racing LiveKit's encoding recompute. */
+const REAPPLY_AFTER_RESTART_MS = 1_000
+
+/** Syncs performance mode store state to outbound camera track encoding settings. */
+export const PerformanceModeController = () => {
+  const room = useRoomContext()
+  const { enabled } = useSnapshot(performanceModeStore)
+
+  // Manage degradation application and track lifecycle events
+  useEffect(() => {
+    const localParticipant = room.localParticipant
+
+    const getCameraTrack = () => {
+      const pub = localParticipant.getTrackPublication(Track.Source.Camera)
+      return pub?.track instanceof LocalVideoTrack ? pub.track : null
+    }
+
+    const track = getCameraTrack()
+
+    // Restore track quality if performance mode is disabled
+    if (!enabled) {
+      if (track) {
+        restoreVideoTrack(track).catch((err) =>
+          reportError('performance_mode_failure', err, { action: 'restore' })
+        )
+      }
+      return
+    }
+
+    const applyDegradation = (t: LocalVideoTrack, action = 'degrade') => {
+      degradeVideoTrack(t).catch((err) =>
+        reportError('performance_mode_failure', err, { action })
+      )
+    }
+
+    // Re-apply degradation after track restarts (e.g. device/resolution changes)
+    const watchTrackRestart = (t: LocalVideoTrack) => {
+      let timeoutId: ReturnType<typeof setTimeout>
+      const onRestarted = () => {
+        clearTimeout(timeoutId)
+        timeoutId = setTimeout(() => {
+          if (performanceModeStore.enabled) applyDegradation(t, 'reapply')
+        }, REAPPLY_AFTER_RESTART_MS)
+      }
+      t.on(TrackEvent.Restarted, onRestarted)
+      return () => {
+        clearTimeout(timeoutId)
+        t.off(TrackEvent.Restarted, onRestarted)
+      }
+    }
+
+    let unwatchRestart: (() => void) | undefined
+
+    if (track) {
+      applyDegradation(track)
+      unwatchRestart = watchTrackRestart(track)
+    }
+
+    // Apply degradation to newly published camera tracks
+    const handlePublished = (pub: LocalTrackPublication) => {
+      if (
+        pub.source === Track.Source.Camera &&
+        pub.track instanceof LocalVideoTrack
+      ) {
+        unwatchRestart?.()
+        applyDegradation(pub.track)
+        unwatchRestart = watchTrackRestart(pub.track)
+      }
+    }
+    localParticipant.on(ParticipantEvent.LocalTrackPublished, handlePublished)
+
+    return () => {
+      localParticipant.off(
+        ParticipantEvent.LocalTrackPublished,
+        handlePublished
+      )
+      unwatchRestart?.()
+    }
+  }, [room, enabled])
+
+  // Reset auto (CPU-triggered) performance mode on unmount/leave room
+  useEffect(() => {
+    return () => {
+      if (performanceModeStore.trigger === 'cpu') {
+        disablePerformanceMode()
+      }
+    }
+  }, [])
+
+  return null
+}

src/frontend/src/features/performance/degradation.ts

@@ -0,0 +1,126 @@
+import { LocalVideoTrack } from 'livekit-client'
+import { isFireFox } from '@/utils/livekit'
+
+/** Target degraded encoding for layer 0 (~360p @ 15fps, ≤300kbps). */
+export const DEGRADED_MAX_HEIGHT = 360
+export const DEGRADED_MAX_FRAMERATE = 15
+export const DEGRADED_MAX_BITRATE = 300_000
+
+/**
+ * Firefox ignores `active = false` on RTCRtpSender.
+ * We starve higher layers using LiveKit's sentinel workaround values instead.
+ */
+const FF_DISABLED_SCALE_DOWN = 4
+const FF_DISABLED_MAX_BITRATE = 10
+const FF_DISABLED_MAX_FRAMERATE = 2
+
+type SavedEncoding = Pick<
+  RTCRtpEncodingParameters,
+  'active' | 'scaleResolutionDownBy' | 'maxBitrate' | 'maxFramerate'
+>
+
+/** Pre-degradation encoding snapshots keyed by track to prevent leaks. */
+const savedEncodingsByTrack = new WeakMap<LocalVideoTrack, SavedEncoding[]>()
+
+export const isTrackDegraded = (track: LocalVideoTrack) =>
+  savedEncodingsByTrack.has(track)
+
+/**
+ * Revertibly degrades local video quality without unpublishing.
+ * Avoids `prioritizePerformance()` because its internal flag disables dynacast permanently.
+ *
+ * - Layer 0: Capped to 360p / 15fps / 300kbps.
+ * - Other layers: Set to `active: false` (or starved on Firefox).
+ */
+export const degradeVideoTrack = async (track: LocalVideoTrack) => {
+  const sender = track.sender
+  if (!sender) {
+    throw new Error('sender not found')
+  }
+
+  const params = sender.getParameters()
+  if (!params.encodings || params.encodings.length === 0) {
+    return
+  }
+
+  // Snapshot once so re-applications don't overwrite pristine encodings
+  if (!savedEncodingsByTrack.has(track)) {
+    savedEncodingsByTrack.set(
+      track,
+      params.encodings.map((e) => ({
+        active: e.active,
+        scaleResolutionDownBy: e.scaleResolutionDownBy,
+        maxBitrate: e.maxBitrate,
+        maxFramerate: e.maxFramerate,
+      }))
+    )
+  }
+
+  const captureHeight =
+    track.mediaStreamTrack.getSettings().height ?? DEGRADED_MAX_HEIGHT
+
+  params.encodings = params.encodings.map((encoding, idx) => {
+    if (idx === 0) {
+      return {
+        ...encoding,
+        active: true,
+        scaleResolutionDownBy: Math.max(
+          1,
+          Math.ceil(captureHeight / DEGRADED_MAX_HEIGHT)
+        ),
+        maxFramerate: DEGRADED_MAX_FRAMERATE,
+        maxBitrate: Math.min(
+          encoding.maxBitrate ?? DEGRADED_MAX_BITRATE,
+          DEGRADED_MAX_BITRATE
+        ),
+      }
+    }
+
+    if (isFireFox()) {
+      const starved: RTCRtpEncodingParameters = {
+        ...encoding,
+        // Firefox workaround: active=false prevents LiveKit re-encodes, while starved values limit bitrate
+        active: false,
+        scaleResolutionDownBy: FF_DISABLED_SCALE_DOWN,
+        maxBitrate: FF_DISABLED_MAX_BITRATE,
+        maxFramerate: FF_DISABLED_MAX_FRAMERATE,
+      }
+      // LiveKit legacy property fallback for Firefox
+      ;(starved as Record<string, unknown>).maxFrameRate =
+        FF_DISABLED_MAX_FRAMERATE
+      return starved
+    }
+
+    return { ...encoding, active: false }
+  })
+
+  await sender.setParameters(params)
+}
+
+/** Restores encodings captured prior to degradation. */
+export const restoreVideoTrack = async (track: LocalVideoTrack) => {
+  const saved = savedEncodingsByTrack.get(track)
+  savedEncodingsByTrack.delete(track)
+
+  const sender = track.sender
+  if (!saved || !sender) {
+    return
+  }
+
+  const params = sender.getParameters()
+  if (!params.encodings || params.encodings.length !== saved.length) {
+    return
+  }
+
+  params.encodings = params.encodings.map((encoding, idx) => {
+    const restored: RTCRtpEncodingParameters = {
+      ...encoding,
+      ...saved[idx],
+    }
+    // Clean up Firefox legacy property if set during degradation
+    ;(restored as Record<string, unknown>).maxFrameRate = undefined
+    return restored
+  })
+
+  await sender.setParameters(params)
+}

src/frontend/src/features/pip/components/PictureInPicturePortal.tsx

@@ -7,7 +7,9 @@ import { useEffect, useMemo } from 'react'
 import { CrossDocumentOverlaysContext } from '@/primitives/CrossDocumentOverlaysContext'
 
 const InternalPortal = ({ children }: { children: React.ReactNode }) => {
-  const pipStoreSnap = useSnapshot(documentPictureInPictureStore)
+  const pipStoreSnap = useSnapshot(documentPictureInPictureStore, {
+    sync: true,
+  })
 
   const container = useMemo(() => {
     return pipStoreSnap?.window?.document.getElementById('root')
@@ -19,7 +21,7 @@ const InternalPortal = ({ children }: { children: React.ReactNode }) => {
     }
   }, [])
 
-  if (!container) return null
+  if (!container || !container.isConnected) return null
 
   return createPortal(
     /**

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

@@ -1,7 +1,9 @@
 import { ref, useSnapshot } from 'valtio'
 import { useCallback, useMemo } from 'react'
+import { flushSync } from 'react-dom'
 import { documentPictureInPictureStore } from '@/stores/documentPictureInPicture'
 import { useTranslation } from 'react-i18next'
+import { reportError } from '@/features/analytics/telemetry'
 
 export const IS_PIP_SUPPORTED =
   typeof globalThis !== 'undefined' && 'documentPictureInPicture' in globalThis
@@ -59,21 +61,29 @@ 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)
 
         const cleanUp = () => {
           if (documentPictureInPictureStore.window === pipWindow) {
-            documentPictureInPictureStore.window = null
+            flushSync(() => {
+              documentPictureInPictureStore.window = null
+            })
           }
         }
         pipWindow.addEventListener('pagehide', () => cleanUp(), { once: true })
@@ -82,8 +92,10 @@ export const usePictureInPicture = () => {
         })
         documentPictureInPictureStore.window = ref(pipWindow)
       } catch (error) {
-        // Avoid unhandled rejections if the user blocks or closes the request.
-        console.error('Failed to open Picture-in-Picture window', error)
+        reportError('generic_failure', error, {
+          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/recording/components/ScreenRecordingSidePanel.tsx

@@ -16,7 +16,6 @@ import {
   notifyRecordingSaveInProgress,
   useNotifyParticipants,
 } from '@/features/notifications'
-import posthog from 'posthog-js'
 import { useConfig } from '@/api/useConfig'
 import { NoAccessView } from './NoAccessView'
 import { ControlsButton } from './ControlsButton'
@@ -29,6 +28,7 @@ import { useSidePanel } from '@/features/rooms/livekit/hooks/useSidePanel'
 import { useIsAdminOrOwner } from '@/features/rooms/livekit/hooks/useIsAdminOrOwner'
 import { FeatureFlags } from '@/features/analytics/enums'
 import { LimitDescription } from './LimitDescription'
+import { captureEvent, reportError } from '@/features/analytics/telemetry'
 
 export const ScreenRecordingSidePanel = () => {
   const { data } = useConfig()
@@ -63,7 +63,7 @@ export const ScreenRecordingSidePanel = () => {
     await notifyParticipants({
       type: NotificationType.ScreenRecordingRequested,
     })
-    posthog.capture('screen-recording-requested', {})
+    captureEvent('screen-recording-requested', {})
   }
 
   const handleScreenRecording = async () => {
@@ -100,13 +100,15 @@ export const ScreenRecordingSidePanel = () => {
         await notifyParticipants({
           type: NotificationType.ScreenRecordingStarted,
         })
-        posthog.capture('screen-recording-started', {
+        captureEvent('screen-recording-started', {
           includeTranscript: includeTranscript,
           language: selectedLanguageKey,
         })
       }
     } catch (error) {
-      console.error('Failed to handle recording:', error)
+      reportError('generic_failure', error, {
+        context: 'Failed to handle recording:',
+      })
     }
   }
 

src/frontend/src/features/recording/components/TranscriptSidePanel.tsx

@@ -17,7 +17,6 @@ import {
   useNotifyParticipants,
   notifyRecordingSaveInProgress,
 } from '@/features/notifications'
-import posthog from 'posthog-js'
 import { useConfig } from '@/api/useConfig'
 import { VStack } from '@/styled-system/jsx'
 import { Checkbox } from '@/primitives/Checkbox.tsx'
@@ -35,6 +34,7 @@ import { useSidePanel } from '@/features/rooms/livekit/hooks/useSidePanel'
 import { useIsAdminOrOwner } from '@/features/rooms/livekit/hooks/useIsAdminOrOwner'
 import { LimitDescription } from './LimitDescription'
 import { openSettingsDialog } from '@/stores/settings'
+import { captureEvent, reportError } from '@/features/analytics/telemetry'
 
 export const TranscriptSidePanel = () => {
   const { data } = useConfig()
@@ -76,7 +76,7 @@ export const TranscriptSidePanel = () => {
     await notifyParticipants({
       type: NotificationType.TranscriptionRequested,
     })
-    posthog.capture('transcript-requested', {})
+    captureEvent('transcript-requested', {})
   }
 
   const handleTranscript = async () => {
@@ -121,13 +121,15 @@ export const TranscriptSidePanel = () => {
         await notifyParticipants({
           type: NotificationType.TranscriptionStarted,
         })
-        posthog.capture('transcript-started', {
+        captureEvent('transcript-started', {
           includeScreenRecording: includeScreenRecording,
           language: selectedLanguageKey,
         })
       }
     } catch (error) {
-      console.error('Failed to handle transcript:', error)
+      reportError('generic_failure', error, {
+        context: 'Failed to handle transcript:',
+      })
     }
   }
 

src/frontend/src/features/recording/hooks/useRoomMetadata.ts

@@ -1,5 +1,6 @@
 import { useRoomInfo } from '@livekit/components-react'
 import { useMemo } from 'react'
+import { reportError } from '@/features/analytics/telemetry'
 
 export const useRoomMetadata = () => {
   const { metadata } = useRoomInfo()
@@ -8,7 +9,9 @@ export const useRoomMetadata = () => {
       try {
         return JSON.parse(metadata)
       } catch (error) {
-        console.error('Failed to parse room metadata:', error)
+        reportError('generic_failure', error, {
+          context: 'Failed to parse room metadata:',
+        })
         return undefined
       }
     } else {

src/frontend/src/features/rooms/api/muteParticipant.ts

@@ -9,6 +9,7 @@ import { fetchApi } from '@/api/fetchApi'
 import { useIsAdminOrOwner } from '../livekit/hooks/useIsAdminOrOwner'
 
 import { useCallback } from 'react'
+import { reportError } from '@/features/analytics/telemetry'
 
 export const useMuteParticipant = () => {
   const apiRoomData = useRoomData()
@@ -31,7 +32,10 @@ export const useMuteParticipant = () => {
 
       // Guard against undefined token for non-admin users
       if (!isAdminOrOwner && !apiRoomData.livekit.token) {
-        console.error('Cannot mute participant: missing auth token')
+        reportError(
+          'participant_mute_api_failure',
+          new Error('Cannot mute participant: missing auth token')
+        )
         return
       }
 
@@ -53,8 +57,11 @@ export const useMuteParticipant = () => {
           }
         )
       } catch (error) {
-        console.error(
-          `Failed to mute participant ${participant.identity}: ${error instanceof Error ? error.message : 'Unknown error'}`
+        reportError(
+          'participant_mute_api_failure',
+          new Error(
+            `Failed to mute participant ${participant.identity}: ${error instanceof Error ? error.message : 'Unknown error'}`
+          )
         )
         return
       }
@@ -65,8 +72,11 @@ export const useMuteParticipant = () => {
           destinationIdentities: [participant.identity],
         })
       } catch (e) {
-        console.error(
-          `Failed to notify muted participant ${participant.identity}: ${e}`
+        reportError(
+          'participant_mute_api_failure',
+          new Error(
+            `Failed to notify muted participant ${participant.identity}: ${e}`
+          )
         )
       }
 

src/frontend/src/features/rooms/api/muteParticipants.ts

@@ -1,5 +1,6 @@
 import type { Participant } from 'livekit-client'
 import { useMuteParticipant } from './muteParticipant'
+import { reportError } from '@/features/analytics/telemetry'
 
 export const useMuteParticipants = () => {
   const { muteParticipant } = useMuteParticipant()
@@ -11,7 +12,9 @@ export const useMuteParticipants = () => {
       )
       return Promise.all(promises)
     } catch (error) {
-      console.error('An error occurred while muting participants :', error)
+      reportError('participant_mute_api_failure', error, {
+        context: 'An error occurred while muting participants :',
+      })
       throw new Error('An error occurred while muting participants.', {
         cause: error,
       })

src/frontend/src/features/rooms/api/updateParticipantPermissions.ts

@@ -1,6 +1,7 @@
 import type { Participant, Track } from 'livekit-client'
 import { fetchApi } from '@/api/fetchApi'
 import { useRoomData } from '@/features/rooms/livekit/hooks/useRoomData'
+import { reportError } from '@/features/analytics/telemetry'
 type Source = Track.Source
 
 export const useParticipantPermissions = () => {
@@ -32,8 +33,11 @@ export const useParticipantPermissions = () => {
         }),
       })
     } catch (error) {
-      console.error(
-        `Failed to update participant's permissions ${participant.identity}: ${error instanceof Error ? error.message : 'Unknown error'}`
+      reportError(
+        'permissions_api_failure',
+        new Error(
+          `Failed to update participant's permissions ${participant.identity}: ${error instanceof Error ? error.message : 'Unknown error'}`
+        )
       )
     }
   }

src/frontend/src/features/rooms/api/updateParticipantsPermissions.ts

@@ -1,5 +1,6 @@
 import type { Participant, Track } from 'livekit-client'
 import { useParticipantPermissions } from './updateParticipantPermissions'
+import { reportError } from '@/features/analytics/telemetry'
 type Source = Track.Source
 
 export const useUpdateParticipantsPermissions = () => {
@@ -15,7 +16,9 @@ export const useUpdateParticipantsPermissions = () => {
       )
       return Promise.all(promises)
     } catch (error) {
-      console.error('An error occurred while updating permissions :', error)
+      reportError('permissions_api_failure', error, {
+        context: 'An error occurred while updating permissions :',
+      })
       throw new Error('An error occurred while updating permissions.', {
         cause: error,
       })

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

@@ -25,18 +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 { usePostHog } from 'posthog-js/react'
+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 { WatchMediaDeviceErrors } from './WatchMediaDeviceErrors'
 
 export const Conference = ({
   roomId,
@@ -47,7 +46,6 @@ export const Conference = ({
   mode?: 'join' | 'create'
   initialRoomData?: ApiRoom
 }) => {
-  const posthog = usePostHog()
   const { data: apiConfig } = useConfig()
 
   const { userChoices: userConfig } = usePersistentUserChoices() as {
@@ -57,8 +55,8 @@ export const Conference = ({
   const { username } = useSnapshot(userStore)
 
   useEffect(() => {
-    posthog.capture('visit-room', { slug: roomId })
-  }, [roomId, posthog])
+    void captureMediaEvent('visit-room', { slug: roomId })
+  }, [roomId])
   const fetchKey = [keys.room, roomId]
 
   const [isConnectionWarmedUp, setIsConnectionWarmedUp] = useState(false)
@@ -170,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)
@@ -235,7 +225,10 @@ export const Conference = ({
             backgroundColor: 'primaryDark.50 !important',
           })}
           onError={(e) => {
-            posthog.captureException(e)
+            reportError('livekit_room_error', e, {
+              path: 'connect_publish',
+              failure: MediaDeviceFailure.getFailure(e) ?? 'not-a-device-error',
+            })
           }}
           onConnected={async () => {
             if (!apiConfig) return
@@ -253,23 +246,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(
@@ -295,18 +273,10 @@ export const Conference = ({
                 return
             }
           }}
-          onMediaDeviceFailure={(e, kind) => {
-            if (e == MediaDeviceFailure.DeviceInUse && !!kind) {
-              setMediaDeviceError({ error: e, kind })
-            }
-          }}
         >
+          <WatchMediaDeviceErrors />
           <VideoConference />
           {!isMobile && <InviteDialog mode={mode} />}
-          <MediaDeviceErrorAlert
-            {...mediaDeviceError}
-            onClose={() => setMediaDeviceError({ error: null, kind: null })}
-          />
           <PictureInPictureConference />
         </LiveKitRoom>
       </Screen>

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

@@ -45,7 +45,7 @@ export const InviteDialog = ({ mode }: { mode: 'join' | 'create' }) => {
   const { t } = useTranslation('rooms', { keyPrefix: 'shareDialog' })
 
   const roomData = useRoomData()
-  const roomUrl = getRouteUrl('room', roomData?.slug)
+  const roomUrl = roomData?.slug ? getRouteUrl('room', roomData.slug) : ''
 
   const telephony = useTelephony()
 

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

@@ -0,0 +1,168 @@
+import { useEffect } from 'react'
+import { useTranslation } from 'react-i18next'
+import { useQuery } from '@tanstack/react-query'
+import { useSnapshot } from 'valtio'
+import { css } from '@/styled-system/css'
+import { VStack } from '@/styled-system/jsx'
+import { H } from '@/primitives/H'
+import { Field } from '@/primitives/Field'
+import { Form, Text } from '@/primitives'
+import { Spinner } from '@/primitives/Spinner'
+import { keys } from '@/api/queryKeys'
+import { queryClient } from '@/api/queryClient'
+import { useLoginHint } from '@/hooks/useLoginHint'
+import { useUser } from '@/features/auth/api/useUser'
+import { useConfig } from '@/api/useConfig'
+import { saveUsername, userStore } from '@/stores/user'
+import { fetchRoom } from '../api/fetchRoom'
+import { ApiAccessLevel } from '../api/ApiRoom'
+import { ApiLobbyStatus, type ApiRequestEntry } from '../api/requestEntry'
+import { useLobby } from '../hooks/useLobby'
+
+export const Lobby = ({
+  roomId,
+  enterRoom,
+}: {
+  roomId: string
+  enterRoom: () => void
+}) => {
+  const { t } = useTranslation('rooms', { keyPrefix: 'join' })
+
+  const { data: configData } = useConfig()
+  const { isLoggedIn, user } = useUser()
+  const { username } = useSnapshot(userStore)
+
+  // Room data strategy:
+  // 1. Initial fetch is performed to check access and get LiveKit configuration
+  // 2. Data remains valid for 6 hours to avoid unnecessary refetches
+  // 3. State is manually updated via queryClient when a waiting participant is accepted
+  // 4. No automatic refetching or revalidation occurs during this period
+  const {
+    data: roomData,
+    error,
+    isError,
+    refetch: refetchRoom,
+  } = useQuery({
+    queryKey: [keys.room, roomId],
+    queryFn: () => fetchRoom({ roomId, username: username || user?.full_name }),
+    staleTime: 6 * 60 * 60 * 1000, // By default, LiveKit access tokens expire 6 hours after generation
+    retry: false,
+    enabled: false,
+  })
+
+  useEffect(() => {
+    if (isError && error?.statusCode == 404) {
+      // The room component will handle the room creation if the user is authenticated
+      enterRoom()
+    }
+  }, [isError, error, enterRoom])
+
+  const handleAccepted = (response: ApiRequestEntry) => {
+    queryClient.setQueryData([keys.room, roomId], {
+      ...roomData,
+      livekit: response.livekit,
+    })
+    enterRoom()
+  }
+
+  const { status, startWaiting } = useLobby({
+    roomId,
+    username: username || user?.full_name || 'anonymous',
+    onAccepted: handleAccepted,
+  })
+
+  const { openLoginHint } = useLoginHint()
+
+  const handleSubmit = async () => {
+    const { data } = await refetchRoom()
+
+    if (!data?.livekit) {
+      // Display a message to inform the user that by logging in, they won't have to wait for room entry approval.
+      if (data?.access_level == ApiAccessLevel.TRUSTED) {
+        openLoginHint()
+      }
+      startWaiting()
+      return
+    }
+
+    enterRoom()
+  }
+
+  switch (status) {
+    case ApiLobbyStatus.TIMEOUT:
+      return (
+        <VStack alignItems="center" textAlign="center">
+          <H lvl={1} margin={false} centered>
+            {t('timeoutInvite.title')}
+          </H>
+          <Text as="p" variant="note">
+            {t('timeoutInvite.body')}
+          </Text>
+        </VStack>
+      )
+
+    case ApiLobbyStatus.DENIED:
+      return (
+        <VStack alignItems="center" textAlign="center">
+          <H lvl={1} margin={false} centered>
+            {t('denied.title')}
+          </H>
+          <Text as="p" variant="note">
+            {t('denied.body')}
+          </Text>
+        </VStack>
+      )
+
+    case ApiLobbyStatus.WAITING:
+      return (
+        <VStack alignItems="center" textAlign="center">
+          <H lvl={1} margin={false} centered>
+            {t('waiting.title')}
+          </H>
+          <Text
+            as="p"
+            variant="note"
+            className={css({ marginBottom: '1.5rem' })}
+          >
+            {t('waiting.body')}
+          </Text>
+          <Spinner />
+        </VStack>
+      )
+
+    default:
+      return (
+        <Form
+          onSubmit={handleSubmit}
+          submitLabel={t('joinLabel')}
+          submitButtonProps={{
+            fullWidth: true,
+          }}
+        >
+          <VStack marginBottom={1}>
+            <H lvl={1} margin="sm" centered>
+              {t('heading')}
+            </H>
+            {(!isLoggedIn ||
+              configData?.authenticated_users_can_edit_display_name) && (
+              <Field
+                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')}
+                wrapperProps={{
+                  noMargin: true,
+                  fullWidth: true,
+                }}
+                autoComplete="name"
+                maxLength={50}
+              />
+            )}
+          </VStack>
+        </Form>
+      )
+  }
+}

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

@@ -1,13 +1,11 @@
-import { Button, H, Input, Text, TextArea } from '@/primitives'
+import { Button, H, Text, TextArea } from '@/primitives'
 import { useEffect, useMemo, useState } from 'react'
 import { cva } from '@/styled-system/css'
 import { useTranslation } from 'react-i18next'
 import { styled, VStack } from '@/styled-system/jsx'
-import { usePostHog } from 'posthog-js/react'
-import type { PostHog } from 'posthog-js'
 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', {
   base: {
@@ -72,11 +70,9 @@ const labelRecipe = cva({
 })
 
 const OpenFeedback = ({
-  posthog,
   onNext,
   metadata,
 }: {
-  posthog: PostHog
   onNext: () => void
   metadata?: Record<string, unknown>
 }) => {
@@ -90,7 +86,7 @@ const OpenFeedback = ({
 
   const onSubmit = () => {
     try {
-      posthog.capture('open-feedback', {
+      captureEvent('open-feedback', {
         feedback,
         ...metadata,
       })
@@ -141,12 +137,10 @@ const OpenFeedback = ({
 }
 
 const RateQuality = ({
-  posthog,
   onNext,
   metadata,
   maxRating = 5,
 }: {
-  posthog: PostHog
   onNext: () => void
   metadata?: Record<string, unknown>
   maxRating?: number
@@ -160,7 +154,7 @@ const RateQuality = ({
 
   const onSubmit = () => {
     try {
-      posthog.capture('quality-rating', {
+      captureEvent('quality-rating', {
         rating: selectedRating,
         ...metadata,
       })
@@ -243,73 +237,8 @@ const ConfirmationMessage = ({ onNext }: { onNext: () => void }) => {
   )
 }
 
-const AuthenticationMessage = ({
-  onNext,
-  posthog,
-}: {
-  onNext: () => void
-  posthog: PostHog
-}) => {
-  const { t } = useTranslation('rooms', { keyPrefix: 'authenticationMessage' })
-
-  const [email, setEmail] = useState('')
-
-  const onSubmit = () => {
-    posthog.people.set({ unsafe_email: email })
-    onNext()
-  }
-
-  return (
-    <Card
-      style={{
-        maxWidth: '380px',
-        display: 'flex',
-        flexDirection: 'column',
-        justifyContent: 'center',
-      }}
-    >
-      <H lvl={3}>{t('heading')}</H>
-      <Input
-        id="emailInput"
-        name="email"
-        placeholder={t('placeholder')}
-        required
-        value={email}
-        onChange={(e) => setEmail(e.target.value)}
-        style={{
-          marginBottom: '1rem',
-        }}
-      />
-      <VStack gap="0.5">
-        <Button
-          variant="primary"
-          size="sm"
-          fullWidth
-          isDisabled={!email}
-          onPress={onSubmit}
-        >
-          {t('submit')}
-        </Button>
-        <Button
-          invisible
-          variant="secondary"
-          size="sm"
-          fullWidth
-          onPress={onNext}
-        >
-          {t('ignore')}
-        </Button>
-      </VStack>
-    </Card>
-  )
-}
-
 type RatingMetadata = {
   room_id?: string
-  pc_publisher?: CandidateInfo
-  pc_subscriber?: CandidateInfo
-  pc_publisher_changes_count?: number
-  pc_subscriber_changes_count?: number
 }
 
 export const Rating = ({
@@ -318,12 +247,6 @@ export const Rating = ({
   metadata: RatingMetadata
 }) => {
   const isAnalyticsEnabled = useIsAnalyticsEnabled()
-  const posthog = usePostHog()
-
-  const isUserAnonymous = useMemo(() => {
-    return posthog.get_property('$user_state') == 'anonymous'
-  }, [posthog])
-
   const [step, setStep] = useState(0)
 
   const sessionId = useMemo(() => crypto.randomUUID(), [])
@@ -339,37 +262,14 @@ export const Rating = ({
   if (!isAnalyticsEnabled) return
 
   if (step == 0) {
-    return (
-      <RateQuality
-        posthog={posthog}
-        onNext={() => setStep(step + 1)}
-        metadata={metadata}
-      />
-    )
+    return <RateQuality onNext={() => setStep(step + 1)} metadata={metadata} />
   }
 
   if (step == 1) {
-    return (
-      <OpenFeedback
-        posthog={posthog}
-        onNext={() => setStep(step + 1)}
-        metadata={metadata}
-      />
-    )
+    return <OpenFeedback onNext={() => setStep(step + 1)} metadata={metadata} />
   }
 
   if (step == 2) {
-    return isUserAnonymous ? (
-      <AuthenticationMessage
-        posthog={posthog}
-        onNext={() => setStep(step + 1)}
-      />
-    ) : (
-      <ConfirmationMessage onNext={() => setStep(0)} />
-    )
-  }
-
-  if (step == 3) {
     return <ConfirmationMessage onNext={() => setStep(0)} />
   }
 }

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/hooks/useWatchPermissions.ts

@@ -1,160 +1,36 @@
 import { useEffect } from 'react'
-import { permissionsStore } from '@/stores/permissions'
-import { isSafari } from '@/utils/livekit'
-
-const POLLING_TIME = 500
+import { syncPermissions } from '@/stores/permissions'
 
 export const useWatchPermissions = () => {
   useEffect(() => {
-    let cleanup: (() => void) | undefined
-    let intervalId: ReturnType<typeof setTimeout> | undefined
-    let isCancelled = false
+    const sync = () => void syncPermissions()
+    sync()
 
-    const checkPermissions = async () => {
-      try {
-        if (!navigator.permissions) {
-          if (!isCancelled) {
-            permissionsStore.cameraPermission = 'unavailable'
-            permissionsStore.microphonePermission = 'unavailable'
-          }
-          return
-        }
+    navigator.mediaDevices?.addEventListener?.('devicechange', sync)
+    window.addEventListener('focus', sync)
 
-        const [cameraPermission, microphonePermission] = await Promise.all([
-          navigator.permissions.query({ name: 'camera' }),
-          navigator.permissions.query({ name: 'microphone' }),
-        ])
-
-        if (isCancelled) return
-
-        /**
-         * Safari Permission API Limitation Workaround
-         *
-         * Safari has a known issue where permission change events are not reliably fired
-         * when users interact with permission prompts. This is documented in Apple's forums:
-         * https://developer.apple.com/forums/thread/757353
-         *
-         * The problem:
-         * - When permissions are in 'prompt' state, Safari may not trigger 'change' events
-         * - Users can grant/deny permissions through system prompts, but our listeners won't detect it
-         * - This leaves the UI in an inconsistent state showing outdated permission status
-         *
-         * The solution:
-         * - Manually poll the Permissions API every 500ms when either permission is in 'prompt' state
-         * - Continue polling until both permissions are no longer in 'prompt' state
-         * - This ensures we catch permission changes even when Safari fails to fire events
-         *
-         * This polling is Safari-specific and only activates when needed to minimize performance impact.
-         */
-        if (
-          isSafari() &&
-          (cameraPermission.state === 'prompt' ||
-            microphonePermission.state === 'prompt')
-        ) {
-          // Start polling every 1 second if either permission is in 'prompt' state
-          if (!intervalId) {
-            intervalId = setInterval(async () => {
-              try {
-                const [updatedCamera, updatedMicrophone] = await Promise.all([
-                  navigator.permissions.query({ name: 'camera' }),
-                  navigator.permissions.query({ name: 'microphone' }),
-                ])
-
-                if (isCancelled) return
-
-                const cameraChanged =
-                  permissionsStore.cameraPermission !== updatedCamera.state
-                const microphoneChanged =
-                  permissionsStore.microphonePermission !==
-                  updatedMicrophone.state
-
-                if (cameraChanged) {
-                  permissionsStore.cameraPermission = updatedCamera.state
-                }
-
-                if (microphoneChanged) {
-                  permissionsStore.microphonePermission =
-                    updatedMicrophone.state
-                }
-
-                if (
-                  updatedCamera.state !== 'prompt' &&
-                  updatedMicrophone.state !== 'prompt'
-                ) {
-                  if (intervalId) {
-                    clearInterval(intervalId)
-                    intervalId = undefined
-                  }
-                }
-              } catch (error) {
-                if (!isCancelled) {
-                  console.error('Error polling permissions:', error)
-                }
-              }
-            }, POLLING_TIME)
-          }
-        }
-
-        permissionsStore.cameraPermission = cameraPermission.state
-        permissionsStore.microphonePermission = microphonePermission.state
-
-        const handleCameraChange = (e: Event) => {
-          const target = e.target as PermissionStatus
-          permissionsStore.cameraPermission = target.state
-
-          if (
-            intervalId &&
-            target.state !== 'prompt' &&
-            microphonePermission.state !== 'prompt'
-          ) {
-            clearInterval(intervalId)
-            intervalId = undefined
-          }
-        }
-
-        const handleMicrophoneChange = (e: Event) => {
-          const target = e.target as PermissionStatus
-          permissionsStore.microphonePermission = target.state
-
-          if (
-            intervalId &&
-            target.state !== 'prompt' &&
-            microphonePermission.state !== 'prompt'
-          ) {
-            clearInterval(intervalId)
-            intervalId = undefined
-          }
-        }
-
-        cameraPermission.addEventListener('change', handleCameraChange)
-        microphonePermission.addEventListener('change', handleMicrophoneChange)
-
-        cleanup = () => {
-          cameraPermission.removeEventListener('change', handleCameraChange)
-          microphonePermission.removeEventListener(
-            'change',
-            handleMicrophoneChange
-          )
-          if (intervalId) {
-            clearInterval(intervalId)
-            intervalId = undefined
-          }
-        }
-      } catch (error) {
-        if (!isCancelled) {
-          console.error('Error checking permissions:', error)
-        }
-      } finally {
-        if (!isCancelled) {
-          permissionsStore.isLoading = false
-        }
-      }
+    let statuses: PermissionStatus[] = []
+    let cancelled = false
+    if (navigator.permissions) {
+      Promise.all([
+        navigator.permissions.query({ name: 'camera' as PermissionName }),
+        navigator.permissions.query({ name: 'microphone' as PermissionName }),
+      ])
+        .then((results) => {
+          if (cancelled) return
+          statuses = results
+          statuses.forEach((s) => s.addEventListener('change', sync))
+        })
+        .catch(() => {
+          // Query unsupported: devicechange/focus + gUM outcomes cover it.
+        })
     }
-    checkPermissions()
 
     return () => {
-      isCancelled = true
-      cleanup?.()
+      cancelled = true
+      navigator.mediaDevices?.removeEventListener?.('devicechange', sync)
+      window.removeEventListener('focus', sync)
+      statuses.forEach((s) => s.removeEventListener('change', sync))
     }
   }, [])
 }

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

@@ -13,6 +13,7 @@ import { usePermissionsManager } from '../hooks/usePermissionsManager'
 import { useEffect } from 'react'
 import { closeSidePanel } from '@/stores/layout'
 import { useIsAdminOrOwner } from '../hooks/useIsAdminOrOwner'
+import { reportError } from '@/features/analytics/telemetry'
 
 export const Admin = () => {
   const { t } = useTranslation('rooms', { keyPrefix: 'admin' })
@@ -205,7 +206,7 @@ export const Admin = () => {
             patchRoom({
               roomId,
               room: { access_level: value as ApiAccessLevel },
-            }).catch((e) => console.error(e))
+            }).catch((e) => reportError('generic_failure', e))
           }
           items={[
             {

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 posthog from 'posthog-js'
-import { useFeatureFlagEnabled } from 'posthog-js/react'
-import { isMobileBrowser } from '@livekit/components-core'
-import { FeatureFlags } from '@/features/analytics/enums'
-
-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,23 +76,23 @@ export const ConnectionObserver = () => {
       // total session duration from first connect to final disconnect.
       if (connectionStartTimeRef.current != null) return
       connectionStartTimeRef.current = Date.now()
-      posthog.capture('connection-event')
+      void captureMediaEvent('connection-event', {})
     }
 
     const handleReconnect = () => {
-      posthog.capture('reconnect-event')
+      captureEvent('reconnect-event')
     }
 
     const handleReconnected = () => {
-      posthog.capture('reconnected-event')
+      captureEvent('reconnected-event')
     }
 
     const handleSignalingConnect = () => {
-      posthog.capture('signaling-connect-event')
+      captureEvent('signaling-connect-event')
     }
 
     const handleSignalingReconnect = () => {
-      posthog.capture('signaling-reconnect-event')
+      captureEvent('signaling-reconnect-event')
     }
 
     const handleDisconnect = (
@@ -206,7 +100,7 @@ export const ConnectionObserver = () => {
     ) => {
       const connectionEndTime = Date.now()
 
-      posthog.capture('disconnect-event', {
+      captureEvent('disconnect-event', {
         // Calculate total session duration from first connection to final disconnect
         // This duration is sensitive to refreshing the page.
         sessionDuration: connectionStartTimeRef.current

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

@@ -14,7 +14,7 @@ export const Info = () => {
   const { t } = useTranslation('rooms', { keyPrefix: 'info' })
 
   const data = useRoomData()
-  const roomUrl = getRouteUrl('room', data?.slug)
+  const roomUrl = data?.slug ? getRouteUrl('room', data.slug) : ''
 
   const telephony = useTelephony()
 

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

@@ -0,0 +1,20 @@
+import { useLocalParticipant } from '@livekit/components-react'
+import type { LocalTrack } from 'livekit-client'
+import { useSyncTrackDeviceId } from '../hooks/useSyncTrackDeviceId'
+import {
+  saveAudioInputDeviceId,
+  saveVideoInputDeviceId,
+} from '@/stores/userChoices'
+
+export const SyncDevicePreferences = () => {
+  const { cameraTrack, microphoneTrack } = useLocalParticipant()
+  useSyncTrackDeviceId(
+    cameraTrack?.track as LocalTrack | undefined,
+    saveVideoInputDeviceId
+  )
+  useSyncTrackDeviceId(
+    microphoneTrack?.track as LocalTrack | undefined,
+    saveAudioInputDeviceId
+  )
+  return null
+}

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

@@ -9,15 +9,18 @@ import {
 } from 'livekit-client'
 import { useSnapshot } from 'valtio'
 import { userChoicesStore } from '@/stores/userChoices'
+import { performanceModeStore } from '@/stores/performanceMode'
 
-/**
- * Sets initial video quality for new participants as they join.
- * LiveKit doesn't allow handling video quality preferences at the room level.
- */
 export const VideoResolutionSubscription = () => {
   const { videoSubscribeQuality } = useSnapshot(userChoicesStore)
+  const { enabled: isPerformanceModeEnabled } =
+    useSnapshot(performanceModeStore)
   const room = useRoomContext()
 
+  const effectiveQuality = isPerformanceModeEnabled
+    ? VideoQuality.LOW
+    : (videoSubscribeQuality ?? VideoQuality.HIGH)
+
   useEffect(() => {
     if (!room) return
 
@@ -25,18 +28,12 @@ export const VideoResolutionSubscription = () => {
       publication: RemoteTrackPublication,
       _participant: RemoteParticipant
     ) => {
-      // By default, the maximum quality is set to high
-      if (
-        videoSubscribeQuality === undefined ||
-        videoSubscribeQuality === VideoQuality.HIGH
-      )
-        return
-
+      if (effectiveQuality === VideoQuality.HIGH) return
       if (
         publication.kind === Track.Kind.Video &&
         publication.source !== Track.Source.ScreenShare
       ) {
-        publication.setVideoQuality(videoSubscribeQuality)
+        publication.setVideoQuality(effectiveQuality)
       }
     }
 
@@ -44,7 +41,20 @@ export const VideoResolutionSubscription = () => {
     return () => {
       room.off(RoomEvent.TrackPublished, handleTrackPublished)
     }
-  }, [room, videoSubscribeQuality])
+  }, [room, effectiveQuality])
+
+  useEffect(() => {
+    if (!room) return
+
+    room.remoteParticipants.forEach((participant) => {
+      participant.videoTrackPublications.forEach((publication) => {
+        if (publication.source === Track.Source.ScreenShare) return
+        if (publication.videoQuality !== effectiveQuality) {
+          publication.setVideoQuality(effectiveQuality)
+        }
+      })
+    })
+  }, [room, effectiveQuality])
 
   return null
 }

src/frontend/src/features/rooms/livekit/components/blur/BackgroundCustomProcessor.ts

@@ -1,5 +1,4 @@
 import type { ProcessorOptions, Track } from 'livekit-client'
-import posthog from 'posthog-js'
 import {
   FilesetResolver,
   ImageSegmenter,
@@ -18,6 +17,7 @@ import {
   type ProcessorType,
   MEDIAPIPE_PATH_WASM,
 } from '.'
+import { captureEvent } from '@/features/analytics/telemetry.ts'
 
 const PROCESSING_WIDTH = 256
 const PROCESSING_HEIGHT = 144
@@ -100,7 +100,7 @@ export class BackgroundCustomProcessor implements BackgroundProcessorInterface {
     await this.initSegmenter()
     this._initWorker()
 
-    posthog.capture('firefox-blurring-init')
+    captureEvent('firefox-blurring-init', {})
   }
 
   _initVirtualBackgroundImage() {

src/frontend/src/features/rooms/livekit/components/blur/FaceLandmarksProcessor.ts

@@ -1,5 +1,4 @@
 import type { ProcessorOptions, Track, TrackProcessor } from 'livekit-client'
-import posthog from 'posthog-js'
 import {
   FilesetResolver,
   FaceLandmarker,
@@ -16,6 +15,7 @@ import {
   ProcessorType,
   MEDIAPIPE_PATH_WASM,
 } from '.'
+import { captureEvent } from '@/features/analytics/telemetry'
 
 const PROCESSING_WIDTH = 256 * 3
 const PROCESSING_HEIGHT = 144 * 3
@@ -101,7 +101,7 @@ export class FaceLandmarksProcessor implements TrackProcessor<Track.Kind> {
     await this.initFaceLandmarker()
     this._initWorker()
 
-    posthog.capture('face-landmarks-init')
+    captureEvent('face-landmarks-init', {})
   }
 
   _initWorker() {

src/frontend/src/features/rooms/livekit/components/blur/index.ts

@@ -1,4 +1,7 @@
-import { ProcessorWrapper } from '@livekit/track-processors'
+import {
+  ProcessorWrapper,
+  supportsBackgroundProcessors,
+} from '@livekit/track-processors'
 import type { Track, TrackProcessor } from 'livekit-client'
 import { BackgroundCustomProcessor } from './BackgroundCustomProcessor'
 import { UnifiedBackgroundTrackProcessor } from './UnifiedBackgroundTrackProcessor'
@@ -34,7 +37,9 @@ export class BackgroundProcessorFactory {
   }
 
   static isSupported() {
-    return ProcessorWrapper.isSupported || BackgroundCustomProcessor.isSupported
+    return (
+      supportsBackgroundProcessors() || BackgroundCustomProcessor.isSupported
+    )
   }
 
   static getProcessor(
@@ -45,7 +50,7 @@ export class BackgroundProcessorFactory {
 
     if (!isBlur && !isVirtual) return undefined
 
-    if (ProcessorWrapper.isSupported) {
+    if (supportsBackgroundProcessors()) {
       return new UnifiedBackgroundTrackProcessor(config)
     }
 

src/frontend/src/features/rooms/livekit/components/controls/CameraSwitchButton.tsx

@@ -4,6 +4,7 @@ import { RiCameraSwitchLine } from '@remixicon/react'
 import { useEffect, useState } from 'react'
 import type { ButtonProps } from 'react-aria-components'
 import { useTranslation } from 'react-i18next'
+import { reportError } from '@/features/analytics/telemetry'
 
 enum FacingMode {
   USER = 'user',
@@ -103,7 +104,11 @@ export const CameraSwitchButton = (props: Partial<ButtonProps>) => {
       setActiveMediaDevice(device.deviceId)
       setFacingMode(target)
     } else {
-      console.error('Cannot get user device with facingMode ' + target)
+      reportError(
+        'device_switch_failure',
+        new Error('Cannot get user device with facingMode ' + target),
+        { path: 'switch_device', kind: 'videoinput', facing_mode: target }
+      )
     }
   }
   return (

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

@@ -1,8 +1,12 @@
 import { useTranslation } from 'react-i18next'
-import { useTrackToggle, UseTrackToggleProps } from '@livekit/components-react'
+import {
+  useLocalParticipant,
+  useTrackToggle,
+  UseTrackToggleProps,
+} from '@livekit/components-react'
 import { Button, Popover } from '@/primitives'
 import { RiArrowUpSLine } from '@remixicon/react'
-import { Track } from 'livekit-client'
+import { LocalAudioTrack, Track } from 'livekit-client'
 
 import { ToggleDevice } from './ToggleDevice'
 import { css } from '@/styled-system/css'
@@ -51,6 +55,12 @@ export const AudioDevicesControl = ({
     ...props,
   })
 
+  const { microphoneTrack } = useLocalParticipant()
+  const localAudioTrack =
+    microphoneTrack?.track instanceof LocalAudioTrack
+      ? microphoneTrack.track
+      : undefined
+
   const kind = 'audioinput'
   const cannotUseDevice = useCannotUseDevice(kind)
   const selectLabel = t(`settings.${SettingsDialogExtendedKey.AUDIO}`)
@@ -111,6 +121,7 @@ export const AudioDevicesControl = ({
                   context="room"
                   kind={kind}
                   id={audioDeviceId}
+                  track={localAudioTrack}
                   onSubmit={saveAudioInputDeviceId}
                 />
               </div>

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

@@ -0,0 +1,132 @@
+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.75rem 0.25rem',
+    marginTop: '0.5rem',
+    borderTop: '1px solid',
+    minHeight: '2.5rem',
+  },
+  variants: {
+    theme: {
+      light: {
+        borderColor: 'gray.200',
+        color: 'greyscale.600',
+      },
+      dark: {
+        borderColor: 'primaryDark.300',
+        color: 'rgba(255 255 255 / 0.7)',
+      },
+    },
+  },
+})
+
+const StyledGaugeContainer = styled('div', {
+  base: {
+    flexGrow: 1,
+    height: '0.375rem',
+    borderRadius: '0.1875rem',
+    overflow: 'hidden',
+  },
+  variants: {
+    theme: {
+      light: {
+        backgroundColor: 'greyscale.250',
+      },
+      dark: {
+        backgroundColor: 'rgba(255 255 255 / 0.25)',
+      },
+    },
+  },
+})
+
+const StyledGauge = styled('div', {
+  base: {
+    width: '100%',
+    height: '100%',
+    borderRadius: 'inherit',
+    transformOrigin: 'left center',
+    transform: 'scaleX(0)',
+    transition: 'transform 0.06s linear',
+  },
+  variants: {
+    theme: {
+      light: {
+        backgroundColor: 'primary.500',
+      },
+      dark: {
+        backgroundColor: 'primaryDark.800',
+      },
+    },
+  },
+})
+
+type Theme = 'light' | 'dark'
+
+type AudioLevelGaugeProps = {
+  track?: LocalAudioTrack
+  variant?: Theme
+}
+
+const LevelBar = ({
+  track,
+  theme,
+}: {
+  track: LocalAudioTrack
+  theme: Theme
+}) => {
+  const { t } = useTranslation('rooms', { keyPrefix: 'selectDevice' })
+  const volume = useTrackVolume(track, {
+    fftSize: 256,
+    smoothingTimeConstant: 0.7,
+  })
+  const level = Math.min(1, volume)
+
+  return (
+    <>
+      <RiMicLine size={18} aria-hidden="true" />
+      <StyledGaugeContainer
+        theme={theme}
+        role="img"
+        aria-label={t('audioinput.level')}
+      >
+        <StyledGauge theme={theme} style={{ transform: `scaleX(${level})` }} />
+      </StyledGaugeContainer>
+    </>
+  )
+}
+
+export const AudioLevelGauge = ({
+  track,
+  variant = 'light',
+}: AudioLevelGaugeProps) => {
+  const { t } = useTranslation('rooms', { keyPrefix: 'selectDevice' })
+  const isMuted = useIsTrackMuted(track)
+  const showMutedHint = !track || isMuted
+
+  return (
+    <StyledContainer theme={variant}>
+      {showMutedHint ? (
+        <>
+          <RiMicOffLine size={18} aria-hidden="true" />
+          <Text variant="bodyXsMedium">{t('audioinput.muteTest')}</Text>
+        </>
+      ) : (
+        <LevelBar
+          key={track.mediaStreamTrack?.id}
+          track={track}
+          theme={variant}
+        />
+      )}
+    </StyledContainer>
+  )
+}

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

@@ -0,0 +1,134 @@
+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 { canTestAudioOutput } from '@/features/rooms/utils/canTestAudioOutput'
+
+// Speaker test in the audiooutput menu footer (Meet-style UX). Outputs have
+// no track: the test plays a bundled file through the selected sink, and
+// following `sinkId` mid-playback re-routes it live. No permission involved.
+
+type Theme = 'light' | 'dark'
+
+const BUTTON_VARIANT = {
+  light: 'quaternaryText',
+  dark: 'primaryTextDark',
+} as const
+
+const StyledContainer = styled('div', {
+  base: {
+    display: 'flex',
+    alignItems: 'center',
+    gap: '0.5rem',
+    paddingTop: '0.5rem',
+    marginTop: '0.5rem',
+    borderTop: '1px solid',
+  },
+  variants: {
+    theme: {
+      light: {
+        borderColor: 'gray.200',
+      },
+      dark: {
+        borderColor: 'primaryDark.300',
+      },
+    },
+  },
+})
+
+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
+  variant?: Theme
+}
+
+export const OutputSoundTester = ({
+  sinkId,
+  variant = 'light',
+}: OutputSoundTesterProps) => {
+  const { t } = useTranslation('rooms', { keyPrefix: 'selectDevice' })
+  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(() => {
+      // Re-routing failed (stale or unplugged device): stop the test rather
+      // than keep playing through the previous sink.
+      if (latestSinkIdRef.current === sinkId) {
+        stopPlayback()
+      }
+    })
+  }, [sinkId, stopPlayback])
+
+  useEffect(() => {
+    const audio = audioRef.current
+    return () => audio?.pause()
+  }, [])
+
+  return (
+    <StyledContainer theme={variant}>
+      <Button
+        variant={BUTTON_VARIANT[variant]}
+        size="sm"
+        fullWidth
+        isDisabled={isPlaying}
+        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()
+          }
+        }}
+      >
+        <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"
+        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,7 +4,12 @@ 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'
+import { OutputSoundTester } from './OutputSoundTester'
+import { canTestAudioOutput } from '@/features/rooms/utils/canTestAudioOutput'
 
 type DeviceItems = Array<{ value: string; label: string }>
 
@@ -18,6 +23,7 @@ type SelectDeviceProps = {
   onSubmit?: (id: string) => void
   kind: MediaDeviceKind
   context?: 'join' | 'room'
+  track?: LocalAudioTrack
 }
 
 type SelectDevicePermissionsProps<T> = SelectDeviceProps &
@@ -28,6 +34,7 @@ const SelectDevicePermissions = <T extends string | number>({
   kind,
   onSubmit,
   iconComponent,
+  track,
   ...props
 }: SelectDevicePermissionsProps<T>) => {
   const { t } = useTranslation('rooms', { keyPrefix: 'selectDevice' })
@@ -74,6 +81,16 @@ const SelectDevicePermissions = <T extends string | number>({
         await setActiveMediaDevice(key as string)
         onSubmit?.(key as string)
       }}
+      menuFooter={
+        kind === 'audioinput' ? (
+          <AudioLevelGauge track={track} variant={props.variant} />
+        ) : kind === 'audiooutput' && canTestAudioOutput() ? (
+          <OutputSoundTester
+            sinkId={selectedKey as string}
+            variant={props.variant}
+          />
+        ) : undefined
+      }
       {...props}
     />
   )
@@ -84,6 +101,7 @@ export const SelectDevice = ({
   onSubmit,
   kind,
   context = 'join',
+  track,
 }: SelectDeviceProps) => {
   const { t } = useTranslation('rooms', { keyPrefix: 'selectDevice' })
 
@@ -96,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 (
@@ -116,6 +153,7 @@ export const SelectDevice = ({
       id={id}
       onSubmit={onSubmit}
       kind={kind}
+      track={track}
       iconComponent={deviceIcons.select}
       {...contextProps}
     />

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

@@ -1,7 +1,7 @@
 import { ToggleButton } from '@/primitives'
 import { useRegisterKeyboardShortcut } from '@/features/shortcuts/useRegisterKeyboardShortcut'
 import { useScreenReaderAnnounce } from '@/hooks/useScreenReaderAnnounce'
-import { useMemo, useState } from 'react'
+import { useMemo, useRef, useState } from 'react'
 import { appendShortcutLabel } from '@/features/shortcuts/utils'
 import { useTranslation } from 'react-i18next'
 import { PermissionNeededButton } from './PermissionNeededButton'
@@ -12,10 +12,16 @@ 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'
 import type {
@@ -90,9 +96,45 @@ 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
+    }
+    if (isRequestingPermission.current) return
+    isRequestingPermission.current = true
+    try {
+      const granted = await requestDevicePermission(
+        kind,
+        context === 'join' ? 'join_preview' : 'room'
+      )
+      if (granted) {
+        toggle()
+      } else {
+        openPermissionsDialog(kind)
+      }
+    } finally {
+      isRequestingPermission.current = false
+    }
+  }
+
   useRegisterKeyboardShortcut({
     id: deviceShortcut?.id,
     handler: async () => {
@@ -139,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}
@@ -147,23 +202,25 @@ export const ToggleDevice = <T extends ToggleSource>({
           isDisabled || cannotUseDevice || !enabled ? errorVariant : variant
         }
         shySelected
-        onPress={() => {
-          if (cannotUseDevice) {
-            openPermissionsDialog(kind)
-          }
-          toggle()
-        }}
+        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/components/controls/LeaveButton.tsx

@@ -3,6 +3,7 @@ import { Button } from '@/primitives'
 import { RiPhoneFill } from '@remixicon/react'
 import { useTranslation } from 'react-i18next'
 import { ConnectionState } from 'livekit-client'
+import { reportError } from '@/features/analytics/telemetry'
 
 export const LeaveButton = () => {
   const { t } = useTranslation('rooms', { keyPrefix: 'controls' })
@@ -15,11 +16,11 @@ export const LeaveButton = () => {
       tooltip={t('leave')}
       aria-label={t('leave')}
       onPress={() => {
-        room
-          .disconnect(true)
-          .catch((e) =>
-            console.error('An error occurred while disconnecting:', e)
-          )
+        room.disconnect(true).catch((e) =>
+          reportError('disconnect_failure', e, {
+            context: 'An error occurred while disconnecting:',
+          })
+        )
       }}
       data-attr="controls-leave"
     >

src/frontend/src/features/rooms/livekit/components/effects/EffectsConfiguration.tsx

@@ -33,6 +33,7 @@ import { useConfig } from '@/api/useConfig.ts'
 import { proxy, useSnapshot } from 'valtio'
 import { Spinner } from '@/primitives/Spinner.tsx'
 import { userChoicesStore, saveProcessorConfig } from '@/stores/userChoices'
+import { reportError } from '@/features/analytics/telemetry'
 
 enum BlurRadius {
   NONE = 0,
@@ -238,7 +239,9 @@ export const EffectsConfiguration = ({
 
         updateEffectStatusMessage(config, wasSelectedBeforeToggle)
       } catch (error) {
-        console.error('Error applying effect:', error)
+        reportError('effects_processor_failure', error, {
+          context: 'Error applying effect:',
+        })
       } finally {
         // Without setTimeout the DOM is not refreshing when updating the options.
         setTimeout(() => setProcessorPending(false))

src/frontend/src/features/rooms/livekit/components/effects/FunnyEffects.tsx

@@ -5,6 +5,7 @@ import { RiGlassesLine, RiGoblet2Fill } from '@remixicon/react'
 import { useTranslation } from 'react-i18next'
 import { FaceLandmarksProcessor } from '../blur/FaceLandmarksProcessor'
 import type { LocalVideoTrack } from 'livekit-client'
+import { reportError } from '@/features/analytics/telemetry'
 
 export type FunnyEffectsProps = {
   videoTrack: LocalVideoTrack
@@ -55,7 +56,9 @@ export const FunnyEffects = ({
         await videoTrack.setProcessor(newProcessor)
       }
     } catch (e) {
-      console.error('could not update processor', e)
+      reportError('effects_processor_failure', e, {
+        context: 'could not update processor',
+      })
     } finally {
       onPending(false)
     }

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

@@ -4,6 +4,7 @@ import { useEffect, useMemo, useState } from 'react'
 import { formatPinCode } from '@/features/rooms/utils/telephony'
 import type { ApiRoom } from '@/features/rooms/api/ApiRoom'
 import { getRouteUrl } from '@/navigation/getRouteUrl'
+import { reportError } from '@/features/analytics/telemetry'
 
 const COPY_SUCCESS_TIMEOUT = 3000
 
@@ -58,7 +59,9 @@ export const useCopyRoomToClipboard = (room: ApiRoom | undefined) => {
       await navigator.clipboard.writeText(content)
       setIsCopied(true)
     } catch (error) {
-      console.error(error)
+      reportError('clipboard_failure', error, {
+        context: 'copy_room_content',
+      })
     }
   }
 
@@ -67,7 +70,9 @@ export const useCopyRoomToClipboard = (room: ApiRoom | undefined) => {
       await navigator.clipboard.writeText(roomUrl)
       setIsRoomUrlCopied(true)
     } catch (error) {
-      console.error(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/useFullScreen.ts

@@ -4,6 +4,7 @@
 
 import { useMemo, useState } from 'react'
 import { type TrackReferenceOrPlaceholder } from '@livekit/components-core'
+import { reportError } from '@/features/analytics/telemetry'
 
 export function useFullScreen({
   trackRef,
@@ -56,7 +57,9 @@ export function useFullScreen({
         await docEl.msRequestFullscreen()
       }
     } catch (error) {
-      console.error('Error entering fullscreen:', error)
+      reportError('fullscreen_failure', error, {
+        context: 'Error entering fullscreen:',
+      })
     }
   }
 
@@ -70,7 +73,9 @@ export function useFullScreen({
         await document.msExitFullscreen()
       }
     } catch (error) {
-      console.error('Error exiting fullscreen:', error)
+      reportError('fullscreen_failure', error, {
+        context: 'Error exiting fullscreen:',
+      })
     }
   }
 

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

@@ -0,0 +1,336 @@
+import { useCallback, useEffect, useRef, useState } from 'react'
+import { useSnapshot } from 'valtio'
+import {
+  createLocalAudioTrack,
+  createLocalVideoTrack,
+  type LocalAudioTrack,
+  type LocalVideoTrack,
+  MediaDeviceFailure,
+  TrackEvent,
+} from 'livekit-client'
+import { BackgroundProcessorFactory } from '../components/blur'
+import {
+  classifyPermissionError,
+  isLikelySystemNotFound,
+  isSystemPermissionError,
+  noteGumSuccess,
+  notePermissionDeniedFromGum,
+  noteSystemPermissionDenied,
+  type PermissionKind,
+} from '@/stores/permissions'
+import { getOS } from '@/utils/os'
+import { captureMediaEvent, reportError } from '@/features/analytics/telemetry'
+import {
+  saveAudioInputDeviceId,
+  saveAudioInputEnabled,
+  saveVideoInputDeviceId,
+  saveVideoInputEnabled,
+  userChoicesStore,
+} from '@/stores/userChoices'
+import { useSyncTrackDeviceId } from './useSyncTrackDeviceId'
+
+const VOICE_AUDIO_CONSTRAINTS = {
+  noiseSuppression: true,
+  echoCancellation: true,
+  autoGainControl: true,
+  voiceIsolation: false,
+  sampleRate: 48000,
+  channelCount: 1,
+  sampleSize: 16,
+} as const
+
+const PERMISSION_KIND: Record<'audioinput' | 'videoinput', PermissionKind> = {
+  audioinput: 'microphone',
+  videoinput: 'camera',
+}
+
+type MediaPath = 'join_preview' | 'room'
+
+const onMediaPermissionError = (
+  e: Error,
+  kind?: PermissionKind,
+  path: MediaPath = 'join_preview'
+) => {
+  if (
+    MediaDeviceFailure.getFailure(e) === MediaDeviceFailure.PermissionDenied
+  ) {
+    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.
+const disableAudio = () => saveAudioInputEnabled(false)
+const disableVideo = () => saveVideoInputEnabled(false)
+
+const stopAll = (stream: MediaStream) =>
+  stream.getTracks().forEach((track) => track.stop())
+
+export const requestDevicePermission = async (
+  kind: 'audioinput' | 'videoinput',
+  path: MediaPath = 'join_preview'
+): Promise<boolean> => {
+  try {
+    const track =
+      kind === 'audioinput'
+        ? await createLocalAudioTrack()
+        : await createLocalVideoTrack()
+    track.stop()
+    noteGumSuccess(PERMISSION_KIND[kind])
+    return true
+  } catch (error) {
+    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. 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(): WarmupState {
+  const [state, setState] = useState<WarmupState>({
+    audioReady: false,
+    videoReady: false,
+  })
+  const started = useRef(false)
+
+  useEffect(() => {
+    if (started.current) {
+      return
+    }
+    started.current = true
+
+    const bothReady = () => setState({ audioReady: true, videoReady: true })
+
+    const warmup = async () => {
+      try {
+        stopAll(
+          await navigator.mediaDevices.getUserMedia({
+            audio: true,
+            video: true,
+          })
+        )
+        noteGumSuccess()
+        bothReady()
+      } catch (error) {
+        if (
+          MediaDeviceFailure.getFailure(error as Error) ===
+            MediaDeviceFailure.PermissionDenied &&
+          !isSystemPermissionError(error)
+        ) {
+          // Retrying after a dismissal would show a second dialog.
+          onMediaPermissionError(error as Error)
+          bothReady()
+          return
+        }
+        // Combined requests fail atomically (e.g. missing webcam fails the
+        // 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 state
+}
+
+function useLocalTrack<T extends LocalAudioTrack | LocalVideoTrack>({
+  ready,
+  enabled,
+  create,
+  permissionKind,
+  onFailure,
+}: {
+  ready: boolean
+  enabled: boolean
+  create: () => Promise<T>
+  permissionKind: PermissionKind
+  onFailure: () => void
+}): T | null {
+  const [track, setTrack] = useState<T | null>(null)
+
+  // Acquire.
+  useEffect(() => {
+    if (!ready || !enabled || track) {
+      return
+    }
+    let cancelled = false
+    create()
+      .then((newTrack) => {
+        noteGumSuccess(permissionKind)
+        if (cancelled) {
+          newTrack.stop()
+          return
+        }
+        setTrack(newTrack)
+      })
+      .catch((error) => {
+        onMediaPermissionError(error as Error, permissionKind)
+        onFailure()
+      })
+    return () => {
+      cancelled = true
+    }
+  }, [ready, enabled, track, create, permissionKind, onFailure])
+
+  // Release on toggle-off so the LED turns off.
+  useEffect(() => {
+    if (!enabled && track) {
+      track.stop()
+      setTrack(null)
+    }
+  }, [enabled, track])
+
+  // Track ended externally (permission revoked, device unplugged):
+  // disable instead of re-acquiring, so no unsolicited dialog.
+  useEffect(() => {
+    if (!track) {
+      return
+    }
+    const handleEnded = () => {
+      setTrack(null)
+      onFailure()
+    }
+    track.on(TrackEvent.Ended, handleEnded)
+    return () => {
+      track.off(TrackEvent.Ended, handleEnded)
+    }
+  }, [track, onFailure])
+
+  // Release on unmount or replacement.
+  useEffect(() => {
+    return () => {
+      track?.stop()
+    }
+  }, [track])
+
+  return track
+}
+
+export function useJoinTracks(): {
+  audioTrack: LocalAudioTrack | undefined
+  videoTrack: LocalVideoTrack | undefined
+} {
+  const {
+    audioEnabled,
+    videoEnabled,
+    audioDeviceId,
+    videoDeviceId,
+    processorConfig,
+  } = useSnapshot(userChoicesStore)
+
+  const { audioReady, videoReady } = useWarmupPermissions()
+
+  const createAudio = useCallback(
+    () =>
+      createLocalAudioTrack({
+        deviceId: audioDeviceId,
+        ...VOICE_AUDIO_CONSTRAINTS,
+      }),
+    [audioDeviceId]
+  )
+
+  const createVideo = useCallback(
+    () =>
+      createLocalVideoTrack({
+        deviceId: videoDeviceId,
+        processor:
+          BackgroundProcessorFactory.fromProcessorConfig(processorConfig),
+      }),
+    [videoDeviceId, processorConfig]
+  )
+
+  const audioTrack = useLocalTrack({
+    ready: audioReady,
+    enabled: audioEnabled,
+    create: createAudio,
+    permissionKind: 'microphone',
+    onFailure: disableAudio,
+  })
+
+  const videoTrack = useLocalTrack({
+    ready: videoReady,
+    enabled: videoEnabled,
+    create: createVideo,
+    permissionKind: 'camera',
+    onFailure: disableVideo,
+  })
+
+  useSyncTrackDeviceId(audioTrack ?? undefined, saveAudioInputDeviceId)
+  useSyncTrackDeviceId(videoTrack ?? undefined, saveVideoInputDeviceId)
+
+  return {
+    audioTrack: audioTrack ?? undefined,
+    videoTrack: videoTrack ?? undefined,
+  }
+}

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

@@ -1,6 +1,7 @@
 import { usePatchRoom } from '@/features/rooms/api/patchRoom'
 import { useRoomData } from '@/features/rooms/livekit/hooks/useRoomData'
 import { useCallback } from 'react'
+import { reportError } from '@/features/analytics/telemetry'
 
 export const usePermissionsManager = () => {
   const { mutateAsync: patchRoom } = usePatchRoom()
@@ -28,7 +29,9 @@ export const usePermissionsManager = () => {
 
         return { configuration: newConfiguration }
       } catch (error) {
-        console.error('Failed to update muting permission:', error)
+        reportError('permissions_api_failure', error, {
+          context: 'Failed to update muting permission:',
+        })
         return { success: false, error }
       }
     },

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

@@ -12,6 +12,7 @@ import {
   NotificationType,
   useNotifyParticipants,
 } from '@/features/notifications'
+import { reportError } from '@/features/analytics/telemetry'
 
 export const updatePublishSources = (
   currentSources: Source[],
@@ -108,7 +109,9 @@ export const usePublishSourcesManager = () => {
 
         return { configuration: newConfiguration }
       } catch (error) {
-        console.error(`Failed to update ${sources}:`, error)
+        reportError('publish_sources_failure', error, {
+          context: `Failed to update ${sources}:`,
+        })
         return { success: false, error }
       }
     },

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

@@ -8,6 +8,7 @@ import {
 import { isLocal } from '@/utils/livekit'
 import { useMemo } from 'react'
 import { useRaiseHand } from '@/features/rooms/api/updateRaiseHand'
+import { reportError } from '@/features/analytics/telemetry'
 
 type useRaisedHandProps = {
   participant: Participant
@@ -79,9 +80,9 @@ export function useRaisedHand({ participant }: useRaisedHandProps) {
     try {
       await raiseHand(!isHandRaised)
     } catch (e) {
-      console.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/useResolveInitiallyDefaultDeviceId.ts

@@ -1,22 +0,0 @@
-import { useEffect, useRef } from 'react'
-
-export const useResolveInitiallyDefaultDeviceId = <
-  T extends { getDeviceId(): Promise<string | undefined> },
->(
-  currentId: string,
-  track: T | undefined,
-  save: (id: string) => void
-) => {
-  const isInitiated = useRef(false)
-  useEffect(() => {
-    if (currentId !== 'default' || !track || isInitiated.current) return
-    const resolveDefaultDeviceId = async () => {
-      const actualDeviceId = await track.getDeviceId()
-      if (actualDeviceId && actualDeviceId !== 'default') {
-        isInitiated.current = true
-        save(actualDeviceId)
-      }
-    }
-    resolveDefaultDeviceId()
-  }, [currentId, track, save])
-}

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

@@ -0,0 +1,40 @@
+import { useEffect } from 'react'
+import { TrackEvent, type LocalTrack } from 'livekit-client'
+
+/**
+ * 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 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,
+  save: (deviceId: string) => void
+) => {
+  useEffect(() => {
+    if (!track) return
+    let cancelled = false
+    const sync = () => {
+      track
+        .getDeviceId(false)
+        .then((deviceId) => {
+          if (!cancelled && deviceId) {
+            save(deviceId)
+          }
+        })
+        .catch(() => {
+          // A track without settings (ended, screen share) has no id to sync.
+        })
+    }
+    sync()
+    track.on(TrackEvent.Restarted, sync)
+    return () => {
+      cancelled = true
+      track.off(TrackEvent.Restarted, sync)
+    }
+  }, [track, save])
+}

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

@@ -0,0 +1,103 @@
+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 || !kind) return
+
+      void captureMediaEvent('media-device-error', {
+        log_code: 'media_devices_error_event',
+        path: 'connect_publish',
+        failure,
+        kind,
+      })
+
+      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,9 +11,9 @@ 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 { 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'
@@ -25,6 +25,10 @@ import { PipRoomPlaceholder } from '@/features/pip/components/PipRoomPlaceholder
 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'
+import { CpuConstrainedObserver } from '@/features/performance/components/CpuConstrainedObserver'
+import { PerformanceModeController } from '@/features/performance/components/PerformanceModeController'
 
 /**
  * @public
@@ -53,7 +57,6 @@ export interface VideoConferenceProps extends React.HTMLAttributes<HTMLDivElemen
  * @public
  */
 export function VideoConference({ ...props }: VideoConferenceProps) {
-  useRoomPageTitle()
   useNoiseReduction()
 
   const { isOpen: isPictureInPictureOpen } = usePictureInPicture()
@@ -64,9 +67,13 @@ export function VideoConference({ ...props }: VideoConferenceProps) {
     <>
       <RoomMetadataSynchronizer />
       <ConnectionObserver />
+      <SyncDevicePreferences />
+      <RoomSilentMicDetector />
       <MediaStateObserver />
       <ChatProvider />
       <VideoResolutionSubscription />
+      <PerformanceModeController />
+      <CpuConstrainedObserver />
       <div
         className="lk-video-conference"
         {...props}
@@ -91,7 +98,10 @@ export function VideoConference({ ...props }: VideoConferenceProps) {
             </RoomContentArea>
             <ControlBar
               onDeviceError={(e) => {
-                console.error(e)
+                reportError('device_switch_failure', e.error, {
+                  at: 'ControlBar.onDeviceError',
+                  source: e.source,
+                })
                 if (
                   e.source == Track.Source.ScreenShare &&
                   e.error.toString() ==

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/rooms/utils/canTestAudioOutput.ts

@@ -0,0 +1,3 @@
+export const canTestAudioOutput = () =>
+  typeof HTMLMediaElement !== 'undefined' &&
+  'setSinkId' in HTMLMediaElement.prototype // Safari: no output routing

src/frontend/src/features/sdk/routes/CreatePopup.tsx

@@ -5,6 +5,7 @@ import { useUser } from '@/features/auth/api/useUser'
 import { Spinner } from '@/primitives/Spinner'
 import { CallbackIdHandler } from '../utils/CallbackIdHandler'
 import { PopupWindow } from '../utils/PopupWindow'
+import { reportError } from '@/features/analytics/telemetry'
 
 const callbackIdHandler = new CallbackIdHandler()
 const popupWindow = new PopupWindow()
@@ -52,7 +53,9 @@ const CreatePopup = () => {
           popupWindow.close()
         })
       } catch (error) {
-        console.error('Failed to create meeting room:', error)
+        reportError('generic_failure', error, {
+          context: 'Failed to create meeting room:',
+        })
       }
     }
     if (isLoggedIn && callbackId) {

src/frontend/src/features/sdk/routes/SettingsPopup.tsx

@@ -15,6 +15,7 @@ import { usePatchRoom } from '@/features/rooms/api/patchRoom'
 import { ApiAccessLevel } from '@/features/rooms/api/ApiRoom'
 import { updatePublishSources } from '@/features/rooms/livekit/hooks/usePublishSourcesManager'
 import { isSubsetOf } from '@/features/rooms/utils/isSubsetOf'
+import { reportError } from '@/features/analytics/telemetry'
 
 type Source = Track.Source
 
@@ -108,7 +109,7 @@ const SettingsPopup = () => {
     patchRoom({
       roomId: roomSlug,
       room: { configuration: newConfiguration },
-    }).catch((e) => console.error(e))
+    }).catch((e) => reportError('generic_failure', e))
   }
 
   const updateSource = (sources: Source[], enabled: boolean) => {
@@ -329,7 +330,7 @@ const SettingsPopup = () => {
               patchRoom({
                 roomId: roomSlug,
                 room: { access_level: value as ApiAccessLevel },
-              }).catch((e) => console.error(e))
+              }).catch((e) => reportError('generic_failure', e))
             }
             items={[
               {

src/frontend/src/features/sdk/utils/PopupWindow.ts

@@ -1,5 +1,6 @@
 import { authUrl } from '@/features/auth/utils/authUrl'
 import { PopupMessageType, CallbackCreationRoomData } from './types'
+import { reportError } from '@/features/analytics/telemetry'
 
 export class PopupWindow {
   private sendMessageToManager(
@@ -9,7 +10,7 @@ export class PopupWindow {
     callback?: () => void
   ) {
     if (!window.opener) {
-      console.error('No manager window found')
+      reportError('generic_failure', new Error('No manager window found'))
       window.close()
       return
     }

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

@@ -11,6 +11,7 @@ import { useRenameParticipant } from '@/features/rooms/api/renameParticipant'
 import { saveUsername } from '@/stores/user'
 import { logout } from '@/features/auth/utils/logout'
 import { useConfig } from '@/api/useConfig'
+import { reportError } from '@/features/analytics/telemetry'
 
 export type AccountTabProps = Pick<DialogProps, 'onOpenChange'> &
   Pick<TabPanelProps, 'id'>
@@ -35,9 +36,9 @@ export const AccountTab = ({ id, onOpenChange }: AccountTabProps) => {
       saveUsername(name)
       onOpenChange?.(false) // only close on success
     } catch (error) {
-      console.error(
-        `Failed to rename participant: ${error instanceof Error ? error.message : 'Unknown error'}`
-      )
+      reportError('generic_failure', error, {
+        context: 'rename_participant',
+      })
     }
   }
   const handleOnCancel = () => {

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

@@ -11,7 +11,6 @@ import { useTranslation } from 'react-i18next'
 import { SoundTester } from '@/components/SoundTester'
 import { ActiveSpeaker } from '@/features/rooms/components/ActiveSpeaker'
 import { useNoiseReductionAvailable } from '@/features/rooms/livekit/hooks/useNoiseReductionAvailable'
-import posthog from 'posthog-js'
 import { RowWrapper } from './layout/RowWrapper'
 import { useSnapshot } from 'valtio'
 import {
@@ -20,6 +19,7 @@ import {
   saveNoiseReductionEnabled,
   userChoicesStore,
 } from '@/stores/userChoices'
+import { captureEvent } from '@/features/analytics/telemetry'
 
 export type AudioTabProps = Pick<DialogProps, 'onOpenChange'> &
   Pick<TabPanelProps, 'id'>
@@ -128,7 +128,7 @@ export const AudioTab = ({ id }: AudioTabProps) => {
             isSelected={noiseReductionEnabled}
             onChange={(v) => {
               saveNoiseReductionEnabled(v)
-              if (v) posthog.capture('noise-reduction-init')
+              if (v) captureEvent('noise-reduction-init')
             }}
           >
             {t('audio.noiseReduction.label')}

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

@@ -22,6 +22,11 @@ import {
 } from '@/stores/userChoices'
 import { RowWrapper } from './layout/RowWrapper'
 import { useSnapshot } from 'valtio'
+import {
+  disablePerformanceMode,
+  enablePerformanceMode,
+  performanceModeStore,
+} from '@/stores/performanceMode'
 
 export type VideoTabProps = Pick<DialogProps, 'onOpenChange'> &
   Pick<TabPanelProps, 'id'>
@@ -32,7 +37,7 @@ const EMPTY_PROPS = {}
 
 export const VideoTab = ({ id }: VideoTabProps) => {
   const { t } = useTranslation('settings', { keyPrefix: 'video' })
-  const { localParticipant, remoteParticipants } = useRoomContext()
+  const { localParticipant } = useRoomContext()
 
   const {
     videoDeviceId,
@@ -41,6 +46,9 @@ export const VideoTab = ({ id }: VideoTabProps) => {
     videoSubscribeQuality,
   } = useSnapshot(userChoicesStore)
 
+  const { enabled: isPerformanceModeEnabled } =
+    useSnapshot(performanceModeStore)
+
   const [videoElement, setVideoElement] = useState<HTMLVideoElement | null>(
     null
   )
@@ -85,22 +93,6 @@ export const VideoTab = ({ id }: VideoTabProps) => {
     }
   }
 
-  /**
-   * Updates video quality for all existing remote video tracks when user preference changes.
-   * LiveKit doesn't support setting video quality preferences at the room level for remote participants,
-   * so this function applies the selected quality to all existing remote video tracks.
-   * Hook useVideoResolutionSubscription updates quality preferences of new participants joining.
-   */
-  const updateExistingRemoteVideoQuality = (selectedQuality: VideoQuality) => {
-    remoteParticipants.forEach((participant) => {
-      participant.videoTrackPublications.forEach((publication) => {
-        if (publication.videoQuality !== selectedQuality) {
-          publication.setVideoQuality(selectedQuality)
-        }
-      })
-    })
-  }
-
   useEffect(() => {
     let videoTrack: LocalVideoTrack | null = null
 
@@ -217,10 +209,13 @@ export const VideoTab = ({ id }: VideoTabProps) => {
           type="select"
           label={t('resolution.publish.label')}
           items={resolutionItems}
-          selectedKey={videoPublishResolution}
+          selectedKey={
+            isPerformanceModeEnabled ? 'h360' : videoPublishResolution
+          }
           onSelectionChange={async (key) => {
             await handleVideoResolutionChange(key as VideoResolution)
           }}
+          isDisabled={isPerformanceModeEnabled}
           style={{
             width: '100%',
           }}
@@ -232,19 +227,43 @@ export const VideoTab = ({ id }: VideoTabProps) => {
           type="select"
           label={t('resolution.subscribe.label')}
           items={videoQualityItems}
-          selectedKey={videoSubscribeQuality?.toString()}
+          selectedKey={
+            isPerformanceModeEnabled
+              ? VideoQuality.LOW.toString()
+              : videoSubscribeQuality?.toString()
+          }
           onSelectionChange={(key) => {
             if (key == undefined) return
             const selectedQuality = Number(String(key))
             saveVideoSubscribeQuality(selectedQuality)
-            updateExistingRemoteVideoQuality(selectedQuality)
           }}
+          isDisabled={isPerformanceModeEnabled}
           style={{
             width: '100%',
           }}
         />
         <></>
       </RowWrapper>
+      <RowWrapper heading={t('performance.heading')}>
+        <Field
+          type="switch"
+          label={t('performance.label')}
+          description={t('performance.description')}
+          isSelected={isPerformanceModeEnabled}
+          onChange={(value) => {
+            if (value) {
+              enablePerformanceMode('manual')
+            } else {
+              disablePerformanceMode()
+            }
+          }}
+          wrapperProps={{
+            noMargin: true,
+            fullWidth: true,
+          }}
+        />
+        <></>
+      </RowWrapper>
     </TabPanel>
   )
 }

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/notifications.json

@@ -18,6 +18,10 @@
     "auto": "Sie haben an einer großen Besprechung teilgenommen. Ihr Mikrofon wurde automatisch stummgeschaltet.",
     "dismiss": "Stummschaltung aufheben"
   },
+  "cpuConstrained": {
+    "message": "Ihr Gerät ist stark ausgelastet. Die Videoqualität wurde reduziert, um das Gespräch flüssig zu halten.",
+    "keepQuality": "Ursprüngliche Qualität beibehalten"
+  },
   "reaction": {
     "description": "{{name}} hat mit {{emoji}} reagiert"
   },

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"
@@ -29,6 +33,8 @@
     },
     "audioinput": {
       "choose": "Mikrofon auswählen",
+      "level": "Mikrofon-Eingangspegel",
+      "muteTest": "Aktivieren Sie Ihr Mikrofon, um es zu testen",
       "permissionsNeeded": "Mikrofon auswählen – Berechtigung erforderlich",
       "disable": "Mikrofon deaktivieren",
       "enable": "Mikrofon aktivieren",
@@ -38,7 +44,9 @@
     },
     "audiooutput": {
       "choose": "Audioausgabe auswählen",
-      "permissionsNeeded": "Audioausgabe auswählen – Berechtigung erforderlich"
+      "permissionsNeeded": "Audioausgabe auswählen – Berechtigung erforderlich",
+      "test": "Lautsprecher testen",
+      "testing": "Testton wird abgespielt…"
     }
   },
   "join": {
@@ -58,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?",
@@ -113,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": {
@@ -135,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"
@@ -326,7 +392,6 @@
         }
       }
     },
-
     "faceLandmarks": {
       "title": "Visuelle Effekte",
       "glasses": {

src/frontend/src/locales/de/settings.json

@@ -70,6 +70,11 @@
         }
       }
     },
+    "performance": {
+      "heading": "Leistung",
+      "label": "Leistung priorisieren",
+      "description": "Reduziert die Qualität Ihrer Videos, um Ihr Gerät zu entlasten. Wird bei Überlastung automatisch aktiviert. Deaktivieren Sie diese Funktion, um wieder die maximale Qualität zu erhalten."
+    },
     "permissionsRequired": "Berechtigungen erforderlich"
   },
   "transcription": {

src/frontend/src/locales/en/notifications.json

@@ -18,6 +18,10 @@
     "auto": "You have joined a large meeting. Your microphone has been automatically muted.",
     "dismiss": "Unmute"
   },
+  "cpuConstrained": {
+    "message": "Your device is running low on processing power. Video quality has been reduced to keep the call smooth.",
+    "keepQuality": "Keep original quality"
+  },
   "reaction": {
     "description": "{{name}} reacted with {{emoji}}"
   },

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"
@@ -29,6 +33,8 @@
     },
     "audioinput": {
       "choose": "Select microphone",
+      "level": "Microphone input level",
+      "muteTest": "Turn on your microphone to test it",
       "permissionsNeeded": "Select microphone - permission needed",
       "disable": "Disable microphone",
       "enable": "Enable microphone",
@@ -38,7 +44,9 @@
     },
     "audiooutput": {
       "choose": "Select speaker",
-      "permissionsNeeded": "Select speaker - permission needed"
+      "permissionsNeeded": "Select speaker - permission needed",
+      "test": "Test speakers",
+      "testing": "Playing test sound…"
     }
   },
   "join": {
@@ -58,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?",
@@ -113,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": {
@@ -135,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"

src/frontend/src/locales/en/settings.json

@@ -70,6 +70,11 @@
         }
       }
     },
+    "performance": {
+      "heading": "Performance",
+      "label": "Prioritize performance",
+      "description": "Reduces the quality of your videos to take the strain off your device. Automatically activates in case of overload. Disable it to restore maximum quality."
+    },
     "permissionsRequired": "Permissions required"
   },
   "transcription": {

src/frontend/src/locales/fr/notifications.json

@@ -18,6 +18,10 @@
     "auto": "Vous venez de rejoindre une grande réunion. Votre micro a été automatiquement coupé.",
     "dismiss": "Rétablir le micro"
   },
+  "cpuConstrained": {
+    "message": "Votre appareil manque de puissance. La qualité vidéo a été réduite pour préserver la fluidité de l'appel.",
+    "keepQuality": "Conserver la qualité d'origine"
+  },
   "reaction": {
     "description": "{{name}} a reagi avec {{emoji}}"
   },