wip allow authenticated user to launch recording/transcription

CHANGELOG.md

@@ -10,67 +10,6 @@ and this project adheres to
 
 ### 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
-
-- 🐛(frontend) serve MediaPipe assets under a versioned path
-- 🐛(frontend) harmonize cache configuration for MediaPipe assets
-
-## [1.25.1] - 2026-08-06
-
-### Fixed
-
-- 🚑️(frontend) fix background crash from MediaPipe WASM version mismatch
-
-## [1.25.0] - 2026-08-05
-
-### Added
-
 - ✨(summary) report exception type in failure analytics
 - ✨(frontend) add configurable documentation menu item
 - ✨(frontend) allow promoting authenticated participants

docker/dinum-frontend/nginx/default.conf

@@ -65,11 +65,6 @@ server {
       sub_filter_once off;
   }
 
-  location ^~ /assets/mediapipe/wasm/ {
-      expires 30d;
-      add_header Cache-Control "public, max-age=2592000";
-  }
-
   # Serve static files with caching
   location ~* ^/assets/.*\.(css|js|json|png|jpg|jpeg|gif|ico|svg|woff|woff2|ttf|eot)$ {
       expires 30d;

src/agents/pyproject.toml

@@ -1,7 +1,7 @@
 
 [project]
 name = "agents"
-version = "1.26.0"
+version = "1.24.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.26.0"
+version = "1.24.0"
 source = { virtual = "." }
 dependencies = [
     { name = "livekit-agents" },

src/backend/core/api/permissions.py

@@ -198,3 +198,37 @@ class IsPresentInMeeting(permissions.BasePermission):
             return False
         except ParticipantsManagementException:
             return False
+
+
+class RoomCapabilityPermission(permissions.BasePermission):
+    """Wip."""
+
+    capability = None
+
+    def has_object_permission(self, request, view, obj):
+        """Wip."""
+        user = request.user
+
+        if not user or not user.is_authenticated:
+            return False
+
+        if obj.is_administrator_or_owner(user):
+            return True
+
+        if not obj.configuration.get(self.capability, True):
+            return False
+
+        try:
+            return ParticipantsManagement().check_if_in_meeting(
+                room_name=str(obj.pk), identity=str(user.sub)
+            )
+        except ParticipantNotFoundException:
+            return False
+        except ParticipantsManagementException:
+            return False
+
+
+class CanRecord(RoomCapabilityPermission):
+    """Wip."""
+
+    capability = "authenticated_can_record"

src/backend/core/api/serializers.py

@@ -349,6 +349,7 @@ class RoomConfiguration(BaseModel):
 
     can_publish_sources: list[TrackSource] | None = None
     everyone_can_mute: bool | None = None
+    authenticated_can_record: bool | None = None
 
     model_config = {"extra": "forbid"}
 

src/backend/core/api/viewsets.py

@@ -396,7 +396,7 @@ class RoomViewSet(
         methods=["post"],
         url_path="start-recording",
         permission_classes=[
-            permissions.HasPrivilegesOnRoom,
+            permissions.CanRecord,
         ],
     )
     @FeatureFlag.require("recording")
@@ -421,11 +421,30 @@ class RoomViewSet(
                     mode=mode,
                     options=options.model_dump(exclude_none=True) if options else {},
                 )
-                models.RecordingAccess.objects.create(
-                    user=self.request.user,
-                    role=models.RoleChoices.OWNER,
-                    recording=recording,
-                )
+
+                if room.is_administrator_or_owner(request.user):
+                    models.RecordingAccess.objects.create(
+                        user=self.request.user,
+                        role=models.RoleChoices.OWNER,
+                        recording=recording,
+                    )
+                else:
+                    # todo - encapsulate it in a clear method which replicate privileges role on obj
+                    accesses = models.ResourceAccess.objects.filter(
+                        resource=room,
+                        role__in=[models.RoleChoices.OWNER, models.RoleChoices.ADMIN],
+                    ).values_list("user_id", "role")
+
+                    models.RecordingAccess.objects.bulk_create(
+                        [
+                            models.RecordingAccess(
+                                user_id=user_id,
+                                role=role,
+                                recording=recording,
+                            )
+                            for user_id, role in accesses
+                        ]
+                    )
 
         except (DjangoValidationError, IntegrityError):
             # DjangoValidationError covers the Python-level check (full_clean);
@@ -469,7 +488,7 @@ class RoomViewSet(
         methods=["post"],
         url_path="stop-recording",
         permission_classes=[
-            permissions.HasPrivilegesOnRoom,
+            permissions.CanRecord,
         ],
     )
     @FeatureFlag.require("recording")

src/backend/pyproject.toml

@@ -7,7 +7,7 @@ build-backend = "uv_build"
 
 [project]
 name = "meet"
-version = "1.26.0"
+version = "1.24.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.26.0"
+version = "1.24.0"
 source = { editable = "." }
 dependencies = [
     { name = "aiohttp" },

src/frontend/default.conf

@@ -4,11 +4,6 @@ server {
   server_tokens off;
 
   root /usr/share/nginx/html;
-  
-  location ^~ /assets/mediapipe/wasm/ {
-      expires 30d;
-      add_header Cache-Control "public, max-age=2592000";
-  }
 
   # Serve static files with caching
   location ~* ^/assets/.*\.(css|js|json|png|jpg|jpeg|gif|ico|svg|woff|woff2|ttf|eot)$ {

src/frontend/package-lock.json

@@ -1,12 +1,12 @@
 {
   "name": "meet",
-  "version": "1.26.0",
+  "version": "1.24.0",
   "lockfileVersion": 3,
   "requires": true,
   "packages": {
     "": {
       "name": "meet",
-      "version": "1.26.0",
+      "version": "1.24.0",
       "dependencies": {
         "@fontsource-variable/atkinson-hyperlegible-next": "5.2.6",
         "@fontsource-variable/lexend": "5.2.11",
@@ -15,13 +15,14 @@
         "@livekit/components-react": "2.9.21",
         "@livekit/components-styles": "1.2.0",
         "@livekit/track-processors": "0.7.2",
-        "@mediapipe/tasks-vision": "0.10.14",
+        "@mediapipe/tasks-vision": "0.10.35",
         "@pandacss/preset-panda": "1.11.3",
         "@react-types/overlays": "3.10.0",
         "@remixicon/react": "4.9.0",
         "@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",
@@ -1048,12 +1049,18 @@
         "livekit-client": "^1.12.0 || ^2.1.0"
       }
     },
-    "node_modules/@mediapipe/tasks-vision": {
+    "node_modules/@livekit/track-processors/node_modules/@mediapipe/tasks-vision": {
       "version": "0.10.14",
       "resolved": "https://registry.npmjs.org/@mediapipe/tasks-vision/-/tasks-vision-0.10.14.tgz",
       "integrity": "sha512-vOifgZhkndgybdvoRITzRkIueWWSiCKuEUXXK6Q4FaJsFvRJuwgg++vqFUMlL0Uox62U5aEXFhHxlhV7Ja5e3Q==",
       "license": "Apache-2.0"
     },
+    "node_modules/@mediapipe/tasks-vision": {
+      "version": "0.10.35",
+      "resolved": "https://registry.npmjs.org/@mediapipe/tasks-vision/-/tasks-vision-0.10.35.tgz",
+      "integrity": "sha512-HOvadwVRE6JC+45nyYhmnywnr5h/J8KZvOeUNVOG9q/0875pZgItznFB9bRTvLc264YSJqiZ1NsIpCStJw/egg==",
+      "license": "Apache-2.0"
+    },
     "node_modules/@modelcontextprotocol/sdk": {
       "version": "1.29.0",
       "resolved": "https://registry.npmjs.org/@modelcontextprotocol/sdk/-/sdk-1.29.0.tgz",
@@ -4709,6 +4716,15 @@
         "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.26.0",
+  "version": "1.24.0",
   "type": "module",
   "scripts": {
     "dev": "panda codegen && vite",
@@ -22,13 +22,14 @@
     "@livekit/components-react": "2.9.21",
     "@livekit/components-styles": "1.2.0",
     "@livekit/track-processors": "0.7.2",
-    "@mediapipe/tasks-vision": "0.10.14",
+    "@mediapipe/tasks-vision": "0.10.35",
     "@pandacss/preset-panda": "1.11.3",
     "@react-types/overlays": "3.10.0",
     "@remixicon/react": "4.9.0",
     "@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,31 +2,24 @@ 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 { devices, activeDeviceId } = useMediaDeviceSelect({
-    kind: 'audiooutput',
-  })
+  const { activeDeviceId } = useMediaDeviceSelect({ kind: 'audiooutput' })
 
   useEffect(() => {
-    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
+    const updateActiveId = async (deviceId: string) => {
+      try {
+        await audioRef?.current?.setSinkId(deviceId)
+      } catch (error) {
+        console.error(`Error setting sinkId: ${error}`)
       }
-      reportError(
-        'device_switch_failure',
-        new Error(`Error setting sinkId: ${error}`)
-      )
-    })
-  }, [devices, activeDeviceId])
+    }
+    updateActiveId(activeDeviceId)
+  }, [activeDeviceId])
 
   // prevent pausing the sound
   navigator.mediaSession.setActionHandler('pause', function () {})
@@ -35,13 +28,9 @@ export const SoundTester = () => {
     <>
       <Button
         variant="secondaryText"
-        onPress={async () => {
-          try {
-            await audioRef?.current?.play()
-            setIsPlaying(true)
-          } catch {
-            setIsPlaying(false)
-          }
+        onPress={() => {
+          audioRef?.current?.play()
+          setIsPlaying(true)
         }}
         size="sm"
         isDisabled={isPlaying}
@@ -55,7 +44,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

@@ -1,24 +0,0 @@
-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

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

@@ -1,149 +0,0 @@
-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

@@ -1,8 +0,0 @@
-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,8 +6,6 @@ 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.
@@ -44,11 +42,6 @@ export const useSyncUserPreferencesWithBackend = () => {
       }
     }
 
-    syncBrowserPreferencesToBackend().catch((error) => {
-      if (error instanceof ApiError && error.statusCode === 401) return
-      reportError('generic_failure', error, {
-        context: '[useSyncUserPreferencesWithBackend] Failed to sync:',
-      })
-    })
+    syncBrowserPreferencesToBackend()
   }, [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 '../utils'
+import { formatChatMessageLinks } from '@livekit/components-react'
 import { css } from '@/styled-system/css'
 import { Text } from '@/primitives'
 

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

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

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

@@ -15,7 +15,6 @@ 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 (
@@ -161,11 +160,7 @@ const Home = () => {
           window.location.replace(data.external_home_url)
         } catch (error) {
           setRedirectFailed(true)
-          captureEvent('external-home-unreachable', {
-            error_name: error instanceof Error ? error.name : 'Unknown',
-            error_message:
-              error instanceof Error ? error.message : String(error),
-          })
+          console.error('Site is not reachable:', error)
         }
       }
     }

src/frontend/src/features/notifications/NotificationDuration.ts

@@ -3,7 +3,6 @@ export enum ToastDuration {
   MEDIUM = 4000,
   LONG = 5000,
   EXTRA_LONG = 7000,
-  UNDO_WINDOW = 30000,
 }
 
 export const NotificationDuration = {
@@ -16,5 +15,4 @@ 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,5 +18,4 @@ export enum NotificationType {
   RecordingSaving = 'recordingSaving',
   PermissionsRemoved = 'permissionsRemoved',
   RoleChanged = 'roleChanged',
-  CpuConstrained = 'cpuConstrained',
 }

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

@@ -1,61 +0,0 @@
-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,7 +15,6 @@ 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>
@@ -75,9 +74,6 @@ 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,7 +4,6 @@ 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(
@@ -15,15 +14,6 @@ export const notifyAutoMutedOnJoin = () => {
   )
 }
 
-export const notifyCpuConstrained = () => {
-  toastQueue.add(
-    {
-      type: NotificationType.CpuConstrained,
-    },
-    { timeout: NotificationDuration.CPU_CONSTRAINED }
-  )
-}
-
 export const showLowerHandToast = (
   participant: Participant,
   onClose: () => void
@@ -65,9 +55,7 @@ export const decodeNotificationDataReceived = (
     return parsed as NotificationPayload
   } catch (error) {
     // Handle errors appropriately for your application
-    reportError('generic_failure', error, {
-      context: 'Failed to decode notification payload:',
-    })
+    console.error('Failed to decode notification payload:', error)
     return
   }
 }

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

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

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

@@ -1,7 +1,6 @@
 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()
@@ -23,11 +22,8 @@ export const useParticipantRole = () => {
         }),
       })
     } catch (error) {
-      reportError(
-        'generic_failure',
-        new Error(
-          `Failed to update participant's role ${identity}: ${error instanceof Error ? error.message : 'Unknown error'}`
-        )
+      console.error(
+        `Failed to update participant's role ${identity}: ${error instanceof Error ? error.message : 'Unknown error'}`
       )
     }
   }

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

@@ -10,7 +10,6 @@ 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
 
@@ -88,7 +87,7 @@ export const useWaitingParticipants = () => {
 
       await refetchWaiting()
     } catch (e) {
-      reportError('generic_failure', e)
+      console.error(e)
       setListEnabled(true)
     }
   }

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

@@ -1,71 +0,0 @@
-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

@@ -1,108 +0,0 @@
-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

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

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

@@ -1,9 +1,7 @@
 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
@@ -61,29 +59,21 @@ export const usePictureInPicture = () => {
       if (!IS_PIP_SUPPORTED) return null
       if (isOpen) return null
 
-      let pipWindow: Window
       try {
-        pipWindow =
+        const 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) {
-            flushSync(() => {
-              documentPictureInPictureStore.window = null
-            })
+            documentPictureInPictureStore.window = null
           }
         }
         pipWindow.addEventListener('pagehide', () => cleanUp(), { once: true })
@@ -92,10 +82,8 @@ export const usePictureInPicture = () => {
         })
         documentPictureInPictureStore.window = ref(pipWindow)
       } catch (error) {
-        reportError('generic_failure', error, {
-          context: 'pip_init_failure',
-        })
-        pipWindow.close()
+        // Avoid unhandled rejections if the user blocks or closes the request.
+        console.error('Failed to open Picture-in-Picture window', error)
         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,
-    translate: '0 3.25rem',
-    transition: 'opacity, translate',
+    transform: 'translateY(3.25rem)',
+    transition: 'opacity, transform',
     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,
-        translate: '0 0',
+        transform: 'translateY(0)',
         pointerEvents: 'auto',
       },
     },
