Merge pull request #4072 from element-hq/johannes/jest

Switch to jest-style assertions to please oxlint

.eslintrc.cjs

@@ -1,120 +0,0 @@
-const COPYRIGHT_HEADER = `/*
-Copyright %%CURRENT_YEAR%% New Vector Ltd.
-
-SPDX-License-Identifier: AGPL-3.0-only OR LicenseRef-Element-Commercial
-Please see LICENSE in the repository root for full details.
-*/
-
-`;
-
-module.exports = {
-  plugins: ["matrix-org", "rxjs", "jsdoc", "element-call"],
-  extends: [
-    "plugin:matrix-org/react",
-    "plugin:matrix-org/a11y",
-    "plugin:matrix-org/typescript",
-    "prettier",
-    "plugin:rxjs/recommended",
-    "plugin:storybook/recommended",
-  ],
-  parserOptions: {
-    ecmaVersion: "latest",
-    sourceType: "module",
-    project: ["./tsconfig.json"],
-  },
-  env: {
-    browser: true,
-    node: true,
-  },
-  rules: {
-    "element-call/no-observablescope-leak": "error",
-    "jsdoc/no-types": "error",
-    "jsdoc/empty-tags": "error",
-    "jsdoc/check-property-names": "error",
-    "jsdoc/check-values": "error",
-    "jsdoc/check-param-names": "warn",
-    // "jsdoc/require-param": "warn",
-    "jsdoc/require-param-description": "warn",
-    "matrix-org/require-copyright-header": ["error", COPYRIGHT_HEADER],
-    "jsx-a11y/media-has-caption": "off",
-    "react/display-name": "error",
-    // Encourage proper usage of Promises:
-    "@typescript-eslint/no-floating-promises": "error",
-    "@typescript-eslint/no-misused-promises": "error",
-    "@typescript-eslint/promise-function-async": "error",
-    "@typescript-eslint/require-await": "error",
-    "@typescript-eslint/await-thenable": "error",
-    // To help ensure that we get proper vite/rollup lazy loading (e.g. for matrix-js-sdk):
-    "@typescript-eslint/consistent-type-imports": [
-      "error",
-      { fixStyle: "inline-type-imports" },
-    ],
-    // To encourage good usage of RxJS:
-    "rxjs/no-exposed-subjects": "error",
-    "rxjs/finnish": ["error", { names: { "^this$": false } }],
-    "no-restricted-imports": [
-      "error",
-      {
-        paths: ["matrix-widget-api", "matrix-js-sdk"].flatMap((lib) =>
-          ["src", "src/", "src/index", "lib", "lib/", "lib/index"]
-            .map((path) => `${lib}/${path}`)
-            .map((name) => ({ name, message: `Please use ${lib} instead` })),
-        ),
-        patterns: [
-          ...["matrix-widget-api"].map((lib) => ({
-            group: ["src", "src/", "src/**", "lib", "lib/", "lib/**"].map(
-              (path) => `${lib}/${path}`,
-            ),
-            message: `Please use ${lib} instead`,
-          })),
-          // XXX: We use /lib in lots of places, so allow for now.
-          ...["matrix-js-sdk"].map((lib) => ({
-            group: ["src", "src/", "src/**"].map((path) => `${lib}/${path}`),
-            message: `Please use ${lib} instead`,
-          })),
-        ],
-      },
-    ],
-  },
-  overrides: [
-    {
-      files: ["src/*/**"],
-      rules: {
-        // In application code we should use the js-sdk logger, never console directly.
-        "no-console": ["error"],
-      },
-    },
-    {
-      files: [
-        "**/*.test.ts",
-        "**/*.test.tsx",
-        "**/test.ts",
-        "**/test.tsx",
-        "**/test-**",
-      ],
-      rules: {
-        // Tests often initialize an ObservableScope in an outer scope in
-        // beforeEach, which is not actually a problem
-        "element-call/no-observablescope-leak": "off",
-        "jsdoc/no-types": "off",
-        "jsdoc/empty-tags": "off",
-        "jsdoc/check-property-names": "off",
-        "jsdoc/check-values": "off",
-        "jsdoc/check-param-names": "off",
-        "jsdoc/require-param-description": "off",
-      },
-    },
-    {
-      files: ["playwright/**"],
-      rules: {
-        // Playwright as a `use` function that has nothing to do with React hooks.
-        "react-hooks/rules-of-hooks": "off",
-      },
-    },
-  ],
-  settings: {
-    react: {
-      version: "detect",
-    },
-  },
-};

.github/workflows/lint.yaml

@@ -24,8 +24,8 @@ jobs:
         run: "pnpm run format:check"
       - name: i18n
         run: "pnpm run i18n:check"
-      - name: ESLint
-        run: "pnpm run lint:eslint"
+      - name: Lint
+        run: "pnpm run lint:oxlint"
       - name: Type check
         run: "pnpm run lint:types"
       - name: Dead code analysis

.oxlintrc.json

