🐛(backend) preserve recording metadata when updating room access

Updating room access rewrote the entire metadata payload, removing information
about active recordings. This caused the frontend to lose track of ongoing
recordings and could trigger 409 errors when attempting to start a new
recording.

Consolidate the duplicated metadata update logic into
`RoomManagement.update_metadata()` and preserve merge behavior instead of
overwriting the full metadata object.

CHANGELOG.md

@@ -8,16 +8,6 @@ and this project adheres to
 
 ## [Unreleased]
 
-### Added
-
-- ✨(summary) report exception type in failure analytics
-
-## Fixed
-
-- 🐛(transcription) fix silent bug in speaker assignment
-- 🐛(summary) extend tasks auto retry logic
-- 🐛(summary) properly detect when failure webhook should be sent
-
 ### Changed
 
 - ⬆️(frontend) upgrade @mediapipe/tasks-vision from 0.10.14 to 0.10.35
@@ -25,7 +15,11 @@ and this project adheres to
 - ⬆️(frontend) upgrade posthog-js from 1.391.2 to 1.395.0
 - ⬆️(frontend) upgrade @tanstack/react-query from 5.101.0 to 5.101.1
 - ⬆️(frontend) upgrade livekit-client from 2.19.2 to 2.20.0
-- ⚡️(frontend) limit unnecessary re-renders #1510
+
+## Fixed
+
+- 🐛(transcription) fix silent bug in speaker assignment
+- 🐛(backend) fix bug linked to recording state inconsistency
 
 ## [1.24.0] - 2026-07-21
 

src/backend/core/recording/services/recording_events.py

@@ -9,6 +9,11 @@ from livekit import api
 from core import models, utils
 from core.models import Recording
 from core.recording.event.notification import notification_service
+from core.services.room_management import (
+    RoomManagement,
+    RoomManagementException,
+    RoomNotFoundException,
+)
 
 logger = getLogger(__name__)
 
@@ -39,10 +44,15 @@ class RecordingEventsService:
         recording_status = status_mapping.get(egress_status)
         if recording_status:
             try:
