Render tiles for unmappable LiveKit identities

2026-10-26 00:12:27 +00:00 · 2026-09-14 10:30:45 +02:00
38 changed files with 1229 additions and 513 deletions
@@ -19,7 +19,7 @@ services:
      - ./backend/playwright_homeserver-othersite.yaml:/data/cfg/homeserver.yaml:Z
  element-web:
    # Pin to a SHA so that upstream cannot break our tests. Renovate handles regular updates.
-    image: ghcr.io/element-hq/element-web:develop@sha256:3993d53bc2c784c0376b86e00230aef0ee2c9a705b2166e9229555117e8db167
+    image: ghcr.io/element-hq/element-web:develop@sha256:6ed62b2963ae098a1f79521eb516834dcf29452168e281cc359d9cfb4380adf6
  element-web-1:
    # Pin to a SHA so that upstream cannot break our tests. Renovate handles regular updates.
-    image: ghcr.io/element-hq/element-web:develop@sha256:3993d53bc2c784c0376b86e00230aef0ee2c9a705b2166e9229555117e8db167
+    image: ghcr.io/element-hq/element-web:develop@sha256:6ed62b2963ae098a1f79521eb516834dcf29452168e281cc359d9cfb4380adf6
@@ -273,6 +273,7 @@
    "mute_for_me": "Mute for me",
    "muted_for_me": "Muted for me",
    "screen_share_volume": "Screen share volume",
+    "unknown_participant": "Unknown participant",
    "volume": "Volume",
    "waiting_for_media": "Waiting for media..."
  }