@@ -84,7 +84,7 @@ export const ReactionButtonsContainer = ({
     shouldBeCenteredWithToggleButton,
     setShouldBeCenteredWithToggleButton,
   ] = useState(false)
-  const [offsetX, setOffsetX] = useState(0)
+  const [rightOffset, setRightOffset] = useState(0)
 
   const updateArrows = useCallback(() => {
     const el = scrollRef.current
@@ -115,7 +115,7 @@ export const ReactionButtonsContainer = ({
 
   useLayoutEffect(() => {
     if (!shouldBeCenteredWithToggleButton || isMobile) {
-      setOffsetX(0)
+      setRightOffset(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
-      setOffsetX((prev) => prev + shift)
+      setRightOffset((prev) => prev - shift * 2)
     }
 
     const schedule = () => {
@@ -182,7 +182,7 @@ export const ReactionButtonsContainer = ({
       isVisible={isVisible}
       style={
         shouldBeCenteredWithToggleButton && !isMobile && adjustedCentering
-          ? { transform: `translateX(${offsetX}px)` }
+          ? { marginRight: `${rightOffset}px` }
           : { margin: '0 15px' }
       }
     >

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

@@ -98,6 +98,7 @@ export const NoAccessView = ({
           )}
         </Text>
       </VStack>
+      {/*todo - update the message here to adapt to room configuration */}
       {!isLoggedIn && (
         <LoginPrompt
           heading={t(`${i18nKey}.login.heading`)}

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

@@ -16,6 +16,7 @@ import {
   notifyRecordingSaveInProgress,
   useNotifyParticipants,
 } from '@/features/notifications'
+import posthog from 'posthog-js'
 import { useConfig } from '@/api/useConfig'
 import { NoAccessView } from './NoAccessView'
 import { ControlsButton } from './ControlsButton'
@@ -28,7 +29,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'
+import { useCanRecord } from '@/features/recording/hooks/useCanRecord'
 
 export const ScreenRecordingSidePanel = () => {
   const { data } = useConfig()
@@ -38,6 +39,7 @@ export const ScreenRecordingSidePanel = () => {
 
   const [includeTranscript, setIncludeTranscript] = useState(false)
 
+  const canRecord = useCanRecord()
   const isAdminOrOwner = useIsAdminOrOwner()
 
   const hasScreenRecordingAccess = useHasRecordingAccess(
@@ -63,7 +65,7 @@ export const ScreenRecordingSidePanel = () => {
     await notifyParticipants({
       type: NotificationType.ScreenRecordingRequested,
     })
-    captureEvent('screen-recording-requested', {})
+    posthog.capture('screen-recording-requested', {})
   }
 
   const handleScreenRecording = async () => {
@@ -100,19 +102,17 @@ export const ScreenRecordingSidePanel = () => {
         await notifyParticipants({
           type: NotificationType.ScreenRecordingStarted,
         })
-        captureEvent('screen-recording-started', {
+        posthog.capture('screen-recording-started', {
           includeTranscript: includeTranscript,
           language: selectedLanguageKey,
         })
       }
     } catch (error) {
-      reportError('generic_failure', error, {
-        context: 'Failed to handle recording:',
-      })
+      console.error('Failed to handle recording:', error)
     }
   }
 
-  if (!isAdminOrOwner) {
+  if (!canRecord) {
     return (
       <NoAccessView
         i18nKeyPrefix={keyPrefix}

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

@@ -6,7 +6,7 @@ import { useRoomContext } from '@livekit/components-react'
 import {
   RecordingMode,
   useHasRecordingAccess,
-  useHasFeatureWithoutAdminRights,
+  useHasFeatureWithoutRecordingRights,
   useRecordingStatuses,
 } from '../index'
 import { useState } from 'react'
@@ -17,6 +17,7 @@ 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'
@@ -34,7 +35,6 @@ 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()
@@ -53,7 +53,7 @@ export const TranscriptSidePanel = () => {
     FeatureFlags.Transcript
   )
 
-  const hasFeatureWithoutAdminRights = useHasFeatureWithoutAdminRights(
+  const hasFeatureWithoutAdminRights = useHasFeatureWithoutRecordingRights(
     RecordingMode.Transcript,
     FeatureFlags.Transcript
   )
@@ -76,7 +76,7 @@ export const TranscriptSidePanel = () => {
     await notifyParticipants({
       type: NotificationType.TranscriptionRequested,
     })
-    captureEvent('transcript-requested', {})
+    posthog.capture('transcript-requested', {})
   }
 
   const handleTranscript = async () => {
@@ -121,15 +121,13 @@ export const TranscriptSidePanel = () => {
         await notifyParticipants({
           type: NotificationType.TranscriptionStarted,
         })
-        captureEvent('transcript-started', {
+        posthog.capture('transcript-started', {
           includeScreenRecording: includeScreenRecording,
           language: selectedLanguageKey,
         })
       }
     } catch (error) {
-      reportError('generic_failure', error, {
-        context: 'Failed to handle transcript:',
-      })
+      console.error('Failed to handle transcript:', error)
     }
   }
 

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

@@ -0,0 +1,15 @@
+import { useIsAdminOrOwner } from '@/features/rooms/livekit/hooks/useIsAdminOrOwner'
+import { useRoomData } from '@/features/rooms/livekit/hooks/useRoomData'
+import { useUser } from '@/features/auth/api/useUser'
+
+export const useCanRecord = () => {
+  const apiRoomData = useRoomData()
+  const isAdminOrOwner = useIsAdminOrOwner()
+  const { isLoggedIn } = useUser()
+
+  return (
+    isAdminOrOwner ||
+    (!!isLoggedIn &&
+      apiRoomData?.configuration?.authenticated_can_record !== false)
+  )
+}

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

@@ -2,21 +2,21 @@ import { useFeatureFlagEnabled } from 'posthog-js/react'
 import { useIsAnalyticsEnabled } from '@/features/analytics/hooks/useIsAnalyticsEnabled'
 import type { RecordingMode } from '../types'
 import { useIsRecordingModeEnabled } from './useIsRecordingModeEnabled'
-import { useIsAdminOrOwner } from '@/features/rooms/livekit/hooks/useIsAdminOrOwner'
+import { useCanRecord } from './useCanRecord'
 import type { FeatureFlags } from '@/features/analytics/enums'
 
-export const useHasFeatureWithoutAdminRights = (
+export const useHasFeatureWithoutRecordingRights = (
   mode: RecordingMode,
   featureFlag: FeatureFlags
 ) => {
   const featureEnabled = useFeatureFlagEnabled(featureFlag)
   const isAnalyticsEnabled = useIsAnalyticsEnabled()
   const isRecordingModeEnabled = useIsRecordingModeEnabled(mode)
-  const isAdminOrOwner = useIsAdminOrOwner()
+  const canRecord = useCanRecord()
 
   return (
     (featureEnabled || !isAnalyticsEnabled) &&
     isRecordingModeEnabled &&
-    !isAdminOrOwner
+    !canRecord
   )
 }

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

@@ -2,8 +2,8 @@ import { useFeatureFlagEnabled } from 'posthog-js/react'
 import { useIsAnalyticsEnabled } from '@/features/analytics/hooks/useIsAnalyticsEnabled'
 import type { RecordingMode } from '../types'
 import { useIsRecordingModeEnabled } from './useIsRecordingModeEnabled'
-import { useIsAdminOrOwner } from '@/features/rooms/livekit/hooks/useIsAdminOrOwner'
 import type { FeatureFlags } from '@/features/analytics/enums'
+import { useCanRecord } from './useCanRecord'
 
 export const useHasRecordingAccess = (
   mode: RecordingMode,
@@ -12,11 +12,11 @@ export const useHasRecordingAccess = (
   const featureEnabled = useFeatureFlagEnabled(featureFlag)
   const isAnalyticsEnabled = useIsAnalyticsEnabled()
   const isRecordingModeEnabled = useIsRecordingModeEnabled(mode)
-  const isAdminOrOwner = useIsAdminOrOwner()
+  const canRecord = useCanRecord()
 
   return (
     (featureEnabled || !isAnalyticsEnabled) &&
-    isAdminOrOwner &&
+    canRecord &&
     isRecordingModeEnabled
   )
 }

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

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

src/frontend/src/features/recording/index.ts

@@ -1,7 +1,7 @@
 // hooks
 export { useIsRecordingModeEnabled } from './hooks/useIsRecordingModeEnabled'
 export { useHasRecordingAccess } from './hooks/useHasRecordingAccess'
-export { useHasFeatureWithoutAdminRights } from './hooks/useHasFeatureWithoutAdminRights'
+export { useHasFeatureWithoutRecordingRights } from './hooks/useHasFeatureWithoutRecordingRights.ts'
 export { useRecordingStatuses } from './hooks/useRecordingStatuses'
 
 // api

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

@@ -16,6 +16,7 @@ export enum ApiAccessLevel {
 export type RoomConfiguration = {
   can_publish_sources?: Source[] | null
   everyone_can_mute?: boolean | null
+  authenticated_can_record?: boolean | null
 }
 
 export type ParticipantRole = 'member' | 'administrator' | 'owner'

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

@@ -10,5 +10,5 @@ export const fetchRoom = ({
 }) => {
   const query = username ? `?username=${encodeURIComponent(username)}` : ''
 
-  return fetchApi<ApiRoom>(`/rooms/${roomId}/${query}`)
+  return fetchApi<ApiRoom>(`/rooms/${roomId}${query}`)
 }

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

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

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

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

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

@@ -1,7 +1,6 @@
 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 = () => {
@@ -33,11 +32,8 @@ export const useParticipantPermissions = () => {
         }),
       })
     } catch (error) {
-      reportError(
-        'permissions_api_failure',
-        new Error(
-          `Failed to update participant's permissions ${participant.identity}: ${error instanceof Error ? error.message : 'Unknown error'}`
-        )
+      console.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,6 +1,5 @@
 import type { Participant, Track } from 'livekit-client'
 import { useParticipantPermissions } from './updateParticipantPermissions'
-import { reportError } from '@/features/analytics/telemetry'
 type Source = Track.Source
 
 export const useUpdateParticipantsPermissions = () => {
@@ -16,9 +15,7 @@ export const useUpdateParticipantsPermissions = () => {
       )
       return Promise.all(promises)
     } catch (error) {
-      reportError('permissions_api_failure', error, {
-        context: 'An error occurred while updating permissions :',
-      })
+      console.error('An error occurred while updating permissions :', error)
       throw new Error('An error occurred while updating permissions.', {
         cause: error,
       })

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

@@ -25,17 +25,18 @@ import { VideoConference } from '../livekit/prefabs/VideoConference'
 import { css } from '@/styled-system/css'
 import { BackgroundProcessorFactory } from '../livekit/components/blur'
 import { LocalUserChoices } from '@/stores/userChoices'
-import { captureMediaEvent, reportError } from '@/features/analytics/telemetry'
+import { MediaDeviceErrorAlert } from './MediaDeviceErrorAlert'
+import { usePostHog } from 'posthog-js/react'
 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,
@@ -46,6 +47,7 @@ export const Conference = ({
   mode?: 'join' | 'create'
   initialRoomData?: ApiRoom
 }) => {
+  const posthog = usePostHog()
   const { data: apiConfig } = useConfig()
 
   const { userChoices: userConfig } = usePersistentUserChoices() as {
@@ -55,8 +57,8 @@ export const Conference = ({
   const { username } = useSnapshot(userStore)
 
   useEffect(() => {
-    void captureMediaEvent('visit-room', { slug: roomId })
-  }, [roomId])
+    posthog.capture('visit-room', { slug: roomId })
+  }, [roomId, posthog])
   const fetchKey = [keys.room, roomId]
 
   const [isConnectionWarmedUp, setIsConnectionWarmedUp] = useState(false)
@@ -168,6 +170,14 @@ 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)
@@ -225,10 +235,7 @@ export const Conference = ({
             backgroundColor: 'primaryDark.50 !important',
           })}
           onError={(e) => {
-            reportError('livekit_room_error', e, {
-              path: 'connect_publish',
-              failure: MediaDeviceFailure.getFailure(e) ?? 'not-a-device-error',
-            })
+            posthog.captureException(e)
           }}
           onConnected={async () => {
             if (!apiConfig) return
@@ -246,8 +253,23 @@ 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(
@@ -273,10 +295,18 @@ 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 = roomData?.slug ? getRouteUrl('room', roomData.slug) : ''
+  const roomUrl = getRouteUrl('room', roomData?.slug)
 
   const telephony = useTelephony()
 

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

@@ -1,168 +0,0 @@
-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,114 +1,13 @@
 import { useWatchPermissions } from '@/features/rooms/hooks/useWatchPermissions'
 import { css } from '@/styled-system/css'
-import { Button, Dialog, H, P } from '@/primitives'
+import { Dialog, H } from '@/primitives'
 import { RiEqualizer2Line } from '@remixicon/react'
 import { useEffect, useMemo } from 'react'
 import { useSnapshot } from 'valtio'
-import {
-  closePermissionsDialog,
-  closeSystemPermissionsDialog,
-  permissionsStore,
-} from '@/stores/permissions'
+import { closePermissionsDialog, 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.
@@ -166,74 +65,68 @@ export const Permissions = () => {
   const appTitle = `${import.meta.env.VITE_APP_TITLE}`
 
   return (
-    <>
-      <SystemPermissions />
-      <Dialog
-        isOpen={permissions.isPermissionDialogOpen}
-        role="dialog"
-        type="flex"
-        title=""
-        aria-label={t(`heading.${permissionLabel}`, {
-          appTitle,
+    <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',
+          },
         })}
-        onClose={closePermissionsDialog}
       >
+        <img
+          src="/assets/camera_mic_permission.svg"
+          alt=""
+          className={css({
+            width: '100%',
+            minHeight: '290px',
+            maxWidth: '290px',
+          })}
+        />
         <div
           className={css({
-            display: 'flex',
-            justifyContent: 'center',
-            alignItems: 'center',
-            flexDirection: 'column',
-            md: {
-              flexDirection: 'row',
-            },
+            maxWidth: '400px',
           })}
         >
-          <img
-            src="/assets/camera_mic_permission.svg"
-            alt=""
-            className={css({
-              width: '100%',
-              minHeight: '290px',
-              maxWidth: '290px',
+          <H lvl={2}>
+            {t(`heading.${permissionLabel}`, {
+              appTitle,
             })}
-          />
-          <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>
+          </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>
-      </Dialog>
-    </>
+      </div>
+    </Dialog>
   )
 }

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

@@ -1,11 +1,13 @@
-import { Button, H, Text, TextArea } from '@/primitives'
+import { Button, H, Input, 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 { captureEvent } from '@/features/analytics/telemetry'
+import type { CandidateInfo } from '@/stores/connectionObserver'
 
 const Card = styled('div', {
   base: {
@@ -70,9 +72,11 @@ const labelRecipe = cva({
 })
 
 const OpenFeedback = ({
+  posthog,
   onNext,
   metadata,
 }: {
+  posthog: PostHog
   onNext: () => void
   metadata?: Record<string, unknown>
 }) => {
@@ -86,7 +90,7 @@ const OpenFeedback = ({
 
   const onSubmit = () => {
     try {
-      captureEvent('open-feedback', {
+      posthog.capture('open-feedback', {
         feedback,
         ...metadata,
       })
@@ -137,10 +141,12 @@ const OpenFeedback = ({
 }
 
 const RateQuality = ({
+  posthog,
   onNext,
   metadata,
   maxRating = 5,
 }: {
+  posthog: PostHog
   onNext: () => void
   metadata?: Record<string, unknown>
   maxRating?: number
@@ -154,7 +160,7 @@ const RateQuality = ({
 
   const onSubmit = () => {
     try {
-      captureEvent('quality-rating', {
+      posthog.capture('quality-rating', {
         rating: selectedRating,
         ...metadata,
       })
@@ -237,8 +243,73 @@ 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 = ({
@@ -247,6 +318,12 @@ 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(), [])
@@ -262,14 +339,37 @@ export const Rating = ({
   if (!isAnalyticsEnabled) return
 
   if (step == 0) {
-    return <RateQuality onNext={() => setStep(step + 1)} metadata={metadata} />
+    return (
+      <RateQuality
+        posthog={posthog}
+        onNext={() => setStep(step + 1)}
+        metadata={metadata}
+      />
+    )
   }
 
   if (step == 1) {
-    return <OpenFeedback onNext={() => setStep(step + 1)} metadata={metadata} />
+    return (
+      <OpenFeedback
+        posthog={posthog}
+        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

@@ -1,123 +0,0 @@
-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

@@ -1,64 +0,0 @@
-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

@@ -1,11 +0,0 @@
-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

@@ -1,19 +0,0 @@
-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,36 +1,160 @@
 import { useEffect } from 'react'
-import { syncPermissions } from '@/stores/permissions'
+import { permissionsStore } from '@/stores/permissions'
+import { isSafari } from '@/utils/livekit'
+
+const POLLING_TIME = 500
 
 export const useWatchPermissions = () => {
   useEffect(() => {
-    const sync = () => void syncPermissions()
-    sync()
+    let cleanup: (() => void) | undefined
+    let intervalId: ReturnType<typeof setTimeout> | undefined
+    let isCancelled = false
 
-    navigator.mediaDevices?.addEventListener?.('devicechange', sync)
-    window.addEventListener('focus', sync)
+    const checkPermissions = async () => {
+      try {
+        if (!navigator.permissions) {
+          if (!isCancelled) {
+            permissionsStore.cameraPermission = 'unavailable'
+            permissionsStore.microphonePermission = 'unavailable'
+          }
+          return
+        }
 
-    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.
-        })
+        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
+        }
+      }
     }
+    checkPermissions()
 
     return () => {
-      cancelled = true
-      navigator.mediaDevices?.removeEventListener?.('devicechange', sync)
-      window.removeEventListener('focus', sync)
-      statuses.forEach((s) => s.removeEventListener('change', sync))
+      isCancelled = true
+      cleanup?.()
     }
   }, [])
 }

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

@@ -13,7 +13,6 @@ 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' })
@@ -50,7 +49,12 @@ export const Admin = () => {
     isScreenShareEnabled,
   } = usePublishSourcesManager()
 
-  const { toggleMuting, isMutingEnabled } = usePermissionsManager()
+  const {
+    toggleMuting,
+    isMutingEnabled,
+    isAuthenticatedCanRecordEnabled,
+    toggleAuthenticatedCanRecord,
+  } = usePermissionsManager()
 
   return (
     <Div
@@ -155,6 +159,17 @@ export const Admin = () => {
               fullWidth: true,
             }}
           />
+          <Field
+            type="switch"
+            label={'Authenticated can record'}
+            description={'Authenticated can record'}
+            isSelected={isAuthenticatedCanRecordEnabled}
+            onChange={toggleAuthenticatedCanRecord}
+            wrapperProps={{
+              noMargin: true,
+              fullWidth: true,
+            }}
+          />
         </div>
       </div>
       <div
@@ -206,7 +221,7 @@ export const Admin = () => {
             patchRoom({
               roomId,
               room: { access_level: value as ApiAccessLevel },
-            }).catch((e) => reportError('generic_failure', e))
+            }).catch((e) => console.error(e))
           }
           items={[
             {

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

@@ -9,16 +9,28 @@ 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<
@@ -68,6 +80,100 @@ 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
 
@@ -76,23 +182,23 @@ export const ConnectionObserver = () => {
       // total session duration from first connect to final disconnect.
       if (connectionStartTimeRef.current != null) return
       connectionStartTimeRef.current = Date.now()
-      void captureMediaEvent('connection-event', {})
+      posthog.capture('connection-event')
     }
 
     const handleReconnect = () => {
-      captureEvent('reconnect-event')
+      posthog.capture('reconnect-event')
     }
 
     const handleReconnected = () => {
-      captureEvent('reconnected-event')
+      posthog.capture('reconnected-event')
     }
 
     const handleSignalingConnect = () => {
-      captureEvent('signaling-connect-event')
+      posthog.capture('signaling-connect-event')
     }
 
     const handleSignalingReconnect = () => {
-      captureEvent('signaling-reconnect-event')
+      posthog.capture('signaling-reconnect-event')
     }
 
     const handleDisconnect = (
@@ -100,7 +206,7 @@ export const ConnectionObserver = () => {
     ) => {
       const connectionEndTime = Date.now()
 
-      captureEvent('disconnect-event', {
+      posthog.capture('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 = data?.slug ? getRouteUrl('room', data.slug) : ''
+  const roomUrl = getRouteUrl('room', data?.slug)
 
   const telephony = useTelephony()
 

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

@@ -1,20 +0,0 @@
-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,18 +9,15 @@ 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
 
@@ -28,12 +25,18 @@ export const VideoResolutionSubscription = () => {
       publication: RemoteTrackPublication,
       _participant: RemoteParticipant
     ) => {
-      if (effectiveQuality === VideoQuality.HIGH) return
+      // By default, the maximum quality is set to high
+      if (
+        videoSubscribeQuality === undefined ||
+        videoSubscribeQuality === VideoQuality.HIGH
+      )
+        return
+
       if (
         publication.kind === Track.Kind.Video &&
         publication.source !== Track.Source.ScreenShare
       ) {
-        publication.setVideoQuality(effectiveQuality)
+        publication.setVideoQuality(videoSubscribeQuality)
       }
     }
 
@@ -41,20 +44,7 @@ export const VideoResolutionSubscription = () => {
     return () => {
       room.off(RoomEvent.TrackPublished, handleTrackPublished)
     }
-  }, [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])
+  }, [room, videoSubscribeQuality])
 
   return null
 }

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

@@ -1,4 +1,5 @@
 import type { ProcessorOptions, Track } from 'livekit-client'
+import posthog from 'posthog-js'
 import {
   FilesetResolver,
   ImageSegmenter,
@@ -17,7 +18,6 @@ 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()
 
-    captureEvent('firefox-blurring-init', {})
+    posthog.capture('firefox-blurring-init')
   }
 
   _initVirtualBackgroundImage() {

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

@@ -1,4 +1,5 @@
 import type { ProcessorOptions, Track, TrackProcessor } from 'livekit-client'
+import posthog from 'posthog-js'
 import {
   FilesetResolver,
   FaceLandmarker,
@@ -15,7 +16,6 @@ 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()
 
-    captureEvent('face-landmarks-init', {})
+    posthog.capture('face-landmarks-init')
   }
 
   _initWorker() {

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

@@ -1,7 +1,4 @@
-import {
-  ProcessorWrapper,
-  supportsBackgroundProcessors,
-} from '@livekit/track-processors'
+import { ProcessorWrapper } from '@livekit/track-processors'
 import type { Track, TrackProcessor } from 'livekit-client'
 import { BackgroundCustomProcessor } from './BackgroundCustomProcessor'
 import { UnifiedBackgroundTrackProcessor } from './UnifiedBackgroundTrackProcessor'
@@ -13,7 +10,7 @@ export const SELFIE_SEGMENTER_MODEL_PATH =
 export const FACE_LANDMARKS_MODEL_PATH =
   '/assets/mediapipe/models/face_landmarker.task'
 
-export const MEDIAPIPE_PATH_WASM = `/assets/mediapipe/wasm/${__MEDIAPIPE_VERSION__}`
+export const MEDIAPIPE_PATH_WASM = '/assets/mediapipe/wasm'
 
 export enum ProcessorType {
   BLUR = 'blur',
@@ -37,9 +34,7 @@ export class BackgroundProcessorFactory {
   }
 
   static isSupported() {
-    return (
-      supportsBackgroundProcessors() || BackgroundCustomProcessor.isSupported
-    )
+    return ProcessorWrapper.isSupported || BackgroundCustomProcessor.isSupported
   }
 
   static getProcessor(
@@ -50,7 +45,7 @@ export class BackgroundProcessorFactory {
 
     if (!isBlur && !isVirtual) return undefined
 
-    if (supportsBackgroundProcessors()) {
+    if (ProcessorWrapper.isSupported) {
       return new UnifiedBackgroundTrackProcessor(config)
     }
 

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

@@ -4,7 +4,6 @@ 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',
@@ -104,11 +103,7 @@ export const CameraSwitchButton = (props: Partial<ButtonProps>) => {
       setActiveMediaDevice(device.deviceId)
       setFacingMode(target)
     } else {
-      reportError(
-        'device_switch_failure',
-        new Error('Cannot get user device with facingMode ' + target),
-        { path: 'switch_device', kind: 'videoinput', facing_mode: target }
-      )
+      console.error('Cannot get user device with facingMode ' + target)
     }
   }
   return (

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

@@ -1,12 +1,8 @@
 import { useTranslation } from 'react-i18next'
-import {
-  useLocalParticipant,
-  useTrackToggle,
-  UseTrackToggleProps,
-} from '@livekit/components-react'
+import { useTrackToggle, UseTrackToggleProps } from '@livekit/components-react'
 import { Button, Popover } from '@/primitives'
 import { RiArrowUpSLine } from '@remixicon/react'
-import { LocalAudioTrack, Track } from 'livekit-client'
+import { Track } from 'livekit-client'
 
 import { ToggleDevice } from './ToggleDevice'
 import { css } from '@/styled-system/css'
@@ -55,12 +51,6 @@ 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}`)
@@ -121,7 +111,6 @@ 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

@@ -1,132 +0,0 @@
-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

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

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

@@ -4,12 +4,7 @@ import { useEffect, useMemo } from 'react'
 import { Select, SelectProps } from '@/primitives/Select'
 import type { Placement } from '@react-types/overlays'
 import { useCannotUseDevice } from '../../../hooks/useCannotUseDevice'
-import { useDeviceMissing } from '../../../hooks/useDeviceMissing'
 import { useDeviceIcons } from '@/features/rooms/livekit/hooks/useDeviceIcons'
-import type { LocalAudioTrack } from 'livekit-client'
-import { AudioLevelGauge } from './AudioLevelGauge'
-import { OutputSoundTester } from './OutputSoundTester'
-import { canTestAudioOutput } from '@/features/rooms/utils/canTestAudioOutput'
 
 type DeviceItems = Array<{ value: string; label: string }>
 
@@ -23,7 +18,6 @@ type SelectDeviceProps = {
   onSubmit?: (id: string) => void
   kind: MediaDeviceKind
   context?: 'join' | 'room'
-  track?: LocalAudioTrack
 }
 
 type SelectDevicePermissionsProps<T> = SelectDeviceProps &
@@ -34,7 +28,6 @@ const SelectDevicePermissions = <T extends string | number>({
   kind,
   onSubmit,
   iconComponent,
-  track,
   ...props
 }: SelectDevicePermissionsProps<T>) => {
   const { t } = useTranslation('rooms', { keyPrefix: 'selectDevice' })
@@ -81,16 +74,6 @@ 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}
     />
   )
@@ -101,7 +84,6 @@ export const SelectDevice = ({
   onSubmit,
   kind,
   context = 'join',
-  track,
 }: SelectDeviceProps) => {
   const { t } = useTranslation('rooms', { keyPrefix: 'selectDevice' })
 
@@ -114,25 +96,6 @@ 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 (
@@ -153,7 +116,6 @@ 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, useRef, useState } from 'react'
+import { useMemo, useState } from 'react'
 import { appendShortcutLabel } from '@/features/shortcuts/utils'
 import { useTranslation } from 'react-i18next'
 import { PermissionNeededButton } from './PermissionNeededButton'
@@ -12,16 +12,10 @@ 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 {
@@ -96,45 +90,9 @@ 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 () => {
@@ -181,20 +139,7 @@ export const ToggleDevice = <T extends ToggleSource>({
 
   return (
     <div style={{ position: 'relative' }}>
-      {(cannotUseDevice || deviceMissing) && (
-        <PermissionNeededButton
-          tooltip={deviceMissing ? t(`deviceNotFound.${kind}`) : undefined}
-          onPress={
-            deviceMissing ? () => setShowDeviceNotFound(true) : undefined
-          }
-        />
-      )}
-      {silentMicWarning && (
-        <PermissionNeededButton
-          tooltip={t('tooltip', { keyPrefix: 'silentMic' })}
-          onPress={openSilentMicDialog}
-        />
-      )}
+      {cannotUseDevice && <PermissionNeededButton />}
       <ToggleButton
         isSelected={!enabled}
         isDisabled={isDisabled}
@@ -202,25 +147,23 @@ export const ToggleDevice = <T extends ToggleSource>({
           isDisabled || cannotUseDevice || !enabled ? errorVariant : variant
         }
         shySelected
-        onPress={onPress}
+        onPress={() => {
+          if (cannotUseDevice) {
+            openPermissionsDialog(kind)
+          }
+          toggle()
+        }}
         aria-label={toggleLabel}
         tooltip={
-          deviceMissing
-            ? t(`deviceNotFound.${kind}`)
-            : cannotUseDevice
-              ? t('tooltip', { keyPrefix: 'permissionsButton' })
-              : toggleLabel
+          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,7 +3,6 @@ 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' })
@@ -16,11 +15,11 @@ export const LeaveButton = () => {
       tooltip={t('leave')}
       aria-label={t('leave')}
       onPress={() => {
-        room.disconnect(true).catch((e) =>
-          reportError('disconnect_failure', e, {
-            context: 'An error occurred while disconnecting:',
-          })
-        )
+        room
+          .disconnect(true)
+          .catch((e) =>
+            console.error('An error occurred while disconnecting:', e)
+          )
       }}
       data-attr="controls-leave"
     >

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

@@ -33,7 +33,6 @@ 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,
@@ -239,9 +238,7 @@ export const EffectsConfiguration = ({
 
         updateEffectStatusMessage(config, wasSelectedBeforeToggle)
       } catch (error) {
-        reportError('effects_processor_failure', error, {
-          context: 'Error applying effect:',
-        })
+        console.error('Error applying effect:', error)
       } 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,7 +5,6 @@ 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
@@ -56,9 +55,7 @@ export const FunnyEffects = ({
         await videoTrack.setProcessor(newProcessor)
       }
     } catch (e) {
-      reportError('effects_processor_failure', e, {
-        context: 'could not update processor',
-      })
+      console.error('could not update processor', e)
     } finally {
       onPending(false)
     }

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

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

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

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

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

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

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

@@ -1,24 +0,0 @@
-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

@@ -1,336 +0,0 @@
-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,7 +1,6 @@
 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()
@@ -11,6 +10,8 @@ export const usePermissionsManager = () => {
   const roomId = data?.slug
 
   const isMutingEnabled = configuration?.everyone_can_mute ?? true
+  const isAuthenticatedCanRecordEnabled =
+    configuration?.authenticated_can_record ?? true
 
   const toggleMuting = useCallback(
     async (enabled: boolean) => {
@@ -29,9 +30,33 @@ export const usePermissionsManager = () => {
 
         return { configuration: newConfiguration }
       } catch (error) {
-        reportError('permissions_api_failure', error, {
-          context: 'Failed to update muting permission:',
+        console.error('Failed to update muting permission:', error)
+        return { success: false, error }
+      }
+    },
+    [configuration, roomId, patchRoom]
+  )
+
+  const toggleAuthenticatedCanRecord = useCallback(
+    async (enabled: boolean) => {
+      if (!roomId) return
+
+      try {
+        const newConfiguration = {
+          ...configuration,
+          authenticated_can_record: enabled,
+        }
+
+        const room = await patchRoom({
+          roomId,
+          room: { configuration: newConfiguration },
         })
+
+        queryClient.setQueryData([keys.room, roomId], room)
+
+        return { configuration: newConfiguration }
+      } catch (error) {
+        console.error('Failed to update recording permission:', error)
         return { success: false, error }
       }
     },
@@ -41,5 +66,7 @@ export const usePermissionsManager = () => {
   return {
     toggleMuting,
     isMutingEnabled,
+    isAuthenticatedCanRecordEnabled,
+    toggleAuthenticatedCanRecord,
   }
 }

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

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

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

@@ -8,7 +8,6 @@ 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
@@ -80,9 +79,9 @@ export function useRaisedHand({ participant }: useRaisedHandProps) {
     try {
       await raiseHand(!isHandRaised)
     } catch (e) {
-      reportError('generic_failure', e, {
-        context: 'toggle_raised_hand',
-      })
+      console.error(
+        `Failed to toggle hand: ${e instanceof Error ? e.message : 'Unknown error'}`
+      )
     }
   }
 

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

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

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

@@ -1,40 +0,0 @@
-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

@@ -1,103 +0,0 @@
-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,8 +12,7 @@ import type { ToggleButtonProps } from '@/primitives/ToggleButton'
 import { RiArrowDownSLine, RiArrowUpSLine } from '@remixicon/react'
 import { useTranslation } from 'react-i18next'
 
-const CONTROL_BAR_BREAKPOINT_WIDE = 1100
-const CONTROL_BAR_BREAKPOINT_NARROW = 1050
+const CONTROL_BAR_BREAKPOINT = 1100
 
 const NavigationControls = ({
   onPress,
@@ -66,9 +65,10 @@ export const LateralMenu = () => {
     </DialogTrigger>
   )
 }
+
 interface BreakpointObserverProps {
   containerRef: RefObject<HTMLDivElement>
-  onWideChange: (isWide: boolean | null) => void
+  onWideChange: (isWide: boolean) => void
 }
 
 const BreakpointObserver = ({
@@ -76,20 +76,7 @@ const BreakpointObserver = ({
   onWideChange,
 }: BreakpointObserverProps) => {
   const { width } = useSize(containerRef)
-  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])
+  const isWide = width > CONTROL_BAR_BREAKPOINT
 
   useEffect(() => {
     onWideChange(isWide)
@@ -103,7 +90,7 @@ export const MoreOptions = ({
 }: {
   parentElement: RefObject<HTMLDivElement>
 }) => {
-  const [isWide, setIsWide] = useState<boolean | null>(null)
+  const [isWide, setIsWide] = useState(false)
 
   return (
     <nav
@@ -120,7 +107,7 @@ export const MoreOptions = ({
         containerRef={parentElement}
         onWideChange={setIsWide}
       />
-      {isWide !== null && (isWide ? <NavigationControls /> : <LateralMenu />)}
+      {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,10 +25,6 @@ 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
@@ -57,6 +53,7 @@ export interface VideoConferenceProps extends React.HTMLAttributes<HTMLDivElemen
  * @public
  */
 export function VideoConference({ ...props }: VideoConferenceProps) {
+  useRoomPageTitle()
   useNoiseReduction()
 
   const { isOpen: isPictureInPictureOpen } = usePictureInPicture()
@@ -67,13 +64,9 @@ export function VideoConference({ ...props }: VideoConferenceProps) {
     <>
       <RoomMetadataSynchronizer />
       <ConnectionObserver />
-      <SyncDevicePreferences />
-      <RoomSilentMicDetector />
       <MediaStateObserver />
       <ChatProvider />
       <VideoResolutionSubscription />
-      <PerformanceModeController />
-      <CpuConstrainedObserver />
       <div
         className="lk-video-conference"
         {...props}
@@ -98,10 +91,7 @@ export function VideoConference({ ...props }: VideoConferenceProps) {
             </RoomContentArea>
             <ControlBar
               onDeviceError={(e) => {
-                reportError('device_switch_failure', e.error, {
-                  at: 'ControlBar.onDeviceError',
-                  source: e.source,
-                })
+                console.error(e)
                 if (
                   e.source == Track.Source.ScreenShare &&
                   e.error.toString() ==

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

@@ -6,6 +6,7 @@ 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', {
@@ -47,6 +48,10 @@ 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,7 +7,6 @@ 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,
@@ -15,14 +14,11 @@ 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>
   )
@@ -40,15 +36,12 @@ 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

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

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

@@ -5,7 +5,6 @@ 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()
@@ -53,9 +52,7 @@ const CreatePopup = () => {
           popupWindow.close()
         })
       } catch (error) {
-        reportError('generic_failure', error, {
-          context: 'Failed to create meeting room:',
-        })
+        console.error('Failed to create meeting room:', error)
       }
     }
     if (isLoggedIn && callbackId) {

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

@@ -15,7 +15,6 @@ 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
 
@@ -109,7 +108,7 @@ const SettingsPopup = () => {
     patchRoom({
       roomId: roomSlug,
       room: { configuration: newConfiguration },
-    }).catch((e) => reportError('generic_failure', e))
+    }).catch((e) => console.error(e))
   }
 
   const updateSource = (sources: Source[], enabled: boolean) => {
@@ -330,7 +329,7 @@ const SettingsPopup = () => {
               patchRoom({
                 roomId: roomSlug,
                 room: { access_level: value as ApiAccessLevel },
-              }).catch((e) => reportError('generic_failure', e))
+              }).catch((e) => console.error(e))
             }
             items={[
               {