-                utils.update_room_metadata(
+                RoomManagement().update_metadata(
                     room_name, {"recording_status": recording_status}
                 )
-            except utils.MetadataUpdateException as e:
+            except RoomNotFoundException:
+                logger.info(
+                    "LiveKit room %s no longer exists, skipping metadata update",
+                    room_name,
+                )
+            except RoomManagementException as e:
                 logger.exception("Failed to update room's metadata: %s", e)
 
     @staticmethod

src/backend/core/recording/worker/mediator.py

@@ -2,8 +2,12 @@
 
 import logging
 
-from core import utils
 from core.models import Recording, RecordingStatusChoices
+from core.services.room_management import (
+    RoomManagement,
+    RoomManagementException,
+    RoomNotFoundException,
+)
 
 from .exceptions import (
     RecordingStartError,
@@ -64,10 +68,15 @@ class WorkerServiceMediator:
         mode = recording.options.get("original_mode", None) or recording.mode
 
         try:
-            utils.update_room_metadata(
+            RoomManagement().update_metadata(
                 room_name, {"recording_mode": mode, "recording_status": "starting"}
             )
-        except utils.MetadataUpdateException as e:
+        except RoomNotFoundException:
+            logger.info(
+                "LiveKit room %s no longer exists, skipping metadata update",
+                room_name,
+            )
+        except RoomManagementException as e:
             logger.exception("Failed to update room's metadata: %s", e)
 
         logger.info(

src/backend/core/services/livekit_events.py

@@ -11,7 +11,7 @@ from django.conf import settings
 
 from livekit import api
 
-from core import models, utils
+from core import models
 from core.recording.services.metadata_collector import (
     MetadataCollectorException,
     MetadataCollectorService,
@@ -23,6 +23,11 @@ from core.recording.services.recording_events import (
 )
 
 from .lobby import LobbyService
+from .room_management import (
+    RoomManagement,
+    RoomManagementException,
+    RoomNotFoundException,
+)
 from .telephony import TelephonyException, TelephonyService
 
 logger = getLogger(__name__)
@@ -177,10 +182,15 @@ class LiveKitEventsService:
 
         try:
             room_name = str(recording.room.id)
-            utils.update_room_metadata(
-                room_name, {}, ["recording_mode", "recording_status"]
+            RoomManagement().update_metadata(
+                room_name, remove_keys=["recording_mode", "recording_status"]
             )
-        except utils.MetadataUpdateException as e:
+        except RoomNotFoundException:
+            logger.info(
+                "LiveKit room %s no longer exists, skipping metadata update",
+                room_name,
+            )
+        except RoomManagementException as e:
             logger.exception("Failed to update room's metadata: %s", e)
 
         if recording.options.get("metadata_collector_dispatch_id", None) is not None:

src/backend/core/services/room_management.py

@@ -8,6 +8,7 @@ from typing import Dict, Optional
 
 from asgiref.sync import async_to_sync
 from livekit.api import (
+    ListRoomsRequest,
     TwirpError,
     UpdateRoomMetadataRequest,
 )
@@ -29,20 +30,45 @@ class RoomManagement:
     """Service for managing LiveKit rooms."""
 
     @async_to_sync
-    async def update_metadata(self, room_name: str, metadata: Optional[Dict] = None):
-        """Update a LiveKit room's metadata.
+    async def update_metadata(
+        self,
+        room_name: str,
+        metadata: Optional[Dict] = None,
+        remove_keys: Optional[list[str]] = None,
+    ):
+        """Merge values into a LiveKit room's metadata.
 
         The `room_name` corresponds to the LiveKit room identifier
         (i.e. the Room model's UUID as a string).
+
+        Raises:
+            RoomNotFoundException: the room does not exist in LiveKit.
+            RoomManagementException: the metadata update otherwise fails.
         """
 
         lkapi = utils.create_livekit_client()
 
         try:
+            response = await lkapi.room.list_rooms(ListRoomsRequest(names=[room_name]))
+
+            if not response.rooms:
+                logger.warning(
+                    "Room %s not found in LiveKit, skipping metadata update",
+                    room_name,
+                )
+                raise RoomNotFoundException("Room does not exist")
+
+            existing_metadata = json.loads(response.rooms[0].metadata or "{}")
+
+            for key in remove_keys or []:
+                existing_metadata.pop(key, None)
+
+            updated_metadata = {**existing_metadata, **(metadata or {})}
+
             await lkapi.room.update_room_metadata(
                 UpdateRoomMetadataRequest(
                     room=room_name,
-                    metadata=json.dumps(metadata) if metadata is not None else "",
+                    metadata=json.dumps(updated_metadata),
                 )
             )
 

src/backend/core/tests/recording/worker/test_mediator.py

@@ -34,10 +34,8 @@ def mediator(mock_worker_service):
     return WorkerServiceMediator(mock_worker_service)
 
 
-@mock.patch("core.utils.update_room_metadata")
-def test_start_recording_success(
-    mock_update_room_metadata, mediator, mock_worker_service
-):
+@mock.patch("core.services.room_management.RoomManagement.update_metadata")
+def test_start_recording_success(mock_update_metadata, mediator, mock_worker_service):
     """Test successful recording start"""
     # Setup
     worker_id = "test-worker-123"
@@ -60,7 +58,7 @@ def test_start_recording_success(
     assert mock_recording.worker_id == worker_id
     assert mock_recording.status == RecordingStatusChoices.ACTIVE
 
-    mock_update_room_metadata.assert_called_once_with(
+    mock_update_metadata.assert_called_once_with(
         str(mock_recording.room.id),
         {"recording_mode": mock_recording.mode, "recording_status": "starting"},
     )
@@ -69,9 +67,9 @@ def test_start_recording_success(
 @pytest.mark.parametrize(
     "error_class", [WorkerRequestError, WorkerConnectionError, WorkerResponseError]
 )
-@mock.patch("core.utils.update_room_metadata")
+@mock.patch("core.services.room_management.RoomManagement.update_metadata")
 def test_mediator_start_recording_worker_errors(
-    mock_update_room_metadata, mediator, mock_worker_service, error_class
+    mock_update_metadata, mediator, mock_worker_service, error_class
 ):
     """Test handling of various worker errors during start"""
     # Setup
@@ -89,7 +87,7 @@ def test_mediator_start_recording_worker_errors(
     assert mock_recording.status == RecordingStatusChoices.FAILED_TO_START
     assert mock_recording.worker_id is None
 
-    mock_update_room_metadata.assert_not_called()
+    mock_update_metadata.assert_not_called()
 
 
 @pytest.mark.parametrize(
@@ -103,9 +101,9 @@ def test_mediator_start_recording_worker_errors(
         RecordingStatusChoices.ABORTED,
     ],
 )
-@mock.patch("core.utils.update_room_metadata")
+@mock.patch("core.services.room_management.RoomManagement.update_metadata")
 def test_mediator_start_recording_from_forbidden_status(
-    mock_update_room_metadata, mediator, mock_worker_service, status
+    mock_update_metadata, mediator, mock_worker_service, status
 ):
     """Test handling of various worker errors during start"""
     # Setup
@@ -119,7 +117,7 @@ def test_mediator_start_recording_from_forbidden_status(
     mock_recording.refresh_from_db()
     assert mock_recording.status == status
 
-    mock_update_room_metadata.assert_not_called()
+    mock_update_metadata.assert_not_called()
 
 
 def test_mediator_stop_recording_success(mediator, mock_worker_service):

src/backend/core/tests/services/test_livekit_events.py

@@ -20,8 +20,9 @@ from core.services.livekit_events import (
     api,
 )
 from core.services.lobby import LobbyService
+from core.services.room_management import RoomManagementException
 from core.services.telephony import TelephonyException, TelephonyService
-from core.utils import MetadataUpdateException, NotificationError
+from core.utils import NotificationError
 
 pytestmark = pytest.mark.django_db
 
@@ -70,9 +71,9 @@ def test_initialization(
     ),
 )
 @mock.patch("core.utils.notify_participants")
-@mock.patch("core.utils.update_room_metadata")
+@mock.patch("core.services.room_management.RoomManagement.update_metadata")
 def test_handle_egress_ended_success(
-    mock_update_room_metadata, mock_notify, mode, notification_type, service
+    mock_update_metadata, mock_notify, mode, notification_type, service
 ):
     """Should successfully stop recording and notifies all participant."""
 
@@ -86,8 +87,8 @@ def test_handle_egress_ended_success(
     mock_notify.assert_called_once_with(
         room_name=str(recording.room.id), notification_data={"type": notification_type}
     )
-    mock_update_room_metadata.assert_called_once_with(
-        str(recording.room.id), {}, ["recording_mode", "recording_status"]
+    mock_update_metadata.assert_called_once_with(
+        str(recording.room.id), remove_keys=["recording_mode", "recording_status"]
     )
 
     recording.refresh_from_db()
@@ -104,9 +105,9 @@ def test_handle_egress_ended_success(
         (EgressStatus.EGRESS_ABORTED, "aborted"),
     ),
 )
-@mock.patch("core.utils.update_room_metadata")
+@mock.patch("core.services.room_management.RoomManagement.update_metadata")
 def test_handle_egress_updated_success(
-    mock_update_room_metadata, egress_status, status, service
+    mock_update_metadata, egress_status, status, service
 ):
     """Should successfully update room's metadata."""
 
@@ -117,7 +118,7 @@ def test_handle_egress_updated_success(
 
     service._handle_egress_updated(mock_data)
 
-    mock_update_room_metadata.assert_called_once_with(
+    mock_update_metadata.assert_called_once_with(
         str(recording.room.id), {"recording_status": status}
     )
 
@@ -129,9 +130,9 @@ def test_handle_egress_updated_success(
         EgressStatus.EGRESS_LIMIT_REACHED,
     ),
 )
-@mock.patch("core.utils.update_room_metadata")
+@mock.patch("core.services.room_management.RoomManagement.update_metadata")
 def test_handle_egress_updated_non_handled(
-    mock_update_room_metadata, egress_status, service
+    mock_update_metadata, egress_status, service
 ):
     """Should ignore certain egress status and don't trigger metadata updates."""
 
@@ -142,7 +143,7 @@ def test_handle_egress_updated_non_handled(
 
     service._handle_egress_updated(mock_data)
 
-    mock_update_room_metadata.assert_not_called()
+    mock_update_metadata.assert_not_called()
 
 
 @pytest.mark.parametrize(
@@ -153,9 +154,9 @@ def test_handle_egress_updated_non_handled(
     ),
 )
 @mock.patch("core.utils.notify_participants")
-@mock.patch("core.utils.update_room_metadata")
+@mock.patch("core.services.room_management.RoomManagement.update_metadata")
 def test_handle_egress_ended_metadata_update_fails(
-    mock_update_room_metadata, mock_notify, mode, notification_type, service
+    mock_update_metadata, mock_notify, mode, notification_type, service
 ):
     """Should successfully stop and save recording when metadata's update fails."""
 
@@ -164,7 +165,7 @@ def test_handle_egress_ended_metadata_update_fails(
     mock_data.egress_info.egress_id = recording.worker_id
     mock_data.egress_info.status = EgressStatus.EGRESS_LIMIT_REACHED
 
-    mock_update_room_metadata.side_effect = MetadataUpdateException("Error notifying")
+    mock_update_metadata.side_effect = RoomManagementException("Error notifying")
 
     service._handle_egress_ended(mock_data)
 
@@ -178,9 +179,9 @@ def test_handle_egress_ended_metadata_update_fails(
 
 
 @mock.patch("core.utils.notify_participants")
-@mock.patch("core.utils.update_room_metadata")
+@mock.patch("core.services.room_management.RoomManagement.update_metadata")
 def test_handle_egress_ended_notification_fails(
-    mock_update_room_metadata, mock_notify, service
+    mock_update_metadata, mock_notify, service
 ):
     """Should raise ActionFailedError when notification fails but still stop recording."""
 
@@ -200,15 +201,15 @@ def test_handle_egress_ended_notification_fails(
     recording.refresh_from_db()
     assert recording.status == "stopped"
 
-    mock_update_room_metadata.assert_called_once_with(
-        str(recording.room.id), {}, ["recording_mode", "recording_status"]
+    mock_update_metadata.assert_called_once_with(
+        str(recording.room.id), remove_keys=["recording_mode", "recording_status"]
     )
 
 
 @mock.patch("core.utils.notify_participants")
-@mock.patch("core.utils.update_room_metadata")
+@mock.patch("core.services.room_management.RoomManagement.update_metadata")
 def test_handle_egress_ended_recording_not_found(
-    mock_update_room_metadata, mock_notify, service
+    mock_update_metadata, mock_notify, service
 ):
     """Should raise ActionFailedError when recording doesn't exist."""
 
@@ -223,16 +224,16 @@ def test_handle_egress_ended_recording_not_found(
         service._handle_egress_ended(mock_data)
 
     mock_notify.assert_not_called()
-    mock_update_room_metadata.assert_not_called()
+    mock_update_metadata.assert_not_called()
 
     recording.refresh_from_db()
     assert recording.status == "active"
 
 
 @mock.patch("core.utils.notify_participants")
-@mock.patch("core.utils.update_room_metadata")
+@mock.patch("core.services.room_management.RoomManagement.update_metadata")
 def test_handle_egress_ended_recording_not_active(
-    mock_update_room_metadata, mock_notify, service
+    mock_update_metadata, mock_notify, service
 ):
     """Should ignore non-active recordings."""
 
@@ -244,8 +245,8 @@ def test_handle_egress_ended_recording_not_active(
     service._handle_egress_ended(mock_data)
 
     mock_notify.assert_not_called()
-    mock_update_room_metadata.assert_called_once_with(
-        str(recording.room.id), {}, ["recording_mode", "recording_status"]
+    mock_update_metadata.assert_called_once_with(
+        str(recording.room.id), remove_keys=["recording_mode", "recording_status"]
     )
 
     recording.refresh_from_db()
@@ -253,9 +254,9 @@ def test_handle_egress_ended_recording_not_active(
 
 
 @mock.patch("core.utils.notify_participants")
-@mock.patch("core.utils.update_room_metadata")
+@mock.patch("core.services.room_management.RoomManagement.update_metadata")
 def test_handle_egress_ended_recording_not_limit_reached(
-    mock_update_room_metadata, mock_notify, service
+    mock_update_metadata, mock_notify, service
 ):
     """Should ignore egress non-limit-reached statuses."""
 
@@ -267,16 +268,16 @@ def test_handle_egress_ended_recording_not_limit_reached(
     service._handle_egress_ended(mock_data)
 
     mock_notify.assert_not_called()
-    mock_update_room_metadata.assert_called_once_with(
-        str(recording.room.id), {}, ["recording_mode", "recording_status"]
+    mock_update_metadata.assert_called_once_with(
+        str(recording.room.id), remove_keys=["recording_mode", "recording_status"]
     )
     assert recording.status == "stopped"
 
 
 @mock.patch("core.services.livekit_events.MetadataCollectorService")
-@mock.patch("core.utils.update_room_metadata")
+@mock.patch("core.services.room_management.RoomManagement.update_metadata")
 def test_handle_egress_ended_calls_metadata_collector_stop_when_conditions_are_met(
-    mock_update_room_metadata, mock_collector_class, service, settings
+    mock_update_metadata, mock_collector_class, service, settings
 ):
     """Should call MetadataCollectorService.stop when it exists."""
     settings.METADATA_COLLECTOR_ENABLED = True
@@ -306,7 +307,7 @@ def test_handle_egress_ended_calls_metadata_collector_stop_when_conditions_are_m
     ],
 )
 @mock.patch("core.services.livekit_events.MetadataCollectorService")
-@mock.patch("core.utils.update_room_metadata")
+@mock.patch("core.services.room_management.RoomManagement.update_metadata")
 def test_handle_egress_ended_does_not_call_metadata_collector_stop_when_conditions_not_met(
     _, mock_collector_class, metadata_enabled, options, service, settings
 ):  # pylint: disable=too-many-arguments,too-many-positional-arguments
@@ -335,7 +336,7 @@ def test_handle_egress_ended_does_not_call_metadata_collector_stop_when_conditio
     "notify_external_services"
 )
 @mock.patch("core.utils.notify_participants")
-@mock.patch("core.utils.update_room_metadata")
+@mock.patch("core.services.room_management.RoomManagement.update_metadata")
 @pytest.mark.parametrize(
     "egress_status",
     [EgressStatus.EGRESS_COMPLETE, EgressStatus.EGRESS_LIMIT_REACHED],
@@ -345,7 +346,7 @@ def test_handle_egress_ended_does_not_call_metadata_collector_stop_when_conditio
     [(True, "notification_succeeded"), (False, "saved")],
 )
 def test_handle_egress_ended_finalizes_recording(  # noqa: PLR0913
-    mock_update_room_metadata,
+    mock_update_metadata,
     mock_notify,
     mock_notify_external_services,
     notify_return_value,
@@ -378,7 +379,7 @@ def test_handle_egress_ended_finalizes_recording(  # noqa: PLR0913
     "notify_external_services"
 )
 @mock.patch("core.utils.notify_participants")
-@mock.patch("core.utils.update_room_metadata")
+@mock.patch("core.services.room_management.RoomManagement.update_metadata")
 @pytest.mark.parametrize(
     "egress_status, expected_status",
     [
@@ -387,7 +388,7 @@ def test_handle_egress_ended_finalizes_recording(  # noqa: PLR0913
     ],
 )
 def test_handle_egress_ended_does_not_finalize_when_webhooks_enabled(  # noqa: PLR0913
-    mock_update_room_metadata,
+    mock_update_metadata,
     mock_notify,
     mock_notify_external_services,
     egress_status,
@@ -424,9 +425,9 @@ def test_handle_egress_ended_does_not_finalize_when_webhooks_enabled(  # noqa: P
         EgressStatus.EGRESS_ABORTED,
     ],
 )
-@mock.patch("core.utils.update_room_metadata")
+@mock.patch("core.services.room_management.RoomManagement.update_metadata")
 def test_handle_egress_ended_does_not_save_on_wrong_status(
-    mock_update_room_metadata, egress_status, service, settings
+    mock_update_metadata, egress_status, service, settings
 ):
     """Shouldn't save on invalid status."""
     settings.RECORDING_STORAGE_EVENT_ENABLE = False
@@ -445,9 +446,9 @@ def test_handle_egress_ended_does_not_save_on_wrong_status(
 @pytest.mark.parametrize(
     "status", ["failed_to_start", "aborted", "failed_to_stop", "saved", "initiated"]
 )
-@mock.patch("core.utils.update_room_metadata")
+@mock.patch("core.services.room_management.RoomManagement.update_metadata")
 def test_handle_egress_ended_ignores_non_savable_recording(
-    mock_update_room_metadata, status, service, settings
+    mock_update_metadata, status, service, settings
 ):
     """Should handle non-savable recordings idempotently without raising.
 

src/backend/core/utils.py

@@ -31,7 +31,6 @@ from livekit.api import (  # pylint: disable=E0611
     LiveKitAPI,
     SendDataRequest,
     TwirpError,
-    UpdateRoomMetadataRequest,
     VideoGrants,
 )
 
@@ -258,57 +257,6 @@ async def notify_participants(room_name: str, notification_data: dict):
         await lkapi.aclose()
 
 
-class MetadataUpdateException(Exception):
-    """Room's metadata update fails."""
-
-
-@async_to_sync
-async def update_room_metadata(
-    room_name: str, metadata: dict, remove_keys: Optional[list[str]] = None
-):
-    """Update LiveKit room metadata by merging new values with existing metadata.
-
-    Args:
-        room_name: Name of the room to update
-        metadata: Dictionary of metadata key-values to add/update
-        remove_keys: Optional list of keys to remove from existing metadata.
-    """
-
-    lkapi = create_livekit_client()
-
-    try:
-        response = await lkapi.room.list_rooms(
-            ListRoomsRequest(
-                names=[room_name],
-            )
-        )
-
-        if not response.rooms:
-            return
-
-        room = response.rooms[0]
-
-        existing_metadata = json.loads(room.metadata) if room.metadata else {}
-
-        if remove_keys:
-            for key in remove_keys:
-                existing_metadata.pop(key, None)
-
-        updated_metadata = {**existing_metadata, **metadata}
-
-        await lkapi.room.update_room_metadata(
-            UpdateRoomMetadataRequest(
-                room=room_name, metadata=json.dumps(updated_metadata).encode("utf-8")
-            )
-        )
-    except TwirpError as e:
-        raise MetadataUpdateException(
-            f"Failed to update metadata for room {room_name}: {e}"
-        ) from e
-    finally:
-        await lkapi.aclose()
-
-
 ALPHANUMERIC_CHARSET = string.ascii_letters + string.digits
 
 

src/frontend/panda.config.ts

@@ -114,10 +114,6 @@ const config: Config = {
           clipPath: 'polygon(50% 50%, 0 0, 100% 0, 100% 100%, 0 100%, 0 0)',
         },
       },
-      overlayIn: {
-        from: { opacity: 0 },
-        to: { opacity: 0.6 },
-      },
     },
     tokens: defineTokens({
       /* we take a few things from the panda preset but for now we clear out some stuff.

src/frontend/src/components/Avatar.tsx

@@ -7,20 +7,36 @@ const avatar = cva({
     color: 'white',
     display: 'flex',
     borderRadius: '50%',
+    justifyContent: 'center',
+    alignItems: 'center',
     userSelect: 'none',
     cursor: 'default',
     flexGrow: 0,
     flexShrink: 0,
-    overflow: 'hidden',
   },
   variants: {
     context: {
-      subtitles: { width: '40px', height: '40px' },
-      list: { width: '32px', height: '32px' },
-      placeholder: { width: '100%', height: '100%' },
+      subtitles: {
+        width: '40px',
+        height: '40px',
+        fontSize: '1.3rem',
+        lineHeight: '1rem',
+      },
+      list: {
+        width: '32px',
+        height: '32px',
+        fontSize: '1.3rem',
+        lineHeight: '1rem',
+      },
+      placeholder: {
+        width: '100%',
+        height: '100%',
+      },
     },
     notification: {
-      true: { border: '2px solid white' },
+      true: {
+        border: '2px solid white',
+      },
     },
   },
   defaultVariants: {
@@ -33,35 +49,32 @@ export type AvatarProps = React.HTMLAttributes<HTMLDivElement> & {
   bgColor?: string
 } & RecipeVariantProps<typeof avatar>
 
-export const Avatar = React.memo(
-  ({ name, bgColor, context, notification, style, ...props }: AvatarProps) => {
-    const initial = name?.trim()?.charAt(0) ?? ''
-    return (
-      <div
-        style={{ backgroundColor: bgColor, ...style }}
-        className={avatar({ context, notification })}
-        {...props}
+export const Avatar = ({
+  name,
+  bgColor,
+  context,
+  notification,
+  style,
+  ...props
+}: AvatarProps) => {
+  const initial = name?.trim()?.charAt(0) ?? ''
+  return (
+    <div
+      style={{
+        backgroundColor: bgColor,
+        ...style,
+      }}
+      className={avatar({ context, notification })}
+      {...props}
+    >
+      <span
+        aria-hidden="true"
+        className={css({
+          marginTop: '-0.3rem',
+        })}
       >
-        <svg
-          viewBox="0 0 100 100"
-          aria-hidden="true"
-          className={css({ width: '100%', height: '100%', display: 'block' })}
-        >
-          <text
-            x="50"
-            y="50"
-            textAnchor="middle"
-            dominantBaseline="central"
-            fontSize="52"
-            fontWeight="500"
-            fill="currentColor"
-          >
-            {initial}
-          </text>
-        </svg>
-      </div>
-    )
-  }
-)
-
-Avatar.displayName = 'Avatar'
+        {initial}
+      </span>
+    </div>
+  )
+}

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

@@ -1,50 +0,0 @@
-import { useTranslation } from 'react-i18next'
-import { Text } from '@/primitives'
-import { ChatMessages } from './ChatMessages'
-import { ChatTextArea } from './ChatTextArea'
-import { styled } from '@/styled-system/jsx'
-
-const ChatContainer = styled('div', {
-  base: {
-    display: 'flex',
-    padding: '0 1.5rem',
-    flexGrow: 1,
-    flexDirection: 'column',
-    minHeight: 0,
-  },
-})
-
-const ChatMessagesContainer = styled('div', {
-  base: {
-    display: 'flex',
-    flexDirection: 'column',
-    flexGrow: 1,
-    minHeight: 0,
-  },
-})
-
-const TextContainer = styled('div', {
-  base: {
-    display: 'flex',
-    padding: '0.75rem',
-    backgroundColor: 'greyscale.50',
-    borderRadius: 4,
-    marginBottom: '0.75rem',
-  },
-})
-
-export const Chat = () => {
-  const { t } = useTranslation('rooms', { keyPrefix: 'chat' })
-
-  return (
-    <ChatContainer>
-      <TextContainer>
-        <Text variant="sm">{t('disclaimer')}</Text>
-      </TextContainer>
-      <ChatMessagesContainer>
-        <ChatMessages />
-      </ChatMessagesContainer>
-      <ChatTextArea />
-    </ChatContainer>
-  )
-}

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

@@ -1,34 +0,0 @@
-import type { ChatRow } from '@/stores/chat'
-import { styled } from '@/styled-system/jsx'
-import { ChatMessageMetadata } from './ChatMessageMedata'
-import { ChatMessageBody } from './ChatMessageBody'
-
-const StyledContainer = styled('li', {
-  base: {
-    display: 'flex',
-    flexDirection: 'column',
-    gap: '0.25rem',
-  },
-})
-
-type ChatMessageProps = {
-  item: ChatRow
-}
-
-export const ChatMessage = ({ item }: ChatMessageProps) => {
-  const time = new Date(item.timestamp)
-  const locale = navigator ? navigator.language : 'en-US'
-  return (
-    <StyledContainer
-      title={time.toLocaleTimeString(locale, { timeStyle: 'full' })}
-    >
-      {!item.hideMetadata && (
-        <ChatMessageMetadata
-          timestamp={item.timestamp}
-          identity={item.identity}
-        />
-      )}
-      <ChatMessageBody message={item.message} />
-    </StyledContainer>
-  )
-}

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

@@ -1,33 +0,0 @@
-import { ChatRow } from '@/stores/chat'
-import React, { useMemo } from 'react'
-import { formatChatMessageLinks } from '@livekit/components-react'
-import { css } from '@/styled-system/css'
-import { Text } from '@/primitives'
-
-type ChatMessageBodyProps = Pick<ChatRow, 'message'>
-
-export const ChatMessageBody = React.memo(
-  ({ message }: ChatMessageBodyProps) => {
-    const formattedMessage = useMemo(() => {
-      return formatChatMessageLinks(message)
-    }, [message])
-
-    return (
-      <Text
-        variant="sm"
-        margin={false}
-        className={css({
-          whiteSpace: 'pre-wrap',
-          '& .lk-chat-link': {
-            color: 'blue',
-            textDecoration: 'underline',
-          },
-        })}
-      >
-        {formattedMessage}
-      </Text>
-    )
-  }
-)
-
-ChatMessageBody.displayName = 'ChatMessageBody'

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

@@ -1,41 +0,0 @@
-import { styled } from '@/styled-system/jsx'
-import { ChatRow, chatStore } from '@/stores/chat'
-import React, { useMemo } from 'react'
-import { useSnapshot } from 'valtio'
-import { Text } from '@/primitives'
-
-const StyledContainer = styled('span', {
-  base: {
-    display: 'flex',
-    gap: '0.5rem',
-    paddingTop: '0.75rem',
-  },
-})
-
-type ChatMessageMetadataProps = Pick<ChatRow, 'identity' | 'timestamp'>
-
-export const ChatMessageMetadata = React.memo(
-  ({ identity, timestamp }: ChatMessageMetadataProps) => {
-    const time = new Date(timestamp)
-    const locale = navigator ? navigator.language : 'en-US'
-
-    const { names } = useSnapshot(chatStore)
-
-    const currentDisplayName = useMemo(() => {
-      if (identity) return names[identity] ?? identity
-    }, [names, identity])
-
-    return (
-      <StyledContainer>
-        <Text bold={true} variant="sm">
-          {currentDisplayName}
-        </Text>
-        <Text variant="smNote" wrap="no">
-          {time.toLocaleTimeString(locale, { timeStyle: 'short' })}
-        </Text>
-      </StyledContainer>
-    )
-  }
-)
-
-ChatMessageMetadata.displayName = 'ChatMessageMetadata'

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

@@ -1,79 +0,0 @@
-import {
-  ListBox,
-  ListBoxItem,
-  ListLayout,
-  Virtualizer,
-} from 'react-aria-components'
-import { useTranslation } from 'react-i18next'
-import { ChatMessage } from './ChatMessage.tsx'
-import { useLayoutEffect, useRef } from 'react'
-import { useSnapshot } from 'valtio'
-import { ChatRow, chatStore } from '@/stores/chat'
-
-// Estimated height of a chat entry in px. ListLayout measures the real
-// rendered height of each row; this value is only used to size the
-// scrollbar before rows have been measured.
-const ESTIMATED_ROW_HEIGHT = 56
-const BOTTOM_THRESHOLD_PX = 32
-
-export const ChatMessages = () => {
-  const { t } = useTranslation('rooms', { keyPrefix: 'chat' })
-  const { rows: items } = useSnapshot(chatStore)
-
-  const listRef = useRef<HTMLDivElement>(null)
-  const stick = useRef(true)
-
-  useLayoutEffect(() => {
-    const el = listRef.current
-    if (!el) return
-    const pin = () => {
-      if (stick.current) el.scrollTop = el.scrollHeight
-    }
-    const onScroll = () => {
-      stick.current =
-        el.scrollHeight - el.scrollTop - el.clientHeight <= BOTTOM_THRESHOLD_PX
-    }
-    const ro = new ResizeObserver(pin)
-    // Sizer div = ListLayout's content size. Fires on append, and again each
-    // time an estimated row height is replaced by a measured one.
-    if (el.firstElementChild) ro.observe(el.firstElementChild)
-    // Container. Height goes 0 -> N as the panel animates in, and on resize.
-    ro.observe(el)
-    el.addEventListener('scroll', onScroll, { passive: true })
-    pin()
-    return () => {
-      ro.disconnect()
-      el.removeEventListener('scroll', onScroll)
-    }
-  }, [])
-
-  return (
-    <Virtualizer
-      layout={ListLayout}
-      layoutOptions={{
-        estimatedRowSize: ESTIMATED_ROW_HEIGHT,
-        gap: 4,
-        padding: 4,
-      }}
-    >
-      <ListBox
-        ref={listRef}
-        aria-label={t('messagesLabel', 'Chat messages')}
-        items={items}
-        selectionMode="none"
-        style={{
-          display: 'block',
-          height: '100%',
-          width: '100%',
-          overflow: 'auto',
-        }}
-      >
-        {(item: ChatRow) => (
-          <ListBoxItem style={{ width: '100%' }}>
-            <ChatMessage item={item} />
-          </ListBoxItem>
-        )}
-      </ListBox>
-    </Virtualizer>
-  )
-}

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

@@ -1,83 +0,0 @@
-// features/rooms/chat/ChatProvider.tsx — renders no DOM, mounted once at room level
-import { ref } from 'valtio'
-import { useSidePanel } from '@/features/rooms/livekit/hooks/useSidePanel'
-import React, { useEffect } from 'react'
-import { useChat, useRoomContext } from '@livekit/components-react'
-import { appendRow, chatStore, resetChatStore } from '@/stores/chat'
-import type { ChatMessage } from '@livekit/components-core'
-import {
-  LocalParticipant,
-  Participant,
-  RemoteParticipant,
-  RoomEvent,
-} from 'livekit-client'
-
-export const ChatProvider = () => {
-  const lastReadMsgAt = React.useRef<ChatMessage['timestamp']>(0)
-  const { send, chatMessages, isSending } = useChat()
-  const { isChatOpen } = useSidePanel()
-
-  const room = useRoomContext()
-
-  useEffect(() => {
-    resetChatStore()
-  }, [])
-
-  // Tigger the message notification (temporary)
-  useEffect(() => {
-    // TEMPORARY: This is a brittle workaround that relies on message count tracking
-    // due to recent LiveKit useChat changes breaking the previous implementation
-    // (see https://github.com/livekit/components-js/issues/1158)
-    // Remove this once we refactor chat to use the new text stream approach
-    const latestMessage = chatMessages.slice(-1)[0]
-    if (!latestMessage) return
-    const from = latestMessage.from as
-      | RemoteParticipant
-      | LocalParticipant
-      | undefined
-
-    room.emit(RoomEvent.ChatMessage, latestMessage, from)
-  }, [chatMessages, room])
-
-  useEffect(() => {
-    for (let i = chatStore.rows.length; i < chatMessages.length; i++) {
-      appendRow(chatMessages[i])
-    }
-  }, [chatMessages])
-
-  useEffect(() => {
-    chatStore.send = ref(send)
-  }, [send])
-
-  useEffect(() => {
-    chatStore.isSending = isSending
-  }, [isSending])
-
-  // Set the unread messages count
-  useEffect(() => {
-    if (chatMessages.length === 0) return
-    const last = chatMessages[chatMessages.length - 1]
-    if (isChatOpen) {
-      lastReadMsgAt.current = last.timestamp
-      chatStore.unreadMessages = 0
-      return
-    }
-    chatStore.unreadMessages = chatMessages.filter(
-      (m) => !lastReadMsgAt.current || m.timestamp > lastReadMsgAt.current
-    ).length
-  }, [chatMessages, isChatOpen])
-
-  // Listen to participant name changes
-  useEffect(() => {
-    const setName = (p: Participant) => {
-      chatStore.names[p.identity] = p.name || p.identity
-    }
-    const onNameChanged = (_name: string, p: Participant) => setName(p)
-    room.on(RoomEvent.ParticipantNameChanged, onNameChanged)
-    return () => {
-      room.off(RoomEvent.ParticipantNameChanged, onNameChanged)
-    }
-  }, [room])
-
-  return null
-}

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

@@ -1,30 +0,0 @@
-import React from 'react'
-import { useTranslation } from 'react-i18next'
-import { Button } from '@/primitives'
-import { RiSendPlane2Fill } from '@remixicon/react'
-
-type ChatSubmitButtonProps = {
-  handleSubmit: () => Promise<void>
-  isDisabled: boolean
-}
-
-export const ChatSubmitButton = React.memo(
-  ({ handleSubmit, isDisabled }: ChatSubmitButtonProps) => {
-    const { t } = useTranslation('rooms', { keyPrefix: 'controls.chat.input' })
-    return (
-      <Button
-        square
-        invisible
-        variant="tertiaryText"
-        size="sm"
-        onPress={handleSubmit}
-        isDisabled={isDisabled}
-        aria-label={t('button.label')}
-      >
-        <RiSendPlane2Fill />
-      </Button>
-    )
-  }
-)
-
-ChatSubmitButton.displayName = 'ChatSubmitButton'

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

@@ -1,92 +0,0 @@
-import { TextArea } from '@/primitives'
-import { styled } from '@/styled-system/jsx'
-import React, { useCallback, useEffect } from 'react'
-import { useTranslation } from 'react-i18next'
-import { useSnapshot } from 'valtio'
-import {
-  chatStore,
-  clearTextAreaValue,
-  persistTextAreaValue,
-} from '@/stores/chat'
-import { ChatSubmitButton } from './ChatSubmitButton'
-
-const StyledContainer = styled('div', {
-  base: {
-    display: 'flex',
-    margin: '0.75rem 0 1.5rem',
-    padding: '0.5rem',
-    backgroundColor: 'gray.100',
-    borderRadius: 4,
-  },
-})
-
-export const ChatTextArea = () => {
-  const { isSending, send, textAreaValue } = useSnapshot(chatStore)
-
-  const { t } = useTranslation('rooms', { keyPrefix: 'controls.chat.input' })
-
-  const inputRef = React.useRef<HTMLTextAreaElement>(null)
-
-  useEffect(() => {
-    const el = inputRef.current
-    if (!el) return
-    const raf = requestAnimationFrame(() => {
-      el.focus({ preventScroll: true })
-      const end = el.value.length
-      el.setSelectionRange(end, end)
-    })
-    return () => cancelAnimationFrame(raf)
-  }, [])
-
-  const handleSubmit = useCallback(async () => {
-    const text = chatStore.textAreaValue
-    if (!send || !text) return
-    await send(text)
-    inputRef?.current?.focus({ preventScroll: true })
-    clearTextAreaValue()
-  }, [send, inputRef])
-
-  const isDisabled = !textAreaValue.trim() || isSending
-
-  const onKeyDown = async (e: React.KeyboardEvent<HTMLTextAreaElement>) => {
-    e.stopPropagation()
-    if (e.key !== 'Enter' || (e.key === 'Enter' && e.shiftKey) || isDisabled)
-      return
-    e.preventDefault()
-    await handleSubmit()
-  }
-
-  const onKeyUp = (e: React.KeyboardEvent<HTMLTextAreaElement>) => {
-    e.stopPropagation()
-  }
-
-  return (
-    <StyledContainer>
-      <TextArea
-        ref={inputRef}
-        value={textAreaValue}
-        onKeyDown={onKeyDown}
-        onKeyUp={onKeyUp}
-        onChange={(e) => {
-          persistTextAreaValue(e.target.value)
-        }}
-        fieldSizing={'content'}
-        style={{
-          border: 'none',
-          resize: 'none',
-          height: 'auto',
-          maxHeight: '240px',
-          minHeight: `34px`,
-          lineHeight: 1.25,
-          padding: '7px 10px',
-        }}
-        placeholderStyle="strong"
-        spellCheck={false}
-        maxLength={2000}
-        placeholder={t('textArea.placeholder')}
-        aria-label={t('textArea.label')}
-      />
-      <ChatSubmitButton handleSubmit={handleSubmit} isDisabled={isDisabled} />
-    </StyledContainer>
-  )
-}

src/frontend/src/features/layout/components/CarouselLayout.tsx

@@ -3,7 +3,6 @@ import { getScrollBarWidth } from '@livekit/components-core'
 import * as React from 'react'
 import { TrackLoop, useVisualStableUpdate } from '@livekit/components-react'
 import { useSize } from '@/features/rooms/livekit/hooks/useResizeObserver'
-import { useCallback, useEffect, useLayoutEffect } from 'react'
 
 const MIN_HEIGHT = 130
 const MIN_WIDTH = 140
@@ -11,72 +10,6 @@ const MIN_VISIBLE_TILES = 1
 const ASPECT_RATIO = 16 / 10
 const ASPECT_RATIO_INVERT = (1 - ASPECT_RATIO) * -1
 
-type CarouselOrientation = 'vertical' | 'horizontal'
-
-interface CarouselLayoutState {
-  orientation: CarouselOrientation
-  maxVisibleTiles: number
-}
-
-interface CarouselLayoutObserverProps {
-  asideEl: React.RefObject<HTMLDivElement>
-  orientation?: CarouselOrientation
-  onLayoutChange: (layout: CarouselLayoutState) => void
-}
-
-const CarouselLayoutObserver = ({
-  orientation,
-  asideEl,
-  onLayoutChange,
-}: CarouselLayoutObserverProps) => {
-  const { width, height } = useSize(asideEl)
-
-  // Hysteresis memory: avoids flapping between N and N+1 tiles when the
-  // container size hovers around a breakpoint. A ref (not state) because
-  // updating it must not trigger a re-render.
-  const prevTilesRef = React.useRef(0)
-
-  const carouselOrientation: CarouselOrientation =
-    orientation ?? (height >= width ? 'vertical' : 'horizontal')
-
-  const tileSpan =
-    carouselOrientation === 'vertical'
-      ? Math.max(width * ASPECT_RATIO_INVERT, MIN_HEIGHT)
-      : Math.max(height * ASPECT_RATIO, MIN_WIDTH)
-
-  const scrollBarWidth = getScrollBarWidth()
-
-  const availableSpan =
-    (carouselOrientation === 'vertical' ? height : width) - scrollBarWidth
-
-  const tilesThatFit = Math.max(availableSpan / tileSpan, MIN_VISIBLE_TILES)
-
-  let maxVisibleTiles: number
-  if (Math.abs(tilesThatFit - prevTilesRef.current) < 0.5) {
-    // Within the dead zone: keep the previous count.
-    maxVisibleTiles = Math.round(prevTilesRef.current)
-  } else {
-    maxVisibleTiles = Math.round(tilesThatFit)
-    prevTilesRef.current = tilesThatFit
-  }
-
-  // Apply cosmetic layout output straight to the DOM.
-  useLayoutEffect(() => {
-    const el = asideEl.current
-    if (!el) return
-    el.dataset.lkOrientation = carouselOrientation
-    el.style.setProperty('--lk-max-visible-tiles', maxVisibleTiles.toString())
-  }, [asideEl, carouselOrientation, maxVisibleTiles])
-
-  // Report upward only what the parent actually needs for
-  // `useVisualStableUpdate` (and only when it changes — see parent handler).
-  useEffect(() => {
-    onLayoutChange({ orientation: carouselOrientation, maxVisibleTiles })
-  }, [carouselOrientation, maxVisibleTiles, onLayoutChange])
-
-  return null
-}
-
 /** @public */
 export interface CarouselLayoutProps extends React.HTMLAttributes<HTMLMediaElement> {
   tracks: TrackReferenceOrPlaceholder[]
@@ -107,42 +40,52 @@ export function CarouselLayout({
   ...props
 }: CarouselLayoutProps) {
   const asideEl = React.useRef<HTMLDivElement>(null)
+  const [prevTiles, setPrevTiles] = React.useState(0)
+  const { width, height } = useSize(asideEl)
+  const carouselOrientation = orientation
+    ? orientation
+    : height >= width
+      ? 'vertical'
+      : 'horizontal'
 
-  const [layout, setLayout] = React.useState<CarouselLayoutState>({
-    orientation: orientation ?? 'vertical',
-    maxVisibleTiles: MIN_VISIBLE_TILES,
-  })
+  const tileSpan =
+    carouselOrientation === 'vertical'
+      ? Math.max(width * ASPECT_RATIO_INVERT, MIN_HEIGHT)
+      : Math.max(height * ASPECT_RATIO, MIN_WIDTH)
+  const scrollBarWidth = getScrollBarWidth()
 
-  // Stable callback + identity check: the parent only re-renders when the
-  // derived layout genuinely changed, not on every resize tick.
-  const handleLayoutChange = useCallback((next: CarouselLayoutState) => {
-    setLayout((prev) =>
-      prev.orientation === next.orientation &&
-      prev.maxVisibleTiles === next.maxVisibleTiles
-        ? prev
-        : next
-    )
-  }, [])
+  const tilesThatFit =
+    carouselOrientation === 'vertical'
+      ? Math.max((height - scrollBarWidth) / tileSpan, MIN_VISIBLE_TILES)
+      : Math.max((width - scrollBarWidth) / tileSpan, MIN_VISIBLE_TILES)
 
-  const sortedTiles = useVisualStableUpdate(tracks, layout.maxVisibleTiles)
+  let maxVisibleTiles = Math.round(tilesThatFit)
+  if (Math.abs(tilesThatFit - prevTiles) < 0.5) {
+    maxVisibleTiles = Math.round(prevTiles)
+  } else if (prevTiles !== tilesThatFit) {
+    setPrevTiles(tilesThatFit)
+  }
+
+  const sortedTiles = useVisualStableUpdate(tracks, maxVisibleTiles)
+
+  React.useLayoutEffect(() => {
+    if (asideEl.current) {
+      asideEl.current.dataset.lkOrientation = carouselOrientation
+      asideEl.current.style.setProperty(
+        '--lk-max-visible-tiles',
+        maxVisibleTiles.toString()
+      )
+    }
+  }, [maxVisibleTiles, carouselOrientation])
 
   return (
-    <>
-      <CarouselLayoutObserver
-        asideEl={asideEl}
-        orientation={orientation}
-        onLayoutChange={handleLayoutChange}
-      />
-      {/* `key` intentionally remounts the container when orientation flips, */}
-      {/* which resets scroll position and re-runs the observer measurement. */}
-      <aside
-        key={layout.orientation}
-        className="lk-carousel"
-        ref={asideEl}
-        {...props}
-      >
-        <TrackLoop tracks={sortedTiles}>{props.children}</TrackLoop>
-      </aside>
-    </>
+    <aside
+      key={carouselOrientation}
+      className="lk-carousel"
+      ref={asideEl}
+      {...props}
+    >
+      <TrackLoop tracks={sortedTiles}>{props.children}</TrackLoop>
+    </aside>
   )
 }

src/frontend/src/features/layout/components/GridLayout.tsx

@@ -10,36 +10,6 @@ import { mergeProps } from '@/utils/mergeProps'
 import { PaginationIndicator } from './PaginationIndicator'
 import { useGridLayout } from '../hooks/useGridLayout'
 import { PaginationControl } from './PaginationControl'
-import { useEffect, useRef, useState } from 'react'
-import { useSpeakerPromotionTrigger } from '../hooks/useSpeakerPromotionTrigger'
-
-interface GridLayoutObserverProps {
-  gridEl: React.RefObject<HTMLDivElement>
-  trackCount: number
-  onMaxTilesChange: (maxTiles: number) => void
-}
-
-/**
- * Headless component that runs the layout calculation in isolation and
- * reports the resulting tile capacity upward.
- *
- * `useGridLayout` re-renders its host on every layout recalculation
- * (e.g. container resizes). Rendering it in a null child means only this
- * component churns; the parent `GridLayout` re-renders solely when
- * `maxTiles` actually changes, since `setState` bails out on equal values.
- */
-const GridLayoutObserver = ({
-  gridEl,
-  trackCount,
-  onMaxTilesChange,
-}: GridLayoutObserverProps) => {
-  const { layout } = useGridLayout(gridEl, trackCount)
-  useEffect(() => {
-    onMaxTilesChange(layout.maxTiles)
-  }, [onMaxTilesChange, layout.maxTiles])
-
-  return null
-}
 
 /** @public */
 export interface GridLayoutProps
@@ -67,15 +37,14 @@ export interface GridLayoutProps
  * @public
  */
 export function GridLayout({ tracks, ...props }: GridLayoutProps) {
-  const gridEl = useRef<HTMLDivElement>(null)
-  const [maxTiles, setMaxTiles] = useState(1)
+  const gridEl = React.createRef<HTMLDivElement>()
 
   const elementProps = React.useMemo(
     () => mergeProps(props, { className: 'lk-grid-layout' }),
     [props]
   )
-  const pagination = usePagination(maxTiles, tracks)
-  useSpeakerPromotionTrigger(pagination.tracks)
+  const { layout } = useGridLayout(gridEl, tracks.length)
+  const pagination = usePagination(layout.maxTiles, tracks)
 
   useSwipe(gridEl, {
     onLeftSwipe: pagination.nextPage,
@@ -88,13 +57,8 @@ export function GridLayout({ tracks, ...props }: GridLayoutProps) {
       data-lk-pagination={pagination.totalPageCount > 1}
       {...elementProps}
     >
-      <GridLayoutObserver
-        gridEl={gridEl}
-        trackCount={tracks.length}
-        onMaxTilesChange={setMaxTiles}
-      />
       <TrackLoop tracks={pagination.tracks}>{props.children}</TrackLoop>
-      {tracks.length > maxTiles && (
+      {tracks.length > layout.maxTiles && (
         <>
           <PaginationIndicator
             totalPageCount={pagination.totalPageCount}

src/frontend/src/features/layout/components/PinAnnouncer.tsx

@@ -1,6 +0,0 @@
-import { usePinAnnouncements } from '../hooks/usePinAnnouncements'
-
-export const PinAnnouncer = () => {
-  usePinAnnouncements()
-  return null
-}

src/frontend/src/features/layout/components/StageLayout.tsx

@@ -1,113 +0,0 @@
-import { FocusLayoutContainer, useTracks } from '@livekit/components-react'
-import { CarouselLayout } from '@/features/layout/components/CarouselLayout'
-import { FocusLayout } from '@/features/layout/components/FocusLayout'
-import { ParticipantTile } from '@/features/participantTile/components/ParticipantTile'
-import { GridLayout } from '@/features/layout/components/GridLayout'
-import {
-  isEqualTrackRef,
-  isTrackReference,
-  log,
-  type TrackReferenceOrPlaceholder,
-} from '@livekit/components-core'
-import { Track } from 'livekit-client'
-import { useSnapshot } from 'valtio'
-import { clearPinnedTrack, layoutStore, setPinnedTrack } from '@/stores/layout'
-import { useEffect, useRef } from 'react'
-
-export const StageLayout = () => {
-  const lastAutoFocusedScreenShareTrack =
-    useRef<TrackReferenceOrPlaceholder | null>(null)
-
-  const tracks = useTracks(
-    [
-      { source: Track.Source.Camera, withPlaceholder: true },
-      { source: Track.Source.ScreenShare, withPlaceholder: false },
-    ],
-    { updateOnlyOn: [], onlySubscribed: false }
-  )
-
-  const screenShareTracks = tracks
-    .filter(isTrackReference)
-    .filter((track) => track.publication.source === Track.Source.ScreenShare)
-
-  const { pinnedTrackRef } = useSnapshot(layoutStore)
-
-  const carouselTracks = tracks.filter(
-    (track) => !isEqualTrackRef(track, pinnedTrackRef)
-  )
-
-  /* eslint-disable react-hooks/exhaustive-deps */
-  // Code duplicated from LiveKit; this warning will be addressed in the refactoring.
-  useEffect(() => {
-    // If screen share tracks are published, and no pin is set explicitly, auto set the screen share.
-    if (
-      screenShareTracks.some((track) => track.publication.isSubscribed) &&
-      lastAutoFocusedScreenShareTrack.current === null
-    ) {
-      log.debug('Auto set screen share focus:', {
-        newScreenShareTrack: screenShareTracks[0],
-      })
-      setPinnedTrack(screenShareTracks[0])
-      lastAutoFocusedScreenShareTrack.current = screenShareTracks[0]
-    } else if (
-      lastAutoFocusedScreenShareTrack.current &&
-      !screenShareTracks.some(
-        (track) =>
-          track.publication.trackSid ===
-          lastAutoFocusedScreenShareTrack.current?.publication?.trackSid
-      )
-    ) {
-      log.debug('Auto clearing screen share focus.')
-      clearPinnedTrack()
-      lastAutoFocusedScreenShareTrack.current = null
-    }
-    if (pinnedTrackRef && !isTrackReference(pinnedTrackRef)) {
-      const updatedFocusTrack = tracks.find(
-        (tr) =>
-          tr.participant.identity === pinnedTrackRef.participant.identity &&
-          tr.source === pinnedTrackRef.source
-      )
-      if (
-        updatedFocusTrack !== pinnedTrackRef &&
-        isTrackReference(updatedFocusTrack)
-      ) {
-        setPinnedTrack(updatedFocusTrack)
-      }
-    }
-  }, [
-    screenShareTracks
-      .map(
-        (ref) => `${ref.publication.trackSid}_${ref.publication.isSubscribed}`
-      )
-      .join(),
-    pinnedTrackRef?.publication?.trackSid,
-    tracks,
-  ])
-  /* eslint-enable react-hooks/exhaustive-deps */
-
-  return (
-    <>
-      {!pinnedTrackRef ? (
-        <div className="lk-grid-layout-wrapper" style={{ height: 'auto' }}>
-          <GridLayout tracks={tracks} style={{ padding: 0 }}>
-            <ParticipantTile />
-          </GridLayout>
-        </div>
-      ) : (
-        <div className="lk-focus-layout-wrapper" style={{ height: 'auto' }}>
-          <FocusLayoutContainer style={{ padding: 0 }}>
-            <CarouselLayout
-              tracks={carouselTracks}
-              style={{
-                minWidth: '200px',
-              }}
-            >
-              <ParticipantTile />
-            </CarouselLayout>
-            <FocusLayout trackRef={pinnedTrackRef} />
-          </FocusLayoutContainer>
-        </div>
-      )}
-    </>
-  )
-}

src/frontend/src/features/layout/hooks/usePinAnnouncements.ts

@@ -1,70 +0,0 @@
-import { useEffect, useRef, useCallback } from 'react'
-import { useRoomContext } from '@livekit/components-react'
-import { Participant } from 'livekit-client'
-import { useSnapshot } from 'valtio'
-import { useTranslation } from 'react-i18next'
-import { layoutStore } from '@/stores/layout'
-import { getParticipantName } from '@/features/rooms/utils/getParticipantName'
-import { useScreenReaderAnnounce } from '@/hooks/useScreenReaderAnnounce'
-
-export const usePinAnnouncements = () => {
-  const { t } = useTranslation('rooms', { keyPrefix: 'pinAnnouncements' })
-  const { t: tRooms } = useTranslation('rooms')
-
-  const room = useRoomContext()
-  const announce = useScreenReaderAnnounce()
-
-  const { pinnedTrackRef } = useSnapshot(layoutStore)
-  const lastPinnedIdentityRef = useRef<string | null>(null)
-
-  const getAnnouncementName = useCallback(
-    (participant?: Participant | null) => {
-      if (!participant) return tRooms('participants.unknown')
-      return participant.isLocal
-        ? tRooms('participants.you')
-        : getParticipantName(participant)
-    },
-    [tRooms]
-  )
-
-  const pinnedIdentity = pinnedTrackRef?.participant?.identity ?? null
-
-  useEffect(() => {
-    // 1. unpin
-    if (!pinnedIdentity) {
-      const lastIdentity = lastPinnedIdentityRef.current
-      if (!lastIdentity) return
-
-      const lastParticipant =
-        room.localParticipant.identity === lastIdentity
-          ? room.localParticipant
-          : room.remoteParticipants.get(lastIdentity)
-
-      announce(
-        lastParticipant?.isLocal
-          ? t('self.unpin')
-          : t('unpin', { name: getAnnouncementName(lastParticipant) })
-      )
-
-      lastPinnedIdentityRef.current = null
-      return
-    }
-
-    // 2. same pin → do nothing
-    if (lastPinnedIdentityRef.current === pinnedIdentity) return
-
-    // 3. new pin
-    const participant =
-      room.localParticipant.identity === pinnedIdentity
-        ? room.localParticipant
-        : room.remoteParticipants.get(pinnedIdentity)
-
-    lastPinnedIdentityRef.current = pinnedIdentity
-
-    announce(
-      participant?.isLocal
-        ? t('self.pin')
-        : t('pin', { name: getAnnouncementName(participant) })
-    )
-  }, [pinnedIdentity, announce, getAnnouncementName, room, t])
-}

src/frontend/src/features/layout/hooks/useSpeakerPromotionTrigger.ts

@@ -1,48 +0,0 @@
-import { RoomEvent } from 'livekit-client'
-import type { Participant } from 'livekit-client'
-import type { TrackReferenceOrPlaceholder } from '@livekit/components-core'
-import { useRoomContext } from '@livekit/components-react'
-import { useEffect, useReducer, useRef } from 'react'
-
-/**
- * Tripwire for speaker promotion.
- *
- * Listens to `RoomEvent.ActiveSpeakersChanged` imperatively and forces ONE
- * re-render of the host component only when an active speaker has none of
- * their tiles are within the visible span (`maxVisibleTiles`). That render
- * re-runs `useVisualStableUpdate`, which reads live `participant.isSpeaking`
- * state and performs the actual swap.
- *
- * Speakers already visible are ignored. Everything else costs zero React work.
- *
- * Requires the parent to NOT re-render on speaker events itself, i.e.
- * `useTracks(..., { updateOnlyOn: [] })` upstream.
- */
-export function useSpeakerPromotionTrigger(
-  sortedTiles: TrackReferenceOrPlaceholder[]
-) {
-  const room = useRoomContext()
-  const [, forceRender] = useReducer((n: number) => n + 1, 0)
-
-  // Refs so the listener reads current values without re-subscribing
-  // and without itself being a render dependency.
-  const tilesRef = useRef(sortedTiles)
-  tilesRef.current = sortedTiles
-
-  useEffect(() => {
-    const onActiveSpeakersChanged = (speakers: Participant[]) => {
-      const tiles = tilesRef.current
-      const hiddenSpeakerExists = speakers.some(
-        (speaker) =>
-          !tiles.some((t) => t.participant.identity === speaker.identity)
-      )
-      if (hiddenSpeakerExists) {
-        forceRender()
-      }
-    }
-    room.on(RoomEvent.ActiveSpeakersChanged, onActiveSpeakersChanged)
-    return () => {
-      room.off(RoomEvent.ActiveSpeakersChanged, onActiveSpeakersChanged)
-    }
-  }, [room])
-}

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

@@ -4,13 +4,13 @@ import { Button as RACButton } from 'react-aria-components'
 import { Track } from 'livekit-client'
 import Source = Track.Source
 
-import { ParticipantTile } from '@/features/participantTile/components/ParticipantTile.tsx'
+import { useMaybeLayoutContext } from '@livekit/components-react'
+import { ParticipantTile } from '@/features/rooms/livekit/components/ParticipantTile'
 import { type ToastProps } from './Toast'
 import { HStack, styled } from '@/styled-system/jsx'
 import { Div } from '@/primitives'
 import { useTranslation } from 'react-i18next'
 import { StyledToastContainer } from './StyledToastContainer'
-import { setPinnedTrack } from '@/stores/layout'
 
 const ClickableToast = styled(RACButton, {
   base: {
@@ -28,6 +28,7 @@ export function ToastJoined({ state, ...props }: Readonly<ToastProps>) {
     state,
     ref
   )
+  const layoutContext = useMaybeLayoutContext()
   const participant = props.toast.content.participant
 
   if (!participant) return
@@ -37,13 +38,18 @@ export function ToastJoined({ state, ...props }: Readonly<ToastProps>) {
     publication: participant.getTrackPublication(Source.Camera),
     source: Source.Camera,
   }
-
+  const pinParticipant = () => {
+    layoutContext?.pin.dispatch?.({
+      msg: 'set_pin',
+      trackReference,
+    })
+  }
   return (
     <StyledToastContainer {...toastProps} ref={ref}>
       <ClickableToast
         ref={ref}
         onPress={(e) => {
-          setPinnedTrack(trackReference)
+          pinParticipant()
           closeButtonProps.onPress?.(e)
         }}
       >

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

@@ -7,8 +7,8 @@ import { RiInfinityLine } from '@remixicon/react'
 import { useTranslation } from 'react-i18next'
 import { useEffect, useRef, useState } from 'react'
 import { usePrevious } from '@/hooks/usePrevious'
-import type { WaitingParticipant } from '@/features/participants/api/listWaitingParticipants'
-import { useWaitingParticipants } from '@/features/participants/hooks/useWaitingParticipants'
+import { WaitingParticipant } from '@/features/rooms/api/listWaitingParticipants'
+import { useWaitingParticipants } from '@/features/rooms/hooks/useWaitingParticipants'
 import { useSidePanel } from '@/features/rooms/livekit/hooks/useSidePanel'
 import { useNotificationSound } from '../hooks/useSoundNotification'
 import { NotificationType } from '@/features/notifications'

src/frontend/src/features/participantTile/components/ParticipantMetadata.tsx

@@ -1,54 +0,0 @@
-import {
-  ConnectionQualityIndicator,
-  LockLockedIcon,
-  ScreenShareIcon,
-  useIsEncrypted,
-} from '@livekit/components-react'
-import { HStack } from '@/styled-system/jsx'
-import { Participant } from 'livekit-client'
-import { MutedMicIndicator } from './MutedMicIndicator'
-import { ParticipantName } from './ParticipantName'
-import { RaisedHandMetadataWrapper } from './RaisedHandMetadataWrapper'
-
-export const ParticipantMetadata = ({
-  displayedName,
-  participant,
-  isScreenShare,
-}: {
-  displayedName: string
-  participant: Participant
-  isScreenShare: boolean
-}) => {
-  const isEncrypted = useIsEncrypted(participant)
-
-  return (
-    <div className="lk-participant-metadata">
-      <HStack gap={0.25}>
-        {!isScreenShare && <MutedMicIndicator participant={participant} />}
-        <RaisedHandMetadataWrapper
-          participant={participant}
-          enabled={!isScreenShare}
-        >
-          {isScreenShare && (
-            <ScreenShareIcon
-              style={{
-                maxWidth: '20px',
-                width: '100%',
-              }}
-            />
-          )}
-          {isEncrypted && !isScreenShare && (
-            <LockLockedIcon style={{ marginRight: '0.25rem' }} />
-          )}
-          <div className="lk-participant-name-wrapper">
-            <ParticipantName
-              displayedName={displayedName}
-              isScreenShare={isScreenShare}
-            />
-          </div>
-        </RaisedHandMetadataWrapper>
-      </HStack>
-      <ConnectionQualityIndicator className="lk-participant-metadata-item" />
-    </div>
-  )
-}

src/frontend/src/features/participantTile/components/ParticipantName.tsx

@@ -1,42 +0,0 @@
-import React, { CSSProperties } from 'react'
-import { Text } from '@/primitives'
-import { useTranslation } from 'react-i18next'
-
-const participantNameStyles: CSSProperties = {
-  paddingBottom: '0.1rem',
-  overflow: 'hidden',
-  textOverflow: 'ellipsis',
-  whiteSpace: 'nowrap',
-}
-
-const participantNameScreenShareStyles: CSSProperties = {
-  ...participantNameStyles,
-  marginLeft: '0.4rem',
-}
-
-export const ParticipantName = React.memo(
-  ({
-    displayedName,
-    isScreenShare = false,
-  }: {
-    displayedName?: string
-    isScreenShare: boolean
-  }) => {
-    const { t } = useTranslation('rooms', { keyPrefix: 'participantTile' })
-    if (isScreenShare) {
-      return (
-        <Text variant="sm" style={participantNameScreenShareStyles}>
-          {t('screenShare', { name: displayedName })}
-        </Text>
-      )
-    }
-
-    return (
-      <Text variant="sm" style={participantNameStyles} aria-hidden="true">
-        {displayedName}
-      </Text>
-    )
-  }
-)
-
-ParticipantName.displayName = 'ParticipantName'

src/frontend/src/features/participantTile/components/ParticipantPlaceholder.tsx

@@ -1,55 +0,0 @@
-import { styled } from '@/styled-system/jsx'
-import { Avatar } from '@/components/Avatar'
-import { getParticipantBackgroundGradient } from '@/features/rooms/utils/getParticipantBackgroundGradient'
-import React, { useMemo } from 'react'
-
-const StyledParticipantPlaceHolder = styled('div', {
-  base: {
-    width: '100%',
-    height: '100%',
-    display: 'flex',
-    justifyContent: 'center',
-    alignItems: 'center',
-    containerType: 'size',
-  },
-})
-
-const StyledAvatarWrapper = styled('div', {
-  base: {
-    borderRadius: '50%',
-    aspectRatio: '1 / 1',
-    width: 'min(90cqmin, 160px)',
-    fontSize: 'min(27cqmin, 48px)',
-    '[data-lk-speaking="true"] &': {
-      animation: 'pulse 1s infinite',
-    },
-  },
-})
-
-type ParticipantPlaceholderProps = {
-  color: string
-  displayedNamed: string
-}
-
-export const ParticipantPlaceholder = React.memo(
-  ({ color, displayedNamed }: ParticipantPlaceholderProps) => {
-    const backgroundGradient = useMemo(
-      () => getParticipantBackgroundGradient(color),
-      [color]
-    )
-    return (
-      <StyledParticipantPlaceHolder
-        style={{
-          backgroundColor: color,
-          backgroundImage: backgroundGradient,
-        }}
-      >
-        <StyledAvatarWrapper>
-          <Avatar name={displayedNamed} bgColor={color} context="placeholder" />
-        </StyledAvatarWrapper>
-      </StyledParticipantPlaceHolder>
-    )
-  }
-)
-
-ParticipantPlaceholder.displayName = 'ParticipantPlaceholder'

src/frontend/src/features/participantTile/components/RaisedHandMetadataWrapper.tsx

@@ -1,91 +0,0 @@
-import React, { ReactNode, RefObject, useEffect, useRef } from 'react'
-import {
-  useRaisedHand,
-  useRaisedHandPosition,
-} from '@/features/rooms/livekit/hooks/useRaisedHand'
-import { Participant } from 'livekit-client'
-import { RiHand } from '@remixicon/react'
-
-const PositionInQueue = React.memo(
-  ({ positionInQueue }: { positionInQueue?: number }) => {
-    if (!positionInQueue) return
-    return (
-      <span
-        style={{ display: 'inline-flex', alignItems: 'center', gap: '0.1rem' }}
-      >
-        <span>{positionInQueue}</span>
-        <RiHand
-          color="black"
-          size={16}
-          style={{
-            marginRight: '0.4rem',
-            marginLeft: '0.1rem',
-            minWidth: '16px',
-            animationDuration: '300ms',
-            animationName: 'wave_hand',
-            animationIterationCount: '2',
-          }}
-        />
-      </span>
-    )
-  }
-)
-
-PositionInQueue.displayName = 'PositionInQueue'
-
-const RaisedHandActiveItem = ({
-  participant,
-  targetRef,
-}: {
-  participant: Participant
-  targetRef: RefObject<HTMLElement | null>
-}) => {
-  const { positionInQueue, firstInQueue } = useRaisedHandPosition({
-    participant,
-  })
-  useEffect(() => {
-    const el = targetRef.current
-    if (!el) return
-
-    el.style.backgroundColor = firstInQueue ? '#fde047' : 'white'
-    el.style.color = 'black'
-
-    return () => {
-      el.style.backgroundColor = ''
-      el.style.color = ''
-    }
-  }, [targetRef, firstInQueue])
-
-  return <PositionInQueue positionInQueue={positionInQueue} />
-}
-
-export const RaisedHandMetadataWrapper = ({
-  participant,
-  enabled = true,
-  children,
-}: {
-  participant: Participant
-  enabled?: boolean
-  children: ReactNode
-}) => {
-  const ref = useRef(null)
-
-  const { isHandRaised } = useRaisedHand({ participant })
-  const showHand = isHandRaised && enabled
-
-  return (
-    <div
-      ref={ref}
-      className="lk-participant-metadata-item"
-      style={{
-        padding: '0.1rem 0.25rem',
-        transition: 'background 200ms ease',
-      }}
-    >
-      {showHand && (
-        <RaisedHandActiveItem participant={participant} targetRef={ref} />
-      )}
-      {children}
-    </div>
-  )
-}

src/frontend/src/features/participantTile/components/participantTileFocus/EffectsButton.tsx

@@ -1,23 +0,0 @@
-import React from 'react'
-import { useTranslation } from 'react-i18next'
-import { useSidePanel } from '@/features/rooms/livekit/hooks/useSidePanel'
-import { Button } from '@/primitives'
-import { RiImageCircleAiFill } from '@remixicon/react'
-
-export const EffectsButton = React.memo(() => {
-  const { t } = useTranslation('rooms', { keyPrefix: 'participantTileFocus' })
-  const { isEffectsOpen, toggleEffects } = useSidePanel()
-  return (
-    <Button
-      size={'sm'}
-      variant={'primaryTextDark'}
-      square
-      tooltip={t('effects')}
-      onPress={() => !isEffectsOpen && toggleEffects()}
-    >
-      <RiImageCircleAiFill />
-    </Button>
-  )
-})
-
-EffectsButton.displayName = 'EffectsButton'

src/frontend/src/features/participantTile/components/participantTileFocus/FocusButton.tsx

@@ -1,32 +0,0 @@
-import {
-  isEqualTrackRef,
-  TrackReferenceOrPlaceholder,
-} from '@livekit/components-core'
-import { useTranslation } from 'react-i18next'
-import { useSnapshot } from 'valtio'
-import { clearPinnedTrack, layoutStore, setPinnedTrack } from '@/stores/layout'
-import { Button } from '@/primitives'
-import { RiPushpin2Line, RiUnpinLine } from '@remixicon/react'
-
-export const FocusButton = ({
-  trackRef,
-}: {
-  trackRef: TrackReferenceOrPlaceholder
-}) => {
-  const { t } = useTranslation('rooms', { keyPrefix: 'participantTileFocus' })
-
-  const { pinnedTrackRef } = useSnapshot(layoutStore)
-  const inFocus = isEqualTrackRef(trackRef, pinnedTrackRef)
-
-  return (
-    <Button
-      size="sm"
-      variant="primaryTextDark"
-      square
-      tooltip={inFocus ? t('pin.disable') : t('pin.enable')}
-      onPress={() => (inFocus ? clearPinnedTrack() : setPinnedTrack(trackRef))}
-    >
-      {inFocus ? <RiUnpinLine /> : <RiPushpin2Line />}
-    </Button>
-  )
-}

src/frontend/src/features/participantTile/components/participantTileFocus/MuteButton.tsx

@@ -1,45 +0,0 @@
-import { Participant, Track } from 'livekit-client'
-import { useTranslation } from 'react-i18next'
-import { useTrackMutedIndicator } from '@livekit/components-react'
-import { useMuteParticipant } from '@/features/rooms/api/muteParticipant'
-import { useState } from 'react'
-import { Button } from '@/primitives'
-import { RiMicLine, RiMicOffLine } from '@remixicon/react'
-import { MuteAlertDialog } from '@/features/rooms/livekit/components/MuteAlertDialog'
-
-export const MuteButton = ({ participant }: { participant: Participant }) => {
-  const { t } = useTranslation('rooms', { keyPrefix: 'participantTileFocus' })
-
-  const { isMuted } = useTrackMutedIndicator({
-    participant: participant,
-    source: Track.Source.Microphone,
-  })
-
-  const { muteParticipant } = useMuteParticipant()
-  const [isAlertOpen, setIsAlertOpen] = useState(false)
-
-  const name = participant.name || participant.identity
-
-  return (
-    <>
-      <Button
-        isDisabled={isMuted}
-        size={'sm'}
-        variant={'primaryTextDark'}
-        square
-        onPress={() => setIsAlertOpen(true)}
-        tooltip={t('muteParticipant', { name })}
-      >
-        {!isMuted ? <RiMicLine /> : <RiMicOffLine />}
-      </Button>
-      <MuteAlertDialog
-        isOpen={isAlertOpen}
-        onSubmit={() =>
-          muteParticipant(participant).then(() => setIsAlertOpen(false))
-        }
-        onClose={() => setIsAlertOpen(false)}
-        name={name}
-      />
-    </>
-  )
-}

src/frontend/src/features/participantTile/components/participantTileFocus/ParticipantTileFocus.tsx

@@ -1,112 +0,0 @@
-import { css } from '@/styled-system/css'
-import { HStack } from '@/styled-system/jsx'
-import { TrackReferenceOrPlaceholder } from '@livekit/components-core'
-import { ReactNode, useEffect, useRef, useState } from 'react'
-import { Track } from 'livekit-client'
-import { useCanMute } from '@/features/rooms/livekit/hooks/useCanMute'
-import { FocusButton } from './FocusButton'
-import { EffectsButton } from './EffectsButton'
-import { MuteButton } from './MuteButton'
-import { ZoomButton } from './ZoomButton'
-
-const MOUSE_IDLE_TIME = 3000
-
-type FadeOverlayProps = {
-  children: ReactNode
-  hasKeyboardFocus: boolean
-}
-
-const FadeOverlay = ({ children, hasKeyboardFocus }: FadeOverlayProps) => {
-  const [active, setActive] = useState(false)
-  const idleTimerRef = useRef<number | null>(null)
-
-  const clearIdleTimer = () => {
-    if (idleTimerRef.current) window.clearTimeout(idleTimerRef.current)
-  }
-
-  const armIdleTimer = () => {
-    clearIdleTimer()
-    idleTimerRef.current = window.setTimeout(() => {
-      setActive(false)
-    }, MOUSE_IDLE_TIME)
-  }
-
-  const handleActivity = () => {
-    setActive(true)
-    armIdleTimer()
-  }
-
-  useEffect(() => clearIdleTimer, [])
-
-  const isVisible = hasKeyboardFocus || active
-  return (
-    <div
-      className={css({
-        position: 'absolute',
-        left: '0',
-        top: '0',
-        display: 'flex',
-        justifyContent: 'center',
-        alignItems: 'center',
-        width: '100%',
-        height: '100%',
-      })}
-      data-visible={isVisible || undefined}
-      aria-hidden={!isVisible}
-      onMouseEnter={handleActivity}
-      onMouseMove={handleActivity}
-      onMouseLeave={() => {
-        clearIdleTimer()
-        setActive(false)
-      }}
-    >
-      {isVisible && children}
-    </div>
-  )
-}
-
-export const ParticipantTileFocus = ({
-  trackRef,
-  hasKeyboardFocus,
-}: {
-  trackRef: TrackReferenceOrPlaceholder
-  hasKeyboardFocus: boolean
-}) => {
-  const participant = trackRef.participant
-  const isScreenShare = trackRef.source == Track.Source.ScreenShare
-  const isLocal = participant.isLocal
-  const canMute = useCanMute(participant)
-
-  return (
-    <FadeOverlay hasKeyboardFocus={hasKeyboardFocus}>
-      <div
-        className={css({
-          backgroundColor: 'primaryDark.50',
-          zIndex: 1,
-          borderRadius: '0.25rem',
-          display: 'flex',
-          opacity: 0.6,
-          animation: 'overlayIn 200ms linear 300ms backwards',
-          _hover: {
-            opacity: 0.95,
-          },
-        })}
-      >
-        <HStack gap={0.5} padding={0.5}>
-          <FocusButton trackRef={trackRef} />
-          {!isScreenShare ? (
-            <>
-              {isLocal ? (
-                <EffectsButton />
-              ) : (
-                canMute && <MuteButton participant={participant} />
-              )}
-            </>
-          ) : (
-            !isLocal && <ZoomButton trackRef={trackRef} />
-          )}
-        </HStack>
-      </div>
-    </FadeOverlay>
-  )
-}

src/frontend/src/features/participantTile/components/participantTileFocus/ZoomButton.tsx

@@ -1,32 +0,0 @@
-import { TrackReferenceOrPlaceholder } from '@livekit/components-core'
-import { useTranslation } from 'react-i18next'
-import { useFullScreen } from '@/features/rooms/livekit/hooks/useFullScreen'
-import { Button } from '@/primitives'
-import { RiFullscreenLine } from '@remixicon/react'
-
-export const ZoomButton = ({
-  trackRef,
-}: {
-  trackRef: TrackReferenceOrPlaceholder
-}) => {
-  const { t } = useTranslation('rooms', { keyPrefix: 'participantTileFocus' })
-  const { toggleFullScreen, isFullscreenAvailable } = useFullScreen({
-    trackRef,
-  })
-
-  if (!isFullscreenAvailable) {
-    return
-  }
-
-  return (
-    <Button
-      size="sm"
-      variant="primaryTextDark"
-      square
-      tooltip={t('fullScreen')}
-      onPress={() => toggleFullScreen()}
-    >
-      <RiFullscreenLine />
-    </Button>
-  )
-}

src/frontend/src/features/participants/components/ParticipantsCollapsibleSection.tsx

@@ -1,93 +0,0 @@
-import { ReactNode, useId, useState } from 'react'
-import { RiArrowUpSLine } from '@remixicon/react'
-import { styled, HStack, VStack } from '@/styled-system/jsx'
-
-const Container = styled('div', {
-  base: {
-    border: '1px solid',
-    borderColor: 'greyscale.250',
-    borderRadius: '8px',
-    margin: '0 .625rem 0.9375rem',
-  },
-})
-
-const Header = styled('button', {
-  base: {
-    minHeight: '2.5rem',
-    paddingX: '1.25rem',
-    paddingY: '0.5rem',
-    gap: '0.5rem',
-    cursor: 'pointer',
-    display: 'flex',
-    justifyContent: 'space-between',
-    alignItems: 'center',
-    width: '100%',
-    fontSize: '1rem',
-    transition: 'background 200ms',
-    borderTopRadius: '7px', // container radius (8) minus its 1px border
-    _hover: { backgroundColor: 'greyscale.50' },
-  },
-  variants: {
-    isOpen: { false: { borderRadius: '7px' } },
-  },
-})
-
-const Chevron = styled(RiArrowUpSLine, {
-  base: { transition: 'transform 200ms', flexShrink: 0 },
-  variants: {
-    isOpen: { false: { transform: 'rotate(180deg)' } },
-  },
-})
-
-const List = styled(VStack, {
-  base: {
-    borderTop: '1px solid',
-    borderTopColor: 'greyscale.250',
-    alignItems: 'start',
-    minHeight: 0,
-    flexGrow: 1,
-    paddingY: '0.5rem',
-    paddingX: '1rem',
-    gap: 0,
-  },
-})
-
-export type ParticipantsCollapsibleSectionProps = {
-  heading: string
-  count: number
-  action?: ReactNode
-  children: ReactNode
-}
-
-export const ParticipantsCollapsibleSection = ({
-  heading,
-  count,
-  action,
-  children,
-}: ParticipantsCollapsibleSectionProps) => {
-  const [isOpen, setIsOpen] = useState(true)
-  const listId = useId()
-  return (
-    <Container>
-      <Header
-        type="button"
-        isOpen={isOpen}
-        aria-expanded={isOpen}
-        aria-controls={listId}
-        onClick={() => setIsOpen((open) => !open)}
-      >
-        <HStack justify="space-between" width="100%">
-          <span>{heading}</span>
-          <span>{count}</span>
-        </HStack>
-        <Chevron size={32} isOpen={isOpen} aria-hidden />
-      </Header>
-      {isOpen && (
-        <List id={listId} role="list">
-          {action}
-          {children}
-        </List>
-      )}
-    </Container>
-  )
-}

src/frontend/src/features/participants/components/ParticipantsCount.tsx

@@ -1,52 +0,0 @@
-import React from 'react'
-import { useTranslation } from 'react-i18next'
-import { useRemoteParticipants } from '@livekit/components-react'
-import { srOnly } from '@/styles/a11y'
-import { css } from '@/styled-system/css'
-import { RiInfinityLine } from '@remixicon/react'
-
-const badgeStyles = css({
-  position: 'absolute',
-  top: '-.25rem',
-  right: '-.25rem',
-  width: '1.25rem',
-  height: '1.25rem',
-  backgroundColor: 'gray',
-  borderRadius: '50%',
-  color: 'white',
-  fontSize: '0.75rem',
-  display: 'flex',
-  alignItems: 'center',
-  justifyContent: 'center',
-  textAlign: 'center',
-  zIndex: 1,
-  userSelect: 'none',
-})
-
-/**
- * Isolated so participant join/leave events only re-render the badge,
- * not the button, tooltip or shortcut registration.
- */
-export const ParticipantsCount = React.memo(
-  ({ describedById }: { describedById: string }) => {
-    const { t } = useTranslation('rooms', {
-      keyPrefix: 'controls.participants',
-    })
-    const remoteParticipants = useRemoteParticipants({
-      updateOnlyOn: [],
-    })
-    const count = (remoteParticipants?.length ?? 0) + 1
-
-    return (
-      <>
-        <span id={describedById} className={srOnly}>
-          {t('count', { count })}
-        </span>
-        <div className={badgeStyles} aria-hidden>
-          {count < 100 ? count : <RiInfinityLine size={10} />}
-        </div>
-      </>
-    )
-  }
-)
-ParticipantsCount.displayName = 'ParticipantsCount'

src/frontend/src/features/participants/components/ParticipantsList.tsx

@@ -1,103 +0,0 @@
-import { css } from '@/styled-system/css'
-import {
-  useRemoteParticipants,
-  useRoomContext,
-} from '@livekit/components-react'
-import { RoomEvent } from 'livekit-client'
-import { Div, H } from '@/primitives'
-import { useTranslation } from 'react-i18next'
-import { ParticipantRow } from './ParticipantRow'
-import { ParticipantsCollapsibleSection } from './ParticipantsCollapsibleSection'
-import { LowerAllHandsButton } from './LowerAllHandsButton'
-import { MuteEveryoneButton } from './MuteEveryoneButton'
-import { WaitingParticipantsSection } from './WaitingParticipantsSection'
-import { RaisedHandRow } from './RaisedHandRow'
-
-const JoinedParticipantsSections = () => {
-  const room = useRoomContext()
-  const { t } = useTranslation('rooms', { keyPrefix: 'participants' })
-
-  // `updateOnlyOn` filters on the room event *type*, not on which participant
-  // the event is about. `ParticipantNameChanged` and `ParticipantAttributesChanged`
-  // are room-wide and fire for the local participant too, so this hook re-emits
-  // (and we re-render) on local changes, despite its name.
-  //
-  // That is deliberate here: we prepend `room.localParticipant` to the list below,
-  // and its hand-raise state comes from `attributes.handRaisedAt`. Without the
-  // local events waking this component up, raising your own hand would not
-  // update the UI. Do not "optimise" these away.
-  const remoteParticipants = useRemoteParticipants({
-    updateOnlyOn: [
-      RoomEvent.ParticipantNameChanged,
-      RoomEvent.ParticipantAttributesChanged,
-    ],
-  })
-
-  const allParticipants = [
-    room.localParticipant,
-    ...[...remoteParticipants].sort((a, b) =>
-      (a.name || a.identity).localeCompare(b.name || b.identity)
-    ),
-  ]
-
-  const participantsWithRaisedHands = allParticipants
-    .filter((p) => !!p.attributes.handRaisedAt)
-    .sort((a, b) => {
-      const raisedAtA = Date.parse(a.attributes.handRaisedAt!)
-      const raisedAtB = Date.parse(b.attributes.handRaisedAt!)
-      return (
-        (Number.isNaN(raisedAtA) ? Infinity : raisedAtA) -
-        (Number.isNaN(raisedAtB) ? Infinity : raisedAtB)
-      )
-    })
-
-  return (
-    <>
-      {participantsWithRaisedHands.length > 0 && (
-        <ParticipantsCollapsibleSection
-          heading={t('raisedHands')}
-          count={participantsWithRaisedHands.length}
-          action={
-            <LowerAllHandsButton participants={participantsWithRaisedHands} />
-          }
-        >
-          {participantsWithRaisedHands.map((p) => (
-            <RaisedHandRow key={p.identity} participant={p} />
-          ))}
-        </ParticipantsCollapsibleSection>
-      )}
-      <ParticipantsCollapsibleSection
-        heading={t('contributors')}
-        count={allParticipants.length}
-        action={<MuteEveryoneButton participants={remoteParticipants} />}
-      >
-        {allParticipants.map((p) => (
-          <ParticipantRow key={p.identity} participant={p} />
-        ))}
-      </ParticipantsCollapsibleSection>
-    </>
-  )
-}
-
-export const ParticipantsList = () => {
-  const { t } = useTranslation('rooms', { keyPrefix: 'participants' })
-
-  return (
-    <Div overflowY="scroll">
-      <H
-        lvl={2}
-        className={css({
-          fontSize: '0.875rem',
-          fontWeight: 'bold',
-          color: 'greyscale.600',
-          padding: '0 1.5rem',
-          marginBottom: '0.83em',
-        })}
-      >
-        {t('subheading').toUpperCase()}
-      </H>
-      <WaitingParticipantsSection />
-      <JoinedParticipantsSections />
-    </Div>
-  )
-}

src/frontend/src/features/participants/components/PinBadge.tsx

@@ -1,52 +0,0 @@
-import { Participant, Track } from 'livekit-client'
-import { RiPushpin2Fill } from '@remixicon/react'
-import { css } from '@/styled-system/css'
-import { useMemo } from 'react'
-import { useSnapshot } from 'valtio'
-import { layoutStore } from '@/stores/layout'
-import { isEqualTrackRef } from '@livekit/components-core'
-import Source = Track.Source
-
-export const PinBadge = ({ participant }: { participant: Participant }) => {
-  const cameraTrackRef = useMemo(() => {
-    return {
-      participant: participant,
-      publication: participant.getTrackPublication(Source.Camera),
-      source: Source.Camera,
-    }
-  }, [participant])
-
-  const screenShareTrackRef = useMemo(() => {
-    return {
-      participant: participant,
-      publication: participant.getTrackPublication(Source.ScreenShare),
-      source: Source.ScreenShare,
-    }
-  }, [participant])
-
-  const { pinnedTrackRef } = useSnapshot(layoutStore)
-  const inFocus =
-    isEqualTrackRef(pinnedTrackRef, cameraTrackRef) ||
-    isEqualTrackRef(pinnedTrackRef, screenShareTrackRef)
-
-  if (!inFocus) return
-
-  return (
-    <div
-      className={css({
-        height: '18px',
-        width: '18px',
-        borderRadius: '100%',
-        background: 'white',
-        display: 'flex',
-        justifyContent: 'center',
-        alignItems: 'center',
-        position: 'absolute',
-        bottom: '-2px',
-        right: '-4px',
-      })}
-    >
-      <RiPushpin2Fill size={14} aria-hidden />
-    </div>
-  )
-}

src/frontend/src/features/participants/components/WaitingParticipantsSection.tsx

@@ -1,28 +0,0 @@
-import { useTranslation } from 'react-i18next'
-import { ParticipantsCollapsibleSection } from './ParticipantsCollapsibleSection'
-import { WaitingParticipantRow } from './WaitingParticipantRow'
-import { useWaitingParticipants } from '../hooks/useWaitingParticipants'
-
-export const WaitingParticipantsSection = () => {
-  const { t } = useTranslation('rooms', { keyPrefix: 'participants.waiting' })
-
-  const { waitingParticipants, handleParticipantEntry } =
-    useWaitingParticipants()
-
-  if (waitingParticipants?.length == 0) return
-
-  return (
-    <ParticipantsCollapsibleSection
-      heading={t('title')}
-      count={waitingParticipants.length}
-    >
-      {waitingParticipants.map((p) => (
-        <WaitingParticipantRow
-          key={p.id}
-          participant={p}
-          onAction={handleParticipantEntry}
-        />
-      ))}
-    </ParticipantsCollapsibleSection>
-  )
-}

src/frontend/src/features/pip/components/layout/PipFocusLayout.tsx

@@ -1,7 +1,7 @@
 import { memo } from 'react'
 import type { TrackReferenceOrPlaceholder } from '@livekit/components-core'
 import { styled } from '@/styled-system/jsx'
-import { ParticipantTile } from '@/features/participantTile/components/ParticipantTile'
+import { ParticipantTile } from '@/features/rooms/livekit/components/ParticipantTile'
 import { getTrackKey } from '../../utils/pipTrackSelection'
 
 type PipFocusLayoutProps = {

src/frontend/src/features/pip/components/layout/PipGridLayout.tsx

@@ -1,7 +1,7 @@
 import { memo, useMemo, useRef } from 'react'
 import type { TrackReferenceOrPlaceholder } from '@livekit/components-core'
 import { styled } from '@/styled-system/jsx'
-import { ParticipantTile } from '@/features/participantTile/components/ParticipantTile'
+import { ParticipantTile } from '@/features/rooms/livekit/components/ParticipantTile'
 import { usePipElementSize } from '../../hooks/usePipElementSize'
 import { computePipGridLayout } from '../../utils/pipGrid'
 import { getTrackKey } from '../../utils/pipTrackSelection'

src/frontend/src/features/pip/components/layout/PipScreenShareLayout.tsx

@@ -1,7 +1,7 @@
 import { memo } from 'react'
 import type { TrackReferenceOrPlaceholder } from '@livekit/components-core'
 import { styled } from '@/styled-system/jsx'
-import { ParticipantTile } from '@/features/participantTile/components/ParticipantTile'
+import { ParticipantTile } from '@/features/rooms/livekit/components/ParticipantTile'
 import { getTrackKey } from '../../utils/pipTrackSelection'
 
 type PipScreenShareLayoutProps = {

src/frontend/src/features/pip/components/layout/StageFrame.tsx

@@ -1,21 +1,18 @@
 import { useTranslation } from 'react-i18next'
 import { styled } from '@/styled-system/jsx'
-import { useTrackToggle } from '@livekit/components-react'
-import { Track } from 'livekit-client'
+import { useLocalParticipant } from '@livekit/components-react'
 
 export const StageFrame = ({ children }: { children: React.ReactNode }) => {
   const { t } = useTranslation('rooms', {
     keyPrefix: 'pictureInPicture',
   })
-  const { enabled: isScreenSharing } = useTrackToggle({
-    source: Track.Source.ScreenShare,
-  })
+  const { localParticipant } = useLocalParticipant()
 
   return (
     <Container
       role="region"
       aria-label={t('stage')}
-      {...(!isScreenSharing ? { inert: '' } : {})}
+      {...(!localParticipant.isScreenShareEnabled ? { inert: '' } : {})}
     >
       {children}
     </Container>

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

@@ -23,6 +23,7 @@ import { VStack } from '@/styled-system/jsx'
 import { Checkbox } from '@/primitives/Checkbox.tsx'
 
 import {
+  useSettingsDialog,
   SettingsDialogExtendedKey,
   useTranscriptionLanguage,
 } from '@/features/settings'
@@ -34,7 +35,6 @@ import { useIsMetadataCollectorEnabled } from '../hooks/useMetadataCollectorEnab
 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'
 
 export const TranscriptSidePanel = () => {
   const { data } = useConfig()
@@ -48,6 +48,8 @@ export const TranscriptSidePanel = () => {
   const { selectedLanguageKey, selectedLanguageLabel, isLanguageSetToAuto } =
     useTranscriptionLanguage()
 
+  const { openSettingsDialog } = useSettingsDialog()
+
   const hasTranscriptAccess = useHasRecordingAccess(
     RecordingMode.Transcript,
     FeatureFlags.Transcript

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

@@ -1,4 +1,3 @@
-import React from 'react'
 import { styled } from '@/styled-system/jsx'
 
 const StyledContainer = styled('div', {
@@ -68,36 +67,35 @@ export type ActiveSpeakerProps = {
   pushToTalk?: boolean
 }
 
-export const ActiveSpeaker = React.memo(
-  ({ isSpeaking, pushToTalk }: ActiveSpeakerProps) => {
-    return (
-      <StyledContainer pushToTalk={pushToTalk}>
-        <StyledChild
-          pushToTalk={pushToTalk}
-          active={isSpeaking}
-          size="small"
-          style={{
-            animationDelay: '300ms',
-          }}
-        />
-        <StyledChild
-          pushToTalk={pushToTalk}
-          active={isSpeaking}
-          style={{
-            animationDelay: '100ms',
-          }}
-        />
-        <StyledChild
-          pushToTalk={pushToTalk}
-          active={isSpeaking}
-          size="small"
-          style={{
-            animationDelay: '500ms',
-          }}
-        />
-      </StyledContainer>
-    )
-  }
-)
-
-ActiveSpeaker.displayName = 'ActiveSpeaker'
+export const ActiveSpeaker = ({
+  isSpeaking,
+  pushToTalk,
+}: ActiveSpeakerProps) => {
+  return (
+    <StyledContainer pushToTalk={pushToTalk}>
+      <StyledChild
+        pushToTalk={pushToTalk}
+        active={isSpeaking}
+        size="small"
+        style={{
+          animationDelay: '300ms',
+        }}
+      />
+      <StyledChild
+        pushToTalk={pushToTalk}
+        active={isSpeaking}
+        style={{
+          animationDelay: '100ms',
+        }}
+      />
+      <StyledChild
+        pushToTalk={pushToTalk}
+        active={isSpeaking}
+        size="small"
+        style={{
+          animationDelay: '500ms',
+        }}
+      />
+    </StyledContainer>
+  )
+}

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

@@ -170,6 +170,7 @@ export const Conference = ({
     prepareConnection()
   }, [room, apiConfig, isConnectionWarmedUp])
 
+  const [showInviteDialog, setShowInviteDialog] = useState(mode === 'create')
   const [mediaDeviceError, setMediaDeviceError] = useState<{
     error: MediaDeviceFailure | null
     kind: MediaDeviceKind | null
@@ -302,7 +303,13 @@ export const Conference = ({
           }}
         >
           <VideoConference />
-          {!isMobile && <InviteDialog mode={mode} />}
+          {showInviteDialog && !isMobile && (
+            <InviteDialog
+              isOpen={showInviteDialog}
+              onOpenChange={setShowInviteDialog}
+              onClose={() => setShowInviteDialog(false)}
+            />
+          )}
           <MediaDeviceErrorAlert
             {...mediaDeviceError}
             onClose={() => setMediaDeviceError({ error: null, kind: null })}

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

@@ -1,6 +1,6 @@
 import { useTranslation } from 'react-i18next'
 import { getRouteUrl } from '@/navigation/getRouteUrl'
-import { Div, Button, P, Bold } from '@/primitives'
+import { Div, Button, type DialogProps, P, Bold } from '@/primitives'
 import { HStack, styled, VStack } from '@/styled-system/jsx'
 import { Heading, Dialog } from 'react-aria-components'
 import { Text, text } from '@/primitives/Text'
@@ -10,7 +10,7 @@ import {
   RiFileCopyLine,
   RiSpam2Fill,
 } from '@remixicon/react'
-import { useMemo, useState } from 'react'
+import { useMemo } from 'react'
 import { css } from '@/styled-system/css'
 import { useRoomData } from '@/features/rooms/livekit/hooks/useRoomData'
 import { ApiAccessLevel } from '@/features/rooms/api/ApiRoom'
@@ -39,9 +39,7 @@ const StyledRACDialog = styled(Dialog, {
   },
 })
 
-export const InviteDialog = ({ mode }: { mode: 'join' | 'create' }) => {
-  const [showInviteDialog, setShowInviteDialog] = useState(mode === 'create')
-
+export const InviteDialog = (props: Omit<DialogProps, 'title'>) => {
   const { t } = useTranslation('rooms', { keyPrefix: 'shareDialog' })
 
   const roomData = useRoomData()
@@ -60,161 +58,163 @@ export const InviteDialog = ({ mode }: { mode: 'join' | 'create' }) => {
     copyRoomUrlToClipboard,
   } = useCopyRoomToClipboard(roomData)
 
-  if (!showInviteDialog) return null
   return (
-    <StyledRACDialog>
-      <VStack
-        alignItems="left"
-        justify="start"
-        gap={0}
-        style={{ maxWidth: '100%', overflow: 'visible' }}
-      >
-        <Heading slot="title" level={2} className={text({ variant: 'h2' })}>
-          {t('heading')}
-        </Heading>
-        <Div position="absolute" top="5" right="5">
-          <Button
-            invisible
-            variant="tertiaryText"
-            size="xs"
-            onPress={() => {
-              setShowInviteDialog(false)
-            }}
-            aria-label={t('closeDialog')}
-          >
-            <RiCloseLine />
-          </Button>
-        </Div>
-        <P>{t('description')}</P>
-        {isTelephonyReadyForUse ? (
-          <div
-            className={css({
-              width: '100%',
-              display: 'flex',
-              flexDirection: 'column',
-              marginTop: '0.5rem',
-              gap: '1rem',
-              overflow: 'visible',
-            })}
-          >
-            <div
-              className={css({
-                display: 'flex',
-                alignItems: 'center',
-                justifyContent: 'space-between',
-              })}
+    <StyledRACDialog {...props}>
+      {({ close }) => (
+        <VStack
+          alignItems="left"
+          justify="start"
+          gap={0}
+          style={{ maxWidth: '100%', overflow: 'visible' }}
+        >
+          <Heading slot="title" level={2} className={text({ variant: 'h2' })}>
+            {t('heading')}
+          </Heading>
+          <Div position="absolute" top="5" right="5">
+            <Button
+              invisible
+              variant="tertiaryText"
+              size="xs"
+              onPress={() => {
+                props.onClose?.()
+                close()
+              }}
+              aria-label={t('closeDialog')}
             >
-              <Text as="p" wrap="pretty">
-                {roomUrl?.replace(/^https?:\/\//, '')}
-              </Text>
-              {isTelephonyReadyForUse && roomUrl && (
-                <Button
-                  variant={isRoomUrlCopied ? 'success' : 'tertiaryText'}
-                  square
-                  size={'sm'}
-                  onPress={copyRoomUrlToClipboard}
-                  aria-label={isRoomUrlCopied ? t('copied') : t('copyUrl')}
-                  tooltip={isRoomUrlCopied ? t('copied') : t('copyUrl')}
-                >
-                  {isRoomUrlCopied ? (
-                    <RiCheckLine aria-hidden="true" />
-                  ) : (
-                    <RiFileCopyLine aria-hidden="true" />
-                  )}
-                </Button>
-              )}
-            </div>
+              <RiCloseLine />
+            </Button>
+          </Div>
+          <P>{t('description')}</P>
+          {isTelephonyReadyForUse ? (
             <div
               className={css({
+                width: '100%',
                 display: 'flex',
                 flexDirection: 'column',
+                marginTop: '0.5rem',
+                gap: '1rem',
+                overflow: 'visible',
               })}
             >
-              <Text as="p" wrap="pretty">
-                <Bold>{t('phone.call')}</Bold> ({telephony?.country}){' '}
-                {telephony?.internationalPhoneNumber}
-              </Text>
-              <Text as="p" wrap="pretty">
-                <Bold>{t('phone.pinCode')}</Bold>{' '}
-                {formatPinCode(roomData?.pin_code)}
-              </Text>
-            </div>
+              <div
+                className={css({
+                  display: 'flex',
+                  alignItems: 'center',
+                  justifyContent: 'space-between',
+                })}
+              >
+                <Text as="p" wrap="pretty">
+                  {roomUrl?.replace(/^https?:\/\//, '')}
+                </Text>
+                {isTelephonyReadyForUse && roomUrl && (
+                  <Button
+                    variant={isRoomUrlCopied ? 'success' : 'tertiaryText'}
+                    square
+                    size={'sm'}
+                    onPress={copyRoomUrlToClipboard}
+                    aria-label={isRoomUrlCopied ? t('copied') : t('copyUrl')}
+                    tooltip={isRoomUrlCopied ? t('copied') : t('copyUrl')}
+                  >
+                    {isRoomUrlCopied ? (
+                      <RiCheckLine aria-hidden="true" />
+                    ) : (
+                      <RiFileCopyLine aria-hidden="true" />
+                    )}
+                  </Button>
+                )}
+              </div>
+              <div
+                className={css({
+                  display: 'flex',
+                  flexDirection: 'column',
+                })}
+              >
+                <Text as="p" wrap="pretty">
+                  <Bold>{t('phone.call')}</Bold> ({telephony?.country}){' '}
+                  {telephony?.internationalPhoneNumber}
+                </Text>
+                <Text as="p" wrap="pretty">
+                  <Bold>{t('phone.pinCode')}</Bold>{' '}
+                  {formatPinCode(roomData?.pin_code)}
+                </Text>
+              </div>
 
+              <Button
+                variant={isCopied ? 'success' : 'secondaryText'}
+                size="sm"
+                fullWidth
+                aria-label={isCopied ? t('copied') : t('copy')}
+                style={{
+                  justifyContent: 'start',
+                }}
+                onPress={copyRoomToClipboard}
+                data-attr="share-dialog-copy"
+              >
+                {isCopied ? (
+                  <>
+                    <RiCheckLine
+                      size={18}
+                      style={{ marginRight: '8px' }}
+                      aria-hidden="true"
+                    />
+                    {t('copied')}
+                  </>
+                ) : (
+                  <>
+                    <RiFileCopyLine
+                      style={{ marginRight: '6px', minWidth: '18px' }}
+                      aria-hidden="true"
+                    />
+                    {t('copy')}
+                  </>
+                )}
+              </Button>
+            </div>
+          ) : (
             <Button
-              variant={isCopied ? 'success' : 'secondaryText'}
-              size="sm"
+              variant={isCopied ? 'success' : 'tertiary'}
               fullWidth
               aria-label={isCopied ? t('copied') : t('copy')}
-              style={{
-                justifyContent: 'start',
-              }}
               onPress={copyRoomToClipboard}
               data-attr="share-dialog-copy"
             >
               {isCopied ? (
                 <>
-                  <RiCheckLine
-                    size={18}
-                    style={{ marginRight: '8px' }}
-                    aria-hidden="true"
-                  />
+                  <RiCheckLine size={24} style={{ marginRight: '8px' }} />
                   {t('copied')}
                 </>
               ) : (
                 <>
-                  <RiFileCopyLine
-                    style={{ marginRight: '6px', minWidth: '18px' }}
-                    aria-hidden="true"
-                  />
-                  {t('copy')}
+                  <RiFileCopyLine size={24} style={{ marginRight: '8px' }} />
+                  {t('copyUrl')}
                 </>
               )}
             </Button>
-          </div>
-        ) : (
-          <Button
-            variant={isCopied ? 'success' : 'tertiary'}
-            fullWidth
-            aria-label={isCopied ? t('copied') : t('copy')}
-            onPress={copyRoomToClipboard}
-            data-attr="share-dialog-copy"
-          >
-            {isCopied ? (
-              <>
-                <RiCheckLine size={24} style={{ marginRight: '8px' }} />
-                {t('copied')}
-              </>
-            ) : (
-              <>
-                <RiFileCopyLine size={24} style={{ marginRight: '8px' }} />
-                {t('copyUrl')}
-              </>
-            )}
-          </Button>
-        )}
-        {roomData?.access_level === ApiAccessLevel.PUBLIC && (
-          <HStack>
-            <div
-              className={css({
-                backgroundColor: 'primary.200',
-                borderRadius: '50%',
-                padding: '4px',
-                marginTop: '1rem',
-              })}
-            >
-              <RiSpam2Fill
-                size={22}
+          )}
+          {roomData?.access_level === ApiAccessLevel.PUBLIC && (
+            <HStack>
+              <div
                 className={css({
-                  fill: 'primary.500',
+                  backgroundColor: 'primary.200',
+                  borderRadius: '50%',
+                  padding: '4px',
+                  marginTop: '1rem',
                 })}
-              />
-            </div>
-            <Text variant="sm" style={{ marginTop: '1rem' }}>
-              {t('permissions')}
-            </Text>
-          </HStack>
-        )}
-      </VStack>
+              >
+                <RiSpam2Fill
+                  size={22}
+                  className={css({
+                    fill: 'primary.500',
+                  })}
+                />
+              </div>
+              <Text variant="sm" style={{ marginTop: '1rem' }}>
+                {t('permissions')}
+              </Text>
+            </HStack>
+          )}
+        </VStack>
+      )}
     </StyledRACDialog>
   )
 }

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

@@ -7,7 +7,7 @@ import { useEnterRoom } from '../api/enterRoom'
 import {
   useListWaitingParticipants,
   type WaitingParticipant,
-} from '../../participants/api/listWaitingParticipants'
+} from '../api/listWaitingParticipants'
 import { decodeNotificationDataReceived } from '@/features/notifications/utils'
 import { NotificationType } from '@/features/notifications/NotificationType'
 

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

@@ -1,4 +1,4 @@
-import { ParticipantTile } from '@/features/participantTile/components/ParticipantTile.tsx'
+import { ParticipantTile } from './ParticipantTile'
 import type { FocusLayoutProps } from '@livekit/components-react'
 
 export function FocusLayout({ trackRef, ...htmlProps }: FocusLayoutProps) {

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

@@ -3,10 +3,10 @@ import { Button, Text } from '@/primitives'
 import { useCallback, useMemo, useRef } from 'react'
 import { screenSharePreferenceStore } from '@/stores/screenSharePreferences'
 import { useSnapshot } from 'valtio'
+import { useLocalParticipant } from '@livekit/components-react'
+import { useSize } from '../hooks/useResizeObserver'
 import type { TrackReferenceOrPlaceholder } from '@livekit/components-core'
 import { useTranslation } from 'react-i18next'
-import { useSize } from '@/features/rooms/livekit/hooks/useResizeObserver'
-import { LocalParticipant } from 'livekit-client'
 
 export const FullScreenShareWarning = ({
   trackReference,
@@ -17,6 +17,7 @@ export const FullScreenShareWarning = ({
 
   const warningContainerRef = useRef<HTMLDivElement>(null)
   const { width: containerWidth } = useSize(warningContainerRef)
+  const { localParticipant } = useLocalParticipant()
   const screenSharePreferences = useSnapshot(screenSharePreferenceStore)
 
   const isFullScreenSharing = useMemo(() => {
@@ -56,10 +57,8 @@ export const FullScreenShareWarning = ({
     screenSharePreferences.enabled && isFullScreenSharing
 
   const handleStopScreenShare = async () => {
-    const participant = trackReference.participant
-    if (!(participant instanceof LocalParticipant)) return
-    if (!participant.isScreenShareEnabled) return
-    await (participant as LocalParticipant).setScreenShareEnabled(false, {}, {})
+    if (!localParticipant.isScreenShareEnabled) return
+    await localParticipant.setScreenShareEnabled(false, {}, {})
   }
 
   const handleDismissWarning = useCallback(() => {

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

@@ -7,9 +7,9 @@ import { HStack } from '@/styled-system/jsx'
 import { useEffect, useRef, useState } from 'react'
 import { navigateTo } from '@/navigation/navigateTo'
 import { useScreenReaderAnnounce } from '@/hooks/useScreenReaderAnnounce'
+import { useSettingsDialog } from '@/features/settings/hook/useSettingsDialog'
 import { SettingsDialogExtendedKey } from '@/features/settings/type'
 import { useHumanizeDuration } from '@/hooks/useHumanizeDuration'
-import { openSettingsDialog } from '@/stores/settings'
 
 const IDLE_DISCONNECT_TIMEOUT_MS = 120000 // 2 minutes
 const COUNTDOWN_ANNOUNCEMENT_SECONDS = new Set([90, 60, 30])
@@ -94,6 +94,7 @@ const Description = () => {
 
 const Settings = () => {
   const { t } = useTranslation('rooms', { keyPrefix: 'isIdleDisconnectModal' })
+  const { openSettingsDialog } = useSettingsDialog()
   return (
     <P>
       {t('settingsPrefix')}{' '}

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

@@ -1,4 +1,4 @@
-import React from 'react'
+import React, { ReactNode } from 'react'
 import { styled } from '@/styled-system/jsx'
 
 const Hint = styled('div', {
@@ -25,17 +25,15 @@ const Hint = styled('div', {
 })
 
 export interface KeyboardShortcutHintProps {
-  hint?: string
+  children: ReactNode
 }
 
 /**
  * Small reusable bubble used to display and announce keyboard shortcuts,
  * typically when an element receives keyboard focus.
  */
-export const KeyboardShortcutHint = React.memo(
-  ({ hint }: KeyboardShortcutHintProps) => {
-    return <Hint>{hint}</Hint>
-  }
-)
-
-KeyboardShortcutHint.displayName = 'KeyboardShortcutHint'
+export const KeyboardShortcutHint: React.FC<KeyboardShortcutHintProps> = ({
+  children,
+}) => {
+  return <Hint>{children}</Hint>
+}

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

@@ -1,8 +1,8 @@
 import { Menu as RACMenu } from 'react-aria-components'
 import type { Participant } from 'livekit-client'
 import { useIsAdminOrOwner } from '@/features/rooms/livekit/hooks/useIsAdminOrOwner'
-import { PinMenuItem } from './items/PinMenuItem'
-import { RemoveMenuItem } from './items/RemoveMenuItem'
+import { PinMenuItem } from './PinMenuItem'
+import { RemoveMenuItem } from './RemoveMenuItem'
 
 export const ParticipantMenu = ({
   participant,

src/frontend/src/features/rooms/livekit/components/ParticipantMenu/PinMenuItem.tsx

@@ -1,28 +1,15 @@
-import { Participant, Track } from 'livekit-client'
+import type { Participant } from 'livekit-client'
 import { menuRecipe } from '@/primitives/menuRecipe'
 import { HStack } from '@/styled-system/jsx'
 import { RiPushpin2Line, RiUnpinLine } from '@remixicon/react'
 import { MenuItem } from 'react-aria-components'
 import { useTranslation } from 'react-i18next'
-import { useSnapshot } from 'valtio'
-import { clearPinnedTrack, layoutStore, setPinnedTrack } from '@/stores/layout'
-import { isEqualTrackRef } from '@livekit/components-core'
-import Source = Track.Source
-import { useMemo } from 'react'
+import { useFocusToggleParticipant } from '@/features/rooms/livekit/hooks/useFocusToggleParticipant'
 
 export const PinMenuItem = ({ participant }: { participant: Participant }) => {
   const { t } = useTranslation('rooms', { keyPrefix: 'participantMenu' })
 
-  const trackRef = useMemo(() => {
-    return {
-      participant: participant,
-      publication: participant.getTrackPublication(Source.Camera),
-      source: Source.Camera,
-    }
-  }, [participant])
-
-  const { pinnedTrackRef } = useSnapshot(layoutStore)
-  const inFocus = isEqualTrackRef(pinnedTrackRef, trackRef)
+  const { toggle, inFocus } = useFocusToggleParticipant(participant)
 
   return (
     <MenuItem
@@ -30,7 +17,7 @@ export const PinMenuItem = ({ participant }: { participant: Participant }) => {
         name: participant.name,
       })}
       className={menuRecipe({ icon: true }).item}
-      onAction={() => (inFocus ? clearPinnedTrack() : setPinnedTrack(trackRef))}
+      onAction={toggle}
     >
       <HStack gap={0.25}>
         {inFocus ? (

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

@@ -0,0 +1,44 @@
+import type { CSSProperties } from 'react'
+import { Text } from '@/primitives'
+import { useTranslation } from 'react-i18next'
+import { useParticipantInfo } from '@livekit/components-react'
+import type { Participant } from 'livekit-client'
+
+const participantNameStyles: CSSProperties = {
+  paddingBottom: '0.1rem',
+  overflow: 'hidden',
+  textOverflow: 'ellipsis',
+  whiteSpace: 'nowrap',
+}
+
+const participantNameScreenShareStyles: CSSProperties = {
+  ...participantNameStyles,
+  marginLeft: '0.4rem',
+}
+
+export const ParticipantName = ({
+  participant,
+  isScreenShare = false,
+}: {
+  participant: Participant
+  isScreenShare: boolean
+}) => {
+  const { t } = useTranslation('rooms', { keyPrefix: 'participantTile' })
+
+  const { identity, name } = useParticipantInfo({ participant })
+  const displayedName = name != '' ? name : identity
+
+  if (isScreenShare) {
+    return (
+      <Text variant="sm" style={participantNameScreenShareStyles}>
+        {t('screenShare', { name: displayedName })}
+      </Text>
+    )
+  }
+
+  return (
+    <Text variant="sm" style={participantNameStyles} aria-hidden="true">
+      {displayedName}
+    </Text>
+  )
+}

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

@@ -0,0 +1,73 @@
+import type { Participant } from 'livekit-client'
+import { styled } from '@/styled-system/jsx'
+import { Avatar } from '@/components/Avatar'
+import { useIsSpeaking } from '@livekit/components-react'
+import { getParticipantBackgroundGradient } from '@/features/rooms/utils/getParticipantBackgroundGradient'
+import { getParticipantColor } from '@/features/rooms/utils/getParticipantColor'
+import { useSize } from '@/features/rooms/livekit/hooks/useResizeObserver'
+import { useMemo, useRef } from 'react'
+
+const StyledParticipantPlaceHolder = styled('div', {
+  base: {
+    width: '100%',
+    height: '100%',
+    display: 'flex',
+    justifyContent: 'center',
+    alignItems: 'center',
+  },
+})
+
+type ParticipantPlaceholderProps = {
+  participant: Participant
+}
+
+export const ParticipantPlaceholder = ({
+  participant,
+}: ParticipantPlaceholderProps) => {
+  const isSpeaking = useIsSpeaking(participant)
+  const participantColor = getParticipantColor(participant)
+  const backgroundGradient = useMemo(
+    () => getParticipantBackgroundGradient(participantColor),
+    [participantColor]
+  )
+
+  const placeholderEl = useRef<HTMLDivElement>(null)
+  const { width, height } = useSize(placeholderEl)
+
+  const minDimension = Math.min(width, height)
+  const avatarSize = useMemo(
+    () => Math.min(Math.round(minDimension * 0.9), 160),
+    [minDimension]
+  )
+
+  const initialSize = useMemo(() => Math.round(avatarSize * 0.3), [avatarSize])
+
+  return (
+    <StyledParticipantPlaceHolder
+      ref={placeholderEl}
+      style={{
+        backgroundColor: participantColor,
+        backgroundImage: backgroundGradient,
+      }}
+    >
+      <div
+        style={{
+          borderRadius: '50%',
+          animation: isSpeaking ? 'pulse 1s infinite' : undefined,
+          height: 'auto',
+          aspectRatio: '1/1',
+          width: '80%',
+          maxWidth: `${avatarSize}px`,
+          fontSize: `${initialSize}px`,
+        }}
+      >
+        {/*fixme - participant doesn't update on ParticipantNameChanged event */}
+        <Avatar
+          name={participant.name}
+          bgColor={participantColor}
+          context="placeholder"
+        />
+      </div>
+    </StyledParticipantPlaceHolder>
+  )
+}

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

@@ -1,32 +1,39 @@
-import React from 'react'
 import {
   AudioTrack,
+  ConnectionQualityIndicator,
+  LockLockedIcon,
   ParticipantTileProps,
+  ScreenShareIcon,
   useEnsureTrackRef,
   useFeatureContext,
+  useIsEncrypted,
+  useMaybeLayoutContext,
   useMaybeTrackRefContext,
   useParticipantTile,
   VideoTrack,
   TrackRefContext,
   ParticipantContextIfNeeded,
-  useParticipantInfo,
 } from '@livekit/components-react'
+import React from 'react'
 import {
-  isEqualTrackRef,
   isTrackReference,
+  isTrackReferencePinned,
   TrackReferenceOrPlaceholder,
 } from '@livekit/components-core'
 import { Track } from 'livekit-client'
+import { RiHand } from '@remixicon/react'
+import { useRaisedHand, useRaisedHandPosition } from '../hooks/useRaisedHand'
+import { HStack } from '@/styled-system/jsx'
+import { MutedMicIndicator } from './MutedMicIndicator'
 import { ParticipantPlaceholder } from './ParticipantPlaceholder'
-import { ParticipantTileFocus } from './participantTileFocus/ParticipantTileFocus'
+import { ParticipantTileFocus } from './ParticipantTileFocus'
 import { FullScreenShareWarning } from './FullScreenShareWarning'
+import { ParticipantName } from './ParticipantName'
+import { getParticipantName } from '@/features/rooms/utils/getParticipantName'
 import { useTranslation } from 'react-i18next'
 import { getShortcutDescriptorById } from '@/features/shortcuts/catalog'
 import { formatShortcutLabel } from '@/features/shortcuts/formatLabels'
 import { KeyboardShortcutHint } from './KeyboardShortcutHint'
-import { layoutStore, clearPinnedTrack } from '@/stores/layout'
-import { ParticipantMetadata } from './ParticipantMetadata'
-import { getParticipantColor } from '@/features/rooms/utils/getParticipantColor'
 
 export function TrackRefContextIfNeeded(
   props: React.PropsWithChildren<{
@@ -66,12 +73,16 @@ export const ParticipantTile: (
   ref
 ) {
   const trackReference = useEnsureTrackRef(trackRef)
+
   const { elementProps } = useParticipantTile<HTMLDivElement>({
     htmlProps,
     disableSpeakingIndicator,
     onParticipantClick,
     trackRef: trackReference,
   })
+  const isEncrypted = useIsEncrypted(trackReference.participant)
+  const layoutContext = useMaybeLayoutContext()
+
   const autoManageSubscription = useFeatureContext()?.autoSubscription
 
   const handleSubscribe = React.useCallback(
@@ -79,25 +90,28 @@ export const ParticipantTile: (
       if (
         trackReference.source &&
         !subscribed &&
-        layoutStore.pinnedTrackRef &&
-        isEqualTrackRef(trackReference, layoutStore.pinnedTrackRef)
+        layoutContext &&
+        layoutContext.pin.dispatch &&
+        isTrackReferencePinned(trackReference, layoutContext.pin.state)
       ) {
-        clearPinnedTrack()
+        layoutContext.pin.dispatch({ msg: 'clear_pin' })
       }
     },
-    [trackReference]
+    [trackReference, layoutContext]
   )
 
+  const { isHandRaised } = useRaisedHand({
+    participant: trackReference.participant,
+  })
+
+  const { positionInQueue, firstInQueue } = useRaisedHandPosition({
+    participant: trackReference.participant,
+  })
+
   const isScreenShare = trackReference.source != Track.Source.Camera
   const [hasKeyboardFocus, setHasKeyboardFocus] = React.useState(false)
 
-  const participantColor = getParticipantColor(trackReference.participant)
-
-  const { identity, name } = useParticipantInfo({
-    participant: trackReference.participant,
-  })
-  const participantName = name || identity || 'Unknown'
-
+  const participantName = getParticipantName(trackReference.participant)
   const { t } = useTranslation('rooms', { keyPrefix: 'participantTileFocus' })
 
   const interactiveProps = {
@@ -124,9 +138,7 @@ export const ParticipantTile: (
     <div ref={ref} style={{ position: 'relative' }} {...interactiveProps}>
       <TrackRefContextIfNeeded trackRef={trackReference}>
         <ParticipantContextIfNeeded participant={trackReference.participant}>
-          {trackReference.participant.isLocal && (
-            <FullScreenShareWarning trackReference={trackReference} />
-          )}
+          <FullScreenShareWarning trackReference={trackReference} />
           {children ?? (
             <>
               {isTrackReference(trackReference) &&
@@ -148,16 +160,76 @@ export const ParticipantTile: (
               )}
               <div className="lk-participant-placeholder">
                 <ParticipantPlaceholder
-                  color={participantColor}
-                  displayedNamed={participantName}
+                  participant={trackReference.participant}
                 />
               </div>
               {!disableMetadata && (
-                <ParticipantMetadata
-                  displayedName={participantName}
-                  isScreenShare={isScreenShare}
-                  participant={trackReference.participant}
-                />
+                <div className="lk-participant-metadata">
+                  <HStack gap={0.25}>
+                    {!isScreenShare && (
+                      <MutedMicIndicator
+                        participant={trackReference.participant}
+                      />
+                    )}
+                    <div
+                      className="lk-participant-metadata-item"
+                      style={{
+                        padding: '0.1rem 0.25rem',
+                        backgroundColor:
+                          isHandRaised && !isScreenShare
+                            ? firstInQueue
+                              ? '#fde047'
+                              : 'white'
+                            : undefined,
+                        color:
+                          isHandRaised && !isScreenShare ? 'black' : undefined,
+                        transition: 'background 200ms ease, color 400ms ease',
+                      }}
+                    >
+                      {isHandRaised && !isScreenShare && (
+                        <span
+                          style={{
+                            display: 'inline-flex',
+                            alignItems: 'center',
+                            gap: '0.1rem',
+                          }}
+                        >
+                          <span>{positionInQueue}</span>
+                          <RiHand
+                            color="black"
+                            size={16}
+                            style={{
+                              marginRight: '0.4rem',
+                              marginLeft: '0.1rem',
+                              minWidth: '16px',
+                              animationDuration: '300ms',
+                              animationName: 'wave_hand',
+                              animationIterationCount: '2',
+                            }}
+                          />
+                        </span>
+                      )}
+                      {isScreenShare && (
+                        <ScreenShareIcon
+                          style={{
+                            maxWidth: '20px',
+                            width: '100%',
+                          }}
+                        />
+                      )}
+                      {isEncrypted && !isScreenShare && (
+                        <LockLockedIcon style={{ marginRight: '0.25rem' }} />
+                      )}
+                      <div className="lk-participant-name-wrapper">
+                        <ParticipantName
+                          isScreenShare={isScreenShare}
+                          participant={trackReference.participant}
+                        />
+                      </div>
+                    </div>
+                  </HStack>
+                  <ConnectionQualityIndicator className="lk-participant-metadata-item" />
+                </div>
               )}
             </>
           )}
@@ -169,13 +241,13 @@ export const ParticipantTile: (
           )}
         </ParticipantContextIfNeeded>
       </TrackRefContextIfNeeded>
-      <KeyboardShortcutHint
-        hint={t('toolbarHint', {
+      <KeyboardShortcutHint>
+        {t('toolbarHint', {
           shortcut: formatShortcutLabel(
             getShortcutDescriptorById('open-shortcuts')?.shortcut
           ),
         })}
-      />
+      </KeyboardShortcutHint>
     </div>
   )
 })

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

@@ -0,0 +1,232 @@
+import { css } from '@/styled-system/css'
+import { HStack } from '@/styled-system/jsx'
+import { Button } from '@/primitives'
+import {
+  RiFullscreenLine,
+  RiImageCircleAiFill,
+  RiMicLine,
+  RiMicOffLine,
+  RiPushpin2Line,
+  RiUnpinLine,
+} from '@remixicon/react'
+import {
+  useFocusToggle,
+  useTrackMutedIndicator,
+} from '@livekit/components-react'
+import { useTranslation } from 'react-i18next'
+import { TrackReferenceOrPlaceholder } from '@livekit/components-core'
+import { useEffect, useRef, useState } from 'react'
+import { useSidePanel } from '../hooks/useSidePanel'
+import { useFullScreen } from '../hooks/useFullScreen'
+import { type Participant, Track } from 'livekit-client'
+import { MuteAlertDialog } from './MuteAlertDialog'
+import { useMuteParticipant } from '@/features/rooms/api/muteParticipant'
+import { useCanMute } from '@/features/rooms/livekit/hooks/useCanMute'
+
+const ZoomButton = ({
+  trackRef,
+}: {
+  trackRef: TrackReferenceOrPlaceholder
+}) => {
+  const { t } = useTranslation('rooms', { keyPrefix: 'participantTileFocus' })
+  const { toggleFullScreen, isFullscreenAvailable } = useFullScreen({
+    trackRef,
+  })
+
+  if (!isFullscreenAvailable) {
+    return
+  }
+
+  return (
+    <Button
+      size="sm"
+      variant="primaryTextDark"
+      square
+      tooltip={t('fullScreen')}
+      onPress={() => toggleFullScreen()}
+    >
+      <RiFullscreenLine />
+    </Button>
+  )
+}
+
+const FocusButton = ({
+  trackRef,
+}: {
+  trackRef: TrackReferenceOrPlaceholder
+}) => {
+  const { t } = useTranslation('rooms', { keyPrefix: 'participantTileFocus' })
+  const { mergedProps, inFocus } = useFocusToggle({
+    trackRef,
+    props: {},
+  })
+  return (
+    <Button
+      size="sm"
+      variant="primaryTextDark"
+      square
+      tooltip={inFocus ? t('pin.disable') : t('pin.enable')}
+      // eslint-disable-next-line @typescript-eslint/no-explicit-any
+      onPress={(event) => mergedProps?.onClick?.(event as any)}
+    >
+      {inFocus ? <RiUnpinLine /> : <RiPushpin2Line />}
+    </Button>
+  )
+}
+
+const EffectsButton = () => {
+  const { t } = useTranslation('rooms', { keyPrefix: 'participantTileFocus' })
+  const { isEffectsOpen, toggleEffects } = useSidePanel()
+  return (
+    <Button
+      size={'sm'}
+      variant={'primaryTextDark'}
+      square
+      tooltip={t('effects')}
+      onPress={() => !isEffectsOpen && toggleEffects()}
+    >
+      <RiImageCircleAiFill />
+    </Button>
+  )
+}
+
+const MuteButton = ({ participant }: { participant: Participant }) => {
+  const { t } = useTranslation('rooms', { keyPrefix: 'participantTileFocus' })
+
+  const { isMuted } = useTrackMutedIndicator({
+    participant: participant,
+    source: Track.Source.Microphone,
+  })
+
+  const { muteParticipant } = useMuteParticipant()
+  const [isAlertOpen, setIsAlertOpen] = useState(false)
+
+  const name = participant.name || participant.identity
+
+  return (
+    <>
+      <Button
+        isDisabled={isMuted}
+        size={'sm'}
+        variant={'primaryTextDark'}
+        square
+        onPress={() => setIsAlertOpen(true)}
+        tooltip={t('muteParticipant', { name })}
+      >
+        {!isMuted ? <RiMicLine /> : <RiMicOffLine />}
+      </Button>
+      <MuteAlertDialog
+        isOpen={isAlertOpen}
+        onSubmit={() =>
+          muteParticipant(participant).then(() => setIsAlertOpen(false))
+        }
+        onClose={() => setIsAlertOpen(false)}
+        name={name}
+      />
+    </>
+  )
+}
+
+const MOUSE_IDLE_TIME = 3000
+
+export const ParticipantTileFocus = ({
+  trackRef,
+  hasKeyboardFocus,
+}: {
+  trackRef: TrackReferenceOrPlaceholder
+  hasKeyboardFocus: boolean
+}) => {
+  const [hovered, setHovered] = useState(false)
+  const [opacity, setOpacity] = useState(0)
+
+  const idleTimerRef = useRef<number | null>(null)
+  const [isIdleRef, setIsIdleRef] = useState(false)
+
+  const isVisible = hasKeyboardFocus || (hovered && !isIdleRef)
+
+  useEffect(() => {
+    if (isVisible) {
+      // Wait for next frame to ensure element is mounted
+      requestAnimationFrame(() => {
+        setOpacity(0.6)
+      })
+    } else {
+      setOpacity(0)
+    }
+  }, [isVisible])
+
+  const handleMouseMove = () => {
+    if (idleTimerRef.current) {
+      window.clearTimeout(idleTimerRef.current)
+    }
+    idleTimerRef.current = window.setTimeout(() => {
+      setIsIdleRef(true)
+    }, MOUSE_IDLE_TIME)
+    setIsIdleRef(false)
+  }
+
+  const participant = trackRef.participant
+
+  const isScreenShare = trackRef.source == Track.Source.ScreenShare
+  const isLocal = trackRef.participant.isLocal
+
+  const canMute = useCanMute(participant)
+
+  return (
+    <div
+      className={css({
+        position: 'absolute',
+        left: '0',
+        top: '0',
+        display: 'flex',
+        justifyContent: 'center',
+        alignItems: 'center',
+        width: '100%',
+        height: '100%',
+      })}
+      aria-hidden={!isVisible}
+      onMouseEnter={() => setHovered(true)}
+      onMouseLeave={() => setHovered(false)}
+      onMouseMove={handleMouseMove}
+    >
+      {isVisible && (
+        <div
+          className={css({
+            backgroundColor: 'primaryDark.50',
+            transition: 'opacity 200ms linear',
+            zIndex: 1,
+            borderRadius: '0.25rem',
+            display: 'flex',
+            _hover: {
+              opacity: '0.95 !important',
+            },
+          })}
+          style={{ opacity }}
+        >
+          <HStack
+            gap={0.5}
+            className={css({
+              padding: '0.5rem',
+              _hover: {
+                opacity: '1 !important',
+              },
+            })}
+          >
+            <FocusButton trackRef={trackRef} />
+            {!isScreenShare ? (
+              <>
+                {participant.isLocal ? (
+                  <EffectsButton />
+                ) : (
+                  canMute && <MuteButton participant={participant} />
+                )}
+              </>
+            ) : (
+              !isLocal && <ZoomButton trackRef={trackRef} />
+            )}
+          </HStack>
+        </div>
+      )}
+    </div>
+  )
+}

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

@@ -1,6 +0,0 @@
-import { useSyncLiveKitMetadata } from '../hooks/useSyncLiveKitMetadata'
-
-export const RoomMetadataSynchronizer = () => {
-  useSyncLiveKitMetadata()
-  return null
-}

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

@@ -5,10 +5,10 @@ import { text } from '@/primitives/Text'
 import { Button, Div } from '@/primitives'
 import { RiArrowLeftLine, RiCloseLine } from '@remixicon/react'
 import { useTranslation } from 'react-i18next'
-import { ParticipantsList } from '@/features/participants/components/ParticipantsList'
+import { ParticipantsList } from './controls/Participants/ParticipantsList'
 import { PanelId, useSidePanel } from '../hooks/useSidePanel'
 import React, { ReactNode, useCallback, useRef } from 'react'
-import { Chat } from '@/features/chat/components/Chat'
+import { Chat } from '../prefabs/Chat'
 import { Effects } from './effects/Effects'
 import { Admin } from './Admin'
 import { Tools } from './Tools'
@@ -218,7 +218,7 @@ export const SidePanel = () => {
       <Panel isOpen={isEffectsOpen}>
         <Effects />
       </Panel>
-      <Panel isOpen={isChatOpen}>
+      <Panel isOpen={isChatOpen} keepAlive={true}>
         <Chat />
       </Panel>
       <Panel isOpen={isToolsOpen} keepAlive={true}>

src/frontend/src/features/rooms/livekit/components/chat/Entry.tsx

@@ -0,0 +1,71 @@
+import type { ReceivedChatMessage } from '@livekit/components-core'
+import * as React from 'react'
+import { css } from '@/styled-system/css'
+import { Text } from '@/primitives'
+import type { MessageFormatter } from '@livekit/components-react'
+
+export interface ChatEntryProps extends React.HTMLAttributes<HTMLLIElement> {
+  entry: ReceivedChatMessage
+  hideMetadata?: boolean
+  messageFormatter?: MessageFormatter
+}
+
+export const ChatEntry: (
+  props: ChatEntryProps & React.RefAttributes<HTMLLIElement>
+) => React.ReactNode = /* @__PURE__ */ React.forwardRef<
+  HTMLLIElement,
+  ChatEntryProps
+>(function ChatEntry(
+  { entry, hideMetadata = false, messageFormatter, ...props }: ChatEntryProps,
+  ref
+) {
+  const formattedMessage = React.useMemo(() => {
+    return messageFormatter ? messageFormatter(entry.message) : entry.message
+  }, [entry.message, messageFormatter])
+  const time = new Date(entry.timestamp)
+  const locale = navigator ? navigator.language : 'en-US'
+
+  return (
+    <li
+      className={css({
+        display: 'flex',
+        flexDirection: 'column',
+        gap: '0.25rem',
+      })}
+      ref={ref}
+      title={time.toLocaleTimeString(locale, { timeStyle: 'full' })}
+      data-lk-message-origin={entry.from?.isLocal ? 'local' : 'remote'}
+      {...props}
+    >
+      {!hideMetadata && (
+        <span
+          className={css({
+            display: 'flex',
+            gap: '0.5rem',
+            paddingTop: '0.75rem',
+          })}
+        >
+          <Text bold={true} variant="sm">
+            {entry.from?.name ?? entry.from?.identity}
+          </Text>
+          <Text variant="sm" className={css({ color: 'gray.700' })}>
+            {time.toLocaleTimeString(locale, { timeStyle: 'short' })}
+          </Text>
+        </span>
+      )}
+      <Text
+        variant="sm"
+        margin={false}
+        className={css({
+          whiteSpace: 'pre-wrap',
+          '& .lk-chat-link': {
+            color: 'blue',
+            textDecoration: 'underline',
+          },
+        })}
+      >
+        {formattedMessage}
+      </Text>
+    </li>
+  )
+})

src/frontend/src/features/rooms/livekit/components/chat/Input.tsx

@@ -0,0 +1,120 @@
+import { Button, TextArea } from '@/primitives'
+import { HStack } from '@/styled-system/jsx'
+import { RiSendPlane2Fill } from '@remixicon/react'
+import { useState, useEffect, RefObject } from 'react'
+import { useTranslation } from 'react-i18next'
+import { css } from '@/styled-system/css'
+
+const MAX_ROWS = 6
+
+interface ChatInputProps {
+  inputRef: RefObject<HTMLTextAreaElement>
+  onSubmit: (text: string) => void
+  isSending: boolean
+}
+
+export const ChatInput = ({
+  inputRef,
+  onSubmit,
+  isSending,
+}: ChatInputProps) => {
+  const { t } = useTranslation('rooms', { keyPrefix: 'controls.chat.input' })
+  const [text, setText] = useState('')
+  const [rows, setRows] = useState(1)
+
+  const handleSubmit = () => {
+    onSubmit(text)
+    setText('')
+  }
+
+  const isDisabled = !text.trim() || isSending
+
+  const submitOnEnter = (e: React.KeyboardEvent<HTMLTextAreaElement>) => {
+    if (e.key !== 'Enter' || (e.key === 'Enter' && e.shiftKey)) return
+    e.preventDefault()
+    if (!isDisabled) handleSubmit()
+  }
+
+  useEffect(() => {
+    const resize = () => {
+      if (!inputRef.current) return
+
+      const textAreaLineHeight = 20 // Adjust this value based on your TextArea's line height
+      const previousRows = inputRef.current.rows
+      inputRef.current.rows = 1
+
+      const currentRows = Math.floor(
+        inputRef.current.scrollHeight / textAreaLineHeight
+      )
+
+      if (currentRows === previousRows) {
+        inputRef.current.rows = currentRows
+      }
+
+      if (currentRows >= MAX_ROWS) {
+        inputRef.current.rows = MAX_ROWS
+        inputRef.current.scrollTop = inputRef.current.scrollHeight
+      }
+
+      if (currentRows < MAX_ROWS) {
+        inputRef.current.style.overflowY = 'hidden'
+      } else {
+        inputRef.current.style.overflowY = 'auto'
+      }
+
+      setRows(currentRows < MAX_ROWS ? currentRows : MAX_ROWS)
+    }
+
+    resize()
+  }, [text, inputRef])
+
+  return (
+    <HStack
+      className={css({
+        margin: '0.75rem 0 1.5rem',
+        padding: '0.5rem',
+        backgroundColor: 'gray.100',
+        borderRadius: 4,
+      })}
+    >
+      <TextArea
+        ref={inputRef}
+        onKeyDown={(e) => {
+          e.stopPropagation()
+          submitOnEnter(e)
+        }}
+        onKeyUp={(e) => e.stopPropagation()}
+        placeholder={t('textArea.placeholder')}
+        value={text}
+        onChange={(e) => {
+          setText(e.target.value)
+        }}
+        rows={rows || 1}
+        style={{
+          border: 'none',
+          resize: 'none',
+          height: 'auto',
+          minHeight: `34px`,
+          lineHeight: 1.25,
+          padding: '7px 10px',
+          overflowY: 'hidden',
+        }}
+        placeholderStyle={'strong'}
+        spellCheck={false}
+        maxLength={2000}
+        aria-label={t('textArea.label')}
+      />
+      <Button
+        square
+        invisible
+        variant="tertiaryText"
+        size="sm"
+        onPress={handleSubmit}
+        isDisabled={isDisabled}
+        aria-label={t('button.label')}
+      >
+        <RiSendPlane2Fill />
+      </Button>
+    </HStack>
+  )
+}

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

@@ -2,7 +2,7 @@ import { Button } from '@/primitives'
 import { RiSettings3Line } from '@remixicon/react'
 import { useTranslation } from 'react-i18next'
 import { SettingsDialogExtendedKey } from '@/features/settings/type'
-import { openSettingsDialog } from '@/stores/settings'
+import { useSettingsDialog } from '@/features/settings/hook/useSettingsDialog'
 
 export const SettingsButton = ({
   settingTab,
@@ -12,6 +12,7 @@ export const SettingsButton = ({
   onPress?: () => void
 }) => {
   const { t } = useTranslation('rooms', { keyPrefix: 'selectDevice' })
+  const { openSettingsDialog } = useSettingsDialog()
 
   return (
     <Button

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

@@ -9,8 +9,8 @@ import useLongPress from '@/features/shortcuts/useLongPress'
 import { ActiveSpeaker } from '@/features/rooms/components/ActiveSpeaker'
 import {
   useIsSpeaking,
+  useLocalParticipant,
   useMaybeRoomContext,
-  useRoomContext,
 } from '@livekit/components-react'
 import type { ButtonRecipeProps } from '@/primitives/buttonRecipe'
 import type { ToggleButtonProps } from '@/primitives/ToggleButton'
@@ -169,7 +169,7 @@ export const ToggleDevice = <T extends ToggleSource>({
 }
 
 const ActiveSpeakerWrapper = () => {
-  const room = useRoomContext()
-  const isSpeaking = useIsSpeaking(room.localParticipant)
+  const { localParticipant } = useLocalParticipant()
+  const isSpeaking = useIsSpeaking(localParticipant)
   return <ActiveSpeaker isSpeaking={isSpeaking} pushToTalk />
 }

src/frontend/src/features/rooms/livekit/components/controls/Options/SettingsMenuItem.tsx

@@ -2,10 +2,11 @@ import { RiSettings3Line } from '@remixicon/react'
 import { MenuItem } from 'react-aria-components'
 import { useTranslation } from 'react-i18next'
 import { menuRecipe } from '@/primitives/menuRecipe'
-import { openSettingsDialog } from '@/stores/settings'
+import { useSettingsDialog } from '@/features/settings/hook/useSettingsDialog'
 
 export const SettingsMenuItem = () => {
   const { t } = useTranslation('rooms', { keyPrefix: 'options.items' })
+  const { openSettingsDialog } = useSettingsDialog()
 
   return (
     <MenuItem

src/frontend/src/features/rooms/livekit/components/controls/Participants/HandRaisedListItem.tsx

@@ -4,47 +4,27 @@ import { HStack } from '@/styled-system/jsx'
 import { Text } from '@/primitives/Text'
 import { useTranslation } from 'react-i18next'
 import { Avatar } from '@/components/Avatar'
-import { useLowerHandParticipant } from '../api/lowerHandParticipant'
+import { useLowerHandParticipant } from '@/features/rooms/api/lowerHandParticipant'
 import { getParticipantColor } from '@/features/rooms/utils/getParticipantColor'
+import { useIsAdminOrOwner } from '@/features/rooms/livekit/hooks/useIsAdminOrOwner'
 import type { Participant } from 'livekit-client'
 import { isLocal } from '@/utils/livekit'
 import { RiHand } from '@remixicon/react'
 import { Button } from '@/primitives'
-import { AdminOrOwnerOnly } from '@/features/rooms/components/AdminOrOwnerOnly'
-
-const ActionButton = ({
-  participant,
-  name,
-}: {
-  participant: Participant
-  name: string
-}) => {
-  const { t } = useTranslation('rooms')
-  const { lowerHandParticipant } = useLowerHandParticipant()
-
-  return (
-    <Button
-      square
-      variant="greyscale"
-      size="sm"
-      onPress={() => lowerHandParticipant(participant)}
-      aria-label={t('participants.lowerParticipantHand', { name })}
-      tooltip={t('participants.lowerParticipantHand', { name })}
-      data-attr="participants-lower-hand"
-    >
-      <RiHand />
-    </Button>
-  )
-}
 
 type HandRaisedListItemProps = {
   participant: Participant
 }
 
-export const RaisedHandRow = ({ participant }: HandRaisedListItemProps) => {
+export const HandRaisedListItem = ({
+  participant,
+}: HandRaisedListItemProps) => {
   const { t } = useTranslation('rooms')
   const name = participant.name || participant.identity
 
+  const { lowerHandParticipant } = useLowerHandParticipant()
+  const isAdminOrOwner = useIsAdminOrOwner()
+
   return (
     <HStack
       role="listitem"
@@ -89,9 +69,19 @@ export const RaisedHandRow = ({ participant }: HandRaisedListItemProps) => {
           )}
         </Text>
       </HStack>
-      <AdminOrOwnerOnly>
-        <ActionButton participant={participant} name={name} />
-      </AdminOrOwnerOnly>
+      {isAdminOrOwner && (
+        <Button
+          square
+          variant="greyscale"
+          size="sm"
+          onPress={() => lowerHandParticipant(participant)}
+          aria-label={t('participants.lowerParticipantHand', { name })}
+          tooltip={t('participants.lowerParticipantHand', { name })}
+          data-attr="participants-lower-hand"
+        >
+          <RiHand />
+        </Button>
+      )}
     </HStack>
   )
 }

src/frontend/src/features/rooms/livekit/components/controls/Participants/LowerAllHandsButton.tsx

@@ -1,22 +1,23 @@
 import { Button } from '@/primitives'
 import { useTranslation } from 'react-i18next'
 import type { Participant } from 'livekit-client'
-import { useLowerHandParticipants } from '../api/lowerHandParticipants'
+import { useLowerHandParticipants } from '@/features/rooms/api/lowerHandParticipants'
+import { useIsAdminOrOwner } from '@/features/rooms/livekit/hooks/useIsAdminOrOwner'
 import { css } from '@/styled-system/css'
 import { RiHand } from '@remixicon/react'
-import { AdminOrOwnerOnly } from '@/features/rooms/components/AdminOrOwnerOnly'
 
 type LowerAllHandsButtonProps = {
   participants: Array<Participant>
 }
 
-const LowerAllHandsButtonInner = ({
+export const LowerAllHandsButton = ({
   participants,
 }: LowerAllHandsButtonProps) => {
   const { lowerHandParticipants } = useLowerHandParticipants()
   const { t } = useTranslation('rooms')
 
-  if (!participants.length) return null
+  const isAdminOrOwner = useIsAdminOrOwner()
+  if (!isAdminOrOwner) return null
 
   return (
     <Button
@@ -35,13 +36,3 @@ const LowerAllHandsButtonInner = ({
     </Button>
   )
 }
-
-export const LowerAllHandsButton = ({
-  participants,
-}: LowerAllHandsButtonProps) => {
-  return (
-    <AdminOrOwnerOnly>
-      <LowerAllHandsButtonInner participants={participants} />
-    </AdminOrOwnerOnly>
-  )
-}

src/frontend/src/features/rooms/livekit/components/controls/Participants/ParticipantListItem.tsx

@@ -16,11 +16,11 @@ import Source = Track.Source
 import { RiMicFill, RiMicOffFill } from '@remixicon/react'
 import { Button } from '@/primitives'
 import { useState } from 'react'
+import { MuteAlertDialog } from '../../MuteAlertDialog'
 import { useMuteParticipant } from '@/features/rooms/api/muteParticipant'
 import { useCanMute } from '@/features/rooms/livekit/hooks/useCanMute'
-import { ParticipantMenuButton } from './menu/ParticipantMenuButton'
+import { ParticipantMenuButton } from '../../ParticipantMenu/ParticipantMenuButton'
 import { PinBadge } from './PinBadge'
-import { MuteAlertDialog } from '@/features/rooms/livekit/components/MuteAlertDialog'
 
 type MicIndicatorProps = {
   participant: Participant
@@ -93,7 +93,9 @@ type ParticipantListItemProps = {
   participant: Participant
 }
 
-export const ParticipantRow = ({ participant }: ParticipantListItemProps) => {
+export const ParticipantListItem = ({
+  participant,
+}: ParticipantListItemProps) => {
   const { t } = useTranslation('rooms')
   const name = participant.name || participant.identity
   return (

src/frontend/src/features/rooms/livekit/components/controls/Participants/ParticipantsCollapsableList.tsx

@@ -0,0 +1,110 @@
+import { ReactNode, useState } from 'react'
+import { css } from '@/styled-system/css'
+import { ToggleButton } from 'react-aria-components'
+import { HStack, styled, VStack } from '@/styled-system/jsx'
+import { RiArrowUpSLine } from '@remixicon/react'
+import { useTranslation } from 'react-i18next'
+
+const ToggleHeader = styled(ToggleButton, {
+  base: {
+    minHeight: '40px', //fixme hardcoded value
+    paddingRight: '.5rem',
+    cursor: 'pointer',
+    display: 'flex',
+    justifyContent: 'space-between',
+    width: '100%',
+    alignItems: 'center',
+    transition: 'background 200ms',
+    borderTopRadius: '7px',
+    '&[data-hovered]': {
+      backgroundColor: 'greyscale.50',
+    },
+  },
+})
+
+const Container = styled('div', {
+  base: {
+    border: '1px solid',
+    borderColor: 'greyscale.250',
+    borderRadius: '8px',
+    margin: '0 .625rem',
+  },
+})
+
+const ListContainer = styled(VStack, {
+  base: {
+    borderTop: '1px solid',
+    borderTopColor: 'greyscale.250',
+    alignItems: 'start',
+    overflowY: 'scroll',
+    overflowX: 'hidden',
+    minHeight: 0,
+    flexGrow: 1,
+    display: 'flex',
+    paddingY: '0.5rem',
+    paddingX: '1rem',
+    gap: 0,
+  },
+})
+
+export type ParticipantsCollapsableListProps<T> = {
+  heading: string
+  participants: Array<T>
+  renderParticipant: (participant: T) => JSX.Element
+  action?: ReactNode
+}
+
+export function ParticipantsCollapsableList<T>({
+  heading,
+  participants,
+  renderParticipant,
+  action,
+}: ParticipantsCollapsableListProps<T>) {
+  const { t } = useTranslation('rooms')
+  const [isOpen, setIsOpen] = useState(true)
+  const label = t(`participants.collapsable.${isOpen ? 'close' : 'open'}`, {
+    name: heading,
+  })
+  return (
+    <Container>
+      <ToggleHeader
+        isSelected={isOpen}
+        aria-label={label}
+        onPress={() => setIsOpen(!isOpen)}
+        style={{
+          borderRadius: !isOpen ? '7px' : undefined,
+        }}
+      >
+        <HStack
+          justify="space-between"
+          className={css({
+            margin: '0 1.25rem',
+            width: '100%',
+          })}
+        >
+          <div
+            className={css({
+              fontSize: '1rem',
+            })}
+          >
+            {heading}
+          </div>
+          <div>{participants?.length || 0}</div>
+        </HStack>
+        <RiArrowUpSLine
+          size={32}
+          style={{
+            transform: isOpen ? 'rotate(-180deg)' : undefined,
+            transition: 'transform 200ms',
+          }}
+        />
+      </ToggleHeader>
+      {isOpen && (
+        <ListContainer>
+          {action}
+          {participants.map((participant) => renderParticipant(participant))}
+        </ListContainer>
+      )}
+    </Container>
+  )
+}

src/frontend/src/features/rooms/livekit/components/controls/Participants/ParticipantsList.tsx

@@ -0,0 +1,112 @@
+import { css } from '@/styled-system/css'
+import { useParticipants } from '@livekit/components-react'
+
+import { Div, H } from '@/primitives'
+import { useTranslation } from 'react-i18next'
+import { ParticipantListItem } from '../../controls/Participants/ParticipantListItem'
+import { ParticipantsCollapsableList } from '../../controls/Participants/ParticipantsCollapsableList'
+import { HandRaisedListItem } from '../../controls/Participants/HandRaisedListItem'
+import { LowerAllHandsButton } from '../../controls/Participants/LowerAllHandsButton'
+import { WaitingParticipantListItem } from './WaitingParticipantListItem'
+import { useWaitingParticipants } from '@/features/rooms/hooks/useWaitingParticipants'
+import type { Participant } from 'livekit-client'
+import { WaitingParticipant } from '@/features/rooms/api/listWaitingParticipants'
+import { MuteEveryoneButton } from './MuteEveryoneButton'
+
+// TODO: Optimize rendering performance, especially for longer participant lists, even though they are generally short.
+export const ParticipantsList = () => {
+  const { t } = useTranslation('rooms', { keyPrefix: 'participants' })
+
+  // Preferred using the 'useParticipants' hook rather than the separate remote and local hooks,
+  // because the 'useLocalParticipant' hook does not update the participant's information when their
+  // metadata/name changes. The LiveKit team has marked this as a TODO item in the code.
+  const participants = useParticipants()
+
+  const sortedRemoteParticipants = participants
+    .slice(1)
+    .sort((participantA, participantB) => {
+      const nameA = participantA.name || participantA.identity
+      const nameB = participantB.name || participantB.identity
+      return nameA.localeCompare(nameB)
+    })
+
+  const sortedParticipants = [
+    participants[0], // first participant returned by the hook, is always the local one
+    ...sortedRemoteParticipants,
+  ]
+
+  const raisedHandParticipants = participants
+    .filter((participant) => !!participant.attributes.handRaisedAt)
+    .sort((a, b) => {
+      const dateA = new Date(a.attributes.handRaisedAt)
+      const dateB = new Date(b.attributes.handRaisedAt)
+      const timeA = isNaN(dateA.getTime()) ? 0 : dateA.getTime()
+      const timeB = isNaN(dateB.getTime()) ? 0 : dateB.getTime()
+      return timeA - timeB
+    })
+
+  const { waitingParticipants, handleParticipantEntry } =
+    useWaitingParticipants()
+
+  // TODO - extract inline styling in a centralized styling file, and avoid magic numbers
+  return (
+    <Div overflowY="scroll">
+      <H
+        lvl={2}
+        className={css({
+          fontSize: '0.875rem',
+          fontWeight: 'bold',
+          color: 'greyscale.600',
+          padding: '0 1.5rem',
+          marginBottom: '0.83em',
+        })}
+      >
+        {t('subheading').toUpperCase()}
+      </H>
+      {waitingParticipants?.length > 0 && (
+        <Div marginBottom=".9375rem">
+          <ParticipantsCollapsableList<WaitingParticipant>
+            heading={t('waiting.title')}
+            participants={waitingParticipants}
+            renderParticipant={(participant) => (
+              <WaitingParticipantListItem
+                key={participant.id}
+                participant={participant}
+                onAction={handleParticipantEntry}
+              />
+            )}
+            action={<></>}
+          />
+        </Div>
+      )}
+      {raisedHandParticipants.length > 0 && (
+        <Div marginBottom=".9375rem">
+          <ParticipantsCollapsableList<Participant>
+            heading={t('raisedHands')}
+            participants={raisedHandParticipants}
+            renderParticipant={(participant) => (
+              <HandRaisedListItem
+                key={participant.identity}
+                participant={participant}
+              />
+            )}
+            action={
+              <LowerAllHandsButton participants={raisedHandParticipants} />
+            }
+          />
+        </Div>
+      )}
+      <ParticipantsCollapsableList<Participant>
+        heading={t('contributors')}
+        participants={sortedParticipants}
+        renderParticipant={(participant) => (
+          <ParticipantListItem
+            key={participant.identity}
+            participant={participant}
+          />
+        )}
+        action={<MuteEveryoneButton participants={sortedRemoteParticipants} />}
+      />
+    </Div>
+  )
+}

src/frontend/src/features/rooms/livekit/components/controls/Participants/ParticipantsToggle.tsx

@@ -0,0 +1,90 @@
+import { useTranslation } from 'react-i18next'
+import { RiGroupLine, RiInfinityLine } from '@remixicon/react'
+import { ToggleButton } from '@/primitives'
+import { VisualOnlyTooltip } from '@/primitives/VisualOnlyTooltip'
+import { css } from '@/styled-system/css'
+import { useParticipants } from '@livekit/components-react'
+import { useSidePanel } from '../../../hooks/useSidePanel'
+import { ToggleButtonProps } from '@/primitives/ToggleButton'
+import { useRegisterKeyboardShortcut } from '@/features/shortcuts/useRegisterKeyboardShortcut'
+
+export const ParticipantsToggle = ({
+  onPress,
+  ...props
+}: ToggleButtonProps) => {
+  const { t } = useTranslation('rooms', { keyPrefix: 'controls.participants' })
+
+  /**
+   * Context could not be used due to inconsistent refresh behavior.
+   * The 'numParticipant' property on the room only updates when the room's metadata changes,
+   * resulting in a delay compared to the participant list's actual refresh rate.
+   */
+  const participants = useParticipants()
+  const numParticipants = participants?.length
+  const announcedCount =
+    numParticipants && numParticipants > 0 ? numParticipants : 1
+
+  const { isParticipantsOpen, toggleParticipants } = useSidePanel()
+
+  const tooltipLabel = isParticipantsOpen ? 'open' : 'closed'
+
+  useRegisterKeyboardShortcut({
+    id: 'toggle-participants',
+    handler: toggleParticipants,
+  })
+
+  return (
+    <div
+      className={css({
+        position: 'relative',
+        display: 'inline-block',
+      })}
+    >
+      <VisualOnlyTooltip tooltip={t(tooltipLabel)}>
+        <ToggleButton
+          square
+          variant="primaryTextDark"
+          aria-label={`${t(tooltipLabel)}. ${t('count', {
+            count: announcedCount,
+          })}.`}
+          isSelected={isParticipantsOpen}
+          aria-expanded={isParticipantsOpen}
+          onPress={(e) => {
+            toggleParticipants()
+            onPress?.(e)
+          }}
+          data-attr={`controls-participants-${tooltipLabel}`}
+          {...props}
+        >
+          <RiGroupLine />
+        </ToggleButton>
+      </VisualOnlyTooltip>
+      <div
+        className={css({
+          position: 'absolute',
+          top: '-.25rem',
+          right: '-.25rem',
+          width: '1.25rem',
+          height: '1.25rem',
+          backgroundColor: 'gray',
+          borderRadius: '50%',
+          color: 'white',
+          fontSize: '0.75rem',
+          display: 'flex',
+          alignItems: 'center',
+          justifyContent: 'center',
+          textAlign: 'center',
+          zIndex: 1,
+          userSelect: 'none',
+        })}
+        aria-hidden={true}
+      >
+        {numParticipants < 100 ? (
+          numParticipants || 1
+        ) : (
+          <RiInfinityLine size={10} />
+        )}
+      </div>
+    </div>
+  )
+}

src/frontend/src/features/rooms/livekit/components/controls/Participants/PinBadge.tsx

@@ -0,0 +1,29 @@
+import { useFocusToggleParticipant } from '@/features/rooms/livekit/hooks/useFocusToggleParticipant'
+import type { Participant } from 'livekit-client'
+import { RiPushpin2Fill } from '@remixicon/react'
+import { css } from '@/styled-system/css'
+
+export const PinBadge = ({ participant }: { participant: Participant }) => {
+  const { inFocus } = useFocusToggleParticipant(participant)
+
+  if (!inFocus) return
+
+  return (
+    <div
+      className={css({
+        height: '18px',
+        width: '18px',
+        borderRadius: '100%',
+        background: 'white',
+        display: 'flex',
+        justifyContent: 'center',
+        alignItems: 'center',
+        position: 'absolute',
+        bottom: '-2px',
+        right: '-4px',
+      })}
+    >
+      <RiPushpin2Fill size={14} aria-hidden />
+    </div>
+  )
+}

src/frontend/src/features/rooms/livekit/components/controls/Participants/WaitingParticipantListItem.tsx

@@ -3,10 +3,10 @@ import { HStack } from '@/styled-system/jsx'
 import { css } from '@/styled-system/css'
 import { Avatar } from '@/components/Avatar'
 import { useTranslation } from 'react-i18next'
-import { WaitingParticipant } from '../api/listWaitingParticipants'
+import { WaitingParticipant } from '@/features/rooms/api/listWaitingParticipants'
 import { RiCloseLine } from '@remixicon/react'
 
-export const WaitingParticipantRow = ({
+export const WaitingParticipantListItem = ({
   participant,
   onAction,
 }: {

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

@@ -1,56 +0,0 @@
-import { useCallback, useId } from 'react'
-import { useTranslation } from 'react-i18next'
-import { RiGroupLine } from '@remixicon/react'
-import { ToggleButton, type ToggleButtonProps } from '@/primitives/ToggleButton'
-import { VisualOnlyTooltip } from '@/primitives/VisualOnlyTooltip'
-import { css } from '@/styled-system/css'
-import { useRegisterKeyboardShortcut } from '@/features/shortcuts/useRegisterKeyboardShortcut'
-import { useSidePanel } from '@/features/rooms/livekit/hooks/useSidePanel'
-import { ParticipantsCount } from '@/features/participants/components/ParticipantsCount'
-
-const containerStyles = css({ position: 'relative', display: 'inline-block' })
-
-export const ParticipantsToggle = ({
-  onPress,
-  ...props
-}: ToggleButtonProps) => {
-  const { t } = useTranslation('rooms', { keyPrefix: 'controls.participants' })
-  const { isParticipantsOpen, toggleParticipants } = useSidePanel()
-  const countId = useId()
-
-  const tooltipLabel = isParticipantsOpen ? 'open' : 'closed'
-
-  useRegisterKeyboardShortcut({
-    id: 'toggle-participants',
-    handler: toggleParticipants,
-  })
-
-  const handlePress = useCallback(
-    (e: Parameters<NonNullable<ToggleButtonProps['onPress']>>[0]) => {
-      toggleParticipants()
-      onPress?.(e)
-    },
-    [toggleParticipants, onPress]
-  )
-
-  return (
-    <div className={containerStyles}>
-      <VisualOnlyTooltip tooltip={t(tooltipLabel)}>
-        <ToggleButton
-          square
-          variant="primaryTextDark"
-          aria-label={t(tooltipLabel)}
-          aria-describedby={countId}
-          isSelected={isParticipantsOpen}
-          aria-expanded={isParticipantsOpen}
-          onPress={handlePress}
-          data-attr={`controls-participants-${tooltipLabel}`}
-          {...props}
-        >
-          <RiGroupLine />
-        </ToggleButton>
-      </VisualOnlyTooltip>
-      <ParticipantsCount describedById={countId} />
-    </div>
-  )
-}

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

@@ -1,8 +1,15 @@
 import type { TrackSource } from '@livekit/protocol'
-import { useLocalParticipantPermissions } from '@livekit/components-react'
+import {
+  useLocalParticipant,
+  useParticipantPermissions,
+} from '@livekit/components-react'
 
 export function useCanPublishTrack(trackSource: TrackSource): boolean {
-  const permissions = useLocalParticipantPermissions()
+  const { localParticipant } = useLocalParticipant()
+  const permissions = useParticipantPermissions({
+    participant: localParticipant,
+  })
+
   return Boolean(
     permissions?.canPublish &&
     permissions?.canPublishSources?.includes(trackSource)

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

@@ -1,35 +1,27 @@
-import { useConfig } from '@/api/useConfig'
-import { useIsAnalyticsEnabled } from '@/features/analytics/hooks/useIsAnalyticsEnabled'
 import {
   useRemoteParticipants,
   useRoomContext,
 } from '@livekit/components-react'
 import { useEffect, useRef } from 'react'
-import { useSnapshot } from 'valtio'
 import { DisconnectReason, RoomEvent } from 'livekit-client'
-
-import { userPreferencesStore } from '@/stores/userPreferences'
-import { connectionObserverStore } from '@/stores/connectionObserver'
-
+import { useIsAnalyticsEnabled } from '@/features/analytics/hooks/useIsAnalyticsEnabled'
 import posthog from 'posthog-js'
-import { useFeatureFlagEnabled } from 'posthog-js/react'
-import { isMobileBrowser } from '@livekit/components-core'
-import { FeatureFlags } from '@/features/analytics/enums'
+import { connectionObserverStore } from '@/stores/connectionObserver'
+import { useConfig } from '@/api/useConfig'
+import { userPreferencesStore } from '@/stores/userPreferences'
+import { useSnapshot } from 'valtio'
+import { useIsAdvancedConnectionObserverEnabled } from './useIsAdvancedConnectionObserverEnabled'
 
 const CANDIDATE_POLL_INTERVAL_MS = 5000
 
-export const ConnectionObserver = () => {
+export const useConnectionObserver = () => {
   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
+    useIsAdvancedConnectionObserverEnabled()
 
   const userPreferencesSnap = useSnapshot(userPreferencesStore)
 
@@ -240,6 +232,4 @@ export const ConnectionObserver = () => {
       connectionStartTimeRef.current = null
     }
   }, [])
-
-  return null
 }

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

@@ -0,0 +1,12 @@
+import { useFeatureFlagEnabled } from 'posthog-js/react'
+import { FeatureFlags } from '@/features/analytics/enums.ts'
+import { useIsAnalyticsEnabled } from '@/features/analytics/hooks/useIsAnalyticsEnabled.ts'
+import { isMobileBrowser } from '@livekit/components-core'
+
+export const useIsAdvancedConnectionObserverEnabled = () => {
+  const featureEnabled = useFeatureFlagEnabled(FeatureFlags.candidatePolling)
+  const isAnalyticsEnabled = useIsAnalyticsEnabled()
+
+  const isMobile = isMobileBrowser()
+  return !isMobile && isAnalyticsEnabled && featureEnabled
+}

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

@@ -1,4 +1,4 @@
-import { RoomEvent, Track } from 'livekit-client'
+import { Track } from 'livekit-client'
 import { useCallback, useMemo } from 'react'
 import { queryClient } from '@/api/queryClient'
 import { keys } from '@/api/queryKeys'
@@ -43,9 +43,7 @@ export const usePublishSourcesManager = () => {
   const roomId = data?.slug
 
   const { updateParticipantsPermissions } = useUpdateParticipantsPermissions()
-  const remoteParticipants = useRemoteParticipants({
-    updateOnlyOn: [RoomEvent.ParticipantAttributesChanged],
-  })
+  const remoteParticipants = useRemoteParticipants()
 
   const unprivilegedRemoteParticipants = remoteParticipants.filter(
     (participant) => !getParticipantIsRoomAdmin(participant)

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

@@ -1,9 +1,7 @@
-import { Participant, RoomEvent } from 'livekit-client'
+import type { Participant } from 'livekit-client'
 import {
-  useRoomContext,
   useParticipantAttribute,
-  useParticipantInfo,
-  useRemoteParticipants,
+  useParticipants,
 } from '@livekit/components-react'
 import { isLocal } from '@/utils/livekit'
 import { useMemo } from 'react'
@@ -14,55 +12,28 @@ type useRaisedHandProps = {
 }
 
 export function useRaisedHandPosition({ participant }: useRaisedHandProps) {
-  const room = useRoomContext()
-  const { identity } = useParticipantInfo({ participant })
-  const localIdentity = room.localParticipant.identity
+  const { isHandRaised } = useRaisedHand({ participant })
 
-  const localHandRaisedAt = useParticipantAttribute('handRaisedAt', {
-    participant: room.localParticipant,
-  })
-
-  const remoteParticipants = useRemoteParticipants({
-    updateOnlyOn: [RoomEvent.ParticipantAttributesChanged],
-  })
-
-  const raisedHands = useMemo(() => {
-    const byIdentity = new Map<string, number>()
-
-    const add = (id: string, value?: string) => {
-      const time = new Date(value ?? '').getTime()
-      if (Number.isNaN(time)) return
-      const existing = byIdentity.get(id)
-      if (existing === undefined || time < existing) byIdentity.set(id, time)
-    }
-
-    if (localIdentity) add(localIdentity, localHandRaisedAt)
-
-    remoteParticipants.forEach((p) =>
-      add(p.identity, p.attributes.handRaisedAt)
-    )
-
-    return byIdentity
-  }, [remoteParticipants, localIdentity, localHandRaisedAt])
-
-  const sortedHands = useMemo(
-    () =>
-      [...raisedHands.entries()]
-        .map(([identity, time]) => ({ identity, time }))
-        .sort(
-          (a, b) => a.time - b.time || a.identity.localeCompare(b.identity)
-        ),
-    [raisedHands]
-  )
+  const participants = useParticipants()
 
   const positionInQueue = useMemo(() => {
-    const index = sortedHands.findIndex((h) => h.identity === identity)
-    return index === -1 ? undefined : index + 1
-  }, [sortedHands, identity])
+    if (!isHandRaised) return
+
+    return (
+      participants
+        .filter((p) => !!p.attributes.handRaisedAt)
+        .sort((a, b) => {
+          const dateA = new Date(a.attributes.handRaisedAt)
+          const dateB = new Date(b.attributes.handRaisedAt)
+          return dateA.getTime() - dateB.getTime()
+        })
+        .findIndex((p) => p.identity === participant.identity) + 1
+    )
+  }, [participants, participant, isHandRaised])
 
   return {
     positionInQueue,
-    firstInQueue: positionInQueue === 1,
+    firstInQueue: positionInQueue == 1,
   }
 }
 

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

@@ -13,8 +13,7 @@ import { useRoomContext } from '@livekit/components-react'
 import { useRoomData } from './useRoomData'
 
 /**
- * Shape of the LiveKit room metadata blob pushed by the backend.
- * Matches RoomManagement.update_metadata → {"configuration": room.configuration}
+ * The subset of LiveKit's room metadata this hook actually uses.
  */
 type RoomLiveKitMetadata = {
   configuration?: RoomConfiguration

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

@@ -11,16 +11,16 @@ import { useSnapshot } from 'valtio'
 import { userChoicesStore } from '@/stores/userChoices'
 
 /**
- * Sets initial video quality for new participants as they join.
+ * This hook 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 = () => {
+export const useVideoResolutionSubscription = () => {
   const { videoSubscribeQuality } = useSnapshot(userChoicesStore)
+
   const room = useRoomContext()
 
   useEffect(() => {
     if (!room) return
-
     const handleTrackPublished = (
       publication: RemoteTrackPublication,
       _participant: RemoteParticipant
@@ -41,10 +41,9 @@ export const VideoResolutionSubscription = () => {
     }
 
     room.on(RoomEvent.TrackPublished, handleTrackPublished)
+
     return () => {
       room.off(RoomEvent.TrackPublished, handleTrackPublished)
     }
   }, [room, videoSubscribeQuality])
-
-  return null
 }

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

@@ -0,0 +1,175 @@
+import type { ChatMessage, ChatOptions } from '@livekit/components-core'
+import React from 'react'
+import {
+  formatChatMessageLinks,
+  useChat,
+  useParticipants,
+  useRoomContext,
+} from '@livekit/components-react'
+import { useTranslation } from 'react-i18next'
+import { useSnapshot } from 'valtio'
+import { chatStore } from '@/stores/chat'
+import { Div, Text } from '@/primitives'
+import { ChatInput } from '../components/chat/Input'
+import { ChatEntry } from '../components/chat/Entry'
+import { useSidePanel } from '../hooks/useSidePanel'
+import {
+  type LocalParticipant,
+  type RemoteParticipant,
+  RoomEvent,
+} from 'livekit-client'
+import { css } from '@/styled-system/css'
+import { useRestoreFocus } from '@/hooks/useRestoreFocus'
+
+export interface ChatProps
+  extends React.HTMLAttributes<HTMLDivElement>, ChatOptions {}
+
+/**
+ * The Chat component adds a basis chat functionality to the LiveKit room. The messages are distributed to all participants
+ * in the room. Only users who are in the room at the time of dispatch will receive the message.
+ */
+export function Chat({ ...props }: ChatProps) {
+  const { t } = useTranslation('rooms', { keyPrefix: 'chat' })
+
+  const inputRef = React.useRef<HTMLTextAreaElement>(null)
+  const ulRef = React.useRef<HTMLUListElement>(null)
+
+  const room = useRoomContext()
+  const { send, chatMessages, isSending } = useChat()
+
+  const { isChatOpen, isSidePanelOpen } = useSidePanel()
+  const chatSnap = useSnapshot(chatStore)
+
+  // Keep track of the element that opened the chat so we can restore focus
+  // when the chat panel is closed.
+  useRestoreFocus(isChatOpen, {
+    // Avoid layout "jump" during the side panel slide-in animation.
+    // Focusing can trigger scroll into view; preventScroll keeps the animation smooth.
+    onOpened: () => {
+      requestAnimationFrame(() => {
+        inputRef.current?.focus({ preventScroll: true })
+      })
+    },
+    preventScroll: true,
+    shouldRestoreOnClose: () => !isSidePanelOpen,
+  })
+
+  // Use useParticipants hook to trigger a re-render when the participant list changes.
+  const participants = useParticipants()
+
+  const lastReadMsgAt = React.useRef<ChatMessage['timestamp']>(0)
+  const previousMessageCount = React.useRef(0)
+
+  async function handleSubmit(text: string) {
+    if (!send || !text) return
+    await send(text)
+    inputRef?.current?.focus({ preventScroll: true })
+  }
+
+  // TEMPORARY: This is a brittle workaround that relies on message count tracking
+  // due to recent LiveKit useChat changes breaking the previous implementation
+  // (see https://github.com/livekit/components-js/issues/1158)
+  // Remove this once we refactor chat to use the new text stream approach
+  React.useEffect(() => {
+    if (!chatMessages || chatMessages.length <= previousMessageCount.current)
+      return
+    const msg = chatMessages.slice(-1)[0]
+    const from = msg.from as RemoteParticipant | LocalParticipant | undefined
+    room.emit(RoomEvent.ChatMessage, msg, from)
+    previousMessageCount.current = chatMessages.length
+  }, [chatMessages, room])
+
+  React.useEffect(() => {
+    if (chatMessages.length > 0 && ulRef.current) {
+      ulRef.current?.scrollTo({ top: ulRef.current.scrollHeight })
+    }
+  }, [ulRef, chatMessages])
+
+  React.useEffect(() => {
+    if (chatMessages.length === 0) {
+      return
+    }
+    if (
+      isChatOpen &&
+      lastReadMsgAt.current !== chatMessages[chatMessages.length - 1]?.timestamp
+    ) {
+      lastReadMsgAt.current = chatMessages[chatMessages.length - 1]?.timestamp
+      chatStore.unreadMessages = 0
+      return
+    }
+
+    const unreadMessageCount = chatMessages.filter(
+      (msg) => !lastReadMsgAt.current || msg.timestamp > lastReadMsgAt.current
+    ).length
+
+    if (
+      unreadMessageCount > 0 &&
+      chatSnap.unreadMessages !== unreadMessageCount
+    ) {
+      chatStore.unreadMessages = unreadMessageCount
+    }
+  }, [chatMessages, chatSnap.unreadMessages, isChatOpen])
+
+  const renderedMessages = React.useMemo(() => {
+    return chatMessages.map((msg, idx, allMsg) => {
+      const hideMetadata =
+        idx >= 1 &&
+        msg.timestamp - allMsg[idx - 1].timestamp < 60_000 &&
+        allMsg[idx - 1].from === msg.from
+
+      return (
+        <ChatEntry
+          key={msg.id ?? idx}
+          hideMetadata={hideMetadata}
+          entry={msg}
+          messageFormatter={formatChatMessageLinks}
+        />
+      )
+    })
+    // This ensures that the chat message list is updated to reflect any changes in participant information.
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [chatMessages, participants])
+
+  return (
+    <Div
+      display={'flex'}
+      padding={'0 1.5rem'}
+      flexGrow={1}
+      flexDirection={'column'}
+      minHeight={0}
+      {...props}
+    >
+      <Text
+        variant="sm"
+        className={css({
+          padding: '0.75rem',
+          backgroundColor: 'greyscale.50',
+          borderRadius: 4,
+          marginBottom: '0.75rem',
+        })}
+      >
+        {t('disclaimer')}
+      </Text>
+      <Div
+        flexGrow={1}
+        flexDirection={'column'}
+        minHeight={0}
+        overflowY="scroll"
+      >
+        <ul
+          className="lk-list lk-chat-messages"
+          ref={ulRef}
+          role="log"
+          aria-relevant="additions"
+        >
+          {renderedMessages}
+        </ul>
+      </Div>
+      <ChatInput
+        inputRef={inputRef}
+        onSubmit={(e) => handleSubmit(e)}
+        isSending={isSending}
+      />
+    </Div>
+  )
+}

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

@@ -15,7 +15,7 @@ import {
 } from '@remixicon/react'
 import { ScreenShareToggle } from '../../components/controls/ScreenShareToggle'
 import { ChatToggle } from '../../components/controls/ChatToggle'
-import { ParticipantsToggle } from '../../components/controls/ParticipantsToggle'
+import { ParticipantsToggle } from '../../components/controls/Participants/ParticipantsToggle'
 import { useSidePanel } from '../../hooks/useSidePanel'
 import { LinkButton } from '@/primitives'
 import { ResponsiveMenu } from './ResponsiveMenu'
@@ -24,7 +24,7 @@ import { CameraSwitchButton } from '../../components/controls/CameraSwitchButton
 import { useConfig } from '@/api/useConfig'
 import { AudioDevicesControl } from '../../components/controls/Device/AudioDevicesControl'
 import { VideoDeviceControl } from '../../components/controls/Device/VideoDeviceControl'
-import { openSettingsDialog } from '@/stores/settings'
+import { useSettingsDialog } from '@/features/settings/hook/useSettingsDialog'
 import { ControlBarRegion } from '@/features/layout/components/ControlBarRegion'
 import { ReactionsToggle } from '@/features/reactions/components/ReactionsToggle'
 
@@ -35,6 +35,7 @@ export function MobileControlBar({
   const [isMenuOpened, setIsMenuOpened] = React.useState(false)
   const browserSupportsScreenSharing = supportsScreenSharing()
   const { toggleEffects } = useSidePanel()
+  const { openSettingsDialog } = useSettingsDialog()
 
   const { data } = useConfig()
 

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

@@ -1,11 +1,11 @@
 import { css } from '@/styled-system/css'
 import { ChatToggle } from '../../components/controls/ChatToggle'
-import { ParticipantsToggle } from '../../components/controls/ParticipantsToggle'
+import { ParticipantsToggle } from '../../components/controls/Participants/ParticipantsToggle'
 import { ToolsToggle } from '../../components/controls/ToolsToggle'
 import { InfoToggle } from '../../components/controls/InfoToggle'
 import { AdminToggle } from '../../components/AdminToggle'
 import { useSize } from '../../hooks/useResizeObserver'
-import { useState, RefObject, useEffect } from 'react'
+import { useState, RefObject } from 'react'
 import { Dialog, DialogTrigger, Popover } from 'react-aria-components'
 import { Button } from '@/primitives'
 import type { ToggleButtonProps } from '@/primitives/ToggleButton'
@@ -66,32 +66,12 @@ export const LateralMenu = () => {
   )
 }
 
-interface BreakpointObserverProps {
-  containerRef: RefObject<HTMLDivElement>
-  onWideChange: (isWide: boolean) => void
-}
-
-const BreakpointObserver = ({
-  containerRef,
-  onWideChange,
-}: BreakpointObserverProps) => {
-  const { width } = useSize(containerRef)
-  const isWide = width > CONTROL_BAR_BREAKPOINT
-
-  useEffect(() => {
-    onWideChange(isWide)
-  }, [isWide, onWideChange])
-
-  return null
-}
-
 export const MoreOptions = ({
   parentElement,
 }: {
   parentElement: RefObject<HTMLDivElement>
 }) => {
-  const [isWide, setIsWide] = useState(false)
-
+  const { width: parentWidth } = useSize(parentElement)
   return (
     <nav
       className={css({
@@ -103,11 +83,11 @@ export const MoreOptions = ({
         paddingRight: '0.25rem',
       })}
     >
-      <BreakpointObserver
-        containerRef={parentElement}
-        onWideChange={setIsWide}
-      />
-      {isWide ? <NavigationControls /> : <LateralMenu />}
+      {parentWidth > CONTROL_BAR_BREAKPOINT ? (
+        <NavigationControls />
+      ) : (
+        <LateralMenu />
+      )}
     </nav>
   )
 }

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

@@ -1,29 +1,48 @@
-import { isWeb } from '@livekit/components-core'
-import { Track } from 'livekit-client'
-import React, { useState } from 'react'
+import type { TrackReferenceOrPlaceholder } from '@livekit/components-core'
+import {
+  isEqualTrackRef,
+  isTrackReference,
+  isWeb,
+  log,
+} from '@livekit/components-core'
+import { type Participant, RoomEvent, Track } from 'livekit-client'
+import React, { useCallback, useRef, useState, useEffect } from 'react'
 import {
   ConnectionStateToast,
+  FocusLayoutContainer,
+  LayoutContextProvider,
   RoomAudioRenderer,
+  usePinnedTracks,
+  useTracks,
+  useCreateLayoutContext,
+  useRoomContext,
 } from '@livekit/components-react'
+import { useTranslation } from 'react-i18next'
 
 import { ControlBar } from './ControlBar/ControlBar'
+import { FocusLayout } from '../components/FocusLayout'
+import { ParticipantTile } from '../components/ParticipantTile'
 import { SidePanel } from '../components/SidePanel'
 import { RecordingProvider } from '@/features/recording'
 import { ScreenShareErrorModal } from '../components/ScreenShareErrorModal'
-import { ConnectionObserver } from '../components/ConnectionObserver'
-import { RoomMetadataSynchronizer } from '../components/RoomMetadataSynchronizer'
+import { useConnectionObserver } from '../hooks/useConnectionObserver'
 import { useRoomPageTitle } from '../hooks/useRoomPageTitle'
 import { useNoiseReduction } from '../hooks/useNoiseReduction'
-import { VideoResolutionSubscription } from '../components/VideoResolutionSubscription'
+import { useRegisterKeyboardShortcut } from '@/features/shortcuts/useRegisterKeyboardShortcut'
+import { useSettingsDialog } from '@/features/settings'
+import { SettingsDialogExtendedKey } from '@/features/settings/type'
+import { useVideoResolutionSubscription } from '../hooks/useVideoResolutionSubscription'
+import { useSyncLiveKitMetadata } from '../hooks/useSyncLiveKitMetadata'
 import { SettingsDialogProvider } from '@/features/settings/components/SettingsDialogProvider'
 import { IsIdleDisconnectModal } from '../components/IsIdleDisconnectModal'
+import { getParticipantName } from '@/features/rooms/utils/getParticipantName'
+import { useScreenReaderAnnounce } from '@/hooks/useScreenReaderAnnounce'
 import { ReactionPortals } from '@/features/reactions/components/ReactionPortals'
+import { CarouselLayout } from '@/features/layout/components/CarouselLayout'
+import { GridLayout } from '@/features/layout/components/GridLayout'
 import { RoomContentArea } from '@/features/layout/components/RoomContentArea'
 import { usePictureInPicture } from '@/features/pip/hooks/usePictureInPicture'
 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'
 
 /**
  * @public
@@ -52,62 +71,243 @@ export interface VideoConferenceProps extends React.HTMLAttributes<HTMLDivElemen
  * @public
  */
 export function VideoConference({ ...props }: VideoConferenceProps) {
+  const lastAutoFocusedScreenShareTrack =
+    useRef<TrackReferenceOrPlaceholder | null>(null)
+  const lastPinnedParticipantIdentityRef = useRef<string | null>(null)
+  const { t } = useTranslation('rooms', { keyPrefix: 'pinAnnouncements' })
+  const { t: tRooms } = useTranslation('rooms')
+  const room = useRoomContext()
+  const announce = useScreenReaderAnnounce()
+  const { toggleSettingsDialog } = useSettingsDialog()
+
+  const getAnnouncementName = useCallback(
+    (participant?: Participant | null) => {
+      if (!participant) return tRooms('participants.unknown')
+      return participant.isLocal
+        ? tRooms('participants.you')
+        : getParticipantName(participant)
+    },
+    [tRooms]
+  )
+
+  useConnectionObserver()
   useRoomPageTitle()
+  useVideoResolutionSubscription()
+  useSyncLiveKitMetadata()
+
+  useRegisterKeyboardShortcut({
+    id: 'open-shortcuts',
+    handler: useCallback(() => {
+      toggleSettingsDialog(SettingsDialogExtendedKey.SHORTCUTS)
+    }, [toggleSettingsDialog]),
+  })
+
+  const tracks = useTracks(
+    [
+      { source: Track.Source.Camera, withPlaceholder: true },
+      { source: Track.Source.ScreenShare, withPlaceholder: false },
+    ],
+    { updateOnlyOn: [RoomEvent.ActiveSpeakersChanged], onlySubscribed: false }
+  )
+
+  const layoutContext = useCreateLayoutContext()
+
   useNoiseReduction()
 
+  const screenShareTracks = tracks
+    .filter(isTrackReference)
+    .filter((track) => track.publication.source === Track.Source.ScreenShare)
+
+  const focusTrack = usePinnedTracks(layoutContext)?.[0]
+  const carouselTracks = tracks.filter(
+    (track) => !isEqualTrackRef(track, focusTrack)
+  )
+
   const { isOpen: isPictureInPictureOpen } = usePictureInPicture()
 
+  // handle pin announcements
+
+  useEffect(() => {
+    const participant = focusTrack?.participant
+
+    // 1. unpin
+    if (!participant) {
+      if (!lastPinnedParticipantIdentityRef.current) return
+
+      const lastIdentity = lastPinnedParticipantIdentityRef.current
+      const lastParticipant =
+        room.localParticipant.identity === lastIdentity
+          ? room.localParticipant
+          : room.remoteParticipants.get(lastIdentity)
+      const announcementName = getAnnouncementName(lastParticipant)
+
+      announce(
+        lastParticipant?.isLocal
+          ? t('self.unpin')
+          : t('unpin', {
+              name: announcementName,
+            })
+      )
+
+      lastPinnedParticipantIdentityRef.current = null
+      return
+    }
+
+    // 2. same pin → do nothing
+    if (lastPinnedParticipantIdentityRef.current === participant.identity) {
+      return
+    }
+
+    // 3. new pin
+    const participantName = participant.isLocal
+      ? tRooms('participants.you')
+      : getParticipantName(participant)
+
+    lastPinnedParticipantIdentityRef.current = participant.identity
+
+    announce(
+      participant.isLocal ? t('self.pin') : t('pin', { name: participantName })
+    )
+  }, [
+    announce,
+    focusTrack,
+    getAnnouncementName,
+    room.localParticipant,
+    room.remoteParticipants,
+    t,
+    tRooms,
+  ])
+
+  /* eslint-disable react-hooks/exhaustive-deps */
+  // Code duplicated from LiveKit; this warning will be addressed in the refactoring.
+  useEffect(() => {
+    // If screen share tracks are published, and no pin is set explicitly, auto set the screen share.
+    if (
+      screenShareTracks.some((track) => track.publication.isSubscribed) &&
+      lastAutoFocusedScreenShareTrack.current === null
+    ) {
+      log.debug('Auto set screen share focus:', {
+        newScreenShareTrack: screenShareTracks[0],
+      })
+      layoutContext.pin.dispatch?.({
+        msg: 'set_pin',
+        trackReference: screenShareTracks[0],
+      })
+      lastAutoFocusedScreenShareTrack.current = screenShareTracks[0]
+    } else if (
+      lastAutoFocusedScreenShareTrack.current &&
+      !screenShareTracks.some(
+        (track) =>
+          track.publication.trackSid ===
+          lastAutoFocusedScreenShareTrack.current?.publication?.trackSid
+      )
+    ) {
+      log.debug('Auto clearing screen share focus.')
+      layoutContext.pin.dispatch?.({ msg: 'clear_pin' })
+      lastAutoFocusedScreenShareTrack.current = null
+    }
+    if (focusTrack && !isTrackReference(focusTrack)) {
+      const updatedFocusTrack = tracks.find(
+        (tr) =>
+          tr.participant.identity === focusTrack.participant.identity &&
+          tr.source === focusTrack.source
+      )
+      if (
+        updatedFocusTrack !== focusTrack &&
+        isTrackReference(updatedFocusTrack)
+      ) {
+        layoutContext.pin.dispatch?.({
+          msg: 'set_pin',
+          trackReference: updatedFocusTrack,
+        })
+      }
+    }
+  }, [
+    screenShareTracks
+      .map(
+        (ref) => `${ref.publication.trackSid}_${ref.publication.isSubscribed}`
+      )
+      .join(),
+    focusTrack?.publication?.trackSid,
+    tracks,
+  ])
+  /* eslint-enable react-hooks/exhaustive-deps */
+
   const [isShareErrorVisible, setIsShareErrorVisible] = useState(false)
 
   return (
-    <>
-      <RoomMetadataSynchronizer />
-      <ConnectionObserver />
-      <ChatProvider />
-      <VideoResolutionSubscription />
-      <div
-        className="lk-video-conference"
-        {...props}
-        style={{
-          overflowX: 'hidden',
-        }}
-      >
-        {isWeb() && (
-          <>
-            <ScreenShareErrorModal
-              isOpen={isShareErrorVisible}
-              onClose={() => setIsShareErrorVisible(false)}
-            />
-            <IsIdleDisconnectModal />
-            <PinAnnouncer />
-            <RoomContentArea>
-              {isPictureInPictureOpen ? (
-                <PipRoomPlaceholder />
-              ) : (
-                <StageLayout />
-              )}
-            </RoomContentArea>
-            <ControlBar
-              onDeviceError={(e) => {
-                console.error(e)
-                if (
-                  e.source == Track.Source.ScreenShare &&
-                  e.error.toString() ==
-                    'NotAllowedError: Permission denied by system'
-                ) {
-                  setIsShareErrorVisible(true)
-                }
-              }}
-            />
-            <SidePanel />
-          </>
-        )}
-        <RoomAudioRenderer />
-        <ConnectionStateToast />
-        <RecordingProvider />
-        <SettingsDialogProvider />
-        <ReactionPortals />
-      </div>
-    </>
+    <div
+      className="lk-video-conference"
+      {...props}
+      style={{
+        overflowX: 'hidden',
+      }}
+    >
+      {isWeb() && (
+        <LayoutContextProvider
+          value={layoutContext}
+          // onPinChange={handleFocusStateChange}
+        >
+          <ScreenShareErrorModal
+            isOpen={isShareErrorVisible}
+            onClose={() => setIsShareErrorVisible(false)}
+          />
+          <IsIdleDisconnectModal />
+          <RoomContentArea>
+            {isPictureInPictureOpen ? (
+              <PipRoomPlaceholder />
+            ) : (
+              <>
+                {!focusTrack ? (
+                  <div
+                    className="lk-grid-layout-wrapper"
+                    style={{ height: 'auto' }}
+                  >
+                    <GridLayout tracks={tracks} style={{ padding: 0 }}>
+                      <ParticipantTile />
+                    </GridLayout>
+                  </div>
+                ) : (
+                  <div
+                    className="lk-focus-layout-wrapper"
+                    style={{ height: 'auto' }}
+                  >
+                    <FocusLayoutContainer style={{ padding: 0 }}>
+                      <CarouselLayout
+                        tracks={carouselTracks}
+                        style={{
+                          minWidth: '200px',
+                        }}
+                      >
+                        <ParticipantTile />
+                      </CarouselLayout>
+                      {focusTrack && <FocusLayout trackRef={focusTrack} />}
+                    </FocusLayoutContainer>
+                  </div>
+                )}
+              </>
+            )}
+          </RoomContentArea>
+          <ControlBar
+            onDeviceError={(e) => {
+              console.error(e)
+              if (
+                e.source == Track.Source.ScreenShare &&
+                e.error.toString() ==
+                  'NotAllowedError: Permission denied by system'
+              ) {
+                setIsShareErrorVisible(true)
+              }
+            }}
+          />
+          <SidePanel />
+        </LayoutContextProvider>
+      )}
+      <RoomAudioRenderer />
+      <ConnectionStateToast />
+      <RecordingProvider />
+      <SettingsDialogProvider />
+      <ReactionPortals />
+    </div>
   )
 }

src/frontend/src/features/rooms/utils/getParticipantBackgroundGradient.ts

@@ -4,7 +4,7 @@
  * Mixed in oklch so the color stays vivid as it darkens instead of greying out.
  */
 export const getParticipantBackgroundGradient = (color: string): string =>
-  `radial-gradient(circle at 50% 50%,
+  `radial-gradient(circle at 50% 45%,
     color-mix(in oklch, ${color} 82%, white) 0%,
     color-mix(in oklch, ${color} 90%, white) 8%,
     ${color} 35%,

src/frontend/src/features/settings/components/SettingsDialogProvider.tsx

@@ -1,20 +1,10 @@
 import { SettingsDialogExtended } from './SettingsDialogExtended'
 import { useSnapshot } from 'valtio'
-import { settingsStore, toggleSettingsDialog } from '@/stores/settings'
-import { SettingsDialogExtendedKey } from '@/features/settings'
-import { useRegisterKeyboardShortcut } from '@/features/shortcuts/useRegisterKeyboardShortcut'
-import { useCallback } from 'react'
+import { settingsStore } from '@/stores/settings'
 
 export const SettingsDialogProvider = () => {
   const { areSettingsOpen, defaultSelectedTab } = useSnapshot(settingsStore)
 
-  useRegisterKeyboardShortcut({
-    id: 'open-shortcuts',
-    handler: useCallback(() => {
-      toggleSettingsDialog(SettingsDialogExtendedKey.SHORTCUTS)
-    }, []),
-  })
-
   return (
     <SettingsDialogExtended
       isOpen={areSettingsOpen}

src/frontend/src/features/settings/hook/useSettingsDialog.ts

@@ -0,0 +1,38 @@
+import { useSnapshot } from 'valtio'
+import { settingsStore } from '@/stores/settings'
+import type { SettingsDialogExtendedKey } from '@/features/settings/type'
+
+export const useSettingsDialog = () => {
+  const { areSettingsOpen } = useSnapshot(settingsStore)
+
+  const openSettingsDialog = (
+    defaultSelectedTab?: SettingsDialogExtendedKey
+  ) => {
+    if (areSettingsOpen) return
+    if (defaultSelectedTab)
+      settingsStore.defaultSelectedTab = defaultSelectedTab
+    settingsStore.areSettingsOpen = true
+  }
+
+  const closeSettingsDialog = () => {
+    settingsStore.areSettingsOpen = false
+  }
+
+  const toggleSettingsDialog = (
+    defaultSelectedTab?: SettingsDialogExtendedKey
+  ) => {
+    if (areSettingsOpen) {
+      closeSettingsDialog()
+    } else {
+      if (defaultSelectedTab)
+        settingsStore.defaultSelectedTab = defaultSelectedTab
+      settingsStore.areSettingsOpen = true
+    }
+  }
+
+  return {
+    openSettingsDialog,
+    closeSettingsDialog,
+    toggleSettingsDialog,
+  }
+}

src/frontend/src/features/settings/index.ts

@@ -2,5 +2,6 @@ export { SettingsButton } from './components/SettingsButton'
 export { SettingsDialog } from './components/SettingsDialog'
 
 export { useTranscriptionLanguage } from './hook/useTranscriptionLanguage'
+export { useSettingsDialog } from './hook/useSettingsDialog'
 
 export { SettingsDialogExtendedKey } from './type.ts'

src/frontend/src/primitives/Text.tsx

@@ -85,9 +85,6 @@ export const text = cva({
       pretty: {
         textWrap: 'pretty',
       },
-      no: {
-        textWrap: 'nowrap',
-      },
     },
     bold: {
       true: {

src/frontend/src/primitives/TextArea.tsx

@@ -23,10 +23,5 @@ export const TextArea = styled(RACTextArea, {
         },
       },
     },
-    fieldSizing: {
-      content: {
-        fieldSizing: 'content',
-      },
-    },
   },
 })