Merge pull request #4248 from element-hq/backport-delayed-leave-timings

Adapt delayed leave timings when delegation is available
Delegate delayed leaves in LocalMember rather than LocalTransport
2026-10-16 23:45:50 +00:00 · 2026-09-09 10:41:21 +02:00 · 2026-09-09 09:54:39 +02:00 · 2026-09-09 09:54:39 +02:00 · 2026-09-09 09:54:39 +02:00 · 2026-09-09 09:54:39 +02:00
71 changed files with 1934 additions and 1369 deletions
@@ -9,7 +9,7 @@ on:
      - opened
      - labeled
  push:
-    branches: [livekit]
+    branches: [main]

 jobs:
  versioning:
@@ -4,12 +4,12 @@ on:

  push:
    branches:
-      - livekit
+      - main
    paths:
      - .github/labels.yml
      - .github/workflows/sync-labels.yml

-permissions: {} # We use ELEMENT_BOT_TOKEN instead
+permissions: {} # We use LABEL_SYNC_GITHUB_TOKEN instead

 jobs:
  sync-labels:
@@ -20,4 +20,4 @@ jobs:
      DELETE: true
      WET: true
    secrets:
-      ELEMENT_BOT_TOKEN: ${{ secrets.ELEMENT_BOT_TOKEN }}
+      ELEMENT_BOT_TOKEN: ${{ secrets.LABEL_SYNC_GITHUB_TOKEN }}
@@ -2,7 +2,7 @@ name: Test
 on:
  pull_request: {}
  push:
-    branches: [livekit]
+    branches: [main]
 jobs:
  vitest:
    name: Run unit tests
@@ -2,7 +2,7 @@ name: Upload translation files to Localazy
 on:
  push:
    branches:
-      - livekit
+      - main
    paths-ignore:
      - ".github/**"

@@ -2,7 +2,7 @@ name: GitHub Actions Security Analysis with zizmor 🌈

 on:
  push:
-    branches: ["livekit", "full-mesh"]
+    branches: ["main", "full-mesh"]
  pull_request: {}

 permissions: {}
@@ -5,15 +5,10 @@
      "server_name": "synapse.m.localhost"
    }
  },
-  "features": {
-    "feature_use_device_session_member_events": true
-  },
  "ssla": "https://static.element.io/legal/element-software-and-services-license-agreement-uk-1.pdf",
  "matrix_rtc_session": {
    "wait_for_key_rotation_ms": 3000,
    "membership_event_expiry_ms": 180000000,
-    "delayed_leave_event_delay_ms": 18000,
-    "delayed_leave_event_restart_ms": 4000,
    "network_error_retry_ms": 100
  }
 }
@@ -8,16 +8,11 @@
  "livekit": {
    "livekit_service_url": "https://livekit-jwt.mydomain.com"
  },
-  "features": {
-    "feature_use_device_session_member_events": true
-  },
  "ssla": "https://static.element.io/legal/element-software-and-services-license-agreement-uk-1.pdf",
  "matrix_rtc_mode": "compatibility",
  "matrix_rtc_session": {
    "wait_for_key_rotation_ms": 3000,
    "membership_event_expiry_ms": 180000000,
-    "delayed_leave_event_delay_ms": 18000,
-    "delayed_leave_event_restart_ms": 4000,
    "network_error_retry_ms": 100
  }
 }
@@ -9,8 +9,6 @@
  "matrix_rtc_session": {
    "wait_for_key_rotation_ms": 3000,
    "membership_event_expiry_ms": 180000000,
-    "delayed_leave_event_delay_ms": 18000,
-    "delayed_leave_event_restart_ms": 4000,
    "network_error_retry_ms": 100
  },
  "posthog": {
@@ -9,8 +9,6 @@
  "matrix_rtc_session": {
    "wait_for_key_rotation_ms": 3000,
    "membership_event_expiry_ms": 180000000,
-    "delayed_leave_event_delay_ms": 18000,
-    "delayed_leave_event_restart_ms": 4000,
    "network_error_retry_ms": 100
  }
 }
@@ -13,7 +13,7 @@ services:
      - ./backend/playwright_homeserver-othersite.yaml:/data/cfg/homeserver.yaml:Z
  element-web:
    # Pin to a SHA so that upstream cannot break our tests. Renovate handles regular updates.
-    image: ghcr.io/element-hq/element-web:develop@sha256:af44e1e18bdd363a3332a577c3af66a9dde4ad352508a42ee5012c4a9528b30d
+    image: ghcr.io/element-hq/element-web:develop@sha256:6ed62b2963ae098a1f79521eb516834dcf29452168e281cc359d9cfb4380adf6
  element-web-1:
    # Pin to a SHA so that upstream cannot break our tests. Renovate handles regular updates.
-    image: ghcr.io/element-hq/element-web:develop@sha256:af44e1e18bdd363a3332a577c3af66a9dde4ad352508a42ee5012c4a9528b30d
+    image: ghcr.io/element-hq/element-web:develop@sha256:6ed62b2963ae098a1f79521eb516834dcf29452168e281cc359d9cfb4380adf6
@@ -5,5 +5,6 @@ This folder contains documentation for setup, usage, and development of Element
 - [Embedded vs standalone mode](./embedded_standalone.md)
 - [Url format and parameters](./url_params.md)
 - [Global JS controls](./controls.md)
+- [MatrixRTC modes](./matrix_rtc_modes.md)
 - [Self-Hosting](./self_hosting.md)
 - [Developing with linked packages](./linking.md)
