Expect the default output entry to carry no name

- main stopped labelling the virtual default output with the first device's
  name (426acd22): a pinned sink is not re-routed, and which device the browser
  default resolves to is not knowable from here.
- The exploration still carried the older file, so this check passed locally
  and failed in CI, which tests the branch merged with main.
- AC8 is unchanged — Default is still a distinct entry beside the device it
  resolves to. Only the label it carries has moved.

Co-Authored-By: Claude Opus 5 <noreply@anthropic.com>

AGENTS.md

@@ -48,8 +48,6 @@ 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.

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

docs/agents/code-style.md

@@ -31,28 +31,7 @@ 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
-
-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.
+  `computedLayout$`. Comments explain why, never what.
 
 ## TypeScript, React and RxJS idiom win on a clash
 

locales/en/app.json

@@ -166,7 +166,7 @@
   "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.",
+    "permission_denied": "Element Call cannot use your microphone. Allow access in your browser settings.",
     "value": "{{level}} of {{max}}"
   },
   "microphone_off": "Microphone off",

package.json

@@ -83,7 +83,7 @@
     "@types/sdp-transform": "^2.4.5",
     "@typescript-eslint/utils": "^8.61.0",
     "@use-gesture/react": "^10.2.11",
-    "@vector-im/compound-design-tokens": "^11.0.0",
+    "@vector-im/compound-design-tokens": "^10.0.0",
     "@vector-im/compound-web": "^10.0.0",
     "@vitejs/plugin-react": "^6.0.2",
     "@vitest/browser-playwright": "^4.1.5",
@@ -107,6 +107,7 @@
     "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",

playwright/audio-menu.spec.ts