@@ -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",
@@ -109,15 +109,10 @@ export const widgetTest = test.extend<MyFixtures>({
      await TestHelpers.dismissInviteUnknownUserModal(ewPage1);

      // Accept the invite
-      await TestHelpers.closeReleaseAnnouncement(
-        ewPage2,
-        "Introducing Sections",
-      );
-      await TestHelpers.expandAllSections(ewPage2);
      await expect(
-        TestHelpers.roomListItem(ewPage2, "Welcome Room"),
+        ewPage2.getByRole("option", { name: "Welcome Room" }),
      ).toBeVisible();
-      await TestHelpers.roomListItem(ewPage2, "Welcome Room").click();
+      await ewPage2.getByRole("option", { name: "Welcome Room" }).click();
      await ewPage2.getByRole("button", { name: "Accept" }).click();
      await expect(
        ewPage2
@@ -157,12 +152,8 @@ export const widgetTest = test.extend<MyFixtures>({
      ).toBeVisible();

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

@@ -11,7 +11,6 @@ import {
  type JSHandle,
  type Page,
  type FrameLocator,
-  type Locator,
 } from "@playwright/test";
 import { type MatrixClient } from "matrix-js-sdk";

@@ -204,16 +203,6 @@ export class TestHelpers {
    }
  }

-  public static async expandAllSections(page: Page): Promise<void> {
-    try {
-      await page
-        .getByRole("button", { name: "Expand all sections" })
-        .click({ timeout: 2000 });
-    } catch {
-      // Already expanded or button not present
-    }
-  }
-
  public static async createRoom(
    name: string,
    page: Page,
@@ -264,9 +253,9 @@ export class TestHelpers {
    roomName: string,
    page: Page,
  ): Promise<void> {
-    await TestHelpers.closeReleaseAnnouncement(page, "Introducing Sections");
-    await TestHelpers.expandAllSections(page);
-    await TestHelpers.roomListItem(page, roomName).click({ timeout: 10000 });
+    await page.getByRole("option", { name: roomName }).click({
+      timeout: 10000,
+    });
    await page.getByRole("button", { name: "Accept" }).click({
      timeout: 5000,
    });
@@ -361,17 +350,6 @@ export class TestHelpers {
      .click();
  }

-  /**
-   * Locates a room in the room list by its name.
-   *
-   * Matches on the aria-label prefix because the item's role differs between
-   * the flat room list (`option`) and the sectioned room list (`button`), and
-   * the label may carry a suffix such as " invitation.".
-   */
-  public static roomListItem(page: Page, roomName: string): Locator {
-    return page.locator(`[aria-label^="Open room ${roomName}"]`);
-  }
-
  /**
   * Switches to a room in the room list by its name.
   * @param page - The EW page
@@ -381,8 +359,7 @@ export class TestHelpers {
    page: Page,
    roomName: string,
  ): Promise<void> {
-    await TestHelpers.expandAllSections(page);
-    await TestHelpers.roomListItem(page, roomName).click();
+    await page.getByRole("option", { name: `Open room ${roomName}` }).click();
  }

  public static async dismissInviteUnknownUserModal(page: Page): Promise<void> {
@@ -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.0.1(@fontsource/inconsolata@5.3.0)(@fontsource/inter@5.3.0)(@types/react-dom@19.2.5(@types/react@19.2.18))(@types/react@19.2.18)(@vector-im/compound-design-tokens@11.0.0(@types/react@19.2.18)(react@19.2.8))(react-dom@19.2.8(react@19.2.8))(react@19.2.8)
+        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))
@@ -3229,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': '*'
@@ -8695,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.0.1(@fontsource/inconsolata@5.3.0)(@fontsource/inter@5.3.0)(@types/react-dom@19.2.5(@types/react@19.2.18))(@types/react@19.2.18)(@vector-im/compound-design-tokens@11.0.0(@types/react@19.2.18)(react@19.2.8))(react-dom@19.2.8(react@19.2.8))(react@19.2.8)':
+  '@vector-im/compound-web@10.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)
@@ -8712,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)
@@ -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"
@@ -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 {
@@ -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

@@ -10,7 +10,6 @@ import * as ComponentsCore from "@livekit/components-core";

 import { ObservableScope } from "./ObservableScope";
 import { AudioOutput } from "./MediaDevices";
-import { audioOutput as audioOutputSetting } from "../settings/settings";
 import { withTestScheduler } from "../utils/test";

 const BT_SPEAKER = {
@@ -94,8 +93,6 @@ describe("AudioOutput Tests", () => {

  beforeEach(() => {
    testScope = new ObservableScope();
-    // Device preferences persist in localStorage across tests
-    audioOutputSetting.setValue(undefined);
  });

  afterEach(() => {
@@ -153,9 +150,7 @@ describe("AudioOutput Tests", () => {

      expectObservable(audioOutput.selected$).toBe("abcde", {
        a: undefined,
-        // No "default" pseudo-device (Firefox): the virtual browser default is
-        // selected until the user picks something.
-        b: { id: "", virtualEarpiece: false },
+        b: { id: LAPTOP_SPEAKER.deviceId, virtualEarpiece: false },
        c: { id: MONITOR_SPEAKER.deviceId, virtualEarpiece: false },
        d: { id: LAPTOP_SPEAKER.deviceId, virtualEarpiece: false },
        e: { id: MONITOR_SPEAKER.deviceId, virtualEarpiece: false },
@@ -163,61 +158,6 @@ describe("AudioOutput Tests", () => {
    });
  });

-  it("falls back to the browser default when the selected device disappears", () => {
-    withTestScheduler(({ behavior, cold, schedule, expectObservable }) => {
-      vi.mocked(ComponentsCore.createMediaDeviceObserver).mockReturnValue(
-        cold("a---b", {
-          a: DEVICE_LIST_B,
-          // The monitor is unplugged (or a Bluetooth sink changes profile)
-          b: [LAPTOP_SPEAKER],
-        }),
-      );
-
-      const audioOutput = new AudioOutput(
-        behavior("a", { a: true }),
-        testScope,
-      );
-
-      schedule("--a", {
-        a: () => audioOutput.select(MONITOR_SPEAKER.deviceId),
-      });
-
-      expectObservable(audioOutput.selected$).toBe("a-b-c", {
-        a: { id: "", virtualEarpiece: false },
-        b: { id: MONITOR_SPEAKER.deviceId, virtualEarpiece: false },
-        // Rather than pinning some other physical device, let the browser route
-        c: { id: "", virtualEarpiece: false },
-      });
-    });
-  });
-
-  it("lists the virtual browser default first when there is no default pseudo-device", () => {
-    withTestScheduler(({ behavior, cold, expectObservable }) => {
-      vi.mocked(ComponentsCore.createMediaDeviceObserver).mockReturnValue(
-        cold("a", { a: DEVICE_LIST_B }),
-      );
-
-      const audioOutput = new AudioOutput(
-        behavior("a", { a: true }),
-        testScope,
-      );
-
-      expectObservable(audioOutput.available$).toBe("a", {
-        a: new Map([
-          ["", { type: "default", name: null }],
-          [
-            LAPTOP_SPEAKER.deviceId,
-            { type: "name", name: LAPTOP_SPEAKER.label },
-          ],
-          [
-            MONITOR_SPEAKER.deviceId,
-            { type: "name", name: MONITOR_SPEAKER.label },
-          ],
-        ]),
-      });
-    });
-  });
-
  it("Test mappings", () => {
    // In a real life setup there would be first a blanked list
    // then the real one.
@@ -52,8 +52,10 @@ import {
  aliceRtcMember,
  aliceUserId,
  bob,
+  bobDeviceId,
  bobId,
  bobRtcMember,
+  bobUserId,
  local,
  localId,
  localRtcMember,
@@ -118,6 +120,19 @@ const daveId = `${dave.userId}:${daveRtcMember.deviceId}`;
 const bobParticipant = mockRemoteParticipant({ identity: bobId });
 const daveParticipant = mockRemoteParticipant({ identity: daveId });

+// A LiveKit participant that no MatrixRTC membership accounts for
+const rogueParticipant = mockRemoteParticipant({ identity: "rogue" });
+const rogueId = `unknown:${exampleTransport.livekit_service_url}:rogue`;
+
+const otherTransport: LivekitTransport = {
+  type: "livekit",
+  livekit_service_url: "https://lk.other.example.org",
+  livekit_alias: "!alias:other.example.org",
+};
+const bobOnOtherFocusRtcMember = mockRtcMembership(bobUserId, bobDeviceId, {
+  fociPreferred: [otherTransport],
+});
+
 export interface GridLayoutSummary {
  type: "grid";
  spotlight?: string[];
@@ -450,6 +465,113 @@ describe.each(modes)("CallViewModel (%s mode)", (mode) => {
    });
  });

+  test("LiveKit participants without a membership get an unknown participant tile", () => {
+    withTestScheduler(({ behavior, expectObservable }) => {
+      // A participant nobody's membership accounts for connects on frame 1 and
+      // disconnects on frame 2
+      const participantInputMarbles = "aba";
+      // It gets a tile at the end of the grid for as long as it is connected
+      const expectedLayoutMarbles = "  aba";
+
+      withCallViewModel(
+        {
+          remoteParticipants$: behavior(participantInputMarbles, {
+            a: [aliceParticipant, bobParticipant],
+            b: [aliceParticipant, bobParticipant, rogueParticipant],
+          }),
+          rtcMembers$: constant([localRtcMember, aliceRtcMember, bobRtcMember]),
+        },
+        (vm) => {
+          expectObservable(summarizeLayout$(vm.layout$)).toBe(
+            expectedLayoutMarbles,
+            {
+              a: {
+                type: "grid",
+                spotlight: undefined,
+                grid: [`${localId}:0`, `${aliceId}:0`, `${bobId}:0`],
+              },
+              b: {
+                type: "grid",
+                spotlight: undefined,
+                grid: [`${localId}:0`, `${aliceId}:0`, `${bobId}:0`, rogueId],
+              },
+            },
+          );
+        },
+      );
+    });
+  });
+
+  test("an unknown participant takes the call out of one-on-one layout", () => {
+    withTestScheduler(({ behavior, expectObservable }) => {
+      // A participant nobody's membership accounts for connects on frame 1 and
+      // disconnects on frame 2
+      const participantInputMarbles = "aba";
+      // The one-on-one layout would hide the unknown participant, so we must
+      // fall back to the grid while they are present
+      const expectedLayoutMarbles = "  aba";
+
+      withCallViewModel(
+        {
+          remoteParticipants$: behavior(participantInputMarbles, {
+            a: [aliceParticipant],
+            b: [aliceParticipant, rogueParticipant],
+          }),
+          rtcMembers$: constant([localRtcMember, aliceRtcMember]),
+        },
+        (vm) => {
+          expectObservable(summarizeLayout$(vm.layout$)).toBe(
+            expectedLayoutMarbles,
+            {
+              a: {
+                type: "one-on-one-desktop",
+                pip: `${localId}:0`,
+                spotlight: `${aliceId}:0`,
+              },
+              b: {
+                type: "grid",
+                spotlight: undefined,
+                grid: [`${localId}:0`, `${aliceId}:0`, rogueId],
+              },
+            },
+          );
+        },
+      );
+    });
+  });
+
+  test("a member seen on a focus other than their own is not an unknown participant", () => {
+    withTestScheduler(({ expectObservable }) => {
+      // Bob publishes to another focus, but also connects to ours to subscribe
+      // (the mock reports the same participants on every connection). Matching
+      // by identity rather than per transport keeps him from being flagged.
+      const expectedLayoutMarbles = "a";
+
+      withCallViewModel(
+        {
+          remoteParticipants$: constant([aliceParticipant, bobParticipant]),
+          rtcMembers$: constant([
+            localRtcMember,
+            aliceRtcMember,
+            bobOnOtherFocusRtcMember,
+          ]),
+        },
+        (vm) => {
+          expectObservable(summarizeLayout$(vm.layout$)).toBe(
+            expectedLayoutMarbles,
+            {
+              a: {
+                type: "grid",
+                spotlight: undefined,
+                grid: [`${localId}:0`, `${aliceId}:0`, `${bobId}:0`],
+              },
+            },
+          );
+        },
+      );
+    });
+  });
+
  test("one-on-one mobile layout shows local tile when video is enabled", () => {
    withTestScheduler(({ behavior, schedule, expectObservable }) => {
      // Local participant enables their video, then disables it
@@ -1211,15 +1333,18 @@ describe.each(modes)("CallViewModel (%s mode)", (mode) => {
    });
  });

-  test("participants must have a MatrixRTCSession to be visible", () => {
+  test("participants without a MatrixRTC membership are shown as unknown, without media", () => {
    withTestScheduler(({ behavior, expectObservable }) => {
      // iterate through a number of combinations of participants and MatrixRTC memberships
      // Bob never has an MatrixRTC membership
      const participantInputMarbles = "abcd-c";
      // Bob even tries to share his screen at the end
      const bobSharingInputMarbles = " n---yn";
-      // Bob should never be visible
-      const expectedLayoutMarbles = "  a-bc-b";
+      // Bob gets an unknown participant tile (MSC4143) rather than a tile of
+      // his own, and his screen share never shows up. His presence also keeps
+      // the call out of the one-on-one layout, which would hide him.
+      const expectedLayoutMarbles = "  abcd-c";
+      const bobUnknownId = `unknown:${exampleTransport.livekit_service_url}:${bobId}`;

      withCallViewModel(
        {
@@ -1251,14 +1376,25 @@ describe.each(modes)("CallViewModel (%s mode)", (mode) => {
                grid: [`${localId}:0`],
              },
              b: {
-                type: "one-on-one-desktop",
-                pip: `${localId}:0`,
-                spotlight: `${aliceId}:0`,
+                type: "grid",
+                spotlight: undefined,
+                grid: [`${localId}:0`, bobUnknownId],
              },
+              // Tiles keep their positions, so Bob stays ahead of the others
              c: {
                type: "grid",
                spotlight: undefined,
-                grid: [`${localId}:0`, `${aliceId}:0`, `${daveId}:0`],
+                grid: [`${localId}:0`, bobUnknownId, `${aliceId}:0`],
+              },
+              d: {
+                type: "grid",
+                spotlight: undefined,
+                grid: [
+                  `${localId}:0`,
+                  bobUnknownId,
+                  `${aliceId}:0`,
+                  `${daveId}:0`,
+                ],
              },
            },
          );
@@ -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 {
@@ -95,6 +95,7 @@ import {
  layoutShallowEquals,
  type Alignment,
  type GridLayoutMedia,
+  type GridMediaViewModel,
  type Layout,
  type LayoutMedia,
  type OneOnOneDesktopLayoutMedia,
@@ -112,7 +113,7 @@ import {
  TransportState,
 } from "./localMember/LocalMember.ts";
 import {
-  getLocalTransport,
+  createLocalTransport$,
  type LocalTransport,
 } from "./localMember/LocalTransport.ts";
 import {
@@ -162,6 +163,10 @@ import {
  createRingingMedia,
  type RingingMediaViewModel,
 } from "../media/RingingMediaViewModel.ts";
+import {
+  createUnknownParticipantMedia,
+  type UnknownParticipantMediaViewModel,
+} from "../media/UnknownParticipantMediaViewModel.ts";
 import { type GridTileViewModel } from "../TileViewModel.ts";

 //TODO
@@ -563,26 +568,20 @@ export function createCallViewModel$(
  const ownMembershipIdentity: CallMembershipIdentityParts = {
    userId,
    deviceId,
-    // Consumed by the sticky membership manager as `member.id`, *and* stamped
-    // into every to-device key event by the key transport. A pre-sticky
-    // membership advertises `${userId}:${deviceId}` as its `membershipID`
-    // instead, so a uuid there names a member no peer can resolve.
-    memberId:
-      matrixRTCMode === MatrixRTCMode.Matrix_2_0
-        ? uuidv4()
-        : `${userId}:${deviceId}`,
+    // This will only be consumed by the sticky membership manager. So it has no impact on legacy calls.
+    memberId: uuidv4(),
  };

-  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 +598,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 +664,7 @@ export function createCallViewModel$(
    connectionManager,
    client,
    matrixRTCSession,
-    localTransport$,
+    localTransport,
    roomId: matrixRoom.roomId,
    hideScreensharing,
    hostBridge,
@@ -865,6 +874,61 @@ export function createCallViewModel$(
    ),
  );

+  /**
+   * Media for LiveKit participants that cannot be mapped to any MatrixRTC
+   * membership. MSC4143 asks us to surface these rather than ignore them, as
+   * they can signal an eavesdropping or impersonation attack.
+   *
+   * Participants are matched to memberships by identity alone rather than per
+   * transport, since a member legitimately shows up as a subscribe-only
+   * participant on every focus other than the one they publish to.
+   */
+  const unknownParticipantMedia$ = scope.behavior<
+    UnknownParticipantMediaViewModel[]
+  >(
+    combineLatest([
+      memberships$,
+      connectionManager.connectionManagerData$,
+    ]).pipe(
+      // Memberships and connections derive from the same epoch of session
+      // state; comparing them across epochs would flag members whose
+      // connection hasn't caught up yet.
+      filter(([memberships, data]) => memberships.epoch === data.epoch),
+      map(([memberships, data]) => {
+        const knownIdentities = new Set(
+          memberships.value.map((m) => m.rtcBackendIdentity),
+        );
+        return data.value.getConnections().flatMap((connection) =>
+          data.value
+            .getParticipantsForTransport(connection.transport)
+            .filter((p) => !knownIdentities.has(p.identity))
+            .map((p) => ({
+              focusUrl: connection.transport.livekit_service_url,
+              identity: p.identity,
+            })),
+        );
+      }),
+      generateItems(
+        "CallViewModel unknownParticipantMedia$",
+        function* (unknownParticipants) {
+          for (const { focusUrl, identity } of unknownParticipants)
+            yield { keys: [focusUrl, identity], data: undefined };
+        },
+        (_scope, _data$, focusUrl, identity) => {
+          logger.warn(
+            `LiveKit participant ${identity} on ${focusUrl} matches no MatrixRTC membership`,
+          );
+          return createUnknownParticipantMedia({
+            id: `unknown:${focusUrl}:${identity}`,
+            rtcBackendIdentity: identity,
+            focusUrl,
+          });
+        },
+      ),
+    ),
+    [],
+  );
+
  const ringingMedia$ = scope.behavior<RingingMediaViewModel | null>(
    ringAttempts$.pipe(
      switchMap(({ intent, recipient, outcome$ }) =>
@@ -1011,21 +1075,29 @@ export function createCallViewModel$(
    ),
  );

-  const grid$ = scope.behavior<UserMediaViewModel[]>(
-    userMedia$.pipe(
-      switchMap((mediaItems) => {
-        const bins = mediaItems.map((m) =>
-          m.bin$.pipe(map((bin) => [m, bin] as const)),
-        );
-        // Sort the media by bin order and generate a tile for each one
-        return bins.length === 0
-          ? of([])
-          : combineLatest(bins, (...bins) =>
-              bins.sort(([, bin1], [, bin2]) => bin1 - bin2).map(([m]) => m),
-            );
-      }),
-      distinctUntilChanged(shallowArrayEquals),
-    ),
+  const sortedUserMedia$: Observable<UserMediaViewModel[]> = userMedia$.pipe(
+    switchMap((mediaItems) => {
+      const bins = mediaItems.map((m) =>
+        m.bin$.pipe(map((bin) => [m, bin] as const)),
+      );
+      // Sort the media by bin order and generate a tile for each one
+      return bins.length === 0
+        ? of([])
+        : combineLatest(bins, (...bins) =>
+            bins.sort(([, bin1], [, bin2]) => bin1 - bin2).map(([m]) => m),
+          );
+    }),
+  );
+
+  const grid$ = scope.behavior<GridMediaViewModel[]>(
+    combineLatest(
+      [sortedUserMedia$, unknownParticipantMedia$],
+      // Unknown participants have no media to sort by, so they go last
+      (userMedia, unknownParticipants) => [
+        ...userMedia,
+        ...unknownParticipants,
+      ],
+    ).pipe(distinctUntilChanged(shallowArrayEquals)),
  );

  /**
@@ -1185,10 +1257,15 @@ export function createCallViewModel$(
    local: LocalUserMediaViewModel;
    remote: UserMediaViewModel | RingingMediaViewModel;
  } | null> = scope.behavior(
-    combineLatest([userMedia$, screenShares$]).pipe(
-      switchMap(([userMedia, screenShares]) => {
-        // One-on-one layout only supports 2 user media, no screen shares
-        if (userMedia.length <= 2 && screenShares.length === 0) {
+    combineLatest([userMedia$, screenShares$, unknownParticipantMedia$]).pipe(
+      switchMap(([userMedia, screenShares, unknownParticipants]) => {
+        // One-on-one layout only supports 2 user media, no screen shares, and
+        // must never hide an unknown participant
+        if (
+          userMedia.length <= 2 &&
+          screenShares.length === 0 &&
+          unknownParticipants.length === 0
+        ) {
          const local = userMedia.find(
            (vm): vm is WrappedUserMediaViewModel & LocalUserMediaViewModel =>
              vm.type === "user" && vm.local,
@@ -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(
@@ -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,
@@ -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]) => {
@@ -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"),
+      );
    });
  });
 });
@@ -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,
@@ -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),
        }),
@@ -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,
@@ -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,
@@ -257,21 +257,14 @@ export class AudioOutput implements MediaDevice<
      map((availableRaw) => {
        let available: Map<string, AudioOutputDeviceLabel> =
          buildDeviceMap(availableRaw);
-        // Create a virtual default audio output for browsers that don't have one
-        // (Firefox, Safari). Its device ID must be the empty string because
-        // that's what setSinkId recognizes. It goes first so that it is the
-        // fallback when no output has been explicitly chosen (or the chosen
-        // one disappears), rather than pinning the first physical device
-        // with setSinkId: pinned sinks are not re-routed by the browser, and
-        // Firefox leaves the audio elements silent when a pinned sink goes
-        // away (e.g. a Bluetooth headset switching profile when its
-        // microphone is opened). We can't know which physical device the
-        // browser default resolves to, so the entry carries no name.
+        // Create a virtual default audio output for browsers that don't have one.
+        // Its device ID must be the empty string because that's what setSinkId
+        // recognizes.
        if (available.size && !available.has("") && !available.has("default"))
-          available = new Map<string, AudioOutputDeviceLabel>([
-            ["", { type: "default", name: null }],
-            ...available,
-          ]);
+          available.set("", {
+            type: "default",
+            name: availableRaw[0]?.label || null,
+          });
        // eslint-disable-next-line @typescript-eslint/no-explicit-any
        const isSafari = !!(window as any).GestureEvent; // non standard api only found on Safari. https://developer.mozilla.org/en-US/docs/Web/API/GestureEvent#browser_compatibility
        if (isSafari) {
@@ -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<
      {
@@ -8,12 +8,15 @@ Please see LICENSE in the repository root for full details.
 import { BehaviorSubject } from "rxjs";
 import { logger } from "matrix-js-sdk/lib/logger";

-import { GridTileViewModel, SpotlightTileViewModel } from "./TileViewModel";
+import {
+  type GridTileMediaViewModel,
+  GridTileViewModel,
+  SpotlightTileViewModel,
+} from "./TileViewModel";
 import { fillGaps } from "../utils/iter";
 import { debugTileLayout } from "../settings/settings";
 import { type MediaViewModel } from "./media/MediaViewModel";
 import { type UserMediaViewModel } from "./media/UserMediaViewModel";
-import { type RingingMediaViewModel } from "./media/RingingMediaViewModel";

 type SpotlightBackground = "solid" | "transparent";

@@ -68,10 +71,8 @@ class SpotlightTileData {
 }

 class GridTileData {
-  private readonly media$: BehaviorSubject<
-    UserMediaViewModel | RingingMediaViewModel
-  >;
-  public get media(): UserMediaViewModel | RingingMediaViewModel {
+  private readonly media$: BehaviorSubject<GridTileMediaViewModel>;
+  public get media(): GridTileMediaViewModel {
    return this.media$.value;
  }
  public set media(value: UserMediaViewModel) {
@@ -80,7 +81,7 @@ class GridTileData {

  public readonly vm: GridTileViewModel;

-  public constructor(media: UserMediaViewModel | RingingMediaViewModel) {
+  public constructor(media: GridTileMediaViewModel) {
    this.media$ = new BehaviorSubject(media);
    this.vm = new GridTileViewModel(this.media$);
  }
@@ -140,7 +141,7 @@ export class TileStoreBuilder {
      : null;

  private readonly prevGridByMedia: Map<
-    MediaViewModel,
+    GridTileMediaViewModel,
    [GridTileData, number]
  > = new Map(
    this.prevGrid.map((entry, i) => [entry.media, [entry, i]] as const),
@@ -205,9 +206,7 @@ export class TileStoreBuilder {
   * Sets up a grid tile for the given media. If this is never called for some
   * media, then that media will have no grid tile.
   */
-  public registerGridTile(
-    media: UserMediaViewModel | RingingMediaViewModel,
-  ): void {
+  public registerGridTile(media: GridTileMediaViewModel): void {
    if (DEBUG_ENABLED)
      logger.debug(
        `[TileStore, ${this.generation}] register grid tile: ${media.displayName$.value}`,
@@ -215,8 +214,10 @@ export class TileStoreBuilder {

    if (this.spotlight !== null) {
      // We actually *don't* want spotlight speakers to appear in both the
-      // spotlight and the grid, so they're filtered out here
+      // spotlight and the grid, so they're filtered out here. (Unknown
+      // participants never make it into the spotlight.)
      if (
+        media.type !== "unknown participant" &&
        !(media.type === "user" && media.local) &&
        this.spotlight.media.includes(media)
      )
@@ -10,8 +10,14 @@ import { BehaviorSubject } from "rxjs";
 import { type Behavior } from "./Behavior";
 import { type MediaViewModel } from "./media/MediaViewModel";
 import { type RingingMediaViewModel } from "./media/RingingMediaViewModel";
+import { type UnknownParticipantMediaViewModel } from "./media/UnknownParticipantMediaViewModel";
 import { type UserMediaViewModel } from "./media/UserMediaViewModel";

+export type GridTileMediaViewModel =
+  | UserMediaViewModel
+  | RingingMediaViewModel
+  | UnknownParticipantMediaViewModel;
+
 let nextId = 0;
 function createId(): string {
  return (nextId++).toString();
@@ -23,9 +29,7 @@ export class GridTileViewModel {
  public readonly showOutline$: Behavior<boolean> = this._showOutline$;

  public constructor(
-    public readonly media$: Behavior<
-      UserMediaViewModel | RingingMediaViewModel
-    >,
+    public readonly media$: Behavior<GridTileMediaViewModel>,
  ) {}

  public setShowOutline(value: boolean): void {
@@ -10,6 +10,7 @@ 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";
+import { type UnknownParticipantMediaViewModel } from "./media/UnknownParticipantMediaViewModel.ts";
 import { type UserMediaViewModel } from "./media/UserMediaViewModel.ts";
 import {
  type GridTileViewModel,
@@ -18,25 +19,29 @@ import {
 import { type Behavior } from "./Behavior.ts";
 import { shallowEquals as arrayShallowEquals } from "../utils/array.ts";

+export type GridMediaViewModel =
+  | UserMediaViewModel
+  | UnknownParticipantMediaViewModel;
+
 export interface GridLayoutMedia {
  type: "grid";
  edgeToEdge: false;
  spotlight?: MediaViewModel[];
-  grid: UserMediaViewModel[];
+  grid: GridMediaViewModel[];
 }

 export interface SpotlightLandscapeLayoutMedia {
  type: "spotlight-landscape";
  edgeToEdge: boolean;
  spotlight: MediaViewModel[];
-  grid: UserMediaViewModel[];
+  grid: GridMediaViewModel[];
 }

 export interface SpotlightPortraitLayoutMedia {
  type: "spotlight-portrait";
  edgeToEdge: false;
  spotlight: MediaViewModel[];
-  grid: UserMediaViewModel[];
+  grid: GridMediaViewModel[];
 }

 export interface SpotlightExpandedLayoutMedia {
@@ -0,0 +1,57 @@
+/*
+Copyright 2026 Element Creations Ltd.
+
+SPDX-License-Identifier: AGPL-3.0-only OR LicenseRef-Element-Commercial
+Please see LICENSE in the repository root for full details.
+*/
+
+import { constant } from "../Behavior";
+import { type BaseMediaViewModel } from "./MediaViewModel";
+
+/**
+ * Media representing a LiveKit participant that cannot be mapped to any
+ * MatrixRTC member of the session.
+ *
+ * MSC4143 asks clients to surface such streams rather than silently ignore
+ * them, because they can signal an eavesdropping or impersonation attack. We
+ * therefore give them a tile, but never render their audio or video.
+ *
+ * There is no Matrix user behind this media, so `userId` and `displayName$`
+ * carry the LiveKit identity instead, purely so that debugging output stays
+ * meaningful.
+ */
+export interface UnknownParticipantMediaViewModel extends BaseMediaViewModel {
+  type: "unknown participant";
+  /**
+   * The LiveKit identity under which the participant connected. Exposed for
+   * debugging.
+   */
+  rtcBackendIdentity: string;
+  /**
+   * The URL of the LiveKit focus on which the participant was seen. Exposed for
+   * debugging.
+   */
+  focusUrl: string;
+}
+
+export interface UnknownParticipantMediaInputs {
+  id: string;
+  rtcBackendIdentity: string;
+  focusUrl: string;
+}
+
+export function createUnknownParticipantMedia({
+  id,
+  rtcBackendIdentity,
+  focusUrl,
+}: UnknownParticipantMediaInputs): UnknownParticipantMediaViewModel {
+  return {
+    type: "unknown participant",
+    id,
+    userId: rtcBackendIdentity,
+    displayName$: constant(rtcBackendIdentity),
+    mxcAvatarUrl$: constant(undefined),
+    rtcBackendIdentity,
+    focusUrl,
+  };
+}
@@ -0,0 +1,98 @@
+/*
+Copyright 2026 Element Creations Ltd.
+
+SPDX-License-Identifier: AGPL-3.0-only OR LicenseRef-Element-Commercial
+Please see LICENSE in the repository root for full details.
+*/
+
+import { expect, within } from "storybook/test";
+import { type JSX, useMemo } from "react";
+
+import type { Meta, StoryObj } from "@storybook/react-vite";
+import { GridTile } from "./GridTile";
+import { GridTileViewModel } from "../state/TileViewModel";
+import { constant } from "../state/Behavior";
+import { createUnknownParticipantMedia } from "../state/media/UnknownParticipantMediaViewModel";
+
+interface UnknownParticipantTileStoryProps {
+  width: number;
+  height: number;
+  rtcBackendIdentity: string;
+  showNameTags: boolean;
+  showOutline: boolean;
+}
+
+/**
+ * Renders a GridTile for a LiveKit participant that maps to no MatrixRTC
+ * member, driven by primitive props so that Storybook can document them.
+ */
+function UnknownParticipantTile({
+  width,
+  height,
+  rtcBackendIdentity,
+  ...props
+}: UnknownParticipantTileStoryProps): JSX.Element {
+  const vm = useMemo(
+    () =>
+      new GridTileViewModel(
+        constant(
+          createUnknownParticipantMedia({
+            id: `unknown:https://rtc.example.org:${rtcBackendIdentity}`,
+            rtcBackendIdentity,
+            focusUrl: "https://rtc.example.org",
+          }),
+        ),
+      ),
+    [rtcBackendIdentity],
+  );
+  return (
+    <GridTile
+      vm={vm}
+      onOpenProfile={null}
+      targetWidth={width}
+      targetHeight={height}
+      style={{ width, height }}
+      showSpeakingIndicators={false}
+      showRingingStatus={false}
+      focusable
+      {...props}
+    />
+  );
+}
+
+const meta = {
+  component: UnknownParticipantTile,
+  argTypes: {
+    width: { control: { type: "range", min: 80, max: 800, step: 10 } },
+    height: { control: { type: "range", min: 80, max: 600, step: 10 } },
+  },
+} satisfies Meta<typeof UnknownParticipantTile>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+export const UnknownParticipant: Story = {
+  args: {
+    width: 400,
+    height: 300,
+    rtcBackendIdentity: "@rogue:example.org:DEVICE",
+    showNameTags: true,
+    showOutline: false,
+  },
+  play: async ({ canvasElement }) => {
+    const canvas = within(canvasElement);
+    await expect(canvas.getByText("Unknown participant")).toBeInTheDocument();
+    await expect(
+      canvas.queryByText("@rogue:example.org:DEVICE"),
+    ).not.toBeInTheDocument();
+  },
+};
+
+/** Narrow tiles hide the name tag, so the label goes with it. */
+export const UnknownParticipantNarrow: Story = {
+  args: {
+    ...UnknownParticipant.args,
+    width: 90,
+    height: 90,
+  },
+};
@@ -32,6 +32,7 @@ import {
  createRingingMedia,
  type RingingMediaViewModel,
 } from "../state/media/RingingMediaViewModel";
+import { createUnknownParticipantMedia } from "../state/media/UnknownParticipantMediaViewModel";

 global.IntersectionObserver = class MockIntersectionObserver {
  public observe(): void {}
@@ -165,3 +166,33 @@ test("GridTile displays ringing media", async () => {
  act(() => pickupState$.next("decline"));
  screen.getByText("Call ended");
 });
+
+test("GridTile displays an unknown participant", async () => {
+  const vm = createUnknownParticipantMedia({
+    id: "unknown:https://rtc-example.org:rogue",
+    rtcBackendIdentity: "rogue",
+    focusUrl: "https://rtc-example.org",
+  });
+
+  const { container } = render(
+    <ReactionsSenderProvider vm={callVm} rtcSession={fakeRtcSession}>
+      <GridTile
+        vm={new GridTileViewModel(constant(vm))}
+        onOpenProfile={() => {}}
+        targetWidth={300}
+        targetHeight={200}
+        showSpeakingIndicators
+        showNameTags
+        showRingingStatus
+        showOutline
+        focusable
+      />
+    </ReactionsSenderProvider>,
+  );
+  expect(await axe(container)).toHaveNoViolations();
+  // The tile is labelled as unknown rather than after its LiveKit identity
+  screen.getByText("Unknown participant");
+  expect(screen.queryByText("rogue")).toBeNull();
+  // There is no user to show an avatar for
+  expect(container.querySelector("[data-style]")).toBeNull();
+});
@@ -51,6 +51,7 @@ import { type LocalUserMediaViewModel } from "../state/media/LocalUserMediaViewM
 import { type RemoteUserMediaViewModel } from "../state/media/RemoteUserMediaViewModel";
 import { type UserMediaViewModel } from "../state/media/UserMediaViewModel";
 import { type RingingMediaViewModel } from "../state/media/RingingMediaViewModel";
+import { type UnknownParticipantMediaViewModel } from "../state/media/UnknownParticipantMediaViewModel";
 import { RingingStatus } from "./RingingStatus";

 interface TileProps {
@@ -97,6 +98,44 @@ const RingingMediaTile: FC<RingingMediaTileProps> = ({
  );
 };

+interface UnknownParticipantTileProps extends Omit<
+  TileProps,
+  "displayName" | "mxcAvatarUrl"
+> {
+  vm: UnknownParticipantMediaViewModel;
+}
+
+/**
+ * A blank tile standing in for a LiveKit participant that cannot be mapped to
+ * any MatrixRTC member. MSC4143 asks clients to surface such streams rather
+ * than ignore them. No media is rendered for them.
+ */
+const UnknownParticipantTile: FC<UnknownParticipantTileProps> = ({
+  vm,
+  className,
+  ...props
+}) => {
+  const { t } = useTranslation();
+  return (
+    <MediaView
+      className={classNames(className, styles.tile)}
+      video={undefined}
+      userId={vm.userId}
+      unencryptedWarning={false}
+      videoEnabled={false}
+      mirror={false}
+      showAvatar={false}
+      displayName={t("video_tile.unknown_participant")}
+      mxcAvatarUrl={undefined}
+      rtcBackendIdentity={vm.rtcBackendIdentity}
+      focusUrl={vm.focusUrl}
+      {...props}
+    />
+  );
+};
+
+UnknownParticipantTile.displayName = "UnknownParticipantTile";
+
 interface UserMediaTileProps extends TileProps {
  vm: UserMediaViewModel;
  showSpeakingIndicators: boolean;
@@ -454,6 +493,15 @@ export const GridTile: FC<GridTileProps> = ({
        {...props}
      />
    );
+  } else if (media.type === "unknown participant") {
+    return (
+      <UnknownParticipantTile
+        ref={ref}
+        vm={media}
+        className={classNames(className, { [styles.outline]: showOutline })}
+        {...props}
+      />
+    );
  } else if (media.local) {
    return (
      <LocalUserMediaTile
@@ -56,6 +56,11 @@ interface Props extends ComponentProps<typeof animated.div> {
  displayName: string;
  mxcAvatarUrl: string | undefined;
  avatarStyle?: "solid" | "translucent";
+  /**
+   * Whether to show an avatar when there is no video. Off for media that has no
+   * Matrix user behind it.
+   */
+  showAvatar?: boolean;
  background?: "solid" | "transparent";
  focusable: boolean;
  primaryButton?: ReactNode;
@@ -95,6 +100,7 @@ export const MediaView: FC<Props> = ({
  displayName,
  mxcAvatarUrl,
  avatarStyle = "solid",
+  showAvatar = true,
  background = "solid",
  focusable,
  primaryButton,
@@ -176,15 +182,17 @@ export const MediaView: FC<Props> = ({
            <div className={styles.speakingBorder} />
          </div>
        )}
-        <Avatar
-          id={userId}
-          name={displayName}
-          size={avatarSize}
-          src={mxcAvatarUrl}
-          data-style={avatarStyle}
-          className={styles.avatar}
-          style={{ display: video && videoEnabled ? "none" : "initial" }}
-        />
+        {showAvatar && (
+          <Avatar
+            id={userId}
+            name={displayName}
+            size={avatarSize}
+            src={mxcAvatarUrl}
+            data-style={avatarStyle}
+            className={styles.avatar}
+            style={{ display: video && videoEnabled ? "none" : "initial" }}
+          />
+        )}
        {video?.publication !== undefined && (
          <VideoTrack
            trackRef={video}
@@ -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-";
@@ -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
@@ -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
@@ -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
@@ -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 = "./";

@@ -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";