@@ -0,0 +1,48 @@
+# MatrixRTC modes
+
+Element Call is in the middle of a transition of how a call session is
+represented: from room _state_ events (`org.matrix.msc3401.call.member`) to
+_sticky_ events
+([MSC4354](https://github.com/matrix-org/matrix-spec-proposals/pull/4354)),
+which are a much better fit for the short lived, per-device nature of call
+memberships.
+
+Not every homeserver supports sticky events yet. The two MatrixRTC modes
+controls whether Element Call uses them.
+
+## The modes
+
+| Mode            | Membership events | SFU selection | JWT endpoint                 |
+| --------------- | ----------------- | ------------- | ---------------------------- |
+| `compatibility` | state events      | multi SFU     | legacy                       |
+| `matrix_2_0`    | sticky events     | multi SFU     | Matrix 2.0 (hashed identity) |
+
+**`compatibility`** — multi SFU, but still state events. Use it when the
+homeserver does not support sticky events. This is the default.
+
+**`matrix_2_0`** — the target state. Requires a homeserver that advertises
+MSC4354 and all clients on v0.17.0 or later. The local membership requests its
+token from the Matrix 2.0 JWT endpoint of the
+[MatrixRTC Authorization Service](https://github.com/element-hq/lk-jwt-service)
+and identifies the room by a hashed identity instead of a `livekit_alias`.
+(Remote memberships always try the new endpoint first and fall back to the
+legacy one, so remote participants can be on either.)
+
+## Selecting a mode
+
+Users can choose a mode under **Settings → Developer → MatrixRTC mode**. The
+Matrix 2.0 option is disabled if the homeserver does not support sticky events.
+
+A deployment can pin the mode for all its clients in `config.json`, which
+disables the Developer Settings choice:
+
+```json
+{
+  "matrix_rtc_mode": "compatibility"
+}
+```
+
+Valid values are `compatibility` and `matrix_2_0`; an invalid value is
+ignored (with a warning) and the user's choice applies. Pinning `matrix_2_0` on a
+homeserver without sticky event support makes joining fail with a "sticky events
+required" error.
@@ -16,7 +16,7 @@
 The following [MSCs](https://github.com/matrix-org/matrix-spec-proposals) are
 required for Element Call to work properly:

- **[MSC3266](https://github.com/deepbluev7/matrix-doc/blob/room-summaries/proposals/3266-room-summary.md):
+- **[MSC3266](https://github.com/deepbluev7/matrix-doc/blob/room-summaries/proposals/3266-room-summary.md)
  Room Summary API**: In Standalone mode Element Call is able to join rooms
  over federation using knocking. In this context MSC3266 is required as it
  allows to request a room summary of rooms you are not joined. The summary
@@ -29,19 +29,26 @@ required for Element Call to work properly:
  signalling. If disabled it is very likely that you end up with stuck calls in
  Matrix rooms.

+- **[MSC4519](https://github.com/matrix-org/matrix-spec-proposals/blob/travis/msc/voip-transports-registry/proposals/4519-rtc-transports-registry.md)
+  MatrixRTC Transports Registry**: Defines an endpoint that clients can use to
+  query the available MatrixRTC transports (i.e. find your LiveKit SFU).
+
 - **[MSC4222](https://github.com/matrix-org/matrix-spec-proposals/blob/erikj/sync_v2_state_after/proposals/4222-sync-v2-state-after.md)
  Adding `state_after` to sync v2**: Allow clients to opt-in to a change of the
  sync v2 API that allows them to correctly track the state of the room. This is
  required by Element Call to track room state reliably.

 If you're using [Synapse](https://github.com/element-hq/synapse/) as your
-homeserver, you'll need to additionally add the following config items to
-`homeserver.yaml` to comply with Element Call:
+homeserver, you can configure these features by adding the following entries to
+`homeserver.yaml`:

 ```yaml
 experimental_features:
  # MSC3266: Room summary API. Used for knocking over federation
  msc3266_enabled: true
+  # MSC4143: MatrixRTC. For historical reasons this flag enables the transports
+  # endpoint defined in MSC4519.
+  msc4143_enabled: true
  # MSC4222 needed for syncv2 state_after. This allow clients to
  # correctly track the state of the room.
  msc4222_enabled: true
@@ -61,6 +68,15 @@ rc_delayed_event_mgmt:
  # Currently the heart-beat is every 5 seconds which translates into a rate of 0.2Hz
  per_second: 1
  burst_count: 20
+
+matrix_rtc:
+  transports:
+    # The transport you specify will be made available to clients over the
+    # /_matrix/client/unstable/org.matrix.msc4143/rtc/transports endpoint as
+    # defined in MSC4519.
+    - type: livekit
+      # Replace this with the actual URL of your MatrixRTC Authorization Service
+      livekit_service_url: https://matrix-rtc.example.com/livekit/jwt
 ```

 As a prerequisite for the
@@ -187,23 +203,6 @@ backend mxrtc_auth_backend

 ```

-#### MatrixRTC transport announcement
-
-Enable the unstable feature flag `msc4143_enabled`, and update the
-[`matrix_rtc` section](https://element-hq.github.io/synapse/latest/usage/configuration/config_documentation.html#matrix_rtc)
-of your Synapse config file:
-
-```yaml
-matrix_rtc:
-  transports:
-    - type: livekit
-      livekit_service_url: https://matrix-rtc.example.com/livekit/jwt
-```
-
-The transport you specify will be made available to clients over the
-`/_matrix/client/unstable/org.matrix.msc4143/rtc/transports` endpoint as defined
-in [MSC4143](https://github.com/matrix-org/matrix-spec-proposals/pull/4143).
-
 ## Building Element Call

 > [!NOTE]  
@@ -80,10 +80,6 @@
        "description": "Compatible with homeservers that do not support sticky events (but all other EC clients are v0.17.0 or later)",
        "label": "Compatibility: state events & multi SFU"
      },
-      "Legacy": {
-        "description": "Compatible with old versions of EC that do not support multi SFU",
-        "label": "Legacy: state events & oldest membership SFU"
-      },
      "Matrix_2_0": {
        "description": "Compatible only with homservers supporting sticky events and all EC clients v0.17.0 or later",
        "label": "Matrix 2.0: sticky events & multi SFU"
@@ -120,6 +116,7 @@
    "peer_connection_timeout_description": "Connection to the media server timed out. Try switching to a different network or disabling your VPN. If the problem persists, see our <0>troubleshooting guide</0> or contact your server administrator.",
    "room_creation_restricted": "Failed to create call",
    "room_creation_restricted_description": "Call creation might be restricted to authorized users only. Try again later, or contact your server admin if the problem persists.",
+    "screen_share_failed": "Could not start screen sharing",
    "sticky_events_required": "Homeserver does not support Matrix 2.0 calls",
    "sticky_events_required_description": "This deployment is configured to use Matrix 2.0 call mode, but the homeserver does not advertise support for sticky events (MSC4354). Ask your server admin to upgrade, or switch the deployment to a compatible mode.",
    "unexpected_ec_error": "An unexpected error occurred (<0>Error Code:</0> <1>{{ errorCode }}</1>). Please contact your server admin."
@@ -153,7 +153,7 @@ export const widgetTest = test.extend<MyFixtures>({

      // Accept the DM invite from brooks
      // This how playwright record selects the DM invite in the room list
-      await ewPage2.getByRole("option", { name: "Open room" }).click();
+      await ewPage2.getByRole("button", { name: "Open room" }).click();
      await ewPage2.getByRole("button", { name: "Start chatting" }).click();
    }

@@ -101,9 +101,7 @@ async function setRtcModeFromSettings(

  // Move to Developer tab now
  await page.getByRole("tab", { name: "Developer" }).click();
-  if (mode == "legacy") {
-    await page.getByText("Legacy: state events").click();
-  } else if (mode == "2_0") {
+  if (mode == "2_0") {
    await page.getByText("Matrix 2.0").click();
  } else {
    // compat
@@ -12,9 +12,7 @@ import { HOST1, HOST2, type RtcMode, TestHelpers } from "./test-helpers";

 const modePairs: [RtcMode, RtcMode][] = [
  ["compat", "compat"],
-  ["legacy", "legacy"],
-  ["legacy", "compat"],
-  ["compat", "legacy"],
+  // TODO: Compatibility + Matrix 2.0?
 ];

 modePairs.forEach(([rtcMode1, rtcMode2]) => {
@@ -1,85 +0,0 @@
-/*
-Copyright 2026 Element Creations Ltd.
-
-SPDX-License-Identifier: AGPL-3.0-only OR LicenseRef-Element-Commercial
-Please see LICENSE in the repository root for full details.
-*/
-
-import { expect, test } from "@playwright/test";
-
-import { widgetTest } from "../fixtures/widget-user";
-import { HOST1, HOST2, TestHelpers } from "./test-helpers";
-
-widgetTest(
-  "Bug new joiner was not publishing on correct SFU",
-  async ({ addUser, browserName }) => {
-    test.skip(
-      browserName === "firefox",
-      "This is a bug in the old widget, not a browser problem.",
-    );
-
-    test.slow();
-
-    // 2 users in federation
-    const florian = await addUser("floriant", HOST1);
-    const timo = await addUser("timo", HOST2);
-
-    // Florian creates a room and invites Timo to it
-    const roomName = "Call Room";
-    await TestHelpers.createRoom(roomName, florian.page, [timo.mxId]);
-
-    // Timo joins the room
-    await TestHelpers.acceptRoomInvite(roomName, timo.page);
-
-    // Ensure we are in legacy mode (should be the default)
-    await TestHelpers.openWidgetSetEmbeddedElementCallRtcModeCloseWidget(
-      florian.page,
-      "legacy",
-    );
-    await TestHelpers.openWidgetSetEmbeddedElementCallRtcModeCloseWidget(
-      timo.page,
-      "legacy",
-    );
-
-    // Let timo create a call
-    await TestHelpers.startCallInCurrentRoom(timo.page, false);
-    await TestHelpers.joinCallFromLobby(timo.page);
-
-    // We want to simulate that the oldest membership authentication is way slower than
-    // the preffered auth.
-    // In this setup, timo advertised$ transport will be it's own, and the active will be the one from florian
-    await florian.page.route(
-      "**/matrix-rtc.othersite.m.localhost/livekit/jwt/**",
-      async (route) => {
-        await new Promise((resolve) => setTimeout(resolve, 2000)); // 5 second delay
-        await route.continue();
-      },
-    );
-
-    // Florian joins the call
-    await expect(florian.page.getByTestId("join-call-button")).toBeVisible();
-    await florian.page.getByTestId("join-call-button").click();
-    await TestHelpers.joinCallFromLobby(florian.page);
-
-    await florian.page.waitForTimeout(3000);
-    await timo.page.waitForTimeout(3000);
-
-    // We should see 2 video tiles everywhere now
-    for (const user of [timo, florian]) {
-      const frame = user.page
-        .locator('iframe[title="Element Call"]')
-        .contentFrame();
-      await expect(frame.getByTestId("videoTile")).toHaveCount(2);
-
-      // No one should be waiting for media
-      await expect(frame.getByText("Waiting for media...")).not.toBeVisible();
-
-      // There should be 2 video elements, visible and autoplaying
-      await expect(frame.locator("video")).toHaveCount(2, {
-        timeout: 10000,
-      });
-
-      await TestHelpers.expectVisibleVideoCount(frame, 2);
-    }
-  },
-);
@@ -1,91 +0,0 @@
-/*
-Copyright 2026 Element Creations Ltd.
-
-SPDX-License-Identifier: AGPL-3.0-only OR LicenseRef-Element-Commercial
-Please see LICENSE in the repository root for full details.
-*/
-
-import { expect, test } from "@playwright/test";
-
-import { widgetTest } from "../fixtures/widget-user";
-import { HOST1, HOST2, TestHelpers } from "./test-helpers";
-
-// ## Issue
-// This test reproduces an issue with the publisher.
-// When switching local focus, we need to recreate the publisher.
-// This failed because of a dead lock in the old publishers destruction.
-//
-// There are numerus ways to enforece this situation:
-//  - oldest member swap (manually set the oldest member focus and leave with the prev oldest member)
-//    This almost never happens in the real worls since clients will set their preferredFoci list to what the oldest member is.
-//  - switch from oldest member to multi sfu as the NOT the first joiner + the first joiner is on a different sfu than your preferred sfu.
-//
-// This test uses the "switch from oldest member to multi sfu" approach.
-//
-// It is a copy of federated-call.test.ts in the `["legacy", "legacy"]` setup,
-// which once connected will make the second user switch to multi sfu.
-widgetTest(
-  `Test swapping publisher from ${HOST1} to ${HOST2}`,
-  async ({ addUser, browserName }) => {
-    test.slow();
-    test.skip(
-      browserName === "firefox",
-      "The is test is not working on firefox CI environment. No mic/audio device inputs so cam/mic are disabled",
-    );
-
-    const florian = await addUser("floriant", HOST1);
-    const timo = await addUser("timo", HOST2);
-
-    const roomName = "Call Room";
-
-    await TestHelpers.createRoom(roomName, florian.page, [timo.mxId]);
-
-    await TestHelpers.acceptRoomInvite(roomName, timo.page);
-
-    await florian.page.pause();
-
-    await TestHelpers.openWidgetSetEmbeddedElementCallRtcModeCloseWidget(
-      florian.page,
-      "legacy",
-    );
-    await TestHelpers.openWidgetSetEmbeddedElementCallRtcModeCloseWidget(
-      timo.page,
-      "legacy",
-    );
-
-    await TestHelpers.startCallInCurrentRoom(florian.page, false);
-    await TestHelpers.joinCallFromLobby(florian.page);
-
-    // timo joins
-    await TestHelpers.joinCallInCurrentRoom(timo.page);
-
-    // We should see 2 video tiles everywhere now
-    for (const user of [timo, florian]) {
-      const frame = user.page
-        .locator('iframe[title="Element Call"]')
-        .contentFrame();
-      await expect(frame.getByTestId("videoTile")).toHaveCount(2);
-
-      // Wait for "Waiting for media..." to disappear (with timeout)
-      await expect(frame.getByText("Waiting for media...")).not.toBeVisible({
-        timeout: 10000, // Maximum time to wait
-      });
-
-      // There should be 2 video elements, visible and autoplaying
-      await expect(frame.locator("video")).toHaveCount(2, {
-        timeout: 10000,
-      });
-
-      await TestHelpers.expectVisibleVideoCount(frame, 2);
-    }
-
-    // now we switch the mode for timo (second joiner on multi-sfu HOST2 but currently HOST1)
-    await TestHelpers.setEmbeddedElementCallRtcMode(timo.page, "compat");
-    await timo.page.waitForTimeout(3000);
-
-    await TestHelpers.expectVisibleVideoCount(
-      timo.page.locator('iframe[title="Element Call"]').contentFrame(),
-      2,
-    );
-  },
-);
@@ -21,7 +21,7 @@ const PASSWORD = "foobarbaz1!";
 export const HOST1 = "https://app.m.localhost/#/welcome";
 export const HOST2 = "https://app.othersite.m.localhost/#/welcome";

-export type RtcMode = "legacy" | "compat" | "2_0";
+export type RtcMode = "compat" | "2_0";

 export class TestHelpers {
  public static async startCallInCurrentRoom(
@@ -309,9 +309,7 @@ export class TestHelpers {

    // Move to Developer tab now
    await iframe.getByRole("tab", { name: "Developer" }).click();
-    if (mode == "legacy") {
-      await iframe.getByText("Legacy: state events").click();
-    } else if (mode == "2_0") {
+    if (mode == "2_0") {
      await iframe.getByText("Matrix 2.0").click();
    } else {
      // compat
@@ -39,13 +39,13 @@ importers:
        version: 11.7.12
      '@livekit/components-core':
        specifier: ^0.12.0
-        version: 0.12.15(livekit-client@2.21.0(@types/dom-mediacapture-record@1.0.22))(tslib@2.8.1)
+        version: 0.12.15(livekit-client@2.22.2(@types/dom-mediacapture-record@1.0.22))(tslib@2.8.1)
      '@livekit/components-react':
        specifier: ^2.0.0
-        version: 2.9.24(livekit-client@2.21.0(@types/dom-mediacapture-record@1.0.22))(react-dom@19.2.8(react@19.2.8))(react@19.2.8)(tslib@2.8.1)
+        version: 2.9.24(livekit-client@2.22.2(@types/dom-mediacapture-record@1.0.22))(react-dom@19.2.8(react@19.2.8))(react@19.2.8)(tslib@2.8.1)
      '@livekit/track-processors':
        specifier: ^0.7.1
-        version: 0.7.2(@types/dom-mediacapture-transform@0.1.11)(livekit-client@2.21.0(@types/dom-mediacapture-record@1.0.22))
+        version: 0.7.2(@types/dom-mediacapture-transform@0.1.11)(livekit-client@2.22.2(@types/dom-mediacapture-record@1.0.22))
      '@mediapipe/tasks-vision':
        specifier: ^0.10.18
        version: 0.10.35
@@ -66,7 +66,7 @@ importers:
        version: 10.1.2(react-dom@19.2.8(react@19.2.8))(react@19.2.8)
      '@rolldown/plugin-babel':
        specifier: ^0.2.3
-        version: 0.2.3(@babel/core@7.29.7(supports-color@7.2.0))(@babel/runtime@7.29.7)(rolldown@1.1.5)(vite@8.1.5(@types/node@24.13.3)(esbuild@0.28.1)(jiti@2.7.0)(sass@1.102.0)(terser@5.46.1)(yaml@2.9.0))
+        version: 0.2.3(@babel/core@7.29.7(supports-color@7.2.0))(@babel/runtime@8.0.0)(rolldown@1.1.5)(vite@8.1.5(@types/node@24.13.3)(esbuild@0.28.1)(jiti@2.7.0)(sass@1.102.0)(terser@5.46.1)(yaml@2.9.0))
      '@sentry/react':
        specifier: ^8.0.0
        version: 8.55.2(react@19.2.8)
@@ -132,13 +132,13 @@ importers:
        version: 10.3.1(react@19.2.8)
      '@vector-im/compound-design-tokens':
        specifier: ^10.0.0
-        version: 10.2.3(@types/react@19.2.17)(react@19.2.8)
+        version: 10.2.4(@types/react@19.2.17)(react@19.2.8)
      '@vector-im/compound-web':
        specifier: ^10.0.0
-        version: 10.0.1(@fontsource/inconsolata@5.3.0)(@fontsource/inter@5.3.0)(@types/react-dom@19.2.3(@types/react@19.2.17))(@types/react@19.2.17)(@vector-im/compound-design-tokens@10.2.3(@types/react@19.2.17)(react@19.2.8))(react-dom@19.2.8(react@19.2.8))(react@19.2.8)
+        version: 10.0.1(@fontsource/inconsolata@5.3.0)(@fontsource/inter@5.3.0)(@types/react-dom@19.2.3(@types/react@19.2.17))(@types/react@19.2.17)(@vector-im/compound-design-tokens@10.2.4(@types/react@19.2.17)(react@19.2.8))(react-dom@19.2.8(react@19.2.8))(react@19.2.8)
      '@vitejs/plugin-react':
        specifier: ^6.0.2
-        version: 6.0.5(@rolldown/plugin-babel@0.2.3(@babel/core@7.29.7(supports-color@7.2.0))(@babel/runtime@7.29.7)(rolldown@1.1.5)(vite@8.1.5(@types/node@24.13.3)(esbuild@0.28.1)(jiti@2.7.0)(sass@1.102.0)(terser@5.46.1)(yaml@2.9.0)))(babel-plugin-react-compiler@1.0.0)(vite@8.1.5(@types/node@24.13.3)(esbuild@0.28.1)(jiti@2.7.0)(sass@1.102.0)(terser@5.46.1)(yaml@2.9.0))
+        version: 6.0.5(@rolldown/plugin-babel@0.2.3(@babel/core@7.29.7(supports-color@7.2.0))(@babel/runtime@8.0.0)(rolldown@1.1.5)(vite@8.1.5(@types/node@24.13.3)(esbuild@0.28.1)(jiti@2.7.0)(sass@1.102.0)(terser@5.46.1)(yaml@2.9.0)))(babel-plugin-react-compiler@1.0.0)(vite@8.1.5(@types/node@24.13.3)(esbuild@0.28.1)(jiti@2.7.0)(sass@1.102.0)(terser@5.46.1)(yaml@2.9.0))
      '@vitest/browser-playwright':
        specifier: ^4.1.5
        version: 4.1.10(playwright@1.62.0)(vite@8.1.5(@types/node@24.13.3)(esbuild@0.28.1)(jiti@2.7.0)(sass@1.102.0)(terser@5.46.1)(yaml@2.9.0))(vitest@4.1.10)
@@ -183,7 +183,7 @@ importers:
        version: 5.88.1(@emnapi/core@1.11.2)(@emnapi/runtime@1.11.2)(@types/node@24.13.3)(typescript@5.9.3)
      livekit-client:
        specifier: ^2.18.1
-        version: 2.21.0(@types/dom-mediacapture-record@1.0.22)
+        version: 2.22.2(@types/dom-mediacapture-record@1.0.22)
      lodash-es:
        specifier: ^4.17.21
        version: 4.18.1
@@ -192,10 +192,10 @@ importers:
        version: 1.9.2
      matrix-js-sdk:
        specifier: github:matrix-org/matrix-js-sdk#develop
-        version: https://codeload.github.com/matrix-org/matrix-js-sdk/tar.gz/178dc6528ebc6a15e2f6fab38410127f16b500d0
+        version: https://codeload.github.com/matrix-org/matrix-js-sdk/tar.gz/24929be0e741be6a5d0a7226f1c682e245263b8a
      matrix-widget-api:
        specifier: ^1.18.0
-        version: 1.18.0
+        version: 1.19.0
      node-stdlib-browser:
        specifier: ^1.3.1
        version: 1.3.1
@@ -1191,8 +1191,8 @@ packages:
      '@types/dom-mediacapture-transform': ^0.1.9
      livekit-client: ^1.12.0 || ^2.1.0

-  '@matrix-org/matrix-sdk-crypto-wasm@18.4.0':
-    resolution: {integrity: sha512-osxkU1DQ+05+anGHapjWyvZqdHUb94Id37gy54mCKn1Cq/D7iGT5oEUEhjp4oTnCLo4TOtI6ULJ/LHsapaIptQ==}
+  '@matrix-org/matrix-sdk-crypto-wasm@18.5.0':
+    resolution: {integrity: sha512-E826Hy1rG26LanPjtSsOiVRcVoHfSgPgj2r2Xsb5RPScpaKi9XJADQ0u3dNjRCitZPX4oyLNl1FDd5AfDlmIwQ==}
    engines: {node: '>= 18'}

  '@mdx-js/react@3.1.1':
@@ -3240,14 +3240,20 @@ packages:
    peerDependencies:
      react: '>= 16.8.0'

-  '@vector-im/compound-design-tokens@10.2.3':
-    resolution: {integrity: sha512-K2xNkjOzYn2Ya0kUqCy7JIYyx9jbkNIWpex2t9m3FUG4wzkNscvaiRJ/a9Wse1aJmwDDARcHU6mUjtHf5os5MA==}
+  '@vector-im/compound-design-tokens@10.2.4':
+    resolution: {integrity: sha512-2aCjhSvJxktPWnvh5s9Xdc0Rd76AfHqbDbN4QjOxo2VIac6zYdLyQbxMUQ5ZeoR9G3vAxILd0H1UvApRfMilpQ==}
    peerDependencies:
+      '@adobe/leonardo-contrast-colors': ^1.0.0
      '@types/react': '*'
+      chroma-js: ^3.0.0
      react: ^17 || ^18 || ^19.0.0
    peerDependenciesMeta:
+      '@adobe/leonardo-contrast-colors':
+        optional: true
      '@types/react':
        optional: true
+      chroma-js:
+        optional: true
      react:
        optional: true

@@ -3664,9 +3670,9 @@ packages:
  constants-browserify@1.0.0:
    resolution: {integrity: sha512-xFxOwqIzR/e1k1gLiWEophSCMqXcwVHIH7akf7b/vxcUeGunlj3hvZaaqxwHsTgn+IndtkQJgSztIDWeumWJDQ==}

-  content-type@2.0.0:
-    resolution: {integrity: sha512-j/O/d7GcZCyNl7/hwZAb606rzqkyvaDctLmckbxLzHvFBzTJHuGEdodATcP3yIRoDrLHkIATJuvzbFlp/ki2cQ==}
-    engines: {node: '>=18'}
+  content-type@3.0.0:
+    resolution: {integrity: sha512-AIi5H6p0xk5uknXcN3/rmhP8jgp69OfSe/JuKiQAFprJ7UGw7mwj7m4XcmDzlrnJDG+cGpphAINGdU3g3g7kDw==}
+    engines: {node: '>=22'}

  convert-source-map@2.0.0:
    resolution: {integrity: sha512-Kvp459HrV2FEJ1CAsi1Ku+MY3kasH19TFykTz2xWmMeq6bk2NU3XXvfJ+Q61m0xktWwt+1HSYf3JZsTms3aRJg==}
@@ -4459,8 +4465,8 @@ packages:
    resolution: {integrity: sha512-AC/7JofJvZGrrneWNaEnJeOLUx+JlGt7tNa0wZiRPT4MY1wmfKjt2+6O2p2uz2+skll8OZZmJMNqeke7kKbNgQ==}
    hasBin: true

-  jose@6.2.4:
-    resolution: {integrity: sha512-N8acGzVsQy6M/fjFcxtysNc4Q379TcM5dM/qKkNtsHFji88yANnXTr7BLeP75iPnFwBfQzM/jg2BZ9+HZrHCZA==}
+  jose@6.2.12:
+    resolution: {integrity: sha512-9NiFmJEex0sy2Dk58j2UGBSHgUs2ypF9eZSu4L6vjOX3Dp96Sw1F3uL+H+D1sx02jZZdzUT0HgvCy59CuvXcWw==}

  jose@6.2.9:
    resolution: {integrity: sha512-XrchZOFZUl/T3vTwRe8XK+cJrGtMF4th1ARnDfwbBXFKThGhlsxEE4Zu03AD/bjJSt/9jT/mxrOCkJWOg77aPA==}
@@ -4608,8 +4614,8 @@ packages:
  lines-and-columns@1.2.4:
    resolution: {integrity: sha512-7ylylesZQ/PV29jhEDl3Ufjo6ZX7gCqJr5F7PKrqc93v7fzSymt1BpwEU8nAUXs8qzzvqhbjhK5QZg6Mt/HkBg==}

-  livekit-client@2.21.0:
-    resolution: {integrity: sha512-RBUhPkV/sl1nzl8lokVlK5uATPwn0AlsudCBZXissw/kDl9yz8ac4pNJ43iPpMVoHOeBYH/BZ3vUC1adqa/zFQ==}
+  livekit-client@2.22.2:
+    resolution: {integrity: sha512-o3yLYoH2eHVR/DmIZzgC96FMvtR4+g/DjeqNwS5zp12EjqrqiRULxm6Oq/YsTE97WnA6fhy23+a2hGkbce5SPA==}
    peerDependencies:
      '@types/dom-mediacapture-record': ^1

@@ -4658,6 +4664,10 @@ packages:
    resolution: {integrity: sha512-h5bgJWpxJNswbU7qCrV0tIKQCaS3blPDrqKWx+QxzuzL1zGUzij9XCWLrSLsJPu5t+eWA/ycetzYAO5IOMcWAQ==}
    hasBin: true

+  machina@7.0.1:
+    resolution: {integrity: sha512-0Xkgs8NeBvO2hW6bjJT8ewLWrMfh1haMPstaghpASWjXkLjRhtDiaJG1Kb7mslaOHxZYxpH7PIjpmirRVYbMMA==}
+    engines: {node: '>=22.22'}
+
  magic-string@0.30.21:
    resolution: {integrity: sha512-vd2F4YUyEXKGcLHoq+TEyCjxueSeHnFxyyjNp80yg0XV4vUhnDer/lvvlqM/arB5bXQN5K2/3oinyCRyx8T2CQ==}

@@ -4679,13 +4689,13 @@ packages:
  matrix-events-sdk@0.0.1:
    resolution: {integrity: sha512-1QEOsXO+bhyCroIe2/A5OwaxHvBm7EsSQ46DEDn8RBIfQwN5HWBpFvyWWR4QY0KHPPnnJdI99wgRiAl7Ad5qaA==}

-  matrix-js-sdk@https://codeload.github.com/matrix-org/matrix-js-sdk/tar.gz/178dc6528ebc6a15e2f6fab38410127f16b500d0:
-    resolution: {gitHosted: true, integrity: sha512-UmlkoXs9VMZvNaDeQqBb2k+gLifnIqEZc5cxrLeEwdYEDakQLbRqrFtmvIp4ipUCjdIPkCgtzb7QLlpPBLAwqA==, tarball: https://codeload.github.com/matrix-org/matrix-js-sdk/tar.gz/178dc6528ebc6a15e2f6fab38410127f16b500d0}
-    version: 42.1.0
+  matrix-js-sdk@https://codeload.github.com/matrix-org/matrix-js-sdk/tar.gz/24929be0e741be6a5d0a7226f1c682e245263b8a:
+    resolution: {gitHosted: true, integrity: sha512-0EGwbXzvG88sBOxq4ZlCRwT4VpQj2xkizfyy0A3bTSK0ysb6/gXJ/o1WPFoqCjRGMDgPq4gAsk92xGtHA7EhPg==, tarball: https://codeload.github.com/matrix-org/matrix-js-sdk/tar.gz/24929be0e741be6a5d0a7226f1c682e245263b8a}
+    version: 42.2.0
    engines: {node: '>=22.0.0'}

-  matrix-widget-api@1.18.0:
-    resolution: {integrity: sha512-4T2f2koWmx05p1BLcT/9YGGGPSXpPT+PA4Oap/5fjhXsWPxMGJiGL97YpANMYLKsnE1sScYFeuyxIgdc1Qo+Ew==}
+  matrix-widget-api@1.19.0:
+    resolution: {integrity: sha512-Qe7L6G1mQJphBC47/Bzp5ljPIK1UARgLiuGgS+/KmEs/eaNHkQ3+ArD0/0kvMV+d6kCGAZ9OKRqsnuPjizI+tw==}

  md5.js@1.3.5:
    resolution: {integrity: sha512-xitP+WxNPcTTOgnTJcrhM0xvdPepipPSf3I8EIpGKeFLjt3PlJLIDG3u8EX53ZIubkb+5U2+3rELYpEhHhzdkg==}
@@ -7064,21 +7074,21 @@ snapshots:
      '@jridgewell/resolve-uri': 3.1.2
      '@jridgewell/sourcemap-codec': 1.5.5

-  '@livekit/components-core@0.12.15(livekit-client@2.21.0(@types/dom-mediacapture-record@1.0.22))(tslib@2.8.1)':
+  '@livekit/components-core@0.12.15(livekit-client@2.22.2(@types/dom-mediacapture-record@1.0.22))(tslib@2.8.1)':
    dependencies:
      '@floating-ui/dom': 1.7.6
-      livekit-client: 2.21.0(@types/dom-mediacapture-record@1.0.22)
+      livekit-client: 2.22.2(@types/dom-mediacapture-record@1.0.22)
      loglevel: 1.9.1
      rxjs: 7.8.2
      tslib: 2.8.1

-  '@livekit/components-react@2.9.24(livekit-client@2.21.0(@types/dom-mediacapture-record@1.0.22))(react-dom@19.2.8(react@19.2.8))(react@19.2.8)(tslib@2.8.1)':
+  '@livekit/components-react@2.9.24(livekit-client@2.22.2(@types/dom-mediacapture-record@1.0.22))(react-dom@19.2.8(react@19.2.8))(react@19.2.8)(tslib@2.8.1)':
    dependencies:
-      '@livekit/components-core': 0.12.15(livekit-client@2.21.0(@types/dom-mediacapture-record@1.0.22))(tslib@2.8.1)
+      '@livekit/components-core': 0.12.15(livekit-client@2.22.2(@types/dom-mediacapture-record@1.0.22))(tslib@2.8.1)
      clsx: 2.1.1
      events: 3.3.0
      jose: 6.2.9
-      livekit-client: 2.21.0(@types/dom-mediacapture-record@1.0.22)
+      livekit-client: 2.22.2(@types/dom-mediacapture-record@1.0.22)
      react: 19.2.8
      react-dom: 19.2.8(react@19.2.8)
      tslib: 2.8.1
@@ -7090,13 +7100,13 @@ snapshots:
    dependencies:
      '@bufbuild/protobuf': 1.10.1

-  '@livekit/track-processors@0.7.2(@types/dom-mediacapture-transform@0.1.11)(livekit-client@2.21.0(@types/dom-mediacapture-record@1.0.22))':
+  '@livekit/track-processors@0.7.2(@types/dom-mediacapture-transform@0.1.11)(livekit-client@2.22.2(@types/dom-mediacapture-record@1.0.22))':
    dependencies:
      '@mediapipe/tasks-vision': 0.10.35
      '@types/dom-mediacapture-transform': 0.1.11
-      livekit-client: 2.21.0(@types/dom-mediacapture-record@1.0.22)
+      livekit-client: 2.22.2(@types/dom-mediacapture-record@1.0.22)

-  '@matrix-org/matrix-sdk-crypto-wasm@18.4.0': {}
+  '@matrix-org/matrix-sdk-crypto-wasm@18.5.0': {}

  '@mdx-js/react@3.1.1(@types/react@19.2.17)(react@19.2.8)':
    dependencies:
@@ -8047,13 +8057,13 @@ snapshots:
  '@rolldown/binding-win32-x64-msvc@1.1.5':
    optional: true

-  '@rolldown/plugin-babel@0.2.3(@babel/core@7.29.7(supports-color@7.2.0))(@babel/runtime@7.29.7)(rolldown@1.1.5)(vite@8.1.5(@types/node@24.13.3)(esbuild@0.28.1)(jiti@2.7.0)(sass@1.102.0)(terser@5.46.1)(yaml@2.9.0))':
+  '@rolldown/plugin-babel@0.2.3(@babel/core@7.29.7(supports-color@7.2.0))(@babel/runtime@8.0.0)(rolldown@1.1.5)(vite@8.1.5(@types/node@24.13.3)(esbuild@0.28.1)(jiti@2.7.0)(sass@1.102.0)(terser@5.46.1)(yaml@2.9.0))':
    dependencies:
      '@babel/core': 7.29.7(supports-color@7.2.0)
      picomatch: 4.0.4
      rolldown: 1.1.5
    optionalDependencies:
-      '@babel/runtime': 7.29.7
+      '@babel/runtime': 8.0.0
      vite: 8.1.5(@types/node@24.13.3)(esbuild@0.28.1)(jiti@2.7.0)(sass@1.102.0)(terser@5.46.1)(yaml@2.9.0)

  '@rolldown/pluginutils@1.0.1': {}
@@ -8711,12 +8721,12 @@ snapshots:
      '@use-gesture/core': 10.3.1
      react: 19.2.8

-  '@vector-im/compound-design-tokens@10.2.3(@types/react@19.2.17)(react@19.2.8)':
+  '@vector-im/compound-design-tokens@10.2.4(@types/react@19.2.17)(react@19.2.8)':
    optionalDependencies:
      '@types/react': 19.2.17
      react: 19.2.8

-  '@vector-im/compound-web@10.0.1(@fontsource/inconsolata@5.3.0)(@fontsource/inter@5.3.0)(@types/react-dom@19.2.3(@types/react@19.2.17))(@types/react@19.2.17)(@vector-im/compound-design-tokens@10.2.3(@types/react@19.2.17)(react@19.2.8))(react-dom@19.2.8(react@19.2.8))(react@19.2.8)':
+  '@vector-im/compound-web@10.0.1(@fontsource/inconsolata@5.3.0)(@fontsource/inter@5.3.0)(@types/react-dom@19.2.3(@types/react@19.2.17))(@types/react@19.2.17)(@vector-im/compound-design-tokens@10.2.4(@types/react@19.2.17)(react@19.2.8))(react-dom@19.2.8(react@19.2.8))(react@19.2.8)':
    dependencies:
      '@floating-ui/react': 0.27.20(react-dom@19.2.8(react@19.2.8))(react@19.2.8)
      '@floating-ui/react-dom': 2.1.9(react-dom@19.2.8(react@19.2.8))(react@19.2.8)
@@ -8728,7 +8738,7 @@ snapshots:
      '@radix-ui/react-progress': 1.1.16(@types/react-dom@19.2.3(@types/react@19.2.17))(@types/react@19.2.17)(react-dom@19.2.8(react@19.2.8))(react@19.2.8)
      '@radix-ui/react-separator': 1.1.15(@types/react-dom@19.2.3(@types/react@19.2.17))(@types/react@19.2.17)(react-dom@19.2.8(react@19.2.8))(react@19.2.8)
      '@radix-ui/react-slot': 1.3.3(@types/react@19.2.17)(react@19.2.8)
-      '@vector-im/compound-design-tokens': 10.2.3(@types/react@19.2.17)(react@19.2.8)
+      '@vector-im/compound-design-tokens': 10.2.4(@types/react@19.2.17)(react@19.2.8)
      classnames: 2.5.1
      react: 19.2.8
      vaul: 1.1.2(@types/react-dom@19.2.3(@types/react@19.2.17))(@types/react@19.2.17)(react-dom@19.2.8(react@19.2.8))(react@19.2.8)
@@ -8738,12 +8748,12 @@ snapshots:
      - '@types/react-dom'
      - react-dom

-  '@vitejs/plugin-react@6.0.5(@rolldown/plugin-babel@0.2.3(@babel/core@7.29.7(supports-color@7.2.0))(@babel/runtime@7.29.7)(rolldown@1.1.5)(vite@8.1.5(@types/node@24.13.3)(esbuild@0.28.1)(jiti@2.7.0)(sass@1.102.0)(terser@5.46.1)(yaml@2.9.0)))(babel-plugin-react-compiler@1.0.0)(vite@8.1.5(@types/node@24.13.3)(esbuild@0.28.1)(jiti@2.7.0)(sass@1.102.0)(terser@5.46.1)(yaml@2.9.0))':
+  '@vitejs/plugin-react@6.0.5(@rolldown/plugin-babel@0.2.3(@babel/core@7.29.7(supports-color@7.2.0))(@babel/runtime@8.0.0)(rolldown@1.1.5)(vite@8.1.5(@types/node@24.13.3)(esbuild@0.28.1)(jiti@2.7.0)(sass@1.102.0)(terser@5.46.1)(yaml@2.9.0)))(babel-plugin-react-compiler@1.0.0)(vite@8.1.5(@types/node@24.13.3)(esbuild@0.28.1)(jiti@2.7.0)(sass@1.102.0)(terser@5.46.1)(yaml@2.9.0))':
    dependencies:
      '@rolldown/pluginutils': 1.0.1
      vite: 8.1.5(@types/node@24.13.3)(esbuild@0.28.1)(jiti@2.7.0)(sass@1.102.0)(terser@5.46.1)(yaml@2.9.0)
    optionalDependencies:
-      '@rolldown/plugin-babel': 0.2.3(@babel/core@7.29.7(supports-color@7.2.0))(@babel/runtime@7.29.7)(rolldown@1.1.5)(vite@8.1.5(@types/node@24.13.3)(esbuild@0.28.1)(jiti@2.7.0)(sass@1.102.0)(terser@5.46.1)(yaml@2.9.0))
+      '@rolldown/plugin-babel': 0.2.3(@babel/core@7.29.7(supports-color@7.2.0))(@babel/runtime@8.0.0)(rolldown@1.1.5)(vite@8.1.5(@types/node@24.13.3)(esbuild@0.28.1)(jiti@2.7.0)(sass@1.102.0)(terser@5.46.1)(yaml@2.9.0))
      babel-plugin-react-compiler: 1.0.0

  '@vitest/browser-playwright@4.1.10(playwright@1.62.0)(vite@8.1.5(@types/node@24.13.3)(esbuild@0.28.1)(jiti@2.7.0)(sass@1.102.0)(terser@5.46.1)(yaml@2.9.0))(vitest@4.1.10)':
@@ -9189,7 +9199,7 @@ snapshots:

  constants-browserify@1.0.0: {}

-  content-type@2.0.0: {}
+  content-type@3.0.0: {}

  convert-source-map@2.0.0: {}

@@ -10053,7 +10063,7 @@ snapshots:

  jiti@2.7.0: {}

-  jose@6.2.4: {}
+  jose@6.2.12: {}

  jose@6.2.9: {}

@@ -10197,14 +10207,15 @@ snapshots:

  lines-and-columns@1.2.4: {}

-  livekit-client@2.21.0(@types/dom-mediacapture-record@1.0.22):
+  livekit-client@2.22.2(@types/dom-mediacapture-record@1.0.22):
    dependencies:
      '@livekit/mutex': 1.1.1
      '@livekit/protocol': 1.50.4
      '@types/dom-mediacapture-record': 1.0.22
      events: 3.3.0
-      jose: 6.2.4
+      jose: 6.2.12
      loglevel: 1.9.2
+      machina: 7.0.1
      sdp-transform: 2.15.0
      tslib: 2.8.1
      typed-emitter: 2.1.0
@@ -10247,6 +10258,8 @@ snapshots:

  lz-string@1.5.0: {}

+  machina@7.0.1: {}
+
  magic-string@0.30.21:
    dependencies:
      '@jridgewell/sourcemap-codec': 1.5.5
@@ -10269,21 +10282,21 @@ snapshots:

  matrix-events-sdk@0.0.1: {}

-  matrix-js-sdk@https://codeload.github.com/matrix-org/matrix-js-sdk/tar.gz/178dc6528ebc6a15e2f6fab38410127f16b500d0:
+  matrix-js-sdk@https://codeload.github.com/matrix-org/matrix-js-sdk/tar.gz/24929be0e741be6a5d0a7226f1c682e245263b8a:
    dependencies:
      '@babel/runtime': 8.0.0
-      '@matrix-org/matrix-sdk-crypto-wasm': 18.4.0
+      '@matrix-org/matrix-sdk-crypto-wasm': 18.5.0
      another-json: 0.2.0
      bs58: 6.0.0
-      content-type: 2.0.0
+      content-type: 3.0.0
      loglevel: 1.9.2
      matrix-events-sdk: 0.0.1
-      matrix-widget-api: 1.18.0
+      matrix-widget-api: 1.19.0
      p-retry: 8.0.0
      sdp-transform: 3.0.0
      unhomoglyph: 1.0.6

-  matrix-widget-api@1.18.0:
+  matrix-widget-api@1.19.0:
    dependencies:
      '@types/events': 3.0.3
      events: 3.3.0
@@ -127,6 +127,7 @@ export const Default: Story = {
    showFooter: true,
    hideControls: false,
    asOverlay: false,
+    showModals: true,
    sharingScreen: false,
    audioOutputSwitcher: undefined,
    reactionIdentifier: undefined,
@@ -77,6 +77,7 @@ export interface FooterState {
  /** The footer should be used as an overlay.
   * (Over the Call Grid) This saves spaces on small screens. */
  asOverlay: boolean;
+  showModals: boolean;

  buttonSize: "md" | "lg";
  showLogo: boolean;
@@ -121,6 +122,7 @@ export const CallFooter: FC<FooterProps> = ({
  const asOverlay = useBehavior(vm.asOverlay$);
  const showFooter = useBehavior(vm.showFooter$);
  const hideControls = useBehavior(vm.hideControls$);
+  const showModals = useBehavior(vm.showModals$);
  const layoutSwitchVm = useBehavior(vm.layoutSwitchVm$);
  const openSettings = useBehavior(vm.openSettings$);
  const audioEnabled = useBehavior(vm.audioEnabled$);
@@ -235,7 +237,8 @@ export const CallFooter: FC<FooterProps> = ({
    );
  }

-  if (reactionIdentifier && reactionData) {
+  // Reaction button contains a pretty large menu, so treat it like a modal
+  if (reactionIdentifier && reactionData && showModals) {
    buttons.push(
      <ReactionToggleButton
        size={buttonSize}
@@ -49,6 +49,7 @@ function buildMinimalCallViewModel(layout: Layout): CallViewModel {
    reactions$: constant({}),
    tileStoreGeneration$: constant(0),
    showFooter$: constant(true),
+    showModals$: constant(true),
    settingsOpen$: constant(false),
    setSettingsOpen$: constant(() => {}),
  } as unknown as CallViewModel;
@@ -161,6 +161,7 @@ export function createCallFooterViewModel(
    // candidat to move into the FooterViewModel
    showFooter$: callModel.showFooter$,
    hideControls$: constant(!showControls),
+    showModals$: callModel.showModals$,
    asOverlay$: callModel.edgeToEdge$,
    buttonSize$: scope.behavior(
      isPip$.pipe(map<boolean, "md" | "lg">((pip) => (pip ? "md" : "lg"))),
@@ -168,12 +169,12 @@ export function createCallFooterViewModel(

    openSettings$: scope.behavior(
      combineLatest([
-        isPip$,
+        callModel.showModals$,
        callModel.showHeader$,
        callModel.setSettingsOpen$,
      ]).pipe(
-        map(([isPip, showHeader, setSettingsOpen]) =>
-          !isPip && headerStyle !== HeaderStyle.AppBar && showControls
+        map(([showModals, showHeader, setSettingsOpen]) =>
+          showModals && headerStyle !== HeaderStyle.AppBar && showControls
            ? (): void => setSettingsOpen(true)
            : undefined,
        ),
@@ -239,6 +240,7 @@ export function createLobbyFooterViewModel(
      showLogo,
      hideControls: false,
      asOverlay: false,
+      showModals: true,
      buttonSize: "lg",
      openSettings,
      hangup,
@@ -12,9 +12,7 @@ Please see LICENSE in the repository root for full details.
 * Settings, or pinned for a deployment via `matrix_rtc_mode` in config.json.
 */
 export enum MatrixRTCMode {
-  /** Legacy single-SFU + user-keyed memberships + legacy JWT endpoint. */
-  Legacy = "legacy",
-  /** Multi-SFU transport, legacy JWT endpoint, no sticky events. */
+  /** Multi-SFU transport, legacy JWT endpoint, state events. */
  Compatibility = "compatibility",
  /**
   * Multi-SFU transport with:
@@ -26,6 +24,35 @@ export enum MatrixRTCMode {
  Matrix_2_0 = "matrix_2_0",
 }

+export interface DelayedLeaveTimings {
+  /**
+   * The delay (in milliseconds) with which delayed leave events are sent.
+   *
+   * If the server receives no keep-alives from the client for any longer than
+   * this duration, it will send the leave event, automatically removing the
+   * user from the call.
+   */
+  delay_ms?: number;
+
+  /**
+   * How frequently (in milliseconds) the client sends keep-alives to the server
+   * to restart the timer for a delayed leave event. Should be less than
+   * {@link DelayedLeaveTimings.delay_ms}.
+   */
+  restart_ms?: number;
+
+  /**
+   * The time (in milliseconds) after which we consider a delayed event restart HTTP request to have failed.
+   * Setting this to a lower value will result in more frequent retries, but then we will also give up earlier.
+   *
+   * In the presence of network packet loss (hurting TCP connections), the custom delayedEventRestartLocalTimeoutMs
+   * helps by keeping more delayed event reset candidates in flight,
+   * improving the chances of a successful reset. (its is equivalent to the js-sdk `localTimeout` configuration,
+   * but only applies to calls to the `_unstable_updateDelayedEvent` endpoint with a body of `{action:"restart"}`.)
+   */
+  restart_timeout_ms?: number;
+}
+
 export interface ConfigOptions {
  /**
   * The Posthog endpoint to which analytics data will be sent.
@@ -86,15 +113,6 @@ export interface ConfigOptions {
     * Allow to join group calls without audio and video.
     */
    feature_group_calls_without_video_and_audio?: boolean;
-
-    /**
-     * Send device-specific call session membership state events instead of
-     * legacy user-specific call membership state events.
-     * This setting has no effect when the user joins an active call with
-     * legacy state events. For compatibility, Element Call will always join
-     * active legacy calls with legacy state events.
-     */
-    feature_use_device_session_member_events?: boolean;
  };

  /**
@@ -179,7 +197,8 @@ export interface ConfigOptions {
  /**
   * Pins the {@link MatrixRTCMode} for all clients on this deployment,
   * overriding any per-user choice from the Developer Settings. If unset,
-   * the user's Developer Settings choice (or its default of `Legacy`) wins.
+   * the user's Developer Settings choice (or its default of `Compatibility`)
+   * wins.
   */
  matrix_rtc_mode?: MatrixRTCMode;

@@ -194,29 +213,6 @@ export interface ConfigOptions {
     */
    wait_for_key_rotation_ms?: number;

-    /**
-     * The duration (in milliseconds) after the most recent keep-alive (delayed leave event restart)
-     * that the server waits before sending the leave MatrixRTC membership event.
-     */
-    delayed_leave_event_delay_ms?: number;
-
-    /**
-     * The time (in milliseconds) after which we consider a delayed event restart http request to have failed.
-     * Setting this to a lower value will result in more frequent retries but also a higher chance of failiour.
-     *
-     * In the presence of network packet loss (hurting TCP connections), the custom delayedEventRestartLocalTimeoutMs
-     * helps by keeping more delayed event reset candidates in flight,
-     * improving the chances of a successful reset. (its is equivalent to the js-sdk `localTimeout` configuration,
-     * but only applies to calls to the `_unstable_updateDelayedEvent` endpoint with a body of `{action:"restart"}`.)
-     */
-    delayed_leave_event_restart_local_timeout_ms?: number;
-
-    /**
-     * The time interval (in milliseconds) at which the client sends membership keep-alive
-     * messages to the server by restarting the timer for the delayed leave event.
-     */
-    delayed_leave_event_restart_ms?: number;
-
    /**
     * How long we wait before retrying after a network error on any of the requests.
     */
@@ -229,9 +225,40 @@ export interface ConfigOptions {
     * This is what goes into the m.rtc.member event expiry field and is typically set to a number of hours.
     */
    membership_event_expiry_ms?: number;
+
+    /**
+     * The number of participants in the session at which the media encryption key will no longer
+     * be rotated.
+     *
+     * Rotating a key requires sending it to every participant device, so in large sessions the
+     * cost of rotating on every join/leave becomes prohibitive. At this limit the current key is
+     * kept and distributed to new joiners; no new keys are generated for joiners/leavers.
+     *
+     * Defaults to the js-sdk default (undefined). Which means that rotation will always happen.
+     */
+    key_rotation_participant_limit?: number;
+
+    /**
+     * Timing options for delayed leave events, which are used to remove a user
+     * from a call when they lose connection.
+     */
+    delayed_leave?: DelayedLeaveTimings;
+
+    /**
+     * Timing options for delayed leave events, in cases where the ability to
+     * send the event can be delegated to the SFU.
+     *
+     * We recommend setting {@link DelayedLeaveTimings.delay_ms} >>
+     * {@link sync_disconnect_grace_period_ms} here.
+     */
+    delegated_delayed_leave?: DelayedLeaveTimings;
  };
 }

+export interface ResolvedDelayedLeaveTimings extends DelayedLeaveTimings {
+  delay_ms: number; // Required
+}
+
 // Overrides members from ConfigOptions that are always provided by the
 // default config and are therefore non-optional.
 export interface ResolvedConfigOptions extends ConfigOptions {
@@ -255,21 +282,15 @@ export interface ResolvedConfigOptions extends ConfigOptions {
      >
    >;
  };
-  matrix_rtc_session: {
-    wait_for_key_rotation_ms?: number;
-    delayed_leave_event_delay_ms: number;
-    delayed_leave_event_restart_local_timeout_ms?: number;
-    delayed_leave_event_restart_ms?: number;
+  matrix_rtc_session: ConfigOptions["matrix_rtc_session"] & {
    network_error_retry_ms: number;
-    membership_event_expiry_ms?: number;
+    delayed_leave: ResolvedDelayedLeaveTimings;
+    delegated_delayed_leave: ResolvedDelayedLeaveTimings;
  };
 }

 export const DEFAULT_CONFIG: ResolvedConfigOptions = {
-  features: {
-    feature_use_device_session_member_events: true,
-  },
-  sync_disconnect_grace_period_ms: 10000,
+  sync_disconnect_grace_period_ms: 10_000,
  ssla: "https://static.element.io/legal/element-software-and-services-license-agreement-uk-1.pdf",
  media_quality: {
    video_codec: "vp8",
@@ -285,7 +306,8 @@ export const DEFAULT_CONFIG: ResolvedConfigOptions = {
    },
  },
  matrix_rtc_session: {
-    delayed_leave_event_delay_ms: 10000,
-    network_error_retry_ms: 1000,
+    network_error_retry_ms: 1_000,
+    delayed_leave: { delay_ms: 18_000, restart_ms: 4_000 },
+    delegated_delayed_leave: { delay_ms: 3_600_000, restart_ms: 300_000 },
  },
 };
@@ -1,16 +0,0 @@
-<svg width="1440" height="800" viewBox="0 0 1440 800" fill="none" xmlns="http://www.w3.org/2000/svg">
-<g filter="url(#filter0_f_4162_80259)">
-<path d="M-37.0486 666.028C267.76 138.867 944.304 -46.1945 1477.05 260.929" stroke="url(#paint0_linear_4162_80259)" stroke-width="192" stroke-linecap="round"/>
-</g>
-<defs>
-<filter id="filter0_f_4162_80259" x="-333.118" y="-183.694" width="2106.24" height="1145.68" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
-<feFlood flood-opacity="0" result="BackgroundImageFix"/>
-<feBlend mode="normal" in="SourceGraphic" in2="BackgroundImageFix" result="shape"/>
-<feGaussianBlur stdDeviation="100" result="effect1_foregroundBlur_4162_80259"/>
-</filter>
-<linearGradient id="paint0_linear_4162_80259" x1="1255.31" y1="320.254" x2="184.899" y2="607.497" gradientUnits="userSpaceOnUse">
-<stop stop-color="#00C59E"/>
-<stop offset="0.75" stop-color="#0044A5"/>
-</linearGradient>
-</defs>
-</svg>
@@ -1,86 +0,0 @@
-<?xml version="1.0" encoding="UTF-8" standalone="no"?>
-<svg
-   width="1200"
-   height="285"
-   viewBox="0 0 1200 285"
-   fill="none"
-   version="1.1"
-   id="svg5"
-   xmlns="http://www.w3.org/2000/svg"
-   xmlns:svg="http://www.w3.org/2000/svg">
-  <g
-     filter="url(#filter0_f_3970_9366)"
-     id="g2"
-     transform="translate(422.00201)">
-    <path
-       d="m -164.342,495.134 c 188.2881,-188.288 494.684,-190 684.684,0"
-       stroke="url(#paint0_linear_3970_9366)"
-       stroke-width="235.517"
-       stroke-linecap="round"
-       id="path1"
-       style="stroke:url(#paint0_linear_3970_9366)" />
-    <path
-       d="m -164.342,495.134 c 188.2881,-188.288 494.684,-190 684.684,0"
-       stroke="url(#paint1_linear_3970_9366)"
-       style="mix-blend-mode:overlay;stroke:url(#paint1_linear_3970_9366)"
-       stroke-width="235.517"
-       stroke-linecap="round"
-       id="path2" />
-  </g>
-  <defs
-     id="defs5">
-    <filter
-       id="filter0_f_3970_9366"
-       x="-517.617"
-       y="-0.00012207"
-       width="1391.23"
-       height="848.409"
-       filterUnits="userSpaceOnUse"
-       color-interpolation-filters="sRGB">
-      <feFlood
-         flood-opacity="0"
-         result="BackgroundImageFix"
-         id="feFlood2" />
-      <feBlend
-         mode="normal"
-         in="SourceGraphic"
-         in2="BackgroundImageFix"
-         result="shape"
-         id="feBlend2" />
-      <feGaussianBlur
-         stdDeviation="117.758"
-         result="effect1_foregroundBlur_3970_9366"
-         id="feGaussianBlur2" />
-    </filter>
-    <linearGradient
-       id="paint0_linear_3970_9366"
-       x1="349.17099"
-       y1="323.96301"
-       x2="6.82898"
-       y2="666.30499"
-       gradientUnits="userSpaceOnUse">
-      <stop
-         stop-color="#0D5CBD"
-         id="stop2" />
-      <stop
-         offset="0.730863"
-         stop-color="#0DBDA8"
-         id="stop3" />
-    </linearGradient>
-    <linearGradient
-       id="paint1_linear_3970_9366"
-       x1="349.17099"
-       y1="323.96301"
-       x2="6.82898"
-       y2="666.30499"
-       gradientUnits="userSpaceOnUse">
-      <stop
-         stop-color="#0D5CBD"
-         id="stop4" />
-      <stop
-         offset="0.730863"
-         stop-color="#0DBDA8"
-         id="stop5" />
-    </linearGradient>
-  </defs>
-</svg>
@@ -78,16 +78,19 @@ body {
  body[data-background="gradient"]::before {
    content: "";
    position: fixed;
-    inset: 0;
-    background-image: url("graphics/mobile-gradient.svg");
-    background-size: auto;
+    /* Chromium abruptly fades our images to fully transparent at the edge of
+    the element. If we just make the element a little bigger than the viewport,
+    this is no longer visible. */
+    inset: -20px;
+    background-image: url("graphics/mobile-gradient.png");
+    background-size: 1400px 305px;
    background-position: bottom;
    background-repeat: no-repeat;
  }

  body[data-background="gradient"][data-platform="desktop"]::before {
-    background-image: url("graphics/desktop-gradient.svg");
-    background-size: calc(max(1440px, 100vw)) calc(max(800px, 100vh));
+    background-image: url("graphics/desktop-gradient.png");
+    background-size: max(1440px, 100vw) max(1440px, 100vh);
    background-position: center;
  }
 }
@@ -148,7 +148,7 @@ describe("getSFUConfigWithOpenID", () => {
        // Verify, that the request contains the expected delay parameters
        if (
          body.delay_id === "mock_delay_id" &&
-          body.delay_timeout === 10000 &&
+          body.delay_timeout === 3600000 &&
          body.delay_cs_api_url === "https://homeserverserver.org/cs_api"
        ) {
          return {
@@ -229,7 +229,7 @@ describe("getSFUConfigWithOpenID", () => {
    expect(calls[0][0]).toStrictEqual("https://sfu.example.org/get_token");
    expect(calls[0][1]).toStrictEqual({
      // check if it uses correct delayID!
-      body: '{"room_id":"!example_room_id","slot_id":"m.call#ROOM","member":{"id":"@alice:example.org:DEVICE","claimed_user_id":"@alice:example.org","claimed_device_id":"DEVICE"},"delay_id":"mock_delay_id","delay_timeout":10000,"delay_cs_api_url":"https://matrix.homeserverserver.org"}',
+      body: '{"room_id":"!example_room_id","slot_id":"m.call#ROOM","member":{"id":"@alice:example.org:DEVICE","claimed_user_id":"@alice:example.org","claimed_device_id":"DEVICE"},"delay_id":"mock_delay_id","delay_timeout":3600000,"delay_cs_api_url":"https://matrix.homeserverserver.org"}',
      method: "POST",
      headers: {
        "Content-Type": "application/json",
@@ -239,7 +239,7 @@ describe("getSFUConfigWithOpenID", () => {
    expect(calls[1][0]).toStrictEqual("https://sfu.example.org/sfu/get");

    expect(calls[1][1]).toStrictEqual({
-      body: '{"room":"!example_room_id","device_id":"DEVICE","delay_id":"mock_delay_id","delay_timeout":10000,"delay_cs_api_url":"https://matrix.homeserverserver.org"}',
+      body: '{"room":"!example_room_id","device_id":"DEVICE","delay_id":"mock_delay_id","delay_timeout":3600000,"delay_cs_api_url":"https://matrix.homeserverserver.org"}',
      headers: {
        "Content-Type": "application/json",
      },
@@ -284,7 +284,7 @@ describe("getSFUConfigWithOpenID", () => {
    expect(calls[0][0]).toStrictEqual("https://sfu.example.org/get_token");
    expect(calls[0][1]).toStrictEqual({
      // check if it uses correct delayID!
-      body: '{"room_id":"!example_room_id","slot_id":"m.call#ROOM","member":{"id":"@alice:example.org:DEVICE","claimed_user_id":"@alice:example.org","claimed_device_id":"DEVICE"},"delay_id":"mock_delay_id","delay_timeout":10000,"delay_cs_api_url":"https://matrix.homeserverserver.org"}',
+      body: '{"room_id":"!example_room_id","slot_id":"m.call#ROOM","member":{"id":"@alice:example.org:DEVICE","claimed_user_id":"@alice:example.org","claimed_device_id":"DEVICE"},"delay_id":"mock_delay_id","delay_timeout":3600000,"delay_cs_api_url":"https://matrix.homeserverserver.org"}',
      method: "POST",
      headers: {
        "Content-Type": "application/json",
@@ -19,7 +19,7 @@ import {
 } from "../utils/errors";
 import { doNetworkOperationWithRetry } from "../utils/matrix";
 import { Config } from "../config/Config";
-import { JwtEndpointVersion } from "../state/CallViewModel/localMember/LocalTransport";
+import { MatrixRTCMode } from "../config/ConfigOptions";

 /**
 * Configuration and access tokens provided by the SFU on successful authentication.
@@ -80,11 +80,10 @@ export type OpenIDClientParts = Pick<
 * @param serviceUrl The URL of the livekit SFU service
 * @param roomId The room id used in the jwt request. This is NOT the livekit_alias. The jwt service will provide the alias. It maps matrix room ids <-> Livekit aliases.
 * @param opts Additional options to modify which endpoint with which data will be used to acquire the jwt token.
- * @param opts.forceJwtEndpoint This will use the old jwt endpoint which will create the rtc backend identity based on string concatenation
- * instead of a hash.
+ * @param opts.matrixRTCMode Determines which version of the JWT endpoint to use, which affects whether the
+ * RTC backend identity is based on string concatenation (legacy) or a hash (Matrix 2.0).
 * This function by default uses whatever is possible with the current jwt service installed next to the SFU.
 * For remote connections this does not matter, since we will not publish there we can rely on the newest option.
- * For our own connection we can only use the hashed version if we also send the new matrix2.0 sticky events.
 * @param opts.delayEndpointBaseUrl The URL of the matrix homeserver.
 * @param opts.delayId The delay id used for the jwt service to manage.
 * @param logger optional logger.
@@ -97,7 +96,7 @@ export async function getSFUConfigWithOpenID(
  serviceUrl: string,
  roomId: string,
  opts?: {
-    forceJwtEndpoint?: JwtEndpointVersion;
+    matrixRTCMode?: MatrixRTCMode;
    delayEndpointBaseUrl?: string;
    delayId?: string;
  },
@@ -116,19 +115,18 @@ export async function getSFUConfigWithOpenID(
  logger?.debug("Got openID token", openIdToken);
  let sfuConfig: { url: string; jwt: string } | undefined;

-  const tryBothJwtEndpoints = opts?.forceJwtEndpoint === undefined; // This is for SFUs where we do not publish.
+  const tryBothJwtEndpoints = opts?.matrixRTCMode === undefined; // This is for SFUs where we do not publish.

-  const forceMatrix2Jwt =
-    opts?.forceJwtEndpoint === JwtEndpointVersion.Matrix_2_0;
+  const forceMatrix2Jwt = opts?.matrixRTCMode === MatrixRTCMode.Matrix_2_0;

  // We want to start using the new endpoint (with optional delay delegation)
  // if we can use both or if we are forced to use the new one.
  if (tryBothJwtEndpoints || forceMatrix2Jwt) {
    try {
      logger?.info(
-        `Trying to get JWT with delegation for focus ${serviceUrl}...`,
+        `Trying to get JWT via default endpoint for focus ${serviceUrl}...`,
      );
-      const sfuConfig = await getLiveKitJWTWithDelayDelegation(
+      const sfuConfig = await getLiveKitJWT(
        membership,
        serviceUrl,
        roomId,
@@ -154,7 +152,7 @@ export async function getSFUConfigWithOpenID(
    logger?.info(
      `Trying to get JWT with legacy endpoint for focus ${serviceUrl}...`,
    );
-    sfuConfig = await getLiveKitJWT(
+    sfuConfig = await getLiveKitJWTLegacy(
      membership.deviceId,
      serviceUrl,
      roomId,
@@ -188,7 +186,7 @@ function extractFullConfigFromToken(sfuConfig: {
  };
 }

-async function getLiveKitJWT(
+async function getLiveKitJWTLegacy(
  deviceId: string,
  livekitServiceURL: string,
  matrixRoomId: string,
@@ -204,11 +202,10 @@ async function getLiveKitJWT(
  let bodyDalayParts: IDelayParams = {};
  // Also check for empty string
  if (delayId && delayEndpointBaseUrl) {
-    const delayTimeoutMs =
-      Config.get().matrix_rtc_session?.delayed_leave_event_delay_ms;
    bodyDalayParts = {
      delay_id: delayId,
-      delay_timeout: delayTimeoutMs,
+      delay_timeout:
+        Config.get().matrix_rtc_session.delegated_delayed_leave.delay_ms,
      delay_cs_api_url: delayEndpointBaseUrl,
    };
  }
@@ -264,7 +261,7 @@ class NotSupportedError extends Error {
  }
 }

-export async function getLiveKitJWTWithDelayDelegation(
+export async function getLiveKitJWT(
  membership: CallMembershipIdentityParts,
  livekitServiceURL: string,
  matrixRoomId: string,
@@ -288,11 +285,10 @@ export async function getLiveKitJWTWithDelayDelegation(
  let bodyDalayParts = {};
  // Also check for empty string
  if (delayId && delayEndpointBaseUrl) {
-    const delayTimeoutMs =
-      Config.get().matrix_rtc_session?.delayed_leave_event_delay_ms;
    bodyDalayParts = {
      delay_id: delayId,
-      delay_timeout: delayTimeoutMs,
+      delay_timeout:
+        Config.get().matrix_rtc_session.delegated_delayed_leave.delay_ms,
      delay_cs_api_url: delayEndpointBaseUrl,
    };
  }
@@ -22,7 +22,7 @@ import { TooltipProvider } from "@vector-im/compound-web";
 import { RoomContext, useLocalParticipant } from "@livekit/components-react";
 import userEvent from "@testing-library/user-event";

-import { InCallView } from "./InCallView";
+import { ActiveCall, InCallView } from "./InCallView";
 import {
  mockLivekitRoom,
  mockLocalParticipant,
@@ -33,7 +33,10 @@ import {
  type MockRTCSession,
 } from "../utils/test";
 import { E2eeType } from "../e2ee/e2eeType";
-import { getBasicCallViewModelEnvironment } from "../utils/test-viewmodel";
+import {
+  getBasicCallViewModelEnvironment,
+  getBasicRTCSession,
+} from "../utils/test-viewmodel";
 import {
  type CallViewModel,
  type CallViewModelOptions,
@@ -45,6 +48,8 @@ import { LivekitRoomAudioRenderer } from "../livekit/MatrixAudioRenderer";
 import { MediaDevicesContext } from "../MediaDevicesContext";
 import { type MediaDevices as ECMediaDevices } from "../state/MediaDevices";
 import { AppBar } from "../AppBar";
+import { type MatrixInfo } from "./VideoPreview";
+import { ProcessorProvider } from "../livekit/TrackProcessorContext";
 import { initializeWidget } from "../widget";

 initializeWidget();
@@ -78,6 +83,17 @@ const remoteParticipant = mockRemoteParticipant({
  identity: "@alice:example.org:AAAAAA",
 });

+const matrixInfo = {
+  userId: "",
+  displayName: "",
+  avatarUrl: "",
+  roomId: "",
+  roomName: "",
+  roomAlias: null,
+  roomAvatar: null,
+  e2eeSystem: { kind: E2eeType.NONE },
+} satisfies MatrixInfo;
+
 let useRoomEncryptionSystemMock: MockedFunction<typeof useRoomEncryptionSystem>;

 beforeEach(() => {
@@ -122,12 +138,13 @@ function createInCallView(args: CreateInCallViewArgs = {}): RenderResult & {
      remoteParticipants$: of([remoteParticipant]),
    },
  );
-  const { vm, footerVm, rtcSession } = getBasicCallViewModelEnvironment(
-    [local, alice],
-    undefined,
-    mediaDevices,
-    args.callViewModelOptions,
-  );
+  const { vm, footerVm, developerSettingsVm, rtcSession } =
+    getBasicCallViewModelEnvironment(
+      [local, alice],
+      undefined,
+      mediaDevices,
+      args.callViewModelOptions,
+    );

  rtcSession.joined = true;
  const room = rtcSession.room;
@@ -140,18 +157,8 @@ function createInCallView(args: CreateInCallViewArgs = {}): RenderResult & {
      muteStates={muteState}
      vm={vm}
      footerVm={footerVm}
-      matrixInfo={{
-        userId: "",
-        displayName: "",
-        avatarUrl: "",
-        roomId: "",
-        roomName: "",
-        roomAlias: null,
-        roomAvatar: null,
-        e2eeSystem: {
-          kind: E2eeType.NONE,
-        },
-      }}
+      developerSettingsVm={developerSettingsVm}
+      matrixInfo={matrixInfo}
      matrixRoom={room}
      onShareClick={null}
    />
@@ -226,3 +233,34 @@ describe("InCallView", () => {
    });
  });
 });
+
+describe("ActiveCall", () => {
+  it("creates the view models and renders the call", async () => {
+    const mediaDevices = mockMediaDevices({});
+    const { rtcSession, matrixRoom } = getBasicRTCSession([local, alice]);
+    const { findByTestId } = render(
+      <BrowserRouter>
+        <MediaDevicesContext value={mediaDevices}>
+          <ProcessorProvider>
+            <TooltipProvider>
+              <RoomContext value={mockLivekitRoom({ localParticipant })}>
+                <ActiveCall
+                  client={matrixRoom.client}
+                  rtcSession={rtcSession.asMockedSession()}
+                  matrixRoom={matrixRoom}
+                  muteStates={mockMuteStates()}
+                  matrixInfo={matrixInfo}
+                  onShareClick={null}
+                  e2eeSystem={{ kind: E2eeType.NONE }}
+                  onLeft={(): void => {}}
+                />
+              </RoomContext>
+            </TooltipProvider>
+          </ProcessorProvider>
+        </MediaDevicesContext>
+      </BrowserRouter>,
+    );
+    // Rendering at all proves ActiveCall created all of its view models
+    expect(await findByTestId("incall_leave")).toBeVisible();
+  });
+});
@@ -83,6 +83,8 @@ import { ObservableScope } from "../state/ObservableScope.ts";
 import { CallFooter, type FooterSnapshot } from "../components/CallFooter.tsx";
 import { SettingsIconButton } from "../button/Button.tsx";
 import { createCallFooterViewModel } from "../components/CallFooterViewModel.tsx";
+import { createDeveloperSettingsTabViewModel } from "../settings/DeveloperSettingsTabViewModel.ts";
+import { type DeveloperSettingsSnapshot } from "../settings/DeveloperSettingsTab.tsx";
 import { type ViewModel } from "../state/ViewModel.ts";
 import { RingingStatus } from "../tile/RingingStatus.tsx";
 import { RingingAudioRenderer } from "./RingingAudioRenderer.tsx";
@@ -96,7 +98,7 @@ declare module "react" {

 export interface ActiveCallProps extends Omit<
  InCallViewProps,
-  "vm" | "livekitRoom" | "connState" | "footerVm"
+  "vm" | "livekitRoom" | "connState" | "footerVm" | "developerSettingsVm"
 > {
  e2eeSystem: EncryptionSystem;
  // TODO refactor those reasons into an enum
@@ -110,6 +112,9 @@ export const ActiveCall: FC<ActiveCallProps> = (props) => {
  const [footerVm, setFooterVm] = useState<ViewModel<FooterSnapshot> | null>(
    null,
  );
+  const [developerSettingsVm, setDeveloperSettingsVm] =
+    useState<ViewModel<DeveloperSettingsSnapshot> | null>(null);
+
  const urlParams = useUrlParams();
  const mediaDevices = useMediaDevices();
  const trackProcessorState$ = useTrackProcessorObservable$();
@@ -130,7 +135,9 @@ export const ActiveCall: FC<ActiveCallProps> = (props) => {
        encryptionSystem: props.e2eeSystem,
        autoLeaveWhenOthersLeft,
        waitForCallPickup: waitForCallPickup && sendNotificationType === "ring",
-        matrixRTCMode$: matrixRTCModeSetting.value$,
+        // We merely sample the current mode here, so the user would need to
+        // manually rejoin to switch to a different one.
+        matrixRTCMode: matrixRTCModeSetting.value$.value,
      },
      reactionsReader.raisedHands$,
      reactionsReader.reactions$,
@@ -169,6 +176,7 @@ export const ActiveCall: FC<ActiveCallProps> = (props) => {
      `${props.client.getUserId()}:${props.client.getDeviceId()}`,
    );
    setFooterVm(footerVm);
+    setDeveloperSettingsVm(createDeveloperSettingsTabViewModel(scope, vm));

    return (): void => {
      scope.end();
@@ -188,10 +196,16 @@ export const ActiveCall: FC<ActiveCallProps> = (props) => {

  if (vm === null) return null;
  if (footerVm === null) return null;
+  if (developerSettingsVm === null) return null;

  return (
    <ReactionsSenderProvider vm={vm} rtcSession={props.rtcSession}>
-      <InCallView {...props} vm={vm} footerVm={footerVm} />
+      <InCallView
+        {...props}
+        vm={vm}
+        footerVm={footerVm}
+        developerSettingsVm={developerSettingsVm}
+      />
    </ReactionsSenderProvider>
  );
 };
@@ -200,6 +214,7 @@ export interface InCallViewProps {
  client: MatrixClient;
  vm: CallViewModel;
  footerVm: ViewModel<FooterSnapshot>;
+  developerSettingsVm: ViewModel<DeveloperSettingsSnapshot>;
  matrixInfo: MatrixInfo;
  rtcSession: MatrixRTCSession;
  matrixRoom: MatrixRoom;
@@ -211,6 +226,7 @@ export const InCallView: FC<InCallViewProps> = ({
  client,
  vm,
  footerVm,
+  developerSettingsVm,
  matrixInfo,
  matrixRoom,
  muteStates,
@@ -256,11 +272,13 @@ export const InCallView: FC<InCallViewProps> = ({
  const audioParticipants = useBehavior(vm.livekitRoomItems$);
  const participantCount = useBehavior(vm.participantCount$);
  const reconnecting = useBehavior(vm.reconnecting$);
+  const screenShareError = useBehavior(vm.screenShareError$);
  const layout = useBehavior(vm.layout$);
  const edgeToEdge = useBehavior(vm.edgeToEdge$);
  const overflowing = useBehavior(vm.overflowing$);
  const showNameTags = useBehavior(vm.showNameTags$);
  const showHeader = useBehavior(vm.showHeader$);
+  const showModals = useBehavior(vm.showModals$);
  const settingsOpen = useBehavior(vm.settingsOpen$);
  const setSettingsOpen = useBehavior(vm.setSettingsOpen$);
  const earpieceMode = useBehavior(vm.earpieceMode$);
@@ -384,6 +402,21 @@ export const InCallView: FC<InCallViewProps> = ({
      );
  }

+  const onDismissScreenShareToast = useCallback(
+    () => vm.dismissScreenShareError(),
+    [vm],
+  );
+  const screenShareToast = (
+    <Toast
+      onDismiss={onDismissScreenShareToast}
+      open={screenShareError !== null}
+      autoDismiss={5000}
+      modal={false}
+    >
+      {t("error.screen_share_failed")}
+    </Toast>
+  );
+
  // The reconnecting toast cannot be dismissed
  const onDismissReconnectingToast = useCallback(() => {}, []);
  // We need to use a non-modal toast to avoid trapping focus within the toast.
@@ -619,10 +652,11 @@ export const InCallView: FC<InCallViewProps> = ({
      <ReactionsAudioRenderer vm={vm} muted={muteAllAudio} />
      <RingingAudioRenderer vm={ringingVm} muted={muteAllAudio} />
      {reconnectingToast}
+      {screenShareToast}
      {earpieceOverlay}
      <ReactionsOverlay vm={vm} />
      {footer}
-      {layout.type !== "pip" && (
+      {showModals && (
        <>
          <RageshakeRequestModal {...rageshakeRequestModalProps} />
          <SettingsModal
@@ -632,6 +666,7 @@ export const InCallView: FC<InCallViewProps> = ({
            onDismiss={(): void => setSettingsOpen(false)}
            tab={settingsTab}
            onTabChange={setSettingsTab}
+            developerSettingsVm={developerSettingsVm}
            livekitRooms={allConnections
              .getConnections()
              .map((connectionItem) => ({
@@ -22,6 +22,9 @@ Please see LICENSE in the repository root for full details.
  height: 100%;
  object-fit: cover;
  background-color: var(--video-tile-background);
+  /* In FF if you add a transform: scale/translate/matrix filter on an element,
+  it'll ignore the parents' border-radius, so force back the radius to avoid UI glitch*/
+  border-radius: inherit;
 }

 video.mirror {
@@ -171,7 +171,7 @@ exports[`InCallView > rendering > renders 1`] = `
        class="_settingsLogoContainer_20b7b4"
      >
        <button
-          aria-labelledby="_r_8_"
+          aria-labelledby="_r_b_"
          class="_icon-button_1215g_8 _settingsOnlyShowWide_20b7b4"
          data-kind="secondary"
          data-testid="settings-bottom-left"
@@ -306,7 +306,7 @@ exports[`InCallView > rendering > renders 1`] = `
        class="_buttons_20b7b4"
      >
        <button
-          aria-labelledby="_r_d_"
+          aria-labelledby="_r_g_"
          class="_button_1nw83_8 _settingsOnlyShowNarrow_20b7b4 _has-icon_1nw83_60 _icon-only_1nw83_53"
          data-kind="secondary"
          data-size="lg"
@@ -331,7 +331,7 @@ exports[`InCallView > rendering > renders 1`] = `
          aria-busy="false"
          aria-checked="false"
          aria-disabled="true"
-          aria-labelledby="_r_i_"
+          aria-labelledby="_r_l_"
          class="_button_1nw83_8 _has-icon_1nw83_60 _icon-only_1nw83_53"
          data-kind="primary"
          data-size="lg"
@@ -356,7 +356,7 @@ exports[`InCallView > rendering > renders 1`] = `
          aria-busy="false"
          aria-checked="false"
          aria-disabled="true"
-          aria-labelledby="_r_n_"
+          aria-labelledby="_r_q_"
          class="_button_1nw83_8 _has-icon_1nw83_60 _icon-only_1nw83_53"
          data-kind="primary"
          data-size="lg"
@@ -381,7 +381,7 @@ exports[`InCallView > rendering > renders 1`] = `
          aria-disabled="false"
          aria-expanded="false"
          aria-haspopup="true"
-          aria-labelledby="_r_s_"
+          aria-labelledby="_r_v_"
          class="_button_1nw83_8 _raiseHand_20b7b4 _has-icon_1nw83_60 _icon-only_1nw83_53"
          data-kind="secondary"
          data-size="lg"
@@ -404,7 +404,7 @@ exports[`InCallView > rendering > renders 1`] = `
          </svg>
        </button>
        <button
-          aria-labelledby="_r_14_"
+          aria-labelledby="_r_17_"
          class="_button_1nw83_8 _has-icon_1nw83_60 _icon-only_1nw83_53 _destructive_1nw83_110"
          data-kind="primary"
          data-size="lg"
@@ -432,8 +432,8 @@ exports[`InCallView > rendering > renders 1`] = `
        data-size="lg"
      >
        <input
-          aria-labelledby="_r_1a_"
-          name="_r_19_"
+          aria-labelledby="_r_1d_"
+          name="_r_1c_"
          type="radio"
          value="spotlight"
        />
@@ -452,9 +452,9 @@ exports[`InCallView > rendering > renders 1`] = `
          />
        </svg>
        <input
-          aria-labelledby="_r_1f_"
+          aria-labelledby="_r_1i_"
          checked=""
-          name="_r_19_"
+          name="_r_1c_"
          type="radio"
          value="grid"
        />
@@ -12,7 +12,12 @@ import { TooltipProvider } from "@vector-im/compound-web";

 import type { MatrixClient } from "matrix-js-sdk";
 import type { Room as LivekitRoom } from "livekit-client";
-import { DeveloperSettingsTab } from "./DeveloperSettingsTab";
+import {
+  DeveloperSettingsTab,
+  type DeveloperSettingsSnapshot,
+} from "./DeveloperSettingsTab";
+import { outOfCallDeveloperSettingsTabViewModel } from "./DeveloperSettingsTabViewModel";
+import { createStaticViewModel } from "../state/ViewModel";
 import { getSFUConfigWithOpenID } from "../livekit/openIDSFU";
 import {
  customLivekitUrl as customLivekitUrlSetting,
@@ -107,6 +112,7 @@ describe("DeveloperSettingsTab", () => {
        roomId={"#room:example.org"}
        livekitRooms={livekitRooms}
        env={{ MY_MOCK_ENV: 10, ENV: "test" } as unknown as ImportMetaEnv}
+        vm={outOfCallDeveloperSettingsTabViewModel}
      />,
    );

@@ -136,6 +142,7 @@ describe("DeveloperSettingsTab", () => {
          <DeveloperSettingsTab
            client={client}
            env={{} as unknown as ImportMetaEnv}
+            vm={outOfCallDeveloperSettingsTabViewModel}
          />
        </TooltipProvider>,
      );
@@ -159,6 +166,7 @@ describe("DeveloperSettingsTab", () => {
            client={client}
            roomId="#testRoom"
            env={{} as unknown as ImportMetaEnv}
+            vm={outOfCallDeveloperSettingsTabViewModel}
          />
        </TooltipProvider>,
      );
@@ -181,6 +189,7 @@ describe("DeveloperSettingsTab", () => {
            client={client}
            roomId="#testRoom"
            env={{} as unknown as ImportMetaEnv}
+            vm={outOfCallDeveloperSettingsTabViewModel}
          />
        </TooltipProvider>,
      );
@@ -206,6 +215,7 @@ describe("DeveloperSettingsTab", () => {
            client={client}
            roomId="#testRoom"
            env={{} as unknown as ImportMetaEnv}
+            vm={outOfCallDeveloperSettingsTabViewModel}
          />
        </TooltipProvider>,
      );
@@ -236,6 +246,7 @@ describe("DeveloperSettingsTab", () => {
            client={client}
            roomId="#testRoom"
            env={{} as unknown as ImportMetaEnv}
+            vm={outOfCallDeveloperSettingsTabViewModel}
          />
        </TooltipProvider>,
      );
@@ -273,6 +284,7 @@ describe("DeveloperSettingsTab", () => {
          <DeveloperSettingsTab
            client={client}
            env={{} as unknown as ImportMetaEnv}
+            vm={outOfCallDeveloperSettingsTabViewModel}
          />
        </TooltipProvider>,
      );
@@ -305,6 +317,7 @@ describe("DeveloperSettingsTab", () => {
          <DeveloperSettingsTab
            client={client}
            env={{} as unknown as ImportMetaEnv}
+            vm={outOfCallDeveloperSettingsTabViewModel}
          />
        </TooltipProvider>,
      );
@@ -317,19 +330,15 @@ describe("DeveloperSettingsTab", () => {

  describe("matrix rtc mode", () => {
    afterEach(() => {
-      matrixRTCModeSetting.setValue(MatrixRTCMode.Legacy);
+      matrixRTCModeSetting.setValue(MatrixRTCMode.Compatibility);
      vi.restoreAllMocks();
    });

    function getModeRadios(): {
-      legacy: HTMLInputElement;
      compatibility: HTMLInputElement;
      matrix20: HTMLInputElement;
    } {
      return {
-        legacy: screen.getByDisplayValue(
-          MatrixRTCMode.Legacy,
-        ) as HTMLInputElement,
        compatibility: screen.getByDisplayValue(
          MatrixRTCMode.Compatibility,
        ) as HTMLInputElement,
@@ -349,6 +358,7 @@ describe("DeveloperSettingsTab", () => {
          <DeveloperSettingsTab
            client={client}
            env={{} as unknown as ImportMetaEnv}
+            vm={outOfCallDeveloperSettingsTabViewModel}
          />
        </TooltipProvider>,
      );
@@ -359,27 +369,21 @@ describe("DeveloperSettingsTab", () => {

      const radios = getModeRadios();
      expect(radios.compatibility).toBeChecked();
-      expect(radios.legacy).not.toBeChecked();
      expect(radios.matrix20).not.toBeChecked();
      // None are disabled by config; only Matrix_2_0 may be disabled by sticky-events support.
-      expect(radios.legacy).not.toBeDisabled();
      expect(radios.compatibility).not.toBeDisabled();
    });

-    it.each([
-      MatrixRTCMode.Legacy,
-      MatrixRTCMode.Compatibility,
-      MatrixRTCMode.Matrix_2_0,
-    ])(
+    it.each([MatrixRTCMode.Compatibility, MatrixRTCMode.Matrix_2_0])(
      "disables all radios and shows the config value (%s) as checked when matrix_rtc_mode is set",
      async (configMode) => {
        mockConfig({ matrix_rtc_mode: configMode });
        // Local setting is intentionally different from the config value to
        // prove config wins.
        matrixRTCModeSetting.setValue(
-          configMode === MatrixRTCMode.Legacy
-            ? MatrixRTCMode.Compatibility
-            : MatrixRTCMode.Legacy,
+          configMode === MatrixRTCMode.Compatibility
+            ? MatrixRTCMode.Matrix_2_0
+            : MatrixRTCMode.Compatibility,
        );
        const client = createMockMatrixClient();

@@ -388,6 +392,7 @@ describe("DeveloperSettingsTab", () => {
            <DeveloperSettingsTab
              client={client}
              env={{} as unknown as ImportMetaEnv}
+              vm={outOfCallDeveloperSettingsTabViewModel}
            />
          </TooltipProvider>,
        );
@@ -397,13 +402,11 @@ describe("DeveloperSettingsTab", () => {
        );

        const radios = getModeRadios();
-        expect(radios.legacy).toBeDisabled();
        expect(radios.compatibility).toBeDisabled();
        expect(radios.matrix20).toBeDisabled();

        const checkedValue = (
          {
-            [MatrixRTCMode.Legacy]: radios.legacy,
            [MatrixRTCMode.Compatibility]: radios.compatibility,
            [MatrixRTCMode.Matrix_2_0]: radios.matrix20,
          } as const
@@ -412,4 +415,74 @@ describe("DeveloperSettingsTab", () => {
      },
    );
  });
+
+  describe("KeyRotationStatus", () => {
+    it("displays active status when key rotation is not suppressed", async () => {
+      const client = createMockMatrixClient();
+      const vm = createStaticViewModel<DeveloperSettingsSnapshot>({
+        keyRotation: { suppressed: false, participantCount: 5 },
+      });
+
+      render(
+        <TooltipProvider>
+          <DeveloperSettingsTab
+            client={client}
+            env={{} as unknown as ImportMetaEnv}
+            vm={vm}
+          />
+        </TooltipProvider>,
+      );
+
+      await waitFor(() =>
+        expect(
+          screen.getByText(/Media key rotation: active \(5 participants\)/),
+        ).toBeInTheDocument(),
+      );
+    });
+
+    it("displays suppressed status when key rotation is suppressed", async () => {
+      const client = createMockMatrixClient();
+      const vm = createStaticViewModel<DeveloperSettingsSnapshot>({
+        keyRotation: { suppressed: true, participantCount: 50 },
+      });
+
+      render(
+        <TooltipProvider>
+          <DeveloperSettingsTab
+            client={client}
+            env={{} as unknown as ImportMetaEnv}
+            vm={vm}
+          />
+        </TooltipProvider>,
+      );
+
+      await waitFor(() =>
+        expect(
+          screen.getByText(
+            /Media key rotation: suppressed, participant limit reached \(50 participants\)/,
+          ),
+        ).toBeInTheDocument(),
+      );
+    });
+
+    it("does not render KeyRotationStatus when not in a call", async () => {
+      const client = createMockMatrixClient();
+
+      render(
+        <TooltipProvider>
+          <DeveloperSettingsTab
+            client={client}
+            env={{} as unknown as ImportMetaEnv}
+            vm={outOfCallDeveloperSettingsTabViewModel}
+          />
+        </TooltipProvider>,
+      );
+
+      await waitFor(() =>
+        expect(
+          screen.queryByText(/Media key rotation:/),
+        ).not.toBeInTheDocument(),
+      );
+    });
+  });
 });
@@ -68,6 +68,39 @@ import settingsStyles from "./SettingsModal.module.css";
 import { Slider } from "../Slider";
 import { useUrlParams } from "../UrlParams";
 import { getSFUConfigWithOpenID } from "../livekit/openIDSFU";
+import { useBehavior } from "../useBehavior";
+import { type ViewModel } from "../state/ViewModel.ts";
+
+/**
+ * The state of MatrixRTC's media key rotation.
+ */
+export interface KeyRotationInfo {
+  /** Whether the call is large enough that MatrixRTC has stopped rotating the media key. */
+  suppressed: boolean;
+  participantCount: number;
+}
+
+/**
+ * The Snapshot combines all fields the developer settings tab needs from the
+ * surrounding call. Everything else in this tab is read from the settings store
+ * or the environment directly.
+ */
+export interface DeveloperSettingsSnapshot {
+  /** The media key rotation state, or `null` when we are not in a call. */
+  keyRotation: KeyRotationInfo | null;
+}
+
+/**
+ * Shows whether the call is large enough that MatrixRTC has stopped rotating the media key.
+ */
+const KeyRotationStatus: FC<{ info: KeyRotationInfo }> = ({ info }) => (
+  <p>
+    Media key rotation:{" "}
+    {info.suppressed
+      ? `suppressed, participant limit reached (${info.participantCount} participants)`
+      : `active (${info.participantCount} participants)`}
+  </p>
+);

 interface Props {
  client: MatrixClient;
@@ -79,6 +112,7 @@ interface Props {
    livekitAlias?: string;
  }[];
  env: ImportMetaEnv;
+  vm: ViewModel<DeveloperSettingsSnapshot>;
 }

 export const DeveloperSettingsTab: FC<Props> = ({
@@ -86,8 +120,10 @@ export const DeveloperSettingsTab: FC<Props> = ({
  livekitRooms,
  roomId,
  env,
+  vm,
 }) => {
  const { t } = useTranslation();
+  const keyRotation = useBehavior(vm.keyRotation$);
  const [duplicateTiles, setDuplicateTiles] = useSetting(duplicateTilesSetting);
  const [debugTileLayout, setDebugTileLayout] = useSetting(
    debugTileLayoutSetting,
@@ -364,6 +400,7 @@ export const DeveloperSettingsTab: FC<Props> = ({
          id: client.getDeviceId() || "unknown",
        })}
      </p>
+      {keyRotation !== null && <KeyRotationStatus info={keyRotation} />}
      <Separator />
      <FieldRow>
        <InputField
@@ -520,22 +557,6 @@ export const DeveloperSettingsTab: FC<Props> = ({
      </Heading>
      {matrixRTCModeForced && <p>Your deployment overrides the mode.</p>}
      <Form>
-        <InlineField
-          name={matrixRTCModeRadioGroup}
-          control={
-            <RadioControl
-              checked={effectiveMatrixRTCMode === MatrixRTCMode.Legacy}
-              value={MatrixRTCMode.Legacy}
-              disabled={matrixRTCModeForced}
-              onChange={onMatrixRTCModeChange}
-            />
-          }
-        >
-          <Label>{t("developer_mode.matrixRTCMode.Legacy.label")}</Label>
-          <HelpMessage>
-            {t("developer_mode.matrixRTCMode.Legacy.description")}
-          </HelpMessage>
-        </InlineField>
        <InlineField
          name={matrixRTCModeRadioGroup}
          control={
@@ -0,0 +1,48 @@
+/*
+Copyright 2026 Element Creations Ltd.
+
+SPDX-License-Identifier: AGPL-3.0-only OR LicenseRef-Element-Commercial
+Please see LICENSE in the repository root for full details.
+*/
+
+import { describe, expect, it } from "vitest";
+import { BehaviorSubject } from "rxjs";
+
+import { testScope } from "../utils/test";
+import { type CallViewModel } from "../state/CallViewModel/CallViewModel";
+import {
+  createDeveloperSettingsTabViewModel,
+  outOfCallDeveloperSettingsTabViewModel,
+} from "./DeveloperSettingsTabViewModel";
+
+describe("createDeveloperSettingsTabViewModel", () => {
+  it("projects the key rotation state of the call", () => {
+    const keyRotationSuppressed$ = new BehaviorSubject(false);
+    const participantCount$ = new BehaviorSubject(5);
+    const vm = createDeveloperSettingsTabViewModel(testScope(), {
+      keyRotationSuppressed$,
+      participantCount$,
+    } as unknown as CallViewModel);
+
+    expect(vm.keyRotation$.value).toEqual({
+      suppressed: false,
+      participantCount: 5,
+    });
+
+    participantCount$.next(50);
+    keyRotationSuppressed$.next(true);
+
+    expect(vm.keyRotation$.value).toEqual({
+      suppressed: true,
+      participantCount: 50,
+    });
+  });
+});
+
+describe("outOfCallDeveloperSettingsTabViewModel", () => {
+  it("has no key rotation state", () => {
+    expect(outOfCallDeveloperSettingsTabViewModel.keyRotation$.value).toBe(
+      null,
+    );
+  });
+});
@@ -0,0 +1,43 @@
+/*
+Copyright 2026 Element Creations Ltd.
+
+SPDX-License-Identifier: AGPL-3.0-only OR LicenseRef-Element-Commercial
+Please see LICENSE in the repository root for full details.
+*/
+
+import { combineLatest } from "rxjs";
+
+import { type CallViewModel } from "../state/CallViewModel/CallViewModel.ts";
+import { type ObservableScope } from "../state/ObservableScope.ts";
+import { createStaticViewModel, type ViewModel } from "../state/ViewModel.ts";
+import { type DeveloperSettingsSnapshot } from "./DeveloperSettingsTab.tsx";
+
+/**
+ * Creates the ViewModel for the developer settings tab while in a call.
+ *
+ * Only the call state the tab actually renders is projected here, so that the
+ * tab does not need to know about the CallViewModel.
+ *
+ * @param scope - ObservableScope that bounds the lifetime of derived behaviors.
+ * @param callModel - The root CallViewModel; provides the key rotation state.
+ */
+export function createDeveloperSettingsTabViewModel(
+  scope: ObservableScope,
+  callModel: CallViewModel,
+): ViewModel<DeveloperSettingsSnapshot> {
+  return {
+    keyRotation$: scope.behavior(
+      combineLatest(
+        [callModel.keyRotationSuppressed$, callModel.participantCount$],
+        (suppressed, participantCount) => ({ suppressed, participantCount }),
+      ),
+    ),
+  };
+}
+
+/**
+ * The ViewModel for the developer settings tab outside of a call (lobby, user
+ * menu), where no call state exists. All call specific fields are `null`.
+ */
+export const outOfCallDeveloperSettingsTabViewModel: ViewModel<DeveloperSettingsSnapshot> =
+  createStaticViewModel<DeveloperSettingsSnapshot>({ keyRotation: null });
@@ -29,11 +29,16 @@ import { PreferencesSettingsTab } from "./PreferencesSettingsTab";
 import { Slider } from "../Slider";
 import { DeviceSelection } from "./DeviceSelection";
 import { useTrackProcessor } from "../livekit/TrackProcessorContext";
-import { DeveloperSettingsTab } from "./DeveloperSettingsTab";
+import {
+  DeveloperSettingsTab,
+  type DeveloperSettingsSnapshot,
+} from "./DeveloperSettingsTab";
 import { FieldRow, InputField } from "../input/Input";
 import { useSubmitRageshake } from "./submit-rageshake";
 import { useUrlParams } from "../UrlParams";
 import { useBehavior } from "../useBehavior";
+import { type ViewModel } from "../state/ViewModel.ts";
+import { outOfCallDeveloperSettingsTabViewModel } from "./DeveloperSettingsTabViewModel";

 type SettingsTab =
  | "audio"
@@ -56,6 +61,8 @@ interface Props {
    url: string;
    isLocal?: boolean;
  }[];
+  /** Only available while in a call. Used by the developer tab. */
+  developerSettingsVm?: ViewModel<DeveloperSettingsSnapshot>;
 }

 export const defaultSettingsTab: SettingsTab = "audio";
@@ -68,6 +75,7 @@ export const SettingsModal: FC<Props> = ({
  client,
  roomId,
  livekitRooms,
+  developerSettingsVm,
 }) => {
  const { t } = useTranslation();

@@ -220,6 +228,7 @@ export const SettingsModal: FC<Props> = ({
        client={client}
        livekitRooms={livekitRooms}
        roomId={roomId}
+        vm={developerSettingsVm ?? outOfCallDeveloperSettingsTabViewModel}
      />
    ),
  };
@@ -285,50 +285,10 @@ exports[`DeveloperSettingsTab > renders and matches snapshot 1`] = `
          class="_container_1ug7n_10"
        >
          <input
-            aria-describedby="radix-_r_a_ radix-_r_c_ radix-_r_e_"
-            class="_input_1ug7n_18"
-            id="radix-_r_9_"
-            name="_r_0_"
-            title=""
-            type="radio"
-            value="legacy"
-          />
-          <div
-            class="_ui_1ug7n_19"
-          />
-        </div>
-      </div>
-      <div
-        class="_inline-field-body_1o4d9_39"
-      >
-        <label
-          class="_label_1o4d9_60"
-          for="radix-_r_9_"
-        >
-          Legacy: state events & oldest membership SFU
-        </label>
-        <span
-          class="_message_1o4d9_86 _help-message_1o4d9_92"
-          id="radix-_r_a_"
-        >
-          Compatible with old versions of EC that do not support multi SFU
-        </span>
-      </div>
-    </div>
-    <div
-      class="_inline-field_1o4d9_33"
-    >
-      <div
-        class="_inline-field-control_1o4d9_45"
-      >
-        <div
-          class="_container_1ug7n_10"
-        >
-          <input
-            aria-describedby="radix-_r_a_ radix-_r_c_ radix-_r_e_"
+            aria-describedby="radix-_r_a_ radix-_r_c_"
            checked=""
            class="_input_1ug7n_18"
-            id="radix-_r_b_"
+            id="radix-_r_9_"
            name="_r_0_"
            title=""
            type="radio"
@@ -344,13 +304,13 @@ exports[`DeveloperSettingsTab > renders and matches snapshot 1`] = `
      >
        <label
          class="_label_1o4d9_60"
-          for="radix-_r_b_"
+          for="radix-_r_9_"
        >
          Compatibility: state events & multi SFU
        </label>
        <span
          class="_message_1o4d9_86 _help-message_1o4d9_92"
-          id="radix-_r_c_"
+          id="radix-_r_a_"
        >
          Compatible with homeservers that do not support sticky events (but all other EC clients are v0.17.0 or later)
        </span>
@@ -366,9 +326,9 @@ exports[`DeveloperSettingsTab > renders and matches snapshot 1`] = `
          class="_container_1ug7n_10"
        >
          <input
-            aria-describedby="radix-_r_a_ radix-_r_c_ radix-_r_e_"
+            aria-describedby="radix-_r_a_ radix-_r_c_"
            class="_input_1ug7n_18"
-            id="radix-_r_d_"
+            id="radix-_r_b_"
            name="_r_0_"
            title=""
            type="radio"
@@ -384,13 +344,13 @@ exports[`DeveloperSettingsTab > renders and matches snapshot 1`] = `
      >
        <label
          class="_label_1o4d9_60"
-          for="radix-_r_d_"
+          for="radix-_r_b_"
        >
          Matrix 2.0: sticky events & multi SFU
        </label>
        <span
          class="_message_1o4d9_86 _help-message_1o4d9_92"
-          id="radix-_r_e_"
+          id="radix-_r_c_"
        >
          Compatible only with homservers supporting sticky events and all EC clients v0.17.0 or later
        </span>
@@ -491,7 +451,7 @@ exports[`DeveloperSettingsTab > renders and matches snapshot 1`] = `
      class="_field_1bd8c0 _checkboxField_1bd8c0"
    >
      <input
-        aria-describedby="_r_k_"
+        aria-describedby="_r_i_"
        id="cameraToggle"
        type="checkbox"
      />
@@ -521,7 +481,7 @@ exports[`DeveloperSettingsTab > renders and matches snapshot 1`] = `
      </label>
      <p
        class="_description_1bd8c0"
-        id="_r_k_"
+        id="_r_i_"
      >
        Configure resolution, framerate, bitrate, and codec for camera video. Changes apply on next call join.
      </p>
@@ -543,7 +503,7 @@ exports[`DeveloperSettingsTab > renders and matches snapshot 1`] = `
      class="_field_1bd8c0 _checkboxField_1bd8c0"
    >
      <input
-        aria-describedby="_r_l_"
+        aria-describedby="_r_j_"
        id="screenShareToggle"
        type="checkbox"
      />
@@ -573,7 +533,7 @@ exports[`DeveloperSettingsTab > renders and matches snapshot 1`] = `
      </label>
      <p
        class="_description_1bd8c0"
-        id="_r_l_"
+        id="_r_j_"
      >
        Configure resolution, framerate, bitrate, and codec for screen sharing
      </p>
@@ -598,7 +558,7 @@ exports[`DeveloperSettingsTab > renders and matches snapshot 1`] = `
      class="_field_1bd8c0 _checkboxField_1bd8c0"
    >
      <input
-        aria-describedby="_r_m_"
+        aria-describedby="_r_k_"
        checked=""
        id="echoCancellation"
        type="checkbox"
@@ -636,7 +596,7 @@ exports[`DeveloperSettingsTab > renders and matches snapshot 1`] = `
      class="_field_1bd8c0 _checkboxField_1bd8c0"
    >
      <input
-        aria-describedby="_r_n_"
+        aria-describedby="_r_l_"
        checked=""
        id="noiseSuppression"
        type="checkbox"
@@ -674,7 +634,7 @@ exports[`DeveloperSettingsTab > renders and matches snapshot 1`] = `
      class="_field_1bd8c0 _checkboxField_1bd8c0"
    >
      <input
-        aria-describedby="_r_o_"
+        aria-describedby="_r_m_"
        checked=""
        id="autoGainControl"
        type="checkbox"
@@ -0,0 +1,52 @@
+/*
+Copyright 2026 Element Creations Ltd.
+
+SPDX-License-Identifier: AGPL-3.0-only OR LicenseRef-Element-Commercial
+Please see LICENSE in the repository root for full details.
+*/
+
+import { afterEach, expect, it, vi } from "vitest";
+
+import { init as initRageshake } from "./rageshake";
+
+afterEach(() => {
+  vi.useRealTimers();
+  vi.unstubAllGlobals();
+});
+
+it("flushes logs to IndexedDB periodically without an explicit flush", async () => {
+  vi.useFakeTimers();
+  const add = vi.fn();
+  const txn = {
+    oncomplete: undefined as (() => void) | undefined,
+    onerror: undefined,
+    objectStore: (name: string) =>
+      name === "logs"
+        ? {
+            add: (entry: unknown): void => {
+              add(entry);
+              queueMicrotask(() => txn.oncomplete?.());
+            },
+          }
+        : { put: vi.fn() },
+  };
+  const open = (): unknown => {
+    const req = {
+      result: { transaction: () => txn },
+      onsuccess: undefined as (() => void) | undefined,
+    };
+    queueMicrotask(() => req.onsuccess?.());
+    return req;
+  };
+  vi.stubGlobal("indexedDB", { open });
+
+  await initRageshake();
+  global.mx_rage_logger.log(1, "test", "hello from the buffer");
+  expect(add).not.toHaveBeenCalled();
+
+  await vi.advanceTimersByTimeAsync(2000);
+  expect(add).toHaveBeenCalledOnce();
+  expect(add.mock.calls[0][0]).toMatchObject({
+    lines: expect.stringContaining("hello from the buffer"),
+  });
+});
@@ -204,10 +204,13 @@ class IndexedDBLogStore {
  // Throttled function to flush logs. We use throttle rather
  // than debounce as we want logs to be written regularly, otherwise
  // if there's a constant stream of logging, we'd never write anything.
-  private throttledFlush = throttle(() => this.flush, MAX_FLUSH_INTERVAL_MS, {
-    leading: false,
-    trailing: true,
-  });
+  private throttledFlush = throttle(
+    () => {
+      this.flush().catch((e) => logger.error("Failed to flush logs", e));
+    },
+    MAX_FLUSH_INTERVAL_MS,
+    { leading: false, trailing: true },
+  );

  /**
   * Flush logs to disk.
@@ -258,11 +258,9 @@ function mockRingEvent(
  } as unknown as { event_id: string } & IRTCNotificationContent;
 }

-describe.each([
-  [MatrixRTCMode.Legacy],
-  [MatrixRTCMode.Compatibility],
-  [MatrixRTCMode.Matrix_2_0],
-])("CallViewModel (%s mode)", (mode) => {
+const modes = [[MatrixRTCMode.Compatibility], [MatrixRTCMode.Matrix_2_0]];
+
+describe.each(modes)("CallViewModel (%s mode)", (mode) => {
  const withCallViewModel = withCallViewModelInMode(mode);

  test("participants are retained during a focus switch", () => {
@@ -54,7 +54,6 @@ import { type IMembershipManager } from "matrix-js-sdk/lib/matrixrtc/IMembership
 import {
  createToggle$,
  filterBehavior,
-  generateItem,
  generateItems,
  pauseWhen,
 } from "../../utils/observable";
@@ -64,7 +63,10 @@ import {
  showReactions,
 } from "../../settings/settings";
 import { Config } from "../../config/Config";
-import { MatrixRTCMode } from "../../config/ConfigOptions";
+import {
+  MatrixRTCMode,
+  type ResolvedDelayedLeaveTimings,
+} from "../../config/ConfigOptions";
 import { isFirefox, platform } from "../../Platform";
 import { setPipEnabled$ } from "../../controls";
 import { TileStore } from "../TileStore";
@@ -79,7 +81,7 @@ import {
  type ReactionInfo,
  type ReactionOption,
 } from "../../reactions";
-import { shallowEquals } from "../../utils/array";
+import { shallowEquals as shallowArrayEquals } from "../../utils/array";
 import { type MediaDevices } from "../MediaDevices";
 import { constant, type Behavior } from "../Behavior";
 import { E2eeType } from "../../e2ee/e2eeType";
@@ -89,6 +91,7 @@ import { getUrlParams, HeaderStyle } from "../../UrlParams";
 import { type ProcessorState } from "../../livekit/TrackProcessorContext";
 import { ElementWidgetActions, widget } from "../../widget";
 import {
+  layoutShallowEquals,
  type Alignment,
  type GridLayoutMedia,
  type Layout,
@@ -109,10 +112,10 @@ import {
 } from "./localMember/LocalMember.ts";
 import {
  createLocalTransport$,
-  JwtEndpointVersion,
  type LocalTransport,
 } from "./localMember/LocalTransport.ts";
 import {
+  createKeyRotationSuppressed$,
  createMemberships$,
  membershipsAndTransports$,
 } from "../SessionBehaviors.ts";
@@ -186,7 +189,7 @@ export interface CallViewModelOptions {
  /** Optional value overriding the connection factory, for testing purposes. */
  connectionFactory?: ConnectionFactory;
  /** The version & compatibility mode of MatrixRTC that we should use. */
-  matrixRTCMode$?: Behavior<MatrixRTCMode>;
+  matrixRTCMode?: MatrixRTCMode;
  /** Optional behavior overriding for the screensharing, for testing */
  toggleScreensharing?: () => void;
 }
@@ -265,6 +268,11 @@ export interface CallViewModel {
   * Whether we are sharing our screen.
   */
  sharingScreen$: Behavior<boolean>;
+  /**
+   * The last error from toggling screen sharing, until dismissed.
+   */
+  screenShareError$: Behavior<Error | null>;
+  dismissScreenShareError: () => void;

  // UI interactions
  /**
@@ -301,6 +309,12 @@ export interface CallViewModel {
   *    multiple devices.
   */
  participantCount$: Behavior<number>;
+  /**
+   * Whether the call has grown large enough that MatrixRTC has stopped rotating the media
+   * encryption key. While this is true the key in use is still shared with new joiners, but no new
+   * key is generated when someone joins or leaves.
+   */
+  keyRotationSuppressed$: Behavior<boolean>;
  allConnections$: Behavior<ConnectionManagerData>;
  /** Participants sorted by livekit room so they can be used in the audio rendering */
  livekitRoomItems$: Behavior<LivekitRoomItem[]>;
@@ -365,6 +379,11 @@ export interface CallViewModel {
   */
  overflowing$: Behavior<boolean>;

+  /**
+   * Whether modals such as settings and reactions should be accessible at all.
+   */
+  showModals$: Behavior<boolean>;
+
  settingsOpen$: Behavior<boolean>;
  setSettingsOpen$: Behavior<(open: boolean) => void>;

@@ -432,10 +451,8 @@ export function createCallViewModel$(
  const configMatrixRTCMode = Config.get().matrix_rtc_mode as
    | MatrixRTCMode
    | undefined;
-  const matrixRTCMode$ =
-    configMatrixRTCMode !== undefined
-      ? constant(configMatrixRTCMode)
-      : (options.matrixRTCMode$ ?? constant(MatrixRTCMode.Legacy));
+  const matrixRTCMode =
+    configMatrixRTCMode ?? options.matrixRTCMode ?? MatrixRTCMode.Compatibility;

  // Each hbar seperates a block of input variables required for the CallViewModel to function.
  // The outputs of this block is written under the hbar.
@@ -469,39 +486,16 @@ export function createCallViewModel$(
    memberId: uuidv4(),
  };

-  const localTransport$ = scope.behavior(
-    matrixRTCMode$.pipe(
-      generateItem(
-        "CallViewModel localTransport$",
-        // Re-create LocalTransport whenever the mode changes
-        (mode) => ({ keys: [mode], data: undefined }),
-        (scope, _data$, mode) =>
-          options.localTransport ??
-          createLocalTransport$({
-            scope: scope,
-            memberships$: memberships$,
-            ownMembershipIdentity,
-            client,
-            delayId$: scope.behavior(
-              (
-                fromEvent(
-                  matrixRTCSession,
-                  MembershipManagerEvent.DelayIdChanged,
-                  // The type of reemitted event includes the original emitted as the second arg.
-                ) as Observable<[string | undefined, IMembershipManager]>
-              ).pipe(map(([delayId]) => delayId ?? null)),
-              matrixRTCSession.delayId ?? null,
-            ),
-            roomId: matrixRoom.roomId,
-            forceJwtEndpoint:
-              mode === MatrixRTCMode.Matrix_2_0
-                ? JwtEndpointVersion.Matrix_2_0
-                : JwtEndpointVersion.Legacy,
-            useOldestMember: mode === MatrixRTCMode.Legacy,
-          }),
-      ),
-    ),
-  );
+  const localTransport =
+    options.localTransport ??
+    createLocalTransport$({
+      scope: scope,
+      memberships$: memberships$,
+      ownMembershipIdentity,
+      client,
+      roomId: matrixRoom.roomId,
+      matrixRTCMode,
+    });

  const connectionFactory =
    options.connectionFactory ??
@@ -519,8 +513,7 @@ export function createCallViewModel$(
    scope: scope,
    connectionFactory: connectionFactory,
    localTransport$: scope.behavior(
-      localTransport$.pipe(
-        switchMap((t) => t.active$),
+      localTransport.active$.pipe(
        catchError((e: unknown) => {
          logger.info(
            "could not pass local transport to createConnectionManager$. localTransport$ threw an error",
@@ -545,16 +538,6 @@ export function createCallViewModel$(
    localUser: { userId, deviceId },
  });

-  const connectOptions$ = scope.behavior(
-    matrixRTCMode$.pipe(
-      map((mode) => ({
-        encryptMedia: livekitKeyProvider !== undefined,
-        // TODO. This might need to get called again on each change of matrixRTCMode...
-        matrixRTCMode: mode,
-      })),
-    ),
-  );
-
  const localMembership = createLocalMembership$({
    scope,
    homeserverConnected: createHomeserverConnected$(
@@ -563,12 +546,19 @@ export function createCallViewModel$(
      matrixRTCSession,
    ),
    muteStates,
-    joinMatrixRTC: (transport: LivekitTransportConfig) => {
+    joinMatrixRTC: (
+      transport: LivekitTransportConfig,
+      delayedLeaveTimings: ResolvedDelayedLeaveTimings,
+    ) => {
      return enterRTCSession(
        matrixRTCSession,
        ownMembershipIdentity,
        transport,
-        connectOptions$.value,
+        {
+          encryptMedia: livekitKeyProvider !== undefined,
+          matrixRTCMode,
+          delayedLeaveTimings,
+        },
      );
    },
    createPublisherFactory: (connection: Connection) => {
@@ -583,9 +573,23 @@ export function createCallViewModel$(
      );
    },
    connectionManager,
+    client,
    matrixRTCSession,
-    localTransport$,
+    localTransport,
    roomId: matrixRoom.roomId,
+    baseUrl: client.baseUrl,
+    ownMembershipIdentity,
+    delayId$: scope.behavior(
+      (
+        fromEvent(
+          matrixRTCSession,
+          MembershipManagerEvent.DelayIdChanged,
+          // The type of reemitted event includes the original emitted as the second arg.
+        ) as Observable<[string | undefined, IMembershipManager]>
+      ).pipe(map(([delayId]) => delayId ?? null)),
+      matrixRTCSession.delayId ?? null,
+    ),
+    matrixRTCMode,
    logger: logger.getChild(`[${Date.now()}]`),
  });

@@ -856,6 +860,11 @@ export function createCallViewModel$(
    matrixLivekitMembers$.pipe(map((ms) => ms.length)),
  );

+  const keyRotationSuppressed$ = createKeyRotationSuppressed$(
+    scope,
+    matrixRTCSession,
+  );
+
  const leaveSoundEffect$ = userMedia$.pipe(
    pairwise(),
    filter(
@@ -941,7 +950,7 @@ export function createCallViewModel$(
              bins.sort(([, bin1], [, bin2]) => bin1 - bin2).map(([m]) => m),
            );
      }),
-      distinctUntilChanged(shallowEquals),
+      distinctUntilChanged(shallowArrayEquals),
    ),
  );

@@ -1000,7 +1009,7 @@ export function createCallViewModel$(
  const spotlight$ = scope.behavior<MediaViewModel[]>(
    spotlightAndPip$.pipe(
      map(({ spotlight }) => spotlight),
-      distinctUntilChanged<MediaViewModel[]>(shallowEquals),
+      distinctUntilChanged<MediaViewModel[]>(shallowArrayEquals),
    ),
  );

@@ -1209,6 +1218,7 @@ export function createCallViewModel$(
        }
        return layout;
      }),
+      distinctUntilChanged(),
      scope.bind(),
    )
    .subscribe((orientation) => {
@@ -1448,6 +1458,11 @@ export function createCallViewModel$(
      map((naturallyShowFooter) => naturallyShowFooter && showFooterUrlParams),
    ),
  );
+
+  const showModals$ = scope.behavior(
+    windowMode$.pipe(map((mode) => mode !== "pip")),
+  );
+
  const settingsOpen$ = new BehaviorSubject(false);
  const setSettingsOpen$ = constant((open: boolean) => {
    settingsOpen$.next(open);
@@ -1574,7 +1589,11 @@ export function createCallViewModel$(
   * The layout of tiles in the call interface.
   */
  const layout$ = scope.behavior<Layout>(
-    layoutInternals$.pipe(map(({ layout }) => layout)),
+    layoutInternals$.pipe(
+      map(({ layout }) => layout),
+      // Drop redundant layout updates before they would hit React.
+      distinctUntilChanged<Layout>(layoutShallowEquals),
+    ),
  );

  const overflowing$ = scope.behavior<boolean>(
@@ -1782,6 +1801,7 @@ export function createCallViewModel$(
    ),
    allConnections$,
    participantCount$: participantCount$,
+    keyRotationSuppressed$: keyRotationSuppressed$,
    handsRaised$: handsRaised$,
    reactions$: reactions$,
    joinSoundEffect$: joinSoundEffect$,
@@ -1820,6 +1840,7 @@ export function createCallViewModel$(
    showNameTags$,
    showHeader$: showHeader$,
    showFooter$: showFooter$,
+    showModals$,
    settingsOpen$: settingsOpen$,
    setSettingsOpen$: setSettingsOpen$,
    edgeToEdge$,
@@ -1829,6 +1850,8 @@ export function createCallViewModel$(
    reconnecting$: localMembership.reconnecting$,
    livekitRoomItems$,
    connected$: localMembership.connected$,
+    screenShareError$: localMembership.screenShareError$,
+    dismissScreenShareError: localMembership.dismissScreenShareError,
  };
 }

@@ -238,7 +238,7 @@ export function withCallViewModel(mode: MatrixRTCMode) {
            );
          },
        },
-        matrixRTCMode$: constant(mode),
+        matrixRTCMode: mode,
        ...options,
      },
      raisedHands$,
@@ -19,21 +19,28 @@ import {
  beforeAll,
  afterAll,
  beforeEach,
+  afterEach,
 } from "vitest";
 import { BehaviorSubject, map, of } from "rxjs";
 import { logger } from "matrix-js-sdk/lib/logger";
 import { type LocalParticipant, type LocalTrack } from "livekit-client";
+import fetchMock from "fetch-mock";

 import { PosthogAnalytics } from "../../../analytics/PosthogAnalytics";
-import { MatrixRTCMode } from "../../../config/ConfigOptions";
+import {
+  MatrixRTCMode,
+  type ResolvedDelayedLeaveTimings,
+} from "../../../config/ConfigOptions";
 import { type HomeserverDisconnectReason } from "./HomeserverConnected";
 import {
  flushPromises,
  mockConfig,
  mockLivekitRoom,
+  mockLocalParticipant,
  mockMuteStates,
  withTestScheduler,
  ownMemberMock,
+  testScope,
 } from "../../../utils/test";
 import {
  TransportState,
@@ -41,6 +48,7 @@ import {
  enterRTCSession,
  PublishState,
  TrackState,
+  watchScreenShareToggle,
 } from "./LocalMember";
 import {
  FailToGetOpenIdToken,
@@ -56,10 +64,11 @@ import {
  type LocalTransport,
  type LocalTransportWithSFUConfig,
 } from "./LocalTransport";
+import * as openIDSFU from "../../../livekit/openIDSFU";

 initializeWidget();

-const MATRIX_RTC_MODE = MatrixRTCMode.Legacy;
+const MATRIX_RTC_MODE = MatrixRTCMode.Compatibility;
 const getUrlParams = vi.hoisted(() => vi.fn(() => ({})));
 vi.mock("../../../UrlParams", () => ({ getUrlParams }));
 vi.mock("@livekit/components-core", () => ({
@@ -68,76 +77,137 @@ vi.mock("@livekit/components-core", () => ({
    .mockReturnValue(of({ isScreenShareEnabled: false })),
 }));

-describe("LocalMembership", () => {
-  describe("enterRTCSession", () => {
-    it("It joins the correct Session", () => {
-      const focusFromOlderMembership = {
-        type: "livekit",
-        livekit_service_url: "http://my-oldest-member-service-url.com",
-        livekit_alias: "my-oldest-member-service-alias",
-      };
-
-      mockConfig({
-        livekit: { livekit_service_url: "http://my-default-service-url.com" },
-      });
-
-      const mockedSession = vi.mocked({
-        room: {
-          roomId: "roomId",
-          client: {
-            getDomain: vi.fn().mockReturnValue("example.org"),
-            getOpenIdToken: vi.fn().mockResolvedValue({
-              access_token: "ACCCESS_TOKEN",
-              token_type: "Bearer",
-              matrix_server_name: "localhost",
-              expires_in: 10000,
-            }),
-          },
-        },
-        memberships: [],
-        getFocusInUse: vi.fn().mockReturnValue(focusFromOlderMembership),
-        getOldestMembership: vi.fn().mockReturnValue({
-          getPreferredFoci: vi.fn().mockReturnValue([focusFromOlderMembership]),
-        }),
-        joinRTCSession: vi.fn(),
-      }) as unknown as MatrixRTCSession;
-
-      enterRTCSession(
-        mockedSession,
-        ownMemberMock,
-        {
-          livekit_alias: "roomId",
-          livekit_service_url: "http://my-livekit-service-url.com",
-          type: "livekit",
-        },
-        {
-          encryptMedia: true,
-          matrixRTCMode: MATRIX_RTC_MODE,
-        },
-      );
-
-      expect(mockedSession.joinRTCSession).toHaveBeenLastCalledWith(
-        {
-          deviceId: "DEVICE",
-          memberId: "@alice:example.org:DEVICE",
-          userId: "@alice:example.org",
-        },
-        [
-          {
-            livekit_alias: "roomId",
-            livekit_service_url: "http://my-livekit-service-url.com",
-            type: "livekit",
-          },
-        ],
-        undefined,
-        expect.objectContaining({
-          manageMediaKeys: true,
-          useLegacyMemberEvents: false,
-        }),
-      );
-    });
+describe("watchScreenShareToggle", () => {
+  it("reports nothing when the toggle completes", async () => {
+    const onError = vi.fn();
+    watchScreenShareToggle(Promise.resolve(), true, logger, onError);
+    await flushPromises();
+    expect(onError).not.toHaveBeenCalled();
  });

+  it("reports failures other than the user cancelling", async () => {
+    const onError = vi.fn();
+    const e = new Error("NotReadableError");
+    watchScreenShareToggle(Promise.reject(e), true, logger, onError);
+    await flushPromises();
+    expect(onError).toHaveBeenCalledWith(e);
+  });
+
+  it("does not report the user cancelling the picker", async () => {
+    const onError = vi.fn();
+    const cancelled = new DOMException("Permission denied", "NotAllowedError");
+    watchScreenShareToggle(Promise.reject(cancelled), true, logger, onError);
+    await flushPromises();
+    expect(onError).not.toHaveBeenCalled();
+  });
+});
+
+const timings: ResolvedDelayedLeaveTimings = {
+  delay_ms: 10000,
+  restart_ms: 4000,
+  restart_timeout_ms: 1000,
+};
+
+const delegatedTimings: ResolvedDelayedLeaveTimings = {
+  delay_ms: timings.delay_ms * 10,
+  restart_ms: timings.restart_ms! * 10,
+  restart_timeout_ms: timings.restart_timeout_ms! * 10,
+};
+
+const mockedClient = {
+  getDomain: vi.fn().mockReturnValue("example.org"),
+  getDeviceId: vi.fn().mockReturnValue("AAAA"),
+  getOpenIdToken: vi.fn().mockResolvedValue({
+    access_token: "ACCCESS_TOKEN",
+    token_type: "Bearer",
+    matrix_server_name: "localhost",
+    expires_in: 10000,
+  }),
+};
+
+describe("enterRTCSession", () => {
+  const transport: LivekitTransportConfig = {
+    livekit_alias: "roomId",
+    livekit_service_url: "http://my-livekit-service-url.com",
+    type: "livekit",
+  };
+
+  const options = {
+    encryptMedia: true,
+    matrixRTCMode: MATRIX_RTC_MODE,
+    delayedLeaveTimings: timings,
+  };
+
+  const mockedSession = vi.mocked({
+    room: {
+      roomId: "roomId",
+      client: mockedClient,
+    },
+    memberships: [],
+    joinRTCSession: vi.fn(),
+  }) as unknown as MatrixRTCSession;
+
+  beforeEach(() =>
+    mockConfig({
+      livekit: { livekit_service_url: "http://my-default-service-url.com" },
+    }),
+  );
+
+  it("It joins the correct Session", () => {
+    enterRTCSession(mockedSession, ownMemberMock, transport, options);
+
+    expect(mockedSession.joinRTCSession).toHaveBeenLastCalledWith(
+      {
+        deviceId: "DEVICE",
+        memberId: "@alice:example.org:DEVICE",
+        userId: "@alice:example.org",
+      },
+      [],
+      transport,
+      expect.objectContaining({ manageMediaKeys: true }),
+    );
+  });
+
+  it("passes keyRotationParticipantLimit from config to joinRTCSession", () => {
+    mockConfig({
+      livekit: { livekit_service_url: "http://my-default-service-url.com" },
+      matrix_rtc_session: {
+        network_error_retry_ms: 0,
+        key_rotation_participant_limit: 50,
+        delayed_leave: timings,
+        delegated_delayed_leave: timings,
+      },
+    });
+
+    enterRTCSession(mockedSession, ownMemberMock, transport, options);
+
+    expect(mockedSession.joinRTCSession).toHaveBeenLastCalledWith(
+      expect.any(Object),
+      [],
+      expect.any(Object),
+      expect.objectContaining({
+        keyRotationParticipantLimit: 50,
+      }),
+    );
+  });
+
+  it("uses the specified delayed leave timings", () => {
+    enterRTCSession(mockedSession, ownMemberMock, transport, options);
+
+    expect(mockedSession.joinRTCSession).toHaveBeenLastCalledWith(
+      expect.anything(),
+      expect.anything(),
+      expect.anything(),
+      expect.objectContaining({
+        delayedLeaveEventRestartMs: timings.restart_ms,
+        delayedLeaveEventDelayMs: timings.delay_ms,
+        delayedLeaveEventRestartLocalTimeoutMs: timings.restart_timeout_ms,
+      }),
+    );
+  });
+});
+
+describe("LocalMembership", () => {
  const defaultCreateLocalMemberValues = {
    options: constant({
      encryptMedia: false,
@@ -163,8 +233,30 @@ describe("LocalMembership", () => {
      rtsSession$: constant(RTCMemberStatus.Connected),
    },
    roomId: "!test-room-id:example.org",
+    baseUrl: "https://matrix.example.org",
+    ownMembershipIdentity: ownMemberMock,
+    client: mockedClient,
+    delayId$: constant(null),
+    matrixRTCMode: MATRIX_RTC_MODE,
  };

+  beforeEach(() => {
+    mockConfig({
+      livekit: { livekit_service_url: "http://my-default-service-url.com" },
+      matrix_rtc_session: {
+        network_error_retry_ms: 1000,
+        delayed_leave: timings,
+        delegated_delayed_leave: delegatedTimings,
+      },
+    });
+    fetchMock.catch(404);
+  });
+
+  afterEach(async () => {
+    void (await fetchMock.flush());
+    fetchMock.reset();
+  });
+
  it("throws error on missing RTC config error", () => {
    withTestScheduler(({ scope, hot, behavior, expectObservable }) => {
      const localTransport$ = scope.behavior<null | LivekitTransportConfig>(
@@ -191,9 +283,8 @@ describe("LocalMembership", () => {
        scope,
        ...defaultCreateLocalMemberValues,
        connectionManager: mockConnectionManager,
-        localTransport$: behavior("a", { a: aLocalTransport }),
+        localTransport: aLocalTransport,
      });
-      localMembership.requestJoinAndPublish();

      expectObservable(localMembership.localMemberState$).toBe("ne", {
        n: TransportState.Waiting,
@@ -236,9 +327,8 @@ describe("LocalMembership", () => {
        scope,
        ...defaultCreateLocalMemberValues,
        connectionManager: mockConnectionManager,
-        localTransport$: behavior("a", { a: aLocalTransport }),
+        localTransport: aLocalTransport,
      });
-      localMembership.requestJoinAndPublish();

      expectObservable(localMembership.localMemberState$).toBe("n-e", {
        n: TransportState.Waiting,
@@ -254,8 +344,8 @@ describe("LocalMembership", () => {
    const scope = new ObservableScope();

    const aLocalTransport: LocalTransport = {
-      advertised$: new BehaviorSubject(aTransport),
-      active$: new BehaviorSubject(aTransportWithSFUConfig),
+      advertised$: constant(aTransport),
+      active$: constant(aTransportWithSFUConfig),
    };

    const mockConnectionManager = {
@@ -273,7 +363,7 @@ describe("LocalMembership", () => {
        leaveRoomSession: vi.fn(),
      },
      connectionManager: mockConnectionManager,
-      localTransport$: new BehaviorSubject(aLocalTransport),
+      localTransport: aLocalTransport,
    });
    const expextedLog =
      "'not connected yet' while updating the call intent (this is expected on startup)";
@@ -334,12 +424,90 @@ describe("LocalMembership", () => {
    livekitRoom: mockLivekitRoom({}),
  } as unknown as Connection;

+  const authCallSpy = vi
+    .spyOn(openIDSFU, "getSFUConfigWithOpenID")
+    .mockImplementation(() => mockedClient.getOpenIdToken());
+  afterEach(() => authCallSpy.mockClear());
+
+  it.each([
+    ["no", null, timings],
+    [
+      "homeserver",
+      "https://matrix.example.org/_matrix/client/unstable/io.element.msc4195/rtc/livekit/delegate_delayed_leave",
+      delegatedTimings,
+    ],
+    ["transport", "/a/delegate_delayed_leave", delegatedTimings],
+  ])(
+    "joins session with %s delegation support",
+    async (_serviceName, delegationUrl, delayedLeaveTimings) => {
+      const scope = testScope();
+      const joinMatrixRTC = vi.fn();
+      const delayId$ = new BehaviorSubject<string | null>(null);
+
+      if (delegationUrl !== null)
+        fetchMock.post(delegationUrl, () => ({ status: 401, body: {} }));
+
+      const localMembership = createLocalMembership$({
+        scope,
+        ...defaultCreateLocalMemberValues,
+        connectionManager: {
+          connectionManagerData$: constant(
+            new Epoch(new ConnectionManagerData()),
+          ),
+        },
+        joinMatrixRTC,
+        localTransport: {
+          advertised$: constant(aTransport),
+          active$: constant(aTransportWithSFUConfig),
+        },
+        delayId$,
+      });
+
+      localMembership.requestJoinAndPublish();
+      void (await fetchMock.flush());
+      await flushPromises();
+      // Joins with timings appropriate for the level of delegation support
+      expect(joinMatrixRTC).toHaveBeenCalledWith(
+        aTransport,
+        delayedLeaveTimings,
+      );
+
+      expect(authCallSpy).not.toHaveBeenCalled();
+      delayId$.next("leave1");
+      await flushPromises();
+      if (delegationUrl === null) {
+        expect(authCallSpy).not.toHaveBeenCalled();
+      } else {
+        // Delegation is supported in this test case, so go on to check that
+        // LocalMember actually performs delegation
+        const expectDelegation = (delayId: string) =>
+          expect(authCallSpy).toHaveBeenLastCalledWith(
+            mockedClient,
+            ownMemberMock,
+            "a",
+            "!test-room-id:example.org",
+            {
+              matrixRTCMode: MATRIX_RTC_MODE,
+              delayEndpointBaseUrl: "https://matrix.example.org",
+              delayId,
+            },
+            expect.anything(),
+          );
+
+        expectDelegation("leave1");
+        delayId$.next("leave2"); // Can change delegated leaves
+        await flushPromises();
+        expectDelegation("leave2");
+      }
+    },
+  );
+
  it("recreates publisher if new connection is used, always unpublish and end tracks", async () => {
    const scope = new ObservableScope();

    const activeTransport$ = new BehaviorSubject(aTransportWithSFUConfig);
    const aLocalTransport: LocalTransport = {
-      advertised$: new BehaviorSubject(aTransport),
+      advertised$: constant(aTransport),
      active$: activeTransport$,
    };

@@ -377,7 +545,7 @@ describe("LocalMembership", () => {
      connectionManager: {
        connectionManagerData$: constant(new Epoch(connectionManagerData)),
      },
-      localTransport$: new BehaviorSubject(aLocalTransport),
+      localTransport: aLocalTransport,
    });
    await flushPromises();
    activeTransport$.next({
@@ -408,7 +576,7 @@ describe("LocalMembership", () => {
    const publishers: Publisher[] = [];

    const tracks$ = new BehaviorSubject<LocalTrack[]>([]);
-    const publishing$ = new BehaviorSubject<boolean>(false);
+    const publishing$ = constant<boolean>(false);
    defaultCreateLocalMemberValues.createPublisherFactory.mockImplementation(
      () => {
        const p = {
@@ -432,8 +600,8 @@ describe("LocalMembership", () => {
      >;

    const aLocalTransport: LocalTransport = {
-      advertised$: new BehaviorSubject(aTransport),
-      active$: new BehaviorSubject(aTransportWithSFUConfig),
+      advertised$: constant(aTransport),
+      active$: constant(aTransportWithSFUConfig),
    };

    const connectionManagerData = new ConnectionManagerData();
@@ -445,7 +613,7 @@ describe("LocalMembership", () => {
      connectionManager: {
        connectionManagerData$: constant(new Epoch(connectionManagerData)),
      },
-      localTransport$: new BehaviorSubject(aLocalTransport),
+      localTransport: aLocalTransport,
    });
    await flushPromises();
    expect(publisherFactory).toHaveBeenCalledOnce();
@@ -473,7 +641,7 @@ describe("LocalMembership", () => {
      new BehaviorSubject<null | LocalTransportWithSFUConfig>(null);

    const aLocalTransport: LocalTransport = {
-      advertised$: new BehaviorSubject(aTransport),
+      advertised$: constant(aTransport),
      active$: activeTransport$,
    };

@@ -516,7 +684,7 @@ describe("LocalMembership", () => {
      connectionManager: {
        connectionManagerData$,
      },
-      localTransport$: new BehaviorSubject(aLocalTransport),
+      localTransport: aLocalTransport,
    });

    await flushPromises();
@@ -651,10 +819,10 @@ describe("LocalMembership", () => {
        connectionManager: {
          connectionManagerData$: constant(new Epoch(connectionManagerData)),
        },
-        localTransport$: new BehaviorSubject({
-          advertised$: new BehaviorSubject(aTransport),
-          active$: new BehaviorSubject(aTransportWithSFUConfig),
-        }),
+        localTransport: {
+          advertised$: constant(aTransport),
+          active$: constant(aTransportWithSFUConfig),
+        },
      });

      await flushPromises();
@@ -691,10 +859,10 @@ describe("LocalMembership", () => {
        connectionManager: {
          connectionManagerData$: constant(new Epoch(connectionManagerData)),
        },
-        localTransport$: new BehaviorSubject({
-          advertised$: new BehaviorSubject(aTransport),
-          active$: new BehaviorSubject(aTransportWithSFUConfig),
-        }),
+        localTransport: {
+          advertised$: constant(aTransport),
+          active$: constant(aTransportWithSFUConfig),
+        },
      });

      await flushPromises();
@@ -733,18 +901,19 @@ describe("LocalMembership", () => {
        scope,
        ...defaultCreateLocalMemberValues,
        homeserverConnected: {
-          combined$: new BehaviorSubject<
-            [boolean, HomeserverDisconnectReason | null]
-          >([true, null]),
+          combined$: constant<[boolean, HomeserverDisconnectReason | null]>([
+            true,
+            null,
+          ]),
          rtsSession$: constant(RTCMemberStatus.Connected),
        },
        connectionManager: {
          connectionManagerData$: constant(new Epoch(connectionManagerData)),
        },
-        localTransport$: new BehaviorSubject({
-          advertised$: new BehaviorSubject(aTransport),
-          active$: new BehaviorSubject(aTransportWithSFUConfig),
-        }),
+        localTransport: {
+          advertised$: constant(aTransport),
+          active$: constant(aTransportWithSFUConfig),
+        },
      });

      await flushPromises();
@@ -785,10 +954,10 @@ describe("LocalMembership", () => {
        connectionManager: {
          connectionManagerData$: constant(new Epoch(connectionManagerData)),
        },
-        localTransport$: new BehaviorSubject({
-          advertised$: new BehaviorSubject(aTransport),
-          active$: new BehaviorSubject(aTransportWithSFUConfig),
-        }),
+        localTransport: {
+          advertised$: constant(aTransport),
+          active$: constant(aTransportWithSFUConfig),
+        },
      });

      await flushPromises();
@@ -818,4 +987,98 @@ describe("LocalMembership", () => {
      scope.end();
    });
  });
+
+  describe("toggleScreenSharing", () => {
+    let originalMediaDevices: MediaDevices | undefined;
+
+    beforeAll(() => {
+      mockConfig();
+      // Screen sharing is only offered when getDisplayMedia is available.
+      originalMediaDevices = navigator.mediaDevices;
+      Object.defineProperty(navigator, "mediaDevices", {
+        configurable: true,
+        value: { getDisplayMedia: vi.fn() },
+      });
+    });
+
+    afterAll(() => {
+      Object.defineProperty(navigator, "mediaDevices", {
+        configurable: true,
+        value: originalMediaDevices,
+      });
+    });
+
+    const createMembershipWithConnection = (
+      connection: Connection | null,
+    ): {
+      scope: ObservableScope;
+      localMembership: ReturnType<typeof createLocalMembership$>;
+    } => {
+      const scope = new ObservableScope();
+      const connectionManagerData = new ConnectionManagerData();
+      if (connection) connectionManagerData.add(connection, []);
+      const localMembership = createLocalMembership$({
+        scope,
+        ...defaultCreateLocalMemberValues,
+        connectionManager: {
+          connectionManagerData$: constant(new Epoch(connectionManagerData)),
+        },
+        localTransport: {
+          advertised$: constant(aTransport),
+          active$: constant(aTransportWithSFUConfig),
+        },
+      });
+      return { scope, localMembership };
+    };
+
+    it("surfaces a failure and clears it on dismiss", async () => {
+      const error = new Error("NotReadableError");
+      const setScreenShareEnabled = vi.fn().mockRejectedValue(error);
+      const connection = {
+        state$: constant(ConnectionState.LivekitConnected),
+        transport: aTransport,
+        livekitRoom: mockLivekitRoom({
+          localParticipant: mockLocalParticipant({
+            isScreenShareEnabled: false,
+            setScreenShareEnabled,
+          }),
+        }),
+      } as unknown as Connection;
+      const { scope, localMembership } =
+        createMembershipWithConnection(connection);
+      await flushPromises();
+
+      expect(localMembership.toggleScreenSharing).not.toBeNull();
+      expect(localMembership.screenShareError$.value).toBeNull();
+
+      localMembership.toggleScreenSharing!();
+      await flushPromises();
+
+      expect(setScreenShareEnabled).toHaveBeenCalledWith(
+        true,
+        expect.any(Object),
+        undefined,
+      );
+      expect(localMembership.screenShareError$.value).toBe(error);
+
+      localMembership.dismissScreenShareError();
+      expect(localMembership.screenShareError$.value).toBeNull();
+
+      scope.end();
+    });
+
+    it("does nothing when there is no local participant", async () => {
+      // No connection means participant$ never resolves to a participant.
+      const { scope, localMembership } = createMembershipWithConnection(null);
+      await flushPromises();
+
+      expect(localMembership.toggleScreenSharing).not.toBeNull();
+      localMembership.toggleScreenSharing!();
+      await flushPromises();
+
+      expect(localMembership.screenShareError$.value).toBeNull();
+
+      scope.end();
+    });
+  });
 });
@@ -15,6 +15,7 @@ import {
  MediaDeviceFailure,
 } from "livekit-client";
 import { observeParticipantEvents } from "@livekit/components-core";
+import { type MatrixClient } from "matrix-js-sdk";
 import {
  Status as RTCSessionStatus,
  type LivekitTransport,
@@ -62,7 +63,10 @@ import {
  screenShareCodec,
  parseResolution,
 } from "../../../settings/settings.ts";
-import { MatrixRTCMode } from "../../../config/ConfigOptions.ts";
+import {
+  MatrixRTCMode,
+  type ResolvedDelayedLeaveTimings,
+} from "../../../config/ConfigOptions.ts";
 import { Config } from "../../../config/Config.ts";
 import {
  ConnectionState,
@@ -72,6 +76,8 @@ import {
 import { type HomeserverConnected } from "./HomeserverConnected.ts";
 import { type LocalTransport } from "./LocalTransport.ts";
 import { areLivekitTransportsEqual } from "../remoteMembers/MatrixLivekitMembers.ts";
+import { or$ } from "../../../utils/observable.ts";
+import { getSFUConfigWithOpenID } from "../../../livekit/openIDSFU.ts";

 export enum TransportState {
  /** Not even a transport is available to the LocalMembership */
@@ -117,7 +123,6 @@ export type LocalMemberState =
    };

 /*
- * - get oldest membership
 * - get transport to use
 * - get openId + jwt token
 * - wait for createTrack() call
@@ -134,14 +139,22 @@ interface Props {
  muteStates: MuteStates;
  connectionManager: IConnectionManager;
  createPublisherFactory: (connection: Connection) => Publisher;
-  joinMatrixRTC: (transport: LivekitTransportConfig) => void;
+  joinMatrixRTC: (
+    transport: LivekitTransportConfig,
+    delayedLeaveTimings: ResolvedDelayedLeaveTimings,
+  ) => void;
  homeserverConnected: HomeserverConnected;
  roomId: string;
-  localTransport$: Behavior<LocalTransport>;
+  ownMembershipIdentity: CallMembershipIdentityParts;
+  localTransport: LocalTransport;
+  client: Pick<MatrixClient, "getDeviceId" | "getOpenIdToken">;
  matrixRTCSession: Pick<
    MatrixRTCSession,
    "updateCallIntent" | "leaveRoomSession"
  >;
+  baseUrl: string;
+  delayId$: Behavior<string | null>;
+  matrixRTCMode: MatrixRTCMode;
  logger: Logger;
 }

@@ -156,10 +169,12 @@ interface Props {
 * @param props.createPublisherFactory Factory to create a publisher once we have a connection.
 * @param props.joinMatrixRTC Callback to join the matrix RTC session once we have a transport.
 * @param props.homeserverConnected The homeserver connected state.
- * @param props.localTransport$ The transport to advertise in our membership.
+ * @param props.localTransport The transport to advertise in our membership.
 * @param props.logger The logger to use.
 * @param props.muteStates The mute states for video and audio.
 * @param props.matrixRTCSession The matrix RTC session to join.
+ * @param props.baseUrl Base URL of the homeserver.
+ * @param props.delayId$ ID of the delayed leave event to delegate to the SFU.
 * @param props.roomId The room ID used as the call identifier in analytics events.
 * @returns
 *  - publisher: The handle to create tracks and publish them to the room.
@@ -171,14 +186,19 @@ interface Props {
 export const createLocalMembership$ = ({
  scope,
  connectionManager,
-  localTransport$,
+  localTransport,
  homeserverConnected,
  createPublisherFactory,
  joinMatrixRTC,
  logger: parentLogger,
  muteStates,
+  client,
  matrixRTCSession,
+  baseUrl,
  roomId,
+  ownMembershipIdentity,
+  delayId$,
+  matrixRTCMode,
 }: Props): {
  /**
   * This request to start audio and video tracks.
@@ -197,6 +217,11 @@ export const createLocalMembership$ = ({
   * Callback to toggle screen sharing. If null, screen sharing is not possible.
   */
  toggleScreenSharing: (() => void) | null;
+  /**
+   * The last error from toggling screen sharing, until dismissed.
+   */
+  screenShareError$: Behavior<Error | null>;
+  dismissScreenShareError: () => void;
  // tracks$: Behavior<LocalTrack[]>;
  participant$: Behavior<LocalParticipant | null>;
  connection$: Behavior<Connection | null>;
@@ -232,25 +257,69 @@ export const createLocalMembership$ = ({
    return of(null);
  };

-  // This is the transport that we will advertise in our membership.
-  const advertisedTransport$ = localTransport$.pipe(
-    switchMap((lt) => lt.advertised$),
+  async function checkDelegationSupport(
+    endpointUrl: string,
+    serviceName: string,
+  ): Promise<boolean> {
+    logger.info(`Checking whether ${serviceName} supports delegation…`);
+    try {
+      // Bluntly hit the endpoint without auth to check for a 404. Unfortunately
+      // we can't wrap this in a retry loop, as many servers don't just disable
+      // delegation support, but in fact are from a time before the endpoint
+      // existed at all, therefore we can hit CORS errors which would just gum
+      // up the retry loop. (May be revisited after Matrix 2.0.)
+      const res = await fetch(endpointUrl, { method: "POST" });
+      if (res.status === 404) {
+        logger.warn(`${serviceName} does not support delegation`);
+        return false;
+      } else {
+        logger.info(`${serviceName} supports delegation`);
+        return true;
+      }
+    } catch (e) {
+      logger.warn(
+        `Failed to determine whether ${serviceName} supports delegation, assuming no support`,
+        e,
+      );
+      return false;
+    }
+  }
+
+  const homeserverSupportsDelegation = checkDelegationSupport(
+    baseUrl +
+      "/_matrix/client/unstable/io.element.msc4195/rtc/livekit/delegate_delayed_leave",
+    "homeserver",
+  );
+
+  // The transport that we will advertise in our membership, paired with info as
+  // to whether delayed event delegation is supported
+  const joinParams$ = localTransport.advertised$.pipe(
    catchError(handleTransportError),
    distinctUntilChanged(areLivekitTransportsEqual),
+    switchMap((transport) => {
+      if (transport === null) return of(null);
+      const transportSupportsDelegation = checkDelegationSupport(
+        transport.livekit_service_url + "/delegate_delayed_leave",
+        `transport ${transport.livekit_service_url}`,
+      );
+      return or$(
+        from(homeserverSupportsDelegation),
+        from(transportSupportsDelegation),
+      ).pipe(
+        map((delegationSupported) => ({ transport, delegationSupported })),
+        startWith(null),
+      );
+    }),
  );

  // Unwrap the local transport and set the state of the LocalMembership to error in case the transport is an error.
  const activeTransport$ = scope.behavior(
-    localTransport$.pipe(
-      switchMap((lt) => {
-        return combineLatest([lt.active$, lt.advertised$]).pipe(
-          map(([active, advertised]) => {
-            // Our policy is to not publish to another transport if our prefered transport is miss-configured
-            if (advertised == null) return null;
+    combineLatest([localTransport.active$, localTransport.advertised$]).pipe(
+      map(([active, advertised]) => {
+        // Our policy is to not publish to another transport if our prefered transport is miss-configured
+        if (advertised == null) return null;

-            return active?.transport ?? null;
-          }),
-        );
+        return active?.transport ?? null;
      }),
      catchError(handleTransportError),
      distinctUntilChanged(areLivekitTransportsEqual),
@@ -613,16 +682,20 @@ export const createLocalMembership$ = ({

  // Keep matrix rtc session in sync with advertisedTransport$, connectRequested$
  scope.reconcile(
-    scope.behavior(
-      combineLatest([advertisedTransport$, joinAndPublishRequested$]),
-    ),
-    async ([transport, shouldConnect]) => {
-      if (!transport) return;
+    scope.behavior(combineLatest([joinParams$, joinAndPublishRequested$])),
+    async ([joinParams, shouldConnect]) => {
+      if (!joinParams) return;
      // if shouldConnect=false we will do the disconnect as the cleanup from the previous reconcile iteration.
      if (!shouldConnect) return;
+      const sessionConfig = Config.get().matrix_rtc_session;

      try {
-        joinMatrixRTC(transport);
+        joinMatrixRTC(
+          joinParams.transport,
+          joinParams.delegationSupported
+            ? sessionConfig.delegated_delayed_leave
+            : sessionConfig.delayed_leave,
+        );
      } catch (error) {
        logger.error("Error entering RTC session", error);
        if (error instanceof Error)
@@ -649,6 +722,34 @@ export const createLocalMembership$ = ({
    ),
  );

+  // Delegate delayed leaves to the SFU
+  scope.reconcile(
+    scope.behavior(combineLatest([joinParams$, delayId$])),
+    async ([joinParams, delayId]) => {
+      if (joinParams?.delegationSupported && delayId !== null) {
+        try {
+          // This will technically cause the service to issue a new JWT token,
+          // but it's safe to discard. We're only interested in triggering
+          // delegation.
+          await getSFUConfigWithOpenID(
+            client,
+            ownMembershipIdentity,
+            joinParams.transport.livekit_service_url,
+            roomId,
+            { matrixRTCMode, delayEndpointBaseUrl: baseUrl, delayId },
+            logger,
+          );
+        } catch (e) {
+          // TODO: Surface this to the user as a service interruption?
+          logger.error(
+            `Failed to delegate leave to ${joinParams.transport.livekit_service_url}`,
+            e,
+          );
+        }
+      }
+    },
+  );
+
  // Pause upstream of all local media tracks when we're disconnected from
  // MatrixRTC, because it can be an unpleasant surprise for the app to say
  // 'reconnecting' and yet still be transmitting your media to others.
@@ -707,6 +808,7 @@ export const createLocalMembership$ = ({
    ),
  );

+  const screenShareError$ = new BehaviorSubject<Error | null>(null);
  let toggleScreenSharing: (() => void) | null = null;
  if (
    "getDisplayMedia" in (navigator.mediaDevices ?? {}) &&
@@ -778,13 +880,18 @@ export const createLocalMembership$ = ({
      // We also allow screen sharing to be toggled even if the connection
      // is still initializing or publishing tracks, because there's no
      // technical reason to disallow this. LiveKit will publish if it can.
-      participant$.value
-        ?.setScreenShareEnabled(
+      const participant = participant$.value;
+      if (!participant) return;
+      watchScreenShareToggle(
+        participant.setScreenShareEnabled(
          targetScreenshareState,
          screenshareSettings,
          publishOptions,
-        )
-        .catch(logger.error);
+        ),
+        targetScreenshareState,
+        logger,
+        (e) => screenShareError$.next(e),
+      );
    };
  }

@@ -803,11 +910,44 @@ export const createLocalMembership$ = ({
    ),
    sharingScreen$,
    toggleScreenSharing,
+    screenShareError$,
+    dismissScreenShareError: () => screenShareError$.next(null),
    connection$: localConnection$,
    internalLoggerRef: logger,
  };
 };

+/**
+ * Logs the outcome of a screen share toggle and reports failures.
+ *
+ * getDisplayMedia may legitimately take a long time (the user is choosing
+ * what to share) or never settle at all, so nothing is inferred from silence:
+ * the request and its completion are logged with the elapsed time so that a
+ * hang is visible in the logs, and only an explicit rejection is reported.
+ *
+ * The user cancelling the picker rejects with a NotAllowedError; that is
+ * logged but not reported.
+ */
+export function watchScreenShareToggle(
+  toggle: Promise<unknown>,
+  enable: boolean,
+  logger: Logger,
+  onError: (e: Error) => void,
+): void {
+  const what = `Screen share ${enable ? "start" : "stop"}`;
+  const started = Date.now();
+  const elapsed = (): string => `${Date.now() - started} ms`;
+  logger.info(`${what} requested`);
+  toggle.then(
+    () => logger.info(`${what} completed in ${elapsed()}`),
+    (e: unknown) => {
+      logger.error(`${what} failed after ${elapsed()}:`, e);
+      if (e instanceof DOMException && e.name === "NotAllowedError") return;
+      onError(e instanceof Error ? e : new Error(String(e)));
+    },
+  );
+}
+
 export function observeSharingScreen$(p: Participant): Observable<boolean> {
  return observeParticipantEvents(
    p,
@@ -821,6 +961,7 @@ export function observeSharingScreen$(p: Participant): Observable<boolean> {
 interface EnterRTCSessionOptions {
  encryptMedia: boolean;
  matrixRTCMode: MatrixRTCMode;
+  delayedLeaveTimings: ResolvedDelayedLeaveTimings;
 }

 /**
@@ -833,6 +974,7 @@ interface EnterRTCSessionOptions {
 * @param rtcSession - The MatrixRTCSession to join.
 * @param ownMembershipIdentity - Options for entering the RTC session.
 * @param transport - The LivekitTransport to use for this session.
+ * @param delayedLeaveTimings - The preferred timings for delayed leave events.
 * @param options - `encryptMedia`: Whether to encrypt media `matrixRTCMode`: The Matrix RTC mode to use.
 * @throws If the widget could not send ElementWidgetActions.JoinCall action.
 */
@@ -841,9 +983,8 @@ export function enterRTCSession(
  rtcSession: MatrixRTCSession,
  ownMembershipIdentity: CallMembershipIdentityParts,
  transport: LivekitTransportConfig,
-  options: EnterRTCSessionOptions,
+  { encryptMedia, matrixRTCMode, delayedLeaveTimings }: EnterRTCSessionOptions,
 ): void {
-  const { encryptMedia, matrixRTCMode } = options;
  PosthogAnalytics.instance.eventCallEnded.cacheStartCall(new Date());
  PosthogAnalytics.instance.eventCallStarted.track(rtcSession.room.roomId);

@@ -851,9 +992,11 @@ export function enterRTCSession(
  // have started tracking by the time calls start getting created.
  // groupCallOTelMembership?.onJoinCall();

-  const { features, matrix_rtc_session: matrixRtcSessionConfig } = Config.get();
-  const useDeviceSessionMemberEvents =
-    features?.feature_use_device_session_member_events;
+  const {
+    sync_disconnect_grace_period_ms: gracePeriod,
+    matrix_rtc_session: sessionConfig,
+  } = Config.get();
+  const retryInterval = sessionConfig.network_error_retry_ms;
  const { sendNotificationType: notificationType, callIntent } = getUrlParams();
  const multiSFU =
    matrixRTCMode === MatrixRTCMode.Compatibility ||
@@ -871,16 +1014,11 @@ export function enterRTCSession(
    };
  }

-  // Calculates `maximumNetworkErrorRetryCount`. The connection is failed if EITHER:
-  // - The /sync loop is unresponsive for > `gracePeriod` ms, or
-  // - A delayed leave event is emitted (after `leaveDelay` ms period).
-  // Note: Use leaveDelay >> gracePeriod for delegated leave events.
-  const gracePeriod = Config.get().sync_disconnect_grace_period_ms;
-  const leaveDelay = matrixRtcSessionConfig?.delayed_leave_event_delay_ms;
-  const retryInterval = matrixRtcSessionConfig?.network_error_retry_ms;
-
+  // Set maximumNetworkErrorRetryCount such that we will consider the client
+  // disconnected as soon as either it fails to sync for longer than the grace
+  // period, or it is likely that a delayed leave event has been sent.
  // Math.min is used to account for the respective worst case: /sync not available or leave event emitted.
-  const maxWaitTime = Math.min(gracePeriod, leaveDelay);
+  const maxWaitTime = Math.min(gracePeriod, delayedLeaveTimings.delay_ms);
  const maximumNetworkErrorRetryCount =
    Math.ceil(maxWaitTime / retryInterval) + 1;

@@ -895,19 +1033,14 @@ export function enterRTCSession(
      notificationType,
      callIntent,
      manageMediaKeys: encryptMedia,
-      ...(useDeviceSessionMemberEvents !== undefined && {
-        useLegacyMemberEvents: !useDeviceSessionMemberEvents,
-      }),
-      delayedLeaveEventRestartMs:
-        matrixRtcSessionConfig?.delayed_leave_event_restart_ms,
-      delayedLeaveEventDelayMs:
-        matrixRtcSessionConfig?.delayed_leave_event_delay_ms,
+      delayedLeaveEventRestartMs: delayedLeaveTimings.restart_ms,
+      delayedLeaveEventDelayMs: delayedLeaveTimings.delay_ms,
      delayedLeaveEventRestartLocalTimeoutMs:
-        matrixRtcSessionConfig?.delayed_leave_event_restart_local_timeout_ms,
-      networkErrorRetryMs: matrixRtcSessionConfig?.network_error_retry_ms,
-      makeKeyDelay: matrixRtcSessionConfig?.wait_for_key_rotation_ms,
-      membershipEventExpiryMs:
-        matrixRtcSessionConfig?.membership_event_expiry_ms,
+        delayedLeaveTimings.restart_timeout_ms,
+      networkErrorRetryMs: sessionConfig.network_error_retry_ms,
+      makeKeyDelay: sessionConfig.wait_for_key_rotation_ms,
+      membershipEventExpiryMs: sessionConfig.membership_event_expiry_ms,
+      keyRotationParticipantLimit: sessionConfig.key_rotation_participant_limit,
      unstableSendStickyEvents: matrixRTCMode === MatrixRTCMode.Matrix_2_0,
      maximumNetworkErrorRetryCount: maximumNetworkErrorRetryCount,
    },
@@ -13,29 +13,20 @@ import {
  it,
  type MockedObject,
  vi,
-  type MockInstance,
 } from "vitest";
-import {
-  type CallMembership,
-  type LivekitTransportConfig,
-} from "matrix-js-sdk/lib/matrixrtc";
-import { BehaviorSubject, filter, lastValueFrom } from "rxjs";
+import { type CallMembership } from "matrix-js-sdk/lib/matrixrtc";
+import { lastValueFrom } from "rxjs";
 import fetchMock from "fetch-mock";

 import {
  mockConfig,
  flushPromises,
  ownMemberMock,
-  mockRtcMembership,
  testScope,
 } from "../../../utils/test";
-import {
-  createLocalTransport$,
-  JwtEndpointVersion,
-  type LocalTransportWithSFUConfig,
-} from "./LocalTransport";
+import { createLocalTransport$ } from "./LocalTransport";
 import { constant } from "../../Behavior";
-import { Epoch, ObservableScope, trackEpoch } from "../../ObservableScope";
+import { Epoch, ObservableScope } from "../../ObservableScope";
 import {
  MatrixRTCTransportMissingError,
  FailToGetOpenIdToken,
@@ -43,6 +34,7 @@ import {
 import * as openIDSFU from "../../../livekit/openIDSFU";
 import { customLivekitUrl } from "../../../settings/settings";
 import { testJWTToken } from "../../../utils/test-fixtures";
+import { MatrixRTCMode } from "../../../config/ConfigOptions";

 describe("LocalTransport", () => {
  const openIdResponse: openIDSFU.SFUConfig = {
@@ -58,20 +50,17 @@ describe("LocalTransport", () => {
    const { advertised$, active$ } = createLocalTransport$({
      scope: testScope(),
      roomId: "!room:example.org",
-      useOldestMember: false,
      memberships$: constant(new Epoch<CallMembership[]>([])),
      client: {
        // eslint-disable-next-line @typescript-eslint/naming-convention
        _unstable_getRTCTransports: async () => Promise.resolve([]),
        getDomain: () => "example.org",
-        baseUrl: "example.org",
        // These won't be called in this error path but satisfy the type
        getOpenIdToken: vi.fn(),
        getDeviceId: vi.fn(),
      },
      ownMembershipIdentity: ownMemberMock,
-      forceJwtEndpoint: JwtEndpointVersion.Legacy,
-      delayId$: constant("delay_id_mock"),
+      matrixRTCMode: MatrixRTCMode.Compatibility,
    });
    await flushPromises();

@@ -101,10 +90,8 @@ describe("LocalTransport", () => {
    const { advertised$, active$ } = createLocalTransport$({
      scope,
      roomId: "!example_room_id",
-      useOldestMember: false,
      memberships$: constant(new Epoch<CallMembership[]>([])),
      client: {
-        baseUrl: "https://example.org",
        getDomain: () => "example.org",
        // eslint-disable-next-line @typescript-eslint/naming-convention
        _unstable_getRTCTransports: async () => Promise.resolve([]),
@@ -112,8 +99,7 @@ describe("LocalTransport", () => {
        getDeviceId: vi.fn(),
      },
      ownMembershipIdentity: ownMemberMock,
-      forceJwtEndpoint: JwtEndpointVersion.Legacy,
-      delayId$: constant("delay_id_mock"),
+      matrixRTCMode: MatrixRTCMode.Compatibility,
    });
    active$.subscribe(
      (o) => observations.push(o),
@@ -144,7 +130,6 @@ describe("LocalTransport", () => {
    const { advertised$, active$ } = createLocalTransport$({
      scope: testScope(),
      roomId: "!room:example.org",
-      useOldestMember: false,
      memberships$: constant(new Epoch<CallMembership[]>([])),
      client: {
        // eslint-disable-next-line @typescript-eslint/naming-convention
@@ -152,11 +137,9 @@ describe("LocalTransport", () => {
        getDomain: () => "example.org",
        getOpenIdToken: vi.fn(),
        getDeviceId: vi.fn(),
-        baseUrl: "https://example.org",
      },
      ownMembershipIdentity: ownMemberMock,
-      forceJwtEndpoint: JwtEndpointVersion.Legacy,
-      delayId$: constant("delay_id_mock"),
+      matrixRTCMode: MatrixRTCMode.Compatibility,
    });

    openIdResolver.resolve?.({
@@ -185,127 +168,6 @@ describe("LocalTransport", () => {
    });
  });

-  describe("oldest member mode", () => {
-    const aliceTransport: LivekitTransportConfig = {
-      type: "livekit",
-      livekit_service_url: "https://alice.example.org",
-    };
-    const bobTransport: LivekitTransportConfig = {
-      type: "livekit",
-      livekit_service_url: "https://bob.example.org",
-    };
-    const aliceMembership = mockRtcMembership("@alice:example.org", "AAA", {
-      fociPreferred: [aliceTransport],
-    });
-    const bobMembership = mockRtcMembership("@bob:example.org", "BBB", {
-      fociPreferred: [bobTransport],
-    });
-
-    let openIdSpy: MockInstance<(typeof openIDSFU)["getSFUConfigWithOpenID"]>;
-    beforeEach(() => {
-      openIdSpy = vi
-        .spyOn(openIDSFU, "getSFUConfigWithOpenID")
-        .mockResolvedValue(openIdResponse);
-    });
-
-    it("updates active transport when oldest member changes", async () => {
-      // Initially, Alice is the only member
-      const memberships$ = new BehaviorSubject([aliceMembership]);
-
-      const scope = testScope();
-      const { advertised$, active$ } = createLocalTransport$({
-        scope,
-        roomId: "!example_room_id",
-        useOldestMember: true,
-        memberships$: scope.behavior(memberships$.pipe(trackEpoch())),
-        client: {
-          getDomain: () => "example.org",
-          // eslint-disable-next-line @typescript-eslint/naming-convention
-          _unstable_getRTCTransports: async () => Promise.resolve([]),
-          getOpenIdToken: vi.fn(),
-          getDeviceId: vi.fn(),
-          baseUrl: "https://example.org",
-        },
-        ownMembershipIdentity: ownMemberMock,
-        forceJwtEndpoint: JwtEndpointVersion.Legacy,
-        delayId$: constant("delay_id_mock"),
-      });
-
-      expect(active$.value).toBe(null);
-      await flushPromises();
-      // SFU config should've been fetched
-      expect(openIdSpy).toHaveBeenCalled();
-      // Alice's transport should be active and advertised
-      expect(active$.value?.transport).toStrictEqual(aliceTransport);
-      expect(advertised$.value).toStrictEqual(aliceTransport);
-
-      // Now Bob joins the call, but Alice is still the oldest member
-      openIdSpy.mockClear();
-      memberships$.next([aliceMembership, bobMembership]);
-      await flushPromises();
-      // No new SFU config should've been fetched
-      expect(openIdSpy).not.toHaveBeenCalled();
-      // Alice's transport should still be active and advertised
-      expect(active$.value?.transport).toStrictEqual(aliceTransport);
-      expect(advertised$.value).toStrictEqual(aliceTransport);
-
-      // Now Bob takes Alice's place as the oldest member
-      openIdSpy.mockClear();
-      memberships$.next([bobMembership, aliceMembership]);
-      // Active transport should reset to null until we have Bob's SFU config
-      expect(active$.value).toStrictEqual(null);
-      await flushPromises();
-      // Bob's SFU config should've been fetched
-      expect(openIdSpy).toHaveBeenCalled();
-      // Bob's transport should be active, but Alice's should remain advertised
-      // (since we don't want the change in oldest member to cause a wave of new
-      // state events)
-      expect(active$.value?.transport).toStrictEqual(bobTransport);
-      expect(advertised$.value).toStrictEqual(aliceTransport);
-    });
-
-    it("advertises preferred transport when no other member exists", async () => {
-      // Initially, there are no members
-      const memberships$ = new BehaviorSubject<CallMembership[]>([]);
-
-      const scope = testScope();
-      const { advertised$, active$ } = createLocalTransport$({
-        scope,
-        roomId: "!example_room_id",
-        useOldestMember: true,
-        memberships$: scope.behavior(memberships$.pipe(trackEpoch())),
-        client: {
-          getDomain: () => "example.org",
-          // eslint-disable-next-line @typescript-eslint/naming-convention
-          _unstable_getRTCTransports: async () =>
-            Promise.resolve([aliceTransport]),
-          getOpenIdToken: vi.fn(),
-          getDeviceId: vi.fn(),
-          baseUrl: "https://example.org",
-        },
-        ownMembershipIdentity: ownMemberMock,
-        forceJwtEndpoint: JwtEndpointVersion.Legacy,
-        delayId$: constant("delay_id_mock"),
-      });
-
-      expect(active$.value).toBe(null);
-      await flushPromises();
-      // Our own preferred transport should be advertised
-      expect(advertised$.value).toStrictEqual(aliceTransport);
-      // No transport should be active however (there is still no oldest member)
-      expect(active$.value).toBe(null);
-
-      // Now Bob joins the call and becomes the oldest member
-      memberships$.next([bobMembership]);
-      await flushPromises();
-      // We should still advertise our own preferred transport (to avoid
-      // unnecessary state changes)
-      expect(advertised$.value).toStrictEqual(aliceTransport);
-      // Bob's transport should become active
-      expect(active$.value?.transport).toBe(bobTransport);
-    });
-  });
-
  type LocalTransportProps = Parameters<typeof createLocalTransport$>[0];

  describe("transport configuration mechanisms", () => {
@@ -320,12 +182,9 @@ describe("LocalTransport", () => {
        ownMembershipIdentity: ownMemberMock,
        scope: testScope(),
        roomId: "!example_room_id",
-        useOldestMember: false,
-        forceJwtEndpoint: JwtEndpointVersion.Legacy,
-        delayId$: constant(null),
+        matrixRTCMode: MatrixRTCMode.Compatibility,
        memberships$: constant(new Epoch<CallMembership[]>([])),
        client: {
-          baseUrl: "https://example.org",
          getDomain: vi.fn().mockReturnValue("example.org"),
          // eslint-disable-next-line @typescript-eslint/naming-convention
          _unstable_getRTCTransports: vi.fn().mockResolvedValue([]),
@@ -433,13 +292,10 @@ describe("LocalTransport", () => {
        scope: testScope(),
        ownMembershipIdentity: ownMemberMock,
        roomId: "!example_room_id",
-        useOldestMember: false,
-        forceJwtEndpoint: JwtEndpointVersion.Legacy,
-        delayId$: constant(null),
+        matrixRTCMode: MatrixRTCMode.Compatibility,
        memberships$: constant(new Epoch<CallMembership[]>([])),
        client: {
          getDomain: () => "example.org",
-          baseUrl: "https://example.org",
          // eslint-disable-next-line @typescript-eslint/naming-convention
          _unstable_getRTCTransports: async () => Promise.resolve([]),
          // These won't be called in this error path but satisfy the type
@@ -457,85 +313,4 @@ describe("LocalTransport", () => {
      );
    });
  });
-
-  it("should not update advertised/active transport on delayID changes, but delay Id delegation should be called", async () => {
-    // For simplicity, we'll just use the config livekit
-    customLivekitUrl.setValue("https://lk.example.org");
-
-    const authCallSpy = vi
-      .spyOn(openIDSFU, "getSFUConfigWithOpenID")
-      .mockResolvedValue(openIdResponse);
-
-    const delayId$ = new BehaviorSubject<string | null>(null);
-
-    const { advertised$, active$ } = createLocalTransport$({
-      scope: testScope(),
-      ownMembershipIdentity: ownMemberMock,
-      roomId: "!example_room_id",
-      // We want multi-sdu
-      useOldestMember: false,
-      forceJwtEndpoint: JwtEndpointVersion.Legacy,
-      delayId$: delayId$,
-      memberships$: constant(new Epoch<CallMembership[]>([])),
-      client: {
-        getDomain: () => "example.org",
-        baseUrl: "https://example.org",
-        // eslint-disable-next-line @typescript-eslint/naming-convention
-        _unstable_getRTCTransports: async () => Promise.resolve([]),
-        // These won't be called in this error path but satisfy the type
-        getOpenIdToken: vi.fn(),
-        getDeviceId: vi.fn(),
-      },
-    });
-
-    const advertisedValues: LivekitTransportConfig[] = [];
-    const activeValues: LocalTransportWithSFUConfig[] = [];
-    advertised$
-      .pipe(filter((v) => v !== null))
-      .subscribe((t) => advertisedValues.push(t));
-    active$
-      .pipe(filter((v) => v !== null))
-      .subscribe((t) => activeValues.push(t));
-
-    await flushPromises();
-
-    // we have now an active and an advertised
-    expect(advertisedValues.length).toEqual(1);
-    expect(activeValues.length).toEqual(1);
-    expect(advertisedValues[0]!.livekit_service_url).toEqual(
-      "https://lk.example.org",
-    );
-    expect(activeValues[0]!.transport.livekit_service_url).toEqual(
-      "https://lk.example.org",
-    );
-
-    expect(authCallSpy).toHaveBeenCalledTimes(2);
-    // Now emits 3 new delays id
-    delayId$.next("delay_id_1");
-    await flushPromises();
-    delayId$.next("delay_id_2");
-    await flushPromises();
-    delayId$.next("delay_id_3");
-    await flushPromises();
-
-    // No new emissions should've happened, it is the same transport.
-    expect(advertisedValues.length).toEqual(1);
-    expect(activeValues.length).toEqual(1);
-
-    // Still we should have updated the delayID to auth
-    expect(authCallSpy).toHaveBeenCalledTimes(
-      4 * 2 /* 2 calls for each delayId ?? why */,
-    );
-
-    expect(authCallSpy).toHaveBeenLastCalledWith(
-      expect.anything(),
-      expect.anything(),
-      expect.anything(),
-      expect.anything(),
-      expect.objectContaining({
-        delayId: "delay_id_3",
-      }),
-      expect.anything(),
-    );
-  });
 });
@@ -7,24 +7,10 @@ Please see LICENSE in the repository root for full details.

 import {
  type CallMembership,
-  isLivekitTransportConfig,
  type LivekitTransportConfig,
 } from "matrix-js-sdk/lib/matrixrtc";
 import { type MatrixClient } from "matrix-js-sdk";
-import {
-  catchError,
-  combineLatest,
-  distinctUntilChanged,
-  first,
-  from,
-  map,
-  merge,
-  type Observable,
-  of,
-  startWith,
-  switchMap,
-  tap,
-} from "rxjs";
+import { distinctUntilChanged, from, map, of, switchMap } from "rxjs";
 import { logger as rootLogger, type Logger } from "matrix-js-sdk/lib/logger";
 import { type CallMembershipIdentityParts } from "matrix-js-sdk/lib/matrixrtc/EncryptionManager";

@@ -44,31 +30,21 @@ import {
 import { areLivekitTransportsEqual } from "../remoteMembers/MatrixLivekitMembers.ts";
 import { customLivekitUrl } from "../../../settings/settings.ts";
 import { RtcTransportAutoDiscovery } from "./RtcTransportAutoDiscovery.ts";
+import { type MatrixRTCMode } from "../../../config/ConfigOptions.ts";

 /*
 * It figures out “which LiveKit focus URL/alias the local user should use,”
- * optionally aligning with the oldest member, and ensures the SFU path is primed
- * before advertising that choice.
+ * and ensures the SFU path is primed before advertising that choice.
 */
 interface Props {
  scope: ObservableScope;
  ownMembershipIdentity: CallMembershipIdentityParts;
  memberships$: Behavior<Epoch<CallMembership[]>>;
-  client: Pick<
-    MatrixClient,
-    "getDomain" | "baseUrl" | "_unstable_getRTCTransports"
-  > &
+  client: Pick<MatrixClient, "getDomain" | "_unstable_getRTCTransports"> &
    OpenIDClientParts;
  // Used by the jwt service to create the livekit room and compute the livekit alias.
  roomId: string;
-  useOldestMember: boolean;
-  forceJwtEndpoint: JwtEndpointVersion;
-  delayId$: Behavior<string | null>;
-}
-
-export enum JwtEndpointVersion {
-  Legacy = "legacy",
-  Matrix_2_0 = "matrix_2_0",
+  matrixRTCMode: MatrixRTCMode;
 }

 // TODO livekit_alias-cleanup
@@ -119,8 +95,6 @@ export interface LocalTransport {
 /**
 * Connects to the JWT service and determines the transports that the local member should use.
 *
- * @prop useOldestMember Whether to use the same transport as the oldest member.
- * This will only update once the first oldest member appears. Will not recompute if the oldest member leaves.
 * @prop useOldJwtEndpoint Whether to set forceOldJwtEndpoint on the returned transport and to use the old JWT endpoint.
 * This is used when the connection manager needs to know if it has to use the legacy endpoint which implies a string concatenated rtcBackendIdentity.
 * (which is expected for non sticky event based rtc member events)
@@ -133,18 +107,9 @@ export const createLocalTransport$ = ({
  ownMembershipIdentity,
  client,
  roomId,
-  useOldestMember,
-  forceJwtEndpoint,
-  delayId$,
+  matrixRTCMode,
 }: Props): LocalTransport => {
  const logger = rootLogger.getChild("[LocalTransport]");
-  // The LiveKit transport in use by the oldest RTC membership. `null` when the
-  // oldest member has no such transport.
-  const oldestMemberTransport$ = observerOldestMembership$(
-    scope,
-    memberships$,
-    logger,
-  );

  const transportDiscovery = new RtcTransportAutoDiscovery({
    client: client,
@@ -157,40 +122,36 @@ export const createLocalTransport$ = ({
    transportDiscovery.discoverPreferredTransport(),
  );

-  const preferredConfig$ = customLivekitUrl.value$
-    .pipe(
-      switchMap((customUrl) => {
-        if (customUrl) {
-          return of({
-            type: "livekit",
-            livekit_service_url: customUrl,
-          } as LivekitTransportConfig);
-        } else {
-          return discoveredTransport$;
-        }
-      }),
-    )
-    .pipe(
-      map((config) => {
-        if (!config) {
-          // Bubbled up from the preferredConfig$ observable.
-          throw new MatrixRTCTransportMissingError(client.getDomain() ?? "");
-        }
-        return config;
-      }),
-      distinctUntilChanged(areLivekitTransportsEqual),
-    );
+  const preferredConfig$ = customLivekitUrl.value$.pipe(
+    switchMap((customUrl) => {
+      if (customUrl) {
+        return of({
+          type: "livekit",
+          livekit_service_url: customUrl,
+        } as LivekitTransportConfig);
+      } else {
+        return discoveredTransport$;
+      }
+    }),
+    map((config) => {
+      if (!config) {
+        // Bubbled up from the preferredConfig$ observable.
+        throw new MatrixRTCTransportMissingError(client.getDomain() ?? "");
+      }
+      return config;
+    }),
+    distinctUntilChanged(areLivekitTransportsEqual),
+  );

-  const preferredTransport$ = combineLatest([preferredConfig$, delayId$]).pipe(
-    switchMap(async ([transport, delayId]) => {
+  const preferredTransport$ = preferredConfig$.pipe(
+    switchMap(async (transport) => {
      try {
        return await doOpenIdAndJWTFromUrl(
          transport,
-          forceJwtEndpoint,
+          matrixRTCMode,
          ownMembershipIdentity,
          roomId,
          client,
-          delayId ?? undefined,
          logger,
        );
      } catch (e) {
@@ -203,19 +164,6 @@ export const createLocalTransport$ = ({
    }),
  );

-  if (useOldestMember) {
-    return observeLocalTransportForOldestMembership(
-      scope,
-      oldestMemberTransport$,
-      preferredTransport$,
-      client,
-      ownMembershipIdentity,
-      roomId,
-      logger,
-    );
-  }
-
-  // --- Multi-SFU mode ---
  // Always publish on and advertise the preferred transport.
  return {
    advertised$: scope.behavior(
@@ -225,65 +173,10 @@ export const createLocalTransport$ = ({
      ),
      null,
    ),
-    active$: scope.behavior(
-      preferredTransport$.pipe(
-        // XXX: WORK AROUND due to a reconnection glitch.
-        // To remove when we have a proper way to refresh the delegation event ID without refreshing
-        // the whole credentials.
-        // We deliberately hide any changes to the SFU config because we
-        // do not want the app to reconnect whenever the JWT
-        // token changes due to us delegating a new delayed event. The
-        // initial SFU config for the transport is all the app needs.
-        distinctUntilChanged((prev, next) =>
-          areLivekitTransportsEqual(prev.transport, next.transport),
-        ),
-      ),
-      null,
-    ),
+    active$: scope.behavior(preferredTransport$, null),
  };
 };

-/**
- * Observes the oldest member in the room and returns the transport that it uses if it is a livekit transport.
- * @param scope - The observable scope.
- * @param memberships$ - The observable of the call's memberships.'
- */
-function observerOldestMembership$(
-  scope: ObservableScope,
-  memberships$: Behavior<Epoch<CallMembership[]>>,
-  logger: Logger,
-): Behavior<LivekitTransportConfig | null> {
-  return scope.behavior<LivekitTransportConfig | null>(
-    memberships$.pipe(
-      map((memberships) => {
-        const oldestMember = memberships.value[0];
-        if (oldestMember === undefined) {
-          logger.info("Oldest member: not found");
-          return null;
-        }
-        const transport = oldestMember.getTransport(oldestMember);
-        if (transport === undefined) {
-          logger.warn(
-            `Oldest member: ${oldestMember.userId}|${oldestMember.deviceId}|${oldestMember.memberId} has no transport`,
-          );
-          return null;
-        }
-        if (!isLivekitTransportConfig(transport)) {
-          logger.warn(
-            `Oldest member: ${oldestMember.userId}|${oldestMember.deviceId}|${oldestMember.memberId} has invalid transport`,
-          );
-          return null;
-        }
-        logger.info(
-          "Oldest member: ${oldestMember.userId}|${oldestMember.deviceId}|${oldestMember.memberId} has valid transport",
-        );
-        return transport;
-      }),
-      distinctUntilChanged(areLivekitTransportsEqual),
-    ),
-  );
-}
-
 /**
 *  Utility to ensure the user can authenticate with the SFU.
 *  We will call `getSFUConfigWithOpenID` once per transport here as it's our
@@ -292,25 +185,19 @@ function observerOldestMembership$(
 *  use we don't want to risk any issues by re-using a token.
 *
 *  @param transport The transport to authenticate with.
- *  @param forceJwtEndpoint Whether to force the JWT endpoint to be used.
+ *  @param matrixRTCMode Whether to force the JWT endpoint to be used.
 *  @param membership The identity of the local member.
 *  @param roomId The room ID to use for the JWT.
 *  @param client The client to use for the OpenID token.
- *  @param delayId The delayId to use for the JWT.
 *
 *  @throws FailToGetOpenIdToken, NoMatrix2AuthorizationService
 */
 async function doOpenIdAndJWTFromUrl(
  transport: LivekitTransportConfig,
-  forceJwtEndpoint: JwtEndpointVersion,
+  matrixRTCMode: MatrixRTCMode,
  membership: CallMembershipIdentityParts,
  roomId: string,
-  client: Pick<
-    MatrixClient,
-    "getDomain" | "baseUrl" | "_unstable_getRTCTransports"
-  > &
-    OpenIDClientParts,
-  delayId?: string,
+  client: Pick<MatrixClient, "_unstable_getRTCTransports"> & OpenIDClientParts,
  logger?: Logger,
 ): Promise<LocalTransportWithSFUConfig> {
  const sfuConfig = await getSFUConfigWithOpenID(
@@ -318,11 +205,7 @@ async function doOpenIdAndJWTFromUrl(
    membership,
    transport.livekit_service_url,
    roomId,
-    {
-      forceJwtEndpoint: forceJwtEndpoint,
-      delayEndpointBaseUrl: client.baseUrl,
-      delayId,
-    },
+    { matrixRTCMode },
    logger,
  );
  return {
@@ -331,85 +214,6 @@ async function doOpenIdAndJWTFromUrl(
  };
 }

-function observeLocalTransportForOldestMembership(
-  scope: ObservableScope,
-  oldestMemberTransport$: Behavior<LivekitTransportConfig | null>,
-  preferredTransport$: Observable<LocalTransportWithSFUConfig>,
-  client: Pick<
-    MatrixClient,
-    "getDomain" | "baseUrl" | "_unstable_getRTCTransports"
-  > &
-    OpenIDClientParts,
-  ownMembershipIdentity: CallMembershipIdentityParts,
-  roomId: string,
-  logger: Logger,
-): LocalTransport {
-  // Ensure we can authenticate with the SFU.
-  const authenticatedOldestMemberTransport$ = oldestMemberTransport$.pipe(
-    switchMap((transport) => {
-      // Oldest member not available -we are first- (or invalid SFU config).
-      if (transport === null) return of(null);
-
-      // Whenever there is transport change we want to revert
-      // to no transport while we do the authentication.
-      // So do a from(promise) here to be able to startWith(null)
-      return from(
-        doOpenIdAndJWTFromUrl(
-          transport,
-          JwtEndpointVersion.Legacy,
-          ownMembershipIdentity,
-          roomId,
-          client,
-          undefined,
-          logger,
-        ),
-      ).pipe(
-        catchError((e: unknown) => {
-          logger.error(
-            `Failed to authenticate to transport ${transport.livekit_service_url}`,
-            e,
-          );
-          throw mapAuthErrorToUserFriendlyError(e);
-        }),
-        startWith(null),
-      );
-    }),
-  );
-
-  // --- Oldest member mode ---
-  return {
-    // Never update the transport that we advertise in our membership. Just
-    // take the first valid oldest member or preferred transport that we learn
-    // about, and stick with that. This avoids unnecessary SFU hops and room
-    // state changes.
-    advertised$: scope.behavior(
-      merge(
-        authenticatedOldestMemberTransport$.pipe(
-          map((t) => t?.transport ?? null),
-        ),
-        preferredTransport$.pipe(map((t) => t.transport)),
-      ).pipe(
-        first((t) => t !== null),
-        tap((t) =>
-          logger.info(`Advertise transport: ${t.livekit_service_url}`),
-        ),
-      ),
-      null,
-    ),
-    // Publish on the transport used by the oldest member.
-    active$: scope.behavior(
-      authenticatedOldestMemberTransport$.pipe(
-        tap((t) =>
-          logger.info(
-            `Publish on transport: ${t?.transport.livekit_service_url}`,
-          ),
-        ),
-      ),
-      null,
-    ),
-  };
-}
-
 function mapAuthErrorToUserFriendlyError(e: unknown): Error {
  if (
    e instanceof FailToGetOpenIdToken ||
@@ -19,14 +19,17 @@ import {
 import {
  type LocalParticipant,
  type RemoteParticipant,
+  type RemoteTrack,
+  type RemoteTrackPublication,
  type Room as LivekitRoom,
  RoomEvent,
+  Track,
  ConnectionState as LivekitConnectionState,
 } from "livekit-client";
 import fetchMock from "fetch-mock";
 import EventEmitter from "events";
 import { type IOpenIDToken } from "matrix-js-sdk";
-import { logger } from "matrix-js-sdk/lib/logger";
+import { logger, type Logger } from "matrix-js-sdk/lib/logger";
 import { type LivekitTransportConfig } from "matrix-js-sdk/lib/matrixrtc";

 import {
@@ -509,6 +512,97 @@ describe("remote participants", () => {
  });
 });

+describe("remote track logging", () => {
+  it("logs remote participant and track events on the connection logger", () => {
+    setupTest();
+    const info = vi.fn();
+    const warn = vi.fn();
+    const testLogger = {
+      getChild: (): unknown => testLogger,
+      info,
+      debug: vi.fn(),
+      warn,
+      error: vi.fn(),
+    } as unknown as Logger;
+    new Connection(
+      {
+        client,
+        roomId: ROOM_ID,
+        transport: livekitFocus,
+        scope: testScope,
+        ownMembershipIdentity: ownMemberMock,
+        livekitRoomFactory: () => fakeLivekitRoom,
+      },
+      testLogger,
+    );
+    info.mockClear(); // drop the constructor log line
+
+    const bob = mockRemoteParticipant({
+      identity: "@bob:example.org:DEV111",
+      sid: "PA_bob",
+    });
+    const pub = {
+      kind: "audio",
+      source: "microphone",
+      trackSid: "TR_mic",
+      isMuted: false,
+      isEncrypted: true,
+    } as unknown as RemoteTrackPublication;
+    const messages = (): string[] => info.mock.calls.map((c) => c[0] as string);
+
+    fakeLivekitRoom.emit(RoomEvent.ParticipantConnected, bob);
+    fakeLivekitRoom.emit(
+      RoomEvent.TrackSubscribed,
+      {} as RemoteTrack,
+      pub,
+      bob,
+    );
+    fakeLivekitRoom.emit(RoomEvent.TrackMuted, pub, bob);
+    fakeLivekitRoom.emit(
+      RoomEvent.TrackStreamStateChanged,
+      pub,
+      Track.StreamState.Paused,
+      bob,
+    );
+    expect(messages()).toEqual([
+      "Participant connected: @bob:example.org:DEV111 (PA_bob)",
+      "Subscribed: audio microphone TR_mic of @bob:example.org:DEV111 encrypted=true muted=false",
+      "Muted: audio microphone TR_mic of @bob:example.org:DEV111 encrypted=true",
+      "Stream paused: audio microphone TR_mic of @bob:example.org:DEV111 encrypted=true",
+    ]);
+
+    // Encryption status changes are logged; cryptor errors are warnings
+    fakeLivekitRoom.emit(
+      RoomEvent.ParticipantEncryptionStatusChanged,
+      false,
+      bob,
+    );
+    expect(messages().at(-1)).toBe(
+      "Encryption status of @bob:example.org:DEV111: encrypted=false",
+    );
+    const cryptorError = new Error("missing key at index 3");
+    fakeLivekitRoom.emit(RoomEvent.EncryptionError, cryptorError, bob);
+    expect(warn).toHaveBeenCalledWith(
+      "Encryption error for @bob:example.org:DEV111:",
+      cryptorError,
+    );
+
+    // Local mute events are already logged by the Publisher
+    fakeLivekitRoom.emit(RoomEvent.TrackMuted, pub, {
+      ...fakeLocalParticipant,
+      isLocal: true,
+    } as unknown as LocalParticipant);
+    expect(messages().filter((m) => m.startsWith("Muted"))).toHaveLength(1);
+
+    // Listeners are removed when the scope ends
+    testScope.end();
+    fakeLivekitRoom.emit(RoomEvent.ParticipantDisconnected, bob);
+    expect(
+      messages().filter((m) => m.startsWith("Participant disconnected")),
+    ).toHaveLength(0);
+  });
+});
+
 //
 // NOT USED ANYMORE ?
 //
@@ -13,8 +13,14 @@ import {
 import {
  ConnectionError,
  ConnectionErrorReason,
+  type Participant,
  type RemoteParticipant,
+  type RemoteTrackPublication,
  type Room as LivekitRoom,
+  RoomEvent,
+  type SubscriptionError,
+  type Track,
+  type TrackPublication,
 } from "livekit-client";
 import { type LivekitTransportConfig } from "matrix-js-sdk/lib/matrixrtc";
 import { BehaviorSubject, map } from "rxjs";
@@ -36,7 +42,6 @@ import {
  SFURoomCreationRestrictedError,
  UnknownCallError,
 } from "../../../utils/errors.ts";
-import { type JwtEndpointVersion } from "../localMember/LocalTransport.ts";

 export interface ConnectionOpts {
  /**
@@ -44,11 +49,6 @@ export interface ConnectionOpts {
   * On top the local transport will send additional data to the jwt server to use delayed event delegation.
   */
  existingSFUConfig?: SFUConfig;
-  /**
-   * For local connections that use the oldest member pattern. here we have not prefetched the sfuConfig
-   * and hence we need to let the connection do the jwt token fetching.
-   */
-  forceJwtEndpoint?: JwtEndpointVersion;
  /** The identity parts to use on this connection */
  ownMembershipIdentity: CallMembershipIdentityParts;
  /** The media transport to connect to. */
@@ -170,6 +170,7 @@ export class Connection {
      // Only tracks remote participants
      connectedParticipantsObserver(this.livekitRoom),
    );
+    this.logRemoteTrackEvents();

    scope.onEnd(() => {
      this.logger.info(`Connection scope ended, stopping connection`);
@@ -177,6 +178,114 @@ export class Connection {
    });
  }

+  /**
+   * Logs the lifecycle of remote participants and their tracks as seen by
+   * livekit-client, so that rageshakes show what a tile should have been
+   * rendering (published, subscribed, muted, paused) for each remote member.
+   */
+  private logRemoteTrackEvents(): void {
+    const room = this.livekitRoom;
+    const log = this.logger.getChild("[RemoteTracks]");
+    // The encryption flag matters: if the publisher encrypts but this client
+    // believes the track is unencrypted, the cryptor is bypassed and raw
+    // ciphertext reaches the decoder (audible as loud noise bursts).
+    const track = (pub: TrackPublication, p: Participant): string =>
+      `${pub.kind} ${pub.source} ${pub.trackSid} of ${p.identity} encrypted=${pub.isEncrypted}`;
+
+    const onParticipantConnected = (p: RemoteParticipant): void =>
+      log.info(`Participant connected: ${p.identity} (${p.sid})`);
+    const onParticipantDisconnected = (p: RemoteParticipant): void =>
+      log.info(`Participant disconnected: ${p.identity} (${p.sid})`);
+    const onTrackPublished = (
+      pub: RemoteTrackPublication,
+      p: RemoteParticipant,
+    ): void => log.info(`Published: ${track(pub, p)} muted=${pub.isMuted}`);
+    const onTrackUnpublished = (
+      pub: RemoteTrackPublication,
+      p: RemoteParticipant,
+    ): void => log.info(`Unpublished: ${track(pub, p)}`);
+    const onTrackSubscribed = (
+      _t: Track,
+      pub: RemoteTrackPublication,
+      p: RemoteParticipant,
+    ): void => log.info(`Subscribed: ${track(pub, p)} muted=${pub.isMuted}`);
+    const onTrackUnsubscribed = (
+      _t: Track,
+      pub: RemoteTrackPublication,
+      p: RemoteParticipant,
+    ): void => log.info(`Unsubscribed: ${track(pub, p)}`);
+    const onTrackSubscriptionFailed = (
+      trackSid: string,
+      p: RemoteParticipant,
+      reason?: SubscriptionError,
+    ): void =>
+      log.warn(
+        `Subscription failed: ${trackSid} of ${p.identity} reason=${reason}`,
+      );
+    // Mute events also fire for the local participant, which the Publisher
+    // already logs.
+    const onTrackMuted = (pub: TrackPublication, p: Participant): void => {
+      if (!p.isLocal) log.info(`Muted: ${track(pub, p)}`);
+    };
+    const onTrackUnmuted = (pub: TrackPublication, p: Participant): void => {
+      if (!p.isLocal) log.info(`Unmuted: ${track(pub, p)}`);
+    };
+    const onTrackStreamStateChanged = (
+      pub: RemoteTrackPublication,
+      state: Track.StreamState,
+      p: RemoteParticipant,
+    ): void => log.info(`Stream ${state}: ${track(pub, p)}`);
+    const onEncryptionStatusChanged = (
+      encrypted: boolean,
+      p?: Participant,
+    ): void =>
+      log.info(
+        `Encryption status of ${p?.identity ?? "unknown participant"}: encrypted=${encrypted}`,
+      );
+    // livekit-client throttles these per cryptor; they indicate frames being
+    // dropped (missing/invalid key).
+    const onEncryptionError = (error: Error, p?: Participant): void =>
+      log.warn(
+        `Encryption error for ${p?.identity ?? "unknown participant"}:`,
+        error,
+      );
+
+    room
+      .on(RoomEvent.ParticipantConnected, onParticipantConnected)
+      .on(RoomEvent.ParticipantDisconnected, onParticipantDisconnected)
+      .on(RoomEvent.TrackPublished, onTrackPublished)
+      .on(RoomEvent.TrackUnpublished, onTrackUnpublished)
+      .on(RoomEvent.TrackSubscribed, onTrackSubscribed)
+      .on(RoomEvent.TrackUnsubscribed, onTrackUnsubscribed)
+      .on(RoomEvent.TrackSubscriptionFailed, onTrackSubscriptionFailed)
+      .on(RoomEvent.TrackMuted, onTrackMuted)
+      .on(RoomEvent.TrackUnmuted, onTrackUnmuted)
+      .on(RoomEvent.TrackStreamStateChanged, onTrackStreamStateChanged)
+      .on(
+        RoomEvent.ParticipantEncryptionStatusChanged,
+        onEncryptionStatusChanged,
+      )
+      .on(RoomEvent.EncryptionError, onEncryptionError);
+    this.scope.onEnd(() => {
+      room
+        .off(RoomEvent.ParticipantConnected, onParticipantConnected)
+        .off(RoomEvent.ParticipantDisconnected, onParticipantDisconnected)
+        .off(RoomEvent.TrackPublished, onTrackPublished)
+        .off(RoomEvent.TrackUnpublished, onTrackUnpublished)
+        .off(RoomEvent.TrackSubscribed, onTrackSubscribed)
+        .off(RoomEvent.TrackUnsubscribed, onTrackUnsubscribed)
+        .off(RoomEvent.TrackSubscriptionFailed, onTrackSubscriptionFailed)
+        .off(RoomEvent.TrackMuted, onTrackMuted)
+        .off(RoomEvent.TrackUnmuted, onTrackUnmuted)
+        .off(RoomEvent.TrackStreamStateChanged, onTrackStreamStateChanged)
+        .off(
+          RoomEvent.ParticipantEncryptionStatusChanged,
+          onEncryptionStatusChanged,
+        )
+        .off(RoomEvent.EncryptionError, onEncryptionError);
+    });
+  }
+
  /**
   * Starts the connection.
   *
@@ -14,7 +14,7 @@ import { logger } from "matrix-js-sdk/lib/logger";
 import { Epoch, mapEpoch, ObservableScope } from "../../ObservableScope.ts";
 import {
  createConnectionManager$,
-  type ConnectionManagerData,
+  ConnectionManagerData,
 } from "./ConnectionManager.ts";
 import { type ConnectionFactory } from "./ConnectionFactory.ts";
 import { type Connection } from "./Connection.ts";
@@ -203,6 +203,24 @@ describe("connections$ stream", () => {
  });
 });

+describe("ConnectionManagerData", () => {
+  test("warns when a second connection to the same URL is merged", () => {
+    const warn = vi.spyOn(logger, "warn").mockImplementation(() => {});
+    const data = new ConnectionManagerData(logger);
+    const connection = { transport: TRANSPORT_1 } as unknown as Connection;
+    const p = (identity: string): RemoteParticipant =>
+      ({ identity }) as unknown as RemoteParticipant;
+    data.add(connection, [p("a")]);
+    data.add({ ...connection } as Connection, [p("b")]);
+    expect(warn).toHaveBeenCalledWith(
+      expect.stringContaining(
+        "second connection to https://lk.example.org: existing [a], adding [b]",
+      ),
+    );
+    expect(data.getParticipantsForTransport(TRANSPORT_1)).toHaveLength(2);
+  });
+});
+
 describe("connectionManagerData$ stream", () => {
  // Used in test to control fake connections' remoteParticipants$ streams
  let fakeRemoteParticipantsStreams: Map<string, Behavior<RemoteParticipant[]>>;
@@ -30,7 +30,7 @@ export class ConnectionManagerData {
    { connection: Connection; participants: RemoteParticipant[] }
  > = new Map();

-  public constructor() {}
+  public constructor(private readonly logger?: Logger) {}

  public add(connection: Connection, participants: RemoteParticipant[]): void {
    const key = this.getKey(connection.transport);
@@ -38,6 +38,11 @@ export class ConnectionManagerData {
    if (!existing) {
      this.store.set(key, { connection, participants });
    } else {
+      // Transports are deduplicated by URL upstream, so this should never
+      // happen; if it does, members may be matched against the wrong room.
+      this.logger?.warn(
+        `Merging participants from a second connection to ${key}: existing [${existing.participants.map((p) => p.identity).join(", ")}], adding [${participants.map((p) => p.identity).join(", ")}]`,
+      );
      existing.participants.push(...participants);
    }
  }
@@ -239,7 +244,7 @@ export function createConnectionManager$({
                lists.reduce((data, { connection, participants }) => {
                  data.add(connection, participants);
                  return data;
-                }, new ConnectionManagerData()),
+                }, new ConnectionManagerData(logger)),
                epoch,
              ),
          ),
@@ -5,7 +5,8 @@ SPDX-License-Identifier: AGPL-3.0-only OR LicenseRef-Element-Commercial
 Please see LICENSE in the repository root for full details.
 */

-import { describe, test, expect, beforeEach, afterEach } from "vitest";
+import { describe, test, expect, beforeEach, afterEach, vi } from "vitest";
+import { logger } from "matrix-js-sdk/lib/logger";
 import {
  type CallMembership,
  type LivekitTransport,
@@ -77,6 +78,7 @@ function epochMeWith$<T, U>(
 }

 test("should signal participant not yet connected to livekit", async () => {
+  const info = vi.spyOn(logger, "info");
  const mockedMemberships$ = new BehaviorSubject([bobMembership]);
  const mockConnectionManagerData$ = new BehaviorSubject(
    new ConnectionManagerData(),
@@ -108,6 +110,9 @@ test("should signal participant not yet connected to livekit", async () => {
      return true;
    },
  );
+  expect(info).toHaveBeenCalledWith(
+    "[RemoteMatrixLivekitMembers] @bob:example.org:DEV000: LiveKit participant missing on no connection",
+  );
 });

 // Helper to create epoch'ed memberships$ and membershipsWithTransport$ from memberships observable.
@@ -11,6 +11,7 @@ import {
  type LivekitTransportConfig,
 } from "matrix-js-sdk/lib/matrixrtc";
 import { combineLatest, filter, map } from "rxjs";
+import { logger } from "matrix-js-sdk/lib/logger";

 import { type Behavior } from "../../Behavior";
 import { type IConnectionManager } from "./ConnectionManager";
@@ -110,13 +111,17 @@ export function createRemoteMatrixLivekitMembers$({
            const participants = transport
              ? managerData.getParticipantsForTransport(transport)
              : [];
-            const participant =
-              participants.find(
-                (p) => p.identity == membership.rtcBackendIdentity,
-              ) ?? null;
+            const matches = participants.filter(
+              (p) => p.identity == membership.rtcBackendIdentity,
+            );
+            const participant = matches[0] ?? null;
            const connection = transport
              ? managerData.getConnectionForTransport(transport)
              : null;
+            if (matches.length > 1)
+              logger.warn(
+                `[RemoteMatrixLivekitMembers] ${membership.rtcBackendIdentity}: ${matches.length} LiveKit participants match (sids ${matches.map((p) => p.sid).join(", ")}), using ${participant?.sid}`,
+              );

            yield {
              // This could just be the backend identity without the other keys.
@@ -133,8 +138,16 @@ export function createRemoteMatrixLivekitMembers$({
          }
        },
        // Each update where the key of the generator array do not change will result in updates to the `data$` behavior.
-        (scope, data$, userId, _deviceId, _memberId, _rtcBackendIdentity) => {
+        (scope, data$, userId, _deviceId, _memberId, rtcBackendIdentity) => {
          const { participant$, ...rest } = scope.splitBehavior(data$);
+          // Log whether the member could be matched to a LiveKit participant,
+          // since a tile shows "waiting for media" for as long as it cannot.
+          participant$.pipe(scope.bind()).subscribe((p) => {
+            const url = data$.value.connection?.transport.livekit_service_url;
+            logger.info(
+              `[RemoteMatrixLivekitMembers] ${rtcBackendIdentity}: LiveKit participant ${p ? `matched (${p.sid})` : "missing"} on ${url ?? "no connection"}`,
+            );
+          });
          // will only get called once per backend identity.
          // updates to data$ and as a result to displayName$ and mxcAvatarUrl$ are more frequent.
          return {
@@ -35,11 +35,7 @@ vi.mock("../widget", () => ({
  },
 }));

-it.each([
-  [MatrixRTCMode.Legacy],
-  [MatrixRTCMode.Compatibility],
-  [MatrixRTCMode.Matrix_2_0],
-])(
+it.each([[MatrixRTCMode.Compatibility], [MatrixRTCMode.Matrix_2_0]])(
  "expect leave when ElementWidgetActions.HangupCall is called (%s mode)",
  async (mode) => {
    const pr = Promise.withResolvers<string>();
@@ -16,7 +16,7 @@ import {
  ObservableScope,
  trackEpoch,
 } from "./ObservableScope";
-import { withTestScheduler } from "../utils/test";
+import { testScope, withTestScheduler } from "../utils/test";

 describe("Epoch", () => {
  it("should map the value correctly", () => {
@@ -87,7 +87,7 @@ describe("Epoch", () => {
  });

  it("behavior test", () => {
-    const scope = new ObservableScope();
+    const scope = testScope();
    const s$ = new Subject();
    const behavior$ = scope.behavior(s$, 0);
    behavior$.subscribe((value) => {
@@ -115,7 +115,7 @@ describe("Reconcile", () => {

  it("should wait clean up before processing next", async () => {
    vi.useFakeTimers();
-    const scope = new ObservableScope();
+    const scope = testScope();
    const behavior$ = new BehaviorSubject<number>(0);

    const setup = vi.fn().mockImplementation(async () => await sleep(100));
@@ -149,7 +149,7 @@ describe("Reconcile", () => {

  it("should skip intermediates values that are not setup", async () => {
    vi.useFakeTimers();
-    const scope = new ObservableScope();
+    const scope = testScope();
    const behavior$ = new BehaviorSubject<number>(0);

    const setup = vi
@@ -194,7 +194,7 @@ describe("Reconcile", () => {

  it("should wait for setup to complete before starting cleanup", async () => {
    vi.useFakeTimers();
-    const scope = new ObservableScope();
+    const scope = testScope();
    const behavior$ = new BehaviorSubject<number>(0);

    const setup = vi
@@ -237,3 +237,57 @@ describe("Reconcile", () => {
    expect(setup).toHaveBeenCalledWith(1);
  });
 });
+
+describe("behavior", () => {
+  it("warns with the tag and nesting depth, logging each new depth once", () => {
+    const warn = vi.spyOn(logger, "warn").mockImplementation(() => {});
+    const scope = testScope();
+    const source$ = new Subject<number>();
+    const behavior$ = scope.behavior(source$, 0, "tagged");
+    // Re-enter once on value 1 (depth 2), then a nested re-entry on value 2
+    // (depth 3), which is the shape needed to strand a middle subscriber.
+    behavior$.subscribe((v) => {
+      if (v === 1) source$.next(2);
+    });
+    behavior$.subscribe((v) => {
+      if (v === 2) source$.next(3);
+    });
+    const seen: number[] = [];
+    behavior$.subscribe((v) => seen.push(v));
+
+    source$.next(1);
+
+    const messages = warn.mock.calls.map((c) => c[0] as string);
+    expect(messages).toEqual([
+      expect.stringContaining("Behavior (tagged) re-entered at depth 2"),
+      expect.stringContaining("Behavior (tagged) re-entered at depth 3"),
+    ]);
+    warn.mock.calls.forEach((c) => expect(c[1]).toEqual(expect.any(String)));
+    // The behavior settles on the newest value while the last subscriber is
+    // left stranded on the oldest.
+    expect(behavior$.value).toBe(3);
+    expect(seen.at(-1)).toBe(1);
+  });
+
+  it("warns when the scope is ended while a behavior is mid-delivery", () => {
+    const warn = vi.spyOn(logger, "warn").mockImplementation(() => {});
+    const scope = new ObservableScope();
+    const source$ = new Subject<number>();
+    const behavior$ = scope.behavior(source$, 0);
+    behavior$.subscribe((v) => {
+      if (v === 1) scope.end();
+    });
+    // A derived behavior is bound to the scope, so ending the scope
+    // mid-delivery unsubscribes it before the value reaches it.
+    const derived$ = scope.behavior(behavior$);
+
+    source$.next(1);
+
+    expect(warn).toHaveBeenCalledWith(
+      expect.stringContaining("Scope ended while 1 of its behaviors"),
+      expect.any(String),
+    );
+    expect(behavior$.value).toBe(1);
+    expect(derived$.value).toBe(0);
+  });
+});
@@ -20,6 +20,8 @@ import {
  takeUntil,
 } from "rxjs";

+import { logger } from "matrix-js-sdk/lib/logger";
+
 import { type Behavior } from "./Behavior";

 type MonoTypeOperator = <T>(o: Observable<T>) => Observable<T>;
@@ -34,6 +36,12 @@ const nothing = Symbol("nothing");
 * A scope which limits the execution lifetime of its bound Observables.
 */
 export class ObservableScope {
+  /**
+   * Number of this scope's behaviors currently mid-delivery. Used to detect a
+   * scope being torn down synchronously from within one of its own emissions.
+   */
+  private delivering = 0;
+
  private readonly ended$ = new BehaviorSubject(false);

  private readonly bindImpl: MonoTypeOperator = takeUntil(
@@ -66,6 +74,9 @@ export class ObservableScope {
  public behavior<T>(
    setValue$: Observable<T>,
    initialValue: T | typeof nothing = nothing,
+    // An optional label used only in the re-entrancy warning below, so that a
+    // torn behavior can be identified from a rageshake.
+    tag?: string,
  ): Behavior<T> {
    const subject$ = new BehaviorSubject(initialValue);
    // Push values from the Observable into the BehaviorSubject.
@@ -73,11 +84,37 @@ export class ObservableScope {
    // they will no longer re-emit their current value upon subscription. We want
    // to support Observables that complete (for example `of({})`), so we have to
    // take care to not propagate the completion event.
+    // If a subscriber synchronously causes this same behavior to emit again,
+    // rxjs delivers the nested value to every subscriber first and then
+    // resumes delivering the outer (older) value to the remaining subscribers,
+    // leaving them permanently out of sync with the others. A single such
+    // re-entry can only strand a contiguous run of subscribers; stranding a
+    // subscriber in the middle of the list needs a nested (deeper) re-entry, so
+    // we report the depth and log each new depth (with a stack trace) rather
+    // than only the first occurrence, to make a nested re-entry visible.
+    let depth = 0;
+    let maxReportedDepth = 1;
    setValue$.pipe(this.bind(), distinctUntilChanged()).subscribe({
-      next(value) {
-        subject$.next(value);
+      next: (value) => {
+        if (depth > 0 && depth + 1 > maxReportedDepth) {
+          maxReportedDepth = depth + 1;
+          logger.warn(
+            `Behavior${tag ? ` (${tag})` : ""} re-entered at depth ${
+              depth + 1
+            } while delivering a value; later subscribers will be left with a stale value`,
+            new Error().stack,
+          );
+        }
+        depth++;
+        this.delivering++;
+        try {
+          subject$.next(value);
+        } finally {
+          depth--;
+          this.delivering--;
+        }
      },
-      error(err: unknown) {
+      error: (err: unknown) => {
        subject$.error(err);
      },
    });
@@ -90,6 +127,11 @@ export class ObservableScope {
   * Ends the scope, causing any bound Observables to complete.
   */
  public end(): void {
+    if (this.delivering > 0)
+      logger.warn(
+        `Scope ended while ${this.delivering} of its behaviors were still delivering a value; later subscribers will be left with a stale value`,
+        new Error().stack,
+      );
    this.ended$.next(true);
  }

@@ -171,7 +213,11 @@ export class ObservableScope {
    return Object.fromEntries(
      Object.keys(input$.value).map((key) => [
        `${key}$`,
-        this.behavior(input$.pipe(map((input) => input[key as keyof T]))),
+        this.behavior(
+          input$.pipe(map((input) => input[key as keyof T])),
+          nothing,
+          key,
+        ),
      ]),
    ) as SplitBehavior<T>;
  }
@@ -0,0 +1,41 @@
+/*
+Copyright 2025 Element Creations Ltd.
+
+SPDX-License-Identifier: AGPL-3.0-only OR LicenseRef-Element-Commercial
+Please see LICENSE in the repository root for full details.
+*/
+
+import { describe, expect, it, vi } from "vitest";
+import { MatrixRTCSessionEvent } from "matrix-js-sdk/lib/matrixrtc";
+import { EventEmitter } from "events";
+
+import { createKeyRotationSuppressed$ } from "./SessionBehaviors";
+import { testScope } from "../utils/test";
+
+describe("SessionBehaviors", () => {
+  describe("createKeyRotationSuppressed$", () => {
+    it("emits initial value from isKeyRotationSuppressed and updates when KeyRotationSuppressedChanged event is emitted", () => {
+      const scope = testScope();
+      const emitter = new EventEmitter();
+      const mockSession = Object.assign(emitter, {
+        on: vi.fn(),
+        off: vi.fn(),
+        isKeyRotationSuppressed: false,
+      });
+
+      const keyRotationSuppressed$ = createKeyRotationSuppressed$(
+        scope,
+        mockSession as any,
+      );
+
+      expect(keyRotationSuppressed$.value).toBe(false);
+      emitter.emit(MatrixRTCSessionEvent.KeyRotationSuppressedChanged, true);
+
+      expect(keyRotationSuppressed$.value).toBe(true);
+
+      emitter.emit(MatrixRTCSessionEvent.KeyRotationSuppressedChanged, false);
+
+      expect(keyRotationSuppressed$.value).toBe(false);
+    });
+  });
+});
@@ -88,3 +88,22 @@ export const createMemberships$ = (
    new Epoch(matrixRTCSession.memberships),
  );
 };
+
+/**
+ * Whether the session has grown large enough that MatrixRTC has stopped rotating the media
+ * encryption key. While this is true the key in use is still shared with new joiners, but no new
+ * key is generated when someone joins or leaves.
+ */
+export const createKeyRotationSuppressed$ = (
+  scope: ObservableScope,
+  matrixRTCSession: MatrixRTCSession,
+): Behavior<boolean> => {
+  return scope.behavior(
+    fromEvent(
+      matrixRTCSession,
+      MatrixRTCSessionEvent.KeyRotationSuppressedChanged,
+      (suppressed: boolean) => suppressed,
+    ),
+    matrixRTCSession.isKeyRotationSuppressed,
+  );
+};
@@ -0,0 +1,74 @@
+/*
+Copyright 2026 Element Creations Ltd.
+
+SPDX-License-Identifier: AGPL-3.0-only OR LicenseRef-Element-Commercial
+Please see LICENSE in the repository root for full details.
+*/
+
+import { test, expect } from "vitest";
+import {
+  type Alignment,
+  layoutShallowEquals,
+  type Layout,
+} from "./layout-types";
+import {
+  type SpotlightTileViewModel,
+  type GridTileViewModel,
+} from "./TileViewModel";
+import { BehaviorSubject } from "rxjs";
+
+const spotlightTile = {} as unknown as SpotlightTileViewModel;
+const gridTile = {} as unknown as GridTileViewModel;
+const pipAlignment$ = new BehaviorSubject<Alignment>({
+  inline: "end",
+  block: "end",
+});
+
+const spotlightExpanded: Layout = {
+  type: "spotlight-expanded",
+  spotlight: spotlightTile,
+  pipAlignment$,
+};
+
+const spotlightPortrait: Layout = {
+  type: "spotlight-portrait",
+  spotlight: spotlightTile,
+  grid: [gridTile],
+  setVisibleTiles: () => {},
+};
+
+test("layoutShallowEquals considers a layout to be equal to its shallow clone", () =>
+  expect(layoutShallowEquals(spotlightExpanded, { ...spotlightExpanded })).toBe(
+    true,
+  ));
+
+test("layoutShallowEquals detects a missing key", () => {
+  expect(
+    layoutShallowEquals(spotlightExpanded, {
+      ...spotlightExpanded,
+      pip: gridTile,
+    }),
+  ).toBe(false);
+  expect(
+    layoutShallowEquals(
+      { ...spotlightExpanded, pip: gridTile },
+      spotlightExpanded,
+    ),
+  ).toBe(false);
+});
+
+test("layoutShallowEquals considers grid arrays with equal contents to be equal", () =>
+  expect(
+    layoutShallowEquals(spotlightPortrait, {
+      ...spotlightPortrait,
+      grid: [...spotlightPortrait.grid],
+    }),
+  ).toBe(true));
+
+test("layoutShallowEquals detects grid arrays with different contents", () =>
+  expect(
+    layoutShallowEquals(spotlightPortrait, {
+      ...spotlightPortrait,
+      grid: [...spotlightPortrait.grid, gridTile],
+    }),
+  ).toBe(false));
@@ -16,6 +16,7 @@ import {
  type SpotlightTileViewModel,
 } from "./TileViewModel.ts";
 import { type Behavior } from "./Behavior.ts";
+import { shallowEquals as arrayShallowEquals } from "../utils/array.ts";

 export interface GridLayoutMedia {
  type: "grid";
@@ -140,3 +141,30 @@ export type Layout =
  | OneOnOneDesktopLayout
  | OneOnOneMobileLayout
  | PipLayout;
+
+/**
+ * Tests whether the top-level properties and array elements of layout `a` are
+ * equal to those of layout `b`. Useful for deduping redundant layout updates.
+ */
+export function layoutShallowEquals(a: Layout, b: Layout): boolean {
+  // If a and b have the same number of keys and every key in a is also in b,
+  // then they have the same keys.
+  const aKeys = Object.keys(a);
+  const bKeys = Object.keys(b);
+  if (aKeys.length !== bKeys.length) return false;
+
+  for (const key of aKeys) {
+    if (!(key in b)) return false;
+
+    // Now check that they have the same values.
+    const aValue = (a as any)[key];
+    const bValue = (b as any)[key];
+    if (Array.isArray(aValue) && Array.isArray(bValue)) {
+      // Special case for arrays so we can detect when the grid tiles arrays are
+      // essentially the same.
+      if (!arrayShallowEquals(aValue, bValue)) return false;
+    } else if (aValue !== bValue) return false;
+  }
+
+  return true;
+}
@@ -8,6 +8,7 @@ Please see LICENSE in the repository root for full details.

 import { type RemoteParticipant } from "livekit-client";
 import { combineLatest, map, of, switchMap } from "rxjs";
+import { logger } from "matrix-js-sdk/lib/logger";

 import { type Behavior } from "../Behavior";
 import { createVolumeControls, type VolumeControls } from "../VolumeControls";
@@ -45,6 +46,20 @@ export function createRemoteUserMedia(
    statsType: "inbound-rtp",
  });

+  const waitingForMedia$ = scope.behavior(
+    combineLatest(
+      [inputs.livekitRoom$, inputs.participant$],
+      (livekitRoom, participant) =>
+        // If livekitRoom is undefined, the user is not attempting to publish on
+        // any transport and so we shouldn't expect a participant. (They might
+        // be a subscribe-only bot for example.)
+        livekitRoom !== undefined && participant === null,
+    ),
+  );
+  waitingForMedia$.pipe(scope.bind()).subscribe((waiting) => {
+    logger.info(`[RemoteUserMedia ${inputs.id}] waitingForMedia=${waiting}`);
+  });
+
  return {
    ...baseUserMedia,
    ...createVolumeControls(scope, {
@@ -68,15 +83,6 @@ export function createRemoteUserMedia(
        ),
      ),
    ),
-    waitingForMedia$: scope.behavior(
-      combineLatest(
-        [inputs.livekitRoom$, inputs.participant$],
-        (livekitRoom, participant) =>
-          // If livekitRoom is undefined, the user is not attempting to publish on
-          // any transport and so we shouldn't expect a participant. (They might
-          // be a subscribe-only bot for example.)
-          livekitRoom !== undefined && participant === null,
-      ),
-    ),
+    waitingForMedia$,
  };
 }
@@ -9,9 +9,30 @@ import { expect, test } from "vitest";
 import { type Observable, of, Subject, switchMap } from "rxjs";

 import { withTestScheduler } from "./test";
-import { filterBehavior, generateItems, pauseWhen } from "./observable";
+import { or$, filterBehavior, generateItems, pauseWhen } from "./observable";
 import { type Behavior } from "../state/Behavior";

+const yesNo = {
+  y: true,
+  n: false,
+};
+
+test("or$", () => {
+  withTestScheduler(({ behavior, expectObservable }) => {
+    const input1Marbles = "ny--n--";
+    const input2Marbles = "n-y--n-";
+    const input3Marbles = "n--y--n";
+    const outputMarbles = "nyyyyyn";
+    expectObservable(
+      or$(
+        behavior(input1Marbles, yesNo),
+        behavior(input2Marbles, yesNo),
+        behavior(input3Marbles, yesNo),
+      ),
+    ).toBe(outputMarbles, yesNo);
+  });
+});
+
 test("pauseWhen", () => {
  withTestScheduler(({ behavior, expectObservable }) => {
    const inputMarbles = " abcdefgh-i-jk-";
@@ -114,13 +114,11 @@ export function getValue<T>(state$: Observable<T>): T {
 }

 /**
- * Creates an Observable that has a value of true whenever all its inputs are
- * true.
- *
- * @public
+ * Creates an Observable that has a value of true whenever some of its inputs
+ * are true.
 */
-export function and$(...inputs: Observable<boolean>[]): Observable<boolean> {
-  return combineLatest(inputs, (...flags) => flags.every((flag) => flag));
+export function or$(...inputs: Observable<boolean>[]): Observable<boolean> {
+  return combineLatest(inputs, (...flags) => flags.some((flag) => flag));
 }

 /**
@@ -229,38 +227,6 @@ export function filterBehavior<T, S extends T>(
    );
 }

-/**
- * Maps a changing input value to an item whose lifetime is tied to a certain
- * computed key. The item may capture some dynamic data from the input.
- */
-export function generateItem<
-  Input,
-  Keys extends [unknown, ...unknown[]],
-  Data,
-  Item,
->(
-  name: string,
-  generator: (input: Input) => { keys: readonly [...Keys]; data: Data },
-  factory: (
-    scope: ObservableScope,
-    data$: Behavior<Data>,
-    ...keys: Keys
-  ) => Item,
-): OperatorFunction<Input, Item> {
-  return (input$) =>
-    input$.pipe(
-      generateItemsInternal(
-        name,
-        function* (input) {
-          yield generator(input);
-        },
-        factory,
-        (items) => items,
-      ),
-      map(([item]) => item),
-    );
-}
-
 function generateItemsInternal<
  Input,
  Keys extends [unknown, ...unknown[]],
@@ -42,6 +42,8 @@ import { MatrixRTCMode } from "../config/ConfigOptions";
 import { createCallFooterViewModel } from "../components/CallFooterViewModel";
 import { type FooterSnapshot } from "../components/CallFooter";
 import { type ViewModel } from "../state/ViewModel";
+import { createDeveloperSettingsTabViewModel } from "../settings/DeveloperSettingsTabViewModel";
+import { type DeveloperSettingsSnapshot } from "../settings/DeveloperSettingsTab";

 mockConfig({ livekit: { livekit_service_url: "https://example.com" } });

@@ -140,6 +142,7 @@ export function getBasicCallViewModelEnvironment(
 ): {
  vm: CallViewModel;
  footerVm: ViewModel<FooterSnapshot>;
+  developerSettingsVm: ViewModel<DeveloperSettingsSnapshot>;
  rtcMemberships$: BehaviorSubject<CallMembership[]>;
  rtcSession: MockRTCSession;
  handRaisedSubject$: BehaviorSubject<Record<string, RaisedHandInfo>>;
@@ -171,7 +174,7 @@ export function getBasicCallViewModelEnvironment(
          setE2EEEnabled: async () => Promise.resolve(),
        }),
      connectionState$: constant(ConnectionState.Connected),
-      matrixRTCMode$: constant(MatrixRTCMode.Legacy),
+      matrixRTCMode: MatrixRTCMode.Compatibility,
      ...callViewModelOptions,
    },
    handRaisedSubject$,
@@ -188,6 +191,7 @@ export function getBasicCallViewModelEnvironment(
  return {
    vm,
    footerVm,
+    developerSettingsVm: createDeveloperSettingsTabViewModel(testScope(), vm),
    rtcMemberships$,
    rtcSession,
    handRaisedSubject$: handRaisedSubject$,
@@ -237,7 +237,7 @@ export function mockRtcMembership(
      fociPreferred: [exampleTransport],
      focusActive: {
        type: "livekit" as const,
-        focus_selection: "oldest_membership" as const,
+        focus_selection: "multi_sfu" as const,
      },
      callId: "",
      membership: {},
@@ -463,9 +463,6 @@ export class MockRTCSession extends TypedEventEmitter<
    session.reemitEncryptionKeys = vi
      .fn<() => void>()
      .mockReturnValue(undefined);
-    session.getOldestMembership = vi
-      .fn<() => CallMembership | undefined>()
-      .mockReturnValue(this.memberships[0]);

    return session;
  }
@@ -490,6 +487,8 @@ export class MockRTCSession extends TypedEventEmitter<
    return this.joined;
  }

+  public isKeyRotationSuppressed = false;
+
  public withMemberships(
    rtcMembers$: Behavior<Partial<CallMembership>[]>,
  ): MockRTCSession {
@@ -27,8 +27,6 @@ export default defineConfig((env) =>
            data: {
              matrix_rtc_session: {
                wait_for_key_rotation_ms: 5000,
-                delayed_leave_event_restart_ms: 4000,
-                delayed_leave_event_delay_ms: 18000,
              },
            },
          },
Author	SHA1	Message	Date
Robin	c4f5d162d2	Merge pull request #4248 from element-hq/backport-delayed-leave-timings Adapt delayed leave timings when delegation is available	2026-09-09 10:41:21 +02:00
Robin	5ee096ce6c	Delegate delayed leaves in LocalMember rather than LocalTransport IMO this is where the delegation calls should have lived all along, since the leave event is part of the membership lifecycle, and we otherwise end up with an awkward hack to ignore transport updates. Doing this now ensures that the client won't send any delegation requests if delegation is unsupported, and prepares the code for a future change in which we use the dedicated delegation endpoint from the CS API.	2026-09-09 09:54:39 +02:00
Robin	95cbea3736	Base JWT service endpoint choice directly on the MatrixRTC mode Since we removed the extra 'legacy' mode, meaning there's nothing simplified anymore by translating things over to a JWT service version. (Also, simplify some things by making the mode static for the duration of a call.)	2026-09-09 09:54:39 +02:00
Robin	ea999d5ac8	Reflect session config always being defined	2026-09-09 09:54:39 +02:00
Robin	6ac54e3542	Give JWT token fetch procedures more appropriate names	2026-09-09 09:54:39 +02:00
Robin	4f4395f18c	Make delegation support check fail immediately in case of CORS errors	2026-09-09 09:54:39 +02:00
Robin	15ec537a6b	Adapt delayed leave timings when delegation is available Splits the config options for the timings of a delayed leave event into two sets: one for when delegation is available (as you can relax the timings and get more stable calls this way), and another for when it's unavailable (as we must continue to gracefully downgrade even after Matrix 2.0 is fully rolled out). This works by bluntly hitting the delegation endpoints without auth before joining to check for a 404.	2026-09-09 09:54:39 +02:00
Johannes Marbach	14c61db43d	Merge pull request #4241 from element-hq/matthew/encryption-mismatch-logging Log track encryption flag and cryptor events for remote tracks	2026-09-07 13:30:50 +02:00
Johannes Marbach	65e1b845a7	Apply suggestion from @Johennes	2026-09-07 13:18:00 +02:00
Matthew Hodgson	eddd95ba41	Log track encryption flag and cryptor events for remote tracks Extends the [RemoteTracks] logging from #4235 with the per-publication encryption flag and the ParticipantEncryptionStatusChanged / EncryptionError room events. If a publisher encrypts frames while the subscriber believes the publication is unencrypted, livekit-client bypasses the cryptor and hands raw ciphertext to the decoder, which is audible as loud noise bursts. The reverse mismatch (or a missing/invalid key) drops frames instead. Neither case is visible in a rageshake today.	2026-09-07 11:53:01 +01:00
Johannes Marbach	a376280c91	Merge pull request #4240 from element-hq/renovate/livekit-client Update dependency livekit-client to v2.22.2	2026-09-07 08:07:34 +02:00
renovate[bot]	1e9a5cfa20	Update ghcr.io/element-hq/element-web:develop Docker digest to 6ed62b2 (#4239 ) Co-authored-by: renovate[bot] <29139614+renovate[bot]@users.noreply.github.com>	2026-09-07 02:04:08 +00:00
renovate[bot]	d204b36b55	Update dependency livekit-client to v2.22.2	2026-09-07 01:56:21 +00:00
renovate[bot]	a03f23e720	Update ghcr.io/element-hq/element-web:develop Docker digest to a4e9c8c (#4238 ) Co-authored-by: renovate[bot] <29139614+renovate[bot]@users.noreply.github.com>	2026-09-06 02:02:35 +00:00
renovate[bot]	210d94af18	Update ghcr.io/element-hq/element-web:develop Docker digest to 3221e92 (#4237 ) Co-authored-by: renovate[bot] <29139614+renovate[bot]@users.noreply.github.com>	2026-09-05 02:55:22 +00:00
renovate[bot]andRobin	70f6e785ce	Update ghcr.io/element-hq/element-web:develop Docker digest to 724b468 (#4226 ) * Update ghcr.io/element-hq/element-web:develop Docker digest to a9bd290 * Fix Element Web integration tests --------- Co-authored-by: renovate[bot] <29139614+renovate[bot]@users.noreply.github.com> Co-authored-by: Robin <robin@robin.town>	2026-09-04 09:18:19 +00:00
Johannes Marbach	0ad31cfc4d	Merge pull request #4232 from element-hq/matthew/screenshare-watchdog Surface screen share failures instead of silently doing nothing	2026-09-04 07:54:23 +02:00
Johannes Marbach	bae8da3ddc	Reformat	2026-09-04 07:44:16 +02:00
Johannes Marbach	b22eba7af9	Add further tests	2026-09-04 07:39:58 +02:00
Robin	cd7510e054	Merge pull request #4235 from element-hq/matthew/remote-track-logging Log remote participant and track events per LiveKit connection	2026-09-03 20:22:27 +02:00
Robin	054913d17d	Use testScope in ObservableScope tests	2026-09-03 20:11:18 +02:00
Matthew Hodgson	dee4b05695	Diagnostics for duplicate participant matches and mid-delivery scope teardown Warn when ConnectionManagerData merges participants from a second connection to the same SFU URL, when more than one LiveKit participant matches a member's backend identity, and when a scope is ended while one of its behaviors is still delivering a value (which strands the later bound subscribers on the old value). The per-member match log now also names the connection the participant came from.	2026-09-03 18:43:18 +01:00
Matthew Hodgson	b1393998a7	Report re-entrancy depth and tag torn behaviors A single re-entrant emission can only strand a contiguous run of a behavior's subscribers, so a tile that is both 'speaking' and 'waiting for media' (a middle subscriber stranded) implies a nested re-entry. Report the nesting depth and log each new depth once instead of only the first re-entry, and tag splitBehavior-derived behaviors with their field name so the warning identifies which behavior tore.	2026-09-03 18:08:53 +01:00
Matthew Hodgson	2ab2197c01	Warn when a behavior is re-entered while delivering a value rxjs delivers a nested emission to every subscriber and then resumes delivering the outer, older value to the remaining subscribers, which leaves them permanently out of sync. Log the first occurrence per behavior with a stack trace so the re-entrant path can be identified from a rageshake.	2026-09-03 17:26:38 +01:00
Matthew Hodgson	0b95fd5a65	Log remote member participant matching and tile waiting state A tile shows "Waiting for media" for as long as its MatrixRTC member cannot be matched to a LiveKit participant. Log each transition of that match and of the tile's waitingForMedia state so rageshakes can tie a stuck tile to the LiveKit participant and track events.	2026-09-03 17:07:08 +01:00
Matthew Hodgson	f8f5caaa09	Log remote participant and track events per LiveKit connection Rageshakes contained nothing about the state of remote tracks, so a tile showing the wrong mute or video state for a member could not be diagnosed. Log connect/disconnect, publish/unpublish, subscribe/ unsubscribe, subscription failures, remote mute/unmute and stream state changes on each Connection's logger, and remove the listeners when the connection scope ends.	2026-09-03 16:50:30 +01:00
Matthew Hodgson	bf5482db8c	Surface screen share failures instead of silently doing nothing toggleScreenSharing only had `.catch(logger.error)`, so a getDisplayMedia request that hangs (element-call-rageshakes#17152: Element Desktop on Windows, the user pressed the screen share button 14 times in 25 seconds and the log shows nothing but the toggle lines and livekit-client's "waiting for pending publication promise timed out") left the user with a button that does nothing and us with no evidence of why. Log when a toggle is requested and when it completes or fails, with the elapsed time, so a hang is visible in the logs. Explicit failures other than the user cancelling the picker show as a non-modal "Could not start screen sharing" toast. Nothing is inferred from a toggle taking a long time: the user may simply be choosing what to share.	2026-09-03 15:01:35 +01:00
Johannes Marbach	d765267c43	Merge pull request #4229 from element-hq/matthew/fix-rageshake-flush Fix periodic rageshake log flush never running	2026-09-03 07:29:51 +02:00
Matthew Hodgson	698a98a9c8	Test that logs are flushed to IndexedDB periodically	2026-09-02 18:55:18 +01:00
Matthew Hodgson	2db24e2868	Fix periodic rageshake log flush never running The throttled flush callback returned this.flush instead of calling it (regressed in #2607), so logs were only persisted to IndexedDB on rageshake submission or beforeunload. When the host removes the widget iframe at hangup, the whole call's logs were lost, so a rageshake filed from a later call carries nothing from the affected one.	2026-09-02 18:46:12 +01:00
renovate[bot]	efdee7dcdb	Update ghcr.io/element-hq/element-web:develop Docker digest to c107ec3 (#4221 ) Co-authored-by: renovate[bot] <29139614+renovate[bot]@users.noreply.github.com>	2026-09-01 02:53:52 +00:00
Johannes Marbach	d7d3dcde58	Merge pull request #4219 from element-hq/renovate/matrix-widget-api Update dependency matrix-widget-api to v1.19.0	2026-08-31 07:34:07 +02:00
renovate[bot]	9330b907fc	Update ghcr.io/element-hq/element-web:develop Docker digest to 7c5eb96 (#4218 ) Co-authored-by: renovate[bot] <29139614+renovate[bot]@users.noreply.github.com>	2026-08-31 00:49:32 +00:00
renovate[bot]	256ff7a0b6	Update dependency matrix-widget-api to v1.19.0	2026-08-31 00:40:41 +00:00
renovate[bot]	6ddcc15206	Update ghcr.io/element-hq/element-web:develop Docker digest to e8727bb (#4216 ) Co-authored-by: renovate[bot] <29139614+renovate[bot]@users.noreply.github.com>	2026-08-30 01:09:28 +00:00
renovate[bot]	a56e934841	Update ghcr.io/element-hq/element-web:develop Docker digest to e29b408 (#4215 ) Co-authored-by: renovate[bot] <29139614+renovate[bot]@users.noreply.github.com>	2026-08-29 02:25:08 +00:00
Timo	efde51b8c1	Merge pull request #4172 from element-hq/toger5/add-key-rotation-participant-limit Add key rotation participant limit to devtools and config.json	2026-08-28 16:38:20 +02:00
Timo K.	2a7c6c3c06	Oh dear test coverage...	2026-08-28 16:22:08 +02:00
Timo K.	5bab17b668	Update InCallView.tsx	2026-08-28 15:52:52 +02:00
Timo K.	d7d28a1b55	formatting	2026-08-28 15:50:48 +02:00
Timo K.	790bd1e2bf	Update LocalMember.test.ts	2026-08-28 15:44:46 +02:00
Timo K.	17231e545c	Update DeveloperSettingsTab.test.tsx	2026-08-28 15:38:57 +02:00
Timo K.	17d9d19c91	ObservableScope -> testScope	2026-08-28 15:32:59 +02:00
Timo K.	3d37abf490	merge two tests	2026-08-28 15:31:23 +02:00
Timo K.	92f504d886	remove oldest membership mocking	2026-08-28 15:29:16 +02:00
Timo K.	b0d098e065	Merge branch 'main' into toger5/add-key-rotation-participant-limit	2026-08-28 15:27:43 +02:00
Timo K.	a526a8ae19	Update config.sample.json	2026-08-28 15:26:00 +02:00
Timo K.	1146d3820a	review. Dont pass full vm to developer settings	2026-08-28 15:20:49 +02:00
renovate[bot]	a4dda428f5	Update ghcr.io/element-hq/element-web:develop Docker digest to 133160c (#4213 ) Co-authored-by: renovate[bot] <29139614+renovate[bot]@users.noreply.github.com>	2026-08-28 03:01:16 +00:00
renovate[bot]	5982586f24	Update ghcr.io/element-hq/element-web:develop Docker digest to f163e7a (#4211 ) Co-authored-by: renovate[bot] <29139614+renovate[bot]@users.noreply.github.com>	2026-08-27 01:06:37 +00:00
Robin	e6b4aae714	Merge pull request #4208 from element-hq/remove-legacy-mode Remove MatrixRTC legacy mode	2026-08-26 20:27:46 +02:00
Robin	ede29bdf1b	Remove MatrixRTC legacy mode This is the mode in which we sent membership events with the 'oldest membership' transport selection algorithm, which stopped being the default back in version 0.21.0. Users will no longer be able to select this mode in developer settings, and admins will no longer be able to select legacy mode through the config either. The app will still continue to support receiving membership events with the 'oldest membership' transport selection algorithm from others, however.	2026-08-26 19:51:12 +02:00
Robin	b5b2bd2193	Merge pull request #4207 from element-hq/legacy-member-events Remove feature_use_device_session_member_events	2026-08-26 19:49:20 +02:00
Robin	21ca382306	Fix tests	2026-08-26 19:14:19 +02:00
Robin	25e379546e	Retry CI	2026-08-26 18:32:14 +02:00
Robin	0443ef55d1	Remove feature_use_device_session_member_events Support for events with an array of memberships from different devices was removed over a year ago in matrix-js-sdk ffd3c9575e9def576739baf6b1dc329b0db55c0c.	2026-08-26 17:05:38 +02:00
renovate[bot]	465c413691	Update ghcr.io/element-hq/element-web:develop Docker digest to 0332028 (#4204 ) Co-authored-by: renovate[bot] <29139614+renovate[bot]@users.noreply.github.com>	2026-08-26 09:54:28 +02:00
Timo K.	06b9105cee	Update DeveloperSettingsTab.test.tsx	2026-08-25 23:32:22 +02:00
Timo K.	2b5979162a	add more tests	2026-08-25 23:30:22 +02:00
Timo K.	5399f14012	add tests	2026-08-25 22:43:15 +02:00
Timo K.	f2ffb06f6c	use develop branch of matrix-js-sdk	2026-08-25 22:03:59 +02:00
Johannes Marbach	6cf0e1df51	Merge pull request #4196 from element-hq/renovate/compound Update dependency @vector-im/compound-design-tokens to v10.2.4	2026-08-24 11:00:01 +02:00
renovate[bot]	bfa20ef747	Update ghcr.io/element-hq/element-web:develop Docker digest to ccee84c (#4195 ) Co-authored-by: renovate[bot] <29139614+renovate[bot]@users.noreply.github.com>	2026-08-24 09:35:45 +02:00
Johannes Marbach	5955d22c1b	Merge pull request #4197 from element-hq/renovate/livekit-client Update dependency livekit-client to v2.22.0	2026-08-24 08:51:19 +02:00
renovate[bot]	ce4426858b	Update dependency livekit-client to v2.22.0	2026-08-24 00:37:56 +00:00
renovate[bot]	4ec75ecda4	Update dependency @vector-im/compound-design-tokens to v10.2.4	2026-08-24 00:37:19 +00:00
Timo	b51a33c4e1	Merge pull request #4194 from element-hq/toger5/rtc-mode-documentation Add docs about currently used matrixRTC mode	2026-08-21 17:44:10 +02:00
Timo K.	c3837464a3	Add docs about currently used matrixRTC mode	2026-08-21 12:04:24 +02:00
Timo	e7372d4c03	Merge pull request #4190 from element-hq/toger5/update-branche-ci-main `livekit` -> `main` Update branches used in ci and tooling to main	2026-08-21 11:55:32 +02:00
renovate[bot]	69eddd7846	Update ghcr.io/element-hq/element-web:develop Docker digest to ee5b90c (#4193 ) Co-authored-by: renovate[bot] <29139614+renovate[bot]@users.noreply.github.com>	2026-08-21 07:10:30 +02:00
Timo K.	de3e4c6a78	update branches used in ci and tooling to main	2026-08-20 15:44:13 +02:00
Robin	3abc5a0435	Merge pull request #4185 from element-hq/pip-no-modals Hide reactions interface in PiP mode	2026-08-20 15:16:22 +02:00
Johannes Marbach	8e20d48b1d	Merge pull request #4187 from element-hq/johannes/label-sync-pat Switch label sync workflow to LABEL_SYNC_GITHUB_TOKEN	2026-08-20 10:05:12 +02:00
Johannes Marbach	ff57c217aa	Switch label sync workflow to LABEL_SYNC_GITHUB_TOKEN	2026-08-20 09:21:42 +02:00
renovate[bot]	b60e7452b7	Update ghcr.io/element-hq/element-web:develop Docker digest to a416986 (#4186 ) Co-authored-by: renovate[bot] <29139614+renovate[bot]@users.noreply.github.com>	2026-08-20 07:14:58 +02:00
Robin	1c03ad335c	Hide reactions interface in PiP mode	2026-08-19 17:44:45 +02:00
Robin	87873b726f	Merge pull request #4183 from element-hq/msc4519-docs Update docs to reflect transports endpoint moving to MSC4519	2026-08-19 15:58:28 +02:00
Robin	3448a3a2ef	Update docs to reflect transports endpoint moving to MSC4519 This is linked from the 0.24.0 release notes, so even more important for it to be up to date.	2026-08-19 11:48:48 +02:00
Robin	c625fb8845	Merge pull request #4180 from element-hq/background-pngs Performance: Use PNGs for the background gradients	2026-08-19 10:40:07 +02:00
Robin	cab9698fc7	Undo breakpoint change made during testing	2026-08-19 10:24:26 +02:00
Robin	7410bd8a82	Merge pull request #4181 from element-hq/lobby-video-border Fix lobby video preview losing its rounded corners in Firefox	2026-08-19 08:54:57 +02:00
renovate[bot]	f17670b731	Update ghcr.io/element-hq/element-web:develop Docker digest to 9ac7cde (#4182 ) Co-authored-by: renovate[bot] <29139614+renovate[bot]@users.noreply.github.com>	2026-08-19 08:09:58 +02:00
Robin	33a0653ea5	Fix lobby video preview losing its rounded corners in Firefox Same fix as `e1bc4a096b`, but for the video preview in the lobby.	2026-08-18 17:49:14 +02:00
Robin	b1c29e9a41	Performance: Use PNGs for the background gradients It turns out that for a blurry gradient background, low-res raster images look very convincing when scaled up and interpolated. That means that we can rasterize our gradient SVGs for improved paint performance when resizing the window, while still keeping them quite lightweight (just a couple of kilobytes each).	2026-08-18 17:30:12 +02:00
Robin	ad92892063	Merge pull request #4177 from element-hq/ignore-layout-updates Performance: Ignore redundant layout updates	2026-08-18 15:39:49 +02:00
Robin	1a827e0930	Merge pull request #4178 from element-hq/tiles-debug-performance Performance: Isolate tile store debug info in its own component	2026-08-18 13:05:02 +02:00
Robin	a1b37bb3c9	Performance: Ignore redundant layout updates When someone starts or stops speaking, the layout will often be recomputed only to find out that there is ultimately no layout change. We can ignore these redundant updates to avoid re-rendering the InCallView and Grid components, which are relatively slow. For that specific, common case, this reduces JS CPU usage by as much as 70% in my testing.	2026-08-18 08:42:59 +02:00
renovate[bot]	061d25a54c	Update ghcr.io/element-hq/element-web:develop Docker digest to 073e6a4 (#4176 ) Co-authored-by: renovate[bot] <29139614+renovate[bot]@users.noreply.github.com>	2026-08-18 07:48:41 +02:00
Timo K.	9999a755dd	Update pnpm-lock.yaml	2026-08-17 12:33:31 +02:00
Timo K.	9857ed53e3	Add key roatation limit to config.json	2026-08-17 11:17:22 +02:00
Timo K.	0aa9d94826	add key rotation debug information	2026-08-17 11:17:22 +02:00
Timo K.	f2622f0032	Add vm to developer settings tab	2026-08-17 11:17:22 +02:00