@@ -18,9 +18,11 @@ test.describe("the quick audio menu", () => {
     await joinACall(page, "Menu user", "Audio menu");
     await openAudioMenu(page);
 
+    // The speaker list is what the settings modal used to be the only home of.
     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.
+    // Named rather than counted: the browser contributes its own fake output
+    // and a "Default" entry, so a total would be a fact about the browser.
     for (const n of [1, 2, 3])
       await expect(
         page
@@ -28,6 +30,8 @@ test.describe("the quick audio menu", () => {
           .getByRole("menuitemradio", { name: `Fake Speaker ${n}` }),
       ).toBeVisible();
 
+    // Only one entry of a kind is marked, and the meter reports a number
+    // rather than a colour.
     await expect(
       page.getByRole("menuitemradio", { checked: true }),
     ).toHaveCount(2);
@@ -36,7 +40,10 @@ test.describe("the quick audio menu", () => {
     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.
+    // Both browsers in the matrix can route audio to a chosen output, so the
+    // section offers a real choice. The case where a platform cannot — Safari,
+    // and anything without setSinkId — is covered by a unit check, since no
+    // browser here can reach it.
     await expect(
       page
         .getByRole("group", { name: "Speaker" })
@@ -48,7 +55,7 @@ test.describe("the quick audio menu", () => {
   test("moves the microphone and the speaker without disturbing the call", async ({
     browser,
   }) => {
-    // Two browsers and a real call.
+    // Two browsers, two joins and a real call between them.
     test.slow();
     const hostContext = await browser.newContext({ reducedMotion: "reduce" });
     const host = await hostContext.newPage();
@@ -66,7 +73,9 @@ test.describe("the quick audio menu", () => {
     await openAudioMenu(host);
     await selectDevice(host, "Speaker", "Fake Speaker 2");
 
-    // Not a rejoin: neither side drops, and the guest still has both tiles.
+    // The point of the criterion: the switch is not a rejoin. Neither side
+    // sees the call drop, and the guest still has both tiles — so the host
+    // never left and came back.
     await expect(
       host.getByRole("dialog", { name: "Reconnecting…" }),
     ).not.toBeVisible();
@@ -83,7 +92,7 @@ test.describe("the quick audio menu", () => {
   test("keeps the meter moving while muted, and sends nothing", async ({
     browser,
   }) => {
-    // Two browsers and a real call.
+    // Two browsers, two joins and a real call between them.
     test.slow();
     const hostContext = await browser.newContext({ reducedMotion: "reduce" });
     const host = await hostContext.newPage();
@@ -101,12 +110,15 @@ test.describe("the quick audio menu", () => {
     await expect(mute).toHaveAttribute("aria-checked", "false");
     await openAudioMenu(host);
 
+    // The microphone is held open while muted, so the meter still reports the
+    // hardware. The mute control is what says nothing is being transmitted.
     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.
+    // Queried by test id, not by role: the menu is modal, so Radix takes the
+    // rest of the call out of the accessibility tree while it is open.
     await expect(mute).toHaveAttribute("aria-checked", "false");
     await expect(mute).toBeVisible();
-    // And the guest is shown the mute.
+    // And the listener is told so, rather than being left to guess from silence.
     await expect(
       guest.getByTestId("videoTile").filter({ hasText: "Muted host" }),
     ).toBeVisible();
@@ -125,8 +137,9 @@ test.describe("the quick audio menu", () => {
     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.
+    // Scrolled so the microphones start at the top of the list and run past its
+    // bottom: the position that tells a pinned meter from one that merely
+    // happens to be last.
     const list = page.locator("[role='menu'] div[role='none']").first();
     await list.evaluate((element) => {
       const group = element.querySelector("[role='group'][aria-label*='icro']");
@@ -137,6 +150,7 @@ test.describe("the quick audio menu", () => {
 
     await expect(meter).toBeInViewport();
     await expectPinnedInside(meter, list);
+    // Every entry stays reachable, which is what the scroll is for.
     await expect(
       page.getByRole("menuitemradio", { name: "Fake Microphone 20" }),
     ).toBeVisible();
@@ -155,14 +169,16 @@ test.describe("the quick audio menu", () => {
     await openAudioMenu(page);
 
     const first = page.getByRole("menuitemradio").first();
-    // Opened by pointer: no ring, though Radix has moved focus into the menu.
+    // Opened by pointer, so no ring, even though Radix has moved focus into the
+    // menu already.
     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.
+    // The pointer takes it away again: the menu focuses whatever it is over, so
+    // a ring that followed focus alone would trail the mouse.
     await first.hover();
     await expect.poll(async () => outlineWidth(focused)).toBe(0);
   });
@@ -177,7 +193,8 @@ async function joinACall(
   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.
+  // The media controls stay disabled until the devices have enumerated, and
+  // every test here drives them.
   await expect(page.getByTestId("incall_mute")).toBeEnabled({
     timeout: 10_000,
   });
@@ -197,12 +214,19 @@ async function selectDevice(
     .getByRole("group", { name: section })
     .getByRole("menuitemradio", { name });
   await item.click();
-  // Selecting doesn't close the menu, so dismiss it.
+  // Selecting does not close the menu — the component prevents the default so
+  // the list survives a mis-click — so it is dismissed explicitly.
   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. */
+/**
+ * Asserts the meter sits within the scrollport, and inside the menu's frame.
+ *
+ * The meter is the one opaque element in the menu, so it is the one thing that
+ * can paint over the border. Whether it actually does needs a screenshot; this
+ * pins the geometry that decides it.
+ */
 async function expectPinnedInside(
   meter: Locator,
   list: Locator,
@@ -219,7 +243,7 @@ async function expectPinnedInside(
   expect(meterBox.x + meterBox.width).toBeLessThan(frame.x + frame.width);
 }
 
-/** Painted outline width, in px. */
+/** The painted outline width in pixels, however the stylesheet spells it. */
 async function outlineWidth(item: Locator): Promise<number> {
   if ((await item.count()) === 0) return 0;
   return item.first().evaluate((element) => {

playwright/component/audio-menu.spec.ts

@@ -11,12 +11,22 @@ 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.
+ * The device menu where Element Call is a component in a host's page rather
+ * than the whole of one.
+ *
+ * This is the case the stylesheets cannot describe: the menu is portalled to
+ * the document, so a container query and a viewport unit both measure the wrong
+ * thing — the first has no container to resolve against out there, the second
+ * measures a page Element Call does not own. The menu has to be sized against
+ * the space the call is actually drawn in.
+ *
+ * Driven from the lobby rather than a joined call. The footer builds the same
+ * menu from the same device behaviours in both, and the container is the same
+ * size either way, so joining would only add two connections' worth of flake.
  */
 
-// Sign-in, crypto setup and sync happen twice before anything shows.
+// Signing in, setting up crypto and syncing happen twice before anything is on
+// screen, as in component-call.spec.ts
 test.describe.configure({ timeout: 180_000 });
 
 test("sizes the device list against the call, not the window", async ({
@@ -27,7 +37,8 @@ test("sizes the device list against the call, not the window", async ({
   const panes = await startHarness(page, username, roomId);
   const pane = panes.first();
 
-  // A short call in a much taller page.
+  // A short call in a much taller page: the difference between measuring the
+  // call and measuring the window.
   const container = pane.getByTestId("call-container");
   await resizeContainer(container, { width: 900, height: 400 });
   await expect(pane.getByTestId("lobby_joinCall")).toBeVisible({
@@ -39,6 +50,8 @@ test("sizes the device list against the call, not the window", async ({
   const windowHeight = page.viewportSize()!.height;
   const listHeight = (await list.boundingBox())!.height;
 
+  // Sized against the call. Were it sized against the window the list would be
+  // half as tall again, and the assertion below would not be able to tell.
   expect(callHeight).toBeLessThan(windowHeight * 0.75);
   expect(listHeight).toBeLessThanOrEqual(callHeight);
   expect(listHeight).toBeLessThan(windowHeight * 0.6);
@@ -59,7 +72,9 @@ test("follows the call area when the host resizes it", async ({ page }) => {
   const list = await openDeviceList(page, pane);
   const whenShort = (await list.boundingBox())!.height;
 
-  // The host grows the call while the menu is open.
+  // The host grows the space Element Call is drawn in while the menu is open —
+  // a panel opening, a window dragged, a phone turned. A bound taken once on
+  // opening would still describe the smaller call.
   await resizeContainer(container, { width: 900, height: 700 });
   await expect
     .poll(async () => (await list.boundingBox())!.height)
@@ -73,13 +88,15 @@ test("keeps every device reachable in a small container", async ({ page }) => {
   const pane = panes.first();
 
   const container = pane.getByTestId("call-container");
+  // Narrow as well as short, which is where entries get pushed out of reach.
   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.
+  // More devices than the space allows, so the list has to scroll rather than
+  // put entries somewhere they cannot be got at.
   expect(await list.evaluate((el) => el.scrollHeight > el.clientHeight)).toBe(
     true,
   );
@@ -87,12 +104,14 @@ test("keeps every device reachable in a small container", async ({ page }) => {
   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.
+  // Reachable means usable, not merely painted: D11 accepts that the menu may
+  // be drawn outside the call area, so this asserts reach rather than
+  // containment.
   await last.click();
   await expect(last).toHaveAttribute("aria-checked", "true");
 });
 
-test("tracks the focus source of its own call, not the page", async ({
+test("tracks the focus modality of its own call, not the page", async ({
   page,
 }) => {
   await installFakeDevices(page);
@@ -105,25 +124,36 @@ test("tracks the focus source of its own call, not the page", async ({
     timeout: 60_000,
   });
   await openDeviceList(page, pane);
+  // The menu owns the modality, because every item it can focus has to answer
+  // to it — the device rows and the camera menu's blur toggle alike.
   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");
+  // Asserted on the attribute rather than the painted ring, which cannot be
+  // read here: the menu is portalled outside the call root, and the component
+  // build scopes the stylesheet to it, so neither the ring nor the rule that
+  // suppresses the browser's own reaches this menu. The paint is asserted
+  // standalone instead — in the story and in audio-menu.spec.ts. What is on
+  // trial here is which call the tracking answers for.
+  await expect(menu).toHaveAttribute("data-focus-modality", "pointer");
 
-  // A key pressed in the other call says nothing about this menu.
+  // A key pressed in the other call on this page — or anywhere in the host's
+  // own page — says nothing about how this menu is being used.
   await other.evaluate((element) =>
     element.dispatchEvent(
       new KeyboardEvent("keydown", { key: "ArrowDown", bubbles: true }),
     ),
   );
-  await expect(menu).toHaveAttribute("data-focus-source", "pointer");
+  await expect(menu).toHaveAttribute("data-focus-modality", "pointer");
 
+  // A key pressed in this menu does.
   await page.keyboard.press("ArrowDown");
-  await expect(menu).toHaveAttribute("data-focus-source", "keyboard");
+  await expect(menu).toHaveAttribute("data-focus-modality", "keyboard");
 });
 
-/** Opens a component's microphone menu and returns its device list. */
+/**
+ * Opens the microphone menu of one component and returns its scrolling device
+ * list, which lives outside the component: the menu is portalled to the page.
+ */
 async function openDeviceList(page: Page, pane: Locator): Promise<Locator> {
   await pane
     .getByRole("button", { name: "Microphone" })

playwright/utils/fake-devices.ts

@@ -8,10 +8,20 @@ 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.
+ * Gives the browser more fake devices than it ships with.
+ *
+ * A headless browser's fake capture offers one microphone and one speaker,
+ * which is one short of what a device menu is for: with no choice to make, every
+ * entry renders disabled. These are synthetic entries on top of the real fake
+ * device, so the menu has a list to show and a selection to move, and the app
+ * runs its real device pipeline against them.
+ *
+ * What they do not do is route audio: every entry is backed by the same capture,
+ * and `setSinkId` is accepted rather than honoured. A test can prove that
+ * choosing a device changes the app's state and does not disturb the call. That
+ * a listener hears the change needs hardware, and stays a manual check.
+ *
+ * Must be called before the page navigates.
  */
 export async function installFakeDevices(
   page: Page,
@@ -48,7 +58,8 @@ export async function installFakeDevices(
         ...synthetic("audiooutput", speakers, "Fake Speaker"),
       ];
 
-      // Our ids name no hardware, so drop the exact-device constraint.
+      // Our ids name no hardware, so an exact-device constraint on one would be
+      // rejected. Drop it and let the one real fake device answer.
       const getUserMedia = devices.getUserMedia.bind(devices);
       devices.getUserMedia = async (
         constraints?: MediaStreamConstraints,
@@ -66,8 +77,10 @@ export async function installFakeDevices(
         return getUserMedia(constraints);
       };
 
-      // Accept routing to our ids on both media elements and the AudioContext,
-      // which the app also routes.
+      // Routing to a device that does not exist would reject, and the app
+      // treats that as a failed switch. Both sinks are patched: Element Call
+      // routes its own AudioContext as well as the media elements, and leaving
+      // that one alone logs a NotFoundError for every switch.
       for (const proto of [
         HTMLMediaElement.prototype,
         AudioContext.prototype,

pnpm-lock.yaml

@@ -131,11 +131,11 @@ importers:
         specifier: ^10.2.11
         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)
+        specifier: ^10.0.0
+        version: 10.2.4(@types/react@19.2.18)(react@19.2.8)
       '@vector-im/compound-web':
         specifier: ^10.0.0
-        version: 10.1.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.0.0(@types/react@19.2.18)(react@19.2.8))(react-dom@19.2.8(react@19.2.8))(react@19.2.8)
+        version: 10.0.1(@fontsource/inconsolata@5.3.0)(@fontsource/inter@5.3.0)(@types/react-dom@19.2.5(@types/react@19.2.18))(@types/react@19.2.18)(@vector-im/compound-design-tokens@10.2.4(@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))
@@ -202,6 +202,9 @@ importers:
       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
@@ -3226,8 +3229,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@10.2.4':
+    resolution: {integrity: sha512-2aCjhSvJxktPWnvh5s9Xdc0Rd76AfHqbDbN4QjOxo2VIac6zYdLyQbxMUQ5ZeoR9G3vAxILd0H1UvApRfMilpQ==}
     peerDependencies:
       '@adobe/leonardo-contrast-colors': ^1.0.0
       '@types/react': '*'
@@ -3243,8 +3246,8 @@ packages:
       react:
         optional: true
 
-  '@vector-im/compound-web@10.1.0':
-    resolution: {integrity: sha512-Lhw9Q+RZo1GtDYjF5PXWTD0zdfbrz/vnSVBYFHC8Hq+YeDule2QfGbTRo8IVHeV7jK6ZzsLc8zb6553eeIRLYg==}
+  '@vector-im/compound-web@10.0.1':
+    resolution: {integrity: sha512-CT3aGMalPSf53o3JUbBF7EA10Rfp+auftIuBwOUSna+hfZ/zPxGLTFcuCuOJ7L8hrzijM+V4I8L0PUkfyOczpg==}
     peerDependencies:
       '@fontsource/inconsolata': ^5
       '@fontsource/inter': ^5
@@ -4813,6 +4816,13 @@ 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'}
@@ -8685,12 +8695,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@10.2.4(@types/react@19.2.18)(react@19.2.8)':
     optionalDependencies:
       '@types/react': 19.2.18
       react: 19.2.8
 
-  '@vector-im/compound-web@10.1.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.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.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@10.2.4(@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)
@@ -8702,7 +8712,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': 10.2.4(@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)
@@ -10400,6 +10410,12 @@ 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:

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 = useBehavior(devices.audioOutput.selected$);
+  const audioOutput = useObservableEagerState(devices.audioOutput.selected$);
   const isVirtualEarpiece = audioOutput?.virtualEarpiece ?? false;
   return {
     // We use only the right speaker (pan = 1) for the earpiece.

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_bh_"
+    aria-labelledby="_r_bb_"
     class="_button_1nw83_8 _has-icon_1nw83_60 _icon-only_1nw83_53"
     data-kind="primary"
     data-size="lg"

src/components/CallFooter.module.css

@@ -43,10 +43,7 @@ Please see LICENSE in the repository root for full details.
   inset-inline: 0;
 }
 
-/* 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"]) {
+.footer.overlay:has(:focus-visible) {
   opacity: 1;
   pointer-events: initial;
 }

src/components/CallFooter.stories.tsx

@@ -13,7 +13,6 @@ 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";
@@ -176,32 +175,6 @@ export const WithAudioAndVideoOptions: Story = {
   },
 };
 
-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,7 +99,7 @@ export interface FooterState {
 
   /** Providing no options `[]` or `undefined` will imply that we dont have a audio fast switcher */
   audioOptions: MenuOptions[];
-  /** Output (speaker) devices. */
+  /** Output devices shown as their own section in the audio menu. */
   audioOutputOptions: MenuOptions[];
   /** Providing no options `[]` or `undefined` will imply that we dont have a audio fast switcher */
   videoOptions: MenuOptions[];

src/components/CallFooterViewModel.test.ts

@@ -6,11 +6,12 @@ Please see LICENSE in the repository root for full details.
 */
 
 import { describe, expect, it, vi } from "vitest";
+import { BehaviorSubject } from "rxjs";
 
 import { testScope, mockMuteStates, mockMediaDevices } from "../utils/test";
 import { constant } from "../state/Behavior";
 import type { CallViewModel } from "../state/CallViewModel/CallViewModel";
-import type { Layout } from "../state/layout-types";
+import type { Alignment, Layout } from "../state/layout-types";
 import type { SpotlightTileViewModel } from "../state/TileViewModel";
 import type { DeviceLabel } from "../state/MediaDevices";
 import { createCallFooterViewModel } from "./CallFooterViewModel";
@@ -64,6 +65,10 @@ function buildMinimalCallViewModel(layout: Layout): CallViewModel {
 const gridLayout: Layout = {
   type: "grid",
   grid: [],
+  spotlightAlignment$: new BehaviorSubject<Alignment>({
+    inline: "end",
+    block: "end",
+  }),
   setVisibleTiles: (_: number) => {},
 };
 
@@ -111,6 +116,7 @@ describe("createCallFooterViewModel", () => {
 
     it("is withheld where the platform cannot route audio to a chosen device", () => {
       outputSelectionMock.mockReturnValue(false);
+      // Undefined is what renders the speaker section disabled.
       expect(buildFooterVm().selectAudioOutputOption$.value).toBeUndefined();
     });
 
@@ -139,7 +145,9 @@ describe("createCallFooterViewModel", () => {
             selected$: constant(undefined),
             select: vi.fn(),
           },
-          // As Safari: no outputs listed.
+          // Safari enumerates no output devices whatsoever. Reproduced by the
+          // condition rather than by the browser, so it is checked on the
+          // Linux CI runners that have no Safari to check it with.
           audioOutput: {
             available$: constant(new Map<string, DeviceLabel>()),
             selected$: constant(undefined),
@@ -150,7 +158,10 @@ describe("createCallFooterViewModel", () => {
         { showControls: true, header: HeaderStyle.Standard },
       );
 
-      // Empty, not undefined: undefined would hide the section.
+      // Empty rather than undefined: undefined means this menu has no notion
+      // of outputs at all, as the camera menu has none, and hides the section.
+      // Empty means there are none to list, and the menu still shows the
+      // section with a default in it, disabled.
       expect(vm.audioOutputOptions$.value).toEqual([]);
     });
   });

src/components/CallFooterViewModel.tsx

@@ -104,8 +104,8 @@ function buildDeviceBehaviors(
     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.
+    // Safari and most Firefox builds cannot route audio to a chosen device at
+    // all. Withholding the callback is what renders the section disabled.
     selectAudioOutputOption$: constant(
       supportsAudioOutputSelection()
         ? mediaDevices.audioOutput.select

src/components/MediaMuteAndSwitchButton.module.css

@@ -41,29 +41,55 @@ Please see LICENSE in the repository root for full details.
   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. */
+/* Only the device lists scroll; the level meter stays put beneath them.
+   The bound comes from the measured height of the call area, set by the
+   component: the menu is portalled outside the root, so neither a container
+   query nor a viewport unit describes the space it is allowed to fill. */
 .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. */
+  /* The heading stands over the head of this list and the level meter over its
+     foot. Scrolling a row flush to either edge would put it underneath one of
+     them, which is how a row reached by the keyboard ends up half-readable;
+     this keeps both their heights clear for anything the browser scrolls to.
+     Set by the component, which is the only thing that can measure them. */
   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. */
+/* Each section is headed by its own rule, which Compound draws under a menu
+   heading already. The heading spans the whole menu — the menu has no padding
+   of its own — so that rule runs edge to edge, stopping only where the frame
+   is, rather than inset as a separator between the sections would be.
+
+   Compound's spacing around it is the design's too, bar one thing: the design
+   leaves a section's first device further below the rule than Compound does —
+   measured off the mock, 27px from the rule to the top of the control, against
+   the 16px that Compound's 8px margin and the row's own 8px padding give. The
+   difference goes below the rule, so the rule stays tight under its own text
+   where Compound put it. */
 .menu h3 {
   margin-block-end: var(--cpd-space-5x);
 }
 
-/* And more above a heading that follows another section. */
+/* One section is set much further from the one above it than Compound's 8px
+   heading margin allows: measured off the mock, 41px from the last device's
+   control to the next heading's text, against the 22px we had. Only between
+   sections — the first heading keeps Compound's spacing, because the menu's
+   own padding is already above it. */
 .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. */
+/* Each section's heading stays at the top of the scrollport while any of that
+   section is still in view, so a long list never leaves you wondering which
+   kind of device you are looking at. It leaves with its own section, because
+   sticky only holds while the group it belongs to is in view.
+
+   Opaque, and held a border width clear of the sides, for the same reason as
+   the meter below: this is a positioned element, so it paints above the
+   outline the menu draws its frame with, and would swallow it. */
 .sectionHeading {
   position: sticky;
   inset-block-start: 0;
@@ -72,23 +98,40 @@ Please see LICENSE in the repository root for full details.
   margin-block-start: var(--cpd-border-width-1);
 }
 
-/* Sticky at the foot of the microphone section; opaque and inset as above. */
+/* The meter belongs to the microphone section: it stays at the bottom of the
+   scrollport while that section is in view, and leaves with it when the list
+   is scrolled up to the speakers. The wrapper is deliberately unpositioned —
+   a positioned one paints above the menu's outline and swallows the frame
+   along this whole section. Sticky is resolved against the scroll container,
+   so it does not need one. */
+
 .stickyMeter {
   position: sticky;
   inset-block-end: 0;
+  /* Opaque, so the list does not show through it as it scrolls past. The menu
+     draws its frame as an outline inset by one border width, and the device
+     rows are transparent at rest, so this is the only thing that can cover it:
+     hold it clear on the sides and the bottom. */
   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. */
+/* Radix focuses whatever the pointer is over, so the browser's own ring marks
+   the item under the mouse. It cannot distinguish the two modalities here, so
+   it is suppressed and replaced by one that can.
+
+   Every kind of item the menu can focus, not only the device rows: the camera
+   menu's blur toggle is a checkbox item and a child of the menu rather than of
+   the list, and left out it kept the browser's own ring and followed the
+   pointer with it. */
 .menu [role^="menuitem"]:focus,
 .menu [role^="menuitem"]:focus-visible {
   outline: none;
 }
 
-.menu[data-focus-source="keyboard"] [role^="menuitem"]:focus {
+/* Shown only when the keyboard is what moved the focus. */
+.menu[data-focus-modality="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

@@ -21,14 +21,24 @@ const mediaDevices = new MediaDevices(globalScope, {
   controlledAudioDevices: false,
 });
 
-/** Supplies a microphone, a wavering tone: a story's invented device ids match no hardware. */
+/**
+ * Gives these stories a microphone to read.
+ *
+ * The menu opens a capture of whichever device it has been told is selected,
+ * and the devices in a story are invented: asking for one by an id no hardware
+ * answers to fails, and the meter reports that — correctly — as there being no
+ * microphone. So the story provides one rather than borrowing the machine's: a
+ * wavering tone played into a real MediaStream, which the meter then runs its
+ * own analyser over. Nothing here stands in for the meter itself.
+ */
 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.
+    // Swinging between about a third and two thirds of the range, so the meter
+    // reads as something live rather than as a level someone pinned there.
     const swing = context.createOscillator();
     const depth = context.createGain();
     loudness.gain.value = 0.25;
@@ -43,7 +53,8 @@ const WithAMicrophone: FC<{ children: ReactNode }> = ({ children }) => {
     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.
+    // A fresh clone each time, so that a caller stopping its tracks when it is
+    // done does not take the microphone away from the next one.
     devices.getUserMedia = async (): Promise<MediaStream> =>
       (await opened).clone();
 
@@ -58,14 +69,26 @@ const WithAMicrophone: FC<{ children: ReactNode }> = ({ children }) => {
   return <>{children}</>;
 };
 
-/** Supplies a call-sized root. Without one the list is bounded by the whole Storybook frame. */
+/**
+ * Gives these stories the call area the menu belongs to.
+ *
+ * The menu sizes its device list against the space Element Call is drawn in,
+ * and takes that from a provider. Without one it falls back to the document
+ * body — which in a story is the whole of Storybook's frame, so the list is
+ * bounded by something far larger than the story it is drawn in and runs off
+ * the top of the canvas. Supplying a root is the same courtesy as supplying the
+ * devices: the story stands in for the call, so it has to say how big it is.
+ */
 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.
+        // The size of a call, not of a thumbnail: the device list is bounded to
+        // a share of this, so a small area makes even a two-device menu scroll,
+        // which no real call does. Tall enough to leave the menu room to open
+        // upward and still be wholly on screen in the story's frame.
         blockSize: 720,
         display: "flex",
         alignItems: "flex-end",
@@ -99,6 +122,7 @@ type Story = StoryObj<typeof meta>;
 
 export const Default: Story = {
   args: {
+    title: "SomeMenu",
     iconsAndLabels: "audio",
     enabled: true,
     options: [
@@ -106,7 +130,10 @@ 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.
+    // The audio menu always has a speaker section: the footer hands it an
+    // output list whenever it draws the chevron at all, so a microphone menu
+    // with no speakers in it is a shape nothing in the app produces. Set here
+    // rather than in each story, since the others build on these.
     outputOptions: [
       { label: { type: "default", name: "Built-in Output" }, id: "default" },
       { label: { type: "name", name: "Headset" }, id: "spk2" },
@@ -121,6 +148,7 @@ export const Default: Story = {
 export const AudioMute: Story = {
   args: {
     ...Default.args,
+    title: "Microphone",
     iconsAndLabels: "audio",
     enabled: false,
     options: [
@@ -144,6 +172,7 @@ export const AudioMute: Story = {
 export const AudioUnmute: Story = {
   args: {
     ...Default.args,
+    title: "Microphone",
     iconsAndLabels: "audio",
     enabled: true,
     options: [
@@ -156,6 +185,7 @@ export const AudioUnmute: Story = {
 
 export const VideoMute: Story = {
   args: {
+    title: "Camera",
     iconsAndLabels: "video",
     enabled: false,
     options: [
@@ -169,6 +199,7 @@ export const VideoMute: Story = {
 
 export const VideoUnmute: Story = {
   args: {
+    title: "Camera",
     iconsAndLabels: "video",
     enabled: true,
     options: [
@@ -184,6 +215,7 @@ export const VideoUnmute: Story = {
 export const SpeakerAndMicrophoneSections: Story = {
   args: {
     ...Default.args,
+    title: "Microphone",
     iconsAndLabels: "audio",
     enabled: true,
     options: [
@@ -208,13 +240,16 @@ export const SpeakerAndMicrophoneSections: Story = {
     await userEvent.click(headset);
     await expect(args.onSelectOutput).toHaveBeenCalledWith("spk2");
 
-    // A few devices fit, so the list doesn't scroll.
+    // A handful of devices fits: only a list longer than the space it is given
+    // scrolls, and a menu that scrolled at four devices would be bounded by
+    // something far smaller than the call it is drawn in.
     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.
+    // Each section is headed by its own rule, running the full width of the
+    // menu rather than inset — and nothing divides the sections besides.
     const menu = document.body.querySelector("[role='menu']")!;
     await expect(
       document.body.querySelectorAll("[role='separator']"),
@@ -229,14 +264,16 @@ export const SpeakerAndMicrophoneSections: Story = {
       await expect(
         Number.parseFloat(getComputedStyle(rule).borderBottomWidth),
       ).toBeGreaterThan(0);
-      // Edge to edge, within the frame.
+      // Edge to edge, stopping only where the menu's frame is drawn.
       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.
+    // A section's first device sits further below the rule than it does from
+    // the menu's edge. Stated as the relationship rather than a number: what
+    // the design asks for is the asymmetry, and Compound's own heading margin
+    // alone would make the two equal.
     const control = document.body.querySelector("input[type='radio']")!;
     const ruleBottom = headings[0]
       .querySelector("h3")!
@@ -244,8 +281,8 @@ export const SpeakerAndMicrophoneSections: Story = {
     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.
+    // And one section stands further from the one above it than a heading does
+    // from its own first device — again the relationship, not a number.
     const groups = document.body.querySelectorAll("[role='group']");
     const speakers = groups[0].querySelectorAll("input[type='radio']");
     const lastSpeaker = speakers[speakers.length - 1].getBoundingClientRect();
@@ -259,6 +296,7 @@ export const SpeakerAndMicrophoneSections: Story = {
 export const OutputCannotBeChosen: Story = {
   args: {
     ...Default.args,
+    title: "Microphone",
     iconsAndLabels: "audio",
     enabled: true,
     options: [
@@ -288,6 +326,7 @@ export const OutputCannotBeChosen: Story = {
 export const OnlyOneDevice: Story = {
   args: {
     ...Default.args,
+    title: "Microphone",
     iconsAndLabels: "audio",
     enabled: true,
     options: [{ label: { type: "name", name: "Microphone 1" }, id: "mic1" }],
@@ -300,7 +339,7 @@ export const OnlyOneDevice: Story = {
     const canvas = within(canvasElement);
     await userEvent.click(canvas.getByRole("button", { name: "Microphone" }));
 
-    // Shown, disabled, rather than hidden.
+    // Shown rather than hidden, so the menu keeps its shape everywhere.
     const only = await within(document.body).findByRole("menuitemradio", {
       name: "Microphone 1",
     });
@@ -308,10 +347,14 @@ export const OnlyOneDevice: Story = {
   },
 };
 
-/** A requested device hasn't arrived: nothing in either section can be picked. */
+/**
+ * A device has been asked for and has not arrived. Nothing in either section
+ * can be picked until it does, so a second request cannot overtake the first.
+ */
 export const SelectionSettling: Story = {
   args: {
     ...Default.args,
+    title: "Microphone",
     iconsAndLabels: "audio",
     enabled: true,
     options: [
@@ -331,7 +374,8 @@ export const SelectionSettling: Story = {
     await userEvent.click(canvas.getByRole("button", { name: "Microphone" }));
     const menu = within(document.body);
 
-    // selectedOption never changes, so the request stays in flight.
+    // The story never changes `selectedOption`, which is what a device that has
+    // not taken effect yet looks like from here.
     await userEvent.click(
       await menu.findByRole("menuitemradio", { name: "Microphone 2" }),
     );
@@ -343,12 +387,17 @@ export const SelectionSettling: Story = {
 };
 
 /**
- * The ring shows for keyboard focus only. Asserted on the painted outline:
- * asserting data-focus-source would still pass with the CSS rule deleted.
+ * The focus ring belongs to the keyboard. Radix focuses whatever the pointer is
+ * over, so a ring that followed focus alone would trail the mouse.
+ *
+ * Asserted on the painted outline rather than on `data-focus-modality`: the
+ * attribute is what the stylesheet keys off, so asserting it would pass even
+ * with the rule deleted.
  */
 export const KeyboardFocusRing: Story = {
   args: {
     ...Default.args,
+    title: "Microphone",
     iconsAndLabels: "audio",
     enabled: true,
     options: [
@@ -379,10 +428,14 @@ export const KeyboardFocusRing: Story = {
   },
 };
 
-/** The list scrolls; the meter stays at the foot of the microphone section. */
+/**
+ * More devices than the menu can show. The list scrolls, and the meter stays at
+ * the foot of the Microphone section rather than scrolling away with it.
+ */
 export const ManyDevices: Story = {
   args: {
     ...Default.args,
+    title: "Microphone",
     iconsAndLabels: "audio",
     enabled: true,
     options: Array.from({ length: 20 }, (_, i) => ({
@@ -402,8 +455,11 @@ export const ManyDevices: Story = {
     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.
+    // The scroll container and the opaque sticky wrapper, named rather than
+    // walked: the nesting between them is layout, and it moves. The wrapper
+    // rather than the meter itself, because this story is about where the meter
+    // sits, not what it reads — without a fake microphone, as on WebKit, it
+    // says it has no permission instead of showing a level.
     const list = document.body.querySelector<HTMLElement>(
       `.${styles.deviceList}`,
     )!;
@@ -416,8 +472,10 @@ export const ManyDevices: Story = {
     });
     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.
+    // Scrolled so the Microphone section starts at the top of the scrollport.
+    // Its devices then run past the bottom, which is the position that tells a
+    // pinned meter from one that simply happens to be the last element: at the
+    // very bottom of the list the two look identical.
     const group = await menu.findByRole("group", { name: "Microphone" });
     list.scrollTop +=
       group.getBoundingClientRect().top - list.getBoundingClientRect().top;
@@ -430,30 +488,39 @@ export const ManyDevices: Story = {
     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.
+    // The whole menu is on screen. It opens upward from the foot of the call,
+    // so a list bounded by something bigger than the call — the document, say —
+    // runs off the top and takes the speakers with it.
     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.
+    // The meter is the one opaque thing in the menu, so it is the one thing
+    // that can cover the frame. Its box has to stay inside the menu's own. The
+    // paint itself needs a screenshot; this pins the geometry that decides it.
     await expect(pinned.left).toBeGreaterThan(frame.left);
     await expect(pinned.right).toBeLessThan(frame.right);
   },
 };
 
-/** Painted outline width, in px. */
+/** The painted outline width, in pixels, however the stylesheet spells it. */
 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. */
+/**
+ * A platform that enumerates no output devices and offers no way to choose one
+ * — Safari. The section still names where audio is going, disabled, rather than
+ * leaving a heading with nothing under it.
+ */
 export const OutputNotEnumerated: Story = {
   args: {
     ...Default.args,
+    title: "Microphone",
     iconsAndLabels: "audio",
     enabled: true,
     options: [
@@ -476,10 +543,19 @@ export const OutputNotEnumerated: Story = {
   },
 };
 
-/** The meter's icon shares the radio controls' centre line; only a real browser lays this out. */
+/**
+ * The level meter's icon sits on the same centre line as the radio controls of
+ * the devices above it.
+ *
+ * Held here because it is a fact about two components side by side, and because
+ * layout decides it: the meter's row is inset to keep the menu's frame clear,
+ * and its icon is a different size from a radio control, so the padding that
+ * lines them up is arithmetic that would otherwise go stale in silence.
+ */
 export const MeterAlignsWithTheDeviceRows: Story = {
   args: {
     ...Default.args,
+    title: "Microphone",
     iconsAndLabels: "audio",
     enabled: true,
     options: [
@@ -505,19 +581,29 @@ export const MeterAlignsWithTheDeviceRows: Story = {
   },
 };
 
-/** Inline-axis centre of an element. */
+/** Where an element sits on the inline axis, at its middle. */
 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. */
+/**
+ * Walking the device list with the keyboard, all the way to the last entry.
+ *
+ * The level meter stands over the foot of the list, so a row scrolled flush to
+ * the bottom edge arrives underneath it and can only half be read. Nothing in
+ * the DOM says an element is covered, so this compares where the two were
+ * actually drawn.
+ */
 export const KeyboardReachesEveryDevice: Story = {
   args: {
     ...Default.args,
+    title: "Microphone",
     iconsAndLabels: "audio",
     enabled: true,
-    // Enough to scroll both ways, so either end can hide a row.
+    // Enough of them that the list scrolls well past its own height, so that
+    // arrowing back up has to scroll too — which is where the heading can hide
+    // a row, as the meter can on the way down.
     options: Array.from({ length: 20 }, (_, i) => ({
       label: { type: "name" as const, name: `Microphone ${i + 1}` },
       id: `mic${i + 1}`,
@@ -542,7 +628,8 @@ export const KeyboardReachesEveryDevice: Story = {
       return element;
     });
 
-    // Drawn over the list: the sticky headings and the meter.
+    // Everything that is drawn over the scrolling list: a heading holds the top
+    // while its section is in view, the meter holds the foot.
     const overlays = [
       meter,
       ...document.body.querySelectorAll<HTMLElement>(
@@ -551,23 +638,32 @@ export const KeyboardReachesEveryDevice: Story = {
     ];
     const items = within(document.body).getAllByRole("menuitemradio");
 
-    // Down to the last device and back up.
+    // Down to the last device, as someone reading the list would, and back up
+    // again: a row can be hidden at either end.
     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.
+        // Nothing is drawn over the row the keyboard has just reached. Stated
+        // as overlap rather than as an edge, because whether a heading is in
+        // the way depends on whether its section is still 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. */
+/**
+ * A long list scrolled well into the microphones.
+ *
+ * The heading of the section you are in stays at the top of the list, so it is
+ * always clear which kind of device the rows below are. It leaves with its own
+ * section rather than stacking with the next one.
+ */
 export const HeadingsStayWhileScrolling: Story = {
   args: {
     ...Default.args,
+    title: "Microphone",
     iconsAndLabels: "audio",
     enabled: true,
     options: Array.from({ length: 20 }, (_, i) => ({
@@ -591,12 +687,14 @@ export const HeadingsStayWhileScrolling: Story = {
       `.${styles.deviceList}`,
     )!;
     const group = await menu.findByRole("group", { name: "Microphone" });
-    // By class: the heading is aria-hidden, and its group carries the name.
+    // By class, not role: the heading is aria-hidden decoration, because the
+    // group it belongs to is what carries the name.
     const heading = group.querySelector<HTMLElement>(
       `.${styles.sectionHeading}`,
     )!;
 
-    // Far enough that the heading is only on screen if it is stuck there.
+    // Far enough in that the heading's own place in the list is well above the
+    // top of the scrollport: it is only still on screen if it is stuck there.
     list.scrollTop +=
       group.getBoundingClientRect().top - list.getBoundingClientRect().top + 80;
 
@@ -607,7 +705,7 @@ export const HeadingsStayWhileScrolling: Story = {
     await expect(heading.getBoundingClientRect().bottom).toBeGreaterThan(
       scrollport.top,
     );
-    // Clear of the menu's frame.
+    // And it keeps clear of the menu's frame, as the meter does.
     const frame = document.body
       .querySelector("[role='menu']")!
       .getBoundingClientRect();
@@ -617,7 +715,13 @@ export const HeadingsStayWhileScrolling: Story = {
   },
 };
 
-/** How far the most overlapping of `overlays` covers `element`, in px. */
+/**
+ * How far an element is covered, in pixels, by the most overlapping of others.
+ *
+ * Nothing in the DOM says an element is obscured, and an element scrolled flush
+ * to an edge of its container looks no different there from one a sticky
+ * heading is sitting on top of. The boxes are the only witness.
+ */
 function overlapping(element: Element, overlays: Element[]): number {
   const box = element.getBoundingClientRect();
   return overlays.reduce((worst, overlay) => {
@@ -628,7 +732,13 @@ function overlapping(element: Element, overlays: Element[]): number {
   }, 0);
 }
 
-/** The blur toggle gets the keyboard ring too: it is the menu's child, not the list's. */
+/**
+ * The camera menu's blur toggle, which the keyboard reaches after the cameras.
+ *
+ * It is a checkbox item and a child of the menu rather than of the device list,
+ * so a focus ring hung on the list alone left it with the browser's own —
+ * which follows the pointer, and is what the ring exists to replace.
+ */
 export const FocusRingCoversTheBlurToggle: Story = {
   args: {
     ...VideoUnmute.args,
@@ -643,14 +753,16 @@ export const FocusRingCoversTheBlurToggle: Story = {
       name: /Blur background/,
     });
 
-    // Arrow down past the cameras to the toggle.
+    // Arrowed down past the cameras to the toggle, which is the last thing in
+    // the menu.
     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.
+    // And the pointer takes it away again, with the toggle still focused — so
+    // there is something to light up and it is not lit.
     await userEvent.hover(toggle);
     await expect(document.activeElement).toBe(toggle);
     await expect(outlineWidth(toggle)).toBe(0);

src/components/MediaMuteAndSwitchButton.test.tsx

@@ -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.
 */
 
-import { afterEach, describe, expect, test, vi } from "vitest";
+import { describe, expect, test, vi } from "vitest";
 import { axe } from "vitest-axe";
 import {
   act,
@@ -15,51 +15,37 @@ import {
   type RenderResult,
 } from "@testing-library/react";
 import userEvent from "@testing-library/user-event";
-import { Profiler, type JSX, useState, type ReactNode } from "react";
+import { type JSX, useState, type ReactNode } from "react";
 import { TooltipProvider } from "@vector-im/compound-web";
 
-import {
-  MediaMuteAndSwitchButton,
-  type MenuOptions,
-} from "./MediaMuteAndSwitchButton";
+import { MediaMuteAndSwitchButton } from "./MediaMuteAndSwitchButton";
 import { MediaDevicesContext } from "../MediaDevicesContext";
 import { type MediaDevices } from "../state/MediaDevices";
-import { restoreAudioCapture, stubAudioCapture } from "../utils/test";
 
 interface RenderOptions {
   requestDeviceNames: () => void;
 }
 
-function withProviders(
+function renderComponent(
   component: ReactNode,
   { requestDeviceNames = (): void => {} }: Partial<RenderOptions> = {},
-): JSX.Element {
-  return (
+): RenderResult {
+  return render(
     <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 iconsAndLabels={"audio"} />
+        <MediaMuteAndSwitchButton title={"Switcher"} iconsAndLabels={"audio"} />
       </TooltipProvider>,
     );
     expect(container).toMatchSnapshot();
@@ -71,7 +57,11 @@ describe("MediaMuteAndSwitchButton", () => {
       enabled: boolean,
     ): RenderResult => {
       return renderComponent(
-        <MediaMuteAndSwitchButton iconsAndLabels={type} enabled={enabled} />,
+        <MediaMuteAndSwitchButton
+          title={"Switcher"}
+          iconsAndLabels={type}
+          enabled={enabled}
+        />,
       );
     };
     const renderAudioEndabled = renderLabels("audio", true);
@@ -98,6 +88,7 @@ describe("MediaMuteAndSwitchButton", () => {
     const onMute = vi.fn();
     const { getByRole } = renderComponent(
       <MediaMuteAndSwitchButton
+        title={"Switcher"}
         onMuteClick={onMute}
         iconsAndLabels="audio"
         enabled={true}
@@ -114,6 +105,7 @@ describe("MediaMuteAndSwitchButton", () => {
     const onMute = vi.fn();
     const { getByRole } = renderComponent(
       <MediaMuteAndSwitchButton
+        title={"Switcher"}
         onMuteClick={onMute}
         iconsAndLabels="audio"
         enabled={true}
@@ -134,6 +126,7 @@ describe("MediaMuteAndSwitchButton", () => {
     const onMute = vi.fn();
     const { getByRole } = renderComponent(
       <MediaMuteAndSwitchButton
+        title={"Switcher"}
         onMuteClick={onMute}
         iconsAndLabels="video"
         enabled={true}
@@ -153,7 +146,11 @@ describe("MediaMuteAndSwitchButton", () => {
     const user = userEvent.setup();
     const requestDeviceNames = vi.fn();
     renderComponent(
-      <MediaMuteAndSwitchButton iconsAndLabels="audio" enabled />,
+      <MediaMuteAndSwitchButton
+        title="Switcher"
+        iconsAndLabels="audio"
+        enabled
+      />,
       { requestDeviceNames },
     );
 
@@ -167,6 +164,7 @@ describe("MediaMuteAndSwitchButton", () => {
     renderComponent(
       <>
         <MediaMuteAndSwitchButton
+          title="Switcher"
           iconsAndLabels="audio"
           enabled
           options={[
@@ -176,6 +174,7 @@ describe("MediaMuteAndSwitchButton", () => {
           selectedOption="mic1"
         />
         <MediaMuteAndSwitchButton
+          title="Switcher"
           iconsAndLabels="video"
           enabled
           options={[
@@ -201,6 +200,7 @@ describe("MediaMuteAndSwitchButton", () => {
     const onSelect = vi.fn();
     const { getByRole } = renderComponent(
       <MediaMuteAndSwitchButton
+        title="Switcher"
         iconsAndLabels="audio"
         enabled={true}
         options={[
@@ -224,6 +224,7 @@ describe("MediaMuteAndSwitchButton", () => {
     const onSelect = vi.fn();
     const { getByRole } = renderComponent(
       <MediaMuteAndSwitchButton
+        title="Switcher"
         iconsAndLabels="audio"
         enabled={true}
         options={[
@@ -252,6 +253,7 @@ describe("MediaMuteAndSwitchButton", () => {
       const [selectedOption, setSelectedOption] = useState("mic1");
       return (
         <MediaMuteAndSwitchButton
+          title="Switcher"
           iconsAndLabels="audio"
           enabled={true}
           options={[
@@ -311,6 +313,7 @@ describe("MediaMuteAndSwitchButton", () => {
     const onVideoBlurToggle = vi.fn();
     const { getByRole } = renderComponent(
       <MediaMuteAndSwitchButton
+        title="Switcher"
         iconsAndLabels="video"
         enabled={true}
         videoBlurToggleClick={onVideoBlurToggle}
@@ -335,6 +338,7 @@ describe("MediaMuteAndSwitchButton", () => {
     const user = userEvent.setup();
     const { getByRole } = renderComponent(
       <MediaMuteAndSwitchButton
+        title="Switcher"
         iconsAndLabels="audio"
         enabled={true}
         options={[
@@ -358,6 +362,7 @@ describe("MediaMuteAndSwitchButton", () => {
       const [selectedOption, setSelectedOption] = useState("mic1");
       return (
         <MediaMuteAndSwitchButton
+          title="Switcher"
           iconsAndLabels="audio"
           enabled={true}
           options={[
@@ -384,7 +389,8 @@ describe("MediaMuteAndSwitchButton", () => {
       screen.getByRole("menuitemradio", { name: "Microphone 2" }),
     );
 
-    // In flight: nothing else can be picked, in either section.
+    // In flight: nothing else can be picked, in either section, so a second
+    // request cannot overtake the first.
     for (const name of ["Microphone 1", "Speakers", "Headset"]) {
       expect(screen.getByRole("menuitemradio", { name })).toHaveAttribute(
         "aria-disabled",
@@ -397,7 +403,7 @@ describe("MediaMuteAndSwitchButton", () => {
       await promise;
     });
 
-    // Settled: selectable again.
+    // Settled: choosable again.
     expect(
       screen.getByRole("menuitemradio", { name: "Microphone 1" }),
     ).not.toHaveAttribute("aria-disabled", "true");
@@ -406,144 +412,11 @@ describe("MediaMuteAndSwitchButton", () => {
     ).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
+        title="Switcher"
         iconsAndLabels="video"
         enabled={true}
         options={[
@@ -558,8 +431,10 @@ describe("MediaMuteAndSwitchButton", () => {
 
     await user.click(getByRole("button", { name: "Camera" }));
 
+    // Same selection pattern as the microphone menu.
     screen.getByRole("menuitemradio", { name: "Camera 1", checked: true });
     screen.getByRole("menuitemradio", { name: "Camera 2", checked: false });
+    // And background blur is still reachable from here.
     expect(
       screen.getByRole("menuitemcheckbox", { name: "Blur background" }),
     ).toBeInTheDocument();
@@ -569,6 +444,7 @@ describe("MediaMuteAndSwitchButton", () => {
     const user = userEvent.setup();
     const { getByRole } = renderComponent(
       <MediaMuteAndSwitchButton
+        title="Switcher"
         iconsAndLabels="audio"
         enabled={true}
         options={[
@@ -583,25 +459,27 @@ describe("MediaMuteAndSwitchButton", () => {
     await user.click(getByRole("button", { name: "Microphone" }));
     const list = screen
       .getByRole("menuitemradio", { name: "Microphone 1" })
-      .closest("[data-focus-source]");
+      .closest("[data-focus-modality]");
 
-    // The menu focuses whatever the pointer is over, so focus alone says nothing.
-    expect(list).toHaveAttribute("data-focus-source", "pointer");
+    // The menu focuses whatever the pointer is over, so focus alone says
+    // nothing about how someone is navigating.
+    expect(list).toHaveAttribute("data-focus-modality", "pointer");
 
     await user.keyboard("{ArrowDown}");
-    expect(list).toHaveAttribute("data-focus-source", "keyboard");
+    expect(list).toHaveAttribute("data-focus-modality", "keyboard");
 
     await user.pointer({
       target: screen.getByRole("menuitemradio", { name: "Microphone 2" }),
       coords: { clientX: 10, clientY: 10 },
     });
-    expect(list).toHaveAttribute("data-focus-source", "pointer");
+    expect(list).toHaveAttribute("data-focus-modality", "pointer");
   });
 
   test("marks the selected device with the accent fill", async () => {
     const user = userEvent.setup();
     const { getByRole } = renderComponent(
       <MediaMuteAndSwitchButton
+        title="Switcher"
         iconsAndLabels="audio"
         enabled={true}
         options={[
@@ -619,7 +497,8 @@ describe("MediaMuteAndSwitchButton", () => {
       .getByRole("menuitemradio", { name: "Microphone 2" })
       .querySelector("input[type=radio]");
     expect(selected).toBeChecked();
-    // readOnly would paint the selected radio muted.
+    // A read-only control is painted muted, which loses the accent fill that
+    // marks the selection and makes the menu differ from settings.
     expect(selected).not.toHaveAttribute("readonly");
   });
 
@@ -627,6 +506,7 @@ describe("MediaMuteAndSwitchButton", () => {
     const user = userEvent.setup();
     const { getByRole } = renderComponent(
       <MediaMuteAndSwitchButton
+        title="Switcher"
         iconsAndLabels="audio"
         enabled={true}
         options={[
@@ -646,6 +526,8 @@ describe("MediaMuteAndSwitchButton", () => {
 
     await user.click(getByRole("button", { name: "Microphone" }));
 
+    // Includes the menu's own structure: wrappers between the menu and its
+    // items break the relationship the roles describe.
     const menu = document.querySelector('[role="menu"]');
     expect(await axe(menu as HTMLElement)).toHaveNoViolations();
   });
@@ -654,6 +536,7 @@ describe("MediaMuteAndSwitchButton", () => {
     const user = userEvent.setup();
     const { getByRole } = renderComponent(
       <MediaMuteAndSwitchButton
+        title="Switcher"
         iconsAndLabels="audio"
         enabled={true}
         options={[
@@ -687,6 +570,7 @@ describe("MediaMuteAndSwitchButton", () => {
     const user = userEvent.setup();
     const { getByRole } = renderComponent(
       <MediaMuteAndSwitchButton
+        title="Switcher"
         iconsAndLabels="audio"
         enabled={true}
         options={[
@@ -723,6 +607,7 @@ describe("MediaMuteAndSwitchButton", () => {
     const onSelectOutput = vi.fn();
     const { getByRole } = renderComponent(
       <MediaMuteAndSwitchButton
+        title="Switcher"
         iconsAndLabels="audio"
         enabled={true}
         options={[
@@ -750,6 +635,7 @@ describe("MediaMuteAndSwitchButton", () => {
     const onSelect = vi.fn();
     const { getByRole } = renderComponent(
       <MediaMuteAndSwitchButton
+        title="Switcher"
         iconsAndLabels="audio"
         enabled={true}
         options={[
@@ -762,7 +648,7 @@ describe("MediaMuteAndSwitchButton", () => {
 
     await user.click(getByRole("button", { name: "Microphone" }));
 
-    // Shown, but not selectable.
+    // Shown rather than hidden, so the menu keeps its shape, but not choosable.
     const only = screen.getByRole("menuitemradio", { name: "Microphone 1" });
     expect(only).toHaveAttribute("aria-disabled", "true");
   });
@@ -771,6 +657,7 @@ describe("MediaMuteAndSwitchButton", () => {
     const user = userEvent.setup();
     const { getByRole } = renderComponent(
       <MediaMuteAndSwitchButton
+        title="Switcher"
         iconsAndLabels="audio"
         enabled={true}
         options={[
@@ -779,7 +666,8 @@ describe("MediaMuteAndSwitchButton", () => {
         ]}
         selectedOption="mic1"
         onSelect={vi.fn()}
-        // As Safari: no outputs listed.
+        // Safari enumerates no output devices at all, and offers no way to
+        // choose one.
         outputOptions={[]}
         selectedOutputOption={undefined}
         onSelectOutput={undefined}
@@ -788,6 +676,8 @@ describe("MediaMuteAndSwitchButton", () => {
 
     await user.click(getByRole("button", { name: "Microphone" }));
 
+    // A heading with nothing under it says the feature is broken. Audio is
+    // playing somewhere, so the section names that somewhere and disables it.
     const speakers = screen
       .getAllByRole("group")
       .find((group) => group.getAttribute("aria-label") === "Speaker")!;
@@ -795,6 +685,8 @@ describe("MediaMuteAndSwitchButton", () => {
     expect(entries).toHaveLength(1);
     expect(entries[0]).toHaveAccessibleName("Default");
     expect(entries[0]).toHaveAttribute("aria-disabled", "true");
+    // And marked as the selection: it is where audio is going, so an unchecked
+    // lone entry would read as nothing being chosen at all.
     expect(entries[0]).toHaveAttribute("aria-checked", "true");
     expect(
       within(entries[0]).getByRole("radio", { hidden: true }),
@@ -805,6 +697,7 @@ describe("MediaMuteAndSwitchButton", () => {
     const user = userEvent.setup();
     const { getByRole } = renderComponent(
       <MediaMuteAndSwitchButton
+        title="Switcher"
         iconsAndLabels="audio"
         enabled={true}
         options={[
@@ -818,6 +711,7 @@ describe("MediaMuteAndSwitchButton", () => {
           { label: { type: "name", name: "Headset" }, id: "spk2" },
         ]}
         selectedOutputOption="spk1"
+        // No callback: nothing can be picked here.
         onSelectOutput={undefined}
       />,
     );
@@ -830,6 +724,7 @@ describe("MediaMuteAndSwitchButton", () => {
     expect(
       screen.getByRole("menuitemradio", { name: "Headset" }),
     ).toHaveAttribute("aria-disabled", "true");
+    // The microphone section is unaffected.
     expect(
       screen.getByRole("menuitemradio", { name: "Microphone 2" }),
     ).not.toHaveAttribute("aria-disabled", "true");

src/components/MediaMuteAndSwitchButton.tsx

@@ -39,7 +39,8 @@ import {
 import { useMediaDevices } from "../MediaDevicesContext";
 import { useRootElement } from "../RootElementContext";
 import { observeElementSize$ } from "../utils/elementSize";
-import { LiveMicrophoneLevelMeter } from "./MicrophoneLevelMeter";
+import { MicrophoneLevelMeter } from "./MicrophoneLevelMeter";
+import { useMicrophoneLevel } from "./useMicrophoneLevel";
 
 export interface MenuOptions {
   label: DeviceLabel | AudioOutputDeviceLabel;
@@ -47,6 +48,11 @@ export interface MenuOptions {
 }
 
 export interface MediaMuteAndSwitchButtonProps {
+  /**
+   * The accessible name of the menu. Defaults to a translated name for the
+   * media kind. Never shown: each section carries its own heading.
+   */
+  title?: string;
   /** If the Mute button is enabled */
   enabled?: boolean;
   /** Callback if the mute button is clicked */
@@ -58,11 +64,17 @@ export interface MediaMuteAndSwitchButtonProps {
   options?: MenuOptions[];
   /** The option that will currently be rendered as the selected option */
   selectedOption?: string;
-  /** Output (speaker) devices. Audio menu only. */
+  /**
+   * Output (speaker) devices, shown as their own section above the input
+   * section. Audio menu only; omitted entirely for video.
+   */
   outputOptions?: MenuOptions[];
   /** The output option currently rendered as selected */
   selectedOutputOption?: string;
-  /** Picks an output device. Undefined disables the speaker section. */
+  /**
+   * Called when an output device is picked. Undefined means no output can be
+   * chosen here, and the section renders disabled.
+   */
   onSelectOutput?: (id: string) => void;
   videoBlurToggleClick?: () => void;
   videoBlurEnabled?: boolean;
@@ -75,16 +87,33 @@ export interface MediaMuteAndSwitchButtonProps {
 
 const BLUR_ID = "blur";
 
-/** Id of the placeholder "Default" row, shown when the platform lists no outputs. */
+/**
+ * Stands for wherever the platform is sending audio, where it will not say.
+ *
+ * Not a device id the browser would recognise: nothing can be selected on a
+ * platform that lists no outputs, so this is only ever shown, never sent.
+ */
 const DEFAULT_OUTPUT_ID = "default";
 
-/** Largest share of the call area's height the device list may take. */
+/**
+ * The share of the call area the device list may fill.
+ *
+ * The menu carries its headings and the level meter as well, and a list that
+ * took the whole call would hide the call it belongs to.
+ */
 const LIST_SHARE_OF_CALL = 0.6;
 
-/** Smallest device list height in px, so a short call still shows more than one device. */
+/**
+ * The shortest the device list may be, whatever the call measures.
+ *
+ * A share alone collapses in a small call to a list that shows one device and
+ * gives no sign that there are others. Scrolling a short list is the better
+ * failure.
+ */
 const MIN_LIST_HEIGHT = 160;
 
 export const MediaMuteAndSwitchButton: FC<MediaMuteAndSwitchButtonProps> = ({
+  title,
   enabled,
   busy,
   onMuteClick,
@@ -98,34 +127,49 @@ export const MediaMuteAndSwitchButton: FC<MediaMuteAndSwitchButtonProps> = ({
   videoBlurToggleClick,
   onSelect,
 }) => {
-  // Requested but not yet selected. Keyed by kind too, since Chrome uses
-  // "default" for both an input and an output.
+  // Which device we have asked for but not yet been given. Carries the kind as
+  // well as the id, because an input and an output can share an id: "default"
+  // names both on Chrome.
   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();
 
+  // Radix focuses whatever the pointer is over, so the browser's own
+  // :focus-visible cannot tell us whether a person is navigating by keyboard:
+  // Chromium answers yes to everything after any key press, Firefox answers no
+  // to programmatic focus. Track it ourselves and let the styling follow.
   /**
-   * 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.
+   * Tracks which modality moved the focus, for as long as the list is mounted.
+   *
+   * A ref rather than an effect on `menuOpen`: that state is ours, the open
+   * menu is Radix's, and the two do not commit together — an effect keyed on
+   * ours can run before Radix has mounted the content, with nothing to attach
+   * to. The list existing is the honest signal that the menu is open.
+   *
+   * Recorded on the menu rather than held in state, because every item the menu
+   * can focus has to answer to it — the device rows and the camera menu's blur
+   * toggle, which is the menu's child and not the list's — and because which
+   * modality someone is using changes nothing that has to be rendered again.
    */
-  const trackFocusSource = useCallback(
+  const trackFocusModality = useCallback(
     (list: HTMLDivElement | null): (() => void) | undefined => {
+      // Watched on the menu, not on the document. Element Call can be mounted
+      // more than once in a host's page, and the menu is portalled out of the
+      // call root, so a document listener would also answer for a key pressed
+      // in the other instance, or in the host's own page. The menu rather than
+      // the list, because the first arrow key arrives while the menu itself
+      // holds focus, above anything we render.
       const menu = list?.closest<HTMLElement>('[role="menu"]');
       if (menu === null || menu === undefined) return;
-      const record = (source: "keyboard" | "pointer"): void => {
-        menu.dataset.focusSource = source;
+      // Each opening starts over: the modality belongs to whoever is using this
+      // menu now, not to whoever last used it.
+      const record = (modality: "keyboard" | "pointer"): void => {
+        menu.dataset.focusModality = modality;
       };
       record("pointer");
       const usedKeyboard = (): void => record("keyboard");
@@ -140,12 +184,18 @@ export const MediaMuteAndSwitchButton: FC<MediaMuteAndSwitchButtonProps> = ({
     [],
   );
 
-  // Measured on the call area: CSS can't size the portalled menu against it.
+  // The menu is portalled outside the call root, so nothing in the stylesheets
+  // can size it against the call. Measure the call area rather than the window,
+  // or the menu is wrong wherever Element Call is not the whole page.
   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.
+    // Followed rather than measured once: a host can resize the space Element
+    // Call is drawn in while the menu is open — a panel animating, a window
+    // dragged, a phone turned — and a bound taken on opening then describes a
+    // call area that no longer exists. Quantised before it reaches React, so a
+    // resize re-renders only when the bound itself moves.
     const subscription = observeElementSize$(rootElement)
       .pipe(
         map(({ height }) =>
@@ -157,17 +207,56 @@ export const MediaMuteAndSwitchButton: FC<MediaMuteAndSwitchButtonProps> = ({
     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();
+  // Only while the menu is open, so nothing holds a second capture of the
+  // microphone for the length of a call.
+  // The meter sits over the foot of the scrolling list, so the list has to
+  // keep that much of itself clear: a row scrolled to by the keyboard would
+  // otherwise arrive underneath it, half-read. Its own height, measured,
+  // because the failure states are two lines where a level is one.
+  const [meterHeight, setMeterHeight] = useState<number>();
+  const meter = useCallback(
+    (element: HTMLDivElement | null): (() => void) | undefined => {
+      if (element === null) return;
+      const subscription = observeElementSize$(element)
+        .pipe(
+          map(({ height }) => height),
+          distinctUntilChanged(),
+        )
+        .subscribe(setMeterHeight);
+      return (): void => subscription.unsubscribe();
+    },
+    [],
+  );
 
-  // Likewise at its head, for the sticky headings.
-  const [headingHeight, heading] = useMeasuredHeight();
+  // The headings stand over the head of the list, so it has to keep their
+  // height clear too — the same bargain as the meter, at the other end. One
+  // measurement serves both: the sections are headed alike.
+  const [headingHeight, setHeadingHeight] = useState<number>();
+  const heading = useCallback(
+    (element: HTMLDivElement | null): (() => void) | undefined => {
+      if (element === null) return;
+      const subscription = observeElementSize$(element)
+        .pipe(
+          map(({ height }) => height),
+          distinctUntilChanged(),
+        )
+        .subscribe(setHeadingHeight);
+      return (): void => subscription.unsubscribe();
+    },
+    [],
+  );
+
+  const microphoneState = useMicrophoneLevel(
+    selectedOption,
+    menuOpen && iconsAndLabels === "audio",
+  );
 
   useEffect(() => {
     if (menuOpen) devices.requestDeviceNames(); // No-op after the first call
   }, [menuOpen, devices]);
 
+  // The mute control differs between the two only in which button it is and
+  // what it is called; how it behaves is the same, and was worth saying once.
   const MuteButton = iconsAndLabels === "audio" ? MicButton : VideoButton;
   const button = (
     <MuteButton
@@ -185,6 +274,7 @@ export const MediaMuteAndSwitchButton: FC<MediaMuteAndSwitchButtonProps> = ({
     />
   );
 
+  // Only the camera menu carries a toggle, and only when the caller offers one.
   const toggles =
     iconsAndLabels === "video" && videoBlurToggleClick !== undefined
       ? [
@@ -197,23 +287,24 @@ export const MediaMuteAndSwitchButton: FC<MediaMuteAndSwitchButtonProps> = ({
       : [];
 
   let optionsButtonLabel: string;
-  let menuTitle: string;
+  let defaultMenuTitle: string;
   let numberedLabel: (number: number) => string;
   switch (iconsAndLabels) {
     case "video":
       optionsButtonLabel = t("settings.devices.camera");
-      menuTitle = t("settings.devices.camera_source");
+      defaultMenuTitle = t("settings.devices.camera_source");
       numberedLabel = (n): string =>
         t("settings.devices.camera_numbered", { n });
       break;
     case "audio":
       optionsButtonLabel = t("settings.devices.microphone");
-      menuTitle = t("settings.devices.mic_source");
+      defaultMenuTitle = t("settings.devices.mic_source");
       numberedLabel = (n): string =>
         t("settings.devices.microphone_numbered", { n });
       break;
   }
 
+  /** The text shown for a device, whichever kind of label it carries. */
   const labelText = (
     label: MenuOptions["label"],
     numbered: (n: number) => string,
@@ -234,24 +325,26 @@ export const MediaMuteAndSwitchButton: FC<MediaMuteAndSwitchButtonProps> = ({
     }
   };
 
-  // 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;
+  // A device we asked for that has not arrived yet. Until it does, nothing in
+  // the menu can be picked, so a second request cannot overtake the first.
   const settling =
     plannedSelection !== null &&
-    plannedSelection.id !== selectedOfPlannedKind &&
-    offeredOfPlannedKind?.some(({ id }) => id === plannedSelection.id) === true;
+    plannedSelection.id !==
+      (plannedSelection.kind === "output"
+        ? selectedOutputOption
+        : selectedOption);
 
-  // Safari lists no outputs: show a disabled, selected Default rather than an
-  // empty section.
+  // Safari enumerates no output devices at all, and offers no way to choose
+  // one, so the list arrives empty. The section is shown all the same — audio
+  // is playing somewhere — naming that somewhere and disabling it like any
+  // single entry. A heading with nothing beneath it reads as a broken feature,
+  // and leaves the menu a different shape on one browser.
   const noOutputsListed = outputOptions?.length === 0;
   const speakerOptions: MenuOptions[] | undefined = noOutputsListed
     ? [{ id: DEFAULT_OUTPUT_ID, label: { type: "default", name: null } }]
     : outputOptions;
+  // And it is the selection, not merely the only row: it is where audio is
+  // going. An unchecked lone entry reads as nothing being chosen at all.
   const selectedSpeaker = noOutputsListed
     ? DEFAULT_OUTPUT_ID
     : selectedOutputOption;
@@ -264,23 +357,30 @@ export const MediaMuteAndSwitchButton: FC<MediaMuteAndSwitchButtonProps> = ({
     numbered: (n: number) => string,
   ): ReactElement[] => {
     const list = items ?? [];
-    // Disabled rather than hidden, so the menu keeps its shape.
+    // Shown but not choosable when nothing can be picked here, or when there is
+    // only one device. The entry stays visible so the menu keeps the same shape
+    // on every platform.
     const disabled = select === undefined || list.length <= 1 || settling;
     return list.map(({ label, id }) => (
       <MenuItem
-        // A radio input may not sit inside a button.
+        // A radio input inside a button is invalid, and the menu needs an
+        // element it can give menuitemradio semantics to.
         as="div"
         hideChevron
         disabled={disabled}
         label={labelText(label, numbered)}
         Icon={
-          // Inert, not aria-hidden: aria-hidden alone leaves it focusable.
+          // Inert, not aria-hidden: a form control inside a menu item must be
+          // out of the focus order and out of the accessibility tree, and
+          // aria-hidden alone leaves it focusable. The item's aria-checked is
+          // what conveys the selection.
           <span inert>
             <RadioInput
               checked={selected === id}
               disabled={disabled}
-              // Not readOnly, which mutes the selected fill. The item handles
-              // the click.
+              // Not readOnly: that styles the control as muted, losing the
+              // accent fill that marks the selection. The menu item owns the
+              // interaction, so the change handler has nothing to do.
               onChange={(): void => {}}
             />
           </span>
@@ -320,11 +420,12 @@ export const MediaMuteAndSwitchButton: FC<MediaMuteAndSwitchButtonProps> = ({
       {button}
       <Menu
         className={styles.menu}
-        // Named for screen readers only: each section has its own heading.
-        title={menuTitle}
+        title={title ?? defaultMenuTitle}
+        // Each section carries its own heading, so the menu's own title would
+        // sit on top of the first one. Kept for the accessible name only.
         showTitle={false}
         open={menuOpen}
-        onOpenChange={onOpenChange}
+        onOpenChange={setMenuOpen}
         side="top"
         trigger={
           <Button
@@ -341,8 +442,9 @@ export const MediaMuteAndSwitchButton: FC<MediaMuteAndSwitchButtonProps> = ({
         }
       >
         <div
-          ref={trackFocusSource}
-          // Keeps the items the menu's own children for assistive tech.
+          ref={trackFocusModality}
+          // Transparent to assistive technology, so the menu still sees its
+          // items as its own children.
           role="none"
           className={styles.deviceList}
           style={
@@ -359,8 +461,11 @@ export const MediaMuteAndSwitchButton: FC<MediaMuteAndSwitchButtonProps> = ({
           {iconsAndLabels === "audio" && speakerOptions && (
             <>
               {/* A menu may only contain items, separators and groups, so each
-                  heading is a hidden part of a named group. */}
+                  heading belongs to a group rather than sitting beside the
+                  items it names. */}
               <div role="group" aria-label={t("settings.devices.speaker")}>
+                {/* The heading is decoration: the group carries the name, and
+                    a menu may only contain items, separators and groups. */}
                 <div aria-hidden className={styles.sectionHeading}>
                   <MenuTitle title={t("settings.devices.speaker")} />
                 </div>
@@ -378,7 +483,8 @@ export const MediaMuteAndSwitchButton: FC<MediaMuteAndSwitchButtonProps> = ({
             <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. */}
+            {/* The heading sits outside, so the meter can never ride up over it:
+              sticky only holds while this block is in view. */}
             <div role="none">
               {deviceItems(
                 "input",
@@ -388,11 +494,9 @@ export const MediaMuteAndSwitchButton: FC<MediaMuteAndSwitchButtonProps> = ({
                 numberedLabel,
               )}
               {iconsAndLabels === "audio" && (
-                <LiveMicrophoneLevelMeter
+                <MicrophoneLevelMeter
                   ref={meter}
-                  deviceId={selectedOption}
-                  // Only while open, so the microphone isn't held all call.
-                  active={menuOpen}
+                  state={microphoneState}
                   className={styles.stickyMeter}
                 />
               )}
@@ -415,25 +519,3 @@ 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

@@ -6,21 +6,20 @@ 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. */
+  /* The icon shares a centre with the radio controls in the device rows above,
+     which sit one 4x padding in from the menu's edge. Two things pull this row
+     out of line with them, and both come off the padding: the row is inset by a
+     border width so that the menu's frame stays visible behind it (see
+     `.stickyMeter`), and the icon is wider than a radio control, so it has to
+     start further left for the two to share a centre. Both are
+     measured in the MeterAlignsWithTheDeviceRows story rather than trusted:
+     jsdom lays nothing out, so only a real browser can hold this. */
   padding-inline-start: calc(
-    var(--cpd-space-4x) - var(--cpd-border-width-1) -
-      (var(--meter-icon-size) - var(--device-control-size)) / 2
+    var(--cpd-space-4x) - var(--cpd-border-width-1) - 2px
   );
   padding-inline-end: calc(var(--cpd-space-4x) * 2 + var(--cpd-space-2x));
 }
@@ -28,20 +27,33 @@ Please see LICENSE in the repository root for full details.
 .icon {
   color: var(--cpd-color-icon-secondary);
   flex-shrink: 0;
-  inline-size: var(--meter-icon-size);
-  block-size: var(--meter-icon-size);
+  /* Same width as a device row's icon column, so the bars start where the
+     device names start. */
+  inline-size: 24px;
 }
 
 .segments {
-  /* Bars keep one size and the width decides how many; the component reads the
-     sizes back from here. */
+  /* A bar and the space beside it are always the same size; what changes with
+     the width available is how many bars there are. Spreading a fixed number of
+     bars instead would make the meter a different shape in every place it is
+     used, and close them up into one solid block wherever the space ran short —
+     and a meter whose bars touch stops reading as a count, which is what
+     carries the level for anyone who cannot rely on the colour.
+
+     Both sizes are set here and nowhere else: the component reads them back off
+     the rendered bars to work out how many fit. */
   flex: 1;
-  /* So the bars never set the menu's width. */
+  /* The width decides the count, never the other way round. Containment is
+     what enforces that: without it the bars are both a floor under the width
+     and the widest thing in the menu, so the meter would set the menu's width
+     and the device names — which are what a person is reading — would have to
+     fit around it. */
   contain: inline-size;
   min-inline-size: 0;
   display: flex;
   align-items: center;
-  /* Half again a bar's width, per the design. */
+  /* Half again as wide as a bar, as the design has it: bars set as close as
+     their own width read as a solid block long before they touch. */
   gap: var(--cpd-space-1-5x);
 }
 
@@ -53,13 +65,16 @@ Please see LICENSE in the repository root for full details.
   background: var(--cpd-color-bg-subtle-primary);
 }
 
-/* The count of lit bars carries the level as well as their colour. */
+/* Filled segments carry the level by count as well as by colour, so the meter
+   stays readable without relying on hue. */
 .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. */
+  /* A paragraph brings a margin below it, which in a centred row does not push
+     the text down but lifts it: the margin box is what gets centred, so the
+     words end up above the middle and the icon beside them looks low. */
   margin-block: 0;
 }

src/components/MicrophoneLevelMeter.stories.tsx

@@ -14,10 +14,17 @@ import {
   type MicrophoneLevelMeterProps,
 } from "./MicrophoneLevelMeter";
 import styles from "./MicrophoneLevelMeter.module.css";
-import { LEVEL_SCALE } from "../state/MicrophoneLevel";
-import { constant } from "../state/Behavior";
+import { METER_SEGMENTS } from "../state/MicrophoneLevel";
 
-/** Roughly the menu's width. It only decides how many bars fit. */
+/**
+ * A width to show the meter at, close to the menu it lives in.
+ *
+ * Not a copy of the menu's width, and nothing depends on the two agreeing: a
+ * bar and the gap beside it are a fixed size now, so this only decides how many
+ * bars there is room for. Without a width at all the stories would shrink-wrap
+ * to almost nothing and show a meter two bars wide, which is no use to anyone
+ * looking at them.
+ */
 const STORY_WIDTH = 256;
 
 const meta = {
@@ -40,22 +47,29 @@ const meta = {
 export default meta;
 type Story = StoryObj<typeof meta>;
 
-/** A quiet room: hiss below the noise floor lights nothing. */
+/**
+ * A quiet room. Nothing is lit: room hiss below the noise floor must not read
+ * as "it can hear me".
+ */
 export const Silent: Story = {
-  args: { state: { type: "level", level$: constant(0) } },
+  args: { state: { type: "level", level: 0 } },
   play: async ({ canvasElement }) => {
     await expect(litSegments(canvasElement)).toBe(0);
   },
 };
 
 export const QuietSpeech: Story = {
-  args: { state: { type: "level", level$: constant(5) } },
+  args: { state: { type: "level", level: 5 } },
 };
 
 export const NormalSpeech: Story = {
-  args: { state: { type: "level", level$: constant(12) } },
+  args: { state: { type: "level", level: 12 } },
   play: async ({ canvasElement }) => {
-    // A floor, not a count: the count follows from the design's bar and gap sizes.
+    // Shown at something like the width of the menu, so the meter in a story
+    // reads like the meter in a call rather than like a handful of bars. The
+    // design's own mock has sixteen of them at this width; a floor rather than
+    // a count, because the number follows from the bar and gap sizes and those
+    // are the design's to change.
     await expect(
       canvasElement.getElementsByClassName(styles.segment).length,
     ).toBeGreaterThanOrEqual(15);
@@ -63,44 +77,48 @@ export const NormalSpeech: Story = {
 };
 
 export const LoudSpeech: Story = {
-  args: { state: { type: "level", level$: constant(LEVEL_SCALE) } },
+  args: { state: { type: "level", level: METER_SEGMENTS } },
 };
 
-/** The three volumes differ in how many bars are lit, not only in colour. */
+/**
+ * The three volumes differ by how many bars are lit, so the level survives
+ * greyscale and a screen reader as well as it survives colour.
+ */
 export const VolumesAreDistinguishable: Story = {
-  args: { state: { type: "level", level$: constant(5) } },
+  args: { state: { type: "level", level: 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) }}
-        />,
-      );
+    for (const level of [5, 12, METER_SEGMENTS]) {
+      await mount(<MicrophoneLevelMeter state={{ type: "level", level }} />);
       lit.push(litSegments(canvasElement));
       await expect(within(canvasElement).getByRole("meter")).toHaveAttribute(
         "aria-valuenow",
         String(level),
       );
     }
+    // Three different counts, rising: the level is carried by how many bars
+    // are lit, not by their colour alone.
     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. */
+/**
+ * Permission refused. A message with a next action, never a still meter that
+ * reads as silence.
+ */
 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/),
+      canvas.getByText(/Allow access in your browser settings/),
     ).toBeVisible();
   },
 };
 
-/** No input device, told apart from a refusal. */
+/** No input device at all, told apart from a refusal. */
 export const NoDevice: Story = {
   args: { state: { type: "no-device" } },
   play: async ({ canvasElement }) => {
@@ -108,7 +126,9 @@ export const NoDevice: Story = {
     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.
+    // The icon sits on the middle of the words, however many lines they run to.
+    // A paragraph's own margin would centre its margin box instead, leaving the
+    // text high and the icon looking low beside it.
     const middle = (element: Element): number => {
       const box = element.getBoundingClientRect();
       return box.top + box.height / 2;
@@ -119,9 +139,17 @@ export const NoDevice: Story = {
   },
 };
 
-/** The same meter at two widths: the bars keep their size and only their count changes. */
+/**
+ * The same meter at two widths.
+ *
+ * A bar and the space beside it are always the same size; what changes is how
+ * many bars there are. Spreading a fixed number of bars instead would make the
+ * meter a different shape in every place it is used, and close the bars up into
+ * one block wherever the space ran short — and bars that touch cannot be
+ * counted, which is what carries the level without colour.
+ */
 export const ShapeStaysTheSameAtAnyWidth: Story = {
-  args: { state: { type: "level", level$: constant(12) } },
+  args: { state: { type: "level", level: 12 } },
   play: async ({ mount, args }) => {
     const narrow = await measureAt(mount, args, 180);
     const wide = await measureAt(mount, args, 400);
@@ -129,17 +157,17 @@ export const ShapeStaysTheSameAtAnyWidth: Story = {
     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.
+    // And the bars are still bars, not one run of colour.
     await expect(narrow.gap).toBeGreaterThan(0);
   },
 };
 
-/** How many bars are lit. */
+/** How many bars are painted as carrying level, rather than as empty. */
 function litSegments(canvasElement: HTMLElement): number {
   return canvasElement.getElementsByClassName(styles.segmentLit).length;
 }
 
-/** Renders the meter at one width and reports its bars' shape. */
+/** Renders the meter at one width and reports the shape of its bars. */
 async function measureAt(
   mount: (ui: JSX.Element) => Promise<unknown>,
   args: MicrophoneLevelMeterProps,

src/components/MicrophoneLevelMeter.test.tsx

@@ -9,27 +9,25 @@ 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";
+import { METER_SEGMENTS } from "../state/MicrophoneLevel";
 
 describe("MicrophoneLevelMeter", () => {
   test("announces the level rather than relying on hue", () => {
-    render(
-      <MicrophoneLevelMeter state={{ type: "level", level$: constant(6) }} />,
-    );
+    render(<MicrophoneLevelMeter state={{ type: "level", level: 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}`);
+    expect(meter).toHaveAttribute("aria-valuemax", String(METER_SEGMENTS));
+    expect(meter).toHaveAttribute("aria-valuetext", `6 of ${METER_SEGMENTS}`);
   });
 
   test("shows distinct messages for denied permission and no input device", () => {
     const denied = render(
       <MicrophoneLevelMeter state={{ type: "permission-denied" }} />,
     );
+    // A next action, not a flat meter that reads as silence.
     expect(
-      denied.getByText(/Microphone access is blocked/),
+      denied.getByText(/Allow access in your browser settings/),
     ).toBeInTheDocument();
     expect(denied.queryByRole("meter")).toBeNull();
 

src/components/MicrophoneLevelMeter.tsx

@@ -5,14 +5,7 @@ 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 { useCallback, 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";
@@ -21,126 +14,107 @@ 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 { METER_SEGMENTS, 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;
+  /**
+   * The meter's own element. Its height is what a scroll container has to keep
+   * clear to stop the meter covering the row it has just scrolled to.
+   */
   ref?: Ref<HTMLDivElement>;
 }
 
-/** The input level of a microphone, or why there is none. */
+/**
+ * The live input level of the selected microphone, shown beneath it.
+ *
+ * It says whether the microphone is picking anything up, which is not the same
+ * as whether the user is being heard: it keeps moving while muted, and the mute
+ * control is what says nothing is transmitted.
+ */
 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);
+  // How many bars there is room for. The bars never change size, so this is
+  // what absorbs a change of width. Starts at the full count so that the first
+  // paint is a meter rather than a single bar, and so that a renderer with no
+  // layout at all — jsdom — still draws the whole thing.
+  const [barCount, setBarCount] = useState(METER_SEGMENTS);
   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;
-      };
+      return (): void => subscription.unsubscribe();
     },
     [],
   );
 
-  // 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" ? (
+  if (state.type !== "level")
+    return (
+      <div ref={ref} className={classNames(styles.meter, className)}>
+        <MicOnIcon width={24} height={24} className={styles.icon} aria-hidden />
         <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>
+    );
+
+  return (
+    <div ref={ref} className={classNames(styles.meter, className)}>
+      <MicOnIcon width={24} height={24} className={styles.icon} aria-hidden />
+      <div
+        ref={track}
+        className={styles.segments}
+        role="meter"
+        aria-label={t("microphone_level.label")}
+        aria-valuemin={0}
+        aria-valuemax={METER_SEGMENTS}
+        aria-valuenow={state.level}
+        aria-valuetext={t("microphone_level.value", {
+          level: state.level,
+          max: METER_SEGMENTS,
+        })}
+      >
+        {Array.from({ length: barCount }, (_, i) => (
+          <span
+            key={i}
+            aria-hidden
+            className={classNames(styles.segment, {
+              // The level is a share of the scale, not a number of bars: how
+              // many bars stand for it depends on how many there are.
+              [styles.segmentLit]:
+                i < Math.round((state.level / METER_SEGMENTS) * barCount),
+            })}
+          />
+        ))}
+      </div>
     </div>
   );
 };
 
-/** How many bars fit across `width`, measured so the stylesheet alone sets their size. */
+/**
+ * How many bars fit across `width`, at the size the stylesheet draws them.
+ *
+ * Measured off a rendered bar rather than told: the size of a bar and of the
+ * space beside it are a design question, settled in the stylesheet, and reading
+ * them back is what keeps them from being settled twice.
+ */
 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;
+  // A renderer that lays nothing out tells us nothing; keep the full count.
+  if (!(bar > 0) || !(gap >= 0)) return METER_SEGMENTS;
   return Math.max(1, Math.floor((width + gap) / (bar + gap)));
 }

src/components/useMicrophoneLevel.test.tsx

@@ -11,7 +11,9 @@ 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.
+// The capture itself, and releasing it, belong to observeMicrophoneState$ and
+// are covered in src/state/MicrophoneLevel.test.ts. What is left here is the
+// bridging: when the hook watches, and what it reports before it has an answer.
 describe("useMicrophoneLevel", () => {
   afterEach(restoreAudioCapture);
 
@@ -34,8 +36,7 @@ describe("useMicrophoneLevel", () => {
 
     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);
+    // No level carried over: the meter reads the new device or nothing at all.
+    expect(result.current).toEqual({ type: "level", level: 0 });
   });
 });

src/components/useMicrophoneLevel.ts

@@ -11,11 +11,17 @@ import {
   type MicrophoneState,
   observeMicrophoneState$,
 } from "../state/MicrophoneLevel";
-import { constant } from "../state/Behavior";
 
-const IDLE: MicrophoneState = { type: "level", level$: constant(0) };
+const IDLE: MicrophoneState = { type: "level", level: 0 };
 
-/** The live level of a microphone, captured only while `active`. */
+/**
+ * Reads the live input level of a microphone, while `active`.
+ *
+ * A bridge and nothing else: the capture, its lifetime and the maths belong to
+ * {@link observeMicrophoneState$}. Scoped to `active` so the device is held
+ * only while whatever shows the meter is on screen, rather than for the length
+ * of a call.
+ */
 export function useMicrophoneLevel(
   deviceId: string | undefined,
   active: boolean,
@@ -24,7 +30,8 @@ export function useMicrophoneLevel(
 
   useEffect(() => {
     if (!active) return;
-    // Idle first, so a new device doesn't start from the previous level.
+    // Idle first, so a new device starts from nothing rather than from the
+    // level the previous one was reading.
     setState(IDLE);
     const subscription = observeMicrophoneState$(deviceId).subscribe(setState);
     return (): void => subscription.unsubscribe();

src/grid/CallLayout.test.tsx

@@ -1,137 +0,0 @@
-/*
-Copyright 2026 Element Creations Ltd.
-
-SPDX-License-Identifier: AGPL-3.0-only OR LicenseRef-Element-Commercial
-Please see LICENSE in the repository root for full details.
-*/
-
-import { render } from "@testing-library/react";
-import { expect, test, vi } from "vitest";
-
-import { type CallLayout } from "./CallLayout";
-import { makeGridLayout } from "./GridLayout";
-import { makeSpotlightLandscapeLayout } from "./SpotlightLandscapeLayout";
-import { makeSpotlightPortraitLayout } from "./SpotlightPortraitLayout";
-import { type LayoutProps } from "./Grid";
-import { constant } from "../state/Behavior";
-import { type Alignment } from "../state/layout-types";
-import { type UserMediaViewModel } from "../state/media/UserMediaViewModel";
-import {
-  GridTileViewModel,
-  SpotlightTileViewModel,
-  type TileViewModel,
-} from "../state/TileViewModel";
-import { makeOneOnOneMobileLayout } from "./OneOnOneMobileLayout";
-import { makeSpotlightExpandedLayout } from "./SpotlightExpandedLayout";
-import { makeOneOnOneDesktopLayout } from "./OneOnOneDesktopLayout";
-
-// 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 => {},
-}));
-
-const minBounds$ = constant({ width: 800, height: 800 });
-
-const spotlight = {
-  vm: new SpotlightTileViewModel(
-    constant([]),
-    constant(false),
-    constant("solid"),
-  ),
-  alignment$: constant<Alignment>({ inline: "end", block: "end" }),
-  onDrag: () => {},
-};
-const grid = Array.from(
-  { length: 3 },
-  () => new GridTileViewModel(constant({} as UserMediaViewModel)),
-);
-const pip = {
-  alignment$: constant<Alignment>({ inline: "end", block: "end" }),
-  onDrag: () => {},
-  vm: { id: "pip" } as GridTileViewModel,
-  size$: constant("sm" as const),
-};
-
-const Slot: LayoutProps<unknown, TileViewModel, HTMLDivElement>["Slot"] = ({
-  id,
-  model,
-  onDrag,
-  children,
-  ...props
-}) => (
-  <div data-testid={`slot-${id}`} {...props}>
-    {children}
-  </div>
-);
-
-function snapshotLayout<Model>(layout: CallLayout<Model>, model: Model): void {
-  const {
-    foreground,
-    scrolling: Scrolling,
-    fixed: Fixed,
-  } = layout({ minBounds$ });
-  const scrollingLayer = <Scrolling model={model} Slot={Slot} />;
-  const fixedLayer = <Fixed model={model} Slot={Slot} />;
-  const { container } = render(
-    foreground === "fixed" ? (
-      <>
-        {scrollingLayer}
-        {fixedLayer}
-      </>
-    ) : (
-      <>
-        {fixedLayer}
-        {scrollingLayer}
-      </>
-    ),
-  );
-  expect(container).toMatchSnapshot();
-}
-
-test("grid layout", () =>
-  snapshotLayout(makeGridLayout, {
-    type: "grid",
-    spotlight,
-    grid,
-    setVisibleTiles: () => {},
-  }));
-
-test("spotlight landscape layout", () =>
-  snapshotLayout(makeSpotlightLandscapeLayout, {
-    type: "spotlight-landscape",
-    spotlight,
-    grid,
-    setVisibleTiles: () => {},
-  }));
-
-test("spotlight portrait layout", () =>
-  snapshotLayout(makeSpotlightPortraitLayout, {
-    type: "spotlight-portrait",
-    spotlight,
-    grid,
-    setVisibleTiles: () => {},
-  }));
-
-test("spotlight expanded layout", () =>
-  snapshotLayout(makeSpotlightExpandedLayout, {
-    type: "spotlight-expanded",
-    spotlight: spotlight.vm,
-    pip,
-  }));
-
-test("one-on-one desktop layout", () =>
-  snapshotLayout(makeOneOnOneDesktopLayout, {
-    type: "one-on-one-desktop",
-    spotlight: { id: "spotlight" } as GridTileViewModel,
-    pip,
-  }));
-
-test("one-on-one mobile layout", () =>
-  snapshotLayout(makeOneOnOneMobileLayout, {
-    type: "one-on-one-mobile",
-    spotlight: spotlight.vm,
-    pip,
-  }));

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$: Behavior<Bounds>;
+  minBounds$: Observable<Bounds>;
 }
 
 export interface CallLayoutOutputs<Model> {

src/grid/Grid.tsx

@@ -40,7 +40,6 @@ import { useMergedRefs } from "../useMergedRefs";
 import { TileWrapper } from "./TileWrapper";
 import { usePrefersReducedMotion } from "../usePrefersReducedMotion";
 import { useInitial } from "../useInitial";
-import { type DragCallback } from "../state/layout-types";
 
 const MAX_ANIMATED_TILES = 50; // Capped for performance reasons
 
@@ -84,10 +83,7 @@ interface DragState {
   cursorY: number;
 }
 
-export interface SlotProps<Model> extends Omit<
-  ComponentProps<"div">,
-  "onDrag"
-> {
+interface SlotProps<Model> extends Omit<ComponentProps<"div">, "onDrag"> {
   id: string;
   model: Model;
   onDrag?: DragCallback;
@@ -185,6 +181,27 @@ export interface TileProps<Model, R extends HTMLElement> {
   model: Model;
 }
 
+interface Drag {
+  /**
+   * The X coordinate of the dragged tile in grid space.
+   */
+  x: number;
+  /**
+   * The Y coordinate of the dragged tile in grid space.
+   */
+  y: number;
+  /**
+   * The X coordinate of the dragged tile, as a scalar of the grid width.
+   */
+  xRatio: number;
+  /**
+   * The Y coordinate of the dragged tile, as a scalar of the grid height.
+   */
+  yRatio: number;
+}
+
+export type DragCallback = (drag: Drag) => void;
+
 interface LayoutMemoProps<
   LayoutModel,
   TileModel,
@@ -447,13 +464,13 @@ export function Grid<
       )
       .catch(logger.error);
 
-    callback({
-      x: tileX,
-      y: tileY,
-      xRatio: tileX / (gridBounds.width - tile.width),
-      yRatio: tileY / (gridBounds.height - tile.height),
-      endOfGesture,
-    });
+    if (endOfGesture)
+      callback({
+        x: tileX,
+        y: tileY,
+        xRatio: tileX / (gridBounds.width - tile.width),
+        yRatio: tileY / (gridBounds.height - tile.height),
+      });
   };
 
   // Callback for useDrag. We could call useDrag here, but the default

src/grid/GridLayout.tsx

@@ -8,21 +8,17 @@ Please see LICENSE in the repository root for full details.
 import {
   type CSSProperties,
   type ReactNode,
+  useCallback,
   useMemo,
-  type FC,
-  type ComponentType,
 } 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 SlotProps, useUpdateLayout, useVisibleTiles } from "./Grid";
-import { useBehavior } from "../useBehavior";
-import {
-  type SpotlightTileViewModel,
-  type TileViewModel,
-} from "../state/TileViewModel.ts";
-import { type FloatingTile } from "../state/FloatingTile.ts";
+import { type DragCallback, useUpdateLayout, useVisibleTiles } from "./Grid";
 
 interface GridCSSProperties extends CSSProperties {
   "--gap": string;
@@ -30,27 +26,6 @@ interface GridCSSProperties extends CSSProperties {
   "--height": string;
 }
 
-interface SpotlightSlotProps {
-  model: FloatingTile & { vm: SpotlightTileViewModel };
-  Slot: ComponentType<SlotProps<TileViewModel>>;
-}
-
-const SpotlightSlot: FC<SpotlightSlotProps> = ({ model, Slot }) => {
-  useUpdateLayout();
-  const alignment = useBehavior(model.alignment$);
-
-  return (
-    <Slot
-      className={styles.slot}
-      id="spotlight"
-      model={model.vm}
-      onDrag={model.onDrag}
-      data-block-alignment={alignment.block}
-      data-inline-alignment={alignment.inline}
-    />
-  );
-};
-
 /**
  * An implementation of the "grid" layout, in which all participants are shown
  * together in a scrolling grid.
@@ -64,10 +39,36 @@ 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 onDragSpotlight: DragCallback = useCallback(
+      ({ xRatio, yRatio }) =>
+        model.spotlightAlignment$.next({
+          block: yRatio < 0.5 ? "start" : "end",
+          inline: xRatio < 0.5 ? "start" : "end",
+        }),
+      [model.spotlightAlignment$],
+    );
+
     return (
       <div ref={ref} className={styles.fixed}>
         {model.spotlight && (
-          <SpotlightSlot model={model.spotlight} Slot={Slot} />
+          <Slot
+            className={styles.slot}
+            id="spotlight"
+            model={model.spotlight}
+            onDrag={onDragSpotlight}
+            data-block-alignment={alignment.block}
+            data-inline-alignment={alignment.inline}
+          />
         )}
       </div>
     );
@@ -77,7 +78,7 @@ export const makeGridLayout: CallLayout<GridLayoutModel> = ({
   scrolling: function GridLayout({ ref, model, Slot }): ReactNode {
     useUpdateLayout();
     useVisibleTiles(model.setVisibleTiles);
-    const { width, height: minHeight } = useBehavior(minBounds$);
+    const { width, height: minHeight } = useObservableEagerState(minBounds$);
     const { gap, tileWidth, tileHeight } = useMemo(
       () => arrangeTiles(width, minHeight, model.grid.length),
       [width, minHeight, model.grid.length],

src/grid/OneOnOneDesktopLayout.tsx

@@ -6,13 +6,14 @@ SPDX-License-Identifier: AGPL-3.0-only OR LicenseRef-Element-Commercial
 Please see LICENSE in the repository root for full details.
 */
 
-import { type ReactNode, useMemo } from "react";
+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";
 import { type CallLayout, arrangeTiles } from "./CallLayout";
 import styles from "./OneOnOneDesktopLayout.module.css";
-import { useUpdateLayout } from "./Grid";
+import { type DragCallback, useUpdateLayout } from "./Grid";
 import { useBehavior } from "../useBehavior";
 
 /**
@@ -36,13 +37,22 @@ export const makeOneOnOneDesktopLayout: CallLayout<
     Slot,
   }): ReactNode {
     useUpdateLayout();
-    const { width, height } = useBehavior(minBounds$);
-    const pipAlignment = useBehavior(model.pip.alignment$);
+    const { width, height } = useObservableEagerState(minBounds$);
+    const pipAlignment = useBehavior(model.pipAlignment$);
     const { tileWidth, tileHeight } = useMemo(
       () => arrangeTiles(width, height, 1),
       [width, height],
     );
 
+    const onDragLocalTile: DragCallback = useCallback(
+      ({ xRatio, yRatio }) =>
+        model.pipAlignment$.next({
+          block: yRatio < 0.5 ? "start" : "end",
+          inline: xRatio < 0.5 ? "start" : "end",
+        }),
+      [model.pipAlignment$],
+    );
+
     return (
       <div ref={ref} className={styles.layer}>
         <Slot
@@ -53,9 +63,9 @@ export const makeOneOnOneDesktopLayout: CallLayout<
         >
           <Slot
             className={classNames(styles.slot, styles.local)}
-            id={model.pip.vm.id}
-            model={model.pip.vm}
-            onDrag={model.pip.onDrag}
+            id={model.pip.id}
+            model={model.pip}
+            onDrag={onDragLocalTile}
             data-block-alignment={pipAlignment.block}
             data-inline-alignment={pipAlignment.inline}
           />

src/grid/OneOnOneMobileLayout.tsx

@@ -6,43 +6,14 @@ SPDX-License-Identifier: AGPL-3.0-only OR LicenseRef-Element-Commercial
 Please see LICENSE in the repository root for full details.
 */
 
-import { type ComponentType, type FC, type ReactNode } from "react";
+import { type ReactNode, useCallback } from "react";
 import classNames from "classnames";
 
 import { type OneOnOneMobileLayout as OneOnOneMobileLayoutModel } from "../state/layout-types.ts";
 import { type CallLayout } from "./CallLayout";
 import styles from "./OneOnOneMobileLayout.module.css";
-import { type SlotProps, useUpdateLayout } from "./Grid";
+import { type DragCallback, useUpdateLayout } from "./Grid";
 import { useBehavior } from "../useBehavior";
-import { type FloatingTile } from "../state/FloatingTile.ts";
-import {
-  type GridTileViewModel,
-  type TileViewModel,
-} from "../state/TileViewModel.ts";
-import { type Behavior } from "../state/Behavior.ts";
-
-interface PipSlotProps {
-  model: FloatingTile & { vm: GridTileViewModel; size$: Behavior<"sm" | "lg"> };
-  Slot: ComponentType<SlotProps<TileViewModel>>;
-}
-
-const PipSlot: FC<PipSlotProps> = ({ model, Slot }) => {
-  useUpdateLayout();
-  const size = useBehavior(model.size$);
-  const alignment = useBehavior(model.alignment$);
-
-  return (
-    <Slot
-      className={classNames(styles.pip)}
-      id={model.vm.id}
-      model={model.vm}
-      onDrag={model.onDrag}
-      data-size={size}
-      data-block-alignment={alignment.block}
-      data-inline-alignment={alignment.inline}
-    />
-  );
-};
 
 /**
  * An implementation of the "one-on-one" layout for mobile platforms, in which
@@ -73,9 +44,30 @@ export const makeOneOnOneMobileLayout: CallLayout<
     Slot,
   }): ReactNode {
     useUpdateLayout();
+    const pipSize = useBehavior(model.pipSize$);
+    const pipAlignment = useBehavior(model.pipAlignment$);
+    const onDragLocalTile: DragCallback = useCallback(
+      ({ xRatio, yRatio }) =>
+        model.pipAlignment$.next({
+          block: yRatio < 0.5 ? "start" : "end",
+          inline: xRatio < 0.5 ? "start" : "end",
+        }),
+      [model.pipAlignment$],
+    );
+
     return (
       <div ref={ref} className={styles.layer}>
-        {model.pip && <PipSlot model={model.pip} Slot={Slot} />}
+        {model.pip && (
+          <Slot
+            className={classNames(styles.pip)}
+            id={model.pip.id}
+            model={model.pip}
+            onDrag={onDragLocalTile}
+            data-size={pipSize}
+            data-block-alignment={pipAlignment.block}
+            data-inline-alignment={pipAlignment.inline}
+          />
+        )}
       </div>
     );
   },

src/grid/SpotlightExpandedLayout.tsx

@@ -5,39 +5,13 @@ SPDX-License-Identifier: AGPL-3.0-only OR LicenseRef-Element-Commercial
 Please see LICENSE in the repository root for full details.
 */
 
-import { type ReactNode, type ComponentType, type FC } from "react";
+import { type ReactNode, useCallback } from "react";
 
 import { type SpotlightExpandedLayout as SpotlightExpandedLayoutModel } from "../state/layout-types.ts";
 import { type CallLayout } from "./CallLayout";
-import { type SlotProps, useUpdateLayout } from "./Grid";
+import { type DragCallback, useUpdateLayout } from "./Grid";
 import styles from "./SpotlightExpandedLayout.module.css";
 import { useBehavior } from "../useBehavior";
-import { type FloatingTile } from "../state/FloatingTile.ts";
-import {
-  type GridTileViewModel,
-  type TileViewModel,
-} from "../state/TileViewModel.ts";
-
-interface PipSlotProps {
-  model: FloatingTile & { vm: GridTileViewModel };
-  Slot: ComponentType<SlotProps<TileViewModel>>;
-}
-
-const PipSlot: FC<PipSlotProps> = ({ model, Slot }) => {
-  useUpdateLayout();
-  const alignment = useBehavior(model.alignment$);
-
-  return (
-    <Slot
-      className={styles.pip}
-      id={model.vm.id}
-      model={model.vm}
-      onDrag={model.onDrag}
-      data-block-alignment={alignment.block}
-      data-inline-alignment={alignment.inline}
-    />
-  );
-};
 
 /**
  * An implementation of the "expanded spotlight" layout, in which the spotlight
@@ -54,6 +28,7 @@ export const makeSpotlightExpandedLayout: CallLayout<
     Slot,
   }): ReactNode {
     useUpdateLayout();
+
     return (
       <div ref={ref} className={styles.layer}>
         <Slot
@@ -71,9 +46,29 @@ export const makeSpotlightExpandedLayout: CallLayout<
     Slot,
   }): ReactNode {
     useUpdateLayout();
+    const pipAlignment = useBehavior(model.pipAlignment$);
+
+    const onDragPip: DragCallback = useCallback(
+      ({ xRatio, yRatio }) =>
+        model.pipAlignment$.next({
+          block: yRatio < 0.5 ? "start" : "end",
+          inline: xRatio < 0.5 ? "start" : "end",
+        }),
+      [model.pipAlignment$],
+    );
+
     return (
       <div ref={ref} className={styles.layer}>
-        {model.pip && <PipSlot model={model.pip} Slot={Slot} />}
+        {model.pip && (
+          <Slot
+            className={styles.pip}
+            id={model.pip.id}
+            model={model.pip}
+            onDrag={onDragPip}
+            data-block-alignment={pipAlignment.block}
+            data-inline-alignment={pipAlignment.inline}
+          />
+        )}
       </div>
     );
   },

src/grid/SpotlightLandscapeLayout.tsx

@@ -6,6 +6,7 @@ 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";
@@ -32,7 +33,7 @@ export const makeSpotlightLandscapeLayout: CallLayout<
     Slot,
   }): ReactNode {
     useUpdateLayout();
-    useBehavior(minBounds$);
+    useObservableEagerState(minBounds$);
 
     return (
       <div ref={ref} className={styles.layer}>
@@ -40,7 +41,7 @@ export const makeSpotlightLandscapeLayout: CallLayout<
           <Slot
             className={styles.slot}
             id="spotlight"
-            model={model.spotlight.vm}
+            model={model.spotlight}
           />
         </div>
         <div className={styles.grid} />
@@ -55,11 +56,11 @@ export const makeSpotlightLandscapeLayout: CallLayout<
   }): ReactNode {
     useUpdateLayout();
     useVisibleTiles(model.setVisibleTiles);
-    useBehavior(minBounds$);
+    useObservableEagerState(minBounds$);
 
     return (
       <div ref={ref} className={styles.layer}>
-        <SpotlightSlot media$={model.spotlight.vm.media$} />
+        <SpotlightSlot media$={model.spotlight.media$} />
         <div className={styles.grid}>
           {model.grid.map((m) => (
             <Slot key={m.id} className={styles.slot} id={m.id} model={m} />

src/grid/SpotlightPortraitLayout.tsx

@@ -6,6 +6,7 @@ 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";
@@ -43,7 +44,7 @@ export const makeSpotlightPortraitLayout: CallLayout<
           <Slot
             className={styles.slot}
             id="spotlight"
-            model={model.spotlight.vm}
+            model={model.spotlight}
           />
         </div>
       </div>
@@ -57,7 +58,7 @@ export const makeSpotlightPortraitLayout: CallLayout<
   }): ReactNode {
     useUpdateLayout();
     useVisibleTiles(model.setVisibleTiles);
-    const { width } = useBehavior(minBounds$);
+    const { width } = useObservableEagerState(minBounds$);
     const { gap, tileWidth, tileHeight } = arrangeTiles(
       width,
       // TODO: We pretend that the minimum height is the width, because the
@@ -65,7 +66,7 @@ export const makeSpotlightPortraitLayout: CallLayout<
       width,
       model.grid.length,
     );
-    const withIndicators = useBehavior(model.spotlight.vm.media$).length > 1;
+    const withIndicators = useBehavior(model.spotlight.media$).length > 1;
 
     return (
       <div

src/grid/__snapshots__/CallLayout.test.tsx.snap

@@ -1,186 +0,0 @@
-// Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
-
-exports[`grid layout 1`] = `
-<div>
-  <div
-    class="_scrolling_e8555d"
-    style="width: 800px; --gap: 20px; --width: 370px; --height: 277px;"
-  >
-    <div
-      class="_slot_e8555d"
-      data-testid="slot-0"
-    />
-    <div
-      class="_slot_e8555d"
-      data-testid="slot-1"
-    />
-    <div
-      class="_slot_e8555d"
-      data-testid="slot-2"
-    />
-  </div>
-  <div
-    class="_fixed_e8555d"
-  >
-    <div
-      class="_slot_e8555d"
-      data-block-alignment="end"
-      data-inline-alignment="end"
-      data-testid="slot-spotlight"
-    />
-  </div>
-</div>
-`;
-
-exports[`one-on-one desktop layout 1`] = `
-<div>
-  <div
-    class="_layer_185815"
-  >
-    <div
-      class="_container_185815"
-      data-testid="slot-spotlight"
-      style="width: 760px; height: 570px;"
-    >
-      <div
-        class="_slot_185815 _local_185815"
-        data-block-alignment="end"
-        data-inline-alignment="end"
-        data-testid="slot-pip"
-      />
-    </div>
-  </div>
-  <div />
-</div>
-`;
-
-exports[`one-on-one mobile layout 1`] = `
-<div>
-  <div
-    class="_layer_c81c30"
-  >
-    <div
-      class="_spotlight_c81c30"
-      data-testid="slot-spotlight"
-    />
-  </div>
-  <div
-    class="_layer_c81c30"
-  >
-    <div
-      class="_pip_c81c30"
-      data-block-alignment="end"
-      data-inline-alignment="end"
-      data-size="sm"
-      data-testid="slot-pip"
-    />
-  </div>
-</div>
-`;
-
-exports[`spotlight expanded layout 1`] = `
-<div>
-  <div
-    class="_layer_e70191"
-  >
-    <div
-      class="_spotlight_e70191"
-      data-testid="slot-spotlight"
-    />
-  </div>
-  <div
-    class="_layer_e70191"
-  >
-    <div
-      class="_pip_e70191"
-      data-block-alignment="end"
-      data-inline-alignment="end"
-      data-testid="slot-pip"
-    />
-  </div>
-</div>
-`;
-
-exports[`spotlight landscape layout 1`] = `
-<div>
-  <div
-    class="_layer_29809c"
-  >
-    <div
-      class="_spotlight_29809c"
-    >
-      <div
-        class="_slot_29809c"
-        data-testid="slot-spotlight"
-      />
-    </div>
-    <div
-      class="_grid_29809c"
-    />
-  </div>
-  <div
-    class="_layer_29809c"
-  >
-    <div
-      class="_spotlight_29809c"
-    />
-    <div
-      class="_grid_29809c"
-    >
-      <div
-        class="_slot_29809c"
-        data-testid="slot-0"
-      />
-      <div
-        class="_slot_29809c"
-        data-testid="slot-1"
-      />
-      <div
-        class="_slot_29809c"
-        data-testid="slot-2"
-      />
-    </div>
-  </div>
-</div>
-`;
-
-exports[`spotlight portrait layout 1`] = `
-<div>
-  <div
-    class="_layer_065bbc"
-    style="--grid-gap: 20px; --grid-tile-width: 370px; --grid-tile-height: 277px;"
-  >
-    <div
-      class="_spotlight_065bbc"
-    />
-    <div
-      class="_grid_065bbc"
-    >
-      <div
-        class="_slot_065bbc"
-        data-testid="slot-0"
-      />
-      <div
-        class="_slot_065bbc"
-        data-testid="slot-1"
-      />
-      <div
-        class="_slot_065bbc"
-        data-testid="slot-2"
-      />
-    </div>
-  </div>
-  <div
-    class="_layer_065bbc"
-  >
-    <div
-      class="_spotlight_065bbc"
-    >
-      <div
-        class="_slot_065bbc"
-        data-testid="slot-spotlight"
-      />
-    </div>
-  </div>
-</div>
-`;

src/livekit/TrackProcessorContext.tsx

@@ -20,7 +20,8 @@ import {
 } from "react";
 import { type LocalVideoTrack } from "livekit-client";
 import { logger } from "matrix-js-sdk/lib/logger";
-import { combineLatest } from "rxjs";
+import { combineLatest, map, type Observable } from "rxjs";
+import { useObservable } from "observable-hooks";
 
 import {
   backgroundBlur as backgroundBlurSettings,
@@ -30,7 +31,6 @@ 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,8 +52,18 @@ export function useTrackProcessor(): ProcessorState {
   return state;
 }
 
-export function useTrackProcessorState$(): Behavior<ProcessorState> {
-  return useValueBehavior(useTrackProcessor());
+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$;
 }
 
 /**

src/reactions/index.ts

@@ -29,8 +29,6 @@ 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";
 
@@ -204,15 +202,6 @@ export const ReactionSet: ReactionOption[] = [
       mp3: baduntssSoundMp3,
     },
   },
-  {
-    emoji: "🛎️",
-    name: "bell",
-    alias: ["ding"],
-    sound: {
-      ogg: bellSoundOgg,
-      mp3: bellSoundMp3,
-    },
-  },
 ];
 
 export interface RaisedHandInfo {

src/room/InCallView.tsx

@@ -20,6 +20,8 @@ import {
 import useMeasure from "react-use-measure";
 import { type MatrixRTCSession } from "matrix-js-sdk/lib/matrixrtc";
 import classNames from "classnames";
+import { map } from "rxjs";
+import { useObservable } from "observable-hooks";
 import { logger as rootLogger } from "matrix-js-sdk/lib/logger";
 import { useTranslation } from "react-i18next";
 
@@ -75,11 +77,10 @@ import {
   useAppBarSubtitle,
 } from "../AppBar.tsx";
 import { useBehavior } from "../useBehavior.ts";
-import { useValueBehavior } from "../useValueBehavior.ts";
 import { constant } from "../state/Behavior.ts";
 import { Toast } from "../Toast.tsx";
 import overlayStyles from "../Overlay.module.css";
-import { useTrackProcessorState$ } from "../livekit/TrackProcessorContext.tsx";
+import { useTrackProcessorObservable$ } from "../livekit/TrackProcessorContext.tsx";
 import { type Layout } from "../state/layout-types.ts";
 import { ObservableScope } from "../state/ObservableScope.ts";
 import { CallFooter, type FooterSnapshot } from "../components/CallFooter.tsx";
@@ -120,7 +121,7 @@ export const ActiveCall: FC<ActiveCallProps> = (props) => {
   const urlParams = useUrlParams();
   const hostBridge = useHostBridge();
   const mediaDevices = useMediaDevices();
-  const trackProcessorState$ = useTrackProcessorState$();
+  const trackProcessorState$ = useTrackProcessorObservable$();
   // The element we have to draw the call in: the page, or the container a host
   // gave us. Its size, not the window's, decides how the call is laid out.
   const rootElement = useRootElement();
@@ -150,7 +151,7 @@ export const ActiveCall: FC<ActiveCallProps> = (props) => {
       },
       reactionsReader.raisedHands$,
       reactionsReader.reactions$,
-      trackProcessorState$,
+      scope.behavior(trackProcessorState$),
     );
     // TODO move this somewhere else once we use the callViewModel in the lobby as well!
     vm.join();
@@ -251,7 +252,7 @@ export const InCallView: FC<InCallViewProps> = ({
 
   useWakeLock();
   // TODO-MULTI-SFU This is unused now??
-  // const connectionState = useBehavior(vm.livekitConnectionState$);
+  // const connectionState = useObservableEagerState(vm.livekitConnectionState$);
 
   // annoyingly we don't get the disconnection reason this way,
   // only by listening for the emitted event
@@ -373,7 +374,10 @@ export const InCallView: FC<InCallViewProps> = ({
       edgeToEdge,
     ],
   );
-  const gridBounds$ = useValueBehavior(gridBounds);
+  const gridBoundsObservable$ = useObservable(
+    (inputs$) => inputs$.pipe(map(([gridBounds]) => gridBounds)),
+    [gridBounds],
+  );
 
   useAppBarHidden(!showHeader);
   useAppBarSubtitle(
@@ -534,7 +538,7 @@ export const InCallView: FC<InCallViewProps> = ({
   );
 
   const layouts = useMemo(() => {
-    const inputs = { minBounds$: gridBounds$ };
+    const inputs = { minBounds$: gridBoundsObservable$ };
     return {
       grid: makeGridLayout(inputs),
       "spotlight-landscape": makeSpotlightLandscapeLayout(inputs),
@@ -543,7 +547,7 @@ export const InCallView: FC<InCallViewProps> = ({
       "one-on-one-desktop": makeOneOnOneDesktopLayout(inputs),
       "one-on-one-mobile": makeOneOnOneMobileLayout(inputs),
     };
-  }, [gridBounds$]);
+  }, [gridBoundsObservable$]);
 
   const showFooter = useBehavior(footerVm.showFooter$);
   const renderContent = (): JSX.Element => {

src/room/LobbyView.test.tsx

@@ -20,12 +20,7 @@ import {
 
 import { LobbyView } from "./LobbyView";
 import { E2eeType } from "../e2ee/e2eeType";
-import {
-  mockMediaDevices,
-  mockMuteStates,
-  restoreAudioCapture,
-  stubAudioCapture,
-} from "../utils/test";
+import { mockMediaDevices, mockMuteStates } from "../utils/test";
 import { type MediaDevices } from "../state/MediaDevices";
 import { MediaDevicesContext } from "../MediaDevicesContext";
 import { type ProcessorState } from "../livekit/TrackProcessorContext";
@@ -189,11 +184,51 @@ describe("LobbyView", () => {
 });
 
 describe("LobbyView microphone level", () => {
-  afterEach(restoreAudioCapture);
+  const realMediaDevices = Object.getOwnPropertyDescriptor(
+    navigator,
+    "mediaDevices",
+  );
+
+  afterEach(() => {
+    vi.unstubAllGlobals();
+    // Put navigator back, or every later test in the run inherits the stub.
+    if (realMediaDevices === undefined) {
+      Reflect.deleteProperty(navigator, "mediaDevices");
+    } else {
+      Object.defineProperty(navigator, "mediaDevices", realMediaDevices);
+    }
+  });
+
+  /** Just enough of the Web Audio and capture APIs for the meter to run. */
+  function stubAudioCapture(): void {
+    vi.stubGlobal(
+      "AudioContext",
+      class {
+        public readonly state = "running";
+        public createAnalyser(): object {
+          return {
+            fftSize: 1024,
+            getByteTimeDomainData: (): void => {},
+          };
+        }
+        public createMediaStreamSource(): object {
+          return { connect: (): void => {} };
+        }
+        public close(): void {}
+      },
+    );
+    // Only this property: replacing navigator wholesale drops the getters on
+    // its prototype, such as userAgent.
+    Object.defineProperty(navigator, "mediaDevices", {
+      configurable: true,
+      value: {
+        getUserMedia: vi.fn().mockResolvedValue({ getTracks: () => [] }),
+      },
+    });
+  }
 
   it("shows the microphone level meter", async () => {
-    const capture = stubAudioCapture();
-    capture.grant();
+    stubAudioCapture();
     const user = userEvent.setup();
     const { getByRole } = renderLobbyView({}, false, "desktop", {
       requestDeviceNames: (): void => {},
@@ -206,7 +241,8 @@ describe("LobbyView microphone level", () => {
       },
     } as unknown as Partial<MediaDevices>);
 
-    // Pre-join reaches the meter through the same chevron as a call.
+    // The meter lives with the microphone picker, which the pre-join screen
+    // reaches through the same chevron as a call in progress.
     await user.click(getByRole("button", { name: "Microphone" }));
 
     expect(

src/room/LobbyView.tsx

@@ -24,6 +24,7 @@ import {
   type LocalVideoTrack,
   Track,
 } from "livekit-client";
+import { useObservableEagerState } from "observable-hooks";
 
 import inCallStyles from "./InCallView.module.css";
 import styles from "./LobbyView.module.css";
@@ -124,7 +125,9 @@ export const LobbyView: FC<Props> = ({
   );
 
   const devices = useMediaDevices();
-  const videoInputId = useBehavior(devices.videoInput.selected$)?.id;
+  const videoInputId = useObservableEagerState(
+    devices.videoInput.selected$,
+  )?.id;
 
   // Capture the audio options as they were when we first mounted, because
   // we're not doing anything with the audio anyway so we don't need to

src/settings/DeviceSelection.test.tsx

@@ -1,82 +0,0 @@
-/*
-Copyright 2026 Element Creations Ltd.
-
-SPDX-License-Identifier: AGPL-3.0-only OR LicenseRef-Element-Commercial
-Please see LICENSE in the repository root for full details.
-*/
-
-import { render, screen } from "@testing-library/react";
-import userEvent from "@testing-library/user-event";
-import { Form } from "@vector-im/compound-web";
-import { describe, expect, it, vi } from "vitest";
-
-import { DeviceSelection } from "./DeviceSelection";
-import { constant } from "../state/Behavior";
-import {
-  type AudioOutputDeviceLabel,
-  type DeviceLabel,
-  type MediaDevice,
-  type SelectedDevice,
-} from "../state/MediaDevices";
-
-type Device = MediaDevice<DeviceLabel | AudioOutputDeviceLabel, SelectedDevice>;
-
-function mockDevice(
-  available: [string, DeviceLabel][],
-  selectedId: string | undefined,
-): Device & { select: ReturnType<typeof vi.fn> } {
-  return {
-    available$: constant(new Map(available)),
-    selected$: constant(
-      selectedId === undefined ? undefined : { id: selectedId },
-    ),
-    select: vi.fn(),
-  } as unknown as Device & { select: ReturnType<typeof vi.fn> };
-}
-
-const twoDevices: [string, DeviceLabel][] = [
-  ["a", { type: "name", name: "Mic A" }],
-  ["b", { type: "number", number: 2 }],
-];
-
-describe("DeviceSelection", () => {
-  it("marks the selected device and selects another on click", async () => {
-    const device = mockDevice(twoDevices, "a");
-    render(
-      <Form.Root>
-        <DeviceSelection
-          device={device}
-          title="Microphone"
-          numberedLabel={(n) => `Microphone ${n}`}
-        />
-      </Form.Root>,
-    );
-
-    const first = screen.getByRole<HTMLInputElement>("radio", {
-      name: "Mic A",
-    });
-    const second = screen.getByRole<HTMLInputElement>("radio", {
-      name: "Microphone 2",
-    });
-    expect(first.checked).toBe(true);
-    expect(second.checked).toBe(false);
-
-    await userEvent.click(second);
-    expect(device.select).toHaveBeenCalledWith("b");
-  });
-
-  it("shows nothing when there is no choice to make", () => {
-    const device = mockDevice([twoDevices[0]], "a");
-    render(
-      <Form.Root>
-        <DeviceSelection
-          device={device}
-          title="Microphone"
-          numberedLabel={(n) => `Microphone ${n}`}
-        />
-      </Form.Root>,
-    );
-    expect(screen.queryByRole("radio")).toBeNull();
-    expect(screen.queryByText("Microphone")).toBeNull();
-  });
-});

src/settings/DeviceSelection.tsx

@@ -21,6 +21,7 @@ import {
   Separator,
 } from "@vector-im/compound-web";
 import { Trans, useTranslation } from "react-i18next";
+import { useObservableEagerState } from "observable-hooks";
 
 import {
   type AudioOutputDeviceLabel,
@@ -29,7 +30,6 @@ import {
   type MediaDevice,
 } from "../state/MediaDevices";
 import styles from "./DeviceSelection.module.css";
-import { useBehavior } from "../useBehavior";
 
 interface Props {
   device: MediaDevice<DeviceLabel | AudioOutputDeviceLabel, SelectedDevice>;
@@ -44,8 +44,8 @@ export const DeviceSelection: FC<Props> = ({
 }) => {
   const { t } = useTranslation();
   const groupId = useId();
-  const available = useBehavior(device.available$);
-  const selectedId = useBehavior(device.selected$)?.id;
+  const available = useObservableEagerState(device.available$);
+  const selectedId = useObservableEagerState(device.selected$)?.id;
   const onChange = useCallback(
     (e: ChangeEvent<HTMLInputElement>) => {
       device.select(e.target.value);

src/sound/LICENCE.md

@@ -10,7 +10,6 @@ The following sound effects have been licensed from Pixabay, under https://pixab
 - `reactions/generic`
 - `reactions/lightbulb`
 - `reactions/party`
-- `reactions/bell`
 
 ### Other
 

src/state/CallViewModel/CallViewModel.test.ts

@@ -176,7 +176,7 @@ function summarizeLayout$(l$: Observable<Layout>): Observable<LayoutSummary> {
         case "grid":
           return combineLatest(
             [
-              l.spotlight?.vm.media$ ?? constant(undefined),
+              l.spotlight?.media$ ?? constant(undefined),
               ...l.grid.map((vm) => vm.media$),
             ],
             (spotlight, ...grid) => ({
@@ -188,7 +188,7 @@ function summarizeLayout$(l$: Observable<Layout>): Observable<LayoutSummary> {
         case "spotlight-landscape":
         case "spotlight-portrait":
           return combineLatest(
-            [l.spotlight.vm.media$, ...l.grid.map((vm) => vm.media$)],
+            [l.spotlight.media$, ...l.grid.map((vm) => vm.media$)],
             (spotlight, ...grid) => ({
               type: l.type,
               spotlight: spotlight.map((vm) => vm.id),
@@ -197,7 +197,7 @@ function summarizeLayout$(l$: Observable<Layout>): Observable<LayoutSummary> {
           );
         case "spotlight-expanded":
           return combineLatest(
-            [l.spotlight.media$, l.pip?.vm.media$ ?? constant(undefined)],
+            [l.spotlight.media$, l.pip?.media$ ?? constant(undefined)],
             (spotlight, pip) => ({
               type: l.type,
               spotlight: spotlight.map((vm) => vm.id),
@@ -206,7 +206,7 @@ function summarizeLayout$(l$: Observable<Layout>): Observable<LayoutSummary> {
           );
         case "one-on-one-desktop":
           return combineLatest(
-            [l.spotlight.media$, l.pip.vm.media$],
+            [l.spotlight.media$, l.pip.media$],
             (spotlight, pip) => ({
               type: l.type,
               spotlight: spotlight.id,
@@ -217,8 +217,8 @@ function summarizeLayout$(l$: Observable<Layout>): Observable<LayoutSummary> {
           return combineLatest(
             [
               l.spotlight.media$,
-              l.pip?.vm.media$ ?? constant(undefined),
-              l.pip?.size$ ?? constant(undefined),
+              l.pip?.media$ ?? constant(undefined),
+              l.pipSize$,
             ],
             (spotlight, pip, pipSize) => ({
               type: l.type,
@@ -480,7 +480,7 @@ describe.each(modes)("CallViewModel (%s mode)", (mode) => {
                 type: "one-on-one-mobile",
                 spotlight: [`${aliceId}:0`],
                 pip: undefined,
-                pipSize: undefined,
+                pipSize: "lg",
               },
               b: {
                 type: "one-on-one-mobile",
@@ -518,7 +518,7 @@ describe.each(modes)("CallViewModel (%s mode)", (mode) => {
               type: "one-on-one-mobile",
               spotlight: [`${aliceId}:0`],
               pip: undefined,
-              pipSize: undefined,
+              pipSize: "lg",
             },
           });
           // It wouldn't be clear whether Alice or Bob is the remote video tile,
@@ -566,7 +566,7 @@ describe.each(modes)("CallViewModel (%s mode)", (mode) => {
                 type: "one-on-one-mobile",
                 spotlight: [`${aliceId}:0`],
                 pip: undefined,
-                pipSize: undefined,
+                pipSize: "sm",
               },
               b: {
                 type: "spotlight-landscape",
@@ -765,7 +765,7 @@ describe.each(modes)("CallViewModel (%s mode)", (mode) => {
                 type: "one-on-one-mobile",
                 spotlight: [`${aliceId}:0`],
                 pip: undefined,
-                pipSize: undefined,
+                pipSize: "lg",
               },
               b: {
                 // In a larger window, expect the one-on-one desktop layout

src/state/CallViewModel/CallViewModel.ts

@@ -16,6 +16,7 @@ import {
 import { type Room as MatrixRoom } from "matrix-js-sdk";
 import {
   BehaviorSubject,
+  catchError,
   combineLatest,
   distinctUntilChanged,
   filter,
@@ -38,7 +39,6 @@ import {
   throttleTime,
   timer,
   takeUntil,
-  from,
 } from "rxjs";
 import { type Logger, logger as rootLogger } from "matrix-js-sdk/lib/logger";
 import {
@@ -93,6 +93,7 @@ import { type ProcessorState } from "../../livekit/TrackProcessorContext";
 import { type HostBridge, nullHostBridge } from "../../HostBridge";
 import {
   layoutShallowEquals,
+  type Alignment,
   type GridLayoutMedia,
   type Layout,
   type LayoutMedia,
@@ -111,7 +112,7 @@ import {
   TransportState,
 } from "./localMember/LocalMember.ts";
 import {
-  getLocalTransport,
+  createLocalTransport$,
   type LocalTransport,
 } from "./localMember/LocalTransport.ts";
 import {
@@ -162,7 +163,6 @@ import {
   type RingingMediaViewModel,
 } from "../media/RingingMediaViewModel.ts";
 import { type GridTileViewModel } from "../TileViewModel.ts";
-import { createFloatingTile } from "../FloatingTile.ts";
 
 //TODO
 // Larger rename
@@ -573,16 +573,16 @@ export function createCallViewModel$(
         : `${userId}:${deviceId}`,
   };
 
-  const localTransport$ = options.localTransport
-    ? constant(options.localTransport)
-    : from(
-        getLocalTransport({
-          ownMembershipIdentity,
-          client,
-          roomId: matrixRoom.roomId,
-          matrixRTCMode,
-        }),
-      );
+  const localTransport =
+    options.localTransport ??
+    createLocalTransport$({
+      scope: scope,
+      memberships$: memberships$,
+      ownMembershipIdentity,
+      client,
+      roomId: matrixRoom.roomId,
+      matrixRTCMode,
+    });
 
   const connectionFactory =
     options.connectionFactory ??
@@ -599,7 +599,17 @@ export function createCallViewModel$(
   const connectionManager = createConnectionManager$({
     scope: scope,
     connectionFactory: connectionFactory,
-    localTransport$,
+    localTransport$: scope.behavior(
+      localTransport.active$.pipe(
+        catchError((e: unknown) => {
+          logger.info(
+            "could not pass local transport to createConnectionManager$. localTransport$ threw an error",
+            e,
+          );
+          return of(null);
+        }),
+      ),
+    ),
     remoteTransports$: membershipsAndTransports.transports$,
     logger: logger,
     ownMembershipIdentity,
@@ -655,7 +665,7 @@ export function createCallViewModel$(
     connectionManager,
     client,
     matrixRTCSession,
-    localTransport$,
+    localTransport,
     roomId: matrixRoom.roomId,
     hideScreensharing,
     hostBridge,
@@ -1548,28 +1558,32 @@ export function createCallViewModel$(
   );
 
   /**
-   * State of the floating spotlight tile, if present.
+   * The alignment of the floating spotlight tile, if present.
    */
-  const floatingSpotlightTile = createFloatingTile(scope, {
+  const spotlightAlignment$ = new BehaviorSubject<Alignment>({
     inline: "end",
     block: "end",
   });
   /**
-   * State of the small picture-in-picture tile, if present, when in landscape.
+   * The size of the small picture-in-picture tile, if present, when in portrait.
    */
-  const landscapePipTile = createFloatingTile(scope, {
+  const portraitPipSize$ = scope.behavior(
+    showFooter$.pipe(map((showFooter) => (showFooter ? "lg" : "sm"))),
+  );
+  /**
+   * The alignment of the small picture-in-picture tile, if present, when in portrait.
+   */
+  const portraitPipAlignment$ = new BehaviorSubject<Alignment>({
+    inline: "end",
+    block: "end",
+  });
+  /**
+   * The alignment of the small picture-in-picture tile, if present, when in landscape.
+   */
+  const landscapePipAlignment$ = new BehaviorSubject<Alignment>({
     inline: "end",
     block: "start",
   });
-  /**
-   * State of the small picture-in-picture tile, if present, when in portrait.
-   */
-  const portraitPipTile = {
-    ...createFloatingTile(scope, { inline: "end", block: "end" }),
-    size$: scope.behavior(
-      showFooter$.pipe(map((showFooter) => (showFooter ? "lg" : "sm"))),
-    ),
-  };
 
   // There is a cyclical dependency here: the layout algorithms want to know
   // which tiles are on screen, but to know which tiles are on screen we have to
@@ -1599,7 +1613,7 @@ export function createCallViewModel$(
             case "spotlight-portrait":
               [layout, newTiles] = gridLikeLayout(
                 media,
-                floatingSpotlightTile,
+                spotlightAlignment$,
                 visibleTiles,
                 setVisibleTiles,
                 prevTiles,
@@ -1609,25 +1623,26 @@ export function createCallViewModel$(
             case "spotlight-expanded":
               [layout, newTiles] = spotlightExpandedLayout(
                 media,
-                landscapePipTile,
+                landscapePipAlignment$,
                 prevTiles,
               );
               break;
             case "one-on-one-desktop":
               [layout, newTiles] = oneOnOneDesktopLayout(
                 media,
-                landscapePipTile,
+                landscapePipAlignment$,
                 prevTiles,
               );
-              pip = layout.pip.vm;
+              pip = layout.pip;
               break;
             case "one-on-one-mobile":
               [layout, newTiles] = oneOnOneMobileLayout(
                 media,
-                portraitPipTile,
+                portraitPipSize$,
+                portraitPipAlignment$,
                 prevTiles,
               );
-              pip = layout.pip?.vm;
+              pip = layout.pip;
               break;
             case "pip":
               [layout, newTiles] = pipLayout(media, prevTiles);

src/state/CallViewModel/CallViewModelTestUtils.ts

@@ -210,8 +210,11 @@ export function withCallViewModel(mode: MatrixRTCMode) {
         connectionState$,
         windowSize$,
         localTransport: {
-          transport: exampleTransport,
-          sfuConfig: exampleSfuConfig,
+          active$: constant({
+            transport: exampleTransport,
+            sfuConfig: exampleSfuConfig,
+          }),
+          advertised$: constant(exampleTransport),
         },
         connectionFactory: {
           createConnection(

src/state/CallViewModel/localMember/LocalMember.test.ts

@@ -21,7 +21,7 @@ import {
   beforeEach,
   afterEach,
 } from "vitest";
-import { BehaviorSubject, map, of, Subject } from "rxjs";
+import { BehaviorSubject, map, of } from "rxjs";
 import { logger } from "matrix-js-sdk/lib/logger";
 import { type LocalParticipant, type LocalTrack } from "livekit-client";
 import fetchMock from "fetch-mock";
@@ -50,7 +50,10 @@ import {
   TrackState,
   watchScreenShareToggle,
 } from "./LocalMember";
-import { MatrixRTCTransportMissingError } from "../../../utils/errors";
+import {
+  FailToGetOpenIdToken,
+  MatrixRTCTransportMissingError,
+} from "../../../utils/errors";
 import { Epoch, ObservableScope } from "../../ObservableScope";
 import { constant } from "../../Behavior";
 import { ConnectionManagerData } from "../remoteMembers/ConnectionManager";
@@ -58,7 +61,10 @@ import { ConnectionState, type Connection } from "../remoteMembers/Connection";
 import { type Publisher } from "./Publisher";
 import { initializeWidget } from "../../../widget";
 import { nullHostBridge } from "../../../HostBridge";
-import { type LocalTransport } from "./LocalTransport";
+import {
+  type LocalTransport,
+  type LocalTransportWithSFUConfig,
+} from "./LocalTransport";
 import * as openIDSFU from "../../../livekit/openIDSFU";
 
 initializeWidget();
@@ -255,7 +261,7 @@ describe("LocalMembership", () => {
   });
 
   it("throws error on missing RTC config error", () => {
-    withTestScheduler(({ scope, hot, expectObservable }) => {
+    withTestScheduler(({ scope, hot, behavior, expectObservable }) => {
       const localTransport$ = scope.behavior<null | LivekitTransportConfig>(
         hot("1ms #", {}, new MatrixRTCTransportMissingError("domain.com")),
         null,
@@ -271,15 +277,16 @@ describe("LocalMembership", () => {
         ),
       };
 
+      const aLocalTransport: LocalTransport = {
+        advertised$: localTransport$,
+        active$: behavior("a", { a: null }),
+      };
+
       const localMembership = createLocalMembership$({
         scope,
         ...defaultCreateLocalMemberValues,
         connectionManager: mockConnectionManager,
-        localTransport$: hot(
-          "1ms #",
-          {},
-          new MatrixRTCTransportMissingError("domain.com"),
-        ),
+        localTransport: aLocalTransport,
       });
 
       expectObservable(localMembership.localMemberState$).toBe("ne", {
@@ -289,9 +296,61 @@ describe("LocalMembership", () => {
     });
   });
 
+  it("Should not publish to active transport if advertised has errors", () => {
+    withTestScheduler(({ scope, hot, behavior, expectObservable }) => {
+      const advertised$ = scope.behavior<null | LivekitTransportConfig>(
+        hot("--#", {}, new FailToGetOpenIdToken(new Error("foo"))),
+        null,
+      );
+
+      // Populate a connection for active
+      const connectionManagerData = new ConnectionManagerData();
+      connectionManagerData.add(connectionTransportBConnected, []);
+      const mockConnectionManager = {
+        transports$: constant(new Epoch([bTransport])),
+        connectionManagerData$: constant(new Epoch(connectionManagerData)),
+      };
+
+      const aLocalTransport: LocalTransport = {
+        advertised$,
+        active$: behavior("a", { n: null, a: bTransportWithSFUConfig }),
+      };
+
+      defaultCreateLocalMemberValues.createPublisherFactory.mockImplementation(
+        () => {
+          return {} as unknown as Publisher;
+        },
+      );
+      const publisherFactory =
+        defaultCreateLocalMemberValues.createPublisherFactory as ReturnType<
+          typeof vi.fn
+        >;
+
+      const localMembership = createLocalMembership$({
+        scope,
+        ...defaultCreateLocalMemberValues,
+        connectionManager: mockConnectionManager,
+        localTransport: aLocalTransport,
+      });
+
+      expectObservable(localMembership.localMemberState$).toBe("n-e", {
+        n: TransportState.Waiting,
+        e: expect.toSatisfy((e) => e instanceof FailToGetOpenIdToken),
+      });
+
+      // Should not have created any publisher
+      expect(publisherFactory).toHaveBeenCalledTimes(0);
+    });
+  });
+
   it("logs if callIntent cannot be updated", async () => {
     const scope = new ObservableScope();
 
+    const aLocalTransport: LocalTransport = {
+      advertised$: constant(aTransport),
+      active$: constant(aTransportWithSFUConfig),
+    };
+
     const mockConnectionManager = {
       transports$: constant(new Epoch([])),
       connectionManagerData$: constant(new Epoch(new ConnectionManagerData())),
@@ -307,7 +366,7 @@ describe("LocalMembership", () => {
         leaveRoomSession: vi.fn(),
       },
       connectionManager: mockConnectionManager,
-      localTransport$: constant(mockTransport),
+      localTransport: aLocalTransport,
     });
     const expextedLog =
       "'not connected yet' while updating the call intent (this is expected on startup)";
@@ -319,19 +378,33 @@ describe("LocalMembership", () => {
     scope.end();
   });
 
-  const mockTransportConfig = {
+  const aTransport = {
     livekit_service_url: "a",
   } as LivekitTransportConfig;
 
-  const mockTransport = {
-    transport: mockTransportConfig,
+  const aTransportWithSFUConfig = {
+    transport: aTransport,
     sfuConfig: {
       jwt: "foo",
       livekitAlias: "bar",
       livekitIdentity: "baz",
       url: "bro",
     },
-  } as LocalTransport;
+  } as LocalTransportWithSFUConfig;
+
+  const bTransport = {
+    livekit_service_url: "b",
+  } as LivekitTransportConfig;
+
+  const bTransportWithSFUConfig = {
+    transport: bTransport,
+    sfuConfig: {
+      jwt: "foo2",
+      livekitAlias: "bar2",
+      livekitIdentity: "baz2",
+      url: "bro2",
+    },
+  } as LocalTransportWithSFUConfig;
 
   const connectionTransportAConnected = {
     livekitRoom: mockLivekitRoom({
@@ -341,13 +414,18 @@ describe("LocalMembership", () => {
       } as unknown as LocalParticipant,
     }),
     state$: constant(ConnectionState.LivekitConnected),
-    transport: mockTransportConfig,
-  } as Connection;
+    transport: aTransport,
+  } as unknown as Connection;
   const connectionTransportAConnecting = {
     ...connectionTransportAConnected,
     state$: constant(ConnectionState.LivekitConnecting),
     livekitRoom: mockLivekitRoom({}),
   } as unknown as Connection;
+  const connectionTransportBConnected = {
+    state$: constant(ConnectionState.LivekitConnected),
+    transport: bTransport,
+    livekitRoom: mockLivekitRoom({}),
+  } as unknown as Connection;
 
   const authCallSpy = vi
     .spyOn(openIDSFU, "getSFUConfigWithOpenID")
@@ -381,7 +459,10 @@ describe("LocalMembership", () => {
           ),
         },
         joinMatrixRTC,
-        localTransport$: constant(mockTransport),
+        localTransport: {
+          advertised$: constant(aTransport),
+          active$: constant(aTransportWithSFUConfig),
+        },
         delayId$,
       });
 
@@ -390,7 +471,7 @@ describe("LocalMembership", () => {
       await flushPromises();
       // Joins with timings appropriate for the level of delegation support
       expect(joinMatrixRTC).toHaveBeenCalledWith(
-        mockTransportConfig,
+        aTransport,
         delayedLeaveTimings,
       );
 
@@ -424,7 +505,75 @@ describe("LocalMembership", () => {
     },
   );
 
-  it("only starts tracks if requested", async () => {
+  it("recreates publisher if new connection is used, always unpublish and end tracks", async () => {
+    const scope = new ObservableScope();
+
+    const activeTransport$ = new BehaviorSubject(aTransportWithSFUConfig);
+    const aLocalTransport: LocalTransport = {
+      advertised$: constant(aTransport),
+      active$: activeTransport$,
+    };
+
+    const publishers: Publisher[] = [];
+    let seed = 0;
+    defaultCreateLocalMemberValues.createPublisherFactory.mockImplementation(
+      () => {
+        const a = seed;
+        seed += 1;
+        logger.info(`creating [${a}]`);
+        const p = {
+          // It is enought to check if destroy is called. Destroy itself is tested in the publisher to make sure it does
+          // all the cleanup we need.
+          destroy: vi.fn(),
+          stopPublishing: vi.fn().mockImplementation(() => {
+            logger.info(`stopPublishing [${a}]`);
+          }),
+          stopTracks: vi.fn(),
+        };
+        publishers.push(p as unknown as Publisher);
+        return p;
+      },
+    );
+    const publisherFactory =
+      defaultCreateLocalMemberValues.createPublisherFactory as ReturnType<
+        typeof vi.fn
+      >;
+
+    const connectionManagerData = new ConnectionManagerData();
+    connectionManagerData.add(connectionTransportAConnected, []);
+    connectionManagerData.add(connectionTransportBConnected, []);
+    createLocalMembership$({
+      scope,
+      ...defaultCreateLocalMemberValues,
+      connectionManager: {
+        connectionManagerData$: constant(new Epoch(connectionManagerData)),
+      },
+      localTransport: aLocalTransport,
+    });
+    await flushPromises();
+    activeTransport$.next({
+      ...aTransportWithSFUConfig,
+      transport: bTransport,
+    });
+    await flushPromises();
+
+    expect(publisherFactory).toHaveBeenCalledTimes(2);
+    expect(publishers.length).toBe(2);
+    // stop the first Publisher and let the second one life.
+    expect(publishers[0].destroy).toHaveBeenCalled();
+    expect(publishers[1].destroy).not.toHaveBeenCalled();
+    expect(publisherFactory.mock.calls[0][0].transport).toBe(aTransport);
+    expect(publisherFactory.mock.calls[1][0].transport).toBe(bTransport);
+    scope.end();
+    await flushPromises();
+    // stop all tracks after ending scopes
+    expect(publishers[1].destroy).toHaveBeenCalled();
+    // expect(publishers[1].stopTracks).toHaveBeenCalled();
+
+    defaultCreateLocalMemberValues.createPublisherFactory.mockReset();
+  });
+
+  it("only start tracks if requested", async () => {
     const scope = new ObservableScope();
 
     const publishers: Publisher[] = [];
@@ -453,6 +602,11 @@ describe("LocalMembership", () => {
         typeof vi.fn
       >;
 
+    const aLocalTransport: LocalTransport = {
+      advertised$: constant(aTransport),
+      active$: constant(aTransportWithSFUConfig),
+    };
+
     const connectionManagerData = new ConnectionManagerData();
     connectionManagerData.add(connectionTransportAConnected, []);
     // connectionManagerData.add(connectionTransportB, []);
@@ -462,7 +616,7 @@ describe("LocalMembership", () => {
       connectionManager: {
         connectionManagerData$: constant(new Epoch(connectionManagerData)),
       },
-      localTransport$: constant(mockTransport),
+      localTransport: aLocalTransport,
     });
     await flushPromises();
     expect(publisherFactory).toHaveBeenCalledOnce();
@@ -483,8 +637,16 @@ describe("LocalMembership", () => {
   //
   it("tracks livekit state correctly", async () => {
     const scope = new ObservableScope();
+
     const connectionManagerData = new ConnectionManagerData();
-    const localTransport$ = new Subject<LocalTransport>();
+
+    const activeTransport$ =
+      new BehaviorSubject<null | LocalTransportWithSFUConfig>(null);
+
+    const aLocalTransport: LocalTransport = {
+      advertised$: constant(aTransport),
+      active$: activeTransport$,
+    };
 
     const connectionManagerData$ = new BehaviorSubject(
       new Epoch(connectionManagerData),
@@ -525,14 +687,14 @@ describe("LocalMembership", () => {
       connectionManager: {
         connectionManagerData$,
       },
-      localTransport$,
+      localTransport: aLocalTransport,
     });
 
     await flushPromises();
     expect(localMembership.localMemberState$.value).toStrictEqual(
       TransportState.Waiting,
     );
-    localTransport$.next(mockTransport);
+    activeTransport$.next(aTransportWithSFUConfig);
     await flushPromises();
     expect(localMembership.localMemberState$.value).toStrictEqual({
       matrix: RTCMemberStatus.Connected,
@@ -557,7 +719,7 @@ describe("LocalMembership", () => {
     });
 
     (
-      connectionManagerData2.getConnectionForTransport(mockTransportConfig)!
+      connectionManagerData2.getConnectionForTransport(aTransport)!
         .state$ as BehaviorSubject<ConnectionState>
     ).next(ConnectionState.LivekitConnected);
     expect(localMembership.localMemberState$.value).toStrictEqual({
@@ -660,7 +822,10 @@ describe("LocalMembership", () => {
         connectionManager: {
           connectionManagerData$: constant(new Epoch(connectionManagerData)),
         },
-        localTransport$: constant(mockTransport),
+        localTransport: {
+          advertised$: constant(aTransport),
+          active$: constant(aTransportWithSFUConfig),
+        },
       });
 
       await flushPromises();
@@ -697,7 +862,10 @@ describe("LocalMembership", () => {
         connectionManager: {
           connectionManagerData$: constant(new Epoch(connectionManagerData)),
         },
-        localTransport$: constant(mockTransport),
+        localTransport: {
+          advertised$: constant(aTransport),
+          active$: constant(aTransportWithSFUConfig),
+        },
       });
 
       await flushPromises();
@@ -745,7 +913,10 @@ describe("LocalMembership", () => {
         connectionManager: {
           connectionManagerData$: constant(new Epoch(connectionManagerData)),
         },
-        localTransport$: constant(mockTransport),
+        localTransport: {
+          advertised$: constant(aTransport),
+          active$: constant(aTransportWithSFUConfig),
+        },
       });
 
       await flushPromises();
@@ -786,7 +957,10 @@ describe("LocalMembership", () => {
         connectionManager: {
           connectionManagerData$: constant(new Epoch(connectionManagerData)),
         },
-        localTransport$: constant(mockTransport),
+        localTransport: {
+          advertised$: constant(aTransport),
+          active$: constant(aTransportWithSFUConfig),
+        },
       });
 
       await flushPromises();
@@ -852,7 +1026,10 @@ describe("LocalMembership", () => {
         connectionManager: {
           connectionManagerData$: constant(new Epoch(connectionManagerData)),
         },
-        localTransport$: constant(mockTransport),
+        localTransport: {
+          advertised$: constant(aTransport),
+          active$: constant(aTransportWithSFUConfig),
+        },
       });
       return { scope, localMembership };
     };
@@ -862,7 +1039,7 @@ describe("LocalMembership", () => {
       const setScreenShareEnabled = vi.fn().mockRejectedValue(error);
       const connection = {
         state$: constant(ConnectionState.LivekitConnected),
-        transport: mockTransportConfig,
+        transport: aTransport,
         livekitRoom: mockLivekitRoom({
           localParticipant: mockLocalParticipant({
             isScreenShareEnabled: false,

src/state/CallViewModel/localMember/LocalMember.ts

@@ -38,10 +38,6 @@ import {
   startWith,
   switchMap,
   tap,
-  NEVER,
-  concat,
-  race,
-  Subject,
 } from "rxjs";
 import { type Logger } from "matrix-js-sdk/lib/logger";
 import { deepCompare } from "matrix-js-sdk/lib/utils";
@@ -81,6 +77,8 @@ import {
 } from "../remoteMembers/Connection.ts";
 import { type HomeserverConnected } from "./HomeserverConnected.ts";
 import { type LocalTransport } from "./LocalTransport.ts";
+import { areLivekitTransportsEqual } from "../remoteMembers/MatrixLivekitMembers.ts";
+import { or$ } from "../../../utils/observable.ts";
 import { getSFUConfigWithOpenID } from "../../../livekit/openIDSFU.ts";
 
 export enum TransportState {
@@ -150,7 +148,7 @@ interface Props {
   homeserverConnected: HomeserverConnected;
   roomId: string;
   ownMembershipIdentity: CallMembershipIdentityParts;
-  localTransport$: Observable<LocalTransport>;
+  localTransport: LocalTransport;
   client: Pick<MatrixClient, "getDeviceId" | "getOpenIdToken">;
   matrixRTCSession: Pick<
     MatrixRTCSession,
@@ -196,7 +194,7 @@ interface Props {
 export const createLocalMembership$ = ({
   scope,
   connectionManager,
-  localTransport$: localTransportWithErrors$,
+  localTransport,
   homeserverConnected,
   createPublisherFactory,
   joinMatrixRTC,
@@ -254,24 +252,20 @@ export const createLocalMembership$ = ({
   const logger = parentLogger.getChild("[LocalMembership]");
   logger.debug(`Creating local membership..`);
 
-  // Unwrap the local transport and set the state of the LocalMembership to error in case the transport is an error.
-  const fatalTransportError$ = new Subject<ElementCallError>();
-  const localTransport$ = localTransportWithErrors$.pipe(
-    catchError((e: unknown) => {
-      let error: ElementCallError;
-      if (e instanceof ElementCallError) {
-        error = e;
-      } else {
-        error = new UnknownCallError(
-          e instanceof Error
-            ? e
-            : new Error("Unknown error from localTransport"),
-        );
-      }
-      fatalTransportError$.next(error);
-      return NEVER; // Make this Observable swallow the error
-    }),
-  );
+  // We consider error on the transport as fatal.
+  // Whether it is the active transport or the preferred transport.
+  const handleTransportError = (e: unknown): Observable<null> => {
+    let error: ElementCallError;
+    if (e instanceof ElementCallError) {
+      error = e;
+    } else {
+      error = new UnknownCallError(
+        e instanceof Error ? e : new Error("Unknown error from localTransport"),
+      );
+    }
+    setTransportError(error);
+    return of(null);
+  };
 
   async function checkDelegationSupport(
     endpointUrl: string,
@@ -309,40 +303,58 @@ export const createLocalMembership$ = ({
 
   // The transport that we will advertise in our membership, paired with info as
   // to whether delayed event delegation is supported
-  const joinParams$ = scope.behavior(
-    localTransport$.pipe(
-      switchMap(async ({ transport }) => {
-        const transportSupportsDelegation = checkDelegationSupport(
-          transport.livekit_service_url + "/delegate_delayed_leave",
-          `transport ${transport.livekit_service_url}`,
-        );
-        return {
-          transport,
-          delegationSupported:
-            (await homeserverSupportsDelegation) ||
-            (await transportSupportsDelegation),
-        };
+  const joinParams$ = localTransport.advertised$.pipe(
+    catchError(handleTransportError),
+    distinctUntilChanged(areLivekitTransportsEqual),
+    switchMap((transport) => {
+      if (transport === null) return of(null);
+      const transportSupportsDelegation = checkDelegationSupport(
+        transport.livekit_service_url + "/delegate_delayed_leave",
+        `transport ${transport.livekit_service_url}`,
+      );
+      return or$(
+        from(homeserverSupportsDelegation),
+        from(transportSupportsDelegation),
+      ).pipe(
+        map((delegationSupported) => ({ transport, delegationSupported })),
+        startWith(null),
+      );
+    }),
+  );
+
+  // Unwrap the local transport and set the state of the LocalMembership to error in case the transport is an error.
+  const activeTransport$ = scope.behavior(
+    combineLatest([localTransport.active$, localTransport.advertised$]).pipe(
+      map(([active, advertised]) => {
+        // Our policy is to not publish to another transport if our prefered transport is miss-configured
+        if (advertised == null) return null;
+
+        return active?.transport ?? null;
       }),
+      catchError(handleTransportError),
+      distinctUntilChanged(areLivekitTransportsEqual),
     ),
-    null,
   );
 
   // Drop Epoch data here since we will not combine this anymore
   const localConnection$ = scope.behavior(
     combineLatest([
       connectionManager.connectionManagerData$,
-      localTransport$,
+      activeTransport$,
     ]).pipe(
-      map(([{ value: connectionData }, { transport }]) =>
-        connectionData.getConnectionForTransport(transport),
-      ),
+      map(([{ value: connectionData }, localTransport]) => {
+        if (localTransport === null) {
+          return null;
+        }
+
+        return connectionData.getConnectionForTransport(localTransport);
+      }),
       tap((connection) => {
         logger.info(
           `Local connection updated: ${connection?.transport?.livekit_service_url}`,
         );
       }),
     ),
-    null,
   );
 
   // Tracks error that happen when creating the local tracks.
@@ -478,6 +490,18 @@ export const createLocalMembership$ = ({
     }
   };
 
+  const fatalTransportError$ = new BehaviorSubject<ElementCallError | null>(
+    null,
+  );
+
+  const setTransportError = (e: ElementCallError): void => {
+    if (fatalTransportError$.value !== null) {
+      logger.error("Multiple Transport Errors:", e);
+    } else {
+      fatalTransportError$.next(e);
+    }
+  };
+
   const localConnectionState$ = localConnection$.pipe(
     switchMap((connection) => (connection ? connection.state$ : of(null))),
   );
@@ -485,29 +509,38 @@ export const createLocalMembership$ = ({
   const mediaState$: Behavior<LocalMemberMediaState> = scope.behavior(
     combineLatest([
       localConnectionState$,
+      activeTransport$,
       joinAndPublishRequested$,
       from(trackStartRequested.promise).pipe(
         map(() => true),
         startWith(false),
       ),
     ]).pipe(
-      map(([localConnectionState, shouldPublish, shouldStartTracks]) => {
-        const trackState: TrackState = shouldStartTracks
-          ? TrackState.Ready
-          : TrackState.WaitingForUser;
+      map(
+        ([
+          localConnectionState,
+          localTransport,
+          shouldPublish,
+          shouldStartTracks,
+        ]) => {
+          if (!localTransport) return null;
+          const trackState: TrackState = shouldStartTracks
+            ? TrackState.Ready
+            : TrackState.WaitingForUser;
 
-        if (
-          localConnectionState !== ConnectionState.LivekitConnected ||
-          trackState !== TrackState.Ready
-        )
-          return {
-            connection: localConnectionState,
-            tracks: trackState,
-          };
-        if (!shouldPublish) return PublishState.WaitingForUser;
-        // if (!publishing) return PublishState.Starting;
-        return PublishState.Publishing;
-      }),
+          if (
+            localConnectionState !== ConnectionState.LivekitConnected ||
+            trackState !== TrackState.Ready
+          )
+            return {
+              connection: localConnectionState,
+              tracks: trackState,
+            };
+          if (!shouldPublish) return PublishState.WaitingForUser;
+          // if (!publishing) return PublishState.Starting;
+          return PublishState.Publishing;
+        },
+      ),
       distinctUntilChanged(deepCompare),
     ),
   );
@@ -521,36 +554,30 @@ export const createLocalMembership$ = ({
   };
 
   const localMemberState$ = scope.behavior<LocalMemberState>(
-    concat(
-      // Waiting until…
-      of(TransportState.Waiting),
-      race(
-        // either there is a fatal transport error
-        fatalTransportError$,
-        // or the transport is available.
-        localTransport$.pipe(
-          switchMap(() =>
-            // Once available, track session/media state.
-            combineLatest([
-              mediaState$,
-              homeserverConnected.rtsSession$,
-              fatalMatrixError$,
-              publishError$,
-            ]).pipe(
-              map(
-                ([
-                  mediaState,
-                  rtcSessionStatus,
-                  fatalMatrixError,
-                  publishError,
-                ]) => ({
-                  matrix: fatalMatrixError ?? rtcSessionStatus,
-                  media: publishError ?? mediaState,
-                }),
-              ),
-            ),
-          ),
-        ),
+    combineLatest([
+      mediaState$,
+      homeserverConnected.rtsSession$,
+      fatalMatrixError$,
+      fatalTransportError$,
+      publishError$,
+    ]).pipe(
+      map(
+        ([
+          mediaState,
+          rtcSessionStatus,
+          fatalMatrixError,
+          fatalTransportError,
+          publishError,
+        ]) => {
+          if (fatalTransportError !== null) return fatalTransportError;
+          // `mediaState` will be 'null' until the transport/connection appears.
+          if (mediaState && rtcSessionStatus)
+            return {
+              matrix: fatalMatrixError ?? rtcSessionStatus,
+              media: publishError ?? mediaState,
+            };
+          return TransportState.Waiting;
+        },
       ),
     ),
   );
@@ -658,7 +685,7 @@ export const createLocalMembership$ = ({
       });
   });
 
-  // Join and leave the session as needed
+  // Keep matrix rtc session in sync with advertisedTransport$, connectRequested$
   scope.reconcile(
     scope.behavior(combineLatest([joinParams$, joinAndPublishRequested$])),
     async ([joinParams, shouldConnect]) => {

src/state/CallViewModel/localMember/LocalTransport.test.ts

@@ -14,10 +14,19 @@ import {
   type MockedObject,
   vi,
 } from "vitest";
+import { type CallMembership } from "matrix-js-sdk/lib/matrixrtc";
+import { lastValueFrom } from "rxjs";
 import fetchMock from "fetch-mock";
 
-import { mockConfig, ownMemberMock } from "../../../utils/test";
-import { getLocalTransport } from "./LocalTransport";
+import {
+  mockConfig,
+  flushPromises,
+  ownMemberMock,
+  testScope,
+} from "../../../utils/test";
+import { createLocalTransport$ } from "./LocalTransport";
+import { constant } from "../../Behavior";
+import { Epoch, ObservableScope } from "../../ObservableScope";
 import {
   MatrixRTCTransportMissingError,
   FailToGetOpenIdToken,
@@ -38,79 +47,118 @@ describe("LocalTransport", () => {
   beforeEach(() => vi.clearAllMocks());
 
   it("throws if config is missing", async () => {
-    await expect(
-      getLocalTransport({
-        roomId: "!room:example.org",
-        client: {
-          // eslint-disable-next-line @typescript-eslint/naming-convention
-          _unstable_getRTCTransports: async () => Promise.resolve([]),
-          getDomain: () => "example.org",
-          // These won't be called in this error path but satisfy the type
-          getOpenIdToken: vi.fn(),
-          getDeviceId: vi.fn(),
-        },
-        ownMembershipIdentity: ownMemberMock,
-        matrixRTCMode: MatrixRTCMode.Compatibility,
-      }),
-    ).rejects.toThrow(new MatrixRTCTransportMissingError("example.org"));
+    const { advertised$, active$ } = createLocalTransport$({
+      scope: testScope(),
+      roomId: "!room:example.org",
+      memberships$: constant(new Epoch<CallMembership[]>([])),
+      client: {
+        // eslint-disable-next-line @typescript-eslint/naming-convention
+        _unstable_getRTCTransports: async () => Promise.resolve([]),
+        getDomain: () => "example.org",
+        // These won't be called in this error path but satisfy the type
+        getOpenIdToken: vi.fn(),
+        getDeviceId: vi.fn(),
+      },
+      ownMembershipIdentity: ownMemberMock,
+      matrixRTCMode: MatrixRTCMode.Compatibility,
+    });
+    await flushPromises();
+
+    expect(() => advertised$.value).toThrow(
+      new MatrixRTCTransportMissingError("example.org"),
+    );
+    expect(() => active$.value).toThrow(
+      new MatrixRTCTransportMissingError("example.org"),
+    );
   });
 
   it("throws FailToGetOpenIdToken when OpenID fetch fails", async () => {
     // Provide a valid config so makeTransportInternal resolves a transport
+    const scope = new ObservableScope();
     mockConfig({
       livekit: { livekit_service_url: "https://lk.example.org" },
     });
-    vi.spyOn(openIDSFU, "getSFUConfigWithOpenID").mockRejectedValue(
-      new FailToGetOpenIdToken(new Error("no openid")),
+    const resolver = Promise.withResolvers<void>();
+    vi.spyOn(openIDSFU, "getSFUConfigWithOpenID").mockImplementation(
+      async () => {
+        await resolver.promise;
+        throw new FailToGetOpenIdToken(new Error("no openid"));
+      },
     );
+    const observations: unknown[] = [];
+    const errors: Error[] = [];
+    const { advertised$, active$ } = createLocalTransport$({
+      scope,
+      roomId: "!example_room_id",
+      memberships$: constant(new Epoch<CallMembership[]>([])),
+      client: {
+        getDomain: () => "example.org",
+        // eslint-disable-next-line @typescript-eslint/naming-convention
+        _unstable_getRTCTransports: async () => Promise.resolve([]),
+        getOpenIdToken: vi.fn(),
+        getDeviceId: vi.fn(),
+      },
+      ownMembershipIdentity: ownMemberMock,
+      matrixRTCMode: MatrixRTCMode.Compatibility,
+    });
+    active$.subscribe(
+      (o) => observations.push(o),
+      (e) => errors.push(e),
+    );
+    resolver.resolve();
+    await flushPromises();
 
-    await expect(
-      getLocalTransport({
-        roomId: "!example_room_id",
-        client: {
-          getDomain: () => "example.org",
-          // eslint-disable-next-line @typescript-eslint/naming-convention
-          _unstable_getRTCTransports: async () => Promise.resolve([]),
-          getOpenIdToken: vi.fn(),
-          getDeviceId: vi.fn(),
-        },
-        ownMembershipIdentity: ownMemberMock,
-        matrixRTCMode: MatrixRTCMode.Compatibility,
-      }),
-    ).rejects.toThrow(new FailToGetOpenIdToken(new Error("no openid")));
+    const expectedError = new FailToGetOpenIdToken(new Error("no openid"));
+    expect(observations).toStrictEqual([null]);
+    expect(errors).toStrictEqual([expectedError]);
+    expect(() => advertised$.value).toThrow(expectedError);
+    expect(() => active$.value).toThrow(expectedError);
   });
 
-  it("returns preferred transport", async () => {
+  it("emits preferred transport after OpenID resolves", async () => {
     // Use config so transport discovery succeeds, but delay OpenID JWT fetch
     mockConfig({
       livekit: { livekit_service_url: "https://lk.example.org" },
     });
 
-    vi.spyOn(openIDSFU, "getSFUConfigWithOpenID").mockResolvedValue({
+    const openIdResolver = Promise.withResolvers<openIDSFU.SFUConfig>();
+
+    vi.spyOn(openIDSFU, "getSFUConfigWithOpenID").mockReturnValue(
+      openIdResolver.promise,
+    );
+
+    const { advertised$, active$ } = createLocalTransport$({
+      scope: testScope(),
+      roomId: "!room:example.org",
+      memberships$: constant(new Epoch<CallMembership[]>([])),
+      client: {
+        // eslint-disable-next-line @typescript-eslint/naming-convention
+        _unstable_getRTCTransports: async () => Promise.resolve([]),
+        getDomain: () => "example.org",
+        getOpenIdToken: vi.fn(),
+        getDeviceId: vi.fn(),
+      },
+      ownMembershipIdentity: ownMemberMock,
+      matrixRTCMode: MatrixRTCMode.Compatibility,
+    });
+
+    openIdResolver.resolve?.({
       url: "https://lk.example.org",
       jwt: "jwt",
       livekitAlias: "Akph4alDMhen",
       livekitIdentity: ownMemberMock.userId + ":" + ownMemberMock.deviceId,
     });
-
-    expect(
-      await getLocalTransport({
-        roomId: "!room:example.org",
-        client: {
-          // eslint-disable-next-line @typescript-eslint/naming-convention
-          _unstable_getRTCTransports: async () => Promise.resolve([]),
-          getDomain: () => "example.org",
-          getOpenIdToken: vi.fn(),
-          getDeviceId: vi.fn(),
-        },
-        ownMembershipIdentity: ownMemberMock,
-        matrixRTCMode: MatrixRTCMode.Compatibility,
-      }),
-    ).toStrictEqual({
-      transport: {
-        livekit_service_url: "https://lk.example.org",
-        type: "livekit",
-      },
+    expect(advertised$.value).toBe(null);
+    expect(active$.value).toBe(null);
+    await flushPromises();
+    // final
+    const expectedTransport = {
+      livekit_service_url: "https://lk.example.org",
+      type: "livekit",
+    };
+    expect(advertised$.value).toStrictEqual(expectedTransport);
+    expect(active$.value).toStrictEqual({
+      transport: expectedTransport,
       sfuConfig: {
         jwt: "jwt",
         livekitAlias: "Akph4alDMhen",
@@ -120,19 +168,22 @@ describe("LocalTransport", () => {
     });
   });
 
-  type LocalTransportProps = Parameters<typeof getLocalTransport>[0];
+  type LocalTransportProps = Parameters<typeof createLocalTransport$>[0];
 
   describe("transport configuration mechanisms", () => {
     let localTransportOpts: LocalTransportProps & {
       client: MockedObject<LocalTransportProps["client"]>;
     };
+    let openIdResolver: PromiseWithResolvers<openIDSFU.SFUConfig>;
     beforeEach(() => {
       mockConfig({});
       customLivekitUrl.setValue(customLivekitUrl.defaultValue);
       localTransportOpts = {
         ownMembershipIdentity: ownMemberMock,
+        scope: testScope(),
         roomId: "!example_room_id",
         matrixRTCMode: MatrixRTCMode.Compatibility,
+        memberships$: constant(new Epoch<CallMembership[]>([])),
         client: {
           getDomain: vi.fn().mockReturnValue("example.org"),
           // eslint-disable-next-line @typescript-eslint/naming-convention
@@ -141,6 +192,10 @@ describe("LocalTransport", () => {
           getDeviceId: vi.fn(),
         },
       };
+      openIdResolver = Promise.withResolvers<openIDSFU.SFUConfig>();
+      vi.spyOn(openIDSFU, "getSFUConfigWithOpenID").mockReturnValue(
+        openIdResolver.promise,
+      );
     });
 
     afterEach(() => {
@@ -151,15 +206,19 @@ describe("LocalTransport", () => {
       mockConfig({
         livekit: { livekit_service_url: "https://lk.example.org" },
       });
-      vi.spyOn(openIDSFU, "getSFUConfigWithOpenID").mockResolvedValue(
-        openIdResponse,
-      );
-
-      expect(await getLocalTransport(localTransportOpts)).toStrictEqual({
-        transport: {
-          livekit_service_url: "https://lk.example.org",
-          type: "livekit",
-        },
+      const { advertised$, active$ } =
+        createLocalTransport$(localTransportOpts);
+      openIdResolver.resolve?.(openIdResponse);
+      expect(advertised$.value).toBe(null);
+      expect(active$.value).toBe(null);
+      await flushPromises();
+      const expectedTransport = {
+        livekit_service_url: "https://lk.example.org",
+        type: "livekit",
+      };
+      expect(advertised$.value).toStrictEqual(expectedTransport);
+      expect(active$.value).toStrictEqual({
+        transport: expectedTransport,
         sfuConfig: {
           jwt: "e30=.eyJzdWIiOiJAbWU6ZXhhbXBsZS5vcmc6QUJDREVGIiwidmlkZW8iOnsicm9vbSI6IiFleGFtcGxlX3Jvb21faWQifX0=.e30=",
           livekitAlias: "Akph4alDMhen",
@@ -171,11 +230,12 @@ describe("LocalTransport", () => {
 
     it("supports getting transport via user settings", async () => {
       customLivekitUrl.setValue("https://lk.example.org");
-      vi.spyOn(openIDSFU, "getSFUConfigWithOpenID").mockResolvedValue(
-        openIdResponse,
-      );
-
-      expect(await getLocalTransport(localTransportOpts)).toStrictEqual({
+      const { advertised$, active$ } =
+        createLocalTransport$(localTransportOpts);
+      openIdResolver.resolve?.(openIdResponse);
+      expect(advertised$.value).toBe(null);
+      await flushPromises();
+      expect(active$.value).toStrictEqual({
         transport: {
           livekit_service_url: "https://lk.example.org",
           type: "livekit",
@@ -193,15 +253,19 @@ describe("LocalTransport", () => {
       localTransportOpts.client._unstable_getRTCTransports.mockResolvedValue([
         { type: "livekit", livekit_service_url: "https://lk.example.org" },
       ]);
-      vi.spyOn(openIDSFU, "getSFUConfigWithOpenID").mockResolvedValue(
-        openIdResponse,
-      );
-
-      expect(await getLocalTransport(localTransportOpts)).toStrictEqual({
-        transport: {
-          livekit_service_url: "https://lk.example.org",
-          type: "livekit",
-        },
+      const { advertised$, active$ } =
+        createLocalTransport$(localTransportOpts);
+      openIdResolver.resolve?.(openIdResponse);
+      expect(advertised$.value).toBe(null);
+      expect(active$.value).toBe(null);
+      await flushPromises();
+      const expectedTransport = {
+        livekit_service_url: "https://lk.example.org",
+        type: "livekit",
+      };
+      expect(advertised$.value).toStrictEqual(expectedTransport);
+      expect(active$.value).toStrictEqual({
+        transport: expectedTransport,
         sfuConfig: {
           jwt: "e30=.eyJzdWIiOiJAbWU6ZXhhbXBsZS5vcmc6QUJDREVGIiwidmlkZW8iOnsicm9vbSI6IiFleGFtcGxlX3Jvb21faWQifX0=.e30=",
           livekitAlias: "Akph4alDMhen",
@@ -215,31 +279,38 @@ describe("LocalTransport", () => {
       localTransportOpts.client._unstable_getRTCTransports.mockResolvedValue([
         { type: "livekit", livekit_service_url: "https://lk.example.org" },
       ]);
-      vi.spyOn(openIDSFU, "getSFUConfigWithOpenID").mockRejectedValue(
+      openIdResolver.reject(
         new FailToGetOpenIdToken(new Error("Test driven error")),
       );
-
-      await expect(getLocalTransport(localTransportOpts)).rejects.toThrow(
-        expect.any(FailToGetOpenIdToken),
-      );
+      await expect(async () =>
+        lastValueFrom(createLocalTransport$(localTransportOpts).active$),
+      ).rejects.toThrow(expect.any(FailToGetOpenIdToken));
     });
 
     it("throws if no options are available", async () => {
-      await expect(
-        getLocalTransport({
-          ownMembershipIdentity: ownMemberMock,
-          roomId: "!example_room_id",
-          matrixRTCMode: MatrixRTCMode.Compatibility,
-          client: {
-            getDomain: () => "example.org",
-            // eslint-disable-next-line @typescript-eslint/naming-convention
-            _unstable_getRTCTransports: async () => Promise.resolve([]),
-            // These won't be called in this error path but satisfy the type
-            getOpenIdToken: vi.fn(),
-            getDeviceId: vi.fn(),
-          },
-        }),
-      ).rejects.toThrow(new MatrixRTCTransportMissingError("example.org"));
+      const { advertised$, active$ } = createLocalTransport$({
+        scope: testScope(),
+        ownMembershipIdentity: ownMemberMock,
+        roomId: "!example_room_id",
+        matrixRTCMode: MatrixRTCMode.Compatibility,
+        memberships$: constant(new Epoch<CallMembership[]>([])),
+        client: {
+          getDomain: () => "example.org",
+          // eslint-disable-next-line @typescript-eslint/naming-convention
+          _unstable_getRTCTransports: async () => Promise.resolve([]),
+          // These won't be called in this error path but satisfy the type
+          getOpenIdToken: vi.fn(),
+          getDeviceId: vi.fn(),
+        },
+      });
+      await flushPromises();
+
+      expect(() => advertised$.value).toThrow(
+        new MatrixRTCTransportMissingError("example.org"),
+      );
+      expect(() => active$.value).toThrow(
+        new MatrixRTCTransportMissingError("example.org"),
+      );
     });
   });
 });

src/state/CallViewModel/localMember/LocalTransport.ts

@@ -5,11 +5,17 @@ SPDX-License-IdFentifier: AGPL-3.0-only OR LicenseRef-Element-Commercial
 Please see LICENSE in the repository root for full details.
 */
 
-import { type LivekitTransportConfig } from "matrix-js-sdk/lib/matrixrtc";
+import {
+  type CallMembership,
+  type LivekitTransportConfig,
+} from "matrix-js-sdk/lib/matrixrtc";
 import { type MatrixClient } from "matrix-js-sdk";
+import { distinctUntilChanged, from, map, of, switchMap } from "rxjs";
 import { logger as rootLogger, type Logger } from "matrix-js-sdk/lib/logger";
 import { type CallMembershipIdentityParts } from "matrix-js-sdk/lib/matrixrtc/EncryptionManager";
 
+import { type Behavior } from "../../Behavior.ts";
+import { type Epoch, type ObservableScope } from "../../ObservableScope.ts";
 import { Config } from "../../../config/Config.ts";
 import {
   FailToGetOpenIdToken,
@@ -21,12 +27,19 @@ import {
   type SFUConfig,
   type OpenIDClientParts,
 } from "../../../livekit/openIDSFU.ts";
+import { areLivekitTransportsEqual } from "../remoteMembers/MatrixLivekitMembers.ts";
 import { customLivekitUrl } from "../../../settings/settings.ts";
 import { RtcTransportAutoDiscovery } from "./RtcTransportAutoDiscovery.ts";
 import { type MatrixRTCMode } from "../../../config/ConfigOptions.ts";
 
+/*
+ * It figures out “which LiveKit focus URL/alias the local user should use,”
+ * and ensures the SFU path is primed before advertising that choice.
+ */
 interface Props {
+  scope: ObservableScope;
   ownMembershipIdentity: CallMembershipIdentityParts;
+  memberships$: Behavior<Epoch<CallMembership[]>>;
   client: Pick<MatrixClient, "getDomain" | "_unstable_getRTCTransports"> &
     OpenIDClientParts;
   // Used by the jwt service to create the livekit room and compute the livekit alias.
@@ -55,65 +68,114 @@ interface Props {
 //
 // 2.
 // We need to make sure we do not sent livekit_alias in sticky events and that we drop all code for sending state events!
-export interface LocalTransport {
+export interface LocalTransportWithSFUConfig {
   transport: LivekitTransportConfig;
   sfuConfig: SFUConfig;
 }
 
-export function isLocalTransport(
-  obj: LivekitTransportConfig | LocalTransport,
-): obj is LocalTransport {
+export function isLocalTransportWithSFUConfig(
+  obj: LivekitTransportConfig | LocalTransportWithSFUConfig,
+): obj is LocalTransportWithSFUConfig {
   return "transport" in obj && "sfuConfig" in obj;
 }
 
+export interface LocalTransport {
+  /**
+   * The transport to be advertised in our MatrixRTC membership. `null` when not
+   * yet fetched/validated.
+   */
+  advertised$: Behavior<LivekitTransportConfig | null>;
+  /**
+   * The transport to connect to and publish media on. `null` when not yet known
+   * or available.
+   */
+  active$: Behavior<LocalTransportWithSFUConfig | null>;
+}
+
 /**
- * Connects to the JWT service and determines the transport that the local member should use.
+ * Connects to the JWT service and determines the transports that the local member should use.
  *
  * @prop useOldJwtEndpoint Whether to set forceOldJwtEndpoint on the returned transport and to use the old JWT endpoint.
  * This is used when the connection manager needs to know if it has to use the legacy endpoint which implies a string concatenated rtcBackendIdentity.
  * (which is expected for non sticky event based rtc member events)
- * @returns The transport to advertise in our MatrixRTC membership and publish media on.
+ * @returns The transport to advertise in the local MatrixRTC membership, along with the transport to actively publish media to.
  * @throws MatrixRTCTransportMissingError | FailToGetOpenIdToken
  */
-export async function getLocalTransport({
+export const createLocalTransport$ = ({
+  scope,
+  memberships$,
   ownMembershipIdentity,
   client,
   roomId,
   matrixRTCMode,
-}: Props): Promise<LocalTransport> {
+}: Props): LocalTransport => {
   const logger = rootLogger.getChild("[LocalTransport]");
-  const discovery = new RtcTransportAutoDiscovery({
+
+  const transportDiscovery = new RtcTransportAutoDiscovery({
     client: client,
     resolvedConfig: Config.get(),
     logger: logger,
   });
-  const customUrl = customLivekitUrl.value$.value;
 
-  // Respect the user's custom URL, if set
-  const transport: LivekitTransportConfig | null = customUrl
-    ? { type: "livekit", livekit_service_url: customUrl }
-    : await discovery.discoverPreferredTransport();
+  // Get the preferred transport from the current deployment.
+  const discoveredTransport$ = from(
+    transportDiscovery.discoverPreferredTransport(),
+  );
 
-  if (transport === null)
-    throw new MatrixRTCTransportMissingError(client.getDomain() ?? "");
+  const preferredConfig$ = customLivekitUrl.value$.pipe(
+    switchMap((customUrl) => {
+      if (customUrl) {
+        return of({
+          type: "livekit",
+          livekit_service_url: customUrl,
+        } as LivekitTransportConfig);
+      } else {
+        return discoveredTransport$;
+      }
+    }),
+    map((config) => {
+      if (!config) {
+        // Bubbled up from the preferredConfig$ observable.
+        throw new MatrixRTCTransportMissingError(client.getDomain() ?? "");
+      }
+      return config;
+    }),
+    distinctUntilChanged(areLivekitTransportsEqual),
+  );
 
-  try {
-    return await doOpenIdAndJWTFromUrl(
-      transport,
-      matrixRTCMode,
-      ownMembershipIdentity,
-      roomId,
-      client,
-      logger,
-    );
-  } catch (e) {
-    logger.error(
-      `Failed to authenticate to transport ${transport.livekit_service_url}`,
-      e,
-    );
-    throw mapAuthErrorToUserFriendlyError(e);
-  }
-}
+  const preferredTransport$ = preferredConfig$.pipe(
+    switchMap(async (transport) => {
+      try {
+        return await doOpenIdAndJWTFromUrl(
+          transport,
+          matrixRTCMode,
+          ownMembershipIdentity,
+          roomId,
+          client,
+          logger,
+        );
+      } catch (e) {
+        logger.error(
+          `Failed to authenticate to transport ${transport.livekit_service_url}`,
+          e,
+        );
+        throw mapAuthErrorToUserFriendlyError(e);
+      }
+    }),
+  );
+
+  // Always publish on and advertise the preferred transport.
+  return {
+    advertised$: scope.behavior(
+      preferredTransport$.pipe(
+        map((t) => t.transport),
+        distinctUntilChanged(areLivekitTransportsEqual),
+      ),
+      null,
+    ),
+    active$: scope.behavior(preferredTransport$, null),
+  };
+};
 
 /**
  *  Utility to ensure the user can authenticate with the SFU.
@@ -137,7 +199,7 @@ async function doOpenIdAndJWTFromUrl(
   roomId: string,
   client: Pick<MatrixClient, "_unstable_getRTCTransports"> & OpenIDClientParts,
   logger?: Logger,
-): Promise<LocalTransport> {
+): Promise<LocalTransportWithSFUConfig> {
   const sfuConfig = await getSFUConfigWithOpenID(
     client,
     membership,

src/state/CallViewModel/remoteMembers/ConnectionManager.test.ts

@@ -6,7 +6,7 @@ Please see LICENSE in the repository root for full details.
 */
 
 import { afterEach, beforeEach, describe, expect, test, vi } from "vitest";
-import { BehaviorSubject, NEVER } from "rxjs";
+import { BehaviorSubject } from "rxjs";
 import { type LivekitTransportConfig } from "matrix-js-sdk/lib/matrixrtc";
 import { type RemoteParticipant } from "livekit-client";
 import { logger } from "matrix-js-sdk/lib/logger";
@@ -20,7 +20,7 @@ import { type ConnectionFactory } from "./ConnectionFactory.ts";
 import { type Connection } from "./Connection.ts";
 import { ownMemberMock, withTestScheduler } from "../../../utils/test.ts";
 import { areLivekitTransportsEqual } from "./MatrixLivekitMembers.ts";
-import { type Behavior } from "../../Behavior.ts";
+import { constant, type Behavior } from "../../Behavior.ts";
 
 // Some test constants
 
@@ -74,7 +74,7 @@ describe("connections$ stream", () => {
       const { connectionManagerData$ } = createConnectionManager$({
         scope: testScope,
         connectionFactory: fakeConnectionFactory,
-        localTransport$: NEVER,
+        localTransport$: constant(null),
         remoteTransports$: behavior("a", {
           a: new Epoch([TRANSPORT_1, TRANSPORT_2], 0),
         }),
@@ -115,7 +115,7 @@ describe("connections$ stream", () => {
       const { connectionManagerData$ } = createConnectionManager$({
         scope: testScope,
         connectionFactory: fakeConnectionFactory,
-        localTransport$: NEVER,
+        localTransport$: constant(null),
         remoteTransports$: behavior("abcdef", {
           a: new Epoch([TRANSPORT_1], 0),
           b: new Epoch([TRANSPORT_1], 1),
@@ -162,7 +162,7 @@ describe("connections$ stream", () => {
       const { connectionManagerData$ } = createConnectionManager$({
         scope: testScope,
         connectionFactory: fakeConnectionFactory,
-        localTransport$: NEVER,
+        localTransport$: constant(null),
         remoteTransports$: behavior("abc", {
           a: new Epoch([TRANSPORT_1], 0),
           b: new Epoch([TRANSPORT_1, TRANSPORT_2], 1),
@@ -297,7 +297,7 @@ describe("connectionManagerData$ stream", () => {
       const { connectionManagerData$ } = createConnectionManager$({
         scope: testScope,
         connectionFactory: fakeConnectionFactory,
-        localTransport$: NEVER,
+        localTransport$: constant(null),
         remoteTransports$: behavior("a", {
           a: new Epoch([TRANSPORT_1, TRANSPORT_2], 0),
         }),

src/state/CallViewModel/remoteMembers/ConnectionManager.ts

@@ -7,16 +7,7 @@ Please see LICENSE in the repository root for full details.
 */
 
 import { type LivekitTransportConfig } from "matrix-js-sdk/lib/matrixrtc";
-import {
-  combineLatest,
-  map,
-  type Observable,
-  of,
-  switchMap,
-  startWith,
-  catchError,
-  NEVER,
-} from "rxjs";
+import { combineLatest, map, of, switchMap } from "rxjs";
 import { type Logger } from "matrix-js-sdk/lib/logger";
 import { type RemoteParticipant } from "livekit-client";
 import { type CallMembershipIdentityParts } from "matrix-js-sdk/lib/matrixrtc/EncryptionManager";
@@ -28,8 +19,8 @@ import { generateItemsWithEpoch } from "../../../utils/observable.ts";
 import { areLivekitTransportsEqual } from "./MatrixLivekitMembers.ts";
 import { type ConnectionFactory } from "./ConnectionFactory.ts";
 import {
-  isLocalTransport,
-  type LocalTransport,
+  isLocalTransportWithSFUConfig,
+  type LocalTransportWithSFUConfig,
 } from "../localMember/LocalTransport.ts";
 import { type SFUConfig } from "../../../livekit/openIDSFU.ts";
 
@@ -87,7 +78,7 @@ export class ConnectionManagerData {
 interface Props {
   scope: ObservableScope;
   connectionFactory: ConnectionFactory;
-  localTransport$: Observable<LocalTransport>;
+  localTransport$: Behavior<LocalTransportWithSFUConfig | null>;
   remoteTransports$: Behavior<Epoch<LivekitTransportConfig[]>>;
 
   logger: Logger;
@@ -130,14 +121,6 @@ export function createConnectionManager$({
   const logger = parentLogger.getChild("[ConnectionManager]");
   // TODO logger: only construct one logger from the client and make it compatible via a EC specific sing
 
-  const localTransportAsArray$ = localTransport$.pipe(
-    // LocalMember already surfaces local transport errors properly in the UI,
-    // here we can just swallow them
-    catchError(() => NEVER),
-    map((transport) => [transport]),
-    startWith([]),
-  );
-
   /**
    * All transports currently managed by the ConnectionManager.
    *
@@ -147,12 +130,16 @@ export function createConnectionManager$({
    * externally this is modified via `registerTransports()`.
    */
   const localAndRemoteTransports$: Behavior<
-    Epoch<(LivekitTransportConfig | LocalTransport)[]>
+    Epoch<(LivekitTransportConfig | LocalTransportWithSFUConfig)[]>
   > = scope.behavior(
-    combineLatest([localTransportAsArray$, remoteTransports$]).pipe(
+    combineLatest([remoteTransports$, localTransport$]).pipe(
       // Combine local and remote transports into one transport array
       // and set the forceOldJwtEndpoint property on the local transport
-      map(([localTransportAsArray, remoteTransports]) => {
+      map(([remoteTransports, localTransport]) => {
+        let localTransportAsArray: LocalTransportWithSFUConfig[] = [];
+        if (localTransport) {
+          localTransportAsArray = [localTransport];
+        }
         const dedupedRemote = removeDuplicateTransports(remoteTransports.value);
         const remoteWithoutLocal = dedupedRemote.filter(
           (transport) =>
@@ -183,9 +170,8 @@ export function createConnectionManager$({
         "ConnectionManager connections$",
         function* (transports) {
           for (const transport of transports) {
-            if (isLocalTransport(transport)) {
-              // This is the local transport; only the `LocalTransport`
-              // interface has a `sfuConfig` field.
+            if (isLocalTransportWithSFUConfig(transport)) {
+              // This is the local transport; only the `LocalTransportWithSFUConfig` has a `sfuConfig` field.
               yield {
                 keys: [
                   transport.transport.livekit_service_url,

src/state/CallViewModel/remoteMembers/integration.test.ts

@@ -6,7 +6,7 @@ Please see LICENSE in the repository root for full details.
 */
 
 import { test, vi, expect, beforeEach, afterEach } from "vitest";
-import { BehaviorSubject, NEVER } from "rxjs";
+import { BehaviorSubject } from "rxjs";
 import { type Room as LivekitRoom } from "livekit-client";
 import EventEmitter from "events";
 import fetchMock from "fetch-mock";
@@ -34,6 +34,7 @@ import {
 } from "./MatrixLivekitMembers.ts";
 import { createConnectionManager$ } from "./ConnectionManager.ts";
 import { membershipsAndTransports$ } from "../../SessionBehaviors.ts";
+import { constant } from "../../Behavior.ts";
 import { localRtcMember, testJWTToken } from "../../../utils/test-fixtures.ts";
 
 // Test the integration of ConnectionManager and MatrixLivekitMerger
@@ -123,7 +124,7 @@ test("bob, carl, then bob joining no tracks yet", () => {
     const connectionManager = createConnectionManager$({
       scope: testScope,
       connectionFactory: ecConnectionFactory,
-      localTransport$: NEVER,
+      localTransport$: constant(null),
       remoteTransports$: membershipsAndTransports.transports$,
       logger: logger,
       ownMembershipIdentity: ownMemberMock,

src/state/FloatingTile.test.ts

@@ -1,38 +0,0 @@
-/*
-Copyright 2026 Element Creations Ltd.
-
-SPDX-License-Identifier: AGPL-3.0-only OR LicenseRef-Element-Commercial
-Please see LICENSE in the repository root for full details.
-*/
-
-import { test } from "vitest";
-import { withTestScheduler } from "../utils/test";
-import { createFloatingTile } from "./FloatingTile";
-
-test("FloatingTile changes alignment on drag", () =>
-  withTestScheduler(({ scope, expectObservable, schedule }) => {
-    // Tile starts in the top left
-    const { alignment$, onDrag } = createFloatingTile(scope, {
-      inline: "start",
-      block: "start",
-    });
-    // Drag to all four corners, and then repeatedly into the top left.
-    schedule("-↗↘↙↖↖", {
-      "↗": () =>
-        onDrag({ x: 100, y: 0, xRatio: 1, yRatio: 0, endOfGesture: false }),
-      "↘": () =>
-        onDrag({ x: 100, y: 100, xRatio: 1, yRatio: 1, endOfGesture: false }),
-      "↙": () =>
-        onDrag({ x: 0, y: 100, xRatio: 0, yRatio: 1, endOfGesture: false }),
-      "↖": () =>
-        onDrag({ x: 0, y: 0, xRatio: 0, yRatio: 0, endOfGesture: false }),
-    });
-    // Alignment should change accordingly. Notably, the alignment should *not*
-    // update when repeatedly dragged into the same corner, for performance.
-    expectObservable(alignment$).toBe("↖↗↘↙↖-", {
-      "↗": { inline: "end", block: "start" },
-      "↘": { inline: "end", block: "end" },
-      "↙": { inline: "start", block: "end" },
-      "↖": { inline: "start", block: "start" },
-    });
-  }));

src/state/FloatingTile.ts

@@ -1,43 +0,0 @@
-/*
-Copyright 2026 Element Creations Ltd.
-
-SPDX-License-Identifier: AGPL-3.0-only OR LicenseRef-Element-Commercial
-Please see LICENSE in the repository root for full details.
-*/
-
-import { distinctUntilChanged, map, startWith, Subject } from "rxjs";
-
-import { type Behavior } from "./Behavior";
-import { type DragCallback, type Alignment, type Drag } from "./layout-types";
-import { type ObservableScope } from "./ObservableScope";
-
-/**
- * Represents a floating tile which may be dragged to different corners of the
- * call interface.
- */
-export interface FloatingTile {
-  alignment$: Behavior<Alignment>;
-  onDrag: DragCallback;
-}
-
-export function createFloatingTile(
-  scope: ObservableScope,
-  defaultAlignment: Alignment,
-): FloatingTile {
-  const dragEvents$ = new Subject<Drag>();
-  return {
-    alignment$: scope.behavior(
-      dragEvents$.pipe(
-        map<Drag, Alignment>(({ xRatio, yRatio }) => ({
-          inline: xRatio < 0.5 ? "start" : "end",
-          block: yRatio < 0.5 ? "start" : "end",
-        })),
-        startWith(defaultAlignment),
-        distinctUntilChanged(
-          (a1, a2) => a1.inline === a2.inline && a1.block === a2.block,
-        ),
-      ),
-    ),
-    onDrag: (drag) => dragEvents$.next(drag),
-  };
-}

src/state/GridLikeLayout.ts

@@ -5,9 +5,14 @@ SPDX-License-Identifier: AGPL-3.0-only OR LicenseRef-Element-Commercial
 Please see LICENSE in the repository root for full details.
 */
 
-import { type Layout, type LayoutMedia } from "./layout-types.ts";
+import { type BehaviorSubject } from "rxjs";
+
+import {
+  type Alignment,
+  type Layout,
+  type LayoutMedia,
+} from "./layout-types.ts";
 import { type TileStore } from "./TileStore";
-import { type FloatingTile } from "./FloatingTile.ts";
 
 export type GridLikeLayoutType =
   | "grid"
@@ -20,7 +25,7 @@ export type GridLikeLayoutType =
  */
 export function gridLikeLayout(
   media: LayoutMedia & { type: GridLikeLayoutType },
-  floatingSpotlightTile: FloatingTile,
+  spotlightAlignment$: BehaviorSubject<Alignment>,
   visibleTiles: number,
   setVisibleTiles: (value: number) => void,
   prevTiles: TileStore,
@@ -37,11 +42,9 @@ export function gridLikeLayout(
   return [
     {
       type: media.type,
-      spotlight: tiles.spotlightTile && {
-        vm: tiles.spotlightTile,
-        ...floatingSpotlightTile,
-      },
+      spotlight: tiles.spotlightTile,
       grid: tiles.gridTiles,
+      spotlightAlignment$,
       setVisibleTiles,
     } as Layout & { type: GridLikeLayoutType },
     tiles,

src/state/MediaDevices.test.ts

@@ -14,6 +14,7 @@ vi.mock("../Platform", () => ({
   },
   isFirefox: (): boolean => false,
 }));
+// One observer per device kind, so a test can add and remove hardware.
 const observers = vi.hoisted(
   () => new Map<string, { next: (devices: unknown[]) => void }>(),
 );
@@ -74,7 +75,7 @@ function device(deviceId: string, label: string, groupId = deviceId): object {
   return { deviceId, label, groupId, kind: "audioinput" };
 }
 
-/** Replaces the devices of one kind, as the browser reports them. */
+/** Replaces the hardware of one kind, as the browser would report it. */
 function setDevices(kind: string, devices: object[]): void {
   const observer = observers.get(kind);
   if (observer === undefined) throw new Error(`nothing observing ${kind}`);
@@ -102,7 +103,7 @@ describe("MediaDevices selection", () => {
 
     devices.audioInput.select("mic2");
 
-    // A later call reads the same stored preference.
+    // A later call on the same machine reads the same stored preference.
     expect(newMediaDevices().audioInput.selected$.value?.id).toBe("mic2");
   });
 
@@ -111,6 +112,7 @@ describe("MediaDevices selection", () => {
     setDevices("audioinput", [device("mic1", "Microphone 1")]);
     expect([...devices.audioInput.available$.value.keys()]).toEqual(["mic1"]);
 
+    // A headset is plugged in.
     setDevices("audioinput", [
       device("mic1", "Microphone 1"),
       device("mic2", "Headset"),
@@ -120,6 +122,7 @@ describe("MediaDevices selection", () => {
       "mic2",
     ]);
 
+    // And unplugged again.
     setDevices("audioinput", [device("mic1", "Microphone 1")]);
     expect([...devices.audioInput.available$.value.keys()]).toEqual(["mic1"]);
   });
@@ -133,6 +136,7 @@ describe("MediaDevices selection", () => {
     devices.audioInput.select("mic2");
     expect(devices.audioInput.selected$.value?.id).toBe("mic2");
 
+    // The headset is unplugged mid-call.
     setDevices("audioinput", [device("mic1", "Microphone 1")]);
 
     expect(devices.audioInput.selected$.value?.id).toBe("mic1");
@@ -141,6 +145,7 @@ describe("MediaDevices selection", () => {
   test("falls back when the remembered device is absent", () => {
     const devices = newMediaDevices();
     setDevices("audioinput", [device("mic1", "Microphone 1")]);
+    // Remembered from a previous call, on hardware that is not here now.
     devices.audioInput.select("a-device-from-last-time");
 
     expect(devices.audioInput.selected$.value?.id).toBe("mic1");
@@ -148,7 +153,7 @@ describe("MediaDevices selection", () => {
 
   test("falls back to numbered labels when labels are unavailable", () => {
     const devices = newMediaDevices();
-    // Names are withheld until permission is granted.
+    // The browser withholds names until permission has been granted.
     setDevices("audioinput", [device("mic1", ""), device("mic2", "")]);
 
     expect([...devices.audioInput.available$.value.values()]).toEqual([
@@ -162,7 +167,10 @@ describe("MediaDevices selection", () => {
     setDevices("audiooutput", [device("spk1", "Speakers")]);
 
     const available = devices.audioOutput.available$.value;
-    // Default is its own entry, unnamed: which device it resolves to isn't knowable.
+    // Default follows the operating system and re-points when it changes, so
+    // it is its own choice rather than an alias for the device it resolves to.
+    // It carries no name of its own precisely because which device it resolves
+    // to is not knowable from here.
     expect(available.get("spk1")).toEqual({ type: "name", name: "Speakers" });
     expect(available.get("")).toEqual({ type: "default", name: null });
   });

src/state/MicrophoneLevel.test.ts

@@ -9,7 +9,7 @@ import { afterEach, describe, expect, test, vi } from "vitest";
 
 import {
   ATTACK_MS,
-  LEVEL_SCALE,
+  METER_SEGMENTS,
   observeMicrophoneState$,
   RELEASE_MS,
   segmentsForVolume,
@@ -23,6 +23,8 @@ describe("segmentsForVolume", () => {
   });
 
   test("shows nothing for the hiss of a quiet room", () => {
+    // Without a noise floor these light the first segments permanently, which
+    // reads as "it can hear me" when nobody is speaking.
     expect(segmentsForVolume(0.005)).toBe(0);
     expect(segmentsForVolume(0.015)).toBe(0);
   });
@@ -38,13 +40,14 @@ describe("segmentsForVolume", () => {
   });
 
   test("moves the meter visibly for normal speech", () => {
-    // Ordinary speech reaches the middle of the meter.
-    expect(segmentsForVolume(0.2)).toBeGreaterThanOrEqual(LEVEL_SCALE / 4);
+    // Ordinary speech should reach the middle of the meter, not scrape along
+    // the floor: a meter that barely moves reads as a broken microphone.
+    expect(segmentsForVolume(0.2)).toBeGreaterThanOrEqual(METER_SEGMENTS / 4);
   });
 
   test("never exceeds the meter", () => {
-    expect(segmentsForVolume(1)).toBe(LEVEL_SCALE);
-    expect(segmentsForVolume(4)).toBe(LEVEL_SCALE);
+    expect(segmentsForVolume(1)).toBe(METER_SEGMENTS);
+    expect(segmentsForVolume(4)).toBe(METER_SEGMENTS);
   });
 
   test("treats a missing reading as silence", () => {
@@ -62,14 +65,16 @@ describe("smoothVolume", () => {
   });
 
   test("registers a syllable as it starts", () => {
-    // Most of the way within one attack time constant.
+    // Most of the way there within one attack time constant, so speech does
+    // not lag the speaker.
     expect(smoothVolume(0, 1, ATTACK_MS)).toBeGreaterThan(0.6);
   });
 
   test("rides over the gaps between words", () => {
-    // A short pause doesn't collapse the meter...
+    // A pause of a few tens of milliseconds should not collapse the meter, or
+    // it flickers rather than reading as a level.
     expect(smoothVolume(1, 0, 30)).toBeGreaterThan(0.7);
-    // ...but a real silence brings it down.
+    // A real silence still brings it down.
     expect(smoothVolume(1, 0, RELEASE_MS * 3)).toBeLessThan(0.1);
   });
 
@@ -93,7 +98,8 @@ describe("observeMicrophoneState$", () => {
     const capture = stubAudioCapture();
 
     const subscription = observeMicrophoneState$("mic1").subscribe();
-    // The menu closes before the browser hands the microphone over.
+    // The user gives up on the permission prompt and closes the menu, and only
+    // then does the browser hand the microphone over.
     subscription.unsubscribe();
     capture.grant();
     await vi.waitFor(() => expect(capture.track.stop).toHaveBeenCalled());
@@ -112,30 +118,6 @@ describe("observeMicrophoneState$", () => {
     expect(capture.contexts[0].close).toHaveBeenCalled();
   });
 
-  test("gives the microphone back when the audio graph fails to build", async () => {
-    const capture = stubAudioCapture();
-    // Fails only after getUserMedia has granted the device.
-    vi.stubGlobal(
-      "AudioContext",
-      class {
-        public constructor() {
-          throw new Error("no audio context for you");
-        }
-      },
-    );
-
-    const seen: string[] = [];
-    const subscription = observeMicrophoneState$("mic1").subscribe((state) =>
-      seen.push(state.type),
-    );
-    capture.grant();
-
-    await vi.waitFor(() => expect(seen).toContain("no-device"));
-    expect(capture.track.stop).toHaveBeenCalled();
-
-    subscription.unsubscribe();
-  });
-
   test("tells denied permission and a missing device apart", async () => {
     for (const [name, expected] of [
       ["NotAllowedError", "permission-denied"],
@@ -157,26 +139,23 @@ describe("observeMicrophoneState$", () => {
   test("says nothing on a frame that did not change the level", async () => {
     const capture = stubAudioCapture();
 
-    const states: string[] = [];
-    let levels = 0;
-    const subscription = observeMicrophoneState$("mic1").subscribe((state) => {
-      states.push(state.type);
-      if (state.type === "level") state.level$.subscribe(() => levels++);
-    });
+    let emissions = 0;
+    const subscription = observeMicrophoneState$("mic1").subscribe(
+      () => emissions++,
+    );
     capture.grant();
-    await vi.waitFor(() => expect(levels).toBe(1));
+    await vi.waitFor(() => expect(emissions).toBe(1));
 
-    // Read every frame, but a steady signal emits once, and the state itself
-    // arrives only once.
+    // The analyser is read every animation frame, but the meter has only
+    // METER_SEGMENTS steps: a steady signal must not redraw the meter.
     capture.drawFrames(20);
-    expect(levels).toBe(1);
-    expect(states).toEqual(["level"]);
+    expect(emissions).toBe(1);
 
     subscription.unsubscribe();
   });
 });
 
-/** An error carrying the browser's `name`. */
+/** An error with the `name` the browser would give it, not just a message. */
 function named(error: Error, name: string): Error {
   error.name = name;
   return error;

src/state/MicrophoneLevel.ts

@@ -5,25 +5,42 @@ SPDX-License-Identifier: AGPL-3.0-only OR LicenseRef-Element-Commercial
 Please see LICENSE in the repository root for full details.
 */
 
-import { BehaviorSubject, Observable } from "rxjs";
+import { distinctUntilChanged, Observable } from "rxjs";
 import { logger } from "matrix-js-sdk/lib/logger";
 
-import { type Behavior } from "./Behavior";
-
-/** What the microphone picks up, or why it can't be read. */
+/**
+ * What the microphone selector can say about the input, beyond its level.
+ *
+ * Silence and a broken microphone look identical on a meter, so the states a
+ * user has to act on are named rather than drawn as a flat bar.
+ */
 export type MicrophoneState =
-  // A Behavior, so a changing level can be drawn without re-rendering.
-  | { type: "level"; level$: Behavior<number> }
+  | { type: "level"; level: number }
   | { type: "permission-denied" }
   | { type: "no-device" };
 
-/** Scale a level is reported on. Fixed rather than the bar count, so a level reads the same at any width. */
-export const LEVEL_SCALE = 24;
+/**
+ * Steps the meter is drawn in. The level is quantised to these.
+ *
+ * Enough of them that they sit close together across the width of the menu:
+ * the bars keep a fixed size, so too few leaves visible gaps between them.
+ */
+export const METER_SEGMENTS = 24;
 
 /**
- * The level of a microphone, captured while subscribed. Its own capture rather
- * than the call's track, because pre-join freezes that track to the device
- * selected at mount.
+ * Observes what a microphone is picking up, as the meter should show it.
+ *
+ * Subscribing opens the device and unsubscribing releases it, so it is held for
+ * exactly as long as something is watching — the menu, and not the call.
+ *
+ * Opens a capture of its own rather than reading the track the call already
+ * holds. That is a shortcut, recorded as S1 in the feature spec: the pre-join
+ * screen freezes its audio track to the device selected when it mounted, so a
+ * meter fed from that track could not follow the picker.
+ *
+ * The level says whether the microphone is picking anything up, which is not
+ * the same as whether the user is being heard: it keeps reading while muted,
+ * and the mute control is what says nothing is transmitted.
  */
 export function observeMicrophoneState$(
   deviceId: string | undefined,
@@ -32,9 +49,9 @@ export function observeMicrophoneState$(
     let stream: MediaStream | undefined;
     let context: AudioContext | undefined;
     let frame: number | undefined;
-    let level: BehaviorSubject<number> | undefined;
 
-    // Idempotent: teardown and start can both call it.
+    // Safe to call more than once: unsubscribing runs it, and `start` runs it
+    // again for anything the browser handed over after that.
     const release = (): void => {
       if (frame !== undefined) cancelAnimationFrame(frame);
       stream?.getTracks().forEach((track) => track.stop());
@@ -42,8 +59,6 @@ export function observeMicrophoneState$(
       frame = undefined;
       stream = undefined;
       context = undefined;
-      level?.complete();
-      level = undefined;
     };
 
     const start = async (): Promise<void> => {
@@ -51,11 +66,16 @@ export function observeMicrophoneState$(
         audio:
           deviceId === undefined ? true : { deviceId: { exact: deviceId } },
       });
-      // Unsubscribed while the permission prompt was open.
+      // A permission prompt outlives the subscription that asked for it, so by
+      // now nobody may be watching — and `release` ran while `stream` was still
+      // undefined. Nothing will call it again, so release here or the device
+      // stays held, with the indicator lit and no meter on screen.
       if (subscriber.closed) return release();
 
       context = new AudioContext();
-      // Starts suspended outside a user gesture, which would read as silence.
+      // Chrome starts the context suspended unless it was created during a
+      // gesture; opening the menu is one, but resume explicitly so the meter
+      // cannot silently sit at zero.
       if (context.state === "suspended") await context.resume();
       if (subscriber.closed) return release();
 
@@ -65,13 +85,11 @@ export function observeMicrophoneState$(
       const samples = new Uint8Array(analyser.fftSize);
       let displayed = 0;
       let previousFrame = performance.now();
-      const current = new BehaviorSubject(0);
-      level = current;
-      subscriber.next({ type: "level", level$: current });
 
       const read = (): void => {
         analyser.getByteTimeDomainData(samples);
-        // RMS: perceived loudness rather than the peak.
+        // Root mean square of the waveform around its centre, which is the
+        // loudness a listener perceives rather than the tallest spike.
         let sum = 0;
         for (const sample of samples) {
           const centred = (sample - 128) / 128;
@@ -84,22 +102,24 @@ export function observeMicrophoneState$(
           now - previousFrame,
         );
         previousFrame = now;
-        // Frames that don't move the quantised level say nothing.
-        const next = segmentsForVolume(displayed);
-        if (next !== current.value) current.next(next);
+        subscriber.next({ type: "level", level: segmentsForVolume(displayed) });
         frame = requestAnimationFrame(read);
       };
       read();
     };
 
-    start().catch((e: unknown) => {
-      // Building the graph can fail after the device was granted.
-      release();
-      subscriber.next(stateForFailure(e));
-    });
+    start().catch((e: unknown) => subscriber.next(stateForFailure(e)));
 
     return release;
-  });
+  }).pipe(
+    // Read every animation frame, but quantised to a whole number of segments,
+    // so most frames say nothing new and should not reach React.
+    distinctUntilChanged(
+      (a, b) =>
+        a.type === b.type &&
+        (a.type !== "level" || b.type !== "level" || a.level === b.level),
+    ),
+  );
 }
 
 /** What a failure to open the microphone means for the person using it. */
@@ -113,24 +133,53 @@ function stateForFailure(e: unknown): MicrophoneState {
   return { type: "no-device" };
 }
 
-/** Below this counts as silence, so a quiet room's hiss doesn't light the first bars. */
+/**
+ * Loudness below which the microphone is treated as picking up nothing.
+ *
+ * A quiet room is never digitally silent, and without a floor that hiss lights
+ * the first segments permanently — which reads as "it can hear me" when nobody
+ * is speaking.
+ */
 const NOISE_FLOOR = 0.02;
 
-/** Quantises a 0..1 volume onto {@link LEVEL_SCALE}. */
+/**
+ * Quantises a 0..1 volume to a whole number of meter segments.
+ *
+ * Exported for the tests: the mapping from loudness to segments is the part
+ * that decides whether quiet, normal and loud speech look different.
+ */
 export function segmentsForVolume(volume: number): number {
   if (!Number.isFinite(volume) || volume <= NOISE_FLOOR) return 0;
-  // Square root, so ordinary speech reaches the middle of the scale.
+  // Volume arrives as amplitude, where speech occupies a small part of the top
+  // of the range. A square root spreads that out, so ordinary speech moves the
+  // meter through its middle rather than barely leaving the floor.
   const aboveFloor = (Math.min(volume, 1) - NOISE_FLOOR) / (1 - NOISE_FLOOR);
-  return Math.min(LEVEL_SCALE, Math.ceil(Math.sqrt(aboveFloor) * LEVEL_SCALE));
+  return Math.min(
+    METER_SEGMENTS,
+    Math.ceil(Math.sqrt(aboveFloor) * METER_SEGMENTS),
+  );
 }
 
-/** Rise time constant: short, so a syllable registers as it starts. */
+/**
+ * How quickly the meter follows a rise in loudness, as a time constant in
+ * milliseconds. Short, so a syllable registers the moment it starts.
+ */
 export const ATTACK_MS = 50;
 
-/** Fall time constant: longer, so the gaps between words don't flicker. */
+/**
+ * How quickly the meter follows a fall. Longer than the attack: speech is full
+ * of gaps a few tens of milliseconds long, and a meter that tracked them
+ * exactly would flicker rather than read as a level.
+ */
 export const RELEASE_MS = 120;
 
-/** Eases towards a reading, by elapsed time so the frame rate doesn't matter. */
+/**
+ * Moves a displayed level towards a new reading, fast upwards and slowly
+ * downwards.
+ *
+ * Framed in elapsed time rather than frames, so the meter behaves the same on a
+ * 60Hz and a 120Hz display, and does not jump when a frame is dropped.
+ */
 export function smoothVolume(
   displayed: number,
   reading: number,

src/state/OneOnOneDesktopLayout.ts

@@ -6,19 +6,21 @@ SPDX-License-Identifier: AGPL-3.0-only OR LicenseRef-Element-Commercial
 Please see LICENSE in the repository root for full details.
 */
 
+import { type BehaviorSubject } from "rxjs";
+
 import {
+  type Alignment,
   type OneOnOneDesktopLayout,
   type OneOnOneDesktopLayoutMedia,
 } from "./layout-types";
 import { type TileStore } from "./TileStore";
-import { type FloatingTile } from "./FloatingTile";
 
 /**
  * Produces a one-on-one desktop layout with the given media.
  */
 export function oneOnOneDesktopLayout(
   media: OneOnOneDesktopLayoutMedia,
-  pipTile: FloatingTile,
+  pipAlignment$: BehaviorSubject<Alignment>,
   prevTiles: TileStore,
 ): [OneOnOneDesktopLayout, TileStore] {
   const update = prevTiles.from(2);
@@ -30,7 +32,8 @@ export function oneOnOneDesktopLayout(
     {
       type: media.type,
       spotlight: tiles.gridTilesByMedia.get(media.spotlight)!,
-      pip: { vm: tiles.gridTilesByMedia.get(media.pip)!, ...pipTile },
+      pip: tiles.gridTilesByMedia.get(media.pip)!,
+      pipAlignment$,
     },
     tiles,
   ];

src/state/OneOnOneMobileLayout.ts

@@ -6,20 +6,23 @@ SPDX-License-Identifier: AGPL-3.0-only OR LicenseRef-Element-Commercial
 Please see LICENSE in the repository root for full details.
 */
 
+import { type BehaviorSubject } from "rxjs";
+
 import {
+  type Alignment,
   type OneOnOneMobileLayout,
   type OneOnOneMobileLayoutMedia,
 } from "./layout-types";
 import { type TileStore } from "./TileStore";
 import { type Behavior } from "./Behavior";
-import { type FloatingTile } from "./FloatingTile";
 
 /**
  * Produces a one-on-one mobile layout with the given media.
  */
 export function oneOnOneMobileLayout(
   media: OneOnOneMobileLayoutMedia,
-  pipTile: FloatingTile & { size$: Behavior<"sm" | "lg"> },
+  pipSize$: Behavior<"sm" | "lg">,
+  pipAlignment$: BehaviorSubject<Alignment>,
   prevTiles: TileStore,
 ): [OneOnOneMobileLayout, TileStore] {
   const update = prevTiles.from(media.pip === undefined ? 0 : 1);
@@ -27,12 +30,13 @@ export function oneOnOneMobileLayout(
   if (media.pip !== undefined) update.registerGridTile(media.pip);
   const tiles = update.build();
 
-  const pipVm = media.pip && tiles.gridTilesByMedia.get(media.pip);
   return [
     {
       type: media.type,
       spotlight: tiles.spotlightTile!,
-      pip: pipVm && { vm: pipVm, ...pipTile },
+      pip: media.pip && tiles.gridTilesByMedia.get(media.pip),
+      pipSize$,
+      pipAlignment$,
     },
     tiles,
   ];

src/state/SessionBehaviors.ts

@@ -22,10 +22,6 @@ import {
 } from "./ObservableScope";
 import { type Behavior } from "./Behavior";
 
-/**
- * Tracks the transports used by ourselves, plus all other MatrixRTC session
- * members.
- */
 export const membershipsAndTransports$ = (
   scope: ObservableScope,
   memberships$: Behavior<Epoch<CallMembership[]>>,
@@ -35,6 +31,14 @@ export const membershipsAndTransports$ = (
   >;
   transports$: Behavior<Epoch<LivekitTransportConfig[]>>;
 } => {
+  /**
+   * Lists the transports used by ourselves, plus all other MatrixRTC session
+   * members.
+   * For completeness this also lists the preferred transport and
+   * whether we are in multi-SFU mode or sticky events mode.
+   * `advertisedTransport$` reads these values together, so bundling them avoids inconsistent state or
+   * excessive updates when using RxJS.
+   */
   const membershipsWithTransport$: Behavior<
     Epoch<
       {

src/state/SpotlightExpandedLayout.ts

@@ -5,19 +5,21 @@ SPDX-License-Identifier: AGPL-3.0-only OR LicenseRef-Element-Commercial
 Please see LICENSE in the repository root for full details.
 */
 
+import { type BehaviorSubject } from "rxjs";
+
 import {
+  type Alignment,
   type SpotlightExpandedLayout,
   type SpotlightExpandedLayoutMedia,
 } from "./layout-types";
 import { type TileStore } from "./TileStore";
-import { type FloatingTile } from "./FloatingTile";
 
 /**
  * Produces an expanded spotlight layout with the given media.
  */
 export function spotlightExpandedLayout(
   media: SpotlightExpandedLayoutMedia,
-  pipTile: FloatingTile,
+  pipAlignment$: BehaviorSubject<Alignment>,
   prevTiles: TileStore,
 ): [SpotlightExpandedLayout, TileStore] {
   const update = prevTiles.from(1);
@@ -25,12 +27,12 @@ export function spotlightExpandedLayout(
   if (media.pip !== undefined) update.registerPipTile(media.pip);
   const tiles = update.build();
 
-  const pipVm = tiles.gridTiles.at(0);
   return [
     {
       type: media.type,
       spotlight: tiles.spotlightTile!,
-      pip: pipVm && { vm: pipVm, ...pipTile },
+      pip: tiles.gridTiles.at(0),
+      pipAlignment$,
     },
     tiles,
   ];

src/state/layout-types.test.ts

@@ -6,25 +6,33 @@ Please see LICENSE in the repository root for full details.
 */
 
 import { test, expect } from "vitest";
-import { layoutShallowEquals, type Layout } from "./layout-types";
+import {
+  type Alignment,
+  layoutShallowEquals,
+  type Layout,
+} from "./layout-types";
 import {
   type SpotlightTileViewModel,
   type GridTileViewModel,
 } from "./TileViewModel";
-import { type FloatingTile } from "./FloatingTile";
+import { BehaviorSubject } from "rxjs";
 
 const spotlightTile = {} as unknown as SpotlightTileViewModel;
 const gridTile = {} as unknown as GridTileViewModel;
-const pipTile = {} as unknown as FloatingTile & { vm: GridTileViewModel };
+const pipAlignment$ = new BehaviorSubject<Alignment>({
+  inline: "end",
+  block: "end",
+});
 
 const spotlightExpanded: Layout = {
   type: "spotlight-expanded",
   spotlight: spotlightTile,
+  pipAlignment$,
 };
 
 const spotlightPortrait: Layout = {
   type: "spotlight-portrait",
-  spotlight: { vm: spotlightTile },
+  spotlight: spotlightTile,
   grid: [gridTile],
   setVisibleTiles: () => {},
 };
@@ -38,12 +46,12 @@ test("layoutShallowEquals detects a missing key", () => {
   expect(
     layoutShallowEquals(spotlightExpanded, {
       ...spotlightExpanded,
-      pip: pipTile,
+      pip: gridTile,
     }),
   ).toBe(false);
   expect(
     layoutShallowEquals(
-      { ...spotlightExpanded, pip: pipTile },
+      { ...spotlightExpanded, pip: gridTile },
       spotlightExpanded,
     ),
   ).toBe(false);

src/state/layout-types.ts

@@ -5,6 +5,8 @@ SPDX-License-Identifier: AGPL-3.0-only OR LicenseRef-Element-Commercial
 Please see LICENSE in the repository root for full details.
 */
 
+import { type BehaviorSubject } from "rxjs";
+
 import { type LocalUserMediaViewModel } from "./media/LocalUserMediaViewModel.ts";
 import { type MediaViewModel } from "./media/MediaViewModel.ts";
 import { type RingingMediaViewModel } from "./media/RingingMediaViewModel.ts";
@@ -15,7 +17,6 @@ import {
 } from "./TileViewModel.ts";
 import { type Behavior } from "./Behavior.ts";
 import { shallowEquals as arrayShallowEquals } from "../utils/array.ts";
-import { type FloatingTile } from "./FloatingTile.ts";
 
 export interface GridLayoutMedia {
   type: "grid";
@@ -79,48 +80,24 @@ export interface Alignment {
   block: "start" | "end";
 }
 
-export interface Drag {
-  /**
-   * The X offset of the dragged tile relative to its container.
-   */
-  x: number;
-  /**
-   * The Y offset of the dragged tile relative to its container.
-   */
-  y: number;
-  /**
-   * The X coordinate of the dragged tile, as a scalar of the container's width.
-   */
-  xRatio: number;
-  /**
-   * The Y coordinate of the dragged tile, as a scalar of the container's height.
-   */
-  yRatio: number;
-  /**
-   * Whether this event ends the drag gesture.
-   */
-  endOfGesture: boolean;
-}
-
-export type DragCallback = (drag: Drag) => void;
-
 export interface GridLayout {
   type: "grid";
-  spotlight?: FloatingTile & { vm: SpotlightTileViewModel };
+  spotlight?: SpotlightTileViewModel;
   grid: GridTileViewModel[];
+  spotlightAlignment$: BehaviorSubject<Alignment>;
   setVisibleTiles: (value: number) => void;
 }
 
 export interface SpotlightLandscapeLayout {
   type: "spotlight-landscape";
-  spotlight: { vm: SpotlightTileViewModel };
+  spotlight: SpotlightTileViewModel;
   grid: GridTileViewModel[];
   setVisibleTiles: (value: number) => void;
 }
 
 export interface SpotlightPortraitLayout {
   type: "spotlight-portrait";
-  spotlight: { vm: SpotlightTileViewModel };
+  spotlight: SpotlightTileViewModel;
   grid: GridTileViewModel[];
   setVisibleTiles: (value: number) => void;
 }
@@ -128,19 +105,23 @@ export interface SpotlightPortraitLayout {
 export interface SpotlightExpandedLayout {
   type: "spotlight-expanded";
   spotlight: SpotlightTileViewModel;
-  pip?: FloatingTile & { vm: GridTileViewModel };
+  pip?: GridTileViewModel;
+  pipAlignment$: BehaviorSubject<Alignment>;
 }
 
 export interface OneOnOneDesktopLayout {
   type: "one-on-one-desktop";
   spotlight: GridTileViewModel;
-  pip: FloatingTile & { vm: GridTileViewModel };
+  pip: GridTileViewModel;
+  pipAlignment$: BehaviorSubject<Alignment>;
 }
 
 export interface OneOnOneMobileLayout {
   type: "one-on-one-mobile";
   spotlight: SpotlightTileViewModel;
-  pip?: FloatingTile & { vm: GridTileViewModel; size$: Behavior<"sm" | "lg"> };
+  pip?: GridTileViewModel;
+  pipSize$: Behavior<"sm" | "lg">;
+  pipAlignment$: BehaviorSubject<Alignment>;
 }
 
 export interface PipLayout {

src/state/media/MediaViewModel.test.ts

@@ -25,7 +25,6 @@ import {
   mockRemoteScreenShare,
 } from "../../utils/test";
 import { constant } from "../Behavior";
-import { showConnectionStats } from "../../settings/settings";
 
 global.MediaStreamTrack = class {} as unknown as {
   new (): MediaStreamTrack;
@@ -43,12 +42,6 @@ vi.mock("../../Platform", () => ({
   },
 }));
 
-const observeRtpStreamStatsMock = vi.hoisted(() => vi.fn());
-vi.mock("./observeRtpStreamStats", async (importOriginal) => ({
-  ...(await importOriginal<Record<string, unknown>>()),
-  observeRtpStreamStats$: observeRtpStreamStatsMock,
-}));
-
 const rtcMembership = mockRtcMembership("@alice:example.org", "AAAA");
 
 test("control a participant's volume", () => {
@@ -296,37 +289,3 @@ test("remote media is not in waiting state when user does not intend to publish
   );
   expect(vm.waitingForMedia$.value).toBe(false);
 });
-
-test("user media polls stream stats only while the setting is on", () => {
-  const participant = mockRemoteParticipant({});
-  const vm = mockRemoteMedia(rtcMembership, {}, participant);
-  onTestFinished(() => showConnectionStats.setValue(false));
-  withTestScheduler(({ cold, expectObservable, schedule }) => {
-    const stats = { type: "inbound-rtp" } as RTCInboundRtpStreamStats;
-    observeRtpStreamStatsMock.mockImplementation(() =>
-      cold("-s", { s: stats }),
-    );
-    schedule("-a-b", {
-      a() {
-        showConnectionStats.setValue(true);
-      },
-      b() {
-        showConnectionStats.setValue(false);
-      },
-    });
-    expectObservable(vm.audioStreamStats$).toBe("u-su", {
-      u: undefined,
-      s: stats,
-    });
-  });
-  expect(observeRtpStreamStatsMock).toHaveBeenCalledWith(
-    participant,
-    Track.Source.Microphone,
-    "inbound-rtp",
-  );
-  expect(observeRtpStreamStatsMock).toHaveBeenCalledWith(
-    participant,
-    Track.Source.Camera,
-    "inbound-rtp",
-  );
-});

src/state/media/UserMediaViewModel.ts

@@ -10,6 +10,7 @@ import {
   BehaviorSubject,
   combineLatest,
   map,
+  type Observable,
   of,
   Subject,
   switchMap,
@@ -53,10 +54,10 @@ export interface BaseUserMediaViewModel extends BaseMemberMediaViewModel {
   rtcBackendIdentity: string;
   handRaised$: Behavior<Date | null>;
   reaction$: Behavior<ReactionOption | null>;
-  audioStreamStats$: Behavior<
+  audioStreamStats$: Observable<
     RTCInboundRtpStreamStats | RTCOutboundRtpStreamStats | undefined
   >;
-  videoStreamStats$: Behavior<
+  videoStreamStats$: Observable<
     RTCInboundRtpStreamStats | RTCOutboundRtpStreamStats | undefined
   >;
   /**
@@ -93,21 +94,6 @@ export function createBaseUserMedia(
   );
   const toggleCropVideo$ = new Subject<void>();
   const videoAspectRatio$ = new BehaviorSubject(NaN);
-  const streamStats$ = (
-    scope: ObservableScope,
-    source: Track.Source,
-  ): Behavior<
-    RTCInboundRtpStreamStats | RTCOutboundRtpStreamStats | undefined
-  > =>
-    scope.behavior(
-      combineLatest([participant$, showConnectionStats.value$]).pipe(
-        switchMap(([p, showConnectionStats]) =>
-          p && showConnectionStats
-            ? observeRtpStreamStats$(p, source, statsType)
-            : of(undefined),
-        ),
-      ),
-    );
 
   return {
     ...createMemberMedia(scope, {
@@ -144,8 +130,25 @@ export function createBaseUserMedia(
     rtcBackendIdentity,
     handRaised$,
     reaction$,
-    audioStreamStats$: streamStats$(scope, Track.Source.Microphone),
-    videoStreamStats$: streamStats$(scope, Track.Source.Camera),
+    audioStreamStats$: combineLatest([
+      participant$,
+      showConnectionStats.value$,
+    ]).pipe(
+      switchMap(([p, showConnectionStats]) => {
+        //
+        if (!p || !showConnectionStats) return of(undefined);
+        return observeRtpStreamStats$(p, Track.Source.Microphone, statsType);
+      }),
+    ),
+    videoStreamStats$: combineLatest([
+      participant$,
+      showConnectionStats.value$,
+    ]).pipe(
+      switchMap(([p, showConnectionStats]) => {
+        if (!p || !showConnectionStats) return of(undefined);
+        return observeRtpStreamStats$(p, Track.Source.Camera, statsType);
+      }),
+    ),
     setVideoAspectRatio: (ratio) => videoAspectRatio$.next(ratio),
   };
 }

src/tile/GridTile.tsx

@@ -37,6 +37,7 @@ import {
   Menu,
   Text,
 } from "@vector-im/compound-web";
+import { useObservableEagerState } from "observable-hooks";
 
 import styles from "./GridTile.module.css";
 import { Slider } from "../Slider";
@@ -132,8 +133,12 @@ const UserMediaTileInner: FC<UserMediaTileProps & { menu: ReactNode }> = ({
   const { t } = useTranslation();
   const video = useBehavior(vm.video$);
   const unencryptedWarning = useBehavior(vm.unencryptedWarning$);
-  const audioStreamStats = useBehavior(vm.audioStreamStats$);
-  const videoStreamStats = useBehavior(vm.videoStreamStats$);
+  const audioStreamStats = useObservableEagerState<
+    RTCInboundRtpStreamStats | RTCOutboundRtpStreamStats | undefined
+  >(vm.audioStreamStats$);
+  const videoStreamStats = useObservableEagerState<
+    RTCInboundRtpStreamStats | RTCOutboundRtpStreamStats | undefined
+  >(vm.videoStreamStats$);
   const audioEnabled = useBehavior(vm.audioEnabled$);
   const videoEnabled = useBehavior(vm.videoEnabled$);
   const speaking = useBehavior(vm.speaking$);

src/tile/SpotlightTile.tsx

@@ -26,7 +26,8 @@ import {
   VolumeOnSolidIcon,
 } from "@vector-im/compound-design-tokens/assets/web/icons";
 import { animated } from "@react-spring/web";
-import { BehaviorSubject, type Observable, map } from "rxjs";
+import { type Observable, map } from "rxjs";
+import { useObservableRef } from "observable-hooks";
 import { useTranslation } from "react-i18next";
 import classNames from "classnames";
 import { type TrackReferenceOrPlaceholder } from "@livekit/components-core";
@@ -415,13 +416,7 @@ export const SpotlightTile: FC<Props> = ({
 }) => {
   const { t } = useTranslation();
   const rootElement = useRootElement();
-  const root$ = useInitial(
-    () => new BehaviorSubject<HTMLDivElement | null>(null),
-  );
-  const ourRef = useCallback(
-    (root: HTMLDivElement | null) => root$.next(root),
-    [root$],
-  );
+  const [ourRef, root$] = useObservableRef<HTMLDivElement | null>(null);
   const ref = useMergedRefs(ourRef, theirRef);
   const maximised = useBehavior(vm.maximised$);
   const background = useBehavior(vm.background$);

src/useAudioContext.tsx

@@ -7,6 +7,7 @@ Please see LICENSE in the repository root for full details.
 
 import { logger } from "matrix-js-sdk/lib/logger";
 import { useState, useEffect } from "react";
+import { useObservableEagerState } from "observable-hooks";
 
 import {
   soundEffectVolume as soundEffectVolumeSetting,
@@ -16,7 +17,6 @@ import { useEarpieceAudioConfig, useMediaDevices } from "./MediaDevicesContext";
 import { type PrefetchedSounds } from "./soundUtils";
 import { useUrlParams } from "./UrlParams";
 import * as controls from "./controls";
-import { useBehavior } from "./useBehavior";
 
 /**
  * Play a sound though a given AudioContext. Will take
@@ -168,7 +168,7 @@ export function useAudioContext<S extends string>(
     };
   }, [props.sounds, props.latencyHint]);
 
-  const audioOutputId = useBehavior(
+  const audioOutputId = useObservableEagerState(
     useMediaDevices().audioOutput.selected$,
   )?.id;
   const { controlledAudioDevices } = useUrlParams();

src/useBehavior.test.tsx

@@ -1,23 +0,0 @@
-/*
-Copyright 2026 Element Creations Ltd.
-
-SPDX-License-Identifier: AGPL-3.0-only OR LicenseRef-Element-Commercial
-Please see LICENSE in the repository root for full details.
-*/
-
-import { act, renderHook } from "@testing-library/react";
-import { BehaviorSubject } from "rxjs";
-import { describe, expect, test } from "vitest";
-
-import { useBehavior } from "./useBehavior";
-
-describe("useBehavior", () => {
-  test("reads the current value and follows changes", () => {
-    const value$ = new BehaviorSubject(1);
-    const { result } = renderHook(() => useBehavior(value$));
-    expect(result.current).toBe(1);
-
-    act(() => value$.next(2));
-    expect(result.current).toBe(2);
-  });
-});

src/useValueBehavior.test.tsx

@@ -1,34 +0,0 @@
-/*
-Copyright 2026 Element Creations Ltd.
-
-SPDX-License-Identifier: AGPL-3.0-only OR LicenseRef-Element-Commercial
-Please see LICENSE in the repository root for full details.
-*/
-
-import { renderHook } from "@testing-library/react";
-import { describe, expect, test } from "vitest";
-
-import { useValueBehavior } from "./useValueBehavior";
-
-describe("useValueBehavior", () => {
-  test("holds the value from the first render", () => {
-    const { result } = renderHook(({ value }) => useValueBehavior(value), {
-      initialProps: { value: "a" },
-    });
-    expect(result.current.value).toBe("a");
-  });
-
-  test("keeps one identity and takes each new value", () => {
-    const { result, rerender } = renderHook(
-      ({ value }) => useValueBehavior(value),
-      { initialProps: { value: "a" } },
-    );
-    const value$ = result.current;
-    const seen: string[] = [];
-    value$.subscribe((value) => seen.push(value));
-
-    rerender({ value: "b" });
-    expect(result.current).toBe(value$);
-    expect(seen).toEqual(["a", "b"]);
-  });
-});

src/useValueBehavior.ts

@@ -1,25 +0,0 @@
-/*
-Copyright 2026 Element Creations Ltd.
-
-SPDX-License-Identifier: AGPL-3.0-only OR LicenseRef-Element-Commercial
-Please see LICENSE in the repository root for full details.
-*/
-
-import { useEffect } from "react";
-import { BehaviorSubject } from "rxjs";
-
-import { type Behavior } from "./state/Behavior";
-import { useInitial } from "./useInitial";
-
-/**
- * React hook which mirrors a value from the render cycle into a behavior, so
- * that a prop or memoised value can be handed to a view model. The behavior
- * takes each new value once the render that produced it has committed.
- */
-export function useValueBehavior<T>(value: T): Behavior<T> {
-  const value$ = useInitial(() => new BehaviorSubject(value));
-  useEffect(() => {
-    value$.next(value);
-  }, [value$, value]);
-  return value$;
-}

src/utils/observable.test.ts

@@ -9,9 +9,30 @@ import { expect, test } from "vitest";
 import { type Observable, of, Subject, switchMap } from "rxjs";
 
 import { withTestScheduler } from "./test";
-import { filterBehavior, generateItems, pauseWhen } from "./observable";
+import { or$, filterBehavior, generateItems, pauseWhen } from "./observable";
 import { type Behavior } from "../state/Behavior";
 
+const yesNo = {
+  y: true,
+  n: false,
+};
+
+test("or$", () => {
+  withTestScheduler(({ behavior, expectObservable }) => {
+    const input1Marbles = "ny--n--";
+    const input2Marbles = "n-y--n-";
+    const input3Marbles = "n--y--n";
+    const outputMarbles = "nyyyyyn";
+    expectObservable(
+      or$(
+        behavior(input1Marbles, yesNo),
+        behavior(input2Marbles, yesNo),
+        behavior(input3Marbles, yesNo),
+      ),
+    ).toBe(outputMarbles, yesNo);
+  });
+});
+
 test("pauseWhen", () => {
   withTestScheduler(({ behavior, expectObservable }) => {
     const inputMarbles = " abcdefgh-i-jk-";

src/utils/observable.ts

@@ -8,6 +8,7 @@ Please see LICENSE in the repository root for full details.
 import {
   type Observable,
   audit,
+  combineLatest,
   concat,
   defer,
   filter,
@@ -112,6 +113,14 @@ export function getValue<T>(state$: Observable<T>): T {
   return value;
 }
 
+/**
+ * Creates an Observable that has a value of true whenever some of its inputs
+ * are true.
+ */
+export function or$(...inputs: Observable<boolean>[]): Observable<boolean> {
+  return combineLatest(inputs, (...flags) => flags.some((flag) => flag));
+}
+
 /**
  * RxJS operator that pauses all changes in the input value whenever a Behavior
  * is true. When the Behavior returns to being false, the most recently

src/utils/test.ts

@@ -594,19 +594,21 @@ export class MockConnection extends Connection {
 
 export interface StubbedCapture {
   getUserMedia: Mock;
-  /** Grants the microphone, as the browser does once permission is given. */
+  /** Hands the microphone over, as the browser does once permission is given. */
   grant: () => void;
   track: { stop: Mock };
   contexts: { close: Mock }[];
-  /** Runs the pending animation frames, in order. */
+  /** Runs the animation frames the level meter reads on, in order. */
   drawFrames: (count: number) => void;
-  /** Sets the microphone's loudness from the next frame, 0 to 1. */
-  speak: (amplitude: number) => void;
 }
 
 /**
- * Stubs the capture and Web Audio APIs, with the grant and the animation
- * frames driven by the test. Undo with {@link restoreAudioCapture}.
+ * Stubs just enough of the capture and Web Audio APIs for a microphone level to
+ * be read, with the grant held back so a test decides when — or whether — it
+ * lands, and with animation frames driven by hand rather than by a clock.
+ *
+ * Call {@link restoreAudioCapture} afterwards, or every later test in the run
+ * inherits the stub.
  */
 export function stubAudioCapture(): StubbedCapture {
   const track = { stop: vi.fn() };
@@ -618,7 +620,6 @@ export function stubAudioCapture(): StubbedCapture {
   });
 
   const frames: FrameRequestCallback[] = [];
-  let amplitude = 0;
   vi.stubGlobal("requestAnimationFrame", (callback: FrameRequestCallback) => {
     frames.push(callback);
     return frames.length;
@@ -635,15 +636,10 @@ export function stubAudioCapture(): StubbedCapture {
       public createAnalyser(): object {
         return {
           fftSize: 1024,
+          // Digital silence, which is the midpoint of the range and not zero:
+          // a buffer left at zero reads as a full-scale waveform.
           getByteTimeDomainData: (samples: Uint8Array): void => {
-            // Silence is the midpoint of the range; a zeroed buffer reads as full scale.
-            if (amplitude <= 0) {
-              samples.fill(128);
-              return;
-            }
-            const peak = Math.round(Math.min(1, amplitude) * 127);
-            for (let i = 0; i < samples.length; i++)
-              samples[i] = 128 + (i % 2 ? peak : -peak);
+            samples.fill(128);
           },
         };
       }
@@ -652,7 +648,8 @@ export function stubAudioCapture(): StubbedCapture {
       }
     },
   );
-  // Only this property: replacing navigator loses getters like userAgent.
+  // Only this property: replacing navigator wholesale drops the getters on its
+  // prototype, such as userAgent.
   Object.defineProperty(navigator, "mediaDevices", {
     configurable: true,
     value: { getUserMedia: vi.fn().mockReturnValue(granted) },
@@ -666,9 +663,6 @@ export function stubAudioCapture(): StubbedCapture {
     drawFrames: (count): void => {
       for (let i = 0; i < count; i++) frames.shift()?.(i);
     },
-    speak: (next): void => {
-      amplitude = next;
-    },
   };
 }
 

vite-component-dev.config.ts

@@ -9,7 +9,7 @@ import { defineConfig, searchForWorkspaceRoot } from "vite";
 import { realpathSync } from "node:fs";
 import * as fs from "node:fs";
 
-import { vitePluginsConfig } from "./vite.config.ts";
+import { vitePluginsConfig } from "./vite.config";
 import { scopeStylesToRoot } from "./component/build/scopeStylesToRoot";
 
 // Serves the harness under `component/dev`, which embeds Element Call as a

vite-component.config.ts

@@ -7,7 +7,7 @@ Please see LICENSE in the repository root for full details.
 
 import { defineConfig } from "vite";
 
-import { vitePluginsConfig } from "./vite.config.ts";
+import { vitePluginsConfig } from "./vite.config";
 import { scopeStylesToRoot } from "./component/build/scopeStylesToRoot";
 
 // Config for Element Call as a React component, to be imported by an

vite-embedded.config.ts

@@ -8,7 +8,7 @@ Please see LICENSE in the repository root for full details.
 import { defineConfig, mergeConfig } from "vite";
 import generateFile from "vite-plugin-generate-file";
 
-import fullConfig from "./vite.config.ts";
+import fullConfig from "./vite.config";
 
 const base = "./";
 

vitest.config.ts

@@ -1,6 +1,6 @@
 import { defineConfig, mergeConfig } from "vitest/config";
 import { playwright } from "@vitest/browser-playwright";
-import { vitePluginsConfig } from "./vite.config.ts";
+import { vitePluginsConfig } from "./vite.config";
 import { storybookTest } from "@storybook/addon-vitest/vitest-plugin";
 import path from "node:path";
 import { fileURLToPath } from "node:url";