@@ -0,0 +1,153 @@
+{
+  "$schema": "./node_modules/oxlint/configuration_schema.json",
+  "plugins": [
+    "eslint",
+    "import",
+    "jsdoc",
+    "jsx-a11y",
+    "promise",
+    "react",
+    "typescript",
+    "unicorn",
+    "vitest"
+  ],
+  "jsPlugins": [
+    "eslint-plugin-storybook",
+    "eslint-plugin-element-call"
+    // TODO: Re-enable once oxlint supports lint rules that rely on TypeScript type-awareness.
+    // "eslint-plugin-rxjs"
+  ],
+  "categories": {
+    "correctness": "error",
+    "perf": "error"
+  },
+  "options": {
+    "denyWarnings": true,
+    "typeAware": true
+  },
+  "env": {
+    "builtin": true
+  },
+  "rules": {
+    "element-call/copyright-header": [
+      "error",
+      "/*\nCopyright %%CURRENT_YEAR%% Element Creations Ltd.\n\nSPDX-License-Identifier: AGPL-3.0-only OR LicenseRef-Element-Commercial\nPlease see LICENSE in the repository root for full details.\n*/\n\n"
+    ],
+    "element-call/no-observablescope-leak": "error",
+    "jsdoc/empty-tags": "error",
+    "jsdoc/check-property-names": "error",
+    "jsdoc/require-param-description": "warn",
+    "react/display-name": "error",
+    // TODO: Re-enable once oxlint supports lint rules that rely on TypeScript type-awareness.
+    // "rxjs/no-exposed-subjects": "error",
+    // "rxjs/finnish": [
+    //   "error",
+    //   {
+    //     "names": {
+    //       "^this$": false
+    //     }
+    //   }
+    // ],
+    "no-restricted-imports": [
+      "error",
+      {
+        "patterns": [
+          {
+            "group": [
+              "matrix-widget-api/src",
+              "matrix-widget-api/src/",
+              "matrix-widget-api/src/**",
+              "matrix-widget-api/lib",
+              "matrix-widget-api/lib/",
+              "matrix-widget-api/lib/**"
+            ],
+            "message": "Please use matrix-widget-api instead"
+          },
+          {
+            "group": [
+              "matrix-js-sdk/src",
+              "matrix-js-sdk/src/",
+              "matrix-js-sdk/src/**",
+              "matrix-js-sdk/lib",
+              "matrix-js-sdk/lib/",
+              "matrix-js-sdk/lib/index"
+            ],
+            "message": "Please use matrix-js-sdk instead"
+          }
+        ]
+      }
+    ],
+    "typescript/no-floating-promises": "error",
+    "typescript/no-misused-promises": "error",
+    "typescript/promise-function-async": "error",
+    "typescript/require-await": "error",
+    "typescript/await-thenable": "error",
+    // To help ensure that we get proper vite/rollup lazy loading (e.g. for matrix-js-sdk).
+    "typescript/consistent-type-imports": [
+      "error",
+      {
+        "fixStyle": "inline-type-imports"
+      }
+    ],
+    // TODO: These had to be disabled in the eslint -> oxlint migration. Would be nice to
+    // enable them in future or at least document why we're disabling them.
+    "eslint/no-await-in-loop": "off",
+    "eslint/no-unused-vars": ["error", { "args": "none" }],
+    "import/default": "off",
+    "jsdoc/check-tag-names": "off",
+    "jsx-a11y/prefer-tag-over-role": "off",
+    "promise/no-callback-in-promise": "off",
+    "react/jsx-key": "off",
+    "react/jsx-no-constructed-context-values": "off",
+    "react/no-array-index-key": "off",
+    "react/no-children-prop": "off",
+    "react/no-object-type-as-default-prop": "off",
+    "typescript/no-misused-spread": "off",
+    "typescript/no-useless-default-assignment": "off",
+    "typescript/restrict-template-expressions": "off",
+    "typescript/unbound-method": "off",
+    "vitest/expect-expect": "off",
+    "vitest/no-conditional-expect": "off",
+    "vitest/no-disabled-tests": "off",
+    "vitest/require-mock-type-parameters": "off",
+    "vitest/require-to-throw-message": "off"
+  },
+  "overrides": [
+    {
+      "files": ["src/*/**"],
+      "rules": {
+        // In application code we should use the js-sdk logger, never console directly.
+        "no-console": "error"
+      }
+    },
+    {
+      "files": [
+        "**/*.test.ts",
+        "**/*.test.tsx",
+        "**/test.ts",
+        "**/test.tsx",
+        "**/test-**"
+      ],
+      "rules": {
+        // Tests often initialize an ObservableScope in an outer scope in
+        // beforeEach, which is not actually a problem
+        "element-call/no-observablescope-leak": "off",
+        "jsdoc/empty-tags": "off",
+        "jsdoc/check-property-names": "off",
+        "jsdoc/require-param-description": "off",
+        "jsx-a11y/media-has-caption": "off"
+        // TODO: Enable once oxlint supports them.
+        // "jsdoc/check-values": "off",
+        // "jsdoc/check-param-names": "off",
+        // "jsdoc/no-types": "off",
+      }
+    },
+    {
+      "files": ["playwright/**"],
+      "rules": {
+        // Playwright as a `use` function that has nothing to do with React hooks.
+        "react-hooks/rules-of-hooks": "off"
+      }
+    }
+  ]
+}

config/config.sample.json

@@ -12,7 +12,7 @@
     "feature_use_device_session_member_events": true
   },
   "ssla": "https://static.element.io/legal/element-software-and-services-license-agreement-uk-1.pdf",
