📝(frontend) add changelog entry for PR #1510

Document in the CHANGELOG the set of changes shipped in PR #1510,
which groups the recent chat, layout and participant tile render
optimizations.

CHANGELOG.md

@@ -10,11 +10,33 @@ and this project adheres to
 
 ### Added
 
+- ✨(summary) report exception type in failure analytics
+- ✨(frontend) add configurable documentation menu item
+
+## 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
+- ⬆️(frontend) upgrade i18next from 26.3.1 to 26.3.2
+- ⬆️(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
+
+## [1.24.0] - 2026-07-21
+
+### Added
+
 - ✨(backend) allow searching the recording admin table by owner email
 - ✨(frontend) add participant color gradient when camera is off #1490
 - ✨(all) allow forcing SSO display name for authenticated users
 - ➕(frontend) install vite-plugin-static-copy for MediaPipe WASM assets
-- ✨(backend) add per-recording encoding quality presets to start-recording API
+- ✨(addon) show add-in tools when creating meetings in shared calendars
 
 ### Changed
 
@@ -34,7 +56,7 @@ and this project adheres to
 - 🩹(backend) identify externally provisioned users to PostHog
 - 🐛(backend) fix info panel crash for unregistered rooms
 - ♿️(frontend) focus side panel container on open #1452
-- 💥(backend) replace recording encoding options with a profile model
+- 🐛(summary) whisper call error handling
 
 ## [1.23.0] - 2026-07-08
 

bin/prepare-release.sh

@@ -164,6 +164,7 @@ echo "      - src/backend/pyproject.toml"
 echo "      - src/backend/uv.lock"
 echo "      - src/summary/pyproject.toml"
 echo "      - src/agents/pyproject.toml"
+echo "      - src/agents/uv.lock"
 echo "      - CHANGELOG.md"
 echo ""
 print_warning "Next steps:"

docs/features/recording.md

@@ -100,13 +100,13 @@ sequenceDiagram
 | **RECORDING_STORAGE_EVENT_TOKEN**       | Secret/File | `None`                                                                                                                                                             | Token used to authenticate storage webhook requests, if `RECORDING_ENABLE_STORAGE_EVENT_AUTH` is enabled.                                                                                                                                                                                          |
 | **RECORDING_EXPIRATION_DAYS**           | Integer     | `None`                                                                                                                                                             | Number of days before recordings expire. Should match bucket lifecycle policy. Set to `None` for no expiration.                                                                                                                                                                                    |
 | **RECORDING_MAX_DURATION**              | Integer     | `None`                                                                                                                                                             | Maximum duration of a recording in milliseconds. Must be synced with the LiveKit Egress configuration. Set to None for unlimited duration. When the maximum duration is reached, the recording is automatically stopped and saved, and the user is prompted in the frontend with an alert message. |
-| **RECORDING_CUSTOM_ENCODING_ENABLED**          | Boolean     | `False`                                                                                                                                                            | Whether the start-recording API accepts a per-recording `encoding` object (resolution/profile) that overrides the default. When `False`, the API rejects per-recording `encoding`; when `True`, clients may pick from the available resolutions/profiles. The default encoding below is applied regardless of this flag. See [Tuning recording encoding](#tuning-recording-encoding).                                                          |
-| **RECORDING_ENCODING_AVAILABLE_RESOLUTIONS** | Dict      | `{"540p": {"width": 960, "height": 540}, "720p": {"width": 1280, "height": 720}, "1080p": {"width": 1920, "height": 1080}}`                                        | Maps a resolution name to its `{"width", "height"}` in pixels. Both the default encoding and the per-recording start-recording API pick from these keys.                                                                                                                                          |
-| **RECORDING_ENCODING_AVAILABLE_PROFILES** | Dict      | `{"full": {"fps": 30, "kbps": {…}}, …}`               | Maps a profile name to `{"fps", "kbps": {resolution: video_bitrate_kbps}}`. Every profile must define a bitrate for each available resolution (validated at startup).                                                                                                                              |
-| **RECORDING_ENCODING_DEFAULT_RESOLUTION** | String    | `"720p"`                                                                                                                                                          | Resolution used by the default encoding. When set, must be a key of `RECORDING_ENCODING_AVAILABLE_RESOLUTIONS`. Leave unset (together with, or instead of, the default profile) to disable the custom default encoding and fall back to LiveKit's built-in preset (a startup warning is emitted).                                                                                                                                                                  |
-| **RECORDING_ENCODING_DEFAULT_PROFILE**  | String    | `"full"`                                                                                                                                                          | Profile used by the default encoding. When set, must be a key of `RECORDING_ENCODING_AVAILABLE_PROFILES`. Leave unset (together with, or instead of, the default resolution) to disable the custom default encoding and fall back to LiveKit's built-in preset (a startup warning is emitted).                                                                                                                                                                        |
-| **RECORDING_ENCODING_AUDIO_BITRATE_KBPS** | Integer   | `128`                                                                                                                                                              | AAC audio bitrate in kbps used in the default encoding.                                                                                                                                                                                                               |
-| **RECORDING_ENCODING_KEY_FRAME_INTERVAL_S** | Float   | `4.0`                                                                                                                                                              | Keyframe interval in seconds. Drives seek granularity in the recorded MP4 (a player can only seek to keyframe boundaries). Larger values give the encoder slightly more bits for non-keyframe content at a fixed bitrate. `4.0` is a standard VOD value. |
+| **RECORDING_ENCODING_ENABLED**          | Boolean     | `False`                                                                                                                                                            | When `False`, LiveKit Egress uses its built-in `H264_720P_30` preset. When `True`, the `RECORDING_ENCODING_*` values below are sent to LiveKit as advanced `EncodingOptions`. See [Tuning recording encoding](#tuning-recording-encoding).                                                          |
+| **RECORDING_ENCODING_WIDTH**            | Integer     | `1280`                                                                                                                                                             | Recording video width in pixels. Only applied when `RECORDING_ENCODING_ENABLED` is `True`.                                                                                                                                                                                                         |
+| **RECORDING_ENCODING_HEIGHT**           | Integer     | `720`                                                                                                                                                              | Recording video height in pixels. Only applied when `RECORDING_ENCODING_ENABLED` is `True`.                                                                                                                                                                                                        |
+| **RECORDING_ENCODING_FRAMERATE**        | Integer     | `30`                                                                                                                                                               | Recording video framerate (fps). Directly impacts egress worker CPU (roughly linear). Only applied when `RECORDING_ENCODING_ENABLED` is `True`.                                                                                                                                                    |
+| **RECORDING_ENCODING_VIDEO_BITRATE_KBPS** | Integer   | `3000`                                                                                                                                                             | H.264 MAIN video bitrate in kbps. Only applied when `RECORDING_ENCODING_ENABLED` is `True`.                                                                                                                                                                                                        |
+| **RECORDING_ENCODING_AUDIO_BITRATE_KBPS** | Integer   | `128`                                                                                                                                                              | AAC audio bitrate in kbps. Only applied when `RECORDING_ENCODING_ENABLED` is `True`.                                                                                                                                                                                                               |
+| **RECORDING_ENCODING_KEY_FRAME_INTERVAL_S** | Float   | `4.0`                                                                                                                                                              | Keyframe interval in seconds. Drives seek granularity in the recorded MP4 (a player can only seek to keyframe boundaries). Larger values give the encoder slightly more bits for non-keyframe content at a fixed bitrate. `4.0` is a standard VOD value. Only applied when `RECORDING_ENCODING_ENABLED` is `True`. |
 
 
 ### Manual Storage Webhook
@@ -150,59 +150,52 @@ This allows you to verify which recordings are in progress, troubleshoot egress
 
 ## Tuning recording encoding
 
-Every video recording is encoded from a default resolved from `RECORDING_ENCODING_DEFAULT_PROFILE` + `RECORDING_ENCODING_DEFAULT_RESOLUTION` and passed to LiveKit as advanced `EncodingOptions`. The shipped defaults (`full` profile) match LiveKit's built-in `H264_720P_30` preset. For a one-hour meeting that produces a file of roughly **1.4 GB**, which is often heavier than necessary for talking-head content and screen sharing; lowering the default profile/resolution shrinks it. If either default is left unset, no custom default encoding is built: a warning is logged at startup and LiveKit's built-in preset is used instead.
+By default, LiveKit Egress records with the built-in `H264_720P_30` preset: 1280×720 at 30 fps, 3000 kbps H.264 MAIN video and 128 kbps AAC audio. For a one-hour meeting this produces a file of roughly **1.4 GB**, which is often heavier than necessary for talking-head content and screen sharing.
 
-Encoding is chosen from two maps: `RECORDING_ENCODING_AVAILABLE_RESOLUTIONS` (`resolution → {"width", "height"}`) and `RECORDING_ENCODING_AVAILABLE_PROFILES` (`profile → {"fps", "kbps": {resolution: video_bitrate_kbps}}`):
-
-- **Default**: `RECORDING_ENCODING_DEFAULT_PROFILE` + `RECORDING_ENCODING_DEFAULT_RESOLUTION` set the encoding used by every recording that doesn't override it. Leave either unset to fall back to LiveKit's built-in preset (a startup warning is emitted).
-- **Per recording (opt-in)**: set `RECORDING_CUSTOM_ENCODING_ENABLED=True` to let clients override the default per recording. The start-recording API then accepts an `encoding` object selecting a `resolution` (required) and `profile` (optional): a resolution-only request sets the frame size but leaves LiveKit's default framerate/bitrate; adding a profile pins fps and bitrate too. When `RECORDING_CUSTOM_ENCODING_ENABLED=False`, the API rejects any per-recording `encoding` and the default is used.
-
-The resolved values are passed straight through LiveKit's `EncodingOptions.advanced` to the GStreamer pipeline (`x264enc` for video, `faac` for audio), so there are no hidden conversions — what the profile/resolution resolve to is what the encoder receives.
+The `RECORDING_ENCODING_*` settings let operators override this preset without modifying the source. Values are passed straight through LiveKit's `EncodingOptions.advanced` to the GStreamer pipeline (`x264enc` for video, `faac` for audio), so there are no hidden conversions — what you set is what the encoder receives.
 
 ### How values map to GStreamer
 
-| Resolved value                            | GStreamer element | Property                           |
-| ----------------------------------------- | ----------------- | ---------------------------------- |
-| resolution `width` / `height`             | capsfilter        | `video/x-raw,width=W,height=H`     |
-| profile `fps`                             | capsfilter        | `framerate=F/1`                    |
-| profile `kbps[resolution]`                | `x264enc`         | `bitrate=kbps` (kilobits)          |
-| `RECORDING_ENCODING_KEY_FRAME_INTERVAL_S` | `x264enc`         | `key-int-max = interval × fps`     |
-| `RECORDING_ENCODING_AUDIO_BITRATE_KBPS`   | `faac`            | `bitrate = kbps × 1000` (bits)     |
+| Setting                               | GStreamer element | Property                           |
+| ------------------------------------- | ----------------- | ---------------------------------- |
+| `RECORDING_ENCODING_WIDTH/HEIGHT`     | capsfilter        | `video/x-raw,width=W,height=H`     |
+| `RECORDING_ENCODING_FRAMERATE`        | capsfilter        | `framerate=F/1`                    |
+| `RECORDING_ENCODING_VIDEO_BITRATE_KBPS` | `x264enc`       | `bitrate=kbps` (kilobits)          |
+| `RECORDING_ENCODING_KEY_FRAME_INTERVAL_S` | `x264enc`     | `key-int-max = interval × fps`     |
+| `RECORDING_ENCODING_AUDIO_BITRATE_KBPS` | `faac`          | `bitrate = kbps × 1000` (bits)     |
 
 The H.264 profile is fixed to MAIN and the x264 `speed-preset` to `veryfast` by LiveKit (real-time constraint) — lowering the framerate is therefore the main lever to save CPU, while lowering the bitrate is the main lever to shrink the output file.
 
-### Built-in profiles
+### Reference profiles
 
-The default `RECORDING_ENCODING_AVAILABLE_PROFILES` ship four profiles. Framerate is fixed per profile; video bitrate (kbps) scales with resolution so quality stays consistent across sizes. File size scales roughly with `framerate × bitrate`, and so does egress CPU cost.
+Rough 30-minute file-size estimates assume video + audio bitrate multiplied by duration. Actual sizes vary with content (static talking heads compress better than heavy screen motion). Egress CPU figures are indicative, measured on a single Ryzen laptop core saturated by the default preset (= 100 %); scaling is roughly linear with `framerate × bitrate` but the absolute numbers depend on the host hardware.
 
-| Profile         | FPS | 540p (kbps) | 720p (kbps) | 1080p (kbps) | Suitable for                                       |
-| --------------- | --- | ----------- | ----------- | ------------ | -------------------------------------------------- |
-| `talking_heads` | 15  | 400         | 700         | 1200         | Talking-head dominant meetings + occasional slides |
-| `text`          | 15  | 600         | 1000        | 1800         | Frequent dense screen sharing (decks, IDE, docs)   |
-| `mixed`         | 20  | 900         | 1500        | 2500         | Mixed content, moderate motion                     |
-| `full`          | 30  | 2000        | 3000        | 4500         | Highest fidelity; closest to the LiveKit preset    |
+| Profile                | Resolution | FPS | Video (kbps) | Audio (kbps) | Keyframe (s) | ~ size / 30 min | Egress CPU (vs. default) | Suitable for                                        |
+| ---------------------- | ---------- | --- | ------------ | ------------ | ------------ | --------------- | ------------------------ | --------------------------------------------------- |
+| Default (preset)       | 1280×720   | 30  | 3000         | 128          | 4            | **~690 MB**     | 100 %                    | Unchanged LiveKit behaviour                         |
+| Balanced               | 1280×720   | 20  | 1000         | 96           | 4            | ~240 MB         | ~67 %                    | Mixed content, moderate motion                      |
+| **Low CPU / small file** | 1280×720 | 15  | 600          | 64           | 4            | **~150 MB**     | ~50 %                    | Talking-head dominant meetings + occasional slides ★ |
+| Slide-heavy            | 1280×720   | 15  | 900          | 64           | 4            | ~210 MB         | ~55 %                    | Frequent dense screen sharing (decks, IDE, docs)    |
+| Minimum CPU            | 960×540    | 15  | 500          | 64           | 4            | ~125 MB         | ~30 %                    | Voice-first meetings, readable text not required    |
+| Audio-heavy fallback   | 1280×720   | 10  | 400          | 96           | 4            | ~110 MB         | ~35 %                    | Long webinars, low motion                           |
 
-To pick a profile per recording (requires `RECORDING_CUSTOM_ENCODING_ENABLED=True`), the client sends it in the start-recording request:
+★ Recommended starting point for typical LaSuite Meet usage.
 
-```json
-{
-  "mode": "screen_recording",
-  "options": {"encoding": {"resolution": "720p", "profile": "talking_heads"}}
-}
-```
-
-To change the default encoding applied to every recording:
+Environment variables for the **Low CPU / small file** profile:
 
 ```bash
-RECORDING_ENCODING_DEFAULT_RESOLUTION=720p
-RECORDING_ENCODING_DEFAULT_PROFILE=talking_heads
+RECORDING_ENCODING_ENABLED=True
+RECORDING_ENCODING_WIDTH=1280
+RECORDING_ENCODING_HEIGHT=720
+RECORDING_ENCODING_FRAMERATE=15
+RECORDING_ENCODING_VIDEO_BITRATE_KBPS=600
 RECORDING_ENCODING_AUDIO_BITRATE_KBPS=64
 RECORDING_ENCODING_KEY_FRAME_INTERVAL_S=4.0
 ```
 
 ### Caveats
 
-- **Screen-share readability — think bits/frame, not bitrate**: at 720p, text legibility starts to break down below ~40 kbits/frame (= `bitrate ÷ framerate`). The `talking_heads` profile (700 kbps × 15 fps) sits just above that threshold, comfortable for talking heads with occasional slide sharing. The same bitrate at 30 fps would only deliver ~23 kbits/frame and visibly blur dense slides — which is why **lowering framerate is a more screen-share-friendly lever than lowering bitrate**. For deck-heavy or IDE-share meetings, prefer the **`text`** profile (1000 kbps × 15 fps ≈ 67 kbits/frame).
+- **Screen-share readability — think bits/frame, not bitrate**: at 720p, text legibility starts to break down below ~40 kbits/frame (= `bitrate ÷ framerate`). The recommended preset (600 kbps × 15 fps) sits at exactly that threshold, comfortable for talking heads with occasional slide sharing. The same 600 kbps at 30 fps would only deliver 20 kbits/frame and visibly blur dense slides — which is why **lowering framerate is a more screen-share-friendly lever than lowering bitrate**. For deck-heavy or IDE-share meetings, prefer the **Slide-heavy** profile (900 kbps × 15 fps ≈ 60 kbits/frame).
 - **Motion handling**: the `veryfast` x264 preset is set by LiveKit and cannot be overridden here. Low-bitrate settings will therefore show more artefacts on fast motion than an offline re-encode with a slower preset would. This is the other reason FPS reduction is the safer tuning lever for meeting recordings.
 - **Audio**: AAC at 64 kbps stereo is transparent for voice but starts to compress music noticeably. Keep 128 kbps if you expect music playback in meetings.
 - **Codec choice**: H.264 MAIN is hardcoded on purpose. Switching to HEVC or VP9 would increase egress CPU cost 2×–5×, defeating the goal of this tuning.

docs/installation/kubernetes.md

@@ -344,6 +344,7 @@ These are the environmental options available on meet backend.
 | FRONTEND_SILENCE_LIVEKIT_DEBUG                  | Silence LiveKit debug logs                                                                                                                                   | false                                                                                                                                                         |
 | FRONTEND_IS_SILENT_LOGIN_ENABLED                | Enable silent login feature                                                                                                                                  | true                                                                                                                                                          |
 | FRONTEND_FEEDBACK                               | Frontend feedback configuration                                                                                                                              | {}                                                                                                                                                            |
+| FRONTEND_DOCUMENTATION_URL                      | URL of the documentation opened from the room options menu. If unset, the documentation menu item is hidden                                                  |                                                                                                                                                               |
 | FRONTEND_USE_FRENCH_GOV_FOOTER                  | Show the French government footer in the homepage                                                                                                            | false                                                                                                                                                         |
 | FRONTEND_USE_PROCONNECT_BUTTON                  | Show a "Login with ProConnect" button in the homepage instead of a "Login" button                                                                            | false                                                                                                                                                         |
 | DJANGO_EMAIL_BACKEND                            | Email backend library                                                                                                                                        | django.core.mail.backends.smtp.EmailBackend                                                                                                                   |

docs/theming.md

@@ -11,14 +11,14 @@ There are two ways to customize LaSuite Meet:
 
 ### How to Use
 
-To use this feature, simply set the `FRONTEND_CSS_URL` environment variable to the URL of your custom CSS file. For example:
+To use this feature, simply set the `FRONTEND_CUSTOM_CSS_URL` environment variable (of the **backend** service) to the URL of your custom CSS file. For example:
 
 ```javascript
-FRONTEND_CSS_URL=https://example.com/custom-style.css
+FRONTEND_CUSTOM_CSS_URL=https://example.com/custom-style.css
 ```
 
 > [!TIP]
-> If you serve your CSS file on the same domain as LaSuite Meet, paths are supported, i.e. `FRONTEND_CSS_URL=/custom/style.css` will load `https://your-domain.com/custom/style.css`.
+> If you serve your CSS file on the same domain as LaSuite Meet, paths are supported, i.e. `FRONTEND_CUSTOM_CSS_URL=/custom/style.css` will load `https://your-domain.com/custom/style.css`.
 
 Setting this variable makes the app load your CSS at runtime, adding a `<link>` to `<head>` so you can override CSS variables and customize the frontend without rebuilding.
 
@@ -37,7 +37,7 @@ Let's say you want to change the font of our application to a custom font. You c
 }
 ```
 
-Then, set the `FRONTEND_CSS_URL` environment variable to the URL of your custom CSS file. Once you've done this, our application will load your custom CSS file and apply the styles, changing the default font to the one you specified.
+Then, set the `FRONTEND_CUSTOM_CSS_URL` environment variable to the URL of your custom CSS file. Once you've done this, our application will load your custom CSS file and apply the styles, changing the default font to the one you specified.
 
 > [!IMPORTANT]
 > You can override any CSS token—semantic or palette. See [panda.config.ts](../src/frontend/panda.config.ts) for all defined semantic tokens.

src/addons/outlook/manifest.xml

@@ -1,7 +1,7 @@
 <?xml version="1.0" encoding="UTF-8" standalone="yes"?>
 <OfficeApp xmlns="http://schemas.microsoft.com/office/appforoffice/1.1" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xmlns:bt="http://schemas.microsoft.com/office/officeappbasictypes/1.0" xmlns:mailappor="http://schemas.microsoft.com/office/mailappversionoverrides/1.0" xsi:type="MailApp">
   <Id>a025f0f6-757a-4790-97f3-99c66c4a5795</Id>
-  <Version>0.0.2.0</Version>
+  <Version>1.0.0.0</Version>
   <ProviderName>__APP_NAME__</ProviderName>
   <DefaultLocale>fr-FR</DefaultLocale>
   <DisplayName DefaultValue="__APP_NAME__"/>
@@ -205,5 +205,174 @@
         </bt:String>
       </bt:LongStrings>
     </Resources>
+
+    <!-- ─── V1.1 override: required for shared folder / delegate support ─── -->
+    <VersionOverrides xmlns="http://schemas.microsoft.com/office/mailappversionoverrides/1.1" xsi:type="VersionOverridesV1_1">
+      <Requirements>
+        <bt:Sets DefaultMinVersion="1.8">
+          <bt:Set Name="Mailbox"/>
+        </bt:Sets>
+      </Requirements>
+      <Hosts>
+        <Host xsi:type="MailHost">
+          <DesktopFormFactor>
+            <FunctionFile resid="Commands.Url"/>
+            <SupportsSharedFolders>true</SupportsSharedFolders>
+
+            <!-- ─── Mail: Read ─────────────────────────────────────────── -->
+            <ExtensionPoint xsi:type="MessageReadCommandSurface">
+              <OfficeTab id="TabDefault">
+                <Group id="msgReadGroup">
+                  <Label resid="GroupLabel"/>
+                  <Control xsi:type="Button" id="msgReadOpenPaneButton">
+                    <Label resid="TaskpaneButton.Label"/>
+                    <Supertip>
+                      <Title resid="TaskpaneButton.Label"/>
+                      <Description resid="TaskpaneButton.Tooltip"/>
+                    </Supertip>
+                    <Icon>
+                      <bt:Image size="16" resid="Icon.16x16"/>
+                      <bt:Image size="32" resid="Icon.32x32"/>
+                      <bt:Image size="80" resid="Icon.80x80"/>
+                    </Icon>
+                    <Action xsi:type="ShowTaskpane">
+                      <SourceLocation resid="Taskpane.Url"/>
+                    </Action>
+                  </Control>
+                </Group>
+              </OfficeTab>
+            </ExtensionPoint>
+
+            <!-- ─── Mail: Compose ─────────────────────────────────────── -->
+            <ExtensionPoint xsi:type="MessageComposeCommandSurface">
+              <OfficeTab id="TabDefault">
+                <Group id="msgComposeGroup">
+                  <Label resid="GroupLabel"/>
+                  <Control xsi:type="Button" id="msgComposeGenerateLinkButton">
+                    <Label resid="GenerateLink.Label"/>
+                    <Supertip>
+                      <Title resid="GenerateLink.Label"/>
+                      <Description resid="GenerateLink.Tooltip"/>
+                    </Supertip>
+                    <Icon>
+                      <bt:Image size="16" resid="Icon.16x16"/>
+                      <bt:Image size="32" resid="Icon.32x32"/>
+                      <bt:Image size="80" resid="Icon.80x80"/>
+                    </Icon>
+                    <Action xsi:type="ExecuteFunction">
+                      <FunctionName>generateMeetingLinkFromMail</FunctionName>
+                    </Action>
+                  </Control>
+                  <Control xsi:type="Button" id="msgComposeOpenPaneButton">
+                    <Label resid="TaskpaneButton.Label"/>
+                    <Supertip>
+                      <Title resid="TaskpaneButton.Label"/>
+                      <Description resid="TaskpaneButton.Tooltip"/>
+                    </Supertip>
+                    <Icon>
+                      <bt:Image size="16" resid="Settings.16x16"/>
+                      <bt:Image size="32" resid="Settings.32x32"/>
+                      <bt:Image size="80" resid="Settings.80x80"/>
+                    </Icon>
+                    <Action xsi:type="ShowTaskpane">
+                      <SourceLocation resid="Taskpane.Url"/>
+                    </Action>
+                  </Control>
+                </Group>
+              </OfficeTab>
+            </ExtensionPoint>
+
+            <!-- ─── Calendar: Compose (New/Edit appointment) ──────────── -->
+            <ExtensionPoint xsi:type="AppointmentOrganizerCommandSurface">
+              <OfficeTab id="TabDefault">
+                <Group id="apptComposeGroup">
+                  <Label resid="GroupLabel"/>
+                  <Control xsi:type="Button" id="apptGenerateLinkButton">
+                    <Label resid="GenerateLink.Label"/>
+                    <Supertip>
+                      <Title resid="GenerateLink.Label"/>
+                      <Description resid="GenerateLink.Tooltip"/>
+                    </Supertip>
+                    <Icon>
+                      <bt:Image size="16" resid="Icon.16x16"/>
+                      <bt:Image size="32" resid="Icon.32x32"/>
+                      <bt:Image size="80" resid="Icon.80x80"/>
+                    </Icon>
+                    <Action xsi:type="ExecuteFunction">
+                      <FunctionName>generateMeetingLinkFromCalendar</FunctionName>
+                    </Action>
+                  </Control>
+
+                  <Control xsi:type="Button" id="apptOpenSettingsButton">
+                    <Label resid="OpenSettings.Label"/>
+                    <Supertip>
+                      <Title resid="OpenSettings.Label"/>
+                      <Description resid="OpenSettings.Tooltip"/>
+                    </Supertip>
+                    <Icon>
+                      <bt:Image size="16" resid="Settings.16x16"/>
+                      <bt:Image size="32" resid="Settings.32x32"/>
+                      <bt:Image size="80" resid="Settings.80x80"/>
+                    </Icon>
+                    <Action xsi:type="ShowTaskpane">
+                      <SourceLocation resid="Taskpane.Url"/>
+                    </Action>
+                  </Control>
+
+                </Group>
+              </OfficeTab>
+            </ExtensionPoint>
+
+          </DesktopFormFactor>
+        </Host>
+      </Hosts>
+      <Resources>
+        <bt:Images>
+          <bt:Image id="Settings.16x16" DefaultValue="https://localhost:3000/addons/outlook/assets/settings-16.png"/>
+          <bt:Image id="Settings.32x32" DefaultValue="https://localhost:3000/addons/outlook/assets/settings-32.png"/>
+          <bt:Image id="Settings.80x80" DefaultValue="https://localhost:3000/addons/outlook/assets/settings-80.png"/>
+          <bt:Image id="Add.16x16" DefaultValue="https://localhost:3000/addons/outlook/assets/add-16.png"/>
+          <bt:Image id="Add.32x32" DefaultValue="https://localhost:3000/addons/outlook/assets/add-32.png"/>
+          <bt:Image id="Add.80x80" DefaultValue="https://localhost:3000/addons/outlook/assets/add-80.png"/>
+          <bt:Image id="Icon.16x16" DefaultValue="https://localhost:3000/addons/outlook/assets/icon-16.png"/>
+          <bt:Image id="Icon.32x32" DefaultValue="https://localhost:3000/addons/outlook/assets/icon-32.png"/>
+          <bt:Image id="Icon.80x80" DefaultValue="https://localhost:3000/addons/outlook/assets/icon-80.png"/>
+        </bt:Images>
+        <bt:Urls>
+          <bt:Url id="Commands.Url" DefaultValue="https://localhost:3000/addons/outlook/commands.html"/>
+          <bt:Url id="Taskpane.Url" DefaultValue="https://localhost:3000/addons/outlook/taskpane.html"/>
+        </bt:Urls>
+        <bt:ShortStrings>
+          <!-- Default (French) -->
+          <bt:String id="GroupLabel" DefaultValue="__APP_NAME__"/>
+          <bt:String id="GenerateLink.Label" DefaultValue="Ajouter un lien __APP_NAME__">
+            <bt:Override Locale="en-US" Value="Add a __APP_NAME__ link"/>
+            <bt:Override Locale="de-DE" Value="__APP_NAME__-Link hinzufügen"/>
+          </bt:String>
+          <bt:String id="TaskpaneButton.Label" DefaultValue="Ouvrir les paramètres">
+            <bt:Override Locale="en-US" Value="Open settings"/>
+            <bt:Override Locale="de-DE" Value="Einstellungen öffnen"/>
+          </bt:String>
+          <bt:String id="OpenSettings.Label" DefaultValue="Paramètres">
+            <bt:Override Locale="en-US" Value="Settings"/>
+            <bt:Override Locale="de-DE" Value="Einstellungen"/>
+          </bt:String>
+        </bt:ShortStrings>
+        <bt:LongStrings>
+          <bt:String id="GenerateLink.Tooltip" DefaultValue="Génère un lien de réunion __APP_NAME__ et l'insère dans l'événement.">
+            <bt:Override Locale="de-DE" Value="Generiert einen __APP_NAME__-Besprechungslink und fügt ihn in den Termin ein."/>
+            <bt:Override Locale="en-US" Value="Generates a __APP_NAME__ meeting link and inserts it into the item."/>
+          </bt:String>
+          <bt:String id="TaskpaneButton.Tooltip" DefaultValue="Ouvre les paramètres de connexion __APP_NAME__.">
+            <bt:Override Locale="de-DE" Value="Öffnet die __APP_NAME__-Verbindungseinstellungen."/>
+            <bt:Override Locale="en-US" Value="Opens the __APP_NAME__ connection settings."/>
+          </bt:String>
+          <bt:String id="OpenSettings.Tooltip" DefaultValue="Ouvre les paramètres de connexion __APP_NAME__.">
+            <bt:Override Locale="de-DE" Value="Öffnet die __APP_NAME__-Verbindungseinstellungen."/>
+            <bt:Override Locale="en-US" Value="Opens the __APP_NAME__ connection settings."/>
+          </bt:String>
+        </bt:LongStrings>
+      </Resources>
+    </VersionOverrides>
   </VersionOverrides>
 </OfficeApp>

src/addons/outlook/package-lock.json

@@ -10,7 +10,7 @@
       "license": "MIT",
       "dependencies": {
         "core-js": "3.49.0",
-        "i18next": "26.3.1",
+        "i18next": "^26.3.2",
         "i18next-browser-languagedetector": "8.2.1",
         "regenerator-runtime": "0.14.1"
       },
@@ -9364,9 +9364,9 @@
       }
     },
     "node_modules/i18next": {
-      "version": "26.3.1",
-      "resolved": "https://registry.npmjs.org/i18next/-/i18next-26.3.1.tgz",
-      "integrity": "sha512-txQqd5EULsqEh9OJqRH15aCaOuy/nLJyhw5EHCSKLKJE1aBbb3Zve2+uQIxgWhPm1QqUQoWyQBm2kfmmIrzkcQ==",
+      "version": "26.3.2",
+      "resolved": "https://registry.npmjs.org/i18next/-/i18next-26.3.2.tgz",
+      "integrity": "sha512-QQkXAM1sPDHqhxMQuBeHVMUn6mJchF+wdpOoQerciLAFqO3ZYdxO0EUbeEhruyutnNwpUQIITDVzLjwnNL0T1w==",
       "funding": [
         {
           "type": "individual",

src/addons/outlook/package.json

@@ -27,7 +27,7 @@
   },
   "dependencies": {
     "core-js": "3.49.0",
-    "i18next": "26.3.1",
+    "i18next": "26.3.2",
     "i18next-browser-languagedetector": "8.2.1",
     "regenerator-runtime": "0.14.1"
   },

src/addons/outlook/src/taskpane/taskpane.html

@@ -57,8 +57,7 @@
        data-i18n="footer.feedback"
     ></a>
     <div id="footer-right">
-        <span class="version-badge">beta</span>
-        <span class="version-number">0.0.2</span>
+        <span class="version-number">1.0.0</span>
     </div>
 </footer>
 </body>

src/agents/pyproject.toml

@@ -1,7 +1,7 @@
 
 [project]
 name = "agents"
-version = "1.23.0"
+version = "1.24.0"
 requires-python = ">=3.12"
 dependencies = [
     "livekit-agents==1.6.4",

src/agents/uv.lock

@@ -9,7 +9,7 @@ resolution-markers = [
 
 [[package]]
 name = "agents"
-version = "1.23.0"
+version = "1.24.0"
 source = { virtual = "." }
 dependencies = [
     { name = "livekit-agents" },

src/backend/core/api/serializers.py

@@ -13,12 +13,7 @@ from django.core.exceptions import SuspiciousOperation
 from django.utils.translation import gettext_lazy as _
 
 from django_pydantic_field.rest_framework import SchemaField
-from pydantic import (
-    BaseModel,
-    Field,
-    field_serializer,
-    field_validator,
-)
+from pydantic import BaseModel, Field, field_serializer
 from pydantic import ValidationError as PydanticValidationError
 from rest_framework import serializers
 from rest_framework.exceptions import PermissionDenied
@@ -232,49 +227,6 @@ class BaseValidationOnlySerializer(serializers.Serializer):
         raise NotImplementedError(f"{self.__class__.__name__} is validation-only")
 
 
-class EncodingConfig(BaseModel):
-    """Configuration options for recording encoding.
-
-    The allowed `resolution` and `profile` values are derived at validation time
-    from ``settings.RECORDING_ENCODING_AVAILABLE_RESOLUTIONS`` and
-    ``settings.RECORDING_ENCODING_AVAILABLE_PROFILES``, so adding a resolution or profile
-    to those maps is enough to make it accepted here.
-
-    Attributes:
-        resolution: Target video resolution.
-        profile: Encoding profile to balance quality and CPU usage. When `None`,
-        LiveKit default framerate/bitrate are used for the resolution.
-    """
-
-    resolution: str
-    profile: str | None = None
-    model_config = {"extra": "forbid"}
-
-    @field_validator("resolution")
-    @classmethod
-    def _validate_resolution(cls, value):
-        """Reject resolutions absent from RECORDING_ENCODING_AVAILABLE_RESOLUTIONS."""
-        allowed = set(settings.RECORDING_ENCODING_AVAILABLE_RESOLUTIONS)
-        if value not in allowed:
-            raise ValueError(
-                f"Invalid resolution '{value}'. Choose from {sorted(allowed)}."
-            )
-        return value
-
-    @field_validator("profile")
-    @classmethod
-    def _validate_profile(cls, value):
-        """Reject profiles absent from RECORDING_ENCODING_AVAILABLE_PROFILES."""
-        if value is None:
-            return None
-        allowed = set(settings.RECORDING_ENCODING_AVAILABLE_PROFILES)
-        if value not in allowed:
-            raise ValueError(
-                f"Invalid profile '{value}'. Choose from {sorted(allowed)}."
-            )
-        return value
-
-
 class RecordingOptions(BaseModel):
     """Configuration options for recording.
 
@@ -295,7 +247,7 @@ class RecordingOptions(BaseModel):
     transcribe: bool | None = None
     collect_metadata: bool | None = None
     original_mode: Literal["screen_recording", "transcript"] | None = None
-    encoding: EncodingConfig | None = None
+
     model_config = {"extra": "forbid"}
 
 

src/backend/core/api/viewsets.py

@@ -63,7 +63,6 @@ from core.recording.worker.exceptions import (
     RecordingStopError,
 )
 from core.recording.worker.factories import (
-    build_encoding_options,
     get_worker_service,
 )
 from core.recording.worker.mediator import (
@@ -384,34 +383,12 @@ class RoomViewSet(
         options = serializer.validated_data.get("options")
         room = self.get_object()
 
-        if (
-            options is not None
-            and options.encoding is not None
-            and not settings.RECORDING_CUSTOM_ENCODING_ENABLED
-        ):
-            # Per-recording encoding selection is gated by
-            # RECORDING_CUSTOM_ENCODING_ENABLED. When disabled, recordings use
-            # encoding defined by RECORDING_ENCODING_DEFAULT_RESOLUTION
-            # and RECORDING_ENCODING_DEFAULT_PROFILE.
-            return drf_response.Response(
-                {"detail": "Per-recording encoding selection is disabled."},
-                status=drf_status.HTTP_400_BAD_REQUEST,
-            )
-
-        options_data = options.model_dump(exclude_none=True) if options else {}
-        if options is not None and options.encoding is not None:
-            # Persist the resolved encoding (concrete width/height/framerate/
-            # bitrate) alongside the requested resolution/profile for traceability.
-            options_data["encoding"]["resolved"] = build_encoding_options(
-                options.encoding.resolution, options.encoding.profile
-            )
-
         try:
             with transaction.atomic():
                 recording = models.Recording.objects.create(
                     room=room,
                     mode=mode,
-                    options=options_data,
+                    options=options.model_dump(exclude_none=True) if options else {},
                 )
                 models.RecordingAccess.objects.create(
                     user=self.request.user,

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

@@ -22,44 +22,6 @@ _RECORDING_AUDIO_CODEC = livekit_api.AudioCodec.AAC
 _RECORDING_AUDIO_FREQUENCY_HZ = 48000
 
 
-def build_encoding_options(resolution, profile):
-    """Assemble the LiveKit ``EncodingOptions`` kwargs for a resolution/profile.
-
-    Single source of truth shared by the default encoding
-    (``WorkerServiceConfig.from_settings``) and the per-recording encoding
-    persisted by the start-recording API, so both paths always produce the
-    same shape.
-
-    The profile-independent fields (audio bitrate, keyframe interval and the
-    pinned codec / frequency constants) are always included.
-    The resolution-dependent fields are added only when they can be resolved:
-    width/height require a resolution; framerate/video_bitrate require both a
-    resolution and a profile (a resolution-only encoding leaves framerate and
-    bitrate to LiveKit's defaults).
-    """
-    options: Dict[str, Any] = {
-        "audio_bitrate": settings.RECORDING_ENCODING_AUDIO_BITRATE_KBPS,
-        "key_frame_interval": settings.RECORDING_ENCODING_KEY_FRAME_INTERVAL_S,
-        "video_codec": _RECORDING_VIDEO_CODEC,
-        "audio_codec": _RECORDING_AUDIO_CODEC,
-        "audio_frequency": _RECORDING_AUDIO_FREQUENCY_HZ,
-    }
-
-    if resolution:
-        resolution_config = settings.RECORDING_ENCODING_AVAILABLE_RESOLUTIONS[
-            resolution
-        ]
-        options["width"] = resolution_config["width"]
-        options["height"] = resolution_config["height"]
-
-    if resolution and profile:
-        profile_config = settings.RECORDING_ENCODING_AVAILABLE_PROFILES[profile]
-        options["framerate"] = profile_config["fps"]
-        options["video_bitrate"] = profile_config["kbps"][resolution]
-
-    return options
-
-
 @dataclass(frozen=True)
 class WorkerServiceConfig:
     """Declare Worker Service common configurations"""
@@ -76,16 +38,22 @@ class WorkerServiceConfig:
 
         logger.debug("Loading WorkerServiceConfig from settings.")
 
-        # The default encoding is resolved from the default profile/resolution and
-        # applied to every recording that carries no per-recording encoding.
-        # When either default is missing, we leave this as None so LiveKit falls
-        # back to its built-in preset.
-        resolution = settings.RECORDING_ENCODING_DEFAULT_RESOLUTION
-        profile = settings.RECORDING_ENCODING_DEFAULT_PROFILE
-
         encoding_options: Optional[Dict[str, Any]] = None
-        if resolution and profile:
-            encoding_options = build_encoding_options(resolution, profile)
+        if settings.RECORDING_ENCODING_ENABLED:
+            # Single source of truth for the EncodingOptions kwargs:
+            # operator-tunable values live in Django settings, codec / frequency
+            # are pinned constants. The services layer only unpacks this dict.
+            encoding_options = {
+                "width": settings.RECORDING_ENCODING_WIDTH,
+                "height": settings.RECORDING_ENCODING_HEIGHT,
+                "framerate": settings.RECORDING_ENCODING_FRAMERATE,
+                "video_bitrate": settings.RECORDING_ENCODING_VIDEO_BITRATE_KBPS,
+                "audio_bitrate": settings.RECORDING_ENCODING_AUDIO_BITRATE_KBPS,
+                "key_frame_interval": settings.RECORDING_ENCODING_KEY_FRAME_INTERVAL_S,
+                "video_codec": _RECORDING_VIDEO_CODEC,
+                "audio_codec": _RECORDING_AUDIO_CODEC,
+                "audio_frequency": _RECORDING_AUDIO_FREQUENCY_HZ,
+            }
 
         return cls(
             output_folder=settings.RECORDING_OUTPUT_FOLDER,
@@ -110,12 +78,7 @@ class WorkerService(Protocol):
     def __init__(self, config: WorkerServiceConfig):
         """Initialize the service with the given configuration."""
 
-    def start(
-        self,
-        room_id: str,
-        recording_id: str,
-        encoding_options: Optional[Dict[str, Any]] = None,
-    ) -> str:
+    def start(self, room_id: str, recording_id: str) -> str:
         """Start a recording for a specified room."""
 
     def stop(self, worker_id: str) -> str:

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

@@ -47,11 +47,8 @@ class WorkerServiceMediator:
             raise RecordingStartError()
 
         room_name = str(recording.room.id)
-        encoding_options = (recording.options.get("encoding") or {}).get("resolved")
         try:
-            worker_id = self._worker_service.start(
-                room_name, recording.id, encoding_options=encoding_options
-            )
+            worker_id = self._worker_service.start(room_name, recording.id)
         except (WorkerRequestError, WorkerConnectionError, WorkerResponseError) as e:
             logger.exception(
                 "Failed to start recording for room %s: %s", recording.room.slug, e

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

@@ -76,7 +76,7 @@ class BaseEgressService:
 
         return "FAILED_TO_STOP"
 
-    def start(self, room_name, recording_id, encoding_options=None):
+    def start(self, room_name, recording_id):
         """Start the egress process for a recording (not implemented in the base class).
         Each derived class must implement this method, providing the necessary parameters for
         its specific egress type (e.g. audio_only, streaming output).
@@ -99,24 +99,13 @@ class BaseEgressService:
 
         return livekit_api.EncodingOptions(**opts)
 
-    def _resolve_encoding_options(self, encoding_options):
-        """Build LiveKit EncodingOptions from a resolved per-recording dict, or None.
-
-        ``encoding_options`` is the dict persisted by the API in
-        ``recording.options["encoding"]["resolved"]``.
-        """
-        if not encoding_options:
-            return None
-
-        return livekit_api.EncodingOptions(**encoding_options)
-
 
 class VideoCompositeEgressService(BaseEgressService):
     """Record multiple participant video and audio tracks into a single output '.mp4' file."""
 
     hrid = "video-recording-composite-livekit-egress"
 
-    def start(self, room_name, recording_id, encoding_options=None):
+    def start(self, room_name, recording_id):
         """Start the video composite egress process for a recording."""
 
         # Save room's recording as a mp4 video file.
@@ -137,10 +126,7 @@ class VideoCompositeEgressService(BaseEgressService):
             "layout": "speaker-light",
         }
 
-        advanced = (
-            self._resolve_encoding_options(encoding_options)
-            or self._build_encoding_options()
-        )
+        advanced = self._build_encoding_options()
         if advanced is not None:
             request_kwargs["advanced"] = advanced
 
@@ -159,13 +145,8 @@ class AudioCompositeEgressService(BaseEgressService):
 
     hrid = "audio-recording-composite-livekit-egress"
 
-    def start(self, room_name, recording_id, encoding_options=None):
-        """Start the audio composite egress process for a recording.
-
-        ``encoding_options`` is accepted for signature compatibility with the
-        WorkerService protocol but ignored: audio-only egress has no
-        encoding to configure.
-        """
+    def start(self, room_name, recording_id):
+        """Start the audio composite egress process for a recording."""
 
         # Save room's recording as an ogg audio file.
         file_type = livekit_api.EncodedFileType.OGG

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

@@ -1,126 +0,0 @@
-"""Tests for the per-recording encoding resolution in BaseEgressService."""
-
-# pylint: disable=protected-access,redefined-outer-name,unused-argument,no-member
-
-from unittest.mock import Mock
-
-from django.conf import settings
-
-import pytest
-from livekit import api as livekit_api
-from pydantic import ValidationError as PydanticValidationError
-
-from core.api.serializers import EncodingConfig
-from core.recording.worker.factories import build_encoding_options
-from core.recording.worker.services import VideoCompositeEgressService
-
-
-def make_config():
-    """Build a minimal WorkerServiceConfig-like mock for service instantiation."""
-    config = Mock()
-    config.bucket_args = {
-        "endpoint": "https://s3.test.com",
-        "access_key": "test_key",
-        "secret": "test_secret",
-        "region": "test-region",
-        "bucket": "test-bucket",
-        "force_path_style": True,
-    }
-    config.encoding_options = None
-    return config
-
-
-@pytest.fixture
-def service():
-    """Return a VideoCompositeEgressService with mocked handle_request."""
-    svc = VideoCompositeEgressService(make_config())
-    svc._handle_request = Mock()
-    return svc
-
-
-# --- build_encoding_options ---
-
-
-def test_build_options_without_profile_omits_profile_fields():
-    """A resolution-only config should resolve dimensions but no framerate/bitrate.
-
-    The profile-independent fields (audio bitrate, keyframe interval, codec /
-    frequency pins) are always present, matching the default encoding.
-    """
-    resolved = build_encoding_options("720p", None)
-
-    assert resolved == {
-        "audio_bitrate": settings.RECORDING_ENCODING_AUDIO_BITRATE_KBPS,
-        "key_frame_interval": settings.RECORDING_ENCODING_KEY_FRAME_INTERVAL_S,
-        "video_codec": livekit_api.VideoCodec.H264_MAIN,
-        "audio_codec": livekit_api.AudioCodec.AAC,
-        "audio_frequency": 48000,
-        "width": 1280,
-        "height": 720,
-    }
-    assert "framerate" not in resolved
-    assert "video_bitrate" not in resolved
-
-
-def test_encoding_config_requires_resolution():
-    """A profile-only or empty encoding config should be rejected at validation."""
-    with pytest.raises(PydanticValidationError):
-        EncodingConfig(profile="mixed")
-    with pytest.raises(PydanticValidationError):
-        EncodingConfig()
-
-
-# --- _resolve_encoding_options ---
-
-
-@pytest.mark.parametrize("encoding_options", [None, {}])
-def test_resolve_options_returns_none_when_empty(service, encoding_options):
-    """Resolver should return None when the resolved dict is empty or missing."""
-    assert service._resolve_encoding_options(encoding_options) is None
-
-
-@pytest.mark.parametrize(
-    "resolution",
-    list(settings.RECORDING_ENCODING_AVAILABLE_RESOLUTIONS),
-)
-@pytest.mark.parametrize(
-    "profile",
-    list(settings.RECORDING_ENCODING_AVAILABLE_PROFILES),
-)
-def test_resolve_profile_resolution_combinations(service, profile, resolution):
-    """Every (profile, resolution) pair should resolve to the values from settings."""
-    resolution_config = settings.RECORDING_ENCODING_AVAILABLE_RESOLUTIONS[resolution]
-    expected_width = resolution_config["width"]
-    expected_height = resolution_config["height"]
-    profile_config = settings.RECORDING_ENCODING_AVAILABLE_PROFILES[profile]
-    expected_fps = profile_config["fps"]
-    expected_bitrate = profile_config["kbps"][resolution]
-
-    resolved = build_encoding_options(resolution, profile)
-    result = service._resolve_encoding_options(resolved)
-
-    assert result.width == expected_width
-    assert result.height == expected_height
-    assert result.framerate == expected_fps
-    assert result.video_bitrate == expected_bitrate
-    # Profile-independent fields match the default encoding, never dropped.
-    assert result.audio_bitrate == settings.RECORDING_ENCODING_AUDIO_BITRATE_KBPS
-    assert result.video_codec == livekit_api.VideoCodec.H264_MAIN
-    assert result.audio_codec == livekit_api.AudioCodec.AAC
-    assert result.audio_frequency == 48000
-
-
-def test_resolve_options_none_profile_uses_livekit_defaults(service):
-    """Missing profile should pass 0 fps/bitrate (LiveKit protobuf default).
-
-    The pinned codec / audio fields are still applied even without a profile.
-    """
-    resolved = build_encoding_options("720p", None)
-    result = service._resolve_encoding_options(resolved)
-    assert result.width == 1280
-    assert result.height == 720
-    assert result.framerate == 0
-    assert result.video_bitrate == 0
-    assert result.audio_bitrate == settings.RECORDING_ENCODING_AUDIO_BITRATE_KBPS
-    assert result.video_codec == livekit_api.VideoCodec.H264_MAIN
-    assert result.audio_codec == livekit_api.AudioCodec.AAC

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

@@ -40,16 +40,6 @@ def test_settings():
         "AWS_S3_SECRET_ACCESS_KEY": "test_secret",
         "AWS_S3_REGION_NAME": "test-region",
         "AWS_STORAGE_BUCKET_NAME": "test-bucket",
-        "RECORDING_ENCODING_AVAILABLE_RESOLUTIONS": {
-            "720p": {"width": 1280, "height": 720}
-        },
-        "RECORDING_ENCODING_AVAILABLE_PROFILES": {
-            "full": {"fps": 30, "kbps": {"720p": 3000}}
-        },
-        "RECORDING_ENCODING_DEFAULT_RESOLUTION": "720p",
-        "RECORDING_ENCODING_DEFAULT_PROFILE": "full",
-        "RECORDING_ENCODING_AUDIO_BITRATE_KBPS": 128,
-        "RECORDING_ENCODING_KEY_FRAME_INTERVAL_S": 4.0,
     }
 
     # Use override_settings to properly patch Django settings
@@ -76,18 +66,8 @@ def test_config_initialization(default_config):
         "bucket": "test-bucket",
         "force_path_style": True,
     }
-    # The default encoding is always resolved from the default profile/resolution.
-    assert default_config.encoding_options == {
-        "width": 1280,
-        "height": 720,
-        "framerate": 30,
-        "video_bitrate": 3000,
-        "audio_bitrate": 128,
-        "key_frame_interval": 4.0,
-        "video_codec": livekit_api_codec.VideoCodec.H264_MAIN,
-        "audio_codec": livekit_api_codec.AudioCodec.AAC,
-        "audio_frequency": 48000,
-    }
+    # Encoding override is opt-in; disabled by default.
+    assert default_config.encoding_options is None
 
 
 def test_config_immutability(default_config):
@@ -96,7 +76,6 @@ def test_config_immutability(default_config):
         default_config.output_folder = "new/path"
 
 
-@pytest.mark.parametrize("custom_encoding_enabled", [True, False])
 @override_settings(
     RECORDING_OUTPUT_FOLDER="/test/output",
     LIVEKIT_CONFIGURATION={"server": "test.example.com"},
@@ -105,25 +84,23 @@ def test_config_immutability(default_config):
     AWS_S3_SECRET_ACCESS_KEY="test_secret",
     AWS_S3_REGION_NAME="test-region",
     AWS_STORAGE_BUCKET_NAME="test-bucket",
-    RECORDING_ENCODING_AVAILABLE_RESOLUTIONS={"720p": {"width": 1280, "height": 720}},
-    RECORDING_ENCODING_AVAILABLE_PROFILES={"low": {"fps": 15, "kbps": {"720p": 600}}},
-    RECORDING_ENCODING_DEFAULT_RESOLUTION="720p",
-    RECORDING_ENCODING_DEFAULT_PROFILE="low",
+    RECORDING_ENCODING_ENABLED=True,
+    RECORDING_ENCODING_WIDTH=1280,
+    RECORDING_ENCODING_HEIGHT=720,
+    RECORDING_ENCODING_FRAMERATE=15,
+    RECORDING_ENCODING_VIDEO_BITRATE_KBPS=600,
     RECORDING_ENCODING_AUDIO_BITRATE_KBPS=64,
     RECORDING_ENCODING_KEY_FRAME_INTERVAL_S=10.0,
 )
-def test_config_encoding_options_default(custom_encoding_enabled):
-    """The default encoding is always resolved from the default profile/resolution.
+def test_config_encoding_options_enabled():
+    """When RECORDING_ENCODING_ENABLED is True, encoding options are populated.
 
-    The default fallback resolves the default profile/resolution and mixes those
-    operator-tunable values with pinned codec / frequency constants. This works
-    regardless of RECORDING_CUSTOM_ENCODING_ENABLED, which only gates the
-    per-recording API, so both toggle states produce the same default.
+    The dict mixes operator-tunable values from settings with pinned codec /
+    frequency constants, so the services layer can simply unpack it.
     """
 
-    with override_settings(RECORDING_CUSTOM_ENCODING_ENABLED=custom_encoding_enabled):
-        WorkerServiceConfig.from_settings.cache_clear()
-        config = WorkerServiceConfig.from_settings()
+    WorkerServiceConfig.from_settings.cache_clear()
+    config = WorkerServiceConfig.from_settings()
 
     assert config.encoding_options == {
         "width": 1280,
@@ -138,27 +115,6 @@ def test_config_encoding_options_default(custom_encoding_enabled):
     }
 
 
-@pytest.mark.parametrize(
-    ("default_resolution", "default_profile"),
-    [("", "full"), ("720p", ""), ("", "")],
-)
-def test_config_encoding_options_none_when_default_missing(
-    test_settings, default_resolution, default_profile
-):
-    """A missing default resolution/profile leaves encoding_options None.
-
-    The service then omits the `advanced` field so LiveKit uses its built-in preset.
-    """
-    with override_settings(
-        RECORDING_ENCODING_DEFAULT_RESOLUTION=default_resolution,
-        RECORDING_ENCODING_DEFAULT_PROFILE=default_profile,
-    ):
-        WorkerServiceConfig.from_settings.cache_clear()
-        config = WorkerServiceConfig.from_settings()
-
-    assert config.encoding_options is None
-
-
 @override_settings(
     RECORDING_OUTPUT_FOLDER="/test/output",
     LIVEKIT_CONFIGURATION={"server": "test.example.com"},

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

@@ -52,7 +52,7 @@ def test_start_recording_success(
     # Verify worker service call
     expected_room_name = str(mock_recording.room.id)
     mock_worker_service.start.assert_called_once_with(
-        expected_room_name, mock_recording.id, encoding_options=None
+        expected_room_name, mock_recording.id
     )
 
     # Verify recording updates
@@ -66,38 +66,6 @@ def test_start_recording_success(
     )
 
 
-@mock.patch("core.utils.update_room_metadata")
-def test_start_recording_passes_resolved_encoding(
-    mock_update_room_metadata, mediator, mock_worker_service
-):
-    """The resolved encoding persisted in recording.options reaches the worker."""
-    mock_worker_service.start.return_value = "test-worker-123"
-
-    resolved = {
-        "key_frame_interval": 4.0,
-        "width": 1280,
-        "height": 720,
-        "framerate": 15,
-        "video_bitrate": 700,
-    }
-    mock_recording = RecordingFactory(
-        status=RecordingStatusChoices.INITIATED,
-        worker_id=None,
-        options={
-            "encoding": {
-                "resolution": "720p",
-                "profile": "talking_heads",
-                "resolved": resolved,
-            }
-        },
-    )
-    mediator.start(mock_recording)
-
-    mock_worker_service.start.assert_called_once_with(
-        str(mock_recording.room.id), mock_recording.id, encoding_options=resolved
-    )
-
-
 @pytest.mark.parametrize(
     "error_class", [WorkerRequestError, WorkerConnectionError, WorkerResponseError]
 )

src/backend/core/tests/rooms/test_api_rooms_start_recording.py

@@ -2,12 +2,11 @@
 Test rooms API endpoints in the Meet core app: start recording.
 """
 
-# pylint: disable=redefined-outer-name,unused-argument,no-member
+# pylint: disable=redefined-outer-name,unused-argument
 
 from unittest import mock
 
 import pytest
-from livekit import api as livekit_api
 from rest_framework.test import APIClient
 
 from ...factories import RoomFactory, UserFactory
@@ -471,194 +470,6 @@ def test_start_recording_options_unknown_field_rejected(settings):
     assert response.status_code == 400
 
 
-def test_start_recording_options_encoding_valid(
-    settings, mock_worker_service_factory, mock_worker_manager
-):
-    """Should accept a valid encoding configuration."""
-    settings.RECORDING_ENABLE = True
-    settings.RECORDING_CUSTOM_ENCODING_ENABLED = True
-    room = RoomFactory()
-    user = UserFactory()
-    room.accesses.create(user=user, role="owner")
-    client = APIClient()
-    client.force_login(user)
-
-    response = client.post(
-        f"/api/v1.0/rooms/{room.id}/start-recording/",
-        {
-            "mode": "screen_recording",
-            "options": {"encoding": {"resolution": "720p", "profile": "talking_heads"}},
-        },
-        format="json",
-    )
-
-    assert response.status_code == 201
-
-
-def test_start_recording_options_encoding_rejected_when_custom_encoding_disabled(
-    settings, mock_worker_service_factory, mock_worker_manager
-):
-    """Per-recording encoding is rejected when RECORDING_CUSTOM_ENCODING_ENABLED is off."""
-    settings.RECORDING_ENABLE = True
-    settings.RECORDING_CUSTOM_ENCODING_ENABLED = False
-    room = RoomFactory()
-    user = UserFactory()
-    room.accesses.create(user=user, role="owner")
-    client = APIClient()
-    client.force_login(user)
-
-    response = client.post(
-        f"/api/v1.0/rooms/{room.id}/start-recording/",
-        {
-            "mode": "screen_recording",
-            "options": {"encoding": {"resolution": "720p", "profile": "talking_heads"}},
-        },
-        format="json",
-    )
-
-    assert response.status_code == 400
-    assert not Recording.objects.filter(room=room).exists()
-
-
-def test_start_recording_persists_resolved_encoding(
-    settings, mock_worker_service_factory, mock_worker_manager
-):
-    """The resolved encoding should be persisted in recording.options alongside
-    the requested resolution/profile for traceability."""
-    settings.RECORDING_ENABLE = True
-    settings.RECORDING_CUSTOM_ENCODING_ENABLED = True
-    room = RoomFactory()
-    user = UserFactory()
-    room.accesses.create(user=user, role="owner")
-    client = APIClient()
-    client.force_login(user)
-
-    response = client.post(
-        f"/api/v1.0/rooms/{room.id}/start-recording/",
-        {
-            "mode": "screen_recording",
-            "options": {"encoding": {"resolution": "720p", "profile": "talking_heads"}},
-        },
-        format="json",
-    )
-
-    assert response.status_code == 201
-    recording = Recording.objects.get(room=room)
-    assert recording.options["encoding"] == {
-        "resolution": "720p",
-        "profile": "talking_heads",
-        "resolved": {
-            "audio_bitrate": settings.RECORDING_ENCODING_AUDIO_BITRATE_KBPS,
-            "key_frame_interval": settings.RECORDING_ENCODING_KEY_FRAME_INTERVAL_S,
-            "video_codec": livekit_api.VideoCodec.H264_MAIN,
-            "audio_codec": livekit_api.AudioCodec.AAC,
-            "audio_frequency": 48000,
-            "width": 1280,
-            "height": 720,
-            "framerate": 15,
-            "video_bitrate": 700,
-        },
-    }
-
-
-def test_start_recording_forwards_resolved_encoding_to_worker(
-    settings, mock_worker_service, mock_worker_service_factory
-):
-    """The resolved encoding should passed on to the worker."""
-    settings.RECORDING_ENABLE = True
-    settings.RECORDING_CUSTOM_ENCODING_ENABLED = True
-    room = RoomFactory()
-    user = UserFactory()
-    room.accesses.create(user=user, role="owner")
-    client = APIClient()
-    client.force_login(user)
-
-    mock_worker_service.start.return_value = "egress-123"
-
-    with mock.patch("core.utils.update_room_metadata"):
-        response = client.post(
-            f"/api/v1.0/rooms/{room.id}/start-recording/",
-            {
-                "mode": "screen_recording",
-                "options": {
-                    "encoding": {"resolution": "720p", "profile": "talking_heads"}
-                },
-            },
-            format="json",
-        )
-
-    assert response.status_code == 201
-    recording = Recording.objects.get(room=room)
-    mock_worker_service.start.assert_called_once_with(
-        str(room.id),
-        recording.id,
-        encoding_options=recording.options["encoding"]["resolved"],
-    )
-
-
-def test_start_recording_options_encoding_invalid_resolution(settings):
-    """Should reject invalid encoding resolution values."""
-    settings.RECORDING_ENABLE = True
-    settings.RECORDING_CUSTOM_ENCODING_ENABLED = True
-    room = RoomFactory()
-    user = UserFactory()
-    room.accesses.create(user=user, role="owner")
-    client = APIClient()
-    client.force_login(user)
-
-    response = client.post(
-        f"/api/v1.0/rooms/{room.id}/start-recording/",
-        {"mode": "screen_recording", "options": {"encoding": {"resolution": "4K"}}},
-        format="json",
-    )
-
-    assert response.status_code == 400
-
-
-def test_start_recording_options_encoding_unknown_key_rejected(settings):
-    """Should reject unknown keys in encoding configuration."""
-    settings.RECORDING_ENABLE = True
-    settings.RECORDING_CUSTOM_ENCODING_ENABLED = True
-    room = RoomFactory()
-    user = UserFactory()
-    room.accesses.create(user=user, role="owner")
-    client = APIClient()
-    client.force_login(user)
-
-    response = client.post(
-        f"/api/v1.0/rooms/{room.id}/start-recording/",
-        {
-            "mode": "screen_recording",
-            "options": {"encoding": {"bitrate": 9000}},
-        },
-        format="json",
-    )
-
-    assert response.status_code == 400
-
-
-def test_start_recording_options_without_encoding_unchanged(
-    settings, mock_worker_service_factory, mock_worker_manager
-):
-    """Requests without encoding should keep existing options behavior."""
-    settings.RECORDING_ENABLE = True
-    room = RoomFactory()
-    user = UserFactory()
-    room.accesses.create(user=user, role="owner")
-    client = APIClient()
-    client.force_login(user)
-
-    response = client.post(
-        f"/api/v1.0/rooms/{room.id}/start-recording/",
-        {"mode": "screen_recording", "options": {"language": "fr"}},
-        format="json",
-    )
-
-    assert response.status_code == 201
-    recording = Recording.objects.get(room=room)
-    assert recording.options == {"language": "fr"}
-
-
 @pytest.mark.parametrize("value", ["foo", 12])
 def test_start_recording_options_invalid_transcribe_type(settings, value):
     """Should reject non-boolean transcribe values."""

src/backend/meet/settings.py

@@ -398,6 +398,9 @@ class Base(Configuration):
         "feedback": values.DictValue(
             {}, environ_name="FRONTEND_FEEDBACK", environ_prefix=None
         ),
+        "documentation_url": values.Value(
+            None, environ_name="FRONTEND_DOCUMENTATION_URL", environ_prefix=None
+        ),
         "external_home_url": values.Value(
             None, environ_name="FRONTEND_EXTERNAL_HOME_URL", environ_prefix=None
         ),
@@ -721,74 +724,28 @@ class Base(Configuration):
     # These settings affect screen recordings handled by VideoCompositeEgressService;
     # they are silently ignored by AudioCompositeEgressService (audio-only transcript
     # recordings), whose request never carries advanced EncodingOptions.
-    #
-    # A default encoding is applied to every recording: it is resolved from the default
-    # profile and resolution below and passed to LiveKit as EncodingOptions (advanced),
-    # replacing LiveKit's built-in H264_720P_30 preset. Lowering framerate and bitrate
-    # reduces output file size and CPU load on the egress worker. If either
-    # RECORDING_ENCODING_DEFAULT_RESOLUTION or RECORDING_ENCODING_DEFAULT_PROFILE is
-    # unset, no default encoding is built (a startup warning is emitted) and LiveKit's
-    # built-in preset is used instead.
-    #
-    # RECORDING_CUSTOM_ENCODING_ENABLED gates whether the start-recording API lets a
-    # client override that default per recording (via an `encoding` object selecting a
-    # resolution/profile). When False, the API rejects per-recording `encoding` and
-    # every recording uses the default; when True, clients may pick from the
-    # available resolutions/profiles below.
-    RECORDING_CUSTOM_ENCODING_ENABLED = values.BooleanValue(
-        False, environ_name="RECORDING_CUSTOM_ENCODING_ENABLED", environ_prefix=None
+    # When disabled, LiveKit falls back to its built-in H264_720P_30 preset
+    # (1280x720, 30 fps, 3000 kbps H.264 MAIN video, 128 kbps AAC audio).
+    # When enabled, the values below are passed to LiveKit as EncodingOptions
+    # (advanced) and replace the preset. Lowering framerate and bitrate reduces
+    # output file size and CPU load on the egress worker.
+    RECORDING_ENCODING_ENABLED = values.BooleanValue(
+        False, environ_name="RECORDING_ENCODING_ENABLED", environ_prefix=None
     )
-
-    # Map resolution string -> {"width", "height"} in pixels.
-    RECORDING_ENCODING_AVAILABLE_RESOLUTIONS = values.DictValue(
-        {
-            "540p": {"width": 960, "height": 540},
-            "720p": {"width": 1280, "height": 720},
-            "1080p": {"width": 1920, "height": 1080},
-        },
-        environ_name="RECORDING_ENCODING_AVAILABLE_RESOLUTIONS",
+    RECORDING_ENCODING_WIDTH = values.PositiveIntegerValue(
+        1280, environ_name="RECORDING_ENCODING_WIDTH", environ_prefix=None
+    )
+    RECORDING_ENCODING_HEIGHT = values.PositiveIntegerValue(
+        720, environ_name="RECORDING_ENCODING_HEIGHT", environ_prefix=None
+    )
+    RECORDING_ENCODING_FRAMERATE = values.PositiveIntegerValue(
+        30, environ_name="RECORDING_ENCODING_FRAMERATE", environ_prefix=None
+    )
+    RECORDING_ENCODING_VIDEO_BITRATE_KBPS = values.PositiveIntegerValue(
+        3000,
+        environ_name="RECORDING_ENCODING_VIDEO_BITRATE_KBPS",
         environ_prefix=None,
     )
-
-    # Map profile string -> {"fps", "kbps": {resolution: video_bitrate_kbps}}.
-    # Bitrate scales with resolution so quality stays consistent across sizes.
-    RECORDING_ENCODING_AVAILABLE_PROFILES = values.DictValue(
-        {
-            "talking_heads": {
-                "fps": 15,
-                "kbps": {"540p": 400, "720p": 700, "1080p": 1200},
-            },
-            "text": {
-                "fps": 15,
-                "kbps": {"540p": 600, "720p": 1000, "1080p": 1800},
-            },
-            "mixed": {
-                "fps": 20,
-                "kbps": {"540p": 900, "720p": 1500, "1080p": 2500},
-            },
-            "full": {
-                "fps": 30,
-                "kbps": {"540p": 2000, "720p": 3000, "1080p": 4500},
-            },
-        },
-        environ_name="RECORDING_ENCODING_AVAILABLE_PROFILES",
-        environ_prefix=None,
-    )
-
-    # Defaults used when no profile/resolution is specified per recording.
-    # Must be keys of the two dicts above (validated at startup).
-    RECORDING_ENCODING_DEFAULT_PROFILE = values.Value(
-        "full",
-        environ_name="RECORDING_ENCODING_DEFAULT_PROFILE",
-        environ_prefix=None,
-    )
-    RECORDING_ENCODING_DEFAULT_RESOLUTION = values.Value(
-        "720p",
-        environ_name="RECORDING_ENCODING_DEFAULT_RESOLUTION",
-        environ_prefix=None,
-    )
-
-    # Settings independent of profile/resolution.
     RECORDING_ENCODING_AUDIO_BITRATE_KBPS = values.PositiveIntegerValue(
         128,
         environ_name="RECORDING_ENCODING_AUDIO_BITRATE_KBPS",
@@ -803,7 +760,6 @@ class Base(Configuration):
     SUMMARY_SERVICE_VERSION = values.PositiveIntegerValue(
         1, environ_name="SUMMARY_SERVICE_VERSION", environ_prefix=None
     )
-
     SUMMARY_SERVICE_ENDPOINT = values.Value(
         None, environ_name="SUMMARY_SERVICE_ENDPOINT", environ_prefix=None
     )
@@ -1168,70 +1124,6 @@ class Base(Configuration):
             },
         }
 
-    @classmethod
-    def _check_recording_encoding_maps(cls):
-        """Ensure the per-recording encoding maps are mutually consistent.
-
-        Every profile in RECORDING_ENCODING_AVAILABLE_PROFILES must define a bitrate for
-        each resolution declared in RECORDING_ENCODING_AVAILABLE_RESOLUTIONS.
-
-        The default profile / resolution feed the default encoding. When either is
-        missing, no custom default encoding can be built: a warning is emitted and
-        recordings fall back to LiveKit's built-in preset. When both are set, they
-        must reference keys that actually exist in the maps above.
-        """
-        resolutions = set(cls.RECORDING_ENCODING_AVAILABLE_RESOLUTIONS)
-        profiles = set(cls.RECORDING_ENCODING_AVAILABLE_PROFILES)
-        # DictValue resolves to a dict at runtime; pylint sees the descriptor.
-        for (
-            profile,
-            profile_config,
-        ) in cls.RECORDING_ENCODING_AVAILABLE_PROFILES.items():  # pylint: disable=no-member
-            profile_resolutions = set(profile_config["kbps"])
-            if profile_resolutions != resolutions:
-                raise ValueError(
-                    f"Profile '{profile}' in RECORDING_ENCODING_AVAILABLE_PROFILES must "
-                    "define a bitrate for exactly the resolutions in "
-                    "RECORDING_ENCODING_AVAILABLE_RESOLUTIONS, mismatch on: "
-                    f"{resolutions ^ profile_resolutions}"
-                )
-
-        missing = [
-            name
-            for name, value in (
-                (
-                    "RECORDING_ENCODING_DEFAULT_RESOLUTION",
-                    cls.RECORDING_ENCODING_DEFAULT_RESOLUTION,
-                ),
-                (
-                    "RECORDING_ENCODING_DEFAULT_PROFILE",
-                    cls.RECORDING_ENCODING_DEFAULT_PROFILE,
-                ),
-            )
-            if not value
-        ]
-        if missing:
-            warnings.warn(
-                f"{' and '.join(missing)} not set; recordings will use LiveKit's "
-                "built-in encoding preset instead of a custom default encoding.",
-                UserWarning,
-                stacklevel=2,
-            )
-            return
-
-        if cls.RECORDING_ENCODING_DEFAULT_RESOLUTION not in resolutions:
-            raise ValueError(
-                "RECORDING_ENCODING_DEFAULT_RESOLUTION "
-                f"'{cls.RECORDING_ENCODING_DEFAULT_RESOLUTION}' is not a key of "
-                f"RECORDING_ENCODING_AVAILABLE_RESOLUTIONS ({sorted(resolutions)})."
-            )
-        if cls.RECORDING_ENCODING_DEFAULT_PROFILE not in profiles:
-            raise ValueError(
-                "RECORDING_ENCODING_DEFAULT_PROFILE "
-                f"'{cls.RECORDING_ENCODING_DEFAULT_PROFILE}' is not a key of "
-                f"RECORDING_ENCODING_AVAILABLE_PROFILES ({sorted(profiles)})."
-            )
-
     @classmethod
     def post_setup(cls):
         """Post setup configuration.
@@ -1245,8 +1137,6 @@ class Base(Configuration):
                 "FILE_UPLOAD_TMP_PATH cannot be the same as FILE_UPLOAD_PATH"
             )
 
-        cls._check_recording_encoding_maps()
-
         if (
             cls.SUMMARY_SERVICE_VERSION == 1
             and cls.SUMMARY_SERVICE_ENDPOINT is not None

src/backend/pyproject.toml

@@ -7,7 +7,7 @@ build-backend = "uv_build"
 
 [project]
 name = "meet"
-version = "1.23.0"
+version = "1.24.0"
 authors = [{ "name" = "DINUM", "email" = "dev@mail.numerique.gouv.fr" }]
 classifiers = [
     "Development Status :: 5 - Production/Stable",

src/backend/uv.lock

@@ -1187,7 +1187,7 @@ wheels = [
 
 [[package]]
 name = "meet"
-version = "1.23.0"
+version = "1.24.0"
 source = { editable = "." }
 dependencies = [
     { name = "aiohttp" },

src/frontend/package-lock.json

@@ -1,12 +1,12 @@
 {
   "name": "meet",
-  "version": "1.23.0",
+  "version": "1.24.0",
   "lockfileVersion": 3,
   "requires": true,
   "packages": {
     "": {
       "name": "meet",
-      "version": "1.23.0",
+      "version": "1.24.0",
       "dependencies": {
         "@fontsource-variable/atkinson-hyperlegible-next": "5.2.6",
         "@fontsource-variable/lexend": "5.2.11",
@@ -15,11 +15,11 @@
         "@livekit/components-react": "2.9.21",
         "@livekit/components-styles": "1.2.0",
         "@livekit/track-processors": "0.7.2",
-        "@mediapipe/tasks-vision": "0.10.14",
+        "@mediapipe/tasks-vision": "0.10.35",
         "@pandacss/preset-panda": "1.11.3",
         "@react-types/overlays": "3.10.0",
         "@remixicon/react": "4.9.0",
-        "@tanstack/react-query": "5.101.0",
+        "@tanstack/react-query": "5.101.1",
         "@timephy/rnnoise-wasm": "1.0.0",
         "crisp-sdk-web": "1.1.2",
         "derive-valtio": "0.2.0",
@@ -29,8 +29,8 @@
         "i18next-browser-languagedetector": "8.2.1",
         "i18next-parser": "9.4.0",
         "i18next-resources-to-backend": "1.2.1",
-        "livekit-client": "2.19.2",
-        "posthog-js": "1.391.2",
+        "livekit-client": "2.20.0",
+        "posthog-js": "1.395.0",
         "react": "18.3.1",
         "react-aria": "3.50.0",
         "react-aria-components": "1.19.0",
@@ -1028,9 +1028,9 @@
       "license": "Apache-2.0"
     },
     "node_modules/@livekit/protocol": {
-      "version": "1.45.8",
-      "resolved": "https://registry.npmjs.org/@livekit/protocol/-/protocol-1.45.8.tgz",
-      "integrity": "sha512-Q+l57E7w/xxOBFVWzdX5rkAZO7ffyF+rlDzNUYq2SU114+5aTyCq+PK4unaEVDNd4952Af7wteKr3sOgasGuaA==",
+      "version": "1.46.6",
+      "resolved": "https://registry.npmjs.org/@livekit/protocol/-/protocol-1.46.6.tgz",
+      "integrity": "sha512-upzlHP1vi/kZ/QqALZTFskQ0ifqc2f15RKucHYOsIHJsaXvEYanG75mAb7o+Yomfs4XhQ4BaRsdY+TFHXpaqrg==",
       "license": "Apache-2.0",
       "dependencies": {
         "@bufbuild/protobuf": "^1.10.0"
@@ -1049,12 +1049,18 @@
         "livekit-client": "^1.12.0 || ^2.1.0"
       }
     },
-    "node_modules/@mediapipe/tasks-vision": {
+    "node_modules/@livekit/track-processors/node_modules/@mediapipe/tasks-vision": {
       "version": "0.10.14",
       "resolved": "https://registry.npmjs.org/@mediapipe/tasks-vision/-/tasks-vision-0.10.14.tgz",
       "integrity": "sha512-vOifgZhkndgybdvoRITzRkIueWWSiCKuEUXXK6Q4FaJsFvRJuwgg++vqFUMlL0Uox62U5aEXFhHxlhV7Ja5e3Q==",
       "license": "Apache-2.0"
     },
+    "node_modules/@mediapipe/tasks-vision": {
+      "version": "0.10.35",
+      "resolved": "https://registry.npmjs.org/@mediapipe/tasks-vision/-/tasks-vision-0.10.35.tgz",
+      "integrity": "sha512-HOvadwVRE6JC+45nyYhmnywnr5h/J8KZvOeUNVOG9q/0875pZgItznFB9bRTvLc264YSJqiZ1NsIpCStJw/egg==",
+      "license": "Apache-2.0"
+    },
     "node_modules/@modelcontextprotocol/sdk": {
       "version": "1.29.0",
       "resolved": "https://registry.npmjs.org/@modelcontextprotocol/sdk/-/sdk-1.29.0.tgz",
@@ -2415,9 +2421,9 @@
       }
     },
     "node_modules/@tanstack/query-core": {
-      "version": "5.101.0",
-      "resolved": "https://registry.npmjs.org/@tanstack/query-core/-/query-core-5.101.0.tgz",
-      "integrity": "sha512-cQetA74EB+seWySv1TTKr828TnP0u39m6LykwDXIo84SNortpDkp30TMEjkqtYCNP9c40uT/iwl6MLiufEt0Ow==",
+      "version": "5.101.1",
+      "resolved": "https://registry.npmjs.org/@tanstack/query-core/-/query-core-5.101.1.tgz",
+      "integrity": "sha512-Y6Y92dkXtNqx67m2pMSxUsA3zOCwv862JexZRP8/EPwvKXMPu9m8rv43spiXWzOUIggQ3SQApttALStzhA8B4g==",
       "license": "MIT",
       "funding": {
         "type": "github",
@@ -2436,12 +2442,12 @@
       }
     },
     "node_modules/@tanstack/react-query": {
-      "version": "5.101.0",
-      "resolved": "https://registry.npmjs.org/@tanstack/react-query/-/react-query-5.101.0.tgz",
-      "integrity": "sha512-rLlJXSpkqfizLWgkR5+eLeIk0MvTx/meEIR7LRjxic+qxiQP8zVjq7BqQkiCMNLQBlLfuOLqqr6KO5GtrDlmSg==",
+      "version": "5.101.1",
+      "resolved": "https://registry.npmjs.org/@tanstack/react-query/-/react-query-5.101.1.tgz",
+      "integrity": "sha512-ZnONUuQKJe1bJMStXUL1s5uKN9FcfC28j5cK+iDZcdSHtUv1wtin1cGc/Oewhf2Oc4eKY7lggtpvT/AbMmhHew==",
       "license": "MIT",
       "dependencies": {
-        "@tanstack/query-core": "5.101.0"
+        "@tanstack/query-core": "5.101.1"
       },
       "funding": {
         "type": "github",
@@ -8119,13 +8125,13 @@
       "license": "MIT"
     },
     "node_modules/livekit-client": {
-      "version": "2.19.2",
-      "resolved": "https://registry.npmjs.org/livekit-client/-/livekit-client-2.19.2.tgz",
-      "integrity": "sha512-Kvk07QYDWRAbmYNLRll04ZIuxMQobW/oLPYnmR1kCy8GGHpU0gqyHf704Rz+29zfy8IJZRjKqeVbzGSKn9sumw==",
+      "version": "2.20.0",
+      "resolved": "https://registry.npmjs.org/livekit-client/-/livekit-client-2.20.0.tgz",
+      "integrity": "sha512-RIJcpvBmOmwz3jTj3rmdY6Dzr55HrhcaJjMgY+HSmoEM+yIRyA40m7r8UKv0hnZWM3z/AYhP1q8C8ciz5UWFKQ==",
       "license": "Apache-2.0",
       "dependencies": {
         "@livekit/mutex": "1.1.1",
-        "@livekit/protocol": "1.45.8",
+        "@livekit/protocol": "1.46.6",
         "events": "^3.3.0",
         "jose": "^6.1.0",
         "loglevel": "^1.9.2",
@@ -9130,13 +9136,13 @@
       "license": "MIT"
     },
     "node_modules/posthog-js": {
-      "version": "1.391.2",
-      "resolved": "https://registry.npmjs.org/posthog-js/-/posthog-js-1.391.2.tgz",
-      "integrity": "sha512-q0DZN6ljchSnAFJIXf+sQFTPlsLjTlRa+TvrL+QRb6413BGtib/MNiQy1bnwLKt8KR+f6xJYvkqdLyty9s4Aww==",
+      "version": "1.395.0",
+      "resolved": "https://registry.npmjs.org/posthog-js/-/posthog-js-1.395.0.tgz",
+      "integrity": "sha512-5iTb00CGt2eQUUiBQysQiX89RAbCN6wK2sDNzvs9zv0alaY8mJ0ZySrUD3LQ+XyLhgM5pCpacBuUwChqiYDLDw==",
       "license": "SEE LICENSE IN LICENSE",
       "dependencies": {
-        "@posthog/core": "^1.35.3",
-        "@posthog/types": "^1.390.2",
+        "@posthog/core": "^1.38.0",
+        "@posthog/types": "^1.391.1",
         "core-js": "^3.38.1",
         "dompurify": "^3.3.2",
         "fflate": "^0.4.8",

src/frontend/package.json

@@ -1,7 +1,7 @@
 {
   "name": "meet",
   "private": true,
-  "version": "1.23.0",
+  "version": "1.24.0",
   "type": "module",
   "scripts": {
     "dev": "panda codegen && vite",
@@ -22,11 +22,11 @@
     "@livekit/components-react": "2.9.21",
     "@livekit/components-styles": "1.2.0",
     "@livekit/track-processors": "0.7.2",
-    "@mediapipe/tasks-vision": "0.10.14",
+    "@mediapipe/tasks-vision": "0.10.35",
     "@pandacss/preset-panda": "1.11.3",
     "@react-types/overlays": "3.10.0",
     "@remixicon/react": "4.9.0",
-    "@tanstack/react-query": "5.101.0",
+    "@tanstack/react-query": "5.101.1",
     "@timephy/rnnoise-wasm": "1.0.0",
     "crisp-sdk-web": "1.1.2",
     "derive-valtio": "0.2.0",
@@ -36,8 +36,8 @@
     "i18next-browser-languagedetector": "8.2.1",
     "i18next-parser": "9.4.0",
     "i18next-resources-to-backend": "1.2.1",
-    "livekit-client": "2.19.2",
-    "posthog-js": "1.391.2",
+    "livekit-client": "2.20.0",
+    "posthog-js": "1.395.0",
     "react": "18.3.1",
     "react-aria": "3.50.0",
     "react-aria-components": "1.19.0",

src/frontend/panda.config.ts

@@ -114,6 +114,10 @@ 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/api/useConfig.ts

@@ -20,6 +20,7 @@ export interface ApiConfig {
   feedback: {
     url: string
   }
+  documentation_url?: string
   external_home_url?: string
   silence_livekit_debug_logs?: boolean
   is_silent_login_enabled?: boolean

src/frontend/src/components/Avatar.tsx

@@ -7,36 +7,20 @@ 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',
-        fontSize: '1.3rem',
-        lineHeight: '1rem',
-      },
-      list: {
-        width: '32px',
-        height: '32px',
-        fontSize: '1.3rem',
-        lineHeight: '1rem',
-      },
-      placeholder: {
-        width: '100%',
-        height: '100%',
-      },
+      subtitles: { width: '40px', height: '40px' },
+      list: { width: '32px', height: '32px' },
+      placeholder: { width: '100%', height: '100%' },
     },
     notification: {
-      true: {
-        border: '2px solid white',
-      },
+      true: { border: '2px solid white' },
     },
   },
   defaultVariants: {
@@ -49,32 +33,35 @@ export type AvatarProps = React.HTMLAttributes<HTMLDivElement> & {
   bgColor?: string
 } & RecipeVariantProps<typeof avatar>
 
-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',
-        })}
+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}
       >
-        {initial}
-      </span>
-    </div>
-  )
-}
+        <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'

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

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

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

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

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

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

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

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

@@ -0,0 +1,92 @@
+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,6 +3,7 @@ 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
@@ -10,6 +11,72 @@ 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[]
@@ -40,52 +107,42 @@ 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 tileSpan =
-    carouselOrientation === 'vertical'
-      ? Math.max(width * ASPECT_RATIO_INVERT, MIN_HEIGHT)
-      : Math.max(height * ASPECT_RATIO, MIN_WIDTH)
-  const scrollBarWidth = getScrollBarWidth()
+  const [layout, setLayout] = React.useState<CarouselLayoutState>({
+    orientation: orientation ?? 'vertical',
+    maxVisibleTiles: MIN_VISIBLE_TILES,
+  })
 
-  const tilesThatFit =
-    carouselOrientation === 'vertical'
-      ? Math.max((height - scrollBarWidth) / tileSpan, MIN_VISIBLE_TILES)
-      : Math.max((width - scrollBarWidth) / tileSpan, MIN_VISIBLE_TILES)
+  // 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
+    )
+  }, [])
 
-  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])
+  const sortedTiles = useVisualStableUpdate(tracks, layout.maxVisibleTiles)
 
   return (
-    <aside
-      key={carouselOrientation}
-      className="lk-carousel"
-      ref={asideEl}
-      {...props}
-    >
-      <TrackLoop tracks={sortedTiles}>{props.children}</TrackLoop>
-    </aside>
+    <>
+      <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>
+    </>
   )
 }

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

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

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

@@ -10,6 +10,36 @@ 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
@@ -37,14 +67,15 @@ export interface GridLayoutProps
  * @public
  */
 export function GridLayout({ tracks, ...props }: GridLayoutProps) {
-  const gridEl = React.createRef<HTMLDivElement>()
+  const gridEl = useRef<HTMLDivElement>(null)
+  const [maxTiles, setMaxTiles] = useState(1)
 
   const elementProps = React.useMemo(
     () => mergeProps(props, { className: 'lk-grid-layout' }),
     [props]
   )
-  const { layout } = useGridLayout(gridEl, tracks.length)
-  const pagination = usePagination(layout.maxTiles, tracks)
+  const pagination = usePagination(maxTiles, tracks)
+  useSpeakerPromotionTrigger(pagination.tracks)
 
   useSwipe(gridEl, {
     onLeftSwipe: pagination.nextPage,
@@ -57,8 +88,13 @@ 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 > layout.maxTiles && (
+      {tracks.length > maxTiles && (
         <>
           <PaginationIndicator
             totalPageCount={pagination.totalPageCount}

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

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

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

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

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

@@ -0,0 +1,48 @@
+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 { useMaybeLayoutContext } from '@livekit/components-react'
-import { ParticipantTile } from '@/features/rooms/livekit/components/ParticipantTile'
+import { ParticipantTile } from '@/features/participantTile/components/ParticipantTile.tsx'
 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,7 +28,6 @@ export function ToastJoined({ state, ...props }: Readonly<ToastProps>) {
     state,
     ref
   )
-  const layoutContext = useMaybeLayoutContext()
   const participant = props.toast.content.participant
 
   if (!participant) return
@@ -38,18 +37,13 @@ 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) => {
-          pinParticipant()
+          setPinnedTrack(trackReference)
           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 { WaitingParticipant } from '@/features/rooms/api/listWaitingParticipants'
-import { useWaitingParticipants } from '@/features/rooms/hooks/useWaitingParticipants'
+import type { WaitingParticipant } from '@/features/participants/api/listWaitingParticipants'
+import { useWaitingParticipants } from '@/features/participants/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/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,7 +17,6 @@ export const FullScreenShareWarning = ({
 
   const warningContainerRef = useRef<HTMLDivElement>(null)
   const { width: containerWidth } = useSize(warningContainerRef)
-  const { localParticipant } = useLocalParticipant()
   const screenSharePreferences = useSnapshot(screenSharePreferenceStore)
 
   const isFullScreenSharing = useMemo(() => {
@@ -57,8 +56,10 @@ export const FullScreenShareWarning = ({
     screenSharePreferences.enabled && isFullScreenSharing
 
   const handleStopScreenShare = async () => {
-    if (!localParticipant.isScreenShareEnabled) return
-    await localParticipant.setScreenShareEnabled(false, {}, {})
+    const participant = trackReference.participant
+    if (!(participant instanceof LocalParticipant)) return
+    if (!participant.isScreenShareEnabled) return
+    await (participant as LocalParticipant).setScreenShareEnabled(false, {}, {})
   }
 
   const handleDismissWarning = useCallback(() => {

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

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

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

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

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

@@ -0,0 +1,55 @@
+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/ParticipantTile.tsx

@@ -1,39 +1,32 @@
+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'
+import { ParticipantTileFocus } from './participantTileFocus/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<{
@@ -73,16 +66,12 @@ 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(
@@ -90,28 +79,25 @@ export const ParticipantTile: (
       if (
         trackReference.source &&
         !subscribed &&
-        layoutContext &&
-        layoutContext.pin.dispatch &&
-        isTrackReferencePinned(trackReference, layoutContext.pin.state)
+        layoutStore.pinnedTrackRef &&
+        isEqualTrackRef(trackReference, layoutStore.pinnedTrackRef)
       ) {
-        layoutContext.pin.dispatch({ msg: 'clear_pin' })
+        clearPinnedTrack()
       }
     },
-    [trackReference, layoutContext]
+    [trackReference]
   )
 
-  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 participantName = getParticipantName(trackReference.participant)
+  const participantColor = getParticipantColor(trackReference.participant)
+
+  const { identity, name } = useParticipantInfo({
+    participant: trackReference.participant,
+  })
+  const participantName = name || identity || 'Unknown'
+
   const { t } = useTranslation('rooms', { keyPrefix: 'participantTileFocus' })
 
   const interactiveProps = {
@@ -138,7 +124,9 @@ export const ParticipantTile: (
     <div ref={ref} style={{ position: 'relative' }} {...interactiveProps}>
       <TrackRefContextIfNeeded trackRef={trackReference}>
         <ParticipantContextIfNeeded participant={trackReference.participant}>
-          <FullScreenShareWarning trackReference={trackReference} />
+          {trackReference.participant.isLocal && (
+            <FullScreenShareWarning trackReference={trackReference} />
+          )}
           {children ?? (
             <>
               {isTrackReference(trackReference) &&
@@ -160,76 +148,16 @@ export const ParticipantTile: (
               )}
               <div className="lk-participant-placeholder">
                 <ParticipantPlaceholder
-                  participant={trackReference.participant}
+                  color={participantColor}
+                  displayedNamed={participantName}
                 />
               </div>
               {!disableMetadata && (
-                <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>
+                <ParticipantMetadata
+                  displayedName={participantName}
+                  isScreenShare={isScreenShare}
+                  participant={trackReference.participant}
+                />
               )}
             </>
           )}
@@ -241,13 +169,13 @@ export const ParticipantTile: (
           )}
         </ParticipantContextIfNeeded>
       </TrackRefContextIfNeeded>
-      <KeyboardShortcutHint>
-        {t('toolbarHint', {
+      <KeyboardShortcutHint
+        hint={t('toolbarHint', {
           shortcut: formatShortcutLabel(
             getShortcutDescriptorById('open-shortcuts')?.shortcut
           ),
         })}
-      </KeyboardShortcutHint>
+      />
     </div>
   )
 })

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

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

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

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

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

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

@@ -0,0 +1,32 @@
+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/LowerAllHandsButton.tsx

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

src/frontend/src/features/participants/components/ParticipantRow.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 '../../ParticipantMenu/ParticipantMenuButton'
+import { ParticipantMenuButton } from './menu/ParticipantMenuButton'
 import { PinBadge } from './PinBadge'
+import { MuteAlertDialog } from '@/features/rooms/livekit/components/MuteAlertDialog'
 
 type MicIndicatorProps = {
   participant: Participant
@@ -93,9 +93,7 @@ type ParticipantListItemProps = {
   participant: Participant
 }
 
-export const ParticipantListItem = ({
-  participant,
-}: ParticipantListItemProps) => {
+export const ParticipantRow = ({ participant }: ParticipantListItemProps) => {
   const { t } = useTranslation('rooms')
   const name = participant.name || participant.identity
   return (

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

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

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

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

@@ -0,0 +1,52 @@
+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/RaisedHandRow.tsx

@@ -4,27 +4,47 @@ import { HStack } from '@/styled-system/jsx'
 import { Text } from '@/primitives/Text'
 import { useTranslation } from 'react-i18next'
 import { Avatar } from '@/components/Avatar'
-import { useLowerHandParticipant } from '@/features/rooms/api/lowerHandParticipant'
+import { useLowerHandParticipant } from '../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 HandRaisedListItem = ({
-  participant,
-}: HandRaisedListItemProps) => {
+export const RaisedHandRow = ({ participant }: HandRaisedListItemProps) => {
   const { t } = useTranslation('rooms')
   const name = participant.name || participant.identity
 
-  const { lowerHandParticipant } = useLowerHandParticipant()
-  const isAdminOrOwner = useIsAdminOrOwner()
-
   return (
     <HStack
       role="listitem"
@@ -69,19 +89,9 @@ export const HandRaisedListItem = ({
           )}
         </Text>
       </HStack>
-      {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>
-      )}
+      <AdminOrOwnerOnly>
+        <ActionButton participant={participant} name={name} />
+      </AdminOrOwnerOnly>
     </HStack>
   )
 }

src/frontend/src/features/participants/components/WaitingParticipantRow.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 '@/features/rooms/api/listWaitingParticipants'
+import { WaitingParticipant } from '../api/listWaitingParticipants'
 import { RiCloseLine } from '@remixicon/react'
 
-export const WaitingParticipantListItem = ({
+export const WaitingParticipantRow = ({
   participant,
   onAction,
 }: {

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

@@ -0,0 +1,28 @@
+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/participants/components/menu/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 './PinMenuItem'
-import { RemoveMenuItem } from './RemoveMenuItem'
+import { PinMenuItem } from './items/PinMenuItem'
+import { RemoveMenuItem } from './items/RemoveMenuItem'
 
 export const ParticipantMenu = ({
   participant,

src/frontend/src/features/participants/components/menu/items/PinMenuItem.tsx

@@ -1,15 +1,28 @@
-import type { Participant } from 'livekit-client'
+import { Participant, Track } 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 { useFocusToggleParticipant } from '@/features/rooms/livekit/hooks/useFocusToggleParticipant'
+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'
 
 export const PinMenuItem = ({ participant }: { participant: Participant }) => {
   const { t } = useTranslation('rooms', { keyPrefix: 'participantMenu' })
 
-  const { toggle, inFocus } = useFocusToggleParticipant(participant)
+  const trackRef = useMemo(() => {
+    return {
+      participant: participant,
+      publication: participant.getTrackPublication(Source.Camera),
+      source: Source.Camera,
+    }
+  }, [participant])
+
+  const { pinnedTrackRef } = useSnapshot(layoutStore)
+  const inFocus = isEqualTrackRef(pinnedTrackRef, trackRef)
 
   return (
     <MenuItem
@@ -17,7 +30,7 @@ export const PinMenuItem = ({ participant }: { participant: Participant }) => {
         name: participant.name,
       })}
       className={menuRecipe({ icon: true }).item}
-      onAction={toggle}
+      onAction={() => (inFocus ? clearPinnedTrack() : setPinnedTrack(trackRef))}
     >
       <HStack gap={0.25}>
         {inFocus ? (

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

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

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/rooms/livekit/components/ParticipantTile'
+import { ParticipantTile } from '@/features/participantTile/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/rooms/livekit/components/ParticipantTile'
+import { ParticipantTile } from '@/features/participantTile/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/rooms/livekit/components/ParticipantTile'
+import { ParticipantTile } from '@/features/participantTile/components/ParticipantTile'
 import { getTrackKey } from '../../utils/pipTrackSelection'
 
 type PipScreenShareLayoutProps = {

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

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

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

@@ -23,7 +23,6 @@ import { VStack } from '@/styled-system/jsx'
 import { Checkbox } from '@/primitives/Checkbox.tsx'
 
 import {
-  useSettingsDialog,
   SettingsDialogExtendedKey,
   useTranscriptionLanguage,
 } from '@/features/settings'
@@ -35,6 +34,7 @@ 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,8 +48,6 @@ 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,3 +1,4 @@
+import React from 'react'
 import { styled } from '@/styled-system/jsx'
 
 const StyledContainer = styled('div', {
@@ -67,35 +68,36 @@ export type ActiveSpeakerProps = {
   pushToTalk?: boolean
 }
 
-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>
-  )
-}
+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'

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

@@ -170,7 +170,6 @@ export const Conference = ({
     prepareConnection()
   }, [room, apiConfig, isConnectionWarmedUp])
 
-  const [showInviteDialog, setShowInviteDialog] = useState(mode === 'create')
   const [mediaDeviceError, setMediaDeviceError] = useState<{
     error: MediaDeviceFailure | null
     kind: MediaDeviceKind | null
@@ -303,13 +302,7 @@ export const Conference = ({
           }}
         >
           <VideoConference />
-          {showInviteDialog && !isMobile && (
-            <InviteDialog
-              isOpen={showInviteDialog}
-              onOpenChange={setShowInviteDialog}
-              onClose={() => setShowInviteDialog(false)}
-            />
-          )}
+          {!isMobile && <InviteDialog mode={mode} />}
           <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, type DialogProps, P, Bold } from '@/primitives'
+import { Div, Button, 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 } from 'react'
+import { useMemo, useState } from 'react'
 import { css } from '@/styled-system/css'
 import { useRoomData } from '@/features/rooms/livekit/hooks/useRoomData'
 import { ApiAccessLevel } from '@/features/rooms/api/ApiRoom'
@@ -39,7 +39,9 @@ const StyledRACDialog = styled(Dialog, {
   },
 })
 
-export const InviteDialog = (props: Omit<DialogProps, 'title'>) => {
+export const InviteDialog = ({ mode }: { mode: 'join' | 'create' }) => {
+  const [showInviteDialog, setShowInviteDialog] = useState(mode === 'create')
+
   const { t } = useTranslation('rooms', { keyPrefix: 'shareDialog' })
 
   const roomData = useRoomData()
@@ -58,163 +60,161 @@ export const InviteDialog = (props: Omit<DialogProps, 'title'>) => {
     copyRoomUrlToClipboard,
   } = useCopyRoomToClipboard(roomData)
 
+  if (!showInviteDialog) return null
   return (
-    <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')}
-            >
-              <RiCloseLine />
-            </Button>
-          </Div>
-          <P>{t('description')}</P>
-          {isTelephonyReadyForUse ? (
+    <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({
-                width: '100%',
                 display: 'flex',
-                flexDirection: 'column',
-                marginTop: '0.5rem',
-                gap: '1rem',
-                overflow: 'visible',
+                alignItems: 'center',
+                justifyContent: 'space-between',
               })}
             >
-              <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>
+              <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' : 'tertiary'}
+              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={24} style={{ marginRight: '8px' }} />
+                  <RiCheckLine
+                    size={18}
+                    style={{ marginRight: '8px' }}
+                    aria-hidden="true"
+                  />
                   {t('copied')}
                 </>
               ) : (
                 <>
-                  <RiFileCopyLine size={24} style={{ marginRight: '8px' }} />
-                  {t('copyUrl')}
+                  <RiFileCopyLine
+                    style={{ marginRight: '6px', minWidth: '18px' }}
+                    aria-hidden="true"
+                  />
+                  {t('copy')}
                 </>
               )}
             </Button>
-          )}
-          {roomData?.access_level === ApiAccessLevel.PUBLIC && (
-            <HStack>
-              <div
+          </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}
                 className={css({
-                  backgroundColor: 'primary.200',
-                  borderRadius: '50%',
-                  padding: '4px',
-                  marginTop: '1rem',
+                  fill: 'primary.500',
                 })}
-              >
-                <RiSpam2Fill
-                  size={22}
-                  className={css({
-                    fill: 'primary.500',
-                  })}
-                />
-              </div>
-              <Text variant="sm" style={{ marginTop: '1rem' }}>
-                {t('permissions')}
-              </Text>
-            </HStack>
-          )}
-        </VStack>
-      )}
+              />
+            </div>
+            <Text variant="sm" style={{ marginTop: '1rem' }}>
+              {t('permissions')}
+            </Text>
+          </HStack>
+        )}
+      </VStack>
     </StyledRACDialog>
   )
 }

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

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

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,7 +94,6 @@ const Description = () => {
 
 const Settings = () => {
   const { t } = useTranslation('rooms', { keyPrefix: 'isIdleDisconnectModal' })
-  const { openSettingsDialog } = useSettingsDialog()
   return (
     <P>
       {t('settingsPrefix')}{' '}

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

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

@@ -1,73 +0,0 @@
-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/ParticipantTileFocus.tsx

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

@@ -0,0 +1,6 @@
+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 './controls/Participants/ParticipantsList'
+import { ParticipantsList } from '@/features/participants/components/ParticipantsList'
 import { PanelId, useSidePanel } from '../hooks/useSidePanel'
 import React, { ReactNode, useCallback, useRef } from 'react'
-import { Chat } from '../prefabs/Chat'
+import { Chat } from '@/features/chat/components/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} keepAlive={true}>
+      <Panel isOpen={isChatOpen}>
         <Chat />
       </Panel>
       <Panel isOpen={isToolsOpen} keepAlive={true}>

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

@@ -11,16 +11,16 @@ import { useSnapshot } from 'valtio'
 import { userChoicesStore } from '@/stores/userChoices'
 
 /**
- * This hook sets initial video quality for new participants as they join.
+ * Sets initial video quality for new participants as they join.
  * LiveKit doesn't allow handling video quality preferences at the room level.
  */
-export const useVideoResolutionSubscription = () => {
+export const VideoResolutionSubscription = () => {
   const { videoSubscribeQuality } = useSnapshot(userChoicesStore)
-
   const room = useRoomContext()
 
   useEffect(() => {
     if (!room) return
+
     const handleTrackPublished = (
       publication: RemoteTrackPublication,
       _participant: RemoteParticipant
@@ -41,9 +41,10 @@ export const useVideoResolutionSubscription = () => {
     }
 
     room.on(RoomEvent.TrackPublished, handleTrackPublished)
-
     return () => {
       room.off(RoomEvent.TrackPublished, handleTrackPublished)
     }
   }, [room, videoSubscribeQuality])
+
+  return null
 }

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

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

@@ -1,120 +0,0 @@
-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 { useSettingsDialog } from '@/features/settings/hook/useSettingsDialog'
+import { openSettingsDialog } from '@/stores/settings'
 
 export const SettingsButton = ({
   settingTab,
@@ -12,7 +12,6 @@ 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 { localParticipant } = useLocalParticipant()
-  const isSpeaking = useIsSpeaking(localParticipant)
+  const room = useRoomContext()
+  const isSpeaking = useIsSpeaking(room.localParticipant)
   return <ActiveSpeaker isSpeaking={isSpeaking} pushToTalk />
 }

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

@@ -0,0 +1,23 @@
+import { RiBookOpenLine } from '@remixicon/react'
+import { MenuItem } from 'react-aria-components'
+import { useTranslation } from 'react-i18next'
+import { menuRecipe } from '@/primitives/menuRecipe'
+import { useConfig } from '@/api/useConfig'
+
+export const DocumentationMenuItem = () => {
+  const { t } = useTranslation('rooms', { keyPrefix: 'options.items' })
+  const { data } = useConfig()
+
+  if (!data?.documentation_url) return
+
+  return (
+    <MenuItem
+      href={data.documentation_url}
+      target="_blank"
+      className={menuRecipe({ icon: true, variant: 'dark' }).item}
+    >
+      <RiBookOpenLine size={20} />
+      {t('documentation')}
+    </MenuItem>
+  )
+}

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

@@ -5,6 +5,7 @@ import { SettingsMenuItem } from './SettingsMenuItem'
 import { FeedbackMenuItem } from './FeedbackMenuItem'
 import { EffectsMenuItem } from './EffectsMenuItem'
 import { SupportMenuItem } from './SupportMenuItem'
+import { DocumentationMenuItem } from './DocumentationMenuItem'
 import { TranscriptMenuItem } from './TranscriptMenuItem'
 import { ScreenRecordingMenuItem } from './ScreenRecordingMenuItem'
 import { PictureInPictureMenuItem } from '@/features/rooms/livekit/components/controls/Options/PictureInPictureMenuItem'
@@ -28,6 +29,7 @@ export const OptionsMenuItems = () => {
       <Separator />
       <MenuSection>
         <SupportMenuItem />
+        <DocumentationMenuItem />
         <FeedbackMenuItem />
         <SettingsMenuItem />
       </MenuSection>

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

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