🐛(frontend) harden speaker test against missing sinks and play errors

- Only call `setSinkId` when supported and the device is actually
  enumerated: LiveKit can fall back to a stale id on browsers (e.g.
  WebKit) that expose no such device, making `setSinkId` throw
  `NotFoundError`.
- Await `audio.play()` and reset the playing state on failure, to
  avoid a stuck button and an unhandled rejection.
- Use an absolute `/sounds/uprise.mp3` URL so the asset resolves
  regardless of the current SPA route.

CHANGELOG.md

@@ -8,19 +8,11 @@ and this project adheres to
 
 ## [Unreleased]
 
-### Changed
-
-- 🔥(frontend) drop unused vendored ConnectionObserver
-- 🐛(frontend) vendor formatChatMessageLinks and trim surrounding newlines
-
 ### Fixed
 
 - 📈(frontend) downgrade unreachable external home URL from error to event
 - 🐛(frontend) handle 401 responses when syncing user preferences
 - 🐛(frontend) harden speaker test against missing sinks and play errors
-- 🐛(frontend) implement hysteresis band for the control bar layout
-- 🐛(frontend) fix toolbar ResizeObserver loop and alignment drift
-- 🐛(analytics) filter benign ResizeObserver loop error in Sentry/PostHog
 
 ## [1.26.0] - 2026-08-12
 

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

@@ -2,7 +2,6 @@ import { useEffect } from 'react'
 import { type ApiUser } from '@/features/auth/api/ApiUser'
 import { useUser } from '@/features/auth/api/useUser'
 import { getPosthog } from '../utils'
-import { filterExceptions } from '../exceptionFilters'
 
 export const startAnalyticsSession = (data: ApiUser) => {
   getPosthog().then((ph) => {
@@ -48,7 +47,6 @@ export const useAnalytics = ({
           capture_unhandled_rejections: true,
           capture_console_errors: true,
         },
-        before_send: filterExceptions,
       })
     })
   }, [id, host, flags_api_host, isDisabled])

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/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/rooms/components/Conference.tsx

@@ -30,6 +30,7 @@ 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'
@@ -246,8 +247,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(

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

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

src/frontend/src/features/rooms/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 { useFeatureFlagEnabled } from 'posthog-js/react'
+import { isMobileBrowser } from '@livekit/components-core'
+import { FeatureFlags } from '@/features/analytics/enums'
+import { captureEvent, captureMediaEvent } from '@/features/analytics/telemetry'
+
+const CANDIDATE_POLL_INTERVAL_MS = 5000
+
 export const ConnectionObserver = () => {
   const room = useRoomContext()
   const connectionStartTimeRef = useRef<number | null>(null)
 
   const { data } = useConfig()
   const isAnalyticsEnabled = useIsAnalyticsEnabled()
+
+  const featureEnabled = useFeatureFlagEnabled(FeatureFlags.candidatePolling)
+  const isMobile = isMobileBrowser()
+
+  const isAdvancedConnectionObserverEnabled =
+    !isMobile && isAnalyticsEnabled && featureEnabled
+
   const userPreferencesSnap = useSnapshot(userPreferencesStore)
 
   const idleDisconnectModalTimeoutRef = useRef<ReturnType<
@@ -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
 

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/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/stores/connectionObserver.ts

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