-  "matrix_rtc_mode": "legacy",
+  "matrix_rtc_mode": "compatibility",
   "matrix_rtc_session": {
     "wait_for_key_rotation_ms": 3000,
     "membership_event_expiry_ms": 180000000,

eslint/CopyrightHeader.js

@@ -0,0 +1,66 @@
+/*
+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 { ESLintUtils } from "@typescript-eslint/utils";
+
+const rule = ESLintUtils.RuleCreator(
+  () => "https://github.com/element-hq/element-call",
+)({
+  name: "copyright-header",
+  meta: {
+    type: "problem",
+    fixable: "code",
+    docs: {
+      description: "Require a copyright header in files.",
+    },
+    messages: {
+      noHeader: "Copyright header is required.",
+    },
+    schema: [{ type: "string" }],
+  },
+  create(context) {
+    const code = context.getSourceCode();
+
+    return {
+      Program(node) {
+        const firstToken = code.getFirstToken(node, { includeComments: false });
+
+        if (!firstToken) {
+          return;
+        }
+
+        const headComments = code.getCommentsBefore(firstToken);
+        const hasSomeCopyrightHeader = headComments?.some((comment) =>
+          comment?.value?.includes("Copyright"),
+        );
+        if (hasSomeCopyrightHeader) {
+          return;
+        }
+        const headerTemplate = context.options[0];
+        const fix = headerTemplate
+          ? function (fixer) {
+              return fixer.insertTextBefore(
+                firstToken,
+                headerTemplate.replace(
+                  /%%CURRENT_YEAR%%/g,
+                  new Date().getFullYear(),
+                ),
+              );
+            }
+          : undefined;
+
+        context.report({
+          messageId: "noHeader",
+          node,
+          fix,
+        });
+      },
+    };
+  },
+});
+
+export default rule;

eslint/NoObservableScopeLeak.js

@@ -40,19 +40,23 @@ const rule = ESLintUtils.RuleCreator(
           node.parent?.type === "MemberExpression" &&
           node.parent.object === node &&
           node.parent.property.type === "Identifier" &&
-          !safeScopeMethods.includes(node.parent.property.name)
+          !safeScopeMethods.includes(node.parent.property.name) &&
+          /(^s|S)cope$/.test(node.name)
         ) {
-          // Verify that the variable is actually of type ObservableScope
-          // (expensive, so we check this last)
-          const services = ESLintUtils.getParserServices(context);
-          const type = services.getTypeAtLocation(node);
-          if (type.symbol?.name === "ObservableScope")
-            // This ObservableScope method call may be causing resource leaks.
-            context.report({
-              messageId: "scopeLeak",
-              loc: node.loc,
-              node,
-            });
+          // TODO: Once oxlint supports lint rules that rely on TypeScript type-awareness,
+          // Verify that the variable is actually of type ObservableScope rather than just
+          // checking its name. This is expensive so we should do this last.
+          //
+          // const services = ESLintUtils.getParserServices(context);
+          // const type = services.getTypeAtLocation(node);
+          // if (type.symbol?.name === "ObservableScope") { ... }
+
+          // This ObservableScope method call may be causing resource leaks.
+          context.report({
+            messageId: "scopeLeak",
+            loc: node.loc,
+            node,
+          });
         }
       },
     };

eslint/index.js

@@ -1,5 +1,6 @@
 module.exports = {
   rules: {
+    "copyright-header": require("./CopyrightHeader").default,
     "no-observablescope-leak": require("./NoObservableScopeLeak").default,
   },
 };

knip.ts

@@ -32,6 +32,9 @@ export default {
     // https://github.com/webpro-nl/knip/issues/766
     "@vector-im/compound-web",
     "matrix-widget-api",
+    // Used by oxlint
+    "eslint-plugin-element-call",
+    "eslint-plugin-storybook",
   ],
   ignoreExportsUsedInFile: true,
 } satisfies KnipConfig;

package.json

@@ -19,9 +19,9 @@
     "serve": "vite preview",
     "format": "oxfmt",
     "format:check": "oxfmt --check; rc=$?; [[ $rc -ne 0 ]] && printf '\\033[46;30m INFO \\033[0m To fix, run: pnpm format\\n' >&2; exit $rc",
-    "lint": "pnpm lint:types && pnpm lint:eslint && pnpm lint:knip",
-    "lint:eslint": "eslint --max-warnings 0 src playwright",
-    "lint:eslint-fix": "eslint --max-warnings 0 src playwright --fix",
+    "lint": "pnpm lint:types && pnpm lint:oxlint && pnpm lint:knip",
+    "lint:oxlint": "oxlint src playwright",
+    "lint:oxlint-fix": "oxlint --fix src playwright",
     "lint:knip": "knip",
     "lint:types": "tsc",
     "i18n": "npx i18next-cli extract",
@@ -60,7 +60,6 @@
     "@storybook/addon-docs": "^10.3.6",
     "@storybook/addon-vitest": "^10.3.6",
     "@storybook/react-vite": "^10.3.6",
-    "@stylistic/eslint-plugin": "^3.0.0",
     "@testing-library/dom": "^10.1.0",
     "@testing-library/jest-dom": "^6.6.3",
     "@testing-library/react": "^16.0.0",
@@ -75,8 +74,6 @@
     "@types/react": "^19.0.0",
     "@types/react-dom": "^19.0.0",
     "@types/sdp-transform": "^2.4.5",
-    "@typescript-eslint/eslint-plugin": "^8.31.0",
-    "@typescript-eslint/parser": "^8.31.0",
     "@typescript-eslint/utils": "^8.61.0",
     "@use-gesture/react": "^10.2.11",
     "@vector-im/compound-design-tokens": "^10.0.0",
@@ -87,20 +84,8 @@
     "@vitest/ui": "4.1.7",
     "classnames": "^2.3.1",
     "copy-to-clipboard": "^3.3.3",
-    "eslint": "^8.14.0",
-    "eslint-config-google": "^0.14.0",
-    "eslint-config-prettier": "^10.0.0",
-    "eslint-plugin-deprecate": "^0.9.0",
     "eslint-plugin-element-call": "link:eslint",
-    "eslint-plugin-import": "^2.26.0",
-    "eslint-plugin-jsdoc": "^61.5.0",
-    "eslint-plugin-jsx-a11y": "^6.5.1",
-    "eslint-plugin-matrix-org": "2.1.0",
-    "eslint-plugin-react": "^7.29.4",
-    "eslint-plugin-react-hooks": "^5.0.0",
-    "eslint-plugin-rxjs": "^5.0.3",
     "eslint-plugin-storybook": "^10.3.6",
-    "eslint-plugin-unicorn": "^56.0.0",
     "fetch-mock": "11.1.5",
     "global-jsdom": "^26.0.0",
     "i18next": "^25.0.0",
@@ -117,6 +102,8 @@
     "normalize.css": "^8.0.1",
     "observable-hooks": "^4.2.3",
     "oxfmt": "^0.55.0",
+    "oxlint": "^1.70.0",
+    "oxlint-tsgolint": "^0.23.0",
     "pako": "^2.0.4",
     "postcss": "^8.4.41",
     "postcss-preset-env": "^10.0.0",
@@ -131,7 +118,6 @@
     "sass": "^1.42.1",
     "storybook": "^10.3.6",
     "typescript": "^5.8.3",
-    "typescript-eslint-language-service": "^5.0.5",
     "unique-names-generator": "^4.6.0",
     "uuid": "^14.0.0",
     "vaul": "^1.0.0",

playwright/sfu-reconnect-bug.spec.ts

@@ -88,15 +88,18 @@ test("When creator left, avoid reconnect to the same SFU", async ({
   await guestCPage.getByRole("radio", { name: "Spotlight" }).check();
 
   await guestCPage.waitForTimeout(1000);
-
+  if (wsConnectionCount === 2) {
+    console.warn("wsConnectionCount is 2, expecting 1 after join");
+  }
+  const wsConnectionCountBeforeLeave = wsConnectionCount;
   // ========
   // the creator leaves the call
   await creatorPage.getByTestId("incall_leave").click();
 
   // https://github.com/element-hq/element-call/issues/3344
   // The app used to request a new jwt token then to reconnect to the SFU
-  expect(wsConnectionCount).toBe(1);
+  expect(wsConnectionCount).toBe(wsConnectionCountBeforeLeave);
   // Wait a bit to be sure that if there was a reconnect, it would have happened by now
   await guestCPage.waitForTimeout(6000);
-  expect(wsConnectionCount).toBe(1);
+  expect(wsConnectionCount).toBe(wsConnectionCountBeforeLeave);
 });

playwright/widget/test-helpers.ts

@@ -160,6 +160,7 @@ export class TestHelpers {
     const expectedToasts = [
       { title: "Failed to load service worker", button: "OK" },
       { title: "Back up your chats", button: "Dismiss" },
+      { title: "Turn on key storage", button: "Dismiss" },
       { title: "Element does not support this browser", button: "Dismiss" },
     ];
 

renovate.json

@@ -64,7 +64,7 @@
     }
   ],
   "semanticCommits": "disabled",
-  "ignoreDeps": ["eslint-plugin-matrix-org"],
+  "ignoreDeps": [],
   "vulnerabilityAlerts": {
     "schedule": ["at any time"],
     "prHourlyLimit": 0,

src/AppBar.module.css

@@ -67,6 +67,29 @@
     "subtitle subtitle subtitle";
 }
 
+/* Hide everything but the subtitle in small windows */
+@media (max-height: 450px) {
+  .bar {
+    display: none;
+  }
+
+  .bar:has(.subtitle) {
+    display: initial;
+
+    .title,
+    .primaryButton,
+    .secondaryButton {
+      display: none;
+    }
+
+    > header {
+      grid-template-columns: 1fr;
+      grid-template-rows: var(--cpd-space-5x) minmax(var(--cpd-space-5x), auto);
+      grid-template-areas: "." "subtitle";
+    }
+  }
+}
+
 .primaryButton {
   grid-area: primaryButton;
   justify-self: start;
@@ -141,4 +164,16 @@ body[data-platform="ios"] {
       display: none;
     }
   }
+
+  /* Hide everything but the subtitle in small windows */
+  @media (max-height: 450px) {
+    .bar:has(.subtitle) > header {
+      grid-template-rows: var(--cpd-space-4x) minmax(var(--cpd-space-5x), auto);
+      grid-template-areas: "." "subtitle";
+    }
+
+    .subtitle {
+      color: var(--cpd-color-text-primary);
+    }
+  }
 }

