Fall back to publishing on a remote SFU if possible

Support migration to new LiveKit transport types and endpoints

.github/labels.yml

@@ -102,6 +102,9 @@
 - name: "backport-candidate"
   description: "Something that is a candidate for backport to a particular release branch"
   color: "0B8D85"
+- name: "Claude-Review"
+  description: "Request code review from Claude"
+  color: "e57157"
 - name: "customer-retainer"
   color: "F44A5F"
 - name: "dependencies"

.github/workflows/build-element-call.yaml

@@ -44,7 +44,9 @@ jobs:
           node-version-file: ".node-version"
       - name: Install dependencies
         # ignore-pnpmfile should never be commited. Make CI crash if it happened (`pnpmfileChecksum` is present)
-        run: "pnpm install --frozen-lockfile --ignore-pnpmfile"
+        run: "scripts/layered.sh --ignore-pnpmfile"
+        env:
+          PR_HEAD_REPO_OWNER: ${{ github.event.pull_request.head.repo.owner.login }}
       - name: Build Element Call
         run: pnpm run build:"$PACKAGE":"$BUILD_MODE"
         env:

.github/workflows/claude.yaml

@@ -0,0 +1,90 @@
+name: Claude
+on:
+  pull_request:
+    types: [labeled]
+
+permissions:
+  # The action exchanges the GitHub OIDC token for a short-lived Anthropic
+  # access token. GitHub API access goes through CLAUDE_GH_TOKEN instead.
+  id-token: write
+
+jobs:
+  review:
+    name: Review
+    # Only run on labelling and skip forks.
+    if: github.event.label.name == 'Claude-Review' && github.event.pull_request.head.repo.full_name == github.repository
+    runs-on: ubuntu-latest
+    steps:
+      - name: Checkout code
+        uses: actions/checkout@11d5960a326750d5838078e36cf38b85af677262 # v4.4.0
+        with:
+          # The review looks at the individual commits, not just the combined diff
+          fetch-depth: 0
+          persist-credentials: false
+      - name: Review
+        uses: anthropics/claude-code-action@6fed3ca145920b639991cb756090506e1bcaf515 # v1.0.245
+        with:
+          anthropic_federation_rule_id: fdrl_01XQmWo4nka1ZTqZdsdeScyr
+          anthropic_organization_id: dfbc9a23-d636-4653-8970-035204ef60fa
+          anthropic_service_account_id: svac_018Ay5qaA7ZW8X7XsbdekqUM
+          anthropic_workspace_id: wrkspc_01Aw8LHjBS6fZysu9yqzYifW
+          # The token used here must grant read access to code, issues, and metadata as well as
+          # read and write access to pull requests.
+          github_token: ${{ secrets.CLAUDE_GH_TOKEN }}
+          use_sticky_comment: true
+          track_progress: true
+          prompt: |
+            Review this pull request under the following (and no further) angles:
+
+            1. Scope:
+
+               - Does the PR do one thing?
+               - Is the PR free of unrelated fixes and drive-by refactorings?
+               - If the PR is large, could it reasonably be split into smaller PRs
+                 that still deliver value?
+
+            2. Commits:
+               
+               - Is the work split into self-contained commits of reasonable size?
+               - Are the commits arranged in a sensible order?
+               - Have required refactorings been split out into separate commits?
+               - Is the history free of "wip", checkpoint and fixup-style commits
+                 which only correct an earlier commit in the same PR?
+
+            3. Code:
+
+               - Are the code changes functionally correct?
+               - Do the changes introduce new security vulnerabilities or metadata
+                 leaks?
+               - Is the new code performant enough?
+               - Don't check anything that is already validated via other GitHub
+                 workflows like linting, formatting or tests passing.
+
+            Read the commits themselves with `git log` and `git diff` against
+            the base branch of the PR.
+
+            Drop any findings that are outside the above review angles or that don't
+            require resolution. Grade the severity of each finding as either "🟡 low",
+            "🟠 medium" or "🔴 high". Devise at least one possible resolution for each
+            finding.
+
+            Report the graded findings and resolutions from the "Code" angle as inline
+            comments. Add a footer "_-- Finding from automated review_" to each inline
+            comment.
+
+            Finally, report your overall result as PR comment. Start your message with
+            "# Automated review". Then add one section per review angle with:
+
+            - A verdict of "✅ PASS" or "❌ NEEDS WORK"
+            - A bullet list summarizing the remaining non-inlined graded findings and
+              resolutions (as nested bullets).
+
+            Be brief and concise in all your communication. Do not mention what you have
+            not covered and don't bring up issues that have already been fixed.
+
+            Use Markdown links for anything that can be navigated to on GitHub such
+            as files, commits, issues, pull requests, workflow runs, etc.
+          claude_args: |
+            --model claude-fable-5-1
+            --allowedTools "mcp__github_inline_comment__create_inline_comment,Bash(git log:*),Bash(git diff:*),Bash(git show:*)"
+            --max-turns 50

.github/workflows/lint.yaml

@@ -1,6 +1,12 @@
 name: Lint, format & type check
 on:
   pull_request: {}
+  workflow_call:
+    inputs:
+      matrix-js-sdk-sha:
+        type: string
+        required: false
+        description: The matrix-js-sdk commit to build against instead of the locked one
 jobs:
   lint:
     name: Lint, format & type check
@@ -9,6 +15,8 @@ jobs:
       - name: Checkout code
         uses: actions/checkout@34e114876b0b11c390a56381ad16ebd13914f8d5 # v4
         with:
+          # Inside a called workflow, github.repository is the caller so we need to make sure to still check out the EC repo here.
+          repository: ${{ inputs.matrix-js-sdk-sha && 'element-hq/element-call' || github.repository }}
           persist-credentials: false
       - name: Enable Corepack
         run: corepack enable
@@ -19,7 +27,10 @@ jobs:
           node-version-file: ".node-version"
       - name: Install dependencies
         # ignore-pnpmfile should never be commited. Make CI crash if it happened (`pnpmfileChecksum` is present)
-        run: "pnpm install --frozen-lockfile --ignore-pnpmfile"
+        run: "scripts/layered.sh --ignore-pnpmfile"
+        env:
+          PR_HEAD_REPO_OWNER: ${{ github.event.pull_request.head.repo.owner.login }}
+          JS_SDK_GITHUB_BASE_REF: ${{ inputs.matrix-js-sdk-sha }}
       - name: Formatting
         run: "pnpm run format:check"
       - name: i18n

.github/workflows/test.yaml

@@ -3,6 +3,25 @@ on:
   pull_request: {}
   push:
     branches: [main]
+  workflow_call:
+    inputs:
+      matrix-js-sdk-sha:
+        type: string
+        required: false
+        description: The matrix-js-sdk commit to build against instead of the locked one
+      disable_coverage:
+        type: boolean
+        required: false
+        default: false
+        description: Skip generating and uploading coverage reports
+      disable_e2e_tests:
+        type: boolean
+        required: false
+        default: false
+        description: Skip the end-to-end tests
+    secrets:
+      CODECOV_TOKEN:
+        required: false
 jobs:
   vitest:
     name: Run unit tests
@@ -11,6 +30,8 @@ jobs:
       - name: Checkout code
         uses: actions/checkout@34e114876b0b11c390a56381ad16ebd13914f8d5 # v4
         with:
+          # Inside a called workflow, github.repository is the caller so we need to make sure to still check out the EC repo here.
+          repository: ${{ inputs.matrix-js-sdk-sha && 'element-hq/element-call' || github.repository }}
           persist-credentials: false
       - name: Enable Corepack
         run: corepack enable
@@ -21,7 +42,10 @@ jobs:
           node-version-file: ".node-version"
       - name: Install dependencies
         # ignore-pnpmfile should never be commited. Make CI crash if it happened (`pnpmfileChecksum` is present)
-        run: "pnpm install --frozen-lockfile --ignore-pnpmfile"
+        run: "scripts/layered.sh --ignore-pnpmfile"
+        env:
+          PR_HEAD_REPO_OWNER: ${{ github.event.pull_request.head.repo.owner.login }}
+          JS_SDK_GITHUB_BASE_REF: ${{ inputs.matrix-js-sdk-sha }}
       - name: Get Playwright version
         run: echo "PLAYWRIGHT_VERSION=$(pnpm list @playwright/test --depth=0 --json | jq -r '.[0].devDependencies["@playwright/test"].version')" >> $GITHUB_ENV
       - name: Cache Playwright binaries
@@ -35,8 +59,11 @@ jobs:
         if: steps.playwright-cache.outputs.cache-hit != 'true'
         run: pnpm playwright install --with-deps
       - name: Vitest
-        run: "pnpm run test:coverage"
+        run: pnpm vitest --coverage.enabled="$ENABLE_COVERAGE"
+        env:
+          ENABLE_COVERAGE: ${{ !inputs.disable_coverage }}
       - name: Upload to codecov
+        if: ${{ !inputs.disable_coverage }}
         uses: codecov/codecov-action@fb8b3582c8e4def4969c97caa2f19720cb33a72f # v7
         env:
           CODECOV_TOKEN: ${{ secrets.CODECOV_TOKEN }}
@@ -45,11 +72,14 @@ jobs:
           fail_ci_if_error: true
   playwright:
     name: Run end-to-end tests
+    if: ${{ !inputs.disable_e2e_tests }}
     timeout-minutes: 60
     runs-on: ubuntu-latest
     steps:
       - uses: actions/checkout@34e114876b0b11c390a56381ad16ebd13914f8d5 # v4
         with:
+          # Inside a called workflow, github.repository is the caller so we need to make sure to still check out the EC repo here.
+          repository: ${{ inputs.matrix-js-sdk-sha && 'element-hq/element-call' || github.repository }}
           persist-credentials: false
       - name: Enable Corepack
         run: corepack enable
@@ -59,7 +89,10 @@ jobs:
           node-version-file: ".node-version"
       - name: Install dependencies
         # ignore-pnpmfile should never be commited. Make CI crash if it happened (`pnpmfileChecksum` is present)
-        run: pnpm install --frozen-lockfile --ignore-pnpmfile
+        run: scripts/layered.sh --ignore-pnpmfile
+        env:
+          PR_HEAD_REPO_OWNER: ${{ github.event.pull_request.head.repo.owner.login }}
+          JS_SDK_GITHUB_BASE_REF: ${{ inputs.matrix-js-sdk-sha }}
       - name: Get Playwright version
         run: echo "PLAYWRIGHT_VERSION=$(pnpm list @playwright/test --depth=0 --json | jq -r '.[0].devDependencies["@playwright/test"].version')" >> $GITHUB_ENV
       - name: Cache Playwright binaries

.gitignore

@@ -41,3 +41,6 @@ yarn-error.log
 
 *storybook.log
 storybook-static
+
+# Nested checkout made by scripts/layered.sh
+/matrix-js-sdk/

AGENTS.md

@@ -48,6 +48,8 @@ pnpm i18n:check
 - View model + marble tests, thin view, a story per state, an e2e spec.
 - Any new shared component called out explicitly, with why nothing existing fit.
 - Template filled for real: what, why, before/after screenshots, repro steps.
+- Comments only where the code can't give the reason — see
+  [code-style.md](docs/agents/code-style.md#comments).
 - Anything that redraws continuously — an animation frame, a stream — says what it
   costs, or better, counts the redraws in a test.
 - Branch `<handle>/<topic>`. Plain imperative commit subjects, no prefixes.

README.md

@@ -34,16 +34,16 @@ You can find the latest development version continuously deployed to
 ## ✨ Key Features
 
 ✅ **Decentralized & Federated** – No central authority; works across Matrix
-homeservers.  
-✅ **End-to-End Encrypted** – Secure and private calls.  
+homeservers.
+✅ **End-to-End Encrypted** – Secure and private calls.
 ✅ **Standalone, Widget & Component Mode** – Use as an independent app, embed
 in Matrix clients as a widget, or (experimentally) mount it as a React component
-inside your own application.  
-✅ **WebRTC-based** – No additional software required.  
+inside your own application.
+✅ **WebRTC-based** – No additional software required.
 ✅ **Scalable with LiveKit** – Supports large meetings via SFU
-([MSC4195: MatrixRTC using LiveKit backend](https://github.com/hughns/matrix-spec-proposals/blob/hughns/matrixrtc-livekit/proposals/4195-matrixrtc-livekit.md)).  
+([MSC4195: MatrixRTC using LiveKit backend](https://github.com/hughns/matrix-spec-proposals/blob/hughns/matrixrtc-livekit/proposals/4195-matrixrtc-livekit.md)).
 ✅ **Raise Hand** – Participants can signal when they want to speak, helping to
-organize the flow of the meeting.  
+organize the flow of the meeting.
 ✅ **Emoji Reactions** – Users can react with emojis 👍️ 🎉 👏 🤘, adding
 engagement and interactivity to the conversation.
 
@@ -297,8 +297,8 @@ The package is not published yet. A host installs it as a git dependency on the
 ```
 
 whose `prepare` script runs the build on install. That build needs pnpm (via
-Corepack) on the host's machine, runs a full `pnpm install` of this repository
-and is memory-hungry, since it inherits the `--max-old-space-size` setting of
+Corepack) on the host's machine, runs a full `pnpm install` of this repository,
+since it inherits the `--max-old-space-size` setting of
 the app build; the host's pnpm also has to allow it to run at all
 (`allowBuilds` in its `pnpm-workspace.yaml`). Note that `component/` is a pnpm
 project of its own for this reason, so pnpm commands run from inside that
@@ -306,8 +306,28 @@ directory target it rather than the repository; run them from the repository
 root. The host imports the component from
 `@element-hq/element-call-component` and the stylesheet from
 `@element-hq/element-call-component/style.css`, and has to provide `react`,
-`react-dom`, `matrix-js-sdk` and `livekit-client` itself, since the bundle leaves
-them external.
+`react-dom`, `matrix-js-sdk`, `@vector-im/compound-web` and
+`@vector-im/compound-design-tokens` itself, since the bundle leaves them
+external.
+Compound's stylesheet are the host's to load too: the component shares
+the host's copy of Compound, (required for example for tooltips)
+
+The component is large, and a host will usually load it lazily, only once a
+call is shown. Everything a host needs in order to talk about a call before
+then is also exported
+from `@element-hq/element-call-component/api` (a small entry point that does not
+load the component).
+
+- props and the types they are made of
+- the handle
+- the host bridge
+- `UserIntent`
+- `HeaderStyle`
+- `BackgroundStyle` enums
+- `configurationForIntent`, the defaults each intent implies
+  Import from it wherever a value such as
+  `BackgroundStyle.Solid` is needed on a path that must stay light; the main
+  entry point re-exports all of it too.
 
 ### Backend
 

backend/app-service-othersite.yaml

@@ -5,7 +5,7 @@ sender_localpart: "_lk_jwt_service"
 namespaces:
   users:
     - exclusive: false
-      regex: "@.*:homeserver-1" # Cover all local users
+      regex: "@.*:synapse\\.othersite\\.m\\.localhost" # Cover all local users
 # Required for Synapse to call POST /_matrix/app/v1/ping on this service.
 url: "http://auth-server-1:16080"
 # Enable membership look-ups via /is_joined.

backend/app-service.yaml

@@ -5,7 +5,7 @@ sender_localpart: "_lk_jwt_service"
 namespaces:
   users:
     - exclusive: false
-      regex: "@.*:homeserver" # Cover all local users
+      regex: "@.*:synapse\\.m\\.localhost" # Cover all local users
 # Required for Synapse to call POST /_matrix/app/v1/ping on this service.
 url: "http://auth-server:6080"
 # Enable membership look-ups via /is_joined.

backend/dev_livekit-othersite.yaml

@@ -6,6 +6,11 @@ rtc:
   port_range_start: 50300
   port_range_end: 50400
   use_external_ip: false
+  # Advertise the loopback address instead of the container IP, which is not
+  # routable from the host when Docker runs in a VM (colima, Docker Desktop).
+  # The browser then reaches the SFU through the published ports. Firefox
+  # ignores loopback candidates, so this only works in Chromium-based browsers.
+  node_ip: 127.0.0.1
 turn:
   enabled: false
   domain: localhost

backend/dev_livekit.yaml

@@ -6,6 +6,11 @@ rtc:
   port_range_start: 50100
   port_range_end: 50200
   use_external_ip: false
+  # Advertise the loopback address instead of the container IP, which is not
+  # routable from the host when Docker runs in a VM (colima, Docker Desktop).
+  # The browser then reaches the SFU through the published ports. Firefox
+  # ignores loopback candidates, so this only works in Chromium-based browsers.
+  node_ip: 127.0.0.1
 turn:
   enabled: false
   domain: localhost

component/CallPortalRoot.test.tsx

@@ -0,0 +1,57 @@
+/*
+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 "vitest";
+import { render, screen } from "@testing-library/react";
+import { type ReactNode } from "react";
+import { Tooltip, TooltipProvider } from "@vector-im/compound-web";
+
+import { CallPortalRoot } from "./CallPortalRoot";
+
+// A button whose accessible name comes from its tooltip, as every icon button
+// in the call does: the name is lost whenever the tooltip has nowhere to go.
+const LabelledButton = (): ReactNode => (
+  <TooltipProvider>
+    <Tooltip label="Microphone">
+      <button>🎤</button>
+    </Tooltip>
+  </TooltipProvider>
+);
+
+test("floats into the host document with no root", () => {
+  render(
+    <CallPortalRoot root={undefined}>
+      <LabelledButton />
+    </CallPortalRoot>,
+  );
+  expect(screen.getByRole("button", { name: "Microphone" })).toBeTruthy();
+});
+
+test("floats into the root it is given", () => {
+  const root = document.createElement("div");
+  document.body.appendChild(root);
+  render(
+    <CallPortalRoot root={root}>
+      <LabelledButton />
+    </CallPortalRoot>,
+  );
+  const button = screen.getByRole("button", { name: "Microphone" });
+  const label = document.getElementById(
+    button.getAttribute("aria-labelledby")!,
+  );
+  expect(root.contains(label)).toBe(true);
+  root.remove();
+});
+
+test("waits for a root that is not available yet", () => {
+  render(
+    <CallPortalRoot root={null}>
+      <LabelledButton />
+    </CallPortalRoot>,
+  );
+  expect(screen.queryByRole("button", { name: "Microphone" })).toBeNull();
+});

component/CallPortalRoot.tsx

@@ -0,0 +1,26 @@
+/*
+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 { type FC, type ReactNode } from "react";
+import { PortalRoot } from "@vector-im/compound-web";
+
+interface Props {
+  root: HTMLElement | null | undefined;
+  children: ReactNode;
+}
+
+/**
+ * Where Compound floats the call's menus and tooltips. With no `root` the call
+ * is not wrapped at all and they go into the host document's body; `null` is
+ * Compound's "not available yet", and the floating parts wait for it.
+ */
+export const CallPortalRoot: FC<Props> = ({ root, children }): ReactNode =>
+  root === undefined ? (
+    children
+  ) : (
+    <PortalRoot root={root}>{children}</PortalRoot>
+  );

component/ElementCall.module.css

@@ -34,10 +34,18 @@ component rather than a page makes. */
   -webkit-tap-highlight-color: transparent;
 }
 
-/* Compound's overlay container, which holds tooltips and popovers, has to fill
-the container for the elements inside it to be positioned against it. The
-standalone page does the same for the container under `#root`. */
-.root > [data-overlay-container] {
-  position: relative;
+/* The call itself. It is a stacking context of its own, as the standalone
+page's `#root` is, so that the layers the call view uses for its header, footer
+and overlays stay below the modals and toasts, which are portalled into the
+root and carry no layer of their own.
+
+What Compound floats — tooltips, menus — is not in here at all: it goes into
+the host's body, as it would for any other component on the host's page, and is
+styled and layered by the host's copy of Compound. */
+.content {
+  display: flex;
+  flex-direction: column;
   block-size: 100%;
+  position: relative;
+  isolation: isolate;
 }

component/api.ts

@@ -0,0 +1,138 @@
+/*
+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.
+*/
+
+/**
+ * EXPERIMENTAL
+ *
+ * What a host needs in order to talk about Element Call, without Element Call:
+ * the component's props and the types they are made of, the handle and the
+ * host bridge, the intents a call can be started with and the configuration
+ * each implies.
+ *
+ * This is an entry point of its own, `@element-hq/element-call-component/api`,
+ * so that a host can import it on a path that must stay light — a call model
+ * that needs `BackgroundStyle.Solid` as a value, say — and load the component
+ * itself, and everything it brings, only when a call is shown. The main entry
+ * point re-exports all of it, so a host that does not care may import
+ * everything from there.
+ *
+ * Nothing in here may reach anything that is not a type or a constant: the
+ * point of this module is what it does not import.
+ */
+
+import type { Ref } from "react";
+import type { MatrixClient } from "matrix-js-sdk";
+
+import type { UrlProperties } from "../src/UrlParams";
+import type { ElementCallHandle, ElementCallHostBridge } from "./host";
+import {
+  BackgroundStyle,
+  configurationForIntent,
+  HeaderStyle,
+  type UrlConfiguration,
+  UserIntent,
+} from "../src/UrlConfiguration";
+
+// How the host and Element Call talk to each other, and what they say
+export type { ElementCallHandle, ElementCallHostBridge } from "./host";
+export type { DeviceMuteRequest, DeviceMuteState } from "../src/HostBridge";
+export type { JoinCallData } from "../src/widget";
+// The deployment-wide configuration, as distinct from ElementCallConfiguration
+// below, which is per call
+export type { ConfigOptions } from "../src/config/ConfigOptions";
+// The values that appear in ElementCallConfiguration and in the intent, and
+// what each intent means by default
+export {
+  BackgroundStyle,
+  configurationForIntent,
+  HeaderStyle,
+  type UrlConfiguration,
+  UserIntent,
+};
+
+/**
+ * How Element Call should behave. Everything is optional; anything left out
+ * takes the default that {@link ElementCallProps.intent} implies.
+ *
+ * This is the behaviour a widget can be configured with through its URL, plus
+ * the one fact about the call a host has a say in here, the background. The
+ * rest of what a widget's URL carries — who the user is, how to reach the
+ * homeserver, where to report analytics, the shared secret of a room that is
+ * encrypted with one — a component host supplies by other routes, or not at
+ * all; and what can change while the call is running, the theme and the
+ * language, is a prop of its own.
+ */
+export type ElementCallConfiguration = Partial<UrlConfiguration> &
+  Partial<Pick<UrlProperties, "background">>;
+
+export interface ElementCallProps {
+  /**
+   * The client to place the call with. Element Call does not authenticate
+   * anyone or manage a session of its own; this one is the host's.
+   */
+  client: MatrixClient;
+  /** The room to call in. The host's client must already know about it. */
+  roomId: string;
+  /**
+   * What the user asked for — whether they started the call or joined one that
+   * was already running, and whether it is a call in a group or a DM. Element
+   * Call decides what each of those means: whether to show the lobby first,
+   * whether to ring, and so on.
+   *
+   * Defaults to joining an existing group call, which is the most conservative
+   * reading, but a host that knows which button the user pressed should say so.
+   */
+  intent?: UserIntent;
+  /**
+   * How Element Call should behave, overriding whatever {@link intent} implies.
+   * A host that finds itself setting a lot of these probably wants a different
+   * intent instead.
+   *
+   * Compared by value, so it is fine to write this inline; only a change to
+   * what it says restarts anything.
+   */
+  config?: ElementCallConfiguration;
+  /**
+   * What Element Call tells the host while the call is running: that the user
+   * has joined or hung up, that it would like to be kept on screen, and so on.
+   * Without one, Element Call assumes nobody is listening.
+   */
+  hostBridge?: ElementCallHostBridge;
+  /**
+   * What the host tells Element Call: to hang up, to mute, to join. Available
+   * once the component has rendered.
+   */
+  ref?: Ref<ElementCallHandle>;
+  /**
+   * The theme to show Element Call in, `light` or `dark`. Left out, Element
+   * Call picks. Changes take effect at once, and cost nothing else.
+   */
+  theme?: string;
+  /**
+   * The language to show Element Call in, as a BCP 47 tag: one of the
+   * `supportedLanguages` the main entry point exports, or something that falls
+   * back to one (`de-AT` to `de`). Left out, the browser's language is used.
+   *
+   * Translations are one thing shared by every Element Call on the page, so
+   * the most recently set language wins for all of them.
+   */
+  language?: string;
+  /**
+   * Where the parts of Element Call that float above it — its menus and
+   * tooltips, which Compound portals out of the call — are rendered. Left out,
+   * they go into the host document's body, as they do for any other component
+   * on the host's page.
+   *
+   * A host that moves Element Call's DOM into another document, such as a
+   * Document Picture-in-Picture window, passes that document's body here so
+   * that a menu opens in the window its button is in. Changes take effect at
+   * once. `null` means the root is not available yet, as from a callback ref
+   * that has not fired: menus and tooltips wait for it rather than falling
+   * back to the body.
+   */
+  portalRoot?: HTMLElement | null;
+}

component/build/scopeStylesToRoot.ts

@@ -40,10 +40,10 @@ const IS_ROOT = `:where(${ROOT_SELECTOR})`;
  * Element Call as a component.
  *
  * As a page of its own, Element Call can style the document: normalize.css and
- * Compound speak of `html`, `body` and bare elements, and the design tokens are
- * declared on `:root`. As a component, all of that would land on the host's
- * document too. This rewrites every selector so that it matches only the root
- * or its descendants:
+ * its own base styles speak of `html`, `body` and bare elements, and its custom
+ * properties are declared on `:root`. As a component, all of that would land on
+ * the host's document too. This rewrites every selector so that it matches only
+ * the root or its descendants:
  *
  * - `html`, `body` and `:root` become the root element, which is what stands in
  *   for the document inside a host.
@@ -55,9 +55,10 @@ const IS_ROOT = `:where(${ROOT_SELECTOR})`;
  * CSS modules are scoped by their class names already, so only their selectors
  * that would match by element alone — `pre` rather than `.pre` — are touched.
  *
- * The root's fonts and design tokens are still inherited by everything inside
- * it, the way they were from `body` and `:root`, and `@font-face` declarations
- * stay global, which they are by nature.
+ * The root's custom properties are still inherited by everything inside it,
+ * the way they were from `:root`. Compound's own stylesheet — the design
+ * tokens, the component styles, the fonts — is not in this build at all: the
+ * host supplies it, unscoped, along with its copy of Compound.
  */
 export function scopeStylesToRoot(): Plugin {
   return {

component/dev/main.tsx

@@ -9,6 +9,16 @@ import { StrictMode } from "react";
 import { createRoot } from "react-dom/client";
 import { logger } from "matrix-js-sdk/lib/logger";
 
+// What a host provides along with its copy of Compound: its stylesheet, the
+// design tokens and the fonts they name. The component does not bundle them.
+import "@fontsource/inter/400.css";
+import "@fontsource/inter/500.css";
+import "@fontsource/inter/600.css";
+import "@fontsource/inter/700.css";
+import "@fontsource/inconsolata/400.css";
+import "@fontsource/inconsolata/700.css";
+import "@vector-im/compound-design-tokens/assets/web/css/compound-design-tokens.css";
+import "@vector-im/compound-web/dist/style.css";
 import { type ConfigOptions, initializeElementCall } from "../index";
 import { Harness } from "./Harness";
 // After Element Call's, so that the host has the last word on its own page

component/index.tsx

@@ -17,33 +17,37 @@ Please see LICENSE in the repository root for full details.
  * host instead, or is confined to the container it is mounted in.
  */
 
-// The design tokens, fonts and element defaults every Element Call stylesheet
+// The element defaults and custom properties every Element Call stylesheet
 // builds on. Written for a page, they speak of `html`, `body` and bare
 // elements; the component build confines them, and every other stylesheet in
 // this bundle, to the root element below (see build/scopeStylesToRoot.ts), so
 // that the host's document is left as it was.
 //
+// Compound is not in here. The component uses the host's copy of it (a peer
+// dependency, left external by the build), and the host loads Compound's
+// stylesheet, design tokens and fonts along with it: what Compound floats into
+// the host's body — tooltips, menus — is then styled by the same stylesheet as
+// everything else there, and Element Call's root takes the tokens and fonts of
+// the theme class it carries, as any element on the host's page would.
+//
 // Where these land relative to the component stylesheets is the bundler's
 // choice — the standalone app puts them first, this build puts them in the
 // middle — so nothing in base.css may depend on winning or losing against a
 // component's own rules at equal specificity. It currently does not: what it
 // declares unlayered is custom properties on Element Call's root, which
-// components inherit rather than compete with, and everything from Compound
-// sits in a `@layer`, which loses to unlayered rules either way.
+// components inherit rather than compete with.
 import "../src/base.css";
 
 import {
   type FC,
   type JSX,
   type ReactNode,
-  type Ref,
   useEffect,
   useLayoutEffect,
   useMemo,
   useRef,
   useState,
 } from "react";
-import { type MatrixClient } from "matrix-js-sdk";
 import { logger } from "matrix-js-sdk/lib/logger";
 import { I18nextProvider } from "react-i18next";
 import { TooltipProvider } from "@vector-im/compound-web";
@@ -62,10 +66,8 @@ import { RootElementProvider, useRootElement } from "../src/RootElementContext";
 import {
   configurationForIntent,
   componentProperties,
-  type UrlConfiguration,
   type UrlParams,
   UrlParamsProvider,
-  type UrlProperties,
   UserIntent,
   useUrlParams,
 } from "../src/UrlParams";
@@ -79,102 +81,17 @@ import { i18n } from "../src/utils/i18n";
 import { useTheme } from "../src/useTheme";
 import { useStableValue } from "../src/useStableValue";
 import styles from "./ElementCall.module.css";
-import {
-  type ElementCallHandle,
-  type ElementCallHostBridge,
-  useComponentHostBridge,
-} from "./host";
+import { useComponentHostBridge } from "./host";
+import { CallPortalRoot } from "./CallPortalRoot";
+import { type ElementCallProps } from "./api";
 import { supportedLanguages, translationsBackend } from "./localization";
 
 // The languages Element Call can be shown in
 export { supportedLanguages } from "./localization";
-
-// How the host and Element Call talk to each other, and what they say
-export { type ElementCallHandle, type ElementCallHostBridge } from "./host";
-export {
-  type DeviceMuteRequest,
-  type DeviceMuteState,
-} from "../src/HostBridge";
-export { type JoinCallData } from "../src/widget";
-// The deployment-wide configuration, as distinct from ElementCallConfiguration
-// above, which is per call
-export { type ConfigOptions } from "../src/config/ConfigOptions";
-// The values that appear in ElementCallConfiguration and in the intent
-export {
-  BackgroundStyle,
-  HeaderStyle,
-  UserIntent,
-  type UrlConfiguration,
-} from "../src/UrlParams";
-
-/**
- * How Element Call should behave. Everything is optional; anything left out
- * takes the default that {@link ElementCallProps.intent} implies.
- *
- * This is the behaviour a widget can be configured with through its URL, plus
- * the one fact about the call a host has a say in here, the background. The
- * rest of what a widget's URL carries — who the user is, how to reach the
- * homeserver, where to report analytics, the shared secret of a room that is
- * encrypted with one — a component host supplies by other routes, or not at
- * all; and what can change while the call is running, the theme and the
- * language, is a prop of its own.
- */
-export type ElementCallConfiguration = Partial<UrlConfiguration> &
-  Partial<Pick<UrlProperties, "background">>;
-
-export interface ElementCallProps {
-  /**
-   * The client to place the call with. Element Call does not authenticate
-   * anyone or manage a session of its own; this one is the host's.
-   */
-  client: MatrixClient;
-  /** The room to call in. The host's client must already know about it. */
-  roomId: string;
-  /**
-   * What the user asked for — whether they started the call or joined one that
-   * was already running, and whether it is a call in a group or a DM. Element
-   * Call decides what each of those means: whether to show the lobby first,
-   * whether to ring, and so on.
-   *
-   * Defaults to joining an existing group call, which is the most conservative
-   * reading, but a host that knows which button the user pressed should say so.
-   */
-  intent?: UserIntent;
-  /**
-   * How Element Call should behave, overriding whatever {@link intent} implies.
-   * A host that finds itself setting a lot of these probably wants a different
-   * intent instead.
-   *
-   * Compared by value, so it is fine to write this inline; only a change to
-   * what it says restarts anything.
-   */
-  config?: ElementCallConfiguration;
-  /**
-   * What Element Call tells the host while the call is running: that the user
-   * has joined or hung up, that it would like to be kept on screen, and so on.
-   * Without one, Element Call assumes nobody is listening.
-   */
-  hostBridge?: ElementCallHostBridge;
-  /**
-   * What the host tells Element Call: to hang up, to mute, to join. Available
-   * once the component has rendered.
-   */
-  ref?: Ref<ElementCallHandle>;
-  /**
-   * The theme to show Element Call in, `light` or `dark`. Left out, Element
-   * Call picks. Changes take effect at once, and cost nothing else.
-   */
-  theme?: string;
-  /**
-   * The language to show Element Call in, as a BCP 47 tag: one of
-   * {@link supportedLanguages}, or something that falls back to one (`de-AT`
-   * to `de`). Left out, the browser's language is used.
-   *
-   * Translations are one thing shared by every Element Call on the page, so
-   * the most recently set language wins for all of them.
-   */
-  language?: string;
-}
+// Everything a host needs to talk about Element Call — the props, the handle,
+// the host bridge, the intents and what each means — also available without
+// the component itself from `@element-hq/element-call-component/api`
+export * from "./api";
 
 /**
  * Prepares the things Element Call needs before it can be shown: translations,
@@ -238,6 +155,7 @@ export const ElementCall: FC<ElementCallProps> = ({
   ref,
   theme,
   language,
+  portalRoot,
 }): ReactNode => {
   const hostBridge = useComponentHostBridge(suppliedHostBridge, ref, theme);
 
@@ -321,34 +239,40 @@ export const ElementCall: FC<ElementCallProps> = ({
         <UrlParamsProvider value={params}>
           <div ref={setContainer} className={styles.root}>
             {ready && (
-              <RootElementProvider value={container}>
-                {/* Whatever goes wrong in here is shown in here. Left to
-                  propagate, an error would unmount the host's own tree. */}
-                <ErrorBoundary
-                  fallback={(error) => <ErrorPage error={error} />}
-                  // A broken call should not hold the host on screen
-                  onError={() => void hostBridge.setAlwaysOnScreen(false)}
-                >
-                  <Decoration>
-                    <TooltipProvider>
-                      <ClientProvider client={client}>
-                        <MediaDevicesContext value={mediaDevices}>
-                          <ProcessorProvider>
-                            <CallView
-                              client={client}
-                              rtcSession={rtcSession}
-                              isPasswordlessUser={false}
-                              confineToRoom={params.confineToRoom}
-                              preload={params.preload}
-                              skipLobby={params.skipLobby}
-                            />
-                          </ProcessorProvider>
-                        </MediaDevicesContext>
-                      </ClientProvider>
-                    </TooltipProvider>
-                  </Decoration>
-                </ErrorBoundary>
-              </RootElementProvider>
+              // Stands in for the standalone page's `#root`: see `.content`
+              // in ElementCall.module.css
+              <div className={styles.content}>
+                <CallPortalRoot root={portalRoot}>
+                  <RootElementProvider value={container}>
+                    {/* Whatever goes wrong in here is shown in here. Left to
+                    propagate, an error would unmount the host's own tree. */}
+                    <ErrorBoundary
+                      fallback={(error) => <ErrorPage error={error} />}
+                      // A broken call should not hold the host on screen
+                      onError={() => void hostBridge.setAlwaysOnScreen(false)}
+                    >
+                      <Decoration>
+                        <TooltipProvider>
+                          <ClientProvider client={client}>
+                            <MediaDevicesContext value={mediaDevices}>
+                              <ProcessorProvider>
+                                <CallView
+                                  client={client}
+                                  rtcSession={rtcSession}
+                                  isPasswordlessUser={false}
+                                  confineToRoom={params.confineToRoom}
+                                  preload={params.preload}
+                                  skipLobby={params.skipLobby}
+                                />
+                              </ProcessorProvider>
+                            </MediaDevicesContext>
+                          </ClientProvider>
+                        </TooltipProvider>
+                      </Decoration>
+                    </ErrorBoundary>
+                  </RootElementProvider>
+                </CallPortalRoot>
+              </div>
             )}
           </div>
         </UrlParamsProvider>

component/package.json

@@ -25,6 +25,10 @@
       "types": "./dist/types/component/index.d.ts",
       "default": "./dist/element-call.js"
     },
+    "./api": {
+      "types": "./dist/types/component/api.d.ts",
+      "default": "./dist/api.js"
+    },
     "./style.css": "./dist/element-call.css"
   },
   "sideEffects": [
@@ -34,7 +38,8 @@
     "prepare": "cd .. && pnpm install --frozen-lockfile && pnpm build:component"
   },
   "peerDependencies": {
-    "livekit-client": "^2.18.1",
+    "@vector-im/compound-design-tokens": "^11.0.0",
+    "@vector-im/compound-web": "^10.3.1",
     "matrix-js-sdk": "*",
     "react": "^19",
     "react-dom": "^19"

component/tsconfig.build.json

@@ -13,8 +13,8 @@
     "rootDir": "..",
     "outDir": "./dist/types"
   },
-  // The entry point, plus the ambient declarations (CSS modules, `?react` SVGs,
-  // `import.meta.env`, …) that the sources it reaches rely on.
-  "include": ["./index.tsx", "../src/@types/*.d.ts"],
+  // The entry points, plus the ambient declarations (CSS modules, `?react` SVGs,
+  // `import.meta.env`, …) that the sources they reach rely on.
+  "include": ["./index.tsx", "./api.ts", "../src/@types/*.d.ts"],
   "exclude": []
 }

config/config.devenv.json

@@ -7,7 +7,6 @@
   },
   "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,
     "network_error_retry_ms": 100
   }

config/config.sample.json

@@ -11,7 +11,6 @@
   "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,
     "network_error_retry_ms": 100
   }

config/config_netlify_preview.json

@@ -7,7 +7,6 @@
   },
   "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,
     "network_error_retry_ms": 100
   },

config/config_netlify_preview_sdk.json

@@ -7,7 +7,6 @@
   },
   "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,
     "network_error_retry_ms": 100
   }

docker-compose-dev.yml

@@ -3,7 +3,7 @@ networks:
 
 services:
   auth-service:
-    image: ghcr.io/element-hq/lk-jwt-service:0.7.0
+    image: ghcr.io/element-hq/lk-jwt-service:0.8.0
     pull_policy: always
     hostname: auth-server
     environment:
@@ -33,7 +33,7 @@ services:
       - ecbackend
 
   auth-service-1:
-    image: ghcr.io/element-hq/lk-jwt-service:0.7.0
+    image: ghcr.io/element-hq/lk-jwt-service:0.8.0
     pull_policy: always
     hostname: auth-server-1
     environment:

docker-compose-playwright.yml

@@ -19,7 +19,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:3993d53bc2c784c0376b86e00230aef0ee2c9a705b2166e9229555117e8db167
+    image: ghcr.io/element-hq/element-web:develop@sha256:06ac258c582ba3e59899cc52c9c2f4fde2e0a2dafddc1e3541c18471162828f8
   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:3993d53bc2c784c0376b86e00230aef0ee2c9a705b2166e9229555117e8db167
+    image: ghcr.io/element-hq/element-web:develop@sha256:06ac258c582ba3e59899cc52c9c2f4fde2e0a2dafddc1e3541c18471162828f8

docs/agents/architecture.md

@@ -76,4 +76,12 @@ Code that builds in only one is a bug.
 - `build:component` — `@element-hq/element-call-component`, sources in `component/`
   (its own pnpm project; run pnpm from the repo root). Host API is in the README;
   `pnpm lint:externals` rejects an import of a `react` / `react-dom` /
-  `matrix-js-sdk` / `livekit-client` subpath the externals list omits.
+  `matrix-js-sdk` / `@vector-im/compound-web` /
+  `@vector-im/compound-design-tokens` subpath the externals list omits.
+  `livekit-client` is bundled on purpose: no host imports it, and the pinned
+  version travels with the component.
+  Compound's stylesheets are loaded by `src/index.css` for the page and by the
+  host for the component, never by `src/base.css`. Two entry
+  points: `index.tsx` (the component) and `api.ts` (types, enums and
+  `configurationForIntent`, for a host that must not load the component). `api.ts`
+  may only reach types and constants — `src/UrlConfiguration.ts`, not `UrlParams`.

docs/agents/code-style.md

@@ -31,7 +31,28 @@ copy, the PR says so.
 - **Suites.** Test cases first, helpers below. Older suites invert this; follow the
   rule in new ones, don't reorder old ones.
 - **Names.** What a thing means, not what it is made of: `naturalLayout$`, not
-  `computedLayout$`. Comments explain why, never what.
+  `computedLayout$`.
+
+## Comments
+
+No comment is the default. One earns its place by giving a reason the code
+cannot: a platform quirk, an outside constraint, a trap that looks like a
+simplification.
+
+- Say the reason, then stop. Test each sentence: does the reason still stand
+  without it? If so, cut it. Most reasons fit on a line, so a long comment is
+  worth a second look — it is usually carrying something that isn't one.
+- Write about the line the comment sits on, in terms of what the code does
+  there — leave layout to the stylesheet and measurements to the design.
+- Name the condition ("where the platform can't route audio"), not the browser
+  or the spec entry.
+- Put history — what was tried, removed or rejected, the dev journal — in the
+  commit or the PR description.
+- In tests, comment only structure that looks wrong but isn't: batching, timers,
+  why this scroll position.
+
+Before keeping one: would it still be true after a CSS change or a refactor of
+its caller? If not, cut it.
 
 ## TypeScript, React and RxJS idiom win on a clash
 

docs/linking.md

@@ -60,6 +60,21 @@ git config --local core.hooksPath .githooks
 
 This will add the hook path for this repository only to .gihooks. which is a tracked (by git) folder containing the pre-commit hook.
 
+## Testing against a matrix-js-sdk branch in CI
+
+Linking covers local development. In CI, `scripts/layered.sh` plays the same
+role for `matrix-js-sdk`: after the usual frozen install, `scripts/fetchdep.sh`
+looks for a matrix-js-sdk branch with the same name as the pull request's head
+branch (in the fork first, when the pull request comes from one). If there is
+one, it is cloned, packed and installed over the locked version. If there is
+none, the install stays as `pnpm-lock.yaml` pins it.
+
+This means a change that needs a not yet merged matrix-js-sdk change can be tested
+by giving both branches the same name. This mirrors how element-web tests against
+matrix-js-sdk. Once the matrix-js-sdk branch is merged and deleted, the pull
+request falls back to the lockfile and needs a lockfile bump to stay green,
+which is also what keeps `main` consistent after the merge.
+
 ## Background
 
 Information, why this approach is used can be found in the [linking concept reasoning](./linking_concept_reasoning.md) document.

docs/matrix_rtc_modes.md

@@ -24,7 +24,7 @@ homeserver does not support sticky events. This is the default.
 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`.
+and identifies the room by a hashed identity instead of the Matrix `room_id`.
 (Remote memberships always try the new endpoint first and fall back to the
 legacy one, so remote participants can be on either.)
 

docs/url_params.md

@@ -61,7 +61,6 @@ These parameters are relevant to both [widget](./embedded_standalone.md) and [st
 | `homeserver`                                   |                                                                                                                                                                    | Not applicable                                                                                    | No                           | Homeserver for registering a new (guest) user, configures non-default guest user server when creating a spa link.                                                                                                                                                                                                                                                                                   |
 | `lang`                                         | [BCP 47](https://www.rfc-editor.org/info/bcp47) code                                                                                                               | No                                                                                                | No                           | The language the app should use.                                                                                                                                                                                                                                                                                                                                                                    |
 | `password`                                     |                                                                                                                                                                    | No                                                                                                | No                           | E2EE password when using a shared secret. (For individual sender keys in embedded mode this is not required.)                                                                                                                                                                                                                                                                                       |
-| `perParticipantE2EE`                           | `true` or `false`                                                                                                                                                  | No, defaults to `false`                                                                           | No, defaults to `false`      | Enables per participant encryption with Keys exchanged over encrypted matrix room messages.                                                                                                                                                                                                                                                                                                         |
 | `controlledAudioDevices`                       | `true` or `false`                                                                                                                                                  | No, defaults to `false`                                                                           | No, defaults to `false`      | Whether the [global JS controls for audio devices](./controls.md#audio-devices) should be enabled, allowing the list of audio devices to be controlled by the app hosting Element Call.                                                                                                                                                                                                             |
 | `roomId`                                       | [Matrix Room ID](https://spec.matrix.org/v1.12/appendices/#room-ids)                                                                                               | Yes                                                                                               | No                           | Anything about what room we're pointed to should be from useRoomIdentifier which parses the path and resolves alias with respect to the default server name, however roomId is an exception as we need the room ID in embedded widget mode, and not the room alias (or even the via params because we are not trying to join it). This is also not validated, where it is in `useRoomIdentifier()`. |
 | `showControls`                                 | `true` or `false`                                                                                                                                                  | No, defaults to `true`                                                                            | No, defaults to `true`       | Displays controls like mute, screen-share, invite, and hangup buttons during a call.                                                                                                                                                                                                                                                                                                                |

locales/en/app.json

@@ -59,10 +59,10 @@
   "developer_mode": {
     "always_show_iphone_earpiece": "Show iPhone earpiece option on all platforms",
     "crypto_version": "Crypto version: {{version}}",
-    "custom_livekit_url": {
-      "current_url": "Currently set to: ",
+    "custom_transport": {
+      "current": "Currently set to: ",
       "from_config": "Currently, no overwrite is set. Url from config is used.",
-      "label": "Custom Livekit-url",
+      "label": "Custom transport JSON",
       "reset": "Reset overwrite",
       "save": "Save",
       "saving": "Saving..."
@@ -106,7 +106,7 @@
     "insufficient_capacity_description": "The server has reached its maximum capacity and you cannot join the call at this time. Try again later, or contact your server admin if the problem persists.",
     "livekit_connection_error": "Failed to connect to Livekit server",
     "livekit_connection_error_description": "An error occurred while connecting to the Livekit server (<1>Reason:</1> <2>{{ reason }}</2>).",
-    "matrix_rtc_transport_missing": "The server is not configured to work with {{brand}}. Please contact your server admin (Domain: {{domain}}, Error Code: {{ errorCode }}).",
+    "matrix_rtc_transport_missing": "The server is not configured to work with {{brand}} and no other call participant provides a usable transport. Please contact your server admin (Domain: {{domain}}, Error Code: {{ errorCode }}).",
     "membership_manager": "Membership Manager Error",
     "membership_manager_description": "The Membership Manager had to shut down. This is caused by many consecutive failed network requests.",
     "no_matrix_2_authorization_service": "The authorization service for your media server (SFU) is out of date.",
@@ -163,6 +163,12 @@
   "login_auth_links_prompt": "Not registered yet?",
   "login_subheading": "To continue to Element",
   "login_title": "Login",
+  "microphone_level": {
+    "label": "Microphone level",
+    "no_device": "No microphone found. Connect one, then try again.",
+    "permission_denied": "Microphone access is blocked. Allow it, then try again.",
+    "value": "{{level}} of {{max}}"
+  },
   "microphone_off": "Microphone off",
   "microphone_on": "Microphone on",
   "mute_microphone_button_label": "Mute microphone",
@@ -215,11 +221,14 @@
       "activating": "Activating…",
       "camera": "Camera",
       "camera_numbered": "Camera {{n}}",
+      "camera_source": "Camera Source",
       "change_device_button": "Change audio device",
       "default": "Default",
       "default_named": "Default <2>({{name}})</2>",
+      "default_named_plain": "Default ({{name}})",
       "handset": "Handset",
       "loudspeaker": "Loudspeaker",
+      "mic_source": "Mic Source",
       "microphone": "Microphone",
       "microphone_numbered": "Microphone {{n}}",
       "speaker": "Speaker",

package.json

@@ -8,7 +8,7 @@
     "dev:embedded": "vite --config vite-embedded.config.js",
     "dev:component": "vite --config vite-component-dev.config.ts",
     "build": "pnpm build:full",
-    "build:full": "NODE_OPTIONS=--max-old-space-size=16384 vite build",
+    "build:full": "node --max-old-space-size=16384 node_modules/vite/bin/vite.js build",
     "build:full:production": "pnpm build:full",
     "build:full:development": "pnpm build:full --mode development",
     "build:embedded": "pnpm build:full --config vite-embedded.config.js",
@@ -84,7 +84,7 @@
     "@typescript-eslint/utils": "^8.61.0",
     "@use-gesture/react": "^10.2.11",
     "@vector-im/compound-design-tokens": "^11.0.0",
-    "@vector-im/compound-web": "^10.0.0",
+    "@vector-im/compound-web": "^10.4.0",
     "@vitejs/plugin-react": "^6.0.2",
     "@vitest/browser-playwright": "^4.1.5",
     "@vitest/coverage-v8": "^4.0.18",
@@ -103,11 +103,10 @@
     "livekit-client": "^2.18.1",
     "lodash-es": "^4.17.21",
     "loglevel": "^1.9.1",
-    "matrix-js-sdk": "github:matrix-org/matrix-js-sdk#develop",
+    "matrix-js-sdk": "github:matrix-org/matrix-js-sdk#9405287c22797e9d69acd366c47bf412fa4384c8",
     "matrix-widget-api": "^1.18.0",
     "node-stdlib-browser": "^1.3.1",
     "normalize.css": "^8.0.1",
-    "observable-hooks": "^4.2.3",
     "oxfmt": "^0.66.0",
     "oxlint": "^1.70.0",
     "oxlint-tsgolint": "^0.25.0",
@@ -130,7 +129,6 @@
     "uuid": "^14.0.0",
     "vaul": "^1.0.0",
     "vite": "^8.0.0",
-    "vite-plugin-generate-file": "^0.3.0",
     "vite-plugin-html": "^3.2.2",
     "vite-plugin-node-polyfills": "^0.28.0",
     "vite-plugin-node-stdlib-browser": "^0.2.1",

playwright.config.ts

@@ -38,8 +38,20 @@ export default defineConfig({
   retries: process.env.CI ? 2 : 0,
   /* Opt out of parallel tests on CI. */
   workers: process.env.CI ? 1 : undefined,
-  /* Reporter to use. See https://playwright.dev/docs/test-reporters */
-  reporter: "html",
+  /**
+   * Reporter to use. See https://playwright.dev/docs/test-reporters
+   *
+   * On CI, `list` prints a line per test as it finishes, which keeps the job
+   * log moving; `github` annotates failures on the PR; `html` is uploaded as
+   * an artifact and must never try to open a browser there.
+   */
+  reporter: process.env.CI
+    ? [["list"], ["github"], ["html", { open: "never" }]]
+    : [["list"], ["html"]],
+  /* Stop a broken run early on CI instead of waiting out every retry. */
+  maxFailures: process.env.CI ? 5 : undefined,
+  /* Under the job's 60 minute limit, so a hung run still ends with a report. */
+  globalTimeout: process.env.CI ? 50 * 60 * 1000 : undefined,
   /* Shared settings for all the projects below. See https://playwright.dev/docs/api/class-testoptions. */
   use: {
     /* Base URL to use in actions like `await page.goto('/')`. */

playwright/audio-menu.spec.ts

@@ -0,0 +1,229 @@
+/*
+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, type Locator, type Page } from "@playwright/test";
+
+import { SpaHelpers } from "./spa-helpers.ts";
+import { installFakeDevices } from "./utils/fake-devices.ts";
+
+test.describe("the quick audio menu", () => {
+  test("lists speakers and microphones with a live level meter", async ({
+    page,
+  }) => {
+    await installFakeDevices(page, { microphones: 3, speakers: 3 });
+    await joinACall(page, "Menu user", "Audio menu");
+    await openAudioMenu(page);
+
+    await expect(page.getByRole("group", { name: "Speaker" })).toBeVisible();
+    await expect(page.getByRole("group", { name: "Microphone" })).toBeVisible();
+    // By name, not count: the browser adds its own fake output and a Default.
+    for (const n of [1, 2, 3])
+      await expect(
+        page
+          .getByRole("group", { name: "Speaker" })
+          .getByRole("menuitemradio", { name: `Fake Speaker ${n}` }),
+      ).toBeVisible();
+
+    await expect(
+      page.getByRole("menuitemradio", { checked: true }),
+    ).toHaveCount(2);
+    const meter = page.getByRole("meter", { name: "Microphone level" });
+    await expect(meter).toBeVisible();
+    await expect(meter).toHaveAttribute("aria-valuenow", /\d+/);
+    await expect(meter).toHaveAttribute("aria-valuetext", /\d+ of \d+/);
+
+    // Both browsers here can route audio; the platform that can't is a unit check.
+    await expect(
+      page
+        .getByRole("group", { name: "Speaker" })
+        .getByRole("menuitemradio")
+        .first(),
+    ).toHaveAttribute("aria-disabled", "false");
+  });
+
+  test("moves the microphone and the speaker without disturbing the call", async ({
+    browser,
+  }) => {
+    // Two browsers and a real call.
+    test.slow();
+    const hostContext = await browser.newContext({ reducedMotion: "reduce" });
+    const host = await hostContext.newPage();
+    await installFakeDevices(host, { microphones: 3, speakers: 3 });
+    await joinACall(host, "Host", "Device switch");
+
+    const inviteLink = await SpaHelpers.getCallInviteLink(host);
+    const guestContext = await browser.newContext({ reducedMotion: "reduce" });
+    const guest = await guestContext.newPage();
+    await SpaHelpers.joinCallFromInviteLink(guest, inviteLink, "Guest");
+    await SpaHelpers.expectVideoTilesCount(guest, 2);
+
+    await openAudioMenu(host);
+    await selectDevice(host, "Microphone", "Fake Microphone 2");
+    await openAudioMenu(host);
+    await selectDevice(host, "Speaker", "Fake Speaker 2");
+
+    // Not a rejoin: neither side drops, and the guest still has both tiles.
+    await expect(
+      host.getByRole("dialog", { name: "Reconnecting…" }),
+    ).not.toBeVisible();
+    await expect(
+      guest.getByRole("dialog", { name: "Reconnecting…" }),
+    ).not.toBeVisible();
+    await SpaHelpers.expectVideoTilesCount(guest, 2);
+    await expect(guest.getByText("Waiting for media...")).not.toBeVisible();
+
+    await hostContext.close();
+    await guestContext.close();
+  });
+
+  test("keeps the meter moving while muted, and sends nothing", async ({
+    browser,
+  }) => {
+    // Two browsers and a real call.
+    test.slow();
+    const hostContext = await browser.newContext({ reducedMotion: "reduce" });
+    const host = await hostContext.newPage();
+    await installFakeDevices(host);
+    await joinACall(host, "Muted host", "Muted meter");
+
+    const inviteLink = await SpaHelpers.getCallInviteLink(host);
+    const guestContext = await browser.newContext({ reducedMotion: "reduce" });
+    const guest = await guestContext.newPage();
+    await SpaHelpers.joinCallFromInviteLink(guest, inviteLink, "Listener");
+    await SpaHelpers.expectVideoTilesCount(guest, 2);
+
+    const mute = host.getByTestId("incall_mute");
+    await mute.click();
+    await expect(mute).toHaveAttribute("aria-checked", "false");
+    await openAudioMenu(host);
+
+    const meter = host.getByRole("meter", { name: "Microphone level" });
+    await expect(meter).toBeVisible();
+    // By test id: the modal menu hides the rest of the call from the a11y tree.
+    await expect(mute).toHaveAttribute("aria-checked", "false");
+    await expect(mute).toBeVisible();
+    // And the guest is shown the mute.
+    await expect(
+      guest.getByTestId("videoTile").filter({ hasText: "Muted host" }),
+    ).toBeVisible();
+
+    await hostContext.close();
+    await guestContext.close();
+  });
+
+  test("keeps the meter at the foot of the list while it scrolls", async ({
+    page,
+  }) => {
+    await installFakeDevices(page, { microphones: 20, speakers: 4 });
+    await joinACall(page, "Scroller", "Long device list");
+    await openAudioMenu(page);
+
+    const meter = page.getByRole("meter", { name: "Microphone level" });
+    await expect(meter).toBeVisible();
+
+    // Scrolled so the microphones start at the top: only there does a pinned
+    // meter differ from one that is simply last.
+    const list = page.locator("[role='menu'] div[role='none']").first();
+    await list.evaluate((element) => {
+      const group = element.querySelector("[role='group'][aria-label*='icro']");
+      element.scrollTop +=
+        group!.getBoundingClientRect().top -
+        element.getBoundingClientRect().top;
+    });
+
+    await expect(meter).toBeInViewport();
+    await expectPinnedInside(meter, list);
+    await expect(
+      page.getByRole("menuitemradio", { name: "Fake Microphone 20" }),
+    ).toBeVisible();
+  });
+
+  test("shows the focus ring only when the keyboard moved the focus", async ({
+    page,
+    browserName,
+  }) => {
+    test.skip(
+      browserName === "firefox",
+      "Headless Firefox does not deliver synthetic key presses reliably; see reconnect.spec.ts",
+    );
+    await installFakeDevices(page);
+    await joinACall(page, "Keyboard user", "Focus ring");
+    await openAudioMenu(page);
+
+    const first = page.getByRole("menuitemradio").first();
+    // Opened by pointer: no ring, though Radix has moved focus into the menu.
+    await expect.poll(async () => outlineWidth(first)).toBe(0);
+
+    await page.keyboard.press("ArrowDown");
+    const focused = page.locator("[role='menuitemradio']:focus");
+    await expect.poll(async () => outlineWidth(focused)).toBeGreaterThan(0);
+
+    // And the pointer takes it away again.
+    await first.hover();
+    await expect.poll(async () => outlineWidth(focused)).toBe(0);
+  });
+});
+
+/** Creates a call and joins it, leaving the page in the call. */
+async function joinACall(
+  page: Page,
+  userName: string,
+  callName: string,
+): Promise<void> {
+  await page.goto("/");
+  await SpaHelpers.createCall(page, userName, callName, true);
+  await expect(page.getByTestId("name_tag")).toContainText(userName);
+  // The media controls stay disabled until devices have enumerated.
+  await expect(page.getByTestId("incall_mute")).toBeEnabled({
+    timeout: 10_000,
+  });
+}
+
+async function openAudioMenu(page: Page): Promise<void> {
+  await page.getByRole("button", { name: "Microphone" }).click();
+  await expect(page.getByRole("menu")).toBeVisible();
+}
+
+async function selectDevice(
+  page: Page,
+  section: "Speaker" | "Microphone",
+  name: string,
+): Promise<void> {
+  const item = page
+    .getByRole("group", { name: section })
+    .getByRole("menuitemradio", { name });
+  await item.click();
+  // Selecting doesn't close the menu, so dismiss it.
+  await page.keyboard.press("Escape");
+  await expect(page.getByRole("menu")).not.toBeVisible();
+}
+
+/** Asserts the meter sits within the scrollport and inside the menu's frame. */
+async function expectPinnedInside(
+  meter: Locator,
+  list: Locator,
+): Promise<void> {
+  const meterBox = (await meter.boundingBox())!;
+  const listBox = (await list.boundingBox())!;
+  const frame = (await meter.page().getByRole("menu").boundingBox())!;
+
+  expect(meterBox.y + meterBox.height).toBeLessThanOrEqual(
+    listBox.y + listBox.height + 1,
+  );
+  expect(meterBox.y).toBeGreaterThanOrEqual(listBox.y - 1);
+  expect(meterBox.x).toBeGreaterThan(frame.x);
+  expect(meterBox.x + meterBox.width).toBeLessThan(frame.x + frame.width);
+}
+
+/** Painted outline width, in px. */
+async function outlineWidth(item: Locator): Promise<number> {
+  if ((await item.count()) === 0) return 0;
+  return item.first().evaluate((element) => {
+    const { outlineStyle, outlineWidth } = getComputedStyle(element);
+    return outlineStyle === "none" ? 0 : Number.parseFloat(outlineWidth) || 0;
+  });
+}

playwright/component/audio-menu.spec.ts

@@ -0,0 +1,135 @@
+/*
+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, type Locator, type Page, test } from "@playwright/test";
+
+import { createUserAndRoom, resizeContainer, startHarness } from "./harness.ts";
+import { installFakeDevices } from "../utils/fake-devices.ts";
+
+/**
+ * The device menu with Element Call as a component in a host page, where the
+ * portalled menu must be sized against the call, not the window. Driven from
+ * the lobby: it builds the same menu, without two connections' worth of flake.
+ */
+
+// Sign-in, crypto setup and sync happen twice before anything shows.
+test.describe.configure({ timeout: 180_000 });
+
+test("sizes the device list against the call, not the window", async ({
+  page,
+}) => {
+  await installFakeDevices(page, { microphones: 20, speakers: 4 });
+  const { username, roomId } = await createUserAndRoom("menusize");
+  const panes = await startHarness(page, username, roomId);
+  const pane = panes.first();
+
+  // A short call in a much taller page.
+  const container = pane.getByTestId("call-container");
+  await resizeContainer(container, { width: 900, height: 400 });
+  await expect(pane.getByTestId("lobby_joinCall")).toBeVisible({
+    timeout: 60_000,
+  });
+
+  const list = await openDeviceList(page, pane);
+  const callHeight = (await container.boundingBox())!.height;
+  const windowHeight = page.viewportSize()!.height;
+  const listHeight = (await list.boundingBox())!.height;
+
+  expect(callHeight).toBeLessThan(windowHeight * 0.75);
+  expect(listHeight).toBeLessThanOrEqual(callHeight);
+  expect(listHeight).toBeLessThan(windowHeight * 0.6);
+});
+
+test("follows the call area when the host resizes it", async ({ page }) => {
+  await installFakeDevices(page, { microphones: 20, speakers: 4 });
+  const { username, roomId } = await createUserAndRoom("menuresize");
+  const panes = await startHarness(page, username, roomId);
+  const pane = panes.first();
+
+  const container = pane.getByTestId("call-container");
+  await resizeContainer(container, { width: 900, height: 360 });
+  await expect(pane.getByTestId("lobby_joinCall")).toBeVisible({
+    timeout: 60_000,
+  });
+
+  const list = await openDeviceList(page, pane);
+  const whenShort = (await list.boundingBox())!.height;
+
+  // The host grows the call while the menu is open.
+  await resizeContainer(container, { width: 900, height: 700 });
+  await expect
+    .poll(async () => (await list.boundingBox())!.height)
+    .toBeGreaterThan(whenShort);
+});
+
+test("keeps every device reachable in a small container", async ({ page }) => {
+  await installFakeDevices(page, { microphones: 20, speakers: 4 });
+  const { username, roomId } = await createUserAndRoom("menureach");
+  const panes = await startHarness(page, username, roomId);
+  const pane = panes.first();
+
+  const container = pane.getByTestId("call-container");
+  await resizeContainer(container, { width: 400, height: 360 });
+  await expect(pane.getByTestId("lobby_joinCall")).toBeVisible({
+    timeout: 60_000,
+  });
+
+  const list = await openDeviceList(page, pane);
+  // More devices than fit, so the list must scroll.
+  expect(await list.evaluate((el) => el.scrollHeight > el.clientHeight)).toBe(
+    true,
+  );
+
+  const last = page.getByRole("menuitemradio", { name: "Fake Microphone 20" });
+  await last.scrollIntoViewIfNeeded();
+  await expect(last).toBeInViewport();
+  // Reachable means clickable: the menu may be drawn outside the call area.
+  await last.click();
+  await expect(last).toHaveAttribute("aria-checked", "true");
+});
+
+test("tracks the focus source of its own call, not the page", async ({
+  page,
+}) => {
+  await installFakeDevices(page);
+  const { username, roomId } = await createUserAndRoom("menufocus");
+  const panes = await startHarness(page, username, roomId);
+  const pane = panes.first();
+  const other = panes.nth(1);
+
+  await expect(pane.getByTestId("lobby_joinCall")).toBeVisible({
+    timeout: 60_000,
+  });
+  await openDeviceList(page, pane);
+  const menu = page.getByRole("menu");
+
+  // Asserted on the attribute: the component build's scoped stylesheet doesn't
+  // reach the portalled menu, so its ring can't be read here.
+  await expect(menu).toHaveAttribute("data-focus-source", "pointer");
+
+  // A key pressed in the other call says nothing about this menu.
+  await other.evaluate((element) =>
+    element.dispatchEvent(
+      new KeyboardEvent("keydown", { key: "ArrowDown", bubbles: true }),
+    ),
+  );
+  await expect(menu).toHaveAttribute("data-focus-source", "pointer");
+
+  await page.keyboard.press("ArrowDown");
+  await expect(menu).toHaveAttribute("data-focus-source", "keyboard");
+});
+
+/** Opens a component's microphone menu and returns its device list. */
+async function openDeviceList(page: Page, pane: Locator): Promise<Locator> {
+  await pane
+    .getByRole("button", { name: "Microphone" })
+    .click({ timeout: 60_000 });
+  await expect(page.getByRole("menu")).toBeVisible();
+  const list = page.getByRole("menu").getByTestId("device-list");
+  await expect(list).toBeVisible();
+  return list;
+}

playwright/component/harness.ts

@@ -92,6 +92,12 @@ export async function expectWithin(
   outer: Locator,
 ): Promise<void> {
   await expect(inner).toBeVisible();
+  // Wait for animations to settle.
+  await inner.evaluate(async (element) => {
+    for (const animation of element.getAnimations({ subtree: true }))
+      await animation.finished;
+  });
+
   const innerBox = await inner.boundingBox();
   const outerBox = await outer.boundingBox();
   if (innerBox === null || outerBox === null)

playwright/errors.spec.ts

@@ -7,7 +7,7 @@ Please see LICENSE in the repository root for full details.
 
 import { expect, test } from "@playwright/test";
 
-import { createJTWToken } from "./fixtures/jwt-token";
+import { createJWTToken } from "./fixtures/jwt-token";
 
 test("Should show error screen if fails to get JWT token", async ({ page }) => {
   await page.goto("/");
@@ -95,7 +95,7 @@ test("Should show error screen if call creation is restricted", async ({
         contentType: "application/json",
         body: JSON.stringify({
           url: "wss://badurltotricktest/livekit/sfu",
-          jwt: createJTWToken("@fake:user", "!fake:room"),
+          jwt: createJWTToken("@fake:user", "!fake:room"),
         }),
       }),
   );

playwright/fixtures/jwt-token.ts

@@ -5,7 +5,7 @@ SPDX-License-Identifier: AGPL-3.0-only OR LicenseRef-Element-Commercial
 Please see LICENSE in the repository root for full details.
 */
 
-export function createJTWToken(sub: string, room: string): string {
+export function createJWTToken(sub: string, room: string): string {
   return [
     {}, // header
     {

playwright/fixtures/widget-user.ts

@@ -132,7 +132,7 @@ export const widgetTest = test.extend<MyFixtures>({
 
       await ewPage1
         .getByRole("navigation", { name: "Room list" })
-        .getByRole("button", { name: "New conversation" })
+        .getByRole("button", { name: "New", exact: true })
         .click();
 
       await ewPage1.getByRole("menuitem", { name: "Start chat" }).click();

playwright/url-transport.spec.ts

@@ -0,0 +1,493 @@
+/*
+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, type Page, test } from "@playwright/test";
+
+import { SpaHelpers } from "./spa-helpers";
+import { type RtcMode } from "./widget/test-helpers.ts";
+
+const sfuUrl = "wss://matrix-rtc.m.localhost/livekit/sfu";
+const serviceUrl = "https://matrix-rtc.m.localhost/livekit/jwt";
+
+const otherHomeserver = {
+  base_url: "https://synapse.othersite.m.localhost",
+  server_name: "synapse.othersite.m.localhost",
+};
+const otherSfuUrl = "wss://matrix-rtc.othersite.m.localhost/livekit/sfu";
+
+interface Transport {
+  type: "livekit";
+  url?: string;
+  livekit_service_url?: string;
+}
+
+/**
+ * The transport shapes a homeserver may advertise while migrating to the
+ * latest MSC4195. `legacy` is what the e2e Synapse advertises on its own.
+ */
+const shapes = {
+  url: { type: "livekit", url: sfuUrl },
+  both: { type: "livekit", url: sfuUrl, livekit_service_url: serviceUrl },
+  legacy: null,
+} satisfies Record<string, Transport | null>;
+type Shape = keyof typeof shapes;
+
+/** Which endpoint a page asks for its SFU tokens. */
+type Flow = "cs-api" | "service-legacy" | "service-default";
+
+const cases: {
+  hostShape: Shape;
+  guestShape: Shape;
+  /** The MatrixRTC mode both sides use; the default is compatibility mode. */
+  mode?: RtcMode;
+  hostFlows: Flow[];
+  guestFlows: Flow[];
+}[] = [
+  {
+    hostShape: "url",
+    guestShape: "url",
+    hostFlows: ["cs-api"],
+    guestFlows: ["cs-api"],
+  },
+  {
+    // Publishers keep the legacy participant identity that clients predating
+    // MSC4195 expect, which only the JWT service assigns.
+    hostShape: "both",
+    guestShape: "both",
+    hostFlows: ["service-legacy"],
+    guestFlows: ["service-legacy"],
+  },
+  {
+    // The MatrixRTC mode has no bearing on the choice.
+    hostShape: "both",
+    guestShape: "both",
+    mode: "2_0",
+    hostFlows: ["service-legacy"],
+    guestFlows: ["service-legacy"],
+  },
+  {
+    hostShape: "url",
+    guestShape: "legacy",
+    hostFlows: ["cs-api", "service-default"],
+    guestFlows: ["service-legacy", "cs-api"],
+  },
+];
+
+for (const { hostShape, guestShape, mode, hostFlows, guestFlows } of cases) {
+  test(`One to one call with ${hostShape} host and ${guestShape} guest transport${mode === "2_0" ? " in Matrix 2.0 mode" : ""}`, async ({
+    browser,
+    page,
+    browserName,
+  }) => {
+    skipOnFirefox(browserName);
+
+    // The host starts the call.
+    await advertiseTransport(page, shapes[hostShape]);
+    const hostRequests = recordAuthRequests(page);
+    await page.goto("/");
+    await SpaHelpers.createCall(page, "Androl", "HelloCall", true, mode);
+    const inviteLink = await SpaHelpers.getCallInviteLink(page);
+
+    // The guest joins.
+    const guestContext = await browser.newContext({ reducedMotion: "reduce" });
+    const guestPage = await guestContext.newPage();
+    await advertiseTransport(guestPage, shapes[guestShape]);
+    const guestRequests = recordAuthRequests(guestPage);
+    await SpaHelpers.joinCallFromInviteLink(
+      guestPage,
+      inviteLink,
+      "Pevara",
+      mode,
+    );
+
+    // Wait for the call to connect and render.
+    await SpaHelpers.expectVideoTilesCount(page, 2);
+    await SpaHelpers.expectVideoTilesCount(guestPage, 2);
+
+    // The host and guest ran through the expected flows.
+    expect(flowsOf(hostRequests)).toEqual(new Set(hostFlows));
+    expect(flowsOf(guestRequests)).toEqual(new Set(guestFlows));
+
+    // All requests succeeded and the SFU URL was set on C-S requests.
+    for (const request of [...hostRequests, ...guestRequests]) {
+      expect(request.status).toBe(200);
+      if (request.flow === "cs-api") expect(request.sfuUrl).toBe(sfuUrl);
+      // Clients predating MSC4195 match a publisher by the legacy identity,
+      // which only the JWT service's legacy endpoint assigns. The other flows
+      // hash it.
+      expect(request.identity).toMatch(
+        request.flow === "service-legacy" ? legacyIdentity : hashedIdentity,
+      );
+    }
+  });
+}
+
+test("Subscriber falls back to the JWT service when the homeserver lacks MSC4195", async ({
+  browser,
+  page,
+  browserName,
+}) => {
+  skipOnFirefox(browserName);
+
+  // The host starts the call with both transport shapes.
+  await advertiseTransport(page, shapes.both);
+  await page.goto("/");
+  await SpaHelpers.createCall(page, "Androl", "HelloCall", true);
+  const inviteLink = await SpaHelpers.getCallInviteLink(page);
+
+  // The guest joins but their C-S requests fail.
+  const guestContext = await browser.newContext({ reducedMotion: "reduce" });
+  const guestPage = await guestContext.newPage();
+  await rejectCsApiTokens(guestPage);
+  const guestRequests = recordAuthRequests(guestPage);
+  await SpaHelpers.joinCallFromInviteLink(guestPage, inviteLink, "Pevara");
+
+  // Wait for the call to connect and render.
+  await SpaHelpers.expectVideoTilesCount(page, 2);
+  await SpaHelpers.expectVideoTilesCount(guestPage, 2);
+
+  // The guest ran through all flows.
+  expect(flowsOf(guestRequests)).toEqual(
+    new Set<Flow>(["cs-api", "service-legacy", "service-default"]),
+  );
+
+  // The C-S token requests failed.
+  for (const request of guestRequests) {
+    expect(request.status).toBe(request.flow === "cs-api" ? 404 : 200);
+  }
+
+  // The C-S token requests preceeded the fallback request.
+  const flows = guestRequests.map((r) => r.flow);
+  expect(flows.indexOf("service-default")).toBeGreaterThan(
+    flows.indexOf("cs-api"),
+  );
+});
+
+test("Publisher shows an error when the homeserver lacks MSC4195", async ({
+  page,
+  browserName,
+}) => {
+  skipOnFirefox(browserName);
+
+  // The host tries to start a call with only the C-S transport shape available but
+  // their C-S requests fail.
+  await advertiseTransport(page, shapes.url);
+  await rejectCsApiTokens(page);
+  await page.goto("/");
+  await SpaHelpers.createCall(page, "Androl", "HelloCall", true);
+
+  // We land on an error page.
+  await expect(
+    page.getByRole("heading", { name: "Something went wrong" }),
+  ).toBeVisible();
+  await expect(
+    page.getByText(
+      "The authorization service for your media server (SFU) is out of date.",
+    ),
+  ).toBeVisible();
+});
+
+/**
+ * Delegation follows the flow that authenticated the publisher: the homeserver
+ * for a `url`-only transport, the JWT service wherever there is one.
+ */
+const delegationCases: { shape: Shape; via: Delegation["via"] }[] = [
+  { shape: "url", via: "homeserver" },
+  { shape: "legacy", via: "service" },
+  { shape: "both", via: "service" },
+];
+
+for (const { shape, via } of delegationCases) {
+  test(`Delayed leave event delegated through the ${via} for a ${shape} transport gets sent on disconnect`, async ({
+    browser,
+    page,
+    browserName,
+  }) => {
+    skipOnFirefox(browserName);
+
+    // The host starts the call.
+    await advertiseTransport(page, shapes[shape]);
+    await page.goto("/");
+    await SpaHelpers.createCall(page, "Androl", "HelloCall", true);
+    const inviteLink = await SpaHelpers.getCallInviteLink(page);
+
+    // The guest joins.
+    const guestContext = await browser.newContext({ reducedMotion: "reduce" });
+    const guestPage = await guestContext.newPage();
+    await advertiseTransport(guestPage, shapes[shape]);
+    const delayedLeave = recordDelayedLeave(guestPage);
+    const delegations = recordDelegations(guestPage);
+    await SpaHelpers.joinCallFromInviteLink(guestPage, inviteLink, "Pevara");
+
+    // Wait for the call to connect and render.
+    await SpaHelpers.expectVideoTilesCount(page, 2);
+    await SpaHelpers.expectVideoTilesCount(guestPage, 2);
+
+    // The guest handed its delayed leave over, after probing for delegation
+    // support with bodiless requests, which count as supported unless they
+    // 404. The homeserver is always probed; the JWT service only when there
+    // is one.
+    await expect
+      .poll(() => delegations.at(-1))
+      .toEqual({
+        via,
+        status: 200,
+        delayId: delayedLeave.delayId,
+        ...(via === "homeserver" && { sfuUrl }),
+      });
+    const probes = delegations.slice(0, -1);
+    expect(probes.some((probe) => probe.via === via)).toBe(true);
+    for (const probe of probes) {
+      expect(probe.status).toBeGreaterThanOrEqual(400);
+      expect(probe.status).not.toBe(404);
+    }
+
+    // The delay is long enough that a leave within the window below cannot
+    // come from the delayed event expiring on its own.
+    expect(delayedLeave.delayMs).toBeGreaterThan(60_000);
+
+    // The guest drops without leaving.
+    await guestPage.reload();
+
+    // The host eventually sees the guest go once the delayed event fires.
+    await expect(page.getByTestId("videoTile")).toHaveCount(1, {
+      timeout: 30_000,
+    });
+  });
+}
+
+test("Subscribers get tokens for a remote homeserver's SFU over federation", async ({
+  browser,
+  page,
+  browserName,
+}) => {
+  skipOnFirefox(browserName);
+
+  // The host lives on the other homeserver and publishes on its SFU.
+  await useHomeserver(page, otherHomeserver);
+  await advertiseTransport(page, { type: "livekit", url: otherSfuUrl });
+  const hostRequests = recordAuthRequests(page);
+  await page.goto("/");
+  await SpaHelpers.createCall(page, "Androl", "HelloCall", true);
+  const inviteLink = await SpaHelpers.getCallInviteLink(page);
+
+  // The guest lives on the default homeserver and joins over federation.
+  const guestContext = await browser.newContext({ reducedMotion: "reduce" });
+  const guestPage = await guestContext.newPage();
+  await advertiseTransport(guestPage, shapes.url);
+  const guestRequests = recordAuthRequests(guestPage);
+  await SpaHelpers.joinCallFromInviteLink(
+    guestPage,
+    `${inviteLink}&viaServers=${otherHomeserver.server_name}`,
+    "Pevara",
+  );
+
+  // Wait for the call to connect and render.
+  await SpaHelpers.expectVideoTilesCount(page, 2);
+  await SpaHelpers.expectVideoTilesCount(guestPage, 2);
+
+  // Each side got a token for its own SFU and for the other side's SFU, all
+  // through its own homeserver.
+  for (const requests of [hostRequests, guestRequests]) {
+    expect(flowsOf(requests)).toEqual(new Set<Flow>(["cs-api"]));
+    expect(new Set(requests.map((r) => r.sfuUrl))).toEqual(
+      new Set([sfuUrl, otherSfuUrl]),
+    );
+    for (const request of requests) expect(request.status).toBe(200);
+  }
+});
+
+/** Skips the calling test if we're running on Firefox. */
+function skipOnFirefox(browserName: string): void {
+  test.skip(
+    browserName === "firefox",
+    "The is test is not working on firefox CI environment. No mic/audio device inputs so cam/mic are disabled",
+  );
+}
+
+/** Points this page's Element Call at another homeserver. */
+async function useHomeserver(
+  page: Page,
+  homeserver: typeof otherHomeserver,
+): Promise<void> {
+  await page.route("**/config.json", async (route) => {
+    const response = await route.fetch();
+    const config = (await response.json()) as Record<string, unknown>;
+    await route.fulfill({
+      response,
+      json: {
+        ...config,
+        default_server_config: { "m.homeserver": homeserver },
+      },
+    });
+  });
+}
+
+/**
+ * Maps recorded requests to a set of flows. Publisher and subscriber connections
+ * start concurrently so using arrays for comparison isn't convenient.
+ */
+function flowsOf(requests: AuthRequest[]): Set<Flow> {
+  return new Set(requests.map((r) => r.flow));
+}
+
+/**
+ * Replaces the transports the homeserver advertises to this page. The real
+ * response is fetched first so its CORS headers carry over.
+ */
+async function advertiseTransport(
+  page: Page,
+  transport: Transport | null,
+): Promise<void> {
+  if (transport === null) return;
+  await page.route("**/org.matrix.msc4143/rtc/transports", async (route) => {
+    if (route.request().method() !== "GET") return route.continue();
+    const response = await route.fetch();
+    await route.fulfill({ response, json: { rtc_transports: [transport] } });
+  });
+}
+
+/**
+ * Makes the homeserver look like one without MSC4195: its `get_token`
+ * endpoint answers as Synapse does for an unknown route.
+ */
+async function rejectCsApiTokens(page: Page): Promise<void> {
+  await page.route("**/rtc/livekit/get_token", async (route) => {
+    if (route.request().method() !== "POST") return route.continue();
+    await route.fulfill({
+      status: 404,
+      json: { errcode: "M_UNRECOGNIZED", error: "Unrecognized request" },
+      headers: { "Access-Control-Allow-Origin": "*" },
+    });
+  });
+}
+
+/** A recorded delayed leave event. */
+interface DelayedLeave {
+  delayMs?: number;
+  delayId?: string;
+}
+
+/** Records the delayed leave event the page schedules on joining. */
+function recordDelayedLeave(page: Page): DelayedLeave {
+  const delayedLeave: DelayedLeave = {};
+  page.on("response", (response) => {
+    const delay = new URL(response.request().url()).searchParams.get(
+      "org.matrix.msc4140.delay",
+    );
+    if (delay === null || response.status() !== 200) return;
+    delayedLeave.delayMs = Number(delay);
+    response
+      .json()
+      .then((body: { delay_id: string }) => {
+        delayedLeave.delayId = body.delay_id;
+      })
+      .catch(() => {});
+  });
+  return delayedLeave;
+}
+
+/** A recorded delegation request for a delayed leave event. */
+interface Delegation {
+  /** Who was asked to send the leave event on the guest's behalf. */
+  via: "homeserver" | "service";
+  status: number;
+  sfuUrl?: string;
+  delayId?: string;
+}
+
+/**
+ * Records requests that delegate a delayed leave event, or probe for support:
+ * the MSC4195 `delegate_delayed_leave` endpoint of the homeserver, and the JWT
+ * service's `delegate_delayed_leave` probe and `/sfu/get` with delay fields.
+ */
+function recordDelegations(page: Page): Delegation[] {
+  const delegations: Delegation[] = [];
+  page.on("response", (response) => {
+    const request = response.request();
+    if (request.method() !== "POST") return;
+    const url = request.url();
+    const body = request.postDataJSON() as {
+      url?: string;
+      delay_id?: string;
+    } | null;
+    if (url.endsWith("/rtc/livekit/delegate_delayed_leave")) {
+      delegations.push({
+        via: "homeserver",
+        status: response.status(),
+        ...(body && { sfuUrl: body.url, delayId: body.delay_id }),
+      });
+    } else if (url.endsWith("/livekit/jwt/delegate_delayed_leave")) {
+      delegations.push({ via: "service", status: response.status() });
+    } else if (url.endsWith("/livekit/jwt/sfu/get") && body?.delay_id) {
+      delegations.push({
+        via: "service",
+        status: response.status(),
+        delayId: body.delay_id,
+      });
+    }
+  });
+  return delegations;
+}
+
+/** A recorded token request. */
+interface AuthRequest {
+  flow: Flow;
+  status: number;
+  /** The SFU a request to the MSC4195 `get_token` endpoint asked for. */
+  sfuUrl?: string;
+  /** The participant identity the issued token carries. */
+  identity?: string;
+}
+
+/** The legacy `<user_id>:<device_id>` participant identity. */
+const legacyIdentity = /^@[^:]+:[^:]+:[A-Z]+$/;
+/** A hashed participant identity: unpadded base64 of a SHA-256. */
+const hashedIdentity = /^[A-Za-z0-9+/]{43}$/;
+
+/** Reads the subject of a JWT without verifying it. */
+function jwtSubject(jwt: string): string {
+  const [, payload] = jwt.split(".");
+  return (
+    JSON.parse(Buffer.from(payload, "base64url").toString()) as {
+      sub: string;
+    }
+  ).sub;
+}
+
+/** Records token requests, including the identity each token carries. */
+function recordAuthRequests(page: Page): AuthRequest[] {
+  const requests: AuthRequest[] = [];
+  page.on("response", (response) => {
+    const request = response.request();
+    if (request.method() !== "POST") return;
+    const url = request.url();
+    let entry: AuthRequest;
+    if (url.endsWith("/rtc/livekit/get_token")) {
+      entry = {
+        flow: "cs-api",
+        status: response.status(),
+        sfuUrl: (request.postDataJSON() as { url: string }).url,
+      };
+    } else if (url.endsWith("/livekit/jwt/sfu/get")) {
+      entry = { flow: "service-legacy", status: response.status() };
+    } else if (url.endsWith("/livekit/jwt/get_token")) {
+      entry = { flow: "service-default", status: response.status() };
+    } else {
+      return;
+    }
+    requests.push(entry);
+    if (entry.status !== 200) return;
+    response
+      .json()
+      .then((body: { jwt: string }) => {
+        entry.identity = jwtSubject(body.jwt);
+      })
+      .catch(() => {});
+  });
+  return requests;
+}

playwright/utils/fake-devices.ts

@@ -0,0 +1,85 @@
+/*
+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 { type Page } from "@playwright/test";
+
+/**
+ * Adds synthetic devices beside the browser's one fake microphone and speaker,
+ * so the menu has a choice to show. They share one capture and `setSinkId` is
+ * accepted but not honoured: routing still needs hardware and a manual check.
+ * Call before the page navigates.
+ */
+export async function installFakeDevices(
+  page: Page,
+  { microphones = 2, speakers = 2 } = {},
+): Promise<void> {
+  await page.addInitScript(
+    ({ microphones, speakers }) => {
+      const synthetic = (
+        kind: MediaDeviceKind,
+        count: number,
+        name: string,
+      ): MediaDeviceInfo[] =>
+        Array.from({ length: count }, (_, i) => {
+          const info = {
+            deviceId: `${kind}-${i + 1}`,
+            groupId: `${kind}-group-${i + 1}`,
+            kind,
+            label: `${name} ${i + 1}`,
+          };
+          return { ...info, toJSON: () => info } as MediaDeviceInfo;
+        });
+      const ids = new Set(
+        [
+          ...synthetic("audioinput", microphones, ""),
+          ...synthetic("audiooutput", speakers, ""),
+        ].map((d) => d.deviceId),
+      );
+
+      const devices = navigator.mediaDevices;
+      const enumerate = devices.enumerateDevices.bind(devices);
+      devices.enumerateDevices = async (): Promise<MediaDeviceInfo[]> => [
+        ...(await enumerate()),
+        ...synthetic("audioinput", microphones, "Fake Microphone"),
+        ...synthetic("audiooutput", speakers, "Fake Speaker"),
+      ];
+
+      // Our ids name no hardware, so drop the exact-device constraint.
+      const getUserMedia = devices.getUserMedia.bind(devices);
+      devices.getUserMedia = async (
+        constraints?: MediaStreamConstraints,
+      ): Promise<MediaStream> => {
+        const audio = constraints?.audio;
+        if (typeof audio === "object") {
+          const requested = audio.deviceId;
+          const id =
+            typeof requested === "object" && requested !== null
+              ? ((requested as ConstrainDOMStringParameters).exact as string)
+              : (requested as string | undefined);
+          if (id !== undefined && ids.has(id))
+            return getUserMedia({ ...constraints, audio: true });
+        }
+        return getUserMedia(constraints);
+      };
+
+      // Accept routing to our ids on both media elements and the AudioContext,
+      // which the app also routes.
+      for (const proto of [
+        HTMLMediaElement.prototype,
+        AudioContext.prototype,
+      ]) {
+        const sink = proto as { setSinkId?: (id: string) => Promise<void> };
+        const setSinkId = sink.setSinkId;
+        if (setSinkId === undefined) continue;
+        sink.setSinkId = async function (id: string): Promise<void> {
+          if (!ids.has(id)) await setSinkId.call(this, id);
+        };
+      }
+    },
+    { microphones, speakers },
+  );
+}

playwright/widget/federated-call.test.ts

@@ -37,8 +37,6 @@ modePairs.forEach(([rtcMode1, rtcMode2]) => {
 
       await TestHelpers.acceptRoomInvite(roomName, timo.page);
 
-      await florian.page.pause();
-
       await TestHelpers.openWidgetSetEmbeddedElementCallRtcModeCloseWidget(
         florian.page,
         rtcMode1,
@@ -74,8 +72,6 @@ modePairs.forEach(([rtcMode1, rtcMode2]) => {
 
         await TestHelpers.expectVisibleVideoCount(frame, 2);
       }
-
-      // await florian.page.pause();
     },
   );
 });

playwright/widget/test-helpers.ts

@@ -223,7 +223,7 @@ export class TestHelpers {
 
     await page
       .getByRole("navigation", { name: "Room list" })
-      .getByRole("button", { name: "New conversation" })
+      .getByRole("button", { name: "New", exact: true })
       .click();
 
     await page.getByRole("menuitem", { name: "New Room" }).click({

playwright/widget/url-transport.test.ts

@@ -0,0 +1,108 @@
+/*
+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, type Page, test } from "@playwright/test";
+
+import { widgetTest } from "../fixtures/widget-user.ts";
+import { HOST1, TestHelpers } from "./test-helpers.ts";
+
+const sfuUrl = "wss://matrix-rtc.m.localhost/livekit/sfu";
+const serviceUrl = "https://matrix-rtc.m.localhost/livekit/jwt";
+
+/** Which endpoint a page asks for its SFU tokens. */
+type Flow = "cs-api" | "service-legacy" | "service-default";
+
+widgetTest(
+  "Call between a url + livekit_service_url transport and a legacy one",
+  async ({ addUser, browserName }) => {
+    test.skip(
+      browserName === "firefox",
+      "The is test is not working on firefox CI environment. No mic/audio device inputs so cam/mic are disabled",
+    );
+    test.slow();
+
+    const [host, guest] = await Promise.all([
+      addUser("Androl", HOST1),
+      addUser("Pevara", HOST1),
+    ]);
+
+    // The host's homeserver has started advertising a `url` next to its JWT
+    // service; the guest's still advertises the JWT service alone.
+    await advertiseTransport(host.page, {
+      type: "livekit",
+      url: sfuUrl,
+      livekit_service_url: serviceUrl,
+    });
+    // Element Web answers the widget from a cache it filled at login, so make
+    // it fetch the transports again now that they are rerouted
+    await host.clientHandle.evaluate(async (client) => {
+      await client.cachedRtcTransports.refresh();
+    });
+    const hostFlows = recordFlows(host.page);
+    const guestFlows = recordFlows(guest.page);
+
+    const roomName = "Transport Room";
+    await TestHelpers.createRoom(roomName, host.page, [guest.mxId]);
+    await TestHelpers.acceptRoomInvite(roomName, guest.page);
+
+    await TestHelpers.startCallInCurrentRoom(host.page, false);
+    await TestHelpers.joinCallFromLobby(host.page);
+    await TestHelpers.joinCallInCurrentRoom(guest.page);
+
+    for (const user of [host, guest]) {
+      const frame = user.page
+        .locator('iframe[title="Element Call"]')
+        .contentFrame();
+      await expect(frame.getByTestId("videoTile")).toHaveCount(2, {
+        timeout: 10000,
+      });
+      await expect(frame.getByText("Waiting for media...")).not.toBeVisible({
+        timeout: 10000,
+      });
+      await TestHelpers.expectVisibleVideoCount(frame, 2);
+    }
+
+    // Element Web does not expose the MSC4195 endpoints to widgets yet, so
+    // neither side reached the CS API. The host published through the JWT
+    // service's legacy endpoint and subscribed to the guest through its
+    // default one; the guest published the same way and fell back to the
+    // default endpoint for the host's transport.
+    expect(hostFlows).toEqual(new Set(["service-legacy", "service-default"]));
+    expect(guestFlows).toEqual(new Set(["service-legacy", "service-default"]));
+  },
+);
+
+/**
+ * Replaces the transports the homeserver advertises to this page, including
+ * to the widget host, which fetches them on the widget's behalf. The real
+ * response is fetched first so its CORS headers carry over.
+ */
+async function advertiseTransport(
+  page: Page,
+  transport: { type: "livekit"; url?: string; livekit_service_url?: string },
+): Promise<void> {
+  await page.route("**/org.matrix.msc4143/rtc/transports", async (route) => {
+    if (route.request().method() !== "GET") return route.continue();
+    const response = await route.fetch();
+    await route.fulfill({ response, json: { rtc_transports: [transport] } });
+  });
+}
+
+/** Records which token endpoints the page's widget asks. */
+function recordFlows(page: Page): Set<Flow> {
+  const flows = new Set<Flow>();
+  page.on("response", (response) => {
+    const request = response.request();
+    if (request.method() !== "POST") return;
+    const url = request.url();
+    if (url.endsWith("/rtc/livekit/get_token")) flows.add("cs-api");
+    else if (url.endsWith("/livekit/jwt/sfu/get")) flows.add("service-legacy");
+    else if (url.endsWith("/livekit/jwt/get_token"))
+      flows.add("service-default");
+  });
+  return flows;
+}

pnpm-lock.yaml

@@ -132,10 +132,10 @@ importers:
         version: 10.3.1(react@19.2.8)
       '@vector-im/compound-design-tokens':
         specifier: ^11.0.0
-        version: 11.0.0(@types/react@19.2.18)(react@19.2.8)
+        version: 11.2.0(@types/react@19.2.18)(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.5(@types/react@19.2.18))(@types/react@19.2.18)(@vector-im/compound-design-tokens@11.0.0(@types/react@19.2.18)(react@19.2.8))(react-dom@19.2.8(react@19.2.8))(react@19.2.8)
+        specifier: ^10.4.0
+        version: 10.4.0(@fontsource/inconsolata@5.3.0)(@fontsource/inter@5.3.0)(@types/react-dom@19.2.5(@types/react@19.2.18))(@types/react@19.2.18)(@vector-im/compound-design-tokens@11.2.0(@types/react@19.2.18)(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.1.1(@rolldown/plugin-babel@0.2.3(@babel/core@7.29.7(supports-color@7.2.0))(@babel/runtime@8.0.0)(rolldown@1.2.7)(vite@8.2.2(@types/node@24.13.3)(esbuild@0.28.2)(jiti@2.7.0)(sass@1.103.1)(terser@5.46.1)(yaml@2.9.0)))(babel-plugin-react-compiler@1.0.0)(vite@8.2.2(@types/node@24.13.3)(esbuild@0.28.2)(jiti@2.7.0)(sass@1.103.1)(terser@5.46.1)(yaml@2.9.0))
@@ -191,20 +191,17 @@ importers:
         specifier: ^1.9.1
         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/24929be0e741be6a5d0a7226f1c682e245263b8a
+        specifier: github:matrix-org/matrix-js-sdk#9405287c22797e9d69acd366c47bf412fa4384c8
+        version: https://codeload.github.com/matrix-org/matrix-js-sdk/tar.gz/9405287c22797e9d69acd366c47bf412fa4384c8
       matrix-widget-api:
         specifier: ^1.18.0
-        version: 1.19.0
+        version: 1.20.0
       node-stdlib-browser:
         specifier: ^1.3.1
         version: 1.3.1
       normalize.css:
         specifier: ^8.0.1
         version: 8.0.1
-      observable-hooks:
-        specifier: ^4.2.3
-        version: 4.2.4(react-dom@19.2.8(react@19.2.8))(react@19.2.8)(rxjs@7.8.2)
       oxfmt:
         specifier: ^0.66.0
         version: 0.66.0
@@ -225,7 +222,7 @@ importers:
         version: 10.6.1(postcss@8.5.26)
       postcss-selector-parser:
         specifier: ^7.1.1
-        version: 7.1.3
+        version: 7.1.6
       posthog-js:
         specifier: 1.408.2
         version: 1.408.2
@@ -271,9 +268,6 @@ importers:
       vite:
         specifier: ^8.0.0
         version: 8.2.2(@types/node@24.13.3)(esbuild@0.28.2)(jiti@2.7.0)(sass@1.103.1)(terser@5.46.1)(yaml@2.9.0)
-      vite-plugin-generate-file:
-        specifier: ^0.3.0
-        version: 0.3.1
       vite-plugin-html:
         specifier: ^3.2.2
         version: 3.2.2(vite@8.2.2(@types/node@24.13.3)(esbuild@0.28.2)(jiti@2.7.0)(sass@1.103.1)(terser@5.46.1)(yaml@2.9.0))
@@ -1197,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.5.0':
-    resolution: {integrity: sha512-E826Hy1rG26LanPjtSsOiVRcVoHfSgPgj2r2Xsb5RPScpaKi9XJADQ0u3dNjRCitZPX4oyLNl1FDd5AfDlmIwQ==}
+  '@matrix-org/matrix-sdk-crypto-wasm@18.9.0':
+    resolution: {integrity: sha512-NtLzNDTEfNASBjNCTGZHuk7N0jrQhS6Zx2CM857rCHZYYh/rpbKGQNrJ7azktm4S1P5Jy3WU3nwJTGohGw26qQ==}
     engines: {node: '>= 18'}
 
   '@mdx-js/react@3.1.1':
@@ -3229,8 +3223,8 @@ packages:
     peerDependencies:
       react: '>= 16.8.0'
 
-  '@vector-im/compound-design-tokens@11.0.0':
-    resolution: {integrity: sha512-pWz0Q67Xbo8gwzaTeFbTTcM6i29ju6PR7SqyuExr2nIV3j9K785cOInft8FA2CM7PEapkr6TRtJKR/4xtWh2RA==}
+  '@vector-im/compound-design-tokens@11.2.0':
+    resolution: {integrity: sha512-XGwO63ZqFVXdkhCVLm3wa/tpx2Lw8pyaQYskObrLZIUkjs3aUmgq8CNhGcjkqRJXYGsLNJE2azov4DaM74h2PQ==}
     peerDependencies:
       '@adobe/leonardo-contrast-colors': ^1.0.0
       '@types/react': '*'
@@ -3246,13 +3240,13 @@ packages:
       react:
         optional: true
 
-  '@vector-im/compound-web@10.0.1':
-    resolution: {integrity: sha512-CT3aGMalPSf53o3JUbBF7EA10Rfp+auftIuBwOUSna+hfZ/zPxGLTFcuCuOJ7L8hrzijM+V4I8L0PUkfyOczpg==}
+  '@vector-im/compound-web@10.4.0':
+    resolution: {integrity: sha512-Tt5hsNK7ulhGdRuy9lzSm5C+T8M/4O4kLDFLkaU+Hi1kVWj6tj/5awW+U+GvtpWRh5llbHN2HRCh79+gQhek+A==}
     peerDependencies:
       '@fontsource/inconsolata': ^5
       '@fontsource/inter': ^5
       '@types/react': '*'
-      '@vector-im/compound-design-tokens': '>=1.6.1 <11.0.0'
+      '@vector-im/compound-design-tokens': '>=1.6.1 <12.0.0'
       react: ^18 || ^19.0.0
     peerDependenciesMeta:
       '@types/react':
@@ -3662,8 +3656,8 @@ packages:
   constants-browserify@1.0.0:
     resolution: {integrity: sha512-xFxOwqIzR/e1k1gLiWEophSCMqXcwVHIH7akf7b/vxcUeGunlj3hvZaaqxwHsTgn+IndtkQJgSztIDWeumWJDQ==}
 
-  content-type@3.0.0:
-    resolution: {integrity: sha512-AIi5H6p0xk5uknXcN3/rmhP8jgp69OfSe/JuKiQAFprJ7UGw7mwj7m4XcmDzlrnJDG+cGpphAINGdU3g3g7kDw==}
+  content-type@3.1.1:
+    resolution: {integrity: sha512-GW4qUsfFo59d0HbUibDlWv5wPz+vAAcaTWbKIuKCf0JkC7wWkSyf8f13IpXn5JkeMlB2P8iTSSIjwXljorg2vA==}
     engines: {node: '>=22'}
 
   convert-source-map@2.0.0:
@@ -4468,10 +4462,6 @@ packages:
   js-tokens@4.0.0:
     resolution: {integrity: sha512-RdJUflcE3cUzKiMqQgsCu06FPu9UdIJO0beYbPhHN4k6apgJtifcoCtT9bcxOpYBtpD2kCM6Sbzg4CausW/PKQ==}
 
-  js-yaml@4.3.0:
-    resolution: {integrity: sha512-1td788aAnnZ5qs7V2QIRl1owjtYpbKt749Y3xauqQgwIIGF/xXWz1wMTEBx5O3LK3lXLVuqXPdPxj2BoFHaW9Q==}
-    hasBin: true
-
   js-yaml@4.3.1:
     resolution: {integrity: sha512-CY6crGq313MX8GkwvB7tzgp99vjQxY1++5y10/BKN/GUfHqWaOGQMNZkBvqSzsZKWk/ijwHlWzzkLulsGHhjWQ==}
     hasBin: true
@@ -4683,13 +4673,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/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
+  matrix-js-sdk@https://codeload.github.com/matrix-org/matrix-js-sdk/tar.gz/9405287c22797e9d69acd366c47bf412fa4384c8:
+    resolution: {gitHosted: true, integrity: sha512-pYk38ggTEdM0WWXLDiFoKmyRn3wo3o8m1ge0iCtxjBmgAW5qoQ2Ifd8oHVy+gu6PQe/CfLuKPXEXH8hff9C8GA==, tarball: https://codeload.github.com/matrix-org/matrix-js-sdk/tar.gz/9405287c22797e9d69acd366c47bf412fa4384c8}
+    version: 44.0.0
     engines: {node: '>=22.0.0'}
 
-  matrix-widget-api@1.19.0:
-    resolution: {integrity: sha512-Qe7L6G1mQJphBC47/Bzp5ljPIK1UARgLiuGgS+/KmEs/eaNHkQ3+ArD0/0kvMV+d6kCGAZ9OKRqsnuPjizI+tw==}
+  matrix-widget-api@1.20.0:
+    resolution: {integrity: sha512-qwFP37rgns7mPesM5/vvZgknzb+kvyRB5BISv5sCuBxsGMceMr+Kogf7OkjRxBXdMCPBFuf6gIuYRe5S+lpzQw==}
 
   md5.js@1.3.5:
     resolution: {integrity: sha512-xitP+WxNPcTTOgnTJcrhM0xvdPepipPSf3I8EIpGKeFLjt3PlJLIDG3u8EX53ZIubkb+5U2+3rELYpEhHhzdkg==}
@@ -4706,14 +4696,6 @@ packages:
     resolution: {integrity: sha512-115fLhvZVqWwHPbClyntxEVfVDfl9DLLTuJvq3g2O/Oxi8AiNouAHvDSzHS0viUJc+V5vm3eq91Xwqn9dp4jRA==}
     hasBin: true
 
-  mime-db@1.52.0:
-    resolution: {integrity: sha512-sPU4uV7dYlvtWJxwwxHD0PuihVNiE7TyAbQ5SWxDCB9mUYvOgroQOwYQQOKPJ8CIbE+1ETVlOoK1UC2nU3gYvg==}
-    engines: {node: '>= 0.6'}
-
-  mime-types@2.1.35:
-    resolution: {integrity: sha512-ZDY+bPm5zTTF+YpCrAU9nK0UgICYPT0QtT1NZWFv4s++TNkcgVaT0g6+4R2uI4MjQjzysHB1zxuWL50hzaeXiw==}
-    engines: {node: '>= 0.6'}
-
   mimic-function@5.0.1:
     resolution: {integrity: sha512-VP79XUPxV2CigYP3jWwAUFSku2aKqBH7uTAapFWCBqutsbmDo96KY5o8uh6U+/YSIn5OxJnXp73beVkpqMIGhA==}
     engines: {node: '>=18'}
@@ -4816,13 +4798,6 @@ packages:
     resolution: {integrity: sha512-nK28WOo+QIjBkDduTINE4JkF/UJJKyf2EJxvJKfblDpyg0Q+pkOHNTL0Qwy6NP6FhE/EnzV73BxxqcJaXY9anw==}
     engines: {node: '>= 0.4'}
 
-  observable-hooks@4.2.4:
-    resolution: {integrity: sha512-FdTQgyw1h5bG/QHCBIqctdBSnv9VARJCEilgpV6L2qlw1yeLqFIwPm4U15dMtl5kDmNN0hSt+Nl6iYbLFwEcQA==}
-    peerDependencies:
-      react: '>=16.8.0'
-      react-dom: '>=16.8.0'
-      rxjs: '>=6.0.0'
-
   obug@2.1.4:
     resolution: {integrity: sha512-4a+OsYv9UktOJKE+l1A4OufDgdRF9PifWj+tJnHURo/P+WOxpG4GzUFL9qCalmWauao6ogiG+QvnCovwPoyAWA==}
     engines: {node: '>=12.20.0'}
@@ -4905,8 +4880,8 @@ packages:
     resolution: {integrity: sha512-LaNjtRWUBY++zB5nE/NwcaoMylSPk+S+ZHNB1TzdbMJMny6dynpAGt7X/tl/QYq3TIeE6nxHppbo2LGymrG5Pw==}
     engines: {node: '>=10'}
 
-  p-retry@8.0.0:
-    resolution: {integrity: sha512-kFVqH1HxOHp8LupNsOys7bSV09VYTRLxarH/mokO4Rqhk6wGi70E0jh4VzvVGXfEVNggHoHLAMWsQqHyU1Ey9A==}
+  p-retry@8.0.1:
+    resolution: {integrity: sha512-NAigyu8hfvJe7MsS18mnc4is0MZtau3QMdBklaJKK23oBQb6occO3UPM3vHmTckW8KhfyjMZaUOqdTFEYliHgg==}
     engines: {node: '>=22'}
 
   p-try@2.2.0:
@@ -5185,8 +5160,8 @@ packages:
     peerDependencies:
       postcss: ^8.4
 
-  postcss-selector-parser@7.1.3:
-    resolution: {integrity: sha512-ajnd7iZnqjJDkyHNfznl/ZVO0lWqvBmQXfKKENx9/p/bEiF/L3eHwdydNUg9RXZx6xfZWOCmXmBa5oeB+YrAPQ==}
+  postcss-selector-parser@7.1.6:
+    resolution: {integrity: sha512-7qASPzhKF2l2KLboRZux8CCTRMdGiV08vWmyKzPz22qZ7ZjQBOeY7rNzNoCLSUiftJ7HUq0GERHmxw/t0dCdMw==}
     engines: {node: '>=4'}
 
   postcss-value-parser@4.2.0:
@@ -5914,9 +5889,6 @@ packages:
       react: ^16.8 || ^17.0 || ^18.0 || ^19.0.0 || ^19.0.0-rc
       react-dom: ^16.8 || ^17.0 || ^18.0 || ^19.0.0 || ^19.0.0-rc
 
-  vite-plugin-generate-file@0.3.1:
-    resolution: {integrity: sha512-tiA3gkPM21MS2+RyqsBMT33GSlM9LM1TJjf6vGvV/e/ml3e3vTKfuH3l2N0NpUgcayvj1fXnmlo5YBuahA6bsg==}
-
   vite-plugin-html@3.2.2:
     resolution: {integrity: sha512-vb9C9kcdzcIo/Oc3CLZVS03dL5pDlOFuhGlZYDCJ840BhWl/0nGeZWf3Qy7NlOayscY4Cm/QRgULCQkEZige5Q==}
     peerDependencies:
@@ -6425,9 +6397,9 @@ snapshots:
 
   '@csstools/postcss-cascade-layers@5.0.2(postcss@8.5.26)':
     dependencies:
-      '@csstools/selector-specificity': 5.0.0(postcss-selector-parser@7.1.3)
+      '@csstools/selector-specificity': 5.0.0(postcss-selector-parser@7.1.6)
       postcss: 8.5.26
-      postcss-selector-parser: 7.1.3
+      postcss-selector-parser: 7.1.6
 
   '@csstools/postcss-color-function-display-p3-linear@1.0.1(postcss@8.5.26)':
     dependencies:
@@ -6533,9 +6505,9 @@ snapshots:
 
   '@csstools/postcss-is-pseudo-class@5.0.3(postcss@8.5.26)':
     dependencies:
-      '@csstools/selector-specificity': 5.0.0(postcss-selector-parser@7.1.3)
+      '@csstools/selector-specificity': 5.0.0(postcss-selector-parser@7.1.6)
       postcss: 8.5.26
-      postcss-selector-parser: 7.1.3
+      postcss-selector-parser: 7.1.6
 
   '@csstools/postcss-light-dark-function@2.0.11(postcss@8.5.26)':
     dependencies:
@@ -6637,7 +6609,7 @@ snapshots:
   '@csstools/postcss-scope-pseudo-class@4.0.1(postcss@8.5.26)':
     dependencies:
       postcss: 8.5.26
-      postcss-selector-parser: 7.1.3
+      postcss-selector-parser: 7.1.6
 
   '@csstools/postcss-sign-functions@1.1.4(postcss@8.5.26)':
     dependencies:
@@ -6681,13 +6653,13 @@ snapshots:
     dependencies:
       postcss: 8.5.26
 
-  '@csstools/selector-resolve-nested@3.1.0(postcss-selector-parser@7.1.3)':
+  '@csstools/selector-resolve-nested@3.1.0(postcss-selector-parser@7.1.6)':
     dependencies:
-      postcss-selector-parser: 7.1.3
+      postcss-selector-parser: 7.1.6
 
-  '@csstools/selector-specificity@5.0.0(postcss-selector-parser@7.1.3)':
+  '@csstools/selector-specificity@5.0.0(postcss-selector-parser@7.1.6)':
     dependencies:
-      postcss-selector-parser: 7.1.3
+      postcss-selector-parser: 7.1.6
 
   '@csstools/utilities@2.0.0(postcss@8.5.26)':
     dependencies:
@@ -7111,7 +7083,7 @@ snapshots:
       '@types/dom-mediacapture-transform': 0.1.11
       livekit-client: 2.22.3(@types/dom-mediacapture-record@1.0.22)
 
-  '@matrix-org/matrix-sdk-crypto-wasm@18.5.0': {}
+  '@matrix-org/matrix-sdk-crypto-wasm@18.9.0': {}
 
   '@mdx-js/react@3.1.1(@types/react@19.2.18)(react@19.2.8)':
     dependencies:
@@ -8695,12 +8667,12 @@ snapshots:
       '@use-gesture/core': 10.3.1
       react: 19.2.8
 
-  '@vector-im/compound-design-tokens@11.0.0(@types/react@19.2.18)(react@19.2.8)':
+  '@vector-im/compound-design-tokens@11.2.0(@types/react@19.2.18)(react@19.2.8)':
     optionalDependencies:
       '@types/react': 19.2.18
       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.5(@types/react@19.2.18))(@types/react@19.2.18)(@vector-im/compound-design-tokens@11.0.0(@types/react@19.2.18)(react@19.2.8))(react-dom@19.2.8(react@19.2.8))(react@19.2.8)':
+  '@vector-im/compound-web@10.4.0(@fontsource/inconsolata@5.3.0)(@fontsource/inter@5.3.0)(@types/react-dom@19.2.5(@types/react@19.2.18))(@types/react@19.2.18)(@vector-im/compound-design-tokens@11.2.0(@types/react@19.2.18)(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)
@@ -8712,7 +8684,7 @@ snapshots:
       '@radix-ui/react-progress': 1.1.16(@types/react-dom@19.2.5(@types/react@19.2.18))(@types/react@19.2.18)(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.5(@types/react@19.2.18))(@types/react@19.2.18)(react-dom@19.2.8(react@19.2.8))(react@19.2.8)
       '@radix-ui/react-slot': 1.3.3(@types/react@19.2.18)(react@19.2.8)
-      '@vector-im/compound-design-tokens': 11.0.0(@types/react@19.2.18)(react@19.2.8)
+      '@vector-im/compound-design-tokens': 11.2.0(@types/react@19.2.18)(react@19.2.8)
       classnames: 2.5.1
       react: 19.2.8
       vaul: 1.1.2(@types/react-dom@19.2.5(@types/react@19.2.18))(@types/react@19.2.18)(react-dom@19.2.8(react@19.2.8))(react@19.2.8)
@@ -9173,7 +9145,7 @@ snapshots:
 
   constants-browserify@1.0.0: {}
 
-  content-type@3.0.0: {}
+  content-type@3.1.1: {}
 
   convert-source-map@2.0.0: {}
 
@@ -9244,13 +9216,13 @@ snapshots:
   css-blank-pseudo@7.0.1(postcss@8.5.26):
     dependencies:
       postcss: 8.5.26
-      postcss-selector-parser: 7.1.3
+      postcss-selector-parser: 7.1.6
 
   css-has-pseudo@7.0.3(postcss@8.5.26):
     dependencies:
-      '@csstools/selector-specificity': 5.0.0(postcss-selector-parser@7.1.3)
+      '@csstools/selector-specificity': 5.0.0(postcss-selector-parser@7.1.6)
       postcss: 8.5.26
-      postcss-selector-parser: 7.1.3
+      postcss-selector-parser: 7.1.6
       postcss-value-parser: 4.2.0
 
   css-prefers-color-scheme@10.0.0(postcss@8.5.26):
@@ -10044,10 +10016,6 @@ snapshots:
 
   js-tokens@4.0.0: {}
 
-  js-yaml@4.3.0:
-    dependencies:
-      argparse: 2.0.1
-
   js-yaml@4.3.1:
     dependencies:
       argparse: 2.0.1
@@ -10259,21 +10227,21 @@ snapshots:
 
   matrix-events-sdk@0.0.1: {}
 
-  matrix-js-sdk@https://codeload.github.com/matrix-org/matrix-js-sdk/tar.gz/24929be0e741be6a5d0a7226f1c682e245263b8a:
+  matrix-js-sdk@https://codeload.github.com/matrix-org/matrix-js-sdk/tar.gz/9405287c22797e9d69acd366c47bf412fa4384c8:
     dependencies:
       '@babel/runtime': 8.0.0
-      '@matrix-org/matrix-sdk-crypto-wasm': 18.5.0
+      '@matrix-org/matrix-sdk-crypto-wasm': 18.9.0
       another-json: 0.2.0
       bs58: 6.0.0
-      content-type: 3.0.0
+      content-type: 3.1.1
       loglevel: 1.9.2
       matrix-events-sdk: 0.0.1
-      matrix-widget-api: 1.19.0
-      p-retry: 8.0.0
+      matrix-widget-api: 1.20.0
+      p-retry: 8.0.1
       sdp-transform: 3.0.0
       unhomoglyph: 1.0.6
 
-  matrix-widget-api@1.19.0:
+  matrix-widget-api@1.20.0:
     dependencies:
       '@types/events': 3.0.3
       events: 3.3.0
@@ -10296,12 +10264,6 @@ snapshots:
       bn.js: 4.12.3
       brorand: 1.1.0
 
-  mime-db@1.52.0: {}
-
-  mime-types@2.1.35:
-    dependencies:
-      mime-db: 1.52.0
-
   mimic-function@5.0.1: {}
 
   min-indent@1.0.1: {}
@@ -10410,12 +10372,6 @@ snapshots:
       has-symbols: 1.1.0
       object-keys: 1.1.1
 
-  observable-hooks@4.2.4(react-dom@19.2.8(react@19.2.8))(react@19.2.8)(rxjs@7.8.2):
-    dependencies:
-      react: 19.2.8
-      react-dom: 19.2.8(react@19.2.8)
-      rxjs: 7.8.2
-
   obug@2.1.4: {}
 
   once@1.4.0:
@@ -10600,7 +10556,7 @@ snapshots:
     dependencies:
       p-limit: 3.1.0
 
-  p-retry@8.0.0:
+  p-retry@8.0.1:
     dependencies:
       is-network-error: 1.3.2
 
@@ -10710,7 +10666,7 @@ snapshots:
   postcss-attribute-case-insensitive@7.0.1(postcss@8.5.26):
     dependencies:
       postcss: 8.5.26
-      postcss-selector-parser: 7.1.3
+      postcss-selector-parser: 7.1.6
 
   postcss-clamp@4.1.0(postcss@8.5.26):
     dependencies:
@@ -10761,12 +10717,12 @@ snapshots:
       '@csstools/css-parser-algorithms': 3.0.5(@csstools/css-tokenizer@3.0.4)
       '@csstools/css-tokenizer': 3.0.4
       postcss: 8.5.26
-      postcss-selector-parser: 7.1.3
+      postcss-selector-parser: 7.1.6
 
   postcss-dir-pseudo-class@9.0.1(postcss@8.5.26):
     dependencies:
       postcss: 8.5.26
-      postcss-selector-parser: 7.1.3
+      postcss-selector-parser: 7.1.6
 
   postcss-double-position-gradients@6.0.4(postcss@8.5.26):
     dependencies:
@@ -10778,12 +10734,12 @@ snapshots:
   postcss-focus-visible@10.0.1(postcss@8.5.26):
     dependencies:
       postcss: 8.5.26
-      postcss-selector-parser: 7.1.3
+      postcss-selector-parser: 7.1.6
 
   postcss-focus-within@9.0.1(postcss@8.5.26):
     dependencies:
       postcss: 8.5.26
-      postcss-selector-parser: 7.1.3
+      postcss-selector-parser: 7.1.6
 
   postcss-font-variant@5.0.0(postcss@8.5.26):
     dependencies:
@@ -10815,10 +10771,10 @@ snapshots:
 
   postcss-nesting@13.0.2(postcss@8.5.26):
     dependencies:
-      '@csstools/selector-resolve-nested': 3.1.0(postcss-selector-parser@7.1.3)
-      '@csstools/selector-specificity': 5.0.0(postcss-selector-parser@7.1.3)
+      '@csstools/selector-resolve-nested': 3.1.0(postcss-selector-parser@7.1.6)
+      '@csstools/selector-specificity': 5.0.0(postcss-selector-parser@7.1.6)
       postcss: 8.5.26
-      postcss-selector-parser: 7.1.3
+      postcss-selector-parser: 7.1.6
 
   postcss-opacity-percentage@3.0.0(postcss@8.5.26):
     dependencies:
@@ -10916,7 +10872,7 @@ snapshots:
   postcss-pseudo-class-any-link@10.0.1(postcss@8.5.26):
     dependencies:
       postcss: 8.5.26
-      postcss-selector-parser: 7.1.3
+      postcss-selector-parser: 7.1.6
 
   postcss-replace-overflow-wrap@4.0.0(postcss@8.5.26):
     dependencies:
@@ -10925,9 +10881,9 @@ snapshots:
   postcss-selector-not@8.0.1(postcss@8.5.26):
     dependencies:
       postcss: 8.5.26
-      postcss-selector-parser: 7.1.3
+      postcss-selector-parser: 7.1.6
 
-  postcss-selector-parser@7.1.3:
+  postcss-selector-parser@7.1.6:
     dependencies:
       cssesc: 3.0.0
       util-deprecate: 1.0.2
@@ -11668,13 +11624,6 @@ snapshots:
       - '@types/react'
       - '@types/react-dom'
 
-  vite-plugin-generate-file@0.3.1:
-    dependencies:
-      ejs: 3.1.10
-      js-yaml: 4.3.0
-      mime-types: 2.1.35
-      picocolors: 1.1.1
-
   vite-plugin-html@3.2.2(vite@8.2.2(@types/node@24.13.3)(esbuild@0.28.2)(jiti@2.7.0)(sass@1.103.1)(terser@5.46.1)(yaml@2.9.0)):
     dependencies:
       '@rollup/pluginutils': 4.2.1

scripts/check-component-externals.mjs

@@ -9,9 +9,11 @@ Please see LICENSE in the repository root for full details.
  * Checks that the component build leaves the packages a host must supply to
  * the host.
  *
- * A host application already has React, the Matrix SDK and LiveKit, and a
- * second copy of any of them is worse than dead weight: React would hold two
- * sets of hooks, and the Matrix client would run two sync loops. So the
+ * A host application already has React, the Matrix SDK and Compound,
+ * and a second copy of any of them is worse than dead weight: React would hold
+ * two sets of hooks, the Matrix client would run two sync loops, and a second
+ * Compound would style the tooltips it floats into the host's body with class
+ * names the host's stylesheet does not know. So the
  * component build lists them as external — but that list has to name every
  * subpath, since the bundler silently ignores the pattern and callback forms
  * of the option, and an import it does not cover is bundled with no warning at
@@ -33,13 +35,17 @@ import { loadConfigFromFile } from "vite";
 
 const CONFIG = "vite-component.config.ts";
 const SOURCES = ["src", "component"];
+// The development harness is a host, not part of the component: it is the
+// one that imports what a host supplies (Compound's stylesheets, say).
+const EXCLUDED = ["component/dev"];
 
 /** The packages whose duplication would break a host, rather than merely enlarge it. */
 const MUST_BE_EXTERNAL = [
   "react",
   "react-dom",
   "matrix-js-sdk",
-  "livekit-client",
+  "@vector-im/compound-web",
+  "@vector-im/compound-design-tokens",
 ];
 
 const isTestFile = (name) =>
@@ -49,6 +55,7 @@ const isTestFile = (name) =>
 async function* sourceFiles(dir) {
   for (const entry of await readdir(dir, { withFileTypes: true })) {
     const path = join(dir, entry.name);
+    if (EXCLUDED.includes(path)) continue;
     if (entry.isDirectory()) yield* sourceFiles(path);
     else if (/\.(ts|tsx)$/.test(entry.name) && !isTestFile(entry.name))
       yield path;

scripts/fetchdep.sh

@@ -0,0 +1,73 @@
+#!/usr/bin/env bash
+
+# Clones the branch of a dependency's repository that has the same name as
+# the pull request branch under test, so a change spanning both repositories
+# can be tested before either side is merged. Inspired by scripts/fetchdep.sh 
+# element-web.
+#
+# Usage: scripts/fetchdep.sh <org> <repo> [ref]
+#
+# The clone lands in ./<repo>. When the pull request comes from a fork and
+# PR_HEAD_REPO_OWNER was set, the fork's own copy of the repository is tried
+# before <org>'s. Exits 0 when a branch was cloned and 1 when there is none,
+# so the caller can keep the locked version in that case. Without a ref,
+# nothing is closed outside a pull request.
+
+set -eu
+
+org=$1
+repo=$2
+ref=${3:-}
+
+rm -rf "$repo"
+
+# If a ref was passed, try to clone it or die.
+if [ -n "$ref" ]; then
+    echo "fetchdep.sh: Using $org/$repo at $ref"
+    git clone --depth 1 "https://github.com/$org/$repo.git" "$repo"
+    git -C "$repo" fetch --depth 1 origin "$ref"
+    git -C "$repo" -c advice.detachedHead=false checkout FETCH_HEAD
+    git -C "$repo" log -1
+    exit 0
+fi
+
+# Otherwise ensure that we're on a pull request.
+head_ref=${GITHUB_HEAD_REF:-}
+if [ -z "$head_ref" ]; then
+    echo "fetchdep.sh: Not a pull request, nothing to match"
+    exit 1
+fi
+
+# Bots name their branches the same way in every repository, so a match on
+# one of theirs would be a coincidence rather than a paired change.
+case "$head_ref" in
+    renovate/* | dependabot/*)
+        echo "fetchdep.sh: Not matching bot branch $head_ref"
+        exit 1
+        ;;
+esac
+
+# Clones a branch if it exists and ends the script on success.
+clone() {
+    local try_org=$1
+    local branch=$2
+    echo "fetchdep.sh: Trying to use $try_org/$repo#$branch"
+    # Disable auth prompts: https://serverfault.com/a/665959
+    if GIT_TERMINAL_PROMPT=0 git clone "https://github.com/$try_org/$repo.git" "$repo" --branch "$branch" --depth 1; then
+        git -C "$repo" log -1
+        # Surface the match on the workflow run summary.
+        echo "::notice title=Matched $repo branch::Using $try_org/$repo#$branch at $(git -C "$repo" rev-parse HEAD)"
+        exit 0
+    fi
+}
+
+# Try cloning from the fork, then from the org.
+head_owner=${PR_HEAD_REPO_OWNER:-}
+if [ -n "$head_owner" ] && [ "$head_owner" != "${GITHUB_REPOSITORY_OWNER:-}" ]; then
+    clone "$head_owner" "$head_ref"
+fi
+clone "$org" "$head_ref"
+
+# Nothing worked. Die.
+echo "fetchdep.sh: No branch named $head_ref in $org/$repo"
+exit 1

scripts/layered.sh

@@ -0,0 +1,62 @@
+#!/usr/bin/env bash
+
+# Installs dependencies, then swaps matrix-js-sdk for a branch of the same
+# name as the pull request branch under test if one exists. This is what
+# lets CI test an Element Call branch together with a matrix-js-sdk branch
+# before either is merged. Inspired by scripts/layered.sh in element-web.
+#
+# Usage: scripts/layered.sh [pnpm install flags]
+#
+# The layering is only performed when package.json uses the develop branch of
+# matrix-js-sdk and the run is for a pull request whose branch has a matrix-js-sdk
+# counterpart. Otherwise the dependency is left as pnpm-lock.yaml pins it.
+#
+# The matrix-js-sdk checkout is nested inside this directory because some CI
+# systems do not allow moving above the primary checkout. It is git-ignored.
+#
+# Set JS_SDK_GITHUB_BASE_REF to a ref to use that exact ref of matrix-js-sdk
+# instead of looking for a matching branch.
+#
+# This script is only meant to be used in CI. For local development use
+# see docs/linking.md.
+
+set -ex
+
+# Paths below are relative to the repository root.
+cd "$(dirname "$0")/.."
+
+pnpm install --frozen-lockfile "$@"
+
+js_sdk_dep=$(jq -r '.devDependencies["matrix-js-sdk"]' < package.json)
+
+# Only layer when package.json follows the branch head rather than pinning a
+# release, so a release build keeps its pinned version.
+if [ "$js_sdk_dep" != "github:matrix-org/matrix-js-sdk#develop" ]; then
+    echo "layered.sh: Skipping matrix-js-sdk fetch and install as package.json pins $js_sdk_dep"
+    exit 0
+fi
+
+if ! scripts/fetchdep.sh matrix-org matrix-js-sdk "${JS_SDK_GITHUB_BASE_REF:-}"; then
+    echo "layered.sh: No matching matrix-js-sdk branch, keeping the locked version"
+    exit 0
+fi
+
+# matrix-js-sdk pins its pnpm version in `devEngines` only. Under corepack,
+# pnpm does not switch versions on its own and corepack, finding no
+# `packageManager` field there, would walk up to this project's and use
+# ours. Pinning it in the clone makes every pnpm invocation inside that
+# directory, including the `prepare` script run by pack, use the right one.
+js_sdk_pnpm="pnpm@$(jq -r '.devEngines.packageManager.version' < matrix-js-sdk/package.json)"
+jq --arg pm "$js_sdk_pnpm" '.packageManager = $pm' matrix-js-sdk/package.json > matrix-js-sdk/package.json.tmp
+mv matrix-js-sdk/package.json.tmp matrix-js-sdk/package.json
+export COREPACK_ENABLE_DOWNLOAD_PROMPT=0
+
+# Install matrix-js-sdk's build dependencies. `prepare` runs on pack below,
+# so it is skipped here.
+(cd matrix-js-sdk && pnpm install --frozen-lockfile --ignore-scripts)
+
+# Rather than `pnpm link`, build matrix-js-sdk into a tarball and install
+# that. This better reflects a clean install: dependencies may be hoisted
+# and shared, and there is no tsconfig.json to pick up sources from.
+(cd matrix-js-sdk && pnpm pack --out matrix-js-sdk.tgz)
+pnpm install "$(pwd)/matrix-js-sdk/matrix-js-sdk.tgz" "$@"

sdk/README.md

@@ -26,7 +26,7 @@ This file needs to be hosted. Locally (via `npx serve -l 81234 --cors`) or on a
 Now you just need to add the widget to element web via:
 
 ```
-/addwidget http://localhost:3000?widgetId=$matrix_widget_id&perParticipantE2EE=true&userId=$matrix_user_id&deviceId=$org.matrix.msc3819.matrix_device_id&baseUrl=$org.matrix.msc4039.matrix_base_url&roomId=$matrix_room_id
+/addwidget http://localhost:3000?widgetId=$matrix_widget_id&userId=$matrix_user_id&deviceId=$org.matrix.msc3819.matrix_device_id&baseUrl=$org.matrix.msc4039.matrix_base_url&roomId=$matrix_room_id
 ```
 
 ## Widgets
@@ -42,7 +42,6 @@ by the matrixRTCSdk to start the postmessage widget api (communication between t
 
 ```
 widgetId = $matrix_widget_id
-perParticipantE2EE = true
 userId = $matrix_user_id
 deviceId = $org.matrix.msc3819.matrix_device_id
 baseUrl = $org.matrix.msc4039.matrix_base_url
@@ -53,7 +52,7 @@ baseUrl = $org.matrix.msc4039.matrix_base_url
 Full template use as `<widgetUrl>`:
 
 ```
-http://localhost:3000?widgetId=$matrix_widget_id&perParticipantE2EE=true&userId=$matrix_user_id&deviceId=$org.matrix.msc3819.matrix_device_id&baseUrl=$org.matrix.msc4039.matrix_base_url&roomId=$matrix_room_id
+http://localhost:3000?widgetId=$matrix_widget_id&userId=$matrix_user_id&deviceId=$org.matrix.msc3819.matrix_device_id&baseUrl=$org.matrix.msc4039.matrix_base_url&roomId=$matrix_room_id
 ```
 
 the `$` prefixed variables will be replaced by EW on widget instantiation. (e.g. `$matrix_user_id` -> `@user:example.com` (url encoding will also be applied automatically by EW) -> `%40user%3Aexample.com`)

sdk/main.ts

@@ -231,7 +231,7 @@ export async function createMatrixRTCSdk(
       complete: () => {
         logger.info("Livekit room items subscription completed");
         for (const item of callViewModel.livekitRoomItems$.value) {
-          logger.info("unregistering room item from room", item.url);
+          logger.info("unregistering room item from room", item.transport);
           item.livekitRoom.unregisterTextStreamHandler(TEXT_LK_TOPIC);
         }
       },

src/MediaDevicesContext.ts

@@ -6,9 +6,9 @@ Please see LICENSE in the repository root for full details.
 */
 
 import { createContext, use, useMemo } from "react";
-import { useObservableEagerState } from "observable-hooks";
 
 import { type MediaDevices } from "./state/MediaDevices";
+import { useBehavior } from "./useBehavior";
 
 export const MediaDevicesContext = createContext<MediaDevices | undefined>(
   undefined,
@@ -35,7 +35,7 @@ export const useEarpieceAudioConfig = (): {
   volume: number;
 } => {
   const devices = useMediaDevices();
-  const audioOutput = useObservableEagerState(devices.audioOutput.selected$);
+  const audioOutput = useBehavior(devices.audioOutput.selected$);
   const isVirtualEarpiece = audioOutput?.virtualEarpiece ?? false;
   return {
     // We use only the right speaker (pan = 1) for the earpiece.

src/Modal.test.tsx

@@ -11,6 +11,7 @@ import { type ReactNode, useState } from "react";
 import userEvent from "@testing-library/user-event";
 
 import { Modal } from "./Modal";
+import { RootElementProvider } from "./RootElementContext";
 
 const originalMatchMedia = window.matchMedia;
 afterEach(() => {
@@ -70,3 +71,31 @@ test("the modal renders as a drawer in mobile viewports", () => {
   );
   expect(queryByRole("dialog")).toMatchSnapshot();
 });
+
+test("the modal can be closed by clicking the backdrop, in another window too", async () => {
+  // A dialog moved into another window, as a host does for a Document
+  // Picture-in-Picture window: its nodes are not `Node`s of this window
+  const frame = document.createElement("iframe");
+  document.body.appendChild(frame);
+  const otherBody = frame.contentDocument!.body;
+
+  function ModalFn(): ReactNode {
+    const [isOpen, setOpen] = useState(true);
+    return (
+      <RootElementProvider value={otherBody}>
+        <Modal title="My modal" open={isOpen} onDismiss={() => setOpen(false)}>
+          <p>This is the content.</p>
+        </Modal>
+      </RootElementProvider>
+    );
+  }
+  render(<ModalFn />);
+  const dialog = otherBody.querySelector('[role="dialog"]');
+  expect(dialog).not.toBeNull();
+  const backdrop = dialog!.previousElementSibling as HTMLElement;
+
+  const user = userEvent.setup({ document: frame.contentDocument! });
+  await user.click(backdrop);
+  expect(otherBody.querySelector('[role="dialog"]')).toBeNull();
+  frame.remove();
+});

src/Modal.tsx

@@ -160,6 +160,12 @@ export const Modal: FC<Props> = ({
         <DialogPortal container={rootElement}>
           <DialogOverlay
             className={classNames(overlayStyles.bg, overlayStyles.animate)}
+            // Radix dismisses on a pointer down outside the dialog, but only
+            // for event targets that are a `Node` of the window it was loaded
+            // in. A host can move the dialog into another window (a Document
+            // Picture-in-Picture window), whose nodes fail that check, so the
+            // backdrop closes the dialog itself.
+            onClick={() => onDismiss?.()}
           />
           <DialogContent
             asChild

src/RTCConnectionStats.tsx

@@ -16,30 +16,21 @@ import classNames from "classnames";
 import { Modal } from "./Modal";
 import styles from "./RTCConnectionStats.module.css";
 import mediaViewStyles from "../src/tile/MediaView.module.css";
+import { type UnstableLivekitTransport } from "matrix-js-sdk/lib/matrixrtc";
+
 interface Props {
   audio?: RTCInboundRtpStreamStats | RTCOutboundRtpStreamStats;
   video?: RTCInboundRtpStreamStats | RTCOutboundRtpStreamStats;
-  focusUrl?: string;
+  transport?: UnstableLivekitTransport;
   rtcBackendIdentity?: string;
 }
 
-const extractDomain = (url: string): string => {
-  try {
-    const parsedUrl = new URL(url);
-    return parsedUrl.hostname; // Returns "kdk.cpm"
-  } catch (error) {
-    console.error("Invalid URL:", error);
-    return url;
-  }
-};
-
 // This is only used in developer mode for debugging purposes, so we don't need full localization
 export const RTCConnectionStats: FC<Props> = ({
   audio,
   video,
-  focusUrl,
+  transport,
   rtcBackendIdentity,
-  ...rest
 }) => {
   const [showModal, setShowModal] = useState(false);
   const [modalContents, setModalContents] = useState<
@@ -76,10 +67,10 @@ export const RTCConnectionStats: FC<Props> = ({
       <Text as="span" size="xs" title="rtcBackendIdentity">
         rtcBackendIdentity:{rtcBackendIdentity}
       </Text>
-      {focusUrl && (
+      {transport && (
         <div>
-          <Text as="span" size="xs" title="focusURL">
-            &nbsp;{extractDomain(focusUrl)}
+          <Text as="span" size="xs" title="transport">
+            &nbsp;{JSON.stringify(transport)}
           </Text>
         </div>
       )}

src/UrlConfiguration.ts

@@ -0,0 +1,235 @@
+/*
+Copyright 2022-2024 New Vector Ltd.
+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.
+*/
+
+/**
+ * How Element Call can be told to behave, and what each intent means.
+ *
+ * Kept apart from {@link UrlParams} on purpose: everything here is constants,
+ * types and one function of them, so that a host of the component can import
+ * these — the enums it needs as values, the defaults an intent implies — without
+ * loading Element Call itself. UrlParams, which reads them from a URL, needs
+ * the router, the config and the rest of the app; this module must not.
+ * `component/api.ts` is built from it as an entry point of its own.
+ */
+
+import {
+  type RTCCallIntent,
+  type RTCNotificationType,
+} from "matrix-js-sdk/lib/matrixrtc";
+
+import { platform } from "./Platform";
+
+export enum UserIntent {
+  StartNewCall = "start_call",
+  JoinExistingCall = "join_existing",
+  StartNewCallVoice = "start_call_voice",
+  JoinExistingCallVoice = "join_existing_voice",
+  StartNewCallDM = "start_call_dm",
+  StartNewCallDMVoice = "start_call_dm_voice",
+  JoinExistingCallDM = "join_existing_dm",
+  JoinExistingCallDMVoice = "join_existing_dm_voice",
+  Unknown = "unknown",
+}
+
+export enum HeaderStyle {
+  None = "none",
+  Standard = "standard",
+  AppBar = "app_bar",
+}
+
+export enum BackgroundStyle {
+  Solid = "solid",
+  Gradient = "gradient",
+}
+
+/**
+ * The configuration for the app, which can be set via URL parameters.
+ * Those property are different to the UrlProperties, since they are all optional
+ * and configure the behavior of the app. Their value is the same if EC is used in
+ * the same context but with different accounts/users.
+ *
+ * Their defaults can be controlled by the `intent` property.
+ */
+export interface UrlConfiguration {
+  /**
+   * Whether the app should keep the user confined to the current call/room.
+   */
+  confineToRoom: boolean;
+  /**
+   * Whether the app should pause before joining the call until it sees an
+   * io.element.join widget action, allowing it to be preloaded.
+   */
+  preload: boolean;
+  /**
+   * The style of headers to show. "standard" is the default arrangement, "none"
+   * hides the header entirely, and "app_bar" produces a header with a back
+   * button like you might see in mobile apps. The callback for the back button
+   * is window.controls.onBackButtonPressed.
+   */
+  header: HeaderStyle;
+  /**
+   * Whether the controls should be shown. For screen recording no controls can be desired.
+   */
+  showControls: boolean;
+  /**
+   * Whether to hide the screen-sharing button.
+   */
+  hideScreensharing: boolean;
+
+  /**
+   * Whether the app is allowed to use fallback STUN servers for ICE in case the
+   * user's homeserver doesn't provide any.
+   */
+  allowIceFallback: boolean;
+  /**
+   * Whether the global JS controls for audio output devices should be enabled,
+   * allowing the list of output devices to be controlled by the app hosting
+   * Element Call.
+   */
+  controlledAudioDevices: boolean;
+  /**
+   * Setting this flag skips the lobby and brings you in the call directly.
+   * In the widget this can be combined with preload to pass the device settings
+   * with the join widget action.
+   */
+  skipLobby: boolean;
+  /**
+   * Setting this flag makes element call show the lobby after leaving a call.
+   * This is useful for video rooms.
+   */
+  returnToLobby: boolean;
+  /**
+   * Whether and what type of notification EC should send, when the user joins the call.
+   */
+  sendNotificationType?: RTCNotificationType;
+  /**
+   * Whether the app should automatically leave the call when there
+   * is no one left in the call.
+   * This is one part to make the call matrixRTC session behave like a telephone call.
+   */
+  autoLeaveWhenOthersLeft: boolean;
+
+  /**
+   * If the client should behave like it is awaiting an answer if a notification was sent (wait for call pick up).
+   * This is a no-op if not combined with sendNotificationType.
+   *
+   * This entails:
+   *  - show ui that it is awaiting an answer
+   *  - play a sound that indicates that it is awaiting an answer
+   *  - auto-dismiss the call widget once the notification lifetime expires on the receivers side.
+   */
+  waitForCallPickup: boolean;
+
+  /**
+   * Whether to enable echo cancellation for audio capture.
+   * Defaults to true.
+   */
+  echoCancellation?: boolean;
+  /**
+   * Whether to enable noise suppression for audio capture.
+   * Defaults to true.
+   */
+  noiseSuppression?: boolean;
+
+  callIntent?: RTCCallIntent;
+}
+
+// If you need to add a new flag to this interface, prefer a name that describes
+// a specific behavior (such as 'confineToRoom'), rather than one that describes
+// the situations that call for this behavior ('isEmbedded'). This makes it
+// clearer what each flag means, and helps us avoid coupling Element Call's
+// behavior to the needs of specific consumers.
+
+/**
+ * The configuration implied by what the user meant to do — if they pressed a
+ * Start Call button this would be `start_call`, and if they pressed Join Call,
+ * `join_existing`.
+ *
+ * These are platform-specific defaults, so that a host can start a call by
+ * saying what the user asked for rather than by setting every parameter itself,
+ * and so that what each intent means is Element Call's decision, made in one
+ * place. A host that wants something else states it alongside the intent.
+ *
+ * {@link UserIntent.Unknown} means no intent was stated, and gives the
+ * standalone app's defaults: Element Call owns the whole page, so it offers the
+ * way out of the room that a hosted call must not.
+ */
+export function configurationForIntent(intent: UserIntent): UrlConfiguration {
+  // Only constants and `platform` here, so that this depends on nothing but
+  // the intent.
+  let preset: UrlConfiguration = {
+    confineToRoom: true,
+    preload: false,
+    header: platform === "desktop" ? HeaderStyle.None : HeaderStyle.AppBar,
+    showControls: true,
+    hideScreensharing: false,
+    allowIceFallback: true,
+    controlledAudioDevices: platform === "desktop" ? false : true,
+    skipLobby: true,
+    returnToLobby: false,
+    sendNotificationType: "notification",
+    autoLeaveWhenOthersLeft: false,
+    waitForCallPickup: false,
+  };
+  switch (intent) {
+    case UserIntent.StartNewCall:
+      preset.skipLobby = false;
+      preset.callIntent = "video";
+      break;
+    case UserIntent.JoinExistingCall:
+      // On desktop this will be overridden based on which button was used to join the call
+      preset.skipLobby = false;
+      preset.callIntent = "video";
+      break;
+    case UserIntent.StartNewCallVoice:
+      preset.skipLobby = false;
+      preset.callIntent = "audio";
+      break;
+    case UserIntent.JoinExistingCallVoice:
+      // On desktop this will be overridden based on which button was used to join the call
+      preset.skipLobby = false;
+      preset.callIntent = "audio";
+      break;
+    case UserIntent.StartNewCallDMVoice:
+      preset.callIntent = "audio";
+    // Fall through
+    case UserIntent.StartNewCallDM:
+      preset.skipLobby = true;
+      preset.sendNotificationType = "ring";
+      preset.autoLeaveWhenOthersLeft = true;
+      preset.waitForCallPickup = true;
+      preset.callIntent = preset.callIntent ?? "video";
+      break;
+    case UserIntent.JoinExistingCallDMVoice:
+      preset.callIntent = "audio";
+    // Fall through
+    case UserIntent.JoinExistingCallDM:
+      // On desktop this will be overridden based on which button was used to join the call
+      preset.skipLobby = true;
+      preset.autoLeaveWhenOthersLeft = true;
+      preset.callIntent = preset.callIntent ?? "video";
+      break;
+    // Non widget usecase defaults
+    default:
+      preset = {
+        confineToRoom: false,
+        preload: false,
+        header: HeaderStyle.Standard,
+        showControls: true,
+        hideScreensharing: false,
+        allowIceFallback: false,
+        controlledAudioDevices: false,
+        skipLobby: false,
+        returnToLobby: false,
+        sendNotificationType: undefined,
+        autoLeaveWhenOthersLeft: false,
+        waitForCallPickup: false,
+      };
+  }
+  return preset;
+}

src/UrlParams.test.ts

@@ -230,7 +230,6 @@ describe("UrlParams", () => {
       showControls: true,
       hideScreensharing: false,
       allowIceFallback: false,
-      perParticipantE2EE: false,
       controlledAudioDevices: false,
       skipLobby: false,
       returnToLobby: false,
@@ -243,7 +242,6 @@ describe("UrlParams", () => {
       showControls: true,
       hideScreensharing: false,
       allowIceFallback: true,
-      perParticipantE2EE: true,
       controlledAudioDevices: platform === "desktop" ? false : true,
       skipLobby: true,
       returnToLobby: false,
@@ -256,7 +254,6 @@ describe("UrlParams", () => {
       showControls: true,
       hideScreensharing: false,
       allowIceFallback: true,
-      perParticipantE2EE: true,
       controlledAudioDevices: platform === "desktop" ? false : true,
       skipLobby: false,
       returnToLobby: false,
@@ -499,7 +496,6 @@ describe("UrlParams", () => {
         // A host owns navigation, so Element Call must not offer a way out of
         // the room
         confineToRoom: true,
-        perParticipantE2EE: true,
         // The lobby first, so that the user picks their devices rather than
         // being thrown into the call by the act of being rendered
         skipLobby: false,
@@ -512,7 +508,6 @@ describe("UrlParams", () => {
       expect(configurationForIntent(UserIntent.Unknown)).toMatchObject({
         confineToRoom: false,
         header: HeaderStyle.Standard,
-        perParticipantE2EE: false,
       });
     });
   });

src/UrlParams.ts

@@ -9,47 +9,36 @@ Please see LICENSE in the repository root for full details.
 import { createContext, use, useMemo } from "react";
 import { useLocation } from "react-router-dom";
 import { logger } from "matrix-js-sdk/lib/logger";
-import {
-  type RTCCallIntent,
-  type RTCNotificationType,
-} from "matrix-js-sdk/lib/matrixrtc";
 import { pickBy } from "lodash-es";
 
 import { Config } from "./config/Config";
 import { type EncryptionSystem } from "./e2ee/sharedKeyManagement";
 import { E2eeType } from "./e2ee/e2eeType";
-import { platform } from "./Platform";
+import {
+  BackgroundStyle,
+  configurationForIntent,
+  HeaderStyle,
+  type UrlConfiguration,
+  UserIntent,
+} from "./UrlConfiguration";
 import { redact } from "./utils/redact";
 
+// Moved to their own module, so that a host can import them without the rest
+// of this one; re-exported here as they always were
+export {
+  BackgroundStyle,
+  configurationForIntent,
+  HeaderStyle,
+  type UrlConfiguration,
+  UserIntent,
+} from "./UrlConfiguration";
+
 interface RoomIdentifier {
   roomAlias: string | null;
   roomId: string | null;
   viaServers: string[];
 }
 
-export enum UserIntent {
-  StartNewCall = "start_call",
-  JoinExistingCall = "join_existing",
-  StartNewCallVoice = "start_call_voice",
-  JoinExistingCallVoice = "join_existing_voice",
-  StartNewCallDM = "start_call_dm",
-  StartNewCallDMVoice = "start_call_dm_voice",
-  JoinExistingCallDM = "join_existing_dm",
-  JoinExistingCallDMVoice = "join_existing_dm_voice",
-  Unknown = "unknown",
-}
-
-export enum HeaderStyle {
-  None = "none",
-  Standard = "standard",
-  AppBar = "app_bar",
-}
-
-export enum BackgroundStyle {
-  Solid = "solid",
-  Gradient = "gradient",
-}
-
 /**
  * The UrlProperties are used to pass required data to the widget.
  * Those are different in different rooms, users, devices. They do not configure the behavior of the
@@ -166,109 +155,6 @@ export interface UrlProperties {
    */
   background: BackgroundStyle;
 }
-
-/**
- * The configuration for the app, which can be set via URL parameters.
- * Those property are different to the UrlProperties, since they are all optional
- * and configure the behavior of the app. Their value is the same if EC is used in
- * the same context but with different accounts/users.
- *
- * Their defaults can be controlled by the `intent` property.
- */
-export interface UrlConfiguration {
-  /**
-   * Whether the app should keep the user confined to the current call/room.
-   */
-  confineToRoom: boolean;
-  /**
-   * Whether the app should pause before joining the call until it sees an
-   * io.element.join widget action, allowing it to be preloaded.
-   */
-  preload: boolean;
-  /**
-   * The style of headers to show. "standard" is the default arrangement, "none"
-   * hides the header entirely, and "app_bar" produces a header with a back
-   * button like you might see in mobile apps. The callback for the back button
-   * is window.controls.onBackButtonPressed.
-   */
-  header: HeaderStyle;
-  /**
-   * Whether the controls should be shown. For screen recording no controls can be desired.
-   */
-  showControls: boolean;
-  /**
-   * Whether to hide the screen-sharing button.
-   */
-  hideScreensharing: boolean;
-
-  /**
-   * Whether the app is allowed to use fallback STUN servers for ICE in case the
-   * user's homeserver doesn't provide any.
-   */
-  allowIceFallback: boolean;
-
-  /**
-   * Whether the app should use per participant keys for E2EE.
-   */
-  perParticipantE2EE: boolean;
-  /**
-   * Whether the global JS controls for audio output devices should be enabled,
-   * allowing the list of output devices to be controlled by the app hosting
-   * Element Call.
-   */
-  controlledAudioDevices: boolean;
-  /**
-   * Setting this flag skips the lobby and brings you in the call directly.
-   * In the widget this can be combined with preload to pass the device settings
-   * with the join widget action.
-   */
-  skipLobby: boolean;
-  /**
-   * Setting this flag makes element call show the lobby after leaving a call.
-   * This is useful for video rooms.
-   */
-  returnToLobby: boolean;
-  /**
-   * Whether and what type of notification EC should send, when the user joins the call.
-   */
-  sendNotificationType?: RTCNotificationType;
-  /**
-   * Whether the app should automatically leave the call when there
-   * is no one left in the call.
-   * This is one part to make the call matrixRTC session behave like a telephone call.
-   */
-  autoLeaveWhenOthersLeft: boolean;
-
-  /**
-   * If the client should behave like it is awaiting an answer if a notification was sent (wait for call pick up).
-   * This is a no-op if not combined with sendNotificationType.
-   *
-   * This entails:
-   *  - show ui that it is awaiting an answer
-   *  - play a sound that indicates that it is awaiting an answer
-   *  - auto-dismiss the call widget once the notification lifetime expires on the receivers side.
-   */
-  waitForCallPickup: boolean;
-
-  /**
-   * Whether to enable echo cancellation for audio capture.
-   * Defaults to true.
-   */
-  echoCancellation?: boolean;
-  /**
-   * Whether to enable noise suppression for audio capture.
-   * Defaults to true.
-   */
-  noiseSuppression?: boolean;
-
-  callIntent?: RTCCallIntent;
-}
-
-// If you need to add a new flag to this interface, prefer a name that describes
-// a specific behavior (such as 'confineToRoom'), rather than one that describes
-// the situations that call for this behavior ('isEmbedded'). This makes it
-// clearer what each flag means, and helps us avoid coupling Element Call's
-// behavior to the needs of specific consumers.
 export interface UrlParams extends UrlProperties, UrlConfiguration {}
 
 class ParamParser {
@@ -354,97 +240,6 @@ export const getUrlParams = (
   return params;
 };
 
-/**
- * The configuration implied by what the user meant to do — if they pressed a
- * Start Call button this would be `start_call`, and if they pressed Join Call,
- * `join_existing`.
- *
- * These are platform-specific defaults, so that a host can start a call by
- * saying what the user asked for rather than by setting every parameter itself,
- * and so that what each intent means is Element Call's decision, made in one
- * place. A host that wants something else states it alongside the intent.
- *
- * {@link UserIntent.Unknown} means no intent was stated, and gives the
- * standalone app's defaults: Element Call owns the whole page, so it offers the
- * way out of the room that a hosted call must not.
- */
-export function configurationForIntent(intent: UserIntent): UrlConfiguration {
-  // Only constants and `platform` here, so that this depends on nothing but
-  // the intent.
-  let preset: UrlConfiguration = {
-    confineToRoom: true,
-    preload: false,
-    header: platform === "desktop" ? HeaderStyle.None : HeaderStyle.AppBar,
-    showControls: true,
-    hideScreensharing: false,
-    allowIceFallback: true,
-    perParticipantE2EE: true,
-    controlledAudioDevices: platform === "desktop" ? false : true,
-    skipLobby: true,
-    returnToLobby: false,
-    sendNotificationType: "notification",
-    autoLeaveWhenOthersLeft: false,
-    waitForCallPickup: false,
-  };
-  switch (intent) {
-    case UserIntent.StartNewCall:
-      preset.skipLobby = false;
-      preset.callIntent = "video";
-      break;
-    case UserIntent.JoinExistingCall:
-      // On desktop this will be overridden based on which button was used to join the call
-      preset.skipLobby = false;
-      preset.callIntent = "video";
-      break;
-    case UserIntent.StartNewCallVoice:
-      preset.skipLobby = false;
-      preset.callIntent = "audio";
-      break;
-    case UserIntent.JoinExistingCallVoice:
-      // On desktop this will be overridden based on which button was used to join the call
-      preset.skipLobby = false;
-      preset.callIntent = "audio";
-      break;
-    case UserIntent.StartNewCallDMVoice:
-      preset.callIntent = "audio";
-    // Fall through
-    case UserIntent.StartNewCallDM:
-      preset.skipLobby = true;
-      preset.sendNotificationType = "ring";
-      preset.autoLeaveWhenOthersLeft = true;
-      preset.waitForCallPickup = true;
-      preset.callIntent = preset.callIntent ?? "video";
-      break;
-    case UserIntent.JoinExistingCallDMVoice:
-      preset.callIntent = "audio";
-    // Fall through
-    case UserIntent.JoinExistingCallDM:
-      // On desktop this will be overridden based on which button was used to join the call
-      preset.skipLobby = true;
-      preset.autoLeaveWhenOthersLeft = true;
-      preset.callIntent = preset.callIntent ?? "video";
-      break;
-    // Non widget usecase defaults
-    default:
-      preset = {
-        confineToRoom: false,
-        preload: false,
-        header: HeaderStyle.Standard,
-        showControls: true,
-        hideScreensharing: false,
-        allowIceFallback: false,
-        perParticipantE2EE: false,
-        controlledAudioDevices: false,
-        skipLobby: false,
-        returnToLobby: false,
-        sendNotificationType: undefined,
-        autoLeaveWhenOthersLeft: false,
-        waitForCallPickup: false,
-      };
-  }
-  return preset;
-}
-
 /**
  * The {@link UrlProperties} for Element Call running as a component inside a
  * host application.
@@ -555,7 +350,6 @@ export const computeUrlParams = (search = "", hash = ""): UrlParams => {
     showControls: parser.getFlag("showControls"),
     hideScreensharing: parser.getFlag("hideScreensharing"),
     allowIceFallback: parser.getFlag("allowIceFallback"),
-    perParticipantE2EE: parser.getFlag("perParticipantE2EE"),
     controlledAudioDevices: parser.getFlag("controlledAudioDevices"),
     skipLobby: isWidget ? parser.getFlag("skipLobby") : false,
     // In SPA mode the user should always exit to the home screen when hanging
@@ -578,7 +372,7 @@ export const computeUrlParams = (search = "", hash = ""): UrlParams => {
     "intent:",
     intent,
     "\nproperties:",
-    redact(properties, "password"),
+    redact(properties, "password", "posthogUserId"),
     "configuration:",
     configuration,
   );
@@ -706,20 +500,14 @@ export function generateUrlSearchParams(
   const params = new URLSearchParams();
   // The password shouldn't need URL encoding here (we generate URL-safe ones) but encode
   // it in case it came from another client that generated a non url-safe one
-  switch (encryptionSystem?.kind) {
-    case E2eeType.SHARED_KEY: {
-      const encodedPassword = encodeURIComponent(encryptionSystem.secret);
-      if (encodedPassword !== encryptionSystem.secret) {
-        logger.info(
-          "Encoded call password used non URL-safe chars: buggy client?",
-        );
-      }
-      params.set("password", encodedPassword);
-      break;
+  if (encryptionSystem?.kind === E2eeType.SHARED_KEY) {
+    const encodedPassword = encodeURIComponent(encryptionSystem.secret);
+    if (encodedPassword !== encryptionSystem.secret) {
+      logger.info(
+        "Encoded call password used non URL-safe chars: buggy client?",
+      );
     }
-    case E2eeType.PER_PARTICIPANT:
-      params.set("perParticipantE2EE", "true");
-      break;
+    params.set("password", encodedPassword);
   }
   params.set("roomId", roomId);
   viaServers?.forEach((s) => params.set("viaServers", s));

src/__snapshots__/AppBar.test.tsx.snap

@@ -15,7 +15,7 @@ exports[`AppBar > renders 1`] = `
         tabindex="0"
       >
         <div
-          class="_indicator-icon_147l5_17"
+          class="_indicator-icon_j097f_17"
           style="--cpd-icon-button-size: 100%;"
         >
           <svg
@@ -58,7 +58,7 @@ exports[`AppBar > renders with title and subtitle 1`] = `
         tabindex="0"
       >
         <div
-          class="_indicator-icon_147l5_17"
+          class="_indicator-icon_j097f_17"
           style="--cpd-icon-button-size: 100%;"
         >
           <svg

src/base.css

@@ -5,19 +5,24 @@ SPDX-License-Identifier: AGPL-3.0-only OR LicenseRef-Element-Commercial
 Please see LICENSE in the repository root for full details.
 */
 
-/* The styles Element Call needs wherever it is shown: the design tokens, fonts
-and element defaults its own stylesheets build on top of.
+/* The styles Element Call needs wherever it is shown: the element defaults and
+custom properties its own stylesheets build on top of.
 
 Split out from index.css so that Element Call as a component can have these
 without also being given the standalone page's layout, which would style the
-host's own document. What remains here still speaks of the
-document — normalize.css and the typography below use bare element selectors,
-and the custom properties are declared on `:root` — which is right for the
-page, and is why the component build rewrites it: there every selector is
-confined to Element Call's root element (see component/build/scopeStylesToRoot.ts),
-with `html`, `body` and `:root` becoming that element. Nothing needs to be
-written differently here for that to work, but nothing here may rely on
-reaching the host's document either.
+host's own document. Compound's stylesheets — the design tokens, the component
+styles and the fonts they use — are not here either: as a component, Element
+Call shares the host's copy of Compound (it is a peer dependency, so that what
+Compound floats into the host's body, tooltips and menus, is styled by the
+host's stylesheet), and index.css loads it for the page.
+
+What remains here still speaks of the document — normalize.css and the
+typography below use bare element selectors, and the custom properties are
+declared on `:root` — which is right for the page, and is why the component
+build rewrites it: there every selector is confined to Element Call's root
+element (see component/build/scopeStylesToRoot.ts), with `html`, `body` and
+`:root` becoming that element. Nothing needs to be written differently here for
+that to work, but nothing here may rely on reaching the host's document either.
 
 Nothing here should depend on where it lands relative to Element Call's
 component stylesheets: the bundler decides that, and it decides differently for
@@ -25,16 +30,7 @@ the app and for the component build. */
 
 @layer normalize, compound-legacy, compound;
 
-@import url("@fontsource/inter/400.css");
-@import url("@fontsource/inter/500.css");
-@import url("@fontsource/inter/600.css");
-@import url("@fontsource/inter/700.css");
-@import url("@fontsource/inconsolata/400.css");
-@import url("@fontsource/inconsolata/700.css");
-
 @import url("normalize.css/normalize.css") layer(normalize);
-@import url("@vector-im/compound-design-tokens/assets/web/css/compound-design-tokens.css") layer(compound);
-@import url("@vector-im/compound-web/dist/style.css") layer(compound.components);
 
 :root {
   --font-scale: 1;

src/button/ReactionToggleButton.module.css

@@ -83,7 +83,7 @@ div.reactionPopupMenuRoot.reactionPopupMenuModal > div > div {
   flex: 0 0 auto;
 }
 
-.reactionButton {
+.reactionPopupMenu .reactionsMenu .reactionButton {
   padding: var(--reaction-button-padding);
   border-radius: var(--cpd-radius-pill-effect);
   font-size: var(--reaction-button-fontsize);

src/button/__snapshots__/ReactionToggleButton.test.tsx.snap

@@ -9,7 +9,7 @@ exports[`Can close reaction dialog 1`] = `
     aria-disabled="false"
     aria-expanded="true"
     aria-haspopup="true"
-    aria-labelledby="_r_bb_"
+    aria-labelledby="_r_bh_"
     class="_button_1nw83_8 _has-icon_1nw83_60 _icon-only_1nw83_53"
     data-kind="primary"
     data-size="lg"

src/components/CallFooter.module.css

@@ -43,7 +43,10 @@ Please see LICENSE in the repository root for full details.
   inset-inline: 0;
 }
 
-.footer.overlay:has(:focus-visible) {
+/* Keep the footer while it is in use: focus inside it, or a menu opened from
+   it. The menu is portalled out, so the trigger's aria-expanded tracks it. */
+.footer.overlay:has(:focus-visible),
+.footer.overlay:has([aria-expanded="true"]) {
   opacity: 1;
   pointer-events: initial;
 }

src/components/CallFooter.stories.tsx

@@ -13,6 +13,7 @@ import { Link } from "@vector-im/compound-web";
 import type { Meta, StoryObj } from "@storybook/react-vite";
 import { CallFooter, type FooterSnapshot } from "./CallFooter";
 import inCallViewStyles from "../room/InCallView.module.css";
+import styles from "./CallFooter.module.css";
 import { useStaticViewModel } from "../state/ViewModel";
 import { ReactionsSenderContext } from "../reactions/useReactionsSender";
 import { type ReactionOption } from "../reactions";
@@ -137,10 +138,13 @@ export const Default: Story = {
     debugTileLayout: false,
     tileStoreGeneration: undefined,
     audioOptions: [],
+    audioOutputOptions: [],
     videoOptions: [],
     selectedAudio: undefined,
+    selectedAudioOutput: undefined,
     selectedVideo: undefined,
     selectAudioButtonOption: undefined,
+    selectAudioOutputOption: undefined,
     selectVideoButtonOption: undefined,
   },
   parameters: {
@@ -158,15 +162,46 @@ export const WithAudioAndVideoOptions: Story = {
       { label: { type: "name", name: "Microphone 1" }, id: "1" },
       { label: { type: "name", name: "Microphone 2" }, id: "2" },
     ],
+    audioOutputOptions: [
+      { label: { type: "default", name: "Built-in Output" }, id: "default" },
+      { label: { type: "name", name: "Headset" }, id: "2" },
+    ],
     videoOptions: [
       { label: { type: "name", name: "Camera 1" }, id: "1" },
       { label: { type: "name", name: "Camera 2" }, id: "2" },
     ],
     selectedAudio: "2",
+    selectedAudioOutput: "default",
     selectedVideo: "1",
   },
 };
 
+export const StaysWhileAMenuIsOpen: Story = {
+  ...Default,
+  args: {
+    ...WithAudioAndVideoOptions.args,
+    // In a short window the footer overlays the call and hides itself.
+    asOverlay: true,
+    showFooter: true,
+  },
+  play: async ({ canvasElement }): Promise<void> => {
+    const footer = canvasElement.querySelector<HTMLElement>(
+      '[data-testid="footer-container"]',
+    )!;
+    await userEvent.click(
+      within(canvasElement).getByRole("button", { name: "Microphone" }),
+    );
+    await expect(document.body.querySelector('[role="menu"]')).not.toBeNull();
+
+    // The call hides the footer with this class.
+    footer.classList.add(styles.hidden);
+
+    // Read after the 0.15s fade, not mid-transition.
+    await new Promise((settled) => setTimeout(settled, 400));
+    await expect(getComputedStyle(footer).opacity).toBe("1");
+  },
+};
+
 export const AudioBusy: Story = {
   ...Default,
   args: {

src/components/CallFooter.tsx

@@ -99,11 +99,15 @@ export interface FooterState {
 
   /** Providing no options `[]` or `undefined` will imply that we dont have a audio fast switcher */
   audioOptions: MenuOptions[];
+  /** Output (speaker) devices. */
+  audioOutputOptions: MenuOptions[];
   /** Providing no options `[]` or `undefined` will imply that we dont have a audio fast switcher */
   videoOptions: MenuOptions[];
   selectedAudio: string | undefined;
+  selectedAudioOutput: string | undefined;
   selectedVideo: string | undefined;
   selectAudioButtonOption: ((deviceId: string) => void) | undefined;
+  selectAudioOutputOption: ((deviceId: string) => void) | undefined;
   selectVideoButtonOption: ((option: string) => void) | undefined;
 }
 
@@ -143,6 +147,9 @@ export const CallFooter: FC<FooterProps> = ({
   const audioOptions = useBehavior(vm.audioOptions$);
   const selectedAudio = useBehavior(vm.selectedAudio$);
   const selectAudioButtonOption = useBehavior(vm.selectAudioButtonOption$);
+  const audioOutputOptions = useBehavior(vm.audioOutputOptions$);
+  const selectedAudioOutput = useBehavior(vm.selectedAudioOutput$);
+  const selectAudioOutputOption = useBehavior(vm.selectAudioOutputOption$);
   const selectVideoButtonOption = useBehavior(vm.selectVideoButtonOption$);
   const toggleBlur = useBehavior(vm.toggleBlur$);
   const videoBlurEnabled = useBehavior(vm.videoBlurEnabled$);
@@ -168,7 +175,6 @@ export const CallFooter: FC<FooterProps> = ({
   if ((audioOptions?.length ?? 0) > 0) {
     buttons.push(
       <MediaMuteAndSwitchButton
-        title={"Mic Source"}
         key="audio"
         iconsAndLabels="audio"
         enabled={audioEnabled ?? false}
@@ -178,6 +184,9 @@ export const CallFooter: FC<FooterProps> = ({
         options={audioOptions}
         selectedOption={selectedAudio}
         onSelect={selectAudioButtonOption}
+        outputOptions={audioOutputOptions}
+        selectedOutputOption={selectedAudioOutput}
+        onSelectOutput={selectAudioOutputOption}
       />,
     );
   } else {
@@ -197,7 +206,6 @@ export const CallFooter: FC<FooterProps> = ({
   if ((videoOptions?.length ?? 0) > 0) {
     buttons.push(
       <MediaMuteAndSwitchButton
-        title={"Camera Source"}
         key="video"
         iconsAndLabels="video"
         enabled={videoEnabled ?? false}

src/components/CallFooterViewModel.test.ts

@@ -30,6 +30,11 @@ vi.mock("@livekit/track-processors", () => ({
   supportsBackgroundProcessors: (): boolean => false,
 }));
 
+const outputSelectionMock = vi.hoisted(() => vi.fn(() => true));
+vi.mock("livekit-client", () => ({
+  supportsAudioOutputSelection: (): boolean => outputSelectionMock(),
+}));
+
 /**
  * Returns the minimum set of CallViewModel fields required by
  * createCallFooterViewModel, with all other properties stubbed to
@@ -96,6 +101,65 @@ const twoMicsAndOneCamMediaDevices = mockMediaDevices({
 });
 
 describe("createCallFooterViewModel", () => {
+  describe("selectAudioOutputOption", () => {
+    function buildFooterVm(): ReturnType<typeof createCallFooterViewModel> {
+      platformMock.mockReturnValue("desktop");
+      return createCallFooterViewModel(
+        testScope(),
+        buildMinimalCallViewModel(gridLayout),
+        mockMuteStates(),
+        twoMicsAndOneCamMediaDevices,
+        /* reactionIdentifier */ undefined,
+        { showControls: true, header: HeaderStyle.Standard },
+      );
+    }
+
+    it("is withheld where the platform cannot route audio to a chosen device", () => {
+      outputSelectionMock.mockReturnValue(false);
+      expect(buildFooterVm().selectAudioOutputOption$.value).toBeUndefined();
+    });
+
+    it("is offered where the platform can route audio to a chosen device", () => {
+      outputSelectionMock.mockReturnValue(true);
+      expect(buildFooterVm().selectAudioOutputOption$.value).toBeDefined();
+    });
+  });
+
+  describe("audioOutputOptions", () => {
+    it("is an empty list, not absent, where the platform enumerates no outputs", () => {
+      platformMock.mockReturnValue("desktop");
+      outputSelectionMock.mockReturnValue(true);
+
+      const vm = createCallFooterViewModel(
+        testScope(),
+        buildMinimalCallViewModel(gridLayout),
+        mockMuteStates(),
+        mockMediaDevices({
+          audioInput: {
+            available$: constant(
+              new Map<string, DeviceLabel>([
+                ["mic1", { type: "name", name: "Microphone 1" }],
+              ]),
+            ),
+            selected$: constant(undefined),
+            select: vi.fn(),
+          },
+          // As Safari: no outputs listed.
+          audioOutput: {
+            available$: constant(new Map<string, DeviceLabel>()),
+            selected$: constant(undefined),
+            select: vi.fn(),
+          },
+        }),
+        /* reactionIdentifier */ undefined,
+        { showControls: true, header: HeaderStyle.Standard },
+      );
+
+      // Empty, not undefined: undefined would hide the section.
+      expect(vm.audioOutputOptions$.value).toEqual([]);
+    });
+  });
+
   describe("audioOptions and videoOptions", () => {
     function checkEmptyFor(platform: string, layout: Layout): void {
       platformMock.mockReturnValue(platform);

src/components/CallFooterViewModel.tsx

@@ -5,8 +5,9 @@ SPDX-License-Identifier: AGPL-3.0-only OR LicenseRef-Element-Commercial
 Please see LICENSE in the repository root for full details.
 */
 
-import { combineLatest, map, switchMap } from "rxjs";
+import { combineLatest, map, type Observable, switchMap } from "rxjs";
 import { supportsBackgroundProcessors } from "@livekit/track-processors";
+import { supportsAudioOutputSelection } from "livekit-client";
 
 import { type CallViewModel } from "../state/CallViewModel/CallViewModel";
 import { type MenuOptions } from "./MediaMuteAndSwitchButton";
@@ -67,49 +68,50 @@ function buildDeviceBehaviors(
   | "audioOptions$"
   | "selectedAudio$"
   | "selectAudioButtonOption$"
+  | "audioOutputOptions$"
+  | "selectedAudioOutput$"
+  | "selectAudioOutputOption$"
   | "videoOptions$"
   | "selectedVideo$"
   | "selectVideoButtonOption$"
   | "toggleBlur$"
   | "videoBlurEnabled$"
 > {
-  return {
-    audioOptions$: scope.behavior(
-      disableSwitcher$.pipe(
-        switchMap((disable) =>
-          disable
-            ? constant([] as MenuOptions[])
-            : mediaDevices.audioInput.available$.pipe(
-                map((available) =>
-                  [...available.entries()].map(([id, label]) => ({
-                    id,
-                    label,
-                  })),
-                ),
+  const options$ = (
+    available$: Behavior<Map<string, MenuOptions["label"]>>,
+  ): Observable<MenuOptions[]> =>
+    disableSwitcher$.pipe(
+      switchMap((disable) =>
+        disable
+          ? constant([] as MenuOptions[])
+          : available$.pipe(
+              map((available) =>
+                [...available.entries()].map(([id, label]) => ({ id, label })),
               ),
-        ),
+            ),
       ),
-    ),
+    );
+
+  return {
+    audioOptions$: scope.behavior(options$(mediaDevices.audioInput.available$)),
     selectedAudio$: scope.behavior(
       mediaDevices.audioInput.selected$.pipe(map((s) => s?.id)),
     ),
     selectAudioButtonOption$: constant(mediaDevices.audioInput.select),
-    videoOptions$: scope.behavior(
-      disableSwitcher$.pipe(
-        switchMap((disable) =>
-          disable
-            ? constant([] as MenuOptions[])
-            : mediaDevices.videoInput.available$.pipe(
-                map((available) =>
-                  [...available.entries()].map(([id, label]) => ({
-                    id,
-                    label,
-                  })),
-                ),
-              ),
-        ),
-      ),
+    audioOutputOptions$: scope.behavior(
+      options$(mediaDevices.audioOutput.available$),
     ),
+    selectedAudioOutput$: scope.behavior(
+      mediaDevices.audioOutput.selected$.pipe(map((s) => s?.id)),
+    ),
+    // Withheld where the platform can't route audio to a chosen device, which
+    // disables the speaker section.
+    selectAudioOutputOption$: constant(
+      supportsAudioOutputSelection()
+        ? mediaDevices.audioOutput.select
+        : undefined,
+    ),
+    videoOptions$: scope.behavior(options$(mediaDevices.videoInput.available$)),
     selectedVideo$: scope.behavior(
       mediaDevices.videoInput.selected$.pipe(map((s) => s?.id)),
     ),
@@ -263,10 +265,13 @@ export function createLobbyFooterViewModel(
       reactionData: undefined,
       tileStoreGeneration: undefined,
       audioOptions: undefined,
+      audioOutputOptions: undefined,
       videoOptions: undefined,
       selectedAudio: undefined,
+      selectedAudioOutput: undefined,
       selectedVideo: undefined,
       selectAudioButtonOption: undefined,
+      selectAudioOutputOption: undefined,
       selectVideoButtonOption: undefined,
     }),
     ...buildMuteBehaviors(scope, muteStates),

src/components/MediaMuteAndSwitchButton.module.css

@@ -35,3 +35,60 @@ Please see LICENSE in the repository root for full details.
     transform: rotate(360deg);
   }
 }
+
+.menu {
+  display: flex;
+  flex-direction: column;
+}
+
+/* Only the device lists scroll, bounded by the measured call area: the menu is
+   portalled out of the root, so CSS can't size it against the call. */
+.deviceList {
+  overflow-y: auto;
+  min-block-size: 0;
+  max-block-size: var(--device-list-max-height);
+  /* Keeps a row reached by keyboard clear of the sticky heading and meter. */
+  scroll-padding-block: var(--device-list-scroll-padding-start, 0)
+    var(--device-list-scroll-padding-end, 0);
+}
+
+/* Compound's heading rule heads each section; the design adds space below it. */
+.menu h3 {
+  margin-block-end: var(--cpd-space-5x);
+}
+
+/* And more above a heading that follows another section. */
+.deviceList [role="group"] + [role="group"] h3 {
+  margin-block-start: var(--cpd-space-7x);
+}
+
+/* Sticky within its own section. Opaque and inset a border width so it doesn't
+   paint over the menu's outline. */
+.sectionHeading {
+  position: sticky;
+  inset-block-start: 0;
+  background: var(--cpd-color-bg-canvas-default);
+  margin-inline: var(--cpd-border-width-1);
+  margin-block-start: var(--cpd-border-width-1);
+}
+
+/* Sticky at the foot of the microphone section; opaque and inset as above. */
+.stickyMeter {
+  position: sticky;
+  inset-block-end: 0;
+  background: var(--cpd-color-bg-canvas-default);
+  margin-inline: var(--cpd-border-width-1);
+  margin-block-end: var(--cpd-border-width-1);
+}
+
+/* Radix focuses whatever the pointer is over, so the browser's ring would
+   follow the mouse. Replaced by one shown only for keyboard focus. */
+.menu [role^="menuitem"]:focus,
+.menu [role^="menuitem"]:focus-visible {
+  outline: none;
+}
+
+.menu[data-focus-source="keyboard"] [role^="menuitem"]:focus {
+  outline: var(--cpd-border-width-2) solid var(--cpd-color-border-focused);
+  outline-offset: calc(-1 * var(--cpd-border-width-2));
+}

src/components/MediaMuteAndSwitchButton.stories.tsx

@@ -5,12 +5,15 @@ SPDX-License-Identifier: AGPL-3.0-only OR LicenseRef-Element-Commercial
 Please see LICENSE in the repository root for full details.
 */
 
-import { fn, userEvent, within, expect } from "storybook/test";
-import { type JSX } from "react";
+import { fn, userEvent, waitFor, within, expect } from "storybook/test";
+import { useEffect, useState, type FC, type JSX, type ReactNode } from "react";
 
 import type { Meta, StoryObj } from "@storybook/react-vite";
 import { MediaMuteAndSwitchButton } from "./MediaMuteAndSwitchButton";
+import styles from "./MediaMuteAndSwitchButton.module.css";
+import meterStyles from "./MicrophoneLevelMeter.module.css";
 import { MediaDevicesContext } from "../MediaDevicesContext";
+import { RootElementProvider } from "../RootElementContext";
 import { MediaDevices } from "../state/MediaDevices";
 import { globalScope } from "../state/ObservableScope";
 
@@ -18,12 +21,74 @@ const mediaDevices = new MediaDevices(globalScope, {
   controlledAudioDevices: false,
 });
 
+/** Supplies a microphone, a wavering tone: a story's invented device ids match no hardware. */
+const WithAMicrophone: FC<{ children: ReactNode }> = ({ children }) => {
+  useEffect(() => {
+    const context = new AudioContext();
+    const microphone = context.createMediaStreamDestination();
+    const tone = context.createOscillator();
+    const loudness = context.createGain();
+    // Wavers between a third and two thirds of full scale, so it reads as live.
+    const swing = context.createOscillator();
+    const depth = context.createGain();
+    loudness.gain.value = 0.25;
+    depth.gain.value = 0.2;
+    swing.frequency.value = 0.6;
+    tone.frequency.value = 220;
+    swing.connect(depth).connect(loudness.gain);
+    tone.connect(loudness).connect(microphone);
+    tone.start();
+    swing.start();
+
+    const devices = navigator.mediaDevices;
+    const openedForReal = devices.getUserMedia.bind(devices);
+    const opened = Promise.resolve(microphone.stream);
+    // A fresh clone each time, so a caller stopping its tracks doesn't end the next.
+    devices.getUserMedia = async (): Promise<MediaStream> =>
+      (await opened).clone();
+
+    return (): void => {
+      devices.getUserMedia = openedForReal;
+      tone.stop();
+      swing.stop();
+      void context.close();
+    };
+  }, []);
+
+  return <>{children}</>;
+};
+
+/** Supplies a call-sized root. Without one the list is bounded by the whole Storybook frame. */
+const WithACallArea: FC<{ children: ReactNode }> = ({ children }) => {
+  const [callArea, setCallArea] = useState<HTMLElement | null>(null);
+  return (
+    <div
+      ref={setCallArea}
+      style={{
+        // A call's size: anything smaller makes a short device list scroll.
+        blockSize: 720,
+        display: "flex",
+        alignItems: "flex-end",
+        justifyContent: "center",
+      }}
+    >
+      {callArea !== null && (
+        <RootElementProvider value={callArea}>{children}</RootElementProvider>
+      )}
+    </div>
+  );
+};
+
 const meta = {
   component: MediaMuteAndSwitchButton,
   decorators: [
     (Story): JSX.Element => (
       <MediaDevicesContext value={mediaDevices}>
-        <Story />
+        <WithACallArea>
+          <WithAMicrophone>
+            <Story />
+          </WithAMicrophone>
+        </WithACallArea>
       </MediaDevicesContext>
     ),
   ],
@@ -34,7 +99,6 @@ type Story = StoryObj<typeof meta>;
 
 export const Default: Story = {
   args: {
-    title: "SomeMenu",
     iconsAndLabels: "audio",
     enabled: true,
     options: [
@@ -42,6 +106,13 @@ export const Default: Story = {
       { label: { type: "name", name: "Option 2" }, id: "2" },
     ],
     selectedOption: "1",
+    // The footer always passes an output list to the audio menu.
+    outputOptions: [
+      { label: { type: "default", name: "Built-in Output" }, id: "default" },
+      { label: { type: "name", name: "Headset" }, id: "spk2" },
+    ],
+    selectedOutputOption: "default",
+    onSelectOutput: fn(),
     onMuteClick: fn(),
     onSelect: fn(),
   },
@@ -50,7 +121,6 @@ export const Default: Story = {
 export const AudioMute: Story = {
   args: {
     ...Default.args,
-    title: "Microphone",
     iconsAndLabels: "audio",
     enabled: false,
     options: [
@@ -73,21 +143,19 @@ export const AudioMute: Story = {
 
 export const AudioUnmute: Story = {
   args: {
-    title: "Microphone",
+    ...Default.args,
     iconsAndLabels: "audio",
     enabled: true,
     options: [
       { label: { type: "name", name: "Microphone 1" }, id: "1" },
       { label: { type: "name", name: "Microphone 2" }, id: "2" },
     ],
-
     selectedOption: "2",
   },
 };
 
 export const VideoMute: Story = {
   args: {
-    title: "Camera",
     iconsAndLabels: "video",
     enabled: false,
     options: [
@@ -101,7 +169,6 @@ export const VideoMute: Story = {
 
 export const VideoUnmute: Story = {
   args: {
-    title: "Camera",
     iconsAndLabels: "video",
     enabled: true,
     options: [
@@ -113,3 +180,479 @@ export const VideoUnmute: Story = {
     selectedOption: "2",
   },
 };
+
+export const SpeakerAndMicrophoneSections: Story = {
+  args: {
+    ...Default.args,
+    iconsAndLabels: "audio",
+    enabled: true,
+    options: [
+      { label: { type: "name", name: "Microphone 1" }, id: "mic1" },
+      { label: { type: "name", name: "Microphone 2" }, id: "mic2" },
+    ],
+    selectedOption: "mic1",
+    outputOptions: [
+      { label: { type: "default", name: "Built-in Output" }, id: "default" },
+      { label: { type: "name", name: "Headset" }, id: "spk2" },
+    ],
+    selectedOutputOption: "default",
+    onSelectOutput: fn(),
+  },
+  play: async ({ args, canvasElement }) => {
+    const canvas = within(canvasElement);
+    await userEvent.click(canvas.getByRole("button", { name: "Microphone" }));
+
+    const headset = await within(document.body).findByRole("menuitemradio", {
+      name: "Headset",
+    });
+    await userEvent.click(headset);
+    await expect(args.onSelectOutput).toHaveBeenCalledWith("spk2");
+
+    // A few devices fit, so the list doesn't scroll.
+    const list = document.body.querySelector<HTMLElement>(
+      `.${styles.deviceList}`,
+    )!;
+    await expect(list.scrollHeight).toBe(list.clientHeight);
+
+    // Each section is headed by its own edge-to-edge rule, with no separator.
+    const menu = document.body.querySelector("[role='menu']")!;
+    await expect(
+      document.body.querySelectorAll("[role='separator']"),
+    ).toHaveLength(0);
+    const headings = document.body.querySelectorAll<HTMLElement>(
+      `.${styles.sectionHeading}`,
+    );
+    await expect(headings).toHaveLength(2);
+    const frame = menu.getBoundingClientRect();
+    for (const heading of headings) {
+      const rule = heading.querySelector("h3")!;
+      await expect(
+        Number.parseFloat(getComputedStyle(rule).borderBottomWidth),
+      ).toBeGreaterThan(0);
+      // Edge to edge, within the frame.
+      const box = rule.getBoundingClientRect();
+      await expect(box.left - frame.left).toBeLessThanOrEqual(2);
+      await expect(frame.right - box.right).toBeLessThanOrEqual(2);
+    }
+
+    // The first device sits further below the rule than from the menu's edge.
+    // Asserted as a relationship, not pixels: the asymmetry is the design.
+    const control = document.body.querySelector("input[type='radio']")!;
+    const ruleBottom = headings[0]
+      .querySelector("h3")!
+      .getBoundingClientRect().bottom;
+    const box = control.getBoundingClientRect();
+    await expect(box.top - ruleBottom).toBeGreaterThan(box.left - frame.left);
+
+    // And a section stands further from the one above than from its own first
+    // device.
+    const groups = document.body.querySelectorAll("[role='group']");
+    const speakers = groups[0].querySelectorAll("input[type='radio']");
+    const lastSpeaker = speakers[speakers.length - 1].getBoundingClientRect();
+    const nextHeading = groups[1]!.querySelector("h3")!.getBoundingClientRect();
+    await expect(nextHeading.top - lastSpeaker.bottom).toBeGreaterThan(
+      box.top - ruleBottom,
+    );
+  },
+};
+
+export const OutputCannotBeChosen: Story = {
+  args: {
+    ...Default.args,
+    iconsAndLabels: "audio",
+    enabled: true,
+    options: [
+      { label: { type: "name", name: "Microphone 1" }, id: "mic1" },
+      { label: { type: "name", name: "Microphone 2" }, id: "mic2" },
+    ],
+    selectedOption: "mic1",
+    outputOptions: [
+      { label: { type: "name", name: "Speakers" }, id: "spk1" },
+      { label: { type: "name", name: "Headset" }, id: "spk2" },
+    ],
+    selectedOutputOption: "spk1",
+    // No callback: the speakers are listed, but none can be picked.
+    onSelectOutput: undefined,
+  },
+  play: async ({ canvasElement }) => {
+    const canvas = within(canvasElement);
+    await userEvent.click(canvas.getByRole("button", { name: "Microphone" }));
+
+    const speakers = await within(document.body).findByRole("menuitemradio", {
+      name: "Speakers",
+    });
+    await expect(speakers).toHaveAttribute("aria-disabled", "true");
+  },
+};
+
+export const OnlyOneDevice: Story = {
+  args: {
+    ...Default.args,
+    iconsAndLabels: "audio",
+    enabled: true,
+    options: [{ label: { type: "name", name: "Microphone 1" }, id: "mic1" }],
+    selectedOption: "mic1",
+    outputOptions: [{ label: { type: "name", name: "Speakers" }, id: "spk1" }],
+    selectedOutputOption: "spk1",
+    onSelectOutput: fn(),
+  },
+  play: async ({ canvasElement }) => {
+    const canvas = within(canvasElement);
+    await userEvent.click(canvas.getByRole("button", { name: "Microphone" }));
+
+    // Shown, disabled, rather than hidden.
+    const only = await within(document.body).findByRole("menuitemradio", {
+      name: "Microphone 1",
+    });
+    await expect(only).toHaveAttribute("aria-disabled", "true");
+  },
+};
+
+/** A requested device hasn't arrived: nothing in either section can be picked. */
+export const SelectionSettling: Story = {
+  args: {
+    ...Default.args,
+    iconsAndLabels: "audio",
+    enabled: true,
+    options: [
+      { label: { type: "name", name: "Microphone 1" }, id: "mic1" },
+      { label: { type: "name", name: "Microphone 2" }, id: "mic2" },
+    ],
+    selectedOption: "mic1",
+    outputOptions: [
+      { label: { type: "name", name: "Speakers" }, id: "spk1" },
+      { label: { type: "name", name: "Headset" }, id: "spk2" },
+    ],
+    selectedOutputOption: "spk1",
+    onSelectOutput: fn(),
+  },
+  play: async ({ canvasElement }) => {
+    const canvas = within(canvasElement);
+    await userEvent.click(canvas.getByRole("button", { name: "Microphone" }));
+    const menu = within(document.body);
+
+    // selectedOption never changes, so the request stays in flight.
+    await userEvent.click(
+      await menu.findByRole("menuitemradio", { name: "Microphone 2" }),
+    );
+
+    await expect(await menu.findByLabelText("Activating…")).toBeVisible();
+    for (const item of menu.getAllByRole("menuitemradio"))
+      await expect(item).toHaveAttribute("aria-disabled", "true");
+  },
+};
+
+/**
+ * The ring shows for keyboard focus only. Asserted on the painted outline:
+ * asserting data-focus-source would still pass with the CSS rule deleted.
+ */
+export const KeyboardFocusRing: Story = {
+  args: {
+    ...Default.args,
+    iconsAndLabels: "audio",
+    enabled: true,
+    options: [
+      { label: { type: "name", name: "Microphone 1" }, id: "mic1" },
+      { label: { type: "name", name: "Microphone 2" }, id: "mic2" },
+    ],
+    selectedOption: "mic1",
+  },
+  play: async ({ canvasElement }) => {
+    const canvas = within(canvasElement);
+    await userEvent.click(canvas.getByRole("button", { name: "Microphone" }));
+    const menu = within(document.body);
+    const first = await menu.findByRole("menuitemradio", {
+      name: "Microphone 1",
+    });
+
+    // Opened by pointer: no ring, even though Radix has moved focus.
+    await expect(outlineWidth(first)).toBe(0);
+
+    await userEvent.keyboard("{ArrowDown}");
+    const focused = document.activeElement as HTMLElement;
+    await expect(focused).toHaveRole("menuitemradio");
+    await expect(outlineWidth(focused)).toBeGreaterThan(0);
+
+    // And the pointer takes it away again.
+    await userEvent.hover(first);
+    await expect(outlineWidth(document.activeElement as HTMLElement)).toBe(0);
+  },
+};
+
+/** The list scrolls; the meter stays at the foot of the microphone section. */
+export const ManyDevices: Story = {
+  args: {
+    ...Default.args,
+    iconsAndLabels: "audio",
+    enabled: true,
+    options: Array.from({ length: 20 }, (_, i) => ({
+      label: { type: "name" as const, name: `Microphone ${i + 1}` },
+      id: `mic${i + 1}`,
+    })),
+    selectedOption: "mic1",
+    outputOptions: Array.from({ length: 6 }, (_, i) => ({
+      label: { type: "name" as const, name: `Speaker ${i + 1}` },
+      id: `spk${i + 1}`,
+    })),
+    selectedOutputOption: "spk1",
+    onSelectOutput: fn(),
+  },
+  play: async ({ canvasElement }) => {
+    const canvas = within(canvasElement);
+    await userEvent.click(canvas.getByRole("button", { name: "Microphone" }));
+    const menu = within(document.body);
+
+    // The sticky wrapper rather than the meter: without a fake microphone (as on
+    // WebKit) the meter shows a message instead of a level.
+    const list = document.body.querySelector<HTMLElement>(
+      `.${styles.deviceList}`,
+    )!;
+    const sticky = await waitFor(() => {
+      const element = document.body.querySelector<HTMLElement>(
+        `.${styles.stickyMeter}`,
+      );
+      if (element === null) throw new Error("the meter has not rendered yet");
+      return element;
+    });
+    await expect(list.scrollHeight).toBeGreaterThan(list.clientHeight);
+
+    // Scrolled so the microphone section starts at the top: only there does a
+    // pinned meter differ from one that is simply last.
+    const group = await menu.findByRole("group", { name: "Microphone" });
+    list.scrollTop +=
+      group.getBoundingClientRect().top - list.getBoundingClientRect().top;
+    await expect(list.scrollTop + list.clientHeight).toBeLessThan(
+      list.scrollHeight,
+    );
+
+    const scrollport = list.getBoundingClientRect();
+    const pinned = sticky.getBoundingClientRect();
+    await expect(pinned.bottom).toBeLessThanOrEqual(scrollport.bottom + 1);
+    await expect(pinned.top).toBeGreaterThanOrEqual(scrollport.top - 1);
+
+    // The whole menu is on screen, not bounded by the document.
+    const frame = document.body
+      .querySelector("[role='menu']")!
+      .getBoundingClientRect();
+    await expect(frame.top).toBeGreaterThanOrEqual(0);
+    await expect(frame.bottom).toBeLessThanOrEqual(window.innerHeight + 1);
+
+    // The meter is the menu's one opaque part, so it must stay inside the frame.
+    await expect(pinned.left).toBeGreaterThan(frame.left);
+    await expect(pinned.right).toBeLessThan(frame.right);
+  },
+};
+
+/** Painted outline width, in px. */
+function outlineWidth(element: HTMLElement): number {
+  const { outlineStyle, outlineWidth } = getComputedStyle(element);
+  if (outlineStyle === "none") return 0;
+  return Number.parseFloat(outlineWidth) || 0;
+}
+
+/** Safari lists no outputs: a disabled, selected Default stands in. */
+export const OutputNotEnumerated: Story = {
+  args: {
+    ...Default.args,
+    iconsAndLabels: "audio",
+    enabled: true,
+    options: [
+      { label: { type: "name", name: "Microphone 1" }, id: "mic1" },
+      { label: { type: "name", name: "Microphone 2" }, id: "mic2" },
+    ],
+    selectedOption: "mic1",
+    outputOptions: [],
+    selectedOutputOption: undefined,
+    onSelectOutput: undefined,
+  },
+  play: async ({ canvasElement }) => {
+    const canvas = within(canvasElement);
+    await userEvent.click(canvas.getByRole("button", { name: "Microphone" }));
+
+    const speakers = await within(document.body).findByRole("menuitemradio", {
+      name: "Default",
+    });
+    await expect(speakers).toHaveAttribute("aria-disabled", "true");
+  },
+};
+
+/** The meter's icon shares the radio controls' centre line; only a real browser lays this out. */
+export const MeterAlignsWithTheDeviceRows: Story = {
+  args: {
+    ...Default.args,
+    iconsAndLabels: "audio",
+    enabled: true,
+    options: [
+      { label: { type: "name", name: "Microphone 1" }, id: "mic1" },
+      { label: { type: "name", name: "Microphone 2" }, id: "mic2" },
+    ],
+    selectedOption: "mic1",
+  },
+  play: async ({ canvasElement }) => {
+    const canvas = within(canvasElement);
+    await userEvent.click(canvas.getByRole("button", { name: "Microphone" }));
+
+    const menu = document.body.querySelector("[role='menu']")!;
+    const radio = menu.querySelector("input[type='radio']")!;
+    const icon = await waitFor(() => {
+      const element = document.body.querySelector(`.${meterStyles.icon}`);
+      if (element === null) throw new Error("the meter has not rendered yet");
+      return element;
+    });
+
+    // A pixel of slack, for subpixel layout.
+    await expect(Math.abs(centre(icon) - centre(radio))).toBeLessThanOrEqual(1);
+  },
+};
+
+/** Inline-axis centre of an element. */
+function centre(element: Element): number {
+  const box = element.getBoundingClientRect();
+  return box.left + box.width / 2;
+}
+
+/** Every row the keyboard reaches is fully visible, not under a heading or the meter. */
+export const KeyboardReachesEveryDevice: Story = {
+  args: {
+    ...Default.args,
+    iconsAndLabels: "audio",
+    enabled: true,
+    // Enough to scroll both ways, so either end can hide a row.
+    options: Array.from({ length: 20 }, (_, i) => ({
+      label: { type: "name" as const, name: `Microphone ${i + 1}` },
+      id: `mic${i + 1}`,
+    })),
+    selectedOption: "mic1",
+    outputOptions: Array.from({ length: 4 }, (_, i) => ({
+      label: { type: "name" as const, name: `Speaker ${i + 1}` },
+      id: `spk${i + 1}`,
+    })),
+    selectedOutputOption: "spk1",
+    onSelectOutput: fn(),
+  },
+  play: async ({ canvasElement }) => {
+    const canvas = within(canvasElement);
+    await userEvent.click(canvas.getByRole("button", { name: "Microphone" }));
+
+    const meter = await waitFor(() => {
+      const element = document.body.querySelector<HTMLElement>(
+        `.${styles.stickyMeter}`,
+      );
+      if (element === null) throw new Error("the meter has not rendered yet");
+      return element;
+    });
+
+    // Drawn over the list: the sticky headings and the meter.
+    const overlays = [
+      meter,
+      ...document.body.querySelectorAll<HTMLElement>(
+        `.${styles.sectionHeading}`,
+      ),
+    ];
+    const items = within(document.body).getAllByRole("menuitemradio");
+
+    // Down to the last device and back up.
+    for (const key of ["{ArrowDown}", "{ArrowUp}"])
+      for (let i = 0; i < items.length; i++) {
+        await userEvent.keyboard(key);
+        const focused = document.activeElement as HTMLElement;
+        await expect(focused).toHaveRole("menuitemradio");
+        // Checked as overlap: a heading only covers rows while its section is on
+        // screen.
+        await expect(overlapping(focused, overlays)).toBeLessThanOrEqual(1);
+      }
+  },
+};
+
+/** A section's heading stays at the top while the section is in view, and leaves with it. */
+export const HeadingsStayWhileScrolling: Story = {
+  args: {
+    ...Default.args,
+    iconsAndLabels: "audio",
+    enabled: true,
+    options: Array.from({ length: 20 }, (_, i) => ({
+      label: { type: "name" as const, name: `Microphone ${i + 1}` },
+      id: `mic${i + 1}`,
+    })),
+    selectedOption: "mic1",
+    outputOptions: Array.from({ length: 4 }, (_, i) => ({
+      label: { type: "name" as const, name: `Speaker ${i + 1}` },
+      id: `spk${i + 1}`,
+    })),
+    selectedOutputOption: "spk1",
+    onSelectOutput: fn(),
+  },
+  play: async ({ canvasElement }) => {
+    const canvas = within(canvasElement);
+    await userEvent.click(canvas.getByRole("button", { name: "Microphone" }));
+    const menu = within(document.body);
+
+    const list = document.body.querySelector<HTMLElement>(
+      `.${styles.deviceList}`,
+    )!;
+    const group = await menu.findByRole("group", { name: "Microphone" });
+    // By class: the heading is aria-hidden, and its group carries the name.
+    const heading = group.querySelector<HTMLElement>(
+      `.${styles.sectionHeading}`,
+    )!;
+
+    // Far enough that the heading is only on screen if it is stuck there.
+    list.scrollTop +=
+      group.getBoundingClientRect().top - list.getBoundingClientRect().top + 80;
+
+    const scrollport = list.getBoundingClientRect();
+    await expect(heading.getBoundingClientRect().top).toBeLessThanOrEqual(
+      scrollport.top + 2,
+    );
+    await expect(heading.getBoundingClientRect().bottom).toBeGreaterThan(
+      scrollport.top,
+    );
+    // Clear of the menu's frame.
+    const frame = document.body
+      .querySelector("[role='menu']")!
+      .getBoundingClientRect();
+    await expect(heading.getBoundingClientRect().left).toBeGreaterThan(
+      frame.left,
+    );
+  },
+};
+
+/** How far the most overlapping of `overlays` covers `element`, in px. */
+function overlapping(element: Element, overlays: Element[]): number {
+  const box = element.getBoundingClientRect();
+  return overlays.reduce((worst, overlay) => {
+    const over = overlay.getBoundingClientRect();
+    const shared =
+      Math.min(box.bottom, over.bottom) - Math.max(box.top, over.top);
+    return Math.max(worst, shared);
+  }, 0);
+}
+
+/** The blur toggle gets the keyboard ring too: it is the menu's child, not the list's. */
+export const FocusRingCoversTheBlurToggle: Story = {
+  args: {
+    ...VideoUnmute.args,
+    iconsAndLabels: "video",
+    videoBlurEnabled: false,
+    videoBlurToggleClick: fn(),
+  },
+  play: async ({ canvasElement }) => {
+    const canvas = within(canvasElement);
+    await userEvent.click(canvas.getByRole("button", { name: "Camera" }));
+    const toggle = await within(document.body).findByRole("menuitemcheckbox", {
+      name: /Blur background/,
+    });
+
+    // Arrow down past the cameras to the toggle.
+    for (let i = 0; i < 6 && document.activeElement !== toggle; i++)
+      await userEvent.keyboard("{ArrowDown}");
+    await expect(document.activeElement).toBe(toggle);
+    // The same ring the device rows get.
+    await expect(outlineWidth(toggle)).toBeGreaterThan(0);
+
+    // And the pointer takes it away, with the toggle still focused.
+    await userEvent.hover(toggle);
+    await expect(document.activeElement).toBe(toggle);
+    await expect(outlineWidth(toggle)).toBe(0);
+  },
+};

src/components/MediaMuteAndSwitchButton.test.tsx

@@ -5,40 +5,61 @@ SPDX-License-Identifier: AGPL-3.0-only OR LicenseRef-Element-Commercial
 Please see LICENSE in the repository root for full details.
 */
 
-import { describe, expect, test, vi } from "vitest";
-import { act, render, screen, type RenderResult } from "@testing-library/react";
+import { afterEach, describe, expect, test, vi } from "vitest";
+import { axe } from "vitest-axe";
+import {
+  act,
+  render,
+  screen,
+  within,
+  type RenderResult,
+} from "@testing-library/react";
 import userEvent from "@testing-library/user-event";
-import { type JSX, useState, type ReactNode } from "react";
+import { Profiler, type JSX, useState, type ReactNode } from "react";
 import { TooltipProvider } from "@vector-im/compound-web";
 
-import { MediaMuteAndSwitchButton } from "./MediaMuteAndSwitchButton";
+import {
+  MediaMuteAndSwitchButton,
+  type MenuOptions,
+} from "./MediaMuteAndSwitchButton";
 import { MediaDevicesContext } from "../MediaDevicesContext";
 import { type MediaDevices } from "../state/MediaDevices";
+import { restoreAudioCapture, stubAudioCapture } from "../utils/test";
 
 interface RenderOptions {
   requestDeviceNames: () => void;
 }
 
-function renderComponent(
+function withProviders(
   component: ReactNode,
   { requestDeviceNames = (): void => {} }: Partial<RenderOptions> = {},
-): RenderResult {
-  return render(
+): JSX.Element {
+  return (
     <TooltipProvider>
       <MediaDevicesContext
         value={{ requestDeviceNames } as unknown as MediaDevices}
       >
         {component}
       </MediaDevicesContext>
-    </TooltipProvider>,
+    </TooltipProvider>
   );
 }
 
+function renderComponent(
+  component: ReactNode,
+  options: Partial<RenderOptions> = {},
+): RenderResult {
+  return render(withProviders(component, options));
+}
+
 describe("MediaMuteAndSwitchButton", () => {
+  // Only one test stubs the capture; don't let it leak into the rest.
+  afterEach(restoreAudioCapture);
+
   test("renders", () => {
     const { container } = renderComponent(
       <TooltipProvider>
-        <MediaMuteAndSwitchButton title={"Switcher"} iconsAndLabels={"audio"} />
+        <MediaMuteAndSwitchButton iconsAndLabels={"audio"} />
       </TooltipProvider>,
     );
     expect(container).toMatchSnapshot();
@@ -50,11 +71,7 @@ describe("MediaMuteAndSwitchButton", () => {
       enabled: boolean,
     ): RenderResult => {
       return renderComponent(
-        <MediaMuteAndSwitchButton
-          title={"Switcher"}
-          iconsAndLabels={type}
-          enabled={enabled}
-        />,
+        <MediaMuteAndSwitchButton iconsAndLabels={type} enabled={enabled} />,
       );
     };
     const renderAudioEndabled = renderLabels("audio", true);
@@ -81,7 +98,6 @@ describe("MediaMuteAndSwitchButton", () => {
     const onMute = vi.fn();
     const { getByRole } = renderComponent(
       <MediaMuteAndSwitchButton
-        title={"Switcher"}
         onMuteClick={onMute}
         iconsAndLabels="audio"
         enabled={true}
@@ -98,7 +114,6 @@ describe("MediaMuteAndSwitchButton", () => {
     const onMute = vi.fn();
     const { getByRole } = renderComponent(
       <MediaMuteAndSwitchButton
-        title={"Switcher"}
         onMuteClick={onMute}
         iconsAndLabels="audio"
         enabled={true}
@@ -119,7 +134,6 @@ describe("MediaMuteAndSwitchButton", () => {
     const onMute = vi.fn();
     const { getByRole } = renderComponent(
       <MediaMuteAndSwitchButton
-        title={"Switcher"}
         onMuteClick={onMute}
         iconsAndLabels="video"
         enabled={true}
@@ -139,11 +153,7 @@ describe("MediaMuteAndSwitchButton", () => {
     const user = userEvent.setup();
     const requestDeviceNames = vi.fn();
     renderComponent(
-      <MediaMuteAndSwitchButton
-        title="Switcher"
-        iconsAndLabels="audio"
-        enabled
-      />,
+      <MediaMuteAndSwitchButton iconsAndLabels="audio" enabled />,
       { requestDeviceNames },
     );
 
@@ -157,7 +167,6 @@ describe("MediaMuteAndSwitchButton", () => {
     renderComponent(
       <>
         <MediaMuteAndSwitchButton
-          title="Switcher"
           iconsAndLabels="audio"
           enabled
           options={[
@@ -167,7 +176,6 @@ describe("MediaMuteAndSwitchButton", () => {
           selectedOption="mic1"
         />
         <MediaMuteAndSwitchButton
-          title="Switcher"
           iconsAndLabels="video"
           enabled
           options={[
@@ -193,7 +201,6 @@ describe("MediaMuteAndSwitchButton", () => {
     const onSelect = vi.fn();
     const { getByRole } = renderComponent(
       <MediaMuteAndSwitchButton
-        title="Switcher"
         iconsAndLabels="audio"
         enabled={true}
         options={[
@@ -217,7 +224,6 @@ describe("MediaMuteAndSwitchButton", () => {
     const onSelect = vi.fn();
     const { getByRole } = renderComponent(
       <MediaMuteAndSwitchButton
-        title="Switcher"
         iconsAndLabels="audio"
         enabled={true}
         options={[
@@ -246,7 +252,6 @@ describe("MediaMuteAndSwitchButton", () => {
       const [selectedOption, setSelectedOption] = useState("mic1");
       return (
         <MediaMuteAndSwitchButton
-          title="Switcher"
           iconsAndLabels="audio"
           enabled={true}
           options={[
@@ -306,7 +311,6 @@ describe("MediaMuteAndSwitchButton", () => {
     const onVideoBlurToggle = vi.fn();
     const { getByRole } = renderComponent(
       <MediaMuteAndSwitchButton
-        title="Switcher"
         iconsAndLabels="video"
         enabled={true}
         videoBlurToggleClick={onVideoBlurToggle}
@@ -327,11 +331,10 @@ describe("MediaMuteAndSwitchButton", () => {
     expect(onVideoBlurToggle).toHaveBeenCalled();
   });
 
-  test("renders check icon to mark the selected menu item", async () => {
+  test("marks the selected menu item as checked", async () => {
     const user = userEvent.setup();
     const { getByRole } = renderComponent(
       <MediaMuteAndSwitchButton
-        title="Switcher"
         iconsAndLabels="audio"
         enabled={true}
         options={[
@@ -342,19 +345,493 @@ describe("MediaMuteAndSwitchButton", () => {
       />,
     );
 
-    // open menu
     await user.click(getByRole("button", { name: "Microphone" }));
 
-    // The selected item (mic2) renders both an IconOptions SVG and a CheckIcon SVG
-    const mic1Item = screen.getByRole("menuitemradio", {
-      name: "Microphone 2",
-    });
-    expect(mic1Item.querySelectorAll("svg").length).toBe(2);
+    screen.getByRole("menuitemradio", { name: "Microphone 2", checked: true });
+    screen.getByRole("menuitemradio", { name: "Microphone 1", checked: false });
+  });
 
-    // The unselected item (mic1) only renders its IconOptions SVG
-    const mic2Item = screen.getByRole("menuitemradio", {
+  test("disables every device while a selection is settling", async () => {
+    const user = userEvent.setup();
+    const { promise, resolve } = Promise.withResolvers<void>();
+    function Wrapper(): JSX.Element {
+      const [selectedOption, setSelectedOption] = useState("mic1");
+      return (
+        <MediaMuteAndSwitchButton
+          iconsAndLabels="audio"
+          enabled={true}
+          options={[
+            { label: { type: "name", name: "Microphone 1" }, id: "mic1" },
+            { label: { type: "name", name: "Microphone 2" }, id: "mic2" },
+          ]}
+          selectedOption={selectedOption}
+          onSelect={(id) => {
+            void promise.then(() => setSelectedOption(id));
+          }}
+          outputOptions={[
+            { label: { type: "name", name: "Speakers" }, id: "spk1" },
+            { label: { type: "name", name: "Headset" }, id: "spk2" },
+          ]}
+          selectedOutputOption="spk1"
+          onSelectOutput={vi.fn()}
+        />
+      );
+    }
+
+    const { getByRole } = renderComponent(<Wrapper />);
+    await user.click(getByRole("button", { name: "Microphone" }));
+    await user.click(
+      screen.getByRole("menuitemradio", { name: "Microphone 2" }),
+    );
+
+    // In flight: nothing else can be picked, in either section.
+    for (const name of ["Microphone 1", "Speakers", "Headset"]) {
+      expect(screen.getByRole("menuitemradio", { name })).toHaveAttribute(
+        "aria-disabled",
+        "true",
+      );
+    }
+
+    await act(async () => {
+      resolve();
+      await promise;
+    });
+
+    // Settled: selectable again.
+    expect(
+      screen.getByRole("menuitemradio", { name: "Microphone 1" }),
+    ).not.toHaveAttribute("aria-disabled", "true");
+    expect(
+      screen.getByRole("menuitemradio", { name: "Headset" }),
+    ).not.toHaveAttribute("aria-disabled", "true");
+  });
+
+  test("lets go of a device switch that never arrives", async () => {
+    const user = userEvent.setup();
+    // onSelect never reports back, as when a device is removed mid-switch.
+    const { getByRole } = renderComponent(
+      <MediaMuteAndSwitchButton
+        iconsAndLabels="audio"
+        enabled={true}
+        options={[
+          { label: { type: "name", name: "Microphone 1" }, id: "mic1" },
+          { label: { type: "name", name: "Microphone 2" }, id: "mic2" },
+        ]}
+        selectedOption="mic1"
+        onSelect={vi.fn()}
+        outputOptions={[
+          { label: { type: "name", name: "Speakers" }, id: "spk1" },
+          { label: { type: "name", name: "Headset" }, id: "spk2" },
+        ]}
+        selectedOutputOption="spk1"
+        onSelectOutput={vi.fn()}
+      />,
+    );
+
+    await user.click(getByRole("button", { name: "Microphone" }));
+    await user.click(
+      screen.getByRole("menuitemradio", { name: "Microphone 2" }),
+    );
+    await user.keyboard("{Escape}");
+    await user.click(getByRole("button", { name: "Microphone" }));
+
+    for (const name of ["Microphone 1", "Speakers", "Headset"]) {
+      expect(screen.getByRole("menuitemradio", { name })).not.toHaveAttribute(
+        "aria-disabled",
+        "true",
+      );
+    }
+  });
+
+  test("lets go of a device switch whose device is unplugged", async () => {
+    const user = userEvent.setup();
+    const mics: MenuOptions[] = [
+      { label: { type: "name", name: "Microphone 1" }, id: "mic1" },
+      { label: { type: "name", name: "Microphone 2" }, id: "mic2" },
+    ];
+    const menu = (options: MenuOptions[]): JSX.Element => (
+      <MediaMuteAndSwitchButton
+        iconsAndLabels="audio"
+        enabled={true}
+        options={options}
+        selectedOption="mic1"
+        onSelect={vi.fn()}
+        outputOptions={[
+          { label: { type: "name", name: "Speakers" }, id: "spk1" },
+          { label: { type: "name", name: "Headset" }, id: "spk2" },
+        ]}
+        selectedOutputOption="spk1"
+        onSelectOutput={vi.fn()}
+      />
+    );
+
+    const { getByRole, rerender } = renderComponent(menu(mics));
+    await user.click(getByRole("button", { name: "Microphone" }));
+    await user.click(
+      screen.getByRole("menuitemradio", { name: "Microphone 2" }),
+    );
+
+    // The second microphone is unplugged before the switch lands.
+    rerender(withProviders(menu(mics.slice(0, 1))));
+
+    // Selectable again without closing the menu.
+    expect(
+      screen.getByRole("menuitemradio", { name: "Headset" }),
+    ).not.toHaveAttribute("aria-disabled", "true");
+  });
+
+  test("moves the level without re-rendering anything", async () => {
+    // The level is drawn into the DOM, so a moving level commits nothing.
+    const capture = stubAudioCapture();
+    const user = userEvent.setup();
+    let commits = 0;
+
+    const { getByRole } = renderComponent(
+      <Profiler
+        id="menu"
+        onRender={(): void => {
+          commits++;
+        }}
+      >
+        <MediaMuteAndSwitchButton
+          iconsAndLabels="audio"
+          enabled={true}
+          options={[
+            { label: { type: "name", name: "Microphone 1" }, id: "mic1" },
+            { label: { type: "name", name: "Microphone 2" }, id: "mic2" },
+          ]}
+          selectedOption="mic1"
+          onSelect={vi.fn()}
+          outputOptions={[
+            { label: { type: "name", name: "Speakers" }, id: "spk1" },
+            { label: { type: "name", name: "Headset" }, id: "spk2" },
+          ]}
+          selectedOutputOption="spk1"
+          onSelectOutput={vi.fn()}
+        />
+      </Profiler>,
+    );
+
+    await user.click(getByRole("button", { name: "Microphone" }));
+    capture.grant();
+    await vi.waitFor(() => expect(capture.contexts).toHaveLength(1));
+    const meter = await screen.findByRole("meter");
+    // The capture's arrival is one render: the idle level swapped for its own.
+    await act(async () => {});
+    const settled = commits;
+
+    // The meter smooths by elapsed time, so hand-driven frames need a clock.
+    let elapsed = performance.now();
+    const clock = vi
+      .spyOn(performance, "now")
+      .mockImplementation(() => (elapsed += 16));
+
+    // One frame per task, as a browser delivers them: one act() would batch them.
+    for (let step = 1; step <= 8; step++) {
+      capture.speak(step / 8);
+      await act(async () => {
+        capture.drawFrames(1);
+        await Promise.resolve();
+      });
+    }
+    clock.mockRestore();
+
+    expect(meter.getAttribute("aria-valuenow")).not.toBe("0");
+    expect(commits - settled).toBe(0);
+  });
+
+  test("camera menu uses the same selection pattern and keeps the blur toggle", async () => {
+    const user = userEvent.setup();
+    const { getByRole } = renderComponent(
+      <MediaMuteAndSwitchButton
+        iconsAndLabels="video"
+        enabled={true}
+        options={[
+          { label: { type: "name", name: "Camera 1" }, id: "cam1" },
+          { label: { type: "name", name: "Camera 2" }, id: "cam2" },
+        ]}
+        selectedOption="cam1"
+        onSelect={vi.fn()}
+        videoBlurToggleClick={vi.fn()}
+      />,
+    );
+
+    await user.click(getByRole("button", { name: "Camera" }));
+
+    screen.getByRole("menuitemradio", { name: "Camera 1", checked: true });
+    screen.getByRole("menuitemradio", { name: "Camera 2", checked: false });
+    expect(
+      screen.getByRole("menuitemcheckbox", { name: "Blur background" }),
+    ).toBeInTheDocument();
+  });
+
+  test("marks focus as keyboard-driven only when the keyboard moved it", async () => {
+    const user = userEvent.setup();
+    const { getByRole } = renderComponent(
+      <MediaMuteAndSwitchButton
+        iconsAndLabels="audio"
+        enabled={true}
+        options={[
+          { label: { type: "name", name: "Microphone 1" }, id: "mic1" },
+          { label: { type: "name", name: "Microphone 2" }, id: "mic2" },
+        ]}
+        selectedOption="mic1"
+        onSelect={vi.fn()}
+      />,
+    );
+
+    await user.click(getByRole("button", { name: "Microphone" }));
+    const list = screen
+      .getByRole("menuitemradio", { name: "Microphone 1" })
+      .closest("[data-focus-source]");
+
+    // The menu focuses whatever the pointer is over, so focus alone says nothing.
+    expect(list).toHaveAttribute("data-focus-source", "pointer");
+
+    await user.keyboard("{ArrowDown}");
+    expect(list).toHaveAttribute("data-focus-source", "keyboard");
+
+    await user.pointer({
+      target: screen.getByRole("menuitemradio", { name: "Microphone 2" }),
+      coords: { clientX: 10, clientY: 10 },
+    });
+    expect(list).toHaveAttribute("data-focus-source", "pointer");
+  });
+
+  test("marks the selected device with the accent fill", async () => {
+    const user = userEvent.setup();
+    const { getByRole } = renderComponent(
+      <MediaMuteAndSwitchButton
+        iconsAndLabels="audio"
+        enabled={true}
+        options={[
+          { label: { type: "name", name: "Microphone 1" }, id: "mic1" },
+          { label: { type: "name", name: "Microphone 2" }, id: "mic2" },
+        ]}
+        selectedOption="mic2"
+        onSelect={vi.fn()}
+      />,
+    );
+
+    await user.click(getByRole("button", { name: "Microphone" }));
+
+    const selected = screen
+      .getByRole("menuitemradio", { name: "Microphone 2" })
+      .querySelector("input[type=radio]");
+    expect(selected).toBeChecked();
+    // readOnly would paint the selected radio muted.
+    expect(selected).not.toHaveAttribute("readonly");
+  });
+
+  test("the open menu has no accessibility violations", async () => {
+    const user = userEvent.setup();
+    const { getByRole } = renderComponent(
+      <MediaMuteAndSwitchButton
+        iconsAndLabels="audio"
+        enabled={true}
+        options={[
+          { label: { type: "name", name: "Microphone 1" }, id: "mic1" },
+          { label: { type: "name", name: "Microphone 2" }, id: "mic2" },
+        ]}
+        selectedOption="mic1"
+        onSelect={vi.fn()}
+        outputOptions={[
+          { label: { type: "name", name: "Speakers" }, id: "spk1" },
+          { label: { type: "name", name: "Headset" }, id: "spk2" },
+        ]}
+        selectedOutputOption="spk1"
+        onSelectOutput={vi.fn()}
+      />,
+    );
+
+    await user.click(getByRole("button", { name: "Microphone" }));
+
+    const menu = document.querySelector('[role="menu"]');
+    expect(await axe(menu as HTMLElement)).toHaveNoViolations();
+  });
+
+  test("puts the speaker section above the microphone section", async () => {
+    const user = userEvent.setup();
+    const { getByRole } = renderComponent(
+      <MediaMuteAndSwitchButton
+        iconsAndLabels="audio"
+        enabled={true}
+        options={[
+          { label: { type: "name", name: "Microphone 1" }, id: "mic1" },
+          { label: { type: "name", name: "Microphone 2" }, id: "mic2" },
+        ]}
+        selectedOption="mic1"
+        onSelect={vi.fn()}
+        outputOptions={[
+          { label: { type: "name", name: "Speakers" }, id: "spk1" },
+          { label: { type: "name", name: "Headset" }, id: "spk2" },
+        ]}
+        selectedOutputOption="spk1"
+        onSelectOutput={vi.fn()}
+      />,
+    );
+
+    await user.click(getByRole("button", { name: "Microphone" }));
+
+    const speakers = screen.getByRole("menuitemradio", { name: "Speakers" });
+    const microphone = screen.getByRole("menuitemradio", {
       name: "Microphone 1",
     });
-    expect(mic2Item.querySelectorAll("svg").length).toBe(1);
+    expect(
+      speakers.compareDocumentPosition(microphone) &
+        Node.DOCUMENT_POSITION_FOLLOWING,
+    ).toBeTruthy();
+  });
+
+  test("lists speaker and microphone sections", async () => {
+    const user = userEvent.setup();
+    const { getByRole } = renderComponent(
+      <MediaMuteAndSwitchButton
+        iconsAndLabels="audio"
+        enabled={true}
+        options={[
+          { label: { type: "name", name: "Microphone 1" }, id: "mic1" },
+          { label: { type: "name", name: "Microphone 2" }, id: "mic2" },
+        ]}
+        selectedOption="mic1"
+        onSelect={vi.fn()}
+        outputOptions={[
+          {
+            label: { type: "default", name: "Built-in Output" },
+            id: "default",
+          },
+          { label: { type: "name", name: "Headset" }, id: "spk2" },
+        ]}
+        selectedOutputOption="default"
+        onSelectOutput={vi.fn()}
+      />,
+    );
+
+    await user.click(getByRole("button", { name: "Microphone" }));
+
+    screen.getByRole("menuitemradio", {
+      name: "Default (Built-in Output)",
+      checked: true,
+    });
+    screen.getByRole("menuitemradio", { name: "Headset", checked: false });
+    screen.getByRole("menuitemradio", { name: "Microphone 1", checked: true });
+    screen.getByRole("menuitemradio", { name: "Microphone 2", checked: false });
+  });
+
+  test("calls the output select callback on speaker click", async () => {
+    const user = userEvent.setup();
+    const onSelectOutput = vi.fn();
+    const { getByRole } = renderComponent(
+      <MediaMuteAndSwitchButton
+        iconsAndLabels="audio"
+        enabled={true}
+        options={[
+          { label: { type: "name", name: "Microphone 1" }, id: "mic1" },
+          { label: { type: "name", name: "Microphone 2" }, id: "mic2" },
+        ]}
+        selectedOption="mic1"
+        outputOptions={[
+          { label: { type: "name", name: "Speakers" }, id: "spk1" },
+          { label: { type: "name", name: "Headset" }, id: "spk2" },
+        ]}
+        selectedOutputOption="spk1"
+        onSelectOutput={onSelectOutput}
+      />,
+    );
+
+    await user.click(getByRole("button", { name: "Microphone" }));
+    await user.click(screen.getByRole("menuitemradio", { name: "Headset" }));
+
+    expect(onSelectOutput).toHaveBeenCalledWith("spk2");
+  });
+
+  test("shows a single device entry disabled", async () => {
+    const user = userEvent.setup();
+    const onSelect = vi.fn();
+    const { getByRole } = renderComponent(
+      <MediaMuteAndSwitchButton
+        iconsAndLabels="audio"
+        enabled={true}
+        options={[
+          { label: { type: "name", name: "Microphone 1" }, id: "mic1" },
+        ]}
+        selectedOption="mic1"
+        onSelect={onSelect}
+      />,
+    );
+
+    await user.click(getByRole("button", { name: "Microphone" }));
+
+    // Shown, but not selectable.
+    const only = screen.getByRole("menuitemradio", { name: "Microphone 1" });
+    expect(only).toHaveAttribute("aria-disabled", "true");
+  });
+
+  test("shows a default speaker where the platform lists none", async () => {
+    const user = userEvent.setup();
+    const { getByRole } = renderComponent(
+      <MediaMuteAndSwitchButton
+        iconsAndLabels="audio"
+        enabled={true}
+        options={[
+          { label: { type: "name", name: "Microphone 1" }, id: "mic1" },
+          { label: { type: "name", name: "Microphone 2" }, id: "mic2" },
+        ]}
+        selectedOption="mic1"
+        onSelect={vi.fn()}
+        // As Safari: no outputs listed.
+        outputOptions={[]}
+        selectedOutputOption={undefined}
+        onSelectOutput={undefined}
+      />,
+    );
+
+    await user.click(getByRole("button", { name: "Microphone" }));
+
+    const speakers = screen
+      .getAllByRole("group")
+      .find((group) => group.getAttribute("aria-label") === "Speaker")!;
+    const entries = within(speakers).getAllByRole("menuitemradio");
+    expect(entries).toHaveLength(1);
+    expect(entries[0]).toHaveAccessibleName("Default");
+    expect(entries[0]).toHaveAttribute("aria-disabled", "true");
+    expect(entries[0]).toHaveAttribute("aria-checked", "true");
+    expect(
+      within(entries[0]).getByRole("radio", { hidden: true }),
+    ).toBeChecked();
+  });
+
+  test("shows the speaker section disabled when output selection is unsupported", async () => {
+    const user = userEvent.setup();
+    const { getByRole } = renderComponent(
+      <MediaMuteAndSwitchButton
+        iconsAndLabels="audio"
+        enabled={true}
+        options={[
+          { label: { type: "name", name: "Microphone 1" }, id: "mic1" },
+          { label: { type: "name", name: "Microphone 2" }, id: "mic2" },
+        ]}
+        selectedOption="mic1"
+        onSelect={vi.fn()}
+        outputOptions={[
+          { label: { type: "name", name: "Speakers" }, id: "spk1" },
+          { label: { type: "name", name: "Headset" }, id: "spk2" },
+        ]}
+        selectedOutputOption="spk1"
+        onSelectOutput={undefined}
+      />,
+    );
+
+    await user.click(getByRole("button", { name: "Microphone" }));
+
+    expect(
+      screen.getByRole("menuitemradio", { name: "Speakers" }),
+    ).toHaveAttribute("aria-disabled", "true");
+    expect(
+      screen.getByRole("menuitemradio", { name: "Headset" }),
+    ).toHaveAttribute("aria-disabled", "true");
+    expect(
+      screen.getByRole("menuitemradio", { name: "Microphone 2" }),
+    ).not.toHaveAttribute("aria-disabled", "true");
   });
 });

src/components/MediaMuteAndSwitchButton.tsx

@@ -5,37 +5,48 @@ SPDX-License-Identifier: AGPL-3.0-only OR LicenseRef-Element-Commercial
 Please see LICENSE in the repository root for full details.
 */
 
-import { type ComponentType, useState, type FC, useEffect } from "react";
+import {
+  useCallback,
+  useState,
+  type CSSProperties,
+  type FC,
+  useEffect,
+  type ReactElement,
+} from "react";
 import {
   Button,
   Menu,
   MenuItem,
+  MenuTitle,
+  RadioInput,
   ToggleMenuItem,
 } from "@vector-im/compound-web";
 import {
-  CheckIcon,
   ChevronUpIcon,
   ChevronDownIcon,
-  MicOnIcon,
   SpinnerIcon,
-  VideoCallIcon,
 } from "@vector-im/compound-design-tokens/assets/web/icons";
 import classNames from "classnames";
 import { useTranslation } from "react-i18next";
+import { distinctUntilChanged, map } from "rxjs";
 
 import styles from "./MediaMuteAndSwitchButton.module.css";
 import { MicButton, VideoButton } from "../button";
-import { type DeviceLabel } from "../state/MediaDevices";
+import {
+  type AudioOutputDeviceLabel,
+  type DeviceLabel,
+} from "../state/MediaDevices";
 import { useMediaDevices } from "../MediaDevicesContext";
+import { useRootElement } from "../RootElementContext";
+import { observeElementSize$ } from "../utils/elementSize";
+import { LiveMicrophoneLevelMeter } from "./MicrophoneLevelMeter";
 
 export interface MenuOptions {
-  label: DeviceLabel;
+  label: DeviceLabel | AudioOutputDeviceLabel;
   id: string;
 }
 
 export interface MediaMuteAndSwitchButtonProps {
-  /** The title used in the Switcher modal. */
-  title: string;
   /** If the Mute button is enabled */
   enabled?: boolean;
   /** Callback if the mute button is clicked */
@@ -47,6 +58,12 @@ export interface MediaMuteAndSwitchButtonProps {
   options?: MenuOptions[];
   /** The option that will currently be rendered as the selected option */
   selectedOption?: string;
+  /** Output (speaker) devices. Audio menu only. */
+  outputOptions?: MenuOptions[];
+  /** The output option currently rendered as selected */
+  selectedOutputOption?: string;
+  /** Picks an output device. Undefined disables the speaker section. */
+  onSelectOutput?: (id: string) => void;
   videoBlurToggleClick?: () => void;
   videoBlurEnabled?: boolean;
   /**
@@ -58,90 +75,240 @@ export interface MediaMuteAndSwitchButtonProps {
 
 const BLUR_ID = "blur";
 
+/** Id of the placeholder "Default" row, shown when the platform lists no outputs. */
+const DEFAULT_OUTPUT_ID = "default";
+
+/** Largest share of the call area's height the device list may take. */
+const LIST_SHARE_OF_CALL = 0.6;
+
+/** Smallest device list height in px, so a short call still shows more than one device. */
+const MIN_LIST_HEIGHT = 160;
+
 export const MediaMuteAndSwitchButton: FC<MediaMuteAndSwitchButtonProps> = ({
-  title,
   enabled,
   busy,
   onMuteClick,
   iconsAndLabels,
   options,
   selectedOption,
+  outputOptions,
+  selectedOutputOption,
+  onSelectOutput,
   videoBlurEnabled,
   videoBlurToggleClick,
   onSelect,
 }) => {
-  const [plannedSelection, setPlannedSelection] = useState<string | null>(null);
+  // Requested but not yet selected. Keyed by kind too, since Chrome uses
+  // "default" for both an input and an output.
+  const [plannedSelection, setPlannedSelection] = useState<{
+    kind: "input" | "output";
+    id: string;
+  } | null>(null);
   const [menuOpen, setMenuOpen] = useState(false);
+  const onOpenChange = useCallback((open: boolean): void => {
+    setMenuOpen(open);
+    // Drop a request that never arrived.
+    if (!open) setPlannedSelection(null);
+  }, []);
   const isBusy = busy ?? false;
   const { t } = useTranslation();
   const devices = useMediaDevices();
 
+  /**
+   * Records on the menu whether the keyboard or the pointer moved focus, for
+   * the focus ring. `:focus-visible` can't tell: Radix focuses whatever the
+   * pointer is over. Listened for on the menu, not the document, so a second
+   * Element Call on the page doesn't answer for this one.
+   */
+  const trackFocusSource = useCallback(
+    (list: HTMLDivElement | null): (() => void) | undefined => {
+      const menu = list?.closest<HTMLElement>('[role="menu"]');
+      if (menu === null || menu === undefined) return;
+      const record = (source: "keyboard" | "pointer"): void => {
+        menu.dataset.focusSource = source;
+      };
+      record("pointer");
+      const usedKeyboard = (): void => record("keyboard");
+      const usedPointer = (): void => record("pointer");
+      menu.addEventListener("keydown", usedKeyboard, true);
+      menu.addEventListener("pointermove", usedPointer, true);
+      return (): void => {
+        menu.removeEventListener("keydown", usedKeyboard, true);
+        menu.removeEventListener("pointermove", usedPointer, true);
+      };
+    },
+    [],
+  );
+
+  // Measured on the call area: CSS can't size the portalled menu against it.
+  const rootElement = useRootElement();
+  const [listMaxHeight, setListMaxHeight] = useState<number>();
+  useEffect(() => {
+    if (!menuOpen) return;
+    // Followed, since a host can resize the call while the menu is open.
+    const subscription = observeElementSize$(rootElement)
+      .pipe(
+        map(({ height }) =>
+          Math.max(MIN_LIST_HEIGHT, Math.round(height * LIST_SHARE_OF_CALL)),
+        ),
+        distinctUntilChanged(),
+      )
+      .subscribe(setListMaxHeight);
+    return (): void => subscription.unsubscribe();
+  }, [menuOpen, rootElement]);
+
+  // Kept clear at the list's foot, so a row reached by keyboard isn't under
+  // the meter.
+  const [meterHeight, meter] = useMeasuredHeight();
+
+  // Likewise at its head, for the sticky headings.
+  const [headingHeight, heading] = useMeasuredHeight();
+
   useEffect(() => {
     if (menuOpen) devices.requestDeviceNames(); // No-op after the first call
   }, [menuOpen, devices]);
 
-  let button;
-  let toggles: { label: string; enabled: boolean; id: string }[] = [];
-  switch (iconsAndLabels) {
-    case "video":
-      button = (
-        <VideoButton
-          enabled={enabled ?? false}
-          busy={isBusy}
-          onClick={(e) => {
-            onMuteClick?.();
-            e.preventDefault();
-            e.stopPropagation();
-          }}
-          disabled={isBusy || onMuteClick === undefined}
-          data-testid="incall_videomute"
-        />
-      );
-      if (videoBlurToggleClick !== undefined) {
-        toggles = [
+  const MuteButton = iconsAndLabels === "audio" ? MicButton : VideoButton;
+  const button = (
+    <MuteButton
+      enabled={enabled ?? false}
+      busy={isBusy}
+      onClick={(e) => {
+        onMuteClick?.();
+        e.preventDefault();
+        e.stopPropagation();
+      }}
+      disabled={isBusy || onMuteClick === undefined}
+      data-testid={
+        iconsAndLabels === "audio" ? "incall_mute" : "incall_videomute"
+      }
+    />
+  );
+
+  const toggles =
+    iconsAndLabels === "video" && videoBlurToggleClick !== undefined
+      ? [
           {
             label: t("action.blur_background"),
             enabled: videoBlurEnabled ?? false,
             id: BLUR_ID,
           },
-        ];
-      }
-      break;
-    case "audio":
-      button = (
-        <MicButton
-          enabled={enabled ?? false}
-          busy={isBusy}
-          onClick={(e) => {
-            onMuteClick?.();
-            e.preventDefault();
-            e.stopPropagation();
-          }}
-          disabled={isBusy || onMuteClick === undefined}
-          data-testid="incall_mute"
-        />
-      );
-      break;
-  }
+        ]
+      : [];
 
-  let IconOptions: ComponentType<React.SVGAttributes<SVGElement>> | undefined;
   let optionsButtonLabel: string;
+  let menuTitle: string;
   let numberedLabel: (number: number) => string;
   switch (iconsAndLabels) {
     case "video":
-      IconOptions = VideoCallIcon;
       optionsButtonLabel = t("settings.devices.camera");
+      menuTitle = t("settings.devices.camera_source");
       numberedLabel = (n): string =>
         t("settings.devices.camera_numbered", { n });
       break;
     case "audio":
-      IconOptions = MicOnIcon;
       optionsButtonLabel = t("settings.devices.microphone");
+      menuTitle = t("settings.devices.mic_source");
       numberedLabel = (n): string =>
         t("settings.devices.microphone_numbered", { n });
       break;
   }
 
+  const labelText = (
+    label: MenuOptions["label"],
+    numbered: (n: number) => string,
+  ): string => {
+    switch (label.type) {
+      case "name":
+        return label.name;
+      case "number":
+        return numbered(label.number);
+      case "default":
+        return label.name === null
+          ? t("settings.devices.default")
+          : t("settings.devices.default_named_plain", { name: label.name });
+      case "speaker":
+        return t("settings.devices.loudspeaker");
+      case "earpiece":
+        return t("settings.devices.handset");
+    }
+  };
+
+  // Nothing can be picked while a requested device is on offer but not yet
+  // selected, so a second request can't overtake it.
+  const plannedOutput = plannedSelection?.kind === "output";
+  const selectedOfPlannedKind = plannedOutput
+    ? selectedOutputOption
+    : selectedOption;
+  const offeredOfPlannedKind = plannedOutput ? outputOptions : options;
+  const settling =
+    plannedSelection !== null &&
+    plannedSelection.id !== selectedOfPlannedKind &&
+    offeredOfPlannedKind?.some(({ id }) => id === plannedSelection.id) === true;
+
+  // Safari lists no outputs: show a disabled, selected Default rather than an
+  // empty section.
+  const noOutputsListed = outputOptions?.length === 0;
+  const speakerOptions: MenuOptions[] | undefined = noOutputsListed
+    ? [{ id: DEFAULT_OUTPUT_ID, label: { type: "default", name: null } }]
+    : outputOptions;
+  const selectedSpeaker = noOutputsListed
+    ? DEFAULT_OUTPUT_ID
+    : selectedOutputOption;
+
+  const deviceItems = (
+    kind: "input" | "output",
+    items: MenuOptions[] | undefined,
+    selected: string | undefined,
+    select: ((id: string) => void) | undefined,
+    numbered: (n: number) => string,
+  ): ReactElement[] => {
+    const list = items ?? [];
+    // Disabled rather than hidden, so the menu keeps its shape.
+    const disabled = select === undefined || list.length <= 1 || settling;
+    return list.map(({ label, id }) => (
+      <MenuItem
+        // A radio input may not sit inside a button.
+        as="div"
+        hideChevron
+        disabled={disabled}
+        label={labelText(label, numbered)}
+        Icon={
+          // Inert, not aria-hidden: aria-hidden alone leaves it focusable.
+          <span inert>
+            <RadioInput
+              checked={selected === id}
+              disabled={disabled}
+              // Not readOnly, which mutes the selected fill. The item handles
+              // the click.
+              onChange={(): void => {}}
+            />
+          </span>
+        }
+        onSelect={(e) => {
+          e.preventDefault();
+          if (id === selected) return;
+          setPlannedSelection({ kind, id });
+          select?.(id);
+        }}
+        key={id}
+        role="menuitemradio"
+        aria-checked={selected === id}
+      >
+        {selected !== id &&
+          plannedSelection?.kind === kind &&
+          plannedSelection.id === id && (
+            <SpinnerIcon
+              width={24}
+              height={24}
+              className={styles.rotate}
+              aria-label={t("settings.devices.activating")}
+            />
+          )}
+      </MenuItem>
+    ));
+  };
+
   return (
     <div
       className={classNames({
@@ -152,10 +319,12 @@ export const MediaMuteAndSwitchButton: FC<MediaMuteAndSwitchButtonProps> = ({
       {/* The mute button lives inside */}
       {button}
       <Menu
-        title={title}
-        showTitle={true}
+        className={styles.menu}
+        // Named for screen readers only: each section has its own heading.
+        title={menuTitle}
+        showTitle={false}
         open={menuOpen}
-        onOpenChange={setMenuOpen}
+        onOpenChange={onOpenChange}
         side="top"
         trigger={
           <Button
@@ -171,67 +340,75 @@ export const MediaMuteAndSwitchButton: FC<MediaMuteAndSwitchButtonProps> = ({
           />
         }
       >
-        {options?.map(({ label, id }) => {
-          let labelText: string;
-          switch (label.type) {
-            case "name":
-              labelText = label.name;
-              break;
-            case "number":
-              labelText = numberedLabel(label.number);
-              break;
+        <div
+          ref={trackFocusSource}
+          // Keeps the items the menu's own children for assistive tech.
+          role="none"
+          className={styles.deviceList}
+          data-testid="device-list"
+          style={
+            {
+              "--device-list-max-height":
+                listMaxHeight === undefined ? undefined : `${listMaxHeight}px`,
+              "--device-list-scroll-padding-end":
+                meterHeight === undefined ? undefined : `${meterHeight}px`,
+              "--device-list-scroll-padding-start":
+                headingHeight === undefined ? undefined : `${headingHeight}px`,
+            } as CSSProperties
           }
-          return (
-            <MenuItem
-              hideChevron
-              label={labelText}
-              Icon={
-                IconOptions && (
-                  <IconOptions
-                    width={24}
-                    height={24}
-                    className={styles.itemIcon}
-                    aria-hidden
-                  />
-                )
-              }
-              onSelect={(e) => {
-                e.preventDefault();
-                if (id === selectedOption) return;
-                setPlannedSelection(id);
-                onSelect?.(id);
-              }}
-              key={id}
-              role="menuitemradio"
-              aria-checked={selectedOption === id}
-            >
-              {selectedOption === id && (
-                <CheckIcon
-                  width={24}
-                  height={24}
-                  aria-hidden // A label would be redundant to aria-checked above
+        >
+          {iconsAndLabels === "audio" && speakerOptions && (
+            <>
+              {/* A menu may only contain items, separators and groups, so each
+                  heading is a hidden part of a named group. */}
+              <div role="group" aria-label={t("settings.devices.speaker")}>
+                <div aria-hidden className={styles.sectionHeading}>
+                  <MenuTitle title={t("settings.devices.speaker")} />
+                </div>
+                {deviceItems(
+                  "output",
+                  speakerOptions,
+                  selectedSpeaker,
+                  onSelectOutput,
+                  (n) => t("settings.devices.speaker_numbered", { n }),
+                )}
+              </div>
+            </>
+          )}
+          <div role="group" aria-label={optionsButtonLabel}>
+            <div ref={heading} aria-hidden className={styles.sectionHeading}>
+              <MenuTitle title={optionsButtonLabel} />
+            </div>
+            {/* Apart from the heading, so the sticky meter can't ride over it. */}
+            <div role="none">
+              {deviceItems(
+                "input",
+                options,
+                selectedOption,
+                onSelect,
+                numberedLabel,
+              )}
+              {iconsAndLabels === "audio" && (
+                <LiveMicrophoneLevelMeter
+                  ref={meter}
+                  deviceId={selectedOption}
+                  // Only while open, so the microphone isn't held all call.
+                  active={menuOpen}
+                  className={styles.stickyMeter}
                 />
               )}
-              {selectedOption !== id && plannedSelection === id && (
-                <SpinnerIcon
-                  width={24}
-                  height={24}
-                  className={styles.rotate}
-                  aria-label={t("settings.devices.activating")}
-                />
-              )}
-            </MenuItem>
-          );
-        })}
-        {(toggles?.length ?? 0) > 0 && <hr />}
-        {toggles?.map((toggle) => (
+            </div>
+          </div>
+        </div>
+        {toggles.length > 0 && <hr />}
+        {toggles.map((toggle) => (
           <ToggleMenuItem
             label={toggle.label}
             onSelect={(e) => {
               videoBlurToggleClick?.();
               e.preventDefault();
             }}
-            checked={toggle.enabled ?? false}
+            checked={toggle.enabled}
             key={toggle.id}
           />
         ))}
@@ -239,3 +416,25 @@ export const MediaMuteAndSwitchButton: FC<MediaMuteAndSwitchButtonProps> = ({
     </div>
   );
 };
+
+/** Follows an element's height. */
+function useMeasuredHeight(): [
+  number | undefined,
+  (element: HTMLElement | null) => (() => void) | undefined,
+] {
+  const [height, setHeight] = useState<number>();
+  const ref = useCallback(
+    (element: HTMLElement | null): (() => void) | undefined => {
+      if (element === null) return;
+      const subscription = observeElementSize$(element)
+        .pipe(
+          map((size) => size.height),
+          distinctUntilChanged(),
+        )
+        .subscribe(setHeight);
+      return (): void => subscription.unsubscribe();
+    },
+    [],
+  );
+  return [height, ref];
+}

src/components/MicrophoneLevelMeter.module.css

@@ -0,0 +1,65 @@
+/*
+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.
+*/
+
+.meter {
+  /* A device row's icon column, so the bars start where the names do. */
+  --meter-icon-size: 24px;
+
+  /* Compound's radio size, whose centre line the icon shares. */
+  --device-control-size: 20px;
+
+  display: flex;
+  align-items: center;
+  gap: var(--cpd-space-3x);
+  padding-block: var(--cpd-space-2x);
+  /* Centres the icon on the radio column: less the row's inset border and half
+     the icon's extra width. Checked in the MeterAlignsWithTheDeviceRows story. */
+  padding-inline-start: calc(
+    var(--cpd-space-4x) - var(--cpd-border-width-1) -
+      (var(--meter-icon-size) - var(--device-control-size)) / 2
+  );
+  padding-inline-end: calc(var(--cpd-space-4x) * 2 + var(--cpd-space-2x));
+}
+
+.icon {
+  color: var(--cpd-color-icon-secondary);
+  flex-shrink: 0;
+  inline-size: var(--meter-icon-size);
+  block-size: var(--meter-icon-size);
+}
+
+.segments {
+  /* Bars keep one size and the width decides how many; the component reads the
+     sizes back from here. */
+  flex: 1;
+  /* So the bars never set the menu's width. */
+  contain: inline-size;
+  min-inline-size: 0;
+  display: flex;
+  align-items: center;
+  /* Half again a bar's width, per the design. */
+  gap: var(--cpd-space-1-5x);
+}
+
+.segment {
+  flex: none;
+  inline-size: var(--cpd-space-1x);
+  block-size: var(--cpd-space-4x);
+  border-radius: var(--cpd-space-1x);
+  background: var(--cpd-color-bg-subtle-primary);
+}
+
+/* The count of lit bars carries the level as well as their colour. */
+.segmentLit {
+  background: var(--cpd-color-bg-accent-rest);
+}
+
+.message {
+  color: var(--cpd-color-text-secondary);
+  /* A paragraph's margin would lift the text off centre. */
+  margin-block: 0;
+}

src/components/MicrophoneLevelMeter.stories.tsx

@@ -0,0 +1,161 @@
+/*
+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, within } from "storybook/test";
+import { type JSX } from "react";
+
+import type { Meta, StoryObj } from "@storybook/react-vite";
+import {
+  MicrophoneLevelMeter,
+  type MicrophoneLevelMeterProps,
+} from "./MicrophoneLevelMeter";
+import styles from "./MicrophoneLevelMeter.module.css";
+import { LEVEL_SCALE } from "../state/MicrophoneLevel";
+import { constant } from "../state/Behavior";
+
+/** Roughly the menu's width. It only decides how many bars fit. */
+const STORY_WIDTH = 256;
+
+const meta = {
+  component: MicrophoneLevelMeter,
+  decorators: [
+    (Story): JSX.Element => (
+      <div style={{ inlineSize: STORY_WIDTH }}>
+        <Story />
+      </div>
+    ),
+  ],
+  argTypes: {
+    state: {
+      description:
+        "What the selected microphone can say about itself: a level, or a reason there is none.",
+    },
+  },
+} satisfies Meta<typeof MicrophoneLevelMeter>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+/** A quiet room: hiss below the noise floor lights nothing. */
+export const Silent: Story = {
+  args: { state: { type: "level", level$: constant(0) } },
+  play: async ({ canvasElement }) => {
+    await expect(litSegments(canvasElement)).toBe(0);
+  },
+};
+
+export const QuietSpeech: Story = {
+  args: { state: { type: "level", level$: constant(5) } },
+};
+
+export const NormalSpeech: Story = {
+  args: { state: { type: "level", level$: constant(12) } },
+  play: async ({ canvasElement }) => {
+    // A floor, not a count: the count follows from the design's bar and gap sizes.
+    await expect(
+      canvasElement.getElementsByClassName(styles.segment).length,
+    ).toBeGreaterThanOrEqual(15);
+  },
+};
+
+export const LoudSpeech: Story = {
+  args: { state: { type: "level", level$: constant(LEVEL_SCALE) } },
+};
+
+/** The three volumes differ in how many bars are lit, not only in colour. */
+export const VolumesAreDistinguishable: Story = {
+  args: { state: { type: "level", level$: constant(5) } },
+  play: async ({ canvasElement, mount }) => {
+    const lit: number[] = [];
+    for (const level of [5, 12, LEVEL_SCALE]) {
+      await mount(
+        <MicrophoneLevelMeter
+          state={{ type: "level", level$: constant(level) }}
+        />,
+      );
+      lit.push(litSegments(canvasElement));
+      await expect(within(canvasElement).getByRole("meter")).toHaveAttribute(
+        "aria-valuenow",
+        String(level),
+      );
+    }
+    await expect(new Set(lit).size).toBe(lit.length);
+    await expect(lit).toEqual([...lit].sort((a, b) => a - b));
+  },
+};
+
+/** Permission refused: a message with a next action, not a still meter. */
+export const PermissionDenied: Story = {
+  args: { state: { type: "permission-denied" } },
+  play: async ({ canvasElement }) => {
+    const canvas = within(canvasElement);
+    await expect(canvas.queryByRole("meter")).toBeNull();
+    await expect(
+      canvas.getByText(/Microphone access is blocked/),
+    ).toBeVisible();
+  },
+};
+
+/** No input device, told apart from a refusal. */
+export const NoDevice: Story = {
+  args: { state: { type: "no-device" } },
+  play: async ({ canvasElement }) => {
+    const canvas = within(canvasElement);
+    await expect(canvas.queryByRole("meter")).toBeNull();
+    await expect(canvas.getByText(/No microphone found/)).toBeVisible();
+
+    // The icon sits on the middle of the text, however many lines it runs to.
+    const middle = (element: Element): number => {
+      const box = element.getBoundingClientRect();
+      return box.top + box.height / 2;
+    };
+    const icon = canvasElement.getElementsByClassName(styles.icon)[0];
+    const words = canvasElement.getElementsByClassName(styles.message)[0];
+    await expect(Math.abs(middle(icon) - middle(words))).toBeLessThanOrEqual(1);
+  },
+};
+
+/** The same meter at two widths: the bars keep their size and only their count changes. */
+export const ShapeStaysTheSameAtAnyWidth: Story = {
+  args: { state: { type: "level", level$: constant(12) } },
+  play: async ({ mount, args }) => {
+    const narrow = await measureAt(mount, args, 180);
+    const wide = await measureAt(mount, args, 400);
+
+    await expect(narrow.bar).toBe(wide.bar);
+    await expect(narrow.gap).toBe(wide.gap);
+    await expect(narrow.count).toBeLessThan(wide.count);
+    // The bars are still separate, not one run of colour.
+    await expect(narrow.gap).toBeGreaterThan(0);
+  },
+};
+
+/** How many bars are lit. */
+function litSegments(canvasElement: HTMLElement): number {
+  return canvasElement.getElementsByClassName(styles.segmentLit).length;
+}
+
+/** Renders the meter at one width and reports its bars' shape. */
+async function measureAt(
+  mount: (ui: JSX.Element) => Promise<unknown>,
+  args: MicrophoneLevelMeterProps,
+  width: number,
+): Promise<{ count: number; bar: number; gap: number }> {
+  await mount(
+    <div style={{ inlineSize: width }}>
+      <MicrophoneLevelMeter {...args} />
+    </div>,
+  );
+  const bars = Array.from(document.body.getElementsByClassName(styles.segment));
+  const first = bars[0].getBoundingClientRect();
+  const second = bars[1].getBoundingClientRect();
+  return {
+    count: bars.length,
+    bar: first.width,
+    gap: second.left - first.right,
+  };
+}

src/components/MicrophoneLevelMeter.test.tsx

@@ -0,0 +1,42 @@
+/*
+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, test } from "vitest";
+import { render, screen } from "@testing-library/react";
+
+import { MicrophoneLevelMeter } from "./MicrophoneLevelMeter";
+import { LEVEL_SCALE } from "../state/MicrophoneLevel";
+import { constant } from "../state/Behavior";
+
+describe("MicrophoneLevelMeter", () => {
+  test("announces the level rather than relying on hue", () => {
+    render(
+      <MicrophoneLevelMeter state={{ type: "level", level$: constant(6) }} />,
+    );
+
+    const meter = screen.getByRole("meter", { name: "Microphone level" });
+    expect(meter).toHaveAttribute("aria-valuenow", "6");
+    expect(meter).toHaveAttribute("aria-valuemax", String(LEVEL_SCALE));
+    expect(meter).toHaveAttribute("aria-valuetext", `6 of ${LEVEL_SCALE}`);
+  });
+
+  test("shows distinct messages for denied permission and no input device", () => {
+    const denied = render(
+      <MicrophoneLevelMeter state={{ type: "permission-denied" }} />,
+    );
+    expect(
+      denied.getByText(/Microphone access is blocked/),
+    ).toBeInTheDocument();
+    expect(denied.queryByRole("meter")).toBeNull();
+
+    const missing = render(
+      <MicrophoneLevelMeter state={{ type: "no-device" }} />,
+    );
+    expect(missing.getByText(/No microphone found/)).toBeInTheDocument();
+    expect(missing.queryByRole("meter")).toBeNull();
+  });
+});

src/components/MicrophoneLevelMeter.tsx

@@ -0,0 +1,146 @@
+/*
+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 {
+  useCallback,
+  useLayoutEffect,
+  useRef,
+  useState,
+  type FC,
+  type Ref,
+} from "react";
+import { Text } from "@vector-im/compound-web";
+import { MicOnIcon } from "@vector-im/compound-design-tokens/assets/web/icons";
+import classNames from "classnames";
+import { useTranslation } from "react-i18next";
+
+import { distinctUntilChanged, map } from "rxjs";
+
+import styles from "./MicrophoneLevelMeter.module.css";
+import { LEVEL_SCALE, type MicrophoneState } from "../state/MicrophoneLevel";
+import { observeElementSize$ } from "../utils/elementSize";
+import { useMicrophoneLevel } from "./useMicrophoneLevel";
+
+export interface LiveMicrophoneLevelMeterProps {
+  /** The microphone to listen to. */
+  deviceId: string | undefined;
+  /** Whether to hold a capture at all. */
+  active: boolean;
+  className?: string;
+  ref?: Ref<HTMLDivElement>;
+}
+
+/**
+ * The meter, wired to a live capture. Its own component so a changing level
+ * re-renders the meter, not its parent.
+ */
+export const LiveMicrophoneLevelMeter: FC<LiveMicrophoneLevelMeterProps> = ({
+  deviceId,
+  active,
+  className,
+  ref,
+}) => {
+  const state = useMicrophoneLevel(deviceId, active);
+  return <MicrophoneLevelMeter state={state} className={className} ref={ref} />;
+};
+
+export interface MicrophoneLevelMeterProps {
+  state: MicrophoneState;
+  className?: string;
+  ref?: Ref<HTMLDivElement>;
+}
+
+/** The input level of a microphone, or why there is none. */
+export const MicrophoneLevelMeter: FC<MicrophoneLevelMeterProps> = ({
+  state,
+  className,
+  ref,
+}) => {
+  const { t } = useTranslation();
+  // Bars keep one size, so their count follows the width. Starts full so the
+  // first paint, and jsdom, draw a whole meter.
+  const [barCount, setBarCount] = useState(LEVEL_SCALE);
+  const segments = useRef<HTMLDivElement | null>(null);
+  const track = useCallback(
+    (element: HTMLDivElement | null): (() => void) | undefined => {
+      if (element === null) return;
+      segments.current = element;
+      const subscription = observeElementSize$(element)
+        .pipe(
+          map(({ width }) => barsThatFit(element, width)),
+          distinctUntilChanged(),
+        )
+        .subscribe(setBarCount);
+      return (): void => {
+        subscription.unsubscribe();
+        segments.current = null;
+      };
+    },
+    [],
+  );
+
+  // Drawn straight into the DOM: the level changes many times a second, and
+  // re-rendering for each change is what this avoids.
+  useLayoutEffect(() => {
+    const element = segments.current;
+    if (state.type !== "level" || element === null) return;
+    const subscription = state.level$.subscribe((level) => {
+      element.setAttribute("aria-valuenow", String(level));
+      element.setAttribute(
+        "aria-valuetext",
+        t("microphone_level.value", { level, max: LEVEL_SCALE }),
+      );
+      // The level is a share of the scale, not a bar count.
+      const lit = Math.round((level / LEVEL_SCALE) * barCount);
+      Array.from(element.children).forEach((bar, i) =>
+        bar.classList.toggle(styles.segmentLit, i < lit),
+      );
+    });
+    return (): void => subscription.unsubscribe();
+  }, [state, barCount, t]);
+
+  return (
+    <div ref={ref} className={classNames(styles.meter, className)}>
+      <MicOnIcon className={styles.icon} aria-hidden />
+      {state.type !== "level" ? (
+        <Text size="sm" className={styles.message}>
+          {state.type === "permission-denied"
+            ? t("microphone_level.permission_denied")
+            : t("microphone_level.no_device")}
+        </Text>
+      ) : (
+        <div
+          ref={track}
+          className={styles.segments}
+          role="meter"
+          aria-label={t("microphone_level.label")}
+          aria-valuemin={0}
+          aria-valuemax={LEVEL_SCALE}
+          // The first paint's value; the effect above keeps it current.
+          aria-valuenow={state.level$.value}
+          aria-valuetext={t("microphone_level.value", {
+            level: state.level$.value,
+            max: LEVEL_SCALE,
+          })}
+        >
+          {Array.from({ length: barCount }, (_, i) => (
+            <span key={i} aria-hidden className={styles.segment} />
+          ))}
+        </div>
+      )}
+    </div>
+  );
+};
+
+/** How many bars fit across `width`, measured so the stylesheet alone sets their size. */
+function barsThatFit(track: HTMLElement, width: number): number {
+  const gap = Number.parseFloat(getComputedStyle(track).columnGap);
+  const bar = track.firstElementChild?.getBoundingClientRect().width ?? 0;
+  // No layout (jsdom): keep the full count.
+  if (!(bar > 0) || !(gap >= 0)) return LEVEL_SCALE;
+  return Math.max(1, Math.floor((width + gap) / (bar + gap)));
+}

src/components/useMicrophoneLevel.test.tsx

@@ -0,0 +1,41 @@
+/*
+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, describe, expect, test } from "vitest";
+import { renderHook } from "@testing-library/react";
+
+import { useMicrophoneLevel } from "./useMicrophoneLevel";
+import { restoreAudioCapture, stubAudioCapture } from "../utils/test";
+
+// Capture and release are covered in MicrophoneLevel.test.ts; this covers the bridge.
+describe("useMicrophoneLevel", () => {
+  afterEach(restoreAudioCapture);
+
+  test("holds no capture while the meter is not shown", () => {
+    const capture = stubAudioCapture();
+
+    renderHook(() => useMicrophoneLevel("mic1", false));
+
+    expect(capture.getUserMedia).not.toHaveBeenCalled();
+  });
+
+  test("starts from nothing rather than the previous device's level", () => {
+    const capture = stubAudioCapture();
+
+    const { result, rerender } = renderHook(
+      ({ id }: { id: string }) => useMicrophoneLevel(id, true),
+      { initialProps: { id: "mic1" } },
+    );
+    capture.grant();
+
+    rerender({ id: "mic2" });
+
+    // No level carried over from the previous device.
+    const state = result.current;
+    expect(state.type === "level" ? state.level$.value : state.type).toBe(0);
+  });
+});

src/components/useMicrophoneLevel.ts

@@ -0,0 +1,34 @@
+/*
+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 { useEffect, useState } from "react";
+
+import {
+  type MicrophoneState,
+  observeMicrophoneState$,
+} from "../state/MicrophoneLevel";
+import { constant } from "../state/Behavior";
+
+const IDLE: MicrophoneState = { type: "level", level$: constant(0) };
+
+/** The live level of a microphone, captured only while `active`. */
+export function useMicrophoneLevel(
+  deviceId: string | undefined,
+  active: boolean,
+): MicrophoneState {
+  const [state, setState] = useState<MicrophoneState>(IDLE);
+
+  useEffect(() => {
+    if (!active) return;
+    // Idle first, so a new device doesn't start from the previous level.
+    setState(IDLE);
+    const subscription = observeMicrophoneState$(deviceId).subscribe(setState);
+    return (): void => subscription.unsubscribe();
+  }, [deviceId, active]);
+
+  return state;
+}

src/config/ConfigOptions.ts

@@ -97,11 +97,19 @@ export interface ConfigOptions {
     };
   };
 
-  // Describes the LiveKit configuration to be used.
+  /**
+   * Describes the LiveKit configuration to be used.
+   */
   livekit?: {
-    // The link to the service that returns a livekit url and token to use it.
-    // This is a fallback link in case the homeserver in use does not advertise
-    // a livekit service url over the transports endpoint.
+    /**
+     * The link to the service that returns a livekit url and token to use it.
+     * This is a fallback link in case the homeserver in use does not advertise
+     * a livekit service url over the transports endpoint.
+     *
+     * @deprecated Homeservers should advertise available transports over the
+     *   /_matrix/client/unstable/org.matrix.msc4143/rtc/transports endpoint
+     *   instead.
+     */
     livekit_service_url: string;
   };
 
@@ -207,12 +215,6 @@ export interface ConfigOptions {
    * Take care when changing these options.
    */
   matrix_rtc_session?: {
-    /**
-     * How long (in milliseconds) to wait before rotating end-to-end media encryption keys
-     * when someone leaves a call.
-     */
-    wait_for_key_rotation_ms?: number;
-
     /**
      * How long we wait before retrying after a network error on any of the requests.
      */

src/grid/CallLayout.test.tsx

@@ -0,0 +1,187 @@
+/*
+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 { act, render, screen } from "@testing-library/react";
+import { BehaviorSubject } from "rxjs";
+import { describe, expect, it, vi } from "vitest";
+
+import { arrangeTiles, type Bounds } from "./CallLayout";
+import { makeGridLayout } from "./GridLayout";
+import { makeSpotlightLandscapeLayout } from "./SpotlightLandscapeLayout";
+import { makeSpotlightPortraitLayout } from "./SpotlightPortraitLayout";
+import { type DragCallback, type LayoutProps } from "./Grid";
+import { constant } from "../state/Behavior";
+import {
+  type Alignment,
+  type GridLayout,
+  type SpotlightLandscapeLayout,
+  type SpotlightPortraitLayout,
+} from "../state/layout-types";
+import { type UserMediaViewModel } from "../state/media/UserMediaViewModel";
+import {
+  GridTileViewModel,
+  SpotlightTileViewModel,
+  type TileViewModel,
+} from "../state/TileViewModel";
+
+// Grid supplies these hooks to the layouts it renders; on their own the
+// layouts have no grid to report to
+vi.mock("./Grid", async (importOriginal) => ({
+  ...(await importOriginal<Record<string, unknown>>()),
+  useUpdateLayout: (): void => {},
+  useVisibleTiles: (): void => {},
+}));
+
+describe("grid layout", () => {
+  it("sizes the tiles from the minimum bounds", () => {
+    const minBounds$ = new BehaviorSubject<Bounds>({ width: 800, height: 600 });
+    const { scrolling: Scrolling } = makeGridLayout({ minBounds$ });
+    render(<Scrolling model={gridModel()} Slot={Slot} />);
+    const layer = screen.getByTestId("slot-0").parentElement!;
+    expect(layer.style.width).toBe("800px");
+    expect(layer.style.getPropertyValue("--width")).toBe(
+      `${Math.floor(arrangeTiles(800, 600, 3).tileWidth)}px`,
+    );
+
+    act(() => minBounds$.next({ width: 400, height: 300 }));
+    expect(layer.style.width).toBe("400px");
+    expect(layer.style.getPropertyValue("--width")).toBe(
+      `${Math.floor(arrangeTiles(400, 300, 3).tileWidth)}px`,
+    );
+  });
+
+  it("moves the spotlight only when a drag reaches another corner", () => {
+    const model = gridModel();
+    const { fixed: Fixed } = makeGridLayout({ minBounds$: bounds });
+    render(<Fixed model={model} Slot={Slot} />);
+    const alignments: Alignment[] = [];
+    model.spotlightAlignment$.subscribe((a) => alignments.push(a));
+    const drag = drags.get("spotlight")!;
+
+    // Still in the bottom right corner
+    act(() => drag({ x: 0, y: 0, xRatio: 0.9, yRatio: 0.9 }));
+    // Over to the bottom left
+    act(() => drag({ x: 0, y: 0, xRatio: 0.1, yRatio: 0.9 }));
+    // And a little further, still bottom left
+    act(() => drag({ x: 0, y: 0, xRatio: 0.2, yRatio: 0.8 }));
+    // Up to the top left
+    act(() => drag({ x: 0, y: 0, xRatio: 0.2, yRatio: 0.1 }));
+
+    expect(alignments).toEqual([
+      { inline: "end", block: "end" },
+      { inline: "start", block: "end" },
+      { inline: "start", block: "start" },
+    ]);
+    const slot = screen.getByTestId("slot-spotlight");
+    expect(slot.getAttribute("data-inline-alignment")).toBe("start");
+    expect(slot.getAttribute("data-block-alignment")).toBe("start");
+  });
+});
+
+describe("spotlight landscape layout", () => {
+  it("puts the spotlight in the fixed layer and the grid in the scrolling one", () => {
+    const { fixed: Fixed, scrolling: Scrolling } = makeSpotlightLandscapeLayout(
+      { minBounds$: bounds },
+    );
+    const model = landscapeModel();
+    const { unmount } = render(<Fixed model={model} Slot={Slot} />);
+    expect(screen.getByTestId("slot-spotlight")).toBeInTheDocument();
+    unmount();
+
+    render(<Scrolling model={model} Slot={Slot} />);
+    expect(slotIds()).toEqual(model.grid.map((tile) => tile.id));
+  });
+});
+
+describe("spotlight portrait layout", () => {
+  it("sizes the grid tiles from the minimum width", () => {
+    const minBounds$ = new BehaviorSubject<Bounds>({ width: 300, height: 700 });
+    const { scrolling: Scrolling } = makeSpotlightPortraitLayout({
+      minBounds$,
+    });
+    const model = portraitModel();
+    render(<Scrolling model={model} Slot={Slot} />);
+    expect(slotIds()).toEqual(model.grid.map((tile) => tile.id));
+    const layer = screen.getByTestId(`slot-${model.grid[0].id}`).parentElement!
+      .parentElement!;
+    expect(layer.style.getPropertyValue("--grid-tile-width")).toBe(
+      `${Math.floor(arrangeTiles(300, 300, 3).tileWidth)}px`,
+    );
+
+    act(() => minBounds$.next({ width: 500, height: 700 }));
+    expect(layer.style.getPropertyValue("--grid-tile-width")).toBe(
+      `${Math.floor(arrangeTiles(500, 500, 3).tileWidth)}px`,
+    );
+  });
+});
+
+const bounds = constant<Bounds>({ width: 800, height: 600 });
+
+// The layouts only pass tile view models through to their slots
+const media = {} as UserMediaViewModel;
+const spotlight = new SpotlightTileViewModel(
+  constant([]),
+  constant(false),
+  constant("solid"),
+);
+const tiles = (): GridTileViewModel[] =>
+  Array.from({ length: 3 }, () => new GridTileViewModel(constant(media)));
+
+function gridModel(): GridLayout {
+  return {
+    type: "grid",
+    spotlight,
+    grid: tiles(),
+    spotlightAlignment$: new BehaviorSubject<Alignment>({
+      inline: "end",
+      block: "end",
+    }),
+    setVisibleTiles: () => {},
+  };
+}
+
+function landscapeModel(): SpotlightLandscapeLayout {
+  return {
+    type: "spotlight-landscape",
+    spotlight,
+    grid: tiles(),
+    setVisibleTiles: () => {},
+  };
+}
+
+function portraitModel(): SpotlightPortraitLayout {
+  return {
+    type: "spotlight-portrait",
+    spotlight,
+    grid: tiles(),
+    setVisibleTiles: () => {},
+  };
+}
+
+// Slots record their drag callback so a test can drag them, and show the id
+// of the tile they hold
+const drags = new Map<string, DragCallback | undefined>();
+const Slot: LayoutProps<unknown, TileViewModel, HTMLDivElement>["Slot"] = ({
+  id,
+  model,
+  onDrag,
+  ...props
+}) => {
+  drags.set(id, onDrag);
+  return (
+    <div data-testid={`slot-${id}`} {...props}>
+      {model instanceof GridTileViewModel ? model.id : "spotlight"}
+    </div>
+  );
+};
+
+function slotIds(): string[] {
+  return screen
+    .getAllByTestId(/^slot-/)
+    .map((slot) => slot.textContent ?? "")
+    .filter((id) => id !== "spotlight");
+}

src/grid/CallLayout.ts

@@ -5,11 +5,11 @@ SPDX-License-Identifier: AGPL-3.0-only OR LicenseRef-Element-Commercial
 Please see LICENSE in the repository root for full details.
 */
 
-import { type Observable } from "rxjs";
 import { type ComponentType } from "react";
 
 import { type LayoutProps } from "./Grid";
 import { type TileViewModel } from "../state/TileViewModel";
+import { type Behavior } from "../state/Behavior";
 
 export interface Bounds {
   width: number;
@@ -20,7 +20,7 @@ export interface CallLayoutInputs {
   /**
    * The minimum bounds of the layout area.
    */
-  minBounds$: Observable<Bounds>;
+  minBounds$: Behavior<Bounds>;
 }
 
 export interface CallLayoutOutputs<Model> {

src/grid/GridLayout.tsx

@@ -11,14 +11,12 @@ import {
   useCallback,
   useMemo,
 } from "react";
-import { distinctUntilChanged } from "rxjs";
-import { useObservableEagerState } from "observable-hooks";
 
 import { type GridLayout as GridLayoutModel } from "../state/layout-types.ts";
 import styles from "./GridLayout.module.css";
-import { useInitial } from "../useInitial";
 import { type CallLayout, arrangeTiles } from "./CallLayout";
 import { type DragCallback, useUpdateLayout, useVisibleTiles } from "./Grid";
+import { useBehavior } from "../useBehavior";
 
 interface GridCSSProperties extends CSSProperties {
   "--gap": string;
@@ -39,22 +37,18 @@ export const makeGridLayout: CallLayout<GridLayoutModel> = ({
   // lives
   fixed: function GridLayoutFixed({ ref, model, Slot }): ReactNode {
     useUpdateLayout();
-    const alignment = useObservableEagerState(
-      useInitial(() =>
-        model.spotlightAlignment$.pipe(
-          distinctUntilChanged(
-            (a1, a2) => a1.block === a2.block && a1.inline === a2.inline,
-          ),
-        ),
-      ),
-    );
+    const alignment = useBehavior(model.spotlightAlignment$);
 
     const onDragSpotlight: DragCallback = useCallback(
-      ({ xRatio, yRatio }) =>
-        model.spotlightAlignment$.next({
-          block: yRatio < 0.5 ? "start" : "end",
-          inline: xRatio < 0.5 ? "start" : "end",
-        }),
+      ({ xRatio, yRatio }) => {
+        const block = yRatio < 0.5 ? "start" : "end";
+        const inline = xRatio < 0.5 ? "start" : "end";
+        // A drag reports the same alignment on every move; only a change is
+        // worth a re-render
+        const current = model.spotlightAlignment$.value;
+        if (current.block !== block || current.inline !== inline)
+          model.spotlightAlignment$.next({ block, inline });
+      },
       [model.spotlightAlignment$],
     );
 
@@ -78,7 +72,7 @@ export const makeGridLayout: CallLayout<GridLayoutModel> = ({
   scrolling: function GridLayout({ ref, model, Slot }): ReactNode {
     useUpdateLayout();
     useVisibleTiles(model.setVisibleTiles);
-    const { width, height: minHeight } = useObservableEagerState(minBounds$);
+    const { width, height: minHeight } = useBehavior(minBounds$);
     const { gap, tileWidth, tileHeight } = useMemo(
       () => arrangeTiles(width, minHeight, model.grid.length),
       [width, minHeight, model.grid.length],

src/grid/OneOnOneDesktopLayout.tsx

@@ -7,7 +7,6 @@ Please see LICENSE in the repository root for full details.
 */
 
 import { type ReactNode, useCallback, useMemo } from "react";
-import { useObservableEagerState } from "observable-hooks";
 import classNames from "classnames";
 
 import { type OneOnOneDesktopLayout as OneOnOneDesktopLayoutModel } from "../state/layout-types.ts";
@@ -37,7 +36,7 @@ export const makeOneOnOneDesktopLayout: CallLayout<
     Slot,
   }): ReactNode {
     useUpdateLayout();
-    const { width, height } = useObservableEagerState(minBounds$);
+    const { width, height } = useBehavior(minBounds$);
     const pipAlignment = useBehavior(model.pipAlignment$);
     const { tileWidth, tileHeight } = useMemo(
       () => arrangeTiles(width, height, 1),

src/grid/SpotlightLandscapeLayout.tsx

@@ -6,7 +6,6 @@ Please see LICENSE in the repository root for full details.
 */
 
 import { type FC, type ReactNode } from "react";
-import { useObservableEagerState } from "observable-hooks";
 import classNames from "classnames";
 
 import { type CallLayout } from "./CallLayout";
@@ -33,7 +32,7 @@ export const makeSpotlightLandscapeLayout: CallLayout<
     Slot,
   }): ReactNode {
     useUpdateLayout();
-    useObservableEagerState(minBounds$);
+    useBehavior(minBounds$);
 
     return (
       <div ref={ref} className={styles.layer}>
@@ -56,7 +55,7 @@ export const makeSpotlightLandscapeLayout: CallLayout<
   }): ReactNode {
     useUpdateLayout();
     useVisibleTiles(model.setVisibleTiles);
-    useObservableEagerState(minBounds$);
+    useBehavior(minBounds$);
 
     return (
       <div ref={ref} className={styles.layer}>

src/grid/SpotlightPortraitLayout.tsx

@@ -6,7 +6,6 @@ Please see LICENSE in the repository root for full details.
 */
 
 import { type ReactNode, type CSSProperties } from "react";
-import { useObservableEagerState } from "observable-hooks";
 import classNames from "classnames";
 
 import { type CallLayout, arrangeTiles } from "./CallLayout";
@@ -58,7 +57,7 @@ export const makeSpotlightPortraitLayout: CallLayout<
   }): ReactNode {
     useUpdateLayout();
     useVisibleTiles(model.setVisibleTiles);
-    const { width } = useObservableEagerState(minBounds$);
+    const { width } = useBehavior(minBounds$);
     const { gap, tileWidth, tileHeight } = arrangeTiles(
       width,
       // TODO: We pretend that the minimum height is the width, because the

src/index.css

@@ -7,10 +7,24 @@ Please see LICENSE in the repository root for full details.
 
 /* Styles for Element Call as a page of its own. The parts that apply wherever
 Element Call is shown live in base.css; these are about owning the document,
-and are not loaded when a host embeds Element Call as a component. */
+and are not loaded when a host embeds Element Call as a component.
+
+That includes Compound: the page brings the design tokens, the component styles
+and their fonts, where a host embedding the component supplies its own. The
+`compound` layers are ordered by base.css. */
 
 @import url("./base.css");
 
+@import url("@fontsource/inter/400.css");
+@import url("@fontsource/inter/500.css");
+@import url("@fontsource/inter/600.css");
+@import url("@fontsource/inter/700.css");
+@import url("@fontsource/inconsolata/400.css");
+@import url("@fontsource/inconsolata/700.css");
+
+@import url("@vector-im/compound-design-tokens/assets/web/css/compound-design-tokens.css") layer(compound);
+@import url("@vector-im/compound-web/dist/style.css") layer(compound.components);
+
 body {
   background-color: var(--cpd-color-bg-canvas-default);
   color: var(--cpd-color-text-primary);

src/livekit/MatrixAudioRenderer.test.tsx

@@ -24,6 +24,7 @@ import { testAudioContext } from "../useAudioContext.test";
 import * as MediaDevicesContext from "../MediaDevicesContext";
 import { LivekitRoomAudioRenderer } from "./MatrixAudioRenderer";
 import {
+  exampleTransportLocator,
   mockLocalParticipant,
   mockMediaDevices,
   mockRemoteParticipant,
@@ -118,7 +119,7 @@ function renderTestComponent(
       <LivekitRoomAudioRenderer
         validIdentities={participants.map((p) => p.identity)}
         livekitRoom={livekitRoom}
-        url={""}
+        transport={exampleTransportLocator}
       />
     </MediaDevicesProvider>,
   );
@@ -150,7 +151,7 @@ it("should not render or warn for the local participant", () => {
       <LivekitRoomAudioRenderer
         validIdentities={[]}
         livekitRoom={{ remoteParticipants: new Map() } as unknown as Room}
-        url={""}
+        transport={exampleTransportLocator}
       />
     </MediaDevicesProvider>,
   );
@@ -177,7 +178,7 @@ it("should warn only once per unexpected participant", () => {
       <LivekitRoomAudioRenderer
         validIdentities={[]}
         livekitRoom={{ remoteParticipants: new Map() } as unknown as Room}
-        url={""}
+        transport={exampleTransportLocator}
       />
     </MediaDevicesProvider>,
   );

src/livekit/MatrixAudioRenderer.tsx

@@ -19,12 +19,10 @@ import { logger as rootLogger } from "matrix-js-sdk/lib/logger";
 import { useEarpieceAudioConfig } from "../MediaDevicesContext";
 import { useReactiveState } from "../useReactiveState";
 import * as controls from "../controls";
+import { type TransportLocator } from "./auth";
 
 export interface MatrixAudioRendererProps {
-  /**
-   * The service URL of the LiveKit room.
-   */
-  url: string;
+  transport: TransportLocator;
   livekitRoom: LivekitRoom;
   /**
    * The list of participant identities to render audio for.
@@ -54,7 +52,7 @@ export interface MatrixAudioRendererProps {
  * @public
  */
 export function LivekitRoomAudioRenderer({
-  url,
+  transport,
   livekitRoom,
   validIdentities,
   muted,
@@ -88,7 +86,7 @@ export function LivekitRoomAudioRenderer({
         warnedIdentities.current.add(identity);
         // Log that there is an invalid identity, that means that someone is publishing audio that is not expected to be in the call.
         logger.warn(
-          `Audio track ${identity} from ${url} has no matching matrix call member`,
+          `Audio track ${identity} from ${JSON.stringify(transport)} has no matching matrix call member`,
           `current members: ${validIdentities.join()}`,
           `track will not get rendered`,
         );

src/livekit/TrackProcessorContext.tsx

@@ -20,8 +20,7 @@ import {
 } from "react";
 import { type LocalVideoTrack } from "livekit-client";
 import { logger } from "matrix-js-sdk/lib/logger";
-import { combineLatest, map, type Observable } from "rxjs";
-import { useObservable } from "observable-hooks";
+import { combineLatest } from "rxjs";
 
 import {
   backgroundBlur as backgroundBlurSettings,
@@ -31,6 +30,7 @@ import { BlurBackgroundTransformer } from "./BlurBackgroundTransformer";
 import { type Behavior } from "../state/Behavior";
 import { type ObservableScope } from "../state/ObservableScope";
 import { platform } from "../Platform";
+import { useValueBehavior } from "../useValueBehavior";
 
 //TODO-MULTI-SFU: This is not yet fully there.
 // it is a combination of exposing observable and react hooks.
@@ -52,18 +52,8 @@ export function useTrackProcessor(): ProcessorState {
   return state;
 }
 
-export function useTrackProcessorObservable$(): Observable<ProcessorState> {
-  const state = use(ProcessorContext);
-  if (state === undefined)
-    throw new Error(
-      "useTrackProcessor must be used within a ProcessorProvider",
-    );
-  const state$ = useObservable(
-    (init$) => init$.pipe(map(([init]) => init)),
-    [state],
-  );
-
-  return state$;
+export function useTrackProcessorState$(): Behavior<ProcessorState> {
+  return useValueBehavior(useTrackProcessor());
 }
 
 /**

src/livekit/auth/csApi.ts

@@ -0,0 +1,137 @@
+/*
+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 { ConnectionError, HTTPError, type MatrixClient } from "matrix-js-sdk";
+import { type CallMembershipIdentityParts } from "matrix-js-sdk/lib/matrixrtc/EncryptionManager";
+
+import { extractFullConfigFromToken, type SFUConfig } from "./types.ts";
+import { doNetworkOperationWithRetry } from "../../utils/matrix.ts";
+
+/**
+ * In widget mode the host may refuse an action before any request is made
+ * which surfaces as a plain error. Asking again cannot change its answer,
+ * so only errors from the network are worth retrying.
+ */
+function isNetworkError(e: unknown): boolean {
+  return e instanceof HTTPError || e instanceof ConnectionError;
+}
+
+export type ClientGetTokenParts = Pick<
+  MatrixClient,
+  "_unstable_getLivekitToken"
+>;
+
+export interface GetSFUConfigParams {
+  /**
+   * The Matrix client.
+   */
+  client: ClientGetTokenParts;
+  /**
+   * Data identifying the local user's session membership.
+   */
+  membership: CallMembershipIdentityParts;
+  /**
+   * The WebSocket URL of the SFU for which we wish to get an access token.
+   */
+  url: string;
+  /**
+   * The name of the homeserver to which the SFU belongs.
+   */
+  serverName: string;
+  /**
+   * The ID of the Matrix room in which the session takes place.
+   */
+  roomId: string;
+  /**
+   * The ID of the MatrixRTC slot in which the session takes place.
+   */
+  slotId: string;
+}
+
+/**
+ * Gets an {@link SFUConfig} appropriate for connecting to a given SFU, using
+ * the MSC4195 LiveKit client-server API endpoints.
+ */
+export async function getSFUConfig({
+  client,
+  membership,
+  url,
+  serverName,
+  roomId,
+  slotId,
+}: GetSFUConfigParams): Promise<SFUConfig> {
+  const res = await doNetworkOperationWithRetry(
+    async () =>
+      client._unstable_getLivekitToken({
+        url,
+        server_name: serverName,
+        room_id: roomId,
+        slot_id: slotId,
+        member_id: membership.memberId,
+      }),
+    isNetworkError,
+  );
+  return extractFullConfigFromToken({ url, jwt: res.jwt });
+}
+
+export type ClientDelegationParts = Pick<
+  MatrixClient,
+  "_unstable_delegateDelayedLeave" | "baseUrl"
+>;
+
+export interface DelegateDelayedLeaveParams {
+  /**
+   * The Matrix client.
+   */
+  client: ClientDelegationParts;
+  /**
+   * Data identifying the local user's session membership.
+   */
+  membership: CallMembershipIdentityParts;
+  /**
+   * The WebSocket URL of the SFU to which we are publishing and wish to
+   * delegate the delayed leave event.
+   */
+  url: string;
+  /**
+   * The ID of the Matrix room in which the session takes place.
+   */
+  roomId: string;
+  /**
+   * The ID of the MatrixRTC slot in which the session takes place.
+   */
+  slotId: string;
+  /**
+   * The delay ID of the leave event to be delegated.
+   */
+  delayId: string;
+}
+
+/**
+ * Delegates a delayed leave event to a given SFU, so that the event will
+ * be sent on our behalf whenever we disconnect from the SFU.
+ */
+export async function delegateDelayedLeave({
+  client,
+  membership,
+  url,
+  roomId,
+  slotId,
+  delayId,
+}: DelegateDelayedLeaveParams): Promise<void> {
+  await doNetworkOperationWithRetry(
+    async () =>
+      client._unstable_delegateDelayedLeave({
+        url,
+        room_id: roomId,
+        slot_id: slotId,
+        member_id: membership.memberId,
+        delay_id: delayId,
+      }),
+    isNetworkError,
+  );
+}

src/livekit/auth/index.test.ts

@@ -0,0 +1,306 @@
+/*
+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, type Mocked, vi, describe, it } from "vitest";
+import { type UnstableLivekitTransport } from "matrix-js-sdk/lib/matrixrtc";
+import { logger } from "matrix-js-sdk/lib/logger";
+
+import {
+  aliceDeviceId,
+  aliceId,
+  aliceUserId,
+  createJWTToken,
+} from "../../utils/test-fixtures";
+import type * as csApi from "./csApi";
+import * as openID from "./openID";
+import { delegateDelayedLeave, getSFUConfig } from ".";
+import { mocked } from "storybook/test";
+import { ConnectionError, MatrixError } from "matrix-js-sdk";
+import { NoMatrix2AuthorizationService } from "../../utils/errors";
+import { type CallMembershipIdentityParts } from "matrix-js-sdk/lib/matrixrtc/EncryptionManager";
+
+vi.mock("./openID", () => ({ getSFUConfig: vi.fn() }));
+vi.useFakeTimers();
+
+const csApiJWTToken = createJWTToken(aliceId, "via CS API");
+const openIDJWTToken = createJWTToken(aliceId, "via OpenID");
+
+mocked(openID).getSFUConfig.mockResolvedValue({
+  url: "mock-openID-url",
+  jwt: openIDJWTToken,
+  livekitAlias: "via OpenID",
+  livekitIdentity: aliceId,
+});
+
+const client: Mocked<
+  csApi.ClientGetTokenParts &
+    csApi.ClientDelegationParts &
+    openID.ClientOpenIDParts
+> = {
+  baseUrl: "https://matrix.example.org",
+  _unstable_getLivekitToken: vi.fn().mockResolvedValue({ jwt: csApiJWTToken }),
+  _unstable_delegateDelayedLeave: vi.fn().mockResolvedValue({}),
+  getOpenIdToken: vi
+    .fn()
+    .mockResolvedValue({ access_token: "mock-openID-token" }),
+};
+
+const membership: CallMembershipIdentityParts = {
+  userId: aliceUserId,
+  deviceId: aliceDeviceId,
+  memberId: "123",
+};
+
+const roomId = "!room:example.org";
+const slotId = "m.call#ROOM";
+
+const unsupportedError = new MatrixError({ errcode: "M_UNSUPPORTED" }, 404);
+
+const urlTransport: UnstableLivekitTransport = {
+  type: "livekit",
+  url: "wss://livekit.example.org",
+};
+
+const serviceUrlTransport: UnstableLivekitTransport = {
+  type: "livekit",
+  livekit_service_url: "https://livekit-jwt.example.org",
+};
+
+const urlAndServiceUrlTransport: UnstableLivekitTransport = {
+  ...urlTransport,
+  ...serviceUrlTransport,
+};
+
+afterEach(() => vi.clearAllMocks());
+
+describe("getSFUConfig", () => {
+  const defaultParams = {
+    client,
+    membership,
+    serverName: "example.org",
+    role: "subscriber" as const,
+    roomId,
+    slotId,
+    logger,
+  };
+
+  it("uses CS API with url transport", async () => {
+    expect(
+      await getSFUConfig({ ...defaultParams, transport: urlTransport }),
+    ).toEqual(
+      expect.objectContaining({
+        jwt: csApiJWTToken,
+        livekitAlias: "via CS API",
+      }),
+    );
+    expect(client._unstable_getLivekitToken).toHaveBeenCalled();
+    expect(openID.getSFUConfig).not.toHaveBeenCalled();
+  });
+
+  it("does not fall back to OpenID with url transport", async () => {
+    client._unstable_getLivekitToken.mockRejectedValueOnce(unsupportedError);
+    await expect(
+      getSFUConfig({ ...defaultParams, transport: urlTransport }),
+    ).rejects.toThrow(expect.any(NoMatrix2AuthorizationService));
+    expect(client._unstable_getLivekitToken).toHaveBeenCalled();
+    expect(openID.getSFUConfig).not.toHaveBeenCalled();
+  });
+
+  it("uses OpenID with livekit_service_url transport", async () => {
+    expect(
+      await getSFUConfig({ ...defaultParams, transport: serviceUrlTransport }),
+    ).toEqual(
+      expect.objectContaining({
+        jwt: openIDJWTToken,
+        livekitAlias: "via OpenID",
+      }),
+    );
+    expect(client._unstable_getLivekitToken).not.toHaveBeenCalled();
+    expect(openID.getSFUConfig).toHaveBeenCalled();
+  });
+
+  it("uses CS API with url + livekit_service_url transport", async () => {
+    expect(
+      await getSFUConfig({
+        ...defaultParams,
+        transport: urlAndServiceUrlTransport,
+      }),
+    ).toEqual(
+      expect.objectContaining({
+        jwt: csApiJWTToken,
+        livekitAlias: "via CS API",
+      }),
+    );
+    expect(client._unstable_getLivekitToken).toHaveBeenCalled();
+    expect(openID.getSFUConfig).not.toHaveBeenCalled();
+  });
+
+  it("falls back to OpenID with url + livekit_service_url transport", async () => {
+    client._unstable_getLivekitToken.mockRejectedValueOnce(unsupportedError);
+    expect(
+      await getSFUConfig({
+        ...defaultParams,
+        transport: urlAndServiceUrlTransport,
+      }),
+    ).toEqual(
+      expect.objectContaining({
+        jwt: openIDJWTToken,
+        livekitAlias: "via OpenID",
+      }),
+    );
+    expect(client._unstable_getLivekitToken).toHaveBeenCalled();
+    expect(openID.getSFUConfig).toHaveBeenCalled();
+  });
+
+  it("falls back to OpenID when the widget host refuses the CS API", async () => {
+    // In widget mode a host without MSC4533 rejects the request before it
+    // reaches the homeserver, with a plain error rather than a Matrix error
+    client._unstable_getLivekitToken.mockRejectedValueOnce(
+      new Error(
+        "The rtc_livekit_get_token action is not supported by the client.",
+      ),
+    );
+    expect(
+      await getSFUConfig({
+        ...defaultParams,
+        transport: urlAndServiceUrlTransport,
+      }),
+    ).toEqual(expect.objectContaining({ jwt: openIDJWTToken }));
+    expect(openID.getSFUConfig).toHaveBeenCalled();
+  });
+
+  it("surfaces the widget host's refusal with url transport", async () => {
+    const error = new Error(
+      "The rtc_livekit_get_token action is not supported by the client.",
+    );
+    client._unstable_getLivekitToken.mockRejectedValueOnce(error);
+    await expect(
+      getSFUConfig({ ...defaultParams, transport: urlTransport }),
+    ).rejects.toThrow(error);
+    expect(openID.getSFUConfig).not.toHaveBeenCalled();
+  });
+
+  it("uses CS API when publishing with url transport", async () => {
+    expect(
+      await getSFUConfig({
+        ...defaultParams,
+        transport: urlTransport,
+        role: "publisher",
+      }),
+    ).toEqual(expect.objectContaining({ jwt: csApiJWTToken }));
+    expect(client._unstable_getLivekitToken).toHaveBeenCalled();
+    expect(openID.getSFUConfig).not.toHaveBeenCalled();
+  });
+
+  it("does not fall back to OpenID when publishing", async () => {
+    client._unstable_getLivekitToken.mockRejectedValueOnce(unsupportedError);
+    await expect(
+      getSFUConfig({
+        ...defaultParams,
+        transport: urlTransport,
+        role: "publisher",
+      }),
+    ).rejects.toThrow(expect.any(NoMatrix2AuthorizationService));
+    expect(client._unstable_getLivekitToken).toHaveBeenCalled();
+    expect(openID.getSFUConfig).not.toHaveBeenCalled();
+  });
+
+  it("uses OpenID when publishing with url + livekit_service_url transport", async () => {
+    // Subscribers predating MSC4195 expect a legacy participant identity from
+    // anyone advertising a state event, which only the JWT service assigns
+    expect(
+      await getSFUConfig({
+        ...defaultParams,
+        transport: urlAndServiceUrlTransport,
+        role: "publisher",
+      }),
+    ).toEqual(
+      expect.objectContaining({
+        jwt: openIDJWTToken,
+        livekitAlias: "via OpenID",
+      }),
+    );
+    expect(client._unstable_getLivekitToken).not.toHaveBeenCalled();
+    expect(openID.getSFUConfig).toHaveBeenCalledWith(
+      expect.objectContaining({ role: "publisher" }),
+    );
+  });
+
+  it("does not fall back to OpenID on connection error", async () => {
+    const client_ = {
+      ...client,
+      _unstable_getLivekitToken: vi
+        .fn()
+        .mockRejectedValue(new ConnectionError("No connection")),
+    };
+    await Promise.all([
+      expect(
+        getSFUConfig({
+          ...defaultParams,
+          client: client_,
+          transport: urlAndServiceUrlTransport,
+        }),
+      ).rejects.toThrow(expect.any(ConnectionError)),
+      vi.runAllTimersAsync(), // Allow request to be retried
+    ]);
+    expect(client_._unstable_getLivekitToken).toHaveBeenCalled();
+    expect(openID.getSFUConfig).not.toHaveBeenCalled();
+  });
+});
+
+describe("delegateDelayedLeave", () => {
+  const defaultParams = {
+    client,
+    membership,
+    roomId,
+    slotId,
+    delayId: "delay123",
+    logger,
+  };
+
+  it("uses CS API with url transport", async () => {
+    await delegateDelayedLeave({ ...defaultParams, transport: urlTransport });
+    expect(client._unstable_delegateDelayedLeave).toHaveBeenCalled();
+    expect(openID.getSFUConfig).not.toHaveBeenCalled();
+  });
+
+  it("does not fall back to OpenID with url transport", async () => {
+    client._unstable_delegateDelayedLeave.mockRejectedValueOnce(
+      unsupportedError,
+    );
+    await expect(
+      delegateDelayedLeave({ ...defaultParams, transport: urlTransport }),
+    ).rejects.toThrow();
+    expect(client._unstable_delegateDelayedLeave).toHaveBeenCalled();
+    expect(openID.getSFUConfig).not.toHaveBeenCalled();
+  });
+
+  it("uses OpenID with livekit_service_url transport", async () => {
+    await delegateDelayedLeave({
+      ...defaultParams,
+      transport: serviceUrlTransport,
+    });
+    expect(client._unstable_delegateDelayedLeave).not.toHaveBeenCalled();
+    expect(openID.getSFUConfig).toHaveBeenCalled();
+  });
+
+  it("uses OpenID with url + livekit_service_url transport", async () => {
+    // Must match the flow that got the token, so the identities line up
+    await delegateDelayedLeave({
+      ...defaultParams,
+      transport: urlAndServiceUrlTransport,
+    });
+    expect(client._unstable_delegateDelayedLeave).not.toHaveBeenCalled();
+    expect(openID.getSFUConfig).toHaveBeenCalledWith(
+      expect.objectContaining({
+        role: "publisher",
+        delayId: "delay123",
+        delayEndpointBaseUrl: client.baseUrl,
+      }),
+    );
+  });
+});

src/livekit/auth/index.ts

@@ -0,0 +1,253 @@
+/*
+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 { type CallMembershipIdentityParts } from "matrix-js-sdk/lib/matrixrtc/EncryptionManager";
+import { type Logger } from "matrix-js-sdk/lib/logger";
+
+import { ConnectionError, MatrixError } from "matrix-js-sdk";
+import { type UnstableLivekitTransport } from "matrix-js-sdk/lib/matrixrtc";
+import * as openID from "./openID";
+import * as csApi from "./csApi";
+import { type SFUConfig } from "./types";
+import { NoMatrix2AuthorizationService } from "../../utils/errors";
+
+export type { ClientOpenIDParts } from "./openID";
+export type { ClientGetTokenParts, ClientDelegationParts } from "./csApi";
+export type * from "./types";
+
+/**
+ * Checks whether an error means "this homeserver does not implement the
+ * (unstable) MSC4195 endpoints".
+ *
+ * MSC4195 documents `M_NOT_FOUND` for this, but a homeserver without support
+ * answers with whatever it uses for unknown endpoints (Synapse: 404 with
+ * `M_UNRECOGNIZED`), so we accept any 404 as "unsupported".
+ * @param e The error to check.
+ */
+function isEndpointUnsupported(e: unknown): boolean {
+  return (
+    e instanceof MatrixError &&
+    (e.httpStatus === 404 ||
+      e.errcode === "M_NOT_FOUND" ||
+      e.errcode === "M_UNRECOGNIZED")
+  );
+}
+
+/**
+ * Checks whether an error means the MSC4195 CS API cannot be used from here:
+ * the homeserver does not implement it, or the request never reached the
+ * homeserver because in widget mode the host does not expose the endpoint
+ * (MSC4533), which the widget API reports as a plain error rather than a
+ * Matrix error. A connection error is neither, as the endpoint may well exist.
+ * @param e The error to check.
+ */
+export function isCsApiUnavailable(e: unknown): boolean {
+  if (isEndpointUnsupported(e)) return true;
+  return !(e instanceof MatrixError) && !(e instanceof ConnectionError);
+}
+
+export interface GetSFUConfigParams {
+  /**
+   * The Matrix client.
+   */
+  client: csApi.ClientGetTokenParts & openID.ClientOpenIDParts;
+  /**
+   * Data identifying the local user's session membership.
+   */
+  membership: CallMembershipIdentityParts;
+  /**
+   * The transport for which we wish to get an access token.
+   */
+  transport: UnstableLivekitTransport;
+  /**
+   * The name of the homeserver to which the {@link transport} belongs.
+   */
+  serverName: string;
+  /**
+   * The ID of the Matrix room in which the session takes place.
+   */
+  roomId: string;
+  /**
+   * The ID of the MatrixRTC slot in which the session takes place.
+   */
+  slotId: string;
+  /**
+   * Whether we want to publish or only subscribe on the {@link transport}.
+   */
+  role: "publisher" | "subscriber";
+  logger: Logger;
+}
+
+/**
+ * Gets an {@link SFUConfig} appropriate for connecting to a given transport.
+ */
+export async function getSFUConfig({
+  client,
+  membership,
+  transport,
+  serverName,
+  roomId,
+  slotId,
+  role,
+  logger,
+}: GetSFUConfigParams): Promise<SFUConfig> {
+  const viaOpenID = async (serviceUrl: string): Promise<SFUConfig> =>
+    await openID.getSFUConfig({
+      client,
+      membership,
+      serviceUrl,
+      roomId,
+      slotId,
+      role,
+      logger,
+    });
+
+  const flow = chooseAuthFlow(transport, role);
+  if (flow.kind === "openID") return await viaOpenID(flow.serviceUrl);
+
+  try {
+    return await csApi.getSFUConfig({
+      client,
+      membership,
+      url: flow.url,
+      serverName,
+      roomId,
+      slotId,
+    });
+  } catch (e) {
+    // Publishers should never fall back. If a homeserver advertises a `url`
+    // but doesn't support MSC4195 itself, that's a misconfiguration which
+    // the admin should know about so they can prepare for the future
+    // deprecation of `livekit_service_url`.
+    const mayFallBack =
+      role === "subscriber" && "livekit_service_url" in transport;
+    if (mayFallBack && isCsApiUnavailable(e)) {
+      logger.warn(
+        `Cannot use the MSC4195 get_token endpoint (${e}), falling back to the OpenID flow with service ${transport.livekit_service_url}`,
+      );
+      return await viaOpenID(transport.livekit_service_url);
+    }
+    if (isEndpointUnsupported(e)) {
+      logger.error(
+        `Homeserver does not support the MSC4195 get_token endpoint, cannot get token for transport ${flow.url}`,
+      );
+      throw new NoMatrix2AuthorizationService(e as Error);
+    }
+    throw e;
+  }
+}
+
+export interface DelegateDelayedLeaveParams {
+  /**
+   * The Matrix client.
+   */
+  client: csApi.ClientDelegationParts & openID.ClientOpenIDParts;
+  /**
+   * Data identifying the local user's session membership.
+   */
+  membership: CallMembershipIdentityParts;
+  /**
+   * The transport to which we are publishing and wish to delegate the delayed
+   * leave event.
+   */
+  transport: UnstableLivekitTransport;
+  /**
+   * The ID of the Matrix room in which the session takes place.
+   */
+  roomId: string;
+  /**
+   * The ID of the MatrixRTC slot in which the session takes place.
+   */
+  slotId: string;
+  /**
+   * The delay ID of the leave event to be delegated.
+   */
+  delayId: string;
+  logger: Logger;
+}
+
+/**
+ * Delegates a delayed leave event to a given transport, so that the event will
+ * be sent on our behalf whenever we disconnect from the transport's SFU.
+ */
+export async function delegateDelayedLeave({
+  client,
+  membership,
+  transport,
+  roomId,
+  slotId,
+  delayId,
+  logger,
+}: DelegateDelayedLeaveParams): Promise<void> {
+  // It's important that we use the same flow (CS API or OpenID) as whatever we
+  // would've used to get a JWT token for this transport, since the participant
+  // identity computed by the service needs to match.
+  const flow = chooseAuthFlow(transport, "publisher");
+  if (flow.kind === "csApi") {
+    try {
+      await csApi.delegateDelayedLeave({
+        client,
+        membership,
+        url: flow.url,
+        roomId,
+        slotId,
+        delayId,
+      });
+    } catch (e) {
+      if (isEndpointUnsupported(e))
+        logger.error(
+          "Server misconfigured: transport contains a 'url' field but server does not support the MSC4195 delegate_delayed_leave endpoint",
+        );
+      throw e;
+    }
+  } else {
+    // 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 openID.getSFUConfig({
+      client,
+      membership,
+      serviceUrl: flow.serviceUrl,
+      roomId,
+      slotId,
+      role: "publisher",
+      delayEndpointBaseUrl: client.baseUrl,
+      delayId,
+      logger,
+    });
+  }
+}
+
+/**
+ * The flow with which the local member authenticates against a transport.
+ */
+export type AuthFlow =
+  | { kind: "csApi"; url: string }
+  | { kind: "openID"; serviceUrl: string };
+
+/**
+ * Chooses between the MSC4195 CS API and the legacy OpenID flow against the
+ * transport's JWT service.
+ *
+ * Only the JWT service's `/sfu/get` endpoint assigns the legacy participant
+ * identity that clients predating MSC4195 expect from anyone advertising a
+ * membership state event. So a publisher keeps using the JWT service wherever
+ * the transport still offers one, even if it also has a `url`. Subscribers may
+ * use the CS API regardless, as nobody matches their identity.
+ * @param transport The transport to authenticate against.
+ * @param role Whether we want to publish or only subscribe on the transport.
+ */
+export function chooseAuthFlow(
+  transport: UnstableLivekitTransport,
+  role: "publisher" | "subscriber",
+): AuthFlow {
+  if ("url" in transport) {
+    const useCsApi =
+      !("livekit_service_url" in transport) || role === "subscriber";
+    if (useCsApi) return { kind: "csApi", url: transport.url };
+  }
+  return { kind: "openID", serviceUrl: transport.livekit_service_url };
+}

src/livekit/auth/openID.test.ts

@@ -0,0 +1,230 @@
+/*
+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 {
+  beforeEach,
+  afterEach,
+  describe,
+  expect,
+  it,
+  type MockedObject,
+  vitest,
+} from "vitest";
+import fetchMock from "fetch-mock";
+import { MatrixError } from "matrix-js-sdk";
+
+import {
+  getSFUConfig,
+  type GetSFUConfigParams,
+  type ClientOpenIDParts,
+} from "./openID";
+import { testJWTToken } from "../../utils/test-fixtures";
+import { ownMemberMock } from "../../utils/test";
+import { FailToGetOpenIdToken } from "../../utils/errors";
+import { logger } from "matrix-js-sdk/lib/logger";
+
+const serviceUrl = "https://sfu.example.org";
+
+const delayParams = {
+  delayEndpointBaseUrl: "https://matrix.homeserverserver.org",
+  delayId: "mock_delay_id",
+};
+
+describe("getSFUConfig", () => {
+  let matrixClient: MockedObject<ClientOpenIDParts>;
+  let params: GetSFUConfigParams;
+  beforeEach(() => {
+    fetchMock.catch(404);
+    matrixClient = { getOpenIdToken: vitest.fn() };
+    params = {
+      client: matrixClient,
+      membership: ownMemberMock,
+      serviceUrl: "https://sfu.example.org",
+      roomId: "!example_room_id",
+      slotId: "m.call#ROOM",
+      role: "publisher",
+      logger,
+    };
+  });
+  afterEach(async () => {
+    void (await fetchMock.flush());
+    vitest.clearAllMocks();
+    fetchMock.reset();
+  });
+
+  it("should handle fetching a token", async () => {
+    fetchMock.post("https://sfu.example.org/sfu/get", () => {
+      return {
+        status: 200,
+        body: { url: serviceUrl, jwt: testJWTToken },
+      };
+    });
+    const config = await getSFUConfig(params);
+    expect(config).toEqual({
+      jwt: testJWTToken,
+      url: serviceUrl,
+      livekitIdentity: "@me:example.org:ABCDEF",
+      livekitAlias: "!example_room_id",
+    });
+  });
+
+  it("should fail if the SFU errors", async () => {
+    fetchMock.post("https://sfu.example.org/sfu/get", () => {
+      return {
+        status: 500,
+        body: {
+          errcode: "M_LOOKUP_FAILED",
+          error: "Failed to look up user info from homeserver",
+        },
+      };
+    });
+    try {
+      await getSFUConfig(params);
+    } catch (ex: unknown) {
+      expect(ex).toBeInstanceOf(FailToGetOpenIdToken);
+      expect((ex as FailToGetOpenIdToken).cause).toBeInstanceOf(MatrixError);
+      const mxError = (ex as Error).cause as MatrixError;
+      expect(mxError.message).toEqual(
+        "MatrixError: [500] Failed to look up user info from homeserver",
+      );
+
+      return;
+    }
+    expect.fail("Expected test to throw;");
+  });
+
+  it("should retry without delay params if the JWT service legacy endpoint returns M_BAD_JSON 400", async () => {
+    let callCount = 0;
+
+    fetchMock.post(
+      "https://sfu.example.org/sfu/get",
+      (url, opts) => {
+        callCount++;
+        const body = JSON.parse(opts.body as string);
+
+        // First call: check if it has delay parts and return 400
+        if (callCount === 1) {
+          expect(body).toHaveProperty("delay_id", "mock_delay_id");
+          return {
+            status: 400,
+            body: { errcode: "M_BAD_JSON", error: "Unsupported parameters" },
+          };
+        }
+
+        // Second call: check if delay parts were stripped and return success
+        expect(body).not.toHaveProperty("delay_id");
+        expect(body).not.toHaveProperty("delay_timeout");
+        expect(body).not.toHaveProperty("delay_cs_api_url");
+
+        return {
+          status: 200,
+          body: { url: serviceUrl, jwt: testJWTToken },
+        };
+      },
+      { overwriteRoutes: true },
+    );
+
+    // Note: Assuming getSFUConfig eventually calls getLiveKitJWT
+    const config = await getSFUConfig({ ...params, ...delayParams });
+
+    expect(config.jwt).toBe(testJWTToken);
+    expect(callCount).toBe(2);
+  });
+
+  it("should successfully send delay parameters to the JWT service legacy endpoint", async () => {
+    fetchMock.post(
+      "https://sfu.example.org/sfu/get",
+      (url, opts) => {
+        const body = JSON.parse(opts.body as string);
+
+        // Verify, that the request contains the expected delay parameters
+        if (
+          body.delay_id === "mock_delay_id" &&
+          body.delay_timeout === 3600000 &&
+          body.delay_cs_api_url === "https://matrix.homeserverserver.org"
+        ) {
+          return {
+            status: 200,
+            body: { url: serviceUrl, jwt: testJWTToken },
+          };
+        }
+        return {
+          status: 400,
+          body: { error: "Missing expected delay params" },
+        };
+      },
+      { overwriteRoutes: true },
+    );
+
+    const config = await getSFUConfig({ ...params, ...delayParams });
+
+    // Prüfe das Ergebnis
+    expect(config).toMatchObject({
+      jwt: testJWTToken,
+      url: serviceUrl,
+    });
+  });
+
+  it("should use the default endpoint when subscribing", async () => {
+    fetchMock.post("https://sfu.example.org/get_token", (url, opts) => {
+      const body = JSON.parse(opts.body as string);
+      expect(body).toMatchObject({
+        room_id: "!example_room_id",
+        slot_id: "m.call#ROOM",
+        member: {
+          id: ownMemberMock.memberId,
+          claimed_user_id: ownMemberMock.userId,
+          claimed_device_id: ownMemberMock.deviceId,
+        },
+      });
+      return { status: 200, body: { url: serviceUrl, jwt: testJWTToken } };
+    });
+    const config = await getSFUConfig({ ...params, role: "subscriber" });
+    expect(config.jwt).toBe(testJWTToken);
+    expect(fetchMock.called("https://sfu.example.org/sfu/get")).toBe(false);
+  });
+
+  it("should fail when subscribing if the default endpoint is missing", async () => {
+    // Nothing but the catch-all 404 answers the default endpoint. Subscribers
+    // must not fall back to the legacy endpoint, which would hand them a
+    // legacy identity.
+    await expect(
+      getSFUConfig({ ...params, role: "subscriber" }),
+    ).rejects.toThrow(FailToGetOpenIdToken);
+    expect(fetchMock.called("https://sfu.example.org/get_token")).toBe(true);
+    expect(fetchMock.called("https://sfu.example.org/sfu/get")).toBe(false);
+  });
+
+  it("should retry fetching the openid token", async () => {
+    let count = 0;
+    matrixClient.getOpenIdToken.mockImplementation(async () => {
+      count++;
+      if (count < 2) {
+        throw Error("Test failure");
+      }
+      return Promise.resolve({
+        token_type: "Bearer",
+        access_token: "foobar",
+        matrix_server_name: "example.org",
+        expires_in: 30,
+      });
+    });
+    fetchMock.post("https://sfu.example.org/sfu/get", () => {
+      return {
+        status: 200,
+        body: { url: serviceUrl, jwt: testJWTToken },
+      };
+    });
+    const config = await getSFUConfig({ ...params, ...delayParams });
+    expect(config).toEqual({
+      jwt: testJWTToken,
+      url: serviceUrl,
+      livekitIdentity: "@me:example.org:ABCDEF",
+      livekitAlias: "!example_room_id",
+    });
+  });
+});

src/livekit/auth/openID.ts

@@ -0,0 +1,262 @@
+/*
+Copyright 2023, 2024 New Vector Ltd.
+
+SPDX-License-Identifier: AGPL-3.0-only OR LicenseRef-Element-Commercial
+Please see LICENSE in the repository root for full details.
+*/
+
+import {
+  type IOpenIDToken,
+  type MatrixClient,
+  parseErrorResponse,
+} from "matrix-js-sdk";
+import { type CallMembershipIdentityParts } from "matrix-js-sdk/lib/matrixrtc/EncryptionManager";
+import { type Logger } from "matrix-js-sdk/lib/logger";
+
+import { FailToGetOpenIdToken } from "../../utils/errors";
+import { doNetworkOperationWithRetry } from "../../utils/matrix";
+import { Config } from "../../config/Config";
+import { extractFullConfigFromToken, type SFUConfig } from "./types";
+
+// The bits we need from MatrixClient
+export type ClientOpenIDParts = Pick<MatrixClient, "getOpenIdToken">;
+
+export interface GetSFUConfigParams {
+  client: ClientOpenIDParts;
+  /**
+   * Data identifying the local user's session membership.
+   */
+  membership: CallMembershipIdentityParts;
+  /**
+   * The base URL of the LiveKit JWT service.
+   */
+  serviceUrl: string;
+  /**
+   * The ID of the Matrix room in which the session takes place.
+   */
+  roomId: string;
+  /**
+   * The ID of the MatrixRTC slot in which the session takes place.
+   */
+  slotId: string;
+  /**
+   * Whether we want to publish or only subscribe on the {@link transport}.
+   */
+  role: "publisher" | "subscriber";
+  /**
+   * The base URL of the Matrix homeserver, for delayed leave delegation.
+   */
+  delayEndpointBaseUrl?: string;
+  /**
+   * The delay ID of the leave event to be delegated to the JWT service.
+   */
+  delayId?: string;
+  logger: Logger;
+}
+
+/**
+ * Gets an {@link SFUConfig} appropriate for connecting to the SFU behind a
+ * given service URL, using the legacy OpenID flow.
+ * @throws {@link FailToGetOpenIdToken}
+ */
+export async function getSFUConfig({
+  client,
+  membership,
+  serviceUrl,
+  roomId,
+  slotId,
+  role,
+  delayEndpointBaseUrl,
+  delayId,
+  logger,
+}: GetSFUConfigParams): Promise<SFUConfig> {
+  let openIdToken: IOpenIDToken;
+  try {
+    openIdToken = await doNetworkOperationWithRetry(async () =>
+      client.getOpenIdToken(),
+    );
+  } catch (error) {
+    throw new FailToGetOpenIdToken(
+      error instanceof Error ? error : new Error("Unknown error"),
+    );
+  }
+  logger.debug("Got openID token", openIdToken);
+  let sfuConfig: { url: string; jwt: string } | undefined;
+
+  let endpoint: "default" | "legacy";
+  if (role === "publisher") {
+    // When publishing a legacy transport (one with a `livekit_service_url`),
+    // subscribers will expect our participant identity to use the legacy
+    // `@user_id:device_id` format. Only the legacy JWT service endpoint assigns
+    // identities in this format, so we must use it.
+    endpoint = "legacy";
+  } else {
+    // Use the default endpoint as it affords us slightly better metadata
+    // protection (pseudonymous participant identities).
+    endpoint = "default";
+  }
+
+  try {
+    logger.info(
+      `Trying to get JWT with ${endpoint} endpoint for focus ${serviceUrl}...`,
+    );
+    sfuConfig = await (
+      endpoint === "legacy" ? getLiveKitJWTLegacy : getLiveKitJWT
+    )(
+      membership,
+      serviceUrl,
+      roomId,
+      slotId,
+      openIdToken,
+      delayEndpointBaseUrl,
+      delayId,
+    );
+    logger.info(`Got JWT from call's active focus URL.`);
+    return extractFullConfigFromToken(sfuConfig);
+  } catch (e) {
+    logger.error(`Failed fetching jwt with ${endpoint} endpoint:`, e);
+    throw new FailToGetOpenIdToken(
+      e instanceof Error ? e : new Error(`Unknown error ${e}`),
+    );
+  }
+}
+
+/**
+ * Gets a JWT token appropriate for connecting to the SFU behind a given service
+ * URL, using the legacy `/sfu/get` endpoint, which assigns us a legacy
+ * (`<user_id>:<device_id>`) participant identity.
+ */
+async function getLiveKitJWTLegacy(
+  membership: CallMembershipIdentityParts,
+  livekitServiceURL: string,
+  matrixRoomId: string,
+  _slotId: string, // Unused - the legacy endpoint is from before slots existed.
+  openIDToken: IOpenIDToken,
+  delayEndpointBaseUrl?: string,
+  delayId?: string,
+): Promise<{ url: string; jwt: string }> {
+  interface IDelayParams {
+    delay_id?: string;
+    delay_timeout?: number;
+    delay_cs_api_url?: string;
+  }
+  let bodyDalayParts: IDelayParams = {};
+  // Also check for empty string
+  if (delayId && delayEndpointBaseUrl) {
+    bodyDalayParts = {
+      delay_id: delayId,
+      delay_timeout:
+        Config.get().matrix_rtc_session.delegated_delayed_leave.delay_ms,
+      delay_cs_api_url: delayEndpointBaseUrl,
+    };
+  }
+
+  const makeRequest = async (delayParts: IDelayParams): Promise<Response> => {
+    return await fetch(livekitServiceURL + "/sfu/get", {
+      method: "POST",
+      headers: {
+        "Content-Type": "application/json",
+      },
+      body: JSON.stringify({
+        // The legacy JWT endpoint uses only the matrix room id to calculate the livekit room alias.
+        // However, the livekit room alias is provided as part of the JWT payload.
+        room: matrixRoomId,
+        openid_token: openIDToken,
+        device_id: membership.deviceId,
+        ...delayParts,
+      }),
+    });
+  };
+
+  const res = await doNetworkOperationWithRetry(async () => {
+    let response = await makeRequest(bodyDalayParts);
+
+    // Old service compatibility check
+    const oldServiceDoesNotSupportDelayParts =
+      response.status === 400 && Object.keys(bodyDalayParts).length > 0;
+    // If http status 400 with M_BAD_JSON and we sent delay parts, retry without them
+    if (oldServiceDoesNotSupportDelayParts) {
+      try {
+        const errorBody = await response.json();
+        if (errorBody.errcode === "M_BAD_JSON") {
+          response = await makeRequest({});
+        }
+      } catch {
+        // If we can't parse the error, treat as real error
+      }
+    }
+
+    return response;
+  });
+
+  if (!res.ok) {
+    throw parseErrorResponse(res, await res.text());
+  }
+  return await res.json();
+}
+
+class NotSupportedError extends Error {
+  public constructor(message: string) {
+    super(message);
+    this.name = "NotSupported";
+  }
+}
+
+/**
+ * Gets a JWT token appropriate for connecting to the SFU behind a given service
+ * URL, using the default `/get_token` endpoint, which assigns us a hashed
+ * (pseudonymised) participant identity.
+ */
+async function getLiveKitJWT(
+  membership: CallMembershipIdentityParts,
+  livekitServiceURL: string,
+  matrixRoomId: string,
+  slotId: string,
+  openIDToken: IOpenIDToken,
+  delayEndpointBaseUrl?: string,
+  delayId?: string,
+): Promise<{ url: string; jwt: string }> {
+  const { userId, deviceId, memberId } = membership;
+
+  const body = {
+    room_id: matrixRoomId,
+    slot_id: slotId,
+    openid_token: openIDToken,
+    member: {
+      id: memberId,
+      claimed_user_id: userId,
+      claimed_device_id: deviceId,
+    },
+  };
+
+  let bodyDalayParts = {};
+  // Also check for empty string
+  if (delayId && delayEndpointBaseUrl) {
+    bodyDalayParts = {
+      delay_id: delayId,
+      delay_timeout:
+        Config.get().matrix_rtc_session.delegated_delayed_leave.delay_ms,
+      delay_cs_api_url: delayEndpointBaseUrl,
+    };
+  }
+
+  const res = await doNetworkOperationWithRetry(async () => {
+    return await fetch(livekitServiceURL + "/get_token", {
+      method: "POST",
+      headers: {
+        "Content-Type": "application/json",
+      },
+      body: JSON.stringify({ ...body, ...bodyDalayParts }),
+    });
+  });
+
+  if (!res.ok) {
+    const msg = "SFU Config fetch failed with status code " + res.status;
+    if (res.status === 404) {
+      throw new NotSupportedError(msg);
+    } else {
+      throw parseErrorResponse(res, await res.text());
+    }
+  }
+  return await res.json();
+}

src/livekit/auth/types.ts

@@ -0,0 +1,97 @@
+/*
+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 { type UnstableLivekitTransport } from "matrix-js-sdk/lib/matrixrtc";
+
+/**
+ * Data identifying a transport and the homeserver to which it belongs, so
+ * consumers know how to reach it.
+ */
+export interface TransportLocator {
+  transport: UnstableLivekitTransport;
+  serverName: string;
+}
+
+/**
+ * Configuration and access tokens provided by the SFU on successful authentication.
+ */
+export interface SFUConfig {
+  /**
+   * The WebSocket URL of the LiveKit SFU. This is what we connect the LiveKit
+   * room to. Note that this is NOT the JWT service URL
+   * (`livekit_service_url`): the legacy JWT service returns this URL as part of
+   * its response, while the CS-Api based flow requires us to know it upfront.
+   */
+  url: string;
+  jwt: string;
+  livekitAlias: string;
+  // NOTE: Currently unused.
+  livekitIdentity: string;
+}
+
+/**
+ * Decoded details from the JWT.
+ */
+export interface SFUJWTPayload {
+  /**
+   * Expiration time for the JWT.
+   * Note: This value is in seconds since Unix epoch.
+   */
+  exp: number;
+  /**
+   * Name of the instance which authored the JWT
+   */
+  iss: string;
+  /**
+   * Time at which the JWT can start to be used.
+   * Note: This value is in seconds since Unix epoch.
+   */
+  nbf: number;
+  /**
+   * Subject. The Livekit alias in this context.
+   */
+  sub: string;
+  /**
+   * The set of permissions for the user.
+   */
+  video: {
+    canPublish: boolean;
+    canSubscribe: boolean;
+    room: string;
+    roomJoin: boolean;
+  };
+}
+
+/**
+ * Complements the SFU websocket url and the JWT with the information encoded in
+ * the JWT payload itself.
+ * @param sfuConfig The SFU websocket url and the JWT to connect with.
+ * @returns The full SFU config, including the LiveKit alias and identity.
+ */
+export function extractFullConfigFromToken(sfuConfig: {
+  url: string;
+  jwt: string;
+}): SFUConfig {
+  const payload = decodeSFUJWTPayload(sfuConfig.jwt);
+  return {
+    jwt: sfuConfig.jwt,
+    url: sfuConfig.url,
+    livekitAlias: payload.video.room,
+    // NOTE: Currently unused.
+    // Probably also not helpful since we now compute the backendIdentity on joining the call so we can use it for the encryption manager.
+    // The only reason for us to know it locally is to connect the right users with the lk world. (and to set our own keys)
+    livekitIdentity: payload.sub,
+  };
+}
+
+/**
+ * Decodes the payload of an SFU JWT, without verifying its signature.
+ */
+export function decodeSFUJWTPayload(jwt: string): SFUJWTPayload {
+  const [, payloadStr] = jwt.split(".");
+  return JSON.parse(global.atob(payloadStr)) as SFUJWTPayload;
+}

src/livekit/openIDSFU.test.ts

@@ -1,329 +0,0 @@
-/*
-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 {
-  beforeEach,
-  afterEach,
-  describe,
-  expect,
-  it,
-  type MockedObject,
-  vitest,
-} from "vitest";
-import fetchMock from "fetch-mock";
-import { MatrixError } from "matrix-js-sdk";
-
-import { getSFUConfigWithOpenID, type OpenIDClientParts } from "./openIDSFU";
-import { testJWTToken } from "../utils/test-fixtures";
-import { ownMemberMock } from "../utils/test";
-import { FailToGetOpenIdToken } from "../utils/errors";
-
-const sfuUrl = "https://sfu.example.org";
-
-describe("getSFUConfigWithOpenID", () => {
-  let matrixClient: MockedObject<OpenIDClientParts>;
-  beforeEach(() => {
-    fetchMock.catch(404);
-    matrixClient = {
-      getOpenIdToken: vitest.fn(),
-      getDeviceId: vitest.fn(),
-    };
-  });
-  afterEach(() => {
-    vitest.clearAllMocks();
-    fetchMock.reset();
-  });
-
-  it("should handle fetching a token", async () => {
-    fetchMock.post("https://sfu.example.org/sfu/get", () => {
-      return {
-        status: 200,
-        body: { url: sfuUrl, jwt: testJWTToken },
-      };
-    });
-    const config = await getSFUConfigWithOpenID(
-      matrixClient,
-      ownMemberMock,
-      "https://sfu.example.org",
-      "!example_room_id",
-    );
-    expect(config).toEqual({
-      jwt: testJWTToken,
-      url: sfuUrl,
-      livekitIdentity: "@me:example.org:ABCDEF",
-      livekitAlias: "!example_room_id",
-    });
-    void (await fetchMock.flush());
-  });
-
-  it("should fail if the SFU errors", async () => {
-    fetchMock.post("https://sfu.example.org/sfu/get", () => {
-      return {
-        status: 500,
-        body: {
-          errcode: "M_LOOKUP_FAILED",
-          error: "Failed to look up user info from homeserver",
-        },
-      };
-    });
-    try {
-      await getSFUConfigWithOpenID(
-        matrixClient,
-        ownMemberMock,
-        "https://sfu.example.org",
-        "!example_room_id",
-      );
-    } catch (ex: unknown) {
-      expect(ex).toBeInstanceOf(FailToGetOpenIdToken);
-      expect((ex as FailToGetOpenIdToken).cause).toBeInstanceOf(MatrixError);
-      const mxError = (ex as Error).cause as MatrixError;
-      expect(mxError.message).toEqual(
-        "MatrixError: [500] Failed to look up user info from homeserver",
-      );
-
-      void (await fetchMock.flush());
-      return;
-    }
-    expect.fail("Expected test to throw;");
-  });
-
-  it("should retry without delay params if the JWT service legacy endpoint returns M_BAD_JSON 400", async () => {
-    let callCount = 0;
-
-    fetchMock.post(
-      "https://sfu.example.org/sfu/get",
-      (url, opts) => {
-        callCount++;
-        const body = JSON.parse(opts.body as string);
-
-        // First call: check if it has delay parts and return 400
-        if (callCount === 1) {
-          expect(body).toHaveProperty("delay_id", "mock_delay_id");
-          return {
-            status: 400,
-            body: { errcode: "M_BAD_JSON", error: "Unsupported parameters" },
-          };
-        }
-
-        // Second call: check if delay parts were stripped and return success
-        expect(body).not.toHaveProperty("delay_id");
-        expect(body).not.toHaveProperty("delay_timeout");
-        expect(body).not.toHaveProperty("delay_cs_api_url");
-
-        return {
-          status: 200,
-          body: { url: sfuUrl, jwt: testJWTToken },
-        };
-      },
-      { overwriteRoutes: true },
-    );
-
-    // Note: Assuming getSFUConfigWithOpenID eventually calls getLiveKitJWT
-    const config = await getSFUConfigWithOpenID(
-      matrixClient,
-      ownMemberMock,
-      "https://sfu.example.org",
-      "!example_room_id",
-      {
-        delayEndpointBaseUrl: "https://matrix.homeserverserver.org",
-        delayId: "mock_delay_id",
-      },
-    );
-
-    expect(config.jwt).toBe(testJWTToken);
-    expect(callCount).toBe(2);
-    void (await fetchMock.flush());
-  });
-
-  it("should successfully send delay parameters to the JWT service legacy endpoint", async () => {
-    fetchMock.post(
-      "https://sfu.example.org/sfu/get",
-      (url, opts) => {
-        const body = JSON.parse(opts.body as string);
-
-        // Verify, that the request contains the expected delay parameters
-        if (
-          body.delay_id === "mock_delay_id" &&
-          body.delay_timeout === 3600000 &&
-          body.delay_cs_api_url === "https://homeserverserver.org/cs_api"
-        ) {
-          return {
-            status: 200,
-            body: { url: sfuUrl, jwt: testJWTToken },
-          };
-        }
-        return {
-          status: 400,
-          body: { error: "Missing expected delay params" },
-        };
-      },
-      { overwriteRoutes: true },
-    );
-
-    const config = await getSFUConfigWithOpenID(
-      matrixClient,
-      ownMemberMock,
-      "https://sfu.example.org",
-      "!example_room_id",
-      {
-        delayEndpointBaseUrl: "https://homeserverserver.org/cs_api",
-        delayId: "mock_delay_id",
-      },
-    );
-
-    // Prüfe das Ergebnis
-    expect(config).toMatchObject({
-      jwt: testJWTToken,
-      url: sfuUrl,
-    });
-
-    void (await fetchMock.flush());
-  });
-
-  it("should try legacy and then new endpoint with delay delegation", async () => {
-    fetchMock.post("https://sfu.example.org/get_token", () => {
-      return {
-        status: 500,
-        body: {
-          errcode: "M_LOOKUP_FAILED",
-          error: "Failed to look up user info from homeserver",
-        },
-      };
-    });
-    fetchMock.post("https://sfu.example.org/sfu/get", () => {
-      return {
-        status: 500,
-        body: {
-          errcode: "M_LOOKUP_FAILED",
-          error: "Failed to look up user info from homeserver",
-        },
-      };
-    });
-    try {
-      await getSFUConfigWithOpenID(
-        matrixClient,
-        ownMemberMock,
-        "https://sfu.example.org",
-        "!example_room_id",
-        {
-          delayEndpointBaseUrl: "https://matrix.homeserverserver.org",
-          delayId: "mock_delay_id",
-        },
-      );
-    } catch (ex) {
-      expect(ex).toBeInstanceOf(FailToGetOpenIdToken);
-      expect((ex as FailToGetOpenIdToken).cause).toBeInstanceOf(MatrixError);
-      const mxError = (ex as Error).cause as MatrixError;
-      expect(mxError.message).toEqual(
-        "MatrixError: [500] Failed to look up user info from homeserver",
-      );
-      void (await fetchMock.flush());
-    }
-    const calls = fetchMock.calls();
-    expect(calls.length).toBe(2);
-
-    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":3600000,"delay_cs_api_url":"https://matrix.homeserverserver.org"}',
-      method: "POST",
-      headers: {
-        "Content-Type": "application/json",
-      },
-    });
-
-    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":3600000,"delay_cs_api_url":"https://matrix.homeserverserver.org"}',
-      headers: {
-        "Content-Type": "application/json",
-      },
-      method: "POST",
-    });
-  });
-
-  it("dont try legacy if endpoint with delay delegation is sucessful", async () => {
-    fetchMock.post("https://sfu.example.org/get_token", () => {
-      return {
-        status: 200,
-        body: { url: sfuUrl, jwt: testJWTToken },
-      };
-    });
-    fetchMock.post("https://sfu.example.org/sfu/get", () => {
-      return {
-        status: 500,
-        body: { error: "Test failure" },
-      };
-    });
-    try {
-      await getSFUConfigWithOpenID(
-        matrixClient,
-        ownMemberMock,
-        "https://sfu.example.org",
-        "!example_room_id",
-        {
-          delayEndpointBaseUrl: "https://matrix.homeserverserver.org",
-          delayId: "mock_delay_id",
-        },
-      );
-    } catch (ex) {
-      expect(ex).toBeInstanceOf(FailToGetOpenIdToken);
-      expect((ex as FailToGetOpenIdToken).cause).toEqual(
-        new Error("SFU Config fetch failed with status code 500"),
-      );
-      void (await fetchMock.flush());
-    }
-    const calls = fetchMock.calls();
-    expect(calls.length).toBe(1);
-
-    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":3600000,"delay_cs_api_url":"https://matrix.homeserverserver.org"}',
-      method: "POST",
-      headers: {
-        "Content-Type": "application/json",
-      },
-    });
-  });
-
-  it("should retry fetching the openid token", async () => {
-    let count = 0;
-    matrixClient.getOpenIdToken.mockImplementation(async () => {
-      count++;
-      if (count < 2) {
-        throw Error("Test failure");
-      }
-      return Promise.resolve({
-        token_type: "Bearer",
-        access_token: "foobar",
-        matrix_server_name: "example.org",
-        expires_in: 30,
-      });
-    });
-    fetchMock.post("https://sfu.example.org/sfu/get", () => {
-      return {
-        status: 200,
-        body: { url: sfuUrl, jwt: testJWTToken },
-      };
-    });
-    const config = await getSFUConfigWithOpenID(
-      matrixClient,
-      ownMemberMock,
-      "https://sfu.example.org",
-      "!example_room_id",
-    );
-    expect(config).toEqual({
-      jwt: testJWTToken,
-      url: sfuUrl,
-      livekitIdentity: "@me:example.org:ABCDEF",
-      livekitAlias: "!example_room_id",
-    });
-    void (await fetchMock.flush());
-  });
-});

src/livekit/openIDSFU.ts

@@ -1,315 +0,0 @@
-/*
-Copyright 2023, 2024 New Vector Ltd.
-
-SPDX-License-Identifier: AGPL-3.0-only OR LicenseRef-Element-Commercial
-Please see LICENSE in the repository root for full details.
-*/
-
-import {
-  type IOpenIDToken,
-  type MatrixClient,
-  parseErrorResponse,
-} from "matrix-js-sdk";
-import { type CallMembershipIdentityParts } from "matrix-js-sdk/lib/matrixrtc/EncryptionManager";
-import { type Logger } from "matrix-js-sdk/lib/logger";
-
-import {
-  FailToGetOpenIdToken,
-  NoMatrix2AuthorizationService,
-} from "../utils/errors";
-import { doNetworkOperationWithRetry } from "../utils/matrix";
-import { Config } from "../config/Config";
-import { MatrixRTCMode } from "../config/ConfigOptions";
-
-/**
- * Configuration and access tokens provided by the SFU on successful authentication.
- */
-export interface SFUConfig {
-  url: string;
-  jwt: string;
-  livekitAlias: string;
-  // NOTE: Currently unused.
-  livekitIdentity: string;
-}
-
-/**
- * Decoded details from the JWT.
- */
-interface SFUJWTPayload {
-  /**
-   * Expiration time for the JWT.
-   * Note: This value is in seconds since Unix epoch.
-   */
-  exp: number;
-  /**
-   * Name of the instance which authored the JWT
-   */
-  iss: string;
-  /**
-   * Time at which the JWT can start to be used.
-   * Note: This value is in seconds since Unix epoch.
-   */
-  nbf: number;
-  /**
-   * Subject. The Livekit alias in this context.
-   */
-  sub: string;
-  /**
-   * The set of permissions for the user.
-   */
-  video: {
-    canPublish: boolean;
-    canSubscribe: boolean;
-    room: string;
-    roomJoin: boolean;
-  };
-}
-
-// The bits we need from MatrixClient
-export type OpenIDClientParts = Pick<
-  MatrixClient,
-  "getOpenIdToken" | "getDeviceId"
->;
-
-/**
- * Gets a bearer token from the homeserver and then use it to authenticate
- * to the matrix RTC backend in order to get acces to the SFU.
- * It has built-in retry for calls to the homeserver with a backoff policy.
- * @param client The Matrix client
- * @param membership Our own membership identity parts used to send to jwt service.
- * @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.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.
- * @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.
- * @returns Object containing the token information
- * @throws FailToGetOpenIdToken
- */
-export async function getSFUConfigWithOpenID(
-  client: OpenIDClientParts,
-  membership: CallMembershipIdentityParts,
-  serviceUrl: string,
-  roomId: string,
-  opts?: {
-    matrixRTCMode?: MatrixRTCMode;
-    delayEndpointBaseUrl?: string;
-    delayId?: string;
-  },
-  logger?: Logger,
-): Promise<SFUConfig> {
-  let openIdToken: IOpenIDToken;
-  try {
-    openIdToken = await doNetworkOperationWithRetry(async () =>
-      client.getOpenIdToken(),
-    );
-  } catch (error) {
-    throw new FailToGetOpenIdToken(
-      error instanceof Error ? error : new Error("Unknown error"),
-    );
-  }
-  logger?.debug("Got openID token", openIdToken);
-  let sfuConfig: { url: string; jwt: string } | undefined;
-
-  const tryBothJwtEndpoints = opts?.matrixRTCMode === undefined; // This is for SFUs where we do not publish.
-
-  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 via default endpoint for focus ${serviceUrl}...`,
-      );
-      const sfuConfig = await getLiveKitJWT(
-        membership,
-        serviceUrl,
-        roomId,
-        openIdToken,
-        opts?.delayEndpointBaseUrl,
-        opts?.delayId,
-      );
-
-      return extractFullConfigFromToken(sfuConfig);
-    } catch (e) {
-      logger?.debug(`Failed fetching jwt with matrix 2.0 endpoint:`, e);
-      // Make this throw a hard error in case we force the matrix2.0 endpoint.
-      if (forceMatrix2Jwt) {
-        throw new NoMatrix2AuthorizationService(e as Error);
-      }
-    }
-  }
-
-  // DEPRECATED
-  // here we either have a sfuConfig or we already exited because of `if (forceMatrix2) throw ...`
-  // The only case we can get into this condition is, if `forceMatrix2` is `false`
-  try {
-    logger?.info(
-      `Trying to get JWT with legacy endpoint for focus ${serviceUrl}...`,
-    );
-    sfuConfig = await getLiveKitJWTLegacy(
-      membership.deviceId,
-      serviceUrl,
-      roomId,
-      openIdToken,
-      opts?.delayEndpointBaseUrl,
-      opts?.delayId,
-    );
-    logger?.info(`Got JWT from call's active focus URL.`);
-    return extractFullConfigFromToken(sfuConfig);
-  } catch (ex) {
-    throw new FailToGetOpenIdToken(
-      ex instanceof Error ? ex : new Error(`Unknown error ${ex}`),
-    );
-  }
-}
-
-function extractFullConfigFromToken(sfuConfig: {
-  url: string;
-  jwt: string;
-}): SFUConfig {
-  const [, payloadStr] = sfuConfig.jwt.split(".");
-  const payload = JSON.parse(global.atob(payloadStr)) as SFUJWTPayload;
-  return {
-    jwt: sfuConfig.jwt,
-    url: sfuConfig.url,
-    livekitAlias: payload.video.room,
-    // NOTE: Currently unused.
-    // Probably also not helpful since we now compute the backendIdentity on joining the call so we can use it for the encryption manager.
-    // The only reason for us to know it locally is to connect the right users with the lk world. (and to set our own keys)
-    livekitIdentity: payload.sub,
-  };
-}
-
-async function getLiveKitJWTLegacy(
-  deviceId: string,
-  livekitServiceURL: string,
-  matrixRoomId: string,
-  openIDToken: IOpenIDToken,
-  delayEndpointBaseUrl?: string,
-  delayId?: string,
-): Promise<{ url: string; jwt: string }> {
-  interface IDelayParams {
-    delay_id?: string;
-    delay_timeout?: number;
-    delay_cs_api_url?: string;
-  }
-  let bodyDalayParts: IDelayParams = {};
-  // Also check for empty string
-  if (delayId && delayEndpointBaseUrl) {
-    bodyDalayParts = {
-      delay_id: delayId,
-      delay_timeout:
-        Config.get().matrix_rtc_session.delegated_delayed_leave.delay_ms,
-      delay_cs_api_url: delayEndpointBaseUrl,
-    };
-  }
-
-  const makeRequest = async (delayParts: IDelayParams): Promise<Response> => {
-    return await fetch(livekitServiceURL + "/sfu/get", {
-      method: "POST",
-      headers: {
-        "Content-Type": "application/json",
-      },
-      body: JSON.stringify({
-        // The legacy JWT endpoint uses only the matrix room id to calculate the livekit room alias.
-        // However, the livekit room alias is provided as part of the JWT payload.
-        room: matrixRoomId,
-        openid_token: openIDToken,
-        device_id: deviceId,
-        ...delayParts,
-      }),
-    });
-  };
-
-  const res = await doNetworkOperationWithRetry(async () => {
-    let response = await makeRequest(bodyDalayParts);
-
-    // Old service compatibility check
-    const oldServiceDoesNotSupportDelayParts =
-      response.status === 400 && Object.keys(bodyDalayParts).length > 0;
-    // If http status 400 with M_BAD_JSON and we sent delay parts, retry without them
-    if (oldServiceDoesNotSupportDelayParts) {
-      try {
-        const errorBody = await response.json();
-        if (errorBody.errcode === "M_BAD_JSON") {
-          response = await makeRequest({});
-        }
-      } catch {
-        // If we can't parse the error, treat as real error
-      }
-    }
-
-    return response;
-  });
-
-  if (!res.ok) {
-    throw parseErrorResponse(res, await res.text());
-  }
-  return await res.json();
-}
-
-class NotSupportedError extends Error {
-  public constructor(message: string) {
-    super(message);
-    this.name = "NotSupported";
-  }
-}
-
-export async function getLiveKitJWT(
-  membership: CallMembershipIdentityParts,
-  livekitServiceURL: string,
-  matrixRoomId: string,
-  openIDToken: IOpenIDToken,
-  delayEndpointBaseUrl?: string,
-  delayId?: string,
-): Promise<{ url: string; jwt: string }> {
-  const { userId, deviceId, memberId } = membership;
-
-  const body = {
-    room_id: matrixRoomId,
-    slot_id: "m.call#ROOM",
-    openid_token: openIDToken,
-    member: {
-      id: memberId,
-      claimed_user_id: userId,
-      claimed_device_id: deviceId,
-    },
-  };
-
-  let bodyDalayParts = {};
-  // Also check for empty string
-  if (delayId && delayEndpointBaseUrl) {
-    bodyDalayParts = {
-      delay_id: delayId,
-      delay_timeout:
-        Config.get().matrix_rtc_session.delegated_delayed_leave.delay_ms,
-      delay_cs_api_url: delayEndpointBaseUrl,
-    };
-  }
-
-  const res = await doNetworkOperationWithRetry(async () => {
-    return await fetch(livekitServiceURL + "/get_token", {
-      method: "POST",
-      headers: {
-        "Content-Type": "application/json",
-      },
-      body: JSON.stringify({ ...body, ...bodyDalayParts }),
-    });
-  });
-
-  if (!res.ok) {
-    const msg = "SFU Config fetch failed with status code " + res.status;
-    if (res.status === 404) {
-      throw new NotSupportedError(msg);
-    } else {
-      throw parseErrorResponse(res, await res.text());
-    }
-  }
-  return await res.json();
-}

src/reactions/index.ts

@@ -29,6 +29,8 @@ import waveSoundOgg from "../sound/reactions/wave.ogg?url";
 import waveSoundMp3 from "../sound/reactions/wave.mp3?url";
 import baduntssSoundOgg from "../sound/reactions/baduntss.ogg?url";
 import baduntssSoundMp3 from "../sound/reactions/baduntss.mp3?url";
+import bellSoundOgg from "../sound/reactions/bell.ogg?url";
+import bellSoundMp3 from "../sound/reactions/bell.mp3?url";
 
 export const ElementCallReactionEventType = "io.element.call.reaction";
 
@@ -202,6 +204,15 @@ export const ReactionSet: ReactionOption[] = [
       mp3: baduntssSoundMp3,
     },
   },
+  {
+    emoji: "🛎️",
+    name: "bell",
+    alias: ["ding"],
+    sound: {
+      ogg: bellSoundOgg,
+      mp3: bellSoundMp3,
+    },
+  },
 ];
 
 export interface RaisedHandInfo {

src/room/CallEventAudioRenderer.test.tsx

@@ -17,7 +17,7 @@ import {
 import { act } from "react";
 import { type RoomMember } from "matrix-js-sdk";
 import {
-  type LivekitTransport,
+  type UnstableLivekitTransport,
   type CallMembership,
 } from "matrix-js-sdk/lib/matrixrtc";
 
@@ -46,7 +46,7 @@ vitest.mock("../useAudioContext");
 vitest.mock("../soundUtils");
 vitest.mock("../rtcSessionHelpers", async (importOriginal) => ({
   ...(await importOriginal()),
-  makeTransport: (): [LivekitTransport] => [exampleTransport],
+  makeTransport: (): [UnstableLivekitTransport] => [exampleTransport],
 }));
 
 afterEach(() => {

src/room/CallView.tsx

@@ -242,12 +242,7 @@ const LoadedCallView: FC<LoadedProps> = ({
   const { displayName, avatarUrl } = useProfile(client);
   const roomName = useRoomName(room);
   const roomAvatar = useRoomAvatar(room);
-  const {
-    perParticipantE2EE,
-    returnToLobby,
-    password: passwordFromUrl,
-    header,
-  } = useUrlParams();
+  const { returnToLobby, password: passwordFromUrl, header } = useUrlParams();
   const e2eeSystem = useRoomEncryptionSystem(room.roomId);
 
   // Save the password once we start the groupCallView
@@ -365,7 +360,6 @@ const LoadedCallView: FC<LoadedProps> = ({
     rtcSession,
     preload,
     skipLobby,
-    perParticipantE2EE,
     mediaDevices,
     latestMuteStates,
     setJoined,