fixup! ✨(frontend) expose media state in the DOM for the Renater gateway

Add a hidden div in the DOM that reflects the current state of the
microphone and camera, so that the Renater SIP media gateway can
observe it and keep an accurate view of the media state.

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

@@ -0,0 +1,42 @@
+import { useLocalParticipant } from '@livekit/components-react'
+import { useEffect } from 'react'
+
+export const MEDIA_STATE_ELEMENT_ID = 'media-state'
+export const MEDIA_STATE_CHANGED_EVENT = 'media-state-changed'
+
+export type MediaStateChangedDetail = {
+  microphoneEnabled: boolean
+  cameraEnabled: boolean
+}
+
+/**
+ * Exposes the local participant's media state in the DOM so external tools
+ * (e.g. bots automating the frontend) can reliably read the microphone and
+ * camera state, and watch for changes with a MutationObserver:
+ *
+ * const el = document.getElementById('media-state')
+ * new MutationObserver(...).observe(el, { attributes: true })
+ */
+export const MediaStateObserver = () => {
+  const { isMicrophoneEnabled, isCameraEnabled } = useLocalParticipant()
+
+  useEffect(() => {
+    window.dispatchEvent(
+      new CustomEvent<MediaStateChangedDetail>(MEDIA_STATE_CHANGED_EVENT, {
+        detail: {
+          microphoneEnabled: isMicrophoneEnabled,
+          cameraEnabled: isCameraEnabled,
+        },
+      })
+    )
+  }, [isMicrophoneEnabled, isCameraEnabled])
+
+  return (
+    <div
+      id={MEDIA_STATE_ELEMENT_ID}
+      style={{ display: 'none' }}
+      data-microphone-enabled={isMicrophoneEnabled ? 'true' : 'false'}
+      data-camera-enabled={isCameraEnabled ? 'true' : 'false'}
+    />
+  )
+}

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

@@ -11,6 +11,7 @@ import { SidePanel } from '../components/SidePanel'
 import { RecordingProvider } from '@/features/recording'
 import { ScreenShareErrorModal } from '../components/ScreenShareErrorModal'
 import { ConnectionObserver } from '../components/ConnectionObserver'
+import { MediaStateObserver } from '../components/MediaStateObserver'
 import { RoomMetadataSynchronizer } from '../components/RoomMetadataSynchronizer'
 import { useRoomPageTitle } from '../hooks/useRoomPageTitle'
 import { useNoiseReduction } from '../hooks/useNoiseReduction'
@@ -63,6 +64,7 @@ export function VideoConference({ ...props }: VideoConferenceProps) {
     <>
       <RoomMetadataSynchronizer />
       <ConnectionObserver />
+      <MediaStateObserver />
       <ChatProvider />
       <VideoResolutionSubscription />
       <div