src/FullScreenView.tsx

@@ -47,7 +47,7 @@ export const FullScreenView: FC<FullScreenViewProps> = ({
 };
 
 interface ErrorPageProps {
-  error: Error | unknown;
+  error: unknown;
   widget: WidgetHelpers | null;
 }
 

src/UrlParams.ts

@@ -19,6 +19,7 @@ import { Config } from "./config/Config";
 import { type EncryptionSystem } from "./e2ee/sharedKeyManagement";
 import { E2eeType } from "./e2ee/e2eeType";
 import { platform } from "./Platform";
+import { redact } from "./utils/redact";
 
 interface RoomIdentifier {
   roomAlias: string | null;
@@ -494,7 +495,7 @@ export const computeUrlParams = (search = "", hash = ""): UrlParams => {
     "intent:",
     intent,
     "\nproperties:",
-    properties,
+    redact(properties, "password"),
     "configuration:",
     configuration,
   );

src/button/Button.tsx

@@ -173,7 +173,7 @@ export const LoudspeakerButton: FC<LoudspeakerButtonProps> = ({
         iconOnly
         Icon={loudspeakerModeEnabled ? VolumeOnSolidIcon : VolumeOffSolidIcon}
         {...props}
-        kind={loudspeakerModeEnabled ? "primary" : "secondary"}
+        kind={loudspeakerModeEnabled ? "secondary" : "primary"}
         aria-checked={loudspeakerModeEnabled}
       />
     </Tooltip>

src/room/InCallView.tsx

@@ -74,6 +74,7 @@ import {
   useAppBarSubtitle,
 } from "../AppBar.tsx";
 import { useBehavior } from "../useBehavior.ts";
+import { constant } from "../state/Behavior.ts";
 import { Toast } from "../Toast.tsx";
 import overlayStyles from "../Overlay.module.css";
 import { useTrackProcessorObservable$ } from "../livekit/TrackProcessorContext.tsx";
@@ -433,6 +434,11 @@ export const InCallView: FC<InCallViewProps> = ({
         const showSpeakingIndicators = useBehavior(vm.showSpeakingIndicators$);
         const showNameTags = useBehavior(vm.showNameTags$);
         const showRingingStatus = vm.ringingStatusLocation === "tile";
+        const showOutline = useBehavior(
+          model instanceof GridTileViewModel
+            ? model.showOutline$
+            : constant(false),
+        );
 
         return model instanceof GridTileViewModel ? (
           <GridTile
@@ -446,6 +452,7 @@ export const InCallView: FC<InCallViewProps> = ({
             showSpeakingIndicators={showSpeakingIndicators}
             showNameTags={showNameTags}
             showRingingStatus={showRingingStatus}
+            showOutline={showOutline}
             focusable={!contentObscured}
           />
         ) : (

src/settings/__snapshots__/DeveloperSettingsTab.test.tsx.snap

@@ -274,7 +274,6 @@ exports[`DeveloperSettingsTab > renders and matches snapshot 1`] = `
         >
           <input
             aria-describedby="radix-_r_a_ radix-_r_c_ radix-_r_e_"
-            checked=""
             class="_input_1ug7n_18"
             id="radix-_r_9_"
             name="_r_0_"
@@ -315,6 +314,7 @@ exports[`DeveloperSettingsTab > renders and matches snapshot 1`] = `
         >
           <input
             aria-describedby="radix-_r_a_ radix-_r_c_ radix-_r_e_"
+            checked=""
             class="_input_1ug7n_18"
             id="radix-_r_b_"
             name="_r_0_"

src/settings/settings.ts

@@ -137,7 +137,7 @@ export const enableExtendedLivekitLogs = new Setting<boolean>(
 
 export const matrixRTCMode = new Setting<MatrixRTCMode>(
   "matrix-rtc-mode",
-  MatrixRTCMode.Legacy,
+  MatrixRTCMode.Compatibility,
 );
 
 export const customLivekitUrl = new Setting<string | null>(

src/state/AndroidControlledAudioOutput.test.ts

@@ -253,7 +253,7 @@ describe("Test mappings", () => {
 });
 
 describe("Test select a device", () => {
-  it(`Switch to correct device `, () => {
+  it(`Switch to correct device`, () => {
     withTestScheduler(({ cold, schedule, expectObservable, flush }) => {
       const controlledAudioOutput = new AndroidControlledAudioOutput(
         cold("a", { a: FULL_DEVICE_LIST }),

src/state/CallViewModel/CallViewModel.test.ts

@@ -22,6 +22,7 @@ import { SyncState } from "matrix-js-sdk";
 import {
   ConnectionState,
   type LocalTrackPublication,
+  type Participant,
   type RemoteParticipant,
 } from "livekit-client";
 import * as ComponentsCore from "@livekit/components-core";
@@ -1031,6 +1032,10 @@ describe.each([
             a: [localRtcMember],
             b: [localRtcMember, aliceRtcMember],
           }),
+          videoEnabled: new Map<Participant, Behavior<boolean>>([
+            [localParticipant, constant(true)],
+            [aliceParticipant, constant(true)],
+          ]),
         },
         (vm) => {
           schedule(modeInputMarbles, {
@@ -1060,6 +1065,33 @@ describe.each([
     });
   });
 
+  test("expanded spotlight layout hides PiP tile in one-on-one voice call", () => {
+    withTestScheduler(({ behavior, schedule, expectObservable }) => {
+      withCallViewModel(
+        {
+          remoteParticipants$: constant([aliceParticipant]),
+          roomMembers: [local, alice],
+          rtcMembers$: constant([localRtcMember, aliceRtcMember]),
+          videoEnabled: new Map<Participant, Behavior<boolean>>([
+            [localParticipant, constant(false)],
+            [aliceParticipant, constant(false)],
+          ]),
+          windowSize$: constant({ width: 700, height: 380 }), // Mobile phone in landscape
+        },
+        (vm) => {
+          // Layout should show remote tile only
+          expectObservable(summarizeLayout$(vm.layout$)).toBe("a", {
+            a: {
+              type: "spotlight-expanded",
+              spotlight: [`${aliceId}:0`],
+              pip: undefined,
+            },
+          });
+        },
+      );
+    });
+  });
+
   test("spotlight remembers whether it's expanded", () => {
     withTestScheduler(({ schedule, expectObservable }) => {
       // Start in spotlight mode, then switch to grid and back to spotlight a
@@ -1096,7 +1128,7 @@ describe.each([
               b: {
                 type: "spotlight-expanded",
                 spotlight: [`${aliceId}:0`],
-                pip: `${localId}:0`,
+                pip: undefined,
               },
               c: {
                 type: "grid",

src/state/CallViewModel/CallViewModel.ts

@@ -155,6 +155,7 @@ import {
   createRingingMedia,
   type RingingMediaViewModel,
 } from "../media/RingingMediaViewModel.ts";
+import { type GridTileViewModel } from "../TileViewModel.ts";
 
 const logger = rootLogger.getChild("[CallViewModel]");
 //TODO
@@ -941,8 +942,8 @@ export function createCallViewModel$(
   );
 
   /**
-   * Local user media suitable for displaying in a PiP (undefined if not found
-   * or if user prefers to not see themselves).
+   * Local user media suitable for displaying in a PiP (undefined if not found,
+   * video is muted, or if user prefers to not see themselves).
    */
   const localUserMediaForPip$ = scope.behavior<
     LocalUserMediaViewModel | undefined
@@ -954,8 +955,10 @@ export function createCallViewModel$(
             m.type === "user" && m.local,
         );
         if (!localUserMedia) return of(undefined);
-        return localUserMedia.alwaysShow$.pipe(
-          map((alwaysShow) => (alwaysShow ? localUserMedia : undefined)),
+        return combineLatest(
+          [localUserMedia.videoEnabled$, localUserMedia.alwaysShow$],
+          (videoEnabled, alwaysShow) =>
+            videoEnabled && alwaysShow ? localUserMedia : undefined,
         );
       }),
     ),
@@ -1424,7 +1427,7 @@ export function createCallViewModel$(
     windowMode$.pipe(
       switchMap((mode) => {
         // In small windows the header would be too obstructive
-        if (mode === "pip" || mode === "flat") return of(false);
+        if (mode === "pip") return of(false);
         // In edge-to-edge layouts, couple the visibility of the header
         // to that of the footer
         return edgeToEdge$.pipe(
@@ -1482,6 +1485,7 @@ export function createCallViewModel$(
         ({ tiles: prevTiles }, [media, visibleTiles]) => {
           let layout: Layout;
           let newTiles: TileStore;
+          let pip: GridTileViewModel | undefined;
           switch (media.type) {
             case "grid":
             case "spotlight-landscape":
@@ -1507,6 +1511,7 @@ export function createCallViewModel$(
                 landscapePipAlignment$,
                 prevTiles,
               );
+              pip = layout.pip;
               break;
             case "one-on-one-portrait":
               [layout, newTiles] = oneOnOnePortraitLayout(
@@ -1515,12 +1520,17 @@ export function createCallViewModel$(
                 portraitPipAlignment$,
                 prevTiles,
               );
+              pip = layout.pip;
               break;
             case "pip":
               [layout, newTiles] = pipLayout(media, prevTiles);
               break;
           }
 
+          for (const tile of newTiles.gridTiles) {
+            tile.setShowOutline(tile === pip);
+          }
+
           return { layout, tiles: newTiles };
         },
         { layout: null, tiles: TileStore.empty() },

src/state/CallViewModel/localMember/LocalMember.ts

@@ -170,7 +170,7 @@ export const createLocalMembership$ = ({
   logger: parentLogger,
   muteStates,
   matrixRTCSession,
-  roomId: roomId,
+  roomId,
 }: Props): {
   /**
    * This request to start audio and video tracks.

src/state/CallViewModel/localMember/RtcTransportAutoDiscovery.ts

@@ -102,7 +102,7 @@ export class RtcTransportAutoDiscovery {
         const transportList = await doNetworkOperationWithRetry(async () =>
           client._unstable_getRTCTransports(),
         );
-        const first = transportList.filter(isLivekitTransportConfig)[0];
+        const first = transportList.find(isLivekitTransportConfig);
         if (first) {
           return first;
         } else {

src/state/IOSControlledAudioOutput.test.ts

@@ -0,0 +1,162 @@
+/*
+Copyright 2026 Element Corp.
+
+SPDX-License-Identifier: AGPL-3.0-only OR LicenseRef-Element-Commercial
+Please see LICENSE in the repository root for full details.
+*/
+
+import { afterEach, beforeEach, describe, expect, it, vi } from "vitest";
+import { type Observable, of } from "rxjs";
+
+import { ObservableScope } from "./ObservableScope";
+import { constant } from "./Behavior";
+import { type SelectedAudioOutputDevice } from "./MediaDevices";
+import {
+  availableOutputDevices$,
+  type Controls,
+  type OutputDevice,
+  outputDevice$,
+} from "../controls";
+import {
+  EARPIECE_CONFIG_ID,
+  IOSControlledAudioOutput,
+} from "./IOSControlledAudioOutput";
+
+// `vi.mock` calls are hoisted above all imports, so the static imports below
+// already see these mocks. Force the iOS platform so that the virtual earpiece
+// is available, and stub the livekit device observer (only subscribed for its
+// side effects).
+vi.mock("../Platform", () => ({ platform: "ios" }));
+vi.mock("@livekit/components-core", () => ({
+  createMediaDeviceObserver: (): Observable<MediaDeviceInfo[]> => of([]),
+}));
+
+// On iOS the host reports a single device for the current route. When output is
+// on the loudspeaker it is flagged `forEarpiece`, which makes the controller
+// expose a virtual earpiece device.
+const SPEAKER: OutputDevice = {
+  id: "speaker",
+  name: "Speaker",
+  isSpeaker: true,
+  forEarpiece: true,
+};
+
+// A connected headset (e.g. Bluetooth) is reported as a plain named device,
+// with neither the speaker nor earpiece flag set.
+const HEADSET: OutputDevice = {
+  id: "bt",
+  name: "AirPods",
+};
+
+let testScope: ObservableScope;
+
+beforeEach(() => {
+  testScope = new ObservableScope();
+  window.controls = {
+    onAudioDeviceSelect: vi.fn(),
+    onOutputDeviceSelect: vi.fn(),
+  } as unknown as Controls;
+});
+
+afterEach(() => {
+  testScope.end();
+});
+
+/**
+ * Subscribe to the controller's `selected$` and return a getter for the latest
+ * emitted value.
+ */
+function latestSelection(
+  output: InstanceType<typeof IOSControlledAudioOutput>,
+): () => SelectedAudioOutputDevice | undefined {
+  let latest: SelectedAudioOutputDevice | undefined;
+  output.selected$.subscribe((s) => {
+    latest = s;
+  });
+  return () => latest;
+}
+
+describe("Default selection", () => {
+  it("defaults to the earpiece for voice (audio) calls", () => {
+    const output = new IOSControlledAudioOutput(
+      constant(false),
+      testScope,
+      "audio",
+    );
+    const selected = latestSelection(output);
+
+    availableOutputDevices$.next([SPEAKER]);
+
+    expect(selected()).toEqual({
+      id: EARPIECE_CONFIG_ID,
+      virtualEarpiece: true,
+    });
+    expect(window.controls.onAudioDeviceSelect).toHaveBeenLastCalledWith(
+      EARPIECE_CONFIG_ID,
+    );
+  });
+
+  it("defaults to the speaker for video calls", () => {
+    const output = new IOSControlledAudioOutput(
+      constant(false),
+      testScope,
+      "video",
+    );
+    const selected = latestSelection(output);
+
+    availableOutputDevices$.next([SPEAKER]);
+
+    expect(selected()).toEqual({ id: SPEAKER.id, virtualEarpiece: false });
+  });
+
+  it("keeps a headset for voice calls instead of forcing the earpiece", () => {
+    const output = new IOSControlledAudioOutput(
+      constant(false),
+      testScope,
+      "audio",
+    );
+    const selected = latestSelection(output);
+
+    // The host proposes the headset as the route (listed first), even though a
+    // forEarpiece device is also present so the virtual earpiece exists.
+    availableOutputDevices$.next([HEADSET, SPEAKER]);
+
+    expect(selected()).toEqual({ id: HEADSET.id, virtualEarpiece: false });
+  });
+});
+
+describe("Explicit selection", () => {
+  it("an explicit user selection overrides the earpiece default", () => {
+    const output = new IOSControlledAudioOutput(
+      constant(false),
+      testScope,
+      "audio",
+    );
+    const selected = latestSelection(output);
+
+    availableOutputDevices$.next([SPEAKER]);
+    // Earpiece by default for a voice call...
+    expect(selected()).toEqual({
+      id: EARPIECE_CONFIG_ID,
+      virtualEarpiece: true,
+    });
+
+    // ...until the user explicitly picks the speaker.
+    output.select(SPEAKER.id);
+    expect(selected()).toEqual({ id: SPEAKER.id, virtualEarpiece: false });
+  });
+
+  it("a host selection overrides the earpiece default", () => {
+    const output = new IOSControlledAudioOutput(
+      constant(false),
+      testScope,
+      "audio",
+    );
+    const selected = latestSelection(output);
+
+    availableOutputDevices$.next([SPEAKER]);
+    outputDevice$.next(SPEAKER.id);
+
+    expect(selected()).toEqual({ id: SPEAKER.id, virtualEarpiece: false });
+  });
+});

src/state/IOSControlledAudioOutput.ts

@@ -8,6 +8,7 @@ Please see LICENSE in the repository root for full details.
 import { logger as rootLogger } from "matrix-js-sdk/lib/logger";
 import { combineLatest, merge, startWith, Subject, tap } from "rxjs";
 
+import type { RTCCallIntent } from "matrix-js-sdk/lib/matrixrtc";
 import {
   availableOutputDevices$ as controlledAvailableOutputDevices$,
   outputDevice$ as controlledOutputSelection$,
@@ -24,7 +25,7 @@ import {
 
 // This hardcoded id is used in EX ios! It can only be changed in coordination with
 // the ios swift team.
-const EARPIECE_CONFIG_ID = "earpiece-id";
+export const EARPIECE_CONFIG_ID = "earpiece-id";
 
 /**
  * A special implementation of audio output that allows the hosting application
@@ -94,7 +95,7 @@ export class IOSControlledAudioOutput implements MediaDevice<
         ),
       ],
       (available, preferredId) => {
-        const id = preferredId ?? available.keys().next().value;
+        const id = preferredId ?? this.chooseDefaultId(available);
         return id === undefined
           ? undefined
           : { id, virtualEarpiece: id === EARPIECE_CONFIG_ID };
@@ -106,9 +107,41 @@ export class IOSControlledAudioOutput implements MediaDevice<
     ),
   );
 
+  /**
+   * Chooses the default output device when no explicit selection (from the user
+   * or the hosting application) has been made yet.
+   *
+   * For voice calls (`initialIntent === "audio"`) we want to start on the
+   * earpiece rather than the speaker, like a regular phone call. We only
+   * override when the device that would otherwise be the default is the
+   * speaker: if the host already routed to a headset (e.g. Bluetooth) — which
+   * is reported as a plain named device, not "speaker"/"earpiece" — we keep it.
+   * This mirrors the Android behaviour in {@link AndroidControlledAudioOutput}.
+   */
+  private chooseDefaultId(
+    available: Map<string, AudioOutputDeviceLabel>,
+  ): string | undefined {
+    const firstId = available.keys().next().value;
+    if (this.initialIntent === "audio") {
+      const firstLabel =
+        firstId !== undefined ? available.get(firstId) : undefined;
+      if (firstLabel?.type === "speaker") {
+        for (const [id, label] of available)
+          if (label.type === "earpiece") {
+            this.logger.info(
+              `IOS routing: default to earpiece ${id} instead of speaker for voice call`,
+            );
+            return id;
+          }
+      }
+    }
+    return firstId;
+  }
+
   public constructor(
     private readonly usingNames$: Behavior<boolean>,
     private readonly scope: ObservableScope,
+    private readonly initialIntent: RTCCallIntent | undefined = undefined,
   ) {
     this.selected$.subscribe((device) => {
       // Let the hosting application know which output device has been selected.

src/state/MediaDevices.ts

@@ -376,7 +376,11 @@ export class MediaDevices {
           getUrlParams().callIntent,
           window.controls,
         )
-      : new IOSControlledAudioOutput(this.usingNames$, this.scope)
+      : new IOSControlledAudioOutput(
+          this.usingNames$,
+          this.scope,
+          getUrlParams().callIntent,
+        )
     : new AudioOutput(this.usingNames$, this.scope);
 
   public readonly videoInput: MediaDevice<DeviceLabel, SelectedDevice> =

src/state/TileStore.ts

@@ -131,9 +131,9 @@ export class TileStoreBuilder {
   private numGridEntries = 0;
   // A sparse array of grid entries which should be kept in the same spots as
   // which they appeared in the previous grid
-  private readonly stationaryGridEntries: GridTileData[] = new Array(
-    this.prevGrid.length,
-  );
+  private readonly stationaryGridEntries: GridTileData[] = Array.from({
+    length: this.prevGrid.length,
+  });
   // Grid entries which should now enter the visible section of the grid
   private readonly visibleGridEntries: GridTileData[] = [];
   // Grid entries which should now enter the invisible section of the grid

src/state/TileViewModel.ts

@@ -5,6 +5,8 @@ SPDX-License-Identifier: AGPL-3.0-only OR LicenseRef-Element-Commercial
 Please see LICENSE in the repository root for full details.
 */
 
+import { BehaviorSubject } from "rxjs";
+
 import { type Behavior } from "./Behavior";
 import { type MediaViewModel } from "./media/MediaViewModel";
 import { type RingingMediaViewModel } from "./media/RingingMediaViewModel";
@@ -17,12 +19,18 @@ function createId(): string {
 
 export class GridTileViewModel {
   public readonly id = createId();
+  private readonly _showOutline$ = new BehaviorSubject(false);
+  public readonly showOutline$: Behavior<boolean> = this._showOutline$;
 
   public constructor(
     public readonly media$: Behavior<
       UserMediaViewModel | RingingMediaViewModel
     >,
   ) {}
+
+  public setShowOutline(value: boolean): void {
+    this._showOutline$.next(value);
+  }
 }
 
 export class SpotlightTileViewModel {

src/tile/GridTile.module.css

@@ -66,6 +66,11 @@ borders don't support gradients */
   opacity: 1;
 }
 
+.tile.outline {
+  outline: var(--cpd-border-width-1) solid
+    var(--cpd-color-border-interactive-secondary);
+}
+
 @media (hover: hover) {
   .tile:hover {
     outline: var(--cpd-border-width-2) solid

src/tile/GridTile.test.tsx

@@ -78,6 +78,7 @@ test("GridTile is accessible", async () => {
         showSpeakingIndicators
         showNameTags
         showRingingStatus
+        showOutline
         focusable
       />
     </ReactionsSenderProvider>,
@@ -110,6 +111,7 @@ test("GridTile displays ringing media", async () => {
         showSpeakingIndicators
         showNameTags
         showRingingStatus
+        showOutline
         focusable
       />
     </ReactionsSenderProvider>,

src/tile/GridTile.tsx

@@ -398,6 +398,7 @@ interface GridTileProps {
   showSpeakingIndicators: boolean;
   showNameTags: boolean;
   showRingingStatus: boolean;
+  showOutline: boolean;
   focusable: boolean;
 }
 
@@ -406,7 +407,9 @@ export const GridTile: FC<GridTileProps> = ({
   vm,
   showSpeakingIndicators,
   showRingingStatus,
+  showOutline,
   onOpenProfile,
+  className,
   ...props
 }) => {
   const ourRef = useRef<HTMLDivElement | null>(null);
@@ -423,6 +426,7 @@ export const GridTile: FC<GridTileProps> = ({
         displayName={displayName}
         mxcAvatarUrl={mxcAvatarUrl}
         showStatus={showRingingStatus}
+        className={classNames(className, { [styles.outline]: showOutline })}
         {...props}
       />
     );
@@ -435,6 +439,7 @@ export const GridTile: FC<GridTileProps> = ({
         onOpenProfile={onOpenProfile}
         displayName={displayName}
         mxcAvatarUrl={mxcAvatarUrl}
+        className={classNames(className, { [styles.outline]: showOutline })}
         {...props}
       />
     );
@@ -446,6 +451,7 @@ export const GridTile: FC<GridTileProps> = ({
         showSpeakingIndicators={showSpeakingIndicators}
         displayName={displayName}
         mxcAvatarUrl={mxcAvatarUrl}
+        className={classNames(className, { [styles.outline]: showOutline })}
         {...props}
       />
     );

src/utils/redact.test.ts

@@ -0,0 +1,58 @@
+/*
+Copyright 2026 New Vector Ltd.
+
+SPDX-License-Identifier: AGPL-3.0-only OR LicenseRef-Element-Commercial
+Please see LICENSE in the repository root for full details.
+*/
+
+import { expect, test } from "vitest";
+
+import { redact } from "./redact";
+
+test("empty object", () => {
+  expect(redact({})).toEqual({});
+});
+
+test("no keys", () => {
+  expect(redact({ foo: "bar" })).toEqual({ foo: "bar" });
+});
+
+test("redact one key", () => {
+  expect(redact({ foo: "bar" }, "foo")).toEqual({ foo: "<redacted>" });
+});
+
+test("redact two keys", () => {
+  expect(redact({ foo: "bar", bar: "foo" }, "foo", "bar")).toEqual({
+    foo: "<redacted>",
+    bar: "<redacted>",
+  });
+});
+
+test("no redaction of unrelated keys", () => {
+  expect(redact({ foo: "bar", bar: "foo" }, "foo")).toEqual({
+    foo: "<redacted>",
+    bar: "foo",
+  });
+});
+
+test("no redaction of missing keys", () => {
+  expect(
+    redact({ foo: "bar" } as { foo: string; bar: string | undefined }, "bar"),
+  ).toEqual({
+    foo: "bar",
+  });
+});
+
+test("no redaction of null values", () => {
+  expect(redact({ foo: "bar", bar: null }, "bar")).toEqual({
+    foo: "bar",
+    bar: null,
+  });
+});
+
+test("no redaction of undefined values", () => {
+  expect(redact({ foo: "bar", bar: undefined }, "bar")).toEqual({
+    foo: "bar",
+    bar: undefined,
+  });
+});

src/utils/redact.ts

@@ -0,0 +1,25 @@
+/*
+Copyright 2026 New Vector Ltd.
+
+SPDX-License-Identifier: AGPL-3.0-only OR LicenseRef-Element-Commercial
+Please see LICENSE in the repository root for full details.
+*/
+
+/**
+ * Redacts properties in the supplied object by replacing them with
+ * a constant value.
+ * @param obj Object in which to perform redaction
+ * @param keys Keys to be redacted in the object
+ * @returns A new object with the specified properties redacted
+ */
+export function redact<T extends object>(
+  obj: T,
+  ...keys: (keyof T)[]
+): Record<keyof T, unknown> {
+  const result: Record<keyof T, unknown> = { ...obj };
+  for (const key of keys)
+    if (key in result && result[key] != null) {
+      result[key] = "<redacted>";
+    }
+  return result;
+}

src/utils/test-viewmodel.ts

@@ -128,8 +128,8 @@ export function getBasicRTCSession(
 
 /**
  * Construct a basic CallViewModel to test components that make use of it.
- * @param members
- * @param initialRtcMemberships
+ * @param members - Room members to include in the call.
+ * @param initialRtcMemberships - RTC memberships to start with.
  * @returns
  */
 export function getBasicCallViewModelEnvironment(

tsconfig.json

@@ -38,7 +38,7 @@
       "livekit-client/dist/src/proto/livekit_models_pb": [
         "./node_modules/@livekit/protocol/src/gen/livekit_models_pb.d.ts"
       ]
-    },
+    }
 
     // TODO: Enable the following options later.
     // "forceConsistentCasingInFileNames": true,
@@ -48,8 +48,6 @@
     // "noPropertyAccessFromIndexSignature": true,
     // "noUncheckedIndexedAccess": true,
     // "noUnusedParameters": true,
-
-    "plugins": [{ "name": "typescript-eslint-language-service" }]
   },
   "include": [
     "./src/**/*.ts",